@font-face {
    font-family: "Saira Stencil One";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/saira-stencil-one-v19.ttf") format("truetype");
}
@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/assets/fonts/ibm-plex-sans-latin-v23.woff2") format("woff2");
}
:root {
    color-scheme: dark;
    --bg: #151716;
    --text: #f5f5f2;
    --muted: #a9b3ad;
    --red: #ed1b24;
    --yellow: #f3e51a;
    font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
    color: var(--text);
    background-color: var(--bg);
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; letter-spacing: 0; }
html { min-height: 100%; background-color: var(--bg); }
body { margin: 0; min-height: 100vh; min-height: 100svh; background-color: var(--bg); }
button { font: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
[hidden] { display: none !important; }
::selection { background: var(--yellow); color: var(--bg); }

/* One solid page background also covers Safari's safe areas and overscroll. */
.stage {
    width: min(100%, 960px);
    min-height: 100vh;
    min-height: 100svh;
    margin-inline: auto;
    padding: max(32px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.station-heading { width: 100%; }
.live-badge { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 18px; color: var(--yellow); font-size: 14px; font-weight: 500; }
.icon { display: block; width: 24px; height: 24px; filter: invert(1); pointer-events: none; }
.live-badge .icon { width: 20px; height: 20px; }
h1 { margin: 0; font-family: "Saira Stencil One", "Arial Black", sans-serif; font-size: 64px; text-transform: uppercase; font-weight: 400; line-height: 1.08; }
h1 span { color: var(--yellow); }
.tagline { max-width: 520px; margin: 16px auto 0; color: var(--muted); font-size: 16px; line-height: 1.5; text-wrap: pretty; }
.festival-art { display: block; width: 100%; height: auto; aspect-ratio: 2125 / 740; object-fit: cover; margin-top: 28px; border-radius: 4px; }
.player { width: min(100%, 400px); padding-top: 24px; }
.equalizer { height: 48px; width: 100%; display: flex; align-items: center; gap: 5px; padding-inline: 8px; }
.bar { height: 100%; flex: 1; min-width: 0; background: var(--yellow); border-radius: 2px; transform: scaleY(0.1); opacity: 0.45; }
.bar:nth-child(3n) { background: var(--red); }
.equalizer.is-playing .bar { opacity: 1; }
.transport { display: grid; grid-template-columns: 56px 88px 56px; align-items: center; justify-content: center; gap: 28px; margin-top: 18px; }
.icon-button, .play-button { display: grid; place-items: center; padding: 0; border-radius: 50%; cursor: pointer; }
.icon-button { width: 56px; height: 56px; background: transparent; border: 1px solid #49514c; color: var(--text); }
.play-button { width: 88px; height: 88px; background: var(--yellow); border: 0; color: var(--bg); position: relative; }
.play-button .icon { width: 32px; height: 32px; filter: none; }
.play-button .icon-play { margin-left: 3px; }
.output-controls { display: flex; justify-content: center; gap: 8px; min-width: 56px; min-height: 56px; }
.icon-pause, .icon-muted, .spinner { display: none; }
.is-playing .icon-play, .is-loading .icon-play, .is-loading .icon-pause, .is-muted .icon-unmuted { display: none; }
.is-playing .icon-pause, .is-muted .icon-muted { display: block; }
.is-loading .spinner { display: block; width: 28px; height: 28px; border: 3px solid #15171644; border-top-color: var(--bg); border-radius: 50%; animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 5px; }
button:disabled { opacity: 0.5; cursor: default; }
button[aria-pressed="true"] { border-color: var(--yellow); background: #33321c; }
@media (hover: hover) { .icon-button:hover { background: #303732; } .play-button:hover { background: #fff56b; } }
.player-status { min-height: 42px; margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.player-status.is-error { color: #ff9c96; }
.legal-footer { width: 100%; margin-top: 24px; padding-top: 18px; border-top: 1px solid #343b36; font-size: 12px; line-height: 1.5; color: var(--muted); }
audio { display: none; }

@media (max-width: 700px) {
    .stage { padding-inline: max(24px, env(safe-area-inset-left)) max(24px, env(safe-area-inset-right)); }
    h1 { font-size: 48px; }
    h1 span { display: block; }
    .festival-art { margin-top: 24px; }
}
@media (max-width: 400px) {
    .stage { padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right)); padding-top: max(24px, env(safe-area-inset-top)); }
    h1 { font-size: 40px; }
    .tagline { font-size: 15px; }
    .transport { gap: 22px; }
    .equalizer { gap: 4px; }
}
@media (max-height: 650px) {
    .stage { padding-top: max(20px, env(safe-area-inset-top)); }
    .live-badge { margin-bottom: 12px; }
    .player { padding-top: 16px; }
    .legal-footer { margin-top: 12px; padding-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .spinner { animation: none !important; }
}