/* ============================================================
   The Everything River — Amazon concept redesign
   Palette: Squid Ink #232F3E · Amazon Orange #FF9900
   Type: Amazon Ember (local .woff)
   ============================================================ */

@font-face { font-family:"Ember"; src:url("../fonts/Amazon_Ember_Light.woff") format("woff"); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Ember"; src:url("../fonts/Amazon_Ember.woff") format("woff"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Ember"; src:url("../fonts/Amazon_Ember_Italic.woff") format("woff"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Ember"; src:url("../fonts/Amazon_Ember_Medium.woff") format("woff"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Ember"; src:url("../fonts/Amazon_Ember_Bold.woff") format("woff"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Ember Display"; src:url("../fonts/Amazon_Ember_Display_Light.woff") format("woff"); font-weight:300; font-display:swap; }
@font-face { font-family:"Ember Display"; src:url("../fonts/Amazon_Ember_Display_Heavy.woff") format("woff"); font-weight:800; font-display:swap; }
@font-face { font-family:"Ember Mono"; src:url("../fonts/Amazon_Ember_Mono.woff") format("woff"); font-weight:400; font-display:swap; }

:root {
  --ink:        #232F3E;
  --ink-deep:   #131A22;
  --ink-abyss:  #0B1118;
  --orange:     #FF9900;
  --amber:      #FFB84D;
  --water:      #4FB6C6;
  --water-soft: #8FD3DD;
  --paper:      #F6F3EC;
  --paper-dim:  #C7D0D8;
  --font: "Ember", -apple-system, "Segoe UI", sans-serif;
  --display: "Ember Display", "Ember", sans-serif;
  --mono: "Ember Mono", ui-monospace, monospace;
  --ease-out: cubic-bezier(.16,1,.3,1);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
html, body { overflow-x:hidden; }
body {
  font-family: var(--font);
  font-weight:400;
  color: var(--paper);
  background: var(--ink-abyss);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection { background:var(--orange); color:var(--ink-abyss); }

:focus-visible { outline:2px solid var(--orange); outline-offset:3px; border-radius:2px; }

/* ---- persistent layers ------------------------------------ */
#river {
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; display:block;
}
.grain {
  position:fixed; inset:-50%; z-index:3; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  animation: grainShift 1.2s steps(3) infinite;
}
@keyframes grainShift {
  0%{transform:translate(0,0)} 33%{transform:translate(-2%,1%)} 66%{transform:translate(1%,-2%)} 100%{transform:translate(0,0)}
}

.skip-link {
  position:fixed; top:-60px; left:16px; z-index:100;
  background:var(--orange); color:var(--ink-abyss); padding:.5rem 1rem;
  border-radius:4px; font-weight:500; text-decoration:none; transition:top .2s;
}
.skip-link:focus { top:12px; }

/* ---- header ----------------------------------------------- */
.site-header {
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem clamp(1.25rem,4vw,3rem);
  background:linear-gradient(to bottom, rgba(11,17,24,.96), rgba(11,17,24,.78) 55%, rgba(11,17,24,0));
}
.brand img { display:block; width:90px; height:auto; filter:brightness(0) invert(1); opacity:.9; transition:filter .3s, opacity .3s; }
.brand:hover img { filter:none; opacity:1; }
.site-nav { display:flex; gap:clamp(.75rem,2vw,1.75rem); }
.site-nav a {
  color:var(--paper-dim); text-decoration:none; font-size:.82rem; font-weight:500;
  letter-spacing:.04em; position:relative; padding:.25rem 0;
}
.site-nav a::after {
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--orange); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease-out);
}
.site-nav a:hover { color:var(--paper); }
.site-nav a:hover::after { transform:scaleX(1); }
.nav-day1 { color:var(--orange) !important; }
.river-progress {
  position:absolute; left:0; right:0; bottom:0; height:2px;
  background:rgba(246,243,236,.08);
}
.river-progress span {
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--water), var(--orange));
}

/* ---- generic section -------------------------------------- */
main { position:relative; z-index:1; }
.section {
  position:relative;
  padding:clamp(6rem,14vh,10rem) clamp(1.25rem,6vw,5rem);
}
.wrap { max-width:1100px; margin:0 auto; position:relative; }

.eyebrow {
  font-family:var(--mono); font-size:.78rem; letter-spacing:.32em;
  text-transform:uppercase; color:var(--water-soft); margin-bottom:1.4rem;
}
h2 {
  font-family:var(--display); font-weight:800;
  font-size:clamp(2.2rem,5.2vw,4.2rem); line-height:1.05;
  letter-spacing:-.015em; margin-bottom:1.6rem;
}
.lede {
  font-size:clamp(1.02rem,1.5vw,1.25rem); font-weight:300;
  color:var(--paper-dim); max-width:44rem; margin-bottom:2.5rem;
}
.lede::first-letter { color:var(--water-soft); }

/* directional reveal */
.reveal { opacity:0; transform:translateY(56px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.in-view { opacity:1; transform:translateY(0); }

.inline-stats {
  list-style:none; display:flex; flex-wrap:wrap; gap:clamp(1.5rem,4vw,3.5rem);
  margin-top:3rem;
}
.inline-stats li { max-width:15rem; }
.inline-stats b {
  display:block; font-family:var(--display); font-weight:800;
  font-size:clamp(1.5rem,2.6vw,2.1rem); color:var(--orange); letter-spacing:-.01em;
}
.inline-stats span { font-size:.9rem; color:var(--paper-dim); font-weight:300; }

/* ---- 1 · hero --------------------------------------------- */
.hero {
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  background:radial-gradient(ellipse 90% 70% at 50% 60%, rgba(35,47,62,.72), rgba(11,17,24,.55) 70%);
  cursor:crosshair;
}
#ripples { position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero-inner { position:relative; z-index:1; max-width:52rem; padding:0 1rem; }
.hero-logo { width:clamp(130px,15vw,170px); height:auto; filter:brightness(0) invert(1); margin-bottom:1.3rem; }
.hero-title {
  font-family:var(--display); font-weight:800;
  font-size:clamp(2.8rem,7vw,5.6rem); line-height:.98; letter-spacing:-.02em;
  margin-bottom:1.3rem;
  background:linear-gradient(175deg, var(--paper) 55%, var(--water-soft));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-lede { font-weight:300; font-size:clamp(1rem,1.6vw,1.25rem); color:var(--paper-dim); max-width:38rem; margin:0 auto 1.5rem; }

.arrow-course svg { max-width:min(320px,70vw); height:auto; overflow:visible; }
.arrow-ghost { fill:var(--orange); opacity:.14; }
.arrow-line {
  stroke:var(--orange); stroke-width:3; stroke-linecap:round;
  stroke-dasharray:6 10; opacity:.85;
  animation: courseFlow 1.6s linear infinite;
}
@keyframes courseFlow { to { stroke-dashoffset:-32; } }
.arrow-caption { font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; color:var(--paper-dim); margin-top:.4rem; }
.arrow-caption b { color:var(--orange); }

.drop-hint {
  margin-top:1.6rem; font-size:.85rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--paper-dim); display:inline-flex; align-items:center; gap:.7rem;
}
.hint-ring { width:12px; height:12px; border:2px solid var(--water); border-radius:50%; animation:hintPulse 2.2s ease-out infinite; }
@keyframes hintPulse {
  0% { box-shadow:0 0 0 0 rgba(79,182,198,.55); }
  100% { box-shadow:0 0 0 16px rgba(79,182,198,0); }
}
.scroll-cue {
  position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%);
  color:var(--paper-dim); text-decoration:none; font-size:.72rem;
  letter-spacing:.28em; text-transform:uppercase; font-family:var(--mono);
  display:flex; flex-direction:column; align-items:center; gap:.6rem; z-index:1;
  transition:color .3s;
}
.scroll-cue:hover { color:var(--orange); }
.scroll-cue svg { animation:cueDrift 1.8s ease-in-out infinite; }
@keyframes cueDrift { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }

/* ---- 2 · fulfillment -------------------------------------- */
.fulfillment { background:linear-gradient(180deg, rgba(19,26,34,.94), rgba(35,47,62,.90)); }

.conveyor-stage {
  position:relative; margin:3.5rem 0 1rem; height:300px;
  border:1px solid rgba(143,211,221,.14); border-radius:14px;
  background:linear-gradient(180deg, rgba(11,17,24,.55), rgba(19,26,34,.35));
  overflow:hidden;
}
.belt {
  position:absolute; left:-4%; right:-4%; height:34px;
  background:
    repeating-linear-gradient(90deg, rgba(143,211,221,.16) 0 26px, rgba(143,211,221,.03) 26px 52px),
    linear-gradient(180deg, #2E3D4F, #232F3E 55%, #1A2430);
  border-top:1px solid rgba(143,211,221,.22);
  border-bottom:3px solid rgba(11,17,24,.8);
  background-size:52px 100%, 100% 100%;
  animation:beltMove 1.1s linear infinite;
}
.belt-1 { top:52px; }
.belt-2 { top:142px; animation-duration:1.6s; animation-direction:reverse; }
.belt-3 { top:232px; animation-duration:.9s; }
@keyframes beltMove { to { background-position:52px 0, 0 0; } }
.belt-2 { animation-name:beltMoveR; }
@keyframes beltMoveR { to { background-position:-52px 0, 0 0; } }

.pkg {
  position:absolute; bottom:100%; width:46px; height:34px;
  background:linear-gradient(165deg, #C69A68, #A87B4B);
  border-radius:3px; box-shadow:0 3px 8px rgba(0,0,0,.45);
  animation:pkgTravel linear infinite;
}
.pkg::before { content:""; position:absolute; top:0; bottom:0; left:50%; width:8px; transform:translateX(-50%);
  background:rgba(255,255,255,.16); }
.pkg i {
  position:absolute; left:8px; right:8px; bottom:6px; height:8px;
  border:2px solid var(--orange); border-top:none; border-radius:0 0 10px 10px;
}
.pkg.alt { background:linear-gradient(165deg, #3D5069, #2E3D4F); }
.p1 { animation-duration:9s; }
.p2 { animation-duration:9s; animation-delay:-3.4s; width:56px; height:42px; }
.p3 { animation-duration:9s; animation-delay:-6.6s; }
.p4 { animation-duration:13s; animation-delay:-2s; }
.p5 { animation-duration:13s; animation-delay:-8s; width:40px; height:30px; }
.p6 { animation-duration:7s; animation-delay:-1s; }
.p7 { animation-duration:7s; animation-delay:-3.2s; width:60px; height:40px; }
.p8 { animation-duration:7s; animation-delay:-5.5s; }
@keyframes pkgTravel {
  from { left:-70px; } to { left:calc(104% + 70px); }
}
.belt-2 .pkg { animation-name:pkgTravelR; }
@keyframes pkgTravelR {
  from { left:calc(104% + 70px); } to { left:-70px; }
}

.arm { position:absolute; top:96px; z-index:2; }
.arm-left { left:12%; }
.arm-right { right:12%; }
.arm-seg1 { transform-origin:50px 110px; animation:armSwing 4s ease-in-out infinite; }
.arm-seg1.alt { animation-delay:-2s; animation-duration:4.6s; }
.arm-seg2 { transform-origin:50px 46px; animation:armReach 4s ease-in-out infinite; }
.arm-seg2.alt { animation-delay:-2s; animation-duration:4.6s; }
@keyframes armSwing { 0%,100%{transform:rotate(-16deg)} 50%{transform:rotate(18deg)} }
@keyframes armReach { 0%,100%{transform:rotate(22deg)} 50%{transform:rotate(-26deg)} }

/* ---- 3 · prime rapids ------------------------------------- */
.rapids {
  background:linear-gradient(180deg, rgba(35,47,62,.88), rgba(30,58,70,.86));
  overflow:hidden;
}
.foam { position:absolute; inset:0; pointer-events:none; }
.foam i {
  position:absolute; height:2px; width:34%;
  background:linear-gradient(90deg, transparent, rgba(246,243,236,.5), transparent);
  animation:foamStreak 2.6s linear infinite; opacity:.35;
}
.foam i:nth-child(1){top:12%; animation-delay:0s;}
.foam i:nth-child(2){top:26%; animation-delay:-.7s; width:26%;}
.foam i:nth-child(3){top:41%; animation-delay:-1.3s; width:40%;}
.foam i:nth-child(4){top:57%; animation-delay:-.4s;}
.foam i:nth-child(5){top:68%; animation-delay:-1.8s; width:22%;}
.foam i:nth-child(6){top:79%; animation-delay:-1s; width:38%;}
.foam i:nth-child(7){top:88%; animation-delay:-2.2s; width:28%;}
.foam i:nth-child(8){top:49%; animation-delay:-2s; width:30%;}
@keyframes foamStreak {
  from { transform:translateX(-45vw) skewX(-14deg); }
  to   { transform:translateX(135vw) skewX(-14deg); }
}

.rapid-meter {
  display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap;
  font-family:var(--mono); letter-spacing:.2em; text-transform:uppercase; font-size:.72rem;
  color:var(--water-soft); margin-top:1rem;
}
.rm-bars { display:flex; gap:5px; align-items:flex-end; height:30px; }
.rm-bars i {
  width:7px; background:linear-gradient(to top, var(--water), var(--orange));
  border-radius:2px; animation:barChurn 1s ease-in-out infinite;
}
.rm-bars i:nth-child(1){height:30%; animation-delay:0s}
.rm-bars i:nth-child(2){height:55%; animation-delay:-.14s}
.rm-bars i:nth-child(3){height:80%; animation-delay:-.28s}
.rm-bars i:nth-child(4){height:100%; animation-delay:-.42s}
.rm-bars i:nth-child(5){height:72%; animation-delay:-.56s}
.rm-bars i:nth-child(6){height:48%; animation-delay:-.7s}
.rm-bars i:nth-child(7){height:34%; animation-delay:-.84s}
@keyframes barChurn { 0%,100%{transform:scaleY(.6)} 50%{transform:scaleY(1.15)} }
.rm-value { color:var(--orange); }

/* ---- 4 · aws aquifer -------------------------------------- */
.aws {
  background:linear-gradient(180deg, rgba(11,17,24,.97), rgba(7,12,17,.98));
}
.aws .eyebrow { color:#6E93A8; }
.aws h2 { color:#DCE8EE; }
.bubbles { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.bubbles i {
  position:absolute; bottom:-20px; border-radius:50%;
  border:1px solid rgba(143,211,221,.4); background:rgba(143,211,221,.06);
  animation:bubbleRise linear infinite;
}
.bubbles i:nth-child(1){left:8%;  width:10px; height:10px; animation-duration:11s;}
.bubbles i:nth-child(2){left:18%; width:6px;  height:6px;  animation-duration:14s; animation-delay:-5s;}
.bubbles i:nth-child(3){left:31%; width:14px; height:14px; animation-duration:17s; animation-delay:-9s;}
.bubbles i:nth-child(4){left:44%; width:7px;  height:7px;  animation-duration:12s; animation-delay:-3s;}
.bubbles i:nth-child(5){left:55%; width:11px; height:11px; animation-duration:15s; animation-delay:-11s;}
.bubbles i:nth-child(6){left:63%; width:5px;  height:5px;  animation-duration:10s; animation-delay:-6s;}
.bubbles i:nth-child(7){left:72%; width:13px; height:13px; animation-duration:18s; animation-delay:-2s;}
.bubbles i:nth-child(8){left:81%; width:8px;  height:8px;  animation-duration:13s; animation-delay:-8s;}
.bubbles i:nth-child(9){left:90%; width:9px;  height:9px;  animation-duration:16s; animation-delay:-13s;}
.bubbles i:nth-child(10){left:37%; width:5px; height:5px;  animation-duration:9s;  animation-delay:-4s;}
@keyframes bubbleRise {
  from { transform:translateY(0); opacity:0; }
  12%  { opacity:.8; }
  to   { transform:translateY(-105vh); opacity:0; }
}

.server-field { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; max-width:640px; margin:2.5rem 0 0; }
.rack {
  display:grid; gap:8px; padding:12px 10px;
  background:rgba(19,26,34,.8); border:1px solid rgba(110,147,168,.18); border-radius:8px;
}
.rack i { height:5px; border-radius:3px; background:#1F2C3A; position:relative; overflow:hidden; }
.rack i::after {
  content:""; position:absolute; inset:0; width:34%;
  background:linear-gradient(90deg, transparent, rgba(255,153,0,.85), transparent);
  animation:rackScan 2.8s linear infinite;
}
.rack:nth-child(1) i::after { animation-delay:-.3s; }
.rack:nth-child(2) i::after { animation-delay:-1.1s; background:linear-gradient(90deg, transparent, rgba(79,182,198,.85), transparent); }
.rack:nth-child(3) i::after { animation-delay:-1.9s; }
.rack:nth-child(4) i::after { animation-delay:-2.5s; background:linear-gradient(90deg, transparent, rgba(79,182,198,.85), transparent); }
@keyframes rackScan { from { transform:translateX(-110%);} to { transform:translateX(320%);} }

/* ---- 5 · entertainment delta ------------------------------- */
.delta { background:linear-gradient(180deg, rgba(19,26,34,.92), rgba(35,47,62,.87)); }
.delta-map, .trib-map { width:100%; height:auto; margin-top:2.5rem; overflow:visible; }
.channel {
  fill:none; stroke:var(--water); stroke-width:2.5; stroke-linecap:round;
  stroke-dasharray:10 14; opacity:.75;
  animation:channelFlow 2.4s linear infinite;
}
.c0 { stroke-width:5; stroke:var(--water-soft); }
@keyframes channelFlow { to { stroke-dashoffset:-48; } }
.delta-labels text, .trib-labels text {
  fill:var(--paper-dim); font-family:var(--mono); font-size:13px; letter-spacing:.08em;
  paint-order:stroke; stroke:rgba(11,17,24,.92); stroke-width:6px; stroke-linejoin:round;
}
.trib-map .main { stroke:var(--orange); stroke-width:6; opacity:.9; }
.trib-main-label { fill:var(--orange) !important; }

/* ---- 7 · day 1 --------------------------------------------- */
.day1 {
  background:linear-gradient(180deg, rgba(246,243,236,.985), rgba(237,231,218,.97));
  color:var(--ink);
  text-align:center;
}
.day1 .eyebrow { color:#B57708; }
.day1-title { display:flex; flex-direction:column; align-items:center; gap:.2em; margin-bottom:1rem; }
.day1-title span:first-child {
  font-family:var(--display); font-weight:300; letter-spacing:.12em;
  font-size:clamp(1.1rem,2.4vw,1.8rem); text-transform:uppercase; color:#5A6A79;
}
.day1-big {
  font-size:clamp(4.2rem,13vw,10.5rem); line-height:.95;
  color:var(--ink); letter-spacing:-.03em;
}
.day1-arrow { max-width:520px; margin:.5rem auto 3rem; }
.day1-arrow svg { display:block; }
.day1-line {
  stroke:var(--orange); stroke-width:5; stroke-linecap:round;
  stroke-dasharray:12 16; animation:courseFlow 2s linear infinite;
}
.day1-quote {
  max-width:46rem; margin:0 auto 2.5rem; text-align:left;
  font-size:clamp(1.25rem,2.4vw,1.8rem); font-weight:300; line-height:1.5;
}
.day1-quote .dropcap {
  float:left; font-family:var(--display); font-weight:800;
  font-size:4.6em; line-height:.8; padding:.06em .12em 0 0; color:var(--orange);
}
.day1-quote cite {
  display:block; margin-top:1.4rem; font-style:italic;
  font-size:.95rem; color:#5A6A79;
}
.day1-note {
  max-width:34rem; margin:0 auto; font-size:.95rem; color:#5A6A79; font-weight:300;
  border-top:1px solid rgba(35,47,62,.18); padding-top:2rem;
}

/* ---- 8 · statistics + careers ------------------------------ */
.statistics { background:linear-gradient(180deg, rgba(11,17,24,.95), rgba(19,26,34,.92)); }
.stat-river {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:rgba(143,211,221,.14); border:1px solid rgba(143,211,221,.14);
  border-radius:14px; overflow:hidden; margin-top:2.5rem;
}
.stat {
  background:rgba(19,26,34,.88); padding:2rem 1.6rem;
  transition:background .4s, transform .4s var(--ease-out);
  position:relative;
}
.stat:hover { background:rgba(35,47,62,.95); transform:translateY(-4px); z-index:1; }
.stat dt {
  font-family:var(--mono); font-size:.72rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--water-soft); margin-bottom:1rem;
}
.stat dd { margin:0; }
.count {
  display:block; font-family:var(--display); font-weight:800;
  font-size:clamp(2.4rem,4.4vw,3.6rem); line-height:1; color:var(--orange);
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.stat-note { display:block; margin-top:.6rem; font-size:.88rem; font-weight:300; color:var(--paper-dim); }

.careers { margin-top:5rem; text-align:center; }
.careers h3 {
  font-family:var(--display); font-weight:800; letter-spacing:-.01em;
  font-size:clamp(1.9rem,4vw,3rem); margin-bottom:1rem;
}
.careers p { max-width:36rem; margin:0 auto 2rem; color:var(--paper-dim); font-weight:300; }
.careers-cta {
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--mono); letter-spacing:.12em; font-size:.95rem;
  color:var(--ink-abyss); background:var(--orange);
  padding:1rem 2.2rem; border-radius:999px; cursor:pointer;
  transition:transform .35s var(--ease-out), box-shadow .35s, background .3s;
}
.careers-cta:hover, .careers-cta:focus-visible {
  transform:translateY(-3px); background:var(--amber);
  box-shadow:0 12px 34px rgba(255,153,0,.35);
}
.careers-cta svg { transition:transform .3s var(--ease-out); }
.careers-cta:hover svg { transform:translateX(5px); }

/* ---- 9 · footer -------------------------------------------- */
.site-footer {
  position:relative; z-index:1;
  background:var(--ink-abyss);
  border-top:1px solid rgba(143,211,221,.12);
  padding:4rem clamp(1.25rem,6vw,5rem) 3rem;
  text-align:center;
}
.site-footer img { width:110px; height:auto; filter:brightness(0) invert(1); opacity:.85; margin-bottom:1.6rem; }
.footer-tag { font-weight:300; font-size:.9rem; color:var(--paper-dim); margin-bottom:2rem; }
.footer-nav { display:flex; justify-content:center; flex-wrap:wrap; gap:1.6rem; }
.footer-nav a {
  color:var(--paper-dim); text-decoration:none; font-size:.8rem;
  font-family:var(--mono); letter-spacing:.16em; text-transform:uppercase;
  transition:color .3s;
}
.footer-nav a:hover { color:var(--orange); }

/* ---- responsive -------------------------------------------- */
@media (max-width: 820px) {
  .site-nav {
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    max-width:62vw; gap:.9rem; padding-bottom:.15rem;
    mask-image:linear-gradient(to right, #000 88%, transparent);
  }
  .site-nav::-webkit-scrollbar { display:none; }
  .site-nav a { font-size:.74rem; white-space:nowrap; flex:none; }
  .stat-river { grid-template-columns:repeat(2,1fr); }
  .arm { display:none; }
  .server-field { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 520px) {
  .hero-logo { margin-bottom:1.1rem; }
  .hero-lede { margin-bottom:1.4rem; }
  .arrow-course svg { max-width:min(280px,74vw); }
  .drop-hint { margin-top:1.5rem; }
  .stat-river { grid-template-columns:1fr; }
  .conveyor-stage { height:240px; }
  .belt-1 { top:40px; } .belt-2 { top:112px; } .belt-3 { top:184px; }
  .inline-stats { flex-direction:column; gap:1.4rem; }
  .inline-stats li { max-width:none; }
  .day1-quote { text-align:left; }
  .delta-labels text, .trib-labels text { font-size:15px; }
}

/* ---- reduced motion ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal { opacity:1; transform:none; }
  .grain { animation:none; }
}