/* HOMEFRONT Sound Detective: a compact, accessible listening cabinet.
   Scoped to Compass. Original visual waveform motifs, NOT acoustic measurements. */
.hf-sound-detective{--sd-navy:var(--hf-navy,#1e3341);--sd-night:var(--hf-night,#13232e);--sd-cream:var(--hf-cream,#f4f0e8);--sd-brass:var(--hf-brass,#bb9259);--sd-gold:var(--hf-gold,#eaca92);--sd-gold-light:#ffe1ae;background:var(--sd-cream);color:var(--sd-navy)}
.hf-sound-detective *, .hf-sound-detective *:before, .hf-sound-detective *:after{box-sizing:border-box}
.hf-sound-detective button{font:inherit;cursor:pointer}
.hf-sound-detective [hidden]{display:none!important}
.hf-sound-detective .eyebrow{font-size:12px}
/* Focus: navy on the light panels, pale gold on the navy ones (both at least 3:1 against the surface). */
.hf-sound-detective :is(button,a,h3[tabindex]):focus-visible{outline:3px solid var(--sd-navy);outline-offset:3px}
.hf-sound-detective :is(.sd-hero,.sd-spectrogram,.sd-sources) :is(button,a):focus-visible{outline-color:var(--sd-gold-light)}
.sd-hero{background:linear-gradient(125deg,#0f2431,#213e4f 60%,#132b38);color:var(--sd-cream)}
.sd-hero-grid{padding-block:118px 92px;display:grid;grid-template-columns:1.02fr .98fr;gap:7%;align-items:center}
.sd-hero .hf-crumb,.sd-hero .hf-crumb a{color:#e3e9e9}
.sd-hero .hf-crumb{font-size:12px}
.sd-hero .eyebrow{color:var(--sd-gold);letter-spacing:.16em;margin-top:42px}
.sd-hero h1{font:500 clamp(53px,6.3vw,92px)/1 Editorial,Georgia,serif;letter-spacing:-.035em;margin:19px 0 24px}
.sd-hero h1 em{color:var(--sd-gold);font-style:normal}
.sd-hero p:not(.eyebrow){font:400 16px/1.85 Manrope,Arial,sans-serif;max-width:590px;color:#e3e7e6}
.sd-hero-action{display:inline-flex;align-items:center;gap:36px;color:#13232e;background:var(--sd-gold);text-decoration:none;margin-top:26px;min-height:47px;border-radius:28px;padding:14px 23px;font:700 13px Manrope,Arial,sans-serif}
.sd-hero .sd-hero-fine{margin-top:28px!important;font:650 12px/1.6 Manrope,Arial,sans-serif!important;letter-spacing:.11em;color:#eaca92!important}
.sd-hero-poster{position:relative;height:360px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;border:1px solid #c4a271ba;padding:28px;background:linear-gradient(#ffffff0d 1px,transparent 1px),linear-gradient(90deg,#ffffff0d 1px,transparent 1px),radial-gradient(circle at center,#4f6b6c66,transparent 60%),#162f3d;background-size:25px 25px,25px 25px,auto,auto;box-shadow:18px 20px 0 #06162184}
.sd-poster-label,.sd-poster-end{font:700 12px/1.7 Manrope,Arial,sans-serif;letter-spacing:.14em;color:#eaca92}
.sd-poster-lines{display:flex;align-items:center;justify-content:space-between;gap:5px;height:165px;max-width:100%}
.sd-poster-lines i{display:block;min-width:2px;flex:1;background:linear-gradient(#ffe1ae,#bb9259);height:20%;box-shadow:0 0 18px #eaca9266}
.sd-poster-lines i:nth-child(2),.sd-poster-lines i:nth-child(9){height:48%}
.sd-poster-lines i:nth-child(3),.sd-poster-lines i:nth-child(8){height:68%}
.sd-poster-lines i:nth-child(4),.sd-poster-lines i:nth-child(7){height:95%}
.sd-poster-lines i:nth-child(5),.sd-poster-lines i:nth-child(11){height:54%}
.sd-poster-lines i:nth-child(6){height:30%}
.sd-poster-lines i:nth-child(10){height:86%}
.sd-poster-lines i:nth-child(12){height:38%}
.sd-intro{padding-block:78px 84px;display:grid;grid-template-columns:.2fr .4fr .4fr;gap:28px}
.sd-intro>.eyebrow{color:#805d2f}
.sd-intro h2,.sd-lab-head h2,.sd-index-head h2,.sd-sources h2{font:500 clamp(36px,4.5vw,61px)/1.08 Editorial,Georgia,serif;letter-spacing:-.025em;margin:0;text-wrap:balance}
.sd-intro>p:last-child{font:400 16px/1.8 Manrope,Arial,sans-serif;color:#46535b;margin:0;text-wrap:pretty}
.sd-intro>p:last-child strong{color:var(--sd-navy)}
.sd-lab{padding-block:80px 99px;background:#ece5d9}
.sd-lab-head{max-width:800px}
.sd-lab-head>.eyebrow{color:#76572f}
.sd-lab-head h2{margin:15px 0}
.sd-lab-head>p:last-child{font:400 15px/1.8 Manrope,Arial,sans-serif;color:#46535b}
.sd-patterns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:35px 0 16px}
.sd-patterns button{background:#faf6ed;border:1px solid #b9a888;min-width:0;padding:18px;text-align:left;min-height:124px;display:flex;flex-direction:column;gap:8px;color:var(--sd-navy)}
.sd-patterns button:hover{border-color:#86643b}
.sd-patterns button[aria-pressed=true]{background:#e5d5b9;border-color:#8f6c3e;box-shadow:inset 0 0 0 2px #bb9259}
.sd-patterns button>span{font:700 12px/1.5 Manrope,Arial,sans-serif;letter-spacing:.11em;color:#6e5029}
.sd-patterns button strong{font:500 25px/1.15 Editorial,Georgia,serif}
.sd-patterns button small{font:500 13px/1.5 Manrope,Arial,sans-serif;color:#46535b}
.sd-workbench{display:grid;grid-template-columns:1.03fr .97fr;border:1px solid #c8af81;background:#1c3542;min-height:542px}
.sd-spectrogram{padding:30px;min-width:0;color:#e9e2d4;background:linear-gradient(#ffffff0c 1px,transparent 1px),linear-gradient(90deg,#ffffff0c 1px,transparent 1px),#193542;background-size:25px 25px;display:flex;flex-direction:column}
.sd-instrument{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 20px;font:700 12px/1.5 Manrope,Arial,sans-serif;letter-spacing:.1em;color:#eaca92;margin:0}
.sd-wave{display:flex;align-items:center;gap:3px;height:186px;margin:58px 0 8px;padding:13px 10px;border-bottom:1px solid #eaca924f;border-top:1px solid #eaca924f}
.sd-wave span{display:block;background:#eaca92;flex:1;min-width:2px;height:13%;box-shadow:0 0 9px #eaca923b;transition:height .18s,background .18s}
.sd-wave[data-wave=tap] span:nth-child(4),.sd-wave[data-wave=tap] span:nth-child(14){height:98%}
.sd-wave[data-wave=tap] span:nth-child(3),.sd-wave[data-wave=tap] span:nth-child(5),.sd-wave[data-wave=tap] span:nth-child(13),.sd-wave[data-wave=tap] span:nth-child(15){height:57%}
.sd-wave[data-wave=tap] span:nth-child(6),.sd-wave[data-wave=tap] span:nth-child(16){height:32%}
.sd-wave[data-wave=hum] span{height:49%}
.sd-wave[data-wave=hum] span:nth-child(3n){height:41%}
.sd-wave[data-wave=hum] span:nth-child(4n){height:56%}
.sd-wave[data-wave=rattle] span{height:18%}
.sd-wave[data-wave=rattle] span:nth-child(3),.sd-wave[data-wave=rattle] span:nth-child(7),.sd-wave[data-wave=rattle] span:nth-child(8),.sd-wave[data-wave=rattle] span:nth-child(15),.sd-wave[data-wave=rattle] span:nth-child(21){height:89%}
.sd-wave[data-wave=rattle] span:nth-child(5),.sd-wave[data-wave=rattle] span:nth-child(19){height:62%}
/* The text-only card draws a flat, dashed line: there is no tone to picture. */
.sd-wave[data-wave=silent] span{height:2px;background:transparent;box-shadow:none;border-top:2px dashed #eaca9299}
.sd-wave-label{font:500 25px/1.3 Editorial,Georgia,serif;color:#f6d6a0;margin:15px 0 28px}
.sd-player{display:flex;flex-wrap:wrap;gap:10px}
.sd-player button{min-height:45px;border-radius:26px;border:1px solid #eaca92;color:#13232e;background:#eaca92;padding:12px 19px;font:700 13px/1.5 Manrope,Arial,sans-serif}
.sd-player button[data-sd-stop]{background:transparent;color:#f4f0e8}
.sd-player button[data-sd-play][aria-pressed=true]{background:#ffe1ae}
.sd-player-status{font:600 14px/1.7 Manrope,Arial,sans-serif;color:#efdfbf;margin:21px 0 0;min-height:48px}
.sd-volume{font:400 13px/1.7 Manrope,Arial,sans-serif;color:#c9d6d8;margin:10px 0 0}
.sd-analysis{padding:clamp(26px,3.5vw,49px);background:#f9f5ed;color:#1e3341;min-width:0}
.sd-analysis .eyebrow{color:#7a5a30}
.sd-analysis h3{font:500 clamp(38px,3.9vw,53px)/1.1 Editorial,Georgia,serif;margin:16px 0;text-wrap:balance}
.sd-context{display:inline-block;padding:8px 12px;background:#e7d8bf;font:700 12px/1.5 Manrope,Arial,sans-serif;color:#664826;letter-spacing:.06em}
.sd-analysis h4{font:500 27px/1.15 Editorial,Georgia,serif;margin:28px 0 12px}
.sd-analysis>p:not(.eyebrow):not(.sd-context):not(.sd-limit){font:400 15px/1.8 Manrope,Arial,sans-serif;color:#46535b}
.sd-science{margin-top:24px;padding:19px;border-left:3px solid #bb9259;background:#eee4d5}
.sd-science .eyebrow{color:#6e5029}
.sd-science p:not(.eyebrow){font:400 15px/1.75 Manrope,Arial,sans-serif;color:#33464f}
.sd-science a{font:700 13px/1.5 Manrope,Arial,sans-serif;color:#674a24}
.sd-limit{font:500 14px/1.75 Manrope,Arial,sans-serif;color:#5a4a3b;margin-top:20px}
.sd-noscript{padding:19px;color:#1e3341;background:#fff9e9;font:400 15px/1.7 Manrope,Arial,sans-serif}
.sd-index{padding-block:95px 106px}
.sd-index-head{max-width:785px}
.sd-index-head h2{margin:13px 0 20px}
.sd-index-head>p:not(.eyebrow){font:400 16px/1.8 Manrope,Arial,sans-serif;color:#46535b}
.sd-index-head a{color:#674a24;text-underline-offset:3px}
.sd-index-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:35px}
.sd-text-card{border:1px solid #d7cfc2;background:#faf7f1;padding:30px}
.sd-text-card[data-sd-text-only]{border-color:#b9a888;background:#f6efe2}
.sd-text-card h3{font:500 30px/1.15 Editorial,Georgia,serif;margin:15px 0;text-wrap:balance}
.sd-text-card>p:not(.eyebrow){font:400 15px/1.8 Manrope,Arial,sans-serif;color:#46535b}
.sd-text-card .sd-card-lesson{color:#33464f}
.sd-text-card .sd-card-lesson b{color:var(--sd-navy);font-weight:700}
.sd-text-card .sd-card-limit{font:500 14px/1.75 Manrope,Arial,sans-serif;color:#5a4a3b;margin-top:13px}
.sd-text-card a{display:inline-block;margin-top:12px;color:#674a24;font:700 13px/1.5 Manrope,Arial,sans-serif}
.sd-sources{background:#142a36;color:#f4f0e8;padding-block:80px 73px}
.sd-sources .eyebrow{color:#eaca92}
.sd-sources h2{margin:14px 0 35px}
.sd-source-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sd-source-grid a{min-width:0;padding:24px;background:#274353;border:1px solid #eaca9260;text-decoration:none;display:flex;flex-direction:column;gap:12px;color:#f4f0e8}
.sd-source-grid strong{font:650 14px/1.5 Manrope,Arial,sans-serif}
.sd-source-grid span{font:400 14px/1.7 Manrope,Arial,sans-serif;color:#dce5e5}
.sd-source-grid b{color:#eaca92;font:700 16px Manrope,Arial,sans-serif}
.sd-view{margin:30px 0 0;max-width:900px;font:400 16px/1.8 Manrope,Arial,sans-serif;color:#e8eeec}
.sd-view strong{color:#ffe1ae}
.sd-disclaimer{border-top:1px solid #eaca9244;padding-top:22px;margin-top:24px;font:400 14px/1.8 Manrope,Arial,sans-serif;max-width:900px;color:#d6dedc}
.sd-related{display:flex;flex-wrap:wrap;gap:21px;margin:28px 0}.sd-related a{color:#eaca92;text-decoration:none;font:700 13px/1.5 Manrope,Arial,sans-serif;padding:3px 0}
.sd-sources small{font:400 13px/1.75 Manrope,Arial,sans-serif;color:#c9d3d5}
@media(max-width:1000px){.sd-hero-grid,.sd-workbench{grid-template-columns:1fr}.sd-hero-grid{padding-block:96px 66px}.sd-hero-poster{margin-top:52px;height:260px}.sd-patterns{grid-template-columns:repeat(2,minmax(0,1fr))}.sd-patterns button{min-height:101px}.sd-intro{grid-template-columns:1fr 1fr}.sd-intro>.eyebrow{grid-column:1/-1}.sd-spectrogram{min-height:380px}}
@media(max-width:670px){.sd-hero-grid{padding-block:80px 62px}.sd-hero h1{font-size:clamp(43px,11.5vw,65px)}.sd-hero-poster{height:207px;padding:16px}.sd-poster-lines{height:88px}.sd-intro{display:block;padding-block:58px}.sd-intro h2{margin:15px 0}.sd-lab{padding-block:60px 66px}.sd-patterns{gap:7px}.sd-patterns button{padding:13px;min-height:88px}.sd-patterns button strong{font-size:21px}.sd-patterns button small{font-size:12px}.sd-spectrogram{padding:19px;min-height:340px}.sd-wave{margin:35px 0 8px;height:110px}.sd-wave-label{font-size:22px}.sd-analysis{padding:24px}.sd-index{padding-block:65px}.sd-index-grid,.sd-source-grid{grid-template-columns:1fr}.sd-text-card{padding:23px}.sd-sources{padding-block:65px}}
@media(max-width:350px){.sd-patterns button strong{font-size:19px}.sd-wave{height:95px}.sd-player button{padding:11px 13px}}
@media(prefers-reduced-motion:reduce){.hf-sound-detective *,.hf-sound-detective *:before,.hf-sound-detective *:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media print{.sd-hero,.sd-lab{display:none!important}.sd-index-grid{display:block}.sd-text-card{margin-bottom:14px;break-inside:avoid}.sd-sources{background:white;color:#111}.sd-source-grid a{background:white;color:#111}}