/* ============================================================================
   HOME — section styles
   ========================================================================= */

/* ══ HERO ══════════════════════════════════════════════════════
   NOT a full-bleed photo. Every one of his photographs is portrait
   (measured: 0 of 79 at ratio >= 1.6, median 1125x1537). Cropping one
   to a 16:10 background throws away most of the frame and then a scrim
   turns a colour realist's proof into grey mush. So the plate keeps its
   true ratio, sits in a mount, and the type lives beside it on the page.
   Nothing is ever printed on top of the work. */
.hero{
  position:relative; padding-block:clamp(7.5rem,15vw,9.5rem) clamp(3.5rem,7vw,5.5rem);
  background:var(--ink); overflow:clip;
}
.hero__in{
  position:relative; z-index:2;
  display:grid; gap:clamp(2.75rem,6vw,4.5rem);
  align-items:center;
}
.hero__type{ display:grid; gap:var(--g5); align-content:center; min-width:0 }
/* Sized to the COLUMN, not the viewport. "MASTERPIECES" is 12 characters and
   Fraunces caps run ~0.62em wide, so the longest line needs ~7.4 x the char
   count in px. Verified by screenshot at 1280 and 390. */
.hero__t{ margin:0; font-size:clamp(2.6rem,6.3vw,5.5rem) }
.hero__l{ max-width:44ch }
.hero__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--g4) }

/* the plate: mounted, edged, never overprinted */
.hero__plate{ position:relative; min-width:0 }
.hero__frame{
  position:relative; display:block; background:var(--ink-2);
  padding:clamp(.5rem,1vw,.75rem);
  box-shadow:inset 0 0 0 1px var(--ink-3), 0 40px 80px -50px rgba(0,0,0,.9);
}
.hero__frame img{
  width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; object-position:center 22%;
  display:block;
}
.hero__cap{
  display:flex; flex-wrap:wrap; gap:.4rem var(--g4); justify-content:space-between;
  margin-top:var(--g3);
}
.hero__cap b{ font-family:var(--sans); font-size:var(--fs-small); font-weight:600;
  letter-spacing:0; text-transform:none; color:var(--on-ink) }

@media (min-width:900px){
  .hero__in{ grid-template-columns:minmax(0,1.02fr) minmax(0,.86fr);
    gap:clamp(3rem,5.5vw,6rem) }
  .hero__plate{ justify-self:end; width:100%; max-width:470px }
}
@media (min-width:1400px){ .hero__plate{ max-width:520px } }

/* ══ THE RECORD ══ tight band, sits directly under the hero ══ */
.record{ background:var(--ink-2); padding-block:clamp(3.5rem,7vw,5rem) }
.record__in{ display:grid; gap:var(--g7) }
.record__note{ max-width:60ch; color:var(--on-ink-muted); font-size:var(--fs-small) }
@media (min-width:1040px){
  .record__in{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
    gap:clamp(2.5rem,5vw,5rem); align-items:center }
}

/* ══ SELECTED WORK ══ asymmetric, not a uniform card row ════
   Aspect ratios are set per-tile at equal specificity (.wgrid .wgrid__x img)
   so a later rule actually wins. A first pass wrote `.wgrid__f img` against a
   generic `.wgrid .tile img` and lost the cascade, rendering the wide plate at
   3/4 and blowing the section out to 3853px. */
.wgrid{ display:grid; gap:var(--g3); align-items:start }
.wgrid .tile img{ aspect-ratio:3/4 }
@media (min-width:720px){
  .wgrid{ grid-template-columns:repeat(6,1fr) }
  .wgrid__a{ grid-column:span 6 } .wgrid .wgrid__a img{ aspect-ratio:16/10 }
  .wgrid__b,.wgrid__c{ grid-column:span 3 }
  .wgrid__d,.wgrid__e{ grid-column:span 3 }
  .wgrid__f{ grid-column:span 6 } .wgrid .wgrid__f img{ aspect-ratio:16/9 }
}
@media (min-width:1040px){
  .wgrid__a{ grid-column:span 3 } .wgrid .wgrid__a img{ aspect-ratio:3/4 }
  .wgrid__b{ grid-column:span 3 } .wgrid .wgrid__b img{ aspect-ratio:3/4 }
  .wgrid__c,.wgrid__d,.wgrid__e{ grid-column:span 2 }
  .wgrid .wgrid__c img,.wgrid .wgrid__d img,.wgrid .wgrid__e img{ aspect-ratio:4/5 }
  .wgrid__f{ grid-column:span 6 } .wgrid .wgrid__f img{ aspect-ratio:21/9 }
}

/* ══ PROCESS ══ the commercial spine ════════════════════════ */
.proc{ background:var(--ink) }
.proc__grid{ display:grid; gap:var(--g8) }
.proc__head{ display:grid; gap:var(--g4); align-content:start; justify-items:start }
.proc__head .lead{ max-width:38ch }
.proc__list{ display:grid; gap:var(--g7) }
.proc__list li{ display:grid; gap:.55rem; padding-top:var(--g4);
  box-shadow:inset 0 1px 0 rgba(242,239,231,.14) }
.proc__list p{ max-width:44ch; color:var(--on-ink-muted); font-size:var(--fs-small) }
.proc__list .micro{ color:var(--accent) }
@media (min-width:820px){
  .proc__list{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--g8) var(--g6) }
}
@media (min-width:1100px){
  .proc__grid{ grid-template-columns:minmax(0,.8fr) minmax(0,1.25fr);
    gap:clamp(3rem,6vw,6rem) }
}

/* ══ ARTIST SPLIT ═══════════════════════════════════════════ */
.artist__media{ position:relative }
.artist__media > img:first-child{ width:100%; aspect-ratio:4/5; object-fit:cover;
  object-position:center 18%; box-shadow:0 30px 70px -50px rgba(0,0,0,.8) }
.artist__chop{ position:absolute; right:-6px; bottom:-14px; width:clamp(74px,9vw,104px);
  height:auto; mix-blend-mode:multiply; opacity:.92 }

/* ══ MASTER CLASS ═══════════════════════════════════════════ */
.mclass{ position:relative; background:var(--ink-2); overflow:clip }
.mclass__in{ position:relative; z-index:2; display:grid; gap:var(--g8) }
.mclass__t{ display:grid; gap:var(--g4); justify-items:start }
.mclass__t .lead{ max-width:42ch }
.mclass__q{ margin:0; display:grid; gap:var(--g3); align-content:center }
.mclass__q blockquote{
  margin:0; font-family:var(--display); font-weight:700;
  font-size:clamp(1.35rem,2.5vw,2rem); line-height:1.22; letter-spacing:-.02em;
  max-width:24ch; font-variation-settings:"opsz" 48;
}
.mclass__q blockquote::before{ content:"\201C"; color:var(--accent) }
.mclass__q blockquote::after{ content:"\201D"; color:var(--accent) }
@media (min-width:960px){
  .mclass__in{ grid-template-columns:minmax(0,1.1fr) minmax(0,.85fr);
    gap:clamp(3rem,6vw,6rem); align-items:center }
}