/* ==========================================================================
   Porcelain — airy, ultra-light override layer. Warm off-white, more air,
   a quiet sage accent. Override rules load after main.css and win.
   ========================================================================== */

:root {
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font-body);
  --accent: #5f7a58;
  --bg: #f4f2ec; --bg-soft: #ece9df; --surface: #faf8f2;
  --line: #e3dfd3; --text: #2c2b26; --muted: #847f74;
  --radius: 0; --measure: 34rem;
  --gutter: clamp(1.3rem, 6vw, 3.25rem);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1a1915; --bg-soft: #211f1a; --surface: #232219;
    --line: #35322a; --text: #efece3; --muted: #a29d8f; --accent: #93a986;
  }
}
:root[data-theme="dark"] {
  --bg: #1a1915; --bg-soft: #211f1a; --surface: #232219;
  --line: #35322a; --text: #efece3; --muted: #a29d8f; --accent: #93a986;
}

body { line-height: 1.72; }
h1, h2, h3, h4 { font-weight: 560; letter-spacing: -0.02em; }
.hero { padding-block: clamp(4rem, 13vw, 9rem) clamp(2.5rem, 7vw, 5rem); }
.eyebrow { letter-spacing: 0.16em; font-weight: 560; }

.button { background: var(--text); font-weight: 540; }
.card, .entry { background: var(--surface); }

/* the gentle theme softens its tags into quiet pills */
.tag { border-radius: 999px; padding-inline: 0.7rem; }

/* card/entry sit on their own surface, so inset the text (image full-bleed) */
.card { padding-bottom: 1.1rem; }
.card > :not(.card__media) { padding-inline: 1.1rem; }
.entry { padding-inline: clamp(1.1rem, 3vw, 1.4rem); }