/* ==========================================================================
   AWOOGA VHF — Channel 16
   --------------------------------------------------------------------------
   Two worlds on one page:
     1. THE SET      a fixed-mount marine transceiver, drawn in CSS. Brushed
                     metal, an amber LCD, real-feeling keys.
     2. THE ARCHIVE  a communications recorder: charcoal, amber typography,
                     waveform, sparing REC indicator.

   Both live in the same dark shell so the page reads as one instrument rather
   than a widget bolted onto the site.

   SWAPPING IN YOUR OWN RADIO ARTWORK
   ----------------------------------
   Drop a file at  assets/img/vhf-radio-background.webp  and vhf.js detects it,
   adds .has-artwork to [data-vhf-radio], and the CSS-drawn faceplate steps
   aside for the image (see "custom faceplate" near the end of the radio
   section). Controls keep working on top of it; adjust --vhf-face-inset if
   your artwork's bezel is a different thickness. Nothing else needs editing.
   ========================================================================== */

@import url("tokens.css");

:root {
  --vhf-ink:      #06090f;
  --vhf-deep:     #0b121b;
  --vhf-panel:    #121b27;
  --vhf-panel-2:  #18232f;
  --vhf-edge:     rgba(255, 255, 255, 0.09);
  --vhf-edge-hi:  rgba(255, 255, 255, 0.22);
  --vhf-text:     #e8eef5;
  --vhf-dim:      #93a4b6;
  --vhf-faint:    #64748b;

  --vhf-amber:    #ffb23f;
  --vhf-amber-dk: #b9761b;
  --vhf-green:    #4fe08b;
  --vhf-red:      #ef4d43;
  --vhf-lcd-bg:   #14150c;
  --vhf-lcd-ink:  #ffc766;

  /* Brass. The site's --brass lives in tokens.css and is tuned for cream
     backgrounds; these are the same metal seen in a dark wheelhouse. */
  --vhf-brass:    #b8912f;
  --vhf-brass-lt: #f0d78a;
  --vhf-brass-dk: #6b5218;

  --vhf-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Padding between the faceplate edge and its controls. Nudge this when you
     swap in custom artwork with a thicker or thinner bezel. */
  --vhf-face-inset: clamp(1rem, 2.4vw, 1.9rem);
}

/* Shared helpers this page needs (kept local, as the other pages do). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.next-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; }
.next-link { padding: 1.4rem; display: flex; flex-direction: column; gap: 0.3rem; }
.next-link h3 { font-size: 1.15rem; margin: 0; }
.next-link p { margin: 0; color: var(--text-soft); font-size: 0.92rem; }
.next-link .xcard__arrow { color: var(--red); font-weight: 700; font-size: 0.9rem; margin-top: 0.6rem; }

/* ==========================================================================
   1. STAGE
   ========================================================================== */

.vhf-stage {
  position: relative;
  background: var(--vhf-ink);
  color: var(--vhf-text);
  padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}

/* A cold wheelhouse light from above-left, so the metal has something to
   catch. Purely decorative. */
.vhf-stage__wash {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 18% -10%, rgba(93, 148, 214, 0.20), transparent 60%),
    radial-gradient(90% 70% at 88% 8%, rgba(255, 178, 63, 0.10), transparent 62%);
}

.vhf-stage .container { position: relative; z-index: 1; }

.vhf-stage__intro { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.vhf-stage__intro .eyebrow { color: var(--vhf-amber); }
.vhf-stage__intro .eyebrow::before { background: var(--vhf-amber); }
.vhf-stage__intro h1 {
  color: #fff;
  font-size: clamp(2.2rem, 6vw, 4rem);
  line-height: 1.02;
  margin: 0.35rem 0 0.9rem;
}
.vhf-stage__intro h1 em {
  font-style: normal;
  color: var(--vhf-amber);
  font-variant-numeric: tabular-nums;
}
.vhf-stage__intro .lead { color: var(--vhf-dim); max-width: 46ch; }

.vhf-stage__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);
  gap: clamp(1.4rem, 3vw, 2.4rem);
  align-items: start;
}

/* ==========================================================================
   2. THE RADIO
   ========================================================================== */

.vhf-radio { position: relative; }

.vhf-radio__face {
  position: relative;
  border-radius: 22px;
  padding: var(--vhf-face-inset);
  display: grid;
  gap: var(--vhf-face-gap, clamp(0.85rem, 1.8vw, 1.3rem));

  /* Brushed aluminium: a broad vertical shade plus fine repeating grain. */
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.030) 0 1px,
      rgba(0,0,0,0.030) 1px 2px,
      transparent 2px 5px),
    linear-gradient(178deg, #4a5460 0%, #333c47 22%, #232b35 60%, #1a212a 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 6px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 30px 70px rgba(0, 0, 0, 0.55),
    0 4px 14px rgba(0, 0, 0, 0.4);
}

/* The brass bezel the faceplate is bolted into. Drawn behind the face so the
   metal reads as a machined ring rather than a coloured border: a lit top
   edge, a shaded bottom one, and a dark seam where the two parts meet. */
.vhf-radio__face::before {
  content: "";
  position: absolute; inset: -7px; z-index: -1;
  border-radius: 29px;
  background:
    linear-gradient(168deg,
      var(--vhf-brass-lt) 0%,
      var(--vhf-brass) 16%,
      #7c6120 46%,
      var(--vhf-brass) 72%,
      var(--vhf-brass-dk) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 210, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 0 34px rgba(184, 145, 47, 0.22),
    0 26px 60px rgba(0, 0, 0, 0.55);
}

/* ---------- Case hardware ---------- */

/* Four screws, one per corner, each seated a little differently because
   nobody has ever driven four screws to the same angle. */
.vhf-screws { position: absolute; inset: 0; pointer-events: none; }
.vhf-screws i {
  position: absolute;
  width: 13px; height: 13px;
  border-radius: 50%;
  background:
    linear-gradient(155deg, var(--vhf-brass-lt), var(--vhf-brass) 45%, var(--vhf-brass-dk));
  box-shadow:
    inset 0 1px 1px rgba(255, 245, 210, 0.7),
    inset 0 -1px 2px rgba(0, 0, 0, 0.55),
    0 1px 3px rgba(0, 0, 0, 0.7);
}
/* The slot. */
.vhf-screws i::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 9px; height: 1.5px;
  background: rgba(0, 0, 0, 0.55);
  box-shadow: 0 1px 0 rgba(255, 240, 200, 0.35);
  transform: translate(-50%, -50%) rotate(var(--turn, 0deg));
}
.vhf-screws i:nth-child(1) { top: 7px;    left: 7px;    --turn:  24deg; }
.vhf-screws i:nth-child(2) { top: 7px;    right: 7px;   --turn: -63deg; }
.vhf-screws i:nth-child(3) { bottom: 7px; left: 7px;    --turn:  81deg; }
.vhf-screws i:nth-child(4) { bottom: 7px; right: 7px;   --turn:  -8deg; }

/* Somebody's mug, over and over, in the one flat spot on the set. */
.vhf-mugring {
  position: absolute;
  bottom: 15%; left: 7%;
  width: clamp(58px, 12vw, 86px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  border: 2px solid rgba(150, 106, 52, 0.16);
  box-shadow: inset 0 0 0 5px rgba(150, 106, 52, 0.05);
  transform: rotate(-8deg) skewX(4deg);
  opacity: 0.9;
}

/* Salt-weathered corners — barely there, but it stops the metal reading as
   a flat swatch. */
.vhf-radio__face::after {
  content: ""; position: absolute; inset: 0; border-radius: 22px; pointer-events: none;
  background:
    radial-gradient(60% 40% at 8% 96%, rgba(190, 180, 150, 0.10), transparent 70%),
    radial-gradient(50% 35% at 95% 4%, rgba(255, 255, 255, 0.08), transparent 70%);
  mix-blend-mode: screen;
}

.vhf-radio__brandbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.8rem; flex-wrap: wrap;
  padding-right: 1.4rem; /* clear of the top-right screw */
}

/* An engraved brass plate, not a heading: the lettering is cut INTO the metal,
   so it is darker than its surround with a lit lower edge. */
.vhf-radio__nameplate {
  display: inline-flex; flex-direction: column; gap: 0.1rem;
  padding: 0.42rem 0.9rem 0.46rem;
  border-radius: 5px;
  background:
    linear-gradient(158deg, #d8bd72 0%, var(--vhf-brass) 38%, #8d7027 76%, var(--vhf-brass-dk) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 218, 0.65),
    inset 0 -1px 2px rgba(0, 0, 0, 0.45),
    0 2px 5px rgba(0, 0, 0, 0.55);
}
.vhf-radio__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 2.2vw, 1.32rem);
  line-height: 1;
  letter-spacing: 0.2em;
  color: #493713;
  text-shadow: 0 1px 0 rgba(255, 246, 210, 0.55);
}
.vhf-radio__model {
  font-family: var(--vhf-mono);
  font-size: 0.53rem;
  letter-spacing: 0.2em;
  color: rgba(58, 42, 12, 0.72);
  text-shadow: 0 1px 0 rgba(255, 246, 210, 0.4);
}

/* ---------- ON AIR ---------- */

/* Dead glass until a station keys up, then the whole plate lifts. The lamp is
   the one thing on the set allowed to be loud. */
.vhf-onair {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.34rem 0.7rem 0.36rem;
  border-radius: 4px;
  background: linear-gradient(180deg, #171d25, #0d1218);
  border: 1px solid rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -2px 5px rgba(0, 0, 0, 0.6);
  font-family: var(--vhf-mono);
  font-size: 0.56rem; font-weight: 700; letter-spacing: 0.26em;
  color: rgba(255, 255, 255, 0.2);
  transition: color 0.2s linear, box-shadow 0.3s var(--ease), background 0.3s var(--ease);
}
.vhf-onair i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #2b323b;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.85);
  transition: background 0.16s linear, box-shadow 0.16s linear;
}
.vhf-radio.is-rx .vhf-onair,
.vhf-radio.is-tx .vhf-onair {
  color: #ffe3c2;
  background: linear-gradient(180deg, #3d1b12, #23100a);
  box-shadow:
    inset 0 1px 0 rgba(255, 190, 150, 0.25),
    0 0 20px rgba(239, 77, 67, 0.35);
}
.vhf-radio.is-rx .vhf-onair i,
.vhf-radio.is-tx .vhf-onair i {
  background: var(--vhf-red);
  box-shadow: 0 0 10px rgba(239, 77, 67, 0.95);
}

/* ---------- LCD ---------- */

.vhf-lcd {
  position: relative;
  border-radius: 10px;
  padding: 3px;
  background: linear-gradient(180deg, #0a0d0a, #1b1f18);
  box-shadow:
    inset 0 3px 10px rgba(0, 0, 0, 0.9),
    0 1px 0 rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.vhf-lcd__glass {
  position: relative;
  border-radius: 8px;
  padding: clamp(0.75rem, 1.8vw, 1.1rem) clamp(0.9rem, 2vw, 1.25rem);
  background:
    radial-gradient(120% 140% at 50% 0%, #1e2013 0%, var(--vhf-lcd-bg) 70%);
  color: var(--vhf-lcd-ink);
  font-family: var(--vhf-mono);
  /* Dim until powered — the backlight is the first sign of life. */
  filter: brightness(0.42) saturate(0.5);
  transition: filter 0.5s var(--ease);
}
.vhf-radio.is-on .vhf-lcd__glass {
  filter: none;
  text-shadow: 0 0 12px rgba(255, 178, 63, 0.45);
}

.vhf-lcd__row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}

.vhf-lcd__mode {
  font-size: clamp(0.75rem, 1.7vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.18em;
}
.vhf-radio.is-rx .vhf-lcd__mode { color: var(--vhf-green); }
.vhf-radio.is-tx .vhf-lcd__mode { color: var(--vhf-red); }

/* Signal meter — eight segments that light while audio plays. */
.vhf-lcd__meter { display: inline-flex; align-items: flex-end; gap: 3px; height: 20px; }
.vhf-lcd__meter i {
  display: block; width: 4px; border-radius: 1px;
  background: currentColor; opacity: 0.16;
  transition: opacity 0.09s linear;
}
.vhf-lcd__meter i:nth-child(1) { height: 30%; }
.vhf-lcd__meter i:nth-child(2) { height: 40%; }
.vhf-lcd__meter i:nth-child(3) { height: 50%; }
.vhf-lcd__meter i:nth-child(4) { height: 62%; }
.vhf-lcd__meter i:nth-child(5) { height: 74%; }
.vhf-lcd__meter i:nth-child(6) { height: 84%; }
.vhf-lcd__meter i:nth-child(7) { height: 92%; }
.vhf-lcd__meter i:nth-child(8) { height: 100%; }
.vhf-lcd__meter i.is-lit { opacity: 1; }

.vhf-lcd__channel {
  display: flex; align-items: baseline; gap: 0.5rem;
  margin: 0.15rem 0 0.1rem;
}
.vhf-lcd__ch {
  font-size: clamp(3rem, 12vw, 5.4rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.vhf-lcd__chlabel {
  font-size: clamp(0.9rem, 2.2vw, 1.2rem);
  letter-spacing: 0.2em;
  opacity: 0.75;
}
.vhf-lcd__sub {
  font-size: clamp(0.6rem, 1.5vw, 0.74rem);
  letter-spacing: 0.2em;
  opacity: 0.8;
}
.vhf-lcd__station {
  margin-top: 0.55rem;
  padding-top: 0.5rem;
  border-top: 1px dashed rgba(255, 199, 102, 0.28);
  font-size: clamp(0.72rem, 1.9vw, 0.92rem);
  font-weight: 500;
  letter-spacing: 0.1em;
  min-height: 1.3em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Bottom rail: monitoring clock on the left, and a status line the set keeps
   volunteering on the right. Both are segment-display lettering, so they have
   to stay on one line at every width. */
.vhf-lcd__rail {
  display: flex; align-items: baseline; gap: 0.7rem;
  margin-top: 0.4rem;
  font-size: clamp(0.55rem, 1.4vw, 0.66rem);
  letter-spacing: 0.14em;
  opacity: 0.72;
  min-width: 0;
}
.vhf-lcd__timer { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.vhf-lcd__ticker {
  flex: 1; min-width: 0;
  text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity 0.3s var(--ease);
}
.vhf-lcd__ticker.is-swap { opacity: 0; }

/* Scan lines over the glass — the one retro flourish, kept almost invisible. */
.vhf-lcd__scan {
  position: absolute; inset: 0; pointer-events: none; border-radius: 8px;
  background: repeating-linear-gradient(180deg,
    rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 3px);
  opacity: 0.5;
}

/* ---------- Lamps ---------- */

.vhf-lamps {
  display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap;
  font-family: var(--vhf-mono); font-size: 0.66rem; letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.5);
}
.vhf-lamp { display: inline-flex; align-items: center; gap: 0.36rem; }
.vhf-lamp i {
  width: 8px; height: 8px; border-radius: 50%;
  background: #2a323c;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
  transition: background 0.16s linear, box-shadow 0.16s linear;
}
.vhf-radio.is-on  [data-vhf-lamp="pwr"] i { background: var(--vhf-green); box-shadow: 0 0 9px rgba(79, 224, 139, 0.8); }
.vhf-radio.is-rx  [data-vhf-lamp="rx"]  i { background: var(--vhf-green); box-shadow: 0 0 10px rgba(79, 224, 139, 0.9); }
.vhf-radio.is-tx  [data-vhf-lamp="tx"]  i { background: var(--vhf-red);   box-shadow: 0 0 10px rgba(239, 77, 67, 0.9); }
.vhf-lamp__caption { margin-left: auto; letter-spacing: 0.06em; color: rgba(255,255,255,0.55); text-transform: none; font-size: 0.72rem; }

/* ---------- Speaker + knob ---------- */

.vhf-radio__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(0.9rem, 2vw, 1.5rem);
  align-items: center;
}

.vhf-grille {
  height: clamp(58px, 11vw, 92px);
  border-radius: 8px;
  background:
    repeating-linear-gradient(180deg,
      #0e131a 0 3px,
      #2b333e 3px 5px,
      #161c24 5px 8px);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.85), 0 1px 0 rgba(255, 255, 255, 0.1);
  transform-origin: center;
}
/* The cone moves when she's talking. Tiny — this should be felt, not seen. */
.vhf-radio.is-rx .vhf-grille { animation: vhf-cone 0.16s linear infinite; }
@keyframes vhf-cone {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.006, 1.012); }
}

.vhf-knob-well { text-align: center; }
.vhf-knob {
  width: clamp(62px, 13vw, 92px);
  height: clamp(62px, 13vw, 92px);
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      #3c454f 0deg, #222932 12deg, #3c454f 24deg,
      #222932 36deg, #3c454f 48deg, #222932 60deg,
      #3c454f 72deg, #222932 84deg, #3c454f 96deg,
      #222932 108deg, #3c454f 120deg, #222932 132deg,
      #3c454f 144deg, #222932 156deg, #3c454f 168deg,
      #222932 180deg, #3c454f 192deg, #222932 204deg,
      #3c454f 216deg, #222932 228deg, #3c454f 240deg,
      #222932 252deg, #3c454f 264deg, #222932 276deg,
      #3c454f 288deg, #222932 300deg, #3c454f 312deg,
      #222932 324deg, #3c454f 336deg, #222932 348deg, #3c454f 360deg);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6), inset 0 -3px 8px rgba(0, 0, 0, 0.55);
  display: grid; place-items: center;
  margin-inline: auto;
  position: relative;
  /* It really turns: drag it, spin the wheel over it, or focus and arrow. */
  cursor: grab;
  touch-action: none;
}
.vhf-knob:active,
.vhf-knob.is-turning { cursor: grabbing; }
.vhf-knob.is-turning .vhf-knob__dial { transition: none; }

/* Engraved index marks around the collar, so the knob has something to point
   at and the detent has somewhere to land. */
.vhf-knob__ticks {
  position: absolute; inset: -9px;
  border-radius: 50%;
  pointer-events: none;
  background:
    repeating-conic-gradient(from 228deg,
      rgba(255, 255, 255, 0.34) 0deg 1.1deg,
      transparent 1.1deg 24deg);
  -webkit-mask: radial-gradient(circle, transparent 0 60%, #000 60% 72%, transparent 72%);
          mask: radial-gradient(circle, transparent 0 60%, #000 60% 72%, transparent 72%);
}
.vhf-knob__dial {
  width: 68%; height: 68%; border-radius: 50%;
  background: linear-gradient(160deg, #4a545f, #1b222b);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.14), 0 2px 6px rgba(0,0,0,0.5);
  position: relative;
  transition: transform 0.32s var(--ease);
}
.vhf-knob__mark {
  position: absolute; top: 8%; left: 50%; transform: translateX(-50%);
  width: 3px; height: 26%; border-radius: 2px;
  background: var(--vhf-amber);
  box-shadow: 0 0 7px rgba(255, 178, 63, 0.7);
}
.vhf-knob__caption {
  margin: 0.45rem 0 0;
  font-family: var(--vhf-mono); font-size: 0.58rem;
  letter-spacing: 0.22em; color: rgba(255, 255, 255, 0.42);
}

/* ---------- Channel chips ---------- */

.vhf-channels { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.vhf-chip {
  flex: 1 1 auto;
  min-width: 62px;
  min-height: 40px;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: linear-gradient(180deg, #2c343e, #1a212a);
  color: rgba(255, 255, 255, 0.66);
  font-family: var(--vhf-mono); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: color 0.16s, border-color 0.16s, background 0.16s, transform 0.09s;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 2px 4px rgba(0,0,0,0.4);
}
.vhf-chip:hover { color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.vhf-chip:active { transform: translateY(1px); }
.vhf-chip.is-active {
  color: var(--vhf-lcd-ink);
  border-color: rgba(255, 178, 63, 0.6);
  background: linear-gradient(180deg, #3a3524, #241f13);
  box-shadow: inset 0 1px 0 rgba(255,199,102,0.28), 0 0 14px rgba(255, 178, 63, 0.22);
}

/* ---------- Hard keys + sliders ---------- */

.vhf-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 0.5rem;
  align-items: stretch;
}

.vhf-key {
  min-height: 44px;
  padding: 0.55rem 0.6rem;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  background: linear-gradient(180deg, #39424d 0%, #262e38 55%, #1b222a 100%);
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--vhf-mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.14em;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 3px 0 rgba(0, 0, 0, 0.45), 0 5px 10px rgba(0,0,0,0.4);
  transition: transform 0.07s linear, box-shadow 0.07s linear, color 0.16s;
}
.vhf-key:hover { color: #fff; }
.vhf-key:active,
.vhf-key[aria-pressed="true"] {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.45);
}
.vhf-key[aria-pressed="true"] { color: var(--vhf-lcd-ink); }
.vhf-key__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #2a323c; box-shadow: inset 0 1px 2px rgba(0,0,0,0.8);
}
.vhf-radio.is-on .vhf-key__dot { background: var(--vhf-green); box-shadow: 0 0 8px rgba(79, 224, 139, 0.85); }

.vhf-key--distress {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #8f2a24 0%, #6d1f1a 60%, #4d1512 100%);
  color: #ffd9d6;
  border-color: rgba(0, 0, 0, 0.6);
  /* Hazard hatching along the top edge, as on the hinged red lid it lives
     under. */
  background-image:
    repeating-linear-gradient(135deg,
      rgba(255, 214, 92, 0.22) 0 6px,
      transparent 6px 12px),
    linear-gradient(180deg, #8f2a24 0%, #6d1f1a 60%, #4d1512 100%);
}
.vhf-key--distress:hover { color: #fff; }
.vhf-key__label { position: relative; z-index: 1; }

/* Fills across the key while it's held down. It reaches the end and then the
   set declines, which is the joke and also the correct behaviour. */
.vhf-key__hold {
  position: absolute; inset: 0;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(180deg, rgba(255, 120, 100, 0.85), rgba(220, 60, 48, 0.9));
}
.vhf-key--distress.is-arming .vhf-key__hold {
  transform: scaleX(1);
  transition: transform 1.4s linear;
}
.vhf-key--distress.is-refused {
  animation: vhf-refuse 0.42s var(--ease) 2;
}
@keyframes vhf-refuse {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-3px); }
  75%      { transform: translateX(3px); }
}

.vhf-slider {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0 0.6rem;
  min-height: 44px;
  border-radius: 8px;
  background: linear-gradient(180deg, #202832, #161c24);
  border: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6);
}
.vhf-slider__label {
  font-family: var(--vhf-mono); font-size: 0.6rem; letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.45);
}
.vhf-slider input[type="range"] { flex: 1; min-width: 0; }

/* Range styling shared by the set and the archive player. */
.vhf-slider input[type="range"],
.vhf-scrub input[type="range"],
.vhf-pvol input[type="range"] {
  -webkit-appearance: none; appearance: none;
  height: 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.16);
  outline-offset: 4px; cursor: pointer;
}
.vhf-slider input[type="range"]::-webkit-slider-thumb,
.vhf-scrub input[type="range"]::-webkit-slider-thumb,
.vhf-pvol input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; border-radius: 50%;
  background: linear-gradient(180deg, #ffd08a, var(--vhf-amber));
  border: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.vhf-slider input[type="range"]::-moz-range-thumb,
.vhf-scrub input[type="range"]::-moz-range-thumb,
.vhf-pvol input[type="range"]::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.5);
  background: var(--vhf-amber);
}

/* ---------- Microphone / PTT ---------- */

.vhf-mic { position: relative; display: flex; align-items: center; gap: 0.9rem; }
.vhf-mic__cord {
  flex: 0 0 auto;
  width: 34px; height: 26px;
  border-left: 3px solid rgba(255, 255, 255, 0.14);
  border-bottom: 3px solid rgba(255, 255, 255, 0.14);
  border-bottom-left-radius: 14px;
  margin-bottom: 12px;
}

.vhf-ptt {
  flex: 1;
  min-height: 62px;
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.7rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.55);
  background: linear-gradient(180deg, #414b57 0%, #2a323c 55%, #1c232c 100%);
  color: #eef3f8;
  font-family: var(--vhf-mono); font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.14em; line-height: 1.25; text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 4px 0 rgba(0,0,0,0.5), 0 8px 18px rgba(0,0,0,0.45);
  transition: transform 0.08s linear, box-shadow 0.08s linear;
}
.vhf-ptt:hover { color: #fff; }
.vhf-ptt:active,
.vhf-ptt.is-down {
  transform: translateY(3px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 1px 0 rgba(0,0,0,0.5);
}
.vhf-ptt__grille {
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.16), transparent 60%),
    repeating-radial-gradient(circle, #10161d 0 2px, #2b333e 2px 3px);
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.8);
}

.vhf-pttmenu {
  margin-top: 0.2rem;
  border-radius: 12px;
  padding: 0.9rem 1rem 1rem;
  background: rgba(8, 12, 18, 0.85);
  border: 1px solid var(--vhf-edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.vhf-pttmenu__head {
  margin: 0 0 0.6rem;
  font-family: var(--vhf-mono); font-size: 0.62rem; letter-spacing: 0.2em;
  color: var(--vhf-amber);
}
.vhf-pttmenu__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.vhf-pttmenu__list button {
  width: 100%; text-align: left;
  min-height: 42px;
  padding: 0.55rem 0.8rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.04);
  color: var(--vhf-text);
  font-size: 0.88rem; font-family: var(--font-sans);
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s, transform 0.08s;
}
.vhf-pttmenu__list button:hover {
  background: rgba(255, 178, 63, 0.12);
  border-color: rgba(255, 178, 63, 0.45);
}
.vhf-pttmenu__list button:disabled { opacity: 0.45; cursor: not-allowed; }
.vhf-pttmenu__note {
  margin: 0.7rem 0 0; font-size: 0.76rem; color: var(--vhf-faint);
}

/* ---------- Equipment plate ---------- */

/* Etched aluminium, riveted on at an angle nobody checked. Everything on it is
   presented with total confidence. */
.vhf-spec {
  position: relative;
  margin-top: 0.15rem;
  padding: 0.75rem 0.95rem 0.8rem;
  border-radius: 4px;
  background:
    repeating-linear-gradient(92deg,
      rgba(255, 255, 255, 0.028) 0 1px,
      transparent 1px 3px),
    linear-gradient(170deg, #333b45, #202730);
  border: 1px solid rgba(0, 0, 0, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 2px 6px rgba(0, 0, 0, 0.45);
}
.vhf-spec__rivets i {
  position: absolute; top: 50%;
  width: 7px; height: 7px; border-radius: 50%;
  margin-top: -3.5px;
  background: linear-gradient(150deg, #cbb371, #6d5518);
  box-shadow: inset 0 1px 0 rgba(255, 246, 210, 0.6), 0 1px 2px rgba(0, 0, 0, 0.7);
}
.vhf-spec__rivets i:first-child { left: 6px; }
.vhf-spec__rivets i:last-child  { right: 6px; }

.vhf-spec__list {
  margin: 0 0 0.5rem;
  display: flex; flex-wrap: wrap; gap: 0.3rem 1.5rem;
  padding-inline: 0.5rem;
}
.vhf-spec__list div { display: flex; align-items: baseline; gap: 0.4rem; }
.vhf-spec__list dt {
  font-family: var(--vhf-mono); font-size: 0.5rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.34);
}
.vhf-spec__list dd {
  margin: 0;
  font-family: var(--vhf-mono); font-size: 0.6rem; letter-spacing: 0.09em;
  color: rgba(255, 255, 255, 0.66);
}
.vhf-spec__note {
  margin: 0; padding-inline: 0.5rem;
  font-family: var(--vhf-mono); font-size: 0.53rem; line-height: 1.6;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.26);
}

/* ---------- Shortcut card ---------- */

.vhf-deck { display: grid; gap: clamp(0.9rem, 2vw, 1.2rem); align-content: start; }

.vhf-keys {
  border-radius: 12px;
  padding: 0.85rem 1rem;
  background: linear-gradient(180deg, rgba(18, 27, 39, 0.9), rgba(11, 18, 27, 0.9));
  border: 1px solid var(--vhf-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.vhf-keys__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.vhf-keys__head h2 {
  margin: 0;
  font-family: var(--vhf-mono); font-size: 0.64rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--vhf-brass-lt);
}
.vhf-keys__toggle {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 34px; padding: 0 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--vhf-edge);
  background: rgba(255, 255, 255, 0.04);
  color: var(--vhf-dim);
  font-size: 0.76rem; font-family: inherit;
  cursor: pointer;
  transition: color 0.16s, border-color 0.16s, background 0.16s;
}
.vhf-keys__toggle:hover { color: #fff; border-color: var(--vhf-edge-hi); }

.vhf-keys__list {
  list-style: none;
  margin: 0.9rem 0 0; padding: 0;
  display: grid; gap: 0.35rem;
}
.vhf-keys__list[hidden] { display: none; }
.vhf-keys__list li {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.85rem; color: var(--vhf-dim); line-height: 1.4;
}
.vhf-keys__list li span { flex: 1; min-width: 0; }

kbd {
  display: inline-grid; place-items: center;
  min-width: 26px; height: 24px; padding: 0 0.4rem;
  border-radius: 5px;
  background: linear-gradient(180deg, #2d3540, #1c232c);
  border: 1px solid rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 2px 0 rgba(0, 0, 0, 0.45);
  font-family: var(--vhf-mono); font-size: 0.68rem; font-weight: 700;
  color: var(--vhf-lcd-ink);
}

/* ---------- Power curtain ---------- */

.vhf-curtain {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center;
  border-radius: 22px;
  padding: 1.5rem;
  background: linear-gradient(180deg, rgba(6, 9, 15, 0.93), rgba(6, 9, 15, 0.97));
  backdrop-filter: blur(3px);
  text-align: center;
  transition: opacity 0.45s var(--ease), visibility 0.45s;
}
.vhf-radio.is-on .vhf-curtain { opacity: 0; visibility: hidden; pointer-events: none; }

.vhf-curtain__inner { max-width: 30rem; }
.vhf-curtain__eyebrow {
  font-family: var(--vhf-mono); font-size: 0.68rem; letter-spacing: 0.32em;
  color: var(--vhf-amber); margin: 0 0 0.9rem;
}
.vhf-curtain__copy {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.6vw, 1.4rem);
  line-height: 1.35; color: #fff; margin: 0 0 1.4rem;
}
.vhf-curtain__btn {
  display: inline-flex; align-items: center; gap: 0.65rem;
  min-height: 52px;
  padding: 0.85rem 1.7rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 178, 63, 0.5);
  background: linear-gradient(180deg, #2a2313, #1a1509);
  color: var(--vhf-lcd-ink);
  font-family: var(--vhf-mono); font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.18em; cursor: pointer;
  box-shadow: 0 0 0 0 rgba(255, 178, 63, 0.5), 0 10px 26px rgba(0,0,0,0.55);
  animation: vhf-standby 2.6s ease-out infinite;
  transition: background 0.2s, transform 0.09s;
}
.vhf-curtain__btn:hover { background: linear-gradient(180deg, #3a3018, #241c0c); }
.vhf-curtain__btn:active { transform: translateY(2px); }
.vhf-curtain__pip {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--vhf-amber); box-shadow: 0 0 10px var(--vhf-amber);
}
@keyframes vhf-standby {
  0%   { box-shadow: 0 0 0 0 rgba(255, 178, 63, 0.35), 0 10px 26px rgba(0,0,0,0.55); }
  70%  { box-shadow: 0 0 0 16px rgba(255, 178, 63, 0), 0 10px 26px rgba(0,0,0,0.55); }
  100% { box-shadow: 0 0 0 0 rgba(255, 178, 63, 0), 0 10px 26px rgba(0,0,0,0.55); }
}
.vhf-curtain__small { margin: 1rem 0 0; font-size: 0.8rem; color: var(--vhf-faint); }

/* ---------- Custom faceplate ----------
   Added by vhf.js only when assets/img/vhf-radio-background.webp exists. The
   drawn metal is replaced by the artwork; every control still sits on top. */
.vhf-radio.has-artwork .vhf-radio__face {
  background-image: var(--vhf-faceplate);
  background-size: cover;
  background-position: center;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}
.vhf-radio.has-artwork .vhf-radio__face::after,
.vhf-radio.has-artwork .vhf-radio__face::before,
.vhf-radio.has-artwork .vhf-screws,
.vhf-radio.has-artwork .vhf-mugring,
.vhf-radio.has-artwork .vhf-spec,
.vhf-radio.has-artwork .vhf-radio__nameplate { display: none; }

/* The artwork brings its own branding and hardware, but ON AIR is a working
   indicator rather than decoration, so it stays. */
.vhf-radio.has-artwork .vhf-radio__brandbar { justify-content: flex-end; padding-right: 0; }
.vhf-radio.has-artwork .vhf-grille { background: rgba(0, 0, 0, 0.25); box-shadow: none; }

/* ==========================================================================
   3. SIDE PANEL — the live log
   ========================================================================== */

.vhf-side { display: grid; gap: clamp(1rem, 2vw, 1.4rem); align-content: start; }

.vhf-panel {
  border-radius: 16px;
  padding: clamp(1rem, 2.2vw, 1.4rem);
  background: linear-gradient(180deg, var(--vhf-panel), var(--vhf-deep));
  border: 1px solid var(--vhf-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 40px rgba(0, 0, 0, 0.4);
}

.vhf-panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: 0.9rem;
}
.vhf-panel__head h2 {
  margin: 0;
  font-family: var(--vhf-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--vhf-amber);
}

/* REC indicator — used sparingly, only while something is genuinely playing. */
.vhf-rec {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--vhf-mono); font-size: 0.6rem; letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.28);
}
.vhf-rec i { width: 8px; height: 8px; border-radius: 50%; background: #38414c; }
.vhf-rec.is-live { color: var(--vhf-red); }
.vhf-rec.is-live i { background: var(--vhf-red); box-shadow: 0 0 10px rgba(239,77,67,0.8); animation: vhf-blink 1.5s steps(1) infinite; }
@keyframes vhf-blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.25; } }

/* Live transcript: the caption track for the audio. */
.vhf-live {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.7rem;
  max-height: 30rem; overflow-y: auto;
  scrollbar-width: thin;
}
.vhf-live__empty {
  margin: 0; padding: 0.9rem 0;
  color: var(--vhf-faint); font-size: 0.9rem; line-height: 1.5;
}
.vhf-live__empty b { color: var(--vhf-amber); font-weight: 600; }

.vhf-line {
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 2px solid rgba(255, 255, 255, 0.12);
  animation: vhf-linein 0.4s var(--ease) both;
}
@keyframes vhf-linein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.vhf-line.is-playing {
  background: rgba(255, 178, 63, 0.10);
  border-left-color: var(--vhf-amber);
}
.vhf-line.is-awooga { border-left-color: var(--vhf-green); }
.vhf-line.is-visitor { border-left-color: #6ba7e8; }

.vhf-line__head {
  display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap;
  font-family: var(--vhf-mono); font-size: 0.62rem; letter-spacing: 0.13em;
  color: var(--vhf-faint);
  margin-bottom: 0.3rem;
}
.vhf-line__speaker { color: var(--vhf-amber); font-weight: 700; }
.vhf-line.is-awooga .vhf-line__speaker { color: var(--vhf-green); }
.vhf-line__text { margin: 0; font-size: 0.94rem; line-height: 1.5; color: var(--vhf-text); }

/* "New traffic below" — only shown when you have scrolled up the log and the
   channel has moved on without you. Clicking it re-pins to the bottom. */
.vhf-live__jump {
  display: none;
  width: 100%;
  margin-top: 0.5rem;
  min-height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(255, 178, 63, 0.4);
  background: rgba(255, 178, 63, 0.12);
  color: var(--vhf-lcd-ink);
  font-family: var(--vhf-mono); font-size: 0.6rem; letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  animation: vhf-linein 0.3s var(--ease) both;
}
.vhf-live__jump.is-shown { display: block; }
.vhf-live__jump:hover { background: rgba(255, 178, 63, 0.22); color: #fff; }

.vhf-archived {
  margin: 0.9rem 0 0; padding-top: 0.8rem;
  border-top: 1px solid var(--vhf-edge);
  font-family: var(--vhf-mono); font-size: 0.66rem; letter-spacing: 0.12em;
  color: var(--vhf-dim);
  display: flex; align-items: center; gap: 0.5rem;
  animation: vhf-linein 0.4s var(--ease) both;
}
/* The line is display:flex, which would otherwise win against [hidden]. */
.vhf-archived[hidden] { display: none; }
.vhf-archived__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--vhf-green); box-shadow: 0 0 8px rgba(79,224,139,0.7); }
.vhf-archived a { color: var(--vhf-amber); }

/* ==========================================================================
   4. THE ARCHIVE
   ========================================================================== */

.vhf-arch {
  position: relative;
  background: linear-gradient(180deg, #080d14 0%, #0d141d 40%, #0a1017 100%);
  color: var(--vhf-text);
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3.5rem, 8vw, 6rem);
  overflow: hidden;
}

/* An understated chart grid — the paper the log was kept on. */
.vhf-arch__texture {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px) 0 0 / 100% 44px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px) 0 0 / 44px 100%,
    radial-gradient(90% 60% at 50% 0%, rgba(255, 178, 63, 0.07), transparent 65%);
}
.vhf-arch .container { position: relative; z-index: 1; }

.vhf-arch__head { max-width: 60rem; }
.vhf-arch__head .eyebrow { color: var(--vhf-amber); }
.vhf-arch__head .eyebrow::before { background: var(--vhf-amber); }
.vhf-arch__head h2 {
  color: #fff; margin: 0.3rem 0 0.8rem;
  font-size: clamp(1.9rem, 4.6vw, 3rem);
}
.vhf-arch__head .lead { color: var(--vhf-dim); }

/* Brass rules above and below the tally, the way a plate is let into a panel. */
.vhf-arch__stats {
  position: relative;
  display: flex; flex-wrap: wrap; gap: clamp(1.2rem, 4vw, 2.6rem);
  margin: 1.8rem 0 1.6rem; padding: 1.1rem 0;
  border-block: 1px solid rgba(184, 145, 47, 0.28);
  background:
    linear-gradient(90deg, rgba(184, 145, 47, 0.5), transparent 45%) top    left / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(184, 145, 47, 0.5), transparent 45%) bottom left / 100% 1px no-repeat;
}
.vhf-arch__stats div { display: grid; gap: 0.2rem; }
.vhf-arch__stats dt {
  font-family: var(--vhf-mono); font-size: 0.58rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--vhf-faint);
}
.vhf-arch__stats dd {
  margin: 0; font-family: var(--vhf-mono); font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-weight: 700; color: var(--vhf-amber); font-variant-numeric: tabular-nums;
}

.vhf-random {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.2rem;
  padding: 0.95rem 1.5rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 178, 63, 0.4);
  background: linear-gradient(180deg, rgba(255, 178, 63, 0.14), rgba(255, 178, 63, 0.04));
  color: #fff; cursor: pointer; text-align: left;
  transition: transform 0.12s var(--ease), border-color 0.18s, background 0.18s;
}
.vhf-random:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 178, 63, 0.75);
  background: linear-gradient(180deg, rgba(255, 178, 63, 0.22), rgba(255, 178, 63, 0.07));
}
.vhf-random:active { transform: translateY(0); }
.vhf-random__main {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--vhf-mono); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--vhf-lcd-ink);
}
.vhf-random__main svg { width: 18px; height: 18px; }
.vhf-random__sub { font-size: 0.82rem; color: var(--vhf-dim); letter-spacing: 0; }

/* ---------- Notable rail ---------- */

.vhf-arch__sub {
  display: flex; align-items: center; gap: 0.5rem;
  margin: clamp(2rem, 4vw, 3rem) 0 1rem;
  font-family: var(--vhf-mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--vhf-amber);
}

.vhf-notable__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(206px, 1fr);
  gap: 0.75rem;
  overflow-x: auto;
  /* The category badge sits above each card's top edge, and overflow-x clips
     the vertical axis too — this is the room it needs. */
  padding-block: 0.7rem 0.6rem;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.vhf-notable__rail > * { scroll-snap-align: start; }

/* ---------- Filters ---------- */

.vhf-filters {
  margin: clamp(1.8rem, 4vw, 2.6rem) 0 1.4rem;
  display: grid; gap: 0.9rem;
}
.vhf-filters__row {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.vhf-filter {
  min-height: 38px;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--vhf-edge);
  background: rgba(255, 255, 255, 0.035);
  color: var(--vhf-dim);
  font-size: 0.8rem; font-weight: 500;
  cursor: pointer;
  transition: color 0.16s, border-color 0.16s, background 0.16s;
}
.vhf-filter:hover { color: #fff; border-color: var(--vhf-edge-hi); }
.vhf-filter.is-active {
  color: #12181f; background: var(--vhf-amber); border-color: var(--vhf-amber);
  font-weight: 600;
}

/* The visitor's own shelf. Brass rather than amber, so it reads as theirs
   rather than as another category the harbor invented. */
.vhf-filter--saved {
  display: inline-flex; align-items: center; gap: 0.45rem;
  border-color: rgba(184, 145, 47, 0.45);
  color: var(--vhf-brass-lt);
}
.vhf-filter--saved:hover { border-color: rgba(240, 215, 138, 0.75); color: #fff; }
.vhf-filter--saved.is-active {
  background: linear-gradient(180deg, var(--vhf-brass-lt), var(--vhf-brass));
  border-color: var(--vhf-brass-lt);
  color: #2a2008;
}
.vhf-filter__n {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 0.3rem;
  border-radius: 999px;
  background: rgba(184, 145, 47, 0.22);
  font-family: var(--vhf-mono); font-size: 0.62rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.vhf-filter--saved.is-active .vhf-filter__n { background: rgba(42, 32, 8, 0.22); }

.vhf-filters__tools { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.vhf-search {
  flex: 1 1 260px;
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0 0.9rem;
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid var(--vhf-edge);
  background: rgba(0, 0, 0, 0.3);
}
.vhf-search:focus-within { border-color: rgba(255, 178, 63, 0.55); }
.vhf-search svg { width: 16px; height: 16px; color: var(--vhf-faint); flex: 0 0 auto; }
.vhf-search input {
  flex: 1; min-width: 0;
  background: none; border: 0; outline: none;
  color: var(--vhf-text); font-size: 0.92rem; font-family: inherit;
}
.vhf-search input::placeholder { color: var(--vhf-faint); }

.vhf-sort select {
  min-height: 44px;
  padding: 0 2.2rem 0 0.9rem;
  border-radius: 10px;
  border: 1px solid var(--vhf-edge);
  background: rgba(0, 0, 0, 0.3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393a4b6' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.7rem center / 15px;
  color: var(--vhf-text); font-size: 0.9rem; font-family: inherit;
  appearance: none; cursor: pointer;
}
.vhf-sort select option { background: #131b27; color: var(--vhf-text); }

/* ---------- Cards ---------- */

/* Smaller than they were, and more of them across: the archive is a card
   catalogue, and a catalogue drawer is meant to be scanned rather than read. */
.vhf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(208px, 1fr));
  gap: clamp(0.6rem, 1.4vw, 0.9rem);
}
.vhf-grid__empty {
  grid-column: 1 / -1;
  margin: 0; padding: 3rem 1rem; text-align: center;
  color: var(--vhf-faint); font-size: 0.95rem; line-height: 1.6;
}

/* A record, not a blog post: fixed header rail, monospace identifiers, a
   physical bottom edge. */
.vhf-card {
  position: relative;
  display: flex; flex-direction: column; gap: 0.4rem;
  padding: 0.8rem 0.85rem 0.85rem;
  border-radius: 10px;
  background: linear-gradient(180deg, #16202c 0%, #101823 100%);
  border: 1px solid var(--vhf-edge);
  border-bottom: 3px solid rgba(255, 178, 63, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 14px 30px rgba(0, 0, 0, 0.35);
  transition: transform 0.18s var(--ease), border-color 0.18s, box-shadow 0.18s;
}
.vhf-card:hover {
  transform: translateY(-3px);
  border-bottom-color: var(--vhf-amber);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 22px 44px rgba(0, 0, 0, 0.5);
}
/* Notable recordings get the brass edge, so the rail reads as a shelf of
   plaques rather than more of the same. */
.vhf-card.is-featured {
  border-color: rgba(184, 145, 47, 0.38);
  border-bottom-color: var(--vhf-brass);
}
.vhf-card.is-featured:hover { border-bottom-color: var(--vhf-brass-lt); }
.vhf-card.is-saved { border-left: 1px solid rgba(240, 215, 138, 0.5); }

.vhf-card__head { display: flex; align-items: center; gap: 0.4rem; }
.vhf-card__rec {
  flex: 1; min-width: 0;
  font-family: var(--vhf-mono); font-size: 0.55rem; letter-spacing: 0.12em;
  color: var(--vhf-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vhf-card__star { color: var(--vhf-amber); font-size: 0.8rem; line-height: 1; }

/* Bookmark. Outline until saved, then solid brass — the same tell as a page
   corner turned down. */
.vhf-save {
  flex: 0 0 auto;
  width: 26px; height: 26px; margin: -0.3rem -0.3rem -0.3rem 0;
  display: grid; place-items: center;
  border: 0; border-radius: 8px;
  background: transparent;
  color: var(--vhf-faint);
  cursor: pointer;
  transition: color 0.16s, background 0.16s, transform 0.12s var(--ease);
}
.vhf-save svg { width: 13px; height: 13px; }
.vhf-save:hover { color: var(--vhf-brass-lt); background: rgba(255, 255, 255, 0.06); }
.vhf-save[aria-pressed="true"] { color: var(--vhf-brass-lt); }
.vhf-save[aria-pressed="true"] svg { fill: var(--vhf-brass); }
.vhf-save.is-just-saved { transform: scale(1.22); }

.vhf-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.22;
  color: #fff;
}

.vhf-card__meta {
  margin: 0;
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  font-family: var(--vhf-mono); font-size: 0.55rem; letter-spacing: 0.08em;
  color: var(--vhf-faint);
}
/* At this size the harbor is the same on every card and the clock is on the
   transcript anyway — the identifiers that differ are what stay. */
.vhf-card__meta > span:nth-child(2) { display: none; }
.vhf-card__meta > span + span::before { content: "• "; opacity: 0.5; }
.vhf-card__ch { color: var(--vhf-amber); }
.vhf-card__meta > .vhf-card__ch + span::before { content: "• "; }

.vhf-card__summary {
  margin: 0; font-size: 0.79rem; line-height: 1.5; color: var(--vhf-dim);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vhf-card__stats {
  margin: 0; margin-top: auto; padding-top: 0.15rem;
  display: flex; gap: 0.35rem; align-items: center;
  font-family: var(--vhf-mono); font-size: 0.56rem; letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.45);
}

.vhf-card__foot { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.2rem; }
/* The play key keeps its weight; the transcript link gives up its box so two
   controls still fit on one line in a card this narrow. */
.vhf-card__foot .vhf-btn { min-height: 32px; padding: 0.3rem 0.65rem; font-size: 0.72rem; }
.vhf-card__foot .vhf-btn svg { width: 12px; height: 12px; }
.vhf-card__foot .vhf-btn--ghost { border-color: transparent; padding-inline: 0.4rem; }
.vhf-card__foot .vhf-btn--ghost:hover { border-color: var(--vhf-edge-hi); }

.vhf-card__badge {
  position: absolute; top: -8px; right: 10px;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: #1d2836;
  border: 1px solid var(--vhf-edge);
  font-family: var(--vhf-mono); font-size: 0.5rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--vhf-dim);
  white-space: nowrap; max-width: calc(100% - 1.5rem);
  overflow: hidden; text-overflow: ellipsis;
}

/* The notable rail runs the same card without a summary, so it can be shorter
   still and let more of the shelf show at once. */
.vhf-card--compact { padding-bottom: 0.75rem; }
.vhf-card--compact .vhf-card__title { font-size: 0.95rem; }

/* ---------- Buttons ---------- */

.vhf-btn {
  min-height: 40px;
  padding: 0.5rem 0.95rem;
  border-radius: 9px;
  border: 1px solid rgba(255, 178, 63, 0.4);
  background: rgba(255, 178, 63, 0.12);
  color: var(--vhf-lcd-ink);
  font-size: 0.8rem; font-weight: 600; font-family: inherit;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  transition: background 0.16s, border-color 0.16s, color 0.16s, transform 0.08s;
}
.vhf-btn:hover { background: rgba(255, 178, 63, 0.22); border-color: rgba(255, 178, 63, 0.7); color: #fff; }
.vhf-btn:active { transform: translateY(1px); }
.vhf-btn svg { width: 14px; height: 14px; }
.vhf-btn--ghost {
  background: transparent; border-color: var(--vhf-edge); color: var(--vhf-dim);
}
.vhf-btn--ghost:hover { background: rgba(255,255,255,0.06); border-color: var(--vhf-edge-hi); color: #fff; }
.vhf-btn--wide { min-width: 240px; min-height: 48px; }
.vhf-btn--sm { min-height: 34px; padding: 0.35rem 0.7rem; font-size: 0.75rem; }
.vhf-btn--sm svg { width: 13px; height: 13px; }
.vhf-btn[aria-pressed="true"] {
  border-color: rgba(240, 215, 138, 0.7);
  background: rgba(184, 145, 47, 0.2);
  color: var(--vhf-brass-lt);
}
.vhf-btn[aria-pressed="true"] svg { fill: var(--vhf-brass); }

.vhf-more { margin-top: clamp(1.6rem, 3vw, 2.4rem); text-align: center; }
.vhf-more__count {
  margin: 0.8rem 0 0;
  font-family: var(--vhf-mono); font-size: 0.62rem; letter-spacing: 0.18em;
  color: var(--vhf-faint); text-transform: uppercase;
}

/* ==========================================================================
   5. ARCHIVE PLAYER — the black-box replay screen
   ========================================================================== */

.vhf-player {
  position: fixed; inset: 0; z-index: 1200;
  display: grid; place-items: center;
  padding: clamp(0.5rem, 3vw, 2rem);
}
.vhf-player[hidden] { display: none; }

.vhf-player__scrim {
  position: absolute; inset: 0;
  background: rgba(3, 6, 10, 0.86);
  backdrop-filter: blur(6px);
  animation: vhf-fade 0.25s ease both;
}
@keyframes vhf-fade { from { opacity: 0; } to { opacity: 1; } }

.vhf-player__panel {
  position: relative;
  width: min(100%, 62rem);
  max-height: min(92vh, 56rem);
  overflow-y: auto;
  border-radius: 18px;
  padding: clamp(1.3rem, 3.5vw, 2.4rem);
  background: linear-gradient(180deg, #131c27 0%, #0b1119 100%);
  border: 1px solid var(--vhf-edge-hi);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.7);
  color: var(--vhf-text);
  animation: vhf-rise 0.3s var(--ease) both;
  scrollbar-width: thin;
}
@keyframes vhf-rise { from { opacity: 0; transform: translateY(22px) scale(0.985); } to { opacity: 1; transform: none; } }

.vhf-player__x {
  position: absolute; top: 0.9rem; right: 0.9rem; z-index: 2;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--vhf-edge);
  background: rgba(0, 0, 0, 0.4);
  color: var(--vhf-dim); cursor: pointer;
  transition: color 0.16s, border-color 0.16s;
}
.vhf-player__x:hover { color: #fff; border-color: var(--vhf-edge-hi); }
.vhf-player__x svg { width: 17px; height: 17px; }

.vhf-player__kicker {
  margin: 0 0 0.5rem;
  font-family: var(--vhf-mono); font-size: 0.6rem; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--vhf-amber);
}
.vhf-player__head h2 {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.3rem);
  line-height: 1.12; color: #fff;
  padding-right: 2.5rem;
}
.vhf-player__meta {
  margin: 0 0 0.9rem;
  font-family: var(--vhf-mono); font-size: 0.66rem; letter-spacing: 0.14em;
  color: var(--vhf-dim);
}
.vhf-player__summary {
  margin: 0;
  padding-left: 0.9rem;
  border-left: 2px solid rgba(255, 178, 63, 0.5);
  font-size: 0.95rem; line-height: 1.6; color: var(--vhf-dim);
  max-width: 62ch;
}

/* Deck */
.vhf-player__deck {
  margin: clamp(1.2rem, 3vw, 1.8rem) 0;
  padding: clamp(0.9rem, 2vw, 1.2rem);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--vhf-edge);
}

.vhf-wave {
  display: block; width: 100%; height: clamp(56px, 12vw, 84px);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
}

.vhf-transport {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  margin-top: 0.9rem;
}
.vhf-tbtn {
  width: 42px; height: 42px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--vhf-edge);
  background: rgba(255, 255, 255, 0.05);
  color: var(--vhf-dim); cursor: pointer;
  transition: color 0.16s, border-color 0.16s, background 0.16s, transform 0.08s;
}
.vhf-tbtn:hover { color: #fff; border-color: var(--vhf-edge-hi); background: rgba(255,255,255,0.1); }
.vhf-tbtn:active { transform: scale(0.94); }
.vhf-tbtn svg { width: 18px; height: 18px; }
.vhf-tbtn--main {
  width: 54px; height: 54px;
  background: linear-gradient(180deg, #ffc766, var(--vhf-amber));
  border-color: rgba(255, 178, 63, 0.7);
  color: #14181e;
}
.vhf-tbtn--main:hover { background: linear-gradient(180deg, #ffd68d, #ffbb55); color: #14181e; }
.vhf-tbtn--main svg { width: 22px; height: 22px; }

.vhf-scrub {
  flex: 1 1 220px;
  display: flex; align-items: center; gap: 0.6rem;
  min-width: 0;
}
.vhf-scrub input[type="range"] { flex: 1; min-width: 0; }
.vhf-scrub__t {
  font-family: var(--vhf-mono); font-size: 0.68rem;
  color: var(--vhf-dim); font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

.vhf-pvol { display: flex; align-items: center; gap: 0.45rem; flex: 0 0 auto; }
.vhf-pvol svg { width: 17px; height: 17px; color: var(--vhf-faint); }
.vhf-pvol input[type="range"] { width: 78px; }

/* Speed sits in the transport rather than behind a menu — one key, cycling. */
.vhf-tbtn--speed {
  width: auto; min-width: 46px; height: 42px;
  border-radius: 21px;
  font-family: var(--vhf-mono); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.vhf-tbtn--speed.is-altered { color: var(--vhf-lcd-ink); border-color: rgba(255, 178, 63, 0.55); }

/* Walk the queue you opened the recording from. */
.vhf-deckbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem; flex-wrap: wrap;
  margin-top: 0.9rem; padding-top: 0.85rem;
  border-top: 1px solid var(--vhf-edge);
}
.vhf-deckbar .vhf-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.vhf-deckbar .vhf-btn:disabled:hover { background: transparent; border-color: var(--vhf-edge); color: var(--vhf-dim); }

.vhf-auto {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--vhf-mono); font-size: 0.6rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--vhf-faint);
  cursor: pointer;
}
.vhf-auto input {
  appearance: none; -webkit-appearance: none;
  width: 32px; height: 18px; margin: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.5);
  position: relative; cursor: pointer;
  transition: background 0.18s var(--ease);
}
.vhf-auto input::after {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #9fb0c2;
  transition: transform 0.18s var(--ease), background 0.18s var(--ease);
}
.vhf-auto input:checked { background: rgba(184, 145, 47, 0.45); }
.vhf-auto input:checked::after { transform: translateX(14px); background: var(--vhf-brass-lt); }
.vhf-auto input:checked + span { color: var(--vhf-brass-lt); }

/* Transcript */
.vhf-player__subhead {
  margin: 0 0 0.8rem;
  font-family: var(--vhf-mono); font-size: 0.64rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--vhf-amber);
}
.vhf-transcript { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.vhf-tx {
  display: grid; gap: 0.25rem;
  padding: 0.8rem 0.95rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.028);
  border-left: 2px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s;
}
.vhf-tx:hover { background: rgba(255, 255, 255, 0.06); }
.vhf-tx.is-current {
  background: rgba(255, 178, 63, 0.12);
  border-left-color: var(--vhf-amber);
}
.vhf-tx.is-awooga { border-left-color: var(--vhf-green); }
.vhf-tx.is-awooga.is-current { border-left-color: var(--vhf-amber); }
.vhf-tx__head {
  display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
  font-family: var(--vhf-mono); font-size: 0.62rem; letter-spacing: 0.14em;
  color: var(--vhf-faint);
}
.vhf-tx__speaker { color: var(--vhf-amber); font-weight: 700; }
.vhf-tx.is-awooga .vhf-tx__speaker { color: var(--vhf-green); }
.vhf-tx__text { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--vhf-text); }

.vhf-player__foot {
  margin-top: clamp(1.2rem, 3vw, 1.8rem);
  padding-top: 1rem;
  border-top: 1px solid var(--vhf-edge);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.vhf-player__rec {
  font-family: var(--vhf-mono); font-size: 0.62rem; letter-spacing: 0.2em;
  color: var(--vhf-faint);
}
.vhf-player__actions { display: flex; gap: 0.45rem; flex-wrap: wrap; }

/* ==========================================================================
   5.5 THE DOCK — the set is still on, you have simply walked away from it
   ========================================================================== */

/* Slides up once the radio is running and the set has scrolled out of view.
   It carries only what matters from that distance: who is talking, and how to
   make them stop. */
.vhf-dock {
  position: fixed; z-index: 1100;
  left: 50%; bottom: 1rem;
  transform: translate(-50%, 140%);
  width: min(94vw, 44rem);
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0.7rem 0.6rem 1rem;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(20, 29, 41, 0.97), rgba(10, 16, 24, 0.97));
  border: 1px solid rgba(184, 145, 47, 0.32);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(8px);
  transition: transform 0.42s var(--ease), opacity 0.32s var(--ease);
  opacity: 0;
}
.vhf-dock[hidden] { display: none; }
.vhf-dock.is-shown { transform: translate(-50%, 0); opacity: 1; }

.vhf-dock__lamp {
  flex: 0 0 auto;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--vhf-green);
  box-shadow: 0 0 10px rgba(79, 224, 139, 0.8);
}
.vhf-dock.is-rx .vhf-dock__lamp {
  background: var(--vhf-red);
  box-shadow: 0 0 12px rgba(239, 77, 67, 0.9);
  animation: vhf-blink 1.5s steps(1) infinite;
}

.vhf-dock__ch {
  flex: 0 0 auto;
  font-family: var(--vhf-mono); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.16em; color: var(--vhf-lcd-ink);
}
.vhf-dock__line {
  flex: 1; min-width: 0; margin: 0;
  font-size: 0.86rem; color: var(--vhf-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.vhf-dock__btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 36px; padding: 0 0.75rem;
  border-radius: 9px;
  border: 1px solid rgba(184, 145, 47, 0.4);
  background: rgba(184, 145, 47, 0.14);
  color: var(--vhf-brass-lt);
  font-size: 0.78rem; font-weight: 600; font-family: inherit;
  cursor: pointer; white-space: nowrap;
  transition: background 0.16s, border-color 0.16s, color 0.16s;
}
.vhf-dock__btn:hover { background: rgba(184, 145, 47, 0.26); color: #fff; }
.vhf-dock__btn svg { width: 14px; height: 14px; }
.vhf-dock__btn--ghost {
  background: transparent; border-color: var(--vhf-edge); color: var(--vhf-dim);
}
.vhf-dock__btn--ghost:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.vhf-dock__btn[aria-pressed="true"] { color: var(--vhf-red); border-color: rgba(239, 77, 67, 0.5); }

/* ==========================================================================
   6. TOAST — distress notice, copy confirmation, errors
   ========================================================================== */

.vhf-toast {
  position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
  z-index: 1400;
  max-width: min(94vw, 30rem);
  padding: 0.95rem 1.2rem;
  border-radius: 12px;
  background: rgba(14, 20, 28, 0.97);
  border: 1px solid var(--vhf-edge-hi);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  color: var(--vhf-text);
  animation: vhf-toastin 0.28s var(--ease) both;
}
@keyframes vhf-toastin { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translateX(-50%); } }
.vhf-toast.is-out { animation: vhf-toastout 0.3s var(--ease) both; }
@keyframes vhf-toastout { to { opacity: 0; transform: translate(-50%, 14px); } }

.vhf-toast__title {
  margin: 0 0 0.3rem;
  font-family: var(--vhf-mono); font-size: 0.66rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--vhf-red);
}
.vhf-toast--info .vhf-toast__title { color: var(--vhf-amber); }
.vhf-toast__body { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--vhf-dim); }
.vhf-toast__body b { color: var(--vhf-text); font-weight: 600; }

/* ==========================================================================
   6.5 DISTRESS DRILL — the modal the red key actually opens
   --------------------------------------------------------------------------
   Everywhere else the page plays the joke straight. Here it stops: the drill
   is the real MAYDAY procedure, so it is styled to look like a placard bolted
   inside a locker rather than more of the radio bit. The scene animates one
   step at a time, driven entirely by [data-step] on the dialog root — the
   script sets a number, the CSS does the rest.
   ========================================================================== */

.vhf-emg {
  position: fixed; inset: 0; z-index: 1300;
  display: grid; place-items: center;
  padding: clamp(0.5rem, 3vw, 2rem);
}
.vhf-emg[hidden] { display: none; }

.vhf-emg__scrim {
  position: absolute; inset: 0;
  background: rgba(20, 4, 3, 0.88);
  backdrop-filter: blur(6px);
  animation: vhf-fade 0.25s ease both;
}

.vhf-emg__panel {
  position: relative;
  width: min(100%, 64rem);
  max-height: min(92vh, 54rem);
  overflow-y: auto;
  border-radius: 18px;
  padding: clamp(1.2rem, 3vw, 2.1rem);
  background: linear-gradient(180deg, #1a1113 0%, #0c0d13 55%, #0b1119 100%);
  border: 1px solid rgba(239, 77, 67, 0.34);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.75);
  color: var(--vhf-text);
  animation: vhf-rise 0.3s var(--ease) both;
  scrollbar-width: thin;
}

.vhf-emg__x {
  position: absolute; top: 0.9rem; right: 0.9rem; z-index: 2;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--vhf-edge);
  background: rgba(0, 0, 0, 0.45);
  color: var(--vhf-dim); cursor: pointer;
  transition: color 0.16s, border-color 0.16s;
}
.vhf-emg__x:hover { color: #fff; border-color: var(--vhf-edge-hi); }
.vhf-emg__x svg { width: 17px; height: 17px; }

.vhf-emg__head { max-width: 54rem; padding-right: 2.5rem; }
.vhf-emg__kicker {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin: 0 0 0.6rem;
  font-family: var(--vhf-mono); font-size: 0.6rem; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--vhf-red);
}
.vhf-emg__pip {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--vhf-red);
  box-shadow: 0 0 10px rgba(239, 77, 67, 0.9);
  animation: vhf-blink 1.5s steps(1) infinite;
}
.vhf-emg__head h2 {
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  line-height: 1.12; color: #fff;
}
.vhf-emg__lead {
  margin: 0;
  font-size: 0.94rem; line-height: 1.6; color: var(--vhf-dim);
  max-width: 62ch;
}

.vhf-emg__body {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(1rem, 2.5vw, 1.8rem);
  margin: clamp(1.2rem, 3vw, 1.8rem) 0 0;
}

/* ---------- The animated set ---------- */

.vhf-emg__stage { align-self: start; position: sticky; top: 0; }

.vhf-emg__scene {
  margin: 0;
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--vhf-edge);
  background: #0d1621;
}
.vhf-emg__scene svg { display: block; width: 100%; height: auto; }

/* Water, and a boat sitting in it. Always moving, gently, whatever the step. */
.vhf-emg__swell { animation: vhf-emg-swell 5.5s ease-in-out infinite; }
@keyframes vhf-emg-swell {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-14px); }
}
.vhf-emg__boat {
  transform-box: view-box; transform-origin: 96px 110px;
  animation: vhf-emg-bob 4.2s ease-in-out infinite;
}
@keyframes vhf-emg-bob {
  0%, 100% { transform: translateY(0) rotate(-0.7deg); }
  50%      { transform: translateY(-3px) rotate(0.9deg); }
}

/* The set's own display: dark until step one puts the radio on sixteen. */
.vhf-emg__lcd { opacity: 0.32; transition: opacity 0.4s var(--ease); }
.vhf-emg[data-step="1"] .vhf-emg__lcd { opacity: 1; }
.vhf-emg[data-step="1"] .vhf-emg__lcd rect { stroke: rgba(255, 199, 102, 0.85); }
.vhf-emg__lcdch {
  font-family: var(--vhf-mono); font-size: 26px; font-weight: 700;
  fill: var(--vhf-lcd-ink);
}
.vhf-emg__lcdlabel, .vhf-emg__lcdwatt {
  font-family: var(--vhf-mono); font-size: 11px; letter-spacing: 0.14em;
  fill: var(--vhf-lcd-ink); opacity: 0.8;
}
.vhf-emg[data-step="1"] .vhf-emg__lcdwatt { animation: vhf-emg-flash 0.9s steps(1) infinite; }
@keyframes vhf-emg-flash { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0.15; } }

/* The red DSC key under its flap: the flap lifts on step two. */
.vhf-emg__dsc { opacity: 0.34; transition: opacity 0.4s var(--ease); }
.vhf-emg[data-step="2"] .vhf-emg__dsc { opacity: 1; }
.vhf-emg__flap {
  transform-box: view-box; transform-origin: 136px 170px;
  transition: transform 0.5s var(--ease);
}
.vhf-emg[data-step="2"] .vhf-emg__flap { transform: rotate(-58deg); }
.vhf-emg[data-step="2"] .vhf-emg__dsckey { animation: vhf-emg-press 1.1s ease-in-out infinite; }
@keyframes vhf-emg-press {
  0%, 100% { fill: #c0392b; }
  50%      { fill: #ff6a58; }
}

/* The transmit key: held down from step three, released on six. */
.vhf-emg__ptt { transition: transform 0.2s var(--ease), fill 0.2s linear; }
.vhf-emg[data-step="3"] .vhf-emg__ptt,
.vhf-emg[data-step="4"] .vhf-emg__ptt,
.vhf-emg[data-step="5"] .vhf-emg__ptt {
  transform: translateX(5px);
  fill: var(--vhf-red);
}
.vhf-emg__mic { opacity: 0.55; transition: opacity 0.4s var(--ease); }
.vhf-emg[data-step="3"] .vhf-emg__mic,
.vhf-emg[data-step="4"] .vhf-emg__mic,
.vhf-emg[data-step="5"] .vhf-emg__mic,
.vhf-emg[data-step="6"] .vhf-emg__mic { opacity: 1; }

/* What leaves the antenna while the key is down. */
.vhf-emg__arc { opacity: 0; }
.vhf-emg__arcs .vhf-emg__arc {
  transform-box: view-box; transform-origin: 95px 52px;
}
.vhf-emg[data-step="3"] .vhf-emg__arcs .vhf-emg__arc,
.vhf-emg[data-step="4"] .vhf-emg__arcs .vhf-emg__arc,
.vhf-emg[data-step="5"] .vhf-emg__arcs .vhf-emg__arc {
  animation: vhf-emg-radiate 1.9s ease-out infinite;
  animation-delay: calc(var(--i) * 0.26s);
}
@keyframes vhf-emg-radiate {
  0%   { opacity: 0;    transform: scale(0.55); }
  25%  { opacity: 0.95; }
  100% { opacity: 0;    transform: scale(1.18); }
}
.vhf-emg[data-step="3"] .vhf-emg__tip,
.vhf-emg[data-step="4"] .vhf-emg__tip,
.vhf-emg[data-step="5"] .vhf-emg__tip { animation: vhf-emg-tip 1.1s ease-in-out infinite; }
@keyframes vhf-emg-tip {
  0%, 100% { r: 3.5; opacity: 1; }
  50%      { r: 5.5; opacity: 0.65; }
}

/* And what comes back, once you have let go of the key. */
.vhf-emg__reply .vhf-emg__arc {
  transform-box: view-box; transform-origin: 352px 70px;
}
.vhf-emg[data-step="6"] .vhf-emg__reply .vhf-emg__arc {
  animation: vhf-emg-radiate 2.1s ease-out infinite;
  animation-delay: calc(var(--i) * 0.3s);
}

/* The line you would be saying, when there is one. */
.vhf-emg__say {
  margin: 0.75rem 0 0;
  min-height: 2.6rem;
  padding: 0.65rem 0.8rem;
  border-radius: 10px;
  border: 1px dashed rgba(239, 77, 67, 0.35);
  background: rgba(239, 77, 67, 0.07);
  font-family: var(--vhf-mono);
  font-size: 0.72rem; line-height: 1.55; letter-spacing: 0.08em;
  color: #ffd2cc;
}
.vhf-emg__say:empty { visibility: hidden; }

.vhf-emg__transport {
  display: flex; align-items: center; gap: 0.5rem;
  margin-top: 0.8rem;
}
.vhf-emg__tbtn {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--vhf-edge);
  background: rgba(255, 255, 255, 0.05);
  color: var(--vhf-dim); cursor: pointer;
  font-family: inherit;
  transition: color 0.16s, border-color 0.16s, background 0.16s;
}
.vhf-emg__tbtn:hover { color: #fff; border-color: var(--vhf-edge-hi); background: rgba(255,255,255,0.1); }
.vhf-emg__tbtn svg { width: 16px; height: 16px; }
.vhf-emg__tbtn--wide {
  width: auto; height: 36px; border-radius: 18px;
  padding: 0 0.8rem; gap: 0.4rem;
  grid-auto-flow: column;
  font-size: 0.72rem; letter-spacing: 0.06em;
}

/* Step progress, doubling as the auto-advance countdown. */
.vhf-emg__bar {
  flex: 1; min-width: 0; height: 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.vhf-emg__bar i {
  display: block; height: 100%; width: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--vhf-red), var(--vhf-amber));
  transition: width 0.25s linear;
}

/* ---------- The procedure ---------- */

.vhf-emg__steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0.35rem;
  counter-reset: none;
}
.vhf-emg__stepbtn {
  width: 100%; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.7rem;
  padding: 0.65rem 0.8rem;
  border-radius: 10px;
  border: 1px solid transparent;
  border-left: 2px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.028);
  color: inherit; font-family: inherit;
  transition: background 0.18s, border-color 0.18s, opacity 0.18s;
  opacity: 0.62;
}
.vhf-emg__stepbtn:hover { opacity: 1; background: rgba(255, 255, 255, 0.06); }
.vhf-emg__step.is-current .vhf-emg__stepbtn {
  opacity: 1;
  background: rgba(239, 77, 67, 0.1);
  border-left-color: var(--vhf-red);
}
.vhf-emg__step.is-done .vhf-emg__stepbtn { opacity: 0.85; border-left-color: rgba(239, 77, 67, 0.4); }

.vhf-emg__n {
  width: 24px; height: 24px;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-family: var(--vhf-mono); font-size: 0.68rem; font-weight: 700;
  color: var(--vhf-dim);
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.vhf-emg__step.is-current .vhf-emg__n {
  background: var(--vhf-red); border-color: var(--vhf-red); color: #fff;
}
.vhf-emg__step.is-done .vhf-emg__n { border-color: rgba(239, 77, 67, 0.55); color: #ffb3ac; }

.vhf-emg__stepbody { display: grid; gap: 0.2rem; min-width: 0; }
.vhf-emg__stephead {
  font-weight: 600; font-size: 0.94rem; line-height: 1.3; color: #fff;
}
.vhf-emg__stepnote { font-size: 0.83rem; line-height: 1.55; color: var(--vhf-dim); }

.vhf-emg__foot {
  margin-top: clamp(1.1rem, 3vw, 1.6rem);
  padding-top: 1rem;
  border-top: 1px dashed rgba(255, 178, 63, 0.3);
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.vhf-emg__note {
  margin: 0; flex: 1 1 30ch;
  font-size: 0.83rem; line-height: 1.6; color: var(--vhf-dim);
}
.vhf-emg__note b { color: var(--vhf-text); font-weight: 600; }

@media (max-width: 820px) {
  .vhf-emg__body { grid-template-columns: 1fr; }
  .vhf-emg__stage { position: static; }
}

@media (max-width: 560px) {
  .vhf-emg { padding: 0; }
  .vhf-emg__panel { max-height: 100vh; height: 100%; border-radius: 0; border: 0; }
}

/* ==========================================================================
   7. RESPONSIVE
   ========================================================================== */

/* ---------- One screenful ----------
   On a desktop the set, its log and the shortcut card are sized to land inside
   a single viewport, so the radio can be operated without scrolling to find
   its own keys. Everything that would otherwise push it past the fold is tied
   to viewport HEIGHT rather than width — a short laptop screen shrinks the
   hardware instead of overflowing it. */
@media (min-width: 961px) {
  /* The site header is sticky and 4rem tall, so a full 100svh here would push
     the set past the fold by exactly the height of the nav. */
  .vhf-stage {
    display: flex; flex-direction: column; justify-content: center;
    min-height: calc(100svh - 4rem);
    padding-block: clamp(1rem, 3vh, 2.6rem);
  }
  .vhf-stage > .container {
    display: flex; flex-direction: column;
    flex: 1 1 auto; min-height: 0;
  }

  /* Title and standfirst share one line instead of stacking into the set. */
  .vhf-stage__intro {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    align-items: end;
    column-gap: clamp(1.5rem, 4vw, 3rem);
    margin-bottom: clamp(0.8rem, 2.2vh, 1.7rem);
  }
  .vhf-stage__intro .eyebrow { grid-column: 1 / -1; margin-bottom: 0.15rem; }
  .vhf-stage__intro h1 {
    margin: 0;
    font-size: clamp(1.8rem, 4.2vh, 3rem);
  }
  .vhf-stage__intro .lead {
    margin: 0 0 0.25rem;
    max-width: none;
    font-size: clamp(0.8rem, 1.55vh, 0.94rem);
  }

  .vhf-stage__grid { flex: 1 1 auto; min-height: 0; align-items: stretch; }

  /* The set fills its column exactly: the faceplate distributes whatever
     height is going between its own rows, so a tall screen gets a roomier
     radio rather than a gap underneath one. */
  .vhf-deck { min-height: 0; align-content: stretch; }
  .vhf-radio { height: 100%; }
  .vhf-radio__face { height: 100%; align-content: space-between; }

  /* The log takes whatever height the set leaves it; the shortcut card sits
     under it on the bottom rail rather than floating in the gap. */
  .vhf-side {
    min-height: 0;
    align-content: stretch;
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .vhf-panel--live {
    display: flex; flex-direction: column;
    min-height: 0; height: 100%;
  }
  .vhf-live { flex: 1 1 auto; min-height: 6rem; max-height: none; }

  /* The hardware, scaled to the screen it is sitting on. Every one of these is
     tied to viewport HEIGHT: a short laptop screen shrinks the set instead of
     pushing its keys off the bottom of the page. */
  .vhf-radio__face {
    --vhf-face-inset: clamp(0.7rem, 1.3vh, 1.6rem);
    --vhf-face-gap: clamp(0.35rem, 0.85vh, 1.1rem);
  }
  .vhf-lcd__glass   { padding-block: clamp(0.4rem, 0.9vh, 1rem); }
  .vhf-lcd__ch      { font-size: clamp(2rem, 5.6vh, 4.6rem); }
  .vhf-lcd__station { margin-top: 0.35rem; padding-top: 0.3rem; }
  .vhf-grille       { height: clamp(40px, 6.6vh, 84px); }
  .vhf-knob         { width: clamp(50px, 8vh, 88px); height: clamp(50px, 8vh, 88px); }
  .vhf-ptt          { min-height: clamp(44px, 6.2vh, 60px); }
  .vhf-key,
  .vhf-slider       { min-height: clamp(34px, 4.4vh, 44px); }
  .vhf-chip         { min-height: clamp(30px, 3.8vh, 40px); }

  /* Under about 900px of viewport the equipment plate and the mug ring are the
     first things a real wheelhouse would lose. They are decoration; the keys
     are not, so the keys are what stays. */
  @media (max-height: 900px) {
    .vhf-spec, .vhf-mugring { display: none; }
  }
  @media (max-height: 720px) {
    .vhf-radio__model { display: none; }
  }
}

@media (max-width: 960px) {
  .vhf-stage__grid { grid-template-columns: 1fr; }
  .vhf-side { order: 2; }
  .vhf-live { max-height: 22rem; }
}

@media (max-width: 640px) {
  :root { --vhf-face-inset: 0.85rem; }

  .vhf-radio__face { border-radius: 16px; }
  .vhf-curtain { border-radius: 16px; }

  .vhf-radio__body { grid-template-columns: 1fr; }
  .vhf-knob-well { display: none; } /* the chips are the touch control */

  .vhf-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vhf-slider { grid-column: span 2; }

  .vhf-chip { flex: 1 1 calc(33.333% - 0.4rem); }

  .vhf-mic__cord { display: none; }
  .vhf-ptt { min-height: 68px; }

  .vhf-mugring { display: none; }        /* no spare surface to stain */
  .vhf-spec__list { gap: 0.25rem 1rem; }
  .vhf-radio__brandbar { padding-right: 1.1rem; }

  /* Two rows on a phone: the status line gets its own, so the buttons stay
     tappable instead of squeezing the speaker's name to nothing. */
  .vhf-dock {
    left: 0.5rem; right: 0.5rem; bottom: 0.5rem;
    width: auto; transform: translateY(140%);
    flex-wrap: wrap; padding: 0.6rem 0.7rem;
  }
  .vhf-dock.is-shown { transform: translateY(0); }
  .vhf-dock__line { flex-basis: 100%; order: 4; margin-top: 0.1rem; }
  .vhf-dock__btn { flex: 1 1 auto; justify-content: center; }

  .vhf-arch__stats { gap: 1.1rem 1.6rem; }
  .vhf-notable__rail { grid-auto-columns: minmax(200px, 78%); }
  .vhf-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  /* Two cards to a phone screen leaves no room for the clock as well as the
     date, and the clock is the one nobody scans by. */
  .vhf-card__meta > span:nth-child(4) { display: none; }

  .vhf-player { padding: 0; }
  .vhf-player__panel {
    max-height: 100vh; height: 100%;
    border-radius: 0; border: 0;
  }
  .vhf-transport { gap: 0.4rem; }
  .vhf-scrub { order: 3; flex-basis: 100%; }
  .vhf-pvol { display: none; } /* device volume rules on a phone */
}

/* ==========================================================================
   7.5 FICTION NOTICES
   --------------------------------------------------------------------------
   The page is a joke played very straight, so the "none of this is real" copy
   has to read as part of the instrument rather than a legal bolt-on: amber
   stencil lettering, dashed edges, the tone of a label riveted to the case.
   ========================================================================== */

/* Small stencilled note inside a side panel. */
.vhf-panel__note {
  margin: -0.4rem 0 0.85rem;
  font-family: var(--vhf-mono);
  font-size: 0.62rem; letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--vhf-faint);
}

/* The one genuinely serious block, at the foot of the archive. */
.vhf-fineprint {
  margin: clamp(2.2rem, 5vw, 3.4rem) auto 0;
  max-width: 62ch;
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  border: 1px dashed rgba(255, 178, 63, 0.34);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.022);
}
.vhf-fineprint__head {
  margin: 0 0 0.7rem;
  font-family: var(--vhf-mono); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--vhf-amber);
}
.vhf-fineprint p {
  margin: 0 0 0.7rem;
  font-size: 0.86rem; line-height: 1.65; color: var(--vhf-dim);
}
.vhf-fineprint p:last-child { margin-bottom: 0; }
.vhf-fineprint b { color: var(--vhf-text); }

/* Footer of the replay transcript. */
.vhf-player__note {
  margin: 1rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px dashed rgba(255, 178, 63, 0.28);
  font-size: 0.78rem; line-height: 1.55; color: var(--vhf-faint);
}

/* ==========================================================================
   8. ACCESSIBILITY
   ========================================================================== */

.vhf-stage :focus-visible,
.vhf-arch :focus-visible,
.vhf-player :focus-visible {
  outline: 2px solid var(--vhf-amber);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .vhf-radio.is-rx .vhf-grille,
  .vhf-curtain__btn,
  .vhf-dock.is-rx .vhf-dock__lamp,
  .vhf-key--distress.is-refused,
  .vhf-rec.is-live i { animation: none; }

  .vhf-line,
  .vhf-archived,
  .vhf-live__jump,
  .vhf-player__panel,
  .vhf-player__scrim,
  .vhf-emg__panel,
  .vhf-emg__scrim,
  .vhf-toast { animation-duration: 0.01ms; animation-iteration-count: 1; }

  /* The drill still steps through — that is the content, not decoration. What
     stops is everything that loops: the swell, the bob, the radiating arcs.
     The arcs have to stay VISIBLE rather than vanish, so they are pinned open
     instead of animated. */
  .vhf-emg__swell,
  .vhf-emg__boat,
  .vhf-emg__pip,
  .vhf-emg__dsckey,
  .vhf-emg__tip,
  .vhf-emg__lcdwatt { animation: none; }

  .vhf-emg[data-step="3"] .vhf-emg__arcs .vhf-emg__arc,
  .vhf-emg[data-step="4"] .vhf-emg__arcs .vhf-emg__arc,
  .vhf-emg[data-step="5"] .vhf-emg__arcs .vhf-emg__arc,
  .vhf-emg[data-step="6"] .vhf-emg__reply .vhf-emg__arc {
    animation: none; opacity: 0.9;
  }
  .vhf-emg__flap { transition-duration: 0.01ms; }

  .vhf-card:hover,
  .vhf-random:hover,
  .vhf-save.is-just-saved { transform: none; }

  .vhf-knob__dial { transition: none; }

  /* The dock still arrives and leaves; it just stops sliding to do it. The
     transform itself is left alone — it also does the centring. */
  .vhf-dock { transition-duration: 0.01ms; }
}

/* Windows high-contrast: the drawn metal disappears, so restore real edges. */
@media (forced-colors: active) {
  .vhf-radio__face,
  .vhf-panel,
  .vhf-card,
  .vhf-keys,
  .vhf-spec,
  .vhf-dock,
  .vhf-player__panel,
  .vhf-emg__panel { border: 1px solid CanvasText; }
  .vhf-lcd__glass { filter: none; }

  /* Drawn hardware has no edges left in this mode — hide it rather than leave
     smears of Canvas where the brass was. */
  .vhf-radio__face::before,
  .vhf-screws,
  .vhf-mugring,
  .vhf-knob__ticks { display: none; }
}