/* ==========================================================================
   /about/ — page sheet. Loaded AFTER /assets/style.css.

   Layout only. Every colour, type register, hairline and motion mechanic on
   this page comes from the core system; nothing here re-declares any of it.
   The page is where a couple decides they like her, so the only real job of
   this sheet is to give her photographs room and to keep the vertical rhythm
   honest where the 12-column grid stacks.
   ========================================================================== */

/* --- page header ---------------------------------------------------------
   The eyebrow sits close to the headline (they read as one lockup, via the
   core's own --flow); the lede then gets its own air.
   The headline is five lines deep, so the section opens on --space-block
   rather than --space-page: the sticky header already supplies the air, and
   the lede has to stay reachable on a 900px screen. */
/* …but never less than the bar it opens under. The header gives its slot back
   to the page with a negative margin, so the first block has to clear it on
   its own, and --space-block bottoms out at 40px on a phone against a 52px
   bar: the eyebrow was printing straight through the nav links. The other
   three pages open on --space-page (80px floor) and always cleared it. */
.a-head { padding-block-start: max(var(--space-block), calc(var(--nav-h) + 1.25rem)); }
.a-head__lock { --flow: 1rem; }
.a-head__grid { row-gap: clamp(1rem, 2.6vw, 2.75rem); }

/* --- bio -----------------------------------------------------------------
   Photographs left across five columns, copy right across five, column six
   deliberately empty between them. Tops aligned so the frame and the first
   line of the story start together; when the grid stacks the two blocks need
   a real block gap, not the 0.75rem gutter. */
.a-bio__grid,
.a-why__grid {
  row-gap: var(--space-block);
  align-items: start;
}

/* --- where I work --------------------------------------------------------
   The drifting place-name shelves (M4) sit between the prose that names them
   and the ceremonies CTA. */
.a-shelves { margin-block: var(--space-block); }


/* the page lede reads from the right half, opposite the headline's spine */
@media (min-width: 901px) {
  .a-head__grid > .lede { grid-column: 8 / -1; }
}


/* the page headline, 10 percent smaller than the display register */
.a-head__grid h1 { font-size: clamp(2.61rem, 7.74vw, 7.65rem); }