/*
  Entry stylesheet. Declares the cascade layer order up front (later layers
  always win regardless of selector specificity or source order — this is
  what lets utilities reliably override components without !important, and
  lets components reliably override base/layout without specificity fights).
*/
@layer tokens, base, layout, elements, components, patterns, utilities;

@layer tokens {
/*
  Primitive tokens — raw values only. Nothing here is used directly by
  components; see semantic.css for the aliases components actually consume.

  Palette REVISED 2026-08-05 to align with the real chosenpeople.com, per
  explicit user request after reviewing the first ("Institutional editorial",
  intentionally distinct) pass — see docs/visual-direction.md "Direção
  revista". Ink-800, gold-400 and azure-500 below are the real values sampled
  live from the site (computed styles + pixel-sampled screenshot, documented
  in docs/design-principles.md); the rest of each scale is generated around
  that anchor. Feedback scales (sage/amber/crimson) and the two extra
  categorical hues (terracotta/teal) are NOT brand colors, so they're
  unchanged from the original pass.
*/

:root {
  /* ---- Neutral (true gray — matches the site's #212121 body text / #F7F9FA
       body background, sampled live, not blue-tinted like the first pass) ---- */
  --color-neutral-0: #ffffff;
  --color-neutral-50: #f7f9fa;
  --color-neutral-100: #eef1f3;
  --color-neutral-200: #dee3e7;
  --color-neutral-300: #c2cacf;
  --color-neutral-400: #9aa5ac;
  --color-neutral-500: #717b82;
  --color-neutral-600: #545e66;
  --color-neutral-700: #3d454c;
  --color-neutral-800: #292f35;
  --color-neutral-900: #212121;
  --color-neutral-950: #131619;

  /* ---- Ink (brand primary — real chosenpeople.com navy, rgb(31,43,59),
       sampled from body/h1/h2/h3/header/footer/card computed styles) ---- */
  --color-ink-50: #f2f4f6;
  --color-ink-100: #e1e6eb;
  --color-ink-200: #c4cdd6;
  --color-ink-300: #9fadbc;
  --color-ink-400: #6c7e93;
  --color-ink-500: #4a5c72;
  --color-ink-600: #34455a;
  --color-ink-700: #263548;
  --color-ink-800: #1f2b3b;
  --color-ink-900: #161e29;
  --color-ink-950: #0d1218;

  /* ---- Gold (brand accent — real Donate-button gold, pixel-sampled as
       rgb(240,186,45); still background/large-element only, never small
       text on white — see docs/design-principles.md contrast table) ---- */
  --color-gold-50: #fef8e7;
  --color-gold-100: #fceec0;
  --color-gold-200: #f8dd85;
  --color-gold-300: #f4cc55;
  --color-gold-400: #f0ba2d;
  --color-gold-500: #dda30f;
  --color-gold-600: #b37f0a;
  --color-gold-700: #8a6108;
  --color-gold-800: #614406;
  --color-gold-900: #3d2a04;

  /* ---- Azure (secondary — real link color rgb(0,118,228). azure-500 is the
       literal site value (safe for large text/icons/focus rings, 3:1);
       azure-600 is a slightly deepened variant for AA-safe body text links,
       since the raw site value measures 4.46:1 on white — a hair under the
       4.5:1 body-text threshold) ---- */
  --color-azure-50: #eaf3fe;
  --color-azure-100: #cfe4fd;
  --color-azure-200: #9ec9fb;
  --color-azure-300: #64a8f5;
  --color-azure-400: #2e8aee;
  --color-azure-500: #0076e4;
  --color-azure-600: #0068c9;
  --color-azure-700: #00519d;
  --color-azure-800: #003c74;
  --color-azure-900: #002a52;

  /* ---- Cobalt (navigation interaction color — a muted blue distinct from
       both ink and azure, sampled live from the real chosenpeople.com menu:
       cobalt-100 = the hover-pill background, cobalt-500 = hover/active
       text, cobalt-700 = default dropdown-item text. Added 2026-08-05 after
       the first pass used the wrong hover colors — see
       docs/design-principles.md "Navigation colors".) ---- */
  --color-cobalt-100: #e6f2f7;
  --color-cobalt-300: #a8c7e0;
  --color-cobalt-500: #2f5bb0;
  --color-cobalt-700: #2a4a78;
  --color-cobalt-900: #16283f;

  /* ---- Feedback scales ---- */
  --color-sage-100: #dcefe2;
  --color-sage-300: #7cc79b;
  --color-sage-500: #2f9760;
  --color-sage-700: #1e7b4d;
  --color-sage-900: #0f4a2e;

  --color-amber-100: #fbe7d3;
  --color-amber-300: #eda968;
  --color-amber-500: #c97418;
  --color-amber-700: #b5540a;
  --color-amber-900: #6b3106;

  --color-crimson-100: #fbe2e1;
  --color-crimson-300: #e38884;
  --color-crimson-500: #cc3b33;
  --color-crimson-700: #b3261e;
  --color-crimson-900: #6b1410;

  /* ---- Categorical extras (ministry-area tagging — "What We Do" pattern) ---- */
  --color-terracotta-300: #e3a47e;
  --color-terracotta-500: #c1552c;
  --color-terracotta-700: #8f3a1b;

  --color-teal-300: #8fcbc5;
  --color-teal-500: #3f8f89;
  --color-teal-700: #275c58;

  /* ---- Spacing (4px base unit) ---- */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */

  /* ---- Radii ---- */
  --radius-none: 0;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 999px;

  /* ---- Shadows (cool-tinted, matches ink undertone rather than pure black) ---- */
  --shadow-sm: 0 1px 2px rgba(13, 18, 24, 0.08);
  --shadow-md: 0 4px 10px rgba(13, 18, 24, 0.10), 0 1px 3px rgba(13, 18, 24, 0.08);
  --shadow-lg: 0 12px 28px rgba(13, 18, 24, 0.14), 0 2px 6px rgba(13, 18, 24, 0.08);
  --shadow-focus: 0 0 0 3px var(--color-azure-200);

  /* ---- Opacity ---- */
  --opacity-disabled: 0.5;
  --opacity-overlay: 0.6;
  --opacity-hover-tint: 0.08;

  /* ---- Z-index scale ---- */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky-header: 200;
  --z-drawer: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;

  /* ---- Breakpoints (as plain values for reference — media queries can't read custom
       properties directly, but component-query-style JS/docs reference these) ---- */
  --breakpoint-xs: 320px;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
}

}
@layer tokens {
/*
  Semantic tokens — the only layer components/views are allowed to reference
  directly. Every value here traces back to primitive.css. WCAG 2.2 AA
  contrast checked for every text/background pairing marked ✓ below (see
  docs/design-principles.md for the full contrast table).
*/

:root {
  /* ---- Backgrounds ---- */
  --color-background-page: var(--color-neutral-0);
  --color-background-surface: var(--color-neutral-50);
  --color-background-muted: var(--color-neutral-100);
  --color-background-inverse: var(--color-ink-900);
  --color-background-brand: var(--color-ink-800);

  /* ---- Text (on --color-background-page/surface) ---- */
  --color-text-primary: var(--color-neutral-900);     /* ✓ 16.1:1 on page bg */
  --color-text-secondary: var(--color-neutral-700);   /* ✓ 9.8:1 */
  --color-text-muted: var(--color-neutral-600);       /* ✓ 6.6:1 */
  --color-text-inverse: var(--color-neutral-0);       /* ✓ 14.3:1 on --color-background-brand */
  --color-text-link: var(--color-azure-600);          /* ✓ 5.5:1 — deepened from the real site's raw azure-500 (4.46:1, fails AA by a hair) */
  --color-text-link-hover: var(--color-azure-700);
  --color-text-brand-accent: var(--color-gold-700);   /* ✓ 5.5:1 — safe gold-on-white text (see warning below) */

  /* ---- Borders ---- */
  --color-border-default: var(--color-neutral-200);   /* decorative dividers — not a UI-boundary, no contrast requirement */
  --color-border-strong: var(--color-neutral-500);    /* ✓ 4.3:1 — use for input/interactive boundaries (WCAG 1.4.11, needs ≥3:1) */
  --color-border-brand: var(--color-ink-800);
  --color-border-inverse: rgba(255, 255, 255, 0.24);

  /* ---- Brand ---- */
  --color-brand-primary: var(--color-ink-800);
  --color-brand-secondary: var(--color-azure-600);
  --color-brand-accent: var(--color-gold-400);                  /* real site value, rgb(240,186,45) */

  /* ---- Actions ---- */
  --color-action-primary-bg: var(--color-ink-800);
  --color-action-primary-bg-hover: var(--color-ink-900);
  --color-action-primary-text: var(--color-neutral-0);        /* ✓ 14.3:1 */

  --color-action-secondary-bg: var(--color-neutral-0);
  --color-action-secondary-bg-hover: var(--color-azure-50);
  --color-action-secondary-border: var(--color-azure-600);
  --color-action-secondary-text: var(--color-azure-600);       /* ✓ 5.5:1 */

  --color-action-tertiary-text: var(--color-ink-800);
  --color-action-tertiary-text-hover: var(--color-ink-900);

  /* gold-400 = the real Donate-button gold (pixel-sampled from the live
     site); dark ink text, never white-on-gold — white-on-gold-400 measures
     1.78:1, a hard fail. */
  --color-action-donation-bg: var(--color-gold-400);
  --color-action-donation-bg-hover: var(--color-gold-500);
  --color-action-donation-text: var(--color-ink-900);           /* ✓ 9.4:1 */

  --color-action-destructive-bg: var(--color-crimson-700);
  --color-action-destructive-text: var(--color-neutral-0);      /* ✓ 6.5:1 */

  /* ---- Focus ---- */
  --color-focus-ring: var(--color-azure-500);                  /* ✓ 4.5:1, exceeds the 3:1 UI-component minimum */

  /* ---- Navigation (hover/active states — sampled live from the real site's
       menu, see docs/design-principles.md "Navigation colors") ---- */
  --color-nav-hover-bg: var(--color-cobalt-100);
  --color-nav-hover-text: var(--color-cobalt-500);              /* ✓ 6.5:1 on white, 5.7:1 on --color-nav-hover-bg */
  --color-nav-item-text: var(--color-cobalt-700);                /* ✓ 8.9:1 — default (non-hover) dropdown item text */
  --color-nav-panel-bg: rgba(255, 255, 255, 0.97);          /* pixel-sampled on the real panel: ~rgb(252,252,253), i.e. near-opaque white even over a photo hero — the literal bg-white/90 class reads much whiter than 90% math suggests once blur is factored in, so this is tuned to the *measured pixel result*, not the raw Tailwind utility value */
  --color-nav-panel-shadow: 0 0 0 1px rgba(21, 30, 54, 0.05), 0 25px 80px -6px rgba(14, 57, 81, 0.5);

  /* ---- Feedback ---- */
  --color-feedback-success-text: var(--color-sage-700);        /* ✓ 5.3:1 */
  --color-feedback-success-bg: var(--color-sage-100);
  --color-feedback-warning-text: var(--color-amber-700);       /* ✓ 5.0:1 */
  --color-feedback-warning-bg: var(--color-amber-100);
  --color-feedback-danger-text: var(--color-crimson-700);      /* ✓ 6.5:1 */
  --color-feedback-danger-bg: var(--color-crimson-100);
  --color-feedback-info-text: var(--color-azure-700);          /* ✓ ~7.8:1 */
  --color-feedback-info-bg: var(--color-azure-50);

  /* ---- Overlays (photo captions, hero text-on-image) ---- */
  --color-overlay-scrim: rgba(11, 17, 32, var(--opacity-overlay));

  /* ---- Categorical tags (ministry-area / topic chips — 6 hues, echoes the
       "What We Do" pattern audited on chosenpeople.com; text is always the
       dark ink-900 pairing, never white-on-tint, so it stays AA-safe
       regardless of which category color is used) ---- */
  --color-category-1: var(--color-ink-800);
  --color-category-2: var(--color-azure-500);
  --color-category-3: var(--color-sage-500);
  --color-category-4: var(--color-gold-500);
  --color-category-5: var(--color-terracotta-500);
  --color-category-6: var(--color-teal-500);
}

/*
  ⚠ Brand-gold usage rule (see docs/design-audit.md — chosenpeople.com's
  current light-gold-on-white pattern was flagged as a real risk):
  --color-brand-accent / --color-gold-400/500 are for BACKGROUNDS (buttons,
  badges, icon fills) or large decorative elements (≥3:1 need) — never as
  small body text on a light background. Use --color-text-brand-accent
  (gold-700, AA-safe) for the rare case gold text-on-white is needed.
*/

}
@layer tokens {
/* Self-hosted @font-face declarations.
   - Satoshi (Latin, all weights): the REAL typeface chosenpeople.com uses
     site-wide ("Satoshi-Variable" per computed style, sampled live
     2026-08-05 — see docs/design-principles.md). Fetched from Fontshare's
     webfont API (fontshare.com — free, self-hosting explicitly supported,
     no attribution required) — replaces the earlier Fraunces/Inter pairing
     from the "Institutional editorial" direction after the user asked to
     align with the real site instead (see docs/visual-direction.md
     addendum "Direção revista").
   - Noto Sans/Serif Hebrew: unchanged from before (Google Fonts, OFL) —
     Satoshi has no Hebrew glyph coverage, so Hebrew content still needs its
     own family, per docs/rtl.md. */

@font-face {
  font-family: 'Satoshi';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/satoshi/KFIAZD4RUMEZIYV6FQ3T3GP5PDBDB6JY.woff2) format('woff2');
}
@font-face {
  font-family: 'Satoshi';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/satoshi/7AHDUZ4A7LFLVFUIFSARGIWCRQJHISQP.woff2) format('woff2');
}
@font-face {
  font-family: 'Satoshi';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/satoshi/GHM6WVH6MILNYOOCXHXB5GTSGNTMGXZR.woff2) format('woff2');
}
@font-face {
  font-family: 'Satoshi';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/fonts/satoshi/J64QX5IPOHK56I2KYUNBQ5M2XWZEYKYX.woff2) format('woff2');
}

/* hebrew */
@font-face {
  font-family: 'Noto Sans Hebrew';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/noto-sans-hebrew/or30Q7v33eiDljA1IufXTtVf7V6RvEEdhQlk0LlGxCyaePiWTNzENg.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

/* latin-ext */
@font-face {
  font-family: 'Noto Sans Hebrew';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/noto-sans-hebrew/or30Q7v33eiDljA1IufXTtVf7V6RvEEdhQlk0LlGxCyaePiaTNzENg.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Noto Sans Hebrew';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/noto-sans-hebrew/or30Q7v33eiDljA1IufXTtVf7V6RvEEdhQlk0LlGxCyaePiUTNw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* hebrew */
@font-face {
  font-family: 'Noto Sans Hebrew';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/noto-sans-hebrew/or30Q7v33eiDljA1IufXTtVf7V6RvEEdhQlk0LlGxCyaePiWTNzENg.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

/* latin-ext */
@font-face {
  font-family: 'Noto Sans Hebrew';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/noto-sans-hebrew/or30Q7v33eiDljA1IufXTtVf7V6RvEEdhQlk0LlGxCyaePiaTNzENg.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Noto Sans Hebrew';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/noto-sans-hebrew/or30Q7v33eiDljA1IufXTtVf7V6RvEEdhQlk0LlGxCyaePiUTNw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* hebrew */
@font-face {
  font-family: 'Noto Sans Hebrew';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/noto-sans-hebrew/or30Q7v33eiDljA1IufXTtVf7V6RvEEdhQlk0LlGxCyaePiWTNzENg.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

/* latin-ext */
@font-face {
  font-family: 'Noto Sans Hebrew';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/noto-sans-hebrew/or30Q7v33eiDljA1IufXTtVf7V6RvEEdhQlk0LlGxCyaePiaTNzENg.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Noto Sans Hebrew';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/noto-sans-hebrew/or30Q7v33eiDljA1IufXTtVf7V6RvEEdhQlk0LlGxCyaePiUTNw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* hebrew */
@font-face {
  font-family: 'Noto Serif Hebrew';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/noto-serif-hebrew/k3k5o9MMPvpLmixYH7euCwmkS9DohjX1-kRyiqyBqIxnoLbD-VBMyDY.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

/* latin-ext */
@font-face {
  font-family: 'Noto Serif Hebrew';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/noto-serif-hebrew/k3k5o9MMPvpLmixYH7euCwmkS9DohjX1-kRyiqyBqIxnoLbD9VBMyDY.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Noto Serif Hebrew';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/noto-serif-hebrew/k3k5o9MMPvpLmixYH7euCwmkS9DohjX1-kRyiqyBqIxnoLbD-1BM.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* hebrew */
@font-face {
  font-family: 'Noto Serif Hebrew';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/noto-serif-hebrew/k3k5o9MMPvpLmixYH7euCwmkS9DohjX1-kRyiqyBqIxnoLbD-VBMyDY.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

/* latin-ext */
@font-face {
  font-family: 'Noto Serif Hebrew';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/noto-serif-hebrew/k3k5o9MMPvpLmixYH7euCwmkS9DohjX1-kRyiqyBqIxnoLbD9VBMyDY.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Noto Serif Hebrew';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/noto-serif-hebrew/k3k5o9MMPvpLmixYH7euCwmkS9DohjX1-kRyiqyBqIxnoLbD-1BM.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/*
  Typography tokens. REVISED 2026-08-05 to match the real chosenpeople.com,
  which uses ONE family everywhere (not a display/body pairing) — Satoshi,
  confirmed via computed styles sampled live from the site's body/h1/nav/
  button ("Satoshi-Variable, 'Satoshi Fallback', 'Trebuchet MS', sans-serif").
  Replaces the earlier Fraunces+Inter editorial pairing (see
  docs/visual-direction.md "Direção revista" for why). Hebrew still gets its
  own family (Noto Serif/Sans Hebrew) — Satoshi has no Hebrew glyph coverage
  — NOT the same metrics as the Latin face, per the brief's explicit warning.

  Licensing: Satoshi is fetched from Fontshare (fontshare.com/Indian Type
  Foundry), free for personal/commercial use, self-hosting explicitly
  supported by their own webfont API — see public/assets/fonts/LICENSE.txt.
  Noto Sans/Serif Hebrew remain SIL Open Font License 1.1 (Google Fonts).
*/

:root {
  /* ---- Families ---- */
  --font-family-display: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Trebuchet MS", sans-serif;
  --font-family-body: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Trebuchet MS", sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --font-family-hebrew-display: "Noto Serif Hebrew", var(--font-family-display);
  --font-family-hebrew-body: "Noto Sans Hebrew", var(--font-family-body);

  /* ---- Weights (Satoshi ships 400/500/700/900 — the real h1 uses 900) ---- */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 700;
  --font-weight-bold: 900;

  /* ---- Fluid scale (clamp: min, preferred-with-vw, max) — 16px root ---- */
  --font-size-caption: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --font-size-label: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
  --font-size-body-sm: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --font-size-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --font-size-body-lg: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);
  --font-size-h6: clamp(1.125rem, 1.08rem + 0.25vw, 1.25rem);
  --font-size-h5: clamp(1.25rem, 1.18rem + 0.35vw, 1.5rem);
  --font-size-h4: clamp(1.5rem, 1.4rem + 0.5vw, 1.875rem);
  --font-size-h3: clamp(1.875rem, 1.7rem + 0.85vw, 2.375rem);
  --font-size-h2: clamp(2.25rem, 2rem + 1.2vw, 3rem);
  --font-size-h1: clamp(2.75rem, 2.3rem + 2vw, 4rem);

  /* Top-level nav link — deliberately steeper vw-driven growth than the
     scale above, matching the real site's own arbitrary value
     `text-[clamp(0.65rem,1.3vw,1.5rem)]` (measured live: 18.72px at a
     1440px viewport). The first pass reused --font-size-body-sm (caps at
     15px) here, which read visibly smaller than the real menu. */
  --font-size-nav-link: clamp(0.8rem, 1.3vw, 1.25rem);
  --font-size-display: clamp(3rem, 2.4rem + 3vw, 5rem);

  /* ---- Line heights ---- */
  --line-height-tight: 1.15;
  --line-height-snug: 1.3;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.65;
  --line-height-loose: 1.8;

  /* ---- Letter spacing ---- */
  --letter-spacing-tight: 0em;
  --letter-spacing-normal: 0em;
  --letter-spacing-wide: 0em;
  --letter-spacing-wider: 0em;
  --letter-spacing-widest: 0em;

  /* ---- Reading measure (ch = character width, ideal for line length) ---- */
  --measure-narrow: 55ch;
  --measure: 70ch;
  --measure-wide: 85ch;
}

/*
  Hebrew overrides: Noto Sans/Serif Hebrew render taller and need more
  line-height at the same font-size, and Hebrew has no case system so
  wide-tracking "eyebrow" letter-spacing looks broken — flattened to normal.
  Scoped to [lang="he"] or [dir="rtl"] so it only affects Hebrew content.
*/
:root[lang="he"],
[lang="he"],
[dir="rtl"] {
  --line-height-tight: 1.3;
  --line-height-snug: 1.45;
  --line-height-normal: 1.65;
  --line-height-relaxed: 1.8;
  --line-height-loose: 1.95;
  --letter-spacing-wider: 0em;
  --letter-spacing-widest: 0em;
}

/* Mobile-first refinement. Desktop tokens above remain the source of truth from
   1200px onward; these bounded ranges prevent the hero and section headings from
   inheriting desktop proportions on narrow screens. */
@media (max-width: 320px) {
  :root {
    --font-size-body: 1rem;
    --font-size-body-lg: 1.0625rem;
    --font-size-h6: 1.0625rem;
    --font-size-h5: 1.2rem;
    --font-size-h4: 1.4rem;
    --font-size-h3: 1.65rem;
    --font-size-h2: 1.95rem;
    --font-size-h1: 2.25rem;
    --font-size-display: 2.5rem;
  }
}

@media (min-width: 321px) and (max-width: 576px) {
  :root {
    --font-size-h4: clamp(1.4rem, 1.2rem + 0.8vw, 1.7rem);
    --font-size-h3: clamp(1.6rem, 1.35rem + 1vw, 1.85rem);
    --font-size-h2: clamp(1.8rem, 1.45rem + 1.8vw, 2.4rem);
    --font-size-h1: clamp(2.15rem, 1.8rem + 2.2vw, 2.75rem);
    --font-size-display: clamp(2.25rem, 1.8rem + 2.4vw, 3rem);
  }
}

@media (min-width: 577px) and (max-width: 767px) {
  :root {
    --font-size-h2: clamp(2rem, 1.5rem + 1.8vw, 2.75rem);
    --font-size-h1: clamp(2.5rem, 2rem + 1.8vw, 3.25rem);
  }
}

}
@layer tokens {
/*
  Semantic spacing — named by purpose, not by raw scale step, so a global
  rhythm change (e.g. "sections get more breathing room") is one edit here
  instead of hunting every --space-N usage across components.
*/

:root {
  --space-inset-xs: var(--space-2);
  --space-inset-sm: var(--space-3);
  --space-inset-md: var(--space-4);
  --space-inset-lg: var(--space-6);
  --space-inset-xl: var(--space-8);

  --space-stack-xs: var(--space-2);
  --space-stack-sm: var(--space-4);
  --space-stack-md: var(--space-6);
  --space-stack-lg: var(--space-8);
  --space-stack-xl: var(--space-12);

  --space-card-padding: var(--space-6);
  --space-card-gap: var(--space-4);

  --space-form-gap: var(--space-4);
  --space-form-group-gap: var(--space-6);

  --space-section-y: clamp(var(--space-16), 8vw, var(--space-32));
  --space-section-y-tight: clamp(var(--space-8), 4vw, var(--space-16));

  --space-container-x: clamp(var(--space-4), 4vw, var(--space-10));
}

@media (max-width: 320px) {
  :root {
    --space-section-y: clamp(var(--space-8), 12vw, var(--space-16));
    --space-section-y-tight: clamp(var(--space-6), 8vw, var(--space-10));
    --space-container-x: var(--space-4);
    --space-card-padding: var(--space-4);
  }
}

@media (min-width: 321px) and (max-width: 576px) {
  :root {
    --space-section-y: clamp(var(--space-10), 12vw, var(--space-20));
    --space-section-y-tight: clamp(var(--space-8), 8vw, var(--space-12));
    --space-container-x: var(--space-4);
    --space-card-padding: var(--space-5);
  }
}

@media (min-width: 577px) and (max-width: 767px) {
  :root {
    --space-section-y: clamp(var(--space-12), 10vw, var(--space-24));
    --space-container-x: var(--space-5);
  }
}

}
@layer tokens {
/*
  Layout tokens — container widths, grid shape, gutters. Implementation
  classes (.l-container, .l-grid, ...) live in assets/css/layout/ and consume
  these; kept separate so the *values* are the single source of truth.
*/

:root {
  --container-narrow: 42rem;    /* ~672px — long-form reading (article body) */
  /* Wide desktop rhythm audited against the provided chosenpeople.com
     screenshot: at ~1950px viewports, the logo and hero copy sit close to
     a 64px left inset while the nav remains optically centered. */
  --container-default: 119rem;  /* ~1904px */
  --container-wide: 124rem;     /* ~1984px */
  /* full-bleed has no max-width by definition */

  --grid-columns: 12;
  --grid-gutter: var(--space-6);
  --grid-gutter-sm: var(--space-4);

  --measure-max-width: var(--measure); /* from typography.css, re-exposed for layout use */
}

}
@layer tokens {
/*
  Motion tokens. Discreet by design — used for feedback/transitions, never
  decorative parallax or constant motion (see docs/design-principles.md).
  Every animation/transition in this project must reference these, and every
  animation must be wrapped so prefers-reduced-motion disables it (see
  base/motion-safety.css).
*/

:root {
  --duration-instant: 80ms;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --duration-reveal: 900ms;

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-reveal: cubic-bezier(0.22, 1, 0.36, 1);
}

}
@layer tokens {
/*
  Dark theme — overrides the semantic layer only (primitive.css scales stay
  the same; we just point semantic aliases at different steps). Toggled with
  a `.dark` class on <html>, same mechanism zeratov uses (assets/js/theme.js
  pattern) — kept for parity, not yet wired to a toggle UI in this pass (see
  docs/design-system-summary.md "not yet built").
*/

:root.dark,
:root[data-theme="dark"] {
  --color-background-page: var(--color-ink-950);
  --color-background-surface: var(--color-ink-900);
  --color-background-muted: var(--color-ink-800);
  --color-background-inverse: var(--color-neutral-0);
  --color-background-brand: var(--color-ink-700);

  --color-text-primary: var(--color-neutral-50);
  --color-text-secondary: var(--color-neutral-200);
  --color-text-muted: var(--color-neutral-400);
  --color-text-inverse: var(--color-ink-950);
  --color-text-link: var(--color-azure-300);
  --color-text-link-hover: var(--color-azure-200);
  --color-text-brand-accent: var(--color-gold-300);

  --color-border-default: var(--color-ink-700);
  --color-border-strong: var(--color-neutral-500);
  --color-border-inverse: rgba(19, 28, 48, 0.4);

  --color-action-primary-bg: var(--color-azure-500);
  --color-action-primary-bg-hover: var(--color-azure-400);
  --color-action-primary-text: var(--color-ink-950);

  --color-action-secondary-bg: transparent;
  --color-action-secondary-bg-hover: rgba(125, 184, 255, 0.12);
  --color-action-secondary-border: var(--color-azure-300);
  --color-action-secondary-text: var(--color-azure-300);

  --color-action-donation-bg: var(--color-gold-400);
  --color-action-donation-bg-hover: var(--color-gold-300);
  --color-action-donation-text: var(--color-ink-950);

  --color-feedback-success-bg: var(--color-sage-900);
  --color-feedback-warning-bg: var(--color-amber-900);
  --color-feedback-danger-bg: var(--color-crimson-900);
  --color-feedback-info-bg: var(--color-azure-900);
}

/* prefers-color-scheme is intentionally NOT auto-applied — site chrome
   (donation CTAs, institutional trust signals) reads best in light mode by
   default; dark mode is opt-in via the `.dark` class only. */

}

@layer base {
/* Modern reset — minimal, opinionated only where it removes browser
   inconsistencies. Does not zero out all default spacing (headings/lists
   keep sensible defaults token-driven typography can build on). */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin-block: 0;
}

ul[class], ol[class] {
  padding-inline-start: 0;
  list-style: none;
}

img, picture, svg {
  display: block;
  max-width: 100%;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

table {
  border-collapse: collapse;
}

}
@layer base {
/* Document-level defaults. Font family switches automatically for Hebrew
   content via [lang="he"]/[dir="rtl"] — never assume the Latin font works
   for Hebrew glyphs (it doesn't; Fraunces/Inter have no Hebrew coverage). */

html {
  color-scheme: light;
}
html.dark,
html[data-theme="dark"] {
  color-scheme: dark;
}

body {
  background-color: var(--color-background-page);
  color: var(--color-text-primary);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
  -webkit-font-smoothing: antialiased;
}

[lang="he"],
[dir="rtl"] {
  font-family: var(--font-family-hebrew-body);
}

/* Logical-property-based direction handling: content authored dir="rtl"
   (or html[dir="rtl"] set by the i18n layer for the "he" locale) flips
   automatically anywhere the CSS uses *-inline-*/*-block-* properties
   instead of left/right — see docs/rtl.md. */
html[dir="rtl"] {
  direction: rtl;
}

::selection {
  background-color: var(--color-azure-200);
  color: var(--color-ink-900);
}

:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Only :focus-visible gets a ring — mouse clicks don't show one, matching
   the brief's "estados de foco" requirement without visual noise on click. */
:focus:not(:focus-visible) {
  outline: none;
}

}
@layer base {
/* Base element typography — every heading/paragraph in the project inherits
   from here by default. Components may override via their own classes, but
   nothing should hardcode a font-size/family outside tokens+this file. */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
}

/* h1 specifically matches the real site's sampled weight (900/font-weight-bold);
   h2-h6 use the lighter --font-weight-semibold (700) as a graduated scale —
   only h1's weight was directly confirmed live, this is a reasonable
   assumption for the rest, not a second measurement. */
h1 {
  font-weight: var(--font-weight-bold);
}

[lang="he"] h1, [lang="he"] h2, [lang="he"] h3,
[lang="he"] h4, [lang="he"] h5, [lang="he"] h6,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 {
  font-family: var(--font-family-hebrew-display);
  letter-spacing: var(--letter-spacing-normal);
}

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }
h5 { font-size: var(--font-size-h5); }
h6 { font-size: var(--font-size-h6); }

p {
  max-width: var(--measure);
}

small {
  font-size: var(--font-size-body-sm);
}

/* Eyebrow / overline label — the "JULY 2026 NEWSLETTER" pattern audited on
   chosenpeople.com, formalized as a reusable class instead of one-off markup. */
.c-eyebrow {
  display: inline-block;
  font-family: var(--font-family-body);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-brand-accent);
}

.c-eyebrow--rule {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
}

.c-eyebrow--rule::before {
  content: "";
  display: block;
  inline-size: 1.25rem;
  block-size: 1px;
  background: currentColor;
  opacity: 0.7;
}

.c-eyebrow--index {
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.c-caption {
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}

code, kbd, samp, pre {
  font-family: var(--font-family-mono);
  font-size: 0.9em;
}

}
@layer base {
/* Responsive media defaults. */

img, video, canvas, svg {
  height: auto;
}

img {
  border-radius: 0; /* components opt in to radius via tokens, base stays neutral */
}

figure {
  margin: 0;
}

figcaption {
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
  margin-block-start: var(--space-2);
}

iframe {
  max-width: 100%;
  border: 0;
}

/* aspect-ratio helpers for hero/video embeds, avoids CLS */
.u-aspect-16-9 { aspect-ratio: 16 / 9; }
.u-aspect-4-3 { aspect-ratio: 4 / 3; }
.u-aspect-1-1 { aspect-ratio: 1 / 1; }
.u-aspect-3-2 { aspect-ratio: 3 / 2; }

}
@layer base {
/* Base form element normalization. Visual styling of the *field* component
   itself lives in components/field.css — this file only removes browser
   inconsistencies so that layer can start from a clean, predictable base. */

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="image"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
textarea,
select {
  appearance: none;
  background-color: var(--color-background-page);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  width: 100%;
}

input[type="checkbox"],
input[type="radio"] {
  appearance: auto;
  inline-size: 1.1rem;
  block-size: 1.1rem;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--color-brand-secondary);
  cursor: pointer;
}

textarea {
  resize: vertical;
  min-block-size: 6rem;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

input:disabled,
textarea:disabled,
select:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-inline-size: 0;
}

legend {
  padding: 0;
  font-weight: var(--font-weight-semibold);
}

label {
  display: inline-block;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  margin-block-end: var(--space-1);
}

}
@layer base {
/* Global prefers-reduced-motion guard. Every transition/animation in this
   project is written assuming this rule exists — components don't need to
   repeat their own reduced-motion media query. */

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

}

@layer layout {
/* Container widths — narrow (reading), default, wide, full-bleed.
   Uses inline-* logical properties throughout so RTL flips for free. */

.l-container {
  width: 100%;
  max-width: var(--container-default);
  margin-inline: auto;
  padding-inline: var(--space-container-x);
}

.l-container--narrow {
  max-width: var(--container-narrow);
}

.l-container--wide {
  max-width: var(--container-wide);
}

.l-container--full {
  max-width: none;
  padding-inline: 0;
}

}
@layer layout {
/* 12-column CSS Grid for desktop, simplified for tablet/mobile. No tables,
   no framework grid classes — native CSS Grid + Flexbox only, per the brief. */

.l-grid {
  display: grid;
  gap: var(--grid-gutter);
  grid-template-columns: repeat(4, 1fr);
}

@media (min-width: 577px) {
  .l-grid {
    grid-template-columns: repeat(8, 1fr);
  }
}

@media (min-width: 992px) {
  .l-grid {
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    gap: var(--grid-gutter);
  }
}

.l-grid--gap-sm { gap: var(--grid-gutter-sm); }

/* span utilities — only the handful actually needed; not a full 1-12 set */
.l-col-span-2 { grid-column: span 2; }
.l-col-span-3 { grid-column: span 3; }
.l-col-span-4 { grid-column: span 4; }
.l-col-span-6 { grid-column: span 6; }
.l-col-span-8 { grid-column: span 8; }
.l-col-span-12 { grid-column: 1 / -1; }

/* simple flex row for cases that don't need full grid semantics */
.l-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gutter);
}

}
@layer layout {
/* Full-width page sections — the alternating-background rhythm audited on
   chosenpeople.com's home (white / muted / brand / white...). */

.l-section {
  padding-block: var(--space-section-y);
}

.l-section--tight {
  padding-block: var(--space-section-y-tight);
}

.l-section--surface { background-color: var(--color-background-surface); }
.l-section--muted { background-color: var(--color-background-muted); }
.l-section--brand {
  background-color: var(--color-background-brand);
  color: var(--color-text-inverse);
}
.l-section--inverse {
  background-color: var(--color-background-inverse);
  color: var(--color-text-inverse);
}

.l-section--brand h1, .l-section--brand h2, .l-section--brand h3,
.l-section--inverse h1, .l-section--inverse h2, .l-section--inverse h3 {
  color: var(--color-text-inverse);
}

}
@layer layout {
/* "Flow" utility — consistent vertical rhythm between arbitrary sibling
   elements without margin-collapsing guesswork (owl-selector pattern). */

.l-flow > * + * {
  margin-block-start: var(--space-stack-md);
}

.l-flow--sm > * + * {
  margin-block-start: var(--space-stack-sm);
}

.l-flow--lg > * + * {
  margin-block-start: var(--space-stack-lg);
}

}

@layer elements {
/* Inline text links (inside prose) — NOT the button component. */

.c-link {
  color: var(--color-text-link);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 0.15em;
  transition: color var(--duration-fast) var(--ease-standard);
}

.c-link:hover {
  color: var(--color-text-link-hover);
  text-decoration-color: currentColor;
}

.c-link:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* "link with arrow" pattern from the audit ("About us →", "All Topics →") */
.c-link--arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
}
.c-link--arrow:hover .c-link__arrow-icon {
  transform: translateX(0.2em);
}
[dir="rtl"] .c-link--arrow:hover .c-link__arrow-icon {
  transform: translateX(-0.2em);
}
.c-link__arrow-icon {
  transition: transform var(--duration-fast) var(--ease-standard);
}

}
@layer elements {
/* Editorial list styling (article body content — bulleted/numbered lists
   inside long-form text, not navigation lists which stay list-style:none
   from the reset). */

.c-prose ul,
.c-prose ol {
  padding-inline-start: 1.25em;
  max-width: var(--measure);
}

.c-prose ul { list-style: disc; }
.c-prose ol { list-style: decimal; }

.c-prose li + li {
  margin-block-start: var(--space-2);
}

.c-prose li::marker {
  color: var(--color-brand-accent);
}

}
@layer elements {
/* Blockquote + pull-quote — editorial content patterns explicitly requested
   ("pull quote", "blockquote", "nota editorial"). */

.c-blockquote {
  border-inline-start: 3px solid var(--color-brand-accent);
  padding-inline-start: var(--space-4);
  font-style: italic;
  color: var(--color-text-secondary);
  max-width: var(--measure);
}

.c-pull-quote {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  color: var(--color-text-primary);
  max-width: var(--measure-narrow);
  margin-block: var(--space-8);
}

.c-pull-quote__attribution {
  display: block;
  margin-block-start: var(--space-2);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-sm);
  font-style: normal;
  color: var(--color-text-muted);
}

[lang="he"] .c-pull-quote,
[dir="rtl"] .c-pull-quote {
  font-family: var(--font-family-hebrew-display);
}

}
@layer elements {
/* Badge — small status/category label (article category tag, content-type
   label like "VIDEO"/"PODCAST", admin status pill). */

.c-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding-inline: var(--space-2);
  padding-block: 0.15em;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  line-height: var(--line-height-normal);
  white-space: nowrap;
}

.c-badge--neutral {
  background-color: var(--color-background-muted);
  color: var(--color-text-secondary);
}
.c-badge--brand {
  background-color: var(--color-ink-800);
  color: var(--color-text-inverse);
}
.c-badge--accent {
  background-color: var(--color-gold-100);
  color: var(--color-gold-800);
}
.c-badge--success {
  background-color: var(--color-feedback-success-bg);
  color: var(--color-feedback-success-text);
}
.c-badge--warning {
  background-color: var(--color-feedback-warning-bg);
  color: var(--color-feedback-warning-text);
}
.c-badge--danger {
  background-color: var(--color-feedback-danger-bg);
  color: var(--color-feedback-danger-text);
}
.c-badge--info {
  background-color: var(--color-feedback-info-bg);
  color: var(--color-feedback-info-text);
}

/* Categorical variants (1-6) — ministry/topic tagging, always dark ink text
   on a light tint so contrast stays AA-safe regardless of hue picked. */
.c-badge--category-1 { background-color: color-mix(in srgb, var(--color-category-1) 15%, white); color: var(--color-category-1); }
.c-badge--category-2 { background-color: color-mix(in srgb, var(--color-category-2) 15%, white); color: var(--color-azure-800); }
.c-badge--category-3 { background-color: color-mix(in srgb, var(--color-category-3) 15%, white); color: var(--color-sage-900); }
.c-badge--category-4 { background-color: color-mix(in srgb, var(--color-category-4) 18%, white); color: var(--color-gold-800); }
.c-badge--category-5 { background-color: color-mix(in srgb, var(--color-category-5) 15%, white); color: var(--color-terracotta-700); }
.c-badge--category-6 { background-color: color-mix(in srgb, var(--color-category-6) 15%, white); color: var(--color-teal-700); }

}
@layer elements {
/* Icon sizing — the SVG itself always uses stroke="currentColor" (see
   app/Views/components/icon.php), so color always comes from the
   surrounding text color; only size is controlled here. */

.c-icon {
  display: inline-block;
  flex: none;
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.2em;
}

.c-icon--xs { width: 0.875rem; height: 0.875rem; }
.c-icon--sm { width: 1rem; height: 1rem; }
.c-icon--md { width: 1.25rem; height: 1.25rem; }
.c-icon--lg { width: 1.75rem; height: 1.75rem; }

}

@layer components {
/* Hero — full-bleed photo background, dark scrim, overlaid transparent
   header (components/header.css .c-header--transparent). Structure/copy
   matches the real chosenpeople.com home hero (copied exactly per request,
   2026-08-05 — see docs/design-principles.md). */

.c-hero {
  position: relative;
  min-block-size: clamp(38rem, calc(100svh - var(--space-12)), 70rem);
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--color-text-inverse);
}

.c-hero__media {
  position: absolute;
  inset: 0;
}

.c-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.c-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--color-ink-900) 82%, transparent) 0%,
    color-mix(in srgb, var(--color-ink-900) 55%, transparent) 45%,
    color-mix(in srgb, var(--color-ink-900) 20%, transparent) 100%
  );
}

/* .c-hero__container reuses .l-container's own max-width/centering/padding
   (same as the header's container) so its LEFT EDGE lines up exactly with
   the logo/nav above it — see docs/design-principles.md rule 9. The text
   column width constraint lives on the nested .c-hero__content instead,
   which deliberately does NOT set margin-inline/max-width in a way that
   fights .l-container's own centering (that conflict — two elements both
   claiming max-width + auto-centering — was the original misalignment bug). */
.c-hero__container {
  position: relative;
  z-index: 1;
  padding-block: var(--space-24) var(--space-12);
}

.c-hero__content {
  max-width: min(100%, 78rem);
}

.c-hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  margin-block-end: var(--space-2);
}

.c-hero__title {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  color: var(--color-text-inverse);
}

.c-hero__subtitle {
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-azure-200);
  margin-block-start: var(--space-4);
}

.c-hero__cta {
  margin-block-start: var(--space-6);
}

/* The home hero CTA is a saturated blue block with an arrow, matching the
   provided chosenpeople.com reference. */
.c-hero__cta .c-btn {
  flex-direction: row-reverse;
  min-block-size: 3.75rem;
  min-inline-size: 11.5rem;
  padding-inline: var(--space-6);
  border-radius: var(--radius-md);
  font-size: var(--font-size-body);
  box-shadow: var(--shadow-sm);
}

.c-hero__cta .c-btn--secondary {
  background-color: var(--color-azure-600);
  border-color: var(--color-azure-600);
  color: var(--color-text-inverse);
}
.c-hero__cta .c-btn--secondary:hover {
  background-color: var(--color-azure-700);
  border-color: var(--color-azure-700);
}

.c-hero--compact {
  min-block-size: clamp(18rem, 34vw, 28rem);
}

.c-hero--compact .c-hero__container {
  padding-block: var(--space-16) var(--space-10);
}

.c-hero--compact .c-hero__title { font-size: clamp(2rem, 5vw, 4rem); }

@media (max-width: 320px) {
  .c-hero {
    min-block-size: clamp(30rem, 90svh, 34rem);
  }

  .c-hero__container {
    padding-block: var(--space-16) var(--space-8);
  }

  .c-hero__content {
    max-inline-size: 31rem;
  }

  .c-hero__title {
    font-size: clamp(2rem, 8vw, 2.35rem);
    line-height: 1.08;
  }

  .c-hero__subtitle {
    font-size: var(--font-size-body-lg);
    line-height: var(--line-height-snug);
  }

  .c-hero--compact {
    min-block-size: clamp(14rem, 58vw, 18rem);
  }

  .c-hero--compact .c-hero__container {
    padding-block: var(--space-12) var(--space-8);
  }

  .c-hero--compact .c-hero__title {
    font-size: clamp(1.8rem, 8vw, 2.25rem);
  }
}

@media (min-width: 321px) and (max-width: 576px) {
  .c-hero {
    min-block-size: clamp(32rem, 88svh, 38rem);
  }

  .c-hero__container {
    padding-block: var(--space-20) var(--space-10);
  }

  .c-hero__title {
    font-size: clamp(2.15rem, 8vw, 2.75rem);
    line-height: 1.08;
  }

  .c-hero__subtitle {
    font-size: var(--font-size-body-lg);
    line-height: var(--line-height-snug);
  }

  .c-hero--compact {
    min-block-size: clamp(16rem, 56vw, 20rem);
  }

  .c-hero--compact .c-hero__title {
    font-size: clamp(2rem, 7vw, 2.75rem);
  }
}

@media (min-width: 577px) and (max-width: 767px) {
  .c-hero {
    min-block-size: clamp(34rem, 82svh, 42rem);
  }

  .c-hero--compact {
    min-block-size: clamp(18rem, 42vw, 22rem);
  }
}

}
@layer components {
/* Button — variants: primary, secondary, tertiary, donation, destructive.
   Sizes: sm, md (default), lg. States: default/hover/focus-visible/active/
   disabled/loading, all handled here (never inline style, never a one-off
   page-specific button). Paired PHP component: app/Views/components/button.php */

.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-body-sm);
  line-height: 1;
  padding-block: var(--space-3);
  padding-inline: var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}

.c-btn:active {
  transform: translateY(1px);
}

.c-btn:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.c-btn[disabled],
.c-btn[aria-disabled="true"] {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

/* ---- Sizes ---- */
.c-btn--sm { padding-block: var(--space-2); padding-inline: var(--space-3); font-size: var(--font-size-caption); }
.c-btn--lg { padding-block: var(--space-4); padding-inline: var(--space-6); font-size: var(--font-size-body); }

/* ---- Variant: primary ---- */
.c-btn--primary {
  background-color: var(--color-action-primary-bg);
  color: var(--color-action-primary-text);
}
.c-btn--primary:hover { background-color: var(--color-action-primary-bg-hover); }

/* ---- Variant: secondary (outline) ---- */
.c-btn--secondary {
  background-color: var(--color-action-secondary-bg);
  color: var(--color-action-secondary-text);
  border-color: var(--color-action-secondary-border);
}
.c-btn--secondary:hover { background-color: var(--color-action-secondary-bg-hover); }

/* ---- Variant: tertiary (text-only) ---- */
.c-btn--tertiary {
  background-color: transparent;
  color: var(--color-action-tertiary-text);
  padding-inline: var(--space-2);
}
.c-btn--tertiary:hover { color: var(--color-action-tertiary-text-hover); text-decoration: underline; }

/* ---- Variant: donation (brand-accent gold, always dark text — see
   docs/design-principles.md contrast note; never white-on-gold) ---- */
.c-btn--donation {
  background-color: var(--color-action-donation-bg);
  color: var(--color-action-donation-text);
}
.c-btn--donation:hover { background-color: var(--color-action-donation-bg-hover); }

/* ---- Variant: destructive ---- */
.c-btn--destructive {
  background-color: var(--color-action-destructive-bg);
  color: var(--color-action-destructive-text);
}
.c-btn--destructive:hover { background-color: var(--color-crimson-900); }

/* ---- Icon-only ---- */
.c-btn--icon-only {
  padding: var(--space-3);
  aspect-ratio: 1;
}
.c-btn--icon-only.c-btn--sm { padding: var(--space-2); }

/* ---- Loading state ---- */
.c-btn--loading {
  /* Relies on source order (this rule is declared after every variant in
     this file) to win the color property without !important — same
     specificity, later wins. Keep this rule below the variants. */
  color: transparent;
  pointer-events: none;
  position: relative;
}
.c-btn--loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-inline-start-color: transparent;
  color: var(--color-action-primary-text);
  animation: c-btn-spin var(--duration-slow) linear infinite;
}
.c-btn--secondary.c-btn--loading::after,
.c-btn--tertiary.c-btn--loading::after { color: var(--color-action-secondary-text); }

@keyframes c-btn-spin {
  to { transform: rotate(360deg); }
}

/* ---- Group ---- */
.c-btn-group {
  display: inline-flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

}
@layer components {
/* Card — base + variants (article, resource, category-tile). Paired PHP
   component: app/Views/components/card.php.

   Accessibility note (per the brief): the whole card is never one giant
   <a> wrapping everything — only the title link is a real link, with a
   ::after "stretched link" trick so the whole card is clickable without
   turning nested interactive elements (author link, category badge link)
   into an illegal nested-link / broken focus trap. */

.c-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--color-background-page);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--duration-normal) var(--ease-standard),
              transform var(--duration-normal) var(--ease-standard);
}

.c-card:hover {
  box-shadow: var(--shadow-md);
}

.c-card__media {
  aspect-ratio: 16 / 9;
  background-color: var(--color-background-muted);
  overflow: hidden;
}
.c-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-card-padding);
  flex: 1;
}

.c-card__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.c-card__title {
  font-size: var(--font-size-h6);
  line-height: var(--line-height-snug);
  margin: 0;
  overflow-wrap: anywhere;
}

.c-card__title-link {
  color: var(--color-text-primary);
  text-decoration: none;
}
.c-card__title-link::after {
  /* stretched-link: makes the whole card clickable via this one real link */
  content: "";
  position: absolute;
  inset: 0;
}
.c-card__title-link:hover {
  text-decoration: underline;
}
.c-card__title-link:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.c-card__excerpt {
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-sm);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.c-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
  margin-block-start: auto;
  padding-block-start: var(--space-2);
}

/* ---- Variant: compact (no media) ---- */
.c-card--compact .c-card__body {
  padding: var(--space-4);
}

/* ---- Variant: horizontal ---- */
.c-card--horizontal {
  flex-direction: row;
}
.c-card--horizontal .c-card__media {
  width: 40%;
  aspect-ratio: auto;
}

/* ---- Variant: category tile (solid color block, "What We Do" pattern) ---- */
.c-card--category {
  align-items: flex-start;
  justify-content: flex-end;
  min-block-size: 12rem;
  color: var(--color-text-inverse);
  border: none;
}
.c-card--category .c-card__body {
  padding: var(--space-4);
}
/* Explicit tokens, not `color: inherit` — the <h3>.c-card__title between the
   card and this link has its own `color` from base/typography.css, which
   would break a simple inherit chain (the link would inherit the heading's
   dark color instead of the card's light one). Set both directly instead. */
.c-card--category .c-card__title,
.c-card--category .c-card__title-link {
  color: var(--color-text-inverse);
}
.c-card--category-1 { background-color: var(--color-category-1); }
.c-card--category-2 { background-color: var(--color-category-2); }
.c-card--category-3 { background-color: var(--color-category-3); }
.c-card--category-4 { background-color: var(--color-category-4); }
.c-card--category-4 .c-card__title,
.c-card--category-4 .c-card__title-link { color: var(--color-ink-900); }
.c-card--category-5 { background-color: var(--color-category-5); }
.c-card--category-6 { background-color: var(--color-category-6); }

/* ---- Variant: featured (larger title, used for the "Latest Articles"
   featured slot pattern audited on the home page) ---- */
.c-card--featured .c-card__title {
  font-size: var(--font-size-h3);
  font-family: var(--font-family-display);
}

}
@layer components {
/* Site header — logo, desktop nav w/ dropdowns, donate CTA, mobile trigger.
   Mobile panel itself (drawer) is a separate pattern (patterns/mobile-nav.css,
   follow-up work — see docs/design-system-summary.md). This file covers the
   desktop bar + the trigger button markup/states so mobile isn't broken,
   even though the animated drawer behavior isn't wired up yet. */

.c-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-header);
  background-color: var(--color-background-page);
  border-block-end: 1px solid var(--color-border-default);
}

/* Overlay variant — sits directly on top of a photo/video hero, no
   background of its own (matches the real chosenpeople.com home header:
   `class="navigation transparent text-white"`). Absolutely positioned so it
   doesn't push the hero down; the hero itself reserves the visual space. */
.c-header--transparent {
  position: absolute;
  inset-inline: 0;
  top: 0;
  background-color: transparent;
  border-block-end-color: transparent;
  color: var(--color-text-inverse);
}
.c-header--transparent .c-header__nav-link,
.c-header--transparent .c-header__mobile-trigger,
.c-header--transparent .c-header__actions .c-btn--tertiary {
  color: var(--color-text-inverse);
}
/* Hover/active state is deliberately the SAME pill (bg + text color) in both
   the transparent (over-hero) and solid header states — confirmed live on
   the real site: hovering a nav item over the hero still shows the light
   cobalt-100 pill, not just a text-color change. See the :hover/:focus-within
   rule below, which isn't scoped to --transparent for that reason. */

.c-header__bar {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--space-3);
}

/* Fixed bounding box, not just a fixed height — logo-color.webp and
   logo-white.webp are two genuinely different real lockups (~5.9:1 wide vs
   ~1.9:1 near-square), not color variants of the same file. Constraining by
   height alone made the wide one render much bigger than the square one.
   object-fit: contain keeps both proportional and visually consistent
   inside the same slot regardless of which file is active. */
.c-header__logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  block-size: 2.75rem;
  inline-size: 9rem;
}

@media (min-width: 1200px) {
  .c-header__bar {
    display: grid;
    grid-template-columns: minmax(16rem, 16rem) minmax(0, 1fr) auto;
    gap: var(--space-4);
  }

  .c-header__logo {
    justify-self: start;
    block-size: 3.1rem;
    inline-size: 10.75rem;
  }

  .c-header--transparent .c-header__logo {
    block-size: 5.25rem;
    inline-size: 10.5rem;
  }
}

.c-header__logo img {
  max-block-size: 100%;
  max-inline-size: 100%;
  width: auto;
  height: auto;
}

/* CPBI wordmark is wider (~6.6:1) than the CPM logo */
.c-header__logo--cpbi {
  inline-size: 12.5rem;
}

@media (min-width: 1200px) {
  .c-header__logo--cpbi {
    inline-size: 14.5rem;
  }

  .c-header--transparent .c-header__logo--cpbi {
    block-size: 3.25rem;
    inline-size: 16rem;
  }
}

.c-header__nav {
  display: none;
  align-items: center;
  gap: var(--space-4);
  margin-inline-start: var(--space-6);
  min-inline-size: 0;
}

@media (min-width: 1200px) {
  .c-header__nav {
    display: flex;
    flex-wrap: nowrap;
    justify-self: center;
    margin-inline-start: 0;
  }
  .c-header__mobile-trigger { display: none; }
}

.c-header__nav-link {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: var(--space-1);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-nav-link);
  white-space: nowrap;
  color: var(--color-text-primary);
  padding-inline: var(--space-3);
  padding-block: var(--space-2);
  border-radius: var(--radius-full);
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}

/* Real-site-matched hover/active pill — same in both header states (see
   note above .c-header--transparent). :focus-within on the wrapper (below)
   reuses this rule too, so keyboard nav gets the identical treatment. */
.c-header__nav-link:hover,
.c-header__dropdown:focus-within .c-header__nav-link,
.c-header__dropdown[data-open="true"] .c-header__nav-link {
  background-color: var(--color-nav-hover-bg);
  color: var(--color-nav-hover-text);
}

/* ---- Dropdown ---- */
.c-header__dropdown {
  position: relative;
}

.c-header__dropdown-panel {
  position: absolute;
  inset-inline-start: 0;
  top: 100%;
  padding-block-start: var(--space-3);
  min-inline-size: 15rem;
  max-inline-size: 18rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.25rem);
  transition: opacity var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard),
              visibility 0s linear var(--duration-fast);
}

/* Shows on hover OR keyboard focus-within (no JS required — matches the
   real site's CSS-only :hover dropdown) OR when JS has set data-open="true"
   (click/touch enhancement — see assets/js/dropdown.js). */
.c-header__dropdown:hover .c-header__dropdown-panel,
.c-header__dropdown:focus-within .c-header__dropdown-panel,
.c-header__dropdown[data-open="true"] .c-header__dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.c-header__dropdown-panel__inner {
  overflow: hidden;
  background-color: var(--color-nav-panel-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: var(--color-nav-panel-shadow);
  border-radius: var(--radius-sm);
}

.c-header__dropdown-item {
  display: block;
  padding: var(--space-3);
  border-block-end: 1px solid var(--color-border-default);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--color-nav-item-text);
}
.c-header__dropdown-item:last-child {
  border-block-end: none;
}
.c-header__dropdown-item:hover,
.c-header__dropdown-item:focus-visible {
  color: var(--color-nav-hover-text);
}

/* ---- Actions (search, donate) ---- */
.c-header__actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--space-2);
  margin-inline-start: auto;
}

.c-header__account-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--radius-full);
  color: currentColor;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}

.c-header__account-link:hover,
.c-header__account-link:focus-visible {
  background-color: var(--color-nav-hover-bg);
  color: var(--color-nav-hover-text);
}

.c-header__actions .c-btn--donation {
  min-block-size: 3.75rem;
  min-inline-size: 7.4rem;
  padding-inline: var(--space-5);
  font-size: var(--font-size-body);
}

.c-header--transparent .c-header__actions .c-btn--donation {
  min-block-size: 4.375rem;
}

/* ---- Mobile trigger ---- */
.c-header__mobile-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
}

@media (max-width: 1199px) {
  .c-header__bar {
    gap: var(--space-3);
    padding-block: var(--space-2);
  }

  .c-header__logo,
  .c-header--transparent .c-header__logo {
    block-size: 3rem;
    inline-size: 7rem;
  }

  .c-header__actions {
    gap: var(--space-2);
  }

  .c-header__search-trigger,
  .c-header__account-link {
    display: none;
  }

  .c-header__actions .c-btn--donation,
  .c-header--transparent .c-header__actions .c-btn--donation {
    min-block-size: 2.75rem;
    min-inline-size: 5.75rem;
    padding-inline: var(--space-3);
    font-size: var(--font-size-caption);
  }
}

@media (max-width: 320px) {
  .c-header__logo,
  .c-header--transparent .c-header__logo {
    inline-size: 6.5rem;
  }
}

@media (min-width: 1200px) {
  .c-header__actions {
    justify-self: end;
    margin-inline-start: 0;
  }

  .c-header__mobile-trigger { display: none; }
}
.c-header__mobile-trigger:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.c-header__search-panel,
.c-header__mobile-panel {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  color: var(--color-text-primary);
  background-color: var(--color-background-page);
  border-block: 1px solid var(--color-border-default);
  box-shadow: var(--shadow-md);
}

.c-header__search-panel[hidden],
.c-header__mobile-panel[hidden] {
  display: none;
}

.c-header__search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--space-3);
  align-items: end;
  padding-block: var(--space-4);
}

.c-header__search-form label {
  display: grid;
  gap: var(--space-1);
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-sm);
}

.c-header__search-form input,
.c-header__mobile-search input {
  inline-size: 100%;
  min-block-size: 3rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding-inline: var(--space-3);
  background: var(--color-background-page);
  color: var(--color-text-primary);
}

.c-header__mobile-panel {
  max-block-size: calc(100svh - 4rem);
  overflow: auto;
  padding-block: var(--space-4);
}

.c-header__mobile-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.c-header__mobile-panel-title {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.c-header__mobile-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-block-size: 2.75rem;
  min-inline-size: 2.75rem;
  padding: var(--space-2);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  background: var(--color-background-page);
}

.c-header__mobile-close:hover,
.c-header__mobile-close:focus-visible {
  background: var(--color-background-muted);
}

.c-header__mobile-close:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.c-header__mobile-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
}

.c-header__mobile-search button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 3rem;
  border-radius: var(--radius-sm);
  background: var(--color-action-primary-bg);
  color: var(--color-action-primary-text);
}

.c-header__mobile-nav {
  display: grid;
  gap: var(--space-1);
}

.c-header__mobile-nav a {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
}

.c-header__mobile-nav a:hover,
.c-header__mobile-nav a:focus-visible {
  background: var(--color-background-muted);
}

.c-header__mobile-child {
  margin-inline-start: var(--space-4);
  color: var(--color-text-secondary) !important;
  font-weight: var(--font-weight-regular) !important;
}

.c-header__mobile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ---- Utility bar (optional thin strip above the main header — announcement,
   language switcher, contact info) ---- */
.c-utility-bar {
  background-color: var(--color-background-inverse);
  color: var(--color-text-inverse);
  font-size: var(--font-size-caption);
}
.c-utility-bar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-1);
}
.c-utility-bar a {
  color: inherit;
  text-decoration: underline;
}

}
@layer components {
/* Site footer — institutional (navy), 4 link columns + social + legal row,
   pattern audited on chosenpeople.com's current footer. */

.c-footer {
  background-color: var(--color-background-inverse);
  color: var(--color-text-inverse);
  padding-block: var(--space-16) var(--space-6);
}

.c-footer__top {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
  padding-block-end: var(--space-12);
}

.c-footer__brand {
  --footer-brand-width: min(100%, 28rem);
}

@media (min-width: 577px) and (max-width: 991px) {
  .c-footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .c-footer__top { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.c-footer__brand-logo-box {
  display: block;
  inline-size: min(100%, 14rem);
  max-inline-size: 100%;
}

.c-footer__brand-logo {
  display: block;
  inline-size: 100%;
  height: auto;
  max-inline-size: 100%;
  /* logo-white.webp is already a white asset — no filter hack needed. */
}

.c-footer__blurb {
  font-size: var(--font-size-caption);
  color: var(--color-neutral-300);
  margin-block-start: var(--space-3);
  inline-size: var(--footer-brand-width);
  max-inline-size: 100%;
}

.c-footer__heading {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-neutral-300);
  margin-block-end: var(--space-3);
}

.c-footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.c-footer__list a {
  color: var(--color-neutral-100);
  font-size: var(--font-size-body-sm);
}
.c-footer__list a:hover {
  color: var(--color-text-inverse);
  text-decoration: underline;
}

.c-footer__social {
  display: flex;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
}
.c-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.08);
}
.c-footer__social a:hover {
  background-color: rgba(255, 255, 255, 0.16);
}

.c-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--color-border-inverse);
  font-size: var(--font-size-caption);
  color: var(--color-neutral-400);
}
.c-footer__legal a { color: inherit; }
.c-footer__legal a:hover { color: var(--color-text-inverse); }

}
@layer components {
/* Alert — inline feedback banner (form errors, success confirmations, page
   notices). Distinct from Toast (transient, floating — patterns/toast.css,
   follow-up) and from Badge (compact inline label, elements/badge.css). */

.c-alert {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--font-size-body-sm);
}

.c-alert__icon {
  flex: none;
  margin-block-start: 0.1em;
}

.c-alert__body {
  flex: 1;
}

.c-alert__title {
  font-weight: var(--font-weight-semibold);
  margin-block-end: var(--space-1);
}

.c-alert__dismiss {
  flex: none;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
}
.c-alert__dismiss:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.c-alert--info {
  background-color: var(--color-feedback-info-bg);
  border-color: var(--color-azure-200);
  color: var(--color-feedback-info-text);
}
.c-alert--success {
  background-color: var(--color-feedback-success-bg);
  border-color: var(--color-sage-300);
  color: var(--color-feedback-success-text);
}
.c-alert--warning {
  background-color: var(--color-feedback-warning-bg);
  border-color: var(--color-amber-300);
  color: var(--color-feedback-warning-text);
}
.c-alert--danger {
  background-color: var(--color-feedback-danger-bg);
  border-color: var(--color-crimson-300);
  color: var(--color-feedback-danger-text);
}

}
@layer components {
/* Field wrapper — label + input/textarea/select + helper/error text, as one
   composed unit. The base input/textarea/select visual reset lives in
   base/forms.css; this file is the *field composition* (states + spacing). */

.c-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.c-field__label {
  margin: 0;
}

.c-field__required {
  color: var(--color-feedback-danger-text);
  margin-inline-start: var(--space-1);
}

.c-field__control:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 1px;
  border-color: var(--color-focus-ring);
}

.c-field__helper {
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}

.c-field--error .c-field__control {
  border-color: var(--color-feedback-danger-text);
}
.c-field__error {
  font-size: var(--font-size-caption);
  color: var(--color-feedback-danger-text);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.c-field--success .c-field__control {
  border-color: var(--color-feedback-success-text);
}

/* Checkbox / radio / switch share this row layout */
.c-field--choice {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-2);
}
.c-field--choice .c-field__control {
  width: auto;
  margin-block-start: 0.2em;
  accent-color: var(--color-brand-secondary);
}
.c-field--choice .c-field__label {
  margin: 0;
  font-weight: var(--font-weight-regular);
}

/* Switch (toggle) */
.c-switch {
  position: relative;
  display: inline-block;
  inline-size: 2.5rem;
  block-size: 1.5rem;
}
.c-switch__input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.c-switch__track {
  position: absolute;
  inset: 0;
  background-color: var(--color-neutral-300);
  border-radius: var(--radius-full);
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.c-switch__thumb {
  position: absolute;
  inset-block-start: 0.15rem;
  inset-inline-start: 0.15rem;
  inline-size: 1.2rem;
  block-size: 1.2rem;
  background-color: var(--color-neutral-0);
  border-radius: var(--radius-full);
  transition: inset-inline-start var(--duration-fast) var(--ease-standard);
}
.c-switch__input:checked + .c-switch__track {
  background-color: var(--color-brand-secondary);
}
.c-switch__input:checked + .c-switch__track .c-switch__thumb {
  inset-inline-start: 1.15rem;
}
.c-switch__input:focus-visible + .c-switch__track {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

}
@layer components {
/* Skip link — visually hidden until focused, first focusable element on
   every page (see app/Views/layouts/site.php). */

.c-skip-link {
  position: absolute;
  inset-inline-start: var(--space-2);
  top: -3rem;
  z-index: var(--z-toast);
  background-color: var(--color-ink-900);
  color: var(--color-text-inverse);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  transition: top var(--duration-fast) var(--ease-standard);
}

.c-skip-link:focus {
  top: var(--space-2);
}

}

@layer patterns {
/* Page-specific patterns — recurring compositions that aren't generic
   enough (yet) to be reusable components. If a second page needs the same
   shape, promote it into components/ instead of duplicating it here. */

.p-home-newsletter__grid {
  align-items: center;
}

.p-home-newsletter__form {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.p-home-newsletter__field {
  flex: 1;
  min-inline-size: 14rem;
}

.p-fixture-notice {
  padding-block: var(--space-4);
}

/* Error pages (404/500) — simple centered notice, shared shape. */
.p-error-notice {
  padding-block: var(--space-24);
  text-align: center;
}

.p-section-heading {
  max-inline-size: 48rem;
}

.p-section-heading--center {
  margin-inline: auto;
  text-align: center;
}

.p-section-heading--center p {
  margin-inline: auto;
}

.p-section-heading > * + * {
  margin-block-start: var(--space-2);
}

.p-home-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}

.p-home-centered p {
  margin-inline: auto;
}

.p-section-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-6);
}

.p-section-intro__copy h2 {
  max-inline-size: 14ch;
  margin: 0;
  font-size: clamp(2.5rem, 1.8rem + 2.4vw, 4.5rem);
  font-weight: var(--font-weight-medium);
  line-height: 0.94;
  letter-spacing: -0.04em;
}

.p-section-intro__aside {
  display: none;
  max-inline-size: 28ch;
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-relaxed);
}

.p-section-intro__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-primary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
}

.p-section-intro__link:hover,
.p-section-intro__link:focus-visible {
  color: var(--color-text-link-hover);
}

.p-section-intro--inverse .p-section-intro__copy h2 {
  color: var(--color-text-inverse);
}

.p-section-intro--inverse .c-eyebrow--rule {
  color: color-mix(in srgb, var(--color-text-inverse) 62%, transparent);
}

.p-section-intro--inverse .p-section-intro__aside {
  color: color-mix(in srgb, var(--color-text-inverse) 68%, transparent);
}

.p-services-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
}

.p-service-card {
  position: relative;
  display: flex;
  min-block-size: 18rem;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: var(--space-6);
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-background-muted);
  color: var(--color-text-primary);
  text-align: start;
  text-decoration: none;
  font: inherit;
  transition:
    min-block-size var(--duration-slow) var(--ease-reveal),
    background-color var(--duration-normal) var(--ease-standard),
    box-shadow var(--duration-normal) var(--ease-standard);
}

.p-service-card--expandable {
  cursor: default;
  justify-content: space-between;
  gap: var(--space-4);
}

.p-service-card--expandable.is-open {
  min-block-size: 28rem;
  background: color-mix(in srgb, var(--color-brand-secondary) 8%, var(--color-background-muted));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-brand-secondary) 24%, transparent);
}

.p-service-card:nth-child(3) {
  background: color-mix(in srgb, var(--color-background-muted) 70%, var(--color-neutral-300));
}

.p-service-card:nth-child(3).is-open {
  background: color-mix(in srgb, var(--color-brand-secondary) 10%, var(--color-background-muted));
}

.p-service-card--featured {
  min-block-size: 28rem;
  background: var(--color-background-inverse);
  color: var(--color-text-inverse);
  cursor: pointer;
}

.p-service-card__trigger {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  inline-size: 100%;
  min-block-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: start;
  cursor: pointer;
  font: inherit;
}

.p-service-card__trigger:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 3px;
}

.p-service-card__number {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-end: var(--space-5);
  color: color-mix(in srgb, currentColor 16%, transparent);
  font-size: clamp(3.5rem, 2.5rem + 3vw, 4.5rem);
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.06em;
  line-height: 1;
  pointer-events: none;
}

.p-service-card--featured .p-service-card__number {
  color: color-mix(in srgb, var(--color-text-inverse) 20%, transparent);
}

.p-service-card__photo {
  position: absolute;
  inset-block-start: 12%;
  inset-inline-start: 10%;
  inline-size: 74%;
  block-size: 52%;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  transform: rotate(-4deg);
  transition: transform var(--duration-slow) var(--ease-reveal);
}

.p-service-card--featured:hover .p-service-card__photo,
.p-service-card--featured:focus-visible .p-service-card__photo {
  transform: translateY(-0.75rem) rotate(-6deg);
}

.p-service-card__body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-3);
  max-inline-size: 36rem;
}

.p-service-card__icon {
  display: inline-flex;
  margin-block-end: var(--space-4);
  color: var(--color-text-primary);
}

.p-service-card__label {
  margin: 0;
  color: color-mix(in srgb, currentColor 48%, transparent);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.p-service-card h3,
.p-service-card__heading {
  margin: 0;
  color: inherit;
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.03em;
  line-height: var(--line-height-snug);
}

.p-service-card--featured h3 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
}

.p-service-card:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 3px;
}

.p-service-card__expand {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-3);
  overflow: hidden;
  max-block-size: 0;
  opacity: 0;
  border-block-start: 1px solid transparent;
  transform: translateY(0.5rem);
  transition:
    max-block-size var(--duration-slow) var(--ease-reveal),
    opacity var(--duration-slow) var(--ease-reveal),
    transform var(--duration-slow) var(--ease-reveal),
    padding-block-start var(--duration-slow) var(--ease-reveal),
    border-color var(--duration-normal) var(--ease-standard);
}

.p-service-card__expand.is-open {
  max-block-size: 20rem;
  opacity: 1;
  padding-block-start: var(--space-4);
  border-block-start-color: var(--color-border-default);
  transform: translateY(0);
}

.p-service-card__expand p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-relaxed);
}

.p-service-card__expand .p-check-list {
  gap: var(--space-1);
}

.p-service-card__expand .p-check-list li {
  font-size: var(--font-size-body-sm);
  color: var(--color-text-secondary);
}

.p-presence-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}

.p-presence-copy h2 {
  max-inline-size: 22ch;
  margin: 0;
  font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.p-presence-copy__accent {
  color: var(--color-brand-secondary);
}

.p-presence-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
}

.p-presence-stats dt {
  font-family: var(--font-family-display);
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.04em;
  line-height: 1;
}

.p-presence-stats dd {
  margin: var(--space-2) 0 0;
  max-inline-size: 14ch;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-snug);
}

.world-map {
  display: grid;
  gap: var(--space-5);
}

.world-map__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
}

.world-map__legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.world-map__legend-item i {
  display: inline-block;
  inline-size: 0.65rem;
  block-size: 0.65rem;
  border: 1px solid currentColor;
  border-radius: 999px;
}

.world-map__legend-item--active {
  color: var(--color-brand-secondary);
}

.world-map__legend-item--active i {
  background: var(--color-brand-secondary);
  border-color: var(--color-brand-secondary);
}

.world-map__canvas {
  position: relative;
  min-block-size: 18rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.world-map__svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
  max-block-size: 36rem;
}

.world-map__svg .oceanxx,
.world-map__svg .world-map__ocean {
  fill: transparent;
  pointer-events: none;
}

.world-map__svg .circlexx,
.world-map__svg .world-map__circle {
  opacity: 0;
  pointer-events: none;
}

.world-map__svg .world-map__country,
.world-map__svg .world-map__country path {
  cursor: default;
  fill: color-mix(in srgb, var(--color-text-muted) 28%, white);
  stroke: var(--color-background-page);
  stroke-width: 0.7;
  stroke-linejoin: round;
  pointer-events: none;
  transition: fill var(--duration-normal) var(--ease-standard);
  vector-effect: non-scaling-stroke;
}

.world-map__svg .world-map__country.is-active,
.world-map__svg .world-map__country.is-active path {
  fill: color-mix(in srgb, var(--color-azure-400) 55%, var(--color-azure-700));
  cursor: pointer;
  pointer-events: auto;
}

.world-map__markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.world-map__marker {
  position: absolute;
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  transform: translate(-50%, -100%);
  pointer-events: auto;
  cursor: pointer;
}

.world-map__marker-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.35rem;
  block-size: 2.35rem;
  overflow: hidden;
  border: 2px solid var(--color-background-page);
  border-radius: var(--radius-full);
  background: var(--color-background-page);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-border-default) 80%, transparent),
    var(--shadow-sm);
}

.world-map__marker-badge img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.world-map__marker-ping {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: var(--radius-full);
  background: var(--color-brand-secondary);
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--color-brand-secondary) 22%, transparent);
}

.world-map__tooltip,
.world-map__country-tooltip {
  position: absolute;
  z-index: 4;
  inline-size: max-content;
  max-inline-size: min(14rem, calc(100vw - 2rem));
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--color-border-inverse);
  border-radius: var(--radius-sm);
  background: var(--color-background-inverse);
  color: var(--color-text-inverse);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-snug);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-fast) var(--ease-standard), visibility var(--duration-fast) var(--ease-standard);
}

.world-map__tooltip {
  inset-block-end: calc(100% + 0.55rem);
  inset-inline-start: 50%;
  transform: translateX(-50%);
}

.world-map__country-tooltip {
  transform: translate(-50%, calc(-100% - 0.55rem));
}

.world-map__marker:hover .world-map__tooltip,
.world-map__marker:focus-visible .world-map__tooltip,
.world-map__marker.is-tooltip-visible .world-map__tooltip,
.world-map__country-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
}

.world-map__empty {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-body-sm);
}

.p-edit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.p-edit-card {
  position: relative;
  display: block;
  min-block-size: 22rem;
  overflow: hidden;
  border-radius: var(--radius-xl);
  color: var(--color-text-inverse);
  text-decoration: none;
  background: var(--color-background-inverse);
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform var(--duration-slow) var(--ease-reveal);
}

.p-edit-card img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-reveal);
}

.p-edit-card:hover img,
.p-edit-card:focus-visible img {
  transform: scale(1.04);
}

.p-edit-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(11, 17, 32, 0.12) 0%,
    transparent 42%,
    rgba(11, 17, 32, 0.82) 100%
  );
}

.p-edit-card__badge {
  position: absolute;
  inset-block-start: var(--space-5);
  inset-inline-end: var(--space-5);
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-full);
  background: rgba(11, 17, 32, 0.28);
  backdrop-filter: blur(10px);
  color: var(--color-text-inverse);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.p-edit-card__footer {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6);
}

.p-edit-card__footer h3 {
  margin: 0;
  color: inherit;
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.03em;
}

.p-edit-card__footer p {
  margin: var(--space-1) 0 0;
  color: color-mix(in srgb, var(--color-text-inverse) 62%, transparent);
  font-size: var(--font-size-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.p-edit-card__footer > span {
  flex-shrink: 0;
  font-size: var(--font-size-body-sm);
}

.p-edit-card:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 3px;
}

.p-home-story,
.p-podcast,
.p-home-final__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}

.p-home-story,
.p-home-final__grid {
  align-items: center;
}

.p-home-story__media {
  position: relative;
  isolation: isolate;
  margin: 0;
}

.p-home-story__media span {
  position: absolute;
  inset: var(--space-4) calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-4);
  z-index: -1;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-brand-accent) 24%, var(--color-background-page));
}

.p-home-story__media img {
  inline-size: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.p-home-story__content {
  max-inline-size: 42rem;
}

.p-pathway-card {
  overflow: hidden;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-background-page);
  transition: border-color var(--duration-normal) var(--ease-standard),
              box-shadow var(--duration-normal) var(--ease-standard),
              transform var(--duration-normal) var(--ease-standard);
}

.p-pathway-card:hover {
  transform: translateY(-0.2rem);
  border-color: color-mix(in srgb, var(--color-brand-secondary) 35%, var(--color-border-default));
  box-shadow: var(--shadow-md);
}

.p-pathway-card__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--color-background-muted);
}

.p-pathway-card__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-standard);
}

.p-pathway-card:hover .p-pathway-card__media img {
  transform: scale(1.04);
}

.p-pathway-card__body {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
}

.p-pathway-card__body h3 {
  font-size: var(--font-size-h5);
}

.p-pathway-card__body h3 a {
  color: inherit;
  text-decoration: none;
}

.p-pathway-card__body h3 a:hover,
.p-pathway-card__body h3 a:focus-visible {
  color: var(--color-text-link-hover);
}

.p-pathway-card__body p:last-child {
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-sm);
}

.p-home-podcast {
  overflow: hidden;
}

.p-home-podcast .c-eyebrow {
  color: var(--color-gold-300);
}

.p-podcast__info {
  display: grid;
  gap: var(--space-5);
  align-content: start;
}

.p-podcast__cover {
  inline-size: min(100%, 14rem);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.p-podcast__meta-block {
  display: grid;
  gap: var(--space-3);
  max-inline-size: 34rem;
}

.p-podcast__meta-block h3 {
  font-size: var(--font-size-h4);
  color: var(--color-text-inverse);
}

.p-podcast__author,
.p-podcast__tags,
.p-podcast__description {
  color: color-mix(in srgb, var(--color-text-inverse) 76%, transparent);
}

.p-podcast__author {
  font-weight: var(--font-weight-medium);
}

.p-podcast__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--font-size-body-sm);
}

.p-podcast__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  justify-self: start;
  margin-block-start: var(--space-2);
  min-block-size: 2.75rem;
  padding-inline: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-action-donation-bg);
  color: var(--color-action-donation-text);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition: background-color var(--duration-normal) var(--ease-standard),
              transform var(--duration-normal) var(--ease-standard);
}

.p-podcast__cta:hover,
.p-podcast__cta:focus-visible {
  background: var(--color-action-donation-bg-hover);
  transform: translateY(-0.1rem);
}

.p-podcast__cta-icon,
.p-podcast__play-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.p-podcast__cta-icon svg,
.p-podcast__play-icon svg {
  inline-size: 0.9rem;
  block-size: 0.9rem;
}

.p-podcast__episodes {
  display: grid;
  gap: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.p-podcast__episodes-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-block-end: 1px solid rgba(255, 255, 255, 0.1);
  background: color-mix(in srgb, var(--color-azure-700) 55%, transparent);
}

.p-podcast__episodes-head h3 {
  margin: 0;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-inverse);
}

.p-podcast__all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: color-mix(in srgb, var(--color-text-inverse) 86%, transparent);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.p-podcast__all:hover,
.p-podcast__all:focus-visible {
  color: var(--color-text-inverse);
}

.p-podcast__list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-podcast__episode {
  padding: 0;
  border: 0;
  border-block-end: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  transition: background-color var(--duration-normal) var(--ease-standard);
}

.p-podcast__episode:last-child {
  border-block-end: 0;
}

.p-podcast__episode:hover,
.p-podcast__episode:focus-within {
  background: rgba(255, 255, 255, 0.04);
}

.p-podcast__episode-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-5);
  align-items: start;
  padding: var(--space-5);
}

.p-podcast__episode-body {
  display: grid;
  gap: var(--space-2);
  min-inline-size: 0;
}

.p-podcast__episode-date {
  margin: 0;
  color: color-mix(in srgb, var(--color-text-inverse) 52%, transparent);
  font-size: var(--font-size-caption);
  letter-spacing: 0.02em;
}

.p-podcast__episode-body h4 {
  margin: 0;
  color: var(--color-text-inverse);
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.p-podcast__episode-body > p {
  margin: 0;
  color: color-mix(in srgb, var(--color-text-inverse) 68%, transparent);
  font-size: var(--font-size-body-sm);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.p-podcast__episode-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: var(--space-2);
}

.p-podcast__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 999px;
  background: var(--color-azure-500);
  color: var(--color-neutral-0);
  text-decoration: none;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.p-podcast__play:hover,
.p-podcast__play:focus-visible {
  background: var(--color-azure-400);
  transform: scale(1.06);
}

.p-podcast__play-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline-start: 0.1rem;
}

.p-podcast__play-icon svg {
  inline-size: 0.75rem;
  block-size: 0.75rem;
}

.p-podcast__duration {
  color: color-mix(in srgb, var(--color-text-inverse) 62%, transparent);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-medium);
}

.p-podcast__thumb {
  display: block;
  overflow: hidden;
  inline-size: 4.75rem;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-md);
}

.p-podcast__thumb img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-standard);
}

.p-podcast__episode:hover .p-podcast__thumb img {
  transform: scale(1.04);
}

.p-home-book {
  --color-book: #660000;
  --color-book-hover: #4a0000;
  --color-book-soft: color-mix(in srgb, var(--color-book) 8%, var(--color-background-page));
  --color-book-mist: color-mix(in srgb, var(--color-book) 14%, var(--color-background-muted));
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 12% 20%, color-mix(in srgb, var(--color-book) 12%, transparent), transparent 70%),
    radial-gradient(ellipse 55% 45% at 92% 80%, color-mix(in srgb, var(--color-book) 8%, transparent), transparent 68%),
    var(--color-background-page);
}

.p-book {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}

.p-book__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-block-size: 22rem;
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-md);
  background:
    linear-gradient(160deg, var(--color-book-mist), var(--color-book-soft) 55%, var(--color-background-muted));
  isolation: isolate;
  overflow: hidden;
}

.p-book__badge {
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-start: var(--space-4);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-block-size: 2rem;
  padding-inline: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-book);
  color: var(--color-neutral-0);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: var(--shadow-md);
  transform: translateY(-0.4rem);
  opacity: 0;
  transition:
    opacity var(--duration-reveal) var(--ease-reveal),
    transform var(--duration-reveal) var(--ease-reveal);
}

.p-book__stage.is-visible .p-book__badge {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 180ms;
}

.p-book__glow {
  position: absolute;
  inset: 18% 22%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-book) 28%, transparent), transparent 68%);
  filter: blur(1.2rem);
  opacity: 0.7;
  transform: scale(0.86);
  transition:
    opacity var(--duration-slow) var(--ease-standard),
    transform var(--duration-slow) var(--ease-reveal);
}

.p-book__stage:hover .p-book__glow,
.p-book__stage:focus-within .p-book__glow {
  opacity: 1;
  transform: scale(1);
}

.p-book__cover {
  position: relative;
  z-index: 1;
  inline-size: min(100%, 18rem);
  aspect-ratio: 3 / 4;
  block-size: auto;
  object-fit: cover;
  background: transparent;
  border-radius: var(--radius-sm);
  box-shadow:
    0 1.6rem 3rem color-mix(in srgb, var(--color-book) 28%, transparent),
    var(--shadow-lg);
  transform: perspective(40rem) rotateY(-10deg) rotateX(4deg) translateY(1rem);
  opacity: 0;
  transition:
    opacity var(--duration-reveal) var(--ease-reveal),
    transform var(--duration-reveal) var(--ease-reveal),
    box-shadow var(--duration-slow) var(--ease-standard);
}

.p-book__stage.is-visible .p-book__cover {
  opacity: 1;
  transform: perspective(40rem) rotateY(-8deg) rotateX(3deg) translateY(0);
  transition-delay: 90ms;
}

.p-book__stage:hover .p-book__cover,
.p-book__stage:focus-within .p-book__cover {
  transform: perspective(40rem) rotateY(-2deg) rotateX(1deg) translateY(-0.45rem) scale(1.03);
  box-shadow:
    0 2.2rem 3.6rem color-mix(in srgb, var(--color-book) 34%, transparent),
    var(--shadow-lg);
}

.p-book__copy {
  display: grid;
  gap: var(--space-4);
  max-inline-size: 36rem;
  justify-items: start;
}

.p-book__eyebrow.c-eyebrow--rule {
  color: var(--color-book);
}

.p-book__eyebrow.c-eyebrow--rule::before {
  background: var(--color-book);
}

.p-book__copy h2 {
  margin: 0;
  max-inline-size: 12ch;
  color: var(--color-book);
  font-size: clamp(2.25rem, 1.7rem + 2vw, 3.5rem);
  font-weight: var(--font-weight-bold);
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.p-book__author {
  margin: 0;
  color: color-mix(in srgb, var(--color-book) 72%, var(--color-text-secondary));
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-semibold);
}

.p-book__body {
  display: grid;
  gap: var(--space-3);
}

.p-book__body p {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-body-lg);
  line-height: 1.45;
}

.p-book__body strong {
  color: var(--color-book);
  font-weight: var(--font-weight-semibold);
}

.p-home-book .c-btn--primary {
  margin-block-start: var(--space-2);
  background-color: var(--color-book);
  color: var(--color-neutral-0);
}

.p-home-book .c-btn--primary:hover,
.p-home-book .c-btn--primary:focus-visible {
  background-color: var(--color-book-hover);
}

.p-home-community__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.p-home-final {
  background: var(--color-background-brand);
  color: var(--color-text-inverse);
}

.p-home-final h2,
.p-home-final__donate p:not(.c-eyebrow) {
  color: var(--color-text-inverse);
}

.p-home-final__donate {
  max-inline-size: 45rem;
}

.p-home-final__newsletter {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  background: var(--color-background-page);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-lg);
}

.p-home-final__newsletter h3 {
  font-size: var(--font-size-h4);
}

.p-home-final__newsletter p:not(.c-eyebrow) {
  color: var(--color-text-secondary);
}

.p-topic-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.p-topic-card {
  position: relative;
  display: block;
  min-block-size: 18rem;
  overflow: hidden;
  border-radius: var(--radius-xl);
  color: var(--color-text-inverse);
  text-decoration: none;
  background-color: var(--color-background-inverse);
  box-shadow: var(--shadow-sm);
  isolation: isolate;
  transform-style: preserve-3d;
  will-change: transform;
  transition:
    transform var(--duration-slow) var(--ease-reveal),
    box-shadow var(--duration-normal) var(--ease-standard);
}

.p-topic-card__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    180deg,
    rgba(11, 17, 32, 0.08) 0%,
    transparent 38%,
    rgba(11, 17, 32, 0.84) 100%
  );
  transition: background var(--duration-slow) var(--ease-reveal);
}

.p-topic-card img {
  position: absolute;
  inset: 0;
  z-index: -1;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--duration-reveal) var(--ease-reveal);
}

.p-topic-card__index {
  position: absolute;
  inset-block-start: var(--space-5);
  inset-inline-end: var(--space-5);
  z-index: 1;
  color: color-mix(in srgb, var(--color-text-inverse) 42%, transparent);
  font-size: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.06em;
  line-height: 1;
  transition: color var(--duration-normal) var(--ease-standard),
              transform var(--duration-slow) var(--ease-reveal);
}

.p-topic-card__footer {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 1;
  display: grid;
  gap: var(--space-1);
  padding: var(--space-6);
  transform: translateY(0.4rem);
  transition: transform var(--duration-slow) var(--ease-reveal);
}

.p-topic-card__footer h3 {
  margin: 0;
  color: inherit;
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.85rem);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.03em;
  line-height: var(--line-height-tight);
}

.p-topic-card__footer p {
  margin: 0;
  color: color-mix(in srgb, var(--color-text-inverse) 68%, transparent);
  font-size: var(--font-size-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.p-topic-card:hover,
.p-topic-card:focus-visible {
  box-shadow: var(--shadow-lg);
}

.p-topic-card:hover img,
.p-topic-card:focus-visible img {
  transform: scale(1.08);
}

.p-topic-card:hover .p-topic-card__footer,
.p-topic-card:focus-visible .p-topic-card__footer {
  transform: translateY(0);
}

.p-topic-card:hover .p-topic-card__index,
.p-topic-card:focus-visible .p-topic-card__index {
  color: color-mix(in srgb, var(--color-text-inverse) 72%, transparent);
  transform: translateY(-0.25rem);
}

.p-topic-card:hover .p-topic-card__scrim,
.p-topic-card:focus-visible .p-topic-card__scrim {
  background: linear-gradient(
    180deg,
    rgba(11, 17, 32, 0.16) 0%,
    transparent 34%,
    rgba(11, 17, 32, 0.9) 100%
  );
}

.p-topic-card.u-reveal {
  transition-delay: var(--topic-delay, 0ms);
}
.p-topic-card:nth-child(1) { --topic-delay: 0ms; }
.p-topic-card:nth-child(2) { --topic-delay: 70ms; }
.p-topic-card:nth-child(3) { --topic-delay: 140ms; }
.p-topic-card:nth-child(4) { --topic-delay: 210ms; }
.p-topic-card:nth-child(5) { --topic-delay: 280ms; }
.p-topic-card:nth-child(6) { --topic-delay: 350ms; }

.p-topic-card:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 3px;
}

.p-about-split,
.p-latest-layout,
.p-home-newsletter__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
}

.p-about-split {
  align-items: center;
}

.p-about-split__media {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background-color: var(--color-background-surface);
  aspect-ratio: 4 / 3;
}

.p-about-split__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.p-about-split__content {
  max-inline-size: 40rem;
}

.p-latest-layout {
  align-items: stretch;
}

.p-latest-featured .c-card {
  block-size: 100%;
}

.p-latest-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-block-start: var(--space-2);
}

.p-latest-link {
  display: block;
  padding-block: var(--space-4);
  border-block-end: 1px solid var(--color-border-default);
  color: var(--color-text-primary);
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  text-decoration: none;
}

.p-latest-link:hover,
.p-latest-link:focus-visible {
  color: var(--color-text-link-hover);
}

.p-home-donate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.p-home-donate .l-flow {
  max-inline-size: 44rem;
}

.p-home-newsletter__grid {
  align-items: end;
}

.p-page-hero,
.p-search-hero,
.p-public-article__header {
  background: var(--color-background-muted);
}

.p-page-hero__grid,
.p-public-article__intro,
.p-account-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}

.p-page-hero__media,
.p-public-article__media {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-background-surface);
  aspect-ratio: 16 / 10;
}

.p-page-hero__media img,
.p-public-article__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.p-page-content,
.p-public-article__body {
  max-inline-size: 52rem;
}

.p-content-block {
  padding-block-end: var(--space-8);
  border-block-end: 1px solid var(--color-border-default);
}

.p-content-block:last-child {
  border-block-end: none;
}

.p-check-list {
  display: grid;
  gap: var(--space-2);
  padding: 0;
}

.p-check-list li {
  list-style: none;
  position: relative;
  padding-inline-start: var(--space-6);
}

.p-check-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.55em;
  inline-size: 0.7rem;
  block-size: 0.7rem;
  border-radius: var(--radius-full);
  background: var(--color-brand-secondary);
}

.p-account-form {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-background-page);
  box-shadow: var(--shadow-sm);
}

/* Auth pages — Beit Sar Shalom–inspired centered card, CPM tokens */
.p-auth {
  display: grid;
  place-items: center;
  min-block-size: calc(100dvh - 8rem);
  padding-block: var(--space-12) var(--space-16);
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, color-mix(in srgb, var(--color-azure-100) 70%, transparent), transparent 70%),
    var(--color-background-muted);
}

.p-auth__shell {
  display: grid;
  justify-items: center;
  inline-size: 100%;
}

.p-auth__card {
  display: grid;
  gap: var(--space-4);
  inline-size: min(100%, 34rem);
  padding: var(--space-8) var(--space-6);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-background-page);
  box-shadow: var(--shadow-md);
}

.p-auth__brand {
  display: inline-flex;
  align-items: center;
  inline-size: fit-content;
  margin-block-end: var(--space-1);
  text-decoration: none;
}

.p-auth__brand img {
  display: block;
  block-size: 2.75rem;
  inline-size: auto;
}

.p-auth__card .c-eyebrow--rule {
  color: var(--color-gold-700);
}

.p-auth__card .c-eyebrow--rule::before {
  background: var(--color-gold-500);
}

.p-auth__card h1 {
  margin: 0;
  font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--color-ink-900);
}

.p-auth__lead {
  margin: 0;
  max-inline-size: 36ch;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-relaxed);
}

.p-auth__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.p-auth__form {
  display: grid;
  gap: var(--space-4);
  margin-block-start: var(--space-2);
}

.p-auth__form > .c-btn {
  inline-size: 100%;
  justify-content: center;
}

.p-auth__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--font-size-body-sm);
}

.p-auth__check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-relaxed);
  cursor: pointer;
}

.p-auth__check--inline {
  align-items: center;
}

.p-auth__check input {
  margin-block-start: 0.15em;
  accent-color: var(--color-azure-700);
}

.p-auth__check--inline input {
  margin-block-start: 0;
}

.p-auth__check .c-link {
  pointer-events: auto;
}

.p-auth__switch {
  margin: var(--space-2) 0 0;
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.p-auth__switch .c-link {
  font-weight: var(--font-weight-semibold);
}

.p-auth__note {
  margin: 0;
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--color-border-default);
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-relaxed);
}

@media (min-width: 577px) {
  .p-auth__card {
    padding: var(--space-10) var(--space-8);
  }

  .p-auth__card--register {
    inline-size: min(100%, 40rem);
  }
}

.p-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  align-items: end;
  max-inline-size: 56rem;
}

.p-search-form label {
  display: grid;
  gap: var(--space-1);
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-sm);
}

.p-search-form input {
  min-block-size: 3.25rem;
  inline-size: 100%;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding-inline: var(--space-3);
  background: var(--color-background-page);
  color: var(--color-text-primary);
}

.p-public-article__body {
  margin-inline: auto;
}

@media (min-width: 577px) {
  .p-section-intro__aside {
    display: block;
  }

  .p-presence-top {
    grid-template-columns: minmax(0, 1.4fr) minmax(18rem, 1fr);
    gap: var(--space-10);
    align-items: end;
  }

  .world-map__canvas {
    min-block-size: 28rem;
  }

  .p-edit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .p-edit-card {
    min-block-size: 24rem;
  }

  .p-topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .p-topic-card {
    min-block-size: 22rem;
  }

  .p-podcast__info {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .p-podcast__cover {
    inline-size: 10.5rem;
  }

  .p-home-newsletter__grid,
  .p-search-form {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.8fr);
  }
}

@media (min-width: 992px) {
  .p-services-grid {
    grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr) minmax(0, 1fr);
    min-block-size: 34rem;
  }

  .p-service-card,
  .p-service-card--featured {
    min-block-size: 0;
    block-size: 100%;
  }

  .p-service-card--expandable.is-open {
    min-block-size: 100%;
    block-size: auto;
    align-self: stretch;
  }

  .p-topic-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .p-topic-card {
    min-block-size: 26rem;
  }

  .p-home-story {
    grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
    gap: var(--space-16);
  }

  .p-podcast {
    grid-template-columns: minmax(0, 0.92fr) minmax(24rem, 1.08fr);
    gap: var(--space-12);
  }

  .p-book {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--space-16);
  }

  .p-book__stage {
    min-block-size: 32rem;
    padding: var(--space-10);
  }

  .p-book__cover {
    inline-size: min(100%, 22rem);
  }

  .p-home-final__grid {
    grid-template-columns: minmax(0, 1fr) minmax(24rem, 0.72fr);
    gap: var(--space-12);
  }

  .p-about-split {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  }

  .p-latest-layout {
    grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 0.55fr);
  }

  .p-page-hero__grid,
  .p-public-article__intro,
  .p-account-layout {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.7fr);
  }
}

/* Prompt 011 mobile refinement. Keep the existing desktop composition intact
   while making narrow layouts content-led instead of height-led. */
@media (max-width: 320px) {
  .l-flow {
    row-gap: var(--space-5);
  }

  .p-section-intro {
    gap: var(--space-3);
  }

  .p-section-intro__copy h2 {
    max-inline-size: 16ch;
    font-size: clamp(1.95rem, 9vw, 2.35rem);
    line-height: 1;
  }

  .p-presence-top {
    gap: var(--space-5);
  }

  .p-presence-copy h2 {
    font-size: clamp(1.85rem, 8vw, 2.25rem);
  }

  .p-presence-stats {
    gap: var(--space-3);
  }

  .p-presence-stats dt {
    font-size: 1.75rem;
  }

  .world-map {
    gap: var(--space-3);
  }

  .world-map__legend {
    gap: var(--space-2) var(--space-4);
  }

  .world-map__canvas {
    min-block-size: 12rem;
  }

  .world-map__marker-badge {
    inline-size: 1.9rem;
    block-size: 1.9rem;
  }

  .world-map__marker-ping {
    inline-size: 0.35rem;
    block-size: 0.35rem;
    box-shadow: 0 0 0 0.16rem color-mix(in srgb, var(--color-brand-secondary) 22%, transparent);
  }

  .p-edit-card {
    min-block-size: 14rem;
  }

  .p-topic-card {
    min-block-size: 12rem;
  }

  .p-topic-card__footer,
  .p-edit-card__footer {
    padding: var(--space-4);
  }

  .p-service-card {
    min-block-size: 12rem;
    padding: var(--space-4);
  }

  .p-service-card--featured {
    min-block-size: 18rem;
  }

  .p-service-card--expandable.is-open {
    min-block-size: 20rem;
  }

  .p-podcast__cover {
    inline-size: 9rem;
  }

  .p-podcast__episode-main {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-4);
  }

  .p-podcast__thumb {
    inline-size: 4rem;
  }

  .p-book {
    gap: var(--space-5);
  }

  .p-book__stage {
    min-block-size: 18rem;
    padding: var(--space-6) var(--space-4);
  }

  .p-book__cover {
    inline-size: min(100%, 9rem);
  }

  .p-book__copy {
    gap: var(--space-3);
  }

  .p-book__copy h2 {
    font-size: clamp(1.95rem, 9vw, 2.35rem);
  }

  .p-book__body p {
    font-size: var(--font-size-body);
  }

  .p-home-final__newsletter {
    padding: var(--space-5);
  }

  .p-auth__card {
    padding: var(--space-6) var(--space-4);
  }
}

@media (min-width: 321px) and (max-width: 576px) {
  .p-section-intro__copy h2 {
    max-inline-size: 15ch;
    font-size: clamp(2rem, 7vw, 2.4rem);
  }

  .p-presence-copy h2 {
    font-size: clamp(2rem, 7vw, 2.5rem);
  }

  .world-map__canvas {
    min-block-size: 15rem;
  }

  .world-map__marker-badge {
    inline-size: 2.1rem;
    block-size: 2.1rem;
  }

  .p-edit-card {
    min-block-size: 15rem;
  }

  .p-topic-card {
    min-block-size: 13rem;
  }

  .p-service-card {
    min-block-size: 14rem;
    padding: var(--space-5);
  }

  .p-service-card--featured {
    min-block-size: 20rem;
  }

  .p-service-card--expandable.is-open {
    min-block-size: 22rem;
  }

  .p-podcast__cover {
    inline-size: 11rem;
  }

  .p-book__stage {
    min-block-size: 20rem;
    padding: var(--space-8) var(--space-5);
  }

  .p-book__cover {
    inline-size: min(100%, 12rem);
  }

  .p-book__copy h2 {
    font-size: clamp(2rem, 7vw, 2.6rem);
  }
}

@media (min-width: 577px) and (max-width: 767px) {
  .p-section-intro__copy h2 {
    font-size: clamp(2.2rem, 5vw, 2.8rem);
  }

  .world-map__canvas {
    min-block-size: 20rem;
  }

  .p-edit-card {
    min-block-size: 17rem;
  }

  .p-topic-card {
    min-block-size: 15rem;
  }

  .p-service-card {
    min-block-size: 16rem;
  }

  .p-service-card--featured {
    min-block-size: 22rem;
  }

  .p-book__stage {
    min-block-size: 22rem;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .p-section-intro__copy h2 {
    font-size: clamp(2.35rem, 4.4vw, 3rem);
  }

  .p-presence-top {
    gap: var(--space-8);
  }

  .world-map__canvas {
    min-block-size: 24rem;
  }

  .p-edit-card,
  .p-topic-card {
    min-block-size: 18rem;
  }
}

.p-stat-grid,
.p-domain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-3);
}

.p-stat,
.p-domain-tile,
.p-side-panel {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-background-surface);
}

.p-stat {
  padding: var(--space-5);
}

.p-stat__value,
.p-stat__label,
.p-domain-tile__name,
.p-domain-tile__meta {
  display: block;
}

.p-stat__value {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.p-stat__label,
.p-domain-tile__meta {
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-sm);
}

.p-course-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.p-course-pill,
.p-domain-tile {
  color: inherit;
  text-decoration: none;
}

.p-course-pill {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-1);
  max-inline-size: 24rem;
  border: 1px solid color-mix(in srgb, var(--color-text-inverse) 40%, transparent);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
}

.p-course-pill span {
  color: var(--color-gold-300);
  font-size: var(--font-size-caption);
}

.p-domain-tile {
  display: block;
  padding: var(--space-4);
  transition: border-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}

.p-domain-tile:hover,
.p-domain-tile:focus-visible {
  border-color: var(--color-focus-ring);
  transform: translateY(-1px);
}

.p-domain-tile__name {
  font-weight: var(--font-weight-bold);
}

.p-archive-hero,
.p-archive-page__header {
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--color-brand-primary) 92%, black), var(--color-ink-800));
  color: var(--color-text-inverse);
}

.p-archive-hero h1,
.p-archive-page__header h1 {
  color: var(--color-text-inverse);
}

.p-archive-hero .c-caption,
.p-archive-page__header .c-caption {
  color: color-mix(in srgb, var(--color-text-inverse) 82%, transparent);
}

.p-archive-filter {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  align-items: end;
}

@media (min-width: 577px) {
  .p-archive-filter {
    grid-template-columns: minmax(10rem, 0.8fr) minmax(10rem, 0.8fr) minmax(14rem, 1.4fr) auto;
  }
}

.p-archive-filter label {
  display: grid;
  gap: var(--space-1);
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-sm);
}

.p-archive-filter input,
.p-archive-filter select {
  min-block-size: 2.75rem;
  inline-size: 100%;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding-inline: var(--space-3);
  background: var(--color-background-page);
  color: var(--color-text-primary);
}

.p-result-heading,
.p-action-row,
.p-meta-list,
.p-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.p-result-heading {
  justify-content: space-between;
}

.p-meta-list {
  color: color-mix(in srgb, var(--color-text-inverse) 78%, transparent);
  font-size: var(--font-size-body-sm);
}

.p-meta-list span + span::before {
  content: "/";
  margin-inline-end: var(--space-3);
}

.p-archive-page__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
}

@media (min-width: 992px) {
  .p-archive-page__grid {
    grid-template-columns: minmax(0, 2fr) minmax(18rem, 0.8fr);
    align-items: start;
  }
}

.p-archive-page__media {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.p-archive-page__media img {
  display: block;
  inline-size: 100%;
  max-block-size: 34rem;
  object-fit: cover;
}

.p-prose {
  max-inline-size: 46rem;
  overflow-wrap: anywhere;
}

.p-prose > * + * {
  margin-block-start: var(--space-4);
}

.p-prose h1,
.p-prose h2,
.p-prose h3,
.p-prose h4 {
  margin-block-start: var(--space-8);
}

.p-prose ul {
  padding-inline-start: var(--space-5);
}

.p-prose img {
  border-radius: var(--radius-md);
}

.p-archive-page__aside {
  position: sticky;
  top: calc(var(--space-6) + 4rem);
}

.p-side-panel {
  padding: var(--space-4);
}

.p-side-panel h2 {
  font-size: var(--font-size-h6);
}

.p-side-panel dl,
.p-side-panel ul,
.p-heading-list {
  margin: 0;
  padding: 0;
}

.p-side-panel dt {
  margin-block-start: var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.p-side-panel dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.p-side-panel li,
.p-heading-list li {
  list-style: none;
  padding-block: var(--space-2);
  border-block-start: 1px solid var(--color-border-default);
  overflow-wrap: anywhere;
}

.p-heading-list span {
  display: inline-flex;
  min-inline-size: 2rem;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

}
@layer patterns {
/* Chosen People Bible Institute — CPM tokens (ink / azure / gold). */

.p-institute-hero {
  position: relative;
  overflow: hidden;
  padding-block: calc(var(--space-24) + var(--space-8)) var(--space-16);
  background:
    radial-gradient(ellipse 55% 70% at 88% 30%, color-mix(in srgb, var(--color-azure-700) 45%, transparent), transparent 70%),
    var(--color-background-inverse);
  color: var(--color-text-inverse);
}

.p-institute-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-10);
  align-items: center;
}

.p-institute-hero__copy {
  display: grid;
  gap: var(--space-4);
  max-inline-size: 38rem;
}

.p-institute-hero__eyebrow.c-eyebrow--rule {
  color: var(--color-gold-300);
}

.p-institute-hero__eyebrow.c-eyebrow--rule::before {
  background: var(--color-gold-300);
}

.p-institute-hero__copy h1 {
  margin: 0;
  color: var(--color-text-inverse);
  font-size: clamp(2.5rem, 1.8rem + 2.6vw, 4.25rem);
  font-weight: var(--font-weight-bold);
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.p-institute-hero__lead {
  margin: 0;
  max-inline-size: 36ch;
  color: color-mix(in srgb, var(--color-text-inverse) 78%, transparent);
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-relaxed);
}

.p-institute-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-2);
}

.p-institute-hero .c-btn--secondary {
  border-color: color-mix(in srgb, var(--color-text-inverse) 55%, transparent);
  color: var(--color-text-inverse);
  background: transparent;
}

.p-institute-hero .c-btn--secondary:hover,
.p-institute-hero .c-btn--secondary:focus-visible {
  background: color-mix(in srgb, var(--color-text-inverse) 10%, transparent);
  border-color: var(--color-text-inverse);
  color: var(--color-text-inverse);
}

.p-institute-hero__media {
  margin: 0;
  justify-self: center;
  inline-size: min(100%, 28rem);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  background: color-mix(in srgb, var(--color-azure-800) 60%, black);
}

.p-institute-hero__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Dark highlight strip — headline + 3 feature columns */
.p-institute-strip {
  padding-block: var(--space-12);
  background: var(--color-ink-950);
  color: var(--color-text-inverse);
}

.p-institute-strip__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-10);
  align-items: start;
}

.p-institute-strip__headline {
  display: grid;
  gap: var(--space-3);
  max-inline-size: 24rem;
}

.p-institute-strip__headline h2 {
  margin: 0;
  color: var(--color-text-inverse);
  font-size: clamp(1.65rem, 1.35rem + 1.2vw, 2.35rem);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.p-institute-strip__headline p {
  margin: 0;
  color: color-mix(in srgb, var(--color-text-inverse) 68%, transparent);
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-relaxed);
}

.p-institute-strip__features {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-institute-strip__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}

.p-institute-strip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  color: var(--color-gold-300);
  flex-shrink: 0;
}

.p-institute-strip__item h3 {
  margin: 0 0 var(--space-1);
  color: var(--color-text-inverse);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.01em;
}

.p-institute-strip__item p {
  margin: 0;
  color: color-mix(in srgb, var(--color-text-inverse) 62%, transparent);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-relaxed);
}

/* Course cards — full-bleed image + hover CTA */
.p-institute-popular {
  padding-block: var(--space-16);
  background: var(--color-ink-950);
  color: var(--color-text-inverse);
}

.p-institute-popular .p-section-intro__link,
.p-institute-popular__link {
  color: color-mix(in srgb, var(--color-text-inverse) 78%, transparent);
}

.p-institute-popular .p-section-intro__link:hover,
.p-institute-popular .p-section-intro__link:focus-visible,
.p-institute-popular__link:hover,
.p-institute-popular__link:focus-visible {
  color: var(--color-gold-300);
}

.p-institute-popular .c-eyebrow--rule {
  color: var(--color-gold-300);
}

.p-institute-popular .c-eyebrow--rule::before {
  background: var(--color-gold-300);
}

.p-institute-popular__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.p-institute-popular-card {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(160deg, var(--color-azure-800), var(--color-ink-900));
  color: var(--color-text-inverse);
  text-decoration: none;
  isolation: isolate;
  transition: transform var(--duration-normal) var(--ease-standard);
}

.p-institute-popular-card:hover,
.p-institute-popular-card:focus-visible {
  transform: translateY(-0.2rem);
}

.p-institute-popular-card:focus-visible {
  outline: 2px solid var(--color-gold-400);
  outline-offset: 3px;
}

.p-institute-popular-card__img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-standard);
  z-index: 0;
}

.p-institute-popular-card:hover .p-institute-popular-card__img,
.p-institute-popular-card:focus-visible .p-institute-popular-card__img {
  transform: scale(1.05);
}

.p-institute-popular-card__overlay {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 1;
  display: grid;
  gap: var(--space-1);
  align-content: end;
  padding: var(--space-5) var(--space-4) var(--space-4);
  background: linear-gradient(
    to top,
    rgb(0 0 0 / 0.88) 0%,
    rgb(0 0 0 / 0.5) 55%,
    transparent 100%
  );
}

.p-institute-popular-card__meta {
  margin: 0;
  color: color-mix(in srgb, var(--color-text-inverse) 78%, transparent);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-snug);
}

.p-institute-popular-card h3 {
  margin: 0;
  color: var(--color-text-inverse);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.p-institute-popular-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  margin-block-start: var(--space-3);
  padding-block: 0.7rem;
  padding-inline: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-action-donation-bg);
  color: var(--color-action-donation-text);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(0.4rem);
  pointer-events: none;
  transition:
    opacity var(--duration-normal) var(--ease-standard),
    transform var(--duration-normal) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard);
}

.p-institute-popular-card:hover .p-institute-popular-card__cta,
.p-institute-popular-card:focus-visible .p-institute-popular-card__cta {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: none) {
  .p-institute-popular-card__cta {
    opacity: 1;
    transform: none;
  }
}

.p-institute-teachers {
  padding-block: var(--space-16);
  background: var(--color-ink-950);
  color: var(--color-text-inverse);
}

.p-institute-teachers .c-eyebrow--rule {
  color: var(--color-gold-300);
}

.p-institute-teachers .c-eyebrow--rule::before {
  background: var(--color-gold-300);
}

.p-institute-teacher-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.p-institute-teacher {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid color-mix(in srgb, var(--color-text-inverse) 12%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-ink-900) 88%, var(--color-azure-800));
  color: var(--color-text-inverse);
  text-align: center;
  transition:
    border-color var(--duration-normal) var(--ease-standard),
    background-color var(--duration-normal) var(--ease-standard),
    transform var(--duration-normal) var(--ease-standard);
}

.p-institute-teacher:hover {
  border-color: color-mix(in srgb, var(--color-gold-400) 35%, transparent);
  background: color-mix(in srgb, var(--color-ink-800) 70%, var(--color-azure-800));
  transform: translateY(-0.12rem);
}

.p-institute-teacher__media {
  display: grid;
  place-items: center;
  inline-size: 7.5rem;
  block-size: 7.5rem;
  margin-inline: auto;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-azure-700) 35%, var(--color-ink-900));
  color: var(--color-gold-300);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
}

.p-institute-teacher__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.p-institute-teacher__body {
  display: grid;
  gap: var(--space-2);
}

.p-institute-teacher h3 {
  margin: 0;
  color: var(--color-text-inverse);
  font-size: var(--font-size-h5);
}

.p-institute-teacher__role {
  margin: 0;
  color: var(--color-gold-300);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-semibold);
}

.p-institute-teacher__body p:last-child {
  margin: 0;
  color: color-mix(in srgb, var(--color-text-inverse) 68%, transparent);
  font-size: var(--font-size-body-sm);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.p-institute-cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: end;
}

.p-institute-cta__inner h2 {
  margin: var(--space-3) 0;
  max-inline-size: 16ch;
  font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.p-institute-cta__inner p {
  margin: 0;
  max-inline-size: 42ch;
  color: color-mix(in srgb, var(--color-text-inverse) 76%, transparent);
}

.p-institute-cta .c-eyebrow--rule {
  color: var(--color-gold-300);
}

.p-institute-cta .c-eyebrow--rule::before {
  background: var(--color-gold-300);
}

.p-institute-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.p-institute-cta .c-btn--secondary {
  border-color: color-mix(in srgb, var(--color-text-inverse) 55%, transparent);
  color: var(--color-text-inverse);
  background: transparent;
}

.p-institute-cta .c-btn--secondary:hover,
.p-institute-cta .c-btn--secondary:focus-visible {
  background: color-mix(in srgb, var(--color-text-inverse) 10%, transparent);
  border-color: var(--color-text-inverse);
  color: var(--color-text-inverse);
}

@media (min-width: 577px) {
  .p-institute-strip__grid {
    grid-template-columns: minmax(14rem, 0.85fr) minmax(0, 1.4fr);
    gap: var(--space-10);
    align-items: center;
  }

  .p-institute-strip__features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .p-institute-popular__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .p-institute-teacher-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .p-institute-hero__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
    gap: var(--space-16);
  }

  .p-institute-hero__media {
    inline-size: 100%;
    max-inline-size: 26rem;
    justify-self: end;
  }

  .p-institute-popular__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .p-institute-teacher-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .p-institute-cta__inner {
    grid-template-columns: minmax(0, 1.2fr) auto;
  }
}

}
@layer patterns {
/* Student platform — Netflix-style catalog shell inspired by courses-platform,
   styled with CPM ink / azure / gold tokens. */

.p-platform {
  min-block-size: 100dvh;
  margin: 0;
  background: var(--color-ink-950);
  color: var(--color-text-inverse);
}

.p-platform__rail {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 40;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  inline-size: 5rem;
  padding-block: var(--space-5);
  padding-inline: var(--space-2);
  background: color-mix(in srgb, var(--color-ink-950) 92%, var(--color-azure-900));
  border-inline-end: 1px solid color-mix(in srgb, var(--color-text-inverse) 8%, transparent);
}

.p-platform__logo {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  flex-shrink: 0;
}

.p-platform__logo img {
  display: block;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  object-fit: contain;
}

.p-platform__nav {
  display: grid;
  gap: var(--space-3);
  justify-items: center;
}

.p-platform__nav-link {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--radius-md);
  color: color-mix(in srgb, var(--color-text-inverse) 55%, transparent);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.p-platform__nav-link.is-active,
.p-platform__nav-link:hover,
.p-platform__nav-link:focus-visible {
  background: color-mix(in srgb, var(--color-text-inverse) 10%, transparent);
  color: var(--color-text-inverse);
}

.p-platform__rail-foot {
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  margin-block-start: auto;
}

.p-platform__avatar {
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: 999px;
  background: var(--color-azure-700);
  color: var(--color-text-inverse);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
}

.p-platform__logout {
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--color-text-inverse) 55%, transparent);
  font: inherit;
  font-size: 0.7rem;
  cursor: pointer;
}

.p-platform__logout:hover {
  color: var(--color-gold-300);
}

.p-platform__mobile {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--color-ink-950) 92%, transparent);
  border-block-end: 1px solid color-mix(in srgb, var(--color-text-inverse) 8%, transparent);
  backdrop-filter: blur(12px);
}

.p-platform__mobile-brand img {
  display: block;
  block-size: 1.75rem;
  inline-size: auto;
}

.p-platform__mobile-link {
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: 999px;
  background: var(--color-azure-700);
  color: var(--color-text-inverse);
  text-decoration: none;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
}

.p-platform__main {
  min-block-size: 100dvh;
}

/* Featured hero */
.p-platform-hero {
  position: relative;
  isolation: isolate;
  min-block-size: min(72vh, 36rem);
  overflow: hidden;
  background: var(--color-ink-900);
}

.p-platform-hero__media {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
}

.p-platform-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, var(--color-ink-950) 0%, color-mix(in srgb, var(--color-ink-950) 55%, transparent) 48%, transparent 72%),
    linear-gradient(to top, var(--color-ink-950) 0%, transparent 55%);
}

.p-platform-hero__content {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--space-3);
  align-content: end;
  max-inline-size: 40rem;
  min-block-size: inherit;
  padding: var(--space-10) var(--space-5) var(--space-12);
}

.p-platform-hero__eyebrow {
  margin: 0;
  color: var(--color-gold-300);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.p-platform-hero__content h1 {
  margin: 0;
  color: var(--color-text-inverse);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.p-platform-hero__meta,
.p-platform-hero__lead {
  margin: 0;
  color: color-mix(in srgb, var(--color-text-inverse) 72%, transparent);
}

.p-platform-hero__lead {
  max-inline-size: 42ch;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.p-platform-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-2);
}

.p-platform-hero__ghost {
  border-color: color-mix(in srgb, var(--color-text-inverse) 45%, transparent);
  color: var(--color-text-inverse);
  background: color-mix(in srgb, var(--color-text-inverse) 8%, transparent);
}

.p-platform-hero__ghost:hover {
  border-color: var(--color-text-inverse);
  background: color-mix(in srgb, var(--color-text-inverse) 14%, transparent);
  color: var(--color-text-inverse);
}

.p-platform-body {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--space-8);
  margin-block-start: -3rem;
  padding: 0 var(--space-5) var(--space-16);
}

.p-platform-empty {
  margin: 0;
  color: color-mix(in srgb, var(--color-text-inverse) 65%, transparent);
}

.p-platform-row {
  display: grid;
  gap: var(--space-3);
}

.p-platform-row__head h3 {
  margin: 0;
  color: var(--color-text-inverse);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-semibold);
}

.p-platform-row__track {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  padding-block-end: var(--space-2);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.p-platform-row__track::-webkit-scrollbar {
  display: none;
}

.p-platform-poster {
  flex: 0 0 auto;
  inline-size: clamp(9.5rem, 28vw, 13.5rem);
  text-decoration: none;
  color: inherit;
  scroll-snap-align: start;
}

.p-platform-poster__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2 / 3;
  border-radius: 0.25rem;
  background: var(--color-ink-800);
  transition: transform var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard);
}

.p-platform-poster:hover .p-platform-poster__frame,
.p-platform-poster:focus-visible .p-platform-poster__frame {
  transform: scale(1.04);
  box-shadow: var(--shadow-lg);
}

.p-platform-poster__frame img,
.p-platform-poster__fallback {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center top;
}

.p-platform-poster__fallback {
  background: linear-gradient(160deg, var(--color-azure-700), var(--color-ink-900));
}

.p-platform-poster__overlay {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: var(--space-8) var(--space-3) var(--space-3);
  background: linear-gradient(to top, rgb(0 0 0 / 0.92), transparent);
}

.p-platform-poster__overlay p {
  margin: 0;
  color: var(--color-text-inverse);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Course detail */
.p-platform-course,
.p-platform-account {
  padding: var(--space-6) var(--space-5) var(--space-16);
}

.p-platform-course__back {
  display: inline-flex;
  margin-block-end: var(--space-5);
  color: color-mix(in srgb, var(--color-text-inverse) 70%, transparent);
  text-decoration: none;
  font-size: var(--font-size-body-sm);
}

.p-platform-course__back:hover {
  color: var(--color-gold-300);
}

.p-platform-course__layout {
  display: grid;
  gap: var(--space-8);
}

.p-platform-course__side,
.p-platform-course__main,
.p-platform-account__card {
  padding: var(--space-6);
  border: 1px solid color-mix(in srgb, var(--color-text-inverse) 10%, transparent);
  border-radius: 1.25rem;
  background: color-mix(in srgb, var(--color-ink-900) 88%, var(--color-azure-900));
}

.p-platform-course__cover {
  overflow: hidden;
  margin-block-end: var(--space-4);
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  background: var(--color-ink-800);
}

.p-platform-course__cover img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.p-platform-course__side .c-eyebrow {
  color: var(--color-gold-300);
}

.p-platform-course__side h1,
.p-platform-course__main h2,
.p-platform-account__head h1,
.p-platform-account__card h2 {
  margin: var(--space-2) 0;
  color: var(--color-text-inverse);
}

.p-platform-course__teacher {
  margin: 0 0 var(--space-3);
  color: var(--color-gold-300);
  font-weight: var(--font-weight-semibold);
}

.p-platform-course__desc,
.p-platform-course__main p,
.p-platform-account__head p,
.p-platform-account__card p {
  color: color-mix(in srgb, var(--color-text-inverse) 70%, transparent);
}

.p-platform-course__modules {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.p-platform-course__modules li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-text-inverse) 4%, transparent);
}

.p-platform-course__modules span {
  color: var(--color-gold-300);
  font-weight: var(--font-weight-bold);
}

.p-platform-course__modules strong {
  display: block;
  margin-block-end: var(--space-1);
  color: var(--color-text-inverse);
}

.p-platform-course__modules p {
  margin: 0;
}

.p-platform-account__head {
  margin-block-end: var(--space-6);
}

.p-platform-account__head .c-eyebrow {
  color: var(--color-gold-300);
}

.p-platform-account__grid {
  display: grid;
  gap: var(--space-4);
}

.p-platform-account__card dl {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
}

.p-platform-account__card dt {
  color: color-mix(in srgb, var(--color-text-inverse) 55%, transparent);
  font-size: var(--font-size-caption);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.p-platform-account__card dd {
  margin: var(--space-1) 0 0;
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-semibold);
}

.p-platform-account__stat {
  margin: var(--space-3) 0 0;
  color: var(--color-gold-300);
  font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.p-platform-account__actions {
  margin-block-start: var(--space-5);
}

@media (min-width: 577px) {
  .p-platform__mobile {
    display: none;
  }

  .p-platform__rail {
    display: flex;
  }

  .p-platform__main {
    padding-inline-start: 5rem;
  }

  .p-platform-hero__content {
    padding-inline: var(--space-10);
  }

  .p-platform-body,
  .p-platform-course,
  .p-platform-account {
    padding-inline: var(--space-10);
  }

  .p-platform-course__layout {
    grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
    align-items: start;
  }

  .p-platform-account__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

}

@layer utilities {
/* Small, high-value utility layer — deliberately not a full utility-class
   framework (that would fight the "no Tailwind" requirement in spirit).
   Utilities layer is last, so these always win over components without
   needing !important. */

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.u-text-center { text-align: center; }
.u-text-start { text-align: start; }
.u-text-end { text-align: end; }

.u-flex { display: flex; }
.u-flex-col { flex-direction: column; }
.u-items-center { align-items: center; }
.u-justify-between { justify-content: space-between; }
.u-gap-2 { gap: var(--space-2); }
.u-gap-4 { gap: var(--space-4); }

.u-mt-0 { margin-block-start: 0; }
.u-mb-0 { margin-block-end: 0; }

.u-hidden { display: none; }

@media (min-width: 577px) {
  .u-hidden-md-up { display: none; }
}
@media (max-width: 576px) {
  .u-hidden-md-down { display: none; }
}

/* is-*/has-* state hooks (applied via JS, styled by the component itself —
   these two are the only globally-shared ones) */
.is-loading { cursor: progress; }
[hidden] { display: none !important; } /* documented exception: [hidden] must always win, it's an accessibility/semantic contract, not a styling choice */

/* Scroll reveal — initial state; JS flips to .is-visible on intersection. */
.u-reveal {
  opacity: 0;
  transform: translateY(2.8rem);
  transition:
    opacity var(--duration-reveal) var(--ease-reveal),
    transform var(--duration-reveal) var(--ease-reveal);
}

.u-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .u-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

}