:root{
  --ink:#050b10;
  --deep:#08131b;
  --river:#0c2029;
  --panel:#0b1a22;
  --teal:#1f5f68;
  --teal-2:#2c8a90;
  --glow:#7fd8d4;
  --silver:#d6e7e9;
  --text:#c6d8db;
  --muted:#7d979b;
  --gold:#dcb977;
  --gold-soft:#e7cd97;
  --line:rgba(220,185,119,0.22);
  --line-soft:rgba(127,216,212,0.14);
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--ink);
  color:var(--text);
  font-family:'Inter',sans-serif;
  font-weight:300;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}
body.locked{overflow:hidden;height:100vh}
h1,h2,h3,h4,.serif{font-family:'Cormorant Garamond',serif;font-weight:400;line-height:1.12}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* film grain + vignette, fixed over everything */
.grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 30%,transparent 45%,rgba(0,0,0,.55) 100%);
}

.label{
  font-size:.72rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--gold);font-weight:400;font-family:'Inter',sans-serif;
}
.container{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.reveal{opacity:0;transform:translateY(38px);transition:opacity 1.4s ease,transform 1.4s cubic-bezier(.16,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{transition:none;opacity:1;transform:none}}

/* ===== ENTER GATE ===== */
#gate{
  position:fixed;inset:0;z-index:120;background:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:32px;transition:opacity 1.6s ease,visibility 1.6s ease;
}
#gate.hidden{opacity:0;visibility:hidden;pointer-events:none}
#gate .gate-wave{position:absolute;inset:0;opacity:.5}
#gate .gate-inner{position:relative;z-index:2;max-width:640px}
#gate .label{margin-bottom:26px;animation:fadeUp 1.6s ease both}
#gate h1{font-size:clamp(3rem,9vw,6.4rem);letter-spacing:.02em;color:var(--silver);margin-bottom:10px;animation:fadeUp 1.8s .1s ease both}
#gate .sub{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(1.1rem,2.4vw,1.5rem);color:var(--muted);margin-bottom:44px;animation:fadeUp 1.8s .25s ease both}
.enter-btn{
  display:inline-flex;align-items:center;gap:14px;cursor:pointer;
  padding:16px 40px;border:1px solid var(--line);border-radius:100px;
  background:rgba(220,185,119,0.04);color:var(--gold-soft);
  font-size:.78rem;letter-spacing:.32em;text-transform:uppercase;
  transition:.5s ease;animation:fadeUp 1.8s .4s ease both,pulse 4s 2s ease-in-out infinite;
}
.enter-btn:hover{background:rgba(220,185,119,0.12);border-color:var(--gold);color:#fff;letter-spacing:.36em}
.enter-btn svg{width:15px;height:15px}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(220,185,119,0.18)}50%{box-shadow:0 0 44px 2px rgba(220,185,119,0.06)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* ===== AUDIO TOGGLE ===== */
#audioToggle{
  position:fixed;bottom:26px;right:26px;z-index:90;
  display:flex;align-items:center;gap:11px;cursor:pointer;
  padding:11px 18px;border:1px solid var(--line-soft);border-radius:100px;
  background:rgba(8,19,27,0.72);backdrop-filter:blur(12px);
  color:var(--muted);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  transition:.4s ease;opacity:0;transform:translateY(20px);
}
#audioToggle.show{opacity:1;transform:none}
#audioToggle:hover{border-color:var(--line);color:var(--silver)}
.eq{display:flex;align-items:flex-end;gap:2.5px;height:15px}
.eq span{width:2.5px;background:var(--glow);height:100%;border-radius:2px;animation:eq 1s ease-in-out infinite}
.eq span:nth-child(2){animation-delay:.25s}.eq span:nth-child(3){animation-delay:.5s}.eq span:nth-child(4){animation-delay:.15s}
@keyframes eq{0%,100%{transform:scaleY(.32)}50%{transform:scaleY(1)}}
#audioToggle.paused .eq span{animation-play-state:paused;transform:scaleY(.32)}

/* ===== NAV ===== */
nav{
  position:fixed;top:0;left:0;right:0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 32px;transition:.5s ease;
  background:linear-gradient(to bottom,rgba(5,11,16,.82),rgba(5,11,16,0));
}
nav.solid{background:rgba(5,11,16,.9);backdrop-filter:blur(14px);padding:15px 32px;border-bottom:1px solid rgba(220,185,119,.1)}
nav .brand{font-family:'Cormorant Garamond',serif;font-size:1.32rem;letter-spacing:.14em;color:var(--silver);display:flex;align-items:center;gap:12px}
nav .brand span{color:var(--gold)}
nav .brand .chnum{font-size:.6rem;letter-spacing:.18em;color:var(--muted);font-family:'Inter',sans-serif;border:1px solid var(--line-soft);padding:3px 9px;border-radius:100px}
nav .links{display:flex;gap:34px;align-items:center}
nav .links a{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);transition:.3s}
nav .links a:hover{color:var(--gold-soft)}
nav .links a.cta{border:1px solid var(--line);padding:9px 20px;border-radius:100px;color:var(--gold-soft)}
nav .links a.cta:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
@media(max-width:860px){nav .links{display:none}}

/* ===== SECTION SHELL ===== */
section{position:relative;padding:120px 0}
.sec-head{max-width:760px;margin-bottom:56px}
.sec-head .label{display:block;margin-bottom:22px}
.sec-head h2{font-size:clamp(2.2rem,5vw,3.6rem);color:var(--silver);margin-bottom:18px}
.sec-head p{color:var(--muted);font-size:1.02rem;max-width:600px}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);margin:0 auto;max-width:var(--maxw)}

::selection{background:rgba(220,185,119,.28);color:#fff}

/* ===== MAP MARKERS (shared) ===== */
@keyframes markerPulse{0%{r:4;opacity:.9}70%{r:22;opacity:0}100%{r:22;opacity:0}}
.pulse-ring{animation:markerPulse 2.6s ease-out infinite;transform-origin:center}
.flow-line{stroke-dasharray:3 7;animation:flowDash 3.4s linear infinite}
@keyframes flowDash{to{stroke-dashoffset:-40}}

/* ===== FOOTER ===== */
footer{background:var(--ink);padding:80px 0 50px;border-top:1px solid rgba(220,185,119,.1)}
.foot-grid{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:34px}
.foot-brand{font-family:'Cormorant Garamond',serif;font-size:2.2rem;color:var(--silver);letter-spacing:.06em}
.foot-brand span{color:var(--gold)}
.foot-brand .sub{font-family:'Inter',sans-serif;font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-top:10px}
.foot-links{display:flex;gap:28px;flex-wrap:wrap}
.foot-links a{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:.3s}
.foot-links a:hover{color:var(--gold-soft)}
.foot-fine{margin-top:56px;font-size:.68rem;color:var(--muted);letter-spacing:.06em;opacity:.7}