/* ============================================================
   v2: v1 set like a chic magazine. 2026-10-02.

   two families, each with one job:
   - Geist (Vercel, 2023): a clean, current grotesk with geometric
     touches and a true 100 weight for the hairline eyebrows.
     eyebrows, headings and every detail (name, nav, captions, form,
     footer). replaced Jost on 2026-10-03 (Michael: too Futura).
   - Newsreader, an editorial serif drawn by Production Type for
     long reading on screens, with optical sizes: body copy, the
     hero's line beneath the title, and the pull quote.
   a geometric sans over a reading serif is the classic magazine
   pairing: the sans gives structure and voice, the serif carries
   the reading.
   ============================================================ */

:root{
  --sans:'Geist', 'Helvetica Neue', system-ui, sans-serif;
  --serif:'Newsreader', 'Iowan Old Style', Georgia, serif;
}
body{font-family:var(--sans); font-weight:300}

/* ---------- sans: eyebrows, headings, details ---------- */
/* eyebrows at 100 (Michael). a hairline needs size to hold: 15px, full color */
.label{
  font-family:var(--sans); font-weight:100; font-size:15px;
  letter-spacing:.24em; color:var(--paper);
}
.t-h1, .t-h2, .lede{font-family:var(--sans); font-weight:300; letter-spacing:-.02em}
.top .t-name{font-family:var(--sans); font-weight:200; letter-spacing:.2em}
.t-nav, .vswitch a{font-family:var(--sans); font-weight:400}
.t-meta, .caption, .t-form, .choice span, .seg__opt, .crumb, button,
input[type=text], input[type=email], textarea, .ref, .status, footer{font-family:var(--sans)}
.caption{font-weight:300; font-size:14px}
/* Geist has no italic; the artwork title takes the serif's real italic instead of a faked slant */
.caption__title i{font-family:var(--serif); font-style:italic; font-weight:400; font-size:1.08em}
.t-form{font-weight:400; letter-spacing:.01em}

/* ---------- serif: the reading ---------- */
.wall{
  font-family:var(--serif); font-weight:400; font-size:clamp(17px,1.3vw,19px);
  line-height:1.65; font-optical-sizing:auto; color:var(--paper-dim);
}
.t-intro{font-family:var(--serif); font-style:italic; font-weight:300; letter-spacing:0}

/* ---------- the hero: the line beneath the title runs on one line on desktop ---------- */
.hero__type{max-width:none}
@media (min-width:900px){
  .hero__type .t-h1{font-size:clamp(48px,4.45vw,64px); line-height:1.05; letter-spacing:-.025em}
  .hero__type .t-intro{max-width:none; white-space:nowrap; font-size:clamp(20px,1.6vw,24px)}
}

/* ---------- the weave: 50/50, the same photo as a portrait, the paragraph
   at pull-quote size in the serif's light 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(--serif); font-style:italic; font-weight:300;
  font-size:clamp(24px,2.8vw,40px); line-height:1.3; letter-spacing:-.005em;
  color:var(--paper); text-wrap:pretty; max-width:22em; font-optical-sizing:auto;
}

/* ---------- the end: the form and footer fill the screen together, so
   nothing of the photograph above shows once you reach the bottom ---------- */
section.opt{min-height:100svh; box-sizing:border-box}

/* ---------- phones: the vertical hero (IMG_3601, rendered from Adam's RAW with his
   +0.7 exposure, 2026-10-03). portrait on a portrait screen, so it barely crops.
   centered a little right of middle to keep the red column in frame ---------- */
@media (max-width:899px){
  .hero .plate{background-position:58% 50%}
}

/* ---------- phone hero type, 2026-10-03 (Michael: too small) ----------
   the headline is as large as it can be while "Weaving a world" still holds one
   line at 360px wide (measured per font), growing with wider phones to a cap.
   the line beneath and the location step up with it. */
@media (max-width:899px){
  .hero__type .t-h1{font-size:clamp(36px, calc((100vw - 74px) / 7.3), 48px); line-height:1.08}
  /* Newsreader italic is compact; 23px reads like the 21px roman in the other versions */
  .hero__type .t-intro{font-size:23px; line-height:1.35; max-width:none}
  .hero__type .t-meta{font-size:16px}
}

/* ============================================================
   2026-10-03 (Michael: Geist read boring; riff on v4's magazine chic)
   three voices, the classic magazine stack:
   - Instrument Serif (2023), a condensed editorial display serif:
     the hero, section headings and the pull quote. v4's Didone is
     wide and sharp; this is narrow and soft, the current fashion /
     design magazine look.
   - Newsreader: the reading, now including the line under the hero
     title, set roman (no italic, Michael).
   - Geist, kept quiet: eyebrows (the true 100 weight), name, nav,
     captions, form, footer.
   Instrument Serif is condensed with a small x-height, so it is set
   larger than the scale's 64 / 40 to carry the same weight.
   ============================================================ */
:root{--display:'Instrument Serif', 'Didot', Georgia, serif}
.t-h1, .t-h2{font-family:var(--display); font-weight:400; letter-spacing:-.01em}
.t-h2{font-size:clamp(34px,3.6vw,56px); line-height:1.04}
.hero__type .t-intro{font-style:normal; font-weight:300}
.pullquote{font-family:var(--display); font-style:italic; font-weight:400; letter-spacing:0;
  font-size:clamp(30px,3.4vw,52px); line-height:1.14}
/* the title's widest line ("Weaving a world") is sized to span the line under it:
   measured, the title needs about 5.4x the line's size, so 8.6vw against 1.6vw */
@media (min-width:900px){
  .hero__type .t-h1{font-size:clamp(96px,8.6vw,136px); line-height:.96; letter-spacing:-.015em}
}
@media (max-width:899px){
  .hero__type .t-h1{font-size:clamp(40px, calc((100vw - 74px) / 5.4), 60px); line-height:1}
}

/* the inquiry form (ported from v4): questions and the sent heading in the display
   serif, which is condensed, so it is set larger */
section .inq{--inq-display:var(--display); --inq-q-size:clamp(36px,3.4vw,52px); --inq-q-weight:400}
.inq .inq-step__q, .inq .inq-sent__head{letter-spacing:-.005em; line-height:1.04}

/* the location in the hero, all caps (Michael, 2026-10-03); caps need tracking to read evenly */
.hero__type .t-meta{text-transform:uppercase; letter-spacing:.16em}