/* ── Tokens ─────────────────────────────────────────────────────────────────
   Shared across all sections. Section-specific overrides live in weven.css
   (or future section CSS files).
   ────────────────────────────────────────────────────────────────────────── */
:root {
  /* Brand palette — from the personal card */
  --pink:      #dfc8da;
  --parch:     #faf7f0;
  --ink:       #2a1a16;
  --muted:     #7a6862;
  --greenish:  #7a9e7c;
  --hover-red: #7a2a20;
  --lines:     rgba(107, 91, 110, 0.12);

  /* Typography */
  --font-serif: 'Serif', Georgia, 'Times New Roman', serif;
  --font-mono:  'Mono', ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;
}

/* ── Font aliases ───────────────────────────────────────────────────────────
   These let us write font-family: var(--font-serif) without repeating stacks.
   ────────────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Serif';
  src: local('Georgia'), local('Times New Roman');
}
@font-face {
  font-family: 'Mono';
  src: local('ui-monospace'), local('Cascadia Code'), local('Menlo'), local('Consolas');
}

/* ── Reset ──────────────────────────────────────────────────────────────────*/
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Base ───────────────────────────────────────────────────────────────────*/
body {
  font-family: var(--font-serif);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.sitenav {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  padding: 1.25rem 2rem;
}

.sitenav-home {
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  text-decoration: none;
}

.sitenav-sep {
  color: var(--muted);
  font-size: .85rem;
}

.sitenav-link {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}

.sitenav-link:hover,
.sitenav-link--actief { color: var(--ink); border-color: var(--greenish); }

/* ── Inline links ───────────────────────────────────────────────────────────*/
a {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(var(--hover-red), var(--hover-red));
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size .25s ease, color .25s;
}
a:hover { background-size: 100% 1px; color: var(--hover-red); }