/* =========================================================
   SPLIT LABS — Hero
   ========================================================= */

:root {
  --ink: #0a0b0e;
  --ink-2: #111217;
  --paper: #f4efe7;
  --paper-dim: rgba(244, 239, 231, 0.68);
  --paper-faint: rgba(244, 239, 231, 0.42);
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.55);
  --ember: #f2b27a;      /* lamp-light amber pulled from the glass pods */
  --ember-deep: #d9734f; /* handwritten strike colour */
  --dusk: #c98fa6;

  --f-display: "Zodiak", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-body: "Anek Latin", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --f-hand: "Kalam", "Segoe Print", "Bradley Hand", cursive;

  --gutter: clamp(20px, 2.5vw, 40px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --t: 0.5s;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-body);
  font-size: 14px;
  font-stretch: 104%;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
img { max-width: 100%; display: block; }
h1, h2, p, blockquote { margin: 0; }

:focus-visible {
  outline: 1.5px solid var(--ember);
  outline-offset: 4px;
  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-link {
  position: fixed; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; background: var(--paper); color: var(--ink);
  border-radius: 999px; font-weight: 600; transition: top 0.3s var(--ease-out);
}
.skip-link:focus { top: 16px; }

/* =========================================================
   HERO GRID
   ========================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  isolation: isolate;
  overflow: hidden;
}

/* =========================================================
   SCENE
   ========================================================= */
.scene {
  --px: 0px;
  --py: 0px;
  --shift-x: 0px;
  --shift-y: 0px;
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--ink);
}

/* Two stages share one box: the art, and above the shade, the hotspots
   (the focus veil's soft copy of the art rides the same box) */
.stage,
.veil__art {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--stage-w, 104%);
  height: var(--stage-h, 104%);
  container-type: size; /* 1cqh = 1% of the art's height, for hotspot leaders */
  transform: translate(-50%, -50%) translate3d(calc(var(--px) + var(--shift-x)), calc(var(--py) + var(--shift-y)), 0);
  will-change: transform;
}

.stage__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.stage__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s var(--ease-out);
}
.stage__img.is-loaded { opacity: 1; }

/* Painted dusk while the real image is missing / loading */
.stage__fallback {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 30% 22% at 86% 34%, rgba(255, 200, 150, 0.75), transparent 70%),
    radial-gradient(ellipse 60% 40% at 72% 18%, rgba(219, 148, 170, 0.45), transparent 70%),
    radial-gradient(ellipse 50% 35% at 30% 30%, rgba(120, 110, 150, 0.35), transparent 70%),
    radial-gradient(ellipse 80% 30% at 50% 62%, rgba(180, 170, 190, 0.18), transparent 70%),
    linear-gradient(180deg, #2b2438 0%, #4b3649 20%, #7d5a63 36%, #4a4250 50%, #232329 66%, #0e0f13 82%, #0a0b0e 100%);
}
.stage__fallback .sun {
  position: absolute;
  right: 12%;
  top: 31%;
  width: 7vmax;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fff3e2 0%, #ffd2a6 35%, rgba(255, 180, 130, 0) 70%);
  filter: blur(2px);
  animation: sun-breathe 8s ease-in-out infinite alternate;
}
@keyframes sun-breathe { to { transform: scale(1.15); opacity: 0.8; } }

/* Drifting mist over the image */
.fog {
  position: absolute;
  inset: -20% -30%;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(40px);
}
.fog--a {
  background:
    radial-gradient(ellipse 25% 10% at 20% 62%, rgba(220, 225, 240, 0.22), transparent 70%),
    radial-gradient(ellipse 30% 8% at 70% 70%, rgba(220, 220, 235, 0.18), transparent 70%);
  animation: drift 48s linear infinite alternate;
}
.fog--b {
  background:
    radial-gradient(ellipse 22% 9% at 45% 55%, rgba(255, 220, 200, 0.14), transparent 70%),
    radial-gradient(ellipse 28% 10% at 88% 58%, rgba(230, 230, 245, 0.16), transparent 70%);
  animation: drift 64s linear infinite alternate-reverse;
}
@keyframes drift {
  from { transform: translate3d(-6%, 0, 0); }
  to   { transform: translate3d(6%, -2%, 0); }
}

/* Legibility shading */
.scene__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8, 9, 12, 0.72) 0%, rgba(8, 9, 12, 0.38) 22%, rgba(8, 9, 12, 0) 44%),
    linear-gradient(0deg, rgba(8, 9, 12, 0.96) 0%, rgba(8, 9, 12, 0.7) 18%, rgba(8, 9, 12, 0) 42%),
    linear-gradient(180deg, rgba(8, 9, 12, 0.45) 0%, rgba(8, 9, 12, 0) 16%);
}

.motes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* =========================================================
   HOTSPOTS
   A pin sits on the building, a hairline leader runs up or
   down from it, and the label hangs off the far end.
   --x/--y place the pin on the landscape art, --xp/--yp on the
   portrait art. --lead is the leader length in % of the image
   height, so labels keep their place on the art at any size.
   data-dir="down" flips the leader, data-side="left" the label.
   ========================================================= */
.hotspots { position: absolute; inset: 0; }

.hotspot {
  --dir: -1;
  --side: 1;
  /* --lead-k: set by fitStage when the dock or the intro crowds the art;
     the 56px floor keeps a hanging label clear of its own pin */
  --L: max(calc(var(--lead, 8) * var(--lead-k, 1) * 1cqh), 56px);
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  width: 0;
  height: 0;
}
.hotspot[data-dir="down"] { --dir: 1; }
.hotspot[data-side="left"] { --side: -1; }
.scene[data-art="portrait"] .hotspot {
  --L: max(calc(var(--leadp, var(--lead, 8)) * var(--lead-k, 1) * 1cqh), 56px);
  left: var(--xp, var(--x));
  top: var(--yp, var(--y));
}
.scene[data-art="portrait"] .hotspot[data-dirp="up"] { --dir: -1; }
.scene[data-art="portrait"] .hotspot[data-dirp="down"] { --dir: 1; }
.scene[data-art="portrait"] .hotspot[data-sidep="right"] { --side: 1; }
.scene[data-art="portrait"] .hotspot[data-sidep="left"] { --side: -1; }

/* zero-size anchor: the pin and the label are its hit area */
.hotspot__link { position: absolute; inset: 0; }
.hotspot__link:focus-visible { outline: none; }

.hotspot__pin {
  position: absolute;
  left: -16px;
  top: -16px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
}
.hotspot__pin::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff4e6;
  box-shadow: 0 0 0 3px rgba(242, 178, 122, 0.22), 0 0 14px 3px rgba(242, 178, 122, 0.7);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
/* idle "breathing" ring so the map feels alive */
.hotspot__pin::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  border: 1px solid rgba(255, 236, 214, 0.7);
  animation: ping 3.6s var(--ease-out) infinite;
  animation-delay: calc(var(--d) * 0.7s);
}

.hotspot__lead {
  --lead-angle: calc(180deg + (var(--dir) + 1) * 90deg); /* bright at the label, fading into the pin */
  position: absolute;
  left: -0.5px;
  top: calc(min(var(--dir), 0) * var(--L) + max(var(--dir), 0) * 10px);
  width: 1px;
  height: calc(var(--L) - 10px);
  background: linear-gradient(var(--lead-angle), rgba(244, 239, 231, 0.8), rgba(244, 239, 231, 0.12));
  transform-origin: 50% calc(50% - var(--dir) * 50%);
}
.hotspot__lead::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--lead-angle), var(--ember), rgba(242, 178, 122, 0.2));
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}
/* a spark that travels from the building to the label on hover */
.hotspot__lead::before {
  content: "";
  position: absolute;
  left: -1px;
  width: 3px;
  height: 28px;
  border-radius: 2px;
  background: linear-gradient(to bottom, rgba(255, 243, 226, 0), #fff3e2, rgba(255, 243, 226, 0));
  opacity: 0;
}
@keyframes lead-spark {
  from { top: calc(50% - var(--dir) * 50% - 14px); opacity: 1; }
  to { top: calc(50% + var(--dir) * 50% - 14px); opacity: 0; }
}

.hotspot__label {
  position: absolute;
  left: calc(var(--side) * 14px);
  top: calc(var(--dir) * var(--L));
  translate: calc((1 - var(--side)) * -50%) calc((1 + var(--dir)) * -50%);
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "title btn" "sub btn";
  align-items: center;
  column-gap: 16px;
  width: max-content;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.6);
  transition: transform 0.6s var(--ease-out);
}
.hotspot[data-side="left"] .hotspot__label,
.scene[data-art="portrait"] .hotspot[data-sidep="left"] .hotspot__label {
  grid-template-areas: "btn title" "btn sub";
  justify-items: end;
  text-align: right;
}
.scene[data-art="portrait"] .hotspot[data-sidep="right"] .hotspot__label {
  grid-template-areas: "title btn" "sub btn";
  justify-items: start;
  text-align: left;
}
/* soft shade pool so the label reads on any part of the art */
.hotspot__label::before {
  content: "";
  position: absolute;
  inset: -36px -48px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(8, 9, 12, 0.46), rgba(8, 9, 12, 0.2) 55%, rgba(8, 9, 12, 0));
}
.hotspot__link:focus-visible .hotspot__label {
  outline: 1.5px solid var(--ember);
  outline-offset: 8px;
  border-radius: 4px;
}
/* scoped: the mobile rail reuses title/sub/btn in its own grid */
.hotspot__label .hotspot__title { grid-area: title; }
.hotspot__label .hotspot__sub { grid-area: sub; }
.hotspot__label .hotspot__btn { grid-area: btn; }

.hotspot__title {
  font-size: clamp(12px, 0.9vw, 14px);
  font-weight: 600;
  font-stretch: 125%;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
  transition: letter-spacing 0.6s var(--ease-out), color var(--t);
}
.hotspot__sub {
  margin-top: 5px;
  font-size: clamp(12px, 0.85vw, 13.5px);
  line-height: 1.35;
  color: rgba(244, 239, 231, 0.84);
  max-width: 220px;
  transition: color var(--t);
}

.hotspot__btn,
.cta__btn,
.stories__next,
.menu-btn {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
}

.hotspot__btn {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  transition: border-color var(--t), box-shadow var(--t);
}
.hotspot__btn::before,
.stories__next::before,
.menu-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--paper);
  transform: scale(0);
  transition: transform 0.5s var(--ease-out);
}
.hotspot__btn svg { width: 13px; height: 13px; position: relative; transition: color 0.3s; }

@keyframes ping {
  0% { transform: scale(1); opacity: 0.7; }
  60%, 100% { transform: scale(2.6); opacity: 0; }
}

/* hover: the pin locks on, a spark runs up the leader, the label answers */
.hotspot__link:hover .hotspot__pin::before,
.hotspot__link:focus-visible .hotspot__pin::before {
  transform: scale(1.45);
  box-shadow: 0 0 0 3px rgba(242, 178, 122, 0.35), 0 0 22px 6px rgba(242, 178, 122, 0.85);
}
.hotspot__link:hover .hotspot__pin::after,
.hotspot__link:focus-visible .hotspot__pin::after {
  animation: none;
  transform: scale(1.8);
  opacity: 1;
  border-color: var(--ember);
  transition: transform 0.5s var(--ease-out), border-color 0.3s;
}
.hotspot__link:hover .hotspot__lead::after,
.hotspot__link:focus-visible .hotspot__lead::after { opacity: 1; }
.hotspot__link:hover .hotspot__lead::before,
.hotspot__link:focus-visible .hotspot__lead::before { animation: lead-spark 0.7s var(--ease-io) both; }
.hotspot__link:hover .hotspot__label,
.hotspot__link:focus-visible .hotspot__label { transform: translateX(calc(var(--side) * 4px)); }
.hotspot__link:hover .hotspot__title,
.hotspot__link:focus-visible .hotspot__title { letter-spacing: 0.2em; color: #fff; }
.hotspot__link:hover .hotspot__sub,
.hotspot__link:focus-visible .hotspot__sub { color: var(--paper); }
.hotspot__link:hover .hotspot__btn,
.hotspot__link:focus-visible .hotspot__btn {
  border-color: var(--paper);
  box-shadow: 0 0 0 5px rgba(244, 239, 231, 0.08), 0 0 26px rgba(242, 178, 122, 0.45);
}
.hotspot__link:hover .hotspot__btn::before,
.hotspot__link:focus-visible .hotspot__btn::before { transform: scale(1); }
.hotspot__link:hover .hotspot__btn svg,
.hotspot__link:focus-visible .hotspot__btn svg { color: var(--ink); animation: arrow-loop 0.6s var(--ease-out); }

@keyframes arrow-loop {
  0% { transform: translateX(0); }
  45% { transform: translateX(140%); opacity: 0; }
  46% { transform: translateX(-140%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

/* =========================================================
   TOP BAR
   ========================================================= */
.topbar {
  grid-row: 1;
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px var(--gutter) 0 calc(var(--gutter) - 2px);
}

.logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
}
.logo__word {
  font-size: 14px;
  font-weight: 600;
  font-stretch: 125%;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  transition: letter-spacing 0.7s var(--ease-out);
}
.logo__mark {
  width: 26px;
  height: 26px;
  margin-right: 2px;
  overflow: visible;
  stroke-width: 7.7;
}
.logo__swoosh {
  position: absolute;
  left: 38px; /* under the word, not the mark */
  bottom: 0;
  width: 70px;
  height: 8px;
  stroke-width: 1;
  opacity: 0.7;
  stroke-dasharray: 130;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.9s var(--ease-out), width 0.7s var(--ease-out);
}
.logo:hover .logo__word { letter-spacing: 0.3em; }
.logo:hover .logo__swoosh { width: 120px; animation: draw 0.9s var(--ease-out); }
/* the mark splits on hover: the tab slides out along the seam, then clicks home with a small overshoot */
.logo__tab { transition: transform 0.6s cubic-bezier(0.34, 1.8, 0.5, 1); }
.logo:hover .logo__tab,
.logo:focus-visible .logo__tab { transform: translate(8px, -8px); transition: transform 0.5s var(--ease-out); }
@keyframes draw { from { stroke-dashoffset: 130; } to { stroke-dashoffset: 0; } }

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 26px;
}

.search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
}
.search__icon { cursor: pointer; transition: transform 0.5s var(--ease-out); }
.search__icon svg { width: 19px; height: 19px; }
.search input {
  width: 135px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: var(--paper);
  font: 500 12.5px var(--f-body);
  outline: none;
  transition: width 0.6s var(--ease-out);
}
.search input::placeholder { color: var(--paper); opacity: 0.9; transition: opacity 0.3s; }
.search input::-webkit-search-cancel-button { filter: invert(1); opacity: 0.5; }
.search__line {
  position: absolute;
  left: 33px;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: rgba(255, 255, 255, 0.28);
  overflow: hidden;
}
.search__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--ember), var(--paper));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease-out);
}
.search:hover .search__icon { transform: rotate(-12deg) scale(1.08); }
.search:hover .search__line::after { transform: scaleX(0.35); }
.search:focus-within .search__line::after { transform: scaleX(1); }
.search:focus-within input { width: 190px; }
.search:focus-within input::placeholder { opacity: 0.35; }

.topbar__divider { width: 1px; height: 30px; background: var(--line); }

.signin {
  position: relative;
  font-size: 12.5px;
  font-weight: 500;
  padding: 8px 0;
}
.signin::before,
.signin::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: rgba(255, 255, 255, 0.28);
}
.signin::after {
  background: var(--paper);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.6s var(--ease-out);
}
.signin:hover::after { transform: scaleX(1); transform-origin: left; }
.signin span { display: inline-block; transition: transform 0.5s var(--ease-out); }
.signin:hover span { transform: translateY(-1px); }

.menu-btn {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-strong);
  transition: border-color 0.3s, transform 0.5s var(--ease-out);
}
.menu-btn svg { width: 16px; height: 16px; position: relative; transition: color 0.3s, transform 0.5s var(--ease-out); }
.menu-btn:hover { border-color: var(--paper); transform: scale(1.06); }
.menu-btn:hover::before { transform: scale(1); }
.menu-btn:hover svg { color: var(--ink); transform: rotate(90deg); }

/* =========================================================
   SIDE NAV
   ========================================================= */
.sidenav {
  position: absolute;
  z-index: 4;
  left: calc(var(--gutter) - 4px);
  top: 88px;
}
.sidenav ul {
  position: relative;
  padding-left: 23px;
}
/* the rail fades out below the last stop; the links themselves stay crisp */
.sidenav ul::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 30px;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, var(--line) 70%, transparent);
}
.sidenav li { position: relative; }
.sidenav a {
  position: relative;
  display: inline-block;
  padding: 8px 0;
  font-size: 13px;
  color: var(--paper-dim);
  transition: color 0.35s, transform 0.5s var(--ease-out);
}
/* active marker & hover tick on the rail */
.sidenav a::before {
  content: "";
  position: absolute;
  left: -23px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--paper);
  transform: scale(0);
  transition: transform 0.4s var(--ease-out);
}
.sidenav a::after {
  content: "";
  position: absolute;
  left: -21px;
  top: 50%;
  width: 12px;
  height: 1px;
  background: var(--ember);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease-out);
}
.sidenav a[aria-current="page"] { color: var(--paper); font-weight: 600; }
.sidenav a[aria-current="page"]::before { transform: scale(1); }
.sidenav a:not([aria-current]):hover { color: var(--paper); transform: translateX(6px); }
.sidenav a:not([aria-current]):hover::after { transform: scaleX(1); }

/* =========================================================
   INTRO / HEADLINE
   ========================================================= */
.intro {
  grid-row: 2;
  position: relative;
  z-index: 3;
  align-self: start;
  padding: clamp(28px, 4.2vh, 60px) 0 40px clamp(170px, 13.9vw, 300px);
  max-width: min(640px, 48vw);
  pointer-events: none;
}
.intro > * { pointer-events: auto; }
.intro:focus { outline: none; } /* skip-link target: focus lands here, the next Tab reaches the CTA */

.headline {
  width: max-content; /* sized by its longest line, so a narrow intro never splits "builds alone." */
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(40px, min(3.7vw, 7.4vh), 78px);
  line-height: 0.96;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
.headline .line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
  margin-bottom: -0.06em;
}
.headline .line > span { display: inline-block; white-space: nowrap; }
/* room inside the clip for the hover below: the letters spread ~0.5em, the dot drifts 0.12em */
.headline .line:last-child { padding-right: 0.7em; margin-right: -0.7em; }
.headline em {
  display: inline-block;
  font-style: italic;
  padding-right: 0.04em;
  transition: letter-spacing 1.1s var(--ease-out), color 0.6s;
}
.headline .dot { font-style: normal; display: inline-block; transition: transform 1.1s var(--ease-out); }
/* hover "alone" — the letters drift apart */
.headline em:hover { letter-spacing: 0.08em; color: #fff3e4; }
.headline em:hover + .dot { transform: translateX(0.12em); }

.lede {
  margin-top: 22px;
  max-width: 21.5em;
  font-size: clamp(13px, 0.9vw, 16px);
  line-height: 1.55;
  color: rgba(244, 239, 231, 0.9);
}

.cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-top: 30px;
  padding-right: 20px;
  height: 40px;
  isolation: isolate;
}
.cta::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 40px;
  border-radius: 999px;
  background: var(--paper);
  z-index: -1;
  transition: width 0.7s var(--ease-out), box-shadow 0.6s;
}
.cta__btn { width: 40px; height: 40px; flex: none; color: var(--ink); }
.cta__btn svg { width: 16px; height: 16px; transition: transform 0.6s var(--ease-out); }
.cta__label {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.45s var(--ease-out), transform 0.6s var(--ease-out);
}
.cta:hover::before,
.cta:focus-visible::before { width: 100%; box-shadow: 0 10px 40px -10px rgba(242, 178, 122, 0.6); }
.cta:hover .cta__label,
.cta:focus-visible .cta__label { color: var(--ink); transform: translateX(-4px); }
.cta:hover .cta__btn svg { transform: rotate(-45deg); }
.cta__label.is-swapping { animation: swap 0.6s var(--ease-out); }
@keyframes swap {
  0% { opacity: 1; transform: translateY(0); }
  40% { opacity: 0; transform: translateY(-8px); }
  41% { transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

.rail { display: none; }

/* =========================================================
   HANDWRITTEN NOTES
   ========================================================= */
.note {
  position: absolute;
  z-index: 3;
  font-family: var(--f-hand);
  font-weight: 400;
  font-size: clamp(18px, 1.45vw, 25px);
  line-height: 1.08;
  color: rgba(244, 239, 231, 0.9);
  transform: rotate(-14deg);
  pointer-events: none;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}
.note span { display: block; }
.note span:nth-child(2) { margin-left: 0.5em; }
.note span:nth-child(3) { margin-left: 1em; }
.note span:nth-child(4) { margin-left: 1.3em; }
.note__strike {
  width: 2.7em;
  height: 0.6em;
  margin: 0.3em 0 0 1em;
  stroke: var(--ember-deep);
  stroke-width: 1.4;
  stroke-dasharray: 90;
}
.note--sky { right: clamp(30px, 5.5vw, 110px); top: clamp(96px, 11vh, 140px); }
.note--sky.is-away { visibility: hidden; } /* fitStage: a destination needs this corner */
.note--ground { left: clamp(36px, 4.3vw, 90px); bottom: calc(100% + clamp(24px, 5vh, 70px)); }
.note--ground span:nth-child(3) { margin-left: 0; }
.note--ground span:nth-child(4) { margin-left: 0.4em; }

/* =========================================================
   DOCK (bottom panels)
   ========================================================= */
.dock {
  grid-row: 3;
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(18px, 2vw, 32px);
  align-items: stretch;
}

.panel {
  --mx: 50%;
  --my: 50%;
  position: relative;
  background: linear-gradient(180deg, rgba(20, 21, 27, 0.74), rgba(11, 12, 15, 0.9));
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
          backdrop-filter: blur(16px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
/* cursor-following light inside the glass */
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(242, 178, 122, 0.07), transparent 60%);
  opacity: 0;
  transition: opacity 0.6s;
}
.panel:hover::before { opacity: 1; }

.panel--solve {
  border-left: 0;
  border-radius: 0 14px 14px 0;
  padding: 24px 32px 36px clamp(40px, 4.3vw, 70px);
}
.panel--stories {
  border-right: 0;
  border-radius: 14px 0 0 14px;
  padding: 22px clamp(24px, 2.4vw, 40px) 20px clamp(40px, 4.4vw, 70px);
}

.eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  font-stretch: 125%;
  letter-spacing: 0.22em;
  line-height: 1.6;
  text-transform: uppercase;
}
.eyebrow__arrow {
  display: inline-block;
  width: 22px;
  height: 14px;
  margin-left: 6px;
  vertical-align: -1px;
  stroke: var(--ember-deep);
  stroke-width: 1.3;
  transition: transform 0.6s var(--ease-out);
}
.panel:hover .eyebrow__arrow { transform: translate(4px, -3px); }

/* ---------- tiles ---------- */
.tiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 90px)); /* shrink, never clip, on a narrow dock */
  gap: clamp(12px, 1.4vw, 22px);
  margin-top: 26px;
}
.tile {
  --tx: 50%;
  --ty: 50%;
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 12px;
  height: 100px;
  padding: 10px 6px;
  text-align: center;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(244, 239, 231, 0.88);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 6px;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.55s var(--ease-out), border-color 0.4s, background-color 0.4s, box-shadow 0.55s var(--ease-out), color 0.3s;
}
.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120px circle at var(--tx) var(--ty), rgba(242, 178, 122, 0.22), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s;
}
.tile svg {
  width: 26px;
  height: 26px;
  stroke-width: 1.25;
  transition: transform 0.6s var(--ease-out), color 0.4s, filter 0.4s;
}
.tile:hover,
.tile:focus-visible {
  transform: translateY(-5px);
  color: var(--paper);
  border-color: rgba(242, 178, 122, 0.45);
  background-color: rgba(255, 255, 255, 0.05);
  box-shadow: 0 18px 34px -16px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(242, 178, 122, 0.08) inset;
}
.tile:hover::before { opacity: 1; }
.tile:hover svg,
.tile:focus-visible svg {
  transform: translateY(-3px) scale(1.12);
  color: var(--ember);
  filter: drop-shadow(0 0 8px rgba(242, 178, 122, 0.55));
}
.tile:active { transform: translateY(-2px) scale(0.98); }
.tile[aria-pressed="true"] {
  color: var(--ink);
  background-color: var(--paper);
  border-color: var(--paper);
  box-shadow: 0 16px 40px -14px rgba(242, 178, 122, 0.55);
}
.tile[aria-pressed="true"] svg { color: var(--ink); filter: none; }
.tile[aria-pressed="true"]::before { opacity: 0; }

/* ---------- stories ---------- */
.stories {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(16px, 1.6vw, 26px);
  margin-top: 14px;
}
.stories__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(146px, 10.8vw, 200px);
  gap: 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 6px 2px 8px;
  margin: -6px -2px -8px;
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
          mask-image: linear-gradient(90deg, #000 88%, transparent);
}
.stories__track::-webkit-scrollbar { display: none; }
.stories__track.is-end {
  -webkit-mask-image: none;
          mask-image: none;
}

.story { scroll-snap-align: start; }
/* a still with its caption: the picture fills the card, the quote sits on its lower part */
.story__link {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: clamp(124px, 17vh, 176px);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.6s var(--ease-out), border-color 0.4s, box-shadow 0.6s var(--ease-out), background-color 0.4s;
}
.story__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ember), var(--dusk));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease-out);
  z-index: 2;
}
.story__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 70% at 75% 30%, rgba(255, 180, 130, 0.55), transparent 70%),
    linear-gradient(180deg, #5b4150 0%, #2a2228 70%, #17151a 100%);
}
.story__media--b { background: radial-gradient(ellipse 70% 70% at 25% 30%, rgba(160, 150, 190, 0.4), transparent 70%), linear-gradient(180deg, #3b3a48, #18171d); }
.story__media--c { background: radial-gradient(ellipse 60% 70% at 80% 20%, rgba(230, 170, 140, 0.35), transparent 70%), linear-gradient(180deg, #34333b, #141418); }
.story__media--d { background: radial-gradient(ellipse 70% 70% at 60% 25%, rgba(242, 178, 122, 0.45), transparent 70%), linear-gradient(180deg, #4a3a3a, #19161a); }
.story__media--e { background: radial-gradient(ellipse 70% 70% at 30% 20%, rgba(200, 143, 166, 0.45), transparent 70%), linear-gradient(180deg, #403544, #17151b); }
.story__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 11, 14, 0) 34%, rgba(10, 11, 14, 0.74) 62%, rgba(10, 11, 14, 0.94));
}
.story__ph {
  position: absolute;
  left: 50%;
  top: 4%;
  width: 70%;
  height: 80%;
  transform: translateX(-50%);
  fill: #0c0c0f;
  stroke: none;
  opacity: 0.95;
}
.story__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story__ph,
.story__media img { transition: transform 1.1s var(--ease-out), filter 0.6s; }
.story__play {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 36%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--paper);
  transition: background-color 0.4s, transform 0.5s var(--ease-out), color 0.3s;
}
.story__play svg { width: 18px; height: 18px; margin-left: 2px; }

.story blockquote,
.story cite { position: relative; }
.story blockquote {
  padding: 0 12px;
  font-size: 11px;
  line-height: 1.45;
  color: rgba(244, 239, 231, 0.92);
  text-shadow: 0 1px 8px rgba(8, 9, 12, 0.8);
  transition: color 0.4s;
}
.story cite {
  padding: 6px 12px 10px;
  font-size: 9px;
  font-style: normal;
  color: var(--paper-faint);
  transition: color 0.4s, letter-spacing 0.6s var(--ease-out);
}

.story__link:hover,
.story__link:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, 0.14);
  background-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 24px 40px -20px rgba(0, 0, 0, 0.95);
}
.story__link:hover::after,
.story__link:focus-visible::after { transform: scaleX(1); }
.story__link:hover .story__ph,
.story__link:hover .story__media img { transform: translateX(-50%) scale(1.08); }
.story__link:hover .story__media img { transform: scale(1.08); }
.story__link:hover blockquote { color: #fff; }
.story__link:hover cite { color: var(--ember); letter-spacing: 0.04em; }
.story__link:hover .story__play { background: var(--paper); color: var(--ink); transform: scale(1.12); }

.stories__next {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-strong);
  transition: border-color 0.3s, transform 0.5s var(--ease-out);
}
.stories__next svg { width: 15px; height: 15px; position: relative; transition: color 0.3s, transform 0.5s var(--ease-out); }
.stories__next:hover { border-color: var(--paper); transform: scale(1.08); }
.stories__next:hover::before { transform: scale(1); }
.stories__next:hover svg { color: var(--ink); animation: arrow-loop 0.6s var(--ease-out); }
.stories__next.is-reset svg { transform: rotate(180deg); }

/* =========================================================
   FOOTER STRIP
   ========================================================= */
.strip {
  grid-row: 4;
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 18px var(--gutter);
  font-size: 8.5px;
  font-weight: 500;
  font-stretch: 125%;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--paper-faint);
}
.strip i { font-style: normal; margin: 0 0.5em; opacity: 0.6; }
.strip p { transition: color 0.5s, letter-spacing 0.8s var(--ease-out); }
.strip p:hover { color: var(--paper); letter-spacing: 0.34em; }

/* =========================================================
   CINEMATIC FOCUS
   When the pointer rests on a button, the painting drops into soft,
   dim focus and a feathered window of light stays on that button.
   The veil is placed inside the scene (by js), right above the art and
   under its shade, the motes, the hotspots and every word, so text
   never blurs or dims. Two crossed gradient masks cut the window;
   registered properties let it glide from one button to the next.
   The blur is painted ahead of time (hero-bg-soft) and drifts with the
   parallax inside the veil, so the mask only changes when the window
   moves: a live backdrop-filter under a moving mask costs a full
   re-blur every frame and drops the glide to 30fps.
   --fx/--fy: centre · --fw/--fh: half size · --fs: soft edge (set by js,
   in scene space)
   ========================================================= */
@property --fx { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fy { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fw { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fh { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fs { syntax: "<length>"; inherits: false; initial-value: 64px; }

.veil {
  --glide: 0.7s var(--ease-out);
  --follow: --fx var(--glide), --fy var(--glide), --fw var(--glide), --fh var(--glide), --fs var(--glide);
  --x0: calc(var(--fx) - var(--fw));
  --x1: calc(var(--fx) + var(--fw));
  --y0: calc(var(--fy) - var(--fh));
  --y1: calc(var(--fy) + var(--fh));
  --window:
    linear-gradient(90deg, #000 calc(var(--x0) - var(--fs)), transparent var(--x0), transparent var(--x1), #000 calc(var(--x1) + var(--fs))),
    linear-gradient(180deg, #000 calc(var(--y0) - var(--fs)), transparent var(--y0), transparent var(--y1), #000 calc(var(--y1) + var(--fs)));
  position: absolute;
  inset: 0; /* no z-index: it paints in source order inside the scene */
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  -webkit-mask: var(--window);
  mask: var(--window);
  transition: opacity 0.45s var(--ease-out), visibility 0s 0.45s, var(--follow);
}
/* the painting out of focus */
.veil__media {
  position: absolute;
  inset: 0;
  background: url("../assets/hero/hero-bg-soft.webp") center / cover no-repeat;
}
.scene[data-art="portrait"] .veil__media { background-image: url("../assets/hero/hero-bg-portrait-soft.webp"); }
/* light falls off away from the subject, like a follow-spot */
.veil::after {
  --fx: inherit;
  --fy: inherit;
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--fx) var(--fy), rgba(8, 9, 12, 0.24), rgba(8, 9, 12, 0.66) 80%);
}
.veil.is-on {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.8s var(--ease-out), visibility 0s, var(--follow);
}
/* first light after a rest: the window appears in place instead of flying in */
.veil.is-snap { transition: none; }

/* =========================================================
   MENU OVERLAY
   ========================================================= */
.menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 26px var(--gutter) 34px;
  background:
    radial-gradient(ellipse 60% 50% at 85% 20%, rgba(201, 143, 166, 0.16), transparent 70%),
    radial-gradient(ellipse 50% 50% at 10% 90%, rgba(242, 178, 122, 0.1), transparent 70%),
    rgba(8, 9, 12, 0.94);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  clip-path: circle(0 at calc(100% - var(--gutter) - 17px) 43px);
  transition: clip-path 0.9s var(--ease-io);
}
.menu[hidden] { display: none; }
.menu.is-open { clip-path: circle(150% at calc(100% - var(--gutter) - 17px) 43px); }
.menu__close { justify-self: end; }
.menu__list {
  align-self: center;
  counter-reset: m;
  padding-left: clamp(0px, 10vw, 220px);
}
.menu__list li { overflow: hidden; }
.menu__list a {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 18px;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(36px, min(5.2vw, 9vh), 80px);
  line-height: 1.1;
  color: var(--paper-dim);
  transform: translateY(110%);
  transition: transform 0.9s var(--ease-out), color 0.4s;
  transition-delay: calc(var(--i, 0) * 60ms + 200ms), 0s;
}
.menu.is-open .menu__list a { transform: translateY(0); }
.menu__list a:hover { color: var(--paper); font-style: italic; }
.menu__list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.12em;
  height: 1px;
  width: 100%;
  background: var(--ember);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease-out);
}
.menu__list a:hover::after { transform: scaleX(1); }
.menu__foot {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
}
.note--menu { position: static; transform: rotate(-4deg); font-size: 24px; }

/* =========================================================
   INTRO CHOREOGRAPHY (only with JS)
   ========================================================= */
.js .stage__media,
.js .veil__media { transform: scale(1.14); }
.js.is-ready .stage__media,
.js.is-ready .veil__media { transform: scale(1); transition: transform 3.2s var(--ease-out); }

.js .topbar,
.js .sidenav,
.js .lede,
.js .cta,
.js .strip { opacity: 0; transform: translateY(14px); }
.js .headline .line > span { transform: translateY(108%); }
.js .hotspot__pin { opacity: 0; transform: scale(0.3); }
.js .hotspot__lead { transform: scaleY(0); }
.js .hotspot__label { opacity: 0; }
.js .hotspot__label .hotspot__title,
.js .hotspot__label .hotspot__sub { translate: calc(var(--side) * -12px) 0; }
.js .dock .panel { opacity: 0; transform: translateY(40px); }
.js .note { opacity: 0; }
.js .note__strike { stroke-dashoffset: 90; }

.js.is-ready .topbar,
.js.is-ready .sidenav,
.js.is-ready .lede,
.js.is-ready .cta,
.js.is-ready .strip {
  opacity: 1;
  transform: none;
  transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out);
}
.js.is-ready .topbar { transition-delay: 0.2s; }
.js.is-ready .sidenav { transition-delay: 0.45s; }
.js.is-ready .lede { transition-delay: 0.9s; }
.js.is-ready .cta { transition-delay: 1.05s; }
.js.is-ready .strip { transition-delay: 1.6s; }

.js.is-ready .headline .line > span { transform: none; transition: transform 1.3s var(--ease-out); }
.js.is-ready .headline .line:nth-child(1) > span { transition-delay: 0.35s; }
.js.is-ready .headline .line:nth-child(2) > span { transition-delay: 0.47s; }
.js.is-ready .headline .line:nth-child(3) > span { transition-delay: 0.59s; }

/* each destination lights up, draws its leader, then its words slide out of it, sharp from the first frame */
.js.is-ready .hotspot__pin {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: calc(1.1s + var(--d) * 0.12s);
}
.js.is-ready .hotspot__lead {
  transform: none;
  transition: transform 0.8s var(--ease-io);
  transition-delay: calc(1.3s + var(--d) * 0.12s);
}
.js.is-ready .hotspot__label {
  opacity: 1;
  transition: opacity 0.8s var(--ease-out), transform 0.6s var(--ease-out);
  transition-delay: calc(1.75s + var(--d) * 0.12s);
}
/* translate moves only the text, never the label box, so placement can measure it at any time */
.js.is-ready .hotspot__label .hotspot__title {
  translate: none;
  transition: translate 1.1s var(--ease-out) calc(1.75s + var(--d) * 0.12s), letter-spacing 0.6s var(--ease-out), color var(--t);
}
.js.is-ready .hotspot__label .hotspot__sub {
  translate: none;
  transition: translate 1.1s var(--ease-out) calc(1.83s + var(--d) * 0.12s), color var(--t);
}
.js.is-ready.is-settled .hotspot__pin,
.js.is-ready.is-settled .hotspot__lead,
.js.is-ready.is-settled .hotspot__label { transition-delay: 0s; }

.js.is-ready .dock .panel { opacity: 1; transform: none; transition: opacity 1s var(--ease-out), transform 1.3s var(--ease-out), border-color 0.4s; }
.js.is-ready .dock .panel--solve { transition-delay: 1.1s; }
.js.is-ready .dock .panel--stories { transition-delay: 1.25s; }

.js.is-ready .note { opacity: 1; transition: opacity 1.2s var(--ease-out) 1.8s; }
.js.is-ready .note__strike { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s var(--ease-out) 2.3s; }

/* =========================================================
   EDIT MODE (?edit) — drag hotspots to match your image
   ========================================================= */
.edit-mode .hotspot__pin { cursor: grab; outline: 1px dashed rgba(242, 178, 122, 0.8); border-radius: 50%; }
.edit-mode .hotspot.is-dragging .hotspot__pin { cursor: grabbing; }
.edit-panel {
  position: fixed;
  z-index: 60;
  right: 16px;
  bottom: 16px;
  width: min(380px, calc(100vw - 32px));
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(10, 11, 14, 0.92);
  border: 1px solid rgba(242, 178, 122, 0.4);
  font: 12px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: pre;
  overflow-x: auto;
}

/* =========================================================
   LARGE SCREENS
   ========================================================= */
@media (min-width: 1800px) and (min-height: 1000px) {
  .tiles { grid-template-columns: repeat(6, minmax(90px, 110px)); }
  .tile { height: 116px; font-size: 13px; }
  .eyebrow { font-size: 12.5px; }
  .story blockquote { font-size: 12.5px; }
}

/* short desktop screens (laptops, browser chrome, zoom): everything still fits one view */
@media (min-width: 1024px) and (max-height: 820px) {
  .topbar { padding-top: 18px; }
  .sidenav { top: 74px; }
  .sidenav a { padding-block: 6px; }
  .intro { padding-top: clamp(16px, 3vh, 28px); padding-bottom: 20px; }
  .lede { margin-top: 16px; }
  .cta { margin-top: 22px; }
  .eyebrow br { display: none; }
  .panel--solve { padding-top: 18px; padding-bottom: 24px; }
  .panel--stories { padding-top: 16px; padding-bottom: 16px; }
  .tiles { margin-top: 18px; }
  .tile { height: 84px; gap: 8px; }
  .stories { margin-top: 12px; }
  .story cite { padding-block: 5px 8px; }
  .strip { padding-block: 10px; }
  .note--sky { right: clamp(24px, 3vw, 110px); top: 80px; font-size: clamp(17px, 1.3vw, 22px); }
  .note--ground { bottom: calc(100% + 18px); font-size: clamp(16px, 1.25vw, 21px); }
}
@media (min-width: 1024px) and (max-height: 700px) {
  .topbar { padding-top: 14px; }
  .sidenav { top: 64px; }
  .intro { padding-top: 6px; }
  .headline { font-size: clamp(44px, 3.8vw, 70px); }
  .lede { margin-top: 10px; }
  .cta { margin-top: 14px; }
  .tiles { margin-top: 14px; }
  .tile { height: 72px; }
  .story__link { height: 112px; }
  .strip { padding-block: 8px; }
  .note--ground { bottom: calc(100% + 12px); }
  /* "No founder" shares a line, which lifts the lede and the CTA clear of the clinic */
  .headline .line:nth-child(-n+2) { display: inline-block; vertical-align: top; }
}

/* narrow desktops: the tiles shrink instead of clipping, the words stay left of the buildings */
@media (min-width: 1024px) and (max-width: 1240px) {
  .panel--solve { padding-left: 28px; padding-right: 20px; }
  .tiles { gap: 8px; }
  .tile { padding-inline: 3px; font-size: 11.5px; }
  .lede { max-width: 17.5em; }
  .note--sky { right: 16px; font-size: 16px; }
}

/* =========================================================
   TABLET / MOBILE — the scene becomes a header image,
   destinations become a swipeable rail
   ========================================================= */
@media (max-width: 1023px), (max-aspect-ratio: 7/5) {
  .hero { display: block; min-height: 0; overflow: visible; }

  .scene {
    height: 100vh;
    height: 100svh;
    min-height: 640px;
    bottom: auto;
  }
  .scene__shade {
    background:
      /* a soft shadow pooled behind the words, so the lede reads over the lit rooms */
      radial-gradient(140% 34% at 0% 40%, rgba(8, 9, 12, 0.62) 0%, rgba(8, 9, 12, 0.3) 55%, rgba(8, 9, 12, 0) 100%),
      linear-gradient(180deg, rgba(8, 9, 12, 0.6) 0%, rgba(8, 9, 12, 0.1) 30%, rgba(8, 9, 12, 0.2) 55%, rgba(8, 9, 12, 0.92) 88%, var(--ink) 100%);
  }
  .hotspots,
  .sidenav,
  .search,
  .topbar__divider,
  .topbar__actions > .signin,
  .note--ground { display: none; }

  .topbar { padding-top: max(20px, env(safe-area-inset-top)); }

  .intro {
    max-width: none;
    min-height: calc(100svh - 70px);
    display: flex;
    flex-direction: column;
    padding: 9vh var(--gutter) 28px;
  }
  .headline { width: auto; font-size: clamp(52px, 13vw, 92px); }
  .headline .line > span { white-space: normal; } /* a 320px phone may still need to wrap */
  .headline .line:last-child { padding-right: var(--gutter); margin-right: calc(var(--gutter) * -1); } /* hover room ends at the screen edge */
  .lede { max-width: 360px; text-shadow: 0 1px 2px rgba(8, 9, 12, 0.6), 0 0 22px rgba(8, 9, 12, 0.75); }

  .note--sky { top: 92px; right: 20px; font-size: 20px; }

  .rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(78%, 280px);
    gap: 12px;
    margin: auto calc(var(--gutter) * -1) 0;
    padding: 40px var(--gutter) 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail__item {
    scroll-snap-align: start;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr; /* titles share one top line, even when a neighbour's subline wraps */
    align-items: start;
    gap: 4px 14px;
    padding: 16px 16px 16px 18px;
    border-radius: 12px;
    background: rgba(14, 15, 19, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
    transition: border-color 0.4s, background-color 0.4s, transform 0.5s var(--ease-out);
  }
  .rail__item:active { transform: scale(0.98); }
  .rail__item:hover { border-color: rgba(242, 178, 122, 0.45); background-color: rgba(20, 21, 27, 0.75); }
  .rail__item .hotspot__title { font-size: 13px; }
  .rail__item .hotspot__sub { margin: 0; grid-column: 1; font-size: 12.5px; }
  .rail__item .hotspot__btn { grid-column: 2; grid-row: 1 / span 2; margin: 0; align-self: center; }
  .rail__item .hotspot__btn::after { display: none; }
  .rail__item:hover .hotspot__btn::before,
  .rail__item:focus-visible .hotspot__btn::before { transform: scale(1); }
  .rail__item:hover .hotspot__btn svg,
  .rail__item:focus-visible .hotspot__btn svg { color: var(--ink); }

  .dock {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 12px var(--gutter) max(32px, env(safe-area-inset-bottom));
  }
  .panel--solve,
  .panel--stories {
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    padding: 24px 20px;
  }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
  .tile { height: 96px; }

  .stories { grid-template-columns: 1fr; }
  /* cards are a fraction of the row, so a cut card always peeks at the edge (a fixed width sits flush at some size) */
  .stories__track {
    grid-auto-columns: calc((100% - 2 * 14px) / 2.5);
    margin-right: -20px;
    padding-right: 20px;
  }
  @media (min-width: 900px) { .stories__track { grid-auto-columns: calc((100% - 3 * 14px) / 3.5); } }
  /* room for all five: nothing to scroll, so the edge fade drops */
  @media (min-width: 1200px) { .stories__track { grid-auto-columns: calc((100% - 4 * 14px) / 5); } }
  .story__link { height: 196px; }
  .stories__next { display: none; }

  /* the page ends on the stories: no footer strip on tablets and phones */
  .strip { display: none; }
}

@media (max-width: 560px) {
  .note--sky { display: none; }
  .stories__track { grid-auto-columns: calc((100% - 14px) / 1.6); }
  .intro { padding-top: 7vh; }
  .lede { font-size: 14.5px; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .fog, .motes { display: none; }
}