/* ============================================
   Brand — michaeldariuseastwood.com
   Eden Design DNA · Warm-paper canon · Gold authority seal
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,800;1,9..144,400;1,9..144,500&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Warm-paper palette (Eden Design DNA §2) */
  --paper: hsl(42, 25%, 97%);
  --paper-warm: hsl(40, 28%, 95%);
  --paper-surface: hsl(42, 18%, 92%);
  --paper-raised: hsl(42, 22%, 98%);
  --paper-card: #ffffff;
  --bg-primary: #fafaf8;
  --bg-surface: #f5f4f0;
  --bg-accent: #111111;
  --bg-accent-soft: #242424;
  --ink: hsl(200, 18%, 15%);
  --ink-sec: hsl(200, 10%, 38%);
  --ink-dim: hsl(200, 8%, 41%); /* 22 Sep 2026 a11y: clears 4.5:1 as text on every paper surface (was 46%: 3.83 to 4.52) */
  --text-primary: var(--ink);
  --text-secondary: var(--ink-sec);
  --text-tertiary: var(--ink-dim);
  --text-inverse: #fafaf8;
  --hairline: #e7e5e0;
  --border: hsl(38, 18%, 84%);
  --border-strong: hsl(38, 16%, 76%);

  /* Gold authority seal */
  --gold: hsl(38, 65%, 42%);
  --gold-text: hsl(38, 72%, 31%); /* 28 Aug 2026 a11y: gold AS TEXT clears 4.5:1 on the paper; borders and accents keep --gold */
  --gold-hover: hsl(38, 70%, 48%);
  --gold-btn: hsl(38, 70%, 34%); /* 22 Sep 2026 a11y: fill behind white button text, 5.00:1 (--gold gave 3.59) */
  --gold-btn-hover: hsl(38, 72%, 29%); /* hover deepens, 6.33:1 (--gold-hover gave 2.70) */
  --gold-light: hsl(38, 75%, 55%);
  --gold-bg: hsla(38, 62%, 48%, 0.10);
  --gold-border: hsla(38, 55%, 50%, 0.22);
  --accent-warm: var(--gold);
  --accent-warm-hover: var(--gold-hover);

  /* Green (trust/verification) */
  --green: hsl(152, 45%, 36%);
  --green-bg: hsla(152, 45%, 36%, 0.08);
  --green-text: hsl(152, 45%, 31%); /* 22 Sep 2026 a11y: green AS TEXT, 4.86:1 or better on every paper surface */

  --accent-link: hsl(200, 50%, 35%);
  --accent-link-hover: hsl(200, 55%, 25%);

  /* Typography (Eden Design DNA §4) */
  --font-display: 'Fraunces', 'Georgia', 'Times New Roman', serif;
  --font-body: 'Manrope', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', 'Menlo', monospace;

  /* Fine-grained type ramp (DNA base = 14px) */
  --text-2xs: 0.525rem;
  --text-xs: 0.625rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-md: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.1875rem;
  --text-2xl: 1.375rem;
  --text-3xl: 1.625rem;
  --text-4xl: 2rem;
  --text-5xl: 2.5rem;
  --text-6xl: 3rem;
  --text-7xl: 4rem;

  /* Spacing */
  --space-2xs: 0.125rem;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 0.75rem;
  --space-lg: 1rem;
  --space-xl: 1.5rem;
  --space-2xl: 2rem;
  --space-3xl: 3rem;
  --space-4xl: 5rem;
  --space-5xl: 8rem;
  --space-6xl: 12rem;

  /* Depth — warm-tinted, never black (DNA §3) */
  --shadow-sm: 0 1px 3px rgba(28, 28, 25, 0.06);
  --shadow-md: 0 4px 14px rgba(28, 28, 25, 0.08);
  --shadow-lg: 0 14px 36px rgba(28, 28, 25, 0.16);
  --shadow-xl: 0 24px 60px rgba(28, 28, 25, 0.22);
  --shadow-gold: 0 8px 32px hsla(38, 65%, 42%, 0.18);
  --shadow-card-hover: 0 8px 30px rgba(28, 28, 25, 0.12), 0 2px 8px rgba(28, 28, 25, 0.06);

  /* Radius (DNA §3: 7 / 10 / 14) */
  --radius-sm: 7px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;

  /* Layout */
  --max-width: 1120px;
  --nav-height: 64px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration: 200ms;
  --duration-slow: 400ms;
  --duration-reveal: 600ms;
}

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  overflow-x: clip;
  background: var(--paper-warm);
}

body {
  font-family: var(--font-body);
  overflow-x: clip;
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--ink);
  background:
    radial-gradient(ellipse 50% 80% at 20% 0%, hsla(38, 45%, 55%, 0.06), transparent 60%),
    radial-gradient(ellipse 40% 60% at 80% 10%, hsla(200, 40%, 50%, 0.04), transparent 50%),
    radial-gradient(ellipse 60% 50% at 50% 100%, hsla(38, 30%, 50%, 0.05), transparent 50%),
    var(--paper-warm);
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-link); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); }
/* 28 Aug 2026 a11y (WCAG 1.4.1): colour is never the sole link indicator in running
   prose; a thin offset underline carries it. Nav, buttons, cards and footers keep
   their unlined chrome (their affordance is positional). */
main p a, main li a, main dd a, main blockquote a, article p a, article li a { text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: 2px; text-decoration-color: color-mix(in srgb, currentColor 55%, transparent); }
a:hover { color: var(--accent-link-hover); }

/* ---- Typography ---- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
}

h1 { font-size: var(--text-6xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
p { margin-bottom: var(--space-md); }
p:last-child { margin-bottom: 0; }

/* -- Small-uppercase label (DNA signature §4 move #1) -- */
.label,
.section-label,
.engine-kicker,
.hero-void__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: var(--space-sm);
}

.section-label {
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  color: var(--gold-text);
  margin-bottom: var(--space-lg);
}

/* -- Stat numbers -- */
.stat-number {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}

.stat-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--ink-sec);
  letter-spacing: 0.02em;
}

.section-title {
  font-size: var(--text-4xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-lg);
}

.section-desc {
  font-size: var(--text-md);
  color: var(--ink-sec);
  line-height: 1.7;
  max-width: 640px;
  margin-bottom: var(--space-3xl);
}

/* -- Focus -- */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ---- Grain texture overlay ---- */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
}

/* ---- Scroll reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-reveal) var(--ease-out), transform var(--duration-reveal) var(--ease-out);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 80ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 160ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 240ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 320ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: 400ms; opacity: 1; transform: translateY(0); }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }
  .reveal, .reveal.visible,
  .reveal-stagger > *, .reveal-stagger.visible > * {
    opacity: 1;
    transform: none;
  }
}

/* ---- Mobile ---- */
@media (max-width: 720px) {
  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }
  :root { --nav-height: 56px; }
  body::after { display: none; }
}