@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(fonts/geist-mono-latin-300-normal.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(fonts/geist-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --bg:#050507; --ink:#ece7df; --mute:#9a958d; --faint:#807a73; --line:rgba(236,231,223,.14); --olo:#00ffcc;
  --serif:"Instrument Serif",ui-serif,Georgia,serif; --mono:"Geist Mono",ui-monospace,monospace;
  --pad:clamp(20px,4.2vw,72px);
  --b0:#ff2442; --b1:#ff4a1f; --b2:#ff8a12; --b3:#ffcf0a; --b4:#b6f000; --b5:#2ee678; --b6:#00c8ff; --b7:#3a5bff; --b8:#9b4bff;
  --current-hue:352; --pulse:0;
  --hue-glow:hsl(var(--current-hue) 95% 60%);
}
/* the tone slider's hue drifts across the whole site; registered so it can animate */
@property --current-hue{syntax:"<number>";inherits:true;initial-value:352}
:root{transition:--current-hue 1.4s cubic-bezier(.4,0,.2,1)}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;-webkit-text-size-adjust:100%;touch-action:manipulation}
body{margin:0;color:var(--ink);font-family:var(--mono);font-weight:300;font-size:13px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  background:radial-gradient(90% 70% at 78% 18%,hsl(var(--current-hue) 70% 11% / .55),transparent 62%),radial-gradient(70% 60% at 8% 92%,hsl(calc(var(--current-hue) + 140) 60% 9% / .35),transparent 60%),var(--bg);background-attachment:fixed}
/* over the scene: the same hue, breathing with the rhythm (never faster than 2.5 times a second) */
.aura{position:fixed;inset:0;z-index:5;pointer-events:none;opacity:0;transition:opacity 2s;mix-blend-mode:screen;
  background:radial-gradient(60% 55% at 66% 42%,hsl(var(--current-hue) 95% 55% / calc(.05 + var(--pulse) * .07)),transparent 70%)}
body.ignited .aura{opacity:1}
::selection{background:var(--ink);color:var(--bg)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:1px solid var(--ink);outline-offset:6px}
em{font-style:italic;color:#fff}
[hidden]{display:none!important}

#gl{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:0}
#bow{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:3;pointer-events:none;mix-blend-mode:screen}
.lt{background-image:linear-gradient(#ece7df,#ece7df);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none!important}
.lt em{color:transparent;-webkit-text-fill-color:transparent}

/* ---------------------------------------------------------------- chrome */
body:not(.room):not(.plain)::before{content:"";position:fixed;top:0;left:0;right:0;height:calc(var(--pad)*1.1 + 64px);z-index:19;pointer-events:none;background:linear-gradient(rgba(5,5,7,.97),rgba(5,5,7,.94) 58%,rgba(5,5,7,0))}
.bar{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:calc(var(--pad)*.55) var(--pad);pointer-events:none;mix-blend-mode:difference}
.bar a{pointer-events:auto}
.mark{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;min-height:44px}
.mark img{display:block}
.bar nav{display:flex;gap:clamp(16px,2.6vw,40px);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.bar nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--mute);transition:color .3s}
.bar nav a:hover,.bar nav a.cta{color:var(--ink)}

.rail{position:fixed;right:calc(var(--pad)*.45);top:50%;transform:translateY(-50%);z-index:20;display:flex;flex-direction:column;gap:20px}
.rail a{position:relative;display:flex;align-items:center;justify-content:flex-end;width:44px;height:22px}
.rail i{display:block;width:5px;height:5px;background:var(--faint);transition:all .45s cubic-bezier(.2,.7,0,1)}
.rail a:nth-child(1).on i{background:var(--b0)} .rail a:nth-child(2).on i{background:var(--b2)} .rail a:nth-child(3).on i{background:var(--b3)}
.rail a:nth-child(4).on i{background:var(--ink)} .rail a:nth-child(5).on i{background:var(--b6)} .rail a:nth-child(6).on i{background:var(--b8)}
.rail a.on i{width:9px;height:9px}
.rail span{position:absolute;right:30px;white-space:nowrap;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);opacity:0;transform:translateX(6px);transition:all .35s;pointer-events:none}
.rail a:hover span,.rail a:focus-visible span{opacity:1;transform:none}

main{position:relative;z-index:10;pointer-events:none}
main a,main button,main li,main .rv,main form,main input,main textarea,main label,main .spectro{pointer-events:auto}
.sec{position:relative;min-height:100vh;padding:var(--pad);padding-right:calc(var(--pad) + 40px)}
.eyebrow{margin:0 0 28px;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--mute)}
h1,h2{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:-.012em;text-shadow:0 0 40px var(--bg),0 0 12px var(--bg)}
h1{font-size:clamp(58px,8.6vw,148px);line-height:.88}
.hero h1{font-size:clamp(46px,6.1vw,104px);line-height:.92}
.hero h1>span,.hero h1>em{display:block;text-wrap:balance}
.hero .lede,.hero .eyebrow,.creed,.ig-note{text-shadow:0 0 14px var(--bg),0 0 5px var(--bg),0 0 2px var(--bg)}
h2{font-size:clamp(42px,5.2vw,92px);line-height:.92}

/* ---------------------------------------------------------------- hero: dark bench, one switch */
.hero{display:flex;flex-direction:column;justify-content:flex-start;min-height:100vh;padding-top:calc(var(--pad)*2.6)}
.hero-copy{position:relative;max-width:760px;z-index:2}
.lede{margin:30px 0 0;max-width:470px;color:var(--mute);font-size:13px;line-height:1.7;text-shadow:0 0 18px var(--bg)}
.bench{position:absolute;right:calc(var(--pad) + 30px);bottom:calc(var(--pad)*1.2);width:min(62vw,980px);height:auto;opacity:1;transition:opacity 1.4s ease;pointer-events:none}
.bench-lines{fill:none;stroke:#34323a;stroke-width:1.2}
.bench .beam{stroke-dasharray:3 7}
.bench .fan line{stroke-opacity:.22;stroke-dasharray:2 6}
body.ignited .bench{opacity:0}

.ctas{margin:30px 0 0;display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 22px;border:1px solid rgba(236,231,223,.35);border-radius:999px;background:rgba(5,5,7,.55);color:var(--ink);font:400 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;transition:border-color .25s,background .25s,color .25s,box-shadow .4s}
.btn:hover,.btn:focus-visible{border-color:var(--ink)}
.btn-go{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn-go:hover,.btn-go:focus-visible{box-shadow:0 0 34px hsl(var(--current-hue) 95% 60% / .45);background:#fff}
.creed{list-style:none;margin:40px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.creed li::before{content:"";display:inline-block;width:5px;height:5px;margin:0 9px 1px 0;background:var(--hue-glow);box-shadow:0 0 8px var(--hue-glow)}
.ignite-wrap{margin-top:36px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.ignite{position:relative;display:inline-flex;align-items:center;gap:16px;min-height:56px;padding:0 28px 0 18px;border:1px solid rgba(236,231,223,.35);border-radius:999px;background:rgba(5,5,7,.6);color:var(--ink);font:400 12px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;cursor:pointer;transition:border-color .3s,background .3s,box-shadow .5s}
.ig-core{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle,#fff 0 18%,rgba(0,255,204,.55) 30%,rgba(0,255,204,0) 70%);box-shadow:0 0 0 1px rgba(236,231,223,.25) inset}
.ignite:hover,.ignite:focus-visible{border-color:var(--ink);box-shadow:0 0 40px rgba(0,255,204,.18),0 0 2px #fff}
.ignite:hover .ig-core{background:radial-gradient(circle,#fff 0 30%,rgba(0,255,204,.8) 42%,rgba(0,255,204,0) 72%)}
.ignite[aria-busy="true"]{cursor:progress}
.ignite[aria-busy="true"] .ig-core{animation:breathe 1s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.35)}}
.ig-note{margin:0;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
body.ignited .ignite-wrap{display:none}

.hint{margin:8px 0 0;font-size:10px;line-height:1.6;letter-spacing:.06em;color:var(--faint)}
.keys{margin:10px 0 0;padding-top:9px;border-top:1px solid var(--line);font-size:10px;line-height:1.75;letter-spacing:.06em;color:var(--faint)}
.hint .k,.keys .k{display:inline-block;margin-right:2px;padding:0 4px;border:1px solid var(--line);color:var(--mute);line-height:1.5}

/* ---------------------------------------------------------------- disciplines */
.disciplines{min-height:150vh;display:flex;align-items:center}
.work-copy{max-width:560px;position:sticky;top:12vh}
.bands{list-style:none;margin:56px 0 0;padding:0;border-top:1px solid var(--line)}
.bands li{display:grid;grid-template-columns:78px 1fr;column-gap:12px;padding:16px 0 17px;border-bottom:1px solid var(--line);cursor:default;outline:none;transition:padding .45s cubic-bezier(.2,.7,0,1)}
.bands li:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.bands .nm{grid-row:1/3;font-size:10.5px;letter-spacing:.14em;color:var(--mute);padding-top:9px;display:flex;gap:10px;align-items:flex-start}
.bands .nm::before{content:"";flex:none;width:6px;height:6px;margin-top:5px;background:var(--bc)}
.bands .nt{font-family:var(--serif);font-size:clamp(22px,2vw,30px);line-height:1.15;transition:color .35s}
.bands .nd{font-size:12px;line-height:1.6;color:var(--mute);max-height:0;opacity:0;overflow:hidden;transition:max-height .5s cubic-bezier(.2,.7,0,1),opacity .4s,margin .5s}
.bands li.on{padding-left:14px}
.bands li.on .nt{color:var(--bc)}
.bands li.on .nd{max-height:64px;opacity:1;margin-top:6px}
.bands li:nth-child(1){--bc:var(--b0)} .bands li:nth-child(2){--bc:var(--b1)} .bands li:nth-child(3){--bc:var(--b2)} .bands li:nth-child(4){--bc:var(--b4)}
.bands li:nth-child(5){--bc:var(--b5)} .bands li:nth-child(6){--bc:#6f86ff} .bands li:nth-child(7){--bc:#b98bff}
.range-note{margin:22px 0 0;font-size:11px;letter-spacing:.06em;color:var(--faint)}

/* ---------------------------------------------------------------- work as a spectrum */
.spectrum{min-height:auto;padding-top:calc(var(--pad)*2);padding-bottom:calc(var(--pad)*2)}
.spectrum-note{margin:26px 0 0;max-width:460px;color:var(--mute);font-size:12.5px;line-height:1.7}
.spectro{position:relative;height:150px;margin:64px 0 0;touch-action:pan-y}
.strip{position:absolute;left:0;right:0;top:48px;height:44px;
  background:
    repeating-linear-gradient(90deg,rgba(5,5,7,.55) 0 1px,transparent 1px 6px),
    linear-gradient(90deg,#050507 0%,#120204 12%,#ff2442 20%,#ff4a1f 29%,#ff8a12 38%,#ffcf0a 47%,#b6f000 56%,#2ee678 65%,#00c8ff 74%,#3a5bff 83.5%,#9b4bff 92.5%,#0c0514 98%,#050507 100%);
  opacity:.5;filter:saturate(1.1)}
.strip .ln{position:absolute;top:-10px;bottom:-10px;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 10px 2px var(--c),0 0 2px #fff}
.strip .ln.open{background:transparent;box-shadow:none;border-left:1px dashed var(--c)}
.links{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.links line{stroke-width:1;stroke-opacity:.5}
.door{position:absolute;top:34px;height:72px;display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;--r:0;opacity:var(--r)}
/* the door is only the dark end of the strip; its words float beside it and don't widen it */
.door-ir{left:0;width:max(48px,17%);color:#ff8f8f;text-shadow:0 0 16px rgba(255,40,40,.9)}
.door-uv{right:0;width:max(48px,7.5%);color:#d4b3ff;text-shadow:0 0 16px rgba(170,90,255,.9)}
.door::before{content:"";position:absolute;inset:14px 0}
.door-ir::before{background:linear-gradient(90deg,rgba(255,50,40,.75),rgba(255,50,40,0))}
.door-uv::before{background:linear-gradient(270deg,rgba(170,90,255,.85),rgba(170,90,255,0))}
.door span,.door small{position:absolute;white-space:nowrap;pointer-events:none}
.door span{top:-26px}
.door small{top:76px;letter-spacing:.06em;text-transform:none;font-style:italic;font-family:var(--serif);font-size:15px}
.door-ir span,.door-ir small{left:0}
.door-uv span,.door-uv small{right:0}
.door:focus-visible,.door:focus{opacity:1!important}
.lines-list{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.wl{position:relative;padding:18px 0 0;border-top:2px solid var(--c);display:flex;flex-direction:column;gap:6px;min-width:0}
.wl-nm{margin:0;font-family:var(--serif);font-size:30px;line-height:1;color:var(--ink)}
.wl-line{margin:0;font-size:10px;letter-spacing:.08em;color:var(--faint)}
.wl-name{margin:10px 0 0;font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.15}
.wl.open .wl-name{font-style:italic;color:var(--mute)}
.wl-link{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:11px;letter-spacing:.1em;color:var(--mute);border-bottom:1px solid transparent;align-self:flex-start;transition:color .25s,border-color .25s}
.wl-link:hover,.wl-link:focus-visible{color:var(--c);border-color:var(--c)}

/* ---------------------------------------------------------------- manifesto + process */
.manifesto{min-height:170vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.lines{display:flex;flex-direction:column;gap:clamp(26px,5vh,64px)}
.lines p{margin:0;font-family:var(--serif);font-size:clamp(34px,4.6vw,78px);line-height:1;text-shadow:0 0 40px var(--bg),0 0 14px var(--bg)}
.lines-h{margin:0 0 clamp(40px,8vh,90px);font-size:clamp(20px,1.8vw,26px);font-style:italic;letter-spacing:.01em;color:var(--hue-glow);text-shadow:0 0 30px var(--bg)}
.manifesto .body{max-width:560px;margin:clamp(60px,12vh,140px) auto 0;color:var(--mute);font-size:13px;line-height:1.8;text-shadow:0 0 18px var(--bg)}
.manifesto .body + .body{margin-top:22px}
.more-row{margin:34px 0 0}
.more{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--line);transition:border-color .25s,color .25s}
.more:hover,.more:focus-visible{border-color:var(--hue-glow);color:#fff}
.about{margin:clamp(90px,16vh,180px) auto 0;max-width:880px;width:100%;display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:clamp(24px,4vw,60px);text-align:left;align-items:start}
.about-copy h2{font-size:clamp(34px,3.8vw,60px)}
.about-copy h3,.trust h3{margin:22px 0 6px;font:400 10.5px/1.4 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.about-copy p{margin:14px 0 0;color:var(--mute);font-size:13px;line-height:1.75;text-shadow:0 0 14px var(--bg)}
.portrait{margin:0}
.portrait img{display:block;width:100%;height:auto;border:1px solid var(--line);background:#0b0b0e}
.ph-frame{aspect-ratio:4/5;display:grid;place-items:center;padding:16px;border:1px dashed rgba(236,231,223,.3);background:
  linear-gradient(135deg,hsl(var(--current-hue) 60% 14% / .7),rgba(5,5,7,.85) 60%),repeating-linear-gradient(90deg,rgba(236,231,223,.04) 0 1px,transparent 1px 8px);text-align:center}
/* placeholders are meant to be seen until they're replaced */
.ph{display:inline-block;padding:1px 6px;border:1px dashed rgba(236,231,223,.45);font:400 10.5px/1.5 var(--mono);letter-spacing:.06em;color:#d8d2c8;background:rgba(5,5,7,.6);font-style:normal}
.process{min-height:140vh;display:flex;align-items:center;justify-content:flex-end}
.process-copy{max-width:470px;position:sticky;top:14vh}
.phases{margin:52px 0 0;display:flex;flex-direction:column;gap:30px}
.phases div{border-top:1px solid var(--line);padding-top:16px}
.phases dt{font-family:var(--serif);font-size:26px;line-height:1.1;margin-bottom:8px}
.phases dd{margin:0;color:var(--mute);font-size:12.5px;line-height:1.7}
.gets{display:block;margin-top:10px;padding-left:12px;border-left:2px solid var(--hue-glow);color:var(--ink)}
.trust,.kind{margin-top:clamp(70px,12vh,130px)}
.trust h2,.kind h2{font-size:clamp(34px,3.6vw,58px)}
.trust-list,.quotes{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.trust-list li{border-top:1px solid var(--line);padding:4px 0 12px}
.trust-list p{margin:0;color:var(--mute);font-size:12.5px;line-height:1.7}
.quotes li{border-top:1px solid var(--line);padding:16px 0}
.quotes blockquote{margin:0;font-family:var(--serif);font-size:22px;line-height:1.3}
.quotes blockquote p{margin:0}
.who{margin:10px 0 0;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

/* ---------------------------------------------------------------- contact: a conversation */
.contact{min-height:100vh;display:flex;flex-direction:column;justify-content:space-between;gap:80px;padding-top:calc(var(--pad)*2.2)}
.contact-copy{max-width:640px;align-self:flex-end;width:100%}
.contact-copy > .eyebrow,.contact-copy > h2,.contact-meta{text-align:right}
.contact-meta{margin:22px 0 0;font-size:11px;letter-spacing:.08em;color:var(--mute);text-shadow:0 0 12px var(--bg)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip-r{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:rgba(5,5,7,.55);font-size:11.5px;color:var(--mute);cursor:pointer;transition:border-color .2s,color .2s}
.chip-r input{position:absolute;opacity:0;width:1px;height:1px}
.chip-r:hover{color:var(--ink)}
.chip-r:has(input:checked){border-color:var(--ink);color:var(--ink);box-shadow:0 0 18px hsl(var(--current-hue) 95% 60% / .25)}
.chip-r:has(input:focus-visible){outline:1px solid var(--ink);outline-offset:3px}
.book{margin:22px 0 0;font-size:12px;color:var(--mute);text-shadow:0 0 12px var(--bg)}
.talk{margin-top:56px;display:flex;flex-direction:column;gap:30px;padding:clamp(18px,2.4vw,30px);border:1px solid var(--line);background:rgba(5,5,7,.74);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.turn{margin:0;padding:0;border:0;min-width:0;display:flex;flex-direction:column;gap:12px}
.turn.arrive{animation:arrive .7s cubic-bezier(.2,.7,0,1) both}
@keyframes arrive{from{opacity:0;transform:translateY(12px)}}
.say{display:block;padding:0;font-family:var(--serif);font-size:clamp(20px,1.9vw,26px);line-height:1.25;color:var(--ink);text-shadow:0 0 18px var(--bg)}
.say strong{font-weight:400;font-style:italic;color:#fff;border-bottom:1px solid var(--olo)}
.ans{width:100%;padding:12px 10px;border:0;border-bottom:1px solid rgba(236,231,223,.3);border-radius:0;background:rgba(236,231,223,.04);color:var(--ink);font:300 15px/1.5 var(--mono);caret-color:var(--olo);outline:none;transition:border-color .3s}
.ans::placeholder{color:#6f6a64}
.ans:focus{border-color:var(--olo)}
textarea.ans{resize:vertical;min-height:84px}
.whisper{margin:0;font-size:11px;color:var(--faint)}
.next{align-self:flex-start;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:rgba(5,5,7,.55);color:var(--mute);font:400 10.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:color .2s,border-color .2s}
.next:hover,.next:focus-visible{color:var(--ink);border-color:var(--ink)}
.swatches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.swatch{position:relative;display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 10px;border:1px solid var(--line);background:rgba(5,5,7,.55);font-size:11px;color:var(--mute);cursor:pointer;transition:border-color .2s,color .2s}
.swatch input{position:absolute;opacity:0;width:1px;height:1px}
.swatch i{flex:none;width:12px;height:12px;background:var(--c);box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.swatch:hover{color:var(--ink)}
.swatch:has(input:checked){border-color:var(--ink);color:var(--ink)}
.swatch:has(input:checked) i{box-shadow:0 0 12px 2px var(--c)}
.swatch:has(input:focus-visible){outline:1px solid var(--ink);outline-offset:3px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.send-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.send{min-height:52px;padding:0 26px;border:1px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);font:400 12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:background .3s,color .3s,box-shadow .4s}
.send:hover,.send:focus-visible{background:var(--ink);color:var(--bg);box-shadow:0 0 30px rgba(0,255,204,.25)}
.send[disabled]{opacity:.5;cursor:default}
.snd.waiting{border-color:var(--olo);color:var(--olo)}
.send[aria-busy="true"]{cursor:progress}
.reply{margin:0;flex:1 1 220px;font-family:var(--serif);font-size:19px;line-height:1.3;color:var(--ink)}
.reply.err{color:#ff8a8a}
.talk.done .turn,.talk.done .send{opacity:.45}

.direct{margin:56px 0 6px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);text-shadow:0 0 12px var(--bg),0 0 4px var(--bg),0 0 2px var(--bg)}
.mail{position:relative;isolation:isolate;display:inline-block;font-family:var(--serif);font-style:italic;font-size:clamp(30px,3.4vw,54px);line-height:1.2;padding-bottom:6px;border-bottom:1px solid var(--line)}
.mail::before{content:"";position:absolute;inset:-18px -28px;z-index:-1;background:radial-gradient(closest-side,rgba(5,5,7,.78),rgba(5,5,7,0));pointer-events:none}
.mail .letters span{display:inline-block;color:var(--c);transition:color .3s}
.mail .spark{position:absolute;width:5px;height:5px;background:var(--c);box-shadow:0 0 8px var(--c);pointer-events:none}
.mail-tip{margin:8px 0 0;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--olo)}
.hint2{margin:26px 0 0;max-width:330px;color:var(--mute);font-size:12px;line-height:1.7;text-shadow:0 0 12px var(--bg),0 0 4px var(--bg),0 0 2px var(--bg)}
.foot{display:flex;flex-wrap:wrap;gap:12px 36px;justify-content:space-between;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);pointer-events:auto}
/* clear the fixed ignite button, and the instrument once it is showing */
.foot{padding-bottom:64px}
body.ignited .foot{padding-bottom:128px}
.foot b{font-weight:400;color:var(--mute)}
.foot-nav{display:flex;flex-wrap:wrap;gap:4px 22px}
.foot a{display:inline-flex;align-items:center;min-height:44px;color:var(--mute);border-bottom:1px solid transparent}
.foot a:hover,.foot a:focus-visible{color:var(--ink);border-color:var(--ink)}
.foot button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--mute);background:none;border:0;padding:12px 0;margin:-12px 0;min-height:44px;cursor:pointer;border-bottom:1px solid transparent}
.foot button:hover{color:var(--ink);border-color:var(--ink)}

/* ---------------------------------------------------------------- instrument */
.instrument{position:fixed;right:var(--pad);bottom:calc(var(--pad)*.42);z-index:40;display:flex;align-items:center;gap:14px}
.ig-mini{min-height:44px;padding:0 18px;border:1px solid rgba(236,231,223,.35);border-radius:999px;background:rgba(5,5,7,.8);color:var(--ink);font:400 10.5px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;cursor:pointer}
.ig-mini:hover,.ig-mini:focus-visible{border-color:var(--ink)}
body.ignited .ig-mini{display:none}
.inst{width:min(340px,calc(100vw - 24px));padding:10px 12px 12px;border:1px solid var(--line);background:rgba(5,5,7,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 40px hsl(var(--current-hue) 90% 50% / .12)}
.inst-top{display:flex;gap:6px;align-items:stretch}
.snd,.mode,.fold{min-height:40px;padding:0 10px;border:1px solid var(--line);background:transparent;color:var(--ink);font:400 9.5px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:border-color .2s,color .2s}
.mode{flex:1;text-align:left}
.mode[aria-pressed="true"]{border-color:var(--hue-glow);box-shadow:0 0 14px hsl(var(--current-hue) 95% 60% / .25)}
.snd:hover,.mode:hover,.fold:hover,.snd:focus-visible,.mode:focus-visible,.fold:focus-visible{border-color:var(--ink)}
.snd[aria-pressed="false"]{color:var(--faint)}
.fold[aria-expanded="false"]{color:var(--mute)}
.inst-body{display:grid;grid-template-columns:1fr;gap:4px;margin-top:10px}
.ctl{display:flex;justify-content:space-between;margin-top:4px;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.ctl output{color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.08em}
.inst input[type=range]{width:100%;margin:0;height:24px;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.inst input[type=range]::-webkit-slider-runnable-track{height:4px;background:rgba(236,231,223,.2)}
.inst input[type=range]::-moz-range-track{height:4px;background:rgba(236,231,223,.2)}
#tone::-webkit-slider-runnable-track{height:6px;background:linear-gradient(90deg,var(--b0),var(--b1),var(--b2),var(--b3),var(--b4),var(--b5),var(--b6),var(--b7),var(--b8))}
#tone::-moz-range-track{height:6px;background:linear-gradient(90deg,var(--b0),var(--b1),var(--b2),var(--b3),var(--b4),var(--b5),var(--b6),var(--b7),var(--b8))}
#rhythm::-webkit-slider-runnable-track{background:repeating-linear-gradient(90deg,rgba(236,231,223,.5) 0 2px,rgba(236,231,223,.12) 2px calc(100% / 7))}
.inst input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:20px;margin-top:-8px;background:#fff;border:0;box-shadow:0 0 12px hsl(var(--current-hue) 95% 70% / .9)}
#tone::-webkit-slider-thumb{margin-top:-7px}
.inst input[type=range]::-moz-range-thumb{width:12px;height:20px;background:#fff;border:0;border-radius:0}
.inst input[type=range]:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.ivl{margin:6px 0 0;padding:0;border:0;display:flex;flex-wrap:wrap;gap:4px}
.ivl legend{width:100%;padding:0;margin-bottom:4px;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.iv{position:relative;display:inline-flex;min-height:32px;align-items:center;padding:0 8px;border:1px solid var(--line);font-size:10px;color:var(--mute);cursor:pointer}
.iv small{margin-left:4px;font-size:9px;color:var(--faint)}
.iv input{position:absolute;opacity:0;width:1px;height:1px}
.iv:has(input:checked){border-color:var(--hue-glow);color:var(--ink)}
.iv:has(input:focus-visible){outline:1px solid var(--ink);outline-offset:2px}
.tone-ticks{display:none}
.readout{margin:8px 0 0;display:flex;flex-wrap:nowrap;align-items:center;gap:8px;height:16px;overflow:hidden;white-space:nowrap;font-size:10.5px;color:var(--mute);font-variant-numeric:tabular-nums} /* one fixed line: the controls above never jump as readings come and go */
.readout #ro-peak{color:var(--faint)}
.readout i{flex:none;width:9px;height:9px;background:var(--c,#333);box-shadow:0 0 8px var(--c,transparent)}
.readout #ro-hz{color:var(--ink)}
body.building .inst{box-shadow:0 0 60px hsl(var(--current-hue) 95% 55% / .45)}

.lab{position:fixed;left:var(--pad);bottom:calc(var(--pad)*.42);z-index:20;display:flex;flex-wrap:wrap;gap:4px 18px;max-width:min(560px,52vw);font-size:10px;letter-spacing:.08em;color:var(--faint);pointer-events:none;opacity:0}
.lab b{font-weight:400;color:var(--mute);font-variant-numeric:tabular-nums}
.lab .note{flex-basis:100%;letter-spacing:.14em;text-transform:uppercase;font-size:9px}

.rv{opacity:0;will-change:opacity,transform}
.nojs{position:relative;z-index:60;max-width:760px;margin:0;padding:calc(var(--pad)*2.2) var(--pad) 0;color:var(--mute);line-height:1.7}

/* ---------------------------------------------------------------- content pages */
body.page{min-height:100vh}
.page-main{position:relative;z-index:10;pointer-events:auto;max-width:860px;margin:0 auto;padding:calc(var(--pad)*2.4) var(--pad) calc(var(--pad)*1.5)}
.page-main h1{font-size:clamp(52px,7vw,112px);line-height:.92}
.page-main h2{margin-top:clamp(50px,8vh,90px);font-size:clamp(32px,3.6vw,56px)}
.page-main p,.page-main li{font-size:14px;line-height:1.8;color:var(--mute)}
.page-main a:not(.btn):not(.wl-link){color:var(--ink);border-bottom:1px solid var(--line)}
.page-lede{max-width:620px;margin:30px 0 0;font-size:15px!important;color:var(--ink)!important}
.page-cta{margin-top:60px!important;display:flex;flex-wrap:wrap;gap:12px}
.draft{margin-top:26px;padding:12px 14px;border:1px dashed rgba(236,231,223,.3)}
.essay h2{font-size:clamp(28px,3vw,44px)}
.essay p{max-width:640px}
.project{margin-top:clamp(70px,10vh,110px);padding-top:26px;border-top:2px solid var(--c);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:26px 40px}
.project-head h2{margin-top:10px}
.project-head{grid-column:1/-1}
.project .still{margin:0;grid-column:1/-1}
.project .still .ph-frame{aspect-ratio:16/10}
.project .still img{display:block;width:100%;height:auto;border:1px solid var(--line);background:#0b0b0e}
.facts{margin:0;grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 40px}
.facts dt{font:400 10.5px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.facts dd{margin:4px 0 0}
.facts .world{border-left:2px solid var(--olo);padding-left:12px}
.facts .world dt,.facts .world dd{color:var(--olo)}
.open-lines .lines-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.page-aura{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(50% 40% at 85% 12%,hsl(var(--current-hue) 90% 50% / .09),transparent 70%)}
.page-foot{position:relative;z-index:10;max-width:860px;margin:0 auto;padding:30px var(--pad) 50px!important}
@media (max-width:760px){ .project{grid-template-columns:1fr} .facts{grid-template-columns:1fr} .project .still.has-m img{aspect-ratio:4/5;object-fit:cover;object-position:top} .open-lines .lines-list{grid-template-columns:1fr} }

/* plain pages (form replies without JavaScript) */
body.plain{min-height:100vh;display:grid;place-items:center}
.plain-main{max-width:620px;padding:var(--pad)}
.plain-main h1{font-size:clamp(44px,6vw,80px);margin-bottom:26px}
.plain-main p{font-size:14px;line-height:1.7;color:var(--mute)}
.plain-main a{color:var(--ink);border-bottom:1px solid var(--line)}

/* ---------------------------------------------------------------- two lanes: words on one side, light on the other
   Every section keeps its words in one lane on a dark field and leaves the other lane to the light.
   The side alternates down the page; the scene swings across to the free side as you scroll. */
@media (min-width:761px){
  :root{--lane:min(44vw,620px)}
  .sec[data-side]{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
  .sec[data-side="R"]{align-items:flex-end}
  .sec[data-side]>.lane{position:relative;z-index:2;width:var(--lane);max-width:none;text-align:left}
  .sec[data-side]::before{content:"";position:absolute;top:0;bottom:0;z-index:1;pointer-events:none;width:calc(var(--lane) + var(--pad)*2 + 10vw);
    -webkit-mask-image:linear-gradient(transparent,#000 16vh,#000 calc(100% - 16vh),transparent);mask-image:linear-gradient(transparent,#000 16vh,#000 calc(100% - 16vh),transparent)}
  .sec[data-side="L"]::before{left:0;background:linear-gradient(90deg,rgba(5,5,7,.95),rgba(5,5,7,.92) 62%,rgba(5,5,7,0))}
  .sec[data-side="R"]::before{right:0;background:linear-gradient(270deg,rgba(5,5,7,.95),rgba(5,5,7,.92) 62%,rgba(5,5,7,0))}
  .hero[data-side]::before{-webkit-mask-image:linear-gradient(#000 calc(100% - 16vh),transparent);mask-image:linear-gradient(#000 calc(100% - 16vh),transparent)}
  .sec[data-side] .lane h1,.sec[data-side] .lane h2,.sec[data-side] .lane p,.sec[data-side] .lane li{text-shadow:0 0 18px var(--bg),0 0 6px var(--bg)}
  /* the range, the process and the conversation stay in view while their section scrolls */
  .work-copy.lane,.process-copy.lane{position:sticky;top:12vh}
  .contact-copy.lane{align-self:flex-end}
  .contact-copy>.eyebrow,.contact-copy>h2,.contact-meta{text-align:left}
  /* the work fits its lane: three lines to a row */
  .spectrum .lines-list{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:30px}
  /* the manifesto reads left to right inside its lane */
  .manifesto{text-align:left}
  .manifesto .lines p{font-size:clamp(32px,3.6vw,60px)}
  .manifesto .body{margin-left:0;margin-right:0}
  .manifesto .about{margin-left:0;margin-right:0;grid-template-columns:minmax(0,200px) minmax(0,1fr)}
  /* the instrument and the optics readout live on the light's side */
  .instrument,.lab{transition:opacity .35s}
  body[data-act="L"] .instrument{right:auto;left:var(--pad)}
  body[data-act="R"] .lab{left:auto;right:calc(var(--pad) + 40px);text-align:right;justify-content:flex-end}
}
/* the very bottom: the address, alone, on black */
.finale{position:relative;z-index:12;display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(120px,22vh,240px) var(--pad) 0;background:linear-gradient(rgba(5,5,7,0),#050507 clamp(80px,14vh,160px));pointer-events:auto}
.finale .direct{margin:0 0 14px}
.finale .mail{font-size:clamp(34px,6.4vw,112px);line-height:1.1;border-bottom:0}
.finale .mail::before{display:none}
.finale .book{margin:26px 0 0}
.finale .foot{width:100%;margin-top:clamp(90px,16vh,180px);text-align:left}

@media (max-width:1100px){ .lines-list{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:34px} }
@media (max-width:760px){
  .bar nav a:not(.cta){display:none}
  .rail{display:none}
  .sec{padding-right:var(--pad)}
  .bench{width:92vw;right:4vw;bottom:auto;top:62vh;opacity:.8}
  .disciplines,.process{align-items:flex-end}
  .work-copy,.process-copy{position:relative;top:0}
  .lane{position:relative;z-index:2;padding:22px 18px 26px;margin:0 -18px;background:rgba(5,5,7,.86);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
  .hero-copy.lane{background:linear-gradient(rgba(5,5,7,.55),rgba(5,5,7,.86) 30%)}
  .finale .mail{font-size:clamp(28px,9vw,44px)}
  .lines-list{grid-template-columns:minmax(0,1fr)}
  .spectro{height:130px}
  .door small{display:none}
  .swatches{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact-copy > .eyebrow,.contact-copy > h2{text-align:left}
  .lab{display:none}
  .instrument{left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));justify-content:flex-end}
  .inst{width:100%;padding:8px 10px}
  .about{grid-template-columns:1fr}
  .portrait{max-width:220px}
  .contact-copy > .eyebrow,.contact-copy > h2,.contact-meta{text-align:left}
  .foot{padding-bottom:72px}
  body.ignited .foot{padding-bottom:104px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1!important;transform:none!important}
  .turn.arrive{animation:none}
  .ignite[aria-busy="true"] .ig-core{animation:none}
  .bench{transition:none}
}