/* =========================================================
   Crucible Club — dark forge, molten amber accent
   ========================================================= */

: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 — forge red (Crucible), used sparingly */
  --accent:       #cf8a3a;
  --accent-soft:  rgba(207, 138, 58, 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:        112px;
  --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%
  );
}

/* =========================================================
   SITE LOADER — full-viewport white takeover.
   Sits above every other layer (nav 100, vignette 50, inspector 200)
   so the page reads as a single counting screen until JS resolves it,
   then fades out and hands off to the iris reveal.
   ========================================================= */
.site-loader {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(10, 7, 5, 0.97);
  /* light blur only — the bg is near-opaque, so a heavy full-screen blur just
     adds compositing cost (and fade jank) for no visible gain. */
  backdrop-filter: blur(6px) saturate(115%);
  -webkit-backdrop-filter: blur(6px) saturate(115%);
  will-change: opacity;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  opacity: 1;
  transition: opacity 360ms cubic-bezier(0.4, 0, 0.2, 1);
}
.site-loader.is-done {
  opacity: 0;
  pointer-events: none;
}
.site-loader__num {
  font-family: var(--mono);
  font-weight: 400;
  font-size: clamp(11px, 1vw, 13px);
  line-height: 1;
  color: rgba(244, 237, 226, 0.55);
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  user-select: none;
}
/* loading-screen brand — Crucible (cream) + club (small red), like the top wordmark */
.site-loader__brand {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: #f4ede2;
  user-select: none;
}
.site-loader__club {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.34em;
  font-weight: 600;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: 0.5em;
  color: #e0331a;
}

/* =========================================================
   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; }

/* ── nav: left wordmark ────────────────────────────────────────────────── */
.nav__logo {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 1px 12px rgba(11, 11, 11, 0.4);
  text-decoration: none;
  transition: opacity 200ms ease;
  justify-self: start;
}
.nav__logo:hover { opacity: 0.75; }
.nav.is-scrolled .nav__logo { color: var(--ink); text-shadow: none; }

/* ── nav: right cluster — pinned to the far right edge ─────────────────── */
.nav__right {
  position: absolute;
  right: var(--pad);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* applications-open status badge — liquid glass */
.nav__apps-status {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  align-items: center;
  padding: 10px 18px 10px 14px;
  background: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.26) 0%,
    rgba(255, 255, 255, 0.10) 45%,
    rgba(255, 255, 255, 0.05) 100%
  );
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-bottom-color: rgba(255, 255, 255, 0.18);
  border-right-color: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(40px) saturate(200%) brightness(1.06);
  -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(1.06);
  box-shadow:
    0 1.5px 0 rgba(255, 255, 255, 0.60) inset,
    0 -1px 0 rgba(255, 255, 255, 0.10) inset,
    0 10px 36px -10px rgba(0, 0, 0, 0.32),
    0 2px 10px -4px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
  transition: box-shadow 220ms ease, background 220ms ease;
}
.nav__apps-status:hover {
  box-shadow:
    0 1.5px 0 rgba(255, 255, 255, 0.70) inset,
    0 -1px 0 rgba(255, 255, 255, 0.12) inset,
    0 14px 44px -10px rgba(0, 0, 0, 0.38),
    0 2px 12px -4px rgba(0, 0, 0, 0.22);
}
.nav.is-scrolled .nav__apps-status {
  background: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.22) 45%,
    rgba(255, 255, 255, 0.10) 100%
  );
  border-color: rgba(255, 255, 255, 0.80);
  border-bottom-color: rgba(11, 11, 11, 0.10);
  border-right-color: rgba(11, 11, 11, 0.10);
  backdrop-filter: blur(30px) saturate(160%) brightness(1.04);
  -webkit-backdrop-filter: blur(30px) saturate(160%) brightness(1.04);
}
.nav__apps-dot {
  grid-row: 1 / 3;
  align-self: center;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #e0331a;
  box-shadow: 0 0 0 0 rgba(224, 51, 26, 0.5);
  animation: apps-dot-pulse 2.6s ease-in-out infinite;
}
@keyframes apps-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 51, 26, 0.5); }
  50%       { box-shadow: 0 0 0 5px rgba(224, 51, 26, 0); }
}
.nav.is-scrolled .nav__apps-dot { background: #c9962f; box-shadow: none; animation: none; }
.nav__apps-label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
  line-height: 1.3;
}
.nav.is-scrolled .nav__apps-label { color: var(--ink-2); text-shadow: none; }
.nav__apps-range {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.65);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  line-height: 1.3;
}
.nav.is-scrolled .nav__apps-range { color: var(--ink-3); text-shadow: none; }

/* hamburger circle button */
.nav__menu-btn {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.90);
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 0;
}
.nav__menu-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.38);
}
.nav.is-scrolled .nav__menu-btn {
  background: rgba(11, 11, 11, 0.06);
  border-color: rgba(11, 11, 11, 0.14);
  color: var(--ink-2);
}
.nav.is-scrolled .nav__menu-btn:hover { background: rgba(11, 11, 11, 0.10); }

/* centered pill — same dark-veil atmosphere as the hero left side.
   Visually the blur descends from the top of the screen like the bottom
   tip of a spear: the element is anchored to the top of the nav, extends
   upward beyond the viewport (so its top edge is invisible), and only
   dissolves at the bottom + sides. No border, no border-radius —
   feels smushed and amorphous, never reads as a card. */
.nav__pills {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  gap: 0;
  /* the masked-away upper region must not capture clicks — let pointer
     events pass through the empty padding, then the individual pills
     re-enable themselves. */
  pointer-events: none;
  /* anchor to the top of the nav so the blur shaft can extend upward */
  align-self: flex-start;
  /* margin-top pulls the element above the viewport;
     padding-top brings the content back to its original (centered) position */
  margin-top: -120px;
  padding: 152px 44px 14px;
  background: rgba(11, 18, 26, 0.22);
  border: none;
  border-radius: 0;
  backdrop-filter: blur(52px) saturate(145%);
  -webkit-backdrop-filter: blur(52px) saturate(145%);
  box-shadow: none;
  -webkit-mask-image:
    linear-gradient(
      90deg,
      rgba(0,0,0,0)    0%,
      rgba(0,0,0,0.15) 4%,
      rgba(0,0,0,0.55) 9%,
      rgba(0,0,0,0.92) 14%,
      rgba(0,0,0,1)    20%,
      rgba(0,0,0,1)    80%,
      rgba(0,0,0,0.92) 86%,
      rgba(0,0,0,0.55) 91%,
      rgba(0,0,0,0.15) 96%,
      rgba(0,0,0,0)    100%
    ),
    linear-gradient(
      180deg,
      rgba(0,0,0,1)   0%,
      rgba(0,0,0,1)   72%,
      rgba(0,0,0,0.85) 82%,
      rgba(0,0,0,0.5) 90%,
      rgba(0,0,0,0.18) 96%,
      rgba(0,0,0,0)   100%
    );
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(
      90deg,
      rgba(0,0,0,0)    0%,
      rgba(0,0,0,0.15) 4%,
      rgba(0,0,0,0.55) 9%,
      rgba(0,0,0,0.92) 14%,
      rgba(0,0,0,1)    20%,
      rgba(0,0,0,1)    80%,
      rgba(0,0,0,0.92) 86%,
      rgba(0,0,0,0.55) 91%,
      rgba(0,0,0,0.15) 96%,
      rgba(0,0,0,0)    100%
    ),
    linear-gradient(
      180deg,
      rgba(0,0,0,1)   0%,
      rgba(0,0,0,1)   72%,
      rgba(0,0,0,0.85) 82%,
      rgba(0,0,0,0.5) 90%,
      rgba(0,0,0,0.18) 96%,
      rgba(0,0,0,0)   100%
    );
  mask-composite: intersect;
  transition: background 220ms ease;
}
/* scrolled over the white sheet: same edge-dissolve so the pill never
   reads as a hard rectangle. Tint shifts to a softer dark wash that
   stays visible on a light background. */
.nav.is-scrolled .nav__pills {
  background: rgba(11, 11, 11, 0.12);
  backdrop-filter: blur(44px) saturate(150%);
  -webkit-backdrop-filter: blur(44px) saturate(150%);
}

.nav__pill {
  display: inline-flex;
  align-items: center;
  /* re-enable clicks on the individual pills (parent has pointer-events: none) */
  pointer-events: auto;
  padding: 14px 22px;
  font-size: 16px;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 1px 10px rgba(11, 11, 11, 0.35);
  border-radius: 999px;
  transition: color 160ms ease, background 160ms ease;
}
.nav__pill:hover { color: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.08); }
.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); }

/* Crucible wordmark in the center of the nav */
.nav__wordmark-link {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 1px 12px rgba(11, 11, 11, 0.4);
  text-decoration: none;
  padding: 14px 26px;
  white-space: nowrap;
  transition: opacity 160ms ease;
}
.nav__wordmark-link:hover { opacity: 0.65; }
.nav__wordmark-dot { opacity: 0.6; }
.nav.is-scrolled .nav__wordmark-link { color: var(--ink); text-shadow: none; }

/* 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: #f3f0e8;
  color: var(--ink);
  padding: 16px 36px;
  gap: 10px;
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: 0.005em;
  line-height: 1;
  border: 0;
  text-shadow: none;
  box-shadow: 0 6px 20px -10px rgba(11, 11, 11, 0.28);
  transition: background 200ms ease, transform 200ms ease;
}
.nav__pill--brand em { font-style: italic; }
.nav__pill--brand:hover {
  background: #ede9dd;
  color: var(--ink);
  transform: translateY(-1px);
}
.nav__wing {
  flex: 0 0 auto;
  color: currentColor;
  margin-right: 2px;
}
.nav__wordmark { display: inline-flex; align-items: baseline; gap: 0; }

/* "Crucible" → "Crucible club" wordmark */
.nav__wm-dot {
  display: inline-block;
  max-width: 1ch;
  overflow: hidden;
  /* dot snaps away first to clear space before the text arrives */
  transition: max-width 220ms cubic-bezier(.4, 0, 1, 1),
              opacity    180ms ease;
}
.nav__pill--brand:hover .nav__wm-dot {
  max-width: 0;
  opacity: 0;
}
.nav__wm-expand {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  vertical-align: baseline;
  /* expo-out: rushes off the mark, then glides softly into place */
  transition: max-width 560ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity    400ms ease 100ms;
}
.nav__pill--brand:hover .nav__wm-expand {
  max-width: 260px;
  opacity: 1;
}
/* the brand pill stays black-on-white in both hero and scrolled states */
.nav.is-scrolled .nav__pill--brand { background: #f3f0e8; color: var(--ink); }

/* =========================================================
   HERO — map (layer 1) on right, glass pane on left
   ========================================================= */
.hero {
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 1;
  padding: calc(var(--nav-h) + 20px) var(--pad) 80px;
  overflow: hidden;
  /* Warm dark backdrop (NOT pure black). The iris reveal clips .hero__map
     from a 0px circle outward, so any not-yet-revealed area shows THIS — a
     forge-toned gradient instead of #000, which used to flash hard black at
     the top/bottom edges during the 1.4s reveal. Now the map "warms in". */
  background: radial-gradient(125% 110% at 55% 42%, #19120c 0%, #0d0907 52%, #080605 100%);
}

/* --- 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: transparent;
}
/* --- Maplibre GL overrides --- */
.maplibregl-map {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.maplibregl-canvas-container,
.maplibregl-canvas {
  width: 100% !important;
  height: 100% !important;
  outline: none;
}
.maplibregl-canvas {
  display: block;
  /* Forge re-theme: the satellite raster is desaturated + darkened in the
     map style, then this filter re-tints it as glowing molten metal —
     sepia warms the greys, hue-rotate pushes amber → ember orange. */
  filter: sepia(0.06) saturate(1.18) hue-rotate(-3deg) contrast(1.03) brightness(1.12);
}
.maplibregl-ctrl-attrib {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  background: transparent !important;
  color: rgba(255,255,255,0.5) !important;
  opacity: 0.5;
  transition: opacity 260ms ease;
}
.maplibregl-ctrl-attrib:hover { opacity: 1; }
.maplibregl-ctrl-attrib a { color: rgba(255,255,255,0.7) !important; }
.maplibregl-ctrl-bottom-right { bottom: 6px !important; right: 8px !important; }
/* Hide compass / zoom controls — cinematic, no UI chrome */
.maplibregl-ctrl-group { display: none !important; }

/* Mask kept as a hook in case we need an edge fade later, but no fade
   to white at the bottom now — the sheet's rounded edge owns that seam. */
/* cinematic grade — darken edges + a whisper of warmth (no red wash) */
.hero__map-mask {
  position: absolute;
  inset: 0;
  background:
    /* molten heat radiating from the host city — the forge core */
    radial-gradient(28% 26% at 55% 40%, rgba(255, 138, 50, 0.20) 0%, rgba(255, 90, 30, 0.08) 40%, transparent 72%),
    radial-gradient(135% 115% at 55% 38%, transparent 46%, rgba(10, 6, 4, 0.62) 100%),
    linear-gradient(180deg, rgba(22, 11, 6, 0.28) 0%, transparent 22%);
  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;
}

/* molten forge glow, lower-right (Crucible) — subtle ember accent */
.hero__fx-cool {
  background: radial-gradient(
    70% 60% at 90% 94%,
    rgba(207, 138, 58, 0.42) 0%,
    rgba(255, 110, 45, 0.14) 44%,
    rgba(207, 138, 58, 0) 76%
  );
  mix-blend-mode: overlay;
  opacity: 0.5;
  transform: translate3d(calc(var(--px, 0) * -22px), calc(var(--py, 0) * -16px), 0);
  transition: transform 120ms linear;
}

/* 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.42;
  filter: blur(5px);
  transform: translate3d(
    calc(var(--cx) + var(--px, 0) * 18px),
    calc(var(--cy) + var(--py, 0) * 18px),
    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 */
.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 { 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;
  /* Left-aligned (no auto centering) so the pane hugs the left edge of
     the viewport and the right side of the screen stays open for the
     map / future right-side content. */
  margin: 0;
  /* Pane sits in the top ~97vh — the bottom 3vh is reserved for the
     sheet peek, so we center the pane inside that reduced track. */
  min-height: calc(97vh - var(--nav-h) - 20px);
  display: flex;
  align-items: center;
  pointer-events: none;
}

/* VEIL — dark blur left panel dissolving into the map */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  backdrop-filter: blur(26px) saturate(125%);
  -webkit-backdrop-filter: blur(26px) saturate(125%);
  background:
    radial-gradient(
      38% 52% at 12% 16%,
      rgba(255, 255, 255, 0.07),
      rgba(255, 255, 255, 0) 64%
    ),
    linear-gradient(
      90deg,
      rgba(14, 9, 7, 0.34) 0%,
      rgba(14, 9, 7, 0.24) 16%,
      rgba(14, 9, 7, 0.12) 30%,
      rgba(14, 9, 7, 0.04) 38%,
      rgba(14, 9, 7, 0)    45%
    );
  -webkit-mask-image: linear-gradient(
    90deg,
    rgba(0,0,0,1) 0%, rgba(0,0,0,1) 20%,
    rgba(0,0,0,0.7) 30%, rgba(0,0,0,0.38) 36%,
    rgba(0,0,0,0.14) 40%, rgba(0,0,0,0) 44%
  );
  mask-image: linear-gradient(
    90deg,
    rgba(0,0,0,1) 0%, rgba(0,0,0,1) 20%,
    rgba(0,0,0,0.7) 30%, rgba(0,0,0,0.38) 36%,
    rgba(0,0,0,0.14) 40%, rgba(0,0,0,0) 44%
  );
}

/* When a cohort is swapped, replay a slow 2s appear on the hero copy so
   it doesn't snap while the map is still flying. Triggered by JS adding
   `is-switching` to the pane on every setCohort() — JS removes/re-adds
   the class with a forced reflow in between to restart the animation. */
@keyframes hero-content-appear {
  0%   { opacity: 0;   transform: translateY(10px); filter: blur(6px); }
  60%  { opacity: 0.9;                              filter: blur(0);    }
  100% { opacity: 1;   transform: translateY(0);    filter: blur(0);    }
}
.hero__pane.is-switching > .hero__cohort,
.hero__pane.is-switching > .hero__title,
.hero__pane.is-switching > .hero__sub,
.hero__pane.is-switching > .hero__actions,
.hero__pane.is-switching > .hero__founder {
  animation: hero-content-appear 2000ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* Light stagger so the eye lands on the headline first, then desc / CTA. */
.hero__pane.is-switching > .hero__cohort  { animation-delay:   0ms; }
.hero__pane.is-switching > .hero__title   { animation-delay:  80ms; }
.hero__pane.is-switching > .hero__sub     { animation-delay: 220ms; }
.hero__pane.is-switching > .hero__actions { animation-delay: 360ms; }
.hero__pane.is-switching > .hero__founder { animation-delay: 480ms; }

/* 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: 560px;
  pointer-events: auto;
  padding: 52px 44px 46px;
  margin-left: 72px;
  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;
}
/* Inline emphasis — italic serif for the brand word. */
.hero__title em { font-style: italic; color: #e0331a; }
.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: 40ch;
  position: relative;
  z-index: 1;
}

/* Apply button — white pill on the dark hero, dark ink text */
.hero__apply {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 26px;
  background: #ffffff;
  color: var(--ink);
  border: none;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.005em;
  text-transform: none;
  box-shadow: 0 8px 24px -10px rgba(11, 11, 11, 0.40);
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
  position: relative;
  z-index: 1;
  text-decoration: none;
}
.hero__apply:hover {
  background: #f5f4ef;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -10px rgba(11, 11, 11, 0.50);
}
.hero__apply-arrow {
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  color: currentColor;
  transition: transform 220ms ease;
}
.hero__apply:hover .hero__apply-arrow { transform: translate(3px, 0); }

/* Ghost variant — used when the action is a status, not a CTA
   (Shipped!, Filled!, etc). Liquid-glass background instead of white,
   bolder natural-case label so it reads as a state. */
.hero__apply--ghost {
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  text-transform: none;
  cursor: default;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.32) inset,
    0 -1px 0 rgba(255, 255, 255, 0.08) inset,
    0 10px 28px -14px rgba(11, 11, 11, 0.45);
}

/* ── cohort badge above the headline ──────────────────────────────────── */
.hero__cohort {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 8px;
  margin-bottom: 20px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  text-shadow: 0 1px 10px rgba(11, 11, 11, 0.3);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  position: relative;
  z-index: 1;
}
.hero__cohort-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #e0331a;
  box-shadow: 0 0 0 0 rgba(224, 51, 26, 0.55);
  animation: apps-dot-pulse 2.6s ease-in-out infinite;
}
.hero__cohort-sep {
  opacity: 0.45;
  margin: 0 2px;
}
.hero__cohort-status {
  color: #ff5252;
  text-shadow: 0 0 8px rgba(255, 82, 82, 0.45), 0 1px 10px rgba(11, 11, 11, 0.3);
}
.hero__cohort-status--open {
  color: #e0331a;
  text-shadow: 0 0 10px rgba(224, 51, 26, 0.5), 0 1px 10px rgba(11, 11, 11, 0.3);
}


/* ── dual-CTA row: Apply now + Explore program ─────────────────────────── */
.hero__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

/* Price caption under the CTA - deliberately quiet so it reads as
   reassuringly affordable ("cheap rent") rather than transactional. */
.hero__price {
  margin: 13px 0 0;
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: 0.005em;
  color: rgba(244, 237, 226, 0.5);
  max-width: 32ch;
}
.hero__price-amount {
  color: rgba(244, 237, 226, 0.82);
  font-weight: 500;
}

/* secondary ghost link */
.hero__secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  letter-spacing: 0.005em;
  color: rgba(255, 255, 255, 0.70);
  text-shadow: 0 1px 10px rgba(11, 11, 11, 0.3);
  transition: color 200ms ease;
  text-decoration: none;
}
.hero__secondary:hover { color: rgba(255, 255, 255, 0.94); }
.hero__secondary-circle {
  display: inline-block;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.52);
  flex: 0 0 auto;
  transition: border-color 200ms ease;
}
.hero__secondary:hover .hero__secondary-circle { border-color: rgba(255, 255, 255, 0.88); }

/* ── programme stat strip (4 glass cards) ─────────────────────────────── */
.hero__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 28px;
  position: relative;
  z-index: 1;
}
.hero__stat {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 12px 13px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.115);
  border-radius: 12px;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  box-shadow: 0 4px 14px -8px rgba(11, 11, 11, 0.28);
  transition: background 200ms ease, border-color 200ms ease;
}
.hero__stat:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}
.hero__stat-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: rgba(255, 255, 255, 0.62);
  margin-top: 2px;
}
.hero__stat-icon svg { width: 16px; height: 16px; }
.hero__stat-body { flex: 1; min-width: 0; }
.hero__stat-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 3px;
}
.hero__stat-n {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
}
.hero__stat-l {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.82);
}
.hero__stat-d {
  margin: 0;
  font-family: var(--sans);
  font-size: 9.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.50);
  letter-spacing: 0.01em;
}

/* ── founder apps globe + tagline ─────── */
.hero__founder-globe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.62);
}
.hero__founder-globe svg { width: 15px; height: 15px; }
.hero__founder-tagline {
  font-size: 11.5px;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.65);
  text-shadow: 0 1px 10px rgba(11, 11, 11, 0.3);
  line-height: 1.4;
  flex: 1;
}

/* founder apps preview — sits below the Apply pill */
.hero__founder {
  display: block;
  width: 100%;
  margin-top: 26px;
  padding: 18px 0 0;
  border: 0;
  text-align: left;
  text-decoration: none;
  color: inherit;
  cursor: default;
  background-color: transparent;
  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__founder-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: 12px;
}
.hero__founder-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hero__founder-stack {
  display: inline-flex;
  align-items: center;
}
.hero__founder-pic {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(255, 255, 255, 0.92);
  box-sizing: border-box;
  box-shadow: 0 4px 14px rgba(11, 11, 11, 0.35);
  transition: transform 220ms ease;
}
.hero__founder-pic + .hero__founder-pic { margin-left: -12px; }
.hero__founder-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 0 1px 10px rgba(11, 11, 11, 0.3);
}

/* --- Presented-by — mirrors the founder block beneath it --- */
.hero__sponsors {
  margin-top: 22px;
  position: relative;
  z-index: 1;
}
.hero__sponsors-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: 12px;
}
.hero__sponsors-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.hero__sponsors-row + .hero__sponsors-row {
  margin-top: 24px;
}
.hero__sponsor-logo {
  height: 40px;
  width: auto;
  display: block;
  filter: drop-shadow(0 4px 14px rgba(11, 11, 11, 0.45));
}
.hero__sponsor-logo--sm { height: 20px; }
.hero__sponsor-logo--lg { height: 56px; }
.hero__sponsor-sep {
  opacity: 0.45;
  margin: 0 2px;
}
.hero__sponsor-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border-radius: 12px;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.hero__sponsor-link:hover { opacity: 0.82; transform: translateY(-1px); }

/* Refined "Ivryn studio" pill - thin, premium hairline glass button. */
.hero__sponsor-link--pill {
  padding: 7px 15px 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(244, 237, 226, 0.14);
  background:
    linear-gradient(180deg, rgba(244, 237, 226, 0.06), rgba(244, 237, 226, 0.015));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 6px 20px rgba(0, 0, 0, 0.28);
  transition: border-color 260ms ease, background 260ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 260ms ease;
}
.hero__sponsor-link--pill:hover {
  opacity: 1;
  transform: translateY(-1px);
  border-color: rgba(244, 237, 226, 0.28);
  background: linear-gradient(180deg, rgba(244, 237, 226, 0.09), rgba(244, 237, 226, 0.03));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 10px 26px rgba(0, 0, 0, 0.34);
}
.hero__sponsor-content {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.hero__sponsor-mark {
  height: 16px !important;
  width: 16px;
  object-fit: contain;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.4));
}
.hero__sponsor-text {
  font-family: var(--serif, "Instrument Serif", serif);
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.015em;
  color: rgba(244, 237, 226, 0.92);
}
.hero__sponsors-tagline {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 10px rgba(11, 11, 11, 0.3);
}

/* =========================================================
   HOUSE MARKER — floating glass card anchored to the host city
   ========================================================= */
.house-marker {
  position: absolute;
  top: 0;
  left: 0;
  /* sits above .hero__left (z 2) so the prev/next cohort buttons stay
     reachable when they overlap the glass pane's DOM bounding box. The
     wrapper itself is pointer-events: none, so transparent areas of the
     marker don't steal clicks from the pane underneath. */
  z-index: 3;
  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);
  /* Grid with two rows: the always-visible row + a collapsed expand.
     Width comes from max-content of the widest child — the expand starts
     at width:0 so the card hugs the row by default. On hover the expand
     grows to a fixed width and the row track opens. */
  display: inline-grid;
  grid-template-columns: max-content;
  grid-template-rows: auto 0fr;
  justify-items: start;
  padding: 11px 18px;
  border-radius: 14px;
  background: rgba(22, 20, 18, 0.73);
  border: 0;
  backdrop-filter: blur(60px) saturate(130%) brightness(0.9);
  -webkit-backdrop-filter: blur(60px) saturate(130%) brightness(0.9);
  box-shadow: 0 10px 28px -18px rgba(11, 11, 11, 0.5);
  color: #fff;
  opacity: 0;
  pointer-events: auto;
  transition:
    opacity 520ms ease 1100ms,
    transform 620ms cubic-bezier(.2, .8, .2, 1) 1100ms,
    grid-template-rows 460ms cubic-bezier(0.16, 1, 0.3, 1),
    padding 460ms cubic-bezier(0.16, 1, 0.3, 1),
    background 320ms ease,
    box-shadow 320ms ease;
}
.house-marker.is-landed .house-marker__card {
  opacity: 0.96;
  transform: translate(-50%, 0);
}

.house-marker__row {
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}

/* ── Expansion: photos + stats + blurb. Hidden until card hover. ───────── */
.house-marker__expand {
  width: 0;
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  transition:
    width 460ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 280ms ease,
    margin-top 460ms cubic-bezier(0.16, 1, 0.3, 1);
}
.house-marker__expand > * { min-height: 0; }

.house-marker__card:hover {
  grid-template-rows: auto 1fr;
  padding-bottom: 18px;
  background: rgba(22, 20, 18, 0.73);
  box-shadow: 0 18px 40px -20px rgba(11, 11, 11, 0.55);
  opacity: 1;
}
.house-marker__card:hover .house-marker__expand {
  width: 360px;
  opacity: 1;
  margin-top: 14px;
}

.house-marker__photos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
.house-marker__photos:empty { display: none; }
.house-marker__photo {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-color: rgba(255, 255, 255, 0.04);
  border: 0;
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 360ms ease, filter 320ms ease, opacity 320ms ease;
  will-change: transform;
}
/* while one photo is zoomed (JS), the others recede - dim + slight shrink */
.house-marker__photos.has-zoom .house-marker__photo {
  opacity: 0.35;
  filter: saturate(0.8) brightness(0.68);
  transform: scale(0.97);
  transition: opacity 420ms ease, filter 420ms ease,
              transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* tap-anywhere-to-close backdrop (touch only) - premium dim + blur */
.photo-scrim {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(8, 6, 4, 0.55);
  opacity: 0;
  transition: opacity 280ms ease;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.photo-scrim.is-on { opacity: 1; }

/* floating zoom layer - lives on <body> so it escapes the card's overflow
   clip and floats ABOVE everything. Positioned/animated from JS. */
.photo-pop {
  position: fixed;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transform: translate(0, 0) scale(1);
  transform-origin: center center;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  /* premium spring: a touch of overshoot on the way up, gentle settle */
  transition: transform 460ms cubic-bezier(0.34, 1.32, 0.5, 1),
              opacity 260ms ease,
              box-shadow 460ms ease;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.photo-pop.is-on {
  opacity: 1;
  transform: translate(var(--pop-dx, 0px), var(--pop-dy, 0px)) scale(var(--pop-scale, 2.35));
  border-radius: 11px;
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.64),
    0 0 0 1px rgba(255, 255, 255, 0.62),
    0 10px 34px rgba(224, 51, 26, 0.42);
}
/* the leaving pop eases back without the springy overshoot */
.photo-pop.is-leaving {
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 260ms ease,
              box-shadow 320ms ease;
}

.house-marker__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  margin-bottom: 10px;
}
.house-marker__stats:empty { display: none; }
.house-marker__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.house-marker__stat-value {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1;
  color: #fff;
}
.house-marker__stat-label {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

.house-marker__blurb {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
  white-space: normal;
}
.house-marker__blurb:empty { display: none; }
.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__title-accent { color: #e84a2a; }
.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__sub-status {
  color: #ffc266;
  font-weight: 500;
  text-shadow: 0 0 6px rgba(255, 194, 102, 0.45);
}
.house-marker__loc {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.72);
}
.house-marker__loc-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: #e0331a;
  box-shadow: 0 0 0 2px rgba(224, 51, 26, 0.25);
}
.house-marker__nav {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 0 0 auto;
  width: auto;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
  white-space: nowrap;
  transition:
    background 220ms ease,
    border-color 220ms ease,
    transform 220ms cubic-bezier(.2, .8, .2, 1),
    opacity 220ms ease;
}
.house-marker__nav svg {
  width: 10px;
  height: 10px;
  display: block;
  flex: 0 0 auto;
}
.house-marker__nav-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1;
  display: inline-block;
}
.house-marker__nav:disabled .house-marker__nav-label { visibility: hidden; }
.house-marker__nav:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.55);
  transform: scale(1.08);
}
.house-marker__nav:active {
  transform: scale(0.94);
}
.house-marker__nav:disabled {
  visibility: hidden;
  pointer-events: none;
}
.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);
  }
}
/* molten heat radiating from the villa point — the forge core glowing
   under the host city. Anchored on the dot so it rides with the marker
   as the camera spins. Static glow (no particles), soft breathing pulse. */
.house-marker__heat {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 460px;
  height: 460px;
  transform: translate(-50%, 50%) scale(0.6);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  background:
    radial-gradient(closest-side,
      rgba(255, 168, 78, 0.42) 0%,
      rgba(255, 110, 40, 0.26) 30%,
      rgba(214, 70, 22, 0.12) 55%,
      transparent 76%);
  filter: blur(8px);
  mix-blend-mode: screen;
  transition: opacity 900ms ease 700ms, transform 1100ms cubic-bezier(.2, 1, .3, 1) 700ms;
}
.house-marker.is-landed .house-marker__heat {
  opacity: 1;
  transform: translate(-50%, 50%) scale(1);
  animation: house-marker-heat 4.2s ease-in-out 1800ms infinite;
}
@keyframes house-marker-heat {
  0%, 100% { opacity: 0.78; transform: translate(-50%, 50%) scale(0.98); }
  50%      { opacity: 1;    transform: translate(-50%, 50%) scale(1.05); }
}

.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;    }
}


/* =========================================================
   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: 92px; }

  /* NAV — keep all pills, shrink padding/font; hide apps badge on narrow screens.
     Maintain the upward spear extension and the side fade room. */
  .nav__pills {
    margin-top: -100px;
    padding: 124px 28px 10px;
    gap: 3px;
  }
  .nav__pill { padding: 12px 18px; font-size: 15px; }
  .nav__pill--brand { padding: 14px 26px; font-size: 16px; gap: 8px; }
  .nav__apps-status { display: none; }

  /* HERO — sheet composition mirrors desktop on mobile (this metaphor
     is even more native on touch). Map fills the hero; pane sits over
     the map; the sheet rises from the bottom 15vh. Just tune type
     sizes for narrow widths. */
  .hero__title { font-size: clamp(46px, 12vw, 72px); }
  .hero__sub   { font-size: 14.5px; max-width: 38ch; }

  /* stats: 2×2 grid on tablet */
  .hero__stats { grid-template-columns: repeat(2, 1fr); }

  /* founder tagline wraps below on narrow screens */
  .hero__founder-tagline { font-size: 11px; }

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

  /* APPLY — smaller title */
  .apply__title { font-size: clamp(34px, 8.5vw, 52px); margin-bottom: 22px; }
  .apply__lede { font-size: 14.5px; margin-bottom: 32px; }

  /* FAQ terminal — tighter on tablet */
  .faq__title { margin-bottom: 36px; }

  /* 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 only */
  .nav__pill:not(.nav__pill--brand) { display: none; }

  /* HERO */
  .hero__title { font-size: clamp(42px, 13vw, 56px); }
  .hero__kicker { font-size: 10px; }
  .hero__pane { margin-left: 20px; padding: 36px 24px 32px; }
  .hero__stats { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 20px; }
  .hero__founder-tagline { display: none; }
  .hero__founder-globe { display: none; }

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

/* =========================================================
   STANDALONE PAGES — applied to body.page--houses, etc.

   Pages without the dark hero (currently: /houses) reuse the same
   nav and footer but sit on a clean white canvas. The nav is given
   `is-scrolled` by script.js on hero-less pages so colors swap to
   ink-on-white automatically; here we only need page chrome.
   ========================================================= */
.page {
  /* clear the fixed nav */
  padding-top: var(--nav-h);
  background: var(--bg);
}

/* page hero block — editorial header for a non-landing page */
.page-hero {
  padding: clamp(56px, 9vw, 120px) var(--pad) clamp(36px, 5vw, 60px);
  background: var(--bg);
}
.page-hero__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 clamp(0px, 4vw, 60px);
}
.page-hero__eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 22px;
}
.page-hero__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 28px;
  max-width: 16ch;
}
.page-hero__title em { font-style: italic; }
.page-hero__body {
  font-family: var(--sans);
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 60ch;
}
.page-hero__body p { margin: 0 0 18px; }
.page-hero__body p:last-child { margin: 0; }

/* houses page: turn the horizontal poster rail into a responsive
   grid that takes advantage of the full canvas. The base .homes
   styles stay unchanged so the section can still render as a rail
   if/when it returns to the landing. */
.homes--page {
  padding: clamp(20px, 3vw, 40px) 0 clamp(60px, 8vw, 100px);
}
.homes__rail--page {
  overflow: visible;
  mask-image: none;
  -webkit-mask-image: none;
  padding: 0;
}
.homes__track--page {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(18px, 2vw, 28px);
  padding: 0 calc(var(--pad) + clamp(0px, 4vw, 60px));
  /* override the .homes__track inline-flex baseline */
}
.homes__track--page .poster {
  width: 100%;
  aspect-ratio: 3 / 4;
}

/* current-page nav pill — subtle indicator */
.nav__pill--current { color: var(--ink); }
.nav.is-scrolled .nav__pill--current { color: var(--ink); }

@media (max-width: 860px) {
  .page-hero__title { font-size: clamp(40px, 10vw, 64px); }
  .homes__track--page {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

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

/* =========================================================
   ONE-PAGER SHELL — body.page--single
   ---
   The site has been folded down into a single screen. The old nav is
   gone; navigation lives in a vertical rail of pills on the right that
   expand on hover. Four panels stack in the same viewport and the
   active one is faded in. Nothing scrolls.
   ========================================================= */
body.page--single {
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;            /* lock vertical scroll — one-pager */
  /* a hairline neutral tone so the panels read as floating over paper */
  background: var(--bg);
}

/* on the main panel the viewport is dark (map + atmospheric layers);
   on every other panel it's light. JS toggles data-active-panel on body
   so the rail/brand/dock can switch their chrome between dark + light. */
body.page--single[data-active-panel="main"] { background: #000; }

/* The page vignette already exists; nudge it above panels but below the
   floating chrome (brand, rail, dock, viewer). */
.page--single .page-vignette { z-index: 12; }

/* ---------- STAGE ---------- */
.stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

/* ---------- PANELS ---------- */
.panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 460ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 620ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 460ms ease;
  transform: translateY(14px) scale(0.992);
  filter: blur(6px);
  /* default panel background: warm paper. Main overrides to transparent
     so the map shows through. */
  background: var(--bg);
  overflow: hidden;
}
.panel.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  filter: none;
  /* keep the active panel on top of the leaving one mid-transition */
  z-index: 2;
}
.panel--main { background: transparent; }

/* shared inner column for non-hero panels */
.panel__inner {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding:
    clamp(64px, 9vh, 110px)   /* top — leaves room for the brand */
    var(--pad)
    clamp(60px, 8vh, 100px);  /* bottom — leaves room for the dock */
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3vh, 36px);
}

.panel__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 760px;
}
.panel__eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.panel__title {
  font-family: var(--serif);
  font-weight: 400;
  margin: 0;
  font-size: clamp(40px, 6.4vh, 78px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.panel__title em {
  font-style: italic;
  color: var(--accent);
}
.panel__lede {
  font-family: var(--sans);
  font-size: clamp(15px, 1.6vh, 17px);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  max-width: 620px;
}
.panel__lede-key {
  font-family: var(--mono);
  font-size: 0.86em;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(11, 11, 11, 0.06);
  color: var(--ink-2);
}

/* ---------- PANEL · ABOUT ---------- */
.panel--about {
  background: #0b0b0b;
  overflow: hidden;
}

/* Full-bleed bg — deep obsidian with a molten ember ambient (Crucible) */
.about-bg {
  position: absolute;
  inset: 0;
  background:
    /* two ember glows — restrained molten light from the top-right &
       bottom-left corners (forge ambience, not a literal furnace) */
    radial-gradient(52% 46% at 100% 0%, rgba(214, 66, 28, 0.26), rgba(176, 42, 18, 0.08) 42%, transparent 68%),
    radial-gradient(52% 46% at 0% 100%, rgba(214, 66, 28, 0.22), rgba(176, 42, 18, 0.07) 44%, transparent 70%),
    radial-gradient(90% 75% at 82% -10%, rgba(207, 138, 58, 0.10), transparent 56%),
    linear-gradient(165deg, #17110b 0%, #100b08 52%, #0a0706 100%);
  z-index: 0;
}
/* fine film grain — premium matte texture (no cheesy clouds) */
.about-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.045;
  mix-blend-mode: overlay;
  pointer-events: none;
}
/* depth vignette */
.about-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(125% 110% at 50% 35%, transparent 42%, rgba(4, 3, 2, 0.66) 100%);
  pointer-events: none;
}

/* very light veil — bg is already dark, keep it breathing */
.about-overlay {
  position: absolute;
  inset: 0;
  background: rgba(6, 4, 3, 0.14);
  z-index: 1;
}

.panel--about .panel__inner--about {
  position: relative;
  z-index: 2;
  justify-content: flex-start;
  align-items: flex-start;
  gap: clamp(18px, 2.6vh, 30px);
  max-width: 980px;
  margin: 0 auto;
  padding-top: clamp(58px, 7vh, 78px);
}

/* ---- masthead ---- */
.about-masthead {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.about-eyebrow {
  color: rgba(255, 255, 255, 0.38) !important;
}

.about-title {
  font-family: var(--serif);
  font-size: clamp(52px, 6.5vw, 92px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.about-title em {
  font-style: italic;
  color: #e0331a;
}

/* ---- feature: photo column + story column ---- */
.about-feature {
  display: grid;
  grid-template-columns: clamp(180px, 22vh, 240px) 1fr;
  gap: clamp(28px, 3.5vw, 48px);
  align-items: flex-start;
  width: 100%;
}

.about-feature__photo {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.about-feature__photo img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow: 0 24px 60px -14px rgba(0, 0, 0, 0.8);
}

.about-feature__caption {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.about-feature__name {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.about-feature__role {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.32);
}

.studio-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: 11px;
  padding: 6px 11px 6px 7px;
  border-radius: 9px;
  border: 1px solid rgba(244, 237, 226, 0.12);
  background: linear-gradient(120deg, rgba(244, 237, 226, 0.05), rgba(244, 237, 226, 0.015));
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.studio-badge:hover {
  border-color: rgba(244, 237, 226, 0.28);
  background: linear-gradient(120deg, rgba(244, 237, 226, 0.09), rgba(244, 237, 226, 0.03));
  transform: translateY(-1px);
}
.about-feature__photo .studio-badge .studio-badge__logo {
  width: 18px; height: 18px; aspect-ratio: 1; border-radius: 5px;
  display: block; flex: none; object-fit: cover; border: 0;
  box-shadow: 0 3px 8px -3px rgba(0, 0, 0, 0.6);
}
.studio-badge__label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.78);
}
.studio-badge__go {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  transition: color .25s ease, transform .25s ease;
}
.studio-badge:hover .studio-badge__go {
  color: rgba(255, 255, 255, 0.85);
  transform: translate(1px, -1px);
}

/* ---- story column ---- */
.about-feature__story {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-family: var(--serif);
  font-size: clamp(14px, 1.65vh, 17px);
  line-height: 1.78;
  color: rgba(255, 255, 255, 0.52);
  columns: 2;
  column-gap: clamp(22px, 3vw, 38px);
}

.about-feature__story p {
  margin: 0 0 0.7em;
  break-inside: avoid;
}

.about-feature__story p:last-child { margin-bottom: 0; }

.about-feature__story em {
  font-style: italic;
  color: rgba(255, 255, 255, 0.86);
}

/* =========================================================
@media (max-width: 860px) {
  .departures__board { --dep-cols: 64px 1fr 92px; }
  .dep-date { display: none; }
  .boarding-pass-wrap { grid-template-columns: 1fr; gap: 22px; }
  .pass { max-width: 380px; }
  .gate__photos { grid-template-columns: repeat(4, 1fr); }
}


/* ---------- PANEL · MAIN (hero overrides) ---------- */
/* The original .hero was a sticky 100vh section with nav-h top padding.
   Inside a panel we don't need the nav offset; the brand and dock provide
   their own breathing room. */
.panel--main .hero {
  position: relative;
  height: 100%;
  padding-top: clamp(72px, 11vh, 120px);
  padding-bottom: clamp(64px, 9vh, 100px);
}

/* ---------- BRAND (top center) ---------- */
/* Pure wordmark — no pill, no border, no background. Just the letters. */
.brand {
  position: fixed;
  top: clamp(18px, 3.2vh, 30px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 3vh, 28px);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--accent);
  background: transparent;
  border: 0;
  padding: 0;
  transition: color 280ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.brand:hover { transform: translateX(-50%) translateY(-1px); }
.brand__dot { color: var(--accent); opacity: 0.95; }

/* on the dark hero map, a brighter forge red for pop */
body.page--single[data-active-panel="main"] .brand {
  color: #f4ede2;
  text-shadow: 0 2px 18px rgba(207, 138, 58, 0.45);
}

/* ---------- BOTTOM BLUR FADE ---------- */
/* A soft frosted strip sitting at the very bottom of every panel, fading
   smoothly upward into clarity. Sits below the dock chrome (z 80) so the
   apply pill + status read as floating ON the blur, not under it. */
body.page--single::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(120px, 18vh, 200px);
  pointer-events: none;
  z-index: 70;
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  -webkit-mask-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.92) 35%,
    rgba(0, 0, 0, 0.6) 65%,
    rgba(0, 0, 0, 0) 100%
  );
          mask-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.92) 35%,
    rgba(0, 0, 0, 0.6) 65%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* ---------- RAIL (right vertical pills) ---------- */
.rail {
  position: fixed;
  top: 50%;
  right: clamp(14px, 2.4vw, 26px);
  transform: translateY(-50%);
  z-index: 80;
}
.rail__list {
  list-style: none;
  margin: 0;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-radius: 22px;
  background: rgba(22, 20, 18, 0.73);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  border: 0.5px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 18px 40px -22px rgba(11, 11, 11, 0.18),
    0 4px 14px -10px rgba(11, 11, 11, 0.10);
  transition: background 280ms ease, border-color 280ms ease;
}

body.page--single[data-active-panel="main"] .rail__list {
  background: rgba(22, 20, 18, 0.73);
  border-color: rgba(255, 255, 255, 0.06);
}

/* Each pill — fixed-size, no grow-on-hover. Labels always readable.
   position: relative so the [data-disabled] "coming soon" tooltip
   (::after) can anchor to the pill. */
.rail__pill {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  border: 0;
  background: transparent;
  margin: 0;
  padding: 0 16px 0 14px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--ink-3);
  opacity: 0.62;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
  transition: color 220ms ease, opacity 220ms ease, background 220ms ease;
}
.rail__pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.55;
  flex: none;
  transition: opacity 220ms ease, background 220ms ease;
}
.rail__pill-label {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  opacity: 1;
}
.rail__pill-soon {
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 243, 238, 0.52);
  background: rgba(255, 255, 255, 0.1);
  border: 0.5px solid rgba(255, 255, 255, 0.18);
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
  flex: none;
}
/* suppress duplicate tooltip since inline badge already shows */
.rail__pill--soon[data-disabled="true"]::after { display: none; }

/* individual pill hover — just a tone shift, no size change */
.rail__pill:hover {
  color: var(--ink);
  opacity: 1;
  background: rgba(11, 11, 11, 0.06);
}
.rail__pill:hover .rail__pill-dot { opacity: 1; }

/* Disabled pills — inert nav items.
   Inert: dimmed, not-allowed cursor, no hover tone change, no dot pop.
   On hover we surface a small "coming soon" pill to the left of the rail. */
/* Dim disabled pills via COLOR, not opacity — the "coming soon" tooltip is a
   ::after child, so a parent opacity:0.32 would also fade the tooltip to ~32%
   (it looked invisible on every background). Keeping the pill at full opacity
   lets the tooltip render at full strength. */
.rail__pill[data-disabled="true"] {
  cursor: not-allowed;
  opacity: 1;
  color: rgba(244, 243, 238, 0.34);
}
.rail__pill[data-disabled="true"]:hover {
  color: rgba(244, 243, 238, 0.5);
  background: transparent;
  opacity: 1;
}
.rail__pill[data-disabled="true"] .rail__pill-dot { opacity: 0.4; }
.rail__pill[data-disabled="true"]:hover .rail__pill-dot { opacity: 0.55; }
body.page--single[data-active-panel="main"] .rail__pill[data-disabled="true"] {
  opacity: 1;
  color: rgba(244, 243, 238, 0.3);
}
body.page--single[data-active-panel="main"] .rail__pill[data-disabled="true"]:hover {
  color: rgba(244, 243, 238, 0.5);
  background: transparent;
  opacity: 1;
}

.rail__pill[data-disabled="true"]::after {
  content: "coming soon";
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(4px);
  padding: 5px 10px;
  border-radius: 999px;
  background: #0b0b0b;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 6px 22px -6px rgba(0, 0, 0, 0.75);
  color: #ffffff;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease 80ms, transform 220ms cubic-bezier(0.16, 1, 0.3, 1) 80ms;
}
.rail__pill[data-disabled="true"]:hover::after {
  opacity: 1;
  transform: translateY(-50%);
}

/* active pill — filled accent dot, slight emphasis */
.rail__pill.is-active {
  color: var(--ink);
  opacity: 1;
  background: rgba(11, 11, 11, 0.05);
}
.rail__pill.is-active .rail__pill-dot {
  background: #ffc266;
  opacity: 1;
  box-shadow:
    0 0 0 3px rgba(255, 194, 102, 0.18),
    0 0 10px 2px rgba(255, 194, 102, 0.55),
    0 0 20px 4px rgba(255, 194, 102, 0.28);
  animation: rail-dot-glow 2.4s ease-in-out infinite;
}
@keyframes rail-dot-glow {
  0%, 100% {
    box-shadow:
      0 0 0 3px rgba(255, 194, 102, 0.18),
      0 0 10px 2px rgba(255, 194, 102, 0.55),
      0 0 20px 4px rgba(255, 194, 102, 0.28);
  }
  50% {
    box-shadow:
      0 0 0 3px rgba(255, 194, 102, 0.24),
      0 0 14px 3px rgba(255, 194, 102, 0.70),
      0 0 26px 6px rgba(255, 194, 102, 0.38);
  }
}

/* dark variant on main */
body.page--single[data-active-panel="main"] .rail__pill {
  color: #f4f3ee;
  opacity: 0.5;
}
body.page--single[data-active-panel="main"] .rail__pill:hover {
  color: #ffffff;
  opacity: 1;
  background: rgba(255, 255, 255, 0.10);
}
body.page--single[data-active-panel="main"] .rail__pill.is-active {
  color: #ffffff;
  opacity: 1;
  background: rgba(255, 255, 255, 0.08);
}

/* keyboard focus ring */
.rail__pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- DOCK (bottom thin strip) ---------- */
/* No background / blur / border — the dock is just floating elements
   over whichever panel is showing. Dead space lets clicks pass through
   to the content beneath. */
.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  height: clamp(46px, 6vh, 56px);
  padding: 0 clamp(16px, 3vw, 36px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  background: transparent;
  pointer-events: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color 280ms ease;
}
.dock > * { pointer-events: auto; }
body.page--single[data-active-panel="main"] .dock {
  color: rgba(244, 243, 238, 0.82);
}

.dock__left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
/* Dock dot — color reflects the active cohort's applications state.
   Driven by body[data-apps-status]: filled → red, open → green,
   closed → grey. The pulse halo channels come from the same custom
   property so they stay in sync without per-status keyframes. */
body { --apps-dot: #d23a3a; --apps-dot-rgb: 210, 58, 58; }
body[data-apps-status="open"]   { --apps-dot: #e0331a; --apps-dot-rgb: 224, 51, 26; }
body[data-apps-status="filled"] { --apps-dot: #d23a3a; --apps-dot-rgb: 210, 58, 58; }
body[data-apps-status="closed"] { --apps-dot: #8b8b88; --apps-dot-rgb: 139, 139, 136; }

.dock__apps-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--apps-dot);
  box-shadow: 0 0 0 3px rgba(var(--apps-dot-rgb), 0.20);
  animation: dock-pulse 2.4s ease-in-out infinite;
  flex: none;
  transition: background 280ms ease;
}
@keyframes dock-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(var(--apps-dot-rgb), 0.20); }
  50%      { box-shadow: 0 0 0 5px rgba(var(--apps-dot-rgb), 0.06); }
}
.dock__apps-label { color: var(--ink-2); }
.dock__apps-range {
  color: var(--ink-3);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  border-left: 1px solid rgba(11, 11, 11, 0.12);
  padding-left: 10px;
  margin-left: 4px;
}
body.page--single[data-active-panel="main"] .dock__apps-label { color: #e0331a; }
body.page--single[data-active-panel="main"] .dock__apps-range {
  color: rgba(244, 243, 238, 0.62);
  border-left-color: rgba(255, 255, 255, 0.16);
}

.dock__center { display: flex; justify-content: center; }
.dock__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px 9px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.005em;
  text-transform: none;
  cursor: pointer;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), background 220ms ease;
}
.dock__cta:hover {
  transform: translateY(-1px);
  background: #1f1f1f;
}
.dock__cta-arrow { font-size: 14px; line-height: 1; }
body.page--single[data-active-panel="main"] .dock__cta {
  background: #f4f3ee;
  color: #0b0b0b;
}
body.page--single[data-active-panel="main"] .dock__cta:hover { background: #ffffff; }

.dock__right {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  min-width: 0;
}
.dock__socials {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dock__icon {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--ink-2);
  transition: color 220ms ease, background 220ms ease, transform 180ms ease;
}
.dock__icon:hover {
  color: var(--ink);
  background: rgba(11, 11, 11, 0.06);
  transform: translateY(-1px);
}
body.page--single[data-active-panel="main"] .dock__icon { color: rgba(244, 243, 238, 0.75); }
body.page--single[data-active-panel="main"] .dock__icon:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.10);
}

/* about panel — same dark chrome as main */
body.page--single[data-active-panel="about"] { background: #080c12; }
body.page--single[data-active-panel="about"] .brand { color: #f4f3ee; }
body.page--single[data-active-panel="about"] .rail__pill {
  color: #f4f3ee;
  opacity: 0.5;
}
body.page--single[data-active-panel="about"] .rail__pill:hover {
  color: #ffffff;
  opacity: 1;
  background: rgba(255, 255, 255, 0.10);
}
body.page--single[data-active-panel="about"] .rail__pill.is-active {
  color: #ffffff;
  opacity: 1;
  background: rgba(255, 255, 255, 0.08);
}
body.page--single[data-active-panel="about"] .rail__pill[data-disabled="true"] {
  opacity: 1;
  color: rgba(244, 243, 238, 0.3);
}
body.page--single[data-active-panel="about"] .rail__pill[data-disabled="true"]:hover {
  color: rgba(244, 243, 238, 0.5);
  background: transparent;
  opacity: 1;
}
body.page--single[data-active-panel="about"] .dock { color: rgba(244, 243, 238, 0.82); }
body.page--single[data-active-panel="about"] .dock__icon { color: rgba(244, 243, 238, 0.75); }
body.page--single[data-active-panel="about"] .dock__icon:hover { color: #ffffff; background: rgba(255, 255, 255, 0.10); }

/* mobile: collapse the dock cleanly, stack the rail */
@media (max-width: 720px) {
  .dock {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "left cta"
      "right right";
    height: auto;
    padding: 8px clamp(14px, 4vw, 22px);
    gap: 8px 14px;
  }
  .dock__left   { grid-area: left; }
  .dock__center { grid-area: cta; justify-self: end; }
  .dock__right  { grid-area: right; justify-content: space-between; }
  .dock__apps-range { display: none; }

  .rail { right: 10px; }
  .rail__list { padding: 6px; gap: 4px; }
  .rail__pill { height: 26px; padding: 0 10px; font-size: 10px; }
}


/* =========================================================
   LOGIN BUTTON — top-right persistent chrome
   ========================================================= */
.site-login-btn {
  position: fixed;
  top: clamp(14px, 2.5vh, 22px);
  right: clamp(14px, 2.4vw, 26px);
  z-index: 82;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px 0 13px;
  height: 34px;
  border-radius: 999px;
  border: none;
  background: #f4f3ee;
  color: #0b0b0b;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 8px 22px -8px rgba(11, 11, 11, 0.22);
  transition: background 200ms ease, transform 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms ease;
}
.site-login-btn:hover {
  background: #ffffff;
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 12px 28px -8px rgba(11, 11, 11, 0.28);
}
.site-login-btn:active { transform: scale(0.97); }
.site-login-btn__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ===== Crucible — hide the login button until accounts exist ===== */
.site-login-btn { display: none; }

/* ===== Crucible — "club" wordmark suffix ===== */
.brand__club {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.34em;
  font-weight: 800;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: 0.55em;
  color: #e0331a;
  opacity: 1;
}

/* ===== Apply CTA — press + ember burst (forge) ===== */
.hero__apply, .dock__cta {
  transition: transform 140ms cubic-bezier(.2,1,.3,1), box-shadow 220ms ease, background 200ms ease;
}
.hero__apply:not(.hero__apply--ghost):hover { transform: translateY(-2px); box-shadow: 0 12px 30px -8px rgba(224,51,26,.75); }
.dock__cta:hover { box-shadow: 0 10px 26px -8px rgba(224,51,26,.75); }
.hero__apply:active, .dock__cta:active { transform: scale(.95); }
.hero__apply.is-fired, .dock__cta.is-fired { animation: cta-fire 560ms ease-out; }
@keyframes cta-fire {
  0%   { box-shadow: 0 0 0 0 rgba(224,51,26,.75), 0 0 0 0 rgba(255,60,30,.6); }
  55%  { box-shadow: 0 0 0 16px rgba(224,51,26,0), 0 0 34px 8px rgba(255,60,30,.65); }
  100% { box-shadow: 0 0 0 0 rgba(224,51,26,0), 0 0 0 0 rgba(255,60,30,0); }
}

/* ===== Crucible — copy confirmation toast ===== */
.crucible-toast {
  position: fixed;
  left: 50%;
  bottom: 88px;
  transform: translateX(-50%) translateY(12px);
  background: rgba(18, 12, 9, 0.97);
  color: #f4ede2;
  border: 1px solid rgba(224, 51, 26, 0.45);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  padding: 12px 20px;
  border-radius: 999px;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 240ms ease, transform 240ms ease;
  box-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.7), 0 0 24px -8px rgba(224, 51, 26, 0.4);
}
.crucible-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== Crucible — villa gallery (about panel) ===== */
.villa-gallery { position: relative; z-index: 2; margin-top: clamp(28px, 5vh, 48px); }
.villa-gallery__label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 237, 226, 0.55);
  margin-bottom: 14px;
}
.villa-gallery__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.villa-gallery__grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(244, 237, 226, 0.10);
  filter: saturate(0.92) brightness(0.94);
  transition: transform 280ms cubic-bezier(.16, 1, .3, 1), filter 280ms ease;
}
.villa-gallery__grid img:hover { transform: translateY(-3px); filter: saturate(1) brightness(1); }

/* ===== Crucible — Ivryn studio apps preview (about) ===== */
.studio-preview { position: relative; z-index: 2; margin-top: clamp(28px, 5vh, 46px); }
.studio-preview__label {
  display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(244, 237, 226, 0.55); margin-bottom: 14px;
}
.studio-preview__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; width: 100%; }
.studio-app {
  display: flex; align-items: center; gap: 16px;
  height: 70px; box-sizing: border-box;
  padding: 0 20px; border-radius: 13px;
  border: 1px solid rgba(244, 237, 226, 0.08);
  background:
    linear-gradient(105deg, var(--accent-soft, rgba(255,255,255,0.05)) 0%, transparent 52%),
    linear-gradient(105deg, var(--accent-bg, #16110d) 0%, #0a0807 76%);
  transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .3s ease, box-shadow .3s ease;
}
.studio-app:hover {
  transform: translateY(-2px);
  border-color: var(--accent, rgba(224, 51, 26, 0.5));
  box-shadow: 0 16px 32px -18px rgba(0, 0, 0, 0.7);
}
.studio-app__art img {
  width: 44px; height: 44px; border-radius: 11px; display: block; flex: none;
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.55);
}
.studio-app__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.studio-app__info strong { font-family: var(--serif); font-size: 19px; line-height: 1; color: #fff; }
.studio-app__tag { font-size: 12.5px; color: rgba(255, 255, 255, 0.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.studio-app__stores { display: none; }
.studio-app__go { margin-left: auto; align-self: center; font-size: 15px; color: rgba(255, 255, 255, 0.4); transition: color .25s, transform .25s; }
.studio-app:hover .studio-app__go { color: var(--accent, #ff6a4a); transform: translate(2px, -2px); }

/* rail active dot → forge red (visible on main + about) */
.rail__pill.is-active .rail__pill-dot { background: #e0331a; opacity: 1; }

/* ===== Short desktop viewports — keep the whole pane (incl. sponsor) visible ===== */
@media (min-width: 821px) and (max-height: 900px) {
  .hero { padding-top: calc(var(--nav-h) - 24px); padding-bottom: 64px; }
  .hero__left { align-items: flex-start; min-height: 0; }
  .hero__pane { padding-top: 6px; padding-bottom: 8px; }
  .hero__title { font-size: clamp(38px, 4.4vw, 60px); margin: 12px 0 12px; }
  .hero__sub { margin-bottom: 0; }
  .hero__founder { margin-top: 16px; }
  .hero__sponsors { margin-top: 12px; }
}