/* Evidexa Transfer — "Home Video" edition: the whole site lives inside a CRT. */
:root {
  --bezel: #0a0a0b;
  --screen: #19191a;
  --screen-2: #222224;
  --ink: #dcdcd8;
  --ink-dim: #8b8b86;
  --ink-faint: #55554f;
  --line: rgba(220, 220, 216, 0.16);
  --hot: #ff3b2f;
  --gold: #e4c27a;
  --mono: 'IBM Plex Mono', ui-monospace, 'Consolas', monospace;
  --serif: 'Playfair Display', 'Times New Roman', serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --inset: clamp(6px, 1.4vw, 22px);
  --radius: clamp(18px, 3.2vw, 56px);
  --tw: clamp(200px, 20vw, 340px);
  --th: calc(var(--tw) * 1.52);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bezel);
  color: var(--ink);
  font: 400 13px/1.55 var(--mono);
  letter-spacing: 0.02em;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
::selection { background: var(--ink); color: #111; }
:focus-visible { outline: 1px dashed var(--ink); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- the TV */
.tv { position: fixed; inset: 0; padding: var(--inset); background:
  radial-gradient(120% 90% at 50% 0%, #1a1a1c 0%, #0b0b0c 55%, #050505 100%); }
.screen {
  position: relative; width: 100%; height: 100%; border-radius: var(--radius); overflow: hidden;
  background: radial-gradient(130% 110% at 50% 45%, var(--screen-2) 0%, var(--screen) 55%, #0e0e0f 100%);
  box-shadow: 0 0 0 1px #000, 0 0 0 3px #161617, 0 30px 80px rgba(0,0,0,.8);
  isolation: isolate;
}
.screen.is-bw .content { filter: grayscale(1) contrast(1.05); }
.content { position: absolute; inset: 0; transition: filter .4s; }

/* CRT layers, all pointer-transparent */
.fx { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }
.fx-scan { z-index: 40; background:
  repeating-linear-gradient(to bottom, rgba(0,0,0,.28) 0 1px, transparent 1px 3px),
  repeating-linear-gradient(90deg, rgba(255,40,40,.035) 0 1px, rgba(40,255,90,.03) 1px 2px, rgba(60,90,255,.035) 2px 3px);
  mix-blend-mode: multiply; }
.fx-noise { z-index: 41; width: 100%; height: 100%; opacity: .06; mix-blend-mode: screen; }
.fx-roll { z-index: 42; background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,.035) 45%, rgba(255,255,255,.06) 50%, rgba(255,255,255,.035) 55%, transparent 100%);
  background-size: 100% 38%; background-repeat: no-repeat; animation: roll 9s linear infinite; }
@keyframes roll { from { background-position: 0 -40%; } to { background-position: 0 140%; } }
.fx-vignette { z-index: 43; box-shadow: inset 0 0 clamp(60px, 10vw, 180px) rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.04); }
.fx-glare { z-index: 44; background:
  linear-gradient(103deg, transparent 58%, rgba(255,255,255,.045) 60.5%, transparent 63%, rgba(255,255,255,.03) 67%, transparent 70%),
  radial-gradient(70% 45% at 50% -8%, rgba(255,255,255,.07), transparent 70%); }
.fx-flash { z-index: 60; background: #f2f2ee; opacity: 0; }
.screen.is-flicker .content { animation: flick .12s steps(2) 3; }
@keyframes flick { 50% { opacity: .82; transform: translateX(2px); } }

/* ---------------------------------------------------------------- HUD */
.hud { position: absolute; left: 0; right: 0; z-index: 30; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: clamp(14px, 2.4vw, 34px) clamp(18px, 3.6vw, 64px); text-transform: uppercase; font-size: 12px; letter-spacing: .08em;
  text-shadow: 0 0 6px rgba(220,220,216,.25); }
.hud-top { top: 0; }
.hud-bottom { bottom: 0; align-items: end; }
.hud a, .hud button { text-decoration: none; background: none; border: 0; padding: 6px 0; cursor: pointer; color: var(--ink); text-transform: uppercase; }
.hud a:hover, .hud button:hover { color: #fff; }
.hud-l, .hud-r { display: flex; gap: clamp(14px, 3vw, 52px); align-items: center; }
.hud-r { justify-content: flex-end; }
.hud .is-current { color: #fff; }
.hud .is-current::before { content: '▶ '; }
.ico-home { display: inline-block; width: 8px; height: 8px; background: currentColor; margin-right: 8px; box-shadow: 0 0 6px currentColor; }
.tc { color: var(--ink); font-variant-numeric: tabular-nums; }
.tc.rec::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--hot); margin-right: 8px; animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.logo { display: grid; justify-items: center; gap: 6px; text-decoration: none; }
.logo-mark { display: flex; align-items: center; gap: 8px; }
.logo-stripes { width: 44px; height: 22px; transform: skewX(-24deg); background: linear-gradient(to bottom,
  #3bb54a 0 20%, #f9d423 20% 40%, #f7941d 40% 60%, #ef4136 60% 80%, #2e3192 80% 100%); box-shadow: 0 0 10px rgba(255,200,80,.25); }
.logo-word { font: 700 22px/1 var(--mono); letter-spacing: -.02em; color: #f4f4f0; text-transform: none; }
.logo-sub { display: flex; justify-content: space-between; width: 100%; min-width: 120px; color: var(--ink-dim); font-size: 10px; letter-spacing: .14em; }
.hud-bottom .hud-l, .hud-bottom .hud-r { gap: clamp(12px, 2.2vw, 36px); flex-wrap: wrap; }
.hud-bottom .dim { color: var(--ink-dim); }
.lang-toggle b { color: #fff; font-weight: 600; }
.lang-toggle span { color: var(--ink-faint); }

/* ---------------------------------------------------------------- views */
.views { position: absolute; inset: 0; }
.view { position: absolute; inset: 0; display: none; }
.view.is-active { display: block; }
.view-scroll { overflow-y: auto; overflow-x: hidden; padding: clamp(96px, 13vh, 140px) clamp(18px, 6vw, 120px) clamp(90px, 12vh, 130px); scrollbar-width: thin; scrollbar-color: var(--ink-faint) transparent; }
.view-scroll::-webkit-scrollbar { width: 6px; }
.view-scroll::-webkit-scrollbar-thumb { background: var(--ink-faint); }

/* ---------------------------------------------------------------- the deck of tapes (3D) */
.deck { position: absolute; inset: 0; perspective: 1500px; perspective-origin: 50% 40%; touch-action: pan-y; cursor: grab; user-select: none; }
.deck.is-drag { cursor: grabbing; }
.deck-rig { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }

/* the road: a lit grid running towards the horizon behind the tapes */
.road { position: absolute; left: -60%; right: -60%; top: 52%; height: 90%; transform-origin: 50% 0; transform: rotateX(78deg); pointer-events: none;
  background:
    linear-gradient(90deg, transparent calc(50% - 3px), rgba(255,214,120,.55) calc(50% - 3px) calc(50% + 3px), transparent calc(50% + 3px)) 0 0 / 100% 120px,
    repeating-linear-gradient(90deg, rgba(220,220,216,.16) 0 1px, transparent 1px 110px),
    repeating-linear-gradient(0deg, rgba(220,220,216,.13) 0 1px, transparent 1px 110px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 60%, transparent 100%);
  animation: road 1.6s linear infinite; }
.road::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 60px, rgba(255,214,120,.0) 60px 120px); }
@keyframes road { to { background-position: 0 120px, 0 110px, 0 110px; } }
.horizon { position: absolute; left: 0; right: 0; top: 30%; height: 44%; pointer-events: none;
  background: radial-gradient(50% 40% at 50% 60%, rgba(255,200,120,.10), transparent 70%); }

.tape { position: absolute; left: 50%; top: var(--deck-y, 46%); width: var(--tw); height: var(--th); margin: calc(var(--th) / -2) 0 0 calc(var(--tw) / -2);
  transform-style: preserve-3d; will-change: transform; --d: calc(var(--tw) * .17); --dim: 0; }
.tape-box { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .5s var(--ease); }
.tape-shadow { position: absolute; left: 6%; right: 6%; bottom: -16%; height: 12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.65), transparent); transform: translateZ(-40px) rotateX(80deg); }
.face { position: absolute; backface-visibility: hidden; }
.face::after { content: ''; position: absolute; inset: 0; background: #000; opacity: var(--dim); pointer-events: none; z-index: 9; }
.face.front { inset: 0; transform: translateZ(calc(var(--d) / 2)); }
.face.back { inset: 0; transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); background: #0c0c0c; }
.face.left, .face.right { top: 0; height: 100%; width: var(--d); left: calc(50% - var(--d) / 2); background: linear-gradient(90deg, #0b0b0b, #151515 40%, #0b0b0b); }
.face.left { transform: rotateY(-90deg) translateZ(calc(var(--tw) / 2)); }
.face.right { transform: rotateY(90deg) translateZ(calc(var(--tw) / 2)); }
.face.top, .face.bottom { left: 0; width: 100%; height: var(--d); top: calc(50% - var(--d) / 2); background: #121212; }
.face.top { transform: rotateX(90deg) translateZ(calc(var(--th) / 2)); background: linear-gradient(#2b2b2d, #101011); }
.face.bottom { transform: rotateX(-90deg) translateZ(calc(var(--th) / 2)); }
.spine { display: flex; align-items: center; justify-content: space-between; writing-mode: vertical-rl; transform: rotate(180deg); padding: 10px 0; font: 600 calc(var(--d) * .3)/1 var(--mono); letter-spacing: .2em; color: var(--c); text-transform: uppercase; height: 100%; width: 100%; }
.spine b { font: 400 calc(var(--d) * .55)/1 var(--serif); letter-spacing: 0; }
/* the cassette shell sticking out of the sleeve */
.tape-top { position: absolute; left: 8%; right: 8%; top: -5%; height: 8%; border-radius: 5px 5px 0 0; background: linear-gradient(#2c2c2e, #111112);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1); transform: translateZ(calc(var(--d) * .1)); }
.tape-top::before { content: ''; position: absolute; left: 32%; right: 32%; top: 20%; height: 50%; border-radius: 4px; background: linear-gradient(#606166, #2b2c2f); box-shadow: inset 0 0 0 2px #151516; }
.tape-top::after { content: ''; position: absolute; left: 3%; right: 3%; top: 0; height: 14%; background: repeating-linear-gradient(90deg, #3a3a3a 0 3px, #1b1b1c 3px 6px); opacity: .7; }

.sleeve { position: absolute; inset: 0; overflow: hidden; background: #0d0d0d; color: var(--c, #e64a3c); display: flex; flex-direction: column; padding: 7% 8% 6%;
  box-shadow: 0 0 0 1px rgba(0,0,0,.6); }
.sleeve::before { content: ''; position: absolute; inset: 2.5%; border: 2px solid rgba(240,236,226,.78); filter: url(#rough); pointer-events: none; z-index: 3; }
.sleeve::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: .5; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.4 -0.9'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.glare { position: absolute; inset: 0; z-index: 5; pointer-events: none; mix-blend-mode: screen; opacity: 0; transition: opacity .4s;
  background: radial-gradient(60% 45% at var(--gx, 50%) var(--gy, 30%), rgba(255,255,255,.28), transparent 70%); }
.tape.is-center .glare { opacity: 1; }
/* centre tape: holographic rim that slowly turns, a light sweep across the sleeve, a glow in the tape's colour */
@property --holo { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.face.front::before { content: ''; position: absolute; inset: -3px; z-index: -1; border-radius: 3px; opacity: 0; transition: opacity .5s;
  background: conic-gradient(from var(--holo), var(--c), #fff8 12%, #7af3ff 25%, var(--c) 40%, #ff7ad9 60%, #ffe27a 78%, var(--c)); filter: blur(1.5px); }
.tape.is-center .face.front::before { opacity: .95; animation: holo 5s linear infinite; }
.tape.is-center .face.front { box-shadow: 0 0 46px -8px var(--c), 0 24px 60px -20px rgba(0,0,0,.9); }
@keyframes holo { to { --holo: 360deg; } }
.glare::after { content: ''; position: absolute; inset: -10% -60%; background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.26) 50%, transparent 58%); transform: translateX(-70%); }
.tape.is-center .glare::after { animation: sheen 4.2s var(--ease) 1.2s infinite; }
@keyframes sheen { 0% { transform: translateX(-70%); } 38%, 100% { transform: translateX(70%); } }
.tape.is-center .tape-shadow { left: 0; right: 0; bottom: -20%; height: 16%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 40%, rgba(0,0,0,.75)), transparent); }
@media (prefers-reduced-motion: reduce) { .tape.is-center .face.front::before, .tape.is-center .glare::after { animation: none; } }
.sl-head { position: relative; z-index: 2; display: grid; justify-items: center; gap: 2px; padding-top: 2%; }
.sl-head i { font: 600 7px/1 var(--mono); letter-spacing: .3em; color: var(--c); opacity: .9; font-style: normal; }
.sl-head b { font: italic 400 clamp(10px, .9vw, 15px)/1 var(--serif); color: var(--c); }
.sl-rule { height: 1px; background: currentColor; opacity: .7; margin: 5% 0 4%; position: relative; z-index: 2; }
.fit { display: block; position: relative; z-index: 2; white-space: nowrap; overflow: visible; line-height: .78; }
.fit > span { display: inline-block; transform-origin: 0 50%; font-family: var(--serif); font-weight: 400; text-transform: uppercase; letter-spacing: -.01em; color: var(--c);
  text-shadow: -1px 0 rgba(255,0,0,.25), 1px 0 rgba(0,160,255,.25); font-variant-numeric: lining-nums; }
.sl-title > span { font-size: calc(var(--th) * .2); }
.sl-sub > span { font-size: calc(var(--th) * .105); }
/* duotone city photo: grayscale multiplied over the tape colour */
.sl-photo { position: relative; z-index: 1; flex: 1; margin: 5% 0; background: var(--c); overflow: hidden; border: 1px solid currentColor; }
.sl-photo::before { content: ''; position: absolute; inset: 0; background: var(--img) var(--pos, 50% 50%) / cover no-repeat; filter: grayscale(1) contrast(1.35) brightness(1.08); mix-blend-mode: multiply; }
.sl-photo.halftone::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, transparent 38%, #0d0d0d 42%) 0 0 / 4px 4px; mix-blend-mode: multiply; opacity: .7; }
.sl-foot { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; font: 600 clamp(8px, .7vw, 11px)/1 var(--mono); color: var(--c); }
.sl-foot .vhs { border: 1.5px solid currentColor; padding: 2px 4px; font-family: var(--serif); font-style: italic; font-weight: 700; }
.sl-foot .hifi { width: 2.1em; height: 1.3em; border: 1.5px solid currentColor; border-radius: 50%; display: grid; place-items: center; font-size: .75em; }
/* rental-store price sticker */
.sticker { position: absolute; z-index: 6; right: -5%; top: 52%; width: calc(var(--tw) * .3); aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: radial-gradient(circle at 35% 30%, #ffe27a, #f2b705 70%); color: #1a1405; transform: rotate(14deg); box-shadow: 0 4px 10px rgba(0,0,0,.45);
  font: 700 calc(var(--tw) * .085)/1 var(--mono); letter-spacing: -.02em; }
.sticker small { display: block; font-size: .42em; letter-spacing: .1em; font-weight: 600; margin-top: 3px; }
.sticker.top { background: radial-gradient(circle at 35% 30%, #ff8a7a, #ff3b2f 70%); color: #fff; }
.badge-foot { position: absolute; z-index: 6; left: 5%; top: 38%; padding: 3px 6px; background: #f0eee6; color: #111; font: 700 calc(var(--tw) * .038)/1 var(--mono); letter-spacing: .14em; transform: rotate(-6deg); }

.deck-caption { position: absolute; left: 0; right: 0; bottom: clamp(70px, 10vh, 110px); text-align: center; text-transform: uppercase; pointer-events: none; z-index: 5; padding: 0 16px; }
.deck-caption h1 { margin: 0 0 8px; font: 600 13px/1.3 var(--mono); letter-spacing: .14em; color: var(--ink-dim); }
.deck-caption p { margin: 0 auto; max-width: 560px; font: 600 clamp(13px, 1.15vw, 16px)/1.4 var(--mono); color: #f1f1ec; letter-spacing: .04em; }
.deck-caption .meta { margin-top: 10px; font-size: 11px; color: var(--ink-dim); letter-spacing: .16em; }
.deck-caption .warnline { margin-top: 8px; font-size: 11px; color: #ffd84d; letter-spacing: .14em; text-wrap: balance; }
.deck-caption .warnline:empty { display: none; }
.deck-caption p, .deck-caption h1 { text-shadow: 0 0 6px #19191a, 0 0 14px #19191a; overflow-wrap: anywhere; }
.deck-hint { position: absolute; left: 50%; top: clamp(92px, 13vh, 132px); transform: translateX(-50%); width: min(560px, 90%); text-align: center; text-transform: uppercase; font-size: 10px; color: var(--ink-faint); letter-spacing: .14em; z-index: 5; }
.np-credit { position: absolute; z-index: 2; right: 5%; top: calc(5% + 26px); font: 500 9px/1.3 var(--mono); color: rgba(255,255,255,.55); text-transform: none; letter-spacing: .04em; max-width: 60%; text-align: right; }
.credits { margin-top: 40px; font-size: 10px; color: var(--ink-faint); line-height: 1.7; text-transform: none; letter-spacing: .02em; }
.credits a { color: var(--ink-dim); }

/* ---------------------------------------------------------------- shared blocks */
.kicker { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-dim); margin: 0 0 14px; }
.kicker::before { content: '['; } .kicker::after { content: ']'; }
.big { margin: 0; font: 400 clamp(54px, 9vw, 150px)/.82 var(--serif); text-transform: uppercase; letter-spacing: -.02em; color: var(--c, #f1f1ec);
  transform: scaleX(.78); transform-origin: 0 50%; text-shadow: -2px 0 rgba(255,0,0,.25), 2px 0 rgba(0,160,255,.25); }
.lead { font-size: clamp(15px, 1.4vw, 20px); line-height: 1.5; color: #ecece7; max-width: 760px; margin: 0; }
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 20px; border: 1px solid var(--ink); background: transparent; color: var(--ink);
  font: 600 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .2s, color .2s; }
.btn:hover, .btn:focus-visible { background: var(--ink); color: #111; }
.btn-solid { background: var(--ink); color: #111; }
.btn-solid:hover { background: #fff; }
.btn:disabled { opacity: .35; cursor: not-allowed; background: transparent; color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px 40px; margin-top: 48px; }
.cols h3 { margin: 0 0 12px; font: 600 11px/1 var(--mono); letter-spacing: .2em; color: var(--ink-dim); text-transform: uppercase; }
.cols h3::before { content: '['; } .cols h3::after { content: ']'; }
.cols ul { list-style: none; margin: 0; padding: 0; text-transform: uppercase; line-height: 1.9; font-size: 12px; }
.ticker { margin-top: 56px; border-top: 1px solid var(--line); padding-top: 14px; overflow: hidden; white-space: nowrap; font-size: 10px; letter-spacing: .2em; color: var(--ink-faint); text-transform: uppercase; }
.ticker span { display: inline-block; padding-right: 60px; animation: tick 40s linear infinite; }
@keyframes tick { to { transform: translateX(-100%); } }

/* ---------------------------------------------------------------- now playing (route) */
.np { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 70px); align-items: start; }
.footage { position: relative; aspect-ratio: 4 / 3; background: #000 center / cover no-repeat; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.footage::before { content: ''; position: absolute; inset: 0; background: inherit; filter: saturate(.75) contrast(1.1) brightness(.95); transform: scale(1.04); animation: drift 14s ease-in-out infinite alternate; }
.footage::after { content: ''; position: absolute; left: 0; right: 0; height: 14%; top: -15%; background: linear-gradient(transparent, rgba(255,255,255,.07), transparent); animation: track 4.5s linear infinite; }
@keyframes drift { to { transform: scale(1.12) translateX(-2%); } }
@keyframes track { to { top: 110%; } }
.osd { position: absolute; z-index: 2; font: 600 clamp(12px, 1.2vw, 17px)/1 var(--mono); color: #f4f4ef; text-shadow: 2px 2px 0 rgba(0,0,0,.6); letter-spacing: .06em; }
.osd-tl { top: 5%; left: 5%; } .osd-tr { top: 5%; right: 5%; } .osd-bl { bottom: 5%; left: 5%; } .osd-br { bottom: 5%; right: 5%; text-align: right; }
.osd-tl::before { content: '▶ '; animation: blink 1s steps(2) infinite; }
.np-info .big { font-size: clamp(48px, 7.4vw, 124px); }
.np-from { margin: 12px 0 26px; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-dim); }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 9px 22px; margin: 0; text-transform: uppercase; font-size: 12px; border-top: 1px solid var(--line); padding-top: 18px; }
.facts dt { color: var(--ink-dim); letter-spacing: .14em; }
.facts dd { margin: 0; color: #f1f1ec; }
.facts .price { font: 400 32px/1 var(--serif); color: var(--c, #fff); }
.np-nav { display: flex; justify-content: space-between; margin-top: 26px; font-size: 11px; text-transform: uppercase; letter-spacing: .14em; }
.np-nav button { background: none; border: 0; color: var(--ink-dim); cursor: pointer; padding: 8px 0; text-transform: uppercase; }
.np-nav button:hover { color: #fff; }

/* ---------------------------------------------------------------- the car */
.car-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr); gap: clamp(24px, 4vw, 70px); align-items: start; }
.car-photo { margin: 0; position: relative; box-shadow: 0 0 0 1px var(--line); }
.car-photo img { display: block; width: 100%; height: auto; filter: contrast(1.05) saturate(.9); }
.car-photo figcaption { position: absolute; left: 4%; bottom: 5%; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-shadow: 2px 2px 0 rgba(0,0,0,.6); }
.case { background: #0e0e0e; padding: 26px; box-shadow: 0 0 0 1px var(--line); text-transform: uppercase; font-size: 11px; letter-spacing: .12em; }
.case h3 { font: italic 400 22px/1 var(--serif); text-transform: none; letter-spacing: 0; margin: 0 0 4px; color: var(--gold); }
.case p { margin: 0 0 14px; color: var(--ink-dim); }
.case b { color: #f1f1ec; font-weight: 500; display: block; margin-top: 3px; }
.case .marks { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.case .marks span { border: 1px solid var(--ink-dim); padding: 4px 7px; color: var(--ink); }

/* ---------------------------------------------------------------- warning (rules) */
.warn { max-width: 980px; margin: 0 auto; }
.warn-badge { display: inline-block; background: var(--hot); color: #fff; font: 700 clamp(22px, 3vw, 40px)/1 var(--mono); letter-spacing: .2em; padding: 10px 18px 8px; margin-bottom: 26px; box-shadow: 0 0 24px rgba(255,59,47,.35); }
.warn p { font: 500 clamp(14px, 1.35vw, 18px)/1.6 var(--mono); text-transform: uppercase; color: #ecece6; margin: 0 0 18px; }
.warn p b { color: #fff; }
.warn .table { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); margin: 30px 0; }
.warn .table div { background: var(--screen); padding: 16px; text-transform: uppercase; }
.warn .table b { display: block; font: 400 30px/1 var(--serif); color: var(--gold); margin-bottom: 6px; }
.faq details { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 16px 0; list-style: none; text-transform: uppercase; font-weight: 600; letter-spacing: .06em; }
.faq summary::before { content: '▶ '; color: var(--ink-dim); }
.faq details[open] summary::before { content: '▼ '; }
.faq details p { margin: 0 0 18px; color: var(--ink-dim); text-transform: none; font-size: 14px; }

/* ---------------------------------------------------------------- forms (OSD) */
.osd-form { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; font-size: 11px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .14em; }
input, select, textarea { width: 100%; min-height: 46px; padding: 10px 12px; border: 0; border-bottom: 1px dashed var(--ink-dim); background: rgba(255,255,255,.035);
  color: #f4f4ef; font-size: 15px; letter-spacing: .02em; outline: none; border-radius: 0; text-transform: none; }
input:focus, select:focus, textarea:focus { border-bottom: 1px solid #fff; background: rgba(255,255,255,.07); }
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
input[aria-invalid='true'], select[aria-invalid='true'] { border-bottom-color: var(--hot); }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
select option { background: #1b1b1c; }
input[type='date'], input[type='time'] { color-scheme: dark; }

.book-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 18px 36px; align-items: start; }
.bf-block { grid-column: 1; border: 0; margin: 0; padding: 0 0 22px; border-bottom: 1px solid var(--line); display: grid; gap: 14px; min-width: 0; }
.bf-block legend { float: left; width: 100%; padding: 0; margin-bottom: 4px; font: 600 12px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: #fff; }
.bf-block legend::before { content: '▶ '; color: var(--hot); }
.bf-fixed, .bf-custom { display: grid; gap: 12px; }
.bf-custom { grid-template-columns: 1fr 1fr auto; align-items: end; }
.bf-fixed[hidden], .bf-custom[hidden], .bf-return[hidden] { display: none; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.seg { display: inline-flex; border: 1px solid var(--ink-dim); width: max-content; max-width: 100%; }
.seg label { position: relative; }
.seg input { position: absolute; inset: 0; opacity: 0; min-height: 0; cursor: pointer; }
.seg span { display: block; padding: 10px 14px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); }
.seg input:checked + span { background: var(--ink); color: #111; }
.seg input:focus-visible + span { outline: 1px dashed #fff; }
.checks { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; color: #ecece6; cursor: pointer; text-transform: none; letter-spacing: .01em; }
.check input { width: 18px; height: 18px; min-height: 0; padding: 0; margin: 2px 0 0; flex: none; accent-color: #e9e9e4; border: 0; }
.check input:disabled + span { color: var(--ink-faint); }
.check a { color: #fff; }
.terms-box { height: 230px; overflow: auto; padding: 16px 18px; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; color: var(--ink-dim); overscroll-behavior: contain; text-transform: none; }
.terms-box h4 { color: #f1f1ec; font: 600 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; margin: 16px 0 6px; }
.terms-box h4:first-child { margin-top: 0; }
.terms-box p { margin: 0 0 8px; }
.terms-box .end { margin-top: 16px; color: #fff; }
.terms-hint { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--hot); margin: 0; }
.terms-hint.is-done { color: var(--ink-dim); }
.summary { grid-column: 2; grid-row: 1 / span 4; position: sticky; top: 0; padding: 22px; background: #f0eee6; color: #151515; box-shadow: 0 20px 40px rgba(0,0,0,.4); }
.summary::before { content: 'EVIDEXA · HOME VIDEO · TAPE LABEL'; display: block; font-size: 9px; letter-spacing: .24em; margin-bottom: 14px; color: #6b6a63; }
.sum-route { font: 400 26px/1.05 var(--serif); margin-bottom: 14px; text-transform: uppercase; }
.sum-lines { margin: 0 0 14px; display: grid; gap: 6px; font-size: 12px; text-transform: uppercase; }
.sum-lines div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dotted #b9b6aa; padding-bottom: 4px; }
.sum-lines dt { margin: 0; color: #6b6a63; } .sum-lines dd { margin: 0; text-align: right; }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; text-transform: uppercase; font-size: 11px; letter-spacing: .14em; }
.sum-total b { font: 400 42px/1 var(--serif); letter-spacing: -.02em; }
.btn-pay { width: 100%; justify-content: center; border-color: #151515; color: #151515; }
.btn-pay:hover { background: #151515; color: #f0eee6; }
.btn-pay:disabled { color: #151515; }
.sum-note { font-size: 10px; letter-spacing: .06em; color: #6b6a63; margin: 12px 0 0; }
.form-error { color: #c0281e; font-size: 12px; margin: 10px 0 0; min-height: 1em; }

/* any route */
.any-grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--tw); gap: clamp(24px, 5vw, 80px); align-items: center; }
.any-tape { position: relative; width: var(--tw); height: var(--th); margin-top: 20px; }
.any-tape .tape { position: absolute; left: 0; top: 0; margin: 0; }
.calc-out { display: block; margin-top: 16px; min-height: 24px; text-transform: uppercase; font-size: 12px; letter-spacing: .1em; color: var(--ink-dim); }
.calc-out .err { color: var(--hot); }

/* ---------------------------------------------------------------- boot */
.boot { position: absolute; inset: 0; z-index: 50; background: var(--screen); display: flex; align-items: flex-end; padding: clamp(24px, 4vw, 60px); }
.boot-bar { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; text-transform: uppercase; font-size: 11px; letter-spacing: .16em; }
.boot-line { height: 1px; background: repeating-linear-gradient(90deg, var(--ink-dim) 0 3px, transparent 3px 7px); position: relative; }
.boot-line i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(0); }
.power { position: absolute; inset: 0; z-index: 70; background: #000; display: grid; place-items: center; pointer-events: none; }
.power i { width: 100%; height: 2px; background: #fff; box-shadow: 0 0 30px 6px rgba(255,255,255,.7); transform: scaleX(0); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .np, .car-grid, .book-form, .any-grid { grid-template-columns: 1fr; }
  .summary { grid-column: 1; grid-row: auto; position: relative; }
  .any-tape { margin: 10px auto 0; }
  .warn .table { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  :root { --tw: clamp(170px, 54vw, 240px); }
  body { font-size: 12px; }
  .hud { grid-template-columns: auto 1fr auto; padding: 14px 16px; font-size: 10px; }
  .hud-top .hud-r a:not(.keep) { display: none; }
  .hud-top .tc { display: none; }
  .logo-word { font-size: 17px; }
  .logo-stripes { width: 32px; height: 16px; }
  .logo-sub { min-width: 90px; font-size: 9px; }
  .hud-bottom { grid-template-columns: 1fr; justify-items: center; gap: 4px; }
  .hud-bottom .hud-r { justify-content: center; }
  .deck-caption { bottom: 86px; }
  .deck-hint { display: none; }
  .bf-custom, .grid3 { grid-template-columns: 1fr 1fr; }
  .bf-custom .btn { grid-column: 1 / -1; }
  .view-scroll { padding: 84px 18px 110px; }
}
@media (max-width: 420px) { .grid2, .grid3, .bf-custom { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .fx-roll, .ticker span, .footage::before, .footage::after { animation: none; }
}

/* Playfair defaults to old-style figures (a tiny 1); use full-height digits */
.fit > span, .big, .sl-foot .price, .facts .price, .sum-route, .sum-total b, .warn .table b { font-variant-numeric: lining-nums; }
.osd { text-transform: uppercase; }
/* scrolling views fade out under the HUD */
.hud-top { background: linear-gradient(to bottom, rgba(25,25,26,.97) 60%, rgba(25,25,26,0)); }
.hud-bottom { background: linear-gradient(to top, rgba(25,25,26,.97) 55%, rgba(25,25,26,0)); }
.view-home ~ .hud, .views:has(.view-home.is-active) + .hud-bottom { background: none; }
.warn-badge { text-transform: uppercase; }
@media (max-width: 1000px) and (min-width: 701px) { .hud-top .hud-r a[data-nav='any'] { display: none; } .hud-l, .hud-r { gap: 22px; } }

/* EN / ET / RU switch */
.lang-toggle { display: inline-flex; gap: 2px; }
.lang-toggle button { padding: 6px 6px; color: var(--ink-faint); }
.lang-toggle button.is-on { color: #fff; font-weight: 600; }
.lang-toggle button.is-on::before { content: '['; } .lang-toggle button.is-on::after { content: ']'; }

/* ---------------------------------------------------------------- border live (CCTV monitors) */
.live-link::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--hot); margin-right: 7px; animation: blink 1.2s steps(2) infinite; vertical-align: 1px; }
.monitors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: 36px; }
.monitor { background: #0d0d0e; box-shadow: 0 0 0 1px var(--line), 0 24px 40px rgba(0,0,0,.4); padding: 12px 12px 18px; border-radius: 10px; }
.mon-screen { position: relative; aspect-ratio: 4 / 3; border-radius: 14px / 18px; overflow: hidden; background: #050505; box-shadow: inset 0 0 40px rgba(0,0,0,.9); }
.mon-screen::before { content: ''; position: absolute; inset: 0; background: var(--img) center / cover no-repeat; filter: grayscale(1) contrast(1.15) brightness(.85) sepia(.35) hue-rotate(60deg) saturate(1.6); }
.mon-screen::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, rgba(0,0,0,.35) 0 1px, transparent 1px 3px), radial-gradient(closest-side, transparent 60%, rgba(0,0,0,.7)); }
.mon-screen > span { position: absolute; z-index: 2; font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #eaffea; text-shadow: 0 0 4px rgba(120,255,140,.6); }
.mon-cam { top: 10px; left: 12px; }
.mon-state { top: 10px; right: 12px; }
.mon-state.is-open::before { content: '● '; color: #ff3b2f; animation: blink 1s steps(2) infinite; }
.mon-state.is-closed { color: #ffb0a8; }
.mon-photo { bottom: 10px; left: 12px; opacity: .7; }
.mon-clock { bottom: 10px; right: 12px; font-variant-numeric: tabular-nums; }
.mon-big { left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font: 700 clamp(30px, 3.4vw, 54px)/1 var(--mono) !important; letter-spacing: -.02em !important; }
.mon-big small { display: block; margin-top: 8px; font: 600 11px/1.3 var(--mono); letter-spacing: .14em; }
.mon-name { margin: 16px 2px 10px; font: 400 clamp(26px, 2.4vw, 38px)/1 var(--serif); text-transform: uppercase; color: var(--c, #f1f1ec); }
.mon-data { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; margin: 0 2px; font-size: 11px; text-transform: uppercase; }
.mon-data dt { color: var(--ink-dim); letter-spacing: .1em; }
.mon-data dd { margin: 0; color: #f1f1ec; }
.mon-data .ok { color: #9be15d; } .mon-data .bad { color: #ff8a7a; }
.monitor .btn-row { margin-top: 16px; gap: 8px; }
.monitor .btn { min-height: 40px; padding: 0 12px; font-size: 10px; }
.bl-sub { margin: 40px 0 0; font: 600 13px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); }
.bl-sub + .monitors { margin-top: 18px; }
.bl-sublead { margin-top: 12px; max-width: 70ch; }
.monitors-ua { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.bl-foot { margin-top: 22px; font-size: 11px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .12em; }
.bl-note { margin-top: 10px; max-width: 900px; font-size: 12px; color: var(--ink-faint); text-transform: none; }
.bl-note a { color: var(--ink-dim); }
.np-live { margin-top: 18px; padding: 12px 14px; box-shadow: inset 0 0 0 1px var(--line); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: #eaffea; }
.np-live a { color: #fff; }
@media (max-width: 900px) { .monitors { grid-template-columns: 1fr; } }
.live-link { white-space: nowrap; }
/* narrow HUD: the full label collides with the logo, keep the dot + LIVE (full text stays for screen readers) */
@media (max-width: 1000px) {
  .hud .live-link { font-size: 0; letter-spacing: 0; }
  .hud .live-link::after { content: 'LIVE'; font-size: 11px; letter-spacing: .08em; }
}
@media (max-width: 700px) { .hud .live-link::after { font-size: 10px; } }
/* tape origin */
.sl-head b { font-size: clamp(11px, 1.05vw, 17px); white-space: nowrap; }
/* short screens (phones held sideways, small laptop windows): drop the hint and the kicker, tighten the caption */
@media (max-height: 520px) {
  .deck-hint { display: none; }
  .deck-caption h1 { display: none; }
  .deck-caption p { font-size: 12px; }
  .deck-caption .meta, .deck-caption .warnline { margin-top: 3px; font-size: 10px; }
  .hud { padding-top: 10px; padding-bottom: 10px; }
}
/* contact window */
.contact { width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); margin: auto; padding: 0; border: 0; border-radius: 14px; background: #121213; color: var(--ink);
  box-shadow: 0 0 0 1px var(--line), 0 30px 80px rgba(0,0,0,.6); overflow: auto; overscroll-behavior: contain; }
.contact::backdrop { background: rgba(5,5,6,.72); backdrop-filter: blur(3px); }
.contact[open] { animation: ct-in .28s cubic-bezier(.2,.8,.2,1); }
@keyframes ct-in { from { opacity: 0; transform: scaleY(.04) scaleX(.9); filter: brightness(3); } to { opacity: 1; transform: none; filter: none; } }
.contact-form { position: relative; display: grid; gap: 16px; padding: clamp(20px, 4vw, 34px); }
.ct-title { margin: -6px 0 4px; font: 400 clamp(30px, 4vw, 44px)/1 var(--serif); text-transform: uppercase; }
.ct-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; background: none; color: var(--ink-dim); font-size: 18px; cursor: pointer; }
.ct-close:hover, .ct-close:focus-visible { color: #fff; }
.ct-topics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0; border: 0; }
.ct-topics legend { margin-bottom: 10px; padding: 0; font-size: 11px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .14em; }
.ct-topic { position: relative; display: block; cursor: pointer; }
.ct-topic input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
.ct-topic span { display: grid; gap: 4px; height: 100%; padding: 12px 14px; box-shadow: inset 0 0 0 1px var(--line); text-transform: none; transition: box-shadow .15s, background .15s; }
.ct-topic b { font: 600 13px/1.3 var(--mono); color: #f1f1ec; }
.ct-topic small { font-size: 11px; line-height: 1.4; color: var(--ink-dim); }
.ct-topic:hover span { box-shadow: inset 0 0 0 1px var(--ink-dim); }
.ct-topic input:checked + span { box-shadow: inset 0 0 0 2px #ffd84d; background: rgba(255,216,77,.06); }
.ct-topic input:checked + span b::before { content: '● '; color: #ffd84d; }
.ct-topic input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.contact textarea { min-height: 96px; resize: vertical; }
.contact .is-invalid, .ct-topics.is-invalid .ct-topic span { box-shadow: inset 0 0 0 1px var(--hot); }
.contact input.is-invalid, .contact textarea.is-invalid { border-bottom-color: var(--hot); }
.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ct-status { min-height: 1.4em; margin: 0; font-size: 12px; color: var(--ink-dim); }
.ct-status.is-ok { color: #9be15d; } .ct-status.is-error { color: #ff8a7a; }
.ct-status a { color: #fff; }
.contact .btn-row { margin-top: 0; }
.contact-form.is-busy button[type=submit] { opacity: .5; pointer-events: none; }
.ct-note { margin: 0; font-size: 11px; color: var(--ink-faint); text-transform: none; }
.ct-note a { color: var(--ink-dim); }
@media (max-width: 560px) { .ct-topics { grid-template-columns: 1fr; } .contact .grid2 { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .contact[open] { animation: none; } }
/* hint for screen readers only */
.deck-hint { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden; clip-path: inset(50%); white-space: nowrap; padding: 0; margin: 0; }
/* site order link */
.hud-bottom { grid-template-columns: 1fr auto 1fr; }
.site-link { justify-self: center; color: #ffd84d !important; letter-spacing: .12em; white-space: nowrap; }
.site-link::after { content: ' ↗'; }
.site-link:hover, .site-link:focus-visible { color: #fff !important; }
.so-lead { margin: -4px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-dim); text-transform: none; }
@media (max-width: 700px) { .hud-bottom { grid-template-columns: 1fr; } .site-link { order: 3; } }
/* grow: support + investors */
.grow { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(18px, 3vw, 40px); margin-top: 56px; }
.grow-card { padding: clamp(20px, 3vw, 34px); background: #0e0e0e; box-shadow: 0 0 0 1px var(--line); }
.grow-card p { margin: 0 0 14px; line-height: 1.6; font-size: 13px; color: var(--ink); text-transform: none; }
.grow-title { margin: 0 0 16px; font: 400 clamp(26px, 2.8vw, 40px)/1.05 var(--serif); text-transform: uppercase; }
.grow-support .grow-title { color: #ff8a7a; }
.grow-invest .grow-title { color: #ffd84d; }
.grow-facts { list-style: none; margin: 6px 0 18px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px 22px; }
.grow-facts li { font-size: 13px; line-height: 1.5; text-transform: none; padding-left: 12px; box-shadow: inset 2px 0 0 #ffd84d; }
.grow-facts b { display: block; margin-bottom: 2px; font: 600 10px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim); }
.grow-card .btn-row { margin: 4px 0 14px; }
.grow-give { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); }
.grow-give h4 { margin: 0 0 8px; font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #ffd166; }
.grow-note { font-size: 11px !important; color: var(--ink-faint) !important; }
#donate-btn.is-soon { opacity: .55; pointer-events: none; }
.iv-amounts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .grow { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .iv-amounts { grid-template-columns: 1fr 1fr; } }