/* P017 Tapehead Hi-Fi - desktop. Structure 14, multi-scene WebGL portal: one fixed scene behind the page, the deck at the centre of three chapters. Palette: cream #F2EBDD / oxblood #3A1F1A / signal yellow #E5C61A. */

body{background:var(--c2);color:var(--c1)}
.hero{position:relative;min-height:max(100svh,820px);overflow:hidden}
.hero .hero-stage{position:absolute;inset:0}
.title{font:800 clamp(4.4rem,1.6rem + 7.4vw,10rem)/.82 var(--f-display);letter-spacing:var(--track-display);color:var(--c1)}
.title .serif{font-weight:400;font-style:italic;letter-spacing:-.03em;color:var(--c3)}
.hero .tag{color:var(--on-dark-2)}.hero .lead{color:var(--on-dark-2)}
.glass{background:color-mix(in oklab,var(--c1) 9%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);border:1px solid color-mix(in oklab,var(--c1) 22%,transparent);box-shadow:inset 0 1px 0 color-mix(in oklab,var(--c1) 30%,transparent),0 20px 50px -20px color-mix(in oklab,var(--c2) 70%,transparent);border-radius:22px}
.deck{display:grid;gap:var(--s3);padding:var(--s4);z-index:3}
.vu svg{width:100%;height:auto;display:block}
.vu-arc{fill:none;stroke:var(--on-dark-2);stroke-width:1.5}.vu-red{fill:none;stroke:var(--c3);stroke-width:4}
.vu-ticks line{stroke:var(--on-dark-2);stroke-width:1.4}
.vu-t{font:500 9px var(--f-mono);fill:var(--on-dark-2)}.vu-l{font:700 14px var(--f-display);fill:var(--c1);text-anchor:middle}
.vu-needle{stroke:var(--c3);stroke-width:2.4;stroke-linecap:round;transform-origin:100px 104px;transform:rotate(-50deg)}
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.key{display:grid;justify-items:center;gap:4px;min-height:60px;padding:8px;border-radius:14px;color:var(--c1);border:1px solid color-mix(in oklab,var(--c1) 20%,transparent);background:color-mix(in oklab,var(--c1) 6%,transparent);transition:transform var(--dur-fast) var(--ease-out),background var(--dur-fast)}
.key span{font:500 var(--fs-xs)/1 var(--f-mono);letter-spacing:var(--track-mono);text-transform:uppercase}
.key .icon{width:20px;height:20px;fill:currentColor;stroke:none}
.key[data-key="eject"] .icon{fill:currentColor}
.key:active{transform:translateY(2px)}
.key[aria-pressed="true"]{background:var(--c3);color:var(--c2);border-color:var(--c3)}
.key:focus-visible{outline:2px solid var(--c3);outline-offset:2px}
.deck-s{color:var(--on-dark-2)}
.tape{position:relative;height:300svh}
.tape .pin{position:sticky;top:0;height:100svh;display:grid;pointer-events:none}
.tape-copy{display:grid;gap:var(--s3);align-content:start}
.tape-copy .tag{color:var(--on-dark-2)}.tp-h{color:var(--c1)}.tp-b{color:var(--on-dark-2)}
.tp-steps{display:flex;gap:var(--s3)}
.tp-steps span{font:500 var(--fs-xs)/1 var(--f-mono);letter-spacing:var(--track-mono);text-transform:uppercase;color:var(--on-dark-2);padding-top:10px;border-top:2px solid var(--line-dark);min-width:4.5rem;transition:color var(--dur-fast),border-color var(--dur-fast)}
.tp-steps span.is-on{color:var(--c1);border-color:var(--c3)}
.inside .tag,.inside .body{color:var(--on-dark-2)}.inside .h2{color:var(--c1)}.inside .h2 .serif{font-style:italic;font-weight:400;color:var(--c3)}
.in-list{margin:0;display:grid}
.in-list div{padding:var(--s4) 0;border-top:1px solid var(--line-dark);display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3)}
.in-list dt{color:var(--on-dark-2)}.in-list dd{margin:0;color:var(--c1);font:600 1.1rem/1 var(--f-body)}
.in-list b{font:800 2.6rem/1 var(--f-display);letter-spacing:-.04em}
.pn-sec{background:var(--c1);color:var(--ink)}

.hero .hero-stage{position:fixed;inset:0;z-index:0}
main>section{position:relative;z-index:1}
.hero-copy{position:absolute;left:var(--gutter);top:calc(var(--s8) + 40px);display:grid;gap:var(--s4);max-width:34rem;z-index:2}
.deck{position:absolute;right:var(--gutter);bottom:var(--s6);width:min(360px,28vw)}
.tape .pin{grid-template-columns:repeat(12,minmax(0,1fr));padding:calc(var(--s8) + 40px) var(--gutter) var(--s6);column-gap:var(--grid-gap)}
.tape-copy{grid-column:1 / span 4}.tp-steps{grid-column:1 / span 4;align-self:end}
.in-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--grid-gap)}
.in-head{grid-column:1 / span 5;display:grid;gap:var(--s3);align-content:start}.in-list{grid-column:7 / span 6}
.inside{background:color-mix(in oklab,var(--c2) 88%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* footer above the fixed deck stage (the stage sits in the hero's z-index:1 context) */
.zk-foot{position:relative;z-index:2}