/* The radio lives beside the brand motto; navigation keeps its own clear row. */
html:has(.header-beat-slot){scroll-padding-top:200px}
.graffiti-theme .header{flex-wrap:wrap;column-gap:18px;row-gap:9px}
.graffiti-theme .header .brand{order:0}
.header-beat-slot{order:1;display:flex;min-width:0;max-width:100%;margin-right:auto}
.graffiti-theme .header .header-actions{order:2;margin-left:0;flex-shrink:0}
.graffiti-theme .header nav{order:3;display:flex;flex:1 0 100%;width:100%;max-width:100%;justify-content:flex-start;padding:8px 0 3px;border-top:1px solid #344a55}
#site-beat{position:relative;display:flex;align-items:center;gap:11px;max-width:100%;padding:9px 12px 9px 9px;background:linear-gradient(135deg,#182934,#101a22);color:#f7edcf;border:1px solid #69d4d8;border-bottom:3px solid #e8bb57;box-shadow:3px 3px 0 #070e15;font:400 12px/1.4 var(--brush-font,Arial,sans-serif)}
#site-beat .beat-radio{display:block;width:72px;height:72px;object-fit:contain;flex:0 0 auto;background:#fff;border:1px solid #d6dfdf;transform:rotate(-3deg)}
#site-beat .beat-controls{display:grid;gap:6px;min-width:0}
#site-beat .beat-title{display:block;color:#fff2bd;font-size:17px;font-weight:400;line-height:1.35;letter-spacing:.4px;text-shadow:1px 2px 0 #05090d;-webkit-text-stroke:0}
#site-beat .beat-transport{display:flex;align-items:center;gap:12px;min-width:0}
#site-beat .beat-toggle{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 10px;background:#edc268;color:#101820;border:1px solid #edc268;font-size:15px;font-weight:400;line-height:1.4;white-space:nowrap;flex-shrink:0;text-shadow:none;-webkit-text-stroke:0;box-shadow:2px 2px 0 #02090d}
#site-beat .beat-toggle:hover{background:#62e5e8;border-color:#62e5e8}
#site-beat .beat-toggle:focus-visible,#site-beat .beat-volume input:focus-visible{outline:3px solid #62e5e8;outline-offset:3px}
#site-beat .beat-details{display:grid;gap:4px;min-width:0;max-width:230px;overflow-wrap:break-word}
#site-beat .beat-status{font-size:12px;line-height:1.5;letter-spacing:.15px;color:#e2eceb;text-shadow:none;-webkit-text-stroke:0}
#site-beat .beat-adjustments{display:flex;flex-wrap:wrap;align-items:center;gap:3px 12px}
#site-beat .beat-volume{display:flex;align-items:center;flex-wrap:nowrap;gap:7px;font-size:11px;line-height:1.5;letter-spacing:0;color:#f7edcf;text-shadow:none;-webkit-text-stroke:0}
#site-beat .beat-volume input{width:76px;max-width:100%;height:24px;accent-color:#edc268;margin:0;min-width:0}
#site-beat .beat-time{font-size:10px;line-height:1.5;white-space:nowrap;letter-spacing:0;font-variant-numeric:tabular-nums;color:#c7d9dc;text-shadow:none;-webkit-text-stroke:0}
.beat-bars{height:17px;display:flex;align-items:center;gap:2px}.beat-bars i{display:block;width:3px;height:5px;background:currentColor}.beat-bars i:nth-child(2){height:14px}.beat-bars i:nth-child(3){height:9px}.beat-bars i:nth-child(4){height:16px}
.is-playing .beat-bars i{animation:beat-bars .68s ease-in-out infinite alternate}.is-playing .beat-bars i:nth-child(2){animation-delay:-.3s}.is-playing .beat-bars i:nth-child(3){animation-delay:-.15s}.is-playing .beat-bars i:nth-child(4){animation-delay:-.45s}
@keyframes beat-bars{from{transform:scaleY(.4)}to{transform:scaleY(1)}}
@media(max-width:900px){#site-beat{gap:8px;padding:8px}#site-beat .beat-radio{width:60px;height:60px}#site-beat .beat-transport{gap:9px}#site-beat .beat-title{font-size:16px}#site-beat .beat-toggle{padding:8px;font-size:14px}}
@media(max-width:680px){.header-beat-slot{order:3;flex:1 0 100%;width:100%;margin-right:0}.graffiti-theme .header nav{order:4}#site-beat{width:100%;justify-content:flex-start}#site-beat .beat-controls{flex:1}#site-beat .beat-details{flex:1;max-width:none}#site-beat .beat-radio{width:52px;height:52px}#site-beat .beat-status{font-size:11px}#site-beat .beat-title{font-size:15px}#site-beat .beat-toggle{font-size:13px;gap:5px}#site-beat .beat-volume{font-size:10px;gap:5px}#site-beat .beat-volume input{width:66px}#site-beat .beat-time{font-size:9px}.beat-bars{gap:1px}}
@media(max-width:360px){#site-beat{gap:7px;padding:7px}#site-beat .beat-radio{width:42px;height:42px}#site-beat .beat-transport{gap:7px}#site-beat .beat-volume input{width:57px}#site-beat .beat-title{font-size:14px}}
@media(prefers-reduced-motion:reduce){.is-playing .beat-bars i{animation:none}}
@media(forced-colors:active){#site-beat{border:1px solid CanvasText}#site-beat .beat-toggle{border:1px solid ButtonText}#site-beat .beat-title,#site-beat .beat-status,#site-beat .beat-volume,#site-beat .beat-time{color:CanvasText;text-shadow:none}}
/* Anchor headings stay visible below the wrapped radio and navigation rows. */
@media(max-width:680px){html:has(.header-beat-slot){scroll-padding-top:275px}html:has(.story-page .header-beat-slot){scroll-padding-top:315px}}
@media(max-width:480px){html:has(.story-page .header-beat-slot){scroll-padding-top:360px}}