/* legal + 404 — one measure of prose; the verdict card */
.lhero{max-width:var(--wide); margin-inline:auto; padding:clamp(40px,7vh,88px) var(--gut) 0}
.lhero h1{font-size:clamp(2.2rem,4.6vw,3.8rem); font-weight:800; letter-spacing:-.04em; margin-bottom:clamp(16px,2.4vh,24px); animation:fadeUp .9s var(--ease) both}
.legal h2:first-child{margin-top:0; border-top:0; padding-top:0}
.legal p{max-width:var(--measure)}

/* 404: the instrument's verdict, nothing else */
.nf{max-width:var(--wide); margin-inline:auto; padding:clamp(64px,14vh,180px) var(--gut) clamp(64px,10vh,140px)}
.nf__in{max-width:880px}
.nf .verdict{display:inline-flex; margin-bottom:clamp(20px,3vh,32px); animation:fadeUp .9s var(--ease) both}
.nf h1{font-size:clamp(2.4rem,6vw,5.2rem); font-weight:800; letter-spacing:-.045em; text-wrap:balance; margin-bottom:clamp(16px,2.4vh,24px); animation:fadeUp .9s var(--ease) .1s both}
.nf .lead{animation:fadeUp .9s var(--ease) .2s both}
.nf .cells{margin-top:clamp(32px,5vh,56px); animation:fadeUp .9s var(--ease) .3s both}
.cell p.cell__t,.cell__t{font-family:var(--disp); font-size:clamp(1.05rem,1.4vw,1.3rem); font-weight:600; letter-spacing:-.02em; line-height:1.15; color:var(--txt)}

/* ══ design review round 1 ═══════════════════════════════════════ */
/* C1-12: this was a 68ch column pinned to the left gutter of a 1440 screen with ~45% of
   the viewport permanently empty, and seven chapters each of two lines followed by a
   ~90px void. It gets the gutter device every other page type already has -- built from
   the numbered h2s that are already in the markup -- and the section rhythm is tuned for
   40-word sections instead of 300-word ones. */
.legal-shell{max-width:var(--wide); margin-inline:auto; padding:clamp(40px,6vh,80px) var(--gut) clamp(56px,8vh,110px);
  display:grid; grid-template-columns:minmax(0,1fr) 236px; column-gap:clamp(36px,4.6vw,84px); align-items:start}
.legal-shell__side{position:sticky; top:calc(var(--rail-h) + 28px)}
.legal-shell__side .index{position:static}
.legal.prose h2{margin:1.7em 0 .6em; padding-top:.7em}
.legal.prose h2:first-child{margin-top:0}
@media (max-width:1180px){
  .legal-shell{grid-template-columns:1fr; row-gap:0}
  .legal-shell__side{position:static; order:-1; margin-bottom:clamp(28px,4vh,44px);
    padding-bottom:clamp(20px,3vh,30px); border-bottom:1px solid var(--line-struct)}
  .legal-shell__side .index ol{border-left:0; display:flex; flex-wrap:wrap; gap:8px}
  .legal-shell__side .index li a{border:1px solid var(--line-struct); border-radius:var(--radius);
    padding:12px 14px; border-left:1px solid var(--line-struct); margin-left:0; white-space:normal}
}

@media (max-width:720px){
  /* C1-08: on 404 the four escape links stacked as four full-width slabs while the footer
     below them ran 1,150px -- 60% of the page was boilerplate and the escape routes were the
     smaller half. Two columns makes them one object again. */
  .nf .cells--4{grid-template-columns:repeat(2,1fr)}
}