/* Terms, Privacy and Responsible play (public/terms.html, privacy.html, responsible-play.html) and the 404 page, in
   the site kit (site redo 2026-11-02, layout 1 "Sidebar" mockups legal.html and 404.html): true black, warm panels,
   bone for actions, Archivo with its wide display cut. One reading column under 70 characters with generous leading;
   on a PC the three legal pages and this page's headings sit in a side column. The tokens are the kit's
   (public/css/ds-tokens.css), set here so these pages stay one stylesheet. The pages used to be white with a green
   brand mark, copied from another company's documents; they look like the site they belong to. */
:root{
  --ds-ink:#000; --ds-s1:#0d0b08; --ds-s2:#1a1611; --ds-s3:#272018; --ds-line:#36291a; --ds-line2:#5a4630;
  --ds-bone:#f4f1ea; --ds-tx2:#b3a792; --ds-tx3:#988b78; --ds-red:#ef7461; --ds-red-t:rgba(239,116,97,.15);
  --ds-edge:inset 0 0 0 1px var(--ds-line); --ds-r1:6px; --ds-r2:10px; --ds-r3:18px; --ds-wide:118%; --ds-hdh:64px;
  --ds-f:'Archivo','Segoe UI',system-ui,-apple-system,Roboto,'Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--ds-ink);color:var(--ds-tx2);font-family:var(--ds-f);font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--ds-bone);text-decoration:underline;text-decoration-color:var(--ds-tx3);text-underline-offset:3px}
a:hover{text-decoration-color:var(--ds-bone)}
:focus-visible{outline:2px solid var(--ds-bone);outline-offset:3px;border-radius:4px}

/* the header: the lobby header's height, black glass, the wordmark and one way back */
.top{position:sticky;top:0;z-index:50;height:var(--ds-hdh);background:rgba(0,0,0,.88);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 -1px 0 var(--ds-line)}
.top-in{max-width:1180px;height:100%;margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:inline-flex;align-items:center;height:44px;font-size:20px;font-weight:800;font-stretch:var(--ds-wide);
  letter-spacing:-.02em;line-height:1;color:var(--ds-bone);text-decoration:none}
.brand span{color:var(--ds-tx2);font-weight:600}
.home,.go,.go2{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;
  border-radius:var(--ds-r2);font-family:var(--ds-f);font-size:15px;font-weight:650;line-height:1;white-space:nowrap;
  text-decoration:none;transition:background-color .14s,box-shadow .14s,transform .08s}
.home{background:var(--ds-s3);color:var(--ds-bone);box-shadow:var(--ds-edge)}
.home:hover{background:#332a1f;box-shadow:inset 0 0 0 1px var(--ds-line2)}
.home:active,.go:active,.go2:active{transform:translateY(1px) scale(.985)}

/* the page: the side column (PC) and the reading column */
.lg{max-width:1180px;margin:0 auto;padding:48px 32px 0;display:grid;grid-template-columns:220px minmax(0,680px);gap:48px;justify-content:center}
.side{position:sticky;top:calc(var(--ds-hdh) + 24px);align-self:start;padding-top:6px}
.side-nav{display:flex;flex-direction:column;gap:2px}
.side-nav a{display:flex;align-items:center;min-height:40px;padding:0 12px;border-radius:var(--ds-r2);color:var(--ds-tx2);
  font-size:14px;font-weight:600;line-height:1.3;text-decoration:none;transition:background-color .14s,color .14s}
.side-nav a:hover{background:var(--ds-s2);color:var(--ds-bone)}
.side-nav a[aria-current]{background:var(--ds-s3);color:var(--ds-bone);box-shadow:var(--ds-edge)}
.side-hd{padding:24px 12px 4px;font-size:13px;font-weight:650;color:var(--ds-tx2)}
.toc a{min-height:34px;font-size:13px;font-weight:550}

.doc{min-width:0;padding-bottom:48px}
h1{font-size:46px;line-height:1.04;font-weight:800;font-stretch:var(--ds-wide);letter-spacing:-.02em;color:var(--ds-bone)}
.meta{margin-top:8px;font-size:13px;color:var(--ds-tx2)}
/* The draft notice is the first thing read and cannot be mistaken for body copy: a bone rule on a raised panel. */
.draft{margin:24px 0 8px;background:var(--ds-s1);border-radius:var(--ds-r3);padding:16px 24px;
  box-shadow:inset 3px 0 0 var(--ds-bone),var(--ds-edge);color:var(--ds-bone);font-size:15px;line-height:1.6}
.draft b{display:inline-flex;align-items:center;height:24px;padding:0 8px;margin-right:6px;border-radius:var(--ds-r1);
  background:var(--ds-bone);color:#000;font-size:12px;font-weight:650;line-height:1;vertical-align:1px}
h2{margin:44px 0 10px;font-size:21px;line-height:1.3;font-weight:750;font-stretch:108%;letter-spacing:-.01em;color:var(--ds-bone);
  scroll-margin-top:calc(var(--ds-hdh) + 16px)}
p,li{max-width:66ch}
p+p{margin-top:12px}
ul{margin:10px 0 0;padding-left:20px}
li+li{margin-top:8px}
li::marker{color:var(--ds-tx3)}
strong{color:var(--ds-bone);font-weight:650}
/* an unfilled clause: the kit's red, the colour for something not right yet */
mark.todo{padding:3px 8px;border-radius:var(--ds-r1);background:var(--ds-red-t);box-shadow:inset 0 0 0 1px rgba(239,116,97,.45);
  color:var(--ds-bone);font-weight:550;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* the footer: the three pages as quiet kit buttons */
.links{margin-top:48px;padding-top:16px;box-shadow:inset 0 1px 0 var(--ds-line);display:flex;flex-wrap:wrap;gap:2px 4px;margin-left:-12px}
.links a{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border-radius:var(--ds-r2);color:var(--ds-tx2);
  font-size:13px;font-weight:650;text-decoration:none}
.links a:hover{background:var(--ds-s2);color:var(--ds-bone)}
.links a[aria-current]{color:var(--ds-bone)}

@media(max-width:1100px){
  .lg{grid-template-columns:minmax(0,680px);padding-top:32px}
  .side{display:none}
  .top-in{padding:0 24px}
}
@media(max-width:760px){
  :root{--ds-hdh:60px}
  .top-in{padding:0 12px 0 16px}
  .brand{font-size:19px}
  .lg{padding:24px 16px 0}
  body{font-size:15.5px}
  .doc{padding-bottom:calc(32px + env(safe-area-inset-bottom))}
  h1{font-size:34px}
  h2{margin-top:36px;font-size:19px}
  .draft{padding:16px}
  .links{margin-left:-8px}
  .links a{min-height:44px;padding:0 8px}
}