/* BBC brand tokens, from unfairly.ai/brand-guidelines/bbc (checked 2026-10-31).
   Sizes, spacing and components were measured on https://www.bbc.com/ (2026-10-31) (headless Chromium at 1440x900 and 390x844, computed styles, bounding boxes and pixel samples, 2026-10-31).
   Fonts: --font-* use the open stand-ins (load them from Google Fonts); --font-*-original name BBC's own faces, which you may only use if you have a licence. */
:root {
  --color-paper: #FFFFFF;
  --color-surface: #F6F6F6;
  --color-ink: #202224;
  --color-ink-muted: #545658;
  --color-accent: #0071F1;
  --color-on-accent: #FFFFFF;
  --color-accent-secondary: #EB0000;
  --color-night: #141618;
  --color-on-night: #E6E8EA;
  --color-page-white: #FFFFFF;
  --color-reith-ink: #202224;
  --color-black: #000000;
  --color-meta-grey: #545658;
  --color-hairline: #E6E8EA;
  --color-section-rule: #3A3C3E;
  --color-night: #141618;
  --color-muted-on-night: #AFB1B4;
  --color-subscribe-blue: #0071F1;
  --color-live-red: #EB0000;
  --color-ad-grey: #F6F6F6;
  --color-save-ring: #D2D4D6;
  --color-button-subscribe-fill: #0071F1;
  --color-button-subscribe-text: #FFFFFF;
  --color-button-subscribe-ring: #0071F1;
  --color-button-outline-text: #000000;
  --color-button-outline-ring: #000000;
  --color-button-text-text: #000000;
  --color-button-languages-fill: #E6E8EA;
  --color-button-languages-text: #202224;
  --color-save-pill-ring: #D2D4D6;
  --color-play-badge-fill: #FFFFFF;
  --color-button-primary-fill: #0071F1;
  --color-button-primary-text: #FFFFFF;
  --color-button-primary-ring: #0071F1;
  --color-button-secondary-text: #000000;
  --color-button-secondary-ring: #000000;
  --font-display: Literata, Georgia, "Times New Roman", serif;
  --font-display-original: "BBC Reith Serif", Literata, Georgia, "Times New Roman", serif;
  --font-body: Literata, Georgia, "Times New Roman", serif;
  --font-body-original: "BBC Reith Serif", Literata, Georgia, "Times New Roman", serif;
  --font-mono: "Public Sans", Helvetica, Arial, sans-serif;
  --font-mono-original: "BBC Reith Sans", "Public Sans", Helvetica, Arial, sans-serif;
  --page-margin: 96px;
  --section-padding: 48px;
  --container-max: 1248px;
  --card-gap: 16px;
  --grid-gutter: 16px;
  --grid-columns: 4;
  --text-headline-l-size: 28px;
  --text-headline-l-line: 1.143;
  --text-headline-l-weight: 550;
  --text-headline-size: 18px;
  --text-headline-line: 1.222;
  --text-headline-weight: 550;
  --text-summary-size: 14px;
  --text-summary-line: 1.286;
  --text-summary-weight: 400;
  --text-summary-tracking: 0.14px;
  --text-tile-title-size: 14px;
  --text-tile-title-line: 1.286;
  --text-tile-title-weight: 550;
  --text-tile-title-tracking: -0.28px;
  --text-label-size: 15px;
  --text-label-line: 1.333;
  --text-label-weight: 800;
  --text-label-tracking: 0.75px;
  --text-nav-size: 14px;
  --text-nav-line: 1.286;
  --text-nav-weight: 600;
  --text-button-size: 16px;
  --text-button-line: 1.125;
  --text-button-weight: 600;
  --text-meta-size: 12px;
  --text-meta-line: 1.167;
  --text-meta-weight: 400;
  --text-live-size: 28px;
  --text-live-line: 1.143;
  --text-live-weight: 700;
  --radius-button-subscribe: 0px;
  --radius-button-outline: 0px;
  --radius-button-text: 0px;
  --radius-button-languages: 0px;
  --radius-save-pill: 999px;
  --radius-play-badge: 0px;
  --radius-image: 0px;
  --radius-button-primary: 0px;
  --radius-button-secondary: 0px;
  --ease-masthead-collapse: ease;
  --duration-masthead-collapse: 500ms;
  --ease-nav-slide: ease;
  --duration-nav-slide: 500ms;
  --icon-inline: 18px;
  --icon-badge: 20px;
  --icon-chevron: 20px;
}
/* Phone values measured at 390px. BBC's breakpoint wasn't measured: 600px is our default. */
@media (max-width: 600px) {
  :root {
    --page-margin: 16px;
    --section-padding: 32px;
    --text-headline-l-size: 24px;
    --text-label-size: 14px;
    --text-live-size: 24px;
  }
}
.button-subscribe {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 34px; padding: 0 14px; border-radius: 0px;
  background: #0071F1; color: #FFFFFF;
  box-shadow: inset 0 0 0 2px #0071F1;
  font: 600 16px/1 var(--font-body);
}
.button-outline {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 34px; padding: 0 14px; border-radius: 0px;
  background: transparent; color: #000000;
  box-shadow: inset 0 0 0 2px #000000;
  font: 600 16px/1 var(--font-body);
}
.button-text {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 34px; padding: 0 14px; border-radius: 0px;
  background: transparent; color: #000000;
  font: 600 16px/1 var(--font-body);
}
.button-languages {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 44px; padding: 0 12px; border-radius: 0px;
  background: #E6E8EA; color: #202224;
  font: 600 14px/1 var(--font-body);
}
.button-primary {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 34px; padding: 0 14px; border-radius: 0px;
  background: #0071F1; color: #FFFFFF;
  box-shadow: inset 0 0 0 2px #0071F1;
  font: 600 16px/1 var(--font-body);
}
.button-secondary {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 34px; padding: 0 14px; border-radius: 0px;
  background: transparent; color: #000000;
  box-shadow: inset 0 0 0 2px #000000;
  font: 600 16px/1 var(--font-body);
}