/* =========================================================================
   Homepage type hierarchy. Loaded only by index.html, after the section files.

   Two voices with clear jobs.
   - Chapters (Approach, Work, Engagements, Studio, Contact, and the already live
     StrategyIQ and Kitchen): Inter 600, the Kitchen recipe. Every headline is
     two-tone: the soft half is the setup, in the site's own emphasis token
     (--t2, stone on ivory, light stone on ink); the firm half is the claim.
   - The two opening statements keep the poster voice: the hero poster (Big
     Shoulders caps with its serif accents) and the Premise pair. Left as they were.

   Eyebrows and small labels move to Inter 500 caps at a readable size, with the
   section number in the system mono. The hero sub now leads with the definition
   line, then the existing method sentence in the soft tone.

   Also left as they were: the hero intro film (js/reframe.js), the Kitchen board
   interior, and the plates.

   Scoped by id and class on purpose. Nothing here uses a bare `.home h2`, so the
   intro film's own headings are untouched.
   ========================================================================= */

/* ---------- headlines: h2 ---------- */
.home #approach h2,
.home #work h2,
.home #engage h2,
.home #contact h2,
.home #studio.home-quiet .founder h2{
  max-width:15.5em;
  font-family:var(--font-body);
  font-weight:600;
  font-style:normal;
  font-size:clamp(35px,4.7vw,76px);
  line-height:1.03;
  letter-spacing:-.034em;
  text-wrap:balance;
  font-feature-settings:"ss01","cv11";
}
.home .hx-soft{color:var(--t2)}

/* Studio sits in a half-width column on desktop; one notch smaller keeps it to two lines */
.home #studio.home-quiet .founder h2{max-width:none}
@media (min-width:1101px){
  .home #studio.home-quiet .founder h2{font-size:clamp(34px,3.7vw,58px)}
}

/* ---------- sub-heads: h3 (one tier) ---------- */
.home .home-statement .road h3,
.home #work .case h3,
.home .home-index .step h3,
.home .home-fits h3{
  font-family:var(--font-body);
  font-weight:600;
  font-style:normal;
  font-size:clamp(21px,1.9vw,28px);
  line-height:1.12;
  letter-spacing:-.022em;
  font-feature-settings:"ss01","cv11";
}

/* Kitchen list titles are sub-heads too (the board interior stays its own product UI) */
.home .kb-rh{
  font-family:var(--font-body);
  font-weight:600;
  font-size:clamp(19px,1.6vw,23px);
  line-height:1.15;
  letter-spacing:-.02em;
  font-feature-settings:"ss01","cv11";
}

/* ---------- hero sub: the definition leads, the method sentence follows soft ---------- */
.home .hero-sub{
  max-width:27em;
  margin-top:22px;
  font-size:19px;
  line-height:1.45;
  color:#A9A397;
}
.home .hero-sub .hx-lead{
  display:block;
  margin-bottom:.4em;
  font-weight:500;
  color:var(--ivory);
}

/* Spanish poster: the accent on Í in SÍNTOMA was being clipped by the line mask. Give that one line headroom. */
html[lang="es"] .home .hero-copy h1.hero-poster .m:nth-child(3){
  padding-top:.2em;
  margin-top:-.1em;
}

/* ---------- eyebrows and labels ---------- */
.home .hero-mark,
.home .home-kicker,
.home .premise .label,
.home .duo .lab,
.home .also-tag,
.home .home-instrument-cap .label,
.home .home-handoff .label,
.home #method .step > .label,
.home #engage .dur,
.home #engage .label,
.home #kitchen .kit-note,
.home #kitchen figcaption.label,
.home .belt-label{
  font-family:var(--font-body);
  font-weight:500;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.home .hero-mark,
.home .home-kicker{font-size:13px}
.home .home-kicker .num{
  font-family:var(--font-system);
  font-weight:500;
  font-size:12.5px;
  letter-spacing:.04em;
}

@media (max-width:720px){
  /* On phones a soft clause gets its own line, so a wrap never splits the two tones mid-line */
  .home #approach h2 .hx-soft,
  .home #work h2 .hx-soft,
  .home #studio h2 .hx-soft{display:block}
  .home .hero-mark,
  .home .home-kicker{font-size:12.5px;letter-spacing:.1em}
  .home .hero-mark{align-items:flex-start;line-height:1.45}
  .home .hero-mark__bar{margin-top:.72em}
  .home .hero-mark > span:last-child{text-wrap:balance}
  .home .hero-sub{font-size:17.5px}
}

/* Short windows: the definition line adds a row, so the poster steps down with the window height instead of meeting the nav */
@media (max-height:760px){
  .home .hero-sub{margin-top:16px}
}
@media (min-width:721px) and (max-height:760px){
  .home .hero-copy h1.hero-poster{font-size:clamp(3.5rem,min(5.4vw,9vh),5rem)}
}
@media (max-width:720px) and (max-height:760px){
  .home .hero-copy{bottom:104px}
  .home .hero-sub{font-size:16px;line-height:1.4;margin-top:14px}
  .home .hero-sub .hx-lead{margin-bottom:.25em}
}
/* Spanish runs longer (two-line eyebrow, longer sub), so very short phones step the poster down one notch */
@media (max-width:720px) and (max-height:660px){
  html[lang="es"] .home .hero-copy h1.hero-poster{font-size:3rem}
}
@media (max-width:720px) and (max-height:600px){
  .home .hero-copy h1.hero-poster{font-size:3rem}
}
@media (max-width:720px) and (max-height:600px){
  html[lang="es"] .home .hero-copy h1.hero-poster{font-size:2.75rem}
}