/* THE HOMEPAGE (founder, 2026-10-25). Fenced under body.home-hero; class prefix hh- (hm- is the Heavy Metal room's).
   One section: the headline (the one display moment), the subheadline, one action, and the eight-stage loop in the
   black studio (home-os.css draws the studio, home-loop.js the loop). Sizes and spaces are site.css tokens; the
   headline clamp is the one exception. Brief and decisions: docs/design/HOME-MVP-MANUSCRIPT-BRIEF.md */

/* ---------- 01 HERO = THE STUDIO (founder, 2026-10-25: combine the hero and the process). The headline,
   subheadline and one action sit above the live seven-stage loop, in its black room. Two values in the
   headline, both brand: ink, then the violet the loop's light is made of. */
.hh-hero__h1 {
  margin: 0;
  /* two lines on laptop and desktop (founder, 2026-10-25): sized to its own column (.hh-top is the container) */
  font: 850 clamp(2.5rem, 6.9cqi, 6.5rem)/0.95 var(--display);
  letter-spacing: -0.05em;
  margin-left: -0.04em;
  text-wrap: balance;
}
.hh-top { container-type: inline-size; }
.hh-hero__gave { color: var(--ink); }
.hh-hero__gap { color: var(--brand); }
/* the subheadline, then the one action directly under it on the reading line (founder, 2026-10-25: no divider,
   and the button must be easy to find among the lit stages) */
.hh-hero__foot { margin-top: clamp(var(--s5), 5vh, var(--s7)); }
/* the subheadline: second rank on the page, in full ink (no gray in the hero) */
.hh-hero__promise { margin: 0; font: 600 var(--t-lg)/var(--lh-tight) var(--display); letter-spacing: -0.015em; color: var(--ink); max-width: 36rem; text-wrap: balance; }
/* the brand is black and violet: the one primary action is violet */
body.home-hero a.btn--primary { background: var(--brand); border-color: var(--brand); color: var(--paper); }
body.home-hero a.btn--primary:hover { background: var(--brand-lift); border-color: var(--brand-lift); color: var(--paper); }
.hh-acts { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s5) 0 0; }
.hh-hero__foot .hh-acts { margin: var(--s4) 0 0; }
body.home-hero .hh-hero__foot a.btn--primary { min-height: 52px; padding-inline: var(--s6); font: 600 var(--t-base)/1 var(--ui); }

/* ---------- THE STUDIO'S HEIGHT. The live hero is exactly one screen; this one carries more words, so it
   may grow past the screen. The wrap keeps the live padding, so the floor under the loop stays the same
   depth and the script scales the photograph as it does on the live homepage (boxes stay inside the page). */
body.home-hero .lh.hh-method { height: auto; min-height: 100svh; }
/* EIGHT BOXES (Prepare, then the seven): slightly smaller boxes and narrower side margins than the live hero, so
   the arrows between them keep their length. The loop script no longer fits the margins to the floor; it fits the
   floor photograph to the seven looping boxes instead (home-loop.js). */
body.home-hero .lh.hh-method { --b: clamp(52px, 5vw, 88px); }
body.home-hero .hh-method .lh__wrap { height: auto; min-height: 100svh; gap: clamp(var(--s6), 7vh, var(--s8));
  padding-inline: clamp(var(--s4), 4vw, var(--s8));
  /* one screen on a laptop (founder, 2026-10-25: this is the only section): less air above the headline and a
     shallower floor than the live hero, which carries two words where this carries a headline and a subheadline */
  padding-top: clamp(var(--s7), 8vh, var(--s9)); padding-bottom: clamp(6.75rem, 14.5vh, 11rem); }

/* ---------- NARROW */
@media (max-width: 60rem) {
  /* the rail is a top bar here: the studio is the screen less that bar, as on the live homepage */
  body.home-hero .lh.hh-method, body.home-hero .hh-method .lh__wrap { min-height: calc(100svh - 69px); }
}
@media (max-width: 44rem) {
  /* phones: the diagram is a column with no photograph, so the section grows to fit its words */
  body.home-hero .lh.hh-method { height: auto; }
  body.home-hero .hh-method .lh__wrap { height: auto; padding: var(--s8) 1.25rem var(--s7); }
}

/* THE FLOOR UNDER PREPARE: the mirrored copy of the floor photograph behind (home-loop.js) supplies the floor under
   Prepare and Research; the original takes over from Plan. The original fades in between 16% and 22% of its width,
   the dark gap between its first two streaks, so the seam never crosses a streak. Intersected with its bottom fade. */
body.home-hero .lh .studio--blend {
  -webkit-mask-image: linear-gradient(to right, transparent 16%, #000 22%), linear-gradient(to bottom, #000 82%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent 16%, #000 22%), linear-gradient(to bottom, #000 82%, transparent);
          mask-composite: intersect;
}