/* Self-hosted fonts (SIL Open Font License, see assets/fonts/LICENSE.txt) */
@font-face { font-family: 'Alfa Slab One'; src: url('../assets/fonts/alfa-slab-one-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bitter'; src: url('../assets/fonts/bitter-var.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Rye'; src: url('../assets/fonts/rye-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

/* Fallback metrics computed by tools/make-fonts.py against Georgia, so text does not jump when the fonts arrive. */
@font-face { font-family: 'Slab Fallback'; src: local('Georgia Bold'), local('Georgia-Bold'), local('Georgia'); size-adjust: 119.8%; ascent-override: 86.5%; descent-override: 27.8%; }
@font-face { font-family: 'Body Fallback'; src: local('Georgia'); size-adjust: 101.8%; ascent-override: 91.8%; descent-override: 26%; }
@font-face { font-family: 'Western Fallback'; src: local('Georgia Bold'), local('Georgia-Bold'), local('Georgia'); size-adjust: 113.8%; ascent-override: 86.7%; descent-override: 23.2%; }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  background: var(--stage-900);
  color-scheme: dark;
  overflow-x: clip;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
html.has-dialog { overflow: hidden; }
body {
  min-height: 100vh;
  background: var(--stage-900);
  color: var(--cream-soft);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
h1, h2 { font-family: var(--font-slab); font-weight: 400; line-height: var(--lh-heading); letter-spacing: 0.005em; color: var(--cream); text-wrap: balance; }
h3 { font-family: var(--font-body); font-weight: 700; line-height: 1.2; color: var(--cream); }
p { text-wrap: pretty; }
strong { font-weight: 700; }
::selection { background: var(--brass-300); color: var(--ink-900); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Layout primitives */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter-x); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Surfaces. The oak is his own table (tools/make-textures.py); a vignette keeps text calm over it. */
.wood {
  position: relative; isolation: isolate;
  background: var(--oak-700) url('../assets/img/wood-dark-726.webp') 0 0 / 726px auto repeat;
}
.wood::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(20, 12, 7, 0) 30%, rgba(14, 8, 5, 0.72) 100%),
    linear-gradient(180deg, rgba(14, 8, 5, 0.35), rgba(14, 8, 5, 0) 18%, rgba(14, 8, 5, 0) 82%, rgba(14, 8, 5, 0.45));
}
.stage { position: relative; background: var(--stage-900); }

/* Film grain: a pre-rendered tile at low opacity. No blend modes, never animated (cheap on iPhone). */
.grain { isolation: isolate; }
.grain::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url('../assets/img/grain-160.webp') 0 0 / 160px 160px repeat;
  opacity: 0.05;
}

/* Focus: always visible. Brass on dark, ink on parchment. */
:focus-visible { outline: 2px solid var(--brass-300); outline-offset: 3px; border-radius: 4px; }
.sheet :focus-visible, .card :focus-visible { outline-color: var(--ink-900); }

.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: var(--z-skip);
  padding: 0.75rem 1.125rem; border-radius: 999px;
  background: var(--cream); color: var(--ink-900);
  font-size: var(--fs-small); font-weight: 700;
  transform: translateY(-160%);
  transition: transform var(--dur-micro) var(--ease-out);
}
.skip-link:focus-visible { transform: none; }

/* Hidden-before-reveal states exist only when motion.js is going to run (html.motion-ok is set in <head>). */
.motion-ok [data-reveal] {
  opacity: 0; transform: translate3d(0, 28px, 0);
  transition: opacity 0.9s var(--ease-out), transform 1s var(--ease-out);
}
.motion-ok [data-reveal].is-in { opacity: 1; transform: none; }

/* Safety net for anyone who asks for less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}