/* COTR home hero shell — the frame every hero renders into (see HERO-CONTRACT.md).
   Tokens mirror cotr/src/styles/global.css; the backdrop and type metrics mirror the original hero set,
   so swapping heroes never moves the headline block or the page below. */
.hero-shell{
  --paper:#f5f3ef; --paper-2:#ebe7e0; --line:#ddd6cc; --line-2:#c8c0b4;
  --text:#151719; --text-2:#3c4045; --text-3:#63666a;
  --orange:#e35d14; --orange-hi:#f07a37; --orange-ink:#b0440f; --navy:#0e2d4d; --slice:#7cc4ff;
  --sans:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',Inter,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  --gut:clamp(20px,4.5vw,56px);
  /* hero-only tokens — heroes read these, never hard-code */
  --hero-ink:#16181a;            /* headline + line art */
  --hero-ink-2:#3d4247;          /* lede */
  --hero-ink-3:#6b6f73;          /* kicker, caption, annotations */
  --hero-line:#2a2e33;           /* drawing ink (anatomy, instruments) */
  --hero-fill:#fbfaf7;           /* paper fill inside drawn bone/tissue */
  --hero-repair:#e35d14;         /* the repair: implant / suture / fixation — the only colour that moves */
  --hero-repair-ink:#b0440f;     /* repair outlines on paper */
  --hero-steel:#8b939b;          /* instruments that are not the repair (needle, clamp) */
  --hero-h:clamp(600px,calc(100svh - 64px),980px);
}
.hero-shell{position:relative;overflow:hidden;color:var(--hero-ink);font-family:var(--sans);
  background:radial-gradient(120% 90% at 66% 38%,#fbfaf7 0%,#f1eee8 46%,#e2ddd4 100%)}
.hero-shell .hs-stage{box-sizing:border-box;height:var(--hero-h);max-width:1440px;margin:0 auto;
  padding:clamp(20px,4vh,48px) var(--gut) 22px;display:grid;
  grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-areas:"copy" "fig" "cap";row-gap:clamp(14px,2.6vh,30px)}
.hs-copy{grid-area:copy;position:relative;min-width:0}
.hs-kick{font:600 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--hero-ink-3);margin:0 0 14px}
.hs-h1{font-size:clamp(3rem,6.2vw,6rem);line-height:.94;letter-spacing:-.045em;font-weight:760;color:var(--hero-ink);margin:0;text-wrap:balance}
.hs-lede{margin:16px 0 0;font-size:clamp(1.02rem,1.35vw,1.18rem);line-height:1.5;color:var(--hero-ink-2);max-width:34ch}
.hs-fig{grid-area:fig;position:relative;min-height:0;min-width:0;margin:0}
.hs-aside{grid-area:aside;display:none;min-width:0}
.hs-cap{grid-area:cap;margin:0;min-height:1.5em;border-top:1px solid var(--line);padding-top:9px;
  font:500 11.5px/1.5 var(--mono);letter-spacing:.01em;color:var(--hero-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-cap b{font-weight:600;color:var(--hero-ink)}

/* stack layout (all simple heroes): one-line headline on wide screens, figure fills the rest */
@media(min-width:1100px){html:not([data-hero-layout="split"]) .hs-h1{white-space:nowrap;text-wrap:nowrap}}

@media(max-width:860px){
  .hero-shell{--hero-h:clamp(640px,calc(100svh - 58px),940px)}
  .hero-shell .hs-stage{padding:26px var(--gut) 16px;row-gap:12px}
  .hs-h1{font-size:clamp(2.6rem,12vw,3.5rem)}
  .hs-lede{margin-top:10px;font-size:1rem}
  .hs-cap{white-space:normal;min-height:3em;font-size:11px}
}

/* SSR / no-JS fallback still (finished frame of a simple hero); hidden as soon as the runtime has chosen a hero */
html[data-hero] .hs-fig>[data-hero-still]{display:none}