/* =========================================================
   CD BASE — zero-collision design system foundation
   Load first on every page. Prefix: cd-
   SEO/perf focus: stable layout, low CLS, accessible focus.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=DM+Sans:wght@300;400;500;600&display=swap');

:root {
  --cd-cream-50: #faf9f7;
  --cd-cream-100: #faf7f2;
  --cd-stone-100: #e8e5e0;
  --cd-stone-200: #e8e0d5;
  --cd-clay-400: #c4a882;
  --cd-terracotta-500: #c67b4e;
  --cd-terracotta-600: #b06a40;
  --cd-terracotta-700: #8b5e3c;
  --cd-forest-700: #4a5d4a;
  --cd-charcoal-900: #1a1916;
  --cd-charcoal-800: #2c2c2c;
  --cd-gray-600: #6b6560;
  --cd-gray-500: #7a7772;
  --cd-white: #ffffff;

  --cd-bg: var(--cd-cream-50);
  --cd-bg-muted: var(--cd-cream-100);
  --cd-bg-alt: var(--cd-stone-200);
  --cd-surface: var(--cd-white);
  --cd-text: var(--cd-charcoal-900);
  --cd-text-strong: var(--cd-charcoal-800);
  --cd-text-muted: var(--cd-gray-600);
  --cd-border: var(--cd-stone-100);
  --cd-accent: var(--cd-terracotta-500);
  --cd-accent-hover: var(--cd-terracotta-600);
  --cd-accent-dark: var(--cd-terracotta-700);
  --cd-success: var(--cd-forest-700);

  --cd-font-serif: 'Cormorant Garamond', Georgia, serif;
  --cd-font-sans: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --cd-space-2xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.375rem);
  --cd-space-xs: clamp(0.5rem, 0.45rem + 0.25vw, 0.625rem);
  --cd-space-sm: clamp(0.75rem, 0.65rem + 0.5vw, 1rem);
  --cd-space-md: clamp(1rem, 0.85rem + 0.75vw, 1.5rem);
  --cd-space-lg: clamp(1.75rem, 1.35rem + 2vw, 2.5rem);
  --cd-space-xl: clamp(2.5rem, 1.9rem + 3vw, 4rem);
  --cd-space-2xl: clamp(4rem, 3rem + 5vw, 6rem);

  --cd-container: 1280px;
  --cd-container-narrow: 760px;
  --cd-gutter: clamp(1rem, 0.65rem + 1.75vw, 1.5rem);
  --cd-header-height: 64px;

  --cd-radius-sm: 4px;
  --cd-radius-md: 8px;
  --cd-radius-lg: 16px;
  --cd-radius-xl: 24px;
  --cd-radius-pill: 9999px;

  --cd-shadow-sm: 0 2px 8px rgb(26 25 22 / 0.06);
  --cd-shadow-md: 0 8px 24px rgb(26 25 22 / 0.10);
  --cd-shadow-lg: 0 16px 40px rgb(26 25 22 / 0.14);

  --cd-ease: cubic-bezier(0.2, 0, 0, 1);
  --cd-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --cd-duration-fast: 150ms;
  --cd-duration-base: 220ms;
  --cd-duration-slow: 420ms;
  --cd-transition: var(--cd-duration-base) var(--cd-ease);

  /* Compatibility aliases — legacy + non-cd components */
  --bg: var(--cd-bg);
  --bg-secondary: var(--cd-bg-muted);
  --surface: var(--cd-surface);
  --text: var(--cd-text);
  --text-muted: var(--cd-text-muted);
  --border: var(--cd-border);
  --accent: var(--cd-accent);
  --accent-hover: var(--cd-accent-hover);
  --accent-dark: var(--cd-accent-dark);
  --radius: var(--cd-radius-lg);
  --shadow-card: var(--cd-shadow-md);
  --font-heading: var(--cd-font-serif);
  --font-body: var(--cd-font-sans);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { min-width: 320px; margin: 0; background: var(--cd-bg); color: var(--cd-text); font-family: var(--cd-font-sans); font-size: 1rem; line-height: 1.6; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled, [aria-disabled='true'] { cursor: not-allowed; opacity: 0.55; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--cd-text); font-family: var(--cd-font-serif); font-weight: 400; line-height: 1.15; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--cd-accent); outline-offset: 4px; }
::selection { background: color-mix(in srgb, var(--cd-accent) 24%, transparent); }

.cd-container { width: min(100% - (var(--cd-gutter) * 2), var(--cd-container)); margin-inline: auto; }
.cd-container--narrow { width: min(100% - (var(--cd-gutter) * 2), var(--cd-container-narrow)); margin-inline: auto; }
.cd-skip-link { position: absolute; top: 0; left: var(--cd-gutter); z-index: 9999; transform: translateY(-120%); background: var(--cd-text); color: var(--cd-bg); padding: 0.55rem 1rem; border-radius: 0 0 var(--cd-radius-md) var(--cd-radius-md); font-size: 0.875rem; font-weight: 600; transition: transform var(--cd-transition); }
.cd-skip-link:focus-visible { transform: translateY(0); }
.cd-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; }

@supports not (text-wrap: balance) { h1, h2, h3, h4, h5, h6, p { text-wrap: initial; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; } }
/* =========================================================
   EDITORIAL WARM PALETTE — UPDATED
   ========================================================= */

:root {
  /* Editorial warm palette */
  --color-ivory: #fbf7ef;
  --color-linen: #f3eadc;
  --color-sand: #dfcdb7;
  --color-clay: #b8795f;
  --color-terracotta: #a85f45;
  --color-sage: #8d9b81;
  --color-cacao: #3f3028;
  --color-ink: #241f1b;
  --color-muted: #75685e;

  /* Semantic aliases */
  --bg: var(--color-ivory);
  --bg-secondary: #f7efe5;
  --surface: #fffaf3;
  --surface-warm: var(--color-linen);
  --text: var(--color-ink);
  --text-muted: var(--color-muted);
  --border: rgba(63, 48, 40, 0.14);
  --accent: var(--color-terracotta);
  --accent-hover: #8f4f38;
  --accent-soft: rgba(168, 95, 69, 0.12);
  --accent-dark: var(--color-cacao);

  /* Editorial shapes */
  --radius-sm: 14px;
  --radius: 24px;
  --radius-lg: 36px;
  --radius-xl: 48px;

  /* Shadows */
  --shadow-soft: 0 18px 50px rgba(63, 48, 40, 0.08);
  --shadow-card: 0 14px 35px rgba(63, 48, 40, 0.09);
  --shadow-hover: 0 24px 70px rgba(63, 48, 40, 0.14);

  /* Layout */
  --container: 1180px;
  --article-width: 760px;
  --wide-width: 1040px;
}