/* ============================================================
   READ Ghost Theme — Main Stylesheet
   A Premium Literary & Personal Blog Theme
   ============================================================ */

/* ── CSS Custom Properties ──────────────────────────────────── */
:root {
    /* Color Palette: Sunset Violet (Default Preset - Light Mode Version) */
    --clr-bg-rgb: 255, 255, 255;
    --clr-bg: rgb(var(--clr-bg-rgb));
    /* Pure white background */
    --clr-bg-2: #f8fafc;
    /* Soft slate-white for secondary surfaces */
    --clr-bg-3: #ffffff;
    /* Card background */
    --clr-bg-4: #f1f5f9;
    /* Hover surface */
    --clr-border: #e2e8f0;
    /* Clean light border */
    --clr-border-light: #f1f5f9;
    /* Lighter borders */

    /* Sunset Violet/Rose Accents - tuned for Light Mode contrast */
    --clr-gold: #e11d48;
    /* Primary accent - vibrant rose red */
    --clr-gold-rgb: 225, 29, 72;
    --clr-gold-light: #fb7185;
    /* Lighter rose */
    --clr-gold-dim: #be123c;
    /* Deep rose for backgrounds */
    --clr-amber: #ea580c;
    /* Sunset orange accent */
    --clr-rust: #c2410c;
    /* Deep sunset orange */

    /* Text - dark charcoal slate for readability */
    --clr-text: #0f172a;
    /* Primary text */
    --clr-text-2: #334155;
    /* Secondary text */
    --clr-text-3: #64748b;
    /* Muted text */
    --clr-text-inv: #ffffff;
    /* Inverted text on rose button backgrounds */

    /* Terracotta & Teal fallbacks for legacy/hero sections */
    --clr-terracotta: var(--clr-gold);
    --clr-terracotta-light: var(--clr-gold-light);
    --clr-terracotta-dim: var(--clr-gold-dim);
    --clr-terracotta-alpha-10: var(--clr-gold-alpha-10);
    --clr-teal: var(--clr-amber);
    --clr-teal-light: var(--clr-gold-light);
    --clr-teal-alpha-10: var(--clr-gold-alpha-10);

    /* Typography */
    --font-display: 'Plus Jakarta Sans', 'Outfit', 'Inter', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --font-ui: 'Inter', system-ui, sans-serif;


    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2.5rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;

    /* Layout */
    --max-w-content: 740px;
    --max-w-wide: 1140px;
    --max-w-narrow: 620px;

    /* Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-mid: 300ms ease;
    --transition-slow: 500ms ease;

    /* Shadows - softer and less dramatic for light theme */
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 8px 32px rgba(15, 23, 42, 0.12);
    --shadow-gold: 0 0 24px rgba(225, 29, 72, 0.12);
    --clr-card-bg: rgba(255, 255, 255, 0.8);
    --clr-gold-alpha-10: rgba(225, 29, 72, 0.08);
    --clr-gold-alpha-20: rgba(225, 29, 72, 0.15);

    /* ── Ghost 6 required font variables ────────────────── */
    --gh-font-heading: var(--font-display, "Playfair Display", serif);
    --gh-font-body: var(--font-body, "Inter", sans-serif);
}

/* ── Reset & Base ────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    width: 100%;
}

body {
    background-color: var(--clr-bg);
    color: var(--clr-text);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    min-height: 100vh;
    overflow-x: hidden;
    width: 100%;
    transition: background-color var(--transition-mid), color var(--transition-mid);
}

body::before,
body::after {
    content: '';
    position: fixed;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    opacity: 0.06;
    filter: blur(140px);
    transition: background var(--transition-mid);
}

body::before {
    top: -200px;
    left: -200px;
    background: radial-gradient(circle, var(--clr-gold) 0%, transparent 70%);
}

body::after {
    bottom: -200px;
    right: -200px;
    background: radial-gradient(circle, var(--clr-amber) 0%, transparent 70%);
}

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

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

ul,
ol {
    list-style: none;
}

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

/* ── Page Progress Bar ───────────────────────────────────────── */
.progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background: linear-gradient(90deg, var(--clr-gold), var(--clr-amber));
    z-index: 9999;
    transition: width 100ms linear;
}

/* ── Preloader ───────────────────────────────────────────────── */
.preloader {
    position: fixed;
    inset: 0;
    background: var(--clr-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.preloader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.preloader-inner {
    text-align: center;
}

.preloader-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: var(--space-lg);
}

.preloader-logo-img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    animation: preloader-logo-in 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.preloader-badge-divider {
    width: 1px;
    height: 75px;
    background: var(--clr-border);
}

.preloader-logo-jubilee {
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin: 0 -10px;
    animation: preloader-logo-in 0.9s 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes preloader-logo-in {
    from {
        opacity: 0;
        transform: scale(0.5) rotate(-10deg);
    }

    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

.preloader-tagline {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--clr-text-3);
    margin-top: var(--space-sm);
    animation: fade-in 1s 0.5s ease both;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ── Scroll Animations ───────────────────────────────────────── */
[data-animate] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-animate="fade-left"] {
    transform: translateX(32px);
}

[data-animate="fade-right"] {
    transform: translateX(-32px);
}

[data-animate].is-visible {
    opacity: 1;
    transform: none;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn-primary-read {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.7rem 1.6rem;
    background: var(--clr-gold);
    color: var(--clr-text-inv);
    font-family: var(--font-ui);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-primary-read:hover {
    background: var(--clr-gold-light);
    transform: translateY(-1px);
    box-shadow: var(--shadow-gold);
}

.btn-ghost-read {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.7rem 1.6rem;
    background: transparent;
    color: var(--clr-text-2);
    font-family: var(--font-ui);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.btn-ghost-read:hover {
    color: var(--clr-text);
    border-color: var(--clr-gold);
    background: rgba(var(--clr-gold-rgb), 0.06);
}

.btn-sm {
    padding: 0.45rem 1rem;
    font-size: 0.8rem;
}

.btn-full {
    width: 100%;
    justify-content: center;
}

/* ── Site Header ─────────────────────────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(var(--clr-bg-rgb), 0.85);
    backdrop-filter: blur(20px) saturate(1.8);
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
    transition: background var(--transition-mid), box-shadow var(--transition-mid);
    border-bottom: 1px solid var(--clr-border);
}

.site-header.scrolled {
    background: rgba(var(--clr-bg-rgb), 0.96);
    box-shadow:
        0 1px 0 var(--clr-border),
        var(--shadow-sm);
}

/* Decorative gold accent line at the very top */
.header-accent-line {
    height: 3px;
    background: linear-gradient(90deg,
            transparent 0%,
            var(--clr-gold-dim) 15%,
            var(--clr-gold) 35%,
            var(--clr-gold-light) 50%,
            var(--clr-gold) 65%,
            var(--clr-gold-dim) 85%,
            transparent 100%);
    opacity: 0.8;
}

.header-inner {
    max-width: var(--max-w-wide);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

/* Single-row header layout */
.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 0;
    gap: var(--space-lg);
}

/* ── Logo ── */
.site-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
    position: relative;
}

.site-logo-glow {
    position: absolute;
    width: 64px;
    height: 64px;
    background: radial-gradient(circle, var(--clr-gold-alpha-20) 0%, transparent 70%);
    border-radius: 50%;
    left: -7px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-mid);
}

.site-logo:hover .site-logo-glow {
    opacity: 1;
}

.site-logo-img {
    height: 50px;
    width: 50px;
    object-fit: contain;
    border-radius: 8px;
    background: #ffffff;
    padding: 4px;
    transition: transform var(--transition-mid), box-shadow var(--transition-mid);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08), 0 0 0 1px var(--clr-border);
}

.site-logo:hover .site-logo-img {
    transform: scale(1.05) translateY(-1px);
    box-shadow: 0 6px 18px var(--clr-gold-alpha-20), 0 0 0 1px var(--clr-gold-alpha-10);
}

.site-logo-wordmark {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--clr-gold-light) 0%, var(--clr-gold) 50%, var(--clr-rust) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: letter-spacing var(--transition-mid);
    line-height: 1;
}

.logo-letter-accent {
    background: linear-gradient(135deg, var(--clr-rust), var(--clr-gold-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.site-logo:hover .site-logo-wordmark {
    letter-spacing: 0.4em;
}

.logo-badge-divider {
    width: 1px;
    height: 28px;
    background: var(--clr-border);
    margin: 0 4px;
}

.site-logo-jubilee {
    height: 60px;
    width: auto;
    object-fit: contain;
    margin: 0 -12px;
    filter: drop-shadow(0 0 4px var(--clr-gold-alpha-20));
    transition: transform var(--transition-mid), filter var(--transition-mid);
}

.site-logo:hover .site-logo-jubilee {
    transform: scale(1.1) rotate(5deg);
    filter: drop-shadow(0 0 10px rgba(var(--clr-gold-rgb), 0.4));
}

/* ── Center Navigation ── */
.site-nav {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 0;
}

.nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav li {
    position: relative;
}

.nav li a {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-text-2);
    position: relative;
    padding: 0.65rem 0.95rem;
    display: block;
    white-space: nowrap;
    transition: color var(--transition-fast);
}

/* Animated underline */
.nav li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--clr-gold), var(--clr-gold-light));
    border-radius: 2px;
    transition: width 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), left 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.nav li a:hover::after,
.nav li a.nav-current::after,
.nav li.nav-current a::after {
    width: 70%;
    left: 15%;
}

.nav li a:hover,
.nav li a.nav-current,
.nav li.nav-current a {
    color: var(--clr-gold);
}

/* ── Header Actions (right side) ── */
.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-md);
    flex-shrink: 0;
}

/* Subscribe Button */
.header-subscribe-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, var(--clr-gold-dim) 0%, var(--clr-gold) 50%, var(--clr-rust) 100%);
    background-size: 200% 200%;
    padding: 0.45rem 1.1rem;
    border-radius: 50px;
    border: none;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-position 0.5s ease;
    box-shadow: 0 2px 12px rgba(232, 160, 32, 0.2);
}

.header-subscribe-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent 60%);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.header-subscribe-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(232, 160, 32, 0.35);
    background-position: 100% 0;
}

.header-subscribe-btn:hover::before {
    opacity: 1;
}

.header-subscribe-btn svg {
    width: 14px;
    height: 14px;
    transition: transform 0.3s ease;
}

.header-subscribe-btn:hover svg {
    transform: scale(1.15);
    animation: heartbeat 0.6s ease-in-out;
}

@keyframes heartbeat {

    0%,
    100% {
        transform: scale(1.15);
    }

    25% {
        transform: scale(1.3);
    }

    50% {
        transform: scale(1.15);
    }

    75% {
        transform: scale(1.25);
    }
}

/* ── Nav Toggle (mobile) ── */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 6px;
    cursor: pointer;
    background: none;
    border: none;
}

.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--clr-text-2);
    border-radius: 2px;
    transition: transform var(--transition-fast), opacity var(--transition-fast), background var(--transition-fast);
}

.nav-toggle:hover span {
    background: var(--clr-gold);
}

.nav-toggle.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-open span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ── Mobile Menu ── */
.mobile-menu {
    display: none;
    background: rgba(var(--clr-bg-rgb), 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--clr-border);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-slow);
}

.mobile-menu.is-open {
    max-height: 500px;
}

.mobile-menu-inner {
    max-width: var(--max-w-wide);
    margin: 0 auto;
    padding: var(--space-lg) var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.mobile-menu .nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.mobile-menu .nav li a {
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--clr-text-2);
    transition: color var(--transition-fast);
    padding: var(--space-xs) 0;
    display: block;
    border-bottom: 1px solid var(--clr-border);
}

.mobile-menu .nav li a:hover {
    color: var(--clr-gold);
}

/* ── Home Hero ───────────────────────────────────────────────── */
.home-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    overflow: hidden;
    border-bottom: 1px solid var(--clr-border);
    padding: 0;
    /* Let banner go edge-to-edge */
}

/* Banner image block styling */
.hero-image-banner {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
}

.hero-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    display: block;
}

.hero-image-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.25) 100%);
    pointer-events: none;
}

/* Solid background text block styling */
.hero-text-content {
    background: linear-gradient(135deg, #f43f5e, #fb923c);
    width: 100%;
    padding: var(--space-xl) 0 var(--space-xl);
    position: relative;
    z-index: 2;
}

/* Invert colors inside text content for contrast */
.hero-text-content .vision-org-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-md);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 8px 24px;
    border-radius: var(--radius-full);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin-bottom: var(--space-md);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.hero-text-content .brand-acronym {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    color: #ffe066;
    text-shadow: 0 0 10px rgba(255, 224, 102, 0.4);
}

.hero-text-content .brand-divider {
    width: 1.5px;
    height: 18px;
    background: rgba(255, 255, 255, 0.3);
}

.hero-text-content .brand-fullname {
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ffffff;
}

@media (max-width: 640px) {
    .hero-text-content .vision-org-brand {
        flex-direction: column;
        gap: var(--space-xs);
        border-radius: var(--radius-lg);
        padding: 12px 20px;
    }

    .hero-text-content .brand-divider {
        width: 40px;
        height: 1.5px;
        margin: 4px 0;
    }

    .hero-text-content .brand-fullname {
        font-size: 0.8rem;
        line-height: 1.4;
    }
}

.hero-text-content .vision-text {
    color: #ffffff;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    line-height: 1.35;
}

.hero-text-content .vision-accent {
    color: #ffe066;
    /* Standout warm gold color */
    background: none;
    -webkit-text-fill-color: initial;
    background-clip: initial;
    font-weight: 800;
    text-shadow: 0 0 15px rgba(255, 224, 102, 0.4);
    border-bottom: 2px solid rgba(255, 224, 102, 0.7);
    padding-bottom: 2px;
}

.hero-text-content .vision-eyebrow {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-text-content .jubilee-badge-wrap {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: none;
}

.hero-text-content .jubilee-badge {
    background: rgba(15, 23, 42, 0.35);
    border-color: transparent;
    color: #ffffff;
}

.hero-text-content .jubilee-text {
    color: #ffffff;
}

.hero-text-content .jubilee-years {
    color: #ffe066;
}

.hero-text-content .jubilee-divider {
    color: rgba(255, 255, 255, 0.4);
}

.hero-text-content .vision-divider-line {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
}

.hero-text-content .vision-divider-icon {
    color: #ffe066;
}

.hero-text-content .mission-block {
    border-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2)) 1;
}

.hero-text-content .mission-label {
    color: rgba(255, 255, 255, 0.85);
}

.hero-text-content .mission-text {
    color: #ffffff;
}

.hero-text-content .mission-text strong {
    color: #ffe066;
}

.hero-text-content .mission-chip {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.hero-text-content .mission-chip:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

/* Button style overrides for readability and look-and-feel */
.hero-text-content .btn-primary-read {
    background: #ffffff;
    color: var(--clr-gold);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.hero-text-content .btn-primary-read:hover {
    background: #f8fafc;
    color: var(--clr-gold-dim);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    transform: translateY(-2px);
}

.hero-text-content .btn-ghost-hero {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.35);
}

.hero-text-content .btn-ghost-hero:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    transform: translateY(-2px);
}

/* Responsive banner height overrides */
@media (max-width: 768px) {
    .hero-image-banner {
        height: 280px;
    }
}

@media (max-width: 580px) {
    .jubilee-badge {
        flex-wrap: wrap;
        border-radius: var(--radius-md);
        padding: 8px 16px;
        gap: var(--space-xs);
    }

    .hero-text-content .jubilee-divider {
        display: none;
    }

    .hero-text-content .jubilee-text,
    .hero-text-content .jubilee-years {
        display: block;
        width: 100%;
        text-align: center;
    }
}

.hero-container {
    position: relative;
    z-index: 3;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 var(--space-xl);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-lg);
}

/* Hero Masthead */
.hero-masthead {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-lg);
}

.jubilee-badge-wrap {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 1px;
    border-radius: var(--radius-full);
    background: var(--clr-border);
    box-shadow: var(--shadow-sm);
}

.jubilee-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    font-family: var(--font-ui);
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--clr-text);
    background: rgba(var(--clr-bg-rgb), 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 8px 22px;
    border-radius: var(--radius-full);
    border: 1px solid var(--clr-border);
    position: relative;
    overflow: hidden;
}

/* Shimmer swipe effect */
.jubilee-badge::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.4),
            transparent);
    transform: skewX(-25deg);
    animation: jubilee-shimmer 4.5s infinite ease-in-out;
}

@keyframes jubilee-shimmer {
    0% {
        left: -150%;
    }

    25% {
        left: 150%;
    }

    100% {
        left: 150%;
    }
}

.jubilee-badge-logo {
    height: 38px;
    width: auto;
    object-fit: contain;
    margin: 0 -8px;
    filter: drop-shadow(0 0 4px var(--clr-gold-alpha-20));
    transition: transform var(--transition-mid);
}

.jubilee-badge:hover .jubilee-badge-logo {
    transform: scale(1.1) rotate(5deg);
}

.jubilee-text {
    text-transform: uppercase;
    color: var(--clr-text-2);
    letter-spacing: 0.12em;
    font-weight: 800;
}

.jubilee-divider {
    color: var(--clr-border);
    font-size: 0.9rem;
}

.jubilee-years {
    color: var(--clr-gold);
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Vision block */
.vision-block {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
}

.vision-eyebrow {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--clr-gold);
    background: var(--clr-gold-alpha-10);
    border: 1px solid var(--clr-gold-alpha-20);
    padding: 5px 18px;
    border-radius: var(--radius-full);
    display: inline-block;
    margin-bottom: var(--space-sm);
}

.vision-text {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5.2vw, 3.2rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--clr-text);
}

.vision-accent {
    font-style: normal;
    background: linear-gradient(135deg, var(--clr-gold), var(--clr-amber));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
}

/* Decorative divider between vision and mission */
.vision-divider {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.vision-divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--clr-border), transparent);
}

.vision-divider-icon {
    color: var(--clr-gold);
    font-size: 0.7rem;
    opacity: 0.7;
    animation: spin-slow 8s linear infinite;
}

@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Mission block */
.mission-block {
    max-width: 680px;
    margin: 0 auto;
    border-left: 3px solid;
    border-image: linear-gradient(to bottom, var(--clr-gold), var(--clr-amber)) 1;
    padding-left: var(--space-lg);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.mission-label {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--clr-gold);
    opacity: 0.85;
}

.mission-text {
    font-family: var(--font-body);
    font-size: 1.08rem;
    line-height: 1.85;
    color: var(--clr-text-2);
    font-weight: 400;
}

.mission-text strong {
    color: var(--clr-text);
    font-weight: 600;
}

/* Mission area icon chips */
.mission-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-xs);
}

.mission-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--clr-text-2);
    background: var(--clr-bg-2);
    border: 1px solid var(--clr-border);
    padding: 5px 12px;
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
}

.mission-chip svg {
    color: var(--clr-gold);
    flex-shrink: 0;
}

.mission-chip:hover {
    background: var(--clr-gold-alpha-10);
    border-color: var(--clr-gold-alpha-20);
    color: var(--clr-gold);
    transform: translateY(-1px);
}

.masthead-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-sm);
    flex-wrap: wrap;
}

/* Ghost/outline secondary CTA in hero */
.btn-ghost-hero {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.85rem 2rem;
    background: transparent;
    color: var(--clr-text-2);
    font-family: var(--font-ui);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    border: 1.5px solid var(--clr-border);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.btn-ghost-hero:hover {
    border-color: var(--clr-gold);
    color: var(--clr-gold);
    background: var(--clr-gold-alpha-10);
    transform: translateY(-2px);
}

.btn-primary-read {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.85rem 2.2rem;
    background: var(--clr-gold);
    color: var(--clr-text-inv);
    font-family: var(--font-ui);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 14px var(--clr-gold-alpha-20);
    transition: all var(--transition-fast);
}

.btn-primary-read:hover {
    background: var(--clr-gold-light);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--clr-gold-rgb), 0.4);
}


/* Hero Featured Post */
.hero-featured {
    background: var(--clr-bg-3);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--transition-mid), box-shadow var(--transition-mid);
}

.hero-featured:hover {
    border-color: var(--clr-gold-dim);
    box-shadow: var(--shadow-gold);
}

.hero-featured-label {
    padding: var(--space-md) var(--space-lg);
    font-family: var(--font-ui);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--clr-gold);
    border-bottom: 1px solid var(--clr-border);
}

.pen-nib {
    margin-right: var(--space-xs);
}

.hero-featured-img-link {
    display: block;
}

.hero-featured-img {
    height: 240px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.hero-featured-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 13, 11, 0.7) 0%, transparent 60%);
}

.hero-featured-body {
    padding: var(--space-lg) var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.hero-tag-pill {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--clr-gold);
    background: rgba(200, 151, 58, 0.1);
    border: 1px solid rgba(200, 151, 58, 0.2);
    padding: 2px 10px;
    border-radius: var(--radius-full);
    align-self: flex-start;
}

.hero-featured-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--clr-text);
}

.hero-featured-title a {
    transition: color var(--transition-fast);
}

.hero-featured-title a:hover {
    color: var(--clr-gold);
}

.hero-featured-excerpt {
    font-size: 0.9rem;
    color: var(--clr-text-2);
    line-height: 1.6;
    font-style: italic;
}

.hero-featured-meta {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-ui);
    font-size: 0.75rem;
    color: var(--clr-text-3);
    margin-top: var(--space-xs);
}

.meta-author {
    color: var(--clr-text-2);
}

.meta-sep {
    color: var(--clr-gold-dim);
}

.hero-featured-empty {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero-empty-text {
    color: var(--clr-text-3);
    font-style: italic;
    padding: var(--space-xl);
}

/* ── Categories Strip ────────────────────────────────────────── */
.categories-section {
    border-bottom: 1px solid var(--clr-border);
    background: var(--clr-bg-2);
    overflow: hidden;
}

.categories-inner {
    max-width: var(--max-w-wide);
    margin: 0 auto;
    padding: var(--space-md) var(--space-xl);
}

.categories-track {
    display: flex;
    gap: var(--space-sm);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: var(--space-xs) 0;
}

.categories-track::-webkit-scrollbar {
    display: none;
}

.category-pill {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.45rem 1.1rem;
    background: var(--clr-bg-3);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-full);
    font-family: var(--font-ui);
    font-size: 0.8rem;
    color: var(--clr-text-2);
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.category-pill:hover {
    background: var(--clr-bg-4);
    border-color: var(--clr-gold-dim);
    color: var(--clr-gold-light);
    transform: translateY(-1px);
}

/* ── Section Headers ─────────────────────────────────────────── */
.section-header {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
}

.section-header-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--clr-border-light), transparent);
}

.section-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    color: var(--clr-text);
    white-space: nowrap;
}

.section-title em {
    font-style: italic;
    color: var(--clr-gold);
}

/* ── Posts Section & Grid ────────────────────────────────────── */
.posts-section {
    padding: var(--space-3xl) 0;
}

.posts-container {
    max-width: var(--max-w-wide);
    margin: 0 auto;
    padding: 0 var(--space-xl);
}

.posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

/* Post Card */
.post-card {
    background: var(--clr-card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color var(--transition-mid), transform var(--transition-mid), box-shadow var(--transition-mid), background-color var(--transition-mid);
}

.post-card:hover {
    border-color: var(--clr-gold-dim);
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4), var(--shadow-gold);
}

/* Hero card (first post) */
.post-card-hero {
    grid-column: span 3;
    flex-direction: row;
}

.post-card-hero .post-card-img-wrap {
    flex: 1;
    min-height: 320px;
}

.post-card-hero .post-card-img {
    height: 100%;
    min-height: 320px;
}

.post-card-hero .post-card-body {
    flex: 1;
    padding: var(--space-2xl);
}

.post-card-hero .post-card-title {
    font-size: 1.9rem;
    line-height: 1.2;
}

/* Wide card */
.post-card-wide {
    grid-column: span 2;
    flex-direction: row;
}

.post-card-wide .post-card-img-wrap {
    flex: 1;
}

.post-card-wide .post-card-img {
    height: 100%;
    min-height: 200px;
}

.post-card-wide .post-card-body {
    flex: 1.2;
}

/* Post card image */
.post-card-img-wrap {
    display: block;
    overflow: hidden;
}

.post-card-img {
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
    position: relative;
    transition: transform var(--transition-slow);
}

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

.post-card-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 13, 11, 0.5) 0%, transparent 60%);
    transition: opacity var(--transition-mid);
}

.post-card-tag-badge {
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    font-family: var(--font-ui);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: var(--clr-gold);
    color: var(--clr-text-inv);
    padding: 3px 10px;
    border-radius: var(--radius-full);
}

/* Post card body */
.post-card-body {
    padding: var(--space-lg) var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    flex: 1;
}

.post-card-tag-pill {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--clr-gold);
    background: var(--clr-gold-alpha-10);
    border: 1px solid var(--clr-gold-alpha-20);
    padding: 2px 9px;
    border-radius: var(--radius-full);
    align-self: flex-start;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.post-card-tag-pill:hover {
    background: var(--clr-gold-alpha-20);
    border-color: rgba(var(--clr-gold-rgb), 0.3);
}

.post-card-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--clr-text);
}

.post-card-title a {
    transition: color var(--transition-fast);
}

.post-card-title a:hover {
    color: var(--clr-gold);
}

.post-card-excerpt {
    font-size: 0.9rem;
    color: var(--clr-text-2);
    line-height: 1.6;
    font-style: italic;
}

.post-card-excerpt-short {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: var(--space-md);
    border-top: 1px solid var(--clr-border);
}

.post-card-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.meta-author-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.meta-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--clr-border);
}

.meta-name {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--clr-text-2);
}

.meta-details {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    color: var(--clr-text-3);
    display: flex;
    align-items: center;
    gap: 6px;
}

.meta-dot {
    color: var(--clr-gold-dim);
}

.post-card-read-link {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--clr-gold);
    white-space: nowrap;
    transition: gap var(--transition-fast), color var(--transition-fast);
}

.post-card-read-link span {
    display: inline-block;
    transition: transform var(--transition-fast);
}

.post-card-read-link:hover span {
    transform: translateX(4px);
}

/* Empty state */
.posts-empty {
    text-align: center;
    padding: var(--space-3xl);
    grid-column: 1 / -1;
}

.empty-book {
    font-size: 4rem;
    margin-bottom: var(--space-lg);
}

.posts-empty h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--clr-text);
    margin-bottom: var(--space-sm);
}

.posts-empty p {
    color: var(--clr-text-3);
    font-style: italic;
}

/* ── Pagination ──────────────────────────────────────────────── */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-3xl);
    padding-top: var(--space-2xl);
    border-top: 1px solid var(--clr-border);
}

.pagination a,
.pagination .page-number {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    color: var(--clr-text-2);
    padding: 0.5rem 1rem;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.pagination a:hover {
    background: var(--clr-gold);
    color: var(--clr-text-inv);
    border-color: var(--clr-gold);
}

.pagination .page-number {
    color: var(--clr-text-3);
    border-color: transparent;
}

/* ── Quote Stripe ────────────────────────────────────────────── */
.quote-stripe {
    padding: var(--space-3xl) 0;
    background: var(--clr-bg-2);
    border-top: 1px solid var(--clr-border);
    border-bottom: 1px solid var(--clr-border);
    overflow: hidden;
    position: relative;
}

.quote-stripe::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(200, 151, 58, 0.05) 0%, transparent 70%);
}

.quote-stripe-inner {
    max-width: var(--max-w-narrow);
    margin: 0 auto;
    padding: 0 var(--space-xl);
    text-align: center;
    position: relative;
}

.quote-mark-big {
    font-family: var(--font-display);
    font-size: 8rem;
    line-height: 0.5;
    color: var(--clr-gold);
    opacity: 0.3;
    margin-bottom: var(--space-md);
    display: block;
}

.rotating-quote {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2.5vw, 1.55rem);
    font-style: italic;
    font-weight: 500;
    color: var(--clr-text);
    line-height: 1.55;
    quotes: none;
    transition: opacity 0.4s ease;
}

.quote-author {
    display: block;
    margin-top: var(--space-md);
    font-family: var(--font-ui);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    color: var(--clr-gold);
}

/* ── Reading Moods ───────────────────────────────────────────── */
.moods-section {
    padding: var(--space-3xl) 0;
}

.moods-container {
    max-width: var(--max-w-wide);
    margin: 0 auto;
    padding: 0 var(--space-xl);
}

.moods-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-md);
}

.mood-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-xl) var(--space-md);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-mid);
    text-align: center;
}

.mood-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.mood-emoji {
    font-size: 2rem;
}

.mood-name {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--clr-text-2);
    transition: color var(--transition-fast);
}

.mood-card:hover .mood-name {
    color: var(--clr-text);
}

/* Mood color variants */
.mood-sunrise {
    background: linear-gradient(135deg, rgba(212, 120, 42, 0.08), rgba(200, 151, 58, 0.05));
}

.mood-sunrise:hover {
    background: linear-gradient(135deg, rgba(212, 120, 42, 0.18), rgba(200, 151, 58, 0.12));
    border-color: rgba(212, 120, 42, 0.3);
}

.mood-deep {
    background: linear-gradient(135deg, rgba(58, 100, 200, 0.08), rgba(100, 58, 200, 0.05));
}

.mood-deep:hover {
    background: linear-gradient(135deg, rgba(58, 100, 200, 0.18), rgba(100, 58, 200, 0.12));
    border-color: rgba(100, 120, 220, 0.3);
}

.mood-warm {
    background: linear-gradient(135deg, rgba(180, 90, 30, 0.08), rgba(200, 120, 50, 0.05));
}

.mood-warm:hover {
    background: linear-gradient(135deg, rgba(180, 90, 30, 0.18), rgba(200, 120, 50, 0.12));
    border-color: rgba(180, 90, 30, 0.3);
}

.mood-midnight {
    background: linear-gradient(135deg, rgba(50, 30, 80, 0.15), rgba(20, 10, 40, 0.08));
}

.mood-midnight:hover {
    background: linear-gradient(135deg, rgba(80, 40, 120, 0.25), rgba(40, 20, 80, 0.15));
    border-color: rgba(100, 60, 180, 0.3);
}

.mood-bright {
    background: linear-gradient(135deg, rgba(200, 180, 50, 0.08), rgba(220, 200, 30, 0.05));
}

.mood-bright:hover {
    background: linear-gradient(135deg, rgba(200, 180, 50, 0.18), rgba(220, 200, 30, 0.12));
    border-color: rgba(200, 180, 50, 0.3);
}

.mood-epic {
    background: linear-gradient(135deg, rgba(160, 30, 30, 0.08), rgba(200, 60, 30, 0.05));
}

.mood-epic:hover {
    background: linear-gradient(135deg, rgba(160, 30, 30, 0.18), rgba(200, 60, 30, 0.12));
    border-color: rgba(160, 30, 30, 0.3);
}

/* ── Newsletter Section ──────────────────────────────────────── */
.newsletter-section {
    padding: var(--space-3xl) 0;
    background: var(--clr-bg-2);
    border-top: 1px solid var(--clr-border);
}

.newsletter-container {
    max-width: var(--max-w-wide);
    margin: 0 auto;
    padding: 0 var(--space-xl);
}

.newsletter-card {
    background: var(--clr-bg-3);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-xl);
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    overflow: hidden;
    position: relative;
}

.newsletter-card::before {
    content: '';
    position: absolute;
    top: -60px;
    left: -60px;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(200, 151, 58, 0.12), transparent 70%);
    pointer-events: none;
}

.newsletter-left {
    padding: var(--space-3xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    border-right: 1px solid var(--clr-border);
}

.newsletter-icon {
    font-size: 2.5rem;
}

.newsletter-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 600;
    color: var(--clr-text);
    line-height: 1.2;
}

.newsletter-title em {
    font-style: italic;
    color: var(--clr-gold);
}

.newsletter-desc {
    font-size: 0.95rem;
    color: var(--clr-text-2);
    line-height: 1.7;
}

.newsletter-perks {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.newsletter-perks li {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    color: var(--clr-text-2);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.newsletter-right {
    padding: var(--space-3xl);
    display: flex;
    align-items: center;
}

.newsletter-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.newsletter-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.newsletter-label {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--clr-text-3);
}

.newsletter-form input[type="email"] {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--clr-bg-2);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    color: var(--clr-text);
    font-family: var(--font-ui);
    font-size: 0.9rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.newsletter-form input[type="email"]::placeholder {
    color: var(--clr-text-3);
}

.newsletter-form input[type="email"]:focus {
    outline: none;
    border-color: var(--clr-gold);
    box-shadow: 0 0 0 3px var(--clr-gold-alpha-20);
}

.newsletter-fine {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    color: var(--clr-text-3);
    text-align: center;
}

.newsletter-success {
    background: rgba(200, 151, 58, 0.1);
    border: 1px solid var(--clr-gold-dim);
    border-radius: var(--radius-sm);
    padding: var(--space-md);
    text-align: center;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    color: var(--clr-gold-light);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
}

/* ── Tag / Author Page Headers ───────────────────────────────── */
.tag-page,
.author-page {
    max-width: var(--max-w-wide);
    margin: 0 auto;
    padding: var(--space-2xl) var(--space-xl);
}

.tag-header,
.author-header {
    padding: var(--space-3xl) 0 var(--space-2xl);
    text-align: center;
    border-bottom: 1px solid var(--clr-border);
    margin-bottom: var(--space-3xl);
}

.tag-header-inner,
.author-header-inner {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
}

.tag-icon-wrap {
    width: 64px;
    height: 64px;
    border: 1px solid var(--clr-border-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    background: var(--clr-bg-3);
}

.tag-icon-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.tag-title,
.author-name {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    color: var(--clr-text);
}

.tag-desc,
.author-bio {
    color: var(--clr-text-2);
    font-style: italic;
    line-height: 1.7;
}

.tag-count {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    color: var(--clr-text-3);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.tag-posts-wrap,
.author-posts-wrap {
    padding-bottom: var(--space-3xl);
}

/* Author profile */
.author-profile {
    display: flex;
    align-items: center;
    gap: var(--space-2xl);
    text-align: left;
}

.author-profile-img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 3px solid var(--clr-gold-dim);
    object-fit: cover;
    flex-shrink: 0;
}

.author-profile-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.author-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    font-family: var(--font-ui);
    font-size: 0.8rem;
    color: var(--clr-text-3);
}

.author-website,
.author-social {
    color: var(--clr-gold);
    transition: color var(--transition-fast);
}

.author-website:hover,
.author-social:hover {
    color: var(--clr-gold-light);
}

/* ── Single Post ─────────────────────────────────────────────── */
.post-header {
    padding: var(--space-3xl) 0 var(--space-xl);
    background: linear-gradient(180deg, rgba(var(--clr-gold-rgb), 0.04) 0%, rgba(var(--clr-bg-rgb), 0) 100%);
    position: relative;
}

.post-header-inner {
    max-width: var(--max-w-content);
    margin: 0 auto;
    padding: 0 var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.post-tag-row {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
}

.post-tag-link {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--clr-gold);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color var(--transition-fast);
}

.post-tag-link::before {
    content: "";
    width: 6px;
    height: 6px;
    background-color: var(--clr-gold);
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 8px var(--clr-gold);
}

.post-tag-link:hover {
    color: var(--clr-gold-light);
}

.post-title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--clr-text);
    margin: 0.2em 0 0.4em;
    letter-spacing: -0.01em;
    word-break: break-word;
    overflow-wrap: break-word;
}

.post-subtitle {
    font-size: 1.25rem;
    font-style: italic;
    color: var(--clr-text-2);
    line-height: 1.7;
    border-left: 3px solid;
    border-image: linear-gradient(to bottom, var(--clr-gold), var(--clr-gold-dim)) 1;
    padding-left: var(--space-xl);
    margin-bottom: var(--space-md);
    word-break: break-word;
    overflow-wrap: break-word;
}

.post-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-md);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--clr-border);
    margin-top: var(--space-md);
}

.post-author-info {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.post-author-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(var(--clr-gold-rgb), 0.3);
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.post-author-info:hover .post-author-avatar {
    border-color: var(--clr-gold);
    box-shadow: 0 0 12px rgba(var(--clr-gold-rgb), 0.3);
}

.post-author-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.post-author-name {
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--clr-text);
    transition: color var(--transition-fast);
}

.post-author-name:hover {
    color: var(--clr-gold);
}

.post-meta-sub {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    color: var(--clr-text-3);
    display: flex;
    align-items: center;
    gap: 6px;
}

.post-meta-dot {
    color: var(--clr-gold-dim);
}

.post-share-row {
    display: flex;
    align-items: center;
}

.post-copy-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: var(--clr-bg-2);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-full);
    color: var(--clr-text-2);
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.post-copy-link-btn:hover {
    background: var(--clr-gold-alpha-10);
    border-color: var(--clr-gold-dim);
    color: var(--clr-gold);
    box-shadow: var(--shadow-sm);
}

.post-copy-link-btn svg {
    transition: transform var(--transition-fast);
}

.post-copy-link-btn:hover svg {
    transform: rotate(-10deg);
}

/* Feature Image */
.post-feature-image {
    max-width: var(--max-w-wide);
    margin: var(--space-xl) auto var(--space-2xl);
    padding: 0 var(--space-xl);
}

.post-feature-image img {
    width: 100%;
    border-radius: var(--radius-md);
    object-fit: cover;
    max-height: 560px;
    box-shadow: var(--shadow-md);
}

.post-img-caption {
    text-align: center;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    color: var(--clr-text-3);
    margin-top: var(--space-sm);
    font-style: italic;
}

/* Post Content */
.post-content-wrap {
    max-width: var(--max-w-content);
    margin: 0 auto;
    padding: 0 var(--space-xl) var(--space-3xl);
}

.post-content {
    font-family: var(--font-body);
    font-size: 1.15rem;
    line-height: 1.9;
    color: var(--clr-text);
    word-break: break-word;
    overflow-wrap: break-word;
}

@media (max-width: 768px) {
    .post-header {
        padding: var(--space-xl) 0 var(--space-lg);
    }

    .post-header-inner {
        padding: 0 var(--space-md);
    }

    .post-content-wrap {
        padding: 0 var(--space-md) var(--space-2xl);
    }

    .post-subtitle {
        padding-left: var(--space-md);
    }
}

/* Rich content typography */
.gh-content h1,
.gh-content h2,
.gh-content h3,
.gh-content h4,
.gh-content h5,
.gh-content h6 {
    font-family: var(--font-display);
    color: var(--clr-text);
    margin: 2.5em 0 0.8em;
    line-height: 1.25;
}

.gh-content h2 {
    font-size: 1.9rem;
    font-weight: 700;
}

.gh-content h3 {
    font-size: 1.5rem;
    font-weight: 600;
}

.gh-content h4 {
    font-size: 1.25rem;
    font-weight: 600;
}

.gh-content p {
    margin-bottom: 1.8em;
}

.gh-content a {
    color: var(--clr-gold);
    text-decoration: underline;
    text-decoration-color: rgba(var(--clr-gold-rgb), 0.4);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: text-decoration-color var(--transition-fast), color var(--transition-fast);
}

.gh-content a:hover {
    color: var(--clr-gold-light);
    text-decoration-color: var(--clr-gold);
}

.gh-content blockquote {
    border-left: 4px solid;
    border-image: linear-gradient(to bottom, var(--clr-gold), var(--clr-gold-dim)) 1;
    padding: var(--space-lg) var(--space-xl);
    margin: var(--space-2xl) 0;
    background: var(--clr-bg-2);
    border-radius: var(--radius-md);
    font-style: italic;
    font-size: 1.25rem;
    line-height: 1.7;
    color: var(--clr-text-2);
    box-shadow: var(--shadow-sm);
}

.gh-content ul,
.gh-content ol {
    padding-left: 1.6em;
    margin-bottom: 1.6em;
}

.gh-content ul {
    list-style: disc;
}

.gh-content ol {
    list-style: decimal;
}

.gh-content li {
    margin-bottom: 0.4em;
}

.gh-content hr {
    border: none;
    border-top: 1px solid var(--clr-border-light);
    margin: var(--space-2xl) auto;
    width: 60%;
}

.gh-content figure {
    margin: var(--space-2xl) 0;
}

.gh-content figure img {
    width: 100%;
    border-radius: var(--radius-md);
}

.gh-content figcaption {
    text-align: center;
    font-size: 0.78rem;
    color: var(--clr-text-3);
    font-style: italic;
    margin-top: var(--space-sm);
}

.gh-content code {
    font-family: 'Courier New', monospace;
    font-size: 0.85em;
    background: var(--clr-bg-3);
    border: 1px solid var(--clr-border);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    color: var(--clr-gold-light);
}

.gh-content pre {
    background: var(--clr-bg-3);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
    overflow-x: auto;
    margin: var(--space-2xl) 0;
}

.gh-content pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.9rem;
}

/* Tags footer */
.post-tags-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xl) 0;
    border-top: 1px solid var(--clr-border);
    margin-top: var(--space-2xl);
}

.tags-label {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--clr-text-3);
}

.post-tag-footer-pill {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    color: var(--clr-text-2);
    background: var(--clr-bg-3);
    border: 1px solid var(--clr-border);
    padding: 4px 14px;
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
}

.post-tag-footer-pill:hover {
    border-color: var(--clr-gold-dim);
    color: var(--clr-gold);
}

/* Author Bio */
.post-author-bio {
    display: flex;
    gap: var(--space-xl);
    padding: var(--space-xl);
    background: var(--clr-bg-2);
    border: 1px solid var(--clr-border);
    border-left: 4px solid var(--clr-gold-dim);
    border-radius: var(--radius-md);
    margin-top: var(--space-3xl);
    box-shadow: var(--shadow-md);
    transition: border-color var(--transition-normal), border-left-color var(--transition-normal), transform var(--transition-normal);
}

.post-author-bio:hover {
    border-color: rgba(var(--clr-gold-rgb), 0.3);
    border-left-color: var(--clr-gold);
    transform: translateY(-2px);
}

.author-bio-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 2.5px solid rgba(var(--clr-gold-rgb), 0.3);
    flex-shrink: 0;
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.post-author-bio:hover .author-bio-img {
    border-color: var(--clr-gold);
    box-shadow: 0 0 16px rgba(var(--clr-gold-rgb), 0.35);
}

.author-bio-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.author-bio-name {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--clr-text);
}

.author-bio-name a {
    transition: color var(--transition-fast);
}

.author-bio-name a:hover {
    color: var(--clr-gold);
}

.author-bio-text {
    font-size: 0.9rem;
    color: var(--clr-text-2);
    line-height: 1.6;
    font-style: italic;
}

.author-bio-link {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--clr-gold);
    align-self: flex-start;
    transition: color var(--transition-fast);
}

.author-bio-link:hover {
    color: var(--clr-gold-light);
}

/* Post Navigation */
.post-navigation {
    margin-top: var(--space-2xl);
}

.post-nav-rule {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--clr-border-light), transparent);
    margin-bottom: var(--space-2xl);
}

.post-nav-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
}

.post-nav-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-lg);
    background: var(--clr-bg-3);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    transition: all var(--transition-mid);
}

.post-nav-item:hover {
    border-color: var(--clr-gold-dim);
    background: var(--clr-bg-4);
}

.post-nav-next {
    text-align: right;
}

.post-nav-dir {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-gold);
}

.post-nav-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--clr-text);
    line-height: 1.3;
    transition: color var(--transition-fast);
}

.post-nav-item:hover .post-nav-title {
    color: var(--clr-gold-light);
}

/* Related Posts */
.related-posts-section {
    background: var(--clr-bg-2);
    border-top: 1px solid var(--clr-border);
    padding: var(--space-3xl) 0;
}

.related-inner {
    max-width: var(--max-w-wide);
    margin: 0 auto;
    padding: 0 var(--space-xl);
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

/* ── Error Page ──────────────────────────────────────────────── */
.error-page {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3xl) var(--space-xl);
}

.error-inner {
    text-align: center;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
}

.error-number {
    font-family: var(--font-display);
    font-size: 8rem;
    font-weight: 700;
    color: var(--clr-border-light);
    line-height: 1;
}

.error-book {
    font-size: 3rem;
}

.error-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    font-style: italic;
    color: var(--clr-text);
}

.error-desc {
    color: var(--clr-text-2);
    line-height: 1.7;
}

.error-actions {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
    justify-content: center;
}

/* ── Site Footer ─────────────────────────────────────────────── */
.site-footer {
    background: var(--clr-bg-2);
    border-top: 1px solid var(--clr-border);
}

.footer-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    color: var(--clr-gold-dim);
    font-size: 0.5rem;
    letter-spacing: 0.5em;
}

.footer-inner {
    max-width: var(--max-w-wide);
    margin: 0 auto;
    padding: 0 var(--space-xl) var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.footer-brand {
    text-align: center;
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

.footer-logo:hover {
    opacity: 0.85;
}

.footer-logo-img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    border-radius: 8px;
    background: #ffffff;
    padding: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.footer-logo-name {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--clr-text);
}

.footer-logo-name::first-letter {
    color: var(--clr-gold);
}

.footer-logo-text {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--clr-text);
}

.footer-logo-text::first-letter {
    color: var(--clr-gold);
}

.footer-tagline {
    font-style: italic;
    color: var(--clr-text-3);
    font-size: 0.82rem;
    margin-top: var(--space-xs);
}

.footer-grid {
    display: flex;
    justify-content: center;
    gap: var(--space-2xl);
}

.footer-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.footer-col-title {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--clr-gold);
    margin-bottom: var(--space-md);
}

.site-footer .nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0;
}

.site-footer .nav li a {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    color: var(--clr-text-2);
    transition: color var(--transition-fast);
}

.site-footer .nav li a:hover {
    color: var(--clr-gold);
}

.footer-newsletter-desc {
    font-size: 0.88rem;
    color: var(--clr-text-2);
    margin-bottom: var(--space-md);
    line-height: 1.5;
}

.footer-form {
    display: flex;
    gap: var(--space-sm);
}

.footer-form input[type="email"] {
    flex: 1;
    padding: 0.5rem 0.75rem;
    background: var(--clr-bg);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-sm);
    color: var(--clr-text);
    font-family: var(--font-ui);
    font-size: 0.85rem;
}

.footer-form input[type="email"]::placeholder {
    color: var(--clr-text-3);
}

.footer-form input[type="email"]:focus {
    outline: none;
    border-color: var(--clr-gold-dim);
}

.footer-bottom {
    border-top: 1px solid var(--clr-border);
}

.footer-rule {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--clr-gold-dim), transparent);
    opacity: 0.4;
}

.footer-bottom-inner {
    max-width: var(--max-w-wide);
    margin: 0 auto;
    padding: var(--space-lg) var(--space-xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.footer-copy {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    color: var(--clr-text-3);
}

.footer-social {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--clr-border);
    border-radius: 50%;
    color: var(--clr-text-3);
    transition: all var(--transition-fast);
}

.social-link:hover {
    border-color: var(--clr-gold-dim);
    color: var(--clr-gold);
    background: rgba(200, 151, 58, 0.06);
}

.footer-legal {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-ui);
    font-size: 0.78rem;
    color: var(--clr-text-3);
}

.footer-legal a {
    transition: color var(--transition-fast);
}

.footer-legal a:hover {
    color: var(--clr-text-2);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .post-card-hero {
        grid-column: span 2;
    }

    .post-card-wide {
        grid-column: span 2;
    }

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

    .hero-container {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .hero-masthead {
        align-items: center;
        text-align: center;
    }

    .masthead-actions {
        justify-content: center;
    }

    .masthead-ornament {
        justify-content: center;
    }

    .masthead-tagline {
        text-align: center;
    }
}

@media (max-width: 768px) {
    .header-inner {
        padding: 0 var(--space-lg);
    }

    .site-nav {
        display: none;
    }

    .nav-toggle {
        display: flex;
    }

    .mobile-menu {
        display: block;
    }

    .header-subscribe-btn {
        display: none;
    }

    .site-logo-img {
        height: 40px;
        width: 40px;
    }

    .site-logo-jubilee {
        height: 48px;
        margin: 0 -8px;
    }

    .logo-badge-divider {
        height: 22px;
    }

    .site-logo-wordmark {
        font-size: 1rem;
    }


    .posts-grid {
        grid-template-columns: 1fr;
    }

    .post-card-hero {
        grid-column: span 1;
        flex-direction: column;
    }

    .post-card-hero .post-card-img {
        min-height: 220px;
    }

    .post-card-wide {
        grid-column: span 1;
        flex-direction: column;
    }

    .hero-container {
        padding: 0 var(--space-lg);
    }

    .masthead-title {
        font-size: clamp(4rem, 15vw, 6rem);
    }

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

    .newsletter-card {
        grid-template-columns: 1fr;
    }

    .newsletter-left {
        border-right: none;
        border-bottom: 1px solid var(--clr-border);
        padding: var(--space-2xl);
    }

    .newsletter-right {
        padding: var(--space-2xl);
    }

    .footer-grid {
        flex-direction: column;
    }

    .footer-bottom-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .post-nav-grid {
        grid-template-columns: 1fr;
    }

    .related-grid {
        grid-template-columns: 1fr;
    }

    .post-author-bio {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .author-bio-link {
        align-self: center;
    }

    .author-profile {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .author-meta-row {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .moods-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .masthead-actions {
        flex-direction: column;
    }

    .error-actions {
        flex-direction: column;
        width: 100%;
    }

    .btn-primary-read,
    .btn-ghost-read {
        justify-content: center;
    }
}





/* Base Transition enhancements */
.site-header,
.site-footer,
.category-pill,
.btn-primary-read,
.btn-ghost-read,
.progress-bar,
.quote-stripe,
.social-link,
.program-card,
.program-icon-wrap,
.cred-badge {
    transition: background-color var(--transition-mid), border-color var(--transition-mid), box-shadow var(--transition-mid), color var(--transition-mid), transform var(--transition-fast) !important;
}

/* ── NGO Vision & Mission Hero Layout ─────────────────────────── */
.vision-block {
    margin-bottom: var(--space-md);
}

.vision-text {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.8vw, 1.85rem) !important;
    font-weight: 700;
    line-height: 1.3;
    color: var(--clr-text);
    font-style: normal;
    letter-spacing: -0.01em;
}

.mission-block {
    margin-top: var(--space-md);
    margin-bottom: var(--space-lg);
}

.mission-text {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--clr-text-2);
}

.tag-vision {
    background: var(--clr-gold-alpha-10) !important;
    border: 1px solid var(--clr-gold-alpha-20) !important;
    color: var(--clr-gold) !important;
    margin-bottom: var(--space-xs);
}

.tag-mission {
    background: rgba(212, 120, 42, 0.1) !important;
    border: 1px solid rgba(212, 120, 42, 0.2) !important;
    color: var(--clr-amber) !important;
    margin-bottom: var(--space-xs);
}

/* Who We Are Card overrides */
.who-we-are-card {
    background: var(--clr-card-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--shadow-md), var(--shadow-gold);
}

.who-we-are-image-wrap {
    width: 100%;
    height: 180px;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid var(--clr-border);
}

.who-we-are-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform var(--transition-mid);
}

.who-we-are-card:hover .who-we-are-img {
    transform: scale(1.05);
}

.who-we-are-card .hero-featured-title {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--clr-gold);
    margin-bottom: var(--space-sm);
}

.who-we-are-card .hero-featured-excerpt {
    font-size: 0.88rem;
    line-height: 1.6;
    font-style: normal;
    color: var(--clr-text-2);
}

.who-we-are-card .secondary-text {
    color: var(--clr-text-3) !important;
    margin-top: var(--space-xs);
}

/* Credentials Badges */
.credentials-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--clr-border);
}

.cred-badge {
    font-family: var(--font-ui);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: var(--clr-bg-2);
    border: 1px solid var(--clr-border);
    color: var(--clr-text-3);
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    cursor: default;
}

.cred-badge:hover {
    border-color: var(--clr-gold);
    color: var(--clr-text);
    background: var(--clr-gold-alpha-10);
}

/* ── NGO Focus Programs Section ─────────────────────────────── */
.programs-section {
    padding: var(--space-3xl) 0;
    background: var(--clr-bg);
    border-top: 1px solid var(--clr-border);
    border-bottom: 1px solid var(--clr-border);
    position: relative;
}

.programs-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 80% at 50% 50%, var(--clr-gold-alpha-10) 0%, transparent 70%);
    pointer-events: none;
}

.programs-container {
    max-width: var(--max-w-wide);
    margin: 0 auto;
    padding: 0 var(--space-xl);
}

.programs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.program-card {
    background: var(--clr-card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.program-card:hover {
    border-color: var(--clr-gold-dim);
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4), var(--shadow-gold);
}

.program-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--clr-gold-alpha-10);
    border: 1px solid var(--clr-gold-alpha-20);
    display: flex;
    align-items: center;
    justify-content: center;
}

.program-card:hover .program-icon-wrap {
    background: var(--clr-gold);
    border-color: var(--clr-gold);
    transform: scale(1.05) rotate(3deg);
}

.program-card:hover .program-icon {
    filter: brightness(0);
}

.program-icon {
    font-size: 1.4rem;
}

.program-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    height: 100%;
}

.program-card-body h3 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--clr-text);
    transition: color var(--transition-fast);
}

.program-card:hover h3 {
    color: var(--clr-gold);
}

.program-card-desc {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--clr-text-2);
}

.program-card-footer {
    margin-top: auto;
    padding-top: var(--space-md);
    border-top: 1px solid var(--clr-border);
}

.program-region {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    color: var(--clr-text-3);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Responsive Overrides */
@media (max-width: 1024px) {
    .programs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .programs-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Team Page User-Friendly Table Styling ────────────────────── */
.responsive-table-wrap {
    width: 100%;
    overflow-x: auto;
    margin: 24px 0;
    border-radius: var(--radius-md);
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-border);
    box-shadow: var(--shadow-sm);
    -webkit-overflow-scrolling: touch;
}

.team-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-family: var(--font-ui);
    min-width: 500px;
}

.team-table th {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--clr-text-2);
    letter-spacing: 0.05em;
    padding: 14px 20px;
    background: var(--clr-gold-alpha-10);
    border-bottom: 1px solid var(--clr-border-light);
    text-align: left;
}

.team-table td {
    padding: 14px 20px;
    vertical-align: middle;
    border-bottom: 1px solid var(--clr-border);
    color: var(--clr-text);
    font-size: 0.92rem;
}

.team-table tr:last-child td {
    border-bottom: none;
}

.team-table tr {
    transition: background-color var(--transition-fast);
}

.team-table tbody tr:hover {
    background-color: var(--clr-gold-alpha-10);
}

/* Column specific alignments */
.col-sno {
    width: 80px;
    text-align: center !important;
}

.team-table th.col-sno {
    text-align: center;
}

.sno-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--clr-text-3);
}

.team-member-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.member-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--clr-gold-alpha-20);
    color: var(--clr-gold);
    font-weight: 700;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: -0.02em;
    border: 1px solid var(--clr-gold-alpha-10);
    transition: transform var(--transition-fast), background var(--transition-fast);
}

.team-table tr:hover .member-avatar {
    transform: scale(1.08);
    background: var(--clr-gold);
    color: var(--clr-text-inv);
}

.member-name {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--clr-text);
}

.desig-tag {
    display: inline-block;
    padding: 4px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    background: var(--clr-gold-alpha-10);
    color: var(--clr-gold);
    border: 1px solid var(--clr-gold-alpha-20);
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* ── Contact Us Page ─────────────────────────────────────────── */

/* Hero */
.contact-page {
    overflow: hidden;
}

.contact-hero {
    position: relative;
    padding: var(--space-3xl) 0 var(--space-2xl);
    text-align: center;
    overflow: hidden;
}

.contact-hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 90% at 50% 0%, var(--clr-gold-alpha-10) 0%, transparent 70%),
        radial-gradient(ellipse 50% 60% at 80% 80%, rgba(var(--clr-gold-rgb), 0.04) 0%, transparent 60%);
    pointer-events: none;
}

.contact-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--clr-gold);
    background: var(--clr-gold-alpha-10);
    border: 1px solid var(--clr-gold-alpha-20);
    padding: 6px 16px;
    border-radius: var(--radius-full);
}

.contact-hero-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--clr-gold);
    display: inline-block;
    animation: pulse-dot 2s infinite;
}

.contact-hero-inner {
    position: relative;
    max-width: 860px;
    margin: 0 auto;
    padding: 0 var(--space-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    text-align: center;
}

/* Kicker row */
.contact-hero-kicker {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    width: 100%;
    max-width: 540px;
    margin: var(--space-xs) 0;
}

.contact-hero-kicker-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--clr-border), transparent);
}

.contact-hero-kicker-text {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--clr-text-3);
    white-space: nowrap;
}

.contact-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--clr-text);
    margin: 0;
}

.contact-hero-title em {
    font-style: italic;
    background: linear-gradient(135deg, var(--clr-gold), var(--clr-amber));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Quote-strip description */
.contact-hero-desc {
    font-size: 1.08rem;
    color: var(--clr-text-2);
    line-height: 1.8;
    max-width: 560px;
    font-style: italic;
    font-weight: 400;
    border-left: 3px solid;
    border-image: linear-gradient(to bottom, var(--clr-gold), var(--clr-amber)) 1;
    padding-left: var(--space-lg);
    text-align: left;
    margin: var(--space-xs) 0;
}

.contact-hero-desc strong {
    color: var(--clr-text);
    font-weight: 700;
    font-style: normal;
}

.contact-hero-desc em {
    color: var(--clr-gold);
    -webkit-text-fill-color: unset;
    background: none;
}

/* Audience-type pills */
.contact-hero-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-xs);
}

.contact-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--clr-text-2);
    background: var(--clr-bg-2);
    border: 1px solid var(--clr-border);
    padding: 5px 13px;
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
}

.contact-hero-pill svg {
    color: var(--clr-gold);
    flex-shrink: 0;
}

.contact-hero-pill:hover {
    background: var(--clr-gold-alpha-10);
    border-color: var(--clr-gold-alpha-20);
    color: var(--clr-gold);
    transform: translateY(-1px);
}

/* Main Layout */
.contact-main {
    padding: var(--space-2xl) 0 var(--space-3xl);
}

.contact-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 var(--space-xl);
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-2xl);
    align-items: start;
}

/* Info Cards */
.contact-info-card {
    background: var(--clr-card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg) var(--space-xl);
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    transition: border-color var(--transition-mid), transform var(--transition-mid), box-shadow var(--transition-mid);
}

.contact-info-card:hover {
    border-color: var(--clr-gold-alpha-20);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md), var(--shadow-gold);
}

.contact-info-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--clr-gold-alpha-10);
    border: 1px solid var(--clr-gold-alpha-20);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.25rem;
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.contact-info-card:hover .contact-info-icon-wrap {
    background: var(--clr-gold);
    transform: scale(1.05) rotate(4deg);
}

.contact-info-card:hover .contact-info-icon {
    filter: brightness(0);
}

.contact-info-body {
    flex: 1;
}

.contact-info-title {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-gold);
    margin-bottom: var(--space-xs);
}

.contact-info-text {
    font-family: var(--font-ui);
    font-size: 0.9rem;
    color: var(--clr-text-2);
    line-height: 1.6;
}

.contact-info-text p {
    margin: 0;
}

.contact-info-text p+p {
    margin-top: var(--space-xs);
}

.contact-info-link {
    color: var(--clr-text);
    transition: color var(--transition-fast);
    text-decoration: none;
}

.contact-info-link:hover {
    color: var(--clr-gold);
}

.contact-info-note {
    font-size: 0.78rem;
    color: var(--clr-text-3);
    font-style: italic;
}



/* Map Section */
.contact-map-section {
    border-top: 1px solid var(--clr-border);
}

.contact-map-inner {
    max-width: var(--max-w-wide);
    margin: 0 auto;
    padding: var(--space-2xl) var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.contact-map-label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--clr-gold);
}

.contact-map-pin {
    font-size: 1.1rem;
}

.contact-map-embed {
    height: 380px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--clr-border);
    box-shadow: var(--shadow-md);
    filter: grayscale(30%) brightness(0.85) contrast(1.05);
    transition: filter var(--transition-mid);
}

.contact-map-embed:hover {
    filter: grayscale(0%) brightness(1) contrast(1);
}

.contact-map-btn-wrap {
    display: flex;
    justify-content: center;
    margin-top: var(--space-xs);
}

.contact-map-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--clr-gold);
    color: var(--clr-text-inv);
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 700;
    padding: 12px 28px;
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: all var(--transition-mid);
    box-shadow: var(--shadow-sm);
}

.contact-map-btn:hover {
    background: var(--clr-gold-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md), 0 0 20px rgba(var(--clr-gold-rgb), 0.3);
}

.contact-map-btn svg {
    transition: transform var(--transition-fast);
}

.contact-map-btn:hover svg {
    transform: translate(2px, -2px);
}

.contact-section-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.contact-group-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--clr-text);
    border-bottom: 1px solid var(--clr-border);
    padding-bottom: var(--space-xs);
    margin-bottom: var(--space-xs);
}

/* Direct Contact Action Cards */
.contact-action-card {
    background: var(--clr-card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg) var(--space-lg);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    text-decoration: none;
    transition: all var(--transition-mid);
    position: relative;
    overflow: hidden;
}

.contact-action-card:hover {
    border-color: var(--clr-gold-alpha-20);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md), var(--shadow-gold);
}

.contact-action-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--clr-gold-alpha-10);
    border: 1px solid var(--clr-gold-alpha-20);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--clr-gold);
    transition: all var(--transition-fast);
}

.contact-action-card:hover .contact-action-icon-wrap {
    background: var(--clr-gold);
    color: var(--clr-text-inv);
    transform: scale(1.05);
}

.contact-action-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-action-title {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-gold);
    margin-bottom: 0;
}

.contact-action-value {
    font-family: var(--font-display);
    font-size: clamp(0.88rem, 2.5vw, 1.0rem);
    font-weight: 700;
    color: var(--clr-text);
    word-break: break-word;
    overflow-wrap: break-word;
    transition: color var(--transition-fast);
}

.contact-action-card:hover .contact-action-value {
    color: var(--clr-gold-light);
}

.contact-action-note {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    color: var(--clr-text-3);
}

.contact-action-arrow {
    color: var(--clr-text-3);
    opacity: 0;
    transform: translateX(-10px);
    transition: all var(--transition-fast);
}

.contact-action-card:hover .contact-action-arrow {
    opacity: 1;
    transform: translateX(0);
    color: var(--clr-gold);
}

/* Social Actions */
.contact-social-action-card {
    display: block;
}

.contact-social-pills {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    width: 100%;
}

.social-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 10px;
    border-radius: var(--radius-md);
    background: var(--clr-bg-2);
    border: 1px solid var(--clr-border);
    color: var(--clr-text-2);
    text-decoration: none;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: 600;
    transition: all var(--transition-fast);
}

.social-pill:hover {
    transform: scale(1.02);
    color: #fff;
}

.facebook-pill:hover {
    background: #1877F2 !important;
    border-color: #1877F2 !important;
    box-shadow: 0 0 15px rgba(24, 119, 242, 0.4);
}

.linkedin-pill:hover {
    background: #0A66C2 !important;
    border-color: #0A66C2 !important;
    box-shadow: 0 0 15px rgba(10, 102, 194, 0.4);
}

.instagram-pill:hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
    border-color: transparent !important;
    box-shadow: 0 0 15px rgba(220, 39, 67, 0.4);
}

/* Responsive */
@media (max-width: 1024px) {
    .contact-container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .contact-map-embed {
        height: 260px;
    }
}


/* ═══════════════════════════════════════════════════════
   About / READ Story Page
   ═══════════════════════════════════════════════════════ */

.about-page {
    overflow: hidden;
}

/* Shared container */
.about-container {
    max-width: var(--max-w-wide);
    margin: 0 auto;
    padding: 0 var(--space-xl);
}

/* Section labels & titles */
.about-section-label {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--clr-gold);
    margin-bottom: var(--space-sm);
}

.about-section-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--clr-text);
    line-height: 1.15;
    margin: 0 0 var(--space-lg);
}

.about-section-title em {
    font-style: italic;
    color: var(--clr-gold);
}

.about-title-amp {
    color: var(--clr-gold);
    font-style: italic;
}

.about-section-head {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

/* ── Hero ──────────────────────────────────────── */
.about-hero {
    position: relative;
    min-height: 540px;
    display: flex;
    align-items: center;
    padding: var(--space-3xl) 0 var(--space-2xl);
    text-align: center;
    overflow: hidden;
}

.about-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.about-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--clr-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--clr-border) 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: 0.15;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 70%);
}

.about-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    animation: orb-drift 8s ease-in-out infinite alternate;
}

.about-hero-orb-1 {
    width: 500px;
    height: 500px;
    background: var(--clr-gold-alpha-10);
    top: -100px;
    left: -100px;
}

.about-hero-orb-2 {
    width: 400px;
    height: 400px;
    background: rgba(var(--clr-gold-rgb), 0.05);
    bottom: -80px;
    right: -80px;
    animation-delay: -4s;
}

@keyframes orb-drift {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(40px, 30px) scale(1.1);
    }
}

.about-hero-inner {
    position: relative;
    z-index: 3;
    max-width: 820px;
    margin: 0 auto;
    padding: 0 var(--space-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    text-align: center;
}

.about-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--clr-gold);
    background: var(--clr-gold-alpha-10);
    border: 1px solid var(--clr-gold-alpha-20);
    padding: 6px 18px;
    border-radius: var(--radius-full);
}

.about-hero-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--clr-gold);
    animation: pulse-dot 2s infinite;
}

/* Kicker row — organisation full name between decorative lines */
.about-hero-kicker {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    width: 100%;
    max-width: 640px;
    margin: var(--space-xs) 0;
}

.about-hero-kicker-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--clr-border), transparent);
}

.about-hero-kicker-text {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--clr-text-3);
    white-space: nowrap;
}

.about-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 7vw, 5rem);
    font-weight: 900;
    line-height: 1.08;
    color: var(--clr-text);
    margin: 0;
}

.about-hero-title em {
    font-style: italic;
    background: linear-gradient(135deg, var(--clr-gold), var(--clr-amber));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Description as a welcoming quote-style strip */
.about-hero-desc {
    font-size: 1.12rem;
    color: var(--clr-text-2);
    line-height: 1.8;
    max-width: 580px;
    font-style: italic;
    font-weight: 400;
    border-left: 3px solid;
    border-image: linear-gradient(to bottom, var(--clr-gold), var(--clr-amber)) 1;
    padding-left: var(--space-lg);
    text-align: left;
    margin: var(--space-sm) 0;
}

.about-hero-desc strong {
    color: var(--clr-text);
    font-weight: 700;
    font-style: normal;
}

.about-hero-desc em {
    color: var(--clr-gold);
    -webkit-text-fill-color: unset;
    background: none;
}

/* Focus-area pills row */
.about-hero-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
    margin: var(--space-xs) 0;
}

.about-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--clr-text-2);
    background: var(--clr-bg-2);
    border: 1px solid var(--clr-border);
    padding: 5px 13px;
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
}

.about-hero-pill svg {
    color: var(--clr-gold);
    flex-shrink: 0;
}

.about-hero-pill:hover {
    background: var(--clr-gold-alpha-10);
    border-color: var(--clr-gold-alpha-20);
    color: var(--clr-gold);
    transform: translateY(-1px);
}

/* Stats row */
.about-hero-stats {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: var(--space-lg);
    margin-top: var(--space-xl);
    padding: var(--space-xl) var(--space-xl);
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(12px);
    width: 100%;
}

.about-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    position: relative;
}

.about-stat:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 40px;
    background: var(--clr-border);
}

.about-stat-num {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--clr-gold);
    line-height: 1.1;
}

.about-stat-label {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--clr-text-3);
    line-height: 1.4;
}

.about-stat-divider {
    display: none;
}

/* ── Story Section ──────────────────────────── */
.about-story {
    padding: var(--space-3xl) 0;
}

.about-story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: start;
}

.about-story-text .about-section-title {
    font-size: clamp(1.6rem, 3vw, 2.5rem);
}

.about-story-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.about-story-body p {
    font-size: 1rem;
    color: var(--clr-text-2);
    line-height: 1.8;
}

.about-story-body strong {
    color: var(--clr-text);
    font-weight: 600;
}

.about-story-visual {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding-top: var(--space-xl);
}

/* Founder card */
.about-founder-card {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-lg) var(--space-xl);
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-gold-alpha-20);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(12px);
}

.about-founder-icon {
    font-size: 2.5rem;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--clr-gold-alpha-10);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.about-founder-label {
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--clr-gold);
    margin-bottom: 4px;
}

.about-founder-name {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--clr-text);
}

.about-founder-year {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    color: var(--clr-text-3);
    margin-top: 2px;
}

/* Story quote */
.about-story-quote {
    padding: var(--space-xl);
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-border);
    border-left: 3px solid var(--clr-gold);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    position: relative;
}

.about-quote-mark {
    color: var(--clr-gold-alpha-20);
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
}

.about-story-quote p {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-style: italic;
    color: var(--clr-text);
    line-height: 1.65;
    margin: var(--space-sm) 0;
}

.about-quote-attr {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: var(--clr-gold);
    margin-top: var(--space-sm);
    text-transform: uppercase;
}

/* ── Mission & Vision ───────────────────────── */
.about-mission {
    padding: var(--space-3xl) 0;
    background: var(--clr-bg-2);
    border-top: 1px solid var(--clr-border);
    border-bottom: 1px solid var(--clr-border);
}

.about-mv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.about-mv-card {
    padding: var(--space-2xl) var(--space-xl);
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    transition: border-color var(--transition-mid), transform var(--transition-mid), box-shadow var(--transition-mid);
    backdrop-filter: blur(12px);
}

.about-mv-card:hover {
    border-color: var(--clr-gold-alpha-20);
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg), var(--shadow-gold);
}

.about-mv-card--gold {
    border-color: var(--clr-gold-alpha-20);
    background: linear-gradient(145deg, var(--clr-card-bg), var(--clr-gold-alpha-10));
    position: relative;
    overflow: hidden;
}

.about-mv-card--gold::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--clr-gold), transparent);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.about-mv-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    background: var(--clr-gold-alpha-10);
    border: 1px solid var(--clr-gold-alpha-20);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: transform var(--transition-fast), background var(--transition-fast);
}

.about-mv-card:hover .about-mv-icon-wrap {
    transform: scale(1.1) rotate(-5deg);
    background: var(--clr-gold-alpha-20);
}

.about-mv-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--clr-text);
}

.about-mv-text {
    font-size: 0.95rem;
    color: var(--clr-text-2);
    line-height: 1.7;
}

/* ── Timeline ────────────────────────────────── */
.about-timeline {
    padding: var(--space-3xl) 0;
}

.about-timeline-track {
    position: relative;
    padding: var(--space-xl) 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.about-timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, transparent, var(--clr-gold-dim), var(--clr-gold), var(--clr-gold-dim), transparent);
    transform: translateX(-50%);
}

.about-timeline-item {
    display: grid;
    grid-template-columns: 1fr 40px 1fr;
    align-items: center;
    gap: var(--space-xl);
    padding: var(--space-lg) 0;
}

.about-timeline-item .about-timeline-year {
    grid-column: 1;
    text-align: right;
    grid-row: 1;
}

.about-timeline-item .about-timeline-dot {
    grid-column: 2;
    justify-self: center;
    grid-row: 1;
}

.about-timeline-item .about-timeline-content {
    grid-column: 3;
    grid-row: 1;
}

/* Right-side items swap content and year */
.about-timeline-item--right .about-timeline-year {
    grid-column: 3;
    text-align: left;
    order: 3;
}

.about-timeline-item--right .about-timeline-dot {
    grid-column: 2;
    order: 2;
}

.about-timeline-item--right .about-timeline-content {
    grid-column: 1;
    order: 1;
    text-align: right;
}

.about-timeline-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--clr-bg-2);
    border: 2px solid var(--clr-gold-dim);
    transition: border-color var(--transition-fast), transform var(--transition-fast);
    position: relative;
    z-index: 1;
}

.about-timeline-item:hover .about-timeline-dot {
    border-color: var(--clr-gold);
    transform: scale(1.3);
}

.about-timeline-dot--active {
    background: var(--clr-gold);
    border-color: var(--clr-gold);
    box-shadow: 0 0 0 4px var(--clr-gold-alpha-10), var(--shadow-gold);
}

.about-timeline-year {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--clr-text-3);
    white-space: nowrap;
    transition: color var(--transition-fast);
}

.about-timeline-item:hover .about-timeline-year {
    color: var(--clr-gold);
}

.about-timeline-year--active {
    color: var(--clr-gold);
}

.about-timeline-content h4 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--clr-text);
    margin-bottom: var(--space-xs);
}

.about-timeline-content p {
    font-size: 0.9rem;
    color: var(--clr-text-2);
    line-height: 1.65;
}

/* ── Programs ────────────────────────────────── */
.about-programs {
    padding: var(--space-3xl) 0;
    background: var(--clr-bg-2);
    border-top: 1px solid var(--clr-border);
    border-bottom: 1px solid var(--clr-border);
}

.about-programs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
}

.about-program-card {
    padding: var(--space-xl) var(--space-lg);
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    transition: border-color var(--transition-mid), transform var(--transition-mid), box-shadow var(--transition-mid);
    cursor: default;
}

.about-program-card:hover {
    border-color: var(--clr-gold-alpha-20);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md), var(--shadow-gold);
}

.about-program-icon {
    font-size: 2rem;
    line-height: 1;
}

.about-program-title {
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--clr-text);
    margin: 0;
}

.about-program-desc {
    font-size: 0.82rem;
    color: var(--clr-text-3);
    line-height: 1.55;
}

.about-program-img-wrap {
    width: calc(100% + var(--space-lg) + var(--space-lg));
    margin: calc(-1 * var(--space-xl)) calc(-1 * var(--space-lg)) var(--space-sm);
    height: 150px;
    overflow: hidden;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    flex-shrink: 0;
}

.about-program-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.about-program-card:hover .about-program-img-wrap img {
    transform: scale(1.06);
}


/* ── Values ──────────────────────────────────── */
.about-values {
    padding: var(--space-3xl) 0;
}

.about-values-inner {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: var(--space-3xl);
    align-items: start;
}

.about-values-desc {
    font-size: 1rem;
    color: var(--clr-text-2);
    line-height: 1.75;
    margin-top: var(--space-sm);
}

.about-values-right {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.about-value-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xl);
    padding: var(--space-lg) 0;
    border-bottom: 1px solid var(--clr-border);
    transition: background var(--transition-fast);
}

.about-value-item:first-child {
    border-top: 1px solid var(--clr-border);
}

.about-value-num {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--clr-gold-alpha-20);
    line-height: 1;
    min-width: 44px;
    transition: color var(--transition-fast);
}

.about-value-item:hover .about-value-num {
    color: var(--clr-gold);
}

.about-value-title {
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--clr-text);
    margin-bottom: 4px;
}

.about-value-desc {
    font-size: 0.88rem;
    color: var(--clr-text-3);
    line-height: 1.6;
}

/* ── Partners Section ────────────────────────── */
.about-partners {
    padding: var(--space-2xl) 0;
    border-top: 1px solid var(--clr-border);
}

.partners-grid-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    margin-top: var(--space-xl);
}

@media (max-width: 768px) {
    .partners-grid-wrapper {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
}

.partners-block {
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg) var(--space-xl);
    backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.partners-block-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--clr-gold);
    border-bottom: 1px solid var(--clr-border-light);
    padding-bottom: var(--space-xs);
    margin-bottom: var(--space-xs);
}

.partners-list-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-sm);
}

.partner-tag {
    background: rgba(var(--clr-gold-rgb), 0.05);
    border: 1px solid var(--clr-border);
    color: var(--clr-text-2);
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
}

.partner-tag:hover {
    border-color: var(--clr-gold-alpha-20);
    background: var(--clr-gold-alpha-10);
    color: var(--clr-gold-light);
    transform: translateY(-1px);
}

/* ── Closing ──────────────────────────────────── */
.about-closing {
    position: relative;
    padding: var(--space-3xl) 0;
    text-align: center;
    overflow: hidden;
    border-top: 1px solid var(--clr-border);
}

.about-closing-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 80% at 50% 50%, var(--clr-gold-alpha-10) 0%, transparent 70%);
    pointer-events: none;
}

.about-closing-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xl);
    max-width: 640px;
    margin: 0 auto;
    padding: 0 var(--space-xl);
}

.about-closing-logo img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 12px;
    background: #fff;
    padding: 6px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.about-closing-quote {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 3vw, 1.9rem);
    font-style: italic;
    font-weight: 600;
    color: var(--clr-text);
    line-height: 1.55;
    border: none;
    margin: 0;
    padding: 0;
}

.about-closing-sub {
    font-size: 0.95rem;
    color: var(--clr-text-2);
    line-height: 1.7;
    max-width: 520px;
}

.about-closing-actions {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
    justify-content: center;
    margin-top: var(--space-sm);
}

.about-cta-btn {
    padding: 0.8rem 2rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.about-cta-btn--primary {
    background: linear-gradient(135deg, var(--clr-gold), var(--clr-gold-light));
    color: var(--clr-text-inv);
}

.about-cta-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--clr-gold-alpha-20), var(--shadow-gold);
}

.about-cta-btn--outline {
    border: 1px solid var(--clr-gold-alpha-20);
    color: var(--clr-text);
}

.about-cta-btn--outline:hover {
    background: var(--clr-gold-alpha-10);
    border-color: var(--clr-gold);
    color: var(--clr-gold);
}

/* ── Responsive ──────────────────────────────── */
@media (max-width: 1200px) {
    .about-programs-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {
    .about-story-grid {
        grid-template-columns: 1fr;
    }

    .about-story-visual {
        padding-top: 0;
    }

    .about-mv-grid {
        grid-template-columns: 1fr 1fr;
    }

    .about-values-inner {
        grid-template-columns: 1fr;
    }

    .about-timeline-line {
        left: 20px;
    }

    .about-timeline-item,
    .about-timeline-item--right {
        grid-template-columns: 40px 1fr;
    }

    .about-timeline-item .about-timeline-year,
    .about-timeline-item--right .about-timeline-year {
        display: none;
    }

    .about-timeline-item .about-timeline-dot,
    .about-timeline-item--right .about-timeline-dot {
        grid-column: 1;
        order: 1;
    }

    .about-timeline-item .about-timeline-content,
    .about-timeline-item--right .about-timeline-content {
        grid-column: 2;
        order: 2;
        text-align: left;
    }

    .about-hero-stats {
        gap: var(--space-md);
    }
}

@media (max-width: 768px) {
    .about-programs-grid {
        grid-template-columns: 1fr 1fr;
    }

    .about-mv-grid {
        grid-template-columns: 1fr;
    }

    .about-hero-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-lg) var(--space-md);
        padding: var(--space-lg) var(--space-md);
    }

    .about-stat {
        flex: none;
    }

    .about-stat:not(:last-child)::after {
        display: none;
    }

    .about-closing-actions {
        flex-direction: column;
        align-items: center;
    }

    .about-cta-btn {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 580px) {
    .about-hero-inner {
        padding: 0 var(--space-md);
    }

    .about-hero-kicker-line {
        display: none;
    }

    .about-hero-kicker-text {
        white-space: normal;
        text-align: center;
        line-height: 1.4;
        letter-spacing: 0.1em;
    }

    .about-hero-title {
        font-size: clamp(2rem, 8vw, 3.5rem);
    }

    .about-hero-desc {
        padding-left: var(--space-md);
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .about-programs-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   DONATE PAGE STYLES
   ============================================================ */

/* ── Donate Page Container ─────────────────────────────────── */
.donate-page {
    overflow: hidden;
}

.donate-container {
    max-width: var(--max-w-wide);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

/* ── Hero Section ──────────────────────────────────────────── */
.donate-hero {
    position: relative;
    padding: 8rem 0 5rem;
    text-align: center;
    overflow: hidden;
}

.donate-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.donate-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.18;
}

.donate-hero-orb-1 {
    width: 500px;
    height: 500px;
    top: -150px;
    left: -100px;
    background: radial-gradient(circle, var(--clr-gold) 0%, transparent 70%);
    animation: donate-orb-float 8s ease-in-out infinite alternate;
}

.donate-hero-orb-2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    right: -80px;
    background: radial-gradient(circle, var(--clr-amber) 0%, transparent 70%);
    animation: donate-orb-float 10s ease-in-out infinite alternate-reverse;
}

@keyframes donate-orb-float {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(40px, -30px) scale(1.15);
    }
}

.donate-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

.donate-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: var(--clr-gold-alpha-10);
    border: 1px solid var(--clr-gold-alpha-20);
    border-radius: var(--radius-full);
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--clr-gold-light);
    letter-spacing: 0.03em;
    margin-bottom: var(--space-lg);
}

.donate-hero-heart {
    font-size: 1rem;
    animation: donate-heartbeat 1.2s ease-in-out infinite;
}

@keyframes donate-heartbeat {

    0%,
    100% {
        transform: scale(1);
    }

    15% {
        transform: scale(1.25);
    }

    30% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.15);
    }
}

.donate-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--clr-text);
    margin-bottom: var(--space-lg);
}

.donate-hero-title em {
    font-style: normal;
    background: linear-gradient(135deg, var(--clr-gold), var(--clr-gold-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.donate-hero-desc {
    font-family: var(--font-body);
    font-size: 1.1rem;
    line-height: 1.75;
    color: var(--clr-text-2);
    max-width: 600px;
    margin: 0 auto var(--space-xl);
}

.donate-hero-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

/* ── Buttons ───────────────────────────────────────────────── */
.donate-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 2rem;
    background: linear-gradient(135deg, var(--clr-gold), var(--clr-gold-dim));
    color: var(--clr-text-inv);
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    cursor: pointer;
    text-decoration: none;
}

.donate-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold), 0 8px 24px rgba(0, 0, 0, 0.3);
}

.donate-btn-lg {
    padding: 1rem 2.5rem;
    font-size: 1.05rem;
}

.donate-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 2rem;
    background: transparent;
    color: var(--clr-gold-light);
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 500;
    border: 1px solid var(--clr-gold-alpha-20);
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
    cursor: pointer;
    text-decoration: none;
}

.donate-btn-outline:hover {
    background: var(--clr-gold-alpha-10);
    border-color: var(--clr-gold);
    transform: translateY(-2px);
}

/* ── Hero Impact Cards ─────────────────────────────────────── */
.donate-hero-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    max-width: 900px;
    margin: var(--space-3xl) auto 0;
    position: relative;
    z-index: 1;
}

.donate-impact-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(12px);
    transition: all var(--transition-mid);
}

.donate-impact-card:hover {
    border-color: var(--clr-gold-alpha-20);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.donate-impact-card--featured {
    border-color: var(--clr-gold-alpha-20);
    background: linear-gradient(135deg, var(--clr-card-bg), rgba(var(--clr-gold-rgb), 0.06));
    box-shadow: 0 0 30px var(--clr-gold-alpha-10);
}

.donate-impact-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--clr-gold-alpha-10);
    border-radius: var(--radius-md);
}

.donate-impact-body {
    flex: 1;
    text-align: left;
}

.donate-impact-num {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--clr-gold);
    margin-bottom: 0.25rem;
}

.donate-impact-text {
    font-family: var(--font-ui);
    font-size: 0.82rem;
    color: var(--clr-text-3);
    line-height: 1.5;
}

/* ── Stats Banner ──────────────────────────────────────────── */
.donate-stats-banner {
    padding: var(--space-2xl) 0;
    background: var(--clr-bg-2);
    border-top: 1px solid var(--clr-border);
    border-bottom: 1px solid var(--clr-border);
}

.donate-stats-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xl);
    flex-wrap: wrap;
}

.donate-stat-item {
    text-align: center;
}

.donate-stat-num {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    color: var(--clr-gold);
    line-height: 1.2;
}

.donate-stat-label {
    display: block;
    font-family: var(--font-ui);
    font-size: 0.8rem;
    color: var(--clr-text-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 0.35rem;
}

.donate-stat-divider {
    width: 1px;
    height: 40px;
    background: var(--clr-border-light);
    opacity: 0.5;
}

/* ── Donation Form Section ─────────────────────────────────── */
.donate-form-section {
    padding: var(--space-3xl) 0;
}

.donate-form-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: var(--space-xl);
    align-items: start;
}

.donate-form-card {
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(12px);
    overflow: hidden;
}

.donate-form-header {
    padding: var(--space-xl) var(--space-xl) 0;
}

.donate-form-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--clr-text);
    margin-bottom: 0.4rem;
}

.donate-form-subtitle {
    font-family: var(--font-ui);
    font-size: 0.88rem;
    color: var(--clr-text-3);
}

.donate-form-body {
    padding: var(--space-xl);
}

/* ── Amount Buttons ────────────────────────────────────────── */
.donate-amount-label {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--clr-text-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-sm);
}

.donate-amounts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    margin-bottom: var(--space-lg);
}

.donate-amount-btn {
    padding: 0.75rem 0.5rem;
    background: var(--clr-bg-2);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    color: var(--clr-text-2);
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.donate-amount-btn:hover {
    border-color: var(--clr-gold-alpha-20);
    color: var(--clr-gold-light);
    background: var(--clr-gold-alpha-10);
}

.donate-amount-btn--active {
    background: linear-gradient(135deg, var(--clr-gold), var(--clr-gold-dim));
    color: var(--clr-text-inv);
    border-color: var(--clr-gold);
    box-shadow: var(--shadow-gold);
}

.donate-amount-btn--active:hover {
    color: var(--clr-text-inv);
    background: linear-gradient(135deg, var(--clr-gold), var(--clr-gold-dim));
}

/* ── Form Fields ───────────────────────────────────────────── */
.donate-custom-wrap {
    margin-bottom: var(--space-lg);
}

.donate-fields-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.donate-field-group {
    margin-bottom: var(--space-md);
}

.donate-field-label {
    display: block;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--clr-text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.4rem;
}

.donate-input-wrap {
    position: relative;
}

.donate-input-prefix {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--clr-gold);
    pointer-events: none;
}

.donate-input-wrap .donate-input {
    padding-left: 2.2rem;
}

.donate-input {
    width: 100%;
    padding: 0.7rem 0.9rem;
    background: var(--clr-bg-2);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    color: var(--clr-text);
    font-family: var(--font-ui);
    font-size: 0.9rem;
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.donate-input:focus {
    border-color: var(--clr-gold);
    box-shadow: 0 0 0 3px var(--clr-gold-alpha-10);
}

.donate-input::placeholder {
    color: var(--clr-text-3);
    opacity: 0.7;
}

.donate-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23768a9c' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    padding-right: 2.5rem;
    cursor: pointer;
}

.donate-select option {
    background: var(--clr-bg-2);
    color: var(--clr-text);
}

/* ── 80G Note ──────────────────────────────────────────────── */
.donate-80g-note {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: var(--space-md);
    background: linear-gradient(135deg, var(--clr-gold-alpha-10), transparent);
    border: 1px solid var(--clr-gold-alpha-20);
    border-radius: var(--radius-md);
    font-family: var(--font-ui);
    font-size: 0.82rem;
    color: var(--clr-text-2);
    line-height: 1.6;
    margin-bottom: var(--space-lg);
}

.donate-80g-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.donate-80g-note strong {
    color: var(--clr-gold-light);
}

/* ── Submit Button ─────────────────────────────────────────── */
.donate-submit-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.95rem 1.5rem;
    background: linear-gradient(135deg, var(--clr-gold), var(--clr-gold-dim));
    color: var(--clr-text-inv);
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-bottom: var(--space-md);
}

.donate-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold), 0 8px 24px rgba(0, 0, 0, 0.3);
}

.donate-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.donate-submit-btn svg {
    transition: transform var(--transition-fast);
}

.donate-submit-btn:hover svg {
    transform: translateX(3px);
}

.donate-secure-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    color: var(--clr-text-3);
    opacity: 0.7;
}

/* ── Sidebar Cards ─────────────────────────────────────────── */
.donate-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.donate-bank-card {
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(12px);
    overflow: hidden;
}

.donate-bank-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    border-bottom: 1px solid var(--clr-border);
}

.donate-bank-icon {
    font-size: 1.5rem;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--clr-gold-alpha-10);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.donate-bank-title {
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 600;
    color: var(--clr-text);
}

.donate-bank-sub {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    color: var(--clr-text-3);
}

.donate-bank-details {
    padding: var(--space-lg);
}

.donate-bank-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--clr-border);
}

.donate-bank-row:last-child {
    border-bottom: none;
}

.donate-bank-key {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    color: var(--clr-text-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    margin-right: var(--space-md);
}

.donate-bank-val {
    font-family: var(--font-ui);
    font-size: 0.88rem;
    color: var(--clr-text);
    font-weight: 500;
    text-align: right;
}

.donate-bank-note {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    color: var(--clr-text-3);
    line-height: 1.6;
    padding: 0 var(--space-lg) var(--space-lg);
    border-top: 1px solid var(--clr-border);
    padding-top: var(--space-md);
}

.donate-bank-note strong {
    color: var(--clr-gold-light);
}

/* ── UPI Card ──────────────────────────────────────────────── */
.donate-upi-card {
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(12px);
    padding: var(--space-lg);
}

.donate-upi-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.donate-upi-icon {
    font-size: 1.3rem;
}

.donate-upi-title {
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 600;
    color: var(--clr-text);
}

.donate-upi-id {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: var(--clr-gold-alpha-10);
    border: 1px solid var(--clr-gold-alpha-20);
    border-radius: var(--radius-md);
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--clr-gold);
    letter-spacing: 0.03em;
    margin-bottom: var(--space-sm);
    user-select: all;
}

.donate-upi-note {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    color: var(--clr-text-3);
    line-height: 1.6;
}

/* ── Contact Help Card ─────────────────────────────────────── */
.donate-contact-card {
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(12px);
    padding: var(--space-lg);
}

.donate-contact-title {
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 600;
    color: var(--clr-text);
    margin-bottom: 0.3rem;
}

.donate-contact-text {
    font-family: var(--font-ui);
    font-size: 0.82rem;
    color: var(--clr-text-3);
    margin-bottom: var(--space-md);
    line-height: 1.5;
}

.donate-contact-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    color: var(--clr-gold-light);
    font-weight: 500;
    padding: 0.4rem 0;
    transition: color var(--transition-fast);
    text-decoration: none;
}

.donate-contact-link:hover {
    color: var(--clr-gold);
}

.donate-contact-link svg {
    opacity: 0.7;
    color: var(--clr-gold);
}

/* ── Section Headings ──────────────────────────────────────── */
.donate-section-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--space-2xl);
}

.donate-section-label {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--clr-gold);
    margin-bottom: var(--space-sm);
}

.donate-section-title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 700;
    color: var(--clr-text);
    line-height: 1.25;
    margin-bottom: var(--space-md);
}

.donate-section-title em {
    font-style: normal;
    background: linear-gradient(135deg, var(--clr-gold), var(--clr-gold-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.donate-section-desc {
    font-family: var(--font-ui);
    font-size: 0.95rem;
    color: var(--clr-text-3);
    line-height: 1.65;
}

/* ── How It Works Section ──────────────────────────────────── */
.donate-how {
    padding: var(--space-3xl) 0;
    background: var(--clr-bg-2);
    border-top: 1px solid var(--clr-border);
    border-bottom: 1px solid var(--clr-border);
}

.donate-steps-row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
}

.donate-step {
    flex: 1;
    max-width: 240px;
    text-align: center;
    padding: var(--space-lg);
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(12px);
    transition: all var(--transition-mid);
    position: relative;
}

.donate-step:hover {
    border-color: var(--clr-gold-alpha-20);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.donate-step-num {
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--clr-gold);
    letter-spacing: 0.1em;
    opacity: 0.5;
    margin-bottom: var(--space-sm);
}

.donate-step-icon {
    font-size: 2rem;
    margin-bottom: var(--space-md);
}

.donate-step-title {
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--clr-text);
    margin-bottom: 0.4rem;
}

.donate-step-desc {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    color: var(--clr-text-3);
    line-height: 1.55;
}

.donate-step-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--clr-gold);
    opacity: 0.35;
    padding: 0 0.5rem;
    margin-top: 4.5rem;
}

/* ── Impact Breakdown Section ──────────────────────────────── */
.donate-impact-section {
    padding: var(--space-3xl) 0;
}

.donate-impact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    align-items: start;
}

.donate-impact-left {
    padding-right: var(--space-lg);
}

.donate-impact-desc {
    font-family: var(--font-ui);
    font-size: 0.92rem;
    color: var(--clr-text-3);
    line-height: 1.65;
    margin-bottom: var(--space-xl);
}

/* ── Allocation Bars ───────────────────────────────────────── */
.donate-allocation-bars {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.donate-alloc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
}

.donate-alloc-label {
    font-family: var(--font-ui);
    font-size: 0.82rem;
    color: var(--clr-text-2);
    font-weight: 500;
}

.donate-alloc-pct {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    color: var(--clr-gold);
    font-weight: 600;
}

.donate-alloc-bar {
    height: 8px;
    background: var(--clr-bg-3);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.donate-alloc-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--clr-gold), var(--clr-gold-light));
    border-radius: var(--radius-full);
    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Rupee Impact Cards ────────────────────────────────────── */


.donate-impact-cards-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.donate-rupee-card {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-lg) var(--space-xl);
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(12px);
    transition: all var(--transition-mid);
}

.donate-rupee-card:hover {
    border-color: var(--clr-gold-alpha-20);
    transform: translateX(6px);
    box-shadow: var(--shadow-md);
}

.donate-rupee-card--gold {
    border-color: var(--clr-gold-alpha-20);
    background: linear-gradient(135deg, var(--clr-card-bg), rgba(var(--clr-gold-rgb), 0.06));
}

.donate-rupee-amount {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--clr-gold);
    white-space: nowrap;
    min-width: 80px;
}

.donate-rupee-divider {
    width: 1px;
    height: 32px;
    background: var(--clr-border-light);
    opacity: 0.5;
    flex-shrink: 0;
}

.donate-rupee-impact {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    color: var(--clr-text-2);
    line-height: 1.55;
}

/* ── Trust Section ─────────────────────────────────────────── */
.donate-trust {
    padding: var(--space-3xl) 0;
    background: var(--clr-bg-2);
    border-top: 1px solid var(--clr-border);
    border-bottom: 1px solid var(--clr-border);
}

.donate-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
}

.donate-trust-item {
    text-align: center;
    padding: var(--space-xl);
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(12px);
    transition: all var(--transition-mid);
}

.donate-trust-item:hover {
    border-color: var(--clr-gold-alpha-20);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.donate-trust-icon {
    font-size: 2rem;
    margin-bottom: var(--space-md);
}

.donate-trust-title {
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--clr-text);
    margin-bottom: 0.4rem;
}

.donate-trust-text {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    color: var(--clr-text-3);
    line-height: 1.55;
}

/* ── Closing CTA Section ──────────────────────────────────── */
.donate-closing {
    position: relative;
    padding: var(--space-3xl) 0;
    text-align: center;
    overflow: hidden;
}

.donate-closing-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, var(--clr-gold-alpha-10) 0%, transparent 70%);
    pointer-events: none;
}

.donate-closing-inner {
    position: relative;
    z-index: 1;
    max-width: 640px;
    margin: 0 auto;
}

.donate-closing-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 700;
    color: var(--clr-text);
    line-height: 1.2;
    margin-bottom: var(--space-lg);
}

.donate-closing-title em {
    font-style: normal;
    background: linear-gradient(135deg, var(--clr-gold), var(--clr-gold-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.donate-closing-sub {
    font-family: var(--font-ui);
    font-size: 1rem;
    color: var(--clr-text-2);
    line-height: 1.7;
    margin-bottom: var(--space-xl);
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

/* ── Responsive — Donate Page ──────────────────────────────── */
@media (max-width: 1024px) {
    .donate-form-grid {
        grid-template-columns: 1fr;
    }

    .donate-hero-cards {
        grid-template-columns: 1fr 1fr;
        max-width: 600px;
    }

    .donate-hero-cards .donate-impact-card:last-child {
        grid-column: 1 / -1;
        max-width: 300px;
        margin: 0 auto;
    }

    .donate-impact-grid {
        grid-template-columns: 1fr;
    }

    .donate-impact-left {
        padding-right: 0;
    }

    .donate-trust-grid {
        grid-template-columns: 1fr 1fr;
    }

    .donate-steps-row {
        flex-wrap: wrap;
        gap: var(--space-md);
    }

    .donate-step-arrow {
        display: none;
    }

    .donate-step {
        max-width: none;
        flex: 1 1 calc(50% - var(--space-md));
    }
}

@media (max-width: 768px) {
    .donate-hero {
        padding: 6rem 0 3rem;
    }

    .donate-hero-cards {
        grid-template-columns: 1fr;
        max-width: 360px;
    }

    .donate-hero-cards .donate-impact-card:last-child {
        max-width: none;
    }

    .donate-stats-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-lg);
    }

    .donate-stat-divider {
        display: none;
    }

    .donate-fields-row {
        grid-template-columns: 1fr;
    }

    .donate-amounts-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .donate-trust-grid {
        grid-template-columns: 1fr;
    }

    .donate-step {
        flex: 1 1 100%;
    }

    .donate-rupee-card {
        flex-direction: column;
        text-align: center;
        gap: var(--space-sm);
    }

    .donate-rupee-divider {
        width: 40px;
        height: 1px;
    }

    .donate-rupee-amount {
        min-width: auto;
    }
}

@media (max-width: 480px) {
    .donate-hero {
        padding: 5rem 0 2rem;
    }

    .donate-hero-title {
        font-size: 1.8rem;
    }

    .donate-amounts-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .donate-hero-cta {
        flex-direction: column;
    }

    .donate-btn-primary,
    .donate-btn-outline {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
   IMPACT STORIES PAGE STYLES
   ============================================================ */

/* ── Stories Page Container ─────────────────────────────────── */
.stories-page {
    overflow: hidden;
}

.stories-container {
    max-width: var(--max-w-wide);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

/* ── Hero Section ──────────────────────────────────────────── */
.stories-hero {
    position: relative;
    padding: 8rem 0 4rem;
    text-align: center;
    overflow: hidden;
}

.stories-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.stories-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.15;
}

.stories-hero-orb-1 {
    width: 480px;
    height: 480px;
    top: -120px;
    right: -60px;
    background: radial-gradient(circle, var(--clr-gold) 0%, transparent 70%);
    animation: stories-orb-drift 9s ease-in-out infinite alternate;
}

.stories-hero-orb-2 {
    width: 380px;
    height: 380px;
    bottom: -80px;
    left: -60px;
    background: radial-gradient(circle, var(--clr-amber) 0%, transparent 70%);
    animation: stories-orb-drift 11s ease-in-out infinite alternate-reverse;
}

@keyframes stories-orb-drift {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(-30px, 25px) scale(1.12);
    }
}

.stories-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 860px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-md);
}

.stories-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: var(--clr-gold-alpha-10);
    border: 1px solid var(--clr-gold-alpha-20);
    border-radius: var(--radius-full);
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--clr-gold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.stories-hero-sparkle {
    font-size: 0.75rem;
    color: var(--clr-gold);
    animation: stories-sparkle-pulse 2s ease-in-out infinite;
}

@keyframes stories-sparkle-pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.15) rotate(20deg);
    }
}

/* Kicker row */
.stories-hero-kicker {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    width: 100%;
    max-width: 520px;
    margin: var(--space-xs) 0;
}

.stories-hero-kicker-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--clr-border), transparent);
}

.stories-hero-kicker-text {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--clr-text-3);
    white-space: nowrap;
}

.stories-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--clr-text);
    margin: 0;
}

.stories-hero-title em {
    font-style: italic;
    background: linear-gradient(135deg, var(--clr-gold), var(--clr-amber));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Quote-strip description */
.stories-hero-desc {
    font-family: var(--font-body);
    font-size: 1.08rem;
    line-height: 1.85;
    color: var(--clr-text-2);
    max-width: 600px;
    margin: 0 auto;
    font-style: italic;
    font-weight: 400;
    border-left: 3px solid;
    border-image: linear-gradient(to bottom, var(--clr-gold), var(--clr-amber)) 1;
    padding-left: var(--space-lg);
    text-align: left;
}

.stories-hero-desc strong {
    color: var(--clr-text);
    font-weight: 700;
    font-style: normal;
}

.stories-hero-desc em {
    color: var(--clr-gold);
    -webkit-text-fill-color: unset;
    background: none;
    font-style: italic;
}

/* Location / theme pills */
.stories-hero-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-xs);
}

.stories-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--clr-text-2);
    background: var(--clr-bg-2);
    border: 1px solid var(--clr-border);
    padding: 5px 13px;
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
}

.stories-hero-pill svg {
    color: var(--clr-gold);
    flex-shrink: 0;
}

.stories-hero-pill:hover {
    background: var(--clr-gold-alpha-10);
    border-color: var(--clr-gold-alpha-20);
    color: var(--clr-gold);
    transform: translateY(-1px);
}

/* ── Hero Stats ────────────────────────────────────────────── */
.stories-hero-stats {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xl);
    padding: var(--space-lg) var(--space-xl);
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(12px);
}

.stories-hero-stat {
    text-align: center;
}

.stories-hero-stat-num {
    display: block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--clr-gold);
    line-height: 1.2;
}

.stories-hero-stat-label {
    display: block;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    color: var(--clr-text-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 0.2rem;
}

.stories-hero-stat-divider {
    width: 1px;
    height: 36px;
    background: var(--clr-border-light);
    opacity: 0.5;
}

/* ── Category Filter Bar ───────────────────────────────────── */
.stories-filter-bar {
    padding: var(--space-xl) 0;
    border-bottom: 1px solid var(--clr-border);
}

.stories-filters {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.stories-filter-btn {
    padding: 0.5rem 1.1rem;
    background: transparent;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-full);
    color: var(--clr-text-3);
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.stories-filter-btn:hover {
    border-color: var(--clr-gold-alpha-20);
    color: var(--clr-gold-light);
    background: var(--clr-gold-alpha-10);
}

.stories-filter-btn--active {
    background: linear-gradient(135deg, var(--clr-gold), var(--clr-gold-dim));
    color: var(--clr-text-inv);
    border-color: var(--clr-gold);
    box-shadow: var(--shadow-gold);
}

.stories-filter-btn--active:hover {
    background: linear-gradient(135deg, var(--clr-gold-light), var(--clr-gold-dim));
    color: var(--clr-text-inv);
    border-color: var(--clr-gold-light);
    box-shadow: 0 6px 20px rgba(var(--clr-gold-rgb), 0.4);
    transform: translateY(-1px);
}

/* ── Story Cards Grid ──────────────────────────────────────── */
.stories-grid-section {
    padding: var(--space-2xl) 0 var(--space-3xl);
}

.stories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

/* ── Story Card ────────────────────────────────────────────── */
.story-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(12px);
    padding: var(--space-xl);
    transition: all var(--transition-mid);
}

.story-card:hover {
    border-color: var(--clr-gold-alpha-20);
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.story-card--featured {
    border-color: var(--clr-gold-alpha-20);
    background: linear-gradient(135deg, var(--clr-card-bg), rgba(var(--clr-gold-rgb), 0.04));
}

.story-card-badge {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    padding: 0.25rem 0.7rem;
    background: linear-gradient(135deg, var(--clr-gold), var(--clr-gold-dim));
    color: var(--clr-text-inv);
    font-family: var(--font-ui);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: var(--radius-full);
}

/* ── Card Category ─────────────────────────────────────────── */
.story-card-category {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: var(--space-md);
}

.story-cat-icon {
    font-size: 0.9rem;
}

.story-cat-label {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--clr-gold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ── Card Content ──────────────────────────────────────────── */
.story-card-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--clr-text);
    line-height: 1.3;
    margin-bottom: var(--space-sm);
}

.story-card-excerpt {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    color: var(--clr-text-3);
    line-height: 1.6;
    margin-bottom: var(--space-lg);
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Card Impact Metrics ───────────────────────────────────── */
.story-card-impact {
    display: flex;
    gap: var(--space-lg);
    padding: var(--space-md) 0;
    border-top: 1px solid var(--clr-border);
    border-bottom: 1px solid var(--clr-border);
    margin-bottom: var(--space-md);
}

.story-impact-item {
    text-align: center;
    flex: 1;
}

.story-impact-num {
    display: block;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--clr-gold);
    line-height: 1.2;
}

.story-impact-label {
    display: block;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    color: var(--clr-text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 0.15rem;
}

/* ── Read More Button ──────────────────────────────────────── */
.story-read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    background: none;
    border: none;
    color: var(--clr-gold-light);
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-top: auto;
}

.story-read-more:hover {
    color: var(--clr-gold);
    gap: 0.6rem;
}

.story-read-more svg {
    transition: transform var(--transition-fast);
}

.story-read-more:hover svg {
    transform: translateX(3px);
}

/* ── Full Story (Expandable) ───────────────────────────────── */
.story-full-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.story-full-content--open {
    margin-top: var(--space-lg);
    border-top: 1px solid var(--clr-border);
    padding-top: var(--space-lg);
}

.story-full-body p {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--clr-text-2);
    line-height: 1.75;
    margin-bottom: var(--space-md);
}

.story-full-body p:last-child {
    margin-bottom: 0;
}

/* ── Section Headings ──────────────────────────────────────── */
.stories-section-head {
    text-align: center;
    max-width: 600px;
    margin: 0 auto var(--space-2xl);
}

.stories-section-label {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--clr-gold);
    margin-bottom: var(--space-sm);
}

.stories-section-title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 700;
    color: var(--clr-text);
    line-height: 1.25;
}

.stories-section-title em {
    font-style: normal;
    background: linear-gradient(135deg, var(--clr-gold), var(--clr-gold-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Programs Banner ───────────────────────────────────────── */
.stories-programs-banner {
    padding: var(--space-3xl) 0;
    background: var(--clr-bg-2);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid var(--clr-border);
    border-bottom: 1px solid var(--clr-border);
}

.stories-programs-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.stories-program-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.75rem 1.4rem;
    background: rgba(var(--clr-bg-rgb), 0.85);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-full);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-mid);
    cursor: pointer;
    text-decoration: none;
}

.stories-program-pill:hover {
    border-color: rgba(var(--clr-gold-rgb), 0.25);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    background: var(--clr-bg-3);
}

.stories-pill-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-gold);
    transition: transform var(--transition-mid);
}

.stories-program-pill:hover .stories-pill-icon {
    transform: scale(1.1);
}

.stories-pill-text {
    font-family: var(--font-ui);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--clr-text-2);
    text-transform: capitalize;
}

.stories-program-pill:hover .stories-pill-text {
    color: var(--clr-text);
}

.stories-pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--clr-gold);
    background: var(--clr-gold-alpha-10);
    border-radius: var(--radius-full);
    padding: 2px 8px;
    margin-left: 4px;
}

/* ── Closing CTA Section ──────────────────────────────────── */
.stories-closing {
    position: relative;
    padding: var(--space-3xl) 0;
    text-align: center;
    overflow: hidden;
}

.stories-closing-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, var(--clr-gold-alpha-10) 0%, transparent 70%);
    pointer-events: none;
}

.stories-closing-inner {
    position: relative;
    z-index: 1;
    max-width: 640px;
    margin: 0 auto;
}

.stories-closing-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 700;
    color: var(--clr-text);
    line-height: 1.2;
    margin-bottom: var(--space-lg);
}

.stories-closing-title em {
    font-style: normal;
    background: linear-gradient(135deg, var(--clr-gold), var(--clr-gold-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stories-closing-sub {
    font-family: var(--font-ui);
    font-size: 1rem;
    color: var(--clr-text-2);
    line-height: 1.7;
    margin-bottom: var(--space-xl);
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

.stories-closing-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.stories-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 2rem;
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.stories-cta-btn--primary {
    background: linear-gradient(135deg, var(--clr-gold), var(--clr-gold-dim));
    color: var(--clr-text-inv);
}

.stories-cta-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold), 0 8px 24px rgba(0, 0, 0, 0.3);
}

.stories-cta-btn--outline {
    background: transparent;
    color: var(--clr-gold-light);
    border: 1px solid var(--clr-gold-alpha-20);
}

.stories-cta-btn--outline:hover {
    background: var(--clr-gold-alpha-10);
    border-color: var(--clr-gold);
    transform: translateY(-2px);
}

/* ── Responsive — Stories Page ─────────────────────────────── */
@media (max-width: 1024px) {
    .stories-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stories-hero-stats {
        gap: var(--space-lg);
        padding: var(--space-md) var(--space-lg);
    }
}

@media (max-width: 768px) {
    .stories-hero {
        padding: 6rem 0 3rem;
    }

    .stories-grid {
        grid-template-columns: 1fr;
        max-width: 520px;
        margin: 0 auto;
    }

    .stories-hero-stats {
        flex-direction: column;
        gap: var(--space-md);
    }

    .stories-hero-stat-divider {
        width: 40px;
        height: 1px;
    }

    .stories-filters {
        gap: 0.4rem;
    }

    .stories-filter-btn {
        font-size: 0.75rem;
        padding: 0.4rem 0.8rem;
    }

    .stories-closing-actions {
        flex-direction: column;
    }

    .stories-cta-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .stories-hero {
        padding: 5rem 0 2rem;
    }

    .stories-hero-title {
        font-size: 1.8rem;
    }

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

    .story-card-title {
        font-size: 1.05rem;
    }

    .stories-programs-grid {
        flex-direction: column;
        align-items: stretch;
    }

    .stories-program-pill {
        justify-content: center;
    }

    /* Koenig Editor Styles */
    .kg-width-wide {
        position: relative;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        width: 100vw;
        max-width: 1080px;
        left: 50%;
        transform: translateX(-50%);
    }

    .kg-width-full {
        position: relative;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        width: 100vw;
        max-width: 100vw;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* ── New Card Images ───────────────────────────────────────── */

.story-card-image-wrap {
    position: relative;
    margin: calc(var(--space-xl) * -1) calc(var(--space-xl) * -1) var(--space-md) calc(var(--space-xl) * -1);
    height: 180px;
    overflow: hidden;
    border-top-left-radius: calc(var(--radius-xl) - 1px);
    border-top-right-radius: calc(var(--radius-xl) - 1px);
}

.story-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-mid);
}

.story-card:hover .story-card-img {
    transform: scale(1.05);
}

/* image overlay gradient on the link wrap */
.story-card-image-wrap {
    display: block;
    text-decoration: none;
    color: inherit;
}

.story-card-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.35) 0%, transparent 60%);
    transition: opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
}

.story-card:hover .story-card-img-overlay {
    opacity: 1;
}

/* card body wrapper */
.story-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--space-lg);
}

/* title link */
.story-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.story-card-title a:hover {
    color: var(--clr-gold);
}

/* tag pills row */
.story-tag-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.story-tag-pill {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    border-radius: 999px;
    background: var(--clr-gold-alpha-10);
    border: 1px solid var(--clr-gold-alpha-20);
    color: var(--clr-gold);
    text-transform: capitalize;
}

/* empty state */
.stories-empty {
    text-align: center;
    padding: var(--space-3xl) var(--space-xl);
    color: var(--clr-text-2);
}

.stories-empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-lg);
    color: var(--clr-gold);
    opacity: 0.7;
}

.stories-empty h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--clr-text);
    margin-bottom: var(--space-sm);
}

.stories-empty p {
    max-width: 420px;
    margin: 0 auto var(--space-lg);
    line-height: 1.7;
    font-size: 0.95rem;
}

/* no-results JS message */
.stories-no-results {
    text-align: center;
    padding: var(--space-2xl);
    color: var(--clr-text-2);
    font-size: 0.95rem;
    font-style: italic;
}

/* program pill post count badge */
.stories-pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--clr-gold);
    color: #000;
    font-size: 0.68rem;
    font-weight: 800;
    margin-left: 0.4rem;
    line-height: 1;
}

.program-card-image-wrap {
    position: relative;
    margin: calc(var(--space-xl) * -1) calc(var(--space-xl) * -1) var(--space-md) calc(var(--space-xl) * -1);
    height: 160px;
    overflow: hidden;
    border-top-left-radius: calc(var(--radius-lg) - 1px);
    border-top-right-radius: calc(var(--radius-lg) - 1px);
}

.program-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-mid);
}

.program-card:hover .program-card-img {
    transform: scale(1.05);
}

@media (max-width: 480px) {
    .story-card-image-wrap {
        margin: calc(var(--space-lg) * -1) calc(var(--space-lg) * -1) var(--space-md) calc(var(--space-lg) * -1);
        height: 150px;
    }

    .program-card-image-wrap {
        height: 140px;
    }
}

/* ── Hero Slideshow ────────────────────────────────────────── */
.hero-slideshow {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    opacity: 0.6;
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.hero-slide.active {
    opacity: 1;
}

.hero-slideshow-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        radial-gradient(ellipse 80% 80% at 50% 50%, rgba(var(--clr-bg-rgb), 0.85) 0%, rgba(var(--clr-bg-rgb), 0.6) 35%, rgba(var(--clr-bg-rgb), 0) 70%),
        linear-gradient(180deg, rgba(var(--clr-bg-rgb), 0) 0%, rgba(var(--clr-bg-rgb), 0) 65%, rgba(var(--clr-bg-rgb), 0.95) 100%);
}

/* ============================================================
   Programs Alternating Horizontal Cards (What We Do Section)
   ============================================================ */
.programs-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    margin-top: var(--space-2xl);
}

.program-horizontal-card {
    display: flex;
    align-items: center;
    border-radius: var(--radius-lg);
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-border);
    padding: var(--space-xl) var(--space-2xl);
    gap: var(--space-2xl);
    box-shadow: var(--shadow-lg);
    transition: transform var(--transition-mid), box-shadow var(--transition-mid), border-color var(--transition-mid);
}

.program-horizontal-card:hover {
    border-color: rgba(var(--clr-gold-rgb), 0.12);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    transform: translateY(-2px);
}

/* Alternate flex direction for cards — driven by Ghost {{@even}} via --flip class */
.program-horizontal-card--flip {
    flex-direction: row-reverse;
}

/* Subtle background gradients for alternating depth */
.program-horizontal-card:not(.program-horizontal-card--flip) {
    background: linear-gradient(135deg, rgba(var(--clr-gold-rgb), 0.01) 0%, var(--clr-card-bg) 100%);
}

.program-horizontal-card--flip {
    background: linear-gradient(135deg, var(--clr-card-bg) 0%, rgba(var(--clr-gold-rgb), 0.01) 100%);
}

/* Placeholder when no feature image is set */
.program-img-placeholder {
    width: 100%;
    min-height: 220px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(var(--clr-gold-rgb), 0.04), rgba(var(--clr-bg-rgb), 0.3));
    border: 1px dashed rgba(var(--clr-gold-rgb), 0.08);
}

.program-image-wrap {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: var(--radius-md);
}

.program-img {
    width: 100%;
    height: auto;
    max-height: 290px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    object-fit: cover;
    transition: transform var(--transition-mid), box-shadow var(--transition-mid);
}

.program-horizontal-card:hover .program-img {
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.program-content {
    flex: 1.25;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.program-header-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.program-icon-badge {
    font-size: 1.2rem;
    background: var(--clr-bg-2);
    border: 1px solid var(--clr-border);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.program-region-tag {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--clr-gold);
    background: var(--clr-gold-alpha-10);
    padding: 4px 10px;
    border-radius: 4px;
}

.program-title {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--clr-text);
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.program-desc {
    font-family: var(--font-ui);
    font-size: 0.92rem;
    line-height: 1.62;
    color: var(--clr-text-2);
    margin-bottom: var(--space-sm);
}

.program-learn-btn {
    align-self: flex-start;
    padding: 0.6rem 1.5rem;
    background: var(--clr-gold);
    color: var(--clr-text-inv);
    border: 1px solid var(--clr-gold);
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.program-learn-btn:hover {
    background: var(--clr-gold-light);
    border-color: var(--clr-gold-light);
    color: var(--clr-text-inv);
    transform: translateY(-1.5px);
    box-shadow: var(--shadow-gold);
}

/* Responsiveness for tablets and mobile */
@media (max-width: 991px) {
    .program-horizontal-card {
        padding: var(--space-lg) var(--space-xl);
        gap: var(--space-lg);
    }

    .program-title {
        font-size: 1.6rem;
    }
}

@media (max-width: 768px) {

    .program-horizontal-card,
    .program-horizontal-card:nth-child(even) {
        flex-direction: column !important;
        align-items: stretch;
        padding: var(--space-lg);
        gap: var(--space-lg);
    }

    .program-image-wrap {
        order: -1;
    }

    .program-img {
        max-height: 240px;
    }

    .program-title {
        font-size: 1.45rem;
    }
}


/* ============================================================
   READ Home — Manifesto Hero & Programs Redesign
   Palette: Terracotta (#C4793A) + Teal (#1E6E5E) + Deep Navy bg
   Type: DM Serif Display (display) + DM Sans (body)
   Signature: vertical terracotta rule on the H1 manifesto
   ============================================================ */

/* ── Hero: Manifesto Layout ──────────────────────────────── */
.rh-hero {
    position: relative;
    min-height: 90vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-bottom: 1px solid var(--clr-border);
}

/* Warm atmospheric glows — not scattered, one deliberate glow each side */
.rh-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.rh-hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(160px);
    opacity: 0.09;
}

.rh-glow-left {
    width: 640px;
    height: 640px;
    top: -160px;
    left: -200px;
    background: var(--clr-terracotta);
}

.rh-glow-right {
    width: 480px;
    height: 480px;
    bottom: -120px;
    right: -100px;
    background: var(--clr-teal);
}

/* Main two-column layout */
.rh-hero-inner {
    position: relative;
    z-index: 1;
    max-width: var(--max-w-wide);
    margin: 0 auto;
    padding: calc(var(--space-3xl) + 2rem) var(--space-xl) var(--space-3xl);
    width: 100%;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 5rem;
    align-items: center;
}

/* ── Eyebrow label ── */
.rh-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--clr-text-3);
    margin-bottom: var(--space-lg);
}

.rh-eyebrow-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--clr-terracotta);
    flex-shrink: 0;
}

/* ── Manifesto H1 — THE signature element ── */
.rh-manifesto {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    margin-bottom: var(--space-xl);
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    font-weight: 400;
    /* DM Serif Display has inherent weight */
    line-height: 1.35;
    font-style: italic;
    color: var(--clr-text);
    letter-spacing: -0.02em;
}

/* THE signature: a single terracotta left-border rule, 4px, full line height */
.rh-manifesto-rule {
    display: block;
    flex-shrink: 0;
    width: 4px;
    height: 100%;
    min-height: 3.5em;
    background: linear-gradient(180deg,
            var(--clr-terracotta) 0%,
            var(--clr-terracotta-light) 55%,
            transparent 100%);
    border-radius: 2px;
    margin-top: 0.15em;
}

.rh-manifesto-text {
    flex: 1;
}

/* ── Mission paragraph ── */
.rh-mission {
    font-family: var(--font-body);
    font-size: 0.97rem;
    font-weight: 300;
    line-height: 1.8;
    color: var(--clr-text-2);
    max-width: 500px;
    margin-bottom: var(--space-xl);
}

/* ── Hero CTA buttons ── */
.rh-hero-actions {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-bottom: var(--space-xl);
}

.rh-btn-primary {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.75rem;
    background: var(--clr-terracotta);
    color: #fff;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
    box-shadow: 0 2px 12px rgba(196, 121, 58, 0.25);
}

.rh-btn-primary:hover {
    background: var(--clr-terracotta-light);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(196, 121, 58, 0.35);
}

.rh-btn-ghost {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.75rem;
    background: transparent;
    color: var(--clr-text-2);
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.rh-btn-ghost:hover {
    color: var(--clr-terracotta-light);
    border-color: var(--clr-terracotta);
    background: var(--clr-terracotta-alpha-10);
}

/* ── Registration credentials row ── */
.rh-credentials {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.rh-cred {
    font-family: var(--font-ui);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--clr-text-3);
    background: var(--clr-bg-2);
    border: 1px solid var(--clr-border);
    padding: 3px 9px;
    border-radius: var(--radius-sm);
    cursor: default;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.rh-cred:hover {
    color: var(--clr-text);
    border-color: var(--clr-terracotta-dim);
}

.rh-cred-sep {
    color: var(--clr-text-3);
    opacity: 0.4;
    font-size: 0.75rem;
}

/* ── Glance card (right column) ── */
.rh-glance-card {
    background: rgba(21, 32, 43, 0.55);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--transition-mid), box-shadow var(--transition-mid);
}

.rh-glance-card:hover {
    border-color: rgba(196, 121, 58, 0.25);
    box-shadow: 0 8px 32px rgba(196, 121, 58, 0.08);
}

.rh-glance-img-wrap {
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-bottom: 1px solid var(--clr-border);
}

.rh-glance-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform var(--transition-slow);
}

.rh-glance-card:hover .rh-glance-img {
    transform: scale(1.04);
}

.rh-glance-body {
    padding: var(--space-lg) var(--space-xl) var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.rh-glance-label {
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--clr-terracotta);
}

.rh-glance-title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 400;
    font-style: italic;
    line-height: 1.35;
    color: var(--clr-text);
}

.rh-glance-excerpt {
    font-family: var(--font-body);
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--clr-text-2);
    font-weight: 300;
}

.rh-glance-link {
    display: inline-block;
    margin-top: var(--space-md);
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--clr-terracotta);
    letter-spacing: 0.02em;
    transition: color var(--transition-fast), letter-spacing var(--transition-fast);
    border-bottom: 1px solid transparent;
}

.rh-glance-link:hover {
    color: var(--clr-terracotta-light);
    letter-spacing: 0.05em;
    border-bottom-color: var(--clr-terracotta-dim);
}


/* ── Programs Section ────────────────────────────────────── */
.rh-programs {
    padding: var(--space-3xl) 0;
    background: var(--clr-bg);
    border-top: 1px solid var(--clr-border);
    border-bottom: 1px solid var(--clr-border);
    position: relative;
}

.rh-programs::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 55% 70% at 50% 50%,
            rgba(196, 121, 58, 0.04) 0%,
            transparent 70%);
    pointer-events: none;
}

.rh-programs-inner {
    max-width: var(--max-w-wide);
    margin: 0 auto;
    padding: 0 var(--space-xl);
    position: relative;
}

/* Section heading with thin rules each side */
.rh-section-head {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
}

.rh-section-rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--clr-border-light), transparent);
}

.rh-section-title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 400;
    color: var(--clr-text);
    white-space: nowrap;
    font-style: italic;
}

.rh-section-title em {
    font-style: normal;
    color: var(--clr-terracotta);
    font-weight: 400;
}

/* Program cards list — alternating layout */
.rh-programs-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.rh-prog-card {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    align-items: center;
    gap: var(--space-2xl);
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl) var(--space-2xl);
    transition: transform var(--transition-mid), border-color var(--transition-mid), box-shadow var(--transition-mid);
}

.rh-prog-card:hover {
    transform: translateY(-3px);
    border-color: var(--clr-gold-alpha-20);
    box-shadow: var(--shadow-lg), 0 0 0 1px var(--clr-gold-alpha-10);
}

/* Even cards: image on right, text on left */
.rh-prog-card--flip {
    grid-template-columns: 1.2fr 1fr;
}

.rh-prog-card--flip .rh-prog-img-wrap {
    order: 2;
}

.rh-prog-card--flip .rh-prog-body {
    order: 1;
}

/* Image */
.rh-prog-img-wrap {
    border-radius: var(--radius-md);
    overflow: hidden;
    height: 280px;
}

.rh-prog-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-mid);
}

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

/* Body */
.rh-prog-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.rh-prog-meta {
    margin-bottom: 4px;
}

.rh-prog-region {
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--clr-teal-light);
    background: var(--clr-teal-alpha-10);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    display: inline-block;
}

.rh-prog-title {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.2vw, 1.8rem);
    font-weight: 400;
    font-style: italic;
    line-height: 1.3;
    color: var(--clr-text);
    margin: var(--space-xs) 0;
}

.rh-prog-desc {
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 300;
    line-height: 1.75;
    color: var(--clr-text-2);
    margin-bottom: var(--space-sm);
}

.rh-prog-btn {
    display: inline-block;
    align-self: flex-start;
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--clr-terracotta);
    border: 1px solid rgba(196, 121, 58, 0.35);
    padding: 0.5rem 1.2rem;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.rh-prog-btn:hover {
    color: #fff;
    background: var(--clr-terracotta);
    border-color: var(--clr-terracotta);
}


/* ── Responsive breakpoints ───────────────────────────── */

@media (max-width: 1024px) {
    .rh-hero-inner {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
        padding: var(--space-2xl) var(--space-xl);
    }

    .rh-glance-col {
        max-width: 560px;
    }

    .rh-prog-card,
    .rh-prog-card--flip {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
        padding: var(--space-lg) var(--space-xl);
    }

    .rh-prog-card--flip .rh-prog-img-wrap {
        order: -1;
    }

    .rh-prog-card--flip .rh-prog-body {
        order: 1;
    }

    .rh-prog-img-wrap {
        height: 220px;
    }
}

@media (max-width: 768px) {
    .rh-manifesto {
        font-size: clamp(1.45rem, 5vw, 2rem);
    }

    .rh-hero-inner {
        padding: var(--space-xl) var(--space-lg);
    }

    .rh-prog-card,
    .rh-prog-card--flip {
        padding: var(--space-lg);
    }

    .rh-prog-img-wrap {
        height: 200px;
    }

    .rh-programs-inner {
        padding: 0 var(--space-lg);
    }

    .rh-section-head {
        flex-direction: column;
        gap: var(--space-sm);
        text-align: center;
    }

    .rh-section-rule {
        display: none;
    }

    .rh-hero-actions {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .rh-manifesto {
        gap: 0.85rem;
    }

    .rh-manifesto-rule {
        min-height: 2.5em;
        width: 3px;
    }

    .rh-prog-img-wrap {
        height: 180px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .rh-glance-img,
    .rh-prog-img {
        transition: none;
    }
}

/* ══════════════════════════════════════════════════════════════
   Contact Partners (cp-*) — redesigned full-width section
   ══════════════════════════════════════════════════════════════ */

.contact-partners {
    padding: var(--space-3xl) 0 calc(var(--space-3xl) + 1rem);
    background: var(--clr-bg);
    border-top: 1px solid var(--clr-border);
    border-bottom: 1px solid var(--clr-border);
    position: relative;
    overflow: hidden;
}

/* subtle decorative orb behind the section */
.contact-partners::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -120px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

/* ─ Inner wrapper ─ */
.cp-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--space-xl);
}

/* ─ Section header ─ */
.cp-header {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.cp-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--clr-gold);
    margin-bottom: var(--space-sm);
}

.cp-label-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--clr-gold);
    box-shadow: 0 0 8px var(--clr-gold);
    animation: pulse 2s ease-in-out infinite;
}

.cp-title {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    color: var(--clr-text);
    margin: 0 0 var(--space-sm);
    line-height: 1.2;
}

.cp-title em {
    font-style: normal;
    background: linear-gradient(135deg, var(--clr-gold), var(--clr-gold-light, #f5d485));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cp-subtitle {
    font-size: 0.95rem;
    color: var(--clr-text-2);
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ─ Category rows ─ */
.cp-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xl);
    padding: var(--space-lg) 0;
}

.cp-row-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 175px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--clr-gold);
    padding-top: 0.45rem;
    flex-shrink: 0;
}

.cp-row-label svg {
    flex-shrink: 0;
    opacity: 0.8;
}

/* ─ Tags area ─ */
.cp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    flex: 1;
}

/* ─ Individual tag pill ─ */
.cp-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.1rem;
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-border);
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--clr-text);
    transition: background 0.25s ease, border-color 0.25s ease,
        color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
    cursor: default;
    white-space: nowrap;
}

.cp-tag:hover {
    background: rgba(212, 175, 55, 0.1);
    border-color: rgba(212, 175, 55, 0.5);
    color: var(--clr-gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.15);
}

.cp-tag--wide {
    white-space: normal;
}

/* ─ Row divider ─ */
.cp-divider {
    height: 1px;
    background: linear-gradient(to right,
            transparent,
            var(--clr-border) 20%,
            var(--clr-border) 80%,
            transparent);
    margin: 0;
}

/* ─ Responsive ─ */
@media (max-width: 700px) {
    .cp-row {
        flex-direction: column;
        gap: var(--space-md);
    }

    .cp-row-label {
        min-width: unset;
        padding-top: 0;
    }

    .cp-tags {
        justify-content: flex-start;
    }

    .cp-inner {
        padding: 0 var(--space-md);
    }
}

/* ============================================================
   READ Contact — Action Cards & Social Pills Omissions
   ============================================================ */

.contact-action-card {
    background: var(--clr-card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg) var(--space-lg);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    transition: border-color var(--transition-mid), transform var(--transition-mid), box-shadow var(--transition-mid);
    color: var(--clr-text);
    text-decoration: none;
    position: relative;
    width: 100%;
}

.contact-action-card:hover {
    border-color: var(--clr-gold-alpha-20);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md), var(--shadow-gold);
}

.contact-action-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--clr-gold-alpha-10);
    border: 1px solid var(--clr-gold-alpha-20);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--clr-gold);
    font-size: 1.25rem;
    transition: background var(--transition-fast), transform var(--transition-fast), color var(--transition-fast);
}

.contact-action-card:hover .contact-action-icon-wrap {
    background: var(--clr-gold);
    color: var(--clr-text-inv);
    transform: scale(1.05) rotate(4deg);
}

.contact-action-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.contact-action-title {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-gold);
}

.contact-action-value {
    font-size: clamp(0.88rem, 2.5vw, 1.0rem);
    font-weight: 600;
    color: var(--clr-text);
    word-break: break-word;
    overflow-wrap: break-word;
}

.contact-action-note {
    font-size: 0.78rem;
    color: var(--clr-text-3);
    font-style: italic;
}

.contact-action-arrow {
    color: var(--clr-text-3);
    opacity: 0.5;
    transition: transform var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
}

.contact-action-card:hover .contact-action-arrow {
    transform: translateX(4px);
    color: var(--clr-gold);
    opacity: 1;
}

.contact-social-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
    width: 100%;
}

.social-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.5rem 1rem;
    background: var(--clr-bg-2);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-full);
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--clr-text-2);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.social-pill svg {
    flex-shrink: 0;
    color: var(--clr-text-3);
    transition: color var(--transition-fast);
}

.social-icon-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.social-icon-placeholder svg {
    display: block;
}

.social-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    color: #fff;
}

.facebook-pill:hover {
    background: #1877f2;
    border-color: #1877f2;
}

.facebook-pill:hover svg {
    color: #fff;
}

.linkedin-pill:hover {
    background: #0a66c2;
    border-color: #0a66c2;
}

.linkedin-pill:hover svg {
    color: #fff;
}

.instagram-pill:hover {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
    border-color: transparent;
}

.instagram-pill:hover svg {
    color: #fff;
}


/* ============================================================
   READ Donate — Methods Section styling
   ============================================================ */

.donate-methods {
    margin-top: 60px;
    background: var(--clr-bg-2);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl) var(--space-xl);
    width: 100%;
}

.donate-methods-header {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.donate-methods-title {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--clr-text);
    margin-bottom: var(--space-xs);
}

.donate-methods-title em {
    font-style: italic;
    color: var(--clr-gold);
}

.donate-methods-subtitle {
    font-size: 0.95rem;
    color: var(--clr-text-2);
}

.donate-methods-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 30px;
    margin-bottom: var(--space-xl);
}

.donate-method-card {
    background: var(--clr-bg-2);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    position: relative;
    overflow: hidden;
}

.donate-method-badge {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    background: var(--clr-gold-alpha-10);
    border: 1px solid var(--clr-gold-alpha-20);
    color: var(--clr-gold);
}

.donate-method-card-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--clr-text);
    margin-top: 0;
    margin-bottom: var(--space-lg);
    border-bottom: 1px solid var(--clr-border);
    padding-bottom: var(--space-sm);
}

.bank-details-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.bank-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    border-bottom: 1px solid var(--clr-border-light);
    padding-bottom: 8px;
}

.bank-detail-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.bank-detail-label {
    color: var(--clr-text-3);
    font-weight: 500;
}

.bank-detail-val {
    color: var(--clr-text);
    font-weight: 600;
    text-align: right;
}

.copy-hint {
    font-size: 0.75rem;
    color: var(--clr-gold);
    cursor: pointer;
    margin-left: 6px;
    font-weight: normal;
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.copy-hint:hover {
    color: var(--clr-gold-light);
}

.qr-code-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-lg);
}

.qr-code-placeholder {
    width: 160px;
    height: 160px;
    border-radius: var(--radius-md);
    background: var(--clr-bg);
    border: 1px solid var(--clr-border);
    padding: var(--space-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-code-border {
    border: 2px dashed var(--clr-border-light);
    width: 100%;
    height: 100%;
    border-radius: var(--radius-sm);
    padding: 4px;
}

.qr-code-inner-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
}

.qr-code-text {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--clr-text-3);
}

.upi-id-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    background: var(--clr-bg);
    border: 1px solid var(--clr-border);
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
}

.upi-id-label {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--clr-text-3);
}

.upi-id-val {
    font-family: var(--font-ui);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--clr-gold);
}

.upi-copy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-text-3);
    cursor: pointer;
    transition: color var(--transition-fast);
}

.upi-copy-btn:hover {
    color: var(--clr-gold);
}

.donate-tax-info {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    background: rgba(var(--clr-gold-rgb), 0.05);
    border: 1px solid var(--clr-gold-alpha-10);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--clr-text-2);
}

.donate-tax-info p {
    flex: 1;
    min-width: 0;
    word-break: break-word;
    margin: 0;
}

.donate-tax-info svg {
    flex-shrink: 0;
    color: var(--clr-gold);
    margin-top: 2px;
}

@media (max-width: 768px) {
    .donate-methods-grid {
        grid-template-columns: 1fr;
    }

    .donate-methods {
        padding: var(--space-lg) var(--space-md);
    }

    .donate-tax-info {
        padding: var(--space-md);
    }
}

/* ============================================================
   Our Partners Showcase Section (Categorized Cards Grid)
   ============================================================ */
.partners-section {
    padding: var(--space-xl) 0;
    background: var(--clr-bg);
    border-top: 1px solid var(--clr-border-light);
    border-bottom: 1px solid var(--clr-border-light);
}

.partners-section .section-header {
    margin-bottom: var(--space-lg);
}

.partners-container {
    max-width: var(--max-w-wide);
    margin: 0 auto;
    padding: 0 var(--space-xl);
}

.partner-category-block {
    margin-bottom: var(--space-2xl);
}

.partner-category-block:last-child {
    margin-bottom: 0;
}

.partner-category-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.partner-category-title {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--clr-text-2);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    white-space: nowrap;
}

.partner-category-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--clr-border) 0%, transparent 100%);
}

.partner-logos-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: flex-start;
    align-items: stretch;
}

.partner-logo-card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(25% - var(--space-md) * 0.75);
    height: clamp(80px, 10vh, 100px);
    background: var(--clr-bg-3);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-md) var(--space-lg);
    transition: transform var(--transition-mid), box-shadow var(--transition-mid), border-color var(--transition-mid);
    box-sizing: border-box;
}

.partner-logo-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(var(--clr-gold-rgb), 0.25);
}

.partner-logo-link,
.partner-logo-static {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.partner-logo-link {
    cursor: pointer;
}

.partner-logo-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    opacity: 0.85;
    transition: opacity var(--transition-mid);
}

.partner-logo-card:hover .partner-logo-img {
    opacity: 1;
}

@media (max-width: 1024px) {
    .partner-logo-card {
        width: calc(33.333% - var(--space-md) * 0.67);
    }
}

@media (max-width: 768px) {
    .partner-logo-card {
        width: calc(50% - var(--space-md) * 0.5);
        height: 85px;
    }

    .partner-logos-grid {
        justify-content: center;
    }

    .partner-category-header {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .partner-logo-card {
        width: 100%;
        height: 90px;
    }
}

/* ============================================================
   Donation Page Custom Settings Tweaks
   ============================================================ */
.qr-code-img {
    width: 240px;
    height: 240px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--clr-border);
    padding: var(--space-md);
    background: #ffffff;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    transition: transform var(--transition-mid), box-shadow var(--transition-mid);
}

.qr-code-img:hover {
    transform: scale(1.04) translateY(-2px);
    box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.15), 0 12px 15px -8px rgba(0, 0, 0, 0.15);
}

/* ============================================================
   About Mission Section
   ============================================================ */
.about-mission {
    padding: var(--space-3xl) 0;
    background: var(--clr-bg-2);
    border-top: 1px solid var(--clr-border);
    border-bottom: 1px solid var(--clr-border);
}

.about-mission-block {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    text-align: center;
    align-items: center;
}

.about-mission-text {
    font-size: 1.2rem;
    line-height: 1.7;
    color: var(--clr-text-2);
    font-family: var(--font-body);
}

.about-mission-text p {
    margin: 0;
}

.about-mission-text strong {
    color: var(--clr-gold);
    font-weight: 700;
}

.about-mission-chips {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-top: var(--space-md);
}

.about-mission-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 6px 16px;
    background: var(--clr-bg-3);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-full);
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--clr-text-2);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast);
}

.about-mission-chip svg {
    color: var(--clr-gold);
    opacity: 0.85;
}

.about-mission-chip:hover {
    border-color: var(--clr-gold-light);
    color: var(--clr-gold);
    transform: translateY(-1px);
}

/* ============================================================
   Partners Infinite Horizontal Scrolling Loop
   ============================================================ */
.partners-marquee-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 0;
    background: transparent;
    mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

.partners-marquee-track {
    display: flex;
    width: max-content;
    gap: var(--space-xl);
    animation: marquee-scroll 35s linear infinite;
}

/* Pause animation on hover for user interaction */
.partners-marquee-container:hover .partners-marquee-track {
    animation-play-state: paused;
}

.partners-marquee-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 100px;
    background: var(--clr-bg-3);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-sm) var(--space-md);
    box-sizing: border-box;
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.partners-marquee-item:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--clr-gold-rgb), 0.25);
    box-shadow: var(--shadow-md);
}

.partners-marquee-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    opacity: 0.85;
    transition: opacity var(--transition-fast);
}

.partners-marquee-item:hover .partners-marquee-img {
    opacity: 1;
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .partners-marquee-item {
        width: 170px;
        height: 80px;
        padding: var(--space-xs) var(--space-sm);
    }

    .partners-marquee-track {
        gap: var(--space-md);
    }
}

/* ============================================================
   Media & Photo Gallery Preset Styles
   ============================================================ */

.gallery-container {
    max-width: var(--max-w-wide);
    margin: 0 auto;
    padding: 0 var(--space-lg);
    width: 100%;
    box-sizing: border-box;
}

/* Gallery Hero Header Presets */
.gallery-hero {
    padding: var(--space-3xl) 0 var(--space-xl);
    text-align: center;
    background: radial-gradient(circle at 50% 0%, rgba(var(--clr-gold-rgb), 0.06), transparent 70%);
}

.gallery-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--clr-gold-alpha-10);
    border: 1px solid var(--clr-gold-alpha-20);
    color: var(--clr-gold);
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-md);
}

.gallery-hero-dot {
    width: 6px;
    height: 6px;
    background-color: var(--clr-gold);
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 8px var(--clr-gold);
    animation: gallery-pulse 2s infinite;
}

@keyframes gallery-pulse {
    0% {
        transform: scale(0.95);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.25);
        opacity: 1;
    }

    100% {
        transform: scale(0.95);
        opacity: 0.5;
    }
}

.gallery-hero-title {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 800;
    color: var(--clr-text);
    line-height: 1.15;
    margin: 0 0 var(--space-sm);
}

.gallery-hero-title em {
    font-style: italic;
    font-family: 'Playfair Display', serif;
    color: var(--clr-gold);
    font-weight: 400;
}

.gallery-hero-desc {
    font-family: var(--font-body);
    font-size: 1.15rem;
    color: var(--clr-text-2);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Gallery Index Grid (Albums list) */
.gallery-list-section {
    padding-bottom: var(--space-3xl);
}

.gallery-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-xl);
    margin-top: var(--space-xl);
}

.gallery-post-card {
    background: var(--clr-bg-3);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-mid);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.gallery-post-card:hover {
    transform: translateY(-5px);
    border-color: rgba(var(--clr-gold-rgb), 0.25);
    box-shadow: var(--shadow-md), var(--shadow-gold);
}

.gallery-card-img-wrap {
    display: block;
    position: relative;
    padding-top: 60%;
    /* 5:3 ratio */
    overflow: hidden;
    background: var(--clr-bg-4);
}

.gallery-card-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform var(--transition-slow);
}

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

.gallery-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-mid);
    backdrop-filter: blur(2px);
}

.gallery-post-card:hover .gallery-card-overlay {
    opacity: 1;
}

.gallery-card-icon {
    background: var(--clr-bg-3);
    color: var(--clr-gold);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    transform: scale(0.9);
    transition: transform var(--transition-mid);
}

.gallery-post-card:hover .gallery-card-icon {
    transform: scale(1);
}

.gallery-card-body {
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.gallery-card-date {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--clr-gold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-xs);
}

.gallery-card-title {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 var(--space-xs);
}

.gallery-card-title a {
    color: var(--clr-text);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.gallery-card-title a:hover {
    color: var(--clr-gold);
}

.gallery-card-excerpt {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--clr-text-2);
    margin-bottom: var(--space-md);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gallery-card-link {
    margin-top: auto;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--clr-gold);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: gap var(--transition-fast);
}

.gallery-card-link:hover {
    gap: 8px;
}

/* Single Gallery Template Content Layout */
.post-gallery .post-header {
    background: radial-gradient(circle at 50% 0%, rgba(var(--clr-gold-rgb), 0.06), transparent 70%);
    border-bottom: 1px solid var(--clr-border-light);
    margin-bottom: var(--space-2xl);
}

.gallery-content-wrap {
    max-width: var(--max-w-wide);
    margin: 0 auto;
    padding: 0 var(--space-lg);
    width: 100%;
    box-sizing: border-box;
}

/* CSS Masonry Columns Grid */
.gallery-media-grid {
    column-count: 3;
    column-gap: 24px;
    margin: var(--space-xl) 0 var(--space-3xl);
    width: 100%;
}

.gallery-media-item {
    break-inside: avoid;
    margin-bottom: 24px;
    display: inline-block;
    width: 100%;
    background: var(--clr-bg-3);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-mid);
    cursor: pointer;
    box-sizing: border-box;
}

.gallery-media-item:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--clr-gold-rgb), 0.25);
    box-shadow: var(--shadow-md), var(--shadow-gold);
}

.gallery-media-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--clr-bg-4);
    display: flex;
}

.gallery-media-inner img,
.gallery-media-inner video {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.gallery-media-inner iframe {
    width: 100%;
    height: 220px;
    border: none;
    display: block;
    transition: transform var(--transition-slow);
}

.gallery-media-item:hover img,
.gallery-media-item:hover video {
    transform: scale(1.04);
}

/* Video Hover Play overlays */
.gallery-media-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-mid);
    backdrop-filter: blur(1px);
}

.gallery-media-item:hover .gallery-media-overlay {
    opacity: 1;
}

.gallery-zoom-icon {
    background: rgba(255, 255, 255, 0.95);
    color: var(--clr-text);
    padding: 8px 16px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: var(--shadow-md);
    transform: scale(0.9);
    transition: all var(--transition-mid);
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.gallery-zoom-icon svg {
    flex-shrink: 0;
}

.gallery-play-icon {
    background: rgba(255, 255, 255, 0.95);
    color: var(--clr-gold);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    transform: scale(0.9);
    transition: all var(--transition-mid);
    padding-left: 2px;
}

.gallery-media-item:hover .gallery-zoom-icon,
.gallery-media-item:hover .gallery-play-icon {
    transform: scale(1);
    background: var(--clr-gold);
    color: #ffffff;
}

.gallery-item-caption {
    padding: 12px 16px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--clr-text-2);
    border-top: 1px solid var(--clr-border-light);
    background: var(--clr-bg-3);
    line-height: 1.4;
}

/* Empty State Styles */
.gallery-empty-state {
    text-align: center;
    padding: var(--space-3xl) var(--space-lg);
    background: var(--clr-bg-2);
    border: 2px dashed var(--clr-border);
    border-radius: var(--radius-lg);
    max-width: 500px;
    margin: var(--space-2xl) auto;
}

.gallery-empty-state svg {
    color: var(--clr-text-3);
    margin-bottom: var(--space-md);
    opacity: 0.8;
}

.gallery-empty-state h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--clr-text);
    margin: 0 0 8px;
}

.gallery-empty-state p {
    font-size: 0.9rem;
    color: var(--clr-text-2);
    margin: 0;
}

/* Spinner and Loading Elements */
.gallery-loading {
    text-align: center;
    padding: var(--space-3xl) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
}

.gallery-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(var(--clr-gold-rgb), 0.1);
    border-top-color: var(--clr-gold);
    border-radius: 50%;
    animation: gallery-spin 0.8s linear infinite;
}

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

/* Responsive Breakpoints for Masonry */
@media (max-width: 992px) {
    .gallery-media-grid {
        column-count: 2;
        column-gap: 20px;
    }

    .gallery-media-item {
        margin-bottom: 20px;
    }
}

@media (max-width: 576px) {
    .gallery-media-grid {
        column-count: 1;
    }

    .gallery-hero-title {
        font-size: 2.25rem;
    }
}

/* ============================================================
   Responsive Premium Fullscreen Lightbox
   ============================================================ */

.gallery-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-mid);
}

.gallery-lightbox.active {
    opacity: 1;
    pointer-events: auto;
}

.lightbox-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 10, 12, 0.94);
    backdrop-filter: blur(12px);
    z-index: 1;
}

.lightbox-close {
    position: absolute;
    top: 24px;
    right: 24px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all var(--transition-fast);
}

.lightbox-close:hover {
    background: var(--clr-gold);
    border-color: var(--clr-gold);
    transform: scale(1.08);
}

.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all var(--transition-fast);
}

.lightbox-prev {
    left: 32px;
}

.lightbox-next {
    right: 32px;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    background: var(--clr-gold);
    border-color: var(--clr-gold);
    transform: translateY(-50%) scale(1.08);
}

.lightbox-container {
    position: relative;
    z-index: 2;
    width: 95%;
    max-width: 1400px;
    height: 88%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.lightbox-media-wrapper {
    flex-grow: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.lightbox-media-el {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transform: scale(0.97);
    animation: lightbox-entry var(--transition-mid) forwards;
}

.lightbox-iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 16/9;
    border: none;
    background: #000000;
}

@keyframes lightbox-entry {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.lightbox-caption-panel {
    margin-top: 20px;
    text-align: center;
    width: 100%;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lightbox-caption-text {
    color: #ffffff;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.lightbox-counter {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.78rem;
    font-weight: 600;
    font-family: var(--font-ui);
    letter-spacing: 0.05em;
}

@media (max-width: 768px) {
    .lightbox-prev {
        left: 12px;
    }

    .lightbox-next {
        right: 12px;
    }

    .lightbox-prev,
    .lightbox-next {
        width: 40px;
        height: 40px;
    }

    .lightbox-close {
        top: 16px;
        right: 16px;
        width: 38px;
        height: 38px;
    }

    .lightbox-container {
        width: 95%;
        height: 85%;
    }
}

/* ============================================================
   Blog Page & Pagination Layout
   ============================================================ */

.blog-hero {
    padding: var(--space-3xl) 0 var(--space-xl);
    text-align: center;
    background: radial-gradient(circle at 50% 0%, rgba(var(--clr-gold-rgb), 0.06), transparent 70%);
}

.blog-list-section {
    padding-bottom: var(--space-3xl);
}

.blog-posts-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.blog-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-lg);
    margin-top: var(--space-2xl);
    padding: var(--space-md) 0;
    width: 100%;
}

.btn-pagination {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--clr-bg-3);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    color: var(--clr-text-2);
    font-family: var(--font-ui);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
    user-select: none;
}

.btn-pagination svg {
    transition: transform var(--transition-fast);
}

.btn-pagination.prev:hover:not(:disabled) svg {
    transform: translateX(-3px);
}

.btn-pagination.next:hover:not(:disabled) svg {
    transform: translateX(3px);
}

.btn-pagination:hover:not(:disabled) {
    border-color: var(--clr-gold-light);
    color: var(--clr-gold);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-pagination:active:not(:disabled) {
    transform: translateY(0);
}

.btn-pagination:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    border-color: var(--clr-border-light);
    box-shadow: none;
    color: var(--clr-text-3);
}

.page-number-indicator {
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--clr-text-3);
    letter-spacing: 0.02em;
    min-width: 120px;
    text-align: center;
}

/* Fix grid card alignment inside blog container */
.blog-posts-container .posts-grid {
    margin-top: var(--space-xl);
}

/* ============================================================
   Restructured About Page Hero (Home Page Style)
   ============================================================ */

.about-hero-section {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    overflow: hidden;
    border-bottom: 1px solid var(--clr-border);
    padding: 0;
    width: 100%;
}

.about-hero-section .hero-image-banner {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
}

.about-hero-section .hero-text-content {
    background: linear-gradient(135deg, #f43f5e, #fb923c);
    width: 100%;
    padding: var(--space-2xl) 0 var(--space-3xl);
    position: relative;
    z-index: 2;
}

.about-hero-section .about-hero-inner {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 var(--space-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    text-align: center;
    box-sizing: border-box;
}

.about-hero-section .about-hero-title {
    color: #ffffff;
}

.about-hero-section .about-hero-title em {
    color: #ffe066;
    font-style: italic;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
}

.about-hero-section .about-hero-desc {
    color: rgba(255, 255, 255, 0.95);
}

.about-hero-section .about-hero-desc strong {
    color: #ffffff;
}

.about-hero-section .about-hero-desc em {
    color: #ffe066;
}

.about-hero-section .about-hero-kicker-text {
    color: rgba(255, 255, 255, 0.9);
}

.about-hero-section .about-hero-kicker-line {
    background: rgba(255, 255, 255, 0.35);
}

.about-hero-section .about-hero-badge {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.about-hero-section .about-hero-dot {
    background-color: #ffe066;
    box-shadow: 0 0 8px #ffe066;
}

.about-hero-section .about-hero-pill {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.about-hero-section .about-hero-pill:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: #ffe066;
    color: #ffe066;
}

.about-hero-section .about-stat-num {
    color: #ffffff;
    text-shadow: none;
    background: none;
    -webkit-text-fill-color: initial;
}

.about-hero-section .about-stat-label {
    color: rgba(255, 255, 255, 0.85);
}

.about-hero-section .about-hero-stats {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.about-hero-section .about-stat:not(:last-child)::after {
    background: rgba(255, 255, 255, 0.25);
}

/* Mobile responsive fixes for the restructured layout */
@media (max-width: 580px) {
    .about-hero-section .hero-image-banner {
        height: 300px;
    }

    .about-hero-section .hero-text-content {
        padding: var(--space-xl) 0 var(--space-2xl);
    }

    .about-hero-section .about-hero-inner {
        padding: 0 var(--space-md);
    }
}

/* Extra dynamic social pills colors */
.twitter-pill:hover,
.x-pill:hover {
    background: #000000 !important;
    border-color: #000000 !important;
}

.twitter-pill:hover svg,
.x-pill:hover svg {
    color: #ffffff !important;
}

.youtube-pill:hover {
    background: #ff0000 !important;
    border-color: #ff0000 !important;
}

.youtube-pill:hover svg {
    color: #ffffff !important;
}

.default-pill:hover {
    background: var(--clr-gold) !important;
    border-color: var(--clr-gold) !important;
}

.default-pill:hover svg {
    color: #ffffff !important;
}

/* ============================================================
   AWARD AND APPRECIATION PAGE STYLES
   ============================================================ */

.award-page {
    overflow: hidden;
}

.award-container {
    max-width: var(--max-w-wide, 1140px);
    margin: 0 auto;
    padding: 0 var(--space-lg);
    width: 100%;
    box-sizing: border-box;
}

/* ── Hero Section ──────────────────────────────────────────── */
.award-hero {
    position: relative;
    padding: 8rem 0 4rem;
    text-align: center;
    overflow: hidden;
}

.award-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.award-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.15;
}

.award-hero-orb-1 {
    width: 480px;
    height: 480px;
    top: -120px;
    right: -60px;
    background: radial-gradient(circle, var(--clr-gold) 0%, transparent 70%);
    animation: award-orb-drift 9s ease-in-out infinite alternate;
}

.award-hero-orb-2 {
    width: 380px;
    height: 380px;
    bottom: -80px;
    left: -60px;
    background: radial-gradient(circle, var(--clr-amber) 0%, transparent 70%);
    animation: award-orb-drift 11s ease-in-out infinite alternate-reverse;
}

@keyframes award-orb-drift {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(-30px, 25px) scale(1.12);
    }
}

.award-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-md);
}

.award-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: var(--clr-gold-alpha-10);
    border: 1px solid var(--clr-gold-alpha-20);
    border-radius: var(--radius-full);
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--clr-gold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.award-hero-sparkle {
    font-size: 0.75rem;
    color: var(--clr-gold);
    animation: award-sparkle-pulse 2s ease-in-out infinite;
}

@keyframes award-sparkle-pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.15) rotate(20deg);
    }
}

/* Kicker row */
.award-hero-kicker {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    width: 100%;
    max-width: 520px;
    margin: var(--space-xs) 0;
}

.award-hero-kicker-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--clr-border), transparent);
}

.award-hero-kicker-text {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--clr-text-3);
    white-space: nowrap;
}

.award-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--clr-text);
    margin: 0;
}

.award-hero-title em {
    font-style: italic;
    background: linear-gradient(135deg, var(--clr-gold), var(--clr-amber));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.award-hero-desc {
    font-family: var(--font-body);
    font-size: 1.08rem;
    line-height: 1.85;
    color: var(--clr-text-2);
    max-width: 600px;
    margin: 0 auto;
    font-style: italic;
    font-weight: 400;
    border-left: 3px solid;
    border-image: linear-gradient(to bottom, var(--clr-gold), var(--clr-amber)) 1;
    padding-left: var(--space-lg);
    text-align: left;
}

/* ── Filter Bar ────────────────────────────────────────────── */
.award-filter-bar {
    padding: var(--space-xl) 0;
    border-bottom: 1px solid var(--clr-border);
}

.award-filters {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.award-filter-btn {
    padding: 0.5rem 1.4rem;
    background: transparent;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-full);
    color: var(--clr-text-3);
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.award-filter-btn:hover {
    border-color: var(--clr-gold-alpha-20);
    color: var(--clr-gold-light);
    background: var(--clr-gold-alpha-10);
}

.award-filter-btn--active {
    background: linear-gradient(135deg, var(--clr-gold), var(--clr-gold-dim));
    color: var(--clr-text-inv);
    border-color: var(--clr-gold);
    box-shadow: var(--shadow-gold);
}

.award-filter-btn--active:hover {
    background: linear-gradient(135deg, var(--clr-gold-light), var(--clr-gold-dim));
    color: var(--clr-text-inv);
    border-color: var(--clr-gold-light);
    transform: translateY(-1px);
}

/* ── Card Grid ─────────────────────────────────────────────── */
.award-grid-section {
    padding: var(--space-2xl) 0 var(--space-3xl);
}

.award-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

/* ── Card ──────────────────────────────────────────────────── */
.award-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
    transition: all var(--transition-mid);
    width: 100%;
    box-sizing: border-box;
}

.award-card:hover {
    border-color: var(--clr-gold-alpha-20);
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg), var(--shadow-gold);
}

.award-card-image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    cursor: pointer;
    background: var(--clr-bg-2);
}

.award-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.award-card-image-wrap:hover .award-card-img {
    transform: scale(1.05);
}

.award-card-zoom-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    transition: opacity var(--transition-mid);
    color: var(--clr-text-inv);
}

.award-card-image-wrap:hover .award-card-zoom-overlay {
    opacity: 1;
}

.award-card-zoom-overlay svg {
    color: var(--clr-gold-light);
    animation: pulse-zoom 2s infinite;
}

.award-card-zoom-overlay span {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

@keyframes pulse-zoom {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.award-card-body {
    display: flex;
    flex-direction: column;
    padding: var(--space-lg);
    flex: 1;
}

.award-card-badge-row {
    margin-bottom: var(--space-sm);
}

.award-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-full);
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.award-badge--award {
    background: var(--clr-gold-alpha-10);
    border: 1px solid var(--clr-gold-alpha-20);
    color: var(--clr-gold);
}

.award-badge--appreciation {
    background: rgba(234, 88, 12, 0.08);
    border: 1px solid rgba(234, 88, 12, 0.15);
    color: var(--clr-amber);
}

.award-card-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--clr-text);
    line-height: 1.35;
    margin: 0 0 0.5rem 0;
}

.award-card-title-link {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.award-card-title-link:hover {
    color: var(--clr-gold);
}

.award-card-subtitle {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    color: var(--clr-text-3);
    margin-bottom: var(--space-md);
    line-height: 1.4;
    font-weight: 500;
}

.award-card-subtitle span {
    font-weight: 700;
    color: var(--clr-text-2);
}

.award-card-excerpt {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--clr-text-2);
    line-height: 1.6;
    margin-bottom: var(--space-sm);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    overflow-wrap: break-word;
}

.award-card-footer {
    margin-top: auto;
    padding-top: var(--space-sm);
    border-top: 1px solid var(--clr-border-light);
    display: flex;
    justify-content: flex-end;
}

.award-read-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--clr-gold);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color var(--transition-fast);
}

.award-read-more svg {
    transition: transform var(--transition-fast);
}

.award-read-more:hover {
    color: var(--clr-gold-light);
}

.award-read-more:hover svg {
    transform: translateX(4px);
}

/* ── Lightbox Popup ────────────────────────────────────────── */
.award-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-mid);
    padding: var(--space-lg);
}

.award-lightbox.is-open {
    opacity: 1;
    pointer-events: auto;
}

.award-lightbox-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.award-lightbox-content {
    position: relative;
    z-index: 10002;
    max-width: 900px;
    width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: scale(0.95);
    transition: transform var(--transition-mid);
}

.award-lightbox.is-open .award-lightbox-content {
    transform: scale(1);
}

.award-lightbox-img {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    border: 3px solid rgba(255, 255, 255, 0.1);
}

.award-lightbox-caption {
    width: 100%;
    max-width: 650px;
    text-align: center;
    color: var(--clr-text-inv);
    margin-top: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.lightbox-caption-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 6px;
}

.lightbox-caption-subtitle {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    color: #94a3b8;
    margin: 0;
}

.award-lightbox-close {
    position: absolute;
    top: var(--space-lg);
    right: var(--space-lg);
    z-index: 10005;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.award-lightbox-close:hover {
    background: var(--clr-gold);
    border-color: var(--clr-gold);
    transform: rotate(90deg);
}

/* ── Empty states ──────────────────────────────────────────── */
.award-empty-state {
    text-align: center;
    padding: var(--space-3xl) var(--space-xl);
    background: var(--clr-bg-2);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-xl);
    max-width: 600px;
    margin: 0 auto;
}

.award-empty-icon {
    font-size: 3rem;
    color: var(--clr-text-3);
    margin-bottom: var(--space-md);
}

.award-empty-state h3 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--clr-text);
    margin-bottom: 0.5rem;
}

.award-empty-state p {
    font-family: var(--font-ui);
    font-size: 0.95rem;
    color: var(--clr-text-3);
    line-height: 1.6;
    margin-bottom: var(--space-lg);
}

.award-btn-home {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.75rem 1.8rem;
    background: linear-gradient(135deg, var(--clr-gold), var(--clr-gold-dim));
    color: var(--clr-text-inv);
    font-family: var(--font-ui);
    font-size: 0.88rem;
    font-weight: 700;
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.award-btn-home:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-gold);
    opacity: 0.95;
}

.award-no-results {
    text-align: center;
    padding: var(--space-2xl) 0;
    font-family: var(--font-ui);
    font-size: 1.05rem;
    color: var(--clr-text-3);
}

/* ── Responsive breakpoints ────────────────────────────────── */
@media (max-width: 1024px) {
    .award-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .award-hero {
        padding: 6rem 0 3rem;
    }

    .award-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
        width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
    }

    .award-hero-desc {
        text-align: center;
        border-left: none;
        padding-left: 0;
    }

    .award-hero-kicker-line {
        display: none;
    }

    .award-hero-kicker-text {
        white-space: normal;
        text-align: center;
        line-height: 1.4;
    }

    .award-hero-kicker {
        justify-content: center;
        max-width: 320px;
        margin: var(--space-xs) auto;
    }

    .award-lightbox-close {
        top: var(--space-sm);
        right: var(--space-sm);
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }
}

/* ============================================================
   BECOME A VOLUNTEER SECTION STYLES
   ============================================================ */

.contact-volunteer-section {
    padding: var(--space-3xl) 0;
    border-top: 1px solid var(--clr-border);
    background: radial-gradient(circle at top right, rgba(var(--clr-gold-rgb), 0.03), transparent 60%);
}

.volunteer-container {
    max-width: var(--max-w-wide, 1140px);
    margin: 0 auto;
    padding: 0 var(--space-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.volunteer-header {
    text-align: center;
    max-width: 600px;
    margin-bottom: var(--space-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
}

.volunteer-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1.15rem;
    background: var(--clr-gold-alpha-10);
    border: 1px solid var(--clr-gold-alpha-20);
    border-radius: var(--radius-full);
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--clr-gold);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.volunteer-sparkle {
    font-size: 0.75rem;
    color: var(--clr-gold);
    animation: award-sparkle-pulse 2s ease-in-out infinite;
}

.volunteer-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--clr-text);
    margin: 0;
}

.volunteer-title em {
    font-style: italic;
    background: linear-gradient(135deg, var(--clr-gold), var(--clr-amber));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.volunteer-desc {
    font-family: var(--font-ui);
    font-size: 0.95rem;
    color: var(--clr-text-3);
    line-height: 1.6;
    margin: 0;
}

.volunteer-card {
    width: 100%;
    max-width: 760px;
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: var(--space-xl);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform var(--transition-mid), border-color var(--transition-mid);
}

.volunteer-card:hover {
    border-color: var(--clr-gold-alpha-20);
}

.volunteer-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md) var(--space-lg);
    text-align: left;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}

.form-group.full-width {
    grid-column: span 2;
}

.form-label {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--clr-text-2);
}

.form-input,
.form-select,
.form-textarea {
    font-family: var(--font-ui);
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
    background: var(--clr-bg-2);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    color: var(--clr-text);
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    background: var(--clr-bg-3);
    border-color: var(--clr-gold);
    box-shadow: 0 0 0 3px var(--clr-gold-alpha-10);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--clr-text-3);
    opacity: 0.7;
}

.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2364748b' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
    cursor: pointer;
}

.form-textarea {
    resize: vertical;
    min-height: 120px;
}

.volunteer-form-actions {
    margin-top: var(--space-lg);
    display: flex;
    justify-content: flex-end;
}

.volunteer-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0.75rem 2rem;
    background: linear-gradient(135deg, var(--clr-gold), var(--clr-gold-dim));
    color: var(--clr-text-inv);
    border: 1px solid var(--clr-gold);
    font-family: var(--font-ui);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    border-radius: var(--radius-full);
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-fast);
}

.volunteer-submit-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--clr-gold-light), var(--clr-gold-dim));
    border-color: var(--clr-gold-light);
    transform: translateY(-1.5px);
    box-shadow: var(--shadow-gold);
}

.volunteer-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-loading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Spinner */
.spinner {
    animation: rotate 2s linear infinite;
    width: 16px;
    height: 16px;
}

.spinner .path {
    stroke: currentColor;
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }

    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

/* Success Card */
.volunteer-success-card {
    text-align: center;
    padding: var(--space-xl) var(--space-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    animation: card-appear 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.success-icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
    color: rgb(34, 197, 94);
    display: flex;
    align-items: center;
    justify-content: center;
}

.volunteer-success-card h3 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--clr-text);
    margin: 0;
}

.volunteer-success-card p {
    font-family: var(--font-ui);
    font-size: 0.95rem;
    color: var(--clr-text-3);
    line-height: 1.6;
    margin: 0;
    max-width: 500px;
}

.volunteer-btn-reset {
    background: transparent;
    border: none;
    color: var(--clr-gold);
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    transition: color var(--transition-fast);
    margin-top: var(--space-sm);
}

.volunteer-btn-reset:hover {
    color: var(--clr-gold-light);
}

@keyframes card-appear {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(8px);
    }

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

/* Responsive fixes */
@media (max-width: 768px) {
    .volunteer-form-grid {
        grid-template-columns: 1fr;
    }

    .form-group.full-width {
        grid-column: span 1;
    }

    .volunteer-card {
        padding: var(--space-lg) var(--space-md);
    }

    .volunteer-submit-btn {
        width: 100%;
    }
}

/* ============================================================
   Floating Subscribe Button
   ============================================================ */
.floating-subscribe-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: linear-gradient(135deg, var(--clr-gold-dim) 0%, var(--clr-gold) 50%, var(--clr-rust) 100%);
    background-size: 200% 200%;
    color: #ffffff;
    box-shadow: 0 4px 20px rgba(225, 29, 72, 0.4);
    border-radius: 50px;
    height: 52px;
    width: 52px;
    overflow: hidden;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s ease, box-shadow 0.25s ease, background-position 0.5s ease;
    text-decoration: none;
    cursor: pointer;
}

.floating-subscribe-btn-inner {
    display: flex;
    align-items: center;
    padding: 0 16px;
    height: 100%;
    width: max-content;
    gap: 8px;
}

.floating-subscribe-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.floating-subscribe-text {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.25s ease;
}

/* Hover States */
.floating-subscribe-btn:hover {
    width: 150px;
    transform: translateY(-3px);
    box-shadow: 0 6px 24px rgba(225, 29, 72, 0.55);
    background-position: 100% 0;
}

.floating-subscribe-btn:hover .floating-subscribe-text {
    opacity: 1;
    transition-delay: 0.1s;
}

.floating-subscribe-btn:hover .floating-subscribe-icon {
    transform: scale(1.1);
    animation: heartbeat 0.6s ease-in-out;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .floating-subscribe-btn {
        bottom: 20px;
        right: 20px;
        height: 48px;
        width: 48px;
    }

    .floating-subscribe-btn-inner {
        padding: 0 14px;
        gap: 6px;
    }

    .floating-subscribe-btn:hover {
        width: 135px;
    }
}