/* Reset, fonts and element defaults, plus the few utilities every page uses
   (visually-hidden, skip link, scroll reveal, reduced motion). */

@font-face { font-family: "Anton"; src: url("../fonts/anton-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-var-latin.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; background: var(--color-paper); }
html {
  scrollbar-color: var(--color-muted) var(--color-paper);
  /* anchors land below the fixed header; focused elements stay clear of the music button */
  scroll-padding-top: calc(var(--nav-h) + var(--space-md));
  scroll-padding-bottom: calc(var(--tap-min) + 2 * var(--space-lg));
  scroll-behavior: smooth;
}
/* smooth-scroll.js (Lenis) animates scrolling itself; the browser's own smoothing would fight it */
html.lenis { scroll-behavior: auto; }
body {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  caret-color: var(--color-accent);
}
::selection { background: var(--color-cream-red); color: var(--color-cream); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-synthesis: none; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
p:not([class]) { max-width: var(--measure); }
img, video { max-width: 100%; height: auto; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip {
  position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-tooltip);
  padding: var(--space-xs) var(--space-md);
  background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius-card);
}
.skip:focus-visible { top: var(--space-md); }
/* the skip link moves focus to <main> (tabindex="-1"); no outline around the whole page */
main:focus { outline: none; }

/* Scroll reveal (assets/js/reveal.js). Without JS the .js class is missing and everything stays visible.
   --i on an element staggers it after its siblings. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * var(--reveal-stagger));
  }
  .js [data-reveal]:not(.is-seen) { opacity: 0; transform: translateY(var(--reveal-shift)); }
  /* safety net: if reveal.js never runs (blocked, failed), everything appears after a few
     seconds instead of staying invisible; reveal.js marks <html> with .reveal-ready */
  .js:not(.reveal-ready) [data-reveal]:not(.is-seen) { animation: reveal-fallback 1ms 4s forwards; }
}
@keyframes reveal-fallback { to { opacity: 1; transform: none; } }

/* Reduced motion: no transitions or animations anywhere, except where a rule opts in with .keep-motion. */
@media (prefers-reduced-motion: reduce) {
  *:not(.keep-motion), *:not(.keep-motion)::before, *:not(.keep-motion)::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}