/* markmeleka.com — shared design system.
   Tokens + base styles for every page. Page-specific styles stay inline on each page. */

:root {
  --paper: #faf9f6; --ink: #1c1b18; --muted: #6e6c64; --faint: #98968c;
  --rule: #e6e4dc; --green: #15703a; --green-soft: rgba(21,112,58,.07);
  --gold: #c79a1e; --blue: #4a7dab; --slate: #3d3c38;
  --serif: ui-serif, 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #161514; --ink: #e9e7e1; --muted: #a3a199; --faint: #7d7b73;
    --rule: #2e2d2a; --green: #58b97a; --green-soft: rgba(88,185,122,.09);
    --gold: #e0b94a; --blue: #6c9fd0; --slate: #c4c2ba;
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper); color: var(--ink);
  font-family: var(--serif); font-size: 17px; line-height: 1.66;
  padding: clamp(28px, 6vw, 72px) clamp(20px, 6vw, 32px);
}

a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 3.5px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--green); }

.crumb { font-family: var(--mono); font-size: 12px; color: var(--faint); margin-bottom: 22px; }
.crumb a { color: var(--faint); text-decoration: none; }
.crumb a:hover { color: var(--green); }