:root {
  color-scheme: light;

  /* Masters Green tonal ramp — PMS 342 C anchors the 600 step */
  --color-brand-50: #edf8f2;
  --color-brand-100: #d6efe2;
  --color-brand-200: #acdac3;
  --color-brand-300: #7abf9f;
  --color-brand-400: #45a07a;
  --color-brand-500: #1a825d;
  --color-brand-600: #006747;
  --color-brand-700: #005338;
  --color-brand-800: #003e29;
  --color-brand-900: #002b1b;
  --color-brand-950: #00170c;

  /* Restrained companion ramp for non-interactive highlights */
  --color-gold-50: #fdf6e8;
  --color-gold-100: #f9eaca;
  --color-gold-200: #efd49b;
  --color-gold-300: #e9c26b;
  --color-gold-400: #e1b346;
  --color-gold-500: #d6a62b;
  --color-gold-600: #b1881d;
  --color-gold-700: #8d6c16;
  --color-gold-800: #6a5110;
  --color-gold-900: #4c3a0d;
  --color-gold-950: #2b2005;

  /* Semantic color roles */
  --color-bg: #fbfdfb;
  --color-surface: var(--color-brand-50);
  --color-surface-raised: #f5faf7;
  --color-surface-muted: var(--color-brand-100);
  --color-ink: var(--color-brand-950);
  --color-ink-soft: var(--color-brand-900);
  --color-text: #3f5f53;
  --color-text-strong: #1f4537;
  --color-text-faint: #5c756b;
  --color-line: rgba(0, 103, 71, 0.2);
  --color-line-light: rgba(0, 103, 71, 0.1);
  --color-accent: var(--color-brand-600);
  --color-accent-hover: var(--color-brand-700);
  --color-accent-soft: var(--color-brand-100);
  --color-complement: var(--color-gold-500);
  --color-complement-soft: var(--color-gold-50);
  --color-dark-panel: var(--color-brand-800);
  --color-dark-item: rgba(255, 255, 255, 0.13);
  --color-on-dark: rgba(255, 255, 255, 0.8);
  --color-on-dark-muted: rgba(255, 255, 255, 0.55);
  --color-on-dark-faint: rgba(255, 255, 255, 0.48);
  --color-on-dark-line: rgba(255, 255, 255, 0.18);
  --color-disabled: #afc2b9;
  --color-media: var(--color-complement-soft);
  --color-white: #fff;

  /* Type families and scale */
  --font-display: "Bricolage Grotesque", sans-serif;
  --font-body: "Geist", sans-serif;
  --font-mono: "Fragment Mono", monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-label-lg: 0.9375rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.5rem;
  --text-title-sm: 1.625rem;
  --text-statement-mobile: 1.65rem;
  --text-xl: 2rem;
  --text-2xl: 2.625rem;
  --text-3xl: 3.5rem;
  --text-display-tablet: 3.125rem;
  --text-hero: clamp(3.5rem, 4vw, 4.125rem);
  --leading-tight: 1.08;
  --leading-heading: 1.1;
  --leading-body: 1.4;
  --tracking-tight: -0.04em;
  --tracking-display: -0.032em;

  /* Four-point spatial rhythm */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;

  /* Layout roles */
  --page-gutter: clamp(1rem, 4.5vw, 4.5rem);
  --container: 75rem;
  --container-copy: 58rem;
  --measure: 70ch;
  --header-height: 4rem;

  /* Shape roles */
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2.5rem;
  --radius-device-tablet: 1.8125rem;
  --radius-device-desktop: 2.3125rem;
  --radius-housing: 2.8rem;
  --radius-pill: 999px;
  --border: 1px solid var(--color-line);
  --border-light: 1px solid var(--color-line-light);

  /* Elevation and motion roles */
  --shadow-button: 0 1.5rem 2.5rem -1rem rgba(0, 43, 27, 0.42), 0 0.5rem 1rem -0.5rem rgba(0, 43, 27, 0.3);
  --shadow-panel: 0 1.75rem 2.5rem -1.5rem rgba(0, 43, 27, 0.18), 0 0.4rem 0.8rem -0.5rem rgba(0, 43, 27, 0.14);
  --shadow-tablet: 0 2rem 2.5rem -1rem rgba(0, 43, 27, 0.42);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 180ms;
  --duration-reveal: 900ms;
  --transition-fast: var(--duration-fast) var(--ease-out);
  --transition-reveal: var(--duration-reveal) var(--ease-out);
  --layer-header: 100;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--color-bg);
}

body {
  margin: 0;
  min-width: 20rem;
  color: var(--color-ink);
  background: var(--color-bg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

body, #app { overflow-x: clip; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: var(--tracking-display); }

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 4px;
}

.accent { color: var(--color-accent); }
.muted { color: var(--color-text-faint); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Layout primitives */
.container { width: min(calc(100% - (2 * var(--page-gutter))), var(--container)); margin-inline: auto; }
.copy-container { width: min(calc(100% - (2 * var(--page-gutter))), var(--container-copy)); margin-inline: auto; }
.stack { display: flex; flex-direction: column; gap: var(--stack-space, var(--space-6)); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-space, var(--space-4)); }
.auto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 16rem)), 1fr)); gap: var(--grid-space, var(--space-6)); }
.surface { border: var(--border-light); border-radius: var(--radius-lg); background: var(--color-surface-raised); }
.surface--raised { background: var(--color-bg); box-shadow: var(--shadow-panel); }

/* Action primitive */
.button {
  min-width: 14.375rem;
  min-height: 3.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--border);
  border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-8);
  color: var(--color-white);
  background: var(--color-accent);
  box-shadow: var(--shadow-button);
  font-size: var(--text-md);
  font-weight: 500;
  transition: transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.button:hover { transform: translateY(-2px); background: var(--color-accent-hover); }
.button:active { transform: translateY(0); box-shadow: none; }
.button[aria-disabled="true"], .button:disabled { pointer-events: none; color: var(--color-text); background: var(--color-disabled); box-shadow: none; }
.button--small { min-width: 7.625rem; min-height: 2.5rem; padding: var(--space-2) var(--space-6); font-size: var(--text-sm); box-shadow: none; }

/* Editorial heading primitive */
.section-heading { width: min(100%, var(--container-copy)); margin-inline: auto; text-align: center; }
.section-heading__kicker { width: max-content; max-width: 100%; margin: 0 auto var(--space-8); border-radius: var(--radius-pill); padding: var(--space-2) var(--space-5); color: var(--color-accent); background: var(--color-accent-soft); }
.section-heading h2 { font-size: var(--text-3xl); line-height: var(--leading-heading); letter-spacing: var(--tracking-tight); text-wrap: balance; }
.section-heading__body { position: relative; margin: var(--space-12) auto 0; padding-inline: var(--space-10); color: var(--color-text); }
.section-heading__body::before, .section-heading__body::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--color-line); }
.section-heading__body::before { left: 0; }
.section-heading__body::after { right: 0; }

/* Instrument-media primitive */
.media-panel { overflow: hidden; border: var(--border); border-radius: var(--radius-lg); background-color: var(--color-surface); background-image: radial-gradient(circle, var(--color-line) 1px, transparent 1.2px); background-size: var(--space-4) var(--space-4); box-shadow: var(--shadow-panel); }
.media-panel__video { width: 100%; height: 100%; object-fit: cover; }

/* Shared entrance state */
.has-reveal .reveal { opacity: 0.001; filter: blur(10px); translate: 0 var(--space-5); transition: opacity var(--transition-reveal), filter var(--transition-reveal), translate var(--transition-reveal); }
.has-reveal .reveal.is-visible { opacity: 1; filter: blur(0); translate: 0 0; }

@media (max-width: 1199.98px) {
  :root { --page-gutter: 2rem; }
}

@media (max-width: 809.98px) {
  :root {
    --page-gutter: 1rem;
    --text-hero: 2.125rem;
    --text-3xl: 2.125rem;
    --text-2xl: 2.125rem;
    --text-xl: 1.75rem;
  }

  .section-heading__kicker { margin-bottom: var(--space-6); font-size: var(--text-sm); }
  .section-heading h2 { font-size: var(--text-3xl); }
  .section-heading__body { margin-top: var(--space-8); padding-inline: var(--space-5); font-size: var(--text-sm); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}