@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root{
  --bg:#171512; --bg2:#1E1B17; --panel:#24211C; --panel2:#2C2822;
  --fg:#F1EDE6; --muted:#A79F93;
  --line:rgba(241,237,230,.11); --line2:rgba(241,237,230,.22);
  --accent:#3AA9D6; --accent-fg:#06212D; --accent2:#C8D24A;
  --warn:#E0603F; --ok:#6FB98A;
  --r:6px; --notch:20px; --maxw:1160px; --card-ar:3 / 2;
  --fh:'Bricolage Grotesque','Archivo','Familjen Grotesk','Segoe UI',system-ui,sans-serif;
  --fb:'IBM Plex Sans','Segoe UI',system-ui,-apple-system,Roboto,sans-serif;

  /* --- the høydekurver themselves ---------------------------------------
     Closed elliptical rings, one hairline every 34px, drawn in the shell's own
     paper colour at ~4% so text reads straight through them. Two offset sets =
     two summits on one map sheet; the lichen ring is the single traced curve. */
  --kurve1:repeating-radial-gradient(ellipse 130% 88% at 22% 34%,
            transparent 0 33px, rgba(241,237,230,.045) 33px 34px, transparent 34px 68px);
  --kurve2:repeating-radial-gradient(ellipse 96% 120% at 82% 76%,
            transparent 0 27px, rgba(241,237,230,.032) 27px 28px, transparent 28px 56px);
  --kurve-lichen:radial-gradient(ellipse 130% 88% at 22% 34%,
            transparent 0 166px, rgba(200,210,74,.16) 166px 167px, transparent 167px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);font:16px/1.68 var(--fb);
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
hr{border:0;border-top:1px solid var(--line);margin:28px 0}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* ---------- the notch: one structural signature (chiselled, not polished) ---------- */
.notch{
  clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% var(--notch),
                    100% 100%,var(--notch) 100%,0 calc(100% - var(--notch)));
}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--fh);line-height:1.08;margin:0 0 .5em;letter-spacing:-.4px}
h1{font-size:clamp(32px,4.6vw,54px);font-weight:700}
h2{font-size:clamp(24px,2.9vw,35px);font-weight:600;position:relative;padding-bottom:12px;margin-bottom:.62em}
h2::after{
  content:"";position:absolute;left:0;bottom:0;width:72px;height:1px;
  background:linear-gradient(90deg,var(--accent) 0 30px,transparent 30px 38px,var(--accent2) 38px 52px,var(--line2) 52px 100%);
}
h3{font-size:clamp(18px,2vw,22px);font-weight:600;letter-spacing:-.2px}
h4{font-size:15px;font-weight:600}
.lead{color:var(--muted);font-size:17.5px;line-height:1.62;max-width:72ch;margin:0 0 18px}
p{margin:0 0 15px;max-width:76ch}
ul,ol{margin:0 0 16px;padding-left:20px;max-width:76ch}
li{margin:0 0 7px}

/* ---------- header: quiet stone bar, one filled CTA ---------- */
header.site{
  position:sticky;top:0;z-index:40;
  background:rgba(23,21,18,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
header.site .bar{display:flex;align-items:center;gap:16px;height:66px}
.logo{display:flex;align-items:center;gap:11px;color:var(--fg);text-decoration:none;flex:0 0 auto}
.logo:hover{text-decoration:none}
.logo .mark{
  width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;
  font:600 14px/1 var(--fh);letter-spacing:.4px;color:var(--accent);
  /* contour rings under the initials: the emblem's own motif, in CSS */
  background:var(--kurve-lichen),var(--kurve1),
             linear-gradient(160deg,var(--panel2) 0%,var(--panel) 70%);
  border:1px solid var(--line2);
  --notch:11px;
  overflow:hidden;
}
/* with a real emblem the plate steps back - the emblem carries its own light */
.logo .mark.has-emblem{background:var(--panel);border-color:rgba(58,169,214,.40)}
.logo .mark img{width:100%;height:100%;object-fit:contain;display:block}
.logo b{font:600 20px/1.1 var(--fh);letter-spacing:-.5px;display:block}
.logo small{display:block;font:400 10.5px/1.35 var(--fb);color:var(--muted);letter-spacing:.5px}
nav.main{display:flex;gap:2px;margin-left:auto;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
nav.main::-webkit-scrollbar{display:none}
nav.main a{
  color:var(--muted);font:500 13.5px/1 var(--fb);padding:11px 11px;border-radius:var(--r);
  white-space:nowrap;flex:0 0 auto;
}

/* ⛔ Desktop: the nav must FIT, not scroll.
   `overflow-x:auto` + `scrollbar-width:none` makes this bar a silent scroller. On a
   phone that is the intended behaviour - you swipe it. On desktop nobody swipes a
   header, so the last item ("App") was simply cut off on all 14 pages at every width
   from 1280 to 1600: the nav measured 537px of content inside a 513px box and gave no
   sign that anything was missing. Tightening the item padding brings the row inside
   its box with room to spare; `overflow:visible` then guarantees that if the menu ever
   grows again, it overflows visibly instead of hiding an item. */
@media (min-width:901px){
  nav.main{overflow:visible}
  nav.main a{padding:11px 7px}
}
nav.main a:hover{color:var(--fg);background:var(--panel);text-decoration:none}
nav.main a.akt{color:var(--fg);box-shadow:inset 0 -2px 0 var(--accent2)}
header.site .btn{flex:0 0 auto}
/* the header CTA is an affiliate link, so it carries its own disclosure line */
.headcta{display:flex;align-items:center;gap:10px;margin-left:8px;min-width:0}
.headcta .adnote.mini{font-size:10.5px;line-height:1.4;max-width:22ch}
.headcta .adnote.mini b{font-size:9.5px;padding:1px 5px;margin-right:4px}

/* ---------- buttons: R34 - filled glacier = affiliate, ghost = internal ---------- */
.btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:18px 0}
.btn{
  display:inline-block;font:600 14px/1 var(--fb);padding:14px 22px;border-radius:var(--r);
  cursor:pointer;border:1px solid transparent;letter-spacing:.2px;
}
.btn-primary{
  background:linear-gradient(180deg,rgba(241,237,230,.22) 0%,rgba(58,169,214,0) 46%),var(--accent);
  color:var(--accent-fg);border-color:rgba(6,33,45,.55);
  box-shadow:0 10px 26px -14px rgba(58,169,214,.85);
}
.btn-primary:hover{filter:brightness(1.08);text-decoration:none}
.btn-secondary{background:transparent;color:var(--fg);border-color:var(--line2)}
.btn-secondary:hover{border-color:var(--accent2);color:var(--accent2);text-decoration:none}
.adnote{font-size:12px;color:var(--muted);letter-spacing:.1px;max-width:34ch;line-height:1.45}
.adnote b{
  color:var(--accent2);font-weight:600;text-transform:uppercase;font-size:10.5px;
  letter-spacing:1px;border:1px solid rgba(200,210,74,.45);border-radius:3px;
  padding:2px 6px;margin-right:5px;display:inline-block;
}

/* ---------- section rhythm: plain / band alternation, no divider carpet ---------- */
section{padding:46px 0}
section.tight{padding-top:0}
section.band{
  background:var(--kurve2),var(--kurve1),
             linear-gradient(180deg,var(--bg2) 0%,rgba(30,27,23,.72) 100%),var(--bg2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
/* Painted map sheet, layered ABOVE the CSS rings but BELOW the flat stone, so the band
   degrades to the drawn contours if the image ever fails to load.
   This was written as an opt-in `.band.art` while the artwork was still being generated.
   The generator never emits an `art` class, so as an opt-in it would have left the file
   referenced by nothing - unused artwork fails the asset-usage gate, and a motif that
   exists only in a stylesheet comment is not a motif. Now that the plate exists it is
   simply what a band looks like. */
section.band{
  background:url("../art/band-hoydekurver.webp"),
             var(--kurve2),var(--kurve1),var(--bg2);
  background-size:cover,auto,auto,auto;
  background-position:center,center,center,center;
  background-repeat:no-repeat,repeat,repeat,repeat;
}

/* ---------- hero: the plateau in blue hour ---------- */
section.hero{
  padding:66px 0 54px;
  background:
    /* glacier light coming off the ridge, top right */
    radial-gradient(58% 52% at 84% 4%,rgba(58,169,214,.17) 0%,transparent 62%),
    /* one lichen glint low on the near rock */
    radial-gradient(34% 40% at 10% 104%,rgba(200,210,74,.09) 0%,transparent 64%),
    /* traced summit curve + the map sheet itself */
    var(--kurve-lichen),var(--kurve1),var(--kurve2),
    /* dark plate so the H1 keeps its ground over the painted scene */
    linear-gradient(96deg,rgba(23,21,18,.94) 0%,rgba(23,21,18,.80) 42%,rgba(23,21,18,.44) 100%),
    url("../art/hero-plateau.webp"),
    /* stone falling away below the sky - the fallback while the plate is missing */
    linear-gradient(180deg,var(--bg2) 0%,var(--bg) 62%,var(--panel) 100%);
  background-size:auto,auto,auto,auto,auto,auto,cover,auto;
  background-position:center,center,center,center,center,center,center top,center;
  background-repeat:no-repeat,no-repeat,no-repeat,repeat,repeat,no-repeat,no-repeat,no-repeat;
  border-bottom:1px solid var(--line2);
}
.hero .kick{
  display:inline-block;font:600 11px/1 var(--fb);letter-spacing:2.2px;text-transform:uppercase;
  color:var(--accent2);padding:8px 0 9px;margin-bottom:18px;
  border-bottom:1px solid rgba(200,210,74,.45);
}
.hero h1{max-width:19ch}
.hero .lead{color:var(--fg);opacity:.86}
.hero .grid{display:grid;grid-template-columns:1.32fr 1fr;gap:38px;align-items:start}
.hero .panel{background:rgba(36,33,28,.86);backdrop-filter:blur(4px)}
.hero .panel h3{color:var(--accent)}
.hero .tablewrap{border:0;background:transparent}
.hero table{min-width:0;font-size:14px}

/* ---------- panels / equal-width card rows ---------- */
.panel{background:var(--panel);border:1px solid var(--line);padding:24px}
.panel h3{margin-bottom:12px}
.cards{display:grid;gap:16px}
.cards.c1{grid-template-columns:minmax(0,640px)}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.cards.c3{grid-template-columns:repeat(3,1fr)}

/* offer tiers: the triptych - one heading, one line, one exit per card */
.tier{
  background:linear-gradient(180deg,var(--panel2) 0%,var(--panel) 40%);
  border:1px solid var(--line);padding:24px;display:flex;flex-direction:column;
  box-shadow:inset 0 1px 0 rgba(241,237,230,.06);
}
.tier .tname{
  font:600 11px/1 var(--fb);letter-spacing:2px;text-transform:uppercase;
  color:var(--accent);margin-bottom:13px;align-self:flex-start;
  border-bottom:1px solid rgba(58,169,214,.42);padding-bottom:9px;
}
.tier .thead{font:600 29px/1.08 var(--fh);letter-spacing:-.6px;margin-bottom:10px}
.tier .tdetail{color:var(--muted);font-size:14.5px;margin-bottom:14px}
.tier .tterms{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px;margin-top:auto}
.tier.gap{box-shadow:inset 0 1px 0 rgba(224,96,63,.28)}
.tier.gap .tname{color:var(--warn);border-bottom-color:rgba(224,96,63,.42)}
.tier.gap .thead{color:var(--warn)}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);background:var(--panel);max-width:100%;
  /* ⛔ A scroller with no affordance is a lie: on 375px the payment tables showed
     TYPE / BEHANDLINGSTID / MINIMUM and hid MAKSIMUM and GEBYR past the right edge
     with no border, no shadow and no scrollbar - and the fee is the whole point of
     that page. This paints a soft fade on the right edge that disappears once the
     table is scrolled to its end (background-attachment:local on the two gradient
     layers does the detection with no script). */
  background-image:
    linear-gradient(to right,var(--panel),rgba(36,33,28,0)),
    linear-gradient(to left,var(--panel),rgba(36,33,28,0)),
    linear-gradient(to right,rgba(0,0,0,.30),rgba(0,0,0,0)),
    linear-gradient(to left,rgba(0,0,0,.30),rgba(0,0,0,0));
  background-position:left center,right center,left center,right center;
  background-repeat:no-repeat;
  background-size:26px 100%,26px 100%,14px 100%,14px 100%;
  background-attachment:local,local,scroll,scroll;
}
/* and give the scrollbar itself a visible track on touch widths */
@media (max-width:700px){
  .tablewrap{scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
  .tablewrap::-webkit-scrollbar{height:8px}
  .tablewrap::-webkit-scrollbar-thumb{background:var(--line2);border-radius:4px}
  .tablewrap::-webkit-scrollbar-track{background:transparent}
}
table{border-collapse:collapse;width:100%;font-size:14.5px}
th,td{padding:12px 15px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
thead th{
  background:var(--panel2);
  font:600 11.5px/1.35 var(--fb);letter-spacing:1.1px;text-transform:uppercase;
  color:var(--accent);white-space:nowrap;
}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:rgba(241,237,230,.022)}
td.k{color:var(--muted);width:34%}
.na{color:var(--muted);font-style:italic;opacity:.85}

/* ---------- attribution + callouts (truth furniture) ---------- */
.src{
  display:block;font:400 11.5px/1.55 var(--fb);color:var(--muted);
  border-left:2px solid var(--accent2);padding:2px 0 2px 10px;margin:6px 0 0;max-width:76ch;
}
.src a{color:var(--accent)}
.srcline{margin:12px 0 0;font-size:12.5px;color:var(--muted)}
.callout{
  border:1px solid var(--line2);background:var(--panel);
  padding:18px 20px;margin:18px 0;position:relative;
  box-shadow:inset 3px 0 0 var(--accent);
}
.callout.gap{box-shadow:inset 3px 0 0 var(--warn)}
.callout.gap h3{color:var(--warn)}
.callout h3{font-size:16px;margin-bottom:8px}
.callout p:last-child{margin-bottom:0}

/* ---------- pros / cons ---------- */
.pc{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pc .panel{padding:22px}
.pc h3{font-size:16px}
.pc .pros h3{color:var(--ok)}
.pc .cons h3{color:var(--warn)}
.pc ul{list-style:none;padding:0;margin:0}
.pc li{position:relative;padding-left:24px;margin-bottom:10px;font-size:14.5px}
.pc li::before{position:absolute;left:0;top:0;font-weight:700}
.pc .pros li::before{content:"+";color:var(--ok)}
.pc .cons li::before{content:"\2212";color:var(--warn)}

/* ---------- steps: numbers set on a contour disc ---------- */
ol.steps{list-style:none;padding:0;counter-reset:s;max-width:none}
ol.steps li{counter-increment:s;position:relative;padding:0 0 0 58px;margin-bottom:20px}
ol.steps li::before{
  content:counter(s);position:absolute;left:0;top:-2px;
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  font:600 18px/1 var(--fh);color:var(--accent);
  background:var(--kurve1),var(--panel);
  border:1px solid var(--line2);
}
ol.steps b{display:block;font:600 18px/1.2 var(--fh);letter-spacing:-.2px;margin-bottom:2px}
ol.steps span{color:var(--muted);font-size:14.5px}

/* ---------- game grid ----------
   The container follows the asset: every cover in this pool is stored at 390x254,
   i.e. 3/2. A 1/1 box would crop ~25% off each side and cut straight through the
   game titles - a regression this network has already paid for once. */
.games{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.game-link{display:block;color:inherit;text-decoration:none;min-width:0}
.game-link:hover{text-decoration:none}
.game{background:var(--panel);border:1px solid var(--line);overflow:hidden;height:100%}
.game-link:hover .game{border-color:rgba(58,169,214,.45)}
.game .shot{aspect-ratio:var(--card-ar);background:var(--panel2);overflow:hidden}
.game .shot img{width:100%;height:100%;object-fit:cover}
.game .meta{padding:10px 11px}
.game .gname{font:600 13.5px/1.28 var(--fb);display:block;margin-bottom:3px}
.game .gprov{font-size:11.5px;color:var(--muted);display:block}
.game .gnum{font-size:11.5px;color:var(--accent2);display:block;margin-top:5px;letter-spacing:.2px}

/* ---------- evidence frames ---------- */
.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.shots figure{margin:0;background:var(--panel);border:1px solid var(--line);min-width:0}
.shots figure > div{aspect-ratio:16 / 11;overflow:hidden;background:var(--panel2)}
.shots img{width:100%;height:100%;object-fit:cover;object-position:top left}
.shots figcaption{padding:11px 14px;font-size:12.5px;color:var(--muted);border-top:1px solid var(--line)}
/* an honest gap, not a broken image */
.shot.void{background:transparent;border:1px dashed var(--line2)}
.shot.void > div{
  display:grid;place-items:center;color:var(--muted);font-size:13px;font-style:italic;
  text-align:center;padding:20px;background:transparent;
}
/* one frame sitting inside the section whose claim it evidences */
.shot-inline{margin:16px 0 0;background:var(--panel);border:1px solid var(--line);max-width:100%}
.shot-inline > div{aspect-ratio:16 / 11;overflow:hidden;background:var(--panel2)}
.shot-inline img{width:100%;height:100%;object-fit:cover;object-position:top left}
.shot-inline figcaption{padding:11px 14px;font-size:12.5px;color:var(--muted);border-top:1px solid var(--line)}
.shot-inline.side{max-width:520px}
/* a banner-shaped capture keeps its own proportion instead of being cropped to 16/11 */
.shot-inline.band{background:var(--panel)}
.shot-inline.band > div{aspect-ratio:auto}
.shot-inline.band img{height:auto;object-fit:contain;object-position:center}

/* ---------- faq ---------- */
details.faq{border:1px solid var(--line);background:var(--panel);margin-bottom:10px}
details.faq > summary{
  cursor:pointer;padding:15px 18px;font:600 15px/1.45 var(--fb);list-style:none;
  display:flex;justify-content:space-between;gap:14px;align-items:baseline;
}
details.faq > summary::-webkit-details-marker{display:none}
details.faq > summary::after{content:"\203A";color:var(--accent);font-size:20px;line-height:1;transform:rotate(90deg)}
details.faq[open] > summary{color:var(--accent)}
details.faq[open] > summary::after{transform:rotate(-90deg)}
details.faq .a{padding:0 18px 16px;color:var(--muted);font-size:14.5px}
details.faq .a p:last-child{margin-bottom:0}

/* ---------- authors ---------- */
.byline{display:flex;align-items:center;gap:14px;margin:22px 0 0;font-size:13.5px;color:var(--muted)}
.byline b{color:var(--fg);display:block;font-size:14.5px}
.byline b a{color:var(--fg)}
.medal{
  width:48px;height:48px;flex:0 0 48px;display:grid;place-items:center;border-radius:50%;
  font:600 16px/1 var(--fh);letter-spacing:.5px;color:var(--accent);
  background:var(--kurve1),var(--panel);
  border:1px solid var(--line2);
  box-shadow:0 0 0 3px var(--bg),0 0 0 4px var(--line);
  overflow:hidden;
}
.medal img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.medal.big{width:88px;height:88px;flex-basis:88px;font-size:28px}
/* with a real portrait the contour plate goes - the photograph carries itself */
.medal.has-portrait{background:var(--panel);border-color:var(--line2)}
.authorhead{align-items:flex-start;gap:20px;margin-top:0}
.authorhead>span{min-width:0}
.authorhead h1{margin:0 0 4px}
.authorpage h2{margin-top:1.2em}
.authorpage > .byline{margin-bottom:8px}
.authorphoto{margin:0 0 26px;max-width:420px;background:var(--panel);border:1px solid var(--line)}
.authorphoto img{width:100%;height:auto;aspect-ratio:1 / 1;object-fit:cover}
.authorphoto figcaption{padding:9px 12px;font-size:12px;color:var(--muted);border-top:1px solid var(--line)}
.pills{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:14px 0 0;list-style:none;max-width:none}
.pills li{
  font-size:12.5px;color:var(--muted);margin:0;padding:6px 12px;
  border:1px solid var(--line);border-radius:99px;background:var(--panel);
}

/* ---------- toc / crumb bar / updated stamp ---------- */
.toc{margin:0 0 6px;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px;max-width:none}
.toc li{margin:0}
.toc a{
  font-size:12.5px;color:var(--muted);border:1px solid var(--line);border-radius:99px;
  padding:6px 12px;display:block;background:var(--panel);
}
.toc a:hover{color:var(--accent2);border-color:rgba(200,210,74,.45);text-decoration:none}
.crumbbar{font-size:12.5px;color:var(--muted);padding:14px 0 0}
.crumbbar a{color:var(--muted)}
.crumbbar a:hover{color:var(--accent)}
.updated{font-size:12.5px;color:var(--muted);margin-left:10px}

/* ---------- footer ---------- */
footer.site{
  border-top:1px solid var(--line);margin-top:12px;padding:46px 0 26px;
  background:var(--kurve2),var(--bg2);
}
footer.site .cols{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:26px}
footer.site .cols > div{min-width:0}
footer.site h4{font:600 11.5px/1 var(--fb);letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin:0 0 13px}
footer.site ul{list-style:none;padding:0;margin:0}
footer.site li{margin-bottom:8px;font-size:13.5px}
footer.site a{color:var(--fg)}
footer.site a:hover{color:var(--accent)}
footer.site .srcline{font-size:12.5px;max-width:34ch}
.agebadge{
  display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 8px;border-radius:50%;
  border:1px solid var(--warn);color:var(--warn);font:600 13px/1 var(--fb);letter-spacing:.4px;
  margin-bottom:12px;
}
.legal{border-top:1px solid var(--line);margin-top:32px;padding-top:18px;font-size:12.5px;color:var(--muted)}
.legal p{max-width:none}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  footer.site .cols{grid-template-columns:1fr 1fr 1fr}
  .hero .grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  section{padding:34px 0}
  section.tight{padding-top:0}
  section.hero{padding:44px 0 38px}
  .cards.c3,.cards.c2,.cards.c1{grid-template-columns:1fr}
  .pc{grid-template-columns:1fr}
  .shots{grid-template-columns:1fr}
  .games{grid-template-columns:repeat(3,1fr)}
  footer.site .cols{grid-template-columns:1fr 1fr}
  /* REGRESSION 1 - the header gutter.
     A mobile rule that sets `padding:10px 0` on .bar overrides .wrap's own
     `0 20px`, and the whole header goes edge to edge on a phone: nav items and
     the disclosure start at x=0 while the rest of the page keeps its 20px gutter.
     Change the vertical padding, restate the horizontal one. */
  header.site .bar{height:auto;flex-wrap:wrap;padding:10px 20px;gap:8px}
  nav.main{order:3;width:100%;margin-left:0}
  header.site .btn{padding:11px 14px;font-size:13px}
  .headcta{margin-left:auto}
}
@media (max-width:420px){
  .games{grid-template-columns:1fr 1fr;gap:10px}
  .logo small{display:none}
  .btn{padding:13px 16px}
  .medal.big{width:68px;height:68px;flex-basis:68px;font-size:22px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------- narrow-viewport containment ----------
   Grid and flex children keep `min-width:auto` by default, so one long CTA label or
   one fact table sets the column's min-content width and the whole row outgrows
   .wrap. Letting these shrink below content width is what lets the inner
   overflow-x:auto boxes actually do their job at 375px. */
.hero .grid > *,
.pc > *,
.cards > *,
.shots > *,
.byline > span,
.panel,
main,
section > .wrap{min-width:0}
nav.main{min-width:0}
.btn{max-width:100%}
.adnote{max-width:100%}
/* REGRESSION 5 - long unbreakable tokens.
   The sources block prints a full URL as its own link text, and that single token is
   wider than a 375px viewport, so it has to be allowed to break mid-string.
   Scope matters: the same declaration on td/th snaps ordinary words in half
   ("Masterc/ard"). Cells wrap on word boundaries; the table scrolls instead. */
main li a,main p a,.src,.srcline,.toc a,figcaption,.adnote{overflow-wrap:anywhere}
td,th{overflow-wrap:normal;word-break:normal}
/* REGRESSION 4 - a real multi-column table keeps readable columns and scrolls
   inside its own box. A two-column fact table carries no `wide` and must wrap
   instead, so it stays readable in a narrow sidebar panel. */
.tablewrap.wide table{min-width:min(100%,560px)}

/* ---------- REGRESSION 3 - label/value tables stack on a phone ----------
   Two-column fact tables (td.k = label, the next cell = value) are technically
   contained by .tablewrap's scroller, but the value column then starts off-screen
   and the reader sees a list of labels and no answers. Wide data tables have no
   td.k and keep scrolling, which is right for them. */
@media (max-width:600px){
  table tr:has(> td.k){display:block;border-bottom:1px solid var(--line);padding:9px 0}
  table tr:has(> td.k):last-child{border-bottom:0}
  td.k{display:block;width:auto;border:0;padding:0 0 2px;font-size:12px;letter-spacing:.3px}
  td.k + td{display:block;border:0;padding:0}
  tr:has(> td.k) + tr td{border-top:0}
  .tablewrap:has(td.k) table{min-width:0}
  /* engines without :has() still get an auto layout rather than a crushed value column */
  table{table-layout:auto}

  /* REGRESSION 2 - the header disclosure ran into the viewport edge.
     .headcta is a <span> and .adnote.mini is inline, so flex-wrap / max-width /
     text-align have nothing to act on until both are given a box. */
  .headcta{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;
           width:100%;min-width:0;gap:6px;margin-left:0}
  .headcta .adnote.mini{display:block;width:100%;max-width:100%;text-align:right;padding:0 2px 0 0}

  /* the page name and the "last checked" stamp were glued together with no space */
  .crumbbar{display:block}
  .updated{display:block;margin:4px 0 0}
}