/* ─── Design tokens ──────────────────────────────────── */
:root {
  /* Colors */
  --c-bg:      #faf7f2;
  --c-text:    #1f1b16;
  --c-accent:  #9a6f2d;
  --c-muted:   #6b6257;
  --c-border:  #e4ddd2;
  --c-surface: #f2ece2;

  /* Typography */
  --f-body: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --f-ui:   'Inter', system-ui, -apple-system, sans-serif;

  /* Type scale (Major Third) */
  --t-sm:   0.875rem;
  --t-base: 1.125rem;
  --t-lg:   1.25rem;
  --t-xl:   1.5rem;
  --t-2xl:  2rem;
  --t-3xl:  2.75rem;

  /* Leading */
  --l-tight:  1.25;
  --l-body:   1.65;

  /* Space scale */
  --s-xs: 0.5rem;
  --s-sm: 1rem;
  --s-md: 1.5rem;
  --s-lg: 2.5rem;
  --s-xl: 4rem;
  --s-2xl: 6rem;

  /* Layout */
  --max-prose: 680px;
  --max-site:  1100px;

  --transition: 0.15s ease;
}

/* ─── Reset ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 100%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background-color: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: var(--l-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, picture, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; }

/* ─── Links ──────────────────────────────────────────── */
a {
  color: var(--c-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--transition);
}
a:hover { color: var(--c-text); }
a:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ─── Typography ─────────────────────────────────────── */
h1, h2, h3, h4, h5 {
  font-family: var(--f-body);
  font-weight: 600;
  line-height: var(--l-tight);
  color: var(--c-text);
}
h1 { font-size: var(--t-3xl); letter-spacing: -0.02em; margin-bottom: var(--s-md); }
h2 { font-size: var(--t-2xl); letter-spacing: -0.01em; margin-top: var(--s-xl); margin-bottom: var(--s-sm); }
h3 { font-size: var(--t-xl);  margin-top: var(--s-lg); margin-bottom: var(--s-xs); }
h4 { font-size: var(--t-lg);  margin-top: var(--s-md); margin-bottom: var(--s-xs); }

p { margin-bottom: var(--s-sm); }
p:last-child { margin-bottom: 0; }

ul, ol { padding-left: var(--s-md); margin-bottom: var(--s-sm); }
li { margin-bottom: var(--s-xs); }
li:last-child { margin-bottom: 0; }

strong { font-weight: 600; }
em { font-style: italic; }
abbr[title] { text-decoration: underline dotted; cursor: help; }

blockquote {
  border-left: 3px solid var(--c-accent);
  padding-left: var(--s-md);
  margin: var(--s-lg) 0;
  color: var(--c-muted);
  font-style: italic;
  font-size: var(--t-lg);
}

hr {
  border: none;
  border-top: 1px solid var(--c-border);
  margin: var(--s-xl) 0;
}

/* ─── Utility classes ────────────────────────────────── */
.ui       { font-family: var(--f-ui); }
.muted    { color: var(--c-muted); }
.accent   { color: var(--c-accent); }
.t-sm     { font-size: var(--t-sm); }
.t-lg     { font-size: var(--t-lg); }
.sr-only  {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}