/* Douglas Reimagined
   Layout: a town at dusk, shown one full screen at a time. Pictures fill the frame,
   wide capitals name each place like a lit sign, and lamp amber is the only accent:
   it marks whatever is switched on. */

:root {
  color-scheme: dark;

  /* colour: sampled from the skies and lamps in the renderings */
  --night: #0d1430;      /* ground: the sky over Ashley Street after sunset */
  --night-2: #131c40;    /* raised surface */
  --night-3: #1c2757;    /* controls, hover */
  --line: #2b376b;       /* hairlines */
  --dusk: #7d8bc9;       /* periwinkle: quiet marks */
  --haze: #b7bfdf;       /* secondary text */
  --paper: #fff3e3;      /* primary text, a warm white */
  --lamp: #ffc56e;       /* the one accent: anything lit */
  --lamp-hot: #ffe7b8;   /* the core of a light */
  --ember: #ff8257;      /* sunset edge, in glows only */
  --ink: #17122c;        /* text on lamp */
  --sky-plum: #3f2f6e;
  --sky-rose: #b4577a;

  /* map */
  --map-land: #0a1027;
  --map-green: #123a3a;
  --map-reserve: #0f2d38;
  --map-wetland: #10283f;
  --map-cemetery: #15263d;
  --map-pitch: #184844;
  --map-water: #1c3d86;
  --map-water-line: #3460b8;
  --map-campus: #18234f;
  --map-industrial: #201d44;
  --map-retail: #271f4c;
  --map-airfield: #151f45;
  --map-apron: #243066;
  --map-runway: #aab4e4;
  --map-bld: #1f2a5e;
  --map-road-minor: #28356c;
  --map-road-mid: #46569c;
  --map-road-major: #7684cc;
  --map-rail: #8d96c4;
  --map-city: #39467f;
  --map-label: #b7bfdf;
  --map-chip: #1c2757;

  /* type: one family, three widths */
  --font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --wide: 125%;
  --semi: 112%;

  /* layout */
  --gutter: clamp(1rem, 4vw, 3.5rem);
  --max: 90rem;
  --gap: clamp(1rem, 2.4vw, 2.5rem);
  --section: clamp(4.5rem, 10vw, 9.5rem);
  --bar: 4rem;
  --tap: 2.75rem;        /* the smallest control: 44 px, a thumb's width */
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar) + 1rem);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--night);
  color: var(--paper);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.5;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  overflow-wrap: break-word;   /* a word too long for a narrow screen breaks instead of running off it */
}
body.is-locked { overflow: hidden; }

h1, h2, h3, p, figure, dl, dd { margin: 0; }
h1, h2, h3 {
  font-family: var(--font);
  font-weight: 300;
  font-stretch: var(--semi);
  letter-spacing: -0.018em;
  line-height: 1.06;
  text-wrap: balance;
  hyphens: none;
}
p { text-wrap: pretty; }
img { max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
strong { font-weight: 600; }
::selection { background: var(--lamp); color: var(--ink); }
:focus-visible { outline: 2px solid var(--lamp); outline-offset: 3px; }

.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 30rem) {
  .wrap {
    padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
    padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
  }
}

.skip {
  position: fixed; left: 1rem; top: -4rem; z-index: 100;
  padding: 0.7rem 1rem; background: var(--lamp); color: var(--ink);
  font-weight: 600; border-radius: 3px; text-decoration: none;
}
.noscript { margin: 0; padding: calc(var(--bar) + 1rem) max(16px, var(--gutter)) 1rem; background: var(--lamp); color: var(--ink); font-weight: 600; }
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 0.75rem); }

/* ---------- type roles ---------- */
.h-l { font-size: clamp(min(2rem, 10vw), 4.5vw, 4.4rem); overflow-wrap: break-word; line-height: 1.04; letter-spacing: -0.022em; }
.caps {
  text-transform: uppercase; font-stretch: var(--wide); font-weight: 300;
  letter-spacing: 0.012em; line-height: 0.96; overflow-wrap: break-word;
}
.lead { font-size: clamp(1.2rem, 1.75vw, 1.6rem); font-weight: 300; line-height: 1.4; letter-spacing: -0.005em; }
.label {
  font-size: 0.78rem; font-weight: 600; font-stretch: 116%; line-height: 1.35;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.soft { color: var(--haze); }
.prose { display: grid; gap: 1em; max-width: 38rem; }

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3.1rem; padding: 0.75rem 1.5rem;
  border: 1px solid var(--lamp); border-radius: 2px;
  background: var(--lamp); color: var(--ink);
  font: 650 0.78rem/1.15 var(--font); font-stretch: 116%; letter-spacing: 0.13em; text-transform: uppercase;
  text-decoration: none; text-align: center; cursor: pointer; max-width: 100%;
  transition: background-color 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.btn:hover {
  background: var(--lamp-hot); border-color: var(--lamp-hot);
  box-shadow: 0 0 2.4rem color-mix(in srgb, var(--lamp) 55%, transparent);
}
.btn--quiet {
  background: color-mix(in srgb, var(--night) 38%, transparent);
  border-color: color-mix(in srgb, var(--paper) 45%, transparent);
  color: var(--paper);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn--quiet:hover {
  background: color-mix(in srgb, var(--paper) 12%, transparent);
  border-color: var(--paper); box-shadow: none;
}
.btn--small { min-height: var(--tap); padding: 0.55rem 1.05rem; font-size: 0.75rem; }

/* ---------- header ---------- */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s, border-color 0.3s;
}
.top.is-solid, .top.is-open {
  background: color-mix(in srgb, var(--night) 88%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: color-mix(in srgb, var(--line) 70%, transparent);
}
.top__row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: var(--bar); min-width: 0; }
.brand {
  display: inline-flex; align-items: center; gap: 0.75rem; min-width: 0; min-height: var(--tap);
  text-decoration: none; white-space: nowrap;
  font-size: 0.76rem; font-weight: 650; font-stretch: 120%;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.brand span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.brand__mark { width: 1.7rem; height: 1.7rem; flex: none; overflow: visible; }
.brand__mark path { stroke: var(--paper); stroke-width: 1.5; fill: none; opacity: 0.85; }
.brand__mark circle { fill: var(--lamp); }
.nav { display: none; }
.nav a {
  text-decoration: none; white-space: nowrap; opacity: 0.86; transition: opacity 0.2s;
  font-size: 0.75rem; font-weight: 600; font-stretch: 116%; letter-spacing: 0.13em; text-transform: uppercase;
}
.nav a:hover { opacity: 1; }
.menu {
  /* "Menu" and "Close" take the same room, so the name beside the button never moves or gets cut */
  flex: none; min-width: 5.2rem; min-height: var(--tap); padding: 0.4rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--paper) 40%, transparent); border-radius: 2px;
  background: none; cursor: pointer;
  font-size: 0.75rem; font-weight: 650; font-stretch: 116%; letter-spacing: 0.13em; text-transform: uppercase;
}
.top.is-open .nav {
  display: grid; position: absolute; left: 0; right: 0; top: 100%;
  padding: 0.5rem max(16px, env(safe-area-inset-right, 0px)) 1.25rem max(16px, env(safe-area-inset-left, 0px));
  background: color-mix(in srgb, var(--night) 97%, transparent);
  border-bottom: 1px solid var(--line);
}
.top.is-open .nav a { padding: 1rem 0; font-size: 0.85rem; border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
/* The five links sit in the bar only where the name and all of them fit on one line. Below that
   width (tablets, small laptops) the Menu button holds them. */
@media (min-width: 72rem) {
  .nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.6vw, 2.5rem); }
  .menu { display: none; }
}
/* Narrow phones, and any phone with large text: the name first sits closer, then stacks on two
   lines, then gives way to the mark alone. The Menu button always stays on screen. (These widths
   are in rem, so they follow the reader's own text size.) */
@media (max-width: 26rem) {
  .top__row { gap: 0.75rem; }
  .brand { letter-spacing: 0.12em; }
}
@media (max-width: 23.4rem) { .brand { white-space: normal; line-height: 1.25; } }
@media (max-width: 14rem) { .brand span { display: none; } }

/* ---------- hero: the reel ---------- */
.hero {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; align-items: end;
  min-height: 100svh;
  padding-top: calc(var(--bar) + 2rem);
  overflow: clip;
}
.hero__reel { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--night-2); }
.hero__reel img {
  position: absolute; left: 0; top: 0; width: 100%; height: 112.1%; max-width: none;
  object-fit: cover; object-position: var(--focus, 50%) 0;
  opacity: 0; transition: opacity 1.8s ease;
  transform-origin: 50% 35%;
}
.hero__reel img.is-on { opacity: 1; }
.hero__reel::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top,
      var(--night) 0%,
      color-mix(in srgb, var(--night) 88%, transparent) 16%,
      color-mix(in srgb, var(--night) 52%, transparent) 44%,
      transparent 72%),
    linear-gradient(to right, color-mix(in srgb, var(--night) 45%, transparent), transparent 60%),
    linear-gradient(to bottom, color-mix(in srgb, var(--night) 72%, transparent), transparent 22%);
}
.hero__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.1rem, 2.2vw, 2rem); padding-bottom: clamp(1.5rem, 3vw, 2.75rem); }
.sign {
  font-size: clamp(min(2.2rem, 10.1vw), 10.1vw, 10.75rem); overflow-wrap: break-word;
  font-weight: 300; font-stretch: var(--wide);
  text-transform: uppercase; line-height: 0.9; letter-spacing: 0.004em;
  margin-left: -0.045em;
  color: var(--lamp-hot);
  text-shadow:
    0 0 0.012em var(--paper),
    0 0 0.07em color-mix(in srgb, var(--lamp) 80%, transparent),
    0 0 0.36em color-mix(in srgb, var(--ember) 45%, transparent);
}
.sign span { display: block; }
.hero__after { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.hero__lede { max-width: 35rem; font-size: clamp(1.1rem, 1.5vw, 1.35rem); font-weight: 400; line-height: 1.45; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.hero__index {
  display: flex; align-items: flex-start;
  gap: clamp(0.4rem, 1.4vw, 1.5rem);
  padding-bottom: clamp(1.1rem, 2.2vw, 1.9rem);
}
.reel-pause {
  flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
  border: 1px solid color-mix(in srgb, var(--paper) 35%, transparent); border-radius: 50%;
  background: color-mix(in srgb, var(--night) 35%, transparent); cursor: pointer;
  transition: border-color 0.2s;
}
.reel-pause:hover { border-color: var(--paper); }
.reel-pause svg { width: 0.8rem; height: 0.8rem; fill: var(--paper); }
.reel-btn {
  position: relative; flex: 1 1 0; min-width: 0; min-height: 2.75rem; padding: 0.95rem 0 0; border: 0; background: none;
  text-align: left; cursor: pointer; color: color-mix(in srgb, var(--paper) 62%, transparent);
  font-size: 0.75rem; font-weight: 600; font-stretch: 116%; line-height: 1.3;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: color 0.3s;
}
.reel-btn::before, .reel-btn::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; }
.reel-btn::before { right: 0; background: color-mix(in srgb, var(--paper) 26%, transparent); }
.reel-btn::after { width: 0; background: var(--lamp); box-shadow: 0 0 10px var(--lamp); }
.reel-btn:hover { color: var(--paper); }
.reel-btn[aria-current="true"] { color: var(--paper); }
.reel-btn[aria-current="true"]::after { width: 100%; }
.reel-btn span { display: block; white-space: nowrap; }

@media (prefers-reduced-motion: no-preference) {
  .hero__reel img.is-on { animation: drift 10s linear both; }
  .hero.is-playing .reel-btn[aria-current="true"]::after { animation: fill var(--reel, 7s) linear both; }
  .hero.is-wired .sign span { animation: lamp-on 1.5s both; }
  .hero.is-wired .sign span + span { animation-delay: 0.5s; }
  .hero.is-wired .hero__after, .hero.is-wired .hero__index { animation: rise 0.9s 1.2s both; }
}
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.075); } }
@keyframes fill { from { width: 0; } to { width: 100%; } }
@keyframes lamp-on {
  0% { opacity: 0.08; }
  9% { opacity: 0.85; }
  13% { opacity: 0.12; }
  24% { opacity: 1; }
  29% { opacity: 0.3; }
  38%, 100% { opacity: 1; }
}
@keyframes rise { from { opacity: 0; transform: translateY(0.9rem); } }
/* All six names show only where each has room; below that, only the picture on screen is named. */
@media (max-width: 74.99rem) {
  .reel-btn span { visibility: hidden; }
  .reel-btn[aria-current="true"] span { visibility: visible; }
  .reel-btn:nth-last-child(-n+2) span { position: absolute; right: 0; }
}

/* ---------- the opening sequence ---------- */
.intro {
  display: none; position: fixed; inset: 0; z-index: 120; overflow: hidden;
  background: var(--map-land); color: var(--paper);
  transition: opacity 0.9s ease;
}
html.intro-pending .intro, .intro.is-playing { display: block; }
.intro.is-out { opacity: 0; pointer-events: none; }
.intro__shots, .intro__video { position: absolute; inset: 0; opacity: 0; }
.intro__shots.is-on, .intro__video.is-on { opacity: 1; }
.intro__video { z-index: 1; width: 100%; height: 100%; object-fit: cover; background: var(--map-land); transition: opacity 0.9s; }
.intro__video.is-fit { object-fit: contain; }   /* a wide film on an upright phone is shown whole */
.intro[data-step="film"] .intro__bar, .intro[data-step="gate"] .intro__bar { display: none; }
.intro__captions {
  position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 5rem); z-index: 6; translate: -50% 0;
  width: min(92vw, 46rem); text-align: center; text-wrap: balance; white-space: pre-line; pointer-events: none;
  font-size: clamp(1rem, 0.9vw + 0.85rem, 1.5rem); line-height: 1.35; font-weight: 500;
  text-shadow: 0 1px 2px var(--map-land), 0 0 0.5rem var(--map-land), 0 0 1.4rem var(--map-land);
  opacity: 0; transition: opacity 0.2s;
}
.intro__captions.is-on { opacity: 1; }
/* Scene labels say what kind of picture is showing (a photograph, a re-creation, an imagined view).
   The page draws them, so no screen shape can crop them off, on a chip dark enough to read over any frame. */
.intro__scene {
  position: absolute; z-index: 6; left: max(1rem, env(safe-area-inset-left, 0px));
  top: calc(env(safe-area-inset-top, 0px) + 1rem);
  display: grid; gap: 0.25rem; max-width: min(calc(100% - 2rem), 32rem); padding: 0.55rem 0.8rem; border-radius: 2px;
  background: color-mix(in srgb, var(--map-land) 88%, transparent);
  overflow-wrap: anywhere; pointer-events: none;
  opacity: 0; transition: opacity 0.2s;
}
.intro__scene.is-on { opacity: 1; }
.intro__scene span { display: block; }
.intro__tools {
  position: absolute; z-index: 6; left: max(1rem, env(safe-area-inset-left, 0px));
  bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem); display: flex; flex-wrap: wrap; gap: 0.5rem;
  max-width: calc(100% - 7.5rem);
}
.intro__gate {
  position: absolute; inset: 0; z-index: 6; display: grid; place-content: center; justify-items: center; gap: 1.1rem;
  padding: 1.25rem; text-align: center;
  background: color-mix(in srgb, var(--map-land) 62%, transparent);
}
.intro__gate-name { font-size: clamp(min(1.3rem, 6vw), 4.5vw, 3rem); letter-spacing: 0.2em; margin-right: -0.2em; color: var(--lamp-hot); }
.intro__gate-note { font-size: 0.9rem; color: var(--haze); }
.intro__tools[hidden], .intro__tools [hidden], .intro__gate[hidden] { display: none; }
@media (max-width: 40rem) {
  /* the two sound buttons stack on a phone, so the captions sit above both rows */
  .intro__tools { flex-direction: column; align-items: flex-start; }
  .intro__captions { bottom: calc(env(safe-area-inset-bottom, 0px) + 8rem); }
}
.intro__shots { z-index: 2; background: var(--map-land); transition: opacity 0.9s; }
.intro__shots img {
  position: absolute; left: 0; top: 0; width: 100%; height: 112.1%; max-width: none;
  object-fit: cover; object-position: 50% 0; opacity: 0; transform-origin: 50% 40%;
}
.intro__shots img.is-top { opacity: 1; }
.intro__shots::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 45%, color-mix(in srgb, var(--map-land) 70%, transparent) 100%),
    linear-gradient(to top, color-mix(in srgb, var(--map-land) 80%, transparent), transparent 40%);
}
/* the road through time */
.intro__road { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s; }
.intro__road.is-on { opacity: 1; }
.intro__cards { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.tcard { position: absolute; left: 0; top: 0; margin: 0; opacity: 0; transform-origin: 50% 50%; will-change: transform, opacity; }
.tcard__print {
  padding: 0.6vmin; background: var(--paper);
  box-shadow: 0 2vmin 7vmin color-mix(in srgb, var(--map-land) 85%, transparent);
}
.tcard img { display: block; width: 100%; height: auto; }
.tcard figcaption {
  margin-top: 1.3vmin; text-align: center; color: var(--paper);
  font-size: clamp(0.85rem, 1.5vmin + 0.5rem, 1.4rem); line-height: 1.3;
  text-shadow: 0 0 0.5rem var(--map-land), 0 0 1.2rem var(--map-land);
}
.tcard figcaption b { margin-right: 0.55em; color: var(--lamp-hot); font-weight: 600; font-variant-numeric: tabular-nums; }
/* the drive, today */
.intro__drive { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity 0.9s; background: var(--map-land); }
.intro__drive.is-on { opacity: 1; }
.intro__drive img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 70%;
  opacity: 0; transition: opacity 0.35s linear, filter 1.9s ease; transform-origin: 50% 72%;
}
.intro__drive img.is-top { opacity: 1; }
.intro.is-dusk .intro__drive img.is-top { filter: brightness(0.3) saturate(0.7); }
.intro__night {
  position: absolute; inset: 0; z-index: 2; opacity: 0; transition: opacity 1.9s;
  background: radial-gradient(ellipse at 50% 62%, color-mix(in srgb, var(--night) 35%, transparent), color-mix(in srgb, var(--map-land) 88%, transparent));
}
.intro.is-dusk .intro__night { opacity: 1; }
.intro__bar { position: absolute; left: 0; right: 0; height: 9vh; background: var(--map-land); z-index: 4; }
.intro__bar--top { top: 0; }
.intro__bar--bottom { bottom: 0; }
.intro__dot {
  position: absolute; left: 50%; top: 50%; z-index: 5; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: var(--lamp-hot); opacity: 0; scale: 0.2;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--lamp) 30%, transparent), 0 0 26px 9px color-mix(in srgb, var(--lamp) 60%, transparent), 0 0 80px 30px color-mix(in srgb, var(--ember) 35%, transparent);
  transition: opacity 0.9s, scale 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.intro[data-step="dot"] .intro__dot { opacity: 1; scale: 1; }
.intro[data-step="past"] .intro__dot { opacity: 0; scale: 1; }
.intro__where {
  position: absolute; left: 50%; top: calc(50% + 2.4rem); z-index: 5; translate: -50% 0;
  display: grid; gap: 0.5rem; justify-items: center; white-space: nowrap; text-align: center;
  opacity: 0; transition: opacity 0.8s;
}
.intro[data-step="dot"] .intro__where { opacity: 1; transition-delay: 0.7s; }
.intro__where span { color: var(--haze); font-variant-numeric: tabular-nums; }
.intro__line {
  position: absolute; left: 0; right: 0; bottom: 15vh; z-index: 5; padding-inline: 1.25rem;
  text-align: center; font-size: clamp(1.05rem, 2.5vw, 2.3rem); font-weight: 300;
  text-shadow: 0 0 1.2rem var(--map-land), 0 0 0.4rem var(--map-land);
  opacity: 0; transition: opacity 0.8s;
}
.intro__line.is-on { opacity: 1; }
.intro__year {
  position: absolute; right: max(1.25rem, 4vw); top: 12vh; z-index: 5;
  font-size: clamp(2.6rem, 9vw, 9rem); font-weight: 200; color: var(--lamp-hot); font-variant-numeric: tabular-nums;
  text-shadow: 0 0 0.07em color-mix(in srgb, var(--lamp) 80%, transparent), 0 0 0.4em color-mix(in srgb, var(--ember) 50%, transparent);
  opacity: 0;
}
.intro__place {
  position: absolute; left: max(1.25rem, 4vw); bottom: 12.5vh; z-index: 5;
  font-size: clamp(0.72rem, 1.3vw, 1.05rem); letter-spacing: 0.22em;
  text-shadow: 0 0 0.8rem var(--map-land);
  opacity: 0;
}
.intro__year { transition: opacity 0.6s; }
.intro.has-year .intro__year { opacity: 1; }
.intro[data-step="cuts"] .intro__place, .intro[data-step="road"] .intro__place, .intro[data-step="dusk"] .intro__place { opacity: 1; }
.intro__title {
  position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; justify-items: center;
  text-align: center; opacity: 0;
}
.intro[data-step="title"] .intro__title { opacity: 1; }
.intro__title-a { font-size: clamp(1.3rem, 5vw, 4.75rem); letter-spacing: 0.34em; margin-right: -0.34em; }
.intro__title-b {
  font-size: clamp(min(5.5rem, 27vw), 27vw, 26rem); font-weight: 200; line-height: 0.86; color: var(--lamp-hot);
  text-shadow: 0 0 0.012em var(--paper), 0 0 0.06em color-mix(in srgb, var(--lamp) 80%, transparent), 0 0 0.3em color-mix(in srgb, var(--ember) 45%, transparent);
}
.intro__title-c { margin-top: 1.2em; letter-spacing: 0.5em; margin-right: -0.5em; font-size: clamp(0.72rem, 1.5vw, 1.1rem); color: var(--haze); }
.intro__skip {
  position: absolute; z-index: 6; right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
}
@media (prefers-reduced-motion: no-preference) {
  .intro__shots img.is-cut { animation: push 2.6s linear both; }
  .intro__drive img.is-top { animation: roll 1.3s linear both; }
  .intro[data-step="title"] .intro__title-a { animation: rise 0.9s both; }
  .intro[data-step="title"] .intro__title-b { animation: lamp-on 1.5s 0.25s both; }
  .intro[data-step="title"] .intro__title-c { animation: rise 0.9s 1.5s both; }
}
@media (prefers-reduced-motion: reduce) {
  .intro__shots img { transition: opacity 0.6s; }
}
@keyframes push { from { transform: scale(1.03); } to { transform: scale(1.13); } }
@keyframes roll { from { transform: scale(1); } to { transform: scale(1.36); } }
.hero__replay {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 3.1rem; padding: 0.4rem 0.3rem;
  border: 0; background: none; cursor: pointer; color: var(--paper);
  font-size: 0.72rem; font-weight: 650; font-stretch: 116%; letter-spacing: 0.13em; text-transform: uppercase;
}
.hero__replay svg { width: 1.9rem; height: 1.9rem; fill: none; stroke: var(--paper); stroke-width: 1.2; }
.hero__replay svg path { fill: var(--paper); stroke: none; }
.hero__replay:hover { color: var(--lamp); }
.hero__replay:hover svg { stroke: var(--lamp); }
.hero__replay:hover svg path { fill: var(--lamp); }

/* ---------- opening ---------- */
.opening { padding-block: var(--section); }
.opening__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem) var(--gap); }
.opening__note {
  display: grid; gap: 0.9em; align-content: start;
  padding-top: 1.4rem; border-top: 1px solid var(--lamp);
  font-size: 0.98rem; color: var(--haze);
}
.opening__note strong { color: var(--paper); }
@media (min-width: 60rem) {
  .opening__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .opening__title { grid-column: 1 / span 11; }
  .opening__body { grid-column: 1 / span 7; }
  .opening__note { grid-column: 9 / -1; margin-top: 0.5rem; }
}

/* ---------- where we've been ---------- */
.history { padding-block: 0 var(--section); }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(3rem, 7vw, 6.5rem); }
.moment { display: grid; gap: 1.75rem var(--gap); padding-top: 1.6rem; border-top: 1px solid var(--line); }
.moment__year {
  font-size: clamp(min(3.4rem, 17vw), 8.5vw, 8rem); font-weight: 200; line-height: 0.84; color: var(--lamp-hot);
  font-variant-numeric: lining-nums;
  text-shadow: 0 0 0.3em color-mix(in srgb, var(--ember) 30%, transparent);
}
.moment__title { margin-top: 1.1rem; font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 400; }
.moment__text { margin-top: 0.8rem; max-width: 31rem; }
.moment__photos { display: grid; gap: clamp(0.75rem, 1.6vw, 1.5rem); grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); align-items: start; }
.moment__photos[data-n="1"] { max-width: 44rem; }
.shot { margin: 0; display: grid; gap: 0.6rem; align-content: start; }
.shot img { display: block; width: 100%; height: auto; background: var(--night-2); }
.shot figcaption { font-size: 0.86rem; line-height: 1.4; color: var(--paper); }
.shot__by { display: block; margin-top: 0.2rem; font-size: 0.78rem; color: var(--haze); }
/* one credit for a whole group of photographs that share it, set under the group */
.moment__by { grid-column: 1 / -1; margin-top: 0; }
.history__close { margin-top: clamp(3rem, 7vw, 6rem); max-width: 40rem; }
@media (min-width: 40rem) {
  .moment__photos[data-n="2"], .moment__photos[data-n="4"] { --cols: 2; }
  .moment__photos[data-n="3"], .moment__photos[data-n="6"] { --cols: 3; }
}
@media (max-width: 39.99rem) {
  .moment__photos[data-n="6"], .moment__photos[data-n="3"], .moment__photos[data-n="2"] { --cols: 2; }
}
@media (min-width: 60rem) {
  .moment { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .moment__head { grid-column: 1 / span 4; position: sticky; top: calc(var(--bar) + 1.5rem); align-self: start; }
  .moment__photos { grid-column: 5 / -1; }
  .moment--bare .moment__head { grid-column: 1 / span 7; position: static; }
}

/* ---------- where we are ---------- */
.today { padding-block: 0 var(--section); }
.strip {
  display: flex; gap: clamp(0.75rem, 1.6vw, 1.5rem); overflow-x: auto; overscroll-behavior-x: contain;
  padding: 0 max(16px, var(--gutter)) 1.1rem; scroll-snap-type: x proximity; scrollbar-width: thin;
  scrollbar-color: var(--line) transparent; outline-offset: -3px;
}
.strip { scroll-padding-inline: max(16px, var(--gutter)); }
.strip .shot { flex: none; scroll-snap-align: start; }
.strip .shot img { width: auto; max-width: none; height: clamp(13rem, 46vh, 27rem); }
.strip .shot figcaption { max-width: 24rem; }
@media (max-width: 40rem) {
  /* On a phone each photograph is one card that fits the screen, with the next one showing at the edge. */
  .strip .shot { width: min(82vw, 22rem); }
  .strip .shot img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
}

/* ---------- the middle of everything ---------- */
.center { padding-block: 0 var(--section); }
.center__grid { display: grid; gap: clamp(2rem, 5vw, 4rem) var(--gap); align-items: center; }
.center__text { display: grid; gap: 1.4rem; }
.hub { margin: 0; }
.hub svg { display: block; width: 100%; height: auto; overflow: visible; }
.hub figcaption { margin-top: 0.8rem; font-size: 0.8rem; color: var(--haze); }
.hub__road { fill: none; stroke: var(--dusk); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.hub__ring { fill: none; stroke: var(--lamp); stroke-width: 1; stroke-dasharray: 2 6; opacity: 0.75; }
.hub__spoke { stroke: var(--lamp); stroke-width: 1; opacity: 0.35; }
.hub__city { fill: var(--paper); }
.hub__minor { fill: var(--dusk); }
.hub__name { fill: var(--paper); font: 600 13px var(--font); }
.hub__mi { fill: var(--haze); font: 500 12px var(--font); font-variant-numeric: tabular-nums; }
.hub__shield { fill: var(--dusk); font: 600 11px var(--font); letter-spacing: 0.06em; }
.hub__here { fill: var(--lamp-hot); font: 400 19px var(--font); font-stretch: 125%; letter-spacing: 0.08em; text-transform: uppercase; }
.hub__ringlabel { fill: var(--lamp); font: 500 11.5px var(--font); }
.hub__glow { fill: url(#hub-glow); }
.hub__dot { fill: var(--lamp-hot); }
/* On a phone the diagram is drawn at little more than half size, so the page sets its lettering
   larger (site.js adds "is-big" and moves the labels to suit). */
.hub svg.is-big .hub__name { font-size: 21px; }
.hub svg.is-big .hub__mi { font-size: 20px; }
.hub svg.is-big .hub__shield { font-size: 19px; }
.hub svg.is-big .hub__here { font-size: 27px; }
.hub svg.is-big .hub__ringlabel { font-size: 19px; }
@media (min-width: 60rem) {
  .center__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .center__text { grid-column: 1 / span 5; }
  .hub { grid-column: 7 / -1; }
}

/* big numbers */
/* one, two or four across: never three and one */
.facts {
  display: grid; grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(2.5rem, 6vw, 5rem); border-top: 1px solid var(--line);
}
@media (min-width: 30rem) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.facts div { display: grid; gap: 0.6rem; align-content: start; padding: 1.5rem 1.5rem 1.6rem 0; border-bottom: 1px solid var(--line); }
.facts dt {
  font-size: clamp(2.1rem, 3.6vw, 3.4rem); font-weight: 300; font-stretch: var(--wide);
  line-height: 1; letter-spacing: -0.01em; color: var(--lamp-hot); font-variant-numeric: lining-nums;
}
.facts dt small { font-size: 0.42em; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; margin-left: 0.25em; color: var(--paper); }
.facts dd { font-size: 0.94rem; color: var(--haze); max-width: 17rem; }

/* ---------- map ---------- */
.mapsec { padding-top: clamp(1rem, 3vw, 2.5rem); }
.sechead { display: grid; gap: 1rem 2.5rem; margin-bottom: clamp(1.75rem, 4vw, 3.25rem); }
.sechead p { color: var(--haze); max-width: 31rem; }
@media (min-width: 60rem) {
  .sechead { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
}
.map {
  position: relative; overflow: hidden;
  height: clamp(27rem, 82svh, 58rem);
  background: var(--map-land);
  border-block: 1px solid var(--line);
  cursor: grab; touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
  outline-offset: -3px;
}
.map.is-grabbing { cursor: grabbing; }
.map.is-full { position: fixed; inset: 0; z-index: 70; height: auto; border: 0; touch-action: none; }
.map__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.map__pins { position: absolute; inset: 0; pointer-events: none; }
.map__ui { position: absolute; z-index: 3; }

.pin {
  position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  padding: 0; border: 0; border-radius: 50%; background: none;
  cursor: pointer; pointer-events: auto;
}
.pin.is-off { visibility: hidden; }
.pin:focus-visible { outline-offset: -8px; }
.pin__dot {
  position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; border: 1.5px solid var(--haze); background: var(--map-land);
  transition: transform 0.2s, background-color 0.5s, border-color 0.5s, box-shadow 0.5s;
  transition-delay: 0s, var(--d, 0s), var(--d, 0s), var(--d, 0s);
}
.pin--next .pin__dot {
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 1px;
  border-color: var(--dusk); rotate: 45deg;
}
.pin:hover .pin__dot, .pin.is-active .pin__dot { transform: scale(1.4); }
.map.is-lit .pin--place .pin__dot {
  background: var(--lamp-hot); border-color: var(--lamp-hot);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--lamp) 34%, transparent),
    0 0 18px 6px color-mix(in srgb, var(--lamp) 55%, transparent),
    0 0 46px 16px color-mix(in srgb, var(--ember) 30%, transparent);
}
.map.is-lit .pin--next .pin__dot { border-color: var(--lamp); }
.pin.is-active .pin__dot { border-color: var(--paper); }
.pin__name {
  position: absolute; left: calc(50% + 13px); top: 50%; translate: 0 -50%;
  white-space: nowrap; font-size: 0.8rem; font-weight: 600; line-height: 1; color: var(--paper);
  text-shadow: 0 0 3px var(--map-land), 0 0 8px var(--map-land), 0 0 14px var(--map-land);
  opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
.pin.is-left .pin__name { left: auto; right: calc(50% + 13px); }
.pin--next .pin__name { font-weight: 500; color: var(--haze); }
.pin.is-named .pin__name, .pin:hover .pin__name, .pin:focus-visible .pin__name { opacity: 1; }
.pin:hover, .pin.is-active { z-index: 2; }

.map__switch {
  top: 1rem; left: max(1rem, env(safe-area-inset-left, 0px));
  display: inline-flex; padding: 3px; gap: 2px;
  background: color-mix(in srgb, var(--night) 84%, transparent);
  border: 1px solid var(--line); border-radius: 4px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.map__switch button, .plate__views button {
  min-height: var(--tap); padding: 0.6rem 1.05rem; border: 0; border-radius: 2px; background: none;
  color: var(--haze); cursor: pointer;
  font-size: 0.75rem; font-weight: 650; font-stretch: 116%; letter-spacing: 0.13em; text-transform: uppercase; line-height: 1;
  transition: background-color 0.25s, color 0.25s, box-shadow 0.25s;
}
.map__switch button[aria-pressed="true"], .plate__views button[aria-pressed="true"] { background: var(--night-3); color: var(--paper); }
.map__switch button[data-lit="1"][aria-pressed="true"] {
  background: var(--lamp); color: var(--ink);
  box-shadow: 0 0 1.8rem color-mix(in srgb, var(--lamp) 50%, transparent);
}
.map__zoom {
  top: 1rem; right: max(1rem, env(safe-area-inset-right, 0px));
  display: grid; gap: 1px; overflow: hidden;
  background: var(--line); border: 1px solid var(--line); border-radius: 4px;
}
.map__zoom button {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0;
  background: color-mix(in srgb, var(--night) 90%, transparent); cursor: pointer;
  transition: background-color 0.2s;
}
.map__zoom button:hover { background: var(--night-3); }
.map__zoom svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: var(--paper); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.map.is-full .map__switch, .map.is-full .map__zoom { top: calc(env(safe-area-inset-top, 0px) + 1rem); }

.map__foot {
  left: max(1rem, env(safe-area-inset-left, 0px)); right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: 0.7rem; display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem;
  font-size: 0.75rem; color: var(--haze); pointer-events: none;
  text-shadow: 0 0 4px var(--map-land), 0 0 10px var(--map-land);
}
.map.is-full .map__foot { bottom: calc(env(safe-area-inset-bottom, 0px) + 0.7rem); }
.map__scale { display: grid; gap: 4px; }
.map__scale i { display: block; width: var(--mile, 6rem); height: 5px; border: 1px solid var(--haze); border-top: 0; }
.map__credit { text-align: right; }

.map__card {
  left: max(1rem, env(safe-area-inset-left, 0px)); bottom: 2.9rem;
  width: min(22rem, calc(100% - 2rem));
  background: color-mix(in srgb, var(--night) 95%, transparent);
  border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 1.5rem 3.5rem color-mix(in srgb, var(--map-land) 75%, transparent);
  cursor: default;
}
.map.is-full .map__card { bottom: calc(env(safe-area-inset-bottom, 0px) + 2.9rem); }
.map__card-pic { display: block; position: relative; aspect-ratio: 2 / 1; overflow: hidden; background: var(--night-2); }
.map__card-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.map__card-body { display: grid; gap: 0.4rem; padding: 1rem 1.05rem 1.1rem; }
.map__card-name { font-size: 1.15rem; line-height: 1.12; padding-right: 1.6rem; font-weight: 400; letter-spacing: 0.03em; }
.map__card-where { font-size: 0.85rem; color: var(--haze); }
.map__card-line { font-size: 0.92rem; margin-top: 0.2rem; }
.map__card-acts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.7rem; }
.map__card-x {
  position: absolute; top: 0.45rem; right: 0.45rem; z-index: 2;
  display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0;
  border: 0; border-radius: 50%; background: color-mix(in srgb, var(--night) 80%, transparent); cursor: pointer;
}
.map__card-x::after { content: ""; position: absolute; inset: -0.4rem; }   /* a thumb-sized target around the small button */
.map__card-x svg { width: 0.8rem; height: 0.8rem; stroke: var(--paper); stroke-width: 2; stroke-linecap: round; fill: none; }
.map__hint {
  position: absolute; left: 50%; top: 50%; z-index: 4; translate: -50% -50%;
  padding: 0.7rem 1.1rem; border-radius: 4px; white-space: nowrap;
  background: color-mix(in srgb, var(--night) 90%, transparent); border: 1px solid var(--line);
  font-size: 0.95rem; pointer-events: none;
}
.mapsec__below { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; padding-block: 1.1rem var(--section); }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  min-height: var(--tap); padding: 0.45rem 1.05rem; border: 1px solid var(--line); border-radius: 999px;
  background: none; cursor: pointer;
  font-size: 0.75rem; font-weight: 600; font-stretch: 116%; letter-spacing: 0.12em; text-transform: uppercase;
  transition: border-color 0.2s, color 0.2s;
}
.chip:hover { border-color: var(--dusk); }
.chip[aria-pressed="true"] { border-color: var(--lamp); color: var(--lamp); }
.mapsec__key { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin-left: auto; font-size: 0.85rem; color: var(--haze); }
.mapsec__key span { display: inline-flex; align-items: center; gap: 0.5rem; }
.key-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--lamp-hot); box-shadow: 0 0 10px 2px color-mix(in srgb, var(--lamp) 60%, transparent); }
.key-diamond { width: 8px; height: 8px; border: 1.5px solid var(--lamp); rotate: 45deg; }
.key-dots { width: 1.6rem; height: 0; border-top: 2px dotted var(--lamp-hot); }

/* ---------- places: one full screen each ---------- */
.places__head { padding-bottom: clamp(1.75rem, 4vw, 3.25rem); }
.places__head .sechead { margin-bottom: 0; }
.panel {
  position: relative; isolation: isolate; overflow: clip;
  background: var(--night);
}
.panel__pic { position: relative; overflow: hidden; aspect-ratio: 5 / 4.4; max-width: 100%; background: var(--tone, var(--night-2)); }
.panel__pic img {
  position: absolute; left: 0; top: 0; width: 100%; height: 112.1%; max-width: none;
  object-fit: cover; object-position: var(--focus, 50%) 0;
}
/* Pictures without a caption strip are used whole (the 112.1% above crops the strip off the others). */
.hero__reel img.is-plain, .intro__shots img.is-plain, .panel__pic img.is-plain, .sheet__next img.is-plain { height: 100%; }
.panel__pic::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, var(--night) 0%, color-mix(in srgb, var(--night) 40%, transparent) 26%, transparent 50%);
}
.panel__inner { position: relative; display: grid; gap: 1rem; justify-items: start; margin-top: -3.5rem; padding-bottom: clamp(3rem, 8vw, 5rem); }
.panel__count { color: var(--lamp); font-variant-numeric: tabular-nums; }
.panel__name { font-size: clamp(min(2rem, 10vw), 5.6vw, 5.75rem); max-width: 13em; }
.panel__name a { text-decoration: none; }
/* Address and distance share a line with a rule between them. Every part carries its rule on its
   left, pulled just outside the box, so a part that wraps to a new line starts clean. */
.panel__meta { display: flex; flex-wrap: wrap; row-gap: 0.35rem; max-width: 100%; overflow: hidden; color: var(--haze); }
.panel__meta span {
  margin-left: calc(-1.1rem - 1px); padding: 0 2.2rem 0 1.1rem;
  border-left: 1px solid color-mix(in srgb, var(--haze) 55%, transparent);
}
.panel__line { max-width: 36rem; }
.panel__go { margin-top: 0.5rem; }
@media (min-width: 60rem) and (min-height: 36rem) {
  .panel { position: sticky; top: 0; display: grid; align-items: end; min-height: 100svh; background: var(--tone, var(--night-2)); }
  .panel__pic { position: absolute; inset: 0; z-index: -2; aspect-ratio: auto; }
  .panel__pic::after {
    background:
      linear-gradient(to top,
        color-mix(in srgb, var(--night) 94%, transparent) 0%,
        color-mix(in srgb, var(--night) 66%, transparent) 26%,
        color-mix(in srgb, var(--night) 18%, transparent) 54%,
        transparent 72%),
      linear-gradient(to right, color-mix(in srgb, var(--night) 58%, transparent), transparent 58%);
  }
  .panel__inner { margin-top: 0; padding-block: calc(var(--bar) + 3rem) clamp(2.5rem, 5vw, 4.5rem); gap: 1.15rem; }
}

/* ---------- on the drawing board ---------- */
.board { position: relative; padding-block: var(--section); background: var(--night-2); border-block: 1px solid var(--line); }
.board__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(2.5rem, 5vw, 3.75rem) var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19.5rem), 1fr));
}
/* four ideas sit two by two, then four across, so one is never left alone on a row */
@media (min-width: 40rem) { .board__list[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 75rem) { .board__list[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* three ideas sit in one column, then three across, for the same reason */
.board__list[data-n="3"] { grid-template-columns: minmax(0, 36rem); }
@media (min-width: 60rem) { .board__list[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.idea { display: grid; gap: 0.95rem; align-content: start; }
.idea__plan {
  position: relative; display: block; width: 100%; aspect-ratio: 3 / 2; max-width: 100%; padding: 0;
  overflow: hidden; background: var(--map-land); border: 1px solid var(--line); cursor: pointer;
  transition: border-color 0.2s;
}
.idea__plan:hover { border-color: var(--lamp); }
.idea__mark {
  position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  border: 1.5px solid var(--lamp); rotate: 45deg; pointer-events: none;
  box-shadow: 0 0 14px 3px color-mix(in srgb, var(--lamp) 45%, transparent);
}
.idea__kind { color: var(--lamp); }
.idea__name { font-size: 1.35rem; line-height: 1.15; font-weight: 400; letter-spacing: 0.03em; margin-top: 0.45rem; }
.idea__where { font-size: 0.9rem; color: var(--haze); margin-top: 0.45rem; }
.idea__text { font-size: 0.98rem; }
.idea__today { font-size: 0.92rem; color: var(--haze); }

/* ---------- making it real ---------- */
.real { position: relative; padding-block: var(--section); background: var(--night); }
.real__head { display: grid; gap: 1.4rem var(--gap); margin-bottom: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 60rem) {
  .real__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
}
/* the three waves stand in one column, then three across: never two and one */
.waves { list-style: none; margin: 0; padding: 0; counter-reset: wave; display: grid; gap: 0 var(--gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) { .waves { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wave { counter-increment: wave; display: grid; gap: 0.9rem; align-content: start; padding-block: 1.6rem 2.2rem; border-top: 1px solid var(--lamp); }
.wave::before {
  content: counter(wave); font-size: clamp(3rem, 5vw, 4.5rem); font-weight: 200; font-stretch: var(--wide);
  line-height: 0.9; color: var(--lamp-hot); font-variant-numeric: lining-nums;
}
.wave__name { font-size: 1.35rem; font-weight: 400; letter-spacing: 0.03em; }
.wave__note { color: var(--haze); max-width: 26rem; }
.wave__list { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; max-width: 40rem; }
.wave__list li { border-top: 1px solid var(--line); }
.wave__list a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.7rem 0; text-decoration: none; transition: color 0.2s;
}
.wave__list a:hover { color: var(--lamp); }
.wave__list small { font-size: 0.8rem; color: var(--haze); white-space: nowrap; }
.wave__how { font-size: 0.9rem; color: var(--haze); max-width: 26rem; }

.tools { display: grid; gap: 1.4rem; margin-top: clamp(3rem, 7vw, 6rem); }
.tools__title { font-size: clamp(1.5rem, 2.6vw, 2.3rem); }
.tools__list { display: grid; gap: 0 var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); }
.tools__list div { padding-block: 1rem; border-top: 1px solid var(--line); display: grid; gap: 0.25rem; align-content: start; }
.tools__list dt { font-weight: 600; }
.tools__list dd { color: var(--haze); font-size: 0.95rem; }
.tools__note { font-size: 0.85rem; color: var(--haze); max-width: 38rem; }

/* ---------- one before-and-after, near the top of the page ---------- */
.spot { position: relative; padding-block: 0 var(--section); }
.spot__fig { margin: 0; }
/* The slider runs the full width of the page. On a wide screen its height is held to the window,
   and both pictures are trimmed top and bottom by the same amount, so they still line up. */
.spot .plate__frame { margin-inline: 0; width: 100%; max-height: calc(100svh - var(--bar) - 8rem); min-height: 11rem; }
.spot__acts { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.5rem; }

/* ---------- where this stands ---------- */
.stands { position: relative; padding-block: 0 clamp(1rem, 3vw, 2.5rem); background: var(--night); }   /* "Pass it on" below brings its own space */
.stands__grid { display: grid; gap: 0 var(--gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) { .stands__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stands__col { display: grid; gap: 1rem; align-content: start; padding-block: 1.6rem 2.2rem; border-top: 1px solid var(--line); }
.stands__col h3 { color: var(--lamp); }
.stands__col ul, .stands__col ol { margin: 0; padding-left: 1.15rem; display: grid; gap: 0.7rem; max-width: 30rem; }
.stands__col li::marker { color: var(--dusk); }
.stands__col a { text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* ---------- write back: the reply form (shown once places.js names a form inbox) ---------- */
.reply { display: grid; gap: 2rem var(--gap); margin-top: 1.5rem; padding-block: 2.4rem 1rem; border-top: 1px solid var(--lamp); }
.reply__intro { display: grid; gap: 1rem; align-content: start; max-width: 30rem; }
.reply__title { font-size: clamp(min(1.8rem, 9vw), 3.4vw, 3rem); }
.reply__small { font-size: 0.88rem; color: var(--haze); }
.reply__form { display: grid; gap: 1.3rem; max-width: 40rem; }
.field { display: grid; gap: 0.45rem; }
.field label { font-size: 0.95rem; font-weight: 600; }
.field__opt { font-weight: 400; color: var(--haze); }
.field input[type="text"], .field input[type="email"], .field textarea, .field select {
  width: 100%; padding: 0.75rem 0.85rem; font: inherit; color: var(--paper);
  background: var(--night-2); border: 1px solid color-mix(in srgb, var(--dusk) 70%, transparent); border-radius: 2px;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  outline: 2px solid var(--lamp); outline-offset: 2px; border-color: var(--lamp);
}
.field [aria-invalid="true"] { border-color: var(--ember); }
.field--checks { gap: 0.7rem; }
.field--checks label { display: flex; align-items: flex-start; gap: 0.7rem; font-size: 1rem; font-weight: 400; }
.field--checks input { flex: none; width: 1.15rem; height: 1.15rem; margin: 0.2rem 0 0; accent-color: var(--lamp); }
.reply__trap { position: absolute; left: -200vw; width: 1px; height: 1px; overflow: hidden; }
.reply__error { min-height: 1.5em; color: var(--ember); font-weight: 600; }
.reply__done { display: grid; gap: 1.2rem; justify-items: start; align-content: start; }
.reply__out { display: grid; gap: 1rem; justify-items: start; align-content: start; }
.reply[hidden], .reply__form[hidden], .reply__done[hidden], .reply__out[hidden] { display: none; }
@media (min-width: 60rem) {
  .reply { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
/* When the form lives somewhere else, there is only a button: it sits under the words, not beside them. */
.reply[data-mode="away"] { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }

/* ---------- pass it on ---------- */
.pass {
  position: relative;
  padding-block: var(--section) clamp(7rem, 16vw, 13rem);
  background: linear-gradient(to bottom,
    var(--night) 0%,
    var(--night-3) 34%,
    var(--sky-plum) 62%,
    var(--sky-rose) 84%,
    var(--ember) 95%,
    var(--lamp) 100%);
}
.pass__inner { display: grid; gap: 1.7rem; max-width: 50rem; }
.pass__title { font-size: clamp(min(2.6rem, 13vw), 9.5vw, 9rem); }
.pass__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.2rem; margin-top: 0.4rem; }
.pass__done { font-weight: 600; }

/* ---------- footer ---------- */
.foot { position: relative; background: var(--map-land); padding-block: clamp(3rem, 6vw, 5rem); font-size: 0.92rem; color: var(--haze); }
.foot__grid { display: grid; gap: 2.5rem var(--gap); }
.foot__grid > div { display: grid; gap: 0.8rem; align-content: start; }
.foot .brand { color: var(--paper); }
.foot__h { color: var(--paper); font-weight: 600; }
.foot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.45rem; }
.foot a { text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.credits { margin-top: 2.75rem; padding-top: 0.6rem; border-top: 1px solid var(--line); }
.credits summary { padding-block: 0.7rem; cursor: pointer; color: var(--paper); font-weight: 600; }
.credits p { margin-top: 0.9rem; max-width: 40rem; }
.credits ul { margin-top: 1.1rem; display: grid; gap: 0.7rem var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); font-size: 0.82rem; }
@media (min-width: 60rem) {
  .foot__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr); }
}

/* ---------- place view ---------- */
.sheet {
  position: fixed; inset: 0; z-index: 80; overflow-y: auto; overscroll-behavior: contain;
  background: var(--night); padding-top: env(safe-area-inset-top, 0px);
}
.sheet__bar {
  position: sticky; top: 0; z-index: 5;
  background: color-mix(in srgb, var(--night) 92%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.sheet__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: var(--bar); }
.sheet__close, .sheet__step {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: var(--tap); padding: 0.4rem 0.95rem;
  border: 1px solid var(--line); border-radius: 2px; background: none; cursor: pointer;
  font-size: 0.75rem; font-weight: 650; font-stretch: 116%; letter-spacing: 0.13em; text-transform: uppercase;
  transition: border-color 0.2s;
}
.sheet__close:hover, .sheet__step:hover { border-color: var(--paper); }
.sheet__close svg { width: 0.75rem; height: 0.75rem; stroke: var(--paper); stroke-width: 2; stroke-linecap: round; fill: none; }
.sheet__steps { display: flex; gap: 0.5rem; }
@media (prefers-reduced-motion: no-preference) {
  .sheet.is-in .sheet__body { animation: sheet-in 0.36s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
}
@keyframes sheet-in { from { opacity: 0; transform: translateY(1.4rem); } }

.plate { position: relative; background: var(--map-land); }
.plate__frame {
  --ar: 1.7768; /* width over height of the picture; the page sets it per picture */
  position: relative; overflow: hidden; margin-inline: auto;
  width: min(100%, calc((100svh - var(--bar) - 4.5rem) * var(--ar)));
  aspect-ratio: var(--ar); background: var(--tone, var(--night-2));
}
.plate__frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.plate__views {
  position: absolute; z-index: 3; right: 1rem; top: 1rem;
  display: inline-flex; padding: 3px; gap: 2px;
  background: color-mix(in srgb, var(--night) 84%, transparent); border: 1px solid var(--line); border-radius: 4px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.plate__cap { max-width: 40rem; padding-block: 0.7rem 0; font-size: 0.82rem; color: var(--haze); }

.compare { position: absolute; inset: 0; --pos: 50%; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare__today { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare__line {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px;
  background: var(--lamp-hot); box-shadow: 0 0 14px 1px var(--lamp); pointer-events: none;
}
.compare__knob {
  position: absolute; top: 50%; left: var(--pos); width: 3rem; height: 3rem; margin: -1.5rem 0 0 -1.5rem;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--lamp); box-shadow: 0 0 1.6rem color-mix(in srgb, var(--lamp) 60%, transparent); pointer-events: none;
}
.compare__knob svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.compare input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0;
  cursor: ew-resize; touch-action: pan-y;
}
.compare input:focus-visible ~ .compare__knob { outline: 2px solid var(--paper); outline-offset: 3px; }
.compare__tag {
  position: absolute; bottom: 1rem; padding: 0.45rem 0.8rem; border-radius: 2px;
  background: color-mix(in srgb, var(--night) 84%, transparent); pointer-events: none;
}
.compare__tag--today { left: 1rem; }
.compare__tag--new { right: 1rem; color: var(--lamp); }

.sheet__grid { display: grid; gap: 2.75rem var(--gap); padding-block: clamp(2rem, 4.5vw, 3.75rem) clamp(3rem, 7vw, 6rem); }
.sheet__title { font-size: clamp(min(2.1rem, 10vw), 5.2vw, 4.9rem); }
/* The page moves focus to the name when a place opens, for screen readers. A heading is not a
   control, so it shows no focus ring. */
.sheet__title:focus, .reply__done:focus { outline: none; }
.sheet__where { margin-top: 1rem; color: var(--haze); }
.sheet__line { margin-top: 1.7rem; max-width: 40rem; }
.sheet__sec { display: grid; gap: 0.75rem; margin-top: 2.3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); max-width: 40rem; }
.sheet__sec h3 { color: var(--lamp); }
.sheet__sec ul { margin: 0; padding-left: 1.15rem; display: grid; gap: 0.45rem; }
.sheet__sec li::marker { color: var(--dusk); }
.sheet__sec .small { font-size: 0.85rem; color: var(--haze); }
.sheet__side { display: grid; gap: 0.8rem; align-content: start; }
.plan { position: relative; aspect-ratio: 1 / 1; max-width: 100%; overflow: hidden; background: var(--map-land); border: 1px solid var(--line); }
.plan__mark {
  position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; border: 2px solid var(--lamp-hot); pointer-events: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--lamp) 28%, transparent), 0 0 22px 7px color-mix(in srgb, var(--lamp) 50%, transparent);
}
.plan__note { font-size: 0.85rem; color: var(--haze); font-variant-numeric: tabular-nums; }
.sheet__acts { display: grid; gap: 0.6rem; margin-top: 0.4rem; }
.sheet__said { font-size: 0.88rem; color: var(--lamp); min-height: 1.3em; overflow-wrap: anywhere; }
@media (min-width: 60rem) {
  .sheet__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .sheet__main { grid-column: 1 / span 7; }
  .sheet__side { grid-column: 9 / -1; position: sticky; top: calc(var(--bar) + 1.5rem); align-self: start; }
}
.sheet__next {
  position: relative; display: grid; align-items: end; overflow: hidden; isolation: isolate;
  min-height: clamp(15rem, 36vw, 28rem); padding-block: clamp(1.5rem, 4vw, 3rem);
  text-decoration: none; background: var(--night-2);
}
.sheet__next img {
  position: absolute; left: 0; top: 0; z-index: -2; width: 100%; height: 112.1%; max-width: none;
  object-fit: cover; object-position: 50% 0;
}
.sheet__next::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, var(--night) 4%, color-mix(in srgb, var(--night) 55%, transparent) 55%, color-mix(in srgb, var(--night) 25%, transparent));
}
.sheet__next-label { display: block; color: var(--lamp); }
.sheet__next-name { display: block; margin-top: 0.6rem; font-size: clamp(min(1.8rem, 9vw), 5vw, 4.5rem); }

/* ---------- small screens ---------- */
@media (max-width: 31rem) {
  /* stacked buttons take the width of the longest one */
  .hero__actions, .spot__acts { display: grid; grid-template-columns: minmax(0, max-content); }
}
@media (max-width: 24rem) {
  /* Close, Previous and Next stay on one line on the narrowest phones */
  .sheet__close, .sheet__step { padding-inline: 0.5rem; letter-spacing: 0.1em; }
  .sheet__row { gap: 0.6rem; }
  .sheet__steps { gap: 0.35rem; }
}
@media (max-width: 18rem) {
  /* very large text: Close takes one line, Previous and Next the line below */
  .sheet__row { flex-wrap: wrap; height: auto; min-height: var(--bar); padding-block: 0.5rem; }
}
@media (max-width: 40rem) {
  .panel__meta { flex-direction: column; }
  .panel__meta span { margin-left: 0; padding: 0; border-left: 0; }
  .map { height: clamp(26rem, 72svh, 38rem); }
  .map__card { left: 0.6rem; right: 0.6rem; width: auto; bottom: 2.6rem; }
  .map__card-pic { aspect-ratio: 5 / 2; }
  .map__card-line { display: none; }
  .map__switch button { padding-inline: 0.8rem; }
  .mapsec__key { margin-left: 0; }
  .plate__views { right: 0.6rem; top: 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pin__dot { transition-duration: 0.01ms; }
}