/* ==========================================================================
   TunexTV — core stylesheet
   Design system: broadcast furniture over magazine structure.
   Everything is driven by the tokens below. Change them here, not inline.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */

:root {
  /* Ground — dark theme (default). Light theme overrides live in the
     [data-theme="light"] block below; the toggle in the masthead switches
     the attribute and localStorage remembers the choice. */
  --tape:    #0A0B0D;   /* page background — CRT with the brightness down */
  --oxide:   #14110E;   /* warm panel — the brown-black of tape oxide      */
  --rule:    #2A2822;   /* hairlines, borders                              */
  --raise:   #1C1915;   /* raised card surface                             */
  --ground-rgb: 10, 11, 13;   /* --tape as RGB, for scrims and dims        */

  /* Ink */
  --paper:   #EAE6DC;   /* aged label white                                */
  --muted:   #8A857A;   /* secondary text, timecodes                       */
  --standfirst: #CFCABD;
  --faint:   #5E5A53;   /* placeholders, smallest print                    */

  /* Signal — used as a PAIR (chromatic split), never alone as an accent */
  --signal:  #E4007F;   /* magenta — record, live, alerts                  */
  --sync:    #2AC7D9;   /* cyan — channel, nav, links                      */

  /* SMPTE bar stops — the image placeholder system.
     True broadcast values, then dimmed heavily by --frame-dim so they read
     as texture behind type rather than a rainbow wall. */
  --bar-1: #C0C0C0;  --bar-2: #C0C000;  --bar-3: #00C0C0;  --bar-4: #00C000;
  --bar-5: #C000C0;  --bar-6: #C00000;  --bar-7: #0000C0;
  --frame-dim: 0.80;   /* card frames */
  --hero-dim:  0.90;   /* hero — type sits directly on it */
}

/* Light theme — the "Print Edition" palette. Applied when the person picks
   it, or by system preference on first visit (see inline script in base). */
[data-theme="light"] {
  --tape:    #F1EDE3;
  --oxide:   #E7E1D2;
  --rule:    #C9C2B0;
  --raise:   #FFFFFF;
  --ground-rgb: 241, 237, 227;

  --paper:   #16130E;
  --muted:   #6E6858;
  --standfirst: #3B362C;
  --faint:   #9A937F;

  --frame-dim: 0.55;
  --hero-dim:  0.74;
}

/* Theme-independent tokens — type and rhythm never change with the theme. */
:root {
  /* Type */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Newsreader", Georgia, "Times New Roman", serif;
  --osd:     "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Measure & rhythm */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --max:    90rem;      /* 1440px at normal size; grows on TVs */
  --col-gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

/* --- 2. Reset ------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* The video rail scrolls inside itself; the page never scrolls sideways. */
html, body { overflow-x: hidden; overflow-x: clip; }

body {
  margin: 0;
  background: var(--tape);
  color: var(--paper);
  font-family: var(--body);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; }

/* Visible keyboard focus everywhere — non-negotiable. */
:focus-visible {
  outline: 2px solid var(--sync);
  outline-offset: 3px;
}

.u-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- 3. Broadcast furniture ---------------------------------------------
   The OSD (on-screen display) layer. This is the VHS personality — it lives
   in the small type so the headlines can stay timeless.
   ------------------------------------------------------------------------ */

.osd {
  font-family: var(--osd);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.osd--live { color: var(--signal); }
.osd--ch   { color: var(--sync); }

/* The blinking record dot. Sits next to LIVE / ON AIR labels. */
.rec-dot {
  display: inline-block;
  width: 0.5em; height: 0.5em;
  margin-right: 0.5em;
  border-radius: 50%;
  background: var(--signal);
  animation: rec-blink 1.6s steps(1, end) infinite;
}

@keyframes rec-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0.15; } }

/* Scanlines. Applied as an overlay to media frames only, never to text. */
.scanlines::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.28) 0px,
    rgba(0, 0, 0, 0.28) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: multiply;
}

/* Tracking sweep — the slow horizontal distortion band of a worn tape.
   This is the signature motion. It runs on the hero and nowhere else.
   NOTE: this gets its own element rather than a pseudo. `.frame` already
   owns ::before for the dimming layer, and two rules cannot share one. */
.sweep {
  position: absolute;
  left: 0; right: 0;
  height: 14%;
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(234, 230, 220, 0.04) 20%,
    rgba(42, 199, 217, 0.09) 45%,
    rgba(228, 0, 127, 0.09) 55%,
    rgba(234, 230, 220, 0.04) 80%,
    transparent
  );
  animation: sweep 11s linear infinite;
}

@keyframes sweep {
  0%   { top: -14%; opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { top: 102%; opacity: 0; }
}

/* --- 4. SMPTE colour bars ------------------------------------------------
   The image placeholder system, and the thing this site is remembered by.
   Any frame without a photograph renders as broadcast bars. When a real
   photograph is dropped in, it covers the bars. Nothing looks broken.
   ------------------------------------------------------------------------ */

.frame {
  position: relative;
  overflow: hidden;
  background-color: var(--oxide);
  background-image: linear-gradient(
    to right,
    var(--bar-1) 0 14.28%,  var(--bar-2) 14.28% 28.56%,
    var(--bar-3) 28.56% 42.84%, var(--bar-4) 42.84% 57.12%,
    var(--bar-5) 57.12% 71.40%, var(--bar-6) 71.40% 85.68%,
    var(--bar-7) 85.68% 100%
  );
  isolation: isolate;
}

/* Bars sit at heavily reduced luminance so type stays legible on top. */
.frame::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(var(--ground-rgb), var(--frame-dim));
  z-index: 1;
}

.frame > * { position: relative; z-index: 2; }

/* A real photograph, when one exists, covers the bars entirely. */
.frame > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 2;
}

/* Aspect ratios */
.frame--wide  { aspect-ratio: 21 / 9; }
.frame--video { aspect-ratio: 16 / 9; }
.frame--card  { aspect-ratio: 4 / 3; }

/* Corner crop marks — broadcast safe-area furniture. */
.frame__marks {
  position: absolute; inset: 0.75rem;
  z-index: 4;
  pointer-events: none;
}
.frame__marks::before,
.frame__marks::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid rgba(234, 230, 220, 0.45);
}
.frame__marks::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.frame__marks::after  { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* Slot label. Tells you what photograph belongs here. Delete when filled. */
.frame__slot {
  position: absolute;
  bottom: 0.85rem; left: 0.85rem;
  z-index: 5;
  padding: 0.3rem 0.55rem;
  background: rgba(var(--ground-rgb), 0.88);
  border-left: 2px solid var(--sync);
}

/* --- 5. Layout ----------------------------------------------------------- */

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

.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section + .section { padding-top: 0; }

/* Section headers double as channel identifiers. The number is a real
   channel position, not decoration — sections are ordered like a lineup. */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 0.9rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--rule);
}

.section-head h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.35rem);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1;
}

/* --- 6. Masthead --------------------------------------------------------- */

.masthead {
  position: sticky; top: 0; z-index: 50;
  background: rgba(var(--ground-rgb), 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  min-height: 68px;
}

/* LOGO SLOT — intentionally empty. Drop the wordmark in here.
   Replace the whole <a class="logo-slot"> contents with an <img>. */
.logo-slot {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 172px; height: 42px;
  border: 1px dashed var(--rule);
  text-decoration: none;
  color: var(--muted);
  transition: border-color 0.2s ease;
}
.logo-slot:hover { border-color: var(--sync); }
.logo-slot img { width: 100%; height: 100%; object-fit: contain; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.9rem);
  margin-left: auto;
  list-style: none;
  padding: 0; margin-block: 0;
}

.nav a {
  font-family: var(--osd);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper);
  padding-block: 0.4rem;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.nav a:hover,
.nav a[aria-current="page"] { color: var(--sync); border-bottom-color: var(--sync); }

.nav__clock { color: var(--muted); }

/* Below 760px the nav drops to its own row and scrolls sideways. No hamburger:
   on a news site the desks are the navigation, and hiding them costs clicks. */
@media (max-width: 760px) {
  .masthead__inner {
    flex-wrap: wrap;
    padding-block: 0.75rem;
    gap: 0.75rem;
  }
  .nav__clock { display: none; }
  .nav {
    width: 100%;
    margin-left: 0;
    gap: 1.1rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.15rem;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav li { flex: 0 0 auto; }
  .nav a { font-size: 0.68rem; letter-spacing: 0.1em; }
  .logo-slot { width: 148px; height: 36px; }
}

/* --- 7. Hero ------------------------------------------------------------- */

.hero { position: relative; }

.hero__frame {
  --frame-dim: var(--hero-dim);
  position: relative;
  min-height: clamp(28.75rem, 72vh, 47.5rem);   /* rem: grows on TVs */
  display: flex;
  align-items: flex-end;
}

/* Bottom-weighted scrim so the standfirst stays readable over any photo. */
.hero__frame::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 2;
  background: linear-gradient(
    to top,
    rgba(var(--ground-rgb), 0.95) 0%,
    rgba(var(--ground-rgb), 0.70) 32%,
    rgba(var(--ground-rgb), 0.15) 68%,
    rgba(var(--ground-rgb), 0.35) 100%
  );
}

.hero__body {
  position: relative;
  z-index: 5;
  width: 100%;
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
}

.hero__meta {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}

.hero h1 {
  margin: 0 0 1rem;
  max-width: 20ch;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.5rem, 1.2rem + 6vw, 5.75rem);
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* Chromatic split — the tracking error of a worn tape, on the lead headline
   only. This is where the boldness is spent. */
.hero h1 .split {
  position: relative;
  display: inline-block;
}
.hero h1 .split::before,
.hero h1 .split::after {
  content: attr(data-text);
  position: absolute; top: 0; left: 0;
  width: 100%;
  pointer-events: none;
}
.hero h1 .split::before { color: var(--signal); transform: translate(-0.055em, 0); opacity: 0.85; z-index: -2; }
.hero h1 .split::after  { color: var(--sync);   transform: translate( 0.055em, 0); opacity: 0.85; z-index: -1; }

/* Timecodes and tags sit directly on the frame — keep them at full strength. */
.hero__meta .osd { color: var(--standfirst); }

.hero__standfirst {
  max-width: 56ch;
  margin: 0 0 1.6rem;
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
  line-height: 1.55;
  color: var(--standfirst);
}

/* --- 8. Buttons ---------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  font-family: var(--osd);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--paper);
  color: var(--paper);
  background: transparent;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn:hover { background: var(--paper); color: var(--tape); }

.btn--signal { border-color: var(--signal); background: var(--signal); color: #fff; }
.btn--signal:hover { background: transparent; color: var(--signal); }
.btn--small { padding: 0.42rem 0.85rem; font-size: 0.68rem; }

/* --- 9. Story cards ------------------------------------------------------ */

.grid {
  display: grid;
  gap: var(--col-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.card__frame { margin-bottom: 0.95rem; }

.card__kicker {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.5rem;
}

.card h3 {
  margin: 0 0 0.5rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
  transition: color 0.18s ease;
}
.card:hover h3 { color: var(--sync); }

.card p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--muted);
}

/* Category tag. Colour encodes the desk it came from. */
.tag {
  font-family: var(--osd);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.22rem 0.5rem;
  border: 1px solid currentColor;
}
.tag--news     { color: var(--sync); }
.tag--features { color: var(--signal); }
.tag--builds   { color: #E8B31F; }
.tag--events   { color: #6BD46B; }
.tag--gaming,
.tag--sim-drift { color: #B07CFF; }

/* --- 10. The feed (dense list) ------------------------------------------- */

.feed { display: grid; gap: 0; }

.feed__item {
  display: grid;
  grid-template-columns: 8.5rem 1fr auto;
  align-items: baseline;
  gap: 1.25rem;
  padding-block: 1.05rem;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: background 0.16s ease;
}
.feed__item:hover { background: var(--oxide); }

.feed__item h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.08rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  transition: color 0.16s ease;
}
.feed__item:hover h3 { color: var(--sync); }

@media (max-width: 720px) {
  .feed__item { grid-template-columns: 1fr; gap: 0.45rem; }
  .feed__item time { order: -1; }
}

/* --- 11. Video strip ----------------------------------------------------- */

.video-strip { background: var(--oxide); border-block: 1px solid var(--rule); }

.video-card__frame { margin-bottom: 0.85rem; }

/* Play glyph, centred. Drawn in CSS so there is no icon dependency. */
.play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border: 1px solid rgba(234, 230, 220, 0.7);
  border-radius: 50%;
  background: rgba(10, 11, 13, 0.55);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.play::after {
  content: "";
  width: 0; height: 0;
  margin-left: 4px;
  border-left: 15px solid var(--paper);
  border-block: 9px solid transparent;
  transition: border-left-color 0.2s ease;
}
.card:hover .play { background: var(--signal); border-color: var(--signal); transform: translate(-50%, -50%) scale(1.06); }
.card:hover .play::after { border-left-color: #fff; }

.runtime {
  position: absolute;
  right: 0.7rem; bottom: 0.7rem;
  z-index: 5;
  padding: 0.16rem 0.4rem;
  background: rgba(10, 11, 13, 0.85);
  color: #EAE6DC;
  font-family: var(--osd);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
}

/* --- 12. Subscribe ------------------------------------------------------- */

.subscribe {
  border: 1px solid var(--rule);
  background: var(--oxide);
  padding: clamp(1.75rem, 4vw, 3rem);
}

.subscribe__grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) { .subscribe__grid { grid-template-columns: 1.1fr 1fr; } }

.subscribe h2 {
  margin: 0.75rem 0 0.6rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.subscribe p { margin: 0; color: var(--muted); max-width: 46ch; }

.form { display: flex; flex-direction: column; gap: 0.75rem; }
.form__row { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.form input[type="email"] {
  flex: 1 1 15rem;
  padding: 0.85rem 1rem;
  background: var(--tape);
  border: 1px solid var(--rule);
  color: var(--paper);
  font-family: var(--osd);
  font-size: 0.85rem;
}
.form input[type="email"]::placeholder { color: var(--faint); }
.form input[type="email"]:focus { border-color: var(--sync); outline: none; }

.form__note { font-family: var(--osd); font-size: 0.65rem; letter-spacing: 0.1em; color: var(--faint); text-transform: uppercase; }

/* --- 13. Footer ---------------------------------------------------------- */

.footer { border-top: 1px solid var(--rule); padding-block: clamp(2.5rem, 5vw, 3.5rem); }

.footer__grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  margin-bottom: 2.5rem;
}

.footer h4 {
  margin: 0 0 0.9rem;
  font-family: var(--osd);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
}

.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.footer a { text-decoration: none; font-size: 0.95rem; transition: color 0.16s ease; }
.footer a:hover { color: var(--sync); }

.footer__base {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

/* Colour bar rule — a hairline of SMPTE bars closing the page. */
.bar-rule {
  height: 4px;
  background: linear-gradient(
    to right,
    var(--bar-1) 0 14.28%,  var(--bar-2) 14.28% 28.56%,
    var(--bar-3) 28.56% 42.84%, var(--bar-4) 42.84% 57.12%,
    var(--bar-5) 57.12% 71.40%, var(--bar-6) 71.40% 85.68%,
    var(--bar-7) 85.68% 100%
  );
}

/* --- 14. Article page ---------------------------------------------------- */

.article { max-width: 44rem; margin-inline: auto; padding-block: clamp(2.5rem, 6vw, 4rem); }

.article h1 {
  margin: 1rem 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2rem, 1.3rem + 3.4vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-wrap: balance;
}

.article--head { padding-bottom: 0; }
.article--head + .frame { margin-top: 2rem; }

.article__standfirst { font-size: 1.2rem; line-height: 1.55; color: var(--standfirst); margin-bottom: 2rem; }
.article__body > * + * { margin-top: 1.4rem; }
.article__body h2 {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: -0.02em; font-size: 1.6rem; margin-top: 2.5rem;
}
.article__body a { color: var(--sync); text-underline-offset: 3px; }
.article__body blockquote.pull-quote {
  margin: 2rem 0; padding-left: 1.25rem;
  border-left: 2px solid var(--signal);
  font-size: 1.25rem; line-height: 1.45; font-style: italic; color: var(--paper);
}

/* --- 15. Motion preference ----------------------------------------------
   Everything decorative stops. The layout is unchanged.
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .sweep { display: none; }
  .rec-dot { opacity: 1; }
}

/* --- 16. Print ----------------------------------------------------------- */

@media print {
  body { background: #fff; color: #000; }
  .masthead, .video-strip, .subscribe, .frame::before { display: none; }
}


/* --- 17. Theme toggle ------------------------------------------------------
   One button, two states. Shows the mode you would switch TO.
   ------------------------------------------------------------------------ */

.theme-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.7rem;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--muted);
  font-family: var(--osd);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.16s ease, border-color 0.16s ease;
}
.theme-toggle:hover { color: var(--sync); border-color: var(--sync); }
.theme-toggle .dot {
  width: 0.55em; height: 0.55em;
  border-radius: 50%;
  background: currentColor;
}
.theme-toggle [data-label-light],
[data-theme="light"] .theme-toggle [data-label-dark] { display: inline; }
.theme-toggle [data-label-dark],
[data-theme="light"] .theme-toggle [data-label-light] { display: none; }


/* --- 18. Video rail --------------------------------------------------------
   A horizontal, swipeable feed. Native scroll with snap points, so touch
   swiping works with zero JS; the arrow buttons are a pointer convenience
   layered on top. Cards are fixed-width slides.
   ------------------------------------------------------------------------ */

.rail-wrap { position: relative; }

.rail {
  display: flex;
  gap: var(--col-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 0.5rem;
  scroll-padding-inline: 2px;
}
.rail::-webkit-scrollbar { display: none; }

.rail > .card {
  flex: 0 0 clamp(240px, 27vw, 360px);
  scroll-snap-align: start;
}

/* Edge fade hints that there is more to scroll. */
.rail-wrap::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0.5rem;
  width: 72px;
  pointer-events: none;
  background: linear-gradient(to right, rgba(var(--ground-rgb), 0), rgba(var(--ground-rgb), 0.9));
}

/* Arrow buttons — VHS shuttle controls. Hidden on touch-only devices,
   where swiping is the native gesture anyway. */
.rail-btn {
  position: absolute;
  top: 38%;
  z-index: 6;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid var(--rule);
  background: rgba(var(--ground-rgb), 0.9);
  color: var(--paper);
  font-family: var(--osd);
  font-size: 1rem;
  cursor: pointer;
  transition: border-color 0.16s ease, color 0.16s ease;
}
.rail-btn:hover { border-color: var(--sync); color: var(--sync); }
.rail-btn--prev { left: -8px; }
.rail-btn--next { right: -8px; }

@media (hover: none) and (pointer: coarse) {
  .rail-btn { display: none; }
}

/* --- 19. Article extras: gallery + Instagram ------------------------------
   Both sit inside .article__body, so they inherit its max-width and rhythm.
   ------------------------------------------------------------------------ */

.gallery-block { margin-top: 1.75rem; }
.gallery-block > .osd { display: block; margin-bottom: 0.75rem; }

/* The gallery rail reuses .rail's scroll-snap mechanics but its slides are
   figures, not link cards — narrower, so several are visible at once. */
.rail.gallery > .gallery__frame {
  flex: 0 0 clamp(180px, 60vw, 260px);
  scroll-snap-align: start;
  margin: 0;
}

.instagram-block {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.instagram-block > .osd { display: block; margin-bottom: 1rem; }

.ig-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

/* Instagram's own embed renders a white card regardless of page theme —
   this frame is the only concession the design makes to a third-party
   widget it cannot restyle. Keeping it modest stops it looking bolted on.

   The fallback sits behind the blockquote and stays visible until the
   embed successfully expands over it — so a slow network, a blocked
   script, or (as in preview) a URL that doesn't exist yet still renders
   as a deliberate placeholder rather than a blank sliver. Same rule as
   the colour-bar photo slots: nothing on this site looks broken. */
.ig-embed {
  position: relative;
  min-height: 380px;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--oxide);
  display: flex;
  justify-content: center;
}
.ig-embed__fallback {
  position: absolute; inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  text-align: center;
  padding: 1.5rem;
}
.ig-embed__fallback .osd { color: var(--muted); }
.ig-embed__fallback a {
  font-family: var(--osd);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sync);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.15rem;
}
.ig-embed blockquote {
  position: relative;
  z-index: 2;
  margin: 0;
  border: 0;
  background: transparent;
  width: 100%;
}
.ig-embed iframe { max-width: 100%; }
.ig-embed noscript a {
  position: relative; z-index: 2;
  display: block;
  padding: 2rem;
  text-align: center;
  font-family: var(--osd);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sync);
  text-decoration: none;
}

/* --- 20. Channels strip ----------------------------------------------------
   Links out to Twitch/YouTube/TikTok/Instagram. Static by design — real
   "live now" status needs each platform's API and a key, which is backend
   work for later. Until then every badge reads "channel", never a stale
   or wrong "live" claim. */
.channels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}
.channel-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1.1rem;
  border: 1px solid var(--rule);
  background: var(--oxide);
  text-decoration: none;
  color: var(--paper);
  font-family: var(--osd);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: border-color 0.16s ease, color 0.16s ease;
}
.channel-badge:hover { border-color: var(--sync); color: var(--sync); }
.channel-badge .dot {
  width: 0.5em; height: 0.5em;
  border-radius: 50%;
  background: var(--muted);
}

/* --- 21. Calendar ----------------------------------------------------------
   Upcoming sim leagues, drift meets, race weekends. Distinct from the
   Events desk, which is editorial recaps — this is a forward schedule. */
.calendar { display: grid; gap: 0; }
.calendar__row {
  display: grid;
  grid-template-columns: 6.5rem 1fr auto;
  align-items: center;
  gap: 1.25rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--rule);
}
.calendar__date {
  font-family: var(--osd);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--sync);
}
.calendar__row h3 {
  margin: 0 0 0.2rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.calendar__row p { margin: 0; color: var(--muted); font-size: 0.9rem; }
@media (max-width: 640px) {
  .calendar__row { grid-template-columns: 1fr; gap: 0.35rem; }
}

/* --- 22. Leaderboard --------------------------------------------------------
   Curated featured times, not a live-submitted table yet. */
.leaderboard { width: 100%; border-collapse: collapse; }
.leaderboard th {
  text-align: left;
  padding: 0.7rem 1rem;
  font-family: var(--osd);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
}
.leaderboard td {
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.95rem;
}
.leaderboard td.time {
  font-family: var(--osd);
  color: var(--sync);
  font-size: 0.9rem;
}
.leaderboard tr:first-child td.time { color: var(--signal); }
.leaderboard-wrap { overflow-x: auto; }

/* --- 23. Garage: parts grid + safety callout -------------------------------- */
.part-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.part-card__frame { margin-bottom: 0.85rem; }
.part-card h3 {
  margin: 0 0 0.4rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  transition: color 0.18s ease;
}
.part-card:hover h3 { color: var(--sync); }
.part-card p { margin: 0; font-size: 0.92rem; color: var(--muted); line-height: 1.5; }
.part-meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.tag--cosmetic  { color: #6BD46B; }
.tag--functional { color: var(--sync); }
.tag--structural { color: var(--signal); }

.safety-note {
  display: flex;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--signal);
  background: rgba(228, 0, 127, 0.06);
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.safety-note strong { display: block; margin-bottom: 0.3rem; font-family: var(--display); }
.safety-note p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.55; }

/* --- 24. Hub intro strip ---------------------------------------------------
   Shared by Sim & Drift and Garage — a short standfirst under the H1. */
.hub-intro { max-width: 56ch; color: var(--muted); margin: 0 0 2.5rem; }


/* --- 19. Radio -------------------------------------------------------------
   The masthead launcher, and the pop-up tuner window at /radio/.
   The dial is the one bold thing: stations sit where they are on the globe,
   west to east, and the needle travels across the world when you seek.
   ------------------------------------------------------------------------ */

/* Launcher in the masthead. The three bars only move while the page is
   idle-looking; they are decoration, so reduced motion stills them. */
.radio-launch-legacy {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--sync);
}
.radio-launch__bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 0.75em;
}
.radio-launch__bars i {
  display: block;
  width: 2px;
  background: currentColor;
  animation: radio-eq 1.1s ease-in-out infinite;
}
.radio-launch__bars i:nth-child(1) { height: 40%; animation-delay: -0.2s; }
.radio-launch__bars i:nth-child(2) { height: 100%; animation-delay: -0.6s; }
.radio-launch__bars i:nth-child(3) { height: 65%; animation-delay: -0.9s; }
@keyframes radio-eq { 0%, 100% { transform: scaleY(0.4); } 50% { transform: scaleY(1); } }
.radio-launch__bars i { transform-origin: bottom; }

/* The window itself. */
.radio-body { min-height: 100vh; }

.radio {
  max-width: 30rem;
  margin: 0 auto;
  padding: 1.1rem 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.radio__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--rule);
}

.radio__display { min-height: 7.25rem; }

.radio__status {
  display: flex;
  align-items: center;
  margin: 0 0 0.6rem;
  min-height: 1.4em;
}
.radio__status .rec-dot { visibility: hidden; }
.radio__status.is-live .rec-dot { visibility: visible; }

.radio__name {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.95;
  font-size: clamp(1.9rem, 1.2rem + 3.5vw, 2.6rem);
  margin: 0;
  transition: text-shadow 0.3s ease;
}
/* On air: the same tape-tracking split as the lead headline. */
.radio__status.is-live ~ .radio__name {
  text-shadow: -2px 0 var(--signal), 2px 0 var(--sync);
}

.radio__where {
  font-family: var(--body);
  font-style: italic;
  color: var(--standfirst);
  margin: 0.5rem 0 0.2rem;
  font-size: 1.05rem;
}
.radio__meta { margin: 0; display: flex; gap: 1rem; flex-wrap: wrap; }

/* The dial. A tuning band with ticks, station marks, and a needle. */
.dial {
  position: relative;
  height: 5.25rem;
  background: var(--oxide);
  border: 1px solid var(--rule);
}
.dial__scale {
  position: absolute;
  left: 0.75rem; right: 0.75rem; top: 1.1rem;
  height: 1.6rem;
  background:
    repeating-linear-gradient(to right, var(--muted) 0 1px, transparent 1px 10%),
    repeating-linear-gradient(to right, var(--faint) 0 1px, transparent 1px 2%);
  background-size: 100% 100%, 100% 45%;
  background-repeat: no-repeat;
  background-position: 0 0, 0 100%;
  opacity: 0.7;
}
.dial__marks { position: absolute; left: 0.75rem; right: 0.75rem; top: 0; bottom: 0; }
.dial__marks { pointer-events: none; }

.dial__mark {
  position: absolute;
  top: 0.9rem;
  width: 1.4rem; height: 2rem;
  margin-left: -0.7rem;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  pointer-events: auto;
}
.dial__mark::before {
  content: "";
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 3px; margin-left: -1.5px;
  background: var(--sync);
  opacity: 0.55;
}
.dial__mark:hover::before,
.dial__mark.is-on::before { opacity: 1; }

.dial__needle {
  position: absolute;
  top: 0.35rem; bottom: 1.5rem;
  width: 2px;
  margin-left: -1px;
  background: var(--signal);
  box-shadow: 2px 0 0 var(--sync);
  transition: left 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
  z-index: 1;
}

.dial__legend {
  position: absolute;
  left: 0.75rem; right: 0.75rem; bottom: 0.35rem;
  display: flex;
  justify-content: space-between;
  font-size: 0.58rem;
  color: var(--faint);
}

.radio__controls {
  display: grid;
  grid-template-columns: 3.25rem 1fr 3.25rem;
  gap: 0.6rem;
}
.radio__seek,
.radio__play {
  height: 3.25rem;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--paper);
  font-family: var(--osd);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.radio__seek { font-size: 0.6rem; letter-spacing: -0.1em; }
.radio__seek:hover { border-color: var(--sync); color: var(--sync); }

.radio__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: var(--paper);
  color: var(--tape);
  border-color: var(--paper);
  font-weight: 700;
}
.radio__play:hover { background: var(--sync); border-color: var(--sync); }
.radio__play-icon {
  width: 0; height: 0;
  border-style: solid;
  border-width: 0.4rem 0 0.4rem 0.65rem;
  border-color: transparent transparent transparent currentColor;
}
.radio__play.is-playing { background: var(--signal); border-color: var(--signal); color: #fff; }
.radio__play.is-playing .radio__play-icon {
  width: 0.65rem; height: 0.65rem;
  border: 0;
  background: currentColor;
}

.radio__volume {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.radio__volume input { flex: 1; accent-color: var(--sync); }

.station-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.station-list li { border-bottom: 1px solid var(--rule); }
.station-list button {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  padding: 0.7rem 0.25rem 0.7rem 0.9rem;
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  color: var(--paper);
  text-align: left;
  cursor: pointer;
}
.station-list button:hover { border-left-color: var(--rule); }
.station-list button[aria-pressed="true"] { border-left-color: var(--signal); }
.station-list__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
}
.station-list__where { font-size: 0.6rem; }

.radio__foot p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted);
}
.radio__foot a { color: var(--sync); }

@media (prefers-reduced-motion: reduce) {
  .radio-launch__bars i { animation: none; transform: none; }
}


/* --- 20. Structure: page heads, breadcrumbs, desk tabs ----------------------
   Shared by every section page so they all open the same way.
   ------------------------------------------------------------------------ */

.section--top { padding-top: clamp(2.5rem, 6vw, 4rem); }
.wrap.narrow  { max-width: 48rem; }

.page-title {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.98;
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  margin: 0 0 0.75rem;
  text-wrap: balance;
}

.empty { color: var(--muted); }
.empty a { color: var(--sync); }

/* Breadcrumb: where you are, one tap back up. */
.crumbs ol {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  list-style: none; margin: 0 0 1.25rem; padding: 0;
}
.crumbs li { color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 0.4rem; color: var(--faint); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--sync); }
.crumbs [aria-current] {
  color: var(--paper);
  max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Desk tabs: News, Features, Builds and By car share one nav door. */
.tabs {
  display: flex; gap: 0; flex-wrap: wrap;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  border: 1px solid var(--rule);
  width: fit-content; max-width: 100%;
}
.tabs__tab {
  font-family: var(--osd); font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; text-decoration: none;
  color: var(--muted);
  padding: 0.65rem 1rem;
  border-right: 1px solid var(--rule);
}
.tabs__tab:last-child { border-right: 0; }
.tabs__tab:hover { color: var(--sync); }
.tabs__tab[aria-current="page"] { background: var(--paper); color: var(--tape); }

/* --- 21. Cars: chips, lists, the chassis page --------------------------- */

.car-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 1rem 0 0; }
.car-chips > .osd { margin-right: 0.35rem; }
.car-chip {
  font-family: var(--display); font-weight: 600; font-size: 0.85rem;
  text-decoration: none; color: var(--paper);
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--rule);
  background: var(--raise);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.car-chip:hover { border-color: var(--sync); color: var(--sync); }
.car-chips--big { margin: 0; gap: 0.65rem; }
.car-chips--big .car-chip { font-size: 1.05rem; padding: 0.6rem 1rem; }

.car-list { border-top: 1px solid var(--rule); }
.car-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1.5rem; align-items: baseline;
  padding: 1rem 0.25rem;
  border-bottom: 1px solid var(--rule);
  text-decoration: none; color: inherit;
}
.car-row:hover { background: var(--oxide); }
.car-row__name { font-family: var(--display); font-weight: 700; font-size: 1.2rem; }
.car-row__name em { font-family: var(--body); font-weight: 400; color: var(--muted); margin-left: 0.3rem; }
.car-row:hover .car-row__name { color: var(--sync); }
@media (max-width: 620px) {
  .car-row { grid-template-columns: 1fr; gap: 0.3rem; }
}
.section-head h2 a { color: inherit; text-decoration: none; }
.section-head h2 a:hover { color: var(--sync); }

.car-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
@media (max-width: 860px) { .car-head { grid-template-columns: 1fr; } }
.car-head .page-title { margin-top: 0.4rem; font-size: clamp(2.75rem, 1.8rem + 4vw, 5rem); }
.car-nick {
  font-family: var(--body); font-style: italic;
  font-size: 1.4rem; color: var(--standfirst);
  margin: -0.25rem 0 1rem;
}

.follow-box {
  padding: 1.5rem;
  border: 1px solid var(--sync);
  background: var(--raise);
}
.follow-box h2 {
  margin: 0 0 0.4rem;
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 1.35rem; letter-spacing: -0.01em;
}
.follow-box p { margin: 0 0 1rem; color: var(--muted); font-size: 0.95rem; }
.follow-box .form { margin-bottom: 0.9rem; }
.follow-box > a.osd { color: var(--sync); }

/* End-of-article link to the one chassis a story is about. */
.follow-strip {
  display: flex; flex-direction: column; gap: 0.3rem;
  margin-top: 3rem; padding: 1.25rem 1.5rem;
  border: 1px solid var(--rule); border-left: 3px solid var(--sync);
  text-decoration: none; color: inherit;
}
.follow-strip strong { font-family: var(--display); font-size: 1.2rem; }
.follow-strip:hover strong { color: var(--sync); }

.related { border-top: 1px solid var(--rule); padding-top: clamp(3rem, 7vw, 5rem) !important; }

/* --- 22. Front page: the network doors ----------------------------------- */

.doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 0;
  border: 1px solid var(--rule);
}
.door {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  border-right: 1px solid var(--rule);
  text-decoration: none; color: inherit;
  transition: background 0.15s ease;
}
.door:last-child { border-right: 0; }
.door:hover { background: var(--oxide); }
.door h3 {
  margin: 0; font-family: var(--display); font-weight: 800;
  text-transform: uppercase; letter-spacing: -0.02em;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
}
.door:hover h3 { color: var(--sync); }
.door p { margin: 0; color: var(--muted); }
@media (max-width: 860px) {
  .door { border-right: 0; border-bottom: 1px solid var(--rule); }
  .door:last-child { border-bottom: 0; }
}

/* --- 23. Garage filters --------------------------------------------------- */

.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.filters > .osd { margin-right: 0.35rem; }
.filter {
  font-family: var(--osd); font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.45rem 0.8rem;
  background: transparent; color: var(--muted);
  border: 1px solid var(--rule); cursor: pointer;
}
.filter:hover { color: var(--sync); border-color: var(--sync); }
.filter[aria-pressed="true"] { background: var(--paper); color: var(--tape); border-color: var(--paper); }
.filters + .car-chips { margin-bottom: 2.5rem; }
.filters:last-of-type { margin-bottom: 2.5rem; }
[hidden] { display: none !important; }

/* --- 24. Simple pages: About, Contact, Partners -------------------------- */

.prose ul { padding-left: 1.2rem; }
.prose li + li { margin-top: 0.5rem; }
.contact-line { font-family: var(--display); font-weight: 700; font-size: 1.5rem; }
.contact-line a { color: var(--sync); }
.contact-line--empty { color: var(--muted); font-weight: 600; }

.form--stack { display: grid; gap: 0.5rem; max-width: 32rem; }
.form--stack label { font-family: var(--osd); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 0.6rem; }
.form--stack input,
.form--stack textarea {
  font: inherit; color: var(--paper);
  background: var(--raise); border: 1px solid var(--rule);
  padding: 0.7rem 0.85rem;
}
.form--stack input:focus,
.form--stack textarea:focus { border-color: var(--sync); outline: none; }
.form--stack button { justify-self: start; margin-top: 1rem; }

/* --- 25. 404: no signal --------------------------------------------------- */

.no-signal { position: relative; min-height: 70vh; display: grid; align-items: center; overflow: hidden; }
.no-signal__bars {
  position: absolute; inset: 0;
  background: linear-gradient(to right,
    var(--bar-1) 0 14.28%, var(--bar-2) 0 28.57%, var(--bar-3) 0 42.85%,
    var(--bar-4) 0 57.14%, var(--bar-5) 0 71.42%, var(--bar-6) 0 85.71%, var(--bar-7) 0);
}
.no-signal__bars::after { content: ""; position: absolute; inset: 0; background: rgba(var(--ground-rgb), var(--hero-dim)); }
.no-signal__body { position: relative; padding-block: 4rem; }
.no-signal__links { display: flex; flex-wrap: wrap; gap: 0.75rem; }


/* --- 26. Day mode corrections -------------------------------------------
   The yellow and green desk colours are tuned for the dark ground; on paper
   they wash out. Day mode uses deeper inks of the same hues.
   ------------------------------------------------------------------------ */
[data-theme="light"] .tag--builds    { color: #9A6B00; }
[data-theme="light"] .tag--events,
[data-theme="light"] .tag--cosmetic  { color: #2E7D32; }
[data-theme="light"] .tag--gaming,
[data-theme="light"] .tag--sim-drift { color: #6A3FC2; }
[data-theme="light"] .tag--news,
[data-theme="light"] .tag--functional,
[data-theme="light"] .osd--ch        { color: #0A7F8C; }

/* A lone card keeps card size instead of stretching across the page. */
.grid > :only-child { max-width: 30rem; }


/* --- 27. Masthead tools ----------------------------------------------------
   Radio, Join and the day/night switch live outside the scrolling nav, so on
   a phone they sit next to the logo and never slide off-screen.
   ------------------------------------------------------------------------ */
.masthead__tools {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 1.6vw, 1.4rem);
  margin-left: clamp(0.9rem, 2vw, 1.9rem);
  flex: 0 0 auto;
}
.masthead__tools .radio-launch {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--osd); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; text-decoration: none; color: var(--sync);
}
@media (max-width: 760px) {
  .masthead__tools { order: 1; margin-left: auto; gap: 0.7rem; }
  .masthead__inner > nav { order: 2; width: 100%; }
  .masthead__tools .btn--small { padding-inline: 0.7rem; }
  /* The photo-slot label would sit under the button on a phone. */
  .hero .frame__slot { display: none; }
}
@media (max-width: 380px) {
  .masthead__tools .radio-launch { font-size: 0; gap: 0; }
  .masthead__tools .radio-launch__bars { font-size: 0.9rem; }
}

/* Desktop: nav and tools together on the right, as before. */
.masthead__inner > nav { margin-left: auto; }
[data-theme="light"] .radio-launch { color: #0A7F8C; }

/* Phone: logo, then the three tools on the same row; nav scrolls below. */
@media (max-width: 760px) {
  .masthead__inner > nav { margin-left: 0; }
  .logo-slot { width: 120px; height: 34px; }
}
@media (max-width: 480px) {
  .masthead__tools .radio-launch { font-size: 0; gap: 0; }
  .masthead__tools .radio-launch__bars { font-size: 1rem; height: 1rem; }
  .masthead__tools .radio-launch__bars i { width: 3px; }
}


/* --- 28. Article extras: byline, credit, spec sheet, follow ---------------- */

.byline { margin: -0.75rem 0 1.25rem; color: var(--muted); }
.credit { max-width: 60rem; margin: 0.6rem auto 0; color: var(--faint); text-align: right; }

/* Spec sheet: the facts of a build, like the card taped to a show car. */
.specs {
  margin: 0 0 2.25rem;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--sync);
  background: var(--raise);
}
.specs__head { margin: 0; padding: 0.8rem 1.1rem; border-bottom: 1px solid var(--rule); }
.specs dl { margin: 0; }
.specs__row {
  display: grid;
  grid-template-columns: minmax(7rem, 30%) 1fr;
  gap: 1rem;
  padding: 0.65rem 1.1rem;
  border-bottom: 1px solid var(--rule);
}
.specs__row:last-child { border-bottom: 0; }
.specs dt { color: var(--muted); padding-top: 0.2rem; }
.specs dd { margin: 0; font-family: var(--display); font-weight: 600; }
@media (max-width: 520px) { .specs__row { grid-template-columns: 1fr; gap: 0.15rem; } }

.follow-social {
  margin-top: 3rem; padding: 1.5rem;
  border: 1px solid var(--rule); text-align: center;
}
.follow-social p { margin: 0 0 0.9rem; }
.follow-social__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }

/* --- 29. Pager ------------------------------------------------------------- */

.pager {
  display: flex; align-items: center; justify-content: center; gap: 1.25rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}


/* --- 30. Wordmark (until the logo file lands in static/img/logo.svg) ------ */
.logo-slot:has(.wordmark) { border: 0; }
.wordmark {
  display: inline-flex; align-items: center; height: 100%;
  font-family: var(--display); font-weight: 900; font-size: 1.55rem;
  letter-spacing: -0.03em; text-transform: uppercase; color: var(--paper);
  text-shadow: -1.5px 0 var(--signal), 1.5px 0 var(--sync);
}
.wordmark b { font-weight: 900; color: var(--signal); text-shadow: none; }
.logo-slot img { height: 100%; width: auto; display: block; }

/* --- 31. Photo rows: the Speedhunters rhythm -------------------------------
   Photos run wider than the text column, alone or side by side, so a car
   feature reads as a photo essay with the story threaded through it.
   ------------------------------------------------------------------------ */
.photo-row {
  display: grid;
  gap: 0.6rem;
  width: min(62rem, 100vw - 2.5rem);
  margin: 2.25rem 0 2.25rem 50%;
  transform: translateX(-50%);
}
.photo-row--2 { grid-template-columns: 1fr 1fr; }
.photo-row--3 { grid-template-columns: 1fr 1fr 1fr; }
.photo { margin: 0; position: relative; }
.photo img { display: block; width: 100%; height: auto; }
.photo-row--2 .photo img,
.photo-row--3 .photo img { height: 100%; object-fit: cover; }
.photo.frame { aspect-ratio: 3 / 2; }
.photo--tall.frame { aspect-ratio: 4 / 5; }
.photo-row:has(.photo--tall) { align-items: stretch; }
.photo figcaption { margin-top: 0.45rem; color: var(--faint); }
.photo__link { display: block; cursor: zoom-in; }
@media (max-width: 620px) {
  .photo-row--3 { grid-template-columns: 1fr 1fr; }
  .photo-row { gap: 0.35rem; }
}

/* --- 32. Presentation mode (full-screen photo viewer) --------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(5, 6, 8, 0.96);
  display: grid; grid-template-columns: 4rem 1fr 4rem; align-items: center;
}
.lightbox[hidden] { display: none; }
.lightbox__stage { margin: 0; display: grid; justify-items: center; gap: 0.75rem; }
.lightbox__stage img { max-width: 100%; max-height: 84vh; object-fit: contain; }
.lightbox__stage figcaption { color: #bdb8ad; }
.lightbox__nav, .lightbox__close {
  background: none; border: 0; color: #EAE6DC; cursor: pointer;
}
.lightbox__nav { font-size: 1.5rem; height: 100%; }
.lightbox__nav:hover, .lightbox__close:hover { color: #2AC7D9; }
.lightbox__close { position: absolute; top: 1rem; right: 1.25rem; font-size: 0.8rem; letter-spacing: 0.14em; }
.lightbox__count { position: absolute; top: 1.1rem; left: 1.25rem; color: #bdb8ad; }
@media (max-width: 620px) { .lightbox { grid-template-columns: 2.5rem 1fr 2.5rem; } }

/* --- 33. Sign-off and archive --------------------------------------------- */
.signoff {
  margin-top: 3rem; padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-family: var(--body);
}
.signoff strong { font-family: var(--display); font-size: 1.1rem; }
.signoff a { color: var(--sync); }
.byline a { color: inherit; }

.archive { border-top: 1px solid var(--rule); }
.archive-row {
  display: grid;
  grid-template-columns: 7.5rem auto 1fr;
  gap: 1rem; align-items: baseline;
  padding: 0.85rem 0.25rem;
  border-bottom: 1px solid var(--rule);
  text-decoration: none; color: inherit;
}
.archive-row:hover { background: var(--oxide); }
.archive-row:hover .archive-row__title { color: var(--sync); }
.archive-row__title { font-family: var(--display); font-weight: 700; }
@media (max-width: 620px) {
  .archive-row { grid-template-columns: auto 1fr; }
  .archive-row__title { grid-column: 1 / -1; }
}


/* --- 34. Universal players ------------------------------------------------
   Every embedded player starts as a box with a play button. The real player
   from YouTube, Vimeo, Bilibili, Niconico, TikTok, X... loads on click.
   ------------------------------------------------------------------------ */
.player { margin: 2rem 0; }
.player__box { position: relative; width: 100%; overflow: hidden; }
.player__box:not(.frame), .player__box.is-playing { background: #000; }
.player--wide .player__box   { aspect-ratio: 16 / 9; }
.player--tall .player__box   { aspect-ratio: 9 / 16; max-width: 340px; margin-inline: auto; }
.player--square .player__box { aspect-ratio: 1 / 1; max-width: 540px; margin-inline: auto; }
.player--post .player__box   { aspect-ratio: 4 / 5; max-width: 480px; margin-inline: auto; }
.player--audio .player__box  { aspect-ratio: auto; height: 152px; }
.player__box iframe, .player__box video {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
}
.player__box video { background: #000; }
.player__thumb {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 2;
}
/* The lead player on a video story sits where the lead photo would. */
.lead-player { max-width: 60rem; margin: 0 auto; padding-inline: var(--gutter, 1.25rem); }
.lead-player .player { margin: 0; }
.player__go {
  position: absolute; inset: 0; z-index: 4;
  display: grid; place-items: center; align-content: center; gap: 0.9rem;
  width: 100%; border: 0; padding: 0; cursor: pointer;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.35));
  color: #EAE6DC;
}
.player__go .play { position: static; transform: none; }
.player__go:hover .play,
.player__go:focus-visible .play { transform: scale(1.08); }
.player__label { background: rgba(10, 11, 13, 0.82); padding: 0.25rem 0.55rem; color: #EAE6DC; }
.player__box.is-playing { background: #000; }
.player--audio audio { width: 100%; }
.player__source { margin: 0.5rem 0 0; color: var(--faint); }
.player__source a { color: var(--muted); }

.link-card { margin: 1.5rem 0; }
.link-card a {
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--rule); border-left: 3px solid var(--sync);
  text-decoration: none; color: inherit;
}
.link-card a:hover { border-color: var(--sync); }
.link-card__url { font-family: var(--display); font-weight: 600; overflow-wrap: anywhere; }



/* --- 35. Every screen: phone, tablet, laptop, TV --------------------------
   Sizes and spacing are in rem, so one change to the root size rescales the
   whole site. Small screens are handled in each section above; this section
   handles what's left: big screens and TVs, remote-control navigation,
   phones held sideways, notched phones, touch targets, older TV browsers.
   ------------------------------------------------------------------------ */

/* The logo slot always holds something now (logo or wordmark): no outline. */
.logo-slot { border: 0; }

/* Notched phones held sideways: keep content clear of the notch. */
.wrap {
  padding-left:  max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* Big screens. Text and layout scale up so the site reads the same from a
   sofa as it does from a desk. 4K TVs usually report 1920 or 2560 wide. */
@media (min-width: 1700px) { html { font-size: 112.5%; } }
@media (min-width: 2300px) { html { font-size: 137.5%; } }
@media (min-width: 3200px) { html { font-size: 175%; } }

/* TVs and other screens driven by a remote: no mouse to hover with, so
   whatever is selected must be unmistakable from across the room. Also
   leave a margin at the edges, which some TVs crop off ("overscan"). */
@media (hover: none) and (min-width: 1100px), (pointer: none) {
  :focus-visible, :focus {
    outline: 4px solid var(--sync);
    outline-offset: 4px;
  }
  .card:focus-visible, .door:focus-visible, .car-row:focus-visible,
  .archive-row:focus-visible, .player__go:focus-visible {
    outline: 5px solid var(--signal);
    outline-offset: 6px;
  }
  body { padding-inline: 2.5vw; }
  .masthead { padding-top: 1.5vh; }
}
/* Cards and rows show focus the same way they show hover, for keyboards
   and remotes on every device. */
.card:focus-visible h3,
.archive-row:focus-visible .archive-row__title,
.car-row:focus-visible .car-row__name,
.door:focus-visible h3 { color: var(--sync); }

/* Phones held sideways: the hero would be taller than the screen. */
@media (orientation: landscape) and (max-height: 540px) {
  .hero__frame { min-height: auto; padding-block: 2.25rem 1.5rem; }
  .hero__standfirst, .hero .frame__slot { display: none; }
  .hero h1 { font-size: clamp(1.9rem, 6vh + 1rem, 3rem); }
  .masthead { position: static; }
  .lightbox__stage img { max-height: 74vh; }
}

/* Touch screens: every tap target at least 44px tall. */
@media (pointer: coarse) {
  .nav a, .tabs__tab, .filter, .theme-toggle, .btn,
  .crumbs a, .footer a, .player__source a, .car-chip {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* Tablets in portrait: two columns of cards, not one stretched card. */
@media (min-width: 600px) and (max-width: 900px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Older TV and set-top-box browsers that don't understand aspect-ratio:
   the classic padding trick keeps every frame and player the right shape. */
@supports not (aspect-ratio: 1 / 1) {
  .frame--wide, .frame--video, .frame--card, .photo.frame,
  .player--wide .player__box, .player--tall .player__box,
  .player--post .player__box, .player--square .player__box { height: 0; }
  .frame--wide  { padding-top: 42.86%; }
  .frame--video, .player--wide .player__box { padding-top: 56.25%; }
  .frame--card  { padding-top: 75%; }
  .photo.frame  { padding-top: 66.67%; }
  .photo--tall.frame, .player--post .player__box { padding-top: 125%; }
  .player--tall .player__box { padding-top: 177.78%; }
  .player--square .player__box { padding-top: 100%; }
  .frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
}

/* Narrow phones: fade the end of the scrolling nav so it's clear there's more. */
@media (max-width: 460px) {
  .masthead__inner > nav {
    -webkit-mask-image: linear-gradient(to right, #000 82%, transparent);
            mask-image: linear-gradient(to right, #000 82%, transparent);
  }
}


/* --- 36. Now playing: the radio button becomes a small LCD -------------- */
.radio-launch__np {
  display: inline-block; overflow: hidden; white-space: nowrap;
  width: 11rem; margin-left: 0.15rem; padding: 0.15rem 0.4rem;
  background: #050806; color: #3dff7a; border: 1px solid var(--rule);
  font-family: "VT323", var(--osd); font-size: 1rem; letter-spacing: 0.04em; line-height: 1.1;
  text-shadow: 0 0 6px rgba(61, 255, 122, 0.45); text-transform: none;
}
.radio-launch__np[hidden] { display: none; }
.radio-launch__np span { display: inline-block; padding-left: 100%; animation: np-scroll 11s linear infinite; }
@keyframes np-scroll { to { transform: translateX(-100%); } }
.radio-launch.is-playing .radio-launch__label { display: none; }
[data-theme="light"] .radio-launch__np { background: #b9c49a; color: #1d2410; text-shadow: none; }
@media (max-width: 760px) { .radio-launch__np { width: 7rem; } }
@media (prefers-reduced-motion: reduce) { .radio-launch__np span { animation: none; padding-left: 0; } }

/* A single portrait photo keeps a sensible width instead of filling the page. */
.photo-row--1:has(.photo--tall) { width: min(38rem, 100vw - 2.5rem); }

/* A tall lead photo sits centred under the headline, like the photos below it. */
.lead-photo { margin-top: 0.5rem; margin-bottom: 0.5rem; }


/* --- 37. Languages: switcher and Japanese typography --------------------- */
.lang-switch { display: inline-flex; align-items: center; gap: 0.1rem; }
.lang-switch a {
  font-family: var(--osd); font-size: 0.66rem; letter-spacing: 0.08em;
  color: var(--muted); text-decoration: none;
  padding: 0.3rem 0.45rem; border: 1px solid transparent;
}
.lang-switch a:hover { color: var(--sync); }
.lang-switch a[aria-current="true"] { color: var(--paper); border-color: var(--rule); }
@media (max-width: 480px) {
  .lang-switch a { padding: 0.3rem 0.3rem; font-size: 0.62rem; }
}

/* Japanese: the site's display faces have no Japanese characters, so pair
   them with Noto Sans JP / Noto Serif JP. Latin letters keep the TunexTV
   faces; Japanese falls through to Noto. Japanese doesn't use capitals or
   tight tracking, and needs more line height to breathe. */
:lang(ja) {
  --display: "Archivo", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --body: "Newsreader", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  line-break: strict;
  overflow-wrap: anywhere;
}
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3, :lang(ja) .page-title, :lang(ja) .car-row__name {
  letter-spacing: 0.01em; line-height: 1.3; font-weight: 900;
}
:lang(ja) .article__body p, :lang(ja) .hub-intro, :lang(ja) .article__standfirst { line-height: 1.95; }
:lang(ja) .hero h1 { font-size: clamp(2rem, 1.2rem + 3.6vw, 4rem); line-height: 1.25; }
/* Break Japanese headlines at natural phrase boundaries, not mid-word
   (supported in current Chrome/Edge; other browsers fall back gracefully). */
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3, :lang(ja) .page-title { word-break: auto-phrase; }

/* Russian. Archivo, Newsreader and Space Mono have no Cyrillic, so Cyrillic
   letters fall through to Inter Tight, Source Serif 4 and JetBrains Mono
   (loaded only on /ru/ pages). Latin letters keep the TunexTV faces.
   Russian words run long: let headlines hyphenate instead of overflowing. */
:lang(ru) {
  --display: "Archivo", "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --body:    "Newsreader", "Source Serif 4", Georgia, serif;
  --osd:     "Space Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;
}
:lang(ru) h1, :lang(ru) h2, :lang(ru) h3, :lang(ru) .page-title { hyphens: manual; text-wrap: balance; overflow-wrap: break-word; }
:lang(ru) .hero h1 { font-size: clamp(1.9rem, 1.1rem + 3.4vw, 3.8rem); }


/* Korean, Traditional Chinese, Thai and Hindi: the house faces have none of
   these scripts, so each pairs them with its Noto family (loaded only on that
   language's pages, see locales/). Latin letters keep the TunexTV faces. */
:lang(ko) {
  --display: "Archivo", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --body: "Newsreader", "Noto Serif KR", "AppleMyungjo", serif;
  word-break: keep-all; overflow-wrap: anywhere;
}
:lang(zh-TW) {
  --display: "Archivo", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --body: "Newsreader", "Noto Serif TC", "Songti TC", serif;
  line-break: strict; overflow-wrap: anywhere;
}
:lang(th) {
  --display: "Archivo", "Noto Sans Thai", "Thonburi", "Leelawadee UI", sans-serif;
  --body: "Newsreader", "Noto Serif Thai", "Noto Sans Thai", serif;
  word-break: normal; overflow-wrap: anywhere;
}
:lang(hi) {
  --display: "Archivo", "Noto Sans Devanagari", "Kohinoor Devanagari", sans-serif;
  --body: "Newsreader", "Noto Serif Devanagari", "Kohinoor Devanagari", serif;
}
:lang(ko) h1, :lang(ko) h2, :lang(ko) h3, :lang(ko) .page-title,
:lang(zh-TW) h1, :lang(zh-TW) h2, :lang(zh-TW) h3, :lang(zh-TW) .page-title,
:lang(th) h1, :lang(th) h2, :lang(th) h3, :lang(th) .page-title,
:lang(hi) h1, :lang(hi) h2, :lang(hi) h3, :lang(hi) .page-title {
  letter-spacing: 0.01em; line-height: 1.35; text-transform: none;
}
:lang(ko) .article__body p, :lang(zh-TW) .article__body p, :lang(th) .article__body p,
:lang(hi) .article__body p, :lang(ko) .article__standfirst, :lang(zh-TW) .article__standfirst,
:lang(th) .article__standfirst, :lang(hi) .article__standfirst { line-height: 1.9; }
:lang(zh-TW) .hero h1, :lang(ko) .hero h1 { font-size: clamp(2rem, 1.2rem + 3.6vw, 4rem); line-height: 1.25; }
:lang(de) h1, :lang(de) h2, :lang(de) .page-title,
:lang(fr) h1, :lang(fr) h2, :lang(pt-BR) h1, :lang(pt-PT) h1, :lang(id) h1, :lang(vi) h1 {
  hyphens: auto; text-wrap: balance; overflow-wrap: break-word;
}

/* --- 38. Photo proportions --------------------------------------------------
   Photos sit inside the screen instead of filling it: a portrait never runs
   taller than about three quarters of the window, so a reader sees the whole
   frame and the text around it. Click opens the full-size viewer, which is
   always bigger than the photo on the page. */
.photo-row--1:has(.photo--tall) { width: min(30rem, 100vw - 2.5rem); }
.photo-row--1 .photo img { max-height: 74vh; width: auto; max-width: 100%; margin-inline: auto; }
.photo-row--2, .photo-row--3 { width: min(52rem, 100vw - 2.5rem); }
.photo-row--2 .photo img, .photo-row--3 .photo img { max-height: 64vh; }
.lead-photo.photo-row--1 .photo img { max-height: 70vh; }
.lightbox__stage img { max-width: min(96vw, 100%); max-height: 92vh; }
@media (max-width: 620px) {
  .photo-row--1 .photo img { max-height: 80vh; }
  .lightbox__stage img { max-height: 82vh; }
}

/* --- 39. Watch strip: every story links out to Instagram and YouTube ---- */
.watch-strip {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem;
  margin: 0 0 2rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.watch-strip__link {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.55rem 0.9rem; border: 1px solid var(--rule); color: var(--paper); text-decoration: none;
}
.watch-strip__link::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; }
.watch-strip__link--ig::before { background: #E1306C; }
.watch-strip__link--yt::before { background: #FF0000; }
.watch-strip__link:hover { border-color: var(--sync); color: var(--sync); }

/* Instagram players are portrait with a header strip: give them the room. */
.player--post .player__box { aspect-ratio: 9 / 13; max-width: 440px; }

/* Follow box on car pages: Instagram and YouTube first, RSS as a quiet link. */
.follow-box__links { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.follow-box__rss { margin: 1rem 0 0; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; }
.follow-box__rss a { color: var(--muted); }
.follow-box__rss a:hover { color: var(--sync); }


/* --- 40. Car catalogue: brand -> model -> generation ------------------------
   Tiles with a photo on top, the name and a few facts underneath. Facts at the
   top of each page stay short so the photos arrive without much scrolling. */
.cat-head { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 2rem; align-items: end; margin-bottom: 2rem; }
@media (max-width: 860px) { .cat-head { grid-template-columns: 1fr; gap: 1rem; } }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.cat-tile { display: block; text-decoration: none; color: inherit; border: 1px solid var(--rule); background: var(--oxide, transparent); transition: border-color .15s, transform .15s; }
.cat-tile:hover { border-color: var(--sync); transform: translateY(-2px); }
.cat-tile__frame { aspect-ratio: 4 / 3; margin: 0; }
.cat-tile--big .cat-tile__frame { aspect-ratio: 4 / 5; }
.cat-tile__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-tile__body { padding: 0.8rem 0.9rem 1rem; }
.cat-tile h3 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 1.35rem; line-height: 1.05; margin: 0; }
.cat-tile h3 em { font-family: var(--body); font-weight: 400; font-style: italic; text-transform: none; color: var(--muted); font-size: 1rem; margin-left: 0.35rem; }
.cat-tile p { margin: 0.3rem 0 0; color: var(--muted); font-family: var(--osd); font-size: 0.72rem; letter-spacing: 0.08em; }
.cat-tile__meta { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; margin-top: 0.6rem; }
.cat-tile__meta .osd { font-size: 0.66rem; color: var(--muted); }
.cat-tile__meta b { color: var(--sync); font-weight: 700; }
.cat-tile:hover h3 { color: var(--sync); }

/* Fact sheet: two columns of label / value, compact. */
.spec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0; margin: 1.25rem 0 0; border-top: 1px solid var(--rule); }
.spec-grid__row { padding: 0.55rem 0.75rem 0.55rem 0; border-bottom: 1px solid var(--rule); }
.spec-grid dt { font-size: 0.62rem; color: var(--muted); margin-bottom: 0.15rem; }
.spec-grid dd { margin: 0; font-size: 0.98rem; line-height: 1.35; }

/* Generation switcher on a chassis page. */
.gen-strip { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0 2.5rem; flex-wrap: wrap; }
.gen-strip__chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.gen-chip { display: inline-flex; flex-direction: column; padding: 0.45rem 0.75rem; border: 1px solid var(--rule); text-decoration: none; color: var(--paper); }
.gen-chip b { font-family: var(--display); font-weight: 900; font-size: 1rem; }
.gen-chip .osd { font-size: 0.58rem; color: var(--muted); }
.gen-chip:hover { border-color: var(--sync); }
.gen-chip.is-current { border-color: var(--signal); background: var(--signal); color: #fff; }
.gen-chip.is-current .osd { color: #fff; }

/* Photo wall: every photo of this car, in columns, full colour. */
.photo-wall { columns: 3 16rem; column-gap: 0.75rem; }
.photo-wall__item { break-inside: avoid; margin: 0 0 0.75rem; }
.photo-wall__item img { display: block; width: 100%; height: auto; }
.photo-wall__item figcaption { margin-top: 0.35rem; font-size: 0.6rem; line-height: 1.5; }
.photo-wall__item figcaption a { color: var(--muted); text-decoration: none; }
.photo-wall__item figcaption a:hover { color: var(--sync); }
@media (max-width: 620px) {
  .cat-grid { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .cat-tile h3 { font-size: 1.05rem; }
  .cat-tile__body { padding: 0.6rem 0.6rem 0.75rem; }
  .cat-tile__meta { gap: 0.2rem 0.6rem; }
  .photo-wall { columns: 2; column-gap: 0.5rem; }
}


/* --- 41. Language menu: flag button, list of flags with names ------------- */
.flag { width: 1.4rem; height: 0.93rem; display: block; flex: none;
  border-radius: 2px; box-shadow: 0 0 0 1px rgba(127, 127, 127, 0.35); }
.flag--text { width: auto; height: auto; box-shadow: none;
  font-family: var(--osd); font-size: 0.66rem; letter-spacing: 0.08em; }
.lang-menu { position: relative; }
.lang-menu summary { list-style: none; cursor: pointer; display: inline-flex;
  align-items: center; gap: 0.3rem; padding: 0.32rem 0.4rem; border: 1px solid var(--rule); }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary::after { content: "\25BE"; font-size: 0.6rem; color: var(--muted); }
.lang-menu summary:hover, .lang-menu[open] summary { border-color: var(--sync); }
.lang-menu__list { position: absolute; right: 0; top: calc(100% + 0.35rem); z-index: 60;
  min-width: 11rem; display: grid; gap: 0.1rem; padding: 0.35rem;
  /* About four languages tall; the rest scroll. The visitor's most likely
     languages are moved to the top (language script in base.html). */
  max-height: calc(4 * 2.3rem + 0.7rem); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--sync) transparent;
  background: var(--raise); border: 1px solid var(--rule);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.lang-menu__list a { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.55rem;
  color: var(--paper); text-decoration: none; font-family: var(--display); font-size: 0.9rem; }
.lang-menu__list a:hover { background: var(--oxide); color: var(--sync); }
.lang-menu__list a[aria-current="true"] { background: var(--oxide); box-shadow: inset 2px 0 0 var(--sync); }
.nav__clock { font-variant-numeric: tabular-nums; }


/* --- 42. Results tables: a compact scoreboard ----------------------------- */
.results { margin: 1.1rem 0 1.4rem; overflow-x: auto; border: 1px solid var(--rule);
  background: var(--raise); }
.results table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.results th { font-family: var(--osd); font-size: 0.64rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); font-weight: 400; text-align: left;
  padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.results td { padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--rule);
  font-family: var(--display); color: var(--paper); }
.results tr:last-child td { border-bottom: 0; }
.results td.num { font-family: var(--osd); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--muted); }
.results tbody tr:first-child td { background: var(--oxide); }
.results tbody tr:first-child td:first-child { box-shadow: inset 3px 0 0 var(--signal); color: var(--signal); }
.results td:first-child { width: 2.6rem; }
@media (max-width: 560px) { .results table { font-size: 0.84rem; } .results td, .results th { padding: 0.45rem 0.5rem; } }


/* --- 43. Reactions, views and car polls ----------------------------------- */
.engage { margin: 2rem 0 1.5rem; padding: 1rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.engage__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.engage__reacts { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.react { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer;
  padding: 0.45rem 0.75rem; border: 1px solid var(--rule); background: var(--raise); color: var(--paper);
  font-family: var(--display); font-size: 0.86rem; border-radius: 999px; transition: border-color .15s, transform .1s; }
.react:hover { border-color: var(--sync); }
.react:active { transform: scale(0.96); }
.react[aria-pressed="true"] { border-color: var(--signal); background: var(--oxide); }
.react__e { font-size: 1.05rem; line-height: 1; }
.react__n { font-family: var(--osd); font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.react__n:empty { display: none; }
.engage__views { margin: 0; color: var(--muted); }
.poll { margin-top: 1rem; }
.poll__q { margin: 0 0 0.55rem; font-family: var(--display); font-size: 1rem; color: var(--paper); }
.poll__q .osd { margin-right: 0.35rem; }
.poll__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; }
.poll__c { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center;
  gap: 0.5rem; padding: 0.65rem 0.8rem; cursor: pointer; border: 1px solid var(--rule); background: var(--raise);
  color: var(--paper); font-family: var(--display); font-size: 0.9rem; text-align: left; }
.poll__c:hover { border-color: var(--sync); }
.poll__l, .poll__p { position: relative; z-index: 1; }
.poll__p { font-family: var(--osd); font-size: 0.75rem; color: var(--muted); }
.poll__bar { position: absolute; inset: 0 auto 0 0; width: var(--pct, 0%); background: var(--oxide);
  transition: width .5s ease; z-index: 0; }
.poll__c[aria-pressed="true"] { border-color: var(--signal); }
.poll__c[aria-pressed="true"] .poll__bar { background: color-mix(in srgb, var(--signal) 22%, var(--raise)); }
.poll__total { margin: 0.5rem 0 0; color: var(--muted); }
@media (max-width: 560px) {
  .poll__choices { grid-template-columns: 1fr; }
  .react__l { font-size: 0.8rem; }
}

/* --- 44. Coming up next: teaser banner (404 pages) ------------------------ */

.next-up {
  margin-top: 2.5rem; display: grid; grid-template-columns: minmax(0, 220px) 1fr; gap: 1.25rem;
  align-items: center; padding: 1rem; border: 1px solid var(--signal);
  background: rgba(var(--ground-rgb), 0.85); box-shadow: 0 0 0 1px rgba(228, 0, 127, 0.25), 0 0 32px rgba(228, 0, 127, 0.18);
  max-width: 760px;
}
.next-up__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; filter: saturate(1.1) contrast(1.05); }
.next-up__body > * { margin: 0 0 0.5rem; }
.next-up__teaser {
  font-size: clamp(1.4rem, 3.4vw, 2.2rem); line-height: 1.05; text-transform: uppercase;
  letter-spacing: 0.01em; color: var(--paper);
}
.next-up__title { color: var(--standfirst); }
.next-up__early { color: var(--sync); font-weight: 600; }
.next-up__when { font-family: var(--mono, ui-monospace, monospace); color: var(--muted); }
.next-up__live { color: var(--signal); text-transform: uppercase; font-weight: 700; }
.next-up__clock { color: var(--paper); margin-left: 0.4rem; }
.next-up__stay { color: var(--signal); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
@media (max-width: 560px) {
  .next-up { grid-template-columns: 1fr; }
  .next-up__img { aspect-ratio: 16 / 9; }
}

/* --- 45. In-story "See also" card and the 60-second version ---------------- */

.see-also { margin: 1.5rem 0; }
.see-also a {
  display: grid; grid-template-columns: 96px 1fr; gap: 0.9rem; align-items: center;
  padding: 0.6rem; border: 1px solid var(--rule); border-left: 3px solid var(--sync);
  background: var(--raise); text-decoration: none; color: var(--paper); max-width: 34rem;
}
.see-also a:hover { border-color: var(--sync); }
.see-also img { width: 96px; height: 72px; object-fit: cover; display: block; }
.see-also strong { display: block; font-size: 0.98rem; line-height: 1.3; margin-top: 0.2rem; }
@media (min-width: 1100px) {
  .see-also { float: right; width: 18rem; margin: 0.3rem -4rem 1rem 1.5rem; }
  .see-also a { grid-template-columns: 1fr; }
  .see-also img { width: 100%; height: 150px; }
}
.quick-read {
  margin: 0 0 2rem; padding: 1rem 1.25rem; border: 1px solid var(--rule);
  border-left: 3px solid var(--signal); background: var(--raise);
}
.quick-read ul { margin: 0.5rem 0 0; padding-left: 1.1rem; }
.quick-read li { margin: 0.25rem 0; }


/* --- Hot news: the front page's small, loud news column ---------------------
   News lives on /news/; the front page only gets these headlines. */
.hot-news { border-block: 1px solid var(--rule); background:
  linear-gradient(90deg, rgba(228,0,127,0.16), transparent 55%), var(--oxide); }
.hot-news__inner { display: flex; align-items: center; gap: 1.25rem; padding-block: 0.9rem; flex-wrap: wrap; }
.hot-news__label { display: flex; align-items: center; gap: 0.55rem; margin: 0; font-family: var(--osd);
  font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal); white-space: nowrap; }
.hot-news__dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--signal);
  box-shadow: 0 0 0 0 rgba(228,0,127,0.7); animation: hot-pulse 1.6s infinite; }
@keyframes hot-pulse { 70% { box-shadow: 0 0 0 0.6rem rgba(228,0,127,0); } 100% { box-shadow: 0 0 0 0 rgba(228,0,127,0); } }
.hot-news__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.5rem; flex: 1 1 0;
  min-width: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hot-news__list::-webkit-scrollbar { display: none; }
.hot-news__list li { scroll-snap-align: start; flex: 0 0 auto; max-width: 30ch; }
.hot-news__list a { display: block; color: var(--paper); text-decoration: none; font-family: var(--display);
  font-weight: 700; font-size: 0.95rem; line-height: 1.3; }
.hot-news__list a:hover .hot-news__title, .hot-news__list a:focus-visible .hot-news__title { color: var(--sync); }
.hot-news__list time { display: block; color: var(--muted); font-size: 0.7rem; letter-spacing: 0.08em; }
.hot-news__new { display: inline-block; margin-left: 0.35rem; padding: 0.05rem 0.35rem; font-family: var(--osd);
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tape); background: var(--signal);
  vertical-align: middle; }
.hot-news__all { font-family: var(--osd); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sync); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .hot-news__dot { animation: none; } }
@media (max-width: 640px) {
  .hot-news__inner { gap: 0.6rem 0.75rem; }
  .hot-news__all { margin-left: auto; }
  .hot-news__list { order: 3; flex: 1 0 100%; }
  .hot-news__list li { max-width: 80vw; }
}


/* Endless scroll: the pager becomes a quiet loading line. */
.pager--loading { opacity: 0.55; }
.pager--loading .osd::after { content: " \00B7 \00B7 \00B7"; animation: pager-blink 1s steps(2) infinite; }
@keyframes pager-blink { 50% { opacity: 0.2; } }

/* --- Site search (TunexOne Search seed) --------------------------------- */
.site-search { display: flex; align-items: center; border: 1px solid var(--rule); height: 2rem; }
.site-search:focus-within { border-color: var(--sync); }
.site-search input { width: 9rem; background: transparent; border: 0; color: var(--paper);
  font: 0.78rem var(--osd); letter-spacing: 0.04em; padding: 0 0.55rem; height: 100%; outline: none; }
.site-search input::placeholder { color: var(--faint); text-transform: uppercase; }
.site-search button { background: transparent; border: 0; color: var(--muted); cursor: pointer;
  width: 2rem; height: 100%; display: grid; place-items: center; }
.site-search button:hover { color: var(--sync); }
.site-search svg { width: 1rem; height: 1rem; }
@media (max-width: 1100px) { .site-search input { width: 6.5rem; } }
@media (max-width: 760px) {
  .site-search input { width: 0; padding: 0; transition: width 0.2s ease; }
  .site-search:focus-within input { width: 8.5rem; padding: 0 0.5rem; }
}
.search-page__form { display: flex; gap: 0.6rem; margin: 1.5rem 0 2rem; }
.search-page__form input { flex: 1; min-width: 0; background: var(--raise); border: 1px solid var(--rule);
  color: var(--paper); font: 1.15rem var(--body); padding: 0.75rem 0.9rem; }
.search-page__form input:focus { outline: none; border-color: var(--sync); }
.search-page__head { color: var(--sync); margin: 2rem 0 0.8rem; font-size: 0.8rem; letter-spacing: 0.12em; }
.search-results { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.search-result { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; align-items: start;
  padding-bottom: 1rem; border-bottom: 1px solid var(--rule); }
.search-result img, .search-result__bars { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; display: block; }
.search-result__bars { background: linear-gradient(90deg, var(--bar-1) 0 14.3%, var(--bar-2) 0 28.6%, var(--bar-3) 0 42.9%,
  var(--bar-4) 0 57.1%, var(--bar-5) 0 71.4%, var(--bar-6) 0 85.7%, var(--bar-7) 0); opacity: 0.35; }
.search-result a { font: 700 1.1rem/1.25 var(--display); color: var(--paper); text-decoration: none; }
.search-result a:hover { color: var(--sync); }
.search-result p { margin: 0.35rem 0 0; color: var(--standfirst); font-size: 0.95rem; }
.search-result__kind { display: block; color: var(--signal); font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; margin-bottom: 0.25rem; }
.search-page__none { color: var(--muted); }
.search-web__note { color: var(--muted); font-size: 0.95rem; }
.search-web__links { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.search-web__btn { border: 1px solid var(--rule); color: var(--paper); }
.search-web__btn:hover { border-color: var(--sync); color: var(--sync); }
@media (max-width: 560px) { .search-result { grid-template-columns: 5.5rem 1fr; } }

/* --- World calendar --------------------------------------------------- */
.wcal__filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 2rem; align-items: center; }
.wcal__filters button { font: 0.72rem var(--osd); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
  background: transparent; color: var(--paper); border: 1px solid var(--rule); padding: 0.45rem 0.7rem; }
.wcal__filters button[aria-pressed="true"] { background: var(--paper); color: var(--tape); border-color: var(--paper); }
.wcal__filters button:hover { border-color: var(--sync); }
.wcal__sep { width: 1px; height: 1.4rem; background: var(--rule); margin: 0 0.4rem; }
.wcal__month { margin-bottom: 2.5rem; }
.wcal__head { font: 800 1.4rem var(--display); text-transform: uppercase; letter-spacing: -0.01em;
  border-bottom: 2px solid var(--signal); padding-bottom: 0.4rem; margin: 0 0 0.5rem; }
.wcal__note { color: var(--muted); font-size: 0.75rem; margin-top: 2rem; }

/* =====================================================================
   36. TEXT OVER PHOTOS (STANDARDS.md "Text over photos")
   Anything printed on a photograph has its own colours, the same in day
   and night: light type on a dark scrim, the standfirst in a solid panel.
   Contrast (checked against white, the worst case under the scrim):
   headline ≥ 4.5:1, panel text ≥ 12:1.
   ===================================================================== */
.on-photo {
  --op-ink: #F4F1EA;           /* headline, labels */
  --op-soft: #E2DDD1;          /* standfirst */
  --op-dim: #C9C3B5;           /* timecodes */
  --op-scrim: 8, 9, 11;
  color: var(--op-ink);
}
.on-photo .osd, .on-photo time { color: var(--op-dim); }
.on-photo .tag { background: rgba(var(--op-scrim), 0.82); }
.on-photo .tag--features { color: #FF5CAD; border-color: #FF5CAD; }
.on-photo .tag--builds   { color: #FFC24D; border-color: #FFC24D; }
.on-photo .tag--events   { color: #6EE08A; border-color: #6EE08A; }
.on-photo .tag--news     { color: #57E3F0; border-color: #57E3F0; }
.on-photo .osd--live     { color: #FF5CAD; }
/* Meta labels carry their own dark backing, so they pass 4.5:1 even over
   the brightest part of a photo (worst case: pure white under the scrim). */
.ohero__over .hero__meta > .osd, .ohero__over .hero__meta > time { background: rgba(var(--op-scrim), 0.8); padding: 0.22em 0.5em; }

.ohero { position: relative; background: #08090B; }
.ohero__media { position: relative; overflow: hidden; background: #08090B; aspect-ratio: auto !important; }
.ohero__media::before { display: none; }              /* no bar dimming over a real photo */
.ohero .hero__media-link { display: block; }
.ohero .hero__img { position: relative !important; inset: auto !important; display: block; width: 100%;
  height: auto !important; object-fit: contain !important; z-index: 2; }
/* Portrait and square photos: the whole picture, centred, on a blurred
   copy of itself (decoration only; the photo is never cut). */
.ohero--port .ohero__media, .ohero--square .ohero__media { height: min(88vh, 68rem); min-height: 26rem; }
.ohero--port .hero__media-link, .ohero--square .hero__media-link { height: 100%; display: flex; justify-content: center; }
.ohero--port .hero__img, .ohero--square .hero__img { width: auto; max-width: 100%; height: 100% !important; margin-inline: auto; }
.ohero .hero__backdrop { position: absolute !important; inset: -6% !important; width: 112% !important; height: 112% !important;
  object-fit: cover !important; filter: blur(34px) brightness(0.45) saturate(1.1); z-index: 1 !important; }

.ohero__over {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  padding: clamp(4rem, 9vw, 8rem) 0 clamp(1.25rem, 2.5vw, 2rem);
  background: linear-gradient(to top,
    rgba(var(--op-scrim), 0.94) 0%, rgba(var(--op-scrim), 0.86) 45%,
    rgba(var(--op-scrim), 0.62) 78%, rgba(var(--op-scrim), 0) 100%);
  pointer-events: none;
}
.ohero__over a { pointer-events: auto; }
.ohero .hero__meta { margin-bottom: 0.8rem; }
.hero__title {
  margin: 0; max-width: 22ch;
  font-family: var(--display); font-weight: 900;
  font-size: clamp(1.9rem, 0.9rem + 3.6vw, 4.4rem);
  line-height: 1.0; letter-spacing: -0.03em; text-transform: uppercase; text-wrap: balance;
  color: var(--op-ink);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}
.hero__title a { color: inherit; text-decoration: none; }
.hero__title a:hover, .hero__title a:focus-visible { text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.12em; }
.hero__title .split { position: relative; display: inline; }
.hero__title .split::before, .hero__title .split::after { content: none; }   /* decoration never carries contrast */
.hero__title.is-as-is, h1.is-as-is, .is-as-is { text-transform: none; }
.ohero--article .hero__title { max-width: 26ch; font-size: clamp(1.9rem, 0.9rem + 3vw, 3.7rem); }

.ohero__panel { background: #0D0E11; border-top: 3px solid var(--signal); }
.ohero__panel .wrap { padding-block: clamp(1rem, 2vw, 1.6rem); display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.ohero__standfirst { margin: 0; max-width: 62ch; color: var(--op-soft);
  font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.22rem); line-height: 1.55; }
.ohero__panel .btn { color: var(--op-ink); border-color: var(--op-ink); }
.ohero__panel .btn:hover, .ohero__panel .btn:focus-visible { background: var(--op-ink); color: #0D0E11; }

/* Phones: the photo stays whole; the headline sits under it on the same
   dark band instead of covering the picture. */
@media (max-width: 760px) {
  .ohero__over { position: static; background: #08090B; padding: 1rem 0 0.25rem; }
  .ohero--port .ohero__media, .ohero--square .ohero__media { height: auto; min-height: 0; }
  .ohero--port .hero__img, .ohero--square .hero__img { width: 100%; height: auto !important; }
  .ohero .hero__backdrop { display: none; }
  .hero__title { font-size: clamp(1.6rem, 1rem + 4.2vw, 2.4rem); }
}
@media (min-width: 1800px) { .hero__title { font-size: clamp(3.8rem, 2rem + 2.4vw, 6rem); } }

.article--meta { padding-top: 1.25rem; display: grid; gap: 0.8rem; }
.article--meta .credit { margin: 0; }

/* =====================================================================
   37. LANDSCAPE PHOTOS ARE NEVER CUT (STANDARDS.md)
   A landscape photo keeps its own shape everywhere: the frame takes the
   photo's proportions instead of cropping it to the grid's.
   ===================================================================== */
.frame:has(> img[data-shape="land"]) { aspect-ratio: auto !important; padding-top: 0 !important; }
.frame:has(> img[data-shape="land"])::before { display: none; }
.frame > img[data-shape="land"] { position: relative !important; inset: auto !important; height: auto !important;
  object-fit: contain !important; display: block; }
.photo-row .photo img[data-shape="land"] { height: auto !important; object-fit: contain !important; }
.grid { align-items: start; }

/* Whole previews are one target, with visible focus and hover. */
.card, .feed__item { border-radius: 2px; }
.card:focus-visible, .feed__item:focus-visible, .sig__title a:focus-visible, .hero__title a:focus-visible,
.topics__list a:focus-visible, .sig__btn:focus-visible, .inline-story button:focus-visible {
  outline: 3px solid var(--sync); outline-offset: 4px;
}
.card:hover .card__frame img { filter: brightness(1.06); }
.card__read { color: var(--muted); }
.feed__tags { display: inline-flex; gap: 0.6rem; align-items: center; }

/* Front page: the lead story opened in place */
.inline-story { background: var(--tape); border-bottom: 1px solid var(--rule); padding-block: 2rem 3rem; scroll-margin-top: 5.5rem; }
.inline-story__bar { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.inline-story__bar--end { margin: 2rem 0 0; }

/* Related coverage */
.topics { padding-block: 2.5rem 0; }
.topics__grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.topics__head { font: 800 1.1rem var(--display); text-transform: uppercase; border-bottom: 2px solid var(--sync); padding-bottom: 0.4rem; margin: 0 0 0.6rem; }
.topics__list { list-style: none; margin: 0; padding: 0; }
.topics__list a { display: grid; gap: 0.2rem; padding: 0.7rem 0; border-bottom: 1px solid var(--rule); color: var(--paper); text-decoration: none; }
.topics__list a:hover .topics__title { color: var(--sync); }
.topics__title { font: 700 1rem/1.3 var(--display); }
.topics__why { color: var(--muted); font-size: 0.7rem; }
.credit-line a, .credit a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }

/* Comments */
.comments { margin-top: 2.5rem; border-top: 1px solid var(--rule); padding-top: 1.5rem; }
.comments__head { font: 800 1.2rem var(--display); text-transform: uppercase; margin: 0 0 1rem; }
.comment { padding: 0.8rem 0; border-bottom: 1px solid var(--rule); }
.comment__head { display: flex; gap: 0.8rem; margin: 0 0 0.3rem; color: var(--muted); font-size: 0.72rem; }
.comment__head strong { color: var(--paper); }
.comment__text { margin: 0; white-space: pre-line; }
.comments__state { color: var(--muted); }
.comments__state--error { color: var(--signal); }
.comments__form { display: grid; gap: 0.7rem; margin-top: 1.2rem; max-width: 40rem; }
.comments__form label { display: grid; gap: 0.3rem; font: 0.72rem var(--osd); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.comments__form input, .comments__form textarea { font: 1rem var(--body); color: var(--paper); background: var(--raise);
  border: 1px solid var(--rule); padding: 0.6rem 0.7rem; text-transform: none; letter-spacing: 0; }
.comments__form input:focus, .comments__form textarea:focus { outline: 2px solid var(--sync); outline-offset: 1px; }
.comments__form .btn { justify-self: start; }
.comments__rules { color: var(--muted); font-size: 0.7rem; margin: 0; }
.comments__status { margin: 0; min-height: 1.4em; color: var(--sync); }
.linkish { background: none; border: 0; padding: 0; color: var(--sync); text-decoration: underline; cursor: pointer; font: inherit; }
.empty--news a { color: var(--sync); }

/* =====================================================================
   38. THE SIGNAL (/feed/) — terminal / BIOS screen, mint on near-black.
   Photos keep their natural colours; only the furniture is green.
   ===================================================================== */
.signal { --sig-bg: #050806; --sig-panel: #0A100C; --sig-ink: #D8F5E4; --sig-mint: #5CF2A8; --sig-dim: #7FA893; --sig-line: #1E3328;
  background: var(--sig-bg); color: var(--sig-ink); }
[data-theme="light"] .signal { --sig-bg: #EEF3EC; --sig-panel: #FFFFFF; --sig-ink: #122019; --sig-mint: #0B6B3A; --sig-dim: #4D6B5A; --sig-line: #BFD3C5; }
.signal__wrap { max-width: 46rem; }
.signal__boot { color: var(--sig-mint); font-size: 0.7rem; letter-spacing: 0.18em; margin: 0 0 0.6rem; }
.signal__title { font: 400 clamp(2.6rem, 2rem + 3vw, 4.4rem)/1 "VT323", var(--osd); color: var(--sig-mint); margin: 0; letter-spacing: 0.02em; text-transform: uppercase; }
.signal__intro { color: var(--sig-dim); margin: 0.6rem 0 2rem; font-size: 1.05rem; }
.signal__list { display: grid; gap: 1.25rem; }
.sig { background: var(--sig-panel); border: 1px solid var(--sig-line); padding: clamp(1rem, 2vw, 1.4rem); }
.sig__meta { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; color: var(--sig-dim); font-size: 0.72rem; margin: 0 0 0.8rem; }
.sig__prompt { color: var(--sig-mint); }
.sig__media { display: block; margin: 0 0 0.9rem; border: 1px solid var(--sig-line); }
.sig__media img { display: block; width: 100%; height: auto; }
.sig__media img[data-shape="port"] { max-height: 34rem; width: auto; max-width: 100%; margin-inline: auto; }
.sig__title { font: 800 clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem)/1.2 var(--display); margin: 0 0 0.45rem; }
.sig__title a { color: var(--sig-ink); text-decoration: none; }
.sig__title a:hover { color: var(--sig-mint); }
.sig__text { display: block; margin: 0 0 1rem; color: var(--sig-dim); text-decoration: none; }
.sig__text:hover { color: var(--sig-ink, inherit); }
.sig:hover .sig__title a, .sig__title a:focus-visible { text-decoration: underline; text-underline-offset: 0.15em; }
.sig__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sig__btn { font: 0.72rem var(--osd); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sig-ink);
  background: transparent; border: 1px solid var(--sig-line); padding: 0.5rem 0.75rem; cursor: pointer; text-decoration: none;
  display: inline-flex; gap: 0.4rem; align-items: center; }
.sig__btn:hover { border-color: var(--sig-mint); color: var(--sig-mint); }
.sig__like[aria-pressed="true"] { background: var(--sig-mint); color: var(--sig-bg); border-color: var(--sig-mint); }
.sig__read { margin-left: auto; }
.sig__comments { margin-top: 1rem; border-top: 1px dashed var(--sig-line); padding-top: 0.8rem; }
.sig .comments__form input, .sig .comments__form textarea { background: var(--sig-bg); color: var(--sig-ink); border-color: var(--sig-line); }
.sig .comment { border-color: var(--sig-line); }
.sig .comment__head strong { color: var(--sig-ink); }
.signal__pager { display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; }
.signal__pager .btn, .sig__more { color: var(--sig-mint); border-color: var(--sig-mint); }
.sig__end { color: var(--sig-dim); }
.signal .tag { background: transparent; }
@media (max-width: 560px) { .sig__read { margin-left: 0; } }