/* =========================
   1) Design Tokens
   ========================= */

:root {
    /* =========================
       1) COLOR PRIMITIVES (raw)
       ========================= */
    --color-stone-0: #ffffff;
    --color-stone-0-rgb: 255 255 255;
    --color-stone-50: #f8f6f2;
    --color-stone-50-rgb: 248 246 242;
    --color-stone-100: #efeae2;
    --color-stone-100-rgb: 239 234 226;
    --color-stone-200: #ddd5c8;
    --color-stone-200-rgb: 221 213 200;
    --color-stone-500: #8f8678;
    --color-stone-500-rgb: 143 134 120;
    --color-stone-700: #5f574d;
    --color-stone-700-rgb: 95 87 77;
    --color-ink-700: #2a3e57;
    --color-ink-700-rgb: 42 62 87;
    --color-ink-900: #142233;
    --color-ink-900-rgb: 20 34 51;
    --color-blue-500: #315a85;
    --color-blue-500-rgb: 49 90 133;
    --color-blue-600: #23476d;
    --color-blue-600-rgb: 35 71 109;
    --color-gold-100: #f7ebd8;
    --color-gold-100-rgb: 247 235 216;
    --color-gold-400: #b8863b;
    --color-gold-400-rgb: 184 134 59;
    --color-gold-500: #9a6e2f;
    --color-gold-500-rgb: 154 110 47;

    /* =========================
       2) SEMANTIC COLOR TOKENS
       ========================= */
    --color-bg-page: var(--color-stone-0);
    --color-bg-surface: var(--color-stone-0);
    --color-bg-muted: var(--color-stone-50);
    --color-bg-subtle: var(--color-stone-100);
    --color-bg-accent-soft: rgb(var(--color-blue-500-rgb) / 0.08);
    --color-bg-highlight-soft: rgb(var(--color-gold-400-rgb) / 0.12);

    --color-text-primary: var(--color-ink-900);
    --color-text-secondary: var(--color-ink-900);
    --color-text-muted: rgb(var(--color-ink-900-rgb) / 0.56);
    --color-text-inverse: var(--color-stone-0);

    --color-border-default: rgb(var(--color-ink-900-rgb) / 0.12);
    --color-border-strong: rgb(var(--color-ink-900-rgb) / 0.2);
    --color-border-accent: rgb(var(--color-blue-600-rgb) / 0.24);
    --color-border-football: rgb(var(--color-gold-400-rgb) / 0.16);

    --color-action-primary: var(--color-blue-600);
    --color-action-primary-hover: #1b3857;
    --color-action-secondary: var(--color-gold-500);
    --color-overlay: rgb(var(--color-ink-900-rgb) / 0.72);

    /* =========================
       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-text-inverse);
    --button-secondary-bg: rgb(var(--color-stone-0-rgb) / 0.92);
    --button-secondary-bg-hover: var(--color-bg-muted);
    --button-secondary-border: var(--color-border-strong);
    --button-secondary-text: var(--color-text-primary);

    --card-bg: rgb(var(--color-stone-0-rgb) / 0.96);
    --card-bg-muted: rgb(var(--color-stone-50-rgb) / 0.9);
    --card-border: var(--color-border-default);
    --card-shadow: 0 18px 48px rgb(var(--color-ink-900-rgb) / 0.07);

    --tab-bg: rgb(var(--color-stone-0-rgb) / 0.96);
    --tab-bg-active: var(--color-action-primary);
    --tab-border: var(--color-border-default);
    --tab-text-active: var(--color-text-inverse);

    --lightbox-backdrop: var(--color-overlay);
    --lightbox-surface: rgb(var(--color-stone-0-rgb) / 0.98);

    /* =========================
       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-heading-ultra-tight: 0.92;
    --line-height-heading-tight: 0.98;
    --line-height-heading-snug: 1.04;
    --line-height-heading-normal: 1.14;
    --line-height-body: 1.7;

    --letter-spacing-heading-ultra-tight: -0.055em;
    --letter-spacing-heading-tight: -0.045em;
    --letter-spacing-heading-snug: -0.035em;
    --letter-spacing-heading-normal: -0.018em;

    --font-size-body-sm: 0.95rem;
    --font-size-body-md: 1rem;
    --font-size-body-lg: 1.1rem;

    /* =========================
       5) SPACING TOKENS
       ========================= */
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 6rem;
    --space-9: 8rem;

    /* =========================
       6) RADIUS TOKENS
       ========================= */
    --radius-none: 0;
    --radius-sm: 0.75rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --radius-xl: 2rem;
    --radius-full: 9999px;

    /* =========================
       7) SHADOW TOKENS
       ========================= */
    --shadow-xs: 0 1px 2px rgb(var(--color-ink-900-rgb) / 0.08);
    --shadow-sm: 0 10px 24px rgb(var(--color-ink-900-rgb) / 0.05);
    --shadow-md: 0 28px 70px rgb(var(--color-ink-900-rgb) / 0.08);

    /* Optional layout tokens */
    --container-max-width: 72rem;
    --container-padding-inline: 1rem;
    --section-padding-block: clamp(3.5rem, 7vw, 5.5rem);
    --card-padding: clamp(1.2rem, 2vw, 1.6rem);
    --header-offset: 8rem;
    --cookie-bar-offset: 0px;
}

/* =========================
   2) Heading / Typography System
   ========================= */

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

h1,
.h1 {
    font-size: clamp(2.45rem, 8vw, 3.85rem);
    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.9rem, 6vw, 2.7rem);
    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.35rem, 4.6vw, 1.95rem);
    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, 4vw, 1.3rem);
    line-height: 1.26;
    letter-spacing: -0.012em;
    font-weight: var(--font-weight-semibold);
}

.display {
    font-size: clamp(2.5rem, 8vw, 4rem);
    line-height: var(--line-height-heading-ultra-tight);
    letter-spacing: var(--letter-spacing-heading-ultra-tight);
    font-weight: var(--font-weight-bold);
}

.hero-title {
    font-size: clamp(2.9rem, 9vw, 4.6rem);
    line-height: 0.96;
    letter-spacing: -0.035em;
    font-weight: var(--font-weight-bold);
}

.eyebrow {
    font-size: 0.78rem;
    line-height: 1.2;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: var(--font-weight-semibold);
    color: var(--color-action-primary);
}

.display-quote {
    font-size: clamp(1.9rem, 6vw, 2.8rem);
    line-height: 1;
    letter-spacing: var(--letter-spacing-heading-tight);
    font-weight: var(--font-weight-bold);
}

.lead {
    font-size: clamp(1.04rem, 3.6vw, 1.22rem);
    line-height: 1.56;
    color: var(--color-text-primary);
}

/* =========================
   3) Global Base Styles
   ========================= */

html {
    scroll-behavior: smooth;
}

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

body {
    margin: 0;
    min-width: 20rem;
    background:
        radial-gradient(circle at top right, var(--color-bg-highlight-soft), transparent 22rem),
        radial-gradient(circle at top left, var(--color-bg-accent-soft), transparent 24rem),
        linear-gradient(180deg, var(--color-bg-page) 0%, var(--color-bg-muted) 100%);
    color: var(--color-text-primary);
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-md);
    line-height: var(--line-height-body);
    text-rendering: optimizeLegibility;
}

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

ol,
ul {
    padding-left: 1.15rem;
}

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;
}

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

:where(section, article, div)[id] {
    scroll-margin-top: var(--header-offset);
}

.concept-homepage[hidden],
.tabs__panel[hidden],
.media-lightbox[hidden] {
    display: none;
}

.section-heading p,
.surface-card p,
.surface-card li,
.meta-note,
.hero-subtitle,
.video-card span:last-child,
.progress-block__meta,
.cost-list span,
.media-lightbox__caption {
    color: var(--color-text-secondary);
}

/* =========================
   4) Page Layout Primitives
   ========================= */

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

.concept-homepage {
    position: relative;
    overflow: clip;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-xl);
    background:
        linear-gradient(180deg, rgb(var(--color-stone-0-rgb) / 0.98) 0%, rgb(var(--color-stone-50-rgb) / 0.86) 100%);
    box-shadow: var(--shadow-md);
}

.concept-homepage::before,
.concept-homepage::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(0.5rem);
}

.concept-homepage::before {
    top: -12rem;
    right: -10rem;
    width: 28rem;
    height: 28rem;
    background: radial-gradient(circle, var(--color-bg-highlight-soft), transparent 68%);
}

.concept-homepage::after {
    bottom: -10rem;
    left: -10rem;
    width: 26rem;
    height: 26rem;
    background: radial-gradient(circle, var(--color-bg-accent-soft), transparent 70%);
}

.section-shell {
    width: min(100%, var(--container-max-width));
    margin-inline: auto;
    padding-inline: var(--container-padding-inline);
}

.homepage-header {
    position: sticky;
    top: 0;
    z-index: 40;
    padding-block: 0.8rem;
    background:
        linear-gradient(180deg, rgb(var(--color-stone-50-rgb) / 0.9), rgb(var(--color-stone-0-rgb) / 0.72));
    backdrop-filter: blur(18px) saturate(135%);
}


.homepage-header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem 1rem;
    padding: 0.9rem;
    border: 1px solid rgb(var(--color-ink-900-rgb) / 0.08);
    border-radius: calc(var(--radius-xl) - 0.35rem);
    background:
        linear-gradient(135deg, rgb(var(--color-stone-0-rgb) / 0.95), rgb(var(--color-stone-50-rgb) / 0.88));
    box-shadow:
        0 20px 44px rgb(var(--color-ink-900-rgb) / 0.08),
        inset 0 1px 0 rgb(var(--color-stone-0-rgb) / 0.65);
}

.homepage-hero,
.homepage-overview,
.homepage-story,
.homepage-candidacy,
.homepage-cause,
.homepage-timeline,
.homepage-media,
.homepage-tas,
.homepage-goal,
.homepage-closing,
.homepage-contact {
    position: relative;
    padding-block: var(--section-padding-block);
}

.homepage-contact {
    padding-bottom: calc(var(--section-padding-block) + var(--cookie-bar-offset));
    transition: padding-bottom 180ms ease;
}

.homepage-overview,
.homepage-story,
.homepage-candidacy,
.homepage-cause,
.homepage-timeline,
.homepage-media,
.homepage-tas,
.homepage-goal,
.homepage-closing,
.homepage-contact {
    border-top: 1px solid var(--color-border-default);
}

.homepage-hero {
    padding-top: calc(var(--section-padding-block) - 1.25rem);
}

.homepage-overview::before,
.homepage-story::before,
.homepage-candidacy::before,
.homepage-cause::before,
.homepage-timeline::before,
.homepage-media::before,
.homepage-tas::before,
.homepage-goal::before,
.homepage-closing::before,
.homepage-contact::before {
    content: "";
    position: absolute;
    top: 0;
    left: clamp(1rem, 4vw, 3rem);
    right: clamp(1rem, 4vw, 3rem);
    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgb(var(--color-blue-600-rgb) / 0.06) 18%,
            var(--color-border-football) 50%,
            rgb(var(--color-blue-600-rgb) / 0.06) 82%,
            transparent 100%
        );
    pointer-events: none;
}

.homepage-overview::after,
.homepage-tas::after,
.homepage-goal::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.28;
    background-image:
        repeating-linear-gradient(
            60deg,
            transparent 0,
            transparent 18px,
            rgb(var(--color-blue-600-rgb) / 0.05) 18px,
            rgb(var(--color-blue-600-rgb) / 0.05) 19px
        ),
        repeating-linear-gradient(
            -60deg,
            transparent 0,
            transparent 18px,
            rgb(var(--color-gold-400-rgb) / 0.045) 18px,
            rgb(var(--color-gold-400-rgb) / 0.045) 19px
        );
}

.homepage-overview::after {
    inset: 8% auto auto -6%;
    width: 18rem;
    height: 18rem;
    border-radius: 50%;
    mask-image: radial-gradient(circle, rgb(0 0 0 / 0.88) 0%, transparent 72%);
    -webkit-mask-image: radial-gradient(circle, rgb(0 0 0 / 0.88) 0%, transparent 72%);
}

.homepage-tas::after {
    inset: auto -4% 10% auto;
    width: 16rem;
    height: 16rem;
    border-radius: 50%;
    mask-image: radial-gradient(circle, rgb(0 0 0 / 0.82) 0%, transparent 74%);
    -webkit-mask-image: radial-gradient(circle, rgb(0 0 0 / 0.82) 0%, transparent 74%);
}

.homepage-goal::after {
    inset: auto auto 8% 50%;
    width: min(24rem, 52vw);
    height: 8rem;
    transform: translateX(-50%);
    border-radius: var(--radius-xl);
    opacity: 0.18;
    mask-image: linear-gradient(180deg, transparent, rgb(0 0 0 / 0.9) 25%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent, rgb(0 0 0 / 0.9) 25%, transparent 100%);
}

.homepage-overview,
.homepage-cause,
.homepage-media,
.homepage-goal,
.homepage-contact {
    background:
        linear-gradient(180deg, rgb(var(--color-stone-50-rgb) / 0.78), rgb(var(--color-stone-0-rgb) / 0.92));
}

.homepage-timeline,
.homepage-closing {
    background:
        linear-gradient(180deg, rgb(var(--color-stone-0-rgb) / 0.88), rgb(var(--color-stone-50-rgb) / 0.94));
}

.section-heading {
    display: grid;
    gap: 0.85rem;
    max-width: 42rem;
}

.section-heading--wide {
    max-width: 50rem;
}

.section-heading--compact {
    max-width: 36rem;
}

.material-symbols-rounded {
    font-family: "Material Symbols Rounded";
    font-weight: normal;
    font-style: normal;
    font-weight: var(--font-weight-bold);
    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
}

.media-subsection-heading {
    margin-top: var(--space-6);
}

.homepage-press-context {
    margin-top: clamp(2.75rem, 6vw, 4.5rem);
}

.homepage-press-context + .media-subsection-heading {
    margin-top: clamp(2.75rem, 6vw, 3.5rem);
}

.media-subsection-title {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
}

.media-subsection-title__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border: 1px solid rgb(var(--color-blue-600-rgb) / 0.12);
    border-radius: 50%;
    background: linear-gradient(180deg, rgb(var(--color-blue-500-rgb) / 0.09), rgb(var(--color-stone-0-rgb) / 0.96));
    color: var(--color-action-primary);
    box-shadow: inset 0 1px 0 rgb(var(--color-stone-0-rgb) / 0.9);
    font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

.info-strip,
.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    align-items: center;
}

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

/* =========================
   5) Reusable UI Components
   ========================= */

.brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    width: fit-content;
    padding: 0.35rem 0.45rem;
    font-size: 1.35rem;
    line-height: 1;
    letter-spacing: -0.03em;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.brand-mark__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: linear-gradient(180deg, rgb(var(--color-stone-0-rgb) / 0.96), rgb(var(--color-stone-50-rgb) / 0.92));
    box-shadow:
        0 8px 20px rgb(var(--color-ink-900-rgb) / 0.08),
        inset 0 1px 0 rgb(var(--color-stone-0-rgb) / 0.85);
    overflow: hidden;
}

.brand-mark__logo img {
    width: 80%;
    height: 80%;
    object-fit: contain;
}

.brand-mark__copy {
    display: grid;
    gap: var(--space-1);
}

.brand-mark__kicker {
    font-family: var(--font-family-body);
    font-size: 0.74rem;
    line-height: 1.2;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-action-primary);
}

.homepage-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-full);
    background: rgb(var(--color-stone-0-rgb) / 0.88);
    box-shadow: var(--shadow-xs);
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.homepage-menu-toggle:hover,
.homepage-menu-toggle:focus-visible {
    color: var(--color-action-primary);
    border-color: var(--color-border-accent);
    background: rgb(var(--color-blue-500-rgb) / 0.08);
}

.homepage-menu-toggle:active {
    transform: translateY(1px);
}

.homepage-menu-toggle__label {
    font-size: 0.92rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
}

.homepage-menu-toggle__icon {
    display: grid;
    gap: 0.22rem;
}

.homepage-menu-toggle__icon span {
    display: block;
    width: 1.15rem;
    height: 2px;
    border-radius: var(--radius-full);
    background: currentColor;
    transform-origin: center;
    transition: transform 180ms ease, opacity 180ms ease;
}

.homepage-header.is-menu-open .homepage-menu-toggle__icon span:nth-child(1) {
    transform: translateY(0.38rem) rotate(45deg);
}

.homepage-header.is-menu-open .homepage-menu-toggle__icon span:nth-child(2) {
    opacity: 0;
}

.homepage-header.is-menu-open .homepage-menu-toggle__icon span:nth-child(3) {
    transform: translateY(-0.38rem) rotate(-45deg);
}

.homepage-nav-shell {
    grid-column: 1 / -1;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-0.7rem);
    transition: max-height 260ms ease, opacity 180ms ease, transform 180ms ease;
}

.homepage-header.is-menu-open .homepage-nav-shell {
    max-height: 32rem;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.homepage-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    padding: 0.75rem;
    border: 1px solid rgb(var(--color-ink-900-rgb) / 0.08);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, rgb(var(--color-stone-0-rgb) / 0.98), rgb(var(--color-stone-50-rgb) / 0.94));
    box-shadow: var(--shadow-sm);
    color: var(--color-text-secondary);
}

.homepage-nav::-webkit-scrollbar,
.tabs__list::-webkit-scrollbar {
    display: none;
}

.homepage-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 2.85rem;
    padding: 0.8rem 1rem;
    border-radius: var(--radius-full);
    font-size: 0.94rem;
    font-weight: var(--font-weight-medium);
    transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.homepage-nav a:hover,
.homepage-nav a:focus-visible,
.homepage-nav a.is-active,
.homepage-nav a[aria-current="location"] {
    color: var(--color-action-primary);
    background: rgb(var(--color-blue-500-rgb) / 0.11);
    box-shadow: inset 0 0 0 1px rgb(var(--color-blue-600-rgb) / 0.12);
}

.surface-card {
    position: relative;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    background: var(--card-bg);
    box-shadow: var(--card-shadow);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.2rem;
    padding-inline: 1.35rem;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    font-weight: var(--font-weight-semibold);
    transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

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

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

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

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

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

.button--with-play {
    gap: 0.6rem;
}

.button--with-play::before {
    content: "";
    width: 0;
    height: 0;
    border-top: 0.34rem solid transparent;
    border-bottom: 0.34rem solid transparent;
    border-left: 0.52rem solid currentColor;
}

.cookie-bar {
    position: fixed;
    right: max(0.75rem, env(safe-area-inset-right));
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    left: max(0.75rem, env(safe-area-inset-left));
    z-index: 95;
    padding: 1rem 1.1rem;
    border: 1px solid rgb(var(--color-blue-600-rgb) / 0.18);
    border-radius: calc(var(--radius-lg) + 0.2rem);
    background:
        linear-gradient(180deg, rgb(var(--color-stone-0-rgb) / 0.98), rgb(var(--color-stone-50-rgb) / 0.94));
    box-shadow:
        0 24px 60px rgb(var(--color-ink-900-rgb) / 0.16),
        inset 0 1px 0 rgb(var(--color-stone-0-rgb) / 0.88);
    backdrop-filter: blur(16px) saturate(145%);
    -webkit-backdrop-filter: blur(16px) saturate(145%);
}

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

.cookie-bar__text {
    margin: 0;
    max-width: 48rem;
    color: var(--color-text-secondary);
    font-size: 1rem;
    line-height: 1.55;
}

.cookie-bar__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.85rem;
}

.cookie-bar__button {
    min-width: 9rem;
}

.cookie-bar__button--details {
    border-color: rgb(var(--color-blue-600-rgb) / 0.34);
    color: var(--color-action-primary);
}

.cookie-bar__details {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid rgb(var(--color-blue-600-rgb) / 0.12);
    color: var(--color-action-primary);
}

.cookie-bar__details p {
    margin: 0;
}

.cookie-bar__details a {
    font-weight: var(--font-weight-semibold);
    color: var(--color-action-primary);
}

.scroll-top-button {
    position: fixed !important;
    right: max(1rem, env(safe-area-inset-right)) !important;
    bottom: calc(max(1rem, env(safe-area-inset-bottom)) + var(--cookie-bar-offset)) !important;
    left: auto !important;
    top: auto !important;
    z-index: 90;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-width: 5.4rem;
    height: 3.5rem;
    margin: 0;
    padding: 0.35rem 0.5rem 0.35rem 0.45rem;
    border: 1px solid rgb(var(--color-blue-600-rgb) / 0.18);
    border-radius: var(--radius-full);
    background:
        linear-gradient(180deg, rgb(var(--color-stone-0-rgb) / 0.98), rgb(var(--color-stone-50-rgb) / 0.94));
    color: var(--color-action-primary);
    box-shadow:
        0 18px 44px rgb(var(--color-ink-900-rgb) / 0.18),
        inset 0 1px 0 rgb(var(--color-stone-0-rgb) / 0.85);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    opacity: 0;
    visibility: hidden;
    transform: translateY(1rem) scale(0.96);
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease, background-color 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
    white-space: nowrap;
}

.scroll-top-button__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    background: rgb(var(--color-blue-500-rgb) / 0.12);
    box-shadow: inset 0 0 0 1px rgb(var(--color-blue-600-rgb) / 0.08);
    font-size: 1rem;
    line-height: 1;
    font-weight: var(--font-weight-bold);
}

.scroll-top-button__text {
    padding-right: 0.15rem;
    font-size: 0.92rem;
    line-height: 1;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.01em;
}

.scroll-top-button.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.scroll-top-button:hover,
.scroll-top-button:focus-visible {
    border-color: rgb(var(--color-blue-600-rgb) / 0.28);
    background: rgb(var(--color-stone-0-rgb) / 0.98);
    color: var(--color-action-primary-hover);
    box-shadow:
        0 22px 48px rgb(var(--color-ink-900-rgb) / 0.22),
        inset 0 1px 0 rgb(var(--color-stone-0-rgb) / 0.92);
}

.pill,
.issue-chip,
.footer-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    border-radius: var(--radius-full);
}

.pill {
    padding-inline: 0.9rem;
    background: var(--color-bg-accent-soft);
    color: var(--color-text-primary);
    font-size: 0.92rem;
    font-weight: var(--font-weight-bold);
}

.quote-block {
    padding: var(--space-5);
    border: 1px solid rgb(var(--color-gold-400-rgb) / 0.22);
    border-left: 3px solid var(--color-action-secondary);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--color-bg-highlight-soft), rgb(var(--color-stone-0-rgb) / 0.92));
}


.site-footer__inner {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 1.4rem;
    margin: 20px;
    padding-bottom: 20px;

    border: 1px solid rgb(var(--color-blue-600-rgb) / 0.12);
    border-radius: calc(var(--radius-xl) + 0.25rem);
    background:
        radial-gradient(circle at top right, rgb(var(--color-gold-400-rgb) / 0.12), transparent 22rem),
        radial-gradient(circle at bottom left, rgb(var(--color-blue-500-rgb) / 0.12), transparent 20rem),
        linear-gradient(180deg, rgb(var(--color-stone-0-rgb) / 0.98), rgb(var(--color-stone-50-rgb) / 0.96));
    box-shadow:
        0 24px 60px rgb(var(--color-ink-900-rgb) / 0.08),
        inset 0 1px 0 rgb(var(--color-stone-0-rgb) / 0.88);
    overflow: hidden;
}









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

.video-tabs + .tabs {
    margin-top: var(--space-8);
}

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

.tabs__list {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    min-width: 0;
    padding-bottom: var(--space-1);
    scrollbar-width: none;
}

.tabs__scroll-control {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--tab-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-action-primary);
    box-shadow: var(--shadow-xs);
    transition: opacity 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

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

.tabs__scroll-control:disabled {
    opacity: 0.4;
    transform: none;
}

.tabs__button {
    flex: 0 0 auto;
    padding: 0.8rem 1.1rem;
    border: 1px solid var(--tab-border);
    border-radius: var(--radius-full);
    background: var(--tab-bg);
    color: var(--color-text-secondary);
    white-space: nowrap;
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

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

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

.video-card,
.gallery-card {
    border: 1px solid var(--card-border);
    border-radius: calc(var(--radius-lg) - 0.1rem);
    background: var(--card-bg);
    box-shadow: var(--shadow-xs);
}

.video-card {
    position: relative;
    display: grid;
    gap: var(--space-2);
    padding: 1rem 4.35rem 1rem 1.05rem;
    text-align: left;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.video-card::before {
    content: "";
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.45rem;
    height: 2.45rem;
    border-radius: 50%;
    background:
        linear-gradient(180deg, rgb(var(--color-blue-500-rgb) / 0.12), rgb(var(--color-blue-600-rgb) / 0.18));
    box-shadow:
        inset 0 0 0 1px rgb(var(--color-blue-600-rgb) / 0.12),
        0 6px 16px rgb(var(--color-ink-900-rgb) / 0.08);
    transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.video-card::after {
    content: "";
    position: absolute;
    top: calc(1rem + 1.225rem);
    right: calc(1rem + 1.225rem);
    width: 1.2rem;
    height: 1.2rem;
    background-color: var(--color-action-primary);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='black'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    transform: translate(50%, -50%);
    transition: background-color 180ms ease, transform 180ms ease;
}

.video-card:hover,
.video-card:focus-visible {
    transform: translateY(-2px);
    border-color: var(--color-border-accent);
    box-shadow: var(--shadow-sm);
    background: linear-gradient(180deg, rgb(var(--color-blue-500-rgb) / 0.04), rgb(var(--color-stone-0-rgb) / 0.98));
}

.video-card:hover::before,
.video-card:focus-visible::before {
    background:
        linear-gradient(180deg, rgb(var(--color-gold-400-rgb) / 0.18), rgb(var(--color-gold-500-rgb) / 0.22));
    box-shadow:
        inset 0 0 0 1px rgb(var(--color-gold-500-rgb) / 0.16),
        0 8px 18px rgb(var(--color-ink-900-rgb) / 0.12);
    transform: scale(1.03);
}

.video-card:hover::after,
.video-card:focus-visible::after {
    background-color: var(--color-action-secondary);
    transform: translate(50%, -50%) translateX(1px);
}

.video-card__meta {
    display: block;
    margin-bottom: 0.55rem;
    font-size: 1rem;
    letter-spacing: 0.14em;
    line-height: 1.35;
    text-transform: uppercase;
    color: var(--color-action-primary);
    font-weight: var(--font-weight-semibold);
}

.video-card > span:last-child {
    display: block;
    line-height: 1.55;
}

.video-card.is-video-jump-highlight {
    border-color: rgb(var(--color-gold-500-rgb) / 0.52);
    background: linear-gradient(180deg, rgb(var(--color-gold-100-rgb) / 0.48), rgb(var(--color-stone-0-rgb) / 0.98));
    box-shadow:
        0 0 0 3px rgb(var(--color-gold-500-rgb) / 0.16),
        0 14px 30px rgb(var(--color-ink-900-rgb) / 0.10);
    animation: video-jump-highlight 1.8s ease;
}

.video-card.is-video-jump-highlight::before {
    background:
        linear-gradient(180deg, rgb(var(--color-gold-400-rgb) / 0.22), rgb(var(--color-gold-500-rgb) / 0.28));
}

.video-card.is-video-jump-highlight::after {
    background-color: var(--color-action-secondary);
}

.gallery-card {
    overflow: hidden;
    padding: 0;
}

.gallery-card img {
    height: 100%;
    object-fit: cover;
    transition: transform 240ms ease;
}

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

.media-lightbox {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    padding: var(--space-4);
}

.media-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: var(--lightbox-backdrop);
    backdrop-filter: blur(10px);
}

.media-lightbox__dialog {
    position: relative;
    width: min(100%, 64rem);
    max-height: 90vh;
    overflow: auto;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    background: var(--lightbox-surface);
    box-shadow: var(--shadow-md);
}

.media-lightbox__close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--color-bg-muted);
    color: var(--color-text-primary);
    font-size: 1.35rem;
}

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

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

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

.media-lightbox__content iframe {
    aspect-ratio: 16 / 9;
    min-height: min(68vh, 34rem);
}

.media-lightbox__placeholder {
    display: grid;
    gap: 0.85rem;
    padding: var(--space-5);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, var(--color-bg-accent-soft), rgb(var(--color-stone-0-rgb) / 0.95));
    color: var(--color-text-primary);
}

/* =========================
   6) Section-Specific Components
   ========================= */

.hero-grid,
.overview-grid,
.candidacy-layout,
.cause-layout,
.timeline-atlas,
.timeline-columns,
.evidence-layout,
.support-layout,
.funding-layout,
.closing-layout,
.contact-layout {
    display: grid;
    gap: var(--space-4);
}

.hero-grid {
    align-items: start;
}

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

.hero-copy__lead,
.hero-copy__support {
    display: contents;
}

.meta-note {
    max-width: 42rem;
    padding-left: var(--space-4);
    border-left: 2px solid rgb(var(--color-gold-400-rgb) / 0.36);
}

.hero-subtitle {
    max-width: 40rem;
    font-size: var(--font-size-body-lg);
}

.hero-quote,
.hero-context,
.hero-note,
.hero-dossier,
.hero-similar,
.overview-card,
.chapter-card,
.statement-card,
.reality-card,
.reaction-card,
.cause-card,
.mandate-ribbon,
.docket-card,
.archive-card,
.timeline-note,
.goal-card,
.cost-card,
.donation-method,
.contact-panel,
.support-grid > .surface-card {
    padding: var(--card-padding);
}

.hero-quote,
.statement-card {
    background: linear-gradient(135deg, var(--color-bg-highlight-soft), rgb(var(--color-stone-0-rgb) / 0.96));
}

.hero-context,
.reaction-card,
.mandate-ribbon,
.goal-card {
    background: linear-gradient(180deg, var(--color-bg-accent-soft), rgb(var(--color-stone-0-rgb) / 0.96));
}

.hero-note,
.hero-dossier,
.timeline-note {
    background: linear-gradient(180deg, var(--card-bg-muted), rgb(var(--color-stone-0-rgb) / 0.98));
}

.hero-context,
.hero-note,
.hero-dossier,
.hero-similar,
.statement-card,
.reality-card,
.reaction-card,
.cause-card,
.mandate-ribbon,
.docket-card,
.archive-card,
.timeline-note,
.goal-card,
.cost-card,
.donation-method,
.contact-panel,
.support-grid > .surface-card {
    display: grid;
    gap: var(--space-4);
}

.hero-context__grid,
.overview-cards,
.cause-grid,
.similar-cases-grid,
.support-grid,
.closing-actions,
.contact-grid,
.candidacy-bridge__points,
.mandate-ribbon__track,
.evidence-grid,
.gallery-grid {
    display: grid;
    gap: var(--space-4);
}

.hero-context__item,
.bridge-point,
.dossier-item,
.mandate-pill {
    display: grid;
    gap: var(--space-2);
}

.hero-context__item {
    padding: 1rem;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    background: rgb(var(--color-stone-0-rgb) / 0.88);
}

.hero-similar {
    gap: var(--space-5);
    background: linear-gradient(180deg, rgb(var(--color-stone-0-rgb) / 0.98), var(--color-bg-muted));
}

.hero-similar__heading {
    display: grid;
    gap: var(--space-2);
    max-width: 48rem;
}

.similar-cases-grid {
    grid-template-columns: minmax(0, 1fr);
}

.similar-case-card {
    border-color: rgb(var(--color-blue-600-rgb) / 0.12);
    background:
        linear-gradient(180deg, rgb(var(--color-stone-0-rgb) / 0.98), rgb(var(--color-blue-500-rgb) / 0.04));
    box-shadow:
        0 18px 40px rgb(var(--color-ink-900-rgb) / 0.05),
        inset 0 1px 0 rgb(var(--color-stone-0-rgb) / 0.82);
}

.similar-case-card .chapter-card__media {
    height: 19rem;
    min-height: 19rem;
}

.similar-case-card .chapter-card__media img {
    object-position: center var(--similar-case-image-y, 50%);
}

.similar-case-card .chapter-card__body {
    align-content: start;
    gap: 0.7rem;
}

.similar-case-card .chapter-card__body > .h4 {
    margin-bottom: -0.3rem;
}

.chapter-card__subtitle {
    display: block;
    margin-top: -0.15rem;
    margin-bottom: 0.35rem;
    color: var(--color-text-secondary);
    font-style: italic;
    line-height: 1.2;
}


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

.hero-frame {
    overflow: hidden;
    min-height: 16rem;
}

.hero-frame img,
.chapter-card__media img,
.media-feature__visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-note {
    display: grid;
    gap: var(--space-3);
    align-content: start;
}

.hero-note__quote {
    margin-top: 0.1rem;
}

.hero-note__quote cite {
    display: block;
    margin-top: 0.55rem;
    color: var(--color-action-primary);
    font-size: 0.9rem;
    font-style: normal;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero-dossier__heading {
    display: grid;
    gap: var(--space-2);
}

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

.dossier-item {
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-default);
}

.dossier-item:first-child {
    padding-top: 0;
    border-top: 0;
}

.dossier-item span {
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-action-primary);
    font-weight: var(--font-weight-semibold);
}

.overview-card {
    gap: 0.85rem;
}

.key-points {
    display: grid;
    gap: var(--space-2);
}

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

.chapter-card {
    display: grid;
    grid-template-rows: auto auto 1fr;
    align-content: start;
    gap: 0;
}

.chapter-card__index,
.docket-list li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.45rem;
    height: 2.45rem;
    border-radius: 50%;
    background: var(--color-bg-accent-soft);
    color: var(--color-action-primary);
    font-size: 0.84rem;
    font-weight: var(--font-weight-extrabold);
}

.chapter-card--media {
    overflow: hidden;
    padding: 0;
}

.chapter-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 1rem var(--card-padding) 0.85rem;
}

.chapter-card__date {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--color-action-primary);
    font-size: 0.78rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: right;
}

.chapter-card__date::before {
    content: "";
    flex: 0 0 auto;
    width: 0.95rem;
    height: 0.95rem;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3m1 15a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-8h16Zm0-10H4V7a1 1 0 0 1 1-1h1v2h2V6h8v2h2V6h1a1 1 0 0 1 1 1Z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3m1 15a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-8h16Zm0-10H4V7a1 1 0 0 1 1-1h1v2h2V6h8v2h2V6h1a1 1 0 0 1 1 1Z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.chapter-card__media {
    overflow: hidden;
    height: 18rem;
    min-height: 18rem;
}

.chapter-card__body {
    display: grid;
    gap: 0.8rem;
    padding: 1rem var(--card-padding) var(--card-padding);
}

.candidacy-stack,
.timeline-side,
.video-rail,
.contact-list,
.cost-list {
    display: grid;
    gap: var(--space-4);
}

.issue-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.issue-chip,
.footer-nav a {
    padding-inline: 1rem;
    border: 1px solid var(--color-border-default);
    background: rgb(var(--color-stone-0-rgb) / 0.9);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
}

.candidacy-bridge {
    display: grid;
    gap: var(--space-4);
    padding: var(--card-padding);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, var(--color-bg-subtle), rgb(var(--color-stone-0-rgb) / 0.96));
    box-shadow: var(--shadow-sm);
}

.candidacy-bridge__lead {
    display: grid;
    gap: var(--space-2);
}

.bridge-point {
    padding-left: var(--space-4);
    border-left: 2px solid rgb(var(--color-blue-600-rgb) / 0.18);
}

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

.cause-emblem {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 8rem;
    padding: var(--space-5);
    border: 1px dashed rgb(var(--color-blue-600-rgb) / 0.22);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgb(var(--color-stone-0-rgb) / 0.98), var(--color-bg-accent-soft));
}

.cause-emblem span {
    font-size: clamp(1.4rem, 5vw, 2.2rem);
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: rgb(var(--color-ink-700-rgb) / 0.86);
}

.cause-card--quote {
    background: linear-gradient(160deg, var(--color-action-primary), var(--color-ink-700));
    color: var(--color-text-inverse);
    border-color: rgb(var(--color-blue-600-rgb) / 0.4);
}

.cause-card--quote .lead {
    color: var(--color-text-inverse);
}

.timeline-atlas {
    gap: var(--space-4);
}

.mandate-ribbon__header {
    display: grid;
    gap: var(--space-2);
}

.mandate-pill {
    padding: 1rem;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    background: rgb(var(--color-stone-0-rgb) / 0.94);
}

.mandate-pill strong {
    font-size: 1.45rem;
    letter-spacing: var(--letter-spacing-heading-tight);
}

.mandate-pill span {
    color: var(--color-text-secondary);
}

.mandate-pill--accent {
    border-color: rgb(var(--color-gold-500-rgb) / 0.28);
    background: linear-gradient(180deg, var(--color-bg-highlight-soft), rgb(var(--color-stone-0-rgb) / 0.96));
}

.docket-card,
.archive-card {
    gap: var(--space-4);
}

.docket-list {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.docket-list::before {
    content: "";
    position: absolute;
    left: 1.2rem;
    top: 0.8rem;
    bottom: 0.8rem;
    width: 1px;
    background: linear-gradient(180deg, rgb(var(--color-blue-600-rgb) / 0.08), rgb(var(--color-blue-600-rgb) / 0.26), rgb(var(--color-blue-600-rgb) / 0.08));
}

.docket-list li {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-4);
    align-items: start;
}

.docket-list li > div {
    display: grid;
    gap: var(--space-2);
}

.evidence-layout {
    margin-top: var(--space-6);
}

.video-tabs .evidence-layout {
    margin-top: 0;
}

.evidence-grid--video-quad {
    margin-top: 0;
    grid-auto-rows: 1fr;
    align-items: stretch;
}

.media-feature {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-3);
    overflow: hidden;
}

.media-feature__visual {
    min-height: 18rem;
    border-radius: calc(var(--radius-lg) - 0.2rem);
    overflow: hidden;
}

.media-feature__copy {
    display: grid;
    gap: 0.85rem;
    align-content: start;
}

.gallery-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 16.5rem;
}

.press-context-grid {
    display: grid;
    gap: 1rem;
    margin-top: var(--space-6);
}

.press-context-card {
    display: grid;
    gap: 0.8rem;
    padding: 1rem;
    align-content: start;
    background: linear-gradient(180deg, rgb(var(--color-stone-0-rgb) / 0.98), rgb(var(--color-stone-50-rgb) / 0.94));
    box-shadow: var(--shadow-xs);
}

.press-context-card[hidden],
.press-context-card.is-collapsed {
    display: none !important;
}

.press-context-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.press-context-card__date {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    color: var(--color-action-primary);
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.press-context-card__date::before {
    content: "";
    flex: 0 0 auto;
    width: 0.9rem;
    height: 0.9rem;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3m1 15a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-8h16Zm0-10H4V7a1 1 0 0 1 1-1h1v2h2V6h8v2h2V6h1a1 1 0 0 1 1 1Z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3m1 15a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-8h16Zm0-10H4V7a1 1 0 0 1 1-1h1v2h2V6h8v2h2V6h1a1 1 0 0 1 1 1Z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.press-context-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    min-height: 2rem;
    padding-inline: 0.8rem;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-full);
    background: rgb(var(--color-stone-0-rgb) / 0.92);
    color: var(--color-action-primary);
    font-size: 0.84rem;
    font-weight: var(--font-weight-semibold);
    transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.press-context-card__link::after {
    content: "";
    width: 0.85rem;
    height: 0.85rem;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14z'/%3E%3Cpath d='M5 5h6v2H7v10h10v-4h2v6H5z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14z'/%3E%3Cpath d='M5 5h6v2H7v10h10v-4h2v6H5z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.press-context-card__link:hover,
.press-context-card__link:focus-visible {
    transform: translateY(-1px);
    border-color: var(--color-border-accent);
    background: rgb(var(--color-blue-500-rgb) / 0.08);
    color: var(--color-action-primary-hover);
    box-shadow: var(--shadow-xs);
}

.press-context-card__content {
    display: grid;
    grid-template-columns: 6.8rem minmax(0, 1fr);
    gap: 0.95rem;
    align-items: start;
}

.press-context-card__media {
    aspect-ratio: 4 / 3;
    border-radius: calc(var(--radius-md) - 0.1rem);
    overflow: hidden;
    background: rgb(var(--color-stone-100-rgb) / 0.72);
}

.press-context-card__media img {
    height: 100%;
    object-fit: cover;
}

.press-context-card__body {
    display: grid;
    gap: 0.55rem;
    align-content: start;
}

.press-context-card__body h3 {
    font-size: clamp(1.1rem, 2vw, 1.32rem);
    line-height: 1.16;
}

.press-context-card__quote {
    position: relative;
    margin: 0;
    padding: 0.85rem 0.75rem 0.85rem 0.9rem;
    border: 1px solid rgb(var(--color-gold-400-rgb) / 0.16);
    border-left: 3px solid rgb(var(--color-gold-500-rgb) / 0.58);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgb(var(--color-gold-400-rgb) / 0.06), rgb(var(--color-stone-0-rgb) / 0.95));
}

.press-context-card__quote::before {
    content: "\201C";
    position: absolute;
    top: 0.35rem;
    left: 0.5rem;
    color: rgb(var(--color-gold-500-rgb) / 0.80);
    font-family: var(--font-family-heading);
    font-size: 2rem;
    line-height: 1;
}

.press-context-card__quote p {
    color: var(--color-text-secondary);
    line-height: 1.54;
    font-size: 0.96rem;
    padding-top: 5px;
    padding-left: 2px;
}

.press-context-actions {
    display: grid;
    justify-content: center;
    gap: 0.55rem;
    margin-top: var(--space-6);
    margin-bottom: var(--space-6);
    text-align: center;
}

.press-context-actions__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 3.3rem;
    padding-inline: 1.4rem;
    border-color: rgb(var(--color-blue-600-rgb) / 0.25);

    color: var(--color-text);
    box-shadow: 0 1.1rem 2rem -1.45rem rgb(var(--color-blue-600-rgb) / 0.42);
}

.press-context-actions__button:hover,
.press-context-actions__button:focus-visible {
    background: linear-gradient(135deg, var(--color-action-primary-hover), var(--color-ink-700));
    border-color: rgb(var(--color-blue-600-rgb) / 0.34);
    color: var(--color-text-inverse);
    transform: translateY(-1px);
}

.press-context-actions__button .material-symbols-rounded {
    font-size: 1.15rem;
    line-height: 1;
    transition: transform var(--transition-fast), color var(--transition-fast);
}

.press-context-actions__button:hover .material-symbols-rounded,
.press-context-actions__button:focus-visible .material-symbols-rounded {
    transform: translateY(1px);
}

.press-context-actions__button.is-exhausted {
    opacity: 0;
    transform: translateY(0.45rem);
    pointer-events: none;
}

.press-context-actions__end {

    position: absolute;
    font-size: 0.95rem;
    margin: 0;
    color: var(--color-text);
    opacity: 0;
    transform: translateY(-0.2rem);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    left: 45%;
    transform: translateX(-50%);
}

.press-context-actions__end.is-visible {
    opacity: 1;
    transform: translateY(0);
}

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

.support-layout,
.closing-layout {
    gap: var(--space-4);
}

.support-grid > .surface-card {
    gap: 0.85rem;
}

.goal-card {
    border-color: var(--color-border-accent);
}

.progress-block {
    display: grid;
    gap: 0.85rem;
}

.progress-block__bar {
    height: 0.85rem;
    overflow: hidden;
    border-radius: var(--radius-full);
    background: rgb(var(--color-blue-600-rgb) / 0.12);
}

.progress-block__bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--color-action-secondary), var(--color-action-primary));
}

.progress-block__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    justify-content: space-between;
}

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

.cost-list li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.85rem;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border-default);
}

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

.closing-copy {
    display: grid;
    gap: var(--space-4);
    max-width: 44rem;
}

.donation-method {
    gap: 0.85rem;
}

.donation-method strong {
    word-break: break-word;
}

.donation-method--featured {
    border-color: rgb(var(--color-gold-500-rgb) / 0.28);
    background: linear-gradient(160deg, var(--color-bg-highlight-soft), rgb(var(--color-stone-0-rgb) / 0.96));
}

.contact-form,
.contact-form__header,
.contact-form__grid,
.contact-form__actions,
.contact-form__fieldset {
    display: grid;
    gap: var(--space-4);
}

.contact-form {
    padding: var(--card-padding);
    border-color: rgb(var(--color-blue-600-rgb) / 0.18);
    background: linear-gradient(180deg, rgb(var(--color-stone-0-rgb) / 0.98), var(--color-bg-muted));
    box-shadow:
        0 24px 60px rgb(var(--color-ink-900-rgb) / 0.08),
        inset 0 1px 0 rgb(var(--color-stone-0-rgb) / 0.84);
}

.contact-form__fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.contact-form__fieldset legend {
    margin-bottom: var(--space-3);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.request-type-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.request-type-option {
    position: relative;
    display: inline-flex;
}

.request-type-option input {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.request-type-option span {
    display: inline-flex;
    align-items: center;
    min-height: 3rem;
    padding: 0.72rem 1rem;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-full);
    background: rgb(var(--color-stone-0-rgb) / 0.94);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-semibold);
    transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
    cursor: pointer;
}

.request-type-option:hover span,
.request-type-option input:focus-visible + span {
    border-color: rgb(var(--color-blue-600-rgb) / 0.32);
    background: rgb(var(--color-blue-500-rgb) / 0.1);
    color: var(--color-action-primary);
    box-shadow: var(--shadow-xs);
}

.request-type-option input:checked + span {
    border-color: rgb(var(--color-blue-600-rgb) / 0.3);
    background: linear-gradient(180deg, rgb(var(--color-blue-500-rgb) / 0.14), rgb(var(--color-stone-0-rgb) / 0.98));
    color: var(--color-action-primary);
    box-shadow: var(--shadow-xs);
}

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

.form-field {
    display: grid;
    gap: 0.6rem;
}

.form-field--full {
    grid-column: 1 / -1;
}

.form-field span {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.form-field input,
.form-field textarea {
    width: 100%;
    min-height: 3.25rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    background: rgb(var(--color-stone-0-rgb) / 0.95);
    color: var(--color-text-primary);
    box-shadow: inset 0 1px 2px rgb(var(--color-ink-900-rgb) / 0.04);
    transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.form-field textarea {
    min-height: 9.5rem;
    resize: vertical;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: var(--color-action-primary);
}

.form-field input:focus,
.form-field textarea:focus {
    outline: none;
    border-color: rgb(var(--color-blue-600-rgb) / 0.34);
    background: rgb(var(--color-stone-0-rgb) / 1);
    box-shadow:
        0 0 0 4px rgb(var(--color-blue-500-rgb) / 0.12),
        inset 0 1px 2px rgb(var(--color-ink-900-rgb) / 0.04);
}

.contact-consent {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.85rem;
    align-items: start;
    color: var(--color-text-secondary);
}

.contact-consent input {
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.18rem;
    accent-color: var(--color-action-primary);
}

.contact-form__actions {
    align-items: center;
}

.contact-form__meta {
    max-width: 36rem;
    color: var(--color-action-primary);
    font-size: 0.95rem;
}

.contact-form__success {
    padding: 1rem 1.1rem;
    border: 1px solid rgb(var(--color-gold-500-rgb) / 0.26);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgb(var(--color-gold-500-rgb) / 0.08), rgb(var(--color-stone-0-rgb) / 0.98));
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
}

.contact-form__error {
    padding: 1rem 1.1rem;
    border: 1px solid rgb(var(--color-blue-600-rgb) / 0.22);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgb(var(--color-blue-500-rgb) / 0.08), rgb(var(--color-stone-0-rgb) / 0.98));
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
}

.contact-panel {
    gap: 0.85rem;
}

.contact-heading {
    max-width: 46rem;
}

.contact-panel--primary {
    border-color: rgb(var(--color-blue-600-rgb) / 0.22);
    background: linear-gradient(180deg, var(--color-bg-accent-soft), rgb(var(--color-stone-0-rgb) / 0.98));
}

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

.contact-list--section {
    gap: 0.85rem;
}

.contact-list--section a {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 2.75rem;
    padding-inline: 1rem;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-full);
    background: rgb(var(--color-stone-0-rgb) / 0.9);
}

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

.timeline-column {
    display: grid;
    gap: var(--space-4);
    align-content: start;
}
.timeline-card {
    display: grid;
    align-content: start;
    gap: 1.2rem;
    padding: clamp(1.15rem, 2vw, 1.55rem);
    border-color: rgb(var(--color-ink-900-rgb) / 0.08);
    background: linear-gradient(180deg, rgb(var(--color-stone-0-rgb) / 0.98), rgb(var(--color-stone-50-rgb) / 0.92));
    box-shadow: var(--shadow-sm);
}

.timeline-card > .eyebrow {
    margin-bottom: -0.05rem;
}

.homepage-timeline .timeline-composition {
    margin-top: var(--space-6);
}

.timeline-card > h2,
.timeline-card > h3 {
    max-width: 20ch;
    line-height: 0.95;
}

.timeline-card--quote {
    align-content: start;
    background: linear-gradient(160deg, rgb(var(--color-stone-0-rgb) / 0.98), var(--color-bg-highlight-soft));
}

.timeline-mandates,
.timeline-archive-grid,
.timeline-steps {
    display: grid;
    gap: 0.85rem;
}

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

.timeline-mandate {
    display: grid;
    gap: var(--space-2);
    padding: 0.95rem 0.9rem;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    background: rgb(var(--color-stone-100-rgb) / 0.46);
}

.timeline-mandate strong {
    font-size: 1.2rem;
    line-height: 1;
    letter-spacing: var(--letter-spacing-heading-tight);
}

.timeline-mandate span {
    color: var(--color-text-secondary);
}

.timeline-mandate--jump {
    position: relative;
    align-content: start;
    transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.timeline-mandate--jump:hover,
.timeline-mandate--jump:focus-visible {
    transform: translateY(-2px);
    border-color: rgb(var(--color-blue-600-rgb) / 0.24);
    background: linear-gradient(180deg, rgb(var(--color-blue-500-rgb) / 0.08), rgb(var(--color-stone-0-rgb) / 0.96));
    box-shadow: var(--shadow-xs);
}

.timeline-mandate__hint {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.25rem;
    color: var(--color-action-primary) !important;
    font-size: 0.78rem;
    font-weight: var(--font-weight-semibold);
}

.timeline-mandate__hint .material-symbols-rounded {
    font-size: 1rem;
}

.timeline-mandate--accent {
    border-color: rgb(var(--color-gold-500-rgb) / 0.28);
    background: linear-gradient(180deg, rgb(var(--color-gold-400-rgb) / 0.08), rgb(var(--color-stone-0-rgb) / 0.96));
}

.timeline-archive-grid {
    grid-template-columns: minmax(0, 1fr);
}

.timeline-archive-item {
    position: relative;
    display: grid;
    gap: 0.85rem;
    padding: 1rem 3.75rem 1rem 1rem;
    text-align: left;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    background: rgb(var(--color-stone-0-rgb) / 0.94);
    box-shadow: var(--shadow-xs);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.timeline-archive-item::before {
    content: "";
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.45rem;
    height: 2.45rem;
    border-radius: 50%;
    background:
            linear-gradient(180deg, rgb(var(--color-blue-500-rgb) / 0.12), rgb(var(--color-blue-600-rgb) / 0.18));
    box-shadow:
            inset 0 0 0 1px rgb(var(--color-blue-600-rgb) / 0.12),
            0 6px 16px rgb(var(--color-ink-900-rgb) / 0.08);
    transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.timeline-archive-item::after {
    content: "";
    position: absolute;
    top: calc(1rem + 1.225rem);
    right: calc(1rem + 1.225rem);
    width: 1.2rem;
    height: 1.2rem;
    background-color: var(--color-action-primary);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='black'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    transform: translate(50%, -50%);
    transition: background-color 180ms ease, transform 180ms ease;
}



.timeline-archive-item:hover,
.timeline-archive-item:focus-visible {
    transform: translateY(-2px);
    border-color: var(--color-border-accent);
    box-shadow: var(--shadow-sm);
    background: linear-gradient(180deg, rgb(var(--color-blue-500-rgb) / 0.04), rgb(var(--color-stone-0-rgb) / 0.98));
}

.timeline-archive-item:hover::before,
.timeline-archive-item:focus-visible::before {
    background: linear-gradient(180deg, rgb(var(--color-gold-400-rgb) / 0.18), rgb(var(--color-gold-500-rgb) / 0.22));
    transform: scale(1.03);
}

.timeline-archive-item:hover::after,
.timeline-archive-item:focus-visible::after {
    background-color: var(--color-action-secondary);
    transform: translate(50%, -50%) translateX(1px);
}

.timeline-archive-item__meta {
    font-size: 0.76rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-action-primary);
    font-weight: var(--font-weight-semibold);
}

.timeline-archive-item strong {
    font-size: 1rem;
    line-height: 1.35;
}

.timeline-archive-item > span:last-child {
    color: var(--color-text-secondary);
}

.timeline-steps {
    margin: 0;
    padding-left: 1.35rem;
    gap: 0.7rem;
}

.timeline-steps li {
    color: var(--color-text-secondary);
    line-height: 1.56;
}

.timeline-steps strong {
    color: var(--color-text-primary);
}

.timeline-quote {
    margin: 0;
}

.timeline-quote p {
    font-family: var(--font-family-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 0.98;
    letter-spacing: var(--letter-spacing-heading-tight);
    color: rgb(var(--color-ink-700-rgb) / 0.76);
}
/* =========================
   7) Responsive Overrides
   ========================= */

@media (prefers-reduced-motion: no-preference) {
    .hero-copy > *,
    .hero-visuals > *,
    .hero-dossier {
        animation: rise-fade 650ms ease both;
    }

    .hero-copy > *:nth-child(2),
    .hero-visuals > *:nth-child(2) {
        animation-delay: 80ms;
    }

    .hero-copy > *:nth-child(3),
    .hero-visuals > *:nth-child(3) {
        animation-delay: 150ms;
    }

    .hero-copy > *:nth-child(4),
    .hero-dossier {
        animation-delay: 210ms;
    }
}

@media (min-width: 48rem) {
    :root {
        --container-padding-inline: 1.25rem;
    }

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

    .hero-visuals {
        grid-template-columns: minmax(0, 1.1fr) minmax(12rem, 0.9fr);
    }

    .hero-frame--primary {
        min-height: 26rem;
        grid-row: 1 / span 2;
    }

    .hero-frame--secondary,
    .hero-note {
        min-height: 12rem;
    }

    .hero-context__grid,
    .candidacy-bridge__points,
    .mandate-ribbon__track,
    .support-grid,
    .closing-actions,
    .cause-grid,
    .overview-cards,
    .similar-cases-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-footer__legal {
    width: 100%;
    display: grid;
    justify-items: center;
    gap: 0.85rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgb(var(--color-blue-600-rgb) / 0.1);
    color: var(--color-text-secondary);
    text-align: center;
}

    .site-footer__legal-links {
        justify-content: center;
    }

    .evidence-grid,
    .gallery-grid,
    .press-context-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .press-context-card__content {
        grid-template-columns: 7rem minmax(0, 1fr);
    }

    .tabs__list {
        padding-bottom: 0;
    }

    .progress-block__meta {
        align-items: center;
    }

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

@media (min-width: 72rem) {
    h1,
    .h1 {
        font-size: clamp(3.2rem, 3vw + 1.8rem, 4.45rem);
    }

    h2,
    .h2 {
        font-size: clamp(2.2rem, 2vw + 1.25rem, 3rem);
    }

    h3,
    .h3 {
        font-size: clamp(1.45rem, 1vw + 1rem, 2.05rem);
    }

    h4,
    .h4 {
        font-size: clamp(1.1rem, 0.55vw + 0.95rem, 1.34rem);
    }

    .display {
        font-size: clamp(3.2rem, 2.5vw + 1.8rem, 4.4rem);
    }

    .hero-title {
        font-size: clamp(4rem, 3vw + 2rem, 5.3rem);
    }

    .eyebrow {
        font-size: 0.8rem;
    }

    .homepage-header__inner {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 1rem 1.35rem;
        padding: 1rem 1.1rem;
    }

    .homepage-menu-toggle {
        display: none;
    }

    .homepage-nav-shell {
        grid-column: auto;
        max-height: none;
        overflow: visible;
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }

    .homepage-nav {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        gap: 0.3rem;
        padding: 0.35rem;
        border-radius: var(--radius-full);
        background: rgb(var(--color-stone-0-rgb) / 0.76);
        box-shadow:
            inset 0 1px 0 rgb(var(--color-stone-0-rgb) / 0.78),
            0 12px 28px rgb(var(--color-ink-900-rgb) / 0.06);
    }

    .homepage-nav a {
        min-height: 2.65rem;
        padding: 0.7rem 0.92rem;
    }

    .hero-grid {
        grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
        grid-template-areas:
            "copy visuals"
            "copy dossier"
            "similar similar";
    }

    .hero-copy {
        grid-area: copy;
        padding-right: var(--space-4);
    }

    .hero-visuals {
        grid-area: visuals;
    }

    .hero-dossier {
        grid-area: dossier;
    }

    .hero-similar {
        grid-area: similar;
    }

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

    .overview-grid {
        grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
        align-items: start;
    }

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

    .chapter-river {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: start;
    }

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

    .candidacy-layout {
        grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
        align-items: start;
    }

    .candidacy-bridge {
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    }

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

    .cause-layout {
        grid-template-columns: 11rem minmax(0, 1fr);
        align-items: start;
    }

    .cause-emblem {
        min-height: 100%;
    }

    .cause-emblem span {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        font-size: clamp(1.8rem, 2vw, 2.6rem);
    }

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

    .timeline-columns {
        grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
        align-items: start;
    }

    .timeline-composition {
        grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
        align-items: start;
    }

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

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

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

    .media-feature {
        grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.84fr);
        align-items: stretch;
    }

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

    .funding-layout {
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
        align-items: start;
    }

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

    .contact-grid {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.95fr) minmax(0, 0.95fr);
        align-items: start;
    }

    .contact-form {
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
        align-items: start;
    }

    .contact-form__header,
    .contact-form__fieldset,
    .contact-consent,
    .contact-form__actions,
    .contact-form__success,
    .contact-form__error {
        grid-column: 1 / -1;
    }

    .contact-form__actions {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .donation-method--featured {
        grid-column: span 2;
    }

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

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

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

@media (min-width: 72rem) and (max-width: 78.125rem) {
    :root {
        --container-padding-inline: 0.95rem;
    }

    .page-shell {
        padding: 0.75rem;
    }

    .homepage-header {
        padding-block: 0.65rem;
    }

    .homepage-header__inner {
        gap: 0.75rem 0.9rem;
        padding: 0.78rem 0.82rem;
    }

    .brand-mark {
        gap: 0.55rem;
        padding: 0.2rem 0.25rem;
        font-size: 1.18rem;
    }

    .brand-mark__logo {
        width: 2.35rem;
        height: 2.35rem;
    }

    .brand-mark__kicker {
        font-size: 0.68rem;
        letter-spacing: 0.14em;
    }

    .homepage-nav {
        gap: 0.15rem;
        padding: 0.24rem;
    }

    .homepage-nav a {
        min-height: 2.42rem;
        padding: 0.56rem 0.66rem;
        font-size: 0.88rem;
    }
}
@media (max-width: 47.99rem) {
    .hero-grid {
        display: flex;
        flex-direction: column;
    }

    .hero-copy {
        display: contents;
    }

    .hero-copy__lead,
    .hero-copy__support {
        display: grid;
        gap: var(--space-4);
    }

    .hero-copy__lead {
        order: 1;
    }

    .hero-visuals {
        order: 2;
    }

    .hero-copy__support {
        order: 3;
    }

    .hero-similar {
        order: 4;
    }

    .hero-dossier {
        order: 5;
    }
@media (max-width: 47.99rem) {
    .tabs--mobile-rail .tabs__nav {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 0.5rem;
        align-items: center;
    }
    .tabs--mobile-rail .tabs__scroll-control {
        display: inline-flex;
        align-self: stretch;
        width: 2.35rem;
        height: auto;
        min-height: 2.85rem;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 243, 237, 0.96));
    }
    .tabs--mobile-rail .tabs__scroll-control .material-symbols-rounded {
        font-size: 1.25rem;
    }
    .tabs--mobile-rail .tabs__list {
        gap: 0.55rem;
        padding-bottom: 0.25rem;
        scroll-behavior: smooth;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }
    .tabs--mobile-rail .tabs__button {
        padding: 0.68rem 0.95rem;
        font-size: 0.95rem;
        line-height: 1.2;
        scroll-snap-align: start;
    }
    .video-card::before {
        top: 50%;
        transform: translateY(-50%);
    }
    .video-card::after {
        top: 50%;
        transform: translate(50%, -50%);
    }
    .cookie-bar {
        padding: 0.95rem;
    }

    .cookie-bar__inner {
        flex-direction: column;
        align-items: stretch;
    }

    .cookie-bar__actions {
        justify-content: stretch;
    }

    .cookie-bar__button {
        width: 100%;
    }

    .press-context-card__content {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.85rem;
    }

    .press-context-card__media {
        width: min(7.5rem, 100%);
    }

    .press-context-card__body {
        gap: 0.7rem;
    }

    .press-context-card__quote {
        width: 100%;
    }

    .contact-form__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .contact-form__actions {
        justify-items: start;
    }

    .request-type-group {
        gap: 0.6rem;
    }

    .request-type-option {
        width: 100%;
    }

    .request-type-option span {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}

@keyframes video-jump-highlight {
    0% {
        border-color: rgb(var(--color-gold-500-rgb) / 0.18);
        box-shadow: var(--shadow-xs);
    }

    22% {
        border-color: rgb(var(--color-gold-500-rgb) / 0.52);
        box-shadow:
            0 0 0 4px rgb(var(--color-gold-500-rgb) / 0.18),
            0 18px 34px rgb(var(--color-ink-900-rgb) / 0.12);
    }

    100% {
        border-color: rgb(var(--color-gold-500-rgb) / 0.18);
        box-shadow: var(--shadow-xs);
    }
}

@keyframes rise-fade {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}








@media (max-width: 395px) {
    .tabs--mobile-rail .tabs__scroll-control {
        width: 2.1rem;
        min-height: 2.7rem;
    }

    .tabs--mobile-rail .tabs__button {
        padding: 0.62rem 0.88rem;
        font-size: 0.9rem;
    }

    .homepage-menu-toggle__label {
      display: none !important

    }

}