/* =====================================================================
   moot.ing — a þing-place rebuilt in the year 2400
   Scandinavian functionalism · immersive-scroll · eclectic-hybrid type
   midnight-blue palette · counter-animate · custom inline-SVG mountain
   ===================================================================== */

:root{
  --abyss:    #0b1326;  /* abyssal midnight — dominant ground */
  --fjord:    #15233f;  /* slate-fjord — raised panels, channel dividers */
  --granite:  #22344f;  /* granite-blue — mid strokes, cairn fills, hairlines */
  --glacier:  #e8edf4;  /* glacier-white — primary text, carved marker */
  --mist:     #9aa9bd;  /* mist-grey — secondary text, unlit stone faces */
  --mint:     #5fd0c3;  /* aurora-mint — the instrument's light (<6%) */
  --brass:    #c7a86a;  /* rune-brass — the law's light (<2%) */

  --display: "Unbounded", "Arial Narrow", system-ui, sans-serif;
  --serif:   "Newsreader", Georgia, "Times New Roman", serif;
  --mono:    "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --rail-w: clamp(64px, 8vw, 132px);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  background:var(--abyss);
  color:var(--glacier);
  font-family:var(--serif);
  font-size:1.08rem;
  line-height:1.66;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}

/* =====================================================================
   THE MOUNTAIN — fixed SVG behind all content
   ===================================================================== */
.ridge{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:0;
  pointer-events:none;
  display:block;
}
.ridge .plate{ will-change:transform; }

.ridge .fill{ stroke:none; }
.far2-fill{ fill:#0e1a31; }
.far1-fill{ fill:#101e38; }
.rock-fill{ fill:#13213c; }
.mid-fill{  fill:#162741; }
.scree-fill{ fill:#18294a; }

.ridge .contour{
  fill:none;
  stroke:var(--granite);
  stroke-width:1;
  stroke-linejoin:round;
  stroke-linecap:round;
  opacity:0.85;
}
.ridge .snow{
  fill:none;
  stroke:var(--mist);
  stroke-width:1.1;
  stroke-linecap:round;
  opacity:0.55;
}
.ridge .unlit{ fill:var(--fjord); stroke:none; opacity:0.9; }
.rock-aurora{
  fill:none;
  stroke:var(--mint);
  stroke-width:1.4;
  opacity:0.5;
  filter:drop-shadow(0 0 6px rgba(95,208,195,0.4));
}
.stars circle{ fill:var(--mist); opacity:0.4; }
.scree-bits{ fill:var(--granite); opacity:0.5; }

/* path-draw setup: contour paths get dasharray/offset via JS measurement,
   but we provide a sane CSS transition fallback */
.ridge .contour, .ridge .snow, .rock-aurora{
  transition:stroke-dashoffset 1.1s cubic-bezier(.22,.61,.36,1);
}

/* =====================================================================
   ALTITUDE LINE — the page spine, the Counter's true protagonist
   ===================================================================== */
.altitude{
  position:fixed;
  top:0; right:0;
  width:var(--rail-w);
  height:100vh;
  z-index:5;
  pointer-events:none;
  font-family:var(--mono);
}
.alt-rail{
  position:absolute;
  top:0; bottom:0;
  right:calc(var(--rail-w) / 2);
  width:1px;
  background:linear-gradient(to bottom,
    rgba(95,208,195,0) 0%,
    rgba(95,208,195,0.55) 8%,
    rgba(95,208,195,0.55) 92%,
    rgba(95,208,195,0) 100%);
}
.alt-tick{
  position:absolute;
  right:0;
  width:9px; height:1px;
  background:var(--mint);
  opacity:0.6;
}
.alt-chip{
  position:absolute;
  right:calc(var(--rail-w) / 2 + 8px);
  top:0;
  transform:translateY(50vh);
  background:var(--fjord);
  border:1px solid rgba(95,208,195,0.4);
  padding:.34rem .55rem;
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mint);
  white-space:nowrap;
  display:flex; align-items:baseline; gap:.08em;
  box-shadow:0 0 14px rgba(11,19,38,0.6);
  transition:transform .12s linear;
}
.alt-num{ font-variant-numeric:tabular-nums; }
.alt-unit{ color:var(--mist); font-size:.58rem; }
.alt-zero{
  position:absolute;
  bottom:1.4rem; right:calc(var(--rail-w) / 2 + 8px);
  font-size:.56rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--mist);
  opacity:0.65;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
}

/* =====================================================================
   ASCENT — the stack of stations
   ===================================================================== */
.ascent{
  position:relative;
  z-index:2;
  padding-right:var(--rail-w);
}
.station{
  position:relative;
  min-height:100vh;
  padding:14vh clamp(1.6rem, 6vw, 7rem) 14vh clamp(1.6rem, 6vw, 7rem);
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-top:1px solid rgba(34,52,79,0.5);
}
.station:first-child{ border-top:none; }

/* the instrument frame: station number + tag, always visible */
.stn-frame{
  position:absolute;
  top:5.2vh; left:clamp(1.6rem, 6vw, 7rem);
  display:flex; align-items:center; gap:1rem;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.stn-num{
  color:var(--mint);
  border:1px solid rgba(95,208,195,0.35);
  padding:.18rem .5rem;
}
.stn-tag{ color:var(--mist); }

/* shared station title — Unbounded, the "2400 infrastructure" voice */
.stn-title{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.6rem, 6vw, 6rem);
  letter-spacing:-0.02em;
  line-height:1.02;
  color:var(--glacier);
  margin-bottom:1.4rem;
}
.stn-title[data-settle="1"]{ letter-spacing:0.12em; }
.stn-title[data-settle="1"].settled{
  letter-spacing:-0.02em;
  transition:letter-spacing 1.1s cubic-bezier(.22,.61,.36,1);
}

/* reveal mechanics — staggered UPWARD (lower lines settle first) */
.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
}
.reveal.shown{ opacity:1; transform:translateY(0); }

/* Old-Norse / Old-English glosses — italic Newsreader, the law's light */
.gloss{
  font-family:var(--serif);
  font-style:italic;
  color:var(--brass);
  background-image:linear-gradient(var(--brass), var(--brass));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 1px;
  transition:background-size .6s ease;
  cursor:default;
}
.gloss:hover{ background-size:100% 1px; }

/* strong / emphasis tuned to the cold register */
strong{ font-weight:500; color:var(--glacier); }
em{ font-style:italic; }

/* =====================================================================
   STATION 1 — THE APPROACH
   ===================================================================== */
.station--approach{
  background:radial-gradient(120% 80% at 50% 18%, rgba(21,35,63,0.4), transparent 70%);
  padding-bottom:0;
}
.approach-inner{ max-width:min(58rem, 90%); }
.kicker{
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mist);
  margin-bottom:1.6rem;
}
.bigname{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(3.4rem, 13vw, 11rem);
  letter-spacing:-0.02em;
  line-height:0.96;
  color:var(--glacier);
  margin-bottom:1.8rem;
}
.bigname[data-settle="1"]{ letter-spacing:0.1em; }
.bigname[data-settle="1"].settled{
  letter-spacing:-0.02em;
  transition:letter-spacing 1.3s cubic-bezier(.22,.61,.36,1);
}
.dot{ color:var(--mint); }
.lede{
  font-size:clamp(1.05rem, 1.7vw, 1.4rem);
  line-height:1.6;
  color:var(--mist);
  max-width:42rem;
}
.lede strong{ color:var(--glacier); }
.downcue{
  margin-top:2.6rem;
  font-family:var(--mono);
  font-size:.74rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--mint);
}
.firstridge{
  position:absolute;
  left:0; right:var(--rail-w); bottom:0;
  height:11vh;
  pointer-events:none;
}
.firstridge svg{ width:100%; height:100%; display:block; }
.firstridge path{ fill:#101e38; stroke:var(--granite); stroke-width:1; vector-effect:non-scaling-stroke; opacity:0.7; }

/* =====================================================================
   STATION 2 / 6 — prose with Nordic ma (negative space)
   ===================================================================== */
.prose-ma{
  max-width:40rem;
  margin-left:clamp(0rem, 14vw, 16rem);
}
.prose-ma--right{
  margin-left:auto;
  margin-right:clamp(0rem, 8vw, 8rem);
  text-align:left;
}
.prose-ma p{ margin-top:1.5rem; color:var(--mist); }
.prose-ma p:first-of-type{ margin-top:0; }
.prose-ma strong{ color:var(--glacier); }
.station--thingstead{ background:linear-gradient(100deg, rgba(21,35,63,0.32), transparent 55%); }

.margin-note{
  font-family:var(--serif);
  font-style:italic;
  color:var(--mist);
  font-size:0.98rem;
  border-left:1px solid var(--granite);
  padding-left:1.1rem;
  margin-top:1.8rem !important;
}

/* =====================================================================
   STATION 3 — THE CAIRN
   ===================================================================== */
.station--cairn{ background:linear-gradient(80deg, transparent 40%, rgba(21,35,63,0.3)); }
.cairn-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2rem, 6vw, 6rem);
  align-items:start;
  max-width:78rem;
}
.cairn-text{ position:sticky; top:24vh; }
.cairn-text p{ color:var(--mist); margin-top:1.2rem; }
.cairn-stack{
  list-style:none;
  display:flex;
  flex-direction:column-reverse;   /* stones pile bottom-up */
  gap:1.1rem;
}
.cairn-stone{
  display:flex;
  align-items:center;
  gap:1.3rem;
  background:rgba(21,35,63,0.4);
  border:1px solid var(--granite);
  padding:1.1rem 1.4rem;
}
.stone-glyph{ width:88px; height:44px; flex:none; }
.stone-glyph path{
  fill:#1a2b48;
  stroke:var(--granite);
  stroke-width:1.4;
  stroke-linejoin:round;
}
.cairn-stone:nth-child(2) .stone-glyph path{ fill:#1d2f4e; }
.cairn-stone:nth-child(3) .stone-glyph path{ fill:#203353; }
.cairn-stone:nth-child(4) .stone-glyph path{ fill:#243757; }
.stone-body{ min-width:0; }
.stone-idx{
  display:block;
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mint);
  margin-bottom:.3rem;
}
.stone-body p{ color:var(--glacier); font-size:1rem; line-height:1.5; }

/* =====================================================================
   STATION 4 — THE SPEAKING-ROCK (largest, two unequal channels)
   ===================================================================== */
.station--rock{
  min-height:118vh;
  background:linear-gradient(200deg, rgba(95,208,195,0.05), transparent 30%), linear-gradient(0deg, rgba(21,35,63,0.36), transparent 60%);
}
.rock-channels{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,0.85fr);
  gap:clamp(1.6rem, 5vw, 4.5rem);
  max-width:74rem;
}
.channel{ position:relative; }
.channel--transcript{
  border-left:1px solid var(--granite);
  padding-left:clamp(1.2rem, 3vw, 2.4rem);
}
.channel--margin{
  border-left:1px solid var(--fjord);
  padding-left:clamp(1rem, 2.5vw, 1.8rem);
}
.chan-label{
  display:block;
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--mist);
  margin-bottom:1.2rem;
}
.channel--transcript p{ margin-top:1.3rem; color:var(--mist); }
.channel--transcript p:first-of-type{ margin-top:0; }
.channel--transcript strong{ color:var(--glacier); }
.channel--margin p{ margin-top:1.4rem; }
.channel--margin p:first-of-type{ margin-top:0; }

/* =====================================================================
   STATION 5 — THE COUNTER (signature: counter-animate, bidirectional)
   ===================================================================== */
.station--counter{
  min-height:120vh;
  background:linear-gradient(170deg, rgba(95,208,195,0.04), transparent 40%);
}
.counter-intro{
  max-width:46rem;
  color:var(--mist);
  font-size:1.06rem;
  margin-bottom:3rem;
}
.counter-intro strong{ color:var(--glacier); }
.counter-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:clamp(1.2rem, 4vw, 3rem);
  max-width:74rem;
  margin-bottom:3.4rem;
}
.metric{ display:flex; flex-direction:column; gap:.7rem; }
.metric-label{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mist);
}
.metric-figure{
  font-family:var(--mono);
  font-weight:700;
  font-size:clamp(2.1rem, 4.5vw, 3.6rem);
  letter-spacing:0.02em;
  color:var(--glacier);
  font-variant-numeric:tabular-nums;
  /* fixed-width digit cells so up/down counting never reflows */
  font-feature-settings:"tnum" 1;
}
.metric-bar{
  position:relative;
  width:100%;
  height:2px;
  background:var(--granite);
  overflow:hidden;
}
.metric-bar-fill{
  position:absolute;
  left:0; top:0; bottom:0;
  width:100%;
  background:var(--mint);
  transform:scaleX(0);
  transform-origin:left center;
  box-shadow:0 0 8px rgba(95,208,195,0.6);
}

/* the live tally bar */
.tally-bar{
  display:flex;
  width:min(70rem, 100%);
  height:14px;
  border:1px solid var(--granite);
  background:var(--fjord);
  margin-bottom:1rem;
  overflow:hidden;
}
.tally-seg{ position:relative; height:100%; }
.tally-for{ flex:1; }
.tally-against{ flex:0 0 auto; width:0; }   /* width set dynamically by JS via inline style on fill not needed */
.tally-seg-fill{
  position:absolute; left:0; top:0; bottom:0;
  width:100%;
  transform:scaleX(0);
  transform-origin:left center;
  background:var(--mint);
  opacity:0.7;
}
.tally-against{ background:rgba(154,169,189,0.18); }
.tally-key{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mist);
}
.key-for{ color:var(--mint); }
.key-against{ color:var(--mist); }

/* =====================================================================
   STATION 6 — THE DESCENT
   ===================================================================== */
.station--descent{
  background:linear-gradient(0deg, rgba(154,169,189,0.06), transparent 55%);
}
.station--descent .stn-title{ color:#cdd7e3; }

/* =====================================================================
   STATION 7 — THE MARKER (the boundary stone, not a CTA)
   ===================================================================== */
.station--marker{
  min-height:95vh;
  align-items:center;
  text-align:center;
  background:linear-gradient(0deg, rgba(11,19,38,1), rgba(154,169,189,0.05) 80%, transparent);
}
.marker-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.6rem;
  max-width:46rem;
}
.boundary-stone{ width:clamp(110px, 16vw, 180px); height:auto; }
.bs-fill{ fill:#16263f; }
.bs-contour{ fill:none; stroke:var(--granite); stroke-width:1.4; stroke-linejoin:round; }
.bs-unlit{ fill:var(--fjord); opacity:0.9; }
.bs-rune{ fill:none; stroke:var(--brass); stroke-width:2; stroke-linecap:round; opacity:0.9; }
.marker-line{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.15rem, 2.4vw, 1.7rem);
  line-height:1.5;
  color:var(--glacier);
}
.marker-domain{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(1.8rem, 4vw, 3rem);
  letter-spacing:-0.02em;
  color:var(--glacier);
}
.marker-foot{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--mist);
}

/* =====================================================================
   RESPONSIVE — mobile collapses 2-channel rock to 1, simplifies SVG
   ===================================================================== */
@media (max-width: 880px){
  :root{ --rail-w:54px; }
  body{ font-size:1.02rem; }
  .ridge .plate-rock,
  .ridge .plate-mid,
  .ridge .plate-far2{ display:none; }   /* 3 plates on mobile: sky, far1, scree */
  .station{ padding:13vh 1.4rem 13vh 1.4rem; min-height:auto; }
  .station--rock, .station--counter, .station--marker{ min-height:auto; }
  .stn-frame{ top:3vh; left:1.4rem; gap:.7rem; font-size:.62rem; }
  .stn-title{ font-size:clamp(2.2rem, 9vw, 3.4rem); }
  .cairn-layout{ grid-template-columns:1fr; gap:1.6rem; }
  .cairn-text{ position:static; }
  .rock-channels{ grid-template-columns:1fr; gap:2rem; }
  .channel--margin{ border-left:1px solid var(--fjord); }
  .prose-ma, .prose-ma--right{ margin-left:0; margin-right:0; }
  .alt-chip{ font-size:.56rem; padding:.26rem .4rem; right:calc(var(--rail-w)/2 + 4px); }
  .alt-zero{ font-size:.5rem; }
  .firstridge{ height:8vh; }
}

@media (max-width: 520px){
  .bigname{ font-size:clamp(3rem, 18vw, 5rem); }
  .cairn-stone{ flex-direction:column; align-items:flex-start; gap:.7rem; }
  .stone-glyph{ width:72px; height:36px; }
  .counter-grid{ grid-template-columns:1fr 1fr; gap:1.2rem; }
  .metric-figure{ font-size:clamp(1.7rem, 9vw, 2.4rem); }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .stn-title[data-settle="1"], .bigname[data-settle="1"]{ letter-spacing:-0.02em !important; }
  .ridge .plate{ transform:none !important; }
}