@layer layout {

/* ============================================================
   TY MABEE - FIELD JOURNAL · page structure
   containers, grids, and every breakpoint
   ============================================================ */

.section {
  position: relative;
  padding: clamp(3.5rem, 8vw, 6.5rem) clamp(1.2rem, 4vw, 3rem);
}
.section-inner { max-width: 1080px; margin: 0 auto; position: relative; }

/* ------------------------------------------------------------
   OFF-SCREEN WORK SKIPPING
   ------------------------------------------------------------
   content-visibility: auto lets the browser skip layout AND paint
   for sections you have not reached yet - the single largest
   rendering win available here.

   It is opt-in per section rather than blanket, because it implies
   paint containment, which CLIPS overflow. Any section holding a
   [data-drag] element must not have it, or a polaroid dragged past
   the section edge would be sliced off. Today that rules out the
   cover and #work; #about, #skills and #contact are safe.

   `auto` in contain-intrinsic-size makes the browser remember each
   section's real height after its first render, so the scrollbar
   stops resizing on subsequent passes.
   ------------------------------------------------------------ */
.section--contained {
  content-visibility: auto;
  contain-intrinsic-size: auto 720px;
}

/* ------------------------------------------------------------
   ENTRY 01 · about
   ------------------------------------------------------------ */
.entry-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(220px, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

/* ------------------------------------------------------------
   SPECIMENS
   ------------------------------------------------------------ */
.drawer-tray {
  display: grid;
  grid-template-columns: minmax(230px, 0.78fr) minmax(0, 1.55fr);
  gap: clamp(1rem, 3vw, 2.4rem);
  align-items: stretch;
}
.accession-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

/* ------------------------------------------------------------
   PROJECTS
   ------------------------------------------------------------ */
.project {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(0, 1.4fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  padding: clamp(2rem, 4vw, 3.5rem) 0;
  /* layout+paint containment: a project's internals can never
     affect anything outside it. No clipping risk - the draggable
     polaroid lives in .project-media, which is not contained. */
  contain: layout style;
}
.project--flip { grid-template-columns: minmax(0, 1.4fr) minmax(240px, 1fr); }
.project--flip .project-media { order: 2; }
.project-media { position: relative; display: grid; place-items: center; }

/* ------------------------------------------------------------
   CORRESPONDENCE
   ------------------------------------------------------------ */
.correspondence { padding-bottom: clamp(4rem, 9vw, 7rem); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .entry-cols { grid-template-columns: 1fr; }
  .measurements { max-width: 420px; }
  .project, .project--flip { grid-template-columns: 1fr; gap: 1.8rem; }
  .project--flip .project-media { order: 0; }
}

@media (max-width: 720px) {
  .drawer-tray { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .accession-list { grid-template-columns: 1fr; }
}

/* short windows: keep cover ephemera pinned to the corners,
   clear of the centered text */
@media (max-height: 820px) and (min-width: 861px) {
  .stamp-cover { bottom: 4%; }
}

@media (max-width: 640px) {
  .f-note { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  body { font-size: 1rem; }
}

}