/* LNTV — palette, type and furniture lifted from the Broadcast V2 reel kit
   (src/frame/layouts/broadcastv2.css) so the site and the video read as one
   network. Coordinates are of course fluid here; the ingredients are not. */

:root {
  /* One dark house palette. Alternating sections lift the ground a step rather
     than inverting it, so the page has rhythm without breaking the broadcast. */
  --page:   #06070a;
  --card:   #0f1218;
  --ink:    #f3f2ee;
  --ink-2:  #a7aeb8;
  --ink-3:  #8b929c;
  --rule:   #23272e;
  --rule-2: #4c525b;

  --black:  #030405;
  --ground: #06070a;
  --plate:  #0b0d11;
  --line:   #23272e;
  --line-2: #4c525b;
  --chrome: #d6d9de;
  --paper:  #f3f2ee;
  --alert:  #c9141d;
  --up:     #1f9c62;
  --down:   #cf3b45;
  --dim:    #8b929c;

  /* Saira is a squarish grotesque — it shares the flat terminals and boxy
     counters of the chrome wordmark. Chakra Petch's cut corners read as
     broadcast hardware on the clock. Martian Mono is engineered and wide,
     which is exactly what a price tape wants. */
  --f-head: "Saira", "Arial Narrow", Arial, sans-serif;
  --f-clock: "Chakra Petch", "Eurostile Extended", sans-serif;
  --f-data: "Martian Mono", ui-monospace, monospace;

  /* Fine grain over the flat grounds — a broadcast signal is never clean.
     Painted on the sections themselves, not fixed behind them, so it scrolls
     with the page instead of sliding under it. */
  /* Heavier pass for the anchor — grain that reads on a photograph has to be
     stronger than grain that only has to break up a flat ground. */
  --grain-heavy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E");

  --gut: clamp(18px, 4vw, 64px);
  --maxw: 1400px;
}

/* Alternating sections sit a step above the base ground. Every section rule
   reads from these tokens, so overriding them here re-themes what is inside. */
.band-alt {
  --page: #0d1015;
  --card: #161b22;
  background: var(--grain), var(--page);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 150px; }
body {
  margin: 0;
  background: var(--grain), var(--page);
  color: var(--ink);
  font-family: var(--f-head);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; letter-spacing: -.03em; text-transform: uppercase; }

/* ---------------------------------------------------------------- masthead */

/* Masthead, market tape and sponsor bar ride together, so the whole strip of
   broadcast furniture stays put instead of each piece sticking on its own. */
.topbar { position: sticky; top: 0; z-index: 50; }

.masthead {
  background: repeating-linear-gradient(0deg, #050607 0 3px, #111318 3px 5px);
  border-bottom: 1px solid var(--line);
}
.smpte {
  height: 7px;
  background: url('/assets/smpte-signal-strip.svg') left center / auto 100% repeat-x;
  opacity: .9;
}
.masthead-row {
  max-width: var(--maxw); margin: 0 auto; padding: 12px var(--gut);
  display: flex; align-items: center; gap: clamp(14px, 3vw, 40px);
}
.pill {
  display: flex; align-items: center; gap: 12px;
  background: #020304; border-radius: 10px; padding: 8px 16px;
  box-shadow: 0 0 0 2px #101318, 0 8px 22px rgba(0,0,0,.45);
}
.recdot {
  width: 11px; height: 11px; border-radius: 50%;
  background: #ef2531; box-shadow: 0 0 14px #ef2531;
  animation: blink 1.6s steps(1, end) infinite;
}
@keyframes blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .45; } }
.clock {
  font: 400 clamp(20px, 2.4vw, 30px)/.9 var(--f-clock);
  letter-spacing: -.075em; font-variant-numeric: tabular-nums; color: var(--paper);
}
.meridiem { display: flex; flex-direction: column; }
.meridiem i {
  font: 700 11px/1.18 var(--f-data); font-style: normal;
  letter-spacing: .06em; text-transform: uppercase; color: var(--paper);
}

/* The masthead is the approved artwork, never type. Ink-tight ratio is
   5.329:1, so every box that draws it keeps that ratio exactly. */
.wordmark {
  display: block; width: clamp(126px, 15vw, 200px); aspect-ratio: 5.329 / 1;
  background: url('/assets/lntv-wordmark.png') center / contain no-repeat;
  /* Padding grows the tap target without moving the artwork, which stays in
     the content box. A 15px-tall link is not a thing you can hit with a thumb. */
  padding: 11px 6px; box-sizing: content-box;
  background-origin: content-box; background-clip: content-box;
}
.wordmark-big { width: min(520px, 74vw); margin: 0 auto; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* Icon-only up here — the masthead has no room for labels, and the wordmark
   already says whose accounts these are. */
.nav-social {
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 5px;
  background: linear-gradient(180deg, #2b3038 0%, #12151a 60%, #080a0d 100%);
  border: 1px solid var(--line-2); color: var(--dim);
  transition: color .15s, border-color .15s;
}
.nav-social svg { width: 14px; height: 14px; }
.nav-social:hover { color: var(--paper); border-color: var(--chrome); }
.nav a {
  font: 700 13px/1 var(--f-data); letter-spacing: .02em; color: var(--dim);
  padding: 8px 0; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
.nav a:hover { color: var(--paper); border-bottom-color: var(--alert); }
.nav .nav-cta { margin-left: 6px; white-space: nowrap;
  color: var(--black); background: var(--chrome); padding: 9px 16px;
  border-radius: 4px; border-bottom: none;
}
.nav .nav-cta:hover { background: var(--paper); color: var(--black); border-bottom-color: transparent; }

/* ------------------------------------------------------------------- tape */

.tape {
  position: relative; display: flex; align-items: stretch;
  background: var(--ground);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  height: 32px; overflow: hidden;
}
.tape-flag {
  display: flex; align-items: center; gap: 7px; flex: none;
  padding: 0 12px; background: var(--alert); color: #fff;
  font: 700 10px/1 var(--f-data); letter-spacing: .02em;
}
.tape-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: blink 1.6s steps(1,end) infinite; }
.tape-window { flex: 1; overflow: hidden; display: flex; align-items: center; }
.tape-run { display: flex; align-items: center; white-space: nowrap; will-change: transform; animation: crawl 70s linear infinite; }
.tape:hover .tape-run { animation-play-state: paused; }
@keyframes crawl { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.tape-item { display: inline-flex; align-items: baseline; gap: 8px; padding: 0 18px; }
.tape-item .lbl, .tape-item .val {
  font: 600 12px/1 var(--f-data); font-variant-numeric: tabular-nums; color: var(--paper);
}
.tape-item .lbl { letter-spacing: .02em; }
.tape-item .chg { font: 500 11px/1 var(--f-data); font-variant-numeric: tabular-nums; }
.chg.up { color: var(--up); }
.chg.down { color: var(--down); }

/* --------------------------------------------------------------- sponsors */

/* The sponsor bar is its own strip under the quote line, never mixed into it.
   Marks are LNTV filler until a slot holder's creative is attached; the engine
   swaps them at render time. */
.logorail {
  display: flex; align-items: stretch; height: 56px; overflow: hidden;
  background: var(--ground);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.logorail-flag {
  display: flex; align-items: center; flex: none; padding: 0 16px;
  background: #14181e; border-right: 1px solid var(--line);
  font: 700 11px/1 var(--f-data); letter-spacing: .06em; color: var(--dim);
}
.rail-window { flex: 1; overflow: hidden; display: flex; align-items: center; }
.logorail-run { display: flex; align-items: center; white-space: nowrap; animation: crawl 52s linear infinite; }
.logorail:hover .logorail-run { animation-play-state: paused; }
.logo-unit { display: inline-flex; align-items: center; flex: none; padding: 0 34px; }
.logo-unit img { width: 88px; max-width: none; height: auto; opacity: .62; }
.logo-unit.open {
  flex: none; font: 700 11px/1 var(--f-data); letter-spacing: .06em; color: var(--dim);
  border: 1px dashed var(--line-2); padding: 9px 14px; margin: 0 34px;
}


/* ----------------------------------------------------------------- lander */

/* Loud network title card: the chrome mark at full width, the hook under it,
   then the places to find us — and the anchor standing on a dotted world,
   cut out so nothing boxes him in. */
.lander {
  position: relative; overflow: hidden;
  background: var(--grain), var(--page);
  border-bottom: 1px solid var(--rule);
  padding: clamp(26px, 4vw, 58px) var(--gut) 0;
}

/* Black dots on transparent in the source; inverted they read as a lit map.
   The plate is equirectangular, so tiling it twice across a double-width run
   and translating exactly one tile turns it — the same seamless-loop trick the
   market crawls use, which is the only honest way to spin a flat projection. */
.lander-map {
  position: absolute; inset: auto 0 0; height: 52%;
  overflow: hidden; opacity: .95; pointer-events: none;
}
.lander-map-run {
  position: absolute; inset: 0; width: 300%;
  /* Seamlessness only needs the translate to be a whole number of tiles, so a
     wider run buys a bigger tile: 25% of a 300% run is three quarters of the
     viewport per world, and the -50% translate is exactly two of them. The
     plate is cropped to its ink, so tiles butt with no dead margin. */
  background: url('/assets/world-dot-map.png') left bottom / 25% auto repeat-x;
  filter: invert(1);
  animation: map-spin 120s linear infinite;
}
@keyframes map-spin {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.lander-inner { position: relative; max-width: 1180px; margin: 0 auto; text-align: center; }

.lander-mark {
  display: block; width: 100%; max-width: 1100px; margin: 0 auto;
  aspect-ratio: 5.329 / 1; object-fit: contain;
}

.lander-tag {
  margin: clamp(10px, 1.4vw, 18px) 0 0;
  font: 900 clamp(15px, 2.05vw, 34px)/1.15 var(--f-head);
  letter-spacing: -.03em; text-transform: uppercase; color: var(--ink);
}
.lander-tag span {
  display: block; margin-top: 8px;
  font: 600 clamp(9px, .82vw, 12px)/1.4 var(--f-data);
  letter-spacing: .06em; color: var(--ink-3); text-transform: none;
}

/* ---- find bar ---- */

.findbar {
  display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap;
  margin: clamp(20px, 2.6vw, 34px) auto 0; max-width: 1000px;
}
.findbar-label {
  display: flex; align-items: center; padding: 0 clamp(16px, 2vw, 28px);
  background: linear-gradient(180deg, #2b3038 0%, #12151a 55%, #080a0d 100%);
  border: 1px solid var(--line-2); border-radius: 6px;
  font: 800 clamp(12px, 1.1vw, 16px)/1 var(--f-head); letter-spacing: .04em; color: var(--paper);
}
.findbar-social {
  flex: 1 1 320px; display: flex; gap: 10px;
  background: linear-gradient(180deg, #2b3038 0%, #12151a 55%, #080a0d 100%);
  border: 1px solid var(--line-2); border-radius: 6px; padding: 8px;
}
.findbar-social a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 62px; padding: 0 16px; border-radius: 4px;
  background: linear-gradient(180deg, #f7f8fa 0%, #c9ced6 100%); color: #06070a;
  border: 1px solid #8b929c;
  transition: transform .12s, filter .12s;
}
.findbar-social a:hover { filter: brightness(1.08); transform: translateY(-1px); }
.findbar-social svg { width: clamp(22px, 2vw, 30px); height: auto; flex: none; }
.findbar-social b { font: 800 clamp(13px, 1.15vw, 18px)/1 var(--f-head); letter-spacing: .02em; }
/* Audience readout rides in the same bar as the places to find us. It counts
   total views, so it carries no live pulse — that would claim concurrency. */
.findbar-views {
  display: flex; align-items: center; gap: 10px; flex: none;
  padding: 0 clamp(14px, 1.6vw, 22px);
  background: linear-gradient(180deg, #2b3038 0%, #12151a 55%, #080a0d 100%);
  border: 1px solid var(--line-2); border-radius: 6px;
}
.views-label { font: 700 10px/1 var(--f-data); letter-spacing: .06em; color: var(--dim); }
.findbar-views b {
  font: 600 clamp(15px, 1.4vw, 20px)/1 var(--f-data); font-variant-numeric: tabular-nums;
  color: var(--paper);
}

.findbar-cta {
  display: flex; align-items: center; justify-content: center;
  padding: 0 clamp(20px, 2.6vw, 40px); min-height: 62px; border-radius: 6px;
  background: linear-gradient(180deg, #e5262f 0%, #c9141d 60%, #8f0d14 100%);
  border: 1px solid #ef4c53; color: #fff;
  font: 800 clamp(13px, 1.2vw, 19px)/1 var(--f-head); letter-spacing: .02em;
  box-shadow: 0 6px 22px rgba(201,20,29,.35);
  transition: filter .12s, transform .12s;
}
.findbar-cta:hover { filter: brightness(1.1); transform: translateY(-1px); }


/* ---- the anchor, lit from behind ---- */

.lander-stage { position: relative; margin-top: clamp(4px, .6vw, 12px); }
.lander-stage::before {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(620px, 78%); height: 66%;
  background: radial-gradient(ellipse at 50% 66%, rgba(201,20,29,.26) 0%, rgba(201,20,29,.07) 44%, rgba(0,0,0,0) 70%);
  pointer-events: none;
}


/* ---- cigarette smoke ---- */

/* The background remover took the smoke with the backdrop, so it is composited
   back as its own layer, keyed off the same source frame. Percentages are the
   smoke's box within the original plate, so it stays locked to the cigarette
   at every width. */
.anchor-wrap { position: relative; width: clamp(260px, 40vw, 560px); margin: 0 auto; }
.lander-anchor {
  position: relative; z-index: 2;
  display: block; width: 100%; height: auto;
  /* Sat a shade bright against the dark ground; a touch of contrast keeps the
     chrome from going muddy as it comes down. */
  filter: brightness(.84) contrast(1.06) drop-shadow(0 26px 50px rgba(0,0,0,.7));
}
/* Grain over the anchor, masked by the cutout itself — the browser already has
   that PNG, so this costs no extra bytes. Baking the noise into the file
   instead tripled it, because grain does not deflate. */
.lander-anchor-grain {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: var(--grain-heavy);
  -webkit-mask: url('/assets/anchor-cutout.png') center / contain no-repeat;
  mask: url('/assets/anchor-cutout.png') center / contain no-repeat;
  mix-blend-mode: hard-light; opacity: .2;
}

.lander-smoke {
  position: absolute; z-index: 3; left: 69.3%; top: .6%; width: 20.1%; height: auto;
  transform-origin: 50% 100%; opacity: 0; pointer-events: none;
  animation: smoke-rise 9s linear infinite;
}
.lander-smoke-b { animation-delay: -4.5s; }

@keyframes smoke-rise {
  0%   { opacity: 0;   transform: translateY(7%)   scale(.94) rotate(0deg); }
  18%  { opacity: .95; }
  55%  { opacity: .7;  transform: translateY(-5%)  scale(1.04) rotate(1.2deg); }
  100% { opacity: 0;   transform: translateY(-15%) scale(1.14) rotate(-1deg); }
}

/* ----------------------------------------------------------------- claims */

/* Network promo copy: four flat declarations on rules, not a grid of cards. */
.claims { background: var(--grain), var(--page); border-bottom: 1px solid var(--rule); }
.claims-inner { max-width: var(--maxw); margin: 0 auto; padding: clamp(36px, 4.4vw, 66px) var(--gut); }
.claims-flag {
  margin: 0 0 clamp(18px, 2.2vw, 28px);
  font: 700 11px/1 var(--f-data); letter-spacing: .06em; color: var(--alert);
}
.claims ol { list-style: none; margin: 0; padding: 0; }
.claims li {
  display: grid; grid-template-columns: 56px minmax(0, 1.35fr) minmax(0, .9fr);
  gap: clamp(16px, 2.4vw, 40px); align-items: start;
  border-top: 1px solid var(--rule-2); padding: clamp(18px, 2.1vw, 27px) 0;
}
.claims li:last-child { border-bottom: 1px solid var(--rule-2); }
.claims .ix { font: 400 14px/1.2 var(--f-clock); letter-spacing: -.05em; color: var(--ink-3); }
.claims h2 {
  font: 900 clamp(24px, 3.1vw, 46px)/.96 var(--f-head);
  letter-spacing: -.045em; word-spacing: .06em; color: var(--ink);
}
.claims h2 em { font-style: normal; color: var(--alert); }
.claims li p { margin: 0; font: 500 clamp(14px, 1.05vw, 16px)/1.6 var(--f-head); color: var(--ink-2); }

/* ------------------------------------------------------------------ bands */

.band { max-width: var(--maxw); margin: 0 auto; padding: clamp(36px, 4.4vw, 66px) var(--gut); background: var(--grain), var(--page); }
.band-tight { padding-top: clamp(20px, 3vw, 40px); }
.band-alt + .band, .band + .band-alt { padding-top: clamp(40px, 5vw, 74px); }
.band-head { border-top: 2px solid var(--rule-2); padding-top: 16px; margin-bottom: clamp(24px, 3.4vw, 42px); }
.band-head h2 { font: 900 clamp(26px, 4vw, 54px)/.94 var(--f-head); letter-spacing: -.045em; word-spacing: .08em; color: var(--ink); }
.band-head p { margin: 12px 0 0; max-width: 72ch; font: 500 clamp(14px, 1.1vw, 16px)/1.55 var(--f-head); color: var(--ink-2); }

.loading { font: 600 13px/1 var(--f-data); letter-spacing: .02em; color: var(--ink-3); padding: 30px 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 12px/1 var(--f-data); letter-spacing: .06em;
  padding: 13px 22px; border: 1px solid var(--rule-2); color: var(--ink);
  background: transparent; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.btn:hover { background: rgba(214,217,222,.08); border-color: var(--chrome); }
.btn-primary { background: var(--ink); color: var(--page); border-color: var(--ink); }
.btn-primary:hover { background: #fff; }

/* ---------------------------------------------------------------- the CRT */

/* A moulded set rather than a picture of one: built from gradients so it holds
   the reel's 9:16 at any size, where a square bezel image would have to stretch
   its corners to get there. Ribbing across the plastic is what sells the age. */
.crt-set {
  position: relative;
  padding: clamp(16px, 7%, 30px) clamp(15px, 6.5%, 28px) clamp(26px, 13%, 52px);
  border-radius: 26px / 20px;
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.035) 0 1px, rgba(0,0,0,.22) 1px 3px),
    linear-gradient(180deg, #41464e 0%, #22262d 9%, #12161b 46%, #1c2027 88%, #04060a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -2px 3px rgba(0,0,0,.9),
    inset 2px 0 3px rgba(0,0,0,.55),
    inset -2px 0 3px rgba(0,0,0,.55),
    0 24px 48px rgba(0,0,0,.6);
}

/* Volume is a knob on the chin, the way a set carries its controls. Centred
   rather than tucked right, so the legend cannot run off the moulding where it
   curves into the corner. */
.crt-dial {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: clamp(5px, 2.4%, 11px);
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; margin: -8px -10px; border: 0; background: none; cursor: pointer;
}
.dial-face {
  position: relative; flex: none; width: clamp(20px, 7.5%, 28px); aspect-ratio: 1; border-radius: 50%;
  background:
    conic-gradient(from 210deg,
      #6c727b 0deg, #2b3037 42deg, #878e98 96deg, #33383f 150deg,
      #767d87 208deg, #262a30 262deg, #7b828c 318deg, #6c727b 360deg),
    #3a3f47;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.28),
    inset 0 -2px 4px rgba(0,0,0,.75),
    inset 0 2px 3px rgba(255,255,255,.16),
    0 2px 4px rgba(0,0,0,.85);
  transform: rotate(-38deg);
  transition: transform .2s ease;
}
.dial-notch {
  position: absolute; left: 50%; top: 12%; width: 2px; height: 34%;
  margin-left: -1px; border-radius: 1px;
  background: #05070a; box-shadow: 0 1px 0 rgba(255,255,255,.22);
}
.crt-dial:hover .dial-face { box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), inset 0 -2px 4px rgba(0,0,0,.75), 0 2px 6px rgba(0,0,0,.9); }
.crt-dial.on .dial-face { transform: rotate(38deg); }

/* A speaker that crosses out says "volume, currently off" in one glance —
   an unlit lamp only read as a pinhole. */
.dial-read { display: flex; align-items: center; gap: 6px; color: #5d636c; transition: color .2s; }
.crt-dial.on .dial-read { color: var(--paper); }
.dial-read svg { width: 12px; height: 12px; flex: none; }
.dial-read .ico-on { display: none; }
.crt-dial.on .ico-on { display: block; }
.crt-dial.on .ico-off { display: none; }
.crt-sound-label { font: 700 8px/1 var(--f-data); letter-spacing: .14em; }

/* The glass sits below the moulding, with the lip casting onto it. */
.crt-screen {
  position: relative; aspect-ratio: 9 / 16; overflow: hidden;
  border-radius: 10px / 7px;
  background: #000;
  box-shadow:
    inset 0 0 22px 6px rgba(0,0,0,.95),
    inset 0 2px 5px rgba(0,0,0,1),
    0 0 0 2px #0a0c10,
    0 0 0 3px rgba(255,255,255,.07),
    0 1px 0 4px rgba(0,0,0,.8);
}
.crt-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }

/* ------------------------------------------------------------ the format */

.lead {
  display: grid; grid-template-columns: minmax(240px, 330px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 60px); align-items: start;
  border-top: 1px solid var(--rule);
  padding: clamp(24px, 3vw, 40px) 0 0;
}

.format { list-style: none; margin: 0; padding: 0; }
.format li { border-bottom: 1px solid var(--rule); padding: 0 0 clamp(16px, 1.8vw, 22px); margin-bottom: clamp(16px, 1.8vw, 22px); }
.format li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.format h3 {
  font: 800 clamp(16px, 1.5vw, 21px)/1.1 var(--f-head);
  letter-spacing: -.03em; color: var(--ink); margin-bottom: 8px;
}
.format p { margin: 0; font: 500 clamp(14px, 1.1vw, 16px)/1.6 var(--f-head); color: var(--ink-2); max-width: 62ch; }

/* ------------------------------------------------------------- placements */

/* Inventory is sold, not tabulated. The flagship gets the frame it actually
   occupies; the rail gets shown as a rail. Rank drives every size on the page. */
.slots { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 26px); }
.unit { border: 1px solid var(--rule-2); background: var(--card); display: grid; box-shadow: 0 1px 0 var(--rule); }
.unit-hero { grid-template-columns: 1.15fr 1fr; border-width: 2px; border-color: var(--rule-2); }
.unit-second { grid-template-columns: .8fr 1fr; }
.unit-second .unit-shot { max-height: 330px; }
.unit-second .unit-body { padding: clamp(18px, 2vw, 28px); gap: 11px; }
.unit-second .unit-line { font-size: clamp(14px, 1.05vw, 16px); }
.unit-second .unit-perks li { padding: 9px 0 9px 20px; font-size: 13px; }
.unit-second .unit-perks li::before { top: 15px; width: 7px; height: 7px; }
.unit-second .unit-buy { padding-top: 14px; }
.unit-second .unit-price b { font-size: clamp(22px, 2.2vw, 30px); }

.unit-shot { position: relative; background: #000; border-right: 1px solid var(--rule); overflow: hidden; }
.unit-shot > img { width: 100%; height: 100%; object-fit: cover; }
.unit-badge {
  position: absolute; left: 14px; top: 14px;
  background: rgba(2,3,4,.86); border: 1px solid var(--line-2);
  font: 700 10px/1 var(--f-data); letter-spacing: .06em; color: var(--paper); padding: 8px 10px;
}
.unit-shot-rail { display: grid; place-items: center; padding: 26px 0; background: var(--ground); }

/* The read is the product, so the unsold placement is shown as script, not
   as another photograph of the desk. */
.unit-shot-script {
  display: grid; place-items: center; padding: clamp(26px, 3vw, 44px);
  background: var(--ground);
}
.script-line {
  margin: 0; max-width: 34ch;
  font: 500 clamp(16px, 1.5vw, 22px)/1.5 var(--f-head); color: var(--chrome);
}
.script-line b { color: var(--paper); background: var(--alert); padding: 0 6px; }

.unit-soon { border-style: dashed; }
.unit-soon .unit-rank { color: var(--ink-3); }
.unit-price.soon { font: 700 12px/1 var(--f-data); letter-spacing: .1em; color: var(--alert); }
.railpreview {
  display: flex; align-items: center; width: 100%; overflow: hidden;
  background: #06070a; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  height: 56px;
}
.railpreview-flag {
  flex: none; padding: 0 14px; align-self: stretch; display: flex; align-items: center;
  background: #14181e; border-right: 1px solid var(--line);
  font: 700 10px/1 var(--f-data); letter-spacing: .06em; color: var(--dim);
}
.railpreview .logo-unit { padding: 0 22px; }
.railpreview .logo-unit img { width: 66px; }
.railpreview .logo-unit.open { margin: 0 18px; border-color: var(--alert); color: var(--paper); }

.unit-body { padding: clamp(22px, 2.6vw, 36px); display: flex; flex-direction: column; gap: 14px; }
.unit-rank { margin: 0; font: 700 10px/1 var(--f-data); letter-spacing: .06em; color: var(--alert); }
.unit h3 { font: 900 clamp(22px, 2.5vw, 36px)/.96 var(--f-head); letter-spacing: -.04em; color: var(--ink); }
.unit-second h3 { font-size: clamp(20px, 2vw, 28px); }
.unit-line { margin: 0; font: 500 clamp(15px, 1.2vw, 18px)/1.5 var(--f-head); color: var(--ink-2); }
.unit-perks { list-style: none; margin: 0; padding: 0; }
.unit-perks li {
  position: relative; padding: 11px 0 11px 22px;
  border-top: 1px solid var(--rule); font: 500 14px/1.5 var(--f-head); color: var(--ink-2);
}
.unit-perks li::before { content: ""; position: absolute; left: 0; top: 18px; width: 9px; height: 9px; background: var(--alert); }

.unit-buy {
  margin-top: auto; padding-top: 18px; border-top: 2px solid var(--rule-2);
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(14px, 2vw, 26px);
}
.unit-price { margin: 0; display: flex; align-items: baseline; gap: 7px; }
.unit-price b { font: 600 clamp(28px, 3vw, 40px)/1 var(--f-data); font-variant-numeric: tabular-nums; color: var(--ink); }
.unit-price i { font: 600 10px/1 var(--f-data); font-style: normal; letter-spacing: .06em; color: var(--ink-3); }
.unit-avail { margin: 0; font: 700 11px/1.6 var(--f-data); letter-spacing: .06em; color: var(--up); }
.unit-avail span { display: block; font-weight: 600; color: var(--ink-3); letter-spacing: .1em; }
.unit.held .unit-avail { color: var(--ink-3); }
.unit-buy .btn { margin-left: auto; }

/* The absence of inventory is itself a pitch. */
.nosell {
  margin-top: clamp(20px, 2.6vw, 34px); border-left: 3px solid var(--alert);
  padding: 4px 0 4px 20px; max-width: 78ch;
}
.nosell h3 { font: 800 clamp(15px, 1.3vw, 18px)/1 var(--f-head); color: var(--ink); margin-bottom: 10px; }
.nosell p { margin: 0; font: 500 15px/1.6 var(--f-head); color: var(--ink-2); }

.howto { margin-top: clamp(30px, 4vw, 52px); border-top: 2px solid var(--rule-2); padding-top: 20px; }
.howto h3 { font: 800 clamp(15px, 1.3vw, 18px)/1 var(--f-head); color: var(--ink); margin-bottom: 6px; }
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 clamp(16px, 2vw, 30px); }
.steps li {
  counter-increment: step; padding: 16px 0 4px;
  font: 500 14px/1.5 var(--f-head); color: var(--ink-2);
}
.steps li::before {
  content: counter(step, decimal-leading-zero); display: block; margin-bottom: 8px;
  font: 400 13px/1 var(--f-clock); letter-spacing: -.05em; color: var(--alert);
}
.howto-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 24px; }
.fineprint {
  flex: 1 1 320px; font: 500 11px/1.6 var(--f-data); color: var(--ink-3);
  border-left: 2px solid var(--rule-2); padding-left: 12px; margin: 0;
}

/* --------------------------------------------------------------- network */

/* Set as newspaper columns — running text, not a grid of claim cards. */
.manifesto { columns: 3 260px; column-gap: clamp(24px, 3vw, 46px); }
.manifesto p { margin: 0 0 16px; font: 500 15px/1.6 var(--f-head); color: var(--ink-2); break-inside: avoid; }
.manifesto p:first-child::first-letter {
  float: left; font: 900 62px/.78 var(--f-head); color: var(--ink);
  margin: 4px 10px 0 0; letter-spacing: -.04em;
}
.pullquote {
  margin: clamp(28px, 4vw, 48px) 0 0; background: var(--ink); color: var(--page);
  font: 900 clamp(21px, 3.2vw, 46px)/1.02 var(--f-head); letter-spacing: -.045em; word-spacing: .1em;
  text-transform: uppercase; padding: clamp(24px, 3.6vw, 50px) clamp(20px, 3.6vw, 52px);
}
.pullquote em { font-style: normal; color: var(--alert); }

/* ------------------------------------------------------------ on location */

.locationband { margin: 0; border-top: 1px solid var(--rule); background: #000; }
/* Same treatment as the lander anchor: knocked back with a little contrast to
   hold the chrome, and the grain laid over the picture only — the caption sits
   outside the shot so it stays clean. */
.locationband-shot { position: relative; line-height: 0; }
.locationband img {
  width: 100%; height: clamp(200px, 26vw, 400px); object-fit: cover; object-position: center 42%;
  filter: brightness(.84) contrast(1.06);
}
.locationband-shot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--grain-heavy);
  mix-blend-mode: hard-light; opacity: .2;
}

/* ----------------------------------------------------------------- footer */

.footer { border-top: 1px solid var(--line); padding: clamp(38px, 5vw, 64px) var(--gut); text-align: center; background: var(--ground); }
.footer-line { margin: 18px 0 0; font: 600 11px/1 var(--f-data); letter-spacing: .06em; color: var(--dim); }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px 0 0; }
.footer-nav a { font: 700 12px/1 var(--f-data); letter-spacing: .06em; color: var(--dim); padding: 11px 6px; }
.footer-nav a:hover { color: var(--paper); }
.footer-copy { margin: 26px 0 0; font: 600 11px/1.6 var(--f-data); letter-spacing: .06em; color: #6d737c; }

/* ------------------------------------------------------------------ modal */

.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: rgba(2,3,4,.82); }
.modal[hidden] { display: none; }
.modal-card { position: relative; width: min(520px, 100%); background: var(--card); border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px rgba(214,217,222,.08), 0 30px 80px rgba(0,0,0,.7); padding: 30px; }
.modal-x { position: absolute; top: 12px; right: 12px; background: none; border: none; color: var(--ink-3); font-size: 16px; cursor: pointer; }
.modal-x:hover { color: var(--ink); }
.modal-kicker { font: 600 11px/1 var(--f-data); letter-spacing: .06em; color: var(--alert); margin-bottom: 14px; }
.modal-card h3 { font: 900 clamp(24px, 3vw, 34px)/1 var(--f-head); letter-spacing: -.04em; color: var(--ink); }
.modal-card p { margin: 14px 0 0; font: 500 15px/1.55 var(--f-head); color: var(--ink-2); }
.modal-rows { margin: 20px 0 0; border-top: 1px solid var(--rule); }
.modal-rows div { display: flex; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--rule); padding: 12px 0; font: 600 12px/1 var(--f-data); letter-spacing: .06em; }
.modal-rows span:first-child { color: var(--ink-3); }
.modal-btn { margin-top: 24px; width: 100%; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1040px) {
  .unit-hero, .unit-second { grid-template-columns: 1fr; }
  .unit-shot { border-right: none; border-bottom: 1px solid var(--line); }
  .unit-hero .unit-shot { aspect-ratio: 16 / 9; }
  .lead { grid-template-columns: 1fr; }
  .lead-screen { max-width: 300px; }
}
@media (max-width: 860px) {
  .claims li { grid-template-columns: 40px 1fr; }
  .claims li p { grid-column: 2; }
  .findbar-label { flex: 1 1 100%; justify-content: center; padding: 14px; }
  .findbar-views { flex: 1 1 100%; justify-content: center; padding: 14px; }
  .findbar-cta { flex: 1 1 100%; }
}
@media (max-width: 780px) {
  .meridiem { display: none; }
}
/* The masthead runs out of room before anything else does: the wordmark, the
   two icons and the call cannot all keep full size on a phone. */
@media (max-width: 620px) {
  .masthead-row { gap: 8px; padding-left: 14px; padding-right: 14px; }
  .wordmark { width: clamp(90px, 21vw, 130px); padding: 12px 6px; }
  .nav { gap: 6px; }
  .nav-social { width: 32px; height: 32px; }
  .nav-social svg { width: 13px; height: 13px; }
  .nav .nav-cta { padding: 10px 10px; font-size: 11px; letter-spacing: .02em; }
  .pill { padding: 6px 10px; gap: 8px; }
  .nav-social { flex: none; }
}

/* Below this the clock, the mark and three controls cannot share one line —
   the mark goes, since the lander repeats it at full size right underneath. */
@media (max-width: 430px) {
  .masthead-row .wordmark { display: none; }

  /* The stack is fixed to the top of a short screen, so it has to earn its
     height: the sponsor bar gives some back. */
  .logorail { height: 42px; }

  /* Stacked, the placement preview is short enough that the corner badge lands
     on top of the rail it is labelling. */
  .unit-shot-rail { padding: 52px 0 22px; }
  .unit-shot-script { padding: 52px 20px 22px; }
  .railpreview .logo-unit.open { margin: 0 10px; padding: 6px 8px; font-size: 9px; }
  .railpreview-flag { padding: 0 10px; }
  .logo-unit.open { padding: 7px 10px; margin: 0 20px; font-size: 10px; }
  .logo-unit { padding: 0 22px; }
}
}

@media (prefers-reduced-motion: reduce) {
  .tape-run, .logorail-run, .lander-smoke, .lander-map-run, .recdot, .tape-dot { animation: none; }
}