/* ==========================================================================
   North Queens Heritage Society - Complete Stylesheet
   ========================================================================== */

:root {
    --font-heading: 'Cinzel', Georgia, serif;
    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    /* Light Theme Palette */
    --heritage-navy: #0e2238;
    --heritage-navy-dark: #071320;
    --heritage-gold: #c5961e;
    --heritage-gold-hover: #a87f14;
    --heritage-gold-light: #fef8eb;
    --surface-bg: #f8fafc;
    --card-bg: #ffffff;
    --border-subtle: #e2e8f0;
    --heading-color: #0e2238;
    --text-muted-custom: #64748b;
}

[data-bs-theme="dark"] {
    --heritage-navy: #0a1828;
    --heritage-navy-dark: #050d17;
    --heritage-gold: #d8a834;
    --heritage-gold-hover: #e6b847;
    --heritage-gold-light: #242014;
    --surface-bg: #0f1722;
    --card-bg: #182330;
    --border-subtle: #2b394a;
    --heading-color: #f1f5f9;
    --text-muted-custom: #94a3b8;
}

/* Base Styles */
body {
    font-family: var(--font-body);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ==========================================================================
   Horizontal Overflow Guard
   --------------------------------------------------------------------------
   1. Root cause: Bootstrap gutters are applied as negative side margins on
      .row (g-5 = 3rem gutter = -1.5rem each side). Inside .container-fluid
      the horizontal padding is only 0.75rem below the lg breakpoint, so a
      g-5/gx-5 row overhangs the viewport by 12px on each side and creates
      horizontal scroll on phones. Cap the horizontal gutter below lg so it
      never exceeds the container padding. Vertical gutter is untouched, so
      stacked columns keep their generous spacing on mobile.
   2. Safety net: overflow-x: clip on the scroll root stops any future stray
      element from producing a horizontal scrollbar. `clip` is used rather
      than `hidden` because it does not create a scroll container and so
      leaves position: sticky elements (the header) working normally.
   ========================================================================== */
html,
body {
    overflow-x: clip;
    max-width: 100%;
}

@media (max-width: 991.98px) {
    .container-fluid .row.g-5,
    .container-fluid .row.gx-5 {
        --bs-gutter-x: 1.5rem;
    }
}

.cinzel {
    font-family: var(--font-heading);
}

.text-gold {
    color: var(--heritage-gold) !important;
}

.bg-gold {
    background-color: var(--heritage-gold) !important;
}

.text-gold-gradient {
    background: linear-gradient(135deg, #ffe08a 0%, var(--heritage-gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bg-heritage-navy {
    background-color: var(--heritage-navy) !important;
}

.bg-surface {
    background-color: #f0f2f5 !important;
    background-image: 
        repeating-linear-gradient(45deg, rgba(14, 34, 56, 0.03) 0, rgba(14, 34, 56, 0.03) 1px, transparent 0, transparent 18px),
        repeating-linear-gradient(-45deg, rgba(14, 34, 56, 0.03) 0, rgba(14, 34, 56, 0.03) 1px, transparent 0, transparent 18px),
        linear-gradient(180deg, #f7f8fa 0%, #eceef2 100%) !important;
}

.bg-dark-custom {
    background-color: #060e18 !important;
}

.text-white-90 {
    color: rgba(255, 255, 255, 0.92) !important;
}

.tracking-wider {
    letter-spacing: 1.5px;
}

/* ==========================================================================
   1. Museum Top Utility Bar
   ========================================================================== */
.museum-utility-bar {
    background-color: #0d1722 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    font-size: 0.82rem !important;
    color: #cbd5e1 !important;
}

.museum-live-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 6px !important;
    padding: 5px 12px !important;
}

.btn-museum-support {
    background: linear-gradient(135deg, var(--heritage-gold), #aa7d14);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(197, 150, 30, 0.3);
    transition: all 0.25s ease;
}

.btn-museum-support:hover {
    background: linear-gradient(135deg, #d9a930, var(--heritage-gold));
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(197, 150, 30, 0.4);
}

.live-indicator-dot {
    width: 9px !important;
    height: 9px !important;
    background-color: #10b981 !important;
    border-radius: 50% !important;
    display: inline-block !important;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.8) !important;
}

.live-badge-title {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.5px !important;
}

.live-badge-detail {
    color: #94a3b8 !important;
    font-size: 0.8rem !important;
    font-weight: 400 !important;
}

.museum-top-tagline {
    color: #94a3b8 !important;
    font-size: 0.82rem !important;
    font-weight: 400 !important;
}

.museum-top-tagline i {
    color: #94a3b8 !important;
    margin-right: 6px !important;
}

.top-util-link {
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 0.82rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: color 0.2s ease !important;
}

.top-util-link i {
    color: #94a3b8 !important;
    font-size: 0.85rem !important;
}

.top-util-link:hover {
    color: #c5961e !important;
}

.top-util-link:hover i {
    color: #c5961e !important;
}

.top-util-divider {
    width: 1px !important;
    height: 14px !important;
    background-color: rgba(255, 255, 255, 0.25) !important;
    display: inline-block !important;
}

.top-util-fb-btn {
    background-color: #1877f2 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 4px 12px !important;
    border-radius: 4px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
}

.top-util-fb-btn i {
    color: #ffffff !important;
    font-size: 0.85rem !important;
}

.top-util-fb-btn:hover {
    background-color: #1464cc !important;
    color: #ffffff !important;
}

.museum-theme-btn {
    width: 40px !important;
    height: 40px !important;
    background-color: var(--surface-bg) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--heading-color) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.museum-theme-btn:hover {
    color: var(--heritage-gold) !important;
    border-color: var(--heritage-gold) !important;
}

/* ==========================================================================
   2. Museum Main Navbar (Responsive & Mobile Menu Fixes)
   ========================================================================== */
.museum-navbar {
    background-color: #eceef1 !important;
    background-image: 
        repeating-linear-gradient(45deg, rgba(14, 34, 56, 0.035) 0, rgba(14, 34, 56, 0.035) 1px, transparent 0, transparent 16px),
        repeating-linear-gradient(-45deg, rgba(14, 34, 56, 0.035) 0, rgba(14, 34, 56, 0.035) 1px, transparent 0, transparent 16px),
        linear-gradient(180deg, #f8f9fa 0%, #e8ebef 100%) !important;
    border-bottom: 2px solid rgba(197, 150, 30, 0.3) !important;
    transition: all 0.3s ease;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.museum-crest-badge {
    width: 48px;
    height: 48px;
    background: linear-gradient(145deg, #1b3552, #0a1828);
    color: var(--heritage-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.4rem;
    border: 2px solid var(--heritage-gold);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.brand-text-group {
    line-height: 1.15;
}

.museum-brand-main {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: 1px;
    color: var(--heading-color);
}

.museum-brand-sub {
    font-size: 0.68rem;
    letter-spacing: 6.5px;
    font-weight: 700;
    color: var(--heritage-gold);
    /* text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); */
}

.museum-nav-list .museum-nav-link {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.65rem 1.1rem;
    color: var(--heading-color);
    position: relative;
    transition: color 0.25s ease;
}

.museum-nav-list .museum-nav-link:hover,
.museum-nav-list .museum-nav-link.active {
    color: var(--heritage-gold) !important;
}

.museum-nav-list .dropdown-toggle::after {
    margin-left: 0.35em;
    vertical-align: 0.2em;
    border-top: 0.35em solid currentColor;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}

/* DESKTOP VIEW ONLY (1200px and up): Underline Indicator & Dropdown border-top */
@media (min-width: 1200px) {
    .museum-nav-list .museum-nav-link::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 3px;
        background-color: var(--heritage-gold);
        transition: width 0.25s ease, left 0.25s ease;
        border-radius: 2px;
    }

    .museum-nav-list .museum-nav-link:hover::before,
    .museum-nav-list .museum-nav-link.active::before {
        width: 70%;
        left: 15%;
    }

    .museum-dropdown-menu {
        border-top: 3px solid var(--heritage-gold) !important;
        border-radius: 8px;
        background-color: var(--card-bg);
        padding: 0.5rem 0;
    }
}

/* MOBILE VIEW ONLY (<1200px): Clean text alignment, NO underlines, NO border-top */
@media (max-width: 1199.98px) {
    .museum-nav-list .museum-nav-link::before {
        display: none !important; /* Eliminates long horizontal lines on mobile */
    }

    .museum-nav-list .museum-nav-link {
        padding: 0.75rem 0.5rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .museum-dropdown-menu {
        border-top: none !important; /* Eliminates border-top on mobile */
        border: none !important;
        background-color: transparent !important;
        box-shadow: none !important;
        padding-left: 0.75rem;
        padding-top: 0.25rem;
        padding-bottom: 0.5rem;
    }

    .museum-dropdown-menu .dropdown-item {
        padding: 0.5rem 0.5rem;
    }
}

.museum-dropdown-menu .dropdown-item {
    /* Matches the Oswald top-level nav. Left in sentence case rather than
       caps: labels like "Our Volunteers, Staff & Leadership" get unwieldy set
       in capitals, and the submenu should read quieter than the bar above it.
       Weight 400 against the bar's 500 does that without changing family. */
    font-family: 'Oswald', 'Arial Narrow', var(--font-body);
    font-weight: 400;
    font-size: 1.1rem;
    letter-spacing: 0.015em;
    padding: 0.6rem 1.25rem;
    transition: all 0.2s ease;
}

/* Fixed icon column so every label starts on the same vertical line,
   whatever the glyph's natural width (a landmark is much wider than a
   shield). FA6 icons are inline-block, so width applies directly. */
.museum-dropdown-menu .dropdown-item i {
    width: 1.05rem;
    text-align: center;
}

/* The hover indent re-splits the item's existing 2.5rem of horizontal padding
   (1.5 + 1.0) rather than adding to it, so a long label such as "Our
   Volunteers, Staff & Leadership" cannot be pushed onto a second line. */
.museum-dropdown-menu .dropdown-item:hover {
    background-color: var(--heritage-gold-light);
    color: var(--heritage-gold);
    padding-left: 1.5rem;
    padding-right: 1rem;
}

/* Current page in the About Us dropdown. Bootstrap's own .dropdown-item.active
   paints itself with the primary blue, so it is overridden here. */
.museum-dropdown-menu .dropdown-item.active,
.museum-dropdown-menu .dropdown-item.active:hover,
.museum-dropdown-menu .dropdown-item.active:focus {
    background-color: var(--heritage-gold-light);
    color: var(--heritage-gold);
    font-weight: 500;
    box-shadow: inset 3px 0 0 var(--heritage-gold);
}

@media (min-width: 1200px) {
    .museum-dropdown-menu .dropdown-item {
        white-space: nowrap;
    }
}

/* Museum Visitor Status Capsule on Header Right */
.museum-hours-capsule {
    background-color: var(--surface-bg);
    border: 1px solid var(--border-subtle);
    padding: 0.45rem 0.95rem;
    border-radius: 8px;
}

.capsule-icon {
    color: var(--heritage-gold);
    font-size: 1.15rem;
}

.capsule-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: left;
}

.capsule-status {
    font-size: 0.72rem;
    letter-spacing: 0.8px;
}

.capsule-detail {
    font-size: 0.76rem;
    color: var(--text-muted-custom);
    font-weight: 500;
}

/* ==========================================================================
   3. Centered Monumental Hero Section
   ========================================================================= */
.hero-slide {
    height: 84vh;
    min-height: 580px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
}

.hero-content-box {
    text-shadow: 0 3px 15px rgba(0, 0, 0, 0.7);
}

.hero-emblem-badge {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: rgba(14, 34, 56, 0.75);
    border: 2px solid var(--heritage-gold);
    color: var(--heritage-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(6px);
}

.hero-eyebrow-line {
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--heritage-gold);
    text-transform: uppercase;
}

.hero-flourish-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 260px;
}

.flourish-wing {
    flex-grow: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--heritage-gold));
}

.hero-flourish-divider .flourish-wing:last-child {
    background: linear-gradient(90deg, var(--heritage-gold), transparent);
}

.hero-narrative-lead {
    font-size: 1.22rem;
    line-height: 1.65;
    max-width: 780px;
}

.scroll-cue-link {
    display: inline-block;
    transition: transform 0.25s ease;
}

.scroll-cue-link:hover {
    transform: translateY(3px);
}

.animate-bounce {
    animation: bounceChevron 2s infinite ease-in-out;
}

@keyframes bounceChevron {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(6px); }
    60% { transform: translateY(3px); }
}

/* ==========================================================================
   4. Quick Info Bar
   ========================================================================== */
.quick-info-bar {
    background-color: #f0f2f5 !important;
    background-image: 
        repeating-linear-gradient(45deg, rgba(14, 34, 56, 0.03) 0, rgba(14, 34, 56, 0.03) 1px, transparent 0, transparent 18px),
        repeating-linear-gradient(-45deg, rgba(14, 34, 56, 0.03) 0, rgba(14, 34, 56, 0.03) 1px, transparent 0, transparent 18px),
        linear-gradient(180deg, #f7f8fa 0%, #ebedf1 100%) !important;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.quick-info-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-subtle);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-align: left;
}

.quick-info-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.info-icon-box {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--heritage-gold-light), #fbf1d8);
    color: #8c6508;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    border: 1px solid rgba(197, 150, 30, 0.35);
}

[data-bs-theme="dark"] .info-icon-box {
    background: linear-gradient(135deg, #2b2210, #191409);
    color: var(--heritage-gold);
    border-color: rgba(216, 168, 52, 0.4);
}

.info-card-text {
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.info-card-text .info-title {
    color: var(--heading-color);
    font-size: 1.05rem;
    line-height: 1.25;
}

.info-card-text .info-subtext {
    color: var(--text-muted-custom);
    font-size: 0.84rem;
}

/* ==========================================================================
   5. Buttons & Cards
   ========================================================================== */
.btn-heritage-gold {
    background-color: var(--heritage-gold);
    color: #ffffff;
    border: 1px solid var(--heritage-gold);
    transition: all 0.25s ease;
}

.btn-heritage-gold:hover {
    background-color: var(--heritage-gold-hover);
    border-color: var(--heritage-gold-hover);
    color: #ffffff;
    box-shadow: 0 6px 15px rgba(197, 150, 30, 0.35);
}

.btn-outline-gold {
    color: var(--heritage-gold);
    border-color: var(--heritage-gold);
}

.btn-outline-gold:hover {
    background-color: var(--heritage-gold);
    color: #ffffff;
}

.exhibit-card {
    background-color: var(--card-bg);
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.exhibit-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.1) !important;
}

.card-img-wrapper {
    position: relative;
    height: 230px;
    overflow: hidden;
}

.card-img-wrapper img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.exhibit-card:hover .card-img-wrapper img,
.hover-zoom:hover {
    transform: scale(1.05);
}

.exhibit-card .card-img-wrapper img,
.hover-zoom {
    transition: transform 0.4s ease;
}

.event-strip-card {
    background-color: var(--card-bg);
    border-radius: 12px;
    transition: transform 0.25s ease;
}

.event-strip-card:hover {
    transform: translateY(-3px);
}

.floating-badge-box {
    position: absolute;
    bottom: -20px;
    right: 20px;
    border: 2px solid var(--heritage-gold);
}

.contact-icon-badge {
    width: 42px;
    height: 42px;
    background-color: var(--surface-bg);
    color: var(--heritage-gold);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem;
}

.hover-gold:hover {
    color: var(--heritage-gold) !important;
}

.charity-status-badge {
    display: inline-flex;
    align-items: center;
    background-color: #d4a326;
    color: #071320 !important;
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    padding: 0.4rem 0.9rem;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    text-transform: uppercase;
}

/* ==========================================================================
   6. Facebook Feed Height Matching Left Column
   ========================================================================== */
.fb-feed-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.fb-container-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 550px;
    background-color: #ffffff;
}

[data-bs-theme="dark"] .fb-container-wrapper {
    background-color: #182330;
}

@media (min-width: 992px) {
    .fb-container-wrapper {
        min-height: 1200px !important;
    }
    .fb-container-wrapper iframe {
        height: 1200px !important;
        min-height: 1200px !important;
        width: 100% !important;
        flex-grow: 1;
    }
}

/* ==========================================================================
   7. Footer & Scroll Animations
   ========================================================================== */
.footer-heading {
    letter-spacing: 1px;
}

.footer-links li {
    margin-bottom: 0.5rem;
}

.footer-links a {
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
    display: inline-block;
}

.footer-links a:hover {
    color: var(--heritage-gold);
    transform: translateX(4px);
}

.footer-social-btn {
    width: 38px;
    height: 38px;
    background-color: #1a2433;
    color: #e2e8f0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.25s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-social-btn:hover {
    background-color: var(--heritage-gold);
    color: #071320;
    transform: translateY(-3px);
}

#btnBackToTop {
    position: fixed;
    bottom: 25px;
    right: 25px;
    display: none;
    z-index: 999;
    width: 45px;
    height: 45px;
}

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--delay, 0ms);
}

.reveal-on-scroll.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   Light Grey Pattern & Gradient Additions
   ========================================================================== */

/* Hero section light grey background with subtle pattern */
.hero-section {
    background-color: #f0f2f5;
    background-image: 
        radial-gradient(#d3d8df 0.8px, transparent 0.8px), 
        linear-gradient(180deg, #f7f8fa 0%, #ebedf1 100%);
    background-size: 18px 18px, 100% 100%;
}

/* Mobile navbarContent pattern & gradient */
@media (max-width: 1199.98px) {
    #navbarContent {
        background-color: #eceef1;
        background-image: 
            radial-gradient(rgba(14, 34, 56, 0.04) 1px, transparent 1px),
            linear-gradient(180deg, #f8f9fa 0%, #e8ebef 100%);
        background-size: 14px 14px, 100% 100%;
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
        padding: 1rem;
        margin-top: 0.5rem;
    }
}

/* Dark mode overrides for navbar, hero, and surface */
[data-bs-theme="dark"] .museum-navbar {
    background-color: #121b26 !important;
    background-image: 
        radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(180deg, #182330 0%, #121b26 100%) !important;
    background-size: 14px 14px, 100% 100% !important;
}

[data-bs-theme="dark"] .bg-surface,
[data-bs-theme="dark"] .hero-section,
[data-bs-theme="dark"] .quick-info-bar {
    background-color: #0e1620 !important;
    background-image: 
        radial-gradient(rgba(255, 255, 255, 0.04) 0.8px, transparent 0.8px), 
        linear-gradient(180deg, #131d2a 0%, #0d141e 100%) !important;
    background-size: 18px 18px, 100% 100% !important;
}

@media (max-width: 1199.98px) {
    [data-bs-theme="dark"] #navbarContent {
        background-color: #121b26;
        background-image: 
            radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
            linear-gradient(180deg, #182330 0%, #121b26 100%);
        background-size: 14px 14px, 100% 100%;
    }
}

/* ==========================================================================
   Archival Diamond Weave Pattern (Zero Dots)
   ========================================================================== */

/* Hero section light grey background with diamond weave */
.hero-section {
    background-color: #f0f2f5;
    background-image: 
        repeating-linear-gradient(45deg, rgba(14, 34, 56, 0.03) 0, rgba(14, 34, 56, 0.03) 1px, transparent 0, transparent 18px),
        repeating-linear-gradient(-45deg, rgba(14, 34, 56, 0.03) 0, rgba(14, 34, 56, 0.03) 1px, transparent 0, transparent 18px),
        linear-gradient(180deg, #f7f8fa 0%, #ebedf1 100%);
}

/* Mobile navbarContent diamond weave & gradient */
@media (max-width: 1199.98px) {
    #navbarContent {
        background-color: #eceef1;
        background-image: 
            repeating-linear-gradient(45deg, rgba(14, 34, 56, 0.035) 0, rgba(14, 34, 56, 0.035) 1px, transparent 0, transparent 16px),
            repeating-linear-gradient(-45deg, rgba(14, 34, 56, 0.035) 0, rgba(14, 34, 56, 0.035) 1px, transparent 0, transparent 16px),
            linear-gradient(180deg, #f8f9fa 0%, #e8ebef 100%);
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
        padding: 1rem;
        margin-top: 0.5rem;
    }
}

/* Dark mode variations of the diamond weave */
[data-bs-theme="dark"] .museum-navbar {
    background-color: #121b26 !important;
    background-image: 
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0, rgba(255, 255, 255, 0.03) 1px, transparent 0, transparent 16px),
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.03) 0, rgba(255, 255, 255, 0.03) 1px, transparent 0, transparent 16px),
        linear-gradient(180deg, #182330 0%, #121b26 100%) !important;
}

[data-bs-theme="dark"] .bg-surface,
[data-bs-theme="dark"] .hero-section,
[data-bs-theme="dark"] .quick-info-bar {
    background-color: #0e1620 !important;
    background-image: 
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0, rgba(255, 255, 255, 0.03) 1px, transparent 0, transparent 18px),
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.03) 0, rgba(255, 255, 255, 0.03) 1px, transparent 0, transparent 18px),
        linear-gradient(180deg, #131d2a 0%, #0d141e 100%) !important;
}

@media (max-width: 1199.98px) {
    [data-bs-theme="dark"] #navbarContent {
        background-color: #121b26;
        background-image: 
            repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0, rgba(255, 255, 255, 0.03) 1px, transparent 0, transparent 16px),
            repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.03) 0, rgba(255, 255, 255, 0.03) 1px, transparent 0, transparent 16px),
            linear-gradient(180deg, #182330 0%, #121b26 100%);
    }
}


/* ==========================================================================
   Mobile Hero Layout (phones only, max-width 767.98px)
   --------------------------------------------------------------------------
   The hero copy was vertically centred inside the slide. On phones the copy
   is nearly as tall as the slide itself, so the last line (scroll cue / CTA)
   ended up hard against the bottom edge - and on shorter or narrower phones
   it overflowed and was clipped by the section's overflow:hidden.

   Below 768px the copy is anchored to the TOP of the slide with a small
   amount of breathing space, and the type scale is eased back just enough
   that even the tallest slide fits the box on a 320px-wide phone. Slide
   height stays uniform across all slides, so the auto-rotating carousel
   never shifts the page below it.

   Heights are also expressed in svh (small viewport height) with a vh
   fallback, so the slide matches the *visible* viewport on mobile Chrome
   rather than the taller address-bar-hidden viewport.
   ========================================================================== */
@media (max-width: 767.98px) {

.header-one {
    font-size: calc(1.175rem + 1.5vw) !important;
}

    /* --- Anchor the copy to the top of the slide --- */
    .hero-slide {
        height: 84svh;
        min-height: 540px;
        align-items: flex-start;
    }

    .hero-slide > .container {
        align-items: flex-start !important;
        padding-top: 4.5rem;
        padding-bottom: 1.25rem;
    }

    /* --- Ease back the type scale so the tallest slide always fits --- */
    .hero-emblem-badge {
        width: 46px;
        height: 46px;
        font-size: 1.1rem;
        margin-bottom: 0.75rem !important;
    }

    .hero-eyebrow-line {
        font-size: 0.72rem;
        letter-spacing: 1.5px;
    }

    .hero-content-box h1,
    .hero-content-box h2 {
        font-size: clamp(1.8rem, 8.5vw, 2.6rem);
        line-height: 1.15;
        margin-bottom: 0.75rem !important;
    }

    .hero-flourish-divider {
        width: 200px;
        margin-bottom: 0.9rem !important;
    }

    .hero-narrative-lead {
        font-size: clamp(0.95rem, 4.3vw, 1.15rem);
        line-height: 1.55;
        margin-bottom: 1rem !important;
    }

    .hero-scroll-cue {
        padding-top: 0 !important;
    }
}


/* ==========================================================================
   TASK 2 - Hero Carousel Prev / Next Controls
   --------------------------------------------------------------------------
   Bootstrap ships a flat white SVG chevron on a plain black square stretched
   across 15% of the slide. These are replaced with a hairline ring and a crisp
   Font Awesome chevron that reads over the photograph without masking any of
   the hero copy:

     - The resting state is FULLY TRANSPARENT. Only the ring and the chevron
       are drawn, so no headline is ever covered.
     - The gold fill is a momentary press state (:active), plus a hover state
       on real pointer devices only. Touch browsers keep :hover alive after a
       tap - that is why the control stayed lit up after changing slide - so
       the fill is fenced behind (hover: hover) and :focus is reset explicitly.
       The button therefore returns to transparent the instant the slide moves.
     - Keyboard users still get a clear indicator, via :focus-visible.
     - On phones the two controls drop to the bottom corners, level with the
       carousel indicators, where there is no text to obstruct.
   ========================================================================== */
#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next {
    width: auto;
    padding: 0 clamp(0.5rem, 2.5vw, 2.25rem);
    opacity: 1;
    z-index: 5;
    transition: none;
}

#heroCarousel .carousel-control-prev-icon,
#heroCarousel .carousel-control-next-icon {
    width: 46px;
    height: 46px;
    padding: 0 !important;
    background-image: none !important;
    background-color: transparent !important;
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    border-radius: 50% !important;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, border-color 0.2s ease,
                transform 0.2s ease;
}

#heroCarousel .carousel-control-prev-icon::before,
#heroCarousel .carousel-control-next-icon::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1.2rem;
    line-height: 1;
    color: #ffffff;
    /* keeps the chevron legible against a pale patch of photograph */
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

#heroCarousel .carousel-control-prev-icon::before {
    content: "\f104";           /* fa-angle-left  */
    margin-right: 2px;
}

#heroCarousel .carousel-control-next-icon::before {
    content: "\f105";           /* fa-angle-right */
    margin-left: 2px;
}

/* --------------------------------------------------------------------------
   Reset any lingering focus state. Clicking a control leaves :focus on the
   button; without this the gold fill would stay on top of the hero copy long
   after the slide had changed.
   -------------------------------------------------------------------------- */
#heroCarousel .carousel-control-prev:focus,
#heroCarousel .carousel-control-next:focus {
    outline: none;
    box-shadow: none;
    opacity: 1;
}

#heroCarousel .carousel-control-prev:focus .carousel-control-prev-icon,
#heroCarousel .carousel-control-next:focus .carousel-control-next-icon {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.6);
    transform: none;
}

#heroCarousel .carousel-control-prev:focus .carousel-control-prev-icon::before,
#heroCarousel .carousel-control-next:focus .carousel-control-next-icon::before {
    color: #ffffff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}

/* --------------------------------------------------------------------------
   Hover fill - mouse and trackpad only, never touch (sticky :hover)
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
    #heroCarousel .carousel-control-prev:hover .carousel-control-prev-icon,
    #heroCarousel .carousel-control-next:hover .carousel-control-next-icon {
        background-color: var(--heritage-gold) !important;
        border-color: #ffffff;
        transform: scale(1.07);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    }

    #heroCarousel .carousel-control-prev:hover .carousel-control-prev-icon::before,
    #heroCarousel .carousel-control-next:hover .carousel-control-next-icon::before {
        color: #071320;
        text-shadow: none;
    }
}

/* --------------------------------------------------------------------------
   Press feedback - fires on every device and releases as soon as the finger
   or mouse button lifts, so the fill never outlives the slide change.
   Declared AFTER the :focus reset so a press still shows through.
   -------------------------------------------------------------------------- */
#heroCarousel .carousel-control-prev:active .carousel-control-prev-icon,
#heroCarousel .carousel-control-next:active .carousel-control-next-icon {
    background-color: var(--heritage-gold) !important;
    border-color: #ffffff;
    transform: scale(0.93);
}

#heroCarousel .carousel-control-prev:active .carousel-control-prev-icon::before,
#heroCarousel .carousel-control-next:active .carousel-control-next-icon::before {
    color: #071320;
    text-shadow: none;
}

/* --------------------------------------------------------------------------
   Keyboard focus ring (never triggered by a mouse or touch click)
   -------------------------------------------------------------------------- */
#heroCarousel .carousel-control-prev:focus-visible .carousel-control-prev-icon,
#heroCarousel .carousel-control-next:focus-visible .carousel-control-next-icon {
    outline: 2px solid var(--heritage-gold);
    outline-offset: 3px;
    border-color: #ffffff;
}

/* --------------------------------------------------------------------------
   Phones - move the controls out of the headline entirely, down to the
   bottom corners on the same line as the carousel indicators.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    #heroCarousel .carousel-control-prev,
    #heroCarousel .carousel-control-next {
        align-items: flex-end;
        padding: 0 0.4rem 0.55rem;
    }

    #heroCarousel .carousel-control-prev-icon,
    #heroCarousel .carousel-control-next-icon {
        width: 38px;
        height: 38px;
        border-width: 1.5px;
    }

    #heroCarousel .carousel-control-prev-icon::before,
    #heroCarousel .carousel-control-next-icon::before {
        font-size: 0.98rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    #heroCarousel .carousel-control-prev-icon,
    #heroCarousel .carousel-control-next-icon {
        transition: none;
    }
}


/* ==========================================================================
   TASK 3 - In-page Anchor Offset for the Sticky Navbar
   --------------------------------------------------------------------------
   #quick-overview (and every other in-page target) used to land underneath
   the sticky navbar, and because the navbar is a different height on desktop
   than on a phone the two viewports stopped in two different places.
   --nav-offset is measured from the live navbar by js/main.js and refreshed
   on resize / orientation change; the literal below is only the first-paint
   fallback for the moment before that script runs.
   ========================================================================== */
html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--nav-offset, 88px);
}

[id] {
    scroll-margin-top: var(--nav-offset, 88px);
}

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


/* ==========================================================================
   TASK 5 - Mobile Header on a Single Row
   --------------------------------------------------------------------------
   The crest, the two brand lines and the mobile controls together measured
   wider than a phone viewport, so the flex row wrapped and dropped the dark
   mode and menu buttons onto a second, left-aligned line beneath the logo.
   The brand is now a shrinkable flex item (flex: 1, min-width: 0) and the
   whole cluster is scaled down, so everything sits on one row with the two
   buttons pinned to the right edge. The collapsing menu keeps its own full
   width row underneath.
   ========================================================================== */
@media (max-width: 1199.98px) {

    #siteNavbar > .container-fluid {
        row-gap: 0;
    }

    /* Brand shrinks rather than pushing the buttons onto a new line */
    #siteNavbar .navbar-brand {
        flex: 1 1 auto;
        min-width: 0;
        margin-right: 0.5rem;
        padding-top: 0;
        padding-bottom: 0;
        gap: 0.65rem !important;
    }

    #siteNavbar .navbar-brand .brand-text-group {
        min-width: 0;
        overflow: hidden;
    }

    #siteNavbar .museum-crest-badge {
        width: 42px;
        height: 42px;
        font-size: 1.15rem;
        border-radius: 10px;
        flex-shrink: 0;
    }

    #siteNavbar .museum-brand-main {
        font-size: 1.05rem;
        letter-spacing: 0.6px;
        white-space: nowrap;
    }

    #siteNavbar .museum-brand-sub {
        font-size: 0.75rem;
        letter-spacing: 2.6px;
        white-space: nowrap;
    }

    /* Dark mode + menu buttons: fixed size, never shrink, always hard right */
    #siteNavbar .d-xl-none {
        flex: 0 0 auto;
        flex-wrap: nowrap;
        margin-right: auto;
    }

    #siteNavbar #themeToggleMobile {
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        line-height: 1;
    }

    #siteNavbar .navbar-toggler {
        padding: 0.35rem 0.5rem !important;
        flex-shrink: 0;
        line-height: 1;
    }

    #siteNavbar .navbar-toggler-icon {
        width: 1.35em;
        height: 1.35em;
    }

    /* The collapse still takes its own full-width row below the logo */
    #siteNavbar .navbar-collapse {
        flex-basis: 100%;
    }
}

/* Small phones - tighten one more notch so 320px still fits on one row */
@media (max-width: 400px) {

    #siteNavbar > .container-fluid {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    #siteNavbar .navbar-brand {
        gap: 0.45rem !important;
        margin-right: 0.35rem;
    }

    #siteNavbar .museum-crest-badge {
        width: 36px;
        height: 36px;
        font-size: 1rem;
        border-radius: 9px;
    }

    #siteNavbar .museum-brand-main {
        font-size: 0.9rem;
        letter-spacing: 0.3px;
    }

    #siteNavbar .museum-brand-sub {
        font-size: 0.75rem;
        letter-spacing: 1.7px;
    }

    #siteNavbar .d-xl-none {
        gap: 0.35rem !important;
    }

    #siteNavbar #themeToggleMobile {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.85rem;
    }

    #siteNavbar .navbar-toggler {
        padding: 0.3rem 0.35rem !important;
    }

    #siteNavbar .navbar-toggler-icon {
        width: 1.2em;
        height: 1.2em;
    }
}


/* ==========================================================================
   Featured Exhibits Section - gradient only, no pattern
   --------------------------------------------------------------------------
   This band used to inherit the diagonal weave in light mode and, in dark
   mode, the original radial dot pattern from the first "Light Grey Pattern"
   block (the later weave block never listed this selector, so the dots
   survived). It now carries a plain grey gradient in both themes - a quieter
   backdrop for the exhibit cards sitting on top of it.
   ========================================================================== */
.featured-exhibits-section {
    background-color: #f0f2f5 !important;
    background-image: linear-gradient(180deg, #f7f8fa 0%, #eceef2 100%) !important;
}

[data-bs-theme="dark"] .featured-exhibits-section {
    background-color: #0e1620 !important;
    background-image: linear-gradient(180deg, #131d2a 0%, #0d141e 100%) !important;
}

/* ==========================================================================
   Quick Info Bar - Archival Index-Card Tiles (V1 only)
   --------------------------------------------------------------------------
   Replaces the horizontal "icon beside text" pill with a vertical, square
   cornered index card: a faint catalogue number in the corner, an outlined
   circular icon that fills on hover, a tracked label above the title, and a
   gold rule that draws itself across the top edge. Square corners and the
   hairline border deliberately echo V1's archival diamond-weave surfaces,
   and set this version apart from V2 / V3 / V4.
   ========================================================================== */
.quick-info-bar .quick-info-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    background-color: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-radius: 0 !important;
    padding: 1.85rem 1.5rem 1.65rem;
    overflow: hidden;
    box-shadow: none;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s ease,
                border-color 0.3s ease;
}

/* Gold rule drawn across the top edge on hover */
.quick-info-bar .quick-info-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--heritage-gold), #e6c260);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.quick-info-bar .quick-info-card:hover::before {
    transform: scaleX(1);
}

.quick-info-bar .quick-info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 34px rgba(14, 34, 56, 0.10);
    border-color: rgba(197, 150, 30, 0.45);
}

[data-bs-theme="dark"] .quick-info-bar .quick-info-card:hover {
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.45);
}

/* --------------------------------------------------------------------------
   Ghosted icon watermark, top right.

   Replaces the 01/02/03 catalogue numbers that used to sit here. Numbers
   implied an ordered sequence these cards do not actually have, and invited
   the question "first of how many?" every time a card was added or removed.
   An oversized, very faint copy of the card's own icon is purely ornamental:
   it fills the corner, echoes the badge below it, and makes no claim at all.

   It bleeds past the card edge and is trimmed by the card's overflow: hidden,
   which is what stops it reading as a second icon.

   PAINT ORDER: an absolutely positioned element paints ABOVE non-positioned
   inline content, so without help the watermark would sit on top of the text.
   The card's content is given position: relative + z-index: 1 below to put it
   back on top - simpler and more predictable than negative z-index, which
   would also need a stacking context on the card itself.
   -------------------------------------------------------------------------- */
.quick-info-bar .qi-watermark {
    position: absolute;
    top: -0.95rem;
    right: -1.15rem;
    z-index: 0;
    font-size: 5.6rem;
    line-height: 1;
    color: var(--heritage-gold);
    opacity: 0.175;
    pointer-events: none;
    transform: rotate(-8deg);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.quick-info-bar .quick-info-card:hover .qi-watermark {
    opacity: 0.3;
    transform: rotate(-3deg) scale(1.06);
}

[data-bs-theme="dark"] .quick-info-bar .qi-watermark { opacity: 0.10; }
[data-bs-theme="dark"] .quick-info-bar .quick-info-card:hover .qi-watermark { opacity: 0.19; }

/* Keep the real content above the watermark */
.quick-info-bar .qi-icon,
.quick-info-bar .qi-label,
.quick-info-bar .qi-title,
.quick-info-bar .qi-sub {
    position: relative;
    z-index: 1;
}

/* Outlined circular icon that fills on hover */
.quick-info-bar .qi-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1.5px solid rgba(197, 150, 30, 0.55);
    color: var(--heritage-gold);
    font-size: 1.08rem;
    margin-bottom: 1.15rem;
    flex-shrink: 0;
    transition: background-color 0.3s ease, color 0.3s ease,
                border-color 0.3s ease, transform 0.3s ease;
}

.quick-info-bar .quick-info-card:hover .qi-icon {
    background-color: var(--heritage-gold);
    border-color: var(--heritage-gold);
    color: #ffffff;
    /* transform: rotate(-8deg); */
}

[data-bs-theme="dark"] .quick-info-bar .quick-info-card:hover .qi-icon {
    color: #0e2238;
}

/* Type */
.quick-info-bar .qi-label {
    display: block;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--heritage-gold);
    margin-bottom: 0.45rem;
}

.quick-info-bar .qi-title {
    font-family: var(--font-heading);
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--heading-color);
    line-height: 1.22;
    margin-bottom: 0.5rem;
}

.quick-info-bar .qi-sub {
    font-size: 0.855rem;
    color: var(--text-muted-custom);
    line-height: 1.55;
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .quick-info-bar .quick-info-card {
        padding: 1.5rem 1.25rem 1.35rem;
    }
    .quick-info-bar .qi-icon {
        width: 42px;
        height: 42px;
        font-size: 0.98rem;
        margin-bottom: 0.9rem;
    }
    .quick-info-bar .qi-watermark { font-size: 4.6rem; top: -0.75rem; right: -0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
    .quick-info-bar .quick-info-card,
    .quick-info-bar .quick-info-card::before,
    .quick-info-bar .qi-icon,
    .quick-info-bar .qi-watermark {
        transition: none;
    }
}


/* ==========================================================================
   "Get Your 2026 Calendar" - header call to action
   --------------------------------------------------------------------------
   Desktop (xl and up): a gold gradient button with the calendar icon set in a
   dark navy date-tile, a light sweep that runs across it on hover, and a slow
   attention pulse that stops the moment the pointer arrives. The pulse is a
   box-shadow ring, which renders OUTSIDE the element and so is not clipped by
   the overflow:hidden needed for the sweep.

   Below xl the button is hidden and the collapsed menu carries
   .nav-link-calendar instead - a normal menu row, but gold, bolder than its
   neighbours, with a gold spine down the left and a price badge, so it still
   reads as the one action on the list.
   ========================================================================== */
.btn-calendar {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #edc766 0%, var(--heritage-gold) 45%, #9d7411 100%);
    color: #241906 !important;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    letter-spacing: 0.2px;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(197, 150, 30, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.55);
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.btn-calendar:hover,
.btn-calendar:focus-visible {
    color: #180f02 !important;
    transform: translateY(-2px);
    filter: saturate(1.06);
    box-shadow: 0 9px 24px rgba(197, 150, 30, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.btn-calendar:active { transform: translateY(0); }

/* The icon sits in a little navy "date tile" */
.btn-calendar > i {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--heritage-navy);
    color: var(--heritage-gold);
    font-size: 0.8rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    transition: transform 0.3s ease;
}

/* Idle attention: the date-tile tilts back and forth once, then rests for
   several seconds. The whole wobble lives in the last quarter of the cycle,
   so a 7s duration gives roughly 1.8s of movement and 5.2s of stillness. */
.btn-calendar > i {
    animation: calendarNudge 7s ease-in-out infinite;
}

/* A running animation outranks a plain transform declaration, so the hover
   tilt would lose the fight unless the animation is taken off entirely. The
   icon's own transition then eases it into the hover angle - and because the
   animation's 0% frame is rotate(0), restarting it on mouse-out is seamless. */
.btn-calendar:hover > i,
.btn-calendar:focus-visible > i {
    animation: none;
    transform: rotate(-8deg) scale(1.07);
}

@keyframes calendarNudge {
      0%, 72%, 100% { transform: rotate(0deg); }
    76%             { transform: rotate(-9deg) scale(1.06); }
    81%             { transform: rotate(7deg) scale(1.04); }
    86%             { transform: rotate(-5deg) scale(1.02); }
    91%             { transform: rotate(3deg); }
    96%             { transform: rotate(0deg); }
}

.btn-calendar > span { position: relative; z-index: 2; }

/* Light sweep */
.btn-calendar::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -65%;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: skewX(-18deg);
    pointer-events: none;
    transition: left 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-calendar:hover::after { left: 120%; }

/* --------------------------------------------------------------------------
   Mobile menu row
   -------------------------------------------------------------------------- */
.museum-nav-list .nav-link-calendar {
    display: flex !important;
    align-items: center;
    gap: 0.7rem;
    margin-top: 0.65rem;
    padding: 0.85rem 0.9rem !important;
    border: 1px solid rgba(197, 150, 30, 0.35) !important;
    border-left: 3px solid var(--heritage-gold) !important;
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(197, 150, 30, 0.16), rgba(197, 150, 30, 0.04));
    color: var(--heritage-gold) !important;
    font-weight: 800 !important;
    letter-spacing: 0.3px;
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.museum-nav-list .nav-link-calendar:hover,
.museum-nav-list .nav-link-calendar:focus {
    background: linear-gradient(90deg, rgba(197, 150, 30, 0.28), rgba(197, 150, 30, 0.08));
    color: var(--heritage-gold) !important;
    transform: translateX(2px);
}

/* kill the underline indicator the other mobile links suppress */
.museum-nav-list .nav-link-calendar::before { display: none !important; }

.museum-nav-list .nav-link-calendar > i {
    font-size: 1rem;
    flex-shrink: 0;
}

.museum-nav-list .nav-link-calendar .nav-cal-badge {
    margin-left: auto;
    background: var(--heritage-gold);
    color: #ffffff;
    font-size: 0.63rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 0.2rem 0.5rem;
    border-radius: 100px;
    flex-shrink: 0;
}

[data-bs-theme="dark"] .museum-nav-list .nav-link-calendar .nav-cal-badge {
    color: #0e2238;
}

@media (prefers-reduced-motion: reduce) {
    .btn-calendar > i { animation: none; }
    .btn-calendar::after { transition: none; }
}

/* ==========================================================================
   V1 Subpage Hero - centred "archival plate"
   --------------------------------------------------------------------------
   V2 and V3 keep the plain left-aligned banner. V1's is centred and dressed
   differently so the three demos read apart: a gold-ringed breadcrumb pill, a
   gold accent word in the title, a line-diamond-line flourish borrowed from
   the home hero, contact chips along the bottom, and the same diagonal weave
   that runs across V1's other surfaces laid over the photograph.
   ========================================================================== */
.subpage-hero-v1 {
    padding: clamp(3.5rem, 8vw, 6rem) 0;
    border-bottom: 3px solid var(--heritage-gold);
    overflow: hidden;
}

/* Diamond weave over the photo - V1's signature texture
.subpage-hero-v1::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 1px, transparent 0, transparent 16px),
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 1px, transparent 0, transparent 16px);
    pointer-events: none;
} */

.subpage-hero-v1 > * {
    position: relative;
    z-index: 2;
}

.subpage-hero-inner {
    max-width: 880px;
    margin-inline: auto;
}

/* --- Breadcrumb rendered as a gold-ringed pill --- */
.subpage-crumb {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(197, 150, 30, 0.6);
    border-radius: 100px;
    padding: 0.42rem 1.15rem;
    margin-bottom: 1.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.subpage-crumb .breadcrumb-item + .breadcrumb-item {
    padding-left: 0.55rem;
}

.subpage-crumb .breadcrumb-item + .breadcrumb-item::before {
    content: "\f054";                     /* fa-chevron-right */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.46rem;
    color: var(--heritage-gold);
    float: none;
    padding-right: 0.6rem;
    vertical-align: middle;
}

.subpage-crumb .breadcrumb-item a {
    color: var(--heritage-gold);
    text-decoration: none;
    transition: color 0.2s ease;
}

.subpage-crumb .breadcrumb-item a:hover { color: #ffffff; }

.subpage-crumb .breadcrumb-item.active { color: rgba(255, 255, 255, 0.9); }

/* --- Title --- */
.subpage-title {
    font-size: clamp(2rem, 4.6vw, 3.35rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.5px;
    color: #ffffff;
    margin-bottom: 1.15rem;
    text-shadow: 0 3px 16px rgba(0, 0, 0, 0.75);
}

.subpage-title .title-accent { color: #e8c765; }

/* --- Flourish divider --- */
.subpage-flourish {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    width: min(340px, 78%);
    margin: 0 auto 1.35rem;
}

.subpage-flourish .flourish-rule {
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(197, 150, 30, 0.95));
}

.subpage-flourish .flourish-rule:last-child {
    background: linear-gradient(90deg, rgba(197, 150, 30, 0.95), transparent);
}

.subpage-flourish i {
    color: var(--heritage-gold);
    font-size: 0.58rem;
}

/* --- Lede --- */
.subpage-lede {
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.93);
    max-width: 660px;
    margin: 0 auto 1.9rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}

/* --- Contact chips --- */
.subpage-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.7rem;
}

.subpage-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 100px;
    padding: 0.5rem 1.05rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: background-color 0.25s ease, border-color 0.25s ease,
                color 0.25s ease, transform 0.25s ease;
}

.subpage-chip i {
    color: var(--heritage-gold);
    font-size: 0.85rem;
    transition: color 0.25s ease;
}

a.subpage-chip:hover,
a.subpage-chip:focus-visible {
    background: var(--heritage-gold);
    border-color: #ffffff;
    color: #0e2238;
    transform: translateY(-2px);
}

a.subpage-chip:hover i,
a.subpage-chip:focus-visible i { color: #0e2238; }

@media (max-width: 575.98px) {
    .subpage-chips {
        flex-direction: column;
        align-items: stretch;
    }
    .subpage-chip { justify-content: center; }
    .subpage-crumb { font-size: 0.64rem; letter-spacing: 0.12em; }
}

@media (prefers-reduced-motion: reduce) {
    .subpage-chip { transition: none; }
}

/* ==========================================================================
   V1 Main Navigation - Oswald type treatment
   --------------------------------------------------------------------------
   V1 only; V2 and V3 keep Plus Jakarta Sans and V4 keeps Karla.

   WHY NOT CINZEL (the obvious "matches the headings" choice): Cinzel is a
   high-contrast inscriptional face. Its hairline strokes fall below one device
   pixel at nav sizes, so the rasteriser has nothing solid to snap to and the
   labels anti-alias into grey mush. It is built for display sizes, not 15px.

   Oswald is the opposite by construction: a condensed gothic with near-uniform
   stroke weight, a tall x-height and flat terminals. Every stem lands on a
   whole pixel, so it stays crisp small - it is a signage face, which is
   exactly the job here. Set in caps with open tracking it reads as museum
   wayfinding, which suits V1's archival direction while looking nothing like
   the geometric sans on V2/V3.

   Being condensed, it also ends the fitting problem outright: the six labels
   now cost less width than the original sans did, so the bar needs no
   viewport-band sizing hacks at all.

   The About Us dropdown items are NOT .museum-nav-link, so they are picked up
   separately (see .museum-dropdown-menu .dropdown-item further up this file):
   same Oswald family, but sentence case at weight 400 so the submenu reads
   quieter than the bar.
   ========================================================================== */
.museum-nav-list .museum-nav-link {
    font-family: 'Oswald', 'Arial Narrow', var(--font-body);
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    /* Oswald sits tall in its em box; trim the optical top-heaviness */
    line-height: 1.35;
    /* Keep every label on one line - without this a label can wrap inside its
       own link between xl and about 1280px and silently grow the bar. */
    white-space: nowrap;
}

/* Caps cost width, and this bar is full at the xl breakpoint (brand + six
   labels + theme toggle + calendar button). Measured at 1200px, trimming the
   link padding from Bootstrap's 0.5rem to 0.3rem is enough on its own to keep
   the calendar button inside the padding edge - no type shrinking needed.
   The #siteNavbar prefix is required to outrank Bootstrap's
   `.navbar-expand-xl .navbar-nav .nav-link` (0,3,0). */
@media (min-width: 1200px) and (max-width: 1439.98px) {
    #siteNavbar .museum-nav-list .museum-nav-link {
        padding-left: 0.3rem;
        padding-right: 0.3rem;
    }
}

/* DO NOT add a font-weight change on :hover or .active here. Switching weight
   changes glyph advance widths, so the link grows and every item after it
   shifts sideways as the pointer moves along the bar. The hover cue is carried
   by colour plus the underline that wipes in from the left (both defined
   further up this file) - neither of which touches layout. If a heavier active
   state is ever wanted, reserve the bold width up front with a hidden
   ::after copy of the label rather than restyling the live text. */

/* NOTE ON SPECIFICITY: horizontal padding on these links is owned by
   Bootstrap's `.navbar-expand-xl .navbar-nav .nav-link` (0,3,0), which outguns
   a plain `.museum-nav-list .museum-nav-link` (0,2,0). Anything that needs to
   change the padding must be raised above it - e.g. with a `#siteNavbar`
   prefix. Bootstrap's 0.5rem is left as-is here; Oswald is narrow enough that
   it no longer needs tightening. */

/* The calendar CTA in the collapsed menu keeps the body sans - it is an
   action, not a navigation item, and should not blend into the list. */
.museum-nav-list .nav-link-calendar {
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: none;
}

@media (max-width: 1199.98px) {
    .museum-nav-list .museum-nav-link {
        font-size: 0.98rem;
        letter-spacing: 0.075em;
    }
}


/* ##########################################################################
   ==========================================================================
   V1 INNER PAGES - component library  (added September 2026)
   --------------------------------------------------------------------------
   Everything the ten About/News/Exhibits/Events pages and the 2026 Calendar
   page need beyond what the home and contact pages already defined. All new
   classes are prefixed `pg-` so they cannot collide with Bootstrap or with
   the earlier V1 rules above. The shared script /js/nq-pages.js emits a few
   un-prefixed hooks (.evcal-*, .nq-lightbox, .is-flash) that are styled here
   for V1 and separately in /v4/css/style.css for V4.
   ==========================================================================
   ########################################################################## */

/* --------------------------------------------------------------------------
   0. Shared bits
   -------------------------------------------------------------------------- */
.pg-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--heritage-gold);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}

.pg-h2 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--heading-color);
    font-size: clamp(1.6rem, 2.8vw, 2.35rem);
    line-height: 1.2;
    margin-bottom: 1rem;
}

.pg-lead {
    font-size: 1.08rem;
    line-height: 1.75;
    color: var(--text-muted-custom);
}

.pg-rule {
    width: 64px;
    height: 3px;
    background: linear-gradient(90deg, var(--heritage-gold), #e6c260);
    border: 0;
    opacity: 1;
    margin: 0 0 1.5rem;
}

.pg-rule.mx-auto { margin-left: auto; margin-right: auto; }

.bg-card-custom { background-color: var(--card-bg) !important; }

/* Section anchored by the shared script's calendar / lightbox links */
.is-flash {
    animation: pgFlash 2.2s ease;
}

@keyframes pgFlash {
    0%, 100% { box-shadow: 0 0 0 0 rgba(197, 150, 30, 0); }
    15%      { box-shadow: 0 0 0 4px rgba(197, 150, 30, 0.75); }
    60%      { box-shadow: 0 0 0 4px rgba(197, 150, 30, 0.35); }
}

/* "Date TBC" / "Placeholder" chip for demo content */
.pg-tbc {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a5a00;
    background: #fff4d6;
    border: 1px dashed rgba(197, 150, 30, 0.7);
    border-radius: 4px;
    padding: 0.18rem 0.5rem;
}

[data-bs-theme="dark"] .pg-tbc { color: #e6c260; background: #2a2210; }

/* --------------------------------------------------------------------------
   1. Sticky in-page section navigation
   -------------------------------------------------------------------------- */
.pg-subnav {
    position: sticky;
    top: calc(var(--nav-offset, 88px) - 12px);
    z-index: 1010;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: 0 6px 18px rgba(14, 34, 56, 0.06);
}

.pg-subnav-inner {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0.6rem 0;
}

.pg-subnav-inner::-webkit-scrollbar { display: none; }

.pg-subnav-label {
    font-family: 'Oswald', var(--font-body);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--heritage-gold);
    white-space: nowrap;
    padding-right: 0.75rem;
    margin-right: 0.35rem;
    border-right: 1px solid var(--border-subtle);
}

.pg-subnav a {
    flex-shrink: 0;
    font-family: 'Oswald', var(--font-body);
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--heading-color);
    text-decoration: none;
    padding: 0.4rem 0.85rem;
    border-radius: 100px;
    border: 1px solid transparent;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.pg-subnav a:hover { color: var(--heritage-gold); border-color: rgba(197, 150, 30, 0.45); }

.pg-subnav a.is-active {
    background: var(--heritage-navy);
    color: #fff;
    border-color: var(--heritage-navy);
}

[data-bs-theme="dark"] .pg-subnav a.is-active {
    background: var(--heritage-gold);
    color: #0e2238;
    border-color: var(--heritage-gold);
}

/* --------------------------------------------------------------------------
   2. Vertical timeline
   -------------------------------------------------------------------------- */
.pg-timeline {
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0;
}

.pg-timeline::before {
    content: "";
    position: absolute;
    top: 0.5rem;
    bottom: 0.5rem;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, var(--heritage-gold), rgba(197, 150, 30, 0.15));
}

.pg-tl-item {
    position: relative;
    width: 50%;
    padding: 0 2.75rem 2.5rem 0;
    text-align: right;
}

.pg-tl-item:nth-child(even) {
    margin-left: 50%;
    padding: 0 0 2.5rem 2.75rem;
    text-align: left;
}

.pg-tl-item::after {
    content: "";
    position: absolute;
    top: 0.45rem;
    right: -9px;
    width: 18px;
    height: 18px;
    background: var(--card-bg);
    border: 3px solid var(--heritage-gold);
    transform: rotate(45deg);
}

.pg-tl-item:nth-child(even)::after { right: auto; left: -9px; }

.pg-tl-year {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--heritage-gold);
    line-height: 1;
    margin-bottom: 0.4rem;
}

.pg-tl-card {
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 1.1rem 1.25rem;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04);
    display: inline-block;
    text-align: left;
    max-width: 480px;
}

.pg-tl-card h3 {
    font-family: var(--font-heading);
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--heading-color);
    margin-bottom: 0.35rem;
}

.pg-tl-card p { font-size: 0.9rem; color: var(--text-muted-custom); margin: 0; line-height: 1.6; }

@media (max-width: 767.98px) {
    .pg-timeline::before { left: 9px; transform: none; }
    .pg-tl-item,
    .pg-tl-item:nth-child(even) {
        width: 100%;
        margin-left: 0;
        padding: 0 0 2rem 2.4rem;
        text-align: left;
    }
    .pg-tl-item::after,
    .pg-tl-item:nth-child(even)::after { left: 1px; right: auto; }
}

/* --------------------------------------------------------------------------
   3. Statistic band (navy)
   -------------------------------------------------------------------------- */
.pg-stats-band {
    background: linear-gradient(135deg, #0e2238 0%, #071320 100%);
    color: #fff;
    border-top: 3px solid var(--heritage-gold);
    border-bottom: 3px solid var(--heritage-gold);
}

.pg-stat {
    text-align: center;
    padding: 1.25rem 0.75rem;
}

.pg-stat-num {
    display: block;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(2rem, 4vw, 2.8rem);
    line-height: 1;
    background: linear-gradient(135deg, #ffe08a 0%, var(--heritage-gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.45rem;
}

.pg-stat-label {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
}

@media (min-width: 768px) {
    .pg-stats-band .col-md-3 + .col-md-3 .pg-stat { border-left: 1px solid rgba(255, 255, 255, 0.12); }
}

/* --------------------------------------------------------------------------
   4. Icon feature cards (committees, volunteer roles, values)
   -------------------------------------------------------------------------- */
.pg-icon-card {
    position: relative;
    height: 100%;
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 1.6rem 1.5rem;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.pg-icon-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--heritage-gold);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.pg-icon-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(14, 34, 56, 0.09); border-color: rgba(197, 150, 30, 0.4); }
.pg-icon-card:hover::before { transform: scaleY(1); }

.pg-icon-card .pg-ic {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--heritage-gold-light);
    color: var(--heritage-gold);
    border: 1px solid rgba(197, 150, 30, 0.35);
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.pg-icon-card h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--heading-color);
    margin-bottom: 0.45rem;
}

.pg-icon-card p { font-size: 0.9rem; color: var(--text-muted-custom); line-height: 1.62; margin-bottom: 0; }

.pg-icon-card .pg-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.9rem;
}

.pg-meta span {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--heading-color);
    background: var(--surface-bg);
    border: 1px solid var(--border-subtle);
    border-radius: 100px;
    padding: 0.2rem 0.6rem;
}

.pg-meta span i { color: var(--heritage-gold); margin-right: 0.25rem; }

/* --------------------------------------------------------------------------
   5. People
   -------------------------------------------------------------------------- */
.pg-team-card {
    height: 100%;
    text-align: center;
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 1.9rem 1.25rem 1.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pg-team-card:hover { transform: translateY(-5px); box-shadow: 0 16px 32px rgba(14, 34, 56, 0.1); }

.pg-avatar {
    width: 104px;
    height: 104px;
    margin: 0 auto 1.1rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #1b3552, #0a1828);
    color: var(--heritage-gold);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 2rem;
    border: 3px solid var(--card-bg);
    box-shadow: 0 0 0 2px var(--heritage-gold), 0 8px 18px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

.pg-avatar img { width: 100%; height: 100%; object-fit: cover; }

.pg-avatar.is-muted { background: var(--surface-bg); color: var(--text-muted-custom); font-size: 1.6rem; }

.pg-team-role {
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--heritage-gold);
    margin-bottom: 0.3rem;
}

.pg-team-card h3 {
    font-family: var(--font-heading);
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--heading-color);
    margin-bottom: 0.5rem;
}

.pg-team-card p { font-size: 0.86rem; color: var(--text-muted-custom); margin: 0; line-height: 1.6; }

/* Partner list */
.pg-partner {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.1rem 0;
    border-bottom: 1px dashed var(--border-subtle);
}

.pg-partner:last-child { border-bottom: 0; }

.pg-partner i {
    color: var(--heritage-gold);
    font-size: 1.1rem;
    margin-top: 0.2rem;
}

.pg-partner strong { display: block; color: var(--heading-color); }
.pg-partner span { font-size: 0.9rem; color: var(--text-muted-custom); }

/* --------------------------------------------------------------------------
   6. Photo gallery + room cards
   -------------------------------------------------------------------------- */
.pg-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 0.75rem;
}

.pg-gallery a {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
    background: var(--surface-bg);
}

.pg-gallery a.is-wide { grid-column: span 2; aspect-ratio: 2 / 1; }

.pg-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

.pg-gallery a::after {
    content: "\f00e";                 /* fa-magnifying-glass-plus */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.3rem;
    background: rgba(7, 19, 32, 0.45);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.pg-gallery a:hover img { transform: scale(1.07); }
.pg-gallery a:hover::after,
.pg-gallery a:focus-visible::after { opacity: 1; }

.pg-room {
    height: 100%;
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pg-room:hover { transform: translateY(-5px); box-shadow: 0 16px 32px rgba(14, 34, 56, 0.1); }

.pg-room-img {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.pg-room-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.pg-room:hover .pg-room-img img { transform: scale(1.06); }

.pg-room-no {
    position: absolute;
    left: 0;
    bottom: 0;
    background: var(--heritage-navy);
    color: var(--heritage-gold);
    font-family: var(--font-heading);
    font-weight: 800;
    padding: 0.4rem 0.9rem;
    border-top-right-radius: 10px;
}

.pg-room-body { padding: 1.25rem 1.35rem 1.4rem; flex-grow: 1; }

.pg-room-body h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--heading-color);
    margin-bottom: 0.4rem;
}

.pg-room-body p { font-size: 0.9rem; color: var(--text-muted-custom); line-height: 1.62; margin: 0; }

/* Exhibit feature rows (alternating image/text) */
.pg-feature-img {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(14, 34, 56, 0.16);
}

.pg-feature-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

.pg-feature-img .pg-feature-tag {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: rgba(14, 34, 56, 0.88);
    color: var(--heritage-gold);
    border: 1px solid var(--heritage-gold);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.35rem 0.8rem;
    border-radius: 100px;
}

.pg-ticks { list-style: none; padding: 0; margin: 1.25rem 0; display: grid; gap: 0.55rem; }

.pg-ticks li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.93rem; color: var(--text-muted-custom); }

.pg-ticks li i { color: var(--heritage-gold); margin-top: 0.3rem; font-size: 0.8rem; }

/* Pull quote */
.pg-quote {
    position: relative;
    margin: 0;
    padding: 1.75rem 1.75rem 1.5rem 4rem;
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-left: 4px solid var(--heritage-gold);
    border-radius: 10px;
}

.pg-quote::before {
    content: "\201C";
    position: absolute;
    left: 1rem;
    top: 0.35rem;
    font-family: Georgia, serif;
    font-size: 4.5rem;
    line-height: 1;
    color: var(--heritage-gold);
    opacity: 0.6;
}

.pg-quote p {
    font-family: var(--font-heading);
    font-size: 1.12rem;
    line-height: 1.6;
    color: var(--heading-color);
    margin-bottom: 0.6rem;
}

.pg-quote cite { font-style: normal; font-size: 0.82rem; color: var(--text-muted-custom); }

/* --------------------------------------------------------------------------
   7. Lightbox (markup built by /js/nq-pages.js)
   -------------------------------------------------------------------------- */
html.nq-lb-lock { overflow: hidden; }

.nq-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 3.5rem 1rem 2.5rem;
    background: rgba(5, 11, 19, 0.94);
    opacity: 0;
    transition: opacity 0.22s ease;
}

.nq-lightbox.is-open { opacity: 1; }
.nq-lightbox[hidden],
[data-filter-item][hidden] { display: none !important; }   /* never let display:grid/flex override [hidden] */

.nq-lb-figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-height: 100%;
    min-width: 0;
}

.nq-lb-figure img {
    max-width: 100%;
    max-height: calc(100vh - 9rem);
    object-fit: contain;
    border: 3px solid rgba(197, 150, 30, 0.8);
    border-radius: 4px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    background: #0e2238;
}

.nq-lb-figure figcaption {
    margin-top: 0.9rem;
    color: #e2e8f0;
    font-size: 0.92rem;
    text-align: center;
    max-width: 70ch;
}

.nq-lightbox button {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    background: transparent;
    color: #fff;
    display: grid;
    place-items: center;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.nq-lightbox button:hover { background: var(--heritage-gold); border-color: #fff; color: #071320; }

.nq-lb-close { position: absolute; top: 1rem; right: 1rem; }

.nq-lb-count {
    position: absolute;
    top: 1.6rem;
    left: 1.25rem;
    color: var(--heritage-gold);
    font-family: 'Oswald', var(--font-body);
    letter-spacing: 0.12em;
}

.nq-lightbox.is-single .nq-lb-prev,
.nq-lightbox.is-single .nq-lb-next { visibility: hidden; }

@media (max-width: 575.98px) {
    .nq-lightbox { grid-template-columns: 1fr; padding: 4rem 0.75rem 5rem; }
    .nq-lb-prev, .nq-lb-next { position: absolute; bottom: 1.25rem; }
    .nq-lb-prev { left: calc(50% - 60px); }
    .nq-lb-next { right: calc(50% - 60px); }
}

/* --------------------------------------------------------------------------
   8. Events: month calendar (markup built by /js/nq-pages.js)
   -------------------------------------------------------------------------- */
.pg-evcal-card {
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-top: 4px solid var(--heritage-gold);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 10px 30px rgba(14, 34, 56, 0.07);
}

.evcal-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.evcal-title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.35rem;
    color: var(--heading-color);
    margin: 0 auto 0 0.35rem;
    order: -1;
}

.evcal-title span { color: var(--heritage-gold); }

.evcal-nav,
.evcal-today {
    height: 38px;
    border: 1px solid var(--border-subtle);
    background: var(--surface-bg);
    color: var(--heading-color);
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.8rem;
    transition: all 0.2s ease;
}

.evcal-nav { width: 38px; }
.evcal-today { padding: 0 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; }

.evcal-nav:hover,
.evcal-today:hover { background: var(--heritage-gold); border-color: var(--heritage-gold); color: #fff; }

.evcal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border-top: 1px solid var(--border-subtle);
    border-left: 1px solid var(--border-subtle);
}

.evcal-dow {
    font-family: 'Oswald', var(--font-body);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    padding: 0.5rem 0;
    color: #fff;
    background: var(--heritage-navy);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.evcal-day {
    min-height: 104px;
    padding: 0.35rem;
    border-right: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.evcal-day.is-out { background: var(--surface-bg); }
.evcal-day.is-out .evcal-num { opacity: 0.4; }

.evcal-num {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted-custom);
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
}

.evcal-day.is-today .evcal-num { background: var(--heritage-gold); color: #fff; }
.evcal-day.has-event { background: var(--heritage-gold-light); }
.evcal-day.is-out.has-event { background: var(--surface-bg); }

.evcal-ev {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.25;
    color: #fff;
    background: var(--heritage-navy);
    border-left: 3px solid var(--heritage-gold);
    border-radius: 4px;
    padding: 0.25rem 0.35rem;
    text-decoration: none;
    min-width: 0;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.evcal-ev span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evcal-ev i { color: var(--heritage-gold); font-size: 0.66rem; flex-shrink: 0; }
.evcal-ev:hover { background: #1b3552; color: #fff; transform: translateX(2px); }

.evcal-agenda { margin-top: 1rem; display: grid; gap: 0.5rem; }

.evcal-agenda-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    text-decoration: none;
    color: var(--heading-color);
    background: var(--surface-bg);
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.evcal-agenda-item:hover { border-color: var(--heritage-gold); transform: translateX(3px); color: var(--heading-color); }

.evcal-agenda-date {
    flex-shrink: 0;
    width: 48px;
    text-align: center;
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--heritage-gold);
    line-height: 1.1;
}

.evcal-agenda-date b { display: block; font-family: var(--font-heading); font-size: 1.4rem; color: var(--heading-color); }

.evcal-agenda-text { display: flex; flex-direction: column; min-width: 0; }
.evcal-agenda-text strong { font-size: 0.92rem; }
.evcal-agenda-text small { color: var(--text-muted-custom); }
.evcal-agenda-arrow { margin-left: auto; color: var(--heritage-gold); font-size: 0.8rem; }

.evcal-empty { color: var(--text-muted-custom); font-size: 0.9rem; margin: 0; padding: 0.5rem 0; }
.evcal-empty i { color: var(--heritage-gold); margin-right: 0.35rem; }

@media (max-width: 767.98px) {
    .evcal-day { min-height: 54px; align-items: center; }
    .evcal-ev { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: var(--heritage-gold); }
    .evcal-ev span, .evcal-ev i { display: none; }
    .evcal-title { font-size: 1.1rem; }
    .evcal-today { display: none; }
}

@media (min-width: 768px) {
    .evcal-agenda { display: none; }
}

/* --------------------------------------------------------------------------
   9. Events: list cards + filter chips
   -------------------------------------------------------------------------- */
.pg-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pg-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--heading-color);
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-radius: 100px;
    padding: 0.42rem 0.95rem;
    transition: all 0.2s ease;
}

.pg-chip i { color: var(--heritage-gold); font-size: 0.8rem; transition: color 0.2s ease; }
.pg-chip:hover { border-color: var(--heritage-gold); color: var(--heritage-gold); }

.pg-chip.is-active {
    background: var(--heritage-navy);
    border-color: var(--heritage-navy);
    color: #fff;
}

.pg-chip.is-active i { color: var(--heritage-gold); }

[data-bs-theme="dark"] .pg-chip.is-active { background: var(--heritage-gold); border-color: var(--heritage-gold); color: #0e2238; }
[data-bs-theme="dark"] .pg-chip.is-active i { color: #0e2238; }

.pg-event {
    display: grid;
    grid-template-columns: 96px 220px 1fr;
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pg-event:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(14, 34, 56, 0.09); }

.pg-datebox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #0e2238, #071320);
    color: #fff;
    text-align: center;
    padding: 1rem 0.5rem;
    border-right: 3px solid var(--heritage-gold);
}

.pg-datebox .m { font-family: 'Oswald', var(--font-body); font-size: 0.85rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--heritage-gold); }
.pg-datebox .d { font-family: var(--font-heading); font-size: 2.2rem; font-weight: 800; line-height: 1; margin: 0.15rem 0; }
.pg-datebox .y { font-size: 0.72rem; color: rgba(255, 255, 255, 0.7); letter-spacing: 0.1em; }

.pg-event-img { position: relative; min-height: 170px; overflow: hidden; }
.pg-event-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.pg-event:hover .pg-event-img img { transform: scale(1.05); }

.pg-event-body { padding: 1.2rem 1.4rem; }

.pg-event-body h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--heading-color);
    margin: 0.4rem 0 0.4rem;
}

.pg-event-body p { font-size: 0.9rem; color: var(--text-muted-custom); line-height: 1.62; margin-bottom: 0.65rem; }

.pg-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.1rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--heading-color);
}

.pg-event-meta i { color: var(--heritage-gold); margin-right: 0.3rem; }

.pg-cat-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #0e2238;
    background: var(--heritage-gold);
    border-radius: 4px;
    padding: 0.2rem 0.55rem;
}

.pg-event.is-past { opacity: 0.94; }
.pg-event.is-past .pg-datebox { background: linear-gradient(180deg, #3b4a5c, #243242); }
.pg-event.is-past .pg-event-img img { filter: grayscale(0.35); }

@media (max-width: 991.98px) {
    .pg-event { grid-template-columns: 84px 1fr; }
    .pg-event-img { display: none; }
}

@media (max-width: 575.98px) {
    .pg-event { grid-template-columns: 1fr; }
    .pg-datebox { flex-direction: row; gap: 0.5rem; border-right: 0; border-bottom: 3px solid var(--heritage-gold); padding: 0.6rem; }
    .pg-datebox .d { font-size: 1.4rem; margin: 0; }
}

/* Past events: compact archive list */
.pg-past-list { list-style: none; padding: 0; margin: 0; }

.pg-past {
    display: grid;
    grid-template-columns: 70px 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 0.9rem 0.25rem;
    border-bottom: 1px solid var(--border-subtle);
}

.pg-past-thumb { width: 70px; height: 70px; border-radius: 8px; object-fit: cover; }
.pg-past h3 { font-family: var(--font-heading); font-weight: 700; font-size: 1rem; color: var(--heading-color); margin: 0 0 0.2rem; }
.pg-past p { font-size: 0.85rem; color: var(--text-muted-custom); margin: 0; }
.pg-past-date { font-size: 0.78rem; font-weight: 700; color: var(--heritage-gold); white-space: nowrap; text-align: right; }

@media (max-width: 575.98px) {
    .pg-past { grid-template-columns: 56px 1fr; }
    .pg-past-thumb { width: 56px; height: 56px; }
    .pg-past-date { grid-column: 2; text-align: left; }
}

/* --------------------------------------------------------------------------
   10. News
   -------------------------------------------------------------------------- */
.pg-news-feature {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(14, 34, 56, 0.1);
}

.pg-news-feature-img { position: relative; min-height: 340px; }
.pg-news-feature-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.pg-news-feature-body { padding: clamp(1.5rem, 3vw, 2.75rem); display: flex; flex-direction: column; justify-content: center; }

.pg-news-date {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted-custom);
    letter-spacing: 0.04em;
}

.pg-news-date i { color: var(--heritage-gold); margin-right: 0.3rem; }

.pg-news-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pg-news-card:hover { transform: translateY(-5px); box-shadow: 0 16px 32px rgba(14, 34, 56, 0.1); }

.pg-news-card-img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.pg-news-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.pg-news-card:hover .pg-news-card-img img { transform: scale(1.05); }
.pg-news-card-img .pg-cat-badge { position: absolute; top: 0.85rem; left: 0.85rem; }

.pg-news-card-body { padding: 1.25rem 1.35rem 1.4rem; display: flex; flex-direction: column; flex-grow: 1; }

.pg-news-card h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.35;
    color: var(--heading-color);
    margin: 0.45rem 0 0.55rem;
}

.pg-news-card p { font-size: 0.9rem; color: var(--text-muted-custom); line-height: 1.62; }

.pg-news-more { margin-top: auto; }

.pg-news-full p { font-size: 0.9rem; color: var(--text-muted-custom); line-height: 1.7; }

.pg-readmore {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--heritage-gold);
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0;
}

.pg-readmore i { transition: transform 0.25s ease; }
.pg-readmore[aria-expanded="true"] i { transform: rotate(180deg); }
.pg-readmore:hover { color: var(--heritage-gold-hover); }

/* Newsletter / sidebar box */
.pg-side-box {
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 1.5rem;
}

.pg-side-box h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--heading-color);
    margin-bottom: 0.75rem;
}

.pg-side-box.is-navy { background: linear-gradient(145deg, #0e2238, #071320); border-color: var(--heritage-gold); color: #fff; }
.pg-side-box.is-navy h3 { color: var(--heritage-gold); }

/* --------------------------------------------------------------------------
   11. 2026 Calendar product page
   -------------------------------------------------------------------------- */
.pg-product-img {
    position: relative;
    border-radius: 6px;
    overflow: visible;
}

.pg-product-img img {
    width: 100%;
    border-radius: 6px;
    box-shadow: 0 30px 60px rgba(7, 19, 32, 0.35);
    transform: rotate(-2deg);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.pg-product-img:hover img { transform: rotate(0deg) scale(1.01); }

.pg-price-seal {
    position: absolute;
    right: -14px;
    top: -14px;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    text-align: center;
    background: radial-gradient(circle at 30% 30%, #ffe08a, var(--heritage-gold) 55%, #8c6508);
    color: #0e2238;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 2rem;
    line-height: 0.9;
    border: 3px solid #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
    transform: rotate(12deg);
}

.pg-price-seal small { display: block; font-family: var(--font-body); font-size: 0.55rem; font-weight: 800; letter-spacing: 0.12em; }

.pg-buy-box {
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-top: 4px solid var(--heritage-gold);
    border-radius: 12px;
    padding: 1.5rem;
}

.pg-buy-price {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 2.6rem;
    color: var(--heading-color);
    line-height: 1;
}

.pg-buy-price small { font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; color: var(--text-muted-custom); }

.pg-month {
    position: relative;
    height: 100%;
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pg-month:hover { transform: translateY(-5px) rotate(-0.5deg); box-shadow: 0 16px 32px rgba(14, 34, 56, 0.12); }

.pg-month-img { aspect-ratio: 4 / 3; overflow: hidden; position: relative; display: block; }
.pg-month-img img { width: 100%; height: 100%; object-fit: cover; }

.pg-month-name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.5rem 0.9rem 0.55rem;
    background: linear-gradient(transparent, rgba(7, 19, 32, 0.88));
    color: #fff;
    font-family: 'Oswald', var(--font-body);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.pg-month-name b { color: var(--heritage-gold); font-weight: 500; margin-right: 0.35rem; }

.pg-month-body { padding: 0.85rem 0.95rem 1rem; }
.pg-month-body h3 { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--heading-color); margin-bottom: 0.3rem; }
.pg-month-body p { font-size: 0.82rem; color: var(--text-muted-custom); margin: 0; line-height: 1.55; }

.pg-stockist {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
}

.pg-stockist i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--heritage-gold-light); color: var(--heritage-gold); flex-shrink: 0; }
.pg-stockist strong { display: block; color: var(--heading-color); font-size: 0.95rem; }
.pg-stockist span { font-size: 0.82rem; color: var(--text-muted-custom); }

/* --------------------------------------------------------------------------
   12. Numbered steps (volunteer / employment / donations)
   -------------------------------------------------------------------------- */
.pg-steps { counter-reset: pgstep; list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }

.pg-steps li {
    counter-increment: pgstep;
    position: relative;
    padding: 1.1rem 1.2rem 1.1rem 4.2rem;
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
}

.pg-steps li::before {
    content: counter(pgstep);
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.3rem;
    height: 2.3rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--heritage-navy);
    color: var(--heritage-gold);
    font-family: var(--font-heading);
    font-weight: 800;
    border: 2px solid var(--heritage-gold);
}

.pg-steps strong { display: block; color: var(--heading-color); margin-bottom: 0.15rem; }
.pg-steps span { font-size: 0.9rem; color: var(--text-muted-custom); }

/* --------------------------------------------------------------------------
   13. Job postings
   -------------------------------------------------------------------------- */
.pg-job {
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 1.6rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.pg-job:hover { box-shadow: 0 16px 32px rgba(14, 34, 56, 0.09); border-color: rgba(197, 150, 30, 0.45); }

.pg-job h3 { font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem; color: var(--heading-color); margin: 0.5rem 0; }

.pg-job-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.25rem 0.65rem;
    border-radius: 100px;
    background: #e8f5ee;
    color: #19754a;
}

.pg-job-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pg-job-status.is-closed { background: var(--surface-bg); color: var(--text-muted-custom); }

[data-bs-theme="dark"] .pg-job-status { background: #12301f; color: #5fd49a; }

/* --------------------------------------------------------------------------
   14. Accordion (FAQ) theming
   -------------------------------------------------------------------------- */
.pg-accordion .accordion-item {
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-radius: 10px !important;
    overflow: hidden;
    margin-bottom: 0.65rem;
}

.pg-accordion .accordion-button {
    font-weight: 700;
    color: var(--heading-color);
    background: var(--card-bg);
    box-shadow: none;
    padding: 1.05rem 1.25rem;
}

.pg-accordion .accordion-button:not(.collapsed) {
    color: var(--heritage-gold);
    background: var(--heritage-gold-light);
}

.pg-accordion .accordion-button:focus { box-shadow: 0 0 0 3px rgba(197, 150, 30, 0.25); }
.pg-accordion .accordion-body { font-size: 0.93rem; color: var(--text-muted-custom); line-height: 1.7; }

/* --------------------------------------------------------------------------
   15. Long-form prose (privacy policy) + table of contents
   -------------------------------------------------------------------------- */
.pg-prose {
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: clamp(1.5rem, 4vw, 3rem);
    counter-reset: pgsec;
}

.pg-prose h2 {
    counter-increment: pgsec;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--heading-color);
    margin: 2.25rem 0 0.85rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-subtle);
}

.pg-prose h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }

.pg-prose h2::before {
    content: counter(pgsec, decimal-leading-zero);
    display: inline-block;
    color: var(--heritage-gold);
    margin-right: 0.65rem;
    font-size: 0.95rem;
    vertical-align: 0.15em;
}

.pg-prose h3 { font-size: 1rem; font-weight: 700; color: var(--heading-color); margin: 1.25rem 0 0.5rem; }
.pg-prose p, .pg-prose li { color: var(--text-muted-custom); line-height: 1.8; font-size: 0.97rem; }
.pg-prose ul { padding-left: 1.2rem; }
.pg-prose li::marker { color: var(--heritage-gold); }
.pg-prose a { color: var(--heritage-gold); }

.pg-prose table { width: 100%; font-size: 0.9rem; margin: 1rem 0; border-collapse: collapse; }
.pg-prose th, .pg-prose td { padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--border-subtle); vertical-align: top; color: var(--text-muted-custom); }
.pg-prose th { color: var(--heading-color); font-weight: 700; background: var(--surface-bg); }

.pg-toc {
    position: sticky;
    top: calc(var(--nav-offset, 88px) + 12px);
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 1.25rem;
}

.pg-toc h3 { font-family: 'Oswald', var(--font-body); font-size: 0.85rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--heritage-gold); margin-bottom: 0.75rem; }
.pg-toc ol { list-style: none; counter-reset: toc; padding: 0; margin: 0; }
.pg-toc li { counter-increment: toc; }

.pg-toc a {
    display: flex;
    gap: 0.55rem;
    padding: 0.38rem 0.5rem;
    border-radius: 6px;
    color: var(--heading-color);
    text-decoration: none;
    font-size: 0.87rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.pg-toc a::before { content: counter(toc, decimal-leading-zero); color: var(--heritage-gold); font-weight: 700; font-size: 0.8rem; }
.pg-toc a:hover, .pg-toc a.is-active { background: var(--heritage-gold-light); color: var(--heritage-gold); }

/* --------------------------------------------------------------------------
   16. Sitemap
   -------------------------------------------------------------------------- */
.pg-map-group {
    height: 100%;
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 1.5rem;
}

.pg-map-group h2 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--heading-color);
    padding-bottom: 0.85rem;
    margin-bottom: 0.5rem;
    border-bottom: 2px solid var(--heritage-gold);
}

.pg-map-group h2 i { color: var(--heritage-gold); }

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

.pg-map-list > li > a {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.7rem 0.5rem;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.pg-map-list > li > a:hover { background: var(--heritage-gold-light); }
.pg-map-list > li > a > i { color: var(--heritage-gold); margin-top: 0.3rem; width: 1rem; text-align: center; }
.pg-map-list strong { display: block; color: var(--heading-color); font-size: 0.95rem; }
.pg-map-list small { color: var(--text-muted-custom); font-size: 0.82rem; line-height: 1.45; display: block; }

.pg-map-anchors { list-style: none; padding: 0 0 0.35rem 2.3rem; margin: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.pg-map-anchors a { font-size: 0.72rem; font-weight: 700; color: var(--text-muted-custom); border: 1px solid var(--border-subtle); border-radius: 100px; padding: 0.15rem 0.55rem; text-decoration: none; }
.pg-map-anchors a:hover { color: var(--heritage-gold); border-color: var(--heritage-gold); }

/* --------------------------------------------------------------------------
   17. Dark-mode touch-ups for Bootstrap form controls on inner pages
   -------------------------------------------------------------------------- */
.pg-form .form-label { font-weight: 600; font-size: 0.875rem; }
.pg-form .form-check-input:checked { background-color: var(--heritage-gold); border-color: var(--heritage-gold); }
.pg-form .form-control:focus,
.pg-form .form-select:focus { border-color: var(--heritage-gold); box-shadow: 0 0 0 0.2rem rgba(197, 150, 30, 0.2); }

.pg-check-card {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: var(--surface-bg);
    height: 100%;
    cursor: pointer;
    font-size: 0.88rem;
}

.pg-check-card .form-check-input { margin-top: 0.2rem; flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
    .is-flash { animation: none; outline: 3px solid var(--heritage-gold); }
    .pg-icon-card, .pg-team-card, .pg-room, .pg-event, .pg-news-card, .pg-month,
    .pg-gallery img, .pg-product-img img { transition: none; }
}