/* votu.one: The Lit Map. Shared by / and /no/. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/fonts/schibsted-grotesk.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/fonts/schibsted-grotesk-italic.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}

/* The camera's zoom, registered so pins can counter-scale in step with it. */
@property --z {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

:root {
  --ground: #EEF0EB;
  --surface: #FAFBF8;
  --water-ink: #5F7A86;
  --ink: #0A0A0C;
  --ink-2: #3B3F42;
  --ink-3: #5B6064;
  --line: rgba(10, 10, 12, 0.10);
  --line-2: rgba(10, 10, 12, 0.18);
  --g-from: #00A81D;
  --g-to: #2BF54E;
  --g-ink: #04210B;
  --g-deep: #007A17;
  --ghost: #858B84;
  --glass: rgba(250, 251, 248, 0.74);
  --glass-edge: rgba(255, 255, 255, 0.6);
  --track: rgba(10, 10, 12, 0.07);
  --place: rgba(10, 10, 12, 0.14);
  --place-water: rgba(79, 108, 120, 0.55);
  --focus: var(--g-deep);
  --danger: #A3221B;
  --accent-text: var(--g-deep);
  --shadow: 0 16px 36px -16px rgba(10, 10, 12, 0.30), 0 2px 6px rgba(10, 10, 12, 0.06);
  --shadow-sm: 0 6px 14px -6px rgba(10, 10, 12, 0.22), 0 1px 2px rgba(10, 10, 12, 0.06);
  --font: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --fly: 1.6s;
  --pad: clamp(16px, 5vw, 72px);
  --radius: 22px;
  color-scheme: light;
}

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

html {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(10, 10, 12, 0.32) var(--ground);
}

body {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01" 0;
}

::selection { background: var(--g-to); color: var(--ink); }
input { caret-color: var(--g-deep); }

h1, h2, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: fixed; left: 12px; top: 12px; z-index: 50;
  padding: 10px 14px; border-radius: 12px;
  background: var(--ink); color: var(--surface); font-weight: 700; text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease);
}
.skip:focus-visible { transform: none; }

/* ---------- the stage: Oslo, drawn once, moved by a camera ---------- */

.stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--ground);
}

.world {
  position: absolute;
  left: 0;
  top: 0;
  width: 1875px;
  height: 1690px;
  transform-origin: 0 0;
  transition: transform var(--fly) var(--ease), --z var(--fly) var(--ease);
}
.world.is-still { transition: none; }

.map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
/* Street zoom: buildings and finer streets fade in when the camera is close. */
.map-detail {
  position: absolute;
  left: 640px;
  top: 380px;
  width: 640px;
  height: 680px;
  display: block;
  opacity: 0;
  transition: opacity 0.9s ease;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%), linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%), linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-composite: intersect;
  user-select: none;
  -webkit-user-drag: none;
}
.world.is-close .map-detail[src] { opacity: 1; transition-delay: 0.5s; }
/* Day and night maps are stacked; night fades in over day. */
.map.is-night { opacity: 0; transition: opacity 0.8s ease; }
.world.is-close .map-detail.is-night { opacity: 0; }

/* Map lettering: districts are the page's quietest type layer. */
.place {
  position: absolute;
  left: calc(var(--x) * 1px);
  top: calc(var(--y) * 1px);
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--place);
  white-space: nowrap;
  pointer-events: none;
  /* Cartographic halo: the ground knocks the streets out behind the lettering. */
  -webkit-text-stroke: 7px var(--ground);
  paint-order: stroke fill;
  transition: opacity 0.4s ease;
}
.place.is-hidden { opacity: 0; }
.place.water {
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--place-water);
}
.place.river { font-size: 17px; -webkit-text-stroke-width: 4px; }

/* Scrim that lets the hero headline sit on the map. */
.scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, var(--ground) 0%, color-mix(in srgb, var(--ground) 90%, transparent) 30%, color-mix(in srgb, var(--ground) 0%, transparent) 56%);
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}
[data-frame="hero"] .scrim { opacity: 1; }

/* ---------- pins: the app's green V, plus designed absence ---------- */

.pin {
  position: absolute;
  left: calc(var(--x) * 1px);
  top: calc(var(--y) * 1px);
  width: 0;
  height: 0;
  z-index: 2;
}
.pin[data-state="lit"] { z-index: 4; }

/* Keeps the pin a constant screen size while the map zooms. */
.pin-body {
  position: absolute;
  left: 0;
  top: 0;
  transform: scale(calc(1 / var(--z)));
  transform-origin: 0 0;
}

.pin-head {
  position: absolute;
  left: -17px;
  top: -44px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--g-to), var(--g-from));
  box-shadow: 0 3px 8px rgba(10, 10, 12, 0.26);
  transform-origin: 50% 130%;
  transition: transform 0.6s var(--ease) var(--d, 0ms), background 0.4s ease var(--d, 0ms), box-shadow 0.4s ease var(--d, 0ms), opacity 0.4s ease var(--d, 0ms);
}
.pin-head::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 11px;
  height: 11px;
  background: var(--g-from);
  border-radius: 0 0 3px 0;
  transform: translateX(-50%) rotate(45deg);
  z-index: -1;
  transition: background 0.4s ease var(--d, 0ms), opacity 0.4s ease var(--d, 0ms);
}
.pin-head svg { width: 17px; height: auto; display: block; margin-top: 1px; }
.pin-head svg * { fill: #FFFFFF; transition: fill 0.4s ease var(--d, 0ms); }

/* The live pulse, the same breath the app's pins take. */
.pin-ring {
  position: absolute;
  left: -17px;
  top: -44px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--g-from);
  opacity: 0;
  pointer-events: none;
}
.pin[data-state="lit"] .pin-ring { animation: pulse 2.8s var(--ease) calc(var(--d, 0ms) + 600ms) infinite; }
@keyframes pulse {
  0% { opacity: 0.7; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(2.3); }
}

/* Not live yet: a dashed empty cell, drawn as deliberately as the lit pin. */
.pin[data-state="ghost"] .pin-head {
  background: color-mix(in srgb, var(--ground) 86%, transparent);
  box-shadow: inset 0 0 0 1.5px var(--ghost);
  transform: scale(0.72);
}
.pin[data-state="ghost"] .pin-head::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px dashed var(--ghost);
  background: var(--ground);
}
.pin[data-state="ghost"] .pin-head::after { opacity: 0; }
.pin[data-state="ghost"] .pin-head svg { position: relative; }
.pin[data-state="ghost"] .pin-head svg * { fill: var(--ghost); }

/* After a set ends it leaves a hollow ring, the way Music Finds keeps your night. */
.pin[data-state="trace"] .pin-head {
  transform: translateY(30px) scale(0.36);
  background: transparent;
  box-shadow: inset 0 0 0 6px var(--g-from);
}
.pin[data-state="trace"] .pin-head::before { display: none; }
.pin[data-state="trace"] .pin-head::after { opacity: 0; }
.pin[data-state="trace"] .pin-head svg * { fill: transparent; }

.pin[data-state="off"] .pin-head { opacity: 0; transform: translateY(-18px) scale(0.6); }

/* Song-tag pin: a neutral badge with a dotted green ring, as in the app. */
.pin.is-tag .pin-head {
  background: var(--surface);
  box-shadow: 0 3px 8px rgba(10, 10, 12, 0.22), inset 0 0 0 2px var(--surface);
}
.pin.is-tag .pin-head::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2.5px dotted var(--g-from);
}
.pin.is-tag .pin-head::after { background: var(--surface); }
.pin.is-tag .pin-head svg { width: 15px; }
.pin.is-tag .pin-head svg * { fill: var(--ink); }
.pin.is-tag[data-state="trace"] .pin-head { background: transparent; }

/* Name tags: every lit pin is numbered and named, never an anonymous dot. */
.pin-tag {
  position: absolute;
  left: 23px;
  top: -46px;
  display: grid;
  gap: 1px;
  padding: 6px 11px 7px 8px;
  white-space: nowrap;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  font-size: 13px;
  line-height: 1.25;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.35s ease, transform 0.5s var(--ease);
  pointer-events: none;
}
.pin[data-state="lit"] .pin-tag {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--d, 0ms) + 250ms);
}
.pin-name { display: flex; align-items: center; gap: 7px; font-weight: 700; }
.ex {
  padding: 1px 6px 2px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  color: var(--ink-3);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.pin-status { color: var(--ink-3); }
.pin-status b { color: var(--accent-text); font-weight: 700; }

/* Callouts: the example at work, attached to its pin for one frame. */
.callout {
  position: absolute;
  left: 23px;
  top: 4px;
  width: 256px;
  padding: 14px 16px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  font-size: 14px;
  line-height: 1.4;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.6s var(--ease), visibility 0s linear 0.35s;
}
.callout.is-shown {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.4s ease 0.9s, transform 0.7s var(--ease) 0.9s, visibility 0s;
}
.callout-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.callout-title { font-weight: 800; font-size: 15px; letter-spacing: -0.01em; }
.callout-meta { color: var(--ink-3); }
.callout-rows { display: grid; gap: 7px; }
.callout-rows li { display: flex; align-items: baseline; gap: 10px; }
.callout-rows .k { flex: 0 0 auto; width: 18px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.callout-rows .v { flex: 1; }
.callout-rows .pts { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: 13px; }
.callout-rows li:first-child .v { font-weight: 700; }
.meter { margin-top: 12px; display: grid; gap: 6px; }
.meter-row { display: flex; justify-content: space-between; color: var(--ink-3); font-size: 13px; }
.meter-row b { color: var(--ink); }
.meter-bar { height: 6px; border-radius: 99px; background: var(--track); overflow: hidden; }
.meter-bar i {
  display: block;
  height: 100%;
  width: var(--v);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--g-from), var(--g-to));
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.2s var(--ease) 1.3s;
}
.callout.is-shown .meter-bar i { transform: scaleX(1); }
.notice { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; }
.notice-icon {
  width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center;
  background: #0A0A0C;
  box-shadow: inset 0 0 0 1px var(--line);
}
.notice-icon svg { width: 18px; }
.notice-icon svg * { fill: var(--g-to); }
.notice-app { display: flex; justify-content: space-between; color: var(--ink-3); font-size: 12.5px; }

/* ---------- chrome over the map ---------- */

.bar {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px var(--pad);
  pointer-events: none;
}
.bar > * { pointer-events: auto; }
/* Soft scroll edge under the chrome, as the app's iOS 26 headers do. */
.bar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 96px;
  background: linear-gradient(180deg, var(--ground) 0%, color-mix(in srgb, var(--ground) 72%, transparent) 45%, color-mix(in srgb, var(--ground) 0%, transparent) 100%);
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
}
html:not([data-frame="hero"]):not([data-frame="join"]) .bar::before { opacity: 1; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 0 0 1px var(--glass-edge), var(--shadow-sm);
}

.brand { text-decoration: none; font-weight: 800; font-size: 19px; letter-spacing: -0.02em; padding-left: 13px; }
.brand svg { width: 27px; height: auto; display: block; }
/* The wordmark carries the logo's dot, top right of the last letter. */
.brand .word { position: relative; padding-right: 0.3em; line-height: 1; }
.brand .word::after {
  content: "";
  position: absolute;
  right: 0.02em;
  top: 0.06em;
  width: 0.22em;
  height: 0.22em;
  border-radius: 50%;
  background: currentColor;
}

.bar-end { display: flex; align-items: center; gap: 8px; }
.lang { gap: 2px; padding: 0 8px; font-size: 14px; font-weight: 600; }
.lang a { padding: 10px 7px; text-decoration: none; color: var(--ink-3); border-radius: 8px; }
.lang a[aria-current="page"] { color: var(--ink); }
.lang a:hover { color: var(--ink); }
.lang span { color: var(--line-2); }
.jump {
  gap: 0;
  white-space: nowrap;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  background: var(--ink);
  color: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s var(--ease), background 0.2s ease;
}
.jump:hover { transform: translateY(-1px); background: #1E2024; }
[data-frame="join"] .jump { display: none; }

/* Theme switch: sun by day, moon at night. */
.theme-toggle {
  padding: 0 11px;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
}
.tt-track {
  position: relative;
  display: block;
  width: 40px;
  height: 24px;
  border-radius: 99px;
  background: var(--track);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.tt-knob {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 2px 5px rgba(10, 10, 12, 0.25);
  display: grid;
  place-items: center;
  transition: transform 0.55s var(--ease), background 0.5s ease;
}
.tt-knob svg {
  position: absolute;
  width: 13px;
  height: 13px;
  transition: opacity 0.35s ease, transform 0.55s var(--ease);
}
.tt-sun { color: #0A0A0C; }
.tt-sun * { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.tt-sun circle { fill: currentColor; stroke: none; }
.tt-moon { opacity: 0; transform: rotate(90deg) scale(0.4); }
.tt-moon path { fill: var(--g-to); }
.theme-toggle:hover .tt-knob { box-shadow: 0 3px 8px rgba(10, 10, 12, 0.3); }

/* Switching theme: a circle of the new theme opens from the toggle
   (View Transitions), or a short crossfade where that isn't supported. */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 2; }
html.theme-now *, html.theme-now *::before, html.theme-now *::after { transition: none !important; }
html.theme-fade, html.theme-fade *, html.theme-fade *::before, html.theme-fade *::after {
  transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease, opacity 0.5s ease, fill 0.5s ease !important;
}

/* The map's own legend and clock. */
.hud {
  position: fixed;
  right: var(--pad);
  top: 78px;
  z-index: 21;
  display: grid;
  justify-items: end;
  gap: 8px;
  transition: opacity 0.4s ease;
}
[data-frame="join"] .hud, [data-frame="join"] .osm { opacity: 0; pointer-events: none; }
.clock {
  white-space: nowrap;
  min-height: 36px;
  padding: 0 14px;
  font-size: 13.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.clock::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--g-from);
}
.legend {
  display: flex;
  gap: 14px;
  min-height: 36px;
  padding: 0 14px;
  font-size: 12.5px;
  color: var(--ink-2);
}
.legend li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.key { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.key-lit { background: linear-gradient(150deg, var(--g-to), var(--g-from)); }
.key-ghost { border: 1.5px dashed var(--ghost); }
.key-tag { border: 2px dotted var(--g-from); background: var(--surface); }

.osm {
  position: fixed;
  right: 10px;
  bottom: 8px;
  z-index: 10;
  padding: 3px 8px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--ground) 82%, transparent);
  font-size: 11px;
  color: var(--ink-3);
  transition: opacity 0.4s ease;
}
.osm a { color: inherit; }

/* ---------- the story, scrolling over the map ---------- */

main { position: relative; z-index: 1; }

.frame {
  position: relative;
  min-height: 125vh;
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
}

.hero {
  min-height: 100vh;
  min-height: 100svh;
  padding-top: 110px;
  padding-bottom: 72px;
}
.hero-inner { width: min(640px, 100%); display: grid; gap: 26px; transition: opacity 0.3s ease; }
html:not([data-frame="hero"]) .hero-inner { opacity: 0; }

h1 {
  position: relative;
  isolation: isolate;
  font-size: clamp(3rem, 6.2vw, 5.8rem);
  line-height: 0.96;
  letter-spacing: -0.04em;
  font-weight: 820;
  text-wrap: balance;
  max-width: 11.5ch;
}
h1 mark {
  position: relative;
  display: inline-block;
  line-height: 0.92;
  margin: 0.1em -0.02em 0;
  background: var(--g-to);
  color: #0A0A0C;
  padding: 0 0.1em 0.04em;
  border-radius: 0.12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.lede { font-size: clamp(1.05rem, 1.35vw, 1.2rem); color: var(--ink-2); max-width: 44ch; }

.sheet {
  width: min(452px, 100%);
  display: grid;
  gap: 16px;
  padding: 30px 30px 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.sheet h2 {
  font-size: clamp(2rem, 3vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 800;
  text-wrap: balance;
  margin-bottom: 4px;
}
.sheet p { color: var(--ink-2); }
.sides { display: grid; gap: 12px; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--line); }
.sides div { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: baseline; }
.sides dt { font-weight: 800; font-size: 14px; letter-spacing: -0.005em; }
.sides dd { color: var(--ink-2); font-size: 15.5px; line-height: 1.5; }
.soon {
  display: inline-block;
  padding: 2px 9px 3px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--surface);
  font-size: 12.5px;
  font-weight: 700;
  vertical-align: 0.2em;
  margin-left: 6px;
  letter-spacing: 0;
}

/* Reserved for real app screens; honest until they exist. */
.slot {
  position: absolute;
  right: var(--pad);
  top: 50%;
  width: clamp(170px, 14vw, 216px);
  transform: translateY(-50%);
}
.device {
  position: relative;
  aspect-ratio: 9 / 19.5;
  border-radius: 34px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--line-2), var(--shadow);
  padding: 10px;
}
.device::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 18px;
  width: 30%;
  height: 20px;
  border-radius: 99px;
  background: #0A0A0C;
  transform: translateX(-50%);
}
.device-screen {
  display: block;
  height: 100%;
  border-radius: 25px;
  border: 1.5px dashed var(--line-2);
}
.slot figcaption {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  padding: 24px;
  text-align: center;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-3);
}
.slot figcaption strong { display: block; color: var(--ink-2); font-weight: 700; }

/* Launch order, drawn as lit and unlit cells. */
.route { display: grid; gap: 0; margin-top: 6px; }
.route li {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-weight: 700;
}
.route li:last-child { border-bottom: 1px solid var(--line); }
.route small { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.cell { width: 16px; height: 16px; border-radius: 50%; border: 1.5px dashed var(--ghost); }
.route .is-on .cell { border: 0; background: linear-gradient(150deg, var(--g-to), var(--g-from)); box-shadow: 0 0 0 4px rgba(0, 168, 29, 0.16); }

/* ---------- the waitlist form ---------- */

.join { display: grid; gap: 10px; width: min(520px, 100%); }
.join-panel {
  display: grid;
  gap: 10px;
  padding: 10px;
  border-radius: 24px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 0 0 1px var(--glass-edge), var(--shadow);
}
.roles { border: 0; margin: 0; padding: 0; min-width: 0; }
.roles-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  border-radius: 16px;
  background: var(--track);
}
.roles label { position: relative; }
.roles input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.roles span {
  display: grid;
  place-items: center;
  min-height: 42px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-2);
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
}
.roles label:hover span { color: var(--ink); }
.roles input:checked + span { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.roles input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

.field { display: flex; gap: 8px; }
.field input {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  padding: 0 18px;
  border-radius: 16px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field input::placeholder { color: var(--ink-3); }
.field input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(0, 168, 29, 0.18); }
.field input[aria-invalid="true"] { border-color: var(--danger); }
.field button {
  min-height: 52px;
  padding: 0 22px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(150deg, var(--g-to), var(--g-from));
  color: var(--g-ink);
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s var(--ease), filter 0.2s ease;
}
.field button:hover { transform: translateY(-1px); filter: saturate(1.1) brightness(1.03); }
.field button:active { transform: none; }
.field button:disabled { cursor: progress; filter: grayscale(0.4); opacity: 0.75; transform: none; }

.join-note { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); padding: 0 6px; max-width: 58ch; }
.join-note a { color: var(--ink-2); text-decoration-color: var(--line-2); }
.join-note a:hover { color: var(--ink); text-decoration-color: currentColor; }
/* Bot trap: out of sight and out of the tab order; people never fill it. */
.join-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.join-msg { font-size: 15px; font-weight: 600; padding: 0 6px; min-height: 0; }
.join-msg:empty { display: none; }
.join-msg.is-error { color: var(--danger); }
.join-msg.is-ok {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: 18px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.join-msg.is-ok::before {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--g-from) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.is-joined .join-panel, .is-joined .join-note { display: none; }

/* ---------- the close: the one drenched field ---------- */

.close {
  position: relative;
  z-index: 1;
  padding: clamp(96px, 16vh, 180px) var(--pad) clamp(80px, 12vh, 140px);
  background: linear-gradient(160deg, var(--g-to) 0%, #16D63A 45%, var(--g-from) 100%);
  color: #0A0A0C;
}
/* The city's own linework, drenched in green. */
.close::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/map/oslo.svg") 62% 40% / max(1400px, 110%) auto no-repeat;
  mix-blend-mode: multiply;
  opacity: 0.9;
  pointer-events: none;
}
.close-inner { position: relative; display: grid; gap: 28px; max-width: 1180px; }
.close h2 {
  font-size: clamp(3.2rem, 9vw, 6rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  font-weight: 850;
  max-width: 12ch;
}
.close p.lede { color: var(--g-ink); max-width: 46ch; }
.close .join-panel { background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: 0 18px 40px -18px rgba(4, 33, 11, 0.55); }
.close .field button { background: #0A0A0C; color: #FAFBF8; }
.close .field button:hover { filter: none; background: #1E2024; }
.close .join-note { color: var(--g-ink); }
.close .join-note a { color: var(--g-ink); text-decoration-color: rgba(4, 33, 11, 0.4); }
.close :focus-visible { outline-color: #0A0A0C; }
.close .join-msg.is-error { color: #5C0A05; }

/* ---------- footer ---------- */

.foot {
  position: relative;
  z-index: 1;
  background: #0A0A0C;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: #B9BDB6;
  padding: 28px var(--pad) 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
  font-size: 14px;
}
.foot a { color: #E6E8E3; text-decoration: none; }
.foot a:hover { color: var(--g-to); }
.foot nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.foot nav a { padding: 8px 0; }
.foot :focus-visible { outline-color: var(--g-to); }
.foot .credit { color: #8E938C; font-size: 12.5px; }
.foot .credit a { color: #B9BDB6; text-decoration: underline; text-decoration-color: rgba(185, 189, 182, 0.4); }
.touch { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.touch::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--g-to); }

/* ---------- night: the same city after dark ----------
   Follows the device setting, unless the visitor picked a theme with the
   toggle (html[data-theme]). The two blocks below are the same rules. */

@keyframes breathe-wide {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
@keyframes pool {
  0%, 100% { opacity: 0.72; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1.06); }
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #0B0C0D;
    --surface: #131615;
    --ink: #F1F3EF;
    --ink-2: #B9BEB7;
    --ink-3: #8E948D;
    --line: rgba(255, 255, 255, 0.08);
    --line-2: rgba(255, 255, 255, 0.16);
    --ghost: #5E655F;
    --glass: rgba(19, 22, 21, 0.72);
    --glass-edge: rgba(255, 255, 255, 0.07);
    --track: rgba(255, 255, 255, 0.07);
    --place: rgba(255, 255, 255, 0.085);
    --place-water: rgba(120, 160, 178, 0.42);
    --focus: var(--g-to);
    --danger: #FF8A80;
    --accent-text: var(--g-to);
    --shadow: 0 18px 44px -16px rgba(0, 0, 0, 0.78), 0 2px 6px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 8px 18px -8px rgba(0, 0, 0, 0.72), 0 1px 2px rgba(0, 0, 0, 0.4);
  }
  html:not([data-theme="light"]) { scrollbar-color: rgba(255, 255, 255, 0.28) var(--ground); }
  /* The city breathes a little green where it's playing. */
  html:not([data-theme="light"]) .stage::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(55% 60% at 64% 40%, rgba(43, 245, 78, 0.09) 0%, rgba(0, 168, 29, 0.035) 45%, rgba(0, 168, 29, 0) 72%);
    animation: breathe-wide 8s ease-in-out infinite;
  }
  /* Lit pins pool green light onto the streets around them. */
  html:not([data-theme="light"]) .pin-body::before {
    content: "";
    position: absolute;
    left: -120px;
    top: -150px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(43, 245, 78, 0.28) 0%, rgba(0, 168, 29, 0.11) 38%, rgba(0, 168, 29, 0) 70%);
    opacity: 0;
    transform: scale(0.55);
    transition: opacity 0.8s ease var(--d, 0ms), transform 1.2s var(--ease) var(--d, 0ms);
    pointer-events: none;
  }
  html:not([data-theme="light"]) .pin[data-state="lit"] .pin-body::before {
    opacity: 1;
    transform: scale(1);
    animation: pool 5.5s ease-in-out calc(var(--d, 0ms) + 1.2s) infinite;
  }
  html:not([data-theme="light"]) .pin[data-state="lit"] .pin-head { box-shadow: 0 0 0 1px rgba(43, 245, 78, 0.5), 0 0 24px rgba(43, 245, 78, 0.55), 0 4px 10px rgba(0, 0, 0, 0.55); }
  html:not([data-theme="light"]) .pin-ring { border-color: var(--g-to); box-shadow: 0 0 14px rgba(43, 245, 78, 0.55); }
  html:not([data-theme="light"]) .pin[data-state="trace"] .pin-head { box-shadow: inset 0 0 0 6px var(--g-to), 0 0 18px rgba(43, 245, 78, 0.6); }
  html:not([data-theme="light"]) .pin.is-tag .pin-head {
    background: #1B1F1D;
    box-shadow: 0 0 18px rgba(43, 245, 78, 0.35), 0 3px 8px rgba(0, 0, 0, 0.5), inset 0 0 0 2px #1B1F1D;
  }
  html:not([data-theme="light"]) .pin.is-tag .pin-head::before { border-color: var(--g-to); }
  html:not([data-theme="light"]) .pin.is-tag .pin-head::after { background: #1B1F1D; }
  html:not([data-theme="light"]) .pin.is-tag[data-state="trace"] .pin-head { background: transparent; }
  /* The slab's glow sits under the lettering, never over the line above. */
  html:not([data-theme="light"]) h1 mark::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    box-shadow: 0 0 46px -6px rgba(43, 245, 78, 0.6);
  }
  html:not([data-theme="light"]) .clock::before { background: var(--g-to); box-shadow: 0 0 10px rgba(43, 245, 78, 0.9); }
  html:not([data-theme="light"]) .key-lit { box-shadow: 0 0 8px rgba(43, 245, 78, 0.75); }
  html:not([data-theme="light"]) .key-tag { border-color: var(--g-to); background: #1B1F1D; }
  html:not([data-theme="light"]) .route .is-on .cell { box-shadow: 0 0 0 4px rgba(43, 245, 78, 0.14), 0 0 16px rgba(43, 245, 78, 0.6); }
  html:not([data-theme="light"]) .touch::before { box-shadow: 0 0 8px rgba(43, 245, 78, 0.9); }
  html:not([data-theme="light"]) .jump {
    background: linear-gradient(150deg, var(--g-to), var(--g-from));
    color: var(--g-ink);
    box-shadow: 0 0 24px -4px rgba(43, 245, 78, 0.55), var(--shadow-sm);
  }
  html:not([data-theme="light"]) .jump:hover { background: linear-gradient(150deg, var(--g-to), var(--g-from)); filter: brightness(1.07); }
  html:not([data-theme="light"]) .field input { background: #0F1211; }
  html:not([data-theme="light"]) .field button { box-shadow: 0 0 28px -6px rgba(43, 245, 78, 0.6), var(--shadow-sm); }
  html:not([data-theme="light"]) .field button:hover { filter: brightness(1.08); }
  html:not([data-theme="light"]) .close .field button { box-shadow: var(--shadow-sm); }
  html:not([data-theme="light"]) .roles input:checked + span { background: #252A27; }
  html:not([data-theme="light"]) .soon { background: rgba(43, 245, 78, 0.13); color: var(--g-to); box-shadow: inset 0 0 0 1px rgba(43, 245, 78, 0.35); }
  html:not([data-theme="light"]) .sheet,
  html:not([data-theme="light"]) .pin-tag,
  html:not([data-theme="light"]) .callout { background: linear-gradient(180deg, #171B19 0%, var(--surface) 100%); }
  html:not([data-theme="light"]) .meter-bar i { box-shadow: 0 0 12px rgba(43, 245, 78, 0.6); }
  html:not([data-theme="light"]) .close .join-panel { background: rgba(12, 14, 13, 0.9); }
  /* Night map layers take over from the day ones. */
  html:not([data-theme="light"]) .map.is-night { opacity: 1; }
  html:not([data-theme="light"]) .world.is-close .map-detail.is-day { opacity: 0; }
  html:not([data-theme="light"]) .world.is-close .map-detail.is-night[src] { opacity: 1; }
  html:not([data-theme="light"]) .theme-toggle .tt-track { background: linear-gradient(150deg, var(--g-to), var(--g-from)); box-shadow: 0 0 14px -2px rgba(43, 245, 78, 0.6); }
  html:not([data-theme="light"]) .theme-toggle .tt-knob { transform: translateX(16px); background: #0B0C0D; }
  html:not([data-theme="light"]) .theme-toggle .tt-sun { opacity: 0; transform: rotate(-90deg) scale(0.4); }
  html:not([data-theme="light"]) .theme-toggle .tt-moon { opacity: 1; transform: none; }
}

/* Night chosen by hand, whatever the device says. */
html[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0B0C0D;
  --surface: #131615;
  --ink: #F1F3EF;
  --ink-2: #B9BEB7;
  --ink-3: #8E948D;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.16);
  --ghost: #5E655F;
  --glass: rgba(19, 22, 21, 0.72);
  --glass-edge: rgba(255, 255, 255, 0.07);
  --track: rgba(255, 255, 255, 0.07);
  --place: rgba(255, 255, 255, 0.085);
  --place-water: rgba(120, 160, 178, 0.42);
  --focus: var(--g-to);
  --danger: #FF8A80;
  --accent-text: var(--g-to);
  --shadow: 0 18px 44px -16px rgba(0, 0, 0, 0.78), 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 8px 18px -8px rgba(0, 0, 0, 0.72), 0 1px 2px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] { scrollbar-color: rgba(255, 255, 255, 0.28) var(--ground); }
/* The city breathes a little green where it's playing. */
html[data-theme="dark"] .stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(55% 60% at 64% 40%, rgba(43, 245, 78, 0.09) 0%, rgba(0, 168, 29, 0.035) 45%, rgba(0, 168, 29, 0) 72%);
  animation: breathe-wide 8s ease-in-out infinite;
}
/* Lit pins pool green light onto the streets around them. */
html[data-theme="dark"] .pin-body::before {
  content: "";
  position: absolute;
  left: -120px;
  top: -150px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(43, 245, 78, 0.28) 0%, rgba(0, 168, 29, 0.11) 38%, rgba(0, 168, 29, 0) 70%);
  opacity: 0;
  transform: scale(0.55);
  transition: opacity 0.8s ease var(--d, 0ms), transform 1.2s var(--ease) var(--d, 0ms);
  pointer-events: none;
}
html[data-theme="dark"] .pin[data-state="lit"] .pin-body::before {
  opacity: 1;
  transform: scale(1);
  animation: pool 5.5s ease-in-out calc(var(--d, 0ms) + 1.2s) infinite;
}
html[data-theme="dark"] .pin[data-state="lit"] .pin-head { box-shadow: 0 0 0 1px rgba(43, 245, 78, 0.5), 0 0 24px rgba(43, 245, 78, 0.55), 0 4px 10px rgba(0, 0, 0, 0.55); }
html[data-theme="dark"] .pin-ring { border-color: var(--g-to); box-shadow: 0 0 14px rgba(43, 245, 78, 0.55); }
html[data-theme="dark"] .pin[data-state="trace"] .pin-head { box-shadow: inset 0 0 0 6px var(--g-to), 0 0 18px rgba(43, 245, 78, 0.6); }
html[data-theme="dark"] .pin.is-tag .pin-head {
  background: #1B1F1D;
  box-shadow: 0 0 18px rgba(43, 245, 78, 0.35), 0 3px 8px rgba(0, 0, 0, 0.5), inset 0 0 0 2px #1B1F1D;
}
html[data-theme="dark"] .pin.is-tag .pin-head::before { border-color: var(--g-to); }
html[data-theme="dark"] .pin.is-tag .pin-head::after { background: #1B1F1D; }
html[data-theme="dark"] .pin.is-tag[data-state="trace"] .pin-head { background: transparent; }
/* The slab's glow sits under the lettering, never over the line above. */
html[data-theme="dark"] h1 mark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 0 46px -6px rgba(43, 245, 78, 0.6);
}
html[data-theme="dark"] .clock::before { background: var(--g-to); box-shadow: 0 0 10px rgba(43, 245, 78, 0.9); }
html[data-theme="dark"] .key-lit { box-shadow: 0 0 8px rgba(43, 245, 78, 0.75); }
html[data-theme="dark"] .key-tag { border-color: var(--g-to); background: #1B1F1D; }
html[data-theme="dark"] .route .is-on .cell { box-shadow: 0 0 0 4px rgba(43, 245, 78, 0.14), 0 0 16px rgba(43, 245, 78, 0.6); }
html[data-theme="dark"] .touch::before { box-shadow: 0 0 8px rgba(43, 245, 78, 0.9); }
html[data-theme="dark"] .jump {
  background: linear-gradient(150deg, var(--g-to), var(--g-from));
  color: var(--g-ink);
  box-shadow: 0 0 24px -4px rgba(43, 245, 78, 0.55), var(--shadow-sm);
}
html[data-theme="dark"] .jump:hover { background: linear-gradient(150deg, var(--g-to), var(--g-from)); filter: brightness(1.07); }
html[data-theme="dark"] .field input { background: #0F1211; }
html[data-theme="dark"] .field button { box-shadow: 0 0 28px -6px rgba(43, 245, 78, 0.6), var(--shadow-sm); }
html[data-theme="dark"] .field button:hover { filter: brightness(1.08); }
html[data-theme="dark"] .close .field button { box-shadow: var(--shadow-sm); }
html[data-theme="dark"] .roles input:checked + span { background: #252A27; }
html[data-theme="dark"] .soon { background: rgba(43, 245, 78, 0.13); color: var(--g-to); box-shadow: inset 0 0 0 1px rgba(43, 245, 78, 0.35); }
html[data-theme="dark"] .sheet,
html[data-theme="dark"] .pin-tag,
html[data-theme="dark"] .callout { background: linear-gradient(180deg, #171B19 0%, var(--surface) 100%); }
html[data-theme="dark"] .meter-bar i { box-shadow: 0 0 12px rgba(43, 245, 78, 0.6); }
html[data-theme="dark"] .close .join-panel { background: rgba(12, 14, 13, 0.9); }
/* Night map layers take over from the day ones. */
html[data-theme="dark"] .map.is-night { opacity: 1; }
html[data-theme="dark"] .world.is-close .map-detail.is-day { opacity: 0; }
html[data-theme="dark"] .world.is-close .map-detail.is-night[src] { opacity: 1; }
html[data-theme="dark"] .theme-toggle .tt-track { background: linear-gradient(150deg, var(--g-to), var(--g-from)); box-shadow: 0 0 14px -2px rgba(43, 245, 78, 0.6); }
html[data-theme="dark"] .theme-toggle .tt-knob { transform: translateX(16px); background: #0B0C0D; }
html[data-theme="dark"] .theme-toggle .tt-sun { opacity: 0; transform: rotate(-90deg) scale(0.4); }
html[data-theme="dark"] .theme-toggle .tt-moon { opacity: 1; transform: none; }

/* ---------- responsive ---------- */

@media (max-width: 1180px) {
  .frame-inner { display: grid; gap: 18px; justify-items: start; }
  .slot { position: relative; right: auto; top: auto; transform: none; width: 170px; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .bar { padding: 10px 12px; }
  .bar::before { height: 150px; background: linear-gradient(180deg, var(--ground) 0, var(--ground) 96px, color-mix(in srgb, var(--ground) 0%, transparent) 150px); }
  .osm { z-index: 0; }
  [data-frame="hero"] .osm { opacity: 0; }
  .chip { min-height: 42px; }
  .brand { font-size: 18px; }
  .jump { padding: 0 14px; font-size: 14px; }
  .jump-more { display: none; }
  .bar-end { gap: 6px; }
  .lang { padding: 0 4px; }
  .theme-toggle { padding: 0 9px; }
  .hud { left: 12px; right: 12px; top: 62px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .clock { min-height: 32px; font-size: 12.5px; padding: 0 11px; }
  .legend { min-height: 32px; gap: 10px; padding: 0 11px; font-size: 11.5px; }
  .legend .legend-tag { display: none; }

  .scrim { background: linear-gradient(0deg, var(--ground) 0%, color-mix(in srgb, var(--ground) 94%, transparent) 56%, color-mix(in srgb, var(--ground) 0%, transparent) 70%); }

  .frame { min-height: 135svh; align-items: flex-end; padding: 0 10px 14px; }
  /* Phones: the city owns the top of the first screen, the words the bottom. */
  .hero { min-height: 100svh; padding: 36svh 16px 28px; align-items: flex-start; }
  .hero-inner { gap: 18px; }
  h1 { font-size: clamp(2.6rem, 12vw, 3.6rem); }
  .frame-inner { width: 100%; gap: 12px; }
  .sheet { width: 100%; padding: 24px 20px 24px; border-radius: 26px; }
  .sides div { grid-template-columns: 1fr; gap: 2px; }
  /* Phones: the reserved screen becomes a compact row under the sheet. */
  .slot {
    width: 100%;
    display: grid;
    grid-template-columns: 58px 1fr;
    align-items: center;
    gap: 14px;
    padding: 12px 16px 12px 12px;
    border-radius: 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
  }
  .device { width: 58px; border-radius: 14px; padding: 4px; box-shadow: inset 0 0 0 1.5px var(--line-2); }
  .device::before { top: 7px; height: 6px; }
  .device-screen { border-radius: 10px; }
  .slot figcaption { position: static; display: block; padding: 0; text-align: left; font-size: 14px; }

  .pin-status { display: none; }
  .pin-tag { padding: 5px 10px 5px 7px; }
  .callout { left: -128px; top: 12px; }

  .field { flex-direction: column; }
  .field button { width: 100%; }
  .roles span { font-size: 14.5px; }

  .close h2 { font-size: clamp(3rem, 16vw, 4.4rem); }
  .foot { flex-direction: column; align-items: flex-start; }
}

/* Very narrow phones: the header keeps brand, theme and join; language lives in the footer. */
@media (max-width: 380px) {
  .bar .lang { display: none; }
}

@media (max-width: 760px) and (max-height: 700px) {
  h1 { font-size: clamp(2.3rem, 10.5vw, 3rem); }
  .lede { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .world, .scrim, .pin-head, .pin-head::after, .pin-tag, .callout, .callout.is-shown, .meter-bar i { transition: none !important; }
  .pin-ring { display: none; }
  .stage::after, .pin[data-state="lit"] .pin-body::before { animation: none !important; }
}