/* The vintage radio to tune: a forties valve radio in walnut on a deep teal wall, lit by a lamp from the left. The
   radio is one SVG, 600 by 430 units, as wide as the page allows and as tall as the box allows; the script draws the
   grain, the knurling, the scale and the static and moves the needle, the knobs, the keys and the glow. */
:root {
  --wall: #18403d;          /* the wall behind the radio */
  --wall-dark: #0f2b29;     /* the wall in the corners */
  --lamp: #f3c67a;          /* the lamp light on the wall */
  --wood: #7a4322;          /* the walnut */
  --wood-light: #a8653a;    /* the walnut where the light hits */
  --wood-dark: #4a2412;     /* the walnut in the shadow */
  --grain: #3a1a0b;         /* the grain lines */
  --cloth: #9c7442;         /* the speaker cloth's weft */
  --cloth-light: #c9a46a;   /* the cloth's warp */
  --cloth-dark: #3a2312;    /* the cloth's shadow between the threads */
  --valve: #ff8a2b;         /* the valves glowing behind the cloth */
  --amber: #f0a43a;         /* the dial lit from behind */
  --amber-light: #ffe2a6;   /* the top of the lit dial */
  --glass-off: #4a3b2a;     /* the dial when the radio is off */
  --ink: #3b1f0e;           /* the printing on the dial */
  --needle: #d8321f;        /* the dial's needle */
  --eye: #6fe08a;           /* the magic eye */
  --bakelite: #ead6ae;      /* the cream bakelite of the knobs and keys */
  --bakelite-light: #fff4dc;/* the bakelite in the light */
  --bakelite-dark: #b99a66; /* the bakelite in the shadow */
  --brass: #d3a64a;         /* the brass badge */
  --paper: #fbf1dd;         /* the text on the wall */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background:
    radial-gradient(70% 60% at 18% 0%, color-mix(in srgb, var(--lamp) 34%, transparent), transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 46px, rgb(255 255 255 / 0.03) 46px 48px),
    radial-gradient(120% 100% at 50% 30%, var(--wall), var(--wall-dark));
  color: var(--paper);
  font-family: 'Instrument Sans Variable', system-ui, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.stage {
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  justify-items: center;
  padding: clamp(10px, 3vh, 26px) clamp(14px, 4vw, 44px) clamp(10px, 3vh, 24px);
  gap: clamp(4px, 1.6vh, 14px);
}

.top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}

.brand {
  font-family: 'Fraunces Variable', Georgia, serif;
  font-weight: 700;
  font-size: clamp(18px, 3.4vh, 26px);
  letter-spacing: -0.01em;
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
}

.tag {
  font-size: clamp(10px, 1.8vh, 13px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
  text-align: right;
}

.radio {
  width: min(94vw, 780px, calc((100vh - 140px) * 600 / 430));
  touch-action: none;
}

.set {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  user-select: none;
  -webkit-user-select: none;
}

.shadow { fill: rgb(0 0 0 / 0.35); filter: blur(6px); }
.foot { fill: #24120a; }
.bevel { fill: none; stroke: rgb(255 214 170 / 0.35); stroke-width: 2; }
.front { stroke: none; }
.front-edge { fill: none; stroke: rgb(40 16 6 / 0.55); stroke-width: 3; }
.cloth-shade { fill: none; stroke: rgb(20 8 2 / 0.55); stroke-width: 18; }
.grille-rim { fill: none; stroke: var(--wood-dark); stroke-width: 4; }
.valve-glow { mix-blend-mode: screen; }
.cone { fill: none; stroke: rgb(20 8 2 / 0.22); stroke-width: 10; }
.fret path { fill: var(--wood); stroke: var(--wood-dark); stroke-width: 1.4; }

.badge {
  font-family: 'Instrument Sans Variable', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-anchor: middle;
  fill: #4a3108;
}

.dial-rim { fill: var(--wood-dark); stroke: #2a1207; stroke-width: 1.5; }
.glass-edge { fill: none; stroke: rgb(255 240 210 / 0.35); stroke-width: 1.2; }
.scale-line { stroke: var(--ink); stroke-width: 1; }
.scale-num { font-size: 9.5px; font-weight: 600; fill: var(--ink); text-anchor: middle; }
.scale-tick { stroke: var(--ink); }
.station-name { font-family: 'Fraunces Variable', serif; font-size: 10px; font-style: italic; fill: var(--ink); text-anchor: middle; }
.now-station { font-family: 'Fraunces Variable', serif; font-size: 13px; font-weight: 700; fill: var(--ink); text-anchor: middle; }
.now-song { font-size: 8.5px; letter-spacing: 0.06em; fill: var(--ink); text-anchor: middle; }
.needle { stroke: var(--needle); stroke-width: 2.2; stroke-linecap: round; }
.needle-foot { fill: var(--needle); }
.noise line { stroke: #fff6e0; stroke-linecap: round; }

.eye-rim { fill: #2a1a10; stroke: #8c6a3e; stroke-width: 1.5; }
.eye-glass { fill: none; stroke: rgb(255 255 255 / 0.35); stroke-width: 1; }

.knob { cursor: grab; outline: none; }
.knob:active { cursor: grabbing; }
.knob-shadow { fill: rgb(20 8 2 / 0.45); }
.knob-cap { fill: url(#bakelite); stroke: rgb(120 90 50 / 0.55); stroke-width: 1; }
.knob-ring { fill: none; stroke: rgb(120 90 50 / 0.45); stroke-width: 0.8; }
.knob-mark { stroke: #5b3a1c; stroke-width: 2.4; stroke-linecap: round; }
.knob-shine { fill: rgb(255 255 255 / 0.45); }
.knob:focus-visible .knob-cap { stroke: var(--amber); stroke-width: 3; }
.knurl { fill: var(--bakelite-dark); }
.small { font-size: 7.5px; letter-spacing: 0.24em; font-weight: 600; fill: var(--bakelite); text-anchor: middle; opacity: 0.8; }

.key { cursor: pointer; outline: none; }
.key-well { fill: #2a1207; }
.key-face { stroke: rgb(120 90 50 / 0.6); stroke-width: 0.8; }
.key-label { font-size: 9px; font-weight: 650; letter-spacing: 0.06em; fill: #5b3a1c; text-anchor: middle; pointer-events: none; }
.key-label--power { fill: #a82a18; }
.key:focus-visible .key-face { stroke: var(--amber); stroke-width: 2.5; }

.onair {
  margin: 0;
  font-size: clamp(11px, 2vh, 15px);
  text-align: center;
}

.onair__label {
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.78em;
  opacity: 0.7;
  margin-right: 0.6em;
}

[data-caption] {
  font-family: 'Fraunces Variable', serif;
  font-style: italic;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-height: 520px) {
  .radio { width: min(94vw, calc((100vh - 110px) * 600 / 430)); }
}