/* ============================================================
   VASAV — cinematic scroll microsite
   Black on black · electric cyan · ultrawide condensed
   ============================================================ */

:root {
  --bg: #000000;
  --bg-2: #050607;
  --panel: #0a0c0d;
  --ink: #eef2f4;
  --muted: rgba(238, 242, 244, 0.52);
  --faint: rgba(238, 242, 244, 0.18);
  --cy: #00e9ff;
  --cy-dim: rgba(0, 233, 255, 0.5);
  --cy-ghost: rgba(0, 233, 255, 0.14);
  --display: "Anton", Impact, sans-serif;
  --tech: "Saira Condensed", "Space Grotesk", sans-serif;
  --body: "Space Grotesk", system-ui, sans-serif;
  --edge: clamp(18px, 4vw, 64px);
}

/* Thai mode — Apple typography stack: SF Thai on Apple devices, Noto Sans
   Thai as the off-Apple web fallback. Anton and Saira Condensed carry no
   Thai glyphs at all, so all three roles switch. Latin runs inside Thai
   copy (VASAV, kW, mph, numerals) still resolve per-glyph. */
:root[data-lang="th"] {
  --display: -apple-system, BlinkMacSystemFont, "Noto Sans Thai", "Space Grotesk", sans-serif;
  --tech: -apple-system, BlinkMacSystemFont, "Noto Sans Thai", "Space Grotesk", sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Noto Sans Thai", "Space Grotesk", system-ui, sans-serif;
}

/* The system Thai face is not a heavy condensed display face, so the
   headline roles need weight added back and the wide Latin tracking
   removed — letter-spacing breaks Thai clusters and tone-mark stacking. */
:root[data-lang="th"] .act,
:root[data-lang="th"] .sec-head h2,
:root[data-lang="th"] .night-copy h2,
:root[data-lang="th"] .reserve-title,
:root[data-lang="th"] .config-name,
:root[data-lang="th"] .owner blockquote p {
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.24;
}
:root[data-lang="th"] .act { font-size: clamp(26px, 5.4vw, 84px); }
:root[data-lang="th"] .owner blockquote p { line-height: 1.34; }
:root[data-lang="th"] .kick,
:root[data-lang="th"] .spec-l,
:root[data-lang="th"] .macro figcaption b,
:root[data-lang="th"] .night-list b,
:root[data-lang="th"] .cluster-mode,
:root[data-lang="th"] .tele,
:root[data-lang="th"] .hint,
:root[data-lang="th"] .vnav { letter-spacing: 0.08em; }
:root[data-lang="th"] .lede,
:root[data-lang="th"] .perf-notes p,
:root[data-lang="th"] .night-list span,
:root[data-lang="th"] .macro figcaption span,
:root[data-lang="th"] .config-desc,
:root[data-lang="th"] .reserve-sub { line-height: 1.85; }
:root[data-lang="th"] .vfoot-note { line-height: 1.9; }

/* Brand marks and the instrument numerals stay in the Latin display face
   in both languages — VASAV is a wordmark, not a translatable string. */
:root[data-lang="th"] .hero-title,
:root[data-lang="th"] .vnav-brand,
:root[data-lang="th"] .cluster-speed {
  font-family: "Anton", Impact, sans-serif;
  letter-spacing: 0.1em;
}
:root[data-lang="th"] .cluster-speed { letter-spacing: 0.01em; }
/* numerals in Anton, the Thai unit suffix via per-glyph fallback */
:root[data-lang="th"] .spec-n {
  font-family: "Anton", "Noto Sans Thai", Impact, sans-serif;
  font-size: clamp(30px, 4.2vw, 64px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scrollbar-width: none; scroll-behavior: auto; }
html::-webkit-scrollbar { display: none; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--cy); color: #001518; }

img { max-width: 100%; display: block; }

/* ---------- film grain ---------- */
.grain {
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  z-index: 90; pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 0.9s steps(4) infinite;
}
@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 1%); }
  50% { transform: translate(1%, -2%); }
  75% { transform: translate(-1%, 2%); }
  100% { transform: translate(2%, -1%); }
}

/* ---------- speed-blur veil (drives off scroll velocity) ---------- */
.blur-veil {
  position: fixed; inset: 0;
  z-index: 88; pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(90deg, rgba(0,233,255,0.09) 0%, transparent 12%, transparent 88%, rgba(0,233,255,0.09) 100%),
    radial-gradient(120% 60% at 50% 50%, transparent 40%, rgba(0,0,0,0.55) 100%);
  transition: opacity 0.25s linear;
}

/* ============ NAV ============ */
.vnav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 18px var(--edge);
  font-family: var(--tech);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase;
  mix-blend-mode: difference;
}
.vnav a { color: var(--ink); text-decoration: none; }
.vnav-back { display: inline-flex; align-items: center; gap: 9px; opacity: 0.75; transition: opacity 0.25s; }
.vnav-back:hover { opacity: 1; }
.vnav-back .arw { transition: transform 0.3s cubic-bezier(0.2,0.8,0.2,1); display: inline-block; }
.vnav-back:hover .arw { transform: translateX(-5px); }
.vnav-brand {
  font-family: var(--display);
  font-size: 17px; letter-spacing: 0.5em;
  text-indent: 0.5em;
  position: absolute; left: 50%; transform: translateX(-50%);
}
.vnav-cluster { display: flex; align-items: center; gap: 22px; }
.vnav-sound {
  background: none; border: 0; cursor: pointer; padding: 0;
  color: var(--ink); font: inherit; letter-spacing: 0.22em;
  opacity: 0.6; transition: opacity 0.25s;
}
.vnav-sound:hover, .vnav-sound.on { opacity: 1; }
.lang { display: flex; align-items: center; gap: 7px; }
.lang button {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; letter-spacing: inherit;
  color: var(--muted);
  transition: color 0.3s;
}
.lang button:hover { color: var(--ink); }
.lang button.on { color: var(--cy); }
.lang .sep { color: var(--muted); opacity: 0.5; }

.vnav-cta { position: relative; }
.vnav-cta::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.2,0.8,0.2,1);
}
.vnav-cta:hover::after { transform: scaleX(1); }

/* ============ SPEED CLUSTER (HUD) ============ */
.cluster {
  position: fixed;
  right: var(--edge); bottom: clamp(18px, 3.4vw, 40px);
  z-index: 70;
  width: 188px;
  font-family: var(--tech);
  pointer-events: none;
  user-select: none;
}
.cluster-arc { width: 100%; height: auto; display: block; overflow: visible; }
.arc-track, .arc-fill { fill: none; stroke-width: 3; stroke-linecap: round; }
.arc-track { stroke: rgba(238,242,244,0.14); }
.arc-fill {
  stroke: var(--cy);
  stroke-dasharray: 251.3;
  stroke-dashoffset: 251.3;
  filter: drop-shadow(0 0 6px var(--cy-dim));
  transition: stroke-dashoffset 0.08s linear;
}
.cluster-read {
  display: flex; align-items: baseline; justify-content: center;
  gap: 6px; margin-top: -34px;
}
.cluster-speed {
  font-family: var(--display);
  font-size: 54px; line-height: 0.9;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 22px rgba(0,233,255,0.28);
}
.cluster-unit { font-size: 11px; letter-spacing: 0.28em; color: var(--muted); }
.cluster-rows {
  margin-top: 14px;
  display: grid; gap: 5px;
  border-top: 1px solid rgba(238,242,244,0.12);
  padding-top: 10px;
}
.crow {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 6px; align-items: baseline;
  font-size: 10px; letter-spacing: 0.2em;
  color: var(--muted);
}
.crow b {
  font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}
.crow i { font-style: normal; opacity: 0.5; font-size: 9px; }
.cluster-mode {
  margin-top: 10px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--cy);
  border: 1px solid var(--cy-ghost);
  background: rgba(0,233,255,0.05);
  padding: 5px 8px; text-align: center;
}

/* ============ CINEMATIC SCRUB SECTIONS ============ */
.cine { position: relative; height: 480vh; background: var(--bg); }
.cine .sticky {
  position: sticky; top: 0;
  height: 100vh; width: 100%;
  overflow: hidden;
}
.cine canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  transition: filter 0.2s linear;
}
.vig {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(110% 75% at 50% 45%, transparent 42%, rgba(0,0,0,0.72) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, transparent 22%, transparent 62%, rgba(0,0,0,0.8) 100%);
}
.ov {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 3;
}

/* ---------- hero ---------- */
.hero {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(1500px, 92vw);
  text-align: center;
  will-change: transform, opacity;
}
.hero-kick {
  font-family: var(--tech);
  font-size: clamp(9px, 1.05vw, 12px);
  letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--cy);
  margin-bottom: clamp(14px, 2vw, 26px);
  opacity: 0; animation: fade-up 1.1s 0.15s cubic-bezier(0.2,0.8,0.2,1) forwards;
}
.hero-title {
  font-family: var(--display);
  font-size: clamp(58px, 13.5vw, 236px);
  line-height: 0.82;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hero-title .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.42em) scaleY(1.25);
  filter: blur(14px);
  animation: ch-in 1.15s cubic-bezier(0.16,0.9,0.24,1) forwards;
}
@keyframes ch-in {
  to { opacity: 1; transform: translateY(0) scaleY(1); filter: blur(0); }
}
.hero-sub {
  margin-top: clamp(14px, 2vw, 24px);
  font-size: clamp(13px, 1.35vw, 18px);
  letter-spacing: 0.05em;
  color: var(--muted);
  opacity: 0; animation: fade-up 1.1s 1.5s cubic-bezier(0.2,0.8,0.2,1) forwards;
}
.hero-sub em { color: var(--ink); font-style: italic; }
@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- scroll-windowed act lines ---------- */
.line {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(1400px, 92vw);
  text-align: center;
  opacity: 0;
  will-change: opacity, transform;
}
.act {
  font-family: var(--display);
  font-size: clamp(30px, 6.6vw, 106px);
  line-height: 0.98;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-shadow: 0 8px 60px rgba(0,0,0,0.85);
}
.act .em { color: var(--cy); text-shadow: 0 0 44px rgba(0,233,255,0.35); }

/* the driver stands dead centre in sequence 05 — lift the copy off his face */
#driver .line { top: 24%; }
@media (max-width: 760px) { #driver .line { top: 20%; } }

/* ---------- telemetry corners ---------- */
.tele {
  position: absolute;
  font-family: var(--tech);
  font-size: 10px; letter-spacing: 0.28em;
  color: var(--faint); text-transform: uppercase;
  z-index: 4;
}
.tele.bl { left: var(--edge); bottom: clamp(18px, 3.4vw, 40px); }
.tele.br { right: var(--edge); top: calc(18px + 3.6em); color: var(--cy-dim); }
.hint {
  position: absolute; left: 50%; bottom: clamp(18px, 3.4vw, 40px);
  transform: translateX(-50%);
  font-family: var(--tech);
  font-size: 10px; letter-spacing: 0.34em;
  color: var(--muted); text-transform: uppercase;
  z-index: 4;
  animation: bob 2.6s ease-in-out infinite;
  transition: opacity 0.4s;
}
@keyframes bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 7px); } }

/* ============ SHARED SECTION FURNITURE ============ */
.kick {
  display: block;
  font-family: var(--tech);
  font-size: 11px; letter-spacing: 0.4em;
  text-transform: uppercase; color: var(--cy);
  margin-bottom: clamp(16px, 2vw, 26px);
}
.sec-head h2, .night-copy h2, .reserve-title {
  font-family: var(--display);
  font-size: clamp(34px, 6.4vw, 104px);
  line-height: 0.96;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}
.em { color: var(--cy); }
.lede {
  margin-top: clamp(18px, 2.4vw, 30px);
  max-width: 62ch;
  font-size: clamp(14px, 1.35vw, 18px);
  line-height: 1.65;
  color: var(--muted);
}

.rv { opacity: 0; transform: translateY(38px); transition: opacity 1s cubic-bezier(0.2,0.8,0.2,1), transform 1s cubic-bezier(0.2,0.8,0.2,1); }
.rv.in { opacity: 1; transform: none; }

/* ============ PERFORMANCE ============ */
.perf {
  padding: clamp(90px, 13vw, 200px) var(--edge);
  border-top: 1px solid rgba(238,242,244,0.07);
  background: linear-gradient(180deg, #000 0%, var(--bg-2) 50%, #000 100%);
}
.specs {
  margin-top: clamp(48px, 7vw, 96px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(238,242,244,0.09);
  border: 1px solid rgba(238,242,244,0.09);
}
.spec {
  background: var(--bg);
  padding: clamp(26px, 3.4vw, 48px) clamp(16px, 2vw, 30px);
  display: flex; flex-direction: column; gap: 12px;
  transition: background 0.4s;
}
.spec:hover { background: #05090a; }
.spec-n {
  font-family: var(--display);
  font-size: clamp(34px, 5vw, 78px);
  line-height: 0.9;
  letter-spacing: 0.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.spec:hover .spec-n { color: var(--cy); }
.spec-l {
  font-family: var(--tech);
  font-size: 11px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--muted);
}
.perf-notes {
  margin-top: clamp(48px, 6vw, 84px);
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 4vw, 64px);
  max-width: 1200px;
}
.perf-notes p { font-size: clamp(14px, 1.3vw, 17px); line-height: 1.7; color: var(--muted); }
.perf-notes b { color: var(--ink); font-weight: 700; }

/* ============ DESIGN ============ */
.design {
  padding: clamp(90px, 13vw, 200px) var(--edge);
  border-top: 1px solid rgba(238,242,244,0.07);
}
.macros {
  margin-top: clamp(48px, 7vw, 96px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.8vw, 28px);
}
.macro .ph {
  display: block; position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #060809;
  border: 1px solid rgba(238,242,244,0.08);
}
.macro img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.03);
  transition: transform 1.1s cubic-bezier(0.2,0.8,0.2,1), filter 0.6s;
  filter: saturate(0.92);
}
.macro:hover img { transform: scale(1.09); filter: saturate(1.05); }
.macro figcaption { display: block; margin-top: 18px; }
.macro figcaption b {
  display: block;
  font-family: var(--tech);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase;
  margin-bottom: 9px;
}
.macro figcaption span {
  display: block;
  font-size: 13.5px; line-height: 1.65; color: var(--muted);
}
.macro:nth-child(2) { margin-top: clamp(0px, 5vw, 70px); }
.macro:nth-child(3) { margin-top: clamp(0px, 10vw, 140px); }

/* ============ NIGHT COPY ============ */
.night-copy {
  padding: clamp(90px, 13vw, 200px) var(--edge);
  background:
    radial-gradient(90% 70% at 20% 0%, rgba(0,233,255,0.055) 0%, transparent 60%),
    #000;
  border-top: 1px solid rgba(238,242,244,0.07);
}
.night-list {
  list-style: none;
  margin-top: clamp(48px, 6vw, 84px);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(238,242,244,0.09);
  border: 1px solid rgba(238,242,244,0.09);
}
.night-list li {
  background: #000;
  padding: clamp(24px, 3vw, 40px);
  display: flex; flex-direction: column; gap: 12px;
}
.night-list b {
  font-family: var(--tech);
  font-size: 12px; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--cy);
}
.night-list span { font-size: 13.5px; line-height: 1.7; color: var(--muted); }

/* ============ CONFIGURATOR ============ */
.config {
  padding: clamp(90px, 13vw, 200px) var(--edge);
  border-top: 1px solid rgba(238,242,244,0.07);
}
.config-stage {
  margin-top: clamp(48px, 6vw, 90px);
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: clamp(28px, 4vw, 70px);
  align-items: center;
}
.config-img {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(238,242,244,0.09);
}
.config-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: opacity 0.5s cubic-bezier(0.2,0.8,0.2,1), filter 0.5s;
}
.config-img img.swap { opacity: 0; filter: blur(12px); }
.config-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 100% at 50% 100%, var(--glow, rgba(0,233,255,0.16)) 0%, transparent 65%);
  transition: background 0.6s;
}
.config-name {
  display: block;
  font-family: var(--display);
  font-size: clamp(26px, 3.4vw, 50px);
  letter-spacing: 0.04em; text-transform: uppercase;
  line-height: 1;
}
.config-code {
  display: block; margin-top: 12px;
  font-family: var(--tech);
  font-size: 11px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--cy);
}
.config-desc {
  margin-top: 20px;
  font-size: 14px; line-height: 1.7; color: var(--muted);
  min-height: 4.8em;
}
/* the speed cluster is fixed bottom-right — keep the clickable swatches
   clear of it so no finish is ever hidden behind the telemetry */
.swatches {
  margin-top: 30px;
  margin-right: 212px;
  display: flex; flex-direction: column; gap: 1px;
  background: rgba(238,242,244,0.09);
  border: 1px solid rgba(238,242,244,0.09);
}
@media (max-width: 1100px) { .swatches { margin-right: 0; } }
.sw {
  display: flex; align-items: center; gap: 14px;
  background: #000; border: 0; cursor: pointer;
  padding: 15px 18px;
  font-family: var(--tech);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--muted);
  transition: color 0.3s, background 0.3s;
  text-align: left;
}
.sw span {
  width: 20px; height: 20px; flex: none;
  background: var(--sw);
  border: 1px solid rgba(238,242,244,0.28);
  border-radius: 50%;
  transition: box-shadow 0.3s, transform 0.3s;
}
.sw:hover { color: var(--ink); background: #05090a; }
.sw.on { color: var(--ink); background: #05090a; }
.sw.on span { box-shadow: 0 0 0 2px #000, 0 0 0 3px var(--cy); transform: scale(1.05); }

/* ============ OWNER ============ */
.owner {
  padding: clamp(90px, 13vw, 190px) var(--edge);
  border-top: 1px solid rgba(238,242,244,0.07);
  text-align: center;
}
.owner blockquote { max-width: 1100px; margin: 0 auto; }
.owner blockquote p {
  font-family: var(--display);
  font-size: clamp(24px, 4.4vw, 66px);
  line-height: 1.08;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}
.owner blockquote em { color: var(--cy); font-style: normal; }
.owner cite {
  display: block; margin-top: clamp(22px, 3vw, 38px);
  font-family: var(--tech); font-style: normal;
  font-size: 11px; letter-spacing: 0.34em;
  text-transform: uppercase; color: var(--muted);
}

/* ============ RESERVE ============ */
.reserve {
  padding: clamp(100px, 15vw, 230px) var(--edge) 0;
  background:
    radial-gradient(80% 60% at 50% 100%, rgba(0,233,255,0.09) 0%, transparent 62%),
    #000;
  border-top: 1px solid rgba(238,242,244,0.07);
  text-align: center;
}
.reserve .kick { margin-left: auto; margin-right: auto; }
.reserve-sub {
  margin: clamp(22px, 3vw, 36px) auto 0;
  max-width: 60ch;
  font-size: clamp(14px, 1.35vw, 18px);
  line-height: 1.65; color: var(--muted);
}
.reserve-row {
  margin-top: clamp(34px, 4.5vw, 56px);
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
}
.btn {
  display: inline-block;
  font-family: var(--tech);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase;
  text-decoration: none;
  padding: 17px 34px;
  border: 1px solid var(--cy);
  transition: background 0.35s, color 0.35s, box-shadow 0.35s, transform 0.35s;
}
.btn-solid { background: var(--cy); color: #00171b; }
.btn-solid:hover { box-shadow: 0 0 44px rgba(0,233,255,0.45); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: rgba(238,242,244,0.28); }
.btn-ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
.reserve-fine {
  margin-top: clamp(24px, 3vw, 36px);
  font-family: var(--tech);
  font-size: 10px; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--faint);
}
.vfoot {
  margin-top: clamp(80px, 12vw, 160px);
  padding: 26px 0 30px;
  border-top: 1px solid rgba(238,242,244,0.07);
  display: flex; flex-direction: column; gap: 10px;
  font-family: var(--tech);
  font-size: 10px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--faint);
}
.vfoot-note { letter-spacing: 0.14em; opacity: 0.72; max-width: 90ch; margin: 0 auto; line-height: 1.7; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px) {
  .specs { grid-template-columns: repeat(2, 1fr); }
  .macros { grid-template-columns: 1fr; }
  .macro:nth-child(2), .macro:nth-child(3) { margin-top: 0; }
  .night-list { grid-template-columns: 1fr; }
  .config-stage { grid-template-columns: 1fr; }
  .perf-notes { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .cine { height: 380vh; }
  .vnav { font-size: 9px; letter-spacing: 0.18em; padding: 14px var(--edge); }
  .vnav-brand { font-size: 14px; letter-spacing: 0.4em; text-indent: 0.4em; }
  .vnav-cluster { gap: 11px; }
  .vnav-back .lbl { display: none; }
  .vnav-cta { display: none; }   /* RESERVE — the finale CTA covers it at this width */
  .lang { gap: 5px; }

  .cluster { width: 116px; right: 14px; bottom: 14px; }
  .cluster-speed { font-size: 34px; }
  .cluster-read { margin-top: -22px; }
  .cluster-unit { font-size: 9px; }
  .crow { font-size: 9px; letter-spacing: 0.12em; }
  .cluster-rows { margin-top: 10px; padding-top: 8px; }
  .cluster-mode { font-size: 8px; letter-spacing: 0.2em; padding: 4px 5px; }

  .hero-title { font-size: clamp(52px, 21vw, 120px); letter-spacing: 0.06em; text-indent: 0.06em; }
  .tele.bl { display: none; }   /* collides with the scroll hint at phone widths */
  .tele.br { font-size: 8px; letter-spacing: 0.18em; }
  .hint { bottom: 92px; font-size: 9px; }
  .specs { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .grain, .hint { animation: none; }
  .hero-title .ch { animation-duration: 0.01s; }
  .rv { transition-duration: 0.01s; }
}