/* Home page only. Loaded after styles.css, which keeps the shared chrome (header, hero
   mechanics, disclaimer, footer) exactly as it is on every other page.
   Design: doc 40, Part 10, rework v2, 2 September 2026. The three eras of legal research as a
   pinned horizontal scroll, then dual modular redundancy as a pinned scene scrubbed by scroll. */
:root{
  --h-serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --h-sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --h-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --paper:#EEF1F2; --paper-2:#E4E9EB; --ink-2:#3C4A52; --ink-3:#5E6C74;
  --hair-l:rgba(13,20,24,.12); --hair-d:rgba(233,238,239,.13);
}
.home-main{font-family:var(--h-sans);background:var(--paper);color:var(--ink)}
.home-main h1,.home-main h2,.home-main h3{font-family:var(--h-serif);font-weight:400;letter-spacing:-.012em;line-height:1.02;text-wrap:balance}
.home-main .lbl{font-family:var(--h-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase}
.home-main .disclaimer{background:var(--paper);border-top-color:var(--hair-l)}

/* ---- hero words (the animation itself is untouched; see assets/hero.js) ---- */
.dw-hero h1{max-width:16ch;margin:0 auto;font-size:clamp(2.4rem,6.4vw,4.9rem);color:var(--on-dark)}
.hero-run h1{opacity:0;transform:translateY(10px);animation:dwRiseIn .7s cubic-bezier(.2,.7,.3,1) 1.5s forwards}
.dw-hero .tagline{margin:1.4rem 0 0;max-width:34rem;font-size:clamp(1rem,2vw,1.15rem);color:var(--on-dark-body)}

/* ---- the thesis: pinned horizontal scroll ---- */
.intro{padding:clamp(3.5rem,8vw,6rem) 0 clamp(1.5rem,3vw,2.5rem)}
.intro .lbl{color:var(--gold-ink)}
.intro h2{font-size:clamp(1.7rem,3.6vw,2.6rem);max-width:22ch;margin-top:1rem}
.intro h2 em{font-style:italic;color:var(--gold-ink)}
.hs{position:relative;height:320vh}
.hs .pin{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--paper)}
.hs .track{display:flex;height:100%;will-change:transform}
.ch{flex:0 0 100vw;height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(1.2rem,4vw,3.5rem);align-items:center;padding:0 clamp(1.2rem,6vw,6rem);border-left:1px solid var(--hair-l)}
.ch .num{font-family:var(--h-serif);font-size:clamp(7rem,22vw,17rem);line-height:.8;letter-spacing:-.05em;color:var(--ink)}
.ch .num small{display:block;font-family:var(--h-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-top:1.2rem}
.ch h3{font-size:clamp(1.8rem,3.6vw,2.8rem);color:var(--ink)}
.ch h3 em{font-style:italic;color:var(--gold-ink)}
.ch p{margin-top:1rem;color:var(--ink-2);font-size:1.05rem;max-width:44ch}
.ch .q{margin-top:1.3rem;font-family:var(--h-mono);font-size:.86rem;color:var(--steel-ink)}
.ch .q small{display:block;margin-top:.35rem;font-size:.7rem;color:var(--ink-3);letter-spacing:.02em}
.hs .bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--hair-l)}
.hs .bar i{display:block;height:100%;width:var(--w,0%);background:linear-gradient(90deg,var(--gold-ink),var(--steel-ink))}
@media (max-width:760px),(prefers-reduced-motion:reduce){
  .hs{height:auto}.hs .pin{position:static;height:auto;overflow:visible}.hs .track{flex-direction:column;transform:none !important}
  .ch{flex:none;height:auto;grid-template-columns:1fr;padding:2.6rem clamp(1.2rem,4.5vw,3rem);border-left:0;border-top:1px solid var(--hair-l)}
  .ch .num{font-size:5.5rem}.hs .bar{display:none}
}

/* ---- dual modular redundancy: pinned, scrubbed by scroll ---- */
.scene{position:relative;height:240vh;--p:0}
.scene .pin{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden;color:var(--on-dark);background:radial-gradient(640px circle at var(--mx,50%) var(--my,50%),rgba(201,162,39,.07),transparent 62%),var(--void)}
.stage{width:min(1180px,92vw)}
.stage .head{text-align:center;margin-bottom:clamp(1.4rem,3vw,2.4rem)}
.stage .lbl{color:var(--gold)}
.stage h2{font-size:clamp(1.9rem,4.4vw,3.4rem);max-width:18ch;margin:.9rem auto 0;color:var(--on-dark)}
.stage h2 em{font-style:italic;color:var(--gold)}
.stage .how{margin:1rem auto 0;max-width:52ch;color:var(--on-dark-body);font-size:1.02rem}
.two{position:relative;display:grid;grid-template-columns:1fr 1fr}
.two .divider{position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%) scaleY(var(--p));background:linear-gradient(var(--gold),var(--steel))}
.col{padding:clamp(1.2rem,3vw,2.2rem);border-top:2px solid transparent}
.col.a{border-top-color:var(--gold);transform:translateX(calc((1 - var(--p)) * 26%))}
.col.b{border-top-color:var(--steel);transform:translateX(calc((1 - var(--p)) * -26%));opacity:var(--p)}
.col .tag{font-family:var(--h-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase}
.col.a .tag{color:var(--gold)}.col.b .tag{color:var(--steel)}
.col h3{font-size:clamp(1.4rem,2.4vw,1.9rem);margin:.6rem 0 .7rem;color:var(--on-dark)}
.col p{color:var(--on-dark-body);font-size:.98rem;max-width:none}
.voter{margin-top:1rem;border:1px solid var(--hair-d);border-top:2px solid var(--dim);background:var(--void-2);padding:clamp(1.1rem,2.4vw,1.6rem);opacity:var(--p)}
.voter .tag{font-family:var(--h-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.voter h3{font-size:clamp(1.3rem,2.2vw,1.7rem);margin:.5rem 0 .4rem;color:var(--on-dark)}
.voter p{color:var(--on-dark-body);max-width:60ch}
.stage .you{text-align:center;margin-top:1.2rem;font-family:var(--h-mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);opacity:var(--p)}
@media (max-width:760px),(prefers-reduced-motion:reduce){
  .scene{height:auto;--p:1}.scene .pin{position:static;height:auto;padding:3rem 0}
  .two{grid-template-columns:1fr}.two .divider{display:none}.col.a,.col.b{transform:none;opacity:1}
}

/* ---- judgment, designed in ---- */
.rules-s{padding:clamp(3.5rem,8vw,6rem) 0;border-top:1px solid var(--hair-l)}
.rules-s .lbl{color:var(--gold-ink)}
.rules-s h2{font-size:clamp(1.8rem,3.6vw,2.7rem);max-width:18ch;margin-top:1rem}
.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair-l);border:1px solid var(--hair-l);margin-top:2rem}
.rule{background:var(--paper);padding:1.5rem 1.4rem 1.7rem}
.rule h3{font-size:1.55rem;color:var(--ink)}
.rule p{color:var(--ink-2);font-size:.96rem;margin-top:.5rem;max-width:none}
@media (max-width:760px){.rules{grid-template-columns:1fr}}

/* ---- the two doors ---- */
.hdoors{padding:clamp(3.5rem,8vw,6rem) 0;border-top:1px solid var(--hair-l)}
.hdoors h2{font-size:clamp(1.8rem,3.6vw,2.7rem)}
.hgrid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:2rem}
.hdoor{display:block;padding:1.7rem 1.6rem 1.8rem;border:1px solid var(--hair-l);border-top:2px solid var(--hair-l);background:var(--paper-2);transition:transform .25s,background .25s}
.hdoor:hover{transform:translateY(-3px);background:#fff}
.hdoor:nth-child(1){border-top-color:var(--gold-ink)}.hdoor:nth-child(2){border-top-color:var(--steel-ink)}
.hdoor .k{font-family:var(--h-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.hdoor h3{font-size:1.65rem;margin:.6rem 0 .4rem;color:var(--ink)}
.hdoor p{color:var(--ink-2);font-size:.96rem;max-width:none}
.hdoor .go{display:inline-block;margin-top:1rem;font-family:var(--h-mono);font-size:.78rem;color:var(--steel-ink)}
@media (max-width:720px){.hgrid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.hdoor:hover{transform:none}}