/* ==========================================================================
   Global Commission Alliance — main stylesheet
   ========================================================================== */

:root {
  --bg: #07080c;
  --bg-2: #0b0d13;
  --bg-3: #11141c;
  --bg-4: #181c27;
  --line: rgba(255, 244, 230, 0.09);
  --line-2: rgba(255, 244, 230, 0.16);
  --text: #f6f0e6;
  --text-2: rgba(246, 240, 230, 0.74);
  --text-3: rgba(246, 240, 230, 0.5);
  --gold: #f2b84b;
  --gold-2: #ffd88a;
  --gold-3: #b9832a;
  --ember: #ff7a3c;
  --paper: #f2ebdd;
  --paper-2: #e8dfcd;
  --ink: #17140f;
  --ink-2: #4b4438;
  --ink-3: #7a7060;
  --ok: #92d6a5;

  --serif: 'Instrument Serif', 'Iowan Old Style', 'Times New Roman', serif;
  --sans: 'Inter Tight', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --radius: 18px;
  --radius-sm: 10px;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-io: cubic-bezier(0.7, 0, 0.2, 1);
  --gutter: clamp(16px, 4.2vw, 64px);
  --maxw: 1320px;
  --nav-h: 72px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--gold); color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 999; background: var(--gold); color: var(--ink); padding: 10px 16px; border-radius: 999px; font-weight: 600; transition: top .2s; }
.skip-link:focus { top: 16px; }

[hidden] { display: none !important; }

/* Lenis smooth scroll */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- type ---------- */
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
.mono { font-family: var(--mono); }
em, .em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--gold-2); }
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ''; width: 22px; height: 1px; background: currentColor; opacity: .7; }
.eyebrow.no-rule::before { display: none; }
.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(44px, 7.4vw, 124px);
  line-height: 0.95;
  letter-spacing: -0.025em;
}
.h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5.6vw, 88px); line-height: 1; letter-spacing: -0.02em; }
.h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4.2vw, 64px); line-height: 1.02; letter-spacing: -0.02em; }
.h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.1; letter-spacing: -0.01em; }
.lede { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--text-2); max-width: 62ch; }
.muted { color: var(--text-3); }
.small { font-size: 14px; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { position: relative; padding: clamp(80px, 12vw, 160px) 0; }
.section-head { display: grid; gap: 18px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head.split { grid-template-columns: 1.2fr 1fr; align-items: end; gap: 32px; }
@media (max-width: 860px) { .section-head.split { grid-template-columns: 1fr; } }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); }
@media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; } }
.stack-sm > * + * { margin-top: 12px; }
.stack > * + * { margin-top: 20px; }
.stack-lg > * + * { margin-top: 32px; }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- buttons ---------- */
.btn {
  --h: 52px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--h); padding: 0 26px;
  border-radius: 999px;
  font-weight: 600; font-size: 15px; letter-spacing: 0.01em;
  white-space: nowrap;
  transition: transform .35s var(--ease), background .3s, color .3s, box-shadow .35s, border-color .3s;
  isolation: isolate; overflow: hidden;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-gold { background: var(--gold); color: #1a1206; box-shadow: 0 0 0 0 rgba(242,184,75,.0), 0 10px 30px -10px rgba(242,184,75,.6); }
.btn-gold::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120px 60px at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.55), transparent 70%);
  opacity: 0; transition: opacity .3s;
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 0 0 6px rgba(242,184,75,.16), 0 18px 40px -12px rgba(242,184,75,.75); }
.btn-gold:hover::after { opacity: 1; }
.btn-ghost { border: 1px solid var(--line-2); color: var(--text); background: rgba(255,255,255,.02); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn-ghost:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.06); transform: translateY(-2px); }
.btn-dark { background: var(--ink); color: var(--paper); }
.btn-dark:hover { transform: translateY(-2px); background: #000; }
.btn-sm { --h: 40px; padding: 0 18px; font-size: 14px; }
.btn-lg { --h: 60px; padding: 0 32px; font-size: 16px; }
.btn-block { width: 100%; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--gold-2); }
.link-arrow svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 12px; border-radius: 999px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--line-2); color: var(--text-2);
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.chip.live .dot { animation: pulse 1.8s infinite; }
.chip.done { border-color: rgba(242,184,75,.4); color: var(--gold-2); }
.chip.sample { height: 22px; padding: 0 8px; font-size: 10px; border-style: dashed; color: var(--text-3); }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }

/* ---------- grain + vignette (global atmosphere) ---------- */
.grain {
  pointer-events: none; position: fixed; inset: -50%; z-index: 90;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .055; mix-blend-mode: overlay;
  animation: grain 1s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); } 40% { transform: translate(2%,-3%); }
  60% { transform: translate(-2%,-1%); } 80% { transform: translate(3%,3%); } 100% { transform: translate(0,0); }
}

/* ---------- NAV ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 80;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background .4s, backdrop-filter .4s, border-color .4s, transform .5s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled { background: rgba(7,8,12,.62); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border-color: var(--line); }
.nav.hide { transform: translateY(-100%); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: none; }
.brand { display: flex; align-items: center; gap: 12px; height: 44px; }
.brand img { height: 40px; width: auto; }
.brand .brand-mark { height: 38px; }
.brand .brand-word { height: 30px; }
/* the menu floats in a glass capsule; a small gold planet orbits to whichever link you point at */
.nav-links { position: relative; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px;
  background: rgba(10,11,16,.42); border: 1px solid rgba(255,255,255,.09); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 30px rgba(0,0,0,.25); }
.nav-links a {
  position: relative; z-index: 1; padding: 8px 15px; border-radius: 999px;
  font-size: 14px; font-weight: 500; letter-spacing: .01em; color: var(--text-2);
  transition: color .3s;
}
.nav-links a:hover, .nav-links a:focus-visible, .nav-links a[aria-current='page'] { color: var(--text); }
.nav-orbit { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 140% at 50% 120%, rgba(242,184,75,.16), rgba(255,255,255,.05) 60%); border: 1px solid rgba(242,184,75,.18);
  transition: left .5s var(--ease), width .5s var(--ease), opacity .3s; }
.nav-orbit.on { opacity: 1; }
.nav-orbit::before { content: ''; position: absolute; left: 12%; right: 12%; bottom: -4px; height: 10px; border-radius: 50%; border-bottom: 1px solid rgba(242,184,75,.55); }
.nav-orbit i { position: absolute; left: 50%; bottom: -6px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3d6, var(--gold-2) 50%, #8a5e14); box-shadow: 0 0 8px rgba(242,184,75,.8), 0 0 18px rgba(242,184,75,.35);
  animation: nav-drift 5s ease-in-out infinite; }
@keyframes nav-drift { 0%, 100% { transform: translateX(-9px); } 50% { transform: translateX(9px); } }
@media (prefers-reduced-motion: reduce) { .nav-orbit i { animation: none; } .nav-orbit { transition: opacity .3s; } }
.nav-cta { display: flex; align-items: center; gap: 10px; }
.menu-btn { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); align-items: center; justify-content: center; }
.menu-btn span { position: relative; width: 16px; height: 1.5px; background: var(--text); transition: .3s; }
.menu-btn span::before, .menu-btn span::after { content: ''; position: absolute; left: 0; width: 16px; height: 1.5px; background: var(--text); transition: .3s var(--ease); }
.menu-btn span::before { top: -5px; } .menu-btn span::after { top: 5px; }
.menu-open .menu-btn span { background: transparent; }
.menu-open .menu-btn span::before { top: 0; transform: rotate(45deg); }
.menu-open .menu-btn span::after { top: 0; transform: rotate(-45deg); }
@media (max-width: 900px) {
  .nav-links { display: none; }
  .menu-btn { display: inline-flex; }
  .nav-cta .btn { --h: 42px; padding: 0 18px; }
  .brand .brand-word { display: none; }
}

.mobile-menu {
  position: fixed; inset: 0; z-index: 79;
  background: radial-gradient(120% 80% at 50% 0%, #1a1608 0%, var(--bg) 60%);
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--nav-h) + 20px) var(--gutter) 40px;
  opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility .45s;
}
.menu-open .mobile-menu { opacity: 1; visibility: visible; }
.mobile-menu a.big { display: block; font-family: var(--serif); font-size: clamp(44px, 12vw, 72px); line-height: 1.12; transform: translateY(20px); opacity: 0; transition: transform .6s var(--ease), opacity .6s; }
.menu-open .mobile-menu a.big { transform: none; opacity: 1; }
.menu-open .mobile-menu a.big:nth-child(2) { transition-delay: .05s; }
.menu-open .mobile-menu a.big:nth-child(3) { transition-delay: .1s; }
.menu-open .mobile-menu a.big:nth-child(4) { transition-delay: .15s; }
.mobile-menu .foot { margin-top: 40px; color: var(--text-3); font-size: 14px; }

/* ---------- PRELOADER ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: var(--bg);
  transition: opacity .9s var(--ease), visibility .9s;
}
.preloader.done { opacity: 0; visibility: hidden; }
.preloader .pl-inner { display: grid; justify-items: center; gap: 26px; text-align: center; padding: 0 24px; }
.preloader img { width: 88px; height: 88px; opacity: .95; animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 0%,100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(242,184,75,0)); } 50% { transform: scale(1.04); filter: drop-shadow(0 0 22px rgba(242,184,75,.45)); } }
.preloader .pl-bar { width: min(240px, 60vw); height: 1px; background: var(--line-2); position: relative; overflow: hidden; }
.preloader .pl-bar i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--gold-3), var(--gold-2)); transition: transform .4s var(--ease); }
.preloader .pl-verse { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--text-2); max-width: 34ch; }
.preloader .pl-ref { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; color: var(--text-3); text-transform: uppercase; }

/* ==========================================================================
   HOME — THE JOURNEY
   ========================================================================== */
.webgl {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.webgl canvas { width: 100% !important; height: 100% !important; }
@supports (height: 100lvh) { .webgl { bottom: auto; height: 100lvh; } } /* steady while a phone's address bar moves */
.journey { position: relative; z-index: 2; }
.journey-track { position: relative; }
.journey-stage { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.journey-stage.gone { visibility: hidden; }
.journey-stage .vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(130% 90% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,.45) 0%, transparent 22%, transparent 70%, rgba(0,0,0,.6) 100%);
}

/* act overlays */
.act {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end;
  padding: 0 var(--gutter) clamp(72px, 12vh, 140px);
}
.act.center { align-items: flex-end; justify-content: center; text-align: center; padding-bottom: clamp(48px, 9vh, 110px); }
.act.center::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 62%; background: linear-gradient(0deg, rgba(5,6,10,.92) 10%, rgba(5,6,10,.55) 55%, transparent); opacity: 0; transition: opacity 1s var(--ease); pointer-events: none; }
.act.center.on::before { opacity: 1; }
.act.center .act-inner { position: relative; }
.act.center h2 { font-size: clamp(42px, 6.4vw, 104px); }
.act-inner { max-width: 980px; }
.act .act-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.act .act-num { font-family: var(--mono); font-size: 12px; letter-spacing: .2em; color: var(--gold-2); }
.act .act-title { font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); }
.act .act-place { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.act h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(46px, 8vw, 132px); line-height: .94; letter-spacing: -0.025em;
  text-shadow: 0 2px 40px rgba(0,0,0,.45);
}
.act p.act-sub { margin-top: 22px; max-width: 46ch; font-size: clamp(17px, 1.45vw, 21px); color: var(--text-2); text-shadow: 0 1px 20px rgba(0,0,0,.6); }
.act .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .16em; margin-bottom: -.16em; }
.act .w > span { display: inline-block; transform: translateY(140%); transition: transform 1.1s var(--ease); transition-delay: calc(var(--i) * 55ms); }
.act .fade { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease) .25s, transform .9s var(--ease) .25s; }
.act.on .w > span { transform: none; }
.act.on .fade { opacity: 1; transform: none; }
.act:not(.on) .w > span { transition-duration: .5s; transition-delay: 0s; }
.act:not(.on) .fade { transition-delay: 0s; transition-duration: .4s; }

/* word-by-word reveal (inner pages) */
.words .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .16em; margin-bottom: -.16em; }
.words .w > span { display: inline-block; transform: translateY(140%); transition: transform 1.1s var(--ease); transition-delay: calc(var(--i) * 60ms + .1s); }
.words.in .w > span { transform: none; }

/* opening */
.act-open { align-items: center; }
.act-open::before { content: ''; position: absolute; inset: 0; background: radial-gradient(90% 80% at 20% 50%, rgba(5,6,10,.72), rgba(5,6,10,.25) 60%, transparent 85%); opacity: 0; transition: opacity 1s var(--ease); pointer-events: none; }
.act-open.on::before { opacity: 1; }
.act-open .act-inner { position: relative; }
.act-open .act-inner { max-width: 1180px; }
.act-open h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(44px, 7.2vw, 118px); line-height: .96; letter-spacing: -0.028em;
  text-shadow: 0 4px 60px rgba(0,0,0,.5);
}
.act-open .open-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; pointer-events: auto; }
.act-open .eyebrow { color: var(--text-2); margin-bottom: 24px; }

.scroll-cue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 10px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--text-2);
  transition: opacity .5s;
}
.scroll-cue .line { width: 1px; height: 46px; background: linear-gradient(var(--text-2), transparent); position: relative; overflow: hidden; }
.scroll-cue .line::after { content: ''; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--gold-2); animation: cue 1.8s var(--ease-io) infinite; }
@keyframes cue { to { top: 110%; } }

/* HUD rail */
.hud {
  position: fixed; left: clamp(14px, 2vw, 30px); top: 50%; transform: translateY(-50%);
  z-index: 5; display: grid; gap: 14px; pointer-events: auto;
  transition: opacity .6s;
}
.hud.off { opacity: 0; pointer-events: none; }
.hud button {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-3); transition: color .3s;
}
.hud button i { width: 18px; height: 1px; background: currentColor; transition: width .4s var(--ease), background .3s; }
.hud button span { opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .3s; white-space: nowrap; }
.hud:hover button span { opacity: 1; transform: none; }
.hud button.on { color: var(--gold-2); }
.hud button.on i { width: 34px; background: var(--gold-2); box-shadow: 0 0 10px var(--gold); }
.hud button.past { color: var(--text-2); }
@media (max-width: 760px) { .hud { display: none; } }

.journey-tools {
  position: fixed; right: var(--gutter); bottom: 24px; z-index: 6;
  display: flex; gap: 10px; pointer-events: auto; transition: opacity .5s;
}
.journey-tools.off { opacity: 0; pointer-events: none; }
.progress-ring { position: fixed; right: var(--gutter); top: calc(var(--nav-h) + 12px); z-index: 6; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--text-3); transition: opacity .5s; }
.progress-ring.off { opacity: 0; }

/* no-3d fallback */
.fallback-journey { display: none; }
.no-3d .webgl, .no-3d .journey-track, .no-3d .journey-stage, .no-3d .hud, .no-3d .journey-tools, .no-3d .progress-ring { display: none !important; }
.no-3d .fallback-journey { display: block; }
.fb-hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; }
.fb-hero video, .fb-hero img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .6; }
.fb-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,8,12,.4), rgba(7,8,12,.9)); }
.fb-hero .wrap { position: relative; z-index: 1; padding-top: var(--nav-h); }
.fb-act { padding: clamp(60px, 10vw, 120px) 0; border-top: 1px solid var(--line); }
.fb-act .fb-media { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; margin-top: 32px; }
.fb-act .fb-media img { width: 100%; height: clamp(180px, 28vw, 380px); object-fit: cover; border-radius: var(--radius); }
@media (max-width: 700px) { .fb-act .fb-media { grid-template-columns: 1fr 1fr; } .fb-act .fb-media img:first-child { grid-column: 1 / -1; } }

/* ==========================================================================
   CONTENT AFTER THE JOURNEY
   ========================================================================== */
.after { position: relative; z-index: 4; background: var(--bg); }
.after::before {
  content: ''; position: absolute; left: 0; right: 0; top: -40vh; height: 40vh; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--bg));
}

/* reveal on scroll */
.rv { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
.rv.in { opacity: 1; transform: none; }
.rv-mask { clip-path: inset(0 0 100% 0); transition: clip-path 1.3s var(--ease); transition-delay: var(--d, 0s); }
.rv-mask.in { clip-path: inset(0 0 0 0); }
.split-lines .ln { display: block; overflow: hidden; padding-bottom: .16em; margin-bottom: -.1em; }
.split-lines .ln > span { display: block; transform: translateY(140%); transition: transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 80ms + var(--d, 0s)); }
.split-lines.in .ln > span { transform: none; }

/* ---------- Featured project ---------- */
.feature {
  position: relative;
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 0;
  border: 1px solid var(--line); border-radius: 28px; overflow: hidden;
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
}
.feature-media { position: relative; min-height: 560px; overflow: hidden; }
.feature-media video, .feature-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 80%; transform: scale(1.04); transition: transform 1.6s var(--ease); }
.feature:hover .feature-media video, .feature:hover .feature-media img { transform: scale(1.0); }
.feature-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 50%, rgba(11,13,19,.9)), linear-gradient(0deg, rgba(0,0,0,.5), transparent 40%); }
.feature-media .fm-tag { position: absolute; left: 24px; bottom: 24px; z-index: 2; display: flex; gap: 8px; flex-wrap: wrap; }
.feature-body { padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; gap: 26px; justify-content: center; }
.feature-body .h2 { font-size: clamp(36px, 3.6vw, 58px); }
.feature-ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.facts > div { background: var(--bg-2); padding: 14px 16px; }
.facts dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.facts dd { margin: 4px 0 0; font-weight: 600; font-size: 15px; }
@media (max-width: 960px) {
  .feature { grid-template-columns: 1fr; }
  .feature-media { min-height: 360px; }
  .feature-media::after { background: linear-gradient(0deg, rgba(11,13,19,.95), transparent 60%); }
}
@media (max-width: 520px) { .facts { grid-template-columns: 1fr 1fr; } .facts > div:last-child { grid-column: 1 / -1; } }

/* ---------- BAROMETERS ---------- */
.baro { display: grid; gap: 14px; }
.baro-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.baro-raised { font-family: var(--serif); font-size: clamp(34px, 3.2vw, 48px); line-height: 1; letter-spacing: -0.01em; }
.baro-raised small { font-family: var(--sans); font-size: 14px; color: var(--text-3); letter-spacing: 0; margin-left: 6px; }
.baro-pct { font-family: var(--mono); font-size: 14px; color: var(--gold-2); }
.baro-track {
  position: relative; height: 12px; border-radius: 99px;
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  overflow: visible;
}
.baro-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #8a5a17, var(--gold) 60%, var(--gold-2));
  box-shadow: 0 0 18px rgba(242,184,75,.55), 0 0 2px rgba(255,216,138,.9);
  transition: width 2.2s var(--ease);
}
.baro-fill::after {
  content: ''; position: absolute; right: -2px; top: 50%; width: 18px; height: 18px; transform: translate(0, -50%);
  border-radius: 50%; background: radial-gradient(circle, #fff 0%, var(--gold-2) 35%, rgba(242,184,75,0) 70%);
  filter: blur(.5px);
  animation: spark 2.2s ease-in-out infinite;
}
.baro-fill::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: repeating-linear-gradient(110deg, rgba(255,255,255,.0) 0 14px, rgba(255,255,255,.22) 14px 18px);
  background-size: 200% 100%; animation: flow 3s linear infinite; mix-blend-mode: overlay;
}
@keyframes flow { to { background-position: -200% 0; } }
@keyframes spark { 0%,100% { opacity: .9; transform: translate(0,-50%) scale(1); } 50% { opacity: .5; transform: translate(0,-50%) scale(1.35); } }
.baro-ticks { position: absolute; inset: 0; pointer-events: none; }
.baro-ticks i { position: absolute; top: -5px; bottom: -5px; width: 1px; background: rgba(255,255,255,.18); }
.baro-ticks i.hit { background: rgba(255,216,138,.65); }
.baro-meta { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; color: var(--text-3); }
.baro-meta b { color: var(--text); font-weight: 600; }
.baro.complete .baro-fill { background: linear-gradient(90deg, var(--gold-3), var(--gold-2)); }

/* ring */
.ring { position: relative; width: var(--size, 220px); aspect-ratio: 1; display: grid; place-items: center; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ring .r-bg { fill: none; stroke: rgba(255,255,255,.07); }
.ring .r-tick { fill: none; stroke: rgba(255,255,255,.12); }
.ring .r-fg { fill: none; stroke: url(#ringGrad); stroke-linecap: round; transition: stroke-dashoffset 2.4s var(--ease); filter: drop-shadow(0 0 8px rgba(242,184,75,.65)); }
.ring .r-center { position: relative; text-align: center; display: grid; gap: 2px; }
.ring .r-pct { font-family: var(--serif); font-size: calc(var(--size, 220px) * .26); line-height: .9; letter-spacing: -0.02em; }
.ring .r-pct sup { font-size: .38em; vertical-align: top; position: relative; top: .3em; margin-left: 2px; color: var(--gold-2); }
.ring .r-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); }
.ring .r-glow { position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle, rgba(242,184,75,.16), transparent 70%); filter: blur(10px); }
.ring.complete .r-glow { background: radial-gradient(circle, rgba(242,184,75,.4), transparent 70%); animation: breathe 3s ease-in-out infinite; }
.ring .seal-text { position: absolute; inset: 0; animation: spin 26s linear infinite; }
.ring .seal-text text { fill: var(--gold-2); font-family: var(--mono); font-size: 7.2px; letter-spacing: 2.6px; text-transform: uppercase; }
@keyframes spin { to { transform: rotate(360deg); } }

/* units (each dot = one crusade etc.) */
.units { display: grid; gap: 14px; }
.units-grid { display: grid; grid-template-columns: repeat(var(--cols, 12), 1fr); gap: 8px; }
.unit {
  position: relative; aspect-ratio: 1; border-radius: 50%;
  background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
  overflow: hidden;
}
.unit::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff6dc, var(--gold) 45%, #a8701f);
  clip-path: inset(calc((1 - var(--f, 0)) * 100%) 0 0 0);
  transition: clip-path .8s var(--ease); transition-delay: calc(var(--i) * 45ms);
}
.unit.lit { box-shadow: inset 0 0 0 1px rgba(255,216,138,.5), 0 0 14px rgba(242,184,75,.55); }
.units-cap { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--text-2); }
.units-cap b { color: var(--gold-2); font-weight: 600; }
.units:not(.in) .unit::before { clip-path: inset(100% 0 0 0); }

/* ---------- PROJECT CARDS ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: clamp(16px, 2vw, 26px); }
.card {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 22px; overflow: hidden;
  background: var(--bg-2);
  transition: transform .5s var(--ease), border-color .4s, box-shadow .5s;
}
.card:hover { transform: translateY(-6px); border-color: var(--line-2); box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-3); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .6s; }
.card:hover .card-media img { transform: scale(1.05); }
.card-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11,13,19,.85), transparent 55%); }
.card-media .chips { position: absolute; left: 16px; top: 16px; z-index: 2; display: flex; gap: 8px; flex-wrap: wrap; }
.card-media .chips .chip { background: rgba(7,8,12,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.card-body { padding: 22px 22px 24px; display: grid; gap: 16px; flex: 1; align-content: start; }
.card-body .h3 { font-size: clamp(26px, 2.2vw, 32px); }
.card-body p { color: var(--text-2); font-size: 15.5px; }
.card-loc { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.card-foot { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.card.is-complete .card-media img { filter: saturate(.85); }

/* "paid in full" stamp */
.stamp {
  position: absolute; right: 18px; top: 18px; z-index: 3;
  width: 116px; height: 116px; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  color: var(--gold-2);
  border: 1.5px solid rgba(255,216,138,.85);
  box-shadow: inset 0 0 0 5px rgba(7,8,12,.35), inset 0 0 0 6.5px rgba(255,216,138,.55);
  background: radial-gradient(circle, rgba(7,8,12,.55), rgba(7,8,12,.35));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transform: rotate(-12deg);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; line-height: 1.35;
}
.stamp b { display: block; font-family: var(--serif); font-size: 21px; letter-spacing: 0; text-transform: none; font-style: italic; color: #fff3d6; margin: 2px 0; }
.stamp.big { width: 168px; height: 168px; font-size: 11px; }
.stamp.big b { font-size: 30px; }

/* ---------- PROMISE (paper) ---------- */
.paper {
  position: relative; color: var(--ink); background: var(--paper);
  background-image:
    radial-gradient(120% 70% at 10% 0%, rgba(255,255,255,.7), transparent 60%),
    repeating-linear-gradient(0deg, rgba(23,20,15,.035) 0 1px, transparent 1px 34px);
}
.paper .eyebrow { color: var(--ink-3); }
.paper em, .paper .em { color: #8c5a14; }
.paper .lede { color: var(--ink-2); }
.paper .muted { color: var(--ink-3); }
.paper .rule { background: rgba(23,20,15,.14); }
.promise-list { border-top: 1px solid rgba(23,20,15,.18); }
.promise {
  display: grid; grid-template-columns: 90px 1.1fr 1.4fr; gap: 24px; align-items: baseline;
  padding: clamp(22px, 3vw, 34px) 0; border-bottom: 1px solid rgba(23,20,15,.18);
}
.promise .pn { font-family: var(--mono); font-size: 13px; color: #8c5a14; letter-spacing: .1em; }
.promise h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.05; letter-spacing: -0.01em; }
.promise p { color: var(--ink-2); font-size: 16.5px; max-width: 52ch; }
@media (max-width: 760px) { .promise { grid-template-columns: 1fr; gap: 10px; } }

.big-claim { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 4vw, 60px); align-items: center; padding: clamp(28px, 4vw, 48px); border-radius: 26px; background: var(--ink); color: var(--paper); }
.big-claim .num { font-family: var(--serif); font-size: clamp(90px, 13vw, 200px); line-height: .8; letter-spacing: -0.04em; color: var(--gold-2); }
.big-claim .num sup { font-size: .4em; vertical-align: top; position: relative; top: .25em; }
.big-claim p { color: rgba(242,235,221,.8); font-size: 17px; max-width: 54ch; }
.big-claim h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3vw, 44px); line-height: 1.05; color: var(--paper); margin-bottom: 12px; }
@media (max-width: 700px) { .big-claim { grid-template-columns: 1fr; } }

/* ---------- FILM BANNER ---------- */
.film {
  position: relative; border-radius: 28px; overflow: hidden; min-height: min(78vh, 760px);
  display: flex; align-items: flex-end; isolation: isolate; cursor: pointer;
  border: 1px solid var(--line);
}
.film video, .film img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 2s var(--ease); }
.film:hover video { transform: scale(1.03); }
.film::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(7,8,12,.92) 0%, rgba(7,8,12,.15) 55%, rgba(7,8,12,.35) 100%); }
.film-body { padding: clamp(24px, 4vw, 56px); display: grid; gap: 18px; width: 100%; }
.film-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.play-btn {
  width: 92px; height: 92px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform .5s var(--ease), background .3s;
}
.play-btn svg { width: 28px; height: 28px; margin-left: 4px; }
.film:hover .play-btn { transform: scale(1.08); background: var(--gold); color: var(--ink); border-color: var(--gold); }
.film blockquote { font-family: var(--serif); font-style: italic; font-size: clamp(26px, 3.4vw, 52px); line-height: 1.08; max-width: 22ch; }

/* ---------- FOUNDERS ---------- */
.founders { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); }
.founder-card {
  position: relative; display: block; border-radius: 24px; overflow: hidden;
  background: radial-gradient(90% 70% at 50% 100%, rgba(242,184,75,.22), transparent 70%), linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--line);
  aspect-ratio: 3 / 4;
  transition: transform .6s var(--ease), border-color .4s;
}
.founder-card:hover { transform: translateY(-6px); border-color: rgba(242,184,75,.35); }
.founder-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transition: transform 1.2s var(--ease), filter .6s; filter: saturate(.9) contrast(1.02); }
.founder-card:hover img { transform: scale(1.04); filter: none; }
.founder-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,8,12,.95) 0%, rgba(7,8,12,0) 45%); }
.founder-card .fc-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 22px; display: grid; gap: 6px; }
.founder-card .fc-name { font-family: var(--serif); font-size: clamp(28px, 2.6vw, 38px); line-height: 1; }
.founder-card .fc-role { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-2); }
.founder-card .fc-short { font-size: 14.5px; color: var(--text-2); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s var(--ease), opacity .5s; }
.founder-card:hover .fc-short, .founder-card:focus-visible .fc-short { max-height: 120px; opacity: 1; }
.founder-card .pending { position: absolute; top: 16px; left: 16px; z-index: 2; }
@media (max-width: 900px) { .founders { grid-template-columns: 1fr; } .founder-card { aspect-ratio: 4 / 4.2; } .founder-card .fc-short { max-height: 120px; opacity: 1; } }

/* ---------- INVITE / SHARE ---------- */
.invite {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(90px, 14vw, 200px) 0;
  background: radial-gradient(60% 60% at 50% 40%, rgba(242,184,75,.16), transparent 70%), var(--bg);
}
.invite .display { max-width: 15ch; margin: 0 auto; }
.invite .lede { margin: 24px auto 0; text-align: center; }
.invite-ctas { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.invite-orbit { position: absolute; inset: 0; pointer-events: none; opacity: .5; }

/* ---------- FOOTER ---------- */
.footer { position: relative; z-index: 4; background: #050608; border-top: 1px solid var(--line); padding: clamp(60px, 8vw, 100px) 0 36px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: 40px; }
.footer h4 { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); margin-bottom: 18px; }
.footer ul { display: grid; gap: 10px; }
.footer a:hover { color: var(--gold-2); }
.footer .verse { font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.25; color: var(--text-2); margin-top: 22px; max-width: 26ch; }
.footer .verse cite { display: block; margin-top: 8px; font-family: var(--mono); font-style: normal; font-size: 11px; letter-spacing: .16em; color: var(--text-3); }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 70px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-3); }
.footer-word { font-family: var(--serif); font-size: clamp(60px, 13vw, 210px); line-height: .8; letter-spacing: -0.04em; color: rgba(255,255,255,.04); margin-top: 50px; white-space: nowrap; overflow: hidden; user-select: none; }
@media (max-width: 960px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }

/* forms */
.field { display: grid; gap: 8px; }
.field label { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.input {
  width: 100%; height: 52px; padding: 0 18px; border-radius: 14px;
  background: rgba(255,255,255,.04); border: 1px solid var(--line-2); color: var(--text);
  transition: border-color .25s, background .25s, box-shadow .25s;
}
textarea.input { height: auto; min-height: 140px; padding: 14px 18px; resize: vertical; }
.input:focus { outline: none; border-color: var(--gold); background: rgba(255,255,255,.06); box-shadow: 0 0 0 4px rgba(242,184,75,.14); }
.inline-form { display: flex; gap: 8px; }
.inline-form .input { border-radius: 999px; }
.form-note { font-size: 13px; color: var(--text-3); }
.form-ok { color: var(--ok); font-size: 14px; }
.hp { position: absolute; left: -9999px; }

/* ==========================================================================
   MODALS / SHEETS / LIGHTBOX
   ========================================================================== */
.modal {
  position: fixed; inset: 0; z-index: 150;
  display: grid; place-items: center; padding: 20px;
  opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s;
}
.modal.open { opacity: 1; visibility: visible; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(3,4,6,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.modal-panel {
  position: relative; width: min(640px, 100%); max-height: calc(100svh - 40px); overflow: auto;
  border-radius: 26px; background: linear-gradient(180deg, var(--bg-4), var(--bg-2));
  border: 1px solid var(--line-2);
  box-shadow: 0 40px 120px -20px rgba(0,0,0,.9);
  padding: clamp(22px, 3.4vw, 36px);
  transform: translateY(24px) scale(.98); transition: transform .5s var(--ease);
}
.modal.open .modal-panel { transform: none; }
.modal-panel.wide { width: min(980px, 100%); }
.modal-close { position: absolute; right: 16px; top: 16px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); z-index: 2; }
.modal-close:hover { background: rgba(255,255,255,.1); }
.modal-close svg { width: 16px; height: 16px; }
.give-list { display: grid; gap: 10px; margin-top: 22px; }
.give-opt {
  display: grid; grid-template-columns: 72px 1fr auto; gap: 16px; align-items: center;
  width: 100%; text-align: left; padding: 12px; border-radius: 18px;
  border: 1px solid var(--line); background: rgba(255,255,255,.02);
  transition: border-color .25s, background .25s, transform .3s var(--ease);
}
.give-opt:hover { border-color: rgba(242,184,75,.55); background: rgba(242,184,75,.06); transform: translateY(-2px); }
.give-opt img { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; }
.give-opt .go-title { font-weight: 600; }
.give-opt .go-sub { font-size: 13.5px; color: var(--text-3); }
.give-opt .mini-track { margin-top: 8px; height: 4px; border-radius: 9px; background: rgba(255,255,255,.08); overflow: hidden; }
.give-opt .mini-track i { display: block; height: 100%; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.give-opt .arrow { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); }
.give-opt .arrow svg { width: 16px; height: 16px; }
.give-general { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border-radius: 18px; border: 1px dashed var(--line-2); margin-top: 10px; }
.give-note { margin-top: 18px; font-size: 13px; color: var(--text-3); display: flex; gap: 10px; align-items: flex-start; }
.give-note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--ok); }

.share-row { display: flex; gap: 8px; flex-wrap: wrap; }
.share-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--line-2); font-size: 14px; font-weight: 500; transition: background .25s, border-color .25s;
}
.share-btn:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.35); }
.share-btn svg { width: 16px; height: 16px; }
.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 300; transform: translate(-50%, 20px);
  padding: 12px 20px; border-radius: 999px; background: var(--paper); color: var(--ink); font-weight: 600; font-size: 14px;
  opacity: 0; transition: opacity .3s, transform .4s var(--ease); pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* share card builder */
.card-builder { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: start; }
.card-builder canvas { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.8); background: var(--bg-3); }
@media (max-width: 760px) { .card-builder { grid-template-columns: 1fr; } .card-builder canvas { max-width: 300px; margin: 0 auto; } }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 160; display: grid; grid-template-rows: auto 1fr auto; background: rgba(3,4,6,.96); opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
.lightbox.open { opacity: 1; visibility: visible; }
.lb-top { display: flex; align-items: center; justify-content: space-between; padding: 16px var(--gutter); font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--text-3); }
.lb-stage { position: relative; display: grid; place-items: center; padding: 0 clamp(8px, 6vw, 90px); min-height: 0; }
.lb-stage img, .lb-stage video { max-width: 100%; max-height: calc(100svh - 170px); border-radius: 12px; object-fit: contain; box-shadow: 0 30px 80px rgba(0,0,0,.8); }
.lb-stage img.receipt { background: #fff; }
.lb-cap { padding: 16px var(--gutter) 22px; display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; align-items: baseline; }
.lb-cap .c1 { font-family: var(--serif); font-size: clamp(20px, 2vw, 28px); }
.lb-cap .c2 { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); background: rgba(0,0,0,.4); }
.lb-nav:hover { background: rgba(255,255,255,.1); }
.lb-nav svg { width: 18px; height: 18px; }
.lb-prev { left: clamp(8px, 2vw, 24px); } .lb-next { right: clamp(8px, 2vw, 24px); }
@media (max-width: 640px) { .lb-nav { display: none; } }

/* ==========================================================================
   PAGE HEROES (inner pages)
   ========================================================================== */
.page-hero { position: relative; min-height: 78svh; display: flex; align-items: flex-end; overflow: hidden; padding: calc(var(--nav-h) + 60px) 0 clamp(48px, 7vw, 90px); isolation: isolate; }
.page-hero .ph-media { position: absolute; inset: 0; z-index: -2; }
.page-hero .ph-media img, .page-hero .ph-media video { width: 100%; height: 100%; object-fit: cover; animation: kenburns 24s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1.06); } to { transform: scale(1.16) translate(-1.5%, -1%); } }
.page-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--bg) 0%, rgba(7,8,12,.55) 45%, rgba(7,8,12,.35) 100%); }
.page-hero.short { min-height: 56svh; }
.page-hero .h1, .page-hero .display { max-width: 16ch; }
.page-hero .lede { margin-top: 22px; }

/* ==========================================================================
   PROJECT DETAIL
   ========================================================================== */
.pj-hero { min-height: 92svh; }
.pj-hero .wrap { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; }
.pj-hero .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
@media (max-width: 900px) { .pj-hero .wrap { grid-template-columns: 1fr; } .pj-hero .ring { --size: 170px !important; } }
.pj-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(28px, 4vw, 70px); align-items: start; }
.pj-aside { position: sticky; top: calc(var(--nav-h) + 20px); display: grid; gap: 16px; }
.panel { border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(180deg, var(--bg-3), var(--bg-2)); padding: 24px; }
.panel h3 { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); font-weight: 500; margin-bottom: 14px; }
@media (max-width: 1060px) { .pj-layout { grid-template-columns: 1fr; } .pj-aside { position: relative; top: 0; } }
.pj-section { padding: clamp(50px, 7vw, 90px) 0; border-top: 1px solid var(--line); }
.pj-section:first-child { border-top: 0; padding-top: 0; }
.pj-story p { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.65; color: var(--text-2); }
.pj-story p:first-child::first-letter { font-family: var(--serif); float: left; font-size: 4.2em; line-height: .82; padding: 6px 12px 0 0; color: var(--gold-2); }
.checks { display: grid; gap: 12px; }
.checks li { display: flex; gap: 14px; align-items: flex-start; font-size: 16.5px; }
.checks svg { width: 22px; height: 22px; flex: none; color: var(--gold); margin-top: 2px; }

.calc { display: grid; gap: 18px; }
.calc-amounts { display: flex; flex-wrap: wrap; gap: 8px; }
.calc-amounts button { height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-2); font-weight: 600; font-variant-numeric: tabular-nums; transition: all .25s; }
.calc-amounts button[aria-pressed='true'] { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.calc input[type='range'] { width: 100%; accent-color: var(--gold); }
.calc-out { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
.calc-out > div { background: var(--bg-2); padding: 18px; }
.calc-out .v { font-family: var(--serif); font-size: clamp(30px, 3vw, 44px); line-height: 1; color: var(--gold-2); }
.calc-out .k { margin-top: 8px; font-size: 13.5px; color: var(--text-3); }
@media (max-width: 600px) { .calc-out { grid-template-columns: 1fr; } }

/* ledger (paper) */
.ledger { border-radius: 22px; padding: clamp(20px, 3vw, 36px); }
.ledger-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ledger-table th { text-align: left; font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); padding: 0 0 12px; border-bottom: 1.5px solid var(--ink); }
.ledger-table td { padding: 14px 0; border-bottom: 1px dashed rgba(23,20,15,.25); vertical-align: middle; }
.ledger-table td.num, .ledger-table th.num { text-align: right; font-family: var(--mono); font-size: 14.5px; }
.ledger-table tr.total td { border-bottom: 0; border-top: 1.5px solid var(--ink); font-weight: 700; padding-top: 16px; }
.ledger-table .bar { height: 6px; border-radius: 9px; background: rgba(23,20,15,.1); margin-top: 8px; max-width: 260px; overflow: hidden; }
.ledger-table .bar i { display: block; height: 100%; background: #8c5a14; transform-origin: left; transform: scaleX(0); transition: transform 1.6s var(--ease); }
.ledger.in .ledger-table .bar i { transform: scaleX(var(--w)); }
.receipt-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: #8c5a14; border-bottom: 1px solid rgba(140,90,20,.35); }
.receipt-link:hover { border-color: #8c5a14; }
.receipt-link svg { width: 14px; height: 14px; }
.paper .chip.sample { color: var(--ink-3); border-color: rgba(23,20,15,.3); }
.ledger-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.ledger-sum > div { padding: 16px; border-radius: 14px; background: rgba(23,20,15,.05); }
.ledger-sum .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.ledger-sum .v { font-family: var(--serif); font-size: 32px; line-height: 1.1; margin-top: 4px; }
@media (max-width: 640px) {
  .ledger-sum { grid-template-columns: 1fr; }
  .ledger-table.receipts thead { display: none; }
  .ledger-table.receipts tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px dashed rgba(23,20,15,.25); }
  .ledger-table.receipts td { border: 0; padding: 0; }
  .ledger-table.receipts td.date { grid-column: 1 / -1; font-size: 12px; color: var(--ink-3); }
}

/* timeline */
.timeline { position: relative; display: grid; gap: 34px; padding-left: 30px; }
.timeline::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 1px; background: linear-gradient(var(--gold), var(--line)); }
.tl-item { position: relative; display: grid; gap: 12px; }
.tl-item::before { content: ''; position: absolute; left: -29px; top: 7px; width: 11px; height: 11px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(242,184,75,.15), 0 0 14px var(--gold); }
.tl-date { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2); }
.tl-item h4 { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2vw, 30px); line-height: 1.1; }
.tl-item p { color: var(--text-2); }
.tl-media { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; }
.tl-media button { aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; }
.tl-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.tl-media button:hover img { transform: scale(1.06); }

/* masonry gallery */
.masonry { columns: 3 260px; column-gap: 12px; }
.masonry .m-item { break-inside: avoid; margin-bottom: 12px; position: relative; display: block; width: 100%; border-radius: 14px; overflow: hidden; background: var(--bg-3); }
.masonry .m-item img { width: 100%; height: auto; transition: transform 1s var(--ease), filter .5s; }
.masonry .m-item:hover img { transform: scale(1.04); }
.m-item .m-badge { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 99px; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-family: var(--mono); font-size: 11px; }
.m-item .m-badge svg { width: 12px; height: 12px; }

.partner-card { display: grid; grid-template-columns: 1fr 1.2fr; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); }
.partner-card img { width: 100%; height: 100%; object-fit: cover; min-height: 280px; }
.partner-card .pc-body { padding: clamp(22px, 3vw, 36px); display: grid; gap: 14px; align-content: center; }
@media (max-width: 760px) { .partner-card { grid-template-columns: 1fr; } }

.thanks-letter { position: relative; padding: clamp(28px, 5vw, 64px); border-radius: 26px; }
.thanks-letter p.big { font-family: var(--serif); font-size: clamp(30px, 3.6vw, 56px); line-height: 1.08; letter-spacing: -0.01em; max-width: 24ch; }

.give-bar {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 70;
  display: none; align-items: center; gap: 12px; padding: 10px 10px 10px 18px;
  border-radius: 999px; background: rgba(17,20,28,.86); border: 1px solid var(--line-2);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transform: translateY(140%); transition: transform .5s var(--ease);
}
.give-bar.show { transform: none; }
.give-bar .gb-info { flex: 1; min-width: 0; font-size: 13px; }
.give-bar .gb-info b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.give-bar .gb-track { height: 4px; border-radius: 9px; background: rgba(255,255,255,.1); margin-top: 6px; overflow: hidden; }
.give-bar .gb-track i { display: block; height: 100%; background: var(--gold); }
@media (max-width: 1060px) { .give-bar { display: flex; } }

/* ==========================================================================
   PROJECTS INDEX
   ========================================================================== */
.tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.02); }
.tabs button { height: 40px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--text-2); transition: background .25s, color .25s; }
.tabs button[aria-selected='true'] { background: var(--text); color: var(--ink); }
.totals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.totals > div { background: var(--bg-2); padding: 22px; }
.totals .v { font-family: var(--serif); font-size: clamp(34px, 3.4vw, 52px); line-height: 1; }
.totals .k { margin-top: 8px; font-size: 13.5px; color: var(--text-3); }
@media (max-width: 760px) { .totals { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   ABOUT + FOUNDER
   ========================================================================== */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; counter-reset: s; }
.steps > div { background: var(--bg-2); padding: clamp(20px, 2.4vw, 30px); display: grid; gap: 12px; align-content: start; min-height: 240px; }
.steps .sn { font-family: var(--mono); font-size: 12px; color: var(--gold-2); letter-spacing: .12em; }
.steps h3 { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.05; }
.steps p { color: var(--text-2); font-size: 15.5px; }
@media (max-width: 960px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

.quote-block { font-family: var(--serif); font-size: clamp(30px, 4vw, 60px); line-height: 1.06; letter-spacing: -0.015em; max-width: 22ch; }
.quote-block cite { display: block; margin-top: 18px; font-family: var(--mono); font-style: normal; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }

.fd-hero { position: relative; min-height: 100svh; display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: clamp(28px, 5vw, 80px); padding: calc(var(--nav-h) + 40px) var(--gutter) clamp(50px, 8vh, 100px); overflow: hidden; max-width: var(--maxw); margin: 0 auto; }
.fd-hero .fd-portrait { position: relative; aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: 0 50px 120px -40px rgba(0,0,0,.9), 0 0 0 10px rgba(255,255,255,.02); }
.fd-hero .fd-portrait::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,8,12,.35), transparent 40%); pointer-events: none; }
.fd-hero .fd-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transform: scale(1.08); transition: transform 2.4s var(--ease); }
.fd-hero .fd-portrait.in img { transform: scale(1); }
.fd-hero .fd-glow { position: absolute; right: -10%; top: 10%; width: 60vw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(242,184,75,.16), transparent 65%); pointer-events: none; z-index: -1; }
.fd-hero .fd-name { font-family: var(--serif); font-size: clamp(64px, 9vw, 150px); line-height: .86; letter-spacing: -0.035em; }
.fd-hero .fd-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
@media (max-width: 900px) {
  .fd-hero { grid-template-columns: 1fr; padding-top: calc(var(--nav-h) + 16px); }
  .fd-hero .fd-portrait { order: -1; max-height: 70svh; }
}
.fd-bio p { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.6; color: var(--text-2); }
.fd-bio p + p { margin-top: 1.1em; }
.fd-bio p:first-child { font-family: var(--serif); font-size: clamp(28px, 2.6vw, 40px); line-height: 1.2; color: var(--text); }
.field-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 30%); gap: 12px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.field-strip button { scroll-snap-align: start; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; }
.field-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.field-strip button:hover img { transform: scale(1.05); }

/* ==========================================================================
   MOMENTS (infinite canvas gallery)
   ========================================================================== */
.moments-page { overflow: hidden; height: 100svh; }
.mo-canvas { position: fixed; inset: 0; overflow: hidden; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.mo-canvas.dragging { cursor: grabbing; }
.mo-tile {
  position: absolute; left: 0; top: 0; border-radius: 14px; overflow: hidden; background: var(--bg-3);
  will-change: transform; contain: layout paint;
}
.mo-tile img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: transform .8s var(--ease), filter .5s; filter: brightness(.86) saturate(.95); }
.mo-tile:hover img, .mo-tile:focus-visible img { transform: scale(1.06); filter: none; }
.mo-tile .mo-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px; font-size: 13px; line-height: 1.3;
  background: linear-gradient(0deg, rgba(0,0,0,.8), transparent); opacity: 0; transform: translateY(8px); transition: .4s var(--ease);
}
.mo-tile:hover .mo-cap, .mo-tile:focus-visible .mo-cap { opacity: 1; transform: none; }
.mo-tile .mo-play { position: absolute; right: 10px; top: 10px; height: 26px; padding: 0 9px; border-radius: 99px; display: inline-flex; align-items: center; gap: 5px; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-family: var(--mono); font-size: 10.5px; }
.mo-tile .mo-play svg { width: 10px; height: 10px; }
.mo-ui { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 0 var(--gutter) 22px; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; pointer-events: none; }
.mo-ui > * { pointer-events: auto; }
.mo-title { font-family: var(--serif); font-size: clamp(44px, 7vw, 110px); line-height: .9; letter-spacing: -0.03em; text-shadow: 0 6px 40px rgba(0,0,0,.8); }
.mo-filters { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 640px; }
.mo-filters button { height: 36px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600; background: rgba(12,14,20,.75); border: 1px solid var(--line-2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: .25s; }
.mo-filters button[aria-pressed='true'] { background: var(--text); color: var(--ink); border-color: var(--text); }
.mo-hint { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 15; pointer-events: none; display: grid; justify-items: center; gap: 10px; padding: 18px 24px; border-radius: 20px; background: rgba(7,8,12,.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; transition: opacity .6s; }
.mo-hint.off { opacity: 0; }
.mo-hint svg { width: 34px; height: 34px; }
.mo-edge { position: fixed; inset: 0; pointer-events: none; z-index: 10; background: linear-gradient(180deg, rgba(7,8,12,.85) 0, transparent 140px), linear-gradient(0deg, rgba(7,8,12,.9) 0, transparent 220px), radial-gradient(120% 90% at 50% 50%, transparent 60%, rgba(7,8,12,.85) 100%); }
.mo-film-btn { position: fixed; right: var(--gutter); top: calc(var(--nav-h) + 14px); z-index: 20; }
@media (max-width: 760px) {
  .mo-ui { flex-direction: column; align-items: flex-start; }
  .mo-filters { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; width: 100%; padding-bottom: 4px; }
  .mo-filters button { flex: none; }
}

/* custom cursor (desktop only) */
.cursor { position: fixed; left: 0; top: 0; z-index: 400; pointer-events: none; width: 0; height: 0; mix-blend-mode: normal; }
.cursor .c-ring { position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.55); transition: width .35s var(--ease), height .35s var(--ease), left .35s var(--ease), top .35s var(--ease), background .3s, border-color .3s; display: grid; place-items: center; }
.cursor .c-label { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); opacity: 0; transition: opacity .2s; }
.cursor.has-label .c-ring { width: 86px; height: 86px; left: -43px; top: -43px; background: var(--gold); border-color: var(--gold); }
.cursor.has-label .c-label { opacity: 1; }
.cursor.hover .c-ring { width: 54px; height: 54px; left: -27px; top: -27px; border-color: var(--gold-2); }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .rv, .rv-mask, .split-lines .ln > span { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .grain { display: none; }
}

/* avatars (home: who's behind it) */
.avatars { display: flex; justify-content: center; gap: clamp(10px, 2vw, 22px); }
.avatar { display: grid; justify-items: center; gap: 10px; font-size: 13px; color: var(--text-2); }
.avatar img { width: clamp(76px, 9vw, 120px); aspect-ratio: 1; object-fit: cover; object-position: 50% 20%; border-radius: 50%; border: 1px solid var(--line-2); box-shadow: 0 0 0 6px rgba(255,255,255,.02); transition: transform .5s var(--ease), box-shadow .4s; }
.avatar:hover img { transform: translateY(-4px); box-shadow: 0 0 0 6px rgba(242,184,75,.18); }
@media (max-width: 860px) {
  #people-panel { grid-template-columns: 1fr !important; }
  .avatars { justify-content: center; }
  .fb-gauges { grid-template-columns: 1fr !important; justify-items: start; }
}
.ledger-table th.num, .ledger-table td.num { padding-left: 18px; white-space: nowrap; }
.moments-page .footer { display: none; }
.act:not(.act-open):not(.center)::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background: linear-gradient(0deg, rgba(5,6,10,.82) 0%, rgba(5,6,10,.45) 50%, transparent); opacity: 0; transition: opacity .9s var(--ease); pointer-events: none; }
.act.on:not(.act-open):not(.center)::before { opacity: 1; }
.act:not(.act-open):not(.center) .act-inner { position: relative; }
@media (max-width: 600px) {
  .act .act-place { display: none; }
  .act .act-meta { gap: 10px; }
  .act-open .eyebrow { font-size: 10.5px; letter-spacing: .14em; }
}

/* voice sampler */
.voice-card .vplay { position: relative; width: 56px; height: 56px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--ink); transition: transform .3s var(--ease); }
.voice-card .vplay:hover { transform: scale(1.06); }
.voice-card .vplay > svg:first-child { width: 20px; height: 20px; margin-left: 3px; }
.voice-card .vring { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); transform: rotate(-90deg); }
.voice-card .vring circle { fill: none; stroke: var(--gold-2); stroke-width: 1.5; stroke-dasharray: 125.7; stroke-dashoffset: calc(125.7 * (1 - var(--vp, 0))); opacity: .9; }
.voice-card .vbars { display: flex; gap: 3px; align-items: flex-end; height: 26px; opacity: .25; transition: opacity .3s; }
.voice-card .vbars i { width: 3px; height: 30%; border-radius: 2px; background: var(--gold-2); }
.voice-card.is-playing .vbars { opacity: 1; }
.voice-card.is-playing .vbars i { animation: vbar .9s ease-in-out infinite; }
.voice-card.is-playing .vbars i:nth-child(2) { animation-delay: -.2s; } .voice-card.is-playing .vbars i:nth-child(3) { animation-delay: -.45s; }
.voice-card.is-playing .vbars i:nth-child(4) { animation-delay: -.1s; } .voice-card.is-playing .vbars i:nth-child(5) { animation-delay: -.6s; }
@keyframes vbar { 0%,100% { height: 25%; } 50% { height: 100%; } }
.voice-card.is-chosen { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 20px 60px -30px rgba(242,184,75,.6); }
.voice-card.is-chosen .vchoose { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.voice-card .vchoose { justify-self: start; }

/* ---------- entry gate ---------- */
.pl-gate { display: grid; justify-items: center; gap: 14px; margin-top: 6px; opacity: 0; transform: translateY(10px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.pl-gate.in { opacity: 1; transform: none; }
.pl-gate .pl-note { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.pl-gate .pl-silent { font-size: 14px; color: var(--text-2); border-bottom: 1px solid var(--line-2); padding: 2px 0; margin-top: 6px; }
.pl-gate .pl-silent:hover { color: var(--text); border-color: var(--text-2); }

/* ---------- sound toggle (always available) ---------- */
.sound-toggle {
  position: fixed; left: var(--gutter); bottom: 22px; z-index: 95;
  display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 16px 0 14px; border-radius: 999px;
  background: rgba(12,14,20,.72); border: 1px solid var(--line-2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-size: 13px; font-weight: 600; color: var(--text-2); transition: border-color .3s, color .3s, background .3s;
}
.sound-toggle:hover { border-color: rgba(255,255,255,.4); color: var(--text); }
.sound-toggle.on { color: var(--text); border-color: rgba(242,184,75,.45); }
.st-bars { display: inline-flex; align-items: flex-end; gap: 2.5px; height: 14px; }
.st-bars i { width: 2.5px; height: 25%; border-radius: 2px; background: currentColor; opacity: .7; }
.sound-toggle.on .st-bars i { background: var(--gold-2); opacity: 1; animation: vbar 1.1s ease-in-out infinite; }
.sound-toggle.on .st-bars i:nth-child(2) { animation-delay: -.3s; } .sound-toggle.on .st-bars i:nth-child(3) { animation-delay: -.6s; } .sound-toggle.on .st-bars i:nth-child(4) { animation-delay: -.15s; }
.sound-toggle:not(.on) .st-bars { position: relative; }
.sound-toggle:not(.on) .st-bars::after { content: ''; position: absolute; left: -3px; right: -3px; top: 50%; height: 1.5px; background: currentColor; transform: rotate(-35deg); }


/* ---------- guided tour pill ---------- */
.tour-pill {
  position: fixed; left: 50%; bottom: 22px; z-index: 94; transform: translate(-50%, 140%);
  display: inline-flex; align-items: center; gap: 12px; height: 42px; padding: 0 6px 0 16px; border-radius: 999px;
  background: rgba(12,14,20,.78); border: 1px solid var(--line-2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-size: 13px; color: var(--text-2); transition: transform .6s var(--ease), opacity .4s; opacity: 0; white-space: nowrap;
}
.tour-pill[data-state='running'], .tour-pill[data-state='paused'] { transform: translate(-50%, 0); opacity: 1; }
.tour-pill .tp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); animation: pulse 1.6s infinite; }
.tour-pill[data-state='paused'] .tp-dot { animation: none; opacity: .5; }
.tour-pill .tp-btn { height: 32px; padding: 0 14px; border-radius: 999px; background: var(--text); color: var(--ink); font-weight: 600; font-size: 13px; }
@media (max-width: 600px) { .tour-pill .tp-text { display: none; } .tour-pill { padding-left: 12px; } }

/* journey tools sit top-right so the bottom is free for sound + guide */
.journey-tools { bottom: auto; top: calc(var(--nav-h) + 10px); }
.progress-ring { display: none; }

/* ---------- words lead: bigger, brighter, karaoke as the narrator speaks ---------- */
.act p.act-sub { color: #f1ebdf; font-size: clamp(18px, 1.6vw, 23px); line-height: 1.5; max-width: 40ch; text-shadow: 0 2px 24px rgba(0,0,0,.85); }
.act .w > span { transition-property: transform, opacity, color, text-shadow; }
.act .sw { transition: opacity .35s, color .35s, text-shadow .35s; }
.act.speaking .w > span { opacity: .34; }
.act.speaking .w.lit > span { opacity: 1; }
.act.speaking .w.now > span { color: #fff6df; text-shadow: 0 0 30px rgba(242,184,75,.55); }
.act.speaking .sw { opacity: .4; }
.act.speaking .sw.lit { opacity: 1; }
.act.speaking .sw.now { color: var(--gold-2); text-shadow: 0 0 20px rgba(242,184,75,.6); }

/* ---------- "Ask us" voice guide ---------- */
.guide-orb {
  position: fixed; right: var(--gutter); bottom: 20px; z-index: 96;
  display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px 0 6px; border-radius: 999px;
  background: rgba(12,14,20,.8); border: 1px solid rgba(242,184,75,.45); color: var(--text); font-weight: 600; font-size: 14px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 40px -12px rgba(242,184,75,.45);
  transition: transform .4s var(--ease), border-color .3s, opacity .3s;
}
.guide-orb:hover { transform: translateY(-2px); border-color: var(--gold); }
.guide-orb .go-core { position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--ink);
  background: radial-gradient(circle at 35% 30%, #fff3d0, var(--gold) 55%, #a8701f); }
.guide-orb .go-core svg { width: 18px; height: 18px; }
.guide-orb .go-glow { position: absolute; left: 6px; top: 6px; width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 0 rgba(242,184,75,.55); animation: orbPulse 2.6s infinite; }
@keyframes orbPulse { 0% { box-shadow: 0 0 0 0 rgba(242,184,75,.5); } 70% { box-shadow: 0 0 0 16px rgba(242,184,75,0); } 100% { box-shadow: 0 0 0 0 rgba(242,184,75,0); } }
.guide-open .guide-orb { opacity: 0; pointer-events: none; }
@media (max-width: 600px) { .guide-orb .go-label { display: none; } .guide-orb { padding: 0 6px; } }
@media (max-width: 1060px) { .give-bar.show ~ .guide-orb, body:has(.give-bar.show) .guide-orb { bottom: 84px; } }

.guide {
  position: fixed; right: var(--gutter); bottom: 20px; z-index: 97;
  width: min(420px, calc(100vw - 2 * var(--gutter))); max-height: min(640px, calc(100svh - 110px));
  display: grid; grid-template-rows: auto 1fr auto auto auto;
  border-radius: 24px; background: linear-gradient(180deg, rgba(24,28,39,.96), rgba(11,13,19,.97));
  border: 1px solid var(--line-2); box-shadow: 0 40px 120px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(242,184,75,.08);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  opacity: 0; visibility: hidden; transform: translateY(16px) scale(.98); transform-origin: bottom right;
  transition: opacity .35s var(--ease), transform .45s var(--ease), visibility .35s;
}
.guide.open { opacity: 1; visibility: visible; transform: none; }
.g-head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 12px; border-bottom: 1px solid var(--line); }
.g-head b { display: block; font-size: 15px; }
.g-head span { font-size: 12.5px; color: var(--text-3); }
.g-head > div { flex: 1; min-width: 0; }
.g-close { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); }
.g-close svg { width: 14px; height: 14px; }
.g-avatar { width: 42px; height: 42px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; gap: 2.5px;
  background: radial-gradient(circle at 35% 30%, #fff3d0, var(--gold) 55%, #a8701f); }
.g-avatar i { width: 3px; height: 6px; border-radius: 2px; background: var(--ink); opacity: .8; transition: height .2s; }
.guide.speaking .g-avatar i { animation: vbar .8s ease-in-out infinite; }
.guide.speaking .g-avatar i:nth-child(2) { animation-delay: -.2s; } .guide.speaking .g-avatar i:nth-child(3) { animation-delay: -.45s; }
.guide.speaking .g-avatar i:nth-child(4) { animation-delay: -.1s; } .guide.speaking .g-avatar i:nth-child(5) { animation-delay: -.6s; }
.g-log { overflow-y: auto; padding: 16px; display: grid; gap: 12px; align-content: start; overscroll-behavior: contain; }
.g-msg { max-width: 88%; padding: 12px 14px; border-radius: 16px; font-size: 15px; line-height: 1.5; }
.g-msg.bot { background: rgba(255,255,255,.05); border: 1px solid var(--line); border-top-left-radius: 6px; }
.g-msg.me { justify-self: end; background: var(--gold); color: var(--ink); border-top-right-radius: 6px; font-weight: 500; }
.g-msg.bot p span { opacity: .25; transition: opacity .25s; }
.g-msg.bot p span.on { opacity: 1; }
.g-msg.typing p { animation: pulse 1.2s infinite; }
.g-act { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--text); color: var(--ink); font-size: 13px; font-weight: 600; }
.g-act svg { width: 14px; height: 14px; }
.g-chips { display: flex; gap: 6px; overflow-x: auto; padding: 0 16px 10px; scrollbar-width: none; }
.g-chips button { flex: none; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 12.5px; color: var(--text-2); }
.g-chips button:hover { border-color: var(--gold); color: var(--text); }
.g-input { display: flex; gap: 8px; padding: 12px 12px 8px; border-top: 1px solid var(--line); }
.g-input input { flex: 1; min-width: 0; height: 46px; padding: 0 16px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--line-2); }
.g-input input:focus { outline: none; border-color: var(--gold); }
.g-mic, .g-send { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); }
.g-mic svg, .g-send svg { width: 18px; height: 18px; }
.g-send { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.guide.listening .g-mic { background: #e5484d; border-color: #e5484d; color: #fff; animation: orbPulse 1.4s infinite; }
.g-note { padding: 0 16px 14px; font-size: 11.5px; color: var(--text-3); }
@media (max-width: 600px) { .guide { right: 8px; left: 8px; width: auto; bottom: 8px; max-height: calc(100svh - 90px); } }
/* keep the sound toggle clear of the guide on small screens */
@media (max-width: 600px) { .tour-pill { bottom: 82px; } }

/* ---------- Moments: view toggle + world map ---------- */
.mo-views { position: fixed; left: 50%; top: calc(var(--nav-h) + 12px); transform: translateX(-50%); z-index: 21; background: rgba(12,14,20,.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.mo-map { position: fixed; inset: 0; z-index: 5; overflow: hidden; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; background: #06070b; }
.mo-map:active { cursor: grabbing; }
.mo-mapcanvas { position: absolute; inset: 0; }
.mo-maplayer { position: absolute; inset: 0; pointer-events: none; }
.mo-maplayer > * { position: absolute; left: 0; top: 0; will-change: transform; }
.mo-cluster { pointer-events: auto; display: flex; align-items: center; gap: 10px; transform-origin: 0 0; }
.mo-cluster .mc-dot { width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(242,184,75,.6), 0 0 18px var(--gold); animation: orbPulse 2s infinite; flex: none; }
.mo-cluster .mc-label { margin-top: -8px; padding: 6px 12px; border-radius: 999px; background: rgba(7,8,12,.78); border: 1px solid rgba(242,184,75,.4); font-size: 12.5px; color: var(--text-2); white-space: nowrap; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.mo-cluster .mc-label b { color: var(--text); margin-right: 8px; font-weight: 600; }
.mo-cluster:hover .mc-label { border-color: var(--gold); color: var(--text); }
.mo-home { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; }
.mo-home .mh-dot { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--text); box-shadow: 0 0 12px rgba(255,255,255,.6); }
.mo-place { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-2); white-space: nowrap; transform-origin: 0 0; margin-top: -28px; text-shadow: 0 2px 10px #000; }
.mo-thumb { pointer-events: auto; border-radius: 10px; overflow: hidden; border: 1.5px solid rgba(255,244,230,.85); box-shadow: 0 10px 30px -8px rgba(0,0,0,.9); background: var(--bg-3); transform-origin: 50% 50%; transition: border-color .2s; }
.mo-thumb:hover { border-color: var(--gold); z-index: 2000 !important; }
.mo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mo-thumb .mt-play { position: absolute; right: 4px; bottom: 4px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.6); }
.mo-thumb .mt-play svg { width: 9px; height: 9px; }
.mo-mapui { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
.mo-mapui > * { pointer-events: auto; }
.mo-mapchips { position: absolute; left: var(--gutter); bottom: 24px; display: flex; gap: 6px; }
.mo-mapchips button, .mo-zoom button { height: 38px; padding: 0 16px; border-radius: 999px; font-size: 13px; font-weight: 600; background: rgba(12,14,20,.8); border: 1px solid var(--line-2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.mo-mapchips button[aria-pressed='true'] { background: var(--text); color: var(--ink); border-color: var(--text); }
.mo-zoom { position: absolute; right: var(--gutter); top: calc(var(--nav-h) + 12px); display: grid; gap: 6px; }
.mo-zoom button { width: 40px; padding: 0; font-size: 18px; }
.mo-mapcard { position: absolute; left: var(--gutter); bottom: 80px; display: grid; gap: 6px; padding: 16px 18px; border-radius: 18px; background: rgba(12,14,20,.85); border: 1px solid var(--line-2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); min-width: 220px; }
.mo-mapcard b { font-family: var(--serif); font-weight: 400; font-size: 26px; }
.mo-maphint { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; pointer-events: none; }
.map-view .mo-film-btn { display: none; }
@media (max-width: 760px) {
  .mo-maphint { display: none; }
  .mo-mapchips { bottom: 84px; }
  .mo-mapcard { bottom: 132px; }
}
.moments-page .sound-toggle { bottom: auto; top: calc(var(--nav-h) + 12px); }
.mo-cluster.above { flex-direction: row-reverse; transform-origin: 100% 0; }
.mo-cluster.above .mc-label { position: absolute; right: 14px; bottom: 4px; margin: 0; }
.mo-cluster.below .mc-label { position: absolute; left: 14px; top: 4px; margin: 0; }
.mo-cluster { position: absolute; width: 0; height: 0; }
.mo-cluster .mc-dot { position: absolute; left: 0; top: 0; }

.g-email { margin: 10px 0 4px; padding: 12px 14px; border-radius: 12px; background: rgba(242,184,75,.1); border: 1px solid rgba(242,184,75,.4); font-family: var(--mono); font-size: 15px; color: var(--gold-2); word-break: break-all; }
.g-confirm { display: flex; gap: 8px; flex-wrap: wrap; }
.g-ghost { margin-top: 10px; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13px; font-weight: 600; }
.g-dev { margin-top: 8px; font-size: 11.5px; color: var(--text-3); font-style: italic; }
.guide.paused .g-input { opacity: .45; }
.guide.paused .g-avatar { filter: grayscale(1); }

/* ---------- project walk-through ---------- */
.wt { position: fixed; inset: 0; z-index: 170; background: #000; overflow: hidden; transform-origin: 0 0;
  transition: transform .65s cubic-bezier(.7,0,.2,1), border-radius .65s cubic-bezier(.7,0,.2,1), opacity .4s; touch-action: none; user-select: none; -webkit-user-select: none; }
.wt.out { opacity: .2; }
.wt-stage, .wt-slide { position: absolute; inset: 0; }
.wt-slide { opacity: 0; transition: opacity .9s var(--ease); }
.wt-slide.on { opacity: 1; }
.wt-slide.off { opacity: 0; }
.wt-slide img, .wt-slide video { width: 100%; height: 100%; object-fit: cover; }
.wt-slide img.kb1 { animation: kb1 7s ease-out forwards; } .wt-slide img.kb2 { animation: kb2 7s ease-out forwards; }
.wt-slide img.kb3 { animation: kb3 7s ease-out forwards; } .wt-slide img.kb4 { animation: kb4 7s ease-out forwards; }
@keyframes kb1 { from { transform: scale(1.02) translate(0,0); } to { transform: scale(1.16) translate(-2%, -1.5%); } }
@keyframes kb2 { from { transform: scale(1.16) translate(2%, 1%); } to { transform: scale(1.03) translate(0,0); } }
@keyframes kb3 { from { transform: scale(1.04) translate(1.5%, -1%); } to { transform: scale(1.18) translate(-1%, 1.5%); } }
@keyframes kb4 { from { transform: scale(1.14) translate(-2%, 0); } to { transform: scale(1.04) translate(1.5%, -1%); } }
.wt.paused .wt-slide img { animation-play-state: paused; }
.wt-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.6) 0%, transparent 22%, transparent 55%, rgba(0,0,0,.82) 100%); }
.wt-top { position: absolute; left: 0; right: 0; top: 0; padding: max(14px, env(safe-area-inset-top)) var(--gutter) 0; display: grid; gap: 14px; }
.wt-bars { display: flex; gap: 5px; }
.wt-bars i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.25); overflow: hidden; }
.wt-bars i b { display: block; height: 100%; width: 100%; background: #fff; transform-origin: left; transform: scaleX(var(--p, 0)); }
.wt-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wt-head b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.1; }
.wt-kicker { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-2); }
.wt-x { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.3); }
.wt-x svg { width: 16px; height: 16px; }
.wt-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 var(--gutter) max(28px, env(safe-area-inset-bottom)); pointer-events: none; }
.wt-c1 { font-family: var(--serif); font-size: clamp(26px, 3.2vw, 44px); line-height: 1.08; max-width: 24ch; text-shadow: 0 2px 30px rgba(0,0,0,.7); }
.wt-c2 { margin-top: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.wt-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.25); }
.wt-nav svg { width: 18px; height: 18px; }
.wt-prev { left: var(--gutter); } .wt-next { right: var(--gutter); }
@media (hover: none) { .wt-nav { display: none; } }
.wt-end img { filter: blur(18px) brightness(.35); transform: scale(1.1); }
.wt-endcard { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 90px var(--gutter) 40px; overflow-y: auto; }
.wt-endcard .wt-baro { width: min(520px, 84vw); margin: 0 auto 22px; text-align: left; }
.wt-ctas { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.wt.end .wt-shade { opacity: .4; }

/* ---------- orbiting project labels (finale) ---------- */
.moon-labels { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .8s; }
.moon-labels.on { opacity: 1; }
.moon-label { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 2px; padding: 7px 12px; border-radius: 12px;
  background: rgba(7,8,12,.7); border: 1px solid rgba(242,184,75,.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); white-space: nowrap; text-align: center; transition: opacity .3s; }
.moon-label b { font-family: var(--serif); font-weight: 400; font-size: 17px; line-height: 1.1; }
.moon-label span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-2); }
.moon-label.done { border-color: rgba(255,216,138,.7); }
.finale-hint { margin: 16px auto 0; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-2); }
@media (max-width: 600px) { .moon-label b { font-size: 14px; } .moon-label span { font-size: 8.5px; } }

/* finale headline must always fit */
.act.center .act-inner { width: 100%; max-width: 1100px; margin: 0 auto; }
.act.center h2 { font-size: clamp(36px, 6vw, 96px); overflow-wrap: anywhere; }

/* ---------- entry screen: living photo globe around the cross ---------- */
.pl-orb { position: relative; width: min(300px, 62vw); aspect-ratio: 1; display: grid; place-items: center; margin-bottom: -6px; }
.pl-orb::before { content: ''; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(242,184,75,.22), rgba(242,184,75,.04) 55%, transparent 72%); animation: breathe 4s ease-in-out infinite; }
.pl-orb canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.6s var(--ease); }
.pl-orb canvas.ready { opacity: 1; }
.pl-orb img { position: relative; z-index: 2; width: 34%; height: auto; filter: drop-shadow(0 0 18px rgba(0,0,0,.9)) drop-shadow(0 0 30px rgba(242,184,75,.35)); animation: none; }
.preloader .pl-inner { gap: 20px; }

/* field-voices caption */
.field-cap { position: fixed; left: 50%; bottom: 84px; z-index: 93; transform: translate(-50%, 12px); display: flex; gap: 12px; align-items: flex-start; max-width: min(620px, calc(100vw - 32px));
  padding: 12px 18px; border-radius: 16px; background: rgba(7,8,12,.78); border: 1px solid rgba(242,184,75,.3); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  opacity: 0; transition: opacity .8s var(--ease), transform .8s var(--ease); pointer-events: none; }
.field-cap.on { opacity: 1; transform: translate(-50%, 0); }
.field-cap .fc-dot { width: 8px; height: 8px; margin-top: 8px; flex: none; border-radius: 50%; background: #e5484d; box-shadow: 0 0 10px #e5484d; animation: pulse 1.6s infinite; }
.field-cap .fc-t { font-family: var(--serif); font-size: clamp(17px, 1.6vw, 21px); line-height: 1.3; }
.field-cap .fc-w { margin-top: 4px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2); }

/* ---------- owners' dashboard ---------- */
.adm { max-width: 980px; margin: 0 auto; padding: 18px var(--gutter) 80px; display: grid; gap: 18px; }
.adm-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 6px 0 4px; }
.adm-head .brand span { font-size: 15px; } .adm-head .brand b { color: var(--gold-2); }
.adm-card { border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(180deg, var(--bg-3), var(--bg-2)); padding: clamp(18px, 3vw, 30px); }
.adm-login { max-width: 460px; width: 100%; margin: 6vh auto 0; display: grid; gap: 14px; }
.adm-tabs { flex-wrap: wrap; justify-self: start; }
.adm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.adm-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.adm select.input { appearance: auto; }
.adm-drop { position: relative; display: grid; justify-items: center; gap: 6px; padding: 38px 20px; border-radius: 18px; border: 1.5px dashed rgba(242,184,75,.5); background: rgba(242,184,75,.05); text-align: center; cursor: pointer; transition: background .2s, border-color .2s; }
.adm-drop.over, .adm-drop:hover { background: rgba(242,184,75,.12); border-color: var(--gold); }
.adm-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.adm-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.adm-thumb { position: relative; display: grid; gap: 6px; }
.adm-thumb img, .adm-thumb video { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.adm-thumb .input { height: 38px; font-size: 13px; padding: 0 10px; border-radius: 10px; }
.adm-thumb button { position: absolute; right: 6px; top: 6px; width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,.65); font-size: 18px; line-height: 1; }
.adm-check { display: flex; gap: 10px; align-items: center; font-size: 15px; }
.adm-progress { position: relative; height: 34px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.adm-progress i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, var(--gold-3), var(--gold)); transition: width .4s; }
.adm-progress span { position: relative; display: block; text-align: center; line-height: 34px; font-size: 13px; font-weight: 600; }
.adm-ok { border-color: rgba(146,214,165,.5); }
.adm-proj { display: grid; gap: 12px; padding: 16px; border-radius: 16px; border: 1px solid var(--line); }
.adm-proj-h { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.adm-sig { font-size: 12.5px; color: var(--text-3); } .adm-sig b { color: var(--gold-2); font-weight: 600; }
.adm-recent { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.adm-rm { position: relative; margin: 0; display: grid; gap: 6px; }
.adm-rm img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.adm-rm figcaption { display: grid; gap: 2px; font-size: 13px; } .adm-rm figcaption span { color: var(--text-3); font-size: 12px; }
.adm-del { position: absolute; right: 6px; top: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(0,0,0,.65); font-size: 12px; }
.adm-line { display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); }
.adm-subs { max-height: 420px; overflow: auto; }
.adm-msg { padding: 14px 0; border-bottom: 1px solid var(--line); display: grid; gap: 8px; } .adm-msg.done { opacity: .55; }
.adm-link { font-size: 14px; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; justify-self: center; }
.admin .grain { display: none; }
.adm code { font-family: var(--mono); font-size: 13px; color: var(--gold-2); }
@media (max-width: 600px) { .adm-tabs button { padding: 0 12px; font-size: 13px; } }

/* ---------- field moment card: the real clip, in sync with the voice ---------- */
.field-cap { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 10px 16px 10px 10px; border-radius: 18px; cursor: pointer; pointer-events: none; max-width: min(640px, calc(100vw - 24px)); }
.field-cap.on { pointer-events: auto; }
.field-cap:hover { border-color: var(--gold); }
.field-cap .fc-vid { position: relative; width: 200px; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; box-shadow: 0 10px 30px -10px #000; }
.field-cap.portrait .fc-vid { width: 104px; aspect-ratio: 9 / 16; }
.field-cap .fc-vid video { width: 100%; height: 100%; object-fit: cover; }
.field-cap .fc-live { position: absolute; left: 6px; top: 6px; display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; border-radius: 99px; background: rgba(0,0,0,.6); font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.field-cap .fc-live .fc-dot { width: 6px; height: 6px; margin: 0; }
.field-cap .fc-text { min-width: 0; }
.field-cap .fc-x { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--text-2); border-bottom: 1px solid var(--line-2); }
.field-cap:hover .fc-x { color: var(--gold-2); border-color: var(--gold-2); }
@media (max-width: 600px) {
  .field-cap { bottom: 132px; grid-template-columns: 1fr; padding: 10px; }
  .field-cap .fc-vid { width: 100%; }
  .field-cap.portrait .fc-vid { width: 120px; justify-self: center; }
  .field-cap .fc-t { font-size: 16px; }
}

/* ---------- privacy ---------- */
.pv-promise { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: clamp(60px, 8vw, 110px); }
.pv-promise > div { padding: 26px 24px 28px; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(160deg, rgba(242,184,75,.07), rgba(255,255,255,.015)); }
.pv-promise .pv-n { font-family: var(--mono); font-size: 11px; color: var(--gold-2); letter-spacing: .14em; }
.pv-promise h3 { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.05; margin: 14px 0 10px; }
.pv-promise p { color: var(--text-2); font-size: 15px; line-height: 1.55; }
.pv-body { display: grid; grid-template-columns: 240px 1fr; gap: clamp(30px, 6vw, 90px); align-items: start; }
.pv-toc { position: sticky; top: calc(var(--nav-h) + 30px); display: grid; gap: 4px; }
.pv-toc .eyebrow { margin-bottom: 12px; }
.pv-toc a { padding: 7px 0 7px 14px; border-left: 1px solid var(--line); color: var(--text-3); font-size: 14px; transition: color .2s, border-color .2s; }
.pv-toc a:hover, .pv-toc a.on { color: var(--text); border-color: var(--gold); }
.pv-text { max-width: 720px; }
.pv-text > section { padding-bottom: 44px; margin-bottom: 44px; border-bottom: 1px solid var(--line); scroll-margin-top: 110px; }
.pv-text h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3vw, 42px); line-height: 1.05; margin-bottom: 18px; }
.pv-text p, .pv-text li { color: var(--text-2); font-size: 17px; line-height: 1.7; }
.pv-text p + p, .pv-text ul + p, .pv-text p + ul, .pv-text .pv-table + p { margin-top: 14px; }
.pv-text ul { padding-left: 20px; display: grid; gap: 10px; }
.pv-text b { color: var(--text); font-weight: 600; }
.pv-text a { color: var(--gold-2); text-decoration: underline; text-underline-offset: 3px; }
.pv-table { display: grid; margin-top: 16px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.pv-table > div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 14px 18px; font-size: 15.5px; }
.pv-table > div + div { border-top: 1px solid var(--line); }
.pv-table span { color: var(--text-2); }
@media (max-width: 1000px) { .pv-promise { grid-template-columns: 1fr 1fr; } }
@media (max-width: 820px) { .pv-body { grid-template-columns: 1fr; } .pv-toc { display: none; } }
@media (max-width: 520px) { .pv-promise { grid-template-columns: 1fr; } .pv-table > div { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- "From the field" reel: a tiny corner player ---------- */
.reel { position: fixed; left: var(--gutter); bottom: 76px; z-index: 96; width: 172px; border-radius: 13px;
  border: 1px solid rgba(242,184,75,.38); background: #000; box-shadow: 0 18px 40px -14px #000, 0 0 0 4px rgba(7,8,12,.35);
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.94); transform-origin: bottom left;
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility .5s; }
.reel.on { opacity: 1; visibility: visible; transform: none; }
.reel-frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; cursor: pointer; }
.reel-frame video { position: relative; width: 100%; height: 100%; object-fit: cover; transition: opacity .25s; }
.reel.portrait .reel-frame video { object-fit: contain; }
.reel-bg { position: absolute; inset: -10%; width: 120%; height: 120%; object-fit: cover; filter: blur(14px) brightness(.5); }
.reel.switching .reel-frame video { opacity: 0; }
.reel-frame::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: calc(var(--rp, 0) * 100%); background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.reel-top { position: absolute; left: 7px; top: 6px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 99px; background: rgba(0,0,0,.55); font-family: var(--mono); font-size: 9px; color: rgba(255,255,255,.85); }
.reel-top .fc-dot { width: 5px; height: 5px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 6px #e5484d; animation: pulse 1.6s infinite; }
.reel-expand { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.5); font-size: 15px; opacity: 0; transition: opacity .2s, background .2s, color .2s; }
.reel:hover .reel-expand { opacity: 1; } .reel-frame:hover .reel-expand { background: var(--gold); color: var(--ink); }
.reel-x, .reel-next { position: absolute; z-index: 2; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.6); transition: opacity .2s, background .2s; }
.reel-x { right: 5px; top: 5px; } .reel-next { right: 5px; bottom: 7px; opacity: 0; }
.reel:hover .reel-next { opacity: 1; }
.reel-x svg, .reel-next svg { width: 9px; height: 9px; }
.reel-x:hover, .reel-next:hover { background: #fff; color: var(--ink); }
.reel-cap { position: absolute; left: calc(100% + 10px); bottom: 0; width: 250px; padding: 11px 14px 12px; border-radius: 14px;
  background: rgba(9,10,15,.9); border: 1px solid var(--line-2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  opacity: 0; transform: translateX(-6px); pointer-events: none; transition: opacity .35s, transform .35s var(--ease); }
.reel:hover .reel-cap, .reel.peek .reel-cap { opacity: 1; transform: none; }
.reel-live { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 5px; }
.reel-t { font-family: var(--serif); font-size: 15px; line-height: 1.28; }
.reel-w { margin-top: 5px; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-2); }
.reel-on .tour-pill { opacity: 0; pointer-events: none; }
@media (max-width: 700px) {
  .reel { width: 124px; bottom: 74px; border-radius: 11px; }
  .reel-frame { border-radius: 10px; }
  .reel-cap { display: none; }
  .reel-next { opacity: 1; width: 20px; height: 20px; right: 4px; bottom: 5px; }
  .reel-x { width: 20px; height: 20px; right: 4px; top: 4px; }
  .reel-top { left: 5px; top: 5px; padding: 2px 6px; font-size: 8.5px; }
}

/* ---------- lightbox: filmstrip of every moment + the join card ---------- */
.lightbox.has-strip { grid-template-rows: auto 1fr auto auto; }
.lightbox.has-strip .lb-stage img, .lightbox.has-strip .lb-stage video { max-height: calc(100svh - 270px); }
.lightbox.has-strip .lb-cap { padding-bottom: 12px; }
.lb-strip { display: flex; gap: 8px; overflow-x: auto; padding: 4px var(--gutter) 20px; scrollbar-width: none; scroll-snap-type: x proximity; }
.lb-strip::-webkit-scrollbar { display: none; }
.lb-thumb { position: relative; flex: none; width: 104px; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: #111; border: 1px solid var(--line); opacity: .55; scroll-snap-align: center; transition: opacity .25s, border-color .25s, transform .25s var(--ease); }
.lb-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lb-thumb span { position: absolute; left: 6px; bottom: 5px; font-family: var(--mono); font-size: 10px; color: #fff; text-shadow: 0 1px 6px #000; }
.lb-thumb:hover { opacity: .9; }
.lb-thumb.on { opacity: 1; border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 0 0 1px var(--gold), 0 10px 30px -10px rgba(242,184,75,.6); }
.lb-thumb.join { display: grid; place-items: center; align-content: center; gap: 4px; background: linear-gradient(150deg, rgba(242,184,75,.28), rgba(242,184,75,.06)); border-color: rgba(242,184,75,.5); color: var(--gold-2); opacity: .9; }
.lb-thumb.join svg { width: 18px; height: 18px; }
.lb-thumb.join span { position: static; font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--gold-2); text-shadow: none; }
.lb-join { width: min(560px, 100%); padding: clamp(28px, 4vw, 48px); border-radius: 24px; text-align: center; display: grid; justify-items: center; gap: 14px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(242,184,75,.16), rgba(12,13,18,.95) 60%); border: 1px solid rgba(242,184,75,.32); box-shadow: 0 40px 100px -30px #000; }
.lb-join h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 4.4vw, 56px); line-height: 1; }
.lb-join h2 em { color: var(--gold-2); }
.lb-join p { color: var(--text-2); max-width: 40ch; }
.lb-join .inline-form { width: 100%; margin-top: 6px; }
.lb-join-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.lb-join-pv { font-size: 12px; color: var(--text-3); text-decoration: underline; }
.lb-join .form-ok { font-family: var(--serif); font-size: 24px; color: var(--gold-2); }
@media (max-width: 600px) { .lb-thumb { width: 84px; } .lightbox.has-strip .lb-stage img, .lightbox.has-strip .lb-stage video { max-height: calc(100svh - 250px); } }

/* ---------- opening line: "for the very first time" lands with weight ---------- */
.act-open h1 strong { font-weight: 400; color: #ffe2a6; text-shadow: 0 0 34px rgba(242,184,75,.55), 0 4px 60px rgba(0,0,0,.5); }
.act-open h1 .em-line { display: block; width: fit-content; position: relative; margin-top: .08em; }
.act-open h1 .em-line em { font-size: 1.14em; color: var(--gold-2); letter-spacing: -0.02em; }
.act-open h1 .em-line::after { content: ''; position: absolute; left: .04em; right: .1em; bottom: .02em; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--gold), #fff1cf 50%, rgba(242,184,75,0)); box-shadow: 0 0 18px rgba(242,184,75,.8);
  transform: scaleX(0); transform-origin: left; transition: transform 1.8s var(--ease) 1.1s; }
.act-open.on h1 .em-line::after { transform: scaleX(1); }
.act-open.speaking h1 .em-line .w.lit em { text-shadow: 0 0 40px rgba(242,184,75,.85), 0 0 90px rgba(242,184,75,.4); }

/* ---------- both field players live small in the bottom-right corner, clear of the words ---------- */
.reel { left: auto; right: var(--gutter); bottom: 84px; transform-origin: bottom right; }
.reel-cap { left: auto; right: calc(100% + 10px); transform: translateX(6px); }
.field-cap { left: auto; right: var(--gutter); bottom: 84px; display: block; width: 172px; max-width: none; padding: 0; border-radius: 13px; gap: 0;
  background: #000; border: 1px solid rgba(242,184,75,.38); box-shadow: 0 18px 40px -14px #000, 0 0 0 4px rgba(7,8,12,.35);
  transform: translateY(12px) scale(.94); transform-origin: bottom right; }
.field-cap.on { transform: none; }
.field-cap .fc-vid, .field-cap.portrait .fc-vid { width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; box-shadow: none; }
.field-cap.portrait .fc-vid video { object-fit: contain; }
.field-cap .fc-live { left: 5px; top: 5px; height: 18px; padding: 0 7px; font-size: 8.5px; }
.field-cap .fc-text { position: absolute; right: calc(100% + 10px); bottom: 0; width: 260px; padding: 11px 14px 12px; border-radius: 14px;
  background: rgba(9,10,15,.9); border: 1px solid var(--line-2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.field-cap .fc-t { font-size: 15px; line-height: 1.3; }
.field-cap .fc-w { font-size: 9px; }
.field-cap .fc-x { font-size: 11px; margin-top: 6px; }
@media (max-width: 700px) {
  .reel { bottom: 80px; }
  .field-cap { width: 124px; bottom: 80px; border-radius: 11px; }
  .field-cap .fc-vid, .field-cap.portrait .fc-vid { border-radius: 10px; }
  .field-cap .fc-text { display: none; }
  .field-cap .fc-live { font-size: 0; gap: 0; padding: 0 6px; }
}

/* ---------- endorsements ---------- */
.endorse { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); }
.endorse figure { position: relative; margin: 0; padding: clamp(28px, 3.4vw, 46px); border-radius: 24px; border: 1px solid var(--line); background: linear-gradient(160deg, rgba(242,184,75,.08), rgba(255,255,255,.015) 60%); display: grid; gap: 22px; align-content: space-between; }
.endorse-mark { position: absolute; right: 26px; top: -6px; font-family: var(--serif); font-size: 140px; line-height: 1; color: rgba(242,184,75,.25); }
.endorse blockquote { margin: 0; font-family: var(--serif); font-size: clamp(20px, 1.8vw, 25px); line-height: 1.38; }
.endorse figcaption { display: grid; gap: 4px; }
.endorse figcaption b { font-weight: 600; }
.endorse figcaption span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-2); }
@media (max-width: 820px) { .endorse { grid-template-columns: 1fr; } }

/* ---------- the first letter ---------- */
.letter { max-width: 760px; margin: 0 auto; padding: clamp(32px, 5vw, 72px); border-radius: 26px; background: #f4eee3; color: #221d16; box-shadow: 0 50px 120px -40px rgba(0,0,0,.8); }
.letter header { margin-bottom: 28px; display: grid; gap: 12px; }
.letter .eyebrow { color: #8a6a2a; }
.letter h2 { color: #1b1712; } .letter h2 em { color: #a2741c; }
.letter h3 { font-family: var(--serif); font-weight: 400; font-size: 28px; margin: 34px 0 10px; color: #1b1712; }
.letter p { font-family: var(--serif); font-size: clamp(18px, 1.45vw, 20.5px); line-height: 1.62; color: #3a3329; }
.letter p + p { margin-top: 14px; }
.letter .letter-hi { font-size: 24px; color: #1b1712; margin-bottom: 14px; }
.letter .letter-sign { margin-top: 30px; font-style: italic; font-size: 26px; color: #1b1712; }

/* ---------- why this project ---------- */
.pj-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 28px; }
.pj-why > div { padding: 18px 18px 20px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.02); display: grid; gap: 6px; }
.pj-why b { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 3.2vw, 46px); line-height: 1; color: var(--gold-2); }
.pj-why span { font-size: 14px; line-height: 1.45; color: var(--text-2); }
@media (max-width: 600px) { .pj-why { grid-template-columns: 1fr; } .pj-why > div { grid-template-columns: auto 1fr; align-items: center; gap: 14px; } .pj-why b { min-width: 3.2ch; } }

.footer-tag { margin: 18px 0 0; max-width: 30ch; font-size: 15px; color: var(--text-2); }
.pj-why-line { margin: -12px 0 28px; font-family: var(--serif); font-size: clamp(20px, 1.8vw, 24px); color: var(--gold-2); }

/* ---------- mobile menu: everything fits, it scrolls if it must, nothing floats over it ---------- */
.mobile-menu { display: block; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: 32px; }
.mm-inner { min-height: 100%; display: flex; flex-direction: column; justify-content: center; }
.mobile-menu a.big { font-size: clamp(34px, min(11vw, 7.4svh), 66px); line-height: 1.1; }
.menu-open .mobile-menu a.big:nth-child(5) { transition-delay: .2s; }
.menu-open .mobile-menu a.big:nth-child(6) { transition-delay: .25s; }
.mm-sub { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; font-size: 15px; color: var(--text-2); }
.mm-sub a { border-bottom: 1px solid var(--line-2); padding-bottom: 2px; }
.mm-cta { display: flex; gap: 10px; margin-top: 24px; }
.mobile-menu .foot { margin-top: 26px; }
.menu-open .tour-pill, .menu-open .sound-toggle, .menu-open .guide-orb, .menu-open .reel, .menu-open .field-cap, .menu-open .give-bar {
  opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

.endorse figcaption { grid-template-columns: auto 1fr; align-items: center; gap: 14px; }
.endorse figcaption > div { display: grid; gap: 4px; }
.endorse figcaption img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: center 20%; border: 1px solid rgba(242,184,75,.45); background: #fff; }
.letter-photo { margin: 30px 0 22px; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 9; background: #ddd5c6; }
.letter-photo:first-of-type { margin-top: 0; }
.letter-photo img { width: 100%; height: 100%; object-fit: cover; }

/* menu rows read as buttons: number · name · arrow, with a faint line under each */
.mm-inner { counter-reset: mm; }
.mobile-menu a.big { display: flex; align-items: center; gap: 16px; padding: .16em 2px .14em; border-bottom: 1px solid rgba(255,255,255,.13);
  font-size: clamp(30px, min(9.4vw, 6.3svh), 58px); line-height: 1.15; transition: transform .6s var(--ease), opacity .6s, color .25s, border-color .25s; }
.mobile-menu a.big:first-child { border-top: 1px solid rgba(255,255,255,.13); }
.mobile-menu a.big::before { counter-increment: mm; content: counter(mm, decimal-leading-zero); flex: none; width: 2.2em; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--text-3); }
.mobile-menu a.big::after { content: '→'; margin-left: auto; font-family: var(--sans); font-size: .42em; color: var(--gold-2); opacity: .75; transition: transform .25s var(--ease), opacity .25s; }
.mobile-menu a.big:hover, .mobile-menu a.big:active, .mobile-menu a.big:focus-visible { border-color: rgba(242,184,75,.6); }
.mobile-menu a.big:hover::after, .mobile-menu a.big:active::after { transform: translateX(5px); opacity: 1; }
.mobile-menu a.big[aria-current="page"] { color: var(--gold-2); }
.mobile-menu a.big[aria-current="page"]::before { color: var(--gold-2); }

/* guide: voice / text-only switch */
.g-head { align-items: center; }
.g-mode { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 10px; border-radius: 99px; border: 1px solid var(--line-2); font-size: 12.5px; font-weight: 600; color: var(--text-2); white-space: nowrap; transition: border-color .2s, color .2s, background .2s; }
.g-mode .gm-ico { display: inline-grid; width: 16px; height: 16px; } .g-mode svg { width: 16px; height: 16px; }
.g-mode:hover { border-color: var(--gold); color: var(--gold-2); }
.g-mode[aria-pressed="true"] { background: rgba(242,184,75,.14); border-color: rgba(242,184,75,.55); color: var(--gold-2); }
.g-head .g-close { margin-left: 8px; }
@media (max-width: 420px) { .g-mode .gm-t { display: none; } .g-mode { padding: 0 9px; } }

.adm-who { display: grid; gap: 10px; margin: 6px 0 4px; }
.adm-who .btn { justify-content: center; }
.link-btn { color: var(--gold-2); text-decoration: underline; text-underline-offset: 3px; font: inherit; }

.pc-links { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 4px; }
.pc-links a { font-size: 14px; font-weight: 600; color: var(--gold-2); border-bottom: 1px solid rgba(242,184,75,.35); padding-bottom: 1px; }
.pc-links a:hover { border-color: var(--gold-2); }

/* ---------- owners' dashboard: posted-by, studio, insights ---------- */
.adm-pulse { font-size: 14px; color: var(--text-2); min-height: 20px; }
.adm-pulse b { color: var(--gold-2); }
.adm-by { position: sticky; top: 8px; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px;
  border-radius: 16px; background: rgba(12,14,20,.9); border: 1px solid var(--line-2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.adm-by-l { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-right: 4px; }
.adm-by-b { height: 36px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--line-2); font-weight: 600; font-size: 14px; color: var(--text-2); transition: background .2s, color .2s, border-color .2s; }
.adm-by-b[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.adm-by-b[aria-pressed="true"]::before { content: '✓ '; }
.adm-by-hint { flex: 1 1 200px; }
.adm-by.need { border-color: #e5484d; animation: adm-shake .45s; }
.adm-by.need .adm-by-hint { color: #ff8a8d; }
.adm-by.need .adm-by-hint::before { content: 'Tap who’s posting first. '; font-weight: 600; }
@keyframes adm-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.adm-tabs { flex-wrap: wrap; }
.adm-spin { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: adm-rot .8s linear infinite; vertical-align: -2px; }
@keyframes adm-rot { to { transform: rotate(360deg); } }
.adm-more { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.adm-more > summary { cursor: pointer; font-weight: 600; color: var(--text-2); list-style: none; }
.adm-more > summary::-webkit-details-marker { display: none; }
.adm-more > summary::after { content: ' ›'; color: var(--gold-2); }
.adm-more[open] > summary { color: var(--gold-2); margin-bottom: 14px; }
.adm-pick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.adm-pick > .muted { flex-basis: 100%; }
.adm-pick-i { position: relative; cursor: pointer; }
.adm-pick-i input { position: absolute; opacity: 0; }
.adm-pick-i img { width: 92px; height: 68px; object-fit: cover; border-radius: 10px; border: 2px solid transparent; opacity: .7; transition: opacity .2s, border-color .2s; }
.adm-pick-i input:checked + img { border-color: var(--gold); opacity: 1; }
.adm-pick-i input:focus-visible + img { outline: 2px solid var(--gold-2); outline-offset: 2px; }
.adm-social { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.adm-social:empty { display: none; }
.adm-post textarea { font-size: 15px; line-height: 1.5; }
.adm-ai { padding: 14px; border-radius: 14px; background: rgba(242,184,75,.07); border: 1px solid rgba(242,184,75,.25); }
.adm-seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 99px; overflow: hidden; }
.adm-seg button { height: 34px; padding: 0 14px; font-size: 13px; color: var(--text-2); }
.adm-seg button[aria-pressed="true"] { background: var(--gold); color: var(--ink); font-weight: 600; }
.adm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.adm-kpis > div { padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.02); display: grid; gap: 4px; }
.adm-kpis b { font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1; color: var(--gold-2); }
.adm-kpis span { font-size: 13px; color: var(--text-3); }
.adm-bars { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding-top: 8px; border-bottom: 1px solid var(--line); }
.adm-bars i { flex: 1; height: max(2px, var(--h)); border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--gold-2), rgba(242,184,75,.35)); }
.adm-table { display: grid; gap: 2px; }
.adm-tr { display: grid; grid-template-columns: 2.2fr repeat(4, 1fr); gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--line); font-size: 14px; }
.adm-th { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.adm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.adm-two > .adm-card { margin: 0; }
.adm-who-bar { display: grid; grid-template-columns: 130px 1fr 34px; align-items: center; gap: 10px; font-size: 14px; }
.adm-who-bar i { height: 10px; width: var(--w); min-width: 4px; border-radius: 6px; background: var(--gold); }
.adm-who-bar b { text-align: right; }
@media (max-width: 760px) {
  .adm-two { grid-template-columns: 1fr; }
  .adm-tr { grid-template-columns: 1.6fr repeat(4, .8fr); font-size: 12.5px; gap: 6px; }
  .adm-by { top: 4px; }
}
#view { display: grid; gap: 18px; }

/* the walkthrough pill stays small so it never runs into the corner buttons */
@media (max-width: 1100px) { .tour-pill .tp-text { display: none; } .tour-pill { padding-left: 12px; } }

/* past the 3D journey the walkthrough pill steps out of the way */
.journey-gone .tour-pill { opacity: 0 !important; visibility: hidden; pointer-events: none !important; transform: translate(-50%, 140%); }
}

/* ---------- Updates: one heavenly, endless flow ---------- */
.updates-page::before { content: ''; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 30% at 20% 30%, rgba(242,184,75,.07), transparent 70%), radial-gradient(35% 28% at 80% 70%, rgba(255,226,166,.05), transparent 70%);
  animation: fd-drift 38s ease-in-out infinite alternate; }
@keyframes fd-drift { to { transform: translate3d(4%, -6%, 0) scale(1.08); } }
.fd-flow { position: relative; max-width: 860px; margin: 0 auto; padding-top: clamp(30px, 5vw, 60px); }
.fd-thread { position: absolute; left: calc(var(--gutter) + 9px); top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent, rgba(242,184,75,.55) 6%, rgba(242,184,75,.25) 60%, rgba(242,184,75,.05)); }
.fd-thread::after { content: ''; position: sticky; top: 45vh; display: block; width: 8px; height: 80px; margin-left: -3px; border-radius: 8px;
  background: radial-gradient(closest-side, rgba(255,226,166,.9), transparent); filter: blur(2px); }
.fd-list { display: grid; gap: clamp(36px, 5vw, 64px); padding: 0 var(--gutter) 40px calc(var(--gutter) + 44px); }
.fd-item { position: relative; padding: clamp(22px, 3vw, 34px); border-radius: 24px; border: 1px solid var(--line); background: linear-gradient(170deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); }
.fd-item::before { content: ''; position: absolute; left: calc(-44px + 3px); top: 34px; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px rgba(242,184,75,.15), 0 0 24px rgba(242,184,75,.8); }
.fd-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.fd-kind { color: var(--gold-2); }
.fd-item h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3vw, 40px); line-height: 1.08; margin: 12px 0 14px; }
.fd-sub { color: var(--text-3); }
.fd-item p { color: var(--text-2); font-size: 17px; line-height: 1.65; }
.fd-cap { font-family: var(--serif); font-size: 19px !important; color: var(--text) !important; margin-bottom: 16px; }
.fd-by { margin-top: 12px; font-size: 13.5px !important; color: var(--text-3) !important; }
.fd-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 18px; }
.fd-walk, .fd-share { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.fd-walk svg, .fd-share svg { width: 13px; height: 13px; }
.fd-walk:hover, .fd-share:hover { color: var(--gold-2); }
.fd-mosaic { display: grid; gap: 6px; grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: clamp(90px, 13vw, 150px); border-radius: 16px; overflow: hidden; }
.fd-mosaic .fd-ph:first-child { grid-row: span 2; }
.fd-mosaic.n1 { grid-template-columns: 1fr; grid-auto-rows: clamp(200px, 32vw, 380px); }
.fd-mosaic.n2 { grid-template-columns: 1fr 1fr; grid-auto-rows: clamp(160px, 24vw, 280px); } .fd-mosaic.n2 .fd-ph:first-child { grid-row: auto; }
.fd-mosaic.n3 .fd-ph:first-child { grid-row: span 2; } .fd-mosaic.n3 { grid-template-columns: 2fr 1fr; }
.fd-ph { position: relative; display: block; overflow: hidden; background: #111; border-radius: 0; }
.fd-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .6s; }
.fd-ph:hover img { transform: scale(1.05); }
.fd-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(7,8,12,.55); font-family: var(--serif); font-size: 30px; color: #fff; }
.fd-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 16px; border-radius: 14px; overflow: hidden; }
.fd-strip .fd-ph { aspect-ratio: 4 / 3; }
/* letters read like letters */
.fd-letter { background: #f4eee3; border-color: transparent; color: #221d16; box-shadow: 0 40px 100px -40px rgba(0,0,0,.8); }
.fd-letter .fd-meta { color: #8a7a62; } .fd-letter .fd-kind { color: #a2741c; }
.fd-letter h2 { color: #1b1712; }
.fd-letter p { color: #3a3329; font-family: var(--serif); font-size: 19px; }
.fd-letter h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; margin: 26px 0 8px; color: #1b1712; }
.fd-letter .fd-hi { font-size: 22px; color: #1b1712; }
.fd-letter p + p { margin-top: 12px; }
.fd-letter .fd-sign { margin-top: 22px; font-style: italic; font-size: 22px; color: #1b1712; }
.fd-fig { margin: 20px 0 16px; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; } .fd-fig img { width: 100%; height: 100%; object-fit: cover; }
.fd-body.folded { max-height: 330px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }
.fd-open { margin-top: 12px; font-weight: 600; color: #8c5a14; border-bottom: 1px solid currentColor; }
/* scripture breathes between the stories */
.fd-verse { position: relative; text-align: center; padding: clamp(18px, 3vw, 34px) 0; }
.fd-verse::before { content: ''; position: absolute; left: 50%; top: 50%; width: 70%; height: 140%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(242,184,75,.12), transparent); pointer-events: none; }
.fd-verse p { position: relative; font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.35; color: #ffe9bf; max-width: 30ch; margin: 0 auto; }
.fd-verse cite { position: relative; display: block; margin-top: 10px; font-style: normal; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-2); }
.fd-end { position: relative; text-align: center; display: grid; justify-items: center; gap: 14px; padding: clamp(40px, 6vw, 80px) 0 20px; }
.fd-end-glow { position: absolute; inset: 0; background: radial-gradient(50% 60% at 50% 40%, rgba(242,184,75,.18), transparent 70%); pointer-events: none; }
.fd-end .inline-form { width: min(460px, 100%); position: relative; }
.fd-end-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; position: relative; }
.fd-sentinel { height: 1px; }
.fd-item.rv { opacity: 0; transform: translateY(40px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.fd-item.rv.in { opacity: 1; transform: none; }
@media (max-width: 640px) {
  .fd-list { padding-left: calc(var(--gutter) + 26px); }
  .fd-thread { left: calc(var(--gutter) + 4px); }
  .fd-item::before { left: -29px; width: 12px; height: 12px; }
  .fd-mosaic { grid-template-columns: 1fr 1fr; } .fd-mosaic .fd-ph:first-child { grid-column: span 2; grid-row: auto; }
}

/* ---------- gallery layout: the picture frame above, the words on a quiet band beneath ---------- */
.webgl { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 64px), transparent); }
.journey-stage .vignette { bottom: var(--band, 0px); }
.act, .act.center { inset: auto 0 0 0; height: var(--band, 34vh); align-items: center; justify-content: center; text-align: center; padding: 10px var(--gutter) 64px; }
.act::before, .act-open::before, .act.center::before { display: none !important; }
.act .act-inner, .act-open .act-inner, .act.center .act-inner { max-width: min(1000px, 88vw); margin: 0 auto; }
.act .act-meta { justify-content: center; margin-bottom: 10px; }
.act .act-num, .act .act-title, .act .act-place { font-size: 10.5px; }
.act h2, .act-open h1 { font-size: clamp(26px, 2.9vw, 50px); line-height: 1.04; letter-spacing: -0.02em; text-shadow: none; }
.act-open h1 .em-line { margin-inline: auto; }
.act p.act-sub { margin: 10px auto 0; max-width: 60ch; font-size: clamp(14.5px, 1.05vw, 17px); text-shadow: none; }
.act-open .eyebrow { display: none; }
.act-open .open-ctas, .act.center .open-ctas { justify-content: center; margin-top: 16px; gap: 10px; }
.act .open-ctas .btn, .act .open-ctas .btn-lg { height: 44px; padding: 0 20px; font-size: 14.5px; }
.act .finale-hint { margin-top: 8px; font-size: 13px; }
.scroll-cue { display: none; }
/* the walkthrough pill moves up under the logo, out of the words' way */
.tour-pill { left: var(--gutter); bottom: auto; top: calc(var(--nav-h) + 12px); transform: translateY(-160%); }
.tour-pill[data-state='running'], .tour-pill[data-state='paused'] { transform: none; }
.journey-gone .tour-pill { transform: translateY(-160%); }
/* small field players sit just above the band while the journey plays */
body:not(.journey-gone) .reel, body:not(.journey-gone) .field-cap { bottom: calc(var(--band, 64px) + 12px); }
@media (max-aspect-ratio: 9/10) {
  .act, .act.center { padding: 8px var(--gutter) 74px; }
  .act h2, .act-open h1 { font-size: clamp(25px, 7.2vw, 40px); }
  .act p.act-sub { font-size: 14.5px; }
  .act .act-place, .act .finale-hint, .act.center .open-ctas a[href="moments.html#map"] { display: none; }
  .act .open-ctas { flex-wrap: nowrap; }
  .act .open-ctas .btn, .act .open-ctas .btn-lg { height: 42px; padding: 0 14px; font-size: 13.5px; white-space: nowrap; }
}

/* after the last field video: a quiet way to watch them again */
.reel-replay { position: fixed; right: var(--gutter); bottom: 84px; z-index: 96; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px;
  border-radius: 99px; background: rgba(12,14,20,.86); border: 1px solid rgba(242,184,75,.45); color: var(--gold-2); font-size: 13.5px; font-weight: 600;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: replay-in .6s var(--ease); }
.reel-replay svg { width: 12px; height: 12px; }
.reel-replay:hover { background: var(--gold); color: var(--ink); }
body:not(.journey-gone) .reel-replay { bottom: calc(var(--band, 64px) + 12px); }
@keyframes replay-in { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 700px) { .reel-replay { bottom: 80px; height: 36px; font-size: 12.5px; } }

/* ---------- words as a slim caption: the bottom fifth only ---------- */
.act, .act.center { padding: 6px var(--gutter) 12px; }
.act .act-meta { margin-bottom: 6px; gap: 10px; }
.act .act-num, .act .act-title, .act .act-place { font-size: 10px; }
.act h2, .act-open h1 { font-size: clamp(21px, 2.25vw, 38px); line-height: 1.06; }
.act-open h1 .em-line em { font-size: 1.08em; }
.act p.act-sub { margin: 6px auto 0; font-size: clamp(13px, .95vw, 15.5px); line-height: 1.45; max-width: 78ch; }
.act-open .open-ctas { display: none; }
.act.center .open-ctas { margin-top: 10px; }
.act .open-ctas .btn, .act .open-ctas .btn-lg { height: 36px; padding: 0 16px; font-size: 13px; }
.act .finale-hint { display: none; }
@media (max-aspect-ratio: 9/10) {
  .act, .act.center { padding: 4px 52px 10px; }
  .act h2, .act-open h1 { font-size: clamp(18px, 5.3vw, 26px); }
  .act p.act-sub { font-size: 12.5px; line-height: 1.4; }
  .act .act-meta { margin-bottom: 4px; }
  .act.center .open-ctas a[href="moments.html#map"] { display: none; }
}
/* the corner buttons stay small on phones so the caption keeps its room */
@media (max-width: 700px) {
  body:not(.journey-gone) .sound-toggle { height: 38px; padding: 0 11px; bottom: 12px; left: 10px; }
  body:not(.journey-gone) .guide-orb { bottom: 10px; right: 10px; transform: scale(.82); transform-origin: bottom right; }
}

/* where your gift goes */
.split { display: grid; grid-template-columns: minmax(200px, 280px) 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(20px, 3vw, 34px); border-radius: 24px; border: 1px solid var(--line); background: linear-gradient(160deg, rgba(242,184,75,.06), rgba(255,255,255,.01)); }
.split-donut { width: 100%; height: auto; }
.split-donut circle[style] { transition: stroke-dasharray 1.4s var(--ease) var(--d); }
.split:not(.in) .split-donut g circle { stroke-dasharray: 0 999 !important; }
.sd-big { font-family: var(--serif); font-size: 30px; fill: var(--text); }
.sd-small { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; fill: var(--text-3); }
.split-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.split-list li { display: grid; grid-template-columns: 14px 1fr auto; gap: 14px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.split-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.split-list i { width: 14px; height: 14px; border-radius: 4px; }
.split-list b { display: block; font-weight: 600; font-size: 16px; }
.split-list span { display: block; color: var(--text-3); font-size: 14px; margin-top: 2px; }
.split-list strong { font-family: var(--serif); font-weight: 400; font-size: 30px; color: var(--gold-2); white-space: nowrap; text-align: right; }
.split-list strong small { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
@media (max-width: 720px) { .split { grid-template-columns: 1fr; } .split-donut { max-width: 240px; margin: 0 auto; } }

/* a true 80/20 on short screens: the caption tightens further */
@media (max-height: 700px) {
  .act .act-meta { display: none; }
  .act h2, .act-open h1 { font-size: clamp(17px, 2vw, 30px); }
  .act p.act-sub { font-size: 12px; margin-top: 4px; }
  .act-open h1 .em-line { margin-top: 0; }
}

/* the full lockup — mark, divider and wording — always together */
.nav .brand .brand-logo { height: 54px; width: auto; }
@media (max-width: 760px) { .nav .brand .brand-logo { height: 44px; } }

/* ---------- the Inside Circle ---------- */
.circle { position: relative; overflow: hidden; display: grid; justify-items: center; gap: 14px; text-align: center; padding: clamp(36px, 6vw, 72px) clamp(20px, 5vw, 64px); border-radius: 30px;
  border: 1px solid rgba(242,184,75,.32); background: linear-gradient(180deg, rgba(20,18,12,.9), rgba(10,11,16,.95)); }
.circle-glow { position: absolute; left: 50%; top: -40%; width: 120%; height: 100%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(242,184,75,.22), transparent); pointer-events: none; }
.circle > * { position: relative; }
.circle h2 { max-width: 18ch; }
.circle p.muted { max-width: 56ch; }
.circle-form { width: min(620px, 100%); display: grid; gap: 14px; margin-top: 8px; }
.circle-fields { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.circle-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.circle-tags label { cursor: pointer; }
.circle-tags input { position: absolute; opacity: 0; pointer-events: none; }
.circle-tags span { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line-2); font-size: 13.5px; color: var(--text-2); transition: all .2s; }
.circle-tags input:checked + span { border-color: rgba(242,184,75,.7); color: var(--gold-2); background: rgba(242,184,75,.1); }
.circle-tags input:checked + span::before { content: '✓ '; margin-right: 2px; }
.circle-tags input:focus-visible + span { outline: 2px solid var(--gold-2); outline-offset: 2px; }
.circle-form .btn { justify-self: center; }
.circle-note { font-size: 12.5px; color: var(--text-3); } .circle-note a { text-decoration: underline; }
.circle-ok { display: grid; gap: 6px; padding: 20px 26px; border-radius: 18px; background: rgba(242,184,75,.1); border: 1px solid rgba(242,184,75,.4); }
.circle-ok b { font-family: var(--serif); font-weight: 400; font-size: 28px; color: var(--gold-2); }
.circle.compact { padding: clamp(28px, 4vw, 48px) clamp(18px, 4vw, 40px); }
.circle.compact h2 { font-size: clamp(28px, 3vw, 40px); }
@media (max-width: 560px) { .circle-fields { grid-template-columns: 1fr; } }

/* ---------- prayer lights ---------- */
.pray { position: relative; overflow: hidden; border-radius: 30px; min-height: 560px; display: grid; align-items: end; border: 1px solid var(--line);
  background: radial-gradient(90% 70% at 50% 0%, #141a2c, #07080c 70%); }
.pray-sky { position: absolute; inset: 0; width: 100%; height: 100%; }
.pray-inner { position: relative; display: grid; justify-items: center; gap: 14px; text-align: center; padding: clamp(28px, 5vw, 60px) clamp(18px, 5vw, 60px); }
.pray-inner h2 em { color: var(--gold-2); }
.pray-inner p.muted { max-width: 52ch; }
.pray-points { list-style: none; margin: 4px 0 6px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 760px; }
.pray-points li { padding: 8px 14px; border-radius: 99px; background: rgba(255,255,255,.04); border: 1px solid var(--line); font-size: 13.5px; color: var(--text-2); }
.pray-btn svg { width: 18px; height: 18px; }
.pray-btn:disabled { opacity: 1; background: rgba(242,184,75,.18); color: var(--gold-2); box-shadow: 0 0 40px rgba(242,184,75,.35); cursor: default; }
.pray-count { font-size: 14px; color: var(--text-3); }
.pray-count b { font-family: var(--serif); font-weight: 400; font-size: 30px; color: var(--gold-2); margin-right: 4px; }

/* ---------- see your gift travel ---------- */
.gt { display: grid; gap: 16px; }
.gt-amounts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.gt-amounts button { height: 40px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--line-2); font-weight: 600; color: var(--text-2); }
.gt-amounts button[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.gt-custom { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line-2); color: var(--text-3); }
.gt-custom input { width: 72px; background: none; border: 0; color: var(--text); font: inherit; outline: none; }
.gt-stage { position: relative; border-radius: 18px; overflow: hidden; background: radial-gradient(80% 90% at 50% 40%, #121726, #07080c); border: 1px solid var(--line); }
.gt-map { display: block; width: 100%; height: auto; }
.gt-go { position: absolute; right: 14px; bottom: 14px; }
.gt-lead { font-family: var(--serif); font-size: clamp(22px, 2.2vw, 28px); }
.gt-lead b { color: var(--gold-2); font-weight: 400; }
.gt-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gt-rows li { display: grid; grid-template-columns: 90px 1fr; gap: 14px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); }
.gt-rows b { font-family: var(--serif); font-weight: 400; font-size: 26px; color: var(--gold-2); }
.gt-rows span { color: var(--text-2); font-size: 15px; }
.gt-people { color: var(--text-2); } .gt-people b { color: var(--gold-2); font-size: 20px; }
.gt-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.gt-card { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: 18px; align-items: start; margin-top: 6px; }
.gt-card canvas { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 20px 50px -20px #000; }
@media (max-width: 600px) { .gt-card { grid-template-columns: 1fr; } .gt-go { right: 10px; bottom: 10px; } }

/* ---------- Stories ---------- */
.st { position: fixed; inset: 0; z-index: 158; background: #000; opacity: 0; transition: opacity .35s; }
.st.in { opacity: 1; }
.st-open .sound-toggle, .st-open .guide-orb, .st-open .reel, .st-open .reel-replay, .st-open .tour-pill { visibility: hidden; }
.st-bg { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(40px) brightness(.35); transition: background-image .6s; }
.st-frame { position: absolute; inset: 0; margin: 0 auto; max-width: min(100vw, calc(100svh * 9 / 16)); overflow: hidden; background: #000; }
.st-track { position: absolute; inset: 0; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.st-track::-webkit-scrollbar { display: none; }
.st-slide { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; }
.st-media { position: absolute; inset: 0; }
.st-media .st-blur { position: absolute; inset: -20px; width: calc(100% + 40px); height: calc(100% + 40px); object-fit: cover; filter: blur(24px) brightness(.45); }
.st-media .st-img, .st-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.st-slide.on .st-img { animation: st-kb 7s ease-out forwards; }
@keyframes st-kb { from { transform: scale(1); } to { transform: scale(1.07); } }
.st-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 120px 72px 34px 20px; background: linear-gradient(0deg, rgba(0,0,0,.82), rgba(0,0,0,.35) 60%, transparent); }
.st-t { font-family: var(--serif); font-size: clamp(20px, 5.4vw, 28px); line-height: 1.2; color: #fff; }
.st-w { margin-top: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2); }
.st-bars { position: absolute; left: 10px; right: 10px; top: 10px; z-index: 3; display: flex; gap: 3px; }
.st-bars i { position: relative; flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255,255,255,.28); overflow: hidden; }
.st-bars i b { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--k, 0)); background: #fff; }
.st-bars i.done b { transform: scaleX(1); }
.st-top { position: absolute; left: 12px; right: 10px; top: 22px; z-index: 3; display: flex; justify-content: space-between; align-items: center; }
.st-count { font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,.8); }
.st-x { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.4); color: #fff; }
.st-x svg { width: 15px; height: 15px; }
.st-rail { position: absolute; right: 10px; bottom: 120px; z-index: 3; display: grid; gap: 16px; }
.st-rail button { display: grid; justify-items: center; gap: 4px; color: #fff; font-size: 11px; font-weight: 600; text-shadow: 0 1px 6px #000; }
.st-rail svg { width: 26px; height: 26px; padding: 11px; box-sizing: content-box; border-radius: 50%; background: rgba(0,0,0,.38); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.st-rail button.lit svg { background: var(--gold); color: var(--ink); box-shadow: 0 0 24px rgba(242,184,75,.8); }
.st-rail button.off svg { opacity: .55; }
.st-hint { position: absolute; left: 0; right: 0; bottom: 8px; z-index: 3; text-align: center; font-size: 11px; color: rgba(255,255,255,.55); pointer-events: none; }
.st.paused .st-hint::after { content: ' · paused — tap to continue'; }
.st-spark { position: fixed; z-index: 170; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: #ffe2a6; box-shadow: 0 0 12px #f2b84b; pointer-events: none; animation: st-spark 1.1s var(--ease) forwards; }
@keyframes st-spark { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
.fd-stories { display: inline-flex; margin: 0 0 14px; font-size: 13.5px; font-weight: 600; color: var(--gold-2); border-bottom: 1px solid rgba(242,184,75,.4); }
.mo-views .mo-stories { padding: 0 14px; font-size: 13.5px; font-weight: 600; color: var(--gold-2); }
.film-stories { margin-right: 10px; }
@media (max-width: 700px) { .gt-go { position: static; width: calc(100% - 20px); margin: 10px; } .gt-stage { display: grid; } }
@media (max-width: 640px) { .lb-nav { display: grid; width: 40px; height: 40px; background: rgba(0,0,0,.5); } .lb-prev { left: 6px; } .lb-next { right: 6px; } }

.mo-filters button.sub { font-size: 12px; opacity: .85; }
.mo-filters button.sub::before { content: '↳ '; color: var(--gold-2); }

/* automatic milestone updates */
.fd-milestone { border-color: rgba(242,184,75,.35); background: linear-gradient(160deg, rgba(242,184,75,.1), rgba(255,255,255,.015)); }
.fd-bar { position: relative; height: 10px; margin-top: 16px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: visible; }
.fd-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 99px; background: linear-gradient(90deg, #b8862f, var(--gold), #ffe2a6); box-shadow: 0 0 18px rgba(242,184,75,.6); }
.fd-bar span { position: absolute; right: 0; top: -22px; font-family: var(--mono); font-size: 11px; color: var(--gold-2); }
.tl-auto h4::before { content: '✦ '; color: var(--gold-2); }

/* dashboard: arrange photos & videos */
.ord-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ord-row { display: grid; grid-template-columns: 34px 64px 1fr auto; gap: 12px; align-items: center; padding: 6px 8px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.02); }
.ord-row:first-child { border-color: rgba(242,184,75,.55); }
.ord-row:first-child .ord-cap small::after { content: ' · cover'; color: var(--gold-2); }
.ord-row.dragging { opacity: .9; border-color: var(--gold); background: rgba(242,184,75,.12); box-shadow: 0 14px 30px -12px #000; pointer-events: none; }
.ord-handle { cursor: grab; touch-action: none; user-select: none; font-size: 18px; letter-spacing: -2px; color: var(--text-3); text-align: center; padding: 8px 0; }
.ord-row img { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; }
.ord-cap { font-size: 14px; text-transform: capitalize; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ord-cap small { display: block; font-size: 11px; color: var(--text-3); text-transform: none; }
.ord-btns { display: flex; gap: 4px; }
.ord-btns button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line-2); color: var(--text-2); }

/* the sound switch: a speaker with its sound waves moving, always with words */
.sound-toggle .st-ico { width: 19px; height: 19px; flex: none; }
.sound-toggle .st-x { display: none; }
.sound-toggle:not(.on) .st-x { display: inline; }
.sound-toggle.on .st-ico { color: var(--gold-2); }
.snd-eq { display: inline-flex; align-items: center; gap: 2.5px; height: 16px; margin-left: -2px; }
.snd-eq i { width: 2.5px; height: 30%; border-radius: 2px; background: var(--gold-2); }
.sound-toggle.on .snd-eq i { animation: vbar 1.1s ease-in-out infinite; }
.sound-toggle.on .snd-eq i:nth-child(2) { animation-delay: -.3s; } .sound-toggle.on .snd-eq i:nth-child(3) { animation-delay: -.6s; }
.sound-toggle.on .snd-eq i:nth-child(4) { animation-delay: -.15s; } .sound-toggle.on .snd-eq i:nth-child(5) { animation-delay: -.45s; }
.sound-toggle:not(.on) .snd-eq { display: none; }
.sound-toggle:not(.on) { color: var(--text); border-color: rgba(242,184,75,.35); }
.sound-toggle .st-label { font-weight: 600; white-space: nowrap; }
.nav-cta .sound-toggle { position: static; height: 36px; padding: 0 12px 0 10px; gap: 6px; font-size: 12.5px; z-index: auto; box-shadow: none; }
.nav-cta .sound-toggle .st-ico { width: 18px; height: 18px; }
.nav-cta { gap: 8px; }
@media (max-width: 700px) {
  body:not(.journey-gone) .sound-toggle { height: 36px; padding: 0 12px 0 10px; bottom: auto; left: auto; }
}
@media (max-width: 380px) { .nav-cta .btn-sm { padding: 0 14px; } .nav .brand .brand-logo { height: 38px; } }

/* ---------- during the journey, a playing clip takes the words band itself ---------- */
body:not(.journey-gone) .field-cap, body:not(.journey-gone) .reel {
  left: 0; right: 0; bottom: 0; width: auto; max-width: none; height: var(--band, 30vh); margin: 0;
  display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 28px); padding: 12px var(--gutter) 14px;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; transform: translateY(14px); transform-origin: center; }
body:not(.journey-gone) .field-cap.on, body:not(.journey-gone) .reel.on { transform: none; }
body:not(.journey-gone) .field-cap .fc-vid, body:not(.journey-gone) .reel .reel-frame {
  height: calc(var(--band, 30vh) - 30px); width: auto; aspect-ratio: 16 / 9; flex: none; border-radius: 12px; box-shadow: 0 16px 40px -14px #000; }
body:not(.journey-gone) .field-cap.portrait .fc-vid, body:not(.journey-gone) .reel.portrait .reel-frame { aspect-ratio: 9 / 16; }
body:not(.journey-gone) .field-cap .fc-text, body:not(.journey-gone) .reel .reel-cap {
  position: static; opacity: 1; transform: none; width: auto; max-width: 44ch; padding: 0; background: none; border: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none; pointer-events: auto; text-align: left; display: block; }
body:not(.journey-gone) .field-cap .fc-t, body:not(.journey-gone) .reel .reel-t { font-size: clamp(16px, 1.5vw, 22px); line-height: 1.3; }
body:not(.journey-gone) .reel .reel-next { position: static; opacity: 1; order: 3; width: 34px; height: 34px; flex: none; }
body:not(.journey-gone) .reel .reel-x { position: static; order: 4; width: 34px; height: 34px; flex: none; }
body:not(.journey-gone) .reel-replay { display: none; }
/* the chapter's words step aside while the clip speaks */
.act { transition: opacity .45s var(--ease); }
body.band-busy .act { opacity: 0 !important; pointer-events: none; }
@media (max-aspect-ratio: 9/10) {
  body:not(.journey-gone) .field-cap, body:not(.journey-gone) .reel { gap: 12px; padding: 10px 14px 12px; justify-content: flex-start; }
  body:not(.journey-gone) .field-cap .fc-vid, body:not(.journey-gone) .reel .reel-frame { height: min(calc(var(--band, 30vh) - 28px), 116px); }
  body:not(.journey-gone) .field-cap .fc-text, body:not(.journey-gone) .reel .reel-cap { display: block; min-width: 0; flex: 1; }
  body:not(.journey-gone) .field-cap .fc-t, body:not(.journey-gone) .reel .reel-t { font-size: 13.5px; -webkit-line-clamp: 4; }
  body:not(.journey-gone) .field-cap .fc-x { display: none; }
  body:not(.journey-gone) .reel .reel-live, body:not(.journey-gone) .reel .reel-x { display: none; }
  body:not(.journey-gone) .reel .reel-next { width: 30px; height: 30px; }
}

/* ---------- explore the globe: closer, inside, back out ---------- */
.globe-ctl { position: fixed; z-index: 60; right: var(--gutter); top: calc(var(--nav-h) + (100svh - var(--band, 20vh) - var(--nav-h)) / 2);
  transform: translate(12px, -50%); opacity: 0; pointer-events: none; transition: opacity .6s var(--ease), transform .6s var(--ease);
  display: grid; justify-items: end; gap: 8px; }
.globe-ctl.on { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
.globe-ctl button { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; line-height: 1; color: var(--text);
  background: rgba(12,14,20,.6); border: 1px solid var(--line-2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color .3s, color .3s, background .3s; }
.globe-ctl button:hover { border-color: rgba(242,184,75,.55); color: var(--gold-2); }
.globe-ctl .gc-reset { font-size: 17px; opacity: 0; transform: scale(.8); pointer-events: none; transition: opacity .4s, transform .4s; }
.globe-ctl.deep .gc-reset { opacity: 1; transform: none; pointer-events: auto; }
.globe-hint { position: fixed; z-index: 60; left: 50%; bottom: calc(var(--band, 20vh) + 12px); transform: translate(-50%, 10px); margin: 0;
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 13px; font-weight: 500; color: var(--text);
  padding: 8px 16px 8px 12px; border-radius: 999px; background: rgba(12,14,20,.62); border: 1px solid rgba(242,184,75,.35);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
.globe-hint.on { opacity: 1; transform: translate(-50%, 0); transition-delay: .9s; }
.globe-hint .gh-hand { position: relative; width: 26px; height: 14px; flex: none; }
.globe-hint .gh-hand::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(242,184,75,.4); }
.globe-hint .gh-hand::after { content: ''; position: absolute; top: 50%; left: 0; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
  background: var(--gold-2); box-shadow: 0 0 10px var(--gold-2); animation: gh-drag 2.2s ease-in-out infinite; }
@keyframes gh-drag { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(16px); } }
body.journey-gone .globe-hint, .menu-open .globe-hint, .st-open .globe-hint { opacity: 0; }
@media (max-width: 700px) {
  .globe-ctl { right: 10px; gap: 6px; }
  .globe-ctl button { width: 36px; height: 36px; font-size: 18px; }
  .globe-hint { font-size: 12px; }
}
/* the opening globe stands alone: nothing floats over it */
body.journey-gone .globe-ctl { opacity: 0; pointer-events: none; }
.menu-open .globe-ctl, .st-open .globe-ctl { visibility: hidden; }

/* Stories: how many people prayed over each moment */
.st-rail button { position: relative; }
.st-rail .st-n { position: absolute; top: -4px; right: -8px; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center;
  font-style: normal; font-size: 11px; font-weight: 700; color: var(--ink); background: var(--gold-2); box-shadow: 0 2px 10px rgba(0,0,0,.45); text-shadow: none; }
.st-rail .st-n[hidden] { display: none; }
.st-pc { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 13px; color: rgba(255,255,255,.86); }
.st-pc svg { width: 15px; height: 15px; color: var(--gold-2); flex: none; }
.st-pc[hidden] { display: none; }
.adm-prayed { display: grid; gap: 8px; }
.adm-prayed-row { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 8px; border-radius: 12px; border: 1px solid var(--line); }
.adm-prayed-row img, .adm-prayed-row > i { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; background: rgba(255,255,255,.05); }
.adm-prayed-row span { font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.adm-prayed-row small { display: block; font-size: 11.5px; color: var(--text-3); font-weight: 400; }
.adm-prayed-row b { text-align: right; font-size: 18px; color: var(--gold-2); }
.preloader.tap-anywhere { cursor: pointer; }
/* footer links: real tap targets, well apart */
.ft-links { display: inline-flex; flex-wrap: wrap; gap: 6px 22px; }
.ft-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 2px; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.ft-links a:hover { text-decoration-color: currentColor; }

/* ---------- the bottom row: walkthrough controls + "Skip to projects", under the words ---------- */
.jdock { position: fixed; z-index: 94; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
  pointer-events: none; transition: opacity .4s; }
.jdock > * { pointer-events: auto; }
.jdock .tour-pill { position: static; left: auto; top: auto; bottom: auto; transform: none !important; height: 42px; transition: opacity .4s; }
.jdock .tour-pill:not([data-state='running']):not([data-state='paused']):not([data-state='exploring']):not([data-state='done']):not([data-state='resume']) { display: none; }
.tour-pill[data-state='done'] { opacity: 1; }
.tour-pill[data-state='done'] .tp-dot, .tour-pill[data-state='done'] .tp-again { display: none; }
.tour-pill .tp-again { height: 32px; padding: 0 12px; border-radius: 999px; color: var(--text); font-size: 13px; font-weight: 600; white-space: nowrap; }
.tour-pill .tp-again:hover { color: var(--gold-2); }
.jdock .journey-tools { position: static; top: auto; right: auto; bottom: auto; }
.jdock .journey-tools .btn { height: 42px; background: rgba(12,14,20,.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.jt-short { display: none; }
.menu-open .jdock, .st-open .jdock { opacity: 0; pointer-events: none; }
.menu-open .jdock *, .st-open .jdock * { pointer-events: none !important; }
@media (max-width: 1100px) { .jdock .tour-pill .tp-text { display: none; } }
@media (max-width: 700px) {
  .jdock { left: 10px; bottom: 12px; transform: none; gap: 8px; max-width: calc(100vw - 76px); }
  .jdock .tour-pill { height: 40px; gap: 8px; padding: 0 5px 0 12px; }
  .jdock .tour-pill .tp-btn { height: 30px; padding: 0 12px; font-size: 12.5px; }
  .jdock .journey-tools .btn { height: 40px; padding: 0 14px; font-size: 13px; }
  .jt-long { display: none; } .jt-short { display: inline; }
}
@media (max-width: 400px) { .tour-pill .tp-again span { display: none; } .tour-pill .tp-again { padding: 0 10px; font-size: 16px; } }

/* the words sit above the bottom row of controls */
body:not(.journey-gone) .act:not(.act-finale):not([data-seg='finale']) { padding-bottom: var(--dock-room, 64px); }
/* the last chapter has its own buttons: its words grow upward if they need to, and the bottom row steps aside */
body:not(.journey-gone) .act[data-seg='finale'] { height: auto; min-height: var(--band, 20vh); align-items: flex-end; padding-bottom: var(--dock-room, 64px); }

/* ---------- the tour player: ❚❚ Pause · time left · ↺ Replay narration — it fills with gold as the tour plays ---------- */
.jdock { left: var(--gutter); transform: none; }
.jdock .tour-pill { position: relative; overflow: hidden; isolation: isolate; gap: 4px; padding: 0 5px; opacity: 1 !important; pointer-events: auto !important; }
.jdock .tour-pill::before { content: ''; position: absolute; inset: 0; z-index: -1; transform-origin: left center; transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, rgba(242,184,75,.10), rgba(242,184,75,.26)); transition: transform .3s linear; }
.jdock .tour-pill::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; z-index: -1; transform-origin: left center; transform: scaleX(var(--p, 0));
  background: var(--gold-2); box-shadow: 0 0 8px var(--gold-2); transition: transform .3s linear; }
.tour-pill .tp-dot { display: none; }
.tour-pill .tp-btn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px 0 11px; }
.tour-pill .tp-btn svg, .tour-pill .tp-again svg { width: 15px; height: 15px; flex: none; }
.tour-pill .tp-text { display: inline-flex; align-items: baseline; padding: 0 8px; color: var(--text-2); font-size: 13px; }
.tour-pill .tp-time { font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--text); letter-spacing: .02em; }
.tour-pill[data-state='done'] .tp-left, .tour-pill[data-state='done'] .tp-again { display: none; }
.tour-pill .tp-again { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 10px; border-radius: 999px; color: var(--text); font-size: 13px; font-weight: 600; }
.tour-pill .tp-again:hover { background: rgba(255,255,255,.08); color: var(--gold-2); }
.tp-l-short { display: none; }
@media (max-width: 1100px) { .jdock .tour-pill .tp-text { display: inline-flex; } .tour-pill .tp-what { display: none; } .tour-pill[data-state='done'] .tp-what { display: inline; } }
/* the sound button, right beside the player */
.sound-toggle.docked { position: relative !important; left: auto !important; right: auto !important; bottom: auto !important; top: auto !important; z-index: auto !important; height: 42px !important; transform: none !important; }
@media (max-width: 700px) {
  .jdock { left: 10px; }
  .jdock .tour-pill .tp-btn { height: 30px; width: 34px; padding: 0; justify-content: center; }
  .jdock .tour-pill .tp-btn span { display: none; }
  .jdock .tour-pill[data-state='done'] .tp-btn { width: auto; padding: 0 12px 0 10px; }
  .jdock .tour-pill[data-state='done'] .tp-btn span { display: inline; }
  .tour-pill .tp-text { padding: 0 6px 0 4px; } .tour-pill .tp-left { display: none; }
  .tp-l-long { display: none; } .tp-l-short { display: inline; }
  .tour-pill .tp-again { padding: 0 10px 0 8px; font-size: 12.5px; }
  .sound-toggle.docked { height: 40px !important; padding: 0 12px 0 10px !important; font-size: 12.5px; gap: 6px; }
  .sound-toggle.docked.on .st-label { display: none; }
}
@media (max-width: 400px) { .jdock .tour-pill .tp-text { display: none; } .tour-pill .tp-again svg { display: none; } }
/* while a field clip or the reel plays in the words band, it sits above the player row */
body:not(.journey-gone) .field-cap, body:not(.journey-gone) .reel { bottom: var(--dock-room, 60px); height: calc(var(--band, 30vh) - var(--dock-room, 60px)); padding-top: 6px; padding-bottom: 6px; }
body:not(.journey-gone) .field-cap .fc-vid, body:not(.journey-gone) .reel .reel-frame { height: calc(var(--band, 30vh) - var(--dock-room, 60px) - 12px); }
@media (max-aspect-ratio: 9/10) {
  body:not(.journey-gone) .field-cap .fc-vid, body:not(.journey-gone) .reel .reel-frame { height: min(calc(var(--band, 30vh) - var(--dock-room, 60px) - 12px), 116px); }
}

/* the player stays with them all the way down the home page ("Projects ↓" bows out once the projects arrive) */
.jdock .tour-pill { visibility: visible !important; }
body.journey-gone .jdock .tour-pill .tp-again { display: none; }
.jdock .journey-tools.off { display: none; }
/* phones: keep the row on one line — Replay appears once the sound is on (and the time hides on the narrowest screens) */
.jdock > * { flex: none; }
@media (max-width: 700px) { .jdock .tour-pill.muted .tp-again { display: none; } }
/* the globe needs no buttons: the written tip teaches it, and each part leaves once it's been done */
.globe-ctl { display: none !important; }
.globe-hint.did-turn .gh-turn, .globe-hint.did-turn .gh-sep, .globe-hint.did-zoom .gh-zoom, .globe-hint.did-zoom .gh-sep { display: none; }
.globe-hint.did-turn .gh-zoom::first-letter { text-transform: uppercase; }
.globe-hint.did-turn .gh-zoom { display: inline-block; }
/* sound can start on its own: no start screen — only a breath of dark while the globe appears */
.preloader.auto .pl-inner { opacity: 0; }
.preloader.auto { transition: opacity .6s var(--ease), visibility .6s; }
.tour-pill .tp-left { margin-left: .32em; } .tour-pill .tp-what { margin-right: .32em; }

/* ---------- the story's captions: a real voice, its words on the band beneath the picture ---------- */
.story-cap { position: fixed; z-index: 7; left: 0; right: 0; bottom: var(--dock-room, 64px); height: calc(var(--band, 20vh) - var(--dock-room, 64px));
  display: grid; align-content: center; justify-items: center; gap: 8px; padding: 6px var(--gutter); text-align: center; pointer-events: none;
  opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.story-cap.on { opacity: 1; transform: none; }
.story-cap .sc-t { margin: 0; max-width: 46ch; font-family: var(--serif); font-size: clamp(19px, 2vw, 30px); line-height: 1.22; color: var(--text); text-wrap: balance; }
.story-cap .sc-w { margin: 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-2); }
body.journey-gone .story-cap, .menu-open .story-cap, .st-open .story-cap { opacity: 0; }
@media (max-width: 700px) { .story-cap .sc-t { font-size: clamp(16px, 4.6vw, 20px); } .story-cap { gap: 6px; } }
.tour-pill[data-state='resume'] .tp-again { display: none; }

/* ---------- the story player: one little square in the corner — the live moment, pause, the time ---------- */
.jdock { align-items: center; bottom: 14px; }
.jdock .tour-pill.tp-mini { height: auto !important; padding: 0 !important; gap: 8px; align-items: center; background: none; border: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible; isolation: auto; }
.jdock .tour-pill.tp-mini::before, .jdock .tour-pill.tp-mini::after { display: none; }
.tp-sq { position: relative; width: 76px; height: 76px; flex: none; padding: 0; border-radius: 16px; overflow: hidden; cursor: pointer;
  background: #0c0e14; box-shadow: 0 12px 30px -12px #000; }
.tp-sq::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.16); pointer-events: none; }
.tp-media, .tp-media > img, .tp-media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-poster { opacity: .6; transition: opacity .4s; }
.tour-pill.live .tp-poster { opacity: 0; }
.tp-ring { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: visible; }
.tp-ring rect { fill: none; stroke: var(--gold-2); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0) * 100); transition: stroke-dashoffset .3s linear; filter: drop-shadow(0 0 4px rgba(242,184,75,.7)); }
.tp-icon { position: absolute; left: 50%; top: 42%; z-index: 3; width: 30px; height: 30px; transform: translate(-50%, -50%); border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: rgba(0,0,0,.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: opacity .3s, transform .3s; }
.tp-icon svg { width: 13px; height: 13px; }
.tour-pill.live:not([data-state='paused']) .tp-icon { opacity: .72; transform: translate(-50%, -50%) scale(.86); }
.tp-sq:hover .tp-icon { opacity: 1; }
.tp-time { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 14px 0 5px; text-align: center; font: 500 11px/1 var(--mono); letter-spacing: .02em;
  color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.75)); }
.tp-time:empty { display: none; }
.tp-label { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; cursor: pointer; }
.tp-label:empty { display: none; }
.tp-side { display: inline-flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.tp-ctl { display: inline-flex; flex-direction: column; gap: 6px; }
.tp-ctl button { height: 32px; min-width: 46px; padding: 0 11px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--text); background: rgba(12,14,20,.72); border: 1px solid var(--line-2);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: border-color .3s, color .3s, background .3s; }
.tp-ctl button:hover { border-color: rgba(242,184,75,.55); color: var(--gold-2); }
.tp-ctl .tp-speed { font-family: var(--mono); }
.tp-ctl .tp-speed.fast { background: var(--gold-2); color: var(--ink); border-color: transparent; }
.tp-ctl .tp-again svg { width: 14px; height: 14px; }
.tour-pill[data-state='done'] .tp-ctl, .tour-pill[data-state='resume'] .tp-ctl { display: none; }
.jdock .tour-pill.tp-mini .tp-again { height: 32px; }
@media (max-width: 700px) {
  .jdock { bottom: 10px; gap: 8px; }
  .tp-sq { width: 64px; height: 64px; border-radius: 14px; }
  .tp-ring rect { rx: 18; ry: 18; }
  .tp-ctl { flex-direction: row; gap: 5px; }
  .tp-ctl button { height: 28px; min-width: 40px; padding: 0 9px; font-size: 12px; }
  .tp-ctl .tp-l-long { display: none; }
  .tp-side .sound-toggle.docked { height: 31px !important; padding: 0 11px 0 9px !important; font-size: 12px; gap: 5px; }
  .jdock .tour-pill.muted .tp-again { display: inline-flex; }
}
/* giving opens soon */
.give-soon { display: flex; gap: 10px; margin-top: 22px; }
.give-soon .input { flex: 1; min-width: 0; }
@media (max-width: 480px) { .give-soon { flex-direction: column; } }
/* the sound button: top corner, beside Give — easy to find, never loud */
.nav-cta .sound-toggle { height: 34px; padding: 0 11px 0 9px; gap: 6px; font-size: 12px; font-weight: 500; letter-spacing: .01em;
  color: var(--text-2); background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav-cta .sound-toggle:hover { color: var(--text); border-color: rgba(255,255,255,.3); }
.nav-cta .sound-toggle.on { color: var(--text-2); border-color: rgba(255,255,255,.14); }
.nav-cta .sound-toggle.on .st-ico { color: var(--text-2); }
.nav-cta .sound-toggle .snd-eq i { opacity: .75; }
.nav-cta .sound-toggle:not(.on) { color: var(--text-2); border-color: rgba(242,184,75,.32); }
.nav-cta .sound-toggle .st-ico { width: 16px; height: 16px; }
@media (max-width: 700px) { .nav-cta .sound-toggle.on .st-label { display: none; } .nav-cta .sound-toggle { height: 32px; padding: 0 10px 0 8px; } }

/* ---------- story bars: the chapters, like Stories — they fill as it plays; tap one to go there ---------- */
.story-bars { position: fixed; z-index: 92; left: var(--gutter); right: var(--gutter); top: calc(var(--nav-h) + 2px); display: flex; gap: 4px;
  opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.story-bars.on { opacity: 1; pointer-events: auto; transform: none; }
.story-bars button { position: relative; flex: 1; height: 20px; padding: 0; background: none; border: 0; cursor: pointer; }
/* an orbit path: each chapter is a little planet, the path between them fills with light */
.story-bars button::before { content: ''; position: absolute; left: 15px; right: 2px; top: 9.5px; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.26), rgba(255,255,255,.1)); }
.story-bars i { position: absolute; left: 15px; top: 9px; height: 2px; width: calc((100% - 17px) * var(--k, 0)); border-radius: 2px; background: linear-gradient(90deg, rgba(242,184,75,.35), var(--gold-2)); transition: width .3s linear; }
.story-bars button.now i::after { content: ''; position: absolute; right: -3px; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: #fff6df; box-shadow: 0 0 6px 2px rgba(242,184,75,.8), 0 0 16px 4px rgba(242,184,75,.35); }
.story-bars b { position: absolute; left: 2px; top: 5px; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.38); background: rgba(7,8,12,.5); transition: background .4s, border-color .4s, box-shadow .4s, transform .4s var(--ease); }
.story-bars button.done b { border-color: transparent; background: radial-gradient(circle at 35% 30%, #fff3d6, var(--gold-2) 45%, #a8741c); box-shadow: 0 0 8px rgba(242,184,75,.55); }
.story-bars button.now b { border-color: var(--gold-2); background: radial-gradient(circle at 35% 30%, #fff3d6, var(--gold-2) 50%, #8a5e14); transform: scale(1.15); box-shadow: 0 0 10px rgba(242,184,75,.7); }
/* the chapter you're in wears a ring, with a moon going round it */
.story-bars button.now b::before { content: ''; position: absolute; left: 50%; top: 50%; width: 22px; height: 8px; margin: -4px 0 0 -11px; border-radius: 50%; border: 1px solid rgba(242,184,75,.7); transform: rotate(-22deg); }
.story-bars button.now b::after { content: ''; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 4px #fff; animation: sb-moon 2.6s linear infinite; }
@keyframes sb-moon { from { transform: rotate(0deg) translateX(11px) rotate(0deg); } to { transform: rotate(360deg) translateX(11px) rotate(-360deg); } }
.story-bars button:hover b { border-color: rgba(255,255,255,.75); transform: scale(1.2); }
.story-bars button:hover::before { background: rgba(255,255,255,.34); }
@media (prefers-reduced-motion: reduce) { .story-bars button.now b::after { animation: none; transform: translateX(11px); } }
body.journey-gone .story-bars, .menu-open .story-bars, .st-open .story-bars { opacity: 0; pointer-events: none; }
.story-bars.on ~ .hud, body:has(.story-bars.on) .hud { display: none; }
@media (max-width: 700px) { .story-bars { left: 12px; right: 12px; gap: 3px; } }

/* ---------- the opening line: "A 2-minute journey · Sound on", like a film's runtime, then it fades ---------- */
.opening-line { position: fixed; z-index: 8; left: 50%; top: calc(var(--nav-h) + (100svh - var(--band, 20vh) - var(--nav-h)) * 0.78); margin: 0;
  transform: translate(-50%, 8px); display: grid; justify-items: center; gap: 6px; text-align: center; pointer-events: none;
  opacity: 0; transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); white-space: nowrap; }
.opening-line.on { opacity: 1; transform: translate(-50%, 0); }
.opening-line .ol-a { font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2.2vw, 30px); color: var(--text); text-shadow: 0 2px 24px #000; }
.opening-line .ol-b { font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-2); text-shadow: 0 1px 12px #000; }

/* ---------- "Back to the story" when they've stepped out ---------- */
.tour-pill[data-state='exploring'] .tp-label { color: var(--gold-2); }
.tour-pill[data-state='exploring'] .tp-label::before { content: '▶ '; font-size: 11px; }
@media (max-width: 700px) { .tour-pill[data-state='exploring'] .tp-ctl { display: none; } .tp-label { font-size: 13px; } }
/* the opening line sits just under the story bars, like a caption for them */
.opening-line { top: calc(var(--nav-h) + 22px); display: flex; align-items: baseline; gap: 12px; }
.opening-line .ol-a { font-size: clamp(17px, 1.6vw, 22px); }
.opening-line .ol-b::before { content: '·'; margin-right: 12px; color: var(--text-3); letter-spacing: 0; }
@media (max-width: 420px) { .opening-line { gap: 8px; } .opening-line .ol-a { font-size: 16px; } .opening-line .ol-b { font-size: 9.5px; letter-spacing: .16em; } .opening-line .ol-b::before { margin-right: 8px; } }
/* sound nudge */
.story-cap .sc-mute { display: none; pointer-events: auto; margin-top: 2px; padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(242,184,75,.4);
  background: rgba(12,14,20,.6); color: var(--gold-2); font-size: 12.5px; font-weight: 500; cursor: pointer; }
.story-cap.muted .sc-mute { display: inline-block; }
.story-cap .sc-mute:hover { background: rgba(242,184,75,.14); }
.nav-cta .sound-toggle.nudge { border-color: rgba(242,184,75,.7); color: var(--gold-2); animation: snd-nudge 1.8s ease-in-out 4; }
@keyframes snd-nudge { 0%, 100% { box-shadow: 0 0 0 0 rgba(242,184,75,0); } 50% { box-shadow: 0 0 0 6px rgba(242,184,75,.18), 0 0 18px rgba(242,184,75,.35); } }
/* words written into the page for search engines (the page's script replaces them on load) */
.prerender { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: normal; }
/* dashboard: Google sign-in first, email and password tucked away */
.adm-google { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: #fff; color: #1f1f1f; }
.adm-google:hover { background: #f2f2f2; }
.adm-google svg { flex: none; }
.adm-alt { margin-top: 6px; }
.adm-alt summary { cursor: pointer; text-align: center; font-size: 13px; color: var(--text-3); padding: 6px 0; list-style: none; }
.adm-alt summary::-webkit-details-marker { display: none; }
.adm-alt[open] summary { margin-bottom: 10px; }

/* the little square shows it can open big: arrows in its corner */
.tp-box { position: relative; display: inline-flex; flex: none; }
.tp-expand { position: absolute; z-index: 3; top: -7px; right: -7px; width: 26px; height: 26px; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--gold-2); color: #1a1206; border: 2px solid rgba(7,8,12,.85); box-shadow: 0 2px 10px rgba(0,0,0,.45), 0 0 10px rgba(242,184,75,.35); transition: transform .25s var(--ease); }
.tp-expand svg { width: 13px; height: 13px; }
.tp-expand:hover, .tp-expand:focus-visible { transform: scale(1.12); }
.tp-expand::after { content: ''; position: absolute; inset: -9px; } /* an easy target for a thumb */
.tp-mini[data-state='off'] .tp-expand { display: none; }
@media (max-width: 700px) { .tp-expand { width: 24px; height: 24px; top: -6px; right: -6px; } .tp-expand svg { width: 12px; height: 12px; } }

/* × on founder and project pages: back to where they came from */
.page-x { position: fixed; z-index: 79; right: var(--gutter); top: calc(var(--nav-h) + 14px); width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: var(--text); background: rgba(10,11,16,.55); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 20px rgba(0,0,0,.35); transition: transform .25s var(--ease), border-color .25s; }
.page-x svg { width: 20px; height: 20px; }
.page-x:hover, .page-x:focus-visible { transform: scale(1.08) rotate(90deg); border-color: rgba(242,184,75,.6); }
.menu-open .page-x { display: none; }
@media (max-width: 700px) { .page-x { width: 42px; height: 42px; top: calc(var(--nav-h) + 10px); } }

/* home: sound button in the bottom corner above the little video; "Projects ↓" up top next to Give */
.sound-toggle.corner { position: fixed !important; left: var(--gutter) !important; right: auto !important; top: auto !important; bottom: calc(18px + 76px + 12px) !important; z-index: 95 !important; height: 34px !important; padding: 0 12px 0 10px !important; gap: 6px; font-size: 12px; font-weight: 500; transition: opacity .3s, bottom .4s var(--ease); }
.sound-toggle.corner .st-ico { width: 16px; height: 16px; }
.sound-toggle.corner.on .st-label { display: none; }
.menu-open .sound-toggle.corner, .st-open .sound-toggle.corner { opacity: 0; pointer-events: none; }
@media (max-width: 700px) { .sound-toggle.corner { left: 10px !important; bottom: calc(12px + 64px + 12px) !important; height: 32px !important; padding: 0 10px 0 8px !important; } }
.nav-cta .journey-tools { position: static; top: auto; right: auto; bottom: auto; transition: opacity .3s; }
.nav-cta .journey-tools .btn { height: 34px; padding: 0 14px; font-size: 12.5px; background: rgba(12,14,20,.5); }
.nav-cta .journey-tools.off { opacity: 0; pointer-events: none; width: 0; overflow: hidden; margin-left: -10px; }
.nav-cta .journey-tools .jt-long { display: none; } .nav-cta .journey-tools .jt-short { display: inline; }
@media (max-width: 700px) { .nav-cta .journey-tools .btn { height: 32px; padding: 0 11px; font-size: 12px; } }
@media (max-width: 360px) { .nav-cta .journey-tools { display: none; } }

/* stories: the page behind never scrolls or bounces, and each swipe lands on exactly one moment */
html.st-open, html.st-open body { overflow: hidden; overscroll-behavior: none; }
.st { overscroll-behavior: none; touch-action: pan-y; }
.st-slide { scroll-snap-stop: always; }
/* Moments on a phone: the Wall / World map / Stories switch on top, the film button just under it, nothing overlapping */
.mo-views button { white-space: nowrap; }
@media (max-width: 700px) {
  .mo-views { top: calc(var(--nav-h) + 8px); max-width: calc(100vw - 20px); }
  .mo-views button { padding-left: 12px; padding-right: 12px; font-size: 13px; }
  .mo-film-btn { left: 50%; right: auto; transform: translateX(-50%); top: calc(var(--nav-h) + 62px); white-space: nowrap; }
}

/* short home page: the minute film's captions sit in the bottom row, right beside the little video */
body.short-home .story-cap { position: fixed; height: 76px; align-content: center; justify-items: start; gap: 3px; left: calc(var(--gutter) + 76px + 12px + 46px + 12px); right: 96px; top: auto; bottom: 18px;
  transform: none; padding: 0; text-align: left; z-index: 94; }
body.short-home .story-cap .sc-t { font-family: var(--sans, inherit); font-size: 13.5px; line-height: 1.3; max-width: 52ch; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 8px rgba(0,0,0,.8); }
body.short-home .story-cap .sc-w { font-size: 9.5px; }
body.short-home .story-cap .sc-mute { display: none; } /* the glowing sound button right above says it */
body.short-home.journey-gone .story-cap.on { opacity: 1; }
body.short-home .tour-pill .tp-label { display: none; }
@media (max-width: 700px) { body.short-home .story-cap { left: calc(10px + 64px + 8px + 42px + 8px); right: 66px; bottom: 12px; height: 64px; } body.short-home .story-cap .sc-t { font-size: 12.5px; } }

/* ---------- the galaxy: after the globe, the home page is a flight through space ---------- */
.galaxy-sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .8s ease; }
.galaxy-sky.on { opacity: 1; }
body.galaxy .after { background: transparent; }
body.galaxy .gx-part { will-change: transform, opacity; transform-origin: 50% 60%; transition: none !important; }
body.galaxy .card-media img, body.galaxy .feature-media img, body.galaxy .feature-media video { transform-origin: 50% 55%; will-change: transform; transition: none; }
body.galaxy .invite { background: radial-gradient(60% 60% at 50% 40%, rgba(242,184,75,.14), transparent 70%); }
body.galaxy .section { background: transparent; }
/* "Our promise" becomes a constellation: each promise a star on a gold line */
body.galaxy .paper { color: var(--text); background: transparent; }
body.galaxy .paper .eyebrow { color: var(--text-3); }
body.galaxy .paper em, body.galaxy .paper .em { color: var(--gold-2); }
body.galaxy .paper .lede, body.galaxy .paper .promise p { color: var(--text-2); }
body.galaxy .promise-list { position: relative; border: 0; display: grid; gap: 16px; padding-left: 34px; }
body.galaxy .promise-list::before { content: ''; position: absolute; left: 9px; top: 18px; bottom: 18px; width: 1px; background: linear-gradient(rgba(242,184,75,.0), rgba(242,184,75,.55) 12%, rgba(242,184,75,.55) 88%, rgba(242,184,75,0)); }
body.galaxy .promise { position: relative; border: 1px solid rgba(255,255,255,.08); border-radius: 20px; padding: clamp(20px, 3vw, 30px) clamp(20px, 3vw, 32px);
  background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
body.galaxy .promise::before { content: ''; position: absolute; left: -31px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3d6, var(--gold-2) 50%, #8a5e14); box-shadow: 0 0 12px rgba(242,184,75,.8), 0 0 30px rgba(242,184,75,.35); }
body.galaxy .promise .pn { color: var(--gold-2); }
body.galaxy .big-claim { background: linear-gradient(135deg, rgba(242,184,75,.12), rgba(255,255,255,.03)); border: 1px solid rgba(242,184,75,.25); color: var(--text); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
/* the corner sound button turns into a small round icon once you're past the globe, so it covers less */
body.journey-gone .sound-toggle.corner { width: 34px !important; padding: 0 !important; justify-content: center; }
body.journey-gone .sound-toggle.corner .st-label, body.journey-gone .sound-toggle.corner .snd-eq { display: none; }
@media (prefers-reduced-motion: reduce) { body.galaxy .gx-part { transform: none !important; opacity: 1 !important; filter: none !important; } }
/* the photo burst between the globe and the projects */
.gx-fly { position: fixed; inset: 0; z-index: 5; pointer-events: none; perspective: 900px; opacity: 0; transition: opacity .25s; }
.gx-fly.on { opacity: 1; }
.gx-shot { position: absolute; left: 50%; top: 46%; width: min(30vw, 260px); aspect-ratio: 4 / 3; padding: 0; border: 0; border-radius: 12px; overflow: hidden; opacity: 0; cursor: pointer; pointer-events: none;
  background: #111; box-shadow: 0 10px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(242,184,75,.25); will-change: transform, opacity; }
.gx-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gx-play { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; background: rgba(10,11,16,.6); border: 1px solid rgba(255,255,255,.4); backdrop-filter: blur(6px); }
.gx-play::after { content: ''; position: absolute; left: 15px; top: 11px; border-left: 12px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
@media (max-width: 700px) { .gx-shot { width: 46vw; } }

/* ---------- zoom, not scroll: every part of the home page is a slide you fly into and through ---------- */
.after.gz { position: relative; }
.gz-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.gz-slide { position: absolute; left: 0; top: 0; width: 100%; visibility: hidden; opacity: 0; will-change: transform, opacity; backface-visibility: hidden; }
.gz-slide > * { margin: 0 auto !important; padding-top: calc(var(--nav-h) + clamp(28px, 5vw, 64px)) !important; padding-bottom: clamp(96px, 12vw, 140px) !important; }

/* cards that fly past like the photos (zoom mode) */
.gz-card { position: relative; visibility: hidden; opacity: 0; will-change: transform, opacity; transition: none !important; transform-origin: 50% 50%; backface-visibility: hidden; }
.after.gz .promise-list::before { display: none; }
.after.gz .promise::before { left: -22px; }
.after.gz .promise-list { padding-left: 0; }
/* the new logo (globe + cross + serif name) needs a little more height in the top bar for its lettering to read */
.nav .brand .brand-logo { height: 62px; }
@media (max-width: 760px) { .nav .brand .brand-logo { height: 54px; } }
@media (max-width: 380px) { .nav .brand .brand-logo { height: 46px; } }

/* the fly-over video you zoom into and through */
.gz-flyover { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; opacity: 0; visibility: hidden; pointer-events: none; will-change: transform, opacity; }
.gz-flyover.on { visibility: visible; }
.gz-flyover video { width: min(100vw, 177.8vh); aspect-ratio: 16 / 9; object-fit: cover; border-radius: 18px; box-shadow: 0 30px 120px rgba(0,0,0,.7), 0 0 0 1px rgba(242,184,75,.22); }
@media (max-width: 700px) { .gz-flyover video { width: 100vw; height: 82vw; aspect-ratio: auto; border-radius: 14px; } } /* a tall crop would blow a 720p video up more than twice its size and turn it to mush */

/* the opening words fade out as one piece when you move on (no half-hidden letters sliding away) */
.act { transition: opacity .35s ease; }
.act:not(.on) { opacity: 0; }
.act:not(.on) .w > span, .act:not(.on) .fade { transition-duration: 0s; transition-delay: .35s; }
.act.on { opacity: 1; }

/* the line shown while the photos fly past */
.gx-line { position: fixed; z-index: 6; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.96); width: min(88vw, 760px); margin: 0; text-align: center; pointer-events: none;
  font-family: var(--serif); font-size: clamp(30px, 5.2vw, 68px); line-height: 1.04; letter-spacing: -.01em; color: var(--text); text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0,0,0,.9), 0 0 60px rgba(0,0,0,.8); opacity: 0; transition: opacity .5s ease, transform .7s var(--ease); }
.gx-line em { color: var(--gold-2); font-style: italic; }
.gx-line.on { opacity: 1; transform: translate(-50%, -50%); }
.menu-open .gx-line, .st-open .gx-line { opacity: 0; }

.gx-line::before { content: ''; position: absolute; inset: -40% -18%; z-index: -1; background: radial-gradient(closest-side, rgba(5,6,10,.82), rgba(5,6,10,.55) 55%, transparent); }
@media (max-width: 700px) { .gx-shot { width: 38vw; } }

.gx-line small { display: block; margin-top: 18px; font-family: var(--mono); font-size: clamp(10.5px, 1.1vw, 13px); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-2); font-style: normal; }

/* "Our promise" as words, not cards: each promise stands alone in the middle while photos fly past */
.after.gz .promise { display: block; max-width: 780px; margin: 0 auto; padding: 0 20px; text-align: center; border: 0; border-radius: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.after.gz .promise::before { display: none; }
.after.gz .promise .pn { display: block; margin-bottom: 14px; }
.after.gz .promise h3 { font-size: clamp(32px, 4.6vw, 64px); line-height: 1.04; text-wrap: balance; text-shadow: 0 2px 30px rgba(0,0,0,.9); }
.after.gz .promise p { margin: 18px auto 0; max-width: 46ch; font-size: clamp(16px, 1.5vw, 20px); text-shadow: 0 1px 20px rgba(0,0,0,.9); }
.after.gz .promise-list { display: block; }
.gx-fly2 { z-index: 4; }
.gx-fly2 .gx-shot { width: min(24vw, 220px); }
@media (max-width: 700px) { .gx-fly2 .gx-shot { width: 34vw; } }
@media (max-width: 700px) { .after.gz .promise p { max-width: 27ch; } .gx-fly2 .gx-shot { width: 28vw; } }

/* × on the little film, and the small button that brings it back */
.tp-close { position: absolute; z-index: 3; top: -7px; left: -7px; width: 24px; height: 24px; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(12,14,20,.92); color: var(--text); border: 1px solid rgba(255,255,255,.3); box-shadow: 0 2px 10px rgba(0,0,0,.45); }
.tp-close svg { width: 11px; height: 11px; }
.tp-close::after { content: ''; position: absolute; inset: -9px; }
.tp-mini[data-state='off'] .tp-close { display: none; }
.tp-reopen { display: none; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 10px; border-radius: 999px; cursor: pointer; font-size: 12px; font-weight: 500; color: var(--text-2);
  background: rgba(12,14,20,.72); border: 1px solid var(--line-2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); pointer-events: auto; }
.tp-reopen svg { width: 12px; height: 12px; }
body.film-off .tp-reopen { display: inline-flex; }
body.film-off .jdock .tour-pill, body.film-off .story-cap { display: none !important; }
body.film-off .sound-toggle.corner { bottom: calc(18px + 34px + 10px) !important; }
@media (max-width: 700px) { body.film-off .sound-toggle.corner { bottom: calc(12px + 34px + 10px) !important; } }
.gx-line::before { inset: -130% -30%; background: radial-gradient(ellipse closest-side, rgba(5,6,10,.8), rgba(5,6,10,.5) 45%, rgba(5,6,10,.18) 75%, transparent); }
/* headings in the zoom are plain words (an unrelated ".split" card style was drawing a box around them) */
.after.gz .section-head, .after.gz .section-head.split { display: block; padding: 0 20px; border: 0; border-radius: 0; background: none; text-align: center; max-width: 820px; margin-left: auto; margin-right: auto; }
.after.gz .section-head .eyebrow { justify-content: center; display: inline-flex; }
.after.gz .section-head h2 { text-shadow: 0 2px 30px rgba(0,0,0,.9); }
.after.gz .section-head .lede { margin: 20px auto 0; max-width: 46ch; text-shadow: 0 1px 20px rgba(0,0,0,.9); }
@media (max-width: 700px) { .after.gz .section-head .lede { max-width: 30ch; } }
@media (max-width: 700px) { .gx-fly:not(.gx-fly2) .gx-shot { width: 30vw; } }

/* the two small switches in the bottom corner: sound and Calm view */
.corner-tools { position: fixed; z-index: 95; left: var(--gutter); bottom: calc(18px + 76px + 12px); display: flex; align-items: center; gap: 8px; transition: opacity .3s, bottom .4s var(--ease); }
.corner-tools .sound-toggle.corner { position: static !important; left: auto !important; bottom: auto !important; }
.calm-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 10px; border-radius: 999px; cursor: pointer; font-size: 12px; font-weight: 500; color: var(--text-2);
  background: rgba(12,14,20,.72); border: 1px solid var(--line-2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color .3s, color .3s; }
.calm-btn svg { width: 15px; height: 15px; }
.calm-btn:hover { color: var(--text); border-color: rgba(255,255,255,.4); }
.calm-btn.on { color: var(--text); border-color: rgba(242,184,75,.5); }
.calm-btn.on svg { color: var(--gold-2); }
body.journey-gone .calm-btn:not(.on) { width: 34px; padding: 0; justify-content: center; }
body.journey-gone .calm-btn:not(.on) span { display: none; }
body.film-off .corner-tools { bottom: calc(18px + 34px + 10px); }
.menu-open .corner-tools, .st-open .corner-tools { opacity: 0; pointer-events: none; }
@media (max-width: 700px) { .corner-tools { left: 10px; bottom: calc(12px + 64px + 12px); gap: 6px; } .calm-btn { height: 32px; padding: 0 10px 0 8px; font-size: 11.5px; } body.film-off .corner-tools { bottom: calc(12px + 34px + 10px); } body.journey-gone .calm-btn:not(.on) { width: 32px; } }

/* Calm view: the story's lines as still sections */
.fb-say { text-align: center; }
.fb-say h2 { max-width: 18ch; margin: 0 auto; text-wrap: balance; }
.fb-say h2 em { color: var(--gold-2); }
.fb-steps { margin-top: 18px; font-family: var(--mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-2); }

/* the way back out of the globe after stepping inside */
.globe-out { position: fixed; z-index: 96; left: 50%; top: calc(var(--nav-h) + 14px); transform: translate(-50%, -8px); height: 40px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: #1a1206; background: var(--gold-2); border: 0; box-shadow: 0 8px 30px rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s var(--ease); white-space: nowrap; }
.globe-out.on { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.menu-open .globe-out, .st-open .globe-out { opacity: 0; pointer-events: none; }

/* a project with no gifts yet reads as "just launched", not as an empty 0% */
.baro-pct.baro-new { color: var(--gold-2); letter-spacing: .04em; }
.baro.fresh .baro-track::before { content: ''; position: absolute; left: 0; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 12px rgba(242,184,75,.9), 0 0 28px rgba(242,184,75,.4); animation: fresh-pulse 2.4s ease-in-out infinite; }
@keyframes fresh-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .6; } }
.r-pct.r-new { font-size: .62em; letter-spacing: .02em; }
@media (prefers-reduced-motion: reduce) { .baro.fresh .baro-track::before { animation: none; } }