/* ---------- Fonts (self-hosted, SIL Open Font License) ---------- */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-latin-ext.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-italic-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-italic-latin-ext.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
/* Light by default; dark follows the system unless the reader pinned a theme
   (data-theme on <html>, set from a cookie by the server and by bcn.js). */
:root {
  color-scheme: light dark;
  --paper: #ffffff;
  --ink: #000000;
  --ink-2: #4a4a4a;
  --ink-soft: #262626;
  --rule: #d4d4d4;
  --wash: #f2f2f2;
  --card: #ffffff;
  --accent: #00ff41;
  --accent-deep: #00cc34;
  --accent-text: #008000;
  --night: #000000;
  --on-night: #ffffff;
  --on-accent: #000000;
  /* Terminal planes: phosphor green on black, like a hacker-film screen. */
  --plane: #000000;
  --on-plane: #00ff41;
  --on-plane-soft: #b8ffc9;

  --font-head: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-read: "Source Serif 4", Georgia, "Times New Roman", serif;

  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.1875rem;
  --step-2: 1.375rem;
  --step-3: 1.75rem;
  --step-bulletin: clamp(2.25rem, 1rem + 3.6vw, 4.75rem);

  --wrap: 82.5rem;
  --gutter: clamp(1rem, 3.5vw, 2.5rem);
  --space: clamp(2.5rem, 5vw, 4rem);
}

/* The two dark blocks must stay identical: one follows the system, one is the pinned choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #161616;
    --ink: #f0f0f0;
    --ink-2: #a6a6a6;
    --ink-soft: #d4d4d4;
    --rule: #333333;
    --wash: #222222;
    --card: #1f1f1f;
    --accent-text: #00ff41;
  }
}
:root[data-theme="dark"] {
  --paper: #161616;
  --ink: #f0f0f0;
  --ink-2: #a6a6a6;
  --ink-soft: #d4d4d4;
  --rule: #333333;
  --wash: #222222;
  --card: #1f1f1f;
  --accent-text: #00ff41;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* ---------- One accent per site ----------
   :root carries BCN's values. A [data-site] element (the page, or a mark in the site menu)
   switches to that site's accent. */
[data-site="cyber"] {
  --plane: #000000;
  --accent: #00ff41;
  --accent-deep: #00cc34;
  --on-plane: #00ff41;
  --on-plane-soft: #b8ffc9;
}
/* The portal (Zonactu, every zone): neutral, so that each zone card keeps its own colour. */
[data-site="portal"] {
  --plane: #000000;
  --accent: #f2f2f2;
  --accent-deep: #d4d4d4;
  --accent-text: var(--ink);
  --on-plane: #ffffff;
  --on-plane-soft: #d4d4d4;
}
@media (prefers-color-scheme: dark) {
  :root[data-site="portal"]:not([data-theme="light"]) { --accent-text: var(--ink); }
}
:root[data-site="portal"][data-theme="dark"] { --accent-text: var(--ink); }
[data-site="tech"] {
  --plane: #000000;
  --accent: #c77dff;
  --accent-deep: #b35bff;
  --accent-text: #6b21a8;
  --on-plane: #c77dff;
  --on-plane-soft: #e6ccff;
}
@media (prefers-color-scheme: dark) {
  :root[data-site="tech"]:not([data-theme="light"]) { --accent-text: #c77dff; }
}
:root[data-site="tech"][data-theme="dark"] { --accent-text: #c77dff; }

/* BFN: amber scoreboard digits on black, until the reader picks a club. */
[data-site="football"] {
  --plane: #000000;
  --accent: #ffb000;
  --accent-deep: #e69e00;
  --accent-text: #996a00;
  --on-plane: #ffb000;
  --on-plane-soft: #ffe0a3;
}
@media (prefers-color-scheme: dark) {
  :root[data-site="football"]:not([data-theme="light"]) { --accent-text: #ffb000; }
}
:root[data-site="football"][data-theme="dark"] { --accent-text: #ffb000; }

/* BEN: electric cyan, like a game HUD on a black screen. */
[data-site="esport"] {
  --plane: #000000;
  --accent: #00e5ff;
  --accent-deep: #00c2d9;
  --accent-text: #007e8c;
  --on-plane: #00e5ff;
  --on-plane-soft: #b8f6ff;
}
@media (prefers-color-scheme: dark) {
  :root[data-site="esport"]:not([data-theme="light"]) { --accent-text: #00e5ff; }
}
:root[data-site="esport"][data-theme="dark"] { --accent-text: #00e5ff; }

/* BGN: neon red, like an arcade cabinet's marquee in the dark. */
[data-site="gaming"] {
  --plane: #000000;
  --accent: #ff3355;
  --accent-deep: #f0173f;
  --accent-text: #c8102e;
  --on-plane: #ff3355;
  --on-plane-soft: #ffc2cc;
}
@media (prefers-color-scheme: dark) {
  :root[data-site="gaming"]:not([data-theme="light"]) { --accent-text: #ff3355; }
}
:root[data-site="gaming"][data-theme="dark"] { --accent-text: #ff3355; }

/* A club's colours. /football/teams.css (generated from football-data.org, every pair
   checked for contrast) gives each [data-team] its plane, plane type and accent, plus a
   text shade for each paper; these rules pick the shade for the current theme. */
[data-team] { --accent-text: var(--team-text, #996a00); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-team],
  :root[data-team]:not([data-theme="light"]) { --accent-text: var(--team-text-dark, #ffb000); }
}
:root[data-theme="dark"] [data-team],
:root[data-theme="dark"][data-team] { --accent-text: var(--team-text-dark, #ffb000); }

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

[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--ink-2) var(--wash);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--step-0)/1.5 var(--font-head);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }

a {
  color: inherit;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

::selection { background: var(--accent); color: var(--on-accent); }

:focus-visible {
  outline: 3px solid var(--accent-text);
  outline-offset: 2px;
}

time, .meter__label, .pager { font-variant-numeric: tabular-nums; }

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

.skip {
  position: absolute;
  left: var(--gutter); top: 0;
  z-index: 10;
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  transform: translateY(-120%);
}
.skip:focus { transform: none; }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
main:focus { outline: none; }

.icon {
  width: 1rem; height: 1rem;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter;
  flex: none;
}

/* ---------- Masthead ---------- */
.masthead {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "brand sections tools";
  align-items: center;
  gap: 0 2rem;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 0.85rem var(--gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--ink);
  text-decoration: none;
}

/* ---------- Site menu (the logo opens the list of sites) ---------- */
.site-menu {
  grid-area: brand;
  position: relative;
  justify-self: start;
}
.site-menu > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.site-menu > summary::-webkit-details-marker { display: none; }
.brand__chevron {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--ink-2);
}
.site-menu[open] .brand__chevron { transform: rotate(180deg); }
.site-menu > summary:hover .brand__name { text-decoration: underline; text-underline-offset: 0.18em; }

.site-menu__panel {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 0;
  z-index: 20;
  width: max-content;
  min-width: 19rem;
  max-width: calc(100vw - 2 * var(--gutter));
  padding: 0.4rem;
  border: 1px solid var(--ink);
  background: var(--paper);
}
.site-menu__list { margin: 0; padding: 0; list-style: none; }
.site-menu__entry {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem;
  color: var(--ink);
  text-decoration: none;
}
a.site-menu__entry:hover { background: var(--wash); }
.site-menu__mark {
  display: grid;
  place-items: center;
  height: 2rem;
  background: var(--plane);
  color: var(--on-plane);
  font: 900 1.0625rem/1 var(--font-head);
  font-stretch: 72%;
}
.site-menu__text { display: grid; gap: 0.1rem; }
.site-menu__name { font: 700 0.9375rem/1.2 var(--font-head); }
.site-menu__topic { color: var(--ink-2); font: 500 var(--step--1)/1.3 var(--font-head); }
.site-menu__entry[aria-current] .site-menu__name { text-decoration: underline; text-decoration-color: var(--accent-text); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.site-menu__entry.is-soon { color: var(--ink-2); }
.site-menu__entry.is-soon .site-menu__mark { background: var(--wash); color: var(--ink-2); }
.site-menu__soon {
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--rule);
  color: var(--ink-2);
  font: 600 var(--step--1)/1.2 var(--font-head);
}
.brand__mark {
  display: inline-block;
  padding: 0.3rem 0.5rem 0.25rem;
  background: var(--plane);
  color: var(--on-plane);
  font: 900 1.875rem/1 var(--font-head);
  font-stretch: 72%;
  letter-spacing: 0.01em;
}
.brand__name {
  font: 700 1.125rem/1.1 var(--font-head);
  letter-spacing: -0.01em;
}

.sections {
  grid-area: sections;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-width: 0;
}
/* Without the script the bar scrolls sideways; bcn.js instead hides what does not fit. */
.sections__list {
  display: flex;
  flex: 0 1 auto;
  gap: 1.5rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  white-space: nowrap;
  scrollbar-width: none;
}
.sections__list::-webkit-scrollbar { display: none; }
.sections.is-fitted .sections__list { overflow: hidden; }
/* The bar clips what overflows, so its focus ring is drawn inside each link. */
.sections__list a:focus-visible { outline-offset: -3px; }
.sections__list a,
.sections__more > summary {
  display: block;
  padding: 0.55rem 0 0.4rem;
  border-bottom: 3px solid transparent;
  font: 600 0.9375rem/1.2 var(--font-head);
  text-decoration: none;
}
.sections__list a:hover,
.sections__more > summary:hover { border-bottom-color: var(--rule); }
.sections__list a[aria-current="page"],
.sections__more.has-current > summary { border-bottom-color: var(--accent-text); }

/* "More": every section, each with a star that pins it to the bar. */
.sections__more { position: relative; flex: none; }
.sections__more > summary {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.sections__more > summary::-webkit-details-marker { display: none; }
.sections__more > summary .icon { width: 0.875rem; height: 0.875rem; color: var(--ink-2); }
.sections__more[open] > summary .icon { transform: rotate(180deg); }
.sections__panel {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  z-index: 20;
  width: max-content;
  min-width: 17rem;
  max-width: calc(100vw - 2 * var(--gutter));
  max-height: min(70vh, 30rem);
  overflow-y: auto;
  padding: 0.4rem;
  border: 1px solid var(--ink);
  background: var(--paper);
}
.sections__hint {
  max-width: 17rem;
  margin: 0.35rem 0.5rem 0.5rem;
  color: var(--ink-2);
  font: 500 var(--step--1)/1.35 var(--font-head);
  white-space: normal;
}
.sections__menu { margin: 0; padding: 0; list-style: none; }
.sections__menu li { display: flex; align-items: center; justify-content: space-between; gap: 0.25rem; }
.sections__menu a {
  flex: 1;
  padding: 0.65rem 0.5rem;
  color: var(--ink);
  font: 600 0.9375rem/1.2 var(--font-head);
  text-decoration: none;
  white-space: nowrap;
}
.sections__menu a:hover { background: var(--wash); }
.sections__menu a[aria-current="page"] {
  text-decoration: underline 2px var(--accent-text);
  text-underline-offset: 0.2em;
}
.sections__pin {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-2);
  cursor: pointer;
}
.sections__pin:hover { color: var(--ink); }
.sections__pin .icon { width: 1.125rem; height: 1.125rem; stroke-linejoin: round; }
.sections__pin[aria-pressed="true"] { color: var(--accent-text); }
.sections__pin[aria-pressed="true"] .icon { fill: currentColor; }

.tools {
  grid-area: tools;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid transparent;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--rule); }
.theme-toggle .icon { width: 1.125rem; height: 1.125rem; }
.theme-toggle[data-next="dark"] .icon--sun,
.theme-toggle[data-next="light"] .icon--moon { display: none; }

/* Language menu: the current language's flag and code; the languages open below. */
.lang-menu { position: relative; }
.lang-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0 0.55rem;
  border: 1px solid transparent;
  font: 700 0.875rem/1 var(--font-head);
  letter-spacing: 0.02em;
  list-style: none;
  cursor: pointer;
}
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu > summary:hover,
.lang-menu[open] > summary { border-color: var(--rule); }
.lang-menu > summary .icon { width: 0.75rem; height: 0.75rem; transition: rotate 0.2s; }
.lang-menu[open] > summary .icon { rotate: 180deg; }
.lang-menu__panel {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 20;
  min-width: 12.5rem;
  padding: 0.4rem;
  border: 1px solid var(--ink);
  background: var(--paper);
}
.lang-menu__list { margin: 0; padding: 0; list-style: none; }
.lang-menu__list a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  font: 600 0.9375rem/1.2 var(--font-head);
  text-decoration: none;
}
.lang-menu__list a:hover { background: var(--wash); }
.lang-menu__list a[aria-current] { box-shadow: inset 3px 0 0 var(--accent-text); font-weight: 800; }
.lang-menu__list a:focus-visible { outline-offset: -3px; }
/* Flags are drawn in static/flags (flag emoji do not show on Windows). The hairline keeps
   white stripes visible on white paper. */
.flag {
  flex: none;
  width: 1.375rem;
  height: 1rem;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--rule);
}
@media (prefers-reduced-motion: reduce) {
  .lang-menu > summary .icon { transition: none; }
}

/* ---------- Welcome dialog (first visit) ----------
   The one deliberate exception to the flat, still system (owner's choice, 2026-10-09):
   a floating card with rounded corners, a soft shadow and a blurred backdrop, arriving
   with one short motion. Inside, each site is a small black terminal plane with its code
   in its own colour, so the family's identity carries the moment. */
.welcome {
  --welcome-ease: cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
  width: min(40rem, calc(100vw - 2rem));
  max-width: none;
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: clamp(1.4rem, 4.5vw, 2.25rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 0;
  border-radius: 16px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 32px 80px -24px rgb(0 0 0 / 0.5), 0 6px 18px -6px rgb(0 0 0 / 0.18);
  /* Closed (and leaving) state; the open state below is where it arrives. */
  opacity: 0;
  translate: 0 1.5rem;
  scale: 0.97;
  transition-property: opacity, translate, scale, display, overlay;
  transition-duration: 0.5s;
  transition-timing-function: var(--welcome-ease);
  transition-behavior: allow-discrete;
}
/* data-closing lets browsers without exit transitions (bcn.js) play the same way out. */
.welcome:is([open]):where(:not([data-closing])) { opacity: 1; translate: 0; scale: 1; }
@starting-style {
  .welcome:is([open]):where(:not([data-closing])) { opacity: 0; translate: 0 1.5rem; scale: 0.97; }
}
.welcome:focus { outline: none; }

.welcome::backdrop {
  background-color: rgb(0 0 0 / 0);
  backdrop-filter: blur(0);
  transition-property: background-color, backdrop-filter, display, overlay;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  transition-behavior: allow-discrete;
}
.welcome:is([open]):where(:not([data-closing]))::backdrop {
  background-color: rgb(8 8 8 / 0.42);
  backdrop-filter: blur(14px) saturate(1.15);
}
@starting-style {
  .welcome:is([open]):where(:not([data-closing]))::backdrop {
    background-color: rgb(0 0 0 / 0);
    backdrop-filter: blur(0);
  }
}
html:has(.welcome[open]) { overflow: hidden; }

.welcome__title {
  margin: 0;
  font: 800 clamp(2rem, 1.35rem + 2.6vw, 2.875rem)/0.98 var(--font-head);
  font-stretch: 76%;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.welcome__intro {
  max-width: 36ch;
  margin: 0.75rem 0 0;
  color: var(--ink-2);
  font: 400 1.125rem/1.5 var(--font-read);
}

/* The four sites, two by two: a terminal plane each, code first. */
.welcome__sites {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}
.welcome__sites > li {
  transition: opacity 0.6s var(--welcome-ease), translate 0.6s var(--welcome-ease);
}
.welcome__sites > li:nth-child(1) { transition-delay: 0.06s; }
.welcome__sites > li:nth-child(2) { transition-delay: 0.11s; }
.welcome__sites > li:nth-child(3) { transition-delay: 0.16s; }
.welcome__sites > li:nth-child(4) { transition-delay: 0.21s; }
.welcome__sites > li:nth-child(5) { transition-delay: 0.26s; }
.welcome__sites > li:nth-child(6) { transition-delay: 0.31s; }
/* An odd last site takes the whole row rather than leaving a hole beside it. */
.welcome__sites > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@starting-style {
  .welcome[open] .welcome__sites > li { opacity: 0; translate: 0 0.75rem; }
}
.welcome__site {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  height: 100%;
  min-height: 8.75rem;
  padding: 1rem 1.1rem 1.05rem;
  border-radius: 12px;
  background: var(--plane);
  color: #ffffff;
  text-decoration: none;
  outline: 2px solid transparent;
  outline-offset: 3px;
  transition: translate 0.3s var(--welcome-ease), outline-color 0.3s var(--welcome-ease);
}
a.welcome__site:hover,
a.welcome__site:focus-visible { translate: 0 -3px; outline-color: var(--on-plane); }
a.welcome__site:active { translate: 0; }
.welcome__code {
  color: var(--on-plane);
  font: 900 clamp(2.5rem, 2rem + 2.2vw, 3.25rem)/0.85 var(--font-head);
  font-stretch: 72%;
  letter-spacing: -0.01em;
}
.welcome__label { display: grid; gap: 0.15rem; }
.welcome__name { font: 700 0.9375rem/1.2 var(--font-head); }
.welcome__topic { color: var(--on-plane-soft); font: 500 var(--step--1)/1.3 var(--font-head); }
.welcome__tag {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: var(--on-plane);
  color: #000000;
  font: 700 0.75rem/1.2 var(--font-head);
}
/* Not built yet: a quiet wash tile, not a plane. */
.welcome__site.is-soon { background: var(--wash); color: var(--ink-2); }
.welcome__site.is-soon .welcome__code,
.welcome__site.is-soon .welcome__topic { color: var(--ink-2); }
.welcome__site.is-soon .welcome__tag {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--rule);
  color: var(--ink-2);
}

/* How to switch later, shown with the logo it talks about. */
.welcome__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-top: 1.5rem;
}
.welcome__hint {
  display: flex;
  flex: 1 1 18rem;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  color: var(--ink-2);
  font: 500 0.9375rem/1.4 var(--font-head);
}
.welcome__logo {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.3rem;
  color: var(--ink-2);
}
.welcome__logo-mark {
  padding: 0.2rem 0.35rem 0.15rem;
  border-radius: 4px;
  background: var(--plane);
  color: var(--on-plane);
  font: 900 1rem/1 var(--font-head);
  font-stretch: 72%;
}
.welcome__logo .icon { width: 0.75rem; height: 0.75rem; }
.welcome__stay {
  flex: none;
  min-height: 2.75rem;
  padding: 0 1.25rem;
  border: 0;
  border-radius: 999px;
  background: var(--wash);
  color: var(--ink);
  font: 700 0.9375rem/1.2 var(--font-head);
  cursor: pointer;
  transition: background-color 0.2s ease-out;
}
.welcome__stay:hover { background: var(--rule); }
.welcome__stay:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 2px; }

/* Phone tiles are too narrow for a corner badge beside the code: it goes under the name. */
@media (max-width: 30rem) {
  .welcome__site { gap: 1rem; min-height: 7.75rem; padding: 0.85rem 0.9rem 0.9rem; }
  .welcome__label { margin-top: auto; }
  .welcome__tag { position: static; align-self: flex-start; margin-top: -0.4rem; }
  .welcome__stay { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .welcome, .welcome__sites > li, .welcome__site { translate: none; scale: none; }
  .welcome { transition-duration: 0.15s; }
  .welcome::backdrop { transition-duration: 0.15s; }
  @starting-style {
    .welcome:is([open]):where(:not([data-closing])) { translate: none; scale: none; }
    .welcome[open] .welcome__sites > li { translate: none; }
  }
  a.welcome__site:hover, a.welcome__site:focus-visible { translate: none; }
}

/* ---------- Translation status ---------- */
.status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
  max-width: var(--wrap);
  margin: 0.75rem auto 0;
  padding-inline: var(--gutter);
  color: var(--ink-2);
  font: 500 0.875rem/1.4 var(--font-head);
}
.status__action {
  padding: 0.35rem 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: 700 0.875rem/1.4 var(--font-head);
  text-decoration: underline;
  text-underline-offset: 0.16em;
  cursor: pointer;
}

/* ---------- Shared story pieces ---------- */
.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.85rem;
  margin: 0;
  color: var(--ink-2);
  font: 500 var(--step--1)/1.35 var(--font-head);
}
.meta__cat {
  color: var(--accent-text);
  font-weight: 700;
  text-decoration: none;
}
.meta__cat:hover { text-decoration: underline; }
.meta__source { color: var(--ink); font-weight: 600; }
.meta__exact { color: var(--ink); }

/* The single mark where the reader left off on their last visit. */
.left-off {
  margin: 1.5rem 0 0;
  padding-top: 0.4rem;
  border-top: 2px solid var(--accent-text);
  color: var(--accent-text);
  font: 700 var(--step--1)/1.2 var(--font-head);
  list-style: none;
}
.wire .left-off { margin: 0; padding-bottom: 0.4rem; }
.spots > .left-off { grid-column: 1 / -1; margin: 0; }

.meter {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  font: 600 var(--step--1)/1.2 var(--font-head);
}
.meter__segments { display: inline-flex; gap: 2px; }
.meter__segments i {
  width: 0.375rem;
  height: 0.875rem;
  background: currentColor;
}
/* One faint segment: a gauge with a single reading, not a missing glyph. */
.meter--single .meter__segments i { opacity: 0.35; }

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0.75rem 1.1rem;
  border: 1px solid var(--on-accent);
  background: var(--accent);
  color: var(--on-accent);
  font: 700 1rem/1.2 var(--font-head);
  text-decoration: none;
}
.button:hover { background: var(--accent-deep); }

.section-title {
  margin: 0 0 1.5rem;
  padding-top: 0.6rem;
  border-top: 3px solid var(--ink);
  font: 800 var(--step-3)/1.1 var(--font-head);
  font-stretch: 85%;
  letter-spacing: -0.01em;
}

/* Section title with the sort choice on the same rule. */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin: 0 0 1.5rem;
  padding-top: 0.6rem;
  border-top: 3px solid var(--ink);
}
.section-head .section-title { margin: 0; padding-top: 0; border-top: 0; }

.sorter {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  font: 600 0.9375rem/1.2 var(--font-head);
}
.sorter__label { color: var(--ink-2); font-weight: 500; }
.sorter a {
  padding: 0.5rem 0 0.35rem;
  border-bottom: 3px solid transparent;
  text-decoration: none;
}
.sorter a:hover { border-bottom-color: var(--rule); }
.sorter a[aria-current] { border-bottom-color: var(--accent-text); }

figure { margin: 0; }
[data-media] { background: var(--wash); overflow: hidden; }
[data-media] img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Active bulletin (lead story) ---------- */
.bulletin {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  margin-top: 1.5rem;
  background: var(--plane);
  color: var(--on-plane);
}
.bulletin__panel {
  grid-column: 1 / span 7;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: clamp(20rem, 36vw, 31rem);
  padding: clamp(1.5rem, 3vw, 2.75rem);
}
.bulletin--text .bulletin__panel { grid-column: 1 / -1; }
.bulletin__media { grid-column: 8 / -1; position: relative; }
.bulletin__media img { position: absolute; inset: 0; }

.bulletin__headline {
  margin: 0;
  font: 800 var(--step-bulletin)/0.98 var(--font-head);
  font-stretch: 72%;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.bulletin__headline--long { font-size: clamp(2rem, 1rem + 2.6vw, 3.5rem); line-height: 1.02; }
.bulletin--text .bulletin__headline { max-width: 22ch; }
.bulletin__headline a { text-decoration: none; }
.bulletin__headline a:hover { text-decoration: underline; text-decoration-thickness: 0.05em; }
.bulletin__dek {
  max-width: 50ch;
  margin: 0;
  font: 400 var(--step-1)/1.5 var(--font-read);
}
.bulletin__foot { display: grid; gap: 0.75rem; }
.bulletin .meta, .bulletin .meter { font-size: 0.9375rem; }
.bulletin .meter__segments i { width: 0.45rem; height: 1rem; }
.bulletin .meta,
.bulletin .meta__source,
.bulletin .meta__cat,
.bulletin .meta__exact,
.bulletin .meter { color: var(--on-plane-soft); }
.bulletin :focus-visible { outline-color: var(--on-plane); }
.bulletin__dek { color: var(--on-plane-soft); }
.bulletin .meter__segments { color: var(--on-plane); }

/* ---------- Desk: latest + most reported ---------- */
.desk {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 2.5rem;
  margin-top: var(--space);
}
.desk__latest { grid-column: 1 / span 8; min-width: 0; }
.desk--solo .desk__latest { grid-column: 1 / -1; }
.desk__rail {
  grid-column: 9 / -1;
  align-self: start;
  position: sticky;
  top: 1rem;
  padding-left: 2rem;
  border-left: 1px solid var(--rule);
}

.spots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.25rem 1.75rem;
}
.desk--solo .spots { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.spot { display: flex; flex-direction: column; gap: 0.6rem; }
.spot__media { aspect-ratio: 16 / 9; margin-bottom: 0.4rem; }
.spot__headline {
  margin: 0;
  font: 700 var(--step-2)/1.15 var(--font-head);
  font-stretch: 88%;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.spot--text .spot__headline { font-size: var(--step-3); }
.spot__headline a, .wire__headline a, .ranking__headline a { text-decoration: none; }
.spot__headline a:hover, .wire__headline a:hover, .ranking__headline a:hover { text-decoration: underline; }
.spot__dek {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--ink-soft);
  font: 400 0.9375rem/1.5 var(--font-read);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.wire {
  margin: 2.5rem 0 0;
  padding: 0;
  border-top: 1px solid var(--ink);
  list-style: none;
}
.spots + .wire { margin-top: 2.5rem; }
.wire__row {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr) 8.5rem;
  align-items: start;
  gap: 1.25rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--rule);
}
.wire__time {
  display: grid;
  color: var(--accent-text);
  font: 700 1.0625rem/1.15 var(--font-head);
}
.wire__time [data-part="day"] {
  color: var(--ink-2);
  font-size: var(--step--1);
  font-weight: 500;
}
.wire__body { display: grid; gap: 0.5rem; justify-items: start; }
.wire__headline {
  margin: 0;
  font: 700 1.1875rem/1.22 var(--font-head);
  font-stretch: 90%;
  text-wrap: pretty;
}
.wire__thumb { grid-column: 3; aspect-ratio: 3 / 2; }

.rail-note {
  margin: -0.75rem 0 0.5rem;
  color: var(--ink-2);
  font: 400 0.9375rem/1.45 var(--font-read);
}
.ranking {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: rank;
}
.ranking__item {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--rule);
  counter-increment: rank;
}
.ranking__item::before {
  content: counter(rank);
  color: var(--accent-text);
  font: 800 2rem/0.9 var(--font-head);
  font-stretch: 72%;
  font-variant-numeric: tabular-nums;
}
.ranking__headline {
  margin: 0 0 0.5rem;
  font: 700 1.0625rem/1.25 var(--font-head);
  text-wrap: pretty;
}

/* ---------- BFN: club, scores and tables ---------- */
.sections__list a.sections__club { display: flex; align-items: center; gap: 0.45rem; }
/* The club's two colours side by side, like the site marks. */
.sections__swatch {
  width: 0.9rem;
  height: 0.9rem;
  border-right: 0.3rem solid var(--plane-2, var(--on-plane));
  background: var(--plane);
  outline: 1px solid var(--rule);
}

.desk__rail--long { position: static; }
.desk__rail > section + section { margin-top: var(--space); }
.desk--rail-only .desk__rail {
  grid-column: 1 / span 6;
  padding-left: 0;
  border-left: 0;
}

.rail-label {
  margin: 1.25rem 0 0.25rem;
  color: var(--ink-2);
  font: 700 var(--step--1)/1.2 var(--font-head);
}

.fixtures { margin: 0; padding: 0; list-style: none; }
.fixture { padding: 0.7rem 0; border-bottom: 1px solid var(--rule); }
.fixture__line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font: 600 0.9375rem/1.25 var(--font-head);
}
.fixture__team:first-child { text-align: right; }
.fixture__team.is-mine {
  font-weight: 800;
  text-decoration: underline 2px var(--accent-text);
  text-underline-offset: 0.2em;
}
/* The score is a small scoreboard: plane digits, like the brand block. */
.fixture__score {
  min-width: 3.4rem;
  padding: 0.3rem 0.5rem 0.25rem;
  background: var(--plane);
  color: var(--on-plane);
  font: 800 1.0625rem/1 var(--font-head);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.fixture__time {
  padding: 0.3rem 0.5rem 0.25rem;
  border: 1px solid var(--rule);
  color: var(--ink);
  font: 600 var(--step--1)/1.1 var(--font-head);
  text-align: center;
}
.fixture__comp {
  margin: 0.35rem 0 0;
  color: var(--ink-2);
  font: 500 var(--step--1)/1.2 var(--font-head);
  text-align: center;
}

.fixture__live { color: var(--accent-text); font-weight: 700; }

.club-card__head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  background: var(--plane);
  color: var(--on-plane);
}
/* Crests are drawn for white backgrounds; a white square keeps dark ones visible. */
.club-card__crest {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.2rem;
  background: #ffffff;
  object-fit: contain;
}
.club-card__name {
  flex: 1;
  margin: 0;
  font: 800 var(--step-3)/1 var(--font-head);
  font-stretch: 72%;
  letter-spacing: -0.01em;
}
.club-card__change {
  color: var(--on-plane);
  font: 600 var(--step--1)/1.2 var(--font-head);
}
.club-card__head :focus-visible { outline-color: var(--on-plane); outline-offset: -3px; }
.club-card .rail-note { margin: 0.35rem 0 0.75rem; }
.club-card__more,
.rail-more {
  display: inline-block;
  margin-top: 1rem;
  padding-block: 0.4rem;
  color: var(--accent-text);
  font: 700 0.9375rem/1.3 var(--font-head);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font: 500 0.9375rem/1.2 var(--font-head);
  font-variant-numeric: tabular-nums;
}
.table th, .table td {
  padding: 0.5rem 0.4rem;
  border-bottom: 1px solid var(--rule);
  text-align: right;
}
.table thead th {
  border-bottom-color: var(--ink);
  color: var(--ink-2);
  font: 600 var(--step--1)/1.2 var(--font-head);
}
.table th:first-child, .table td:first-child { width: 2.25rem; color: var(--ink-2); text-align: left; }
.table th:nth-child(2) { width: 100%; text-align: left; }
.table tbody th { font-weight: 600; }
.table abbr { text-decoration: none; }
.table__points { font-weight: 800; }
/* The reader's club: a signal rule and heavier type, no fill. */
.table tr[aria-current] th,
.table tr[aria-current] td { font-weight: 800; }
.table tr[aria-current] td:first-child {
  border-left: 3px solid var(--accent-text);
  padding-left: 0.5rem;
  color: var(--accent-text);
}

/* Top of the My club section: the club and the way to change it. */
.club-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 3px solid var(--accent-text);
}
.club-head__crest {
  width: 3rem;
  height: 3rem;
  padding: 0.2rem;
  background: #ffffff;
  object-fit: contain;
}
/* The name keeps at least 12rem; on a phone the button moves under it instead. */
.club-head__name {
  flex: 1 1 12rem;
  min-width: 0;
  margin: 0;
  font: 800 clamp(1.75rem, 1.2rem + 2vw, 2.75rem)/1 var(--font-head);
  font-stretch: 72%;
  letter-spacing: -0.01em;
}
/* A link in a 1px ink box: "Change club", "Change my games". */
.box-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 1px solid var(--ink);
  font: 700 0.9375rem/1.2 var(--font-head);
  text-decoration: none;
}
.box-link:hover { background: var(--wash); }

/* ---------- BFN: the matches of a day ---------- */
.matches { max-width: 48rem; margin-top: clamp(1.5rem, 4vw, 3rem); }
/* A strip of days, scrolled sideways on narrow screens; bcn.js centres the chosen one. */
.days {
  margin-top: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.days::-webkit-scrollbar { display: none; }
.days__list { display: flex; gap: 0.35rem; margin: 0; padding: 0 0 0.25rem; list-style: none; }
.days__day {
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  min-width: 4.5rem;
  padding: 0.55rem 0.45rem 0.5rem;
  border: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
  scroll-snap-align: center;
}
.days__name { color: var(--ink-2); font: 600 var(--step--1)/1.2 var(--font-head); white-space: nowrap; }
.days__num {
  font: 800 1.5rem/1 var(--font-head);
  font-stretch: 72%;
  font-variant-numeric: tabular-nums;
}
.days__day:hover { border-color: var(--ink); }
.days__day.is-today .days__name { color: var(--accent-text); }
/* The chosen day wears the site's plane: the club's colours once a club is picked. */
.days__day[aria-current] { border-color: var(--plane); background: var(--plane); color: var(--on-plane); }
.days__day[aria-current] .days__name { color: var(--on-plane-soft); }
.days__day:focus-visible { outline-offset: -3px; }

.match-filters,
.platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.1rem;
  margin-top: 1.25rem;
  font: 600 0.9375rem/1.2 var(--font-head);
}
.match-filters a,
.platforms a {
  padding: 0.55rem 0 0.4rem;
  border-bottom: 3px solid transparent;
  text-decoration: none;
}
.match-filters a:hover,
.platforms a:hover { border-bottom-color: var(--rule); }
.match-filters a[aria-current],
.platforms a[aria-current] { border-bottom-color: var(--accent-text); }
.platforms { margin: 0.5rem 0 0; }
.free .platforms { margin: 0 0 var(--space); }

/* ---------- BGN free games ---------- */
.freebies__list { margin: 0; padding: 0; list-style: none; }
.freebie {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
}
.freebie:first-child { padding-top: 0; }
.freebie__image { width: 6rem; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--wash); }
.freebie__title { margin: 0; font: 700 1rem/1.25 var(--font-head); }
.freebie__title a { text-decoration: none; }
.freebie__title a:hover { text-decoration: underline; }
.freebie__meta, .giveaway__where, .giveaway__end {
  margin: 0.3rem 0 0;
  color: var(--ink-2);
  font: 500 var(--step--1)/1.35 var(--font-head);
}

.giveaways {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 2rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.giveaway { display: flex; flex-direction: column; }
.giveaway__image { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--wash); }
.giveaway__body { display: flex; flex: 1; flex-direction: column; padding-top: 0.85rem; }
.giveaway__title {
  margin: 0;
  font: 700 var(--step-2)/1.15 var(--font-head);
  font-stretch: 88%;
}
.giveaway__deal { margin: 0.6rem 0 0; font: 700 var(--step-1)/1.2 var(--font-head); }
.giveaway__deal s { margin-right: 0.35rem; color: var(--ink-2); font-weight: 500; }
.giveaway__deal strong { color: var(--accent-text); }
.giveaway__claim { align-self: flex-start; margin-top: auto; }
.giveaway__end { margin-bottom: 1rem; }
.credit {
  margin: var(--space) 0 0;
  color: var(--ink-2);
  font: 500 var(--step--1)/1.4 var(--font-head);
}

/* ---------- BGN My games ---------- */
.games-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: 0.5rem;
  border-bottom: 3px solid var(--accent-text);
}
.games-head .platforms { margin: 0; }
.games-head .box-link { margin-bottom: 0.5rem; }

.my-games { max-width: 64rem; }
.followed { margin: 0 0 var(--space); }
.followed .rail-label { margin-top: 0; }
.followed__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}
.followed__game {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding-left: 0.75rem;
  border: 1px solid var(--ink);
  font: 600 0.9375rem/1.2 var(--font-head);
}
.followed__remove {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--ink-2);
}
.followed__remove:hover { color: var(--accent-text); }

.game-finder { margin-bottom: var(--space); }
.game-search {
  display: flex;
  gap: 0.5rem;
  max-width: 34rem;
  margin: 0 0 1.25rem;
}
.game-search input {
  flex: 1;
  min-width: 0;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--card);
  color: var(--ink);
  font: 500 1rem/1.2 var(--font-head);
}
.game-search input:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 1px; }
.game-hits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.game-hit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem 0.5rem;
  height: 100%;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}
.game-hit__image {
  grid-column: 1 / -1;
  width: 100%;
  height: auto;
  aspect-ratio: 231 / 87;  /* Steam's search capsules */
  object-fit: cover;
  background: var(--wash);
}
.game-hit__name { font: 700 1rem/1.25 var(--font-head); }
.game-hit__year { color: var(--ink-2); font: 500 var(--step--1)/1.35 var(--font-head); }
.game-hit__action {
  grid-column: 1 / -1;
  color: var(--accent-text);
  font: 700 0.9375rem/1.2 var(--font-head);
}
.game-hit:hover .game-hit__name { text-decoration: underline; }
.game-hit.is-followed .game-hit__action { color: var(--ink-2); }
.game-hits { margin-top: 1.25rem; }
.game-results__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
}
.game-results__clear { font: 600 0.9375rem/1.2 var(--font-head); }
.game-typed { margin-top: 1rem; }
.game-typed .rail-note { margin: 0 0 0.75rem; }
.game-finder [data-game-nomatch] { margin: 0 0 1rem; }

.game-grid {
  display: grid;
  /* Two columns on a phone: 67 tiles in one column would be a long scroll. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.game-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  height: 100%;
  min-height: 3.25rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--rule);
  font: 600 0.9375rem/1.25 var(--font-head);
  text-decoration: none;
}
.game-tile:hover { border-color: var(--ink); }
.game-tile__mark { flex: none; color: var(--accent-text); }
.game-tile.is-followed {
  border-color: var(--accent);
  background: var(--plane);
  color: #ffffff;
}
.game-tile.is-followed .game-tile__mark { color: var(--on-plane); }
.game-tile:focus-visible { outline-offset: -3px; }
.followed__name { padding: 0.55rem 0; text-decoration: none; }
.followed__name:hover { text-decoration: underline; }

/* ---------- BGN game sheet ---------- */
.game-sheet { max-width: 64rem; margin-top: clamp(1.5rem, 4vw, 3rem); }
.game-sheet__back {
  display: inline-block;
  margin-bottom: 1rem;
  padding-block: 0.4rem;
  color: var(--accent-text);
  font: 700 0.9375rem/1.2 var(--font-head);
}
.game-sheet__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem 2rem;
  align-items: start;
}
.game-sheet__head:has(.game-sheet__image) { grid-template-columns: minmax(0, 23rem) minmax(0, 1fr); }
.game-sheet__image { width: 100%; height: auto; aspect-ratio: 460 / 215; object-fit: cover; background: var(--wash); }
.game-sheet__intro .page-title { margin-bottom: 0.5rem; }
.game-sheet__release { margin: 0.75rem 0 0; font: 600 1rem/1.35 var(--font-head); }
.game-sheet__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.6rem;
  margin: 0.6rem 0 0;
  font: 700 var(--step-2)/1.2 var(--font-head);
}
.game-sheet__discount, .my-games-rail__deal {
  padding: 0.15rem 0.45rem;
  background: var(--accent);
  color: var(--on-accent);
  font: 700 0.875rem/1.2 var(--font-head);
}
.game-sheet__was { color: var(--ink-2); font: 500 1rem/1.3 var(--font-head); }
.game-sheet__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
.game-updates { margin-top: var(--space); }
.game-updates__list { margin: 0; padding: 0; list-style: none; }
.game-update { padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.game-update:first-child { padding-top: 0; }
.game-update__meta { margin: 0; color: var(--ink-2); font: 500 var(--step--1)/1.35 var(--font-head); }
.game-update__tag {
  margin-left: 0.6rem;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--accent-text);
  color: var(--accent-text);
  font-weight: 700;
}
.game-update__title { margin: 0.35rem 0 0; font: 700 var(--step-1)/1.25 var(--font-head); }
.game-update__title a { text-decoration: none; }
.game-update__title a:hover { text-decoration: underline; }
.game-update__excerpt { max-width: 70ch; margin: 0.35rem 0 0; color: var(--ink-soft); font: 400 1rem/1.5 var(--font-read); }
@media (max-width: 44rem) {
  .game-sheet__head:has(.game-sheet__image) { grid-template-columns: minmax(0, 1fr); }
}

/* My games beside the section's news. */
.my-games-rail__list { margin: 0; padding: 0; list-style: none; }
.my-games-rail__game {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
}
.my-games-rail__game:first-child { padding-top: 0; }
.my-games-rail__game > a { font: 700 1rem/1.25 var(--font-head); text-decoration: none; }
.my-games-rail__game > a:hover { text-decoration: underline; }
.my-games-rail__game .rail-note { flex-basis: 100%; margin: 0; }

/* ---------- BGN calendar ---------- */
.calendar { max-width: 56rem; margin-top: clamp(1.5rem, 4vw, 3rem); }
.calendar__list { margin: 1rem 0 0; padding: 0; list-style: none; }
.calendar__game {
  display: grid;
  grid-template-columns: 6.5rem 7.5rem minmax(0, 1fr) auto;
  gap: 0.5rem 1rem;
  align-items: center;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule);
}
.calendar__game.is-mine { padding-left: 0.75rem; box-shadow: inset 3px 0 0 var(--accent-text); }
.calendar__date { font: 700 0.9375rem/1.2 var(--font-head); font-variant-numeric: tabular-nums; }
.calendar__image { width: 7.5rem; height: auto; aspect-ratio: 231 / 87; object-fit: cover; background: var(--wash); }
.calendar__name { font: 700 1rem/1.25 var(--font-head); text-decoration: none; }
.calendar__name:hover { text-decoration: underline; }
.calendar__action { padding: 0.5rem 0; color: var(--accent-text); font: 700 0.9375rem/1.2 var(--font-head); }
.calendar__action.is-followed { color: var(--ink-2); }
@media (max-width: 40rem) {
  .calendar__game { grid-template-columns: 6rem minmax(0, 1fr); }
  .calendar__date { grid-column: 1 / -1; }
  .calendar__action { grid-column: 2; justify-self: start; padding: 0; }
}
.game-tile.is-disabled { color: var(--ink-2); }
.game-tile.is-disabled .game-tile__mark { color: var(--rule); }
.game-finder .game-limit { margin: 0 0 1rem; }

.matches__day,
.calendar__heading {
  margin: 2rem 0 0;
  padding-top: 0.6rem;
  border-top: 3px solid var(--ink);
  font: 800 var(--step-3)/1.1 var(--font-head);
  font-stretch: 85%;
  letter-spacing: -0.01em;
}
.matches__group { margin-top: 1.75rem; }
.matches__competition {
  margin: 0;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--ink);
  font: 700 0.9375rem/1.2 var(--font-head);
}
.matches .fixture { padding: 0.8rem 0; }
.matches .fixture__line { font-size: 1rem; }
.matches__empty {
  display: grid;
  justify-items: start;
  gap: 1rem;
  margin-top: 1.25rem;
  font: 400 var(--step-1)/1.6 var(--font-read);
}
.matches__empty p { margin: 0; }

/* Club list */
.clubs, .free, .my-games { margin-top: clamp(1.5rem, 4vw, 3rem); }
.page-title {
  margin: 0 0 0.75rem;
  font: 800 clamp(2.25rem, 1.5rem + 3vw, 4rem)/1 var(--font-head);
  font-stretch: 72%;
  letter-spacing: -0.02em;
}
.clubs__intro,
.page-intro {
  max-width: 60ch;
  margin: 0 0 var(--space);
  color: var(--ink-soft);
  font: 400 var(--step-1)/1.55 var(--font-read);
}
.clubs__league + .clubs__league { margin-top: var(--space); }
.clubs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.club-pick {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.75rem;
  padding: 0.6rem 0.75rem 0.85rem;
  border: 1px solid var(--rule);
  color: var(--ink);
  font: 700 0.9375rem/1.2 var(--font-head);
  text-decoration: none;
}
.club-pick__crest { width: 2rem; height: 2rem; object-fit: contain; }
/* The club's two kit colours as a band along the bottom edge. */
.club-pick__colours {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  height: 0.3rem;
}
.club-pick__colours::before { content: ""; flex: 3; background: var(--plane); }
.club-pick__colours::after { content: ""; flex: 2; background: var(--plane-2, var(--on-plane)); }
.club-pick:hover { border-color: var(--ink); }
.club-pick:hover .club-pick__name { text-decoration: underline; }
/* The chosen club wears its colours. */
.club-pick[aria-current] {
  border-color: var(--plane);
  background: var(--plane);
  color: var(--on-plane);
}
.clubs__current {
  margin: calc(var(--space) * -0.5) 0 var(--space);
  padding: 0.35rem 0 0.35rem 1rem;
  border-left: 3px solid var(--accent-text);
  font: 600 0.9375rem/1.5 var(--font-head);
}
.clubs__current a { display: inline-block; padding-block: 0.25rem; white-space: nowrap; }

/* ---------- Pagination ---------- */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  margin-top: var(--space);
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font: 600 1rem/1 var(--font-head);
}
.pager a, .pager__gap {
  display: inline-grid;
  place-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 0.6rem;
  text-decoration: none;
}
.pager a:hover { background: var(--wash); }
.pager a[aria-current="page"] { background: var(--ink); color: var(--paper); }
.pager__step { font-weight: 700; }
.pager__step[rel="next"] { margin-left: auto; }

/* ---------- Article reader ---------- */
.reader {
  max-width: 47rem;
  margin: clamp(1.5rem, 4vw, 3rem) auto 0;
}
.reader__headline {
  margin: 0 0 1rem;
  font: 800 clamp(2rem, 1.1rem + 3vw, 3.75rem)/1.02 var(--font-head);
  font-stretch: 78%;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.reader__dek {
  margin: 0 0 1.25rem;
  color: var(--ink-soft);
  font: 400 1.375rem/1.45 var(--font-read);
}
.verify {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding: 1rem 0;
  border-block: 1px solid var(--rule);
}
.verify__list {
  margin: 0;
  color: var(--ink-2);
  font: 400 0.9375rem/1.5 var(--font-read);
}
.verify__list a { color: var(--ink); font-weight: 600; }
.reader__media { aspect-ratio: 16 / 9; margin-top: 2rem; }
.reader__body {
  max-width: 68ch;
  margin-top: 2rem;
  font: 400 var(--step-1)/1.7 var(--font-read);
}
.reader__body p { margin: 0 0 1.25em; }
.reader__notice {
  margin-top: 2rem;
  padding: 1rem 0;
  font: 400 var(--step-1)/1.6 var(--font-read);
}
.source-note {
  display: grid;
  justify-items: start;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 3px solid var(--ink);
}
.source-note p {
  max-width: 60ch;
  margin: 0;
  color: var(--ink-2);
  font: 400 0.9375rem/1.5 var(--font-read);
}
.related { max-width: 47rem; margin: var(--space) auto 0; }
.related .wire { margin-top: 0; border-top: 0; }

/* ---------- Empty and error states ---------- */
.empty {
  display: grid;
  justify-items: start;
  gap: 1.25rem;
  max-width: 40rem;
  margin: var(--space) 0;
  font: 400 var(--step-1)/1.6 var(--font-read);
}
.empty p { margin: 0; }
.empty__title {
  margin: 0;
  font: 800 clamp(2.25rem, 1.5rem + 3vw, 4rem)/1 var(--font-head);
  font-stretch: 72%;
}

/* ---------- Footer ---------- */
.colophon {
  margin-top: calc(var(--space) * 1.5);
  background: var(--night);
  color: var(--on-night);
}
.colophon__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 46rem);
  gap: 1.25rem 2.5rem;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 2.5rem var(--gutter) 3rem;
}
.colophon__text { display: grid; gap: 0.75rem; }
/* A black plane on the black footer needs its terminal-window frame to show. */
.colophon .brand__mark { border: 1px solid var(--on-plane); }
.colophon p {
  margin: 0;
  color: #e0e0e0;
  font: 400 0.9375rem/1.6 var(--font-read);
}
.colophon .colophon__small { color: #b8b8b8; font: 500 var(--step--1)/1.4 var(--font-head); }
.colophon :focus-visible { outline-color: var(--on-night); }

/* ---------- Responsive ---------- */
@media (max-width: 68rem) {
  .masthead {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand tools" "sections sections";
    padding-bottom: 0;
  }
  .sections { margin-top: 0.5rem; }
  .desk { grid-template-columns: minmax(0, 1fr); }
  .desk__latest, .desk__rail { grid-column: 1 / -1; }
  .desk__rail { position: static; margin-top: var(--space); padding-left: 0; border-left: 0; }
  .desk--rail-only .desk__rail { grid-column: 1 / -1; margin-top: 0; }
}

@media (max-width: 54rem) {
  .bulletin__panel, .bulletin__media { grid-column: 1 / -1; }
  .bulletin__media { order: -1; aspect-ratio: 16 / 9; }
  .bulletin__panel { min-height: 0; justify-content: flex-start; }
  /* Corroboration stays inside the first phone screen, above the summary. */
  .bulletin__foot { order: 1; }
  .bulletin__dek { order: 2; }
}

@media (max-width: 40rem) {
  .brand__name { font-size: 0.9375rem; }
  .brand__mark { font-size: 1.5rem; }
  .bulletin__dek {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }
  .spots { grid-template-columns: minmax(0, 1fr); }
  .wire__row { grid-template-columns: 3.5rem minmax(0, 1fr) 5.5rem; gap: 0.85rem; }
  .colophon__inner { grid-template-columns: minmax(0, 1fr); }
  .pager__step[rel="next"] { margin-left: 0; }
}

@media (max-width: 26rem) {
  .brand__name { display: none; }
  .wire__row { grid-template-columns: 3.25rem minmax(0, 1fr); }
  .wire__thumb { display: none; }
}

/* ---------- Portal: the way into every zone ----------
   Zone cards only use colours that do not change with the theme (the black plane and the
   zone's bright accent); their links are in ink, underlined in the zone's accent. */
.portal-hero { max-width: 48rem; margin-top: clamp(1.5rem, 4vw, 3rem); }
.portal-hero__title {
  margin: 0 0 0.75rem;
  font: 800 clamp(2.25rem, 1.5rem + 3vw, 4rem)/1 var(--font-head);
  font-stretch: 72%;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.portal {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 2.5rem;
  margin-top: var(--space);
}
.portal__zones {
  grid-column: 1 / span 8;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 2.5rem 1.75rem;
  align-content: start;
}
.portal:not(:has(.portal__rail)) .portal__zones { grid-column: 1 / -1; }
.portal__rail {
  grid-column: 9 / -1;
  align-self: start;
  position: sticky;
  top: 1rem;
  padding-left: 2rem;
  border-left: 1px solid var(--rule);
}
.portal-zone { display: flex; flex-direction: column; gap: 0.85rem; }
.portal-zone__head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  background: var(--plane);
  text-decoration: none;
}
.portal-zone__mark {
  padding: 0.3rem 0.45rem 0.25rem;
  border: 1px solid var(--on-plane);
  color: var(--on-plane);
  font: 900 1.25rem/1 var(--font-head);
  font-stretch: 72%;
}
.portal-zone__label { display: flex; flex-direction: column; gap: 0.15rem; }
.portal-zone__name {
  color: #ffffff;
  font: 800 var(--step-2)/1.05 var(--font-head);
  font-stretch: 85%;
}
.portal-zone__topic { color: var(--on-plane-soft); font: 500 var(--step--1)/1.3 var(--font-head); }
.portal-zone__head:hover .portal-zone__name { text-decoration: underline; text-decoration-color: var(--on-plane); }
.portal-zone__head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.portal-zone__media { aspect-ratio: 16 / 9; margin: 0; }
.portal-zone__lead { display: flex; flex-direction: column; gap: 0.6rem; }
.portal-zone__headline { margin: 0; font: 700 var(--step-1)/1.2 var(--font-head); text-wrap: pretty; }
.portal-zone__headline a,
.portal-zone__list a,
.portal-zone__enter {
  color: var(--ink);
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}
.portal-zone__headline a,
.portal-zone__list a { text-decoration-line: none; }
.portal-zone__headline a:hover,
.portal-zone__list a:hover { text-decoration-line: underline; }
.portal-zone__list { margin: 0; padding: 0; list-style: none; }
.portal-zone__list li { padding: 0.55rem 0; border-top: 1px solid var(--rule); font: 600 0.9375rem/1.3 var(--font-head); }
.portal-zone__enter { align-self: flex-start; margin-top: auto; padding-block: 0.4rem; font: 700 0.9375rem/1.2 var(--font-head); }
.portal__zone-tag {
  display: inline-block;
  margin: 0 0 0.35rem;
  padding: 0.1rem 0.4rem;
  background: var(--plane);
  color: var(--on-plane);
  font: 700 0.75rem/1.3 var(--font-head);
  letter-spacing: 0.02em;
}
@media (max-width: 64rem) {
  /* One column: twelve columns would keep their eleven gaps and overflow a phone. */
  .portal { display: block; }
  .portal__rail { position: static; margin-top: var(--space); padding-left: 0; border-left: 0; }
}