/* ============================================================
   $PIPER — COMPONENTS
   Pages compose from these. Page-specific CSS lives in a
   scoped <style> block on that page and must not redefine
   anything here.
   ============================================================ */

/* ============================================================
   NAV
   ============================================================ */

.nav {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-3) var(--pad);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--hair);
  transition: box-shadow var(--d-2) var(--e-out), background var(--d-2) var(--e-out);
}
.nav.is-stuck { box-shadow: var(--shadow-1); }

.nav__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  flex: none;
}
.nav__brand .mark { width: 2.35rem; height: 2.35rem; }
.nav__brand:hover .mark { animation: coin-flip 700ms var(--e-out); }

.nav__word {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav__word i { font-style: normal; color: var(--blood); }

.nav__links {
  display: flex;
  gap: clamp(.5rem, .1rem + 1.1vw, 1.5rem);
  margin-inline: auto;
}
.nav__links a {
  position: relative;
  text-decoration: none;
  font-size: .93rem;
  padding: var(--sp-2) var(--sp-1);
  color: var(--ink-2);
  transition: color var(--d-1) var(--e-out);
  white-space: nowrap;
}
.nav__links a:hover { color: var(--ink); }
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 2px;
  background: var(--blood);
  scale: 0 1;
  transform-origin: left;
  transition: scale var(--d-2) var(--e-out);
}
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after { scale: 1 1; }
.nav__links a[aria-current="page"] { color: var(--ink); }

.nav__end { display: flex; align-items: center; gap: var(--sp-3); flex: none; }

.theme {
  display: grid;
  place-items: center;
  width: 2.35rem; height: 2.35rem;
  border: 1px solid var(--hair-2);
  border-radius: var(--r-pill);
  color: var(--ink-2);
  transition: color var(--d-1), border-color var(--d-1), rotate var(--d-3) var(--e-spring);
}
.theme:hover { color: var(--ink); border-color: var(--ink); rotate: 25deg; }
.theme svg { width: 1.15rem; height: 1.15rem; }
/* Dark is the default state, so the moon shows unless we opt into light. */
.theme .i-sun  { display: none; }
.theme .i-moon { display: block; }
:root[data-theme="light"] .theme .i-sun  { display: block; }
:root[data-theme="light"] .theme .i-moon { display: none; }

/* ---- The tune control: a play triangle that becomes an equalizer.
   A recognisable media control, quiet until it is doing something. ---- */
.tune {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  height: 2.35rem;
  padding: 0 .85rem 0 .7rem;
  border: 1px solid var(--hair-2);
  border-radius: var(--r-pill);
  color: var(--ink-2);
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: color var(--d-1), border-color var(--d-1), background var(--d-1);
}
.tune:hover { color: var(--ink); border-color: var(--hair-3); }
.tune[aria-pressed="true"] {
  color: var(--brand-ink);
  border-color: color-mix(in srgb, var(--brand) 55%, transparent);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
}
/* the glyph well keeps play + eq the same width so the label never shifts */
.tune__glyph { position: relative; display: grid; place-items: center; width: 1rem; height: 1rem; }
.tune__play { width: .8rem; height: .8rem; fill: currentColor; translate: 1px 0; }
.tune[aria-pressed="true"] .tune__play { display: none; }

.tune__eq { display: none; align-items: flex-end; gap: 1.5px; height: .85rem; }
.tune[aria-pressed="true"] .tune__eq { display: flex; }
.tune__eq i {
  display: block;
  width: 2px;
  height: 28%;
  background: currentColor;
  border-radius: 1px;
  transform-origin: bottom;
}
.tune[aria-pressed="true"] .tune__eq i { animation: eq .66s ease-in-out infinite alternate; }
.tune__eq i:nth-child(1) { animation-delay: -.42s; }
.tune__eq i:nth-child(2) { animation-delay: -.14s; }
.tune__eq i:nth-child(3) { animation-delay: -.68s; }
.tune__eq i:nth-child(4) { animation-delay: -.30s; }
@keyframes eq { from { height: 22%; } to { height: 100%; } }

/* On narrow navs the label hides; the glyph alone still reads as play/pause. */
@media (max-width: 620px) {
  .tune { padding: 0; width: 2.35rem; justify-content: center; }
  .tune__label { display: none; }
}

.nav__burger { display: none; width: 2.5rem; height: 2.5rem; place-items: center; }
.nav__burger span {
  display: block;
  width: 1.35rem; height: 2px;
  background: var(--ink);
  transition: translate var(--d-2) var(--e-out), rotate var(--d-2) var(--e-out), opacity var(--d-1);
}
.nav__burger span + span { margin-top: 5px; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { translate: 0 7px; rotate: 45deg; }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { translate: 0 -7px; rotate: -45deg; }

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__burger { display: grid; }
  .nav__end .btn { display: none; }
  .nav__links.is-open {
    display: flex;
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    gap: 0;
    padding: var(--sp-3) var(--pad) var(--sp-5);
    background: var(--paper);
    border-bottom: 1px solid var(--hair-2);
    box-shadow: var(--shadow-1);
    z-index: var(--z-menu);
  }
  .nav__links.is-open a {
    padding: var(--sp-4) 0;
    font-size: 1.15rem;
    font-family: var(--f-display);
    border-bottom: 1px solid var(--hair);
  }
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: .72em 1.35em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--r-pill);
  font-family: var(--f-mono);
  font-size: .855rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: translate var(--d-1) var(--e-out), box-shadow var(--d-1) var(--e-out),
              background var(--d-1), color var(--d-1);
  box-shadow: 3px 3px 0 -0.5px var(--btn-bd);
}
.btn:hover  { translate: -2px -2px; box-shadow: 5px 5px 0 -0.5px var(--btn-bd); }
.btn:active { translate: 1px 1px;   box-shadow: 1px 1px 0 -0.5px var(--btn-bd); }
.btn svg { width: 1.05em; height: 1.05em; flex: none; }

.btn--gold  { --btn-bg: var(--brand-2); --btn-fg: var(--on-brand); --btn-bd: var(--on-brand); }
.btn--blood { --btn-bg: var(--danger);  --btn-fg: #FFF; --btn-bd: var(--ink); }
.btn--ink   { --btn-bg: var(--ink);     --btn-fg: var(--paper); --btn-bd: var(--ink); }
.btn--ghost { --btn-bg: transparent;   --btn-fg: var(--ink-2); --btn-bd: var(--hair-2); box-shadow: none; }
.btn--ghost:hover { --btn-fg: var(--ink); --btn-bd: var(--ink); box-shadow: 4px 4px 0 -0.5px var(--ink); }

.btn[aria-disabled="true"], .btn:disabled {
  opacity: .5; pointer-events: none; box-shadow: none;
}
.btn--lg { padding: .92em 1.7em; font-size: .93rem; }

/* ============================================================
   THE SEAL — the coin. Hero + mark share geometry.
   ============================================================ */

.seal { display: block; overflow: visible; filter: drop-shadow(0 0 11px var(--glow)); }
.seal__field { fill: var(--seal-bg); }
.seal__ring  { fill: none; stroke: var(--gold-2); }
/* `color` is set so child strokes can say stroke="currentColor". */
.seal__fig   { color: var(--gold-2); fill: currentColor; }
.seal__moon  { fill: var(--gold-2); opacity: .17; }
.seal__hatch { stroke: var(--gold-2); opacity: .34; }
.seal__blood { fill: var(--blood-2); }
.seal__rat   { color: var(--gold-2); fill: currentColor; opacity: .85; }
.seal__hole  { fill: var(--seal-bg); }
.seal__text  { fill: var(--gold-2); font-family: var(--f-mono); letter-spacing: .34em; }

/* Slow rotation of the ring legend only. */
.seal__legend { transform-origin: 50% 50%; animation: rotate-slow 46s linear infinite; }
.seal__glow   { animation: breathe 5.2s ease-in-out infinite; transform-origin: 50% 50%; }

.seal-hero {
  position: relative;
  width: min(100%, 27rem);
  margin-inline: auto;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.seal-hero::after {           /* light spilling from the flute's bell */
  content: "";
  position: absolute;
  inset: -6%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle at 60% 46%, var(--glow), transparent 68%);
  filter: blur(30px);
  animation: breathe 5.2s ease-in-out infinite;
}
.seal-hero .seal { width: 100%; height: auto; }

/* Notes emitted by piper.js from the flute's bell. */
.note-fly {
  position: absolute;
  left: var(--nx, 62%);
  top:  var(--ny, 44%);
  width: 1.05rem;
  color: var(--gold-2);
  pointer-events: none;
  opacity: 0;
  animation: note-rise var(--nd, 3.4s) var(--e-out) forwards;
}

@keyframes note-rise {
  0%   { opacity: 0;  transform: translate(0, 0) scale(.5) rotate(0deg); }
  12%  { opacity: .95; }
  100% { opacity: 0;  transform: translate(var(--dx, 90px), -190px) scale(1.15) rotate(var(--dr, 22deg)); }
}
@keyframes rotate-slow { to { rotate: 360deg; } }
@keyframes breathe { 0%, 100% { opacity: .55; scale: .97; } 50% { opacity: 1; scale: 1.03; } }
@keyframes coin-flip { to { transform: rotateY(360deg); } }

/* ============================================================
   TICKER — woodcut marquee strip
   ============================================================ */

.ticker {
  position: relative;
  display: flex;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  border-block: 2px solid var(--ink);
  padding-block: var(--sp-3);
  user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker__track {
  display: flex;
  flex: none;
  gap: var(--sp-6);
  padding-right: var(--sp-6);
  align-items: center;
  animation: slide-left var(--ticker-dur, 44s) linear infinite;
  will-change: transform;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--f-mono);
  font-size: .82rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ticker__item svg { width: .95rem; height: .95rem; color: var(--gold-2); flex: none; }
.ticker--gold { background: var(--brand-2); color: var(--on-brand); border-color: var(--on-brand); }
.ticker--gold .ticker__item svg { color: var(--danger); }
.ticker--rev .ticker__track { animation-direction: reverse; }

@keyframes slide-left { to { transform: translateX(-50%); } }

/* ============================================================
   RULE — divider with a rat running across it
   ============================================================ */

.rule {
  position: relative;
  height: 2px;
  background: var(--hair-2);
  margin-block: var(--sp-7);
  overflow: visible;
}
.rule::before, .rule::after {
  content: "❦";
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  background: var(--paper);
  padding-inline: var(--sp-4);
  color: var(--gold);
  font-size: 1.1rem;
  line-height: 1;
}
.rule::before { left: 50%; translate: -50% -50%; }
.rule::after { content: none; }

.rule__rat {
  position: absolute;
  bottom: 2px;
  left: -6%;
  width: 2.1rem;
  color: var(--ink-3);
  animation: scurry 13s linear infinite;
}
.rule__rat--b { animation-delay: -6.4s; animation-duration: 17s; scale: .78; opacity: .6; }

@keyframes scurry {
  0%   { transform: translateX(0)      scaleX(1); }
  48%  { transform: translateX(52vw)   scaleX(1); }
  50%  { transform: translateX(52vw)   scaleX(-1); }
  98%  { transform: translateX(-2vw)   scaleX(-1); }
  100% { transform: translateX(-2vw)   scaleX(1); }
}

/* ============================================================
   CARD
   ============================================================ */

.card {
  position: relative;
  padding: clamp(1.3rem, .9rem + 1.3vw, 2rem);
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-2);
  transition: translate var(--d-2) var(--e-out), box-shadow var(--d-2) var(--e-out);
  height: 100%;
}
.card:hover { translate: -3px -3px; box-shadow: 8px 9px 0 -1px var(--hair-2); }
.card__num {
  font-family: var(--f-mono);
  font-size: .78rem;
  letter-spacing: .2em;
  color: var(--blood);
  display: block;
  margin-bottom: var(--sp-3);
}
.card__title { font-size: var(--t-h3); margin-bottom: var(--sp-2); }
.card p { color: var(--ink-2); font-size: .97rem; }
.card__icon { width: 2.6rem; height: 2.6rem; color: var(--blood); margin-bottom: var(--sp-4); }

.card--flat { background: transparent; border-color: var(--hair-2); box-shadow: none; }
.card--flat:hover { translate: none; box-shadow: none; border-color: var(--ink); }
.card--dark { background: var(--ink); color: var(--paper); }
.card--dark p { color: color-mix(in srgb, var(--paper) 72%, transparent); }
.card--dark .card__num { color: var(--gold-2); }

/* ============================================================
   STAT
   ============================================================ */

.stat { border-top: 2px solid var(--ink); padding-top: var(--sp-4); }
.stat__k {
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.stat__l {
  font-family: var(--f-mono);
  font-size: var(--t-small);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: var(--sp-2);
}
.stat--blood .stat__k { color: var(--blood); }

/* ============================================================
   CONTRACT CHIP
   ============================================================ */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  max-width: 100%;
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  background: var(--paper-2);
  border: 1.5px dashed var(--hair-3);
  border-radius: var(--r-pill);
  font-family: var(--f-mono);
  font-size: .8rem;
}
.chip__label { color: var(--ink-3); letter-spacing: .14em; text-transform: uppercase; flex: none; }
.chip__val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip__val[data-live="false"] { color: var(--blood); letter-spacing: .1em; }
.chip__copy {
  display: grid; place-items: center;
  width: 2rem; height: 2rem; flex: none;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--paper);
  transition: scale var(--d-1) var(--e-spring);
}
.chip__copy:hover { scale: 1.1; }
.chip__copy svg { width: .9rem; height: .9rem; }
.chip.is-copied { border-style: solid; border-color: var(--gold); }

/* ============================================================
   STEP LIST
   ============================================================ */

.steps { counter-reset: step; display: grid; gap: var(--sp-5); }
.step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-5);
  align-items: start;
}
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  flex: none;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--paper);
  font-family: var(--f-mono);
  font-size: .9rem;
  font-weight: 700;
}
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: 3.4rem;
  bottom: -1.6rem;
  width: 1.5px;
  background: repeating-linear-gradient(var(--hair-2) 0 5px, transparent 5px 10px);
}
.step__t { font-size: var(--t-h3); margin-bottom: var(--sp-2); }
.step__b { color: var(--ink-2); max-width: var(--measure); }

/* ============================================================
   ACCORDION (native <details>)
   ============================================================ */

.qa { border-bottom: 1px solid var(--hair-2); }
.qa > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--f-display);
  font-size: clamp(1.05rem, .95rem + .5vw, 1.32rem);
  font-weight: 700;
  transition: color var(--d-1);
}
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary:hover { color: var(--blood); }
.qa > summary::after {
  content: "";
  flex: none;
  width: .78rem; height: .78rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  rotate: 45deg;
  transition: rotate var(--d-2) var(--e-out);
}
.qa[open] > summary::after { rotate: -135deg; }
.qa__body { padding-bottom: var(--sp-5); color: var(--ink-2); max-width: var(--measure); }
.qa[open] .qa__body { animation: unfold var(--d-3) var(--e-out); }
@keyframes unfold { from { opacity: 0; translate: 0 -8px; } }

/* ============================================================
   MEME FRAME — every meme is generated SVG/CSS, zero images
   ============================================================ */

.meme {
  position: relative;
  border: 2px solid var(--ink);
  border-radius: var(--r-2);
  background: var(--paper-2);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  transition: rotate var(--d-2) var(--e-spring), translate var(--d-2) var(--e-out);
}
.meme:hover { rotate: -1.1deg; translate: 0 -4px; }
.meme__art { aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--paper-3); }
.meme__art svg { width: 100%; height: 100%; }
.meme__cap {
  padding: var(--sp-4);
  border-top: 2px solid var(--ink);
  font-family: var(--f-display);
  font-size: 1.02rem;
  font-weight: 700;
  text-wrap: balance;
}
.meme__cap small { display: block; font-family: var(--f-mono); font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
  font-weight: 400; margin-top: var(--sp-2); }

/* ============================================================
   BANNER / CTA BAND
   ============================================================ */

.band {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(3rem, 1.5rem + 6vw, 6rem);
  overflow: hidden;
}
.band::before {                     /* radiating woodcut sunburst */
  content: "";
  position: absolute;
  inset: -60% -10%;
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    color-mix(in srgb, var(--brand-2) 5%, transparent) 0deg 4deg,
    transparent 4deg 8deg
  );
  animation: rotate-slow 120s linear infinite;
  pointer-events: none;
}
.band > * { position: relative; }
.band h2 { color: var(--paper); }
.band .lede { color: color-mix(in srgb, var(--paper) 74%, transparent); }
.band .btn--ghost { --btn-fg: var(--paper); --btn-bd: color-mix(in srgb, var(--paper) 45%, transparent); }
.band .btn--ghost:hover { --btn-bd: var(--paper); box-shadow: 4px 4px 0 -0.5px var(--paper); }

/* ============================================================
   PAGE HEADER (interior pages)
   ============================================================ */

.phead {
  position: relative;
  padding-block: clamp(2.75rem, 1.5rem + 5vw, 5.5rem) clamp(1.5rem, 1rem + 2vw, 3rem);
  border-bottom: 2px solid var(--ink);
  overflow: hidden;
}
.phead__title { font-size: var(--t-h1); }
.phead .lede { margin-top: var(--sp-4); }
.phead__ghost {
  position: absolute;
  right: -2%;
  top: 50%;
  translate: 0 -50%;
  width: min(34%, 17rem);
  color: var(--ink);
  opacity: .05;
  pointer-events: none;
}

/* ============================================================
   FOOTER
   ============================================================ */

.foot {
  background: var(--paper-2);
  border-top: 2px solid var(--ink);
  padding-block: var(--sp-7) var(--sp-5);
}
.foot__grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  margin-bottom: var(--sp-7);
}
.foot__h {
  font-family: var(--f-mono);
  font-size: var(--t-small);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--sp-4);
}
.foot__list li + li { margin-top: var(--sp-2); }
.foot__list a { text-decoration: none; color: var(--ink-2); transition: color var(--d-1); }
.foot__list a:hover { color: var(--blood); }
.foot__legal {
  border-top: 1px solid var(--hair);
  padding-top: var(--sp-5);
  display: grid;
  gap: var(--sp-4);
}
.foot__legal p {
  font-size: .78rem;
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 78ch;
}
.foot__legal strong { color: var(--blood); font-weight: 600; }

/* ============================================================
   UTILITIES
   ============================================================ */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: .34em .85em;
  border: 1px solid var(--hair-2);
  border-radius: var(--r-pill);
  font-family: var(--f-mono);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pill--live { border-color: var(--blood); color: var(--blood); }
.pill--live::before {
  content: "";
  width: .45rem; height: .45rem;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 1.9s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .25; scale: 1.5; } }

.hr-hatch {
  height: 10px;
  border: 0;
  background: repeating-linear-gradient(
    -45deg, var(--ink) 0 1.5px, transparent 1.5px 7px
  );
  opacity: .35;
  margin-block: var(--sp-7);
}

/* Woodcut hatch fill for figures. */
.hatch-bg {
  background-image: repeating-linear-gradient(
    -45deg, var(--hair-2) 0 1px, transparent 1px 6px
  );
}

/* ============================================================
   THE PARADE — rats crossing the floor of the page, but only
   while the tune is actually playing. Injected by tune.js.
   ============================================================ */

.parade {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 3.4rem;
  z-index: var(--z-parade);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--d-3) var(--e-out);
  overflow: hidden;
}
html.tune-on .parade { opacity: 1; }

.parade::after {                       /* the floorboard they run along */
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  opacity: .45;
}

.parade__rat {
  position: absolute;
  bottom: .35rem;
  left: -12%;
  width: var(--rw, 2.4rem);
  color: var(--brand-2);
  animation: march var(--rs, 15s) linear infinite;
  animation-delay: var(--rd, 0s);
  animation-play-state: paused;
  filter: drop-shadow(0 0 3px var(--glow));
}
html.tune-on .parade__rat { animation-play-state: running; }
.parade__rat svg { animation: bob .34s ease-in-out infinite alternate; }

@keyframes march { to { transform: translateX(124vw); } }
@keyframes bob   { from { translate: 0 0; } to { translate: 0 -2.5px; } }

/* The seal breathes on the downbeat. */
.seal-hero.is-beat .seal { animation: beat 190ms var(--e-out); }
@keyframes beat { 50% { scale: 1.022; } }

@media (prefers-reduced-motion: reduce) {
  .parade { display: none; }        /* audio still plays; the rats sit it out */
}

@media print {
  .nav, .ticker, .band, .rule__rat, .note-fly, .parade { display: none !important; }
  body::before { display: none; }
}