/* ==========================================================================
   Pull Up — a drive-in that picks the movie for you
   ========================================================================== */

:root {
  --night:     #08060F;
  --night-2:   #100A1E;
  --dusk:      #1C1230;
  --asphalt:   #14101B;
  --asphalt-2: #1F1A28;

  --neon-pink: #FF3D7F;
  --neon-cyan: #35E7E1;
  --amber:     #FFB13D;
  --amber-dim: #7A5320;

  --chrome:    #C8CDD6;
  --chrome-dk: #6E7684;
  --bone:      #F2ECE0;
  --dust:      #9A93A8;

  --sign:    "Monoton", cursive;
  --poster:  "Anton", "Arial Black", sans-serif;
  --body:    "Barlow", "Helvetica Neue", Arial, sans-serif;
  --mono:    "IBM Plex Mono", Menlo, monospace;

  --lot-max: 60rem;
}

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

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--body);
  font-size: clamp(1rem, .96rem + .2vw, 1.08rem);
  line-height: 1.6;
  color: var(--bone);
  background: var(--night);
  overflow-x: hidden;
}

/* ---------- night sky over the lot ---------- */
.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 45% at 50% 26%, rgba(255,177,61,.09), transparent 62%),
    radial-gradient(ellipse 100% 60% at 50% 0%, var(--dusk) 0%, var(--night-2) 46%, var(--night) 78%);
}
.star {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: var(--bone);
  opacity: .45;
  animation: twinkle 6s ease-in-out infinite;
}
@keyframes twinkle { 0%,100%{opacity:.15} 50%{opacity:.7} }

.lot { position: relative; z-index: 1; max-width: var(--lot-max); margin: 0 auto; padding: 0 1.25rem 4rem; }

/* ==========================================================================
   NEON MARQUEE
   ========================================================================== */
.marquee { text-align: center; padding: 3.4rem 0 1.6rem; }

.marquee__sign {
  font-family: var(--sign);
  font-size: clamp(2.6rem, 1.7rem + 4.4vw, 4.6rem);
  line-height: 1;
  margin: 0;
  color: #FFD9E8;
  text-shadow:
    0 0 6px rgba(255,61,127,.9),
    0 0 18px rgba(255,61,127,.75),
    0 0 44px rgba(255,61,127,.45),
    0 0 90px rgba(255,61,127,.25);
  animation: buzz 7s steps(1) infinite;
}
@keyframes buzz {
  0%, 92%, 100% { opacity: 1; }
  93% { opacity: .55; }
  94% { opacity: 1; }
  96% { opacity: .7; }
  97% { opacity: 1; }
}
.marquee__strip {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 1rem 0 0;
}
.marquee__sub {
  font-family: var(--body);
  font-size: clamp(.98rem, .94rem + .2vw, 1.12rem);
  color: var(--dust);
  max-width: 30rem;
  margin: .9rem auto 0;
}

/* ==========================================================================
   THE SCREEN
   ========================================================================== */
.screen-rig { position: relative; margin-top: 1.4rem; }

.screen {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #0B0A10;
  border: 3px solid #2B2536;
  border-radius: 3px;
  box-shadow:
    0 0 0 6px rgba(0,0,0,.55),
    0 0 70px rgba(255,177,61,.07),
    0 30px 70px rgba(0,0,0,.7);
  overflow: hidden;
  display: grid;
  place-items: center;
}
/* the screen's own faint glow when a feature is up */
.screen.is-lit {
  box-shadow:
    0 0 0 6px rgba(0,0,0,.55),
    0 0 120px rgba(255,220,180,.16),
    0 30px 80px rgba(0,0,0,.75);
}

/* idle state: film leader / static */
.screen__idle {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: .6rem;
  text-align: center;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 2px, transparent 2px 4px),
    radial-gradient(circle at 50% 50%, #17131F, #0A080E 70%);
  transition: opacity .5s ease;
}
.screen__idle p {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #4A4356;
  margin: 0;
}
.screen.is-lit .screen__idle { opacity: 0; pointer-events: none; }

/* projector flicker during the reel change */
.screen__flare {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(255,240,214,.9), rgba(255,214,160,.25) 45%, transparent 72%);
  opacity: 0;
  pointer-events: none;
}
.screen.is-rolling .screen__flare { animation: flare 1.15s ease-out; }
@keyframes flare {
  0%   { opacity: 0; }
  18%  { opacity: .95; }
  40%  { opacity: .35; }
  60%  { opacity: .8; }
  100% { opacity: 0; }
}

/* ---------- the projected poster ---------- */
.poster-stage {
  position: absolute;
  inset: 4%;
  display: flex;
  justify-content: center;
  /* align-items defaults to stretch — the poster's height:100% below
     relies on that to resolve against a real pixel value. Do not swap
     this container to `display:grid; place-items:center`: that disables
     stretch and height:100% on the poster silently miscomputes, causing
     the poster/photo to render larger than the screen and get clipped
     by .screen's overflow:hidden — different amounts per viewport, which
     is exactly the "different every time" / off-frame bug this replaces. */
  opacity: 0;
  transform: scale(.97);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.3,1);
}
.screen.is-lit .poster-stage { opacity: 1; transform: none; }

.poster {
  position: relative;
  height: 100%;
  aspect-ratio: 2 / 3;
  max-width: 100%;
  padding: 8% 7%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(165deg, var(--p1, #2A2340) 0%, var(--p2, #0E0B18) 100%);
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
}
/* halftone-ish print grain so it reads as paper, not a div */
.poster::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}
/* a single graphic motif — a rising sun/arc bar, very 80s one-sheet */
.poster::before {
  content: "";
  position: absolute;
  left: -20%;
  right: -20%;
  bottom: 18%;
  height: 55%;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: radial-gradient(ellipse at 50% 100%, var(--pa, #FF3D7F) 0%, transparent 68%);
  opacity: .5;
}

/* real TMDB poster, layered over the CSS poster as a fallback base.
   Hidden until it actually loads — no flash of a broken image.
   `contain` (not `cover`) so posters with an unusual ratio are shown whole
   rather than cropped; the letterboxing reads as a projected frame. */
.poster__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #07060B;
  opacity: 0;
  transition: opacity .5s ease;
  z-index: 1;
}
.poster.is-photo .poster__photo { opacity: 1; }

/* caption over a real poster — keeps the film details visible without
   painting over the artwork */
.poster__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding: 1.6rem .9rem .7rem;
  background: linear-gradient(transparent, rgba(6,5,10,.82) 42%, rgba(6,5,10,.95));
  opacity: 0;
  transition: opacity .4s ease .15s;
  pointer-events: none;
}
.poster.is-photo .poster__caption { opacity: 1; }
.poster__caption b {
  display: block;
  font-family: var(--poster);
  font-size: clamp(.72rem, .45rem + 1.1vw, 1.05rem);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--bone);
  letter-spacing: .01em;
}
.poster__caption span {
  display: block;
  font-family: var(--mono);
  font-size: clamp(.4rem, .3rem + .4vw, .56rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(242,236,224,.72);
  margin-top: .28rem;
}

/* once a real poster is showing, fade the illustrated layer out from view
   rather than deleting it — instant fallback if the image later errors */
.poster.is-photo .poster__tagline,
.poster.is-photo .poster__title,
.poster.is-photo .poster__rule,
.poster.is-photo .poster__credit,
.poster.is-photo::before { opacity: 0; }
.poster::before,
.poster__tagline, .poster__title, .poster__rule, .poster__credit {
  position: relative;
  z-index: 2;
  transition: opacity .3s ease;
}

/* a soft pulse for the brief real gap while a TMDB lookup is in flight —
   only applied when actually waiting on the network, never for the
   instant no-key / cached path */
.poster.is-waiting { animation: posterWait 1.4s ease-in-out infinite; }
@keyframes posterWait {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.12); }
}

.poster__tagline {
  position: relative;
  font-family: var(--mono);
  font-size: clamp(.42rem, .3rem + .5vw, .62rem);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pa, #FF3D7F);
  margin: 0 0 auto;
  max-width: 92%;
  line-height: 1.5;
}
.poster__title {
  position: relative;
  font-family: var(--poster);
  font-size: clamp(1.5rem, .7rem + 4.2vw, 3.1rem);
  line-height: .92;
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: var(--bone);
  margin: 0;
  text-shadow: 0 3px 14px rgba(0,0,0,.6);
}
.poster__rule {
  position: relative;
  height: 2px;
  width: 3.2rem;
  background: var(--pa, #FF3D7F);
  margin: .55rem 0 .5rem;
}
.poster__credit {
  position: relative;
  font-family: var(--mono);
  font-size: clamp(.42rem, .3rem + .45vw, .6rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(242,236,224,.72);
  margin: 0;
  line-height: 1.6;
}

/* ---------- speaker post beside the screen ---------- */
.screen-rig__posts {
  display: flex;
  justify-content: space-between;
  padding: 0 12%;
  margin-top: -2px;
}
.screen-rig__posts span {
  width: 10px;
  height: 46px;
  background: linear-gradient(90deg, #241E2E, #3A3248 40%, #191426);
}

/* ==========================================================================
   THE CAR — the button
   ========================================================================== */
.lot-floor {
  position: relative;
  margin-top: -6px;
  padding: 2.2rem 0 0;
  background:
    linear-gradient(180deg, transparent, rgba(0,0,0,.5) 40%),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(255,255,255,.02) 46px 48px),
    var(--asphalt);
  border-top: 1px solid #2A2336;
}

.car-row { display: flex; align-items: flex-end; justify-content: center; gap: 1.4rem; }

.car {
  display: block;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  width: min(23rem, 78%);
  -webkit-tap-highlight-color: transparent;
  transition: transform .3s cubic-bezier(.2,.8,.3,1);
}
.car:hover { transform: translateY(-3px); }
.car:active { transform: translateY(0); }
.car:focus-visible { outline: 2px dashed var(--amber); outline-offset: 10px; }
/* sizing only — `display` is left to the .car__art rules further down, which
   swap the vehicle per screen. Setting display here would outrank them. */
.car svg { width: 100%; height: auto; }

/* tail lights pulse while the reel is changing */
.car .taillight { transition: opacity .3s ease; }
.car.is-rolling .taillight { animation: brake .5s ease-in-out infinite alternate; }
@keyframes brake { from { opacity: .55 } to { opacity: 1 } }

/* the speaker on its pole */
.speaker { width: 44px; flex: 0 0 auto; }
.speaker svg { display: block; width: 100%; height: auto; }

.car-cue {
  text-align: center;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 1.1rem 0 0;
  padding-bottom: 2rem;
  min-height: 1.4em;
}
.car-cue.is-working { color: var(--neon-cyan); }

/* ==========================================================================
   THE TICKET — feature details
   ========================================================================== */
.ticket[hidden] { display: none; }
.ticket {
  margin-top: 2.6rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.3,1);
}
.ticket.is-shown { opacity: 1; transform: none; }

.ticket__card {
  background: linear-gradient(165deg, #191426, #120E1D);
  border: 1px solid #2E2740;
  border-left: 3px solid var(--amber);
  padding: 1.6rem 1.5rem;
}
.ticket__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1rem;
  margin-bottom: .5rem;
}
.ticket__title {
  font-family: var(--poster);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--bone);
  margin: 0;
}
.ticket__year {
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--amber);
}
.ticket__meta {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dust);
  margin: 0 0 1rem;
}
.ticket__pitch {
  font-size: clamp(1.02rem, .98rem + .3vw, 1.16rem);
  color: var(--bone);
  margin: 0 0 .8rem;
}
.ticket__why {
  color: var(--dust);
  margin: 0;
  font-size: .98rem;
}
.ticket__why b { color: var(--neon-cyan); font-weight: 600; }

/* double feature slot */
.second[hidden] { display: none; }
.second {
  margin-top: 1rem;
  border-left: 3px solid var(--neon-pink);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.4rem;
}
.btn {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--amber);
  background: transparent;
  border: 1px solid var(--amber-dim);
  padding: .65rem 1.05rem;
  cursor: pointer;
  transition: background .22s ease, color .22s ease, border-color .22s ease;
}
.btn:hover { background: rgba(255,177,61,.13); border-color: var(--amber); }
.btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.btn--pink { color: var(--neon-pink); border-color: rgba(255,61,127,.4); }
.btn--pink:hover { background: rgba(255,61,127,.13); border-color: var(--neon-pink); }
.btn[disabled] { opacity: .35; cursor: default; pointer-events: none; }

/* ==========================================================================
   ADS / FOOTER
   ========================================================================== */
.ad-slot { margin-top: 3rem; text-align: center; }
.ad-slot__label {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(154,147,168,.6);
  margin: 0 0 .5rem;
}

.notes {
  max-width: 40rem;
  margin: 3.4rem auto 0;
}
.notes h2 {
  font-family: var(--poster);
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--bone);
  margin: 0 0 .6rem;
}
.notes p { color: var(--dust); font-size: .98rem; }
.notes a { color: var(--amber); }

.foot {
  margin-top: 3.4rem;
  padding-top: 1.3rem;
  border-top: 1px solid #241E30;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.3rem;
  align-items: center;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--dust);
}
.foot a { color: var(--dust); text-decoration: none; border-bottom: 1px solid #332B43; }
.foot a:hover { color: var(--amber); border-color: var(--amber); }
.foot__spacer { flex: 1; }

/* ==========================================================================
   LEGAL PAGES
   ========================================================================== */
.doc { max-width: 42rem; margin: 0 auto; padding: 3.4rem 0 0; }
.doc__back {
  display: inline-block;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dust);
  text-decoration: none;
  margin-bottom: 1.8rem;
}
.doc__back:hover { color: var(--amber); }
.doc h1 {
  font-family: var(--poster);
  font-size: clamp(1.9rem, 1.5rem + 2vw, 2.7rem);
  text-transform: uppercase;
  color: var(--bone);
  margin: 0 0 .3rem;
}
.doc__date {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--dust);
  margin: 0 0 2.2rem;
}
.doc h2 {
  font-family: var(--poster);
  font-size: 1.15rem;
  text-transform: uppercase;
  color: var(--amber);
  margin: 2.2rem 0 .5rem;
}
.doc p, .doc li { color: var(--dust); }
.doc a { color: var(--amber); }
.doc ul { padding-left: 1.2rem; }
.doc li { margin-bottom: .45rem; }
.doc__cross { margin-top: 2.4rem; font-family: var(--mono); font-size: .8rem; }

/* ==========================================================================
   RESPONSIVE / MOTION
   ========================================================================== */
@media (max-width: 34rem) {
  .car-row { gap: .8rem; }
  .car { width: 84%; }
  .speaker { width: 32px; }
  .screen-rig__posts { padding: 0 8%; }
  .ticket__card { padding: 1.3rem 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .star, .marquee__sign { animation: none; }
  .screen.is-rolling .screen__flare { animation: none; opacity: 0; }
  .car.is-rolling .taillight { animation: none; }
  .poster.is-waiting { animation: none; }
  .poster-stage, .ticket { transition: opacity .25s linear; transform: none; }
  .ticket.is-shown, .screen.is-lit .poster-stage { transform: none; }
  .car:hover { transform: none; }
}

/* ==========================================================================
   TWO SCREENS — tab selector + the Overlook's cooler, higher-up palette
   ========================================================================== */
.tabs {
  display: flex;
  justify-content: center;
  gap: .8rem;
  margin: .4rem 0 1.6rem;
  flex-wrap: wrap;
}
.tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  min-width: 8.6rem;
  padding: .7rem 1.1rem .6rem;
  cursor: pointer;
  background: rgba(20,16,27,.72);
  border: 1px solid #2E2740;
  border-radius: 2px;
  color: var(--dust);
  transition: border-color .25s ease, color .25s ease, background .25s ease, transform .25s ease;
}
/* the perforated stub edge, like a torn ticket */
.tab::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: radial-gradient(circle at 3px 3px, transparent 2px, transparent 2px);
}
.tab:hover:not([disabled]) { border-color: var(--amber-dim); color: var(--bone); }
.tab:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.tab[disabled] { opacity: .4; cursor: not-allowed; }

.tab__no {
  font-family: var(--mono);
  font-size: .56rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  opacity: .8;
}
.tab__name {
  font-family: var(--poster);
  font-size: 1.02rem;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: inherit;
}
.tab__note {
  font-family: var(--mono);
  font-size: .54rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .65;
}

.tab.is-active {
  color: var(--bone);
  border-color: var(--amber);
  background: rgba(255,177,61,.1);
  transform: translateY(-2px);
}
.tab.is-active .tab__no,
.tab.is-active .tab__note { color: var(--amber); opacity: 1; }

/* when Screen 2 is the active one, its tab wears the cyan instead */
body.mode-overlook .tab.is-active {
  border-color: var(--neon-cyan);
  background: rgba(53,231,225,.1);
}
body.mode-overlook .tab.is-active .tab__no,
body.mode-overlook .tab.is-active .tab__note { color: var(--neon-cyan); }

.tabs__note {
  text-align: center;
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--dust);
  margin: -.8rem 0 1.4rem;
}
.tabs__note code { color: var(--amber); }

/* ---------- the Overlook: colder, thinner air, sea below ---------- */
body.mode-overlook .sky {
  background:
    radial-gradient(ellipse 70% 45% at 50% 26%, rgba(53,231,225,.07), transparent 62%),
    radial-gradient(ellipse 100% 60% at 50% 0%, #10222E 0%, #0A1620 46%, #05090F 78%);
}
body.mode-overlook .marquee__sign {
  color: #D9FBFA;
  text-shadow:
    0 0 6px rgba(53,231,225,.9),
    0 0 18px rgba(53,231,225,.7),
    0 0 44px rgba(53,231,225,.4),
    0 0 90px rgba(53,231,225,.2);
}
body.mode-overlook .marquee__strip { color: var(--neon-cyan); }
body.mode-overlook .car-cue { color: var(--neon-cyan); }
body.mode-overlook .car-cue.is-working { color: var(--amber); }
body.mode-overlook .screen.is-lit {
  box-shadow:
    0 0 0 6px rgba(0,0,0,.55),
    0 0 120px rgba(53,231,225,.16),
    0 30px 80px rgba(0,0,0,.75);
}
body.mode-overlook .ticket__card {
  border-left-color: var(--neon-cyan);
}
body.mode-overlook .ticket__year { color: var(--neon-cyan); }
body.mode-overlook .btn {
  color: var(--neon-cyan);
  border-color: rgba(53,231,225,.35);
}
body.mode-overlook .btn:hover {
  background: rgba(53,231,225,.12);
  border-color: var(--neon-cyan);
}

/* the lot floor becomes a clifftop: gravel, then a hard edge, then nothing */
body.mode-overlook .lot-floor {
  background:
    linear-gradient(180deg, transparent, rgba(0,0,0,.55) 40%),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(255,255,255,.015) 38px 40px),
    #101A20;
  border-top: 1px solid #24363E;
}
.cliff-edge { display: none; }
body.mode-overlook .cliff-edge {
  display: block;
  position: relative;
  height: 46px;
  margin-top: -1px;
  overflow: hidden;
  background: linear-gradient(180deg, #101A20 0%, #0A1218 40%, transparent 100%);
}
/* a ragged rock lip, drawn with a clip-path rather than an image */
body.mode-overlook .cliff-edge::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #0C151B;
  clip-path: polygon(
    0 0, 6% 38%, 12% 16%, 19% 46%, 26% 22%, 33% 52%, 41% 26%,
    48% 58%, 55% 30%, 63% 60%, 70% 34%, 78% 62%, 86% 30%, 93% 54%, 100% 24%,
    100% 0
  );
}
/* distant water catching the moon, far below the edge */
body.mode-overlook .cliff-edge::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 16px;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 26px,
    rgba(53,231,225,.10) 26px 52px
  );
  opacity: .5;
}

/* ---------- vehicle swap ---------- */
.car__art { display: block; width: 100%; height: auto; }
.car__art--truck { display: none; }
body.mode-overlook .car__art--convertible { display: none; }
body.mode-overlook .car__art--truck { display: block; }

/* ---------- provenance line on the ticket ---------- */
.ticket__source {
  margin: .9rem 0 0;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--dust);
  opacity: .85;
  border-left: 2px solid rgba(53,231,225,.4);
  padding-left: .7rem;
}

@media (max-width: 34rem) {
  .tabs { gap: .5rem; }
  .tab { min-width: 7.2rem; padding: .6rem .7rem .5rem; }
  .tab__name { font-size: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tab, .tab.is-active { transition: none; transform: none; }
}