:root{color-scheme:light;--ink:#302c24;--muted:#716957;--paper:#eee6d6;--orange:#af4e2f}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--paper);font-family:Arial,Helvetica,sans-serif;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23877658' opacity='.09' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}header,main,footer{max-width:1120px;margin:auto}header{padding:32px 30px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #b7ab923f}.brand{color:var(--ink);font-size:17px;font-weight:800;letter-spacing:3px;text-decoration:none}.brand span{display:block;font-size:10px;letter-spacing:2px;font-weight:400;margin-top:7px}.header-note{font-family:Georgia,serif;font-style:italic;color:var(--muted);font-size:15px}main{padding:0 30px}.intro{text-align:center;padding:58px 0 36px}.eyebrow{font-size:10px;letter-spacing:3px;color:var(--orange);font-weight:700}h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(48px,6.5vw,80px);letter-spacing:-3px;line-height:1.03;margin:21px 0}h1 em{color:var(--orange)}.intro p{color:var(--muted);font-size:15px;line-height:1.8}.radio{padding:22px 28px 18px;background:#b99366;border:2px solid #886640;border-radius:22px;box-shadow:0 22px 35px #55402722,inset 0 2px 2px #edd6ae;position:relative;background-image:repeating-linear-gradient(2deg,transparent 0 4px,#79552e0c 5px 6px)}.radio-top{display:flex;justify-content:space-between;font-size:10px;letter-spacing:2px;font-weight:700;margin-bottom:18px;color:#49351f}#on-air{letter-spacing:1px}.radio-body{display:grid;grid-template-columns:1fr 1.1fr;gap:28px}.speaker{border-radius:12px;border:8px solid #987348;box-shadow:inset 0 3px 12px #0009;background-color:#40372b;background-image:radial-gradient(#191711 1.5px,transparent 2px),radial-gradient(#bc9e72 1px,transparent 2px);background-position:0 0,3px 3px;background-size:6px 6px;min-height:290px}.console{min-width:0}.dial{position:relative;border:6px solid #715237;border-radius:7px;background:#e8dab7;padding:14px 14px 9px;box-shadow:inset 0 2px 7px #56442b55}.frequencies{display:flex;justify-content:space-between;font-family:monospace;font-size:12px}.ticks{height:22px;background:repeating-linear-gradient(90deg,#716752 0 1px,transparent 1px 8px);margin:7px 0}.needle{position:absolute;left:62%;top:12px;height:57px;width:2px;background:#b54127;box-shadow:1px 0 4px #b5412744}.dial-label{display:block;text-align:center;font-size:8px;letter-spacing:2px;color:#75674d}.display{margin:22px 0 18px}.display-label{font-size:9px;letter-spacing:2px;color:#503e29}.display h2{font-family:Georgia,serif;font-size:25px;font-weight:400;margin:9px 0}.display p{font-size:12px;line-height:1.5;color:#513f2b;margin:0;min-height:36px}.controls{display:flex;gap:10px}button{font:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.55}.play,.random{border-radius:7px;padding:13px 16px;border:1px solid #463c2c;font-size:12px;font-weight:700;box-shadow:0 3px 0 #63472d}.play{background:#302d24;color:#f7e9cb}.random{background:#d8bd90;color:#44331f}.play:hover:enabled{background:#4a4131}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #aa4328;outline-offset:4px}.transport{display:flex;align-items:center;gap:12px;margin-top:22px;padding-top:17px;border-top:1px solid #79573155;font-size:11px;font-family:monospace}input[type=range]{accent-color:#493728;min-width:0;cursor:pointer}#seek{flex:1}.volume{display:flex;align-items:center;gap:8px;margin-left:14px;font-family:Arial;font-size:10px}.volume input{width:80px}.archive{margin-top:52px}.section-heading{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #9a8c7044;padding-bottom:16px;gap:16px}.section-heading h2{font-family:Georgia,serif;font-size:25px;font-weight:400;margin:0}.section-heading span{font-size:9px;letter-spacing:2px;color:var(--muted)}.tracks{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-top:22px}.track{display:flex;align-items:center;gap:18px;text-align:left;width:100%;padding:20px;background:#e4d9c5;border:1px solid #b6a588;border-radius:8px;color:var(--ink)}.track:hover{background:#d9cbb1}.track.active{border-color:var(--orange)}.track-number{font-family:Georgia,serif;font-size:32px;color:var(--orange)}.track strong{display:block;font-size:14px;font-weight:500}.track small{display:block;color:var(--muted);margin-top:7px;font-size:11px}.track-arrow{margin-left:auto}.empty{color:var(--muted);font-size:13px}.footnote{text-align:center;font-family:Georgia,serif;font-style:italic;font-size:14px;line-height:1.8;color:var(--muted);margin:42px 0}footer{padding:24px 30px 32px;border-top:1px solid #b7ab923f;display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}footer a{color:inherit;text-decoration:none}@media(max-width:650px){header{padding:24px 20px}.header-note{display:none}main{padding:0 18px}.intro{padding:38px 0 24px}h1{letter-spacing:-2px}.radio{padding:18px 16px;border-radius:16px}.radio-body{grid-template-columns:1fr;gap:18px}.speaker{min-height:90px;max-height:90px;order:2;border-width:5px}.display{margin:18px 0}.controls button{flex:1;padding:14px 8px}.transport{gap:7px;flex-wrap:wrap}.volume{width:100%;justify-content:flex-end;margin:5px 0 0}.section-heading{align-items:flex-start;flex-direction:column}.section-heading h2{font-size:23px}.tracks{grid-template-columns:1fr;gap:12px}.archive{margin-top:36px}.desktop{display:none}}@media(prefers-reduced-motion:no-preference){button{transition:background .2s}.radio.playing .needle{animation:drift 8s ease-in-out infinite alternate}@keyframes drift{to{transform:translateX(12px)}}}

/* Center the station name and tagline */
header { justify-content: center; text-align: center; }

/* Larger infinity symbols in the player */
#elapsed, #duration { font-size: 44px; line-height: 1; flex-shrink: 0; }

/* Walnut cabinet, woven speaker cloth and warm illuminated tuning glass */
.radio {
 border: 3px solid #49301f;
 border-radius: 25px;
 padding: 24px 30px 20px;
 background-color: #70482e;
 background-image: linear-gradient(90deg,#24160c35,transparent 12%,#d7a36912 48%,transparent 85%,#24160c45),repeating-linear-gradient(2deg,#b17e4720 0 1px,transparent 1px 5px,#28180e25 6px 7px),linear-gradient(180deg,#90613e,#654027);
 box-shadow: inset 0 2px 2px #d3a27199,inset 0 -5px 9px #27180b88,0 5px 0 #39261b,0 22px 35px #39261835;
}
.radio-top { color: #e9c99a; text-shadow: 0 1px 1px #281b10; }
#on-air { color: #ffe0a0; }
.radio.playing #on-air { text-shadow: 0 0 7px #ffce65,0 0 14px #ffb32f80; }
.speaker {
 border: 9px solid #523923;
 border-radius: 13px;
 background-color: #8b7654;
 background-image: repeating-linear-gradient(0deg,#251e15b0 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,#e1cb9445 0 1px,#3e302b80 1px 2px,transparent 2px 5px);
 box-shadow: inset 0 0 25px #21160ec0,0 1px 0 #d3aa6c80;
}
.console { border-radius: 12px; }
.dial {
 padding: 19px 17px 13px;
 border: 7px solid #4e3826;
 border-radius: 9px;
 color: #583b17;
 background: radial-gradient(ellipse at 50% 60%,#fff4b7 0%,#ffe395 48%,#e9b956 100%);
 box-shadow: inset 0 2px 7px #76501870,inset 0 0 22px #ffc953b0,0 0 15px #ffcf624a,0 0 38px #ffb93725,0 1px 0 #d9b886;
}
.dial::after {
 content: ''; position: absolute; inset: 0; border-radius: 2px; pointer-events: none;
 background: linear-gradient(165deg,#ffffff50 0%,#ffffff0d 35%,transparent 36%,#7545130d 100%);
 box-shadow: inset 0 0 2px #fff9d0;
}
.frequencies { font-family: Georgia,serif; font-size: 14px; font-weight: bold; }
.ticks { background: repeating-linear-gradient(90deg,#775025 0 1px,transparent 1px 8px); }
.needle { top: 16px; height: 65px; background: #a54522; width: 3px; box-shadow: 0 0 5px #bd50244a; }
.dial-label { color: #795821; font-weight: bold; }
.display {
 padding: 16px 18px; border: 1px solid #80582a; border-radius: 6px;
 background: radial-gradient(ellipse at 45% 30%,#ffedb2,#e8c378);
 box-shadow: inset 0 1px 5px #76501955,0 0 14px #ffc75530;
}
.display-label { color: #715020; }
.display h2 { color: #47331c; text-shadow: 0 1px 1px #fff0bf; }
.display p { color: #694b25; }
.play,.random {
 border: 1px solid #32271b; border-radius: 8px;
 box-shadow: inset 0 1px 1px #fff0c26b,0 4px 0 #36271b,0 5px 8px #1c130c50;
}
.play { background: linear-gradient(#514536,#30291f); color: #ffe5b2; }
.random { background: linear-gradient(#dbc08c,#b68e53); color: #3c2c18; }
.random:hover:enabled { background: linear-gradient(#edd29c,#cda568); }
.transport { color: #f1d5a6; border-top-color: #e0b88233; }
input[type=range] { accent-color: #e7bf77; }
@media(max-width:650px) {
 .radio { padding: 20px 16px; border-radius: 19px; }
 .speaker { border-width: 6px; }
 .dial { padding: 17px 13px 12px; }
 .display { padding: 14px; }
}

/* Simpler, lighter cabinet texture */
.radio {
 border: 2px solid #886640;
 background-color: #b99366;
 background-image: repeating-linear-gradient(2deg,transparent 0 4px,#79552e0c 5px 6px);
 box-shadow: 0 22px 35px #55402722,inset 0 2px 2px #edd6ae;
}
.radio-top { color: #49351f; text-shadow: none; }
#on-air { color: #49351f; }
.speaker {
 border-color: #987348;
 background-color: #40372b;
 background-image: radial-gradient(#191711 1.5px,transparent 2px),radial-gradient(#bc9e72 1px,transparent 2px);
 background-position: 0 0,3px 3px;
 background-size: 6px 6px;
 box-shadow: inset 0 3px 12px #0009;
}
.transport { color: #493728; border-top-color: #79573155; }
input[type=range] { accent-color: #493728; }

/* Softer illumination and controls matched to the light cabinet */
.dial {
 border-color: #886640;
 background: radial-gradient(ellipse at 50% 60%,#f5e4b3 0%,#ead39c 65%,#d5b77e 100%);
 box-shadow: inset 0 2px 5px #76501845,inset 0 0 12px #e9bd4930,0 0 7px #eebc4820,0 1px 0 #edd6ae80;
}
.dial::after { background: linear-gradient(165deg,#ffffff25,transparent 45%); box-shadow: inset 0 0 2px #fff9d050; }
.display {
 border-color: #a58150;
 background: radial-gradient(ellipse at 45% 30%,#efddb5,#ddc291);
 box-shadow: inset 0 1px 4px #76501930,0 0 5px #e5ba4820;
}
.display h2 { text-shadow: none; }
.play,.random {
 border: 1px solid #80603e;
 box-shadow: inset 0 1px 1px #f4e2bf70,0 2px 0 #80603e;
}
.play { background: #5b4833; color: #f8ecd5; }
.play:hover:enabled { background: #70583e; }
.random { background: #d8bd90; color: #49351f; }
.random:hover:enabled { background: #e3cca4; }
.radio.playing #on-air { color: #69451d; text-shadow: 0 0 4px #e8b14c30; }

/* Match the volume label to the on-air indicator */
.volume { font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1px; }

/* Quiet editorial notes and creator credits */
.radio-notes { max-width: 760px; margin: 48px auto 36px; padding: 32px 24px 12px; text-align: center; border-top: 1px solid #9a8c7044; }
.radio-notes blockquote { margin: 0 0 22px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(25px,4vw,35px); font-style: italic; font-weight: 400; line-height: 1.45; color: #705439; }
.notes-about { margin: 0; font-family: Georgia,serif; font-size: 15px; line-height: 1.85; color: #716957; }
.creators { display: flex; justify-content: center; gap: 56px; margin: 30px 0; }
.creators p { margin: 0; }
.creators strong { display: block; font-family: Georgia,serif; font-size: 17px; font-weight: 400; color: #493728; }
.creators span { display: block; margin-top: 9px; font-size: 10px; letter-spacing: 1px; color: #716957; }
.notes-last { margin: 26px 0 0; font-family: Georgia,serif; font-size: 14px; font-style: italic; line-height: 1.7; color: #716957; }
@media(max-width:650px) { .radio-notes { margin-top: 36px; padding: 25px 0 10px; } .creators { flex-direction: column; gap: 22px; } }

/* Match the editorial text to the station heading typography */
.radio-notes blockquote, .notes-about, .creators strong, .notes-last {
 font-family: Arial, Helvetica, sans-serif;
 font-style: normal;
}
.radio-notes blockquote { font-size: clamp(21px,3vw,28px); font-weight: 700; letter-spacing: 1px; }
.notes-about { font-size: 14px; letter-spacing: .3px; }
.creators strong { font-size: 15px; font-weight: 700; letter-spacing: 1px; }
.notes-last { font-size: 13px; letter-spacing: .3px; }

/* Sand and muted amber accents in the quotation */
.sand-quote .quote-earth { color: #705439; }
.sand-quote .quote-mark { color: #a17a45; }
.sand-quote .sand-word {
 color: #96622f;
 background: linear-gradient(145deg,#715032 5%,#a96e30 48%,#826036 95%);
 -webkit-background-clip: text; background-clip: text;
 -webkit-text-fill-color: transparent;
}
@media (forced-colors: active) { .sand-quote .sand-word { background: none; -webkit-text-fill-color: currentColor; } }

/* Station quotation above the radio */
.station-quote {
 margin: 0 0 30px; text-align: center;
 font-family: Arial, Helvetica, sans-serif;
 font-size: clamp(21px,3vw,28px); font-weight: 700;
 font-style: normal; letter-spacing: 1px; line-height: 1.45;
}

/* Compact now-playing panel */
.display { padding: 11px 14px; margin: 16px 0 14px; }
.display h2 { margin: 6px 0 0; }
.display p { min-height: 0; }
.display p:empty { display: none; }
.display p:not(:empty) { margin-top: 6px; }

/* The station story inside the speaker frame */
.speaker { position: relative; }
.about-panel { position: absolute; inset: 0; overflow-y: auto; background: #e9d9b8; color: #493728; border-radius: 3px; scrollbar-color: #99754b #e9d9b8; scrollbar-width: thin; }
.about-panel[hidden] { display: none; }
.about-scroll { padding: 22px 24px 30px; }
.about-scroll h2 { margin: 0 0 16px; font-size: 16px; letter-spacing: 1px; }
.about-scroll p { margin: 0 0 18px; font-size: 14px; line-height: 1.85; }
.controls { flex-wrap: wrap; }
#about { min-width: 64px; }
@media(max-width:650px) {
 .speaker.show-about { min-height: 280px; max-height: 280px; }
 .about-scroll { padding: 18px; }
 .controls button { flex: 1 1 auto; }
}