body {
  /*font-family: sans-serif;*/
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  /*background: #f9f9f9;*/
  /*background: #d5d3ce;*/
  background: rgba(213, 211, 206, 0.56);
}

.site-wrapper {
  max-width: 2000px;   /* optional: limits content width */
  margin: 0 auto;       /* centers the site horizontally */
  padding: 10px 30px;        /* adds space on all sides */
  box-sizing: border-box; /* includes padding in width calculations */
}

.top-wrapper {
  display: flex;
  justify-content: center; /* centers the grid horizontally */
}

.top-images {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 vertical columns */
  grid-auto-flow: row;                    /* fill rows first */
  gap: 10px;                              /* spacing between images */
  justify-items: center;                  /* center images in their cell */
  max-width: 500px;                        /* optional: width of the grid */
  margin: 0 auto;                         /* center the whole grid */
}

.top-images img {
  max-width: 100%;
  /*height: auto;*/
  display: block;
  object-fit: contain;
}

.name-heading {
  font-size: 2.5rem;
}

/* Desktop: keep it inline, so it shows as a space */
.mobile-break {
  display: inline;
}

/* Mobile: make it a block so it wraps to a new line */
@media (max-width: 768px) {
  .mobile-break {
    display: block;
  }
}

.project {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(150px, 4fr) minmax(150px, 5fr);
    gap: 2rem;
    /*gap: 12px;*/
    align-items: start;
}

.info {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr);
    gap: 0px;
    /*gap: 12px;*/
    align-items: start;
  padding: 0;
  text-align: center; /* Centers text horizontally */
  max-width: 700px;   /* Optional: limit section width */
  margin: 0 auto;     /* Centers the section itself horizontally */
}


.tom-image{
  text-align: center;
    height: 300px;
}

@media (max-width: 768px) {
  .project {
    display: grid;
    grid-template-columns: 1fr; /* single column */
    grid-template-rows: auto;   /* rows adjust to content */
    /*margin: 0;*/
    /*padding: 0;*/
      gap: 15px;                      /* reduce gap if needed */
  }

  .info {
    grid-template-columns: 1fr; /* single column */
    grid-template-rows: auto;

  }



  h1 {
    text-align: center;
  }
  h2 {
    text-align: center;
  }

  .project-title { order: 1; }  /* Title first */
  .project-images { order: 2; }  /* Images second */
  .col2 { order: 3; }  /* Writeup last */

  .lightbox-controls button {
  font-size: 3em;         /* bigger buttons for touch */
  padding: 20px;
  background: rgba(255,255,255,0.2);
}
}

.project-title {
  font-size: 1.5rem;   /* larger text */
  font-weight: bold;    /* bold */
  font-style: italic;
  color: #111111;          /* text color */
  margin-bottom: 0;  /* spacing below */
}

.project-materials {
    font-style: italic;
    line-height: 1.2;    /* makes lines more readable */
}

/*.project-writeup {*/
/*  max-height: 300px;             !* collapsed initially *!*/
/*  overflow: hidden;*/
/*  !*transition: max-height 0.3s ease;*!*/
/*}*/
/*.collapsible-btn.active + .project-writeup {*/
/*  max-height: 20090px;        !* big enough to fit most content *!*/
/*}*/

.collapsible-btn {
  background-color: #eee;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-size: 1rem;
}

.collapsible-btn.active {
  background-color: #ccc;
}

/* Image grid in column 3 */
.project-images {
  display: block;
  /*grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));*/
  gap: 10px;
  width: 100%;
  align-items: flex-start;
  box-sizing: border-box;
}


.project-images img {
  /*width: auto;*/
  max-width: 100%;
  height: auto;
  object-fit: contain; /* crop image to fill the cell nicely */
  /*height: auto; !* height will be set dynamically *!*/
  /*flex: 0 0 auto; !* allow width to vary per aspect ratio *!*/
    margin: 0;
}

.lightbox {
  display: none;               /* hidden by default */
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.lightbox-img {
  max-width: 90%;
  max-height: 90%;
}

.lightbox .close {
  position: absolute;
  top: 20px; right: 30px;
  font-size: 2em;
  color: #fff;
  cursor: pointer;
}

.lightbox-controls {
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: space-between;
  top: 50%;
  transform: translateY(-50%);
}
.lightbox-controls button {
  background: rgba(255,255,255,0.3);
  border: none;
  font-size: 2em;
  cursor: pointer;
}

.project-separator {
    border: none;           /* remove default browser style */
    height: 1px;            /* line thickness */
    margin: 15px 0;         /* spacing above and below */
    background-color: #111;

}

.materials-line {
  border: none;               /* remove default hr border */
  width: 60px;               /* line width */
  border-top: 2px dotted #000; /* thickness, style, color */
  margin: 20px 0;         /* vertical spacing, center horizontally */
}


footer {
  display: flex;
  justify-content: space-between; /* push columns to edges */
  align-items: center;            /* vertically center content */
  margin: 0 10px;                 /* center container */
  /*gap: 20px;                      !* space between columns *!*/
}

.footer-left p,
.footer-right p {
  margin: 0; /* remove default spacing */
}

.footer-left{
  text-align: left;
}

.footer-right{
  text-align: right;
}

main {
  padding-bottom: 60px;
}