@font-face{font-family:"Sometype Mono";src:url(a/SometypeMono.woff2) format("woff2");font-weight:400 700;font-display:swap}

:root{
  --ground:#0b0908; --ink:#efe8dc; --ink-soft:#b0a596; --accent:#ff4a36; --accent-ink:#160d0b;
  --hair:rgba(239,232,220,.16);
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"Sometype Mono",ui-monospace,Menlo,monospace;
  --u:9px; --rail:84px;
}
*{box-sizing:border-box;margin:0}
html{background:var(--ground);color:var(--ink);-webkit-text-size-adjust:100%}
body{font:400 clamp(.95rem,.9rem + .3vh,1.1rem)/1.62 var(--display);letter-spacing:.005em;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{position:fixed;left:8px;top:-60px;z-index:200;background:var(--accent);color:var(--accent-ink);padding:.6rem 1rem;font-weight:700}
.skip:focus{top:8px}

#stage{position:fixed;inset:0;height:100svh;overflow:hidden;background:var(--ground);perspective:1000px;
  perspective-origin:calc(50% + var(--px,0)*1px) calc(50% + var(--py,0)*1px)}
#spacer{width:1px;pointer-events:none}

#plates{position:absolute;inset:0;transform:scale(calc(1 + var(--kick,0)*.016));transform-origin:50% 60%}
.plate{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;opacity:0;
  filter:brightness(calc(var(--b,.6) * (1 + var(--kick,0)*.5))) saturate(.92) contrast(1.06);will-change:opacity,transform}
.plate:first-child{opacity:1}
#beams{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;mix-blend-mode:screen;opacity:.3;pointer-events:none;will-change:transform,opacity}

#world{position:absolute;inset:0;transform-style:preserve-3d;transform:scale(calc(1 + var(--kick,0)*.012))}
.o{position:absolute;left:50%;top:50%;display:block;max-width:none;height:auto;opacity:0;will-change:transform,opacity;backface-visibility:hidden;
  filter:drop-shadow(0 calc(var(--u)*1.2) calc(var(--u)*2.4) rgba(0,0,0,.55))}
.o-fig{margin:0}
.o-fig img{display:block;width:100%;height:auto;border:1px solid var(--hair)}
.o-photo img{filter:contrast(1.08) brightness(.82)}
.o-app img{border-radius:10px}
.o-throat{filter:brightness(.5) contrast(1.15) drop-shadow(0 0 0 transparent)}
.o-cab{filter:brightness(.92) drop-shadow(0 calc(var(--u)*1.6) calc(var(--u)*3) rgba(0,0,0,.7))}

.o-text{width:auto;pointer-events:none}
.o-text h1{font-family:var(--display);font-weight:900;font-stretch:125%;text-transform:uppercase;line-height:.86;letter-spacing:-.035em;
  font-size:calc(var(--u)*17);display:flex;flex-direction:column;white-space:nowrap}
.o-text h1 span:nth-child(2){margin-left:calc(var(--u)*7)}
.o-text h1 span:nth-child(3){color:transparent;-webkit-text-stroke:2px var(--ink)}

.o-delay svg{display:block;width:100%;overflow:visible}
.o-delay .t{font:500 11px var(--mono);letter-spacing:.18em;fill:var(--ink-soft)}
.o-delay .t.acc{fill:var(--accent)}
.o-delay .t.c{text-anchor:middle;fill:var(--ink)}
.o-delay .w{fill:none;stroke-width:2.2;stroke-linejoin:round}
.o-delay .ink{stroke:var(--ink)} .o-delay .acc{stroke:var(--accent)}
.o-delay .gap{stroke:var(--ink-soft);stroke-width:1;stroke-dasharray:3 4}

#black{position:absolute;inset:0;background:#050403;opacity:0;pointer-events:none}
#scope{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#curve{position:absolute;left:var(--rail);right:3vw;bottom:6vh;width:calc(100% - var(--rail) - 3vw);height:38vh;opacity:0;pointer-events:none}
#grain{position:absolute;inset:-50%;pointer-events:none;opacity:calc(.08 + var(--vel,0)*.1);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain .9s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* copy */
#copy{position:absolute;inset:0;pointer-events:none;z-index:20}
.blk{position:absolute;opacity:0;visibility:hidden;max-width:min(35rem,calc(100vw - var(--rail) - 2rem));will-change:opacity,transform}
.blk.on{pointer-events:auto}
.blk h2{font-weight:850;font-stretch:118%;text-transform:uppercase;letter-spacing:-.025em;line-height:.95;font-size:clamp(1.9rem,1.1rem + 3.7vh,3.9rem);margin-bottom:.9rem;text-wrap:balance}
.blk p{color:var(--ink);text-wrap:pretty;max-width:52ch}
.blk p + p{margin-top:.8rem}
.blk b{font-weight:700}
.tag{font:500 .76rem/1.5 var(--mono);letter-spacing:.06em;color:var(--ink-soft);margin-top:1rem!important;text-transform:none}
.lead{font-size:clamp(1.1rem,.9rem + 1vh,1.55rem);line-height:1.4;max-width:26ch!important;font-weight:500}
.hush{font:500 clamp(.8rem,.7rem + .25vh,1rem)/1.4 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.btn{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.2rem;background:var(--accent);color:var(--accent-ink);font:700 .95rem/1 var(--display);letter-spacing:.02em;
  padding:1rem 1.5rem;min-height:48px;text-decoration:none;text-transform:uppercase;border-radius:2px;transition:transform .2s cubic-bezier(.23,1,.32,1)}
.btn:hover{transform:translateX(4px)}
.ln{display:inline-block;margin-top:1rem;margin-right:1.4rem;font:500 .8rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--accent);padding:.6rem 0 .35rem;min-height:44px}
.ln:hover{color:var(--accent)}
.links{margin-top:.4rem!important}

/* anchors */
.blk::before{content:"";position:absolute;z-index:-1;inset:-2.5rem -3rem;background:radial-gradient(closest-side,rgba(8,6,5,.72),rgba(8,6,5,.42) 60%,transparent)}
.b-hero{left:calc(var(--rail) + 4vw);bottom:10vh}
.b-pre{left:50%;bottom:8vh;translate:-50% 0;text-align:center}
.b-pre p{margin-inline:auto}
.b-booth{left:calc(var(--rail) + 4vw);bottom:9vh}
.b-horn{right:5vw;bottom:9vh;text-align:right}
.b-horn p{margin-left:auto}
.b-rooms{left:50%;bottom:7vh;translate:-50% 0;max-width:min(40rem,calc(100vw - var(--rail) - 2rem))}
.b-sys{right:5vw;top:14vh;text-align:right}
.b-sys p{margin-left:auto}
.b-quiet{left:50%;top:62vh;translate:-50% 0;text-align:center}
.b-peak{left:calc(var(--rail) + 4vw);top:11vh}
.b-close{left:calc(var(--rail) + 4vw);bottom:11vh;max-width:40rem}
.b-close h2{font-size:clamp(3rem,1.6rem + 8vh,8rem);margin-bottom:1rem}

/* chrome */
#ruler{position:absolute;left:0;top:0;bottom:0;width:var(--rail);z-index:60;border-right:1px solid var(--hair);display:flex;flex-direction:column;
  background:linear-gradient(90deg,rgba(8,6,5,.78),rgba(8,6,5,.0))}
#ruler .brand{writing-mode:vertical-rl;transform:rotate(180deg);align-self:center;margin-top:2.2vh;font:800 .78rem/1 var(--display);font-stretch:125%;letter-spacing:.24em;text-transform:uppercase;text-decoration:none;padding:.5rem}
#ruler ol{list-style:none;padding:0;position:absolute;inset:14vh 0 8vh 0}
#ruler li{position:absolute;left:0;right:0;transform:translateY(-50%)}
#ruler li a{display:flex;flex-direction:column;gap:2px;padding:6px 8px 6px 12px;min-height:34px;text-decoration:none;font:500 .66rem/1.1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);position:relative}
#ruler li a::before{content:attr(data-hz);color:var(--ink);font-size:.7rem}
#ruler li a::after{content:"";position:absolute;right:0;top:50%;width:12px;height:1px;background:var(--ink-soft)}
#ruler li a[aria-current="true"]{color:var(--ink)}
#ruler li a[aria-current="true"]::before{color:var(--accent)}
#ruler li a:hover{color:var(--ink)}
#needle{position:absolute;left:0;width:100%;height:0;top:14vh;pointer-events:none}
#needle::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--accent)}
#hz{position:absolute;left:calc(var(--rail) + 10px);top:-8px;font:700 .72rem/1 var(--mono);color:var(--accent);letter-spacing:.06em;white-space:nowrap;text-shadow:0 0 6px #0b0908,0 0 2px #0b0908}
#tools{position:absolute;right:max(14px,2vw);top:max(14px,2vh);z-index:60;display:flex;gap:10px;align-items:center}
#snd,.pill{font:600 .74rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;min-height:44px;padding:.8rem 1rem;border-radius:2px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
#snd{background:rgba(11,9,8,.7);color:var(--ink);border:1px solid var(--hair-strong,rgba(239,232,220,.32))}
#snd[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
.pill{background:var(--accent);color:var(--accent-ink);font-weight:700}

/* portrait phones */
@media (max-width:760px),(max-aspect-ratio:4/5){
  :root{--rail:0px}
  .o-text h1{font-size:calc(var(--u)*15.5)}
  .o-text h1 span:nth-child(2){margin-left:calc(var(--u)*5)}
  .blk{left:1.1rem!important;right:1.1rem!important;translate:none!important;text-align:left!important;max-width:none;top:auto!important;bottom:calc(52px + 2.5vh)}
  .blk p{margin-inline:0!important}
  .blk h2{font-size:clamp(1.8rem,8.4vw,2.7rem)}
  .b-hero,.b-close{bottom:calc(60px + 3vh)}
  .b-quiet{bottom:40vh!important}
  #ruler{top:auto;bottom:0;left:0;right:0;width:auto;height:46px;flex-direction:row;border-right:0;border-top:1px solid var(--hair);background:rgba(8,6,5,.86)}
  #ruler .brand{display:none}
  #ruler ol{inset:0;display:block}
  #ruler li{top:0;bottom:0;transform:translateX(-50%);width:44px;left:auto}
  #ruler li a{align-items:center;justify-content:center;padding:4px 0;height:100%;font-size:0}
  #ruler li a::before{font-size:.62rem}
  #ruler li a::after{right:auto;left:50%;top:0;width:1px;height:6px}
  #needle{top:0;left:0;width:0;height:46px}
  #needle::before{left:0;right:auto;top:0;width:2px;height:100%}
  #hz{left:8px;top:-28px}
  #curve{left:3vw;right:3vw;width:94vw;bottom:calc(52px + 4vh);height:24vh}
  #tools{top:max(10px,1.4vh);right:10px}
  #snd,.pill{padding:.6rem .8rem}
  .b-peak{bottom:calc(52px + 31vh)!important}
  .b-peak h2{font-size:clamp(1.5rem,6.6vw,2.2rem);margin-bottom:.5rem}
  .b-peak p{font-size:.88rem;line-height:1.45}
  .b-peak .tag{display:none}
}
@media (prefers-reduced-motion:reduce){
  #grain{animation:none}
}

.b-peak::before{inset:-3rem -4rem;background:radial-gradient(closest-side,rgba(8,6,5,.88),rgba(8,6,5,.6) 65%,transparent)}
.b-rooms::before{inset:-1.5rem -3rem;background:radial-gradient(closest-side,rgba(8,6,5,.85),rgba(8,6,5,.5) 70%,transparent)}