/* Shared editorial rules. Original analog hardware remains in styles.css. */
:root { --ui-muted: #c4baa7; --ui-line: rgba(239,231,216,.16); --space-unit: 8px; --player-height: 92px; }
[hidden] { display:none !important; }
html { scroll-padding-top:32px; scroll-padding-bottom:calc(var(--player-height) + 24px); }
body { overflow-wrap:break-word; }
a { color:var(--ink); text-underline-offset:5px; }
a:hover { color:var(--amber); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible { outline:2px solid var(--amber); outline-offset:4px; }
#main-content:focus, #live-receiver:focus { outline:none; }
[id], a, button, summary, input { scroll-margin-top:24px; scroll-margin-bottom:calc(var(--player-height) + 24px); }
.site-header { position:relative; z-index:6; padding:16px 20px; }
.site-nav { display:flex; align-items:start; justify-content:center; gap:32px; }
.site-nav > a, .sound-menu > summary { display:flex; align-items:center; min-height:44px; color:var(--ui-muted); font-size:14px; text-decoration:none; padding:8px 4px; border-bottom:1px solid transparent; cursor:pointer; }
.site-nav [aria-current=page], .sound-menu .is-current { color:var(--ink); border-bottom:1px solid var(--amber); }
.sound-menu { position:relative; }
.sound-menu summary { list-style:none; }
.sound-menu summary::-webkit-details-marker { display:none; }
.sound-menu summary .icon { width:16px; height:16px; margin-left:8px; }
.sound-menu[open] summary .icon, .listening-guide[open] summary .icon { transform:rotate(180deg); }
.sound-menu nav { position:absolute; top:52px; left:50%; transform:translateX(-50%); width:220px; padding:8px; background:#15130f; border:1px solid var(--ui-line); }
.sound-menu nav a { display:flex; align-items:center; min-height:44px; padding:8px 12px; color:var(--ui-muted); font-size:15px; text-decoration:none; }
.sound-menu nav a:hover { background:rgba(239,231,216,.05); color:var(--ink); }
.skip-link { position:fixed; top:8px; left:16px; z-index:20; padding:12px; background:var(--ink); color:var(--bg); transform:translateY(-150%); }
.skip-link:focus { transform:none; }
.page { display:flex; flex-direction:column; align-items:center; gap:32px; min-height:0; padding:40px clamp(20px,5vw,72px) 64px; }
.page:not(.editorial-page) { min-height:calc(100vh - 76px); }
.landing-intro { width:min(720px,100%); text-align:center; }
.radio-intro-kicker { color:var(--amber); font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:16px; }
.landing-intro h1 { color:var(--ink); font-size:clamp(32px,4vw,48px); font-weight:400; letter-spacing:-.025em; line-height:1.15; margin:0 0 24px; text-wrap:balance; }
.landing-intro > p { color:var(--ui-muted); font-size:18px; line-height:1.7; margin:0; max-width:64ch; }
.page:not(.editorial-page) .landing-intro > p { margin-inline:auto; }
.editorial-page .landing-intro { width:min(1160px,100%); padding-left:248px; text-align:left; }
.contact-address { display:inline-flex; align-items:center; min-height:44px; color:var(--ink); font-size:clamp(18px,2.5vw,26px); margin-top:24px; overflow-wrap:anywhere; }
.contact-panel { margin-top:24px; }
.contact-panel .contact-address { margin-top:0; }
.contact-reveal { min-height:48px; padding:12px 20px; border:1px solid var(--amber); border-radius:2px; background:transparent; color:var(--ink); font-size:16px; }
.contact-reveal:hover { background:rgba(211,170,98,.08); }
.contact-reveal:disabled { cursor:wait; opacity:.7; }
.contact-panel .contact-status, .contact-panel .contact-alternative, .contact-panel noscript p { font-size:14px; line-height:1.6; color:var(--ui-muted); margin:16px 0 0; }
.contact-panel .contact-status:empty { display:none; }
.editorial { display:grid; grid-template-columns:184px minmax(0,720px); gap:64px; width:min(1160px,100%); margin-top:32px; align-items:start; }
.page-contents { position:sticky; top:32px; display:flex; flex-direction:column; gap:4px; }
.page-contents > span { color:var(--ui-muted); font-size:12px; text-transform:uppercase; letter-spacing:.12em; margin-bottom:12px; }
.page-contents a { color:var(--ui-muted); font-size:14px; line-height:1.5; min-height:44px; padding:10px 0; text-decoration:none; border-left:1px solid var(--ui-line); padding-left:16px; }
.page-contents a:hover, .page-contents a:focus { border-color:var(--amber); color:var(--ink); }
.editorial-section { margin:0 0 48px; padding:0 0 48px; border-bottom:1px solid var(--ui-line); }
.editorial h2 { font-size:28px; font-weight:400; line-height:1.25; letter-spacing:-.015em; color:var(--ink); margin:0 0 24px; text-wrap:balance; }
.editorial p { color:var(--ui-muted); font-size:18px; line-height:1.75; max-width:68ch; margin:0 0 24px; }
.editorial p:last-child { margin-bottom:0; }
.listening-options { list-style:none; padding:0; margin:24px 0; }
.listening-options li { padding:12px 0; border-top:1px solid var(--ui-line); }
.listening-options a { display:inline-flex; align-items:center; min-height:44px; font-size:17px; }
.listening-options span { display:block; font-size:15px; color:var(--ui-muted); line-height:1.6; }
.listening-guide { border-top:1px solid var(--ui-line); }
.listening-guide summary { display:flex; align-items:center; justify-content:space-between; gap:16px; list-style:none; padding:16px 24px 16px 0; cursor:pointer; color:var(--ink); font-size:17px; line-height:1.5; min-height:56px; }
.listening-guide > div { padding:8px 0 24px; }
.related-sounds nav { display:flex; flex-wrap:wrap; gap:16px 32px; }
.related-sounds a { display:inline-flex; align-items:center; min-height:44px; font-size:16px; text-decoration:none; border-bottom:1px solid var(--ui-line); }
.related-sounds .icon { color:var(--amber); margin-left:16px; }
.site-footer { position:relative; z-index:1; padding:48px clamp(20px,5vw,72px); border-top:1px solid var(--ui-line); }
.footer-inner { width:min(1160px,100%); margin:auto; display:grid; grid-template-columns:2fr 1fr 1fr; gap:48px; }
.footer-brand > p { font-size:15px; letter-spacing:.16em; margin:0 0 12px; }
.footer-brand > span { color:var(--ui-muted); font-size:14px; line-height:1.6; }
.footer-brand .social-links { justify-content:flex-start; margin-top:24px; }
.social-links a { min-width:44px; min-height:44px; }
.site-footer nav:not(.social-links) { display:flex; flex-direction:column; gap:0; align-items:start; }
.footer-label { font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--ui-muted); margin-bottom:16px; }
.site-footer nav:not(.social-links) a { display:inline-flex; align-items:center; min-height:44px; font-size:15px; color:var(--ui-muted); text-decoration:none; }
.site-footer nav a:hover { color:var(--ink); }
body:has(.editorial-page) .site-footer { padding-bottom:calc(var(--player-height) + 48px); }
.compact-radio { position:fixed; z-index:8; bottom:0; left:0; right:0; display:flex; align-items:center; gap:20px; padding:16px max(24px,calc((100vw - 1160px)/2)) calc(16px + env(safe-area-inset-bottom,0px)); background:#11100e; border-top:1px solid rgba(211,170,98,.4); }
.compact-power { display:grid; place-items:center; width:48px; height:48px; flex-shrink:0; border:1px solid rgba(211,170,98,.6); border-radius:50%; color:var(--ink); background:transparent; font-size:17px; }
.compact-power:hover { border-color:var(--amber); }
.compact-copy { flex:1; min-width:0; }
.compact-heading { display:flex; gap:16px; flex-wrap:wrap; align-items:center; margin-bottom:8px; }
.compact-brand { color:var(--ink); font-size:12px; letter-spacing:.14em; }
.compact-heading [data-compact-state] { color:var(--amber); font-size:12px; text-transform:uppercase; }
.compact-track { color:var(--ui-muted); font-size:15px; line-height:1.4; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.compact-volume { display:flex; align-items:center; gap:12px; color:var(--ui-muted); font-size:13px; }
.compact-volume input { width:110px; min-height:44px; accent-color:var(--amber); cursor:pointer; }
.not-found { width:min(700px,100%); margin:20vh auto; padding:24px; }
@media (min-width:981px) and (max-width:1250px) { .receiver { grid-template-columns:1fr; width:min(100%,1080px); } .rack { display:none; } .faceplate { grid-template-columns:200px minmax(260px,1fr) 220px; gap:24px; padding:30px 24px; } }
@media (max-width:1100px) {
 .editorial { display:block; width:min(720px,100%); margin-top:16px; }
 .editorial-page .landing-intro { padding-left:0; width:min(720px,100%); }
 .page-contents { position:static; margin-bottom:40px; flex-direction:row; flex-wrap:wrap; gap:0 24px; }
 .page-contents > span { width:100%; margin-bottom:8px; }
 .page-contents a { border-left:0; padding:8px 0; border-bottom:1px solid var(--ui-line); }
}
@media (max-width:980px) { .page { padding-top:24px; } .right-panel { order:2; } .meter-panel { order:3; } }
@media (max-width:600px) {
 .page:not(.editorial-page) { gap:24px; }
 .faceplate { gap:24px; } .left-panel { gap:16px; }
 .site-header { padding:8px 20px; } .site-nav { gap:20px; }
 .landing-intro > p, .editorial p { font-size:16px; line-height:1.75; }
 .landing-intro h1 { margin-bottom:16px; }
 .editorial h2 { font-size:26px; }
 .editorial-section { margin-bottom:40px; padding-bottom:40px; }
 .footer-inner { grid-template-columns:1fr 1fr; gap:32px; }
 .footer-brand { grid-column:1 / -1; }
 .compact-radio { gap:12px; padding-left:16px; padding-right:16px; }
 .compact-heading { gap:6px 12px; margin-bottom:4px; }
 .compact-brand { font-size:11px; }
 .compact-heading [data-compact-state] { font-size:11px; }
 .compact-track { font-size:14px; }
 .compact-volume { font-size:0; gap:0; } .compact-volume input { width:68px; }
}
@media (prefers-reduced-motion:reduce) { body::before { opacity:.54; background-position:0 0; transform:none; } *, *::before, *::after { scroll-behavior:auto !important; transition-duration:0s !important; } }

/* Tabler: one 24px grid, 2px stroke and optical sizing by role. */
.icon.icon { display:inline-block; width:20px; height:20px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; pointer-events:none; }
.compact-power .icon { width:24px; height:24px; }
.listening-guide summary::-webkit-details-marker { display:none; }
.listening-guide summary::marker { content:""; }
.listening-guide summary .icon { width:20px; height:20px; }
.social-links .icon, .love-button .icon { width:20px; height:20px; }
.float-heart .icon { width:100%; height:100%; fill:none; }
/* Listening experience: shared functional tokens, restrained hardware accents. */
:root { --text-small:14px; --text-body:18px; --control-size:44px; --surface:#15130f; --radius:3px; }
.playback-label { height:10.34375px; font-size:11px; line-height:14px; letter-spacing:.08em; }
.home-volume { display:none; }
.device-volume { font-size:13px; color:var(--engrave); margin:0; }
.broadcast-note.broadcast-note { font-size:14px; line-height:1.6; margin-top:16px; color:var(--ui-muted); }
.listening-tools { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px 24px; }
.listening-tools a, .listening-tools button, .text-control { display:inline-flex; align-items:center; min-height:44px; padding:8px 0; border:0; border-bottom:1px solid var(--ui-line); color:var(--ui-muted); background:transparent; font:inherit; font-size:14px; text-decoration:none; }
.listening-tools button:hover, .text-control:hover { color:var(--amber); }
body:has(.editorial-page) .listening-tools { display:none; }
.compact-radio { background:linear-gradient(180deg,#191610,#11100e); box-shadow:inset 0 1px rgba(211,170,98,.12); }
.compact-heading::before { content:''; width:8px; height:8px; border-radius:50%; background:#786b53; flex-shrink:0; }
body[data-radio-state=live] .compact-heading::before { background:var(--amber); box-shadow:0 0 12px rgba(211,170,98,.45); }
body[data-radio-state=connecting] .compact-heading::before { background:var(--ink); }
.compact-tools { flex-shrink:0; }
:is(.listening-dialog, .consent-dialog) { width:min(600px,calc(100% - 32px)); max-height:80vh; padding:24px; border:1px solid var(--amber); border-radius:3px; background:var(--surface); color:var(--ink); overflow:auto; }
:is(.listening-dialog, .consent-dialog)::backdrop { background:rgba(0,0,0,.78); }
:is(.listening-dialog, .consent-dialog) header { display:flex; justify-content:space-between; align-items:start; gap:16px; }
:is(.listening-dialog, .consent-dialog) h2 { font-size:24px; font-weight:400; margin:8px 0 16px; }
:is(.listening-dialog, .consent-dialog) p { font-size:14px; line-height:1.7; color:var(--ui-muted); }
:is(.listening-dialog, .consent-dialog) button { min-height:44px; padding:10px 14px; color:var(--ink); background:transparent; border:1px solid var(--ui-line); border-radius:3px; }
:is(.listening-dialog, .consent-dialog) button:disabled { opacity:.5; cursor:default; }
:is(.listening-dialog, .consent-dialog) ul { list-style:none; padding:0; }
:is(.listening-dialog, .consent-dialog) li { display:grid; grid-template-columns:1fr auto; gap:8px 16px; padding:16px 0; border-top:1px solid var(--ui-line); overflow-wrap:anywhere; }
:is(.listening-dialog, .consent-dialog) li time { grid-column:1; font-size:12px; color:var(--ui-muted); }
:is(.listening-dialog, .consent-dialog) li button { grid-column:2; grid-row:1 / 3; }
.listening-focus .site-header, .listening-focus .site-footer, .listening-focus .landing-intro { opacity:.12; pointer-events:none; }
.listening-focus .listening-tools a { display:none; }
.love-button { min-width:44px; min-height:44px; }
@media(max-width:600px) {
 .home-volume:not([hidden]) { display:flex; align-items:center; gap:16px; font-size:13px; color:var(--engrave); }
 .home-volume input { width:140px; min-height:44px; accent-color:#4d3c22; }
 .compact-tools { font-size:12px; }
 .compact-radio { gap:10px; }
 .compact-volume input { width:56px; }
 .page-contents { gap:0 16px; margin-bottom:24px; }
 .page-contents > span { display:none; }
 .page-contents a { font-size:13px; }
 .listening-tools { gap:4px 16px; }
}

.page:not(.editorial-page) ~ .site-footer a[href="/how-to-listen/"] { display:none; }
.listening-steps { padding-left:24px; margin:24px 0; color:var(--ui-muted); font-size:var(--text-body); line-height:1.75; }
.listening-steps li { padding-left:8px; margin:8px 0; }
.stream-address code { font-family:inherit; font-size:inherit; color:var(--ink); overflow-wrap:anywhere; }
@media(max-width:600px) { .listening-steps { font-size:16px; } }

/* Measurement choices use the existing site palette and native dialog. */
.consent-notice { position:fixed; z-index:30; left:50%; bottom:calc(var(--player-height,0px) + 16px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); width:min(900px,calc(100% - 32px)); max-height:calc(100dvh - var(--player-height,0px) - 48px); overflow:auto; margin:0; padding:20px 24px; display:flex; align-items:center; gap:24px; border:1px solid rgba(211,170,98,.35); border-radius:var(--radius); background:var(--surface); color:var(--ink); box-shadow:0 12px 48px rgba(0,0,0,.65); }
.consent-notice[hidden] { display:none; }
.consent-copy { flex:1; min-width:0; }
.consent-kicker { display:block; margin-bottom:8px; color:var(--amber); font-size:10px; letter-spacing:.16em; }
.consent-notice h2 { font-size:20px; font-weight:400; margin:0 0 8px; }
.consent-notice p { color:var(--ui-muted); font-size:14px; line-height:1.6; margin:0; }
.consent-notice .consent-actions { flex:0 0 160px; }
.consent-notice .consent-actions button { width:100%; }
.consent-details { margin:16px 0 24px; font-size:14px; line-height:1.6; }
.consent-details summary { min-height:44px; display:list-item; padding:12px 0; cursor:pointer; color:var(--ui-muted); }
@media(max-width:600px) {
.consent-notice { padding:16px; gap:16px; flex-direction:column; align-items:stretch; bottom:calc(var(--player-height,0px) + 8px + env(safe-area-inset-bottom,0px)); }
 .consent-notice .consent-actions { flex:initial; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
 .consent-notice .consent-actions button[data-consent-open] { grid-column:1 / -1; grid-row:2; }
 .consent-notice .consent-actions button { padding:8px; }
}
.consent-actions { display:flex; flex-wrap:wrap; gap:12px; }
.consent-actions button { min-height:44px; padding:10px 14px; border:1px solid var(--ui-line); border-radius:3px; background:transparent; color:var(--ink); font:inherit; font-size:14px; cursor:pointer; }
.consent-actions button:hover { border-color:var(--amber); }
.consent-dialog label { display:flex; align-items:start; gap:12px; margin:20px 0; font-size:14px; line-height:1.6; }
.consent-dialog input { min-width:20px; min-height:20px; accent-color:var(--amber); }
.consent-dialog label span { color:var(--ui-muted); }
.consent-dialog label strong { display:block; font-weight:500; color:var(--ink); }
.consent-preferences { cursor:pointer; }
@media(max-height:640px) {
 .consent-notice { top:calc(8px + env(safe-area-inset-top,0px)); bottom:auto; }
}

.consent-actions button[data-consent-accept] { background:var(--amber); border-color:var(--amber); color:var(--bg); font-weight:600; }
.consent-actions button[data-consent-accept]:hover { background:var(--ink); border-color:var(--ink); }