/* ============================================================
   CIRCLE 6 — site.css
   Components. Requires tokens.css loaded first.
   Sections: topbar, hero/flyer, ticker, feed cards, shows,
   merch, categories, footer, article, event, show hub,
   archive, 404, responsive.
   ============================================================ */

/* ---------- Topbar ---------- */
.topbar { position: sticky; top: 0; z-index: 50; background: var(--ink); border-bottom: var(--border); }
.topbar .wrap { display: flex; align-items: center; gap: 22px; height: 64px; }
.logo { font-family: var(--font-display); font-size: 30px; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.logo img { filter: invert(1); } /* brand art is black-on-transparent; topbar is ink */
.logo .six { background: var(--hazard); color: var(--ink); padding: 0 8px; transform: rotate(-4deg); display: inline-block; }
.nav { display: flex; gap: 20px; margin-left: auto; align-items: center; font-weight: 800; text-transform: uppercase; font-size: 13px; letter-spacing: .08em; }
.nav a { padding: 6px 2px; border-bottom: 3px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-color: var(--hazard); }
.live-btn { background: var(--vhs); color: var(--bone); font-family: var(--font-display); font-size: 15px; text-transform: uppercase; padding: 9px 16px; letter-spacing: .06em; display: flex; align-items: center; gap: 8px; }
.live-btn .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--bone); animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.burger { display: none; background: none; border: 2px solid var(--bone); color: var(--bone); font-family: var(--font-display); padding: 6px 10px; text-transform: uppercase; cursor: pointer; }
.mobile-nav { display: none; border-bottom: var(--border); background: var(--ink-2); }
.mobile-nav.open { display: block; }
.mobile-nav a { display: block; padding: 14px 20px; font-weight: 800; text-transform: uppercase; font-size: 14px; letter-spacing: .08em; border-top: 1px solid rgba(85,80,74,.4); }
/* Mobile on-air row: readable off-state, VHS-blue chip only when actually live */
.mnav-onair { font-family: var(--font-display); color: var(--bone-dim); }
.mnav-onair.is-live { background: var(--vhs); color: var(--bone); }

/* ---------- Hero + flyer ---------- */
.hero { position: relative; overflow: hidden; padding: 64px 0 90px; border-bottom: var(--border);
  background: radial-gradient(rgba(232,226,214,.05) 1px, transparent 1px), linear-gradient(180deg,#161210,var(--ink) 70%);
  background-size: 5px 5px, 100% 100%; }
.hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.hero-copy h1 { font-family: var(--font-display); font-size: clamp(52px,7.5vw,104px); line-height: .9; text-transform: uppercase; margin: 14px 0 18px; }
.hero-copy p { max-width: 480px; color: var(--bone-dim-2); font-size: 17px; }
.hero-ctas { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; }

.flyer { background: var(--bone); color: var(--ink); padding: 36px 30px 30px; transform: rotate(-2deg); border: 2px solid var(--ink);
  box-shadow: 10px 10px 0 var(--hazard); position: relative; max-width: 430px; justify-self: center; width: 100%; }
.flyer::before, .flyer::after { content: ""; position: absolute; width: 78px; height: 24px; background: rgba(85,80,74,.5); top: -12px; }
.flyer::before { left: 26px; transform: rotate(-5deg); }
.flyer::after { right: 26px; transform: rotate(6deg); }
.flyer .fk { font-family: var(--font-zine); font-size: 13px; text-transform: uppercase; letter-spacing: .15em; color: var(--blood); }
.flyer .fh { font-family: var(--font-display); font-size: clamp(58px,7vw,86px); text-transform: uppercase; line-height: .88; margin: 10px 0 6px; }
.flyer .fsub { font-weight: 800; text-transform: uppercase; font-size: 14px; letter-spacing: .09em; }
.flyer .fmeta { display: flex; gap: 10px; margin: 18px 0 6px; flex-wrap: wrap; }
.flyer .fmeta span { border: 2px solid var(--ink); font-family: var(--font-display); font-size: 14px; padding: 4px 10px; text-transform: uppercase; }
.countdown { display: flex; gap: 10px; margin-top: 16px; }
.countdown div { background: var(--ink); color: var(--bone); text-align: center; padding: 8px 0; flex: 1; }
.countdown b { font-family: var(--font-display); font-size: 26px; display: block; line-height: 1; }
.countdown small { font-family: var(--font-zine); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.flyer .cta { display: block; text-align: center; margin-top: 18px; background: var(--blood); color: var(--bone); font-family: var(--font-display);
  text-transform: uppercase; padding: 13px; font-size: 20px; letter-spacing: .05em; }
.flyer .cta:hover { background: var(--blood-hot); }

/* ---------- Ticker ---------- */
.ticker { border-top: var(--border); border-bottom: var(--border);
  background: repeating-linear-gradient(-45deg, var(--hazard) 0 26px, var(--ink) 26px 52px); padding: 5px 0; }
.ticker-inner { background: var(--ink); overflow: hidden; white-space: nowrap; border-top: var(--border); border-bottom: var(--border); }
.ticker-track { display: inline-block; padding: 10px 0; animation: scroll 32s linear infinite; font-family: var(--font-display);
  text-transform: uppercase; font-size: 16px; letter-spacing: .04em; }
.ticker-track span { margin: 0 26px; }
.ticker-track .sep { color: var(--hazard); }
@keyframes scroll { to { transform: translateX(-50%); } }

/* ---------- Feed cards ---------- */
.feed { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-auto-rows: auto; gap: 22px; }
.post { border: var(--border); background: var(--ink-2); position: relative; display: flex; flex-direction: column; }
.post:hover { transform: translateY(-3px); transition: transform .15s; }
.post .thumb { aspect-ratio: 16/9; position: relative; overflow: hidden; border-bottom: var(--border); background: linear-gradient(135deg,#2a1310,var(--ink) 65%); }
.post .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.post .thumb .art { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); text-transform: uppercase; color: rgba(232,226,214,.14); font-size: 54px; line-height: .9; text-align: center; padding: 10px; }
.post .thumb .ep-badge { /* episode number as a sticker on the thumbnail, slap-style but inside the frame */
  position: absolute; top: 8px; left: 8px; z-index: 2;
  background: var(--hazard); color: var(--ink);
  font-family: var(--font-display); font-size: 12px; text-transform: uppercase;
  padding: 3px 9px; letter-spacing: .05em; transform: rotate(-3deg);
  box-shadow: 2px 2px 0 var(--ink); }
.post .body { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post .kick { font-size: 12px; letter-spacing: .12em; }
.post h3 { font-family: var(--font-display); text-transform: uppercase; font-size: 24px; line-height: 1.02; }
.post h3 a:hover { color: var(--hazard); }
.post p { color: var(--bone-dim); font-size: 14px; }
.post .byline { margin-top: auto; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--tape); }
.post .byline b { color: var(--bone); }
.post--lead { grid-row: span 2; }
.post--lead h3 { font-size: clamp(30px,3.4vw,44px); }
.post--lead .thumb { aspect-ratio: 4/3; }

/* ---------- Shows rail ---------- */
.shows { background: var(--bone); color: var(--ink); border-top: var(--border); }
.shows .sec-head h2 { color: var(--ink); }
.shows .sec-head .note { color: var(--blood); }
.show-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 22px; }
.show-card { border: 2px solid var(--ink); background: var(--bone); padding: 26px; position: relative; box-shadow: 6px 6px 0 var(--ink);
  color: var(--ink); /* bone card must not inherit the dark page's bone text (hub pages) */ }
.show-card:nth-child(2) { transform: rotate(1deg); }
.show-card:nth-child(3) { transform: rotate(-1deg); }
.show-card .tag { font-family: var(--font-zine); font-size: 12px; text-transform: uppercase; letter-spacing: .13em; color: var(--blood); }
.show-card h3 { font-family: var(--font-display); font-size: 30px; text-transform: uppercase; line-height: .95; margin: 8px 0; }
.show-card p { font-size: 14px; color: var(--ink-on-bone); }
.show-card .watch { display: inline-block; margin-top: 14px; font-family: var(--font-display); text-transform: uppercase; background: var(--ink); color: var(--bone); padding: 8px 18px; font-size: 15px; }
.show-card .watch:hover { background: var(--hazard); color: var(--ink); }

/* ---------- Merch strip ---------- */
.merch { background: var(--hazard); color: var(--ink); border-top: 2px solid var(--ink); border-bottom: var(--border); }
.merch .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.merch h2 { font-family: var(--font-display); font-size: clamp(44px,6vw,84px); text-transform: uppercase; line-height: .9; }
.merch p { font-weight: 600; max-width: 440px; margin-top: 14px; }
.merch .btn { margin-top: 24px; background: var(--ink); color: var(--hazard); box-shadow: var(--shadow-hard) var(--ink-2); }
.shirt { background: var(--ink); border: 2px solid var(--ink); padding: 40px; text-align: center; transform: rotate(2deg); box-shadow: 8px 8px 0 var(--ink-2); }
.shirt .tee { font-family: var(--font-display); color: var(--hazard); font-size: clamp(40px,4.5vw,58px); text-transform: uppercase; line-height: .9; }
.shirt .lbl { font-family: var(--font-zine); color: var(--bone); font-size: 12px; text-transform: uppercase; letter-spacing: .14em; margin-top: 16px; }

/* ---------- Category tiles ---------- */
.cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } /* 8 tiles = clean 2×4 */
.cat { border: var(--border); padding: 26px 18px; font-family: var(--font-display); text-transform: uppercase; font-size: 22px; position: relative; background: var(--ink-2); }
.cat small { display: block; font-family: var(--font-zine); font-size: 11px; color: var(--hazard); letter-spacing: .12em; margin-top: 6px; }
.cat:hover { background: var(--bone); color: var(--ink); }

/* ---------- Footer ---------- */
.footer { border-top: var(--border); padding: 64px 0 40px; background: var(--ink-2); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.join h2 { font-family: var(--font-display); font-size: clamp(34px,4.5vw,52px); text-transform: uppercase; line-height: .95; }
.join p { color: var(--bone-dim); font-size: 14px; margin: 12px 0 18px; max-width: 380px; }
.join .row { display: flex; max-width: 420px; }
.join input { flex: 1; background: var(--ink); border: 2px solid var(--bone); color: var(--bone); padding: 12px 14px; font-family: var(--font-body); font-size: 15px; min-width: 0; }
.join button { background: var(--hazard); color: var(--ink); border: 2px solid var(--hazard); font-family: var(--font-display); text-transform: uppercase; padding: 0 22px; font-size: 16px; cursor: pointer; }
.join button:hover { background: var(--bone); border-color: var(--bone); }
.fcol h4 { font-family: var(--font-zine); font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--hazard); margin-bottom: 14px; }
.fcol a { display: block; font-weight: 600; text-transform: uppercase; font-size: 13px; letter-spacing: .06em; padding: 5px 0; color: var(--bone-dim-2); }
.fcol a:hover { color: var(--hazard); }
.legal { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--tape); font-family: var(--font-zine); font-size: 11px;
  color: var(--tape); text-transform: uppercase; letter-spacing: .1em; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

/* ---------- Article template ---------- */
.article-head { padding: 60px 0 34px; border-bottom: var(--border); }
.article-head .cat-link:hover { color: var(--bone); }
.article-head h1 { font-family: var(--font-display); font-size: clamp(38px,5.5vw,72px); text-transform: uppercase; line-height: .95; margin: 14px 0 18px; max-width: 900px; }
.article-meta { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--tape); }
.article-meta b { color: var(--bone); }
.article-hero { border-bottom: var(--border); background: linear-gradient(135deg,#2a1310,var(--ink) 65%); }
.article-hero .frame { aspect-ratio: 21/9; position: relative; }
.article-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.article-hero .credit { font-family: var(--font-zine); font-size: 11px; color: var(--tape); text-transform: uppercase; letter-spacing: .1em; padding: 8px 0; }
.article-body { max-width: 720px; margin: 0 auto; padding: 48px var(--pad-x) 64px; font-size: 17px; line-height: 1.65; }
.article-body > * + * { margin-top: 1.2em; }
.article-body h2 { font-family: var(--font-display); text-transform: uppercase; font-size: 30px; line-height: 1; margin-top: 1.6em; }
.article-body a { color: var(--hazard); border-bottom: 2px solid var(--hazard); }
.article-body blockquote { border-left: 4px solid var(--hazard); padding: 6px 0 6px 20px; font-family: var(--font-zine); font-size: 19px; color: var(--bone-dim-2); }
.article-body img { border: var(--border); }
.article-tags { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2em; }
.article-tags a { font-family: var(--font-zine); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; border: 1px solid var(--tape); padding: 5px 12px; color: var(--bone-dim); }
.article-tags a:hover { border-color: var(--hazard); color: var(--hazard); }
.next-show { background: var(--blood); }
.next-show .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 26px; padding-bottom: 26px; flex-wrap: wrap; }
.next-show .t { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(22px,3vw,34px); line-height: 1; }
.next-show .btn { background: var(--ink); color: var(--bone); box-shadow: var(--shadow-hard) rgba(13,11,10,.4); }

/* ---------- Event template ---------- */
.event-head { padding: 64px 0; border-bottom: var(--border); }
.event-head .wrap { display: grid; grid-template-columns: 1fr 420px; gap: 56px; align-items: start; }
.matchcard { margin-top: 10px; }
.match { border: var(--border); background: var(--ink-2); margin-bottom: 16px; position: relative; padding: 20px 22px; }
.match .stip { font-family: var(--font-zine); font-size: 12px; color: var(--hazard); text-transform: uppercase; letter-spacing: .12em; }
.match .vs { display: flex; align-items: center; gap: 16px; margin-top: 8px; flex-wrap: wrap; }
.match .vs .name { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(22px,2.6vw,32px); line-height: 1; }
.match .vs .x { font-family: var(--font-zine); color: var(--blood); font-size: 15px; }
.match .result { margin-top: 10px; font-size: 14px; color: var(--bone-dim); border-top: 1px solid rgba(85,80,74,.4); padding-top: 10px; }
.match .result b { color: var(--bone); text-transform: uppercase; }
.photo-strip { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 14px; }
.photo-strip .ph { aspect-ratio: 4/3; border: var(--border); background: linear-gradient(135deg,#1c1b2a,var(--ink) 70%); position: relative; }
.photo-strip .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Show hub ---------- */
.show-hero { padding: 64px 0; border-bottom: var(--border); background: linear-gradient(180deg,#161210,var(--ink) 75%); }
.show-hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.show-hero h1 { font-family: var(--font-display); font-size: clamp(44px,6.5vw,88px); text-transform: uppercase; line-height: .9; margin: 12px 0 16px; }
.show-hero p { color: var(--bone-dim-2); max-width: 480px; }
.player { aspect-ratio: 16/9; border: var(--border); background: var(--ink-2); position: relative; box-shadow: 8px 8px 0 var(--hazard); }
.player iframe, .player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player .placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); text-transform: uppercase; color: rgba(232,226,214,.18); font-size: 40px; }
.episodes { display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 22px; }

/* ---------- Archive ---------- */
.archive-head { padding: 56px 0 36px; border-bottom: var(--border); }
.archive-head h1 { font-family: var(--font-display); font-size: clamp(44px,7vw,90px); text-transform: uppercase; line-height: .9; display: inline-block; position: relative; margin-top: 10px; }
.filter-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.filter-row a { font-family: var(--font-display); text-transform: uppercase; font-size: 14px; padding: 7px 14px; border: 2px solid var(--tape); color: var(--bone-dim); }
.filter-row a:hover, .filter-row a[aria-current="page"] { border-color: var(--hazard); color: var(--hazard); }
.archive-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap: 22px; }
.pager { display: flex; justify-content: center; gap: 14px; margin-top: 44px; }

/* ---------- 404 ---------- */
.botched { min-height: 60vh; display: flex; align-items: center; text-align: left; padding: 80px 0; }
.botched h1 { font-family: var(--font-display); font-size: clamp(80px,16vw,220px); text-transform: uppercase; line-height: .85; }
.botched p { color: var(--bone-dim-2); font-size: 18px; margin: 18px 0 26px; max-width: 460px; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .cats { grid-template-columns: repeat(2, 1fr); }
  .feed { grid-template-columns: 1fr 1fr; }
  .post--lead { grid-column: span 2; grid-row: auto; }
  .merch .wrap { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .event-head .wrap { grid-template-columns: 1fr; }
  .show-hero .wrap { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .nav { display: none; }
  .burger { display: block; margin-left: auto; }
  .hero .wrap { grid-template-columns: 1fr; gap: 44px; }
  .feed { grid-template-columns: 1fr; }
  .post--lead { grid-column: auto; }
}


/* ---------- ON AIR (pirate broadcast light) ---------- */
.live-btn { border: 2px solid var(--vhs); }
.live-btn .dot { background: var(--bone); }
.live-btn.is-live { animation: onair-flash 1.1s steps(2,end) infinite; }
@keyframes onair-flash { 50% { background: var(--ink); color: var(--vhs); } }
.live-btn.is-off { background: transparent; color: var(--tape); border-color: var(--tape); }
.live-btn.is-off .dot { background: var(--tape); animation: none; }

/* Field green: reserved — category hover flourish only */
.cat:hover small { color: var(--field); }

/* ============================================================
   BROADCAST LAYER — v3: the "alive, not just designed" pass
   Scanlines, tune-in boot, REC bug, hover glitch, torn stickers.
   Respects prefers-reduced-motion throughout.
   ============================================================ */

/* ---- ambient CRT scanline sweep (fixed, whole-viewport, barely-there) ---- */
.broadcast-overlay {
  position: fixed; inset: 0; z-index: 998; pointer-events: none; mix-blend-mode: overlay; opacity: .5;
}
.broadcast-overlay::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(243,240,234,.05) 0px, rgba(243,240,234,.05) 1px, transparent 1px, transparent 3px);
}
.broadcast-overlay::after {
  content: ""; position: absolute; left: 0; right: 0; height: 120px;
  background: linear-gradient(rgba(3,54,192,0) 0%, rgba(3,54,192,.06) 50%, rgba(3,54,192,0) 100%);
  animation: scan-sweep 7s linear infinite;
}
@keyframes scan-sweep { 0% { top: -120px; } 100% { top: 100%; } }

/* ---- REC / broadcast bug, corner of viewport ---- */
.rec-bug {
  /* sits below the 64px sticky topbar so it never covers the Off Air button;
     z-index below the topbar's 50 so the open mobile menu paints over it */
  position: fixed; top: 78px; right: 16px; z-index: 40;
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-zine); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bone-dim); background: rgba(13,13,13,.55); border: 1px solid rgba(243,240,234,.15);
  padding: 5px 9px; backdrop-filter: blur(2px); pointer-events: none;
}
.rec-bug .rdot { width: 7px; height: 7px; border-radius: 50%; background: var(--blood); animation: rec-pulse 1.4s ease-in-out infinite; }
@keyframes rec-pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@media (max-width: 640px) { .rec-bug { top: 74px; right: 10px; font-size: 9px; padding: 4px 7px; } }
@media (max-width: 480px) { .cats { grid-template-columns: 1fr; } }

/* ---- tune-in boot intro: brief "no signal" static before the site resolves ---- */
.boot-veil {
  position: fixed; inset: 0; z-index: 9999; background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  animation: boot-out .5s ease-out 1.05s forwards;
}
.boot-veil::before {
  content: ""; position: absolute; inset: 0; opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: boot-static .07s steps(1) infinite;
}
.boot-veil span {
  position: relative; font-family: var(--font-zine); color: var(--hazard); font-size: 13px;
  letter-spacing: .22em; text-transform: uppercase; animation: boot-flicker .12s steps(1) infinite;
}
@keyframes boot-static { 0% { transform: translate(0,0); } 100% { transform: translate(-3%,2%); } }
@keyframes boot-flicker { 0%,100% { opacity: 1; } 50% { opacity: .7; } }
@keyframes boot-out { to { opacity: 0; visibility: hidden; } }

/* ---- hover glitch on post/card art — a little tracking error on interaction ---- */
.post .thumb, .show-card, .cat { position: relative; overflow: hidden; }
.post:hover .thumb img, .post:hover .thumb .art { animation: glitch-slice .32s steps(2,end); }
@keyframes glitch-slice {
  0%   { clip-path: inset(0 0 0 0); transform: translate(0,0); }
  20%  { clip-path: inset(10% 0 60% 0); transform: translate(-3px,0); filter: hue-rotate(20deg); }
  40%  { clip-path: inset(60% 0 5% 0); transform: translate(3px,0); }
  60%  { clip-path: inset(30% 0 40% 0); transform: translate(-2px,0); filter: hue-rotate(-10deg); }
  100% { clip-path: inset(0 0 0 0); transform: translate(0,0); filter: none; }
}

/* ---- torn sticker corners — break the grid at a few anchor points ---- */
.torn-sticker {
  position: absolute; z-index: 3; pointer-events: none;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em;
  background: var(--hazard); color: var(--ink); padding: 6px 14px; font-size: 13px;
  box-shadow: 3px 3px 0 rgba(0,0,0,.4);
  clip-path: polygon(2% 8%, 12% 0%, 27% 6%, 41% 1%, 58% 7%, 74% 0%, 89% 5%, 100% 12%, 97% 88%, 88% 100%, 71% 94%, 55% 100%, 39% 93%, 22% 100%, 8% 92%, 0% 85%);
}

/* ---- static + VHS-blue border pulse the instant ON AIR flips live ---- */
.live-btn.is-live { box-shadow: 0 0 0 1px var(--vhs), 0 0 14px rgba(3,54,192,.55); }

@media (prefers-reduced-motion: reduce) {
  .broadcast-overlay::after, .boot-veil, .boot-veil::before, .boot-veil span,
  .post:hover .thumb img, .post:hover .thumb .art, .rec-bug .rdot { animation: none !important; }
  .boot-veil { display: none; }
}

/* ---- Goods page: live product grid ---- */
.goods-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; margin-top: 28px; }
.g-card { background: var(--ink-2); border: 1px solid rgba(243,240,234,.1); position: relative; transition: transform .15s; }
.g-card:hover { transform: translateY(-4px); }
.g-card .gi { aspect-ratio: 1/1; overflow: hidden; background: #1a1a1a; }
.g-card .gi img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-card .gb { padding: 14px 16px 18px; }
.g-card h3 { font-family: var(--font-display); text-transform: uppercase; font-size: 16px; line-height: 1.15; margin-bottom: 8px; }
.g-card .gp { font-family: var(--font-zine); color: var(--hazard); font-size: 14px; }
.g-card a.buy { display: block; margin-top: 12px; text-align: center; background: var(--blood); color: var(--bone);
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; font-size: 13px; padding: 10px; }
.g-card a.buy:hover { background: var(--blood-hot); }
.goods-note { font-family: var(--font-zine); font-size: 11px; color: var(--tape); text-transform: uppercase; letter-spacing: .08em; margin-top: 22px; }

/* ---------- Hero video background (b-roll loop) ---------- */
.hero { position: relative; overflow: hidden; }
.hero-video-bg {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background: var(--ink); /* fallback color while it loads / if disabled */
}
.hero-video-bg::after {
  /* scrim so headline + flyer stay legible over motion */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(13,13,13,.55) 0%, rgba(13,13,13,.78) 55%, rgba(13,13,13,.92) 100%);
}
.hero-video-bg iframe {
  position: absolute; top: 50%; left: 50%; z-index: 0;
  width: 100vw; height: 56.25vw;     /* 16:9 scaled to always cover */
  min-height: 100%; min-width: 177.78vh;
  transform: translate(-50%, -50%);
  pointer-events: none; border: 0;
  filter: saturate(.85) contrast(1.05) brightness(.9);
}
.hero-video-bg video {
  /* native video supports object-fit — no viewport-unit sizing trick needed */
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none;
  filter: saturate(.85) contrast(1.05) brightness(.9);
}
.hero > .wrap { position: relative; z-index: 2; } /* text/flyer stay above scrim */

@media (prefers-reduced-motion: reduce) {
  .hero-video-bg iframe, .hero-video-bg video { display: none; }
}

/* ---------- Featured drop: real product photo card ---------- */
.drop-card { position: relative; aspect-ratio: 4/5; max-width: 320px; overflow: hidden; background: var(--ink-2); }
.drop-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.drop-chip { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(13,13,13,.85);
  padding: 10px 14px; font-family: var(--font-zine); font-size: 11px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--bone); }

/* ---------- Crew: honest pre-launch panel ---------- */
.crew-pending {
  border: 1px dashed var(--tape); border-radius: 2px; padding: 40px 32px;
  max-width: 560px; text-align: left; background: rgba(243,240,234,.02);
}
.crew-pending p { color: var(--bone-dim-2); margin-top: 10px; font-size: 15px; line-height: 1.5; }

/* ---------- Static photo page-headers (secondary pages) ----------
   Distinct from the homepage video hero: one still photo + the same
   dark-scrim convention, pure CSS, no JS. One photo per page. */
.photo-head {
  background:
    linear-gradient(180deg, rgba(13,13,13,.62) 0%, rgba(13,13,13,.8) 55%, rgba(13,13,13,.94) 100%),
    var(--ph, none) center 30% / cover no-repeat,
    var(--ink);
}
.photo-head--live     { --ph: url("/media/photos/circle6-5-4-25-100.webp"); }
.photo-head--channels { --ph: url("/media/photos/circle6-5-4-25-30.webp"); }
.photo-head--dig      { --ph: url("/media/photos/circle6-5-4-25-11.webp"); }
.photo-head--crew     { --ph: url("/media/photos/circle6-5-4-25-91.webp"); }

/* ---------- Dig tiles: latest-post photo backs (data-driven; empty cats stay flat) ---------- */
.cat--photo {
  background-image:
    linear-gradient(180deg, rgba(13,13,13,.72) 0%, rgba(13,13,13,.86) 100%),
    var(--cat-ph);
  background-size: cover; background-position: center;
}
.cat--photo:hover { /* keep the bone flip readable, with a ghost of the photo */
  background-image:
    linear-gradient(180deg, rgba(243,240,234,.93), rgba(243,240,234,.93)),
    var(--cat-ph);
}

/* ---------- Channels hub: featured card for shows with real episodes ---------- */
.show-card--featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 26px; align-items: center; }
.show-card--featured .fthumb { aspect-ratio: 16/9; position: relative; overflow: hidden; border: 2px solid var(--ink); background: linear-gradient(135deg,#1c1b2a,var(--ink) 70%); }
.show-card--featured .fthumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.show-card--featured h3 { font-size: clamp(34px,4vw,48px); }
@media (max-width: 760px) { .show-card--featured { grid-template-columns: 1fr; } }

/* Single-show hero: turnbuckle shot behind the channel title/player */
.photo-head--show { --ph: url("/media/photos/circle6-5-4-25-91.webp"); }

/* ---------- Inline episode switching ---------- */
.player .now-playing { position: absolute; top: 100%; left: 0; right: 0; margin-top: 10px;
  font-family: var(--font-zine); font-size: 12px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--hazard); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post.is-playing { outline: 3px solid var(--hazard); outline-offset: -3px; }
.post.is-playing .kick::after { content: " · playing"; color: var(--hazard); }

/* Hero skip-cases (reduced-motion / data-saver): static poster frame, not a void */
.hero-video-bg--poster {
  background: url("/media/hero/c6live-highlights-poster.jpg") center / cover no-repeat var(--ink);
}