/* ============================================================
   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(60px,8.6vw,118px); 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%;
  /* title sizing is relative to THIS card, not the viewport — the card is
     capped at 430px, so a viewport-scaled font outgrows it on wide screens */
  container-type: inline-size; }
.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); }
/* Real poster art, shown as a band at the top of the flyer rather than as a
   background behind the card. The poster already carries its own title, date,
   price and location, so laying the card's text over it would double every
   line — and the countdown digits would need a heavy scrim to stay readable,
   which dulls the artwork. Above the text, both stay crisp.
   Collapsed by default: events without a poster render exactly as before. */
.flyer .fposter { display: none; }
.flyer .fposter.is-on { display: block; margin: 0 0 16px; border: 2px solid var(--ink); background: var(--ink); }
.flyer .fposter img { display: block; width: 100%; height: auto; }
/* Bigger "NEXT SHOW" on the countdown flyer ONLY. .slap is shared by post-card
   stickers, the Free Entry / Sold Out badges and the Goods "Live drop" tag, so
   bumping the base .slap in tokens.css would resize all of them. */
.flyer .slap { font-size: 20px; padding: 6px 14px; }
.flyer .fk { font-family: var(--font-zine); font-size: 13px; text-transform: uppercase; letter-spacing: .15em; color: var(--blood); }
/* Event titles are operator-entered and can be any length. Three layers keep
   them inside the card: cqi tracks the card width, fitFlyerTitle() in site.js
   shrinks the size until the longest word fits, and overflow-wrap is the
   last-resort guard that breaks an absurd word rather than let it spill (it
   also covers the no-JS render, where the static fallback title still shows). */
.flyer .fh { font-family: var(--font-display); font-size: clamp(30px,23cqi,86px); text-transform: uppercase; line-height: .88; margin: 10px 0 6px;
  overflow-wrap: anywhere; word-break: break-word; }
.flyer .fsub { font-weight: 800; text-transform: uppercase; font-size: 14px; letter-spacing: .09em;
  overflow-wrap: anywhere; }
.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; }
/* linked ticker items (manual overrides) sit in the same rhythm as plain ones */
.ticker-track a { margin: 0 26px; color: inherit; text-decoration: none; }
.ticker-track a:hover { color: var(--hazard); text-decoration: underline; }
.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(44px,6.3vw,84px); 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; }
/* optional per-image caption (article galleries); tiles without one are unchanged */
.photo-strip .ph-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 8px;
  font-family: var(--font-zine); font-size: 11px; line-height: 1.3; letter-spacing: .08em;
  text-transform: uppercase; color: var(--bone);
  background: linear-gradient(transparent, rgba(0,0,0,.85)); }

/* ---------- 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(50px,7.4vw,100px); 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(50px,8vw,104px); text-transform: uppercase; line-height: .9; display: inline-block; position: relative; margin-top: 10px; }
/* The page-title sticker (Goods "Live drop", Dig "Go deeper", Crew) used the
   base .slap absolute offsets, which pin it to the h1's top-right corner —
   i.e. on top of the last letters. It overlapped by 66x26px and got tighter
   when the H1 sizes went up. Flowing it after the word instead of positioning
   it over the word means it cannot collide at ANY font-size or breakpoint, and
   it wraps to its own line on narrow screens rather than overflowing. */
.archive-head h1 .slap { position: static; display: inline-block; vertical-align: top;
  margin: 6px 0 0 14px; top: auto; right: auto; }
.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); }
/* Product well is BONE, not near-black. Most C6 merch is black garments shot on
   black or transparent, so on the old #1a1a1a well the hat and both tees were
   effectively invisible — only their printed logos read. Bone matches the
   flyer/show-card treatment already used elsewhere, so black product silhouettes
   have full contrast and the tile still looks like the rest of the site. */
.g-card .gi { aspect-ratio: 1/1; overflow: hidden; background: var(--bone);
  box-shadow: inset 0 0 0 1px rgba(13,13,13,.12); }
.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; }
}

/* ---- Homepage merch spread: several product types, live from the catalogue.
   Hidden until the catalogue actually returns products, so a failed fetch
   leaves the original single featured-drop card visible instead of a hole.
   Wells are bone for the same reason as .g-card .gi — black merch on a dark
   tile is invisible. ---- */
.drop-spread { display: none; }
.drop-spread.is-on { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.drop-spread + .drop-card { display: none; }        /* spread wins when present */
.ds-item { border: 2px solid var(--ink); background: var(--bone); position: relative; display: block; }
.ds-item .dsi { aspect-ratio: 1/1; overflow: hidden; background: var(--bone); }
.ds-item .dsi img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-item .dsl { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(13,13,13,.88); color: var(--bone);
  font-family: var(--font-display); text-transform: uppercase; font-size: 12px; letter-spacing: .04em;
  padding: 6px 8px; display: flex; justify-content: space-between; gap: 6px; }
.ds-item .dsl b { font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-item .dsl span { color: var(--hazard); flex: none; }
.ds-item:hover { transform: translateY(-3px); transition: transform .15s; }

/* ---------- 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);
}

/* ---------- About / Press / Contact ----------
   Reuses the existing vocabulary rather than inventing a new one: .archive-head
   + .photo-head for the page header, Anton for display, Special Elite via
   .kick for the zine kickers, hazard for emphasis. */
.prose { max-width: 720px; }
.prose p { color: var(--bone-dim-2); font-size: 17px; line-height: 1.65; margin: 0 0 18px; }
.prose-lead { font-size: 20px !important; color: var(--bone) !important; }
.prose-pull { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(24px,3.4vw,38px);
  line-height: 1.02; color: var(--bone) !important; margin: 28px 0 18px !important; }
.prose-sign { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(20px,2.6vw,28px);
  color: var(--hazard) !important; letter-spacing: .02em; }

.press-card { margin-top: 34px; border: 2px solid var(--tape); background: var(--ink2); padding: 22px 24px; max-width: 480px; }
.press-name { font-family: var(--font-display); text-transform: uppercase; font-size: 26px; color: var(--bone) !important; margin: 8px 0 6px !important; }
.press-mail { font-family: var(--font-zine); font-size: 16px; color: var(--hazard);
  border-bottom: 2px solid var(--hazard); word-break: break-all; }
.press-mail:hover { color: var(--bone); border-color: var(--bone); }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.want-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.want-list li { font-family: var(--font-display); text-transform: uppercase; font-size: 15px; letter-spacing: .03em;
  color: var(--bone); padding-left: 20px; position: relative; }
.want-list li::before { content: "//"; position: absolute; left: 0; color: var(--hazard); }

.cform-wrap { border: 2px solid var(--bone); background: var(--ink2); padding: 26px 24px; }
.cform { display: flex; flex-direction: column; gap: 16px; }
.cform label { display: flex; flex-direction: column; gap: 7px; font-family: var(--font-zine);
  text-transform: uppercase; letter-spacing: .12em; font-size: 12px; color: var(--hazard); }
.cform input, .cform textarea { background: var(--ink); border: 2px solid var(--bone); color: var(--bone);
  padding: 12px 14px; font-family: var(--font-body); font-size: 15px; width: 100%; resize: vertical; }
.cform input:focus, .cform textarea:focus { outline: none; border-color: var(--hazard); }
.cform input.is-bad, .cform textarea.is-bad { border-color: var(--blood); }
.cform-send { background: var(--hazard); color: var(--ink); border: 2px solid var(--hazard);
  font-family: var(--font-display); text-transform: uppercase; font-size: 18px; padding: 13px 22px; cursor: pointer; }
.cform-send:hover { background: var(--bone); border-color: var(--bone); }
.cform-send[disabled] { opacity: .55; cursor: default; }
.cform-msg { font-family: var(--font-zine); font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  min-height: 18px; margin: 0; color: var(--bone-dim); }
.cform-msg.is-ok { color: var(--hazard); }
.cform-msg.is-bad { color: var(--blood-hot, #b3213c); }

@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 34px; } }

/* The page-header kicker is an inline <span>, so on wide screens a short H1
   ("Contact", "Goods") pulls up ONTO the kicker's line instead of sitting under
   it — the stacked look you get at narrow widths is the intended one. Making it
   a block fixes that everywhere it occurs (goods, crew, dig, about, press,
   contact), not just on the new pages where it happened to be obvious. */
.archive-head .kick { display: block; }