/* SUPASOUND / editorial rhythm and tactile interaction */
:root{--type-micro:.75rem;--motion-ease:cubic-bezier(.22,1,.36,1);--panel-line:#30272024}
html{scroll-padding-top:96px}
.site-header{position:sticky;top:0;height:74px;background:var(--pink);transition:box-shadow .25s;isolation:isolate}
.site-header.is-scrolled{box-shadow:0 1px 0 var(--ink)}
.site-header::after{content:'';position:absolute;bottom:-1px;left:0;width:100%;height:2px;background:var(--ink);transform:scaleX(var(--reading-progress,0));transform-origin:left;pointer-events:none}
.desktop-nav a[aria-current=location]::after{transform:scaleX(1)}
.desktop-nav a,.sound-switch{min-height:44px}
.hero-intro{padding:25px 0 24px}.hero-intro p{max-width:48ch}
.hero-stamp{gap:5px}
.wordmark-stage.led-display{height:clamp(230px,24vw,355px);border-radius:4px;box-shadow:inset 0 1px 0 #817568,0 3px 0 #191511}
.led-screen{overflow:hidden;isolation:isolate;background-color:#171411}
.led-screen::before{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(112deg,#ffffff09,transparent 45%,#0002)}
.led-screen #supasound-wordmark-container{opacity:.76;transition:opacity .35s}
.sound-on .led-screen #supasound-wordmark-container{opacity:1}
.led-display.is-unpatched .led-screen #supasound-wordmark-container{opacity:.04}
.led-screen .led-scan{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background:linear-gradient(180deg,transparent 47%,#ffb5b75c 50%,transparent 53%);transform:translateY(-100%)}
.sound-system .instrument{margin-top:48px;border-color:#51473d;border-radius:5px;--line:var(--panel-line);background-image:var(--panel-grain),linear-gradient(125deg,#ffffff50,transparent 35%,#30272009);box-shadow:inset 0 1px 0 #fff,0 3px 0 #342b24,0 12px 25px -18px #302720a0}
.instrument-lead{padding:20px}.instrument-title{gap:10px}
.mini-mark{border:0;background:var(--ink);color:var(--paper);padding:6px 8px}
.instrument-lead p{margin:18px 0 12px}.listen-button{min-height:44px;text-decoration:none!important}
.listen-button[aria-pressed=true] .icon{opacity:.55}
.knob-unit{padding-top:21px;transition:background .2s}
.knob-unit+.knob-unit{border-left:0}
.knob-unit.is-adjusting{background:#ffffff38}
.knob-body{background:repeating-conic-gradient(#302720 0deg 3deg,#4c4239 3deg 5deg);box-shadow:0 0 0 1px #1e191480,3px 7px 8px #30272035,inset 0 1px 1px #ffffff25;transition:box-shadow .2s}
.knob-body::before{inset:3px;background:radial-gradient(ellipse at 35% 20%,#615449,#382f28 60%,#29221c);border-color:#78695a;box-shadow:inset 0 1px 0 #ffffff32,inset 0 -2px 5px #0003}
.is-adjusting .knob-body{box-shadow:0 0 0 1px #1e191480,2px 4px 5px #30272050,0 0 0 5px #ff8d9030}
.knob-value{border:0;border-bottom:1px solid var(--panel-line);border-radius:0;background:transparent;min-width:42px}
.knob-scale .active-arc{stroke:#9a4248;stroke-width:2.5}
.mix-panel{padding:21px 20px 16px}.mix-endpoints{margin-top:22px}
.fader-cap{box-shadow:2px 5px 6px #30272044,inset 0 1px 0 #ffffff54}
.preset-row>button:not(.reset-button){min-width:34px;height:34px}.reset-button,.patch-reset{min-width:44px;min-height:44px}
.scope-panel{background:#241e19;box-shadow:inset 0 1px 5px #0004;border:1px solid #40362d}
.patchbay{padding-top:8px;padding-bottom:10px;background-color:#d9d5cd}
.patch-heading{min-height:44px}.patch-instruction{font-size:12px;opacity:.8}
.patch-port-name{font-size:14px}.patch-bank-label,.patch-port-code{font-size:12px}
.patch-bank-label{opacity:.8}.patch-port-code{opacity:.72}
.patch-socket{transition:box-shadow .15s,outline-color .15s}
.patch-port.is-selected .patch-port-name{background:transparent;color:var(--ink);text-decoration:underline;text-underline-offset:5px}
.patch-port.can-connect .patch-socket{outline:1px solid #9a4248;outline-offset:4px}
.patch-port.is-snap-target .patch-socket{outline:2px solid #9a4248;outline-offset:5px;box-shadow:0 0 0 8px #ff8d9025}
.instrument-footer{padding-block:5px}.instrument-footer button{min-height:44px}
.hero-bottom{padding-block:28px 38px}
.services.services-editorial,.cases,.about{padding-top:32px;padding-bottom:64px}
.section-kicker{padding-bottom:22px}.services-canvas{border:0}
.service-tabs button{position:relative;transition:color .2s,padding .3s var(--motion-ease)}
.service-tabs button[aria-selected=true]{padding-left:10px}
.service-tabs button[aria-selected=true]::before{content:'';position:absolute;left:0;top:50%;width:3px;height:14px;transform:translateY(-50%);background:var(--ink)}
.service-display-title{position:relative;z-index:1}
.service-panel .service-sweep{position:absolute;inset:0;z-index:5;pointer-events:none;border-top:1px solid #ff8d90a0;background:linear-gradient(#ff8d9012,transparent 12%);opacity:0}
.service-story a,.text-link{transition:gap .25s var(--motion-ease)}
.service-story a:hover,.text-link:hover{gap:24px}
.service-story a>span,.project-button>span,.instagram-link{transition:transform .3s var(--motion-ease)}
.service-story a:hover>span,.project-button:hover>span{transform:translate(3px,-3px)}
.cases-heading{margin-block:42px 38px;align-items:end}
.case-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.case:first-child{grid-column:1/-1}.case:first-child .case-art{aspect-ratio:2.05}
.case:first-child .case-caption{width:30%;min-height:245px;padding:30px}
.case:first-child .case-art-title{font-size:clamp(8rem,22vw,23rem);bottom:88px;left:34px}
.case:first-child .case-play{left:39px}
.case-art{aspect-ratio:1.22;overflow:hidden}.case-art>img{transition:transform .7s var(--motion-ease),filter .4s}
.case-art:hover>img{transform:scale(1.025)}
.case-art[aria-pressed=true]>img{filter:grayscale(1) contrast(1.15)}
.case-art[aria-pressed=true] .case-play{color:var(--pink)}
.case-caption{width:43%;min-height:230px;padding:24px}.case-caption h3{font-size:clamp(1.25rem,2vw,1.75rem)}
.case-topline{font-size:12px}.case-play{min-height:44px;align-items:center;bottom:20px}
.case-firma .case-caption{background:var(--paper);color:var(--ink)}
.cases-footnote{padding-top:24px;font-size:12px}
.about-layout{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:center;gap:8%;padding-top:55px}
.about-copy h2{font-size:clamp(3rem,7.2vw,8rem);line-height:.97}
.about-description{grid-template-columns:1fr;margin-top:48px;max-width:42ch}
.about-description>.micro{display:none}.about-description>div{max-width:none}
.about-description p{font-size:18px;line-height:1.5}
.brand-poster{width:100%;max-width:440px;transform:none;box-shadow:none;justify-self:end}
.brand-poster img{width:100%}.brand-poster figcaption{background:transparent;border-top:1px solid #3027204d;padding:17px 0;font-size:12px}
.about-bottom{margin-top:52px}
.contact-heading{margin-block:52px 44px}.contact-heading h2{font-size:clamp(3rem,8.2vw,9rem)}
.contact-arrow{display:none}
.contact-bar{padding-bottom:48px;grid-template-columns:1fr minmax(250px,35%)}
.contact-bar>.project-button{min-height:165px;border-radius:0;transition:background .2s}
.contact-email{font-size:clamp(1.125rem,2.2vw,2rem);letter-spacing:-.035em}
.modal{border:1px solid var(--ink);border-radius:0;box-shadow:0 20px 80px #0004;max-height:calc(100dvh - 40px)}
.modal::backdrop{background:#1714119c;backdrop-filter:blur(5px)}
.modal-close{min-width:44px;min-height:44px}.contact-modal{max-width:760px;padding:42px}
.contact-modal h2{font-size:clamp(2.5rem,5vw,4.5rem);margin:22px 0 30px}
.contact-modal input,.contact-modal textarea,.contact-modal select{border:0;border-bottom:1px solid #30272066;border-radius:0;background:transparent;padding:12px 0;min-height:48px}
.contact-modal textarea{resize:vertical}.contact-modal label{font-size:14px}
.contact-modal .project-button{min-height:52px;justify-content:space-between;width:100%;margin-top:18px}
.form-note{font-size:12px;min-height:36px;line-height:1.5}
.mobile-nav a[aria-current=location]{text-decoration:underline;text-underline-offset:7px}
.menu-toggle{min-width:44px;min-height:44px}
.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
[data-reveal]{opacity:1}
@media(min-width:1600px){.instrument-lead,.mix-panel{padding:28px}.knob-unit{padding-top:28px}.knob-control{width:130px;height:130px}}
@media(max-width:1000px){.patch-instruction{display:none}.case-caption{min-height:210px;padding:20px}.case:first-child .case-caption{width:36%}.case-art{aspect-ratio:.95}.about-layout{gap:40px}.about-description p{font-size:16px}}
@media(max-width:800px){
 .site-header{height:68px}.brand span{display:none}.desktop-nav{gap:18px}
 .hero-intro p{max-width:36ch}.hero-stamp{max-width:18ch}
 .case-grid{grid-template-columns:1fr}.case:first-child{grid-column:auto}
 .case:first-child .case-art,.case-art{aspect-ratio:1.28}
 .case:first-child .case-caption,.case-caption{width:43%;min-height:220px;padding:22px}
 .case:first-child .case-art-title{font-size:28vw;left:24px}
 .about-layout{grid-template-columns:1fr 1fr;gap:30px}.about-copy h2{font-size:6.5vw}
 .about-description{margin-top:28px}.brand-poster{max-width:none}
}
@media(max-width:600px){
 html{scroll-padding-top:82px}.site-header{height:66px}.hero-intro{padding-block:22px}
 .hero-intro p{max-width:34ch}.hero-stamp{display:none}
 .wordmark-stage.led-display{height:clamp(178px,47vw,240px)}
 .sound-system .instrument{margin-top:43px}
 .instrument-lead{grid-template-columns:1fr auto;padding:14px 16px;gap:6px 10px;align-items:center}
 .instrument-title{grid-column:1;grid-row:1;gap:8px}.instrument-title>span:last-child{font-size:12px}
 .instrument-lead p{grid-column:1;grid-row:2;margin:0;font-size:14px}
 .listen-button{grid-column:2;grid-row:1/3;margin:0;font-size:14px;max-width:110px;text-align:left}
 .control-hint{display:none}.knob-unit{padding:15px 4px 10px}.knob-label{font-size:14px}
 .knob-label>span:first-child{display:none}.knob-control{width:100px;height:100px}
 .mix-panel{padding:16px}.mix-heading label{font-size:14px}.mix-endpoints{margin-top:14px}
 .preset-row{gap:8px}.preset-row>button:not(.reset-button){width:44px;height:44px}
 .sound-system .patch-rack{gap:24px 12px;padding-bottom:40px}
 .patch-port-name{font-size:12px;line-height:1.2}.patch-port-code,.patch-bank-label{font-size:12px;letter-spacing:-.04em}
 .patch-port{gap:6px;min-height:84px}.patch-bottom{min-height:42px}
 .instrument-footer{display:flex;gap:12px;padding:8px 13px}.instrument-footer>span:first-child{display:none}
 .hero-bottom{padding-block:26px 34px;font-size:12px}
 .services.services-editorial,.cases,.about{padding-top:24px;padding-bottom:40px}
 .services-sidebar{padding:22px}.services-side-intro{margin:24px 0}.service-tabs{margin-bottom:20px}
 .service-display-title{font-size:9vw}.service-display-title.is-long{font-size:7.15vw}
 .service-story{padding:26px 22px}.service-story p{font-size:16px}.service-story a{min-height:44px}
 .case:first-child .case-art,.case-art{aspect-ratio:.86}
 .case:first-child .case-caption,.case-caption{width:49%;min-height:220px;padding:20px 16px}
 .case:first-child .case-art-title{font-size:34vw;left:18px;bottom:90px}
 .case:first-child .case-play,.case-play{left:18px;max-width:calc(51% - 30px);font-size:14px}
 .case-art-title{font-size:30vw}.case-topline>span{display:none}.case-caption h3{font-size:20px}
 .cases-heading{margin-block:32px}.case-grid{gap:24px}
 .about-layout{grid-template-columns:1fr;padding-top:32px;gap:34px}.about-copy h2{font-size:12vw}
 .about-description{max-width:36ch}.brand-poster{width:82%;justify-self:center}
 .about-bottom{margin-top:35px}
 .contact-heading{margin-block:34px}.contact-heading h2{font-size:12vw}
 .contact-bar{grid-template-columns:1fr;gap:24px;padding-bottom:36px}.contact-bar>.project-button{min-height:142px}
 .contact-email{font-size:21px}.contact-modal{padding:28px 22px}.contact-modal h2{margin-top:20px}
 .mobile-nav{padding:14px var(--gutter) 24px}.mobile-nav a{font-size:28px;padding:16px 0;border-bottom:1px solid var(--line)}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
 .case-art:hover>img{transform:none}.led-scan,.service-sweep{display:none}
}
.form-trap{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.form-note a{text-decoration:underline;text-underline-offset:3px}
.form-note[data-state=error]{color:#803137}
.contact-modal button:disabled{opacity:.6}
/* Reflow controls when the reader increases their preferred text size. */
.type-probe{position:fixed;left:-100px;top:0;width:1rem;height:1px;pointer-events:none;visibility:hidden}
.large-text .site-header{height:auto;min-height:80px;padding-block:12px;gap:16px}
.large-text .brand span,.large-text .desktop-nav{display:none}
.large-text .header-actions{margin-left:auto}.large-text .menu-toggle{display:block}
.large-text .sound-switch{height:auto;min-height:52px}.large-text .power-copy>span:first-child{display:none}
.large-text .instrument{grid-template-columns:1fr 1fr}
.large-text .instrument-lead{grid-column:1/-1;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:24px}
.large-text .instrument-lead p{margin:0}.large-text .control-hint{display:none}
.large-text .knob-bank{grid-column:1/-1;border-top:1px solid var(--line);border-left:0}
.large-text .knob-label{display:flex;flex-direction:column;align-items:center;gap:8px}
.large-text .mix-panel{grid-column:1/-1;grid-row:auto;border-left:0;border-top:1px solid var(--line)}
.large-text .scope-panel{display:none}.large-text .mix-endpoints{gap:20px;flex-wrap:wrap}
.large-text .preset-row{flex-wrap:wrap}.large-text .preset-row>button:not(.reset-button){width:auto;min-width:52px;height:48px}
.large-text .led-display{grid-template-rows:42px minmax(0,1fr) 38px}
.large-text .led-model{display:none}.large-text .led-bezel-footer{padding-right:140px}
.large-text .patch-bottom{flex-wrap:wrap}.large-text .patch-instruction{display:none}
.large-text .service-story{position:relative;width:100%;margin-top:20px;min-height:0}
.large-text .service-photo-bottom{margin-top:30px}.large-text .service-tabs button{grid-template-columns:38px 1fr 24px}
.large-text .case-caption{position:relative;width:100%;min-height:0}.large-text .case:first-child .case-caption{width:100%;min-height:0}
.large-text .case-caption>span{display:none}.large-text .case-caption h3{font-size:1.2rem}
.large-text .case-play{max-width:85%}.large-text .case-topline>span{display:none}
.large-text .contact-bar{grid-template-columns:1fr}.large-text .contact-bar>*{grid-column:1;grid-row:auto}
.large-text .modal{width:min(90vw,1000px)}
@media(max-width:600px){
 .large-text .instrument-lead{gap:12px}.large-text .knob-label{font-size:14px}
 .large-text .hero-intro p{font-size:1rem}.large-text .led-bezel-header,.large-text .led-bezel-footer{font-size:12px}
 .large-text .led-bezel-footer{padding-right:85px}.large-text .led-display{grid-template-rows:25px minmax(0,1fr) 24px}
 .large-text .mix-heading{flex-wrap:wrap}.large-text .mix-endpoints{font-size:1rem}
 .large-text .mix-endpoints small{display:none}.large-text .hero-bottom{flex-wrap:wrap}
}
.large-text .knob-label>span:last-child{margin-left:0}

/* Text drifts at different depths while native scrolling stays in control.
   Individual translate composes with the existing entrance/service transforms. */
.parallax-text{translate:0 var(--text-parallax,0px)}
@media(prefers-reduced-motion:reduce){.parallax-text{translate:none!important}}
.large-text .parallax-text{translate:none!important}
/* SS—01: one enclosure, inset display, one tactile control language. */
.sound-system{
 --panel-grain:url('../assets/panel-grain.svg');
 padding:16px 16px 0;border:1px solid #51473d;border-radius:9px;
 background-color:#ddd9d0;background-image:var(--panel-grain),linear-gradient(130deg,#ffffff50,transparent 45%,#30272012);
 background-size:160px 160px,100% 100%;
 box-shadow:inset 0 1px 0 #ffffffe0,inset 1px 0 0 #ffffff50,0 5px 0 #302720,0 16px 26px -18px #30272080;
}
.sound-system .wordmark-stage.led-display{border-radius:4px;box-shadow:0 0 0 1px #aaa094,inset 0 2px 5px #0008;margin:0}
.sound-system .led-bezel-footer{padding-right:0}.sound-system .led-signal-status{margin:auto}
.sound-system .instrument{margin:0 -16px;border:0;border-top:1px solid #30272030;border-radius:0 0 8px 8px;box-shadow:none;background-color:transparent}
.machine-link{position:relative;display:flex;align-items:flex-start;justify-content:flex-end;gap:42px;height:79px;padding:6px 16px 0}
.machine-link .display-port{position:relative;inset:auto;z-index:9;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:60px;min-height:52px;padding:0 6px;color:var(--ink);font-size:12px}
.machine-link .console-output>span:first-child{background:none;padding:0}
.machine-link .display-port .patch-socket{width:28px;height:28px}
.machine-link .display-port .patch-socket::before{width:18px;height:18px}
.machine-link .display-port:hover .patch-socket,.machine-link .display-port.is-selected .patch-socket{outline-color:#9a4248}
.sound-system :is(.listen-button,.reset-button,.patch-reset,[id=controls-help],[data-preset]){
 display:inline-flex;align-items:center;justify-content:center;gap:9px;
 min-height:44px;min-width:44px;padding:10px 14px;border:1px solid #342b24;border-radius:4px;
 background:linear-gradient(150deg,#65584c,#40352c 78%);color:var(--paper);
 box-shadow:inset 0 1px 0 #ffffff30,inset 0 -1px 0 #0003,0 3px 0 #2b231d,0 5px 7px #30272026;
 font:400 14px/1.25 var(--sans);letter-spacing:-.015em;text-decoration:none;
 transition:box-shadow .12s,background .15s,translate .12s,color .15s;
}
.sound-system :is(.listen-button,.reset-button,.patch-reset,[id=controls-help],[data-preset]):hover:not(:disabled){
 background:linear-gradient(150deg,#746558,#4b3f35 78%);box-shadow:inset 0 1px 0 #ffffff45,0 3px 0 #2b231d,0 5px 8px #30272035;
}
.sound-system :is(.listen-button,.reset-button,.patch-reset,[id=controls-help],[data-preset]):active:not(:disabled){
 translate:0 2px;box-shadow:inset 0 2px 4px #0003,0 1px 0 #2b231d;
}
.sound-system :is(.listen-button,[data-preset])[aria-pressed=true]{
 background:linear-gradient(145deg,#ffadaf,var(--pink));color:var(--ink);border-color:#8d5451;
 box-shadow:inset 0 1px 0 #ffffff55,0 2px 0 #8d5451,0 3px 5px #30272020;
}
.sound-system :is(.listen-button,[data-preset])[aria-pressed=true]:active{box-shadow:inset 0 2px 3px #8d545140,0 0 0 #8d5451}
.sound-system :is(.listen-button,.reset-button,.patch-reset,[id=controls-help],[data-preset]):focus-visible,
.sound-system .knob-control:focus-visible,.sound-system #crossfader:focus-visible{outline:2px solid #9a4248;outline-offset:5px}
.sound-system :is(.listen-button,.reset-button,.patch-reset,[id=controls-help],[data-preset]):disabled{opacity:.5;box-shadow:inset 0 1px 0 #ffffff20,0 1px 0 #2b231d;cursor:wait}
.sound-system .listen-button{width:fit-content;text-align:left}.sound-system .listen-button .icon{width:16px;height:16px;flex-shrink:0}
.sound-system .preset-row{gap:8px;flex-wrap:wrap}
.sound-system .preset-row>[data-preset]{width:44px;height:44px;padding:0;font-family:var(--mono);font-size:12px}
.sound-system .preset-row>.reset-button{padding:0;font-size:22px;margin-left:auto}
.sound-system .patch-reset{font-family:var(--mono);font-size:18px}.sound-system .patch-reset span{font-size:12px}
.sound-system .instrument-footer{padding:12px 20px;border-radius:0 0 8px 8px}
.sound-system #controls-help{font-size:14px}.sound-system #controls-help>span{font-size:18px}
.sound-system .patch-heading{padding-block:7px}.sound-system .knob-body::after{box-shadow:0 0 3px #ff8d9040}
.sound-system .patch-socket{background:linear-gradient(145deg,#eee9df,#a69a8c);border-color:#908071;box-shadow:0 1px 2px #30272080,inset 0 1px 0 #ffffffb0}
.sound-system .patch-port:active .patch-socket,.machine-link .display-port:active .patch-socket{box-shadow:inset 0 2px 4px #0006,0 0 0 3px #ff8d9030}
.sound-system .patch-port:focus-visible,.sound-system .display-port:focus-visible{outline:2px solid #9a4248;outline-offset:3px}
@media(max-width:1150px){.sound-system .listen-button{padding:10px;gap:7px}.sound-system .mix-panel{padding-inline:16px}}
@media(max-width:600px){
 .sound-system{padding:9px 9px 0;border-radius:7px}
 .sound-system .instrument{margin:0 -9px;border-radius:0 0 6px 6px}
 .machine-link{height:77px;padding:6px 9px 0;gap:28px}
 .machine-link .display-port{min-width:58px;font-size:12px}
 .sound-system .listen-button{padding:10px;min-width:105px;max-width:120px;font-size:13px}
 .sound-system .instrument-lead{padding:16px 13px;column-gap:8px}
 .sound-system .instrument-title>span:last-child{font-size:11px}
 .sound-system .instrument-footer{padding:12px 13px}
 .sound-system #controls-help{margin-left:auto}
}
@media(prefers-reduced-motion:reduce){.sound-system button{transition:none!important}}

.sound-system :is(.listen-button,[data-preset])[aria-pressed=true]:hover:not(:disabled){background:linear-gradient(145deg,#ffb8ba,#ff989b);color:var(--ink);box-shadow:inset 0 1px 0 #ffffff55,0 2px 0 #8d5451,0 3px 5px #30272020}

/* Floating navigation: a compact master strip, with section cues like channel selectors. */
.site-header{top:14px;width:calc(100% - 2 * var(--gutter));max-width:1120px;margin:14px auto 0;padding:8px 10px 8px 20px;height:76px;gap:24px;border:1px solid #69584b;border-radius:8px;background:#302720;color:var(--paper);box-shadow:inset 0 1px 0 #ffffff16,0 6px 18px #30272018;transition:box-shadow .25s}
.site-header.is-scrolled{box-shadow:inset 0 1px 0 #ffffff16,0 8px 28px #17141135}
.site-header::after{left:8px;bottom:0;width:calc(100% - 16px);height:2px;background:var(--pink)}
.site-header .brand{gap:12px;min-height:48px;flex-shrink:0}
.site-header .brand img{filter:brightness(0) invert(1);width:42px;height:30px;transition:opacity .2s}
.site-header .brand>span{display:flex;flex-direction:column;gap:5px;font:400 14px/1 var(--sans);letter-spacing:.025em}
.site-header .brand small{font:400 12px/1 var(--mono);letter-spacing:.03em;color:#c6bdb4}
.site-header .desktop-nav{gap:4px;margin-left:auto}
.site-header .desktop-nav a{display:flex;flex-direction:column-reverse;gap:5px;align-items:flex-start;justify-content:center;min-height:54px;padding:7px 15px;border-radius:3px;white-space:nowrap;font-size:14px;transition:background .2s,color .2s}
.site-header .desktop-nav sup{margin:0;color:#b1a196;font:400 12px/1 var(--mono);transition:color .2s}
.site-header .desktop-nav a::after{display:none}
.site-header .desktop-nav a[aria-current=location]{background:#ff8d9018;color:var(--pink)}
.site-header .desktop-nav a[aria-current=location] sup{color:var(--pink)}
.site-header .header-actions{gap:10px;border-left:1px solid #ffffff20;padding-left:16px}
.site-header .sound-switch{border:0;min-width:114px;padding:6px 8px;background:#211b17;box-shadow:inset 0 1px 3px #0004;color:var(--paper)}
.site-header .sound-switch[aria-checked=true]{color:var(--pink)}
.site-header .menu-toggle{border:1px solid #ffffff20;border-radius:4px;width:44px;padding:10px;background:#40352c;transition:background .2s}
.site-header .menu-toggle span{background:var(--paper);margin:6px 0}
.site-header .mobile-nav{top:calc(100% + 8px);left:0;right:0;background:#302720;border:1px solid #69584b;border-radius:6px;padding:10px 22px 18px;box-shadow:0 12px 24px #17141140;max-height:calc(100dvh - 110px);overflow-y:auto}
.site-header .mobile-nav a{display:grid;grid-template-columns:28px 1fr 24px;gap:12px;align-items:center;min-height:70px;padding:16px 0;border-bottom:1px solid #ffffff20;font:400 clamp(22px,4vw,34px)/1.2 var(--sans);letter-spacing:-.035em;transition:color .2s}
.site-header .mobile-nav a:last-child{border:0}
.site-header .mobile-nav .nav-index{font:400 12px/1 var(--mono);letter-spacing:0;color:#b1a196}
.site-header .mobile-nav .nav-arrow{font-size:24px;transition:translate .2s}
.site-header .mobile-nav a[aria-current=location]{color:var(--pink);text-decoration:none}
.site-header :is(a,button):focus-visible{outline-color:var(--pink);outline-offset:2px}
.sound-system .instrument-footer{justify-content:flex-end}
@media(max-width:1150px){.site-header .brand>span{display:none}.site-header{gap:14px}.site-header .desktop-nav a{padding-inline:12px}}
@media(max-width:900px){.site-header .desktop-nav{display:none}.site-header .menu-toggle{display:block}.site-header .header-actions{margin-left:auto}.site-header .brand>span{display:flex}}
@media(max-width:600px){.site-header{top:8px;width:calc(100% - 24px);margin:8px 12px 0;height:66px;padding:7px 8px 7px 12px;gap:8px}.site-header .brand>span{display:none}.site-header .header-actions{gap:8px;padding-left:12px}.site-header .brand img{width:39px}.site-header .sound-switch{min-width:106px}.site-header .mobile-nav{padding-inline:18px}.site-header .mobile-nav a{min-height:66px}.site-header .mobile-nav .nav-index{font-size:12px}}
.large-text .site-header .desktop-nav,.large-text .site-header .brand>span{display:none}.large-text .site-header .menu-toggle{display:block}

/* Rollover indicates intent; parameter values and audio only change on activation. */
:is(a,button,[role=slider],input,select,textarea){transition-timing-function:var(--motion-ease)}
.brand img,.footer-brand img,.hero-bottom a>span,.text-link>span,.site-footer>a:last-child,.case-play .icon{transition:translate .22s,opacity .22s,scale .22s}
:is(.text-link,.service-story a,.cases-footnote a,.contact-email,.instagram-link,.form-note a){text-underline-offset:5px;text-decoration-thickness:1px;transition:color .2s,border-color .2s,background .2s}
:is(.contact-email,.instagram-link,.cases-footnote a,.form-note a):focus-visible{text-decoration:underline}
.case-play{transition:background .2s,color .2s; border-radius:2px}
.modal-close{border-radius:3px;transition:background .2s,color .2s}
.service-tabs button:focus-visible{outline-offset:-2px}.service-tab-arrow{transition:opacity .2s,translate .2s}
.fader-cap{transition:box-shadow .2s}.knob-value{transition:color .2s,border-color .2s}
.contact-modal :is(input,select,textarea){transition:border-color .2s,box-shadow .2s,background .2s}
.contact-modal :is(input,select,textarea):focus{border-color:#9a4248;box-shadow:0 1px 0 #9a4248;outline:0}
@media(hover:hover) and (pointer:fine){
 .site-header .desktop-nav a:hover{background:#ffffff12;color:var(--pink)}
 .site-header .desktop-nav a:hover sup{color:var(--pink)}
 .site-header .mobile-nav a:hover{color:var(--pink)}
 .site-header .mobile-nav a:hover .nav-arrow{translate:3px -3px}
 .site-header .brand:hover img,.footer-brand:hover img{opacity:.7;translate:0 -2px}
 .site-header .sound-switch:hover:not(:disabled) .power-switch-thumb{box-shadow:0 0 0 3px #ff8d9040,inset 0 1px 0 #fff9}
 .site-header .menu-toggle:hover{background:#615044}
 .knob-control:hover .knob-body,.knob-control:focus-visible .knob-body{box-shadow:0 0 0 1px #9a4248,3px 7px 8px #30272035,0 0 0 5px #ff8d9035}
 .knob-unit:has(.knob-control:hover) .knob-value{color:#873a40;border-color:#873a40}
 .fader-wrap:hover .fader-cap,.fader-wrap:focus-within .fader-cap{box-shadow:2px 5px 6px #30272044,inset 0 1px 0 #ffffff54,0 0 0 4px #ff8d9050}
 .sound-system :is(.patch-port,.display-port):hover .patch-socket{outline:2px solid #9a4248;outline-offset:4px;box-shadow:0 0 0 7px #ff8d9025}
 .sound-system .patch-port:hover .patch-port-name{text-decoration:underline;text-underline-offset:4px}
 .service-tabs button:hover{color:var(--ink);background:#30272009}
 .service-tabs button:hover .service-tab-arrow{opacity:1;translate:2px -2px}
 .service-next:hover{transform:translateX(5px)}
 .case-art:hover:not(:disabled) .case-play{background:var(--paper);color:var(--ink);box-shadow:0 0 0 7px var(--paper)}
 .case-art[aria-pressed=true]:hover:not(:disabled) .case-play{background:var(--pink);box-shadow:0 0 0 7px var(--pink)}
 .case-art:hover:not(:disabled) .case-play .icon{scale:1.1}
 .hero-bottom a:hover>span{translate:0 4px}.text-link:hover>span{translate:3px -3px}
 :is(.contact-email,.instagram-link,.cases-footnote a,.form-note a):hover{text-decoration:underline}
 .site-footer>a:last-child:hover{translate:0 -3px;text-decoration:underline;text-underline-offset:5px}
 .modal-close:hover{background:var(--ink);color:var(--paper)}
 .contact-modal :is(input,textarea,select):hover{border-color:var(--ink);background:#30272005}
 .project-button:hover:not(:disabled){box-shadow:inset 0 0 0 1px currentColor}
}
:is(.modal-close,.menu-toggle,.service-next,.project-button):active:not(:disabled){translate:0 1px}
@media(prefers-reduced-motion:reduce){:is(a,button) *,a:hover,button:hover{translate:none!important;scale:none!important}}

/* Compact machine: retain full-size targets and spend less height on the faceplate. */
.sound-system .wordmark-stage.led-display{height:clamp(190px,19vw,274px)}
.sound-system .machine-link{height:66px;padding-top:4px;align-items:flex-start}
.sound-system .machine-link #controls-help{margin:3px auto 0 0;min-width:44px;height:44px;padding:9px 12px}
.sound-system .machine-link #controls-help .help-label{font-size:14px}
.sound-system .machine-link .display-port{min-height:48px}
.sound-system .instrument-lead{padding:14px 16px}
.sound-system .instrument-lead p{margin:10px 0}
.sound-system .control-hint{padding-top:8px}
.sound-system .knob-unit{padding-block:14px 10px}
.sound-system .knob-control{width:100px;height:100px;margin-block:3px 0}
.sound-system .knob-value{padding-block:1px}
.sound-system .mix-panel{padding-block:14px 12px}
.sound-system .mix-endpoints{margin-top:13px}
.sound-system .fader-wrap{margin-block:3px 10px}
.sound-system .scope-panel{margin-block:10px}
.sound-system #oscilloscope{height:90px}
.sound-system .patchbay{padding-block:5px 10px;border-radius:0 0 8px 8px}
.sound-system .patch-heading{padding-block:0;min-height:44px}
.sound-system .patch-rack{min-height:155px;padding-top:7px}
.sound-system .patch-bank-label{padding-bottom:5px}
.sound-system .patch-port{padding-top:8px;gap:5px;min-height:72px}
.sound-system .patch-bottom{padding-top:7px;min-height:30px}
@media(min-width:601px) and (max-width:800px){
 .sound-system .instrument{grid-template-columns:1fr 1.5fr}
 .sound-system .instrument-lead{grid-column:1;grid-row:1}
 .sound-system .knob-bank{grid-column:2;grid-row:1}
 .sound-system .mix-panel{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:1fr 1fr;column-gap:24px;padding:12px 16px}
 .sound-system .mix-heading{grid-column:1;grid-row:1}.sound-system .mix-endpoints{grid-column:2;grid-row:1;margin:0}
 .sound-system .fader-wrap{grid-column:2;grid-row:2;margin:10px 0 0}
 .sound-system .preset-row{grid-column:1;grid-row:2;margin-top:10px}
 .sound-system .scope-panel{display:none}
}
@media(max-width:600px){
 .sound-system .wordmark-stage.led-display{height:clamp(146px,40vw,185px);grid-template-rows:23px minmax(0,1fr) 16px;padding-inline:10px}
 .sound-system .machine-link{height:64px;gap:20px;padding-inline:2px}
 .sound-system .machine-link #controls-help{margin-left:0;margin-right:auto;padding:0}
 .sound-system .machine-link #controls-help .help-label{display:none}
 .sound-system .machine-link .display-port{min-width:52px;font-size:12px;gap:2px}
 .sound-system .instrument-lead{padding:12px 13px;gap:5px 8px}
 .sound-system .instrument-lead p{margin:0;font-size:13px;line-height:1.3}
 .sound-system .knob-unit{padding-block:10px 8px}
 .sound-system .knob-control{width:90px;height:90px;margin-top:0}
 .sound-system .mix-panel{padding:11px 13px}
 .sound-system .mix-endpoints{margin-top:8px}
 .sound-system .fader-wrap{margin-bottom:6px}
 .sound-system .patch-rack{min-height:0;gap:10px 12px;padding:7px 0 36px}
 .sound-system .patch-port{min-height:68px;gap:4px;padding-top:7px}
 .sound-system .patch-bottom{font-size:12px;padding-top:6px;min-height:28px}
 .sound-system .patch-bank-label{padding-bottom:4px}
}
/* Larger reading sizes keep their natural reflow. */
.large-text .sound-system .instrument-lead p{font-size:1rem}
.large-text .sound-system .machine-link{height:auto;min-height:78px}
.large-text .sound-system .machine-link .help-label{display:none}
.large-text .sound-system .patch-rack{padding-bottom:48px}
.large-text .sound-system .mix-panel{display:block}

/* The LED is internally wired: controls start directly below its bezel. */
.sound-system .instrument{margin-top:12px}
.sound-system .patch-heading .patch-reset{margin-left:auto}
.sound-system .patch-heading #controls-help{flex-shrink:0;width:44px;padding:0;font-size:18px}
@media(max-width:600px){.sound-system .instrument{margin-top:9px}.sound-system .patch-heading{gap:8px}}

/* The machine opens the page; the studio introduction carries the reader onward. */
.hero{padding-top:26px}
.studio-intro{display:grid;grid-template-columns:minmax(145px,.65fr) minmax(0,2.5fr) 108px;gap:40px;align-items:center;padding:34px 0 36px;margin-top:12px;border-bottom:1px solid var(--line)}
.studio-meta{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding-block:5px;font:400 12px/1.55 var(--mono);letter-spacing:0}
.studio-meta>span:last-child{color:#69463f}
.studio-statement{font:400 clamp(25px,2.6vw,40px)/1.13 var(--sans);letter-spacing:-.045em;text-wrap:pretty;max-width:35ch}
.studio-statement>span{display:block;margin-bottom:.16em}
.studio-next{display:flex;flex-direction:column;align-items:center;gap:13px;text-align:center;font:400 12px/1.25 var(--sans);letter-spacing:-.01em}
.studio-next-icon{display:grid;place-items:center;width:86px;height:86px;border:1px solid var(--ink);background:var(--ink);color:var(--pink);transition:background .2s,color .2s}
.studio-next svg{width:52px;height:52px;stroke:currentColor;stroke-width:1.6;transition:translate .3s var(--motion-ease)}
.studio-next:focus-visible{outline-offset:6px}
@media(hover:hover) and (pointer:fine){.studio-next:hover .studio-next-icon{background:transparent;color:var(--ink)}.studio-next:hover svg{translate:0 5px}}
.studio-next:active .studio-next-icon{translate:0 1px}
.title-row{display:block}
@media(max-width:1000px){.studio-intro{grid-template-columns:minmax(0,1fr) 88px;gap:22px}.studio-meta{grid-column:1/-1;flex-direction:row;gap:20px}.studio-meta br{display:none}.studio-meta>span:first-child{max-width:22ch}.studio-statement{font-size:30px}.studio-next-icon{width:72px;height:72px}}
@media(max-width:600px){.hero{padding-top:20px}.studio-intro{grid-template-columns:minmax(0,1fr) 58px;column-gap:18px;row-gap:20px;padding:25px 0 27px;margin-top:5px}.studio-meta{font-size:12px;line-height:1.4}.studio-meta>span:first-child{max-width:19ch}.studio-meta br{display:block}.studio-meta>span:last-child{max-width:13ch;text-align:right}.studio-statement{font-size:25px;line-height:1.15;letter-spacing:-.04em;grid-column:1/-1;max-width:30ch}.studio-next{grid-column:1/-1;flex-direction:row;justify-content:space-between;font-size:14px}.studio-next-icon{order:2;width:52px;height:52px}.studio-next svg{width:34px;height:34px}}
.large-text .studio-intro{grid-template-columns:1fr auto}.large-text .studio-meta{grid-column:1/-1;font-size:.75rem}.large-text .studio-statement{font-size:1.5rem;grid-column:1/-1}.large-text .studio-next{grid-column:1/-1;font-size:1rem;flex-direction:row;justify-content:space-between}
@media(prefers-reduced-motion:reduce){.studio-next svg{transition:none}.studio-next:hover svg{translate:none}.title-reveal,.title-row{clip-path:none!important}}

/* Five physical spreads; the following card replaces the previous one on scroll. */
.services-canvas{overflow:visible;min-height:0;align-items:start;background:transparent;gap:24px}
.services-canvas::before{display:none}
.services-sidebar{position:sticky;top:var(--card-top,118px);background:var(--paper);padding:28px 26px;min-height:580px;height:calc(100svh - 142px);max-height:760px}
.services-side-intro{margin:45px 0 32px}.service-tabs{margin:auto 0 24px}
.service-index-link{position:relative;display:grid;grid-template-columns:20px 1fr 18px;align-items:center;gap:10px;padding:16px 0;min-height:55px;border-bottom:1px solid var(--line);font:400 16px/1.2 var(--sans);letter-spacing:-.02em;transition:background .2s,padding .2s}
.service-index-link:first-child{border-top:1px solid var(--line)}.service-index-link>span:first-child{font:400 12px/1 var(--mono);opacity:.6}
.service-index-link[aria-current=step]{padding-left:10px;font-weight:500}.service-index-link[aria-current=step]::before{content:'';position:absolute;left:0;top:50%;height:14px;width:3px;background:var(--ink);transform:translateY(-50%)}
.service-index-link[aria-current=step] .service-tab-arrow{opacity:1}
.service-deck{position:relative;min-width:0;display:flex;flex-direction:column;gap:28px}
.service-card{position:relative;height:clamp(580px,calc(100svh - 142px),760px);min-height:580px;flex-shrink:0;scroll-margin-top:var(--card-top,118px);border:1px solid #e9e6df26;background:#26221e;box-shadow:0 -6px 18px #17141122;transform-origin:50% 0}
.has-stacked-cards .service-card{position:sticky;top:var(--card-top,118px);transform:scale(calc(1 - var(--card-retreat,0)*.025));filter:brightness(calc(1 - var(--card-retreat,0)*.16));z-index:calc(1 + var(--card-index))}
.service-card .service-photo-top{padding:24px 25px 0}.service-card .service-disciplines{margin:26px 25px 0;font-size:12px;line-height:1.5;max-width:80%}
.service-card .service-display-title{margin:26px 22px 0;font-size:clamp(40px,4.5vw,74px);line-height:.98}
.service-card .service-display-title.is-long{font-size:clamp(31px,3.5vw,60px)}
.service-card .service-photo-bottom{margin:24px 0 18px 22px;padding:0;margin-top:auto;min-height:0}
.service-card .service-big-number{font-size:clamp(130px,16vw,240px);line-height:.82}
.service-card .service-story{width:48%;min-height:0;padding:24px;gap:20px}
.service-card .service-story-top{margin:0}.service-card .service-story p{font-size:17px;line-height:1.4}
.service-card .service-story a{font-size:15px;line-height:1.3;min-height:44px;padding-top:12px}
@media(hover:hover) and (pointer:fine){.service-index-link:hover{background:#30272009}.service-index-link:hover .service-tab-arrow{opacity:1;translate:2px -2px}}
@media(max-width:1150px){.services-canvas{grid-template-columns:30% minmax(0,1fr);gap:18px}.services-sidebar{padding:22px 18px}.services-side-intro{margin:30px 0}.service-index-link{font-size:14px;gap:6px;padding-block:13px}.service-card .service-story{padding:22px}.service-card .service-story p{font-size:16px}}
@media(max-width:800px){
 .services-canvas{grid-template-columns:1fr;gap:24px}.services-sidebar{position:relative;top:auto;height:auto;min-height:0;max-height:none;padding:24px}
 .services-side-intro{margin:24px 0}.services-side-intro p{font-size:36px}.service-next{width:44px}
 .service-tabs{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;margin:0 0 22px}
 .service-index-link,.service-index-link:first-child{min-height:44px;display:flex;gap:8px;border:1px solid var(--line);padding:10px;font-size:13px}
 .service-index-link[aria-current=step]{background:var(--pink);padding-left:10px}.service-index-link[aria-current=step]::before{display:none}.service-index-link .service-tab-arrow{display:none}
 .service-card .service-display-title{font-size:8vw}.service-card .service-display-title.is-long{font-size:6.2vw}
 .service-card .service-story{width:46%}.service-card .service-big-number{font-size:29vw}
}
@media(max-width:600px){
 .services-sidebar{padding:20px}.services-side-intro p{font-size:30px}.services-side-footer{font-size:12px}
 .service-deck{gap:24px}
 .service-card{height:auto;min-height:0}
 .service-card .service-editorial-image{height:350px;object-position:var(--service-image-mobile-position,58% 50%)}
 .service-card .service-panel-shade{height:350px}
 .service-card .service-photo-top{padding:18px 18px 0;font-size:12px}
 .service-card .service-disciplines{margin:20px 18px 0;max-width:90%;font-size:12px;line-height:1.4}
 .service-card .service-display-title{margin:22px 16px 0;font-size:9vw;line-height:1.02}
 .service-card .service-display-title.is-long{font-size:7.1vw}
 .service-card .service-photo-bottom{height:135px;margin:0;padding:18px 16px;display:flex;align-items:end;flex-shrink:0}
 .service-card .service-big-number{font-size:112px}
 .service-card .service-story{position:relative;width:100%;padding:20px;margin:0;gap:16px;flex:1;min-height:0}
 .service-card .service-story p{font-size:16px;line-height:1.4}.service-card .service-story a{font-size:15px}
 .service-card .service-story-top{font-size:12px}
}
@media(max-height:740px){.services-sidebar{position:relative;top:auto;height:auto;min-height:0;max-height:none}}
.large-text .services-canvas{grid-template-columns:1fr}.large-text .services-sidebar{position:relative;top:auto;height:auto;max-height:none;min-height:0}
.large-text .service-card{height:auto;min-height:0;position:relative;transform:none;filter:none}.large-text .service-card .service-story{position:relative;width:100%;margin-top:24px}.large-text .service-card .service-story p{font-size:1rem}.large-text .service-card .service-display-title{font-size:clamp(26px,6vw,74px)}.large-text .service-card .service-display-title.is-long{font-size:clamp(22px,4.8vw,60px)}
@media(prefers-reduced-motion:reduce){.has-stacked-cards .service-card{position:relative;transform:none;filter:none}.services-sidebar{position:relative;top:auto}.service-index-link{transition:none}}
.service-card .service-photo-bottom>.service-big-number{display:block;max-width:none;min-width:0;padding:0;font:400 clamp(130px,16vw,240px)/.82 var(--sans);letter-spacing:-.075em}
@media(max-width:800px){.service-card .service-photo-bottom>.service-big-number{font-size:29vw}}
@media(max-width:600px){.service-card .service-photo-bottom>.service-big-number{font-size:112px}}

/* Home hierarchy: transport, visual response, adjustments/mix, then effect routing. */
.sound-system .machine-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:62px;padding:0 0 14px}
.machine-toolbar .instrument-title{gap:12px;font:400 12px/1.25 var(--mono);letter-spacing:0}
.machine-toolbar .mini-mark{font:400 15px/1 var(--sans);padding:7px 9px}
.machine-actions{display:flex;align-items:center;gap:10px}
.sound-system .machine-toolbar .listen-button{max-width:none;min-width:146px;padding:10px 16px;font-size:14px}
.sound-system .machine-toolbar #controls-help{width:44px;height:44px;padding:0;font-size:18px;margin:0}
.sound-system .instrument{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(170px,.7fr)}
.tone-panel{min-width:0;padding:16px 20px 12px}
.tone-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;font:400 14px/1.2 var(--sans);letter-spacing:-.02em}
.tone-heading>span:last-child{font:400 12px/1.2 var(--mono);color:#796f65}
.sound-system .tone-panel .knob-bank{border:0;grid-column:auto;grid-row:auto;margin-top:7px}
.sound-system .tone-panel .knob-unit{padding:8px 10px 0}
.sound-system .tone-panel .knob-label{justify-content:center;font-size:14px;gap:0}
.sound-system .tone-panel .knob-label>span:first-child{display:none}
.sound-system .tone-panel .knob-label>span:last-child{margin:0}
.sound-system .tone-panel .knob-control{width:100px;height:100px;margin:3px 0 0}
.sound-system .mix-panel{display:block;grid-column:auto;grid-row:auto;padding:16px 20px 12px;border-left:1px solid var(--line);border-top:0}
.sound-system .mix-heading{grid-column:auto;grid-row:auto}
.sound-system .mix-endpoints{margin-top:16px;grid-column:auto;grid-row:auto}
.sound-system .fader-wrap{margin:5px 0 16px;grid-column:auto;grid-row:auto}
.sound-system .preset-row{margin:0;grid-column:auto;grid-row:auto}
.sound-system .scope-panel{display:flex;grid-column:auto;grid-row:auto;margin:14px 14px 14px 0;max-height:none;padding:13px}
.sound-system #oscilloscope{height:100px;flex:1;min-height:0}
.sound-system .patch-status:empty{display:none}
.sound-system .patch-bottom{justify-content:space-between}
.sound-system .patch-bottom>span:last-child{margin-left:auto}
.studio-intro{grid-template-columns:minmax(0,1fr) 108px;gap:18px 48px;padding-block:28px 30px}
.studio-meta{grid-column:1;grid-row:1;flex-direction:row;align-items:center;justify-content:space-between;max-width:780px;padding:0;gap:20px}
.studio-meta br{display:none}.studio-meta>span:first-child,.studio-meta>span:last-child{max-width:none}
.studio-statement{grid-column:1;grid-row:2;max-width:38ch}
.studio-next{grid-column:2;grid-row:1/3}
@media(max-width:1100px){
 .sound-system .instrument{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
 .sound-system .scope-panel{display:none}
 .tone-panel{padding-inline:16px}.sound-system .mix-panel{padding-inline:16px}
}
@media(max-width:700px){
 .sound-system .instrument{grid-template-columns:1fr}
 .sound-system .tone-panel{grid-column:1;padding:14px 13px 12px}
 .sound-system .mix-panel{grid-column:1;border-left:0;border-top:1px solid var(--line);padding:14px 13px}
 .sound-system .machine-toolbar{gap:12px;padding-bottom:12px}
 .machine-toolbar .instrument-title>span:last-child{display:none}
 .sound-system .machine-toolbar .listen-button{min-width:0;padding-inline:12px}
 .sound-system .tone-panel .knob-unit{padding-inline:3px}
 .sound-system .tone-panel .knob-control{width:90px;height:90px}
 .sound-system .mix-endpoints{margin-top:12px}.sound-system .fader-wrap{margin-bottom:10px}
 .studio-intro{grid-template-columns:1fr 58px;column-gap:18px}
 .studio-meta{grid-column:1/-1;font-size:12px;align-items:start}.studio-meta>span:first-child{max-width:18ch}.studio-meta>span:last-child{max-width:13ch;text-align:right}
 .studio-statement{grid-column:1/-1;grid-row:2;font-size:25px;line-height:1.15}
 .studio-next{grid-column:1/-1;grid-row:3;flex-direction:row;justify-content:space-between;font-size:14px}
 .studio-next-icon{order:2;width:52px;height:52px}
 .studio-next svg{width:34px;height:34px}
}
.large-text .sound-system .instrument{grid-template-columns:1fr}.large-text .sound-system .mix-panel{grid-column:1;border-left:0;border-top:1px solid var(--line)}
.large-text .sound-system .tone-panel{grid-column:1}.large-text .sound-system .scope-panel{display:none}
.large-text .machine-toolbar .instrument-title>span:last-child{display:none}.large-text .tone-heading{flex-wrap:wrap}
.large-text .studio-meta{grid-column:1/-1;font-size:.75rem}.large-text .studio-statement{grid-column:1/-1;font-size:1.5rem}.large-text .studio-next{grid-column:1/-1;grid-row:3;flex-direction:row;justify-content:space-between;font-size:1rem}

/* Introduce the studio before the instrument; keep the next-section cue below it. */
.studio-opening{padding:24px 0 28px}
.studio-opening .studio-statement{max-width:32ch;font-size:clamp(38px,4.3vw,68px);line-height:1.06;margin:0;letter-spacing:-.04em}
.studio-opening .studio-statement>.title-row{margin:0}.studio-opening .studio-statement>.title-row+.title-row{margin-top:.12em}
.studio-intro.studio-follow{grid-template-columns:minmax(0,1fr) auto;gap:24px;padding-block:20px;margin-top:8px}
.studio-follow .studio-meta{grid-column:1;grid-row:1;align-items:center;max-width:760px;gap:22px}
.studio-follow .studio-next{grid-column:2;grid-row:1;flex-direction:row;gap:18px;font-size:14px}
.studio-follow .studio-next-icon{order:2;width:48px;height:48px}.studio-follow .studio-next svg{width:30px;height:30px}
@media(max-width:700px){
 .studio-opening{padding:16px 0 22px}.studio-opening .studio-statement{font-size:clamp(32px,6vw,42px);line-height:1.08;max-width:30ch}
 .studio-intro.studio-follow{grid-template-columns:minmax(0,1fr) auto;gap:16px;padding-block:18px}
 .studio-follow .studio-meta{flex-direction:column;align-items:start;gap:7px;font-size:12px}
 .studio-follow .studio-meta>span:last-child{text-align:left;max-width:18ch}.studio-follow .studio-next{gap:10px;font-size:13px}
 .studio-follow .studio-next>span:last-child{max-width:8ch;text-align:left}
}
.large-text .studio-opening .studio-statement{font-size:1.5rem}.large-text .studio-intro.studio-follow{grid-template-columns:1fr}.large-text .studio-follow .studio-next{grid-column:1;grid-row:2;justify-content:space-between}

/* The downward cue takes the reader from the introduction into the instrument. */
#consola{scroll-margin-top:36px}
.console-cue{display:grid;place-items:center;width:64px;height:64px;margin-top:48px;border:1px solid var(--ink);color:var(--ink);transition:background .2s,color .2s}
.console-cue svg{width:42px;height:42px;stroke:currentColor;stroke-width:1.5;transition:translate .25s cubic-bezier(.22,1,.36,1)}
@media(hover:hover) and (pointer:fine){.console-cue:hover{background:var(--ink);color:var(--pink)}.console-cue:hover svg{translate:0 5px}}
.console-cue:active svg{translate:0 7px}
@media(max-width:700px){.console-cue{width:52px;height:52px;margin-top:32px}.console-cue svg{width:34px;height:34px}}
@media(prefers-reduced-motion:reduce){.console-cue,.console-cue svg{transition:none}}