/* ============================================================
   3DKeene — sleek and modern, with the splat-dot identity.
   Type: Alte Haas Grotesk. Color: the logo's navy→teal→green,
   which doubles as the site's timeline — navy is "before",
   teal is "during", green is "after".
   ============================================================ */

@font-face {
  font-family: 'Alte Haas Grotesk';
  src: url('../fonts/AlteHaasGroteskRegular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Alte Haas Grotesk';
  src: url('../fonts/AlteHaasGroteskBold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

:root {
  --bg: #ffffff;
  --bg-alt: #f2f7f3;
  --ink: #2c2c2c;
  --ink-2: #64696a;
  --hairline: #d7dcd8;

  /* the logo gradient, and what each stop means */
  --blue: #4a6fa8;       /* before */
  --blue-deep: #2c4a78;
  --teal: #3d9c7c;       /* during */
  --teal-deep: #25705a;
  --green: #49b455;      /* after */
  --green-deep: #2e8038;
  --grad: linear-gradient(105deg, var(--blue), var(--teal) 52%, var(--green));

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --nav-h: 56px;
  --font: 'Alte Haas Grotesk', -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
    Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: rgba(61, 175, 69, 0.25);
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--teal-deep);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--teal-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- layout helpers ----------------------------------------- */

.container {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: max(22px, 4vw);
}

.narrow {
  max-width: 720px;
  margin-inline: auto;
}

/* --- gradient text -------------------------------------------- */

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* the logo's green, bright-to-deep top-down, lifted just enough to
   hold up over the dark hero shade */
.hero .grad-text {
  background: linear-gradient(180deg, #5ed353 10%, #379a3c 90%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* --- nav ------------------------------------------------------ */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  height: var(--nav-h);
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(30, 42, 46, 0.08);
}

.nav__inner {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: max(22px, 4vw);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__brand {
  display: flex;
  align-items: center;
}

/* the logo is a full wordmark now — the image carries the name */
.nav__brand img {
  height: 26px;
  width: auto;
}

.nav__brand:hover {
  text-decoration: none;
}

.nav__links {
  display: flex;
  gap: 28px;
}

.nav__links a {
  color: var(--ink);
  font-size: 15px;
  opacity: 0.85;
}

.nav__links a:hover {
  opacity: 1;
  color: var(--teal-deep);
  text-decoration: none;
}

/* --- buttons -------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 980px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.btn:hover {
  text-decoration: none;
  transform: scale(1.03);
}

.btn--primary {
  background: #37993f;
  color: #fff;
  box-shadow: 0 4px 16px rgba(55, 153, 63, 0.32);
}

.btn--primary:hover {
  background: var(--green-deep);
  box-shadow: 0 6px 22px rgba(55, 153, 63, 0.42);
}

/* the hero's single call to action — a little more presence */
.btn--hero {
  font-size: 17px;
  padding: 15px 34px;
}

.btn--hero:hover {
  transform: scale(1.05);
}

.btn--light {
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.btn--ghost {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.26);
}

/* --- hero (prerendered flythrough over the live splat) --------- */

.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: #10161a;
}

.hero__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.hero:not(.is-live) .hero__frame {
  pointer-events: none;
}

/* the media layer sits over the (already loading) live viewer */

.hero__media {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform-origin: 50% 42%; /* whoosh toward the head of the square, not the pavement */
}

.hero__still,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* soft-focus behind the headline; the scale hides the blur's fuzzy edges */
  filter: blur(6px);
}

/* slow settle on the still — the prerendered video replaces this motion */
.hero__still {
  animation: hero-drift 16s cubic-bezier(0.2, 0.6, 0.35, 1) both;
}

@keyframes hero-drift {
  from { transform: scale(1.1); }
  to { transform: scale(1.04); }
}

/* the video fades in over the still once it can actually play */
.hero__video {
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 900ms ease;
}

.hero__video.is-ready {
  opacity: 1;
}

.hero.is-live .hero__media {
  opacity: 0;
  visibility: hidden;
}

/* --- the push-through: fly between the words into the live scan - */

.hero.is-entering .hero__media {
  animation: hero-whoosh 1150ms cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

@keyframes hero-whoosh {
  0% {
    transform: scale(1);
    filter: blur(0) brightness(1);
    opacity: 1;
  }
  45% {
    opacity: 1;
    filter: blur(3px) brightness(1.08);
  }
  100% {
    transform: scale(3.4);
    filter: blur(30px) brightness(1.8);
    opacity: 0;
  }
}

/* each word blasts past the camera along its own path: top line up
   and out, bottom line down and out — the camera threads the gap */
.hero.is-entering .hero__title .w {
  animation: hero-word-fly 850ms cubic-bezier(0.55, 0, 0.85, 0.4) var(--d, 0ms) forwards;
}

@keyframes hero-word-fly {
  55% {
    opacity: 1;
    filter: blur(1px);
  }
  100% {
    transform: translate3d(calc(var(--fx) * 75vw), calc(var(--fy) * 70vh), 0) scale(5.5);
    opacity: 0;
    filter: blur(14px);
  }
}

.hero.is-entering .hero__eyebrow {
  animation: hero-fly-up 700ms cubic-bezier(0.55, 0, 0.85, 0.4) forwards;
}

@keyframes hero-fly-up {
  55% { opacity: 1; }
  100% {
    transform: translate3d(0, -60vh, 0) scale(4);
    opacity: 0;
    filter: blur(10px);
  }
}

.hero.is-entering .hero__actions {
  animation: hero-fly-down 780ms cubic-bezier(0.55, 0, 0.85, 0.4) 60ms forwards;
}

@keyframes hero-fly-down {
  55% { opacity: 1; }
  100% {
    transform: translate3d(0, 65vh, 0) scale(4);
    opacity: 0;
    filter: blur(10px);
  }
}

.hero.is-entering .hero__scroll {
  animation: hero-cue-out 250ms ease forwards;
}

@keyframes hero-cue-out {
  to { opacity: 0; }
}

.hero.is-entering .hero__shade {
  opacity: 0;
}

/* coming back out: the footage rushes back into place */
.hero.is-exiting .hero__media {
  animation: hero-whoosh-back 850ms cubic-bezier(0.2, 0.7, 0.25, 1) forwards;
}

@keyframes hero-whoosh-back {
  from {
    transform: scale(2.4);
    filter: blur(20px) brightness(1.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    filter: blur(0) brightness(1);
    opacity: 1;
  }
}

/* --- page-load sequence: title rises line by line -------------- */

.hero__eyebrow,
.hero__title,
.hero__actions,
.hero__scroll {
  animation: hero-rise 850ms cubic-bezier(0.2, 0.7, 0.25, 1) both;
}

.hero__title { animation-delay: 120ms; }
.hero__actions { animation-delay: 280ms; }
.hero__scroll { animation-delay: 600ms; }

@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
}

.hero__shade {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 95% 75% at 50% 52%,
    rgba(12, 18, 20, 0.52),
    rgba(12, 18, 20, 0.22) 55%,
    rgba(12, 18, 20, 0) 80%
  );
  pointer-events: none;
  transition: opacity 400ms ease;
}

.hero__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--nav-h) max(22px, 4vw) 0;
  color: #fff;
  transition: opacity 400ms ease, transform 400ms ease;
}

.hero__eyebrow {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 16px;
}

.hero__title {
  font-size: clamp(44px, 7.5vw, 96px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-bottom: 34px;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.hero__line {
  display: block;
}

/* words are individual flyers for the push-through effect */
.hero__title .w {
  display: inline-block;
  will-change: transform;
}

.hero__title .grad-text {
  text-shadow: none;
}

/* --- the place-name slot reel ---------------------------------- */
/* names drop in from above, sit for a beat, then fall away; the
   slot's width eases so "This is" glides as name lengths change */

.hero__place {
  white-space: nowrap;
  transition: width 380ms cubic-bezier(0.2, 0.7, 0.25, 1);
}

.hero__place-word {
  display: inline-block;
  will-change: transform, opacity;
}

.hero__place-word.is-dropping-in {
  animation: place-drop-in 340ms cubic-bezier(0.2, 0.7, 0.25, 1) both;
}

.hero__place-word.is-dropping-out {
  animation: place-drop-out 260ms cubic-bezier(0.55, 0, 0.85, 0.4) both;
}

@keyframes place-drop-in {
  from {
    transform: translateY(-0.55em);
    opacity: 0;
    filter: blur(6px);
  }
}

@keyframes place-drop-out {
  to {
    transform: translateY(0.55em);
    opacity: 0;
    filter: blur(6px);
  }
}

/* phones: "This is" alone on the first line, the place name under it
   (margin auto keeps the JS-width slot centered as it glides) */
@media (max-width: 640px) {
  .hero__title .hero__place {
    display: block;
    margin-inline: auto;
  }
}

.hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* scroll cue, quiet and last to arrive */
.hero__scroll {
  position: absolute;
  bottom: 30px;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  opacity: 0.8;
}

.hero__scroll::after {
  content: '';
  position: absolute;
  inset: 0;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
  animation: hero-scroll-float 2.2s ease-in-out 1.8s infinite;
}

@keyframes hero-scroll-float {
  0%, 100% { transform: translateY(0) rotate(45deg); }
  50% { transform: translateY(7px) rotate(45deg); }
}

.hero.is-live .hero__shade,
.hero.is-live .hero__content {
  opacity: 0;
  pointer-events: none;
}

.hero.is-live .hero__content {
  transform: translateY(12px);
}

/* top center, clear of the viewer's own control bar at the bottom */
.hero__exit {
  position: absolute;
  top: calc(var(--nav-h) + 16px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  font-size: 14px;
  padding: 9px 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}

.hero.is-live .hero__exit {
  opacity: 1;
  pointer-events: auto;
}

/* --- controls hint, shown when you enter the splat -------------- */

.viewer-hint {
  position: absolute;
  top: calc(var(--nav-h) + 68px);
  left: 50%;
  transform: translate(-50%, -8px);
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 20px;
  max-width: min(92vw, 620px);
  padding: 11px 22px;
  border-radius: 20px;
  background: rgba(14, 22, 25, 0.66);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 350ms ease, transform 350ms ease, visibility 0s 350ms;
}

.viewer-hint.is-on {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 350ms ease, transform 350ms ease;
}

.viewer-hint__item {
  white-space: nowrap;
}

.viewer-hint__item b {
  color: #fff;
  font-weight: 700;
}

.hero__chip {
  position: absolute;
  top: calc(var(--nav-h) + 18px);
  left: max(22px, 4vw);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-radius: 980px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  pointer-events: none;
}

/* --- generic sections ---------------------------------------- */

.section {
  padding-block: clamp(72px, 11vw, 130px);
}

.section--alt {
  background: var(--bg-alt);
}

/* kicker with the three-dot signature: navy · teal · green */

.kicker {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin-bottom: 14px;
}

.kicker::before {
  content: '';
  display: block;
  width: 40px;
  height: 8px;
  margin-bottom: 10px;
  background-image:
    radial-gradient(circle closest-side, var(--blue) 96%, transparent),
    radial-gradient(circle closest-side, var(--teal) 96%, transparent),
    radial-gradient(circle closest-side, var(--green) 96%, transparent);
  background-size: 8px 8px;
  background-position: 0 0, 16px 0, 32px 0;
  background-repeat: no-repeat;
}

.center .kicker::before {
  margin-inline: auto;
}

.headline {
  text-wrap: balance;
  font-size: clamp(30px, 4.6vw, 52px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin-bottom: 18px;
}

.lede {
  font-size: clamp(17px, 2vw, 21px);
  color: var(--ink-2);
  max-width: 62ch;
}

.lede + .lede {
  margin-top: 1em;
}

.center {
  text-align: center;
}

.center .lede {
  margin-inline: auto;
}

/* logo shown large in story/about sections — a wide wordmark now */
.story-logo {
  width: min(320px, 72vw);
  margin: 0 auto 30px;
}

.story-actions { margin-top: 26px; }

/* --- story: the "why" text beside a live-updates sidebar ------- */

.story-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(36px, 5vw, 56px);
  align-items: stretch;
}

/* mobile: text stays centered, as it was before the sidebar */
.story-main { text-align: center; }
.story-main .story-logo { margin-inline: auto; }
.story-main .kicker::before,
.story-main .lede { margin-inline: auto; }

@media (min-width: 900px) {
  .story-grid {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 1fr);
    gap: clamp(56px, 7vw, 112px);
  }
  /* beside the card the text reads better left-aligned */
  .story-main { text-align: left; }
  .story-main .story-logo { margin-inline: 0; }
  .story-main .kicker::before,
  .story-main .lede { margin-inline: 0; }
}

/* the live-updates card — the newest moment from the timeline, posted
   like a dispatch: flat, hairline-bordered, with a phase-colored top
   edge (blue before, teal during, green after) and the site's gradient
   hairline as a divider. No motion. */
.live-card[hidden] { display: none; }

.live-card {
  display: flex;
  flex-direction: column;
  gap: 15px;
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--teal);
  border-radius: 8px;
  padding: 20px;
}

.live-card--before { border-top-color: var(--blue); }
.live-card--during { border-top-color: var(--teal); }
.live-card--after  { border-top-color: var(--green); }

.live-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.live-card__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--teal-deep);
}

/* a compact date, set like a stamp on an archived print */
.live-card__stamp {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ink-2);
  white-space: nowrap;
}

/* the brand's three-color gradient, drawn as a thin rule */
.live-card__rule {
  height: 2px;
  background: var(--grad);
}

.live-card__media {
  display: block;
  border-radius: 5px;
  overflow: hidden;
  flex: 1 1 auto;      /* grows so the card matches the text column's height */
  min-height: 230px;
  background: var(--bg-alt);
}

.live-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.live-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}

.live-card__title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.live-card__text {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* who took the shot — a small, human sign-off */
.live-card__credit {
  font-size: 12.5px;
  font-style: italic;
  color: var(--ink-2);
}

.live-card__btn { align-self: flex-start; margin-top: 3px; }

/* --- announcement video modal --------------------------------- */

.video-modal[hidden] { display: none; }

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 16, 18, 0.93);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.video-modal video {
  width: min(1100px, 100%);
  max-height: 82vh;
  border-radius: var(--radius-md);
  background: #000;
}

.video-modal__close {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  right: 18px;
}

/* --- phase chips: blue=before, teal=during, green=after ------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 980px;
  background: #eef1f0;
  color: var(--ink-2);
}

.chip--before { color: var(--blue-deep); background: #eaeff8; }
.chip--during { color: var(--teal-deep); background: #e6f3ee; }
.chip--after  { color: var(--green-deep); background: #e9f6e9; }

/* --- map ------------------------------------------------------ */

.map-card {
  height: clamp(380px, 56vh, 560px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(30, 42, 46, 0.12);
  background: var(--bg-alt);
}

.leaflet-container {
  font-family: var(--font);
}

.map-pin {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--green));
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(30, 42, 46, 0.35);
}

.map-pin--planned {
  background: #fff;
  border: 2px dotted var(--teal-deep);
  box-shadow: 0 1px 4px rgba(30, 42, 46, 0.2);
}

/* City rendering viewpoints: green = after, hollow = not built yet */
.map-pin--rendering {
  background: #fff;
  border: 3px solid var(--green);
  box-shadow: 0 1px 4px rgba(30, 42, 46, 0.2);
}

.map-popup__img {
  display: block;
  width: 100%;
  border-radius: 8px;
  margin: 8px 0 2px;
}

.leaflet-popup-content-wrapper {
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 30px rgba(30, 42, 46, 0.2);
}

.leaflet-popup-content {
  font-family: var(--font);
  margin: 14px 18px;
}

.map-popup__name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}

.map-popup__tag {
  font-size: 13px;
  color: var(--ink-2);
  margin-bottom: 8px;
}

.map-popup__link {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-top: 4px;
}

/* --- location tiles ------------------------------------------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 22px;
  margin-top: 40px;
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 380px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 26px;
  color: #fff;
  background: #2c3a40 center / cover no-repeat;
  transition: transform 250ms ease, box-shadow 250ms ease;
}

a.tile:hover {
  transform: scale(1.015);
  box-shadow: 0 16px 44px rgba(30, 42, 46, 0.24);
  text-decoration: none;
}

.tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(8, 14, 16, 0.64) 0%,
    rgba(8, 14, 16, 0.05) 55%
  );
}

.tile > * {
  position: relative;
  z-index: 1;
}

.tile__name {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 4px;
}

.tile__tag {
  font-size: 15px;
  opacity: 0.88;
  margin-bottom: 14px;
  max-width: 40ch;
}

.tile__meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tile__meta .chip {
  background: rgba(255, 255, 255, 0.94);
}

/* planned tiles: dotted outline, faint before→after wash */
.tile--planned {
  background: linear-gradient(135deg, #eff3fa, #edf7ee);
  color: var(--ink);
  border: 2px dotted var(--hairline);
}

.tile--planned::after {
  display: none;
}

.tile--planned .tile__tag {
  color: var(--ink-2);
  opacity: 1;
}

/* --- feature cards -------------------------------------------- */

.duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
  margin-top: 40px;
}

.feature {
  background: var(--bg);
  border-radius: var(--radius-lg);
  padding: 38px 34px;
  box-shadow: 0 4px 24px rgba(30, 42, 46, 0.07);
}

.feature__icon {
  margin-bottom: 16px;
}

.feature h3 {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
}

.feature p {
  color: var(--ink-2);
  font-size: 16px;
}

/* --- location page -------------------------------------------- */

.loc-hero {
  height: 82svh;
  min-height: 480px;
}

/* --- no-WebGL2 fallback: a still from the scan + a plain notice ---- */

.viewer-fallback {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 28px 22px calc(28px + env(safe-area-inset-bottom));
}

.viewer-nosupport {
  max-width: 520px;
  background: rgba(10, 16, 18, 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
  text-align: center;
  text-shadow: none;
}

/* on the homepage hero it stands where the button was */
.hero__actions .viewer-nosupport {
  margin-inline: auto;
}

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 30px;
  padding-block: 44px;
  border-bottom: 2px solid;
  border-image: var(--grad) 1;
}

.fact__label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--teal-deep);
  margin-bottom: 4px;
}

.fact__value {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.story p {
  font-size: clamp(17px, 2vw, 20px);
  color: #4f5457;
  margin-bottom: 1.1em;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 36px;
}

.gallery figure img {
  border-radius: var(--radius-md);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  cursor: zoom-in;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.gallery figure img:hover {
  transform: scale(1.015);
  box-shadow: 0 10px 30px rgba(30, 42, 46, 0.18);
}

.gallery figcaption {
  font-size: 14px;
  color: var(--ink-2);
  padding-top: 8px;
}

.empty-note {
  margin-top: 32px;
  padding: 28px 30px;
  background: var(--bg-alt);
  border-radius: var(--radius-md);
  color: var(--ink-2);
  max-width: 640px;
}

.section--alt .empty-note {
  background: #fff;
}

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

.footer {
  background: var(--bg-alt);
  padding-block: 34px;
  font-size: 13px;
  color: var(--ink-2);
  position: relative;
}

.footer::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--grad);
}

.footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px 30px;
  flex-wrap: wrap;
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer__brand img {
  height: 30px;
  width: auto;
}

.footer a {
  color: inherit;
}

/* --- timeline page ---------------------------------------------
   The scrubber is the site's color story made literal: the track is
   the logo gradient, and dragging along it is dragging through time. */

.tl-intro {
  padding: calc(var(--nav-h) + clamp(64px, 9vw, 110px)) 0 clamp(34px, 5vw, 52px);
}

.scrub {
  position: sticky;
  top: var(--nav-h);
  z-index: 900;
  padding: 12px 0 8px;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(30, 42, 46, 0.08);
}

.scrub__readout {
  font-size: 14px;
  color: var(--ink-2);
  text-align: center;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scrub__readout b {
  color: var(--ink);
}

.scrub__track {
  position: relative;
  height: 30px;
  touch-action: none; /* the track owns the gesture — no page-scroll fights */
  cursor: ew-resize;
}

/* phase labels above the track: Before / During / After construction */

.scrub__phases {
  position: relative;
  height: 17px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.scrub__phase {
  position: absolute;
  white-space: nowrap;
}

.scrub__phase--before { color: var(--blue-deep); }
.scrub__phase--during { color: var(--teal-deep); }
.scrub__phase--after  { color: var(--green-deep); }

/* the track, broken into one solid segment per phase */

.scrub__seg {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 6px;
  border-radius: 3px;
}

.scrub__seg--before { background: var(--blue); }
.scrub__seg--during { background: var(--teal); }
.scrub__seg--after  { background: var(--green); }

.scrub__dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid #fff;
  background: currentColor;
  box-shadow: 0 1px 4px rgba(30, 42, 46, 0.3);
  cursor: pointer;
  transition: transform 150ms ease;
}

.scrub__dot--before { color: var(--blue-deep); }
.scrub__dot--during { color: var(--teal-deep); }
.scrub__dot--after  { color: var(--green-deep); }

/* future events: hollow dots */
.scrub__dot--planned {
  background: #fff;
  border-color: currentColor;
}

.scrub__dot.is-active {
  transform: translate(-50%, -50%) scale(1.3);
}

.scrub__knob {
  position: absolute;
  z-index: 2; /* above the track segments and dots */
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  border: 2px solid var(--ink);
  box-shadow: 0 2px 8px rgba(30, 42, 46, 0.25);
  pointer-events: none;
  transition: left 180ms ease;
}

.scrub__track.is-dragging .scrub__knob {
  transition: none;
}

.scrub__years {
  position: relative;
  height: 16px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
}

/* touch screens: a fatter track, knob, and dots — easy to grab, and the
   feed only scrolls when the finger lifts (see timeline.js) */
@media (pointer: coarse) {
  .scrub__track {
    height: 44px;
  }
  .scrub__dot {
    width: 18px;
    height: 18px;
  }
  .scrub__knob {
    width: 30px;
    height: 30px;
  }
}

.scrub__years span {
  position: absolute;
  transform: translateX(-50%);
}

/* the feed: a vertical gradient rail echoing the track above */

.tl-feed {
  padding-top: clamp(44px, 6vw, 70px);
}

.tl-events {
  position: relative;
  padding-left: 36px;
}

.tl-events::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(to bottom, var(--blue), var(--teal) 52%, var(--green));
}

.tl-event {
  position: relative;
  padding-bottom: clamp(52px, 7vw, 84px);
}

.tl-event::before {
  content: '';
  position: absolute;
  left: -35px;
  top: 5px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(30, 42, 46, 0.25);
  transition: transform 150ms ease;
}

.tl-event--before::before { background: var(--blue); }
.tl-event--during::before { background: var(--teal); }
.tl-event--after::before  { background: var(--green); }

.tl-event.is-active::before {
  transform: scale(1.35);
}

.tl-event__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 12px;
}

.tl-event__date {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-2);
}

.tl-event__title {
  font-size: clamp(25px, 3.4vw, 34px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.12;
  margin-bottom: 12px;
}

.tl-event__body p {
  color: #4f5457;
  margin-bottom: 1em;
}

/* timeline event photos: one hero shot, then a thumbnail strip.
   overrides the auto-fill grid that .gallery sets elsewhere. */
.tl-event__gallery {
  margin-top: 24px;
  display: block;
}

.tl-shot {
  position: relative;
  margin: 0;
}

.tl-shot img {
  display: block;
  width: 100%;
  border-radius: var(--radius-md);
  object-fit: cover;
  cursor: zoom-in;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.tl-shot--hero img {
  aspect-ratio: 16 / 10;
}

.tl-shot--hero figcaption {
  font-size: 14px;
  color: var(--ink-2);
  padding-top: 8px;
}

.tl-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.tl-strip .tl-shot--thumb img {
  aspect-ratio: 1 / 1;
}

/* thumbnail captions live only for the lightbox — visually hidden */
.tl-strip .tl-shot figcaption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.tl-shot.is-hidden {
  display: none;
}

/* "+N" badge over the last visible thumbnail */
.tl-more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: rgba(20, 28, 32, 0.55);
  color: #fff;
  font-size: clamp(19px, 4vw, 27px);
  font-weight: 700;
  letter-spacing: -0.01em;
  pointer-events: none; /* click falls through to the image → opens lightbox */
  transition: background 200ms ease;
}

.tl-shot--thumb:hover .tl-more {
  background: rgba(20, 28, 32, 0.42);
}

.tl-credit {
  opacity: 0.75;
}

.tl-event__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 700;
}

/* contribute */

.contribute-actions {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.contribute-fineprint {
  margin-top: 14px;
  font-size: 14px;
  color: var(--ink-2);
}

/* floating submit card on the timeline — stands in for a second button up
   top, and follows the reader down the feed */
.contribute-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 950;
  max-width: 300px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(30, 42, 46, 0.1);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(30, 42, 46, 0.16);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}

.contribute-float.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.contribute-float p {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
  margin-bottom: 12px;
}

.contribute-float .btn {
  font-size: 15px;
  padding: 10px 20px;
}

@media (max-width: 640px) {
  .contribute-float {
    left: 14px;
    right: 14px;
    bottom: max(14px, env(safe-area-inset-bottom));
    max-width: none;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
  }

  .contribute-float p {
    flex: 1;
    margin-bottom: 0;
  }

  .contribute-float .btn {
    white-space: nowrap;
  }

  .contribute-float__extra {
    display: none;
  }
}

/* --- photo lightbox (shared by timeline + location galleries) --- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  background: rgba(10, 16, 18, 0.93);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 0s 220ms;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 220ms ease;
}

body.has-lightbox {
  overflow: hidden;
}

.lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.lightbox__img {
  max-width: min(92vw, 1400px);
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.5);
}

.lightbox__caption {
  margin-top: 14px;
  max-width: 70ch;
  text-align: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
}

.lightbox__close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 1;
}

.lightbox__close,
.lightbox__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-family: var(--font);
  font-size: 17px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background 150ms ease;
}

.lightbox__nav {
  font-size: 30px;
  line-height: 1;
  padding-bottom: 4px;
}

.lightbox__close:hover,
.lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.24);
}

@media (max-width: 640px) {
  .lightbox {
    gap: 4px;
    padding: 12px;
  }
  .lightbox__nav {
    width: 38px;
    height: 38px;
  }
  .lightbox__img {
    max-width: 96vw;
    max-height: 72vh;
  }
}

/* small "share your photos" nudge under location galleries */
.gallery-cta {
  margin-top: 26px;
  font-size: 15px;
  color: var(--ink-2);
}

.gallery-cta a {
  font-weight: 700;
}

/* --- small screens --------------------------------------------- */

@media (max-width: 640px) {
  .nav__links {
    gap: 13px;
  }
  .nav__links a {
    font-size: 13px;
  }
  /* "Construction Timeline" → just "Timeline" on phones */
  .nav__long {
    display: none;
  }
  /* four links + brand get tight — keep the wordmark from colliding */
  .nav__brand img {
    height: 21px;
  }
  /* the scrubber gets dense — shorten the phase labels… */
  .scrub__phase-word {
    display: none;
  }
  /* …and just anchor the end years */
  .scrub__years span {
    display: none;
  }
  .scrub__years span:first-child,
  .scrub__years span:last-child {
    display: inline;
  }
  .facts {
    gap: 20px;
  }
  .tile {
    min-height: 320px;
  }
  .scrub__readout {
    font-size: 13px;
  }
  .tl-events {
    padding-left: 28px;
  }
  .tl-event::before {
    left: -27px;
  }
}

/* --- traffic nudge: small card, bottom right, arrives late ------ */

.traffic-nudge {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  width: min(320px, calc(100vw - 40px));
  padding: 20px 22px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 40px rgba(20, 30, 22, 0.18);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms ease, transform 420ms cubic-bezier(0.2, 0.7, 0.25, 1);
}

.traffic-nudge.is-in {
  opacity: 1;
  transform: translateY(0);
}

.traffic-nudge__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}

.traffic-nudge__body {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  margin-bottom: 14px;
}

.traffic-nudge__btn {
  font-size: 14px;
  padding: 9px 20px;
}

.traffic-nudge__close {
  position: absolute;
  top: 10px;
  right: 10px;
  border: 0;
  background: none;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1;
  padding: 6px;
  cursor: pointer;
  border-radius: 50%;
}

.traffic-nudge__close:hover {
  color: var(--ink);
  background: var(--bg-alt);
}