/*
Theme Name: SportzClaus Broadcast
Theme URI: https://sportzclaus.com
Author: SportzClaus
Author URI: https://sportzclaus.com
Description: Pitchside Press — the SportzClaus sports daily. Newsprint warmth, pitch-green brand, volt-lime signal accents and condensed broadcast headlines for news, live scores and league coverage.
Version: 3.0.0
Requires at least: 5.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sportzclaus-theme
*/

/* ============================================================
   01 · DESIGN TOKENS — "PITCHSIDE PRESS"
   Warm newsprint canvas · pitch green · volt lime · vermilion
   Token NAMES are a public API consumed by the companion and
   match-centre plugins — never rename them, only retune values.
   ============================================================ */
:root {
  /* Type Scale */
  --text-2xs: 10px;
  --text-xs:  11px;
  --text-sm:  13px;
  --text-base: 15px;
  --text-md:  17px;
  --text-lg:  22px;
  --text-xl:  28px;
  --text-2xl: 38px;
  --text-3xl: clamp(48px, 7vw, 76px);

  /* Spacing */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;

  /* Surface Palette — warm newsprint */
  --canvas:    #F4F3ED;
  --paper:     #FFFFFF;
  --recess:    #EAE8DE;

  /* Ink Palette — deep pine black */
  --ink:       #131A10;
  --ink-2:     #39422F;
  --ink-3:     #6C7561;
  --ink-4:     #A6AC99;

  --rule:        rgba(25, 33, 15, 0.13);
  --rule-strong: rgba(25, 33, 15, 0.32);

  /* Brand — ONE green identity, shade-tuned per mode (2026-07-16 final):
     light = pitch green (white text on fills), dark = bright emerald of the
     SAME hue (dark ink on fills). Lime is the highlight family, never text. */
  --brand:        #0B7A43;
  --brand-soft:   #2AA36A;
  --brand-deep:   #075231;
  --brand-text:   #0B7A43;  /* brand AS TEXT (per-mode readable shade) */
  --brand-ink:    #FFFFFF;  /* text sitting ON brand fills */
  --brand-ink-soft: rgba(255, 255, 255, 0.78);
  --brand-hover:  #075231;  /* fill hover state */
  --brand-wash:   color-mix(in srgb, var(--brand) 8%, var(--canvas));
  --brand-glow:   color-mix(in srgb, var(--brand) 30%, transparent);

  /* Accent — signal vermilion (live, breaking, hot) */
  --accent:       #E8442B;
  --accent-soft:  #FF6B4A;
  --accent-glow:  color-mix(in srgb, var(--accent) 32%, transparent);

  /* Energy hues + signature gradients */
  --volt:         #C9F73C; /* stadium floodlight lime */
  --volt-ink:     #17230A; /* text sitting on volt */
  --cyan:         #12B5A2; /* pitch teal support */
  --grad-brand:   linear-gradient(135deg, #0E8A4E 0%, #075231 100%);
  --grad-cool:    linear-gradient(135deg, #0B7A43 0%, #2AA36A 100%);
  --grad-hot:     linear-gradient(135deg, #E8442B 0%, #F59E0B 100%);
  --grad-ink:     linear-gradient(150deg, #0E130A 0%, #22301B 100%);
  --grad-volt:    linear-gradient(135deg, #C9F73C 0%, #8FE046 100%);

  /* Category accents — set --cat per section/card (used as text) */
  --cat:          var(--brand-text);
  --cat-cricket:  #0B7A43;
  --cat-football: #1D5FDB;
  --cat-gaming:   #7C3AED;

  /* Fonts — Space Grotesk (display/scoreboard) + Inter (body), both modes */
  --font-display:   'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-headline:  'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-editorial: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:      'Inter', system-ui, -apple-system, sans-serif;
  --font-score:     'Space Grotesk', system-ui, -apple-system, sans-serif;

  /* Radii — sharp press edges */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* Shadow & Transitions — warm, restrained depth */
  --shadow-card: 0 1px 2px rgba(19, 26, 16, 0.04), 0 10px 24px -18px rgba(19, 26, 16, 0.22);
  --shadow-hover: 0 6px 18px -6px rgba(11, 122, 67, 0.18), 0 22px 44px -20px rgba(19, 26, 16, 0.28);
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --transition-smooth: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), transform 0.2s var(--ease-out);
}

/* ============================================================
   02 · DARK MODE — floodlit pine
   ============================================================ */
/* "Neon Broadcast" dark mode — near-black surfaces, blue identity, orange
   action, green growth. House rule: blue never blends straight into orange
   (muddy); they only meet across the hard-stop broadcast stripe. */
html[data-theme="dark"], body.dark-mode {
  --canvas:    #070A0F;   /* Ink   — page background */
  --paper:     #0C1118;   /* Ink-2 — bands, cards, tiles */
  --recess:    #10151C;   /* Ink-3 — hover state on rows/cards */

  --ink:       #F2F5F9;   /* Text-hi */
  --ink-2:     #98A2B3;   /* Text-body */
  --ink-3:     #828C9C;   /* Text-dim */
  --ink-4:     #5C6675;

  --rule:        rgba(255, 255, 255, 0.08);   /* hairlines */
  --rule-strong: rgba(255, 255, 255, 0.16);

  /* Same green identity, brightened for dark surfaces: emerald reads 7:1 as
     text on near-black; fills take near-black ink. Lime stays the highlight. */
  --brand:        #2FC474;   /* identity emerald: fills, focus, monogram */
  --brand-soft:   #57DD96;   /* lighter: link hovers */
  --brand-deep:   #1FA35F;   /* mid: hover text, borders */
  --brand-text:   #2FC474;   /* brand AS TEXT on dark */
  --brand-ink:    #04150C;   /* text sitting ON brand fills */
  --brand-ink-soft: rgba(4, 21, 12, 0.75);
  --brand-hover:  #57DD96;   /* fill hover state */
  --brand-wash:   color-mix(in srgb, var(--brand) 14%, var(--canvas));
  --brand-glow:   color-mix(in srgb, var(--brand) 32%, transparent);

  --accent:       #E8442B;   /* action red-orange: CTAs, LIVE dot, hovers */
  --accent-soft:  #FF6B4A;
  --accent-glow:  color-mix(in srgb, var(--accent) 40%, transparent);

  --volt:         #C9F73C;   /* highlight lime: stats, ticker, meters */
  --volt-ink:     #17230A;   /* text sitting on lime */
  --cyan:         #57DD96;

  --grad-brand:   linear-gradient(135deg, #1FA35F 0%, #2FC474 100%);   /* aurora */
  --grad-cool:    linear-gradient(135deg, #2FC474 0%, #57DD96 100%);
  --grad-hot:     linear-gradient(135deg, #E8442B 0%, #C0341F 100%);   /* CTA */
  --grad-volt:    linear-gradient(135deg, #C9F73C 0%, #8FE046 100%);
  --grad-ink:     linear-gradient(150deg, #070A0F 0%, #10151C 100%);

  --cat-cricket:  #2FC474;
  --cat-football: #5B8DEF;
  --cat-gaming:   #A98BFA;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --radius-lg: 16px;
  --radius-xl: 16px;

  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 14px 32px -16px rgba(0, 0, 0, 0.66);
  --shadow-hover: 0 8px 22px -8px rgba(47, 196, 116, 0.28), 0 26px 50px -18px rgba(0, 0, 0, 0.8);
}

/* Dark mode: brighten link text so the brand stays legible on the
   near-black canvas. */
html[data-theme="dark"] a:hover,
body.dark-mode a:hover,
html[data-theme="dark"] .site-main .entry-content a,
body.dark-mode .site-main .entry-content a { color: var(--brand-soft); }

/* …but NEVER on links that sit on a lime fill — those keep their dark ink,
   or lime-on-lime turns invisible (ticker, buttons, rail links, install CTA). */
html[data-theme="dark"] :is(.sz-ticker-item a, .sz-mast-install):hover,
body.dark-mode :is(.sz-ticker-item a, .sz-mast-install):hover {
  color: var(--volt-ink, #17230A); /* these sit on the LIME band/CTA */
}
html[data-theme="dark"] :is(.btn, .card-btn, .rail-cta-btn, .reset-btn, .sz-rail-all, a.sz-tab-center, .sz-stand-squad):hover,
body.dark-mode :is(.btn, .card-btn, .rail-cta-btn, .reset-btn, .sz-rail-all, a.sz-tab-center, .sz-stand-squad):hover {
  color: var(--brand-ink, #04150C); /* these sit on emerald fills */
}

/* Category accent hooks — post_class() and section markup both emit
   `category-<slug>`, so a single utility recolors kickers, card bars
   and section slabs everywhere. */
.category-cricket  { --cat: var(--cat-cricket); }
.category-football { --cat: var(--cat-football); }
.category-gaming,
.category-esports  { --cat: var(--cat-gaming); }

/* Screen reader utility helper */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   03 · RESET & GLOBAL BASELINE
   ============================================================ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  max-width: 100%;
  overflow-x: hidden;
  /* Kill mobile-browser "font boosting" (Chrome Android / iOS text
     autosizing): it silently inflates text inside wide containers — the
     ticker marquee, carousels — making SOME items render huge while others
     stay small. CSS font-size alone cannot override it; this can. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  max-width: 100%;
  /* clip (not hidden): prevents sideways overflow WITHOUT making body a
     scroll container — overflow:hidden here silently kills position:sticky
     for every descendant (article rail, prediction rail). */
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--canvas);
  font-size: 15.5px;
  line-height: 1.6;
  letter-spacing: 0.001em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  width: 100%;
  position: relative;
  transition: var(--transition-smooth);
}

/* Stadium gradient wash + newsprint halftone dots.
   Layer order (top → bottom): dots · pitch-green corner glow · volt corner
   glow · base diagonal gradient · solid canvas fallback. Body itself also
   carries `background: var(--canvas)`, so if color-mix is unsupported the
   page still shows a solid canvas. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(color-mix(in srgb, var(--ink) 8%, transparent) 1.1px, transparent 1.5px),
    radial-gradient(ellipse 62% 48% at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 66%),
    radial-gradient(ellipse 58% 46% at 0% 100%, color-mix(in srgb, var(--volt) 15%, transparent) 0%, transparent 64%),
    linear-gradient(160deg, color-mix(in srgb, var(--accent) 5%, var(--canvas)) 0%, var(--canvas) 42%, color-mix(in srgb, var(--recess) 55%, var(--canvas)) 100%),
    var(--canvas);
  background-size: 22px 22px, 100% 100%, 100% 100%, 100% 100%, auto;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, repeat;
  pointer-events: none;
}

html[data-theme="dark"] body::before,
body.dark-mode::before {
  background:
    radial-gradient(rgba(255, 255, 255, 0.06) 1.1px, transparent 1.5px),
    radial-gradient(ellipse 66% 52% at 100% 0%, color-mix(in srgb, var(--brand) 26%, transparent) 0%, transparent 66%),
    radial-gradient(ellipse 60% 48% at 0% 100%, color-mix(in srgb, var(--volt) 14%, transparent) 0%, transparent 62%),
    linear-gradient(160deg, color-mix(in srgb, var(--brand) 12%, var(--canvas)) 0%, var(--canvas) 46%, #05070B 100%),
    var(--canvas);
  background-size: 22px 22px, 100% 100%, 100% 100%, 100% 100%, auto;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, repeat;
}

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

:focus-visible {
  outline: 2px solid var(--brand-text);
  outline-offset: 2px;
  border-radius: 2px;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.18s var(--ease-out), background-color 0.18s var(--ease-out), border-color 0.18s var(--ease-out);
}

a:hover { color: var(--brand-deep); }

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headline);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

p { margin: 0; }

ul, ol { list-style: none; }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--canvas); }
::-webkit-scrollbar-thumb {
  background: var(--ink-4);
  border-radius: 8px;
  border: 3px solid var(--canvas);
}
::-webkit-scrollbar-thumb:hover { background: var(--brand); }

/* ============================================================
   04 · LAYOUT CONTAINERS — uniform 1100px press column
   ============================================================ */
.main-content,
.page-main,
.single-post-main {
  max-width: var(--container-max, 1100px);
  margin: 0 auto;
  padding: 0 var(--space-5);
  width: 100%;
}

.main-content { padding-top: 26px; padding-bottom: 60px; }

/* ============================================================
   05 · BUTTONS & FORMS
   Deliberately NO bare `button {}` gradient rule — that broke
   plugin buttons in the previous era. Style named classes only.
   ============================================================ */
.btn,
.reset-btn,
.card-btn,
.rail-cta-btn,
.sz-contact-submit-btn,
.form-submit-wrap button,
.comment-form input[type="submit"],
.search-submit,
.sz-no-results-search .search-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-headline);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-ink, #FFFFFF);
  background: var(--brand);
  border: none;
  border-radius: var(--radius-sm);
  padding: 11px 22px;
  cursor: pointer;
  transition: var(--transition-smooth), box-shadow 0.25s var(--ease-out);
  text-decoration: none;
}

.btn:hover,
.reset-btn:hover,
.card-btn:hover,
.rail-cta-btn:hover,
.sz-contact-submit-btn:hover,
.form-submit-wrap button:hover,
.comment-form input[type="submit"]:hover,
.search-submit:hover {
  background: var(--brand-hover, var(--brand-deep));
  color: var(--brand-ink, #FFFFFF);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px var(--brand-glow);
}

.btn:active { transform: translateY(0); }

/* Ghost variant */
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule-strong);
}
.btn-ghost:hover { border-color: var(--brand-text); color: var(--brand-text); background: var(--brand-wash); }

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="password"],
input[type="number"],
textarea,
select {
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--ink);
  background: var(--inp-bg, var(--paper));
  border: 1px solid var(--inp-border, var(--rule-strong));
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  width: 100%;
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--brand-text);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}

label {
  font-family: var(--font-headline);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ============================================================
   06 · EDITION STRIP (dark utility bar above the masthead)
   Pinned dark in both modes — the site's "press banner".
   ============================================================ */
.sz-edition-strip {
  background: #0E130A;
  border-bottom: 1px solid rgba(201, 247, 60, 0.18);
  color: rgba(238, 244, 224, 0.78);
}

.sz-edition-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 7px var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-score);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.sz-edition-tag { color: rgba(238, 244, 224, 0.5); }

.sz-edition-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #C9F73C;
  font-weight: 700;
}
.sz-edition-live:hover { color: #E2FF7A; }

.sz-edition-live .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FF5A3C;
  box-shadow: 0 0 0 0 rgba(255, 90, 60, 0.6);
  animation: sz-live-pulse 1.6s infinite;
}

@keyframes sz-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 90, 60, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(255, 90, 60, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 90, 60, 0); }
}

/* Optional legacy top bar (Customizer toggle) */
.sz-top-bar {
  background: #0E130A;
  color: #EFF3E4;
  padding: 8px var(--space-5);
  font-family: var(--font-score);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-align: center;
}

/* ============================================================
   07 · MASTHEAD — paper deck, heavy press rule
   ============================================================ */
.mast {
  background: var(--paper);
  border-bottom: 3px solid var(--ink);
  position: relative;
  z-index: 200;
}

.mast-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px var(--space-5);
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 64px;
}

.mast-brand { border: none; }

.mast-logo {
  display: flex;
  align-items: center;
}

.mast-logo img {
  height: 42px;
  width: auto;
  max-width: 210px;
  object-fit: contain;
}

/* Theme-mode logo swap */
.logo-dark-img { display: none; }
html[data-theme="dark"] .logo-light-img,
body.dark-mode .logo-light-img { display: none; }
html[data-theme="dark"] .logo-dark-img,
body.dark-mode .logo-dark-img { display: block; }

/* --- Primary navigation ------------------------------------ */
.header-navigation { overflow: visible; }

.nav-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.nav-menu > li { position: relative; }

.nav-menu > li > a {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-headline);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 8px 12px 10px;
  position: relative;
  border: none;
}

.nav-menu > li > a::after {
  content: '';
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 2px;
  height: 3px;
  background: var(--volt);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s var(--ease-out);
}

.nav-menu > li > a:hover { color: var(--ink); }
.nav-menu > li > a:hover::after { transform: scaleX(1); }

.nav-menu > li.current-menu-item > a,
.nav-menu > li.current_page_item > a {
  color: var(--ink);
}
.nav-menu > li.current-menu-item > a::after,
.nav-menu > li.current_page_item > a::after { transform: scaleX(1); }

/* Dropdown submenus */
.nav-menu .sub-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 8px;
  min-width: 210px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--brand);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-hover);
  padding: 6px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out), visibility 0.18s;
  z-index: 300;
}

.nav-menu li:hover > .sub-menu,
.nav-menu li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-menu .sub-menu a {
  display: block;
  padding: 9px 16px;
  font-family: var(--font-headline);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-2);
  border: none;
}
.nav-menu .sub-menu a:hover { background: var(--brand-wash); color: var(--brand-text); }

/* Parent items with a dropdown get a chevron. The volt underline already
   owns ::after, so the caret rides ::before and is pushed AFTER the label
   with flex order (the link is inline-flex). Flips up while the menu is open. */
.nav-menu > li.menu-item-has-children > a::before {
  content: '';
  order: 1;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  margin-top: -3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.18s var(--ease-out), margin-top 0.18s var(--ease-out);
  flex-shrink: 0;
}

.nav-menu > li.menu-item-has-children:hover > a::before,
.nav-menu > li.menu-item-has-children:focus-within > a::before {
  transform: rotate(225deg);
  margin-top: 3px;
}

/* --- Masthead action buttons -------------------------------- */
.header-search-btn,
.mobile-menu-toggle-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  color: var(--ink-2);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: var(--transition-smooth);
  padding: 0;
  flex-shrink: 0;
}

.header-search-btn:hover,
.mobile-menu-toggle-btn:hover {
  border-color: var(--brand-text);
  color: var(--brand-text);
  transform: scale(1.05);
}

.header-search-btn .close-icon { display: none; }
.header-search-btn.active .close-icon { display: block; }
.header-search-btn.active .search-icon { display: none; }
.header-search-btn.active {
  background: #131A10;
  color: #C9F73C;
  border-color: #131A10;
}

.mobile-menu-toggle-btn { display: none; }
.mobile-menu-toggle-btn.active {
  background: #131A10;
  color: #C9F73C;
  border-color: #131A10;
}

/* --- Drop-down search deck ---------------------------------- */
.header-search-bar {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--paper);
  border-bottom: 3px solid var(--ink);
  box-shadow: 0 24px 40px -22px rgba(19, 26, 16, 0.4);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s var(--ease-out), opacity 0.25s var(--ease-out);
  z-index: 190;
}

.header-search-bar.active {
  max-height: 130px;
  opacity: 1;
}

.search-bar-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 22px var(--space-5) 26px;
}

.search-input-wrapper {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.search-input-wrapper .search-field {
  flex: 1;
  font-size: 16px;
  font-weight: 500;
  border-width: 2px;
  border-color: var(--ink);
  border-radius: var(--radius-sm);
  background: var(--paper);
}

.search-input-wrapper .search-submit {
  flex-shrink: 0;
  width: auto;
  padding: 0 22px;
}

/* --- Mobile navigation drawer ------------------------------- */
.mobile-navigation {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--paper);
  border-bottom: 3px solid var(--ink);
  box-shadow: 0 30px 46px -20px rgba(19, 26, 16, 0.45);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.32s var(--ease-out), opacity 0.25s var(--ease-out);
  z-index: 195;
}

.mobile-navigation.active {
  max-height: min(75vh, 560px);
  opacity: 1;
  overflow-y: auto;
}

.mobile-menu-inner { padding: 14px var(--space-5) 22px; }

/* Drawer search — replaces the header search icon on phones */
.mobile-menu-search {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ink);
}

.mobile-menu-search input {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 500;
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  padding: 10px 13px;
  background: var(--paper);
  color: var(--ink);
}

.mobile-menu-search input:focus {
  outline: none;
  border-color: var(--brand-text);
}

.mobile-menu-search button {
  flex-shrink: 0;
  width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand);
  color: var(--volt-ink, #17230A);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.mobile-menu-search button:active { background: var(--brand-deep); }

.mobile-nav-menu li + li { border-top: 1px solid var(--rule); }

.mobile-nav-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 4px;
  font-family: var(--font-headline);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
  border: none;
}

.mobile-nav-menu a::after {
  content: '→';
  font-size: 15px;
  color: var(--ink-4);
  transition: color 0.18s, transform 0.18s;
}

.mobile-nav-menu a:hover { color: var(--brand-deep); }
.mobile-nav-menu a:hover::after { color: var(--volt); transform: translateX(3px); }

/* In the drawer, submenus render expanded right below their parent —
   so parents point down, not sideways. */
.mobile-nav-menu li.menu-item-has-children > a::after { content: '↓'; }
.mobile-nav-menu li.menu-item-has-children > a:hover::after { transform: translateY(2px); }

.mobile-nav-menu .sub-menu {
  padding-left: 14px;
  border-top: 1px solid var(--rule);
}
.mobile-nav-menu .sub-menu a { font-size: 14px; color: var(--ink-2); }

.mobile-menu-socials {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 3px solid var(--ink);
}

.mobile-social-link {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pill);
  color: var(--ink-2);
}
.mobile-social-link:hover {
  background: var(--ink);
  color: var(--volt);
  border-color: var(--ink);
}

/* ============================================================
   08 · BREAKING TICKER — volt floodlight strip
   ============================================================ */
.sz-breaking-ticker {
  display: flex;
  align-items: stretch;
  background: var(--volt);
  border-bottom: 1px solid rgba(23, 35, 10, 0.35);
  overflow: hidden;
  position: relative;
  z-index: 5;
}

.sz-ticker-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  background: #0E130A;
  color: #C9F73C;
  font-family: var(--font-headline);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  padding: 9px 26px 9px max(calc((100vw - 1100px) / 2 + 20px), 20px);
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  position: relative;
  z-index: 2;
}

.sz-ticker-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FF5A3C;
  animation: sz-live-pulse 1.6s infinite;
  flex-shrink: 0;
}

.sz-ticker-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 30px), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 30px), transparent);
}

.sz-ticker-track {
  display: flex;
  width: max-content;
  animation: sz-ticker-marquee 44s linear infinite;
}

.sz-breaking-ticker:hover .sz-ticker-track { animation-play-state: paused; }

@keyframes sz-ticker-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.sz-ticker-scroll-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.sz-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 32px 0 14px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--volt-ink);
  white-space: nowrap;
}

/* Pin the link typography explicitly — headlines must render at the same
   mid size and theme font as the item shell, never inherit from elsewhere. */
.sz-ticker-item a {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--volt-ink);
  border: none;
}
.sz-ticker-item a:hover { text-decoration: underline; text-decoration-thickness: 2px; }

.sz-ticker-badge {
  font-family: var(--font-score);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 3px;
  background: var(--volt-ink);
  color: var(--volt);
  flex-shrink: 0;
}

.sz-ticker-badge.upcoming {
  background: transparent;
  color: var(--volt-ink);
  box-shadow: inset 0 0 0 1.5px var(--volt-ink);
}

/* ============================================================
   09 · SECTION HEADERS — press rules + skewed slab
   ============================================================ */
.section-title {
  display: flex;
  align-items: center;
  gap: 13px;
  font-family: var(--font-headline);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 12px;
  border-bottom: 3px solid var(--ink);
  margin-bottom: 24px;
}

.section-title::before {
  content: '';
  width: 11px;
  height: 26px;
  background: var(--cat, var(--brand));
  transform: skewX(-14deg);
  flex-shrink: 0;
}

.section-title a {
  color: inherit;
  border: none;
}
.section-title a:hover { color: var(--cat, var(--brand)); }

.section-title span { color: var(--cat, var(--brand)); }

.accent-gradient {
  background: var(--grad-cool);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Kicker — small colored eyebrow above blocks */
.category-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-headline);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cat, var(--brand));
  border: none;
  width: fit-content;
}

.category-badge::before {
  content: '';
  width: 16px;
  height: 3px;
  background: currentColor;
  flex-shrink: 0;
}

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

/* ============================================================
   10 · NEWS CARDS — the workhorse
   ============================================================ */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

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

/* Single-story category: lay the lone card out as a horizontal lead row
   instead of one gigantic stacked card. (card-link carries an inline
   flex-direction:column, hence the !important.) */
.news-grid.cols-1 .news-card .card-link { flex-direction: row !important; }
.news-grid.cols-1 .news-card .card-img-holder {
  flex: 0 0 46%;
  aspect-ratio: 16 / 9;
  min-height: 0;
}
.news-grid.cols-1 .news-card .card-body {
  justify-content: center;
  padding: 24px 28px;
}
.news-grid.cols-1 .news-card .card-title { font-size: clamp(22px, 3vw, 30px); }

.news-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out), border-color 0.28s var(--ease-out);
}

.news-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--cat, var(--brand));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.34s var(--ease-out);
  z-index: 3;
}

.news-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--rule-strong);
}
.news-card:hover::before { transform: scaleX(1); }

.news-card .card-link { border: none; color: inherit; }

.card-img-holder {
  position: relative;
  aspect-ratio: 16 / 9.4;
  background: var(--recess);
  overflow: hidden;
  border: none;
  display: block;
}

.card-img-holder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}

.news-card:hover .card-img-holder img { transform: scale(1.045); }

.card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px 16px;
  flex: 1;
}

.card-title {
  font-family: var(--font-headline);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.18;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.18s var(--ease-out);
}

.news-card:hover .card-title { color: var(--cat, var(--brand)); }

.card-excerpt {
  font-size: 13.5px;
  line-height: 1.58;
  color: var(--ink-3);
}

.card-excerpt p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-meta {
  margin-top: auto;
  padding-top: 11px;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--font-score);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.card-meta .meta-author { color: var(--ink-3); }

/* 404 / compact card body variant */
.news-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.news-card-title {
  font-family: var(--font-headline);
  font-size: 16.5px;
  font-weight: 800;
  line-height: 1.2;
}
.news-card-title a { border: none; color: var(--ink); }
.news-card-title a:hover { color: var(--brand-deep); }
.news-card-meta {
  font-family: var(--font-score);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* --- Featured lead card (archives, page 1) ------------------ */
.news-grid.has-featured .featured-card {
  grid-column: 1 / -1;
  flex-direction: row;
  min-height: 320px;
}

.news-grid.has-featured .featured-card .card-link {
  display: flex !important;
  flex-direction: row !important;
  width: 100%;
}

.news-grid.has-featured .featured-card .card-img-holder {
  flex: 0 0 54%;
  aspect-ratio: auto;
  min-height: 100%;
}

.news-grid.has-featured .featured-card .card-body {
  justify-content: center;
  padding: 28px 32px;
  gap: 13px;
}

.news-grid.has-featured .featured-card .card-title {
  font-size: clamp(22px, 3vw, 31px);
  -webkit-line-clamp: 4;
}

.news-grid.has-featured .featured-card .card-excerpt {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* ============================================================
   11 · BENTO CATEGORY PACKAGE (1 lead + stacked briefs)
   ============================================================ */
.category-block-section,
.latest-news-section {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.category-bento-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 22px;
  /* stretch: the side-list BOX fills the column, but its items keep natural
     height (flex: 0 0 auto) — the "More …" footer absorbs any remainder. */
  align-items: stretch;
}

.bento-featured-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out);
  height: 100%;
}

.bento-featured-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--cat, var(--brand));
  z-index: 3;
}

.bento-featured-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.bento-card-img {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--recess);
  overflow: hidden;
}

.bento-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}

.bento-featured-card:hover .bento-card-img img { transform: scale(1.045); }

.bento-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px 18px;
  flex: 1;
}

.bento-card-title {
  font-family: var(--font-headline);
  font-size: clamp(19px, 2.3vw, 25px);
  font-weight: 800;
  line-height: 1.16;
}

.bento-card-title a { border: none; color: var(--ink); }
.bento-card-title a:hover { color: var(--cat, var(--brand)); }

.bento-card-excerpt {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-2);
}

.bento-card-meta {
  margin-top: auto;
  padding-top: 11px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-score) !important;
  font-size: 10px !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4) !important;
}

/* Brief list — right column */
.bento-list-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.bento-list-item {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  flex: 0 0 auto; /* natural height — no stretching apart */
  transition: background-color 0.2s var(--ease-out);
  position: relative;
}

.bento-list-item + .bento-list-item { border-top: 1px solid var(--rule); }

.bento-list-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--cat, var(--brand));
  transform: scaleY(0);
  transition: transform 0.22s var(--ease-out);
}

.bento-list-item:hover { background: var(--brand-wash); }
.bento-list-item:hover::before { transform: scaleY(1); }

.bento-list-img {
  flex-shrink: 0;
  width: 86px;
  height: 62px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--recess);
  position: relative;
}

.bento-list-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bento-list-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.bento-list-date {
  font-family: var(--font-score);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.bento-list-title {
  font-family: var(--font-headline);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bento-list-title a { border: none; color: var(--ink); }
.bento-list-item:hover .bento-list-title a { color: var(--cat, var(--brand)); }

/* ============================================================
   12 · HOMEPAGE LEAD SLIDER — floodlit front page
   ============================================================ */
.home-slider-section {
  max-width: 1100px;
  margin: 20px auto 8px;
  padding: 0 var(--space-5);
}

.home-slider-container {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--rule-strong);
  box-shadow: var(--shadow-card);
  background: var(--grad-ink);
  /* True 16:9 frame — matches the site's 1920×1080 featured images exactly,
     so slides show the full artwork with zero cropping. Slides stay
     position:absolute, so a late-failing lazy image can never change the
     container height (height jitter triggers Chrome scroll anchoring). */
  aspect-ratio: 16 / 9;
}

.home-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.55s var(--ease-out), visibility 0.55s;
  z-index: 1;
}

.home-slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

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

.slide-img-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #14200F; /* fallback: no color-mix() support */
  background:
    radial-gradient(720px 300px at 85% -10%, color-mix(in srgb, #C9F73C 16%, transparent), transparent 60%),
    linear-gradient(150deg, #0E130A 0%, #22301B 100%);
}

.slide-img-fallback span {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 54px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 2px rgba(201, 247, 60, 0.65);
}

.slide-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding-bottom: clamp(22px, 4vw, 42px);
  background: linear-gradient(to top,
    rgba(10, 14, 6, 0.94) 0%,
    rgba(10, 14, 6, 0.55) 38%,
    rgba(10, 14, 6, 0.12) 70%,
    rgba(10, 14, 6, 0.05) 100%);
  z-index: 3;
}

.slide-overlay .category-badge {
  background: var(--volt);
  color: var(--volt-ink);
  padding: 5px 12px;
  font-size: 11px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  margin-bottom: 12px;
}
.slide-overlay .category-badge::before { display: none; }
.slide-overlay a.category-badge:hover { background: #E2FF7A; color: var(--volt-ink); }

.slide-title {
  font-family: var(--font-headline);
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.015em;
  max-width: 24ch;
  margin: 0 0 12px;
}

.slide-title a {
  color: #FFFFFF;
  border: none;
  background-image: linear-gradient(var(--volt), var(--volt));
  background-repeat: no-repeat;
  background-size: 0% 4px;
  background-position: 0 96%;
  transition: background-size 0.35s var(--ease-out);
}

.slide-title a:hover {
  color: #FFFFFF;
  background-size: 100% 4px;
}

.slide-meta {
  display: flex;
  gap: 16px;
  font-family: var(--font-score);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(238, 244, 224, 0.72);
}

.slide-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(238, 244, 224, 0.25);
  border-radius: var(--radius-sm);
  background: rgba(10, 14, 6, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #EFF3E4;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
}

.slide-nav-btn:hover {
  background: var(--volt);
  color: var(--volt-ink);
  border-color: var(--volt);
}

.slide-nav-btn.prev { left: 14px; }
.slide-nav-btn.next { right: 14px; }

/* Dots — progress bars, volt fill paced by --sz-delay */
.slide-dots {
  position: absolute;
  right: 18px;
  bottom: 16px;
  z-index: 6;
  display: flex;
  gap: 7px;
}

.slide-dot {
  width: 26px;
  height: 5px;
  border: none;
  border-radius: 3px;
  background: rgba(238, 244, 224, 0.32);
  cursor: pointer;
  padding: 0;
  position: relative;
  overflow: hidden;
  transition: background-color 0.2s var(--ease-out);
}

.slide-dot:hover { background: rgba(238, 244, 224, 0.55); }

.slide-dot.active { background: rgba(238, 244, 224, 0.35); }

.slide-dot.active::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--volt);
  transform-origin: left;
  animation: sz-dot-progress var(--sz-delay, 6000ms) linear forwards;
}

.home-slider-container:hover .slide-dot.active::after { animation-play-state: paused; }

@keyframes sz-dot-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ============================================================
   13 · HOMEPAGE SECTION REVEAL
   ============================================================ */
.home-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}

.home-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   14 · MISSING IMAGE PLACEHOLDER — branded floodlight panel
   ============================================================ */
.sz-img-missing { position: relative; }

.sz-img-missing::after {
  content: 'SPORTZCLAUS';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #14200F; /* fallback: no color-mix() support */
  background:
    radial-gradient(420px 200px at 80% -20%, color-mix(in srgb, #C9F73C 18%, transparent), transparent 60%),
    linear-gradient(150deg, #0E130A 0%, #22301B 100%);
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(201, 247, 60, 0.6);
  font-family: var(--font-display);
  font-size: clamp(13px, 2.4vw, 20px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  z-index: 2;
}

.bento-list-img.sz-img-missing::after,
.rail-thumb.sz-img-missing::after {
  font-size: 8px;
  -webkit-text-stroke: 0.6px rgba(201, 247, 60, 0.6);
}

.post-featured-image.sz-img-missing { min-height: 220px; }

.bento-img-fallback {
  background: #14200F !important; /* fallback: no color-mix() support */
  background:
    radial-gradient(420px 200px at 80% -20%, color-mix(in srgb, #C9F73C 14%, transparent), transparent 60%),
    linear-gradient(150deg, #0E130A 0%, #22301B 100%) !important;
}

/* ============================================================
   15 · ARCHIVES, SEARCH & PAGINATION
   ============================================================ */
.main-content > .section-title { margin-top: 8px; }

.archive-description {
  max-width: 70ch;
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-2);
  margin: -10px 0 24px;
}

.sz-search-count {
  font-family: var(--font-score);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: -12px 0 22px;
}

.sz-no-results {
  grid-column: 1 / -1;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--brand);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 48px 28px 44px;
  text-align: center;
}

.sz-no-results h3 {
  font-size: 23px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.sz-no-results p {
  color: var(--ink-3);
  max-width: 46ch;
  margin: 0 auto 20px;
}

.sz-no-results-search {
  max-width: 420px;
  margin: 0 auto 18px;
}

.sz-no-results-search .search-form { display: flex; gap: 10px; }

.sz-no-results-link {
  font-family: var(--font-headline);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--brand-text);
  border: none;
}
.sz-no-results-link:hover { color: var(--brand-deep); }

.pagination-container {
  margin: 40px 0 20px;
  display: flex;
  justify-content: center;
}

.pagination-container .page-numbers {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.pagination-container .page-numbers li { display: block; }

.pagination-container a.page-numbers,
.pagination-container span.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  font-family: var(--font-headline);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  transition: var(--transition-smooth);
}

.pagination-container a.page-numbers:hover {
  border-color: var(--brand-text);
  color: var(--brand-text);
  background: var(--brand-wash);
}

.pagination-container span.page-numbers.current {
  background: #131A10;
  color: #C9F73C;
  border-color: #131A10;
}

.pagination-container span.page-numbers.dots {
  border: none;
  background: transparent;
  color: var(--ink-4);
}

/* ============================================================
   16 · SINGLE ARTICLE — press magazine layout
   ============================================================ */
.single-post-main { padding-top: 30px; padding-bottom: 70px; }

.single-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 26px;
  align-items: start;
}

.single-post-container,
.page-container {
  /* Transparent on desktop too (user 2026-07-15): the article sits on the
     page wash like everything else, and its content top-aligns with the
     sidebar panels — no more 44px paper-box padding pushing it down. */
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  overflow: visible;
}

.post-breadcrumb {
  /* "Home › Cricket" — readable title-case, not shouty caps (user 2026-07-15). */
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink-4);
  margin-bottom: 16px;
}

.post-breadcrumb a { color: var(--ink-3); border: none; }
.post-breadcrumb a:hover { color: var(--brand-deep); }

.post-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
}

.post-title {
  font-family: var(--font-headline);
  font-size: clamp(28px, 4.6vw, 46px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

.post-header {
  padding-bottom: 22px;
  border-bottom: 3px solid var(--ink);
  margin-bottom: 24px;
}

/* Standfirst — editorial dek under the headline (manual excerpt only) */
.post-standfirst {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 18.5px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 62ch;
  margin: -6px 0 18px;
}

/* Byline bar — press strip above the artwork */
.post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  border-top: 1px solid var(--rule);
  padding-top: 15px;
}

.post-meta .meta-avatar img {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--volt);
}

.post-views-chip {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-score);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  padding: 6px 10px;
  white-space: nowrap;
}

.post-views-chip svg { opacity: 0.7; }

.post-meta .meta-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.post-meta .meta-author {
  font-family: var(--font-headline);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.post-meta .meta-author a { border: none; color: var(--ink); }
.post-meta .meta-author a:hover { color: var(--brand-deep); }

.post-meta .meta-date {
  font-family: var(--font-score);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.post-featured-image {
  position: relative;
  margin: 0 0 24px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--recess);
}

.post-featured-image img { width: 100%; }

.post-views-bar { color: var(--ink-3); }

/* Read Aloud player — under the byline */
.sz-listen {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 9px 12px;
  background: color-mix(in srgb, var(--recess) 55%, transparent);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
}

/* [hidden] guards are required: the display rules above/below would
   otherwise override the hidden attribute — the player must stay invisible
   until JS confirms speech support, and Stop only shows while active. */
.sz-listen[hidden],
.sz-listen-stop[hidden] { display: none !important; }

.sz-listen-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font-family: var(--font-headline);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-ink, #FFFFFF);
  background: var(--brand);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0) 46%);
  border: none;
  border-radius: 4px;
  padding: 8px 14px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.sz-listen-btn:hover { background-color: var(--brand-deep); }

/* Dark mode: --brand flips to bright green — dark ink text keeps contrast */
html[data-theme="dark"] .sz-listen-btn,
body.dark-mode .sz-listen-btn { color: #0B1F12; }

.sz-listen-track {
  flex: 1;
  height: 4px;
  background: var(--rule);
  border-radius: 2px;
  overflow: hidden;
  min-width: 40px;
}

.sz-listen-fill {
  width: 0%;
  height: 100%;
  background: var(--brand);
  transition: width 0.4s var(--ease-out);
}

.sz-listen.is-active .sz-listen-fill { background: var(--volt); }

.sz-listen-stop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.sz-listen-stop:hover { border-color: var(--accent); }

/* --- Article body typography -------------------------------- */
.entry-content,
.post-content {
  font-size: 16.5px;
  line-height: 1.78;
  color: var(--ink-2);
}

/* Vertical rhythm — explicit bottom-margin model.
   (A single `> * + *` owl rule loses to any `.entry-content p` styling
   on specificity and silently zeroes paragraph gaps — never reintroduce.) */
.entry-content > * {
  margin-top: 0;
  margin-bottom: 1.3em;
}

.entry-content > :last-child { margin-bottom: 0; }

/* Multi-paragraph quotes and list items keep internal spacing */
.entry-content blockquote p + p { margin-top: 0.85em; }
.entry-content li p { margin-bottom: 0.5em; }

/* Opening paragraph: larger lede + press drop cap (articles only) */
.single-post-container .entry-content > p:first-of-type {
  font-size: 18px;
  line-height: 1.72;
  color: var(--ink);
}

.single-post-container .entry-content > p:first-of-type::first-letter {
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 3.35em;
  line-height: 0.8;
  float: left;
  padding: 7px 12px 2px 0;
  color: var(--brand-text);
}

/* End-of-article press mark */
.single-post-container .entry-content::after {
  content: '';
  display: block;
  clear: both;
  width: 40px;
  height: 6px;
  margin-top: 2.2em;
  background: var(--brand);
  transform: skewX(-14deg);
  box-shadow: 52px 0 0 var(--volt), 104px 0 0 var(--rule-strong);
}

.entry-content a,
.entry-content a:visited {
  color: var(--brand-text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--brand) 45%, transparent);
}

.entry-content a:hover {
  color: var(--brand-deep);
  text-decoration-color: var(--brand-deep);
  background: color-mix(in srgb, var(--volt) 35%, transparent);
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
  color: var(--ink);
  line-height: 1.15;
}

/* Headings: generous air above (new section), tight-but-clear gap below */
.entry-content h2 { margin-top: 1.9em; margin-bottom: 0.85em; }
.entry-content h3 { margin-top: 1.6em; margin-bottom: 0.65em; }
.entry-content h4 { margin-top: 1.5em; margin-bottom: 0.6em; }

/* No dead air when a heading opens the article or follows another heading */
.entry-content > h2:first-child,
.entry-content > h3:first-child,
.entry-content > h4:first-child { margin-top: 0; }

.entry-content h2 + h3,
.entry-content h3 + h4 { margin-top: 0.35em; }

.entry-content h2 {
  font-size: 25px;
  font-weight: 800;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--rule-strong);
}

.entry-content h2::before {
  content: '';
  display: inline-block;
  width: 9px;
  height: 19px;
  background: var(--brand);
  transform: skewX(-14deg);
  margin-right: 11px;
}

.entry-content h3 { font-size: 20.5px; }
.entry-content h4 { font-size: 17.5px; }

.entry-content ul,
.entry-content ol {
  padding-left: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.entry-content ul:not(.sz-toc-list):not(.wp-block-archives):not(.wp-block-categories) li,
.entry-content ol li {
  position: relative;
  padding-left: 24px;
}

.entry-content ul:not(.sz-toc-list):not(.wp-block-archives):not(.wp-block-categories) li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 10px;
  height: 3px;
  background: var(--brand);
}

.entry-content ol { counter-reset: sz-ol; }
.entry-content ol li { counter-increment: sz-ol; }
.entry-content ol li::before {
  content: counter(sz-ol, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.18em;
  font-family: var(--font-headline);
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-text);
}

.entry-content blockquote {
  position: relative;
  background: var(--brand-wash);
  border-left: 4px solid var(--brand);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 20px 24px 20px 26px;
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink);
}

.entry-content blockquote cite {
  display: block;
  margin-top: 10px;
  font-family: var(--font-score);
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.entry-content img {
  border-radius: var(--radius-md);
}

.entry-content figure,
.entry-content .wp-block-image { margin: 1.8em 0; }

.entry-content figcaption,
.entry-content .wp-caption-text {
  font-family: var(--font-score);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding: 8px 2px 0;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 8px;
}

.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.entry-content table th {
  font-family: var(--font-headline);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: left;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 14px;
}

html[data-theme="dark"] .entry-content table th,
body.dark-mode .entry-content table th { color: var(--canvas); }

.entry-content table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
}

.entry-content table tr:nth-child(even) td { background: color-mix(in srgb, var(--recess) 45%, transparent); }

.entry-content pre {
  background: var(--grad-ink);
  color: #D9E3C8;
  border-radius: var(--radius-md);
  padding: 18px 20px;
  overflow-x: auto;
  font-family: var(--font-score);
  font-size: 13px;
  line-height: 1.6;
}

.entry-content code {
  font-family: var(--font-score);
  font-size: 0.88em;
  background: var(--recess);
  border-radius: 4px;
  padding: 2px 6px;
}

.entry-content pre code { background: none; padding: 0; }

.entry-content hr {
  border: none;
  height: 3px;
  background: var(--ink);
  width: 76px;
  margin: 2em 0;
}

.page-links {
  margin-top: 24px;
  font-family: var(--font-headline);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  gap: 8px;
  align-items: center;
}

/* --- Author box ---------------------------------------------- */
.post-author-box {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--brand-wash);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  margin-top: 34px;
}

/* The avatar column must never be squeezed by the (flex) text column —
   pin its basis and let the image cover its circle. */
.post-author-box .author-avatar {
  flex: 0 0 64px;
  width: 64px;
}

.post-author-box .author-avatar img {
  display: block;
  width: 64px;
  height: 64px;
  max-width: none;
  border-radius: var(--radius-pill);
  border: 2px solid var(--volt);
  object-fit: cover;
}

/* "Latest Sports Stories" list injected into articles by a live-site plugin
   (nav.scib-latest-stories) — removed by design; the theme's related
   content lives in the sidebar rail instead. */
.scib-latest-stories { display: none !important; }

.author-box-kicker {
  display: block;
  font-family: var(--font-score);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-text);
  margin-bottom: 5px;
}

.post-author-box .author-title {
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.post-author-box .author-title a { border: none; color: var(--ink); }
.post-author-box .author-title a:hover { color: var(--brand-deep); }

.post-author-box .author-bio {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* --- Post footer / tags / prev-next --------------------------- */
.post-footer { margin-top: 30px; }

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 26px;
}

.post-tags .tags-title {
  font-family: var(--font-headline);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-right: 4px;
}

.post-tags a {
  display: inline-flex;
  font-family: var(--font-score);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--recess);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 5px 10px;
}

.post-tags a:hover {
  background: var(--volt);
  color: var(--volt-ink);
  border-color: var(--volt-ink);
}

.post-navigation-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 8px;
}

.nav-link-item a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 16px 18px;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-md);
  transition: var(--transition-smooth), box-shadow 0.25s var(--ease-out);
}

.nav-link-item a:hover {
  border-color: var(--brand-text);
  box-shadow: var(--shadow-card);
  color: inherit;
}

.nav-link-item .nav-subtitle {
  font-family: var(--font-score);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--brand-text);
}

.nav-link-item .nav-title {
  font-family: var(--font-headline);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}

.nav-link-item.nav-next { text-align: right; }
.nav-link-item.nav-next a { align-items: flex-end; }

/* --- Sidebar rail --------------------------------------------- */
.single-rail {
  position: sticky;
  top: 92px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.rail-panel {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 18px;
}

.rail-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-headline);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 14px;
}

.rail-kicker::before {
  content: '';
  width: 8px;
  height: 15px;
  background: var(--brand);
  transform: skewX(-14deg);
}

.post-share-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-headline);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--rule-strong);
  color: var(--ink-2);
  transition: var(--transition-smooth);
}

.share-btn:hover { transform: translateY(-2px); color: #fff; }
.share-btn.fb:hover { background: #1877F2; border-color: #1877F2; }
.share-btn.tw:hover { background: #0F1419; border-color: #0F1419; }
.share-btn.wa:hover { background: #25D366; border-color: #25D366; }
.share-btn.ln:hover { background: #0A66C2; border-color: #0A66C2; }

.rail-related {
  display: flex;
  flex-direction: column;
}

.rail-related li + li { border-top: 1px solid var(--rule); }

.rail-related a {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 11px 2px;
  border: none;
}

.rail-thumb {
  flex-shrink: 0;
  width: 66px;
  height: 50px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--recess);
  position: relative;
  display: block;
}

.rail-thumb img { width: 100%; height: 100%; object-fit: cover; }

.rail-rel-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.rail-rel-body strong {
  font-family: var(--font-headline);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.18s;
}

.rail-related a:hover strong { color: var(--brand-text); }

.rail-rel-body em {
  font-family: var(--font-score);
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* Match Centre CTA — floodlit panel */
.rail-cta {
  background: #14200F; /* fallback: no color-mix() support */
  background:
    radial-gradient(320px 170px at 90% -12%, color-mix(in srgb, #C9F73C 22%, transparent), transparent 62%),
    linear-gradient(150deg, #0E130A 0%, #22301B 100%);
  border: 1px solid rgba(201, 247, 60, 0.25);
  color: #EFF3E4;
}

.rail-kicker-light {
  color: #C9F73C;
  border-bottom-color: rgba(201, 247, 60, 0.4);
}
.rail-kicker-light::before { background: #C9F73C; }

.rail-cta h3 {
  font-size: 19px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  color: #FFFFFF;
  margin-bottom: 8px;
}

.rail-cta p {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(238, 244, 224, 0.72);
  margin-bottom: 16px;
}

.rail-cta-btn {
  background: var(--volt);
  color: var(--volt-ink);
  width: 100%;
}

.rail-cta-btn:hover {
  background: #E2FF7A;
  color: var(--volt-ink);
  box-shadow: 0 8px 20px -8px rgba(201, 247, 60, 0.5);
}

/* Read Next — full-width strip under the article */
.post-read-next {
  margin-top: 44px;
}

.post-read-next .news-card .card-img-holder { border: none; }

/* ============================================================
   17 · COMMENTS
   ============================================================ */
.comments-area { margin-top: 34px; }

.comments-title,
.comment-reply-title {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--ink);
  margin-bottom: 20px;
}

.comments-title::before,
.comment-reply-title::before {
  content: '';
  width: 9px;
  height: 20px;
  background: var(--brand);
  transform: skewX(-14deg);
}

.comment-list { display: flex; flex-direction: column; gap: 14px; }

.comment-list .comment,
.comment-list .pingback {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}

.comment-list .children {
  margin-top: 14px;
  padding-left: 18px;
  border-left: 3px solid var(--rule-strong);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.comment-author {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.comment-author img {
  border-radius: var(--radius-pill);
  border: 2px solid var(--volt);
}

.comment-metadata {
  font-family: var(--font-score);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin: 4px 0 10px;
}

.comment-metadata a { color: inherit; border: none; }

.comment-content {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-2);
}

.comment .reply { margin-top: 10px; }

.comment .reply a {
  font-family: var(--font-headline);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-text);
  border: none;
}

.comment .reply a:hover { color: var(--brand-deep); }

.no-comments,
.comments-empty-state {
  text-align: center;
  color: var(--ink-3);
  background: var(--recess);
  border-radius: var(--radius-md);
  padding: 26px;
  font-size: 14.5px;
}

.comments-empty-state .empty-icon { font-size: 26px; margin-bottom: 6px; }

/* Breathing room between the discussion / empty-state block and the
   "join the discussion" form so the reply heading isn't jammed against it.
   Belt-and-braces: margin on BOTH sides of the seam (block siblings collapse
   to the larger value, so the gap stays 40px even if one rule is overridden). */
.comments-area .comments-empty-state,
.comments-area > .comment-list,
.comments-area .no-comments { margin-bottom: 40px; }

.comment-respond,
#respond { margin-top: 40px; }

/* When the reply form is moved inline under a comment, drop the big gap. */
.comment-list .comment-respond,
.comment-list #respond { margin-top: 18px; }

.comment-form { display: flex; flex-direction: column; gap: 14px; }

.comment-form-fields-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.comment-form p { display: flex; flex-direction: column; gap: 6px; }

.comment-form .comment-notes,
.comment-form .logged-in-as {
  font-size: 12.5px;
  color: var(--ink-3);
}

.comment-form .comment-notes a,
.comment-form .logged-in-as a { color: var(--brand-text); }

.comment-form textarea { min-height: 130px; resize: vertical; }

.comment-form .form-submit { align-items: flex-start; }

/* ============================================================
   18 · GENERIC PAGES & CONTACT
   ============================================================ */
.page-main { padding-top: 30px; padding-bottom: 70px; }

.page-header { margin-bottom: 22px; }

.page-title,
.page-hero-title {
  font-size: clamp(25px, 4vw, 38px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 14px;
}

.page-title::before,
.page-hero-title::before {
  content: '';
  width: 12px;
  height: 30px;
  background: var(--brand);
  transform: skewX(-14deg);
  flex-shrink: 0;
}

.page-subtitle {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 17px;
  color: var(--ink-2);
  margin-top: 10px;
}

.page-featured-image {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 24px;
}

.page-content { margin-top: 6px; }

.page-footer { margin-top: 26px; }

/* Contact */
.sz-contact-form-wrap {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--brand);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: clamp(20px, 3.5vw, 34px);
  margin-top: 26px;
}

.contact-form-title {
  font-size: 21px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.contact-form-desc {
  font-size: 14.5px;
  color: var(--ink-3);
  margin-bottom: 22px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 16px;
}

.form-group textarea { min-height: 150px; resize: vertical; }

.form-submit-wrap { margin-top: 6px; }

.sz-contact-submit-btn { min-width: 190px; position: relative; }

.btn-spinner {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: sz-spin 0.7s linear infinite;
  display: none;
}

.sz-contact-submit-btn.loading .btn-spinner { display: inline-block; }
.sz-contact-submit-btn.loading .btn-text { opacity: 0.75; }

@keyframes sz-spin { to { transform: rotate(360deg); } }

.sz-form-response {
  margin-top: 16px;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
}

.sz-form-response.success {
  background: color-mix(in srgb, var(--brand) 12%, var(--paper));
  color: var(--brand-deep);
  border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent);
}

.sz-form-response.error {
  background: color-mix(in srgb, var(--accent) 10%, var(--paper));
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}

/* ============================================================
   19 · SCHEDULE / FIXTURES PAGE
   ============================================================ */
.schedule-page-main .section-title { border-bottom: none; padding-bottom: 0; }

.schedule-filter-panel {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 18px;
  margin: 22px 0 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.schedule-sport-tabs-container {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.schedule-sport-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-headline);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--canvas);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  padding: 9px 18px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.schedule-sport-tab:hover { border-color: var(--brand-text); color: var(--brand-text); }

.schedule-sport-tab.active {
  /* pinned: --ink flips light in dark mode and would wash the chip out */
  background: #131A10;
  color: #C9F73C;
  border-color: #131A10;
}

.schedule-dropdown-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 12px;
}

.schedule-field-wrapper { position: relative; }

.schedule-field-wrapper .field-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-4);
  display: flex;
  pointer-events: none;
}

.schedule-field-wrapper input,
.schedule-select { padding-left: 38px; }

.schedule-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236C7561' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  cursor: pointer;
}

.schedule-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.schedule-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}

.schedule-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

.card-status-ribbon {
  height: 3px;
  background: var(--grad-cool);
}

.schedule-card-header {
  padding: 13px 16px 11px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.header-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sport-label {
  font-family: var(--font-headline);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-text);
}

.sport-label.label-football { color: var(--cat-football); }
.sport-label.label-cricket { color: var(--cat-cricket); }

.match-type-badge {
  font-family: var(--font-score);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--recess);
  border: 1px solid var(--rule);
  color: var(--ink-2);
  border-radius: 3px;
  padding: 3px 7px;
}

.tournament-name {
  font-family: var(--font-score);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.schedule-card-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 18px 16px;
  flex: 1;
}

.schedule-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  flex: 1;
  min-width: 0;
}

.team-badge {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  border: 2px solid var(--rule);
  box-shadow: var(--shadow-card);
  flex-shrink: 0;
}

.team-name-text {
  font-family: var(--font-headline);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-versus-area { flex-shrink: 0; }

.vs-label {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--ink-4);
  background: var(--recess);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  transform: skewX(-8deg);
}

.schedule-card-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--rule);
  background: color-mix(in srgb, var(--recess) 40%, transparent);
}

.footer-info {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: var(--ink-2);
  min-width: 0;
}

.footer-info .footer-icon { color: var(--brand-text); display: flex; flex-shrink: 0; }

.formatted-date { font-weight: 600; }

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

.schedule-card-action { padding: 0 16px 16px; }

.schedule-card-action .card-btn { width: 100%; }

.see-more-container { margin-top: 32px; }

.schedule-no-results,
.sixes-no-results {
  text-align: center;
  background: var(--paper);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius-md);
  padding: 48px 24px;
  margin-top: 10px;
}

.no-results-icon { font-size: 34px; margin-bottom: 10px; }

.no-results-title {
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.no-results-desc { color: var(--ink-3); margin-bottom: 18px; }

/* ============================================================
   20 · LONGEST SIXES RECORD BOOK
   ============================================================ */
.sixes-page-container { padding-bottom: 30px; }

.sixes-controls-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
  margin: 22px 0 26px;
}

.sixes-search-wrapper {
  position: relative;
  flex: 1;
  min-width: 220px;
}

.sixes-search-wrapper .search-icon-inside {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-4);
  display: flex;
  pointer-events: none;
}

.sixes-search-wrapper input { padding-left: 38px; }

.sixes-tabs-wrapper { display: flex; gap: 8px; }

.sixes-tab-btn {
  font-family: var(--font-headline);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--canvas);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.sixes-tab-btn:hover { border-color: var(--brand-text); color: var(--brand-text); }

.sixes-tab-btn.active {
  background: #131A10;
  color: #C9F73C;
  border-color: #131A10;
}

.sixes-sort-wrapper { min-width: 180px; }

.sixes-bento-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.six-bento-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 18px;
  overflow: hidden;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}

.six-bento-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.card-glow-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(300px 160px at 88% -12%, color-mix(in srgb, var(--volt) 22%, transparent), transparent 62%);
  pointer-events: none;
}

.card-trajectory-line {
  position: absolute;
  right: -22px;
  top: 26px;
  width: 130px;
  height: 60px;
  border-top: 2px dashed color-mix(in srgb, var(--brand) 40%, transparent);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  transform: rotate(-8deg);
  pointer-events: none;
}

.card-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  position: relative;
}

.six-cat-badge {
  font-family: var(--font-headline);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-text);
}

.six-cat-badge.leagues { color: var(--cat-gaming); }

.six-match-type {
  font-family: var(--font-score);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--recess);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 3px 7px;
  color: var(--ink-2);
}

.card-middle-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 16px 0 14px;
  position: relative;
}

.six-distance-display {
  display: flex;
  align-items: baseline;
  gap: 3px;
  flex-shrink: 0;
}

.distance-number {
  font-family: var(--font-display);
  font-size: 50px;
  font-weight: 400;
  line-height: 0.9;
  color: var(--brand-text);
  letter-spacing: 0.01em;
}

.distance-unit {
  font-family: var(--font-headline);
  font-size: 17px;
  font-weight: 800;
  color: var(--ink-4);
}

.six-player-details { min-width: 0; }

.six-player-name {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.12;
  text-transform: uppercase;
  letter-spacing: 0;
}

.six-player-team {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--ink-3);
}

.card-divider { height: 1px; background: var(--rule); margin-bottom: 12px; position: relative; }

.card-bottom-row {
  display: flex;
  flex-direction: column;
  gap: 7px;
  position: relative;
}

.six-info-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  min-width: 0;
}

.six-info-item .info-label {
  font-family: var(--font-score);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  flex-shrink: 0;
}

.six-info-item .info-value {
  color: var(--ink-2);
  font-weight: 600;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.six-info-item .year { color: var(--brand-text); font-weight: 700; }

/* ============================================================
   21 · GENERIC LEAGUE / DATA TABLES
   ============================================================ */
.winners-table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--paper);
  box-shadow: var(--shadow-card);
}

.winners-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 460px;
}

.winners-table th {
  font-family: var(--font-headline);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: left;
  background: var(--ink);
  /* paper, not a literal: keeps the inverted header readable in dark mode */
  color: var(--paper);
  padding: 11px 16px;
}

.winners-table td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--rule);
}

.winners-table tr:last-child td { border-bottom: none; }
.winners-table tr:nth-child(even) td { background: color-mix(in srgb, var(--recess) 45%, transparent); }

.winners-table .year-cell {
  font-family: var(--font-headline);
  font-weight: 700;
  color: var(--brand-text);
}

.winners-table .winner-cell { font-weight: 600; }

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

/* ============================================================
   22 · FOOTER — floodlit pine deck
   ============================================================ */
.sz-footer {
  margin-top: 60px;
  /* Solid fallback FIRST: browsers without color-mix() drop the entire
     gradient declaration below, which left the footer white on older
     phones. Never remove this line. */
  background: #11170D;
  background:
    radial-gradient(900px 320px at 85% -10%, color-mix(in srgb, #C9F73C 10%, transparent), transparent 60%),
    linear-gradient(150deg, #0E130A 0%, #1A2412 100%);
  border-top: 4px solid var(--volt);
  color: #E7EDDA;
  padding: 52px var(--space-5) 34px;
}

.sz-footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  gap: 40px;
}

.sz-footer-inner.cols-2 { grid-template-columns: 1.4fr 1fr; }
.sz-footer-inner.cols-3 { grid-template-columns: 1.5fr 1fr 1fr; }
.sz-footer-inner.cols-4 { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; }

.footer-col { min-width: 0; }

/* On the pinned-dark footer, always use the dark-bg (light) logo */
.sz-footer .logo-light-img { display: none; }
.sz-footer .logo-dark-img { display: block; }

.sz-footer-logo {
  width: var(--footer-logo-w, 165px);
  height: auto;
}

.sz-footer-brand a { border: none; }

.sz-footer-mark {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 14px;
}

.sz-footer-mark .tag {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 15.5px;
  color: rgba(238, 244, 224, 0.85);
}

.sz-footer-mark .origin {
  font-family: var(--font-score);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(238, 244, 224, 0.45);
}

.sz-footer-socials {
  display: flex;
  gap: 9px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.sz-footer-link {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(238, 244, 224, 0.22);
  border-radius: var(--radius-pill);
  color: rgba(238, 244, 224, 0.8);
  transition: var(--transition-smooth);
}

.sz-footer-link:hover {
  background: var(--volt);
  border-color: var(--volt);
  color: var(--volt-ink);
  transform: translateY(-2px);
}

.footer-col-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-headline);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin-bottom: 16px;
}

.footer-col-title::before {
  content: '';
  width: 8px;
  height: 15px;
  background: var(--volt);
  transform: skewX(-14deg);
}

.footer-links-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.footer-links-list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 14px;
  font-weight: 500;
  color: rgba(238, 244, 224, 0.68);
  border: none;
  transition: color 0.18s var(--ease-out), transform 0.18s var(--ease-out);
}

.footer-links-list a::before {
  content: '';
  width: 10px;
  height: 2px;
  background: rgba(238, 244, 224, 0.25);
  transition: background-color 0.18s, width 0.18s;
}

.footer-links-list a:hover {
  color: #C9F73C;
  transform: translateX(2px);
}

.footer-links-list a:hover::before { background: #C9F73C; width: 15px; }

.footer-col p { color: rgba(238, 244, 224, 0.62) !important; }

/* Footer newsletter */
.sz-footer-newsletter { margin-top: 26px; }

.sz-footer-nl-form {
  display: flex;
  gap: 8px;
}

.sz-footer-nl-form input {
  flex: 1;
  background: rgba(238, 244, 224, 0.07);
  border: 1px solid rgba(238, 244, 224, 0.22);
  color: #FFFFFF;
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: 14px;
  min-width: 0;
}

.sz-footer-nl-form input::placeholder { color: rgba(238, 244, 224, 0.42); }

.sz-footer-nl-form input:focus {
  outline: none;
  border-color: var(--volt);
  box-shadow: 0 0 0 3px rgba(201, 247, 60, 0.18);
}

.sz-footer-nl-form button {
  flex-shrink: 0;
  font-family: var(--font-headline);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--volt-ink);
  background: var(--volt);
  border: none;
  border-radius: var(--radius-sm);
  padding: 11px 18px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.sz-footer-nl-form button:hover { background: #E2FF7A; transform: translateY(-1px); }

.sz-footer-nl-msg {
  min-height: 18px;
  margin-top: 9px;
  font-size: 12.5px;
  color: #C9F73C;
}

/* Footer bottom bar */
.sz-footer-bottom {
  max-width: 1100px;
  margin: 42px auto 0;
  padding-top: 18px;
  border-top: 1px solid rgba(238, 244, 224, 0.16);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--font-score);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(238, 244, 224, 0.5);
}

.sz-footer-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.sz-footer-meta a {
  color: rgba(238, 244, 224, 0.62);
  border: none;
}

.sz-footer-meta a:hover { color: #C9F73C; }

.sz-footer-version,
.sz-footer-ai-label {
  border: 1px solid rgba(238, 244, 224, 0.2);
  border-radius: 3px;
  padding: 3px 8px;
}

.sz-footer-ai-label { color: #C9F73C; border-color: rgba(201, 247, 60, 0.35); }

/* ============================================================
   22b · APP TAB BAR — phones only
   ============================================================ */
.sz-tabbar { display: none; }

@media (max-width: 900px) {
  .sz-tabbar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    background: var(--paper);
    border-top: 3px solid var(--ink);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -10px 26px -16px rgba(19, 26, 16, 0.4);
  }

  .sz-tabbar a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 9px 4px 7px;
    border: none;
    font-family: var(--font-headline);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-3);
    -webkit-tap-highlight-color: transparent;
  }

  .sz-tabbar a svg { flex-shrink: 0; }

  .sz-tabbar a.active { color: var(--brand-text); }

  /* Volt notch riding the press rule above the active tab */
  .sz-tabbar a.active::before {
    content: '';
    position: absolute;
    top: -3px;
    left: 26%;
    right: 26%;
    height: 3px;
    background: var(--volt);
  }

  /* Keep page content, footer and back-to-top clear of the bar */
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }

  .sz-back-top { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================
   22c · PWA INSTALL BANNER
   ============================================================ */
/* Footer install button — revealed by pwa.php only when the browser offers
   one-tap install. [hidden] guard is required: display:inline-flex would
   otherwise override the hidden attribute (the spotlight-overlay lesson). */
.sz-footer-install[hidden] { display: none !important; }
.sz-footer-install {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  padding: 11px 20px;
  background: #C9F73C; /* pinned volt-on-ink, both modes */
  color: #17230A;
  border: none;
  border-radius: 4px;
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.sz-footer-install:hover { background: #E2FF7A; }

/* Header (masthead) install chip — same reveal contract as the footer button. */
.sz-mast-install[hidden] { display: none !important; }
.sz-mast-install {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  background: #C9F73C; /* pinned volt-on-ink, both modes */
  color: #17230A;
  border: none;
  border-radius: 4px;
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.sz-mast-install:hover { background: #E2FF7A; }

@media (max-width: 900px) {
  /* Phones use the footer install button instead (user request 2026-07-08). */
  .sz-mast-install { display: none; }
}

.sz-pwa-banner {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
  z-index: 950;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #131A10; /* pinned dark chip, both modes */
  color: #EFF3E4;
  border: 1px solid rgba(201, 247, 60, 0.35);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 34px -14px rgba(19, 26, 16, 0.55);
  padding: 10px 12px 10px 16px;
  max-width: calc(100vw - 24px);
}

.sz-pwa-msg {
  font-family: var(--font-headline);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sz-pwa-install {
  font-family: var(--font-headline);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #17230A;
  background: #C9F73C;
  border: none;
  border-radius: 4px;
  padding: 8px 15px;
  cursor: pointer;
}

.sz-pwa-install:hover { background: #E2FF7A; }

.sz-pwa-close {
  background: none;
  border: none;
  color: rgba(238, 244, 224, 0.6);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
}

.sz-pwa-close:hover { color: #fff; }

/* iOS hint variant: instruction text instead of an install button */
.sz-pwa-banner.is-ios .sz-pwa-msg {
  white-space: normal;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12.5px;
  line-height: 1.45;
}

.sz-pwa-banner.is-ios .sz-pwa-msg svg { color: #C9F73C; }

@media (max-width: 900px) {
  /* Ride above the app tab bar */
  .sz-pwa-banner { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================
   23 · BACK TO TOP
   ============================================================ */
.sz-back-top {
  position: fixed;
  right: 22px;
  bottom: 26px;
  z-index: 800;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--volt);
  border: 1px solid color-mix(in srgb, var(--volt) 40%, transparent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: 0 14px 30px -12px rgba(19, 26, 16, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out), visibility 0.25s, background-color 0.2s;
}

.sz-back-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.sz-back-top:hover {
  background: var(--volt);
  color: var(--volt-ink);
}

html[data-theme="dark"] .sz-back-top,
body.dark-mode .sz-back-top {
  background: var(--volt);
  color: var(--volt-ink);
}

/* ============================================================
   24 · HOMEPAGE EXTRAS
   ============================================================ */
.latest-news-section .section-title { --cat: var(--brand); }

/* Most Read — ranked press strip */
.home-most-read {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.most-read-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.most-read-item {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 20px 18px;
  min-width: 0;
  transition: background-color 0.2s var(--ease-out);
}

.most-read-item:hover { background: var(--brand-wash); }

.most-read-item + .most-read-item { border-left: 1px solid var(--rule); }

.most-read-rank {
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--cat, var(--brand));
  flex-shrink: 0;
  margin-top: 2px;
}

.most-read-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.most-read-body .category-badge { font-size: 10px; }
.most-read-body .category-badge::before { width: 12px; }

.most-read-title {
  font-family: var(--font-headline);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.most-read-title a { border: none; color: var(--ink); }
.most-read-item:hover .most-read-title a { color: var(--cat, var(--brand)); }

.most-read-meta {
  font-family: var(--font-score);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.homepage-page-content,
.homepage-custom-shortcodes-section { font-size: 15.5px; }

.x-feed-embed-box .section-title { font-size: 26px; }

.x-feed-cta-card { border-top: 3px solid var(--ink) !important; }

/* ============================================================
   25 · RESPONSIVE PRESS DESK
   ============================================================ */
@media (max-width: 1024px) {
  .news-grid,
  .news-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

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

  .schedule-dropdown-row { grid-template-columns: 1fr 1fr; }

  .category-bento-grid { grid-template-columns: 1fr; }

  .most-read-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .most-read-item + .most-read-item { border-left: none; }
  .most-read-item:nth-child(even) { border-left: 1px solid var(--rule); }
  .most-read-item:nth-child(n+3) { border-top: 1px solid var(--rule); }

  .single-layout { grid-template-columns: minmax(0, 1fr); }
  .single-rail { position: static; }

  .sz-footer-inner.cols-3,
  .sz-footer-inner.cols-4 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .header-navigation { display: none; }

  /* App-bar layout: hamburger left · logo dead-centre · search/theme right.
     1fr auto 1fr keeps the logo truly centred even though the right group
     is wider than the hamburger. */
  .mast-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    padding: 10px 9px;
  }

  .mobile-menu-toggle-btn {
    display: inline-flex;
    justify-self: start;
  }

  .mast-brand { justify-self: center; }

  .mast-side { justify-self: end; }

  /* Search lives inside the drawer on phones */
  .header-search-btn { display: none; }

  .mast-logo img { height: 37px; max-width: 175px; }

  .sz-edition-tag { display: none; }
}

@media (max-width: 760px) {
  .news-grid,
  .news-grid.cols-3,
  .news-grid.cols-2 { grid-template-columns: minmax(0, 1fr); }

  .news-grid.has-featured .featured-card,
  .news-grid.has-featured .featured-card .card-link {
    flex-direction: column !important;
    min-height: 0;
  }

  .news-grid.has-featured .featured-card .card-img-holder {
    flex: none;
    width: 100%;
    aspect-ratio: 16 / 9.4;
    min-height: 0;
  }

  .news-grid.has-featured .featured-card .card-body { padding: 18px 20px; }

  .news-grid.cols-1 .news-card .card-link { flex-direction: column !important; }
  .news-grid.cols-1 .news-card .card-img-holder { flex: none; width: 100%; }
  .news-grid.cols-1 .news-card .card-body { padding: 16px 18px; }

  .most-read-list { grid-template-columns: minmax(0, 1fr); }
  .most-read-item:nth-child(even) { border-left: none; }
  .most-read-item + .most-read-item { border-top: 1px solid var(--rule); }
  .most-read-item { padding: 15px 16px; }
  .most-read-rank { font-size: 30px; }

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

  .schedule-dropdown-row { grid-template-columns: 1fr; }

  .section-title { font-size: 21px; }

  /* 16:9 frame is short on phones — compact overlay so text always fits */
  .slide-title {
    font-size: clamp(15px, 4.6vw, 22px);
    margin-bottom: 6px;
    max-width: 100%;
  }

  .slide-overlay { padding-bottom: 14px; }

  .slide-overlay .category-badge {
    font-size: 9px;
    padding: 3px 8px;
    margin-bottom: 7px;
  }

  .slide-meta { font-size: 8.5px; gap: 10px; }

  .slide-nav-btn { display: none; }

  .slide-dots { right: 12px; bottom: 9px; }

  .slide-dot { width: 20px; height: 4px; }

  .post-navigation-links { grid-template-columns: 1fr; }
  .nav-link-item.nav-next { text-align: left; }
  .nav-link-item.nav-next a { align-items: flex-start; }

  .comment-form-fields-row,
  .form-row { grid-template-columns: 1fr; }

  .sixes-controls-bar { align-items: stretch; flex-direction: column; }
  .sixes-tabs-wrapper { flex-wrap: wrap; }

  .sz-footer-inner.cols-2,
  .sz-footer-inner.cols-3,
  .sz-footer-inner.cols-4 { grid-template-columns: 1fr; gap: 32px; }

  .sz-footer { padding-top: 40px; }

  .sz-footer-bottom { flex-direction: column; align-items: flex-start; }

  /* Slim ticker on phones — one compact line */
  .sz-ticker-title {
    font-size: 9px;
    padding: 6px 12px 6px 14px;
    gap: 5px;
    letter-spacing: 0.08em;
    clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  }
  .sz-ticker-pulse { width: 6px; height: 6px; }
  .sz-ticker-item,
  .sz-ticker-item a {
    font-size: 12px;
    gap: 6px;
  }
  .sz-ticker-item { padding: 0 18px 0 8px; }
  .sz-ticker-badge {
    font-size: 8px;
    padding: 2px 6px;
    letter-spacing: 0.08em;
  }

  /* Phone article (user 2026-07-15 v2): NO box — the article sits straight
     on the page with a little breathing room on both sides, and much less
     dead space above the headline. */
  .single-post-main,
  .page-main { padding-left: 0; padding-right: 0; padding-top: 8px; }

  .single-layout { gap: 20px; }

  .single-post-container,
  .page-container {
    padding: 10px 18px 26px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  /* Artwork spans the text column, softly rounded like the cards. */
  .single-post-container .post-featured-image {
    margin-left: 0;
    margin-right: 0;
    border-radius: 4px;
    overflow: hidden;
  }

  /* Rail panels and the Read Next strip keep their side breathing room */
  .single-rail { padding: 0 18px; }
  .post-read-next { padding: 0 16px; }

  .post-author-box { flex-direction: column; }

  .sz-back-top {
    right: 14px;
    bottom: calc(70px + env(safe-area-inset-bottom, 0px)); /* clears the app tab bar */
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 480px) {
  .mast-logo img { height: 33px; max-width: 158px; }

  .mast-inner { gap: 6px; padding-left: 8px; padding-right: 8px; }

  .header-search-btn,
  .mobile-menu-toggle-btn { width: 34px; height: 34px; }

  .sz-edition-inner { justify-content: space-between; font-size: 9.5px; }

  .card-title { font-size: 19px; }

  .bento-list-img { width: 72px; height: 54px; }

  .post-title { font-size: clamp(27px, 8vw, 34px); }
}

/* ============================================================
   27 · GLASS MATERIALS — Apple-style frosted floating surfaces
   Solid backgrounds above remain the fallback; these upgrades only
   apply where backdrop-filter exists (all modern browsers).
   ============================================================ */
@supports ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {

  /* Mobile app tab bar — content glides beneath it */
  .sz-tabbar {
    background: color-mix(in srgb, var(--paper) 76%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.8);
    backdrop-filter: blur(18px) saturate(1.8);
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, #fff 40%, transparent),
      0 -10px 26px -16px rgba(19, 26, 16, 0.4);
  }

  /* Drop-down search deck + mobile drawer — near-opaque: these hold
     reading content, and at 80% the page bled through the menu text */
  .header-search-bar,
  .mobile-navigation {
    background: color-mix(in srgb, var(--paper) 96%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(1.7);
    backdrop-filter: blur(20px) saturate(1.7);
  }

  /* Desktop nav dropdowns */
  .nav-menu .sub-menu {
    background: color-mix(in srgb, var(--paper) 78%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(1.7);
    backdrop-filter: blur(16px) saturate(1.7);
  }

  /* Back-to-top puck */
  .sz-back-top {
    background: rgba(19, 26, 16, 0.7);
    -webkit-backdrop-filter: blur(12px) saturate(1.5);
    backdrop-filter: blur(12px) saturate(1.5);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 14px 30px -12px rgba(19, 26, 16, 0.5);
  }
  .sz-back-top:hover {
    background: var(--volt);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* PWA install banner */
  .sz-pwa-banner {
    background: rgba(19, 26, 16, 0.78);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    backdrop-filter: blur(16px) saturate(1.5);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      0 16px 34px -14px rgba(19, 26, 16, 0.55);
  }

  /* Slider chrome: frosted arrows + a glass pill behind the dots */
  .slide-nav-btn {
    background: rgba(10, 14, 6, 0.42);
    -webkit-backdrop-filter: blur(12px) saturate(1.6);
    backdrop-filter: blur(12px) saturate(1.6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  }

  .slide-dots {
    background: rgba(10, 14, 6, 0.38);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
    backdrop-filter: blur(10px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    padding: 7px 9px;
    right: 14px;
    bottom: 13px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
}

/* Buttons: a faint Apple-style top sheen for depth (works everywhere) */
.btn,
.reset-btn,
.card-btn,
.rail-cta-btn,
.sz-contact-submit-btn,
.form-submit-wrap button,
.comment-form input[type="submit"],
.search-submit {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0) 46%);
}

/* Tactile press feedback (iOS-like) */
.sz-tabbar a:active { transform: scale(0.93); transition: transform 0.12s ease; }
.news-card:active { transform: translateY(-2px) scale(0.995); }
.sz-back-top:active { transform: scale(0.92); }

/* ============================================================
   26 · MOTION & PRINT MANNERS
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .sz-ticker-track { animation: none; }
  .slide-dot.active::after { animation: none; transform: scaleX(1); }
  .home-reveal { opacity: 1; transform: none; }
}

@media print {
  .sz-edition-strip,
  .sz-breaking-ticker,
  .mast-side,
  .single-rail,
  .sz-footer,
  .sz-back-top { display: none !important; }

  body { background: #fff; }
}

/* ============================================================
   18 · FIELDING POSITIONS — interactive ground explainer
   ============================================================ */
.fp-page-container [hidden] { display: none !important; }

.fp-header { margin-bottom: 22px; }

/* --- controls bar ------------------------------------------------ */
.fp-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.fp-search-wrap { position: relative; flex: 1 1 280px; min-width: 220px; }

.fp-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3);
  display: inline-flex;
  pointer-events: none;
}

/* scoped past the theme's base input[type="text"] rule so the icon inset wins */
.fp-search-wrap input.fp-search {
  width: 100%;
  padding: 11px 14px 11px 36px;
  background: var(--paper);
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
}

.fp-search-wrap input.fp-search:focus {
  outline: none;
  border-color: var(--brand-text);
  box-shadow: 0 0 0 3px rgba(11, 122, 67, 0.18);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}

.fp-search-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 80;
  margin: 0;
  padding: 5px;
  list-style: none;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hover, 0 18px 40px -20px rgba(19, 26, 16, 0.4));
  max-height: 280px;
  overflow: auto;
}

.fp-search-list li {
  padding: 8px 11px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--ink-2);
  cursor: pointer;
}

.fp-search-list li:hover,
.fp-search-list li.is-active { background: #131A10; color: #C9F73C; }

.fp-search-list .fp-search-none { color: var(--ink-4); cursor: default; }
.fp-search-list .fp-search-none:hover { background: transparent; color: var(--ink-4); }

.fp-toggle-group {
  display: inline-flex;
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--paper);
}

.fp-toggle {
  padding: 10px 14px;
  border: none;
  background: transparent;
  font-family: var(--font-headline);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.fp-toggle + .fp-toggle { border-left: 1.5px solid var(--rule-strong); }

.fp-toggle:hover { color: var(--brand-text); }

/* pinned literals — var(--ink) flips in dark mode and would invert this */
.fp-toggle.is-active { background: #131A10; color: #C9F73C; }

.fp-toggle:focus-visible,
.fp-preset-btn:focus-visible,
.fp-panel-close:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

/* --- presets ------------------------------------------------------ */
.fp-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.fp-presets-label {
  font-family: var(--font-score);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-right: 2px;
}

.fp-preset-btn {
  padding: 8px 15px;
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius-pill);
  background: var(--paper);
  font-family: var(--font-headline);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.fp-preset-btn:hover { border-color: var(--brand-text); color: var(--brand-text); }

.fp-preset-btn.is-active {
  background: #C9F73C;
  border-color: #131A10;
  color: #17230A;
}

.fp-preset-reset { border-style: dashed; }

.fp-preset-note {
  margin: 10px 0 0;
  padding: 10px 14px;
  background: #EAF2E7;
  background: var(--brand-wash);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* collapsed-but-present: stays in the accessibility tree so aria-live fires */
.fp-preset-note.is-empty {
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}

/* visually hidden live region for screen-reader announcements */
.fp-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.fp-preset-note .fp-note-count {
  font-family: var(--font-score);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand-text);
  white-space: nowrap;
}

/* --- layout ------------------------------------------------------- */
.fp-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
  gap: 24px;
  align-items: start;
  margin-top: 18px;
}

/* --- the ground ---------------------------------------------------- */
.fp-ground-wrap { margin: 0; position: relative; }

#fpGround {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: var(--shadow-card);
}

.fp-apron  { fill: #0A5B31; }
.fp-turf-a { fill: #15884D; }
.fp-turf-b { fill: #117A43; }

.fp-thirty {
  fill: none;
  stroke: rgba(255, 255, 255, 0.8);
  stroke-width: 2.5;
  stroke-dasharray: 11 9;
}

.fp-rope { fill: none; stroke: #F4F3ED; stroke-width: 4; }

.fp-pitch { fill: #D9C99C; stroke: rgba(19, 26, 16, 0.25); stroke-width: 1; }
.fp-crease { stroke: #FFFFFF; stroke-width: 1.6; }
.fp-stumps { fill: #131A10; }

.fp-batter-body { fill: #C9F73C; stroke: #131A10; stroke-width: 2; }
.fp-batter-bat  { stroke: #131A10; stroke-width: 4; stroke-linecap: round; }

/* zone overlays */
#fpZones { pointer-events: none; }

.fp-zone-half,
.fp-zone-ring,
.fp-zone-out {
  fill: #C9F73C;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.fp-zone-half.is-on { opacity: 0.13; }
.fp-zone-ring.is-on,
.fp-zone-out.is-on  { opacity: 0.15; }

.fp-zone-wm {
  font-family: var(--font-display);
  font-size: 40px;
  letter-spacing: 0.1em;
  fill: rgba(255, 255, 255, 0.13);
}

.fp-v-band {
  fill: none;
  stroke: rgba(255, 255, 255, 0.4);
  stroke-width: 2.5;
  stroke-dasharray: 3 8;
  stroke-linecap: round;
}

/* --- dots ----------------------------------------------------------- */
.fp-dot { cursor: pointer; outline: none; transition: opacity 0.2s ease; }

.fp-dot-halo { fill: transparent; }

.fp-dot-core { stroke-width: 2; transition: stroke 0.15s ease; }

.fp-dot-close .fp-dot-core { fill: #FF5A3C; stroke: #FFFFFF; }
.fp-dot-ring  .fp-dot-core { fill: #C9F73C; stroke: #131A10; }
.fp-dot-deep  .fp-dot-core { fill: #F4F3ED; stroke: #131A10; }
.fp-dot-staff .fp-dot-core { fill: #131A10; stroke: #F4F3ED; }
.fp-dot-zone  .fp-dot-core { fill: #12B5A2; stroke: #FFFFFF; stroke-dasharray: 2 3; }

.fp-dot:hover .fp-dot-core { stroke: #C9F73C; }

/* focus ring on the halo: volt disc + ink outline reads on EVERY dot fill */
.fp-dot:focus-visible .fp-dot-core { stroke: #FFFFFF; stroke-width: 3; }
.fp-dot:focus-visible .fp-dot-halo {
  fill: rgba(201, 247, 60, 0.32);
  stroke: #131A10;
  stroke-width: 2.5;
}

.fp-dot-label {
  font-family: var(--font-score);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  fill: #FFFFFF;
  paint-order: stroke;
  stroke: rgba(8, 22, 13, 0.7);
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
}

/* the tight cordon behind the bat: names appear on hover/focus/select */
.fp-dot-close .fp-dot-label { opacity: 0; transition: opacity 0.15s ease; }
.fp-dot-close:hover .fp-dot-label,
.fp-dot-close:focus-visible .fp-dot-label,
.fp-dot-close.is-selected .fp-dot-label { opacity: 1; }

.fp-dot.is-dim { opacity: 0.15; }

/* dimmed dots stay in the tab order — they must light up under focus/hover */
.fp-dot.is-dim:hover,
.fp-dot.is-dim:focus-visible { opacity: 1; }

.fp-dot.is-selected .fp-dot-core { stroke: #C9F73C; stroke-width: 3.5; }

.fp-dot.is-selected .fp-dot-halo {
  fill: rgba(201, 247, 60, 0.2);
  stroke: #C9F73C;
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: fpPulse 1.7s ease-out infinite;
}

@keyframes fpPulse {
  0%   { transform: scale(0.7); opacity: 1; }
  70%  { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* --- tooltip --------------------------------------------------------- */
.fp-tooltip {
  position: absolute;
  z-index: 40;
  transform: translate(-50%, -140%);
  padding: 5px 10px;
  background: #131A10;
  border: 1px solid #C9F73C;
  border-radius: var(--radius-sm);
  font-family: var(--font-score);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #F4F3ED;
  white-space: nowrap;
  pointer-events: none;
}

/* --- legend ---------------------------------------------------------- */
.fp-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 12px;
  font-family: var(--font-score);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.fp-leg-item { display: inline-flex; align-items: center; gap: 6px; }

.fp-leg-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
  border: 1.5px solid var(--ink);
}

.fp-leg-close { background: #FF5A3C; }
.fp-leg-ring  { background: #C9F73C; }
.fp-leg-deep  { background: #F4F3ED; }
.fp-leg-staff { background: #131A10; border-color: var(--ink-3); }

.fp-leg-note {
  flex-basis: 100%;
  font-family: var(--font-body);
  font-size: 12.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-4);
}

/* --- explanation panel ------------------------------------------------ */
.fp-panel {
  position: sticky;
  top: 96px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 24px;
  max-height: calc(100vh - 130px);
  overflow: auto;
}

.fp-panel-kicker {
  font-family: var(--font-score);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-text);
}

.fp-panel-title {
  font-family: var(--font-headline);
  font-size: 22px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 8px 0 10px;
}

.fp-panel-empty p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0 0 14px;
}

.fp-panel-hints {
  margin: 0;
  padding: 0 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-3);
}

.fp-panel-body { position: relative; }

.fp-panel-close {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.fp-panel-close:hover { background: #131A10; color: #C9F73C; }

.fp-chip-row { display: flex; gap: 6px; padding-right: 34px; }

.fp-chip {
  font-family: var(--font-score);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.fp-chip-off { background: var(--brand); color: var(--brand-ink, #FFFFFF); }
.fp-chip-leg { background: #C4341A; color: #FFFFFF; } /* darkened for 4.5:1 on 10px text */
.fp-chip-mid { background: #131A10; color: #C9F73C; }
.fp-chip-ring { border: 1.5px solid var(--rule-strong); color: var(--ink-2); }

.fp-pos-name {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  margin: 12px 0 4px;
  color: var(--ink);
}

.fp-pos-dl { margin: 0; }

.fp-pos-dl dt {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-family: var(--font-headline);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-text);
}

.fp-pos-dl dt::before {
  content: '';
  width: 8px;
  height: 13px;
  background: var(--volt);
  transform: skewX(-14deg);
  flex-shrink: 0;
}

.fp-pos-dl dd {
  margin: 6px 0 0;
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--ink-2);
}

.fp-noscript {
  margin-top: 18px;
  padding: 14px 18px;
  background: var(--recess);
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--ink-2);
}

/* --- dark mode -------------------------------------------------------- */
html[data-theme="dark"] .fp-apron,
body.dark-mode .fp-apron  { fill: #071A0F; }

html[data-theme="dark"] .fp-turf-a,
body.dark-mode .fp-turf-a { fill: #10482A; }

html[data-theme="dark"] .fp-turf-b,
body.dark-mode .fp-turf-b { fill: #0C3D22; }

html[data-theme="dark"] .fp-pitch,
body.dark-mode .fp-pitch  { fill: #A08B58; }

html[data-theme="dark"] .fp-rope,
body.dark-mode .fp-rope   { stroke: rgba(244, 243, 237, 0.85); }

html[data-theme="dark"] .fp-dot-deep .fp-dot-core,
body.dark-mode .fp-dot-deep .fp-dot-core { fill: #E9E7DC; }

html[data-theme="dark"] .fp-dot-staff .fp-dot-core,
body.dark-mode .fp-dot-staff .fp-dot-core { fill: #0B0F08; }

html[data-theme="dark"] .fp-leg-deep,
body.dark-mode .fp-leg-deep { background: #E9E7DC; }

html[data-theme="dark"] .fp-preset-note,
body.dark-mode .fp-preset-note {
  background: #14231A;
  background: color-mix(in srgb, var(--brand) 14%, var(--paper));
}

/* --- responsive -------------------------------------------------------- */
@media (max-width: 1020px) {
  .fp-layout { grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr); gap: 18px; }
  .fp-pos-name { font-size: 29px; }
}

@media (max-width: 900px) {
  .fp-layout { grid-template-columns: 1fr; }

  /* the panel becomes a bottom sheet riding above the app tab bar */
  .fp-panel {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    top: auto;
    z-index: 950;
    max-height: 56vh;
    border: 2px solid var(--ink);
    border-radius: var(--radius-xl);
    box-shadow: 0 -18px 44px -12px rgba(0, 0, 0, 0.45);
    transform: translateY(130%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0.35, 1);
    visibility: hidden;
  }

  .fp-panel.is-open { transform: none; visibility: visible; }

  .fp-panel::before {
    content: '';
    display: block;
    width: 44px;
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--rule-strong);
    margin: -8px auto 12px;
  }

  .fp-panel-empty { display: none; }

  .fp-dot-label { font-size: 17px; }
  .fp-zone-wm { font-size: 34px; }
}

@media (max-width: 560px) {
  .fp-toggle { padding: 9px 11px; font-size: 11px; }
  .fp-preset-btn { padding: 7px 12px; font-size: 11px; }
  .fp-pos-name { font-size: 26px; }
  .fp-dot-label { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .fp-dot.is-selected .fp-dot-halo { animation: none; }
  .fp-panel { transition: none; }
}


/* ============================================================
   19 · WORLD CRICKET STADIUMS & BOUNDARY DIMENSIONS
   ============================================================ */
.st-page-container [hidden] { display: none !important; }

.st-header { margin-bottom: 20px; }

.st-disclaimer {
  margin: 12px 0 0;
  padding: 9px 14px;
  background: #EAF2E7;
  background: var(--brand-wash);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 860px;
}

.st-disclaimer > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.st-disclaimer > summary::-webkit-details-marker { display: none; }

.st-disclaimer > summary::after {
  content: 'ⓘ why';
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--font-score);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-text);
}

.st-disclaimer[open] > summary::after { content: 'ⓘ hide'; }

.st-disclaimer > p { margin: 8px 0 0; }

/* visually hidden live region */
.st-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

/* --- controls ------------------------------------------------ */
.st-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.st-search-wrap { position: relative; flex: 1 1 300px; min-width: 230px; }

.st-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3);
  display: inline-flex;
  pointer-events: none;
}

.st-search-wrap input.st-search {
  width: 100%;
  padding: 12px 14px 12px 36px;
  background: var(--paper);
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
}

.st-search-wrap input.st-search:focus {
  outline: none;
  border-color: var(--brand-text);
  box-shadow: 0 0 0 3px rgba(11, 122, 67, 0.18);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}

.st-search-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 90;
  margin: 0;
  padding: 5px;
  list-style: none;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hover, 0 18px 40px -20px rgba(19, 26, 16, 0.4));
  max-height: 320px;
  overflow: auto;
}

.st-search-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.st-search-list li:hover,
.st-search-list li.is-active { background: #131A10; }

.st-search-list li:hover .st-so-name,
.st-search-list li.is-active .st-so-name { color: #C9F73C; }

.st-search-list li:hover .st-so-meta,
.st-search-list li.is-active .st-so-meta { color: rgba(244, 243, 237, 0.75); }

.st-so-name { font-family: var(--font-headline); font-weight: 700; font-size: 14px; color: var(--ink); }
.st-so-meta { font-family: var(--font-score); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }

.st-search-none { color: var(--ink-4); cursor: default; font-size: 13.5px; }
.st-search-none:hover { background: transparent !important; }

.st-toggle-group {
  display: inline-flex;
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--paper);
}

.st-toggle {
  padding: 11px 14px;
  border: none;
  background: transparent;
  font-family: var(--font-headline);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.st-toggle + .st-toggle { border-left: 1.5px solid var(--rule-strong); }
.st-toggle:hover { color: var(--brand-text); }
.st-toggle:disabled { opacity: 0.4; cursor: not-allowed; }

/* pinned literals — var(--ink) flips in dark mode and would invert this */
.st-toggle.is-active { background: #131A10; color: #C9F73C; }

.st-toggle:focus-visible,
.st-preset-btn:focus-visible,
.st-region-btn:focus-visible,
.st-filters-open:focus-visible,
.st-clear-filters:focus-visible,
.st-card-view:focus-visible,
.st-rotate-reset:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

.st-filters-open {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 18px;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  background: var(--paper);
  font-family: var(--font-headline);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
  cursor: pointer;
}

.st-filters-open::after {
  content: '▾';
  font-size: 10px;
  transition: transform 0.15s ease;
}

.st-filters-open[aria-expanded="true"]::after { transform: rotate(180deg); }

/* count badge when filters are active */
.st-filters-open .st-fcount {
  display: none;
  min-width: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: var(--brand-ink, #FFFFFF);
  font-family: var(--font-score);
  font-size: 10px;
  line-height: 18px;
  text-align: center;
}

.st-filters-open.has-active .st-fcount { display: inline-block; }

/* --- filter bar (collapsed by default; toggled open by the Filters button) --- */
.st-filterbar {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

.st-filterbar.is-open { display: flex; }

.st-filter-select {
  padding: 9px 11px;
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius-md);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--ink-2);
  max-width: 180px;
}

.st-filter-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink-2);
  padding: 8px 4px;
}

.st-clear-filters {
  padding: 9px 14px;
  border: 1.5px dashed var(--rule-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  font-family: var(--font-headline);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  cursor: pointer;
}

.st-clear-filters:hover { color: var(--accent); border-color: var(--accent); }

/* --- regions + presets: single scrollable rows to stay compact --- */
.st-regions,
.st-presets {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
  /* soft fade on the right edge to signal there's more to scroll */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}

.st-regions::-webkit-scrollbar,
.st-presets::-webkit-scrollbar { height: 5px; }

.st-regions::-webkit-scrollbar-thumb,
.st-presets::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: 999px; }

.st-regions-label,
.st-presets-label {
  font-family: var(--font-score);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  flex-shrink: 0;
}

.st-region-btn,
.st-preset-btn { flex-shrink: 0; }

.st-region-btn,
.st-preset-btn {
  padding: 8px 14px;
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius-pill);
  background: var(--paper);
  font-family: var(--font-headline);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.st-region-btn:hover,
.st-preset-btn:hover { border-color: var(--brand-text); color: var(--brand-text); }

.st-region-btn.is-active,
.st-preset-btn.is-active {
  background: #C9F73C;
  border-color: #131A10;
  color: #17230A;
}

.st-preset-note {
  margin: 0 0 10px;
  padding: 10px 14px;
  background: #EAF2E7;
  background: var(--brand-wash);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-2);
}

.st-preset-note.is-empty { height: 0; margin: 0; padding: 0; border: 0; overflow: hidden; }

/* --- explorer layout -------------------------------------------- */
.st-explorer {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr);
  gap: 24px;
  align-items: start;
  margin: 18px 0 30px;
}

/* --- the ground --------------------------------------------------- */
.st-ground-wrap { margin: 0; position: relative; }

#stGround {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: var(--shadow-card);
}

.st-apron  { fill: #0A5B31; }
.st-turf   { fill: #15884D; }
.st-mow-a  { fill: #15884D; }
.st-mow-b  { fill: #117A43; }
.st-rope   { fill: none; stroke: #F4F3ED; stroke-width: 4; }

.st-thirty {
  fill: none;
  stroke: rgba(255, 255, 255, 0.75);
  stroke-width: 2;
  stroke-dasharray: 10 8;
}

.st-pitch  { fill: #D9C99C; stroke: rgba(19, 26, 16, 0.25); stroke-width: 1; }
.st-crease { stroke: #FFFFFF; stroke-width: 1.4; }
.st-stumps { fill: #131A10; }

.st-batter-body { fill: #C9F73C; stroke: #131A10; stroke-width: 2; }
.st-batter-bat  { stroke: #131A10; stroke-width: 3.5; stroke-linecap: round; }
.st-player      { fill: #F4F3ED; stroke: #131A10; stroke-width: 1.5; }

.st-end-lbl {
  font-family: var(--font-score);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  fill: #FFFFFF;
  paint-order: stroke;
  stroke: rgba(8, 22, 13, 0.7);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.st-zone-wm {
  font-family: var(--font-display);
  font-size: 34px;
  letter-spacing: 0.1em;
  fill: rgba(255, 255, 255, 0.14);
}

.st-measure-line {
  stroke: #C9F73C;
  stroke-width: 2.5;
  stroke-dasharray: 6 6;
  pointer-events: none;
}

.st-anchor { cursor: pointer; outline: none; }

.st-anchor-halo { fill: transparent; }

.st-anchor-dot {
  fill: #C9F73C;
  stroke: #131A10;
  stroke-width: 2;
}

.st-anchor-dot.is-modelled {
  fill: #F4F3ED;
  stroke-dasharray: 2 2.5;
}

.st-anchor:hover .st-anchor-dot { stroke: #FFFFFF; }

.st-anchor:focus-visible .st-anchor-halo {
  fill: rgba(201, 247, 60, 0.32);
  stroke: #131A10;
  stroke-width: 2.5;
}

.st-anchor.is-selected .st-anchor-dot { fill: #E8442B; stroke: #FFFFFF; stroke-width: 2.5; }

.st-anchor.is-selected .st-anchor-halo {
  fill: rgba(232, 68, 43, 0.22);
  stroke: #E8442B;
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: stPulse 1.7s ease-out infinite;
}

@keyframes stPulse {
  0%   { transform: scale(0.72); opacity: 1; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

.st-anchor-txt {
  font-family: var(--font-score);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  fill: #FFFFFF;
  paint-order: stroke;
  stroke: rgba(8, 22, 13, 0.75);
  stroke-width: 3.5px;
  stroke-linejoin: round;
  pointer-events: none;
}

.st-compass {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(19, 26, 16, 0.72);
  border: 1.5px solid rgba(244, 243, 237, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.st-compass[data-state="unknown"] {
  font-family: var(--font-score);
  font-size: 13px;
  color: rgba(244, 243, 237, 0.6);
}

.st-compass-svg { width: 34px; height: 34px; }
.st-compass-n { fill: #C9F73C; }
.st-compass-t { fill: #F4F3ED; font-family: var(--font-score); font-size: 11px; font-weight: 700; }

.st-tooltip {
  position: absolute;
  z-index: 60;
  transform: translate(-50%, -130%);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 11px;
  background: #131A10;
  border: 1px solid #C9F73C;
  border-radius: var(--radius-sm);
  color: #F4F3ED;
  white-space: nowrap;
  pointer-events: none;
}

.st-tooltip strong { font-family: var(--font-headline); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.st-tooltip span { font-family: var(--font-score); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(244, 243, 237, 0.8); }

.st-ground-caption {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-4);
}

/* --- orientation bar ---------------------------------------------- */
.st-orient-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.st-rotate-wrap { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 160px; }

.st-rotate-label {
  font-family: var(--font-score);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

#stRotate { flex: 1; accent-color: var(--brand-text); min-height: 24px; }

.st-rotate-reset {
  padding: 9px 14px;
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius-md);
  background: var(--paper);
  font-family: var(--font-headline);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-2);
  cursor: pointer;
}

/* --- measurement detail ------------------------------------------- */
.st-measure {
  position: relative;
  margin-top: 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 20px 22px;
  display: none;
}

.st-measure.is-open { display: block; }

.st-measure-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--ink-2);
  font-size: 13px;
  cursor: pointer;
}

.st-measure-close:hover { background: #131A10; color: #C9F73C; }

.st-ms-kicker {
  font-family: var(--font-score);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.st-ms-title {
  font-family: var(--font-display);
  font-size: 26px;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  margin: 6px 0 2px;
}

.st-ms-dist {
  font-family: var(--font-score);
  font-size: 14px;
  color: var(--ink-2);
  margin: 0 0 8px;
}

.st-ms-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 13px 0 4px;
  font-family: var(--font-headline);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-text);
}

.st-ms-h::before {
  content: '';
  width: 8px;
  height: 13px;
  background: var(--volt);
  transform: skewX(-14deg);
  flex-shrink: 0;
}

.st-ms-p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--ink-2); }

/* --- info panel ----------------------------------------------------- */
.st-panel {
  position: sticky;
  top: 96px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 24px;
  max-height: calc(100vh - 130px);
  overflow: auto;
}

.st-panel-kicker {
  font-family: var(--font-score);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-text);
}

.st-panel-titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }

.st-panel-title {
  font-family: var(--font-display);
  font-size: 27px;
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 8px 0 4px;
}

.st-panel-flag { font-size: 26px; line-height: 1.3; }

.st-panel-loc { margin: 0 0 2px; font-size: 14px; color: var(--ink-2); }

.st-panel-aliases { margin: 0 0 10px; font-size: 12.5px; font-style: italic; color: var(--ink-4); }

.st-conf {
  display: inline-block;
  font-family: var(--font-score);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--rule-strong);
  color: var(--ink-2);
  margin-bottom: 14px;
}

.st-conf-high { border-color: var(--brand-text); color: var(--brand-text); }
.st-conf-low  { border-color: var(--accent); color: var(--accent); }

.st-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.st-meta-item { display: flex; flex-direction: column; gap: 2px; }

.st-meta-label {
  font-family: var(--font-score);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.st-meta-val { font-family: var(--font-headline); font-weight: 700; font-size: 13.5px; color: var(--ink); }

.st-list-row { margin: 0 0 8px; font-size: 13px; }
.st-list-row dt { display: inline; font-weight: 700; color: var(--ink-3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.st-list-row dt::after { content: ': '; }
.st-list-row dd { display: inline; margin: 0; color: var(--ink-2); }

.st-panel-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 8px;
  font-family: var(--font-headline);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-text);
}

.st-panel-h::before {
  content: '';
  width: 8px;
  height: 13px;
  background: var(--volt);
  transform: skewX(-14deg);
  flex-shrink: 0;
}

.st-kv-grid { display: flex; flex-direction: column; gap: 6px; }

.st-kv { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.st-kv dt { color: var(--ink-3); flex-shrink: 0; }
.st-kv dd { margin: 0; color: var(--ink); font-weight: 600; text-align: right; }

.st-dim-note { margin: 6px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-4); }

.st-records { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }

.st-upcoming { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }

.st-up-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px;
  background: var(--recess);
  border-radius: var(--radius-md);
}

.st-up-teams { font-family: var(--font-headline); font-weight: 700; font-size: 13.5px; color: var(--ink); }
.st-up-meta  { font-family: var(--font-score); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.st-up-none  { font-size: 13px; color: var(--ink-4); }

.st-panel-p { margin: 0; font-size: 14px; line-height: 1.68; color: var(--ink-2); }

.st-source-note {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--rule-strong);
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-4);
}

/* --- cards ------------------------------------------------------------ */
.st-cards-section { margin: 8px 0 60px; }

.st-cards-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 16px; }

.st-result-count { font-family: var(--font-score); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }

.st-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.st-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 16px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.st-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover, 0 14px 30px -18px rgba(19, 26, 16, 0.35)); }

.st-card.is-current { border: 2px solid var(--brand); }

.st-card-head { display: flex; gap: 12px; align-items: center; }

.st-mini { width: 56px; height: 56px; flex-shrink: 0; }
.st-mini-turf { fill: #15884D; stroke: #0A5B31; stroke-width: 2; }
.st-mini-pitch { fill: #D9C99C; }

.st-card-name { font-family: var(--font-headline); font-weight: 800; font-size: 15.5px; line-height: 1.2; margin: 0; }
.st-card-loc { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-3); }
.st-card-meta { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }

.st-card-size {
  align-self: flex-start;
  font-family: var(--font-score);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--rule-strong);
  color: var(--ink-2);
}

/* size categories: label text + differentiated border treatments (never colour alone) */
.st-size-very-short { border-color: var(--accent); border-style: double; }
.st-size-short { border-color: var(--accent); }
.st-size-long { border-color: var(--brand-text); }
.st-size-very-long { border-color: var(--brand-text); border-style: double; }

.st-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }

.st-card-view {
  padding: 10px 16px;
  border: none;
  border-radius: var(--radius-md);
  background: #131A10;
  color: #C9F73C;
  font-family: var(--font-headline);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  min-height: 40px;
}

.st-card-view:hover { background: var(--brand); color: var(--brand-ink, #FFFFFF); }

.st-card-cmp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink-3);
  cursor: pointer;
  padding: 8px 2px;
}

.st-card-cmp input { width: 16px; height: 16px; accent-color: var(--brand-text); }

.st-empty {
  text-align: center;
  background: var(--recess);
  border-radius: var(--radius-lg);
  padding: 44px 20px;
  color: var(--ink-3);
}

.st-empty h3 { font-family: var(--font-headline); font-weight: 800; text-transform: uppercase; margin: 0 0 6px; color: var(--ink-2); }
.st-empty p { margin: 0 0 16px; font-size: 14px; }

/* --- compare ------------------------------------------------------------ */
.st-compare-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  z-index: 940;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  max-width: min(920px, calc(100vw - 24px));
  background: #131A10;
  color: #F4F3ED;
  border: 1.5px solid #C9F73C;
  border-radius: var(--radius-xl);
  box-shadow: 0 18px 44px -12px rgba(0, 0, 0, 0.5);
  padding: 12px 16px;
}

.st-cmpbar-count { font-family: var(--font-score); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(244, 243, 237, 0.8); }

.st-cmpbar-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.st-cmp-chip {
  padding: 6px 11px;
  border: 1px solid rgba(244, 243, 237, 0.35);
  border-radius: var(--radius-pill);
  background: transparent;
  color: #F4F3ED;
  font-size: 12px;
  cursor: pointer;
}

.st-cmp-chip:hover { border-color: #E8442B; color: #FF6B4A; }

.st-cmpbar-limit { font-size: 12px; color: #FF6B4A; }

.st-cmpbar-go {
  padding: 10px 20px;
  border: none;
  border-radius: var(--radius-md);
  background: #C9F73C;
  color: #17230A;
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  min-height: 40px;
}

.st-cmpbar-go:disabled { opacity: 0.45; cursor: not-allowed; }

.st-cmpbar-clear {
  padding: 10px 12px;
  border: none;
  background: transparent;
  color: rgba(244, 243, 237, 0.7);
  font-size: 12px;
  text-transform: uppercase;
  cursor: pointer;
}

.st-compare-view {
  margin: 0 0 60px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 24px;
}

.st-cmp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }

.st-cmp-close {
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--ink-2);
  cursor: pointer;
}

.st-cmp-svgwrap { max-width: 560px; margin: 0 auto 8px; }

.st-cmp-svg { width: 100%; height: auto; background: #0A5B31; border-radius: var(--radius-lg); }

/* outline styles pair colour WITH dash pattern — never colour alone */
.st-cmp-outline { fill: none; stroke-width: 4; }
.st-ol-a { stroke: #C9F73C; }
.st-ol-b { stroke: #FFFFFF; stroke-dasharray: 14 8; }
.st-ol-c { stroke: #FF6B4A; stroke-dasharray: 3 6; stroke-linecap: round; }
.st-ol-d { stroke: #4FD8C4; stroke-dasharray: 16 6 3 6; }

.st-cmp-scalebar { stroke: #F4F3ED; stroke-width: 3; }
.st-cmp-scaletxt { fill: rgba(244, 243, 237, 0.85); font-family: var(--font-score); font-size: 15px; }

.st-cmp-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 10px 0 4px; }

.st-cmp-leg {
  position: relative;
  padding-left: 30px;
  font-family: var(--font-headline);
  font-size: 12.5px;
  font-weight: 700;
}

.st-cmp-leg::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 22px;
  border-top-width: 4px;
  border-top-style: solid;
  transform: translateY(-50%);
}

.st-cmp-leg.st-ol-a::before { border-top-color: #9CCB1E; }
.st-cmp-leg.st-ol-b::before { border-top-color: var(--ink-3); border-top-style: dashed; }
.st-cmp-leg.st-ol-c::before { border-top-color: #E8442B; border-top-style: dotted; }
.st-cmp-leg.st-ol-d::before { border-top-color: #12B5A2; border-top-style: double; }

.st-cmp-note { text-align: center; font-size: 12.5px; color: var(--ink-4); margin: 0 0 16px; }

.st-cmp-tablewrap { overflow-x: auto; }

.st-cmp-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; }

.st-cmp-table th,
.st-cmp-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}

.st-cmp-table thead th {
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 3px solid var(--ink);
}

.st-cmp-table tbody th { font-weight: 600; color: var(--ink-3); white-space: nowrap; }

/* --- mobile filters drawer ---------------------------------------------- */
.st-drawer {
  position: fixed;
  inset: 0;
  z-index: 990;
  background: var(--canvas);
  padding: 20px;
  overflow: auto;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0.35, 1);
  visibility: hidden;
}

.st-drawer.is-open { transform: none; visibility: visible; }

body.st-drawer-lock { overflow: hidden; }

.st-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }

.st-drawer-head h2 { font-family: var(--font-headline); font-weight: 800; text-transform: uppercase; font-size: 20px; margin: 0; }

.st-drawer-close {
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  cursor: pointer;
}

.st-drawer-body { display: flex; flex-direction: column; gap: 12px; }

.st-drawer-body .st-filter-select { max-width: none; padding: 13px 12px; font-size: 14px; }

.st-drawer-apply {
  margin-top: 8px;
  padding: 15px;
  border: none;
  border-radius: var(--radius-md);
  background: #131A10;
  color: #C9F73C;
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  min-height: 48px;
}

.st-noscript {
  margin-top: 18px;
  padding: 14px 18px;
  background: var(--recess);
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--ink-2);
}

/* --- dark mode ------------------------------------------------------------ */
html[data-theme="dark"] .st-apron,
body.dark-mode .st-apron  { fill: #071A0F; }

html[data-theme="dark"] .st-turf,
html[data-theme="dark"] .st-mow-a,
body.dark-mode .st-turf,
body.dark-mode .st-mow-a  { fill: #10482A; }

html[data-theme="dark"] .st-mow-b,
body.dark-mode .st-mow-b  { fill: #0C3D22; }

html[data-theme="dark"] .st-pitch,
body.dark-mode .st-pitch  { fill: #A08B58; }

html[data-theme="dark"] .st-rope,
body.dark-mode .st-rope   { stroke: rgba(244, 243, 237, 0.85); }

html[data-theme="dark"] .st-disclaimer,
html[data-theme="dark"] .st-preset-note,
body.dark-mode .st-disclaimer,
body.dark-mode .st-preset-note {
  background: #14231A;
  background: color-mix(in srgb, var(--brand) 14%, var(--paper));
}

html[data-theme="dark"] .st-cmp-svg,
body.dark-mode .st-cmp-svg { background: #0C2416; }

html[data-theme="dark"] .st-cmp-leg.st-ol-b::before,
body.dark-mode .st-cmp-leg.st-ol-b::before { border-top-color: rgba(244, 243, 237, 0.7); }

/* --- responsive ------------------------------------------------------------ */
@media (max-width: 1100px) {
  .st-explorer { grid-template-columns: minmax(0, 1.2fr) minmax(300px, 1fr); gap: 18px; }
  .st-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .st-explorer { grid-template-columns: 1fr; }
  .st-panel { position: static; max-height: none; }
  /* on phones the Filters button opens the full-screen drawer, never the inline bar */
  .st-filterbar,
  .st-filterbar.is-open { display: none; }

  /* measurement detail becomes a bottom sheet above the app tab bar */
  .st-measure {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    z-index: 950;
    margin: 0;
    max-height: 52vh;
    overflow: auto;
    border: 2px solid var(--ink);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-xl);
    box-shadow: 0 -18px 44px -12px rgba(0, 0, 0, 0.45);
    transform: translateY(130%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0.35, 1);
    display: block;
    visibility: hidden;
  }

  .st-measure.is-open { transform: none; visibility: visible; }

  .st-compare-bar { bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 10px); }

  .st-zone-wm { font-size: 40px; }
  .st-anchor-txt { font-size: 18px; }
  .st-end-lbl { font-size: 17px; }
}

@media (max-width: 640px) {
  .st-cards { grid-template-columns: 1fr; }
  .st-meta-grid { grid-template-columns: 1fr 1fr; }
  .st-anchor-txt { font-size: 21px; }
  .st-zone-wm { font-size: 46px; }
  .st-end-lbl { font-size: 19px; }
  .st-panel-title { font-size: 23px; }

  /* reclaim vertical space on phones: drop the long marketing subtitle,
     tighten the intro, and collapse the toolbar to a neat 2-row block. */
  .st-header .page-subtitle { display: none; }
  .st-header { margin-bottom: 12px; }
  .st-disclaimer { margin-top: 8px; }
  .st-disclaimer > summary { font-size: 12.5px; }

  /* two-row toolbar: [search][Filters] on row 1, [RH|LH][m|yd|both] on row 2 */
  .st-controls { gap: 7px; margin-bottom: 8px; }
  .st-search-wrap { flex: 1 1 55%; min-width: 0; order: 1; }
  .st-filters-open { flex: 0 0 auto; order: 2; }
  .st-controls .st-toggle-group { flex: 1 1 40%; order: 3; }
  .st-controls .st-toggle-group .st-toggle { flex: 1; }

  /* comfortable touch targets on phones (≥44px) */
  .st-toggle { padding: 12px 8px; font-size: 11px; min-height: 44px; }
  .st-region-btn,
  .st-preset-btn { padding: 12px 15px; min-height: 44px; }
  .st-card-cmp { padding: 12px 4px; min-height: 44px; }
  .st-card-cmp input { width: 20px; height: 20px; }
  .st-clear-filters { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .st-anchor.is-selected .st-anchor-halo { animation: none; }
  .st-measure, .st-drawer { transition: none; }
  .st-card:hover { transform: none; }
}

/* ============================================================
   20 · ADVERTISING SLOTS
   ============================================================ */
.sz-ad {
  display: block;
  margin: 0 auto;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
}

/* Label is hidden until a real ad fills the slot (see .is-filled below), so
   visitors never see empty "Advertisement" boxes before/without a served ad. */
.sz-ad-label {
  display: none;
  font-family: var(--font-score);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 5px;
}

.sz-ad.is-filled .sz-ad-label { display: block; }

/* Empty slots collapse to nothing; they stay in the DOM (and on-screen) so
   Ezoic/AdSense can still measure and fill them — only the chrome is hidden. */
.sz-ad-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.sz-ad-inner img { max-width: 100%; height: auto; }

/* Header leaderboard — the strip's chrome only appears once an ad is served */
.sz-ad-leaderboard-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}

.sz-ad-leaderboard-wrap.is-filled {
  padding: 12px 16px;
  background: var(--recess);
  border-bottom: 1px solid var(--rule);
}

/* In-article — the separating rules only show around a served ad */
.entry-content .sz-ad-inarticle.is-filled {
  margin: 26px auto;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

/* Sticky sidebar — card chrome only once filled */
.sz-ad-sidebar {
  position: sticky;
  top: 96px;
}

.sz-ad-sidebar.is-filled {
  margin-bottom: 20px;
  padding: 12px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
}

/* Sticky mobile bottom bar — present but invisible until an ad is served */
.sz-ad-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  z-index: 895;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  pointer-events: none;
}

.sz-ad-sticky.is-filled {
  padding: 8px 34px 8px 8px;
  background: var(--paper);
  border-top: 2px solid var(--ink);
  box-shadow: 0 -8px 22px -14px rgba(19, 26, 16, 0.5);
  pointer-events: auto;
}

@supports (backdrop-filter: blur(10px)) {
  .sz-ad-sticky.is-filled {
    background: color-mix(in srgb, var(--paper) 82%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
            backdrop-filter: blur(14px) saturate(1.6);
  }
}

.sz-ad-sticky .sz-ad { margin: 0; }
.sz-ad-sticky .sz-ad-label { display: none; }
.sz-ad-sticky-close { display: none; }
.sz-ad-sticky.is-filled .sz-ad-sticky-close { display: block; }

.sz-ad-sticky-close {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--ink-2);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}

/* Only show the sticky bar on phones (JS also guards this) */
@media (min-width: 901px) {
  .sz-ad-sticky { display: none !important; }
}

/* Admin-only empty-slot placeholder (never shown to visitors) */
.sz-ad-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  margin: 14px auto;
  padding: 10px 14px;
  border: 1.5px dashed var(--rule-strong);
  border-radius: var(--radius-md);
  background: repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(11,122,67,0.05) 8px, rgba(11,122,67,0.05) 16px);
}

.sz-ad-empty-txt {
  font-family: var(--font-score);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
}

.sz-ad-leaderboard-wrap .sz-ad-empty { margin: 0; width: 100%; max-width: 728px; }
.sz-ad-leaderboard-wrap:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .sz-ad-sticky { transition: none; }
}

/* ============================================================
   21 · NEON BROADCAST — dark-mode-only design experiment
   Space Grotesk + Inter, near-black surfaces, blue identity /
   orange action / green growth, hard-stop broadcast stripe.
   Light mode is untouched (Pitchside Press newsprint).
   ============================================================ */

/* --- typography (both modes): tokens live in :root ------------------ */
/* scoreboard digits never jitter while counting; never fake-bold — weights
   above the font's real range (e.g. legacy 800s) resolve to the true 700
   instead of blurry synthesized strokes */
body {
  font-variant-numeric: tabular-nums;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

:is(h1, h2, h3, h4, .page-title, .news-card-title) {
  letter-spacing: -0.01em;
}

/* --- the broadcast stripe: hard-stop blue → orange → green ---------
   The signature mark of BOTH themes (user request 2026-07-13): light
   keeps its own surface/text colors, but header, footer, card tops and
   the mobile tab bar all carry the same tri-color stripe as dark. */
:root, html[data-theme="dark"], body.dark-mode {
  --stripe: linear-gradient(90deg,
    #19B8FF 0%, #19B8FF 33.34%,
    #FF7A1A 33.34%, #FF7A1A 66.67%,
    #2CE58C 66.67%, #2CE58C 100%);
}

.mast { border-bottom-color: transparent; }

.mast::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--stripe);
  z-index: 5;
}

.sz-footer { position: relative; border-top: none; }

.sz-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--stripe);
}

/* card tops */
:is(.news-card, .rail-panel) { position: relative; }

:is(.news-card, .rail-panel)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--stripe);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  z-index: 3;
  pointer-events: none;
}

/* mobile app tab bar rides the stripe too */
@media (max-width: 900px) {
  .sz-tabbar { border-top-color: transparent; }

  .sz-tabbar::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--stripe);
  }
}

/* --- chrome retunes -------------------------------------------------- */
/* top micro-bar */
html[data-theme="dark"] .sz-edition-strip,
body.dark-mode .sz-edition-strip {
  background: #070A0F;
  border-bottom-color: rgba(255, 255, 255, 0.08);
  color: #828C9C;
}

/* ticker: keep the volt token (now growth green) but fix its ink pieces */
html[data-theme="dark"] .sz-ticker-title,
body.dark-mode .sz-ticker-title { background: #070A0F; color: #C9F73C; }

html[data-theme="dark"] .sz-breaking-ticker,
body.dark-mode .sz-breaking-ticker { border-bottom-color: rgba(255, 255, 255, 0.1); }

/* footer link hovers: brand green */
html[data-theme="dark"] .footer-links-list a:hover,
body.dark-mode .footer-links-list a:hover { color: var(--brand-soft); }

html[data-theme="dark"] .footer-links-list a:hover::before,
body.dark-mode .footer-links-list a:hover::before { background: var(--brand); }

html[data-theme="dark"] .sz-footer-meta a:hover,
body.dark-mode .sz-footer-meta a:hover { color: var(--brand-soft); }

html[data-theme="dark"] .sz-footer-nl-msg,
body.dark-mode .sz-footer-nl-msg { color: #C9F73C; }

/* --- active states: pinned ink/volt literals → identity blue --------- */
html[data-theme="dark"] :is(.fp-toggle.is-active, .st-toggle.is-active, .sixes-tab-btn.active, .schedule-sport-tab.active, .sz-sc-tab.active, .pagination-container span.page-numbers.current, .header-search-btn.active),
body.dark-mode :is(.fp-toggle.is-active, .st-toggle.is-active, .sixes-tab-btn.active, .schedule-sport-tab.active, .sz-sc-tab.active, .pagination-container span.page-numbers.current, .header-search-btn.active) {
  background: var(--brand);
  color: var(--volt-ink, #17230A);
  border-color: var(--brand-text);
}

html[data-theme="dark"] :is(.fp-search-list, .st-search-list) li:hover,
html[data-theme="dark"] :is(.fp-search-list, .st-search-list) li.is-active,
body.dark-mode :is(.fp-search-list, .st-search-list) li:hover,
body.dark-mode :is(.fp-search-list, .st-search-list) li.is-active { background: var(--brand); color: var(--brand-ink, #FFFFFF); }

html[data-theme="dark"] .st-search-list li:hover .st-so-name,
html[data-theme="dark"] .st-search-list li.is-active .st-so-name,
body.dark-mode .st-search-list li:hover .st-so-name,
body.dark-mode .st-search-list li.is-active .st-so-name { color: var(--brand-ink, #FFFFFF); }

html[data-theme="dark"] .st-search-list li:hover .st-so-meta,
html[data-theme="dark"] .st-search-list li.is-active .st-so-meta,
body.dark-mode .st-search-list li:hover .st-so-meta,
body.dark-mode .st-search-list li.is-active .st-so-meta { color: var(--brand-ink-soft, rgba(255, 255, 255, 0.78)); }

html[data-theme="dark"] :is(.fp-panel-close:hover, .st-measure-close:hover, .fp-search-list li:hover),
body.dark-mode :is(.fp-panel-close:hover, .st-measure-close:hover) { background: var(--brand); color: var(--brand-ink, #FFFFFF); }

/* selected collections / presets: growth green */
html[data-theme="dark"] :is(.fp-preset-btn.is-active, .st-preset-btn.is-active, .st-region-btn.is-active),
body.dark-mode :is(.fp-preset-btn.is-active, .st-preset-btn.is-active, .st-region-btn.is-active) {
  background: #C9F73C;
  border-color: #C9F73C;
  color: #17230A;
}

/* --- CTAs: action orange --------------------------------------------- */
html[data-theme="dark"] :is(.st-card-view, .st-drawer-apply, .st-cmpbar-go),
body.dark-mode :is(.st-card-view, .st-drawer-apply, .st-cmpbar-go) {
  background: #E8442B;
  background: var(--grad-hot);
  color: #FFFFFF;
}

html[data-theme="dark"] .st-card-view:hover,
body.dark-mode .st-card-view:hover { background: #C0341F; color: #FFFFFF; }

html[data-theme="dark"] .st-compare-bar,
body.dark-mode .st-compare-bar { background: #0C1118; border-color: var(--brand-text); }

/* --- growth numbers: stats & scores in green -------------------------- */
html[data-theme="dark"] :is(.post-views-chip, .sz-sc-score, .distance-number),
body.dark-mode :is(.post-views-chip, .sz-sc-score, .distance-number) { color: #C9F73C; }

/* --- house easing on the interactive basics (both themes) ------------- */
:is(a, button, .news-card, .st-card, .fp-toggle, .st-toggle) {
  transition-timing-function: var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
}

/* neon: home score-rail cards drop the old green gradient for ink surfaces */
html[data-theme="dark"] .sz-rail-card,
body.dark-mode .sz-rail-card {
  background: #0C1118 !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* edition strip live-scores link: lime → growth green */
html[data-theme="dark"] .sz-edition-strip a,
body.dark-mode .sz-edition-strip a { color: #C9F73C; }

/* neon: header CTA becomes action orange (was volt lime) */
html[data-theme="dark"] .sz-mast-install,
body.dark-mode .sz-mast-install {
  background: #E8442B;
  background-image: linear-gradient(135deg, #E8442B 0%, #C0341F 100%);
  color: #FFFFFF;
  border-color: transparent;
}

html[data-theme="dark"] .sz-mast-install:hover,
body.dark-mode .sz-mast-install:hover { background: #C0341F; color: #FFFFFF; }

/* --- neon: header & footer sit on the theme background colors ---------- */
/* header merges with the page canvas; the thin stripe is its only edge */
html[data-theme="dark"] .mast,
body.dark-mode .mast { background: #070A0F; }

/* footer: drop the old pine gradient + lime glow for flat ink surfaces */
html[data-theme="dark"] .sz-footer,
body.dark-mode .sz-footer {
  background: #0C1118;
  color: #98A2B3;
}

html[data-theme="dark"] .sz-footer :is(h1, h2, h3, h4, .footer-heading, .sz-footer-brand-title),
body.dark-mode .sz-footer :is(h1, h2, h3, h4, .footer-heading, .sz-footer-brand-title) { color: #F2F5F9; }

html[data-theme="dark"] .sz-footer a,
body.dark-mode .sz-footer a { color: #98A2B3; }

html[data-theme="dark"] .sz-footer-bottom,
body.dark-mode .sz-footer-bottom {
  border-top-color: rgba(255, 255, 255, 0.08);
  color: #828C9C;
}

/* ============================================================
   23 · PAGE EXPLAINERS — how-to strips, glossary cards, glance
   tiles and the stadium ground legend (stadiums + fielding).
   ============================================================ */

/* 3-step how-to strip */
.sz-howto {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}

.sz-howto li {
  flex: 1 1 240px;
  display: block;
  padding: 10px 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}

.sz-howto li strong {
  font-family: var(--font-headline);
  font-weight: 700;
  color: var(--brand-text);
  margin-right: 5px;
}

.sz-howto li em { font-style: normal; font-weight: 600; color: var(--ink); }

/* glossary / basics cards */
.sz-explain { margin: 34px 0 56px; }

.sz-explain-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 16px;
}

.sz-explain-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--brand);
  border-radius: var(--radius-md);
  padding: 16px 17px;
  box-shadow: var(--shadow-card);
}

.sz-explain-card h3 {
  font-family: var(--font-headline);
  font-size: 14.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 7px;
  color: var(--ink);
}

.sz-explain-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--ink-2);
}

/* stadium panel: boundary-at-a-glance tiles */
.st-glance {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 4px 0 14px;
}

.st-glance-tile {
  background: var(--recess);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: 10px 8px 9px;
  text-align: center;
}

.st-glance-num {
  display: block;
  font-family: var(--font-score);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--brand-text);
}

html[data-theme="dark"] .st-glance-num,
body.dark-mode .st-glance-num { color: #C9F73C; }

.st-glance-lbl {
  display: block;
  margin-top: 3px;
  font-family: var(--font-score);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.st-glance-note {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--ink-4);
}

/* stadium ground legend (mirrors the fielding page's) */
.st-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 12px;
  font-family: var(--font-score);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.st-leg-item { display: inline-flex; align-items: center; gap: 6px; }

.st-leg-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
}

.st-leg-reported { background: #C9F73C; border: 2px solid #131A10; }
.st-leg-modelled { background: #F4F3ED; border: 2px dashed #131A10; }

.st-leg-line {
  width: 20px;
  height: 0;
  border-top: 2px dashed var(--ink-3);
  display: inline-block;
}

.st-leg-batter {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  background: #C9F73C;
  border: 2px solid #131A10;
  box-shadow: 0 0 0 2px rgba(201, 247, 60, 0.35);
}

.st-leg-note {
  flex-basis: 100%;
  font-family: var(--font-body);
  font-size: 12.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-4);
}

/* dark mode: legend chips follow the neon accents */
html[data-theme="dark"] .st-leg-reported,
body.dark-mode .st-leg-reported { background: #C9F73C; border-color: #17230A; }

html[data-theme="dark"] .st-leg-batter,
body.dark-mode .st-leg-batter { background: #C9F73C; border-color: #17230A; box-shadow: 0 0 0 2px rgba(201, 247, 60, 0.35); }

@media (max-width: 1020px) {
  .sz-explain-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .sz-explain-grid { grid-template-columns: 1fr; }
  .sz-howto li { flex-basis: 100%; }
  .st-glance-num { font-size: 19px; }
}

/* --- §23b · phone compaction for the explainer/control stacks ---------- */
@media (max-width: 640px) {
  /* slim 3-step strips */
  .sz-howto { gap: 6px; margin-bottom: 10px; }
  .sz-howto li {
    padding: 8px 11px;
    font-size: 12px;
    line-height: 1.4;
  }

  /* fielding page: keep the subtitle on phones (it carries the fielding-
     positions reference link) — just compact it */
  .fp-header .page-subtitle {
    font-size: 13px;
    line-height: 1.55;
    margin-top: 6px;
  }
  .fp-header { margin-bottom: 12px; }

  /* fielding presets: one swipeable row instead of two wrapped rows */
  .fp-presets {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  }
  .fp-presets .fp-preset-btn,
  .fp-presets .fp-presets-label { flex-shrink: 0; }

  /* fielding controls: hand/side/ring groups pair up, buttons stretch */
  .fp-controls { gap: 7px; margin-bottom: 8px; }
  .fp-search-wrap { flex: 1 1 100%; }
  .fp-controls .fp-toggle-group { flex: 1 1 45%; display: flex; }
  .fp-controls .fp-toggle-group .fp-toggle { flex: 1; padding: 12px 6px; }
}

/* --- §23c · fielding glossary + FAQ + related links -------------------- */
.fp-glossary { margin: 34px 0 10px; }

.fp-glossary-intro {
  margin: 10px 0 18px;
  font-size: 14px;
  color: var(--ink-3);
  max-width: 640px;
}

.fp-glossary-list {
  margin: 0;
  columns: 2;
  column-gap: 28px;
}

.fp-glossary-list dt {
  break-inside: avoid;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 3px;
}

.fp-gloss-term {
  border: none;
  background: none;
  padding: 0;
  font-family: var(--font-headline);
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-text);
  cursor: pointer;
  text-align: left;
}

.fp-gloss-term:hover { text-decoration: underline; text-underline-offset: 3px; }

.fp-gloss-term:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

.fp-gloss-side {
  font-family: var(--font-score);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.fp-glossary-list dd {
  break-inside: avoid-column;
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* FAQ accordions */
.fp-faq { margin: 34px 0 24px; }

.fp-faq-list { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }

.fp-faq-item {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: 0;
  overflow: hidden;
}

.fp-faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  font-family: var(--font-headline);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  min-height: 44px;
}

.fp-faq-item summary::-webkit-details-marker { display: none; }

.fp-faq-item summary::after {
  content: '+';
  font-size: 18px;
  color: var(--brand-text);
  flex-shrink: 0;
}

.fp-faq-item[open] summary::after { content: '–'; }

.fp-faq-item p {
  margin: 0;
  padding: 0 16px 15px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-2);
}

/* related guides strip */
.fp-morelinks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 40px;
}

.fp-morelinks a {
  padding: 11px 16px;
  background: var(--paper);
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius-pill);
  font-family: var(--font-headline);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-2);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.fp-morelinks a:hover { border-color: var(--brand-text); color: var(--brand-text); }

@media (max-width: 760px) {
  .fp-glossary-list { columns: 1; }
}

/* --- §23d · stadium country directory ---------------------------------- */
.st-directory { margin: 34px 0 10px; }

.st-directory-intro {
  margin: 10px 0 18px;
  font-size: 14px;
  color: var(--ink-3);
  max-width: 640px;
}

.st-directory-grid {
  columns: 3;
  column-gap: 28px;
}

.st-dir-group {
  break-inside: avoid;
  margin-bottom: 20px;
}

.st-dir-group h3 {
  font-family: var(--font-headline);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--rule-strong);
  color: var(--ink);
}

.st-dir-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.st-dir-group a {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
  border-bottom: none;
  display: inline-block;
  padding: 2px 0;
}

.st-dir-group a:hover { color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1020px) {
  .st-directory-grid { columns: 2; }
}

@media (max-width: 640px) {
  .st-directory-grid { columns: 1; }
  .st-dir-group a { padding: 6px 0; }   /* comfy touch rows on phones */
}

/* --- §23e · interactive-ground feel: hover growth + touch-size halos --- */
.fp-dot-core,
.st-anchor-dot {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), stroke 0.15s ease;
}

.fp-dot:hover .fp-dot-core,
.fp-dot:focus-visible .fp-dot-core { transform: scale(1.4); }

.fp-dot.is-selected .fp-dot-core { transform: scale(1.5); }

.st-anchor:hover .st-anchor-dot,
.st-anchor:focus-visible .st-anchor-dot { transform: scale(1.45); }

.st-anchor.is-selected .st-anchor-dot { transform: scale(1.55); }

/* distance captions lift slightly with their anchor */
.st-anchor:hover .st-anchor-txt,
.st-anchor.is-selected .st-anchor-txt { font-weight: 700; fill: #FFFFFF; }

/* touch devices: much larger invisible hit halos (r is a CSS geometry
   property in SVG2 — modern mobile browsers all support it) */
@media (pointer: coarse) {
  .fp-dot-halo { r: 20px; }
  .fp-dot-close .fp-dot-halo { r: 13px; }   /* the slip cordon is tight — keep neighbours reachable */
  .st-anchor-halo { r: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .fp-dot-core, .st-anchor-dot { transition: none; }
  .fp-dot:hover .fp-dot-core,
  .fp-dot.is-selected .fp-dot-core,
  .st-anchor:hover .st-anchor-dot,
  .st-anchor.is-selected .st-anchor-dot { transform: none; }
}

/* --- §23f · heavy display weight -----------------------------------------
   Space Grotesk tops out at 700, and body-wide font-synthesis is off (thin
   text must never be fake-bolded). Section titles, category chips and other
   headline furniture DO want the extra punch of their requested 800 — so we
   re-enable weight synthesis just for them and pin the request to 800. */
.section-title,
.page-title,
.category-badge,
.news-card .category-badge,
.news-card-title,
.sz-ticker-title,
.sz-ticker-badge,
.rail-kicker,
.st-panel-title,
.fp-panel-title,
.fp-pos-name,
.st-ms-title,
.fp-glossary .section-title,
.st-dir-group h3,
.sz-explain-card h3,
.fp-faq-item summary,
.st-glance-num,
.footer-heading,
.sz-footer .fp-morelinks a,
.st-card-name {
  font-synthesis: weight;
  font-synthesis-weight: auto;
  font-weight: 800;
}

/* tiny uppercase chips read crisper with a touch more tracking when heavy */
.category-badge,
.sz-ticker-badge { letter-spacing: 0.09em; }

/* --- §23g · homepage slider on phones: match the artwork ---------------
   Featured images are 16:9 (1920×1080). The old 4:5 portrait frame cover-
   cropped ~64% of the width — players got chopped in half (user report,
   2026-07-16). A 16:9 frame shows the FULL image with zero cropping; the
   overlay text is sized down to sit comfortably in the shorter frame. */
@media (max-width: 640px) {
  /* 4:3 — taller card on phones; moderate side crop (~25% total) that
     still keeps players whole in typical centred sports artwork. */
  .home-slider-container { aspect-ratio: 4 / 3; }

  .slide-overlay { padding-bottom: 28px; }

  .slide-title {
    font-size: clamp(14px, 4.2vw, 18px);
    margin-bottom: 6px;
    line-height: 1.18;
  }

  .slide-overlay .category-badge { margin-bottom: 6px; }

  .slide-meta { font-size: 9.5px; }

  .slide-dots { right: 12px; bottom: 10px; }
}

/* ============================================================
   24 · WEB STORIES — homepage rail + /web-stories/ archive
   ============================================================ */
.home-webstories { margin: 34px 0 26px; }

.home-webstories-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.ws-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.ws-viewall {
  font-family: var(--font-headline);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brand-text);
  border: none;
  white-space: nowrap;
}

.ws-rail {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 2px 12px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}

.ws-rail::-webkit-scrollbar { height: 6px; }
.ws-rail::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: 999px; }

/* --- story card (shared by rail + archive grid) --- */
.ws-card {
  position: relative;
  flex: 0 0 150px;
  aspect-ratio: 3 / 4.6;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: none;
  scroll-snap-align: start;
  display: block;
  background: var(--grad-ink);
  box-shadow: var(--shadow-card);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease;
}

.ws-card:hover { transform: translateY(-4px) scale(1.02); box-shadow: var(--shadow-hover); }

/* story ring — the tri-color broadcast stripe in both themes */
.ws-ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, #19B8FF 0%, #19B8FF 33%, #FF7A1A 33%, #FF7A1A 66%, #2CE58C 66%, #2CE58C 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: 4;
  pointer-events: none;
}

.ws-poster {
  position: absolute;
  inset: 0;
  display: block;
}

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

.ws-poster::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(5, 8, 5, 0.86) 100%);
}

.ws-poster-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  text-align: center;
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: rgba(244, 243, 237, 0.28);
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(201, 247, 60, 0.20), transparent 55%),
    radial-gradient(120% 90% at 90% 100%, rgba(201, 247, 60, 0.18), transparent 55%),
    #10151C;
}

.ws-title {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  font-family: var(--font-headline);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  color: #F2F5F9;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ws-badge {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 3;
  font-family: var(--font-score);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: rgba(7, 10, 15, 0.72);
  color: #C9F73C;
}

/* --- archive grid --- */
.ws-archive-container .page-header { margin-bottom: 22px; }

.ws-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.ws-card-grid { flex: none; width: 100%; }

.ws-pagination { margin-top: 28px; }

@media (max-width: 1020px) {
  .ws-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .ws-card { flex-basis: 128px; }
  .ws-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .ws-title { font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .ws-card:hover { transform: none; }
}

/* ============================================================
   25 · SPORTMONKS API BLOCKS ON LEAGUE/TEAM PAGES
   The live data injected into the editorial /cricket-leagues/…
   and team pages sits inside the SAME white panel as the page's
   own sections (.sz-subpage-section), for one continuous rhythm
   instead of bare grids on the dotted canvas. Lives in the theme
   so it always loads with these page templates.
   ============================================================ */
.sz-smp-inpage {
  /* Transparent wrapper (user 2026-07-15): only the inner boxes/cards keep
     surfaces — the section itself sits on the page wash, and dropping the
     panel padding removes the doubled spacing it created. */
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0 0 var(--space-8, 34px);
}
.sz-smp-inpage > .sz-smp-tagline:first-child { margin-top: 0; }
.sz-smp-inpage .sz-smp-h:first-of-type { margin-top: 18px; }
.sz-smp-inpage > :last-child { margin-bottom: 0; }
.sz-smp-inpage .sz-sc-grid:last-child { margin-bottom: 0; }

/* The wrapper is transparent now — inner cards keep their normal card look
   (paper surface + card shadow), same as boxes everywhere else. */
.sz-smp-inpage .sz-squadp { background: var(--paper, #fff); }

@media (max-width: 640px) {
  .sz-smp-inpage { padding: 0; }
}

/* ============================================================
   26 · CRICKET SHOTS — interactive wagon-wheel explainer
   Reuses the fielding page's .fp-* component system (ground,
   dots, panel, glossary, FAQ, dark mode). This section only
   adds what's new: shot-family colours, the wagon-wheel wedge,
   flight lines, ghost fielders and the risk meter.
   ============================================================ */
#csGround {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: var(--shadow-card);
}

#csZones, #csGhosts { pointer-events: none; }

/* --- shot-family colours (pinned literals: they sit on SVG turf,
       which stays green in both light and dark modes) ------------- */
.cs-fam-def   .fp-dot-core { fill: #F4F3ED; stroke: #131A10; }
.cs-fam-drive .fp-dot-core { fill: #C9F73C; stroke: #131A10; }
.cs-fam-cross .fp-dot-core { fill: #FF5A3C; stroke: #FFFFFF; }
.cs-fam-leg   .fp-dot-core { fill: #12B5A2; stroke: #FFFFFF; }
.cs-fam-sweep .fp-dot-core { fill: #8B6CF5; stroke: #FFFFFF; }
.cs-fam-t20   .fp-dot-core { fill: #F23FA0; stroke: #FFFFFF; }

.cs-leg-def   { background: #F4F3ED; }
.cs-leg-drive { background: #C9F73C; }
.cs-leg-cross { background: #FF5A3C; }
.cs-leg-leg   { background: #12B5A2; }
.cs-leg-sweep { background: #8B6CF5; }
.cs-leg-t20   { background: #F23FA0; }

/* --- wagon-wheel wedge + flight line ---------------------------- */
.cs-wedge {
  stroke-width: 2;
  opacity: 0.85;
}

.cs-wedge.cs-fam-def   { fill: rgba(244, 243, 237, 0.20); stroke: rgba(244, 243, 237, 0.75); }
.cs-wedge.cs-fam-drive { fill: rgba(201, 247, 60, 0.20);  stroke: rgba(201, 247, 60, 0.85); }
.cs-wedge.cs-fam-cross { fill: rgba(255, 90, 60, 0.20);   stroke: rgba(255, 90, 60, 0.85); }
.cs-wedge.cs-fam-leg   { fill: rgba(18, 181, 162, 0.22);  stroke: rgba(18, 181, 162, 0.9); }
.cs-wedge.cs-fam-sweep { fill: rgba(139, 108, 245, 0.22); stroke: rgba(139, 108, 245, 0.9); }
.cs-wedge.cs-fam-t20   { fill: rgba(242, 63, 160, 0.20);  stroke: rgba(242, 63, 160, 0.9); }

.cs-flight {
  stroke: #FFFFFF;
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.9;
}

.cs-flight.is-air    { stroke-dasharray: 4 10; }
.cs-flight.is-either { stroke-dasharray: 18 8; }

/* --- ghost fielders (who's waiting for the selected shot) ------- */
.cs-ghost-ring {
  fill: rgba(19, 26, 16, 0.35);
  stroke: #FFFFFF;
  stroke-width: 2;
  stroke-dasharray: 3 3;
}

.cs-ghost-x { stroke: #FFFFFF; stroke-width: 2.5; stroke-linecap: round; }

.cs-ghost-label {
  font-family: var(--font-score);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  fill: #FFFFFF;
  paint-order: stroke;
  stroke: rgba(8, 22, 13, 0.85);
  stroke-width: 3px;
  stroke-linejoin: round;
}

/* --- family chip in the panel ------------------------------------
       chips are 10px text, so backgrounds are DARKER variants of the
       family colours — every pair measures ≥4.5:1 (WCAG AA). The
       brighter literals stay on the SVG dots/wedges (non-text). ----- */
.cs-chip-fam { color: #131A10; }
.cs-chip-fam.cs-fam-def   { background: #F4F3ED; border: 1px solid rgba(19, 26, 16, 0.25); }
.cs-chip-fam.cs-fam-drive { background: #C9F73C; }
.cs-chip-fam.cs-fam-cross { background: #C93A1B; color: #FFFFFF; }
.cs-chip-fam.cs-fam-leg   { background: #0B7A6E; color: #FFFFFF; }
.cs-chip-fam.cs-fam-sweep { background: #6247C9; color: #FFFFFF; }
.cs-chip-fam.cs-fam-t20   { background: #C21A75; color: #FFFFFF; }

/* tooltip must be hoverable, not just dismissible (WCAG 1.4.13) */
.cs-page .fp-tooltip { pointer-events: auto; }

.cs-page .fp-chip-row { flex-wrap: wrap; }

/* --- risk meter --------------------------------------------------- */
.cs-risk-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 2px 0 6px;
}

.cs-risk-label {
  font-family: var(--font-score);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

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

.cs-risk-block {
  width: 16px;
  height: 9px;
  border-radius: 2px;
  background: var(--recess, #EAE8DE);
  border: 1px solid var(--rule-strong);
}

.cs-risk-block.is-on { border-color: transparent; }
.cs-risk-block.is-on.r1 { background: #C9F73C; }
.cs-risk-block.is-on.r2 { background: #7CB518; }
.cs-risk-block.is-on.r3 { background: #E8A200; }
.cs-risk-block.is-on.r4 { background: #E8632B; }
.cs-risk-block.is-on.r5 { background: #E8442B; }

.cs-risk-word {
  font-family: var(--font-headline);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* --- "who's waiting" links ---------------------------------------- */
.cs-stoppers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cs-stoppers a {
  display: inline-block;
  padding: 5px 11px;
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius-pill);
  font-family: var(--font-score);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  transition: background 0.15s var(--ease, ease), color 0.15s var(--ease, ease);
}

.cs-stoppers a:hover { background: #131A10; color: #C9F73C; }

/* --- dark mode ----------------------------------------------------- */
html[data-theme="dark"] .cs-fam-def .fp-dot-core,
body.dark-mode .cs-fam-def .fp-dot-core { fill: #E9E7DC; }

html[data-theme="dark"] .cs-leg-def,
body.dark-mode .cs-leg-def { background: #E9E7DC; }

html[data-theme="dark"] .cs-stoppers a:hover,
body.dark-mode .cs-stoppers a:hover { background: var(--brand); color: var(--brand-ink, #FFFFFF); }

html[data-theme="dark"] .cs-risk-block,
body.dark-mode .cs-risk-block { background: rgba(255, 255, 255, 0.07); }

html[data-theme="dark"] .cs-risk-block.is-on.r1,
body.dark-mode .cs-risk-block.is-on.r1 { background: #C9F73C; }

/* --- phones --------------------------------------------------------- */
@media (max-width: 560px) {
  .cs-ghost-label { font-size: 15px; }
  .cs-risk-block { width: 13px; }
}

/* ============================================================
   29 · "READ ALSO" CARDS — inline related-post cards inside
   article content (thumbnail · category · title).
   ============================================================ */
.sz-readalso {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--brand);
  border-radius: 6px;
  padding: 12px 14px;
  margin: 22px 0;
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: border-color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.site-main .entry-content a.sz-readalso { border-bottom: none; }
.sz-readalso:hover { border-color: var(--brand-deep); transform: translateX(2px); }
.sz-ra-thumb { flex: none; width: 72px; height: 72px; border-radius: 4px; overflow: hidden; }
.sz-ra-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; }
.sz-ra-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sz-ra-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-headline);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-deep);
}
.sz-ra-cat {
  color: var(--paper);
  background: var(--cat, var(--brand));
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.08em;
}
.sz-ra-title {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.3;
  color: var(--ink);
}
.sz-readalso:hover .sz-ra-title { color: var(--brand-deep); }
.sz-ra-arrow { margin-left: auto; flex: none; color: var(--ink-3); font-size: 20px; font-weight: 700; }
@media (max-width: 640px) {
  .sz-ra-thumb { width: 56px; height: 56px; }
  .sz-ra-title { font-size: 14px; }
}

/* ============================================================
   30 · MOBILE NAV BAR v2 — Home · Cricket | ⚡SCORES | Football · Leagues
   The Scores tab is the raised centre orb, app-style.
   ============================================================ */
@media (max-width: 900px) {
  .sz-tabbar a.sz-tab-center { padding-top: 0; overflow: visible; }

  .sz-tab-orb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin-top: -20px;
    background: var(--brand);
    background: var(--grad-brand);
    color: var(--brand-ink, #FFFFFF);
    border: 3px solid var(--paper);
    box-shadow: 0 6px 16px -6px var(--brand-glow), 0 3px 8px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s var(--ease-out);
  }

  .sz-tabbar a.sz-tab-center span:last-child {
    color: var(--brand-deep);
    font-weight: 800;
    margin-top: 2px;
  }

  .sz-tabbar a.sz-tab-center:active .sz-tab-orb { transform: scale(0.94); }

  /* LIVE tick: a tiny accent dot on the orb so Scores reads as "live". */
  .sz-tab-orb::after {
    content: '';
    position: absolute;
    top: -1px;
    right: -1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--paper);
  }

  @media (prefers-reduced-motion: reduce) {
    .sz-tab-orb { transition: none; }
  }
}

/* ============================================================
   31 · READER MODE (article pages only) — clean white reading
   surface in light mode (the halftone dots fight body text),
   2 alternate page colours, and 3 text sizes (both modes).
   ============================================================ */

/* Light mode: plain white page, dots off. Dark mode untouched. */
html:not([data-theme="dark"]) body.single-post:not(.dark-mode) { background: #FFFFFF; }
html:not([data-theme="dark"]) body.single-post:not(.dark-mode)::before { content: none; }

/* Optional reading tints (light mode only, chosen in the toolbar). */
html:not([data-theme="dark"]) body.single-post.sz-rb-sepia:not(.dark-mode) { background: #F6EFE1; }
html:not([data-theme="dark"]) body.single-post.sz-rb-gray:not(.dark-mode)  { background: #EFF1EE; }

/* Text sizes — apply in light AND dark. */
body.sz-rs-s .entry-content { font-size: 15px; }
body.sz-rs-l .entry-content { font-size: 19.5px; }

/* The toolbar. */
.sz-reader-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 8px 12px;
  background: var(--recess);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  width: fit-content;
}
.sz-rt-label {
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 13px;
  color: var(--ink-3);
}
.sz-rt-size {
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 12px;
  color: var(--ink-2);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pill);
  padding: 5px 11px;
  cursor: pointer;
  line-height: 1;
}
.sz-rt-size:hover { border-color: var(--brand-deep); color: var(--brand-deep); }
.sz-rt-swatches { display: flex; gap: 6px; margin-left: 4px; }
.sz-rt-bg {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sw, #fff);
  border: 2px solid var(--rule-strong);
  cursor: pointer;
  padding: 0;
}
.sz-rt-bg.is-on { border-color: var(--brand-deep); box-shadow: 0 0 0 2px var(--brand-glow); }

/* Dark mode: hide the colour swatches (size buttons stay). */
html[data-theme="dark"] .sz-rt-swatches,
body.dark-mode .sz-rt-swatches { display: none; }

/* Reader text-size steps also scale the lead (first) paragraph. */
body.sz-rs-s .single-post-container .entry-content > p:first-of-type { font-size: 16px; }
body.sz-rs-l .single-post-container .entry-content > p:first-of-type { font-size: 21px; }

/* Ticker links always keep their ink on the lime band (any mode, any hover). */
.sz-breaking-ticker .sz-ticker-item a:hover { color: var(--volt-ink, #17230A); }

/* "More <category> →" — pinned to the bottom of the side list, soaks up the
   column remainder so the box never shows dead space under the items. */
.bento-list-more {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 13px 16px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-headline);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-text);
  text-decoration: none;
  transition: background-color 0.2s var(--ease-out);
}
.bento-list-more:hover { background: var(--brand-wash); color: var(--brand-text); }

/* ============================================================
   32 · NEWS TICKER v2 — rebuilt engine, ORIGINAL volt-strip design
   (identical look to the classic .sz-breaking-ticker: black chip
   with lime label text, edge-fade mask, coral pulse).
   ============================================================ */
.sz-newsticker {
  --sznt-fs: 12.5px;
  --sznt-badge-fs: 8px;
  --sznt-label-fs: 10px;
  display: flex;
  align-items: stretch;
  height: 29px;
  background: var(--volt, #C9F73C);
  border-bottom: 1px solid rgba(23, 35, 10, 0.35);
  overflow: hidden;
  position: relative;
  z-index: 5;
}
html[data-theme="dark"] .sz-newsticker,
body.dark-mode .sz-newsticker { border-bottom-color: rgba(255, 255, 255, 0.1); }

/* The BREAKING chip — classic black slab, lime label, slanted edge,
   left padding lines the text up with the 1100px container. */
.sznt-label {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0E130A;
  color: #C9F73C;
  font-family: var(--font-headline, sans-serif);
  font-size: var(--sznt-label-fs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  padding: 9px 26px 9px max(calc((100vw - 1100px) / 2 + 20px), 20px);
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  position: relative;
  z-index: 2;
}
html[data-theme="dark"] .sznt-label,
body.dark-mode .sznt-label { background: #070A0F; }

.sznt-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FF5A3C;
  animation: sznt-pulse 1.6s infinite;
  flex-shrink: 0;
}
@keyframes sznt-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Headlines fade in/out at the strip's edges, like the original. */
.sznt-viewport {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 30px), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 30px), transparent);
}
.sznt-track {
  display: flex;
  width: max-content;
  animation: sznt-scroll var(--sznt-dur, 44s) linear infinite;
  /* second line of defence against text autosizing in the wide track */
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
.sz-newsticker:hover .sznt-track,
.sz-newsticker:focus-within .sznt-track { animation-play-state: paused; }
@keyframes sznt-scroll { to { transform: translateX(-50%); } }

.sznt-group {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sznt-item { flex: none; display: flex; }
.sznt-item a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 32px 0 14px;
  text-decoration: none;
  border: none;
}
.sznt-badge {
  flex: none;
  font-family: var(--font-score, monospace);
  font-size: var(--sznt-badge-fs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 3px;
  background: var(--volt-ink, #17230A);
  color: var(--volt, #C9F73C);
}
.sznt-text {
  font-family: var(--font-body, sans-serif);
  font-size: var(--sznt-fs);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--volt-ink, #17230A);
  white-space: nowrap;
}
.sznt-item a:hover .sznt-text,
.sznt-item a:focus-visible .sznt-text {
  color: var(--volt-ink, #17230A);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.sznt-item a:focus-visible { outline: 2px solid var(--volt-ink, #17230A); outline-offset: -2px; border-radius: 3px; }

/* Phones — the classic compact strip; item size stays a uniform 12px. */
@media (max-width: 760px) {
  .sz-newsticker {
    --sznt-fs: 12px;
    --sznt-badge-fs: 8px;
    --sznt-label-fs: 9px;
    height: 25px;
  }
  .sznt-label {
    gap: 5px;
    padding: 6px 12px 6px 14px;
    letter-spacing: 0.08em;
    clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  }
  .sznt-pulse { width: 6px; height: 6px; }
  .sznt-item a { padding: 0 18px 0 8px; gap: 6px; }
  .sznt-badge { padding: 2px 6px; letter-spacing: 0.08em; }
}

@media (prefers-reduced-motion: reduce) {
  .sznt-track { animation: none; }
  .sznt-viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sznt-group[aria-hidden="true"] { display: none; }
  .sznt-pulse { animation: none; }
}

/* ============================================================
   33 · PAGE EDITORIAL — content written in the WP page editor,
   rendered at the bottom of the custom feature templates.
   ============================================================ */
.sz-page-editorial {
  margin-top: 38px;
  padding-top: 8px;
}

/* Editor color presets: WP prints --wp--preset--color--* from the literal
   light palette; remap the vars in dark mode so colors picked in the editor
   stay legible on dark surfaces. Lime stays literal — same in both modes. */
html[data-theme="dark"],
html[data-theme="dark"] body,
body.dark-mode {
  --wp--preset--color--pitch-green: var(--brand-text);
  --wp--preset--color--deep-green: var(--brand-deep);
  --wp--preset--color--soft-green: var(--brand-soft);
  --wp--preset--color--vermilion: var(--accent);
  --wp--preset--color--ink: var(--ink);
  --wp--preset--color--newsprint: var(--canvas);
  --wp--preset--color--paper-white: var(--paper);
}

/* Pairing guards. Lime never flips (highlight family, same in both modes), so
   inside a lime-filled block the remap above would put near-white ink text on
   lime (~1.1:1) — re-pin every preset to its light literal there: the surface
   is light, so the light pairings are the correct ones. Ink surfaces get the
   mirror treatment: the author chose a dark band, keep it dark with its
   light-mode partners. */
html[data-theme="dark"] .has-stadium-lime-background-color,
body.dark-mode .has-stadium-lime-background-color {
  --wp--preset--color--pitch-green: #0B7A43;
  --wp--preset--color--deep-green: #075231;
  --wp--preset--color--soft-green: #2AA36A;
  --wp--preset--color--vermilion: #E8442B;
  --wp--preset--color--ink: #131A10;
  --wp--preset--color--newsprint: #F4F3ED;
  --wp--preset--color--paper-white: #FFFFFF;
}

html[data-theme="dark"] .has-ink-background-color,
body.dark-mode .has-ink-background-color {
  --wp--preset--color--ink: #131A10;
  --wp--preset--color--paper-white: #FFFFFF;
  --wp--preset--color--newsprint: #F4F3ED;
  --wp--preset--color--stadium-lime: #C9F73C;
}