/* =========================================================================
   Scoring the News — the screening room.
   A worn 70s TV set is the centerpiece: the screen is the YouTube player, the
   other videos live in a playlist to its right (same height as the TV), the
   audience reacts in a cycling wall of bubbles below, and the full essay reads
   underneath. Reuses sitewide tokens + chrome from /styles.css.
   ========================================================================= */

body.news-page {
  background:
    radial-gradient(ellipse 120% 50% at 50% 0%,
      rgba(200, 58, 20, 0.30) 0%, rgba(120, 26, 14, 0.10) 34%, transparent 64%),
    linear-gradient(180deg,
      #1c0710 0%, #2a0b16 16%, #220812 42%, #170711 70%, #0c0509 88%, #060305 100%);
  background-attachment: fixed;
}
.news-stars { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.screening { position: relative; z-index: 1; overflow-x: clip; }

/* a faint distant galaxy off in the top corner, for a little ethereal interest */
.news-galaxy {
  position: absolute; top: 4.5rem; right: 7%; z-index: 0;
  width: 200px; height: 104px; pointer-events: none; opacity: 0.55;
  transform: rotate(-22deg);
}
.news-galaxy__disc {
  position: absolute; inset: 0; border-radius: 50%; filter: blur(2px);
  background: radial-gradient(closest-side,
    rgba(255,246,232,0.85) 0%, rgba(236,196,150,0.4) 22%,
    rgba(180,140,230,0.22) 46%, rgba(120,90,180,0.08) 66%, transparent 78%);
}
.news-galaxy__disc::after {            /* a faint dust lane across the disc */
  content: ""; position: absolute; left: 6%; right: 6%; top: 49%; height: 3px;
  background: rgba(20,8,18,0.45); filter: blur(2px); border-radius: 50%;
}
.news-galaxy__core {
  position: absolute; top: 50%; left: 50%; width: 26px; height: 13px;
  transform: translate(-50%,-50%);
  background: radial-gradient(closest-side, rgba(255,251,240,0.95), rgba(255,230,200,0.4) 55%, transparent 75%);
  border-radius: 50%; filter: blur(0.5px);
}
.news-galaxy__halo {
  position: absolute; inset: -34%; border-radius: 50%; filter: blur(9px);
  background: radial-gradient(closest-side, rgba(190,150,255,0.10), transparent 70%);
}

/* -------- Hero — matched to home/library so "Music by" lands identically -------- */
.screening__head {
  position: relative; z-index: 2;
  /* wide enough that "scoring the news." stays on one line; the credit is
     centered regardless, and its vertical spot comes from the padding-top
     (matched to home/library), so widening this doesn't move it. */
  max-width: 60rem; margin: 0 auto; text-align: center;
  /* max() floor keeps the credit clear of the nav on short/landscape screens */
  padding: max(6.5rem, calc(50vh - 212px)) 1.2rem 0;
}
.screening__head .hero__credit { margin-bottom: 1.1rem; }
.screening__head .section__title { margin: 0 0 0.7rem; }
.screening__head .section__intro { margin: 0 auto; text-align: center; }

/* -------- The theater (TV + playlist) -------- */
.theater { max-width: 80rem; margin: 3rem auto 0; padding: 0 1.5rem; }
.theater__top {
  display: grid; gap: 1.5rem;
  grid-template-columns: minmax(0, 1.75fr) minmax(15rem, 1fr);
  align-items: start;
}

/* ===== The television set ===== */
.tv { position: relative; }
.tv__cabinet {
  position: relative;
  border-radius: 22px 22px 16px 16px;
  padding: 22px 24px 0;
  background:
    repeating-linear-gradient(91deg, rgba(0,0,0,0.18) 0 1px, rgba(255,235,200,0.022) 1px 3px, rgba(0,0,0,0) 3px 7px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.06) 0 9px, rgba(120,70,30,0.07) 9px 21px, rgba(0,0,0,0.03) 21px 33px),
    radial-gradient(120% 80% at 24% 8%, rgba(160,108,60,0.4), transparent 55%),
    radial-gradient(120% 95% at 86% 96%, rgba(14,7,3,0.6), transparent 60%),
    linear-gradient(157deg, #5a3f28 0%, #422c1a 45%, #261810 100%);
  box-shadow:
    inset 0 2px 1px rgba(255,225,190,0.13),
    inset 0 -7px 14px rgba(0,0,0,0.65),
    inset 0 0 0 1px rgba(0,0,0,0.45),
    0 34px 80px rgba(0,0,0,0.62),
    0 8px 18px rgba(0,0,0,0.5),
    0 0 90px rgba(200,58,20,0.12);
}
/* grime + edge wear + a sun-faded patch */
.tv__cabinet::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(52% 42% at 17% 15%, rgba(214,176,128,0.12), transparent 70%),
    radial-gradient(120% 100% at 50% 122%, rgba(0,0,0,0.4), transparent 55%),
    linear-gradient(90deg, rgba(0,0,0,0.22), transparent 7%, transparent 93%, rgba(0,0,0,0.22));
  mix-blend-mode: multiply; opacity: 0.85;
}
/* wear pass: scratches, scuffed corners, dust + nicks */
.tv__wear {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background:
    linear-gradient(72deg, transparent 38.4%, rgba(255,240,220,0.08) 39%, transparent 39.7%),
    linear-gradient(107deg, transparent 60.5%, rgba(255,240,220,0.06) 61%, transparent 61.6%),
    linear-gradient(96deg, transparent 73%, rgba(255,240,220,0.05) 73.4%, transparent 74%),
    linear-gradient(83deg, transparent 20.2%, rgba(0,0,0,0.16) 20.8%, transparent 21.4%),
    radial-gradient(44% 32% at 4% 98%, rgba(0,0,0,0.36), transparent 70%),
    radial-gradient(36% 28% at 98% 4%, rgba(0,0,0,0.28), transparent 70%),
    radial-gradient(2px 2px at 31% 41%, rgba(255,240,220,0.13), transparent 60%),
    radial-gradient(1.5px 1.5px at 63% 21%, rgba(255,240,220,0.10), transparent 60%),
    radial-gradient(2px 2px at 79% 61%, rgba(0,0,0,0.22), transparent 60%),
    radial-gradient(1.5px 1.5px at 47% 84%, rgba(0,0,0,0.2), transparent 60%),
    radial-gradient(1.5px 1.5px at 12% 55%, rgba(255,240,220,0.09), transparent 60%);
  mix-blend-mode: overlay; opacity: 0.95;
}
.tv__screen-wrap {
  position: relative; z-index: 2;
  border-radius: 16px; padding: 16px;
  background:
    radial-gradient(120% 130% at 50% 0%, #29251f, #131009 72%),
    linear-gradient(#0c0a08, #0c0a08);
  box-shadow:
    inset 0 2px 3px rgba(0,0,0,0.9),
    inset 0 0 0 2px rgba(0,0,0,0.72),
    inset 0 0 20px rgba(0,0,0,0.7),
    0 1px 0 rgba(255,235,200,0.06);
}
.tv__screen {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: 14px / 26px; overflow: hidden;
  background: radial-gradient(120% 120% at 50% 50%, #0a0d0c, #000 80%);
  box-shadow: inset 0 0 60px rgba(0,0,0,0.95), inset 0 0 0 2px rgba(255,255,255,0.03);
}
.tv__screen #tv-screen, .tv__screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tv__reflection {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: linear-gradient(122deg, rgba(255,255,255,0) 18%, rgba(255,255,255,0.10) 30%, rgba(255,255,255,0.02) 41%, rgba(255,255,255,0) 53%);
  opacity: 0.8; transition: opacity 700ms ease;
}
.tv__glass {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(ellipse 136% 126% at 50% 50%, transparent 50%, rgba(0,0,0,0.58) 100%),
    repeating-linear-gradient(rgba(0,0,0,0) 0 1.5px, rgba(0,0,0,0.075) 1.5px 3px),
    linear-gradient(rgba(255,255,255,0.07), rgba(255,255,255,0) 14%);
  opacity: 0.92; transition: opacity 800ms ease;
}
.tv.is-playing .tv__glass { opacity: 0.3; }
.tv.is-playing .tv__reflection { opacity: 0.15; }

.tv__panel { position: relative; z-index: 2; display: flex; align-items: center; gap: 1.1rem; padding: 14px 8px 16px; }
/* aged molded brand badge */
.tv__brand {
  font-family: "Cinzel", serif; font-weight: 600; font-size: 0.62rem; letter-spacing: 0.3em;
  color: #b39463; white-space: nowrap;
  text-shadow: 0 1px 0 rgba(0,0,0,0.78), 0 -0.5px 0 rgba(255,235,200,0.2);
}
.tv__brand sup { font-size: 0.55em; letter-spacing: 0; opacity: 0.65; vertical-align: super; }
.tv__grille {
  flex: 1; height: 15px; border-radius: 4px;
  background:
    radial-gradient(circle at 1.5px 1.5px, rgba(0,0,0,0.55) 0.8px, transparent 1.3px) 0 0 / 4px 4px,
    linear-gradient(#1a120c, #0d0907);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.85), inset 0 -1px 0 rgba(255,235,200,0.06);
  opacity: 0.95;
}
.tv__controls { display: inline-flex; align-items: center; gap: 0.75rem; }
.tv__led {
  width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #6b1a10, #380c07);
  box-shadow: inset 0 0 1px rgba(0,0,0,0.8);
  transition: background 400ms ease, box-shadow 400ms ease;
}
.tv.is-playing .tv__led {
  background: radial-gradient(circle at 40% 35%, #ff7a4d, #d23b14);
  box-shadow: 0 0 9px 1px rgba(242,120,74,0.85);
}
.knob {
  position: relative; width: 19px; height: 19px; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #e6c489 0%, #9c7333 38%, #5a3c18 72%, #2c1c0c 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.5), inset 0 -2px 3px rgba(0,0,0,0.6), 0 1px 2px rgba(0,0,0,0.7);
}
.knob::after { content: ""; position: absolute; top: 2px; left: 50%; width: 1.5px; height: 5px; background: rgba(30,18,8,0.9); transform: translateX(-50%); border-radius: 1px; }
.knob--b { width: 16px; height: 16px; }

/* ===== The playlist / screening room (height synced to the TV by JS) ===== */
.channels {
  display: flex; flex-direction: column; min-height: 16rem;
  background: rgba(255, 255, 255, 0.022);
  border: 1px solid var(--ink-line); border-radius: 14px;
  padding: 1.05rem 0.7rem 0.8rem;
}
.channels__label {
  font-family: "Cinzel", serif; font-size: 0.68rem; letter-spacing: 0.32em;
  text-transform: uppercase; color: rgba(248, 215, 175, 0.62);
  text-align: center; margin: 0 0 0.9rem;
}
.channels__list {
  list-style: none; margin: 0; padding: 0 0.2rem;
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 0.45rem;
}
.channel {
  display: flex; gap: 0.7rem; align-items: center; width: 100%;
  background: none; border: 0; padding: 0.4rem; border-radius: 9px;
  cursor: pointer; text-align: left; color: inherit; transition: background 180ms ease;
}
.channel:hover { background: rgba(255, 255, 255, 0.045); }
.channel:focus-visible { outline: 2px solid rgba(242,151,74,0.8); outline-offset: 1px; }
.channel__thumb-wrap {
  position: relative; flex: 0 0 auto; width: 5.6rem; aspect-ratio: 16 / 9;
  border-radius: 6px; overflow: hidden; background: #000; border: 1px solid var(--ink-line);
}
.channel__thumb { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.82; transition: opacity 180ms ease; }
.channel__title { font-family: "Inter", sans-serif; font-size: 0.78rem; line-height: 1.25; color: var(--ink-quiet); }
.channel:hover .channel__thumb { opacity: 1; }
.channel.is-active { background: rgba(242, 151, 74, 0.10); }
.channel.is-active .channel__thumb-wrap { border-color: rgba(242, 151, 74, 0.9); box-shadow: 0 0 12px rgba(242, 151, 74, 0.3); }
.channel.is-active .channel__thumb { opacity: 1; }
.channel.is-active .channel__title { color: var(--ink); }

/* ===== The audience — a cycling wall of reactions across the full width ===== */
.audience { max-width: 80rem; margin: 2rem auto 0; padding: 0 1.5rem; }
.audience__wall {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.75rem; align-items: start;
}
.slot { min-height: 0; }
/* equal-height quote boxes; the text font is auto-sized to fill each box
   (news.js fitBubble), so the row never bounces and the varied sizes add
   some visual texture. */
.bubble {
  position: relative; height: 8rem; display: flex; flex-direction: column;
  padding: 0.7rem 0.95rem 0.75rem; border-radius: 15px; overflow: hidden;
  background: #2a1a23; border: 1px solid var(--ink-line);
  box-shadow: inset 0 1px 0 rgba(255, 235, 200, 0.05), 0 6px 16px rgba(0, 0, 0, 0.28);
  animation: bubbleIn 460ms cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
/* a little speech-bubble tail at the bottom, on one side or the other */
.bubble--tl { border-bottom-left-radius: 4px; }
.bubble--tr { border-bottom-right-radius: 4px; }
.bubble--tl::after, .bubble--tr::after {
  content: ""; position: absolute; bottom: -7px; width: 13px; height: 13px;
  background: #2a1a23; transform: rotate(45deg);
  border-right: 1px solid var(--ink-line); border-bottom: 1px solid var(--ink-line);
}
.bubble--tl::after { left: 17px; }
.bubble--tr::after { right: 17px; }
.bubble--out { animation: bubbleOut 240ms ease forwards; }
.bubble__fit { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; text-align: center; }
.bubble__text { margin: 0; font-family: "Newsreader", Georgia, serif; font-size: 18px; line-height: 1.22; color: var(--ink); }
.bubble__who { flex: 0 0 auto; margin-top: 0.35rem; text-align: center; font-family: "Inter", sans-serif; font-size: 0.64rem; letter-spacing: 0.03em; color: var(--ink-faint); }
@keyframes bubbleIn { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes bubbleOut { from { opacity: 1; } to { opacity: 0; transform: translateY(-7px) scale(0.96); } }
.audience__prompt {
  text-align: center; margin: 1rem 0 0;
  font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: 0.98rem; color: var(--ink-quiet);
}
.audience__add {
  display: block; width: max-content; margin: 0.9rem auto 0;
  font-family: "Inter", sans-serif; font-size: 0.74rem; letter-spacing: 0.03em;
  color: rgba(248, 215, 175, 0.82); text-decoration: none;
  border-bottom: 1px solid rgba(248, 215, 175, 0.32); padding-bottom: 2px;
  transition: color 200ms ease, border-color 200ms ease;
}
.audience__add:hover { color: var(--ink); border-color: rgba(248, 215, 175, 0.7); }

/* ===== Reading (full essay + info, below the screening area) ===== */
.reading { max-width: 44rem; margin: 3rem auto 0; padding: 0 1.5rem; text-align: center; }
.reading__title { font-family: "Cinzel", serif; font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.15rem); color: var(--ink); margin: 0 0 0.4rem; }
.reading__source { font-family: "Inter", sans-serif; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(248, 215, 175, 0.7); margin: 0 0 1.2rem; }
.reading__blurb { font-family: "Newsreader", Georgia, serif; font-weight: 300; font-style: italic; font-size: clamp(1.12rem, 1.7vw, 1.34rem); line-height: 1.55; color: var(--ink); margin: 0 auto 0.4rem; max-width: 38rem; text-wrap: pretty; }
.reading__essay { text-align: left; max-width: 38rem; margin: 1.6rem auto 0; }
.reading__essay:empty { display: none; }
.reading__essay p { font-family: "Newsreader", Georgia, serif; font-weight: 300; font-size: 1.12rem; line-height: 1.74; color: rgba(244, 234, 216, 0.93); margin: 0 0 1.2rem; }
.reading__essay p:last-child { margin-bottom: 0; }
.reading__essay em { font-style: italic; }
.reading__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; margin-top: 1.8rem; }
.reading__links:empty { display: none; }
.np-link {
  font-family: "Inter", sans-serif; font-size: 0.74rem; letter-spacing: 0.04em;
  color: rgba(248, 215, 175, 0.8); text-decoration: none;
  border-bottom: 1px solid rgba(248, 215, 175, 0.32); padding-bottom: 2px;
  transition: color 240ms ease, border-color 240ms ease;
}
.np-link:hover { color: var(--ink); border-color: rgba(248, 215, 175, 0.7); }

/* -------- Responsive -------- */
@media (max-width: 900px) {
  /* minmax(0,1fr) keeps the column from expanding to the horizontal
     channel strip's intrinsic width — without it the TV blows past the
     viewport and gets clipped. */
  .theater__top { grid-template-columns: minmax(0, 1fr); }
  .tv, .channels { min-width: 0; }
  /* compact horizontal strip — small thumb + title side by side — so it
     doesn't eat the vertical space the comments need below it */
  .channels { height: auto !important; min-height: 0; padding: 0.7rem 0.55rem 0.5rem; }
  .channels__label { margin-bottom: 0.6rem; }
  .channels__list { flex-direction: row; overflow-x: auto; overflow-y: hidden; gap: 0.5rem; padding-bottom: 0.35rem; }
  .channel { flex: 0 0 auto; width: auto; max-width: 13rem; flex-direction: row; align-items: center; gap: 0.55rem; padding: 0.3rem 0.4rem; }
  .channel__thumb-wrap { width: 5rem; }
  .channel__title { font-size: 0.72rem; line-height: 1.2; }
  /* one reaction at a time on mobile — hide the other slots so there are no
     empty cells or gaps */
  .audience__wall { grid-template-columns: 1fr; }
  .audience__wall .slot:nth-child(n+2) { display: none; }
  .bubble { height: 7.5rem; }
  .news-galaxy { width: 130px; height: 70px; top: 4rem; right: 4%; }
}

@media (prefers-reduced-motion: reduce) {
  .tv__glass, .tv__reflection { transition: none; }
  .bubble { animation: none; }
}