:root {
  --night: #172028;
  --night-2: #212b33;
  --ink: #241c16;
  --fiber: #f3e7d6;
  --fiber-dim: rgba(243, 231, 214, 0.72);
  --stroma: #8c5a3c;
  --gold: #d7a15e;
  --gold-deep: #a56b32;
  --lake: #2f6d78;
  --lake-deep: #1c4c54;
  --paper: #f6f1e8;
  --paper-2: #efe6d8;
  --line: rgba(243, 231, 214, 0.18);
  --line-strong: rgba(243, 231, 214, 0.38);
  --shadow: 0 30px 70px rgba(0, 0, 0, 0.28);
  --sans: "Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
  --serif: "Source Serif 4", "Iowan Old Style", Palatino, serif;
  --measure: 68ch;
  --pad: clamp(1.25rem, 3vw, 2.5rem);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--night);
  color: var(--fiber);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-optical-sizing: auto;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}