/* ============================================================
   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}
}

/* the story copy sits lower (Michael, 2026-10-03): 32px from the bottom on phones, 64 on
   desktop, so the gradient behind it can be shorter and the photos read brighter.
   one ease-in-out curve again, holding only under the copy. */
.story--bleed .story__copy{bottom:64px}
.story--bleed .story__frame::after{background:linear-gradient(to top, rgba(10,10,11,0.88) 0%, rgba(10,10,11,0.88) 14%, rgba(10,10,11,0.865) 17.0%, rgba(10,10,11,0.821) 20.0%, rgba(10,10,11,0.751) 23.0%, rgba(10,10,11,0.660) 26.0%, rgba(10,10,11,0.554) 29.0%, rgba(10,10,11,0.440) 32.0%, rgba(10,10,11,0.326) 35.0%, rgba(10,10,11,0.220) 38.0%, rgba(10,10,11,0.129) 41.0%, rgba(10,10,11,0.059) 44.0%, rgba(10,10,11,0.015) 47.0%, rgba(10,10,11,0.000) 50.0%)}
@media (max-width:899px){
  .story--bleed .story__copy{bottom:32px}
  .story--bleed .story__frame::after{background:linear-gradient(to top, rgba(10,10,11,0.88) 0%, rgba(10,10,11,0.88) 18%, rgba(10,10,11,0.865) 20.8%, rgba(10,10,11,0.821) 23.7%, rgba(10,10,11,0.751) 26.5%, rgba(10,10,11,0.660) 29.3%, rgba(10,10,11,0.554) 32.2%, rgba(10,10,11,0.440) 35.0%, rgba(10,10,11,0.326) 37.8%, rgba(10,10,11,0.220) 40.7%, rgba(10,10,11,0.129) 43.5%, rgba(10,10,11,0.059) 46.3%, rgba(10,10,11,0.015) 49.2%, rgba(10,10,11,0.000) 52.0%)}
}

/* phones: the rigidity image as a square (Michael, 2026-10-03). a square from a 3:2 photo
   uses its full height, so the in-focus beads stay centered top to bottom; across, the
   sharp cord column (34% of the photo) lands a little left of center with depth behind it */
@media (max-width:899px){
  .band--quote .band__media{aspect-ratio:1 / 1}
  .band--quote .plate--edges{background-position:15% 50%}
}
/* phones: zoomed so three full beads stand on the left column with the ones above and
   below cut off (bead pitch ~19% of the photo's height: the square shows 69% of it),
   centered on the middle bead, cord column at ~30% across (Michael, 2026-10-03) */
@media (max-width:899px){
  .band--quote .plate--edges{background-size:auto 145%; background-position:37% 60%}
}

/* ============================================================
   the end of the page (Michael, 2026-10-03): you can't scroll past the
   Commission + Collaboration section. it and the footer together fill one
   screen (footer ~100px), so at the furthest scroll the heading is still in
   view; if the form's details step needs more room, the page grows by only
   that much.
   ============================================================ */
section.opt{min-height:calc(100svh - 100px); padding-top:128px; padding-bottom:64px}
@media (max-width:899px){ section.opt{min-height:calc(100svh - 96px); padding-top:96px; padding-bottom:48px} }

/* labels inside the fields: ghosted where you type; on focus or once filled they shrink
   up into the top of the field instead of vanishing (a vanishing placeholder-label is a
   known usability problem, NN/g). saves a label line per field. */
.inq .inq-field{position:relative}
.inq .inq-field > .inq-field__label{
  position:absolute; left:0; right:0; top:24px; z-index:1; pointer-events:none;
  font-size:18px; line-height:28px; font-weight:400; letter-spacing:0; color:rgba(236,231,223,.62);
  transform-origin:0 0; transition:transform .24s var(--ease), color .24s var(--ease), top .24s var(--ease);
}
.inq .inq-field__opt{font-size:13px; color:rgba(236,231,223,.5)}
.inq .inq-field > .inq-field__box{margin-top:0; padding-top:16px}
.inq .inq-field:focus-within > .inq-field__label,
.inq .inq-field.is-filled > .inq-field__label{
  top:0; transform:scale(.72); color:var(--inq-dim)}
.inq .inq-field:focus-within > .inq-field__label .inq-field__opt,
.inq .inq-field.is-filled > .inq-field__label .inq-field__opt{opacity:0}
.inq .inq-field + .inq-field, .inq .inq-avail + .inq-field{margin-top:0}
.inq .inq-field__msg{margin-top:4px}
.inq .inq-field__help{margin-top:4px; margin-bottom:16px}
.inq .inq-field textarea + *, .inq .inq-avail .inq-field > .inq-field__box{padding-top:16px}
/* desktop: tighten so at the furthest scroll the heading clears the top bar */
@media (min-width:900px){
  section.opt{padding-top:112px; padding-bottom:16px}
  .inq .inq__nav{margin-top:16px}
  .inq .inq-send{margin-top:16px}
  .inq .inq-send__status{margin-top:8px}
}

/* short desktop windows (under 860px tall): the form holds only the current step's height
   instead of reserving room for the tallest, so the first question fits beside the heading
   and the page grows only when the details step arrives (Michael, 2026-10-03) */
@media (min-width:900px) and (max-height:859px){
  section.opt{padding-top:88px}
  .inq .inq-step:not(.is-on){display:none}
}

/* desktop: the rigidity image fills its whole half of the band as the screen widens,
   revealing more of the photo, instead of holding a 2:3 width capped by screen height and
   drifting to the edge (Michael, 2026-10-03). one height for the band. */
@media (min-width:900px){
  .band--quote .band__media{aspect-ratio:auto; max-height:none; height:min(100svh, max(640px, 72vw))}
  .band--quote .plate--edges{background-position:22% 50%}
}

/* ---------- hero, desktop (Michael, 2026-10-03) ----------
   copy moves 32px lower (two 16px steps); the title gets more line height so the g of
   "Weaving" and the f of "of" no longer touch; the line beneath is set in the reading
   serif (Newsreader) at a larger size and runs on one line, so the title stands out and
   the line reads as information. */
@media (min-width:900px){
  .hero__type{bottom:64px}
  .hero__type .t-h1{line-height:1.14}
  .hero__type .t-intro{font-family:var(--read); font-weight:400; font-size:clamp(22px,1.75vw,30px);
    line-height:1.4; letter-spacing:0; max-width:none; white-space:nowrap}
}
/* desktop: the title on one line (Michael, 2026-10-03). sized to fit the frame:
   at 1440 it spans ~70% of the width */
@media (min-width:900px){
  .hero__type .t-h1 br{display:none}
  .hero__type .t-h1{white-space:nowrap; font-size:clamp(56px,5.6vw,112px); line-height:1.05}
}

/* the hero title stands out (Michael, 2026-10-03): the row banding behind the copy, not
   the whole photo. stronger, and held to the copy's left: the ellipse sits at 38% across
   and stops shortly past the text on the right, so the bright blurred right side and the
   rest of the frame stay clean. plus a soft, invisible shadow on every letter. */
.hero__type{--band:.97; --spread-y:46%; --fade:56%}
.hero__type.fx-cyl::before{inset:calc(-1 * var(--spread-y)) -8% calc(-1 * var(--spread-y)) -14%;
  -webkit-mask-image:radial-gradient(ellipse 62% 54% at 38% 50%,
      #000 10%, rgba(0,0,0,.78) 34%, rgba(0,0,0,.38) 58%, rgba(0,0,0,.1) 78%, transparent 96%);
  mask-image:radial-gradient(ellipse 62% 54% at 38% 50%,
      #000 10%, rgba(0,0,0,.78) 34%, rgba(0,0,0,.38) 58%, rgba(0,0,0,.1) 78%, transparent 96%)}
.hero__type .t-h1, .hero__type .t-intro, .hero__type .t-meta{
  text-shadow:0 1px 2px rgba(6,6,7,.45), 0 0 18px rgba(6,6,7,.35)}

/* the hero photo aligned to the viewport's left edge (Michael, 2026-10-03) */
.hero .plate{background-position:0% 50%}