/* ============================================================
   v2c: v2 with the On Process story full bleed (Michael, 2026-10-03).
   v2: v1's layout set in v4's type (Michael, 2026-10-03).
   v2b is the same page in Instrument Serif, for comparison.

   - Bodoni Moda: the Didone of Vogue and Harper's Bazaar, with
     optical sizes so its hairlines hold. the hero title and the
     line under it, section headings, the pull quote, the form's
     questions.
   - Archivo: a grotesk with a width axis. body copy at normal
     width; eyebrows, the name and the location stretched wide.
   ============================================================ */

:root{
  --display:'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --sans:'Archivo', 'Helvetica Neue', system-ui, sans-serif;
}
body{font-family:var(--sans); font-weight:400}

/* ---------- wide grotesk caps: eyebrows, the name, the location ---------- */
.label{
  font-family:var(--sans); font-stretch:125%; font-weight:500;
  font-size:11px; line-height:16px; letter-spacing:.32em; color:var(--paper);
}
.top .t-name{font-family:var(--sans); font-stretch:125%; font-weight:300; font-size:13px; letter-spacing:.28em}
.t-nav, .vswitch a{font-family:var(--sans)}
.t-meta, .caption, .t-form, button, input[type=text], input[type=email], textarea, footer{font-family:var(--sans)}
.caption{font-size:13px; line-height:20px}

/* ---------- display: Bodoni ---------- */
.t-h1, .t-h2{font-family:var(--display); font-weight:400; font-optical-sizing:auto; letter-spacing:-.02em}
.t-h2{font-size:clamp(36px,4vw,64px); line-height:1.05}

/* ---------- reading: Archivo ---------- */
.wall{font-family:var(--sans); font-size:17px; line-height:28px; color:var(--paper-dim)}

/* ---------- the hero: title and the line under it in Bodoni, the
   location in the wide caps ---------- */
.hero__type{max-width:none}
.hero__type .t-intro{font-family:var(--display); font-style:normal; font-weight:400; letter-spacing:-.005em}
.hero__type .t-meta{
  font-family:var(--sans); font-stretch:125%; font-weight:500; font-size:11px; line-height:16px;
  letter-spacing:.32em; text-transform:uppercase; color:var(--paper);
}
@media (min-width:900px){
  .hero__type .t-h1{font-size:clamp(64px,6.4vw,104px); line-height:1.02}
  .hero__type .t-intro{font-size:clamp(20px,1.6vw,26px); line-height:1.35; max-width:30em}
}
@media (max-width:899px){
  .hero__type .t-h1{font-size:clamp(36px, calc((100vw - 48px) / 8.6), 46px); line-height:1.08}
  .hero__type .t-intro{font-size:21px; line-height:1.4; max-width:none}
  .hero__type .t-meta{font-size:13px; line-height:20px}
}

/* ---------- the weave: 50/50, the same photo as a portrait, the paragraph
   at pull-quote size in Bodoni italic ---------- */
@media (min-width:900px){
  .band--quote{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .band--quote .band__media{aspect-ratio:2 / 3; max-height:100svh}
}
.band--quote .band__media{aspect-ratio:2 / 3}
.band--quote .plate--edges{background-position:30% 50%}
.pullquote{
  margin:0; font-family:var(--display); font-style:italic; font-weight:400; font-optical-sizing:auto;
  font-size:clamp(28px,3.2vw,52px); line-height:1.16; letter-spacing:-.012em;
  color:var(--paper); text-wrap:pretty; max-width:22em;
}

/* ---------- the end: the form and footer fill the screen together ---------- */
section.opt{min-height:100svh; box-sizing:border-box}

/* ---------- phones: the vertical hero (IMG_3601), a little right of center
   to keep the red column in frame ---------- */
@media (max-width:899px){
  .hero .plate{background-position:58% 50%}
}

/* ---------- the inquiry form (ported from v4): questions in Bodoni ---------- */
section .inq{--inq-display:var(--display); --inq-q-size:clamp(28px,2.6vw,40px); --inq-q-weight:400}

/* ============================================================
   v2c: the On Process story, full bleed (Michael, 2026-10-03).
   the frame breaks out of the sheet to the screen edges and fills
   the pinned stage; the copy sits lower left, where the hero's does.
   the frame is sized to the tallest screen height (lvh) so iOS
   toolbars can't re-scale it; the copy is placed within the small
   screen height so it never hides behind them.
   ============================================================ */
.story--bleed{margin-inline:calc(-1 * var(--frame))}
.story--bleed .story__stage{display:block; padding:0; height:100svh; overflow:visible}
.story--bleed .story__inner{position:relative; width:100%; height:100%}
.story--bleed .story__frame{position:absolute; top:0; left:0; right:0; width:auto; height:100vh; height:100lvh; aspect-ratio:auto}
/* a gradient behind the copy only, dark at the foot, gone two thirds up */
.story--bleed .story__frame::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(10,10,11,.88) 0%, rgba(10,10,11,.78) 28%,
    rgba(10,10,11,.5) 46%, rgba(10,10,11,0) 68%)}
.story--bleed .story__copy{position:absolute; z-index:2; margin:0;
  left:calc(var(--frame) + var(--pad)); right:calc(var(--frame) + var(--pad)); bottom:96px; max-width:620px}
.story--bleed .story__copy .wall{color:var(--paper)}
@media (max-width:899px){
  .story--bleed .story__copy{bottom:64px; padding-inline:0}
}

/* frame one: Adam's full RAW frame (color-matched to his JPEG). it zooms from the
   center of his crop (39% across, 47% down), so it opens on his framing */
.story--bleed .story__img--raw{object-position:39% 47%; transform-origin:39% 47%}

/* body copy in Newsreader (Michael, 2026-10-03), the editorial reading serif from v2b */
:root{--read:'Newsreader', 'Iowan Old Style', Georgia, serif}
.wall{font-family:var(--read); font-size:clamp(17px,1.3vw,19px); line-height:1.6; font-optical-sizing:auto}

/* the story sits inside the same 13px frame as every other section (Michael,
   2026-10-03): just short of full bleed. the copy stays on the page's rail. */
.story--bleed{margin-inline:0}
.story--bleed .story__copy{left:var(--pad); right:var(--pad)}
/* phones: the story goes full bleed again (Michael, 2026-10-03); desktop keeps the frame */
@media (max-width:899px){
  .story--bleed{margin-inline:calc(-1 * var(--frame))}
  .story--bleed .story__copy{left:calc(var(--frame) + var(--pad)); right:calc(var(--frame) + var(--pad))}
}

/* phones: In Place copy (eyebrow, heading, paragraph) above its photo (Michael, 2026-10-03) */
@media (max-width:899px){
  .band:has(> .band__fig) > .band__copy{order:-1; padding:0 var(--pad) 32px}
}