.home { position: relative; min-height: 100svh; display: flex; flex-direction: column; background: #000; color: var(--light-ink); }
/* Spans the full viewport (pulled up under the sticky header) with equal top and
   bottom padding, so the content centers on the viewport, not between bars. */
.home-main { min-height: 100svh; margin-top: calc(-1 * var(--nav-height)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4rem; padding: calc(var(--nav-height) + var(--space-6)) var(--space-4); text-align: center; }
.home footer { position: absolute; left: 0; right: 0; bottom: 0; }
.hero-mark { position: relative; width: min(72rem, 100%); }
/* Transparent until home.js swaps this for the string SVG — otherwise a slow
   connection shows the raw solid wordmark before the effect can build. */
.home-main h1.string-text { width: 100%; max-width: none; font: 900 clamp(3rem, 18vw, 16rem)/.9 Impact, Haettenschweiler, sans-serif; color: transparent; }
.sound-toggle { position: absolute; left: calc(95.2% + 1.25rem); bottom: 2.4%; white-space: nowrap; padding: .27rem .66rem; border: 1px solid var(--quiet-light-ink); border-radius: 999px; background: none; color: var(--quiet-light-ink); font: inherit; font-size: calc(var(--meta-size) * .6); line-height: 1.2; cursor: pointer; transition: color 180ms var(--easing), border-color 180ms var(--easing); }
.sound-toggle:hover, .sound-toggle:focus-visible { color: var(--light-ink); border-color: var(--light-ink); }
.sound-toggle[hidden] { display: none; }
/* 95.2% / 2.4% are where the Y's stem ends on its last scanline. On phones
   there is no room right of the stem; tuck the button under instead. */
@media (max-width: 48rem) { .sound-toggle { left: auto; right: 0; bottom: auto; top: 100%; margin: .5rem 0 0; } }
.home-copy { max-width: 36rem; text-wrap: balance; margin: 0; color: var(--quiet-light-ink); font-size: var(--body-size); }
.home .topbar { background: rgb(0 0 0 / 72%); }
.home .brand { color: var(--light-ink); }
.home .nav-link, .home footer, .home .footer-links a { color: var(--quiet-light-ink); }
.home .nav-link:hover, .home .nav-link:focus-visible, .home .footer-links a:hover, .home .footer-links a:focus-visible { color: var(--light-ink); }
.home footer { border-top: 0; padding: .5rem 0 .75rem; font-size: .75rem; line-height: 1.2; }