:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 0.9375rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.4vw, 3.25rem);
  --text-hero: clamp(2.75rem, 0.8rem + 6.2vw, 6.5rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --font-display: 'Zodiak', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Switzer', 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --radius-sm: 3px;
  --radius: 6px;
  --radius-lg: 12px;
  --maxw: 1200px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Ink & Parchment palette ---------- */
:root,
[data-theme='dark'] {
  --bg: #0b0d12;
  --bg-deep: #070810;
  --surface: #12151d;
  --surface-2: #171b25;
  --surface-3: #1d222e;
  --divider: #232935;
  --border: #2c3342;
  --text: #e9e4d8;
  --text-muted: #9b968a;
  --text-faint: #6b675e;
  --gold: #c9a349;
  --gold-soft: #8a6f2c;
  --verd: #55a290;
  --oxblood: #b0574f;
  --violet: #8b7bc0;
  --sky: #6b93c9;
  --grain-opacity: 0.05;
  --wheel-ink: #e9e4d8;
}

[data-theme='light'] {
  --bg: #f3eee2;
  --bg-deep: #eae3d3;
  --surface: #faf7ef;
  --surface-2: #f6f1e5;
  --surface-3: #efe8d8;
  --divider: #ded5c1;
  --border: #cfc4ab;
  --text: #221f18;
  --text-muted: #6b6455;
  --text-faint: #97907e;
  --gold: #8a6613;
  --gold-soft: #b08c2e;
  --verd: #2c6d5e;
  --oxblood: #8f3a33;
  --violet: #5b4b96;
  --sky: #2f5c92;
  --grain-opacity: 0.035;
  --wheel-ink: #221f18;
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.62;
  font-feature-settings: 'ss01' 1;
  -webkit-font-smoothing: antialiased;
  transition:
    background 0.4s var(--ease),
    color 0.4s var(--ease);
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  margin: 0;
  letter-spacing: -0.01em;
}
p {
  margin: 0 0 var(--space-4);
}
a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--gold) 35%, transparent);
  transition: border-color 0.2s var(--ease);
}
a:hover {
  border-bottom-color: var(--gold);
}
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}
table {
  border-collapse: collapse;
  width: 100%;
}
::selection {
  background: color-mix(in oklab, var(--gold) 35%, transparent);
}
img,
svg {
  max-width: 100%;
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: clamp(var(--space-4), 4vw, var(--space-10));
}
.mono {
  font-family: var(--font-mono);
  font-variant-ligatures: none;
}
.muted {
  color: var(--text-muted);
}
.faint {
  color: var(--text-faint);
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}