/* bettinghub.africa — built 2026-11-01 02:36 from app/styles */

/* ===== 00-tokens.css ===== */
/* ==========================================================================
   bettinghub.africa — design tokens
   A match-night site. The surface is the dark of a stadium after the
   floodlights come on: near-black graphite, lit from the edges by the country's
   flag colours. Type is warm white, the one action colour is sun yellow,
   and every panel is glass over that dark rather than a card on a page.
   One typeface, Mona Sans, carries everything through width and weight.
   ========================================================================== */

@font-face {
  font-family: "Mona Sans";
  font-style: normal;
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url(../fonts/MonaSans.woff2) format("woff2");
}

:root {
  /* the night */
  --bg: #0e0e10;
  --bg-2: #131316;
  --bg-3: #19191d;
  --bg-4: #212126;
  --card: rgba(255, 255, 255, 0.035);
  --card-2: rgba(255, 255, 255, 0.06);
  --card-3: rgba(255, 255, 255, 0.09);
  --card-solid: #161619;

  /* light on the night */
  --ink: #f1f1ee;
  --ink-2: #d1d1cc;
  --ink-3: #acaca6;
  --mute: #85857f;
  --mute-2: #5e5e59;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --line-3: rgba(255, 255, 255, 0.24);
  --edge: rgba(255, 255, 255, 0.18);

  /* graphite: emphasis surfaces */
  --pitch: #26262c;
  --pitch-2: #36363e;
  --pitch-3: #a3a3ad;
  --pitch-deep: #09090b;
  --pitch-wash: rgba(255, 255, 255, 0.05);
  --pitch-wash-2: rgba(255, 255, 255, 0.1);
  --on-pitch: #f1f1ee;
  --on-pitch-2: #c9c9c4;
  --on-pitch-3: #93938e;

  /* the sun: one action colour */
  --sun: #ffc72c;
  --sun-2: #ffd45c;
  --sun-deep: #e6ac00;
  --sun-ink: #2b1f00;
  --sun-wash: rgba(255, 199, 44, 0.14);
  --sun-glow: rgba(255, 199, 44, 0.35);

  /* live and status */
  --live: #ff6b4a;
  --link: #ecd48a;
  --link-2: #f7e6b0;
  --ok: #45d98f;
  --ok-ink: #9df0c8;
  --ok-wash: rgba(69, 217, 143, 0.14);
  --warn: #f2b544;
  --warn-ink: #ffd27a;
  --warn-wash: rgba(242, 181, 68, 0.14);
  --bad: #ff6b6b;
  --bad-wash: rgba(255, 107, 107, 0.14);

  /* country flag, overridden on <body> per country */
  --f1: #2a2a30;
  --f2: #ffc72c;
  --f3: #f1f1ee;
  --f4: #2a2a30;
  --fa: #74747e;
  --fb: #ffc72c;
  --flag: linear-gradient(180deg, var(--f1) 0 33.4%, var(--f2) 33.4% 66.7%, var(--f3) 66.7%);
  --flag-x: linear-gradient(90deg, var(--f1) 0 33.4%, var(--f2) 33.4% 66.7%, var(--f3) 66.7%);

  /* type */
  --font: "Mona Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --w-display: 118%;
  --w-wide: 125%;
  --w-head: 108%;
  --w-text: 100%;
  --w-data: 92%;
  --w-narrow: 84%;

  --t-2xs: 0.72rem;
  --t-xs: 0.8rem;
  --t-sm: 0.88rem;
  --t-md: 0.97rem;
  --t-lg: 1.08rem;
  --t-xl: 1.3rem;
  --t-2xl: 1.6rem;
  --t-3xl: 2.1rem;
  --t-4xl: clamp(1.9rem, 1.2rem + 2.2vw, 3rem);
  --t-code: clamp(4rem, 9vw, 9.5rem);

  --lh-tight: 1.06;
  --lh-head: 1.16;
  --lh-text: 1.6;

  /* shape and space */
  --r-sm: 4px;
  --r: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;
  --max: 1240px;
  --rail: 324px;
  --gutter: clamp(16px, 3.2vw, 36px);
  --spine: 8px;
  --mast-h: 76px;

  /* elevation is light, not grey shadow */
  --glass: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
  --glass-2: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04));
  --rim: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --rim-2: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.1);
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --sh-2: 0 18px 44px -24px rgba(0, 0, 0, 0.75);
  --sh-3: 0 34px 80px -34px rgba(0, 0, 0, 0.85);
  --sh-pop: 0 30px 70px -24px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.1);
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 180ms;
  --dur-slow: 420ms;

  color-scheme: dark;
}

/* ===== 10-base.css ===== */
/* ==========================================================================
   Base: reset, document, typography, links, focus, utilities
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--mast-h) + 16px);
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100dvh;
  background:
    radial-gradient(60% 40% at 50% 0%, color-mix(in srgb, var(--fa) 7%, transparent), transparent 70%),
    var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-md);
  line-height: var(--lh-text);
  font-stretch: var(--w-text);
  font-variation-settings: "wdth" 100;
  font-feature-settings: "ss01", "cv11";
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2rem 0;
}

/* ---------- headings ---------- */

h1,
h2,
h3,
h4 {
  margin: 0 0 0.5em;
  color: var(--ink);
  font-weight: 760;
  font-stretch: var(--w-head);
  font-variation-settings: "wdth" 108;
  letter-spacing: -0.018em;
  line-height: var(--lh-head);
  text-wrap: balance;
}

h1 {
  font-size: var(--t-4xl);
  font-weight: 820;
  font-stretch: var(--w-display);
  font-variation-settings: "wdth" 118;
  letter-spacing: -0.03em;
  line-height: var(--lh-tight);
}

h2 {
  font-size: var(--t-2xl);
  margin-top: 2.4em;
}

h3 {
  font-size: var(--t-lg);
  font-weight: 700;
  margin-top: 1.7em;
}

h4 {
  font-size: var(--t-md);
  font-weight: 700;
  margin-top: 1.4em;
}

p,
ul,
ol,
dl,
table,
figure,
blockquote {
  margin: 0 0 1em;
}

ul,
ol {
  padding-left: 1.25em;
}

li {
  margin: 0.25em 0;
}

strong,
b {
  font-weight: 650;
}

em,
i {
  font-style: italic;
}

small {
  font-size: var(--t-sm);
}

sup,
sub {
  line-height: 0;
}

abbr[title] {
  text-decoration: underline dotted;
  text-underline-offset: 0.15em;
}

code,
kbd {
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, monospace;
  font-size: 0.92em;
  background: var(--bg-2);
  padding: 0.08em 0.35em;
  border-radius: var(--r-sm);
}

time {
  font-variant-numeric: tabular-nums;
}

/* ---------- links ---------- */

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}

a:hover {
  color: var(--link-2);
  text-decoration-color: currentColor;
}

a:active {
  color: #fff;
}

:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--sun-ink);
  border-radius: var(--r-sm);
}

::selection {
  background: var(--sun);
  color: var(--sun-ink);
}

/* ---------- utilities ---------- */

.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: fixed;
  top: 10px;
  left: -200vw;
  z-index: 200;
  padding: 0.6rem 1rem;
  background: var(--pitch);
  color: var(--on-pitch);
  font-weight: 650;
  border-radius: var(--r);
  text-decoration: none;
  box-shadow: var(--sh-3);
}

.skip:focus {
  left: 10px;
}

.mute {
  color: var(--mute);
}

.num,
.data {
  font-stretch: var(--w-data);
  font-variation-settings: "wdth" 92;
  font-variant-numeric: tabular-nums lining-nums;
}

/* the country flag chip, used wherever a country is named */
.flag {
  display: inline-block;
  flex: none;
  width: 1.15em;
  height: 0.8em;
  border-radius: 2px;
  background: var(--flag);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  vertical-align: -0.08em;
}

.flag--x {
  background: var(--flag-x);
}

.flag--lg {
  width: 2.2rem;
  height: 1.5rem;
  border-radius: 3px;
}

/* ===== 20-chrome.css ===== */
/* ==========================================================================
   Chrome: the flag spine, the masthead, the country picker, the footer
   ========================================================================== */

/* ---------- flag spine (country sites, wide screens) ---------- */

.spine {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--spine);
  z-index: 60;
  background: var(--flag);
  transform-origin: top;
  pointer-events: none;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.5);
}

.spine::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg);
  opacity: 0.72;
  transform-origin: bottom;
  transform: scaleY(calc(1 - var(--read, 0)));
  transition: transform 120ms linear;
}

/* ---------- masthead ---------- */

.mast {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 21, 17, 0.72);
  -webkit-backdrop-filter: saturate(1.3) blur(14px);
  backdrop-filter: saturate(1.3) blur(14px);
  border-bottom: 1px solid var(--line);
}

.is-country .mast::before {
  content: "";
  display: none;
  height: 4px;
  background: var(--flag-x);
}

.mast__in {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  min-height: var(--mast-h);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* wordmark: the brand logo, light on the night */
.mark {
  display: inline-flex;
  align-items: center;
  color: #fff;
  text-decoration: none;
  line-height: 0;
  white-space: nowrap;
}

.mark img {
  display: block;
  height: 46px;
  width: auto;
  margin: 0 0.9rem 0 0;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
  transition: filter 0.2s ease;
}

.mark:hover img {
  filter: drop-shadow(0 0 14px rgba(255, 199, 44, 0.35));
}

.mark b {
  font-weight: 850;
  color: var(--sun);
}

.mark__tld {
  font-weight: 560;
  font-stretch: var(--w-data);
  font-variation-settings: "wdth" 92;
  font-size: 0.68em;
  letter-spacing: 0;
  color: var(--mute);
  margin-left: 0.1em;
}

.mark:hover {
  color: #fff;
}

.mark:hover b {
  color: var(--sun-2);
}

/* current country, beside the wordmark */
.mast__here {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 0.35rem;
  padding: 0.32rem 0.75rem 0.32rem 0.45rem;
  border-radius: var(--r-pill);
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 640;
  text-decoration: none;
  background: var(--card-2);
  box-shadow: var(--rim);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.mast__here:hover {
  background: var(--card-3);
  box-shadow: var(--rim-2);
  color: #fff;
}

.mast__here .flag {
  width: 1.3rem;
  height: 0.9rem;
}

.mast__here small {
  font-size: var(--t-2xs);
  font-weight: 700;
  color: var(--mute);
  font-stretch: var(--w-data);
  font-variation-settings: "wdth" 92;
  letter-spacing: 0.06em;
}

/* primary navigation */
.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.1rem;
}

.nav__list li {
  margin: 0;
}

.nav__home {
  display: none;
}

.nav__list a {
  position: relative;
  display: inline-block;
  padding: 0.55rem 0.8rem;
  border-radius: var(--r);
  color: var(--ink-2);
  font-size: var(--t-sm);
  font-weight: 620;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.nav__list a:hover {
  color: #fff;
  background: var(--card-2);
}

.nav__list a[aria-current] {
  color: #fff;
}

.nav__list a[aria-current]::after {
  content: "";
  position: absolute;
  left: 0.8rem;
  right: 0.8rem;
  bottom: 0.3rem;
  height: 2px;
  border-radius: 2px;
  background: var(--sun);
  box-shadow: 0 0 10px var(--sun-glow);
}

/* country picker */
.pick {
  position: relative;
  margin-left: 0.35rem;
}

.pick summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.85rem 0.5rem 0.95rem;
  border-radius: var(--r-pill);
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 640;
  cursor: pointer;
  background: var(--card-2);
  box-shadow: var(--rim);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  user-select: none;
}

.pick summary::-webkit-details-marker {
  display: none;
}

.pick summary::after {
  content: "";
  width: 0.42em;
  height: 0.42em;
  margin-top: -0.2em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}

.pick summary:hover,
.pick[open] summary {
  background: var(--card-3);
  box-shadow: var(--rim-2);
  color: #fff;
}

.pick[open] summary::after {
  transform: rotate(225deg) translate(-1px, -1px);
  margin-top: 0.15em;
}

.pick__grid {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 70;
  margin: 0;
  padding: 0.5rem;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(176px, 1fr));
  gap: 2px;
  background: var(--bg-3);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-pop);
  animation: pick-in var(--dur-slow) var(--ease-out) both;
}

.pick__grid li {
  margin: 0;
}

.pick__grid a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.65rem;
  border-radius: var(--r);
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 580;
  text-decoration: none;
  transition: background var(--dur) var(--ease);
}

.pick__grid a:hover {
  background: var(--card-3);
  color: #fff;
}

.pick__grid a[aria-current] {
  background: var(--sun-wash);
  color: #fff;
  font-weight: 700;
}

.pick__grid .flag {
  width: 1.35rem;
  height: 0.95rem;
}

.pick__grid small {
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--mute);
  font-stretch: var(--w-data);
  font-variation-settings: "wdth" 92;
}

.pick__all {
  grid-column: 1 / -1;
  border-top: 1px solid var(--line);
  margin-top: 0.25rem;
  padding-top: 0.25rem;
}

.pick__all a {
  grid-template-columns: 1fr;
  justify-items: start;
  color: var(--link);
}

@keyframes pick-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* mobile toggle */
.mast__toggle {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--r);
  background: var(--card-2);
  box-shadow: var(--rim);
  position: relative;
}

.mast__lines,
.mast__lines::before,
.mast__lines::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 20px;
  height: 2px;
  margin-left: -10px;
  border-radius: 2px;
  background: #fff;
  transition: transform var(--dur-slow) var(--ease), opacity var(--dur) var(--ease);
}

.mast__lines {
  top: 21px;
}

.mast__lines::before {
  top: -6px;
  margin-left: -10px;
  left: 10px;
}

.mast__lines::after {
  top: 6px;
  margin-left: -10px;
  left: 10px;
}

body.nav-open .mast__lines {
  background: transparent;
}

body.nav-open .mast__lines::before {
  transform: translateY(6px) rotate(45deg);
}

body.nav-open .mast__lines::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* ---------- footer ---------- */

.foot {
  margin-top: 4rem;
  background: var(--pitch-deep);
  color: var(--on-pitch-2);
  position: relative;
  overflow: hidden;
}

.foot::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--flag-x);
}

.is-root .foot::before {
  background: var(--sun);
}

.foot::after {
  content: "";
  position: absolute;
  right: -10%;
  bottom: -40%;
  width: 60%;
  height: 120%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--f1) 22%, transparent), transparent 70%);
  pointer-events: none;
}

.foot__in {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  padding: 3rem var(--gutter) 2.2rem;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
  gap: 2rem 3rem;
}

.foot .mark img {
  height: 40px;
  margin: 0 0 0.6rem;
}

.foot__tag {
  margin: 0.9rem 0 0;
  max-width: 34ch;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--on-pitch-2);
}

.foot__age {
  margin: 1.4rem 0 0;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--t-sm);
  color: var(--on-pitch-2);
}

.age {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid var(--sun);
  color: #fff;
  font-size: var(--t-xs);
  font-weight: 800;
  font-stretch: var(--w-data);
  font-variation-settings: "wdth" 92;
  letter-spacing: -0.02em;
  box-shadow: 0 0 14px var(--sun-glow);
}

.foot__cols {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 1.5rem 2.5rem;
}

.foot__h {
  margin: 0 0 0.7rem;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--on-pitch-3);
}

.foot__countries ul,
.foot__links,
.foot__root {
  list-style: none;
  margin: 0;
  padding: 0;
}

.foot__countries ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.15rem 1rem;
}

.foot__countries li,
.foot__links li,
.foot__root li {
  margin: 0;
}

.foot__countries a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.3rem 0;
  color: var(--on-pitch);
  font-size: var(--t-sm);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.foot__countries a:hover {
  color: var(--sun);
}

.foot__countries a[aria-current] {
  color: var(--sun);
  font-weight: 700;
}

.foot__links a,
.foot__root a {
  display: inline-block;
  padding: 0.3rem 0;
  color: var(--on-pitch);
  font-size: var(--t-sm);
  text-decoration: none;
}

.foot__links a:hover,
.foot__root a:hover {
  color: var(--sun);
}

.foot__root {
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.foot__copy {
  grid-column: 1 / -1;
  margin: 1.2rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  font-size: var(--t-xs);
  color: var(--on-pitch-3);
}

.foot__copy a {
  color: var(--on-pitch-2);
  text-decoration: none;
}

.foot__copy a:hover {
  color: var(--sun);
}

/* ===== 30-board.css ===== */
/* ==========================================================================
   The board: page opener. Floodlights in the country's colours on a night
   pitch, the centre circle drawn faintly at the edge, the country code set
   wide in light, then the headline, the lead and a ledger of the facts that
   change the price of a bet there.
   ========================================================================== */

.board {
  position: relative;
  color: var(--on-pitch);
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.07), transparent 38%),
    radial-gradient(70% 95% at 94% 0%, color-mix(in srgb, var(--fa) 30%, transparent), transparent 64%),
    radial-gradient(55% 75% at 0% 100%, color-mix(in srgb, var(--fb) 22%, transparent), transparent 62%),
    radial-gradient(45% 60% at 60% 115%, color-mix(in srgb, var(--fa) 12%, transparent), transparent 70%),
    radial-gradient(30% 40% at 30% 0%, color-mix(in srgb, var(--sun) 10%, transparent), transparent 70%),
    linear-gradient(180deg, #1c1c21 0%, #131316 55%, var(--bg) 100%);
}

/* grain and the pitch markings */
.board::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--noise);
  opacity: 0.9;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.board::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -14vmin;
  top: 50%;
  width: 70vmin;
  height: 70vmin;
  margin-top: -35vmin;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.11);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 0 0 10vmin rgba(255, 255, 255, 0.02), 0 0 120px rgba(255, 255, 255, 0.04);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0 3px, transparent 4px);
  pointer-events: none;
}

.board__in {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(1.5rem, 3.2vw, 2.8rem) var(--gutter) clamp(1.4rem, 2.8vw, 2.4rem);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "code body"
    "code ledger";
  column-gap: clamp(1.6rem, 4.5vw, 4rem);
  row-gap: clamp(1rem, 2vw, 1.6rem);
  align-items: start;
}

/* the country code and its flag stamp */
.board__code {
  grid-area: code;
  display: flex;
  align-items: stretch;
  gap: 0.09em;
  font-size: var(--t-code);
  line-height: 0.82;
  font-weight: 880;
  font-stretch: var(--w-wide);
  font-variation-settings: "wdth" 125;
  letter-spacing: -0.07em;
  color: #fff;
  padding-top: 0.06em;
  user-select: none;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55));
}

.board__code .stamp {
  flex: none;
  width: 0.16em;
  border-radius: 0.03em;
  background: var(--flag);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 0 40px color-mix(in srgb, var(--fa) 55%, transparent);
  transform-origin: top;
}

.board__code > span {
  display: block;
  margin-left: 0.02em;
}

.board__code .flap {
  gap: 0.03em;
}

.board__code .flap__c {
  min-width: 0.78em;
  height: 1em;
  padding: 0 0.02em;
  border-radius: 0.06em;
  --flap-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
  --flap-line: rgba(255, 255, 255, 0.18);
  --flap-split: rgba(0, 0, 0, 0.45);
}

.board__code .flap__c > span {
  transform: translateY(0.03em);
  background: linear-gradient(180deg, #fff 30%, rgba(255, 255, 255, 0.62));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.board__body {
  grid-area: body;
  min-width: 0;
  max-width: 72ch;
}

.board h1 {
  color: #fff;
  margin: 0.15em 0 0.5em;
  font-size: var(--t-4xl);
  font-weight: 860;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}

.board .lead {
  margin: 0 0 1.1rem;
  max-width: 64ch;
  font-size: clamp(0.98rem, 0.92rem + 0.3vw, 1.1rem);
  line-height: 1.5;
  color: var(--on-pitch-2);
  text-wrap: pretty;
}

.board .lead a {
  color: #fff;
  text-decoration-color: var(--on-pitch-3);
}

.board .lead a:hover {
  text-decoration-color: var(--sun);
}

/* crumbs */
.crumbs {
  font-size: var(--t-xs);
  margin-bottom: 0.6rem;
}

.crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.5rem;
  color: var(--on-pitch-3);
}

.crumbs li {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.crumbs li + li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--on-pitch-3);
}

.crumbs a {
  color: var(--on-pitch-2);
  text-decoration: none;
  font-weight: 580;
}

.crumbs a:hover {
  color: #fff;
}

.crumbs [aria-current] {
  color: #fff;
  font-weight: 600;
}

/* date line */
.when {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: var(--t-xs);
  color: var(--on-pitch-3);
}

.when::before {
  content: "";
  width: 1.4rem;
  height: 1px;
  background: var(--sun);
  box-shadow: 0 0 8px var(--sun-glow);
}

.when time {
  color: #fff;
  font-weight: 640;
}

/* facts ledger: a glass strip */
.ledger {
  grid-area: ledger;
  margin: 0;
  padding: 0.3rem 1.2rem 0.4rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0 2.2rem;
  max-width: 76ch;
  border-radius: var(--r-lg);
  background: var(--glass);
  box-shadow: var(--rim);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.ledger > div {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.6rem 0 0.55rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: var(--t-sm);
  line-height: 1.35;
}

.ledger > div:last-child,
.ledger > div:nth-last-child(2):nth-child(odd) {
  border-bottom: 0;
}

.ledger dt {
  color: var(--on-pitch-3);
  font-weight: 540;
  white-space: nowrap;
}

.ledger dd {
  margin: 0;
  color: #fff;
  font-weight: 640;
  text-align: right;
  font-stretch: var(--w-data);
  font-variation-settings: "wdth" 94;
  text-wrap: balance;
}

/* ---------- variants ---------- */

/* inner pages: the code moves to the right, smaller */
.board--page .board__in {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "body code";
  padding-bottom: clamp(1.2rem, 2.4vw, 2rem);
}

.board--page h1 {
  font-size: clamp(1.7rem, 1.1rem + 1.7vw, 2.5rem);
}

.board--page .board__code {
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  align-self: start;
  justify-self: end;
}

.board--page .board__body {
  max-width: 76ch;
}

/* bookmaker pages on the root: the brand's mark takes the code's place */
.board__plate {
  grid-area: code;
  align-self: start;
  justify-self: end;
  padding-top: 0.4rem;
}

.board__plate .plate {
  width: 208px;
  height: 100px;
  padding: 14px 18px;
  border-radius: var(--r-lg);
  box-shadow: var(--rim-2), 0 30px 60px -24px rgba(0, 0, 0, 0.8);
}

.board__plate .plate--dark {
  background: var(--pitch-deep);
}

/* root: no code; a row of country gates instead */
.board--root .board__in {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "body"
    "gates";
}

.gates {
  grid-area: gates;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 0.6rem;
}

.gates li {
  margin: 0;
}

.gates a {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem;
  padding: 0.8rem 0.85rem 0.7rem;
  border-radius: var(--r);
  background: var(--glass);
  box-shadow: var(--rim);
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.gates a::before {
  content: "";
  position: absolute;
  inset: auto -30% -60% -30%;
  height: 100%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--fa) 55%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
  pointer-events: none;
}

.gates a:hover {
  background: var(--glass-2);
  box-shadow: var(--rim-2);
  transform: translateY(-3px);
  color: #fff;
}

.gates a:hover::before {
  opacity: 1;
}

.gates .flag {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.gates b {
  position: relative;
  font-size: 1.55rem;
  font-weight: 880;
  font-stretch: var(--w-wide);
  font-variation-settings: "wdth" 125;
  letter-spacing: -0.05em;
  line-height: 1;
}

.gates span {
  position: relative;
  font-size: var(--t-xs);
  color: var(--on-pitch-2);
  font-weight: 540;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* corporate / post pages: quieter board */
.board--quiet .board__in {
  padding-top: clamp(1.6rem, 3vw, 2.4rem);
  padding-bottom: clamp(1.6rem, 3vw, 2.4rem);
}

.board--quiet h1 {
  font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem);
}

.board--quiet::after {
  display: none;
}

/* ===== 40-layout.css ===== */
/* ==========================================================================
   Layout: the shell below the board, the reading column, the rail
   ========================================================================== */

.shell {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(1.6rem, 3vw, 2.8rem) var(--gutter) 3rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail);
  gap: clamp(1.6rem, 3.5vw, 3.5rem);
  align-items: start;
}

.shell--narrow {
  grid-template-columns: minmax(0, 780px);
  justify-content: center;
}

.col {
  min-width: 0;
}

/* ---------- rail ---------- */

.rail {
  position: sticky;
  top: calc(var(--mast-h) + 16px);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: calc(100dvh - var(--mast-h) - 32px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding-right: 2px;
}

.rail::-webkit-scrollbar {
  display: none;
}

.railbox {
  background: var(--glass);
  border-radius: var(--r-lg);
  padding: 1rem 1.1rem 1.1rem;
  box-shadow: var(--rim), inset 0 2px 0 color-mix(in srgb, var(--fa) 70%, transparent);
}

.railbox__h {
  margin: 0 0 0.6rem;
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.raillinks {
  list-style: none;
  margin: 0;
  padding: 0;
}

.raillinks li {
  margin: 0;
  border-top: 1px solid var(--line);
}

.raillinks a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.5rem 0;
  font-size: var(--t-sm);
  font-weight: 560;
  color: var(--ink-2);
  text-decoration: none;
}

.raillinks a::after {
  content: "";
  flex: none;
  width: 0.4em;
  height: 0.4em;
  border-top: 1.5px solid var(--mute-2);
  border-right: 1.5px solid var(--mute-2);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.raillinks a:hover {
  color: var(--pitch);
}

.raillinks a:hover::after {
  border-color: var(--pitch);
  transform: translateX(2px) rotate(45deg);
}

/* ---------- contents ---------- */

.toc {
  background: var(--glass);
  border-radius: var(--r-lg);
  padding: 1rem 1.1rem 0.8rem;
  box-shadow: var(--rim);
}

.toc p {
  margin: 0 0 0.5rem;
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--ink);
}

.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.toc li {
  margin: 0;
  border-top: 1px solid var(--line);
}

.toc a {
  position: relative;
  display: block;
  padding: 0.45rem 0 0.45rem 0.9rem;
  font-size: var(--t-sm);
  line-height: 1.35;
  color: var(--ink-3);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.toc a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75rem;
  width: 3px;
  height: calc(100% - 1.5rem);
  min-height: 0.8em;
  border-radius: 2px;
  background: transparent;
  transition: background var(--dur) var(--ease);
}

.toc a:hover {
  color: var(--ink);
}

.toc a[aria-current] {
  color: #fff;
  font-weight: 680;
}

.toc a[aria-current]::before {
  background: var(--fa);
  box-shadow: 0 0 10px color-mix(in srgb, var(--fa) 60%, transparent);
}

.toc--inline {
  display: none;
}

/* ---------- section rhythm inside the column ---------- */

.col > .prose > :first-child {
  margin-top: 0;
}

/* ===== 50-slips.css ===== */
/* ==========================================================================
   Slips: the ranked list. One continuous strip of glass tickets torn apart
   by perforations. Each ticket carries its bookmaker's own colour as a lit
   edge and a glow under the logo, a watermark rank the size of the ticket,
   the offer in large figures, and a stub on the right with the one action.
   ========================================================================== */

.slips {
  position: relative;
  list-style: none;
  margin: 1.6rem 0 0.6rem;
  padding: 2.4rem 0 0.4rem;
  display: grid;
  gap: 0;
  isolation: isolate;
}

/* the strip behind the tickets, with torn ends */
.slips::before {
  content: "";
  position: absolute;
  inset: -8px 0;
  z-index: -1;
  border-radius: 6px;
  background:
    radial-gradient(circle at 8px 0, transparent 7px, var(--card-solid) 7.5px) 0 0 / 16px 8px repeat-x,
    radial-gradient(circle at 8px 8px, transparent 7px, var(--card-solid) 7.5px) 0 100% / 16px 8px repeat-x,
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)) 0 8px / 100% calc(100% - 16px) no-repeat,
    linear-gradient(var(--card-solid), var(--card-solid)) 0 8px / 100% calc(100% - 16px) no-repeat;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.5));
}

/* the printed header line */
.slips::after {
  content: attr(data-head);
  position: absolute;
  top: 0.75rem;
  left: 1.2rem;
  right: 1.2rem;
  display: block;
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  font-stretch: var(--w-data);
  font-variation-settings: "wdth" 90;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slip {
  --stub: 200px;
  --rank-w: 3.4rem;
  --b1: var(--pitch-3);
  --b2: #ffffff;
  --bglow: color-mix(in srgb, var(--b1) 68%, #ffffff);
  position: relative;
  margin: 0 0.6rem;
  display: grid;
  grid-template-columns: var(--rank-w) minmax(0, 1fr) var(--stub);
  grid-template-areas:
    "rank id stub"
    "rank facts stub"
    "rank note stub";
  overflow: hidden;
  transition: background var(--dur-slow) var(--ease);
}

.slip:hover {
  background: rgba(255, 255, 255, 0.025);
}

/* watermark rank */
.slip__id::before {
  content: attr(data-rank);
  position: absolute;
  right: calc(var(--stub) + 0.4rem);
  top: -0.18em;
  z-index: 0;
  font-size: 9.5rem;
  line-height: 1;
  font-weight: 900;
  font-stretch: var(--w-wide);
  font-variation-settings: "wdth" 125;
  letter-spacing: -0.08em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.08);
  pointer-events: none;
  user-select: none;
}

.slip:first-child .slip__id::before {
  -webkit-text-stroke-color: rgba(255, 199, 44, 0.22);
}

/* perforation between two slips */
.slip + .slip {
  border-top: 1px dashed var(--line-2);
}

.slip + .slip::before,
.slip + .slip::after {
  content: "";
  position: absolute;
  top: -8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg);
  z-index: 2;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}

.slip + .slip::before {
  left: -0.6rem;
  margin-left: -8px;
}

.slip + .slip::after {
  right: -0.6rem;
  margin-right: -8px;
}

/* rank column, lit in the brand's colour */
.slip__rank {
  grid-area: rank;
  display: flex;
  justify-content: center;
  padding-top: 1.1rem;
  border-right: 1px dashed var(--line-2);
  background: linear-gradient(90deg, color-mix(in srgb, var(--bglow) 22%, transparent), transparent 85%);
  box-shadow: inset 3px 0 0 var(--bglow), inset 12px 0 24px -14px color-mix(in srgb, var(--bglow) 60%, transparent);
}

.slip__rank span {
  display: inline-grid;
  place-items: center;
  color: #fff;
  font-size: var(--t-xl);
  font-weight: 880;
  font-stretch: var(--w-data);
  font-variation-settings: "wdth" 90;
  letter-spacing: -0.03em;
  line-height: 1;
  --flap-bg: rgba(255, 255, 255, 0.08);
  --flap-line: rgba(255, 255, 255, 0.14);
  --flap-split: rgba(0, 0, 0, 0.45);
}

.slip__rank span .flap__c {
  min-width: 1.1em;
  height: 1.3em;
}

.slip:first-child .slip__rank span .flap__c {
  --flap-bg: var(--sun);
  --flap-line: var(--sun-deep);
  --flap-split: rgba(43, 31, 0, 0.3);
  color: var(--sun-ink);
  box-shadow: inset 0 0 0 1px var(--flap-line), 0 0 18px var(--sun-glow);
}

/* identity row */
.slip__id {
  position: relative;
  grid-area: id;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 1rem;
  row-gap: 0.15rem;
  padding: 1.05rem 1.2rem 0.6rem;
}

.slip__name {
  position: relative;
  grid-column: 2;
  margin: 0;
  font-size: var(--t-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #fff;
}

.slip__lic {
  position: relative;
  grid-column: 2;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  font-size: var(--t-xs);
  color: var(--mute);
  line-height: 1.3;
}

.slip__id .plate {
  position: relative;
  grid-row: 1 / 3;
}

/* logo plate, glowing in the brand's colour */
.plate {
  display: grid;
  place-items: center;
  width: 112px;
  height: 56px;
  padding: 7px 9px;
  border-radius: var(--r);
  background: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 16px 34px -12px color-mix(in srgb, var(--bglow) 80%, transparent);
  overflow: hidden;
  flex: none;
  transition: transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease);
}

.plate--dark {
  background: #111114;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 16px 34px -12px color-mix(in srgb, var(--bglow) 80%, transparent);
}

.slip:hover .plate {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 24px 48px -14px color-mix(in srgb, var(--bglow) 95%, transparent);
}

.plate img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.plate--text {
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-align: center;
  color: #161619;
  line-height: 1.1;
}

.plate--dark.plate--text {
  color: #fff;
}

/* licence tokens */
.lic {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--mute);
  font-weight: 560;
}

.lic--local {
  position: relative;
  padding: 0.12em 0.55em 0.1em 0.5em;
  border: 1.5px solid var(--ok);
  border-radius: 4px;
  color: var(--ok-ink);
  font-size: var(--t-2xs);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transform: rotate(-1.5deg);
  transform-origin: left center;
  box-shadow: 0 0 14px var(--ok-wash);
  -webkit-mask-image: repeating-linear-gradient(115deg, #000 0 11px, rgba(0, 0, 0, 0.72) 11px 13px, #000 13px 29px, rgba(0, 0, 0, 0.85) 29px 31px);
  mask-image: repeating-linear-gradient(115deg, #000 0 11px, rgba(0, 0, 0, 0.72) 11px 13px, #000 13px 29px, rgba(0, 0, 0, 0.85) 29px 31px);
}

.lic--local::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--ok);
}

.tag {
  display: inline-block;
  padding: 0.14em 0.55em;
  border-radius: var(--r-sm);
  background: var(--pitch-wash-2);
  color: var(--link-2);
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* facts: offer, terms, cashier rows */
.slip__facts {
  position: relative;
  grid-area: facts;
  padding: 0 1.2rem 1rem;
  min-width: 0;
}

.slip__offer {
  margin: 0.2rem 0 0.4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.75rem;
}

.slip__k {
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}

.slip__offer strong {
  font-size: var(--t-2xl);
  font-weight: 860;
  font-stretch: var(--w-data);
  font-variation-settings: "wdth" 94;
  letter-spacing: -0.03em;
  color: #fff;
  line-height: 1.1;
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.12);
}

.slip__offer--none strong {
  font-size: var(--t-md);
  font-weight: 580;
  color: var(--mute);
  text-shadow: none;
}

.slip__terms {
  margin: 0 0 0.6rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0;
  font-size: var(--t-xs);
  color: var(--ink-3);
}

.slip__terms li {
  margin: 0;
  padding: 0 0.65rem;
  border-left: 1px solid var(--line-2);
  line-height: 1.3;
  font-stretch: var(--w-data);
  font-variation-settings: "wdth" 94;
  font-weight: 580;
}

.slip__terms li:first-child {
  padding-left: 0;
  border-left: 0;
}

.slip__rows {
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.25rem 0.9rem;
  font-size: var(--t-xs);
  align-items: baseline;
}

.slip__rows > div {
  display: contents;
}

.slip__rows dt {
  color: var(--mute);
  font-weight: 600;
  white-space: nowrap;
}

.slip__rows dd {
  margin: 0;
  color: var(--ink-2);
  font-weight: 540;
  line-height: 1.4;
}

/* the editor's line about this brand */
.slip__note {
  position: relative;
  grid-area: note;
  margin: 0 1.2rem 1.1rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--r);
  background: var(--card-2);
  box-shadow: inset 3px 0 0 var(--bglow);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--ink-2);
}

.slip__note p {
  margin: 0;
}

.slip__note p + p {
  margin-top: 0.4em;
}

/* the stub */
.slip__stub {
  position: relative;
  grid-area: stub;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 1rem;
  border-left: 1px dashed var(--line-2);
  text-align: center;
  background: repeating-linear-gradient(135deg, transparent 0 9px, rgba(255, 255, 255, 0.025) 9px 10px);
}

.slip__stub::after {
  content: attr(data-note);
  font-size: var(--t-2xs);
  line-height: 1.3;
  color: var(--mute);
  max-width: 16ch;
}

/* the action */
.go {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 46px;
  padding: 0.55rem 1.25rem;
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--sun-2), var(--sun));
  color: var(--sun-ink);
  font-size: var(--t-sm);
  font-weight: 800;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 24px -10px var(--sun-glow), inset 0 -2px 0 rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease);
}

.go::after {
  content: "";
  width: 0.45em;
  height: 0.45em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}

.go:hover {
  color: var(--sun-ink);
  filter: brightness(1.06);
  box-shadow: 0 16px 34px -10px var(--sun-glow), inset 0 -2px 0 rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transform: translateY(-1px);
}

.go:hover::after {
  transform: translateX(3px) rotate(45deg);
}

.go:active {
  transform: translateY(1px);
  filter: brightness(0.96);
}

.go--quiet {
  background: var(--card-3);
  color: #fff;
  box-shadow: var(--rim);
}

.go--quiet:hover {
  color: #fff;
  box-shadow: var(--rim-2);
  filter: none;
}

.adult {
  margin: 0.8rem 0 1.8rem;
  font-size: var(--t-xs);
  color: var(--mute);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.adult::before {
  content: "";
  width: 1.4rem;
  height: 1px;
  background: var(--line-3);
}

/* picks: the data strip that names the best value per rule */
.picks {
  margin: 1.2rem 0 1.6rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--rim);
}

.picks > div {
  background: var(--card-solid);
  padding: 0.85rem 1rem 0.9rem;
  transition: background var(--dur) var(--ease);
}

.picks > div:hover {
  background: var(--bg-3);
}

.picks dt {
  font-size: var(--t-2xs);
  color: var(--mute);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}

.picks dd {
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
}

/* promo code chip */
.promo {
  display: inline-block;
  padding: 0.08em 0.5em;
  border-radius: var(--r-sm);
  border: 1px dashed var(--sun);
  background: var(--sun-wash);
  color: var(--sun-2);
  font-family: inherit;
  font-weight: 800;
  font-stretch: var(--w-data);
  font-variation-settings: "wdth" 92;
  letter-spacing: 0.06em;
  font-size: 0.92em;
}

/* ===== 55-tables.css ===== */
/* ==========================================================================
   Tables: comparison grids, register lists, app tables, brand maps
   ========================================================================== */

.tablewrap {
  position: relative;
  margin: 1.2rem 0 1.6rem;
  border-radius: var(--r-lg);
  background: var(--card-solid);
  box-shadow: var(--rim), var(--sh-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-3) transparent;
}

.tablewrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 32px;
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.55));
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.tablewrap.is-scrollable::after {
  opacity: 1;
}

table.grid {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--t-sm);
}

.grid th,
.grid td {
  padding: 0.75rem 0.95rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  line-height: 1.4;
}

.grid thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-4);
  color: var(--ink-2);
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1px solid var(--line-2);
}

.grid thead th:first-child {
  border-top-left-radius: var(--r-lg);
}

.grid thead th:last-child {
  border-top-right-radius: var(--r-lg);
}

.grid tbody th {
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--card-solid);
  box-shadow: 1px 0 0 var(--line);
}

.grid tbody th a {
  text-decoration: none;
  color: #fff;
}

.grid tbody th a:hover {
  color: var(--sun);
  text-decoration: underline;
}

.grid tbody td {
  color: var(--ink-2);
  font-stretch: var(--w-data);
  font-variation-settings: "wdth" 95;
}

.grid tbody tr:nth-child(even) th,
.grid tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.025);
}

.grid tbody tr:hover th,
.grid tbody tr:hover td {
  background: var(--sun-wash);
}

.grid tbody tr:last-child th,
.grid tbody tr:last-child td {
  border-bottom: 0;
}

.grid tbody tr:last-child th:first-child {
  border-bottom-left-radius: var(--r-lg);
}

.grid tbody tr:last-child td:last-child {
  border-bottom-right-radius: var(--r-lg);
}

/* status pills */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18em 0.65em 0.18em 0.55em;
  border-radius: var(--r-pill);
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  font-stretch: var(--w-text);
  font-variation-settings: "wdth" 100;
}

.pill::before {
  content: "";
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

.pill--ok {
  background: var(--ok-wash);
  color: var(--ok-ink);
}

.pill--warn {
  background: var(--warn-wash);
  color: var(--warn-ink);
}

.pill--mute {
  background: var(--card-2);
  color: var(--mute);
}

/* authored tables inside prose (no .grid class) */
.prose .tbl {
  overflow-x: auto;
  margin: 1.2rem 0 1.6rem;
  border-radius: var(--r-lg);
  background: var(--card-solid);
  box-shadow: var(--rim), var(--sh-2);
}

.prose table:not(.grid) {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--t-sm);
}

.prose table:not(.grid) th,
.prose table:not(.grid) td {
  padding: 0.7rem 0.95rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  line-height: 1.4;
}

.prose table:not(.grid) thead th {
  background: var(--bg-4);
  color: var(--ink-2);
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.prose table:not(.grid) tbody th {
  font-weight: 700;
  color: #fff;
}

.prose table:not(.grid) tbody tr:last-child th,
.prose table:not(.grid) tbody tr:last-child td {
  border-bottom: 0;
}

.prose table:not(.grid) tbody tr:nth-child(even) th,
.prose table:not(.grid) tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.025);
}

.brandmap .grid tbody th a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* ===== 60-prose.css ===== */
/* ==========================================================================
   Prose: the written column, its headings, notes, steps, FAQ and sources
   ========================================================================== */

.prose {
  max-width: 74ch;
  font-size: var(--t-lg);
  line-height: 1.62;
}

.prose > p,
.prose > ul,
.prose > ol {
  text-wrap: pretty;
}

.prose > p:first-child {
  font-size: 1.14rem;
  line-height: 1.55;
  color: var(--ink-2);
}

.prose p {
  margin: 0 0 1.05em;
}

/* section headings carry a short sun rule and a hairline */
.prose h2 {
  position: relative;
  margin-top: 2.8em;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: var(--t-2xl);
  scroll-margin-top: calc(var(--mast-h) + 20px);
}

.prose h2::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 2.6rem;
  height: 3px;
  border-radius: 2px;
  background: var(--flag-x);
  box-shadow: 0 0 12px color-mix(in srgb, var(--fa) 45%, transparent);
}

.prose h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.prose h2:first-child::before {
  display: none;
}

.prose h3 {
  margin-top: 2em;
  font-size: var(--t-xl);
  letter-spacing: -0.015em;
}

.prose h2 + h3 {
  margin-top: 1.2em;
}

.prose h2 + p,
.prose h3 + p {
  margin-top: 0;
}

.prose ul,
.prose ol {
  padding-left: 1.35em;
}

.prose li {
  margin: 0.3em 0;
  padding-left: 0.15em;
}

.prose li::marker {
  color: var(--pitch-3);
  font-weight: 650;
}

.prose figure {
  margin: 1.6em 0;
}

/* the section's own card, rendered by bin/og.py h2 */
.prose .h2fig {
  margin: 1rem 0 1.5rem;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--card-solid);
  box-shadow: var(--rim), var(--sh-2);
}

.prose .h2fig img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}

.prose figcaption {
  margin-top: 0.5rem;
  font-size: var(--t-xs);
  color: var(--mute);
}

.prose img {
  border-radius: var(--r-lg);
}

.prose blockquote {
  margin: 1.4em 0;
  padding: 0.2rem 0 0.2rem 1.2rem;
  border-left: 3px solid var(--sun);
  color: var(--ink-2);
  font-size: 1.05em;
}

.prose a {
  font-weight: 560;
}

/* editorial blocks authored inside content files */
.prose .note {
  margin: 1.4em 0;
  padding: 0.9rem 1.1rem;
  border-radius: var(--r-lg);
  background: var(--pitch-wash);
  color: var(--ink);
  box-shadow: inset 4px 0 0 var(--pitch-2);
  font-size: var(--t-md);
}

.prose .note p:last-child {
  margin-bottom: 0;
}

.prose .pick {
  margin: 1.4em 0;
  padding: 1rem 1.1rem;
  border-radius: var(--r-lg);
  background: var(--glass);
  box-shadow: var(--rim);
  font-size: var(--t-md);
}

.prose .pick p:last-child {
  margin-bottom: 0;
}

.prose .steps {
  counter-reset: st;
  list-style: none;
  padding: 0;
  margin: 1.2em 0 1.4em;
}

.prose .steps li {
  counter-increment: st;
  position: relative;
  padding: 0 0 0 3rem;
  margin: 0 0 0.9em;
  min-height: 2.2rem;
}

.prose .steps li::before {
  content: counter(st);
  position: absolute;
  left: 0;
  top: 0.05em;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: var(--r);
  background: var(--pitch);
  color: #fff;
  font-size: var(--t-sm);
  font-weight: 800;
  font-stretch: var(--w-data);
  font-variation-settings: "wdth" 92;
}

.prose dl.kv {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.45rem 1.2rem;
  margin: 1.2em 0 1.4em;
  padding: 0.9rem 1.1rem;
  border-radius: var(--r-lg);
  background: var(--glass);
  box-shadow: var(--rim);
  font-size: var(--t-md);
}

.prose dl.kv dt {
  color: var(--mute);
  font-weight: 560;
}

.prose dl.kv dd {
  margin: 0;
  font-weight: 560;
}

.lead-p {
  font-size: 1.14rem;
}

/* ---------- FAQ ---------- */

.faq {
  margin-top: 1.2rem;
  border-top: 1px solid var(--line);
}

.faq h3 {
  margin: 0;
  padding: 1rem 0 0.35rem;
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: -0.012em;
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  gap: 0.6rem;
  align-items: start;
}

.faq h3::before {
  content: "?";
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: 0.1em;
  border-radius: var(--r-sm);
  background: var(--sun);
  color: var(--sun-ink);
  font-size: var(--t-sm);
  font-weight: 850;
}

.faq p {
  margin: 0;
  padding: 0 0 1.05rem 2.2rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-md);
  color: var(--ink-2);
}

/* ---------- sources ---------- */

.sources {
  margin-top: 3rem;
  padding: 1.1rem 1.2rem 1.2rem;
  border-radius: var(--r-lg);
  background: var(--glass);
  box-shadow: var(--rim);
  font-size: var(--t-sm);
  color: var(--ink-2);
}

.sources__h {
  margin: 0 0 0.6rem;
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--ink);
}

.sources ol {
  margin: 0;
  padding-left: 1.4em;
}

.sources li {
  margin: 0.3em 0;
  padding-left: 0.2em;
}

.sources li::marker {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}

.sources a {
  font-weight: 540;
  word-break: break-word;
}

.back {
  margin-top: 2rem;
  font-size: var(--t-sm);
}

.back a {
  text-decoration: none;
  font-weight: 620;
}

/* ===== 70-widgets.css ===== */
/* ==========================================================================
   Widgets: country tiles, brand cards, guide cards, news lists, change log,
   and the fixtures board in the rail
   ========================================================================== */

/* ---------- country tiles (root) ---------- */

.tiles {
  list-style: none;
  margin: 1.4rem 0 1.6rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.8rem;
}

.tiles li {
  margin: 0;
}

.tile a {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 0.9rem;
  row-gap: 0.1rem;
  align-items: center;
  padding: 1rem 1.1rem 1rem 1.1rem;
  border-radius: var(--r-lg);
  background:
    radial-gradient(80% 120% at 0% 100%, color-mix(in srgb, var(--fa) 16%, transparent), transparent 60%),
    var(--glass);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--rim);
  overflow: hidden;
  transition: transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease);
}

.tile a::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--flag);
  box-shadow: 0 0 18px color-mix(in srgb, var(--fa) 55%, transparent);
}

.tile a:hover {
  transform: translateY(-3px);
  box-shadow: var(--rim-2), var(--sh-2);
  color: #fff;
}

.tile__code {
  grid-row: 1 / 3;
  margin-left: 0.3rem;
  font-size: 2.3rem;
  font-weight: 850;
  font-stretch: var(--w-wide);
  font-variation-settings: "wdth" 125;
  letter-spacing: -0.06em;
  line-height: 1;
  color: #fff;
}

.tile__name {
  font-size: var(--t-lg);
  font-weight: 740;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.tile__sub {
  font-size: var(--t-xs);
  color: var(--mute);
  line-height: 1.3;
}

.tile--status .tile__code {
  color: var(--mute);
}

/* ---------- brand cards ---------- */

.cards {
  list-style: none;
  margin: 1.4rem 0 1.6rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 0.75rem;
}

.cards li {
  margin: 0;
}

.card {
  border-radius: var(--r-lg);
  background: var(--glass);
  box-shadow: var(--rim);
  transition: transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease);
}

.card > a,
.card > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  height: 100%;
  padding: 1rem 0.9rem;
  color: var(--ink);
  text-decoration: none;
}

.card:has(> a):hover {
  transform: translateY(-3px);
  box-shadow: var(--rim-2), var(--sh-2);
}

.cards__logo .plate {
  width: 124px;
  height: 56px;
}

.cards__name {
  font-size: var(--t-md);
  font-weight: 720;
  letter-spacing: -0.01em;
  text-align: center;
}

.cards__sub {
  font-size: var(--t-sm);
  color: var(--ink-3);
  line-height: 1.45;
}

/* text cards: hubs on a country page, guides on the root */
.cards--text {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.cards--text .card > a {
  align-items: flex-start;
  gap: 0.35rem;
  padding: 1rem 1.1rem 1.1rem;
}

.cards--text .cards__name {
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cards--text .cards__name::after {
  content: "";
  width: 0.4em;
  height: 0.4em;
  border-top: 2px solid var(--pitch-3);
  border-right: 2px solid var(--pitch-3);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}

.cards--text .card:hover .cards__name::after {
  transform: translateX(3px) rotate(45deg);
}

/* ---------- news list ---------- */

.posts {
  list-style: none;
  margin: 1.2rem 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.posts li {
  margin: 0;
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0.2rem 1.2rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}

.posts time {
  grid-row: 1 / 3;
  font-size: var(--t-xs);
  color: var(--mute);
  font-weight: 560;
  padding-top: 0.25rem;
  font-stretch: var(--w-data);
  font-variation-settings: "wdth" 92;
}

.posts a {
  font-size: var(--t-lg);
  font-weight: 720;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: #fff;
  text-decoration: none;
}

.posts a:hover {
  color: var(--sun);
  text-decoration: underline;
}

.posts p {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--ink-3);
  line-height: 1.5;
}

/* ---------- change log ---------- */

.changes {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--t-xs);
}

.changes li {
  margin: 0;
  padding: 0.45rem 0;
  border-top: 1px solid var(--line);
  line-height: 1.45;
  color: var(--ink-2);
}

.changes li:first-child {
  border-top: 0;
  padding-top: 0;
}

.changes time {
  display: block;
  color: var(--mute);
  font-weight: 600;
  font-stretch: var(--w-data);
  font-variation-settings: "wdth" 92;
}

.changes a {
  text-decoration: none;
  font-weight: 600;
}

/* ---------- fixtures board ---------- */

.fxs {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.fx {
  border-radius: var(--r-lg);
  background: var(--card-solid);
  box-shadow: var(--rim), var(--sh-2);
  overflow: hidden;
}

.fx__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 0.9rem;
  background: var(--pitch);
  color: var(--on-pitch);
}

.fx__head h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--t-sm);
  font-weight: 700;
  color: #fff;
}

.fx__head h3::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 0 3px rgba(255, 199, 44, 0.25);
}

.fx__tabs {
  display: inline-flex;
  padding: 2px;
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.1);
}

.fx__tabs button {
  padding: 0.25rem 0.6rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--on-pitch-2);
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.fx__tabs button[aria-selected="true"] {
  background: #fff;
  color: var(--pitch);
}

.fx__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fx__m {
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr) auto;
  gap: 0.25rem 0.7rem;
  align-items: center;
  padding: 0.55rem 0.9rem;
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
  transition: background var(--dur) var(--ease);
}

.fx__m:first-child {
  border-top: 0;
}

.fx__m:hover {
  background: var(--card-2);
}

.fx__m time {
  display: flex;
  flex-direction: column;
  font-size: var(--t-2xs);
  line-height: 1.25;
  color: var(--mute);
  font-stretch: var(--w-data);
  font-variation-settings: "wdth" 92;
}

.fx__m time b {
  color: var(--ink);
  font-weight: 650;
}

.fx__teams {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
  font-weight: 560;
}

.fx__teams span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fx__odds {
  display: inline-flex;
  gap: 3px;
}

.px {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 42px;
  padding: 0.2rem 0.3rem;
  border-radius: 6px;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  text-decoration: none;
  font-size: var(--t-xs);
  font-weight: 760;
  line-height: 1.1;
  font-stretch: var(--w-data);
  font-variation-settings: "wdth" 92;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.px small {
  font-size: 0.6rem;
  font-weight: 560;
  color: var(--mute);
}

.px:hover {
  background: var(--sun-wash);
  border-color: var(--sun-deep);
  color: var(--sun-ink);
  transform: translateY(-1px);
}

.fx__odds--none {
  max-width: 90px;
  text-align: right;
  font-size: var(--t-2xs);
  color: var(--mute);
}

.fx__score {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  font-weight: 760;
  font-stretch: var(--w-data);
  font-variation-settings: "wdth" 92;
  line-height: 1.3;
}

/* ===== 75-tape.css ===== */
/* ==========================================================================
   The pieces that belong to this trade and nowhere else:
   - split-flap characters, shared by the tape, the board code and the ranks
   - the flap tape: a kiosk odds board of the week's fixtures under the masthead
   - the payout counter: what a win pays after the country's deduction
   ========================================================================== */

/* ---------- flap characters ---------- */

.flap {
  display: inline-flex;
  gap: 1px;
  vertical-align: baseline;
}

.flap__c {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 0.72em;
  height: 1.25em;
  padding: 0 0.06em;
  border-radius: 0.14em;
  background: var(--flap-bg, rgba(255, 255, 255, 0.07));
  box-shadow: inset 0 0 0 1px var(--flap-line, rgba(255, 255, 255, 0.08));
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.flap__c::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--flap-split, rgba(0, 0, 0, 0.4));
  pointer-events: none;
}

.flap__c.is-space {
  min-width: 0.35em;
  background: transparent;
  box-shadow: none;
}

.flap__c.is-space::after {
  display: none;
}

.flap__c > span {
  display: block;
  will-change: transform;
}

.flap__c.is-flipping > span {
  animation: flap-step 70ms linear;
}

@keyframes flap-step {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }
}

/* ---------- the tape ---------- */

.tape {
  position: relative;
  z-index: 40;
  background: var(--pitch-deep);
  color: var(--on-pitch);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  --flap-bg: rgba(255, 255, 255, 0.08);
  --flap-line: rgba(255, 255, 255, 0.1);
  --flap-split: rgba(0, 0, 0, 0.5);
}

.tape__in {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 46px;
}

.tape__lead {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-right: 1rem;
  margin-right: 0.4rem;
  border-right: 1px solid var(--line-2);
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-pitch-2);
  white-space: nowrap;
  font-stretch: var(--w-data);
  font-variation-settings: "wdth" 92;
}

.tape__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 3px rgba(255, 107, 74, 0.25), 0 0 12px var(--live);
  animation: live 2.4s ease-in-out infinite;
}

@keyframes live {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(255, 107, 74, 0.25), 0 0 12px var(--live);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(255, 107, 74, 0.08), 0 0 4px var(--live);
  }
}

.tape__scroll {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.5rem, #000 calc(100% - 3rem), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 2.5rem, #000 calc(100% - 3rem), transparent);
}

.tape__list {
  list-style: none;
  margin: 0;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  gap: 2.2rem;
  width: max-content;
  min-height: 46px;
}

.tape__scroll.is-moving .tape__list {
  animation: tape-run var(--tape-dur, 60s) linear infinite;
}

.tape__scroll:hover .tape__list,
.tape__scroll:focus-within .tape__list {
  animation-play-state: paused;
}

@keyframes tape-run {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.tape__m {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  white-space: nowrap;
  font-size: var(--t-xs);
}

.tape__t {
  color: var(--on-pitch-2);
  font-weight: 650;
  font-stretch: var(--w-data);
  font-variation-settings: "wdth" 92;
}

.tape__v {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 780;
  letter-spacing: 0.01em;
  color: #fff;
}

.tape__v i {
  font-style: normal;
  font-weight: 500;
  color: var(--on-pitch-3);
}

.tape__px {
  display: inline-flex;
  gap: 3px;
}

.tape__p {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.45rem 0.15rem 0.4rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  color: #fff;
  text-decoration: none;
  font-weight: 780;
  font-stretch: var(--w-data);
  font-variation-settings: "wdth" 92;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}

.tape__p small {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--on-pitch-3);
}

.tape__p:hover {
  background: var(--sun);
  color: var(--sun-ink);
  box-shadow: 0 0 18px var(--sun-glow);
}

.tape__p:hover small {
  color: var(--sun-ink);
}

.tape__p:hover .flap__c {
  --flap-bg: rgba(0, 0, 0, 0.08);
  --flap-line: rgba(0, 0, 0, 0.12);
  --flap-split: rgba(0, 0, 0, 0.18);
}

.tape__p--none,
.tape__p--score {
  font-weight: 560;
  color: var(--on-pitch-3);
  background: transparent;
  box-shadow: none;
}

.tape__p--score {
  color: #fff;
  font-weight: 780;
}

/* ---------- payout counter ---------- */

.calc {
  padding: 1rem 1.1rem 1.05rem;
}

.calc .railbox__h {
  margin-bottom: 0.75rem;
}

.calc__f {
  margin: 0 0 0.85rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0.6rem;
}

.calc__f label {
  display: grid;
  gap: 0.3rem;
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
}

.calc__in {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 42px;
  padding: 0 0.65rem;
  border-radius: var(--r);
  background: rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 0 1px var(--line-2);
  transition: box-shadow var(--dur) var(--ease);
}

.calc__in:focus-within {
  box-shadow: inset 0 0 0 1px var(--sun), 0 0 0 3px var(--sun-wash);
}

.calc__in i {
  font-style: normal;
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--mute);
}

.calc__in input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0.4rem 0;
  font-size: var(--t-md);
  font-weight: 760;
  color: #fff;
  font-stretch: var(--w-data);
  font-variation-settings: "wdth" 92;
  -moz-appearance: textfield;
  appearance: textfield;
}

.calc__in input::-webkit-outer-spin-button,
.calc__in input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.calc__in input:focus {
  outline: none;
  box-shadow: none;
}

.calc__out {
  margin: 0;
  display: grid;
  gap: 0;
}

.calc__out > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.42rem 0;
  border-top: 1px dashed var(--line-2);
  font-size: var(--t-sm);
}

.calc__out dt {
  color: var(--mute);
  font-weight: 560;
}

.calc__out dd {
  margin: 0;
  font-weight: 760;
  color: var(--ink);
  font-stretch: var(--w-data);
  font-variation-settings: "wdth" 92;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.calc__net {
  border-top: 2px solid var(--line-3) !important;
  margin-top: 0.25rem;
  padding-top: 0.6rem !important;
}

.calc__net dt {
  color: #fff;
  font-weight: 700;
}

.calc__net dd {
  font-size: var(--t-xl);
  font-weight: 880;
  letter-spacing: -0.02em;
  color: var(--sun);
  text-shadow: 0 0 24px var(--sun-glow);
}

.calc__alt {
  margin: 0.7rem 0 0;
  padding: 0.55rem 0.7rem;
  border-radius: var(--r);
  background: var(--card-2);
  box-shadow: var(--rim);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  font-size: var(--t-xs);
  color: var(--ink-2);
}

.calc__alt b {
  font-weight: 800;
  color: #fff;
  font-stretch: var(--w-data);
  font-variation-settings: "wdth" 92;
  white-space: nowrap;
}

.calc__note {
  margin: 0.75rem 0 0;
  font-size: var(--t-2xs);
  line-height: 1.5;
  color: var(--mute);
}

@media (max-width: 520px) {
  .tape__lead {
    padding-right: 0.6rem;
    margin-right: 0.2rem;
    font-size: 0;
  }

  .tape__list {
    gap: 1.6rem;
  }

  .calc__f {
    grid-template-columns: 1.3fr 1fr;
  }
}

/* ===== 80-news.css ===== */
/* ==========================================================================
   News: the wire desk. A dispatch is a dated card with the page's own
   rendered picture; the date is a rubber stamp in sun ink; the rail keeps
   the wire log (change feed) on a perforated strip; the other desks are
   listed under their flags. The detail page hangs the dispatch picture
   beside the headline and ends with a row of what to read next.
   ========================================================================== */

/* ---------- date stamp ---------- */

.dstamp {
  position: relative;
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 0.45rem;
  padding: 0.3rem 0.65rem 0.3rem 0.55rem;
  border: 2px solid var(--sun);
  border-radius: 7px;
  color: var(--sun);
  line-height: 1;
  font-stretch: var(--w-narrow);
  font-variation-settings: "wdth" 84;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transform: rotate(-2.5deg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sun) 55%, transparent), 0 0 22px var(--sun-glow);
  opacity: 0.94;
  white-space: nowrap;
}

.dstamp b {
  font-size: 1.85rem;
  font-weight: 880;
  font-stretch: var(--w-data);
  font-variation-settings: "wdth" 92;
  letter-spacing: -0.04em;
}

.dstamp span {
  display: grid;
  font-size: 0.72rem;
  font-weight: 760;
}

.dstamp span i {
  font-style: normal;
  font-weight: 560;
  color: color-mix(in srgb, var(--sun) 72%, #fff);
}

.dstamp[data-label]::before {
  content: attr(data-label);
  position: absolute;
  left: 0.55rem;
  top: -0.55rem;
  padding: 0 0.3rem;
  background: var(--bg-2);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--sun);
}

.dstamp--ink {
  border-color: var(--line-3);
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line);
  transform: rotate(1.5deg);
}

.dstamp--ink span i {
  color: var(--mute);
}

.dstamp--ink[data-label]::before {
  color: var(--ink-3);
}

.dstamp--sm {
  padding: 0.22rem 0.5rem 0.22rem 0.45rem;
}

.dstamp--sm b {
  font-size: 1.35rem;
}

.dstamp--sm span {
  font-size: 0.62rem;
}

.dateline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem 1.4rem;
  margin: 1.2rem 0 0.3rem;
}

.board .dateline .dstamp[data-label]::before {
  background: #1c1c21;
}

/* ---------- dispatch list ---------- */

.prose--news {
  max-width: none;
}

.prose--news > p {
  max-width: 74ch;
}

.prose .dispatch,
.dispatch {
  list-style: none;
  margin: 1.4rem 0 0.6rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
}

.dispatch__item {
  margin: 0;
  padding: 0;
  min-width: 0;
}

.dispatch__item--lead {
  grid-column: 1 / -1;
}

.dispatch__item > a {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  border-radius: var(--r-xl);
  background: var(--glass);
  box-shadow: var(--rim);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.dispatch__item--lead > a {
  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  grid-template-rows: none;
}

.dispatch__item > a:hover {
  transform: translateY(-3px);
  box-shadow: var(--rim), 0 30px 60px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px color-mix(in srgb, var(--sun) 35%, transparent);
}

.dispatch__item > a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--flag);
  z-index: 1;
  opacity: 0.9;
}

.dispatch__item > a:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 3px;
}

.dispatch__art {
  position: relative;
  display: block;
  aspect-ratio: 1200 / 630;
  background: var(--bg-3);
  overflow: hidden;
}

.dispatch__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.dispatch__item > a:hover .dispatch__art img {
  transform: scale(1.03);
}

.dispatch__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(14, 14, 16, 0.55));
  pointer-events: none;
}

.dispatch__item--lead > a {
  align-items: center;
}

.dispatch__item--lead .dispatch__art {
  align-self: stretch;
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  background: var(--bg-2);
}

.dispatch__item--lead .dispatch__art img {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: contain;
}

.dispatch__item--lead .dispatch__art::after {
  background: linear-gradient(90deg, transparent 70%, rgba(14, 14, 16, 0.45));
}

.dispatch__body {
  display: grid;
  align-content: start;
  gap: 0.55rem;
  padding: 1.1rem 1.2rem 1.25rem;
}

.dispatch__item--lead .dispatch__body {
  padding: 1.6rem 1.7rem 1.7rem;
  align-content: center;
}

.dispatch__body .dstamp {
  justify-self: start;
  margin: 0.2rem 0 0.35rem 0.2rem;
}

.dispatch__kicker {
  font-size: var(--t-2xs);
  font-weight: 760;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-pitch-3);
}

.dispatch__h {
  font-size: var(--t-xl);
  font-weight: 820;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}

.dispatch__item--lead .dispatch__h {
  font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2.1rem);
}

.dispatch__p {
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--ink-3);
  text-wrap: pretty;
}

.dispatch__go {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.35rem;
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--link);
}

.dispatch__go::after {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.dispatch__item > a:hover .dispatch__go {
  color: var(--sun);
}

.dispatch__item > a:hover .dispatch__go::after {
  transform: translateX(3px) rotate(45deg);
}

/* ---------- the other desks ---------- */

.desks {
  margin-top: 2.6rem;
  padding: 1.2rem 1.3rem 0.6rem;
  border-radius: var(--r-xl);
  background: var(--glass);
  box-shadow: var(--rim);
}

.desks__h {
  margin: 0 0 0.6rem;
  font-size: var(--t-lg);
  font-weight: 800;
  letter-spacing: -0.015em;
}

.desks ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.desks li {
  margin: 0;
  border-top: 1px solid var(--line);
}

.desks a {
  display: grid;
  grid-template-columns: 0.55rem minmax(7rem, 11rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 0.2rem;
  color: var(--ink-2);
  text-decoration: none;
}

.desks__flag {
  width: 0.55rem;
  height: 1.6rem;
  border-radius: 3px;
  background: var(--flag);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.desks__country {
  font-size: var(--t-sm);
  font-weight: 760;
  color: #fff;
  font-stretch: var(--w-head);
}

.desks__t {
  font-size: var(--t-md);
  font-weight: 560;
  line-height: 1.35;
  min-width: 0;
}

.desks time {
  font-size: var(--t-xs);
  color: var(--mute);
  font-weight: 620;
  font-stretch: var(--w-data);
  font-variation-settings: "wdth" 92;
  white-space: nowrap;
}

.desks a:hover .desks__t {
  color: var(--sun);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--sun) 55%, transparent);
}

.desks a:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: -3px;
  border-radius: var(--r);
}

/* compact version in the rail */
.railbox .desks {
  margin: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
}

.railbox .desks a {
  grid-template-columns: 0.45rem minmax(0, 1fr);
  gap: 0.6rem;
  padding: 0.5rem 0;
}

.railbox .desks .desks__t,
.railbox .desks time {
  display: none;
}

.railbox .desks__country {
  font-weight: 620;
  color: var(--ink-2);
}

.railbox .desks a:hover .desks__country {
  color: var(--sun);
}

/* ---------- wire log in the rail ---------- */

.railbox--wire .changes {
  margin-left: 0.35rem;
  padding-left: 0.9rem;
  border-left: 2px dashed var(--line-2);
}

.railbox--wire .changes li {
  position: relative;
}

.railbox--wire .changes li::before {
  content: "";
  position: absolute;
  left: calc(-0.9rem - 5px);
  top: 0.9rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bg-3);
  box-shadow: 0 0 0 2px var(--line-2);
}

.railbox--wire .changes li:first-child::before {
  top: 0.45rem;
  background: var(--sun);
  box-shadow: 0 0 0 2px var(--sun-deep), 0 0 12px var(--sun-glow);
}

/* ---------- the dispatch picture on the detail board ---------- */

.board--post .board__in {
  grid-template-columns: minmax(0, 1fr) clamp(240px, 28vw, 380px);
  align-items: center;
}

.board__art {
  grid-area: code;
  margin: 0;
  justify-self: end;
  width: 100%;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--bg-3);
  box-shadow: var(--rim), 0 40px 80px -30px rgba(0, 0, 0, 0.9), 0 0 60px color-mix(in srgb, var(--fa) 30%, transparent);
  transform: rotate(1.6deg);
  aspect-ratio: 1200 / 630;
}

.board__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.board--post .board__body {
  max-width: 70ch;
}

/* ---------- read next ---------- */

.next {
  margin-top: 3rem;
}

.next__h {
  margin: 0 0 0.9rem;
  font-size: var(--t-lg);
  font-weight: 800;
  letter-spacing: -0.015em;
}

.next__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}

.next__list li {
  margin: 0;
}

.next__list a {
  display: grid;
  gap: 0.6rem;
  height: 100%;
  padding: 0.55rem 0.55rem 0.9rem;
  border-radius: var(--r-lg);
  background: var(--glass);
  box-shadow: var(--rim);
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.next__list a:hover {
  transform: translateY(-3px);
  box-shadow: var(--rim), 0 24px 50px -28px rgba(0, 0, 0, 0.9), 0 0 0 1px color-mix(in srgb, var(--sun) 35%, transparent);
}

.next__list a:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 3px;
}

.next__art {
  display: block;
  aspect-ratio: 1200 / 630;
  border-radius: calc(var(--r-lg) - 4px);
  overflow: hidden;
  background: var(--bg-3);
}

.next__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.next__name {
  padding: 0 0.4rem;
  font-size: var(--t-md);
  font-weight: 720;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.next__list a:hover .next__name {
  color: var(--sun);
}

/* ---------- small screens ---------- */

@media (max-width: 880px) {
  .dispatch,
  .prose .dispatch {
    grid-template-columns: minmax(0, 1fr);
  }

  .dispatch__item--lead > a {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }

  .dispatch__item--lead .dispatch__art {
    aspect-ratio: 1200 / 630;
    min-height: 0;
  }

  .dispatch__item--lead .dispatch__art::after {
    background: linear-gradient(180deg, transparent 55%, rgba(14, 14, 16, 0.55));
  }

  .dispatch__item--lead .dispatch__body {
    padding: 1.1rem 1.2rem 1.25rem;
  }

  .board--post .board__in {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "body" "code";
  }

  .board__art {
    justify-self: start;
    max-width: 560px;
    transform: none;
  }

  .desks a {
    grid-template-columns: 0.55rem minmax(0, 1fr);
    gap: 0.35rem 0.8rem;
  }

  .desks__flag {
    grid-row: 1 / 3;
  }

  .desks time {
    grid-column: 2;
  }

  .next__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dispatch__item > a,
  .dispatch__art img,
  .dispatch__go::after,
  .next__list a {
    transition: none;
  }
}

/* ---------- compact ranked table at the top of a post ---------- */

.mini {
  margin: 0 0 1.6rem;
  padding: 0.75rem 0.9rem 0.6rem;
  border-radius: var(--r-xl);
  background: var(--glass);
  box-shadow: var(--rim), inset 0 2px 0 color-mix(in srgb, var(--fa) 70%, transparent);
}

.mini__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.45rem 0.2rem;
  font-size: var(--t-xs);
  color: var(--mute);
}

.mini__ad {
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--line-3);
  border-radius: var(--r-sm);
  font-size: var(--t-2xs);
  font-weight: 760;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.mini__t {
  font-weight: 650;
  color: var(--ink-2);
}

.mini__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mini__row {
  display: grid;
  grid-template-columns: 1.4rem 72px minmax(0, 1fr) auto auto;
  grid-template-areas: "n logo name lic cta" "n logo offer lic cta";
  align-items: center;
  gap: 0.1rem 0.75rem;
  padding: 0.45rem 0.2rem;
  border-top: 1px solid var(--line);
}

.mini__row:first-child {
  border-top: 0;
}

.mini__row[hidden] {
  display: none;
}

.mini__n {
  font-size: var(--t-sm);
  font-weight: 800;
  color: var(--sun);
  font-stretch: var(--w-data);
  font-variation-settings: "wdth" 92;
  text-align: center;
}

.mini .plate {
  width: 72px;
  height: 36px;
  padding: 4px 8px;
  border-radius: var(--r-sm);
}

.mini .plate img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mini__n { grid-area: n; }
.mini .plate { grid-area: logo; }
.mini .go { grid-area: cta; }

.mini__name {
  grid-area: name;
  align-self: end;
  font-size: var(--t-sm);
  font-weight: 760;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini__offer {
  grid-area: offer;
  align-self: start;
  font-size: var(--t-xs);
  color: var(--ink-2);
  line-height: 1.3;
}

.mini__lic {
  grid-area: lic;
  max-width: 9.5rem;
  font-size: var(--t-2xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini__lic .lic {
  font-size: var(--t-2xs);
}

.mini .go {
  padding: 0.4rem 0.75rem;
  font-size: var(--t-xs);
}

.mini__more {
  display: block;
  width: 100%;
  margin: 0.4rem 0 0;
  padding: 0.5rem;
  border: 1px dashed var(--line-3);
  border-radius: var(--r);
  background: transparent;
  color: var(--link);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 700;
  cursor: pointer;
}

.mini__more:hover {
  color: var(--sun);
  border-color: var(--sun);
}

.mini__more:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .mini__row {
    grid-template-columns: 1.2rem 56px minmax(0, 1fr);
    grid-template-areas: "n logo name" "n logo offer" "n logo cta";
  }

  .mini .plate { width: 56px; height: 30px; }
  .mini__lic { display: none; }
  .mini .go { justify-self: start; margin-top: 0.3rem; }
}

.dispatch__item[hidden] {
  display: none;
}

.dispatch__more {
  margin-top: 1rem;
}

/* ===== 90-responsive.css ===== */
/* ==========================================================================
   Responsive: wide first, then the rail folds, then the slips stack
   ========================================================================== */

/* the flag spine needs room beside the content column */
@media (max-width: 1340px) {
  .spine {
    display: none;
  }

  .is-country .mast::before {
    display: block;
  }
}

@media (min-width: 1341px) {
  .is-country .mast::before {
    display: none;
  }
}

/* rail folds under the column */
@media (max-width: 1023px) {
  .shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .rail {
    position: static;
    max-height: none;
    overflow: visible;
    padding-right: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
  }

  .rail .toc {
    display: none;
  }

  .toc--inline {
    display: block;
    margin-bottom: 1.6rem;
  }

  .toc--inline ol {
    columns: 2;
    column-gap: 1.6rem;
  }

  .toc--inline li {
    break-inside: avoid;
  }

  .board__in {
    column-gap: 1.6rem;
  }

  .board--page .board__code {
    font-size: clamp(2.6rem, 7vw, 4rem);
  }
}

/* navigation collapses, board stacks, slips reflow */
@media (max-width: 880px) {
  :root {
    --mast-h: 58px;
  }

  .mast__toggle {
    display: block;
  }

  .mast__here {
    display: none;
  }

  .nav__home {
    display: block;
  }

  .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin: 0;
    padding: 0.5rem var(--gutter) 1rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    background: var(--bg-2);
    border-bottom: 1px solid var(--line-2);
    box-shadow: var(--sh-3);
  }

  body.nav-open .nav {
    display: flex;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__list a {
    display: block;
    padding: 0.8rem 0.25rem;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    font-size: var(--t-md);
  }

  .nav__list a[aria-current]::after {
    left: 0.25rem;
    right: auto;
    width: 2rem;
    bottom: 0.45rem;
  }

  .pick {
    margin: 0.5rem 0 0;
  }

  .pick summary {
    width: 100%;
    justify-content: space-between;
    border-radius: var(--r);
  }

  .pick__grid {
    position: static;
    margin-top: 0.4rem;
    box-shadow: var(--rim);
    background: var(--card-2);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    animation: none;
  }

  .board__in {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "code"
      "body"
      "ledger";
    row-gap: 1rem;
  }

  .board__code {
    font-size: clamp(3.6rem, 17vw, 6rem);
  }

  .board--page .board__in {
    grid-template-areas:
      "body"
      "code";
  }

  .board--page .board__code,
  .board__plate {
    display: none;
  }

  .ledger {
    grid-template-columns: minmax(0, 1fr);
  }

  .slip {
    --stub: auto;
    grid-template-columns: 2.7rem minmax(0, 1fr);
    grid-template-areas:
      "rank id"
      "rank facts"
      "rank note"
      "stub stub";
  }

  .slip__rank span {
    min-width: 1.8rem;
    height: 1.8rem;
    font-size: var(--t-sm);
  }

  .slip__id {
    padding: 0.85rem 0.9rem 0.5rem;
    column-gap: 0.7rem;
  }

  .slip__id::before {
    right: 0.4rem;
    font-size: 6rem;
  }

  .plate {
    width: 92px;
    height: 46px;
  }

  .slip__name {
    font-size: var(--t-lg);
  }

  .slip__facts {
    padding: 0 0.9rem 0.8rem;
  }

  .slip__note {
    margin: 0 0.9rem 0.9rem;
  }

  .slip__stub {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem 0.9rem;
    border-left: 0;
    border-top: 1px dashed var(--line-2);
    text-align: left;
  }

  .slip__stub::after {
    max-width: none;
    order: -1;
  }

  .picks {
    grid-template-columns: minmax(0, 1fr);
  }

  .posts li {
    grid-template-columns: minmax(0, 1fr);
  }

  .posts time {
    grid-row: auto;
    padding-top: 0;
  }

  .foot__in {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.6rem;
    padding-top: 2.2rem;
  }

  .foot__cols {
    grid-template-columns: minmax(0, 1fr);
  }

  .grid tbody th {
    position: static;
    box-shadow: none;
  }

  .toc--inline ol {
    columns: 1;
  }

  .prose {
    font-size: var(--t-md);
  }

  .prose > p:first-child {
    font-size: 1.06rem;
  }
}


/* phones */
@media (max-width: 520px) {
  :root {
    --gutter: 16px;
    --t-code: clamp(3.4rem, 22vw, 5rem);
  }

  .mark img {
    height: 36px;
    margin-right: 0.4rem;
  }

  .mast__in {
    gap: 0.5rem;
  }

  .board__code {
    font-size: var(--t-code);
  }

  .board h1 {
    font-size: clamp(1.6rem, 7.2vw, 2.1rem);
  }

  .ledger > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.1rem;
    padding: 0.5rem 0;
  }

  .ledger dd {
    text-align: left;
  }

  .gates {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .gates b {
    font-size: 1.3rem;
  }

  .slip__offer strong {
    font-size: var(--t-lg);
  }

  .slip__rows {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.1rem;
  }

  .slip__rows dt {
    margin-top: 0.3rem;
  }

  .slip__stub {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 0.4rem;
  }

  .slip__stub::after {
    text-align: center;
  }

  .go {
    width: 100%;
  }

  .tiles {
    grid-template-columns: minmax(0, 1fr);
  }

  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cards--text {
    grid-template-columns: minmax(0, 1fr);
  }

  .pick__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .fx__m {
    grid-template-columns: 3.2rem minmax(0, 1fr) auto;
    padding: 0.5rem 0.7rem;
  }

  .px {
    min-width: 36px;
  }

  .foot__countries ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===== 95-motion.css ===== */
/* ==========================================================================
   Motion, reduced motion, print
   One orchestrated moment on arrival: the flag stamp draws down and the
   board's text rises. Everything else answers a hover or a tap.
   ========================================================================== */

@keyframes stamp-down {
  from {
    transform: scaleY(0);
  }

  to {
    transform: scaleY(1);
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes spine-down {
  from {
    transform: scaleY(0);
  }

  to {
    transform: scaleY(1);
  }
}

/* The arrival sequence itself runs from bh.js through the Web Animations API,
   only in a visible tab and only without a reduced-motion preference, so a
   background tab or a stalled compositor never leaves the board blank.
   The keyframes above stay available for that script. */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }

  .slip:hover,
  .tile a:hover,
  .card:has(> a):hover,
  .gates a:hover {
    transform: none;
  }
}

@media print {
  .spine,
  .mast,
  .rail,
  .foot,
  .slip__stub,
  .toc--inline,
  .adult {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .board {
    background: #fff;
    color: #000;
  }

  .board h1,
  .board__code,
  .ledger dd {
    color: #000;
  }

  .board .lead,
  .ledger dt {
    color: #333;
  }

  .shell {
    display: block;
    padding: 0;
  }

  .slip {
    grid-template-columns: 2.6rem minmax(0, 1fr);
    grid-template-areas:
      "rank id"
      "rank facts"
      "rank note";
    box-shadow: none;
    break-inside: avoid;
  }

  .slip::before,
  .slip::after {
    display: none;
  }

  a {
    color: #000;
  }

  .prose a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555;
  }
}