/* IBM Plex Mono 500 — self-hosted.
   The R5 package's CSS asks for this face in 13 places (kickers, tags, table
   headers, meta lines) but ships no font file, so it was silently falling back
   to whatever generic monospace the visitor happened to have, and the site
   rendered differently on every machine. Shipped here under the SIL Open Font
   License, the same licence as the Alegreyas beside it
   (web/ui4/fonts/IBMPlexMono-OFL.txt). Latin subset only: 15KB.
   It lives in web/ui4/fonts/ with the other faces, which the deploy ships
   wholesale, so it needs no amplify.yml allowlist line of its own. */
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/web/ui4/fonts/IBMPlexMono-Medium.woff2') format('woff2');
}
:root{--ink:#1a120c;--wood:#2e1f15;--wood2:#4a3121;--bone:#efe6d2;--sand:#e6bf8a;--muted:#cf9b64;--gold:#e2b93b;--gold-lit:#f6e08a;--madder:#b8472b}
*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--sand);font-family:'Alegreya Sans',sans-serif;font-size:18px;line-height:1.5}
a{color:var(--gold)}a:hover{color:var(--gold-lit)}
img{display:block;image-rendering:pixelated;max-width:100%;height:auto}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;font-family:'Alegreya Sans SC',sans-serif;font-weight:800;font-size:17px;letter-spacing:.06em;text-transform:lowercase;text-decoration:none;color:var(--ink);background:var(--gold);box-shadow:0 0 0 2px var(--ink),4px 4px 0 2px var(--ink)}
.btn:hover{background:var(--gold-lit);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--bone);box-shadow:inset 0 0 0 2px var(--bone)}
.btn.ghost:hover{color:var(--gold-lit);box-shadow:inset 0 0 0 2px var(--gold-lit)}
nav.site{position:fixed;inset:0 0 auto;z-index:10;display:flex;align-items:center;gap:28px;padding:14px 32px;background:linear-gradient(#1a120cf0,#1a120c00)}
nav.site .links{display:flex;gap:22px;margin-left:auto}
nav.site .links a{color:var(--sand);text-decoration:none;font-family:'Alegreya Sans SC',sans-serif;font-weight:700;text-transform:lowercase;letter-spacing:.06em;font-size:16px}
nav.site .links a:hover{color:var(--gold-lit)}
nav.site .btn{padding:8px 16px;font-size:15px}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.kicker{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--madder)}
h2{margin:6px 0 14px;font-family:'Alegreya Sans SC',sans-serif;font-weight:800;font-size:clamp(32px,4vw,52px);line-height:1.02;text-transform:lowercase;color:var(--bone)}
.sub{max-width:62ch;color:var(--sand);text-wrap:pretty}
figure{margin:0}
figcaption{margin-top:10px;font-size:15px;color:var(--muted);text-wrap:pretty}
figcaption b{display:block;font-family:'Alegreya Sans SC',sans-serif;font-weight:800;text-transform:lowercase;letter-spacing:.06em;color:var(--bone);font-size:16px}
footer.site{border-top:2px solid var(--wood2);padding:56px 0 36px;font-size:15px;color:var(--muted)}
footer.site .cols{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:36px}
footer.site h4{margin:0 0 10px;font-family:'Alegreya Sans SC',sans-serif;font-weight:800;text-transform:lowercase;letter-spacing:.06em;color:var(--bone);font-size:15px}
footer.site ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
footer.site a{color:var(--sand);text-decoration:none}footer.site a:hover{color:var(--gold-lit)}
footer.site .rs{font-family:'Alegreya Sans SC',sans-serif;font-weight:800;font-size:44px;line-height:1;color:var(--gold)}
footer.site .legal{margin-top:40px;font-size:13px}
@media (max-width:900px){nav.site .links{display:none}footer.site .cols{grid-template-columns:1fr 1fr}}
.menu{display:none;position:relative;margin-left:auto}
.menu summary{list-style:none;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;box-shadow:inset 0 0 0 2px var(--sand);color:var(--bone);font-family:'IBM Plex Mono',monospace;font-size:20px}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{box-shadow:inset 0 0 0 2px var(--gold);color:var(--gold)}
.menu .drop{position:absolute;right:0;top:52px;min-width:220px;display:flex;flex-direction:column;background:var(--ink);box-shadow:0 0 0 2px var(--wood2),6px 6px 0 #000}
.menu .drop a{padding:14px 18px;border-top:2px solid var(--wood2);font-family:'Alegreya Sans SC',sans-serif;font-weight:800;font-size:18px;letter-spacing:.06em;text-transform:lowercase;text-decoration:none;color:var(--sand)}
.menu .drop a:first-child{border-top:0}.menu .drop a:hover,.menu .drop a.on{color:var(--gold-lit)}
@media (max-width:900px){.menu{display:block}nav.site{gap:12px;padding:12px 20px}nav.site>a:first-child img{height:36px;width:auto}}
@media (max-width:420px){nav.site>.btn{display:none}}

/* The HTML `hidden` attribute has to beat a component's own display. base.css
   sets `.panel{display:…}`, which outranks the user-agent `[hidden]` rule, so a
   panel marked hidden still showed — which on Play meant the signed-IN panel
   rendering for a signed-OUT visitor. */
[hidden]{display:none!important}