/* ============================================================
   Oak & Iron — global base
   ------------------------------------------------------------
   Deliberately minimal. Each design candidate is fully self-
   contained and scopes ALL its styles under its own root
   (.design-a-root … .design-e-root), so there is no shared
   "template" here — only a reset, neutral page defaults, and
   the warm heritage palette as convenience variables a design
   may use or override.
   ============================================================ */

:root {
  /* Warm heritage palette — available to designs as defaults */
  --cream: #faf6ec;
  --paper: #f4ecdd;
  --paper-2: #efe6d3;
  --ink: #221d17;
  --muted: #6b6358;
  --forest: #26332c;
  --forest-2: #1d2722;
  --oak: #8a5a34;
  --walnut: #5c3b22;
  --accent: #9c7a3e;
  --accent-soft: #b89a63;
  --accent-ink: #faf6ec;
  --hairline: rgba(34, 29, 23, 0.14);
  --on-dark: #f4ecdd;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: var(--accent-ink);
  padding: 0.75rem 1rem; z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }