/* ulrick.tech · W9 page-hero photos (About, Book). Same rules as the W2.1 home hero:
   < 1024px: square 1:1 crop, max 480px, after the copy. >= 1024px: portrait (4:5) column beside the copy, photo first (mockups/about.html, book.html).
   Every cropped frame anchors 50% 15% so the head is never cut. */
.page-hero__grid{display:grid;gap:32px}
.page-hero__photo{display:block;max-width:480px}
.page-hero__photo img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 15%;filter:grayscale(1);background:var(--hairline)}
.page-hero__photo--top img{object-position:center top}   /* W9.3 (SlideMaster): Book crops anchored at the top */
@media (min-width:1024px){
  .page-hero__grid{grid-template-columns:1fr 1.2fr;gap:72px;align-items:start}
  .page-hero__photo{order:-1;max-width:none}
  .page-hero__photo img{aspect-ratio:4/5}
}

/* Field notes row (About only): ledger rule + mono caps label, square B/W frames, no captions.
   Count-driven (W9.2): the build sets --n to the number of frames.
   >= 1024px: n-up. < 1024px: even n -> 2 columns ("pairs"); odd n -> single column capped at 400px ("stack"),
   so a 4th frame restores 4-up / 2x2 with no CSS change. Squares anchored 50% 15% (cropped that way in make_photos.py). */
.field-notes{padding-bottom:clamp(56px,8vw,96px)}
.field-notes__title{margin:14px 0 24px;font-size:.8125rem;line-height:1.4;letter-spacing:.16em}
.field-notes__grid{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.field-notes__grid--pairs{grid-template-columns:repeat(2,minmax(0,400px))}   /* W9.3 (QA BUG-6): columns stop at 400px (2x of 800w) */
.field-notes__grid--stack{grid-template-columns:minmax(0,400px)}
.field-notes__grid img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 15%;filter:grayscale(1);background:var(--hairline)}
@media (min-width:1024px){.field-notes__grid{grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:24px}}