/* ============================================================
   The junction story — index page only
   ============================================================ */

.hero{padding:17vh 0 3rem;text-align:center;position:relative}
.hero .eyebrow{margin-bottom:2rem}
.hero h1{margin:0 auto 1.8rem;max-width:15ch}
.hero .lede{margin:0 auto;max-width:31rem}
.hint{margin-top:2rem;font-size:.72rem;letter-spacing:.17em;text-transform:uppercase;color:var(--muted)}

/* Epigraph in two beats. The claim, a held gap, then the contradiction —
   the same pause the junctions use, and the shape of how he writes. */
.epigraph{
  max-width:30rem;margin:3.4rem auto 0;
  font-family:var(--serif);font-size:1.36rem;line-height:1.5;color:var(--muted);
}
.epigraph span{
  display:block;opacity:0;transform:translateY(7px);
  animation:epiIn .9s cubic-bezier(.3,0,.2,1) forwards;
}
.epigraph .e1{animation-delay:.5s}
.epigraph .e2{
  font-style:italic;color:var(--ink);
  margin-top:1.15rem;padding-top:1.15rem;border-top:1px solid var(--rule);
  animation-delay:3.4s;
}
@keyframes epiIn{to{opacity:1;transform:none}}

/* ---------------- junction ---------------- */
.junction{padding:8rem 0;position:relative}
.junction + .junction{border-top:1px solid var(--rule)}
.jgrid{display:grid;grid-template-columns:9rem minmax(0,1fr);max-width:58rem}
.year{padding-top:.7rem}
.diagram{margin-top:1.6rem}
.diagram svg{display:block;overflow:visible}
.diagram path{fill:none;stroke-linecap:round}
.d-spine{stroke:var(--accent);stroke-width:2}
.d-mine{stroke:var(--muted-line);stroke-width:1.6;stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.d-his{stroke:var(--accent);stroke-width:2;stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.d-stop{fill:var(--cream);stroke:var(--muted-line);stroke-width:1.6;opacity:0}
.d-ghost{fill:none;stroke:var(--rule);stroke-width:1.2;stroke-dasharray:2 6;stroke-linecap:round}
.drawn .d-mine{animation:draw .5s cubic-bezier(.4,0,.2,1) forwards}
.drawn .d-stop{animation:pop .3s ease .46s forwards}
.drawn .d-his{animation:draw 1.2s cubic-bezier(.35,0,.25,1) .28s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{to{opacity:1}}
.year b{display:block;font-family:var(--serif);font-weight:400;font-size:1.9rem;line-height:1;letter-spacing:-.01em;margin-bottom:.35rem}
.year span{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.jbody{max-width:35rem}

.setup{font-size:1.2rem;line-height:1.62;color:var(--ink-soft);margin:0 0 3rem}
.setup p{margin:0 0 1.1rem}
.setup p:last-child{margin:0}
.setup strong{font-weight:400;color:var(--ink)}

/* ---------------- reality ---------------- */
.reality{margin-top:3.2rem;opacity:0;transform:translateY(12px);transition:opacity .9s ease,transform .9s ease}
.reality.in{opacity:1;transform:none}
.rlabel{font-size:.68rem;letter-spacing:.19em;text-transform:uppercase;color:var(--accent-text);margin-bottom:1.5rem;display:flex;align-items:center;gap:.85rem}
.rlabel::after{content:"";height:1px;flex:1;background:var(--rule)}
.reality p{margin:0 0 1.15rem;color:var(--ink-soft)}
.reality p:last-child{margin:0}
.reality .land{font-family:var(--serif);font-size:1.55rem;line-height:1.35;color:var(--ink);margin-top:1.8rem}
.reality .num{color:var(--ink);font-weight:500}

/* ---------------- dark ending ---------------- */
.dark{background:var(--pine);color:var(--cream);border-radius:var(--r);margin:5rem 0 0;padding:7rem 0;position:relative;z-index:1}
.dark .inner{padding:0 clamp(1.75rem,6vw,5rem)}
.dark .year b{color:var(--cream)}
.dark .year span,.dark .setup{color:var(--pine-soft)}
.dark .setup strong{color:var(--cream)}
.dark .rlabel{color:var(--accent-soft)}
.dark .rlabel::after{background:var(--pine-line)}
.dark .reality p{color:var(--pine-soft)}
.dark .d-spine,.dark .d-his{stroke:var(--accent-soft)}
.dark .d-mine{stroke:#54786A}
.dark .d-ghost{stroke:#2F5648}
.dark .d-stop{fill:var(--pine);stroke:#54786A}
.blank{border:1px dashed var(--pine-line);border-radius:24px;padding:3.5rem 2rem;text-align:center;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--pine-soft)}
.signoff{font-family:var(--serif);font-size:2.4rem;margin-top:2.2rem;color:var(--cream);line-height:1.2}

/* ---------------- now ---------------- */
.now{padding:8rem 0 2rem}
.now .cols{display:grid;grid-template-columns:9rem minmax(0,1fr);max-width:58rem}
.now .nbody{max-width:35rem}
.now p{color:var(--ink-soft);margin:0 0 1.15rem}
.now .list{margin-top:2.5rem;border-top:1px solid var(--rule)}
.now .list a{
  display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;
  padding:1.1rem 0;border-bottom:1px solid var(--rule);
  text-decoration:none;color:var(--ink);font-family:var(--serif);font-size:1.3rem;
  transition:padding-left .25s ease;
}
.now .list a:hover{padding-left:.6rem;color:var(--accent-text)}
.now .list span{font-family:var(--sans);font-size:.78rem;color:var(--muted);text-align:right;flex:none;letter-spacing:.02em}

@media (max-width:820px){
  body{padding-bottom:6.5rem}
  .hero{padding:15vh 0 2rem}
  .epigraph{font-size:1.2rem;margin-top:2.6rem}
  .hint{margin-top:2.5rem}
  .junction{padding:5rem 0}
  .jgrid,.now .cols{grid-template-columns:1fr;gap:1.5rem}
  .year{padding-top:0;display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap}
  .year b{margin:0;font-size:1.5rem}
  .diagram{flex-basis:100%;margin-top:.9rem}
  .diagram svg{width:88px;height:134px}
  .dark{padding:4.5rem 0;margin-left:-.5rem;margin-right:-.5rem}
  .signoff{font-size:1.9rem}
}
@media (prefers-reduced-motion:reduce){
  .d-mine,.d-his{stroke-dashoffset:0 !important}
  .d-stop{opacity:1 !important}
  .epigraph span{opacity:1;transform:none;animation:none}
}