/* GTA6 RP: drizzle to sunshine.
   You sit in a right-hand-drive car. The intro is UK rain on the windscreen;
   the wipers clear it to Leonida. The page below is one day there, morning to
   night, with the car's dashboard fixed along the bottom. */

/* ------------------------------------------------------------------ fonts */
@font-face {
  font-family: "Anybody";
  src: url("../fonts/anybody-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-latin-wght-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

/* ----------------------------------------------------------------- tokens */
:root {
  --ink: #10202c;            /* the logo's ink; text on light sky */
  --chalk: #f3f6fa;          /* text after sunset */
  --sun: #ffc73a;            /* the sun in the 6 */
  --sun-deep: #f0a81a;
  --dash: #121820;           /* dashboard plastic */
  --dash-edge: #262e39;
  --lcd: #ffb347;            /* radio display amber */
  --needle: #ff4b3a;

  /* One day in Leonida, top to bottom. */
  --morning: #d9eeff;
  --noon: #f2faff;
  --late: #ffd27d;
  --golden: #ff9e57;
  --sunset: #d9675a;
  --dusk: #4f4a83;
  --evening: #273160;
  --night: #0e1424;

  --display: "Anybody", "Arial Narrow", system-ui, sans-serif;
  --text: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;

  --dash-h: 64px;
  --gutter: clamp(18px, 5vw, 72px);
  --max: 1180px;
}

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

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 16px;
  scroll-padding-bottom: calc(var(--dash-h) + 24px);
}

body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font: 400 1.0625rem/1.55 var(--text);
  -webkit-font-smoothing: antialiased;
}

.is-intro body { overflow: hidden; }

[hidden] { display: none !important; }
img, svg, canvas { display: block; max-width: 100%; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button, .btn, .chip, .disc, .dash a { touch-action: manipulation; }

:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 3px;
  border-radius: 6px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -80px;
  left: 16px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--sun);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 16px; }

/* ------------------------------------------------------------------ logo */
.logo { width: 100%; height: auto; overflow: visible; }
.logo__ink { fill: var(--ink); }
.logo__sun { fill: var(--sun); }

/* ----------------------------------------------------------------- intro */
.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  background: #0d1117;
  transition: opacity 0.8s ease;
}
.is-intro .intro { display: block; }
.is-opened .intro { opacity: 0; pointer-events: none; }
.intro__glass {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.intro__skip {
  position: absolute;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(var(--dash-h) + 16px);
  z-index: 3;
  padding: 8px 14px;
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: 999px;
  background: rgb(10 14 20 / 0.55);
  color: rgb(255 255 255 / 0.85);
  font-size: 0.875rem;
  cursor: pointer;
}
.intro__skip:hover { background: rgb(10 14 20 / 0.85); color: #fff; }
.is-wiping .intro__skip { opacity: 0; pointer-events: none; transition: opacity 0.3s; }

/* The page behind the intro stays rendered; only the brand logo rises above
   the glass when it lifts off the sign. */
.is-intro .topbar__cta,
.is-intro .hero__copy { opacity: 0; }
.is-handoff .topbar { z-index: 130; }
.is-handoff .logo__ink { fill: var(--chalk); }
.is-handoff [data-brand-logo] { filter: drop-shadow(0 0 12px rgb(170 200 255 / 0.8)); }
.is-flying [data-brand-logo] {
  filter: drop-shadow(0 0 0 rgb(170 200 255 / 0));
  transition: transform 0.95s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.95s ease;
}
.is-opened .topbar__cta,
.is-opened .hero__copy { animation: haze 0.9s 0.25s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

/* Heat haze settling: the hero copy comes into focus once the sun is out. */
@keyframes haze {
  from { opacity: 0; filter: blur(10px); transform: translateY(8px) scaleY(1.05); }
  to { opacity: 1; filter: blur(0); transform: none; }
}

/* ---------------------------------------------------------------- wipers */
.wipers {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.wiper__arm { fill: #1b2129; }
.wiper__blade { fill: #0b0e12; }
.wiper__spine { fill: #2e353f; }
.wiper__cap { fill: #20262f; stroke: #39414c; stroke-width: 4; }

/* ----------------------------------------------------------------- cabin */
.cabin {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.cabin__pillar {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(26px, 6vw, 96px);
  background: linear-gradient(90deg, #07090c, #161b22 70%, #232a33);
}
.cabin__pillar--left { left: 0; clip-path: polygon(0 0, 100% 0, 34% 100%, 0 100%); }
.cabin__pillar--right {
  right: 0;
  transform: scaleX(-1);
  clip-path: polygon(0 0, 100% 0, 34% 100%, 0 100%);
}
.cabin__roof {
  position: absolute;
  inset: 0 0 auto;
  height: clamp(10px, 2.2vh, 22px);
  background: linear-gradient(#05070a, #12171e);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.cabin__mirror {
  position: absolute;
  top: clamp(10px, 2.2vh, 22px);
  left: 50%;
  width: clamp(120px, 15vw, 210px);
  aspect-ratio: 3.4;
  padding: 5px;
  border-radius: 12px 12px 20px 20px;
  background: #11161c;
  box-shadow: 0 10px 24px rgb(0 0 0 / 0.28);
  transform: translateX(-50%);
}
.cabin__mirror::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 12px;
  height: clamp(4px, 1vh, 12px);
  background: #0c1015;
  transform: translateX(-50%);
}
.cabin__mirror-view {
  width: 100%;
  height: 100%;
  border-radius: 8px 8px 15px 15px;
}
.cabin__freshener {
  position: absolute;
  top: calc(clamp(10px, 2.2vh, 22px) + clamp(120px, 15vw, 210px) / 3.4 + 4px);
  left: calc(50% + clamp(120px, 15vw, 210px) * 0.28);
  width: clamp(22px, 2.6vw, 34px);
  transform-origin: 50% 0;
  animation: swing 5.2s ease-in-out infinite alternate;
}
.cabin__string { fill: none; stroke: #e9e2cf; stroke-width: 1.5; }
.cabin__card { fill: #fff4dc; stroke: #d9c39a; stroke-width: 1.2; }
.cabin__palm { fill: #3a1d3c; }
@keyframes swing {
  from { rotate: -7deg; }
  to { rotate: 6deg; }
}
.cabin--intro .cabin__roof { z-index: 1; }

/* ------------------------------------------------------------------ hero */
.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  color: var(--chalk);
  background: #4fa8ee;
}
.hero__scene {
  position: absolute;
  inset: 0;
}
.hero__layer {
  position: absolute;
  inset: -2%;
  width: 104%;
  height: 104%;
  will-change: transform;
}
.hero__glare {
  position: absolute;
  left: var(--glare-x, 72%);
  top: var(--glare-y, 17%);
  width: 34vmin;
  height: 34vmin;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 251 230 / 0.55), rgb(255 251 230 / 0) 62%);
  transform: translate(-50%, -50%);
  animation: glare 7s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes glare {
  from { opacity: 0.65; scale: 0.92; }
  to { opacity: 1; scale: 1.06; }
}
.hero::after {
  /* A little shade behind the copy, like the top tint strip of a windscreen. */
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 46%;
  background: linear-gradient(180deg, rgb(10 50 104 / 0.42), rgb(10 50 104 / 0));
  pointer-events: none;
}

.topbar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: calc(clamp(10px, 2.2vh, 22px) + 18px) calc(clamp(26px, 6vw, 96px) + 10px) 0;
}
.brand {
  display: block;
  width: clamp(150px, 19vw, 260px);
  border-radius: 6px;
}
.brand .logo__ink { fill: var(--chalk); }
.topbar__cta {
  padding: 9px 16px;
  border-radius: 12px;
  background: rgb(16 32 44 / 0.55);
  color: var(--chalk);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
}
.topbar__cta:hover { background: var(--ink); }

.hero__copy {
  position: absolute;
  z-index: 3;
  left: calc(clamp(26px, 6vw, 96px) + 10px);
  top: clamp(110px, 21vh, 210px);
  width: min(820px, calc(100% - 2 * clamp(26px, 6vw, 96px) - 20px));
}
.hero__title {
  font: 860 clamp(2.2rem, 4.6vw, 4.2rem)/0.95 var(--display);
  font-stretch: 112%;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 26px rgb(6 38 84 / 0.35);
  text-wrap: balance;
}
.hero__title-line { display: block; color: var(--sun); }
.hero__lede {
  margin-top: 18px;
  max-width: 34ch;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  font-weight: 600;
  text-shadow: 0 1px 12px rgb(6 38 84 / 0.45);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 2px solid transparent;
  border-radius: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.btn--sun { background: var(--sun); color: var(--ink); }
.btn--sun:hover { background: #ffd666; }
.btn--line { border-color: rgb(243 246 250 / 0.85); background: rgb(10 30 52 / 0.22); color: var(--chalk); }
.btn--line:hover { background: rgb(243 246 250 / 0.14); }
.btn--ink { background: var(--ink); color: var(--chalk); }
.btn--ink:hover { background: #1d3446; }
.btn:active { translate: 0 1px; }

/* -------------------------------------------------------------- the sky */
/* Palm shade over the daylight sections, as if parked under palms. One fixed
   layer above the bands; site.js sets its strength and drift from scroll. */
.sky {
  position: fixed;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
.sky__shade {
  position: absolute;
  inset: -6% -10%;
  background: var(--gobo, none) center / cover no-repeat;
  opacity: var(--shade-o, 0);
  translate: var(--shade-x, 0px) 0;
  transform-origin: 50% 0;
  animation: sway 14s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
@keyframes sway {
  from { rotate: -1.2deg; }
  to { rotate: 1.4deg; }
}

/* ----------------------------------------------------------------- bands */
.day,
.band { position: relative; }
.band {
  z-index: 1;
  padding: clamp(64px, 10vh, 120px) var(--gutter);
  overflow: hidden;
}
.band__inner {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
}
.band__title {
  font: 860 clamp(2.2rem, 5.4vw, 4.4rem)/0.95 var(--display);
  font-stretch: 125%;
  letter-spacing: -0.01em;
}
.band__lede {
  max-width: 44ch;
  margin-top: 16px;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
}

.band--morning { background: linear-gradient(var(--morning), var(--noon)); }
.band--noon { background: linear-gradient(var(--noon), var(--late)); }
.band--golden { background: linear-gradient(var(--late), var(--golden) 60%, var(--sunset)); }
.band--dusk { background: linear-gradient(var(--sunset), var(--dusk) 30%, var(--evening)); color: var(--chalk); }
.band--night { background: linear-gradient(var(--evening), var(--night) 40%); color: var(--chalk); }

/* ---------------------------------------------------------------- the city */
.city {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 24px 48px;
}
.city .band__title { grid-column: 1; }
.city .band__lede { grid-column: 1; }
.city__points {
  grid-column: 2;
  grid-row: 1 / span 3;
  display: grid;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  align-self: center;
}
.city__point {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  column-gap: 16px;
}
.city__icon {
  grid-row: span 2;
  width: 46px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.city__point h3 { font: 800 1.35rem/1.1 var(--display); font-stretch: 115%; }
.city__point p { margin-top: 4px; }

/* -------------------------------------------------------------- the roles */
.screen {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(14px, 2.4vw, 34px);
  margin-top: clamp(40px, 6vh, 64px);
  padding: clamp(26px, 4vw, 44px) clamp(12px, 3vw, 40px) calc(clamp(26px, 4vw, 44px) + 50px);
  border-radius: 40px 40px 18px 18px;
  /* The bottom corner of a windscreen: tinted glass, a sun streak, and the
     black ceramic frit that breaks up into ever smaller dots. */
  --frit: #121821;
  background:
    radial-gradient(circle, var(--frit) 2.9px, transparent 3.3px) left 0 bottom 16px / 8px 8px repeat-x,
    radial-gradient(circle, var(--frit) 2.4px, transparent 2.8px) left 4px bottom 24px / 8px 8px repeat-x,
    radial-gradient(circle, var(--frit) 1.9px, transparent 2.3px) left 0 bottom 32px / 8px 8px repeat-x,
    radial-gradient(circle, var(--frit) 1.4px, transparent 1.8px) left 4px bottom 40px / 8px 8px repeat-x,
    radial-gradient(circle, var(--frit) 0.95px, transparent 1.35px) left 0 bottom 48px / 8px 8px repeat-x,
    radial-gradient(circle, var(--frit) 0.55px, transparent 0.95px) left 4px bottom 56px / 8px 8px repeat-x,
    linear-gradient(var(--frit), var(--frit)) left 0 bottom 0 / 100% 18px no-repeat,
    linear-gradient(115deg, rgb(255 255 255 / 0) 30%, rgb(255 255 255 / 0.55) 38%, rgb(255 255 255 / 0) 46%),
    linear-gradient(180deg, rgb(178 222 248 / 0.55), rgb(220 242 255 / 0.35));
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.8);
}
.disc {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  width: clamp(124px, 15vw, 172px);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: center;
}
.disc__art {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: drop-shadow(0 14px 14px rgb(16 32 44 / 0.22)) saturate(0.55);
  opacity: 0.85;
  translate: 0 -6px;
  transition: filter 0.3s, opacity 0.3s, translate 0.35s cubic-bezier(0.3, 1.4, 0.4, 1);
}
.disc__name { font: 800 1.15rem/1.1 var(--display); font-stretch: 112%; margin-top: 8px; }
.disc:hover .disc__art { translate: 0 -10px; }
.disc[aria-pressed="true"] .disc__art {
  filter: drop-shadow(0 2px 2px rgb(16 32 44 / 0.3)) saturate(1);
  opacity: 1;
  translate: 0 0;
}
.disc[aria-pressed="true"] .disc__name::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-left: 0.35em;
  border-radius: 50%;
  background: var(--sun-deep);
  vertical-align: 0.12em;
}

/* ---------------------------------------------------------------- the form */
.join {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 40px clamp(32px, 6vw, 96px);
  align-items: start;
}
.join__privacy { margin-top: 22px; max-width: 46ch; font-size: 0.9375rem; }
.form,
.pass {
  padding: clamp(22px, 3vw, 34px);
  border-radius: 26px;
  background: rgb(255 255 255 / 0.88);
  box-shadow: 0 30px 60px -32px rgb(122 50 10 / 0.55);
}
.field { margin: 0 0 18px; padding: 0; border: 0; min-width: 0; }
.field__label {
  display: block;
  margin-bottom: 6px;
  padding: 0;
  font-weight: 700;
}
.field__hint { font-weight: 400; opacity: 0.75; }
.field__input {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 2px solid rgb(16 32 44 / 0.25);
  border-radius: 12px;
  background: #fff;
  font-size: 1.0625rem;
}
.field__input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgb(255 199 58 / 0.55); }
.field__input[aria-invalid="true"] { border-color: #b3261e; }
.field__error { margin-top: 6px; color: #9c1f17; font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.chip span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 2px solid rgb(16 32 44 / 0.25);
  border-radius: 999px;
  font-weight: 600;
}
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--chalk); }
.chip input:focus-visible + span { outline: 3px solid var(--sun-deep); outline-offset: 2px; }
.check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
  cursor: pointer;
}
.check input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  accent-color: var(--ink);
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__send { width: 100%; margin-top: 6px; }
.form__send[aria-busy="true"] { cursor: progress; opacity: 0.8; }
.form__status { margin-top: 12px; font-weight: 700; }
.form__status:empty { display: none; }

.pass {
  display: grid;
  grid-template-columns: minmax(120px, 200px) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}
.pass__disc { width: 100%; aspect-ratio: 1; animation: stick 0.7s cubic-bezier(0.3, 1.5, 0.4, 1) both; }
.pass__title { font: 860 clamp(1.6rem, 3vw, 2.2rem)/1 var(--display); font-stretch: 118%; }
.pass__number { margin: 10px 0 18px; font-size: 1.125rem; }
@keyframes stick {
  from { opacity: 0; scale: 1.2; }
  to { opacity: 1; scale: 1; }
}

/* ----------------------------------------------------------------- the FAQ */
.faq__list { margin-top: clamp(30px, 5vh, 48px); max-width: 760px; }
.qa { border-top: 1px solid rgb(243 246 250 / 0.22); }
.qa:last-child { border-bottom: 1px solid rgb(243 246 250 / 0.22); }
.qa summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 2px;
  font: 700 1.2rem/1.25 var(--display);
  font-stretch: 108%;
  cursor: pointer;
  list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  rotate: 45deg;
  translate: 0 -4px;
  transition: rotate 0.25s ease;
}
.qa[open] summary::after { rotate: 225deg; translate: 0 3px; }
.qa > p { padding: 0 2px 20px; max-width: 60ch; color: rgb(243 246 250 / 0.88); }
.leave { padding: 0 2px 22px; }
.leave__row { display: flex; gap: 10px; flex-wrap: wrap; }
.leave .field__input { flex: 1 1 220px; background: rgb(255 255 255 / 0.95); color: var(--ink); }

/* ---------------------------------------------------------------- the night */
.band--night { padding-top: clamp(40px, 8vh, 90px); padding-bottom: calc(var(--dash-h) + 70px); }
/* Sodium streetlights on the road home; one of them is on the blink. */
.lamps {
  width: 100%;
  max-width: var(--max);
  height: auto;
  margin: 0 auto clamp(28px, 5vh, 56px);
  overflow: visible;
}
.lamp--blink { animation: blink 7s steps(1) infinite; }
@keyframes blink {
  0%, 61%, 63.5%, 66%, 100% { opacity: 1; }
  62%, 64.5% { opacity: 0.15; }
  65% { opacity: 0.6; }
}
.footer__line {
  font: 860 clamp(1.9rem, 4.4vw, 3.4rem)/1 var(--display);
  font-stretch: 125%;
}
.footer__small { max-width: 70ch; margin-top: 16px; font-size: 0.875rem; color: rgb(243 246 250 / 0.72); }

/* -------------------------------------------------------------- the dash */
.dash {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 110;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(10px, 2vw, 28px);
  height: calc(var(--dash-h) + env(safe-area-inset-bottom));
  padding: 0 max(14px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(14px, env(safe-area-inset-left));
  background: linear-gradient(180deg, #1c232d, var(--dash) 30%);
  border-top: 1px solid #2f3946;
  border-radius: 22px 22px 0 0;
  color: var(--chalk);
  box-shadow: 0 -12px 30px rgb(0 0 0 / 0.25);
}

.radio {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.radio__display {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  padding: 6px 12px;
  border-radius: 8px;
  background: #0a0d10;
  box-shadow: inset 0 0 0 1px #1d252f;
  color: var(--lcd);
  font: 700 0.9375rem/1.2 var(--display);
  font-stretch: 90%;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 10px rgb(255 179 71 / 0.45);
  white-space: nowrap;
}
.radio__freq { font-size: 1.05rem; }
.radio__name { overflow: hidden; text-overflow: ellipsis; }
.radio__dial {
  position: relative;
  height: 44px;
  border-radius: 8px;
  background:
    repeating-linear-gradient(90deg, rgb(243 246 250 / 0.28) 0 1px, transparent 1px 10px) left 0 bottom 8px / 100% 8px no-repeat,
    repeating-linear-gradient(90deg, rgb(243 246 250 / 0.5) 0 1px, transparent 1px 50px) left 0 bottom 8px / 100% 14px no-repeat,
    #0a0d10;
  box-shadow: inset 0 0 0 1px #1d252f;
  cursor: ew-resize;
  touch-action: none;
}
.radio__needle {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--needle);
  box-shadow: 0 0 10px rgb(255 75 58 / 0.8);
  transform: translateX(var(--needle-x, 0px));
}
.radio__stations { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.radio__stations li { position: absolute; top: 4px; left: var(--at); transform: translateX(-50%); }
.radio__stations a {
  display: block;
  padding: 2px 6px;
  border-radius: 5px;
  color: rgb(243 246 250 / 0.66);
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.radio__stations a:hover,
.radio__stations a[aria-current="true"] { color: var(--lcd); }
.radio.is-tuning .radio__display { animation: static 0.25s steps(3) 1; }
.radio.is-locking .radio__needle { transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.radio.is-locking .radio__display { animation: static 0.3s steps(3) 2; }
@keyframes static {
  50% { opacity: 0.45; filter: blur(1px); }
}

.dash__clock {
  display: grid;
  gap: 2px;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.dash__clock abbr { text-decoration: none; opacity: 0.7; font-weight: 700; }
.dash__clock time { font-weight: 700; }

/* --------------------------------------------------------------- the rain */
/* On the windscreen up top: over the view, under the cabin and the copy. */
.rain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.rain canvas { display: block; width: 100%; height: 100%; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 960px) {
  .city,
  .join { grid-template-columns: minmax(0, 1fr); }
  .city__points { grid-column: 1; grid-row: auto; margin-top: 16px; }
  .pass { grid-template-columns: 120px minmax(0, 1fr); }
}

@media (max-width: 720px) {
  :root { --dash-h: 58px; }
  .radio { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .radio__display { justify-self: start; padding: 2px 8px; font-size: 0.8125rem; }
  .radio__dial { height: 26px; }
  .radio__stations a { font-size: 0; width: 24px; height: 26px; padding: 0; }
  .radio__stations a::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    margin: 10px auto 0;
    border-radius: 50%;
    background: rgb(243 246 250 / 0.5);
  }
  .radio__stations a[aria-current="true"]::after { background: var(--lcd); }
  .radio__stations li { top: 0; }
  .dash__clock span + span { display: none; }
  .hero__copy { top: clamp(96px, 15vh, 150px); }
  .hero__actions .btn { flex: 1 1 auto; }
  .cabin__pillar { width: 18px; }
  .disc { width: calc(50% - 12px); max-width: 170px; }
  .topbar { padding-left: 24px; padding-right: 24px; }
  .hero__copy { left: 24px; width: calc(100% - 48px); }
  /* The hero has its own big button; up top it would crowd the mirror. */
  .topbar__cta { display: none; }
  .hero::after {
    height: 72%;
    background: linear-gradient(180deg, rgb(10 50 104 / 0.5), rgb(10 50 104 / 0.38) 62%, rgb(10 50 104 / 0));
  }
  .hero__lede { text-shadow: 0 1px 3px rgb(6 30 64 / 0.6), 0 1px 14px rgb(6 38 84 / 0.6); }
}

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion) { scroll-behavior: auto; }
  html:not(.force-motion) *,
  html:not(.force-motion) *::before,
  html:not(.force-motion) *::after {
    animation: none !important;
    transition: none !important;
  }
}