/* Shared shell for the legal/doc pages. Same tokens as index.html.
   Full-width per the fable5 layout rule: no ch caps, no centered narrow column;
   long prose splits into columns on wide screens instead. */
:root{
  --bg:#14111c; --panel:#1e1a2a; --panel2:#252034; --line:rgba(240,236,248,.10);
  --text:#f2eef8; --muted:#9c92b0; --faint:#6f6684;
  /* --gold-ink is the text colour inside a .btn.primary. It is defined here
     because nav.css needs it on these pages too, and it MUST stay identical to
     site.css's value -- this file's header says "same tokens as index.html". */
  --gold:#ffd257; --gold-ink:#2a2113; --gold-soft:rgba(255,210,87,.14);
  --pad:clamp(16px,4vw,40px);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.65 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--gold)}
.wrap{padding-inline:var(--pad)}

/* The header lives in assets/nav.css, loaded before this file. It used to be
   redefined here as a brand-only bar, which is why the Pin guide had no nav and
   no CTAs, and why .brand img was still 22x29 (the old map-pin aspect) long after
   site.css moved to the square badge. */


.doc{padding-block:52px 72px}
.eyebrow{font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); margin:0 0 14px}
h1{font-size:clamp(32px,4.6vw,58px); letter-spacing:-.032em; margin:0 0 10px; font-weight:820}
.upd{color:var(--faint); font-size:14px; margin:0 0 30px}
h2{font-size:clamp(19px,2vw,25px); letter-spacing:-.02em; margin:38px 0 12px; font-weight:720}
p,li{color:var(--muted); font-size:clamp(15.5px,1.35vw,18px)}
ul{padding-left:22px}
li{margin:7px 0}

.warn{padding:18px 20px; border-left:3px solid var(--gold);
  background:linear-gradient(90deg,var(--gold-soft),transparent 70%);
  border-radius:0 12px 12px 0; color:var(--text)}

footer{border-top:1px solid var(--line); padding-block:34px; color:var(--faint); font-size:14px}
.frow{display:flex; gap:26px; flex-wrap:wrap; align-items:center}
.frow a{color:var(--muted); text-decoration:none}
.frow a:hover{color:var(--text)}
.fspacer{margin-left:auto}

@media(min-width:1500px){ .doc p, .doc li{columns:2; column-gap:clamp(28px,3vw,56px)} }
@media(min-width:2200px){ .doc p, .doc li{columns:3} }