@font-face{font-family:'Oswald';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/oswald-600-latin.woff2') format('woff2')}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400 600;font-display:swap;src:url('../assets/fonts/source-sans-3-latin.woff2') format('woff2')}
/* V30 metal global navigation only. The approved product and video panel is untouched. */
#global{left:22%;top:1.6%;width:56%;height:7.2%;padding:0 2.4%;gap:.5%;background:none;border:12px solid transparent;border-image:url('../assets/interface-v30/fascia-metal.webp') 55 90 fill / 12px 18px / 0 stretch;z-index:8;filter:drop-shadow(0 3px 3px #20171080)}
#global button{font-family:'Oswald','Arial Narrow',sans-serif;font-weight:600;font-size:clamp(12px,1.05vw,20px);letter-spacing:.09em;padding:.7em .3em;white-space:nowrap;position:relative;color:#f4eddc;min-height:30px}
#global button::after{content:'';position:absolute;left:22%;right:22%;bottom:.1em;height:2px;background:#d5b57c;transform:scaleX(0);transition:transform .14s}
#global button:hover::after,#global button[aria-expanded=true]::after,#global button:focus-visible::after{transform:scaleX(1)}
#motion{top:auto;bottom:15.6%;left:2%;max-width:none;align-items:center;gap:0;padding:4px 14px;background:none;border:9px solid transparent;border-image:url('../assets/interface-v30/transport-metal.webp') 110 200 fill / 10px 18px / 0 stretch;z-index:6}
#motion button{border:0;box-shadow:none;background:none;color:#f4eddc;padding:5px 9px;font:600 clamp(10px,.72vw,14px)/1.3 'Oswald','Arial Narrow',sans-serif;letter-spacing:.035em;min-height:28px}
#motion button:hover{color:#fff7e5;text-decoration:underline;text-underline-offset:4px}
#motion #skip{display:none}
#motion button+button:not([hidden]){border-left:1px solid #ece0c436}
#status{bottom:15%;left:auto;right:2%;max-width:38%;background:#2f251ad9;color:#f2e3c6;border-radius:2px;padding:8px 11px;font:12px/1.4 'Oswald','Arial Narrow',sans-serif;pointer-events:none;z-index:5}
#status:empty{display:none}
#stage[data-state=idle] #brand{width:51%;left:24.5%;top:48%;filter:drop-shadow(0 4px 3px #21160e50)}
#utility{width:min(890px,90vw);max-width:none;max-height:88vh;padding:0;border:0;background:transparent;overflow:visible;box-shadow:none;color:#f4eddc}
#utility::backdrop{background:#231b12a3;backdrop-filter:blur(3px)}
.utility-surface{position:relative;max-height:86vh;overflow:auto;padding:42px 52px 30px;background:#373833;border:18px solid transparent;border-image:url('../assets/interface-v30/utility-metal.webp') 110 110 fill / 18px / 0 stretch;box-shadow:0 18px 65px #100b08aa;scrollbar-color:#afa590 #333631}
.utility-eyebrow{margin:0 0 7px;font:600 11px/1.2 'Oswald','Arial Narrow',sans-serif;letter-spacing:.19em;color:#d6c5a5}
#utility-title{margin:0;font:600 34px/1.1 'Oswald','Arial Narrow',sans-serif;letter-spacing:.025em}
#utility-intro{margin:10px 0 25px;font:19px/1.5 'Source Sans 3',Arial,sans-serif}
#utility-close{color:#f4eddc;position:absolute;top:8px;right:14px;float:none;border:0;background:none;font:28px/1 monospace;padding:8px;min-width:44px;min-height:44px}
#utility-content{font:19px/1.55 'Source Sans 3',Arial,sans-serif}
.menu-units{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.menu-unit{padding:0 0 12px;min-width:0}
.menu-unit+.menu-unit{border-left:1px solid #ece0c436;padding-left:32px}
.menu-unit img{display:block;width:100%;height:70px;object-fit:contain;object-position:left center;filter:brightness(0) invert(1);margin-bottom:18px}
.menu-unit p{margin:9px 0}
.menu-unit-kind{font:600 12px/1.5 'Oswald','Arial Narrow',sans-serif;letter-spacing:.06em}
.menu-tag{display:block;font:600 12px/1.5 'Oswald','Arial Narrow',sans-serif;letter-spacing:.08em;color:#d7c9b1;margin:18px 0 10px}
.menu-action,#utility-back{display:inline-flex;align-items:center;min-height:42px;padding:7px 0;border:0;border-bottom:2px solid #ba9761;color:#f4eddc;background:none;font:600 16px/1.4 'Oswald','Arial Narrow',sans-serif;text-align:left;cursor:pointer}
.menu-action:hover,#utility-back:hover{color:#fff7e5;border-color:currentColor}
.menu-note{border-top:1px solid #ece0c436;padding-top:18px;font-size:13px;line-height:1.5;color:#e0d8c9}
.menu-actions{display:flex;gap:28px;margin-top:25px}
#utility-content details{border-top:1px solid #ece0c436;padding:12px 0}
#utility-content summary{cursor:pointer;font:600 18px/1.5 'Oswald','Arial Narrow',sans-serif}
#utility-content details p{margin:10px 0 0;max-width:65ch}
.utility-footer{margin-top:20px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #ece0c436;padding-top:10px}
.utility-footer small{font:11px/1.4 'Oswald','Arial Narrow',sans-serif;color:#d3c9b6}
.no-script-content{padding:28px;max-width:900px;margin:auto;color:#f4e7cf}
@media(prefers-reduced-motion:reduce){#global button::after{transition:none}}

#global button,#motion button,#utility{text-shadow:0 1px 2px #131613}
#global button:focus-visible,#motion button:focus-visible,#utility button:focus-visible,#utility summary:focus-visible{outline:2px solid #f7e1ac;outline-offset:4px}
#utility-content strong{font-weight:600}

#global .pilot-light{position:absolute;left:3.5%;top:50%;transform:translateY(-50%);width:clamp(18px,1.6vw,30px);height:clamp(18px,1.6vw,30px);object-fit:contain;pointer-events:none;user-select:none}

/* V31: hardware is independent of the plate so its desktop size stays legible. */
.hardware-screw{position:absolute;display:block;width:28px;height:28px;background:url('../assets/interface-v31/screw.webp') center/contain no-repeat;pointer-events:none;user-select:none;z-index:2}
.screw-left{left:7px;top:50%;transform:translateY(-50%)}
.screw-right{right:7px;top:50%;transform:translateY(-50%)}
#global{left:9%;width:82%;height:clamp(68px,5.3vw,96px);padding:0 48px 0 100px;gap:12px;border:12px solid transparent;border-image:url('../assets/interface-v31/fascia.webp') 30 80 fill / 12px 28px / 0 stretch}
#global button{font-size:clamp(17px,1.5vw,25px);letter-spacing:.045em;min-height:40px;padding:5px 4px}
#global .pilot-light{left:47px;width:36px;height:36px}
#motion{min-height:68px;width:max-content;max-width:90%;padding:6px 40px;gap:4px;border:10px solid transparent;border-image:url('../assets/interface-v31/transport.webp') 50 100 fill / 14px 28px / 0 stretch}
#motion button{font-size:clamp(14px,1.05vw,18px);min-height:36px;padding:6px 10px}
#motion .screw-left{left:5px}#motion .screw-right{right:5px}
#utility{width:min(1000px,92vw);isolation:isolate}
.utility-surface{border:30px solid transparent;border-image:url('../assets/interface-v31/utility.webp') 105 100 fill / 32px / 0 stretch;background:#1c1814;padding:38px 40px 26px;scrollbar-color:#9c8567 #211c17}
#utility>.hardware-screw{width:36px;height:36px;z-index:3}
.corner-tl{top:12px;left:12px}.corner-tr{top:12px;right:12px}.corner-bl{bottom:12px;left:12px}.corner-br{bottom:12px;right:12px}
#utility-close{right:18px;top:14px}
#utility-title{font-size:38px}
/* Increased fascia remains clear of the existing product presentation. */
#panel{top:calc(1.6% + clamp(68px,5.3vw,96px) + 12px)}
#stage:not([data-state=idle]) #brand{top:calc(1.6% + clamp(68px,5.3vw,96px) + 12px)}

/* User-confirmed V31 rail replacement: one continuous plate for two products. */
#rail{height:clamp(96px,6.63vw,142px);padding:12px 46px;background:none;border:10px solid transparent;border-image:url('../assets/interface-v31/fascia.webp') 30 80 fill / 14px 30px / 0 stretch;justify-content:space-evenly}
#rail::before,#rail::after{content:'';position:absolute;top:4px;bottom:4px;width:32px;pointer-events:none;background:url('../assets/interface-v31/screw.webp') center top/32px 32px no-repeat,url('../assets/interface-v31/screw.webp') center bottom/32px 32px no-repeat}
#rail::before{left:4px}#rail::after{right:4px}
#rail button{width:42%;height:100%;padding:0 12px;background:none;border:0}
#rail img{max-width:420px;margin:auto;display:block;filter:brightness(0) invert(1);object-fit:contain}
#motion{bottom:calc(clamp(96px,6.63vw,142px) + 12px)}
#status{bottom:calc(clamp(96px,6.63vw,142px) + 12px)}

/* Preserve wordmark display height and keep enlarged hardware outside product panels. */
#rail{padding-top:2px;padding-bottom:2px}
#panel{max-height:calc(100% - clamp(96px,6.63vw,142px) - clamp(68px,5.3vw,96px) - 1.6% - 24px)}
#stage:not([data-state=idle]):has(#panel[data-side=left]) #motion{left:auto;right:2%}
#stage:not([data-state=idle]):has(#panel[data-side=left]) #brand{left:auto;right:3%}
#stage:not([data-state=idle]) #status{left:2%;right:auto;max-width:38%;bottom:calc(clamp(96px,6.63vw,142px) + 88px)}
#stage:not([data-state=idle]):has(#panel[data-side=left]) #status{left:auto;right:2%}

/* V31r4: match the existing main logo's cream lettering, RGB 249/230/193. */
:root{--brand-cream:#f9e6c1}
#global button,#motion button,#motion button:hover,#status,#utility,#utility-close,.utility-eyebrow,.menu-tag,.menu-action,.menu-action:hover,#utility-back,#utility-back:hover,.menu-note,.utility-footer small,.no-script-content{color:var(--brand-cream)}
#hotspots button::after{color:var(--brand-cream)}
#rail img,.menu-unit img{filter:url('../assets/interface-v31/logo-cream-filter.svg#brand-cream')}

/* V32: Freakbeat rail uses the original device colour pigments and coverage. */
#rail button[data-product="freakbeat-rhythm-unit"] img{filter:none}

/* V34: independently tightened fasteners, stable angles across reloads. */
.hardware-screw{rotate:var(--screw-angle,0deg)}
.screw-left,.screw-right{rotate:none;transform:translateY(-50%) rotate(var(--screw-angle,0deg))}
#global .screw-left{--screw-angle:-27deg}#global .screw-right{--screw-angle:41deg}
#motion .screw-left{--screw-angle:63deg}#motion .screw-right{--screw-angle:-12deg}
#utility .corner-tl{--screw-angle:18deg}#utility .corner-tr{--screw-angle:74deg}
#utility .corner-bl{--screw-angle:-39deg}#utility .corner-br{--screw-angle:9deg}
#rail::before,#rail::after{display:none}
#rail>.hardware-screw{width:32px;height:32px}
#rail>.corner-tl{left:4px;top:4px;--screw-angle:32deg}
#rail>.corner-tr{right:4px;top:4px;--screw-angle:-48deg}
#rail>.corner-bl{left:4px;bottom:4px;--screw-angle:79deg}
#rail>.corner-br{right:4px;bottom:4px;--screw-angle:-17deg}

/* V36: shared fascia alignment, readable record-sleeve typography. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/fraunces-700-latin.woff2') format('woff2')}
#stage{--fascia-inset:9%;--product-panel-width:41%}
#panel{right:var(--fascia-inset);width:var(--product-panel-width);height:calc(100% - clamp(96px,6.63vw,142px) - clamp(68px,5.3vw,96px) - 1.6% - 24px);transform:translateX(125%)}
#panel[data-side=left]{left:var(--fascia-inset);right:auto;transform:translateX(-125%)}
#panel.open{transform:translateX(0)}
#stage:not([data-state=idle]) #brand{width:16%;left:20%;right:auto;top:13.2%;transform:none}
#stage:not([data-state=idle]):has(#panel[data-side=left]) #brand{left:57%;right:auto;top:14%}
#brand{transition:width .55s cubic-bezier(.2,.7,.3,1),left .55s cubic-bezier(.2,.7,.3,1),top .55s cubic-bezier(.2,.7,.3,1),transform .55s cubic-bezier(.2,.7,.3,1)}
#global button{font-family:'Fraunces',Georgia,serif;font-size:clamp(21px,1.65vw,30px);font-weight:700;letter-spacing:.005em}
#utility-title{font-family:'Fraunces',Georgia,serif;font-size:42px}
#kicker,#panel h2{font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:clamp(20px,1.45vw,27px);line-height:1.25;letter-spacing:0}
#subline{font:600 clamp(16px,1.05vw,20px)/1.3 'Source Sans 3',sans-serif;margin:8px 0 12px}
#about p,#availability,#purchase{font:400 clamp(17px,1.15vw,22px)/1.48 'Source Sans 3',sans-serif;margin:9px 0}
#panel h2{margin:18px 0 8px}
#play{font:600 clamp(15px,1vw,19px)/1.2 'Source Sans 3',sans-serif;color:var(--brand-cream);text-shadow:0 1px 2px #17120d}
#play small{font-size:.75em}
#panel-wordmark{height:clamp(58px,4.3vw,82px);max-width:76%;margin:0 auto 10px}
#panel[data-product="surf-reverb-unit"] #panel-wordmark{height:clamp(48px,3.5vw,67px)}
#panel[data-product="freakbeat-rhythm-unit"] #panel-wordmark{width:68%;height:auto;max-height:82px}
#bezel{width:90%;max-width:460px;margin:14px auto}
#rail button[data-product="surf-reverb-unit"] img{width:76%;height:84%;max-width:360px}
#rail button[data-product="freakbeat-rhythm-unit"] img{width:92%;height:94%;max-width:450px}
.menu-unit[data-product="freakbeat-rhythm-unit"] img{height:100px;filter:none}
.menu-unit[data-product="surf-reverb-unit"] img{height:75px}
.menu-unit-kind,.menu-tag{font-size:16px}
#utility-content,#utility-intro{font-size:21px}
.menu-action,#utility-back{font-size:19px}
.menu-note{font-size:17px}
#motion button{font-size:clamp(15px,1.1vw,20px)}
#status{font:600 clamp(13px,.9vw,16px)/1.35 'Source Sans 3',sans-serif}
#stage[data-static-product-visit=true] #room{opacity:0}