/* ==========================================================================
   LoungeTV.co.uk (Loungest WebTV)
   Design language: late-night velvet bar.
   Tokens are brand-derived: crimson #e52029 and ink #211f20 are sampled
   from the existing Loungest logo, not invented.

   Shape rule (locked): every corner in the system is --r (2px). Sharp,
   editorial, applied to cards, media, buttons and inputs alike.
   Accent rule (locked): crimson is the ONLY accent on the page.
   Theme rule (locked): the page is dark. No section inverts.
   ========================================================================== */

:root {
  /* Type */
  --font-display: 'Syne', 'Trebuchet MS', sans-serif;
  --font-body: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'DM Mono', 'SFMono-Regular', Consolas, monospace;

  /* Surface ramp (warm near-black, never #000) */
  --ink-900: #0d0c0f;
  --ink-850: #121116;
  --ink-800: #17161c;
  --ink-700: #201f26;

  /* Hairlines */
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.18);

  /* Brand accent (single) */
  --red: #e52029;
  --red-deep: #a8161d;
  --red-text: #ff6169;   /* AA-safe crimson for small text on ink */

  /* Ink on dark */
  --paper: #f2efe9;
  --muted: #9d979b;

  /* System */
  --r: 2px;
  --shell: 1280px;
  --gutter: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t: 0.4s var(--ease);

  /* Consumed by accessibility.js / gdpr.js */
  --accent-cyan: #e52029;
  --border-glass: rgba(255, 255, 255, 0.09);
  --radius-xl: 2px;
  --radius-2xl: 2px;
  --radius-full: 2px;
  --text-primary: #f2efe9;
  --text-muted: #9d979b;
  --color-border: rgba(255, 255, 255, 0.09);
  --color-bg-deep: #0d0c0f;
  --color-bg-card: #17161c;
  --color-text-main: #f2efe9;
  --color-text-muted: #9d979b;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  font-family: var(--font-body);
  background: var(--ink-900);
  color: var(--paper);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

::selection { background: var(--red); color: #fff; }

:focus-visible {
  outline: 2px solid var(--red-text);
  outline-offset: 3px;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--red);
  color: #fff;
  padding: 12px 20px;
  font-weight: 600;
}
.skip-link:focus { left: 12px; top: 12px; }

/* --- Typography scale --- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.35rem, 4.4vw, 3.9rem); }
h2 { font-size: clamp(2rem, 4vw, 3.3rem); }
h3 { font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.2; }

p { max-width: 62ch; }

.lede {
  font-size: clamp(1.02rem, 1.3vw, 1.18rem);
  color: var(--muted);
}

/* The one eyebrow style. Budget: max 1 per 3 sections. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--red-text);
  display: block;
  margin-bottom: 18px;
}

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  white-space: nowrap;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.94rem;
  letter-spacing: 0.01em;
  padding: 15px 30px;
  border-radius: var(--r);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t), transform 0.15s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--red);
  color: #fff;             /* 4.6:1 on crimson, AA */
  border-color: var(--red);
}
.btn-primary:hover { background: var(--red-deep); border-color: var(--red-deep); }

.btn-ghost {
  background: rgba(13, 12, 15, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--paper);
  border-color: var(--line-strong);
}
.btn-ghost:hover { border-color: var(--paper); background: rgba(13, 12, 15, 0.82); }
@media (prefers-reduced-transparency: reduce) {
  .btn-ghost { background: var(--ink-800); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* --- Scroll reveal ---
   Gated on html.lm-js so content stays visible if scripting never runs. */
html.lm-js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-in { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.lm-js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   HEADER  (one line at desktop, 72px tall)
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  height: 72px;
  display: flex;
  align-items: center;
  background: rgba(13, 12, 15, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
@media (prefers-reduced-transparency: reduce) {
  .site-header { background: var(--ink-900); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.brand img { height: 46px; width: auto; }

.nav-cluster { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }

.main-nav ul { display: flex; align-items: center; gap: clamp(14px, 1.9vw, 28px); }
.main-nav a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color var(--t), border-color var(--t);
}
.main-nav a:hover { color: var(--paper); border-bottom-color: var(--red); }

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  padding: 9px 11px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--paper);
  margin: 4px 0;
}

@media (max-width: 960px) {
  .nav-toggle { display: block; }
  .main-nav {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--ink-850);
    border-bottom: 1px solid var(--line);
    display: none;
  }
  .main-nav.open { display: block; }
  .main-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 20px; }
  .main-nav a { display: block; padding: 13px 0; border-bottom: 1px solid var(--line); }
  .main-nav a:hover { border-bottom-color: var(--line); }
}

/* ==========================================================================
   HERO  (asymmetric split: copy left, live player right)
   ========================================================================== */
.hero {
  position: relative;
  min-height: min(680px, 100dvh);
  display: flex;
  align-items: center;
  padding-top: clamp(48px, 7vw, 88px);
  padding-bottom: clamp(56px, 8vw, 104px);
  overflow: hidden;
  isolation: isolate;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
/* The room's own screen is on the right of the frame. Pulled left it sits behind
   the player instead of poking out above it and competing with it. */
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 26% 50%; }

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Retuned for the full width headline: the top band carries type across the
     whole shell now, so it can no longer fall away on the right. */
  background:
    linear-gradient(100deg, rgba(13,12,15,0.96) 0%, rgba(13,12,15,0.88) 32%, rgba(13,12,15,0.60) 66%, rgba(13,12,15,0.50) 100%),
    linear-gradient(to bottom, rgba(13,12,15,0.62) 0%, rgba(13,12,15,0.12) 30%, rgba(13,12,15,0) 52%),
    linear-gradient(to top, var(--ink-900) 0%, rgba(13,12,15,0.12) 34%);
}

/* The headline spans the shell and the split sits beneath it. In a half width
   column this nine word line resolved in four lines at every desktop size; the
   cap is two, and the fix is column width, not a smaller headline. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  grid-template-areas:
    "title  title"
    "copy   player";
  column-gap: clamp(36px, 5vw, 76px);
  row-gap: clamp(28px, 3.6vw, 46px);
  align-items: start;
  width: 100%;
}
.hero-title { grid-area: title; }
.hero-content { grid-area: copy; }
.hero .player-card { grid-area: player; }

.hero h1 { font-size: clamp(2.2rem, 5.1vw, 4.15rem); max-width: 26ch; }
.hero h1 em {
  font-style: italic;
  color: var(--red-text);
  line-height: 1.14;      /* the g in "lounge" clips at the h1 leading of 1.08 */
  padding-bottom: 0.06em;
  display: inline-block;
}

.hero-sub {
  margin-top: 22px;
  max-width: 46ch;
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  color: var(--muted);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.btn-play { width: 13px; height: 13px; fill: currentColor; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Player card: the hero's real, functional asset */
.player-card {
  display: flex;
  flex-direction: column;
  filter: drop-shadow(0 26px 60px rgba(0, 0, 0, 0.7));
}

.player-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-strong);
}
.player-head .player-state {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red-text);
  white-space: nowrap;
}

/* The embedded player draws a 16:9 stage plus 159px of its own chrome (info
   bar, scrubber, transport). A percentage padding resolves against the width,
   so this reserves exactly stage + chrome at every column width, and the frame
   never clips its own controls. */
/* On-air light. The ring pulse is the only looping motion on the page and it
   stops with the global reduced-motion rule. */
.player-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
  animation: ltv-onair 2.6s var(--ease) infinite;
}
@keyframes ltv-onair {
  0%   { box-shadow: 0 0 0 0 rgba(229, 32, 41, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(229, 32, 41, 0); }
  100% { box-shadow: 0 0 0 0 rgba(229, 32, 41, 0); }
}
@media (prefers-reduced-motion: reduce) { .player-dot { animation: none; } }

/* Shown only when scripting is off, where the embedded player cannot run. */
.player-noscript {
  display: block;
  padding: 22px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--ink-850);
  font-size: 0.92rem;
  color: var(--muted);
}
.player-noscript a { color: var(--red-text); text-decoration: underline; text-underline-offset: 3px; }

.player-frame-wrap {
  position: relative;
  width: 100%;
  padding-bottom: calc(56.25% + 160px);
  background: #000;
  border-radius: var(--r);
  overflow: hidden;
}
.player-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Brief attention ring when "Listen live free" moves focus to the player. */
.player-card { border-radius: var(--r); transition: box-shadow 0.3s var(--ease); }
.player-card.player-attn {
  box-shadow: 0 0 0 2px var(--red), 0 26px 60px rgba(0, 0, 0, 0.7);
}
@media (prefers-reduced-motion: reduce) {
  .player-card.player-attn { transition: none; }
}

@media (max-width: 900px) {
  .hero { min-height: 0; }
  .hero-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "copy" "player";
    row-gap: 32px;
  }
  .hero-media img { object-position: 62% 50%; }
  .hero h1 { max-width: none; }
  .hero-scrim {
    background:
      linear-gradient(to bottom, rgba(13,12,15,0.92) 0%, rgba(13,12,15,0.86) 46%,
                                 rgba(13,12,15,0.72) 72%, var(--ink-900) 100%);
  }
}
@media (max-width: 560px) {
  .hero-actions { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .hero-actions .btn { width: 100%; }
}

/* ==========================================================================
   GENRE GRID
   Television, not album art: each genre is a 16:9 still with the copy on the
   card surface beneath it, so a still reads as something you could watch.
   ========================================================================== */
.section { padding-block: clamp(72px, 9vw, 132px); }
.section-head { max-width: 46ch; margin-right: auto; margin-bottom: clamp(36px, 4vw, 56px); }
.section-head p { margin-top: 16px; }

.genre-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 900px) { .genre-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .genre-grid { grid-template-columns: 1fr; } }

.genre {
  display: flex;
  flex-direction: column;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-850);
  transition: background var(--t), border-color var(--t);
}
.genre:hover { background: var(--ink-800); border-color: var(--line-strong); }

.genre-still {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}
.genre-still img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.genre:hover .genre-still img, .genre:focus-within .genre-still img { transform: scale(1.05); }
.genre-still::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13, 12, 15, 0.72) 0%, rgba(13, 12, 15, 0) 58%);
}

.genre-body { padding: 20px 22px 26px; }
.genre-body h3 { margin-bottom: 10px; }
.genre-body p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: none;
}

/* ==========================================================================
   STORY  (editorial bleed: image bleeds off the left edge)
   ========================================================================== */
.story {
  background: var(--ink-850);
  border-block: 1px solid var(--line);
  padding-block: clamp(72px, 9vw, 132px);
  overflow: hidden;
}
.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: stretch;
}
.story-media {
  position: relative;
  margin-left: calc(var(--gutter) * -1 - 60px);
  border-radius: var(--r);
  overflow: hidden;
}
.story-media img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; }
.story-copy h2 { max-width: 17ch; }
.story-copy p { margin-top: 22px; color: var(--muted); }
.story-copy strong { color: var(--paper); font-weight: 600; }

@media (max-width: 900px) {
  .story-grid { grid-template-columns: 1fr; }
  .story-media { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); border-radius: 0; }
}

/* ==========================================================================
   SYNDICATION  (one large image cell + two text cells; not three equal cards)
   ========================================================================== */
.syndication {
  background: var(--ink-850);
  border-block: 1px solid var(--line);
  padding-block: clamp(72px, 9vw, 132px);
}
.synd-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
  gap: clamp(28px, 3.5vw, 48px);
  align-items: stretch;
}
.synd-feature {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--line);
  min-height: 460px;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}
.synd-feature img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 28% 34%;   /* the monitor wall, not the dark ceiling or the floor */
}
.synd-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(13,12,15,0.97) 52%, rgba(13,12,15,0.80) 74%, rgba(13,12,15,0.20) 100%);
}
.synd-feature-body { padding: clamp(26px, 3vw, 42px); }
.synd-feature-body h2 { max-width: 16ch; }
.synd-feature-body p { margin-top: 18px; color: var(--muted); }
.synd-feature-body .btn { margin-top: 26px; }

.synd-side { display: grid; gap: clamp(28px, 3.5vw, 48px); align-content: start; padding-top: 8px; }
.synd-item { border-left: 2px solid var(--red); padding-left: 22px; }
.synd-item h3 { margin-bottom: 8px; }
.synd-item p { font-size: 0.94rem; color: var(--muted); }

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

/* ==========================================================================
   CONTACT  (split: reasons + socials left, live form right)
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}
/* Two reasons, divided by a hairline. The generic tag and note glyphs that sat
   here were drawn by hand and carried no meaning the heading did not. */
.contact-reasons { display: grid; margin-top: 34px; border-top: 1px solid var(--line); }
.reason { padding: 22px 0; border-bottom: 1px solid var(--line); }
.reason h3 { font-size: 1.05rem; margin-bottom: 6px; }
.reason p { font-size: 0.93rem; color: var(--muted); }

.socials { display: flex; gap: 12px; margin-top: 30px; }
.social {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  transition: border-color var(--t), background var(--t), transform 0.2s var(--ease);
}
.social svg { width: 19px; height: 19px; fill: var(--muted); transition: fill var(--t); }
.social:hover { border-color: var(--red); background: rgba(229,32,41,0.1); transform: translateY(-2px); }
.social:hover svg { fill: var(--paper); }

/* The embed is served by TapTheNfc and supplies its own panel, now on a dark
   surface via theme=mirror. We add no card of our own around it, which keeps the
   contact column to a single nested surface. */
.form-card { border-top: 1px solid var(--line); padding-top: 26px; }
.form-card > h3 { margin-bottom: 6px; }
.form-card > p { font-size: 0.92rem; color: var(--muted); margin-bottom: 18px; }
.form-paper { border-radius: var(--r); overflow: hidden; }
.form-frame { width: 100%; height: 700px; border: 0; }
@media (max-width: 680px) { .form-frame { height: 760px; } }

/* Phone: a route to the studio that does not depend on the embedded form. */
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: var(--ink-900);
  border-top: 1px solid var(--line);
  padding-top: clamp(56px, 7vw, 88px);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr) minmax(0, 0.85fr) minmax(0, 2.05fr);
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: 56px;
}
.footer-brand img { height: 62px; width: auto; margin-bottom: 22px; }
.footer-brand address {
  font-style: normal;
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.8;
}
.footer-col h2 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: 18px;
}
.footer-col li { margin-bottom: 11px; }

/* Nine legal links next to two three-link columns left the footer lopsided.
   The long list runs in two sub columns so the three block out level. */
.footer-col-wide ul {
  display: grid;
  grid-auto-flow: column;              /* read down the first column, then across */
  grid-template-rows: repeat(5, auto);
  column-gap: 18px;
  align-content: start;
}
@media (max-width: 860px) { .footer-col-wide ul { grid-template-columns: 1fr; } }
.footer-col a {
  font-size: 0.92rem;
  color: var(--muted);
  transition: color var(--t);
}
.footer-col a:hover { color: var(--red-text); }

.footer-base {
  border-top: 1px solid var(--line);
  padding-block: 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.footer-base p { font-size: 0.86rem; color: var(--muted); max-width: none; }
.footer-base strong { color: var(--paper); font-weight: 600; }
.footer-links { display: flex; flex-wrap: wrap; gap: 22px; }
.footer-links a { font-size: 0.86rem; color: var(--muted); transition: color var(--t); }
.footer-links a:hover { color: var(--red-text); }

@media (max-width: 860px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   LEGAL PAGES
   ========================================================================== */
.legal-page { padding-block: clamp(56px, 7vw, 96px); }
.legal-wrap { max-width: 820px; margin-inline: auto; }
.legal-wrap h1 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); margin-bottom: 10px; }
.legal-date {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding-bottom: 26px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--line);
}
.legal-body p, .legal-body li { color: var(--muted); max-width: 74ch; }
.legal-body p { margin-bottom: 18px; }
.legal-body h2 {
  font-size: clamp(1.15rem, 1.8vw, 1.42rem);
  margin-top: 40px;
  margin-bottom: 14px;
  color: var(--paper);
}
.legal-body ul { margin: 0 0 20px 20px; list-style: disc; }
.legal-body li { margin-bottom: 9px; }
.legal-body a { color: var(--red-text); text-decoration: underline; text-underline-offset: 3px; }
.legal-body strong { color: var(--paper); font-weight: 600; }
.legal-body table { width: 100%; border-collapse: collapse; margin-bottom: 22px; font-size: 0.9rem; }
.legal-body th, .legal-body td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--muted); vertical-align: top; }
.legal-body th { color: var(--paper); font-weight: 600; }

/* Print */
@media print {
  .site-header, .site-footer, .socials { display: none; }
  body { background: #fff; color: #000; }
  .legal-body p, .legal-body li, .legal-date { color: #333; }
}

/* ==========================================================================
   COOKIE CONSENT
   The banner and preferences dialog rendered by gdpr.js. These styles were
   missing, which left the consent UI unstyled and stranded below the footer.
   ========================================================================== */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1200;
  display: none;
  background: rgba(18, 17, 22, 0.97);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-top: 1px solid var(--line-strong);
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.55);
}
.cookie-banner.is-open { display: block; }
@media (prefers-reduced-transparency: reduce) {
  .cookie-banner { background: var(--ink-850); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.cookie-banner-inner {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding: 22px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 44px);
}
.cookie-text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 78ch;
}
.cookie-text a { color: var(--red-text); text-decoration: underline; text-underline-offset: 3px; }

.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; flex-shrink: 0; }

.cookie-btn {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 12px 20px;
  border-radius: var(--r);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.cookie-btn:hover { border-color: var(--paper); background: rgba(255, 255, 255, 0.07); }
.cookie-btn:active { transform: translateY(1px); }
/* Accept and reject carry equal visual weight: consent must not be nudged. */
.cookie-btn-accept { background: var(--red); border-color: var(--red); color: #fff; }
.cookie-btn-accept:hover { background: var(--red-deep); border-color: var(--red-deep); }

@media (max-width: 860px) {
  .cookie-banner-inner { flex-direction: column; align-items: stretch; padding-block: 18px; }
  .cookie-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .cookie-btn-settings { grid-column: 1 / -1; }
}

/* --- Preferences dialog --- */
.cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  background: rgba(6, 5, 8, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.cookie-modal.is-open { display: flex; }

.cookie-modal-card {
  width: 100%;
  max-width: 560px;
  max-height: 86vh;
  overflow-y: auto;
  background: var(--ink-850);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  padding: clamp(24px, 3vw, 36px);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.7);
}
.cookie-modal-card h2 {
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  margin-bottom: 8px;
}
.cookie-modal-intro { font-size: 0.9rem; color: var(--muted); margin-bottom: 26px; }

.cookie-option {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.cookie-option h3 { font-size: 1rem; margin-bottom: 6px; }
.cookie-option p { font-size: 0.86rem; line-height: 1.55; color: var(--muted); max-width: none; }

.cookie-always {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red-text);
  white-space: nowrap;
  padding-top: 5px;
}

/* Switch. The native checkbox stays in the accessibility tree and drives the
   visual state, so keyboard and screen reader users get the real control. */
.cookie-switch { position: relative; flex-shrink: 0; width: 48px; height: 27px; }
.cookie-switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.cookie-slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--ink-700);
  border: 1px solid var(--line-strong);
  transition: background var(--t), border-color var(--t);
  pointer-events: none;
}
.cookie-slider::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--paper);
  transition: transform var(--t);
}
.cookie-switch input:checked + .cookie-slider { background: var(--red); border-color: var(--red); }
.cookie-switch input:checked + .cookie-slider::before { transform: translateX(21px); }
.cookie-switch input:focus-visible + .cookie-slider {
  outline: 2px solid var(--red-text);
  outline-offset: 3px;
}

.cookie-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
@media (max-width: 520px) {
  .cookie-modal-actions { flex-direction: column-reverse; }
  .cookie-modal-actions .cookie-btn { width: 100%; }
}

/* Footer entry point so consent can be changed or withdrawn at any time. */
.cookie-prefs-btn {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  transition: color var(--t);
}
.cookie-prefs-btn:hover { color: var(--red-text); }

/* The accessibility launcher is fixed bottom-left with an inline style, so it
   needs !important to be lifted clear of the consent banner. Without this it
   covers the reject button on narrow screens. */
html.lm-consent-open #a11y-widget-container {
  bottom: calc(var(--lm-consent-h, 120px) + 20px) !important;
}
/* While the preferences dialog is open the launcher would float above it on
   z-index alone, so the background control is taken out of reach. */
html.lm-consent-modal #a11y-widget-container { display: none !important; }

/* ==========================================================================
   WEBTV ADDITIONS
   Everything below is specific to the television site: the sister-station
   link in the header, the three promises under the hero, the numbered genre
   cards, and the VJ cards, which carry a full quote and so cannot use the
   radio site's overlay-only portrait.
   ========================================================================== */

/* ------------------------------------------------------------ promises -- */
.promise {
  background: var(--ink-850);
  border-bottom: 1px solid var(--line);
}
/* Three statements divided by hairlines, not three cards. The crimson left bar
   this used to carry is the syndication list's treatment, and one component
   should not appear in two sections pretending to be two. */
.promise-grid {
  display: grid;
  grid-template-columns: 1.18fr 1fr 1fr;
  gap: 0;
  padding-block: clamp(38px, 4.6vw, 62px);
}
.promise-item { padding-inline: clamp(22px, 3vw, 46px); border-left: 1px solid var(--line); }
.promise-item:first-child { padding-left: 0; border-left: 0; }
.promise-item:last-child { padding-right: 0; }
.promise-item h3 { font-size: 1rem; margin-bottom: 7px; }
.promise-item p { font-size: 0.92rem; color: var(--muted); margin: 0; }
@media (max-width: 860px) {
  .promise-grid { grid-template-columns: 1fr; }
  .promise-item {
    padding: 20px 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .promise-item:first-child { padding-top: 0; border-top: 0; }
  .promise-item:last-child { padding-bottom: 0; }
}

/* ----------------------------------------------------------- VJ cards --- */
.vjs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.vj {
  display: grid;
  grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
  background: var(--ink-850);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: background var(--t), border-color var(--t);
}
.vj:hover { background: var(--ink-800); border-color: var(--line-strong); }

.vj-photo { position: relative; overflow: hidden; min-height: 224px; }
.vj-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  filter: grayscale(0.55) contrast(1.06);
  transition: filter 0.7s var(--ease), transform 0.9s var(--ease);
}
.vj:hover .vj-photo img { filter: grayscale(0) contrast(1.02); transform: scale(1.04); }
@media (hover: none) { .vj-photo img { filter: grayscale(0) contrast(1.02); } }

.vj-body { padding: 24px 24px 26px; display: flex; flex-direction: column; }
.vj-body h3 { margin-bottom: 14px; }
.vj-body blockquote {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--muted);
  border-left: 2px solid var(--line-strong);
  padding-left: 16px;
}
.vj-name {
  margin-top: 20px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--paper);
}
.vj-name span { color: var(--muted); font-weight: 400; }

@media (max-width: 1080px) { .vjs { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .vj { grid-template-columns: 1fr; }
  .vj-photo { min-height: 0; aspect-ratio: 16 / 10; }
}

/* ----------------------------------------------------------- watch bar --- */
.player-links { margin-top: 12px; text-align: right; }
.player-open {
  font-size: 0.8rem;
  color: var(--red-text);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t);
}
.player-open:hover { border-bottom-color: var(--red-text); }