:root{
  --paper:#EFF1F2;
  --surface:#FBFCFC;
  --surface-2:#E3E7E8;
  --ink:#14181C;
  --ink-2:#4A5259;
  --ink-3:#7E878E;
  --rule:#D6DBDD;
  --rule-soft:#E4E8E9;
  --amber:#9A5B0B;
  --amber-soft:#F6ECDC;
  --amber-line:#D9B57E;
  --shadow:0 1px 2px rgba(20,24,28,.05),0 10px 30px -22px rgba(20,24,28,.45);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#121517;
    --surface:#191D20;
    --surface-2:#222729;
    --ink:#E8EBEC;
    --ink-2:#A6AEB3;
    --ink-3:#79838A;
    --rule:#2A3033;
    --rule-soft:#212629;
    --amber:#E0A458;
    --amber-soft:#241C11;
    --amber-line:#5E4620;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 34px -24px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --paper:#121517;
  --surface:#191D20;
  --surface-2:#222729;
  --ink:#E8EBEC;
  --ink-2:#A6AEB3;
  --ink-3:#79838A;
  --rule:#2A3033;
  --rule-soft:#212629;
  --amber:#E0A458;
  --amber-soft:#241C11;
  --amber-line:#5E4620;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 34px -24px rgba(0,0,0,.9);
}

*{box-sizing:border-box}
/* Safety net: media never breaks out of its container, whatever else applies. */
img,video{max-width:100%;height:auto}
body{
  background:var(--paper);color:var(--ink);
  font-family:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:19px;line-height:1.66;-webkit-font-smoothing:antialiased;
  margin:0;
}
.wrap{max-width:720px;margin:0 auto;padding:0 24px}

.top{padding:96px 0 0}
.kicker{
  font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber);margin-bottom:18px;
}
h1{
  font-family:"Fraunces",Georgia,serif;font-weight:600;
  font-size:clamp(32px,5.4vw,46px);line-height:1.1;margin:0 0 18px;
  letter-spacing:-.01em;text-wrap:balance;
}
.standfirst{font-size:21px;line-height:1.5;color:var(--ink-2);margin:0 0 22px}
.byline{
  font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--ink-3);
  display:flex;flex-wrap:wrap;gap:8px 22px;
  border-top:1px solid var(--rule);padding-top:18px;
}

article{padding-top:34px}
h2{
  font-family:"Fraunces",Georgia,serif;font-weight:600;
  font-size:27px;line-height:1.25;margin:52px 0 16px;text-wrap:balance;
}
p{margin:0 0 20px}
a{color:var(--amber)}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:4px}

/* The four reasons: numbers in the margin, set in mono like the rest of the furniture. */
ol.reasons{margin:0 0 20px;padding:0;list-style:none;counter-reset:reason}
ol.reasons li{
  counter-increment:reason;position:relative;padding-left:40px;margin-bottom:20px;
}
ol.reasons li::before{
  content:counter(reason) ".";position:absolute;left:0;top:1px;
  font-family:"IBM Plex Mono",monospace;font-size:16px;font-weight:500;color:var(--amber);
}

figure{margin:34px 0;padding:0}
figure img,figure video{display:block;width:100%;border-radius:6px;box-shadow:var(--shadow)}
/* Both game shots are low-resolution by nature; smoothing them is a lie about the hardware. */
figure img{image-rendering:pixelated}
figure video{cursor:pointer}
figcaption{
  font-family:"IBM Plex Mono",monospace;font-size:12.5px;line-height:1.6;
  color:var(--ink-3);padding-top:10px;
}

.numbers{margin:34px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);overflow-x:auto}
table{width:100%;border-collapse:collapse;font-family:"IBM Plex Mono",monospace;font-size:13.5px;line-height:1.45}
th{
  text-align:left;font-weight:500;color:var(--ink-3);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;padding:14px 14px 9px 0;border-bottom:1px solid var(--rule-soft);
  white-space:nowrap;
}
td{padding:7px 14px 7px 0;vertical-align:baseline}
td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tbody tr:first-child td{padding-top:12px}
tbody tr:last-child td{padding-bottom:14px}
.hl td{color:var(--amber)}
caption{
  caption-side:bottom;text-align:left;font-family:"IBM Plex Mono",monospace;
  font-size:12.5px;line-height:1.6;color:var(--ink-3);padding-top:12px;
}

.pull{
  margin:38px 0;padding:22px 24px;background:var(--amber-soft);
  border-left:3px solid var(--amber-line);border-radius:4px;
  font-size:20px;line-height:1.5;
}
.pull p{margin:0}

hr{border:0;border-top:1px solid var(--rule);margin:48px 0}

footer{
  border-top:1px solid var(--rule);margin-top:64px;padding:26px 0 72px;
  font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--ink-3);
}
footer a{color:var(--ink-3)}
footer p{margin:0;line-height:1.7}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media (max-width:600px){
  body{font-size:18px}
  .top{padding-top:64px}
}