/* =========================================================
   Cracked Hacker House — premium white, black ink
   ========================================================= */

:root {
  /* palette */
  --bg:           #ffffff;
  --bg-soft:      #f7f6f3;
  --paper:        #fafaf7;
  --ink:          #0b0b0b;
  --ink-2:        #2a2a2a;
  --ink-3:        #5a5a58;
  --ink-4:        #8b8b88;
  --rule:         rgba(11, 11, 11, 0.10);
  --rule-soft:    rgba(11, 11, 11, 0.06);

  /* glass — clear pane, no white tint, no inner glow. Just blur + a thin edge. */
  --glass-bg:     transparent;
  --glass-bg-strong: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.22);
  --glass-stroke: rgba(11, 11, 11, 0.03);
  --glass-shadow: 0 30px 70px -30px rgba(11, 11, 11, 0.28),
                  0 10px 24px -12px rgba(11, 11, 11, 0.14);

  /* the one accent — a quiet moss green, used sparingly */
  --accent:       #3d6b4e;
  --accent-soft:  rgba(61, 107, 78, 0.18);

  /* type */
  --serif:        "Instrument Serif", "Times New Roman", serif;
  --sans:         "Geist", -apple-system, system-ui, sans-serif;
  --mono:         "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* sizing */
  --nav-h:        72px;
  --pad:          clamp(20px, 4vw, 56px);
  --max:          1320px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--bg);
  min-height: 100vh;
  overflow-x: hidden;
}

::selection { background: var(--ink); color: #fff; }

a { color: inherit; text-decoration: none; }
button { font: inherit; }
img, svg { display: block; max-width: 100%; }

/* =========================================================
   PAGE VIGNETTE — fixed corner darkening across the whole site.
   Sits above the hero map and section content (z 50) but below the
   nav (z 100) and camera inspector (z 200), so it never eats clicks
   on links/CTAs and never visually crosses the nav pill. Center stays
   clean to let the map / current section breathe; corners darken to
   pull the eye inward.
   ========================================================= */
.page-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  background: radial-gradient(
    ellipse 95% 80% at 50% 50%,
    transparent 45%,
    rgba(0, 0, 0, 0.22) 78%,
    rgba(0, 0, 0, 0.55) 100%
  );
}

/* =========================================================
   NAV — black pill, white page
   ========================================================= */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--pad);
  pointer-events: none;
}
.nav > * { pointer-events: auto; }

/* centered glass pill — no tint, no inner glow, just real blur of what's behind */
.nav__pills {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  border: 0;
  border-radius: 999px;
  backdrop-filter: blur(22px) saturate(125%);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
  box-shadow: 0 10px 28px -22px rgba(11, 11, 11, 0.18);
  transition: box-shadow 220ms ease, backdrop-filter 220ms ease, background 220ms ease;
}

.nav__pill {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  font-size: 13.5px;
  letter-spacing: 0.005em;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 10px rgba(11, 11, 11, 0.35);
  border-radius: 999px;
  transition: color 180ms ease, background 180ms ease, text-shadow 180ms ease;
}
.nav__pill:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
/* once scrolled past the hero, the nav sits over the white page —
   flip everything back to dark ink and drop the text-shadow. */
.nav.is-scrolled .nav__pill {
  color: var(--ink-2);
  text-shadow: none;
}
.nav.is-scrolled .nav__pill:hover { color: var(--ink); background: rgba(11, 11, 11, 0.04); }

/* the center pill is the brand mark — a solid black ink pill that
   anchors the nav. Links back to the top of the page. */
.nav__pill--brand {
  background: var(--ink);
  color: #fff;
  padding: 11px 24px;
  gap: 10px;
  font-family: var(--serif);
  font-size: 15.5px;
  letter-spacing: 0.005em;
  line-height: 1;
  border: 0;
  text-shadow: none;
  box-shadow: 0 8px 22px -14px rgba(11, 11, 11, 0.55);
  transition: background 200ms ease, transform 200ms ease;
}
.nav__pill--brand em { font-style: italic; }
.nav__pill--brand:hover {
  background: #1a1a1a;
  color: #fff;
  transform: translateY(-1px);
}
.nav__wing {
  flex: 0 0 auto;
  color: currentColor;
  margin-right: 2px;
}
.nav__wordmark { display: inline-flex; align-items: baseline; gap: 4px; }
/* the brand pill stays black-on-white in both hero and scrolled states */
.nav.is-scrolled .nav__pill--brand { color: #fff; background: var(--ink); }

/* =========================================================
   HERO — map (layer 1) on right, glass pane on left
   ========================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  padding: calc(var(--nav-h) + 20px) var(--pad) 80px;
  overflow: hidden;
  background: var(--bg);
}

/* --- LAYER 1: the actual Leaflet map --- */
.hero__map {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--bg);
}
/* Leaflet overrides — keep it pure white, no zoom chrome */
.leaflet-container {
  background: #ffffff !important;
  font-family: var(--mono) !important;
  outline: none;
}
.leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.7) !important;
  color: var(--ink-4) !important;
  font-size: 9px !important;
  font-family: var(--mono) !important;
  padding: 2px 6px !important;
  letter-spacing: 0.02em;
}
.leaflet-control-attribution a { color: var(--ink-3) !important; }
.leaflet-control-zoom { display: none !important; }
/* Voyager already has its own pastel palette — leave it alone */
.leaflet-tile-pane { opacity: 1; filter: contrast(1.02) saturate(1.05); }

/* --- Cesium overrides: keep the widget invisible chrome-wise --- */
.cesium-viewer,
.cesium-widget,
.cesium-widget canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  outline: none;
}
.cesium-widget canvas {
  display: block;
  /* Filmic color grade. Saturation lifts the turquoise coastline; the
     small hue rotation warms shadows so the scene reads as morning;
     contrast stays close to neutral so bloom isn't fighting it. */
  filter: contrast(1.06) saturate(1.18) brightness(1.04) hue-rotate(-3deg);
}

/* Google attribution must stay visible (Map Tiles API requirement) — we
   keep it on the page but fade it back to a near-invisible resting state,
   and bring it up to full visibility on hover. */
.cesium-viewer-bottom,
.cesium-widget-credits {
  font-family: var(--mono) !important;
  font-size: 9.5px !important;
  letter-spacing: 0.04em;
  color: var(--ink-3) !important;
  background: rgba(255, 255, 255, 0.0) !important;
  padding: 2px 8px !important;
  border-radius: 4px;
  bottom: 8px !important;
  right: 8px !important;
  left: auto !important;
  max-width: 60%;
  opacity: 0.12;
  transition: opacity 260ms ease, background 260ms ease;
}
.cesium-viewer-bottom:hover,
.cesium-widget-credits:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.65) !important;
}
.cesium-credit-textContainer,
.cesium-credit-textContainer * { color: var(--ink-3) !important; }
.cesium-credit-textContainer a { color: var(--ink-2) !important; }
.cesium-credit-imageContainer img {
  max-height: 14px;
  opacity: 0.7;
  filter: grayscale(0.4);
}
.cesium-credit-expand-link { color: var(--ink-2) !important; }
.cesium-credit-lightbox-overlay { background: rgba(11, 11, 11, 0.4) !important; }
.cesium-credit-lightbox {
  background: var(--bg) !important;
  color: var(--ink) !important;
  border: 1px solid var(--rule);
  font-family: var(--sans);
}

/* Hide Cesium's perf metrics / toolbar / fullscreen pieces just in case */
.cesium-performanceDisplay-defaultContainer,
.cesium-viewer-toolbar,
.cesium-viewer-fullscreenContainer { display: none !important; }

/* very light mask — map shows through almost everywhere; only soft fade at top/bottom edges */
.hero__map-mask {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.0) 0%,
      rgba(255, 255, 255, 0.0) 82%,
      rgba(255, 255, 255, 0.45) 100%
    );
  pointer-events: none;
}

/* =========================================================
   Cinematic FX overlays — each layer is a single blended div
   ========================================================= */
.hero__fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  will-change: transform;
}

/* cool ocean-shadow side, lower-right */
.hero__fx-cool {
  background: radial-gradient(
    70% 60% at 92% 95%,
    rgba(70, 130, 170, 0.55) 0%,
    rgba(70, 130, 170, 0.18) 40%,
    rgba(70, 130, 170, 0) 75%
  );
  mix-blend-mode: overlay;
  opacity: 0.6;
}

/* drifting cloud shadows — two layered radial pools. The drift is
   animated via CSS custom properties (registered with @property), so
   transform can combine the drift and the pointer parallax in one
   expression without one stomping the other. */
@property --cx { syntax: "<percentage>"; inherits: false; initial-value: -4%; }
@property --cy { syntax: "<percentage>"; inherits: false; initial-value: -1%; }
.hero__fx-clouds {
  background:
    radial-gradient(22% 14% at 28% 36%, rgba(11, 11, 11, 0.22), transparent 60%),
    radial-gradient(18% 11% at 70% 58%, rgba(11, 11, 11, 0.18), transparent 60%),
    radial-gradient(28% 16% at 88% 32%, rgba(11, 11, 11, 0.16), transparent 60%);
  mix-blend-mode: soft-light;
  opacity: 0.65;
  filter: blur(8px);
  transform: translate3d(
    calc(var(--cx) + var(--px, 0) * 6px),
    calc(var(--cy) + var(--py, 0) * 6px),
    0
  );
  animation: fx-clouds-drift 72s linear infinite;
}
@keyframes fx-clouds-drift {
  0%   { --cx: -4%; --cy: -1%; }
  50%  { --cx:  3%; --cy:  2%; }
  100% { --cx: -4%; --cy: -1%; }
}

/* cinematic vignette — corners darker, pulls focus to the center */
.hero__fx-vignette {
  background: radial-gradient(
    120% 100% at 50% 50%,
    transparent 45%,
    rgba(11, 11, 11, 0.18) 75%,
    rgba(11, 11, 11, 0.55) 100%
  );
  mix-blend-mode: multiply;
  opacity: 0.85;
}

/* horizon fade — soft warm haze at the very top + a near-invisible
   bottom band so the ticker doesn't feel attached to the map */
.hero__fx-horizon {
  background:
    linear-gradient(
      180deg,
      rgba(255, 220, 180, 0.18) 0%,
      rgba(255, 220, 180, 0) 18%
    );
  mix-blend-mode: screen;
  opacity: 0.9;
}

/* hero is the parallax + clipping host */
.hero { position: relative; isolation: isolate; }

/* --- LAYER 2: glass pane on the left --- */
/* The wrapper itself doesn't catch clicks (so the map stays interactive in
   the empty space); only the actual pane re-enables pointer events. */
.hero__left {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  min-height: calc(100vh - var(--nav-h) - 100px);
  display: flex;
  align-items: center;
  pointer-events: none;
}

/* the glass VEIL — full strength 0-40%, smooth ramp 40-50% (still
   ~60% at the midpoint), gentle bleed 50-62%, clean map from 66%. */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  backdrop-filter: blur(52px) saturate(145%);
  -webkit-backdrop-filter: blur(52px) saturate(145%);
  background:
    radial-gradient(
      44% 58% at 14% 18%,
      rgba(255, 255, 255, 0.10),
      rgba(255, 255, 255, 0) 68%
    ),
    linear-gradient(
      90deg,
      rgba(11, 18, 26, 0.28) 0%,
      rgba(11, 18, 26, 0.26) 22%,
      rgba(11, 18, 26, 0.20) 38%,
      rgba(11, 18, 26, 0.10) 50%,
      rgba(11, 18, 26, 0.03) 60%,
      rgba(11, 18, 26, 0)    68%
    );
  -webkit-mask-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 1)    0%,
    rgba(0, 0, 0, 1)    40%,
    rgba(0, 0, 0, 0.88) 44%,
    rgba(0, 0, 0, 0.72) 47%,
    rgba(0, 0, 0, 0.58) 50%,
    rgba(0, 0, 0, 0.42) 53%,
    rgba(0, 0, 0, 0.27) 56%,
    rgba(0, 0, 0, 0.14) 59%,
    rgba(0, 0, 0, 0.05) 62%,
    rgba(0, 0, 0, 0.01) 65%,
    rgba(0, 0, 0, 0)    67%
  );
  mask-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 1)    0%,
    rgba(0, 0, 0, 1)    40%,
    rgba(0, 0, 0, 0.88) 44%,
    rgba(0, 0, 0, 0.72) 47%,
    rgba(0, 0, 0, 0.58) 50%,
    rgba(0, 0, 0, 0.42) 53%,
    rgba(0, 0, 0, 0.27) 56%,
    rgba(0, 0, 0, 0.14) 59%,
    rgba(0, 0, 0, 0.05) 62%,
    rgba(0, 0, 0, 0.01) 65%,
    rgba(0, 0, 0, 0)    67%
  );
}

/* The pane is just a transparent positioning shell for the content —
   no card, no background, no blur. All atmospheric work happens on
   .hero__veil behind it. */
.hero__pane {
  position: relative;
  width: 100%;
  max-width: 440px;
  pointer-events: auto;
  padding: 52px 44px 46px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  color: #fff;
  /* parallax: subtle, opposite direction to the cursor */
  transform: translate3d(calc(var(--px, 0) * -2px), calc(var(--py, 0) * -2px), 0);
}

.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: lowercase;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 12px rgba(11, 11, 11, 0.35);
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}
.hero__live {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  position: relative;
  box-shadow: 0 0 0 0 var(--accent-soft);
  animation: live-pulse 2.4s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-soft); }
  50%      { box-shadow: 0 0 0 6px rgba(61, 107, 78, 0); }
}

.hero__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(44px, 4.6vw, 68px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: #fff;
  text-shadow: 0 2px 24px rgba(11, 11, 11, 0.32);
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  position: relative;
  z-index: 1;
}
.hero__title em { font-style: italic; }
.hero__title span { display: block; }

.hero__sub {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 1px 14px rgba(11, 11, 11, 0.4);
  margin: 0 0 26px;
  max-width: 28ch;
  position: relative;
  z-index: 1;
}

/* Apply button — solid black pill, the one piece of strong contrast on the pane */
.hero__apply {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px 11px 20px;
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-size: 13.5px;
  letter-spacing: 0.005em;
  box-shadow: 0 10px 24px -14px rgba(11, 11, 11, 0.55);
  transition: transform 200ms ease, background 200ms ease, box-shadow 200ms ease;
  position: relative;
  z-index: 1;
}
.hero__apply:hover {
  transform: translateY(-1px);
  background: #1a1a1a;
  box-shadow: 0 14px 30px -14px rgba(11, 11, 11, 0.6);
}
.hero__apply-arrow {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  transition: transform 220ms ease;
}
.hero__apply:hover .hero__apply-arrow { transform: translate(3px, 0); }

/* CURRENT LOCATION block — sits below the Apply pill */
.hero__loc {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 0;
  /* a horizontal hairline that fades at both ends, matching the
     dissolving aesthetic of the pane itself */
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.22) 18%,
    rgba(255, 255, 255, 0.22) 78%,
    rgba(255, 255, 255, 0) 100%
  );
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 100% 1px;
  position: relative;
  z-index: 1;
}
.hero__loc-label {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.70);
  text-shadow: 0 1px 10px rgba(11, 11, 11, 0.3);
  margin-bottom: 8px;
}
.hero__loc-city {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: #fff;
  text-shadow: 0 2px 18px rgba(11, 11, 11, 0.35);
  margin: 0 0 12px;
}
.hero__loc-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 10px rgba(11, 11, 11, 0.3);
}
.hero__loc-icon {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  font-size: 13px;
  color: #fff;
}
.hero__loc-temp { color: #fff; font-weight: 500; }
.hero__loc-sep { color: rgba(255, 255, 255, 0.45); }
.hero__loc-desc { color: rgba(255, 255, 255, 0.78); text-transform: capitalize; }

/* =========================================================
   HOUSE MARKER — floating glass card anchored to Da Nang
   ========================================================= */
.house-marker {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
  /* the JS sets transform: translate3d(x, y, 0) on this element to
     position it under the projected anchor; we then visually offset
     the card upward via the inner column so the beam has length. */
  will-change: transform;
}
.house-marker[hidden] { display: none; }

.house-marker__card {
  position: absolute;
  left: 50%;
  bottom: 110px;
  /* hidden + nudged downward by default; reveals last in the sequence */
  transform: translate(-50%, -6px);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 11px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.10);
  border: 0;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 10px 28px -18px rgba(11, 11, 11, 0.5);
  white-space: nowrap;
  color: #fff;
  opacity: 0;
  transition:
    opacity 520ms ease 1100ms,
    transform 620ms cubic-bezier(.2, .8, .2, 1) 1100ms;
}
.house-marker.is-landed .house-marker__card {
  opacity: 0.88;
  transform: translate(-50%, 0);
}
.house-marker__icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
}
.house-marker__icon svg { width: 14px; height: 14px; }
.house-marker__text {
  display: flex;
  flex-direction: column;
  line-height: 1.18;
}
.house-marker__title {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: #fff;
}
.house-marker__sub {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.72);
  margin-top: 3px;
}
.house-marker__beam {
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 2px;
  height: 106px;
  /* grows upward from the dot — scaleY 0→1, anchored at the bottom */
  transform: translateX(-50%) scaleY(0);
  transform-origin: 50% 100%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.0) 6%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0.95) 100%
  );
  box-shadow:
    0 0 6px rgba(255, 255, 255, 0.45),
    0 0 14px rgba(255, 255, 255, 0.25);
  border-radius: 2px;
  opacity: 0;
  transition:
    opacity 240ms ease 380ms,
    transform 780ms cubic-bezier(.2, .8, .2, 1) 380ms;
}
.house-marker.is-landed .house-marker__beam {
  opacity: 0.9;
  transform: translateX(-50%) scaleY(1);
  /* start the gentle pulse only after the grow-up has finished */
  animation: house-marker-beam 3.2s ease-in-out 1300ms infinite;
}
@keyframes house-marker-beam {
  0%, 100% {
    opacity: 0.7;
    box-shadow:
      0 0 5px rgba(255, 255, 255, 0.35),
      0 0 12px rgba(255, 255, 255, 0.18);
  }
  50% {
    opacity: 1;
    box-shadow:
      0 0 9px rgba(255, 255, 255, 0.7),
      0 0 22px rgba(255, 255, 255, 0.4);
  }
}
.house-marker__dot {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  /* small + invisible at rest — pops into existence first in the sequence */
  transform: translate(-50%, 50%) scale(0.3);
  opacity: 0;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.55),
    0 0 14px rgba(255, 255, 255, 0.7),
    0 0 28px rgba(255, 255, 255, 0.3);
  transition:
    opacity 360ms ease,
    transform 480ms cubic-bezier(.2, 1, .3, 1);
  z-index: 2;
}
.house-marker.is-landed .house-marker__dot {
  opacity: 1;
  transform: translate(-50%, 50%) scale(1);
  /* glow pulse starts after the full reveal (dot → beam → card) */
  animation: house-marker-glow 3.2s ease-in-out 1450ms infinite;
}
/* expanding sonar rings — the visible "circle" from the reference.
   Sized in absolute px (not scaling the dot) so the ring stays a
   crisp circle. Two rings staggered so one is always emerging. */
.house-marker__dot::before,
.house-marker__dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  pointer-events: none;
  box-sizing: border-box;
}
.house-marker.is-landed .house-marker__dot::before {
  animation: house-marker-ring 3.6s cubic-bezier(.16, .8, .3, 1) 1600ms infinite;
}
.house-marker.is-landed .house-marker__dot::after {
  animation: house-marker-ring 3.6s cubic-bezier(.16, .8, .3, 1) 3400ms infinite;
}

@keyframes house-marker-glow {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.45),
      0 0 12px rgba(255, 255, 255, 0.55),
      0 0 24px rgba(255, 255, 255, 0.22);
  }
  50% {
    box-shadow:
      0 0 0 2.5px rgba(255, 255, 255, 0.65),
      0 0 18px rgba(255, 255, 255, 0.9),
      0 0 36px rgba(255, 255, 255, 0.45);
  }
}
@keyframes house-marker-ring {
  0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0;    }
  12%  { opacity: 0.85; }
  100% { transform: translate(-50%, -50%) scale(4.8); opacity: 0;    }
}

/* --- scroll hint --- */
.hero__scroll {
  position: absolute;
  bottom: 24px;
  left: var(--pad);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--ink-4);
  z-index: 3;
  pointer-events: none;
}
.hero__scroll-line {
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, var(--ink-4), transparent);
}

/* --- map pins (built with L.divIcon, styled with CSS) --- */
.map-pin {
  position: relative;
  width: 14px;
  height: 14px;
}
.map-pin__dot {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(11, 11, 11, 0.25);
}
.map-pin__halo {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(11, 11, 11, 0.15);
  opacity: 0;
}
.map-pin--active .map-pin__dot {
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft), 0 4px 12px rgba(61, 107, 78, 0.35);
}
.map-pin--active .map-pin__halo {
  border-color: var(--accent);
  opacity: 1;
  animation: pin-pulse 2.6s cubic-bezier(.2,.6,.2,1) infinite;
}
@keyframes pin-pulse {
  0%   { transform: scale(0.9); opacity: 0.55; }
  70%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}
.map-pin__label {
  position: absolute;
  top: 50%;
  left: 18px;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.85);
  padding: 3px 7px;
  border-radius: 4px;
  border: 1px solid var(--rule);
  text-transform: uppercase;
}
.map-pin__label--left {
  left: auto;
  right: 18px;
}

/* alumni dots — dim, no halo, no label */
.map-pin--alumni {
  width: 6px;
  height: 6px;
}
.map-pin--alumni .map-pin__dot {
  width: 5px;
  height: 5px;
  background: rgba(11, 11, 11, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 3px rgba(11, 11, 11, 0.15);
}
.map-pin--alumni .map-pin__halo,
.map-pin--alumni .map-pin__label { display: none; }

/* =========================================================
   TICKER
   ========================================================= */
.ticker {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
  overflow: hidden;
}
.ticker__track {
  display: inline-flex;
  align-items: center;
  gap: 36px;
  padding: 14px 0;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  text-transform: lowercase;
  animation: ticker 38s linear infinite;
}
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* =========================================================
   Shared section primitives
   ========================================================= */
.section__head {
  max-width: var(--max);
  margin: 0 auto 56px;
  padding: 0 var(--pad);
}
.section__head--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
}
@media (max-width: 800px) {
  .section__head--split { grid-template-columns: 1fr; }
}
.section__kicker {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: lowercase;
  color: var(--ink-3);
  margin-bottom: 16px;
}
.section__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 18px;
  max-width: 22ch;
}
.section__title em { font-style: italic; }
.section__lede,
.section__aside {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-3);
  margin: 0;
  max-width: 60ch;
}
.section__aside { max-width: 48ch; }

/* =========================================================
   PAPER — the cream canvas all post-hero sections sit on.
   ========================================================= */
:root {
  --paper-bg:       #f4f2ec;
  --paper-ink:      #111111;
  --paper-ink-2:    #2a2a2a;
  --paper-ink-3:    #6a6a68;
  --paper-rule:     rgba(17, 17, 17, 0.10);
  --paper-rule-soft:rgba(17, 17, 17, 0.06);
}
.mission,
.homes,
.expect,
.faq,
.apply,
.foot {
  background: var(--paper-bg);
  color: var(--paper-ink);
}

.link-underline {
  text-decoration: underline;
  text-decoration-thickness: 1.2px;
  text-underline-offset: 3px;
  color: inherit;
  cursor: pointer;
}

/* =========================================================
   MISSION
   ========================================================= */
.mission {
  padding: clamp(80px, 12vw, 160px) var(--pad) clamp(60px, 8vw, 110px);
}
.mission__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 clamp(0px, 4vw, 60px);
}
.mission__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 6.2vw, 84px);
  line-height: 1.05;
  letter-spacing: -0.012em;
  color: var(--paper-ink);
  margin: 0 0 56px;
  max-width: 18ch;
}
.mission__title em { font-style: italic; }
.mission__body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.55;
  color: var(--paper-ink);
  max-width: 56ch;
}
.mission__body p { margin: 0 0 24px; }
.mission__body p:last-child { margin-bottom: 0; }
.mission__body em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
}

/* =========================================================
   HOMES — "live with global talent" + poster scroller
   ========================================================= */
.homes {
  padding: clamp(60px, 8vw, 100px) 0 clamp(60px, 8vw, 100px);
}
.homes__head {
  max-width: 1080px;
  margin: 0 auto 48px;
  padding: 0 calc(var(--pad) + clamp(0px, 4vw, 60px));
}
.homes__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 5.4vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.012em;
  color: var(--paper-ink);
  margin: 0 0 24px;
}
.homes__title em { font-style: italic; }
.homes__body {
  font-family: var(--sans);
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--paper-ink-2);
  max-width: 64ch;
}
.homes__body p { margin: 0 0 18px; }
.homes__body p:last-child { margin: 0; }

.homes__rail {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding: 16px 0 18px;
  mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.homes__rail::-webkit-scrollbar { display: none; }
.homes__track {
  display: inline-flex;
  gap: 22px;
  padding: 0 calc(var(--pad) + clamp(0px, 4vw, 60px));
}

.poster {
  flex: 0 0 auto;
  position: relative;
  width: clamp(240px, 22vw, 320px);
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  overflow: hidden;
  background-color: #2a2a2a;
  background-size: cover;
  background-position: center;
  scroll-snap-align: start;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 24px 50px -28px rgba(11, 11, 11, 0.35),
    0 6px 18px -10px rgba(11, 11, 11, 0.22);
  isolation: isolate;
  transition: transform 380ms cubic-bezier(.2,.8,.2,1);
}
.poster:hover { transform: translateY(-4px); }
.poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 30%),
    linear-gradient(0deg,   rgba(0,0,0,0.50) 0%, rgba(0,0,0,0) 45%);
  pointer-events: none;
  z-index: 0;
}

.poster--sf   { background-image:
  linear-gradient(160deg, rgba(255,140,90,0), rgba(0,0,0,0.18)),
  url("https://images.unsplash.com/photo-1494522855154-9297ac14b55f?auto=format&fit=crop&w=1200&q=80"); }
.poster--tyo  { background-image:
  linear-gradient(160deg, rgba(255,180,200,0), rgba(0,0,0,0.22)),
  url("https://images.unsplash.com/photo-1503899036084-c55cdd92da26?auto=format&fit=crop&w=1200&q=80"); }
.poster--ber  { background-image:
  linear-gradient(160deg, rgba(120,140,200,0), rgba(0,0,0,0.22)),
  url("https://images.unsplash.com/photo-1587330979470-3016b6702d89?auto=format&fit=crop&w=1200&q=80"); }
.poster--cdmx { background-image:
  linear-gradient(160deg, rgba(255,120,90,0), rgba(0,0,0,0.22)),
  url("https://images.unsplash.com/photo-1518105779142-d975f22f1b0a?auto=format&fit=crop&w=1200&q=80"); }
.poster--dnn  { background-image:
  linear-gradient(160deg, rgba(150,200,210,0), rgba(0,0,0,0.22)),
  url("https://images.unsplash.com/photo-1528127269322-539801943592?auto=format&fit=crop&w=1200&q=80"); }

.poster__name {
  position: absolute;
  left: 20px;
  bottom: 58px;
  margin: 0;
  z-index: 1;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 4vw, 60px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}
.poster__name em { font-style: italic; }
.poster__chip {
  position: absolute;
  z-index: 1;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
  white-space: nowrap;
}
.poster__chip--tl { top: 14px; left: 16px; }
.poster__chip--tr { top: 14px; right: 16px; }
.poster__chip--bl { bottom: 18px; left: 20px; }

/* =========================================================
   EXPECT — text with floating polaroids around it
   ========================================================= */
.expect {
  padding: clamp(80px, 12vw, 140px) var(--pad) clamp(80px, 12vw, 140px);
}
.expect__inner {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(0px, 4vw, 60px);
}
.expect__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 6.2vw, 80px);
  line-height: 1;
  letter-spacing: -0.012em;
  margin: 0 0 36px;
  color: var(--paper-ink);
  text-align: center;
}
.expect__title em { font-style: italic; }
.expect__body {
  font-family: var(--sans);
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.55;
  color: var(--paper-ink);
  max-width: 62ch;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.expect__body p { margin: 0 0 26px; }
.expect__body p:last-child { margin-bottom: 0; }
.expect__body em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
}
.expect__body strong {
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1.2px;
  text-underline-offset: 3px;
}
.expect__heart { display: inline-block; transform: translateY(2px); }

.polaroid {
  position: absolute;
  width: clamp(120px, 13vw, 180px);
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: #ddd;
  border: 8px solid #fff;
  border-bottom-width: 28px;
  border-radius: 4px;
  box-shadow:
    0 22px 38px -22px rgba(11, 11, 11, 0.35),
    0 6px 16px -10px rgba(11, 11, 11, 0.18);
  z-index: 0;
  pointer-events: none;
}
.polaroid--tl { top: 60px;   left: 0%;  transform: rotate(-6deg); }
.polaroid--tr { top: 100px;  right: 0%; transform: rotate(5deg); }
.polaroid--bl { bottom: 20px; left: 3%;  transform: rotate(-4deg); }
.polaroid--br { bottom: -10px; right: 1%; transform: rotate(6deg); }
@media (max-width: 1100px) {
  .polaroid { display: none; }
}

/* =========================================================
   FAQ — flat list with + / × toggle on the right
   ========================================================= */
.faq {
  padding: clamp(80px, 10vw, 120px) var(--pad) clamp(60px, 8vw, 100px);
}
.faq__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(48px, 6.6vw, 88px);
  line-height: 1;
  letter-spacing: -0.012em;
  text-align: center;
  color: var(--paper-ink);
  margin: 0 0 60px;
}
.faq__title em { font-style: italic; }
.faq__list {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
  border-top: 1px solid var(--paper-rule-soft);
}
.faq__item {
  border-bottom: 1px solid var(--paper-rule-soft);
}
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 6px;
  cursor: pointer;
  list-style: none;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(18px, 1.5vw, 22px);
  letter-spacing: -0.005em;
  color: var(--paper-ink);
  transition: color 180ms ease;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__toggle {
  position: relative;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  color: var(--paper-ink);
  transition: transform 240ms cubic-bezier(.2,.8,.2,1);
}
.faq__toggle::before,
.faq__toggle::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: currentColor;
  border-radius: 1px;
}
.faq__toggle::before { width: 16px; height: 1.5px; }
.faq__toggle::after  { width: 1.5px; height: 16px; }
.faq__item[open] .faq__toggle { transform: rotate(45deg); }
.faq__body {
  padding: 0 6px 28px;
  font-family: var(--sans);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
  color: var(--paper-ink-2);
  max-width: 64ch;
}
.faq__body p { margin: 0; }

/* =========================================================
   APPLY BANNER — aurora gradient card with white pill CTA
   ========================================================= */
.apply {
  padding: clamp(40px, 6vw, 80px) var(--pad) clamp(80px, 10vw, 120px);
}
.apply__card {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(60px, 8vw, 110px) clamp(24px, 4vw, 48px);
  border-radius: 28px;
  overflow: hidden;
  isolation: isolate;
  /* dark base shows through cracks if any of the aurora gradients fall thin */
  background: #1f2530;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.15) inset,
    0 30px 60px -30px rgba(11, 11, 11, 0.4);
}
.apply__aurora {
  position: absolute;
  inset: -10%;
  z-index: 0;
  background:
    radial-gradient(38% 50% at 25% 35%, rgba(120, 170, 220, 0.85), transparent 65%),
    radial-gradient(40% 55% at 70% 60%, rgba(220, 110, 70, 0.85), transparent 60%),
    radial-gradient(45% 60% at 50% 90%, rgba(70, 100, 150, 0.75), transparent 70%),
    radial-gradient(60% 70% at 90% 15%, rgba(150, 130, 105, 0.6), transparent 70%),
    linear-gradient(135deg, #4a5a6a 0%, #6a4a3a 100%);
  filter: blur(40px) saturate(125%);
  animation: aurora-drift 22s ease-in-out infinite alternate;
}
@keyframes aurora-drift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1.02); }
  to   { transform: translate3d( 1.5%,  1%, 0) scale(1.05); }
}
.apply__grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.45 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.55;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.apply__content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
}
.apply__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 5.4vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.012em;
  color: #fff;
  margin: 0 0 18px;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.35);
}
.apply__title em { font-style: italic; }
.apply__lede {
  font-family: var(--sans);
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  max-width: 52ch;
  margin: 0 auto 32px;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.3);
}
.apply__lede strong { font-weight: 500; }
.apply__btn {
  display: inline-flex;
  align-items: center;
  padding: 14px 28px;
  background: #fff;
  color: var(--paper-ink);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15.5px;
  border-radius: 999px;
  box-shadow: 0 14px 28px -14px rgba(0, 0, 0, 0.4);
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.apply__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -14px rgba(0, 0, 0, 0.45);
}

/* =========================================================
   FOOTER — brand + links above a massive image-filled wordmark
   ========================================================= */
.foot {
  padding: clamp(60px, 8vw, 100px) var(--pad) 0;
  overflow: hidden;
}
.foot__top {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  padding-bottom: clamp(40px, 6vw, 80px);
}
@media (max-width: 800px) { .foot__top { grid-template-columns: 1fr; gap: 40px; } }

.foot__brand-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.foot__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.1vw, 28px);
  color: var(--paper-ink);
}
.foot__mark { font-size: 18px; color: var(--paper-ink); }
.foot__brand em { font-style: italic; }
.foot__tag {
  font-family: var(--sans);
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.5;
  color: var(--paper-ink);
  margin: 0;
  max-width: 40ch;
}
.foot__tag strong { font-weight: 600; }
.foot__social {
  display: inline-flex;
  align-items: center;
  gap: 20px;
}
.foot__icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--paper-ink);
  opacity: 0.85;
  transition: opacity 180ms ease, transform 200ms ease;
}
.foot__icon:hover { opacity: 1; transform: translateY(-1px); }
.foot__copy {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--paper-ink-3);
  margin: 0;
}
.foot__cols {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
@media (max-width: 800px) { .foot__cols { align-items: flex-start; } }
.foot__link {
  font-family: var(--sans);
  font-size: clamp(15px, 1.2vw, 17px);
  color: var(--paper-ink);
  transition: opacity 180ms ease;
}
.foot__link:hover { opacity: 0.65; }
.foot__link--active { text-decoration: underline; text-underline-offset: 4px; }

/* the giant image-filled wordmark anchoring the bottom of the page */
.foot__wordmark {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(120px, 22vw, 320px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  text-align: center;
  margin: 0;
  white-space: nowrap;
  background:
    linear-gradient(180deg, rgba(244, 242, 236, 0.25), transparent 40%),
    url("https://images.unsplash.com/photo-1502082553048-f009c37129b9?auto=format&fit=crop&w=2400&q=80");
  background-size: cover;
  background-position: center 55%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: -0.18em;
  user-select: none;
}

/* =========================================================
   CAMERA INSPECTOR — press D in hero to open. See camera-inspector.md.
   ========================================================= */
.cam-inspect {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 200;
  min-width: 320px;
  max-width: 480px;
  padding: 12px 16px 14px;
  font-family: var(--mono);
  font-size: 11px;
  color: #fff;
  background: rgba(11, 11, 11, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.cam-inspect[hidden] { display: none; }
.cam-inspect__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  text-transform: uppercase;
}
.cam-inspect__hint { color: rgba(255, 255, 255, 0.45); font-size: 9.5px; }
.cam-inspect__sliders {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.cam-slider {
  display: grid;
  grid-template-columns: 70px 1fr 64px;
  align-items: center;
  gap: 10px;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.06em;
}
.cam-slider__name { text-transform: lowercase; }
.cam-slider__val { text-align: right; color: #fff; font-variant-numeric: tabular-nums; }
.cam-slider input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px; cursor: pointer;
}
.cam-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px;
  border-radius: 50%; background: #fff; border: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.cam-slider input[type="range"]::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 0;
}
.cam-inspect__body {
  margin: 0; white-space: pre; line-height: 1.55;
  font-size: 11.5px; color: #f4f4f0;
  user-select: text; cursor: text;
}

/* --- grab view inside the inspector --- */
.cam-grab {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.cam-grab__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.cam-grab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  color: #fff;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.cam-grab-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.35); }
.cam-grab-btn__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #fff;
}
.cam-grab-btn.is-recording {
  background: rgba(210, 50, 50, 0.25);
  border-color: rgba(255, 100, 100, 0.75);
  color: #ffe5e5;
  padding-right: 14px;
}
.cam-grab-btn.is-recording .cam-grab-btn__dot {
  background: #ff4444;
  animation: cam-rec-pulse 1s ease-in-out infinite;
}
@keyframes cam-rec-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.7); }
  50%       { box-shadow: 0 0 0 5px rgba(255, 68, 68, 0); }
}
.cam-grab-result {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 7px 10px;
  background: rgba(93, 219, 138, 0.10);
  border: 1px solid rgba(93, 219, 138, 0.30);
  border-radius: 6px;
}
.cam-grab-result[hidden] { display: none; }
.cam-grab-code {
  flex: 1;
  font-family: var(--mono);
  font-size: 10.5px;
  color: #a7e0b6;
  user-select: text;
  cursor: text;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cam-grab-copy {
  flex: 0 0 auto;
  padding: 3px 8px;
  background: rgba(93, 219, 138, 0.18);
  border: 1px solid rgba(93, 219, 138, 0.40);
  border-radius: 4px;
  color: #a7e0b6;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 140ms ease;
}
.cam-grab-copy:hover { background: rgba(93, 219, 138, 0.30); }

/* --- pin dropper inside the inspector --- */
.cam-inspect__pins {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.cam-inspect__pins-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.cam-pin-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  color: #fff;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.cam-pin-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.35); }
.cam-pin-btn__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.45);
}
.cam-pin-btn.is-armed {
  background: rgba(220, 80, 80, 0.22);
  border-color: rgba(255, 120, 120, 0.7);
  color: #ffe7e7;
}
.cam-pin-btn.is-armed .cam-pin-btn__dot {
  background: #ff6b6b;
  animation: cam-pin-pulse 1.1s ease-in-out infinite;
}
@keyframes cam-pin-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(255, 107, 107, 0); }
}
.cam-pin-hint {
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.04em;
}
.cam-pin-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cam-pin-list:empty { display: none; }
.cam-pin-row {
  display: grid;
  grid-template-columns: 22px 1fr 22px;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 6px;
  font-size: 10.5px;
}
.cam-pin-row__name {
  font-family: var(--mono);
  font-weight: 500;
  color: #fff;
  text-align: center;
}
.cam-pin-row__coords {
  font-family: var(--mono);
  color: rgba(255, 255, 255, 0.88);
  font-size: 10.5px;
  cursor: copy;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cam-pin-row__coords:hover { color: #fff; }
.cam-pin-row__coords.is-copied { color: #a7e0b6; }
.cam-pin-row__del {
  width: 18px; height: 18px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease;
}
.cam-pin-row__del:hover { color: #ff8a8a; border-color: rgba(255, 138, 138, 0.55); }

/* =========================================================
   REVEAL
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 700ms ease, transform 700ms ease;
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   RESPONSIVE: tablet & mobile
   ========================================================= */
@media (max-width: 860px) {
  :root { --nav-h: 64px; }

  /* NAV — keep all pills, shrink padding/font */
  .nav__pills { padding: 4px; gap: 2px; }
  .nav__pill { padding: 8px 12px; font-size: 12.5px; }
  .nav__pill--brand { padding: 10px 16px; font-size: 14px; gap: 8px; }

  /* HERO — stacked layout on mobile. The content pane sits as its own
     block at the top (clean white page background, dark text); the map
     becomes a separate block below it. No blur, no overlap. */
  .hero {
    min-height: auto;
    overflow: visible;
    padding: calc(var(--nav-h) + 28px) var(--pad) 0;
    display: flex;
    flex-direction: column;
    background: var(--bg);
  }

  /* Pane content — first block, normal flow */
  .hero__left {
    position: relative;
    z-index: auto;
    min-height: auto;
    width: 100%;
    margin: 0;
    padding: 0 0 56px;
    align-items: stretch;
    pointer-events: auto;
    order: 1;
  }
  .hero__pane {
    max-width: 100%;
    padding: 0;
    color: var(--ink);
    transform: none;
  }

  /* Map — second block, full-bleed below the pane */
  .hero__map {
    position: relative;
    inset: auto;
    width: 100vw;
    margin-left: calc(-1 * var(--pad));
    margin-right: calc(-1 * var(--pad));
    height: 58vh;
    min-height: 380px;
    order: 2;
    overflow: hidden;
  }

  /* Hide the atmospheric layers + veil + the desktop fade-to-white
     map mask on mobile. They were all tied to the desktop "left pane
     over map" composition, which doesn't exist in the stacked layout. */
  .hero__fx,
  .hero__veil,
  .hero__map-mask { display: none !important; }

  /* Text colors flip for the light page background */
  .hero__kicker  { color: var(--ink-3); text-shadow: none; }
  .hero__title   { color: var(--ink);   text-shadow: none; font-size: clamp(46px, 12vw, 72px); }
  .hero__title em{ color: var(--ink); }
  .hero__sub     { color: var(--ink-3); text-shadow: none; font-size: 14.5px; max-width: 38ch; }

  /* Location block uses the page's standard hairline now */
  .hero__loc {
    border-top: 1px solid var(--rule);
    background-image: none;
  }
  .hero__loc-label { color: var(--ink-4); text-shadow: none; }
  .hero__loc-city  { color: var(--ink);   text-shadow: none; font-size: 22px; }
  .hero__loc-meta  { color: var(--ink-3); text-shadow: none; }
  .hero__loc-icon  { color: var(--ink-2); }
  .hero__loc-temp  { color: var(--ink); }
  .hero__loc-sep   { color: var(--ink-4); }
  .hero__loc-desc  { color: var(--ink-3); }

  /* House marker is positioned relative to .hero, which on mobile
     starts at the top of the page — the projected coords drift as
     you scroll. Hide it; the clean map view stands on its own. */
  .house-marker { display: none !important; }

  /* Scroll hint not needed — natural scroll is obvious */
  .hero__scroll { display: none; }

  /* SECTIONS — tighter vertical rhythm */
  .concept { padding: 80px 0 64px; }
  .houses  { padding: 64px 0 72px; }
  .day     { padding: 64px 0 72px; }
  .cohort  { padding: 72px 0 80px; }
  .apply   { padding: 80px var(--pad); }
  .faq     { padding: 80px 0 90px; }

  .section__head { margin-bottom: 36px; }
  .section__head--split { gap: 24px; }

  /* DAY schedule — narrower time col */
  .day__schedule li {
    grid-template-columns: 76px 1fr;
    gap: 4px 18px;
    padding: 18px 0;
  }
  .day__time  { font-size: 11px; }
  .day__title { font-size: 19px; line-height: 1.3; }
  .day__note  { font-size: 13.5px; }

  /* APPLY — stack rows, smaller title */
  .apply__title { font-size: clamp(34px, 8.5vw, 52px); margin-bottom: 22px; }
  .apply__lede { font-size: 14.5px; margin-bottom: 32px; }
  .apply__row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 14px 0;
  }
  .apply__dt { font-size: 10.5px; }
  .apply__dd { font-size: 16px; }
  .apply__actions { gap: 12px; }
  .btn { padding: 12px 18px; font-size: 13.5px; }

  /* FAQ */
  .faq__item summary { font-size: 18px; padding: 20px 0; gap: 16px; }
  .faq__body { font-size: 13.5px; padding-bottom: 18px; }

  /* HOUSES */
  .house__body { padding: 20px 22px 24px; }
  .house__name { font-size: 26px; }

  /* CONCEPT */
  .concept__card { padding: 32px 26px 36px; }
  .concept__name { font-size: 28px; }

  /* COHORT */
  .resident { padding: 22px 22px 24px; }

  /* FOOTER */
  .foot { padding: 60px var(--pad) 28px; }
  .foot__brand { font-size: 19px; }

  /* PAGE VIGNETTE — softer on mobile so corners don't crowd content */
  .page-vignette {
    background: radial-gradient(
      ellipse 110% 100% at 50% 50%,
      transparent 55%,
      rgba(0, 0, 0, 0.16) 85%,
      rgba(0, 0, 0, 0.38) 100%
    );
  }

  /* CAMERA INSPECTOR — desktop-only tool, no D key on touch */
  .cam-inspect { display: none !important; }
}

@media (max-width: 480px) {
  :root { --pad: 18px; }

  /* NAV — drop side pills on the smallest screens, keep brand mark */
  .nav__pill:not(.nav__pill--brand) { display: none; }

  /* HERO */
  .hero__title { font-size: clamp(42px, 13vw, 56px); }
  .hero__kicker { font-size: 10px; }

  /* Section titles */
  .section__title { font-size: clamp(30px, 8vw, 46px); }

  /* HOUSES — tighter image aspect on phones */
  .house__photo { aspect-ratio: 16 / 11; }

  /* APPLY actions stack on tight screens */
  .apply__actions { flex-direction: column; align-items: flex-start; }
  .btn { width: 100%; justify-content: space-between; }

  /* Footer cols — single col on tiny screens */
  .foot__cols { grid-template-columns: 1fr; gap: 22px; }
}

/* =========================================================
   MOTION PREFERENCES
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0s !important;
    transition-duration: 0s !important;
  }
}