:root{
  --noon:#e0a860;
  --dusk:#c96a5a;
  --night:#1b2140;
  --cycle:#e0a860;
  --cycle-deep:#302117;
  --accent:#f4d487;
  --accent-hot:#c96a5a;
  --ink:#111018;
  --text:#fff4dc;
  --muted:#d8c6a8;
  --line:rgba(255,236,190,.24);
  --line-strong:rgba(255,236,190,.48);
  --panel:rgba(20,18,21,.74);
  --panel-strong:rgba(17,16,22,.9);
  --shadow:rgba(0,0,0,.42);
  --phase:0.18;
  --sun-x:62%;
  --sun-y:18%;
  --star-opacity:0;
  --shimmer-opacity:.62;
  --font-display:'Spectral', serif;
  --font-body:'Manrope', sans-serif;
  --font-mono:'Space Mono', monospace;
  --pad:clamp(18px,4.8vw,72px);
  --max:1360px;
  --ease:cubic-bezier(.2,.75,.18,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;background:#120f13;color-scheme:dark}
html{scrollbar-color:var(--accent) #0b0d16;scrollbar-width:thin}
html::-webkit-scrollbar{width:10px}
html::-webkit-scrollbar-track{background:#0b0d16}
html::-webkit-scrollbar-thumb{background:linear-gradient(var(--noon),var(--dusk),var(--night));border:2px solid #0b0d16;border-radius:999px}
body{
  margin:0;
  overflow-x:hidden;
  background:
    radial-gradient(52rem 36rem at 84% 2%, color-mix(in srgb, var(--cycle) 18%, transparent), transparent 66%),
    radial-gradient(36rem 42rem at -8% 48%, rgba(201,106,90,.16), transparent 70%),
    linear-gradient(180deg, var(--cycle-deep), #111018 38rem, #0a0e19 100%);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.62;
  font-weight:420;
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:rgba(244,212,135,.22);
}

body.no-webgl #duneCanvas{display:none}
body.no-webgl .shader-fallback{display:block}

::selection{background:var(--accent);color:#19130f}
a{color:var(--accent);text-decoration:none}
a:hover{color:#fff8df}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
h1,h2,h3,p{margin-block-start:0}
h1,h2,h3{font-family:var(--font-display);font-weight:300;line-height:1.02;text-wrap:balance}
h2{font-size:clamp(2.35rem,6vw,5.8rem);font-style:italic;letter-spacing:-.025em}
h3{font-size:clamp(1.35rem,2vw,2rem);font-style:italic;letter-spacing:-.012em}
p{text-wrap:pretty}
button,input{font:inherit}

.skip{
  position:absolute;left:-999px;top:12px;z-index:1000;
  background:var(--accent);color:#111018;padding:.75rem 1rem;
  font-family:var(--font-mono);font-size:.78rem;
}
.skip:focus{left:12px;position:fixed}

.grain{
  position:fixed;inset:-60%;z-index:80;pointer-events:none;opacity:.055;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.85'/%3E%3C/svg%3E");
  animation:grain 8s steps(5,end) infinite;
}
@keyframes grain{
  0%,100%{transform:translate3d(0,0,0)}
  25%{transform:translate3d(-4%,2%,0)}
  50%{transform:translate3d(3%,-5%,0)}
  75%{transform:translate3d(5%,4%,0)}
}

.load-in{opacity:0;transform:translateY(22px);animation:loadIn .95s var(--ease) forwards;animation-delay:var(--delay,0s)}
@keyframes loadIn{to{opacity:1;transform:none}}
.reveal{opacity:1;transform:none;transition:opacity .85s var(--ease),transform .85s var(--ease),filter .85s var(--ease)}
.reveal:not(.in){filter:saturate(.9)}
.reveal.in{filter:saturate(1.04)}

.site-header{
  position:absolute;inset:0 0 auto;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:clamp(14px,2vw,24px) var(--pad);
}
.site-header::after{
  content:"";position:absolute;left:var(--pad);right:var(--pad);bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-strong),transparent);
}
.brand{
  min-height:44px;display:inline-flex;align-items:center;gap:.65rem;
  color:#fff8df;text-transform:uppercase;font-family:var(--font-mono);
  font-size:.78rem;letter-spacing:0;
}
.brand-mark{
  width:2.15rem;height:2.15rem;border:1px solid var(--line-strong);border-radius:50%;
  display:grid;place-items:center;background:rgba(17,16,24,.5);box-shadow:0 0 28px color-mix(in srgb,var(--cycle) 32%,transparent);
}
.brand-mark i{
  width:1.15rem;height:.55rem;border-radius:50% 50% 0 0;
  border-top:2px solid var(--accent);display:block;position:relative;
}
.brand-mark i::after{content:"";position:absolute;left:50%;top:-.38rem;width:.42rem;height:.42rem;border-radius:50%;background:var(--accent);box-shadow:0 0 16px var(--accent)}
.site-header nav{display:flex;align-items:center;gap:.15rem;flex-wrap:wrap;justify-content:flex-end}
.site-header nav a{
  min-height:44px;display:inline-flex;align-items:center;padding:0 clamp(.55rem,1.4vw,1rem);
  color:#f8ecd3;font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;
  border-bottom:1px solid transparent;
}
.site-header nav a:hover,.site-header nav a:focus-visible{border-bottom-color:var(--accent);color:#fff8df}

.hero{
  min-height:100svh;position:relative;overflow:hidden;display:grid;align-items:end;
  background:#161018;border-bottom:1px solid var(--line);
  isolation:isolate;
}
#duneCanvas,.shader-fallback,.hero-vignette,.sand-scan,.star-dome,.heat-veil{position:absolute;inset:0;width:100%;height:100%}
#duneCanvas{display:block}
.shader-fallback{
  display:none;
  background:
    radial-gradient(circle at var(--sun-x) var(--sun-y), rgba(255,250,218,.78), transparent 7.4rem),
    radial-gradient(58rem 34rem at calc(var(--sun-x) + 8%) calc(var(--sun-y) + 22%), color-mix(in srgb,var(--cycle) 36%,transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb,var(--cycle) 86%,#261b1a) 0 38%, var(--cycle-deep) 51%, #0d101b 51.2% 100%),
    repeating-linear-gradient(176deg, transparent 0 20px, rgba(255,244,220,.05) 21px 22px, transparent 23px 48px);
}
.shader-fallback::before,
.shader-fallback::after{
  content:"";position:absolute;inset:auto -12% 0;height:48%;pointer-events:none;
}
.shader-fallback::before{
  background:
    radial-gradient(128% 46% at 21% 4%, transparent 32%, color-mix(in srgb,var(--cycle) 78%,#8b4e31) 33% 42%, transparent 43%),
    radial-gradient(122% 46% at 77% 18%, transparent 34%, rgba(103,69,50,.96) 35% 47%, transparent 48%),
    radial-gradient(94% 36% at 46% 44%, transparent 33%, color-mix(in srgb,var(--cycle) 58%,#1b1420) 34% 45%, transparent 46%),
    radial-gradient(130% 42% at 62% 66%, transparent 37%, rgba(16,17,28,.9) 38% 55%, transparent 56%),
    linear-gradient(180deg, transparent, rgba(10,13,24,.98) 86%);
  filter:blur(.15px);
}
.shader-fallback::after{
  opacity:.46;mix-blend-mode:screen;
  background:
    repeating-linear-gradient(168deg, transparent 0 13px, rgba(255,236,190,.2) 14px 16px, transparent 17px 28px),
    repeating-linear-gradient(13deg, transparent 0 26px, rgba(255,255,255,.045) 27px 28px, transparent 29px 54px),
    linear-gradient(180deg, transparent, rgba(0,0,0,.58));
}
.star-dome{
  z-index:1;pointer-events:none;opacity:var(--star-opacity);mix-blend-mode:screen;
  background:
    radial-gradient(circle at 12% 19%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 24% 38%, #dfe7ff 0 1px, transparent 1.5px),
    radial-gradient(circle at 42% 15%, #fff 0 1px, transparent 1.4px),
    radial-gradient(circle at 61% 31%, #fff4dc 0 1px, transparent 1.45px),
    radial-gradient(circle at 74% 12%, #dbe5ff 0 1px, transparent 1.4px),
    radial-gradient(circle at 88% 42%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 52% 48%, rgba(219,229,255,.8) 0 1px, transparent 1.4px);
  background-size:31rem 24rem,27rem 22rem,34rem 28rem,23rem 21rem,39rem 30rem,29rem 25rem,43rem 31rem;
  animation:starDrift 52s linear infinite;
}
.heat-veil{
  z-index:4;pointer-events:none;opacity:var(--shimmer-opacity);mix-blend-mode:overlay;
  background:
    repeating-linear-gradient(90deg, transparent 0 16px, rgba(255,244,220,.055) 17px 18px, transparent 19px 42px),
    radial-gradient(28rem 13rem at var(--sun-x) 53%, rgba(255,244,220,.18), transparent 70%);
  filter:blur(.8px);
  animation:heatVeil 5.5s ease-in-out infinite alternate;
}
@keyframes starDrift{to{transform:translate3d(-4rem,2rem,0)}}
@keyframes heatVeil{
  from{transform:translate3d(-.6rem,0,0) skewX(-1.5deg)}
  to{transform:translate3d(.6rem,.2rem,0) skewX(1.5deg)}
}
.hero-vignette{
  z-index:5;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(13,10,15,.9), rgba(13,10,15,.08) 30%, rgba(13,10,15,.28) 61%, rgba(13,10,15,.95)),
    radial-gradient(48rem 26rem at 14% 76%, rgba(0,0,0,.64), transparent 72%),
    radial-gradient(46rem 30rem at 76% 42%, color-mix(in srgb, var(--cycle) 24%, transparent), transparent 80%);
}
.sand-scan{
  z-index:6;pointer-events:none;opacity:.34;
  background:
    linear-gradient(105deg,transparent 0 44%,rgba(255,255,255,.07) 44.05%,transparent 44.22% 72%,rgba(255,255,255,.045) 72.05%,transparent 72.22%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 5px);
  mix-blend-mode:overlay;
}
.horizon-notes{
  position:absolute;z-index:7;left:var(--pad);right:var(--pad);top:50.5%;
  display:flex;justify-content:space-between;gap:1rem;pointer-events:none;
  color:rgba(255,244,220,.44);font-family:var(--font-mono);font-size:.62rem;text-transform:uppercase;
  border-top:1px solid rgba(255,244,220,.18);
}
.horizon-notes span{transform:translateY(-1.3rem)}

.hero-grid{
  position:relative;z-index:6;width:min(100%,var(--max));margin:0 auto;
  padding:8.2rem var(--pad) clamp(7.8rem,12vh,10.6rem);
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(18rem,.47fr);gap:clamp(2rem,5vw,5rem);align-items:end;
}
.eyebrow,.section-kicker,.panel-kicker{
  color:var(--accent);font-family:var(--font-mono);font-size:.75rem;text-transform:uppercase;letter-spacing:0;
}
.eyebrow span{color:#fff4dc99;margin-left:.8rem}
.hero h1{
  margin:.6rem 0 1rem;color:#fff7df;text-transform:uppercase;
  font-size:clamp(4.25rem,14.2vw,13.8rem);line-height:.78;text-shadow:0 1.4rem 4rem rgba(0,0,0,.46);
}
.hero h1 span,.hero h1 em{display:block}
.hero h1 em{
  font-style:italic;text-transform:none;color:var(--accent);
  font-size:.62em;line-height:.92;margin-left:clamp(1.4rem,8vw,8rem);
  text-shadow:0 0 32px color-mix(in srgb,var(--cycle) 42%,transparent);
}
.hero-lede{
  max-width:46rem;color:#fff1d1;font-size:clamp(1.08rem,1.7vw,1.35rem);
  line-height:1.62;font-weight:520;text-shadow:0 2px 18px rgba(0,0,0,.65);
}
.hero-metrics{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;width:min(100%,42rem);
  margin:1.15rem 0 0;background:rgba(255,244,220,.24);border:1px solid rgba(255,244,220,.22);
  box-shadow:0 1rem 3rem rgba(0,0,0,.22);
}
.hero-metrics div{
  min-width:0;background:linear-gradient(180deg,rgba(14,12,18,.72),rgba(14,12,18,.46));
  padding:.62rem .75rem;
}
.hero-metrics dt{
  font-family:var(--font-mono);font-size:.61rem;text-transform:uppercase;color:var(--accent);
}
.hero-metrics dd{
  margin:.1rem 0 0;color:#fff7df;font-weight:720;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hero-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.6rem}
.button{
  min-height:46px;display:inline-flex;align-items:center;justify-content:center;
  padding:.78rem 1.05rem;border:1px solid var(--line-strong);
  font-family:var(--font-mono);font-size:.74rem;text-transform:uppercase;color:#fff7df;
  background:rgba(17,16,24,.58);box-shadow:0 18px 48px rgba(0,0,0,.2);
}
.button.primary{background:linear-gradient(135deg,var(--accent),var(--accent-hot));color:#171018;border-color:transparent;font-weight:700}
.button:hover{transform:translateY(-2px);transition:transform .2s var(--ease)}

.sun-panel{
  align-self:center;background:linear-gradient(180deg,rgba(18,15,22,.82),rgba(18,15,22,.58));
  border:1px solid var(--line);box-shadow:0 1.6rem 5rem rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(16px);padding:1rem;position:relative;overflow:hidden;
  clip-path:polygon(0 0,calc(100% - 1rem) 0,100% 1rem,100% 100%,1rem 100%,0 calc(100% - 1rem));
}
.sun-panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at var(--sun-x) var(--sun-y), color-mix(in srgb,var(--cycle) 35%,transparent), transparent 8rem);
}
.sun-panel::after{
  content:"";position:absolute;inset:.55rem;pointer-events:none;border:1px solid rgba(255,244,220,.11);
  clip-path:polygon(0 0,calc(100% - .8rem) 0,100% .8rem,100% 100%,.8rem 100%,0 calc(100% - .8rem));
}
.panel-head{position:relative;display:flex;justify-content:space-between;align-items:start;gap:1rem}
.panel-head p{margin:0}
.panel-note{
  color:#fff4dc9c;font-family:var(--font-mono);font-size:.64rem;text-transform:uppercase;
  margin-top:.2rem!important;
}
.panel-state{font-family:var(--font-display);font-style:italic;font-size:1.45rem;color:#fff7df;line-height:1.05;text-align:right}
.sky-arc{
  position:relative;height:clamp(10.5rem,19vw,14rem);margin:.55rem 0 .85rem;
  cursor:grab;touch-action:none;user-select:none;
  background:
    radial-gradient(circle at var(--sun-x) var(--sun-y), color-mix(in srgb,var(--cycle) 18%,transparent), transparent 5.4rem),
    repeating-conic-gradient(from 228deg at 50% 82%, rgba(255,244,220,.12) 0 1deg, transparent 1deg 10deg);
}
.sky-arc:active{cursor:grabbing}
.is-dragging-sky .sun-panel{
  box-shadow:0 1.9rem 6rem rgba(0,0,0,.48),0 0 0 1px color-mix(in srgb,var(--cycle) 34%,transparent),inset 0 1px 0 rgba(255,255,255,.12);
}
.is-dragging-sky .heat-veil{animation-duration:2.8s}
.arc-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.arc-svg path{fill:none;stroke-linecap:round}
.arc-shadow{stroke:rgba(0,0,0,.5);stroke-width:18}
.arc-base{stroke:rgba(255,244,220,.28);stroke-width:2}
.arc-glow{stroke:var(--accent);stroke-width:3;stroke-dasharray:330 700;filter:drop-shadow(0 0 12px var(--accent));opacity:.9}
.arc-ground{stroke:rgba(255,244,220,.24);stroke-width:1;stroke-dasharray:4 10}
.arc-handle{
  position:absolute;left:var(--sun-x);top:var(--sun-y);width:54px;height:54px;
  transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.38);
  box-shadow:0 0 38px color-mix(in srgb,var(--cycle) 56%,transparent);
}
.handle-core{
  width:32px;height:32px;border-radius:50%;display:block;
  background:
    radial-gradient(circle at 35% 35%, #fff9da, var(--accent) 42%, var(--accent-hot) 74%);
  box-shadow:0 0 22px var(--accent),0 0 54px color-mix(in srgb,var(--cycle) 52%,transparent);
}
:root[data-phase-name="night"] .handle-core{
  background:radial-gradient(circle at 62% 42%, transparent 0 35%, #f5edd2 36% 56%, #b7c8ff 72%);
}
.arc-label{
  position:absolute;font-family:var(--font-mono);font-size:.65rem;color:#fff4dca8;text-transform:uppercase;
}
.arc-label.noon{left:.35rem;top:7%}
.arc-label.dusk{left:50%;top:76%;transform:translateX(-50%)}
.arc-label.night{right:.2rem;top:8%}
.sky-readouts{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin:0}
.sky-readouts div{background:rgba(10,10,16,.62);padding:.8rem .55rem}
.sky-readouts dt{font-family:var(--font-mono);font-size:.63rem;text-transform:uppercase;color:#fff4dc99}
.sky-readouts dd{margin:.1rem 0 0;font-family:var(--font-display);font-style:italic;font-size:1.45rem;line-height:1;color:#fff7df}
.transit-rule{
  position:relative;margin:.65rem 0 0;color:#fff4dc98;font-family:var(--font-mono);
  font-size:.64rem;text-transform:uppercase;line-height:1.55;
}

.hero-ledger{
  position:absolute;z-index:8;left:var(--pad);right:var(--pad);bottom:1.15rem;
  width:min(calc(100% - var(--pad)*2),var(--max));margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);box-shadow:0 -22px 60px rgba(0,0,0,.22);
}
.hero-ledger div{background:rgba(13,12,18,.68);padding:.85rem 1rem;min-width:0}
.hero-ledger dt,.route-meta,.route-card dt,.bearing-list span,.logbook time{
  font-family:var(--font-mono);font-size:.67rem;text-transform:uppercase;letter-spacing:0;color:#dac8a8;
}
.hero-ledger dd{margin:.1rem 0 0;color:#fff7df;font-weight:720;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.ticker{overflow:hidden;border-block:1px solid var(--line);background:#0d101b;color:var(--accent);font-family:var(--font-mono);font-size:.72rem;white-space:nowrap}
.ticker div{display:flex;width:max-content;animation:ticker 34s linear infinite}
.ticker span{padding:.72rem 0}
@keyframes ticker{to{transform:translateX(-50%)}}

.section{
  position:relative;width:min(100%,var(--max));margin:0 auto;padding:clamp(3.9rem,6.6vw,6.9rem) var(--pad);
}
.section::after{
  content:"";position:absolute;inset:1rem var(--pad) auto auto;width:min(28rem,44vw);height:min(18rem,24vw);
  pointer-events:none;opacity:.08;
  background:
    repeating-radial-gradient(ellipse at 50% 100%, transparent 0 16px, var(--accent) 17px 18px, transparent 19px 38px);
  transform:skewX(-14deg);
}
.water{padding-bottom:clamp(3rem,5vw,4.6rem)}
.acoustics{padding-top:clamp(3rem,5vw,4.6rem)}
.section::before{
  content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;height:1px;
  background:linear-gradient(90deg,var(--line-strong),transparent 70%);
}
.section-head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(17rem,27rem);gap:2rem;align-items:end;margin-bottom:2rem;
}
.section-head p,.section-lede{
  color:var(--muted);font-size:clamp(1rem,1.45vw,1.2rem);line-height:1.72;
}
.bureau-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(13rem,22rem);gap:clamp(2rem,5vw,5rem);align-items:center}
.bureau{overflow:hidden}
.bureau .section-lede{max-width:62rem}
.bureau-stamp{
  aspect-ratio:1;border:1px solid var(--line-strong);border-radius:50%;display:grid;place-items:center;
  background:
    radial-gradient(circle, color-mix(in srgb,var(--cycle) 20%,transparent), transparent 65%),
    repeating-conic-gradient(from 12deg, rgba(255,244,220,.12) 0 1deg, transparent 1deg 8deg);
  box-shadow:inset 0 0 0 2.2rem rgba(13,16,27,.34),0 2rem 5rem rgba(0,0,0,.3);
}
.bureau-stamp span{font-family:var(--font-mono);font-size:.82rem;color:var(--accent)}
.bureau-stamp i{font-family:var(--font-display);font-style:italic;font-size:clamp(5rem,12vw,9rem);line-height:.7;color:#fff7df}
.bureau-stamp small{font-family:var(--font-mono);font-size:.62rem;text-transform:uppercase;color:#fff4dca8}
.bureau-instrument{
  display:grid;grid-template-columns:1.1fr .8fr 1.2fr;gap:1px;margin-top:2.2rem;
  border:1px solid var(--line);background:var(--line);position:relative;
}
.bureau-instrument::before{
  content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.28;
}
.bureau-instrument div{
  background:linear-gradient(180deg,rgba(31,25,28,.86),rgba(10,13,24,.82));
  padding:1rem 1.1rem;min-width:0;
}
.bureau-instrument span,.bureau-instrument small{
  display:block;font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;color:#d8c6a8;
}
.bureau-instrument b{
  display:block;margin:.25rem 0;font-family:var(--font-display);font-style:italic;font-size:clamp(2rem,4vw,3.8rem);
  font-weight:300;line-height:.95;color:#fff7df;
}
.principles{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:3rem}
.principles article{
  background:
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(13,16,27,.72)),
    radial-gradient(circle at 88% 8%, color-mix(in srgb,var(--cycle) 18%,transparent), transparent 8rem);
  padding:1.25rem;min-width:0;transition:transform .24s var(--ease),background-color .24s var(--ease);
}
.principles article:nth-child(even){transform:translateY(1.1rem)}
.principles article:hover{transform:translateY(-.35rem);background-color:rgba(255,244,220,.05)}
.principles span{font-family:var(--font-mono);color:var(--accent);font-size:.72rem}
.principles h3{margin:.9rem 0 .65rem}
.principles p,.route-card p,.wave-figure figcaption,.bearing-list p,.logbook p{color:var(--muted)}

.route-grid{
  display:grid;grid-template-columns:repeat(12,1fr);gap:10px;background:transparent;border:0;
  align-items:stretch;
}
.route-card{
  background:linear-gradient(180deg,rgba(25,22,28,.88),rgba(12,15,26,.88));
  padding:1rem;min-width:0;transition:transform .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease);
  grid-column:span 4;position:relative;overflow:hidden;border:1px solid var(--line);
}
.route-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;
  background:linear-gradient(120deg,transparent 0 48%,var(--accent) 49% 49.4%,transparent 50% 100%);
}
.route-card:hover{transform:translateY(-7px);background:linear-gradient(180deg,rgba(43,33,30,.94),rgba(13,16,27,.93));box-shadow:0 1.5rem 4rem rgba(0,0,0,.28)}
.route-card.featured{
  grid-column:span 4;
  background:
    radial-gradient(24rem 16rem at 75% 15%, color-mix(in srgb,var(--cycle) 24%,transparent), transparent 70%),
    linear-gradient(180deg,color-mix(in srgb,var(--cycle) 22%,#171018),rgba(12,15,26,.92));
}
.route-card:nth-child(4){grid-column:3 / span 8}
.route-card svg{width:100%;height:auto;display:block;margin-bottom:1rem;background:rgba(255,255,255,.035)}
.route-card.featured svg{margin:-.15rem 0 1.1rem;filter:drop-shadow(0 0 18px color-mix(in srgb,var(--cycle) 28%,transparent))}
.contour{fill:none;stroke:rgba(255,244,220,.23);stroke-width:1.3}
.contour.c2{stroke:rgba(255,244,220,.15)}
.route-line{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;filter:drop-shadow(0 0 8px var(--accent))}
.route-meta{display:flex;justify-content:space-between;gap:1rem;color:var(--accent)}
.route-card h3{margin:.7rem 0 .6rem}
.route-note{
  margin:.75rem 0 0;padding-left:.7rem;border-left:2px solid var(--accent);
  color:#fff0c9!important;font-family:var(--font-mono);font-size:.68rem;line-height:1.55;text-transform:uppercase;
}
.route-card dl{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin:1rem 0 0}
.route-card dl div{background:rgba(8,10,18,.72);padding:.6rem .45rem;min-width:0}
.route-card dd{margin:.1rem 0 0;color:#fff7df;font-weight:760}
.route-card dd,.hero-ledger dd,.sky-readouts dd,.water-calibration b,.night-ledger b{font-variant-numeric:tabular-nums lining-nums}

.water-wrap{
  border:1px solid var(--line);
  background:
    linear-gradient(90deg,rgba(255,244,220,.035),transparent 22%),
    rgba(11,12,20,.72);
  box-shadow:0 2rem 5rem rgba(0,0,0,.24);
}
.water-calibration{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-bottom:1px solid var(--line);
}
.water-calibration div{
  background:linear-gradient(180deg,rgba(25,22,28,.92),rgba(9,12,21,.9));
  padding:.85rem 1rem;min-width:0;
}
.water-calibration span{
  display:block;font-family:var(--font-mono);font-size:.64rem;text-transform:uppercase;color:#d8c6a8;
}
.water-calibration b{
  display:block;margin-top:.15rem;font-family:var(--font-display);font-style:italic;font-size:1.8rem;line-height:1;color:#fff7df;font-weight:300;
}
table{width:100%;border-collapse:collapse;table-layout:fixed;font-family:var(--font-body)}
caption{
  caption-side:top;text-align:left;padding:1rem;color:var(--muted);font-size:.95rem;
  font-family:var(--font-mono);text-transform:uppercase;letter-spacing:0;white-space:normal;
}
th,td{padding:1rem;border-top:1px solid var(--line);vertical-align:top;text-align:left}
tbody tr{background:linear-gradient(90deg,rgba(255,244,220,.025),transparent 28%)}
thead th{color:var(--accent);font-weight:700;font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase}
tbody th{color:#fff7df;font-weight:760;font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase}
td{color:var(--muted);font-size:.95rem;line-height:1.58}
td[data-label="Allocation"],td[data-label="Salt"]{
  color:#fff4dc;font-size:1.06rem;font-variant-numeric:tabular-nums;
}
tbody tr:hover{background:rgba(244,212,135,.055)}

.acoustic-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(18rem,1.1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.acoustics::after{
  content:"";position:absolute;right:var(--pad);top:4rem;width:min(32rem,42vw);height:1px;
  background:linear-gradient(90deg,transparent,var(--line-strong));opacity:.65;
}
.frequency-list{margin-top:1.6rem;border:1px solid var(--line)}
.frequency-list p{
  display:flex;justify-content:space-between;gap:1rem;margin:0;padding:.85rem 1rem;border-top:1px solid var(--line);
  font-family:var(--font-mono);font-size:.78rem;text-transform:uppercase;color:var(--muted);
}
.frequency-list p:first-child{border-top:0}
.frequency-list span{color:var(--accent)}
.acoustic-protocol{
  display:grid;gap:1px;margin-top:1rem;background:var(--line);border:1px solid var(--line);
}
.acoustic-protocol span{
  display:block;background:rgba(13,16,27,.72);padding:.72rem .85rem;
  color:#fff0c9;font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;
}
.wave-figure{
  --resonance:.444;margin:0;position:relative;border:1px solid var(--line);
  background:
    radial-gradient(30rem 14rem at calc(20% + var(--resonance)*60%) 44%,color-mix(in srgb,var(--cycle) 16%,transparent),transparent 72%),
    rgba(9,11,19,.54);box-shadow:0 2.4rem 5rem rgba(0,0,0,.26);overflow:hidden;
}
.resonance-head{
  min-height:4.4rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1rem;
  border-bottom:1px solid var(--line);font-family:var(--font-mono);font-size:.66rem;text-transform:uppercase;color:var(--muted);
}
.resonance-head strong{font-family:var(--font-display);font-size:2.4rem;font-style:italic;font-weight:300;line-height:1;color:#fff7df;font-variant-numeric:tabular-nums}
.resonance-head small{font:400 .62rem var(--font-mono);color:var(--accent)}
.wave-figure svg{
  width:100%;height:auto;display:block;
  background:
    radial-gradient(circle at 70% 22%, color-mix(in srgb,var(--cycle) 18%,transparent), transparent 12rem),
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
}
.resonance-scrub{
  min-height:7.2rem;position:relative;padding:1.35rem 1rem .85rem;cursor:ew-resize;touch-action:none;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(8,10,18,.82);
  transition:background .3s var(--ease),box-shadow .3s var(--ease);
}
.resonance-scrub:hover,.resonance-scrub:focus-visible{background:color-mix(in srgb,var(--cycle) 12%,#090b13);box-shadow:inset 0 0 36px color-mix(in srgb,var(--cycle) 10%,transparent)}
.resonance-scale{display:flex;justify-content:space-between;color:#d8c6a8;font:400 .6rem var(--font-mono)}
.resonance-track{display:block;height:1.4rem;position:relative;margin:.3rem 0 .65rem;border-block:1px solid rgba(255,244,220,.13);background:repeating-linear-gradient(90deg,transparent 0 calc(5% - 1px),rgba(255,244,220,.16) calc(5% - 1px) 5%)}
.resonance-track::before{content:"";position:absolute;left:0;top:50%;width:calc(var(--resonance)*100%);height:2px;background:linear-gradient(90deg,var(--dusk),var(--accent));box-shadow:0 0 14px var(--accent)}
.resonance-track i{position:absolute;z-index:2;left:calc(var(--resonance)*100%);top:50%;width:1rem;height:2.7rem;transform:translate(-50%,-50%);border:1px solid #fff1ca;border-radius:50%;background:var(--accent);box-shadow:0 0 0 .38rem rgba(244,212,135,.1),0 0 24px var(--accent)}
.resonance-prompt{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-family:var(--font-mono);font-size:.62rem;text-transform:uppercase}
.resonance-prompt b{color:#fff1d1;font-weight:400}.resonance-prompt em{color:var(--accent);font-style:normal;text-align:right}
.wave-figure.is-sounding .wave{stroke-width:3;filter:drop-shadow(0 0 8px var(--accent));animation-duration:calc(1.7s + var(--resonance)*1.2s)}
.wave-figure.is-sounding .dune-body{filter:drop-shadow(0 -10px 22px color-mix(in srgb,var(--cycle) 35%,transparent))}
.dune-body{fill:url(#waveSand);opacity:.8}
.slip-face{fill:rgba(255,244,220,.14)}
.grain-flow{fill:none;stroke:#fff4dc;stroke-width:4;stroke-linecap:round;stroke-dasharray:2 14;animation:flow 3s linear infinite}
.grain-flow.delay{animation-delay:-1.5s;opacity:.65}
.wave{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:10 12;animation:waveMove 4.8s linear infinite}
.wave.w2{animation-delay:-1s;opacity:.65}
.wave.w3{animation-delay:-2s;opacity:.45}
@keyframes flow{to{stroke-dashoffset:-80}}
@keyframes waveMove{to{stroke-dashoffset:-88}}
.wave-figure figcaption{font-size:.88rem;margin:0;padding:.75rem 1rem 1rem}
.sonogram{
  height:4.4rem;display:grid;grid-template-columns:repeat(12,1fr);align-items:end;gap:3px;
  padding:.65rem;border:1px solid var(--line);border-top:0;
  background:linear-gradient(180deg,rgba(255,244,220,.035),rgba(13,16,27,.76));
}
.sonogram span{
  height:var(--h);background:linear-gradient(180deg,var(--accent),rgba(201,106,90,.22));
  box-shadow:0 0 14px color-mix(in srgb,var(--cycle) 32%,transparent);
  transform-origin:bottom;animation:sonogram 2.8s ease-in-out infinite alternate;
}
.sonogram span:nth-child(3n){animation-delay:-.8s}
.sonogram span:nth-child(4n){animation-delay:-1.3s}
@keyframes sonogram{to{transform:scaleY(.62);opacity:.68}}

.star-grid{display:grid;grid-template-columns:minmax(17rem,.86fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.star-map{margin:0}
.star-map svg{
  width:100%;height:auto;display:block;filter:drop-shadow(0 2rem 3rem rgba(0,0,0,.25));
  background:
    radial-gradient(circle at 33% 19%, rgba(255,255,255,.42) 0 1px, transparent 1.5px),
    radial-gradient(circle at 71% 28%, rgba(219,229,255,.55) 0 1px, transparent 1.5px),
    radial-gradient(circle at 84% 68%, rgba(255,244,220,.45) 0 1px, transparent 1.5px);
}
.map-ring{fill:rgba(13,16,27,.58);stroke:var(--line-strong);stroke-width:1.4}
.map-ring.inner{fill:none;stroke:rgba(255,244,220,.18);stroke-dasharray:3 9}
.north-line,.east-line{stroke:rgba(255,244,220,.14);stroke-width:1}
.bearing{stroke:var(--accent);stroke-width:2;stroke-dasharray:7 10;filter:drop-shadow(0 0 8px var(--accent))}
.bearing.b2{stroke:var(--accent-hot)}
.bearing.b3{stroke:#dbe5ff}
.star circle{fill:#fff8df;filter:drop-shadow(0 0 8px #fff)}
.star text,.cardinal{font-family:var(--font-mono);fill:#fff4dc;font-size:14px}
.cardinal{text-anchor:middle;fill:var(--accent)}
.bearing-list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.bearing-list article{background:rgba(13,16,27,.76);padding:1.2rem}
.bearing-list span{color:var(--accent)}
.bearing-list h3{margin:.35rem 0 .45rem}
.night-ledger{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:2rem;background:var(--line);border:1px solid var(--line);
}
.night-ledger div{background:rgba(13,16,27,.78);padding:.85rem 1rem;min-width:0}
.night-ledger span{display:block;font-family:var(--font-mono);font-size:.64rem;text-transform:uppercase;color:#d8c6a8}
.night-ledger b{display:block;margin-top:.18rem;color:#fff7df;font-variant-numeric:tabular-nums}

.ledger h2{max-width:56rem}
.logbook{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2rem}
.logbook article{background:rgba(13,16,27,.75);padding:1.15rem}
.logbook time{color:var(--accent)}
.logbook p{margin:.65rem 0 0}

.site-footer{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:end;
  padding:2rem var(--pad);border-top:1px solid var(--line);
  background:#0b0d16;color:var(--muted);
}
.site-footer p{margin:.25rem 0}
.footer-brand{font-family:var(--font-display);font-style:italic;font-size:1.35rem;color:#fff7df}
.footer-brand span{font-family:var(--font-mono);font-size:.62rem;color:var(--accent);font-style:normal;text-transform:uppercase}
.site-footer nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.35rem 1rem}
.site-footer a{min-height:44px;display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase}

/* Guide page */
.guide-page{background:
  radial-gradient(42rem 34rem at 78% 6%, color-mix(in srgb,var(--cycle) 20%,transparent), transparent 70%),
  radial-gradient(30rem 38rem at 8% 46%, rgba(201,106,90,.12), transparent 72%),
  linear-gradient(180deg,#171018,#0d101b 60%,#090a10)}
.guide-hero{
  position:relative;width:min(100%,var(--max));margin:0 auto;
  padding:8.5rem var(--pad) 4.5rem;display:grid;grid-template-columns:minmax(0,1fr) minmax(15rem,24rem);gap:clamp(2rem,5vw,5rem);align-items:center;
}
.guide-hero h1{font-size:clamp(3.2rem,8vw,7.8rem);color:#fff7df;text-transform:uppercase}
.guide-hero h1 em{display:block;color:var(--accent);font-style:italic;text-transform:none}
.guide-orbit{
  aspect-ratio:1;border:1px solid var(--line);border-radius:50%;position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb,var(--cycle) 32%,transparent), transparent 18%),
    repeating-conic-gradient(from 12deg, rgba(255,244,220,.11) 0 1deg, transparent 1deg 8deg),
    radial-gradient(circle,color-mix(in srgb,var(--cycle) 18%,transparent),transparent 68%);
  box-shadow:inset 0 0 0 2.4rem rgba(255,255,255,.035),0 0 80px color-mix(in srgb,var(--cycle) 18%,transparent);
}
.guide-orbit::before,.guide-orbit::after{content:"";position:absolute;border-radius:50%;inset:18%;border:1px solid var(--line)}
.guide-orbit::after{inset:43%;background:var(--accent);box-shadow:0 0 28px var(--accent)}
.guide-orbit span{
  position:absolute;left:50%;top:50%;width:46%;height:1px;background:linear-gradient(90deg,var(--accent),transparent);
  transform-origin:left center;opacity:.72;
}
.guide-orbit span:nth-child(1){transform:rotate(18deg)}
.guide-orbit span:nth-child(2){transform:rotate(146deg);opacity:.42}
.guide-orbit span:nth-child(3){transform:rotate(262deg);opacity:.34}
.guide-body{width:min(100%,1030px);margin:0 auto;padding:0 var(--pad) 5rem}
.guide-card{
  border-top:1px solid var(--line);padding:1.75rem 0;
  background:
    linear-gradient(90deg,rgba(255,244,220,.052),transparent 44%),
    repeating-linear-gradient(180deg,transparent 0 2.4rem,rgba(255,244,220,.025) 2.45rem 2.5rem);
}
.guide-card h2{font-size:clamp(1.9rem,4vw,3rem);margin:0 0 .7rem}
.guide-card p,.guide-card li{color:var(--muted);font-size:1.03rem}
.guide-card code{font-family:var(--font-mono);font-size:.88em;color:var(--accent);background:rgba(255,244,220,.08);border:1px solid var(--line);padding:.06rem .28rem;white-space:normal;overflow-wrap:anywhere}
.guide-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:1rem 0}
.guide-list div{
  background:
    radial-gradient(12rem 8rem at 85% 10%, color-mix(in srgb,var(--cycle) 12%,transparent), transparent 70%),
    #0d101b;
  padding:1rem;min-width:0;
}
.tokens{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:1rem 0}
.token{
  border:1px solid var(--line);padding:.75rem;font-family:var(--font-mono);font-size:.72rem;color:var(--muted);
  background:rgba(13,16,27,.55);
}
.token i{display:block;height:28px;margin-bottom:.55rem;border:1px solid rgba(255,255,255,.1);box-shadow:0 0 18px rgba(255,244,220,.08)}
.prompt-box{
  border-left:3px solid var(--accent);
  background:
    linear-gradient(90deg,color-mix(in srgb,var(--cycle) 15%,transparent),transparent),
    rgba(18,15,22,.58);
  padding:1rem;font-family:var(--font-mono);font-size:.9rem;color:#fff7df;
  overflow-wrap:anywhere;
}

@media (max-width:1100px){
  .route-grid,.principles,.logbook{grid-template-columns:repeat(2,1fr)}
  .route-card,.route-card.featured,.route-card:nth-child(3),.route-card:nth-child(4){grid-column:auto}
  .route-card.featured{grid-column:span 2}
  .section-head{grid-template-columns:1fr}
}
@media (max-width:820px){
  .site-header{position:absolute;align-items:flex-start;flex-direction:column;gap:.25rem}
  .site-header nav{justify-content:flex-start}
  .hero-grid{grid-template-columns:1fr;padding-top:10.2rem;padding-bottom:13.5rem}
  .horizon-notes{display:none}
  .sun-panel{max-width:32rem}
  .panel-head{position:relative;z-index:2}
  .hero-ledger{grid-template-columns:repeat(2,1fr)}
  .bureau-layout,.acoustic-grid,.star-grid,.guide-hero{grid-template-columns:1fr}
  .bureau-instrument,.water-calibration,.night-ledger{grid-template-columns:1fr}
  .bureau-stamp{width:min(18rem,78vw)}
  .site-footer{grid-template-columns:1fr}
  .site-footer nav{justify-content:flex-start}
}
@media (max-width:900px){
  table,thead,tbody,tr,th,td{display:block;width:100%}
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  tr{border-top:1px solid var(--line);padding:.65rem 0}
  th,td{border:0;padding:.45rem .85rem}
  tbody td::before,tbody th::before{content:attr(data-label) ": ";display:block;font-family:var(--font-mono);font-size:.62rem;color:var(--accent);text-transform:uppercase}
  caption{display:block;width:100%;padding:.85rem;white-space:normal}
}
@media (max-width:560px){
  body{font-size:15px}
  .site-header{padding-top:10px}
  .brand{font-size:.7rem}
  .site-header nav a{font-size:.65rem;padding-inline:.48rem}
  .hero-grid{padding-top:8.8rem;padding-bottom:16rem}
  .eyebrow span{display:block;margin:.3rem 0 0}
  .hero h1{font-size:clamp(3.6rem,20vw,5.2rem)}
  .hero h1 em{margin-left:1.2rem}
  .hero-actions{align-items:stretch;display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
  .button{width:auto;min-height:44px;padding:.65rem .45rem;font-size:.61rem}
  .sun-panel{padding:.75rem}
  .hero h1{font-size:clamp(2.9rem,16.5vw,4.25rem);margin:.35rem 0 .58rem}
  .hero-lede{font-size:.95rem;line-height:1.46}
  .hero-metrics{grid-template-columns:repeat(3,1fr);margin-top:.75rem}
  .hero-metrics div{padding:.42rem .45rem}
  .hero-metrics dt{font-size:.52rem}
  .hero-metrics dd{font-size:.72rem;line-height:1.2;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .hero-actions{margin-top:.85rem}
  .panel-state{font-size:1.2rem}
  .panel-note{font-size:.56rem}
  .sky-arc{height:6.9rem;margin:.35rem 0 .5rem}
  .arc-handle{width:46px;height:46px}
  .handle-core{width:28px;height:28px}
  .sky-readouts div{padding:.48rem .38rem}
  .sky-readouts dt{font-size:.55rem}
  .sky-readouts dd{font-size:1rem}
  .sky-readouts dd{font-size:1.18rem}
  .transit-rule{display:none}
  .resonance-head{min-height:3.7rem}.resonance-head strong{font-size:2rem}
  .resonance-scrub{min-height:8rem;padding-inline:.75rem}
  .resonance-prompt{align-items:flex-start;flex-direction:column;gap:.25rem}.resonance-prompt em{text-align:left}
  .hero-ledger{grid-template-columns:1fr;bottom:.75rem}
  .hero-ledger div{padding:.58rem .75rem}
  .section{padding-block:3.8rem}
  .principles,.route-grid,.logbook{grid-template-columns:1fr}
  .route-card,.route-card.featured,.route-card:nth-child(3),.route-card:nth-child(4){grid-column:auto}
  .route-card dl{grid-template-columns:1fr}
  .site-footer nav{display:grid;grid-template-columns:1fr;gap:0}
  .site-footer a{border-top:1px solid var(--line)}
  .tokens,.guide-list{grid-template-columns:1fr}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
  .ticker div{animation:none}
}