:root{color-scheme:dark;--paper:#161616;--text:rgba(255,255,255,.5);--heading:rgba(255,255,255,.25);--edge:clamp(24px,7.8vw,150px);--gap:24px}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--text);font:400 20px/1.5 Onest,Arial,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{touch-action:manipulation}a:focus-visible,button:focus-visible,article:focus-visible{outline:1px solid #aaa;outline-offset:6px}p,h1{margin:0}[hidden]{display:none!important}
.portfolio-skip{position:fixed;top:-100px;left:24px;padding:12px;background:#000;z-index:20}.portfolio-skip:focus{top:12px}
.portfolio-header{height:52px;display:flex;align-items:center;gap:40px;padding:0 var(--edge);border-bottom:1px solid #252525;background:#000}.portfolio-home{white-space:nowrap}.portfolio-header nav{display:flex;gap:clamp(20px,4vw,64px);margin:auto}.portfolio-header a[aria-current]{color:rgba(255,255,255,.75)}
.project-navigation{display:flex;align-items:center;justify-content:space-between;padding:32px var(--edge) 0;gap:24px}.project-navigation>span{color:rgba(255,255,255,.25)}.project-tabs{display:flex;gap:32px}.project-tabs button{border:0;border-bottom:1px solid transparent;background:none;padding:4px 0 8px;color:rgba(255,255,255,.25);transition:color .2s ease-in-out,border-color .2s ease-in-out}.project-tabs button[aria-selected=true]{color:rgba(255,255,255,.75);border-color:#888}
.project-panel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,5fr);column-gap:clamp(64px,15.6vw,300px);padding:48px var(--edge) 64px;min-height:calc(100svh - 125px)}.project-insight,.project-display{min-width:0;display:flex;flex-direction:column}.project-copy{max-width:660px}.project-copy p+p{margin-top:24px}.project-status{color:rgba(255,255,255,.3)}.project-display{justify-content:space-between;gap:56px}.project-display h1{font-size:clamp(38px,3.65vw,70px);font-weight:300;color:var(--heading);line-height:1.2;letter-spacing:-.035em}.project-action{display:flex;flex-direction:column;gap:16px;align-items:flex-end}.project-action>span{color:rgba(255,255,255,.25);font-size:16px}.project-demo-link{display:flex;align-items:center;justify-content:space-between;gap:32px;border-bottom:1px solid #555;padding:12px 0;color:rgba(255,255,255,.75);transition:border-color .22s ease-in-out}.project-demo-link span{color:#777;transition:color .22s ease-in-out}.project-demo-link:hover{border-color:#aaa}.project-demo-link:hover span{color:#fff}
.project-art{width:100%;max-width:600px;aspect-ratio:1;position:relative;margin-top:32px;overflow:hidden}.sonos-study{display:flex;flex-direction:column;justify-content:center;gap:32px}.sonos-entry-list{display:flex;justify-content:space-between;gap:20px}.sonos-entry{font-size:20px;color:#444;border-top:1px solid #303030;flex:1;padding-top:12px;transition:color .8s ease-in-out,border-color .8s ease-in-out}.sonos-entry.is-current{color:#aaa;border-color:#999}.speaker-pair{display:flex;align-items:center;justify-content:space-between;gap:20px;height:55%;min-height:150px}.speaker{width:28%;height:100%;border:1px solid #3e3e3e;border-radius:38% 38% 8% 8%;padding:22px 12px 10px;display:flex;flex-direction:column;gap:12px;background:#171717}.speaker-grille{flex:1;background-image:radial-gradient(#535353 .7px,transparent .8px);background-size:5px 5px;border-radius:40% 40% 0 0;mask-image:linear-gradient(transparent,#000 15%,#000 80%,transparent)}.speaker>span{font-size:16px;text-align:center;color:#5d5d5d}.signal-wave{height:60%;display:flex;gap:4px;align-items:center;flex:1;justify-content:center}.signal-wave i{display:block;height:var(--height);width:2px;flex:none;background:#777;transform:scaleY(.4);animation:sonos-signal 3s ease-in-out infinite;animation-delay:calc(var(--bar) * -.14s)}.sonos-playing{display:flex;align-items:center;justify-content:center;gap:16px;color:#555;font-size:16px}.play-symbol{font-size:14px;color:#888}
.carrier-study canvas{display:block;width:100%;height:100%}.carrier-spectrum{position:absolute;bottom:42px;left:5%;right:5%;height:46px;display:flex;align-items:flex-end;justify-content:space-between;gap:6px;opacity:.45}.carrier-spectrum i{height:var(--height);width:2px;background:#647b90;animation:sonos-signal 4s ease-in-out infinite;animation-delay:calc(var(--bar) * -.11s)}.carrier-study-caption{position:absolute;bottom:0;left:0;width:100%;text-align:center;color:#52606c;font-size:16px}
@keyframes sonos-signal{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@media(min-width:1300px){.project-panel{height:calc(100svh - 125px);min-height:780px}.project-art{max-height:calc(100svh - 480px);min-height:260px;aspect-ratio:1;margin-top:auto}.sonos-study{max-height:520px}}
@media(max-width:1050px){.portfolio-header{padding-inline:32px;gap:24px}.portfolio-header nav{margin-left:auto;gap:24px}.project-panel{column-gap:64px}.project-action{align-items:flex-start}.project-action>span{font-size:16px}.project-art{margin-top:32px}.project-display h1{font-size:44px}}
@media(max-width:800px){.portfolio-header{height:auto;min-height:52px;flex-wrap:wrap;gap:16px;padding:16px 24px}.portfolio-header nav{margin:0;gap:20px;flex-wrap:wrap}.portfolio-header nav a:first-child,.portfolio-header nav a:nth-child(2){display:none}.project-navigation{padding-top:24px}.project-panel{display:flex;flex-direction:column;padding-top:32px;padding-bottom:48px;gap:32px;min-height:0}.project-display{order:-1;gap:32px}.project-display h1{font-size:44px}.project-action{align-items:flex-start}.project-copy{max-width:100%}.project-art{max-width:480px;align-self:center;margin-top:32px}.project-copy p+p{margin-top:24px}.sonos-study{min-height:340px}.sonos-entry-list{gap:16px}.project-navigation>span{display:none}.project-navigation{justify-content:flex-start}.project-tabs{gap:32px}}
@media(max-width:420px){.portfolio-header{justify-content:space-between;gap:10px}.portfolio-home{font-size:16px}.portfolio-header nav{gap:16px;font-size:16px}.project-display h1{font-size:40px}.project-action>span{font-size:16px}.sonos-entry{font-size:18px}.sonos-playing{font-size:16px}.project-tabs{gap:32px}.speaker{padding-inline:8px}.signal-wave{gap:3px}.project-demo-link{font-size:20px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.project-panel{scroll-margin-top:148px}
@media(min-width:801px){.project-panel{height:calc(100svh - 130px);min-height:590px;padding-top:32px;padding-bottom:32px;grid-template-rows:minmax(0,1fr)}.project-insight,.project-display{min-height:0}.project-copy{flex:none}.project-art{height:auto;flex:1 1 0;aspect-ratio:auto;max-height:520px;min-height:160px;margin-top:24px}.sonos-study{gap:24px}.speaker-pair{height:auto;min-height:110px;flex:1;max-height:340px}.carrier-study canvas{position:absolute;inset:0}}