/* Wallet selection is shared by the auction and wallet pages. */
.wallet-picker {
  width:min(600px, calc(100vw - 32px));
  max-width:none;
  max-height:calc(100dvh - 32px);
  padding:32px;
  margin:auto;
  overflow-y:auto;
  color:#f2f4f7;
  background:#121720;
  border:1px solid #5c6573;
  border-top:3px solid #c9141d;
  box-shadow:0 16px 80px #000b;
}
.wallet-picker::backdrop { background:#030508bf; backdrop-filter:blur(5px); }
.wallet-picker h2 { margin:0 0 28px; padding:0; font-size:28px; line-height:1.2; }
.wallet-picker-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.wallet-picker-options .btn { width:100%; min-width:0; min-height:56px; padding:16px; white-space:normal; overflow-wrap:anywhere; }
.wallet-picker .wallet-picker-cancel { display:block; margin:24px 0 0 auto; min-width:120px; min-height:44px; }
@media(max-width:460px) {
  .wallet-picker { padding:24px; }
  .wallet-picker h2 { font-size:24px; margin-bottom:24px; }
  .wallet-picker-options { grid-template-columns:1fr; }
}

/* 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 {
  /* Dark. The page is the black the bands sit on, never a paper ground -
     the light experiment washed the anchor out and the chrome wordmark with it.
     Whites are cool and neutral, never warm. */
  --page:   #06070a;
  --card:   #0f1218;
  --ink:    #f2f4f7;
  --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:  #f2f4f7;
  --alert:  #c9141d;
  --up:     #1f9c62;
  --down:   #cf3b45;
  --dim:    #8b929c;

  /* The type the broadcasts actually render in. The reel names Inter Tight,
     which is not installed in the renderer, so every headline on air has been
     Helvetica/Arial all along. Set on purpose here rather than by accident. */
  --f-head: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Fine grain over the flat grounds - a broadcast signal is never clean.
     These were lost in an edit, which took every background that referenced
     them down with it: an undefined var makes the whole shorthand invalid, so
     body, .band and .claims fell through to white. */
  --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");
  --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");

  --f-clock: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-data: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --dotmap: url('/assets/dot-map.svg');

  --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; overflow-x: hidden; }
body {
  margin: 0;
  background: var(--grain), var(--page);
  color: var(--ink);
  font-family: var(--f-head);
  -webkit-font-smoothing: antialiased;
}
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 {
  position: relative;
  background:
    radial-gradient(46% 210% at 9% 50%,
      rgba(255,255,255,.13) 0%,
      rgba(255,255,255,.045) 34%,
      rgba(255,255,255,0) 62%),
    radial-gradient(120% 260% at 50% 50%,
      rgba(255,255,255,.02) 0%,
      rgba(0,0,0,.36) 62%,
      rgba(0,0,0,.72) 100%),
    repeating-linear-gradient(180deg,
      #191c20 0 1px,
      #101317 1px 2px,
      #06080a 2px 3px,
      #020304 3px 4px);
  border-bottom: 1px solid var(--line);
}
/* A hairline of light along the top edge, the way the plate catches it. */
.masthead::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px; z-index: 2;
  background: linear-gradient(90deg,
    rgba(255,255,255,.14) 0%, rgba(255,255,255,.1) 26%,
    rgba(255,255,255,.03) 62%, rgba(255,255,255,0) 100%);
}
.smpte {
  height: 7px;
  background: url('/assets/smpte-signal-strip.svg') left center / auto 100% repeat-x;
  opacity: .9;
}
.masthead-row {
  max-width: none; margin: 0; padding: 12px clamp(14px, 2vw, 28px);
  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-800.webp') 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: clamp(6px, 1vw, 14px); }

/* Flat marks, not chips. The masthead is already a busy dark band and a row of
   bordered pills on top of it reads as toolbar furniture. */

.nav-social svg { width: 17px; height: 17px; display: block; }

.nav-cta {
  display: inline-flex; align-items: center; height: 38px; padding: 0 18px;
  background: var(--alert); color: #fff; border: 0; border-radius: 0;
  font: 700 12px/1 var(--f-head); letter-spacing: .1em; text-transform: uppercase;
  transition: background .15s;
}
.nav-cta:hover { background: #a80f17; }

.tape {
  position: relative; display: flex; align-items: stretch;
  background: #0b0d11;
  border-top: 1px solid #1d2027; border-bottom: 1px solid #1d2027;
  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/dot-map.svg') 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;
}
/* Four platforms will not carry labels at this width, so the plates go
   icon-only and the glyph grows to hold the button on its own. */
.findbar-social a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 62px; padding: 0 12px; 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, 2.1vw, 28px); height: auto; flex: none; }
/* 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 */

/* The argument for the market comes before the inventory in it - four claims
   on rules, sized to be read rather than skimmed past. */
.thesis {
  list-style: none; margin: 0 0 clamp(18px, 2.2vw, 28px); padding: 0;
  /* Five across on a wide screen; the min is set so the last claim never sits
     alone on a row of its own. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  gap: 0 clamp(18px, 2.4vw, 36px);
  border-top: 2px solid var(--rule-2);
}
.thesis li { padding: clamp(18px, 2vw, 26px) 0 clamp(14px, 1.6vw, 20px); }
.thesis h3 {
  font: 800 clamp(14px, 1.15vw, 16px)/1.2 var(--f-head);
  letter-spacing: -.01em; color: var(--ink); margin-bottom: 9px;
}
.thesis p { margin: 0; font: 500 clamp(13px, 1.02vw, 15px)/1.6 var(--f-head); color: var(--ink-2); }
.thesis b {
  font: 600 clamp(14px, 1.1vw, 16px)/1 var(--f-data); font-variant-numeric: tabular-nums;
  color: var(--paper);
}
.thesis-note {
  margin: 0 0 clamp(22px, 3vw, 34px);
  border-left: 2px solid var(--alert); padding-left: 12px; max-width: 70ch;
  font: 600 clamp(11px, .92vw, 13px)/1.6 var(--f-data); color: var(--ink-3);
}

/* 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-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);
}
/* One cell per slot. Empty reads as available, so the page shows what is for
   sale instead of asserting a count. */
.slot-map { display: flex; flex-wrap: wrap; gap: 5px; flex-basis: 100%; margin-bottom: 4px; }
.slot-cell {
  width: 22px; height: 13px; border-radius: 2px;
  border: 1px dashed var(--rule-2); background: transparent;
}
.slot-cell.filled { border-style: solid; border-color: var(--chrome); background: var(--chrome); }
.unit-hero .slot-cell { width: 34px; height: 16px; }
.slot-map.dense { gap: 3px; max-width: 320px; }
.slot-map.dense .slot-cell { width: 9px; height: 9px; border-radius: 1px; }

.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;
}

/* ------------------------------------------------------------------- mint */

/* The primary action in the section, so it gets the alert rule and the width.
   Reads as a broadcast slate rather than a web CTA. */
.mintbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: clamp(16px, 2vw, 30px); margin-top: clamp(26px, 3vw, 40px);
  padding: clamp(20px, 2.4vw, 32px);
  background: var(--plate); border: 1px solid var(--rule);
  border-top: 2px solid var(--alert);
}
.mintbar-head { flex: 1 1 300px; }
.mintbar-kicker {
  margin: 0 0 8px; font: 700 10px/1 var(--f-data); letter-spacing: .06em; color: var(--alert);
}
.mintbar h3 {
  margin: 0 0 8px; font: 900 clamp(24px, 3vw, 40px)/.96 var(--f-head);
  letter-spacing: -.04em; color: var(--ink);
}
.mintbar-note { margin: 0; font: 500 13px/1.5 var(--f-data); color: var(--ink-2); }
.mintbar-btn { flex: 0 0 auto; padding: 18px 34px; font-size: 13px; }

/* A disabled mint is an announcement, and should look like one rather than like
   a button that failed. */
.mintbar-btn.is-soon,
.mintbar-btn:disabled {
  background: transparent; color: var(--ink-3);
  border: 1px dashed var(--rule-2); cursor: default;
}
.mintbar-btn.is-soon:hover, .mintbar-btn:disabled:hover { background: transparent; }

/* ------------------------------------------------------- slot upload form */

/* Broadcast paperwork, like the rest of the ad-space section: a ruled form on
   a lifted plate rather than a rounded web card. */
.slotform {
  margin-top: 22px; padding: clamp(18px, 2vw, 26px);
  background: var(--plate); border: 1px solid var(--rule);
  border-left: 2px solid var(--alert);
}
.slotform h4 {
  margin: 0 0 4px; font: 800 14px/1 var(--f-head); letter-spacing: -.02em; color: var(--ink);
}
.slotform-spec {
  margin: 0 0 18px; font: 500 11px/1.6 var(--f-data); color: var(--ink-3);
}
.slotform-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px clamp(14px, 2vw, 22px); margin-bottom: 16px;
}
.slotform-grid .wide { grid-column: 1 / -1; }
.slotform-grid label {
  display: flex; flex-direction: column; gap: 7px;
  font: 700 10px/1 var(--f-data); letter-spacing: .06em; color: var(--ink-3);
}
.slotform-grid input {
  font: 500 13px/1.4 var(--f-data); color: var(--ink);
  background: var(--ground); border: 1px solid var(--rule-2); padding: 10px 12px;
}
.slotform-grid input:focus-visible { outline: 2px solid var(--chrome); outline-offset: -1px; }
.slotform-grid input[type="file"] { padding: 8px 10px; color: var(--ink-2); cursor: pointer; }
.slotform-grid input[type="file"]::file-selector-button {
  font: 700 10px/1 var(--f-data); letter-spacing: .06em; margin-right: 12px;
  padding: 8px 12px; border: 1px solid var(--rule-2); background: transparent;
  color: var(--ink); cursor: pointer;
}

/* Status is the only thing here that changes after load, so it gets the colour. */
.slot-status {
  margin: 0 0 14px; min-height: 1.5em;
  font: 500 12px/1.5 var(--f-data); color: var(--ink-2);
}
.slot-status.good { color: var(--up); }
.slot-status.bad  { color: var(--down); }

/* --------------------------------------------------------------- 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 */

/* The reel signs off with a dark LNTV band and then a full-bleed paper plate
   carrying the dot map behind black type. The page ends the same way, so the
   last thing you see on the site is the last thing you see on air. */
.footer { padding: 0; background: none; text-align: left; border: 0; }
.footer-band {
  background: repeating-linear-gradient(0deg, #050607 0 3px, #111318 3px 5px);
  border-top: 1px solid var(--line);
  padding: clamp(26px, 3.4vw, 44px) var(--gut);
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(16px, 3vw, 48px); flex-wrap: wrap;
}
.footer-band .wordmark-big { width: min(300px, 52vw); margin: 0; }
.footer-nav { display: flex; flex-wrap: wrap; gap: clamp(14px, 2vw, 30px); margin: 0; }
.footer-nav a {
  font: 700 12px/1 var(--f-head); letter-spacing: .1em; text-transform: uppercase;
  color: #9aa1aa; padding: 10px 0;
}
.footer-nav a:hover { color: var(--paper); }
.footer-plate {
  position: relative; overflow: hidden;
  background:
    linear-gradient(90deg, var(--black) 0%, rgba(3,4,5,.86) 34%, rgba(3,4,5,.15) 72%),
    var(--dotmap) right center / auto 108% no-repeat,
    var(--black);
  border-top: 1px solid var(--line);
  padding: clamp(34px, 5vw, 70px) var(--gut) clamp(26px, 3.4vw, 44px);
}
.footer-plate > * { position: relative; }
.footer-line {
  margin: 0; max-width: 22ch;
  font: 900 clamp(28px, 4.6vw, 58px)/.94 var(--f-head);
  letter-spacing: -.015em; word-spacing: .09em;
  text-transform: uppercase; color: var(--ink);
}
.footer-foot {
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between;
  margin-top: clamp(24px, 3vw, 40px); padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.footer-copy {
  margin: 0; font: 500 11px/1.5 var(--f-head); letter-spacing: .09em;
  text-transform: uppercase; color: var(--dim);
}

/* ------------------------------------------------------------------ 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 svg { width: 13px; height: 13px; }
  .nav .nav-cta { padding: 10px 10px; font-size: 11px; letter-spacing: .02em; }
  .pill { padding: 6px 10px; gap: 8px; }

}

/* The mark used to be hidden here because the lander repeated it underneath.
   The hero is type now, so hiding it left phones with no brand at all. The row
   wraps instead. */
@media (max-width: 430px) {
  .masthead-row .wordmark { display: block; width: clamp(104px, 30vw, 132px); }

  /* Four platforms plus the call overflow a narrow masthead. Keep the two
     largest here; the find bar carries all four at full size just below. */
  .nav .nav-social:nth-child(n+3) { 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; }
  .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; }
}

/* --------------------------------------------------------------- the strip */
/* One set, several reels. The strip is how you pick which one is playing -
   posters rather than titles, because the frame is the argument. */
.reelstrip {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: clamp(10px, 1.1vw, 16px);
  margin-top: clamp(30px, 3.6vw, 54px);
  padding-top: clamp(22px, 2.6vw, 34px);
  border-top: 1px solid var(--rule);
}
.reel {
  display: flex; flex-direction: column; gap: 9px;
  padding: 0; text-align: left; cursor: pointer;
  background: none; border: 0; color: inherit; font: inherit;
}
.reel-shot {
  display: block; overflow: hidden; position: relative;
  aspect-ratio: 9 / 16; background: #05070a;
  border: 1px solid var(--rule); border-radius: 3px;
  transition: border-color .15s;
}
.reel-shot img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .74; transition: opacity .15s; }
.reel:hover .reel-shot { border-color: var(--rule-2); }
.reel:hover .reel-shot img { opacity: .95; }
.reel.is-on .reel-shot { border-color: var(--alert); }
.reel.is-on .reel-shot img { opacity: 1; }
.reel.is-on .reel-shot::after {
  content: "ON AIR"; position: absolute; left: 6px; top: 6px;
  padding: 4px 6px; background: var(--alert); color: #fff;
  font: 700 9px/1 var(--f-data); letter-spacing: .12em;
}
.reel-meta { display: flex; gap: 10px; align-items: baseline; font: 700 9px/1 var(--f-data); letter-spacing: .14em; color: var(--dim); }
.reel-meta i { font-style: normal; }
.reel.is-on .reel-beat { color: var(--alert); }
.reel-plate {
  font: 800 clamp(10px, .82vw, 12px)/1.28 var(--f-head); letter-spacing: -.01em;
  color: var(--ink-2);
}
.reel.is-on .reel-plate { color: var(--ink); }
@media (max-width: 700px) {
  .reelstrip { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
}

/* ============================================ flat: buttons and panels =====
   The kit's controls were bevelled - vertical gradients plus a coloured glow,
   which is the one thing on the page that looks like a web template rather
   than a broadcast. Everything is flat ink on paper now. */
.btn, .lb-cta, .auc-os, .mintbar-btn, .modal-btn {
  border-radius: 0; box-shadow: none;
}
.btn-primary, .lb-cta {
  background: var(--alert); border: 1px solid var(--alert); color: #fff;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.btn-primary:hover, .lb-cta:hover { background: #a80f17; border-color: #a80f17; }
.btn:not(.btn-primary) {
  background: none; border: 1px solid var(--rule-2); color: var(--ink);
  font-weight: 700; text-transform: uppercase;
}
.btn:not(.btn-primary):hover { border-color: var(--ink); background: var(--card); }
.btn:disabled, .mintbar-btn:disabled {
  background: none; border: 1px dashed var(--rule-2); color: var(--ink-3);
  cursor: not-allowed;
}
.lb-clock, .lb-taken, .auc-stat { box-shadow: none; border-radius: 0; }
.pill { background: none; box-shadow: none; border: 1px solid #262a31; border-radius: 0; }
.modal-card { border-radius: 0; }
.reel-shot, .unit, .unit-shot, .slotform, .inventory-preview { border-radius: 0; }

/* ================================================ type: the plate's cut =====
   The headline plate is heavy and TIGHT - letters nearly touching at 104px.
   Loose tracked-out uppercase is generic web-UI and the opposite of what goes
   out on air, so controls take the plate's treatment instead. */
.nav-cta, .btn, .lb-cta, .auc-os, .nav-os, .nav-mine {
  font-family: var(--f-head); font-weight: 800;
  letter-spacing: -.01em; text-transform: uppercase;
}


.nav-mine { font-size: 12px; }
.footer-line, .act-title, .auc-title, .band-head h2, .claims h2, .modal-card h3, .lb-line {
  font-weight: 900; letter-spacing: -.025em; word-spacing: .06em;
}

/* ==================================================== signal: the artefacts ==
   The reels carry real transmission damage - RGB fringing, scanlines, the
   colour-bar strip. The site had none of it, which is why it read as a website
   about a broadcast rather than part of one. */
/* .scan needs a positioned host; every user of it already is one. */
.scan::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: repeating-linear-gradient(180deg,
    rgba(255,255,255,.045) 0 1px, rgba(0,0,0,0) 1px 3px);
  mix-blend-mode: overlay;
}
/* A narrow bar strip hugging an edge, the way the reels carry it - never a
   horizontal band across the masthead. */


/* ------------------------------------------------------------- the index */
/* The lander is a contents page now: the hero, then where to go. */




.index-card b {
  font: 900 clamp(19px, 1.9vw, 26px)/1 var(--f-head);
  letter-spacing: -.025em; text-transform: uppercase; color: var(--ink);
}
.index-card i {
  font: 400 14px/1.5 var(--f-head); font-style: normal; color: var(--ink-2);
}
.nav-link {
  font: 800 12px/1 var(--f-head); letter-spacing: -.01em; text-transform: uppercase;
  color: var(--dim); padding: 10px 2px; cursor: default; user-select: none;
}
.nav-link:hover { color: var(--dim); }


/* ================================================ masthead: five things =====
   It was carrying ten - clock, mark, a text label repeating the mark, three
   section links, four social icons, OpenSea, my slots and a call. Two of them
   wrapped mid-word. The accounts belong in the footer; up here it is the
   clock, the mark, where to go, and the one thing to do. */
.masthead-row { gap: clamp(12px, 2vw, 28px); }
.nav { gap: clamp(10px, 1.4vw, 22px); }
.nav a { white-space: nowrap; }
.wordmark { width: clamp(148px, 13vw, 186px); }
.nav-link, .nav-mine { font-size: 12px; padding: 10px 0; }
.nav-mine { color: var(--dim); }
.nav-mine:hover { color: var(--ink); }
.nav-cta { height: 38px; padding: 0 18px; font-size: 12px; }
/* The clock is furniture, not a headline: it had a 174px slab around it. */
.pill { padding: 6px 12px; gap: 9px; }
.clock { font-size: clamp(17px, 1.5vw, 21px); letter-spacing: -.04em; }
.meridiem i { font-size: 9px; letter-spacing: .04em; }
@media (max-width: 1120px) { .nav-mine { display: none; } }
.footer-social { display: flex; align-items: center; gap: clamp(10px, 1.4vw, 20px); }
.footer-social a { display: grid; place-items: center; width: 32px; height: 32px; color: #9aa1aa; }
.footer-social a:hover { color: var(--ink); }
.footer-social svg { width: 17px; height: 17px; display: block; }
.footer-os {
  width: auto !important; font: 800 12px/1 var(--f-head); letter-spacing: -.01em;
  text-transform: uppercase; padding: 0 4px;
}

/* The masthead stacks on a phone: mark and call on the top line, the sections
   on their own rule beneath, still reachable. */
@media (max-width: 900px) {
  .masthead-row { flex-wrap: wrap; row-gap: 0; padding-bottom: 0; }
  .wordmark { width: clamp(120px, 30vw, 150px); }
  .nav { margin-left: auto; }
  .nav-link {
    order: 4; flex: 1 1 auto; text-align: center;
    padding: 12px 4px; font-size: 11px;
  }
  .nav-mine { order: 5; display: block; flex: 1 1 auto; text-align: center; padding: 12px 4px; font-size: 11px; }
  .masthead-row > .nav { flex: 0 0 auto; }
  .nav .nav-link, .nav .nav-mine { display: none; }
  .mob-nav {
    order: 9; flex: 1 0 100%; display: flex; justify-content: space-between;
    gap: 4px; margin: 8px 0 0; padding: 0;
    border-top: 1px solid #1d2027;
  }
  .mob-nav a {
    flex: 1 1 0; text-align: center; padding: 12px 2px;
    font: 800 11px/1 var(--f-head); letter-spacing: -.01em; text-transform: uppercase;
    color: var(--dim); white-space: nowrap;
  }
  .mob-nav a:hover { color: var(--ink); }
}
@media (min-width: 901px) { .mob-nav { display: none; } }

/* The wallet is the thing a visitor is here to use. It was buried three
   sections down one page; it belongs in the chrome on every page. */
:is(.nav-wallet,.nav-mine) {
  display: inline-flex; align-items: center; height: 36px; padding: 0 14px;
  background: none; border: 1px solid var(--rule-2); color: var(--ink);
  font: 800 12px/1 var(--f-head); letter-spacing: -.01em; text-transform: uppercase;
  white-space: nowrap; cursor: pointer; transition: border-color .15s, background .15s;
}
:is(.nav-wallet,.nav-mine):hover { border-color: var(--ink); background: var(--card); }
@media (max-width: 720px) { :is(.nav-wallet,.nav-mine) { display: none; } }

/* Claiming is the act being sold, so it is the red one. The wallet sits beside
   it as the step you take to do it. */
:is(.nav-wallet,.nav-mine) { height: 38px; padding: 0 16px; }

/* Two doors on the lander: watch, or buy. */
.lb-sub {
  margin: clamp(16px, 2.4vh, 26px) 0 0; max-width: 46ch;
  font: 400 clamp(14px, 1.15vw, 17px)/1.55 var(--f-head); color: var(--ink-2);
}
.lb-paths { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(20px, 3vh, 32px); }
.lb-path {
  display: flex; flex-direction: column; gap: 5px; padding: 14px 20px;
  border: 1px solid var(--rule-2); background: rgba(6,7,10,.72);
  transition: border-color .15s, background .15s;
}
.lb-path b {
  font: 900 clamp(15px, 1.4vw, 19px)/1 var(--f-head);
  letter-spacing: -.02em; text-transform: uppercase; color: var(--ink);
}
.lb-path i {
  font: 700 10px/1 var(--f-head); font-style: normal; letter-spacing: .08em;
  text-transform: uppercase; color: var(--dim);
}
.lb-path:hover { border-color: var(--ink); background: var(--card); }
.lb-path.is-buy { background: var(--alert); border-color: var(--alert); }
.lb-path.is-buy i { color: rgba(255,255,255,.72); }
.lb-path.is-buy:hover { background: #a80f17; border-color: #a80f17; }

.tape-window { padding-left: clamp(14px, 2vw, 28px); }

/* The clock sits on its own plate on air - a solid near-black slab with
   rounded corners, so the ribbing behind it does not read through the time. */
.pill {
  background: #07080a;
  border: 1px solid #23272e;
  border-radius: 9px;
  padding: 7px 15px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 3px 12px rgba(0,0,0,.55);
}
.recdot {
  width: 8px; height: 8px;
  box-shadow: 0 0 9px rgba(239,37,49,.85);
}

/* The wallet and the account both used to vanish under 720px, taking the whole
   advertiser half of the site with them. The mobile row carries them now. */
@media (max-width: 900px) {
  .mob-nav a { flex: 1 1 0; }
  .mob-nav .nav-wallet-m { color: var(--ink); }
}
@media (min-width: 901px) { .mob-nav .nav-wallet-m { display: none; } }

/* You are here: not a link, and visibly so. */
.nav [aria-current="page"], .mob-nav [aria-current="page"], .footer-nav [aria-current="page"] {
  color: var(--ink); cursor: default; position: relative;
}
.nav [aria-current="page"]::after, .mob-nav [aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
  background: var(--alert);
}
.nav-cta[aria-current="page"] { opacity: .55; }
.nav-cta[aria-current="page"]::after { display: none; }

/* ============================================== controls: physical, not flat ==
   Bevelled the way console hardware is: a 1px lit top edge, a matte vertical
   body, a dark lip underneath and a real shadow off the surface. Matte, not
   glossy - the wordmark is the only chrome on the page. */
.nav-cta, :is(.nav-wallet,.nav-mine), .btn, .slam-cta, .lb-path, .auc-os, .mintbar-btn, .modal-btn {
  position: relative; border-radius: 2px;
  border: 1px solid rgba(0,0,0,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 2px 0 rgba(0,0,0,.55),
    0 4px 10px rgba(0,0,0,.5);
  transition: transform .06s, box-shadow .06s, background .15s;
}
.nav-cta:active, :is(.nav-wallet,.nav-mine):active, .btn:active, .slam-cta:active, .lb-path:active,
.auc-os:active, .mintbar-btn:active, .modal-btn:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.55),
    inset 0 -1px 0 rgba(255,255,255,.06),
    0 0 0 rgba(0,0,0,0);
}
/* dark metal */
:is(.nav-wallet,.nav-mine), .btn:not(.btn-primary), .auc-os, .lb-path:not(.is-buy) {
  background: linear-gradient(180deg, #2b3037 0%, #191d23 48%, #0e1116 100%);
  color: var(--ink);
}
:is(.nav-wallet,.nav-mine):hover, .btn:not(.btn-primary):hover, .auc-os:hover, .lb-path:not(.is-buy):hover {
  background: linear-gradient(180deg, #363c45 0%, #1f242b 48%, #12161b 100%);
  border-color: rgba(0,0,0,.6);
}
/* the red one */
.nav-cta, .btn-primary, .slam-cta, .lb-path.is-buy {
  background: linear-gradient(180deg, #e0242e 0%, #c9141d 46%, #960d15 100%);
  color: #fff;
}
.nav-cta:hover, .btn-primary:hover, .slam-cta:hover, .lb-path.is-buy:hover {
  background: linear-gradient(180deg, #ef2f39 0%, #d5171f 46%, #a20f18 100%);
}
.btn:disabled, .mintbar-btn:disabled {
  background: linear-gradient(180deg, #23272d 0%, #16191e 100%);
  color: var(--ink-3); border-color: rgba(0,0,0,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 1px 0 rgba(0,0,0,.4);
  transform: none;
}

/* LNTV leads at every width. */
.masthead-row .wordmark { order: -1; margin-right: clamp(10px, 1.6vw, 22px); }

/* ================================================== the ident, from the demo ==
   Mark, hairline rule, network name on two lines - a broadcast ident rather
   than a bare logo. The name stops being a separate 242px nav item. */
.identity { display: flex; align-items: center; gap: 14px; flex-shrink: 0; order: -1; margin-right: clamp(10px, 1.6vw, 22px); }
.identity .wordmark {
  display: block; width: clamp(126px, 11vw, 152px); aspect-ratio: 5.329 / 1;
  background: url('/assets/lntv-wordmark-800.webp') center / contain no-repeat;
  padding: 11px 0; box-sizing: content-box;
  background-origin: content-box; background-clip: content-box;
}
.identity-caption {
  font: 500 9px/1.5 var(--f-head); letter-spacing: .1em; color: var(--ink);
  padding-left: 4px; white-space: nowrap;
}
@media (max-width: 820px) { .identity-caption { display: none; } }


/* The price and the act are one control: label on top, floor under it, both
   inside the same button. */
.nav-cta {
  flex-direction: column; align-items: flex-start; justify-content: center;
  height: 38px; min-height: 38px; box-sizing: border-box; gap: 2px; padding: 6px 16px; line-height: 1;
}
.nav-cta b { font: 800 13px/1 var(--f-head); letter-spacing: -.01em; text-transform: uppercase; }
.nav-cta i {
  display: flex; align-items: center;
  font: 700 9px/1 var(--f-head); font-style: normal; letter-spacing: .1em;
  color: rgba(255,255,255,.82); font-variant-numeric: tabular-nums;
}
.nav-cta .live-dot { background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.8); width: 4px; height: 4px; margin-right: 5px; }
.nav-social {
  display: grid; place-items: center; width: 34px; height: 34px;
  color: var(--ink-2); border-radius: 2px;
  border: 1px solid rgba(0,0,0,.55);
  background: linear-gradient(180deg, #2b3037 0%, #191d23 48%, #0e1116 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.45),
    0 2px 0 rgba(0,0,0,.5), 0 3px 8px rgba(0,0,0,.45);
  transition: color .15s, background .15s, transform .06s, box-shadow .06s;
}
.nav-social svg { width: 15px; height: 15px; display: block; }
.nav-social:hover { color: #fff; background: linear-gradient(180deg, #363c45 0%, #1f242b 48%, #12161b 100%); }
.nav-social:active {
  transform: translateY(2px);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.06);
}
.nav .nav-social + .nav-social { margin-left: -4px; }
@media (max-width: 1240px) { .nav-social { display: none; } }
@media (max-width: 1060px) { .nav .nav-link { display: none; } }

/* the banner's tape sits flush inside the lower third */
.lt-rail.tape { height: 34px; border: 0; background: #0b0d11; }
.lt-rail .tape-item { padding: 0 16px; }

/* Keep the scrolling text at its content width in WebKit as well as Chromium. */
.tape-window { min-width:0; }
.tape-run { width:max-content; flex:none; }
.tape-item { flex:none; }

/* Background rails retain their position while outside the viewport. */
.motion-paused, .motion-paused::before, .motion-paused::after,
.motion-paused *, .motion-paused *::before, .motion-paused *::after {
  animation-play-state: paused !important;
}

/* Reserve clock/zone width before local time replaces the placeholders. */
.masthead-row .clock { display:inline-block; width:5ch; font-variant-numeric:tabular-nums; }
.masthead-row .meridiem { min-width:9ch; }