/* ============================================================
   ssx3000 - Creator press-kit (Nova Grid navy + cyan theme)
   Token-driven. Reskin the whole page from :root below.
   Syne (expressive display) + Inter (grotesque) on deep navy.
   ============================================================ */

/* ---------------------------------------------------------- *
   1. DESIGN TOKENS  (edit here to reskin light OR dark)
 * ---------------------------------------------------------- */
:root {
  /* --- 7-variable palette + 1 anchor token (Nova Grid navy + cyan) --- */
  --bg:      #080D20;   /* deep navy canvas                 */
  --surface: #0D1330;   /* card / panel surface             */
  --text:    #E8EAF6;   /* primary text (light)             */
  --muted:   #8890B8;   /* secondary text                   */
  --accent:  #00C8E0;   /* electric cyan (action + emphasis) */
  --accent2: #3D6FFF;   /* brand blue (single anchor tone)  */
  --border:  #253070;   /* hairline borders                 */
  --anchor:  #11204F;   /* lifted-navy feature surface      */

  /* derived */
  --accent-ink:  #061026;  /* deep-navy text on cyan button  */
  --accent-dark: #00AFC6;  /* cyan hover (~8% darker)        */
  --anchor-text: #E8EAF6;  /* light text on anchor card      */
  --anchor-num:  #00D8F2;  /* bright cyan number on anchor   */

  /* --- Logo-faithful color integration (added alongside the base;
         cyan stays primary, accent2 unchanged, red+teal are new lanes) --- */

  /* RED family (logo VA/HOSTING wordmark) — secondary pop, used with restraint */
  --red:        #D6273A;   /* deep brand red — FILL ONLY (offline dot, eyebrow tick); NOT text on navy (~3.9:1) */
  --red-bright: #FF5964;   /* brighter red — the ONLY red used AS TEXT/thin-mark on navy (~6.3:1 on bg, ~6.0:1 on surface) */
  --red-ink:    #FFF1F2;   /* near-white warm ink to sit ON a --red fill (~4.5:1); held in reserve */
  --red-dark:   #9E1420;   /* dark red bevel/shadow tone (logo beveled lettering); decorative only */

  /* TEAL family (logo right-side gradient) — DECORATIVE FIELD / GLOW / GRADIENT-STOP ONLY, never behind text */
  --teal:       #2C8FA8;   /* muted cyan-teal; never raw behind light text (#E8EAF6 on it ~3.1:1, under the 4.5 floor) */
  --teal-deep:  #1C5C6E;   /* darkened teal for near-text/footer stop so substrate under text stays navy */
  --glow-core:  #CFF7FF;   /* electric-cyan near-white glow core (logo star), used only at low alpha */

  /* navy->teal gradient fields (how teal becomes visible sitewide) */
  --grad-hero-field:   linear-gradient(105deg, var(--surface) 0%, var(--bg) 30%, color-mix(in srgb, var(--teal) 95%, var(--surface)) 90%);
  /* subtle sitewide navy->teal wash (applied to body) so the left-navy/right-teal
     field reads on every page, not just the hero the portrait card mostly covers */
  --grad-body-field:   linear-gradient(115deg, var(--bg) 0%, var(--bg) 50%, color-mix(in srgb, var(--teal) 25%, var(--bg)) 100%);
  --grad-footer-band:  linear-gradient(90deg, var(--surface) 0%, var(--surface) 62%, color-mix(in srgb, var(--teal-deep) 35%, var(--surface)) 100%);

  /* electric-cyan hero glow (glow-core -> cyan -> blue -> transparent), replaces the hero blob accent2 wash */
  --glow-cyan: radial-gradient(circle at 60% 40%,
               color-mix(in srgb, var(--glow-core) 42%, transparent) 0%,
               color-mix(in srgb, var(--accent) 34%, transparent) 28%,
               color-mix(in srgb, var(--accent2) 18%, transparent) 56%,
               transparent 78%);

  /* faint cyan grid (logo grid-over-star) — two crossed 1px linear-gradients, hero-only, masked.
     Alphas sized for a SEPARATE full-opacity overlay (.hero__noise::before), NOT the 0.06 grain layer. */
  --grid-cyan: linear-gradient(color-mix(in srgb, var(--accent) 85%, transparent) 1px, transparent 1px),
               linear-gradient(90deg, color-mix(in srgb, var(--accent) 85%, transparent) 1px, transparent 1px);
  --grid-size: 34px;       /* cell size for the cyan grid texture (tunable cadence) */

  /* faint horizontal scanline (logo left-edge CRT texture) — hero-only, rides the full-opacity overlay */
  --scanline: repeating-linear-gradient(0deg, color-mix(in srgb, var(--accent) 45%, transparent) 0 1px, transparent 1px 4px);

  /* cyan-led 3-stop hairline (cyan -> blue -> short warm red tail); only place cyan + red co-appear */
  --grad-accent-rule: linear-gradient(90deg, var(--accent), var(--accent2) 60%, var(--red-bright));

  /* --- type --- */
  --font-head: "Syne", "Trebuchet MS", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* fluid sizes */
  --fs-h1:     clamp(2.25rem, 4.5vw + 0.5rem, 4.5rem);   /* Syne is wider/heavier than Fraunces — smaller scale */
  --fs-h2:     clamp(1.625rem, 2.6vw + 0.6rem, 2.75rem);
  --fs-h3:     1.5rem;
  --fs-lead:   clamp(1.0625rem, 1.2vw, 1.25rem);
  --fs-body:   1.0625rem;
  --fs-ui:     0.9375rem;
  --fs-small:  0.8125rem;
  --fs-stat:   clamp(2.5rem, 4vw, 3.75rem);

  /* --- spacing (8px grid) --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 120px;

  /* --- radii --- */
  --r-pill:  999px;
  --r-input: 12px;
  --r-tile:  18px;
  --r-card:  20px;
  --r-frame: 24px;
  --r-panel: 28px;

  /* --- shadows (soft only) --- */
  --sh-card:  0 8px 24px -12px rgba(2, 6, 20, 0.55);
  --sh-hover: 0 16px 36px -14px rgba(2, 6, 20, 0.70);
  --sh-frame: 0 24px 48px -16px rgba(2, 6, 20, 0.60);

  /* --- layout --- */
  --container: 1200px;
  --gutter: 24px;
  --nav-h: 72px;

  /* --- motion --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 280ms;
}

/* The active theme above is DARK NOVA GRID (navy + cyan).
   Two optional alternates below: paste either palette over the
   :root values above to swap. Only tokens change, no component edits. */

/* ---- ALT A: LIGHT NOVA GRID (white + navy + cyan) ----
   Navy is the AA-safe action/text color here; cyan is the secondary pop.
:root {
  --bg:      #FFFFFF;
  --surface: #F4F6FB;
  --text:    #0D1033;
  --muted:   #5A6080;
  --accent:  #0E1A4A;
  --accent2: #00A6BD;
  --border:  #D4D8E8;
  --anchor:  #0E1A4A;
  --accent-ink:  #FFFFFF;
  --accent-dark: #162260;
  --anchor-text: #FFFFFF;
  --anchor-num:  #00C8E0;
}
*/

/* ---- ALT B: ORIGINAL WARM EDITORIAL (sand + clay) ----
:root {
  --bg:      #F4EDE3;  --surface: #FBF7F0;  --text:   #211E1A;  --muted:  #6B6155;
  --accent:  #BD4B2C;  --accent2: #2F6E68;  --border: #E3D8C8;  --anchor: #26221E;
  --accent-ink: #FBF7F0; --accent-dark: #A53F23; --anchor-text: #F4EDE3; --anchor-num: #E8B9A6;
}
*/

/* ---------------------------------------------------------- *
   2. RESET / BASE
 * ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text);
  background-color: var(--bg);
  background-image: var(--grad-body-field);
  background-attachment: fixed; /* anchor the navy->teal field to the viewport, not the scroll length */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; }

h1, h2, h3 {
  font-family: var(--font-head);
  font-optical-sizing: auto;
  font-weight: 600;
  color: var(--text);
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* skip link */
.skip-link {
  position: absolute;
  left: 8px;
  top: -64px;
  z-index: 200;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 10px 18px;
  border-radius: var(--r-input);
  font-size: var(--fs-ui);
  font-weight: 600;
  transition: top 180ms var(--ease);
}
.skip-link:focus { top: 8px; }

/* universal focus-visible ring */
:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* shared bits ------------------------------------------------ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
}
/* sitewide logo-red tick — 22x3px deep-red dash (fill, not text) */
.eyebrow::before {
  content: "";
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--red);
  flex: none;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--muted);
  max-width: 48ch;
}

.serif-italic {            /* accent word; Syne has no italic axis -> weight + cyan, not fake oblique */
  font-style: normal;
  font-weight: 800;
  color: var(--accent);
}

/* ---------------------------------------------------------- *
   3. BUTTONS / PILLS
 * ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-ui);
  font-weight: 500;
  border-radius: var(--r-pill);
  padding: 14px 28px;
  border: 1.5px solid transparent;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
  white-space: nowrap;
}
.btn__ico { width: 18px; height: 18px; fill: currentColor; }

.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
  fill: var(--accent-ink);
}
.btn--primary:hover { background: var(--accent-dark); }

/* Offline state for the hero "Watch live" CTA (set by main.js when the channel
   isn't live). Calmer than the live cyan so "Online now" stays the loud moment,
   but still clearly the primary action — it points to the latest VODs. */
.btn--primary.is-offline {
  background: color-mix(in srgb, var(--accent) 20%, var(--surface));
  color: var(--text);
  fill: var(--text);
}
.btn--primary.is-offline:hover {
  background: color-mix(in srgb, var(--accent) 32%, var(--surface));
  box-shadow: none;
}

.btn--ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}
.btn--ghost:hover { border-color: var(--red-bright); color: var(--red-bright); }

.btn--block { width: 100%; justify-content: center; }

/* ---------------------------------------------------------- *
   4. HEADER / NAV
 * ---------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav {
  height: var(--nav-h);
  background: transparent;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
/* frosted state once scrolled (toggled by JS) */
.nav.is-scrolled {
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--border);
}

.nav__inner {
  height: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}

.wordmark {
  font-family: var(--font-head);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--text);
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

.nav__link {
  position: relative;
  font-size: var(--fs-ui);
  font-weight: 500;
  color: var(--muted);
  padding: 6px 2px;
  transition: color 200ms var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms var(--ease), height 200ms var(--ease);
}
.nav__link:hover { color: var(--text); }
.nav__link:hover::after { transform: scaleX(1); height: 2px; }
.nav__link.is-active {
  color: var(--text);
}
.nav__link.is-active::after { transform: scaleX(1); height: 2px; }

/* hamburger */
.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav__toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 200ms var(--ease), opacity 200ms var(--ease);
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* ---------------------------------------------------------- *
   5. SOCIAL ICON ROW (shared)
 * ---------------------------------------------------------- */
.social-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.social-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-pill);
  color: var(--muted);
  transition: color 180ms var(--ease), background-color 180ms var(--ease);
}
.social-ico svg { width: 19px; height: 19px; fill: currentColor; }
.social-ico:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* ---------------------------------------------------------- *
   6. HERO
 * ---------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 88vh;
  padding-top: calc(var(--nav-h) + clamp(32px, 6vh, 72px));
  padding-bottom: clamp(48px, 8vh, 96px);
  background: var(--grad-hero-field);
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* faint grain overlay (procedural — no external asset needed). This element
   carries ONLY the SVG turbulence grain at opacity 0.06. The cyan grid +
   CRT scanline used to live here too, but the 0.06 element-opacity multiplied
   their per-line alpha down to ~0.84% / ~0.42% = imperceptible. They now ride
   a separate full-opacity ::before so the lattice actually reads. Hero-only. */
.hero__noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask: radial-gradient(120% 90% at 72% 34%, #000 0 30%, transparent 70%);
          mask: radial-gradient(120% 90% at 72% 34%, #000 0 30%, transparent 70%);
}

/* logo-faithful cyan grid + left-edge CRT scanline, on their OWN layer at full
   opacity (the faintness comes from the per-line cyan alpha, NOT a 0.06 multiply).
   Same glow-centered mask so the lattice dissolves before the copy column. */
.hero__noise::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    var(--grid-cyan),
    var(--scanline);
  background-size: var(--grid-size) var(--grid-size), auto;
  -webkit-mask: radial-gradient(120% 90% at 72% 34%, #000 0 30%, transparent 70%);
          mask: radial-gradient(120% 90% at 72% 34%, #000 0 30%, transparent 70%);
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}

.hero__copy > * + * { margin-top: var(--sp-4); }

.hero__title {
  font-size: var(--fs-h1);
  line-height: 0.98;
  letter-spacing: -0.03em;   /* tighten the wide Syne wordmark so it never overflows the column */
  font-weight: 800;
  margin-top: var(--sp-3);
  max-width: 100%;
  overflow-wrap: break-word;
}

.hero__phrase {
  font-family: var(--font-head);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.1;
  color: var(--text);
}

/* the inked accent word */
.ink {
  position: relative;
  display: inline-block;
  font-style: normal;
  font-weight: 700;
  color: var(--text);
  padding-bottom: 2px;
}
.ink__stroke {
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 14px;
  color: var(--accent);
  overflow: visible;
}
.ink__stroke path {
  stroke-dasharray: 210;
  stroke-dashoffset: 210;
}
html.js .ink__stroke path { transition: stroke-dashoffset 700ms var(--ease); }
.ink__stroke.is-drawn path { stroke-dashoffset: 0; }
/* no-js: show the underline fully */
html.no-js .ink__stroke path { stroke-dashoffset: 0; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

/* live-status chip */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-small);
  color: var(--muted);
  padding-left: 4px;
}
/* Chip starts hidden and is revealed by JS once the live check answers. This
   override is required because the display above beats [hidden]'s UA default. */
.status-chip[hidden] { display: none; }
.status-chip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent2);
  position: relative;
  flex: none;
}
.status-chip[data-live="true"] .status-chip__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent2);
  animation: pulse 1.8s var(--ease) infinite;
}
/* offline state = logo-red pop (dot + label, never color-alone) */
.status-chip[data-live="false"] .status-chip__dot {
  background: var(--red);
  box-shadow: inset 0 -1px 0 var(--red-dark);
}
.status-chip[data-live="false"] .status-chip__label { color: var(--red-bright); }

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

/* hairline meta */
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--muted);
}
.hero__meta [aria-hidden] { color: var(--border); }
/* Accent so a link in the quick-facts row reads as one (bare anchors
   inherit the muted meta color here). */
.hero__meta-link { color: var(--accent); font-weight: 600; }

/* portrait */
.hero__portrait { position: relative; }

.hero__blob {
  position: absolute;
  top: -8%;
  right: -10%;
  width: 70%;
  aspect-ratio: 1;
  background: var(--glow-cyan);
  z-index: 0;
  pointer-events: none;
}
html.js .hero__blob { animation: blobDrift 26s ease-in-out infinite alternate; }

@keyframes blobDrift {
  from { transform: translate(0, 0); }
  to   { transform: translate(-10px, 10px); }
}

.portrait-card {
  position: relative;
  z-index: 1;
  border-radius: var(--r-frame);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--sh-frame);
  background: var(--surface);
}
.portrait-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
/* missing-image fallback look */
.portrait-card img.is-missing {
  display: grid;
  place-content: center;
  aspect-ratio: 4 / 5;
  background:
    repeating-linear-gradient(45deg, var(--border) 0 12px, transparent 12px 24px),
    var(--surface);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  text-align: center;
  padding: var(--sp-4);
}
.portrait-card__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  font-size: var(--fs-small);
  color: var(--accent-ink);
  background: linear-gradient(transparent, rgba(2,6,20,0.55)); /* cool navy scrim (was warm #23201C leftover) */
  padding: 28px 14px 12px;
  text-align: center;
  opacity: 0.85;
}

/* live hero takeover: main.js flips .is-live on .hero__portrait while the
   channel is live, overlaying the injected Twitch player on the portrait.
   The player OVERLAYS the 4:5 portrait box (rather than replacing it in flow)
   so going live changes pixels, not geometry — no layout shift on the flip or
   on a load-while-live. The 16:9 iframe letterboxes vertically on the black
   field inside the taller 4:5 frame. */
.hero__live {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  border-radius: var(--r-frame);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--sh-frame);
  background: #000;
}
/* required because the grid display above beats [hidden]'s UA default */
.hero__live[hidden] { display: none; }
.hero__live iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}
/* keep the portrait card holding its 4:5 space (visibility, not display) so
   the column height is identical live vs offline */
.hero__portrait.is-live .portrait-card { visibility: hidden; }
/* a floating live video reads as glitchy — pin the column while live */
html.js .hero__portrait.is-live { animation: none; }

/* latest-broadcast card (offline state, under the hero meta strip) */
.vod-card {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  padding: var(--sp-3);
  max-width: 460px;
  border: 1px solid var(--border);
  border-radius: var(--r-tile);
  background: var(--surface);
  box-shadow: var(--sh-card);
  text-decoration: none;
  color: var(--text);
  /* starts transparent; JS adds .is-shown to fade it in (opacity), so it
     never snaps in opaque while the reveal siblings above are still
     staggering. The card is JS-only (hidden by default), so opacity:0 is safe
     — with JS off it is never unhidden. */
  opacity: 0;
  transition: opacity 500ms var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.vod-card.is-shown { opacity: 1; }
/* required because the flex display above beats [hidden]'s UA default */
.vod-card[hidden] { display: none; }
.vod-card:hover,
.vod-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--sh-hover);
  border-color: var(--accent);
}
.vod-card__thumb {
  flex: none;
  width: 128px;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-input);
  overflow: hidden;
  /* hatched placeholder shows until (unless) the thumbnail loads */
  background:
    repeating-linear-gradient(45deg, var(--border) 0 12px, transparent 12px 24px),
    var(--anchor);
}
.vod-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vod-card__body {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.vod-card__eyebrow {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.vod-card__title {
  font-weight: 600;
  font-size: var(--fs-ui);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vod-card__meta {
  font-size: var(--fs-small);
  color: var(--muted);
}

/* visually-hidden but exposed to assistive tech (screen readers, etc.).
   Used to give keyboard/touch/AT users the live stream title, which is
   otherwise only reachable as a mouse-hover tooltip. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------- *
   7. GENERIC SECTION
 * ---------------------------------------------------------- */
.section {
  padding-block: clamp(80px, 12vh, 120px);
}
.section--wall { background: transparent; } /* let the body navy->teal field show through (was flat --bg) */

.section__head { margin-bottom: var(--sp-7); }
.section__head .eyebrow { margin-bottom: var(--sp-3); }
.section__title {
  font-size: var(--fs-h2);
  line-height: 1.05;
  letter-spacing: -0.015em;
  max-width: 22ch;
}

/* ---------------------------------------------------------- *
   8. MEDIA KIT — stat cards
 * ---------------------------------------------------------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}

.stat-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--sp-6);
  box-shadow: var(--sh-card);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--sh-hover); }

.stat-card__label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.stat-card__icon {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  width: 20px;
  height: 20px;
  color: var(--accent);
}
.stat-card__icon svg { width: 20px; height: 20px; fill: currentColor; }

.stat-card__num {
  display: block;
  margin-top: var(--sp-4);
  font-family: var(--font-head);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: var(--fs-stat);
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stat-card__note {
  display: block;
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--muted);
}

/* the single dark-anchor card */
.stat-card--anchor {
  background: var(--anchor);
  border-color: var(--anchor);
}
.stat-card--anchor .stat-card__label,
.stat-card--anchor .stat-card__note { color: color-mix(in srgb, var(--anchor-text) 70%, transparent); }
.stat-card--anchor .stat-card__num   { color: var(--anchor-num); }
.stat-card--anchor .stat-card__icon  { color: var(--anchor-num); }

/* logo row */
.logos { margin-top: var(--sp-8); }
.logos .eyebrow { margin-bottom: var(--sp-4); }
.logos__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-block: var(--sp-5);
}
.logos__item {
  flex: 1 1 0;
  min-width: 120px;
  text-align: center;
  font-family: var(--font-head);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--muted);
  opacity: 0.7;
  padding-inline: var(--sp-4);
  border-right: 1px solid var(--border);
  transition: color 180ms var(--ease), opacity 180ms var(--ease);
}
.logos__item:last-child { border-right: 0; }
.logos__item:hover { color: var(--text); opacity: 1; }

/* offer */
.offer {
  margin-top: var(--sp-8);
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--sp-7);
  align-items: start;
}
.offer__title { font-size: var(--fs-h3); margin-bottom: var(--sp-3); }
.offer__text { color: var(--muted); max-width: 56ch; }
.offer__cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
.offer__hint { font-size: var(--fs-small); color: var(--muted); }

/* ---------------------------------------------------------- *
   9. SOCIAL WALL
 * ---------------------------------------------------------- */
.wall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  grid-auto-flow: dense;
  gap: var(--sp-4);
}

.tile {
  position: relative;
  border-radius: var(--r-tile);
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--sh-card);
}

.tile--feature { grid-column: span 2; grid-row: span 2; }
.tile--tall    { grid-row: span 2; }

/* media box with reserved aspect-ratio (no CLS) */
.tile__media {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tile__media[data-ratio="16x9"] { aspect-ratio: 16 / 9; }
.tile__media[data-ratio="9x16"] { aspect-ratio: 9 / 16; }
.tile--feature .tile__media { aspect-ratio: auto; min-height: 100%; }

.tile__media img,
.tile__media iframe {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  transition: transform 400ms var(--ease);
}
.tile:hover .tile__media img { transform: scale(1.04); }

.tile__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  background:
    repeating-linear-gradient(135deg,
      color-mix(in srgb, var(--text) 4%, var(--surface)) 0 18px,
      var(--surface) 18px 36px);
  color: var(--muted);
  font-size: var(--fs-small);
  font-weight: 600;
  text-align: center;
  padding: var(--sp-4);
}
.tile__play { width: 36px; height: 36px; fill: var(--accent); transition: transform 300ms var(--ease); }

/* "open on platform" link card (used until a real embed is pasted in) */
.tile__link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.tile__link:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.tile__placeholder--cta {
  gap: var(--sp-2);
  color: var(--text);
  background:
    radial-gradient(120% 85% at 50% 0%,
      color-mix(in srgb, var(--accent) 16%, var(--surface)) 0%,
      var(--surface) 68%);
  transition: background 320ms var(--ease);
}
.tile__link:hover .tile__placeholder--cta,
.tile__link:focus-visible .tile__placeholder--cta {
  background:
    radial-gradient(120% 85% at 50% 0%,
      color-mix(in srgb, var(--accent) 26%, var(--surface)) 0%,
      var(--surface) 72%);
}
.tile__link:hover .tile__play { transform: scale(1.08); }
.tile__cta-text {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-ui);
  letter-spacing: -0.01em;
  color: var(--text);
}
.tile__cta-sub {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--muted);
}

/* frosted platform badge */
.badge {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 5px 11px 5px 9px;
}
.badge svg { width: 15px; height: 15px; fill: var(--accent); }

/* hover scrim */
.tile__scrim {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 36px 14px 14px;
  background: linear-gradient(transparent, rgba(2,6,20,0.78)); /* cool navy scrim (was warm #23201C leftover) */
  color: var(--bg);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}
.tile:hover .tile__scrim,
.tile:focus-within .tile__scrim { opacity: 1; transform: translateY(0); }
.tile__title { font-weight: 600; font-size: var(--fs-ui); }
.tile__meta { font-size: var(--fs-small); opacity: 0.85; }

/* pull-quote tiles */
.tile--quote {
  display: flex;
  align-items: center;
  padding: var(--sp-6);
  min-height: 180px;
}
.pull-quote p {
  font-family: var(--font-body);   /* Inter has a true italic; Syne does not */
  font-style: italic;
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.4;
}
.pull-quote cite {
  display: block;
  margin-top: var(--sp-3);
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--fs-small);
  font-weight: 500;
  opacity: 0.85;
}
.tile--quote-teal {
  background: var(--anchor);
  border-color: var(--anchor);
  color: var(--text);
}
/* light --text on navy --anchor: body (22px) and 13px cite both clear AA */
.tile--quote-teal .pull-quote cite { opacity: 1; }
.tile--quote-surface {
  background: var(--surface);
  color: var(--text);
  position: relative;
}
.pull-quote__mark {
  position: absolute;
  top: 4px;
  left: var(--sp-5);
  font-family: var(--font-head);
  font-size: 4rem;
  line-height: 1;
  color: var(--accent);
}
.tile--quote-surface .pull-quote { padding-top: var(--sp-5); }

/* follow row */
.follow {
  margin-top: var(--sp-8);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
}
.follow__label {
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
}
.social-row--pills { gap: var(--sp-2); }
.pill {
  display: inline-flex;
  font-size: var(--fs-ui);
  font-weight: 500;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 8px 18px;
  transition: border-color 180ms var(--ease), color 180ms var(--ease), background-color 180ms var(--ease);
}
.pill:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* ---------------------------------------------------------- *
   10. CONTACT
 * ---------------------------------------------------------- */
.contact-panel {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  padding: clamp(28px, 5vw, 56px);
  box-shadow: var(--sh-card);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 56px);
  overflow: hidden;
}
/* the one decorative gradient: top-edge hairline */
.contact-panel__edge {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-accent-rule);
}

.contact__left > * + * { margin-top: var(--sp-4); }
.contact__direct { font-size: var(--fs-ui); color: var(--muted); margin-top: var(--sp-5); }

.mailto-link {
  font-family: var(--font-head);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: 1.375rem;
  color: var(--accent2);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.mailto-link:hover { color: var(--text); }
.mailto-link--sm { font-size: var(--fs-ui); }

.social-row--contact { margin-top: var(--sp-5); }

/* form */
.contact-form__note {
  font-size: var(--fs-small);
  color: var(--accent);
  margin-bottom: var(--sp-4);
  font-weight: 600;
}
.field { margin-bottom: var(--sp-4); }
.field label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: var(--sp-2);
  color: var(--text);
}
.field input,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: var(--fs-ui);
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  padding: 12px 14px;
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.field textarea { resize: vertical; min-height: 110px; }
.field input::placeholder,
.field textarea::placeholder { color: var(--muted); opacity: 1; }
.field input:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}
/* honeypot — hidden but reachable for bots, not users */
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-form__fallback {
  margin-top: var(--sp-4);
  font-size: var(--fs-small);
  color: var(--muted);
}

/* AJAX submit feedback (shown by main.js section 9) */
.contact-form__status {
  margin-top: var(--sp-4);
  padding: 12px 14px;
  border-radius: var(--r-input);
  border: 1px solid var(--border);
  background: var(--anchor);
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--text);
}
.contact-form__status.is-success {
  color: var(--glow-core);
  border-color: var(--accent);
}
.contact-form__status.is-error {
  color: var(--red-bright);
  border-color: var(--red-bright);
}

/* ---------------------------------------------------------- *
   11. FOOTER
 * ---------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--grad-footer-band);
  padding-block: var(--sp-7);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}
.wordmark--footer { font-size: 1.375rem; }
.site-footer__tag {
  font-size: var(--fs-small);
  color: var(--muted);
  margin-top: var(--sp-1);
}
.site-footer__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--muted);
}
.to-top {
  font-weight: 600;
  color: var(--accent); /* cyan clears AA on navy AND the teal-deep footer end-stop; accent2 did not */
}
.to-top:hover { color: var(--red-bright); }

/* ---------------------------------------------------------- *
   12. REVEAL-ON-SCROLL
   Gated on html.reveal-ready, which main.js adds at the top of its
   IIFE. This is deliberately NOT html.js: the head guard fires before
   main.js proves it ran, so coupling to it would hide all content if
   main.js failed to load. With reveal-ready, a failed/blocked script
   leaves every .reveal element fully visible.
 * ---------------------------------------------------------- */
html.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 650ms var(--ease), transform 650ms var(--ease);
}
html.reveal-ready .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------- *
   13. RESPONSIVE
 * ---------------------------------------------------------- */
@media (min-width: 768px) {
  .hero__grid {
    grid-template-columns: 7fr 5fr;
  }
}

/* tablet/down nav + layout */
@media (max-width: 880px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .offer { grid-template-columns: 1fr; gap: var(--sp-5); }
  .wall { grid-template-columns: repeat(2, 1fr); }
  .tile--feature { grid-column: span 2; grid-row: span 1; }
  .tile--feature .tile__media { aspect-ratio: 16 / 9; }
  .contact-panel { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  :root { --nav-h: 64px; }

  /* mobile nav sheet */
  .nav__toggle { display: flex; }

  .nav__menu {
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;
    width: min(82vw, 360px);
    background: var(--bg);
    border-left: 1px solid var(--border);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: calc(var(--nav-h) + 24px) 28px 28px;
    transform: translateX(100%);
    transition: transform 320ms var(--ease);
    box-shadow: -16px 0 40px -20px rgba(2,6,20,0.3); /* cool navy (was warm #23201C leftover) */
    /* let the sheet scroll when its links + social row exceed the viewport
       (e.g. 6 nav items on a short/landscape phone) */
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .nav__menu.is-open { transform: translateX(0); }

  .nav__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav__link {
    font-family: var(--font-head);
    font-optical-sizing: auto;
    font-size: 1.75rem;
    font-weight: 500;
    color: var(--text);
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
  }
  .nav__link::after { display: none; }

  /* staggered fade-in of sheet links (JS adds .is-open) */
  html.js .nav__menu .nav__link {
    opacity: 0;
    transform: translateX(12px);
    transition: opacity 300ms var(--ease), transform 300ms var(--ease);
  }
  html.js .nav__menu.is-open .nav__link { opacity: 1; transform: none; }
  html.js .nav__menu.is-open .nav__link:nth-child(1) { transition-delay: 80ms; }
  html.js .nav__menu.is-open .nav__link:nth-child(2) { transition-delay: 140ms; }
  html.js .nav__menu.is-open .nav__link:nth-child(3) { transition-delay: 200ms; }
  html.js .nav__menu.is-open .nav__link:nth-child(4) { transition-delay: 260ms; }

  .social-row--nav {
    margin-top: auto;
    justify-content: flex-start;
    padding-top: var(--sp-5);
  }

  .hero__actions .btn { flex: 1 1 100%; justify-content: center; }
  .hero__actions .status-chip { flex: 1 1 100%; justify-content: center; }

  .hero__blob { width: 50%; top: -4%; right: -6%; }

  .wall { grid-template-columns: 1fr; }
  .tile--feature, .tile--tall { grid-column: auto; grid-row: auto; }
  .tile--tall .tile__media { aspect-ratio: 9 / 16; }

  .site-footer__inner { flex-direction: column; align-items: flex-start; }
  .site-footer__meta { align-items: flex-start; }

  .logos__item { flex: 1 1 33%; min-width: 0; font-size: 1.0625rem; }
  .logos__item:nth-child(3) { border-right: 0; }
}

@media (max-width: 420px) {
  .logos__item { flex: 1 1 50%; }
  .logos__item:nth-child(even) { border-right: 0; }
}

/* ---------------------------------------------------------- *
   14. REDUCED MOTION — kill all motion, keep end states
 * ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  html.reveal-ready .reveal { opacity: 1 !important; transform: none !important; }
  .ink__stroke path { stroke-dashoffset: 0 !important; }
  .status-chip__dot::after { animation: none !important; }
  .hero__blob { animation: none !important; }
  .marquee__track { animation: none !important; }
  html.js .hero__portrait { animation: none !important; }
  .hero__title { animation: none !important; }
  .scroll-progress { display: none !important; }
}

/* ---------------------------------------------------------- *
   Media Kit: work-in-progress notice + official-sponsor feature
 * ---------------------------------------------------------- */
.mk-wip {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--r-card);
  padding: var(--sp-7) var(--sp-6);
  text-align: center;
  box-shadow: var(--sh-card);
}
.mk-wip__badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent-ink);
  background: var(--accent);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-4);
}
.mk-wip__text {
  color: var(--muted);
  max-width: 54ch;
  margin-inline: auto;
  font-size: var(--fs-lead);
  line-height: 1.6;
}
.mk-wip__text a { color: var(--accent); font-weight: 600; }
.mk-wip__text a:hover { color: var(--accent-dark); }

.sponsor { margin-top: var(--sp-7); }
.sponsor-link {
  display: inline-block;
  margin-top: var(--sp-2);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  letter-spacing: -0.01em;
  color: var(--accent);
}
.sponsor-link:hover { color: var(--accent-dark); }
.sponsor-desc { margin-top: var(--sp-2); max-width: 52ch; color: var(--muted); }

/* Footer official-sponsor strip (sitewide) */
.site-footer__sponsor {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: var(--fs-small);
  color: var(--muted);
}
.site-footer__sponsor-label {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-right: 8px;
}
.site-footer__sponsor a { color: var(--accent); font-weight: 600; }
.site-footer__sponsor a:hover { color: var(--accent-dark); }

/* ---------------------------------------------------------- *
   15. BOLD MOTION — animated wordmark, marquee, micro-interactions
   Reduced-motion users get static end states (see section 14).
 * ---------------------------------------------------------- */

/* animated brand-gradient sweep across the hero wordmark */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__title {
    background-image: linear-gradient(100deg,
      var(--accent) 0%, var(--accent2) 18%, var(--red-bright) 38%,
      var(--glow-core) 50%, var(--red-bright) 62%, var(--accent2) 82%, var(--accent) 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: wordmarkSweep 5s linear infinite;
    filter: drop-shadow(0 0 22px color-mix(in srgb, var(--accent) 45%, transparent));
  }
}
/* forced-colors (high contrast): drop the clip, keep a solid system color */
@media (forced-colors: active) {
  .hero__title {
    -webkit-text-fill-color: CanvasText;
    color: CanvasText;
    background: none;
  }
}
@keyframes wordmarkSweep {
  from { background-position:   0% 50%; }
  to   { background-position: 250% 50%; }
}

/* nav + footer wordmark: animated brand gradient on every page (mostly text
   color with a cyan/blue glint sweeping through), plus a glow on hover */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .wordmark {
    background-image: linear-gradient(100deg,
      var(--text) 0%, var(--text) 26%, var(--accent) 42%, var(--glow-core) 50%,
      var(--accent2) 58%, var(--text) 74%, var(--text) 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: wordmarkSweep 6s linear infinite;
  }
  @media (forced-colors: active) {
    .wordmark { -webkit-text-fill-color: CanvasText; color: CanvasText; background: none; }
  }
}
.wordmark { transition: filter 220ms var(--ease); }
.wordmark:hover { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--accent) 60%, transparent)); }

/* buttons: lift, glow, and a glint that sweeps across on hover */
.btn { position: relative; overflow: hidden; }
.btn::before {
  content: "";
  position: absolute;
  top: 0; left: -130%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent,
    color-mix(in srgb, #ffffff 38%, transparent), transparent);
  transform: skewX(-18deg);
  transition: left 650ms var(--ease);
  pointer-events: none;
}
.btn:hover::before { left: 150%; }
.btn--primary:hover {
  background: var(--accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--accent) 65%, transparent);
}
.btn--ghost:hover {
  border-color: var(--red-bright);
  color: var(--red-bright);
  transform: translateY(-2px);
}

/* social icons: bouncy pop */
.social-ico {
  transition: color 180ms var(--ease), background-color 180ms var(--ease),
              transform 220ms var(--ease);
}
.social-ico:hover { transform: translateY(-3px) scale(1.12); }

/* feed tiles: lift + cyan edge glow (keeps the reveal opacity fade) */
.tile { transition: transform 300ms var(--ease), border-color 300ms var(--ease), box-shadow 300ms var(--ease); }
html.reveal-ready .tile {
  transition: opacity 500ms var(--ease), transform 300ms var(--ease),
              border-color 300ms var(--ease), box-shadow 300ms var(--ease);
}
.tile:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 18px 42px -20px color-mix(in srgb, var(--accent) 50%, transparent);
}

/* hero portrait: gentle float (parent) + tilt on hover (card) */
html.js .hero__portrait { animation: portraitFloat 8s ease-in-out infinite; }
@keyframes portraitFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.portrait-card { transition: transform 450ms var(--ease), box-shadow 450ms var(--ease); }
.hero__portrait:hover .portrait-card {
  transform: rotate(-1.2deg) scale(1.015);
  box-shadow: 0 30px 60px -24px color-mix(in srgb, var(--accent) 42%, transparent);
}

/* live chip: steadier glow on the pulsing dot */
.status-chip[data-live="true"] .status-chip__dot {
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent2) 80%, transparent);
}

/* scrolling marquee band (decorative) */
.marquee {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--border);
  background: linear-gradient(90deg, var(--surface), var(--bg) 50%, var(--surface));
  padding-block: clamp(14px, 2.4vw, 22px);
  -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: marquee 32s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.25rem, 2.6vw, 2rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text);
  padding-inline: clamp(18px, 3vw, 40px);
  white-space: nowrap;
}
.marquee__item--accent { color: var(--accent); }
.marquee__sep {
  color: var(--red-bright);
  font-size: clamp(0.9rem, 1.6vw, 1.25rem);
  line-height: 1;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* scroll-progress bar (element created by main.js, section 10) */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 3px;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--grad-accent-rule);
  z-index: 200;
  pointer-events: none;
}

/* animated brand gradient on section-title accent words (sitewide headings) */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .serif-italic {
    background-image: linear-gradient(100deg,
      var(--accent) 0%, var(--glow-core) 26%, var(--accent2) 50%,
      var(--red-bright) 72%, var(--accent) 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: wordmarkSweep 5s linear infinite;
  }
  @media (forced-colors: active) {
    .serif-italic { -webkit-text-fill-color: CanvasText; color: CanvasText; background: none; }
  }
}

/* media-kit "work in progress" badge: breathing glow */
html.js .mk-wip__badge { animation: badgePulse 2.8s ease-in-out infinite; }
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  50%      { box-shadow: 0 0 20px 2px color-mix(in srgb, var(--accent) 55%, transparent); }
}

/* media-kit: "what a partnership looks like" + "why" lists */
.mk-list { list-style: none; display: grid; gap: var(--sp-3); margin-top: var(--sp-4); max-width: 56ch; }
.mk-list li { position: relative; padding-left: 26px; color: var(--text); line-height: 1.5; }
.mk-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 9px; height: 9px;
  background: var(--accent);
  border-radius: 2px;
  transform: rotate(45deg);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent);
}
.offer__title--sub { margin-top: var(--sp-6); }

/* homepage weekly schedule */
.sched-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.sched-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--sh-card);
}
html.reveal-ready .sched-card {
  transition: opacity 500ms var(--ease), transform 300ms var(--ease),
              border-color 300ms var(--ease), box-shadow 300ms var(--ease);
}
.sched-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 18px 42px -20px color-mix(in srgb, var(--accent) 50%, transparent);
}
.sched-card__day { font-family: var(--font-head); font-weight: 800; font-size: 1.25rem; color: var(--accent); }
.sched-card__show { color: var(--text); font-weight: 600; }
.sched-card__time { color: var(--muted); font-size: var(--fs-small); }
.sched-note { margin-top: var(--sp-5); color: var(--muted); font-size: var(--fs-small); }
.sched-note a { color: var(--accent); font-weight: 600; }
@media (max-width: 680px) { .sched-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- *
   15. HOMEPAGE DATA SECTIONS (next-stream, top clips, blog)
       + the /go link hub. All token-driven; reduced-motion is
       handled by the universal !important rule in section 14.
 * ---------------------------------------------------------- */

/* -- next-stream countdown (schedule section) -- */
.next-stream {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--anchor);
  box-shadow: var(--sh-card);
}
.next-stream[hidden] { display: none; }
.next-stream__body { display: grid; gap: 2px; min-width: 0; }
.next-stream__eyebrow {
  font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent);
}
.next-stream__title {
  font-family: var(--font-head); font-weight: 600; font-size: 1.25rem;
  color: var(--anchor-text);
}
.next-stream__when { font-size: var(--fs-small); color: var(--muted); }
.next-stream__count {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--anchor-num);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sched-cal-row { margin-top: var(--sp-5); }

/* -- top clips reel -- */
.clips-reel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}
/* required because the grid display above beats [hidden]'s UA default */
.clips-reel[hidden] { display: none; }
/* recap's reel sits under the recap VOD card, not a section head */
#recap .clips-reel { margin-top: var(--sp-6); }
.clip-card {
  display: flex; flex-direction: column; gap: var(--sp-3);
  text-decoration: none; color: var(--text);
}
.clip-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-tile);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--anchor);
  box-shadow: var(--sh-card);
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.clip-card:hover .clip-card__media,
.clip-card:focus-visible .clip-card__media {
  transform: translateY(-3px);
  box-shadow: var(--sh-hover);
  border-color: var(--accent);
}
.clip-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.clip-card__media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.clip-card__play {
  position: absolute; inset: 0; margin: auto;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(8, 13, 32, 0.6);
  color: var(--accent);
  border: 1px solid var(--accent);
  font-size: 1.125rem;
  pointer-events: none;
}
.clip-card__views {
  position: absolute; left: 8px; bottom: 8px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: rgba(8, 13, 32, 0.72);
  color: var(--text);
  font-size: var(--fs-small); font-weight: 600;
}
.clip-card.is-playing .clip-card__play,
.clip-card.is-playing .clip-card__views { display: none; }
.clip-card__title {
  font-size: var(--fs-ui); font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* -- latest blog posts -- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
.post-card {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--sh-card);
  text-decoration: none; color: var(--text);
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.post-card:hover, .post-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--sh-hover);
  border-color: var(--accent);
}
.post-card__title {
  font-family: var(--font-head); font-weight: 600; font-size: 1.1875rem; line-height: 1.25;
}
.post-card__excerpt { font-size: var(--fs-ui); color: var(--muted); line-height: 1.5; flex: 1 1 auto; }
.post-card__date { font-size: var(--fs-small); color: var(--accent); font-weight: 600; }
.blog-latest__more { margin-top: var(--sp-6); }
.blog-latest__more a { color: var(--accent); font-weight: 600; text-decoration: none; }
.blog-latest__more a:hover { text-decoration: underline; }

/* -- /go link hub -- */
.go-body { min-height: 100dvh; display: flex; }
.go {
  width: 100%;
  display: grid;
  place-items: start center;
  padding: clamp(32px, 8vh, 80px) var(--gutter);
}
.go__inner {
  width: 100%; max-width: 520px;
  display: flex; flex-direction: column; gap: var(--sp-4);
  text-align: center;
}
.go__title { margin: 0; align-self: center; line-height: 1; }
.go__brand { font-size: 2rem; }
.go__tag { color: var(--muted); font-size: var(--fs-ui); margin-bottom: var(--sp-2); }
.go__live {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-card);
  border: 1px solid var(--accent);
  background: var(--anchor);
  text-decoration: none; color: var(--text);
  text-align: left;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.go__live:hover, .go__live:focus-visible { transform: translateY(-2px); box-shadow: var(--sh-hover); }
.go__live-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--muted); }
.go__live[data-live="true"] { border-color: var(--red-bright); }
.go__live[data-live="true"] .go__live-dot { background: var(--red); position: relative; }
.go__live[data-live="true"] .go__live-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--red);
  animation: pulse 1.8s var(--ease) infinite;
}
.go__live-main { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.go__live-text { font-family: var(--font-head); font-weight: 700; font-size: 1.125rem; }
.go__live[data-live="true"] .go__live-text { color: var(--red-bright); }
.go__live-sub { font-size: var(--fs-small); color: var(--muted); }
.go__live-arrow { color: var(--accent); font-size: 1.25rem; flex: none; }
.go__links { display: flex; flex-direction: column; gap: var(--sp-3); }
.go__link {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-input);
  border: 1px solid var(--border);
  background: var(--surface);
  text-decoration: none; color: var(--text);
  text-align: left;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.go__link:hover, .go__link:focus-visible { transform: translateX(3px); border-color: var(--accent); }
.go__link-name { font-weight: 600; }
.go__link-sub { font-size: var(--fs-small); color: var(--muted); }
.go__foot { margin-top: var(--sp-5); font-size: var(--fs-small); }
.go__foot a { color: var(--muted); text-decoration: none; }

/* -- responsive -- */
@media (max-width: 880px) {
  .clips-reel { grid-template-columns: repeat(2, 1fr); }
  .post-grid { grid-template-columns: 1fr; }
  .next-stream { justify-content: flex-start; }
}
@media (max-width: 480px) {
  .clips-reel { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------- *
   16. GO-LIVE NOTIFY BELL (hero button)
 * ---------------------------------------------------------- */
.notify-bell { display: inline-flex; align-items: center; gap: 8px; }
/* required because .btn sets its own display, beating [hidden]'s UA default */
.notify-bell[hidden] { display: none; }
.notify-bell__icon { font-size: 1em; line-height: 1; }
.notify-bell.is-on {
  border-color: var(--accent);
  color: var(--accent);
}
.notify-bell.is-on .notify-bell__icon { filter: none; }

/* ---------------------------------------------------------- *
   17. CHAT-TRIGGERED EFFECTS (confetti / flash / shake)
       Live-only; the JS poller is disabled under reduced-motion,
       and section 14's universal rule also neutralizes these.
 * ---------------------------------------------------------- */
.fx-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 9998;
}
.fx-confetti {
  position: absolute;
  top: -6vh;
  width: 10px;
  height: 14px;
  border-radius: 2px;
  opacity: 0.9;
  animation: fxFall 2.6s linear forwards;
}
@keyframes fxFall {
  to { transform: translateY(112vh) translateX(calc(var(--x, 0) * 28vw)) rotate(560deg); opacity: 0; }
}
.fx-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(0, 200, 224, 0.32), transparent 70%);
  animation: fxFlash 0.75s ease-out forwards;
}
@keyframes fxFlash {
  0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; }
}
.fx-shake { animation: fxShake 0.7s ease-in-out; }
@keyframes fxShake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-6px, 3px); }
  40% { transform: translate(6px, -3px); }
  60% { transform: translate(-5px, -2px); }
  80% { transform: translate(5px, 2px); }
}

/* ---------------------------------------------------------- *
   18. STATS: media-kit strip + /stats page heatmap
 * ---------------------------------------------------------- */
.mk-stats { margin: var(--sp-6) 0; }
.mk-stats[hidden] { display: none; }
.mk-stats__grid,
.stats-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}
.mk-stat {
  padding: var(--sp-5) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--sh-card);
  text-align: center;
}
.mk-stat__num {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-stat);
  line-height: 1;
  color: var(--anchor-num);
  font-variant-numeric: tabular-nums;
}
.mk-stat__label {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--muted);
}
.mk-stats__note { margin-top: var(--sp-4); font-size: var(--fs-small); color: var(--muted); }

/* /stats page */
.stats-page { padding: clamp(48px, 9vh, 96px) 0; }
.stats-page__head { margin-bottom: var(--sp-7); }
.stats-page__back { color: var(--accent); text-decoration: none; }
.stats-page__sub { color: var(--muted); margin-top: var(--sp-3); font-size: var(--fs-lead); }
.stats-grid { margin-bottom: var(--sp-8); }
.stats-page__empty { color: var(--muted); font-size: var(--fs-lead); }
.stats-page__foot { margin-top: var(--sp-8); }
.stats-page__foot a, .stats-page__back:hover { color: var(--accent); }

/* heatmap */
.stats-heatmap-wrap[hidden] { display: none; }
/* required because .stats-grid sets display:grid, which beats [hidden]'s UA
   default — without this the "—" placeholder cards show on the empty state */
.stats-grid[hidden] { display: none; }
.stats-heatmap__title { font-size: var(--fs-h3); margin-bottom: var(--sp-5); }
.stats-heatmap {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 1fr);
  gap: 3px;
  overflow-x: auto;
  padding-bottom: var(--sp-3);
}
.hm-cell {
  width: 13px; height: 13px;
  border-radius: 3px;
  background: var(--anchor);
  display: inline-block;
}
.hm-0 { background: color-mix(in srgb, var(--anchor) 82%, var(--bg)); }
.hm-1 { background: color-mix(in srgb, var(--accent) 25%, var(--anchor)); }
.hm-2 { background: color-mix(in srgb, var(--accent) 50%, var(--anchor)); }
.hm-3 { background: color-mix(in srgb, var(--accent) 75%, var(--anchor)); }
.hm-4 { background: var(--accent); }
.stats-heatmap__legend {
  display: flex; align-items: center; gap: 6px;
  margin-top: var(--sp-4);
  font-size: var(--fs-small); color: var(--muted);
}

@media (max-width: 680px) {
  .mk-stats__grid, .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------- *
   19. GEAR PAGE (interactive battlestation + list)
 * ---------------------------------------------------------- */
.gear-stage {
  position: relative;
  border-radius: var(--r-frame);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--sh-frame);
  background: var(--surface);
  margin: var(--sp-6) 0;
}
/* Show the whole photo at its natural ratio so the hotspot percentages line up
   (no 16:9 cover-crop that would chop the top monitor / keyboard off a 4:3 shot). */
.gear-stage__img { display: block; width: 100%; height: auto; }
.gear-stage__img.is-missing {
  display: grid; place-content: center; min-height: 240px;
  background:
    repeating-linear-gradient(45deg, var(--border) 0 12px, transparent 12px 24px),
    var(--surface);
  color: var(--muted); font-weight: 600; font-size: var(--fs-small);
  text-align: center; padding: var(--sp-5);
}
.gear-hotspots { position: absolute; inset: 0; }
.gear-hotspot {
  position: absolute;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;   /* center the dot on its point */
  border-radius: 50%;
  border: 2px solid var(--accent-ink);
  background: var(--accent);
  color: var(--accent-ink);
  font: 700 16px/1 var(--font-body);
  cursor: pointer;
  padding: 0;
  box-shadow: 0 0 0 4px rgba(0, 200, 224, 0.25);
}
.gear-hotspot::before { content: "+"; }
.gear-hotspot__pop {
  position: absolute;
  left: 50%; bottom: calc(100% + 10px);
  transform: translateX(-50%);
  width: max-content; max-width: 240px;
  display: none; flex-direction: column; gap: 4px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--anchor);
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  box-shadow: var(--sh-hover);
  text-align: left;
  z-index: 2;
}
.gear-hotspot__pop.is-open { display: flex; }
.gear-hotspot__name { font-weight: 700; color: var(--anchor-text); font-size: var(--fs-ui); }
.gear-hotspot__note { color: var(--muted); font-size: var(--fs-small); }
.gear-hotspot__link { color: var(--accent); font-weight: 600; font-size: var(--fs-small); text-decoration: none; }
.gear-list {
  list-style: none; margin: var(--sp-6) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4);
}
.gear-item {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--sp-5);
  border: 1px solid var(--border); border-radius: var(--r-card);
  background: var(--surface); box-shadow: var(--sh-card);
}
.gear-item__name { font-weight: 600; }
.gear-item__note { color: var(--muted); font-size: var(--fs-small); flex: 1 1 auto; }
.gear-item__link { color: var(--accent); font-weight: 600; text-decoration: none; font-size: var(--fs-ui); margin-top: var(--sp-2); }
.gear-item__link:hover { text-decoration: underline; }
.gear-disclosure { margin-top: var(--sp-6); color: var(--muted); font-size: var(--fs-small); }
@media (max-width: 680px) { .gear-list { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- *
   20. COMMUNITY (homepage Discord card)
 * ---------------------------------------------------------- */
.community[hidden] { display: none; }
.discord-card {
  display: flex; align-items: center; gap: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--sp-6);
  text-decoration: none; color: var(--text);
  transition: border-color .2s ease, transform .2s ease;
}
.discord-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.discord-card__icon { flex: 0 0 auto; width: 56px; height: 56px; color: var(--accent); }
.discord-card__icon svg { width: 100%; height: 100%; fill: currentColor; }
.discord-card__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.discord-card__name { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-h3); }
.discord-card__meta { color: var(--muted); font-size: var(--fs-ui); }
.discord-card__cta { flex: 0 0 auto; white-space: nowrap; }
.community__note { margin-top: var(--sp-4); color: var(--muted); font-size: var(--fs-small); }
@media (max-width: 680px) {
  .discord-card { flex-direction: column; text-align: center; align-items: center; }
}

/* ---------------------------------------------------------- *
   21. CRT MODE (Konami-code easter egg, html.crt-mode)
   Kept light so text stays readable: scanlines + vignette + a
   whisper of chromatic fringe on display type. The trigger is
   skipped under prefers-reduced-motion, so no flicker guard
   is needed beyond that.
 * ---------------------------------------------------------- */
/* The tint rides on the fixed overlay's backdrop-filter, NOT `filter` on body:
   a filter on body would create a containing block and break every position:
   fixed element (mobile nav sheet, scroll-progress bar, notify toasts). */
html.crt-mode body::after {
  content: "";
  position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, .38) 100%);
  -webkit-backdrop-filter: contrast(1.06) saturate(1.15);
  backdrop-filter: contrast(1.06) saturate(1.15);
  animation: crt-flicker 4s steps(60) infinite;
}
@keyframes crt-flicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: .82; }
  94% { opacity: 1; }
}
html.crt-mode h1, html.crt-mode h2, html.crt-mode .wordmark {
  text-shadow: 1px 0 rgba(255, 89, 100, .35), -1px 0 rgba(0, 200, 224, .35);
}
.crt-toast {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%);
  z-index: 9999;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--r-pill);
  color: var(--accent);
  font-family: var(--font-head); font-weight: 700; letter-spacing: .08em;
  padding: 10px 22px;
  animation: crt-toast-in .25s ease both;
}
@keyframes crt-toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ---------------------------------------------------------- *
   22. GUESTBOOK (guestbook.php)
 * ---------------------------------------------------------- */
.gb-page { padding: calc(var(--sp-9) + var(--sp-6)) 0 var(--sp-9); min-height: 70vh; }
.gb-page__head { margin-bottom: var(--sp-7); }
.gb-page__back { color: var(--muted); text-decoration: none; }
.gb-page__back:hover { color: var(--accent); }
.gb-page__sub { color: var(--muted); margin-top: var(--sp-3); }
.gb-blink { color: var(--accent); animation: gb-blink 1.2s step-end infinite; }
@media (prefers-reduced-motion: reduce) { .gb-blink { animation: none; } }
@keyframes gb-blink { 50% { opacity: 0; } }
.gb-page__counter { color: var(--muted); font-size: var(--fs-small); margin-top: var(--sp-2); }
.gb-page__counter strong { color: var(--accent); }
.gb-notice { border-radius: var(--r-input); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-6); font-size: var(--fs-ui); }
.gb-notice--ok { background: var(--surface); border: 1px solid var(--accent); color: var(--text); }
.gb-notice--err { background: var(--surface); border: 1px solid var(--red-bright); color: var(--red-bright); }
.gb-form {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: var(--sp-6); margin-bottom: var(--sp-8);
}
.gb-form__row { margin-bottom: var(--sp-5); }
.gb-form__label { display: block; font-size: var(--fs-small); color: var(--muted); margin-bottom: var(--sp-2); }
.gb-form__input {
  width: 100%; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-input);
  padding: var(--sp-3) var(--sp-4); font: inherit;
}
.gb-form__input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.gb-form__textarea { resize: vertical; min-height: 80px; }
/* Honeypot: moved out of view, not display:none (some bots skip hidden fields). */
.gb-form__trap { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.gb-form__actions { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin: 0; }
.gb-form__hint { color: var(--muted); font-size: var(--fs-small); }
.gb-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-4); }
.gb-entry {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: var(--sp-5) var(--sp-6);
}
.gb-entry__msg { margin: 0 0 var(--sp-2); }
.gb-entry__meta { margin: 0; color: var(--muted); font-size: var(--fs-small); }
.gb-entry__meta span { color: var(--accent); }
.gb-entry--empty { color: var(--muted); text-align: center; }
.gb-page__foot { margin-top: var(--sp-8); }
.gb-page__foot a { color: var(--muted); }
.gb-page__foot a:hover { color: var(--accent); }

/* ---------------------------------------------------------- *
   23. WORK WITH ME (sponsorship packages)
 * ---------------------------------------------------------- */
.pack { padding-top: calc(var(--sp-9) + var(--sp-6)); }
.pack__lead { max-width: 56ch; }
.pack-grid {
  list-style: none; padding: 0; margin: var(--sp-7) 0 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5);
}
.pack-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: var(--sp-6);
  transition: border-color .2s ease, transform .2s ease;
}
.pack-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.pack-card__name { font-family: var(--font-head); font-size: var(--fs-h3); margin: 0 0 var(--sp-3); }
.pack-card__desc { margin: 0 0 var(--sp-3); color: var(--text); }
.pack-card__fits { margin: 0; color: var(--muted); font-size: var(--fs-small); }
.pack-cta { margin-top: var(--sp-7); display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.pack-cta__note { flex-basis: 100%; color: var(--muted); font-size: var(--fs-small); max-width: 62ch; margin: var(--sp-2) 0 0; }
@media (max-width: 780px) { .pack-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- *
   24. CLIP PAGE (clip.php per-clip SEO pages)
 * ---------------------------------------------------------- */
.clip-page { padding: calc(var(--sp-9) + var(--sp-6)) 0 var(--sp-9); min-height: 70vh; }
.clip-page__head { margin-bottom: var(--sp-6); }
.clip-page__back { color: var(--muted); text-decoration: none; }
.clip-page__back:hover { color: var(--accent); }
.clip-page__title { max-width: 24ch; }
.clip-page__sub, .clip-page__meta { color: var(--muted); margin-top: var(--sp-3); }
.clip-page__player {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); overflow: hidden;
}
.clip-page__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.clip-page__actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-6); }
.clip-page__foot { margin-top: var(--sp-8); }
.clip-page__foot a { color: var(--muted); }
.clip-page__foot a:hover { color: var(--accent); }

/* footer extra links (Work with me / Guestbook / Stats) */
.site-footer__extra { margin-top: var(--sp-3); font-size: var(--fs-small); }
.site-footer__extra a { color: var(--muted); text-decoration: none; }
.site-footer__extra a:hover { color: var(--accent); }

/* newsletter signup form (support.html #newsletter; plain POST, no JS needed) */
.newsletter-form { max-width: 30rem; }
.newsletter-form .btn { margin-top: var(--sp-4); }

/* ---------------------------------------------------------- *
   25. IT SERVICES (it-services.html)
   Cards extend .pack-card (section 23) with a price line and an
   includes-list; steps are a numbered 3-up grid.
 * ---------------------------------------------------------- */
.svc-card { display: flex; flex-direction: column; }
.svc-card .pack-card__fits { margin-top: auto; padding-top: var(--sp-3); }
.svc-card__price {
  font-family: var(--font-head); font-size: var(--fs-h2); font-weight: 700;
  color: var(--accent); margin: 0 0 var(--sp-3); line-height: 1;
}
.svc-card__per {
  font-family: var(--font-body); font-size: var(--fs-small); font-weight: 400;
  color: var(--muted); margin-left: 2px;
}
.svc-card__list { list-style: none; padding: 0; margin: 0 0 var(--sp-4); }
.svc-card__list li {
  position: relative; padding-left: 1.3em; margin-bottom: var(--sp-2);
  font-size: var(--fs-ui); color: var(--text);
}
.svc-card__list li::before {
  content: "✦"; position: absolute; left: 0; top: .35em;
  font-size: .65em; color: var(--accent);
}
.svc-card__cta { margin: var(--sp-4) 0 0; }
.svc-rates { margin: var(--sp-8) 0 0; color: var(--muted); max-width: 62ch; }
.svc-rates strong { color: var(--text); }

.svc-steps {
  list-style: none; counter-reset: svc-step; padding: 0;
  margin: var(--sp-7) 0 0; display: grid;
  grid-template-columns: repeat(3, 1fr); gap: var(--sp-5);
}
.svc-steps li {
  counter-increment: svc-step;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: var(--sp-6);
}
.svc-steps li::before {
  content: "0" counter(svc-step);
  display: block; font-family: var(--font-head); font-weight: 700;
  color: var(--accent); font-size: var(--fs-ui); letter-spacing: .08em;
  margin-bottom: var(--sp-3);
}
.svc-steps__name { font-family: var(--font-head); font-size: var(--fs-h3); margin: 0 0 var(--sp-3); }
.svc-steps__desc { margin: 0; color: var(--muted); font-size: var(--fs-ui); }
@media (max-width: 780px) { .svc-steps { grid-template-columns: 1fr; } }

/* ---- Print / "Save as PDF" ------------------------------------------------
   Powers the media-kit download button (window.print()) and any Ctrl+P. Applies
   to PRINT output only, never the on-screen site. Flips the dark theme to the
   light Nova Grid palette (dark ink on white) and hides interactive chrome; the
   dark --anchor stat card keeps its own --anchor-text, so it stays legible. */
@media print {
  :root {
    --bg: #FFFFFF; --surface: #F4F6FB; --text: #0D1033; --muted: #5A6080;
    --accent: #0E1A4A; --accent2: #00A6BD; --border: #D4D8E8;
  }
  html, body { background: #fff !important; color: var(--text) !important; }
  .skip-link, .site-header, .nav, .marquee, .site-footer,
  .notify-bell, [data-print], .newsletter-form, .contact-form { display: none !important; }
  a { color: var(--text) !important; text-decoration: none !important; }
  /* Ensure below-the-fold reveal content prints even if it never scrolled in. */
  html.reveal-ready .reveal { opacity: 1 !important; transform: none !important; }
  .section { padding: 16px 0 !important; }
  * { box-shadow: none !important; }
  @page { margin: 14mm; }
}