/* Design tokens */

:root {
	/* Type */
	--font-noto:   "Noto Sans", "Segoe UI", system-ui, sans-serif;
	--font-nunito: "Nunito Sans", "Segoe UI", system-ui, sans-serif;

	/* Active sans family */
	--font-sans:   var(--font-noto);   /* var(--font-noto) | var(--font-nunito) */

	--font-display: var(--font-sans);
	--font-body:    var(--font-sans);

	/* Keep a serif fallback because Cormorant supplies the only italic face. */
	--font-slogan:  "Cormorant", Georgia, "Times New Roman", serif;

	/* Type scale */
	--fs-micro:   12px;
	--fs-eyebrow: 12px;
	--fs-meta:    13px;
	--fs-body:    16px;
	--fs-copy:    clamp(16px, 2.2vw, 17px);
	--fs-lead:    clamp(18px, 2.6vw, 21px);
	--fs-page-title:    clamp(42px, calc(23.5px + 4.75vw), 72px);
	--fs-long-title:    clamp(32px, calc(19.7px + 3.15vw), 52px);
	--fs-landing-title: clamp(48px, 12vw, 92px);

	/* Italic voice (Cormorant). Comparable to the scale above — the face carries size-adjust. */
	--fs-slogan-xs: 13px;
	--fs-slogan-sm: clamp(14px, 1.6vw, 15.5px);
	--fs-slogan:    clamp(16.5px, 1.9vw, 18px);
	--fs-slogan-lg: clamp(18.5px, 2.4vw, 21px);
	--fs-slogan-xl: clamp(19px, 3vw, 26px);
	--fs-hero-tagline: var(--fs-slogan);

	/* Palette */
	--ink:        #14100b;
	--ink-2:      #0a0807;
	--cream:      #fcfaf6;
	--cream-flat: #f4ecd8;
	--cream-text: #ead7a7;
	--gold:        #a87e30;
	--gold-bright: #d4a843;
	--gold-light:  #f1cb6a;
	--burgundy:    #722121;
	--bronze:    #b5894f;
	--bronze-lt: #d8b074;
	--bronze-dk: #8a6233;
	--blackbrown:      #241813;
	--blackbrown-foot: #241810;
	--needle: #5c5547;

	/* Text colors */
	--ink-soft:  #4a4236;
	--ink-mute:  #6e5e44;
	--ink-faint: #6e6450; /* AA contrast for small labels. */
	--gold-deep: #8a6a24;

	/* Cormorant is lighter than the sans at any size, so the heading accent runs darker than --burgundy. */
	--accent-heading: #571a1a;

	/* Backgrounds */
	--egg-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E");
	--cream-ground: var(--egg-grain), linear-gradient(90deg, #efe7d3 0%, #f8f3ea 50%, #ece2cd 100%);
	--cream-ground-alt: var(--egg-grain), linear-gradient(90deg, #e7ddc6 0%, #f1e9d7 50%, #e3d8c0 100%);

	/*
	 * Banded sections use the wash, not the solid alt: over --cream-ground it composites to the
	 * same tone, but the leaf field keeps showing through instead of being painted out. It carries
	 * no grain — the ground underneath already supplies it. Solid --cream-ground-alt stays for
	 * things that must actually mask what is behind them.
	 */
	--cream-wash-alt: linear-gradient(90deg, rgba(203, 186, 152, 0.15) 0%, rgba(216, 198, 148, 0.15) 50%, rgba(195, 181, 146, 0.15) 100%);
	--surface-paper: rgba(252, 250, 246, 0.78);
	--surface-paper-solid: #faf5e9;
	--line: rgba(20, 16, 11, 0.14);
	--line-gold: rgba(168, 126, 48, 0.32);

	/* Spacing */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 80px;
	--section-y: clamp(72px, 9vw, 120px);
	--section-y-tight: clamp(48px, 6vw, 80px);
	--section-head-gap: clamp(32px, 5vw, 56px);
	--measure: 62ch;

	/* Layout */
	--rail: 20px;
	--maxw: 1280px;
	--col: 1060px; /* Narrower column shared by the figure rails, card grids and plaques. */
	--nav-height: 62px;

	/* Stacking */
	--z-leaf-back: 0;
	--z-content:   1;
	--z-leaf-fore: 20;
	--z-nav:       60;
	--z-menu:      70;

	/* Motion */
	--ease-out: cubic-bezier(0.2, 0.7, 0, 1);
	--shadow-card: 0 20px 56px rgba(36, 24, 19, 0.1);

	/* Cards */
	--card-bg: rgba(252, 250, 246, 0.72);
	--card-line: rgba(168, 126, 48, 0.16);
	--card-radius: 16px;
	--card-shadow: 0 6px 22px rgba(20, 16, 11, 0.05);
	--card-shadow-hover: 0 14px 34px rgba(20, 16, 11, 0.1);
}

@media (min-width: 681px)  { :root { --rail: 32px; } }
@media (min-width: 1101px) { :root { --rail: 56px; } }
@media (min-width: 1600px) { :root { --rail: clamp(96px, 7vw, 128px); } }