:root {
    /* =========================
    1) COLOR PRIMITIVES (raw)
    ========================= */
    --color-white: #ffffff;
    --color-black: #090c12;
    --color-ivory-50: #fbf8f2;
    --color-ivory-100: #f4efe6;
    --color-sand-100: #ebe2d4;
    --color-sand-200: #d8cab3;
    --color-slate-100: #e8ecf3;
    --color-slate-200: #c6cfdb;
    --color-slate-400: #7f8ca4;
    --color-slate-600: #4c586d;
    --color-slate-800: #233045;
    --color-slate-900: #121d30;
    --color-navy-950: #0d1728;
    --color-navy-900: #16233a;
    --color-ink-900: #0b111d;
    --color-ink-800: #111928;
    --color-ink-700: #182335;
    --color-cream-100: #f8f2e8;
    --color-cream-200: #eadfcf;
    --color-bronze-500: #b17d51;
    --color-bronze-600: #8d603d;
    --color-red-500: #be4b3d;
    --color-red-700: #882f28;
    --color-gold-400: #c79b5b;
    --color-gold-500: #ab7e40;
    --color-green-600: #1f7a55;

    /* =========================
    2) SEMANTIC COLOR TOKENS
    ========================= */
    --color-bg-page: var(--color-ivory-50);
    --color-bg-surface: var(--color-white);
    --color-bg-muted: var(--color-ivory-100);
    --color-text-primary: var(--color-slate-900);
    --color-text-secondary: var(--color-slate-600);
    --color-text-muted: var(--color-slate-400);
    --color-border-default: rgba(35, 48, 69, 0.12);
    --color-border-strong: rgba(35, 48, 69, 0.28);
    --color-action-primary: var(--color-navy-950);
    --color-action-primary-hover: var(--color-bronze-600);
    --color-action-secondary: transparent;
    --color-success: var(--color-green-600);

    /* =========================
    3) COMPONENT COLOR TOKENS
    ========================= */
    --button-primary-bg: var(--color-action-primary);
    --button-primary-bg-hover: var(--color-action-primary-hover);
    --button-primary-text: var(--color-white);
    --button-secondary-bg: transparent;
    --button-secondary-border: var(--color-border-strong);
    --button-secondary-text: var(--color-text-primary);
    --card-bg: rgba(255, 255, 255, 0.86);
    --card-border: var(--color-border-default);
    --card-highlight: rgba(177, 125, 81, 0.14);
    --pill-bg: rgba(22, 35, 58, 0.08);
    --pill-text: var(--color-slate-800);
    --pill-signal-bg: rgba(190, 75, 61, 0.14);
    --pill-signal-text: var(--color-red-700);
    --input-bg: var(--color-white);
    --input-border: var(--color-border-default);
    --input-text: var(--color-text-primary);

    /* =========================
    4) TYPOGRAPHY TOKENS
    ========================= */
    --font-family-heading: "Lora", serif;
    --font-family-body: "Inter", sans-serif;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --line-height-body: 1.65;
    --line-height-heading-tight: 1.05;
    --line-height-heading-snug: 1.12;
    --line-height-heading-normal: 1.2;
    --line-height-heading-loose: 1.28;
    --letter-spacing-heading-tight: -0.035em;
    --letter-spacing-heading-snug: -0.025em;
    --letter-spacing-heading-normal: -0.015em;
    --letter-spacing-body: -0.01em;
    --font-size-body: 1rem;
    --font-size-small: 0.9375rem;

    /* =========================
    5) SPACING TOKENS
    ========================= */
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-14: 3.5rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* =========================
    6) RADIUS TOKENS
    ========================= */
    --radius-none: 0;
    --radius-sm: 0.625rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --radius-xl: 2rem;
    --radius-pill: 999px;

    /* =========================
    7) SHADOW TOKENS
    ========================= */
    --shadow-xs: 0 1px 2px rgba(9, 12, 18, 0.04);
    --shadow-sm: 0 10px 30px rgba(9, 12, 18, 0.06);
    --shadow-md: 0 18px 50px rgba(9, 12, 18, 0.08);
    --shadow-lg: 0 28px 80px rgba(9, 12, 18, 0.14);
}

h1, h2, h3, h4,
.h1, .h2, .h3, .h4,
.display, .hero-title, .eyebrow {
    font-family: var(--font-family-heading);
}

h1,
.h1 {
    font-size: clamp(2.1rem, 1.8rem + 2vw, 3rem);
    line-height: var(--line-height-heading-tight);
    letter-spacing: var(--letter-spacing-heading-tight);
    font-weight: var(--font-weight-bold);
}

h2,
.h2 {
    font-size: clamp(1.625rem, 1.35rem + 1.4vw, 2.35rem);
    line-height: var(--line-height-heading-snug);
    letter-spacing: var(--letter-spacing-heading-snug);
    font-weight: var(--font-weight-bold);
}

h3,
.h3 {
    font-size: clamp(1.3rem, 1.16rem + 0.9vw, 1.8rem);
    line-height: var(--line-height-heading-normal);
    letter-spacing: var(--letter-spacing-heading-normal);
    font-weight: var(--font-weight-semibold);
}

h4,
.h4 {
    font-size: clamp(1.08rem, 1rem + 0.6vw, 1.3rem);
    line-height: var(--line-height-heading-loose);
    letter-spacing: var(--letter-spacing-heading-normal);
    font-weight: var(--font-weight-semibold);
}

.display {
    font-size: clamp(2.75rem, 2.2rem + 3vw, 4.6rem);
    line-height: 0.96;
    letter-spacing: -0.045em;
    font-weight: var(--font-weight-bold);
}

.hero-title {
    font-size: clamp(2.35rem, 1.9rem + 2.7vw, 4.5rem);
    line-height: 0.98;
    letter-spacing: -0.05em;
    font-weight: var(--font-weight-bold);
}

.eyebrow {
    font-size: 0.75rem;
    line-height: 1.2;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: var(--font-weight-semibold);
}

html {
    scroll-behavior: smooth;
}

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

body {
    margin: 0;
    min-width: 20rem;
    background: linear-gradient(180deg, #fdfaf5 0%, #f7f2e9 100%);
    color: var(--color-text-primary);
    font-family: var(--font-family-body);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    letter-spacing: var(--letter-spacing-body);
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
ul,
ol {
    margin: 0;
}

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

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

button {
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

input,
textarea,
select {
    width: 100%;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    background: var(--input-bg);
    color: var(--input-text);
    font: inherit;
}

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

.page-shell {
    padding: 0 var(--space-6) var(--space-6);
}

.section-shell {
    width: min(100%, 76rem);
    margin-inline: auto;
}

.section-grid {
    display: grid;
    gap: var(--space-6);
}

.section-grid--balanced {
    align-items: start;
}

.card-grid {
    display: grid;
    gap: var(--space-4);
}

.card-grid--three {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.surface-card {
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    background: var(--card-bg);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(20px);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 3.25rem;
    padding: 0 var(--space-6);
    border-radius: var(--radius-pill);
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.button:hover {
    transform: translateY(-1px);
}

.button--primary {
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
}

.button--primary:hover {
    background: var(--button-primary-bg-hover);
}

.button--secondary,
.button--ghost {
    border: 1px solid var(--button-secondary-border);
    background: var(--button-secondary-bg);
    color: var(--button-secondary-text);
}

.pill {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0 var(--space-4);
    border-radius: var(--radius-pill);
    background: var(--pill-bg);
    color: var(--pill-text);
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
}

.pill--muted {
    background: rgba(22, 35, 58, 0.08);
}

.pill--signal {
    background: var(--pill-signal-bg);
    color: var(--pill-signal-text);
}

.section-heading {
    display: grid;
    gap: var(--space-3);
    max-width: 44rem;
}

.section-heading--compact {
    gap: var(--space-2);
}

.section-heading p,
.surface-card p,
.surface-card li,
.meta-note,
.hero-subtitle {
    color: var(--color-text-secondary);
}

.lead {
    font-size: 1.1rem;
    color: var(--color-text-primary);
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.button-row--compact {
    gap: var(--space-2);
}

.info-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.quote-block {
    margin: 0;
    padding: var(--space-5);
    border-left: 3px solid currentColor;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: rgba(255, 255, 255, 0.56);
}

.quote-block--featured {
    max-width: 42rem;
}

.quote-block p,
.display-quote {
    margin: 0;
    color: inherit;
}

.video-card {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-5);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.74);
    text-align: left;
    transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.video-card:hover {
    transform: translateY(-2px);
}

.video-card__meta {
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

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

.tabs__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.tabs__button {
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-pill);
    border: 1px solid var(--card-border);
    background: rgba(255, 255, 255, 0.66);
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.tabs__button.is-active {
    background: var(--button-primary-bg);
    border-color: var(--button-primary-bg);
    color: var(--button-primary-text);
}

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

.gallery-card {
    overflow: hidden;
    border-radius: var(--radius-md);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-xs);
}

.gallery-card img {
    height: 100%;
    min-height: 12rem;
    object-fit: cover;
    transition: transform 220ms ease;
}

.gallery-card:hover img {
    transform: scale(1.02);
}

.gallery-card--large {
    grid-column: 1 / -1;
}

.progress-block {
    display: grid;
    gap: var(--space-3);
}

.progress-block__bar {
    height: 0.8rem;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: rgba(22, 35, 58, 0.08);
}

.progress-block__bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--color-bronze-600), var(--color-navy-950));
}

.progress-block__meta {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    align-items: center;
    font-size: 0.95rem;
}

.cost-list,
.stage-list,
.key-points,
.signal-list {
    margin: 0;
    padding-left: 1.2rem;
}

.cost-list {
    padding-left: 0;
    list-style: none;
}

.cost-list li {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--card-border);
}

.cost-list li:last-child {
    border-bottom: 0;
}

.contact-list {
    display: grid;
    gap: var(--space-3);
}

.contact-list a {
    font-weight: var(--font-weight-medium);
}

.preview-toolbar {
    position: sticky;
    top: 0;
    z-index: 30;
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid rgba(18, 29, 48, 0.08);
    background: rgba(251, 248, 242, 0.88);
    backdrop-filter: blur(24px);
}

.preview-toolbar__inner {
    display: grid;
    gap: var(--space-4);
}

.preview-toolbar__title {
    margin: 0;
    max-width: 42rem;
    font-weight: var(--font-weight-semibold);
}

.preview-toolbar__actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.variant-toggle {
    min-height: 2.8rem;
    padding: 0 var(--space-5);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.9);
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.variant-toggle.is-active {
    background: var(--color-navy-950);
    border-color: var(--color-navy-950);
    color: var(--color-white);
}

.concept-homepage[hidden] {
    display: none;
}

.concept-homepage {
    --page-bg: var(--color-bg-page);
    --page-surface: var(--card-bg);
    --page-border: var(--card-border);
    --page-text: var(--color-text-primary);
    --page-secondary: var(--color-text-secondary);
    --page-muted: var(--color-text-muted);
    --page-accent: var(--color-bronze-600);
    --page-accent-strong: var(--color-navy-950);
    --page-highlight: rgba(177, 125, 81, 0.14);
    --page-pill: rgba(22, 35, 58, 0.08);
    --page-section-alt: rgba(255, 255, 255, 0.4);
    margin-block: 0 var(--space-16);
    border: 1px solid rgba(18, 29, 48, 0.08);
    border-radius: var(--radius-xl);
    background: var(--page-bg);
    color: var(--page-text);
    overflow: clip;
    box-shadow: var(--shadow-lg);
}

.homepage--institutional {
    --page-bg: linear-gradient(180deg, #fcfaf5 0%, #f5efe5 100%);
    --page-surface: rgba(255, 255, 255, 0.82);
    --page-border: rgba(18, 29, 48, 0.12);
    --page-text: var(--color-slate-900);
    --page-secondary: var(--color-slate-600);
    --page-muted: var(--color-slate-400);
    --page-accent: var(--color-bronze-600);
    --page-accent-strong: var(--color-navy-950);
    --page-highlight: rgba(177, 125, 81, 0.14);
    --page-pill: rgba(13, 23, 40, 0.08);
    --page-section-alt: rgba(255, 255, 255, 0.38);
}

.homepage--intense {
    --page-bg: linear-gradient(180deg, #0b111d 0%, #121a29 55%, #0d1420 100%);
    --page-surface: rgba(17, 25, 40, 0.84);
    --page-border: rgba(248, 242, 232, 0.1);
    --page-text: var(--color-cream-100);
    --page-secondary: rgba(248, 242, 232, 0.76);
    --page-muted: rgba(248, 242, 232, 0.56);
    --page-accent: var(--color-gold-400);
    --page-accent-strong: var(--color-red-500);
    --page-highlight: rgba(190, 75, 61, 0.18);
    --page-pill: rgba(248, 242, 232, 0.08);
    --page-section-alt: rgba(248, 242, 232, 0.03);
}

.homepage--intense .surface-card,
.homepage--intense .video-card,
.homepage--intense .tabs__button,
.homepage--intense .gallery-card {
    box-shadow: none;
}

.concept-homepage .surface-card,
.concept-homepage .video-card,
.concept-homepage .tabs__button {
    border-color: var(--page-border);
    background: var(--page-surface);
    color: var(--page-text);
}

.concept-homepage .pill {
    background: var(--page-pill);
    color: var(--page-text);
}

.concept-homepage .button--primary {
    background: var(--page-accent-strong);
}

.concept-homepage .button--primary:hover {
    background: var(--page-accent);
}

.concept-homepage .button--secondary,
.concept-homepage .button--ghost {
    border-color: var(--page-border);
    color: var(--page-text);
}

.concept-homepage .tabs__button.is-active {
    background: var(--page-accent-strong);
    border-color: var(--page-accent-strong);
    color: var(--color-white);
}

.concept-homepage .section-heading p,
.concept-homepage .surface-card p,
.concept-homepage .surface-card li,
.concept-homepage .hero-subtitle,
.concept-homepage .meta-note,
.concept-homepage .video-card span {
    color: var(--page-secondary);
}

.concept-homepage .eyebrow,
.concept-homepage .video-card__meta {
    color: var(--page-accent);
}

.concept-brief {
    padding: var(--space-12) 0 var(--space-4);
}

.brief-grid {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.brief-card {
    padding: var(--space-5);
}

.homepage-header {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: var(--space-4) 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.24));
    backdrop-filter: blur(16px);
}

.homepage--intense .homepage-header {
    background: linear-gradient(180deg, rgba(11, 17, 29, 0.88), rgba(11, 17, 29, 0.52));
}

.homepage-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.brand-mark {
    font-family: var(--font-family-heading);
    font-size: 1.25rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.02em;
}

.homepage-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    font-size: 0.95rem;
    color: var(--page-secondary);
}

.homepage-nav a:hover {
    color: var(--page-text);
}

.homepage-hero,
.homepage-unique,
.homepage-story,
.homepage-candidacy,
.homepage-cause,
.homepage-timeline,
.homepage-media,
.homepage-tas,
.homepage-goal,
.homepage-donate,
.homepage-contact {
    padding: var(--space-12) 0;
}

.homepage-hero {
    position: relative;
}

.homepage-hero__layout {
    display: grid;
    gap: var(--space-8);
}

.homepage-hero__copy {
    display: grid;
    gap: var(--space-5);
}

.meta-note {
    max-width: 42rem;
}

.hero-subtitle {
    margin: 0;
    font-size: 1.15rem;
}

.homepage-hero__media {
    display: grid;
    gap: var(--space-4);
}

.hero-figure {
    overflow: hidden;
    padding: var(--space-3);
}

.hero-figure img {
    aspect-ratio: 5 / 4;
    border-radius: calc(var(--radius-lg) - var(--space-3));
    object-fit: cover;
}

.hero-metrics {
    display: grid;
    gap: var(--space-4);
}

.metric-card,
.statement-card,
.reality-card,
.goal-card,
.cost-card,
.contact-card,
.footer-card,
.video-feature-card,
.photo-feature-card,
.timeline-story {
    padding: var(--space-5);
}

.homepage-hero--immersive {
    overflow: hidden;
}

.homepage-hero__backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.homepage-hero__backdrop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 16%;
    filter: saturate(0.95) contrast(1.02);
}

.homepage-hero--immersive::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(11, 17, 29, 0.48), rgba(11, 17, 29, 0.84)),
        linear-gradient(90deg, rgba(11, 17, 29, 0.9), rgba(11, 17, 29, 0.28));
}

.homepage-hero__layout--immersive {
    position: relative;
    z-index: 2;
    min-height: 34rem;
    align-content: end;
    padding-top: var(--space-24);
}

.hero-aside {
    padding: var(--space-5);
    border-color: rgba(248, 242, 232, 0.16);
    background: rgba(17, 25, 40, 0.72);
}

.legal-panel,
.donation-method {
    padding: var(--space-5);
    border: 1px solid var(--page-border);
    border-radius: var(--radius-lg);
    background: var(--page-surface);
}

.legal-panel {
    display: grid;
    gap: var(--space-4);
}

.story-grid {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.story-card {
    padding: var(--space-5);
}

.story-card--media {
    overflow: hidden;
    display: grid;
    gap: var(--space-4);
}

.story-card--media img,
.story-shot img,
.photo-feature-card img,
.media-wall__lead img {
    object-fit: cover;
}

.story-layout {
    display: grid;
    gap: var(--space-6);
}

.story-visual-stack,
.story-copy-stack {
    display: grid;
    gap: var(--space-4);
}

.story-shot {
    overflow: hidden;
}

.story-shot img {
    min-height: 16rem;
}

.statement-card {
    display: grid;
    gap: var(--space-4);
}

.reality-card {
    display: grid;
    gap: var(--space-4);
}

.statement-card--dark {
    background:
        radial-gradient(circle at top right, rgba(199, 155, 91, 0.12), transparent 48%),
        rgba(17, 25, 40, 0.9);
}

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

.issue-chip {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: rgba(22, 35, 58, 0.06);
    font-weight: var(--font-weight-medium);
}

.homepage--intense .issue-chip {
    background: rgba(248, 242, 232, 0.06);
}

.signal-list {
    display: grid;
    gap: var(--space-3);
    font-weight: var(--font-weight-medium);
}

.cause-panel {
    position: relative;
    display: grid;
    gap: var(--space-6);
    padding: var(--space-8);
    border: 1px solid var(--page-border);
    border-radius: var(--radius-xl);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.42)),
        var(--page-highlight);
    overflow: hidden;
}

.cause-panel--intense {
    background:
        radial-gradient(circle at top right, rgba(199, 155, 91, 0.1), transparent 35%),
        linear-gradient(180deg, rgba(17, 25, 40, 0.92), rgba(11, 17, 29, 0.92));
}

.cause-panel__word {
    font-family: var(--font-family-heading);
    font-size: clamp(3.6rem, 2.2rem + 7vw, 8rem);
    line-height: 0.85;
    letter-spacing: -0.08em;
    color: rgba(17, 25, 40, 0.07);
}

.homepage--intense .cause-panel__word {
    color: rgba(248, 242, 232, 0.05);
}

.cause-panel__content,
.cause-grid {
    display: grid;
    gap: var(--space-4);
}

.cause-card {
    padding: var(--space-5);
}

.cause-card--quote {
    background: rgba(255, 255, 255, 0.62);
}

.homepage--intense .cause-card--quote {
    background: rgba(190, 75, 61, 0.14);
}

.emphasis-strip {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-7);
    border: 1px solid var(--page-border);
    border-radius: var(--radius-xl);
    background: var(--page-section-alt);
}

.emphasis-strip__cards {
    display: grid;
    gap: var(--space-4);
}

.timeline-layout,
.timeline-column,
.timeline-track,
.stage-track,
.media-video-grid,
.donation-grid,
.contact-layout,
.goal-banner,
.media-wall {
    display: grid;
    gap: var(--space-4);
}

.timeline-layout,
.media-video-grid,
.goal-banner {
    margin-top: var(--space-6);
}

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

.timeline-stat,
.timeline-track__item,
.stage-track__item {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: rgba(22, 35, 58, 0.06);
}

.homepage--intense .timeline-stat,
.homepage--intense .timeline-track__item,
.homepage--intense .stage-track__item {
    background: rgba(248, 242, 232, 0.05);
}

.timeline-stat strong,
.timeline-track__item strong {
    display: block;
    font-size: 1.15rem;
    color: var(--page-text);
}

.timeline-stat--accent,
.timeline-track__item--accent {
    background: var(--page-highlight);
}

.stage-list {
    display: grid;
    gap: var(--space-3);
}

.video-rail,
.video-grid {
    display: grid;
    gap: var(--space-3);
}

.quote-support {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-6);
}

.display-quote {
    font-family: var(--font-family-heading);
    font-size: clamp(1.7rem, 1.45rem + 1vw, 2.4rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.photo-feature-card {
    padding: 0;
    overflow: hidden;
    min-height: 16rem;
}

.photo-feature-card img {
    height: 100%;
}

.video-feature-card,
.media-wall__lead {
    display: grid;
    gap: var(--space-4);
}

.video-feature-card,
.media-wall__lead-copy {
    align-content: start;
}

.gallery-grid--dense .gallery-card img {
    min-height: 14rem;
}

.timeline-layout--intense .timeline-story {
    background: rgba(17, 25, 40, 0.84);
}

.timeline-track,
.stage-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stage-track__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3);
    align-items: center;
}

.stage-track__item span {
    display: inline-grid;
    place-items: center;
    width: 2.15rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--page-highlight);
    font-size: 0.85rem;
    font-weight: var(--font-weight-bold);
    color: var(--page-text);
}

.media-wall__lead {
    overflow: hidden;
    padding: 0;
}

.media-wall__lead img {
    min-height: 18rem;
}

.media-wall__lead-copy {
    padding: var(--space-5);
}

.video-grid--compact .video-card {
    min-height: 100%;
}

.homepage-tas .card-grid {
    margin-top: var(--space-6);
}

.goal-card {
    display: grid;
    gap: var(--space-4);
}

.goal-card--wide {
    min-height: 100%;
}

.donate-section,
.donate-panel {
    display: grid;
    gap: var(--space-6);
    padding: var(--space-7);
    border: 1px solid var(--page-border);
    border-radius: var(--radius-xl);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.58)),
        var(--page-highlight);
}

.donate-panel--intense {
    background:
        radial-gradient(circle at top right, rgba(199, 155, 91, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(17, 25, 40, 0.94), rgba(11, 17, 29, 0.96));
}

.donation-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.donation-method {
    display: grid;
    gap: var(--space-3);
}

.donation-method strong {
    font-size: 1rem;
}

.donation-method--featured {
    background: var(--page-accent-strong);
    color: var(--color-white);
}

.donation-method--featured p,
.donation-method--featured .eyebrow {
    color: rgba(255, 255, 255, 0.8);
}

.contact-layout {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.media-lightbox {
    position: fixed;
    inset: 0;
    z-index: 80;
}

.media-lightbox[hidden] {
    display: none;
}

.media-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(9, 12, 18, 0.8);
    backdrop-filter: blur(12px);
}

.media-lightbox__dialog {
    position: relative;
    width: min(92vw, 64rem);
    margin: 5vh auto;
    padding: var(--space-7);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-xl);
    background: rgba(11, 17, 29, 0.96);
    color: var(--color-cream-100);
    box-shadow: var(--shadow-lg);
}

.media-lightbox__close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 2.5rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(248, 242, 232, 0.08);
    color: var(--color-white);
    font-size: 1.5rem;
}

.media-lightbox__body {
    display: grid;
    gap: var(--space-4);
}

.media-lightbox__content img,
.media-lightbox__content iframe {
    width: 100%;
    border-radius: var(--radius-md);
}

.media-lightbox__content img {
    max-height: 72vh;
    object-fit: contain;
}

.media-lightbox__content iframe {
    aspect-ratio: 16 / 9;
    border: 0;
    background: #000;
}

.media-lightbox__placeholder {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-7);
    border: 1px dashed rgba(248, 242, 232, 0.2);
    border-radius: var(--radius-md);
    background: rgba(248, 242, 232, 0.04);
}

.media-lightbox__caption {
    margin: 0;
    color: rgba(248, 242, 232, 0.76);
}

@media (min-width: 64rem) {
    h1,
    .h1 {
        font-size: clamp(3rem, 2.2rem + 1.6vw, 4.6rem);
    }

    h2,
    .h2 {
        font-size: clamp(2.3rem, 1.95rem + 0.9vw, 3.3rem);
    }

    h3,
    .h3 {
        font-size: clamp(1.6rem, 1.35rem + 0.55vw, 2.2rem);
    }

    h4,
    .h4 {
        font-size: clamp(1.18rem, 1.05rem + 0.28vw, 1.42rem);
    }

    .display {
        font-size: clamp(4.25rem, 3.1rem + 1.8vw, 6rem);
    }

    .hero-title {
        font-size: clamp(3.4rem, 2.5rem + 1.9vw, 5.3rem);
    }

    .eyebrow {
        font-size: 0.8125rem;
    }

    .page-shell {
        padding: 0 var(--space-8) var(--space-8);
    }

    .preview-toolbar__inner {
        grid-template-columns: 1fr auto;
        align-items: center;
    }

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

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

    .homepage-hero__layout {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
        align-items: center;
    }

    .homepage-hero__layout--immersive {
        grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr);
    }

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

    .story-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .story-card--media {
        grid-column: span 1;
    }

    .story-layout {
        grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
        align-items: start;
    }

    .emphasis-strip {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
        align-items: center;
    }

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

    .cause-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .timeline-layout {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    }

    .timeline-layout--intense {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .video-rail {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .media-video-grid,
    .goal-banner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    }

    .media-wall {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        align-items: start;
    }

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

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

    .gallery-card--large {
        grid-column: span 2;
        grid-row: span 2;
    }

    .gallery-card--large img {
        min-height: 100%;
    }

    .contact-layout {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    }
}