.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .48em;
  min-height: 44px;
  font-weight: 700;
  letter-spacing: -.04em;
  text-decoration: none;
}

.wordmark svg {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: currentColor;
}

.site-header nav a {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  color: var(--inverse-soft);
  font-size: .88rem;
  text-decoration: none;
  white-space: nowrap;
  transition: color 180ms ease;
}

.header-actions a {
  color: var(--inverse-soft);
  font-size: .88rem;
  text-decoration: none;
  white-space: nowrap;
}

.header-actions .header-buy {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-1);
  margin-right: var(--space-3);
}

.header-actions .header-discord {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: #fff;
  background: #5865f2;
  border-radius: 999px;
  transition: background 180ms ease;
}

.transport-play[data-playing="true"] { background: transparent; color: var(--ink); }

html.js-walk .walk-box {
  display: block;
  position: absolute;
  left: 5%;
  top: 6%;
  width: 90%;
  height: 8%;
  border: 1px solid #f7f7f3;
  border-radius: calc(var(--walk-radius) * .65);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .65), 0 1rem 2.5rem rgba(0, 0, 0, .48);
  transition: left 260ms cubic-bezier(.32, .9, .3, 1),
              top 260ms cubic-bezier(.32, .9, .3, 1),
              width 260ms cubic-bezier(.32, .9, .3, 1),
              height 260ms cubic-bezier(.32, .9, .3, 1);
  pointer-events: none;
}

html.js-walk .walk-copy {
  --walk-copy-inset: clamp(.75rem, 2.4vw, 1.5rem);
  --walk-copy-width: min(28rem, calc(100% - var(--walk-copy-inset) - var(--walk-copy-inset)));
  position: absolute;
  z-index: 1;
  left: clamp(
    var(--walk-copy-inset),
    var(--copy-left, var(--walk-copy-inset)),
    calc(100% - var(--walk-copy-width) - var(--walk-copy-inset))
  );
  top: var(--copy-y, 18%);
  width: var(--walk-copy-width);
  max-width: 100%;
  padding: 0;
  transform: translateY(var(--copy-shift, 0%));
  transition: left 260ms cubic-bezier(.32, .9, .3, 1),
              top 260ms cubic-bezier(.32, .9, .3, 1),
              transform 260ms cubic-bezier(.32, .9, .3, 1);
}

footer a { display: inline-flex; align-items: center; min-height: 44px; }

@media (hover: hover) {
  .button:hover { transform: translateY(-.12rem); box-shadow: 0 .7rem 1.8rem rgba(0, 0, 0, .18); }
  .header-discord:hover { background: #4752c4; color: #fff; }
  .site-header nav a:hover { color: #f7f7f3; }
  .language-control:hover { color: #f7f7f3; background: rgba(247, 247, 243, .08); }
  .button-secondary:hover { border-color: #f7f7f3; background: rgba(247, 247, 243, .1); }
  .button:active { transform: scale(.98); }
  .transport-play:hover { transform: scale(1.07); box-shadow: 0 .65rem 1.5rem rgba(0, 0, 0, .18); }
  .transport-play:active { transform: scale(.96); }
  .audio-switch button:hover:not([aria-pressed="true"]) { color: var(--ink); transform: scale(.985); }
}

@media (max-width: 76rem) {
  .site-header { grid-template-columns: minmax(0, 1fr) auto; }
  .site-header nav,
  .header-buy { display: none; }
}

@media (max-width: 58rem) {
  .site-header { grid-template-columns: minmax(0, 1fr) auto; }
  .site-header nav { display: none; }
  .header-buy { display: none; }
  .hero-grid,
  .proof-heading,
  .audio-stage,
  .latency-head,
  .ear-intro,
  .fit-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-grid { min-height: auto; }
  .proof-heading, .latency-head { align-items: start; }
  .walk-run { padding-top: var(--space-4); }
  html.js-walk .walk-stage { position: static; height: auto; display: block; }
  .walk-visual { width: 100%; }
  html.js-walk .walk-focus,
  html.js-walk .walk-box,
  html.js-walk .walk-count,
  html.js-walk .walk-marks { display: none; }
  html.js-walk .walk-copy {
    position: static;
    width: 100%;
    max-width: none;
    padding: var(--space-4) 0 0;
    background: transparent;
    transform: none;
  }
  .walk-copy-panel {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  html.js-walk .walk-steps { display: block; }
  html.js-walk .walk-step {
    margin-bottom: var(--space-4);
    padding-block: var(--space-3);
    opacity: 1;
    pointer-events: auto;
    transform: none;
    border-bottom: 1px solid var(--line-dark);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-copy h1,
  .hero-actions,
  .hero-download-meta,
  .hero-demo-details { animation: none !important; }
  .motion-reveal { opacity: 1 !important; transform: none !important; }
  .button,
  .transport-play,
  .audio-switch button,
  .walk-focus,
  .walk-box,
  .walk-copy,
  .walk-step { transition: none !important; }
}

@media (max-width: 58rem) {
  .proof-visual {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    max-height: 85vh;
    margin: 0 0 clamp(4rem, 12vw, 6rem);
    border-radius: 0;
    box-shadow: none;
  }
  .proof-visual img,
  .proof-visual video {
    object-position: 50% 30%;
  }
  .comparison-player { padding: 1.5rem; }
  .interlude-visual {
    width: 100%;
    aspect-ratio: 4 / 5;
    margin-top: clamp(2rem, 8vw, 3rem);
    border-radius: 0;
  }
  .ear-photo {
    aspect-ratio: 4 / 5;
    border-radius: 0;
    margin: 0 calc(-1 * var(--gutter));
    width: calc(100% + (2 * var(--gutter)));
  }
  .ear-intro { row-gap: clamp(1.5rem, 5vw, 2.5rem); }
  .ear-photo img { object-position: 68% 30%; }
  .interlude-visual img { object-position: 50% 22%; }
  .finale-visual { height: min(64vh, 30rem); }
  .finale-visual img { object-position: 52% 28%; }
  /* Narrow drops the spotlight, so the dimming that made it readable has
     nothing left to point at. Declared after the filter above, never
     before it, or specificity ties and source order undo this. */
  html.js-walk .walk-base { filter: none; }
}

/* about page only -- long-form text column, nothing else on the page needs it */
.about-hero { padding-block: clamp(4rem, 9vw, 7rem) clamp(2rem, 4vw, 3rem); }

.about-hero h1 { max-width: 16ch; margin: 0 0 1rem;
  font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.02; letter-spacing: -.02em; }

.about-hero .lede { max-width: 46ch; margin: 0; color: var(--ink-soft); font-size: 1.15rem; }

.about-body { padding-bottom: clamp(4rem, 8vw, 6rem); }