/* ---------- Self-hosted variable fonts (latin subset) ----------
   Replaces the design's Google Fonts request (2 preconnects + 1 render-blocking
   stylesheet + 17 static files) with 3 local variable fonts, 252K total.
   Archivo carries a width axis (62%-125%), which is how real Expanded display
   type is produced - see font-stretch on the display heading rules. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-var-latin.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/inter-var-latin.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/caveat-var-latin.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* KSNN theme stylesheet.
   Merged from the design handoff in the same cascade order its <head> loaded them:
   styles.css (tokens/base) -> styles-v3.css (newsroom components) -> styles-v4.css (v4 overrides).
   Legacy styles-v2.css intentionally excluded (handoff README). Do not reorder. */

/* ===================== styles.css ===================== */
/* ============================================================
   KSNN — Beyond the Game. Built for Life.
   Design system: warm near-black ink, warm paper, one athletic red.
   Type: Archivo (variable width + weight). Story-first, calm, human.
   ============================================================ */

:root {
  --ink:      #0d0e10;          /* base near-black, faintly cool-warm */
  --ink-2:    #15161a;          /* raised panels */
  --ink-3:    #1d1f24;          /* hairline cards */
  --paper:    #f3f1ec;          /* warm off-white section */
  --paper-2:  #fbfaf7;
  --text:     #f6f5f2;          /* text on dark */
  --text-dim: rgba(246,245,242,.66);
  --text-ink: #191a1d;          /* text on paper */
  --ink-dim:  rgba(25,26,29,.62);
  --red:      oklch(0.585 0.205 27);   /* athletic red */
  --red-2:    oklch(0.52 0.205 27);
  --line:     rgba(255,255,255,.12);
  --line-ink: rgba(25,26,29,.14);

  --maxw: 1320px;
  --pad: clamp(20px, 5vw, 72px);
  --serif: "Archivo", system-ui, sans-serif;
  --sans:  "Archivo", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ---- Display type ---------------------------------------- */
.display {
  font-family: var(--sans);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.92;
  margin: 0;
}
.eyebrow {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 0.85rem;
}
.rule {
  width: 56px; height: 4px; border: 0; margin: 1.1rem 0 1.3rem;
  background: var(--red); border-radius: 2px;
}
.rule.center { margin-left: auto; margin-right: auto; }

/* ---- Buttons --------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--sans);
  font-weight: 700; font-size: 0.82rem;
  letter-spacing: 0.13em; text-transform: uppercase;
  padding: 0.95rem 1.7rem;
  border: 1.5px solid transparent; border-radius: 2px;
  cursor: pointer; transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
  background: none; color: var(--text);
}
.btn:active { transform: translateY(1px); }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-2); }
.btn-ghost { border-color: rgba(255,255,255,.45); color: var(--text); }
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn-ghost-ink { border-color: rgba(25,26,29,.4); color: var(--text-ink); }
.btn-ghost-ink:hover { border-color: var(--text-ink); background: rgba(25,26,29,.05); }

/* ---- Nav ------------------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 1.1rem var(--pad);
  transition: background .3s ease, padding .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(13,14,16,.86);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
  padding-top: .8rem; padding-bottom: .8rem;
}
.nav-left { display: flex; align-items: center; gap: 2.4rem; }
.nav-links { display: flex; gap: 1.7rem; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  font-size: .82rem; font-weight: 600; letter-spacing: .04em; white-space: nowrap;
  color: rgba(246,245,242,.82); transition: color .2s ease; position: relative;
  text-shadow: 0 1px 10px rgba(0,0,0,.4);
}
.nav-links a:hover { color: var(--text); }
.nav-cta { display: flex; align-items: center; gap: 1rem; }
/* Transparent on desktop so .nav-links + .nav-cta stay direct grid items of .nav; becomes the
   dropdown panel on mobile (see responsive block). */
.nav-collapse { display: contents; }
.nav .btn { padding: .7rem 1.25rem; }
.hamburger { display: none; background: none; border: 0; cursor: pointer; padding: 6px; }
.hamburger span { display: block; width: 24px; height: 2px; background: var(--text); margin: 5px 0; transition: .25s; }

/* ---- Hero ------------------------------------------------ */
.hero {
  position: relative; min-height: 92vh; display: flex; align-items: center;
  padding: 9rem var(--pad) 5rem; overflow: hidden;
}
.hero .slot-bg { position: absolute; inset: -12% 0; z-index: 0; }
.hero-video { width: 100%; height: 100%; object-fit: cover; object-position: 60% center; display: block; }
.hero .slot-bg image-slot { width: 100%; height: 100%; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(11,12,14,.97) 0%, rgba(11,12,14,.92) 26%, rgba(11,12,14,.70) 50%, rgba(11,12,14,.32) 74%, rgba(11,12,14,.10) 100%),
    linear-gradient(180deg, rgba(11,12,14,.65) 0%, rgba(11,12,14,0) 16%),
    linear-gradient(0deg, rgba(11,12,14,.6) 0%, rgba(11,12,14,0) 38%);
}
.hero-inner { position: relative; z-index: 2; max-width: 640px; }
.hero h1 { font-size: clamp(2.9rem, 6.6vw, 5.6rem); text-shadow: 0 2px 30px rgba(0,0,0,.45); }
.hero h1 .l2 { color: var(--text); }
.hero p {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: rgba(246,245,242,.82);
  max-width: 30ch; margin: 1.5rem 0 2.2rem; line-height: 1.5;
  text-shadow: 0 1px 16px rgba(0,0,0,.5);
}
.hero-btns { display: flex; flex-wrap: wrap; gap: .9rem; }
.scroll-cue {
  position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%); z-index: 2;
  font-size: .68rem; letter-spacing: .25em; text-transform: uppercase; color: var(--text-dim);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.scroll-cue .dot { width: 1px; height: 34px; background: linear-gradient(var(--red), transparent); }

/* ---- Generic section ------------------------------------- */
section { position: relative; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

/* ---- Character Wins split -------------------------------- */
.split { display: grid; grid-template-columns: 1.65fr 1fr; min-height: 540px; }
.split .media { position: relative; overflow: hidden; }
.split .media image-slot { width: 100%; height: 120%; margin-top: -10%; }
.split .panel {
  background: var(--ink); display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2.4rem, 4vw, 4.6rem);
}
.split .panel h2 { font-size: clamp(2.2rem, 4vw, 3.4rem); }
.split .panel p { color: var(--text-dim); max-width: 34ch; margin: 0; }

/* ---- Three story tiles ----------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); }
.tile { position: relative; aspect-ratio: 5 / 6; overflow: hidden; }
.tile image-slot { position: absolute; inset: 0; width: 100%; height: 100%; }
.tile::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(13,14,16,.92) 0%, rgba(13,14,16,.45) 42%, rgba(13,14,16,.05) 78%);
}
.tile .tile-text { position: absolute; inset: auto 0 0 0; z-index: 2; padding: clamp(1.6rem,2.4vw,2.4rem); }
.tile h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); margin: 0; }
.tile p { color: var(--text-dim); margin: .85rem 0 0; max-width: 24ch; font-size: .98rem; }

/* ---- Values (paper) -------------------------------------- */
.values { background: var(--paper); color: var(--text-ink); padding: clamp(4rem, 7vw, 6.4rem) 0; }
.values .head { text-align: center; max-width: 700px; margin: 0 auto clamp(2.6rem,4vw,3.6rem); }
.values h2 { font-size: clamp(2rem, 4vw, 3rem); color: var(--text-ink); }
.value-grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.value {
  text-align: center; padding: 0 clamp(1rem, 1.8vw, 1.8rem);
  border-left: 1px solid var(--line-ink);
}
.value:first-child { border-left: 0; }
.value .ico { width: 38px; height: 38px; margin: 0 auto 1.1rem; color: var(--red); }
.value .ico svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.value h4 { font-size: .94rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .5rem; }
.value p { font-size: .9rem; color: var(--ink-dim); margin: 0; line-height: 1.5; }

/* ---- Every story matters --------------------------------- */
.story { display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; }
.story .media { position: relative; overflow: hidden; }
.story .media image-slot { width: 100%; height: 120%; margin-top: -10%; }
.story .panel { background: var(--ink); display: flex; flex-direction: column; justify-content: center; padding: clamp(2.4rem,5vw,5rem); }
.story .panel h2 { font-size: clamp(2.2rem, 4vw, 3.4rem); }
.story .panel p { color: var(--text-dim); max-width: 36ch; margin: 0 0 2rem; }

/* ---- About (paper) --------------------------------------- */
.about { background: var(--paper); color: var(--text-ink); padding: clamp(4rem, 7vw, 6.6rem) 0; }
.about-top { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.6rem, 4vw, 4rem); align-items: start; }
.about h2 { font-size: clamp(2rem, 4vw, 3.2rem); color: var(--text-ink); max-width: 16ch; }
.about-lead { color: var(--ink-dim); font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.62; }
.about-lead strong { color: var(--text-ink); font-weight: 700; }
.about-lead p { margin: 0 0 1rem; }
.about-lead p:last-child { margin-bottom: 0; }
.about-points {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 3vw, 3rem);
  margin-top: clamp(2.6rem, 4vw, 3.6rem); padding-top: clamp(2rem, 3vw, 2.8rem);
  border-top: 1px solid var(--line-ink);
}
.about-point .num { font-family: var(--sans); font-weight: 800; font-size: .9rem; color: var(--red); letter-spacing: .04em; }
.about-point h4 { font-size: 1.05rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; margin: .7rem 0 .5rem; }
.about-point p { font-size: .94rem; color: var(--ink-dim); margin: 0; line-height: 1.55; }

/* ---- The Contest (ink) ----------------------------------- */
.contest-sec { background: var(--ink); padding: clamp(4rem, 7vw, 6.6rem) 0; }
.contest-head { max-width: 760px; }
.contest-head h2 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
.contest-head .lead { color: var(--text-dim); font-size: clamp(1.05rem, 1.4vw, 1.22rem); max-width: 52ch; margin: 1.3rem 0 0; line-height: 1.55; }
.contest-grid {
  display: grid; grid-template-columns: 1.45fr 1fr; gap: clamp(2rem, 4vw, 3.6rem);
  margin-top: clamp(2.8rem, 4vw, 3.8rem); align-items: start;
}
.steps { display: grid; gap: 1.5rem; }
.step { display: grid; grid-template-columns: auto 1fr; gap: 1.3rem; align-items: start; }
.step-num {
  font-family: var(--sans); font-weight: 800; font-size: 1.5rem;
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  color: var(--red); border: 1.5px solid var(--line); flex: 0 0 auto;
}
.step h4 { font-size: 1.12rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; margin: .55rem 0 .4rem; }
.step p { color: var(--text-dim); margin: 0; font-size: .96rem; line-height: 1.55; max-width: 42ch; }
.prize-card {
  background: var(--ink-2); border: 1px solid var(--line); border-left: 3px solid var(--red);
  border-radius: 6px; padding: clamp(1.6rem, 2.4vw, 2.2rem);
}
.prize-card .label { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--red); font-weight: 700; margin: 0 0 1.2rem; }
.prize-card ul { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .9rem; }
.prize-card li { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; font-size: .98rem; line-height: 1.45; }
.prize-card li svg { width: 18px; height: 18px; stroke: var(--red); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; margin-top: 3px; }
.prize-card .deadline { font-size: .85rem; color: var(--text-dim); border-top: 1px solid var(--line); padding-top: 1.1rem; margin: 0 0 1.3rem; }
.prize-card .deadline b { color: var(--text); font-weight: 700; }
.prize-card .btn { width: 100%; justify-content: center; }

/* ---- FAQ (paper) ----------------------------------------- */
.faq { background: var(--paper-2); color: var(--text-ink); padding: clamp(4rem, 7vw, 6.6rem) 0; }
.faq .head { text-align: center; max-width: 640px; margin: 0 auto clamp(2.4rem, 4vw, 3.4rem); }
.faq h2 { font-size: clamp(2rem, 4vw, 3rem); color: var(--text-ink); }
.faq-list { max-width: 840px; margin: 0 auto; }
.faq-item { border-top: 1px solid var(--line-ink); }
.faq-item:last-child { border-bottom: 1px solid var(--line-ink); }
.faq-item summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1.4rem;
  padding: 1.4rem 0; font-size: clamp(1.02rem, 1.5vw, 1.18rem); font-weight: 700; color: var(--text-ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .plus { position: relative; width: 18px; height: 18px; flex: 0 0 auto; }
.faq-item summary .plus::before, .faq-item summary .plus::after { content: ""; position: absolute; background: var(--red); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.faq-item summary .plus::before { top: 8px; left: 0; width: 18px; height: 2px; }
.faq-item summary .plus::after { top: 0; left: 8px; width: 2px; height: 18px; }
.faq-item[open] summary .plus::after { transform: scaleY(0); opacity: 0; }
.faq-item .ans { color: var(--ink-dim); padding: 0 0 1.5rem; max-width: 66ch; line-height: 1.6; font-size: 1rem; }
.faq-item .ans a { color: var(--red); }
.faq-foot { text-align: center; margin-top: clamp(2rem, 3vw, 2.8rem); color: var(--ink-dim); font-size: .96rem; }
.faq-foot a { color: var(--red); font-weight: 700; }

/* ---- Photo strip ----------------------------------------- */
.strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; background: var(--ink); }
.strip image-slot { width: 100%; height: clamp(170px, 18vw, 260px); }

/* ---- Footer ---------------------------------------------- */
.footer { background: var(--ink-2); border-top: 1px solid var(--line); }
.footer-main {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 2.5rem; align-items: center;
  padding: clamp(3rem, 5vw, 4.6rem) var(--pad);
  max-width: var(--maxw); margin: 0 auto;
}
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.footer-brand h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: .98; }
.footer-join { justify-self: end; max-width: 360px; text-align: right; }
.footer-join p { color: var(--text-dim); margin: 0 0 1.2rem; font-size: .96rem; }
.footer-bottom {
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between;
  padding: 1.3rem var(--pad);
  max-width: var(--maxw); margin: 0 auto;
  font-size: .8rem; color: var(--text-dim);
}
.footer-bottom nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.footer-bottom a:hover { color: var(--text); }
.coppa { display: flex; align-items: center; gap: .55rem; }
.coppa svg { width: 16px; height: 16px; stroke: var(--text-dim); fill: none; stroke-width: 1.7; }

/* ---- KSNN shield logo ------------------------------------ */
.shield { display: block; }
.shield .field { fill: var(--ink); }
.shield .frame { fill: none; stroke: var(--red); }
.shield .wm { fill: var(--text); font-family: var(--sans); font-weight: 900; }
.shield .star { fill: var(--text); }
.shield .stripe-r { fill: var(--red); }
.shield .stripe-w { fill: var(--text); }
.nav .shield, .footer .shield { filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.logo-lockup { display: flex; align-items: center; gap: .7rem; justify-self: start; }
.nav-links { justify-self: center; }
.nav-cta { justify-self: end; }
.logo-img { height: 54px; width: auto; display: block; transition: height .3s ease; }
.nav.scrolled .logo-img { height: 44px; }
.footer-logo { height: 96px; }
@media (max-width: 980px) { .logo-img { height: 42px; } .nav.scrolled .logo-img { height: 38px; } .footer-logo { height: 72px; } }
.logo-lockup .wordmark { font-weight: 900; font-size: 1.25rem; letter-spacing: .04em; }
.logo-lockup .tag { font-size: .56rem; letter-spacing: .26em; text-transform: uppercase; color: var(--text-dim); display: block; margin-top: 1px; }

/* ---- Reveal on scroll ------------------------------------ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---- Modal: Share Your Story (COPPA-aware) --------------- */
.modal-scrim {
  position: fixed; inset: 0; z-index: 100; display: none;
  background: rgba(8,9,11,.7); backdrop-filter: blur(6px);
  align-items: center; justify-content: center; padding: 1.2rem;
}
.modal-scrim.open { display: flex; }
.modal {
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 6px;
  width: min(560px, 100%); max-height: 92vh; overflow: auto;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.modal-head { padding: 1.6rem 1.8rem 0; position: relative; }
.modal-head .step-track { display: flex; gap: .4rem; margin-bottom: 1.3rem; }
.modal-head .step-track i { height: 3px; flex: 1; border-radius: 2px; background: var(--line); transition: background .3s; }
.modal-head .step-track i.active { background: var(--red); }
.modal-head .kicker { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--red); font-weight: 700; }
.modal-head h3 { font-family: var(--sans); font-weight: 800; font-size: 1.5rem; margin: .4rem 0 .3rem; text-transform: uppercase; letter-spacing: -.01em; }
.modal-head p { color: var(--text-dim); font-size: .92rem; margin: 0; }
.modal-close { position: absolute; top: 1.1rem; right: 1.2rem; background: none; border: 0; color: var(--text-dim); cursor: pointer; font-size: 1.4rem; line-height: 1; }
.modal-close:hover { color: var(--text); }
.modal-body { padding: 1.4rem 1.8rem; }
.field-row { margin-bottom: 1.05rem; }
.field-row label { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); margin-bottom: .45rem; }
.field-row input, .field-row textarea, .field-row select {
  width: 100%; background: var(--ink); border: 1px solid var(--line); border-radius: 4px;
  color: var(--text); font-family: var(--sans); font-size: .96rem; padding: .8rem .9rem; transition: border-color .2s;
}
.field-row input:focus, .field-row textarea:focus, .field-row select:focus { outline: none; border-color: var(--red); }
.field-row textarea { resize: vertical; min-height: 96px; }
.upload-slot {
  border: 1.5px dashed var(--line); border-radius: 5px; padding: 1.6rem; text-align: center;
  color: var(--text-dim); font-size: .9rem; cursor: pointer; transition: border-color .2s, color .2s;
}
.upload-slot:hover { border-color: var(--red); color: var(--text); }
.consent-card {
  background: var(--ink); border: 1px solid var(--line); border-left: 3px solid var(--red);
  border-radius: 4px; padding: 1.1rem 1.2rem; margin-bottom: 1.1rem;
  display: flex; gap: .9rem; font-size: .9rem; color: var(--text-dim); line-height: 1.5;
}
.consent-card svg { width: 22px; height: 22px; flex: 0 0 auto; stroke: var(--red); fill: none; stroke-width: 1.7; margin-top: 1px; }
.consent-check { display: flex; gap: .7rem; align-items: flex-start; font-size: .9rem; color: var(--text); cursor: pointer; }
.consent-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--red); flex: 0 0 auto; }
.modal-foot { display: flex; gap: .8rem; justify-content: space-between; padding: 0 1.8rem 1.8rem; }
.modal-foot .btn { flex: 0 0 auto; }
.modal-foot .spacer { flex: 1; }
.success-state { text-align: center; padding: 1rem 0 1.5rem; }
.success-state .badge {
  width: 72px; height: 72px; margin: 0 auto 1.3rem; border-radius: 50%;
  background: rgba(224,52,42,.14); display: grid; place-items: center;
}
.success-state .badge svg { width: 34px; height: 34px; stroke: var(--red); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.success-state h3 { font-family: var(--sans); text-transform: uppercase; font-weight: 800; font-size: 1.5rem; margin: 0 0 .6rem; }
.success-state p { color: var(--text-dim); max-width: 40ch; margin: 0 auto; }

/* ---- Responsive ------------------------------------------ */
@media (max-width: 980px) {
  /* Top bar collapses to logo + hamburger; the menu and CTA move into a dropdown panel so the
     oversized "Enter the Contest" button no longer collides with the logo and hamburger. */
  .nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; grid-template-columns: none; }
  .logo-lockup { order: 1; }
  .hamburger { display: block; order: 2; }
  .nav-collapse { display: none; order: 3; flex-basis: 100%; }
  .nav.open { background: rgba(13,14,16,.97); backdrop-filter: blur(12px); border-bottom-color: var(--line); }
  .nav.open .nav-collapse {
    display: flex; flex-direction: column; align-items: stretch; gap: 1.3rem;
    margin-top: 1rem; padding-top: 1.2rem; border-top: 1px solid var(--line);
  }
  .nav.open .nav-links { display: flex; flex-direction: column; gap: 1.1rem; }
  .nav.open .nav-cta { display: flex; flex-direction: column; align-items: stretch; gap: .9rem; }
  .nav.open .nav-cta .nav-contact { padding: .3rem 0; }
  .nav.open .nav-cta .btn-red { text-align: center; justify-content: center; }
  .split, .story { grid-template-columns: 1fr; }
  .split .media, .story .media { min-height: 56vw; }
  .value-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem 0; }
  .value:nth-child(4) { border-left: 0; }
  .footer-main { grid-template-columns: 1fr; }
  .footer-join { justify-self: start; text-align: left; }
  .about-top { grid-template-columns: 1fr; gap: 1.4rem; }
  .about-points { grid-template-columns: 1fr; gap: 1.8rem; }
  .contest-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tiles { grid-template-columns: 1fr; }
  .tile { aspect-ratio: 16 / 11; }
  .strip { grid-template-columns: repeat(2, 1fr); }
  .value-grid { grid-template-columns: repeat(2, 1fr); }
  .value:nth-child(3) { border-left: 0; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ===================== styles-v3.css ===================== */
/* ============================================================
   KSNN v3 — BROADCAST / NEWSROOM design system.
   Extends styles.css tokens. A youth-sports network, not a
   landing page: motion lines, live ticker, broadcast overlays,
   editorial stamps, a coverage board, a campaign-scale contest.
   ============================================================ */

:root{
  --hand:"Caveat", cursive;
  --cream:#f3ede1;
  --bc-line:rgba(255,255,255,.1);
  --red-glow: 0 0 0 1px rgba(224,52,42,.5), 0 8px 30px rgba(224,52,42,.25);
}

/* ---- No orphans (balanced headings, tidy paragraph endings) ---- */
h1, h2, h3, h4, blockquote,
.bc-hero h1, .lead-story h3, .award-copy h2, .meet h2, .signoff h2,
.says blockquote, .rail-card h4, .tw-item h4, .reel-card .rl-meta h4{
  text-wrap: balance;
}
p, li, cite, figcaption,
.bc-hero .h-sub, .award-copy .aw-sub, .meet .m-sub, .lead-story p, .signoff p{
  text-wrap: pretty;
}

/* ---- Broadcast primitives -------------------------------- */
.ovl-label{ font-weight:800; letter-spacing:.2em; text-transform:uppercase; font-size:.66rem; line-height:1; }
.live-dot{ display:inline-flex; align-items:center; gap:.45rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; font-size:.64rem; color:#fff; }

/* angled KSNN motion-line layer (echoes the swoosh) */
.motion-lines{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:1; }
.motion-lines i{ position:absolute; height:2px; background:linear-gradient(90deg, transparent, var(--red), transparent); opacity:.4; transform:skewY(-8deg); transform-origin:left; }
.motion-lines i:nth-child(1){ top:24%; left:-10%; width:50%; opacity:.5; }
.motion-lines i:nth-child(2){ top:40%; left:-10%; width:75%; height:3px; opacity:.7; }
.motion-lines i:nth-child(3){ top:58%; left:-10%; width:38%; opacity:.35; }
.motion-lines i:nth-child(4){ top:72%; left:-10%; width:60%; opacity:.25; }

/* editorial corner brackets */
.brackets{ position:relative; }
.brackets::before,.brackets::after{ content:""; position:absolute; width:18px; height:18px; border:2px solid var(--red); }
.brackets::before{ top:0; left:0; border-right:0; border-bottom:0; }
.brackets::after{ bottom:0; right:0; border-left:0; border-top:0; }

/* editorial stamp */
.stamp-tag{ display:inline-flex; align-items:center; gap:.5rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; font-size:.64rem; padding:.42rem .7rem; background:var(--red); color:#fff; border-radius:2px; }
.stamp-tag.ghost{ background:rgba(255,255,255,.12); color:#fff; backdrop-filter:blur(4px); }
.stamp-tag.ink{ background:var(--text-ink); color:#fff; }

/* section header, broadcast style */
.bc-head{ display:flex; align-items:center; gap:1rem; margin-bottom:clamp(1.5rem,2.6vw,2.2rem); }
.bc-head .bar{ width:4px; height:1.5em; background:var(--red); flex:0 0 auto; }
.bc-head h2{ font-family: var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; font-size:clamp(1.4rem,2.6vw,2rem); margin:0; line-height:1; }
.bc-head .more{ margin-left:auto; font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim); display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap; }
.bc-head .more:hover{ color:var(--text); }
.bc-head .more svg{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2.4; }
.bc-head.ink h2{ color:var(--text-ink); }
.bc-head.ink .more{ color:var(--ink-dim); }
.bc-head.ink .more:hover{ color:var(--text-ink); }

/* ---- Live ticker ----------------------------------------- */
/* ---- Live ticker (removed) -------------------------------- */
.nav{ top:0; }
section[id]{ scroll-margin-top:84px; }
.ticker .tk-flag{ background:var(--red); color:#fff; display:flex; align-items:center; gap:.5rem; padding:0 1rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; font-size:.64rem; flex:0 0 auto; z-index:2; }
.ticker .tk-track{ display:flex; align-items:center; gap:2.4rem; white-space:nowrap; animation:scroll-x 38s linear infinite; padding-left:2.4rem; }
.ticker:hover .tk-track{ animation-play-state:paused; }
@keyframes scroll-x{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
@media (prefers-reduced-motion:reduce){ .ticker .tk-track{ animation:none; } }
.ticker .tk-item{ display:inline-flex; align-items:center; gap:.6rem; font-size:.78rem; color:var(--text-dim); }
.ticker .tk-item b{ color:var(--text); font-weight:700; }
.ticker .tk-item .sport{ color:var(--red); font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.62rem; }
.ticker .tk-item .sc{ font-family: var(--sans); font-weight:800; color:#fff; }

/* ---- HERO (broadcast) ------------------------------------ */
.bc-hero{ position:relative; min-height:clamp(660px,96vh,900px); display:flex; align-items:center; overflow:hidden; padding:0; background:#0a0b0d; }
.bc-hero .hv{ position:absolute; inset:0; z-index:0; }
.bc-hero .hv video,.bc-hero .hv image-slot,.bc-hero .hv img{ width:100%; height:100%; object-fit:cover; object-position:60% center; display:block; }
.bc-hero::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(90deg, #0a0b0d 0%, rgba(10,11,13,.95) 30%, rgba(10,11,13,.6) 50%, rgba(10,11,13,.15) 74%, rgba(10,11,13,0) 100%),
    linear-gradient(180deg, rgba(10,11,13,.45) 0%, rgba(10,11,13,0) 20%, rgba(10,11,13,0) 62%, rgba(10,11,13,.85) 100%);
}
.bc-hero .hero-grid{ position:relative; z-index:4; width:100%; max-width:var(--maxw); margin:0 auto; padding:clamp(150px,22vh,240px) var(--pad) clamp(80px,10vh,130px); display:grid; grid-template-columns:1fr; align-items:start; }
.bc-hero .h-main{ max-width:600px; }
.bc-hero .h-kick{ display:flex; align-items:center; gap:.9rem; flex-wrap:nowrap; margin-bottom:1.35rem; max-width:600px; }
.bc-hero .ibh-mark{ width:36px; height:15px; background:var(--red); transform:skewX(-11deg); flex:0 0 auto; }
.bc-hero .ibh-txt{ color:var(--red); font-weight:800; letter-spacing:.26em; text-transform:uppercase; font-size:clamp(.72rem,1vw,.86rem); white-space:nowrap; flex:0 0 auto; }
.bc-hero .ibh-line{ flex:1 1 auto; height:1.5px; min-width:32px; background:var(--red); }
@keyframes ibhPulse{ 0%{ box-shadow:0 0 0 0 rgba(255,255,255,.6);} 70%{ box-shadow:0 0 0 8px rgba(255,255,255,0);} 100%{ box-shadow:0 0 0 0 rgba(255,255,255,0);} }
.bc-hero h1{ font-family: var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:-.02em; line-height:.92; font-size:clamp(2.6rem,6vw,5.2rem); margin:0; text-shadow:0 4px 40px rgba(0,0,0,.55); }
.bc-hero h1 .w,.bc-hero h1 .em{ white-space:normal; }
.bc-hero h1 .w{ display:block; color:#fff; }
.bc-hero h1 .em{ display:block; color:var(--red); }
.bc-hero .h-sub{ color:rgba(246,245,242,.8); font-size:clamp(1rem,1.3vw,1.15rem); max-width:40ch; margin:1.7rem 0 0; line-height:1.62; text-shadow:0 1px 16px rgba(0,0,0,.6); }
.bc-hero .h-btns{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.6rem; }
.bc-hero .h-btns .btn svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2.4; }
/* trait labels over the athlete slices */
.hero-traits{ position:absolute; z-index:4; bottom:clamp(1.4rem,3.5vh,2.8rem); left:42%; right:var(--pad); display:flex; justify-content:space-between; gap:.8rem; pointer-events:none; }
.hero-traits span{ display:flex; flex-direction:column; align-items:center; gap:.55rem; color:#fff; font-family: var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:.05em; font-size:clamp(.66rem,1.05vw,1rem); text-shadow:0 2px 12px rgba(0,0,0,.8); }
.hero-traits span::after{ content:""; width:clamp(24px,3vw,40px); height:3px; background:var(--red); }
/* lower-third featured card */
.lower-third{ position:relative; background:rgba(13,14,16,.78); backdrop-filter:blur(10px); border:1px solid var(--bc-line); border-left:3px solid var(--red); border-radius:4px; padding:1.1rem 1.2rem; max-width:420px; justify-self:end; }
.lower-third .lt-top{ display:flex; align-items:center; gap:.7rem; margin-bottom:.7rem; }
.lower-third .lt-kind{ color:var(--red); font-weight:800; letter-spacing:.14em; text-transform:uppercase; font-size:.62rem; }
.lower-third h3{ font-family: var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; font-size:1.15rem; line-height:1.02; margin:0; }
.lower-third p{ color:var(--text-dim); font-size:.86rem; margin:.6rem 0 0; line-height:1.45; }
.lower-third .lt-foot{ display:flex; align-items:center; gap:.5rem; margin-top:.8rem; font-size:.74rem; color:var(--text-dim); }

/* ---- Newsroom front page --------------------------------- */
.frontpage{ background:var(--ink); border-top:1px solid var(--bc-line); padding:clamp(3rem,5vw,4.4rem) 0; }
.fp-grid{ display:grid; grid-template-columns:1.7fr 1fr; gap:clamp(1.4rem,2.6vw,2.4rem); }
/* lead story */
.lead-story{ position:relative; border-radius:8px; overflow:hidden; min-height:460px; display:flex; align-items:flex-end; }
.lead-story image-slot{ position:absolute; inset:0; width:100%; height:100%; }
.lead-story::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(8,9,11,.95) 0%, rgba(8,9,11,.4) 50%, rgba(8,9,11,.1) 100%); }
.lead-story .ls-body{ position:relative; z-index:2; padding:clamp(1.6rem,3vw,2.4rem); }
.lead-story .ls-tags{ display:flex; gap:.5rem; margin-bottom:1rem; }
.lead-story h3{ font-family: var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; line-height:.96; font-size:clamp(1.6rem,3vw,2.6rem); margin:0; max-width:18ch; }
.lead-story p{ color:rgba(246,245,242,.82); margin:.9rem 0 0; max-width:46ch; line-height:1.5; }
.lead-story .ls-foot{ margin-top:1.1rem; font-size:.78rem; color:var(--text-dim); display:flex; align-items:center; gap:.6rem; }
.lead-story .ls-foot b{ color:#fff; }
.lead-story .ls-read{ display:inline-flex; align-items:center; gap:.5rem; margin-top:1.3rem; font-weight:800; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:#fff; }
.lead-story .ls-read svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease; }
.lead-story .ls-read:hover{ color:var(--red); }
.lead-story .ls-read:hover svg{ transform:translateX(4px); }
/* secondary rail */
.fp-rail{ display:grid; grid-template-rows:auto 1fr; gap:1rem; }
.rail-card{ display:grid; grid-template-columns:128px 1fr; gap:1rem; border:1px solid var(--bc-line); border-radius:6px; overflow:hidden; background:var(--ink-2); transition:border-color .2s, transform .2s; cursor:pointer; }
.rail-card:hover{ border-color:var(--red); transform:translateX(2px); }
.rail-card .rc-media{ position:relative; overflow:hidden; min-height:96px; }
.rail-card .rc-media image-slot{ position:absolute; inset:0; width:100%; height:100%; }
.rail-card .rc-body{ padding:.85rem 1rem .85rem 0; display:flex; flex-direction:column; justify-content:center; }
.rail-card .rc-kind{ font-size:.6rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--red); }
.rail-card h4{ margin:.35rem 0 0; font-size:.98rem; font-weight:700; line-height:1.2; }
.rail-card time{ font-size:.72rem; color:var(--text-dim); margin-top:.4rem; }
.rail-card .rc-read{ display:inline-flex; align-items:center; gap:.4rem; margin-top:.5rem; font-weight:800; font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; color:var(--text-dim); transition:color .2s ease; }
.rail-card .rc-read svg{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease; }
.rail-card:hover .rc-read{ color:var(--red); }
.rail-card:hover .rc-read svg{ transform:translateX(3px); }

/* this week list */
.thisweek{ margin-top:clamp(1.4rem,2.6vw,2.2rem); border-top:1px solid var(--bc-line); padding-top:clamp(1.4rem,2.6vw,2rem); }
.tw-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.tw-item{ display:grid; grid-template-columns:auto 1fr; gap:.9rem; align-items:start; padding:0 1.4rem; border-left:1px solid var(--bc-line); }
.tw-item:first-child{ border-left:0; padding-left:0; }
.tw-item .tw-n{ font-family: var(--sans); font-weight:800; font-size:1.3rem; color:var(--red); line-height:1; }
.tw-item h4{ margin:0 0 .3rem; font-size:.96rem; font-weight:700; line-height:1.22; }
.tw-item p{ margin:0; font-size:.82rem; color:var(--text-dim); line-height:1.45; }

/* ---- KSNN Says (branded editorial pull-quote) ------------ */
.says{ position:relative; overflow:hidden; background:#0a0b0d; border-top:1px solid var(--bc-line); border-bottom:1px solid var(--bc-line); min-height:clamp(440px,52vw,600px); display:flex; align-items:center; padding:clamp(3.4rem,6vw,5.6rem) 0; }
.says .says-bg{ position:absolute; inset:0; z-index:0; }
.says .says-bg img{ width:100%; height:100%; object-fit:cover; object-position:78% center; display:block; }
.says::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, #0a0b0d 0%, rgba(10,11,13,.93) 30%, rgba(10,11,13,.55) 50%, rgba(10,11,13,.12) 72%, rgba(10,11,13,0) 100%),
    linear-gradient(180deg, rgba(10,11,13,.4) 0%, rgba(10,11,13,0) 32%, rgba(10,11,13,0) 70%, rgba(10,11,13,.55) 100%);
}
.says .wrap{ position:relative; z-index:2; max-width:1040px; }
.says .says-eyebrow{ display:flex; align-items:center; gap:.7rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; font-size:.7rem; color:var(--red); margin:0 0 1.3rem; }
.says .says-eyebrow .bar{ width:26px; height:2px; background:var(--red); display:inline-block; }
.says .qm{ font-family: var(--sans); font-weight:800; color:var(--red); font-size:3.4rem; line-height:.5; display:block; height:.42em; }
.says blockquote{ margin:0; font-family: var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:-.012em; line-height:1.08; font-size:clamp(1.4rem,2.9vw,2.3rem); max-width:26ch; text-shadow:0 3px 26px rgba(0,0,0,.6); }
.says blockquote .em{ color:var(--red); }
.says cite{ display:block; font-style:normal; font-weight:700; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim); margin-top:1.5rem; }

/* ---- Coverage board (premium sports dashboard) ----------- */
.board{ background:var(--paper); color:var(--text-ink); padding:clamp(3.4rem,5.5vw,5rem) 0; }
.board .board-top{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.2rem; flex-wrap:wrap; margin-bottom:clamp(1.6rem,2.6vw,2.2rem); }
.board .board-top h2{ font-family: var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; font-size:clamp(1.7rem,3.4vw,2.6rem); margin:0; color:var(--text-ink); }
.board-filters{ display:flex; gap:.4rem; flex-wrap:wrap; }
.board-filters button{ font-family:var(--sans); font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:.55rem .95rem; border-radius:3px; border:1px solid var(--line-ink); background:none; color:var(--ink-dim); cursor:pointer; transition:.18s; }
.board-filters button:hover{ color:var(--text-ink); }
.board-filters button.on{ background:var(--text-ink); border-color:var(--text-ink); color:#fff; }
/* board rows */
.board-rows{ border-top:2px solid var(--text-ink); }
.brow{ display:grid; grid-template-columns:200px 1fr auto; gap:1.4rem; align-items:center; padding:1.05rem 0; border-bottom:1px solid var(--line-ink); cursor:pointer; transition:background .18s; }
.brow:hover{ background:rgba(25,26,29,.035); }
.brow .b-sport{ display:flex; align-items:center; gap:.75rem; }
.brow .b-sport .b-ico{ width:26px; height:26px; color:var(--red); flex:0 0 auto; }
.brow .b-sport .b-ico svg{ width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.brow .b-sport .b-name{ font-family: var(--sans); font-weight:800; text-transform:uppercase; font-size:1rem; }
.brow .b-head{ min-width:0; }
.brow .b-head .b-kind{ font-size:.6rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--red); }
.brow .b-head .b-title{ font-size:1.02rem; font-weight:700; line-height:1.2; margin-top:.2rem; color:var(--text-ink); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brow .b-go{ display:inline-flex; align-items:center; gap:.6rem; font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); white-space:nowrap; }
.brow .b-go .cnt{ background:var(--text-ink); color:#fff; border-radius:100px; padding:.2rem .55rem; font-size:.62rem; }
.brow:hover .b-go{ color:var(--red); }
.brow .b-go svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.4; }

/* ---- The Character Award (cinematic banner) -------------- */
.award{ background:#0a0b0d; padding:clamp(2rem,3.5vw,3.4rem) var(--pad); }
.award-card{ position:relative; max-width:var(--maxw); margin:0 auto; border:1px solid rgba(224,52,42,.5); border-radius:12px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.5); background:#0a0b0d; }
.award-bg{ position:absolute; inset:0; z-index:0; }
.award-bg img{ filter:saturate(.58) brightness(.9) contrast(1.02); }
.award-bg::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(rgba(10,11,13,.34), rgba(10,11,13,.34)); }
.award-bg image-slot{ width:100%; height:100%; }
.award-card::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(8,9,11,.95) 0%, rgba(8,9,11,.86) 26%, rgba(8,9,11,.4) 50%, rgba(8,9,11,.05) 70%, rgba(8,9,11,0) 100%); }
.award-inner{ position:relative; z-index:2; }
.award-top{ display:grid; grid-template-columns:auto 1fr; gap:clamp(1.4rem,3vw,2.8rem); align-items:center; padding:clamp(2rem,3.6vw,3.4rem) clamp(1.8rem,3.4vw,3rem); }
.award-badge{ flex:0 0 auto; align-self:center; }
.award-badge .aw-shield{ width:clamp(180px,19vw,268px); height:auto; display:block; }
.award-copy{ max-width:700px; }
.aw-eyebrow{ font-weight:800; letter-spacing:.2em; text-transform:uppercase; font-size:clamp(.7rem,1vw,.8rem); color:var(--red); margin:0 0 1.35rem; }
.aw-eyebrow .aw-eyebrow-sub{ color:rgba(255,255,255,.5); font-weight:700; }
.award-copy h2{ font-family: var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:-.018em; line-height:.92; font-size:clamp(2rem,4.6vw,3.7rem); margin:0; color:#fff; text-shadow:0 4px 30px rgba(0,0,0,.6); }
.award-copy .aw-sub{ font-size:clamp(1.02rem,1.4vw,1.25rem); color:rgba(255,255,255,.82); margin:1.6rem 0 0; max-width:52ch; line-height:1.55; text-shadow:0 1px 14px rgba(0,0,0,.6); }
.award-copy .aw-rule{ display:block; width:64px; height:3px; background:var(--red); margin:1.9rem 0 0; }
.award-copy .aw-cta{ margin-top:2.3rem; display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; }
.award-copy .aw-cta .btn{ color:#111; }
.award-copy .aw-cta .btn svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2.4; }
/* benefits strip */
.award-benefits{ position:relative; z-index:2; background:rgba(7,8,10,.82); border-top:1px solid rgba(224,52,42,.3); display:grid; grid-template-columns:repeat(4,1fr); }
.award-benefits .ab{ display:flex; align-items:center; gap:.9rem; padding:clamp(1.1rem,2vw,1.55rem) clamp(1.2rem,2.2vw,1.9rem); border-left:1px solid rgba(255,255,255,.1); }
.award-benefits .ab:first-child{ border-left:0; }
.award-benefits .ab-ico{ width:34px; height:34px; color:var(--red); flex:0 0 auto; align-self:flex-start; margin-top:2px; }
.award-benefits .ab-ico svg{ width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.award-benefits .ab-txt{ display:flex; flex-direction:column; gap:.28rem; }
.award-benefits .ab-txt strong{ font-weight:800; letter-spacing:.03em; text-transform:uppercase; font-size:clamp(.76rem,1vw,.86rem); line-height:1.15; color:#fff; }
.award-benefits .ab-txt .ab-sub{ font-weight:500; letter-spacing:0; text-transform:none; font-size:clamp(.72rem,.9vw,.8rem); line-height:1.32; color:rgba(255,255,255,.6); }

/* ---- Community submitted (contained Polaroid) ------------ */
.submitted{ background:var(--ink); border-top:1px solid var(--bc-line); padding:clamp(3.2rem,5vw,4.6rem) 0; }
.submitted .sub-grid{ display:grid; grid-template-columns:1fr repeat(3,minmax(0,1fr)); gap:clamp(1.2rem,2.4vw,2rem); align-items:center; }
.submitted .sub-intro h2{ font-family: var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; font-size:clamp(1.5rem,2.8vw,2.1rem); margin:.6rem 0 0; line-height:1; }
.submitted .sub-intro p{ color:var(--text-dim); margin:1rem 0 1.4rem; font-size:.94rem; line-height:1.55; max-width:34ch; }
.polaroid{ perspective:1500px; cursor:pointer; transition:transform .35s ease; }
.polaroid:nth-child(2){ transform:rotate(-2.4deg); }
.polaroid:nth-child(3){ transform:rotate(1.6deg); }
.polaroid:nth-child(4){ transform:rotate(-1deg); }
.polaroid:hover{ transform:rotate(0) translateY(-6px); }
.pol-inner{ position:relative; transform-style:preserve-3d; transition:transform .6s cubic-bezier(.4,.12,.2,1); }
.polaroid:hover .pol-inner,.polaroid:focus-within .pol-inner,.polaroid.flipped .pol-inner{ transform:rotateY(180deg); }
.pol-face{ background:var(--cream); border-radius:3px; box-shadow:0 18px 40px rgba(0,0,0,.5); backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.pol-front{ position:relative; padding:11px 11px 0; }
.pol-back{ position:absolute; inset:0; transform:rotateY(180deg); display:flex; flex-direction:column; padding:1.15rem 1.15rem 1.25rem; text-align:left; }
.pol-back .stamp-tag{ align-self:flex-start; margin-bottom:.8rem; }
.pol-back h4{ font-family: var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; font-size:1.02rem; line-height:1.06; color:#23201b; margin:0 0 .55rem; }
.pol-back p{ font-family:var(--sans); font-size:.82rem; line-height:1.5; color:#4a453d; margin:0; }
.pol-read{ margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:.45rem; font-weight:800; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--red); padding-top:1rem; }
.pol-read svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.pol-read:hover{ color:var(--red-2); }
.polaroid .ph{ position:relative; aspect-ratio:4/5; overflow:hidden; background:#ddd; }
.polaroid .ph image-slot{ position:absolute; inset:0; width:100%; height:100%; }
.polaroid .ph .ptag{ position:absolute; left:.45rem; top:.45rem; z-index:2; font-size:.56rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:.25rem .45rem; border-radius:2px; background:rgba(13,14,16,.8); color:#fff; }
.polaroid .cap{ font-family:var(--hand); color:#23201b; font-size:1.3rem; line-height:1.05; text-align:center; padding:.6rem .3rem .85rem; }
.polaroid .cap small{ display:block; font-family:var(--sans); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); margin-top:.4rem; font-weight:700; }

/* ---- Meet KSNN (cinematic banner) ------------------------ */
.meet{ position:relative; overflow:hidden; background:#0a0b0d; min-height:clamp(460px,52vw,640px); display:flex; align-items:center; border-top:1px solid var(--bc-line); }
.meet .m-bg{ position:absolute; inset:0; z-index:0; }
.meet .m-bg img{ width:100%; height:100%; object-fit:cover; object-position:74% center; display:block; }
.meet::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, #0a0b0d 0%, rgba(10,11,13,.94) 26%, rgba(10,11,13,.55) 48%, rgba(10,11,13,.12) 72%, rgba(10,11,13,0) 100%),
    linear-gradient(180deg, rgba(10,11,13,0) 58%, rgba(10,11,13,.7) 100%);
}
.meet .wrap{ position:relative; z-index:2; width:100%; }
.meet .m-inner{ max-width:580px; padding:clamp(2.6rem,5vw,4.4rem) 0; }
.meet .m-eyebrow{ display:flex; align-items:center; gap:.7rem; color:var(--red); font-weight:800; letter-spacing:.2em; text-transform:uppercase; font-size:.72rem; margin:0 0 1.6rem; }
.meet .m-eyebrow::before{ content:""; width:4px; height:1.05em; background:var(--red); }
.meet h2{ font-family: var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:-.02em; line-height:.92; font-size:clamp(2.1rem,5vw,4rem); margin:0; color:#fff; text-shadow:0 4px 30px rgba(0,0,0,.5); }
.meet h2 .em{ color:var(--red); }
.meet h2 .dot{ color:var(--red); }
.meet .m-sub{ color:rgba(255,255,255,.8); font-size:clamp(1.02rem,1.4vw,1.18rem); margin:1.8rem 0 0; max-width:32ch; line-height:1.6; text-shadow:0 1px 14px rgba(0,0,0,.6); }
.meet .m-cta{ margin-top:2.5rem; }
.meet .m-stats{ display:flex; align-items:center; margin-top:2.9rem; flex-wrap:wrap; gap:.6rem 0; }
.meet .m-stat{ display:flex; align-items:center; gap:.6rem; padding-right:1.4rem; margin-right:1.4rem; border-right:1px solid rgba(255,255,255,.2); font-weight:700; font-size:clamp(.84rem,1.1vw,.95rem); color:#fff; white-space:nowrap; }
.meet .m-stat:last-child{ border-right:0; margin-right:0; padding-right:0; }
.meet .m-stat .ms-ico{ width:24px; height:24px; color:var(--red); flex:0 0 auto; }
.meet .m-stat .ms-ico svg{ width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ---- Skewed buttons (brand) ------------------------------ */
.btn{ position:relative; isolation:isolate; border:none; background:transparent; overflow:visible; }
.btn::before{ content:""; position:absolute; inset:0; z-index:-1; transform:skewX(-11deg); transition:background .2s ease, border-color .2s ease; }
.btn-red{ color:#fff; }
.btn svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2.4; flex:0 0 auto; }
.btn-red::before{ background:var(--red); }
.btn-red:hover{ background:transparent; }
.btn-red:hover::before{ background:var(--red-2); }
.btn-ghost{ color:var(--text); }
.btn-ghost::before{ border:1.6px solid rgba(255,255,255,.5); }
.btn-ghost:hover{ background:transparent; }
.btn-ghost:hover::before{ border-color:#fff; background:rgba(255,255,255,.1); }
.btn-ghost-ink{ color:var(--text-ink); }
.btn-ghost-ink::before{ border:1.6px solid rgba(25,26,29,.4); }
.btn-ghost-ink:hover::before{ border-color:var(--text-ink); background:rgba(25,26,29,.05); }
.award-copy .aw-cta .btn{ color:#111; }
.award-copy .aw-cta .btn::before{ background:#fff; box-shadow:0 10px 28px rgba(0,0,0,.42); }
.award-copy .aw-cta .btn:hover::before{ background:rgba(255,255,255,.86); }
.award-copy .aw-cta .btn-ghost{ color:#fff; }
.award-copy .aw-cta .btn-ghost::before{ background:transparent; border:1.6px solid rgba(255,255,255,.55); box-shadow:none; }
.award-copy .aw-cta .btn-ghost:hover::before{ background:rgba(255,255,255,.12); border-color:#fff; }

/* ---- Newsletter / social --------------------------------- */
.signoff{ background:var(--ink); border-top:1px solid var(--bc-line); padding:clamp(3.2rem,5.5vw,5rem) 0; }
.signoff .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,3.4rem); align-items:center; }
.signoff h2{ font-family: var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; font-size:clamp(1.7rem,3.2vw,2.6rem); line-height:.98; }
.signoff p{ color:var(--text-dim); margin:1.3rem 0 0; max-width:40ch; line-height:1.62; }
.signoff-eyebrow{ display:inline-block; font-weight:800; letter-spacing:.2em; text-transform:uppercase; font-size:.7rem; color:var(--red); margin-bottom:1.3rem; }
.signoff .nl-form{ display:flex; gap:.8rem; flex-wrap:wrap; }
.signoff .nl-field{ flex:1 1 240px; display:flex; transform:skewX(-11deg); background:var(--ink-2); border:1px solid var(--bc-line); border-radius:3px; overflow:hidden; transition:border-color .2s; }
.signoff .nl-field:focus-within{ border-color:var(--red); }
.signoff .nl-form input{ flex:1; min-width:0; transform:skewX(11deg); background:transparent; border:0; color:var(--text); font-family:var(--sans); font-size:.96rem; padding:.95rem 1.3rem; }
.signoff .nl-form input:focus{ outline:none; }
.signoff .nl-note{ font-size:.78rem; color:var(--text-dim); margin-top:1.2rem; }
.signoff .nl-ok{ display:none; color:var(--red); font-weight:700; font-size:.92rem; margin-top:.9rem; }
.signoff .nl-ok.show{ display:block; }
.signoff .socials{ display:flex; gap:.7rem; margin-top:1.8rem; }
.signoff .socials a{ width:44px; height:44px; border:1px solid var(--bc-line); border-radius:50%; display:grid; place-items:center; color:var(--text-dim); transition:.2s; }
.signoff .socials a:hover{ border-color:var(--red); color:var(--text); }
.signoff .socials svg{ width:19px; height:19px; fill:currentColor; }

/* ---- Footer brand statement ------------------------------ */
.footer-brand .footer-rule{ display:block; width:56px; height:4px; background:var(--red); border-radius:2px; }
.footer-brand .footer-head{ font-family: var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:-.015em; line-height:.9; font-size:clamp(2.1rem,3.8vw,3.4rem); margin:0; color:#fff; }
.footer-brand .footer-head .em{ color:var(--red); }

/* nav contact link */
.nav-contact{ font-size:.82rem; font-weight:600; letter-spacing:.04em; color:rgba(246,245,242,.82); white-space:nowrap; transition:color .2s ease; }
.nav-contact:hover{ color:var(--text); }
@media (max-width:1180px){ .nav-contact{ display:none; } }

/* ---- Sports dropdown ------------------------------------- */
.nav-links .has-sub{ position:relative; }
.nav-links .has-sub > a{ display:inline-flex; align-items:center; gap:.35rem; cursor:pointer; }
.nav-links .has-sub .caret{ width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease; }
.nav-links .has-sub:hover .caret,.nav-links .has-sub:focus-within .caret{ transform:rotate(180deg); }
.submenu{ position:absolute; top:calc(100% + 16px); left:-14px; min-width:240px; background:rgba(13,14,16,.97); backdrop-filter:blur(12px); border:1px solid var(--bc-line); border-top:2px solid var(--red); border-radius:6px; padding:.45rem; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .2s ease, transform .2s ease, visibility .2s; box-shadow:0 24px 55px rgba(0,0,0,.55); z-index:60; }
.submenu::before{ content:""; position:absolute; top:-16px; left:0; right:0; height:16px; }
.nav-links .has-sub:hover .submenu,.nav-links .has-sub:focus-within .submenu{ opacity:1; visibility:visible; transform:none; }
.sub-row{ display:flex; align-items:center; justify-content:space-between; gap:1.2rem; padding:.65rem .85rem; border-radius:4px; transition:background .18s ease; }
.sub-row:hover{ background:rgba(255,255,255,.06); }
.sub-row .sp{ font-family: var(--sans); font-weight:800; text-transform:uppercase; font-size:.84rem; letter-spacing:.01em; color:#fff; }
.sub-row .sp-arrow{ width:15px; height:15px; stroke:var(--red); fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; opacity:0; transform:translateX(-4px); transition:opacity .18s ease, transform .18s ease; flex:0 0 auto; }
.sub-row:hover .sp-arrow{ opacity:1; transform:none; }
@media (max-width:980px){
  .submenu{ position:static; min-width:0; opacity:1; visibility:visible; transform:none; background:none; backdrop-filter:none; border:0; border-left:2px solid var(--red); border-radius:0; box-shadow:none; padding:.2rem 0 .4rem .9rem; margin:.4rem 0 .2rem; display:none; }
  .nav-links .has-sub.open .submenu{ display:block; }
  .nav-links .has-sub.open .caret{ transform:rotate(180deg); }
  .sub-row{ padding:.45rem .3rem; }
}

/* ---- Instagram feed (Smash Balloon style) ---------------- */
.reel-sec{ background:var(--paper); color:var(--text-ink); border-top:1px solid var(--bc-line); padding:clamp(3rem,5vw,4.6rem) 0; }
.sb{ margin-top:clamp(1.6rem,2.6vw,2.2rem); }
.sb-head{ display:flex; align-items:center; gap:1rem; margin-bottom:clamp(1.4rem,2.2vw,1.9rem); }
.sb-avatar{ width:58px; height:58px; border-radius:50%; background:var(--ink); display:grid; place-items:center; flex:0 0 auto; }
.sb-avatar svg{ width:27px; height:27px; fill:#fff; }
.sb-id{ min-width:0; }
.sb-user{ font-weight:800; font-size:1.06rem; color:var(--red); }
.sb-user:hover{ text-decoration:underline; }
.sb-stats{ display:flex; gap:1.15rem; margin:.28rem 0 .32rem; }
.sb-stat{ display:inline-flex; align-items:center; gap:.4rem; font-size:.82rem; font-weight:700; color:var(--text-ink); }
.sb-stats .sb-stat svg{ width:15px; height:15px; stroke:var(--ink-dim); fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.sb-bio{ font-size:.86rem; color:var(--ink-dim); margin:0; max-width:64ch; }
.sb-carousel{ position:relative; }
.sb-track{ display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 3*clamp(.8rem,1.6vw,1.3rem))/4); gap:clamp(.8rem,1.6vw,1.3rem); overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:.3rem .1rem 1rem; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.sb-track::-webkit-scrollbar{ display:none; }
.sb-card{ scroll-snap-align:start; display:block; color:inherit; }
.sb-media{ position:relative; aspect-ratio:4/5; border-radius:14px; overflow:hidden; background:#e7e3da; box-shadow:0 6px 20px rgba(25,26,29,.12); transition:transform .25s ease, box-shadow .25s ease; }
.sb-card:hover .sb-media{ transform:translateY(-4px); box-shadow:0 14px 34px rgba(25,26,29,.2); }
.sb-media image-slot{ position:absolute; inset:0; width:100%; height:100%; }
.sb-play{ position:absolute; inset:0; z-index:2; display:grid; place-items:center; pointer-events:none; }
.sb-play svg{ width:54px; height:54px; fill:#fff; filter:drop-shadow(0 4px 14px rgba(0,0,0,.55)); transition:transform .2s ease; }
.sb-card:hover .sb-play svg{ transform:scale(1.08); }
.sb-cap{ font-size:.9rem; line-height:1.42; color:var(--text-ink); margin:.85rem 0 .55rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sb-more{ color:var(--red); font-weight:700; }
.sb-meta{ display:flex; gap:1.15rem; }
.sb-meta .sb-stat{ color:var(--ink-dim); }
.sb-meta .sb-stat svg{ width:15px; height:15px; fill:var(--red); }
.sb-nav{ position:absolute; top:calc(50% - 2.3rem); transform:translateY(-50%); width:40px; height:40px; border-radius:50%; background:#fff; border:1px solid var(--line-ink); display:grid; place-items:center; cursor:pointer; z-index:6; color:var(--text-ink); box-shadow:0 4px 14px rgba(25,26,29,.14); transition:.2s; }
.sb-nav:hover{ background:var(--red); border-color:var(--red); color:#fff; }
.sb-nav.prev{ left:-14px; }
.sb-nav.next{ right:-14px; }
.sb-nav svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.sb-dots{ display:flex; justify-content:center; gap:.5rem; margin-top:.5rem; }
.sb-dots i{ width:9px; height:9px; border-radius:50%; background:var(--line-ink); transition:.2s; cursor:pointer; }
.sb-dots i.on{ background:var(--text-ink); }
@media (max-width:900px){ .sb-track{ grid-auto-columns:calc((100% - 2*1rem)/2.4); gap:1rem; } }
@media (max-width:560px){ .sb-track{ grid-auto-columns:80%; } .sb-nav{ display:none; } }

/* ---- KSNN TV (real YouTube embed) ------------------------ */
.tv{ max-width:1080px; border:1px solid var(--bc-line); border-radius:12px; overflow:hidden; background:#0c0d10; box-shadow:0 30px 70px rgba(0,0,0,.45); margin-top:clamp(1.4rem,2.6vw,2rem); }
.tv-bar{ display:flex; align-items:center; gap:.6rem; padding:.85rem 1.15rem; border-bottom:1px solid var(--bc-line); font-weight:800; letter-spacing:.1em; text-transform:uppercase; font-size:.7rem; color:#fff; }
.tv-bar .tv-dot{ width:8px; height:8px; border-radius:50%; background:var(--red); flex:0 0 auto; }
.tv-bar .tv-right{ margin-left:auto; color:var(--text-dim); font-weight:600; letter-spacing:.03em; text-transform:none; font-size:.74rem; }
.tv-frame{ position:relative; width:100%; aspect-ratio:16/9; background:#000; }
.tv-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.tv-note{ font-size:.8rem; color:var(--text-dim); margin:1rem 0 0; }
.tv-note a{ color:var(--red); font-weight:700; }

/* ---- Responsive ------------------------------------------ */
@media (max-width:980px){
  .bc-hero .hero-grid{ grid-template-columns:1fr; gap:1.4rem; }
  .hero-traits{ display:none; }
  .lower-third{ justify-self:start; max-width:none; }
  .fp-grid{ grid-template-columns:1fr; }
  .tw-list{ grid-template-columns:1fr; gap:1.2rem; }
  .tw-item{ border-left:0; padding:0; }
  .says .wrap{ grid-template-columns:1fr; gap:1.4rem; }
  .brow{ grid-template-columns:150px 1fr auto; gap:1rem; }
  .award-top{ grid-template-columns:auto 1fr; }
  .award-benefits{ grid-template-columns:repeat(2,1fr); }
  .award-benefits .ab:nth-child(3){ border-left:0; }
  .submitted .sub-grid{ grid-template-columns:1fr 1fr; }
  .meet .m-inner{ max-width:none; }
  .signoff .wrap{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .bc-hero{ min-height:88vh; }
  .bc-hero h1 .w,.bc-hero h1 .em{ white-space:normal; }
  .rail-card{ grid-template-columns:104px 1fr; }
  .brow{ grid-template-columns:1fr auto; }
  .brow .b-head{ display:none; }
  .submitted .sub-grid{ grid-template-columns:1fr; }
  .polaroid{ max-width:320px; margin:0 auto; }
  .board-filters{ width:100%; }
  .award-top{ grid-template-columns:1fr; text-align:left; }
  .award-benefits{ grid-template-columns:1fr; }
  .award-benefits .ab{ border-left:0; border-top:1px solid rgba(255,255,255,.08); }
  .award-benefits .ab:first-child{ border-top:0; }
}

/* ===================== styles-v4.css ===================== */
/* ============================================================
   KSNN v4 — feedback round 1 (client PDF + July call).
   Loads AFTER styles.css + styles-v3.css. Crisp white pairing,
   Inter reading type, bigger logo, tagline hero, KSNN TV,
   age gate, 44px mobile targets.
   ============================================================ */
:root{ --sans:"Inter", system-ui, sans-serif; --paper:#ffffff; --paper-2:#ffffff; }
a{ color:inherit; } a:hover{ color:inherit; }

/* ---- Bigger, readable logo (Rocky) ------------------------ */
.logo-img{ height:68px; }
.nav.scrolled .logo-img{ height:52px; }
@media (max-width:980px){ .logo-img{ height:52px; } .nav.scrolled .logo-img{ height:46px; } .footer-logo{ height:80px; } }
.footer-logo{ height:104px; }

/* ---- Hero: tagline type + multi-scene rotation ------------ */
.bc-hero h1 .em{ font-size:.74em; margin-top:.14em; }
.bc-hero .hv .scene{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:60% center; opacity:0; transition:opacity 1.5s ease; }
.bc-hero .hv .scene.on{ opacity:1; }
.bc-hero .hv img.scene.on,.bc-hero .hv img.scene.out{ animation:kbZoom 8.5s ease-out forwards; } /* .out: same animation keeps running through the fade-out (no snap back) */
@keyframes kbZoom{ from{ transform:scale(1.03); } to{ transform:scale(1.11); } }
@media (prefers-reduced-motion:reduce){ .bc-hero .hv img.scene.on,.bc-hero .hv img.scene.out{ animation:none; } }

/* ---- Front Page on crisp white (Heather) ------------------ */
.frontpage{ background:#fff; border-top:1px solid var(--line-ink); }
.frontpage .bc-head h2{ color:var(--text-ink); }
.frontpage .bc-head .more{ color:var(--ink-dim); }
.frontpage .bc-head .more:hover{ color:var(--text-ink); }
.rail-card{ background:#fff; border-color:var(--line-ink); }
.rail-card h4{ color:var(--text-ink); }
.rail-card .rc-read{ color:var(--ink-dim); }
.lead-story{ box-shadow:0 18px 44px rgba(25,26,29,.16); }

/* ---- KSNN TV (YouTube carousel, Heather) ------------------ */
.tvsec{ background:#fff; color:var(--text-ink); padding:clamp(3rem,5vw,4.6rem) 0; border-top:1px solid var(--line-ink); }
.yt-grid{ display:grid; grid-template-columns:1.55fr 1fr; gap:clamp(1.2rem,2.4vw,2rem); align-items:stretch; }
.yt-main{ border-radius:12px; overflow:hidden; background:#0c0d10; box-shadow:0 24px 60px rgba(25,26,29,.2); display:flex; flex-direction:column; }
.yt-frame{ position:relative; flex:1; min-height:0; aspect-ratio:16/9; }
.yt-frame image-slot{ position:absolute; inset:0; width:100%; height:100%; }
.yt-play{ position:absolute; inset:0; z-index:2; display:grid; place-items:center; pointer-events:none; }
.yt-play i{ width:78px; height:54px; border-radius:14px; background:var(--red); display:grid; place-items:center; box-shadow:0 10px 30px rgba(0,0,0,.45); transition:transform .2s ease; }
.yt-play svg{ width:26px; height:26px; fill:#fff; }
a.yt-main:hover .yt-play i{ transform:scale(1.08); }
.yt-side{ display:grid; gap:clamp(.8rem,1.4vw,1rem); align-content:stretch; }
.yt-card{ display:grid; grid-template-columns:168px 1fr; gap:1rem; align-items:center; border:1px solid var(--line-ink); border-radius:10px; overflow:hidden; background:#fff; transition:border-color .2s ease, transform .2s ease; color:var(--text-ink); }
.yt-card:hover{ border-color:var(--red); transform:translateX(2px); }
.yt-thumb{ position:relative; aspect-ratio:16/9; background:#e7e3da; }
.yt-thumb image-slot{ position:absolute; inset:0; width:100%; height:100%; }
.yt-thumb .yt-dur{ position:absolute; right:.4rem; bottom:.4rem; z-index:2; background:rgba(13,14,16,.85); color:#fff; font-size:.62rem; font-weight:700; padding:.14rem .38rem; border-radius:3px; letter-spacing:.04em; }
.yt-card .yt-body{ padding-right:1rem; min-width:0; }
.yt-card .yt-kind{ font-size:.6rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--red); }
.yt-card h4{ margin:.3rem 0 0; font-size:.95rem; font-weight:700; line-height:1.25; color:var(--text-ink); }
.yt-card .yt-meta{ display:block; font-size:.72rem; color:var(--ink-dim); margin-top:.35rem; }
.tv-note{ color:var(--ink-dim); }
@media (max-width:980px){ .yt-grid{ grid-template-columns:1fr; } }
@media (max-width:560px){ .yt-card{ grid-template-columns:128px 1fr; } }

/* ---- Award / contest banner ------------------------------- */
.aw-note{ font-size:.8rem; color:rgba(255,255,255,.55); margin:1.2rem 0 0; max-width:52ch; }
.award-copy .aw-cta .btn-red{ color:#fff; }
.award-copy .aw-cta .btn-red::before{ background:var(--red); box-shadow:0 10px 28px rgba(0,0,0,.42); }
.award-copy .aw-cta .btn-red:hover::before{ background:var(--red-2); }

/* ---- Footer: socials + contact ----------------------------- */
.footer .socials{ display:flex; gap:.7rem; margin-top:1.4rem; justify-content:flex-end; }
.footer .socials a{ width:44px; height:44px; border:1px solid var(--bc-line); border-radius:50%; display:grid; place-items:center; color:var(--text-dim); transition:.2s; }
.footer .socials a:hover{ border-color:var(--red); color:#fff; }
.footer .socials svg{ width:19px; height:19px; fill:currentColor; }
.footer-mail{ display:inline-block; margin-top:1rem; color:var(--text-dim); font-size:.9rem; border-bottom:1px solid var(--bc-line); transition:color .2s ease; }
.footer-mail:hover{ color:#fff; }
@media (max-width:980px){ .footer .socials{ justify-content:flex-start; } }

/* ---- Age gate --------------------------------------------- */
.modal.gate{ width:min(480px,100%); }
.ag-choices{ display:flex; gap:.8rem; flex-wrap:wrap; }
.ag-choices .btn{ flex:1 1 auto; justify-content:center; }

/* ---- Mobile: 44px touch targets (Heather) ------------------ */
@media (max-width:980px){
  .btn{ min-height:46px; }
  .nav-links a, .footer-bottom nav a{ display:inline-flex; align-items:center; min-height:44px; }
  .board-filters button{ min-height:44px; padding:.55rem 1.1rem; }
  .sb-nav{ width:44px; height:44px; }
  .chip span{ min-height:44px; align-items:center; }
  .meet{ min-height:440px; }
  .meet .m-bg img{ object-position:76% center; }
}



/* =====================================================================
 * Page-specific CSS lifted from the design pages' inline <style> blocks.
 *
 * These were NOT in styles.css / styles-v3.css / styles-v4.css. Each design page
 * carried its own <style> block (the homepage is the only one that did not), so a
 * merge of the three linked stylesheets alone leaves .art-hero, .a-bg, .art-body and
 * every other page-specific class completely unstyled. Found 2026-07-17 when story
 * images loaded but rendered at zero size.
 *
 * Class names do not collide across pages (art-* / sub-* / ct-* etc), so they are
 * concatenated in one stylesheet rather than split per template.
 * ================================================================== */

/* ---------- from: Story - Justin Flowe.html ---------- */
.art-hero{ position:relative; overflow:hidden; background:#0a0b0d; min-height:clamp(440px,62vh,640px); display:flex; align-items:flex-end; }
.art-hero .a-bg{ position:absolute; inset:0; }
.art-hero .a-bg image-slot{ width:100%; height:100%; }
.art-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(8,9,11,.96) 0%, rgba(8,9,11,.45) 46%, rgba(8,9,11,.2) 100%); }
.art-hero .wrap{ position:relative; z-index:2; padding-bottom:clamp(2rem,4vw,3.2rem); width:100%; }
.art-hero .ls-tags{ display:flex; gap:.5rem; margin-bottom:1.1rem; }
.art-hero h1{ font-family:"Archivo Expanded",var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:-.015em; line-height:.94; font-size:clamp(2rem,4.6vw,3.8rem); margin:0; color:#fff; max-width:20ch; }
.art-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.7rem 1rem; margin-top:1.3rem; font-size:.84rem; color:var(--text-dim); }
.art-meta b{ color:#fff; font-weight:700; }
.art-body-sec{ background:#fff; color:var(--text-ink); padding:clamp(2.6rem,4.5vw,4rem) 0 clamp(3rem,5vw,4.4rem); }
.art-grid{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:clamp(2rem,4vw,3.6rem); max-width:1080px; margin:0 auto; }
.art-body{ font-size:clamp(1.02rem,1.25vw,1.13rem); line-height:1.75; color:#26272b; }
.art-body p{ margin:0 0 1.3rem; }
.art-body .lede::first-letter{ font-family:"Archivo Expanded",var(--sans); font-weight:800; font-size:3.3em; float:left; line-height:.8; padding:.06em .12em 0 0; color:var(--red); }
.art-body blockquote{ margin:2rem 0; padding:0 0 0 1.4rem; border-left:4px solid var(--red); font-family:"Archivo Expanded",var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; font-size:clamp(1.15rem,1.9vw,1.5rem); line-height:1.2; color:var(--text-ink); }
.art-body blockquote cite{ display:block; font-family:var(--sans); font-style:normal; font-weight:700; text-transform:none; letter-spacing:.04em; font-size:.78rem; color:var(--ink-dim); margin-top:.7rem; }
.art-fig{ margin:1.8rem 0; }
.art-fig image-slot{ width:100%; height:340px; }
.art-fig figcaption{ font-size:.8rem; color:var(--ink-dim); margin-top:.55rem; }
.share-row{ display:flex; align-items:center; gap:.6rem; margin:2rem 0 0; padding-top:1.4rem; border-top:1px solid var(--line-ink); flex-wrap:wrap; }
.share-row .sh-label{ font-size:.68rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); margin-right:.4rem; }
.share-row a, .share-row button{ width:44px; height:44px; border:1px solid var(--line-ink); border-radius:50%; display:grid; place-items:center; color:var(--text-ink); background:none; cursor:pointer; transition:.2s; }
.share-row a:hover, .share-row button:hover{ border-color:var(--red); color:var(--red); }
.share-row svg{ width:18px; height:18px; fill:currentColor; }
.share-row .copied{ font-size:.78rem; font-weight:700; color:var(--red); display:none; }
.art-side{ display:flex; flex-direction:column; gap:1rem; align-self:start; position:sticky; top:96px; }
.art-side h3{ font-family:"Archivo Expanded",var(--sans); font-weight:800; text-transform:uppercase; font-size:.92rem; margin:0 0 .2rem; color:var(--text-ink); display:flex; align-items:center; gap:.6rem; }
.art-side h3::before{ content:""; width:4px; height:1.1em; background:var(--red); }
.side-card{ display:block; border:1px solid var(--line-ink); border-radius:8px; padding:.95rem 1.05rem; transition:border-color .2s, transform .2s; color:var(--text-ink); }
.side-card:hover{ border-color:var(--red); transform:translateX(2px); }
.side-card .k{ font-size:.6rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--red); }
.side-card h4{ margin:.3rem 0 0; font-size:.94rem; font-weight:700; line-height:1.3; }
.fts{ background:var(--ink); border-top:1px solid var(--bc-line); padding:clamp(3rem,5vw,4.4rem) 0; }
.fts .fts-grid{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(240px,1fr); gap:clamp(2rem,4vw,3.4rem); align-items:center; max-width:1080px; margin:0 auto; }
.fts .stamp-tag{ margin-bottom:1.1rem; }
.fts h2{ font-family:"Archivo Expanded",var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; font-size:clamp(1.5rem,2.8vw,2.2rem); margin:0; color:#fff; }
.fts .fts-by{ font-family:var(--hand); font-size:1.5rem; color:rgba(255,255,255,.85); margin:1rem 0 0; }
.fts p.fts-txt{ color:var(--text-dim); margin:1.1rem 0 0; max-width:52ch; line-height:1.65; }
.fts .btn{ margin-top:1.8rem; }
.fts .polaroid{ max-width:290px; justify-self:center; transform:rotate(2deg); }
@media (max-width:980px){ .art-grid{ grid-template-columns:1fr; } .art-side{ position:static; } .fts .fts-grid{ grid-template-columns:1fr; } }

/* ---------- from: Submit a Story.html ---------- */
/* ===== Submit a Story page ===== */
.ys-hero{ position:relative; overflow:hidden; background:#0a0b0d; border-bottom:1px solid var(--bc-line); min-height:clamp(480px,64vh,680px); display:flex; align-items:center; padding:clamp(116px,16vh,172px) 0 clamp(3rem,5vw,4rem); text-align:center; }
.ys-bg{ position:absolute; inset:0; z-index:0; }
.ys-bg img{ width:100%; height:100%; object-fit:cover; object-position:62% center; display:block; }
.ys-hero::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(10,11,13,.72) 0%, rgba(10,11,13,.66) 40%, rgba(10,11,13,.78) 78%, rgba(10,11,13,.97) 100%), radial-gradient(78% 58% at 50% 52%, rgba(10,11,13,.5), transparent 72%); }
.ys-hero .wrap{ position:relative; z-index:2; }
.ys-kick{ display:flex; align-items:center; justify-content:center; gap:.9rem; margin-bottom:1.4rem; }
.ys-kick .mk{ width:36px; height:15px; background:var(--red); transform:skewX(-11deg); }
.ys-kick .tx{ color:var(--red); font-weight:800; letter-spacing:.26em; text-transform:uppercase; font-size:clamp(.72rem,1vw,.82rem); text-shadow:0 2px 12px rgba(0,0,0,.9); }
.ys-hero h1{ font-family:"Archivo Expanded",var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:-.02em; line-height:.9; font-size:clamp(2.6rem,6vw,4.6rem); margin:0; color:#fff; text-shadow:0 4px 30px rgba(0,0,0,.6); }
.ys-hero h1 .em{ color:var(--red); }
.ys-lead{ max-width:60ch; margin:1.8rem auto 0; color:rgba(255,255,255,.92); font-size:clamp(1rem,1.2vw,1.1rem); line-height:1.62; text-shadow:0 2px 16px rgba(0,0,0,.85); }
.ys-lead p{ margin:0 0 1rem; }
.ys-lead p:last-child{ margin:0; }
.ys-lead strong{ color:#fff; font-weight:700; }

.ys-form-sec{ background:var(--ink); padding:clamp(2.6rem,5vw,4rem) 0 clamp(3.4rem,6vw,5.4rem); }
.form-shell{ max-width:660px; margin:0 auto; }

/* progress */
.ms-progress{ margin-bottom:1.7rem; }
.ms-track{ display:flex; gap:.5rem; margin-bottom:.85rem; }
.ms-track i{ height:4px; flex:1; border-radius:2px; background:var(--bc-line); transition:background .3s ease; }
.ms-track i.on{ background:var(--red); }
.ms-step-label{ font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--red); margin:0; text-align:center; }

.form-card{ background:var(--ink-2); border:1px solid var(--bc-line); border-radius:8px; padding:clamp(1.6rem,3vw,2.4rem); }
.form-legend{ display:flex; align-items:center; gap:.8rem; margin:0 0 1.5rem; }
.form-legend .bar{ width:4px; height:1.35em; background:var(--red); flex:0 0 auto; }
.form-legend h2{ font-family:"Archivo Expanded",var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; font-size:clamp(1.15rem,2vw,1.5rem); margin:0; line-height:1; }
.form-legend .opt{ font-size:.6rem; color:var(--text-dim); letter-spacing:.1em; font-weight:800; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 1.1rem; }
.form-grid .fr-full{ grid-column:1 / -1; }
@media (max-width:600px){ .form-grid{ grid-template-columns:1fr; } }

/* radio chips */
.chip-set{ display:flex; flex-wrap:wrap; gap:.55rem; }
.chip{ position:relative; cursor:pointer; }
.chip input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.chip span{ display:inline-flex; align-items:center; padding:.6rem 1rem; border:1px solid var(--line); border-radius:3px; font-size:.82rem; font-weight:700; letter-spacing:.02em; color:var(--text-dim); transition:.18s; }
.chip:hover span{ color:var(--text); border-color:rgba(255,255,255,.3); }
.chip input:checked + span{ background:var(--red); border-color:var(--red); color:#fff; }
.chip input:focus-visible + span{ outline:2px solid var(--red); outline-offset:2px; }

.ms-step[hidden]{ display:none; }
.ms-nav{ display:flex; align-items:center; gap:.8rem; margin-top:1.5rem; }
.ms-nav .ms-spacer{ flex:1; }
.ms-nav .btn[hidden]{ display:none; }

.ys-success{ display:none; }
.ys-success.show{ display:block; }
.form-flow.hide{ display:none; }
.ys-success .success-state{ padding:2.6rem 0; }

/* ---------- from: Contest.html ---------- */
.ct-hero{ position:relative; overflow:hidden; background:#0a0b0d; border-bottom:1px solid var(--bc-line); padding:clamp(140px,20vh,210px) 0 clamp(3rem,5vw,4.4rem); }
.ct-hero .ct-bg{ position:absolute; inset:0; z-index:0; }
.ct-hero .ct-bg img{ width:100%; height:100%; object-fit:cover; object-position:80% center; filter:saturate(.6) brightness(.85); }
.ct-hero::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, #0a0b0d 0%, rgba(10,11,13,.93) 34%, rgba(10,11,13,.55) 58%, rgba(10,11,13,.2) 100%), linear-gradient(0deg, rgba(10,11,13,.9) 0%, rgba(10,11,13,0) 40%); }
.ct-hero .wrap{ position:relative; z-index:2; display:grid; grid-template-columns:auto 1fr; gap:clamp(1.6rem,4vw,3.4rem); align-items:center; }
.ct-hero .aw-shield{ width:clamp(190px,22vw,300px); height:auto; }
.ct-hero h1{ font-family:"Archivo Expanded",var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:-.02em; line-height:.92; font-size:clamp(2.4rem,5.4vw,4.6rem); margin:0; color:#fff; }
.ct-hero h1 .em{ color:var(--red); }
.ct-hero .h-sub{ color:rgba(255,255,255,.84); font-size:clamp(1rem,1.35vw,1.2rem); max-width:50ch; margin:1.5rem 0 0; line-height:1.6; }
.ct-chips{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.6rem; }
.ct-chips span{ font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:.5rem .8rem; border:1px solid rgba(255,255,255,.28); border-radius:3px; color:rgba(255,255,255,.85); }
.ct-hero .aw-cta{ margin-top:2.2rem; display:flex; gap:1rem; flex-wrap:wrap; }
.ct-video{ background:var(--ink); padding:clamp(2.6rem,4.6vw,4rem) 0; border-bottom:1px solid var(--bc-line); }
.ct-video .tv{ margin:clamp(1.4rem,2.6vw,2rem) auto 0; }
.ct-video .yt-play{ position:absolute; inset:0; display:grid; place-items:center; z-index:2; }
.ct-video .tv-frame{ display:block; }
.crit{ background:var(--paper); color:var(--text-ink); padding:clamp(3.2rem,5.5vw,5rem) 0; }
.crit .head{ text-align:center; max-width:640px; margin:0 auto clamp(2.2rem,3.6vw,3rem); }
.crit h2{ font-family:"Archivo Expanded",var(--sans); font-weight:800; text-transform:uppercase; font-size:clamp(1.7rem,3.2vw,2.5rem); margin:0; color:var(--text-ink); }
.crit .head p{ color:var(--ink-dim); margin:1rem 0 0; }
.crit .value-grid{ grid-template-columns:repeat(4,1fr); }
.crit .value .ico{ display:block; }
.ct-note{ max-width:820px; margin:clamp(2rem,3.5vw,2.8rem) auto 0; }
.ct-enter{ background:#0a0b0d; border-top:1px solid var(--bc-line); padding:clamp(3.4rem,6vw,5.4rem) 0; text-align:center; }
.ct-enter h2{ font-family:"Archivo Expanded",var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:-.015em; font-size:clamp(1.9rem,4vw,3.2rem); margin:0; color:#fff; }
.ct-enter p{ color:var(--text-dim); max-width:52ch; margin:1.2rem auto 0; }
.ct-enter .btn{ margin-top:2.1rem; }
.ct-enter .coppa{ justify-content:center; margin-top:1.6rem; font-size:.8rem; color:var(--text-dim); }
@media (max-width:980px){ .ct-hero .wrap{ grid-template-columns:1fr; } .ct-hero .aw-shield{ width:180px; } .crit .value-grid{ grid-template-columns:repeat(2,1fr); } .value:nth-child(3){ border-left:0; } }

/* ---------- from: Meet KSNN.html ---------- */
.mk-hero{ position:relative; overflow:hidden; background:#0a0b0d; min-height:clamp(460px,64vh,660px); display:flex; align-items:center; padding-top:80px; }
.mk-hero .m-bg{ position:absolute; inset:0; }
.mk-hero .m-bg img{ width:100%; height:100%; object-fit:cover; object-position:74% center; }
.mk-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, #0a0b0d 0%, rgba(10,11,13,.94) 30%, rgba(10,11,13,.5) 56%, rgba(10,11,13,.1) 100%), linear-gradient(0deg, rgba(10,11,13,.7) 0%, rgba(10,11,13,0) 40%); }
.mk-hero .wrap{ position:relative; z-index:2; }
.mk-hero h1{ font-family:"Archivo Expanded",var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:-.02em; line-height:.92; font-size:clamp(2.4rem,5.6vw,4.6rem); margin:0; color:#fff; max-width:16ch; }
.mk-hero h1 .em{ color:var(--red); }
.mk-hero p{ color:rgba(255,255,255,.82); max-width:46ch; margin:1.6rem 0 0; font-size:clamp(1rem,1.35vw,1.18rem); line-height:1.62; }
.mission{ background:var(--paper); color:var(--text-ink); padding:clamp(3.2rem,5.5vw,5rem) 0; }
.mission .wrap{ max-width:900px; }
.mission blockquote{ margin:0; font-family:"Archivo Expanded",var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:-.012em; line-height:1.14; font-size:clamp(1.3rem,2.6vw,2rem); color:var(--text-ink); }
.mission blockquote .em{ color:var(--red); }
.mission .mission-body{ color:var(--ink-dim); margin:1.6rem 0 0; font-size:1.02rem; line-height:1.7; max-width:70ch; }
.tl{ background:var(--ink); padding:clamp(3.2rem,5.5vw,5rem) 0; border-top:1px solid var(--bc-line); }
.tl .bc-head{ margin-bottom:clamp(2rem,3.4vw,2.8rem); }
.tl-rows{ display:grid; gap:0; max-width:900px; }
.tl-row{ display:grid; grid-template-columns:120px 1fr; gap:clamp(1.2rem,2.6vw,2.4rem); padding:1.6rem 0; border-top:1px solid var(--bc-line); }
.tl-row:last-child{ border-bottom:1px solid var(--bc-line); }
.tl-year{ font-family:"Archivo Expanded",var(--sans); font-weight:800; font-size:clamp(1.2rem,2vw,1.6rem); color:var(--red); line-height:1; }
.tl-row h3{ font-family:"Archivo Expanded",var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; font-size:clamp(1rem,1.6vw,1.25rem); margin:0 0 .5rem; color:#fff; line-height:1.1; }
.tl-row p{ margin:0; color:var(--text-dim); line-height:1.62; font-size:.96rem; max-width:62ch; }
.mk-cta{ background:#0a0b0d; border-top:1px solid var(--bc-line); padding:clamp(3rem,5.5vw,4.8rem) 0; text-align:center; }
.mk-cta h2{ font-family:"Archivo Expanded",var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:-.015em; font-size:clamp(1.8rem,3.6vw,2.8rem); margin:0; color:#fff; }
.mk-cta h2 .em{ color:var(--red); }
.mk-cta p{ color:var(--text-dim); max-width:50ch; margin:1.1rem auto 0; }
.mk-cta .btns{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:2rem; }
@media (max-width:640px){ .tl-row{ grid-template-columns:1fr; gap:.5rem; } }

/* ---------- from: Official Rules.html ---------- */
.lg-hero{ background:#0a0b0d; border-bottom:1px solid var(--bc-line); padding:clamp(130px,18vh,180px) 0 clamp(2.4rem,4vw,3.2rem); }
.lg-hero h1{ font-family:"Archivo Expanded",var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:-.02em; line-height:.94; font-size:clamp(2rem,4.4vw,3.4rem); margin:0; color:#fff; }
.lg-hero .lg-upd{ color:var(--text-dim); font-size:.84rem; margin:1.1rem 0 0; letter-spacing:.06em; text-transform:uppercase; font-weight:700; }
.lg-body{ background:#fff; color:var(--text-ink); padding:clamp(2.6rem,4.5vw,4rem) 0 clamp(3.2rem,5.5vw,5rem); }
.lg-body .wrap{ max-width:820px; }
.lg-draft{ display:flex; gap:.9rem; align-items:flex-start; background:var(--band,#faf7f2); background:#faf7f2; border:1px solid var(--line-ink); border-left:3px solid var(--red); border-radius:4px; padding:1.1rem 1.2rem; font-size:.92rem; color:var(--ink-dim); line-height:1.55; margin-bottom:clamp(1.8rem,3vw,2.6rem); }
.lg-draft svg{ width:22px; height:22px; flex:0 0 auto; stroke:var(--red); fill:none; stroke-width:1.7; margin-top:1px; }
.lg-body h2{ font-family:"Archivo Expanded",var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; font-size:clamp(1.05rem,1.8vw,1.3rem); margin:2.2rem 0 .7rem; color:var(--text-ink); display:flex; align-items:center; gap:.7rem; }
.lg-body h2 .n{ color:var(--red); }
.lg-body p{ margin:0 0 1rem; line-height:1.7; color:#33343a; font-size:.98rem; }
.lg-body .ph{ color:var(--ink-dim); font-style:italic; }
.lg-body a{ color:var(--red); font-weight:600; }

/* ---------- from: 404.html ---------- */
.nf{ position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; background:#0a0b0d; overflow:hidden; padding:120px var(--pad) 60px; }
.nf .motion-lines i{ background:linear-gradient(90deg, transparent, var(--red), transparent); }
.nf-inner{ position:relative; z-index:2; max-width:640px; }
.nf-code{ font-family:"Archivo Expanded",var(--sans); font-weight:800; font-size:clamp(5rem,16vw,10rem); line-height:.9; color:#fff; letter-spacing:-.03em; margin:0; }
.nf-code .em{ color:var(--red); }
.nf-bars{ display:flex; gap:6px; justify-content:center; margin:1.6rem 0; }
.nf-bars i{ width:26px; height:12px; }
.nf-bars i:nth-child(1){ background:#fff; } .nf-bars i:nth-child(2){ background:#e6c545; } .nf-bars i:nth-child(3){ background:#4fc3f7; } .nf-bars i:nth-child(4){ background:#7ac74f; } .nf-bars i:nth-child(5){ background:var(--red); } .nf-bars i:nth-child(6){ background:#8e44ad; }
.nf h1{ font-family:"Archivo Expanded",var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:-.015em; font-size:clamp(1.4rem,3vw,2.1rem); margin:0; color:#fff; }
.nf p{ color:var(--text-dim); margin:1rem auto 0; max-width:44ch; line-height:1.6; }
.nf .btns{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:2.2rem; }

/* =====================================================================
 * <image-slot> -> real <img> compatibility.
 *
 * The design sized its prototype <image-slot> custom elements with 13 rules. The handoff says
 * not to ship image-slot.js, so we render real <img> — but the design never wrote matching img
 * rules for these containers, so the images loaded and then painted at zero size (found
 * 2026-07-17: naturalWidth was correct, the box was not).
 *
 * Scoped per container ON PURPOSE. A bare `img { width:100%; height:100% }` would match the
 * design's own global image-slot rule but would also stretch the logo and every inline icon.
 *
 * .says-bg img / .m-bg img already exist (the design used real <img> there) and are untouched.
 * ================================================================== */
.lead-story > img,
.rail-card .rc-media img,
.polaroid .ph img,
.sb-media img,
.yt-frame img,
.yt-thumb img,
.art-hero .a-bg img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* .award-bg is not a positioned box in the design's markup; it took an inline-styled <img>. */
.award-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 80% center;
	display: block;
}

/* Editor-inserted figures inside story body copy. */
.art-body .art-fig img,
.art-body img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Embeds and captions migrated from the old site carry fixed pixel widths (width="640",
   style="width:615px"), which widened the page on phones. */
.art-body iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	margin: 0 0 1.3rem;
}
.art-body .wp-caption,
.art-body .wp-video {
	max-width: 100%;
}
/* .art-body is a grid item: without this its min-content width (a wide image) stretches the column
   past the viewport and max-width:100% on the image never gets a chance to apply. overflow-wrap
   covers unbreakable strings in migrated copy (long URLs, emails, "————" divider lines). */
.art-body {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* =====================================================================
 * v5 — interior pages layer (Stories, Sport Archive, Watch, Community,
 * Contest Entry, Contact). Imported from design styles-v5.css 2026-08-27.
 * Loads after the v4 cascade above. ACF image fields replace <image-slot>.
 * ================================================================== */
/* KSNN v5 — interior pages layer (Stories, Archive, Watch, Community, Entry, Contact). Loads after v4. */
/* ---- interior hero ---- */
.page-hero{ background:#0a0b0d; border-bottom:1px solid var(--bc-line); padding:clamp(128px,17vh,176px) 0 clamp(2.6rem,4.4vw,3.6rem); position:relative; overflow:hidden; }
.page-hero h1{ font-family:"Archivo Expanded",var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:-.02em; line-height:.92; font-size:clamp(2.2rem,5vw,4rem); margin:0; color:#fff; }
.page-hero h1 .em{ color:var(--red); }
.page-hero .ph-sub{ color:rgba(255,255,255,.8); max-width:52ch; margin:1.2rem 0 0; font-size:clamp(.98rem,1.3vw,1.14rem); line-height:1.6; }
.page-hero .ph-cta{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.8rem; }
.tpl-chip{ display:inline-flex; align-items:center; gap:.5rem; border:1.5px dashed rgba(255,214,90,.65); color:#ffd65a; padding:.5rem .85rem; font-size:.66rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; border-radius:4px; margin-bottom:1.3rem; }
/* ---- filter bar (white sections) ---- */
.filterbar{ display:flex; flex-wrap:wrap; gap:1.4rem; align-items:center; margin:0 0 1.8rem; }
.fgroup{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.fgroup .fl{ font-size:.62rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); margin-right:.2rem; }
.fgroup button{ font-family:var(--sans); font-size:.78rem; font-weight:700; letter-spacing:.03em; padding:.5rem 1rem; border:1px solid var(--line-ink); border-radius:999px; background:none; color:var(--text-ink); cursor:pointer; transition:.18s; min-height:38px; }
.fgroup button:hover{ border-color:var(--red); color:var(--red); }
.fgroup button.on{ background:var(--red); border-color:var(--red); color:#fff; }
@media (max-width:980px){ .fgroup button{ min-height:44px; } }
/* ---- story grid ---- */
.sgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.5rem); }
.scard{ border:1px solid var(--line-ink); border-radius:10px; overflow:hidden; background:#fff; display:flex; flex-direction:column; transition:border-color .2s, transform .2s, box-shadow .2s; }
.scard:hover{ border-color:var(--red); transform:translateY(-2px); box-shadow:0 14px 34px rgba(25,26,29,.12); }
.sc-media{ position:relative; aspect-ratio:16/10; background:#e7e3da; display:block; }
.sc-media image-slot{ position:absolute; inset:0; width:100%; height:100%; }
.sc-body{ padding:1rem 1.1rem 1.2rem; display:flex; flex-direction:column; gap:.45rem; flex:1; }
.sc-kind{ font-size:.6rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--red); }
.sc-body h4{ margin:0; font-family:"Archivo",var(--sans); font-size:1.02rem; font-weight:800; line-height:1.25; color:var(--text-ink); }
.sc-body h4 a{ color:inherit; }
.sc-exc{ margin:0; font-size:.84rem; color:var(--ink-dim); line-height:1.5; }
.sc-read{ margin-top:auto; padding-top:.5rem; font-size:.74rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--text-ink); display:inline-flex; align-items:center; gap:.4rem; }
.sc-read svg{ width:14px; height:14px; stroke:var(--red); stroke-width:2.4; fill:none; }
.scard:hover .sc-read{ color:var(--red); }
.lm-hidden{ display:none !important; }
.loadmore{ display:grid; place-items:center; margin:2.2rem 0 0; }
.fempty{ display:none; text-align:center; color:var(--ink-dim); padding:3rem 0; font-size:.95rem; }
@media (max-width:980px){ .sgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .sgrid{ grid-template-columns:1fr; } }
/* ---- video grid (dark) ---- */
.vgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.5rem); }
.vcard{ background:var(--ink-2); border:1px solid var(--bc-line); border-radius:10px; overflow:hidden; display:flex; flex-direction:column; transition:border-color .2s, transform .2s; color:var(--text); }
.vcard:hover{ border-color:var(--red); transform:translateY(-2px); }
.vc-media{ position:relative; aspect-ratio:16/9; background:#0c0d10; }
.vc-media image-slot{ position:absolute; inset:0; width:100%; height:100%; }
.vc-media .yt-dur{ position:absolute; right:.5rem; bottom:.5rem; z-index:2; background:rgba(13,14,16,.85); color:#fff; font-size:.62rem; font-weight:700; padding:.15rem .4rem; border-radius:3px; }
.vc-media .vc-play{ position:absolute; inset:0; z-index:2; display:grid; place-items:center; opacity:0; transition:opacity .2s; }
.vcard:hover .vc-play{ opacity:1; }
.vc-play i{ width:54px; height:38px; border-radius:10px; background:var(--red); display:grid; place-items:center; }
.vc-play svg{ width:18px; height:18px; fill:#fff; }
.vc-body{ padding:.95rem 1.05rem 1.1rem; }
.vc-body .sc-kind{ color:var(--red); }
.vc-body h4{ margin:.35rem 0 0; font-size:.96rem; font-weight:700; line-height:1.3; color:#fff; }
.vc-body .vc-meta{ display:block; font-size:.72rem; color:var(--text-dim); margin-top:.4rem; }
@media (max-width:980px){ .vgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .vgrid{ grid-template-columns:1fr; } }
/* dark filterbar variant */
.filterbar.dark .fgroup .fl{ color:var(--text-dim); }
.filterbar.dark .fgroup button{ border-color:var(--bc-line); color:var(--text); }
.filterbar.dark .fgroup button:hover{ border-color:var(--red); color:#fff; }
.filterbar.dark .fgroup button.on{ background:var(--red); border-color:var(--red); color:#fff; }
/* ---- CTA band ---- */
.cta-band{ background:#0a0b0d; border-top:1px solid var(--bc-line); padding:clamp(2.8rem,5vw,4.4rem) 0; text-align:center; }
.cta-band h2{ font-family:"Archivo Expanded",var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:-.015em; font-size:clamp(1.6rem,3.2vw,2.5rem); margin:0; color:#fff; }
.cta-band h2 .em{ color:var(--red); }
.cta-band p{ color:var(--text-dim); max-width:50ch; margin:1rem auto 0; line-height:1.6; }
.cta-band .btns{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:1.9rem; }
/* ---- article deck ---- */
.art-hero .art-deck{ color:rgba(255,255,255,.85); max-width:58ch; margin:1rem 0 0; font-size:clamp(.98rem,1.3vw,1.15rem); line-height:1.55; }
/* ---- editorial kit (article building blocks) ---- */
.ekit{ background:#fff; border-top:1px dashed rgba(25,26,29,.3); padding:clamp(2.4rem,4vw,3.4rem) 0; color:var(--text-ink); }
.ekit .wrap{ max-width:1080px; }
.ek-label{ display:inline-flex; align-items:center; gap:.5rem; border:1.5px dashed rgba(192,110,20,.55); color:#a05c10; padding:.5rem .85rem; font-size:.66rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; border-radius:4px; margin-bottom:1.6rem; }
.ek-cols{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:clamp(2rem,4vw,3.6rem); }
.ek-note{ font-size:.82rem; color:var(--ink-dim); line-height:1.6; align-self:start; position:sticky; top:96px; border:1px solid var(--line-ink); border-radius:8px; padding:1rem 1.1rem; }
.art-body h2{ font-family:"Archivo Expanded",var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; font-size:clamp(1.25rem,2vw,1.6rem); line-height:1.15; margin:2.2rem 0 .9rem; color:var(--text-ink); }
.art-body h3{ font-family:"Archivo",var(--sans); font-weight:800; font-size:clamp(1.05rem,1.5vw,1.2rem); margin:1.8rem 0 .7rem; color:var(--text-ink); }
.art-body ul, .art-body ol{ margin:0 0 1.3rem; padding-left:1.3rem; line-height:1.7; }
.art-body li{ margin-bottom:.35rem; }
.art-body li::marker{ color:var(--red); font-weight:800; }
.art-body .gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; margin:1.8rem 0; }
.art-body .gallery image-slot{ aspect-ratio:1/1; width:100%; border-radius:8px; overflow:hidden; }
.art-body .video-embed{ position:relative; aspect-ratio:16/9; background:#0c0d10; border-radius:10px; overflow:hidden; margin:1.8rem 0; }
.art-body .video-embed image-slot{ position:absolute; inset:0; width:100%; height:100%; }
.art-body .video-embed .yt-play{ position:absolute; inset:0; z-index:2; display:grid; place-items:center; }
.art-body .callout{ background:#faf7f2; border:1px solid var(--line-ink); border-left:3px solid var(--red); border-radius:6px; padding:1.1rem 1.3rem; margin:1.8rem 0; font-size:.95rem; color:#33343a; line-height:1.65; }
.art-body .callout b{ color:var(--text-ink); }
.art-body .btn-row{ display:flex; gap:.9rem; flex-wrap:wrap; margin:1.8rem 0; }
@media (max-width:980px){ .ek-cols{ grid-template-columns:1fr; } .ek-note{ position:static; } }
/* ---- more-from-sport band ---- */
.morefrom{ background:#fff; border-top:1px solid var(--line-ink); padding:clamp(2.6rem,4.4vw,3.8rem) 0; color:var(--text-ink); }
.morefrom .bc-head h2, .ekit .bc-head h2{ color:var(--text-ink); }
.morefrom .bc-head .more{ color:var(--ink-dim); }
.morefrom .bc-head .more:hover{ color:var(--text-ink); }
/* ---- contest dates ---- */
.dates{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.date-card{ border:1px solid var(--bc-line); border-radius:10px; padding:1.2rem 1.3rem 1.3rem; background:var(--ink-2); }
.date-card .dc-k{ font-size:.62rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--red); }
.date-card .dc-v{ display:block; font-family:"Archivo Expanded",var(--sans); font-weight:800; font-size:1.1rem; color:#fff; margin:.5rem 0 .2rem; }
.date-card .dc-s{ font-size:.78rem; color:var(--text-dim); line-height:1.5; }
@media (max-width:980px){ .dates{ grid-template-columns:repeat(2,1fr); } }
/* ---- entry / contact form (namespaced .cef) ---- */
.cef{ max-width:680px; margin:0 auto; }
.cef .prog{ display:flex; gap:.4rem; margin-bottom:.7rem; }
.cef .prog i{ height:4px; flex:1; background:var(--bc-line); border-radius:2px; transition:.3s; }
.cef .prog i.on{ background:var(--red); }
.cef .steplab{ font-size:.66rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim); margin-bottom:1.4rem; }
.cef .fstep{ display:none; }
.cef .fstep.on{ display:block; }
.cef .field-row{ margin-bottom:1.15rem; }
.cef label{ display:block; font-size:.78rem; font-weight:700; letter-spacing:.04em; color:#fff; margin-bottom:.45rem; }
.cef input[type=text], .cef input[type=email], .cef input[type=tel], .cef input[type=date], .cef select, .cef textarea{ width:100%; box-sizing:border-box; background:var(--ink-3); border:1px solid var(--bc-line); border-radius:6px; color:#fff; font-family:var(--sans); font-size:.92rem; padding:.8rem .9rem; min-height:46px; transition:border-color .2s; }
.cef input:focus, .cef select:focus, .cef textarea:focus{ outline:none; border-color:var(--red); }
.cef .bad{ border-color:var(--red) !important; }
.cef textarea{ min-height:130px; resize:vertical; }
.cef .chiprow{ display:flex; flex-wrap:wrap; gap:.5rem; }
.cef .chiprow button{ font-family:var(--sans); font-size:.82rem; font-weight:700; padding:.55rem 1rem; min-height:44px; border:1px solid var(--bc-line); border-radius:999px; background:none; color:var(--text); cursor:pointer; transition:.18s; }
.cef .chiprow button.on{ background:var(--red); border-color:var(--red); color:#fff; }
.cef .two{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:640px){ .cef .two{ grid-template-columns:1fr; } }
.cef .fnav{ display:flex; justify-content:space-between; gap:1rem; margin-top:1.8rem; }
.cef .err{ display:none; color:var(--red); font-size:.8rem; font-weight:700; margin-top:1rem; }
.cef .cef-ok{ display:none; text-align:center; border:1px solid var(--bc-line); border-radius:12px; background:var(--ink-2); padding:clamp(2.2rem,4vw,3.2rem); }
.cef .cef-ok h3{ font-family:"Archivo Expanded",var(--sans); font-weight:800; text-transform:uppercase; font-size:1.5rem; margin:1rem 0 .6rem; color:#fff; }
.cef .cef-ok p{ color:var(--text-dim); max-width:44ch; margin:0 auto; line-height:1.6; }
.cef .cef-ok .ok-ico{ width:64px; height:64px; margin:0 auto; border-radius:50%; background:var(--red); display:grid; place-items:center; }
.cef .cef-ok .ok-ico svg{ width:30px; height:30px; stroke:#fff; stroke-width:2.6; fill:none; }
/* dropzone */
.dz{ border:1.5px dashed var(--bc-line); border-radius:10px; background:rgba(255,255,255,.02); padding:1.6rem 1.2rem; text-align:center; cursor:pointer; transition:border-color .2s, background .2s; }
.dz:hover{ border-color:var(--red); background:rgba(224,52,42,.05); }
.dz svg{ width:28px; height:28px; stroke:var(--text-dim); stroke-width:1.8; fill:none; margin-bottom:.5rem; }
.dz b{ display:block; color:#fff; font-size:.9rem; }
.dz span{ display:block; color:var(--text-dim); font-size:.76rem; margin-top:.3rem; }
/* light form variant (Contact) */
.cef.light label{ color:var(--text-ink); }
.cef.light input, .cef.light select, .cef.light textarea{ background:#fff; border-color:var(--line-ink); color:var(--text-ink); }
.cef.light .steplab{ color:var(--ink-dim); }
/* contact cards */
.ccards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:clamp(2rem,3.6vw,3rem); }
.ccard{ border:1px solid var(--line-ink); border-radius:10px; padding:1.3rem 1.4rem; background:#fff; }
.ccard .cc-k{ font-size:.62rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--red); }
.ccard h4{ margin:.5rem 0 .3rem; font-size:1rem; color:var(--text-ink); }
.ccard p{ margin:0; font-size:.84rem; color:var(--ink-dim); line-height:1.55; }
.ccard a{ font-weight:700; }
@media (max-width:980px){ .ccards{ grid-template-columns:1fr; } }
/* community */
.cpolagrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.6rem,3vw,2.6rem); }
@media (max-width:980px){ .cpolagrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .cpolagrid{ grid-template-columns:1fr; } }
.whyrow{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.why{ border:1px solid var(--bc-line); border-radius:10px; padding:1.3rem 1.4rem; background:var(--ink-2); }
.why .ico{ width:38px; height:38px; display:grid; place-items:center; border-radius:8px; background:rgba(224,52,42,.14); margin-bottom:.8rem; }
.why .ico svg{ width:20px; height:20px; stroke:var(--red); stroke-width:2; fill:none; }
.why h4{ margin:0 0 .35rem; color:#fff; font-size:.98rem; }
.why p{ margin:0; color:var(--text-dim); font-size:.84rem; line-height:1.55; }
@media (max-width:980px){ .whyrow{ grid-template-columns:1fr; } }
/* watch page featured */
.wfeat{ position:relative; border-radius:12px; overflow:hidden; background:#0c0d10; border:1px solid var(--bc-line); }
.wfeat .wf-frame{ position:relative; aspect-ratio:16/8; }
.wfeat .wf-frame image-slot{ position:absolute; inset:0; width:100%; height:100%; }

/* v5 — dark interior section modifier. Watch's video sections and Community's how/why bands use
 * `.frontpage.ink`: a dark band with light heading. Overrides the white .frontpage (main.css:903)
 * and the dark-text .bc-head.ink heading so the video empty-state and grids read on dark. */
.frontpage.ink{ background:#0a0b0d; border-top-color:var(--bc-line); }
.frontpage.ink .bc-head h2{ color:#fff; }
.frontpage.ink .bc-head .more{ color:var(--text-dim); }
.frontpage.ink .bc-head .more:hover{ color:#fff; }

/* Legal page eyebrow (Official Rules / Privacy), matching design_handoff_v2 lg-hero. */
.lg-hero .lg-eyebrow{ color:var(--red); font-size:.72rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; margin:0 0 1rem; }

/* Legal page: emphasized lead line (NO PURCHASE...) and client-fill placeholders (<mark>). */
.lg-body .lg-lead{ background:#faf7f2; border:1px solid var(--line-ink); border-left:3px solid var(--red); border-radius:6px; padding:1rem 1.2rem; margin:0 0 1.8rem; font-size:.9rem; line-height:1.55; }
.lg-body mark{ background:#fff2a8; color:#5a4a00; padding:.05em .3em; border-radius:3px; font-weight:700; }

/* =====================================================================
 * Focus-group build 2026-09-11 (client call 2026-09-10 + ClickUp task)
 * ===================================================================== */

/* Sports dropdown: two columns on desktop so the full sport list fits */
@media (min-width:981px){
  .submenu.submenu-cols{ display:grid; grid-template-columns:repeat(2,minmax(150px,1fr)); column-gap:.3rem; min-width:360px; }
}

/* Story type tag (Editorial / Contest Entry / Community) */
.type-tag{ display:inline-flex; align-self:flex-start; align-items:center; font-size:.58rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; padding:.22rem .6rem; border-radius:999px; border:1px solid var(--line-ink); color:var(--ink-dim); background:#fff; line-height:1.2; }
.type-tag.type-contest{ border-color:var(--red); color:var(--red); }
.type-tag.type-community{ border-color:#b9a57a; color:#7a6634; }
.lead-story .type-tag, .art-hero .type-tag{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.45); color:#fff; margin-top:.8rem; }
.lead-story .type-tag.type-contest, .art-hero .type-tag.type-contest{ border-color:var(--red); }
.rail-card .type-tag{ background:transparent; border-color:var(--bc-line); color:var(--text-dim); margin-top:.35rem; }

/* Watch library on a white band */
.vgrid-light .vcard{ background:#fff; border-color:var(--line-ink); color:var(--text-ink); }
.vgrid-light .vc-body h4{ color:var(--text-ink); }
.vgrid-light .vc-body .vc-meta{ color:var(--ink-dim); }
.vgrid-light .vcard:hover{ box-shadow:0 14px 34px rgba(25,26,29,.12); }

/* Podcast placeholder */
.pod-badge{ display:inline-block; font-size:.66rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:#fff; background:var(--red); padding:.3rem .7rem; border-radius:999px; margin:0 0 1rem; }
.pod-card{ border:1px solid var(--bc-line); border-radius:12px; background:var(--ink-2); padding:clamp(1.4rem,3vw,2.2rem); max-width:760px; }
.pod-card h3{ margin:.2rem 0 .5rem; color:#fff; font-size:clamp(1.2rem,2vw,1.5rem); text-transform:uppercase; font-weight:800; }
.pod-card p{ margin:0; color:var(--text-dim); line-height:1.6; }

/* Partners We've Worked With (replaces the KSNN Says quote band) */
.partners{ background:#fff; color:var(--text-ink); border-top:1px solid var(--line-ink); padding:clamp(2.6rem,4.5vw,4rem) 0; }
.partners .bc-head h2{ color:var(--text-ink); }
.partners .pt-sub{ margin:.4rem 0 0; color:var(--ink-dim); max-width:60ch; }
.partners .pt-row{ display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:1rem; margin-top:1.6rem; }
.partners .pt-item{ min-height:92px; display:grid; place-items:center; border:1px solid var(--line-ink); border-radius:10px; padding:1rem 1.2rem; background:#fff; color:var(--text-ink); text-align:center; }
.partners .pt-item img{ max-height:56px; width:auto; }
.partners .pt-word{ font-family:"Archivo Expanded",var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:.02em; font-size:1rem; }
.partners .pt-cta{ margin:1.4rem 0 0; font-size:.9rem; color:var(--ink-dim); }
.partners .pt-cta a{ color:var(--red); font-weight:700; }

/* The Wrap as a Follow KSNN call to action */
.signoff .follow-btns{ display:flex; flex-wrap:wrap; gap:.8rem; }

/* KSNN Alumni (Meet KSNN) */
.alumni .al-intro{ color:var(--ink-dim); max-width:70ch; margin:.4rem 0 1.6rem; line-height:1.6; }
.alumni .al-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.alumni .al-card{ border:1px solid var(--line-ink); border-radius:10px; overflow:hidden; background:#fff; }
.alumni .al-card img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.alumni .al-body{ padding:1rem 1.1rem 1.2rem; }
.alumni .al-body h4{ margin:0; color:var(--text-ink); }
.alumni .al-now{ display:block; font-size:.66rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--red); margin-top:.3rem; }
.alumni .al-body p{ margin:.5rem 0 0; color:var(--ink-dim); font-size:.86rem; line-height:1.55; }
.alumni .al-empty{ border:1px dashed var(--line-ink); border-radius:10px; padding:1.3rem 1.4rem; color:var(--ink-dim); background:#faf8f4; max-width:760px; }
.alumni .al-empty a{ color:var(--red); font-weight:700; }
@media (max-width:980px){ .alumni .al-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .alumni .al-grid{ grid-template-columns:1fr; } }

/* Header fit after adding Sports + Podcast (7 items): between 981px and 1360px, Contact moves to the
   footer (it is also in the footer nav) and the item gap tightens, so nothing runs together. */
@media (min-width:981px) and (max-width:1360px){
  .nav-contact{ display:none; }
  .nav-links{ gap:1.35rem; }
}
@media (min-width:981px) and (max-width:1100px){
  .nav-links{ gap:.95rem; }
}
/* 981-1100px (small laptops / tablet landscape): seven menu items plus the button need a tighter
   header than the design's 1280px layout. */
@media (min-width:981px) and (max-width:1100px){
  .nav{ padding-left:24px; padding-right:24px; column-gap:16px; }
  .nav-links{ gap:.8rem; }
  .nav-links a{ font-size:.74rem; letter-spacing:.01em; }
  .logo-img{ height:44px; }
  .nav .btn{ padding:.6rem .9rem; font-size:.7rem; }
}

/* Instagram follow card, shown until the @ksnnchannel feed is connected */
.reel-sec .ig-follow{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; margin-top:1.6rem; border:1px solid var(--line-ink); border-radius:12px; background:#fff; padding:1.3rem 1.5rem; max-width:760px; }
.reel-sec .ig-follow .ig-ico{ width:48px; height:48px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(45deg,#f09433,#dc2743,#bc1888); }
.reel-sec .ig-follow .ig-ico svg{ width:24px; height:24px; fill:#fff; }
.reel-sec .ig-follow h3{ margin:0; font-size:1rem; color:var(--text-ink); }
.reel-sec .ig-follow p{ margin:.2rem 0 0; color:var(--ink-dim); font-size:.88rem; max-width:44ch; }
.reel-sec .ig-follow .btn{ margin-left:auto; }
@media (min-width:1101px) and (max-width:1260px){
  .nav-links{ gap:1.05rem; }
  .nav-links a{ font-size:.78rem; letter-spacing:.02em; }
}

/* ---- Contest: judging criteria photos (QA 2026-09-11) ---- */
.crit .value .crit-photo{ aspect-ratio:3/2; overflow:hidden; border-radius:6px; margin:0 0 1.1rem; background:#e9e9ec; }
.crit .value .crit-photo img{ display:block; width:100%; height:100%; object-fit:cover; }

/* =====================================================================
 * More <image-slot> -> <img> compatibility (2026-09-12).
 *
 * These containers were styled for the design's <image-slot> only. A real <img> inside them keeps
 * its width/height attributes (the global rule at the top sets max-width but not height), so a
 * 3:2 photo painted at the card's full height and stretched. Same fix as the v4 block above:
 * take the container's box and cover it.
 * ================================================================== */
.tile img,
.sc-media img,
.vc-media img,
.wfeat .wf-frame img,
.art-body .video-embed img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.art-body .gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---- Podcast page: logo watermark + the longer copy (client copy 2026-09-12) ---- */
.pod-hero .pod-wm{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; opacity:.07; }
.pod-hero .pod-wm img{ width:min(760px,76%); height:auto; }
.pod-hero > .wrap{ position:relative; z-index:1; }
.pod-body{ max-width:72ch; }
.pod-body p{ margin:0 0 1.1rem; color:var(--text-dim); line-height:1.75; }
.pod-body p:last-child{ margin-bottom:0; }
.pod-body strong{ color:#fff; }

/* ---- Homepage YouTube: title under the main tile (2026-09-12) ----
 * The tile is a transparent <button>, so the dark tile background never painted and the old
 * broadcast-style bar showed as a white strip with white text. The frame keeps the dark
 * background and the shadow; the title sits below it in the section's own ink. */
.yt-main{ background:none; box-shadow:none; border-radius:0; overflow:visible; }
.yt-main .yt-frame{ border-radius:12px; overflow:hidden; background:#0c0d10; box-shadow:0 24px 60px rgba(25,26,29,.2); }
.yt-main .yt-main-body{ padding:.9rem .1rem 0; }
.yt-main .yt-main-body h4{ margin:0; font-size:1.02rem; font-weight:700; line-height:1.3; color:var(--text-ink); }
.yt-main .yt-main-body .yt-meta{ display:block; font-size:.74rem; color:var(--ink-dim); margin-top:.3rem; }

/* ---- Sponsor cards: the From the Stands polaroid, with a logo in the photo well ----
 * The client liked that component, so these reuse it (.polaroid + .pol-*) and only change what a
 * logo needs: a white well, the logo contained rather than cropped, and a lighter shadow because
 * this band is light. A card with nothing on the back does not flip. */
.partners{ background:var(--paper); }
.partners .pt-row{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:1.8rem 1.3rem; margin-top:1.9rem; }
.polaroid.spon{ max-width:none; }
.polaroid.spon .pol-face{ background:#fff; border:1px solid var(--line-ink); border-radius:8px; box-shadow:0 10px 24px rgba(25,26,29,.09); }
.polaroid.spon .ph{ aspect-ratio:4/3; background:#fff; display:grid; place-items:center; padding:1rem .9rem; border-bottom:1px solid var(--line-ink); }
.polaroid.spon .pol-front{ padding:0; }
.polaroid.spon .ph img{ position:static; inset:auto; width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; }
.polaroid.spon .ph .pt-word{ font-family:"Archivo Expanded",var(--sans); font-weight:800; text-transform:uppercase; font-size:.92rem; color:#23201b; text-align:center; }
.polaroid.spon .cap{ font-size:1.06rem; padding:.7rem .6rem .8rem; }
.polaroid.spon .cap small{ color:var(--ink-dim); }
.polaroid.spon .pol-back{ padding:1rem 1rem 1.1rem; }
.polaroid.spon .pol-back h4{ font-size:.92rem; }
.polaroid.spon .pol-back p{ font-size:.78rem; }
.polaroid.spon .pt-product{ margin-top:.7rem; border-radius:2px; overflow:hidden; }
.polaroid.spon .pt-product img{ display:block; width:100%; height:72px; object-fit:cover; }
.polaroid.spon.no-flip{ cursor:default; }
.polaroid.spon.no-flip:hover .pol-inner,.polaroid.spon.no-flip:focus-within .pol-inner{ transform:none; }
.partners .pt-tiers{ margin-top:2.4rem; border-top:1px solid var(--line-ink); padding-top:1.6rem; }
.partners .pt-tiers h3{ margin:0 0 1rem; font-family:"Archivo Expanded",var(--sans); font-weight:800; text-transform:uppercase; font-size:1rem; letter-spacing:.04em; color:var(--text-ink); }
.partners .pt-tier-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; }
.partners .pt-tier{ border:1px solid var(--line-ink); border-radius:10px; padding:1rem 1.1rem; background:#fff; }
.partners .pt-level{ display:inline-block; font-size:.62rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#fff; background:var(--red); padding:.2rem .5rem; border-radius:999px; }
.partners .pt-tier h4{ margin:.6rem 0 .35rem; font-size:.92rem; font-weight:800; color:var(--text-ink); }
.partners .pt-tier p{ margin:0; font-size:.82rem; line-height:1.5; color:var(--ink-dim); }

/* ---- Community sections: the explainer headings jump to their filter ---- */
.why h4 a{ color:inherit; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.25); }
.why h4 a:hover,.why h4 a:focus{ color:var(--red); border-bottom-color:var(--red); }
.cpolagrid .polaroid .cap small{ color:var(--red); }

/* =====================================================================
 * v6 — client revision notes 9.23.26
 * ================================================================== */

/* ---- Listen to this story (single story) ---- */
.listen{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem .8rem; margin:0 0 1.8rem; padding:.7rem .8rem; border:1px solid var(--line-ink); border-radius:10px; background:var(--paper); }
.listen[hidden]{ display:none; }
.listen-play{ display:inline-flex; align-items:center; gap:.6rem; font:inherit; font-weight:800; font-size:.86rem; color:#fff; background:var(--red); border:0; border-radius:999px; padding:.6rem 1.1rem .6rem .75rem; cursor:pointer; min-height:44px; }
.listen-play:hover{ background:var(--red-2); }
.listen-play:focus-visible,.listen-stop:focus-visible,.listen-rate select:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }
.listen-play svg{ width:22px; height:22px; fill:currentColor; background:rgba(255,255,255,.18); border-radius:50%; padding:4px; }
.listen .i-pause{ display:none; }
.listen.is-playing .i-play{ display:none; }
.listen.is-playing .i-pause{ display:block; }
.listen-stop{ font:inherit; font-weight:700; font-size:.82rem; color:var(--text-ink); background:#fff; border:1px solid var(--line-ink); border-radius:999px; padding:.55rem 1rem; min-height:44px; cursor:pointer; }
.listen-stop:disabled{ opacity:.45; cursor:default; }
.listen-rate select{ font:inherit; font-size:.82rem; color:var(--text-ink); background:#fff; border:1px solid var(--line-ink); border-radius:999px; padding:.55rem .9rem; min-height:44px; }
.listen-status{ font-size:.8rem; color:var(--ink-dim); }

/* ---- About the author (single story) ---- */
.author-box{ margin:2.4rem 0 0; padding:1.5rem; border:1px solid var(--line-ink); border-radius:12px; background:var(--paper); }
.author-box .ab-label{ margin:0 0 1rem; font-size:.66rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--red); }
.author-box .ab-row{ display:grid; grid-template-columns:72px 1fr; gap:1.1rem; align-items:start; }
.author-box .ab-row + .ab-row{ margin-top:1.2rem; padding-top:1.2rem; border-top:1px solid var(--line-ink); }
.author-box .ab-photo{ width:72px; height:72px; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:var(--ink); color:#fff; font-family:"Archivo Expanded",var(--sans); font-weight:800; font-size:1.3rem; letter-spacing:.02em; }
.author-box .ab-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.author-box .ab-photo.is-logo img{ width:78%; height:auto; object-fit:contain; }
.author-box .ab-name{ margin:0; font-family:"Archivo Expanded",var(--sans); font-weight:800; text-transform:uppercase; font-size:1rem; letter-spacing:-.005em; color:var(--text-ink); line-height:1.15; }
.author-box .ab-role{ margin:.25rem 0 0; font-size:.78rem; font-weight:700; color:var(--ink-dim); }
.author-box .ab-bio{ margin:.55rem 0 0; font-size:.92rem; line-height:1.6; color:#3a3b40; }
@media (max-width:520px){ .author-box .ab-row{ grid-template-columns:56px 1fr; } .author-box .ab-photo{ width:56px; height:56px; font-size:1.05rem; } }

/* ---- Arrow scroll rows (sport filters, sponsors) ---- */
.fgroup-scroll{ flex-wrap:nowrap; position:relative; max-width:100%; min-width:0; }
.filterbar .fgroup-scroll{ flex:1 1 320px; }
.srow-track{ display:flex; gap:.5rem; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; -webkit-overflow-scrolling:touch; min-width:0; padding:2px; scroll-padding:0 44px; }
.srow-track::-webkit-scrollbar{ display:none; }
.srow-track > button{ flex:0 0 auto; white-space:nowrap; }
.srow-arrow{ flex:0 0 auto; display:none; align-items:center; gap:.3rem; min-width:40px; min-height:40px; padding:0 .55rem; border:1px solid var(--line-ink); border-radius:999px; background:#fff; color:var(--text-ink); font:inherit; font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; justify-content:center; transition:border-color .18s, color .18s; }
.srow-arrow svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.srow-arrow:hover:not(:disabled){ border-color:var(--red); color:var(--red); }
.srow-arrow:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }
[data-scroll-row].can-prev .srow-prev,[data-scroll-row].can-next .srow-next{ display:inline-flex; }
/* The "More" cue: heavier weight and brand colour, never blinking (accessibility note in the brief). */
.srow-next{ color:var(--red); border-color:rgba(214,40,40,.45); }
.srow-next .srow-more{ font-weight:900; }
.filterbar.dark .srow-arrow{ background:transparent; border-color:var(--bc-line); color:#fff; }

/* ---- Former KSNN Sponsors (homepage, in the From the Stands slot) ---- */
.sponsors .spon-grid{ grid-template-columns:minmax(220px,1fr) minmax(0,3fr); align-items:center; }
.sponsors .sub-intro .btn{ margin-top:.2rem; }
.spon-row{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.6rem; min-width:0; }
.spon-row .srow-arrow{ background:rgba(255,255,255,.06); border-color:var(--bc-line); color:#fff; width:44px; height:44px; padding:0; }
.spon-row .srow-arrow:disabled{ visibility:hidden; }
.spon-row .srow-prev{ display:inline-flex; }
.spon-row .srow-next{ display:inline-flex; }
.spon-track{ display:flex; gap:1.4rem; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:1rem .4rem 1.6rem; min-width:0; }
.spon-track::-webkit-scrollbar{ display:none; }
.spon-track .polaroid{ flex:0 0 clamp(170px,17vw,210px); scroll-snap-align:start; }
.spon-track .polaroid .cap{ font-family:var(--sans); font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-dim); padding:.75rem .5rem .85rem; }
.spon-track .polaroid.spon .pol-back{ justify-content:center; align-items:flex-start; }
@media (max-width:980px){
	.sponsors .spon-grid{ grid-template-columns:1fr; }
	.spon-row{ grid-template-columns:minmax(0,1fr); }
	.spon-row .srow-arrow,[data-scroll-row].spon-row.can-next .srow-next,[data-scroll-row].spon-row.can-prev .srow-prev{ display:none; }
	.spon-track{ padding-bottom:1.2rem; }
}

/* ---- Return Home (above the footer, every page) ---- */
.return-home{ background:var(--ink); border-top:1px solid var(--bc-line); padding:1.3rem 0; display:flex; justify-content:center; }
.rh-btn{ display:inline-flex; align-items:center; gap:.55rem; font-weight:800; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; padding:.8rem 1.4rem; border:1.5px solid rgba(255,255,255,.35); border-radius:999px; transition:border-color .2s, background .2s; min-height:44px; }
.rh-btn svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.rh-btn:hover{ border-color:var(--red); background:rgba(214,40,40,.12); }
.rh-btn:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }

/* ---- Footer email call to action ---- */
.footer-mail{ display:inline-flex; align-items:center; gap:.6rem; margin-top:1.1rem; padding:.7rem 1rem; border:1px solid var(--bc-line); border-radius:8px; color:var(--text); font-size:.9rem; background:rgba(255,255,255,.03); border-bottom:1px solid var(--bc-line); }
.footer-mail svg{ width:18px; height:18px; stroke:var(--red); fill:none; stroke-width:2; flex:0 0 auto; }
.footer-mail b{ color:#fff; font-weight:700; }
.footer-mail:hover{ border-color:var(--red); color:#fff; }

/* ---- Follow buttons stacked, with network icons ---- */
.follow-stack{ display:flex; flex-direction:column; align-items:stretch; gap:.8rem; max-width:320px; }
.follow-stack .btn{ justify-content:center; }
.follow-stack .btn svg{ width:18px; height:18px; fill:currentColor; stroke:none; }
.signoff .follow-btns.follow-stack{ flex-wrap:nowrap; margin-left:auto; }
.page-hero .ph-cta.follow-stack{ margin-top:1.8rem; }

/* ---- Straight from the 'Gram: Instagram look, distinct from the dark YouTube row ---- */
.ig-sec{ position:relative; background:linear-gradient(180deg,#fff 0%, #fdf4f7 100%); }
.ig-sec::before{ content:""; position:absolute; left:0; right:0; top:0; height:4px; background:linear-gradient(90deg,#f9ce34,#ee2a7b 50%,#6228d7); }
.ig-sec .bc-head .bar{ background:linear-gradient(180deg,#f9ce34,#ee2a7b,#6228d7); }
.reel-sec.ig-sec .ig-follow{ position:relative; border:0; padding:1.5rem 1.7rem; box-shadow:0 18px 44px rgba(98,40,215,.12); background:#fff; border-radius:16px; }
.reel-sec.ig-sec .ig-follow::before{ content:""; position:absolute; inset:0; border-radius:16px; padding:2px; background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
.ig-avatar{ width:72px; height:72px; border-radius:50%; padding:3px; background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7); flex:0 0 auto; }
.ig-avatar > span{ width:100%; height:100%; border-radius:50%; background:#fff; display:grid; place-items:center; border:3px solid #fff; }
.ig-avatar img{ width:80%; height:auto; }
.ig-meta h3{ display:flex; align-items:center; gap:.45rem; }
.ig-ico-sm svg{ width:18px; height:18px; fill:#ee2a7b; display:block; }
.ig-btn{ color:#fff; }
.ig-btn::before{ background:linear-gradient(45deg,#f9ce34,#ee2a7b 55%,#6228d7); }
.ig-btn:hover::before{ filter:brightness(1.08); }
.ig-frame{ border-radius:16px; padding:3px; background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7); }

/* ---- Photo-backed interior heroes (general note: What's Your Story? treatment) ---- */
.page-hero.has-bg,.lg-hero.has-bg{ position:relative; overflow:hidden; min-height:clamp(380px,50vh,560px); display:flex; align-items:flex-end; }
.page-hero .ph-bg,.lg-hero .ph-bg{ position:absolute; inset:0; z-index:0; }
.page-hero .ph-bg img,.lg-hero .ph-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 35%; display:block; }
.page-hero.has-bg::after,.lg-hero.has-bg::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(10,11,13,.62) 0%, rgba(10,11,13,.5) 38%, rgba(10,11,13,.82) 78%, rgba(10,11,13,.97) 100%), linear-gradient(90deg, rgba(10,11,13,.75) 0%, rgba(10,11,13,.2) 70%); }
.page-hero.has-bg > .wrap,.lg-hero.has-bg > .wrap{ position:relative; z-index:2; width:100%; }
.page-hero.has-bg h1,.lg-hero.has-bg h1{ text-shadow:0 4px 30px rgba(0,0,0,.55); }
.page-hero.has-bg .ph-sub{ color:rgba(255,255,255,.92); text-shadow:0 2px 16px rgba(0,0,0,.8); }
.pod-hero .pod-wm{ z-index:0; }

/* ---- "or" between two calls to action ---- */
.btn-or{ align-self:center; font-family:var(--hand); font-size:1.5rem; line-height:1; color:var(--text-dim); padding:0 .2rem; }

/* ---- From the Stands: silhouette cards + athletes in motion ---- */
.cm-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.4rem; }
.cm-card{ border-radius:12px; overflow:hidden; background:#fff; border:1px solid var(--line-ink); box-shadow:0 10px 26px rgba(25,26,29,.07); transition:transform .35s ease, box-shadow .35s ease; }
.cm-link{ display:flex; flex-direction:column; height:100%; color:inherit; }
.cm-media{ position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--ink); }
.cm-media img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1) contrast(1.5) brightness(.55); transform:scale(1.04); transition:filter .55s ease, transform .7s ease; }
.cm-tone{ position:absolute; inset:0; background:linear-gradient(135deg, rgba(214,40,40,.82), rgba(10,11,13,.35)); mix-blend-mode:multiply; transition:opacity .55s ease, transform .7s ease; transform-origin:left center; }
.cm-section{ position:absolute; left:.8rem; top:.8rem; z-index:2; font-size:.62rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:rgba(10,11,13,.72); padding:.3rem .55rem; border-radius:3px; }
.cm-body{ display:flex; flex-direction:column; gap:.45rem; padding:1.05rem 1.1rem 1.2rem; flex:1; }
.cm-sport{ font-size:.62rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--red); }
.cm-body h3{ margin:0; font-family:"Archivo Expanded",var(--sans); font-weight:800; text-transform:uppercase; font-size:1rem; line-height:1.15; color:var(--text-ink); letter-spacing:-.005em; }
.cm-sum{ margin:0; font-size:.86rem; line-height:1.55; color:var(--ink-dim); max-height:0; opacity:0; overflow:hidden; transition:max-height .5s ease, opacity .4s ease; }
.cm-by{ margin-top:auto; font-size:.74rem; font-weight:700; color:var(--ink-dim); }
.cm-card:hover,.cm-card:focus-within{ transform:translateY(-6px); box-shadow:0 22px 44px rgba(25,26,29,.14); }
.cm-card:hover .cm-media img,.cm-card:focus-within .cm-media img{ filter:none; transform:scale(1); }
.cm-card:hover .cm-tone,.cm-card:focus-within .cm-tone{ opacity:0; transform:scaleX(0); }
.cm-card:hover .cm-sum,.cm-card:focus-within .cm-sum{ max-height:8em; opacity:1; }
.cm-link:focus-visible{ outline:3px solid var(--red); outline-offset:-3px; }
@media (hover:none){ .cm-media img{ filter:none; transform:none; } .cm-tone{ opacity:0; } .cm-sum{ max-height:none; opacity:1; } }

.cm-figs{ display:flex; justify-content:center; gap:clamp(.6rem,4vw,3.4rem); margin:0 0 clamp(1.6rem,3vw,2.4rem); }
.cm-fig{ width:clamp(64px,10vw,120px); height:auto; overflow:visible; }
.cm-fig g{ fill:none; stroke:#fff; stroke-width:8; stroke-linecap:round; stroke-linejoin:round; }
.cm-fig g > *{ stroke-dasharray:160; stroke-dashoffset:160; }
.cm-fig .ball{ stroke:var(--red); }
.cm-fig .bat{ stroke:var(--red); }
.cm-figs.in .cm-fig g > *{ animation:cmDraw 1.1s cubic-bezier(.6,.05,.3,1) forwards; }
.cm-figs.in .cm-fig:nth-child(2) g > *{ animation-delay:.2s; }
.cm-figs.in .cm-fig:nth-child(3) g > *{ animation-delay:.4s; }
.cm-figs.in .cm-fig:nth-child(4) g > *{ animation-delay:.6s; }
.cm-figs.in .cm-fig{ animation:cmFloat 3.2s ease-in-out 1.8s infinite; }
.cm-figs.in .cm-fig:nth-child(even){ animation-delay:2.4s; }
@keyframes cmDraw{ to{ stroke-dashoffset:0; } }
@keyframes cmFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
@media (prefers-reduced-motion:reduce){
	.cm-fig g > *,.cm-figs.in .cm-fig g > *,.cm-figs.in .cm-fig:nth-child(n) g > *{ stroke-dashoffset:0; animation:none; }
	.cm-figs.in .cm-fig{ animation:none; }
	.cm-card,.cm-media img,.cm-tone,.cm-sum{ transition:none; }
}

/* ---- Meet KSNN: timeline + David Osokow video ---- */
.tl-layout{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:clamp(1.6rem,4vw,3.4rem); align-items:start; }
.tl-layout .tl-rows{ max-width:none; }
.tl-video{ margin:0; position:sticky; top:110px; }
.tl-vframe{ position:relative; display:block; width:100%; aspect-ratio:16/9; border:0; padding:0; border-radius:12px; overflow:hidden; background:#000; cursor:pointer; box-shadow:0 30px 60px rgba(0,0,0,.45); }
.tl-vframe img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tl-vframe .yt-play{ position:absolute; inset:0; display:grid; place-items:center; }
.tl-vframe .yt-play i{ width:74px; height:52px; border-radius:14px; background:var(--red); display:grid; place-items:center; box-shadow:0 10px 30px rgba(0,0,0,.45); }
.tl-vframe .yt-play svg{ width:24px; height:24px; fill:#fff; }
.tl-vframe:focus-visible{ outline:3px solid var(--red); outline-offset:3px; }
.tl-video figcaption{ margin-top:.8rem; font-size:.84rem; color:var(--text-dim); }
@media (max-width:900px){ .tl-layout{ grid-template-columns:1fr; } .tl-video{ position:static; order:-1; } }

/* ---- Contest: video first in the hero ---- */
.ct-hero .wrap > .ct-hero-video,.ct-hero .wrap > .ct-hero-copy{ grid-column:1 / -1; }
.ct-hero-video .tv{ margin:0; max-width:none; }
.ct-vlabel{ margin:0 0 .8rem; font-size:.72rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--red); }
.ct-hero-copy .h-sub{ margin-top:0; }
.ct-hero .aw-shield{ width:clamp(130px,14vw,190px); }

/* ---- Podcast: red logo watermark, more prominent ---- */
.pod-hero .pod-wm{ opacity:.28; }
.pod-hero .pod-wm img{ width:min(1000px,92%); }

/* ---- v6 polish after visual review ---- */
/* Sponsors: room for the tilted cards and the hover lift; fade the cut-off edge while there is more to scroll. */
.spon-track{ padding-top:1.5rem; padding-bottom:2rem; }
.spon-row.can-next .spon-track{ -webkit-mask-image:linear-gradient(90deg,#000 0,#000 86%,transparent 100%); mask-image:linear-gradient(90deg,#000 0,#000 86%,transparent 100%); }
.spon-row.can-prev.can-next .spon-track{ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 86%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 86%,transparent 100%); }
.spon-row.can-prev:not(.can-next) .spon-track{ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%); mask-image:linear-gradient(90deg,transparent 0,#000 10%); }
/* Meet KSNN: on wide screens the photo sits right of the copy, so faces are not behind the text. */
@media (min-width:1100px){
	/* Photo sits right of the copy, and its left edge fades into the dark band (review 2026-09-28: the
	   first pass cut the photo off with a hard vertical edge instead of the original overlay look). */
	.meet .m-bg{ left:24%; -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 14%,#000 42%); mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 14%,#000 42%); }
	.meet .m-bg img{ object-position:40% 30%; }
}
/* From the Stands cards: a readable duotone at rest (the first pass was too dark), and a designed
   fallback for stories without a photo. */
.cm-media img{ filter:grayscale(1) contrast(1.15) brightness(.92); }
.cm-tone{ background:linear-gradient(135deg, rgba(214,40,40,.62), rgba(214,40,40,.28) 60%, rgba(10,11,13,.18)); }
.cm-noimg{ position:absolute; inset:0; display:grid; place-items:center; background:radial-gradient(120% 90% at 30% 20%, #23252b 0%, #0d0e10 70%); }
.cm-media .cm-noimg img{ width:46%; height:auto; filter:none; transform:none; opacity:.9; }
.cm-card:hover .cm-noimg img,.cm-card:focus-within .cm-noimg img{ opacity:1; }
/* Mobile review fixes */
.spon-track .polaroid .cap{ overflow-wrap:anywhere; hyphens:auto; }
@media (max-width:980px){
	.signoff .follow-btns.follow-stack{ margin-left:0; max-width:none; width:100%; }
}
@media (max-width:600px){
	.cta-band .btns{ flex-direction:column; align-items:center; gap:.6rem; }
	.cta-band .btns .btn-or{ padding:.1rem 0; }
	.page-hero .ph-cta.follow-stack{ max-width:none; }
}
@media (max-width:700px){
	/* Meet KSNN on phones: copy spans the full width, so the photo needs an even overlay for legibility. */
	.meet::after{ background:linear-gradient(180deg, rgba(10,11,13,.62) 0%, rgba(10,11,13,.72) 45%, rgba(10,11,13,.9) 100%); }
}

/* ---- Podcast trailer (Podcast page + Watch Podcast row) ---- */
.pod-trailer{ position:relative; width:100%; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#000; box-shadow:0 30px 60px rgba(0,0,0,.45); border:1px solid var(--bc-line); }
.pod-trailer video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.pod-trailer-sec .pod-trailer{ max-width:1080px; }
.pod-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:clamp(1.2rem,3vw,2.4rem); align-items:center; }
.pod-row .pod-card{ height:100%; display:flex; flex-direction:column; justify-content:center; margin:0; }
.pod-row .pod-card .pol-read{ margin-top:1.2rem; }
@media (max-width:860px){ .pod-row{ grid-template-columns:1fr; } .pod-row .pod-trailer{ order:-1; } }
.pod-row .pod-card .pod-badge,.pod-row .pod-card .pol-read{ align-self:flex-start; }

/* Listen bar speed select: custom chevron so the arrow sits inside the pill, vertically centred. */
.listen-rate select{ -webkit-appearance:none; appearance:none; padding:.55rem 2.4rem .55rem 1rem; line-height:1.2; cursor:pointer;
	background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23191a1d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .9rem center / 14px 14px; }
.listen-rate select::-ms-expand{ display:none; }

/* Podcast trailer: large centred play button over the cover until it plays (review 2026-09-28). */
.pod-play{ position:absolute; inset:0; z-index:2; display:grid; place-items:center; border:0; padding:0; margin:0; background:linear-gradient(180deg,rgba(10,11,13,.05),rgba(10,11,13,.35)); cursor:pointer; }
.pod-play i{ width:clamp(64px,8vw,92px); height:clamp(64px,8vw,92px); border-radius:50%; background:var(--red); display:grid; place-items:center; box-shadow:0 14px 40px rgba(0,0,0,.5), 0 0 0 8px rgba(214,40,40,.25); transition:transform .2s ease, background .2s ease; }
.pod-play svg{ width:40%; height:40%; fill:#fff; margin-left:8%; }
.pod-play:hover i,.pod-play:focus-visible i{ transform:scale(1.06); background:var(--red-2); }
.pod-play:focus-visible{ outline:3px solid #fff; outline-offset:-6px; }
.pod-play .pod-play-label{ position:absolute; left:50%; bottom:1.1rem; transform:translateX(-50%); font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.7); white-space:nowrap; }
.pod-trailer.is-playing .pod-play{ display:none; }

/* Story hero: always clear the fixed header, however long the headline and summary are (review
   2026-09-28: a long title pushed the tags up under the nav). The hero grows downward instead. */
.art-hero{ padding-top:calc(104px + clamp(1.6rem,3vw,2.8rem)); }
@media (max-width:980px){ .art-hero{ padding-top:calc(88px + 1.6rem); } }
.art-hero h1.is-long{ font-size:clamp(1.9rem,4vw,3.2rem); max-width:22ch; }
.art-hero h1.is-xlong{ font-size:clamp(1.7rem,3.4vw,2.7rem); max-width:26ch; }

/* Contest phase notice + closed-state card (QA 2026-09-28) */
.ct-phase{ display:inline-flex; align-items:center; gap:.6rem; margin:1.3rem 0 0; padding:.6rem .95rem; border-radius:6px; font-size:.9rem; font-weight:600; line-height:1.4; color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); max-width:60ch; }
.ct-phase::before{ content:""; width:9px; height:9px; border-radius:50%; background:#9aa0a6; flex:0 0 auto; }
.ct-phase-open::before{ background:#2ecc71; box-shadow:0 0 0 4px rgba(46,204,113,.2); }
.ct-phase-upcoming::before{ background:#f5b301; }
.ct-phase-ended::before,.ct-phase-off::before,.ct-phase-none::before{ background:var(--red); }
.form-card.ct-closed{ text-align:center; padding:clamp(1.8rem,4vw,2.8rem); background:var(--ink-2); border:1px solid var(--bc-line); border-radius:8px; }
.ct-closed .ct-closed-k{ margin:0 auto .6rem; font-size:.7rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--red); }
.ct-closed h3{ margin:0 0 .7rem; font-family:"Archivo Expanded",var(--sans); font-weight:800; text-transform:uppercase; color:#fff; font-size:clamp(1.3rem,2.4vw,1.8rem); }
.ct-closed p{ color:var(--text-dim); margin:0 auto 1.3rem; max-width:52ch; line-height:1.6; }
.ct-closed p:last-child{ margin-bottom:0; }

/* ---- Site search (client request, Rocky 2026-09-29) -------------------------------------------- */
.screen-reader-text{ border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute !important; width:1px; word-wrap:normal !important; }
.screen-reader-text:focus{ background:#fff; color:var(--text-ink); clip:auto !important; clip-path:none; height:auto; width:auto; left:8px; top:8px; padding:.8rem 1.1rem; z-index:100000; font-weight:700; border-radius:4px; }
.nav-search-btn{ display:inline-grid; place-items:center; width:40px; height:40px; padding:0; border:1.5px solid rgba(255,255,255,.28); border-radius:50%; background:transparent; color:var(--text); cursor:pointer; transition:border-color .2s ease, background .2s ease; flex:0 0 auto; }
.nav-search-btn:hover,.nav-search-btn[aria-expanded="true"]{ border-color:#fff; background:rgba(255,255,255,.08); }
.nav-search-btn:focus-visible,.nav-search-close:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }
.nav-search-btn svg{ width:18px; height:18px; stroke:currentColor; stroke-width:2.2; fill:none; stroke-linecap:round; }
.nav-search-btn-m{ display:none; }
.nav-search{ position:absolute; top:100%; left:0; right:0; background:rgba(13,14,16,.97); backdrop-filter:blur(12px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:1rem var(--pad); box-shadow:0 18px 40px rgba(0,0,0,.35); }
.nav-search[hidden]{ display:none; }
.nav-search-in{ max-width:860px; margin:0 auto; display:flex; align-items:center; gap:.8rem; }
.nav-search-in .srch-form{ flex:1; min-width:0; }
.nav-search-close{ display:grid; place-items:center; width:40px; height:40px; border:0; background:none; color:rgba(255,255,255,.7); cursor:pointer; flex:0 0 auto; }
.nav-search-close:hover{ color:#fff; }
.nav-search-close svg{ width:20px; height:20px; stroke:currentColor; stroke-width:2.2; fill:none; stroke-linecap:round; }
.srch-form{ position:relative; display:flex; align-items:stretch; gap:.6rem; width:100%; }
.srch-field{ position:relative; flex:1; min-width:0; display:flex; align-items:stretch; isolation:isolate; }
.srch-field::before{ content:""; position:absolute; inset:0; z-index:-1; transform:skewX(-11deg); background:rgba(255,255,255,.07); border:1.5px solid rgba(255,255,255,.22); border-radius:2px; transition:border-color .2s ease, background .2s ease; }
.srch-field:focus-within::before{ border-color:var(--red); background:rgba(255,255,255,.1); }
.srch-form .srch-ico{ position:absolute; left:1.1rem; top:50%; transform:translateY(-50%); width:18px; height:18px; stroke:rgba(255,255,255,.55); stroke-width:2.2; fill:none; stroke-linecap:round; pointer-events:none; }
.srch-form input[type="search"]{ flex:1; min-width:0; font:500 1rem/1.3 var(--sans); color:#fff; background:transparent; border:0; border-radius:0; padding:.85rem 1.1rem .85rem 2.9rem; -webkit-appearance:none; appearance:none; }
.srch-form input[type="search"]::placeholder{ color:rgba(255,255,255,.5); }
.srch-form input[type="search"]:focus{ outline:none; } /* focus shows on the slanted box (.srch-field:focus-within) */
.srch-form input[type="search"]::-webkit-search-cancel-button{ filter:grayscale(1) invert(1); opacity:.55; cursor:pointer; }
.srch-form .btn{ padding:.85rem 1.4rem; flex:0 0 auto; }
.srch-form-lg{ max-width:760px; margin-top:1.6rem; }
.srch-form-lg input[type="search"]{ font-size:1.08rem; padding-top:1rem; padding-bottom:1rem; }
.srch-count{ margin:1rem 0 0; color:rgba(255,255,255,.72); font-size:.95rem; }
.srch-results{ min-height:34vh; }
.srch-prompt{ text-align:center; color:var(--ink-dim); padding:2.4rem 0; margin:0; }
.srch-sports{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin-bottom:1.6rem; }
.srch-sports .fl{ font-size:.66rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); margin-right:.2rem; }
.srch-chip{ display:inline-flex; align-items:center; padding:.5rem .95rem; border:1.5px solid var(--line-ink); border-radius:999px; font-size:.78rem; font-weight:700; color:var(--text-ink); transition:border-color .2s, color .2s; }
.srch-chip:hover{ border-color:var(--red); color:var(--red); }
.sr-page{ border-top:3px solid var(--red); }
.sr-page .sc-body{ padding-top:1.2rem; }
.srch-pager{ display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem; margin-top:2.2rem; }
.srch-pager .page-numbers{ min-width:40px; height:40px; padding:0 .8rem; display:inline-grid; place-items:center; border:1.5px solid var(--line-ink); border-radius:2px; font-size:.8rem; font-weight:700; color:var(--text-ink); }
.srch-pager a.page-numbers:hover{ border-color:var(--red); color:var(--red); }
.srch-pager .page-numbers.current{ background:var(--red); border-color:var(--red); color:#fff; }
.srch-pager .page-numbers.dots{ border-color:transparent; }
.srch-help{ text-align:center; color:var(--ink-dim); font-size:.92rem; margin:2.4rem auto 0; max-width:60ch; line-height:1.6; }
.srch-help a,.srch-empty-msg a{ color:var(--red); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.srch-empty{ max-width:640px; margin:0 auto; text-align:center; border:1.5px dashed var(--line-ink); border-radius:12px; padding:clamp(2rem,5vw,3.2rem) clamp(1.2rem,4vw,2.6rem); }
.srch-empty-k{ margin:0 0 .7rem; font-size:.7rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--red); }
.srch-empty-msg{ margin:0 0 1.6rem; font-size:clamp(1.05rem,1.8vw,1.25rem); line-height:1.55; color:var(--text-ink); font-weight:600; }
/* The header grid centres the menu, so the right column fills first: a column gap keeps the search button
   off the last menu item (measured 0px apart at 1180-1500px without it). */
@media (min-width:1101px){ .nav{ column-gap:clamp(14px,1.4vw,24px); } }
@media (max-width:980px){
  .nav-cta .nav-search-btn{ display:none; }
  .nav-search-btn-m{ display:inline-grid; order:2; margin-left:auto; margin-right:.6rem; width:38px; height:38px; }
  .nav-search{ padding:.8rem 20px; }
}
@media (max-width:600px){
  .srch-form .btn{ padding:.85rem 1rem; letter-spacing:.08em; }
  .nav-search-in{ gap:.4rem; }
}

/* ---- Header fit (2026-09-29) ---------------------------------------------------------------------
   Seven menu items + search + "Enter the Contest" do not fit a desktop bar below ~1180px (the button
   wrapped to two or three lines at 990-1536px). The button never wraps; the separate "Contact" text
   link shows only on wide screens (it is in the footer); 981-1280px uses the phone header (logo,
   search, menu button; at 1181-1280 the menu sat 17px from the search button); 1281-1366px tightens
   the menu gap. app.js / app-v3.js use the same 1280px. */
.nav .btn{ white-space:nowrap; }
@media (max-width:1679px){ .nav-cta .nav-contact{ display:none; } }
@media (min-width:1281px) and (max-width:1366px){ .nav-links{ gap:1.05rem; } }
@media (min-width:1281px){ .nav{ column-gap:clamp(24px,2vw,36px); } } /* menu-to-search spacing = this gap (grid centres the menu) */
@media (min-width:981px) and (max-width:1280px){
  .nav{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; grid-template-columns:none; column-gap:0; padding-left:var(--pad); padding-right:var(--pad); }
  .logo-lockup{ order:1; }
  .logo-img{ height:52px; } .nav.scrolled .logo-img{ height:46px; }
  .hamburger{ display:block; order:2; }
  .nav-cta .nav-search-btn{ display:none; }
  .nav-search-btn-m{ display:inline-grid; order:2; margin-left:auto; margin-right:.6rem; width:38px; height:38px; }
  .nav-collapse{ display:none; order:3; flex-basis:100%; }
  .nav.open{ background:rgba(13,14,16,.97); backdrop-filter:blur(12px); border-bottom-color:var(--line); }
  .nav.open .nav-collapse{ display:flex; flex-direction:column; align-items:stretch; gap:1.3rem; margin-top:1rem; padding-top:1.2rem; border-top:1px solid var(--line); }
  .nav.open .nav-links{ display:flex; flex-direction:column; gap:1.1rem; }
  .nav-links a{ font-size:.82rem; letter-spacing:.04em; display:inline-flex; align-items:center; min-height:44px; }
  .nav.open .nav-cta{ display:flex; flex-direction:column; align-items:stretch; gap:.9rem; }
  .nav.open .nav-cta .btn-red{ justify-content:center; padding:.7rem 1.25rem; font-size:.82rem; }
  .submenu{ position:static; min-width:0; opacity:1; visibility:visible; transform:none; background:none; backdrop-filter:none; border:0; border-left:2px solid var(--red); border-radius:0; box-shadow:none; padding:.2rem 0 .4rem .9rem; margin:.4rem 0 .2rem; display:none; }
  .nav-links .has-sub.open .submenu{ display:block; }
  .nav-links .has-sub.open .caret{ transform:rotate(180deg); }
  .sub-row{ padding:.45rem .3rem; }
  .nav-search{ padding:.8rem var(--pad); }
}
/* Logged-in admins: keep the fixed header below the WordPress toolbar (it covered the logo). */
@media (min-width:783px){ .admin-bar .nav{ top:32px; } }
@media (min-width:601px) and (max-width:782px){ .admin-bar .nav{ top:46px; } }

/* ---- Instagram feed: Smash Balloon inside the gradient frame (2026-10-01) -------------------------
   The section already has its own heading and "View on Instagram" link, so the plugin's header and
   Load More / Follow buttons are hidden. Square tiles: 4 across (8 posts) on desktop, 3 on tablet,
   2 on phones (6 posts). !important is needed because the plugin sizes the grid with an ID selector
   and inline styles set from its own settings; scoped to .ig-frame so nothing else is touched. */
.ig-frame #sb_instagram{ background:#fff; border-radius:13px; padding:12px !important; width:100% !important; max-width:none !important; box-sizing:border-box; }
.ig-frame #sb_instagram .sb_instagram_header,
.ig-frame #sb_instagram #sbi_load,
.ig-frame .sb_instagram_header{ display:none !important; }
.ig-frame #sb_instagram #sbi_images{ display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:10px !important; padding:0 !important; width:100% !important; float:none !important; }
.ig-frame #sb_instagram #sbi_images .sbi_item{ width:auto !important; max-width:none !important; padding:0 !important; margin:0 !important; float:none !important; display:block !important; opacity:1 !important; }
.ig-frame #sb_instagram #sbi_images .sbi_item:nth-child(n+9){ display:none !important; }
.ig-frame #sb_instagram .sbi_photo_wrap{ position:relative; border-radius:8px; overflow:hidden; background:#f1ecf4; }
.ig-frame #sb_instagram .sbi_photo{ display:block !important; position:relative; aspect-ratio:1/1; height:auto !important; background-size:cover; background-position:center; transition:transform .35s ease; }
.ig-frame #sb_instagram .sbi_photo img{ position:absolute; inset:0; width:100% !important; height:100% !important; object-fit:cover; }
.ig-frame #sb_instagram .sbi_item:hover .sbi_photo{ transform:scale(1.04); }
.ig-frame #sb_instagram .sbi_photo:focus-visible{ outline:3px solid var(--red); outline-offset:-3px; }
@media (prefers-reduced-motion:reduce){ .ig-frame #sb_instagram .sbi_photo{ transition:none; } .ig-frame #sb_instagram .sbi_item:hover .sbi_photo{ transform:none; } }
@media (max-width:980px){ .ig-frame #sb_instagram #sbi_images{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } .ig-frame #sb_instagram #sbi_images .sbi_item:nth-child(n+7){ display:none !important; } }
@media (max-width:600px){ .ig-frame #sb_instagram{ padding:8px !important; } .ig-frame #sb_instagram #sbi_images{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:6px !important; } }

/* ---- Listen bar: uploaded recording (2026-10-01) ------------------------------------------------- */
.listen.is-audio{ gap:.6rem 1rem; }
.listen-track{ display:flex; align-items:center; gap:.7rem; flex:1 1 220px; min-width:0; }
.listen-seek{ --p:0%; flex:1; min-width:0; height:6px; margin:0; -webkit-appearance:none; appearance:none; background:linear-gradient(90deg,var(--red) var(--p),rgba(25,26,29,.16) var(--p)); border-radius:999px; cursor:pointer; }
.listen-seek::-webkit-slider-thumb{ -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:var(--red); border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.25); }
.listen-seek::-moz-range-thumb{ width:14px; height:14px; border-radius:50%; background:var(--red); border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.25); }
.listen-seek:focus-visible{ outline:2px solid var(--red); outline-offset:4px; }
.listen-time{ font-size:.8rem; font-variant-numeric:tabular-nums; color:var(--ink-dim); white-space:nowrap; }
.listen.is-audio .listen-status{ flex-basis:100%; font-weight:600; color:var(--text-ink); }
@media (max-width:600px){ .listen.is-audio .listen-track{ flex-basis:100%; order:3; } .listen.is-audio .listen-status{ order:4; } }