@font-face{font-family:Fraunces;src:url(/fonts/fraunces-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Jakarta;src:url(/fonts/jakarta-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Jakarta;src:url(/fonts/jakarta-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Jakarta;src:url(/fonts/jakarta-800.woff2) format('woff2');font-weight:800;font-display:swap}

:root{
  --ink-950:#0a0710;--ink-900:#0f0b16;--ink-850:#140e1c;
  --ink-800:#181123;--ink-700:#211830;
  --cream:#f3ead6;--on-cream:#241a10;
  --hi:#f7f0e4;
  /* --faint carries 13px body copy (card meta, the footer), so it has to
     clear WCAG AA on --ink-950, not merely look quiet: cream needs .48 alpha
     for 4.5:1 there, and .44 only reached 3.95:1. */
  --mid:rgba(247,240,228,.78);--lo:rgba(247,240,228,.6);--faint:rgba(247,240,228,.52);
  --line:rgba(247,240,228,.1);--line-2:rgba(247,240,228,.18);
  --glass:rgba(247,240,228,.045);
  --page:1100px;--prose:66ch;--r:16px;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ink-950);color:var(--hi);
  font:500 17px/1.65 Jakarta,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

.wrap{width:min(var(--page),100%);margin-inline:auto;padding-inline:22px}
.prose{max-width:var(--prose)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:22px;top:12px;background:var(--cream);color:var(--on-cream);
  padding:10px 16px;border-radius:10px;font-weight:800;z-index:9}

/* ---- the aubergine wash every page opens with ---- */
.top{background:linear-gradient(180deg,var(--accent-card) 0%,var(--ink-900) 46%,var(--ink-950) 82%)}
@supports (background:color-mix(in oklab,red 50%,transparent)){
  .top{background:
    radial-gradient(120% 68% at 50% 0%,color-mix(in oklab,var(--accent-card) 62%,transparent) 0%,transparent 70%),
    linear-gradient(180deg,var(--ink-850) 0%,var(--ink-950) 78%)}
}

.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-block:20px}
.mark{font:700 20px Fraunces,Georgia,serif;letter-spacing:-.01em}
.bar>span{display:flex;gap:20px;font-size:14px;font-weight:600;color:var(--mid)}
.bar>span a:hover{color:var(--hi)}

/* ---- hero ---- */
.hero{display:grid;gap:34px;padding-block:14px 56px;align-items:center}
@media(min-width:900px){
  .hero{grid-template-columns:minmax(0,1.08fr) minmax(250px,.92fr);gap:56px;padding-block:24px 76px}
}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px}
h1{font:700 clamp(33px,6.4vw,50px)/1.06 Fraunces,Georgia,serif;letter-spacing:-.022em}
.lead{font-size:clamp(17px,2.2vw,19.5px);line-height:1.55;color:var(--mid);margin-top:16px;max-width:34ch}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.chip{border:1px solid var(--line-2);border-radius:999px;padding:6px 13px;
  font-size:13px;font-weight:600;color:var(--mid);white-space:nowrap}
.chip--key{border-color:var(--accent);color:var(--accent-soft)}
@supports (background:color-mix(in oklab,red 50%,transparent)){
  .chip--key{border-color:transparent;background:color-mix(in oklab,var(--accent) 18%,transparent)}
}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:28px}
.btn{display:inline-block;background:var(--cream);color:var(--on-cream);
  font-weight:800;font-size:16px;padding:14px 26px;border-radius:14px;
  transition:transform .12s ease,opacity .12s ease}
.btn:hover{opacity:.92;transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--hi);border:1px solid var(--line-2);font-weight:600}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent-soft)}
@media(max-width:560px){
  .acts{flex-direction:column;align-items:stretch}
  .acts .btn{text-align:center}
}
/* --lo, not --faint: this line sits inside .top, where the accent wash lifts
   the background and drags a .44 cream down to ~3:1. */
.note{font-size:13.5px;color:var(--lo);margin-top:14px;max-width:40ch}
.shot{width:min(244px,66vw);margin-inline:auto;filter:drop-shadow(0 24px 48px rgba(0,0,0,.5))}
@media(min-width:900px){.shot{width:100%;max-width:296px;margin-inline:0 auto}}

/* ---- body sections ---- */
section{padding-block:44px}
section+section{border-top:1px solid var(--line)}
h2{font:700 clamp(23px,3.4vw,31px)/1.15 Fraunces,Georgia,serif;letter-spacing:-.015em}
h2+*{margin-top:18px}
h3{font-size:16px;font-weight:800;letter-spacing:-.005em}
p+p{margin-top:15px}
.prose p{color:var(--mid)}

/* ---- numbered rules ---- */
.steps{list-style:none;counter-reset:s;display:grid;gap:14px;max-width:var(--prose)}
.steps li{counter-increment:s;position:relative;padding-left:46px;color:var(--mid)}
.steps li::before{content:counter(s);position:absolute;left:0;top:1px;
  width:30px;height:30px;border-radius:50%;
  background:var(--glass);color:var(--accent-soft);
  font:800 14px/30px Jakarta,sans-serif;text-align:center}

@supports (background:color-mix(in oklab,red 50%,transparent)){
  .steps li::before{background:color-mix(in oklab,var(--accent) 20%,transparent)}
}

/* ---- tips / notes ---- */
.tiles{display:grid;gap:12px;margin-top:20px}
@media(min-width:680px){.tiles{grid-template-columns:1fr 1fr}}
.tile{background:var(--glass);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
.tile h3{color:var(--accent-soft);margin-bottom:6px}
.tile p{font-size:15.5px;line-height:1.55;color:var(--mid)}

/* ---- faq ---- */
.faq{margin-top:22px;max-width:var(--prose)}
.faq>div{padding-block:20px;border-top:1px solid var(--line)}
.faq>div:first-child{border-top:0;padding-top:4px}
.faq h3{font-size:17.5px;font-weight:700;font-family:Fraunces,Georgia,serif;letter-spacing:-.01em}
.faq p{margin-top:8px;color:var(--mid);font-size:16px}

/* ---- game cards ---- */
/* min() on the track floor so a phone narrower than one card (a 280px fold
   cover screen) shrinks the card instead of pushing it under the clip. */
.cards{display:grid;gap:11px;margin-top:22px;
  grid-template-columns:repeat(auto-fill,minmax(min(255px,100%),1fr))}
.card{display:flex;gap:13px;align-items:center;
  background:var(--glass);border:1px solid var(--line);border-radius:14px;padding:12px 14px;
  transition:border-color .14s ease,background .14s ease}
.card:hover{border-color:var(--line-2);background:rgba(247,240,228,.07)}
.card img{width:46px;height:46px;border-radius:11px;object-fit:cover;flex:none}
.card b{display:block;font-size:15.5px;font-weight:700}
.card span{display:block;font-size:13px;color:var(--faint);margin-top:2px}

/* ---- hub links ---- */
.links{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.links a{border:1px solid var(--line-2);border-radius:999px;padding:8px 15px;
  font-size:14px;font-weight:600;color:var(--mid)}
.links a:hover{border-color:var(--accent);color:var(--accent-soft)}

/* ---- footer ---- */
footer{border-top:1px solid var(--line);margin-top:26px;padding-block:34px 56px;
  font-size:13.5px;color:var(--faint)}
footer p+p{margin-top:10px}
footer a{color:var(--lo)}
footer a:hover{color:var(--hi)}
.langs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px}
.langs a{border:1px solid var(--line);border-radius:8px;padding:5px 11px;font-size:12.5px}
.langs a:hover{border-color:var(--line-2);color:var(--hi)}
/* Weight as well as colour: the language you are already reading must not be
   marked by hue alone. */
.langs a[aria-current]{border-color:var(--accent);color:var(--accent-soft);font-weight:800}

/* The app collapses every duration under this query (src/styles/tokens.css);
   these pages carry the same two transitions, so they collapse them too. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:1ms!important;animation-iteration-count:1!important;
    transition-duration:1ms!important;scroll-behavior:auto!important}
  .btn:hover{transform:none}
}