/* ============================================================
   DESIGN SYSTEM — Institute Website
   Elegant, editorial, cultural, premium
   ============================================================ */

/* ----------------------------------------------------------
   CSS Custom Properties
   ---------------------------------------------------------- */
:root {
    /* Backgrounds */
    --color-bg-primary: #FAF8F5;
    --color-bg-soft: #F4F1EC;
    --color-bg-muted-blue: #D6DFE8;
    --color-bg-white: #FFFFFF;

    /* Text */
    --color-text-primary: #1C1C1C;
    --color-text-secondary: #555555;
    --color-text-muted: #888888;

    /* Accent — gold / warm beige */
    --color-accent: #B8963E;
    --color-accent-hover: #9E7E30;
    --color-accent-light: #F0E6CE;

    /* Navy */
    --color-navy: #1A2744;
    --color-navy-light: #243352;

    /* Muted blue */
    --color-muted-blue: #8BA3BE;
    --color-muted-blue-bg: #E8EDF3;

    /* Borders & shadows */
    --color-border: #E4E0DA;
    --color-border-light: #EDEBE7;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.02);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.03);
    --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.03);
    --shadow-lift: 0 8px 28px rgba(0, 0, 0, 0.07), 0 2px 6px rgba(0, 0, 0, 0.03);

    /* Typography */
    --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Spacing */
    --section-py: 5rem;          /* 80px */
    --section-py-sm: 3.75rem;     /* 60px */
    --section-header-mb: 2.5rem;  /* 40px */

    /* Transitions */
    --transition-base: 0.25s ease;
    --transition-slow: 0.35s ease;

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
}


/* ----------------------------------------------------------
   Base & Reset Overrides
   ---------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 56px;
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
    overflow-wrap: break-word;
}

#main-content {
    min-width: 0;
    max-width: 100%;
}

/* Bootstrap grid: allow columns to shrink below content min-width (common overflow fix) */
.row > [class*="col"] {
    min-width: 0;
}

h1, h2, h3, h4, h5 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-text-primary);
}

h6 {
    font-family: var(--font-body);
    font-weight: 600;
}

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--transition-base);
    overflow-wrap: anywhere;
}

code,
pre,
kbd,
samp {
    overflow-wrap: anywhere;
}

a:hover {
    color: var(--color-accent-hover);
}

img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
}


/* ----------------------------------------------------------
   Reusable Patterns — Section overlines
   ---------------------------------------------------------- */
.prose-overline,
.focus-overline,
.pubs-overline,
.research-featured-book__overline,
.events-overline,
.collections-overline,
.resources-overline,
.member-overline,
.atelier-overline,
.contact-overline {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 0.875rem;
}


/* ----------------------------------------------------------
   Reusable Patterns — Section titles (h2)
   ---------------------------------------------------------- */
.prose-heading,
.focus-title,
.pubs-title,
.events-title,
.collections-title,
.resources-title,
.member-title,
.atelier-title,
.contact-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--color-navy);
    margin-bottom: 1rem;
}

.prose-heading {
    margin-bottom: 1.5rem;
}


/* ----------------------------------------------------------
   Reusable Patterns — Section intro paragraphs
   ---------------------------------------------------------- */
.focus-intro,
.pubs-intro,
.events-intro,
.collections-intro,
.resources-intro,
.member-intro,
.atelier-intro,
.contact-intro {
    font-size: 0.9375rem;
    line-height: 1.8;
    color: var(--color-text-secondary);
    margin-bottom: 0;
    max-width: 480px;
    margin-inline: auto;
}


/* ----------------------------------------------------------
   Reusable Patterns — Card action links
   ---------------------------------------------------------- */
.focus-card-link,
.collection-card-link,
.resource-card-link,
.member-card-link,
.pubs-item-link,
.pubs-item-brochure,
.pubs-item-story-poster,
.events-item-link,
.events-item-brochure,
.events-item-story-poster,
.atelier-item-link,
.atelier-item-brochure {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--color-accent);
    text-decoration: none;
    transition: gap 0.25s ease, color 0.25s ease;
}

.focus-card-link:hover,
.collection-card-link:hover,
.resource-card-link:hover,
.member-card-link:hover,
.pubs-item-link:hover,
.pubs-item-brochure:hover,
.pubs-item-story-poster:hover,
.events-item-link:hover,
.events-item-brochure:hover,
.events-item-story-poster:hover,
.atelier-item-link:hover,
.atelier-item-brochure:hover {
    color: var(--color-accent-hover);
    gap: 0.55rem;
}

.focus-card-link i,
.collection-card-link i,
.resource-card-link i,
.member-card-link i,
.pubs-item-link i,
.pubs-item-brochure i,
.pubs-item-story-poster i,
.events-item-link i,
.events-item-brochure i,
.events-item-story-poster i,
.atelier-item-link i,
.atelier-item-brochure i {
    font-size: 0.65rem;
}

.pubs-item-brochure,
.pubs-item-story-poster,
.events-item-brochure,
.events-item-story-poster,
.atelier-item-brochure {
    margin-top: 0.35rem;
    margin-bottom: 0.35rem;
}


/* ----------------------------------------------------------
   Reusable Patterns — Section "View all" buttons
   ---------------------------------------------------------- */
.section-view-all {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--color-navy);
    text-decoration: none;
    padding: 0.65rem 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: 3px;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
}

.section-view-all:hover {
    border-color: var(--color-navy);
    color: var(--color-navy);
    box-shadow: var(--shadow-md);
    gap: 0.65rem;
}

.section-view-all i {
    font-size: 0.7rem;
    transition: transform 0.25s ease;
}

.section-view-all:hover i {
    transform: translateX(2px);
}


/* ----------------------------------------------------------
   Reusable Patterns — Card hover treatment
   ---------------------------------------------------------- */
.focus-card,
.collection-card,
.resource-card,
.member-card {
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-slow), border-color var(--transition-slow), transform var(--transition-slow);
}

.focus-card:hover,
.collection-card:hover,
.resource-card:hover,
.member-card:hover {
    box-shadow: var(--shadow-hover);
    border-color: var(--color-border);
    transform: translateY(-2px);
}


/* ----------------------------------------------------------
   Site Header — Three-tier institutional layout
   ---------------------------------------------------------- */
.site-header {
    position: relative;
    z-index: 1040;
}


/* --- Tier 1: Utility Bar --- */

.header-utility {
    background-color: var(--color-navy);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.765rem;
    letter-spacing: 0.025em;
    line-height: 1;
}

.header-utility-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding: 0.5rem 0;
    min-width: 0;
}

.header-utility a {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    transition: color var(--transition-base);
}

.header-utility a:hover {
    color: #FFFFFF;
}

.header-utility a i {
    margin-inline-end: 0.3rem;
    font-size: 0.7rem;
    opacity: 0.7;
}

.header-utility-left,
.header-utility-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem 0;
    min-width: 0;
}

.utility-sep {
    display: inline-block;
    width: 1px;
    height: 11px;
    background-color: rgba(255, 255, 255, 0.18);
    margin: 0 0.75rem;
    vertical-align: middle;
}

.lang-switch {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 0.25rem;
}

.lang-link {
    font-weight: 500;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5) !important;
    padding: 0.15rem 0;
}

.lang-link.active {
    color: rgba(255, 255, 255, 0.95) !important;
}

.lang-link:hover {
    color: rgba(255, 255, 255, 0.9) !important;
}

.utility-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-inline-start: 1.25rem;
    padding: 0.3rem 0.85rem;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-accent) !important;
    border: 1px solid rgba(184, 150, 62, 0.35);
    border-radius: 2px;
    transition: all var(--transition-base);
}

.utility-cta:hover {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: #FFFFFF !important;
}

.utility-cta i {
    font-size: 0.65rem;
    margin-right: 0 !important;
    opacity: 1 !important;
    transition: transform var(--transition-base);
}

.utility-cta:hover i {
    transform: translateX(2px);
}


/* --- Tier 2: Brand Identity Zone --- */

.header-brand {
    background-color: var(--color-bg-primary);
    text-align: center;
    padding: 1.6rem 0 1.35rem;
    border-bottom: 1px solid var(--color-border-light);
}

.header-brand-link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none !important;
    gap: 0.35rem;
    max-width: 100%;
}

.header-brand-logo {
    max-height: 3.25rem;
    width: auto;
    object-fit: contain;
}

.header-brand-name {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-navy);
    letter-spacing: 0.04em;
    line-height: 1;
    max-width: 100%;
}

.header-brand-tagline {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    line-height: 1;
}


/* --- Tier 3: Main Navigation --- */

.header-nav {
    background-color: var(--color-bg-white);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 1035;
    transition: box-shadow var(--transition-base);
}

.header-nav.scrolled {
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.045);
}

.header-nav-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    min-height: 46px;
}

.header-nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0;
}

.header-nav-link {
    display: block;
    padding: 0.8rem 1.1rem;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-navy);
    letter-spacing: 0.03em;
    text-decoration: none;
    position: relative;
    transition: color var(--transition-base);
}

.header-nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 1.1rem;
    right: 1.1rem;
    height: 1.5px;
    background-color: var(--color-accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
}

.header-nav-link:hover {
    color: var(--color-accent-hover);
}

.header-nav-link:hover::after {
    transform: scaleX(1);
}

.header-nav-link.active {
    color: var(--color-accent);
}

.header-nav-link.active::after {
    transform: scaleX(1);
}


/* --- Mobile Toggle --- */

.header-nav-toggle {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    padding: 0.5rem 0.15rem;
    cursor: pointer;
    position: absolute;
    inset-inline-end: 0;
}

.toggle-bars {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 5px;
    width: 20px;
    flex-shrink: 0;
}

.toggle-bar {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--color-navy);
    border-radius: 1px;
    transition: transform 0.3s ease, opacity 0.25s ease;
}

.toggle-label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-navy);
}

.header-nav-toggle[aria-expanded="true"] .toggle-bars .toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.header-nav-toggle[aria-expanded="true"] .toggle-bars .toggle-bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.header-nav-toggle[aria-expanded="true"] .toggle-bars .toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.header-nav-toggle[aria-expanded="true"] .toggle-label {
    color: var(--color-accent);
}


/* --- Mobile: full-screen overlay menu (editorial / institute) — hidden on lg+ via .d-lg-none --- */

.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg-primary);
    color: var(--color-navy);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.38s ease, visibility 0.38s ease;
}

.mobile-menu-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.mobile-menu-overlay__inner {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    min-height: 100vh;
    width: 100%;
    max-width: 32rem;
    margin-inline: auto;
    padding: max(0.75rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(1.25rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
    transform: translateY(0.75rem);
    opacity: 0;
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.38s ease;
}

.mobile-menu-overlay.is-open .mobile-menu-overlay__inner {
    transform: translateY(0);
    opacity: 1;
}

.mobile-menu-overlay__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding-bottom: 1.25rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--color-border-light);
}

.mobile-menu-overlay__head-label {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.mobile-menu-overlay__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: rgba(255, 255, 255, 0.65);
    color: var(--color-navy);
    cursor: pointer;
    transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

.mobile-menu-overlay__close:hover {
    background-color: var(--color-bg-white);
    border-color: var(--color-navy);
    color: var(--color-navy);
}

.mobile-menu-overlay__close:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.mobile-menu-overlay__nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem 0 1.5rem;
}

.mobile-menu-overlay__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-menu-overlay__item {
    border-bottom: 1px solid rgba(228, 224, 218, 0.85);
}

.mobile-menu-overlay__item:last-child {
    border-bottom: none;
}

.mobile-menu-overlay__link {
    display: block;
    width: 100%;
    padding: 1.1rem 0.15rem;
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0.02em;
    color: var(--color-navy);
    text-decoration: none;
    transition: color 0.25s ease, padding-inline-start 0.25s ease;
}

.mobile-menu-overlay__link:hover,
.mobile-menu-overlay__link:focus-visible {
    color: var(--color-accent-hover);
    padding-inline-start: 0.35rem;
}

.mobile-menu-overlay__link.is-active {
    color: var(--color-accent);
    padding-inline-start: 0.35rem;
}

.mobile-menu-overlay__foot {
    flex-shrink: 0;
    margin-top: auto;
    padding-top: 1.75rem;
    border-top: 1px solid var(--color-border-light);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.mobile-menu-overlay__foot-contact {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mobile-menu-overlay__foot-email,
.mobile-menu-overlay__foot-phone {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color var(--transition-base);
}

.mobile-menu-overlay__foot-email:hover,
.mobile-menu-overlay__foot-phone:hover {
    color: var(--color-accent);
}

.mobile-menu-overlay__langs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

.mobile-menu-overlay__lang {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition-base);
}

.mobile-menu-overlay__lang:hover {
    color: var(--color-navy);
}

.mobile-menu-overlay__lang.is-active {
    color: var(--color-accent);
}

.mobile-menu-overlay__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    align-self: flex-start;
    padding: 0.65rem 1.25rem;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-navy);
    text-decoration: none;
    border: 1px solid var(--color-navy);
    border-radius: var(--radius-sm);
    background-color: rgba(255, 255, 255, 0.5);
    transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.mobile-menu-overlay__cta:hover {
    background-color: var(--color-navy);
    color: #fff;
    border-color: var(--color-navy);
}

.mobile-menu-overlay__note {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    opacity: 0.85;
}

body.menu-overlay-open {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .mobile-menu-overlay,
    .mobile-menu-overlay__inner {
        transition: none !important;
    }
}


/* ----------------------------------------------------------
   Hero — Full-bleed background image with soft light overlay
   ---------------------------------------------------------- */
.hero {
    position: relative;
    background-image: url('/images/home.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 6.5rem 0 7rem;
    overflow: hidden;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 248, 230, 0.75);
    z-index: 1;
}

.hero-content {
    text-align: center;
    max-width: 620px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.hero-overline {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 1.75rem;
}

.hero-title {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    font-weight: 600;
    line-height: 1.15;
    color: #1f2a37;
    margin-bottom: 0;
    letter-spacing: -0.01em;
}

.hero-rule {
    width: 48px;
    height: 1.5px;
    background-color: var(--color-accent);
    margin: 1.75rem auto;
    opacity: 0.85;
}

.hero-lead {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.85;
    color: #4b5563;
    margin-bottom: 2.25rem;
    max-width: 540px;
    margin-inline: auto;
}

.hero-actions {
    display: flex;
    justify-content: center;
    gap: 0.875rem;
    flex-wrap: wrap;
}


/* Hero buttons */

.btn-hero-primary {
    display: inline-block;
    padding: 0.7rem 2rem;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: #1f2a37;
    background-color: #c89b6d;
    border: none;
    border-radius: 3px;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(26, 39, 68, 0.08), 0 2px 8px rgba(200, 155, 109, 0.25);
    transition: background-color var(--transition-base), color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.btn-hero-primary:hover {
    background-color: #b88a5a;
    color: #1a2744;
    box-shadow: 0 2px 6px rgba(26, 39, 68, 0.1), 0 4px 14px rgba(200, 155, 109, 0.28);
    transform: translateY(-1px);
}

.btn-hero-primary:focus-visible {
    outline: 2px solid #1f2a37;
    outline-offset: 3px;
}

.btn-hero-secondary {
    display: inline-block;
    padding: 0.7rem 2rem;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: #c89b6d;
    background-color: transparent;
    border: 2px solid #c89b6d;
    border-radius: 3px;
    text-decoration: none;
    transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.btn-hero-secondary:hover {
    border-color: #b88a5a;
    color: #b88a5a;
    background-color: rgba(200, 155, 109, 0.14);
}

.btn-hero-secondary:focus-visible {
    outline: 2px solid #c89b6d;
    outline-offset: 3px;
}


/* --- Hero decorative corners --- */

.hero-content::before,
.hero-content::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    border-color: rgba(26, 39, 68, 0.12);
    border-style: solid;
    opacity: 1;
}

.hero-content::before {
    top: -1.75rem;
    left: -2rem;
    border-width: 1px 0 0 1px;
}

.hero-content::after {
    bottom: -1.75rem;
    right: -2rem;
    border-width: 0 1px 1px 0;
}


/* ----------------------------------------------------------
   Inner Page Hero — Refined editorial page header
   Reused across all subpages for visual consistency
   ---------------------------------------------------------- */
.page-hero {
    position: relative;
    background-image: url('/images/home.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 3.5rem 0 3.75rem;
    overflow: hidden;
}

.page-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 248, 230, 0.75);
    z-index: 1;
}

.page-hero-content {
    max-width: 640px;
    text-align: center;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}


/* --- Breadcrumb --- */

.page-breadcrumb ol {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    padding: 0;
    margin: 0 0 1.75rem;
}

.page-breadcrumb li {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    color: rgba(75, 85, 99, 0.85);
}

.page-breadcrumb li + li::before {
    content: '/';
    display: inline-block;
    margin: 0 0.5rem;
    color: rgba(75, 85, 99, 0.35);
    font-weight: 300;
}

.page-breadcrumb a {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color var(--transition-base);
}

.page-breadcrumb a:hover {
    color: var(--color-accent-hover);
}


/* --- Page hero typography --- */

.page-hero-overline {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 0.875rem;
}

.page-hero-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.2;
    color: #1f2a37;
    margin-bottom: 0;
    letter-spacing: -0.01em;
}

.page-hero-desc {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.8;
    color: #4b5563;
    margin-top: 1rem;
    margin-bottom: 0;
    max-width: 520px;
    margin-inline: auto;
}


/* --- Generic inner-page content section --- */

.page-section {
    padding: var(--section-py) 0;
}

.page-section + .page-section,
.page-section + .page-cta {
    border-top: 1px solid var(--color-border-light);
}

.page-section--soft {
    background-color: var(--color-bg-soft);
    border-color: transparent;
}

.page-section--soft + .page-section:not(.page-section--soft) {
    border-color: transparent;
}

.page-section--white {
    background-color: var(--color-bg-white);
}

.page-section-header {
    text-align: center;
    max-width: 560px;
    margin: 0 auto var(--section-header-mb);
}

.page-section-header:last-child {
    margin-bottom: 0;
}

/* --- Services page — editorial offering blocks & booking modal --- */

.service-offering {
    max-width: 820px;
    margin: 0 auto;
    padding: 2.5rem 2.75rem;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.page-section--soft .service-offering {
    background: var(--color-bg-white);
}

.service-offering__title {
    font-family: var(--font-heading);
    font-size: clamp(1.35rem, 2.5vw, 1.75rem);
    font-weight: 600;
    color: var(--color-navy);
    margin-bottom: 0.75rem;
    line-height: 1.25;
}

.service-offering__sub {
    font-size: 1.0625rem;
    color: var(--color-text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.65;
}

.service-offering__points {
    margin: 0 0 1.75rem;
    padding-left: 1.25rem;
    color: var(--color-text-primary);
}

.service-offering__points li {
    margin-bottom: 0.5rem;
    padding-left: 0.25rem;
}

.service-offering__points li:last-child {
    margin-bottom: 0;
}

.service-offering__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    margin-bottom: 0.5rem;
}

.service-offering__actions .btn-cta-secondary {
    margin: 0;
}

/* CTA secondary is defined for dark strips; on light cards use editorial outline */
.service-offering .btn-cta-secondary {
    color: var(--color-navy);
    border-color: var(--color-border);
    background-color: transparent;
}

.service-offering .btn-cta-secondary:hover {
    color: var(--color-accent-hover);
    border-color: var(--color-accent);
    background-color: var(--color-accent-light);
}

.service-offering .btn-cta-primary {
    cursor: pointer;
    border: 1.5px solid var(--color-accent);
    line-height: 1.4;
}

/* --- Projects portfolio — rectangular academic cards --- */

.project-card {
    height: 100%;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 2rem 2rem 1.95rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.project-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

/* Focus label — distinct from title (not a heading) */
.project-card__focus {
    display: block;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 0.625rem;
    line-height: 1.4;
}

.project-card__title {
    font-family: var(--font-heading);
    font-size: 1.3125rem;
    line-height: 1.28;
    letter-spacing: -0.01em;
    color: var(--color-navy);
    margin: 0 0 0.875rem;
}

.project-card__desc {
    font-size: 0.9rem;
    line-height: 1.72;
    color: var(--color-text-secondary);
    flex-grow: 1;
    min-height: 0;
}

.project-card__desc p {
    margin-bottom: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 8;
    line-clamp: 8;
    overflow: hidden;
}

.project-card__desc p:last-child {
    margin-bottom: 0;
}

/* Completed — archived, stable, academic */
.project-card--completed {
    background: #fafaf8;
    border-color: rgba(15, 23, 42, 0.1);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.project-card--completed:hover {
    border-color: rgba(15, 23, 42, 0.14);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
}

/* Ongoing — active, current */
.project-card--ongoing {
    padding: 2.15rem 2.35rem 2rem;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--color-border-light);
    border-left: 3px solid var(--color-accent);
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05);
}

.project-card--ongoing:hover {
    border-left-color: var(--color-accent-hover);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.09);
}

.project-card__ongoing-head {
    margin: 0 0 0.75rem;
}

.project-card--ongoing .project-card__desc p {
    -webkit-line-clamp: 12;
    line-clamp: 12;
}

.project-card__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.75rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 999px;
    border: 1px solid var(--color-accent);
    color: var(--color-accent-hover);
    background: var(--color-accent-light);
    white-space: nowrap;
}

.project-section-helper {
    margin: 0.5rem 0 0;
    max-width: 42rem;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--color-text-secondary);
    opacity: 0.92;
}

@media (max-width: 575.98px) {
    .project-card {
        padding: 1.65rem 1.4rem 1.5rem;
    }

    .project-card--ongoing {
        padding: 1.65rem 1.45rem 1.55rem;
    }

    .project-card__title {
        font-size: 1.2rem;
    }

    .project-card__focus {
        margin-bottom: 0.5rem;
    }

    .project-card__desc p {
        -webkit-line-clamp: 10;
        line-clamp: 10;
    }
}

.service-offering__collapse {
    margin-top: 1.75rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--color-border-light);
}

.service-offering__collapse.collapsing {
    transition: height 0.35s ease;
}

.service-offering__more > *:last-child {
    margin-bottom: 0;
}

.service-offering__pricing ul,
.service-offering__includes ul {
    margin-bottom: 1rem;
    padding-left: 1.25rem;
}

.booking-flow-modal__content {
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lift);
}

.booking-flow-modal__header .modal-title {
    font-family: var(--font-heading);
    color: var(--color-navy);
}

.booking-flow-iframe-wrap {
    min-height: 38rem;
    background: var(--color-bg-soft);
}

.booking-flow-iframe {
    border: 0;
    min-height: 38rem;
    display: block;
}

.booking-slot-btn.active {
    color: #fff;
    background-color: var(--color-navy);
    border-color: var(--color-navy);
}

.booking-region-option {
    display: block;
    margin: 0;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(15, 35, 60, 0.12);
    border-radius: var(--radius-md);
    background: var(--color-bg-soft);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    height: 100%;
}

.booking-region-option:hover {
    border-color: rgba(15, 35, 60, 0.22);
}

.booking-region-option--selected {
    border-color: var(--color-navy);
    box-shadow: 0 0 0 1px var(--color-navy);
    background: #fff;
}

.booking-region-option .form-check-input {
    float: left;
    margin-top: 0.35rem;
    margin-right: 0.65rem;
}

.booking-region-option__title {
    display: block;
    font-weight: 600;
    color: var(--color-navy);
    margin-bottom: 0.25rem;
}

.booking-region-option__hint {
    display: block;
    font-size: 0.8125rem;
    color: var(--color-text-muted, #5c6570);
    line-height: 1.35;
}

@media (max-width: 575.98px) {
    .service-offering {
        padding: 1.75rem 1.35rem;
    }

    .service-offering__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .service-offering__actions .btn {
        width: 100%;
        text-align: center;
    }
}

/* --- Error pages (404, 500) --- */
/* Scoped button look on light error background (differs from global hero buttons) */
.page-section.error-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: min(calc(100vh - 14rem), 38rem);
    padding-top: clamp(1.75rem, 5vw, 2.75rem);
    padding-bottom: clamp(1.75rem, 5vw, 2.75rem);
}

.error-page .container {
    width: 100%;
    max-width: 40rem;
}

.error-page__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.75rem 1rem;
}

.error-page .btn-hero-secondary {
    color: var(--color-navy);
    border-color: var(--color-navy);
    background-color: rgba(255, 255, 255, 0.92);
    box-shadow: var(--shadow-sm);
}

.error-page .btn-hero-secondary:hover {
    color: #fff;
    background-color: var(--color-navy);
    border-color: var(--color-navy);
}

.error-page .btn-hero-secondary:focus-visible {
    outline: 2px solid var(--color-navy);
    outline-offset: 3px;
}

.error-page__code {
    font-family: var(--font-heading);
    font-size: clamp(3.25rem, 11vw, 6rem);
    font-weight: 500;
    line-height: 1;
    color: var(--color-navy);
    opacity: 0.9;
    letter-spacing: -0.03em;
    margin-bottom: 0.5rem;
}

.error-page__title {
    font-family: var(--font-heading);
    font-weight: 500;
    color: var(--color-navy);
    margin-top: 0;
    margin-bottom: 1rem;
}

.error-page__lead {
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
    color: var(--color-text-secondary);
    font-size: 1.05rem;
    line-height: 1.65;
}


/* --- Page CTA — closing call-to-action block --- */

.page-cta {
    background-color: var(--color-navy);
    padding: var(--section-py) 0;
    text-align: center;
    position: relative;
}

.page-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(184, 150, 62, 0.2) 50%,
        transparent 100%
    );
}

.page-cta-inner {
    max-width: 540px;
    margin: 0 auto;
}

.page-cta-title {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.25;
    color: #FFFFFF;
    margin-bottom: 1rem;
}

.page-cta-text {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 1.75rem;
}

.page-cta-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.btn-cta-primary {
    display: inline-block;
    padding: 0.75rem 2rem;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: #FFFFFF;
    background-color: var(--color-accent);
    border: 1.5px solid var(--color-accent);
    border-radius: 3px;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(184, 150, 62, 0.2);
    transition: all var(--transition-base);
}

.btn-cta-primary:hover {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(184, 150, 62, 0.25);
}

.btn-cta-secondary {
    display: inline-block;
    padding: 0.7rem 2rem;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.85);
    background-color: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    border-radius: 3px;
    text-decoration: none;
    transition: all var(--transition-base);
}

.btn-cta-secondary:hover {
    border-color: rgba(255, 255, 255, 0.6);
    color: #FFFFFF;
    background-color: rgba(255, 255, 255, 0.06);
}


/* ----------------------------------------------------------
   Prose Section — Editorial two-column block
   ---------------------------------------------------------- */
.prose-section {
    padding: var(--section-py) 0;
    background-color: var(--color-bg-soft);
}

.prose-body {
    max-width: 620px;
}

.prose-body iframe,
.prose-body video {
    max-width: 100%;
}

.prose-body p {
    font-size: 0.9375rem;
    line-height: 1.8;
    color: var(--color-text-secondary);
    margin-bottom: 1.125rem;
}

.prose-list {
    list-style: none;
    padding: 0;
    margin: 0.25rem 0 1.25rem;
}

.prose-list li {
    position: relative;
    padding: 0.35rem 0;
    padding-inline-start: 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.8;
    color: var(--color-text-secondary);
}

.prose-list li::before {
    content: '–';
    position: absolute;
    inset-inline-start: 0;
    color: var(--color-accent);
    font-weight: 600;
}

.prose-body p:last-of-type {
    margin-bottom: 0;
}

.prose-quote {
    position: relative;
    margin: 2rem 0 0;
    padding: 1.5rem 0 0;
    border-top: 1px solid var(--color-border);
    overflow-x: clip;
}

.prose-quote::before {
    content: '\201C';
    position: absolute;
    top: -0.15rem;
    inset-inline-start: 0;
    font-family: var(--font-heading);
    font-size: 3.5rem;
    line-height: 1;
    color: var(--color-accent);
    opacity: 0.35;
    pointer-events: none;
}

.prose-quote p {
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-style: italic;
    font-weight: 400;
    line-height: 1.7;
    color: var(--color-navy);
    margin-bottom: 0;
    padding-inline-start: 1.25rem;
}

.prose-quote cite {
    display: block;
    font-family: var(--font-body);
    font-style: normal;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--color-text-muted);
    letter-spacing: 0.02em;
    padding-inline-start: 1.25rem;
}

.prose-figure {
    margin: 0;
    position: sticky;
    top: 80px;
}

.prose-figure-frame {
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 10px;
    box-shadow: var(--shadow-md);
}

.prose-figure-placeholder {
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-light);
    border-radius: 2px;
    height: 380px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.prose-figure-placeholder i {
    font-size: 2.25rem;
    opacity: 0.3;
}

.prose-figure-caption {
    font-size: 0.8125rem;
    font-style: italic;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-top: 0.75rem;
    padding: 0 0.125rem;
}


/* ----------------------------------------------------------
   Focus Section — Tall editorial vertical cards
   ---------------------------------------------------------- */
.focus-section {
    padding: var(--section-py) 0;
    background-color: var(--color-bg-primary);
}

.focus-header {
    text-align: center;
    max-width: 540px;
    margin: 0 auto var(--section-header-mb);
}

.focus-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    padding: 2.5rem 2rem 2.25rem;
}

.focus-card-number {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 300;
    color: var(--color-accent);
    opacity: 0.4;
    line-height: 1;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

.focus-card-title {
    font-family: var(--font-heading);
    font-size: 1.3125rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.005em;
    color: var(--color-navy);
    margin-bottom: 1rem;
}

.focus-card-text {
    font-size: 0.875rem;
    line-height: 1.75;
    color: var(--color-text-secondary);
    margin-bottom: 0;
    flex-grow: 1;
}

.focus-card-text p {
    margin-bottom: 0.625rem;
}

.focus-card-text p:last-child {
    margin-bottom: 0;
}

.focus-card-link {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border-light);
}


/* ----------------------------------------------------------
   Research — Featured book (editorial block)
   ---------------------------------------------------------- */
.research-featured-book-section {
    padding-top: 0;
    padding-bottom: 2.5rem;
}

.research-featured-book {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 2.5rem 3rem;
    max-width: 960px;
    margin: 0 auto;
    padding: 2.25rem 2.5rem;
    background: linear-gradient(165deg, #fafaf8 0%, #f6f4ef 55%, #fafaf8 100%);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.research-featured-book__cover {
    flex: 0 0 auto;
    width: 100%;
    max-width: 200px;
    margin-inline: auto;
}

.research-featured-book__figure {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    box-shadow:
        0 18px 40px rgba(15, 23, 42, 0.12),
        0 2px 0 rgba(255, 255, 255, 0.6) inset;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: var(--color-bg-white);
}

.research-featured-book__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;
    object-fit: cover;
}

.research-featured-book__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 2 / 3;
    width: 100%;
    max-width: 200px;
    margin-inline: auto;
    border-radius: 4px;
    border: 1px dashed rgba(15, 23, 42, 0.14);
    background: rgba(255, 255, 255, 0.65);
    color: var(--color-accent);
    font-size: 2.25rem;
}

.research-featured-book__body {
    flex: 1 1 280px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 0.25rem;
}

.research-featured-book__overline {
    margin-bottom: 0.75rem;
}

.research-featured-book__title {
    font-family: var(--font-heading);
    font-size: 1.65rem;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -0.02em;
    color: var(--color-navy);
    margin: 0 0 1rem;
}

.research-featured-book__summary {
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--color-text-secondary);
    margin: 0 0 1.35rem;
    max-width: 38rem;
}

.research-featured-book__status {
    margin: 0;
}

.research-featured-book__status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.85rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent-hover);
    background: var(--color-accent-light);
    border: 1px solid rgba(184, 150, 62, 0.35);
    border-radius: 999px;
}

@media (min-width: 768px) {
    .research-featured-book {
        flex-wrap: nowrap;
        padding: 2.5rem 3rem;
    }

    .research-featured-book__cover {
        max-width: 220px;
        margin-inline: 0;
    }
}

@media (max-width: 575.98px) {
    .research-featured-book {
        padding: 1.65rem 1.35rem;
        gap: 1.5rem;
    }

    .research-featured-book__title {
        font-size: 1.4rem;
    }
}


/* ----------------------------------------------------------
   Publications Section — Archival list layout
   ---------------------------------------------------------- */
.pubs-section {
    padding: var(--section-py) 0;
    background-color: var(--color-bg-soft);
}

.pubs-header {
    text-align: center;
    max-width: 540px;
    margin: 0 auto var(--section-header-mb);
}

.pubs-filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2.25rem;
}

.pubs-filter {
    display: inline-block;
    padding: 0.4rem 1.05rem;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: var(--color-text-secondary);
    background-color: transparent;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    cursor: pointer;
    transition: all var(--transition-base);
    line-height: 1.4;
}

.pubs-filter:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.pubs-filter.is-active {
    background-color: var(--color-navy);
    border-color: var(--color-navy);
    color: #FFFFFF;
    box-shadow: var(--shadow-sm);
}

.pubs-list {
    max-width: 820px;
    margin: 0 auto;
}

.pubs-list-empty {
    text-align: center;
    max-width: 820px;
    margin: 0 auto;
    padding: 2rem 1rem 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-text-muted);
}

.pubs-list-empty[hidden] {
    display: none !important;
}

.pubs-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    padding: 1.75rem 0;
    border-top: 1px solid var(--color-border);
}

.pubs-item:last-child {
    border-bottom: 1px solid var(--color-border);
}

.pubs-item-body {
    flex: 1;
    min-width: 0;
}

.pubs-item-thumb {
    flex-shrink: 0;
    width: 112px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--color-border-light);
    align-self: flex-start;
}

.pubs-item-thumb img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.pubs-item-category {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 0.375rem;
}

.pubs-item-title {
    font-family: var(--font-heading);
    font-size: 1.1875rem;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 0.625rem;
}

.pubs-item-title a {
    color: var(--color-navy);
    text-decoration: none;
    transition: color var(--transition-base);
}

.pubs-item-title a:hover {
    color: var(--color-accent);
}

.pubs-item-summary {
    font-size: 0.875rem;
    line-height: 1.75;
    color: var(--color-text-secondary);
    margin-bottom: 0.625rem;
}

.pubs-item-meta {
    flex-shrink: 0;
    min-width: 0;
    text-align: end;
    padding-top: 0.15rem;
}

.pubs-item-meta time {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-text-muted);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.pubs-footer {
    text-align: center;
    margin-top: 2.5rem;
}


/* ----------------------------------------------------------
   Blog — Editorial listing & article cards
   ---------------------------------------------------------- */
.page-section--blog.blog-page {
    padding-top: clamp(2.25rem, 4.5vw, 3.5rem);
}

.blog-page__container {
    max-width: 1140px;
}

/* Topics — compact editorial filter bar (desktop) / scroll rail (small screens) */
.blog-topics {
    margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
    padding-bottom: clamp(1rem, 2vw, 1.35rem);
    border-bottom: 1px solid hsl(215 14% 90%);
}

.blog-topics__header {
    text-align: center;
    max-width: 32rem;
    margin: 0 auto clamp(1rem, 2.2vw, 1.35rem);
}

.blog-topics__heading {
    font-family: var(--font-heading);
    font-size: 1.1875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: hsl(215 22% 20%);
    margin: 0 0 0.4rem;
}

.blog-topics__sub {
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.55;
    color: hsl(215 14% 38%);
    margin: 0;
}

.blog-category-nav__scroll {
    width: 100%;
}

/* Base: horizontal scroll rail (tablet + mobile) */
.blog-category-nav__list {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.65rem;
    list-style: none;
    margin: 0;
    padding: 0 0 0.2rem;
    width: max-content;
    max-width: none;
}

.blog-category-nav__item {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

/* Category filter chips — compact */
.blog-cat-thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 5.5rem;
    min-width: 5.5rem;
    padding: 0.42rem 0.35rem 0.48rem;
    text-decoration: none;
    color: hsl(215 14% 38%);
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    transition:
        color 0.22s ease,
        background 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease;
}

.blog-cat-thumb:hover {
    color: hsl(215 28% 20%);
    background: hsl(215 25% 99%);
    border-color: hsl(215 14% 90%);
    box-shadow: 0 6px 20px -14px hsl(215 22% 25% / 0.2);
}

.blog-cat-thumb.is-active {
    color: hsl(215 30% 17%);
    background: hsl(215 28% 99%);
    border-color: hsl(215 18% 86%);
    box-shadow:
        0 0 0 1px hsl(215 26% 38% / 0.22),
        0 8px 22px -16px hsl(215 22% 22% / 0.14);
}

.blog-cat-thumb__visual-wrap {
    display: block;
    width: 100%;
    max-width: 3.85rem;
    margin-inline: auto;
}

.blog-cat-thumb:hover .blog-cat-visual__stack {
    box-shadow:
        0 8px 22px rgba(15, 35, 60, 0.1),
        inset 0 0 0 1px rgba(15, 35, 60, 0.06);
    transform: translateY(-1px);
}

.blog-cat-thumb.is-active .blog-cat-visual__stack {
    box-shadow:
        0 0 0 1px hsl(215 26% 42% / 0.35),
        0 10px 26px -14px rgba(15, 35, 60, 0.12);
    transform: translateY(-1px);
}

.blog-cat-thumb__label {
    display: block;
    width: 100%;
    margin-top: 0.45rem;
    text-align: center;
}

.blog-cat-thumb__label-inner {
    display: block;
    font-family: var(--font-body);
    font-size: 0.71875rem;
    font-weight: 500;
    line-height: 1.32;
    letter-spacing: 0.02em;
    hyphens: none;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-height: 2.45em;
    max-width: 5.25rem;
    margin-inline: auto;
}

.blog-cat-thumb:hover .blog-cat-thumb__label-inner,
.blog-cat-thumb.is-active .blog-cat-thumb__label-inner {
    font-weight: 600;
    color: hsl(215 25% 18%);
}

/* Small screens: swipe rail, hidden scrollbar */
@media (max-width: 991.98px) {
    .blog-category-nav__scroll {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        margin-inline: calc(-1 * var(--bs-gutter-x, 0.75rem));
        padding: 0.15rem calc(var(--bs-gutter-x, 0.75rem)) 0.35rem;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .blog-category-nav__scroll::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .blog-category-nav__list {
        gap: 0.7rem;
    }
}

/* Desktop: centered compact filter row (wraps to 2nd line only if needed) */
@media (min-width: 992px) {
    .blog-category-nav__scroll {
        overflow: visible;
    }

    .blog-category-nav__list {
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        gap: 0.55rem 0.7rem;
        width: 100%;
        max-width: 100%;
        margin-inline: auto;
        padding-bottom: 0;
    }

    .blog-category-nav__item {
        scroll-snap-align: unset;
    }

    .blog-cat-thumb {
        width: 5.15rem;
        min-width: 5.15rem;
        padding: 0.38rem 0.32rem 0.44rem;
    }

    .blog-cat-thumb__visual-wrap {
        max-width: 3.65rem;
    }

    .blog-cat-thumb__label-inner {
        font-size: 0.6875rem;
        min-height: 2.35em;
        max-width: 5rem;
    }
}

/* Layered planes + frost — editorial, not “tech UI” */
.blog-cat-visual {
    --bc-a: 215 30% 42%;
    --bc-b: 208 26% 52%;
    --bc-c: 218 20% 62%;
    --bc-bg: 215 22% 94%;
    --bc-icon: 215 35% 28%;
    display: block;
    width: 100%;
}

.blog-cat-visual--all {
    --bc-a: 215 22% 48%;
    --bc-b: 210 18% 58%;
    --bc-c: 220 15% 68%;
    --bc-bg: 215 18% 95%;
    --bc-icon: 215 25% 35%;
}

.blog-cat-visual--statements {
    --bc-a: 16 38% 44%;
    --bc-b: 215 32% 40%;
    --bc-c: 200 24% 54%;
    --bc-bg: 20 20% 95%;
    --bc-icon: 215 40% 30%;
}

.blog-cat-visual--institute_news {
    --bc-a: 205 34% 44%;
    --bc-b: 200 28% 52%;
    --bc-c: 195 22% 62%;
    --bc-bg: 205 20% 95%;
    --bc-icon: 205 38% 32%;
}

.blog-cat-visual--research {
    --bc-a: 225 32% 42%;
    --bc-b: 220 28% 50%;
    --bc-c: 215 22% 60%;
    --bc-bg: 222 22% 95%;
    --bc-icon: 225 35% 30%;
}

.blog-cat-visual--programs_events {
    --bc-a: 168 28% 40%;
    --bc-b: 210 26% 46%;
    --bc-c: 200 20% 58%;
    --bc-bg: 175 18% 95%;
    --bc-icon: 200 32% 28%;
}

.blog-cat-visual--publications {
    --bc-a: 32 36% 46%;
    --bc-b: 215 26% 44%;
    --bc-c: 205 22% 58%;
    --bc-bg: 35 22% 95%;
    --bc-icon: 215 32% 32%;
}

.blog-cat-visual--heritage_culture {
    --bc-a: 38 42% 44%;
    --bc-b: 28 32% 48%;
    --bc-c: 215 24% 56%;
    --bc-bg: 32 24% 94%;
    --bc-icon: 28 38% 30%;
}

.blog-cat-visual--dialogue {
    --bc-a: 265 24% 48%;
    --bc-b: 215 28% 44%;
    --bc-c: 230 20% 58%;
    --bc-bg: 260 18% 96%;
    --bc-icon: 255 28% 34%;
}

.blog-cat-visual--custom {
    --bc-a: 215 18% 50%;
    --bc-b: 210 16% 60%;
    --bc-c: 205 14% 70%;
    --bc-bg: 215 14% 96%;
    --bc-icon: 215 22% 38%;
}

.blog-cat-visual__stack {
    position: relative;
    display: block;
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    background: hsl(var(--bc-bg));
    box-shadow: inset 0 0 0 1px rgba(15, 35, 60, 0.07);
    transition: box-shadow 0.28s ease, transform 0.28s ease;
}

.blog-cat-visual--nav .blog-cat-visual__stack {
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: none;
    margin-inline: auto;
}

.blog-cat-visual--card .blog-cat-visual__stack {
    aspect-ratio: 16 / 10;
    width: 100%;
}

.blog-cat-visual__plane {
    position: absolute;
    pointer-events: none;
    border-radius: 2px;
    opacity: 0.92;
}

.blog-cat-visual__plane--a {
    width: 64%;
    height: 52%;
    left: 7%;
    top: 14%;
    background: hsl(var(--bc-a) / 0.88);
    transform: rotate(-9deg);
    transform-origin: 40% 60%;
}

.blog-cat-visual__plane--b {
    width: 56%;
    height: 50%;
    right: 5%;
    bottom: 12%;
    background: hsl(var(--bc-b) / 0.78);
    transform: rotate(12deg);
    transform-origin: 60% 50%;
}

.blog-cat-visual__plane--c {
    width: 44%;
    height: 38%;
    left: 36%;
    top: 36%;
    background: hsl(var(--bc-c) / 0.62);
    transform: rotate(-4deg);
    mix-blend-mode: multiply;
}

.blog-cat-visual__frost {
    position: absolute;
    inset: 0;
    pointer-events: none;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.42) 0%,
        rgba(255, 255, 255, 0.06) 42%,
        rgba(15, 35, 60, 0.1) 100%
    );
}

.blog-cat-visual__grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.07;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
}

.blog-cat-visual__icon {
    position: absolute;
    right: 9%;
    bottom: 10%;
    font-size: 1.05rem;
    line-height: 1;
    color: hsl(var(--bc-icon) / 0.48);
    pointer-events: none;
    z-index: 2;
    filter: drop-shadow(0 1px 1px hsl(0 0% 100% / 0.35));
}

.blog-cat-visual--nav .blog-cat-visual__icon {
    font-size: 1rem;
    right: 10%;
    bottom: 11%;
    color: hsl(var(--bc-icon) / 0.55);
}

.blog-cat-visual--card .blog-cat-visual__icon {
    font-size: 1.65rem;
    right: 8%;
    bottom: 9%;
}

.blog-articles-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.75rem 1.5rem;
}

@media (min-width: 768px) {
    .blog-articles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .blog-articles-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem 1.75rem;
    }
}

/* Listing region — clear separation from topics */
.blog-listing {
    padding-top: 0.25rem;
}

.blog-listing--after-topics {
    padding-top: clamp(1.35rem, 2.5vw, 2rem);
}

.blog-articles-grid--listing {
    gap: 2rem 1.75rem;
}

@media (min-width: 1200px) {
    .blog-articles-grid--listing {
        gap: 2.25rem 2rem;
    }
}

/* Empty state — calm, finished */
.blog-empty-state {
    padding: clamp(2.5rem, 6vw, 4rem) clamp(1.25rem, 4vw, 2.5rem);
    margin: 0 auto;
    max-width: 32rem;
}

.blog-empty-state__frame {
    text-align: center;
    padding: clamp(2rem, 5vw, 2.75rem) clamp(1.5rem, 4vw, 2rem);
    border-radius: var(--radius-md);
    background: linear-gradient(165deg, hsl(215 22% 98%) 0%, hsl(40 25% 99%) 100%);
    border: 1px solid hsl(215 14% 88%);
    box-shadow: 0 12px 40px -28px hsl(215 22% 20% / 0.18);
}

.blog-empty-state__mark {
    display: block;
    width: 2.5rem;
    height: 1px;
    margin: 0 auto 1.35rem;
    background: linear-gradient(90deg, transparent, hsl(215 22% 72%), transparent);
}

.blog-empty-state__title {
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.45;
    color: hsl(215 22% 26%);
    margin: 0 0 0.75rem;
}

.blog-empty-state__text {
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.7;
    color: hsl(215 12% 42%);
    margin: 0;
}

/* Art gallery */
/* --- Art Gallery index --- */
.gallery-index__container {
    max-width: 1200px;
}

.gallery-index__header {
    text-align: center;
    max-width: 36rem;
    margin: 0 auto 3.5rem;
    padding: 0 0.5rem;
}

@media (min-width: 768px) {
    .gallery-index__header {
        margin-bottom: 4.25rem;
    }
}

.gallery-index__kicker {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: hsl(215 12% 46%);
    margin: 0 0 0.75rem;
}

.gallery-index__intro {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.85;
    color: hsl(215 15% 38%);
    margin: 0;
}

/* Gallery uses .blog-pagination-wrap; spacing lives there */
.gallery-index__pagination {
    margin-top: clamp(2rem, 4vw, 2.75rem);
}

.gallery-index__empty {
    text-align: center;
    padding: 4rem 1.5rem;
    border: 1px dashed hsl(215 14% 85%);
    border-radius: var(--radius-md);
    background: hsl(215 20% 99%);
}

.gallery-index__empty-text {
    font-size: 0.9375rem;
    color: hsl(215 12% 45%);
    max-width: 22rem;
    margin-inline: auto;
}

.gallery-artworks-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem 1.75rem;
}

.gallery-artworks-grid--editorial {
    gap: 2.35rem 2rem;
}

@media (min-width: 768px) {
    .gallery-artworks-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery-artworks-grid--editorial {
        gap: 2.75rem 2.25rem;
    }
}

@media (min-width: 1200px) {
    .gallery-artworks-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .gallery-artworks-grid--editorial {
        gap: 3.25rem 2.5rem;
    }
}

.artwork-card {
    height: 100%;
}

.artwork-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
    border: 1px solid hsl(215 14% 88%);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    overflow: hidden;
    transition:
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        transform 0.35s ease;
}

.artwork-card__link:hover {
    border-color: hsl(215 18% 78%);
    box-shadow: 0 18px 40px -24px hsl(215 25% 20% / 0.18);
    transform: translateY(-3px);
}

.artwork-card__link:focus-visible {
    outline: 2px solid hsl(215 35% 45%);
    outline-offset: 3px;
}

.artwork-card__media {
    display: block;
    background: hsl(215 12% 96%);
}

.artwork-card__frame {
    display: block;
    overflow: hidden;
}

.artwork-card__frame img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 6;
    object-fit: cover;
    vertical-align: middle;
    transform: scale(1.001);
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.artwork-card__link:hover .artwork-card__frame img {
    transform: scale(1.035);
}

.artwork-card__frame--empty {
    display: block;
    aspect-ratio: 5 / 6;
    background: linear-gradient(160deg, hsl(215 16% 94%) 0%, hsl(215 10% 88%) 100%);
}

.artwork-card__body {
    padding: 1.35rem 1.4rem 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.artwork-card__title {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 500;
    margin: 0;
    line-height: 1.35;
    letter-spacing: 0.01em;
    color: hsl(215 25% 18%);
}

.artwork-card__meta {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: hsl(215 12% 46%);
    margin: 0;
}

.artwork-card__meta-sep {
    margin: 0 0.35rem;
    opacity: 0.65;
}

.artwork-card__excerpt {
    font-size: 0.8125rem;
    line-height: 1.65;
    color: hsl(215 12% 42%);
    margin: 0.35rem 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gallery-artwork-figure__img {
    max-height: min(85vh, 920px);
    object-fit: contain;
    background: var(--color-bg-soft);
}

/* Detail: single presentation of the work */
.gallery-artwork-page.page-section {
    padding-top: 0;
}

.gallery-artwork-stage {
    background: linear-gradient(180deg, hsl(40 20% 98%) 0%, hsl(215 18% 97%) 100%);
    padding: 2.75rem 0 3.25rem;
    border-bottom: 1px solid hsl(215 14% 90%);
}

@media (min-width: 992px) {
    .gallery-artwork-stage {
        padding: 3.5rem 0 4rem;
    }
}

.gallery-artwork-stage__fluid {
    max-width: 1440px;
    margin: 0 auto;
}

.gallery-artwork-figure--stage {
    margin: 0 auto;
    max-width: min(100%, 1120px);
}

.gallery-artwork-figure__mat {
    padding: clamp(0.75rem, 2vw, 1.5rem);
    background: hsl(0 0% 100% / 0.65);
    border-radius: var(--radius-md);
    box-shadow:
        0 1px 0 hsl(0 0% 100% / 0.9) inset,
        0 28px 60px -28px hsl(215 22% 15% / 0.2);
}

.gallery-artwork-figure__img--stage {
    display: block;
    width: 100%;
    height: auto;
    max-height: min(78vh, 880px);
    object-fit: contain;
    border-radius: calc(var(--radius-md) - 2px);
    background: hsl(215 8% 97%);
}

.gallery-artwork-body {
    padding-top: clamp(3rem, 5vw, 4.5rem);
    padding-bottom: clamp(3.25rem, 6vw, 5.5rem);
}

.gallery-artwork-lead {
    font-size: 1.0625rem;
    line-height: 1.85;
    color: hsl(215 18% 28%);
    margin-bottom: 3rem;
    max-width: 40rem;
}

.gallery-artwork-lead + .gallery-panel {
    margin-top: 0;
}

.gallery-panel + .gallery-panel {
    margin-top: 2.5rem;
}

.gallery-panel + .gallery-print-block {
    margin-top: 3rem;
}

.gallery-artwork-back {
    margin-top: 3.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid hsl(215 14% 90%);
}

.gallery-artwork-back__link {
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    color: hsl(215 15% 40%);
    transition: color 0.2s ease;
}

.gallery-artwork-back__link:hover {
    color: hsl(215 28% 22%);
}

.gallery-panel {
    border: 1px solid hsl(215 16% 88%);
    border-radius: var(--radius-md);
    padding: 1.75rem 1.85rem;
    background: linear-gradient(180deg, hsl(215 25% 99.5%) 0%, var(--color-bg-primary) 100%);
}

.gallery-panel--certificate {
    background: hsl(40 28% 98.5%);
    border-color: hsl(38 18% 86%);
}

.gallery-panel__title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    margin: 0 0 1.35rem;
    color: hsl(215 25% 18%);
}

.gallery-panel__title--subtle {
    font-size: 1.12rem;
    font-weight: 500;
    opacity: 0.95;
}

.gallery-spec-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.15rem 1.75rem;
}

@media (min-width: 576px) {
    .gallery-spec-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .gallery-spec-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.gallery-spec-grid__item {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.gallery-spec-grid__label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: hsl(215 12% 46%);
}

.gallery-spec-grid__value {
    font-size: 0.98rem;
    line-height: 1.45;
    color: hsl(215 22% 22%);
}

.gallery-spec-notes {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid hsl(215 16% 90%);
}

.gallery-spec-notes__label {
    color: hsl(215 12% 46%);
    font-weight: 500;
}

.gallery-spec-notes__body {
    font-size: 0.95rem;
    line-height: 1.65;
}

.gallery-certificate-file__link {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 0.75rem;
    text-decoration: none;
    color: hsl(215 28% 26%);
    border-bottom: 1px solid hsl(215 22% 78%);
    padding-bottom: 0.2rem;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.gallery-certificate-file__link:hover {
    color: hsl(215 35% 16%);
    border-bottom-color: hsl(215 28% 52%);
}

.gallery-certificate-file__icon {
    font-size: 1.15rem;
    vertical-align: -0.1em;
}

.gallery-certificate-file__text {
    font-weight: 500;
}

.gallery-certificate-file__hint {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: hsl(215 12% 48%);
}

.gallery-certificate-prose__inner {
    font-family: var(--font-heading);
    font-size: 1.06rem;
    line-height: 1.75;
    color: hsl(215 22% 28%);
}

.gallery-print-notice {
    max-width: 38rem;
    line-height: 1.6;
}

.gallery-print-block {
    max-width: 36rem;
    padding-top: 0.25rem;
}

.gallery-print-block__title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    margin: 0 0 0.5rem;
    color: hsl(215 25% 18%);
}

.gallery-print-block__lede {
    line-height: 1.55;
}

.gallery-print-form__label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: hsl(215 12% 45%);
    margin-bottom: 0.35rem;
}

.gallery-print-form__control {
    border: 1px solid hsl(215 14% 86%);
    border-radius: var(--radius-sm, 4px);
    font-size: 0.9375rem;
    padding: 0.5rem 0.65rem;
    background: var(--color-bg-primary);
}

.gallery-print-form__control:focus {
    border-color: hsl(215 22% 65%);
    box-shadow: 0 0 0 0.15rem hsl(215 35% 50% / 0.12);
}

.gallery-print-form__error {
    color: hsl(0 55% 40%);
}

.gallery-print-form__submit {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 0.55rem 1.25rem;
    border: 1px solid hsl(215 22% 28%);
    background: transparent;
    color: hsl(215 22% 22%);
    border-radius: var(--radius-sm, 4px);
    transition: background 0.2s ease, color 0.2s ease;
}

.gallery-print-form__submit:hover {
    background: hsl(215 22% 18%);
    color: #fff;
    border-color: hsl(215 22% 18%);
}

.gallery-print-alert {
    border: none;
    background: hsl(145 30% 94%);
    color: hsl(145 35% 22%);
    border-radius: var(--radius-md);
}

.article-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--transition-slow), border-color var(--transition-slow), transform var(--transition-slow);
}

.article-card:hover {
    box-shadow: var(--shadow-hover);
    border-color: var(--color-border);
    transform: translateY(-2px);
}

.article-card__media {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--color-bg-soft);
}

.article-card__cover-frame {
    display: block;
    position: relative;
    overflow: hidden;
}

.article-card__cover-frame--abstract {
    background: hsl(215 22% 96%);
}

.article-card__cover-frame img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    vertical-align: middle;
}

/* Photographic covers: soft veil + tint tied to category (same palette as thumbnails) */
.article-card__cover-veil {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(
        165deg,
        rgba(255, 255, 255, 0.12) 0%,
        transparent 35%,
        hsl(215 30% 18% / 0.18) 100%
    );
    mix-blend-mode: multiply;
}

.article-card__cover-veil::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42%;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    background: linear-gradient(
        0deg,
        hsl(215 28% 12% / 0.35) 0%,
        hsl(215 25% 20% / 0.08) 55%,
        transparent 100%
    );
    opacity: 0.85;
}

.article-card__media--cat-statements .article-card__cover-veil {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.1) 0%, transparent 40%, hsl(16 35% 22% / 0.2) 100%);
}

.article-card__media--cat-institute_news .article-card__cover-veil {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.12) 0%, transparent 38%, hsl(205 32% 20% / 0.18) 100%);
}

.article-card__media--cat-research .article-card__cover-veil {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.1) 0%, transparent 36%, hsl(225 30% 18% / 0.2) 100%);
}

.article-card__media--cat-programs_events .article-card__cover-veil {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.11) 0%, transparent 37%, hsl(168 26% 18% / 0.17) 100%);
}

.article-card__media--cat-publications .article-card__cover-veil {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.1) 0%, transparent 36%, hsl(32 32% 20% / 0.18) 100%);
}

.article-card__media--cat-heritage_culture .article-card__cover-veil {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.1) 0%, transparent 35%, hsl(38 30% 18% / 0.2) 100%);
}

.article-card__media--cat-dialogue .article-card__cover-veil {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.09) 0%, transparent 38%, hsl(265 22% 22% / 0.16) 100%);
}

.article-card__media--cat-custom .article-card__cover-veil {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.1) 0%, transparent 40%, hsl(215 22% 18% / 0.16) 100%);
}

.article-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.15rem 1.2rem 1.25rem;
}

.article-card__cat {
    display: inline-block;
    align-self: flex-start;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
    text-decoration: none;
    margin-bottom: 0.45rem;
    transition: color var(--transition-base);
}

.article-card__cat:hover {
    color: var(--color-navy);
}

.article-card__cat--text {
    pointer-events: none;
}

.article-card__title {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 0.5rem;
}

.article-card__title a {
    color: var(--color-navy);
    text-decoration: none;
    transition: color var(--transition-base);
}

.article-card__title a:hover {
    color: var(--color-accent);
}

.article-card__excerpt {
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--color-text-secondary);
    margin-bottom: 0.75rem;
    flex: 1;
}

.article-card__meta {
    margin-top: auto;
    padding-top: 0.15rem;
}

.article-card__meta time {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-text-muted);
    letter-spacing: 0.02em;
}

/* Pagination — editorial bar (Bootstrap 5 + Paginator::useBootstrapFive) */
.blog-pagination-wrap {
    margin-top: clamp(2rem, 4vw, 2.75rem);
    padding-top: clamp(1.15rem, 2.2vw, 1.5rem);
    border-top: 1px solid hsl(215 14% 90%);
    display: block;
}

.blog-pagination-wrap nav {
    width: 100%;
    flex-direction: column;
    align-items: stretch !important;
    gap: 1rem;
}

@media (min-width: 576px) {
    .blog-pagination-wrap nav {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 1rem 1.5rem;
    }
}

/* “Showing x–y of z” */
.blog-pagination-wrap nav > .d-none .small.text-muted {
    font-family: var(--font-body);
    font-size: 0.8125rem !important;
    line-height: 1.5;
    color: hsl(215 12% 42%) !important;
    letter-spacing: 0.01em;
    text-align: center;
    margin: 0;
}

@media (min-width: 576px) {
    .blog-pagination-wrap nav > .d-none .small.text-muted {
        text-align: start;
        flex: 1 1 auto;
        min-width: 0;
    }
}

.blog-pagination-wrap nav > .d-none > div:last-child {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
}

@media (min-width: 576px) {
    .blog-pagination-wrap nav > .d-none > div:last-child {
        justify-content: flex-end;
    }
}

.blog-pagination-wrap .pagination {
    margin-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0;
}

.blog-pagination-wrap .page-item {
    margin: 0;
}

/* Detach Bootstrap’s merged “button group” overlap */
.blog-pagination-wrap .pagination .page-item + .page-item .page-link {
    margin-inline-start: 0;
}

.blog-pagination-wrap .page-link {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    min-height: 2.4rem;
    padding: 0.4rem 0.55rem;
    margin-left: 0;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: hsl(215 22% 30%);
    background: hsl(0 0% 100%);
    border: 1px solid hsl(215 14% 86%);
    border-radius: var(--radius-sm);
    box-shadow: 0 1px 0 hsl(0 0% 100% / 0.8) inset;
    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.blog-pagination-wrap a.page-link:hover {
    color: hsl(215 28% 16%);
    background: hsl(215 22% 98%);
    border-color: hsl(215 16% 78%);
    box-shadow: var(--shadow-sm);
}

.blog-pagination-wrap .page-item.active .page-link {
    z-index: 2;
    color: hsl(0 0% 100%);
    background: linear-gradient(180deg, hsl(215 26% 34%) 0%, hsl(215 28% 28%) 100%);
    border-color: hsl(215 28% 24%);
    box-shadow: 0 1px 3px hsl(215 22% 18% / 0.18);
    cursor: default;
}

.blog-pagination-wrap .page-item.disabled .page-link {
    color: hsl(215 10% 68%);
    background: hsl(215 16% 97%);
    border-color: hsl(215 12% 90%);
    box-shadow: none;
    pointer-events: none;
}

.blog-pagination-wrap a.page-link:focus-visible {
    outline: 2px solid hsl(215 32% 45%);
    outline-offset: 2px;
}

/* Mobile: Previous / Next full-width row */
.blog-pagination-wrap nav > .d-sm-none {
    width: 100%;
}

.blog-pagination-wrap nav > .d-sm-none .pagination {
    width: 100%;
    justify-content: stretch;
    gap: 0.65rem;
}

.blog-pagination-wrap nav > .d-sm-none .page-item {
    flex: 1 1 0;
    min-width: 0;
}

.blog-pagination-wrap nav > .d-sm-none .page-link {
    width: 100%;
    min-width: 0;
    font-size: 0.8125rem;
    font-weight: 500;
}

.blog-article-header {
    margin-bottom: 1rem;
}

.blog-article-date {
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
}

.blog-article-cat {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.blog-article-cat a {
    color: var(--color-accent);
    text-decoration: none;
}

.blog-article-cat a:hover {
    color: var(--color-navy);
}

.blog-article-lead {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--color-text-secondary);
    margin-bottom: 1.5rem;
    font-weight: 400;
    font-family: var(--font-body);
    font-style: italic;
}

.blog-article-body {
    margin-top: 0;
}


/* ----------------------------------------------------------
   Events Section — Vertical list with date markers
   ---------------------------------------------------------- */
.events-section {
    padding: var(--section-py) 0;
    background-color: var(--color-bg-primary);
}

.events-header {
    text-align: center;
    max-width: 540px;
    margin: 0 auto var(--section-header-mb);
}

.events-list {
    max-width: 820px;
    margin: 0 auto;
}

.events-item {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    padding: 1.75rem 0;
    border-top: 1px solid var(--color-border);
}

.events-item:last-child {
    border-bottom: 1px solid var(--color-border);
}

.events-date {
    flex-shrink: 0;
    width: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.875rem 0.5rem 0.75rem;
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    line-height: 1;
}

.events-date-day {
    font-family: var(--font-heading);
    font-size: 1.625rem;
    font-weight: 600;
    color: var(--color-navy);
    letter-spacing: -0.02em;
}

.events-date-month {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-top: 0.2rem;
}

.events-date-year {
    font-family: var(--font-body);
    font-size: 0.625rem;
    font-weight: 400;
    color: var(--color-text-muted);
    margin-top: 0.2rem;
    letter-spacing: 0.04em;
}

.events-body {
    flex: 1;
    min-width: 0;
}

.events-type {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 0.375rem;
}

.events-item-title {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 0.5rem;
}

.events-item-title a {
    color: var(--color-navy);
    text-decoration: none;
    transition: color var(--transition-base);
}

.events-item-title a:hover {
    color: var(--color-accent);
}

.events-item-subtitle {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 400;
    font-style: italic;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin-bottom: 0.5rem;
}

.events-item-summary {
    font-size: 0.875rem;
    line-height: 1.75;
    color: var(--color-text-secondary);
    margin-bottom: 0.5rem;
}

.events-footer {
    text-align: center;
    margin-top: 2.5rem;
}


/* ----------------------------------------------------------
   Collections Section — Curated archival visual cards
   ---------------------------------------------------------- */
.collections-section {
    padding: var(--section-py) 0;
    background-color: var(--color-bg-soft);
}

.collections-header {
    text-align: center;
    max-width: 540px;
    margin: 0 auto var(--section-header-mb);
}

.collection-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.collection-card-image {
    position: relative;
    overflow: hidden;
}

.collection-card-placeholder {
    height: 220px;
    background-color: var(--color-bg-primary);
    border-bottom: 1px solid var(--color-border-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.collection-card-placeholder i {
    font-size: 2.5rem;
    color: var(--color-muted-blue);
    opacity: 0.3;
}

.collection-card-year {
    position: absolute;
    top: 0.75rem;
    inset-inline-end: 0.75rem;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-navy);
    background-color: rgba(255, 255, 255, 0.88);
    padding: 0.2rem 0.6rem;
    border-radius: 2px;
    letter-spacing: 0.04em;
    line-height: 1.4;
}

.collection-card-body {
    padding: 1.5rem 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.collection-card-title {
    font-family: var(--font-heading);
    font-size: 1.1875rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-navy);
    margin-bottom: 0.625rem;
}

.collection-card-text {
    font-size: 0.875rem;
    line-height: 1.75;
    color: var(--color-text-secondary);
    margin-bottom: 0;
    flex-grow: 1;
}

.collection-card-link {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border-light);
}


/* ----------------------------------------------------------
   Resources Section — Reference-style informational cards
   ---------------------------------------------------------- */
.resources-section {
    padding: var(--section-py) 0;
    background-color: var(--color-bg-primary);
}

.resources-header {
    text-align: center;
    max-width: 540px;
    margin: 0 auto var(--section-header-mb);
}

.resource-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 2rem 1.75rem;
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
}

.resource-card-cover-wrap {
    margin: -2rem -1.75rem 1rem;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    overflow: hidden;
    border-bottom: 1px solid var(--color-border-light);
}

.resource-card-cover-img {
    display: block;
    width: 100%;
    height: 140px;
    object-fit: cover;
}

.resource-card-icon {
    font-size: 1.75rem;
    color: var(--color-accent);
    opacity: 0.5;
    line-height: 1;
    margin-bottom: 1rem;
}

.resource-card-type {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 0.625rem;
}

.resource-card-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-navy);
    margin-bottom: 0.75rem;
}

.resource-card-text {
    font-size: 0.875rem;
    line-height: 1.8;
    color: var(--color-text-secondary);
    margin-bottom: 0;
    flex-grow: 1;
}

.resource-card-link {
    margin-top: 1.5rem;
    padding-top: 1.125rem;
    border-top: 1px solid var(--color-border-light);
}


/* ----------------------------------------------------------
   Membership Section — Refined institutional tiers
   ---------------------------------------------------------- */
.member-section {
    padding: var(--section-py) 0;
    background-color: var(--color-bg-primary);
}

.member-header {
    text-align: center;
    max-width: 540px;
    margin: 0 auto var(--section-header-mb);
}

.member-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.member-card--accent {
    border-top: 2.5px solid var(--color-accent);
    box-shadow: var(--shadow-md);
}

.member-card-header {
    padding: 1.75rem 1.75rem 0;
}

.member-card-tier {
    font-family: var(--font-heading);
    font-size: 1.3125rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-navy);
    margin-bottom: 0.35rem;
}

.member-card-note {
    display: block;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.member-card-body {
    padding: 1.25rem 1.75rem 0;
    flex-grow: 1;
}

.member-card-text {
    font-size: 0.875rem;
    line-height: 1.8;
    color: var(--color-text-secondary);
    margin-bottom: 1rem;
}

.member-card-details {
    list-style: none;
    padding: 0;
    margin: 0;
}

.member-card-details li {
    position: relative;
    padding: 0.35rem 0;
    padding-inline-start: 1rem;
    font-size: 0.8125rem;
    line-height: 1.65;
    color: var(--color-text-secondary);
}

.member-card-details li::before {
    content: '–';
    position: absolute;
    inset-inline-start: 0;
    color: var(--color-accent);
    font-weight: 600;
}

.member-card-footer {
    padding: 1.25rem 1.75rem 1.75rem;
}

.member-card-btn {
    display: inline-block;
    width: 100%;
    text-align: center;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: var(--color-navy);
    background-color: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.65rem 1.25rem;
    text-decoration: none;
    transition: all var(--transition-base);
}

.member-card-btn:hover {
    border-color: var(--color-navy);
    background-color: var(--color-navy);
    color: #FFFFFF;
    box-shadow: var(--shadow-sm);
}

.member-card--accent .member-card-btn {
    background-color: var(--color-navy);
    border-color: var(--color-navy);
    color: #FFFFFF;
    box-shadow: var(--shadow-sm);
}

.member-card--accent .member-card-btn:hover {
    background-color: var(--color-navy-light);
    border-color: var(--color-navy-light);
    box-shadow: var(--shadow-md);
}


/* ----------------------------------------------------------
   Atelier & Workshops Section — Programme listing
   ---------------------------------------------------------- */
.atelier-section {
    padding: var(--section-py) 0;
    background-color: var(--color-bg-soft);
}

.atelier-header {
    text-align: center;
    max-width: 540px;
    margin: 0 auto var(--section-header-mb);
}

.atelier-list {
    max-width: 740px;
    margin: 0 auto;
}

.atelier-item {
    display: flex;
    gap: 2rem;
    padding: 1.75rem 0;
    border-top: 1px solid var(--color-border);
}

.atelier-item:last-child {
    border-bottom: 1px solid var(--color-border);
}

.atelier-item-meta {
    flex-shrink: 0;
    width: 120px;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding-top: 0.15rem;
}

.atelier-item-type {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.atelier-item-date {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    letter-spacing: 0.02em;
}

.atelier-item-body {
    flex: 1;
    min-width: 0;
}

.atelier-item-title {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-navy);
    margin-bottom: 0.5rem;
}

.atelier-item-title a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-base);
}

.atelier-item-title a:hover {
    color: var(--color-accent);
}

.atelier-item-text {
    font-size: 0.875rem;
    line-height: 1.75;
    color: var(--color-text-secondary);
    margin-bottom: 0.75rem;
}

.atelier-footer {
    text-align: center;
    margin-top: 2.5rem;
}


/* ----------------------------------------------------------
   Contact Section — Refined institutional enquiry
   ---------------------------------------------------------- */
.contact-section {
    padding: var(--section-py) 0;
    background-color: var(--color-bg-primary);
}

.contact-header {
    text-align: center;
    max-width: 540px;
    margin: 0 auto var(--section-header-mb);
}

.cform-label {
    display: block;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: var(--color-text-primary);
    margin-bottom: 0.45rem;
}

.cform-input {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-text-primary);
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.cform-input::placeholder {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.cform-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03), 0 0 0 3px rgba(184, 150, 62, 0.1);
}

.cform-textarea {
    resize: vertical;
    min-height: 140px;
}

.cform-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--color-bg-white);
    background-color: var(--color-navy);
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.8rem 2rem;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background-color var(--transition-base), box-shadow var(--transition-base), gap 0.25s ease;
}

.cform-submit:hover {
    background-color: var(--color-navy-light);
    box-shadow: var(--shadow-md);
    gap: 0.6rem;
}

.cform-submit i {
    font-size: 0.7rem;
}

.contact-aside {
    padding: 2rem;
    background-color: var(--color-bg-soft);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}

.contact-detail {
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-border-light);
}

.contact-detail:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.contact-detail-heading {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-navy);
    margin-bottom: 0.4rem;
}

.contact-detail-text {
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.75;
    color: var(--color-text-secondary);
    margin-bottom: 0;
    font-style: normal;
}

.contact-detail-text a {
    color: var(--color-text-secondary);
    text-decoration: none;
    border-bottom: 1px solid var(--color-border);
    transition: color var(--transition-base), border-color var(--transition-base);
}

.contact-detail-text a:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.contact-detail--note {
    background-color: var(--color-bg-primary);
    margin-inline: -2rem;
    margin-bottom: -2rem;
    padding: 1.125rem 2rem;
    border-bottom: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.contact-detail--note .contact-detail-text {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}


/* ----------------------------------------------------------
   Footer — Dark navy institutional footer
   ---------------------------------------------------------- */
.site-footer {
    background-color: var(--color-navy);
    color: rgba(255, 255, 255, 0.7);
    padding: 4.5rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: 2.5rem;
}

.footer-brand-link {
    display: block;
    text-decoration: none;
    margin-bottom: 1.125rem;
}

.footer-brand-name {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.375rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.2;
}

.footer-brand-tagline {
    display: block;
    font-family: var(--font-body);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    margin-top: 0.3rem;
}

.footer-brand-desc {
    font-size: 0.875rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 1.75rem;
    max-width: 300px;
}

.footer-social {
    display: flex;
    gap: 0.6rem;
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8125rem;
    text-decoration: none;
    transition: all var(--transition-base);
}

.footer-social a:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.footer-heading {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1.25rem;
}

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

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

.footer-links a {
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.8625rem;
    text-decoration: none;
    transition: color var(--transition-base);
}

.footer-links a:hover {
    color: rgba(255, 255, 255, 0.85);
}

.footer-address {
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.5);
    font-style: normal;
    margin-bottom: 0.875rem;
}

.footer-contact-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem;
}

.footer-contact-list li {
    margin-bottom: 0.3rem;
}

.footer-contact-list a {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    transition: color var(--transition-base), border-color var(--transition-base);
}

.footer-contact-list a:hover {
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.4);
}

.footer-hours {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 0;
}

.footer-contact-note {
    font-size: 0.8125rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.38);
    margin-bottom: 0.2rem;
}

.footer-contact-note:last-child {
    margin-bottom: 0;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 3.5rem;
    padding: 1.5rem 0;
}

.footer-copy {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.32);
    letter-spacing: 0.01em;
    margin-bottom: 0;
}

.footer-legal {
    display: flex;
    gap: 1.25rem;
}

.footer-legal a {
    color: rgba(255, 255, 255, 0.32);
    font-size: 0.78rem;
    text-decoration: none;
    transition: color var(--transition-base);
}

.footer-legal a:hover {
    color: rgba(255, 255, 255, 0.65);
}


/* ----------------------------------------------------------
   Form Global Overrides
   ---------------------------------------------------------- */
.form-control:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(184, 150, 62, 0.1);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

/* -- Large tablets / small desktops -- */
@media (max-width: 1199.98px) {
    .header-nav-link {
        padding: 0.8rem 0.75rem;
        font-size: 0.78rem;
    }
}


/* -- Tablet (nav collapses) -- */
@media (max-width: 991.98px) {
    :root {
        --section-py: var(--section-py-sm);
        --section-header-mb: 2.25rem;
    }

    .header-brand {
        padding: 1.25rem 0 1.1rem;
    }

    .header-brand-name {
        font-size: 1.65rem;
    }

    .header-nav-inner {
        justify-content: flex-end;
    }

    .hero {
        padding: 4.5rem 0 5rem;
    }

    .hero-title {
        font-size: 2.75rem;
    }

    .hero-content::before, .hero-content::after { display: none; }

    .page-hero { padding: 3rem 0 3.25rem; }
    .page-hero-title { font-size: 2.125rem; }

    .prose-body {
        max-width: none;
    }

    .prose-figure {
        position: static;
        max-width: 420px;
    }

    .prose-figure-placeholder {
        height: 300px;
    }

    .focus-card {
        padding: 2rem 1.75rem;
    }

    .pubs-item {
        gap: 1.5rem;
    }

    .pubs-item-title {
        font-size: 1.0625rem;
    }

    .events-item {
        gap: 1.5rem;
    }

    .events-date {
        width: 66px;
    }

    .events-item-title {
        font-size: 1.0625rem;
    }

    .collection-card-placeholder {
        height: 190px;
    }

    .collection-card-body {
        padding: 1.25rem 1.25rem 1.5rem;
    }

    .resource-card {
        padding: 1.75rem 1.5rem;
    }

    .member-card-header {
        padding: 1.5rem 1.5rem 0;
    }

    .member-card-body {
        padding: 1.125rem 1.5rem 0;
    }

    .member-card-footer {
        padding: 1.125rem 1.5rem 1.5rem;
    }

    .atelier-item-meta {
        width: 105px;
    }

    /* --- Footer — mobile & small tablet: single column, editorial rhythm (desktop unchanged above 992px) --- */
    .site-footer {
        padding: 3.75rem 0 0;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .footer-col--brand {
        grid-column: auto;
    }

    .footer-col {
        padding-bottom: 2rem;
        margin-bottom: 2rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }

    .footer-col:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .footer-brand-link {
        margin-bottom: 1.25rem;
    }

    .footer-brand-name {
        font-size: 1.5rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        line-height: 1.2;
    }

    .footer-brand-desc {
        max-width: none;
        margin-bottom: 1.5rem;
        font-size: 0.9375rem;
        line-height: 1.75;
        color: rgba(255, 255, 255, 0.55);
    }

    .footer-social {
        gap: 0.75rem;
    }

    .footer-social a {
        width: 38px;
        height: 38px;
        font-size: 0.875rem;
    }

    .footer-heading {
        margin-bottom: 1rem;
        margin-top: 0;
        letter-spacing: 0.16em;
    }

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

    .footer-links a {
        display: block;
        padding: 0.5rem 0;
        font-size: 0.90625rem;
        line-height: 1.45;
    }

    .footer-address {
        margin-bottom: 1.125rem;
        font-size: 0.90625rem;
        line-height: 1.75;
        color: rgba(255, 255, 255, 0.55);
    }

    .footer-contact-list {
        margin-bottom: 0.5rem;
    }

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

    .footer-contact-list a {
        display: inline-block;
        font-size: 0.9375rem;
        line-height: 1.45;
        padding: 0.2rem 0;
        color: rgba(255, 255, 255, 0.62);
        border-bottom-color: rgba(255, 255, 255, 0.18);
    }

    .footer-contact-note {
        margin-top: 0.85rem;
        margin-bottom: 0.45rem;
        font-size: 0.8125rem;
        line-height: 1.65;
        color: rgba(255, 255, 255, 0.45);
    }

    .footer-contact-note:first-of-type {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.07);
    }

    .footer-bottom {
        margin-top: 2.5rem;
        padding: 1.75rem 0 1.5rem;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .footer-copy {
        font-size: 0.8125rem;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.42);
    }

    .footer-legal {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }

    .footer-legal a {
        font-size: 0.8125rem;
        padding: 0.25rem 0;
    }
}


/* -- Small tablets / large phones -- */
@media (max-width: 767.98px) {

    /* --- Header --- */
    .header-utility-inner { padding: 0.4rem 0; }
    .header-brand { padding: 1rem 0 0.9rem; }
    .header-brand-name { font-size: 1.5rem; }

    /* --- Hero --- */
    .hero { padding: 3.5rem 0 3.25rem; }
    .hero-title { font-size: 2.125rem; }
    .hero-lead { font-size: 0.9375rem; line-height: 1.75; max-width: 440px; }
    .hero-overline { font-size: 0.625rem; letter-spacing: 0.18em; margin-bottom: 1rem; }
    .hero-rule { margin: 1.125rem auto; }
    .hero-actions { gap: 0.625rem; }

    /* --- Inner page hero --- */
    .page-hero { padding: 2.5rem 0 2.75rem; }
    .page-hero-title { font-size: 1.875rem; }
    .page-hero-desc { font-size: 0.875rem; line-height: 1.75; margin-top: 0.875rem; }
    .page-breadcrumb ol { margin-bottom: 1.25rem; }

    /* --- Page CTA --- */
    .page-cta-title { font-size: 1.5rem; }

    /* --- Prose section --- */
    .prose-heading { font-size: 1.5rem; }
    .prose-figure { position: static; max-width: 100%; margin-top: 1.25rem; }
    .prose-figure-frame { border-radius: var(--radius-md); }
    .prose-figure-placeholder { height: 240px; border-radius: 6px; }
    .prose-quote { margin-top: 1.5rem; }
    .prose-quote p { font-size: 0.9375rem; padding-inline-start: 0.75rem; }
    .prose-quote cite { padding-inline-start: 0.75rem; }

    /* --- Section titles — unified --- */
    .focus-title,
    .pubs-title,
    .events-title,
    .collections-title,
    .resources-title,
    .member-title,
    .atelier-title,
    .contact-title {
        font-size: 1.625rem;
    }

    /* --- Focus cards --- */
    .focus-card-number { font-size: 1.5rem; margin-bottom: 1rem; }
    .focus-card-title { font-size: 1.0625rem; }

    /* --- Publications --- */
    .pubs-item { flex-direction: column; gap: 0; }
    .pubs-item-meta { text-align: start; padding-top: 0; margin-bottom: 0.375rem; order: -1; }
    .pubs-item-meta time { white-space: normal; }
    .pubs-item-title { font-size: 1.0625rem; }
    .pubs-item-summary { font-size: 0.8125rem; line-height: 1.7; }

    /* --- Events — clean vertical stack --- */
    .events-item { flex-direction: column; gap: 0; }
    .events-date {
        flex-direction: row;
        width: auto;
        gap: 0.5rem;
        padding: 0.4rem 0.75rem;
        margin-bottom: 0.625rem;
        align-items: baseline;
        align-self: flex-start;
        border-radius: var(--radius-sm);
    }
    .events-date-day   { font-size: 1rem; }
    .events-date-month { font-size: 0.625rem; margin-top: 0; }
    .events-date-year  { font-size: 0.5625rem; margin-top: 0; }
    .events-item-title { font-size: 1.0625rem; }
    .events-item-subtitle { font-size: 0.78rem; margin-bottom: 0.375rem; }
    .events-item-summary { font-size: 0.8125rem; line-height: 1.7; }

    /* --- Collection cards --- */
    .collection-card-title { font-size: 1.0625rem; }
    .collection-card-placeholder { height: 180px; }

    /* --- Resource cards --- */
    .resource-card-title { font-size: 1.0625rem; }

    /* --- Member cards --- */
    .member-card-tier { font-size: 1.125rem; }
    .member-card-text { font-size: 0.8125rem; }

    /* --- Atelier — clean vertical stack --- */
    .atelier-item { flex-direction: column; gap: 0; }
    .atelier-item-meta {
        flex-direction: row;
        width: auto;
        gap: 0.75rem;
        align-items: center;
        margin-bottom: 0.5rem;
    }
    .atelier-item-title { font-size: 1.0625rem; }

    /* --- Contact --- */
    .contact-aside { padding: 1.5rem; border-radius: var(--radius-md); }
    .contact-detail--note {
        margin-inline: -1.5rem;
        margin-bottom: -1.5rem;
        padding: 1rem 1.5rem;
        border-radius: 0 0 var(--radius-md) var(--radius-md);
    }

}


/* -- Phones (primary mobile target) -- */
@media (max-width: 575.98px) {

    /* ===========================================
       1. GLOBAL SPACING — governed by --section-py
       =========================================== */
    :root {
        --section-header-mb: 2rem;
    }


    /* ===========================================
       2. TYPOGRAPHY — readable mobile sizes
       =========================================== */
    .focus-title,
    .pubs-title,
    .events-title,
    .collections-title,
    .resources-title,
    .member-title,
    .atelier-title,
    .contact-title {
        font-size: 1.375rem;
        margin-bottom: 0.625rem;
    }

    .prose-heading {
        font-size: 1.3125rem;
        margin-bottom: 0.875rem;
    }

    .focus-intro,
    .pubs-intro,
    .events-intro,
    .collections-intro,
    .resources-intro,
    .member-intro,
    .atelier-intro,
    .contact-intro {
        font-size: 0.8125rem;
        line-height: 1.7;
    }

    .prose-body p {
        font-size: 0.875rem;
        line-height: 1.75;
        margin-bottom: 0.875rem;
    }

    .prose-list {
        margin-bottom: 1.125rem;
    }

    .prose-list li {
        font-size: 0.875rem;
        line-height: 1.75;
        padding: 0.2rem 0;
        padding-inline-start: 1.125rem;
    }


    /* ===========================================
       3. HERO — compact, strong hierarchy
       =========================================== */
    .hero {
        padding: 3.25rem 0 2.75rem;
    }

    .hero-overline {
        font-size: 0.6rem;
        letter-spacing: 0.16em;
        margin-bottom: 0.875rem;
    }

    .hero-title {
        font-size: 1.75rem;
        line-height: 1.2;
    }

    .hero-rule {
        width: 36px;
        margin: 1rem auto;
    }

    .hero-lead {
        font-size: 0.875rem;
        line-height: 1.75;
        margin-bottom: 1.5rem;
        max-width: 100%;
        padding: 0 0.25rem;
    }

    .hero-actions {
        flex-direction: column;
        align-items: center;
        gap: 0.625rem;
    }

    .btn-hero-primary,
    .btn-hero-secondary {
        width: 100%;
        max-width: 280px;
        text-align: center;
        padding: 0.75rem 1.5rem;
        font-size: 0.8125rem;
    }


    /* ===========================================
       3b. INNER PAGE HERO — compact mobile
       =========================================== */
    .page-hero {
        padding: 2rem 0 2.25rem;
    }

    .page-hero-title {
        font-size: 1.5rem;
    }

    .page-hero-overline {
        font-size: 0.625rem;
        letter-spacing: 0.16em;
        margin-bottom: 0.625rem;
    }

    .page-hero-desc {
        font-size: 0.8125rem;
        line-height: 1.7;
        margin-top: 0.75rem;
        max-width: 100%;
    }

    .page-breadcrumb ol {
        margin-bottom: 1rem;
    }

    .page-breadcrumb li {
        font-size: 0.6875rem;
    }


    /* ===========================================
       3c. PAGE CTA — compact mobile
       =========================================== */
    .page-cta-title {
        font-size: 1.375rem;
    }

    .page-cta-text {
        font-size: 0.8125rem;
        line-height: 1.7;
        margin-bottom: 1.5rem;
    }

    .btn-cta-primary,
    .btn-cta-secondary {
        width: 100%;
        max-width: 280px;
        text-align: center;
        padding: 0.75rem 1.5rem;
    }

    .page-cta-actions {
        flex-direction: column;
        align-items: center;
        gap: 0.625rem;
    }


    /* ===========================================
       4. CARD SYSTEM — rounded, padded, full-width
       =========================================== */
    .focus-card,
    .collection-card,
    .resource-card,
    .member-card {
        border-radius: 10px;
    }

    /* Focus cards */
    .focus-card {
        padding: 1.5rem 1.25rem 1.375rem;
    }

    .focus-card-number {
        font-size: 1.375rem;
        margin-bottom: 0.75rem;
    }

    .focus-card-title {
        font-size: 1.0625rem;
        margin-bottom: 0.75rem;
    }

    .focus-card-text {
        font-size: 0.8125rem;
        line-height: 1.7;
    }

    .focus-card-text p {
        margin-bottom: 0.5rem;
    }

    .focus-card-text p:last-child {
        margin-bottom: 0;
    }

    .focus-card-link {
        margin-top: 1.25rem;
        padding-top: 1rem;
    }

    /* Collection cards */
    .collection-card-placeholder {
        height: 180px;
    }

    .collection-card-body {
        padding: 1.25rem;
    }

    .collection-card-title {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }

    .collection-card-text {
        font-size: 0.8125rem;
        line-height: 1.7;
    }

    .collection-card-link {
        margin-top: 1rem;
        padding-top: 0.875rem;
    }

    /* Resource cards */
    .resource-card {
        padding: 1.25rem;
    }

    .resource-card-icon {
        font-size: 1.5rem;
        margin-bottom: 0.875rem;
    }

    .resource-card-title {
        font-size: 1rem;
        margin-bottom: 0.375rem;
    }

    .resource-card-text {
        font-size: 0.8125rem;
        line-height: 1.7;
    }

    /* Member cards */
    .member-card {
        border-radius: 10px;
    }

    .member-card-header {
        padding: 1.25rem 1.25rem 0;
    }

    .member-card-tier {
        font-size: 1.0625rem;
    }

    .member-card-body {
        padding: 0.875rem 1.25rem 0;
    }

    .member-card-text {
        font-size: 0.8125rem;
        line-height: 1.7;
        margin-bottom: 0.75rem;
    }

    .member-card-details li {
        font-size: 0.8125rem;
        padding: 0.25rem 0 0.25rem 1rem;
    }

    .member-card-footer {
        padding: 1rem 1.25rem 1.25rem;
    }

    .member-card-btn {
        padding: 0.7rem 1rem;
        border-radius: 8px;
    }

    /* Card row spacing — Bootstrap gutter override */
    .focus-cards.row,
    .collections-section .row,
    .resources-section .row,
    .member-section .row {
        --bs-gutter-y: 1rem;
    }


    /* ===========================================
       5. PUBLICATIONS — clean mobile list
       =========================================== */
    .pubs-item {
        padding: 1.375rem 0;
    }

    .pubs-item-title {
        font-size: 1rem;
        margin-bottom: 0.375rem;
    }

    .pubs-item-summary {
        font-size: 0.8125rem;
        line-height: 1.7;
        margin-bottom: 0.5rem;
    }

    .pubs-item-meta time {
        font-size: 0.6875rem;
    }

    .pubs-footer {
        margin-top: 1.75rem;
    }


    /* ===========================================
       5b. NEWS & EVENTS — stacked vertical layout
       =========================================== */
    .events-item {
        padding: 1.375rem 0;
    }

    .events-date {
        margin-bottom: 0.5rem;
        padding: 0.35rem 0.65rem;
    }

    .events-date-day   { font-size: 0.9375rem; }
    .events-date-month { font-size: 0.5625rem; }
    .events-date-year  { font-size: 0.5rem; }

    .events-item-title {
        font-size: 1rem;
        margin-bottom: 0.25rem;
    }

    .events-item-subtitle {
        font-size: 0.75rem;
        margin-bottom: 0.375rem;
    }

    .events-item-summary {
        font-size: 0.8125rem;
        line-height: 1.7;
        margin-bottom: 0.375rem;
    }

    .events-footer {
        margin-top: 1.75rem;
    }


    /* ===========================================
       6. FILTER BUTTONS — proper wrap
       =========================================== */
    .pubs-filters {
        gap: 0.5rem;
        margin-bottom: 1.5rem;
    }

    .pubs-filter {
        font-size: 0.6875rem;
        padding: 0.375rem 0.75rem;
    }


    /* ===========================================
       7. PROSE IMAGE — stacked, full-width, rounded
       =========================================== */
    .prose-figure {
        margin-top: 1.5rem;
    }

    .prose-figure-frame {
        border-radius: 10px;
        padding: 8px;
    }

    .prose-figure-placeholder {
        height: 200px;
        border-radius: 8px;
    }

    .prose-figure-caption {
        font-size: 0.75rem;
        margin-top: 0.625rem;
    }

    .prose-quote p {
        font-size: 0.9rem;
    }


    /* ===========================================
       8. ATELIER — clean stacked items
       =========================================== */
    .atelier-item {
        padding: 1.375rem 0;
    }

    .atelier-item-type {
        font-size: 0.625rem;
    }

    .atelier-item-date {
        font-size: 0.6875rem;
    }

    .atelier-item-title {
        font-size: 1rem;
        margin-bottom: 0.375rem;
    }

    .atelier-item-text {
        font-size: 0.8125rem;
        line-height: 1.7;
        margin-bottom: 0.5rem;
    }

    .atelier-footer {
        margin-top: 1.75rem;
    }


    /* ===========================================
       9. CONTACT FORM — full-width, breathable
       =========================================== */
    .cform-label {
        font-size: 0.78rem;
        margin-bottom: 0.375rem;
    }

    .cform-input {
        font-size: 0.875rem;
        padding: 0.75rem 0.875rem;
        border-radius: 8px;
    }

    .cform-input::placeholder {
        font-size: 0.8125rem;
    }

    .cform-textarea {
        min-height: 120px;
    }

    .cform-submit {
        width: 100%;
        justify-content: center;
        padding: 0.8125rem 1.5rem;
        border-radius: 8px;
        font-size: 0.8125rem;
    }

    .cform .row {
        --bs-gutter-y: 0.75rem;
    }

    .contact-aside {
        padding: 1.25rem;
        border-radius: 10px;
        margin-top: 0.5rem;
    }

    .contact-detail {
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }

    .contact-detail-heading {
        font-size: 0.9375rem;
        margin-bottom: 0.3rem;
    }

    .contact-detail-text {
        font-size: 0.8125rem;
        line-height: 1.7;
    }

    .contact-detail--note {
        margin-inline: -1.25rem;
        margin-bottom: -1.25rem;
        padding: 0.875rem 1.25rem;
        border-radius: 0 0 10px 10px;
    }

    .contact-detail--note .contact-detail-text {
        font-size: 0.78rem;
    }


    /* ===========================================
       10. HEADER — compact mobile
       =========================================== */
    .header-utility-left a span {
        display: none;
    }

    .header-utility-left a i {
        font-size: 0.85rem;
        opacity: 1;
    }

    .header-brand {
        padding: 0.875rem 0 0.75rem;
    }

    .header-brand-name {
        font-size: 1.3rem;
    }

    .header-nav-inner {
        min-height: 42px;
    }

    .mobile-menu-overlay__link {
        font-size: 1.2rem;
        padding: 1rem 0.1rem;
    }

    .mobile-menu-overlay__inner {
        max-width: none;
        padding-inline: 1rem;
    }


    /* ===========================================
       11. FOOTER — phones: refine hierarchy & tap comfort (≤991 rules apply above)
       =========================================== */
    .site-footer {
        padding-top: 3.25rem;
    }

    .footer-col {
        padding-bottom: 1.875rem;
        margin-bottom: 1.875rem;
    }

    .footer-brand-name {
        font-size: 1.5625rem;
    }

    .footer-brand-desc {
        font-size: 0.90625rem;
    }

    .footer-heading {
        margin-bottom: 0.9rem;
    }

    .footer-links a {
        padding: 0.55rem 0;
        font-size: 0.9375rem;
    }

    .footer-address {
        font-size: 0.90625rem;
    }

    .footer-contact-list a {
        font-size: 0.9375rem;
        padding: 0.35rem 0;
    }

    .footer-bottom {
        margin-top: 2rem;
        padding: 1.5rem 0 1.35rem;
    }

    .footer-copy {
        font-size: 0.78rem;
    }

    .footer-legal a {
        font-size: 0.78rem;
    }


    /* ===========================================
       12. OVERLINES — tighter on mobile
       =========================================== */
    .prose-overline,
    .focus-overline,
    .pubs-overline,
    .events-overline,
    .collections-overline,
    .resources-overline,
    .member-overline,
    .atelier-overline,
    .contact-overline {
        font-size: 0.625rem;
        letter-spacing: 0.16em;
        margin-bottom: 0.625rem;
    }


    /* ===========================================
       13. FOOTER CONTACT NOTES — phones
       =========================================== */
    .footer-contact-note {
        font-size: 0.8rem;
        line-height: 1.68;
    }


    /* ===========================================
       14. VIEW-ALL BUTTONS — mobile sizing
       =========================================== */
    .section-view-all {
        font-size: 0.78rem;
        padding: 0.55rem 1.25rem;
    }


    /* ===========================================
       15. PREVENT OVERFLOW
       =========================================== */
    .container {
        padding-inline: 1.125rem;
    }
}