@font-face{font-family:DM;src:url('/sundrift/fonts/dm-sans.ttf') format('truetype');font-display:swap}
@font-face{font-family:Instrument;src:url('/sundrift/fonts/instrument-serif.ttf') format('truetype');font-display:swap}
:root{color-scheme:dark;--paper:#f6ead4;--cream:#efe2c4;--ink:#22150a;--amber:#ffb347;--red:#c8361d;--soot:#130d09;--brass-hi:#f0cc8e;--brass:#c3904f;--brass-lo:#8a5f2c;--bakelite:#1b120c;--mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace}
*{box-sizing:border-box}
html{background:var(--soot)}
body{margin:0;color:var(--paper);font:16px/1.55 DM,system-ui,sans-serif;min-height:100vh;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-underline-offset:4px}
button,input{font:inherit;color:inherit}
button,a,input{touch-action:manipulation}
button{cursor:pointer}
button:disabled{cursor:wait}
:focus-visible{outline:3px dotted var(--amber);outline-offset:4px}
[hidden]{display:none!important}
.skip{position:absolute;left:-999px;top:8px;z-index:30;background:var(--cream);color:var(--ink);padding:10px 14px}
.skip:focus{left:8px}

/* The world sits behind the whole page. */
#world{position:fixed;inset:0;width:100%;height:100vh;height:100lvh;display:block;z-index:0;touch-action:pan-y}
.shade{position:fixed;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(90deg,rgba(14,8,4,.78) 0%,rgba(14,8,4,.38) 34%,rgba(14,8,4,0) 58%),
  linear-gradient(0deg,rgba(14,8,4,.55) 0%,rgba(14,8,4,0) 30%),
  radial-gradient(ellipse at 50% 0%,rgba(0,0,0,0) 40%,rgba(10,6,3,.35) 100%)}
/* Dunkirk mode: the stairwell goes cold, like a grey morning at sea. */
.shade:after{content:'';position:absolute;inset:0;background:#29455c;mix-blend-mode:color;opacity:0;transition:opacity 1.2s}
body.tense .shade:after{opacity:.55}
body.no-world{background:
  radial-gradient(circle at 54% 30%,#f6cf96 0 6%,#e2a865 12%,transparent 34%),
  repeating-conic-gradient(from 0deg at 54% 30%,#5b3c22 0 7deg,#2a1a0f 7deg 15deg),#2a1a0f}
body.no-world #world{display:none}

.mast{position:relative;z-index:3;display:flex;align-items:center;gap:22px;padding:22px clamp(18px,4vw,56px) 0;font:600 12px/1.2 DM,sans-serif;letter-spacing:.16em;text-transform:uppercase}
.show{text-decoration:none;color:var(--paper)}
.show span{color:var(--amber);margin-left:6px}
.episode{color:#e6c79c}
.studio{margin-left:auto;text-decoration:none;color:#e6d6bb;letter-spacing:.08em;text-transform:none;font-weight:400;font-size:14px}

main{position:relative;z-index:2}
.hero{min-height:calc(100svh - 64px);display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,348px);gap:28px;align-items:end;padding:18px clamp(18px,4vw,56px) 104px;pointer-events:none}
.hero>*{pointer-events:auto}
.intro{align-self:start;max-width:560px;padding-top:clamp(10px,4vh,48px)}
h1{font:400 clamp(66px,9.6vw,156px)/.8 Instrument,Georgia,serif;letter-spacing:-.035em;margin:0 0 22px;color:#fff3df;text-shadow:0 3px 30px rgba(20,8,0,.55)}
h1 span{color:var(--amber)}
.lede{font-size:18px;max-width:410px;margin:0 0 16px;color:#f3e3c8;text-shadow:0 1px 12px rgba(0,0,0,.7)}
.status{font:13px/1.5 var(--mono);color:#ffd59a;margin:0;min-height:2.6em;max-width:420px;text-shadow:0 1px 8px #000}
.hint{font-size:14px;color:#e2cfae;margin:6px 0 0;text-shadow:0 1px 8px #000}

/* The lift panel: brushed brass, enamel plates, bakelite buttons. */
.panel{position:relative;padding:22px 20px 20px;border-radius:20px 20px 12px 12px;color:var(--ink);
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),linear-gradient(158deg,var(--brass-hi) 0%,var(--brass) 36%,var(--brass-lo) 100%);
  box-shadow:inset 0 1px 0 #fff2cf,inset 0 -3px 10px rgba(59,34,12,.55),0 0 0 1px #4a2e12,0 28px 70px rgba(0,0,0,.7)}
.panel:before,.panel:after{content:'';position:absolute;top:10px;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f8dfb0,#6b4520 70%);box-shadow:0 1px 0 #fff3}
.panel:before{left:10px}.panel:after{right:10px}
.plate{display:inline-block;background:var(--cream);color:var(--ink);font:600 10.5px/1.3 DM,sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:4px 8px;border-radius:3px;box-shadow:inset 0 1px 2px rgba(0,0,0,.3),0 1px 0 rgba(255,255,255,.35)}
.plate output{font-family:var(--mono);letter-spacing:.04em;margin-left:6px}

.indicator{display:grid;grid-template-columns:1fr;justify-items:center;gap:8px;margin-bottom:14px}
.dial{position:relative;width:176px;height:88px;border-radius:88px 88px 0 0;overflow:hidden;background:radial-gradient(circle at 50% 100%,#fff6e2 0 30%,#ead6ae 75%);box-shadow:inset 0 3px 8px rgba(0,0,0,.45),0 0 0 4px #5a3a1a,0 0 0 6px #e8c38a}
.dial svg{position:absolute;inset:0;width:100%;height:100%}
.needle{position:absolute;left:calc(50% - 1.5px);bottom:0;width:3px;height:76px;background:linear-gradient(#9c1b0d,#5c0f06);transform-origin:50% 100%;transform:rotate(-70deg);border-radius:2px}
.dial:after{content:'';position:absolute;left:calc(50% - 8px);bottom:-8px;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#f3d39d,#5a3a1a)}
.floorbar{display:flex;align-items:center;gap:8px}
.arrow-lamp{width:22px;text-align:center;font-size:13px;color:#4b2f14;text-shadow:0 1px 0 rgba(255,255,255,.3)}
.arrow-lamp.lit{color:#ffde9c;text-shadow:0 0 8px #ffb347,0 0 2px #fff}
#floor{display:inline-block;min-width:118px;text-align:center;font:600 15px/1 var(--mono);letter-spacing:.12em;color:#ffcf7a;background:#140b05;padding:8px 10px;border-radius:4px;box-shadow:inset 0 2px 6px #000,0 1px 0 rgba(255,255,255,.4);text-shadow:0 0 6px rgba(255,179,71,.65)}

.call-row{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;margin-bottom:16px}
.call{position:relative;width:112px;height:112px;border-radius:50%;border:0;padding:0;background:radial-gradient(circle at 50% 50%,#2a1a10 60%,#0d0805 61%,#3d2817 70%,#120b06 72%);box-shadow:0 6px 0 #3b2410,0 10px 20px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.18)}
.call-face{position:absolute;inset:16px;border-radius:50%;display:grid;place-items:center;font-size:30px;color:#4a2508;background:radial-gradient(circle at 40% 32%,#fff1cc 0%,#ffc56e 32%,#e88a2c 70%,#9b4d12 100%);box-shadow:inset 0 -5px 10px rgba(80,30,0,.5),inset 0 3px 4px rgba(255,255,255,.55);transition:box-shadow .3s,filter .3s}
.call-label{position:absolute;left:0;right:0;bottom:-28px;font:600 11px DM,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.call:active{transform:translateY(3px);box-shadow:0 3px 0 #3b2410,0 6px 12px rgba(0,0,0,.5)}
body.running .call-face{box-shadow:inset 0 -5px 10px rgba(80,30,0,.4),inset 0 3px 4px rgba(255,255,255,.6),0 0 26px 6px rgba(255,170,70,.75);filter:saturate(1.15) brightness(1.08)}
.direction{display:grid;gap:10px}
.direction button,.keys button{min-height:44px;border:0;border-radius:24px;padding:0 14px 0 6px;display:flex;align-items:center;gap:10px;font:600 13px DM,sans-serif;letter-spacing:.06em;color:#f3e1c2;background:linear-gradient(#2b1c12,#140c07);box-shadow:0 3px 0 #3b2410,inset 0 1px 0 rgba(255,255,255,.12)}
.direction button i{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:12px;color:#8a6a46;background:radial-gradient(circle at 40% 35%,#3a2819,#120a05);box-shadow:inset 0 0 0 2px #6b4b2a}
.direction button[aria-pressed=true] i{color:#4a2508;background:radial-gradient(circle at 40% 32%,#fff1cc,#ffb347 60%,#c06a1c);box-shadow:inset 0 0 0 2px #ffd89a,0 0 12px rgba(255,179,71,.8)}
.direction button:active,.keys button:active{transform:translateY(2px);box-shadow:0 1px 0 #3b2410}

.speed{margin:30px 0 14px}
.speed .plate{margin-bottom:8px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:10px;border-radius:5px;background:linear-gradient(#0c0704,#2a1a0f);box-shadow:inset 0 2px 3px #000,0 1px 0 rgba(255,255,255,.4)}
input[type=range]::-moz-range-track{height:10px;border-radius:5px;background:linear-gradient(#0c0704,#2a1a0f);box-shadow:inset 0 2px 3px #000,0 1px 0 rgba(255,255,255,.4)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-10px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#fff1cc,#d9a45e 45%,#6e4519);box-shadow:0 3px 6px rgba(0,0,0,.6),inset 0 -2px 3px rgba(0,0,0,.4)}
input[type=range]::-moz-range-thumb{width:30px;height:30px;border:0;border-radius:50%;background:radial-gradient(circle at 38% 32%,#fff1cc,#d9a45e 45%,#6e4519);box-shadow:0 3px 6px rgba(0,0,0,.6)}
.ends{display:flex;justify-content:space-between;font:600 10px DM,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#3d250e;margin-top:-4px}

.layers{border:0;margin:0 0 14px;padding:0}
.layers legend{margin-bottom:10px;padding:4px 8px}
.lamps{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.lamp{--c:#ffb347;--lit:0;position:relative;min-height:46px;border:0;border-radius:50%;aspect-ratio:1;padding:0;font:700 14px var(--mono);color:#23140a;
  background:radial-gradient(circle at 40% 32%,#fff8e6 0%,var(--c) 45%,color-mix(in srgb,var(--c) 55%,#000) 100%);
  box-shadow:inset 0 0 0 3px #3a2410,0 0 calc(4px + var(--lit)*18px) calc(var(--lit)*4px) var(--c),0 2px 0 rgba(255,255,255,.3);
  filter:brightness(calc(.62 + var(--lit)*.5)) saturate(calc(.7 + var(--lit)*.5))}
.lamp[aria-pressed=false]{background:radial-gradient(circle at 40% 32%,#4a3a2c,#140c07);color:#b89a74;box-shadow:inset 0 0 0 3px #3a2410;filter:none}
.lamp[aria-pressed=false] span{text-decoration:line-through;text-decoration-thickness:2px}
.lamp small{position:absolute;left:0;right:0;bottom:-16px;font:600 8.5px DM,sans-serif;letter-spacing:.1em;color:#3d250e;text-transform:uppercase}
.keys{display:flex;gap:8px;margin-top:24px}
.keys button{flex:1;justify-content:center;padding:0 10px;border-radius:6px}
.keys button[aria-pressed=true]{color:#3b1d05;background:linear-gradient(#ffe0a4,#e9a44f);box-shadow:0 3px 0 #6b3d12,0 0 12px rgba(255,179,71,.6)}

.switches{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.switch{position:relative;min-height:84px;border:0;border-radius:8px;padding:10px 8px 8px;display:grid;justify-items:center;align-content:space-between;gap:6px;background:#efe2c4;color:var(--ink);font:600 11px/1.25 DM,sans-serif;letter-spacing:.06em;box-shadow:inset 0 1px 2px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.4)}
.rocker{width:46px;height:30px;border-radius:5px;background:linear-gradient(#2b1c12,#0f0905);box-shadow:inset 0 0 0 2px #5a3a1a;position:relative;overflow:hidden}
.rocker:before{content:'';position:absolute;top:3px;bottom:3px;left:3px;width:20px;border-radius:3px;background:linear-gradient(90deg,#6b4b2a,#3a2410);transition:transform .18s}
.switch[aria-pressed=true] .rocker:before{transform:translateX(20px);background:linear-gradient(90deg,#ffe0a4,#e9a44f)}
.state{font:700 10px var(--mono);letter-spacing:.12em}
.switch.danger .rocker{background:linear-gradient(#3a0f08,#170503)}
.switch.danger[aria-pressed=true] .rocker:before{background:linear-gradient(90deg,#ff8b70,#c8361d)}
.switch.danger:after{content:'';position:absolute;top:7px;left:calc(50% - 28px);width:56px;height:36px;border-radius:6px 6px 3px 3px;background:linear-gradient(rgba(220,60,40,.55),rgba(140,20,10,.6));box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 2px 4px rgba(0,0,0,.4);transform-origin:50% 0;transition:transform .25s;pointer-events:none}
.switch.danger[aria-pressed=true]:after{transform:perspective(120px) rotateX(-70deg)}
body.tense .switch.danger{background:#ffd9cf}

/* Sections below the hero read as plates bolted to the stairwell wall. */
.plaque{position:relative;margin:0 clamp(18px,4vw,56px) 28px;padding:clamp(22px,4vw,44px);background:linear-gradient(#1c130d,#140d08);border:1px solid #5d4022;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,220,170,.08)}
.plaque:before,.plaque:after{content:'';position:absolute;top:12px;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#e8c38a,#5a3a1a)}
.plaque:before{left:12px}.plaque:after{right:12px}
.kicker{font:600 11px DM,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);margin:0 0 10px}
h2{font:400 clamp(36px,4.4vw,64px)/.95 Instrument,Georgia,serif;letter-spacing:-.02em;margin:0 0 16px;color:#fff1db}
h3{font:400 28px/1 Instrument,Georgia,serif;margin:0 0 8px;color:#fff1db}
.plaque p{max-width:620px;color:#e8d8bd}
.readout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(20px,4vw,56px);align-items:center}
.chart{margin:0;padding:12px 12px 10px;background:linear-gradient(#e9c58c,#b98647);border-radius:6px;box-shadow:inset 0 1px 0 #fff2cf,0 10px 30px rgba(0,0,0,.5)}
.chart canvas{display:block;width:100%;height:260px;background:#f4ead6;border-radius:2px;box-shadow:inset 0 1px 4px rgba(0,0,0,.35)}
.chart figcaption{font:600 10.5px DM,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#2c1a0a;display:flex;justify-content:space-between;gap:12px;margin-top:8px}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,40px);margin-top:10px}
.steps b{display:block;font:400 54px/1 Instrument,serif;color:var(--amber);margin-bottom:6px}
.dunkirk-note{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,56px)}
.credit{font-size:14px;color:#cdb898}
footer{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;padding:22px clamp(18px,4vw,56px) 120px;font-size:14px;color:#e2cfae}
footer .follow{margin-left:auto;display:flex;align-items:center;gap:12px}
.rbs-social{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.rbs-social a{display:grid;place-items:center;width:44px;height:44px;color:#f0d7ae;border-radius:50%}
.rbs-social a:hover{background:rgba(255,200,130,.12)}
.rbs-social svg{width:20px;height:20px}

/* Stop, Mute and volume stay reachable at every scroll position. */
.dock{position:fixed;z-index:20;left:50%;bottom:max(10px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:8px 14px 8px 10px;border-radius:14px;background:linear-gradient(#24170e,#100a06);box-shadow:0 0 0 1px #6b4b2a,0 10px 30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,220,170,.12);color:#f0dcbc;max-width:calc(100vw - 16px)}
.dock button{white-space:nowrap;min-height:44px;min-width:64px;border:0;border-radius:8px;padding:0 12px;font:600 13px DM,sans-serif;color:#f6e6c8;background:linear-gradient(#3a2819,#1c120b);box-shadow:inset 0 0 0 1px #6b4b2a}
.dock button[aria-pressed=true]{background:linear-gradient(#ffe0a4,#e9a44f);color:#3b1d05}
.dock label{font:600 11px DM,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.dock input{width:120px;height:44px}
.dock output{font:600 12px var(--mono);min-width:38px}
.failure{position:fixed;z-index:40;left:16px;right:16px;bottom:90px;max-width:560px;margin:auto;padding:16px 18px;border-radius:8px;background:var(--cream);color:var(--ink);box-shadow:0 10px 30px rgba(0,0,0,.6)}
.failure a{color:#7a1d0e;font-weight:600}

@media (max-width:860px){
  .hero{grid-template-columns:1fr;align-items:start;padding-bottom:100px;gap:20px;min-height:0}
  .intro{padding-top:6px}
  h1{font-size:clamp(58px,17vw,96px);margin-bottom:14px}
  .lede{font-size:16px}
  .panel{margin-top:clamp(28px,15vh,150px);padding:18px 16px 16px}
  .hint{display:none}
  .status{min-height:0}
  .indicator{grid-template-columns:auto 1fr;justify-items:start;align-items:center;margin-bottom:12px}
  .dial{width:120px;height:60px}.needle{height:52px}
  .floorbar{justify-self:center}
  .readout,.dunkirk-note{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .shade{background:linear-gradient(180deg,rgba(14,8,4,.72) 0%,rgba(14,8,4,.2) 32%,rgba(14,8,4,0) 50%,rgba(14,8,4,.4) 100%)}
  footer .follow{margin-left:0}
}
@media (max-width:420px){
  .mast{gap:12px;padding-top:16px;font-size:11px;letter-spacing:.12em}
  .episode{display:none}
  .call{width:96px;height:96px}
  .call-row{gap:12px}
  .dock{gap:6px;padding:6px 8px;border-radius:12px}
  .dock button{min-width:56px;padding:0 8px}
  .dock input{width:88px}
  .dock label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}
@media (max-height:520px) and (orientation:landscape){
  .panel{margin-top:0}
  .hero{grid-template-columns:minmax(0,1fr) minmax(300px,340px)}
  h1{font-size:64px}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{transition:none!important}
}