@font-face {
    font-family: 'Manrope';
    src: url('../fonts/manrope-variable.ttf') format('truetype');
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
}
:root {
    /* Sampled from the supplied logo; lighter tones support readable UI states. */
    --gi-brand-forest: oklch(33.7374% 0.051843 152.4222);
    --gi-brand-olive: oklch(59.1326% 0.075942 121.8584);
    --gi-brand-paper: oklch(99.3706% 0.005376 95.0976);
    --gi-brand-ink: oklch(28.7253% 0.036538 153.1212);
    --gi-brand-muted: oklch(47.1819% 0.035308 134.6630);
    --gi-brand-forest-hover: oklch(39.3168% 0.054555 147.9010);
    --gi-brand-olive-text: oklch(46.6592% 0.061530 124.8092);
    --gi-brand-wash: oklch(96.3920% 0.011937 111.7563);
    --gi-brand-sage: oklch(94.3512% 0.019986 112.9394);
    --gi-brand-sage-strong: oklch(82.5579% 0.046131 121.1193);
    --gi-brand-accent: oklch(89.9984% 0.038083 118.5772);
    --gi-brand-line: oklch(88.5195% 0.023773 122.7616);

    --gi-ivory-50: var(--gi-brand-paper);
    --gi-ivory-100: var(--gi-brand-wash);
    --gi-moss-900: var(--gi-brand-forest);
    --gi-moss-800: var(--gi-brand-forest-hover);
    --gi-moss-700: var(--gi-brand-olive-text);
    --gi-sage-100: var(--gi-brand-sage);
    --gi-sage-300: var(--gi-brand-sage-strong);
    --gi-lime: var(--gi-brand-accent);
    --gi-clay-600: var(--gi-brand-olive-text);
    --gi-ink: var(--gi-brand-ink);
    --gi-muted: var(--gi-brand-muted);
    --gi-border: var(--gi-brand-line);
    --gi-danger: oklch(43% .16 27);
    --gi-success: var(--gi-brand-forest-hover);
    --gi-focus: var(--gi-brand-olive-text);
    --gi-font-interface: 'Manrope', 'Segoe UI', sans-serif;
    --gi-font-editorial: var(--gi-font-interface);
    --gi-radius-sm: .5rem;
    --gi-radius-md: 1rem;
    --gi-shadow: 0 16px 48px color-mix(in oklch, var(--gi-moss-900) 8%, transparent);
    --gi-shell: min(100% - 4rem, 110rem);
    --gi-content: var(--gi-shell);
    --gi-ease: cubic-bezier(.16, 1, .3, 1);
    --theme-palette-color-1: var(--gi-moss-800);
    --theme-palette-color-2: var(--gi-moss-700);
    --theme-palette-color-3: var(--gi-muted);
    --theme-palette-color-4: var(--gi-ink);
    --theme-palette-color-5: var(--gi-border);
    --theme-palette-color-6: var(--gi-ivory-100);
    --theme-palette-color-7: var(--gi-sage-100);
    --theme-palette-color-8: var(--gi-ivory-50);
    --theme-button-background-initial-color: var(--gi-moss-900);
    --theme-button-background-hover-color: var(--gi-moss-800);
    --theme-button-text-initial-color: var(--gi-ivory-50);
    --theme-button-text-hover-color: var(--gi-ivory-50);
    --theme-font-family: var(--gi-font-interface);
    --theme-text-color: var(--gi-ink);
    --theme-headings-color: var(--gi-moss-900);
    --theme-link-initial-color: var(--gi-moss-800);
    --theme-link-hover-color: var(--gi-moss-700);
}
*, *::before, *::after { box-sizing: border-box; }
body { background: var(--gi-ivory-50); color: var(--gi-ink); font-family: var(--gi-font-interface); font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; }
:where(h1, h2, h3, h4, .entry-title) { color: var(--gi-moss-900); font-family: var(--gi-font-editorial); font-weight: 750; letter-spacing: -.045em; line-height: 1.12; text-wrap: balance; }
a { text-underline-offset: .2em; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--gi-focus) !important; outline-offset: 4px; }
[hidden] { display: none !important; }
::selection { background: var(--gi-lime); color: var(--gi-moss-900); }
.gi-skip-link { background: var(--gi-lime); color: var(--gi-moss-900); left: 1rem; padding: .8rem 1.2rem; position: fixed; top: .5rem; transform: translateY(-200%); z-index: 100010; }
.gi-skip-link:focus { transform: translateY(0); }
.gi-button, button.gi-button, input[type='submit'].gi-button { align-items: center; background: var(--gi-moss-900); border: 1px solid var(--gi-moss-900); border-radius: var(--gi-radius-sm); color: var(--gi-ivory-50); display: inline-flex; font-size: .9375rem; font-weight: 700; gap: 1.25rem; justify-content: center; min-height: 3.25rem; padding: .85rem 1.5rem; text-decoration: none; transition: background-color 180ms var(--gi-ease), transform 180ms var(--gi-ease); }
.gi-button:hover { background: var(--gi-moss-800); border-color: var(--gi-moss-800); color: var(--gi-ivory-50); transform: translateY(-2px); }
.gi-button--secondary { background: transparent; color: var(--gi-moss-900); }
.gi-button--secondary:hover { background: var(--gi-sage-100); color: var(--gi-moss-900); }
.gi-field { background: var(--gi-ivory-50); border: 1px solid var(--gi-border); border-radius: var(--gi-radius-sm); color: var(--gi-ink); min-height: 3.25rem; padding: .8rem 1rem; }
.gi-card { background: var(--gi-ivory-50); border: 1px solid var(--gi-border); border-radius: var(--gi-radius-md); padding: clamp(1.25rem, 3vw, 2rem); }
.gi-notice { background: var(--gi-sage-100); border: 1px solid var(--gi-sage-300); border-radius: var(--gi-radius-sm); padding: 1rem 1.25rem; }
.gi-notice--error { background: oklch(95% .025 27); border-color: var(--gi-danger); }
.gi-eyebrow { color: var(--gi-moss-700); font-size: .75rem; font-weight: 750; letter-spacing: .12em; line-height: 1.5; text-transform: uppercase; }
.gi-icon { display: inline-block; flex: 0 0 auto; height: 1.25rem; vertical-align: middle; width: 1.25rem; }
@media (max-width: 600px) { :root { --gi-shell: calc(100% - 2.5rem); } }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
#main:has(> .gi-homepage, > .gi-discovery, > .gi-article-page, > .gi-identity) { padding-block: 0; }

input[type="checkbox"], input[type="radio"] { accent-color: var(--gi-moss-700); }

/* Only the dark surfaces need the light focus ring; the footer and the article
   rail are light, where lime on wash is barely visible. */
.gi-homepage__hero, .gi-identity__garden { --gi-focus: var(--gi-lime); }