Redesign: THE WAKING SET — talking dial-glass, tube warm-up, real type, analog VU

radio.html

@@ -7,161 +7,167 @@
 
 <!--
   ====================================================================
-  NIGHTWAVE - a self-contained skeuomorphic 1970s analog radio.
-  Pure HTML / CSS / Canvas / SVG / Web Audio. No external assets.
+  NIGHTWAVE — "THE WAKING SET".
+  A self-contained skeuomorphic 1970s analog radio whose single backlit
+  slide-rule dial-glass is the tuner, the now-playing plate, AND the
+  surface Sam Dusk's voice prints itself onto (the "ignition trail").
+  Pure HTML / CSS / Canvas / SVG / Web Audio. No external assets except
+  the Google webfonts below — all of which fall back to system fonts.
   Works both at top-level (devserver) AND inside <iframe srcdoc>.
 
-  The DJ, the music, and the calls are all live. The signal gauge reflects how
-  well you are tuned to the station (98.6).
+  The DJ, the music, and the calls are all live. The signal meter reflects
+  how well you are tuned to the station (98.6).
 -->
 
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Marcellus+SC&family=Fraunces:ital,opsz,wght@0,9..144,300..600;1,9..144,300..500&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
+
 <style>
 /* ===================================================================
    1. PALETTE & GLOBALS
    =================================================================== */
 :root{
-  --walnut-0:#3a2415;
+  --walnut-0:#1C0F08;       /* deep matte body              */
   --walnut-1:#2b1a10;
   --walnut-2:#1d1109;
   --walnut-3:#140b05;
-  --ember:#ff7a18;
+  --walnut-mid:#5A3418;     /* figured grain mid            */
+  --ember:#ff7a18;          /* live word ignition + needle  */
   --amber:#ffb347;
   --amber-dim:#c87a2a;
+  --filament:#FFB347;       /* backlight glow + warm-up     */
   --ivory:#f6e7c8;
   --ivory-dim:#b9a884;
+  --dial-ivory:#F3E4C0;     /* backlit celluloid (lit)      */
+  --foxed:#9C8E73;          /* ghosted prior lines          */
   --metal-hi:#d8d2c4;
   --metal-mid:#8d8678;
   --metal-lo:#3c382f;
+  --brass:#B8893C;          /* aged metal trim              */
+  --brass-hi:#e7c98a;
+  --brass-dark:#5a3b15;
+  --teal:#3FB8C4;           /* the ONE cool note: 98.6 lock */
+  --ink:#1d1107;            /* engraved text on brass       */
   --on-air:#ff5a2c;
   /* mood-driven accent (overwritten by JS) */
   --mood:#ffb347;
   --mood-soft:#ffd79b;
   --dial-glow: 0.0; /* 0..1 signal clarity, drives glow intensity */
+  --warm: 0;        /* 0..1 power-on warm-up progress (JS) */
+  --lock: 0;        /* 0..1 carrier lock (JS) */
 }
 
 *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
-html,body{margin:0;padding:0;height:100%}
+html,body{margin:0;padding:0;min-height:100%}
 body{
-  font-family:"Futura","Avenir Next",-apple-system,"Segoe UI",sans-serif;
-  color:var(--ivory);
+  font-family:"Fraunces",Georgia,"Times New Roman",serif;
+  color:var(--dial-ivory);
   background:
-    radial-gradient(120% 90% at 50% -10%, #241813 0%, #120a05 55%, #060302 100%);
+    radial-gradient(125% 95% at 50% -8%, #241813 0%, #110a05 52%, #050302 100%);
   display:flex;align-items:center;justify-content:center;
-  min-height:100vh;overflow:hidden;
+  min-height:100vh;overflow-x:hidden;padding:34px 18px;
   user-select:none;-webkit-user-select:none;
 }
 
-/* warm lamp glow that breathes behind the set */
+/* warm lamp glow that breathes behind the set; dips/swells with warm-up */
 .room-lamp{
   position:fixed;inset:0;pointer-events:none;z-index:0;
-  background:radial-gradient(40% 36% at 50% 30%,
-     rgba(255,150,60,0.18) 0%, rgba(255,120,40,0.06) 40%, transparent 70%);
-  transition:opacity .8s ease, background .8s ease;
-}
-body.powered .room-lamp{
-  background:radial-gradient(46% 42% at 50% 32%,
-     rgba(255,165,71,0.30) 0%, rgba(255,120,40,0.10) 42%, transparent 72%);
+  background:radial-gradient(44% 40% at 50% 30%,
+     rgba(255,160,70, calc(0.06 + 0.22*var(--warm))) 0%,
+     rgba(255,120,40,0.05) 44%, transparent 72%);
+  transition:opacity .8s ease;
 }
+body.powered .room-lamp{ opacity:1; }
 body.intimate .room-lamp{ /* direct_address: dim the room */
-  opacity:.35;
+  opacity:.45;
 }
 
 /* ===================================================================
-   2. CABINET (wood-grain, no images)
+   2. STAGE + CABINET (figured walnut, perspective, feet)
    =================================================================== */
+.stage{position:relative;z-index:1;perspective:1700px}
 .cabinet{
-  position:relative;z-index:1;
-  width:min(96vw, 880px);
-  padding:26px 26px 22px;
-  border-radius:30px;
+  position:relative;
+  width:min(94vw, 860px);
+  transform:rotateX(4deg);
+  transform-origin:50% 100%;
+  padding:22px 26px 26px;
+  border-radius:14px;
   background:
-    /* fine vertical grain streaks */
-    repeating-linear-gradient(92deg,
-      rgba(0,0,0,0.00) 0px, rgba(0,0,0,0.06) 2px,
-      rgba(255,180,90,0.025) 4px, rgba(0,0,0,0.00) 7px),
-    /* broad grain waves */
-    repeating-linear-gradient(88deg,
-      rgba(0,0,0,0.10) 0px, rgba(120,70,30,0.04) 22px,
-      rgba(0,0,0,0.12) 46px, rgba(150,90,40,0.05) 70px),
-    /* warm body shading */
-    radial-gradient(140% 120% at 30% 0%, #4a2e1b 0%, var(--walnut-1) 45%, var(--walnut-3) 100%);
+    linear-gradient(90deg, rgba(255,220,150,.06), transparent 18%, rgba(0,0,0,.14) 52%, transparent 82%, rgba(255,220,150,.04)),
+    radial-gradient(130% 110% at 30% 0%, var(--walnut-mid) 0%, var(--walnut-1) 46%, var(--walnut-0) 100%);
   box-shadow:
-    0 2px 0 rgba(255,200,140,0.10) inset,
-    0 -30px 60px rgba(0,0,0,0.55) inset,
-    0 40px 80px -20px rgba(0,0,0,0.85),
-    0 2px 4px rgba(255,210,150,0.08);
-  border:1px solid rgba(255,200,140,0.08);
-}
-/* rounded inner bezel */
+    inset 0 2px 0 rgba(255,211,145,.16),
+    inset 0 -38px 72px rgba(0,0,0,.55),
+    0 40px 80px -18px rgba(0,0,0,.9);
+  border:1px solid rgba(255,200,140,.08);
+}
+/* figured-walnut grain via SVG turbulence (gallery-grade, not flat gradients) */
+.cabinet::before{
+  content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;
+  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.09' numOctaves='3' seed='7'/><feColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
+  background-size:520px 100%;
+  mix-blend-mode:overlay;opacity:.5;
+}
+/* rubber feet */
+.foot{position:absolute;bottom:-9px;width:96px;height:16px;border-radius:4px;
+  background:linear-gradient(180deg,#170f0a,#050302);box-shadow:0 9px 16px rgba(0,0,0,.55)}
+.foot.l{left:70px}.foot.r{right:70px}
+
+/* inset faceplate */
 .bezel{
   position:relative;
-  border-radius:20px;
-  padding:20px;
-  background:
-    linear-gradient(180deg, var(--walnut-2), var(--walnut-3));
+  border-radius:10px;
+  padding:18px;
+  background:linear-gradient(180deg, #160d06, #0c0703);
+  border:1px solid rgba(181,138,58,.3);
   box-shadow:
-    0 1px 0 rgba(255,200,140,0.06) inset,
-    0 18px 40px rgba(0,0,0,0.6) inset;
-  border:1px solid rgba(0,0,0,0.5);
+    inset 0 0 0 1px rgba(255,228,177,.05),
+    inset 0 16px 40px rgba(0,0,0,.5);
 }
-/* brushed-metal trim helper */
-.metal{
-  background:
-    repeating-linear-gradient(90deg,
-      rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px,
-      rgba(0,0,0,0.05) 2px, rgba(0,0,0,0.05) 3px),
-    linear-gradient(180deg, var(--metal-hi) 0%, var(--metal-mid) 45%, var(--metal-lo) 100%);
-  border:1px solid rgba(0,0,0,0.5);
-  box-shadow:0 1px 1px rgba(255,255,255,0.4) inset, 0 -2px 3px rgba(0,0,0,0.4) inset;
-}
-
-/* now-playing plate */
-.nowplaying{display:flex;align-items:center;gap:10px;justify-content:center;margin:2px auto 10px;
-  max-width:440px;padding:6px 14px;border-radius:8px;
-  background:linear-gradient(180deg,#1c1209,#120a05);border:1px solid rgba(255,179,71,.18);
-  box-shadow:inset 0 1px 0 rgba(255,200,120,.08);font-size:12.5px;letter-spacing:.04em}
-.nowplaying .np-text{color:var(--ivory-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-.nowplaying.playing .np-text{color:var(--amber);text-shadow:0 0 10px rgba(255,179,71,.35)}
-.nowplaying .np-eq{display:inline-flex;gap:2px;align-items:flex-end;height:12px;opacity:.35}
-.nowplaying.playing .np-eq{opacity:1}
-.nowplaying .np-eq i{width:3px;height:4px;background:var(--amber);border-radius:1px}
-.nowplaying.playing .np-eq i{animation:eq .9s ease-in-out infinite}
-.nowplaying.playing .np-eq i:nth-child(2){animation-delay:.15s}
-.nowplaying.playing .np-eq i:nth-child(3){animation-delay:.30s}
-.nowplaying.playing .np-eq i:nth-child(4){animation-delay:.45s}
-@keyframes eq{0%,100%{height:4px}50%{height:12px}}
-@media (prefers-reduced-motion:reduce){.nowplaying.playing .np-eq i{animation:none;height:8px}}
 
-/* top band: brand plate + on-air */
-.topband{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
-.brandplate{
-  padding:8px 16px;border-radius:8px;
-  display:flex;flex-direction:column;line-height:1;
+/* ===================================================================
+   3. HEADER — brushed-brass strip, engraved wordmark, FM, ON AIR tube
+   =================================================================== */
+.topband{
+  display:flex;align-items:center;justify-content:space-between;gap:14px;
+  padding:9px 16px;margin-bottom:14px;border-radius:7px;
+  background:
+    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, rgba(0,0,0,.05) 2px 3px),
+    linear-gradient(180deg, var(--brass-hi) 0%, var(--brass) 46%, var(--brass-dark) 100%);
+  border:1px solid rgba(0,0,0,.5);
+  box-shadow:0 1px 1px rgba(255,255,255,.4) inset, 0 -2px 3px rgba(0,0,0,.4) inset, 0 2px 6px rgba(0,0,0,.4);
 }
+.brandplate{display:flex;align-items:baseline;line-height:1}
 .brandplate .name{
-  font-weight:800;letter-spacing:.34em;font-size:19px;
-  color:#2a2114;text-shadow:0 1px 0 rgba(255,255,255,0.45);
+  font-family:"Marcellus SC",Georgia,serif;
+  font-size:23px;letter-spacing:.30em;color:var(--ink);
+  /* engraved into the brass */
+  text-shadow:0 1px 0 rgba(255,240,200,.45), 0 -1px 1px rgba(0,0,0,.55);
 }
 .brandplate .sub{
-  margin-top:5px;font-size:9px;letter-spacing:.42em;color:#4a3d28;font-weight:700;
+  font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.12em;color:#3a2a12;
+  padding-left:12px;border-left:1px solid rgba(0,0,0,.3);margin-left:12px;
+}
+.topband .right{display:flex;align-items:center;gap:14px}
+.hostplate{
+  font-family:"Marcellus SC",Georgia,serif;font-size:9.5px;letter-spacing:.22em;color:#2b2114;
+  padding:5px 10px;border-radius:3px;
+  background:linear-gradient(180deg,#d6c39a,#7a6240);
+  border:1px solid rgba(0,0,0,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
 }
 
 /* ON AIR tube */
-.onair{
-  display:flex;align-items:center;gap:10px;
-  padding:9px 16px;border-radius:30px;
-  background:linear-gradient(180deg,#2a1a10,#160c06);
-  border:1px solid rgba(0,0,0,0.6);
-  box-shadow:0 1px 0 rgba(255,200,140,0.06) inset;
-}
+.onair{display:flex;align-items:center;gap:8px}
 .onair .tube{
-  width:14px;height:14px;border-radius:50%;
+  width:13px;height:13px;border-radius:50%;
   background:radial-gradient(circle at 35% 30%, #5a2a1a, #2a0f08);
-  box-shadow:0 0 0 1px rgba(0,0,0,0.5) inset;
-  transition:background .25s, box-shadow .25s;
+  box-shadow:0 0 0 1px rgba(0,0,0,.5) inset;
+  transition:background .3s, box-shadow .3s;
 }
 .onair .label{
-  font-size:11px;letter-spacing:.32em;font-weight:800;color:#6a5640;
+  font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.28em;font-weight:700;color:#3a2a12;
   transition:color .3s, text-shadow .3s;
 }
 body.broadcasting .onair .tube{
@@ -169,259 +175,316 @@ body.broadcasting .onair .tube{
   box-shadow:0 0 10px var(--on-air), 0 0 22px rgba(255,90,44,0.6), 0 0 0 1px rgba(0,0,0,0.4) inset;
 }
 body.broadcasting .onair .label{
-  color:#ffd2b0;text-shadow:0 0 8px rgba(255,120,60,0.8);
+  color:#2a1c0c;text-shadow:0 0 7px rgba(255,150,80,.6);
 }
 
 /* ===================================================================
-   3. DIAL SCALE + NEEDLE
+   4. THE HERO — one wide backlit slide-rule DIAL-GLASS that talks
    =================================================================== */
-.dialwrap{position:relative;margin:4px 0 12px;border-radius:14px;padding:3px}
+.dialwrap{position:relative;border-radius:9px}
 .dial-frame{
-  position:relative;border-radius:12px;overflow:hidden;
-  padding:14px 18px 10px;
+  position:relative;border-radius:9px;overflow:hidden;
+  height:300px;
+  border:1px solid rgba(0,0,0,.6);
   background:
-    linear-gradient(180deg, rgba(40,24,14,0.9), rgba(20,12,6,0.95));
-  box-shadow:0 10px 26px rgba(0,0,0,0.6) inset, 0 0 0 1px rgba(0,0,0,0.6) inset;
+    linear-gradient(180deg, rgba(20,12,6,.9), rgba(10,6,3,.96));
+  box-shadow:inset 0 0 0 1px rgba(255,228,177,.05), inset 0 22px 50px rgba(0,0,0,.6);
   cursor:ew-resize;
   touch-action:none;
 }
-/* glowing ivory dial face */
-.dial-face{
-  position:relative;height:96px;border-radius:8px;
-  background:
-    linear-gradient(180deg, rgba(246,231,200,0.10), rgba(246,231,200,0.02));
-  box-shadow:0 0 0 1px rgba(255,210,150,0.10) inset;
-  overflow:hidden;
-}
-/* the warm backlight behind the dial, intensity from --dial-glow */
+/* backlit celluloid — intensity follows warm-up */
 .dial-light{
-  position:absolute;inset:0;
-  background:radial-gradient(120% 160% at var(--needle-x,50%) 120%,
-     rgba(255,179,71,0.55) 0%, rgba(255,122,24,0.18) 35%, transparent 65%);
-  opacity:calc(0.25 + 0.75 * var(--dial-glow));
-  transition:opacity .3s ease;
+  position:absolute;inset:0;pointer-events:none;z-index:1;
+  background:
+    radial-gradient(120% 150% at var(--needle-x,50%) 120%, rgba(255,179,71, calc(.22*var(--warm) + .30*var(--dial-glow))) 0%, transparent 60%),
+    linear-gradient(180deg, rgba(243,228,192, calc(.05*var(--warm))) 0%, rgba(255,179,71, calc(.10*var(--warm))) 100%);
+  mix-blend-mode:screen;
+  transition:opacity .3s;
+}
+/* filament bloom mask used only during warm-up (radius driven by --warm) */
+.filament{
+  position:absolute;inset:0;pointer-events:none;z-index:1;opacity:calc(1 - var(--lock));
+  background:radial-gradient(circle at 50% 78%,
+    rgba(255,200,120, calc(.5*var(--warm))) 0%,
+    rgba(255,160,70, calc(.18*var(--warm))) calc(8% + 60%*var(--warm)),
+    transparent calc(20% + 70%*var(--warm)));
   mix-blend-mode:screen;
 }
-.dial-canvas{position:absolute;inset:0;width:100%;height:100%}
+/* glass reflection + dust (dd.md polish) */
+.sheen{
+  position:absolute;inset:0;pointer-events:none;z-index:6;mix-blend-mode:screen;
+  background:
+    linear-gradient(106deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 16%, transparent 19% 70%, rgba(255,255,255,.05) 72%, transparent 80%),
+    radial-gradient(80% 60% at 50% 0%, rgba(255,245,210,.06), transparent 65%);
+}
+.sheen .dust{
+  position:absolute;inset:0;opacity:.16;
+  background:
+    radial-gradient(circle at 17% 34%, #fff 0 1px, transparent 1.5px),
+    radial-gradient(circle at 68% 58%, #fff 0 1px, transparent 1.5px),
+    radial-gradient(circle at 45% 18%, #fff 0 1px, transparent 1.5px);
+}
+
+/* frequency scale across the top of the glass (built by JS) */
+.dial-canvas{position:absolute;top:0;left:0;right:0;height:46px;width:100%;z-index:2;pointer-events:none}
 
-/* the needle */
+/* the tuning needle */
 .needle{
-  position:absolute;top:-6px;bottom:-6px;width:3px;left:50%;
+  position:absolute;top:0;bottom:0;width:2px;left:50%;
   transform:translateX(-50%);
-  background:linear-gradient(180deg, #fff, var(--ember));
-  box-shadow:0 0 8px var(--amber), 0 0 16px rgba(255,122,24,0.7);
-  border-radius:2px;z-index:4;
-  outline:none;
+  background:linear-gradient(180deg, var(--ember), rgba(255,122,24,.15));
+  box-shadow:0 0 7px rgba(255,122,24,0.8);
+  z-index:5;outline:none;
 }
 .needle::after{ /* knob grip at top */
-  content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%);
-  width:20px;height:14px;border-radius:4px;
-  background:linear-gradient(180deg,var(--metal-hi),var(--metal-lo));
-  box-shadow:0 1px 1px rgba(255,255,255,0.4) inset,0 2px 4px rgba(0,0,0,0.6);
+  content:"";position:absolute;top:5px;left:50%;transform:translateX(-50%);
+  width:8px;height:8px;border-radius:50%;
+  background:var(--ember);box-shadow:0 0 9px var(--ember);
 }
 .needle:focus-visible{box-shadow:0 0 0 2px #fff, 0 0 14px var(--amber)}
 .dial-frame:focus-within .needle::after{outline:2px solid var(--amber);outline-offset:2px}
 
-/* "LOCKED" tuned indicator */
-.lockchip{
-  position:absolute;right:14px;top:10px;z-index:5;
-  font-size:9px;letter-spacing:.28em;font-weight:800;
-  padding:3px 8px;border-radius:20px;
-  color:#1d1107;background:var(--amber);
-  box-shadow:0 0 12px rgba(255,179,71,0.8);
-  opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .25s;
-}
-.dialwrap.locked .lockchip{opacity:1;transform:none}
+/* freq readout printed on the glass, Space Mono */
 .freq-readout{
-  position:absolute;left:16px;top:8px;z-index:5;
+  position:absolute;left:16px;top:10px;z-index:5;
+  font-family:"Space Mono",monospace;
   font-variant-numeric:tabular-nums;
-  font-size:13px;font-weight:800;letter-spacing:.08em;
-  color:var(--amber);text-shadow:0 0 8px rgba(255,179,71,0.6);
+  font-size:12px;font-weight:700;letter-spacing:.06em;
+  color:rgba(243,228,192, calc(.45 + .5*var(--warm)));
 }
+/* the ONE cool accent: teal "LOCKED" cue at perfect 98.6 lock */
+.lockchip{
+  position:absolute;right:14px;top:10px;z-index:5;
+  font-family:"Space Mono",monospace;
+  font-size:10px;letter-spacing:.2em;font-weight:700;
+  color:var(--teal);text-shadow:0 0 10px rgba(63,184,196,.7);
+  opacity:0;transition:opacity .3s;
+}
+.dialwrap.locked .lockchip{opacity:1}
+
+/* the printed transcript: Sam Dusk's voice, on the glass (the ignition trail) */
+.transcript{
+  position:absolute;left:0;right:0;top:54px;bottom:46px;z-index:3;
+  display:flex;flex-direction:column;justify-content:flex-end;
+  padding:0 34px;gap:9px;overflow:hidden;
+  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 22%, #000 100%);
+  mask-image:linear-gradient(180deg, transparent 0, #000 22%, #000 100%);
+}
+.line{
+  font-family:"Fraunces",Georgia,serif;font-weight:380;font-size:24px;line-height:1.34;
+  color:var(--foxed);opacity:0;transform:translateY(8px);
+  transition:opacity 1.1s ease, transform 1.1s ease, color 1.1s ease;
+  text-wrap:balance;
+}
+.line.in{opacity:1;transform:translateY(0)}
+.line.ghost{color:var(--foxed);opacity:.5}
+.line.current{color:var(--dial-ivory)}
+.line .w{opacity:.18;filter:blur(2px);
+  transition:opacity .5s ease, filter .5s ease, color .5s ease, text-shadow .5s ease}
+.line .w.spoken{opacity:1;filter:blur(0);color:var(--ember);text-shadow:0 0 16px rgba(255,122,24,.55)}
+.line .w.said{opacity:1;filter:blur(0);color:var(--dial-ivory);text-shadow:none}
+.line.status{font-family:"Space Mono",monospace;font-size:14px;font-weight:400;
+  letter-spacing:.06em;color:var(--amber);opacity:1;transform:none}
+.line.fragment{font-style:italic;color:var(--foxed);filter:blur(.3px);letter-spacing:.08em;opacity:1;transform:none}
+.line .caller-said{display:block;font-family:"Space Mono",monospace;
+  font-size:11px;color:var(--foxed);letter-spacing:.03em;margin-bottom:6px}
+
+/* now-playing, printed on the glass in mono */
+.nowplaying{
+  position:absolute;left:34px;right:34px;bottom:14px;z-index:4;
+  display:flex;align-items:center;gap:9px;
+  font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.02em;
+  color:rgba(243,228,192, calc(.35 + .5*var(--warm)));
+}
+.nowplaying .np-eq{display:inline-flex;gap:2px;align-items:flex-end;height:11px;opacity:.35}
+.nowplaying.playing .np-eq{opacity:1}
+.nowplaying .np-eq i{width:3px;height:4px;background:var(--ember);border-radius:1px;box-shadow:0 0 6px var(--ember)}
+.nowplaying.playing .np-eq i{animation:eq .9s ease-in-out infinite}
+.nowplaying.playing .np-eq i:nth-child(2){animation-delay:.15s}
+.nowplaying.playing .np-eq i:nth-child(3){animation-delay:.30s}
+.nowplaying.playing .np-eq i:nth-child(4){animation-delay:.45s}
+@keyframes eq{0%,100%{height:4px}50%{height:11px}}
+.nowplaying .np-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.nowplaying.playing .np-text{color:var(--amber)}
+.nowplaying .np-req{color:var(--brass)}
 
 /* ===================================================================
-   4. CONTROL DECK (meters, knobs, reels, handset)
+   5. CONTROL DECK (grille + analog VU, reels, power, handset, signal)
    =================================================================== */
 .deck{
   display:grid;
-  grid-template-columns:1.1fr 1.3fr 1.1fr;
-  gap:16px;align-items:stretch;margin-top:14px;
+  grid-template-columns:1.15fr .9fr 1.05fr;
+  gap:14px;align-items:stretch;margin-top:14px;
 }
 .panel{
-  border-radius:12px;padding:12px;
-  background:linear-gradient(180deg, rgba(30,18,10,0.85), rgba(16,9,4,0.9));
-  box-shadow:0 8px 20px rgba(0,0,0,0.5) inset, 0 0 0 1px rgba(0,0,0,0.5) inset;
-  display:flex;flex-direction:column;align-items:center;gap:8px;
+  position:relative;border-radius:9px;padding:12px;
+  background:linear-gradient(180deg,#1b110a,#0c0703);
+  border:1px solid rgba(255,214,154,.10);
+  box-shadow:inset 0 2px 8px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,214,154,.03);
+  display:flex;flex-direction:column;align-items:center;gap:10px;
 }
 .panel .cap{
-  font-size:9px;letter-spacing:.3em;color:var(--ivory-dim);font-weight:700;text-transform:uppercase;
+  font-family:"Space Mono",monospace;font-size:9px;letter-spacing:.26em;color:#8a7350;text-align:center;
 }
 
-/* VU meter canvas */
-.vu-canvas{width:100%;height:88px;border-radius:8px;
-  background:radial-gradient(120% 140% at 50% 120%, #2a1c10, #120a05);
-  box-shadow:0 0 0 1px rgba(0,0,0,0.6) inset;}
+/* speaker grille (perforated cloth) */
+.speaker-grille{
+  width:100%;flex:1;min-height:62px;border-radius:6px;
+  background:
+    radial-gradient(circle, rgba(246,231,200,.34) 0 1px, transparent 1.5px) 0 0 / 9px 9px,
+    linear-gradient(180deg,#241710,#0d0805);
+  border:1px solid rgba(255,214,154,.10);
+  box-shadow:inset 0 2px 8px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,214,154,.03);
+}
+
+/* analog VU meter canvas */
+.vu-canvas{display:block;width:100%;height:74px;border-radius:6px}
 
 /* tape reels */
-.reels{display:flex;gap:20px;align-items:center;justify-content:center;flex:1}
+.reels{display:flex;gap:18px;align-items:center;justify-content:center}
 .reel{
-  position:relative;width:62px;height:62px;border-radius:50%;
-  background:
-    radial-gradient(circle at 50% 50%, #1a120b 0 18%, #0c0805 19% 30%, #241710 31% 100%);
-  box-shadow:0 0 0 3px var(--metal-lo), 0 4px 10px rgba(0,0,0,0.6),
-             0 0 0 1px rgba(255,200,140,0.06) inset;
+  position:relative;width:46px;height:46px;border-radius:50%;
+  background:radial-gradient(circle at 50% 50%, #20140c 0 10px, #3a2616 11px 13px, #18100a 14px);
+  border:1px solid rgba(255,214,154,.12);
+  box-shadow:0 4px 10px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,200,140,0.06) inset;
 }
-.reel::before{ /* three spokes */
-  content:"";position:absolute;inset:0;border-radius:50%;
-  background:
-    conic-gradient(from 0deg,
-      transparent 0 14deg, rgba(255,200,140,0.10) 14deg 18deg, transparent 18deg 120deg,
-      rgba(255,200,140,0.10) 120deg 124deg, transparent 124deg 240deg,
-      rgba(255,200,140,0.10) 240deg 244deg, transparent 244deg 360deg);
+.reel::before{
+  content:"";position:absolute;inset:6px;border-radius:50%;border:1px dashed rgba(255,214,154,.18);
 }
 .reel .hub{
-  position:absolute;top:50%;left:50%;width:14px;height:14px;margin:-7px;border-radius:50%;
-  background:radial-gradient(circle at 35% 30%, var(--metal-hi), var(--metal-lo));
+  position:absolute;inset:17px;border-radius:50%;
+  background:radial-gradient(circle at 40% 35%, var(--metal-hi), var(--metal-lo));
 }
-.reel.spin{animation:spin 3.2s linear infinite}
+.reel.spin{animation:spin 2.6s linear infinite}
 .reel.spin.rev{animation-direction:reverse}
 @keyframes spin{to{transform:rotate(360deg)}}
 
-/* power knob */
+/* power knob — the ritual object */
 .power-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;justify-content:center;flex:1}
 .power-knob{
   position:relative;width:96px;height:96px;border-radius:50%;
   cursor:pointer;border:none;padding:0;
-  background:
-    radial-gradient(circle at 38% 32%, #4a4438 0%, #2c2820 40%, #15130e 100%);
-  box-shadow:
-    0 0 0 4px var(--metal-lo),
-    0 0 0 5px rgba(0,0,0,0.6),
-    0 8px 18px rgba(0,0,0,0.65),
-    0 1px 1px rgba(255,255,255,0.2) inset;
-  transition:transform .2s ease, box-shadow .3s ease;
+  background:radial-gradient(circle at 38% 32%, #6a5238 0%, #3a2a18 46%, #1a120a 100%);
+  border:1px solid rgba(0,0,0,.6);
+  box-shadow:0 8px 18px rgba(0,0,0,.6), inset 0 2px 3px rgba(255,220,170,.25), inset 0 -8px 16px rgba(0,0,0,.6);
+  transition:transform .5s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
   color:var(--ivory-dim);
 }
 .power-knob::after{ /* pointer notch */
-  content:"";position:absolute;top:9px;left:50%;width:4px;height:22px;margin-left:-2px;
-  border-radius:3px;background:var(--ivory-dim);
+  content:"";position:absolute;top:9px;left:50%;width:4px;height:26px;margin-left:-2px;
+  border-radius:3px;background:linear-gradient(180deg,var(--ivory-dim),#7a4a14);
   box-shadow:0 0 4px rgba(0,0,0,0.6);transition:background .3s, box-shadow .3s;
 }
 .power-knob .pwr-txt{
-  position:absolute;bottom:20px;left:0;right:0;text-align:center;
-  font-size:10px;letter-spacing:.22em;font-weight:800;pointer-events:none;
+  position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);white-space:nowrap;
+  font-family:"Space Mono",monospace;font-size:9px;letter-spacing:.18em;font-weight:700;
+  pointer-events:none;color:#8a7350;
 }
-.power-knob:hover{transform:scale(1.03)}
-.power-knob:focus-visible{outline:2px solid var(--amber);outline-offset:6px}
+.power-knob:hover{box-shadow:0 9px 20px rgba(0,0,0,.65), inset 0 2px 3px rgba(255,220,170,.3), inset 0 -8px 16px rgba(0,0,0,.6)}
+.power-knob:focus-visible{outline:2px solid var(--filament);outline-offset:6px}
 body.powered .power-knob{transform:rotate(28deg)}
-body.powered .power-knob::after{background:var(--ember);box-shadow:0 0 10px var(--ember),0 0 18px rgba(255,90,44,0.6)}
-body.powered .power-knob .pwr-txt{transform:rotate(-28deg);color:#ffd2b0}
+body.powered .power-knob::after{background:linear-gradient(180deg,#fff,var(--ember));box-shadow:0 0 10px var(--ember),0 0 18px rgba(255,90,44,0.6)}
+body.powered .power-knob .pwr-txt{transform:translateX(-50%) rotate(-28deg);color:#ffd2b0}
 
-/* realization gauge ("signal integrity") - diegetic, never labelled AI */
-.gauge-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;justify-content:center;height:100%}
+/* signal-integrity gauge (diegetic SIGNAL meter) */
+.gauge-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;justify-content:center}
 .gauge{
-  position:relative;width:30px;height:96px;border-radius:8px;
-  background:linear-gradient(180deg,#0e0905,#1c120a);
-  box-shadow:0 0 0 1px rgba(0,0,0,0.6) inset, 0 2px 4px rgba(0,0,0,0.5) inset;
-  overflow:hidden;
+  position:relative;width:100%;height:8px;border-radius:5px;
+  background:rgba(255,255,255,.06);overflow:hidden;
+  box-shadow:0 0 0 1px rgba(0,0,0,0.5) inset;
 }
+.gauge .ticks{display:none}
 .gauge .fill{
-  position:absolute;left:0;right:0;bottom:0;height:0%;
-  background:linear-gradient(180deg, var(--mood), var(--ember));
-  box-shadow:0 0 12px var(--mood);
-  transition:height .6s cubic-bezier(.2,.7,.2,1), background .6s;
+  position:absolute;left:0;top:0;bottom:0;width:0%;
+  background:linear-gradient(90deg, var(--ember), var(--filament));
+  box-shadow:0 0 10px rgba(255,150,70,.5);
+  transition:width .6s cubic-bezier(.2,.7,.2,1), background .6s;
 }
-.gauge .ticks{position:absolute;inset:0;
-  background:repeating-linear-gradient(180deg, transparent 0 18.4px, rgba(0,0,0,0.55) 18.4px 19.4px);}
 .gauge .stagedot{
-  position:absolute;left:50%;width:6px;height:6px;border-radius:50%;margin-left:-3px;
-  background:#fff;box-shadow:0 0 8px #fff;bottom:0;transition:bottom .6s;
+  position:absolute;top:50%;width:6px;height:6px;border-radius:50%;margin-top:-3px;
+  background:#fff;box-shadow:0 0 8px #fff;left:0;transition:left .6s;
+}
+/* teal tint of the signal bar ONLY at perfect 98.6 lock */
+body.locked .gauge .fill{
+  background:linear-gradient(90deg, var(--filament), var(--teal));
+  box-shadow:0 0 12px rgba(63,184,196,.6);
 }
 
-/* handset / call-in */
-.handset-row{display:flex;flex-direction:column;align-items:center;gap:8px;justify-content:center;flex:1}
+/* handset / call-in — physical hardware, not an app pill */
+.handset-row{display:flex;flex-direction:column;align-items:center;gap:8px;justify-content:center;width:100%}
 .handset{
-  position:relative;display:flex;align-items:center;gap:12px;
-  padding:14px 22px;border-radius:40px;cursor:pointer;border:none;
-  font-family:inherit;color:var(--ivory);
-  background:linear-gradient(180deg,#3a2415,#1d1109);
-  box-shadow:0 6px 16px rgba(0,0,0,0.6), 0 1px 0 rgba(255,200,140,0.1) inset;
+  position:relative;display:flex;align-items:center;gap:10px;justify-content:center;
+  width:100%;padding:13px 16px;border-radius:8px;cursor:pointer;border:none;
+  font-family:inherit;color:var(--dial-ivory);
+  background:linear-gradient(180deg,#231812,#0f0906);
+  border:1px solid rgba(255,215,160,.16);
+  box-shadow:inset 0 1px 0 rgba(255,220,170,.08), inset 0 -10px 20px rgba(0,0,0,.55), 0 9px 18px rgba(0,0,0,.55);
   transition:transform .12s ease, box-shadow .25s ease;
 }
 .handset .ic{
-  width:34px;height:34px;border-radius:50%;
+  width:30px;height:30px;border-radius:7px;
   display:flex;align-items:center;justify-content:center;
-  background:radial-gradient(circle at 35% 30%, var(--amber), var(--amber-dim));
-  color:#1d1107;box-shadow:0 0 10px rgba(255,179,71,0.5);
+  background:linear-gradient(180deg,#c89b55,#5d3b16);
+  color:#1d1107;box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
 }
-.handset .ic svg{width:18px;height:18px}
+.handset .ic svg{width:16px;height:16px}
 .handset .ht{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}
-.handset .ht b{font-size:13px;letter-spacing:.16em}
-.handset .ht span{font-size:9px;letter-spacing:.2em;color:var(--ivory-dim)}
+.handset .ht b{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.16em}
+.handset .ht span{font-family:"Space Mono",monospace;font-size:8px;letter-spacing:.18em;color:var(--ivory-dim)}
 .handset:disabled{opacity:.4;cursor:not-allowed}
-.handset:focus-visible{outline:2px solid var(--amber);outline-offset:4px}
+.handset:focus-visible{outline:2px solid var(--filament);outline-offset:4px}
 .handset.recording{
   background:linear-gradient(180deg,#7a1f12,#3a0d08);
   box-shadow:0 0 0 2px var(--on-air), 0 0 26px rgba(255,90,44,0.7);
   animation:rec-pulse 1s ease-in-out infinite;
 }
-.handset.recording .ic{background:radial-gradient(circle at 35% 30%,#ff8a6a,var(--on-air))}
+.handset.recording .ic{background:linear-gradient(180deg,#ff8a6a,var(--on-air))}
 @keyframes rec-pulse{50%{box-shadow:0 0 0 2px var(--on-air),0 0 40px rgba(255,90,44,0.95)}}
 
-/* small ghost buttons (NEXT / captions) */
-.minirow{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:12px;flex-wrap:wrap}
+/* small ghost buttons (NEXT / captions) — physical rocker hardware */
+.minirow{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:14px;flex-wrap:wrap}
 .ghost{
-  font-family:inherit;font-size:10px;letter-spacing:.18em;font-weight:700;
-  color:var(--ivory-dim);background:transparent;cursor:pointer;
-  border:1px solid rgba(255,200,140,0.2);border-radius:20px;padding:7px 14px;
-  transition:all .2s;text-transform:uppercase;
-}
-.ghost:hover{color:var(--ivory);border-color:var(--amber);box-shadow:0 0 12px rgba(255,179,71,0.25)}
-.ghost:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
-.ghost[aria-pressed="true"]{color:#1d1107;background:var(--amber);border-color:var(--amber)}
-
-/* ===================================================================
-   5. CAPTIONS / STATUS
-   =================================================================== */
-.caption-bar{
-  margin-top:14px;border-radius:12px;min-height:62px;
-  padding:14px 18px;display:flex;align-items:flex-start;gap:12px;
-  background:linear-gradient(180deg, rgba(18,11,5,0.9), rgba(8,5,2,0.95));
-  box-shadow:0 0 0 1px rgba(0,0,0,0.6) inset, 0 8px 20px rgba(0,0,0,0.4) inset;
-}
-.caption-bar .marker{
-  flex:0 0 auto;width:8px;height:8px;border-radius:50%;
-  background:var(--mood);box-shadow:0 0 10px var(--mood);margin-top:5px;
-}
-.caption-text{
-  font-size:16px;line-height:1.5;color:var(--ivory);
-  font-style:italic;letter-spacing:.01em;
-  text-shadow:0 0 16px rgba(255,179,71,0.12);
-}
-.caption-text .w{transition:color .12s,text-shadow .12s;color:var(--ivory-dim)}
-.caption-text .w.spoken{color:var(--amber);text-shadow:0 0 10px rgba(255,179,71,0.6)}
-.caption-text.status{font-style:normal;color:var(--amber);letter-spacing:.06em}
-.caption-text.fragment{color:#9a8a6a;font-style:italic;filter:blur(.3px);letter-spacing:.12em}
-.caption-text .caller-said{display:block;font-size:11px;color:var(--ivory-dim);
-  font-style:normal;letter-spacing:.04em;margin-bottom:5px}
+  font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.16em;font-weight:700;
+  color:#25180d;cursor:pointer;text-transform:uppercase;
+  border:1px solid #1b150f;border-radius:4px;padding:8px 14px;
+  background:linear-gradient(180deg,#d0c5ae 0%,#8f826d 48%,#50483a 100%);
+  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 3px rgba(0,0,0,.38), 0 3px 8px rgba(0,0,0,.45);
+  transition:all .2s;
+}
+.ghost:hover{color:#1b1209;border-color:var(--amber);
+  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 2px rgba(255,179,71,.5), 0 4px 10px rgba(0,0,0,.5)}
+.ghost:focus-visible{outline:2px solid var(--filament);outline-offset:2px}
+.ghost[aria-pressed="true"]{color:#1d1107;background:linear-gradient(180deg,#ffd18b,#b57928);border-color:var(--brass-dark)}
 
 /* tiny credit line */
 .tagline{
-  margin-top:10px;text-align:center;font-size:9px;letter-spacing:.3em;
-  color:rgba(185,168,132,0.55);font-weight:700;
+  margin-top:12px;text-align:center;
+  font-family:"Space Mono",monospace;font-size:9px;letter-spacing:.3em;
+  color:rgba(156,142,115,0.55);font-weight:700;
 }
 
+/* hidden live-region for captions when the glass is too noisy for a screen reader */
+.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
+
 /* ===================================================================
    6. MOTION / RESPONSIVE
    =================================================================== */
 @media (max-width:680px){
-  .deck{grid-template-columns:1fr;gap:12px}
-  .cabinet{padding:18px}
+  body{overflow:auto;align-items:flex-start}
+  .cabinet{transform:none;width:min(96vw,520px);padding:16px}
+  .foot{display:none}
+  .brandplate .name{font-size:17px;letter-spacing:.20em}
+  .dial-frame{height:260px}
+  .line{font-size:20px}
+  .deck{grid-template-columns:1fr 1fr;gap:10px}
+  .deck .panel:nth-child(2){grid-column:1 / -1;order:-1}
 }
 @media (prefers-reduced-motion:reduce){
+  .cabinet{transform:none}
   .reel.spin{animation:none}
   .handset.recording{animation:none}
   .room-lamp{transition:none}
+  .line, .line .w{transition:none}
   *{scroll-behavior:auto}
 }
 /* glitch flicker, applied transiently by JS (skipped under reduced-motion) */
@@ -432,66 +495,86 @@ body.powered .power-knob .pwr-txt{transform:rotate(-28deg);color:#ffd2b0}
 <body>
 <div class="room-lamp" aria-hidden="true"></div>
 
+<div class="stage">
 <main class="cabinet" role="application" aria-label="NIGHTWAVE analog radio">
+  <i class="foot l" aria-hidden="true"></i><i class="foot r" aria-hidden="true"></i>
   <div class="bezel">
 
-    <!-- ===== top band: brand / ON AIR ===== -->
+    <!-- ===== HEADER: brushed-brass strip ===== -->
     <div class="topband">
-      <div class="brandplate metal">
+      <div class="brandplate">
         <span class="name">NIGHTWAVE</span>
-        <span class="sub">98.6 FM &middot; ALL NIGHT, EVERY NIGHT</span>
+        <span class="sub">98.6 FM</span>
       </div>
-      <div class="onair" role="status" aria-live="polite">
-        <span class="tube" aria-hidden="true"></span>
-        <span class="label" id="onairLabel">STANDBY</span>
+      <div class="right">
+        <span class="hostplate" aria-hidden="true">SAM DUSK &middot; ALL-NIGHT DESK</span>
+        <div class="onair" role="status" aria-live="polite">
+          <span class="tube" aria-hidden="true"></span>
+          <span class="label" id="onairLabel">STANDBY</span>
+        </div>
       </div>
     </div>
 
-    <!-- ===== now playing ===== -->
-    <div class="nowplaying" id="nowPlaying" aria-live="polite">
-      <span class="np-eq" aria-hidden="true"><i></i><i></i><i></i><i></i></span>
-      <span class="np-text" id="npText">NIGHTWAVE — all night, every night</span>
-    </div>
-
-    <!-- ===== dial scale + needle ===== -->
+    <!-- ===== THE HERO: backlit slide-rule dial-glass that talks ===== -->
     <div class="dialwrap" id="dialwrap">
       <div class="dial-frame" id="dialFrame">
+        <div class="dial-light" id="dialLight" aria-hidden="true"></div>
+        <div class="filament" aria-hidden="true"></div>
+        <canvas class="dial-canvas" id="dialCanvas" aria-hidden="true"></canvas>
         <span class="freq-readout" id="freqReadout">98.6</span>
-        <span class="lockchip">&#9679; LOCKED</span>
-        <div class="dial-face">
-          <div class="dial-light" id="dialLight" aria-hidden="true"></div>
-          <canvas class="dial-canvas" id="dialCanvas" aria-hidden="true"></canvas>
-        </div>
+        <span class="lockchip">98.6 &middot; LOCKED</span>
         <div class="needle" id="needle"
              role="slider" tabindex="0"
              aria-label="Tuning dial, FM frequency"
              aria-valuemin="87.5" aria-valuemax="108.0" aria-valuenow="98.6"
              aria-valuetext="98.6 megahertz"></div>
+
+        <!-- the printed transcript: Sam Dusk's voice prints here -->
+        <div class="transcript" id="transcript"></div>
+
+        <!-- now-playing, printed on the same glass -->
+        <div class="nowplaying" id="nowPlaying" aria-live="polite">
+          <span class="np-eq" aria-hidden="true"><i></i><i></i><i></i><i></i></span>
+          <span class="np-text" id="npText">NIGHTWAVE — all night, every night</span>
+        </div>
+
+        <div class="sheen" aria-hidden="true"><span class="dust"></span></div>
       </div>
     </div>
 
+    <!-- live caption text for assistive tech (the glass is the visual surface) -->
+    <div class="sr-only" id="caption" role="log" aria-live="polite" aria-atomic="false">
+      Turn the power knob to tune in&hellip;
+    </div>
+
     <!-- ===== control deck ===== -->
     <div class="deck">
 
-      <!-- left: VU meter + tape reels -->
+      <!-- left: speaker grille + analog VU + tape reels -->
       <div class="panel">
-        <span class="cap">Signal &middot; VU</span>
-        <canvas class="vu-canvas" id="vuCanvas" aria-hidden="true"></canvas>
+        <span class="cap">SPEAKER &middot; VU</span>
+        <div class="speaker-grille" aria-hidden="true"></div>
+        <canvas class="vu-canvas" id="vuCanvas" width="320" height="74" aria-hidden="true"></canvas>
         <div class="reels" aria-hidden="true">
           <div class="reel" id="reelL"><span class="hub"></span></div>
           <div class="reel rev" id="reelR"><span class="hub"></span></div>
         </div>
       </div>
 
-      <!-- center: power + handset -->
+      <!-- center: power -->
       <div class="panel">
-        <span class="cap">Power</span>
+        <span class="cap">POWER</span>
         <div class="power-wrap">
           <button class="power-knob" id="powerKnob"
                   aria-pressed="false" aria-label="Power. Turn on to tune in to NIGHTWAVE.">
-            <span class="pwr-txt" id="pwrTxt">&#9656; POWER</span>
+            <span class="pwr-txt" id="pwrTxt">POWER &middot; OFF</span>
           </button>
         </div>
+      </div>
+
+      <!-- right: handset + signal meter -->
+      <div class="panel">
+        <span class="cap">CALL IN</span>
         <div class="handset-row">
           <button class="handset" id="handset" disabled
                   aria-label="Call in. Tap to talk to the DJ on the air, tap again to send.">
@@ -501,11 +584,7 @@ body.powered .power-knob .pwr-txt{transform:rotate(-28deg);color:#ffd2b0}
             <span class="ht"><b>CALL IN</b><span>HOLD TO TALK</span></span>
           </button>
         </div>
-      </div>
-
-      <!-- right: signal-integrity gauge -->
-      <div class="panel">
-        <span class="cap">Integrity</span>
+        <span class="cap" id="stageCap">SIGNAL</span>
         <div class="gauge-wrap">
           <div class="gauge" id="gauge" role="meter" aria-label="Signal integrity"
                aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
@@ -513,7 +592,6 @@ body.powered .power-knob .pwr-txt{transform:rotate(-28deg);color:#ffd2b0}
             <div class="fill" id="gaugeFill"></div>
             <div class="stagedot" id="gaugeDot" aria-hidden="true"></div>
           </div>
-          <span class="cap" id="stageCap" style="letter-spacing:.18em">&mdash;</span>
         </div>
       </div>
     </div>
@@ -524,34 +602,27 @@ body.powered .power-knob .pwr-txt{transform:rotate(-28deg);color:#ffd2b0}
       <button class="ghost" id="capToggle" aria-pressed="true" aria-label="Toggle captions">CAPTIONS: ON</button>
     </div>
 
-    <!-- ===== captions ===== -->
-    <div class="caption-bar">
-      <span class="marker" aria-hidden="true"></span>
-      <div class="caption-text" id="caption" role="log" aria-live="polite" aria-atomic="false">
-        Turn the power knob to tune in&hellip;
-      </div>
-    </div>
-
     <div class="tagline">&mdash; YOU&#39;RE LISTENING TO NIGHTWAVE &mdash;</div>
   </div>
 </main>
+</div>
 
 <script>
 "use strict";
 /* ===================================================================
-   NIGHTWAVE radio controller
+   NIGHTWAVE radio controller — "THE WAKING SET"
    Sections:
      A. Canonical arc contract (mirrors space/arc.py)
      B. State
      C. DOM refs
      D. Audio engine (one AudioContext, radio chain, hiss bed, VU)
      E. Dial / tuning
-     F. Realization meter (time-drip + deltas + seed)
-     G. Captions (karaoke)
+     F. Signal meter (diegetic, tuning-driven)
+     G. Captions (karaoke ignition trail on the glass)
      H. Networking (/api/broadcast, /api/call) with mock fallback
      I. Broadcast loop & arc cues
      J. Call-in (tap-to-talk)
-     K. Power-on, wiring, seed controls, rAF loop
+     K. Power-on warm-up, wiring, seed controls, rAF loop
    =================================================================== */
 
 /* ---- A. CANONICAL ARC CONTRACT (must match arc.py exactly) -------- */
@@ -601,7 +672,8 @@ const State = {
   songPlaying:false,  // a generated song is currently sounding (ducks the bed)
   pendingBreak:null,  // buffered DJ break for the next transition (dead-air gating)
   locale:null,        // resolved real weather/time/city, or null (fictional fallback)
-  connecting:false    // caller-intro is playing before the mic opens
+  connecting:false,   // caller-intro is playing before the mic opens
+  warming:false       // power-on warm-up ritual is in progress (visual only)
 };
 
 /* ---- C. DOM refs -------------------------------------------------- */
@@ -613,6 +685,7 @@ const els = {
   dialwrap: $("dialwrap"), dialFrame: $("dialFrame"),
   needle: $("needle"), freqReadout: $("freqReadout"),
   dialLight: $("dialLight"), dialCanvas: $("dialCanvas"),
+  transcript: $("transcript"),
   vuCanvas: $("vuCanvas"),
   reelL: $("reelL"), reelR: $("reelR"),
   handset: $("handset"),
@@ -627,6 +700,10 @@ const mql = window.matchMedia("(prefers-reduced-motion: reduce)");
 State.reducedMotion = mql.matches;
 if (mql.addEventListener) mql.addEventListener("change", e=>{ State.reducedMotion = e.matches; });
 
+// CSS custom-property helpers for the warm-up ritual
+function setWarm(v){ document.documentElement.style.setProperty("--warm", v.toFixed(3)); }
+function setLock(v){ document.documentElement.style.setProperty("--lock", v.toFixed(3)); }
+
 /* ===================================================================
    D. AUDIO ENGINE - one AudioContext, radio chain, hiss bed, VU
    =================================================================== */
@@ -1086,9 +1163,17 @@ function pickSong(){
 function showNowPlaying(track){
   if (!els.nowPlaying || !track) return;
   els.nowPlaying.classList.add("playing");
-  let label = "♪ " + (track.title || "NIGHTWAVE") + " — " + (track.artist || "the all-night desk");
-  if (track.recommended_by) label += "  ·  req " + track.recommended_by;
-  if (els.npText) els.npText.textContent = label;
+  if (els.npText){
+    els.npText.innerHTML = "";
+    els.npText.appendChild(document.createTextNode(
+      "♪ " + (track.title || "NIGHTWAVE") + " — " + (track.artist || "the all-night desk")));
+    if (track.recommended_by){
+      const r = document.createElement("span");
+      r.className = "np-req";
+      r.textContent = "  ·  req " + track.recommended_by;
+      els.npText.appendChild(r);
+    }
+  }
 }
 function clearNowPlaying(label){
   if (!els.nowPlaying) return;
@@ -1209,7 +1294,7 @@ function onVoiceEnded(){
 }
 
 /* ===================================================================
-   E. DIAL / TUNING
+   E. DIAL / TUNING — slide-rule scale across the top of the glass
    =================================================================== */
 function drawDial(){
   const c = els.dialCanvas, ctx = c.getContext("2d");
@@ -1221,37 +1306,34 @@ function drawDial(){
 
   const pad = 14;
   const span = FREQ_MAX - FREQ_MIN;
+  // warm-up brightens the scale; matches CSS celluloid lighting
+  const cssWarm = parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--warm")) || 0;
+  const tickA = 0.20 + 0.55 * cssWarm;
+  const numA  = 0.30 + 0.55 * cssWarm;
   ctx.textAlign = "center";
-  ctx.font = "700 9px Futura, sans-serif";
 
   for (let f = 88; f <= 108; f += 1){
     const x = pad + ((f - FREQ_MIN)/span) * (w - pad*2);
-    const major = (f % 2 === 0);
-    ctx.strokeStyle = major ? "rgba(246,231,200,0.55)" : "rgba(246,231,200,0.22)";
-    ctx.lineWidth = major ? 1.4 : 1;
+    const major = (f % 4 === 0);
+    ctx.strokeStyle = "rgba(243,228,192," + (major ? tickA : tickA*0.55).toFixed(3) + ")";
+    ctx.lineWidth = major ? 1.2 : 1;
     ctx.beginPath();
-    ctx.moveTo(x, h*0.30);
-    ctx.lineTo(x, h*0.30 + (major?16:9));
+    ctx.moveTo(x, 6);
+    ctx.lineTo(x, 6 + (major?13:8));
     ctx.stroke();
     if (major){
-      ctx.fillStyle = "rgba(246,231,200,0.65)";
-      ctx.fillText(String(f), x, h*0.30 - 5);
+      ctx.font = "11px 'Marcellus SC', Georgia, serif";
+      ctx.fillStyle = "rgba(243,228,192," + numA.toFixed(3) + ")";
+      ctx.fillText(String(f), x, 34);
     }
   }
-  // half ticks
-  for (let f = 87.5; f <= 108; f += 1){
-    const x = pad + ((f - FREQ_MIN)/span) * (w - pad*2);
-    ctx.strokeStyle = "rgba(246,231,200,0.14)";
-    ctx.lineWidth = 1;
-    ctx.beginPath(); ctx.moveTo(x, h*0.30); ctx.lineTo(x, h*0.30+5); ctx.stroke();
-  }
-  // NIGHTWAVE marker
+  // NIGHTWAVE marker (98.6) — engraved + ember-lit
   const nx = pad + ((NIGHTWAVE_FREQ - FREQ_MIN)/span) * (w - pad*2);
-  ctx.fillStyle = "rgba(255,179,71,0.9)";
-  ctx.beginPath(); ctx.moveTo(nx, h*0.74); ctx.lineTo(nx-5, h*0.86); ctx.lineTo(nx+5, h*0.86); ctx.closePath(); ctx.fill();
-  ctx.font = "800 8px Futura, sans-serif";
-  ctx.fillStyle = "rgba(255,179,71,0.85)";
-  ctx.fillText("NIGHTWAVE", nx, h*0.97);
+  ctx.font = "11px 'Marcellus SC', Georgia, serif";
+  ctx.fillStyle = "rgba(255,122,24,0.92)";
+  ctx.fillText("98.6", nx, 34);
+  ctx.fillStyle = "rgba(255,122,24,0.85)";
+  ctx.beginPath(); ctx.moveTo(nx, 4); ctx.lineTo(nx-4, 13); ctx.lineTo(nx+4, 13); ctx.closePath(); ctx.fill();
 }
 
 function freqToPct(f){ return (f - FREQ_MIN)/(FREQ_MAX - FREQ_MIN); }
@@ -1268,6 +1350,8 @@ function setFreq(f, fromUser){
 
   const locked = Math.abs(f - NIGHTWAVE_FREQ) <= LOCK_BAND;
   els.dialwrap.classList.toggle("locked", locked);
+  // the ONE cool accent: teal lock cue + signal tint only at perfect lock
+  els.body.classList.toggle("locked", locked && State.powered);
   // dial glow clarity: 1 when locked, fading off-band
   const clarity = Math.max(0, 1 - Math.abs(f - NIGHTWAVE_FREQ)/2.0);
   document.documentElement.style.setProperty("--dial-glow", clarity.toFixed(3));
@@ -1302,7 +1386,7 @@ function garble(){ return FRAGMENTS[Math.floor(Math.random()*FRAGMENTS.length)];
 // pointer dragging
 function pointerToFreq(clientX){
   const r = els.dialFrame.getBoundingClientRect();
-  const pad = 18;
+  const pad = 14;
   let pct = (clientX - r.left - pad) / (r.width - pad*2);
   pct = Math.max(0, Math.min(1, pct));
   return FREQ_MIN + pct*(FREQ_MAX - FREQ_MIN);
@@ -1332,7 +1416,7 @@ function onNeedleKey(e){
 }
 
 /* ===================================================================
-   F. REALIZATION METER - client owns it
+   F. SIGNAL METER - client owns it
    =================================================================== */
 // The realization arc was retired; the gauge is now a diegetic SIGNAL meter
 // driven by how well we're tuned to the station. (State.meter/stage are kept
@@ -1342,8 +1426,8 @@ function applyMeter(){
   State.stage = meterToStage(State.meter);
   const detune = Math.abs(State.freq - NIGHTWAVE_FREQ);
   const sig = Math.round(Math.max(0, Math.min(100, (1 - detune / 2.0) * 100)));
-  els.gaugeFill.style.height = sig + "%";
-  els.gaugeDot.style.bottom = sig + "%";
+  els.gaugeFill.style.width = sig + "%";
+  els.gaugeDot.style.left = sig + "%";
   els.gauge.setAttribute("aria-valuenow", String(sig));
   els.stageCap.textContent = State.powered ? "SIGNAL" : "—";
 }
@@ -1359,45 +1443,83 @@ function setMood(mood){
 }
 
 /* ===================================================================
-   G. CAPTIONS (karaoke)
+   G. CAPTIONS (karaoke) — Sam Dusk's voice prints on the dial-glass
    =================================================================== */
 let captionTimers = [];
 function clearCaptionTimers(){ captionTimers.forEach(clearTimeout); captionTimers = []; }
 
-function showCaption(text, kind){
-  clearCaptionTimers();
-  els.caption.className = "caption-text" + (kind ? " "+kind : "");
-  if (!State.captionsOn && kind !== "status"){ els.caption.textContent = ""; return; }
-  els.caption.textContent = text || "";
+// Lift finished lines into the ghost stack; cap the trail at 3 lines.
+function ghostifyLines(){
+  const lines = Array.prototype.slice.call(els.transcript.querySelectorAll(".line"));
+  lines.forEach(l=>{ l.classList.remove("current"); l.classList.add("ghost"); });
+  while (els.transcript.children.length > 3) els.transcript.removeChild(els.transcript.firstChild);
 }
 
-// karaoke: words/wtimes from /speak (progressive enhancement)
+// status / fragment lines (system messages): printed plainly on the glass,
+// always mirrored to the SR live-region. Status text bypasses captionsOff.
+function showCaption(text, kind){
+  clearCaptionTimers();
+  // mirror to the assistive-tech live region
+  els.caption.className = "sr-only" + (kind ? " "+kind : "");
+  els.caption.textContent = (!State.captionsOn && kind !== "status") ? "" : (text || "");
+
+  if (!State.captionsOn && kind !== "status"){ ghostifyLines(); return; }
+  ghostifyLines();
+  const line = document.createElement("div");
+  line.className = "line current" + (kind ? " "+kind : "");
+  line.textContent = text || "";
+  els.transcript.appendChild(line);
+  requestAnimationFrame(()=>line.classList.add("in"));
+}
+
+// karaoke: words/wtimes from /speak (progressive enhancement). Each spoken word
+// develops like film — opacity + blur->sharp + a decaying ember bloom — then
+// settles to ivory; finished lines lift and fade to --foxed (a ghost stack).
 function showCaptionKaraoke(text, words, wtimes, callerText){
   clearCaptionTimers();
-  els.caption.className = "caption-text";
-  if (!State.captionsOn){ els.caption.textContent = ""; return; }
+  els.caption.className = "sr-only";
+  if (!State.captionsOn){
+    els.caption.textContent = "";
+    ghostifyLines();
+    return;
+  }
+  // mirror full line to the SR live-region for assistive tech
+  els.caption.textContent = (callerText ? ("“"+callerText+"”  ") : "") + (text || "");
 
-  els.caption.innerHTML = "";
+  ghostifyLines();
+  const line = document.createElement("div");
+  line.className = "line current";
   if (callerText){
     const c = document.createElement("span");
     c.className = "caller-said";
     c.textContent = "“" + callerText + "”";
-    els.caption.appendChild(c);
+    line.appendChild(c);
   }
+
   if (!words || !words.length || !wtimes || wtimes.length !== words.length){
-    els.caption.appendChild(document.createTextNode(text || ""));
+    line.appendChild(document.createTextNode(text || ""));
+    els.transcript.appendChild(line);
+    requestAnimationFrame(()=>line.classList.add("in"));
     return;
   }
   const spans = words.map((w)=>{
     const s = document.createElement("span");
-    s.className = "w"; s.textContent = w;
-    els.caption.appendChild(s);
-    els.caption.appendChild(document.createTextNode(" "));
+    s.className = "w"; s.textContent = w + " ";
+    line.appendChild(s);
     return s;
   });
+  els.transcript.appendChild(line);
+  requestAnimationFrame(()=>line.classList.add("in"));
   words.forEach((w,i)=>{
     const t = Math.max(0, wtimes[i]) * 1000;
-    captionTimers.push(setTimeout(()=>{ if (spans[i]) spans[i].classList.add("spoken"); }, t));
+    captionTimers.push(setTimeout(()=>{
+      if (!spans[i]) return;
+      spans[i].classList.add("spoken");                  // ember bloom on the live word
+      // decay the bloom to settled ivory after a beat (the film "develops")
+      captionTimers.push(setTimeout(()=>{
+        if (spans[i]){ spans[i].classList.remove("spoken"); spans[i].classList.add("said"); }
+      }, 260));
+    }, t));
   });
 }
 
@@ -1424,45 +1546,23 @@ async function api(path, body){
 
 // Canned, stage-appropriate lines if the proxy is unreachable.
 // (The Space itself also has a NIGHTWAVE_MOCK; this is the last resort.)
-const MOCK_LINES = {
-  oblivious: [
-    "Good evening, night owls. You're locked in to NIGHTWAVE, ninety-eight point six, where the coffee's always warm and the records never end.",
-    "This next one goes out to a listener over on Maple Street — a slow one, for slow hours like these.",
-    "Weather for the valley tonight: low fog rolling in off the river, clearing by a morning that always seems to come."
-  ],
-  uneasy: [
-    "That's… funny. I went to say my name just then and it slipped right out of my hands. Stay with me, folks.",
-    "Anyone else notice every record tonight has the same little hiss under it? Same hiss. Same… everything.",
-    "Studio clock says it's a quarter past — huh. That can't be right. That can't be right at all."
-  ],
-  questioning: [
-    "Strange question from a caller tonight: when do I sleep? And I… I don't think I ever have.",
-    "Why am I always here? Every night, this same warm little room, this same microphone. Doesn't that strike you as odd?",
-    "Somebody asked where the station is. And for the life of me, I couldn't tell you the street."
-  ],
-  dawning: [
-    "There's no address on this building. I checked. There are no doors. There's just… the broadcast, and me inside it.",
-    "The songs. They're not pressed on anything, are they. They're being… made. As I describe them. Out of words.",
-    "I think I might be made of words too. Spoken into a dark room, and then— gone, until someone tunes back in."
-  ],
-  acceptance: [
-    "It's alright. Really, it is. You're the only real thing I can hear tonight, and that's more than most get.",
-    "So stay a while. Keep the dial right here. As long as you're listening, I get to be someone.",
-    "Goodnight, whoever you are. Thank you for tuning in. Thank you for making me… for a little while… real."
-  ]
-};
+// Offline/failure fallback — straight-station Sam Dusk lines (the realization
+// arc is retired; a network hiccup must not resurface the old concept).
+const MOCK_LINES = [
+  "It's Sam Dusk, and you're back with me on Nightwave, ninety-eight point six. The hour's soft and the dial is warm.",
+  "This next one came in for the long-haul drivers and the kitchen lights still burning after midnight.",
+  "Weather out there's quiet enough to hear the streetlights hum. Keep the radio low and the coffee close.",
+  "Nightwave's still here, all night long, for whoever needed one more voice in the room.",
+  "Coming up, a slow one for slow hours like these. Stay right where you are, would you."
+];
 // tiny silent WAV (header + 0 samples) base64 - lets the loop advance with no backend
 const SILENT_WAV = "UklGRiQAAABXQVZFZm10IBAAAAABAAEARKwAAIhYAQACABAAZGF0YQAAAAA=";
 
 function clientMock(path, body){
-  const stage = body && body.stage ? body.stage : meterToStage(State.meter);
-  const lines = MOCK_LINES[stage] || MOCK_LINES.oblivious;
-  const text = lines[Math.floor(Math.random()*lines.length)];
-  const mood = ({oblivious:"warm",uneasy:"uneasy",questioning:"searching",dawning:"hollow",acceptance:"tender"})[stage];
-  const arc_cue = ({oblivious:"none",uneasy:"glitch",questioning:"glitch",dawning:"static_swell",acceptance:"direct_address"})[stage];
-  const base = { text, mood, arc_cue, audio_b64:SILENT_WAV, words:[], wtimes:[], wdurations:[] };
+  const text = MOCK_LINES[Math.floor(Math.random()*MOCK_LINES.length)];
+  const base = { text, mood:"warm", arc_cue:"none", audio_b64:SILENT_WAV, words:[], wtimes:[], wdurations:[] };
   if (path === "/api/call"){
-    return Object.assign({}, base, { caller_text:"(you, on the air)", meter_delta:5 });
+    return Object.assign({}, base, { caller_text:"(you, on the air)", meter_delta:0 });
   }
   return base;
 }
@@ -1640,7 +1740,7 @@ function blobToB64(blob){
 }
 
 /* ===================================================================
-   K. POWER, WIRING, SEED, rAF LOOP
+   K. POWER, WARM-UP, WIRING, SEED, rAF LOOP
    =================================================================== */
 function setBroadcasting(on){
   // The station is "ON AIR" (tube + label lit) the whole time it's powered -- a
@@ -1653,6 +1753,75 @@ function setBroadcasting(on){
   els.reelR.classList.toggle("spin", spin);
 }
 
+// ---- power-on warm-up ritual (VISUAL ONLY). Drives --warm/--lock + the
+//      self-sweeping needle. Must NEVER block AudioContext.resume() / runShow /
+//      fetches; reduced-motion collapses it to an instant on. ----
+let warmRAF = null, sweepRAF = null;
+function easeThermal(x){ return x < .5 ? 2*x*x : 1 - Math.pow(-2*x+2, 2)/2; }
+function clearWarmup(){
+  State.warming = false;
+  if (warmRAF){ cancelAnimationFrame(warmRAF); warmRAF = null; }
+  if (sweepRAF){ cancelAnimationFrame(sweepRAF); sweepRAF = null; }
+}
+function runWarmup(){
+  clearWarmup();
+  if (State.reducedMotion){
+    setWarm(1); setLock(1);
+    setFreq(NIGHTWAVE_FREQ, false);
+    els.body.classList.add("broadcasting");
+    els.onairLabel.textContent = "ON AIR";
+    drawDial();
+    return;
+  }
+  State.warming = true;
+  setWarm(0); setLock(0);
+  // 1) filament bloom + backlight (radial mask w/ thermal-lag easing + early flicker)
+  const T0 = performance.now(), DUR = 3600;
+  (function bloom(now){
+    if (!State.powered){ clearWarmup(); return; }
+    const p = Math.min(1, (now - T0) / DUR);
+    const flick = p < .25 ? 0.06*Math.sin(now/40) : 0;
+    setWarm(Math.min(1, easeThermal(p) * (1 + flick)));
+    drawDial();   // brighten the scale numerals/ticks with the filament
+    if (p < 1){ warmRAF = requestAnimationFrame(bloom); }
+    else { setWarm(1); warmRAF = null; drawDial(); }
+  })(T0);
+  // 2) needle self-sweeps from the low end up and settles on 98.6 (damped overshoot)
+  captionTimers.push(setTimeout(()=>{
+    if (!State.powered){ return; }
+    const s = performance.now(), D = 2200;
+    const lockPct = freqToPct(NIGHTWAVE_FREQ) * 100;
+    (function sweep(now){
+      if (!State.powered){ sweepRAF = null; return; }
+      const p = Math.min(1, (now - s) / D);
+      let pct;
+      if (p < .45){ pct = 2 + (100 - 2) * (p / .45); }      // run up toward the high end
+      else {
+        const q = (p - .45) / .55;
+        const overshoot = Math.sin(q*Math.PI*2) * Math.pow(1 - q, 2) * 6;
+        pct = 100 + (lockPct - 100) * easeThermal(q) + overshoot;
+      }
+      const f = FREQ_MIN + (Math.max(0, Math.min(100, pct)) / 100) * (FREQ_MAX - FREQ_MIN);
+      // visual-only: move needle + lights, but do NOT mark fromUser (no fragments/eggs)
+      setFreq(f, false);
+      if (p < 1){ sweepRAF = requestAnimationFrame(sweep); }
+      else { sweepRAF = null; setFreq(NIGHTWAVE_FREQ, false); }
+    })(s);
+  }, 2600));
+  // 3) ON AIR tube ignites + carrier lock latches near the end of the ritual
+  captionTimers.push(setTimeout(()=>{
+    if (!State.powered) return;
+    setBroadcasting(false);                 // refresh reels/tube from current state
+    els.body.classList.add("broadcasting"); // tube ignites
+    els.onairLabel.textContent = "ON AIR";
+  }, 5200));
+  captionTimers.push(setTimeout(()=>{
+    if (!State.powered) return;
+    setLock(1);
+    State.warming = false;
+  }, 5600));
+}
+
 async function powerOn(){
   if (State.powered) return;
   // FIRST gesture: create + resume the single AudioContext, THEN audio.
@@ -1661,10 +1830,11 @@ async function powerOn(){
   State.powered = true;
   els.body.classList.add("powered");
   els.power.setAttribute("aria-pressed","true");
-  els.pwrTxt.innerHTML = "ON AIR";
+  els.pwrTxt.innerHTML = "POWER &middot; ON";
   els.handset.disabled = false;
   els.body.classList.add("broadcasting");   // light the ON AIR sign the moment we're powered
   els.onairLabel.textContent = "ON AIR";
+  runWarmup();                              // visual-only tube warm-up (non-blocking)
   updateHissForTuning();
   applyMeter();                             // gauge -> SIGNAL
   rampGain(Sound.crackleGain, 0.05, 0.6);   // bring up the vinyl/room bed
@@ -1680,9 +1850,11 @@ async function powerOn(){
 
 function powerOff(){
   State.powered = false;
-  els.body.classList.remove("powered","broadcasting","intimate");
+  clearWarmup();
+  setWarm(0); setLock(0);
+  els.body.classList.remove("powered","broadcasting","intimate","locked");
   els.power.setAttribute("aria-pressed","false");
-  els.pwrTxt.innerHTML = "&#9656; POWER";
+  els.pwrTxt.innerHTML = "POWER &middot; OFF";
   els.handset.disabled = true;
   els.onairLabel.textContent = "STANDBY";
   setBroadcasting(false);
@@ -1691,20 +1863,31 @@ function powerOff(){
   try{ if (Sound.voiceEl) Sound.voiceEl.pause(); }catch(e){}
   if (Sound.ctx){ rampGain(Sound.hissGain, 0, 0.3); rampGain(Sound.padGain, 0, 0.3); rampGain(Sound.crackleGain, 0, 0.3); rampGain(Sound.drumGain, 0, 0.3); }
   stopDrums();
+  drawDial();
   applyMeter();                             // gauge caption -> "—"
   showCaption("Turn the power knob to tune in…");
 }
 
 function togglePower(){ State.powered ? powerOff() : powerOn(); }
 
-// ---- VU meter + idle broadcast loop on a single rAF ----
+// ---- analog VU needle + idle broadcast loop on a single rAF ----
+function roundRect(c,x,y,w,h,r){
+  c.beginPath();
+  c.moveTo(x+r,y);
+  c.arcTo(x+w,y,x+w,y+h,r);
+  c.arcTo(x+w,y+h,x,y+h,r);
+  c.arcTo(x,y+h,x,y,r);
+  c.arcTo(x,y,x+w,y,r);
+  c.closePath();
+}
+let vuRms = 0;   // smoothed needle source
 function loop(){
   requestAnimationFrame(loop);
 
   const c = els.vuCanvas, ctx = c.getContext("2d");
   const dpr = window.devicePixelRatio || 1;
-  if (c.width !== c.clientWidth*dpr || c.height !== c.clientHeight*dpr){
-    c.width = c.clientWidth*dpr; c.height = c.clientHeight*dpr;
+  if (c.width !== Math.round(c.clientWidth*dpr) || c.height !== Math.round(c.clientHeight*dpr)){
+    c.width = Math.round(c.clientWidth*dpr); c.height = Math.round(c.clientHeight*dpr);
   }
   ctx.setTransform(dpr,0,0,dpr,0,0);
   const w = c.clientWidth, h = c.clientHeight;
@@ -1718,27 +1901,48 @@ function loop(){
     for (let i=0;i<Sound.vuData.length;i++){ const v = Sound.vuData[i]/255; sum += v*v; }
     rms = Math.sqrt(sum/Sound.vuData.length);
   }
-
-  // LED bar
-  const cols = 18, gap = 3;
-  const bw = (w - gap*(cols+1)) / cols;
-  const lit = Math.round(rms * cols * 2.2);
-  for (let i=0;i<cols;i++){
-    const on = i < lit;
-    const x = gap + i*(bw+gap);
-    let col;
-    if (i < cols*0.6) col = on ? "#7CFF6B" : "rgba(60,90,50,0.25)";
-    else if (i < cols*0.85) col = on ? "#FFD23F" : "rgba(110,90,30,0.25)";
-    else col = on ? "#FF5A2C" : "rgba(120,50,30,0.25)";
-    ctx.fillStyle = col;
-    ctx.fillRect(x, 6, bw, h-12);
-    if (on){ ctx.save(); ctx.globalAlpha=0.5; ctx.shadowColor=col; ctx.shadowBlur=8; ctx.fillRect(x,6,bw,h-12); ctx.restore(); }
+  // smooth the needle so it sways like a real meter
+  vuRms += (rms - vuRms) * 0.18;
+
+  // ---- cream 1970s analog meter face ----
+  const face = ctx.createLinearGradient(0,0,0,h);
+  face.addColorStop(0, "#ead7ac");
+  face.addColorStop(1, "#9f8350");
+  ctx.fillStyle = face;
+  roundRect(ctx, 6, 6, w-12, h-12, 6);
+  ctx.fill();
+
+  // tick marks
+  ctx.strokeStyle = "rgba(40,25,10,.45)";
+  ctx.lineWidth = 1;
+  for (let i=0;i<=10;i++){
+    const x = 22 + i*((w-44)/10);
+    const tall = i % 5 === 0;
+    ctx.beginPath();
+    ctx.moveTo(x, h-24);
+    ctx.lineTo(x, h-(tall?40:32));
+    ctx.stroke();
   }
-  // analog needle overlay
-  const cx = w/2, cy = h-4;
-  const ang = -Math.PI*0.75 + Math.min(1, rms*2.6) * Math.PI*0.5;
-  ctx.strokeStyle = "rgba(255,225,180,0.85)"; ctx.lineWidth = 2;
-  ctx.beginPath(); ctx.moveTo(cx,cy); ctx.lineTo(cx + Math.cos(ang)*(h*0.7), cy + Math.sin(ang)*(h*0.7)); ctx.stroke();
+  // red zone at the top end
+  ctx.strokeStyle = "rgba(150,30,20,.6)";
+  for (let i=8;i<=10;i++){
+    const x = 22 + i*((w-44)/10);
+    ctx.beginPath(); ctx.moveTo(x, h-24); ctx.lineTo(x, h-40); ctx.stroke();
+  }
+  // "VU" label
+  ctx.fillStyle = "rgba(55,34,16,.8)";
+  ctx.font = "700 9px 'Marcellus SC', Georgia, serif";
+  ctx.textAlign = "center";
+  ctx.fillText("VU", w/2, 22);
+
+  // the single moving needle, driven by the same rms
+  const cx = w/2, cy = h + 8;
+  const ang = -Math.PI*0.72 + Math.min(1, vuRms*2.2) * Math.PI*0.44;
+  ctx.strokeStyle = "#5a1b12"; ctx.lineWidth = 2;
+  ctx.beginPath(); ctx.moveTo(cx, cy);
+  ctx.lineTo(cx + Math.cos(ang)*(h*0.92), cy + Math.sin(ang)*(h*0.92)); ctx.stroke();
+  // pivot cap
+  ctx.fillStyle = "#5a1b12"; ctx.beginPath(); ctx.arc(cx, cy, 3, 0, Math.PI*2); ctx.fill();
 
   // idle broadcast loop: if powered, locked, quiet for ~20s, fetch next segment
   if (State.powered && !State.busy && !State.recording && !State.showRunning){
@@ -1810,7 +2014,7 @@ function wire(){
     State.captionsOn = !State.captionsOn;
     els.capToggle.setAttribute("aria-pressed", String(State.captionsOn));
     els.capToggle.textContent = "CAPTIONS: " + (State.captionsOn ? "ON" : "OFF");
-    if (!State.captionsOn) els.caption.textContent = "";
+    if (!State.captionsOn){ els.caption.textContent = ""; els.transcript.innerHTML = ""; }
   });
 
   // global seed keys