/* =============================================================================
   EARTH'S BREW — "The Descent" · immersive depth journey
   Layers on top of styles.css (tokens, .btn, .eyebrow, .scrollcue reused).
   ========================================================================== */

.descent-page{ background:var(--abyss); }

/* ------------------------------------------------------------- top bar ---- */
.dbar{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--gut);
  background:linear-gradient(180deg, rgba(6,12,34,.55), transparent);
}
.dbar__brand{ display:flex; align-items:center; gap:.7em; font-family:var(--f-display); font-weight:600; letter-spacing:.14em; font-size:.95rem; }
.dbar__brand svg{ width:26px; height:26px; color:var(--artesian); }
.dbar__back{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--silver); opacity:.7; transition:.25s; }
.dbar__back:hover{ opacity:1; color:var(--spring); }

/* --------------------------------------------------------- the gauge ------ */
.gauge{
  position:fixed; right:clamp(14px,2.6vw,44px); top:50%; transform:translateY(-50%);
  z-index:50; display:grid; justify-items:end; gap:14px; text-align:right;
  font-family:var(--f-mono); pointer-events:none;
  transition:opacity .5s ease;
}
.gauge.is-hidden{ opacity:0; }
.gauge__ft b{
  display:block; font-family:var(--f-display); font-weight:600; font-size:clamp(1.7rem,3vw,2.6rem);
  color:var(--spring); line-height:1; letter-spacing:.04em; font-variant-numeric:tabular-nums;
  text-shadow:0 0 30px rgba(79,195,232,.35);
}
.gauge__ft span{ font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--silver); opacity:.65; }
.gauge__col{
  width:3px; height:min(30vh,260px); border-radius:2px; position:relative;
  background:linear-gradient(180deg,
    #5c5238 0 6%,            /* soil */
    #3a4a6b 6% 30%,          /* fractured karst */
    #213561 30% 55%,         /* galleries */
    #182a58 55% 78%,         /* deep karst */
    #2a2438 78% 87%,         /* confining */
    var(--artesian) 87% 100%);/* aquifer */
  opacity:.85;
}
.gauge__col i{
  position:absolute; left:50%; top:0; width:11px; height:11px; transform:translate(-50%,-50%);
  border-radius:50%; background:#fff; box-shadow:0 0 12px rgba(159,240,228,.9), 0 0 4px #fff;
}
.gauge__stratum{ font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; color:var(--artesian); }
.gauge__clock{ font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--stone); }

/* ------------------------------------------------------ shaft + stage ----- */
.shaft{ position:relative; }
.stage{ position:sticky; top:0; height:100svh; height:100vh; z-index:0; overflow:hidden; margin-bottom:-100vh; }
.stage canvas{ display:block; width:100%; height:100%; }

/* stations ride above the canvas */
.station{
  position:relative; z-index:2; min-height:130vh;
  display:grid; align-items:center;
  padding:0 var(--gut);
}
.station--title{ min-height:100svh; min-height:100vh; align-content:center; justify-items:center; text-align:center; padding-top:76px; }
.station--rise{ min-height:120vh; }

.station__card{
  max-width:34rem; width:100%;
  padding:clamp(26px,3.4vw,44px);
  background:rgba(6,12,34,.5);
  border:1px solid rgba(159,240,228,.15);
  border-radius:var(--r);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7);
  margin-left:clamp(0px, 6vw, 120px);
}
/* alternate anchoring: every even station hugs the right */
.station:nth-child(odd) .station__card{ margin-left:auto; margin-right:clamp(0px, 12vw, 220px); }
.station--title .station__card{
  margin:0; background:transparent; border:0; backdrop-filter:none; box-shadow:none; max-width:46rem;
}
.station__card--center{ margin-inline:auto !important; text-align:center; background:transparent; border:0; backdrop-filter:none; box-shadow:none; }

.station__display{
  font-family:var(--f-display); font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  font-size:clamp(3rem, 11vw, 7.5rem); line-height:.94; margin:.25em 0 .2em;
  background:linear-gradient(180deg,#fff 0%, #eaf6ff 40%, var(--spring) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 8px 40px rgba(6,12,34,.9));
}
.station h2{
  font-family:var(--f-display); font-weight:500; letter-spacing:.02em;
  font-size:clamp(1.7rem,3.4vw,2.5rem); margin:.35em 0 .3em; color:var(--bone);
}
.station__depth{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.3em; color:var(--artesian);
  display:inline-flex; align-items:center; gap:.8em;
}
.station__depth::after{ content:''; width:34px; height:1px; background:currentColor; opacity:.6; }
.station__lead{
  font-family:var(--f-serif); font-style:italic; font-weight:400;
  font-size:clamp(1.25rem,2.4vw,1.7rem); line-height:1.4; color:var(--spring); margin:.2em 0 .5em;
}
.station__lead--big{ font-size:clamp(1.7rem,4vw,2.8rem); color:var(--bone); }
.station p:not(.station__lead):not(.station__note){ margin:0; color:var(--silver); opacity:.88; font-size:.98rem; line-height:1.75; }
.station p em{ color:var(--spring); font-style:italic; }
.station__note{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--stone); margin-top:2.2em; }

.station__ions{ display:flex; gap:14px; margin-top:22px; flex-wrap:wrap; }
.station__ions span{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--silver);
  padding:.55em 1em .55em .6em; border:1px solid rgba(159,240,228,.22); border-radius:100px;
}
.station__ions b{
  font-family:var(--f-display); font-size:1rem; color:var(--spring); font-weight:600;
  width:2em; height:2em; display:grid; place-content:center; border:1px solid rgba(159,240,228,.4); border-radius:50%;
}
.station__ph{
  margin-top:22px; display:inline-block;
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.26em; color:var(--abyss);
  background:linear-gradient(90deg,var(--spring),var(--artesian));
  padding:.6em 1.2em; border-radius:var(--r);
}

.scrollcue--stay{ position:absolute; }

/* ----------------------------------------------------- surfacing / end ---- */
.surface-end{
  position:relative; z-index:2; text-align:center;
  padding:clamp(90px,14vh,180px) var(--gut);
  background:linear-gradient(180deg, #123a63 0%, var(--abyss-2) 55%, var(--abyss) 100%);
  border-top:1px solid rgba(159,240,228,.2);
}
.surface-end__inner{ max-width:46rem; margin-inline:auto; }
.surface-end__title{
  font-family:var(--f-display); font-weight:500; letter-spacing:.02em;
  font-size:clamp(2.2rem,5.4vw,4rem); margin:.4em 0 .3em; color:var(--bone);
}
.surface-end__lead{ font-family:var(--f-serif); font-size:clamp(1.2rem,2.3vw,1.55rem); line-height:1.55; color:var(--silver); margin:0 auto; max-width:44ch; }
.surface-end__meta{ display:flex; gap:clamp(24px,5vw,60px); justify-content:center; flex-wrap:wrap; margin:44px 0; }
.surface-end__meta div{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--silver); opacity:.75; }
.surface-end__meta b{ display:block; font-family:var(--f-display); font-size:1.6rem; font-weight:600; letter-spacing:.03em; color:var(--spring); margin-bottom:.25em; }
.surface-end__meta b i{ font-style:normal; font-size:.8rem; }
.surface-end__cta{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

.dfoot{
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding:26px var(--gut); border-top:1px solid rgba(223,227,236,.1);
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--stone);
}

/* -------------------------------------------------------- responsive ------ */
@media (max-width: 860px){
  .station__card,
  .station:nth-child(odd) .station__card{ margin-inline:auto; }
  .gauge{
    top:auto; bottom:14px; right:12px; transform:none; gap:4px;
    background:rgba(6,12,34,.62); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    padding:10px 14px; border:1px solid rgba(159,240,228,.16); border-radius:var(--r);
  }
  .gauge__ft b{ font-size:1.4rem; }
  .gauge__col{ display:none; }
  .gauge__clock{ display:none; }
  .dbar__back{ font-size:.62rem; }
}

/* ---------------------------------------------------- reduced motion ------ */
@media (prefers-reduced-motion: reduce){
  .stage, .gauge{ display:none; }
  .station{ min-height:0; padding-block:clamp(60px,10vh,120px); }
  .station--title{ min-height:80vh; }
  .station__card{ background:rgba(10,19,56,.55); }
  .shaft{
    background:linear-gradient(180deg,
      #0b1436 0%, #463d28 8%, #3a4a6b 26%, #213561 48%, #182a58 66%, #2a2438 80%, #123a63 92%, #4fc3e8 100%);
  }
}