/* Styles for the content pages (about, privacy, contact). The game itself keeps
   its own inline stylesheet -- index.html stays a standalone document. The
   palette below is copied from it; change a colour in one place and change it in
   the other. */

:root{
  --floor:#E3E6E1; --panel:#FAFBF8; --panel-2:#EDF0EA;
  --ink:#1A201C; --ink-2:#5C665E; --ink-3:#8B958C;
  --line:#CDD3CB; --line-2:#DEE3DB;
  --accent:#0F6F68;
  --shadow-1:0 1px 2px rgba(26,32,28,.07);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --floor:#141816; --panel:#1D2321; --panel-2:#262D2A;
    --ink:#E9EEE9; --ink-2:#9AA49C; --ink-3:#6E7A72;
    --line:#303935; --line-2:#272F2C;
    --accent:#46A79E;
    --shadow-1:0 1px 2px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --floor:#141816; --panel:#1D2321; --panel-2:#262D2A;
  --ink:#E9EEE9; --ink-2:#9AA49C; --ink-3:#6E7A72;
  --line:#303935; --line-2:#272F2C;
  --accent:#46A79E;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--floor); color:var(--ink);
  font-family:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:660px; margin-inline:auto; padding-inline:18px; padding-block:16px 40px;}

/* ---------- header ---------- */
.top{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:14px; margin-bottom:26px; flex-wrap:wrap;
}
.wordmark{
  font-family:Archivo,ui-sans-serif,system-ui,sans-serif;
  font-variation-settings:"wdth" 112,"wght" 850;
  font-weight:850;
  font-size:clamp(24px,6vw,30px); line-height:.92; letter-spacing:.02em;
  margin:0; text-transform:uppercase;
}
.wordmark a{color:inherit; text-decoration:none}
.wordmark .ac{color:var(--accent)}
.backlink{
  font-family:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent); text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px;
}
@media (hover:hover){ .backlink:hover{color:var(--ink)} }

/* ---------- prose ---------- */
.tag{
  font-family:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 6px;
}
h2{
  font-family:Archivo,ui-sans-serif,system-ui,sans-serif;
  font-variation-settings:"wdth" 108,"wght" 800;
  font-weight:800; font-size:26px; line-height:1.15;
  margin:0 0 16px; letter-spacing:.01em;
}
h3{
  font-size:16px; font-weight:700; margin:30px 0 8px; line-height:1.3;
}
h3:first-of-type{margin-top:22px}
p{margin:0 0 14px}
ul{margin:0 0 14px; padding-left:20px}
li{margin-bottom:7px}
li::marker{color:var(--ink-3)}
a{color:var(--accent)}
@media (hover:hover){ a:hover{color:var(--ink)} }
strong{font-weight:650}
.mono{font-family:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.94em}
.lede{font-size:16.5px; color:var(--ink-2); margin-bottom:22px}
.updated{
  font-family:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px; letter-spacing:.06em; color:var(--ink-3); margin:0 0 26px;
}
.card{
  background:var(--panel); border:1px solid var(--line-2); border-radius:14px;
  padding:20px clamp(16px,4vw,24px); box-shadow:var(--shadow-1); margin-bottom:16px;
}
.card > :last-child{margin-bottom:0}

/* ---------- consent toggle (privacy.html) ---------- */
/* Matches the banner buttons analytics.js styles inline, so the two controls
   that write the same setting do not look like different features. */
.btn{
  font-family:inherit; font-size:13px; font-weight:600; cursor:pointer;
  border-radius:9px; padding:8px 16px;
  border:1px solid var(--line); background:var(--panel-2); color:var(--ink);
}
@media (hover:hover){ .btn:hover{border-color:var(--ink-3)} }
.consent{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center;}
.consent-state{font-size:13px; color:var(--ink-2)}

/* ---------- footer (shared with the game) ---------- */
.sitefoot{
  margin-top:34px; padding-top:16px; border-top:1px solid var(--line-2);
  display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center;
}
.sitefoot a, .sitefoot span{
  font-family:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
}
.sitefoot a{color:var(--accent); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;}
.sitefoot span{color:var(--ink-3)}
@media (hover:hover){ .sitefoot a:hover{color:var(--ink)} }