/* ---------- tokens ---------- */
:root{
  --bg:#0B1E26; --bg-2:#10303B; --bg-3:#081419;
  --ink:#ECE7DC; --ink-muted:#A8B7BB; --line:rgba(168,183,187,.22);
  --lamp:#F2C14E; --lamp-text:#F2C14E; --lamp-ink:#0B1E26; --glow:#5CCBE8; --verdigris:#6FA894;
  --link:#86D8EE; --field:rgba(236,231,220,.06);
  --display:"IM Fell English","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:"Schibsted Grotesk","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --wrap:1220px;
  color-scheme:dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
/* the whole site is dark, whatever the visitor's light/dark setting */
.night{
  --bg:#0B1E26; --bg-2:#10303B; --bg-3:#081419;
  --ink:#ECE7DC; --ink-muted:#A8B7BB; --line:rgba(168,183,187,.22);
  --link:#86D8EE; --field:rgba(236,231,220,.06); --verdigris:#6FA894; --lamp-text:#F2C14E;
  color-scheme:dark;
  background:var(--bg); color:var(--ink);
}

*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth; scroll-padding-top:calc(env(safe-area-inset-top,0px) + 76px); -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:1.075rem; line-height:1.62; font-kerning:normal; text-rendering:optimizeLegibility}
img{max-width:100%; height:auto; display:block}
a{color:var(--link); text-underline-offset:.18em; text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--lamp-text); outline-offset:3px; border-radius:2px}
h1,h2,h3{font-family:var(--display); font-weight:400; line-height:1.05; margin:0; letter-spacing:-.005em}
h2{font-size:clamp(2.2rem,4.6vw,3.7rem); max-width:20ch}
h3{font-size:clamp(1.55rem,2.4vw,2rem)}
/* an Old English name with its English translation underneath */
.gloss{display:block; margin-top:.5rem; font-family:var(--sans); font-style:normal; font-weight:500; font-size:clamp(1.05rem,1.5vw,1.28rem); line-height:1.3; letter-spacing:.005em; color:color-mix(in srgb, var(--ink) 82%, transparent)}
.library .gloss{margin:.45rem 0 .55rem; font-size:1.05rem}
.spec-table th .gloss{margin-top:.2rem; font-size:.92rem}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1.25rem,4vw,3rem)}
.band{padding-block:clamp(4.5rem,9vw,8.5rem)}
.lede{font-size:clamp(1.15rem,1.6vw,1.32rem); line-height:1.55; color:var(--ink); max-width:60ch}
.muted{color:var(--ink-muted)}
.prose{max-width:66ch}
.section-head{display:grid; gap:1.25rem; margin-bottom:clamp(2.5rem,5vw,4rem)}
.section-head p{max-width:62ch; color:var(--ink-muted); margin:0; font-size:1.12rem}
.skip{position:absolute; left:-999px; top:0}
.skip:focus{left:1rem; top:1rem; z-index:100; background:var(--lamp); color:var(--lamp-ink); padding:.5rem 1rem}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font:600 1rem/1 var(--sans); padding:1rem 1.5rem; border-radius:999px; text-decoration:none; border:1px solid transparent; cursor:pointer; transition:background-color .2s, color .2s, border-color .2s}
.btn-lamp{background:var(--lamp); color:var(--lamp-ink)}
.btn-lamp:hover{background:#FFD36B}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-row{display:flex; flex-wrap:wrap; gap:.75rem}

/* ---------- header ---------- */
.site-head{position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line); padding-top:env(safe-area-inset-top,0px); margin-top:calc(-1 * env(safe-area-inset-top,0px))}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; height:68px}
.brand{display:block; flex:none}
.brand img{height:42px; width:auto}
.nav{display:flex; align-items:center; gap:clamp(.9rem,1.8vw,1.7rem)}
.nav a{color:var(--ink); text-decoration:none; font-size:.95rem; font-weight:500}
.nav a:hover{color:var(--lamp)}
.nav .btn{padding:.7rem 1.15rem; font-size:.92rem}
.nav .btn:hover{color:var(--lamp-ink)}
.menu{display:none; position:relative}
.menu summary{list-style:none; cursor:pointer; padding:.55rem .9rem; border:1px solid var(--line); border-radius:999px; font-weight:600; font-size:.92rem}
.menu summary::-webkit-details-marker{display:none}
.menu-panel{position:absolute; right:0; top:calc(100% + .6rem); background:var(--bg-2); border:1px solid var(--line); border-radius:14px; padding:.6rem; display:grid; min-width:220px; box-shadow:0 18px 40px rgba(0,0,0,.35)}
.menu-panel a{padding:.7rem .9rem; color:var(--ink); text-decoration:none; border-radius:8px}
.menu-panel a:hover{background:var(--field)}
@media (max-width:960px){ .nav{display:none} .menu{display:block} }
.home-head .nav{gap:clamp(.7rem,1.2vw,1.1rem)}
@media(max-width:1170px){.home-head .nav{display:none}.home-head .menu{display:block}}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; background:var(--bg)}
.hero-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); min-height:min(92vh,880px); align-items:center}
.hero-copy{position:relative; z-index:2; padding-block:clamp(3rem,6vw,5rem); padding-inline:clamp(1.25rem,4vw,3rem) 0; max-width:640px; margin-left:max(0px, calc((100vw - var(--wrap))/2))}
.hero h1{font-size:clamp(3.6rem,8.4vw,7.6rem); line-height:.9; letter-spacing:-.015em}
.hero h1 span{display:block}
.hero .subtitle{font-family:var(--display); font-style:italic; font-size:clamp(1.6rem,2.8vw,2.4rem); color:var(--lamp); margin:.5rem 0 1.6rem}
.hero .lede{margin-bottom:2rem; max-width:34ch}
.hero-facts{list-style:none; margin:2.6rem 0 0; padding:1.4rem 0 0; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem; font-size:.92rem; color:var(--ink-muted); line-height:1.4}
.hero-facts strong{display:block; color:var(--ink); font-weight:600; margin-bottom:.2rem}
.hero-media{position:relative; align-self:stretch; min-height:520px}
.hero-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 38%}
.hero-media::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--bg) 0%, rgba(11,30,38,.55) 16%, rgba(11,30,38,0) 40%), linear-gradient(0deg, var(--bg) 0%, rgba(11,30,38,0) 22%)}
@media (prefers-reduced-motion: no-preference){
  .hero-media img{animation:surface 2.4s cubic-bezier(.2,.7,.2,1) both}
  .hero-copy > *{animation:rise 1s cubic-bezier(.2,.7,.2,1) both}
  .hero-copy > *:nth-child(2){animation-delay:.12s}
  .hero-copy > *:nth-child(3){animation-delay:.22s}
  .hero-copy > *:nth-child(4){animation-delay:.32s}
  .hero-copy > *:nth-child(5){animation-delay:.42s}
}
@keyframes surface{from{filter:brightness(.12) saturate(.4); transform:scale(1.06)} to{filter:none; transform:none}}
@keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr; min-height:0}
  .hero-media{order:-1; min-height:0; height:64vh; max-height:560px}
  .hero-media::after{background:linear-gradient(0deg, var(--bg) 2%, rgba(11,30,38,0) 45%)}
  .hero-copy{margin:-5rem 0 0; padding-inline:clamp(1.25rem,4vw,3rem); padding-top:0}
  .hero-facts{grid-template-columns:1fr; gap:.9rem}
}

/* ---------- instruments ---------- */
.ruler{position:relative; margin:0 0 clamp(3rem,6vw,4.5rem); padding:1.75rem clamp(1rem,2.5vw,2rem) 1rem; background:var(--field); border-radius:18px}
.ruler-row{position:relative; height:46px}
.ruler-bar{position:absolute; top:22px; height:12px; border-radius:6px}
.ruler-label{position:absolute; top:0; font-size:.84rem; white-space:nowrap; color:var(--ink)}
.ruler-label.end{transform:translateX(-100%)}
.ruler-axis{position:relative; height:28px; margin-top:.4rem; border-top:1px solid var(--line)}
.ruler-tick{position:absolute; top:6px; white-space:nowrap; transform:translateX(-50%); font-size:.78rem; color:var(--ink-muted)}
.ruler-tick::before{content:""; position:absolute; left:50%; top:-12px; width:1px; height:6px; background:var(--line)}
.ruler-note{font-size:.86rem; color:var(--ink-muted); margin:.9rem 0 0}
.t-short{display:none}
@media (max-width:640px){ .t-long{display:none} .t-short{display:inline} }
@media (max-width:640px){ .ruler-row{height:auto; padding-bottom:20px; margin-bottom:.5rem} .ruler-label{position:static; display:block; white-space:normal; transform:none; font-size:.82rem; line-height:1.35} .ruler-label.end{transform:none} .ruler-bar{top:auto; bottom:2px; height:10px} }
.instrument-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.5rem,3.5vw,3.25rem)}
.instrument h3{margin-bottom:.9rem}
.instrument p{color:var(--ink-muted)}
.instrument .start{color:var(--ink); border-left:2px solid var(--lamp-text); padding-left:1rem; margin-top:1.25rem}
.also{margin-top:clamp(2.5rem,5vw,3.5rem); padding-top:1.5rem; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.5rem}
.also div{font-size:.95rem; color:var(--ink-muted); line-height:1.45}
.also strong{display:block; color:var(--ink); font-size:1.02rem; font-weight:600; margin-bottom:.25rem}
@media (max-width:900px){ .instrument-grid{grid-template-columns:1fr} .also{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .also{grid-template-columns:1fr} }

/* ---------- signal path ---------- */
.stations{list-style:none; margin:0; padding:0; counter-reset:station; position:relative}
.station{position:relative; display:grid; grid-template-columns:72px minmax(0,1fr); column-gap:clamp(1rem,3vw,2.5rem); padding-bottom:clamp(3rem,6vw,4.5rem)}
.station::before{counter-increment:station; content:counter(station); grid-column:1; grid-row:1 / span 3; width:56px; height:56px; border-radius:50%; border:1px solid var(--lamp-text); color:var(--lamp-text); display:grid; place-items:center; font-family:var(--display); font-size:1.6rem; background:var(--bg); position:relative; z-index:1}
.station::after{content:""; position:absolute; left:28px; top:56px; bottom:0; width:1px; background:linear-gradient(var(--lamp-text), var(--line))}
.station:last-child::after{display:none}
/* a scene above each station: a full-bleed panorama the heading sits at the foot of */
#path{overflow-x:clip}
.stations .station{--scene-full:calc(100vw * 821 / 1916); --scene-h:calc(var(--scene-full) * .64); padding-top:var(--scene-h)}
.stations .station::after{top:0}
.stations .station:first-child::after{top:calc(var(--scene-h) + 56px)}
.station-scene{grid-column:1 / -1; position:absolute; z-index:0; left:50%; width:100vw; transform:translateX(-50%); top:0; height:var(--scene-full); pointer-events:none; -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 5%, #000 84%, transparent 100%); mask-image:linear-gradient(to bottom, transparent 0, #000 5%, #000 84%, transparent 100%)}
.station-scene img{width:100%; height:100%; object-fit:cover; object-position:var(--focus,62%) 45%; opacity:.92}
.station-scene::after{content:""; position:absolute; inset:0; background:radial-gradient(ellipse 62% 58% at 26% 100%, rgba(11,30,38,.62) 0, rgba(11,30,38,.34) 55%, rgba(11,30,38,0) 100%), linear-gradient(to right, rgba(11,30,38,.3) 0, rgba(11,30,38,0) 40%), linear-gradient(to bottom, rgba(11,30,38,0) 56%, rgba(11,30,38,.32) 78%, var(--bg) 100%)}
@media (min-width:761px){ .stations .station > h3, .stations .station > .promise, .stations .station > .tale p{text-shadow:0 1px 14px rgba(11,30,38,.95), 0 0 2px rgba(11,30,38,.6)} }
.station > :not(.station-scene){position:relative; z-index:1}
@media (max-width:760px){ .stations .station{--scene-h:230px} .station-scene{height:calc(var(--scene-h) + 110px); -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 5%, #000 76%, transparent 100%); mask-image:linear-gradient(to bottom, transparent 0, #000 5%, #000 76%, transparent 100%)} .station-scene::after{background:linear-gradient(to bottom, rgba(11,30,38,.1) 0, rgba(11,30,38,.25) 55%, var(--bg) 100%)} }
.station > *{grid-column:2}
.station h3{font-size:clamp(2rem,3.6vw,2.9rem)}
.station .where{color:var(--ink-muted); font-size:.98rem; margin:.4rem 0 1.4rem}
.station-body{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(1.5rem,4vw,3.5rem); align-items:start}
.station-body .hear{font-size:1.12rem}
.tip{margin-top:1.1rem; padding:1rem 1.2rem; background:var(--field); border-radius:12px; font-size:.98rem}
.tip b{font-weight:600}
.spec-list{margin:0; padding:0; list-style:none; font-size:.95rem; border-top:1px solid var(--line)}
.spec-list li{padding:.7rem 0; border-bottom:1px solid var(--line); color:var(--ink-muted)}
.spec-list li b{color:var(--ink); font-weight:600}
.voices{display:grid; gap:1.1rem; margin:1.2rem 0 0}
.voice{display:grid; grid-template-columns:9.5rem minmax(0,1fr); gap:1rem; padding-top:1rem; border-top:1px solid var(--line)}
.voice h4{margin:0; font-family:var(--display); font-weight:400; font-size:1.4rem; line-height:1.15}
.voice p{margin:0; color:var(--ink-muted); font-size:1rem}
@media (max-width:820px){ .station-body{grid-template-columns:1fr} .station{grid-template-columns:44px minmax(0,1fr)} .station::before{width:40px; height:40px; font-size:1.2rem} .station::after{left:20px; top:40px} .voice{grid-template-columns:1fr; gap:.3rem} }

/* ---------- explorer ---------- */
.explorer{background:radial-gradient(70% 60% at 78% 30%, rgba(92,203,232,.09), transparent 70%), var(--bg)}
.explorer-grid{display:grid; grid-template-columns:minmax(0,8fr) minmax(280px,4fr); gap:clamp(1.5rem,3vw,2.5rem); align-items:start}
.chart-box{background:var(--bg-3); border:1px solid var(--line); border-radius:20px; padding:clamp(.75rem,2vw,1.25rem)}
#chart{width:100%; display:block}
#chart text{font-family:var(--sans); fill:var(--ink-muted); font-size:12px}
#chart .grid{stroke:rgba(168,183,187,.12); stroke-width:1}
#chart .hearing{fill:rgba(236,231,220,.04)}
#chart .curve{fill:none; stroke:var(--glow); stroke-width:2.5; filter:drop-shadow(0 0 6px rgba(92,203,232,.55))}
#chart .area{fill:url(#curveFill)}
#chart .marker{stroke:rgba(242,193,78,.55); stroke-dasharray:3 4}
#chart .marker-label{fill:var(--lamp); font-size:11px}
#chart .zero{stroke:rgba(236,231,220,.35)}
.controls{display:grid; gap:1.1rem}
.control{background:var(--field); border-radius:16px; padding:1.1rem 1.2rem 1.15rem}
.control-top{display:flex; justify-content:space-between; align-items:baseline; gap:1rem}
.control label{font-family:var(--display); font-size:1.45rem}
.control output{font-size:.9rem; color:var(--lamp); font-variant-numeric:tabular-nums; white-space:nowrap}
.control .says{font-size:.92rem; color:var(--ink-muted); margin:.5rem 0 0; min-height:2.8em; line-height:1.45}
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:28px; background:transparent; margin:.4rem 0 0; cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:4px; border-radius:2px; background:linear-gradient(90deg, var(--lamp) 0 var(--fill,50%), rgba(168,183,187,.3) var(--fill,50%) 100%)}
input[type=range]::-moz-range-track{height:4px; border-radius:2px; background:rgba(168,183,187,.3)}
input[type=range]::-moz-range-progress{height:4px; border-radius:2px; background:var(--lamp)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:var(--ink); border:3px solid var(--lamp); margin-top:-9px; box-shadow:0 0 0 4px rgba(242,193,78,.18)}
input[type=range]::-moz-range-thumb{width:16px; height:16px; border-radius:50%; background:var(--ink); border:3px solid var(--lamp)}
.check{display:flex; gap:.7rem; align-items:center; font-size:.98rem; cursor:pointer}
.check input{width:20px; height:20px; accent-color:var(--lamp)}
.readouts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:1rem}
.readouts div{font-size:.85rem; color:var(--ink-muted); line-height:1.35}
.readouts b{display:block; font-size:1.25rem; color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}
.chart-note{font-size:.85rem; color:var(--ink-muted); margin:1rem .25rem 0}
.link-btn{background:none; border:0; color:var(--link); font:inherit; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:.18em}
@media (max-width:980px){ .explorer-grid{grid-template-columns:1fr} }
@media (max-width:520px){ .readouts{grid-template-columns:1fr 1fr} }

/* ---------- listen ---------- */
.video-main{margin-bottom:clamp(1rem,2vw,1.5rem)}
.video-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2vw,1.5rem)}
.video{position:relative; aspect-ratio:16/9; border-radius:16px; overflow:hidden; background:var(--bg-3); border:1px solid var(--line)}
.video iframe,.video video{position:absolute; inset:0; width:100%; height:100%; border:0; background:#000}
.video .placeholder{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(1rem,2.5vw,1.75rem); background-size:cover; background-position:center; color:#ECE7DC}
.video .placeholder::before{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(8,20,25,.92) 0%, rgba(8,20,25,.35) 60%, rgba(8,20,25,.15))}
.video .placeholder > *{position:relative}
.video .placeholder h3{font-size:clamp(1.4rem,2.6vw,2.2rem)}
.video .placeholder p{margin:.35rem 0 0; color:#C9D3D5; font-size:.95rem; max-width:52ch}
.video .soon{display:inline-block; align-self:flex-start; margin-bottom:.75rem; font-size:.8rem; font-weight:600; padding:.3rem .7rem; border-radius:999px; background:rgba(242,193,78,.16); color:var(--lamp)}
.video-small .placeholder h3{font-size:1.45rem}
.video-cap{margin:.7rem 0 0; font-size:.95rem; color:var(--ink-muted)}
@media (max-width:820px){ .video-grid{grid-template-columns:1fr} }

/* ---------- recipes ---------- */
.recipes{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(2rem,5vw,4.5rem)}
.recipe{padding:1.5rem 0; border-top:1px solid var(--line)}
.recipe h3{font-size:1.75rem; margin-bottom:.6rem}
.recipe .set{margin:0 0 .6rem; font-weight:500}
.recipe p:last-child{margin:0; color:var(--ink-muted); font-size:.98rem}
@media (max-width:820px){ .recipes{grid-template-columns:1fr} }

/* ---------- steward ---------- */
.steward{position:relative; overflow:hidden}
.steward::before{content:""; position:absolute; inset:0; background:url("/images/steward-texture.webp") center/600px repeat; opacity:.07; mix-blend-mode:screen; pointer-events:none}
.steward .wrap{position:relative}
.steward-intro{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:clamp(2rem,5vw,4.5rem); align-items:end; margin-bottom:clamp(2.5rem,5vw,4rem)}
.steward-intro .subtitle{font-family:var(--display); font-style:italic; color:var(--lamp); font-size:clamp(1.3rem,2.2vw,1.8rem); margin:.6rem 0 0}
.steward-points{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.5rem,3.5vw,3rem) clamp(2rem,5vw,4.5rem)}
.steward-points h3{font-size:1.65rem; margin-bottom:.6rem}
.steward-points p{color:var(--ink-muted); margin:0}
.steward-figure{margin:clamp(3rem,6vw,4.5rem) 0 0; display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(1.5rem,4vw,3.5rem); align-items:center}
.steward-figure img{border-radius:14px; border:1px solid var(--line); background:#fff}
.steward-figure figcaption{color:var(--ink-muted)}
.steward-figure figcaption p{margin-bottom:1.25rem}
.dl-list{list-style:none; margin:1.25rem 0 0; padding:0; display:grid; gap:.6rem}
.dl-list a{display:flex; justify-content:space-between; gap:1rem; padding:.85rem 1rem; border:1px solid var(--line); border-radius:12px; color:var(--ink); text-decoration:none}
.dl-list a:hover{border-color:var(--lamp)}
.dl-list span{color:var(--ink-muted); font-size:.88rem; white-space:nowrap}
@media (max-width:860px){ .steward-intro,.steward-points,.steward-figure{grid-template-columns:1fr} }

/* ---------- built / specs ---------- */
.built-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.5rem,3.5vw,3rem); margin-bottom:clamp(3rem,6vw,5rem)}
.built-grid h3{font-size:1.5rem; margin-bottom:.55rem}
.built-grid p{color:var(--ink-muted); margin:0; font-size:1rem}
.spec-table{width:100%; border-collapse:collapse; font-size:.98rem}
.spec-table caption{text-align:left; font-family:var(--display); font-size:clamp(1.8rem,3vw,2.4rem); margin-bottom:1rem}
.spec-table th,.spec-table td{text-align:left; vertical-align:top; padding:.95rem 0; border-top:1px solid var(--line)}
.spec-table th{width:30%; padding-right:1.5rem; font-weight:600}
.spec-table td{color:var(--ink-muted)}
.service-h{margin:clamp(2.5rem,5vw,3.5rem) 0 .8rem}
.service-note{color:var(--ink-muted); max-width:68ch; margin:0; font-size:.98rem}
@media (max-width:900px){ .built-grid{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .built-grid{grid-template-columns:1fr} .spec-table th,.spec-table td{display:block; width:auto; padding:.2rem 0} .spec-table th{padding-top:1rem} .spec-table td{border-top:0; padding-bottom:1rem} }

/* ---------- gallery ---------- */
.gallery{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-auto-rows:clamp(120px,14vw,190px); gap:clamp(.6rem,1.4vw,1rem)}
.gallery button{all:unset; display:block; cursor:zoom-in; position:relative; overflow:hidden; border-radius:14px; background:var(--bg-3)}
.gallery button:focus-visible{outline:2px solid var(--lamp-text); outline-offset:3px}
.gallery img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.gallery button:hover img{transform:scale(1.03)}
.gallery .g1{grid-column:span 4; grid-row:span 3} .gallery .g2{grid-column:span 4; grid-row:span 3} .gallery .g3{grid-column:span 4; grid-row:span 3}
.gallery .g4{grid-column:span 3; grid-row:span 2} .gallery .g5{grid-column:span 6; grid-row:span 2} .gallery .g6{grid-column:span 3; grid-row:span 2}
.gallery .g5 img{object-position:50% 30%}
@media (max-width:760px){ .gallery{grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:46vw} .gallery button{grid-column:span 1 !important; grid-row:span 1 !important} .gallery .g5{grid-column:span 2 !important} }

/* ---------- guides ---------- */
.guide-cols{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.5rem,3.5vw,3rem)}
.guide-cols h3{font-size:1.5rem; margin-bottom:.4rem}
.guide-cols > div > p{color:var(--ink-muted); font-size:.98rem}
.guide-list{list-style:none; margin:0; padding:0; display:grid; gap:.6rem}
.guide-list button,.guide-list a{all:unset; box-sizing:border-box; width:100%; cursor:pointer; display:block; padding:.95rem 1.1rem; border:1px solid var(--line); border-radius:12px; color:var(--ink)}
.guide-list button:hover,.guide-list a:hover{border-color:var(--lamp-text)}
.guide-list button:focus-visible,.guide-list a:focus-visible{outline:2px solid var(--lamp-text); outline-offset:2px}
.guide-list small{display:block; color:var(--ink-muted); font-size:.86rem; margin-top:.15rem}
@media (max-width:900px){ .guide-cols{grid-template-columns:1fr} }

/* ---------- order ---------- */
.order-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(2rem,5vw,5rem); align-items:center}
.order-img{border-radius:22px; overflow:hidden; aspect-ratio:4/5; background:var(--bg-3)}
.order-img img{width:100%; height:100%; object-fit:cover}
.order h2{max-width:none; font-size:clamp(2.6rem,5vw,4.2rem)}
.order .subtitle{font-family:var(--display); font-style:italic; color:var(--lamp); font-size:clamp(1.4rem,2.2vw,1.9rem); margin:.3rem 0 1.6rem}
.price{font-size:2rem; font-weight:600; margin:0 0 .35rem; font-variant-numeric:tabular-nums}
.price-note{color:var(--ink-muted); margin-bottom:1.75rem}
.included{list-style:none; margin:2rem 0 0; padding:0; border-top:1px solid var(--line)}
.included li{padding:.85rem 0 .85rem 1.6rem; border-bottom:1px solid var(--line); position:relative; color:var(--ink-muted)}
.included li::before{content:""; position:absolute; left:0; top:1.35rem; width:.55rem; height:.55rem; border-radius:50%; background:var(--lamp)}
.included b{color:var(--ink); font-weight:600}
@media (max-width:860px){ .order-grid{grid-template-columns:1fr} .order-img{aspect-ratio:1/1} }

/* ---------- faq ---------- */
.faq{max-width:860px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; list-style:none; padding:1.3rem 2.5rem 1.3rem 0; position:relative; font-family:var(--display); font-size:clamp(1.3rem,2vw,1.6rem); line-height:1.2}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:.25rem; top:1.15rem; font-family:var(--sans); font-size:1.5rem; color:var(--lamp-text); transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details > div{padding:0 0 1.4rem; color:var(--ink-muted); max-width:68ch}

/* ---------- footer ---------- */
.site-foot{background:var(--bg-3); padding-block:clamp(3rem,6vw,4.5rem) calc(2rem + env(safe-area-inset-bottom,0px))}
.foot-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:2rem; align-items:start}
.foot-grid img{height:64px; width:auto; margin-bottom:1rem}
.foot-grid p{color:var(--ink-muted); font-size:.95rem; max-width:44ch}
.foot-links{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem 1.5rem}
.foot-links a{color:var(--ink); text-decoration:none; font-size:.95rem}
.foot-links a:hover{color:var(--lamp)}
.fine{margin-top:2.5rem; padding-top:1.25rem; border-top:1px solid var(--line); color:var(--ink-muted); font-size:.85rem; display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem}
@media (max-width:760px){ .foot-grid{grid-template-columns:1fr} .foot-links{grid-template-columns:1fr 1fr} }

/* ---------- dialogs ---------- */
dialog{border:0; padding:0; background:transparent; color:inherit; max-width:none; max-height:none}
dialog::backdrop{background:rgba(4,12,16,.82); backdrop-filter:blur(4px)}
.reader{width:min(860px,94vw); height:min(88vh,1100px); margin:auto}
.reader-inner{height:100%; display:flex; flex-direction:column; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:20px; overflow:hidden}
.reader-head{display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; padding:1.4rem clamp(1.25rem,3vw,2.25rem); border-bottom:1px solid var(--line)}
.reader-head h2{font-size:clamp(1.6rem,3vw,2.3rem); max-width:none}
.reader-head p{margin:.3rem 0 0; color:var(--lamp); font-family:var(--display); font-style:italic; font-size:1.15rem}
.close{flex:none; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--ink); font-size:1.4rem; line-height:1; cursor:pointer}
.close:hover{border-color:var(--lamp)}
.reader-body{overflow:auto; padding:1.5rem clamp(1.25rem,3vw,2.25rem) 2.5rem; overscroll-behavior:contain}
.reader-body h3{font-size:1.75rem; margin:2rem 0 .8rem}
.reader-body h3:first-child{margin-top:.25rem}
.reader-body h4{font-family:var(--sans); font-weight:600; font-size:1.08rem; margin:1.6rem 0 .5rem}
.reader-body p,.reader-body li{color:var(--ink-muted); max-width:70ch}
.reader-body strong{color:var(--ink)}
.reader-body ul{padding-left:1.2rem}
.reader-body li{margin-bottom:.6rem}
.reader-body table{border-collapse:collapse; width:100%; font-size:.9rem; margin:1rem 0 1.5rem; display:block; overflow-x:auto}
.reader-body th,.reader-body td{text-align:left; vertical-align:top; padding:.6rem .8rem .6rem 0; border-top:1px solid var(--line); min-width:7rem}
.reader-body th{color:var(--ink)}
.reader-body colgroup{display:none}
.guide-fig{margin:1rem 0 1.5rem}
.guide-fig img{border-radius:12px; background:#fff}
.guide-fig figcaption{font-size:.88rem; color:var(--ink-muted); margin-top:.6rem}
.lightbox{width:min(1100px,96vw); margin:auto}
.lightbox figure{margin:0; position:relative}
.lightbox img{max-height:84vh; width:auto; margin:0 auto; border-radius:14px}
.lightbox figcaption{text-align:center; color:#ECE7DC; margin-top:.8rem; font-size:.98rem}
.lightbox .close{position:absolute; top:.75rem; right:.75rem; background:rgba(8,20,25,.7); color:#ECE7DC; border-color:rgba(236,231,220,.3)}

/* =====================================================================
   Multi-page additions (player's guide and technical library)
   ===================================================================== */
.nav a[aria-current="page"]{color:var(--lamp)}
.menu-panel a[aria-current="page"]{color:var(--lamp)}
.menu-panel .menu-sep{height:1px; background:var(--line); margin:.35rem .4rem}

/* station: what to reach for, and where to read more */
.use-list h4{margin:0 0 .6rem; font:600 .98rem/1.3 var(--sans); color:var(--ink)}
.use-list ul{margin:0; padding:0; list-style:none; font-size:.98rem; border-top:1px solid var(--line)}
.use-list li{padding:.7rem 0; border-bottom:1px solid var(--line); color:var(--ink-muted)}
.station-links{display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; margin-top:1.1rem; font-size:.98rem}
.station-links a{font-weight:600}
.more-link{margin:2rem 0 0; font-weight:600}

/* sub-page header band */
.page-head{padding-block:clamp(2.5rem,6vw,4.75rem) clamp(2.5rem,5vw,4rem); border-bottom:1px solid var(--line); position:relative; overflow:hidden}
.page-head::before{content:""; position:absolute; inset:0; background:url("/images/steward-texture.webp") center/600px repeat; opacity:.05; mix-blend-mode:screen; pointer-events:none}
.page-head .wrap{position:relative}
.page-head h1{font-size:clamp(2.8rem,6.4vw,5.2rem); line-height:.95; letter-spacing:-.01em; max-width:16ch}
.page-head .subtitle{font-family:var(--display); font-style:italic; color:var(--lamp); font-size:clamp(1.3rem,2.2vw,1.8rem); margin:.6rem 0 1.2rem}
.page-head .lede{color:var(--ink-muted); max-width:58ch; margin:0}
.crumbs{margin:0 0 1.6rem; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:.3rem; font-size:.92rem; color:var(--ink-muted)}
.crumbs li + li::before{content:"/"; margin-right:.4rem; opacity:.6}
.crumbs a{color:var(--ink-muted); text-decoration:none}
.crumbs a:hover{color:var(--ink); text-decoration:underline}

/* long-form layout with a table of contents */
.band.doc{padding-top:clamp(2.5rem,5vw,4rem)}
.doc-grid{display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem); align-items:start}
.toc{position:sticky; top:calc(env(safe-area-inset-top,0px) + 92px); font-size:.95rem}
.toc h2{font-family:var(--sans); font-size:.95rem; font-weight:600; margin:0 0 .7rem; max-width:none}
.toc ol{list-style:none; margin:0; padding:0; border-left:1px solid var(--line)}
.toc a{display:block; padding:.4rem 0 .4rem 1rem; margin-left:-1px; border-left:2px solid transparent; color:var(--ink-muted); text-decoration:none; line-height:1.3}
.toc a:hover{color:var(--ink); border-left-color:var(--lamp-text)}
.toc-mobile{display:none; margin-bottom:2rem; border:1px solid var(--line); border-radius:14px}
.toc-mobile summary{cursor:pointer; padding:.9rem 1.1rem; font-weight:600}
.toc-mobile ol{margin:0; padding:0 1.1rem 1rem 2.2rem; color:var(--ink-muted)}
.toc-mobile li{padding:.25rem 0}
.toc-mobile a{color:var(--ink)}
@media (max-width:960px){ .doc-grid{grid-template-columns:minmax(0,1fr)} .toc{display:none} .toc-mobile{display:block} }

.doc-body{max-width:74ch}
.doc-body > section{padding-bottom:clamp(2.5rem,5vw,3.5rem); margin-bottom:clamp(2.5rem,5vw,3.5rem); border-bottom:1px solid var(--line)}
.doc-body > section:last-child{border-bottom:0; margin-bottom:0}
.doc-body h2{font-size:clamp(2rem,3.4vw,2.8rem); max-width:none; margin:0 0 .5rem}
.doc-body h3{font-size:clamp(1.45rem,2.2vw,1.75rem); margin:2.2rem 0 .7rem}
.doc-body h4{font-family:var(--sans); font-weight:600; font-size:1.08rem; margin:1.7rem 0 .5rem}
.doc-body .where{color:var(--ink-muted); margin:0 0 1.5rem}
.doc-body p,.doc-body li{color:var(--ink-muted)}
.doc-body strong{color:var(--ink)}
.doc-body ul,.doc-body ol{padding-left:1.2rem}
.doc-body li{margin-bottom:.6rem}
.doc-body .table-wrap{overflow-x:auto; margin:1rem 0 1.5rem}
.doc-body table{border-collapse:collapse; width:100%; font-size:.92rem}
.doc-body th,.doc-body td{text-align:left; vertical-align:top; padding:.65rem .9rem .65rem 0; border-top:1px solid var(--line); min-width:7rem}
.doc-body th{color:var(--ink)}
.doc-body colgroup{display:none}
.doc-body .cross{margin:1.75rem 0 0; padding:1rem 1.2rem; background:var(--field); border-radius:12px; color:var(--ink)}
.doc-body .cross a{font-weight:600}
.doc-body .recipes{grid-template-columns:1fr}

/* figures computed from component values */
.fig-chart{margin:1.75rem 0 2rem}
.fig-box{background:#081419; border:1px solid rgba(168,183,187,.22); border-radius:18px; padding:clamp(.6rem,1.6vw,1rem) clamp(.6rem,1.6vw,1rem) 1rem}
.fig-box svg{width:100%; height:auto; display:block}
.fig-box svg text{font-family:var(--sans); fill:#A8B7BB}
.fig-box .svg-narrow{display:none}
@media (max-width:640px){ .fig-box .svg-wide{display:none} .fig-box .svg-narrow{display:block} }
.fig-legend{list-style:none; margin:.5rem .4rem 0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem 1.3rem; font-size:.86rem; color:#C9D3D5}
.fig-legend li{display:flex; align-items:center; gap:.5rem; margin:0; color:#C9D3D5}
.fig-legend .sw{width:22px; height:3px; border-radius:2px; flex:none}
.fig-chart figcaption{font-size:.92rem; color:var(--ink-muted); margin-top:.75rem; max-width:70ch}
.fig-chart figcaption b{color:var(--ink); font-weight:600}
.guide-fig{margin:1.5rem 0 2rem}
.guide-fig img{border-radius:12px; background:#fff}
.guide-fig figcaption{font-size:.9rem; color:var(--ink-muted); margin-top:.6rem}

/* previous / next */
.pager{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:clamp(2.5rem,5vw,3.5rem)}
.pager a{display:block; padding:1rem 1.2rem; border:1px solid var(--line); border-radius:14px; text-decoration:none; color:var(--ink)}
.pager a:hover{border-color:var(--lamp-text)}
.pager small{display:block; color:var(--ink-muted); font-size:.86rem}
.pager .next{text-align:right; grid-column:2}
@media (max-width:600px){ .pager{grid-template-columns:1fr} .pager .next{grid-column:1; text-align:left} }

/* technical hub */
.library{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1rem,2.5vw,1.75rem)}
.library a{display:block; padding:1.4rem 1.5rem 1.5rem; border:1px solid var(--line); border-radius:16px; color:var(--ink); text-decoration:none}
.library a:hover{border-color:var(--lamp-text)}
.library h3{font-size:1.7rem; margin-bottom:.35rem}
.library .kind{color:var(--lamp-text); font-family:var(--display); font-style:italic; font-size:1.15rem; margin:0 0 .7rem}
.library p{color:var(--ink-muted); margin:0; font-size:.98rem}
@media (max-width:760px){ .library{grid-template-columns:1fr} }
.notfound .btn-row{margin-top:2rem}

#built .built-grid{margin-bottom:0}
/* ---------- hero: the whole pedal, alive ---------- */
.hero-media.pedal-media{position:relative; min-height:560px}
.hero-media.pedal-media::after{content:none}
.pedal-media::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 46% 40% at 50% 40%, rgba(70,140,255,.20), rgba(70,140,255,0) 70%)}
.pedal-stage{position:absolute; left:50%; top:50%; translate:-50% -50%;
  height:calc(100% - 5rem); max-height:820px; aspect-ratio:919/1654;
  transform-origin:49.2% 40.45%; will-change:transform}
.pedal-stage .pedal-art{position:absolute; inset:0}
.pedal-stage img{position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:contain;
  filter:drop-shadow(0 26px 44px rgba(0,0,0,.6))}
/* the live layer sits exactly over the porthole glass */
.pedal-live{position:absolute; pointer-events:none;
  left:calc(145 / 919 * 100%); top:calc(365 / 1654 * 100%);
  width:calc(614 / 919 * 100%); height:calc(608 / 1654 * 100%)}
@media (prefers-reduced-motion: no-preference){
  .pedal-stage .pedal-art{animation:surface 2.4s cubic-bezier(.2,.7,.2,1) both}
}
@media (max-width:860px){
  .hero-media.pedal-media{height:68vh; min-height:420px; max-height:600px}
  .pedal-stage{height:calc(100% - 2.5rem)}
  .hero-copy.pedal-copy{margin-top:0}
}
.pedal-stage img{animation:none}

/* ---------- player's guide header: the glowing porthole ---------- */
.page-head.portrait{min-height:clamp(440px,54vh,580px); display:flex; align-items:center}
.page-head.portrait::before{z-index:1}
.page-head.portrait .wrap{width:100%; z-index:2}
.page-head.portrait .lede{max-width:40ch}
.page-portrait{position:absolute; top:0; right:0; bottom:0; width:min(50%,760px); margin:0;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(0deg, transparent 0%, #000 22%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(0deg, transparent 0%, #000 22%);
  mask-composite:intersect}
.page-portrait img{width:100%; height:100%; object-fit:cover; object-position:50% 40%}
@media (max-width:860px){
  .page-head.portrait{display:block; min-height:0; padding-top:0}
  .page-portrait{position:relative; width:auto; height:min(58vh,460px); margin-inline:0;
    -webkit-mask-image:linear-gradient(0deg, transparent 0%, #000 45%); mask-image:linear-gradient(0deg, transparent 0%, #000 45%)}
  .page-head.portrait .wrap{margin-top:-3.5rem}
}
.price-label{margin:-.1rem 0 .9rem; font-family:var(--display); font-style:italic; font-size:1.2rem; color:var(--lamp-text)}
.nav .btn-lamp{color:var(--lamp-ink)}

/* ---------- art from the inside out ---------- */
.inside-photos{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr); gap:clamp(1rem,2.4vw,1.75rem); align-items:start; margin-bottom:clamp(3rem,6vw,4.5rem)}
.inside-photos figure{margin:0}
.inside-photos img{width:100%; border-radius:14px; border:1px solid var(--line); aspect-ratio:4/5; object-fit:cover}
.inside-photos .inside-main img{aspect-ratio:auto}
.inside-photos figcaption{margin-top:.8rem; font-size:.95rem; line-height:1.5; color:var(--ink-muted)}
.inside-photos figcaption b{color:var(--ink); font-weight:600}
.inside-sub{margin:0 0 1.4rem}
.inside-list{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(1.5rem,4vw,3.5rem); margin:0 0 clamp(3rem,6vw,4.5rem); border-top:1px solid var(--line)}
.inside-list > div{padding:1.1rem 0 1.2rem; border-bottom:1px solid var(--line)}
.inside-list dt{font-weight:600; color:var(--ink); margin-bottom:.3rem}
.inside-list dd{margin:0; color:var(--ink-muted); max-width:56ch}
.inside-price{display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:clamp(2rem,5vw,4rem); align-items:start}
.inside-price h3{margin-bottom:1rem}
.inside-price p{max-width:62ch; color:var(--ink-muted)}
.edition{padding:1.6rem 1.75rem; border:1px solid color-mix(in srgb, var(--lamp) 45%, transparent); border-radius:16px; background:var(--field)}
.edition ul{list-style:none; margin:0 0 1.1rem; padding:0}
.edition li{padding:.55rem 0 .55rem 1.5rem; position:relative; color:var(--ink)}
.edition li::before{content:""; position:absolute; left:0; top:1.05rem; width:.5rem; height:.5rem; border-radius:50%; background:var(--lamp)}
.edition p{margin:0; font-family:var(--display); font-style:italic; font-size:1.25rem; line-height:1.35; color:var(--lamp-text)}
@media (max-width:960px){
  .inside-photos{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .inside-photos .inside-main{grid-column:1 / -1}
  .inside-photos .inside-main img{aspect-ratio:4/3; object-position:50% 45%}
}
@media (max-width:760px){
  .inside-list,.inside-price{grid-template-columns:1fr}
}
@media (max-width:520px){
  .inside-photos{grid-template-columns:1fr}
  .inside-photos img{aspect-ratio:auto}
  .inside-photos .inside-main img{aspect-ratio:auto}
}

/* ---------- mist and grain over the station scenes ---------- */
.mist{position:absolute; left:0; width:200%; pointer-events:none; background-repeat:repeat-x; background-size:50% 100%; will-change:transform}
.mist-a{top:5%; height:95%; background-image:url("/images/fx/mist-a.webp"); animation:mist-drift 95s linear infinite}
.mist-b{top:30%; height:70%; background-image:url("/images/fx/mist-b.webp"); animation:mist-drift 60s linear infinite reverse}
@keyframes mist-drift{from{transform:translateX(0)} to{transform:translateX(-50%)}}
/* --mist runs from 1 (scene just entering, fogged in) to 0 (scene in view, fog parted) */
.station-scene .mist{animation-play-state:paused}
.station-scene.live .mist,.station-scene.live .grain{animation-play-state:running}
.station-scene .mist-a{opacity:calc(.22 + .78 * var(--mist,1)); translate:calc((1 - var(--mist,1)) * -14%) 0}
.station-scene .mist-b{opacity:calc(.28 + .72 * var(--mist,1)); translate:calc((1 - var(--mist,1)) * 14%) 0}
.station-scene img{filter:contrast(1.06) saturate(.9); transition:none}
.station-scene .grain{position:absolute; inset:-50%; background:url("/images/fx/grain.png"); opacity:.32; mix-blend-mode:overlay; pointer-events:none; animation:grain .9s steps(1) infinite; animation-play-state:paused}
@keyframes grain{0%{transform:translate(0,0)} 16%{transform:translate(-6%,4%)} 33%{transform:translate(5%,-7%)} 50%{transform:translate(-3%,8%)} 66%{transform:translate(8%,2%)} 83%{transform:translate(-7%,-4%)}}
/* the mist that lifts off the page when it loads */
.load-mist{position:fixed; inset:0; z-index:60; pointer-events:none; overflow:hidden; background:radial-gradient(ellipse at 50% 60%, rgba(150,172,178,.35), rgba(11,30,38,.55)); animation:mist-lift 3.2s cubic-bezier(.4,0,.2,1) .35s forwards}
.load-mist .mist-a{top:0; height:100%; opacity:.95}
.load-mist .mist-b{top:20%; height:80%; opacity:.9}
@keyframes mist-lift{to{opacity:0; transform:scale(1.12); visibility:hidden}}
@media (prefers-reduced-motion: reduce){
  .load-mist{display:none}
  .mist,.station-scene .grain{animation:none !important}
  .station-scene .mist-a,.station-scene .mist-b{opacity:.25; translate:none}
}

/* ---------- the story stations ---------- */
.station h3{text-shadow:0 2px 18px rgba(5,14,19,.85)}
.tale{max-width:62ch; margin-top:1.2rem}
.tale p{font-family:var(--display); font-size:clamp(1.22rem,1.7vw,1.42rem); line-height:1.52; color:var(--ink); margin:0 0 1rem}
.tale .station-links{font-family:var(--sans); font-size:1rem; display:flex; flex-wrap:wrap; gap:.4rem 1.6rem; margin-top:1.4rem}
.stations .reactor::before{content:none}
.c-acute{position:relative; display:inline-block}
.c-acute::after{content:"\00B4"; position:absolute; left:50%; top:-.42em; transform:translateX(-28%); line-height:1}
.coda{position:relative; z-index:1; margin-top:clamp(3.5rem,7vw,6rem); padding-left:calc(72px + clamp(1rem,3vw,2.5rem))}
.coda p{font-family:var(--display); font-size:clamp(1.45rem,2.4vw,2rem); line-height:1.4; max-width:36ch; margin:0 0 1rem}
.coda .last{font-style:italic; color:var(--lamp-text)}
@media (max-width:760px){ .coda{padding-left:0} .station-scene .mist{animation:none} }
/* very slight parallax on large screens; mist.js sets --par */
@media (min-width:900px) and (prefers-reduced-motion: no-preference){ .station-scene .scene-frame{transform:translateY(calc(var(--par,0) * -12px)) scale(1.03)} }

/* ---------- mist wafting around the edges of every page ---------- */
.edge-mist{position:fixed; inset:0; z-index:30; pointer-events:none; overflow:hidden;
  -webkit-mask-image:radial-gradient(ellipse 74% 70% at 50% 46%, transparent 55%, #000 100%);
  mask-image:radial-gradient(ellipse 74% 70% at 50% 46%, transparent 55%, #000 100%);
  animation:edge-breathe 16s ease-in-out infinite alternate}
.edge-mist .mist-a{top:-12%; height:124%; opacity:.6; animation-duration:150s}
.edge-mist .mist-b{top:8%; height:100%; opacity:.5; animation-duration:95s}
@keyframes edge-breathe{from{opacity:.5} to{opacity:.95}}
@media (max-width:760px){
  .edge-mist{-webkit-mask-image:radial-gradient(ellipse 92% 84% at 50% 46%, transparent 66%, #000 100%); mask-image:radial-gradient(ellipse 92% 84% at 50% 46%, transparent 66%, #000 100%); opacity:.45; animation:none}
  .edge-mist .mist{animation:none}
}
@media (prefers-reduced-motion: reduce){ .edge-mist{animation:none; opacity:.4} .edge-mist .mist{animation:none} }
@media print{ .edge-mist,.load-mist{display:none} }

.stations .station > .station-scene{grid-column:1 / -1}

/* ---------- background music button ---------- */
.music-toggle{position:fixed; right:calc(1rem + env(safe-area-inset-right,0px)); bottom:calc(1rem + env(safe-area-inset-bottom,0px)); z-index:50; display:inline-flex; align-items:center; gap:.5rem; padding:.55rem .95rem .55rem .75rem; border-radius:999px; border:1px solid var(--line); background:color-mix(in srgb, var(--bg) 84%, transparent); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:var(--ink-muted); font:600 .88rem/1 var(--sans); cursor:pointer; transition:border-color .2s, color .2s}
.music-toggle:hover{border-color:var(--lamp-text); color:var(--ink)}
.music-toggle svg{width:20px; height:20px; flex:none}
.music-toggle .waves{display:none}
.music-toggle.is-on{color:var(--ink)}
.music-toggle.is-on .waves{display:inline}
.music-toggle.is-on .cross{display:none}
@media print{ .music-toggle{display:none} }

/* ---------- the artist teaser on the front page (full page: assets/artist.css) ---------- */
.teaser-grid{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:clamp(2rem,6vw,6rem); align-items:center}
.teaser-porthole{display:block; width:min(100%,380px); justify-self:center; aspect-ratio:1; border-radius:50%; padding:6%;
  background:conic-gradient(from 210deg, #4b5559, #c9d0d1 8%, #6e787b 18%, #e7ecec 30%, #59646a 42%, #aab4b6 55%, #3f484c 66%, #d3d9da 78%, #6c767a 90%, #4b5559);
  box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 24px 60px rgba(0,0,0,.55), 0 0 90px rgba(92,203,232,.16), inset 0 2px 1px rgba(255,255,255,.35), inset 0 -3px 6px rgba(0,0,0,.55)}
.teaser-porthole span{display:block; position:relative; width:100%; height:100%; border-radius:50%; overflow:hidden; box-shadow:inset 0 0 0 3px rgba(8,20,25,.9)}
.teaser-porthole img{width:100%; height:100%; object-fit:cover; transform:scale(1.06)}
.teaser-porthole span::after{content:""; position:absolute; inset:0; border-radius:50%; background:radial-gradient(120% 60% at 28% 8%, rgba(220,240,246,.2), rgba(220,240,246,0) 46%), radial-gradient(circle, rgba(92,203,232,0) 58%, rgba(92,203,232,.22) 86%, rgba(8,20,25,.7) 100%)}
.artist-teaser h2{margin-bottom:1.25rem}
.artist-teaser p{max-width:52ch; color:var(--ink-muted); font-size:1.12rem}
.artist-teaser .btn-row{margin-top:1.75rem}
@media (max-width:760px){ .teaser-grid{grid-template-columns:1fr} .teaser-porthole{width:min(72vw,300px)} }
/* a heading set as two deliberate lines */
h2.two-line{max-width:none}
h2.two-line span{display:block}

/* ---------- hero: the moonlit sea behind the pedal ---------- */
.hero.sea{background:
  linear-gradient(90deg, rgba(11,30,38,.94) 0%, rgba(11,30,38,.80) 24%, rgba(11,30,38,.30) 50%, rgba(11,30,38,0) 68%),
  linear-gradient(0deg, var(--bg) 0%, rgba(11,30,38,0) 26%),
  linear-gradient(180deg, var(--bg) 0%, rgba(11,30,38,0) 16%),
  url("/images/scenes/hero-sea.webp") 50% 38% / cover no-repeat,
  var(--bg)}
@media (max-width:860px){
  .hero.sea{background:
    linear-gradient(0deg, var(--bg) 34%, rgba(11,30,38,0) 66%),
    linear-gradient(180deg, var(--bg) 0%, rgba(11,30,38,0) 12%),
    url("/images/scenes/hero-sea-small.webp") 50% 0 / auto 72vh no-repeat,
    var(--bg)}
}

/* ---------- hero: the board stack, floating just below the title ---------- */
/* The anchor has no height on wide screens, so the stack hangs in the open water between the
   words and the pedal without pushing anything down. Narrower screens give it its own row. */
.hero-stack-anchor{position:relative; height:0; font-size:clamp(1.15rem,1.6vw,1.32rem)}
.hero-stack{position:absolute; top:-9.5rem; left:calc(34ch - 1.25rem); width:clamp(270px,25vw,380px); aspect-ratio:1/1.06; pointer-events:none}
@media (max-width:1099px){
  .hero-stack-anchor{height:auto}
  .hero-stack{position:relative; top:auto; left:auto; width:min(420px,100%); aspect-ratio:1.35/1; margin:-1.6rem 0 -.2rem -1rem}
}

/* ---------- instruments: four voices, two by two ---------- */
.instrument-grid{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:clamp(2rem,4vw,3rem)}
@media (max-width:900px){ .instrument-grid{grid-template-columns:1fr} }

/* ---------- the 3D board stack page ---------- */
.stack-band{padding-top:clamp(1.5rem,3vw,2.5rem)}
.stack-viewer{height:min(80vh,760px); min-height:440px; border:1px solid var(--line); border-radius:18px;
  background:radial-gradient(80% 70% at 50% 100%, rgba(16,48,59,.9), rgba(16,48,59,0) 70%), var(--bg-3)}
.stack-notes{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.5rem,4vw,3.5rem); margin-top:clamp(2rem,4vw,3rem)}
.stack-notes h2{font-size:clamp(1.6rem,2.6vw,2.2rem); margin:0 0 .8rem}
.stack-notes p,.stack-notes li{color:var(--ink-muted)}
.stack-notes ol{margin:0; padding-left:1.2rem}
.stack-notes li{margin-bottom:.55rem}
.stack-notes li b{color:var(--ink); font-weight:600}
.stack-notes .fine-print{font-size:.92rem}
@media (max-width:900px){ .stack-notes{grid-template-columns:1fr} .stack-viewer{height:70vh; min-height:400px} }
/* words always sit above the floating stack */
.hero-copy h1,.hero-copy .subtitle,.hero-copy .lede,.hero-copy .btn-row,.hero-copy .hero-facts{position:relative; z-index:1}

/* ---------- hero: distant stars above the sea ---------- */
.hero-stars{position:absolute; inset:0 0 auto 0; height:58%; z-index:0; pointer-events:none;
  background-image:radial-gradient(0.6px 0.6px at 33.1% 6.7%, rgba(225,236,240,0.66) 99%, transparent 100%), radial-gradient(0.7px 0.7px at 11.0% 23.3%, rgba(225,236,240,0.27) 99%, transparent 100%), radial-gradient(0.9px 0.9px at 43.6% 3.0%, rgba(225,236,240,0.28) 99%, transparent 100%), radial-gradient(1.1px 1.1px at 56.3% 32.4%, rgba(225,236,240,0.72) 99%, transparent 100%), radial-gradient(0.6px 0.6px at 57.4% 16.9%, rgba(225,236,240,0.53) 99%, transparent 100%), radial-gradient(1.1px 1.1px at 14.8% 14.6%, rgba(225,236,240,0.4) 99%, transparent 100%), radial-gradient(0.7px 0.7px at 80.3% 7.4%, rgba(225,236,240,0.44) 99%, transparent 100%), radial-gradient(0.7px 0.7px at 54.6% 2.7%, rgba(225,236,240,0.5) 99%, transparent 100%), radial-gradient(0.9px 0.9px at 53.0% 24.8%, rgba(225,236,240,0.43) 99%, transparent 100%), radial-gradient(0.6px 0.6px at 25.8% 8.1%, rgba(225,236,240,0.54) 99%, transparent 100%), radial-gradient(0.8px 0.8px at 52.4% 31.4%, rgba(225,236,240,0.55) 99%, transparent 100%), radial-gradient(0.8px 0.8px at 9.0% 14.3%, rgba(225,236,240,0.33) 99%, transparent 100%), radial-gradient(1.1px 1.1px at 48.9% 3.0%, rgba(225,236,240,0.54) 99%, transparent 100%), radial-gradient(1.1px 1.1px at 86.0% 12.2%, rgba(225,236,240,0.5) 99%, transparent 100%), radial-gradient(0.8px 0.8px at 78.5% 2.9%, rgba(225,236,240,0.49) 99%, transparent 100%), radial-gradient(1.1px 1.1px at 65.8% 3.8%, rgba(225,236,240,0.75) 99%, transparent 100%), radial-gradient(0.8px 0.8px at 80.9% 9.7%, rgba(225,236,240,0.26) 99%, transparent 100%), radial-gradient(0.6px 0.6px at 46.3% 5.4%, rgba(225,236,240,0.36) 99%, transparent 100%), radial-gradient(0.9px 0.9px at 29.6% 22.8%, rgba(225,236,240,0.29) 99%, transparent 100%), radial-gradient(0.9px 0.9px at 45.1% 21.8%, rgba(225,236,240,0.68) 99%, transparent 100%), radial-gradient(0.9px 0.9px at 28.7% 13.2%, rgba(225,236,240,0.73) 99%, transparent 100%), radial-gradient(0.7px 0.7px at 16.5% 6.0%, rgba(225,236,240,0.26) 99%, transparent 100%), radial-gradient(0.7px 0.7px at 81.8% 6.4%, rgba(225,236,240,0.46) 99%, transparent 100%), radial-gradient(1.1px 1.1px at 37.4% 23.1%, rgba(225,236,240,0.73) 99%, transparent 100%), radial-gradient(1.1px 1.1px at 64.9% 23.6%, rgba(225,236,240,0.45) 99%, transparent 100%), radial-gradient(0.6px 0.6px at 40.3% 5.1%, rgba(225,236,240,0.35) 99%, transparent 100%), radial-gradient(1.1px 1.1px at 96.5% 12.1%, rgba(225,236,240,0.28) 99%, transparent 100%), radial-gradient(0.8px 0.8px at 2.0% 5.0%, rgba(225,236,240,0.56) 99%, transparent 100%), radial-gradient(0.8px 0.8px at 8.8% 7.4%, rgba(225,236,240,0.73) 99%, transparent 100%), radial-gradient(0.9px 0.9px at 59.8% 12.9%, rgba(225,236,240,0.75) 99%, transparent 100%), radial-gradient(0.6px 0.6px at 46.7% 12.9%, rgba(225,236,240,0.62) 99%, transparent 100%), radial-gradient(1.1px 1.1px at 73.1% 17.7%, rgba(225,236,240,0.26) 99%, transparent 100%), radial-gradient(1.1px 1.1px at 93.3% 14.5%, rgba(225,236,240,0.71) 99%, transparent 100%), radial-gradient(0.6px 0.6px at 74.8% 11.4%, rgba(225,236,240,0.6) 99%, transparent 100%), radial-gradient(0.7px 0.7px at 27.1% 10.6%, rgba(225,236,240,0.52) 99%, transparent 100%), radial-gradient(0.7px 0.7px at 76.8% 10.0%, rgba(225,236,240,0.65) 99%, transparent 100%), radial-gradient(1.1px 1.1px at 80.6% 20.8%, rgba(225,236,240,0.5) 99%, transparent 100%), radial-gradient(0.9px 0.9px at 72.2% 36.3%, rgba(225,236,240,0.38) 99%, transparent 100%), radial-gradient(0.8px 0.8px at 68.5% 29.9%, rgba(225,236,240,0.73) 99%, transparent 100%), radial-gradient(0.7px 0.7px at 37.0% 7.2%, rgba(225,236,240,0.42) 99%, transparent 100%), radial-gradient(0.6px 0.6px at 48.3% 33.3%, rgba(225,236,240,0.49) 99%, transparent 100%), radial-gradient(0.6px 0.6px at 64.7% 20.5%, rgba(225,236,240,0.7) 99%, transparent 100%), radial-gradient(0.7px 0.7px at 77.1% 24.1%, rgba(225,236,240,0.47) 99%, transparent 100%), radial-gradient(0.9px 0.9px at 63.0% 5.2%, rgba(225,236,240,0.48) 99%, transparent 100%), radial-gradient(0.7px 0.7px at 73.4% 3.5%, rgba(225,236,240,0.26) 99%, transparent 100%), radial-gradient(1.1px 1.1px at 58.7% 17.0%, rgba(225,236,240,0.66) 99%, transparent 100%), radial-gradient(1.1px 1.1px at 96.1% 20.0%, rgba(225,236,240,0.52) 99%, transparent 100%), radial-gradient(0.6px 0.6px at 4.1% 28.8%, rgba(225,236,240,0.51) 99%, transparent 100%), radial-gradient(0.7px 0.7px at 91.6% 17.5%, rgba(225,236,240,0.26) 99%, transparent 100%), radial-gradient(0.8px 0.8px at 22.4% 19.1%, rgba(225,236,240,0.38) 99%, transparent 100%), radial-gradient(0.8px 0.8px at 42.2% 6.7%, rgba(225,236,240,0.7) 99%, transparent 100%), radial-gradient(1.1px 1.1px at 65.6% 26.6%, rgba(225,236,240,0.32) 99%, transparent 100%), radial-gradient(0.7px 0.7px at 16.6% 20.3%, rgba(225,236,240,0.55) 99%, transparent 100%), radial-gradient(1.1px 1.1px at 76.5% 5.1%, rgba(225,236,240,0.61) 99%, transparent 100%), radial-gradient(1.1px 1.1px at 55.4% 11.6%, rgba(225,236,240,0.49) 99%, transparent 100%), radial-gradient(0.7px 0.7px at 76.5% 22.1%, rgba(225,236,240,0.39) 99%, transparent 100%), radial-gradient(0.6px 0.6px at 76.1% 17.6%, rgba(225,236,240,0.47) 99%, transparent 100%), radial-gradient(0.8px 0.8px at 60.8% 17.1%, rgba(225,236,240,0.48) 99%, transparent 100%), radial-gradient(1.1px 1.1px at 53.2% 19.7%, rgba(225,236,240,0.69) 99%, transparent 100%), radial-gradient(0.7px 0.7px at 92.4% 9.8%, rgba(225,236,240,0.67) 99%, transparent 100%), radial-gradient(0.6px 0.6px at 15.2% 5.1%, rgba(225,236,240,0.59) 99%, transparent 100%), radial-gradient(0.6px 0.6px at 43.1% 7.3%, rgba(225,236,240,0.7) 99%, transparent 100%), radial-gradient(0.7px 0.7px at 16.8% 25.2%, rgba(225,236,240,0.38) 99%, transparent 100%), radial-gradient(0.6px 0.6px at 15.2% 17.8%, rgba(225,236,240,0.45) 99%, transparent 100%), radial-gradient(0.7px 0.7px at 48.8% 37.0%, rgba(225,236,240,0.6) 99%, transparent 100%), radial-gradient(0.8px 0.8px at 97.4% 13.3%, rgba(225,236,240,0.41) 99%, transparent 100%), radial-gradient(0.9px 0.9px at 71.3% 2.3%, rgba(225,236,240,0.6) 99%, transparent 100%), radial-gradient(0.6px 0.6px at 38.9% 15.6%, rgba(225,236,240,0.31) 99%, transparent 100%), radial-gradient(0.6px 0.6px at 90.2% 10.2%, rgba(225,236,240,0.38) 99%, transparent 100%), radial-gradient(0.7px 0.7px at 5.8% 22.4%, rgba(225,236,240,0.66) 99%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%); mask-image:linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%)}
.hero-stars::after{content:""; position:absolute; inset:0; background-image:radial-gradient(1.3px 1.3px at 86.1% 24.0%, rgba(236,242,244,.95) 99%, transparent 100%), radial-gradient(1.3px 1.3px at 92.4% 15.6%, rgba(236,242,244,.95) 99%, transparent 100%), radial-gradient(1.3px 1.3px at 65.4% 19.0%, rgba(236,242,244,.95) 99%, transparent 100%), radial-gradient(1.3px 1.3px at 62.6% 13.1%, rgba(236,242,244,.95) 99%, transparent 100%), radial-gradient(1.3px 1.3px at 48.4% 27.8%, rgba(236,242,244,.95) 99%, transparent 100%), radial-gradient(1.3px 1.3px at 42.1% 30.8%, rgba(236,242,244,.95) 99%, transparent 100%), radial-gradient(1.3px 1.3px at 47.7% 3.5%, rgba(236,242,244,.95) 99%, transparent 100%), radial-gradient(1.3px 1.3px at 35.8% 11.1%, rgba(236,242,244,.95) 99%, transparent 100%), radial-gradient(1.3px 1.3px at 70.1% 9.9%, rgba(236,242,244,.95) 99%, transparent 100%), radial-gradient(1.3px 1.3px at 47.5% 6.8%, rgba(236,242,244,.95) 99%, transparent 100%), radial-gradient(1.3px 1.3px at 30.8% 33.8%, rgba(236,242,244,.95) 99%, transparent 100%), radial-gradient(1.3px 1.3px at 57.6% 31.4%, rgba(236,242,244,.95) 99%, transparent 100%), radial-gradient(1.3px 1.3px at 71.0% 4.3%, rgba(236,242,244,.95) 99%, transparent 100%), radial-gradient(1.3px 1.3px at 76.8% 32.1%, rgba(236,242,244,.95) 99%, transparent 100%); opacity:.35}
@media (prefers-reduced-motion: no-preference){ .hero-stars::after{animation:twinkle 5.5s ease-in-out infinite alternate} }
@keyframes twinkle{0%{opacity:.2} 45%{opacity:.85} 100%{opacity:.35}}
.hero-grid{position:relative; z-index:1}

/* ---------- instruments: the growl line ---------- */
.inst-lede{color:var(--ink); max-width:44ch; margin:0 0 1.4rem}

/* ---------- stations: a promise under each name, and the rail lighting as you pass ---------- */
.station .promise{font-family:var(--display); font-style:italic; color:var(--lamp); font-size:clamp(1.25rem,2.1vw,1.65rem); line-height:1.25; margin:.15rem 0 1rem}
.station::before{transition:background-color .5s ease, color .5s ease, box-shadow .5s ease, border-color .5s ease}
.station.is-lit::before{background:var(--lamp); color:var(--lamp-ink); border-color:var(--lamp); box-shadow:0 0 0 6px rgba(242,193,78,.12), 0 0 26px rgba(242,193,78,.35)}
.station.is-lit::after{background:linear-gradient(var(--lamp), rgba(242,193,78,.18))}
.path-facts{margin-top:2rem; max-width:60rem}

/* ---------- the teardown: the pedal opens and the boards come apart ---------- */
.teardown{position:relative; background:radial-gradient(70% 55% at 38% 52%, rgba(16,48,59,.85), rgba(16,48,59,0) 70%), var(--bg)}
.td-track{position:relative; height:320vh}
.td-stage{position:sticky; top:0; height:100vh; height:100svh; max-width:var(--wrap); margin:0 auto; box-sizing:border-box;
  padding:calc(72px + 1rem) clamp(1.25rem,4vw,3rem) 2rem; display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(1rem,3vw,3rem); align-items:center}
.td-visual{position:relative; height:min(76vh,760px)}
.td-pedal,.td-fallback{position:absolute; left:50%; top:50%; height:90%; width:auto; max-width:none; transform:translate(-50%,-50%); filter:drop-shadow(0 26px 44px rgba(0,0,0,.6))}
.td-fallback{opacity:0; height:84%; border-radius:16px}
.teardown .td-stack{position:absolute; inset:-6% -2% -6% -14%; opacity:0}   /* beats the viewer's own position:relative */
.td-kicker{font-family:var(--display); font-style:italic; color:var(--lamp); font-size:clamp(1.4rem,2.4vw,2rem); margin:0 0 .4rem}
.td-intro{color:var(--ink-muted); font-size:1.08rem; margin:0 0 1.6rem; max-width:30ch}
.td-path{list-style:none; margin:0 0 1.8rem; padding:0; display:grid; gap:.7rem}
.td-path li{position:relative; padding-left:1.9rem; color:var(--ink-muted); opacity:.55; font-size:1.12rem; transition:opacity .4s ease, color .4s ease}
.td-path li::before{content:""; position:absolute; left:0; top:.42em; width:.75rem; height:.75rem; border-radius:50%; border:1px solid var(--lamp-text); transition:background-color .4s ease, box-shadow .4s ease}
.td-path li:not(:last-child)::after{content:""; position:absolute; left:calc(.375rem - .5px); top:calc(.42em + .75rem); height:calc(100% - .75rem + .7rem); width:1px; background:var(--line)}
.td-path li.lit{opacity:1; color:var(--ink)}
.td-path li.lit::before{background:var(--lamp); border-color:var(--lamp); box-shadow:0 0 14px rgba(242,193,78,.55)}
.td-sub{color:var(--ink-muted); margin:0 0 .6rem; font-size:.98rem}
.td-line{font-size:clamp(2rem,3.4vw,3.1rem); line-height:1.08; margin:0; max-width:14ch}
.teardown.no-3d .td-fallback{display:block}
.td-still .td-track{height:auto}
.td-still .td-stage{position:relative; height:auto; min-height:80vh}
.td-still.has-3d .td-pedal{opacity:0}
.teardown.td-still.has-3d .td-stack{opacity:1}
@media (max-width:900px){
  .td-track{height:300vh}
  .td-stage{grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; align-items:stretch; padding:calc(64px + .5rem) 1.25rem 4.25rem; gap:.6rem}  /* bottom room for the Music button */
  .td-visual{height:auto; min-height:0}
  .td-intro{margin-bottom:.8rem; font-size:1rem}
  .td-kicker{font-size:1.3rem; margin:0}
  .td-path{display:flex; flex-wrap:wrap; gap:.35rem 1.1rem; margin-bottom:.8rem}
  .td-path li{font-size:.95rem; padding-left:1.2rem}
  .td-path li::before{width:.6rem; height:.6rem}
  .td-path li::after{display:none}
  .td-line{font-size:1.7rem; max-width:none}
}

/* ---------- every stage knows what comes next ---------- */
#built .lede{color:var(--ink); max-width:52ch}
.built-sub{margin:clamp(2.5rem,5vw,3.5rem) 0 .5rem}
.built-intro{color:var(--ink-muted); max-width:62ch; margin:0 0 1.6rem}

/* ---------- why $749, opened on request ---------- */
.why-price summary{list-style:none; cursor:pointer; display:flex; align-items:baseline; gap:.8rem}
.why-price summary::-webkit-details-marker{display:none}
.why-price summary h3{margin:0}
.why-price summary::after{content:"Read why"; font-size:.9rem; color:var(--lamp-text); border:1px solid var(--line); border-radius:999px; padding:.2rem .7rem}
.why-price[open] summary::after{content:"Close"}
.why-price summary:focus-visible{outline:2px solid var(--lamp); outline-offset:4px; border-radius:6px}
.why-price[open] summary{margin-bottom:1rem}

@media (max-width:900px){ .teardown .td-stack{inset:-4% -6%} }
.why-price summary{flex-wrap:wrap}
.why-teaser{flex-basis:100%; order:3; color:var(--ink-muted); max-width:52ch; margin-top:.6rem; font-size:1.02rem}
.why-price[open] .why-teaser{display:none}

/* ---------- hero: the opening film ---------- */
/* Malice rises out of the storm across the whole opening screen and reaches out. The film plays once
   and holds on its last frame; then the title writes itself in over her, and the pedal surfaces on
   the right. The film, the still she holds on, the drifting smoke and the shade behind the words all
   sit under the hero's content. assets/hero-film.js runs it. */
.hero.film .hero-grid{min-height:max(560px, calc(100svh - 68px))}
.hero-film{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; background:var(--bg-3)}
.hero-film .film-hold,.hero-film .film-video{position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; object-position:calc(var(--film-x, .42) * 100%) 30%}
.hero-film .film-video{display:none; object-position:calc(var(--film-video-x, var(--film-x, .42)) * 100%) 30%; transition:opacity .45s ease}
.hero.film-on .film-video{display:block}
.hero.film-ended .film-video{opacity:0}
/* Until the film is halfway through, the picture under it is its opening frame, the red storm, never the
   still she ends on. Whatever shows before the film paints (behind the sound question, while it loads,
   in the instant before it starts) is that opening frame. Halfway through, with the film covering it,
   the still of her reaching out quietly takes its place underneath, ready for the end. The eyes and
   lamps of the final scene stay dark until then too. */
.film-wait .hero-film{background:var(--bg-3) url(/images/hero/landing-first-1920.jpg) calc(var(--film-video-x, var(--film-x, .42)) * 100%) 30% / cover no-repeat}
.film-wait .hero.film:not(.film-half) .film-hold{visibility:hidden}
.film-wait .hero.film:not(.film-ended) .film-lights{opacity:0; transition:none}
/* the hero melts into the page below it */
.hero-film::after{content:""; position:absolute; inset:auto 0 0 0; height:22%; background:linear-gradient(0deg, var(--bg), rgba(11,30,38,0))}
/* smoke that keeps drifting after the film stops; it gathers at the edges and leaves her clear */
.film-haze{position:absolute; inset:0;
  -webkit-mask-image:radial-gradient(ellipse 64% 60% at 40% 42%, transparent 30%, #000 100%);
          mask-image:radial-gradient(ellipse 64% 60% at 40% 42%, transparent 30%, #000 100%)}
.film-haze .mist-a{opacity:.34}
.film-haze .mist-b{opacity:.26}
/* shade behind the words: it arrives with them, so the film itself plays clean */
.film-shade{position:absolute; inset:0; transition:opacity 2.4s ease;
  background:linear-gradient(90deg, rgba(5,13,17,.70) 0%, rgba(5,13,17,.46) 26%, rgba(5,13,17,.12) 46%, rgba(5,13,17,0) 58%)}
.hero.film h1,.hero.film .subtitle,.hero.film .lede{text-shadow:0 2px 26px rgba(2,8,11,.7), 0 0 2px rgba(2,8,11,.45)}

/* while the film plays, the words and the pedal wait */
.film-wait .hero.film .hero-copy > *,
.film-wait .hero.film .pedal-stage,
.film-wait .hero.film .pedal-media::before,
.film-wait .hero.film .film-shade{opacity:0; animation:none}

/* then they arrive: the title letter by letter, the rest after it, the pedal rising out of the dark */
.hero h1 .ch{display:inline}
.hero h1 .film-label{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.hero h1[tabindex="-1"]:focus{outline:none}
@media (prefers-reduced-motion: no-preference){
  .hero.film-reveal .hero-copy > *{animation:rise 1.6s cubic-bezier(.2,.7,.2,1) both}
  .hero.film-reveal .hero-copy > h1{animation:none}
  .hero.film-reveal .hero-copy > :nth-child(2){animation-delay:1.55s}
  .hero.film-reveal .hero-copy > :nth-child(3){animation-delay:2.05s}
  .hero.film-reveal .hero-copy > :nth-child(4){animation-delay:2.5s}
  .hero.film-reveal .hero-copy > :nth-child(5){animation-delay:2.8s}
  .hero.film-reveal h1 .ch{animation:letter 1.5s cubic-bezier(.25,.6,.2,1) both; animation-delay:calc(.15s + var(--i) * 80ms)}
  .hero.film-reveal .pedal-stage .pedal-art{animation:emerge 3.4s cubic-bezier(.2,.7,.2,1) .8s both}
  .hero.film-reveal .pedal-media::before{animation:fade-in 3s ease .8s both}
}
@keyframes letter{from{opacity:0; filter:blur(12px)} to{opacity:1; filter:blur(0)}}
@keyframes emerge{from{opacity:0; filter:brightness(.12) saturate(.4); transform:scale(1.06)} to{opacity:1; filter:none; transform:none}}
@keyframes fade-in{from{opacity:0} to{opacity:1}}

@media print{ .hero-film video{display:none} }

/* phones and small tablets: the film fills the first screen, the words sit low over it with her
   face clear above them, and the pedal follows below */
@media (max-width:860px){
  .hero.film .hero-grid{min-height:0}
  .hero-film{bottom:auto; height:max(540px, calc(100svh - 68px))}
  .hero.film .hero-media{order:1}
  .hero.film .hero-copy{order:0; min-height:max(540px, calc(100svh - 68px)); display:flex; flex-direction:column; justify-content:flex-end;
    margin:0; padding-top:5rem; padding-bottom:clamp(1.25rem,4vh,2.25rem)}
  .hero.film .hero-copy .lede{margin-bottom:1.5rem}
  .film-shade{background:linear-gradient(0deg, rgba(5,13,17,.9) 0%, rgba(5,13,17,.66) 32%, rgba(5,13,17,0) 62%)}
  .hero-film::after{height:12%}
  .film-haze{-webkit-mask-image:radial-gradient(ellipse 80% 50% at 45% 34%, transparent 30%, #000 100%); mask-image:radial-gradient(ellipse 80% 50% at 45% 34%, transparent 30%, #000 100%)}
  /* she moves from the left edge of the frame toward the middle, so the narrow phone view pans with her
     and comes to rest exactly on the framing of the still she holds on */
  .hero.film{--film-x:.36}
  /* hero-film.js tracks her face using the video clock, finishing on the still's crop. */
  /* clear of the music button in the corner */
  .hero.film .hero-copy{padding-bottom:calc(4.75rem + env(safe-area-inset-bottom,0px))}
}
/* wide screens: the words sit low, just under her face, so the whole of it stays clear */
@media (min-width:861px){ .hero.film .hero-copy{align-self:end; padding-bottom:clamp(3rem,9vh,6rem)} }

/* ---------- hero: the lights in the final scene flicker ---------- */
/* The lighthouse lamp and its beam, the keeper's windows and the wreck's lanterns, as soft warm glows
   laid over the still she holds on. The layer is sized and placed exactly like the picture under
   object-fit: cover (same 16:9 frame, same focus point), so every glow sits on its lamp at any screen
   size. Positions are fractions of the 2560 x 1440 frame. */
.hero-film{container-type:size}
.film-lights{position:absolute; pointer-events:none; mix-blend-mode:screen;
  width:max(100cqw, 177.778cqh); height:max(100cqh, 56.25cqw);
  left:calc((100cqw - max(100cqw, 177.778cqh)) * var(--film-x, .42)); top:calc((100cqh - max(100cqh, 56.25cqw)) * .30);
  transition:opacity 1.8s ease}
.hero.film-on:not(.film-ended) .film-lights{opacity:0; transition:none}
.film-lights i,.scene-lights i{position:absolute; left:calc(var(--x) * 100%); top:calc(var(--y) * 100%); width:calc(var(--s) * 100%);
  aspect-ratio:var(--ar, 1); translate:-50% -50%; rotate:var(--rot, 0deg); border-radius:50%; opacity:.45;
  background:radial-gradient(closest-side, rgba(255,226,170,.85), rgba(255,180,92,.38) 42%, rgba(255,160,70,0))}
.film-lights .beam,.scene-lights .beam{background:radial-gradient(closest-side, rgba(255,214,160,.42), rgba(255,200,140,.14) 55%, rgba(255,190,120,0))}
@media (prefers-reduced-motion: no-preference){
  .film-lights i,.scene-lights i{animation:flicker-a var(--d, 4.3s) linear var(--dl, 0s) infinite}
  .film-lights i.b,.scene-lights i.b{animation-name:flicker-b}
  .film-lights i.c,.scene-lights i.c{animation-name:flicker-c}
  .film-lights i.eye,.scene-lights i.eye{animation-name:flicker-eye}
  .scene-lights i.ember{animation:ember var(--d, 3.4s) ease-in-out var(--dl, 0s) infinite}
}
@keyframes flicker-a{0%{opacity:.5} 5%{opacity:.78} 8%{opacity:.42} 14%{opacity:.66} 19%{opacity:.58} 25%{opacity:.86} 29%{opacity:.48} 38%{opacity:.7} 45%{opacity:.6} 49%{opacity:.22} 51%{opacity:.62} 60%{opacity:.74} 67%{opacity:.52} 74%{opacity:.82} 80%{opacity:.46} 88%{opacity:.68} 94%{opacity:.56} 100%{opacity:.5}}
@keyframes flicker-b{0%{opacity:.6} 7%{opacity:.44} 12%{opacity:.72} 16%{opacity:.5} 23%{opacity:.64} 31%{opacity:.36} 33%{opacity:.7} 42%{opacity:.82} 47%{opacity:.55} 58%{opacity:.68} 63%{opacity:.4} 70%{opacity:.75} 77%{opacity:.58} 83%{opacity:.18} 85%{opacity:.6} 92%{opacity:.78} 100%{opacity:.6}}
@keyframes flicker-c{0%{opacity:.55} 9%{opacity:.7} 13%{opacity:.46} 21%{opacity:.8} 27%{opacity:.6} 34%{opacity:.66} 40%{opacity:.3} 43%{opacity:.62} 55%{opacity:.76} 61%{opacity:.5} 68%{opacity:.84} 72%{opacity:.56} 81%{opacity:.7} 87%{opacity:.42} 93%{opacity:.64} 100%{opacity:.55}}


/* her eyes burn like one flame behind both; a pipe ember breathes rather than flickers */
.film-lights i.eye,.scene-lights i.eye{background:radial-gradient(closest-side, rgba(255,236,170,.9), rgba(255,190,70,.4) 45%, rgba(255,170,50,0))}
@keyframes flicker-eye{0%{opacity:.6} 6%{opacity:.82} 11%{opacity:.5} 18%{opacity:.74} 26%{opacity:.66} 33%{opacity:.88} 38%{opacity:.56} 47%{opacity:.7} 53%{opacity:.22} 55%{opacity:.64} 64%{opacity:.8} 72%{opacity:.58} 81%{opacity:.84} 89%{opacity:.5} 95%{opacity:.7} 100%{opacity:.6}}
@keyframes ember{0%{opacity:.3} 50%{opacity:.85} 100%{opacity:.3}}

/* ---------- story scenes: their lamps, windows, lanterns and eyes flicker ---------- */
/* Each scene's picture sits in a frame with its lights; the frame carries the scroll drift, and the
   lights layer is sized and placed like the picture under object-fit: cover (1916 x 821, focus --fx
   across, 45% down), so every glow stays on its lamp. Positions are fractions of the picture. */
.station-scene .scene-frame{position:absolute; inset:0; container-type:size}
.scene-lights{position:absolute; pointer-events:none; mix-blend-mode:screen;
  width:max(100cqw, calc(100cqh * 1916 / 821)); height:max(100cqh, calc(100cqw * 821 / 1916));
  left:calc((100cqw - max(100cqw, calc(100cqh * 1916 / 821))) * var(--fx, .62));
  top:calc((100cqh - max(100cqh, calc(100cqw * 821 / 1916))) * .45)}
.station-scene:not(.live) .scene-lights i{animation-play-state:paused}

/* ---------- phones: she offers you the pedal ---------- */
/* On narrow screens the pedal rests just above her cupped hand in the final frame (her palm is at
   x 1080, y 1000 of the 2560 x 1440 frame) and arrives last, after the words. The title sits at the
   top over her hair and the rest at the bottom, leaving her eyes and the pedal clear between them.
   --fh is the film's height; --iw/--ih the frame's size under object-fit: cover (focus 36% across, 30% down). */
@media (max-width:860px){
  .hero.film{--fh:max(540px, calc(100svh - 68px)); --iw:max(var(--film-width,100vw), calc(var(--fh) * 16 / 9)); --ih:max(var(--fh), calc(var(--film-width,100vw) * 9 / 16))}
  .hero.film .hero-media.pedal-media{position:absolute; z-index:2; margin:0; min-height:0; max-height:none;
    /* .45 of the film's height, growing upward from her palm (on small phones the words may overlap it a little) */
    height:calc(var(--fh) * .36); width:auto; aspect-ratio:919/1654;
    left:calc((var(--film-width,100vw) - var(--iw)) * var(--film-x, .36) + var(--iw) * .4219);
    top:calc((var(--fh) - var(--ih)) * .30 + var(--ih) * .6944);
    translate:-50% -100%}
  .hero.film .pedal-stage{height:100%; max-height:none}
  .hero.film .hero-copy{justify-content:flex-start; padding-top:1.25rem;
    /* the words below the pedal always start under her palm; short phones get a slightly taller hero */
    min-height:max(var(--fh), calc((var(--fh) - var(--ih)) * .30 + var(--ih) * .6944 + 12.5rem))}
  .hero.film .hero-copy .lede{margin-top:auto}
  .film-shade{background:linear-gradient(180deg, rgba(5,13,17,.78) 0%, rgba(5,13,17,.42) 22%, rgba(5,13,17,0) 38%),
    linear-gradient(0deg, rgba(5,13,17,.9) 0%, rgba(5,13,17,.6) 24%, rgba(5,13,17,0) 44%)}
  @media (prefers-reduced-motion: no-preference){
    .hero.film-reveal .pedal-stage .pedal-art{animation:offer 2.4s cubic-bezier(.2,.7,.2,1) 3.1s both}
    .hero.film-reveal .pedal-media::before{animation:fade-in 2s ease 3.1s both}
  }
}
@keyframes offer{from{opacity:0; transform:translateY(16%) scale(.8); filter:brightness(.3) blur(6px)} 55%{opacity:1} to{opacity:1; transform:none; filter:none}}

/* narrow phones: the line under the title keeps to two lines, so everything fits under her palm */
@media (max-width:400px){ .hero.film .hero-copy .lede{font-size:.95rem; margin-bottom:1.1rem} }

/* ---------- teardown: plays on its own while on screen, with a slider and a pause button ---------- */
/* No longer a long pinned scroll: the section is one screen tall and the pedal opens on a loop. */
.teardown.td-play .td-track{height:auto}
.teardown.td-play .td-stage{position:relative}
.td-controls{position:absolute; z-index:3; left:50%; bottom:.25rem; translate:-50% 0; width:min(400px, 94%);
  display:flex; align-items:center; gap:.75rem; padding:.45rem .9rem .45rem .45rem; border-radius:999px;
  border:1px solid var(--line); background:color-mix(in srgb, var(--bg) 80%, transparent);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.td-controls[hidden]{display:none}
.td-toggle{flex:none; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:transparent;
  color:var(--ink); display:grid; place-items:center; cursor:pointer; padding:0; transition:border-color .2s}
.td-toggle:hover{border-color:var(--lamp-text)}
.td-toggle svg{width:15px; height:15px}
.td-toggle .i-play,.td-toggle.is-paused .i-pause{display:none}
.td-toggle.is-paused .i-play{display:block}
.td-slide{flex:1; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.6rem; font-size:.82rem; color:var(--ink-muted); cursor:pointer}
.td-slide input{-webkit-appearance:none; appearance:none; width:100%; height:30px; margin:0; background:transparent; cursor:pointer; --p:0%}
.td-slide input::-webkit-slider-runnable-track{height:4px; border-radius:2px; background:linear-gradient(90deg, var(--lamp) var(--p), rgba(168,183,187,.32) var(--p))}
.td-slide input::-moz-range-track{height:4px; border-radius:2px; background:rgba(168,183,187,.32)}
.td-slide input::-moz-range-progress{height:4px; border-radius:2px; background:var(--lamp)}
.td-slide input::-webkit-slider-thumb{-webkit-appearance:none; width:18px; height:18px; margin-top:-7px; border-radius:50%; border:0; background:var(--lamp); box-shadow:0 0 0 4px rgba(242,193,78,.18)}
.td-slide input::-moz-range-thumb{width:18px; height:18px; border-radius:50%; border:0; background:var(--lamp); box-shadow:0 0 0 4px rgba(242,193,78,.18)}
.td-slide input:focus-visible{outline:2px solid var(--lamp-text); outline-offset:4px; border-radius:6px}

/* ---------- Aurora Curtain: the lights shimmer ---------- */
/* Two layers over the scene picture, cut to the aurora curtains and their reflection by a mask made
   from the picture itself: a slow wash of colour drifting back and forth between green, blue and pink,
   and faint rays sliding across like the curtains moving. Placed like the picture (see .scene-lights). */
.aurora-tint,.aurora-rays{position:absolute; pointer-events:none;
  width:max(100cqw, calc(100cqh * 1916 / 821)); height:max(100cqh, calc(100cqw * 821 / 1916));
  left:calc((100cqw - max(100cqw, calc(100cqh * 1916 / 821))) * var(--fx, .62));
  top:calc((100cqh - max(100cqh, calc(100cqw * 821 / 1916))) * .45);
  -webkit-mask-image:url("/images/scenes/aurora-mask.webp"); mask-image:url("/images/scenes/aurora-mask.webp");
  -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat}
.aurora-tint{mix-blend-mode:color; opacity:.4; background-size:260% 100%;
  background-image:linear-gradient(100deg, #2bf2a0 0%, #22c8e8 16%, #3d6bff 32%, #b24dff 48%, #ff5fbf 60%, #2bf2a0 78%, #22c8e8 100%)}
.aurora-rays{mix-blend-mode:screen; opacity:.2; background-size:150% 100%;
  background-image:repeating-linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(205,255,238,.6) 2.6%, rgba(255,255,255,0) 6%, rgba(255,255,255,0) 10.5%)}
@media (prefers-reduced-motion: no-preference){
  .aurora-tint{animation:aurora-drift 16s ease-in-out infinite alternate}
  .aurora-rays{animation:aurora-slide 9s ease-in-out infinite alternate, aurora-breathe 5.3s ease-in-out infinite alternate}
}
@keyframes aurora-drift{from{background-position:0% 0} to{background-position:100% 0}}
@keyframes aurora-slide{from{background-position:0% 0} to{background-position:65% 0}}
@keyframes aurora-breathe{from{opacity:.1} to{opacity:.28}}
.station-scene:not(.live) .aurora-tint,.station-scene:not(.live) .aurora-rays{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){ .aurora-tint,.aurora-rays{display:none} }

/* =====================================================================
   Front page, below the opening: one thing at a time (assets/front.js)
   The stations, the instruments and the pre-order details are tabs, so the page
   is a few screens long instead of twenty. Without JavaScript none of this
   applies and everything shows in full, one after another.
   ===================================================================== */
.stations.is-tabs > .station[hidden],.is-tabs > [data-tab-panel][hidden]{display:none !important}
#path .section-head,.station-nav,.tab-nav,.console,.stations > .station,[data-tab-panel]{scroll-margin-top:80px}

/* ---- Explore: the row of stations along the signal path ---- */
.station-nav{position:sticky; top:69px; z-index:6; display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr)) auto repeat(2,minmax(0,1fr)); gap:.3rem;
  margin:clamp(1.75rem,3.5vw,2.5rem) 0 0; padding:.45rem; border:1px solid var(--line); border-radius:18px;
  background:color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.st-tab{all:unset; box-sizing:border-box; cursor:pointer; display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:.6rem; align-items:center;
  padding:.55rem .7rem; border-radius:12px; color:var(--ink-muted); transition:background-color .25s ease, color .25s ease}
.st-tab:hover{background:var(--field); color:var(--ink)}
.st-tab:focus-visible{outline:2px solid var(--lamp-text); outline-offset:2px}
.st-tab[aria-selected="true"]{background:color-mix(in srgb, var(--lamp) 13%, transparent); color:var(--ink)}
.st-n{grid-row:1 / span 2; width:28px; height:28px; border-radius:50%; border:1px solid var(--lamp-text); color:var(--lamp-text); display:grid; place-items:center; font-family:var(--display); font-size:1rem; line-height:1}
.st-n-off{border-style:dashed; border-color:var(--line)}
.st-tab[aria-selected="true"] .st-n{background:var(--lamp); border-color:var(--lamp); color:var(--lamp-ink)}
.st-tab[aria-selected="true"] .st-n-off{background:transparent; border-color:var(--lamp-text)}
.st-name{font-family:var(--display); font-size:1.08rem; line-height:1.15}
.st-sub{font-size:.74rem; line-height:1.25; color:var(--ink-muted); margin-top:.15rem}
.tab-sep{width:1px; margin:.45rem .2rem; background:var(--line)}
@media (max-width:1180px){
  .station-nav{display:flex; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; border-radius:16px}
  .station-nav::-webkit-scrollbar{display:none}
  .st-tab{flex:0 0 auto; width:11.5rem; scroll-snap-align:center}
  .tab-sep{flex:0 0 1px}
}
@media (max-width:760px){ .station-nav{top:69px; margin-left:-.25rem; margin-right:-.25rem} .st-tab{width:10.25rem} .st-sub{font-size:.7rem} }

/* the chosen station: the same scene, tale and links as before, alone */
.stations.is-tabs{margin-top:.25rem}
.stations.is-tabs .station::after{display:none}
.stations.is-tabs .station::before{content:attr(data-n)}
.stations.is-tabs .station{padding-bottom:clamp(1.5rem,3vw,2.25rem)}
.stations .construction::before{content:none}
.stations .construction{padding-top:clamp(2rem,4vw,3rem)}
.construction > h3{font-size:clamp(2rem,3.6vw,2.9rem)}
.construction .tale{margin-bottom:1.75rem}
.construction .inside-photos{margin-bottom:clamp(2rem,4vw,3rem)}
.construction .built-sub{margin:0 0 .5rem; font-family:var(--display); font-weight:400; font-size:clamp(1.6rem,2.6vw,2.1rem)}
.construction .built-lede{color:var(--ink); max-width:62ch}
.construction .built-sub2{margin:1.75rem 0 .5rem; font-family:var(--display); font-weight:400; font-size:1.4rem}
.construction .built-grid{margin-bottom:1.5rem}
.built-grid h4{font-family:var(--display); font-weight:400; font-size:1.4rem; line-height:1.2; margin:0 0 .55rem}
.construction .anchor{position:absolute; top:0}
.st-next{justify-self:start; margin-top:1.25rem; padding:.7rem 1.2rem; font-size:.95rem}
@media (prefers-reduced-motion: no-preference){
  .stations.is-tabs > .station.is-current,.is-tabs > [data-tab-panel].is-current{animation:panel-in .4s ease both}
}
@keyframes panel-in{from{opacity:0} to{opacity:1}}
.station-links .hear{all:unset; cursor:pointer; color:var(--lamp-text); font-weight:600}
.station-links .hear:focus-visible{outline:2px solid var(--lamp-text); outline-offset:3px; border-radius:4px}

/* ---- tabs inside a section: the instruments, the pre-order details ---- */
.tab-nav{display:flex; flex-wrap:wrap; gap:.3rem; width:fit-content; max-width:100%; margin:0 0 1.4rem; padding:.3rem;
  border:1px solid var(--line); border-radius:999px}
.tab{all:unset; box-sizing:border-box; cursor:pointer; padding:.6rem 1.1rem; border-radius:999px; font:600 .95rem/1 var(--sans); color:var(--ink-muted); white-space:nowrap}
.tab:hover:not([aria-selected="true"]){color:var(--ink); background:var(--field)}
.tab[aria-selected="true"]{background:var(--lamp); color:var(--lamp-ink)}
.tab:focus-visible{outline:2px solid var(--lamp-text); outline-offset:2px}
@media (max-width:760px){
  .tab-nav{flex-wrap:nowrap; overflow-x:auto; width:auto; border-radius:16px; scrollbar-width:none}
  .tab-nav::-webkit-scrollbar{display:none}
  .tab{flex:0 0 auto}
}
/* the tab names the panel, so its own heading is kept for screen readers only */
.is-tabs > [data-tab-panel] > h3:first-child,.is-tabs .panel-title{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}

/* ---- Sound: the listening console ---- */
.console{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:clamp(1.5rem,4vw,3.25rem); margin-top:clamp(2rem,4vw,3rem);
  padding:clamp(1.25rem,3vw,2.25rem); border:1px solid var(--line); border-radius:22px;
  background:radial-gradient(80% 120% at 0% 0%, rgba(92,203,232,.08), transparent 60%), var(--field)}
.console-head{grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem 1.25rem}
.console-head h3{margin:0; font-size:clamp(1.9rem,3vw,2.5rem)}
.console-head p{margin:0; color:var(--ink-muted); max-width:56ch}
.inst-tabs .instrument p{max-width:58ch}
.deck{display:flex; flex-direction:column; gap:.9rem}
.deck-label{margin:0; font-size:.88rem; color:var(--ink-muted)}
.presets{list-style:none; margin:0; padding:0; display:grid; gap:.5rem}
.presets > li[hidden]{display:none}
.preset{all:unset; box-sizing:border-box; cursor:pointer; width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.85rem 1rem; border:1px solid var(--line); border-radius:14px; color:var(--ink); transition:border-color .2s ease, background-color .2s ease}
.preset:hover{border-color:color-mix(in srgb, var(--lamp) 50%, var(--line))}
.preset:focus-visible{outline:2px solid var(--lamp-text); outline-offset:2px}
.preset[aria-pressed="true"]{border-color:var(--lamp-text); background:color-mix(in srgb, var(--lamp) 9%, transparent)}
.p-name{font-family:var(--display); font-size:1.22rem; line-height:1.15}
.p-state{font-size:.8rem; color:var(--ink-muted); white-space:nowrap}
.presets .is-ready .p-state{color:var(--lamp-text)}
.deck-player{display:grid; grid-template-columns:auto minmax(0,1fr); gap:.8rem 1rem; align-items:center; margin-top:.35rem}
.deck-play{min-width:6.5rem}
.deck-play:disabled{opacity:.42; cursor:not-allowed; filter:saturate(.4)}
.deck-ab{justify-self:start; display:inline-flex; padding:.25rem; border:1px solid var(--line); border-radius:999px}
.deck-ab button{all:unset; cursor:pointer; padding:.5rem .95rem; border-radius:999px; font:600 .9rem/1 var(--sans); color:var(--ink-muted)}
.deck-ab button[aria-pressed="true"]{background:var(--ink); color:var(--bg)}
.deck-ab button:disabled{cursor:not-allowed; opacity:.5}
.deck-ab button:focus-visible{outline:2px solid var(--lamp-text); outline-offset:2px}
.deck-bar{grid-column:1 / -1; height:4px; border-radius:4px; overflow:hidden; background:var(--line)}
.deck-bar span{display:block; width:0; height:100%; background:var(--lamp)}
.deck-note{grid-column:1 / -1; margin:0; font-size:.9rem; color:var(--ink-muted)}
@media (max-width:380px){ .deck-player{grid-template-columns:minmax(0,1fr)} }
#instruments .also{margin-top:clamp(2rem,4vw,3rem)}
.watch{margin-top:clamp(2rem,4vw,3rem)}
@media (max-width:860px){ .console{grid-template-columns:minmax(0,1fr)} }
.console > *,.tabset,.deck{min-width:0}

/* ---- Art: the closer look, as a strip you swipe or scroll sideways ---- */
.gallery.strip{display:grid; grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:clamp(210px,22vw,300px); grid-auto-rows:auto;
  overflow-x:auto; scroll-snap-type:x mandatory; gap:clamp(.6rem,1.4vw,1rem); margin-top:clamp(2.25rem,4.5vw,3.25rem); padding-bottom:.6rem}
.gallery.strip button{grid-column:auto !important; grid-row:auto !important; aspect-ratio:3/4; scroll-snap-align:start}
@media (max-width:760px){ .gallery.strip{grid-template-columns:none; grid-auto-columns:64vw; grid-auto-rows:auto} }

/* ---- Pre-order: the details under the order ---- */
.order-more{margin-top:clamp(2.5rem,5vw,4rem)}
.more-tabs .inside-list{margin-bottom:0}
.more-tabs .faq{max-width:none}
.more-tabs .more-panel > p{color:var(--ink-muted); max-width:68ch}
.more-tabs .more-panel > p strong{color:var(--ink)}
.more-tabs .edition{max-width:42rem}

/* the Reactor and the construction have no number, in tabs too */
.stations.is-tabs .reactor::before,.stations.is-tabs .construction::before{content:none}
/* the two section intros sit side by side on wide screens, so they take half the height */
@media (min-width:1000px){
  #instruments .section-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:clamp(2.5rem,6vw,5.5rem); align-items:start; margin-bottom:0}
  #instruments .section-head > h2{grid-column:1 / -1}
  #instruments .section-head > .inst-lede{grid-column:1; grid-row:2 / span 2; margin:0}
  #instruments .section-head > p:nth-of-type(2){grid-column:2; grid-row:2}
  #instruments .section-head > p:nth-of-type(3){grid-column:2; grid-row:3}
  #path .section-head{margin-bottom:0}
  #path .section-head h2{max-width:22ch}
}
/* what's in the box: the first six, then the rest on request */
.inside-list > div[hidden]{display:none}
.show-all{margin-top:1.25rem}
/* the closer look: buttons to move along the strip with a mouse */
.strip-wrap{position:relative}
.strip-ctrl{display:flex; justify-content:flex-end; gap:.5rem; margin-top:clamp(2rem,4vw,3rem)}
.strip-ctrl button{all:unset; box-sizing:border-box; cursor:pointer; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; color:var(--ink)}
.strip-ctrl button:hover{border-color:var(--lamp-text); color:var(--lamp-text)}
.strip-ctrl button:focus-visible{outline:2px solid var(--lamp-text); outline-offset:2px}
.strip-ctrl button:disabled{opacity:.35; cursor:default}
.strip-ctrl svg{width:18px; height:18px}
.strip-ctrl + .gallery.strip{margin-top:.9rem}
@media (hover:none){ .strip-ctrl{display:none} .strip-ctrl + .gallery.strip{margin-top:clamp(2.25rem,4.5vw,3.25rem)} }

/* ---- Explore: the board stack beside the story (assets/front.js moves it into the open tab) ---- */
.explore-3d{position:relative; z-index:2; height:min(34rem,40vw)}
.explore-3d .td-visual{position:relative; height:100%}
.explore-3d::before{content:""; position:absolute; inset:4% 2%; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(8,20,25,.8), rgba(8,20,25,.35) 60%, rgba(8,20,25,0))}
.explore-3d .td-stack{position:absolute; inset:-4% -6%; opacity:0}
.explore-3d .td-pedal{height:84%}
.explore-3d .td-fallback{height:78%; border-radius:14px}
.explore-3d .td-controls{bottom:0}
.explore-3d .td-toggle[hidden]{display:none}
@media (min-width:861px){
  /* on a station: to the right of the story, over the dark foot of its scene */
  .stations.is-tabs .station > .explore-3d{position:absolute; right:0; top:calc(var(--scene-h) - 10rem); width:min(44%,520px)}
  .stations.is-tabs .station:not(.construction) > :is(h3,.promise,.tale,.st-next){max-width:50%}
  /* on "Open it up": the whole stack, large, under the opening lines */
  .stations.is-tabs .construction > .explore-3d{position:relative; top:auto; right:auto; width:100%; height:min(38rem,46vw); margin:.5rem 0 2rem}
}
@media (max-width:860px){
  .explore-3d{height:min(86vw,380px); margin:.25rem 0 1rem}
}

/* ---- "Open it up": the opening lines, then the construction ---- */
.construction > h3.open-title{max-width:18ch; line-height:1.08}
.open-intro{margin:.5rem 0 0}
.open-lead{margin:0; font-size:1.12rem; color:var(--ink)}
.open-sub{margin:.35rem 0 0; color:var(--ink-muted); font-size:.98rem}
.construction .open-art{margin:0 0 .5rem}

/* =====================================================================
   The narrated story (assets/tale.js)
   ===================================================================== */
/* the footswitch on the hero pedal: it glows once the opening has finished */
.fs-hotspot{position:absolute; z-index:3; transform:translate(-50%,-50%); border:0; padding:0; margin:0; background:transparent; border-radius:50%;
  cursor:pointer; opacity:0; pointer-events:none; transition:opacity .9s ease}
html:not(.film-wait) .hero .fs-hotspot{opacity:1; pointer-events:auto}
.hero.film-reveal .fs-hotspot{transition-delay:4.4s}
.fs-ring{position:absolute; inset:-7%; border-radius:50%; border:2px solid rgba(242,193,78,.85);
  box-shadow:0 0 20px rgba(242,193,78,.55), inset 0 0 14px rgba(242,193,78,.3)}
@media (prefers-reduced-motion: no-preference){ .fs-ring{animation:fs-pulse 2.8s ease-in-out infinite} }
@keyframes fs-pulse{0%,100%{transform:scale(1); opacity:.95} 50%{transform:scale(1.09); opacity:.45}}
.fs-label{position:absolute; left:50%; top:calc(100% + .75rem); transform:translateX(-50%); white-space:nowrap; padding:.5rem .95rem; border-radius:18px; text-align:center;
  background:rgba(8,20,25,.85); border:1px solid rgba(242,193,78,.45); color:var(--lamp-text); font:600 .86rem/1 var(--sans)}
.fs-label small{display:block; margin-top:.3rem; font:500 .7rem/1.2 var(--sans); color:var(--ink-muted)}
.fs-hotspot:hover .fs-ring,.fs-hotspot:focus-visible .fs-ring{border-color:var(--lamp); box-shadow:0 0 30px rgba(242,193,78,.85), inset 0 0 18px rgba(242,193,78,.45)}
.fs-hotspot:focus-visible{outline:2px solid var(--ink); outline-offset:8px}

/* the story itself, full screen over the page */
html.tour-open{overflow:hidden}
.tour{position:fixed; inset:0; z-index:90; background:#03080a; color:var(--ink); opacity:0; transition:opacity .6s ease}
.tour.is-in{opacity:1}
.tour[hidden]{display:none}
.tour-stage{position:absolute; inset:0; overflow:hidden}
/* The century-old leather journal approaches before opening into its painting. */
.story-book{position:absolute;inset:0;z-index:3;display:grid;place-items:center;pointer-events:none;
  perspective:2000px;background:radial-gradient(ellipse at 50% 48%,#30271e,#100e0c 62%,#020608)}
.story-book[hidden]{display:none}
.book-volume{position:relative;width:min(80vw,710px,calc(78svh * .75));aspect-ratio:3/4;
  transform-style:preserve-3d;will-change:transform;transform-origin:50% 50%}
.book-page{position:absolute;inset:3px 0 3px 5px;padding:7% 7% 14%;border-radius:3px 12px 12px 3px;
  background:#c4a675 url(/images/story/book/paper-v99.webp) center/100% 100%;
  box-shadow:5px 3px 0 #a38b61,9px 5px 0 #60513a,14px 18px 50px #000a;overflow:hidden}
.book-page img{width:100%;height:100%;object-fit:cover;object-position:60% 30%;filter:sepia(.22) contrast(.93);
  border:1px solid #625036;box-shadow:0 0 14px #65503655}
.book-page span{position:absolute;bottom:6%;left:7%;width:86%;text-align:center;color:#49321d;
  font:italic clamp(.75rem,2vw,1.3rem)/1.25 var(--display)}
.book-leaf{position:absolute;inset:0;transform-origin:left center;transform-style:preserve-3d;z-index:2;will-change:transform}
.book-cover,.book-inside{position:absolute;inset:0;backface-visibility:hidden;border-radius:4px 12px 12px 4px;overflow:hidden}
.book-cover{background:#2c1b12;box-shadow:inset 8px 0 14px #000a,4px 7px 26px #000a;border:1px solid #63503b}
.book-cover img{display:block;width:100%;height:100%;object-fit:fill}
.book-inside{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;
  transform:rotateY(180deg);background:#c8ad7c url(/images/story/book/paper-v99.webp) center/100% 100%;
  color:#49321d;text-align:center;padding:12%;font:clamp(1.25rem,3vw,2.2rem)/1.25 var(--display);
  box-shadow:inset -12px 0 30px #4d321b70}
.book-inside small{font-size:.55em;font-style:italic;max-width:16ch}
.book-inside-rule{width:55%;height:18px;border-top:1px solid #80613d;border-bottom:1px solid #80613d;opacity:.55}
.book-spine{position:absolute;top:0;bottom:0;left:-5px;width:10px;border-radius:4px 0 0 4px;
  background:linear-gradient(90deg,#140d08,#68513a,#23180f);transform:translateZ(2px);pointer-events:none}
@media(prefers-reduced-motion:reduce){.book-volume{transform:none!important}.book-leaf{transform:none!important}}
.tour-pic{position:absolute; inset:0; opacity:0; transition:opacity 1.9s ease; will-change:opacity, transform}
.tour-pic.is-on{opacity:1}
.tour-frame{position:absolute; transform-origin:0 0; will-change:transform;backface-visibility:hidden}
/* the opening film, first in the story; it fades into the first scene through the mist */
.tour-film{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 3s ease-in-out; pointer-events:none}
/* from the film to the first scene: fade out to dark, then the scene fades in */
.tour.film-dip .tour-pic{opacity:0 !important}
/* sea smoke rolling through a slow hand-over between scenes (The Night of the Sea into Wall of Ice) */
.tour-smoke{position:absolute; inset:0; pointer-events:none; opacity:0; z-index:3; overflow:hidden}
.tour-smoke i{position:absolute; left:0; width:200%; background-repeat:repeat-x; background-size:50% 100%}
.tour-smoke .s-a{top:-10%; height:120%; background-image:url(/images/fx/mist-a.webp)}
.tour-smoke .s-b{top:15%; height:95%; background-image:url(/images/fx/mist-b.webp); opacity:.85}
.tour.smoking .tour-smoke{animation:tour-smoke 5.4s ease-in-out both}
@media (prefers-reduced-motion: no-preference){
  .tour.smoking .tour-smoke .s-a{animation:smoke-roll-a 5.4s ease-in-out both}
  .tour.smoking .tour-smoke .s-b{animation:smoke-roll-b 5.4s ease-in-out both}
}
@keyframes tour-smoke{0%{opacity:0} 38%{opacity:.88} 62%{opacity:.88} 100%{opacity:0}}
@keyframes smoke-roll-a{from{transform:translate(0,10%)} to{transform:translate(-14%,-8%)}}
@keyframes smoke-roll-b{from{transform:translate(-20%,14%)} to{transform:translate(-4%,-4%)}}
.tour.film-rise .tour-pic{transition:opacity 3s ease-in-out !important}
/* The Land draws its own dissolves, frame by frame */
.tour.world .tour-pic{transition:none !important}
/* a closer picture of The Land coming in: its outer edges feathered into the lined-up picture beneath */
.tour.world .tour-pic.feather .tour-frame{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 10%,#000 90%,transparent 100%);
  -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 10%,#000 90%,transparent 100%);
  mask-composite:intersect}
.tour.world.film-dip .tour-pic{opacity:0 !important}
.tour-film.is-on{opacity:1; transition-duration:.4s}
.tour-frame img{width:100%; height:100%; display:block}
.tour-weather{position:absolute; inset:0; overflow:hidden; pointer-events:none; opacity:0; mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(90deg,transparent 30%,rgba(0,0,0,.22) 38%,#000 47%);
  mask-image:linear-gradient(90deg,transparent 30%,rgba(0,0,0,.22) 38%,#000 47%)}
.tour-pic.moth-weather .tour-weather{opacity:.18}
.tour-weather:before,.tour-weather:after{content:""; position:absolute; inset:-18% -12%; transform:translate3d(0,0,0)}
.tour-weather:before{background:repeating-linear-gradient(108deg,transparent 0 17px,rgba(211,231,247,.42) 17.5px,rgba(211,231,247,.42) 18px,transparent 18.5px 43px);
  animation:moth-rain 2.1s linear infinite}
.tour-weather:after{inset:-22% -18%; opacity:.56; background:repeating-linear-gradient(104deg,transparent 0 31px,rgba(197,222,244,.34) 31.4px,rgba(197,222,244,.34) 32px,transparent 32.6px 71px);
  animation:moth-rain 3.4s linear -1.1s infinite}
@keyframes moth-rain{to{transform:translate3d(-3.5%,8%,0)}}
@media (prefers-reduced-motion: reduce){.tour-pic.moth-weather .tour-weather:before,.tour-pic.moth-weather .tour-weather:after{animation:none}}
@media (prefers-reduced-motion: no-preference){ .tour.mist-on .tour-mist{animation:tour-mist 3.4s ease both} }
/* the lights on each picture: every one at its own pace (assets/tale.js gives each its speed) */
.tour-lights{position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen}
.tour-lights i{position:absolute; left:calc(var(--x) * 100%); top:calc(var(--y) * 100%); width:calc(var(--s) * 100%); aspect-ratio:var(--ar, 1);
  translate:-50% -50%; rotate:var(--rot, 0deg); border-radius:50%; opacity:.5;
  background:radial-gradient(closest-side, rgba(255,226,170,.85), rgba(255,180,92,.38) 42%, rgba(255,160,70,0))}
.tour-lights .k-tw{background:radial-gradient(closest-side, rgba(255,238,195,.95), rgba(255,192,110,.35) 45%, rgba(255,170,80,0))}
.tour-lights .k-main{background:radial-gradient(closest-side, rgba(255,242,205,.95), rgba(255,202,120,.45) 40%, rgba(255,180,90,0))}
.tour-lights .k-lamp{background:radial-gradient(closest-side, rgba(255,247,214,1), rgba(255,215,140,.5) 40%, rgba(255,200,120,0))}
.tour-lights .k-beam{background:radial-gradient(closest-side, rgba(255,228,172,.5), rgba(255,210,150,.16) 55%, rgba(255,200,140,0))}
.tour-lights .k-moon{background:radial-gradient(closest-side, rgba(232,242,255,.7), rgba(200,220,255,.22) 50%, rgba(200,220,255,0))}
.tour-lights .k-eye{background:radial-gradient(closest-side, rgba(255,236,170,.95), rgba(255,190,70,.45) 45%, rgba(255,170,50,0))}
.tour-lights .k-eye.c-teal{background:radial-gradient(closest-side, rgba(196,255,242,.95), rgba(80,232,212,.45) 45%, rgba(40,200,190,0))}
/* a pale, dimmer glint: the reflection's eyes in The Room */
.tour-lights .k-eye.c-white{background:radial-gradient(closest-side, rgba(255,255,255,.84), rgba(236,242,255,.27) 45%, rgba(255,255,255,0));
  filter:drop-shadow(0 0 5px rgba(255,255,255,.36))}
/* her window in The Land: the light comes from her candles, low on the left of the glass, flickering like
   the windows around it; bright from afar, softer as the candles themselves come into view (--op) */
.tour-lights .k-f.c-candle{
  background:radial-gradient(closest-side, rgba(255,232,180,calc(.9 * var(--op,1))) 0, rgba(255,198,110,calc(.6 * var(--op,1))) 38%, rgba(255,170,80,calc(.22 * var(--op,1))) 70%, rgba(255,160,70,0) 100%)}
/* Behind the Glass: candlelight holds independently; compressor red arrives occasionally,
   with irregular sparkle on the port rim and transient light waves on the shore. */
.tour-lights .k-ewhite{filter:brightness(calc(1 - var(--red, 0) * .55)); border-radius:50%; background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255,248,224,1) 0, rgba(255,214,140,.95) 42%, rgba(255,176,86,.4) 72%, rgba(255,160,70,0) 100%);
  animation:glass-candle 10s linear infinite}
.tour-lights .k-eface{filter:brightness(calc(1 - var(--red, 0) * .55)); background:radial-gradient(closest-side, rgba(255,206,138,.58) 0, rgba(255,174,94,.26) 55%, rgba(255,160,80,0) 100%);
  animation:glass-candle 10s linear infinite}
.tour-lights .k-ered{opacity:var(--red, 0); border-radius:50%; background:radial-gradient(ellipse 50% 46% at 50% 50%, rgba(255,150,130,1) 0, rgba(255,34,22,.92) 34%, rgba(214,0,0,.45) 64%, rgba(180,0,0,0) 100%);
  animation:none}
.tour-lights .k-scandle{filter:brightness(calc(1 - var(--red, 0) * .55)); opacity:.8; border-radius:0;
  background:radial-gradient(closest-side, rgba(255,252,240,1) 0, rgba(255,222,156,.65) 30%, rgba(255,200,120,0) 70%),
    linear-gradient(90deg, transparent 47%, rgba(255,242,214,.95) 50%, transparent 53%), linear-gradient(0deg, transparent 47%, rgba(255,242,214,.95) 50%, transparent 53%);
  animation:glass-candle 10s linear infinite}
.tour-lights .k-sred{opacity:var(--red, 0); border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,160,140,1) 0, rgba(255,44,30,.85) 16%, rgba(255,0,0,.22) 40%, rgba(255,30,20,.55) 56%, rgba(255,0,0,.12) 66%, rgba(255,0,0,0) 76%);
  animation:none}
.tour-lights .k-rrim{opacity:calc(var(--red, 0) * .27); background:conic-gradient(from 19deg,
 transparent 0deg 31deg,rgba(239,36,27,.42) 37deg 42deg,transparent 49deg 91deg,
 rgba(255,88,64,.35) 99deg 104deg,transparent 112deg 166deg,
 rgba(238,30,20,.3) 173deg 176deg,transparent 183deg 235deg,
 rgba(249,73,54,.4) 241deg 244deg,transparent 252deg 330deg,
 rgba(242,28,23,.42) 337deg 342deg,transparent 351deg);
 mask:radial-gradient(circle,transparent 65%,#000 71% 81%,transparent 88%);
 animation:none}
.tour-lights .k-rspark{opacity:calc(var(--red,0) * var(--op,.5) * .9);
 background:radial-gradient(circle,rgba(255,198,147,1) 0,rgba(255,60,44,.92) 19%,rgba(229,8,18,.45) 44%,transparent 79%);
 filter:drop-shadow(0 0 4px rgba(255,38,18,.7)); animation:none}
.tour-lights .k-rface{opacity:calc(var(--red,0) * .28);
 background:radial-gradient(closest-side,rgba(255,74,62,.47),rgba(245,13,25,.22) 42%,transparent 87%); animation:none}
.tour-lights .k-rwava,.tour-lights .k-rwavb{opacity:0;
 background:radial-gradient(ellipse at center,rgba(255,41,35,.36),rgba(238,23,18,.13) 39%,rgba(160,8,13,.04) 69%,transparent 88%);
 filter:blur(6px); transform:scale(.48); animation:none}
.tour.red-wave .tour-lights .k-rwava{animation:shore-red-wave 1.15s ease-out both}
.tour.red-wave .tour-lights .k-rwavb{animation:shore-red-wave 1.48s ease-out .15s both}
@keyframes shore-red-wave{0%{opacity:0;transform:scale(.35)} 18%{opacity:.45;transform:scale(.8)}
 40%{opacity:.22;transform:scale(1.5)} 80%{opacity:.07;transform:scale(2.25)} 100%{opacity:0;transform:scale(2.7)}}
.tour-lights .k-rwater{opacity:var(--red, 0); background:radial-gradient(closest-side, rgba(230,24,20,.42) 0, rgba(200,0,0,.16) 55%, rgba(180,0,0,0) 100%);
  animation:none}
.tour-lights .k-gcandle{filter:brightness(calc(1 - var(--red, 0) * .55)); opacity:.6; background:radial-gradient(closest-side, rgba(255,250,232,.95) 0, rgba(255,214,140,.55) 35%, rgba(255,180,90,0) 100%);
  animation:glass-candle 10s linear infinite}
.tour-lights .k-gred{opacity:var(--red, 0); background:radial-gradient(closest-side, rgba(255,150,130,1) 0, rgba(255,40,28,.85) 18%, rgba(255,0,0,.2) 42%, rgba(255,30,20,.5) 56%, rgba(255,0,0,0) 74%);
  animation:none}
@keyframes glass-candle{0%{opacity:.4} 1.5%{opacity:.32} 6%{opacity:.36} 12%{opacity:.3} 14.5%{opacity:.86} 18%{opacity:.97} 22%{opacity:.78} 26%{opacity:1}
  30%{opacity:.82} 34%{opacity:.95} 38%{opacity:.74} 42%{opacity:.92} 46%{opacity:.84} 49.5%{opacity:.9} 51%{opacity:.34} 55%{opacity:.3} 60%{opacity:.36}
  62.5%{opacity:.88} 66%{opacity:1} 70%{opacity:.8} 74%{opacity:.95} 78%{opacity:.76} 82%{opacity:.98} 86%{opacity:.82} 90%{opacity:.94} 94%{opacity:.78} 98%{opacity:.6} 100%{opacity:.4}}
/* the ocean light far out on the water: bright, shimmering a little */
.tour-lights .k-olight{opacity:.95; background:radial-gradient(closest-side, rgba(255,250,236,1) 0, rgba(255,232,180,.85) 14%, rgba(255,210,140,.35) 40%, rgba(255,200,130,0) 100%);
  animation:olight 4.4s ease-in-out infinite}
@keyframes olight{0%,100%{opacity:.86; transform:scale(1)} 30%{opacity:1; transform:scale(1.06)} 55%{opacity:.8; transform:scale(.97)} 80%{opacity:.96; transform:scale(1.03)}}
/* lightning: for an instant the whole scene lights, twice (the flashes 0.44 s apart), then it is dark again */
.tour-lightning{position:absolute; inset:0; pointer-events:none; opacity:0; z-index:3; mix-blend-mode:screen;
  background:radial-gradient(ellipse 90% 70% at 62% 18%, rgba(226,236,255,.85) 0, rgba(190,208,255,.42) 45%, rgba(160,182,255,.18) 100%)}
.tour.lightning .tour-lightning{animation:lightning 1.4s linear both}
@keyframes lightning{0%{opacity:0} 3%{opacity:.62} 9%{opacity:.08} 14%{opacity:.18} 22%{opacity:0} 34%{opacity:0} 36%{opacity:.48} 44%{opacity:.05} 60%{opacity:0} 100%{opacity:0}}
@media (prefers-reduced-motion: reduce){
  .tour-lights .k-ered,.tour-lights .k-sred,.tour-lights .k-rrim,.tour-lights .k-rwater,.tour-lights .k-gred,.tour-lights .k-rspark,.tour-lights .k-rface,.tour-lights .k-rwava,.tour-lights .k-rwavb{display:none}
  .tour-lights .k-ewhite,.tour-lights .k-eface,.tour-lights .k-scandle,.tour-lights .k-gcandle,.tour-lights .k-olight{animation:none}
  .tour-lightning{display:none} }
/* flames: a white-hot core, orange around it, and a breath of blue at the edge */
.tour-lights .k-flame{background:radial-gradient(closest-side, rgba(255,252,240,.95) 0, rgba(255,228,165,.82) 17%, rgba(255,152,52,.52) 40%, rgba(255,112,30,.22) 56%, rgba(120,160,255,.16) 64%, rgba(255,110,30,0) 78%)}
/* the lighthouses turning: under the lights, a patch of the painting with the lamp's light lifted off;
   over it, the painting's own lamp (pale between flashes, full when it faces you) and its own beam,
   swinging out bright to the right, shortening as it turns toward you, out to the left with a wobble,
   then gone behind the tower until it comes round again */
.tour-shades{position:absolute; inset:0; pointer-events:none}
.tour-unlit{position:absolute; display:block; pointer-events:none}
.tour-lamplight,.tour-sweep{position:absolute; display:block; pointer-events:none; opacity:.4}
.tour-sweep{opacity:0}
.tour-lights .tour-shaft{position:absolute; left:calc(var(--x) * 100%); top:calc(var(--y) * 100%); width:calc(var(--len) * 100%); aspect-ratio:4.2;
  translate:0 -50%; rotate:0deg; border-radius:0; transform-origin:0 50%; opacity:0; pointer-events:none;
  background:radial-gradient(ellipse 100% 50% at 0% 50%, rgba(255,236,192,.62) 0%, rgba(255,226,176,.3) 32%, rgba(255,218,166,.1) 62%, rgba(255,214,160,0) 100%)}
/* the icebreaker's lights: big ones nearly steady, small ones a gentle flicker */
.tour-lights .k-steady{background:radial-gradient(closest-side, rgba(255,244,212,.95), rgba(255,206,128,.45) 40%, rgba(255,184,96,0))}
.tour-lights .k-sl{background:radial-gradient(closest-side, rgba(255,238,195,.92), rgba(255,194,112,.38) 45%, rgba(255,172,84,0))}
@media (prefers-reduced-motion: no-preference){
  .tour-lights i{animation:flicker-a var(--d, 4s) linear var(--dl, 0s) infinite}
  .tour-lights .v-b{animation-name:flicker-b}
  .tour-lights .v-c{animation-name:flicker-c}
  .tour-lights .k-flame{animation:tour-flame var(--d) linear var(--dl) infinite}
  .tour-lights .k-tw{animation-name:tour-twinkle}
  .tour-lights .k-main{animation:tour-main var(--d) ease-in-out var(--dl) infinite}
  .tour-lights .k-lamp{animation:tour-bloom var(--d) ease-in-out var(--dl) infinite}
  .tour-lamplight{animation:tour-lampglow var(--d) ease-in-out var(--dl) infinite}
  .tour-sweep,.tour-lights .tour-shaft{animation:tour-sweep var(--d) linear var(--dl) infinite}
  .tour-lights .k-steady{animation:tour-steady var(--d) ease-in-out var(--dl) infinite}
  .tour-lights .k-sl{animation:tour-sl var(--d) ease-in-out var(--dl) infinite}
  .tour-lights .k-sl.small{animation-name:tour-sl-small}
  .tour-lights .k-moon{animation:tour-moon var(--d) ease-in-out var(--dl) infinite}
  .tour-lights .k-eye{animation:tour-eye var(--d) ease-in-out var(--dl) infinite}
  .tour-lights .k-ember{animation:ember var(--d) ease-in-out var(--dl) infinite}
}
@keyframes tour-twinkle{0%{opacity:.2} 18%{opacity:.85} 30%{opacity:.35} 52%{opacity:.9} 64%{opacity:.25} 82%{opacity:.75} 100%{opacity:.2}}
@keyframes tour-main{0%{opacity:.55} 50%{opacity:1} 100%{opacity:.55}}
/* a lighthouse turning: out, the light swings round to full, holds, swings away, and dark */
@keyframes tour-lampglow{0%{opacity:.38} 14%{opacity:.78} 34%{opacity:.95} 39%{opacity:1} 46%{opacity:.85} 64%{opacity:.42} 100%{opacity:.38}}
@keyframes tour-bloom{0%{opacity:0} 31%{opacity:.18} 39%{opacity:.95} 46%{opacity:.18} 54%{opacity:0} 100%{opacity:0}}
@keyframes tour-sweep{
  0%{opacity:0; transform:scaleX(calc(var(--r) * .3)) rotate(0deg)}
  14%{opacity:.95; transform:scaleX(var(--r)) rotate(-2deg)}
  30%{opacity:1; transform:scaleX(calc(var(--r) * .55)) rotate(1deg)}
  38%{opacity:.85; transform:scaleX(calc(var(--r) * .08)) rotate(0deg)}
  40%{opacity:.85; transform:scaleX(calc(var(--r) * -.08)) rotate(0deg)}
  52%{opacity:.8; transform:scaleX(calc(var(--r) * -.85)) rotate(3deg)}
  64%{opacity:0; transform:scaleX(calc(var(--r) * -1)) rotate(4deg)}
  100%{opacity:0; transform:scaleX(calc(var(--r) * .3)) rotate(0deg)}}
@keyframes tour-steady{0%{opacity:.86} 50%{opacity:1} 100%{opacity:.86}}
@keyframes tour-sl{0%{opacity:.68} 35%{opacity:.9} 60%{opacity:.76} 82%{opacity:.94} 100%{opacity:.68}}
@keyframes tour-sl-small{0%{opacity:.5} 22%{opacity:.86} 41%{opacity:.6} 63%{opacity:.9} 84%{opacity:.56} 100%{opacity:.5}}
/* a flame: never still, brightening and shrinking unevenly, licking upward */
@keyframes tour-flame{0%{opacity:.7; transform:scale(1)} 9%{opacity:.96; transform:scale(1.06) translateY(-2%)} 17%{opacity:.58; transform:scale(.95)}
  26%{opacity:.88; transform:scale(1.03) translateY(-1%)} 33%{opacity:.5; transform:scale(.92)} 41%{opacity:1; transform:scale(1.08) translateY(-3%)}
  52%{opacity:.72; transform:scale(.98)} 60%{opacity:.9; transform:scale(1.04) translateY(-1%)} 69%{opacity:.55; transform:scale(.94)}
  78%{opacity:.97; transform:scale(1.07) translateY(-2%)} 88%{opacity:.64; transform:scale(.97)} 100%{opacity:.7; transform:scale(1)}}
@keyframes tour-moon{0%{opacity:.3} 50%{opacity:.62} 100%{opacity:.3}}
@keyframes tour-eye{0%{opacity:.18} 35%{opacity:.8} 50%{opacity:.62} 70%{opacity:.92} 100%{opacity:.18}}
.tour-frame .aurora-tint,.tour-frame .aurora-rays{left:0; top:0; width:100%; height:100%}
.tour-frame .aurora-tint.m-harbor,.tour-frame .aurora-rays.m-harbor{
  -webkit-mask-image:url("/images/story/aurora-harbor-mask.webp"); mask-image:url("/images/story/aurora-harbor-mask.webp");
  -webkit-mask-size:100% 100%; mask-size:100% 100%}
/* mist drifting through every scene, thicker in some */
.tour-fog{position:absolute; left:0; width:200%; pointer-events:none; background-repeat:repeat-x; background-size:50% 100%}
.tour-fog.fog-a{top:8%; height:92%; background-image:url(/images/fx/mist-a.webp); opacity:calc(var(--fog, .4) * .95)}
.tour-fog.fog-b{top:34%; height:66%; background-image:url(/images/fx/mist-b.webp); opacity:calc(var(--fog, .4) * .8)}
@media (prefers-reduced-motion: no-preference){
  .tour-fog.fog-a{animation:mist-drift 80s linear infinite}
  .tour-fog.fog-b{animation:mist-drift 48s linear infinite reverse}
}
@keyframes tour-mist{0%{opacity:0} 35%{opacity:.5} 100%{opacity:0}}
.tour-shade{position:absolute; inset:0; background:linear-gradient(to bottom, rgba(3,8,10,.6) 0, rgba(3,8,10,0) 20%, rgba(3,8,10,0) 48%, rgba(3,8,10,.86) 100%)}
.tour-top{position:absolute; z-index:4; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:calc(clamp(.9rem,2.4vw,1.5rem) + env(safe-area-inset-top,0px)) clamp(1rem,3vw,2rem) 0}
.tour-scene{margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem .8rem; color:var(--ink-muted); font-size:.88rem}
.tour-title{font-family:var(--display); font-size:clamp(1.1rem,2vw,1.35rem); color:var(--ink)}
.tour-return{all:unset; box-sizing:border-box; cursor:pointer; flex:0 0 auto; padding:.75rem 1.2rem; border-radius:999px; border:1px solid rgba(236,231,220,.38);
  background:rgba(3,8,10,.6); color:var(--ink); font:600 .95rem/1 var(--sans)}
.tour-return:hover{border-color:var(--lamp-text); color:var(--lamp-text)}
.tour-caption{position:absolute; z-index:4; left:0; right:0; bottom:clamp(5.8rem,15vh,9rem); display:flex; justify-content:center; padding:0 clamp(1rem,6vw,4rem); pointer-events:none}
.tour-caption p{margin:0; max-width:42ch; white-space:pre-line; text-align:center; font-family:var(--display); font-size:clamp(1.3rem,2.7vw,2.05rem); line-height:1.35; color:var(--ink);
  text-shadow:0 2px 24px rgba(0,0,0,.95), 0 0 3px rgba(0,0,0,.8); opacity:0; transform:translateY(12px); transition:opacity .7s ease, transform 1.6s ease}
.tour-caption p.is-on{opacity:1; transform:none}
.tour-caption p.is-out{opacity:0; transform:translateY(-10px)}
.tour.no-captions .tour-caption{display:none}
.tour-bar{position:absolute; z-index:4; left:0; right:0; bottom:0; display:flex; align-items:center; gap:.55rem;
  padding:clamp(.9rem,2vw,1.3rem) clamp(1rem,3vw,2rem) calc(clamp(.9rem,2vw,1.3rem) + env(safe-area-inset-bottom,0px))}
.tour-bar button{all:unset; box-sizing:border-box; cursor:pointer; flex:0 0 auto; display:grid; place-items:center; min-width:44px; height:44px; border-radius:999px;
  border:1px solid rgba(236,231,220,.3); background:rgba(3,8,10,.55); color:var(--ink)}
.tour-bar button:hover{border-color:var(--lamp-text); color:var(--lamp-text)}
.tour-bar svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.tour-play svg.i-play{display:none; fill:currentColor}
.tour-play.is-paused svg.i-play{display:block}
.tour-play.is-paused svg.i-pause{display:none}
.tour-progress{flex:1 1 auto; height:4px; border-radius:4px; overflow:hidden; background:rgba(236,231,220,.18)}
.tour-progress span{display:block; width:0; height:100%; background:var(--lamp)}
.tour-bar .tour-cc{padding:0 1rem; font:600 .88rem/1 var(--sans)}
.tour-bar .tour-cc[aria-pressed="false"]{opacity:.55}
.tour button:focus-visible,.tour a:focus-visible{outline:2px solid var(--lamp-text); outline-offset:3px}
.tour-start,.tour-end{position:absolute; z-index:3; inset:0; display:grid; place-items:center; align-content:center; gap:.9rem; padding:1.5rem; text-align:center;
  background:radial-gradient(ellipse at center, rgba(3,8,10,.5), rgba(3,8,10,.9))}
.tour-start[hidden],.tour-end[hidden]{display:none}
.tour-start p{margin:0; color:var(--ink-muted)}
.tour-end img{width:min(52vw,280px); aspect-ratio:1; object-fit:cover; border-radius:50%; box-shadow:0 0 60px rgba(92,203,232,.35), 0 0 0 1px rgba(236,231,220,.15)}
.tour-end-name{margin:.4rem 0 0; font-family:var(--display); font-size:clamp(2.2rem,5vw,3.6rem); line-height:1}
.tour-end-line{margin:0; color:var(--ink-muted); max-width:40ch}
.tour-end-btns{display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem; margin-top:.5rem}
@media (prefers-reduced-motion: no-preference){ .tour-end:not([hidden]){animation:fade-in 1.4s ease both} }
@media (max-width:760px){
  .tour-num{display:none}
  .tour-return{padding:.65rem 1rem; font-size:.9rem}
  .tour-caption{bottom:calc(5.2rem + env(safe-area-inset-bottom,0px))}
}

/* Current guide downloads wrap within narrow screens. */
.dl-list{min-width:0}.dl-list li{min-width:0;max-width:100%}.dl-list a{display:block;min-width:0;overflow-wrap:anywhere}.dl-list a span{display:block;white-space:normal;margin:.35rem 0 0}

/* V106: a concise explanation of the integrated processing path. */
.architecture .eyebrow{font:600 .78rem/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--lamp-text);margin-bottom:.8rem}
.architecture .section-head{max-width:58rem}.architecture-steps{list-style:none;padding:0;margin:2.2rem 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.8rem}
.architecture-steps li{min-width:0;border-top:1px solid var(--line);padding-top:1.1rem}.architecture-steps .step-number{color:var(--lamp-text);font-size:.8rem}.architecture-steps h3{font-size:1.7rem;margin:.6rem 0}.architecture-steps p{font-size:1rem;line-height:1.7}.architecture-steps a{font-size:.9rem}.architecture-example{max-width:70ch;color:var(--ink-muted)}
.evidence-note{font-size:.92rem;color:var(--ink-muted)}#evidence .table-wrap{max-width:100%;overflow:auto}#evidence th,#evidence td{min-width:10rem;vertical-align:top}
@media(max-width:1000px){.architecture-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:580px){.architecture-steps{grid-template-columns:1fr;gap:1.4rem}.architecture-steps h3{font-size:1.6rem}.architecture .lede{font-size:1.15rem}}

.quick-reference h1{font-size:clamp(2.4rem,5vw,4rem);margin:.4rem 0}.quick-head{max-width:65rem}.quick-head .eyebrow{color:var(--lamp-text);font-size:.85rem}.quick-links,.quick-support{font-size:.9rem;color:var(--ink-muted)}
.quick-grid{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);gap:2.6rem;align-items:start;margin-top:2rem}.quick-grid figure{margin:0}.quick-grid img{display:block;width:100%;height:auto}.quick-grid figcaption{font-size:.82rem;line-height:1.6;margin-top:1rem;color:var(--ink-muted)}.quick-reference h2{font-size:1.8rem;margin:0 0 .8rem}.quick-reference table{width:100%;border-collapse:collapse}.quick-reference td,.quick-reference th{padding:.7rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}.quick-reference th{font-size:.94rem}.quick-reference td{font-size:.96rem}.quick-switches{margin:0}.quick-switches div{display:grid;grid-template-columns:4.5rem 1fr;gap:.8rem;margin:.7rem 0}.quick-switches dt{font-weight:600}.quick-switches dd{margin:0}.quick-start{margin-top:2rem;max-width:80ch}.quick-start p{font-size:.97rem}
@media(max-width:620px){.quick-grid{grid-template-columns:1fr;gap:1.5rem}.quick-grid figure{max-width:180px;margin:auto}.quick-reference td,.quick-reference th{padding:.6rem .3rem}.quick-grid h2{margin-top:1.4rem}}
@media print{@page{size:A4;margin:12mm}.quick-reference{background:white!important;color:black!important}.site-head,.site-foot,.quick-links,.skip,.music-toggle{display:none!important}body:has(.quick-reference){background:white!important;color:black!important}.quick-reference .band{padding:0!important}.quick-sheet{max-width:none!important;padding:0!important}.quick-reference *{color:black!important;text-shadow:none!important;box-shadow:none!important}.quick-head h1{font-size:24pt}.quick-head p{font-size:10pt;margin:.4rem 0}.quick-grid{grid-template-columns:125px 1fr;gap:22px;margin-top:14px}.quick-reference h2{font-size:14pt;margin:10px 0 4px}.quick-reference td,.quick-reference th{font-size:9pt;padding:5px 4px;border-color:#bbb}.quick-grid figcaption{font-size:8pt;line-height:1.4}.quick-switches{font-size:9pt}.quick-switches div{margin:4px 0;gap:6px}.quick-start{margin-top:14px;max-width:none}.quick-start p{font-size:9pt;line-height:1.4;margin:6px 0}.quick-support{font-size:8pt;margin:10px 0 0}.quick-reference a{text-decoration:none!important}.quick-grid,.quick-start{break-inside:avoid}}

#evidence table{min-width:800px;table-layout:fixed;width:100%}#evidence th:first-child{width:20%}#evidence th:nth-child(2),#evidence th:nth-child(3){width:40%}.evidence-table-hint{font-size:.85rem;color:var(--ink-muted)}

/* V107: lead with playing controls and keep dated engineering records explicit. */
.player-controls .section-head{max-width:64rem}.player-controls .eyebrow{color:var(--lamp-text);font-size:.85rem}.player-control-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.5rem;margin:2rem 0}.player-control-list div{border-top:1px solid var(--line);padding-top:1rem;min-width:0}.player-control-list dt{font:1.55rem/1.2 var(--display);margin-bottom:.7rem}.player-control-list dd{margin:0;font-size:.95rem;line-height:1.65}.source-update{border-block:1px solid var(--line);padding:1.3rem 0;margin:0 0 2rem}.source-update h2,.source-update h3{font-size:1.7rem}.source-update p{font-size:.94rem}.update-review{max-width:1000px}.update-review table{min-width:650px}.update-review .table-wrap{overflow-x:auto}.update-review section{margin-bottom:2.5rem}
@media(max-width:1000px){.player-control-list{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:600px){.player-control-list{grid-template-columns:1fr;gap:1.1rem}.player-control-list dt{font-size:1.4rem}}