/* legal.css — supplement for /privacy, /terms, /support, 404.
   loaded after main.css. legal-page layout only; base type lives in main.css. */

/* legal pages skip the canvas field — paint the faint paper dot-grid in css instead */
body{
  background-color:var(--paper);
  background-image:radial-gradient(var(--grid-dot) 1px, transparent 1.4px);
  background-size:24px 24px;
}

/* wrapper — clear the fixed masthead, center the 68ch measure */
.legal{
  max-width:68ch;
  margin:0 auto;
  padding:calc(var(--cell)*13) max(24px, env(safe-area-inset-left)) calc(var(--cell)*8);
}

/* head row: kicker + h1 left, last-updated line pinned top-right */
.legal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:calc(var(--cell)*3);
}
.legal .updated{
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0;
  padding-top:14px;
  white-space:nowrap;
}
.legal .lede{
  font-size:clamp(19px, 2vw, 22px);
  line-height:1.55;
  color:var(--ink-soft);
  max-width:56ch;
  margin:0 0 calc(var(--cell)*4);
}

/* on-this-page contents — long legal docs only; hairline box, mono links */
.legal-toc{
  border:1px solid var(--line);
  padding:20px 22px 16px;
  margin:0 0 calc(var(--cell)*1);
}
.legal-toc .kick{display:block; margin-bottom:12px;}
.legal-toc ol{
  margin:0; padding:0; list-style:none;
  columns:2; column-gap:32px;
}
.legal-toc li{margin:0 0 8px; padding:0; break-inside:avoid;}
.legal-toc a{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.06em;
  line-height:1.5;
}
.legal-toc .tnum{color:var(--ember-deep); margin-right:8px;}
@media (max-width:560px){.legal-toc ol{columns:1;}}

/* hairline-separated sections with mono number kicks above each h2 */
.legal section{
  border-top:1px solid var(--line);
  margin-top:calc(var(--cell)*4);
  padding-top:calc(var(--cell)*3);
  scroll-margin-top:calc(var(--cell)*8);
}
.legal h2{margin:0 0 14px;}
.legal h3{font-size:19px; line-height:1.3; margin:24px 0 10px;}
.legal h2 .num{
  display:block;
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ember-deep);
  margin-bottom:10px;
}
.legal p{margin:0 0 16px;}
.legal code{font-family:var(--mono); font-size:.85em; letter-spacing:0; color:var(--ink);}
.legal ul{margin:0 0 16px; padding-left:1.15em;}
.legal li{margin:7px 0; padding-left:4px;}
.legal .procs{list-style:none; padding-left:0;}
.legal .procs li{
  border-bottom:1px solid var(--line-2);
  padding:10px 0;
  margin:0;
}
.legal .procs li:last-child{border-bottom:0;}
.legal .procs b{font-weight:500; color:var(--ink);}

/* privacy & terms accent voice (.legal-cols) — ASIS names things in ember.
   Running heads take the display tier (--ember, legal from 18px up; bare h2 sits
   24-27px here); named lead-ins take the text tier (--ember-deep, AA at any size)
   on the real Newsreader 500, never a synthetic bold. */
.legal-cols section h2{color:var(--ember);}
.legal-cols section b,
.legal-cols .procs b{font-weight:500; color:var(--ember-deep);}

/* 404 — one calm centered block */
.nf{
  min-height:62vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:22px;
  padding:calc(var(--cell)*14) 24px calc(var(--cell)*10);
}
.nf p{color:var(--ink-soft); margin:0; max-width:38ch;}

@media (max-width:680px){
  .legal{padding-top:calc(var(--cell)*10);}
  .legal .updated{padding-top:2px;}
}

/* wide viewports, privacy & terms only (.legal-cols) — the editorial contract layout.
   The numbered running heads step into a left rail and hold their post while their
   section scrolls; the prose keeps its reading measure on the right. Both flanks work. */
@media (min-width:1100px){
  .legal-cols{
    --lc-head: clamp(230px, 23vw, 340px);   /* the running-head rail */
    --lc-gap:  clamp(56px, 6vw, 110px);     /* the gutter between rail and measure */
    max-width: calc(var(--lc-head) + var(--lc-gap) + 66ch);
  }
  .legal-cols .lede{
    margin-left: calc(var(--lc-head) + var(--lc-gap));
  }
  .legal-cols section{
    display: grid;
    grid-template-columns: var(--lc-head) minmax(0, 1fr);
    column-gap: var(--lc-gap);
  }
  .legal-cols section > h2{
    grid-column: 1;
    grid-row: 1 / 99;          /* span the section's rows so the head can hold its post */
    align-self: start;
    position: sticky;
    top: calc(var(--cell)*8);
  }
  .legal-cols section > *:not(h2){grid-column: 2;}
  .legal-cols .legal-toc ol{columns:3; column-gap:40px;}
}