/* ══════════ TURNSTONE — document pages ══════════
   Privacy, terms and contact share this sheet. Same paper and ink as the
   game, but these are documents, so they scroll and they use a comfortable
   reading measure instead of a fixed viewport.                           */

:root{
  --paper:#F7F4EC; --ink:#12120F; --graphite:#6E6A63; --rule:#D8D2C4;
  --maroon:#8A0F1E; --cobalt:#2A34B8;

  /* ── the wordmark colour, and the only place it is defined ──
     STONES and 007 are this one red everywhere: masthead, briefing card,
     HUD, level cards, document pages. It is deliberately lighter than the
     old maroon because the old maroon scored 1.9:1 on the ink masthead and
     was close to unreadable there; this red clears 5.2:1 on paper and
     3.3:1 on ink, so one value covers both backgrounds. */
  --brand:#C8202F; --headbg:#EDE7D9;
  /* the blue out of the logo's arrow — the unit number wears it */
  --arrow:#2A34B8;
  /* the unit number rides its own face — Chakra Petch Bold Italic, a free
     OFL typeface with a real slant built in, so no faked skew is needed */
  --num:"Chakra Petch","Oswald","Arial Narrow",sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --disp: "Oswald", "Arial Narrow", "Helvetica Neue", Impact, sans-serif;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--mono);font-size:14px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--maroon)}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}

.head{border-bottom:2px solid var(--ink);background:var(--headbg);
  position:sticky;top:0;z-index:10}
.head-in{max-width:780px;margin:0 auto;padding:0 22px;height:52px;
  display:flex;align-items:center;justify-content:space-between;gap:14px}
.lockup{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.lockup svg{width:26px;height:26px;display:block;flex:0 0 auto}
.wmstack{display:flex;flex-direction:column;align-items:stretch;line-height:1}
.wm{font-family:var(--disp);font-weight:700;font-size:21px;letter-spacing:.07em;line-height:1}
.wm i{font-style:normal;color:var(--brand)}
.wmstack .code{font-family:var(--num);font-weight:700;font-size:13px;letter-spacing:.02em;
  color:var(--arrow);margin-top:2px;line-height:1;display:flex;align-items:center;gap:7px;
  font-style:italic}
/* the hairline that runs from the unit number out to the edge of the wordmark,
   so 007 reads as a stencilled tag rather than three small digits */
.wmstack .code::after{content:"";flex:1 1 auto;min-width:14px;height:1.5px;
  background:var(--arrow);opacity:.6}
.back{font-size:10px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  color:var(--ink);border:1px solid var(--ink);padding:7px 13px;white-space:nowrap;
  transition:background .12s ease,color .12s ease}
.back:hover{background:var(--arrow);border-color:var(--arrow);color:var(--paper)}

main{max-width:780px;margin:0 auto;padding:38px 22px 60px}
.kicker{font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--graphite);margin:0 0 10px}
h1{font-family:var(--disp);font-size:clamp(32px,6vw,46px);letter-spacing:.06em;
  text-transform:uppercase;margin:0 0 8px;line-height:1}
.dateline{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite);
  border-bottom:1px solid var(--rule);padding-bottom:18px;margin:0 0 26px}
h2{font-family:var(--disp);font-size:21px;letter-spacing:.09em;text-transform:uppercase;
  margin:34px 0 8px;padding-top:16px;border-top:1px solid var(--rule)}
h2:first-of-type{border-top:0;padding-top:0}
p{margin:0 0 14px}
ul{margin:0 0 14px;padding-left:0;list-style:none}
li{position:relative;padding:5px 0 5px 20px}
li::before{content:"\203A";position:absolute;left:2px;color:var(--maroon);font-weight:700}

/* anything the operator still has to fill in is marked, loudly, on purpose */
.fill{background:#FBE9AC;border-bottom:1px solid var(--maroon);padding:0 3px;font-weight:700}
.note{border-left:3px solid var(--maroon);background:#FBF9F3;padding:12px 16px;margin:0 0 22px;font-size:13px}

.mail{display:inline-block;font-family:var(--disp);font-size:24px;letter-spacing:.05em;
  border:2px solid var(--ink);padding:14px 20px;text-decoration:none;color:var(--ink);
  margin:6px 0 18px;transition:background .12s ease,color .12s ease}
.mail:hover{background:var(--ink);color:var(--paper)}

.foot{border-top:2px solid var(--ink);margin-top:44px;padding:20px 0 40px}
.foot-in{max-width:780px;margin:0 auto;padding:0 22px;display:flex;flex-wrap:wrap;gap:16px;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite)}
.foot-in a{color:var(--graphite);text-decoration:none}
.foot-in a:hover{color:var(--ink);text-decoration:underline}

/* ── strict notices ──────────────────────────────────────────────────────
   Two things on these pages are warnings rather than prose: progress lives
   in browser storage and can be wiped, and the game is built to be hard to
   put down. Both get a red rule and a heading so they cannot be skimmed
   past like a paragraph.                                                  */
.warn{border:2px solid var(--maroon);background:#FDF4F0;padding:16px 18px;margin:0 0 22px}
.warn b.wh{display:block;font-family:var(--disp);font-size:13px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--maroon);margin-bottom:6px}
.warn p{margin:0 0 8px;font-size:13px}
.warn p:last-child{margin-bottom:0}

/* the studio line in the footer — name, then where the game is made */
.foot-in .origin{letter-spacing:.18em}