/* =============================================================
   COMMON CLICKBAIT — "The Late-Night Channel"
   Retro arcade/VHS chrome wrapping light broadcast-paper panels.
   Token-first. OKLCH palette. Fluid clamp scale.
   ============================================================= */

/* ---------- TOKENS ---------- */
:root {
  /* CRT dark chrome */
  --ink:        oklch(0.17 0.028 275);   /* deepest bg */
  --ink-2:      oklch(0.21 0.030 275);   /* lifted panel */
  --ink-3:      oklch(0.26 0.032 275);   /* raised chrome */
  --chrome-line: oklch(0.42 0.04 260);   /* hairline on dark */

  /* VHS pops */
  --red:        oklch(0.635 0.232 21);   /* channel red */
  --red-d:      oklch(0.55 0.20 21);
  --cyan:       oklch(0.82 0.135 205);   /* CRT phosphor */
  --cyan-d:     oklch(0.68 0.13 210);
  --gold:       oklch(0.83 0.155 85);    /* arcade attract */
  --green:      oklch(0.86 0.20 145);    /* terminal green (ticker) */

  /* Broadcast paper (reading) */
  --paper:      oklch(0.965 0.014 92);   /* warm off-white */
  --paper-2:    oklch(0.93 0.018 92);    /* paper shade */
  --paper-line: oklch(0.86 0.02 92);
  --p-ink:      oklch(0.24 0.02 275);    /* text on paper */
  --p-soft:     oklch(0.46 0.02 275);

  /* text on dark */
  --ink-text:   oklch(0.94 0.01 260);
  --ink-soft:   oklch(0.74 0.02 260);

  /* fonts */
  --display: "Anton", "Arial Narrow", sans-serif;
  --body:    "Hanken Grotesk", system-ui, sans-serif;
  --mono:    "Space Mono", ui-monospace, monospace;
  --pixel:   "Silkscreen", var(--mono);

  /* fluid scale (mind the clamp spacing bug: always space operands) */
  --h0: clamp(2.9rem, 1.4rem + 6.4vw, 6.5rem);
  --h1: clamp(2.2rem, 1.3rem + 3.8vw, 4rem);
  --h2: clamp(1.6rem, 1.1rem + 2.2vw, 2.6rem);
  --h3: clamp(1.2rem, 1rem + 0.9vw, 1.55rem);
  --lead: clamp(1.05rem, 0.98rem + 0.4vw, 1.22rem);

  --wrap: 1200px;
  --gap: clamp(1rem, 0.6rem + 1.6vw, 2rem);
  --radius: 14px;
  --radius-s: 8px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --shadow: 0 18px 50px -20px oklch(0 0 0 / 0.7);
  --glow-cyan: 0 0 0 1px oklch(0.82 0.135 205 / 0.4), 0 0 26px -6px oklch(0.82 0.135 205 / 0.55);
  --glow-red: 0 0 0 1px oklch(0.635 0.232 21 / 0.5), 0 0 26px -6px oklch(0.635 0.232 21 / 0.6);
}

/* ---------- RESET / BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--body);
  background: var(--ink);
  color: var(--ink-text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { width: min(100% - 2.4rem, var(--wrap)); margin-inline: auto; }
.skip {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.skip:focus {
  position: fixed; top: 0; left: 0; z-index: 200; width: auto; height: auto;
  margin: 0; clip: auto; clip-path: none; white-space: normal;
  background: var(--gold); color: #1a1200; padding: 0.6rem 1rem;
  font-family: var(--mono); font-weight: 700; border-radius: 0 0 8px 0;
}

/* atmospheric background: layered radial + horizon grid */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(80% 55% at 82% -8%, oklch(0.635 0.232 21 / 0.16), transparent 60%),
    radial-gradient(70% 50% at 12% 4%, oklch(0.68 0.13 210 / 0.15), transparent 62%),
    radial-gradient(90% 60% at 50% 110%, oklch(0.45 0.09 300 / 0.35), transparent 60%),
    var(--ink);
}
/* CRT scanlines + grain (subtle, atmospheric, non-interactive) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: 0.5;
  background:
    repeating-linear-gradient(0deg, oklch(0 0 0 / 0.22) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
@media (prefers-reduced-motion: no-preference) {
  body::after { animation: crt-roll 8s linear infinite; }
}
@keyframes crt-roll { to { background-position: 0 3px; } }

/* CRT power-on: page-load moment (line -> full flash -> fade) */
.crt-boot { display: none; }
@media (prefers-reduced-motion: no-preference) {
  html.js .crt-boot {
    display: block; position: fixed; inset: 0; z-index: 300; pointer-events: none;
    background: #dff3ff; animation: crt-boot 0.8s ease-out forwards;
  }
}
@keyframes crt-boot {
  0%   { clip-path: inset(49.6% 0 49.6% 0); background: #ffffff; opacity: 1; }
  22%  { clip-path: inset(49.6% 0 49.6% 0); background: #eaf7ff; opacity: 1; }
  48%  { clip-path: inset(0 0 0 0); background: #dff3ff; opacity: 0.95; }
  70%  { opacity: 0.35; }
  100% { clip-path: inset(0 0 0 0); opacity: 0; }
}

/* ---------- KICKER / TEXT HELPERS ---------- */
.kicker {
  font-family: var(--mono); font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyan);
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.kicker::before {
  content: ""; width: 0.55rem; height: 0.55rem; background: var(--red);
  box-shadow: 0 0 10px var(--red); border-radius: 2px;
}
.script { color: var(--gold); }

/* monochrome meta icons (mask -> currentColor) */
.ic-time, .ic-cmt { display: inline-flex; align-items: center; gap: 0.34em; }
.ic-time::before, .ic-cmt::before {
  content: ""; width: 1em; height: 1em; flex-shrink: 0; background: currentColor;
  -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat;
}
.ic-time::before { -webkit-mask-image: var(--i-clock); mask-image: var(--i-clock); }
.ic-cmt::before  { -webkit-mask-image: var(--i-cmt); mask-image: var(--i-cmt); }
:root {
  --i-clock: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M12%207v5l3.5%202'/%3E%3C/svg%3E");
  --i-cmt: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%205h16v10H9l-4%204z'/%3E%3C/svg%3E");
}

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--mono); font-weight: 700; font-size: 0.92rem;
  letter-spacing: 0.03em; text-transform: uppercase;
  padding: 0.85rem 1.4rem; border-radius: 10px;
  background: var(--red); color: oklch(0.98 0.02 90);
  box-shadow: 0 6px 0 0 var(--red-d), var(--glow-red);
  transition: transform 0.12s var(--ease), box-shadow 0.12s var(--ease), background 0.2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 0 var(--red-d); }
.btn--ghost {
  background: transparent; color: var(--cyan);
  box-shadow: inset 0 0 0 2px var(--cyan-d);
}
.btn--ghost:hover { background: oklch(0.82 0.135 205 / 0.1); }
.btn--gold {
  background: var(--gold); color: #241800;
  box-shadow: 0 6px 0 0 oklch(0.66 0.14 80), 0 0 24px -8px var(--gold);
}

/* =============================================================
   HEADER / CHANNEL BAR
   ============================================================= */
.topbar {
  position: sticky; top: 0; z-index: 80;
  background: oklch(0.17 0.028 275 / 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--chrome-line);
  transition: box-shadow 0.3s;
}
/* broadcast color stripe across the very top */
.topbar::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, var(--red) 0 25%, var(--gold) 25% 50%, var(--green) 50% 75%, var(--cyan) 75% 100%);
}
.topbar.scrolled { box-shadow: 0 12px 40px -18px #000; }

/* ON AIR indicator */
.onair {
  display: inline-flex; align-items: center; gap: 0.4rem; flex-shrink: 0;
  font-family: var(--pixel); font-size: 0.5rem; letter-spacing: 0.08em;
  color: var(--red); padding: 0.35rem 0.55rem; border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--red-d); text-transform: uppercase;
}
.onair::before {
  content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 8px var(--red);
}
@media (prefers-reduced-motion: no-preference) { .onair::before { animation: blink 1.4s steps(1) infinite; } }
@media (max-width: 860px) { .topbar .onair { display: none; } }
.topbar__row {
  display: flex; align-items: center; gap: 1.2rem;
  min-height: 68px; padding-block: 0.5rem;
}

/* wordmark lockup */
.brand { display: inline-flex; align-items: center; gap: 0.7rem; flex-shrink: 0; }
.brand__bug {
  display: inline-flex; flex-direction: column; align-items: center;
  font-family: var(--pixel); font-size: 0.62rem; line-height: 1.15;
  color: var(--ink); background: var(--gold);
  padding: 0.42rem 0.5rem; border-radius: 5px;
  box-shadow: 0 0 0 2px oklch(0.66 0.14 80), 0 0 14px -2px var(--gold);
  text-align: center; flex-shrink: 0;
}
.brand__bug span { color: var(--red-d); }
.brand__name {
  font-family: var(--display); font-size: 1.5rem; line-height: 0.86;
  text-transform: uppercase; letter-spacing: 0.01em;
}
.brand__name b { color: var(--red); font-weight: inherit; }
.brand__name i { color: var(--cyan); font-style: normal; }

/* nav */
.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 0.15rem; }
.nav__list a {
  font-family: var(--mono); font-size: 0.82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.5rem 0.7rem; border-radius: 7px; color: var(--ink-soft);
  transition: color 0.15s, background 0.15s;
  position: relative;
}
.nav__list a:hover { color: var(--ink-text); background: oklch(1 0 0 / 0.05); }
.nav__list a[aria-current="page"] { color: var(--gold); }
.nav__list a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0.7rem; right: 0.7rem; bottom: 0.05rem;
  height: 2px; background: var(--gold); box-shadow: 0 0 8px var(--gold);
}

.decade {
  display: inline-flex; align-items: center; flex-shrink: 0; align-self: center;
  background: var(--ink-3); border-radius: 8px; padding: 3px;
  box-shadow: inset 0 0 0 1px var(--chrome-line);
}
.decade button {
  font-family: var(--mono); font-weight: 700; font-size: 0.75rem;
  padding: 0.35rem 0.6rem; border-radius: 6px; color: var(--ink-soft);
  transition: color 0.15s, background 0.15s;
}
.decade button.on { background: var(--cyan); color: #062028; }
/* keep the single header strip on one centered line as it narrows */
@media (max-width: 1180px) {
  .topbar__row { gap: 0.8rem; }
  .nav__list a { padding: 0.5rem 0.55rem; font-size: 0.78rem; }
  .decade button { padding: 0.3rem 0.5rem; font-size: 0.72rem; }
}

.icon-btn {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 8px; color: var(--ink-soft);
  box-shadow: inset 0 0 0 1px var(--chrome-line);
  transition: color 0.15s, box-shadow 0.15s;
}
.icon-btn:hover { color: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan-d); }
.icon-btn svg { width: 20px; height: 20px; }

.burger { display: none; }

/* =============================================================
   TICKER (attract mode)
   ============================================================= */
.ticker {
  background: oklch(0.13 0.02 275);
  border-bottom: 1px solid var(--chrome-line);
  overflow: hidden; position: relative;
}
.ticker__label {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--red); color: #fff;
  font-family: var(--pixel); font-size: 0.6rem; letter-spacing: 0.05em;
  padding: 0 0.9rem; white-space: nowrap;
}
.ticker__track {
  display: flex; gap: 2.6rem; white-space: nowrap; padding: 0.6rem 0;
  padding-left: 8.5rem;
  font-family: var(--mono); font-size: 0.82rem; color: var(--green);
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  /* train motion: big fast push, long pause, push again */
  .ticker__track {
    animation: ticker-train 17s infinite;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  .ticker:hover .ticker__track { animation-play-state: paused; }
}
@keyframes ticker-train {
  0%    { transform: translateX(0); }      /* content duplicated -> -50% == 0 (seamless) */
  4%    { transform: translateX(-10%); }   /* push 1 */
  20%   { transform: translateX(-10%); }   /* long hold */
  24%   { transform: translateX(-20%); }   /* push 2 */
  40%   { transform: translateX(-20%); }
  44%   { transform: translateX(-30%); }   /* push 3 */
  60%   { transform: translateX(-30%); }
  64%   { transform: translateX(-40%); }   /* push 4 */
  80%   { transform: translateX(-40%); }
  84%   { transform: translateX(-50%); }   /* push 5 */
  100%  { transform: translateX(-50%); }   /* hold, then loop */
}
.ticker__track a { color: var(--green); }
.ticker__track a::before { content: "\25B6  "; color: var(--gold); }
.ticker__track a:hover { color: var(--gold); }

/* =============================================================
   HERO — NOW PLAYING
   ============================================================= */
.hero { padding: clamp(2rem, 1rem + 4vw, 4.2rem) 0 clamp(1.6rem, 1rem + 2vw, 3rem); }
.hero__grid {
  display: grid; gap: var(--gap);
  grid-template-columns: 1.35fr 0.85fr; align-items: stretch;
}
.hero__head { margin-bottom: 1.4rem; position: relative; }
.hero__sub { font-size: var(--lead); color: var(--ink-soft); max-width: 54ch; margin-top: 1rem; }
.stamp {
  position: absolute; top: 0.4rem; right: 0.5rem; transform: rotate(7deg);
  font-family: var(--pixel); font-size: 0.62rem; line-height: 1.5; text-align: center;
  color: var(--red); box-shadow: 0 0 0 2px var(--red), inset 0 0 0 1px var(--red);
  border-radius: 8px; padding: 0.55rem 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
  background: oklch(0.635 0.232 21 / 0.06);
}
.stamp b { color: var(--gold); font-weight: 400; }
@media (max-width: 820px) { .stamp { display: none; } }
.hero__head h1 {
  font-family: var(--display); font-weight: 400;
  font-size: var(--h0); line-height: 0.92; text-transform: uppercase;
  letter-spacing: 0.005em; margin-top: 0.5rem;
}
.hero__head h1 em { font-style: normal; color: var(--red); }
.hero__head h1 u { text-decoration: none; color: var(--cyan); }

/* featured card = paper panel on dark chrome, framed like a CRT */
.feature {
  position: relative; grid-row: span 2;
  background: var(--paper); color: var(--p-ink);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow), inset 0 0 0 1px oklch(1 0 0 / 0.4);
  display: flex; flex-direction: column;
}
.feature__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-2); }
.feature__media img { width: 100%; height: 100%; object-fit: cover; }
.feature__rank {
  position: absolute; right: -0.5rem; bottom: -1.6rem; z-index: 2;
  font-family: var(--display); font-size: clamp(6rem, 4rem + 12vw, 12rem);
  line-height: 0.8; color: transparent;
  -webkit-text-stroke: 3px oklch(0.965 0.014 92 / 0.9);
  text-stroke: 3px oklch(0.965 0.014 92 / 0.9);
  pointer-events: none;
}
.feature__badge {
  position: absolute; left: 1rem; top: 1rem; z-index: 2;
  font-family: var(--pixel); font-size: 0.6rem; letter-spacing: 0.05em;
  background: var(--red); color: #fff; padding: 0.45rem 0.6rem; border-radius: 6px;
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.feature__badge .dot {
  width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #fff;
}
@media (prefers-reduced-motion: no-preference) {
  .feature__badge .dot { animation: blink 1.2s steps(1) infinite; }
}
@keyframes blink { 50% { opacity: 0.2; } }
.feature__body { padding: 1.3rem clamp(1.1rem, 0.8rem + 1vw, 1.8rem) 1.6rem; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.tag {
  align-self: flex-start;
  font-family: var(--mono); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--red-d); background: oklch(0.635 0.232 21 / 0.12);
  padding: 0.3rem 0.55rem; border-radius: 5px;
}
.feature__body h2 {
  font-family: var(--display); font-weight: 400; font-size: var(--h2);
  line-height: 0.98; text-transform: uppercase; color: var(--p-ink);
}
.feature__meta {
  font-family: var(--mono); font-size: 0.76rem; color: var(--p-soft);
  display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-top: auto;
}
.feature__meta b { color: var(--p-ink); }

/* side stack: two smaller "up next" list cards */
.upnext { display: grid; gap: var(--gap); }
.mini {
  display: grid; grid-template-columns: 96px 1fr; gap: 0.9rem; align-items: center;
  background: var(--ink-2); border-radius: var(--radius-s);
  padding: 0.7rem; box-shadow: inset 0 0 0 1px var(--chrome-line);
  transition: transform 0.15s var(--ease), box-shadow 0.2s;
}
.mini:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--cyan-d), var(--glow-cyan); }
.mini__media { aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: var(--ink-3); position: relative; }
.mini__media img { width: 100%; height: 100%; object-fit: cover; }
.mini__num {
  position: absolute; left: 4px; top: 0; font-family: var(--display);
  font-size: 1.6rem; color: var(--gold); line-height: 1;
  text-shadow: 0 1px 0 #000;
}
.mini h3 { font-size: 0.98rem; line-height: 1.15; font-weight: 800; }
.mini .tag { margin-bottom: 0.3rem; font-size: 0.6rem; color: var(--cyan); background: oklch(0.82 0.135 205 / 0.12); }

/* ---------- MEDIA PLACEHOLDER (SMPTE test pattern) ---------- */
.ph {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background: linear-gradient(90deg,
    #c9c9c9 0 14.2%, #d6d640 14.2% 28.4%, #40d6d6 28.4% 42.6%,
    #40b040 42.6% 56.8%, #d640d6 56.8% 71%, #d64040 71% 85.2%,
    #4040d6 85.2% 100%);
  display: grid; place-items: center;
}
.ph::after {
  content: attr(data-ph); font-family: var(--pixel); font-size: 0.6rem;
  color: #0a0a0a; background: oklch(0.965 0.014 92 / 0.85);
  padding: 0.3rem 0.5rem; border-radius: 4px; letter-spacing: 0.04em;
}
.ph--dim { filter: saturate(0.7) brightness(0.9); }
.ph { z-index: 0; }

/* tune-in: real thumbnail fades in OVER the color bars (bars = loading state).
   Add <img class="tune-img" ...> inside any media container that has a .ph.
   JS adds .tuned on scroll-in (+ small stagger); global scanlines stay on top. */
.tune-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.03); z-index: 1;
  transition: opacity 0.55s var(--ease-out), transform 0.75s var(--ease-out);
}
.tuned .tune-img { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .tune-img { transition: opacity 0.2s linear; transform: none; } }

/* =============================================================
   AD SLOTS  (real, on-theme, clearly delineated)
   ============================================================= */
.ad {
  --ad-h: 90px;
  display: grid; place-items: center; text-align: center;
  min-height: var(--ad-h);
  border: 1px dashed var(--chrome-line); border-radius: 10px;
  background:
    repeating-linear-gradient(45deg, oklch(1 0 0 / 0.015) 0 10px, transparent 10px 20px),
    var(--ink-2);
  color: var(--ink-soft);
}
.ad__tag {
  font-family: var(--pixel); font-size: 0.55rem; letter-spacing: 0.1em;
  color: var(--gold);
}
.ad__hint { font-family: var(--mono); font-size: 0.7rem; margin-top: 0.3rem; }
.ad--leader { --ad-h: 100px; margin-block: clamp(1.4rem, 1rem + 1.5vw, 2.4rem); }
.ad--rect { --ad-h: 250px; max-width: 336px; margin-inline: auto; }
.ad--break {
  --ad-h: 130px; background:
    repeating-linear-gradient(45deg, oklch(0.635 0.232 21 / 0.06) 0 12px, transparent 12px 24px),
    var(--ink-2);
  border-color: var(--red-d);
}
.ad--break .ad__tag { color: var(--red); }

/* =============================================================
   SECTION SHELL
   ============================================================= */
.section { padding: clamp(2.4rem, 1.4rem + 3.5vw, 5rem) 0; position: relative; }
.section__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; margin-bottom: clamp(1.4rem, 1rem + 1.5vw, 2.4rem);
  flex-wrap: wrap;
}
.section__head h2 {
  font-family: var(--display); font-weight: 400; font-size: var(--h1);
  line-height: 0.94; text-transform: uppercase; margin-top: 0.4rem;
}
.section__head h2 em { font-style: normal; color: var(--gold); }
.link-more {
  font-family: var(--mono); font-weight: 700; font-size: 0.82rem;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--cyan);
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.link-more:hover { color: var(--gold); }
.link-more::after { content: "\2192"; transition: transform 0.15s; }
.link-more:hover::after { transform: translateX(4px); }

/* =============================================================
   CHANNELS GRID (bento, per-channel accent)
   ============================================================= */
.channels {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(6, 1fr);
}
.channel {
  --accent: var(--cyan);
  position: relative; overflow: hidden;
  grid-column: span 2; min-height: 150px;
  background: var(--ink-2); border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--chrome-line);
  padding: 1.1rem 1.2rem; display: flex; flex-direction: column;
  justify-content: space-between;
  transition: transform 0.18s var(--ease), box-shadow 0.25s;
}
.channel:nth-child(1) { grid-column: span 3; }
.channel:nth-child(2) { grid-column: span 3; }
.channel:nth-child(6) { grid-column: span 3; }
.channel:nth-child(7) { grid-column: span 3; }
.channel__bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0.32; z-index: 0; transition: opacity 0.3s var(--ease), transform 0.5s var(--ease-out);
}
.channel::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, oklch(0.19 0.03 275 / 0.35) 0%, oklch(0.19 0.03 275 / 0.88) 90%);
}
.channel::after {
  content: ""; position: absolute; inset: auto -30% -50% auto; z-index: 1;
  width: 60%; height: 120%;
  background: radial-gradient(circle, var(--accent), transparent 70%);
  opacity: 0.18; transition: opacity 0.25s;
}
.channel:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--accent), 0 20px 40px -22px var(--accent); }
.channel:hover::after { opacity: 0.34; }
.channel:hover .channel__bg { opacity: 0.5; transform: scale(1.06); }
.channel__no {
  position: relative; z-index: 2;
  font-family: var(--pixel); font-size: 0.6rem; color: var(--accent);
  letter-spacing: 0.06em; text-shadow: 0 1px 3px #000;
}
.channel__name {
  font-family: var(--display); font-weight: 400; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.1rem);
  text-transform: uppercase; line-height: 0.9; position: relative; z-index: 2;
  text-shadow: 0 2px 10px oklch(0.15 0.02 275 / 0.7);
}
.channel__count {
  position: relative; z-index: 2;
  font-family: var(--mono); font-size: 0.75rem; color: var(--ink-text);
  text-shadow: 0 1px 4px #000;
}
@media (prefers-reduced-motion: reduce) { .channel__bg { transition: opacity 0.2s; } .channel:hover .channel__bg { transform: none; } }

/* =============================================================
   LATEST FEED
   ============================================================= */
.feed { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.post {
  background: var(--paper); color: var(--p-ink);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow);
  display: grid; grid-template-columns: 40% 1fr;
  transition: transform 0.16s var(--ease), box-shadow 0.25s;
}
.post:hover { transform: translateY(-4px); box-shadow: var(--shadow), var(--glow-cyan); }
.post__media { position: relative; overflow: hidden; background: var(--ink-2); }
.post__media img { width: 100%; height: 100%; object-fit: cover; min-height: 160px; }
.post__num {
  position: absolute; left: 6px; top: 2px; font-family: var(--display);
  font-size: 2.4rem; line-height: 1; color: var(--paper);
  -webkit-text-stroke: 2px var(--red); text-stroke: 2px var(--red);
}
.post__body { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.post__body h3 {
  font-family: var(--display); font-weight: 400; font-size: 1.35rem;
  line-height: 0.98; text-transform: uppercase; color: var(--p-ink);
}
.post__body p { font-size: 0.9rem; color: var(--p-soft); line-height: 1.45; }
.post__meta {
  margin-top: auto; display: flex; flex-wrap: wrap; gap: 0.4rem 1rem;
  font-family: var(--mono); font-size: 0.72rem; color: var(--p-soft);
}
.post__meta .comments { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--red-d); }
.feed-ad { grid-column: 1 / -1; }

/* =============================================================
   DECADE BAND (binge by era) — dark texture break
   ============================================================= */
.decades {
  background:
    radial-gradient(60% 100% at 50% 0%, oklch(0.635 0.232 21 / 0.12), transparent 70%),
    oklch(0.14 0.022 275);
  border-block: 1px solid var(--chrome-line);
}
.decades__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.era {
  --c: var(--gold);
  position: relative; overflow: hidden;
  border-radius: var(--radius); padding: clamp(1.6rem, 1rem + 2vw, 2.8rem) 1.4rem;
  background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--chrome-line);
  text-align: center; transition: transform 0.25s var(--ease-out), box-shadow 0.3s;
}
.era:nth-child(2) { --c: var(--cyan); }
.era:nth-child(3) { --c: var(--red); }
/* glow wash that tunes in on hover */
.era::after {
  content: ""; position: absolute; inset: auto -20% -60% -20%; height: 120%;
  background: radial-gradient(circle at 50% 100%, var(--c), transparent 62%);
  opacity: 0; transition: opacity 0.3s; pointer-events: none;
}
/* scanline sweep */
.era::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(var(--c), transparent 45%);
  opacity: 0; transition: opacity 0.3s; mix-blend-mode: screen;
}
.era:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px var(--c), 0 24px 46px -26px var(--c); }
.era:hover::after { opacity: 0.22; }
.era:hover::before { opacity: 0.14; }
.era__big {
  position: relative; z-index: 2;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(3.4rem, 2rem + 8vw, 6rem); line-height: 0.8;
  color: transparent; -webkit-text-stroke: 2px var(--c); text-stroke: 2px var(--c);
  transition: color 0.3s var(--ease-out), transform 0.35s var(--ease-out);
}
.era:hover .era__big { color: var(--c); transform: scale(1.07); }
.era__label { position: relative; z-index: 2; font-family: var(--mono); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); margin-top: 0.6rem; transition: color 0.3s; }
.era:hover .era__label { color: var(--ink-text); }
@media (prefers-reduced-motion: reduce) { .era, .era__big { transition: none; } }

/* =============================================================
   NEWSLETTER
   ============================================================= */
.tune {
  background: var(--paper); color: var(--p-ink);
  border-radius: var(--radius); overflow: hidden;
  display: grid; grid-template-columns: 1.1fr 1fr; box-shadow: var(--shadow);
}
.tune__l { padding: clamp(1.8rem, 1.2rem + 2vw, 3rem); }
.tune__l h2 { font-family: var(--display); font-weight: 400; font-size: var(--h1); line-height: 0.92; text-transform: uppercase; color: var(--p-ink); }
.tune__l p { color: var(--p-soft); margin-top: 0.7rem; max-width: 42ch; }
.tune__form { display: flex; gap: 0.6rem; margin-top: 1.3rem; flex-wrap: wrap; }
.tune__form input {
  flex: 1 1 220px; font: inherit; padding: 0.85rem 1rem; border-radius: 10px;
  border: 2px solid var(--paper-line); background: #fff; color: var(--p-ink);
}
.tune__form input:focus-visible { outline: 3px solid var(--cyan); border-color: transparent; }
.tune__r {
  position: relative; background: oklch(0.14 0.022 275);
  display: grid; place-items: center; padding: 2rem; overflow: hidden;
}
.tune__r .tv {
  font-family: var(--pixel); color: var(--green); font-size: 0.8rem;
  text-align: center; line-height: 2;
}

/* =============================================================
   FOOTER
   ============================================================= */
.foot {
  position: relative; overflow: hidden;
  border-top: none; padding: clamp(2.6rem, 1.6rem + 2.4vw, 3.8rem) 0 2rem;
  background:
    radial-gradient(70% 120% at 15% 0%, oklch(0.635 0.232 21 / 0.08), transparent 60%),
    radial-gradient(70% 120% at 85% 0%, oklch(0.68 0.13 210 / 0.08), transparent 60%),
    oklch(0.145 0.024 275);
}
/* SMPTE color-bar divider */
.foot::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 6px;
  background: linear-gradient(90deg,
    #c9c9c9 0 14.2%, #d6d640 14.2% 28.4%, #40d6d6 28.4% 42.6%,
    #40b040 42.6% 56.8%, #d640d6 56.8% 71%, #d64040 71% 85.2%, #4040d6 85.2% 100%);
}
/* giant faint sign-off watermark */
.foot::after {
  content: "CH.88"; position: absolute; right: -1.5rem; bottom: -2.5rem; z-index: 0;
  font-family: var(--display); font-size: clamp(6rem, 4rem + 12vw, 13rem); line-height: 0.8;
  color: transparent; -webkit-text-stroke: 2px oklch(1 0 0 / 0.045); text-stroke: 2px oklch(1 0 0 / 0.045);
  pointer-events: none;
}
.foot > .wrap { position: relative; z-index: 1; }
.foot__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--gap); }
.foot h4 { font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.8rem; }
.foot__grid a { color: var(--ink-soft); font-size: 0.92rem; display: block; padding: 0.2rem 0; }
.foot__grid a:hover { color: var(--cyan); }
/* keep brand + social links from inheriting the plain-link rule */
.foot .brand { display: inline-flex; padding: 0; color: inherit; }
.foot__brand p { color: var(--ink-soft); font-size: 0.9rem; max-width: 34ch; margin-top: 0.8rem; }
.foot__meta-row { display: flex; align-items: center; gap: 0.8rem; margin-top: 1rem; flex-wrap: wrap; }
.foot__social { display: flex; gap: 0.6rem; }
.foot__social a.icon-btn { display: grid; place-items: center; padding: 0; }
.foot__social a.icon-btn:hover { color: var(--cyan); }
.foot__bottom {
  margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--chrome-line);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: 0.74rem; color: var(--ink-soft);
}

/* =============================================================
   INTERIOR: BREADCRUMB + MASTHEAD
   ============================================================= */
.breadcrumb {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-soft);
}
.breadcrumb a:hover { color: var(--cyan); }
.breadcrumb .sep { color: var(--gold); margin: 0 0.45rem; }

.masthead {
  --accent: var(--cyan);
  position: relative; overflow: hidden;
  padding: clamp(2rem, 1.2rem + 3vw, 3.6rem) 0 clamp(1.6rem, 1rem + 2vw, 2.6rem);
}
.masthead::after {
  content: ""; position: absolute; inset: -40% -10% auto auto; width: 55%; height: 200%; z-index: 1;
  background: radial-gradient(circle at 70% 30%, var(--accent), transparent 62%);
  opacity: 0.14; pointer-events: none;
}
.masthead__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.24; z-index: 0; }
.masthead::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--ink) 12%, oklch(0.17 0.028 275 / 0.5) 75%, oklch(0.17 0.028 275 / 0.35) 100%);
}
.masthead > .wrap { position: relative; z-index: 2; }
.masthead__no { font-family: var(--pixel); font-size: 0.7rem; color: var(--accent); letter-spacing: 0.08em; }
.masthead__title {
  font-family: var(--display); font-weight: 400; font-size: var(--h0);
  line-height: 0.9; text-transform: uppercase; margin: 0.4rem 0 0.6rem;
}
.masthead__title em { font-style: normal; color: var(--accent); }
.masthead__desc { color: var(--ink-soft); max-width: 58ch; font-size: var(--lead); }
.masthead__stats { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.9rem; }
.masthead__stats b { color: var(--gold); }

/* filter chips */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.2rem; }
.chip {
  font-family: var(--mono); font-weight: 700; font-size: 0.76rem;
  text-transform: uppercase; letter-spacing: 0.03em;
  padding: 0.45rem 0.85rem; border-radius: 999px; color: var(--ink-soft);
  box-shadow: inset 0 0 0 1px var(--chrome-line); transition: color 0.15s, box-shadow 0.15s, background 0.15s;
}
.chip:hover { color: var(--ink-text); box-shadow: inset 0 0 0 1px var(--cyan-d); }
.chip.on { background: var(--gold); color: #241800; box-shadow: none; }

/* =============================================================
   INTERIOR: TOOLBAR / SORT
   ============================================================= */
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: var(--gap); flex-wrap: wrap; }
.toolbar__count { font-family: var(--mono); font-size: 0.82rem; color: var(--ink-soft); }
.toolbar__count b { color: var(--ink-text); }
.sort { position: relative; display: inline-flex; align-items: center; }
.sort::after { content: "\25BC"; position: absolute; right: 0.7rem; font-size: 0.6rem; color: var(--cyan); pointer-events: none; }
.sort select {
  font: inherit; font-family: var(--mono); font-weight: 700; font-size: 0.8rem;
  background: var(--ink-3); color: var(--ink-text); border: 0;
  padding: 0.55rem 2.1rem 0.55rem 0.9rem; border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--chrome-line); appearance: none; cursor: pointer;
}

/* =============================================================
   INTERIOR: LAYOUT (main + sidebar)
   ============================================================= */
.layout { display: grid; grid-template-columns: 1fr 320px; gap: clamp(1.4rem, 1rem + 2vw, 2.8rem); align-items: start; }
.side { display: grid; gap: var(--gap); align-content: start; position: sticky; top: 92px; }
.side__box { background: var(--ink-2); border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--chrome-line); padding: 1.2rem; }
.side__box h4 { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }
.side .mini { background: transparent; box-shadow: none; padding: 0.4rem 0; border-radius: 0; }
.side .mini + .mini { border-top: 1px solid var(--chrome-line); }
.side .mini:hover { transform: none; box-shadow: none; }
.side .mini:hover h3 { color: var(--cyan); }

/* =============================================================
   INTERIOR: LIST-CARD GRID (vertical cards on paper)
   ============================================================= */
.cardgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.cardgrid--3 { grid-template-columns: repeat(3, 1fr); }
.lcard {
  background: var(--paper); color: var(--p-ink); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column;
  transition: transform 0.16s var(--ease), box-shadow 0.25s;
}
.lcard:hover { transform: translateY(-4px); box-shadow: var(--shadow), var(--glow-cyan); }
.lcard__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-2); }
.lcard__media img { width: 100%; height: 100%; object-fit: cover; }
.lcard__num { position: absolute; left: 8px; top: 0; font-family: var(--display); font-size: 2.6rem; line-height: 1; color: var(--paper); -webkit-text-stroke: 2px var(--red); text-stroke: 2px var(--red); }
.lcard__body { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.lcard__body h3 { font-family: var(--display); font-weight: 400; font-size: 1.3rem; line-height: 0.98; text-transform: uppercase; color: var(--p-ink); }
.lcard__body p { font-size: 0.88rem; color: var(--p-soft); line-height: 1.45; }
.lcard__meta { margin-top: auto; display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; font-family: var(--mono); font-size: 0.72rem; color: var(--p-soft); }
.lcard__meta .comments { color: var(--red-d); }
.cardgrid .feed-ad, .cardgrid .ad { grid-column: 1 / -1; }

/* =============================================================
   INTERIOR: PAGINATION
   ============================================================= */
.pager { display: flex; gap: 0.4rem; justify-content: center; align-items: center; margin-top: clamp(2rem, 1.4rem + 2vw, 3rem); flex-wrap: wrap; }
.pager a, .pager span {
  font-family: var(--mono); font-weight: 700; font-size: 0.85rem;
  min-width: 44px; height: 44px; padding: 0 0.7rem; display: grid; place-items: center;
  border-radius: 9px; color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--chrome-line);
  transition: color 0.15s, box-shadow 0.15s;
}
.pager a:hover { color: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan-d); }
.pager .on { background: var(--cyan); color: #062028; box-shadow: none; }
.pager .dots { box-shadow: none; }

/* =============================================================
   ARTICLE HERO
   ============================================================= */
.arthero { position: relative; overflow: hidden; padding: clamp(1.6rem, 1rem + 2vw, 2.8rem) 0 0; }
.arthero__wrap { max-width: 860px; }
.arthero .tag { margin: 1rem 0 0.6rem; }
.arthero h1 {
  font-family: var(--display); font-weight: 400; font-size: var(--h0);
  line-height: 0.9; text-transform: uppercase; letter-spacing: 0.005em;
}
.arthero h1 em { font-style: normal; color: var(--red); }
.deck { font-size: var(--lead); color: var(--ink-soft); margin-top: 1rem; max-width: 62ch; }

.byline { display: flex; align-items: center; gap: 0.9rem; margin: 1.4rem 0; flex-wrap: wrap; }
.avatar {
  width: 46px; height: 46px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center;
  font-family: var(--pixel); font-size: 0.7rem; color: #10131c;
  background: linear-gradient(135deg, var(--gold), var(--cyan));
}
.byline__who { font-weight: 800; line-height: 1.2; }
.byline__meta { font-family: var(--mono); font-size: 0.76rem; color: var(--ink-soft); }

/* share bar */
.sharebar { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.sharebar__label { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); margin-right: 0.2rem; }
.share-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--mono); font-weight: 700; font-size: 0.76rem;
  padding: 0.5rem 0.8rem; border-radius: 8px; color: var(--ink-soft);
  box-shadow: inset 0 0 0 1px var(--chrome-line); transition: color 0.15s, box-shadow 0.15s;
}
.share-btn svg { width: 16px; height: 16px; }
.share-btn:hover { color: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan-d); }

/* framed hero figure (paper/CRT) */
.figure { position: relative; background: var(--paper); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); margin-top: 1.4rem; }
.figure__media { position: relative; aspect-ratio: 16 / 8; background: var(--ink-2); }
.figure figcaption { font-family: var(--mono); font-size: 0.74rem; color: var(--p-soft); padding: 0.7rem 1.1rem; }

/* =============================================================
   LISTICLE ENTRIES
   ============================================================= */
.entries { margin-top: var(--gap); }
.prose p { color: var(--ink-soft); margin-bottom: 1.1rem; max-width: 68ch; }
.prose p:first-of-type { font-size: var(--lead); color: var(--ink-text); }

.entry {
  background: var(--paper); color: var(--p-ink); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); margin-bottom: var(--gap); position: relative;
}
.entry__head { display: flex; gap: 1rem; align-items: flex-start; padding: 1.2rem 1.4rem 0.4rem; }
.entry__rank {
  font-family: var(--display); font-size: clamp(2.6rem, 1.6rem + 3vw, 4.4rem); line-height: 0.75;
  color: transparent; -webkit-text-stroke: 2px var(--red); text-stroke: 2px var(--red); flex-shrink: 0;
}
.entry:nth-child(3n+2) .entry__rank { -webkit-text-stroke-color: var(--cyan-d); }
.entry:nth-child(3n) .entry__rank { -webkit-text-stroke-color: oklch(0.66 0.14 80); }
.entry__title { font-family: var(--display); font-weight: 400; font-size: var(--h3); line-height: 0.98; text-transform: uppercase; color: var(--p-ink); padding-top: 0.3rem; }
.entry__media { position: relative; aspect-ratio: 16 / 9; margin: 0.9rem 0; background: var(--ink-2); }
.entry__body { padding: 0 1.4rem 1.4rem; }
.entry__body p { color: var(--p-soft); margin-bottom: 0.9rem; }
.entry__body p:last-child { margin-bottom: 0; }

/* author bio */
.bio { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: center;
  background: var(--ink-2); border-radius: var(--radius); padding: 1.3rem; box-shadow: inset 0 0 0 1px var(--chrome-line); margin-top: var(--gap); }
.bio .avatar { width: 60px; height: 60px; }
.bio h4 { font-family: var(--display); font-weight: 400; font-size: 1.3rem; text-transform: uppercase; }
.bio p { color: var(--ink-soft); font-size: 0.9rem; margin-top: 0.3rem; }

/* =============================================================
   COMMENTS
   ============================================================= */
.discussion { background: var(--paper); color: var(--p-ink); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(1.3rem, 1rem + 1.4vw, 2rem); margin-top: var(--gap); }
.discussion__head { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 1.2rem; }
.discussion__head h3 { font-family: var(--display); font-weight: 400; font-size: var(--h3); text-transform: uppercase; color: var(--p-ink); }
.discussion__head span { font-family: var(--mono); font-size: 0.8rem; color: var(--p-soft); }
.comment-form { display: grid; gap: 0.6rem; margin-bottom: 1.6rem; }
.comment-form textarea, .comment-form input {
  font: inherit; width: 100%; padding: 0.8rem 1rem; border-radius: 10px;
  border: 2px solid var(--paper-line); background: #fff; color: var(--p-ink); resize: vertical;
}
.comment-form textarea:focus-visible, .comment-form input:focus-visible { outline: 3px solid var(--cyan); border-color: transparent; }
.comment-form .row { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.comment-form input { flex: 1 1 200px; }
.comment { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; padding: 1.1rem 0; border-top: 1px solid var(--paper-line); }
.comment__av { width: 42px; height: 42px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center; font-family: var(--pixel); font-size: 0.62rem; color: #10131c; background: linear-gradient(135deg, var(--cyan), var(--gold)); }
.comment__meta { font-family: var(--mono); font-size: 0.74rem; color: var(--p-soft); margin-bottom: 0.25rem; }
.comment__meta b { font-family: var(--body); font-size: 0.92rem; color: var(--p-ink); margin-right: 0.5rem; }
.comment__body { color: var(--p-ink); font-size: 0.94rem; }
.comment__actions { display: flex; gap: 1rem; margin-top: 0.5rem; font-family: var(--mono); font-size: 0.74rem; }
.comment__actions button { color: var(--p-soft); }
.comment__actions button:hover { color: var(--red-d); }
.comment--reply { margin-left: 3.3rem; }
.comment-note { font-family: var(--mono); font-size: 0.72rem; color: var(--p-soft); margin-top: 0.6rem; }

/* =============================================================
   CARD ROLLOVERS (countdown + list cards)
   ============================================================= */
.post__media .ph, .post__media img,
.lcard__media .ph, .lcard__media img { transition: transform 0.45s var(--ease-out); }
.post:hover .post__media .ph, .post:hover .post__media img,
.lcard:hover .lcard__media .ph, .lcard:hover .lcard__media img { transform: scale(1.06); }
.post__num, .lcard__num { transition: filter 0.3s, transform 0.3s var(--ease-out); }
.post:hover .post__num, .lcard:hover .lcard__num { filter: drop-shadow(0 0 10px var(--red)); transform: scale(1.09); }
.post__body h3, .lcard__body h3 { transition: color 0.2s; }
.post:hover .post__body h3, .lcard:hover .lcard__body h3 { color: var(--red-d); }
.post:hover .post__body .tag, .lcard:hover .lcard__body .tag { background: oklch(0.635 0.232 21 / 0.18); }
@media (prefers-reduced-motion: reduce) {
  .post__media .ph, .post__media img, .lcard__media .ph, .lcard__media img,
  .post__num, .lcard__num { transition: none; }
  .post:hover .post__media .ph, .post:hover .post__media img,
  .lcard:hover .lcard__media .ph, .lcard:hover .lcard__media img,
  .post:hover .post__num, .lcard:hover .lcard__num { transform: none; }
}

/* =============================================================
   REVEAL ON SCROLL  (default visible; armed only under html.js)
   ============================================================= */
html.js .reveal { opacity: 0; transform: translateY(24px); }
html.js .reveal.in { opacity: 1; transform: none; transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1 !important; transform: none !important; }
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 1000px) {
  .hero__grid { grid-template-columns: 1fr; }
  .feature { grid-row: auto; }
  .upnext { grid-template-columns: 1fr 1fr; }
  .channels .channel { grid-column: span 3; }
  .channels .channel:last-child { grid-column: span 6; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .nav, .decade { display: none; }
  .burger { display: grid; }
  .feed { grid-template-columns: 1fr; }
  .tune { grid-template-columns: 1fr; }
  .tune__r { min-height: 180px; }
  .decades__grid { grid-template-columns: 1fr; }
  .channels { grid-template-columns: repeat(2, 1fr); }
  .channels .channel { grid-column: span 1; }
  .channels .channel:last-child { grid-column: 1 / -1; }
  .post { grid-template-columns: 1fr; }
  .post__media img { min-height: 200px; }
  .upnext { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; }

  /* mobile nav drawer */
  .nav.open {
    display: block; position: fixed; inset: 68px 0 auto 0; z-index: 90;
    background: var(--ink); border-bottom: 1px solid var(--chrome-line);
    padding: 1rem 1.2rem 1.4rem;
  }
  .nav.open .nav__list { flex-direction: column; align-items: stretch; gap: 0.2rem; }
  .nav.open .nav__list a { padding: 0.8rem 0.6rem; font-size: 1rem; }
  .decade.open { display: inline-flex; margin: 0.6rem 0 0; }
}
@media (max-width: 420px) {
  .feature__meta, .post__meta { font-size: 0.68rem; }
  .brand__name { font-size: 1.25rem; }
}

/* ---------- interior templates ---------- */
@media (max-width: 940px) {
  .layout { grid-template-columns: 1fr; }
  .side { position: static; grid-template-columns: 1fr 1fr; }
  .side__box { grid-column: auto; }
  .cardgrid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .cardgrid, .cardgrid--3 { grid-template-columns: 1fr; }
  .side { grid-template-columns: 1fr; }
  .entry__head { flex-direction: row; }
  .comment--reply { margin-left: 1.4rem; }
}
@media (max-width: 480px) {
  .chip { padding: 0.55rem 0.95rem; }          /* comfier tap target */
  .ad--rect { max-width: 100%; }
  .sharebar { gap: 0.4rem; }
  .arthero h1, .masthead__title { hyphens: none; word-break: normal; }
  .comment-form .row .btn { width: 100%; justify-content: center; }
}