.intro{isolation:isolate;overflow:hidden}
#hero-spectrum{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.8;mask-image:linear-gradient(transparent,#000 14%,#000 90%,transparent)}
.intro-copy,.intro-bottom{position:relative;z-index:1}
.hero-frame{z-index:1}
.hero-lead{display:grid;grid-template-columns:minmax(0,1fr) clamp(170px,14.5vw,220px);gap:22px;align-items:center}
.hero-lead-copy{min-width:0}
.hero-lead .hero-promise{font-size:clamp(38px,3.5vw,54px);line-height:1.05}
.hero-lead .hero-tagline{font:italic 15px/1.65 Arial,sans-serif;color:#bdc7af;margin:0 0 24px}
.hero-lead .primary-action{gap:20px;padding:13px 15px;font-size:9px;white-space:nowrap}
.soundtrack-card.audio-player{display:block;min-width:0;max-width:280px;width:100%;padding:0;align-self:center;border:1px solid #566844;background:#11180ff2;box-shadow:0 10px 30px #0003}
.soundtrack-stamp{padding:10px 8px;border-bottom:1px solid #47573a;color:#d2e7a3;background:#27311d;font:10px/1.5 var(--mono);letter-spacing:1px;text-align:center}
.soundtrack-stamp span{display:block;font-size:9px;letter-spacing:1.8px;color:#99b276}
.soundtrack-art{position:relative;aspect-ratio:1;background:#070907;overflow:hidden}
.soundtrack-art>img{display:block;width:100%;height:100%;object-fit:contain}
.soundtrack-album{position:absolute;bottom:9px;left:9px;right:9px;display:flex;justify-content:space-between;gap:8px;padding:8px;border:1px solid #799555;background:#10170ee8;color:#d2e7a3;font:10px/1.4 var(--mono);letter-spacing:.5px}
.soundtrack-album:hover{background:#344429;color:#ecffcc;border-color:#c8dc8e}
.soundtrack-album:focus-visible{outline-offset:-3px}
.soundtrack-info{padding:12px 12px 2px}
.soundtrack-info h3{margin:0;font:bold 17px/1.25 var(--mono);letter-spacing:-.5px;color:#e4edce}
.soundtrack-info p{margin:5px 0 0;color:#aabf8d;font:12px/1.4 var(--mono);overflow-wrap:anywhere}
.soundtrack-controls{display:flex;gap:10px;align-items:center;padding:6px 10px 0}
.soundtrack-card .audio-toggle{width:42px;height:42px;flex-shrink:0;border:1px solid #607044;background:#28341f}
.soundtrack-card .audio-toggle:hover{background:#3a4b2c}
.soundtrack-card .audio-toggle svg{width:14px;height:14px}
.soundtrack-volume{display:flex;gap:6px;align-items:center;flex:1;min-width:0;color:#9eb97a}
.soundtrack-volume>svg{width:18px;height:18px;flex-shrink:0}
.soundtrack-card .audio-volume{width:100%;min-width:0;height:44px}
.soundtrack-card .audio-volume::-webkit-slider-thumb{width:10px;height:16px;margin-top:-6.5px}
.soundtrack-card .audio-volume::-moz-range-thumb{width:10px;height:16px}
.soundtrack-status{display:block;min-height:29px;padding:5px 12px 9px;font:9px/1.6 var(--mono);letter-spacing:.7px;color:#8fa974}
.soundtrack-card[data-playing=true]{border-color:#a3bd76}
.soundtrack-card[data-playing=true] .soundtrack-status{color:#d2e7a3}
@media(max-width:1180px){.hero-lead{gap:16px}.hero-lead .hero-promise{font-size:38px}.soundtrack-info h3{font-size:16px}}
@media(max-width:960px){.intro{grid-template-columns:1fr;row-gap:28px}.intro-copy>.hero-premise{max-width:680px}.hero-lead{grid-template-columns:minmax(0,1fr) 220px;gap:28px;max-width:720px}.hero-lead .hero-promise{font-size:54px}.hero-frame{height:340px;min-height:0}.intro-bottom{margin-top:0}}
@media(max-width:650px){.hero-lead{grid-template-columns:minmax(0,1fr) 180px;gap:20px}.hero-lead .hero-promise{font-size:38px}.hero-lead .hero-tagline{font-size:14px}.hero-frame{margin-top:28px;height:260px}.intro-bottom{margin-top:24px}}
@media(max-width:540px){.hero-lead{grid-template-columns:1fr;gap:28px}.hero-lead .hero-promise{font-size:45px}.soundtrack-card.audio-player{justify-self:center;max-width:270px}.soundtrack-info h3{font-size:18px}.soundtrack-info p{font-size:14px}.soundtrack-stamp{font-size:12px}.soundtrack-stamp span{font-size:10px}.soundtrack-album{font-size:12px}.soundtrack-status{font-size:10px}}

.intro-copy>.hero-portfolio{display:flex;width:fit-content;max-width:100%;gap:20px;margin:0 0 24px;padding:13px 16px;font-size:10px;line-height:1.65;letter-spacing:.5px}
.hero-portfolio>span{flex-shrink:0}
@media(max-width:650px){.intro-copy>.hero-portfolio{font-size:10px;padding:12px 14px;gap:12px}}
