/* ==========================================================================
   CAIR-Nepal — bridge layer
   reference.css / reference-inner.css (vendored from the CAIR-Nepal design)
   own the design language. This file only:
     1. maps Bootstrap + legacy markup onto that language,
     2. adapts the Bootstrap navbar and Django footer to the reference chrome,
     3. quiets decorative leftovers from the old stylesheet,
     4. adds the few components the reference has no markup for.
   It must load last.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Token bridge — legacy + Bootstrap variables adopt the reference palette
   -------------------------------------------------------------------------- */
:root {
    --paper: var(--white);
    --forest-deep: #082724;
    --gold-deep: #96703c;
    --line-light: rgba(255, 255, 255, .18);
    --shadow-soft: 0 24px 70px rgba(9, 35, 32, .10);

    /* legacy style.css variables */
    --primary-color: #0b2f2b;
    --secondary-color: #5e706d;
    --success-color: #315c55;
    --info-color: #315c55;
    --warning-color: #bf9451;
    --danger-color: #9c4a34;
    --light-color: #ebe4d5;
    --dark-color: #142d2a;
    --gradient-primary: linear-gradient(135deg, #0b2f2b 0%, #123f39 100%);
    --gradient-secondary: linear-gradient(135deg, #123f39 0%, #315c55 100%);
    --border-radius: 0;
    --font-family: var(--sans);
    --shadow-sm: none;
    --shadow: 0 12px 34px rgba(9, 35, 32, .08);
    --shadow-lg: var(--shadow-soft);

    /* Bootstrap 5.3 */
    --bs-primary: #0b2f2b;
    --bs-primary-rgb: 11, 47, 43;
    --bs-secondary: #5e706d;
    --bs-secondary-rgb: 94, 112, 109;
    --bs-success: #315c55;
    --bs-success-rgb: 49, 92, 85;
    --bs-info: #315c55;
    --bs-info-rgb: 49, 92, 85;
    --bs-warning: #bf9451;
    --bs-warning-rgb: 191, 148, 81;
    --bs-light: #ebe4d5;
    --bs-light-rgb: 235, 228, 213;
    --bs-dark: #0b2f2b;
    --bs-dark-rgb: 11, 47, 43;
    --bs-body-font-family: var(--sans);
    --bs-body-color: #142d2a;
    --bs-body-bg: #f5f1e7;
    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --bs-border-radius-xl: 0;
    --bs-border-color: rgba(20, 45, 42, .18);
    --bs-link-color: #0b2f2b;
    --bs-link-color-rgb: 11, 47, 43;
    --bs-link-hover-color: #96703c;
    --bs-emphasis-color: #142d2a;
    --bs-heading-color: inherit;
}

/* --------------------------------------------------------------------------
   2. Typography bridge for Bootstrap-marked-up pages
   -------------------------------------------------------------------------- */
body { font-size: 16px; -webkit-font-smoothing: antialiased; }

.container { max-width: 1280px; }

/* No colour here on purpose: headings must inherit, so that dark sections
   (.inner-hero, .inner-section.dark, .text-white, .research) get light text. */
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--display);
    font-weight: 400;
    letter-spacing: -.03em;
    line-height: 1.08;
}

/* The display face carries the emphasis; drop Bootstrap's bold on headings. */
h1.fw-bold, h2.fw-bold, h3.fw-bold, h4.fw-bold, h5.fw-bold,
.display-1.fw-bold, .display-2.fw-bold, .display-3.fw-bold,
.display-4.fw-bold, .display-5.fw-bold, .display-6.fw-bold { font-weight: 400; }

h5, h6, .h5, .h6 { line-height: 1.3; }
h6, .h6 { font-family: var(--sans); letter-spacing: 0; }

.display-3 { font-size: clamp(2.8rem, 5.6vw, 4.6rem); }
.display-4 { font-size: clamp(2.5rem, 4.8vw, 3.9rem); }
.display-5 { font-size: clamp(2.2rem, 4vw, 3.3rem); }

.lead { font-size: 1.06rem; font-weight: 400; line-height: 1.75; color: var(--muted); }
.text-muted { color: var(--muted) !important; }
.text-primary { color: var(--forest) !important; }
.text-white-50 { color: rgba(255, 253, 248, .58) !important; }

a:hover { color: var(--gold-deep); }
::selection { background: var(--gold-light); color: var(--forest); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.bg-light { background-color: var(--cream) !important; }
.bg-white { background-color: var(--white) !important; }
.bg-gradient-primary { background: var(--forest) !important; }
.bg-gradient-secondary { background: var(--forest-mid) !important; }
.bg-primary { background-color: var(--forest) !important; }
.bg-success { background-color: var(--forest-soft) !important; }
.bg-secondary { background-color: var(--muted) !important; }
.bg-warning { background-color: var(--gold) !important; color: var(--forest) !important; }
.bg-dark { background-color: var(--forest) !important; }

.shadow-sm { box-shadow: none !important; }
.shadow { box-shadow: 0 12px 34px rgba(9, 35, 32, .07) !important; }
.shadow-lg { box-shadow: var(--shadow-soft) !important; }

.rounded, .rounded-3, .rounded-4, .rounded-pill { border-radius: 0 !important; }
.rounded-circle { border-radius: 50% !important; }
hr { border-color: var(--line); opacity: 1; }

/* --------------------------------------------------------------------------
   3. Bootstrap components in the reference idiom
   -------------------------------------------------------------------------- */
.btn {
    --bs-btn-border-radius: 0;
    border-radius: 0;
    font-family: var(--sans);
    font-weight: 600;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    padding: .85rem 1.45rem;
    border-width: 1px;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.btn-lg { font-size: .76rem; padding: 1rem 1.8rem; }
.btn-sm { font-size: .66rem; padding: .55rem 1rem; letter-spacing: .08em; }
.btn:hover { transform: none; }

.btn-primary { background: var(--forest); border-color: var(--forest); color: var(--white); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: var(--gold) !important; border-color: var(--gold) !important; color: var(--forest) !important;
}

.btn-outline-primary { border-color: var(--forest); color: var(--forest); background: transparent; }
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
    background: var(--forest) !important; border-color: var(--forest) !important; color: var(--white) !important;
}

.btn-outline-secondary, .btn-outline-info, .btn-outline-success, .btn-outline-warning {
    border-color: var(--line); color: var(--ink); background: transparent;
}
.btn-outline-secondary:hover, .btn-outline-info:hover,
.btn-outline-success:hover, .btn-outline-warning:hover {
    background: var(--ink) !important; border-color: var(--ink) !important; color: var(--white) !important;
}

.btn-secondary { background: var(--muted); border-color: var(--muted); color: var(--white); }
.btn-success { background: var(--forest-soft); border-color: var(--forest-soft); color: var(--white); }
.btn-light { background: var(--gold); border-color: var(--gold); color: var(--forest); }
.btn-light:hover { background: var(--gold-light) !important; border-color: var(--gold-light) !important; color: var(--forest) !important; }
.btn-outline-light { border-color: rgba(255, 253, 248, .55); color: var(--white); }
.btn-outline-light:hover { background: var(--white) !important; color: var(--forest) !important; border-color: var(--white) !important; }

.badge {
    border-radius: 0;
    font-family: var(--sans);
    font-weight: 600;
    font-size: .62rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    padding: .5em .85em;
}
.badge.bg-primary { background: var(--forest) !important; color: var(--white); }
.badge.bg-success { background: transparent !important; color: var(--gold-deep) !important; box-shadow: inset 0 0 0 1px var(--gold); }
.badge.bg-secondary { background: transparent !important; color: var(--muted) !important; box-shadow: inset 0 0 0 1px var(--line); }
.badge.bg-light { background: var(--cream) !important; color: var(--forest) !important; }

.card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.card.border-0 { border: 1px solid var(--line) !important; }
.card:hover { transform: translateY(-4px); border-color: rgba(191, 148, 81, .55); box-shadow: var(--shadow-soft); }
.card-title { font-family: var(--display); font-weight: 400; letter-spacing: -.02em; }
.card-img-top { border-radius: 0; }
.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }

.form-control, .form-select {
    border-radius: 0;
    border: 1px solid var(--line);
    background: var(--white);
    color: var(--ink);
    padding: .8rem 1rem;
    font-family: var(--sans);
}
.form-control:focus, .form-select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(191, 148, 81, .18); }
.form-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; }

.table { --bs-table-border-color: var(--line); }
.table thead th {
    font-size: .66rem; text-transform: uppercase; letter-spacing: .14em;
    color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line);
}

.accordion-item { border-radius: 0; border-color: var(--line); background: var(--white); }
.accordion-button { border-radius: 0 !important; font-family: var(--display); font-size: 1.15rem; background: var(--white); color: var(--ink); }
.accordion-button:not(.collapsed) { background: var(--cream); color: var(--forest); box-shadow: none; }
.accordion-button:focus { box-shadow: none; border-color: var(--gold); }

.alert { border-radius: 0; border-color: var(--line); }
.pagination .page-link { border-radius: 0 !important; border-color: var(--line); color: var(--forest); }
.pagination .active .page-link { background: var(--forest); border-color: var(--forest); color: var(--white); }
.breadcrumb { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; }
.dropdown-menu { --bs-dropdown-border-radius: 0; }

/* --------------------------------------------------------------------------
   4. Header — Bootstrap navbar wearing the reference chrome
   -------------------------------------------------------------------------- */
.skip-link {
    position: fixed; left: 20px; top: -60px; z-index: 1080;
    background: var(--gold); color: var(--forest); padding: 10px 16px;
    text-decoration: none; font-size: .74rem; text-transform: uppercase; letter-spacing: .1em;
}
.skip-link:focus { top: 15px; }

.announcement { display: flex; align-items: center; justify-content: center; gap: 14px; }
.announcement-links { display: inline-flex; align-items: center; gap: 14px; }
.announcement a { margin-left: 0; text-decoration: none; border-bottom: 1px solid rgba(221, 196, 147, .5); }
.announcement a:hover { color: var(--white); }

@media (max-width: 760px) {
    .announcement { justify-content: space-between; gap: 10px; text-align: left; }
    .announcement > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .announcement .announcement-links { flex: 0 0 auto; gap: 10px; }
    .announcement .announcement-links a { display: inline; }
    .announcement .announcement-links a:first-child { display: none; }
}

.compact-navbar {
    background: rgba(245, 241, 231, .94) !important;
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    box-shadow: none;
    padding: 0;
    min-height: 82px;
}

.compact-navbar .container { min-height: 82px; }
.compact-navbar .navbar-brand img { height: 44px !important; width: auto; }
.compact-navbar .navbar-brand:hover img { transform: none; }

.compact-navbar .nav-link,
.compact-navbar .navbar-nav .nav-link {
    color: var(--ink) !important;
    font-family: var(--sans);
    font-size: .8rem;
    font-weight: 400;
    letter-spacing: .01em;
    padding: .6rem .85rem !important;
    margin: 0;
}

.compact-navbar .nav-link:hover,
.compact-navbar .nav-link:focus,
.compact-navbar .nav-item.show > .nav-link { color: var(--gold-deep) !important; }

/* The reference nav has no carets; keep a small one only as a hover hint. */
.compact-navbar .dropdown-toggle::after {
    border: 0;
    content: "";
    width: 4px; height: 4px;
    margin-left: .5em;
    vertical-align: middle;
    background: currentColor;
    opacity: .35;
    border-radius: 50%;
    display: inline-block;
}
.compact-navbar .nav-item.show > .dropdown-toggle::after { opacity: 1; }

.compact-navbar .navbar-toggler { border: 1px solid var(--line); border-radius: 0; padding: .4rem .6rem; }
.compact-navbar .navbar-toggler:focus { box-shadow: none; }
.compact-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23142d2a' stroke-linecap='round' stroke-miterlimit='10' stroke-width='1.6' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.compact-navbar .dropdown-menu {
    border-radius: 0;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-soft);
    background: var(--white);
    margin-top: .35rem;
    padding: .4rem 0;
    min-width: 15rem;
}
.compact-navbar .dropdown-item { font-size: .8rem; padding: .55rem 1.15rem; color: var(--ink); }
.compact-navbar .dropdown-item:hover, .compact-navbar .dropdown-item:focus {
    background: var(--cream); color: var(--forest); transform: none;
}
.compact-navbar .dropdown-divider { border-color: var(--line); }

.compact-navbar .nav-cta-wrap { gap: .55rem; margin-left: 1.4rem; }

/* Specificity must clear `.compact-navbar .navbar-nav .nav-link`. */
.compact-navbar .nav-cta-wrap .donors-btn {
    color: var(--ink) !important;
    border: 1px solid var(--line);
    border-radius: 0;
    padding: .78rem 1.1rem !important;
    font-size: .72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .09em;
    text-decoration: none !important;
}
.compact-navbar .nav-cta-wrap .donors-btn:hover {
    background: transparent; border-color: var(--gold); color: var(--gold-deep) !important;
    transform: none; box-shadow: none;
}

.compact-navbar .nav-cta-wrap .donate-btn {
    background: var(--forest);
    color: var(--white) !important;
    border: 1px solid var(--forest);
    border-radius: 0;
    padding: .78rem 1.2rem !important;
    font-size: .72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .09em;
    text-decoration: none !important;
    display: inline-flex; align-items: center;
}
.compact-navbar .nav-cta-wrap .donate-btn:hover {
    background: var(--gold); border-color: var(--gold); color: var(--forest) !important;
    transform: none; box-shadow: none;
}
.compact-navbar .nav-cta-wrap .donate-btn i { animation: none; }

@media (max-width: 991.98px) {
    body.menu-open { overflow: hidden; }
    .compact-navbar {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .compact-navbar .container { min-height: 70px; }
    .compact-navbar .navbar-brand,
    .compact-navbar .navbar-toggler {
        position: relative;
        z-index: 1052;
    }
    .compact-navbar .navbar-brand img { height: 40px !important; max-width: 178px; object-fit: contain; }
    .compact-navbar .navbar-toggler {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        border: 0;
        padding: 0;
    }
    .compact-navbar .navbar-toggler-icon {
        position: relative;
        width: 25px;
        height: 18px;
        background: none;
    }
    .compact-navbar .navbar-toggler-icon::before,
    .compact-navbar .navbar-toggler-icon::after {
        content: "";
        position: absolute;
        left: 0;
        width: 25px;
        height: 1px;
        background: var(--ink);
        transition: top .25s ease, transform .25s ease;
    }
    .compact-navbar .navbar-toggler-icon::before { top: 5px; }
    .compact-navbar .navbar-toggler-icon::after { top: 13px; }
    .compact-navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
        top: 9px;
        transform: rotate(45deg);
    }
    .compact-navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
        top: 9px;
        transform: rotate(-45deg);
    }
    .compact-navbar .navbar-collapse {
        position: fixed;
        inset: 0;
        z-index: 1050;
        width: 100vw;
        height: 100dvh !important;
        min-height: 100vh;
        background: var(--ivory);
        margin: 0;
        padding: 112px 28px 36px;
        overflow-y: auto;
        border: 0;
        box-shadow: -24px 0 70px rgba(9,35,32,.14);
    }
    .compact-navbar .navbar-collapse.collapsing {
        display: block;
        transform: translateX(100%);
        opacity: 0;
        transition: transform .3s ease, opacity .24s ease;
    }
    .compact-navbar .navbar-collapse.collapse.show {
        transform: translateX(0);
        opacity: 1;
    }
    .compact-navbar .navbar-nav { width: 100%; }
    .compact-navbar .navbar-nav .nav-item { border-bottom: 1px solid var(--line); }
    .compact-navbar .navbar-nav .nav-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        color: var(--ink) !important;
        font: 400 clamp(1.65rem, 7vw, 2rem)/1.2 var(--display);
        letter-spacing: -.02em;
        padding: 14px 0 !important;
    }
    .compact-navbar .dropdown-menu { border: 0; box-shadow: none; background: transparent; padding-left: .5rem; }
    .compact-navbar .nav-cta-wrap {
        align-items: stretch !important;
        flex-direction: column;
        gap: 10px;
        margin: 22px 0 0;
    }
    .compact-navbar .nav-cta-wrap .search-button {
        justify-content: flex-start;
        min-height: 48px;
        border-bottom: 1px solid var(--line);
        font: 400 1.25rem var(--display);
        padding: 10px 0 !important;
    }
    .compact-navbar .nav-cta-wrap .donors-btn,
    .compact-navbar .nav-cta-wrap .donate-btn {
        justify-content: center;
        min-height: 50px;
        margin: 0;
        font: 600 .72rem var(--sans);
        letter-spacing: .09em;
    }
    .compact-navbar .nav-cta-wrap .donate-btn { color: var(--white) !important; }
}

@media (max-width: 420px) {
    .compact-navbar .navbar-collapse { padding-inline: 24px; }
    .compact-navbar .navbar-brand img { max-width: 155px; }
}

/* --------------------------------------------------------------------------
   5. Footer — reference chrome over the Django footer markup
   -------------------------------------------------------------------------- */
/* style.css styles the bare `footer` element; override it for both the site
   footer and any content-level <footer> inside main. */
footer.footer-section {
    background: var(--forest-deep) !important;
    color: var(--white);
    padding: clamp(56px, 6vw, 68px) 0 24px !important;
}

.footer-section .footer-logo { filter: brightness(0) invert(1); opacity: .92; }
.footer-section h4, .footer-section h6 {
    font-family: var(--sans);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--gold-light) !important;
    font-weight: 600;
    margin-bottom: 16px;
}
.footer-section .footer-brand h4 {
    font-family: var(--display); font-size: 1.4rem; letter-spacing: -.02em;
    text-transform: none; color: var(--white) !important;
}
.footer-section p, .footer-section span { color: rgba(255, 253, 248, .55); }
.footer-section .footer-link {
    color: rgba(255, 253, 248, .68); text-decoration: none; font-size: .8rem;
    transition: color .2s ease; display: block; margin: 7px 0;
}
.footer-section .footer-link:hover { color: var(--gold-light) !important; }
.footer-section .footer-link-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 28px;
}
.footer-section .footer-link-columns > div { min-width: 0; }
.knowledge-grid .line-icon {
    display: flex;
    align-items: flex-start;
}
.knowledge-grid .line-icon i {
    font-size: 1.15rem;
    line-height: 1.45;
}
.footer-section .social-link {
    color: rgba(255, 253, 248, .7);
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255, 253, 248, .2);
    transition: border-color .2s ease, color .2s ease;
}
.footer-section .social-link:hover { color: var(--gold-light); border-color: var(--gold-light); background: transparent; transform: none; }
.footer-section .social-link i { font-size: .95rem; }
.footer-section .footer-platforms { display: flex; flex-wrap: wrap; gap: 7px 14px; margin-top: 15px; }
.footer-section .footer-platforms a { color: rgba(255,253,248,.58); font-size: .68rem; text-decoration: none; }
.footer-section .footer-platforms a:hover { color: var(--gold-light); }
.footer-section hr { border-color: rgba(255, 253, 248, .15); }
.footer-section .list-inline-item { margin-left: 18px; }
.footer-section img { filter: none; }
.footer-section .footer-logo { filter: brightness(0) invert(1); }

/* Content-level <footer> elements must not inherit the site-footer chrome. */
main footer:not(.footer-section) {
    background: none !important;
    padding: 0 !important;
    margin-top: 0;
}
main footer:not(.footer-section) img { max-height: none; filter: none !important; }

/* --------------------------------------------------------------------------
   6. Components the reference has no markup for
   -------------------------------------------------------------------------- */
.event-list { border-top: 1px solid var(--line); }
.event-list article {
    display: grid;
    grid-template-columns: 150px 1fr auto;
    gap: 28px;
    padding: 26px 0;
    border-bottom: 1px solid var(--line);
    align-items: center;
}
.event-list .event-date { font-family: var(--display); font-size: 1.45rem; line-height: 1.15; }
.event-list .event-date span {
    display: block; font-family: var(--sans); font-size: .64rem;
    text-transform: uppercase; letter-spacing: .14em; color: var(--gold-deep); margin-bottom: 6px;
}
.event-list h3 { font-family: var(--display); font-weight: 400; font-size: 1.4rem; margin: 0 0 6px; }
.event-list p { margin: 0; color: var(--muted); font-size: .82rem; }

.media-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}
.media-grid article {
    display: flex; flex-direction: column;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.media-grid .media-thumb { aspect-ratio: 16 / 10; overflow: hidden; background: var(--cream); }
.media-grid .media-thumb img { width: 100%; height: 100%; object-fit: cover; font-size: .75rem; color: var(--muted); }
.media-grid .media-body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; align-items: flex-start; }
.media-grid h3 { font-family: var(--display); font-weight: 400; font-size: 1.25rem; margin: 0; }
.media-grid .media-meta { color: var(--muted); font-size: .74rem; margin-top: auto; }

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}
.testimonial-grid blockquote {
    margin: 0; padding: 30px; display: flex; flex-direction: column; min-height: 260px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.testimonial-grid blockquote p { font-family: var(--display); font-size: 1.15rem; line-height: 1.55; margin: 0 0 22px; }
.testimonial-grid .attribution { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.testimonial-grid .attribution img { width: 44px; height: 44px; object-fit: cover; border-radius: 50%; font-size: .7rem; }
.testimonial-grid .who b { display: block; font-weight: 500; font-size: .88rem; }
.testimonial-grid .who span { color: var(--muted); font-size: .74rem; }

/* Partner tiles reuse the reference .partner-grid; these fill the gaps. */
.partner-grid .partner-logo { height: 58px; display: flex; align-items: center; }
.partner-grid .partner-logo img { max-height: 54px; max-width: 130px; object-fit: contain; font-size: .75rem; color: var(--muted); }
.partner-grid .partner-meta { margin-top: auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* Reference portraits carry initials; ours may carry a photo. */
.portrait img { width: 100%; height: 100%; object-fit: cover; font-size: .8rem; color: var(--muted); }
.people-grid a { text-decoration: none; color: inherit; display: block; }

.section-heading > p { margin-bottom: 4px; }

@media (max-width: 1000px) {
    .media-grid, .testimonial-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
    .media-grid, .testimonial-grid { grid-template-columns: 1fr; }
    .event-list article { grid-template-columns: 1fr; gap: 14px; }
    .event-list .event-date { display: flex; align-items: baseline; gap: 10px; font-size: 1.2rem; }
    .event-list .event-date span { margin: 0; }
}

/* --------------------------------------------------------------------------
   7. Quiet the legacy decorative layers
   -------------------------------------------------------------------------- */
.foundation-background,
.publication-background-icons,
.event-background-icons,
.testimonial-background,
.puzzle-background,
.jigsaw-puzzle,
.diverse-hands,
.hand-connections,
.collaboration-particles,
.ai-discovery-visualization,
.map-background-icons,
.scientist-collaboration-group { display: none !important; }

.hero-section { background: var(--forest) !important; color: var(--white); }
.hero-section::before, .hero-section::after { display: none !important; }
.hero-section h1, .hero-section h2 { color: var(--white); }

#neuralCanvas { opacity: .3; }

/* Our proof bar carries six figures; the reference grid assumes five. */
.proof { grid-template-columns: 1.4fr repeat(6, 1fr); }
.publication-list .pub-authors { color: var(--muted); font-size: .82rem; margin-top: 8px; }
.publication-list .pub-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

@media (max-width: 1000px) { .proof { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .proof { grid-template-columns: 1fr 1fr; } }

/* --------------------------------------------------------------------------
   8. Headings inside dark surfaces
   The heading colour set in section 2 beats the colour inherited from
   Bootstrap's .text-white, which left dark headings on dark grounds.
   -------------------------------------------------------------------------- */
.text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6,
.text-white .h1, .text-white .h2, .text-white .h3, .text-white .h4, .text-white .h5, .text-white .h6,
.text-white .display-1, .text-white .display-2, .text-white .display-3,
.text-white .display-4, .text-white .display-5, .text-white .display-6,
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4,
.on-forest h1, .on-forest h2, .on-forest h3, .on-forest h4 { color: inherit; }

.text-white .lead, .text-white .text-muted { color: rgba(255, 253, 248, .68) !important; }

/* --------------------------------------------------------------------------
   9. Shared page header -> the reference inner-hero
   `page-hero-section` is the page-header pattern used across the inner
   templates, so styling it here restyles all of them at once.
   -------------------------------------------------------------------------- */
.page-hero-section,
.donate-hero-section,
.startup-hero-section,
.error-hero-section {
    background: var(--forest) !important;
    color: var(--white);
    padding: clamp(64px, 9vw, 100px) 0 clamp(52px, 7vw, 78px) !important;
    position: relative;
    overflow: hidden;
}

/* The reference inner-hero's quiet orbital motif. */
.page-hero-section::after,
.donate-hero-section::after,
.startup-hero-section::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border: 1px solid rgba(221, 196, 147, .25);
    border-radius: 50%;
    right: -110px;
    top: -170px;
    box-shadow: 0 0 0 70px rgba(221, 196, 147, .035), 0 0 0 140px rgba(221, 196, 147, .02);
    pointer-events: none;
}

.page-hero-section > .container,
.donate-hero-section > .container,
.startup-hero-section > .container,
.error-hero-section > .container { position: relative; z-index: 2; }

/* The reference inner-hero is left-aligned and full measure. */
.page-hero-section .text-center,
.donate-hero-section .text-center,
.startup-hero-section .text-center { text-align: left !important; }

.page-hero-section [class*="col-"],
.donate-hero-section [class*="col-"],
.startup-hero-section [class*="col-"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100%;
    flex: 0 0 100%;
}

.page-hero-section h1,
.donate-hero-section h1,
.startup-hero-section h1,
.error-hero-section h1 {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(2.9rem, 6vw, 5.6rem);
    line-height: .98;
    letter-spacing: -.045em;
    margin: 0;
    max-width: 950px;
    color: var(--white);
}

.page-hero-section > .container > .row > [class*="col-"] > p,
.page-hero-section .lead,
.donate-hero-section .lead,
.startup-hero-section .lead {
    color: rgba(255, 255, 255, .68) !important;
    font-size: 1.06rem;
    max-width: 710px;
    margin: 26px 0 0;
}

.page-hero-section .badge { background: transparent !important; color: var(--gold-light) !important; box-shadow: inset 0 0 0 1px rgba(221, 196, 147, .5); }
.page-hero-section .breadcrumb { margin-bottom: 26px; }
.page-hero-section .breadcrumb a, .page-hero-section .breadcrumb-item a { color: var(--gold-light); text-decoration: none; }
.page-hero-section .breadcrumb-item, .page-hero-section .breadcrumb-item.active { color: rgba(255, 255, 255, .55); }
.page-hero-section .btn-light { background: var(--gold); border-color: var(--gold); color: var(--forest); }

/* Inner page body rhythm to match the reference's .inner-section. */
main > section.py-5 { padding-top: clamp(56px, 6vw, 86px) !important; padding-bottom: clamp(56px, 6vw, 86px) !important; }

/* --------------------------------------------------------------------------
   10. Inner-page adjustments
   -------------------------------------------------------------------------- */
/* Rich-text objectives rendered where the reference used a numbered grid. */
.objective-prose ul, .objective-prose ol { list-style: none; padding: 0; margin: 40px 0 0; counter-reset: obj; }
.objective-prose li {
    counter-increment: obj;
    border-top: 1px solid var(--line);
    padding: 24px 0 24px 62px;
    position: relative;
    color: var(--muted);
}
.objective-prose li:last-child { border-bottom: 1px solid var(--line); }
.objective-prose li::before {
    content: counter(obj, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 24px;
    font-family: var(--display);
    color: var(--gold-deep);
    font-size: 1.05rem;
}
.objective-prose li strong, .objective-prose li b {
    display: block;
    font-family: var(--display);
    font-weight: 400;
    font-size: 1.35rem;
    color: var(--ink);
    margin-bottom: 6px;
}

/* Dark inner sections. */
.inner-section.dark .prose, .light-prose { color: rgba(255, 255, 255, .68); }
.inner-section.dark .prose .lead, .light-prose .lead { color: var(--white); }
.inner-section.dark h2, .inner-section.dark h3 { color: var(--white); }

/* The inner-hero's own breadcrumbs (element, not Bootstrap's .breadcrumb). */
.inner-hero .breadcrumbs span { color: rgba(255, 255, 255, .55); }

/* team-card portraits may hold a photo rather than initials. */
.team-card .portrait { overflow: hidden; }
.team-card .portrait img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.team-card { display: flex; flex-direction: column; }
.team-card h3 { margin: 6px 0 8px; }

.content-card { display: block; color: inherit; }
.page-cta .button { text-decoration: none; }

/* Dark inner surfaces: make the inherited colour explicit. */
.inner-hero, .inner-hero h1, .inner-hero h2 { color: var(--white); }
.inner-section.dark, .inner-section.dark h2, .inner-section.dark h3 { color: var(--white); }
.quote-band, .quote-band h2, .quote-band blockquote { color: var(--forest); }
.page-cta, .page-cta h2 { color: var(--forest); }

/* --------------------------------------------------------------------------
   11. Long-form content on detail pages
   Matches the reference's .article-body reading measure and rhythm.
   -------------------------------------------------------------------------- */
.news-content,
.research-area-content,
.publication-content,
.impact-content,
.startup-content,
.vacancy-content,
.course-content,
.resource-content,
.diversity-content,
.prose,
.content {
    font-size: 1.02rem;
    line-height: 1.8;
    color: var(--muted);
}

.news-content h2, .research-area-content h2, .content h2, .prose h2,
.impact-content h2, .course-content h2, .resource-content h2 {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(1.6rem, 2.6vw, 2rem);
    line-height: 1.25;
    color: var(--ink);
    margin: 44px 0 16px;
}

.news-content h3, .research-area-content h3, .content h3, .prose h3,
.impact-content h3, .course-content h3, .resource-content h3 {
    font-family: var(--display);
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.3;
    color: var(--ink);
    margin: 32px 0 12px;
}

.news-content p, .research-area-content p, .content p, .prose p { margin: 0 0 22px; }
.news-content ul, .research-area-content ul, .content ul, .prose ul { margin: 0 0 26px; padding-left: 22px; }
.news-content li, .research-area-content li, .content li, .prose li { margin: 8px 0; }
.news-content a, .research-area-content a, .content a, .prose a { color: var(--gold-deep); }
.news-content strong, .content strong, .prose strong { color: var(--ink); font-weight: 600; }
.news-content blockquote, .content blockquote, .prose blockquote {
    border-left: 2px solid var(--gold);
    padding-left: 24px;
    margin: 30px 0;
    font-family: var(--display);
    font-size: 1.3rem;
    line-height: 1.5;
    color: var(--ink);
}

/* Sidebars on detail pages read as hairline panels, not floating cards. */
.detail-sidebar .card, aside .card { border: 1px solid var(--line); box-shadow: none; }
.detail-sidebar .card:hover, aside .card:hover { transform: none; box-shadow: none; }

/* List pages: the reference's listing-card row. */
.listing-card { align-items: start; }

/* Publication catalogue rows carry links and a byline. */
.publication-catalog h3 a { color: inherit; text-decoration: none; }
.publication-catalog h3 a:hover { color: var(--gold-deep); }
.publication-catalog .meta { margin: 0 0 8px; }
.publication-catalog .pub-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.filterbar button, .filterbar .button { min-height: 46px; }
.filterbar .text-link { align-self: center; }
.team-card .team-links { margin: auto 0 0; padding-top: 16px; }
.team-card p { margin: 0 0 10px; }

/* --------------------------------------------------------------------------
   12. Search
   The reference styles .search-button / .search-dialog; these adapt the
   button to sit inside the Bootstrap navbar.
   -------------------------------------------------------------------------- */
.compact-navbar .nav-cta-wrap .search-button {
    background: none;
    border: 0;
    color: var(--ink) !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--sans);
    font-size: .8rem;
    font-weight: 400;
    padding: .6rem .85rem !important;
    cursor: pointer;
}
.compact-navbar .nav-cta-wrap .search-button:hover { color: var(--gold-deep) !important; }
.compact-navbar .nav-cta-wrap .search-button span { font-size: 1.05rem; line-height: 1; }

.search-dialog .search-results a { color: var(--ink); }
.search-dialog .search-results a:hover { background: var(--cream); }
.search-dialog .search-results b { font-weight: 400; }
.search-dialog .search-results p { color: var(--muted); margin: 8px 0 0; }
.search-dialog .search-top button { color: var(--ink); line-height: 1; }
.search-field span { color: var(--gold-deep); font-size: 1.1rem; }

/* Media section sits on the cream ground, like .knowledge. */
.section.media { background: var(--cream); }
.media-grid .media-type {
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--gold-deep);
}

/* Editorial news, event, and article patterns shared by the subpages. */
.news-catalog article { grid-template-columns: 120px minmax(0, 1fr); }
.news-catalog .news-date { color: var(--gold-deep); display: flex; flex-direction: column; }
.news-catalog .news-date strong {
    font: 400 2.5rem/1 var(--display);
    letter-spacing: -.04em;
}
.news-catalog .news-date span {
    margin-top: 8px;
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .14em;
}
.news-catalog .text-link { display: inline-block; margin-top: 16px; }
.editorial-search input { flex: 1 1 320px; }
.editorial-empty {
    grid-column: 1 / -1;
    padding: clamp(48px, 7vw, 92px) 0;
    border-bottom: 1px solid var(--line);
}
.editorial-empty h3 {
    font: 400 clamp(1.8rem, 3vw, 2.8rem)/1.15 var(--display);
    color: var(--ink);
    margin: 15px 0 10px;
}
.editorial-empty p { color: var(--muted); max-width: 580px; }
.media-empty { padding: 42px; min-height: 260px; }
.editorial-pagination {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 25px;
    align-items: center;
    border-top: 1px solid var(--line);
    padding-top: 24px;
    margin-top: 40px;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .11em;
}
.editorial-pagination a { color: var(--gold-deep); text-decoration: none; }
.editorial-pagination a:last-child { text-align: right; }
.editorial-pagination span { color: var(--muted); }
.editorial-event-list h3 a { color: inherit; text-decoration: none; }
.editorial-event-list h3 a:hover { color: var(--gold-deep); }
.editorial-event-list .meta { display: block; margin-bottom: 8px; }

.article-hero { padding-bottom: 90px; }
.article-hero h1 { max-width: 1120px; font-size: clamp(3.1rem, 6.2vw, 6.4rem); }
.article-hero .eyebrow { color: var(--gold-light); margin: 0 0 18px; position: relative; z-index: 2; }
.article-hero .article-date { font-size: .72rem; text-transform: uppercase; letter-spacing: .13em; }
.article-layout {
    display: grid;
    grid-template-columns: minmax(0, 760px) minmax(240px, 330px);
    justify-content: space-between;
    gap: clamp(55px, 8vw, 120px);
    align-items: start;
}
.article-content { color: var(--muted); }
.article-content > p:first-child { font: 400 1.45rem/1.55 var(--display); color: var(--ink); }
.article-content img { max-width: 100%; height: auto; margin: 24px 0; }
.article-footer {
    display: flex;
    justify-content: space-between;
    gap: 25px;
    border-top: 1px solid var(--line);
    margin-top: 55px;
    padding-top: 20px !important;
    color: var(--muted);
    font-size: .72rem;
}
.article-aside { position: sticky; top: 120px; border-top: 1px solid var(--line); }
.article-aside > .eyebrow { padding-top: 20px; }
.article-aside > a {
    display: block;
    color: var(--ink);
    text-decoration: none;
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
}
.article-aside time { display: block; color: var(--gold-deep); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 7px; }
.article-aside strong { font: 400 1.05rem/1.35 var(--display); }

.media-thumb:empty {
    background-color: var(--forest);
    background-image:
        radial-gradient(circle at 72% 40%, rgba(221,196,147,.75) 0 2px, transparent 3px),
        radial-gradient(circle at 45% 62%, rgba(121,205,210,.7) 0 3px, transparent 4px),
        radial-gradient(circle at 28% 35%, rgba(255,255,255,.45) 0 2px, transparent 3px),
        linear-gradient(125deg, transparent 35%, rgba(121,205,210,.14) 36%, transparent 37%),
        linear-gradient(25deg, transparent 51%, rgba(221,196,147,.18) 52%, transparent 53%);
}

@media (max-width: 850px) {
    .article-layout { grid-template-columns: 1fr; }
    .article-aside { position: static; }
    .event-list article { grid-template-columns: 95px 1fr; }
    .event-list article > .text-link { grid-column: 2; }
}
@media (max-width: 600px) {
    .news-catalog article { grid-template-columns: 72px minmax(0, 1fr); gap: 20px; }
    .news-catalog .news-date strong { font-size: 2rem; }
    .event-list article { grid-template-columns: 65px minmax(0, 1fr); gap: 18px; }
    .event-list .event-date { font-size: 1.2rem; }
    .article-footer { flex-direction: column; }
    .editorial-pagination { grid-template-columns: 1fr 1fr; }
    .editorial-pagination span { grid-column: 1 / -1; grid-row: 1; }
}