/* ── Crown Alchemy Design System v2 ── */
:root {
  /* ── CA Primary Palette: ground / blood / metal / ash / verdigris ── */
  --ca-ground-deep: #0D0908;
  --ca-ground-surface: #13100E;
  --ca-ground-raised: #1A1512;
  --ca-blood: #5C1A1B;
  --ca-blood-active: #7A2324;
  --ca-blood-muted: #3D1112;
  --ca-metal: #8A7140;
  --ca-metal-edge: #A68B52;
  --ca-metal-deep: #5C4A28;
  --ca-ash-primary: #D6CFC4;
  --ca-ash-secondary: #9A938A;
  --ca-ash-muted: #6B6560;
  --ca-verdigris: #6B8A7E;
  --ca-verdigris-muted: #5A746A;
  --ca-lava-deep: #4A0E05;
  --ca-lava-core: #8B2500;
  --ca-lava-glow: #C44A1A;
  --ca-lava-tip: #E8722A;
  --ca-lava-gradient: radial-gradient(ellipse at center, var(--ca-lava-tip) 0%, var(--ca-lava-glow) 25%, var(--ca-lava-core) 55%, var(--ca-lava-deep) 100%);
  --ca-lava-edge: linear-gradient(to right, var(--ca-lava-deep), var(--ca-lava-core), var(--ca-lava-glow));
  --ca-patina-gradient: linear-gradient(90deg, var(--ca-metal), var(--signal));

  /* ── Transitional aliases for existing templates ── */
  --ca-obsidian: var(--ca-ground-deep);
  --ca-bone: var(--ca-ash-primary);
  --ca-warm-ink: var(--ca-ground-deep);
  --ca-graphite: var(--ca-ground-surface);
  --ca-iron: var(--ca-ash-muted);
  --ca-root-umber: var(--ca-ground-raised);
  --ca-mineral-earth: #5C4A28;
  --ca-oxblood: var(--ca-blood);
  --ca-blood-red: var(--ca-blood-active);
  --ca-black-red: var(--ca-blood-muted);
  --ca-silver-sage: var(--ca-verdigris-muted);
  --ca-signal: var(--ca-verdigris);

  /* ── Public aliases used by existing templates ── */
  --obsidian: var(--ca-obsidian);
  --bone: var(--ca-bone);
  --iron: var(--ca-iron);
  --signal: var(--ca-signal);

  /* ── Text system ── */
  --text-strong: var(--ca-ash-primary);
  --text-main: var(--ca-ash-secondary);
  --text-soft: var(--ca-ash-muted);
  /* ── Material / alpha system ── */
  --ca-glass-deep: color-mix(in srgb, var(--ca-ground-deep) 76%, transparent);
  --ca-glass-deeper: color-mix(in srgb, var(--ca-ground-deep) 95%, transparent);
  --ca-ash-02: color-mix(in srgb, var(--ca-ash-primary) 2%, transparent);
  --ca-ash-04: color-mix(in srgb, var(--ca-ash-primary) 4%, transparent);
  --ca-ash-06: color-mix(in srgb, var(--ca-ash-primary) 6%, transparent);
  --ca-ash-08: color-mix(in srgb, var(--ca-ash-primary) 8%, transparent);
  --ca-ash-12: color-mix(in srgb, var(--ca-ash-primary) 12%, transparent);
  --ca-ash-18: color-mix(in srgb, var(--ca-ash-primary) 18%, transparent);
  --ca-ash-26: color-mix(in srgb, var(--ca-ash-primary) 26%, transparent);
  --ca-blood-08: color-mix(in srgb, var(--ca-blood) 8%, transparent);
  --ca-blood-16: color-mix(in srgb, var(--ca-blood) 16%, transparent);
  --ca-blood-42: color-mix(in srgb, var(--ca-blood) 42%, transparent);
  --ca-verdigris-10: color-mix(in srgb, var(--ca-verdigris) 10%, transparent);
  --ca-verdigris-34: color-mix(in srgb, var(--ca-verdigris) 34%, transparent);
  --ca-metal-34: color-mix(in srgb, var(--ca-metal-edge) 34%, transparent);
  --landing-deep-glass: var(--ca-glass-deep);
  --landing-deeper-glass: var(--ca-glass-deeper);
  --landing-ash-02: var(--ca-ash-02);
  --landing-ash-04: var(--ca-ash-04);
  --landing-ash-06: var(--ca-ash-06);
  --landing-ash-08: var(--ca-ash-08);
  --landing-ash-12: var(--ca-ash-12);
  --landing-ash-18: var(--ca-ash-18);
  --landing-ash-26: var(--ca-ash-26);
  --landing-blood-08: var(--ca-blood-08);
  --landing-blood-16: var(--ca-blood-16);
  --landing-blood-42: var(--ca-blood-42);
  --landing-verdigris-10: var(--ca-verdigris-10);
  --landing-verdigris-34: var(--ca-verdigris-34);
  --landing-metal-34: var(--ca-metal-34);

  /* ── Border / Rule system ── */
  --rule: color-mix(in srgb, var(--ca-metal-edge) 18%, transparent);
  --rule-strong: color-mix(in srgb, var(--ca-metal-edge) 32%, transparent);

  /* ── Eyebrow system ── */
  --ca-eyebrow-gradient: var(--ca-patina-gradient);
  --ca-eyebrow-line: var(--ca-lava-edge);
  --ca-eyebrow-num-gradient: var(--ca-lava-edge);
  --ca-eyebrow-font-size: .72rem;
  --ca-eyebrow-font-weight: 600;
  --ca-eyebrow-letter-spacing: .22em;
  --ca-eyebrow-num-font-size: .68rem;
  --ca-eyebrow-num-letter-spacing: .18em;

  /* ── Font stacks ── */
  --serif: "IM Fell English", Georgia, serif;
  --brand: "Marcellus", Georgia, serif;
  --body-f: "DM Sans", system-ui, -apple-system, sans-serif;
  --body: var(--body-f);
  --reading: "Source Serif 4", Georgia, serif;
  --sans: "DM Sans", system-ui, -apple-system, sans-serif;
  --mono: "DM Sans", system-ui, -apple-system, sans-serif;

  /* ── Layout ── */
  --nav-h: 64px;
  --gut: clamp(1.25rem, 4vw, 4rem);
  --ease: cubic-bezier(0.7, 0, 0.2, 1);
  --header-brand-font-size: 20px;
  --header-brand-mobile-font-size: 1.34rem;
  --hero-title-font: "IM Fell English", Georgia, serif;
  --hero-title-size-config: clamp(3rem, 6.25vw, 6.45rem);
  --hero-title-mobile-size-config: clamp(2.6rem, 12vw, 4.4rem);
  --hero-title-size-cap: clamp(3rem, 6.25vw, 6.45rem);
  --hero-title-mobile-size-cap: clamp(2.6rem, 12vw, 4.4rem);
  --hero-title-size: min(var(--hero-title-size-config), var(--hero-title-size-cap));
  --hero-title-mobile-size: min(var(--hero-title-mobile-size-config), var(--hero-title-mobile-size-cap));
  --hero-title-line-height: .94;
  --hero-title-inline-size: 95%;
  --hero-shell-max-width: var(--landing-max);
  --hero-shell-padding-inline: 0px;
  --hero-shell-min-height: min(92svh, 760px);
  --hero-shell-padding-top: clamp(5rem, 7.2vw, 7.4rem);
  --hero-shell-padding-bottom: var(--space-phi-1);
  --hero-shell-row-gap: var(--space-phi-1);
  --ca-button-active-transform: none;
  --ca-button-border: color-mix(in srgb, var(--ca-metal-edge) 30%, var(--ca-obsidian) 70%);
  --ca-button-border-active: color-mix(in srgb, var(--ca-metal-edge) 46%, var(--ca-obsidian) 54%);
  --ca-button-top-line: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ca-metal-edge) 42%, transparent), transparent);
  --ca-button-ghost-top-line: linear-gradient(90deg, transparent, rgba(244,239,230,.52), transparent);
  --ca-button-top-line-active: linear-gradient(90deg, transparent, var(--ca-metal), var(--signal), transparent);
  --ca-button-cta-bg: var(--ca-blood);
  --ca-button-cta-bg-active: var(--ca-blood-active);
  --ca-button-cta-color: var(--ca-bone);
  --ca-button-cta-shadow: inset 0 1px 0 rgba(244,239,230,.12), inset 0 -1px 0 rgba(8,10,10,.42), 0 18px 42px -28px rgba(0,0,0,.72);
  --ca-button-cta-shadow-active: inset 0 1px 0 rgba(244,239,230,.16), inset 0 -1px 0 rgba(8,10,10,.34), inset 0 0 24px color-mix(in srgb, var(--ca-lava-core) 28%, transparent), 0 18px 42px -24px rgba(0,0,0,.72), 0 0 20px color-mix(in srgb, var(--ca-lava-core) 48%, transparent), 0 0 40px color-mix(in srgb, var(--ca-lava-deep) 62%, transparent);
  --ca-button-ghost-bg: linear-gradient(180deg, rgba(244,239,230,.038), rgba(244,239,230,.012));
  --ca-button-ghost-bg-active: linear-gradient(180deg, rgba(244,239,230,.11), rgba(244,239,230,.028));
  --ca-button-ghost-color: var(--ca-metal-edge);
  --ca-button-ghost-color-active: var(--ca-bone);
  --ca-button-ghost-shadow: inset 0 1px 0 rgba(244,239,230,.10), 0 16px 34px -28px rgba(0,0,0,.82);
  --ca-button-ghost-shadow-active: inset 0 1px 0 rgba(244,239,230,.16), inset 0 -1px 0 rgba(0,0,0,.28), 0 16px 34px -24px rgba(0,0,0,.82);
  --ca-progress-lava-bg: var(--ca-lava-edge);
  --ca-progress-lava-height: 1px;
  --ca-progress-patina-bg: var(--ca-patina-gradient);
  --ca-progress-patina-height: 2px;
  --ca-live-nav-color: var(--text-soft);
  --ca-live-nav-index-active-color: var(--signal);
  --ca-live-nav-label-color: var(--text-soft);
  --ca-live-nav-label-active-color: var(--text-soft);
  --rail: clamp(2.9rem, 3.8vw, 3.7rem);
  --phi: 1.618;
  --phi-inv: .618;
  --phi-rem: .382;
  --space-phi-1: clamp(1rem, 2vw, 1.618rem);
  --space-phi-2: clamp(1.618rem, 3vw, 2.618rem);
  --space-phi-3: clamp(2.618rem, 5vw, 4.236rem);
  --space-phi-4: clamp(4.236rem, 8vw, 6.854rem);
  --section-phi: clamp(5.236rem, 9vw, 8.472rem);
  --shadow-soft: 0 28px 70px -54px rgba(0,0,0,0.72);
  --ca-content-max: 1100px;
  --ca-content-wide: 1180px;
  --ca-content-narrow: 61.8rem;
  --ca-content-prose: 82ch;
  --landing-max: var(--ca-content-max);
  --landing-wide: var(--ca-content-wide);
  --footer-grid: 1.4fr 1fr 1fr 1fr;
  --site-social-latest-mobile-min-height: clamp(16rem, 58vw, 22rem);

  /* ── Background / watermark system ── */
  --ca-bg-radial: radial-gradient(ellipse at 50% 0%, rgba(92,26,27,.20) 0%, rgba(92,26,27,.10) 28%, rgba(13,9,8,.22) 52%, rgba(13,9,8,.72) 100%);
  --ca-bg-vertical: linear-gradient(180deg, color-mix(in srgb, #5C1A1B 93%, transparent) 5%, rgba(58,42,31,.95) 30%, rgba(8,10,10,.97) 72%);
  --ca-bg-horizontal: linear-gradient(90deg, rgba(8,10,10,.9), rgba(8,10,10,.3) 50%, rgba(8,10,10,.9));
  --ca-watermark-color: rgba(244,239,230,0.014);
  --ca-watermark-color-soft: rgba(244,239,230,0.012);
  --ca-watermark-size: clamp(7rem,18vw,18rem);
  --ca-watermark-line-height: 1;
  --ca-watermark-bottom: .08em;
  --ca-watermark-right: var(--gut);
  --ca-timeline-lava-gradient: linear-gradient(180deg, transparent 0%, var(--ca-lava-deep) 18%, var(--ca-lava-core) 42%, var(--ca-lava-glow) 56%, var(--ca-lava-core) 68%, var(--ca-lava-deep) 84%, transparent 100%);
  --ca-timeline-lava-size: 100% 180%;
  --ca-timeline-lava-shadow: 0 0 10px color-mix(in srgb, var(--ca-lava-core) 28%, transparent);

  /* ── Reusable component skin from Landing ── */
  --ca-timeline-card-padding: var(--space-phi-2);
  --ca-timeline-card-gap: var(--space-phi-1);
  --ca-timeline-card-bg: linear-gradient(180deg, rgba(244,239,230,.036), rgba(244,239,230,.01));
  --ca-timeline-card-bg-hover: linear-gradient(180deg, rgba(244,239,230,.06), rgba(244,239,230,.02));
  --ca-timeline-card-edge: linear-gradient(90deg, transparent, var(--ca-metal-deep), var(--ca-metal-edge), var(--signal), transparent);
  --ca-timeline-card-border-hover: color-mix(in srgb, var(--ca-metal-edge) 42%, transparent);
  --ca-timeline-meta-color: rgba(244,239,230,0.055);
  --ca-timeline-card-title-size: 1.7rem;
  --ca-timeline-card-title-line-height: 1.05;
  --ca-timeline-card-body-size: 1.02rem;
  --ca-timeline-card-body-line-height: 1.6;
  --ca-timeline-card-body-opacity: .82;
  --ca-timeline-dot-bg: linear-gradient(135deg, color-mix(in srgb, var(--ca-metal) 44%, var(--ca-obsidian) 56%), color-mix(in srgb, var(--signal) 34%, var(--ca-obsidian) 66%));
  --ca-timeline-dot-bg-hover: linear-gradient(135deg, var(--ca-metal), var(--signal));
  --ca-timeline-dot-border: color-mix(in srgb, var(--ca-metal-edge) 58%, var(--ca-obsidian) 42%);
  --ca-timeline-dot-border-hover: color-mix(in srgb, var(--ca-metal-edge) 62%, var(--ca-obsidian) 38%);
  --ca-timeline-dot-shadow: 0 0 0 6px color-mix(in srgb, var(--signal) 12%, transparent);
  --ca-timeline-dot-shadow-hover: 0 0 0 6px color-mix(in srgb, var(--signal) 18%, transparent);
  --ca-filter-section-bg: var(--ca-bone);
  --ca-filter-section-text: var(--ca-warm-ink);
  --ca-filter-section-border: color-mix(in srgb, var(--ca-ground-deep) 10%, transparent);
  --ca-filter-section-mark-color: color-mix(in srgb, var(--ca-ground-deep) 4%, transparent);
  --ca-filter-panel-padding: var(--space-phi-2);
  --ca-filter-panel-gap: var(--space-phi-1);
  --ca-filter-panel-hover-shadow: 0 20px 60px -28px rgba(0,0,0,0.52);
  --ca-filter-yes-bg: rgba(111,159,146,.12);
  --ca-filter-yes-border: color-mix(in srgb, var(--signal) 35%, transparent);
  --ca-filter-yes-border-left: var(--signal);
  --ca-filter-yes-text: var(--ca-warm-ink);
  --ca-filter-yes-rule: rgba(8,10,10,.10);
  --ca-filter-no-bg: linear-gradient(148deg, color-mix(in srgb, var(--ca-blood) 30%, transparent), color-mix(in srgb, var(--ca-blood-muted) 96%, transparent) 48%), var(--ca-blood-muted);
  --ca-filter-no-border: color-mix(in srgb, var(--ca-lava-core) 42%, transparent);
  --ca-filter-no-border-left: var(--ca-lava-core);
  --ca-filter-no-text: var(--ca-bone);
  --ca-filter-no-rule: color-mix(in srgb, var(--ca-ash-primary) 18%, transparent);
  --ca-filter-no-marker: var(--ca-lava-tip);
  --ca-filter-no-marker-shadow: 0 0 10px color-mix(in srgb, var(--ca-lava-core) 38%, transparent);
  --ca-stat-grid-border: var(--rule);
  --ca-stat-value-font-size: clamp(1.3rem,2.2vw,2rem);
  --ca-stat-label-font-size: .58rem;
  --ca-stat-label-letter-spacing: .16em;
  --ca-stat-card-padding: clamp(1rem,2vw,1.5rem) clamp(1.25rem,2.5vw,2rem);

  /* ── Page background: obsidian base, warm root-umber crown ── */
  --page-bg-stack:
    var(--ca-bg-radial),
    var(--ca-bg-vertical),
    var(--ca-bg-horizontal),
    var(--ca-ground-deep);
}

@keyframes caLavaLineFlow {
  0% { background-position: 50% 0%; opacity: .58; box-shadow: 0 0 7px color-mix(in srgb, var(--ca-lava-core) 20%, transparent); }
  50% { opacity: .9; box-shadow: 0 0 13px color-mix(in srgb, var(--ca-lava-glow) 34%, transparent); }
  100% { background-position: 50% 100%; opacity: .68; box-shadow: 0 0 9px color-mix(in srgb, var(--ca-lava-core) 24%, transparent); }
}

.ca-crown { color: var(--ca-metal); font-style: normal }
.ca-alch { color: var(--text-strong); font-style: normal }
.ca-os { color: var(--text-strong); font-style: normal }
.ca-athanor { color: var(--text-strong); font-style: normal; text-shadow: 0 0 20px var(--ca-lava-core), 0 0 40px var(--ca-lava-deep) }
.fmt-italic { color: inherit; font-style: italic }
.fmt-patina {
  background: var(--ca-patina-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: normal;
}
.fmt-ash-primary { color: var(--ca-ash-primary); font-style: normal }
.fmt-ash-secondary { color: var(--ca-ash-secondary); font-style: normal }
.fmt-verdigris { color: var(--ca-verdigris); font-style: normal }
.fmt-metal { color: var(--ca-metal); font-style: normal }
.fmt-blood { color: var(--ca-blood); font-style: normal }
.fmt-blood-active { color: var(--ca-blood-active); font-style: normal }
.num { color: var(--ca-verdigris); font-family: var(--sans); font-size: .72em; letter-spacing: .16em; text-transform: uppercase }