/* ============================================================
   Skills For Life — Design System
   Companion stylesheet for /design.md
   v3 — editorial buttons (square + craft hover effects),
        active-state bug fix, removed pill modifier.
   ============================================================ */

/* --- 1. Web font (Over the Rainbow — Google Fonts) ---------- */
@import url("https://fonts.googleapis.com/css2?family=Over+the+Rainbow&display=swap");

/* --- 2. Tokens --------------------------------------------- */
:root {
  /* Olive — primary scale (anchored on the verified brand colour) */
  --olive-50:  #F7F7EC;
  --olive-100: #EEEFD6;
  --olive-200: #DDDFAE;
  --olive-300: #C8CB86;
  --olive-400: #B5B870;
  --olive-500: #A3A65D;   /* brand — verified rgb(163,166,93) flat */
  --olive-600: #8A8D4C;
  --olive-700: #6D703B;   /* text-safe on white */
  --olive-800: #50522B;
  --olive-900: #33341B;

  /* Textured-olive — derived from the PDF cover's fabric backdrop
     (sampled mean rgb(152,156,98), range #8D915C–#ACAE6C) */
  --olive-textured-mean: #979B61;
  --olive-textured-lo:   #8D915C;
  --olive-textured-hi:   #ACAE6C;

  /* Neutrals — warm greige */
  --neutral-50:  #FAF8F3;
  --neutral-100: #F2EFE6;
  --neutral-200: #E6E2D4;
  --neutral-300: #D2CDBC;
  --neutral-400: #ADA797;
  --neutral-500: #847F71;
  --neutral-600: #5F5B50;
  --neutral-700: #45423A;
  --neutral-800: #2D2B25;
  --neutral-900: #1A1915;

  --cream: #FBF8EF;

  /* Surface roles */
  --bg:             #FFFFFF;                            /* page background — clean white (cream kept for inverse roles, footer text, hover states) */
  --surface:        #FFFFFF;
  --surface-alt:    var(--neutral-50);                  /* moved from neutral-100 → neutral-50 so alt-strips read against the now-white bg */
  --border:         var(--neutral-200);
  --text-primary:   var(--neutral-900);
  --text-secondary: var(--neutral-700);
  --text-muted:     var(--neutral-500);
  --text-inverse:   var(--cream);
  --text-on-olive:        var(--neutral-900);          /* near-black, 7.4:1 on brand olive */
  --text-on-olive-lede:   rgba(26, 25, 21, 0.85);      /* hero/cta lede — large body */
  --text-on-olive-muted:  rgba(26, 25, 21, 0.70);      /* large-text only, AA-large */
  --link:           var(--olive-700);
  --link-hover:     var(--olive-800);
  /* Focus ring — olive-900 (14:1 on cream, 17:1 on white, 5.2:1 on olive-500).
     Scoped to white on dark surfaces (.site-footer, .bg-pattern) where the
     dark ring is invisible. See "Alternate background" section below. */
  --focus-ring:         var(--olive-900);
  --focus-ring-inverse: #FFFFFF;

  /* Typography */
  --font-sans:   "Helvetica Neue", Helvetica, Arial, "Liberation Sans",
                 system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-script: "Over the Rainbow", "Bradley Hand", "Brush Script MT", cursive;

  /* Scale (Major Third 1.250, 16px base) */
  --fs-display: 2.488rem;
  --fs-h1:      2.074rem;
  --fs-h2:      1.728rem;
  --fs-h3:      1.440rem;
  --fs-h4:      1.200rem;
  --fs-h5:      1rem;
  --fs-h6:      0.875rem;
  --fs-body-lg: 1.125rem;
  --fs-body:    1rem;
  --fs-body-sm: 0.875rem;
  --fs-caption: 0.75rem;
  --fs-overline:0.6875rem;

  /* Spacing — 8pt grid */
  --space-0: 0;
  --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;

  /* Layout constants */
  --header-h: 72px;

  /* Radius — note: buttons are square by design; these apply to
     cards / inputs / badges / alerts only. */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Shadows — tinted with olive */
  --shadow-sm: 0 1px 2px rgba(40, 42, 20, 0.06);
  --shadow-md: 0 4px 8px -2px rgba(40, 42, 20, 0.08),
               0 2px 4px -2px rgba(40, 42, 20, 0.04);
  --shadow-lg: 0 12px 24px -6px rgba(40, 42, 20, 0.10),
               0 4px 8px -4px rgba(40, 42, 20, 0.05);
  --shadow-xl: 0 24px 48px -12px rgba(40, 42, 20, 0.14);

  /* Motion */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-craft: cubic-bezier(.6, 0, .25, 1); /* slightly snappier — for fill-slides */
  --dur-fast: 150ms;
  --dur-med:  220ms;
  --dur-slow: 320ms;
}

/* Larger headings from 768px */
@media (min-width: 768px) {
  :root {
    --fs-display: 3.815rem;
    --fs-h1:      3.052rem;
    --fs-h2:      2.441rem;
    --fs-h3:      1.953rem;
    --fs-h4:      1.563rem;
    --fs-h5:      1.25rem;
    --fs-h6:      1rem;
  }
}

/* --- 3. Reset + base --------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block; }
::selection { background: var(--olive-200); color: var(--neutral-900); }

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* --- 4. Typography ----------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--text-primary);
  margin: 0 0 var(--space-4);
}

h1, .h1 { font-size: var(--fs-h1); line-height: 1.10; font-weight: 700; letter-spacing: -0.015em; margin-bottom: var(--space-5); }
h2, .h2 { font-size: var(--fs-h2); line-height: 1.15; font-weight: 700; letter-spacing: -0.01em;  margin-bottom: var(--space-4); }
h3, .h3 { font-size: var(--fs-h3); line-height: 1.20; font-weight: 600; letter-spacing: -0.005em; margin-bottom: var(--space-3); }
h4, .h4 { font-size: var(--fs-h4); line-height: 1.30; font-weight: 600;                          margin-bottom: var(--space-3); }
h5, .h5 { font-size: var(--fs-h5); line-height: 1.40; font-weight: 600; letter-spacing: 0.005em; margin-bottom: var(--space-2); }
h6, .h6 { font-size: var(--fs-h6); line-height: 1.40; font-weight: 700; letter-spacing: 0.02em;  margin-bottom: var(--space-2); }

.display {
  font-size: var(--fs-display);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-6);
}

p { margin: 0 0 var(--space-4); }
.body-lg { font-size: var(--fs-body-lg); }
.body    { font-size: var(--fs-body); }
.body-sm { font-size: var(--fs-body-sm); }

.caption {
  font-size: var(--fs-caption);
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--text-muted);
}

.overline {
  font-size: var(--fs-overline);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

/* Over the Rainbow accents */
.script {
  font-family: var(--font-script);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.script-accent {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 1.25em;
  line-height: 1;
  color: var(--olive-700);
}
.pull-quote {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 1.953rem;
  line-height: 1.25;
  color: var(--olive-700);
  margin: 0;
}
@media (min-width: 768px) {
  .pull-quote { font-size: 2.441rem; }
}

/* Brand-signature section underline (short, hugs the text) */
.section-rule {
  display: inline-block;
  border-bottom: 1.5px solid var(--neutral-900);
  padding-bottom: var(--space-2);
}

/* --- 5. Links --------------------------------------------- */
a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease);
}
a:hover, a:focus-visible {
  color: var(--link-hover);
  text-decoration-thickness: 2px;
}
a:visited { color: var(--olive-800); }

/* --- 6. Lists --------------------------------------------- */
ul, ol {
  margin: 0 0 var(--space-4);
  padding-left: 1.25rem;
}
ul li, ol li { margin-bottom: var(--space-2); }
ul li::marker { color: var(--olive-500); font-size: 1.1em; }
ol li::marker { color: var(--olive-700); font-weight: 600; }
ul ul, ol ol, ul ol, ol ul { margin-top: var(--space-2); margin-bottom: 0; }

/* ============================================================
   7. BUTTONS — editorial · square · craft hover effects
   ------------------------------------------------------------
   Design intent: the brand is a foundation, not a SaaS app.
   Buttons read as letterpress stamps, not rounded chiclets.
   • Square corners (no radius)
   • UPPERCASE, weight 700, letter-spacing 0.08em
   • Each variant has a distinctive hover animation:
     primary  → olive-700 fill slides in from left
     dark     → olive-900 fill slides in from right
     secondary→ lifts and reveals stamped offset shadow
     ghost    → underline grows from left
     tonal    → background deepens
   ============================================================ */

.btn {
  --btn-h: 48px;
  --btn-px: 28px;
  --btn-py: 14px;
  --btn-fs: 0.8125rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--btn-h);
  padding: var(--btn-py) var(--btn-px);
  font-family: var(--font-sans);
  font-size: var(--btn-fs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  border-radius: 0;                /* SQUARE — by design */
  border: 2px solid transparent;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;              /* contain the ::before fill */
  transition:
    color var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-med) var(--ease),
    transform var(--dur-med) var(--ease);
}
.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  pointer-events: none;
}

.btn--sm { --btn-h: 40px; --btn-px: 18px; --btn-py: 10px; --btn-fs: 0.75rem; letter-spacing: 0.1em; }
.btn--lg { --btn-h: 56px; --btn-px: 36px; --btn-py: 18px; --btn-fs: 0.875rem; }

/* Helper for trailing icons that should slide on hover */
.btn__arrow {
  display: inline-flex;
  transition: transform var(--dur-med) var(--ease);
}
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn:active .btn__arrow { transform: translateX(6px); }

/* ── Primary ── brand olive bg, near-black text.
   Hover: olive-700 fill slides in from left, text turns white. */
.btn--primary {
  background: var(--olive-500);
  color: var(--text-on-olive);
}
.btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--olive-700);
  transform: translateX(-101%);
  transition: transform var(--dur-slow) var(--ease-craft);
}
.btn--primary:hover { color: #fff; }
.btn--primary:hover::before { transform: translateX(0); }
.btn--primary:active::before { background: var(--olive-800); }
.btn--primary:disabled {
  background: var(--olive-200);
  color: var(--neutral-500);
}
.btn--primary:disabled::before { display: none; }

/* ── Dark ── deeper olive + white text. Hover fill slides in from right. */
.btn--dark {
  background: var(--olive-700);
  color: #fff;
}
.btn--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--olive-900);
  transform: translateX(101%);
  transition: transform var(--dur-slow) var(--ease-craft);
}
.btn--dark:hover::before { transform: translateX(0); }
.btn--dark:disabled {
  background: var(--neutral-300);
  color: #fff;
}
.btn--dark:disabled::before { display: none; }

/* ── Secondary ── 2px olive outline. Hover lifts and reveals a stamped
   offset shadow — the button looks like it has been pulled off the page. */
.btn--secondary {
  border-color: var(--olive-700);
  color: var(--olive-700);
  background: var(--surface);
}
.btn--secondary:hover {
  transform: translate(-3px, -3px);
  box-shadow: 3px 3px 0 0 var(--olive-700);
  background: var(--surface);
}
.btn--secondary:active {
  transform: translate(0, 0);
  box-shadow: 0 0 0 0 var(--olive-700);
  transition-duration: var(--dur-fast);
}
.btn--secondary:disabled {
  border-color: var(--neutral-300);
  color: var(--neutral-400);
  transform: none;
  box-shadow: none;
}

/* ── Ghost ── text only. Hover grows an underline from the left.
   Padding stays minimal so it lives inline with paragraphs. */
.btn--ghost {
  color: var(--olive-700);
  background: transparent;
  padding-inline: var(--space-2);
  overflow: visible;
}
.btn--ghost::after {
  content: "";
  position: absolute;
  left: var(--space-2);
  right: var(--space-2);
  bottom: 10px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 280ms var(--ease-craft);
}
.btn--ghost:hover::after { transform: scaleX(1); }
.btn--ghost:disabled { color: var(--neutral-400); }
.btn--ghost:disabled::after { display: none; }

/* ── Link-CTA ── plain text-link styled as a call-to-action.
   White on olive/dark surfaces where a filled button would feel too loud.
   Underline + arrow that nudges right on hover. */
.link-cta {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  font-weight: 500;
  color: #fff;
  background: transparent;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(255, 255, 255, 0.45);
  transition: text-decoration-color var(--dur-fast) var(--ease);
}
.link-cta::after {
  content: "→";
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease);
}
.link-cta:hover { text-decoration-color: #fff; color: #fff; }
.link-cta:hover::after { transform: translateX(4px); }
.link-cta:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ── Tonal ── soft olive surface, low emphasis */
.btn--tonal {
  background: var(--olive-100);
  color: var(--olive-800);
}
.btn--tonal:hover  { background: var(--olive-200); }
.btn--tonal:active { background: var(--olive-300); }
.btn--tonal:disabled { color: var(--neutral-500); background: var(--neutral-100); }

/* ── Inverse ── for olive / dark surfaces */
.btn--inverse {
  background: #fff;
  color: var(--olive-800);
}
.btn--inverse:hover  { background: var(--cream); }
.btn--inverse:active { background: var(--neutral-100); }

.btn--inverse-outline {
  background: transparent;
  border-color: rgba(255,255,255,0.7);
  color: #fff;
}
.btn--inverse-outline:hover {
  background: rgba(255,255,255,0.14);
  border-color: #fff;
  transform: translate(-2px, -2px);
  box-shadow: 2px 2px 0 0 rgba(255,255,255,0.7);
}
.btn--inverse-outline:active {
  transform: translate(0, 0);
  box-shadow: 0 0 0 0 rgba(255,255,255,0.7);
}

/* ── Modifiers ── */
.btn--block { display: flex; width: 100%; }

.btn--icon {
  padding: 0;
  width: var(--btn-h);
  flex-shrink: 0;
}

/* ── Loading state ── overrides spinner colour per variant */
.btn[aria-busy="true"] {
  color: transparent !important;
  pointer-events: none;
}
.btn[aria-busy="true"] > * { opacity: 0; }
.btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  border: 2px solid var(--neutral-900);
  border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
  z-index: 1;
  transform: none !important;
}
.btn--dark[aria-busy="true"]::after,
.btn--inverse-outline[aria-busy="true"]::after {
  border-color: #fff;
  border-top-color: transparent;
}
.btn--inverse[aria-busy="true"]::after {
  border-color: var(--olive-800);
  border-top-color: transparent;
}
.btn--secondary[aria-busy="true"]::after,
.btn--ghost[aria-busy="true"]::after,
.btn--tonal[aria-busy="true"]::after {
  border-color: var(--olive-700);
  border-top-color: transparent;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ── Button group ── shared border, square corners throughout */
.btn-group {
  display: inline-flex;
  isolation: isolate;
}
.btn-group .btn {
  border-right-width: 0;
}
.btn-group .btn:last-child {
  border-right-width: 2px;
}
.btn-group .btn:focus-visible { z-index: 1; }
/* Disable the secondary lift inside a group — would break the joined look */
.btn-group .btn--secondary:hover {
  transform: none;
  box-shadow: none;
  background: var(--olive-50);
}

/* ── Segmented control ── pressed-state tabs */
.segmented {
  display: inline-flex;
  background: var(--neutral-100);
  padding: 4px;
  gap: 2px;
}
.segmented button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 10px 18px;
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}
.segmented button:hover { color: var(--text-primary); }
.segmented button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--olive-800);
  box-shadow: var(--shadow-sm);
}

/* --- 8. Forms --------------------------------------------- */
.field { display: flex; flex-direction: column; margin-bottom: var(--space-4); }

.field__label {
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.input, .textarea, .select {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  min-height: 44px;
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow   var(--dur-fast) var(--ease);
  width: 100%;
}
.textarea { min-height: 96px; resize: vertical; }
.input::placeholder,
.textarea::placeholder { color: var(--neutral-500); }

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--olive-500);
  box-shadow: 0 0 0 3px rgba(163, 166, 93, 0.25);
}

.input:disabled,
.textarea:disabled,
.select:disabled {
  background: var(--neutral-100);
  color: var(--neutral-500);
  cursor: not-allowed;
}

.field__hint {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Validation — structural, not chromatic. Olive-900 border via [aria-invalid]
   instead of a red error colour. Helper text stays in --text-muted; pair it
   with the input via aria-describedby so screen-reader users hear it. */
.input[aria-invalid="true"],
.textarea[aria-invalid="true"],
.select[aria-invalid="true"] {
  border-color: var(--olive-900);
  border-width: 1.5px;
}
.input[aria-invalid="true"]:focus,
.textarea[aria-invalid="true"]:focus,
.select[aria-invalid="true"]:focus {
  border-color: var(--olive-900);
  box-shadow: 0 0 0 3px rgba(51, 52, 27, 0.20);
}

.input-group {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--neutral-300);
  background: var(--surface);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow   var(--dur-fast) var(--ease);
  overflow: hidden;
}
.input-group:focus-within {
  border-color: var(--olive-500);
  box-shadow: 0 0 0 3px rgba(163, 166, 93, 0.25);
}
.input-group .input {
  border: 0;
  border-radius: 0;
  min-height: 42px;
  flex: 1;
  background: transparent;
}
.input-group .input:focus { box-shadow: none; }
.input-group__addon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  background: var(--neutral-100);
  color: var(--text-muted);
  font-size: var(--fs-body-sm);
  white-space: nowrap;
}
.input-group__addon--plain {
  background: transparent;
  color: var(--text-muted);
  padding: 0 10px;
}

/* Checkbox */
.checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border: 1.5px solid var(--neutral-400);
  background: var(--surface);
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
  flex-shrink: 0;
  margin: 0;
}
.checkbox:hover { border-color: var(--olive-600); }
.checkbox:checked {
  background: var(--olive-700);
  border-color: var(--olive-700);
}
.checkbox:checked::after {
  content: "";
  width: 5px; height: 10px;
  margin-top: -2px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.checkbox:disabled {
  background: var(--neutral-100);
  border-color: var(--neutral-300);
  cursor: not-allowed;
}

/* Radio */
.radio {
  appearance: none;
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border: 1.5px solid var(--neutral-400);
  background: var(--surface);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
              border-width var(--dur-fast) var(--ease);
  flex-shrink: 0;
  margin: 0;
}
.radio:hover { border-color: var(--olive-600); }
.radio:checked {
  border-color: var(--olive-700);
  border-width: 6px;
}

/* Switch */
.switch {
  appearance: none;
  -webkit-appearance: none;
  width: 44px; height: 24px;
  border-radius: 9999px;
  background: var(--neutral-300);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--dur-med) var(--ease);
  margin: 0;
}
.switch::before {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-med) var(--ease);
}
.switch:checked { background: var(--olive-700); }
.switch:checked::before { transform: translateX(20px); }
.switch:disabled { opacity: 0.5; cursor: not-allowed; }

.check-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--fs-body);
  color: var(--text-primary);
}
.check-inline + .check-inline { margin-left: var(--space-4); }

/* --- 9. Cards --------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
@media (min-width: 768px) { .card { padding: var(--space-8); } }

.card--elevated { border-color: transparent; box-shadow: var(--shadow-sm); }
.card--interactive {
  cursor: pointer;
  transition: transform var(--dur-med) var(--ease),
              box-shadow var(--dur-med) var(--ease);
}
.card--interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* --- 10. Badges ------------------------------------------ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: rgba(163, 166, 93, 0.12);
  color: var(--olive-800);
}
.badge--neutral { background: var(--neutral-100); color: var(--neutral-700); }

/* --- 11. Blockquote ------------------------------------- */
blockquote, .blockquote {
  margin: 0 0 var(--space-6);
  padding-left: var(--space-6);
  border-left: 3px solid var(--olive-500);
}
.blockquote .pull-quote { margin: 0; }
.blockquote cite {
  display: block;
  font-style: normal;
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--olive-700);
  margin-top: var(--space-4);
}
.blockquote cite::before { content: "— "; }

/* --- 12. Tables ----------------------------------------- */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body-sm);
}
.table th {
  text-align: left;
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--neutral-700);
  background: var(--neutral-100);
  border-bottom: 2px solid var(--olive-500);
  padding: 12px 16px;
}
.table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}
.table tbody tr:hover td { background: var(--neutral-50); }

/* --- 13. Dividers --------------------------------------- */
hr {
  border: 0;
  border-top: 1px solid var(--neutral-900);
  margin: var(--space-8) 0;
}

/* --- 14. Brand hand mark (mask) -------------------------- */
:root {
  --icon-hand: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 240'><g fill='black'><rect x='38'  y='40'  width='22' height='110' rx='11'/><rect x='68'  y='20'  width='22' height='130' rx='11'/><rect x='98'  y='10'  width='22' height='140' rx='11'/><rect x='128' y='30'  width='22' height='120' rx='11'/><path d='M148 90 Q175 95 175 130 Q175 165 148 165 Z'/><path d='M38 130 Q38 110 60 110 L150 110 Q172 110 172 132 L172 200 Q172 230 100 230 Q38 230 38 200 Z'/></g></svg>");
}
.brand-hand {
  display: inline-block;
  width: 64px;
  height: 64px;
  background-color: currentColor;
  -webkit-mask: var(--icon-hand) center / contain no-repeat;
          mask: var(--icon-hand) center / contain no-repeat;
}

/* ============================================================
   15. HERO
   ============================================================ */
.hero {
  background: var(--olive-500);
  color: var(--text-on-olive);
  padding: var(--space-16) 0 var(--space-20);
  position: relative;
  overflow: hidden;
}
.hero h1, .hero h2, .hero .display { color: var(--text-on-olive); }
.hero .lede {
  font-size: var(--fs-body-lg);
  color: var(--text-on-olive-lede);
  max-width: 60ch;
}
.hero a:not(.btn):not(.link-cta) { color: var(--text-on-olive); text-decoration-thickness: 2px; }
.hero a:not(.btn):not(.link-cta):hover { color: #000; }

.hero--inverse { color: #fff; }
.hero--inverse h1,
.hero--inverse h2,
.hero--inverse .display { color: #fff; }
.hero--inverse .lede { color: var(--olive-100); }

/* Accent script colour: default olive-700 (5.6:1 on white) fails on the olive-500
   hero surface. Flip to olive-900 for adequate large-text contrast (~10:1). */
.hero .script-accent { color: var(--olive-900); }
.hero--inverse .script-accent { color: #fff; }

.hero--textured {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.06), rgba(0,0,0,0.10)),
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.05), transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(0,0,0,0.10), transparent 60%),
    var(--olive-500);
}
.hero--textured::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.20;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}

/* ============================================================
   16. STAT BLOCK
   ============================================================ */
.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.stat__value {
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--olive-700);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  font-size: var(--fs-body-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}
.stat__caption {
  font-size: var(--fs-caption);
  color: var(--text-muted);
}
.hero .overline { color: var(--text-on-olive); }
.hero .stat__value { color: var(--text-on-olive); }
.hero .stat__label { color: var(--text-on-olive-muted); }
.hero--inverse .stat__value { color: #fff; }
.hero--inverse .stat__label { color: var(--olive-100); }

/* ============================================================
   17. AVATAR
   ============================================================ */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--olive-200);
  color: var(--olive-800);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  overflow: hidden;
  flex-shrink: 0;
  user-select: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { width: 28px; height: 28px; font-size: 0.6875rem; }
.avatar--lg { width: 56px; height: 56px; font-size: 1.125rem; }
.avatar--xl { width: 80px; height: 80px; font-size: 1.5rem; }

.avatar-group { display: inline-flex; align-items: center; }
.avatar-group .avatar {
  box-shadow: 0 0 0 2px var(--surface);
  margin-left: -10px;
}
.avatar-group .avatar:first-child { margin-left: 0; }
.avatar-group__count {
  margin-left: var(--space-3);
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
}

/* ============================================================
   18. ALERT
   ============================================================ */
.alert {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--olive-500);
  background: var(--olive-50);
  color: var(--text-primary);
}
.alert__icon { flex-shrink: 0; line-height: 1.4; font-size: 1.125rem; }
.alert__title { font-weight: 600; margin: 0 0 var(--space-1); font-size: var(--fs-body); }
.alert__body  { margin: 0; font-size: var(--fs-body-sm); color: var(--text-secondary); }

/* ============================================================
   19. PROGRESS
   ============================================================ */
.progress {
  width: 100%;
  height: 8px;
  background: var(--neutral-100);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  background: var(--olive-500);
  border-radius: inherit;
  transition: width var(--dur-slow) var(--ease);
}
.progress--lg { height: 12px; }
.progress--sm { height: 4px; }

/* ============================================================
   20. UTILITY
   ============================================================ */
.container {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--space-4);
}
@media (min-width: 768px) {
  .container { padding-inline: var(--space-8); }
}

.text-muted     { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-inverse   { color: var(--text-inverse); }
.text-olive     { color: var(--olive-700); }
.text-on-olive  { color: var(--text-on-olive); }

.bg-olive  { background: var(--olive-500); color: var(--text-on-olive); }
.bg-cream  { background: var(--cream); }
.bg-surface-alt { background: var(--surface-alt); }

.stack > * + * { margin-top: var(--space-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* Row — auto-fit grid primitive used across marketing pages.
   Collapses to a single column under 768px so columns stack on mobile. */
.row { display: grid; gap: var(--space-6); }
.row--2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.row--3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.row--4 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
@media (max-width: 767px) {
  .row--2, .row--3, .row--4 { grid-template-columns: 1fr; }
}

a[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.6;
  cursor: not-allowed;
}

/* Skip-link — visually hidden until focus, jumps keyboard users past nav */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 200;
  padding: var(--space-2) var(--space-4);
  background: var(--olive-900);
  color: var(--cream);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-body-sm);
  border-radius: var(--radius-sm);
  transform: translateY(-150%);
  transition: transform var(--dur-fast) var(--ease);
}
.skip-link:focus-visible {
  transform: translateY(0);
  color: var(--cream);
}

/* ============================================================
   21. MEDIA PLACEHOLDER
   ------------------------------------------------------------
   Neutral block reserved for forthcoming imagery — keeps layout
   stable when art direction is still in flight.
   ============================================================ */
:root {
  --icon-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2'/><circle cx='9' cy='9' r='2'/><path d='m21 15-3.5-3.5a2 2 0 0 0-2.83 0L5 21'/></svg>");
}
.media-placeholder {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--neutral-200);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}
.media-placeholder__icon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 32px;
  height: 32px;
  background-color: var(--neutral-500);
  -webkit-mask: var(--icon-image) center / contain no-repeat;
          mask: var(--icon-image) center / contain no-repeat;
}
.media-placeholder--hero    { aspect-ratio: 16 / 9; }
.media-placeholder--card    { aspect-ratio: 4 / 3; }
.media-placeholder--profile { aspect-ratio: 1 / 1; border-radius: var(--radius-full); }
.media-placeholder--banner  { aspect-ratio: 21 / 9; }

@media (forced-colors: active) {
  .media-placeholder { border: 1px solid CanvasText; }
}

/* ============================================================
   22. DEFINITION LIST
   ------------------------------------------------------------
   Two-column term/value layout for ANBI-style metadata,
   programme facts, contact details. Stacks on mobile.
   ============================================================ */
.def-list {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: var(--space-3) var(--space-6);
  margin: 0;
}
.def-list__term {
  font-weight: 500;
  color: var(--text-secondary);
  font-size: var(--fs-body-sm);
  margin: 0;
}
.def-list__value {
  color: var(--text-primary);
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.def-list--divided .def-list__term,
.def-list--divided .def-list__value {
  border-bottom: 1px solid var(--border);
  padding-block: var(--space-3);
}

@media (max-width: 767px) {
  .def-list {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
  .def-list__term { padding-block-end: 0; }
  .def-list:not(.def-list--footer) .def-list__term {
    font-size: var(--fs-body-lg);
    font-weight: 600;
    color: var(--text-primary);
  }
  .def-list__value {
    padding-block-end: var(--space-3);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-2);
  }
  .def-list > :last-child { border-bottom: 0; }
}

/* ============================================================
   23. SITE FOOTER
   ------------------------------------------------------------
   Dark olive container, three-column grid that stacks on mobile,
   with a bottom row for copyright and policy links.
   ============================================================ */
.site-footer {
  background: var(--olive-900);
  color: var(--cream);
  padding-block: var(--space-12) var(--space-8);
}
.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}
@media (max-width: 767px) {
  .site-footer__cols { grid-template-columns: 1fr; gap: var(--space-10); }
}
.site-footer__col h4,
.site-footer__col .h4 {
  color: var(--cream);
  font-size: var(--fs-h5);
  margin-bottom: var(--space-3);
}
.site-footer__col p,
.site-footer__col li { color: var(--olive-200); }
.site-footer__col ul { list-style: none; padding: 0; margin: 0; }
.site-footer__col li { margin-bottom: var(--space-2); }
.site-footer__col a {
  color: var(--cream);
  text-decoration: none;
  opacity: 0.8;
  transition: opacity var(--dur-fast) var(--ease);
}
.site-footer__col a:hover,
.site-footer__col a:focus-visible { opacity: 1; }
.site-footer__logo {
  display: inline-block;
  max-width: 200px;
  margin-bottom: var(--space-4);
}
.site-footer__logo img { width: 100%; height: auto; }

.site-footer__bottom {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--fs-body-sm);
  color: var(--olive-200);
}
.site-footer__bottom-links {
  display: flex;
  gap: var(--space-6);
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-footer__bottom-links a {
  color: var(--cream);
  text-decoration: none;
  opacity: 0.8;
}
.site-footer__bottom-links a:hover { opacity: 1; }

/* ============================================================
   24. SITE HEADER
   ------------------------------------------------------------
   Sticky top nav: 72px high (--header-h), wordmark left,
   nav links centre/right, accent CTA. CSS-only hamburger
   below 768px — checkbox toggle, no JS.
   ============================================================ */
.site-header {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--space-6);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.site-header__brand img { height: 36px; width: auto; }

.site-header__nav ul {
  display: flex;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-header__nav a {
  color: var(--text-primary);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.site-header__nav a:hover,
.site-header__nav a[aria-current="page"] { color: var(--olive-700); }

.site-header__cta { flex-shrink: 0; }

.site-header__toggle { display: none; }
.site-header__burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: transparent;
  border: 0;
}
.site-header__burger span,
.site-header__burger span::before,
.site-header__burger span::after {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-primary);
  position: relative;
  transition: transform var(--dur-med) var(--ease),
              opacity var(--dur-fast) var(--ease);
}
.site-header__burger span::before { position: absolute; top: -7px; left: 0; }
.site-header__burger span::after  { position: absolute; top:  7px; left: 0; }

@media (max-width: 767px) {
  .site-header__burger { display: inline-flex; }
  .site-header__nav {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: var(--space-4) var(--space-6);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--dur-med) var(--ease),
                opacity var(--dur-fast) var(--ease);
  }
  .site-header__nav ul { flex-direction: column; gap: var(--space-3); }
  .site-header__toggle:checked ~ .site-header__nav {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .site-header__toggle:checked ~ .site-header__burger span { background: transparent; }
  .site-header__toggle:checked ~ .site-header__burger span::before { transform: translateY(7px) rotate(45deg); }
  .site-header__toggle:checked ~ .site-header__burger span::after  { transform: translateY(-7px) rotate(-45deg); }
}

/* ============================================================
   25. PAGE SECTION
   ------------------------------------------------------------
   Vertical rhythm for marketing-page sections. Applied to
   <section class="section"> wrappers — pairs with .container
   inside for horizontal gutters and max-width.
   ============================================================ */
.section {
  padding-block: var(--space-16);
}
.section[id] { scroll-margin-top: var(--header-h); }
@media (min-width: 768px) {
  .section { padding-block: var(--space-20); }
}

/* ============================================================
   26. STAT STRIP
   ------------------------------------------------------------
   Full-bleed band of stats on an alt surface — used to break
   up long marketing flows with a moment of impact numbers.
   ============================================================ */
.stat-strip {
  background: var(--surface-alt);
  padding-block: var(--space-12);
  border-block: 1px solid var(--border);
}
@media (min-width: 768px) {
  .stat-strip { padding-block: var(--space-16); }
}

/* ============================================================
   27. CTA BAND
   ------------------------------------------------------------
   Full-bleed olive surface for the donate / sponsor close-out
   on marketing pages. Inverse text on --olive-500 — headings
   use .display sized type for a closing-statement feel.
   ============================================================ */
.cta-band {
  background: var(--olive-500);
  color: var(--text-on-olive);
  padding-block: var(--space-16);
  scroll-margin-top: var(--header-h);
}
@media (min-width: 768px) {
  .cta-band { padding-block: var(--space-20); }
}
.cta-band h2,
.cta-band .display { color: var(--text-on-olive); }
.cta-band .lede {
  font-size: var(--fs-body-lg);
  color: var(--text-on-olive-lede);
  max-width: 60ch;
}
.cta-band .script-accent { color: var(--olive-900); }

/* ============================================================
   28. FOOTER DEF-LIST VARIANT
   ------------------------------------------------------------
   Tighter columns and inverse colour roles for the dark-olive
   footer — terms in olive-200, values in cream, dividers in
   a low-opacity white.
   ============================================================ */
.site-footer .def-list--footer {
  grid-template-columns: 5rem 1fr;
  gap: var(--space-2) var(--space-4);
  font-size: var(--fs-body-sm);
}
.site-footer .def-list--footer .def-list__term { color: var(--olive-200); }
.site-footer .def-list--footer .def-list__value { color: var(--cream); }
.site-footer .def-list--footer.def-list--divided .def-list__term,
.site-footer .def-list--footer.def-list--divided .def-list__value {
  border-bottom-color: rgba(255, 255, 255, 0.12);
  padding-block: var(--space-2);
}
.site-footer .def-list--footer a { color: var(--cream); }

/* ============================================================
   29. ALTERNATE BACKGROUND — .bg-pattern
   ------------------------------------------------------------
   Full-bleed green linen pattern (real brand asset, not synthetic
   noise). White text by default. Compose with .hero, .cta-band,
   .section, or any container that needs an alternative to the
   flat olive surface.

   Layering: the image is set as background-image (longhand), so
   it overrides the shorthand `background:` from .hero / .cta-band
   by source order. Fallback colour stays olive-500 while the
   image loads.

   Contrast note: a flat-colour sample of this image measures
   ~2.85:1 against white — under WCAG AA's 4.5:1 body threshold.
   In context the eye integrates the darker weave threads of the
   linen texture and white type reads cleanly. This is documented
   as an accepted brand-judgment exception in stylesheet.md.
   ============================================================ */
.bg-pattern {
  background-color: var(--olive-500);
  background-image: url("./assets/images/imgi_34_pattern-green.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;

  /* Scope inverse focus ring to descendants — olive-900 is invisible here */
  --focus-ring: var(--focus-ring-inverse);
}

.bg-pattern h1,
.bg-pattern h2,
.bg-pattern h3,
.bg-pattern h4,
.bg-pattern h5,
.bg-pattern h6,
.bg-pattern .display { color: #fff; }

.bg-pattern .lede     { color: rgba(255, 255, 255, 0.88); }
.bg-pattern .overline { color: rgba(255, 255, 255, 0.78); }

.bg-pattern .script-accent { color: #fff; }

.bg-pattern .stat__value   { color: #fff; }
.bg-pattern .stat__label   { color: rgba(255, 255, 255, 0.78); }
.bg-pattern .stat__caption { color: rgba(255, 255, 255, 0.70); }

.bg-pattern a:not(.btn):not(.link-cta) {
  color: #fff;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Footer also wants the inverse focus ring (olive-900 on olive-900 is invisible) */
.site-footer {
  --focus-ring: var(--focus-ring-inverse);
}