/* v2 · one continuous scene.
   The hero is the reed bed and the waterline. Everything after it is under the surface:
   the water starts amber (river water near reeds is tea-coloured), turns teal, then deep,
   and ends on the riverbed where the reeds root. Each section carries one stretch of the
   gradient, so the colours run on without a seam. Only the water and the reeds move. */

:root {
  --w0: #403116;   /* just under the surface, matches the bottom of the hero reflection */
  --w1: #3a3922;
  --w2: #2b4744;
  --w3: #25464d;
  --w4: #1f3f49;
  --w5: #193340;
  --w6: #172f3b;
  --w7: #132631;
  --w8: #17211e;   /* near the bottom, a little silt in it */
  --mud: #1d1913;
}

body { background: var(--mud); }
.hero { background: var(--straw); }

/* the hero's reflection fades straight into the water below */
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: linear-gradient(rgba(64, 49, 22, 0), var(--w0)); pointer-events: none; }
.hero-meta { z-index: 1; }

/* ---------- the water ---------- */
.scene { position: relative; color: var(--paper); --line: rgba(243, 237, 227, .16); }
.idea { background: linear-gradient(var(--w0), var(--w1)); }
.collection { background: linear-gradient(var(--w1), var(--w2)); }
.tree { background: linear-gradient(var(--w2), var(--w3)); }
.materials { background: linear-gradient(var(--w3), var(--w4)); }
.seasons { background: linear-gradient(var(--w4), var(--w5)); }
.marquee { background: linear-gradient(var(--w5), var(--w6)); border-color: rgba(243, 237, 227, .1); color: rgba(243, 237, 227, .9); }
.gallery { background: linear-gradient(var(--w6), var(--w7)); }
.letter { background: linear-gradient(var(--w7), var(--w8)); }

/* light falling through the surface, fading with depth */
.shafts { position: absolute; left: 0; right: 0; top: 0; height: 170vh; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 20%, transparent); mask-image: linear-gradient(#000 20%, transparent); }
.shafts i { position: absolute; top: -10%; height: 120%; background: linear-gradient(rgba(243, 222, 170, .16), rgba(243, 222, 170, 0) 80%); transform: skewX(-16deg); filter: blur(22px); mix-blend-mode: screen; }
.shafts i:nth-child(1) { left: 8%; width: 7vw; opacity: .9; }
.shafts i:nth-child(2) { left: 24%; width: 3vw; opacity: .6; }
.shafts i:nth-child(3) { left: 47%; width: 11vw; opacity: .7; }
.shafts i:nth-child(4) { left: 69%; width: 4vw; opacity: .8; }
.shafts i:nth-child(5) { left: 83%; width: 8vw; opacity: .5; }

/* reed stems, running down from the reed bed to the bottom (drawn by main.js) */
.stems { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; overflow: visible; }

/* ---------- type on water ---------- */
.scene h2 em, .scene .idea-text em { color: var(--straw); }
.scene .kicker > span:first-child { color: var(--straw); }
.scene .define-list b { color: var(--straw); }
.scene .define-word .pr { opacity: .55; }

/* ---------- collection: the drawings as plates floating at depth ---------- */
.scene .sheet-host { --bg: #2c3d36; --ln: #E9E1CF; --acc: #DBAE67; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .65), 0 0 0 1px rgba(243, 237, 227, .06); }

/* ---------- the tree ---------- */
.scene .tree-photo { box-shadow: 0 60px 100px -50px rgba(0, 0, 0, .7); }
.scene .steps b { color: var(--straw); }

/* ---------- materials ---------- */
.scene .mat-draw { --bg: #22434b; --ln: #E9E1CF; --acc: #DBAE67; border-top-color: rgba(243, 237, 227, .45); }
.scene .mat-no { color: var(--straw); }

/* ---------- seasons ---------- */
.scene .dial .tick { stroke: var(--paper); }
.scene .dial .mo, .scene .dial .centre-t, .scene .dial .arc-l { fill: var(--paper); }
.scene .dial .arc { stroke: var(--paper); }
.scene .dial .arc.on { stroke: var(--straw); }
.scene .dial .now { fill: var(--straw); }
.scene .dial .now-halo { stroke: var(--straw); }
.scene .dial .reeds line { stroke: var(--paper); }
.scene .season-tabs button { border-color: rgba(243, 237, 227, .3); }
.scene .season-tabs button:hover { border-color: var(--paper); }
.scene .season-tabs button.on { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* ---------- marquee ---------- */
.scene .marquee-track i { background: var(--straw); }

/* ---------- letter, on the riverbed ---------- */
.scene .letter-form { border-color: rgba(243, 237, 227, .35); background: rgba(19, 38, 49, .55); }
.scene .letter-form:focus-within { border-color: var(--paper); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .6); }
.scene .letter-form input { color: var(--paper); }
.scene .letter-form input::placeholder { color: rgba(243, 237, 227, .45); }

/* ---------- footer: the mud the reeds grow from ---------- */
.foot { background: var(--mud); overflow: hidden; }
.foot .wrap { position: relative; z-index: 1; }
.roots { position: absolute; left: 0; top: 0; width: 100%; height: 170px; pointer-events: none; }

/* ---------- depth gauge ---------- */
.gauge { position: fixed; right: 20px; top: 27vh; height: 46vh; width: 1px; z-index: 40; pointer-events: none; color: var(--paper); font: 400 10px/1 var(--mono); letter-spacing: .08em; opacity: 0; transition: opacity .6s; }
body.deep .gauge { opacity: .8; }
.gauge-scale { position: absolute; inset: 0; background: rgba(243, 237, 227, .25); }
.gauge-scale b { position: absolute; right: 0; width: 5px; height: 1px; background: rgba(243, 237, 227, .45); }
.gauge-scale b.m { width: 9px; }
.gauge-scale b span { position: absolute; right: 14px; top: -4px; opacity: .5; white-space: nowrap; }
.gauge-mark { position: absolute; right: 0; top: 0; display: flex; align-items: center; gap: 8px; }
.gauge-mark i { width: 16px; height: 1px; background: var(--straw); }
.gauge-mark span { color: var(--straw); white-space: nowrap; margin-top: -1px; }
@media (max-width: 900px) { .gauge { display: none; } }