/* ==========================================================================
   SPORTZCRAZY — Design System
   Sports News, Live Scores & Fan Community
   --------------------------------------------------------------------------
   Naming convention : szc-block__element--modifier  (all classes prefixed szc-)
   Utilities         : u-* (layout/spacing helpers only)
   State hooks       : is-* / has-* (toggled by JS, never styled standalone)
   Theme             : permanent dark magazine. No light mode.
   Geometry          : border-radius 0–3px ONLY. Avatars are the sole exception.
   Type              : Oswald (display, condensed, UPPERCASE) / Inter (body) /
                       Roboto Mono (numerals: scores, stats, counters)
   --------------------------------------------------------------------------
   TABLE OF CONTENTS
   01. Fonts & Tokens
   02. Reset & Base
   03. Typography primitives
   04. Layout shells & grids
   05. Buttons & chips
   06. Section headings & rules
   07. Header / Nav / Mega menu / Live strip
   08. Ticker
   09. Hero & lead story
   10. Article cards (lead / standard / compact / video)
   11. Trending rail & most-read
   12. Live score cards & match centre
   13. Standings table & statistics
   14. Profile cards (player / team)
   15. Ranking list (oversized numerals)
   16. Poll widget
   17. Podcast / episode rows
   18. Byline, share row, breadcrumbs, pagination
   19. Forms (newsletter / contact)
   20. FAQ accordion & tabs
   21. Counters, quotes, logo strip, CTA band
   22. Page hero (interior) & forum teaser
   23. Footer
   24. Floating UI (WhatsApp, back-to-top, cookie, progress)
   25. Scroll reveal & motion utilities
   26. Utilities
   27. Responsive
   28. Reduced motion & print
   ========================================================================== */

/* ---------- 01. FONTS & TOKENS ------------------------------------------ */
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Roboto+Mono:wght@400;500;700&display=swap");

:root {
  /* surfaces */
  --szc-bg:          #0a0a0c;
  --szc-surface:     #141419;
  --szc-elevated:    #1c1c22;
  --szc-sunken:      #060608;
  --szc-line:        #2a2a32;
  --szc-line-soft:   #1f1f26;

  /* ink */
  --szc-ink:         #ffffff;
  --szc-ink-dim:     #c6c6ce;
  --szc-meta:        #8b8b96;
  --szc-meta-faint:  #61616c;

  /* accents — signal red primary, electric amber secondary. Nothing else. */
  --szc-red:         #e8112d;
  --szc-red-dark:    #b30d22;
  --szc-red-glow:    rgba(232, 17, 45, .28);
  --szc-amber:       #ffb800;
  --szc-amber-dim:   rgba(255, 184, 0, .16);

  /* type */
  --szc-font-display: "Oswald", "Arial Narrow", sans-serif;
  --szc-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --szc-font-mono:    "Roboto Mono", ui-monospace, "SFMono-Regular", monospace;

  /* scale */
  --szc-step--1: .75rem;
  --szc-step-0:  .9375rem;
  --szc-step-1:  1.0625rem;
  --szc-step-2:  1.375rem;
  --szc-step-3:  1.75rem;
  --szc-step-4:  2.25rem;
  --szc-step-5:  3rem;
  --szc-step-6:  4rem;

  /* rhythm */
  --szc-gap:        24px;
  --szc-gap-sm:     14px;
  --szc-gap-lg:     40px;
  --szc-shell:      1320px;
  --szc-shell-wide: 1560px;
  --szc-band:       clamp(48px, 6vw, 88px);

  /* geometry — sharp by mandate */
  --szc-radius:     0px;
  --szc-radius-nub: 2px;
  --szc-rail:       3px;          /* the red left-border signature */

  /* motion — fast + snappy */
  --szc-fast:   120ms;
  --szc-snap:   160ms;
  --szc-med:    180ms;
  --szc-reveal: 620ms;
  --szc-ease:   cubic-bezier(.2, .7, .3, 1);

  /* chrome */
  --szc-header-h:  66px;
  --szc-strip-h:   44px;
  --szc-shadow:    0 18px 40px -22px rgba(0, 0, 0, .9);
  --szc-z-nav:     600;
  --szc-z-float:   700;
  --szc-z-cookie:  800;
}

/* ---------- 02. RESET & BASE -------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--szc-bg);
  color: var(--szc-ink-dim);
  font-family: var(--szc-font-body);
  font-size: var(--szc-step-0);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

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

a { color: inherit; text-decoration: none; }

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

button { background: none; border: 0; cursor: pointer; padding: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

table { border-collapse: collapse; width: 100%; }

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

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

::selection { background: var(--szc-red); color: #fff; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--szc-sunken); }
::-webkit-scrollbar-thumb { background: #2e2e38; }
::-webkit-scrollbar-thumb:hover { background: var(--szc-red-dark); }

.szc-skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 999;
  background: var(--szc-red);
  color: #fff;
  padding: 10px 18px;
  font-family: var(--szc-font-display);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: top var(--szc-fast) var(--szc-ease);
}
.szc-skip:focus { top: 10px; }

/* ---------- 03. TYPOGRAPHY PRIMITIVES ----------------------------------- */
h1, h2, h3, h4, h5, h6,
.szc-d1, .szc-d2, .szc-d3, .szc-d4 {
  margin: 0;
  font-family: var(--szc-font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: 1.03;
  color: var(--szc-ink);
}

.szc-d1 { font-size: clamp(2.4rem, 5.4vw, var(--szc-step-6)); font-weight: 700; letter-spacing: -.02em; }
.szc-d2 { font-size: clamp(1.9rem, 3.6vw, var(--szc-step-5)); font-weight: 700; letter-spacing: -.015em; }
.szc-d3 { font-size: clamp(1.5rem, 2.5vw, var(--szc-step-4)); }
.szc-d4 { font-size: var(--szc-step-2); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.szc-lede {
  font-size: var(--szc-step-1);
  line-height: 1.62;
  color: var(--szc-ink-dim);
  font-weight: 400;
  max-width: 62ch;
}

.szc-meta {
  font-family: var(--szc-font-body);
  font-size: var(--szc-step--1);
  color: var(--szc-meta);
  letter-spacing: .02em;
}

.szc-meta__dot { color: var(--szc-meta-faint); padding: 0 7px; }

.szc-kicker {
  display: inline-block;
  font-family: var(--szc-font-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--szc-red);
}
.szc-kicker--amber { color: var(--szc-amber); }
.szc-kicker--muted { color: var(--szc-meta); }

.szc-num {
  font-family: var(--szc-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: -.03em;
}

/* the red swipe underline — signature link hover */
.szc-swipe {
  position: relative;
  display: inline;
  background-image: linear-gradient(var(--szc-red), var(--szc-red));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  transition: background-size var(--szc-med) var(--szc-ease);
}
a:hover .szc-swipe,
.szc-swipe:hover { background-size: 100% 2px; }

.szc-linkred {
  color: var(--szc-red);
  font-family: var(--szc-font-display);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color var(--szc-fast) var(--szc-ease), gap var(--szc-fast) var(--szc-ease);
}
.szc-linkred:hover { color: var(--szc-amber); gap: 13px; }

/* ---------- 04. LAYOUT SHELLS & GRIDS ----------------------------------- */
.szc-shell {
  width: 100%;
  max-width: var(--szc-shell);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 40px);
}
.szc-shell--wide { max-width: var(--szc-shell-wide); }
.szc-shell--narrow { max-width: 860px; }

.szc-band { padding-block: var(--szc-band); }
.szc-band--tight { padding-block: clamp(32px, 4vw, 52px); }
.szc-band--surface { background: var(--szc-surface); }
.szc-band--sunken  { background: var(--szc-sunken); }
.szc-band--ruled   { border-top: 1px solid var(--szc-line); }

/* the asymmetric editorial grid: lead | stack | rail */
.szc-editorial {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr) minmax(0, .72fr);
  gap: var(--szc-gap);
  align-items: start;
}

.szc-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: var(--szc-gap-lg);
  align-items: start;
}

.szc-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--szc-gap);
}

.szc-quad {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--szc-gap);
}

.szc-stack { display: grid; gap: var(--szc-gap-sm); }
.szc-stack--lg { gap: var(--szc-gap); }

/* ---------- 05. BUTTONS & CHIPS ----------------------------------------- */
.szc-btn {
  --_bg: var(--szc-red);
  --_fg: #fff;
  --_bd: var(--szc-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 26px;
  background: var(--_bg);
  color: var(--_fg);
  border: 1px solid var(--_bd);
  border-radius: var(--szc-radius);
  font-family: var(--szc-font-display);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--szc-fast) var(--szc-ease),
              color var(--szc-fast) var(--szc-ease),
              border-color var(--szc-fast) var(--szc-ease),
              transform var(--szc-fast) var(--szc-ease);
}
.szc-btn:hover  { --_bg: var(--szc-ink); --_fg: var(--szc-bg); --_bd: var(--szc-ink); }
.szc-btn:active { transform: translateY(1px); }

.szc-btn--ghost   { --_bg: transparent; --_fg: var(--szc-ink); --_bd: var(--szc-line); }
.szc-btn--ghost:hover { --_bg: var(--szc-red); --_fg: #fff; --_bd: var(--szc-red); }
.szc-btn--amber   { --_bg: var(--szc-amber); --_fg: #12120c; --_bd: var(--szc-amber); }
.szc-btn--amber:hover { --_bg: #fff; --_bd: #fff; }
.szc-btn--sm      { padding: 9px 17px; font-size: .74rem; letter-spacing: .12em; }
.szc-btn--block   { width: 100%; }

.szc-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--szc-line);
  background: var(--szc-elevated);
  color: var(--szc-meta);
  font-family: var(--szc-font-display);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  border-radius: var(--szc-radius);
  transition: color var(--szc-fast) var(--szc-ease),
              border-color var(--szc-fast) var(--szc-ease),
              background var(--szc-fast) var(--szc-ease);
}
.szc-chip:hover,
.szc-chip.is-active {
  color: #fff;
  background: var(--szc-red);
  border-color: var(--szc-red);
}
.szc-chip--live { color: var(--szc-red); border-color: rgba(232,17,45,.4); background: rgba(232,17,45,.08); }
.szc-chip--amber { color: var(--szc-amber); border-color: rgba(255,184,0,.35); background: var(--szc-amber-dim); }
.szc-chip--amber:hover { background: var(--szc-amber); color: #12120c; border-color: var(--szc-amber); }

.szc-chipset { display: flex; flex-wrap: wrap; gap: 8px; }

/* live pulse dot */
.szc-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--szc-red);
  box-shadow: 0 0 0 0 var(--szc-red-glow);
  animation: szc-pulse 1.5s infinite;
  flex: none;
}
.szc-pulse--amber { background: var(--szc-amber); box-shadow: 0 0 0 0 rgba(255,184,0,.3); }

@keyframes szc-pulse {
  0%   { box-shadow: 0 0 0 0 var(--szc-red-glow); }
  70%  { box-shadow: 0 0 0 8px rgba(232, 17, 45, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 17, 45, 0); }
}

/* ---------- 06. SECTION HEADINGS & RULES -------------------------------- */
/* uppercase label + hairline rule running to the right edge */
.szc-sechead {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 26px;
}
.szc-sechead__label {
  font-family: var(--szc-font-display);
  font-size: clamp(1.05rem, 1.7vw, 1.4rem);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--szc-ink);
  white-space: nowrap;
}
.szc-sechead__label span { color: var(--szc-red); }
.szc-sechead__rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--szc-line);
  min-width: 20px;
}
.szc-sechead__more { flex: none; }

.szc-hairline { height: 1px; background: var(--szc-line); border: 0; margin: 0; }
.szc-hairline--soft { background: var(--szc-line-soft); }

/* ---------- 07. HEADER / NAV / MEGA MENU / LIVE STRIP ------------------- */
.szc-header {
  position: sticky;
  top: 0;
  z-index: var(--szc-z-nav);
  background: rgba(10, 10, 12, .92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--szc-line);
  transition: box-shadow var(--szc-med) var(--szc-ease), background var(--szc-med) var(--szc-ease);
}
.szc-header.is-stuck {
  background: rgba(6, 6, 8, .97);
  box-shadow: var(--szc-shadow);
}

.szc-header__bar {
  height: var(--szc-header-h);
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 36px);
}

/* logo */
.szc-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.szc-logo__mark { width: 34px; height: 34px; flex: none; }
.szc-logo__word {
  font-family: var(--szc-font-display);
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--szc-ink);
  line-height: 1;
}
.szc-logo__word em { font-style: normal; color: var(--szc-red); }
.szc-logo__tag {
  display: block;
  font-family: var(--szc-font-body);
  font-size: .53rem;
  letter-spacing: .28em;
  color: var(--szc-meta-faint);
  text-transform: uppercase;
  margin-top: 3px;
}

/* primary nav */
.szc-nav { margin-left: auto; }
.szc-nav__list { display: flex; align-items: center; gap: clamp(4px, 1.2vw, 18px); }
.szc-nav__item { position: relative; }
.szc-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  font-family: var(--szc-font-display);
  font-size: .84rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--szc-ink-dim);
  position: relative;
  transition: color var(--szc-fast) var(--szc-ease);
}
.szc-nav__link::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 4px;
  height: 2px;
  background: var(--szc-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--szc-med) var(--szc-ease);
}
.szc-nav__link:hover,
.szc-nav__link[aria-current="page"],
.szc-nav__link[aria-expanded="true"] { color: var(--szc-ink); }
.szc-nav__link:hover::after,
.szc-nav__link[aria-current="page"]::after,
.szc-nav__link[aria-expanded="true"]::after { transform: scaleX(1); }

.szc-nav__caret {
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--szc-fast) var(--szc-ease);
}
.szc-nav__link[aria-expanded="true"] .szc-nav__caret { transform: rotate(-135deg) translateY(-2px); }

.szc-header__tools { display: flex; align-items: center; gap: 8px; flex: none; }

.szc-iconbtn {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--szc-line);
  color: var(--szc-ink-dim);
  background: transparent;
  border-radius: var(--szc-radius);
  transition: color var(--szc-fast) var(--szc-ease),
              border-color var(--szc-fast) var(--szc-ease),
              background var(--szc-fast) var(--szc-ease);
}
.szc-iconbtn:hover { color: #fff; background: var(--szc-red); border-color: var(--szc-red); }

.szc-burger { display: none; }
.szc-burger__box { width: 20px; display: grid; gap: 4px; }
.szc-burger__box i { display: block; height: 2px; background: currentColor; transition: transform var(--szc-snap) var(--szc-ease), opacity var(--szc-fast); }
.szc-burger[aria-expanded="true"] .szc-burger__box i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.szc-burger[aria-expanded="true"] .szc-burger__box i:nth-child(2) { opacity: 0; }
.szc-burger[aria-expanded="true"] .szc-burger__box i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* mega menu */
.szc-mega {
  position: absolute;
  top: calc(100% + 1px);
  left: 50%;
  transform: translate(-50%, -8px);
  width: min(920px, 92vw);
  background: var(--szc-surface);
  border: 1px solid var(--szc-line);
  border-top: var(--szc-rail) solid var(--szc-red);
  box-shadow: var(--szc-shadow);
  padding: 26px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--szc-med) var(--szc-ease), transform var(--szc-med) var(--szc-ease), visibility var(--szc-med);
}
.szc-mega.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.szc-mega__col { min-width: 0; }
.szc-mega__title {
  font-family: var(--szc-font-display);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--szc-meta);
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--szc-line);
}
.szc-mega__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  font-size: .875rem;
  color: var(--szc-ink-dim);
  border-bottom: 1px solid var(--szc-line-soft);
  transition: color var(--szc-fast) var(--szc-ease), padding-left var(--szc-fast) var(--szc-ease);
}
.szc-mega__link:hover { color: #fff; padding-left: 6px; }
.szc-mega__link small { font-family: var(--szc-font-mono); font-size: .68rem; color: var(--szc-meta-faint); }
.szc-mega__promo {
  background: var(--szc-elevated);
  border-left: var(--szc-rail) solid var(--szc-red);
  padding: 16px;
}
.szc-mega__promo h4 { font-size: 1rem; margin-bottom: 6px; }

/* mobile drawer */
.szc-drawer {
  position: fixed;
  inset: calc(var(--szc-header-h)) 0 0 0;
  background: var(--szc-bg);
  border-top: 1px solid var(--szc-line);
  z-index: calc(var(--szc-z-nav) - 1);
  padding: 20px clamp(16px, 5vw, 32px) 60px;
  overflow-y: auto;
  transform: translateY(-12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--szc-med) var(--szc-ease), transform var(--szc-med) var(--szc-ease), visibility var(--szc-med);
}
.szc-drawer.is-open { opacity: 1; visibility: visible; transform: none; }
.szc-drawer__link {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--szc-line);
  font-family: var(--szc-font-display);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--szc-ink);
}
.szc-drawer__link:hover { color: var(--szc-red); }
.szc-drawer__group { margin-top: 22px; }

/* live score strip beneath the nav */
.szc-strip {
  background: var(--szc-sunken);
  border-bottom: 1px solid var(--szc-line);
  height: var(--szc-strip-h);
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
.szc-strip__label {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  background: var(--szc-red);
  color: #fff;
  font-family: var(--szc-font-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.szc-strip__track {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1 1 auto;
}
.szc-strip__track::-webkit-scrollbar { display: none; }
.szc-strip__game {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  border-right: 1px solid var(--szc-line);
  white-space: nowrap;
  font-size: .78rem;
  color: var(--szc-ink-dim);
  transition: background var(--szc-fast) var(--szc-ease);
}
.szc-strip__game:hover { background: var(--szc-surface); }
.szc-strip__team { font-family: var(--szc-font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--szc-ink); font-size: .8rem; }
.szc-strip__score { font-family: var(--szc-font-mono); font-weight: 700; color: var(--szc-amber); font-size: .82rem; }
.szc-strip__state { font-family: var(--szc-font-display); font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; color: var(--szc-meta); }
.szc-strip__state--live { color: var(--szc-red); }

/* ---------- 08. TICKER --------------------------------------------------- */
.szc-ticker {
  display: flex;
  align-items: stretch;
  background: var(--szc-elevated);
  border-bottom: 1px solid var(--szc-line);
  overflow: hidden;
  height: 42px;
}
.szc-ticker__tag {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  background: var(--szc-ink);
  color: var(--szc-bg);
  font-family: var(--szc-font-display);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.szc-ticker__viewport { flex: 1 1 auto; overflow: hidden; position: relative; display: flex; align-items: center; }
.szc-ticker__track {
  display: flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  animation: szc-marquee 46s linear infinite;
  will-change: transform;
}
.szc-ticker:hover .szc-ticker__track,
.szc-ticker__track.is-paused { animation-play-state: paused; }
.szc-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 26px;
  font-size: .82rem;
  color: var(--szc-ink-dim);
  border-right: 1px solid var(--szc-line);
}
.szc-ticker__item b { color: var(--szc-amber); font-family: var(--szc-font-display); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: .72rem; }
.szc-ticker__item:hover { color: #fff; }

@keyframes szc-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ---------- 09. HERO & LEAD STORY ---------------------------------------- */
.szc-hero { padding-block: clamp(28px, 3.4vw, 48px) var(--szc-band); }

.szc-lead {
  position: relative;
  display: block;
  background: var(--szc-surface);
  border: 1px solid var(--szc-line);
  border-left: var(--szc-rail) solid var(--szc-red);
  overflow: hidden;
  transition: border-color var(--szc-med) var(--szc-ease), background var(--szc-med) var(--szc-ease);
}
.szc-lead:hover { background: var(--szc-elevated); }
.szc-lead__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--szc-sunken); }
.szc-lead__media svg { width: 100%; height: 100%; display: block; }
.szc-lead__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,12,0) 34%, rgba(10,10,12,.9) 100%);
  pointer-events: none;
}
.szc-lead__flag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  background: var(--szc-red);
  color: #fff;
  font-family: var(--szc-font-display);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.szc-lead__body { padding: 26px clamp(18px, 2.4vw, 32px) 30px; }
.szc-lead__title {
  font-size: clamp(1.7rem, 3.2vw, 2.7rem);
  font-weight: 700;
  letter-spacing: -.015em;
  margin: 12px 0 14px;
}
.szc-lead__excerpt { color: var(--szc-meta); font-size: .95rem; max-width: 58ch; margin-bottom: 16px; }
.szc-lead__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }

/* headline mask reveal */
.szc-mask { display: block; overflow: hidden; }
.szc-mask > span {
  display: block;
  transform: translateY(105%);
  transition: transform var(--szc-reveal) var(--szc-ease);
}
.szc-mask.is-in > span { transform: none; }
.szc-mask--d1 > span { transition-delay: 90ms; }
.szc-mask--d2 > span { transition-delay: 180ms; }
.szc-mask--d3 > span { transition-delay: 270ms; }

/* ---------- 10. ARTICLE CARDS -------------------------------------------- */
.szc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--szc-surface);
  border: 1px solid var(--szc-line);
  border-radius: var(--szc-radius);
  overflow: hidden;
  transition: background var(--szc-snap) var(--szc-ease),
              border-color var(--szc-snap) var(--szc-ease),
              transform var(--szc-snap) var(--szc-ease);
}
.szc-card:hover { background: var(--szc-elevated); border-color: #35353f; transform: translateY(-2px); }
.szc-card--featured { border-left: var(--szc-rail) solid var(--szc-red); }
.szc-card--flat { background: transparent; border-color: transparent; border-bottom: 1px solid var(--szc-line); }
.szc-card--flat:hover { transform: none; background: transparent; border-bottom-color: var(--szc-red); }

.szc-card__media { position: relative; aspect-ratio: 16 / 9; background: var(--szc-sunken); overflow: hidden; }
.szc-card__media svg { width: 100%; height: 100%; }
.szc-card__media--sq { aspect-ratio: 1 / 1; }
.szc-card__tag {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 5px 11px;
  background: var(--szc-bg);
  color: var(--szc-red);
  font-family: var(--szc-font-display);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-top: 1px solid var(--szc-line);
  border-right: 1px solid var(--szc-line);
}
.szc-card__body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 9px; flex: 1 1 auto; }
.szc-card__title {
  font-size: var(--szc-step-1);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: 0;
}
.szc-card--standard .szc-card__title { font-size: var(--szc-step-2); }
.szc-card__excerpt { font-size: .855rem; color: var(--szc-meta); line-height: 1.6; }
.szc-card__foot { margin-top: auto; padding-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* compact list row */
.szc-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid var(--szc-line);
  transition: padding-left var(--szc-fast) var(--szc-ease);
}
.szc-row:hover { padding-left: 5px; }
.szc-row:last-child { border-bottom: 0; }
.szc-row__media { aspect-ratio: 4 / 3; background: var(--szc-sunken); overflow: hidden; border: 1px solid var(--szc-line); }
.szc-row__title { font-size: .98rem; font-weight: 500; line-height: 1.18; }
.szc-row:hover .szc-row__title { color: var(--szc-red); }
.szc-row--noimg { grid-template-columns: minmax(0, 1fr); }

/* video card with play badge */
.szc-video { position: relative; }
.szc-video__badge {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.szc-video__badge i {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  background: rgba(232, 17, 45, .92);
  border: 1px solid var(--szc-red);
  transition: transform var(--szc-snap) var(--szc-ease), background var(--szc-snap) var(--szc-ease);
}
.szc-video__badge i::before {
  content: "";
  width: 0; height: 0;
  border-left: 15px solid #fff;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 4px;
}
.szc-video:hover .szc-video__badge i { transform: scale(1.12); background: var(--szc-amber); }
.szc-video:hover .szc-video__badge i::before { border-left-color: #12120c; }
.szc-video__time {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 3px 8px;
  background: rgba(6, 6, 8, .88);
  border: 1px solid var(--szc-line);
  font-family: var(--szc-font-mono);
  font-size: .7rem;
  color: var(--szc-ink);
}

/* ---------- 11. TRENDING RAIL & MOST READ -------------------------------- */
.szc-rail {
  background: var(--szc-surface);
  border: 1px solid var(--szc-line);
  padding: 18px;
  position: sticky;
  top: calc(var(--szc-header-h) + var(--szc-strip-h) + 16px);
}
.szc-rail__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 6px;
  border-bottom: 2px solid var(--szc-red);
  font-family: var(--szc-font-display);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--szc-ink);
}
.szc-rail__item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 13px 0;
  border-bottom: 1px solid var(--szc-line-soft);
}
.szc-rail__item:last-child { border-bottom: 0; }
.szc-rail__n {
  font-family: var(--szc-font-mono);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--szc-meta-faint);
  transition: -webkit-text-stroke-color var(--szc-fast) var(--szc-ease);
}
.szc-rail__item:hover .szc-rail__n { -webkit-text-stroke-color: var(--szc-red); }
.szc-rail__title { font-family: var(--szc-font-body); font-size: .86rem; font-weight: 500; line-height: 1.45; color: var(--szc-ink-dim); }
.szc-rail__item:hover .szc-rail__title { color: #fff; }

/* ---------- 12. LIVE SCORE CARDS & MATCH CENTRE -------------------------- */
.szc-score {
  background: var(--szc-surface);
  border: 1px solid var(--szc-line);
  border-top: var(--szc-rail) solid var(--szc-red);
  padding: 16px 18px;
  display: grid;
  gap: 12px;
  transition: border-color var(--szc-fast) var(--szc-ease), background var(--szc-fast) var(--szc-ease);
}
.szc-score:hover { background: var(--szc-elevated); }
.szc-score--upcoming { border-top-color: var(--szc-line); }
.szc-score--final { border-top-color: var(--szc-meta-faint); }
.szc-score__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--szc-font-display);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--szc-meta);
}
.szc-score__state { display: inline-flex; align-items: center; gap: 6px; color: var(--szc-red); }
.szc-score__side {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
}
.szc-score__crest { width: 26px; height: 26px; }
.szc-score__team {
  font-family: var(--szc-font-display);
  font-size: .96rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--szc-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.szc-score__runs {
  font-family: var(--szc-font-mono);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--szc-amber);
  letter-spacing: -.03em;
}
.szc-score__side--lead .szc-score__team { color: #fff; }
.szc-score__overs { font-family: var(--szc-font-mono); font-size: .7rem; color: var(--szc-meta); }
.szc-score__note {
  padding-top: 11px;
  border-top: 1px solid var(--szc-line);
  font-size: .78rem;
  color: var(--szc-meta);
}
.szc-score__note b { color: var(--szc-amber); font-family: var(--szc-font-mono); font-weight: 500; }

.szc-centre {
  background: var(--szc-surface);
  border: 1px solid var(--szc-line);
}
.szc-centre__tabs {
  display: flex;
  overflow-x: auto;
  border-bottom: 1px solid var(--szc-line);
  scrollbar-width: none;
}
.szc-centre__tabs::-webkit-scrollbar { display: none; }
.szc-tab {
  flex: none;
  padding: 14px 20px;
  font-family: var(--szc-font-display);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--szc-meta);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--szc-fast) var(--szc-ease), border-color var(--szc-fast) var(--szc-ease), background var(--szc-fast) var(--szc-ease);
}
.szc-tab:hover { color: var(--szc-ink); background: var(--szc-elevated); }
.szc-tab[aria-selected="true"] { color: #fff; border-bottom-color: var(--szc-red); }
.szc-centre__panel { padding: 20px; }
.szc-centre__panel[hidden] { display: none; }

/* ---------- 13. STANDINGS TABLE & STATISTICS ----------------------------- */
.szc-tablewrap { overflow-x: auto; border: 1px solid var(--szc-line); background: var(--szc-surface); }
.szc-table { min-width: 620px; font-size: .86rem; }
.szc-table thead th {
  text-align: left;
  padding: 12px 14px;
  background: var(--szc-sunken);
  border-bottom: 1px solid var(--szc-line);
  font-family: var(--szc-font-display);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--szc-meta);
  white-space: nowrap;
}
.szc-table tbody td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--szc-line-soft);
  color: var(--szc-ink-dim);
  vertical-align: middle;
}
.szc-table tbody tr:last-child td { border-bottom: 0; }
.szc-table tbody tr { transition: background var(--szc-fast) var(--szc-ease); }
.szc-table tbody tr:hover { background: var(--szc-elevated); }
.szc-table tbody tr.is-qualified td:first-child { box-shadow: inset var(--szc-rail) 0 0 var(--szc-amber); }
.szc-table__pos { font-family: var(--szc-font-mono); font-weight: 700; color: var(--szc-meta); width: 46px; }
.szc-table__team { display: flex; align-items: center; gap: 10px; }
.szc-table__team span {
  font-family: var(--szc-font-display);
  font-size: .92rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--szc-ink);
}
.szc-table__n { font-family: var(--szc-font-mono); font-variant-numeric: tabular-nums; }
.szc-table__n--hi { color: var(--szc-amber); font-weight: 700; }
.szc-table__form { display: inline-flex; gap: 3px; }
.szc-table__form i {
  width: 17px; height: 17px;
  display: grid; place-items: center;
  font-family: var(--szc-font-mono);
  font-size: .58rem;
  font-style: normal;
  font-weight: 700;
  color: var(--szc-bg);
  background: var(--szc-meta-faint);
}
.szc-table__form i.w { background: var(--szc-amber); }
.szc-table__form i.l { background: var(--szc-red); color: #fff; }

/* ---------- 14. PROFILE CARDS -------------------------------------------- */
.szc-profile {
  background: var(--szc-surface);
  border: 1px solid var(--szc-line);
  padding: 20px;
  display: grid;
  gap: 14px;
  transition: border-color var(--szc-fast) var(--szc-ease), background var(--szc-fast) var(--szc-ease);
}
.szc-profile:hover { border-color: var(--szc-red); background: var(--szc-elevated); }
.szc-profile__top { display: flex; align-items: center; gap: 14px; }
.szc-profile__avatar {
  width: 62px; height: 62px;
  border-radius: 50%;              /* avatars: the single circular exception */
  overflow: hidden;
  flex: none;
  border: 1px solid var(--szc-line);
  background: var(--szc-sunken);
}
.szc-profile__name { font-size: 1.1rem; letter-spacing: .02em; }
.szc-profile__role { font-size: .75rem; color: var(--szc-meta); font-family: var(--szc-font-body); letter-spacing: .04em; }
.szc-profile__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--szc-line);
  padding-top: 13px;
  gap: 8px;
  text-align: center;
}
.szc-profile__stat b {
  display: block;
  font-family: var(--szc-font-mono);
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--szc-amber);
  letter-spacing: -.04em;
}
.szc-profile__stat span {
  font-family: var(--szc-font-display);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--szc-meta);
}

/* ---------- 15. RANKING LIST (OVERSIZED OUTLINED NUMERALS) --------------- */
.szc-rank { display: grid; gap: 0; }
.szc-rank__item {
  display: grid;
  grid-template-columns: clamp(58px, 7vw, 92px) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
  padding: 18px 0;
  border-bottom: 1px solid var(--szc-line);
  transition: background var(--szc-fast) var(--szc-ease);
}
.szc-rank__item:hover { background: var(--szc-surface); }
.szc-rank__n {
  font-family: var(--szc-font-display);
  font-size: clamp(2.6rem, 5vw, 4.1rem);
  font-weight: 700;
  line-height: .82;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--szc-line);
  letter-spacing: -.05em;
  transition: -webkit-text-stroke-color var(--szc-snap) var(--szc-ease), color var(--szc-snap) var(--szc-ease);
}
.szc-rank__item:hover .szc-rank__n { -webkit-text-stroke-color: var(--szc-red); }
.szc-rank__item--top .szc-rank__n { -webkit-text-stroke-color: var(--szc-amber); }
.szc-rank__name { font-family: var(--szc-font-display); font-size: clamp(1rem, 1.6vw, 1.28rem); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--szc-ink); }
.szc-rank__sub { font-size: .78rem; color: var(--szc-meta); }
.szc-rank__val { text-align: right; }
.szc-rank__val b { display: block; font-family: var(--szc-font-mono); font-size: 1.15rem; font-weight: 700; color: var(--szc-amber); }
.szc-rank__val span { font-family: var(--szc-font-display); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--szc-meta); }
.szc-rank__delta { font-family: var(--szc-font-mono); font-size: .72rem; }
.szc-rank__delta--up { color: var(--szc-amber); }
.szc-rank__delta--down { color: var(--szc-red); }

/* ---------- 16. POLL WIDGET ---------------------------------------------- */
.szc-poll {
  background: var(--szc-surface);
  border: 1px solid var(--szc-line);
  border-left: var(--szc-rail) solid var(--szc-red);
  padding: 24px;
}
.szc-poll__q { font-size: var(--szc-step-2); margin: 8px 0 18px; line-height: 1.14; }
.szc-poll__opts { display: grid; gap: 10px; }
.szc-poll__opt {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  padding: 13px 16px;
  background: var(--szc-elevated);
  border: 1px solid var(--szc-line);
  color: var(--szc-ink-dim);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--szc-fast) var(--szc-ease), color var(--szc-fast) var(--szc-ease);
}
.szc-poll__opt:hover { border-color: var(--szc-red); color: #fff; }
.szc-poll__bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: rgba(232, 17, 45, .22);
  border-right: 2px solid var(--szc-red);
  transition: width 760ms var(--szc-ease);
  pointer-events: none;
}
.szc-poll__opt.is-picked .szc-poll__bar { background: var(--szc-amber-dim); border-right-color: var(--szc-amber); }
.szc-poll__label { position: relative; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.szc-poll__text { font-size: .9rem; font-weight: 500; }
.szc-poll__pct {
  font-family: var(--szc-font-mono);
  font-size: .84rem;
  font-weight: 700;
  color: var(--szc-amber);
  opacity: 0;
  transition: opacity var(--szc-med) var(--szc-ease);
}
.szc-poll.is-voted .szc-poll__pct { opacity: 1; }
.szc-poll.is-voted .szc-poll__opt { cursor: default; pointer-events: none; }
.szc-poll__foot { margin-top: 14px; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.szc-poll__count { font-family: var(--szc-font-mono); font-size: .74rem; color: var(--szc-meta); }

/* ---------- 17. PODCAST / EPISODE ROWS ----------------------------------- */
.szc-ep {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--szc-surface);
  border: 1px solid var(--szc-line);
  transition: border-color var(--szc-fast) var(--szc-ease), background var(--szc-fast) var(--szc-ease);
}
.szc-ep:hover { border-color: var(--szc-red); background: var(--szc-elevated); }
.szc-ep__art { width: 72px; height: 72px; border: 1px solid var(--szc-line); overflow: hidden; background: var(--szc-sunken); }
.szc-ep__no { font-family: var(--szc-font-mono); font-size: .68rem; color: var(--szc-meta); letter-spacing: .08em; }
.szc-ep__title { font-size: 1.02rem; margin: 3px 0 5px; line-height: 1.16; }
.szc-ep__meta { font-size: .75rem; color: var(--szc-meta); }
.szc-ep__play {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--szc-line);
  color: var(--szc-ink);
  flex: none;
  transition: background var(--szc-fast) var(--szc-ease), border-color var(--szc-fast) var(--szc-ease), color var(--szc-fast) var(--szc-ease);
}
.szc-ep:hover .szc-ep__play { background: var(--szc-red); border-color: var(--szc-red); color: #fff; }

/* ---------- 18. BYLINE / SHARE / BREADCRUMBS / PAGINATION ---------------- */
.szc-byline {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  background: var(--szc-surface);
  border: 1px solid var(--szc-line);
  border-left: var(--szc-rail) solid var(--szc-red);
}
.szc-byline__avatar { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex: none; border: 1px solid var(--szc-line); }
.szc-byline__name { font-size: 1rem; letter-spacing: .03em; }
.szc-byline__role { font-size: .75rem; color: var(--szc-meta); }
.szc-byline__bio { font-size: .82rem; color: var(--szc-meta); margin-top: 5px; }

.szc-share { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.szc-share__label {
  font-family: var(--szc-font-display);
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--szc-meta);
  margin-right: 4px;
}
.szc-share__btn {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--szc-line);
  color: var(--szc-meta);
  background: var(--szc-surface);
  transition: color var(--szc-fast) var(--szc-ease), border-color var(--szc-fast) var(--szc-ease), background var(--szc-fast) var(--szc-ease);
}
.szc-share__btn:hover { color: #fff; background: var(--szc-red); border-color: var(--szc-red); }
.szc-share__btn.is-copied { background: var(--szc-amber); border-color: var(--szc-amber); color: #12120c; }

.szc-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: .76rem; color: var(--szc-meta); }
.szc-crumbs a { color: var(--szc-meta); transition: color var(--szc-fast) var(--szc-ease); }
.szc-crumbs a:hover { color: var(--szc-red); }
.szc-crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.szc-crumbs li + li::before { content: "/"; color: var(--szc-meta-faint); }
.szc-crumbs [aria-current="page"] { color: var(--szc-ink); }

.szc-pager { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.szc-pager__link {
  min-width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0 12px;
  border: 1px solid var(--szc-line);
  background: var(--szc-surface);
  font-family: var(--szc-font-mono);
  font-size: .84rem;
  color: var(--szc-ink-dim);
  transition: background var(--szc-fast) var(--szc-ease), border-color var(--szc-fast) var(--szc-ease), color var(--szc-fast) var(--szc-ease);
}
.szc-pager__link:hover { background: var(--szc-elevated); border-color: var(--szc-red); color: #fff; }
.szc-pager__link[aria-current="page"] { background: var(--szc-red); border-color: var(--szc-red); color: #fff; }
.szc-pager__link.is-disabled { opacity: .4; pointer-events: none; }

/* ---------- 19. FORMS ---------------------------------------------------- */
.szc-field { display: grid; gap: 7px; margin-bottom: 16px; }
.szc-field__label {
  font-family: var(--szc-font-display);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--szc-meta);
}
.szc-field__label em { color: var(--szc-red); font-style: normal; }
.szc-input, .szc-select, .szc-textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--szc-sunken);
  border: 1px solid var(--szc-line);
  border-radius: var(--szc-radius);
  color: var(--szc-ink);
  font-size: .9rem;
  transition: border-color var(--szc-fast) var(--szc-ease), background var(--szc-fast) var(--szc-ease);
}
.szc-input::placeholder, .szc-textarea::placeholder { color: var(--szc-meta-faint); }
.szc-input:focus, .szc-select:focus, .szc-textarea:focus {
  outline: none;
  border-color: var(--szc-red);
  background: var(--szc-bg);
}
.szc-textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.szc-select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--szc-meta) 50%), linear-gradient(135deg, var(--szc-meta) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 13px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.szc-field__error {
  font-size: .74rem;
  color: var(--szc-red);
  font-weight: 500;
  min-height: 0;
  display: none;
}
.szc-field.has-error .szc-input,
.szc-field.has-error .szc-select,
.szc-field.has-error .szc-textarea { border-color: var(--szc-red); }
.szc-field.has-error .szc-field__error { display: block; }

.szc-check { display: flex; align-items: flex-start; gap: 10px; font-size: .8rem; color: var(--szc-meta); }
.szc-check input { width: 16px; height: 16px; accent-color: var(--szc-red); margin-top: 3px; flex: none; }

.szc-formnote {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--szc-line);
  font-size: .82rem;
  display: none;
}
.szc-formnote.is-ok   { display: block; border-color: var(--szc-amber); color: var(--szc-amber); background: var(--szc-amber-dim); }
.szc-formnote.is-bad  { display: block; border-color: var(--szc-red); color: var(--szc-red); background: rgba(232,17,45,.08); }

.szc-news {
  background: var(--szc-elevated);
  border: 1px solid var(--szc-line);
  border-left: var(--szc-rail) solid var(--szc-red);
  padding: clamp(22px, 3vw, 38px);
}
.szc-news__form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.szc-news__form .szc-input { flex: 1 1 240px; }
.szc-news__note { margin-top: 10px; font-size: .74rem; color: var(--szc-meta); }

/* ---------- 20. FAQ ACCORDION & TABS ------------------------------------- */
.szc-faq { border-top: 1px solid var(--szc-line); }
.szc-faq__item { border-bottom: 1px solid var(--szc-line); }
.szc-faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 0;
  text-align: left;
  font-family: var(--szc-font-display);
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--szc-ink-dim);
  transition: color var(--szc-fast) var(--szc-ease);
}
.szc-faq__q:hover, .szc-faq__q[aria-expanded="true"] { color: #fff; }
.szc-faq__sign { position: relative; width: 14px; height: 14px; flex: none; }
.szc-faq__sign::before, .szc-faq__sign::after {
  content: "";
  position: absolute;
  background: var(--szc-red);
  transition: transform var(--szc-snap) var(--szc-ease);
}
.szc-faq__sign::before { inset: 6px 0 auto 0; height: 2px; }
.szc-faq__sign::after  { inset: 0 auto 0 6px; width: 2px; }
.szc-faq__q[aria-expanded="true"] .szc-faq__sign::after { transform: scaleY(0); }
.szc-faq__a {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--szc-med) var(--szc-ease);
}
.szc-faq__a > div { padding: 0 0 20px; color: var(--szc-meta); font-size: .9rem; max-width: 74ch; }

.szc-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--szc-line); overflow-x: auto; scrollbar-width: none; }
.szc-tabs::-webkit-scrollbar { display: none; }
.szc-panel[hidden] { display: none; }

/* ---------- 21. COUNTERS / QUOTES / LOGOS / CTA -------------------------- */
.szc-counters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--szc-line);
  background: var(--szc-surface);
}
.szc-counter {
  padding: clamp(20px, 3vw, 34px) 18px;
  text-align: center;
  border-right: 1px solid var(--szc-line);
}
.szc-counter:last-child { border-right: 0; }
.szc-counter__n {
  font-family: var(--szc-font-mono);
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 700;
  line-height: 1;
  color: var(--szc-ink);
  letter-spacing: -.05em;
}
.szc-counter__n em { font-style: normal; color: var(--szc-red); }
.szc-counter__label {
  margin-top: 9px;
  font-family: var(--szc-font-display);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--szc-meta);
}

.szc-quote {
  background: var(--szc-surface);
  border: 1px solid var(--szc-line);
  border-left: var(--szc-rail) solid var(--szc-amber);
  padding: 24px;
  display: grid;
  gap: 16px;
}
.szc-quote__text {
  font-family: var(--szc-font-display);
  font-size: 1.08rem;
  font-weight: 400;
  line-height: 1.42;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--szc-ink);
}
.szc-quote__who { display: flex; align-items: center; gap: 12px; }
.szc-quote__avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; border: 1px solid var(--szc-line); flex: none; }
.szc-quote__name { font-family: var(--szc-font-display); font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--szc-ink); }
.szc-quote__from { font-size: .72rem; color: var(--szc-meta); }

.szc-logos {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border: 1px solid var(--szc-line);
  background: var(--szc-surface);
}
.szc-logos__cell {
  display: grid;
  place-items: center;
  padding: 22px 12px;
  border-right: 1px solid var(--szc-line);
  color: var(--szc-meta-faint);
  font-family: var(--szc-font-display);
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: color var(--szc-fast) var(--szc-ease), background var(--szc-fast) var(--szc-ease);
}
.szc-logos__cell:last-child { border-right: 0; }
.szc-logos__cell:hover { color: var(--szc-ink); background: var(--szc-elevated); }

.szc-cta {
  position: relative;
  background: var(--szc-elevated);
  border-top: 1px solid var(--szc-line);
  border-bottom: 1px solid var(--szc-line);
  overflow: hidden;
}
.szc-cta::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--szc-rail);
  background: var(--szc-red);
}
.szc-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--szc-gap);
  flex-wrap: wrap;
  padding-block: clamp(32px, 4vw, 54px);
}
.szc-cta__title { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.szc-cta__sub { color: var(--szc-meta); margin-top: 8px; max-width: 56ch; font-size: .92rem; }

/* ---------- 22. PAGE HERO (INTERIOR) & FORUM TEASER ---------------------- */
.szc-phero {
  position: relative;
  background: var(--szc-surface);
  border-bottom: 1px solid var(--szc-line);
  padding-block: clamp(38px, 5vw, 72px);
  overflow: hidden;
}
.szc-phero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: var(--szc-rail);
  background: linear-gradient(90deg, var(--szc-red) 0 22%, var(--szc-line) 22% 100%);
}
.szc-phero__bg { position: absolute; inset: 0; opacity: .16; pointer-events: none; }
.szc-phero__inner { position: relative; z-index: 1; display: grid; gap: 14px; }
.szc-phero__title { font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 700; letter-spacing: -.02em; }

.szc-forum {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  background: var(--szc-surface);
  border: 1px solid var(--szc-line);
  transition: border-color var(--szc-fast) var(--szc-ease), background var(--szc-fast) var(--szc-ease);
}
.szc-forum:hover { border-color: var(--szc-red); background: var(--szc-elevated); }
.szc-forum__topic { font-size: 1rem; line-height: 1.2; }
.szc-forum__meta { font-size: .74rem; color: var(--szc-meta); margin-top: 6px; }
.szc-forum__count { text-align: right; }
.szc-forum__count b { display: block; font-family: var(--szc-font-mono); font-size: 1.2rem; font-weight: 700; color: var(--szc-amber); }
.szc-forum__count span { font-family: var(--szc-font-display); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--szc-meta); }

/* ---------- 23. FOOTER --------------------------------------------------- */
.szc-footer {
  background: var(--szc-sunken);
  border-top: var(--szc-rail) solid var(--szc-red);
  padding-top: clamp(40px, 5vw, 68px);
  font-size: .875rem;
}
.szc-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr) 1.4fr;
  gap: var(--szc-gap-lg) var(--szc-gap);
  padding-bottom: 40px;
  border-bottom: 1px solid var(--szc-line);
}
.szc-footer__about { max-width: 34ch; color: var(--szc-meta); font-size: .85rem; margin-top: 14px; }
.szc-footer__title {
  font-family: var(--szc-font-display);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--szc-ink);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--szc-line);
}
.szc-footer__links li { margin-bottom: 9px; }
.szc-footer__links a { color: var(--szc-meta); transition: color var(--szc-fast) var(--szc-ease), padding-left var(--szc-fast) var(--szc-ease); display: inline-block; }
.szc-footer__links a:hover { color: var(--szc-red); padding-left: 5px; }
.szc-footer__contact li { display: flex; gap: 10px; margin-bottom: 12px; color: var(--szc-meta); }
.szc-footer__contact a:hover { color: var(--szc-red); }
.szc-footer__contact svg { flex: none; color: var(--szc-red); margin-top: 3px; }

.szc-social { display: flex; gap: 8px; margin-top: 18px; }
.szc-social__a {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--szc-line);
  color: var(--szc-meta);
  transition: color var(--szc-fast) var(--szc-ease), background var(--szc-fast) var(--szc-ease), border-color var(--szc-fast) var(--szc-ease);
}
.szc-social__a:hover { color: #fff; background: var(--szc-red); border-color: var(--szc-red); }

.szc-footer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-block: 20px;
  color: var(--szc-meta-faint);
  font-size: .78rem;
}
.szc-footer__legal { display: flex; gap: 16px; flex-wrap: wrap; }
.szc-footer__legal a:hover { color: var(--szc-red); }
.szc-footer__parent {
  text-align: center;
  padding: 14px 0 22px;
  border-top: 1px solid var(--szc-line-soft);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--szc-meta-faint);
}
.szc-footer__parent strong { color: var(--szc-meta); font-weight: 600; letter-spacing: .06em; }

/* ---------- 24. FLOATING UI ---------------------------------------------- */
.szc-wa {
  position: fixed;
  right: 18px;
  bottom: 84px;
  z-index: var(--szc-z-float);
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  background: #128c3e;
  color: #fff;
  border: 1px solid #0d6c2f;
  box-shadow: var(--szc-shadow);
  transition: transform var(--szc-fast) var(--szc-ease), background var(--szc-fast) var(--szc-ease);
}
.szc-wa:hover { transform: translateY(-3px); background: #16a34a; }

.szc-top {
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: var(--szc-z-float);
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  background: var(--szc-red);
  color: #fff;
  border: 1px solid var(--szc-red);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--szc-snap) var(--szc-ease), transform var(--szc-snap) var(--szc-ease), visibility var(--szc-snap), background var(--szc-fast);
}
.szc-top.is-shown { opacity: 1; visibility: visible; transform: none; }
.szc-top:hover { background: var(--szc-ink); color: var(--szc-bg); border-color: var(--szc-ink); }

.szc-cookie {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: var(--szc-z-cookie);
  max-width: 660px;
  margin-inline: auto;
  background: var(--szc-elevated);
  border: 1px solid var(--szc-line);
  border-left: var(--szc-rail) solid var(--szc-red);
  box-shadow: var(--szc-shadow);
  padding: 18px 20px;
  display: none;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.szc-cookie.is-shown { display: flex; }
.szc-cookie__text { flex: 1 1 300px; font-size: .82rem; color: var(--szc-meta); }
.szc-cookie__text a { color: var(--szc-red); }
.szc-cookie__acts { display: flex; gap: 8px; }

.szc-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--szc-red), var(--szc-amber));
  z-index: calc(var(--szc-z-nav) + 5);
  transition: width 60ms linear;
}

/* ---------- 25. SCROLL REVEAL & MOTION ----------------------------------- */
[data-sc-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--szc-reveal) var(--szc-ease), transform var(--szc-reveal) var(--szc-ease);
  will-change: opacity, transform;
}
[data-sc-reveal="left"]  { transform: translateX(-22px); }
[data-sc-reveal="right"] { transform: translateX(22px); }
[data-sc-reveal="fade"]  { transform: none; }
[data-sc-reveal].is-in { opacity: 1; transform: none; }

.u-d1 { transition-delay: 60ms; }
.u-d2 { transition-delay: 120ms; }
.u-d3 { transition-delay: 180ms; }
.u-d4 { transition-delay: 240ms; }
.u-d5 { transition-delay: 300ms; }
.u-d6 { transition-delay: 360ms; }

/* halftone dot texture used inside authored SVG art */
.szc-art { display: block; width: 100%; height: 100%; }
.szc-art--duo { filter: saturate(1.05); }

/* ---------- 26. UTILITIES ------------------------------------------------ */
.u-hide { display: none !important; }
@media (max-width: 1020px) { .u-hide-sm { display: none !important; } }
.u-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.u-center { text-align: center; }
.u-right { text-align: right; }
.u-flex { display: flex; }
.u-between { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.u-mt0 { margin-top: 0; }
.u-mt1 { margin-top: 10px; }
.u-mt2 { margin-top: 20px; }
.u-mt3 { margin-top: 32px; }
.u-mb1 { margin-bottom: 10px; }
.u-mb2 { margin-bottom: 20px; }
.u-mb3 { margin-bottom: 32px; }
.u-gap-sm { gap: var(--szc-gap-sm); }
.u-red { color: var(--szc-red); }
.u-amber { color: var(--szc-amber); }
.u-ink { color: var(--szc-ink); }
.u-muted { color: var(--szc-meta); }
.u-mono { font-family: var(--szc-font-mono); }
.u-nowrap { white-space: nowrap; }
.u-maxch { max-width: 66ch; }

/* ---------- 27. RESPONSIVE ----------------------------------------------- */
@media (max-width: 1180px) {
  .szc-editorial { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .szc-editorial > .szc-editorial__rail { grid-column: 1 / -1; }
  .szc-rail { position: static; }
  .szc-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .szc-logos__cell:nth-child(3n) { border-right: 0; }
  .szc-footer__grid { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 1020px) {
  .szc-nav { display: none; }
  .szc-burger { display: inline-grid; }
  .szc-quad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .szc-split { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 780px) {
  :root { --szc-band: 44px; }
  .szc-editorial { grid-template-columns: minmax(0, 1fr); }
  .szc-duo { grid-template-columns: minmax(0, 1fr); }
  .szc-counters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .szc-counter:nth-child(2n) { border-right: 0; }
  .szc-counter:nth-child(-n+2) { border-bottom: 1px solid var(--szc-line); }
  .szc-footer__grid { grid-template-columns: 1fr 1fr; }
  .szc-cta__inner { flex-direction: column; align-items: flex-start; }
  .szc-rank__item { grid-template-columns: 54px minmax(0, 1fr); }
  .szc-rank__val { grid-column: 2; text-align: left; }
  .szc-strip__label span { display: none; }
}

@media (max-width: 560px) {
  .szc-quad { grid-template-columns: minmax(0, 1fr); }
  .szc-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .szc-logos__cell:nth-child(2n) { border-right: 0; }
  .szc-footer__grid { grid-template-columns: 1fr; }
  .szc-ep { grid-template-columns: 56px minmax(0, 1fr); }
  .szc-ep__art { width: 56px; height: 56px; }
  .szc-ep__play { grid-column: 2; justify-self: start; }
  .szc-ticker__tag span { display: none; }
  .szc-news__form { flex-direction: column; }
  .szc-counters { grid-template-columns: 1fr; }
  .szc-counter { border-right: 0; border-bottom: 1px solid var(--szc-line); }
}

/* ---------- 28. REDUCED MOTION & PRINT ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-sc-reveal] { opacity: 1 !important; transform: none !important; }
  .szc-mask > span { transform: none !important; }
  .szc-ticker__track { animation: none !important; }
  .szc-pulse { animation: none !important; }
}

@media print {
  .szc-header, .szc-strip, .szc-ticker, .szc-wa, .szc-top, .szc-cookie, .szc-progress, .szc-drawer { display: none !important; }
  body { background: #fff; color: #000; }
  .szc-card, .szc-lead, .szc-rail { border-color: #ccc; background: #fff; }
}