/* WorldStreaks: the one copy of the look every page shares. Paper, ink and type are the same everywhere; each section
 * has its own accent (links, the top band, the selected tab, its favicon's tall block), set by <html data-section>.
 * Sections copy this file at build time (tools/chrome.py, run by each section's build), so a change here reaches them on
 * their next deploy. Every accent is at least 6.2:1 on the paper in light mode and 8.2:1 in dark (checked 10 Oct 2026). */
:root {
  --paper: #F2EDE1; --paper-2: #E8E1D0; --ink: #17150F; --muted: #5A5446; --rule: rgba(23,21,15,.16); --mark: #E7D9A8;
  --accent: #17150F; --accent-ink: #F2EDE1;
  --display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --body: "Source Serif 4", Georgia, "Times New Roman", serif;
  color-scheme: light;
}
[data-section="ie-gaa"] { --accent: #1C5A31; }
[data-section="ie-weather"] { --accent: #1F4A73; }
[data-section="uk-premier-league"] { --accent: #4E2577; }
[data-section="world-world-cup"] { --accent: #7A4106; }
[data-section="world-olympics"] { --accent: #8A1C2B; }
[data-section="world-f1"] { --accent: #A4161A; }
@media (prefers-color-scheme: dark) {
  :root { --paper: #13120E; --paper-2: #1E1C16; --ink: #EDE7D8; --muted: #A9A18D; --rule: rgba(237,231,216,.18); --mark: #3A3520;
    --accent: #EDE7D8; --accent-ink: #13120E; color-scheme: dark; }
  [data-section="ie-gaa"] { --accent: #86CD9A; }
  [data-section="ie-weather"] { --accent: #8DBDE8; }
  [data-section="uk-premier-league"] { --accent: #C6A8EA; }
  [data-section="world-world-cup"] { --accent: #EFB36A; }
  [data-section="world-olympics"] { --accent: #F2A2AC; }
  [data-section="world-f1"] { --accent: #FF9C8F; }
}
/* the page itself, the same on every page */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.55 var(--body); }
a { color: var(--accent); text-underline-offset: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 18px; }
/* a thin band in the section's colour across the top of every page */
body::before { content: ""; display: block; height: 6px; background: var(--accent); }
/* anything marked hidden stays hidden, whatever display a page's own rules give it (the quiz answers showed through
 * their hidden attribute until 10 Oct 2026) */
[hidden] { display: none !important; }

/* the header on every page (tools/header.html, written into each page by tools/chrome.py): the logo, home from anywhere,
 * a 48px-tall target; the menu, open in a row on wide screens and behind "Menu" on narrow ones (a details element, so it
 * works without scripts) */
.ws-top { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; padding-block: 6px; border-bottom: 1px solid var(--rule); }
.ws-logo { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding-right: 6px; color: var(--ink); text-decoration: none; font: 700 27px/1 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.ws-logo svg { width: 30px; height: 30px; flex: none; fill: var(--ink); }
.ws-logo .last { fill: var(--accent); }
.ws-logo:hover span { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; text-decoration-color: var(--accent); }
.ws-menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 2px solid var(--ink); color: var(--ink); font: 700 17px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.ws-menu summary::-webkit-details-marker { display: none; }
.ws-menu[open] summary { background: var(--ink); color: var(--paper); }
.ws-menu nav { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 3px solid var(--ink); padding-bottom: 6px; }
.ws-menu ul { list-style: none; margin: 0; padding: 0; border: 0; }
.ws-menu nav > ul > li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; border-top: 1px solid var(--rule); }
.ws-menu nav ul ul { display: flex; flex-wrap: wrap; gap: 0 18px; }
.ws-menu li { border: 0; padding: 0; }
.ws-menu a { display: inline-flex; align-items: center; min-height: 44px; padding-top: 4px; border-bottom: 4px solid transparent; color: var(--ink); text-decoration: none; font: 700 17px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.ws-menu a.ws-region { color: var(--muted); min-width: 5.5em; }
.ws-menu a:hover { color: var(--ink); border-bottom-color: var(--rule); }
.ws-menu a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
@media (min-width: 900px) {
  .ws-menu[open] > summary { display: none; }
  .ws-menu nav { position: static; padding: 0; border: 0; background: none; }
  .ws-menu nav > ul { display: flex; flex-wrap: wrap; gap: 0 24px; }
  .ws-menu nav > ul > li { border: 0; gap: 0 16px; }
  .ws-menu nav > ul > li + li { border-left: 1px solid var(--rule); padding-left: 24px; }
  .ws-menu a.ws-region { min-width: 0; }
}
/* the footer on every page (tools/footer.html): the page's own credits and notes first, then the lines every page shares */
.ws-foot { margin-top: 28px; border-top: 3px solid var(--ink); padding-block: 22px 40px; font-size: 15px; color: var(--muted); }
.ws-foot p { margin: 0 0 8px; max-width: 64ch; }
.ws-site { border-top: 1px solid var(--rule); margin-top: 10px; padding-top: 14px; }