/* Spectra: the sound toggle. Minimal, no pills — a thin animated wave glyph + a label,
   in the same mono (Archivo) used by the fall's other small labels. Reads var(--fog) on
   the dark fall, flips to var(--ink) on Vortex and the paper visit section, exactly like
   the header logo does (see .bright-room/.on-paper in css/site.css). */

.snd{
  display:inline-flex; align-items:center; gap:10px;
  min-width:44px; min-height:44px; padding:0 10px;
  background:none; border:0; margin:0; cursor:pointer;
  color:var(--fog); opacity:.82;
  font-family:inherit; -webkit-tap-highlight-color:transparent;
  transition:opacity .3s ease, color .6s ease;
}
@media (hover:hover){.snd:hover{ opacity:1 }}
.snd:focus{ outline:none }
.snd:focus-visible{ outline:2px solid currentColor; outline-offset:3px }

/* bright rooms (Vortex) take the header's dark ink, like the logo and the page link; the arrival is dark again */
.bright-room:not(.arrived) .snd{ color:#0c0c0e }

/* a thin 4-bar soundwave; static and low when off, a gentle idle bounce when on */
.snd-glyph{
  display:flex; align-items:center; justify-content:center; gap:3px;
  width:18px; height:16px; flex:none;
}
.snd-glyph i{
  display:block; width:2px; border-radius:1px; background:currentColor;
  height:5px; opacity:.55;
  transform:scaleY(1); transform-origin:center;
  transition:opacity .3s ease;
}
.snd.is-on .snd-glyph i{ opacity:.95; animation:snd-wave 1.15s ease-in-out infinite }
.snd-glyph i:nth-child(1){ animation-delay:0s }
.snd-glyph i:nth-child(2){ animation-delay:.12s }
.snd-glyph i:nth-child(3){ animation-delay:.24s }
.snd-glyph i:nth-child(4){ animation-delay:.08s }
@keyframes snd-wave{
  0%, 100% { height:5px }
  50% { height:15px }
}
@media (prefers-reduced-motion:reduce){
  .snd.is-on .snd-glyph i{ animation:none; height:11px; opacity:.9 }
}

.snd-lbl{ font-size:11px; letter-spacing:.08em; white-space:nowrap }

/* optional docking wrapper: give a container this class to pin the toggle bottom-left,
   independent of wherever mountToggle(el) is called (see js/SOUND.md). */
.snd-dock{
  position:fixed; left:var(--gut); bottom:var(--gut); z-index:21;
  pointer-events:none;
}
.snd-dock .snd{ pointer-events:auto }
.stack .snd-dock{ display:none } /* the stacked/reduced-motion page has no fall to score */

/* integrated (2026-09-26): the toggle lives in the fixed header, between the brand and Book, so it can never
   collide with the metro (right edge, centred), the title card (centred), the hint/hero (bottom) or the arrival
   (the header already sits above it with its own backing). Phones keep only the glyph (the button still carries
   aria-label + aria-pressed). */
.snd-slot{ order:2; display:flex; align-items:center; min-height:44px }
.top .snd{ padding:0 8px; min-width:44px }
.stack .snd-slot{ display:none }
@media (max-width:720px){
  .top .snd-lbl{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap }
  .top .snd{ padding:0; justify-content:center }
}