/* /radio/ — Wavelength Records. A walnut 1950s set with a glowing dial; the "screen" shows whichever station is tuned.
   Base rules (no .rd-on: reduced motion) list every station one after another. */
@font-face { font-family: "Righteous"; src: url(/assets/fonts/righteous.woff2) format("woff2"); font-weight: 400; font-display: swap; }
.rd-page {
  --pg-bg: #1d1510; --pg-ink: #f4e7cf; --f-display: "Righteous", system-ui, sans-serif; --h-weight: 400;
  --amber: #ffb347; --orange: #ff6a2b; --cream: #efe1c3; --walnut: #5a3520; --muted: #b9a88c;
  --bar-bg: #120d09; --bar-fg: #f4e7cf; --tag: #ffb347; --btn-bg: #ff6a2b; --btn-fg: #fff; --order-bg: #120d09; --order-fg: #f4e7cf;
}
.rd-page h1, .rd-page h2 { letter-spacing: 0; line-height: 1; font-weight: 400; }
.rd-page .dm-bar__name { font: 400 1.4rem "Righteous", sans-serif; }
.rd-sound { margin-left: auto; border: 1px solid rgba(244, 231, 207, .3); background: transparent; color: inherit; border-radius: 999px; padding: .35rem .85rem; font: 500 .82rem var(--f-body); cursor: pointer; }
.rd-sound[aria-pressed="true"] { background: var(--amber); color: #1d1510; border-color: var(--amber); }

/* title + how-to */
.rd-intro { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem 3rem; align-items: end; padding: 1.4rem max(16px, (100vw - 1320px) / 2) 1.2rem; background: #2a1c13; }
.rd-kick { margin: 0 0 .5rem; font: 500 .74rem var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--amber); }
.rd-intro h1 { font-size: clamp(2.4rem, 5vw, 4rem); margin: 0; color: var(--cream); }
.rd-how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.rd-how li { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; padding: .8rem .9rem; border-radius: 12px; background: rgba(244, 231, 207, .05); border: 1px solid rgba(244, 231, 207, .1); font-size: .86rem; color: var(--muted); }
.rd-how b { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--amber); color: #1d1510; font: 400 .9rem "Righteous", sans-serif; }
.rd-how em { font-style: normal; color: var(--cream); }
.rd-tune { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(420px, .9fr); gap: 2rem; align-items: center; padding: 1.4rem max(16px, (100vw - 1320px) / 2) 3rem;
  background: radial-gradient(80% 70% at 30% 40%, #3a2618, #1d1510 70%); }

/* the broadcast screen */
.rd-screen { position: relative; }
.rd-station { padding: 1.4rem 0; }
.rd-fm { margin: 0 0 .6rem; font: 500 .78rem var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--amber); }
.rd-station h2 { font-size: clamp(2rem, 4vw, 3.4rem); margin: 0 0 1rem; color: var(--cream); }
.rd-station p { color: var(--muted); max-width: 36rem; }
.rd-static, .rd-searching { display: none; }
.rd-on .rd-screen { height: min(62svh, 600px); border-radius: 28px; overflow: hidden; background: #140e0a; box-shadow: inset 0 0 0 10px #2b1d13, inset 0 0 80px rgba(0, 0, 0, .8), 0 30px 70px -40px #000; }
.rd-on .rd-station { position: absolute; inset: 0; padding: 2.2rem 2.4rem; opacity: 0; visibility: hidden; overflow: auto; scrollbar-width: none; }
.rd-on .rd-station.is-on { visibility: visible; }
.rd-on .rd-static { display: block; position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; mix-blend-mode: screen; pointer-events: none; z-index: 3; }
.rd-on .rd-searching { display: block; position: absolute; left: 50%; top: 50%; translate: -50% -50%; margin: 0; z-index: 4; font: 400 1.6rem "Righteous", sans-serif; color: var(--cream); letter-spacing: .1em; text-shadow: 0 0 20px #000; transition: opacity .3s; animation: rd-blink 1.2s steps(2) infinite; }
@keyframes rd-blink { 50% { color: rgba(239, 225, 195, .4); } }
.rd-screen.is-clear .rd-station.is-on { filter: none !important; transform: none !important; }

/* new in: record sleeves drawn in CSS */
.rd-records { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem 1.4rem; }
.rd-records li { display: grid; gap: .1rem; font-size: .78rem; color: var(--muted); }
.rd-records b { color: var(--cream); font-weight: 600; font-size: .88rem; margin-top: .3rem; }
.rd-rec { position: relative; aspect-ratio: 1; width: min(100%, 16svh); }
.rd-vinyl { position: absolute; top: 3%; left: 3%; width: 94%; height: 94%; border-radius: 50%; transition: translate .45s cubic-bezier(.3, 1.3, .5, 1), rotate .9s;
  background: radial-gradient(circle, #d9a441 0 13%, #3a2a12 13.5% 15%, transparent 15.5%), repeating-radial-gradient(circle, #111 0 2px, #1d1d1d 2px 3px); box-shadow: 0 4px 10px rgba(0, 0, 0, .5); }
.rd-sleeve { position: relative; height: 100%; border-radius: 3px; overflow: hidden; box-shadow: 0 10px 22px -10px #000, inset 0 0 0 1px rgba(255, 255, 255, .06); transition: translate .45s cubic-bezier(.3, 1.3, .5, 1); }
.rd-sleeve img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-sleeve::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(0, 0, 0, .55)), radial-gradient(circle at 50% 50%, transparent 55%, rgba(255, 255, 255, .06) 56%, transparent 62%); pointer-events: none; }
.rd-sleeve__band, .rd-sleeve__title { position: absolute; left: 8%; right: 8%; z-index: 1; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.rd-sleeve__band { top: 7%; font: 400 clamp(.6rem, 1vw, .8rem) "Righteous", sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.rd-sleeve__title { bottom: 7%; font: 400 clamp(.75rem, 1.4vw, 1.05rem) "Righteous", sans-serif; line-height: 1.05; }
.rd-records li:hover .rd-vinyl { translate: 34% 0; rotate: 120deg; }
.rd-records li:hover .rd-sleeve { translate: -6% 0; }
.rd-page .dm-note { max-width: 30rem; }
/* the "demo only" note pops up as a card over the bottom of the radio screen, instead of pushing below it */
.rd-on .rd-pop { position: absolute; left: 1.6rem; right: 1.6rem; bottom: 1.4rem; z-index: 5; max-width: none; margin: 0; padding: 1rem 2.6rem 1rem 1.1rem;
  background: rgba(29, 21, 16, .96); border: 1.5px solid var(--amber); border-radius: 14px; box-shadow: 0 18px 40px -12px #000; color: var(--cream); animation: rd-pop .35s cubic-bezier(.3, 1.4, .5, 1); }
.rd-pop a { color: var(--amber); }
.rd-pop__x { position: absolute; right: .5rem; top: .45rem; width: 1.9rem; height: 1.9rem; border: 0; border-radius: 50%; background: rgba(244, 231, 207, .1); color: var(--cream); font-size: 1.1rem; cursor: pointer; }
@keyframes rd-pop { from { opacity: 0; transform: translateY(12px); } }

.rd-gigs { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .6rem; }
.rd-gigs li { display: grid; grid-template-columns: 7rem 1fr auto; gap: 1rem; align-items: center; padding: .9rem 1rem; border-radius: 12px; background: rgba(244, 231, 207, .05); border: 1px solid rgba(244, 231, 207, .1); }
.rd-gigs b { font: 400 1.05rem "Righteous", sans-serif; color: var(--amber); }
.rd-gigs span { color: var(--muted); font-size: .9rem; } .rd-gigs strong { display: block; color: var(--cream); font-size: 1rem; }
.rd-gigs em { font-style: normal; color: var(--cream); }
.rd-small { font-size: .85rem; }
.rd-stats, .rd-hours { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin: 1.4rem 0; }
.rd-stats div, .rd-hours div { padding: 1rem; border-radius: 12px; background: rgba(244, 231, 207, .05); border: 1px solid rgba(244, 231, 207, .1); }
.rd-stats dt, .rd-hours dt { font: 500 .7rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.rd-stats dd, .rd-hours dd { margin: .3rem 0 0; font: 400 1.6rem "Righteous", sans-serif; color: var(--cream); }

/* the radio */
.rd-radio { display: none; }
.rd-on .rd-radio { display: block; }
.rd-cab { position: relative; padding: 1.4rem 1.4rem 1.2rem; border-radius: 34px 34px 22px 22px;
  background: linear-gradient(90deg, rgba(0, 0, 0, .25), transparent 12%, transparent 88%, rgba(0, 0, 0, .25)), repeating-linear-gradient(92deg, #6b3f24 0 7px, #5a3520 7px 15px, #714428 15px 19px), #5a3520;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .12), inset 0 -6px 0 rgba(0, 0, 0, .3), 0 40px 60px -30px #000; }
.rd-grille { position: relative; height: 190px; border-radius: 18px; background: repeating-linear-gradient(90deg, #d9c9a6 0 3px, #bfae8a 3px 7px); box-shadow: inset 0 0 0 6px #3b2416, inset 0 6px 18px rgba(0, 0, 0, .4); display: grid; place-items: center; }
.rd-badge { padding: .3rem 1.1rem; border-radius: 999px; background: linear-gradient(#e9c078, #b88a3e); color: #3b2416; font: 400 1.35rem "Righteous", sans-serif; box-shadow: 0 2px 4px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .5); }
.rd-dial { position: relative; height: 80px; margin: 1rem 0; border-radius: 12px; background: linear-gradient(#f6d58e, #e9b862); box-shadow: inset 0 0 0 4px #3b2416, inset 0 0 30px rgba(255, 150, 40, .6), 0 0 30px rgba(255, 179, 71, .25); overflow: hidden; }
.rd-scale { position: absolute; inset: 0; }
.rd-scale span { position: absolute; top: 5px; translate: -50% 0; padding-top: 13px; font: 400 .72rem "Righteous", sans-serif; color: #3b2416; }
.rd-scale span::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 8px; background: #5a3520; }
.rd-scale span.big::before { height: 12px; width: 2px; }
.rd-scale em { position: absolute; bottom: 6px; translate: -50% 0; font: 400 .66rem "Righteous", sans-serif; font-style: normal; color: #7a2f10; white-space: nowrap; letter-spacing: .04em; }
.rd-needle { position: absolute; top: 4px; bottom: 4px; width: 3px; margin-left: -1.5px; background: var(--orange); box-shadow: 0 0 8px rgba(255, 90, 30, .8); border-radius: 2px; }
.rd-controls { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; }
.rd-meter { position: relative; width: 78px; height: 56px; border-radius: 10px 10px 4px 4px; background: #f3e5c2; box-shadow: inset 0 0 0 3px #3b2416; overflow: hidden; }
.rd-meter i { position: absolute; left: 50%; bottom: 8px; width: 2px; height: 40px; margin-left: -1px; background: #222; transform-origin: 50% 100%; }
.rd-meter span { position: absolute; left: 0; right: 0; bottom: 2px; text-align: center; font: 500 .5rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #3b2416; }
.rd-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; }
.rd-presets button { border: 0; border-radius: 8px 8px 6px 6px; padding: .45rem .2rem .55rem; background: linear-gradient(#f3e5c2, #d6c39a); color: #3b2416; font: 600 .66rem var(--f-body); line-height: 1.15; cursor: pointer;
  box-shadow: 0 5px 0 #8a6a3c, 0 7px 8px rgba(0, 0, 0, .4); transition: transform .1s, box-shadow .1s; }
.rd-presets b { display: block; font: 400 .9rem "Righteous", sans-serif; }
.rd-presets button.is-down { transform: translateY(4px); box-shadow: 0 1px 0 #8a6a3c, 0 2px 4px rgba(0, 0, 0, .4); background: linear-gradient(#ffc76b, #e9a441); }
.rd-knob { --a: 0deg; position: relative; width: 110px; height: 110px; border-radius: 50%; cursor: grab; touch-action: none; outline-offset: 4px;
  background: radial-gradient(circle at 35% 30%, #fff5dc, #d8c296 45%, #9c7f4c 100%); box-shadow: 0 8px 14px rgba(0, 0, 0, .5), inset 0 -4px 8px rgba(0, 0, 0, .25); }
.rd-knob::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: repeating-conic-gradient(rgba(0, 0, 0, .12) 0 4deg, transparent 4deg 12deg); rotate: var(--a); }
.rd-knob i { position: absolute; inset: 0; rotate: var(--a); }
.rd-knob i::after { content: ""; position: absolute; left: 50%; top: 10px; width: 6px; height: 22px; margin-left: -3px; border-radius: 3px; background: #3b2416; }
.rd-knob.is-drag { cursor: grabbing; }
.rd-hint { margin: .9rem 0 0; font-size: .82rem; color: var(--muted); text-align: center; }

@media (max-width: 900px) {
  .rd-tune { grid-template-columns: minmax(0, 1fr); padding-top: 1rem; gap: 1rem; min-height: 0; }
  .rd-on .rd-screen { height: 56svh; border-radius: 20px; }
  .rd-on .rd-station { padding: 1.4rem 1.2rem; }
  .rd-station h1, .rd-station h2 { font-size: 2.1rem; }
  .rd-records { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; } .rd-sleeve__band, .rd-sleeve__title { font-size: .5rem; } .rd-records li > span { display: none; } .rd-records b { font-size: .72rem; }
  .rd-intro { grid-template-columns: minmax(0, 1fr); padding-top: 1.4rem; } .rd-how { grid-template-columns: minmax(0, 1fr); gap: .4rem; } .rd-how li { padding: .55rem .7rem; font-size: .8rem; }
  .rd-gigs li { grid-template-columns: 1fr auto; } .rd-gigs b { grid-column: 1 / -1; }
  .rd-stats, .rd-hours { grid-template-columns: minmax(0, 1fr); }
  .rd-grille { height: 70px; } .rd-cab { padding: 1rem; }
  .rd-knob { width: 78px; height: 78px; } .rd-meter { display: none; } .rd-controls { grid-template-columns: 1fr auto; }
}

/* Own fonts (not the studio's Hanken Grotesk / IBM Plex Mono): body text and labels */
@font-face { font-family: "Work Sans"; src: url(/assets/fonts/work-sans-normal-300-800.woff2) format("woff2"); font-weight: 300 800; font-display: swap; }
.rd-page { --f-body: "Work Sans", system-ui, sans-serif; --f-mono: "Work Sans", system-ui, sans-serif; }