:root {
--orange-050: #fdf3e9;
--orange-100: #fadfc6;
--orange-200: #f4c396;
--orange-300: #eda666;
--orange-500: #e48233;
--orange-600: #c66a22;
--orange-700: #9c521a;
--orange-800: #653411;
--leaf-050: #f4f9ea;
--leaf-100: #e5efce;
--leaf-200: #cce2a4;
--leaf-300: #adcf76;
--leaf-500: #89b848;
--leaf-600: #6f9a37;
--leaf-700: #55772a;
--leaf-800: #3d5620;
--sky-050: #eef4fb;
--sky-100: #d3e3f3;
--sky-200: #a8c9e7;
--sky-300: #79aad8;
--sky-500: #3d83c3;
--sky-600: #2f68a0;
--sky-700: #234f79;
--pine-700: #2c4419;
--pine-800: #223513;
--pine-900: #1a290f;
--pine-950: #101a09;
--canvas-100: #fbf3e4;
--canvas-200: #f7e8cf;
--canvas-300: #f0dcb4;
--canvas-400: #e0c48f;
--bone-050: #faf8f3;
--bone-100: #f4f1e9;
--bone-200: #e8e4d9;
--bone-300: #d6d1c3;
--bone-400: #b5afa0;
--stone-500: #8a8478;
--stone-600: #6b665c;
--stone-700: #454139;
--ink-900: #1c1b1c;
--ink-950: #111011;
--surface-page: var(--bone-100);
--surface-card: var(--bone-050);
--surface-raised: #ffffff;
--surface-sunken: var(--bone-200);
--surface-inverse: var(--pine-900);
--surface-field: var(--pine-800);
--surface-highlight: var(--leaf-500);
--surface-warm: var(--canvas-200);
--surface-cool: var(--sky-100);
--surface-overlay: rgba(26, 41, 15, 0.62);
--surface-scrim: linear-gradient(to top, rgba(16, 26, 9, 0.9) 0%, rgba(16, 26, 9, 0.45) 45%, rgba(16, 26, 9, 0) 100%);
--text-heading: var(--ink-900);
--text-body: var(--stone-700);
--text-muted: var(--stone-600);
--text-faint: var(--stone-500);
--text-inverse: var(--bone-100);
--text-inverse-strong: #ffffff;
--text-on-field: var(--bone-050);
--text-accent: var(--orange-700);
--text-link: var(--orange-700);
--text-link-hover: var(--orange-800);
--border-hairline: rgba(28, 27, 28, 0.14);
--border-subtle: var(--bone-300);
--border-strong: var(--ink-900);
--border-inverse: rgba(244, 241, 233, 0.24);
--border-accent: var(--orange-500);
--border-width-hair: 1px;
--border-width-stamp: 2px;
--action-primary-bg: var(--orange-500);
--action-primary-bg-hover: var(--orange-600);
--action-primary-bg-active: var(--orange-700);
--action-primary-fg: var(--ink-900);
--action-secondary-bg: var(--pine-900);
--action-secondary-bg-hover: var(--pine-800);
--action-secondary-fg: var(--bone-050);
--action-highlight-bg: var(--leaf-500);
--action-highlight-bg-hover: var(--leaf-600);
--action-highlight-fg: var(--ink-900);
--action-ghost-fg: var(--pine-900);
--action-ghost-bg-hover: rgba(26, 41, 15, 0.07);
--action-disabled-bg: var(--bone-300);
--action-disabled-fg: var(--stone-500);
--focus-ring: var(--orange-600);
--focus-ring-inverse: var(--leaf-300);
--status-success-fg: var(--leaf-700);
--status-success-bg: var(--leaf-050);
--status-warning-fg: var(--orange-700);
--status-warning-bg: var(--orange-050);
--status-danger-fg: #a8391a;
--status-danger-bg: #fdece7;
--status-info-fg: var(--sky-600);
--status-info-bg: var(--sky-050);
}
:root {
--font-display: "Bitter", Georgia, "Times New Roman", serif;
--font-sans: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
--font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
--text-2xs: 11px;
--text-xs: 13px;
--text-sm: 15px;
--text-base: 17px;
--text-md: 19px;
--text-lg: 22px;
--text-xl: 27px;
--text-2xl: 34px;
--text-3xl: 44px;
--text-4xl: 58px;
--text-5xl: 76px;
--text-6xl: 96px;
--text-display: clamp(38px, 6.4vw, 76px);
--leading-tight: 1.02;
--leading-snug: 1.1;
--leading-heading: 1.18;
--leading-body: 1.6;
--leading-loose: 1.75;
--tracking-display: -0.015em;
--tracking-tight: -0.01em;
--tracking-normal: 0;
--tracking-wide: 0.04em;
--tracking-wider: 0.1em;
--tracking-widest: 0.16em;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-black: 800;
--type-hero-size: var(--text-display);
--type-h1-size: var(--text-3xl);
--type-h2-size: var(--text-2xl);
--type-h3-size: var(--text-lg);
--type-body-family: var(--font-sans);
--type-body-size: var(--text-base);
--type-caption-size: var(--text-sm);
--type-eyebrow-family: var(--font-sans);
--type-eyebrow-size: var(--text-xs);
--type-eyebrow-tracking: var(--tracking-widest);
--type-label-family: var(--font-sans);
}
:root {
--space-0: 0px;
--space-1: 2px;
--space-2: 4px;
--space-3: 8px;
--space-4: 12px;
--space-5: 16px;
--space-6: 20px;
--space-7: 24px;
--space-8: 32px;
--space-9: 40px;
--space-10: 48px;
--space-11: 64px;
--space-12: 80px;
--space-13: 96px;
--space-14: 128px;
--space-15: 160px;
--gutter-inline: var(--space-8);
--gutter-inline-lg: var(--space-11);
--section-y: var(--space-13);
--section-y-sm: var(--space-11);
--stack-tight: var(--space-3);
--stack: var(--space-5);
--stack-loose: var(--space-8);
--measure: 62ch;
--measure-narrow: 44ch;
--content-max: 1240px;
--content-max-narrow: 880px;
--control-h-sm: 32px;
--control-h-md: 42px;
--control-h-lg: 52px;
--touch-min: 44px;
}
:root {
--radius-none: 0px;
--radius-xs: 4px;
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 20px;
--radius-xl: 28px;
--radius-2xl: 36px;
--radius-pill: 999px;
--radius-card: var(--radius-lg);
--radius-photo: var(--radius-xl);
--radius-control: var(--radius-pill);
--radius-field: var(--radius-sm);
}
:root {
--shadow-none: none;
--shadow-hard-sm: 2px 2px 0 var(--ink-950);
--shadow-hard: 4px 4px 0 var(--ink-950);
--shadow-soft-sm: 0 2px 6px -2px rgba(17, 16, 17, 0.18);
--shadow-soft: 0 10px 26px -14px rgba(17, 16, 17, 0.42);
--shadow-soft-lg: 0 26px 60px -28px rgba(17, 16, 17, 0.5);
--shadow-inset-hair: inset 0 0 0 1px var(--border-hairline);
--shadow-focus: 0 0 0 3px rgba(228, 130, 51, 0.4);
--shadow-focus-inverse: 0 0 0 3px rgba(173, 207, 118, 0.45);
}
:root {
--duration-instant: 90ms;
--duration-fast: 140ms;
--duration-base: 220ms;
--duration-slow: 380ms;
--duration-marquee: 26s;
--ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in: cubic-bezier(0.5, 0, 0.9, 0.3);
--ease-linear: linear;
--lift-hover: -1px;
--press-shift: 1px;
--transition-control: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
:root {
--grain-url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.5'/></svg>");
--grain-opacity: 0.16;
--grain-opacity-strong: 0.26;
--duotone-warm: linear-gradient(rgba(228, 130, 51, 0.22), rgba(26, 41, 15, 0.55));
--duotone-cool: linear-gradient(rgba(61, 131, 195, 0.18), rgba(26, 41, 15, 0.62));
}
:root { color-scheme: light; }
body {
margin: 0;
background: var(--surface-page);
color: var(--text-body);
font-family: var(--font-sans);
font-size: var(--type-body-size);
line-height: var(--leading-body);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
margin: 0;
font-family: var(--font-display);
font-weight: var(--weight-bold);
color: var(--text-heading);
line-height: var(--leading-heading);
letter-spacing: var(--tracking-tight);
text-wrap: balance;
}
h1 { font-size: var(--type-h1-size); line-height: var(--leading-snug); }
h2 { font-size: var(--type-h2-size); }
h3 { font-size: var(--type-h3-size); }
p { margin: 0 0 var(--space-5); max-width: var(--measure); text-wrap: pretty; }
a { color: var(--text-link); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--duration-fast) var(--ease-standard); }
a:hover { color: var(--text-link-hover); }
::selection { background: var(--leaf-300); color: var(--ink-900); }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
img { max-width: 100%; display: block; }
hr { border: 0; border-top: 1px solid var(--border-hairline); margin: var(--space-8) 0; }
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}