/* Rewind Hollow -- /radio/ (2026-10-14). The attic score on a cassette-tape card, the long hours beside it.
   One column on phones; two side by side from 900px. Colours from tokens.css only, plus the paper of the
   kitchen deck's cards, so the radio reads as the same attic. */
.radio-wrap { max-width: 1100px; display: grid; gap: var(--sp-4); }
@media (min-width: 900px) { .radio-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.radio-room h2 { margin: 2px 0 6px; }
.radio-sub { margin: 0 0 var(--sp-2); color: var(--sage); font-style: italic; }

/* the tape: a cassette J-card in paper */
.radio-tape { padding: var(--sp-3); border-radius: 6px; background: #f3ead8; color: #2b2018; box-shadow: 0 20px 36px -18px #000;
  background-image: repeating-linear-gradient(transparent 0 27px, rgba(80,110,150,.15) 27px 28px); }
.radio-tape .eyebrow { color: #974838; }
.radio-tape h2 { color: #2b2018; }
.radio-tape .radio-sub { color: #5f4f40; }
.radio-deck { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 12px; background: #2b2018; }
.radio-play, .radio-skip { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer; font-size: 20px;
  background: #f3ead8; color: #2b2018; box-shadow: 0 3px 0 #000; }
.radio-skip { width: 42px; height: 42px; font-size: 15px; }
.radio-play[aria-pressed='true'] { background: var(--candle); }
.radio-play:focus-visible, .radio-skip:focus-visible { outline: 3px solid var(--candle); outline-offset: 3px; }
.radio-now { flex: 1; min-width: 0; margin: 0; color: #f3ead8; font-family: var(--font-typed); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.radio-list { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: grid; gap: 2px; counter-reset: t; }
.radio-list li { counter-increment: t; border-bottom: 1px dashed rgba(60,50,40,.25); padding: 6px 0; }
.radio-list button { display: flex; width: 100%; gap: 10px; align-items: baseline; border: 0; background: none; padding: 4px 0; cursor: pointer;
  color: #2b2018; font-family: var(--font-body); font-size: 16px; text-align: left; }
.radio-list button::before { content: counter(t, decimal-leading-zero); font-family: var(--font-typed); font-size: 12px; color: #974838; }
.radio-list .n { flex: 1; font-weight: 600; }
.radio-list .d { font-family: var(--font-typed); font-size: 12px; color: #5f4f40; }
.radio-list .b { display: block; margin: 0 0 0 30px; font-size: 13.5px; font-style: italic; color: #5f4f40; }
.radio-list button[aria-current='true'] .n { color: #974838; }
.radio-list button:focus-visible { outline: 2px solid #974838; outline-offset: 2px; }

/* the hours */
.radio-hour { margin-top: var(--sp-2); }
.radio-frame { padding: 8px; background: #f3ead8; border-radius: 4px; box-shadow: 0 16px 30px -16px #000; }
.radio-frame .yt-facade, .radio-frame .yt-frame { max-width: none; width: 100%; aspect-ratio: 16 / 9; }
.radio-frame .yt-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.radio-hour h3 { margin: var(--sp-2) 0 2px; }
.radio-meta { margin: 0; color: var(--sage); font-size: 14px; }
.radio-link { margin: 6px 0 0; font-size: 14px; }
.radio-more { margin-top: var(--sp-3); color: var(--sage); font-size: 15px; }