/* Sheoak Acoustic Works. One family (Jost); the grid is a ten-octave axis,
   31.5 Hz to 16 kHz, one column per octave; brass marks a hand-over or hardware, teal is computed sound. */
@font-face{font-family:"Jost";src:url(/assets/fonts/specimen/jost-var.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Jost";src:url(/assets/fonts/specimen/jost-var-italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@property --so-t1{syntax:"<number>";inherits:true;initial-value:.45}
@property --so-t2{syntax:"<number>";inherits:true;initial-value:.7178}
@property --so-dx{syntax:"<number>";inherits:false;initial-value:1}
@property --so-rm{syntax:"<number>";inherits:true;initial-value:.0634}

/* margin 0: the page measure, the docked console's measure and the full-bleed photograph all run from the viewport edge */
body.spec-sheoak-acoustic{background:#3A2617;margin:0}
.so-page{
  --so-timber:#3A2617;--so-timber-deep:#24170D;--so-timber-lift:#4A3120;--so-cream:#F1E6D0;--so-cream-2:#E6D8BC;
  --so-cream-70:rgb(241 230 208/.72);--so-hair:rgb(241 230 208/.16);--so-brass:#D2AE66;--so-brass-ink:#7A5B22;--so-teal:#6FB3AC;
  --so-ink-2:rgb(58 38 23/.78);--so-dim:#A0927F;--so-dim-c:#746150;--so-gut:clamp(16px,4.45vw,64px);--so-settle:cubic-bezier(.22,.7,.18,1);--so-ease:cubic-bezier(.22,.7,.18,1);
  --so-t1:.45;--so-t2:.7178;--so-sp:clamp(4.5rem,3rem + 6vw,9rem);
  --so-h2:clamp(2.125rem,1.35rem + 3.2vw,4.25rem);--so-deck:clamp(1.3125rem,1rem + .9vw,1.75rem);
  position:relative;isolation:isolate;overflow-x:clip;background:var(--so-timber);color:var(--so-cream);
  font:390 clamp(1.0625rem,1rem + .2vw,1.1875rem)/1.62 "Jost","Futura","Century Gothic","Avenir Next",system-ui,sans-serif;
  font-kerning:normal;-webkit-font-smoothing:antialiased;
  transition:--so-t1 .9s var(--so-settle),--so-t2 .9s var(--so-settle),--so-rm .6s var(--so-settle)
}
@supports (transition-timing-function:linear(0,1)){.so-page{--so-settle:linear(0,.1 6%,.35 14%,.64 24%,.87 36%,1.02 50%,1.043 58%,1.03 70%,1.005 85%,1)}}
.so-page.so-now{transition:none}
.so-page *,.so-page ::before,.so-page ::after{box-sizing:border-box}
.so-page :where(h1,h2,h3,p,ol,ul,dl,dd,figure,fieldset,legend){margin:0;padding:0}
.so-page :where(ol,ul){list-style:none}
.so-page fieldset{border:0;min-width:0}
.so-page img{display:block;width:100%;height:auto}
.so-page a{color:inherit}
.so-page :where(button,input,select,textarea){font:inherit;color:inherit}
.so-page [hidden]{display:none!important}
.so-page :focus-visible{outline:2px solid var(--so-brass);outline-offset:2px}
.so-page :is(.so-cin,.so-form,.so-vdial,.so-strip,.so-card) :focus-visible{outline-color:var(--so-timber)}
.so-sprite{position:absolute;overflow:hidden}
.so-ic{width:20px;height:20px;flex:none}
.so-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.so-wrap{width:min(100% - 2*var(--so-gut),1600px);margin-inline:auto}
.so-g{display:grid;grid-template-columns:repeat(10,minmax(0,1fr))}
.so-sec{padding-bottom:var(--so-sp);scroll-margin-top:calc(var(--bar-h,42px) + 28px)}

/* type */
.so-h2{font-size:var(--so-h2);font-weight:var(--hw,600);line-height:1.02;letter-spacing:-.012em;max-width:15ch;text-wrap:balance}
.so-h3{font-size:clamp(1.375rem,1.2rem + .7vw,1.75rem);font-weight:520;line-height:1.15}
.so-deck{font-size:var(--so-deck);font-weight:620;line-height:1.15;letter-spacing:-.01em;max-width:28ch;text-wrap:balance}
.so-low{font-size:clamp(1.5rem,1.1rem + 1.1vw,2.25rem);font-weight:700;line-height:1.1;letter-spacing:-.01em;max-width:24ch;text-wrap:balance}
.so-low+.so-p,.so-low+.so-lead{margin-top:24px}
.so-p{max-width:62ch}
.so-p+.so-p{margin-top:1em}
.so-kick,.so-fn,.so-bh,.so-lab,.so-dn,.so-room legend,.so-swn,.so-titles dt,.so-mn{font-size:.75rem;font-weight:560;letter-spacing:.2em;text-transform:uppercase;line-height:1.3}
.so-kick{color:var(--so-cream-70);margin-bottom:18px}
.so-small,.so-note,.so-page figcaption,.so-hnote{font-size:.8125rem;font-style:italic;font-weight:360;line-height:1.45;color:var(--so-cream-70)}
.so-page figcaption{margin-top:12px}
.so-tl{margin-top:36px;padding-block:18px;border-block:1px solid var(--so-brass);font-size:clamp(1.25rem,1rem + .9vw,1.625rem);font-weight:560;line-height:1.3;font-variant-numeric:tabular-nums}

/* the three voices: Solo and Mute light the page's reading text the way they light the drivers (the text dims to
   an AA colour, never to an opacity; controls, the form and the console never dim) */
.so-lo,.so-md,.so-hi,:is(.so-lo,.so-md,.so-hi) *{transition:color .24s var(--so-settle)}
.so-page:not([data-so-lit~="w"]) :is(.so-lo,.so-lo *),.so-page:not([data-so-lit~="m"]) :is(.so-md,.so-md *),.so-page:not([data-so-lit~="t"]) :is(.so-hi,.so-hi *),.so-page:not([data-so-lit~="w"]) :is(.so-steps,.so-next) li::before{color:var(--so-dim)}
.so-page:not([data-so-lit~="w"]) .so-card :is(.so-lo,.so-lo *),.so-page:not([data-so-lit~="m"]) .so-card :is(.so-md,.so-md *),.so-page:not([data-so-lit~="t"]) .so-card :is(.so-hi,.so-hi *){color:var(--so-dim-c)}

/* rulers and folios: the dot steps one octave right per section */
.so-folio{position:relative;display:flex;align-items:center;gap:8px;padding:18px 0 0 calc((var(--k) + .5)*10% - 3.5px);margin-bottom:clamp(2rem,1.2rem + 2.4vw,3.5rem);line-height:1.2}
.so-folio::before{content:"";position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(var(--so-hair),var(--so-hair)) 0 100%/100% 1px no-repeat,linear-gradient(var(--so-hair),var(--so-hair)) 100% 0/1px 4px no-repeat,repeating-linear-gradient(90deg,var(--so-hair) 0 1px,transparent 1px 10%) 0 0/100% 4px no-repeat}
.so-folio::after{content:"";position:absolute;top:1px;left:calc((var(--k) + .5)*10%*var(--so-dx) - 3.5px);width:7px;height:7px;border-radius:50%;background:var(--so-brass)}
.so-folio.so-fl{justify-content:flex-end;padding:18px calc(100% - (var(--k) + .5)*10% - 3.5px) 0 0}
.so-fq{font-size:.8125rem;font-weight:520;letter-spacing:.04em;font-variant-numeric:tabular-nums;white-space:nowrap}
.so-fq::after{content:"";display:inline-block;width:16px;height:1px;margin-left:8px;vertical-align:.3em;background:var(--so-brass)}
.so-fn{color:var(--so-cream-70);white-space:nowrap}

/* nav */
.so-nav{padding-block:10px}
.so-nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:24px}
.so-mast{display:inline-flex;align-items:center;min-height:44px;font-size:13px;font-weight:520;letter-spacing:.24em;text-transform:uppercase;color:var(--so-brass);text-decoration:none;white-space:nowrap}
.so-links{display:flex;flex-wrap:wrap;gap:4px clamp(16px,2.2vw,34px)}
.so-links a,.so-uplink,.so-back,.so-slink{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .24s var(--so-ease)}
.so-links a{font-size:.9375rem;font-weight:420;letter-spacing:.01em;padding-block:4px}
.so-links a:hover,.so-uplink:hover,.so-back:hover,.so-slink:hover{background-size:100% 1px}
.so-secb{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px 0 18px;border:0;border-radius:999px;background:var(--so-cream);color:var(--so-timber);font-size:.9375rem;font-weight:520;cursor:pointer}
.so-secb .so-ic{transition:transform .24s var(--so-ease)}
.so-secb[aria-expanded="true"] .so-ic{transform:rotate(180deg)}
.so-vdial{margin-top:14px;padding:10px 20px;border-radius:22px;background:var(--so-cream);color:var(--so-timber)}
.so-vdial ol{position:relative}
.so-vdial ol::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:1px;background:rgb(58 38 23/.28)}
.so-vdial a{position:relative;display:flex;align-items:center;gap:14px;min-height:44px;padding-left:26px;text-decoration:none;font-size:.75rem;font-weight:560;letter-spacing:.16em;text-transform:uppercase;color:var(--so-brass-ink)}
.so-vdial a::before{content:"";position:absolute;left:0;top:50%;width:10px;height:1px;background:rgb(58 38 23/.4)}
.so-vdial a[aria-current]{color:var(--so-timber);font-weight:680}
.so-vdial a[aria-current]::before{left:-7px;top:calc(50% - 1px);width:16px;height:2px;border-radius:1px;background:var(--so-timber)}
.so-vf{min-width:4.4em;font-size:.8125rem;letter-spacing:.04em;text-transform:none;font-variant-numeric:tabular-nums}
@media (min-width:960px){.so-secb,.so-vdial{display:none!important}}
@media (max-width:959.98px){.so-js .so-links{display:none}}

/* hero: the h1 on the axis */
.so-hero{position:relative;padding-top:clamp(1.25rem,.8rem + 1.4vw,2.25rem)}
.so-hero::before,.so-colo::before{content:"";position:absolute;inset:0;z-index:-1;background-image:repeating-linear-gradient(0deg,rgb(241 230 208/.035) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgb(241 230 208/.035) 0 1px,transparent 1px 3px)}
.so-hero::before{-webkit-mask:linear-gradient(transparent 38%,#000 72%);mask:linear-gradient(transparent 38%,#000 72%)}
.so-hero .so-folio{margin-bottom:22px}
.so-ax{position:relative;isolation:isolate;container-type:inline-size}
.so-h1{font-size:calc(100cqi/10.9);font-weight:400;line-height:.92;letter-spacing:-.02em;white-space:nowrap}
.so-h1:focus{outline:0}
.so-axis{display:block}
.so-ln,.so-w{white-space:nowrap}
.so-axis [style]{
  --a:clamp(0,(var(--f) - var(--so-t1) + .05)/.1,1);--b:clamp(0,(var(--f) - var(--so-t2) + .05)/.1,1);
  --e:calc(var(--so-e1,0)*(1 - var(--a)) + var(--so-e2,0)*(var(--a) - var(--b)) + var(--so-e3,0)*var(--b));
  font-weight:calc(760 - 340*var(--a) - 200*var(--b));opacity:var(--o,1);
  color:color-mix(in oklab,var(--so-cream),var(--so-brass) calc(var(--e)*40%));
  transition:opacity .24s var(--so-ease),color .12s linear
}
.so-rule{position:absolute;z-index:-1;top:calc(100cqi/10.9*.1 - 12px);bottom:30px;width:1.5px;margin-left:-.75px;border-radius:1px;background:var(--so-brass);left:calc(var(--so-t1)*100%);transform-origin:50% 0;transition:transform .9s var(--so-settle) .3s}
.so-r2{left:calc(var(--so-t2)*100%)}
.so-js:not(.so-ready) .so-rule{transform:scaleY(0)}
.so-scale{position:relative;height:34px;margin-top:10px;border-top:1px solid var(--so-hair);background:repeating-linear-gradient(90deg,var(--so-hair) 0 1px,transparent 1px 10%) 0 0/100% 4px no-repeat;font-size:.6875rem;font-weight:520;letter-spacing:.1em;font-variant-numeric:tabular-nums;color:var(--so-cream-70);line-height:1}
.so-scale::after{content:"";position:absolute;right:0;top:0;width:1px;height:4px;background:var(--so-hair)}
.so-scale>span{position:absolute;top:9px;left:calc((var(--c) + .5)*10%);translate:-50% 0;white-space:nowrap;transition:opacity .5s linear .3s}
.so-js:not(.so-ready) .so-scale>span{opacity:0}
/* a column label that a split's brass figure is passing gives way to it (set in JS) */
.so-scale>span.so-hd{opacity:0;transition:opacity .15s linear}
.so-scale i{font-style:normal}
.so-u1{display:none}
.so-sl{position:absolute;top:23px;left:calc(var(--so-t1)*100%);translate:-50% 0;font-size:.6875rem;font-weight:560;letter-spacing:.04em;color:var(--so-brass);white-space:nowrap}
.so-sl2{left:calc(var(--so-t2)*100%)}
.so-glance{display:block;width:100%;height:72px;margin-top:18px;border-radius:12px;background:var(--so-timber-deep)}
.so-hero-b{margin-top:clamp(24px,2.2vw,32px);align-items:start}
.so-hero-c{grid-column:1/6;grid-row:1;padding-right:24px}
.so-lead{font-size:clamp(1.125rem,.98rem + .5vw,1.25rem);font-weight:360;line-height:1.45;max-width:46ch}
.so-hplay-r{margin-top:28px}
.so-hplay{display:inline-flex;align-items:center;gap:16px;padding:0;border:0;background:none;color:var(--so-cream);font-size:1.125rem;font-style:italic;font-weight:380;cursor:pointer}
.so-knob,.so-play,.so-splay{display:grid;place-items:center;flex:none;border:0;border-radius:50%;background:var(--so-brass);color:var(--so-timber);box-shadow:inset 0 0 0 1px rgb(58 38 23/.3),inset 0 -3px 0 rgb(58 38 23/.16);cursor:pointer;transition:filter .24s,transform .24s var(--so-ease)}
.so-knob{width:56px;height:56px}
.so-knob .so-ic{width:24px;height:24px}
.so-hplay:hover .so-knob,.so-play:hover,.so-splay:hover{filter:brightness(1.07)}
.so-hplay:active .so-knob,.so-play:active,.so-splay:active{transform:translateY(1px)}
.so-hl{border-bottom:1px solid transparent;transition:border-color .24s}
.so-hplay:hover .so-hl{border-color:currentColor}
/* column 6 is the hero's treble margin: the audio note at its top, the photograph's caption at its foot */
.so-hnote{position:relative;z-index:1;grid-column:6/7;grid-row:1;padding:12px 16px 0 0;border-top:1px solid var(--so-brass)}
.so-hero-fig{grid-column:6/11;grid-row:1;align-self:stretch;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,4fr);align-items:end}
.so-hero-fig picture{grid-column:2}
.so-hero-fig figcaption{grid-column:1;grid-row:1;margin:0;padding:0 16px 2px 0}
.so-hero-fig img{aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;border-radius:28px}

/* 63 Hz */
.so-vo .so-h2,.so-vo .so-deck{grid-column:2/8}
.so-vo .so-deck{margin-top:22px}
.so-vp1,.so-vp2,.so-vp3,.so-vp4{grid-column:3/8;padding-right:24px}
.so-vp1{margin-top:clamp(32px,3vw,48px)}
.so-vp2,.so-vp3,.so-vn1,.so-vn2{margin-top:1.1rem}
.so-vp4{margin-top:28px}
.so-vn1,.so-vn2{grid-column:8/11;align-self:start;max-width:30ch;padding-top:12px;border-top:1px solid var(--so-brass)}
/* Try it: a cream outline on brown, a cream fill when pressed; it mirrors the woofer's Solo */
.so-try{display:inline-flex;align-items:center;min-height:44px;margin-top:14px;padding:0 18px;border:0;border-radius:999px;background:transparent;box-shadow:inset 0 0 0 1.25px var(--so-cream);color:var(--so-cream);font-size:.9375rem;font-style:normal;font-weight:520;letter-spacing:.01em;cursor:pointer;transition:background-color .24s,color .24s}
.so-try:hover{background:rgb(241 230 208/.1)}
.so-page .so-try[aria-pressed="true"]{background:var(--so-cream);color:var(--so-timber)}

/* model spreads */
.so-spread{align-items:center}
.so-ph img{border-radius:28px}
.so-sm-ph{grid-column:1/5}
.so-sm-ph img{aspect-ratio:2/3;object-fit:cover}
.so-sm-t{grid-column:6/11;padding-right:24px}
.so-txt .so-deck{margin-top:20px}
.so-txt .so-deck+.so-p{margin-top:26px}
.so-bands{position:relative;display:grid;grid-template-columns:calc(var(--so-m1)*100%) calc((var(--so-m2) - var(--so-m1))*100%) 1fr;margin-top:64px;padding-block:28px;border-block:1px solid var(--so-hair)}
.so-bd{position:relative;padding:0 24px 0 20px}
.so-bw{padding-left:0}
.so-bm::before,.so-bt::before{content:"";position:absolute;left:-.75px;top:-52px;bottom:-52px;width:1.5px;border-radius:1px;background:var(--so-brass)}
.so-bh{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.so-bh::before{content:"";width:26px;height:10px;border-radius:999px;flex:none}
.so-bw .so-bh::before,.so-sw-w{background:rgb(210 174 102/.55)}
.so-bm .so-bh::before,.so-sw-m{background:rgb(241 230 208/.3)}
.so-bt .so-bh::before,.so-sw-t{box-shadow:inset 0 0 0 1.25px var(--so-cream)}
.so-bd p+p{font-size:1.0625rem;line-height:1.55;max-width:40ch;color:var(--so-cream-70)}
.so-bd p+p+p{margin-top:6px}
.so-bd .so-lo{font-weight:600;color:var(--so-cream)}
.so-bd .so-hi{font-style:italic;font-weight:340}
.so-fs-ph img{aspect-ratio:21/9;object-fit:cover;object-position:55% 40%}
.so-fs-g{align-items:start}
.so-card{position:relative;grid-column:1/5;margin-top:-140px;padding:40px;border-radius:28px;background:var(--so-cream);color:var(--so-timber);box-shadow:0 40px 70px -40px rgb(15 9 4/.7)}
.so-card .so-kick{color:var(--so-brass-ink)}
.so-card .so-h2{font-size:min(var(--so-h2),3.35rem);max-width:none}
.so-card .so-deck{margin-block:18px 20px}
.so-fs-t{grid-column:6/11;padding:56px 24px 0 0}
.so-ac-t{grid-column:1/6;padding-right:24px}
.so-ac-ph{grid-column:6/11}
.so-ac-ph img{aspect-ratio:1}

/* 1 kHz: hear it */
.so-hear-g{align-items:end}
.so-hear-i{grid-column:1/6;padding-right:24px}
.so-hear-i .so-p{margin-top:24px}
.so-key{grid-column:7/11;font-size:.9375rem;line-height:1.4}
.so-key div{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;padding-block:9px;border-top:1px solid var(--so-hair)}
.so-key dt{display:flex;align-items:center;gap:12px;font-weight:520}
.so-key dd{color:var(--so-cream-70)}
.so-sw{display:inline-block;width:26px;height:10px;border-radius:999px;flex:none}
.so-sw-s{height:2px;background:var(--so-teal)}
.so-sw-r{width:26px;height:16px;border-radius:0;background:linear-gradient(var(--so-brass),var(--so-brass)) 50%/1.5px 100% no-repeat}
.so-sw-p{height:16px;border-radius:4px;background:linear-gradient(var(--so-timber),var(--so-timber)) 50%/2px 12px no-repeat,var(--so-cream)}
.so-mapblk{margin-top:clamp(48px,5vw,80px)}
.so-mp-g{align-items:start;margin-bottom:24px}
.so-mp-i{grid-column:1/6;padding-right:24px}
.so-mp-i .so-h3+.so-p{margin-top:16px}
.so-mp-n{grid-column:8/11;max-width:30ch;padding-top:12px;border-top:1px solid var(--so-brass)}
.so-map{display:grid;gap:6px}
/* without Web Audio the map still retunes the page; this line says what it did (the console's own status is hidden) */
.so-mstat{min-height:1.45em;margin-top:12px;padding-left:14px;border-left:2px solid var(--so-brass);font-size:.875rem;font-style:italic;line-height:1.45;color:var(--so-cream-70)}
/* the piece, written out: drawn in JS from audio.js's own event list, on the page's axis */
.so-scfig{margin-top:10px}
.so-score{display:block;width:100%;height:344px}
.so-score .so-sg{fill:none;stroke:rgb(241 230 208/.08)}
.so-score .so-sr{fill:var(--so-brass)}
.so-score .so-sph{fill:var(--so-cream);opacity:0}
.so-score.so-live .so-sph{opacity:.85}
.so-score text{font-size:10.5px;font-weight:560;letter-spacing:.14em;text-transform:uppercase;fill:var(--so-cream-70);text-anchor:middle}
.so-score :is(path,circle){stroke-width:1.25}
.so-qw{fill:rgb(210 174 102/.8)}
.so-qm{fill:rgb(241 230 208/.5)}
.so-qt{fill:none;stroke:var(--so-cream)}
.so-qx{fill:none;stroke:rgb(241 230 208/.6);stroke-dasharray:1.5 2}
.so-qo{fill:none;stroke:rgb(241 230 208/.32)}
.so-n2>.so-f,.so-n:not(.so-n2)>.so-h{display:none}
.so-score .so-ring :is(path,circle){stroke:var(--so-teal);stroke-width:1.5;stroke-dasharray:none}
.so-scfig figcaption{margin-top:14px;max-width:72ch}
.so-mrow{position:relative;display:block;width:100%;height:56px;padding:0;border:0;border-radius:12px;background:transparent;color:var(--so-cream);text-align:left;cursor:pointer;transition:background-color .24s}
.so-mrow:hover{background:var(--so-timber-lift)}
.so-mrow[aria-pressed="true"]{background:var(--so-timber-deep)}
.so-mn{position:absolute;left:14px;top:9px;color:var(--so-cream-70)}
.so-mrow[aria-pressed="true"] .so-mn{color:var(--so-cream);font-weight:680}
.so-mb{position:absolute;left:0;right:0;bottom:11px;height:12px}
.so-mb i{position:absolute;top:0;bottom:0}
.so-mb i:nth-child(1){left:0;width:calc(var(--so-m1)*100%);border-radius:999px 0 0 999px;background:rgb(210 174 102/.55)}
.so-mb i:nth-child(2){left:calc(var(--so-m1)*100%);width:calc((var(--so-m2) - var(--so-m1))*100%);background:rgb(241 230 208/.3)}
.so-mb i:nth-child(3){left:calc(var(--so-m2)*100%);right:0;border-radius:0 999px 999px 0;box-shadow:inset 0 0 0 1.25px rgb(241 230 208/.75)}
.so-mrow::before,.so-mrow::after{content:"";position:absolute;top:5px;bottom:5px;width:1.5px;margin-left:-.75px;border-radius:1px;background:var(--so-brass);left:calc(var(--so-m1)*100%)}
.so-mrow::after{left:calc(var(--so-m2)*100%)}
.so-mf{position:absolute;top:9px;left:calc(var(--so-m1)*100%);padding-left:9px;font-size:.75rem;font-weight:520;line-height:1.3;font-variant-numeric:tabular-nums}
.so-mf2{left:calc(var(--so-m2)*100%)}
.so-lessons{margin-top:clamp(48px,5vw,80px);row-gap:40px}
.so-les{grid-column:span 5;padding-right:24px}
.so-les .so-p{margin-top:16px}
/* the room reframe: the Floorstander photograph again (the same file), windowed by the room switch */
.so-rf-w{margin-top:clamp(40px,4vw,64px)}
.so-rf-sw{margin-bottom:16px}
.so-page .so-rf-sw legend{color:var(--so-cream-70)}
.so-rf-sw .so-seg{color:var(--so-timber)}
.so-rf picture{display:block;border-radius:28px;background:var(--so-timber-deep)}
.so-rf img{aspect-ratio:2/1;object-fit:cover;object-position:50% 55%;border-radius:28px;clip-path:inset(0 round 28px);transition:clip-path .6s var(--so-settle)}
.so-rf[data-so-room="small"] img{clip-path:inset(5% 15% 3% 37% round 28px)}
.so-rf[data-so-room="medium"] img{clip-path:inset(2% 4% 1% 22% round 28px)}

/* the console */
.so-bay{position:relative;margin-top:clamp(40px,4vw,64px)}
.so-dock .so-bay{min-height:var(--so-full-h,600px)}
.so-console{--th:26px;position:relative;margin-inline:16px;padding-block:18px 22px;border-radius:22px;background:var(--so-cream);color:var(--so-timber)}
.so-console::before{content:"";position:absolute;inset:6px;border:1px solid var(--so-brass);border-radius:16px;pointer-events:none}
.so-page .so-console:focus-visible{outline:2px solid var(--so-brass);outline-offset:3px}
.so-cin{position:relative;width:min(100% - 2*max(var(--so-gut) - 16px,14px),1600px);margin-inline:auto}
.so-dial{position:relative;height:16px;margin-bottom:12px}
.so-dial ol{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));height:100%}
.so-dial li{display:flex;justify-content:center;align-items:center;min-width:0}
.so-dial a{position:relative;z-index:1;font-size:10.5px;font-weight:560;letter-spacing:.14em;text-transform:uppercase;color:var(--so-brass-ink);text-decoration:none;white-space:nowrap;line-height:16px}
.so-dial a[aria-current]{color:var(--so-timber);font-weight:680}
.so-dial a:hover{color:var(--so-timber)}
/* the pointer: a notch hanging from the faceplate's brass hairline, above the station, never through it */
.so-ptr{position:absolute;left:0;top:-11px;width:2px;height:6px;margin-left:-1px;border-radius:0 0 1px 1px;background:var(--so-timber);will-change:transform}
.so-ptr.so-sweep{transition:transform .9s var(--so-settle)}
.so-dial.so-tight a{letter-spacing:0}
@media (max-width:1279.98px){.so-dial a{font-size:9.5px;letter-spacing:.08em}}
.so-screen,.so-roomstrip{position:relative;overflow:hidden;border-radius:12px;background:var(--so-timber-deep)}
.so-screen{height:300px}
.so-screen canvas,.so-roomstrip canvas{display:block;width:100%;height:100%}
.so-drawn .so-fig{display:none}
.so-js .so-nojs{display:none}
.so-poster{display:block;width:100%;height:auto}
.so-pbg{fill:var(--so-timber-deep)}
.so-pgrid{fill:none;stroke:rgb(241 230 208/.08)}
.so-pw{fill:rgb(210 174 102/.55)}
.so-pm{fill:rgb(241 230 208/.3)}
.so-pt{fill:none;stroke:var(--so-cream);stroke-width:1.25;vector-effect:non-scaling-stroke}
.so-ps{fill:none;stroke:var(--so-teal);stroke-width:2;vector-effect:non-scaling-stroke;opacity:.85}
.so-pr{stroke:var(--so-brass);stroke-width:1.5;vector-effect:non-scaling-stroke}
.so-pn{font-size:10px;font-weight:520;letter-spacing:.06em;font-variant-numeric:tabular-nums;fill:var(--so-brass-ink);text-anchor:middle}
/* the screen's own frequency scale, under the landed screen and on phones (the dial carries it when docked) */
.so-hzrow{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));margin-top:6px;text-align:center;font-size:.6875rem;font-weight:520;letter-spacing:.06em;line-height:1.2;font-variant-numeric:tabular-nums;color:var(--so-brass-ink);white-space:nowrap}
.so-hzrow i{font-style:normal}
.so-fig figcaption{margin-top:14px;max-width:84ch;color:var(--so-ink-2);font-size:.9375rem}
.so-fig figcaption span{display:block;margin-top:4px}
.so-rail{position:relative;height:50px;margin-top:10px}
.so-rg{position:absolute;top:0;bottom:0}
.so-rg1{left:calc(22.63% - var(--th)/2);width:calc(29.15% + var(--th))}
.so-rg2{left:calc(60.85% - var(--th)/2);width:calc(20% + var(--th))}
.so-rg label{position:absolute;left:calc(var(--th)/2);top:0;display:flex;gap:10px;align-items:baseline;white-space:nowrap;font-size:.75rem;font-weight:560;letter-spacing:.2em;text-transform:uppercase;color:var(--so-brass-ink)}
.so-rv2{letter-spacing:.02em;text-transform:none;font-size:.8125rem;font-weight:520;color:var(--so-timber);font-variant-numeric:tabular-nums}
.so-rg input{position:absolute;left:0;bottom:0;width:100%;height:28px;margin:0;background:none;-webkit-appearance:none;appearance:none;cursor:pointer}
.so-rg input::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:rgb(58 38 23/.3)}
.so-rg input::-webkit-slider-thumb{-webkit-appearance:none;width:var(--th);height:var(--th);margin-top:calc(2px - var(--th)/2);border-radius:50%;background:var(--so-brass);box-shadow:0 0 0 2px var(--so-timber)}
.so-rg input::-moz-range-track{height:4px;border-radius:999px;background:rgb(58 38 23/.3)}
.so-rg input::-moz-range-thumb{width:calc(var(--th) - 4px);height:calc(var(--th) - 4px);border:2px solid var(--so-timber);border-radius:50%;background:var(--so-brass)}
.so-roomstrip{height:72px;margin-top:14px}
.so-rsl,.so-rs0{position:absolute;left:10px;font-size:.625rem;font-weight:560;line-height:1;color:var(--so-cream-70);pointer-events:none}
.so-rsl{top:8px;letter-spacing:.2em;text-transform:uppercase}
.so-rs0{top:calc(50% + 5px);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.so-rs0::before{content:"";position:absolute;left:-10px;top:-5px;width:7px;height:1px;background:var(--so-cream)}
.so-roomline{margin-top:8px;font-size:.8125rem;font-style:italic;line-height:1.4;color:var(--so-ink-2)}
.so-row{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));align-items:center;gap:22px 0;margin-top:22px}
.so-tp{grid-column:1/4;grid-row:1;display:flex;align-items:center;gap:12px}
.so-play{width:64px;height:64px}
.so-play .so-ic{width:26px;height:26px}
.so-stop,.so-sstop{display:grid;place-items:center;flex:none;width:48px;height:48px;border:0;border-radius:10px;background:var(--so-cream-2);color:var(--so-timber);cursor:pointer;transition:background-color .24s}
.so-stop:hover,.so-sstop:hover,.so-pill:hover,.so-foldb:hover{background:#DCC9A6}
.so-time{margin-left:6px;font-size:.9375rem;font-weight:460;font-variant-numeric:tabular-nums;white-space:nowrap}
.so-tune{grid-column:4/8;grid-row:1;padding-right:24px;line-height:1.35}
.so-lab{display:block;color:var(--so-brass-ink);margin-bottom:2px}
.so-tname{display:block;font-size:1.25rem;font-weight:520}
.so-tfig{display:none;font-size:.8125rem;font-variant-numeric:tabular-nums}
.so-tline{font-size:.9375rem;font-variant-numeric:tabular-nums;color:var(--so-ink-2);max-width:52ch}
.so-back{margin-top:4px;padding:6px 0;border:0;background-color:transparent;font-size:.9375rem;font-weight:520;cursor:pointer}
.so-status{grid-column:8/11;grid-row:1;font-size:.875rem;font-style:italic;line-height:1.4;color:var(--so-ink-2)}
.so-drvs{grid-column:1/6;display:flex;gap:28px}
.so-drv{display:grid;grid-template-columns:auto auto;gap:8px 6px;justify-content:start}
.so-dn{grid-column:1/-1;display:flex;align-items:center;gap:8px;color:var(--so-timber)}
.so-lamp{position:relative;width:8px;height:8px;border-radius:50%;flex:none;background:rgb(58 38 23/.14);box-shadow:0 0 0 1.5px var(--so-brass)}
.so-lamp::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--so-teal);opacity:var(--l,0)}
.so-pill{min-height:40px;padding:0 15px;border:0;border-radius:999px;background:var(--so-cream-2);color:var(--so-timber);font-size:.9375rem;font-weight:520;letter-spacing:.01em;cursor:pointer;transition:background-color .24s,color .24s;white-space:nowrap}
.so-page .so-pill[aria-pressed="true"]{background:var(--so-timber);color:var(--so-cream)}
.so-flip{grid-column:6/8;justify-self:start}
.so-room{grid-column:8/11;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.so-room legend{float:left;margin-right:12px;color:var(--so-brass-ink)}
.so-seg{display:inline-flex;padding:3px;border-radius:999px;background:var(--so-cream-2)}
.so-tiles input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
/* in flow at its label's left edge, so a pointer (or a test) reaching the radio itself lands on it */
.so-seg input{position:relative;z-index:1;flex:none;width:1px;height:1px;margin:0 -1px 0 0;opacity:0}
.so-seg label{display:grid;place-items:center;min-height:36px;padding:0 14px;border-radius:999px;font-size:.875rem;font-weight:520;cursor:pointer;transition:background-color .24s,color .24s}
.so-seg input:checked+label{background:var(--so-timber);color:var(--so-cream)}
.so-page :is(.so-seg,.so-tiles) input:focus-visible+label{outline:2px solid var(--so-timber);outline-offset:2px}
.so-foldb{display:none;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:var(--so-cream-2);color:var(--so-timber);cursor:pointer}

/* docked: fixed to the foot of the screen, the page measure inside it */
.so-docked .so-console{position:fixed;left:16px;right:16px;bottom:16px;z-index:800;margin:0;--th:18px;padding-block:8px 4px;box-shadow:0 22px 60px -14px rgb(12 7 3/.65)}
.so-docked .so-dial{height:19px;padding-top:7px;margin-bottom:4px}
.so-docked .so-dial a{line-height:12px}
.so-docked .so-ptr{top:-1px}
.so-docked .so-screen{height:48px}
.so-docked .so-rail{height:18px;margin-top:2px}
.so-docked .so-rg input{height:18px}
.so-docked .so-rg label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.so-docked :is(.so-roomstrip,.so-flip,.so-tline,.so-back,.so-roomline,.so-hzrow){display:none!important}
.so-docked .so-row{display:flex;align-items:center;gap:16px;height:34px;margin-top:4px}
.so-docked .so-tp{gap:8px}
.so-docked .so-play{width:36px;height:36px}
.so-docked .so-play .so-ic{width:18px;height:18px}
.so-docked .so-stop{width:32px;height:32px;border-radius:9px}
.so-docked .so-stop .so-ic{width:17px;height:17px}
.so-docked .so-time{margin-left:2px;font-size:.8125rem;min-width:6.4em}
.so-docked .so-tune{display:grid;grid-template-columns:auto auto;align-items:baseline;gap:0 8px;padding:0;line-height:1.2;flex:none;white-space:nowrap}
.so-docked .so-lab{grid-column:1/-1;margin:0;font-size:.625rem}
.so-docked .so-tname{font-size:.9375rem}
.so-docked .so-tfig{display:inline;white-space:nowrap}
.so-docked .so-drvs{gap:18px;margin-left:auto}
.so-docked .so-drv{display:flex;align-items:center;gap:5px}
.so-docked .so-dn{font-size:.625rem;letter-spacing:.14em;margin-right:3px}
.so-docked .so-pill{min-height:26px;padding:0 11px;font-size:.8125rem}
.so-docked .so-room{flex-wrap:nowrap;gap:8px}
.so-docked .so-room legend{font-size:.625rem;margin:0;white-space:nowrap}
.so-docked .so-seg{padding:2px}
.so-docked .so-seg label{min-height:26px;padding:0 10px;font-size:.8125rem}
.so-docked .so-foldb{display:grid;margin-left:4px}
.so-docked .so-status{position:absolute;right:0;bottom:calc(100% + 18px);max-width:56ch;padding:9px 18px;border-radius:999px;background:var(--so-cream);color:var(--so-timber);box-shadow:0 12px 30px -12px rgb(12 7 3/.6);opacity:0;translate:0 6px;transition:opacity .24s,translate .24s var(--so-ease);pointer-events:none}
.so-docked .so-status.so-said{opacity:1;translate:0}
@media (max-width:1399.98px){.so-docked .so-room{display:none}}
.so-docked.so-folded .so-console{padding-block:11px}
.so-docked.so-folded :is(.so-screen,.so-rail){display:none}
.so-docked.so-folded .so-dial{position:absolute;left:0;right:0;top:-11px;height:3px;margin:0;padding:0;background:rgb(58 38 23/.18)}
.so-docked.so-folded .so-dial ol{visibility:hidden}
.so-docked.so-folded .so-ptr{top:0;height:7px}
.so-docked.so-folded .so-row{margin:0}
.so-docked.so-folded .so-foldb .so-ic{transform:rotate(180deg)}
/* in dock mode, a control reached by Tab or a jump scrolls clear of the faceplate */
.so-dock :is(a,button,input,select,textarea,[tabindex]){scroll-margin-bottom:calc(var(--so-dock-h,132px) + 24px)}
.so-grow .so-console{overflow:clip;animation:so-grow .6s var(--so-ease)}
@keyframes so-grow{from{height:var(--so-dock-h,132px)}to{height:var(--so-full-h,600px)}}

/* the strip: Stop within reach when the console is off screen */
.so-strip{position:fixed;left:12px;right:12px;bottom:12px;z-index:800;max-width:560px;margin-inline:auto;display:flex;align-items:center;gap:10px;height:52px;padding:0 18px 0 4px;border-radius:999px;background:var(--so-cream);color:var(--so-timber);box-shadow:0 16px 40px -12px rgb(12 7 3/.65);animation:so-up .2s var(--so-ease)}
@keyframes so-up{from{translate:0 80px}}
.so-splay{width:44px;height:44px}
.so-sstop{width:44px;height:44px}
.so-sname{font-size:.9375rem;font-weight:520;white-space:nowrap}
.so-sfig{font-size:.8125rem;font-variant-numeric:tabular-nums;color:var(--so-ink-2);white-space:nowrap}
.so-slink{display:grid;place-items:center;min-height:44px;margin-left:auto;font-size:.875rem;font-weight:520}
.so-sclr{min-height:40px;margin-left:auto;padding:0 16px;border:0;border-radius:999px;background:var(--so-timber);color:var(--so-cream);font-size:.875rem;font-weight:520;cursor:pointer;white-space:nowrap}
.so-sclr:not([hidden])+.so-slink{margin-left:0}
.so-page.so-strip-on{padding-bottom:76px}

/* 2 kHz, 4 kHz, 8 kHz */
.so-tb-g{align-items:center}
.so-tb-t{grid-column:1/6;padding-right:24px}
.so-tb-t .so-h2,.so-tu-t .so-h2,.so-or-a .so-h2,.so-co-t .so-h2{margin-bottom:28px}
.so-tb-ph{grid-column:6/11}
.so-tb-ph img{aspect-ratio:3/2;object-fit:cover}
/* timber samples: a chip of the colour, the name and one line beside it */
.so-sws{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 32px;margin-top:64px}
.so-swt{display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:18px}
.so-swt p{grid-column:2}
.so-swc{grid-row:1/3;width:52px;height:52px;border-radius:14px;background:var(--sw);box-shadow:inset 0 0 0 1px rgb(241 230 208/.16)}
.so-swn{padding-top:4px}
.so-swt p+p{margin-top:6px;font-size:.9375rem;line-height:1.5;color:var(--so-cream-70);max-width:30ch}
.so-tu-ph img{aspect-ratio:21/9;object-fit:cover;object-position:50% 72%}
.so-tu-g{margin-top:clamp(40px,4vw,64px);align-items:start}
.so-tu-t{grid-column:1/6;padding-right:24px}
.so-steps{grid-column:6/11;counter-reset:so-s}
.so-steps li{display:grid;grid-template-columns:5.25rem 1fr;align-items:baseline;padding-block:20px;border-top:1px solid var(--so-hair);font-size:clamp(1.125rem,.95rem + .6vw,1.375rem);line-height:1.4;counter-increment:so-s}
.so-steps li::before{content:counter(so-s);font-size:4rem;font-weight:200;line-height:.8;color:var(--so-brass);font-variant-numeric:tabular-nums}
.so-close{margin:36px 0 0 50%;max-width:48ch;font-style:italic;font-weight:340;font-size:1.125rem}
.so-tu-t .so-low,.so-or-a .so-low{margin-top:-4px}
.so-or-g{align-items:start}
.so-or-a{grid-column:1/5;padding-right:32px}
.so-or-a .so-h3{margin-top:40px}
.so-next{counter-reset:so-n;margin-top:14px}
.so-next li{position:relative;padding:12px 0 12px 42px;border-top:1px solid var(--so-hair);counter-increment:so-n}
.so-next li::before{content:counter(so-n);position:absolute;left:0;top:9px;font-size:1.375rem;font-weight:300;color:var(--so-brass);font-variant-numeric:tabular-nums}
.so-form{grid-column:5/11;padding:48px;border-radius:28px;background:var(--so-cream);color:var(--so-timber)}
.so-fnote{margin-bottom:26px;font-size:.9375rem;font-style:italic;color:var(--so-ink-2)}
.so-fg{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px}
.so-fw{grid-column:1/-1}
.so-f>label,.so-f>legend{display:block;margin-bottom:8px;font-size:.875rem;font-weight:520;letter-spacing:.01em}
.so-f :is(input[type="text"],input[type="email"],select,textarea){display:block;width:100%;min-height:48px;padding:10px 14px;border:1px solid rgb(58 38 23/.14);border-radius:12px;background:var(--so-cream-2);color:var(--so-timber);font-size:1rem}
.so-f textarea{min-height:140px;resize:vertical;line-height:1.5}
.so-opt{font-weight:400;color:var(--so-ink-2)}
.so-tiles{display:flex;flex-wrap:wrap;gap:8px}
.so-tiles label{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px 0 8px;border-radius:999px;background:var(--so-cream-2);font-size:.875rem;font-weight:500;cursor:pointer;transition:background-color .24s,color .24s}
.so-tiles i{width:28px;height:28px;border-radius:50%;background:var(--sw)}
.so-tiles .so-tq{background:none;box-shadow:inset 0 0 0 1.5px rgb(58 38 23/.45)}
.so-tiles input:checked+label{background:var(--so-timber);color:var(--so-cream)}
.so-tiles input:checked+label i{box-shadow:0 0 0 2px var(--so-cream)}
.so-readback{margin-top:22px;font-style:italic}
.so-fsend{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:28px}
.so-send{min-height:48px;padding:0 26px;border:0;border-radius:999px;background:var(--so-timber);color:var(--so-cream);font-size:.9375rem;font-weight:520;cursor:pointer;transition:background-color .24s}
.so-send:hover{background:#4E3421}
.so-fstat{font-style:italic;font-size:.9375rem}

/* 16 kHz */
.so-colo{position:relative;padding-bottom:clamp(3rem,2rem + 3vw,5rem);font-weight:300}
.so-co-g{align-items:start;margin-top:clamp(40px,4vw,64px)}
.so-co-p{grid-column:3/8;padding-right:24px}
.so-colo .so-h2{font-weight:300;margin-bottom:clamp(28px,3vw,44px)}
/* the glossary on the axis: each term hangs from its own frequency; the split terms are brass and move with the
   tuning (--so-t1, --so-t2), the room mode with the room switch (--so-rm) */
.so-gl{border-top:1px solid var(--so-hair)}
.so-gi{position:relative;padding:10px 0 12px calc(var(--x)*100% + 14px)}
.so-gi::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--x)*100%);width:1px;background:rgb(241 230 208/.35)}
.so-gb::before{width:1.5px;margin-left:-.25px;border-radius:0 0 1px 1px;background:var(--so-brass)}
.so-gi.so-gr{padding:10px calc((1 - var(--x))*100% + 14px) 12px 0;text-align:right}
.so-gi dt{font-size:.8125rem;font-weight:560;letter-spacing:.18em;text-transform:uppercase;line-height:1.3}
.so-gi dd{margin-top:3px;font-size:.875rem;font-style:italic;font-weight:300;line-height:1.45;color:var(--so-cream-70)}
.so-colo .so-p{font-size:1.0625rem;color:var(--so-cream-70)}
.so-titles{grid-column:8/11;display:grid;gap:16px}
.so-titles dt{color:var(--so-cream-70)}
.so-titles dd{margin-top:2px;font-style:italic;font-size:1.125rem}
.so-co-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-top:72px}
.so-mast-s{font-size:11px}
.so-uplink{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:.9375rem;background-position:28px 100%}
.so-uplink:hover{background-size:calc(100% - 28px) 1px}

/* motion: scroll-driven where supported, observed otherwise, and still under reduced motion */
@keyframes so-fade{from{opacity:0}}
@keyframes so-wt{from{opacity:0;font-weight:calc(var(--hw,600) - 160);translate:0 10px}}
@keyframes so-img{from{opacity:0;scale:.985}}
@keyframes so-rise{from{translate:0 48px}}
@keyframes so-dot{from{--so-dx:0}}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .so-rv,.so-h2,.so-ph img,.so-fs-ph img,.so-folio::after,.so-folio::before{animation:so-fade linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
    /* docked, the view ends at the faceplate's top edge: everything is whole before it clears the dock */
    .so-dock .so-rv,.so-dock .so-h2,.so-dock .so-ph img,.so-dock .so-fs-ph img,.so-dock .so-folio::after,.so-dock .so-folio::before{animation-timeline:view(block 0px calc(var(--so-dock-h,132px) + 32px))}
    .so-tl{animation:none}
    .so-h2{animation-name:so-wt}
    .so-ph img,.so-fs-ph img{animation-name:so-img}
    .so-folio::after{animation-name:so-dot}
    .so-hero .so-folio::after,.so-hero .so-folio::before{animation:none}
    .so-card{animation:so-rise linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  }
  @supports not (animation-timeline:view()){
    .so-js :is(.so-rv,.so-h2,.so-ph):not(.so-tl){opacity:0;translate:0 10px;transition:opacity .6s var(--so-ease),translate .6s var(--so-ease),color .24s var(--so-settle)}
    .so-js :is(.so-rv,.so-h2,.so-ph).so-in{opacity:1;translate:0}
  }
}
@media (prefers-reduced-motion:reduce){
  .so-page,.so-page *,.so-page ::before,.so-page ::after{transition:none!important;animation:none!important}
}

/* 834 and below: the console is section 6's instrument, laid out in one column */
@media (max-width:1199.98px){
  /* the treble margin becomes an inset under the Play row; the caption goes back under its photograph */
  .so-hnote{grid-column:1/6;grid-row:2;margin-top:24px;max-width:46ch;padding:4px 0 4px 14px;border-top:0;border-left:2px solid var(--so-brass)}
  .so-hero-fig{grid-row:1/span 2;align-self:start;display:block}
  .so-hero-fig figcaption{margin-top:12px;padding:0}
  .so-sws{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1023.98px){
  .so-dial{display:none!important}
  /* the glossary as a list: each term over a mini axis with a tick at its frequency */
  .so-gl{border-top:0}
  .so-gi,.so-gi.so-gr{padding:24px 0 12px;text-align:left}
  .so-gi::before{top:10px;bottom:auto;left:0;width:100%;height:1px;margin:0;border-radius:0;background:var(--so-hair)}
  .so-gi::after{content:"";position:absolute;top:5px;left:calc(var(--x)*100%);width:1.5px;height:11px;margin-left:-.75px;border-radius:1px;background:var(--so-cream-70)}
  .so-gb::after{background:var(--so-brass)}
  .so-cin{display:flex;flex-direction:column}
  .so-ctl,.so-row{display:contents}
  .so-tp{order:1}.so-tune{order:2;margin-top:14px;padding:0}.so-fig,.so-screen{order:3;margin-top:18px}.so-rail{order:4;height:auto;margin-top:18px}
  .so-drvs{order:5;margin-top:18px;flex-wrap:wrap;gap:12px 28px}.so-flip{order:6;margin-top:14px}.so-room{order:7;margin-top:18px}
  .so-roomstrip,.so-roomline{order:8}.so-status{order:9;margin-top:14px}
  .so-hzrow{order:3;letter-spacing:0}
  .so-screen{height:240px}
  .so-rail{display:grid;grid-template-columns:1fr 1fr;gap:6px 32px}
  .so-page .so-rg{position:static;left:auto;width:auto}
  .so-flip{align-self:flex-start}
  .so-rg input{position:relative;height:44px}
  .so-rg label{position:static;padding-left:0}
  .so-pill{min-height:44px}
  .so-play{width:56px;height:56px}
  .so-stop{width:44px;height:44px}
  .so-seg label{min-height:44px}
  .so-room legend{float:none;width:100%;margin-bottom:4px}
}
@media (max-width:959.98px){.so-mast{font-size:11px;letter-spacing:.2em}}
@media (max-width:699.98px){
  .so-page .so-g>*{grid-column:1/-1}
  .so-h1{font-size:clamp(3.5rem,17vw,5.25rem);line-height:.94;white-space:normal}
  .so-ln{display:block}
  .so-rule{top:auto;bottom:34px;height:22px}
  .so-scale>span:nth-child(even),.so-u2{display:none}
  .so-u1{display:inline}
  .so-folio,.so-folio.so-fl{justify-content:flex-start;padding:16px 0 0}
  .so-fn{letter-spacing:.14em}
  .so-hero-b{row-gap:32px;margin-top:20px}
  .so-hero-b>*{grid-row:auto}
  /* the Play pill stays inside the first screen at 390 × 844 */
  .so-glance{margin-top:14px}
  .so-low+.so-lead{margin-top:16px}
  .so-lead{line-height:1.4}
  .so-hplay-r{margin-top:20px}
  /* the room notch sits at the strip's left edge here: its 0 dB mark moves to the flat right edge */
  .so-rs0{left:auto;right:10px}
  .so-rs0::before{left:auto;right:-10px}
  .so-hnote{margin-top:0}
  .so-try{display:flex;justify-content:center;width:100%}
  .so-score{height:300px}
  .so-rf img{aspect-ratio:4/3;object-position:100% 55%;border-radius:22px;clip-path:inset(0 round 22px)}
  .so-rf picture{border-radius:22px}
  .so-rf[data-so-room="small"] img{clip-path:inset(5% 16% 3% 28% round 22px)}
  .so-rf[data-so-room="medium"] img{clip-path:inset(2% 6% 1% 12% round 22px)}
  .so-strip:has(.so-sclr:not([hidden])) .so-sname{display:none}
  .so-hplay{display:flex;width:100%;height:56px;justify-content:center;gap:8px;border-radius:999px;background:var(--so-brass);color:var(--so-timber);font-size:1.0625rem;font-style:normal;font-weight:520}
  .so-hplay .so-knob{width:auto;height:auto;background:none;box-shadow:none}
  .so-hplay .so-hl{border:0}
  .so-hero-fig img,.so-ph img{border-radius:22px}
  .so-hero-fig img{object-position:50% 24%}
  .so-sm-ph img{aspect-ratio:4/5;object-position:50% 40%}
  .so-fs-ph img{aspect-ratio:4/5;object-position:70% 50%}
  .so-tu-ph img{aspect-ratio:4/3;object-position:18% 55%}
  .so-spread{row-gap:32px}
  .so-ac-ph{order:-1}
  .so-vn1,.so-vn2,.so-mp-n{margin-block:22px 4px;padding:4px 0 4px 14px;border-top:0;border-left:2px solid var(--so-brass)}
  .so-bands{grid-template-columns:1fr;row-gap:30px;margin-top:48px;padding:0;border:0}
  .so-bd,.so-bw{padding:0}
  .so-bd::before{content:"";position:static;display:block;width:auto;height:10px;margin-bottom:14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--so-hair)}
  .so-bw::before{background:linear-gradient(90deg,rgb(210 174 102/.55) calc(var(--so-m1)*100%),transparent 0)}
  .so-bm::before{background:linear-gradient(90deg,transparent calc(var(--so-m1)*100%),rgb(241 230 208/.3) 0 calc(var(--so-m2)*100%),transparent 0)}
  .so-bt::before{background:linear-gradient(90deg,transparent calc(var(--so-m2)*100%),var(--so-cream) 0) 0 0/100% 1.25px no-repeat,linear-gradient(90deg,transparent calc(var(--so-m2)*100%),var(--so-cream) 0) 0 100%/100% 1.25px no-repeat,linear-gradient(var(--so-cream),var(--so-cream)) calc(var(--so-m2)*100%) 0/1.25px 100% no-repeat}
  .so-card{margin-top:-40px;padding:26px 20px 28px;border-radius:22px}
  .so-fs-t{padding:28px 0 0}
  .so-key{margin-top:28px}
  .so-mrow{height:76px}
  .so-mf{top:30px}
  .so-mrow::before,.so-mrow::after{top:28px}
  .so-rail{grid-template-columns:1fr}
  .so-console{margin-inline:0;padding-block:14px 18px}
  .so-cin{width:calc(100% - 28px)}
  .so-screen{height:200px}
  .so-pn{font-size:26px;letter-spacing:0}
  .so-drvs{flex-direction:column;gap:8px;width:100%}
  .so-drv{display:flex;align-items:center;gap:8px}
  .so-dn{flex:1}
  .so-flip{width:100%}
  .so-room .so-seg{display:flex;width:100%}
  .so-seg label{flex:1}
  .so-roomstrip{height:64px}
  .so-tb-g,.so-tu-g{row-gap:32px}
  .so-sws{grid-template-columns:1fr 1fr;gap:28px 16px;margin-top:44px}
  .so-swt{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .so-swt p{grid-column:1}
  .so-swc{grid-row:auto;width:48px;height:48px}
  .so-swn{padding-top:0;margin-top:14px}
  .so-steps li{grid-template-columns:3.5rem 1fr}
  .so-steps li::before{font-size:2.75rem}
  .so-close{margin-left:0}
  .so-or-g{row-gap:40px}
  .so-form{padding:20px;border-radius:22px}
  .so-fg{grid-template-columns:1fr}
  .so-co-g{row-gap:40px}
}
@media (max-width:479.98px){.so-sfig{display:none}}