/* ===== RESET & BASE ===== */

/* The site's display serif (quotes, staff/program card titles, ledger titles,
   ghost watermarks). Lora is active on trial; Playfair Display stays loaded in
   App.razor, so switching back is just swapping this one line to
   'Playfair Display', Georgia, serif. */
:root {
    --font-display: 'Lora', Georgia, serif;
}

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

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #000;
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

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

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

ul {
    list-style: none;
}

address {
    font-style: normal;
}

/* ===== SKIP LINK ===== */
.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    background: #000;
    color: #ffcd00;
    padding: 0.5rem 1rem;
    z-index: 9999;
    font-weight: 700;
    text-decoration: underline;
}

.skip-link:focus {
    top: 0.5rem;
}

/* ===== FOCUS STYLES ===== */
*:focus-visible {
    outline: 3px solid #000;
    outline-offset: 2px;
}

/* <FocusOnNavigate Selector="h1"> (Components/Routes.razor) programmatically focuses the
   page's <h1> after every navigation so screen readers announce the new page. The heading
   then picks up the global focus outline above — a black box that lingers on load until the
   user clicks away. A heading is not a keyboard-operable control (it's never in the tab
   order), so drop its focus ring; genuinely interactive controls keep theirs. */
h1:focus {
    outline: none;
}

.site-footer *:focus-visible,
.in-the-loop *:focus-visible,
.newsletter-cta *:focus-visible,
.community-voices *:focus-visible,
.social-center-cell *:focus-visible {
    outline-color: #ffcd00;
}

/* ===== EMAIL TEST PAGE (temporary diagnostic — delete with the .razor) ===== */
.email-test-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin: 1rem 0;
}

.email-test-row label {
    font-weight: 600;
}

.email-test-row input[type="email"] {
    flex: 1;
    min-width: 220px;
    padding: 0.5rem 0.75rem;
    border: 1px solid #999;
    border-radius: 3px;
    font-size: 1rem;
}

.email-test-status {
    margin-top: 1rem;
}

.email-test-success {
    padding: 0.75rem 1rem;
    background: #e6f4e6;
    border-left: 4px solid #2e7d32;
    color: #1b5e20;
}

.email-test-error {
    padding: 0.75rem 1rem;
    background: #fbe9e7;
    border-left: 4px solid #c62828;
    color: #b71c1c;
}

/* ===== UTILITY ===== */
.section-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ===== HEADER ===== */
.site-header {
    background-color: #ffcd00;
    padding: 5px 0;
    position: relative;
    z-index: 101;
    overflow: visible;
    margin-bottom: 0;
}

.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: flex-start;
}

.logo-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: #000;
}

.iowa-block-logo {
    height: 97px;
    width: auto;
    display: inline-block;
    vertical-align: top;
    position: relative;
    top: -10px;
    margin-bottom: -20px;
}

.header-divider {
    width: 1px;
    height: 1.5rem;
    background-color: #000;
}

.header-unit-name {
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 2rem;
    font-weight: 300;
}

/* Donate CTA in the yellow header — solid black on yellow for strong but
   non-garish contrast (21:1). margin-left:auto pushes it to the right edge
   of the flex header-inner; align-self:center keeps it vertically centered
   against the tall logo block. */
.btn-donate {
    display: inline-block;
    margin-left: auto;
    align-self: center;
    background-color: #ffcd00;
    color: #000;
    padding: 0.65rem 1.6rem;
    border: 1px solid #000;
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s, color 0.2s;
}

.btn-donate:hover {
    background-color: #000;
    color: #ffcd00;
}

.btn-donate:focus-visible {
    outline: 2px solid #000;
    outline-offset: 3px;
}

/* Mobile header sizing — shrink the IOWA block, unit name, and Donate button
   so all three fit on a single row at 375px wide. The desktop logo's
   97px height (188px wide) already crowded out the unit name on phones; the
   Donate button surfaced it. */
@media (max-width: 768px) {
    .iowa-block-logo {
        height: 50px;
        top: 0;
        margin-bottom: 0;
    }

    .header-unit-name {
        font-size: 0.85rem;
    }

    .btn-donate {
        padding: 0.4rem 0.9rem;
        font-size: 0.8rem;
        letter-spacing: 0.04em;
    }
}

/* ===== NAVIGATION ===== */
.site-nav {
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    height: 80px;
    position: sticky;
    top: 0;
    z-index: 100;
    transition: background-color 0.3s ease;
}

.site-nav.scrolled {
    background-color: #000;
    border-bottom-color: #000;
}

.site-nav.scrolled .nav-links > li > a {
    color: #fff;
}

.site-nav.scrolled .mobile-nav-toggle {
    color: #fff;
}

/* Mobile branding cue — when the sticky nav has scrolled past the header,
   the site name in .site-header is off-screen, so we mirror it next to the
   hamburger. Only shown at hamburger-visible widths (<=768px) AND when the
   nav is in its scrolled state. */
.site-nav-brand {
    display: none;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    margin-left: 0.25rem;
    white-space: nowrap;
}

.site-nav-brand:focus-visible {
    outline: 2px solid #ffcd00;
    outline-offset: 2px;
    border-radius: 2px;
}

@media (max-width: 768px) {
    .site-nav.scrolled .site-nav-brand {
        display: inline-block;
    }
}

.nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 100%;
}

.nav-links {
    display: flex;
    justify-content: space-between;
    height: 100%;
}

.nav-links > li {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.nav-links > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 1rem;
    color: #000;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
    border-bottom: 7px solid transparent;
    transition: border-color 0.2s;
}

.nav-links > li:hover > a {
    border-bottom-color: #ffcd00;
}

/* ===== DROPDOWN MENUS ===== */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #fff;
    border: 1px solid #ddd;
    /* Square the top corners so the menu's top edge sits flush under the straight
       yellow hover bar (Bootstrap rounds all four by default). Bottom stays rounded. */
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    list-style: none;
    padding: 0.5rem 0;
    margin: 0;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-menu li a {
    display: block;
    padding: 0.5rem 1rem;
    color: #000;
    font-family: 'Roboto Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    transition: background-color 0.2s;
}

.dropdown-menu li a:hover {
    background-color: #f0f0f0;
}

.mobile-nav-toggle {
    display: none;
    background: none;
    border: none;
    color: #000;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
}

/* ===== HERO PORTALS =====
   Five photo panels, one per audience pillar, that widen on hover or keyboard focus.
   Each panel's base carries a persistent link strip, so there is always a visible,
   clickable control -- the floating headline recedes but holds nothing interactive.
   Design: design-system/cards/explorations/home-hero-r3-d-curtain-strip.html */
.hero-portals {
    position: relative;
    background: #000;
    overflow: hidden;
    /* "In the Loop" below is also black, so without an edge the two sections run
       together. A gold rule is the brand's own divider. */
    border-bottom: 5px solid #ffcd00;
}

.portals-row {
    display: flex;
    /* Sized to land on the fold rather than past it: 172px is everything the section
       shares the screen with -- 87px yellow header, 80px nav bar, and the 5px gold rule
       along this section's own base -- so the whole row fits a laptop viewport. The
       clamp holds it between a floor, below which the panels are too squat to read as
       photographs, and a ceiling, so a tall desktop monitor doesn't stretch it. */
    height: clamp(460px, calc(100vh - 172px), 620px);
}

.portal {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    border-right: 1px solid rgba(255, 255, 255, 0.14);
    transition: flex-grow 0.46s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.portal:last-child {
    border-right: none;
}

.portal img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Faces sit above centre in most of these photos, and a tall narrow panel crops
       hard, so bias the crop upward to keep heads in frame. */
    object-position: center 35%;
    /* Muted, not monochrome: enough desaturation that the colour on hover still reads
       as a change, without the resting row looking like a black-and-white archive. */
    filter: grayscale(0.55) brightness(0.72);
    transition: filter 0.46s ease, transform 0.7s ease;
}

/* Scrim so the strip and description keep their contrast over any photo. */
.portal::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.06) 46%);
}

.portal-strip {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    /* Centred, and lifted clear of the section's bottom edge. The strip's height is
       set by the vertical label inside it, so without bottom padding the text runs
       flush to the edge with no breathing room at all. */
    justify-content: center;
    /* No flex `gap` here: the arrow is zero-width at rest, but a gap would still
       reserve its space and shift the label off-centre by half of it. The arrow
       carries its own margin instead, so it contributes exactly nothing at rest. */
    min-height: 62px;
    padding: 0 1rem 1.75rem;
    text-decoration: none;
    /* Slightly heavier than it looks like it needs: the photos behind it are lighter
       now, and this is what holds the white label's contrast. */
    background: rgba(11, 11, 11, 0.66);
    transition: background 0.34s ease, min-height 0.34s ease;
}

.portal-name {
    font-family: 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #fff;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    transition: color 0.3s ease;
}

.portal-arrow {
    width: 0;
    margin-left: 0;
    overflow: hidden;
    font-size: 1rem;
    line-height: 1;
    color: #0b0b0b;
    transition: width 0.34s ease, margin-left 0.34s ease;
}

.portal-desc {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 78px;
    z-index: 5;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #e6e2d8;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.32s ease, transform 0.32s ease;
}

/* The curtain holds the headline only. It recedes to 35% rather than disappearing,
   so a stray cursor dims the message instead of erasing it. */
.portals-curtain {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Keeps the headline in the upper third, clear of the labels and the description
       that appears on hover. */
    padding-bottom: 170px;
    text-align: center;
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.5s ease;
}

/* Lighting the photos up cost the headline its contrast margin (it fell to ~3.5:1,
   which only clears AA because the type is large). This pool of shade sits behind the
   headline alone, so the row stays bright while the words stay legible -- and it
   recedes with the curtain, since it is part of it. */
.portals-curtain::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 46% 34% at 50% 36%,
        rgba(0, 0, 0, 0.74) 0%,
        rgba(0, 0, 0, 0.5) 48%,
        rgba(0, 0, 0, 0) 76%);
}

.portals-eyebrow {
    position: relative;
    font-family: 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: #ffcd00;
    margin: 0 0 0.875rem;
}

.portals-curtain h1 {
    position: relative;
    font-family: var(--font-display);
    font-size: 3.25rem;
    font-weight: 700;
    line-height: 1.03;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0;
    max-width: 16ch;
    text-shadow: 0 3px 30px rgba(0, 0, 0, 0.65);
}

.portals-curtain h1 span {
    font-style: italic;
    color: #ffcd00;
}

/* Expansion is gated on a real pointer: on touch, :hover sticks after a tap and
   would leave a panel stuck open. Keyboard focus is handled separately below. */
@media (hover: hover) and (min-width: 901px) {
    /* 2.25, not 3, for a gentler open. Five panels at grow 1 hold 20% of the row each;
       grow 3 took the open one to 42.9% -- a 22.9-point gain -- and 2.25 takes it to
       36.0%, a 16.0-point gain, i.e. 30% less movement. Keep this in step with the
       :focus-within rule below, or keyboard and mouse would open to different widths. */
    .portal:hover {
        flex-grow: 2.25;
    }

    .portal:hover img {
        filter: grayscale(0) brightness(0.92);
        /* Gentle: a bigger zoom re-crops the photo just as it opens, which is what
           was lopping the tops off heads. */
        transform: scale(1.02);
    }

    .portal:hover .portal-strip {
        background: #ffcd00;
        min-height: 66px;
    }

    .portal:hover .portal-name {
        writing-mode: horizontal-tb;
        transform: none;
        color: #0b0b0b;
    }

    .portal:hover .portal-arrow {
        width: 1rem;
        margin-left: 0.625rem;
    }

    .portal:hover .portal-desc {
        opacity: 1;
        transform: translateY(0);
    }

    .hero-portals:hover .portals-curtain {
        opacity: 0.25;
        transform: scale(0.985);
    }
}

/* Keyboard focus gets the identical treatment, on every device. */
@media (min-width: 901px) {
    .portal:focus-within {
        flex-grow: 2.25;
    }

    .portal:focus-within img {
        filter: grayscale(0) brightness(0.92);
        /* Gentle: a bigger zoom re-crops the photo just as it opens, which is what
           was lopping the tops off heads. */
        transform: scale(1.02);
    }

    .portal:focus-within .portal-strip {
        background: #ffcd00;
        min-height: 66px;
    }

    .portal:focus-within .portal-name {
        writing-mode: horizontal-tb;
        transform: none;
        color: #0b0b0b;
    }

    .portal:focus-within .portal-arrow {
        width: 1rem;
        margin-left: 0.625rem;
    }

    .portal:focus-within .portal-desc {
        opacity: 1;
        transform: translateY(0);
    }

    .hero-portals:focus-within .portals-curtain {
        opacity: 0.25;
        transform: scale(0.985);
    }
}

/* Ink, not gold: focusing a strip also turns it gold, so a gold ring would be
   invisible against its own background. */
.portal-strip:focus-visible {
    outline: 3px solid #0b0b0b;
    outline-offset: -3px;
}

/* Narrow screens: the row can't hold five panels, so it stacks. The curtain stops
   being an overlay and becomes an ordinary band above them (it is first in the DOM
   for exactly this). Panels show in colour with horizontal labels -- there is no
   hover on a phone, so the resting state has to be the finished state. */
@media (max-width: 900px) {
    .portals-row {
        flex-direction: column;
        height: auto;
    }

    .portal {
        flex: none;
        height: 190px;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    }

    .portal img {
        filter: grayscale(0) brightness(0.74);
    }

    .portal-name {
        writing-mode: horizontal-tb;
        transform: none;
    }

    .portal-arrow {
        width: 1rem;
        margin-left: 0.625rem;
        color: #ffcd00;
    }

    .portal-desc {
        display: none;
    }

    .portals-curtain {
        position: static;
        padding: 3rem 1.5rem 2rem;
        opacity: 1;
        transform: none;
    }

    .portals-curtain h1 {
        font-size: 2.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .portal,
    .portal img,
    .portal-strip,
    .portal-arrow,
    .portal-desc,
    .portals-curtain {
        transition: none;
    }
}

/* ===== HERO CAROUSEL =====
   Retained for the one-line switch-back documented in Home.razor (<HeroCarousel />). */
.hero-carousel {
    position: relative;
    overflow: hidden;
    background: #000;
}

.carousel-viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel-slide {
    min-width: 100%;
    aspect-ratio: 12 / 5;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 205, 0, 0.85);
    color: #000;
    border: none;
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: bold;
    transition: background-color 0.2s;
}

.carousel-btn:hover {
    background: #ffcd00;
}

.carousel-prev {
    left: 1rem;
}

.carousel-next {
    right: 1rem;
}

/* ===== IN THE LOOP ===== */
.in-the-loop {
    background-color: #000;
    padding: 3.6rem 0 4.32rem;
}

.loop-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.loop-header h2 {
    font-size: 4.0625rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.05em;
    color: #fff;
}

.newsletter-link {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid #fff;
    padding-bottom: 2px;
    color: #fff;
}

.newsletter-link:hover {
    opacity: 0.7;
}

.loop-links {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Separator between the two actions. Same white as its neighbours, but un-underlined — the
   missing underline is what marks it as connective tissue rather than a third thing to click. */
.loop-links-or {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
}

/* The sign-up trigger is a real <button> (it toggles a panel, it doesn't navigate) styled to
   sit beside its sibling link — so reset the UA button chrome rather than restyle the link. */
.newsletter-toggle {
    background: none;
    border: 0;
    border-bottom: 2px solid #fff;
    font-family: inherit;
    cursor: pointer;
}

/* ===== IN THE LOOP — NEWSLETTER SIGN-UP ===== */
/* Collapsed by default; Bootstrap's .collapse does the show/hide. Sits on the section's black
   band, so it takes the Ink & Gold register (gold rule, gold-on-ink submit) rather than the
   light-page form styling. */

/* Bootstrap animates height on .collapsing; slow it slightly so the panel reads as opening
   rather than snapping. */
.newsletter-panel.collapsing {
    transition: height 0.4s ease;
}

/* The height slide alone is easy to miss on a tall dark band, so the contents fade and settle
   downward with it. .collapsing is in the selector as well as .show: Bootstrap only adds .show
   once the height animation finishes, so keying on .show alone would expand an empty box and
   then pop the content in at the end. */
.newsletter-panel.collapsing .newsletter-panel-inner,
.newsletter-panel.show .newsletter-panel-inner {
    opacity: 1;
    transform: none;
}

.newsletter-panel-inner {
    border-left: 3px solid #ffcd00;
    padding: 1.1rem 0 1.1rem 1.25rem;
    margin-bottom: 2rem;
    max-width: 620px;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.newsletter-panel-text {
    color: #d8d8d8;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 0.9rem;
}

.newsletter-form-label {
    display: block;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 0.45rem;
}

.newsletter-form-row {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.newsletter-form-row input[type="email"] {
    flex: 1 1 260px;
    min-width: 0;
    padding: 0.7rem 0.85rem;
    font-size: 0.95rem;
    font-family: inherit;
    color: #0b0b0b;
    background: #fff;
    border: 1px solid #fff;
    border-radius: 2px;
}

.newsletter-form-row input[type="email"]::placeholder {
    color: #6b6b6b;
}

/* Ink button: gold text, never white (2026-07 button vocabulary). */
.newsletter-submit {
    padding: 0.7rem 1.6rem;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ffcd00;
    background: #0b0b0b;
    border: 2px solid #ffcd00;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.newsletter-submit:hover {
    background: #ffcd00;
    color: #0b0b0b;
}

/* Off-screen rather than display:none — Mailchimp's own embed positions its bot trap this
   way, and a display:none input is skipped by some bots. */
.newsletter-honeypot {
    position: absolute;
    left: -5000px;
}

/* WCAG 2.2 AA (2.3.3 Animation from Interactions): honour the OS setting. The panel still
   opens and closes, it just arrives instantly and fully opaque. */
@media (prefers-reduced-motion: reduce) {
    .newsletter-panel.collapsing {
        transition: none;
    }

    .newsletter-panel-inner {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ===== ABOVE-FOOTER NEWSLETTER CTA BAND ===== */
/* Always-visible sign-up rendered above the footer on every page except home and the error
   page (see NewsletterVisibility + MainLayout). Same dark Ink & Gold register as the homepage
   sign-up, and it reuses that form's .newsletter-form-label, .newsletter-form-row,
   .newsletter-submit, and .newsletter-honeypot styling, so only the band and its horizontal
   layout are defined here. The band (#151515) sits above the darker footer (#0b0b0b), and a
   thin gold hairline where the footer meets the band gives a crisp, clearly visible break
   between the two dark zones. */
.newsletter-cta {
    background-color: #151515;
}

/* Gold hairline seam: a thin brand-gold line where the footer meets the band, giving a crisp,
   visible break between the two dark zones (a shadow between two near-blacks reads as nothing).
   Scoped to the adjacent-sibling pair, so the footer is untouched on home/error. */
.newsletter-cta + .site-footer {
    border-top: 1px solid #ffcd00;
}

/* .section-container supplies max-width + horizontal padding; this adds the split and the
   vertical rhythm. padding-top/-bottom (not the shorthand) so .section-container's
   horizontal padding: 0 1.5rem is preserved. */
.newsletter-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
    flex-wrap: wrap;
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
}

.newsletter-cta-copy {
    flex: 1 1 320px;
    min-width: 0;
}

.newsletter-cta-eyebrow {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #ffcd00;
    margin: 0 0 0.55rem;
}

.newsletter-cta h2 {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 900;
    font-size: 2.15rem;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: #fff;
    margin: 0 0 0.6rem;
}

/* Second word ("loop") in brand gold. */
.newsletter-cta h2 span {
    color: #ffcd00;
}

.newsletter-cta-blurb {
    color: #cfcfcf;
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0;
    max-width: 46ch;
}

.newsletter-cta-form {
    flex: 0 1 460px;
}

/* Below the split's breakpoint the copy and form stack full-width. */
@media (max-width: 820px) {
    .newsletter-cta-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.6rem;
    }

    .newsletter-cta h2 {
        font-size: 1.85rem;
    }

    .newsletter-cta-form {
        flex: 1 1 auto;
        width: 100%;
    }
}

.loop-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.loop-card {
    background: #ffcd00;
    overflow: hidden;
    transition: transform 0.2s;
    display: block;
    color: inherit;
    text-decoration: none;
}

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

.loop-empty {
    color: #fff;
    grid-column: 1 / -1;
}

.loop-card-skeleton {
    background: #ffcd00;
    overflow: hidden;
}

.loop-card-skeleton .skeleton-img {
    aspect-ratio: 4 / 3;
    background: rgba(0, 0, 0, 0.1);
    animation: loop-skeleton-pulse 1.4s ease-in-out infinite;
}

.loop-card-skeleton .skeleton-body {
    padding: 1rem;
}

.loop-card-skeleton .skeleton-line {
    height: 1.2rem;
    background: rgba(0, 0, 0, 0.1);
    margin-bottom: 0.4rem;
    animation: loop-skeleton-pulse 1.4s ease-in-out infinite;
}

.loop-card-skeleton .skeleton-line:last-child {
    margin-bottom: 0;
    width: 70%;
}

@keyframes loop-skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
    .loop-card-skeleton .skeleton-img,
    .loop-card-skeleton .skeleton-line {
        animation: none;
    }
}

.loop-card-img {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.loop-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.loop-card-body {
    padding: 1rem;
    background-color: #ffcd00;
}

.loop-card-body p {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.4;
}

/* ===== PASSION SECTION =====
   Cream & Gold statement band (design-system/cards/explorations/passion-cream-gold.html):
   the light sibling of the Community Voices Ink & Gold band — cream, gold swash
   on the key word, ghost Playfair watermark, ink CTA that inverts to gold. */
.passion-section {
    position: relative;
    padding: 7.5rem 1.5rem;
    text-align: center;
    background: #f5f3ee;
    /* clips the oversized ghost watermark */
    overflow: hidden;
}

/* Ghost Playfair watermark anchors the band without competing with the
   headline (decorative only). */
.passion-section::before {
    content: "learning";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    font-size: 15rem;
    line-height: 1;
    color: rgba(138, 115, 0, 0.08);
    pointer-events: none;
    white-space: nowrap;
}

.passion-content {
    position: relative;
}

.passion-eyebrow {
    font-family: 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: #8A7300;
    margin: 0 0 1.2rem;
}

.passion-content h2 {
    font-family: 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
    font-size: 4.0625rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: #0b0b0b;
    margin: 0 0 2.2rem;
}

.passion-content h2 span {
    box-shadow: inset 0 -0.26em 0 #ffcd00;
}

.btn-ink-gold {
    display: inline-block;
    padding: 0.85rem 2.4rem;
    background: #0b0b0b;
    color: #ffcd00;
    font-family: 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-ink-gold:hover,
.btn-ink-gold:focus-visible {
    background: #ffcd00;
    color: #0b0b0b;
}

/* ===== COMMUNITY VOICES =====
   Ink & Gold execution from the winning design exploration
   (design-system/cards/explorations/voices-ink-gold.html): ink band, gold
   eyebrow + accents, Playfair italic quote, ghost quotation mark. */
.community-voices {
    background-color: #0b0b0b;
    color: #fff;
    padding: 0;
}

.voices-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 0;
    align-items: stretch;
}

.voices-text {
    /* Constrain the text content width to roughly what it had inside the
       1200px .section-container, then right-align it within the left cell so
       the text continues to meet the image at the page center while the image
       extends to the right viewport edge. The flex column + justify-content
       vertically centers the text inside the cell, which (with grid
       align-items: stretch) matches the image's full section height. */
    position: relative;
    /* clips the oversized ghost quotation mark */
    overflow: hidden;
    max-width: 660px;
    margin-left: auto;
    padding: 4.5rem 3.5rem 4.5rem 1.5rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Oversized ghost quotation mark anchors the composition without competing
   with the text (decorative only). */
.voices-text::before {
    content: "\201C";
    position: absolute;
    top: -2rem;
    right: -1rem;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    font-size: 22rem;
    line-height: 1;
    color: rgba(255, 205, 0, 0.07);
    pointer-events: none;
}

.voices-eyebrow {
    font-family: 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: #ffcd00;
    margin: 0 0 1rem;
}

.voices-text h2 {
    font-family: 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
    font-size: 4rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1;
    color: #fff;
    margin: 0 0 2.4rem;
}

.voices-text h2 span {
    color: #ffcd00;
}

.voices-text blockquote {
    position: relative;
    margin: 0;
    max-width: 540px;
}

.voices-text blockquote p {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 1.45;
    color: #fff;
    margin: 0 0 1.6rem;
}

.voices-text blockquote p strong {
    font-weight: 700;
    color: #ffcd00;
}

.voices-attribution {
    font-family: 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #ffcd00;
    border-top: 1px solid rgba(255, 205, 0, 0.35);
    padding-top: 0.7rem;
    align-self: flex-start;
    display: inline-block;
}

.voices-attribution cite {
    font-style: normal;
}

.voices-image {
    overflow: hidden;
    border-left: 6px solid #ffcd00;
}

.voices-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ===== PHOTO GRID ===== */
.photo-grid {
    overflow: hidden;
}

.grid-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.grid-row img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.grid-3x3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.grid-3x3 img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.social-center-cell {
    background-color: #333;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    padding: 1.5rem 2rem 1.5rem 2.75rem;
    aspect-ratio: 4 / 3;
}

.social-center-cell h3 {
    margin: 0 0 0.75rem;
    font-family: 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffcd00;
}

.social-center-cell p {
    margin: 0 0 1.25rem;
    font-size: 1.25rem;
}

.social-center-cell .social-icons {
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
}

.social-center-cell .social-icons a {
    color: #fff;
}

/* same treatment as the footer icons */
.social-center-cell .social-icons a:hover,
.social-center-cell .social-icons a:focus-visible {
    color: #ffcd00;
}

/* PHOTO GRID — social card explicitly placed in 3x3 center cell so it can
   appear first in markup (for the mobile layout where CTA leads). On mobile
   the grid container becomes a flex column with a scroll-snap photo strip. */
.social-center-cell {
    grid-row: 2;
    grid-column: 2;
}

.photo-strip {
    display: contents;
}

/* Instagram photos are wrapped in permalink anchors; placeholders are bare imgs,
   so the strip styles both. Block display keeps the inline-image baseline gap
   from opening a seam between grid rows. */
.photo-strip a {
    display: block;
    position: relative;
    /* clips the caption bar while it sits translated below the photo */
    overflow: hidden;
}

/* Caption bar, TTU-style: at rest a small brand-gold dot sits near the photo's
   bottom-left corner (50px above the bottom edge); on hover/keyboard focus it
   expands rightward into a gold caption bar with ink text (two clamped lines
   with an ellipsis) and the text fades in. Only width/max-height/radius/padding
   transition — the same mechanic as ttu.edu's Instagram tiles. */
.photo-strip .photo-caption {
    position: absolute;
    inset: auto auto 50px 1rem;
    width: 3rem;
    /* the dot: height comes from clipping the (invisible) text to max-height */
    max-height: 3rem;
    border-radius: 50%;
    padding: 0;
    overflow: hidden;
    /* brand-gold dot expands into a matching gold caption bar with ink text */
    background: #ffcd00;
    color: #0b0b0b;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.03em;
    transition: width 0.4s ease-in-out, max-height 0.4s ease-in-out,
                border-radius 0.4s ease-in-out, padding 0.4s ease-in-out;
}

/* The clamp sits on this padding-free inner span: -webkit-line-clamp lets the
   clipped lines paint into the clamped element's own padding, so the padded
   caption bar cannot carry it directly. */
.photo-strip .photo-caption-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* hidden inside the dot; fades in slightly after the bar starts expanding */
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
}

.photo-strip a:hover .photo-caption,
.photo-strip a:focus-visible .photo-caption {
    width: 80%;
    max-height: 8rem;
    border-radius: 0.5rem;
    padding: 1.25rem 1.5rem;
}

.photo-strip a:hover .photo-caption-text,
.photo-strip a:focus-visible .photo-caption-text {
    opacity: 1;
    transition-delay: 0.15s;
}

@media (prefers-reduced-motion: reduce) {
    .photo-strip .photo-caption,
    .photo-strip .photo-caption-text {
        transition: none;
    }

    .dropdown > a::after {
        transition: none;
    }
}

/* Inset ring so the focus indicator isn't clipped by the gapless grid neighbors. */
.photo-strip a:focus-visible {
    outline: 3px solid #ffcd00;
    outline-offset: -3px;
}

.photo-strip-dots {
    display: none;
}

@media (max-width: 768px) {
    .grid-3x3 {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .social-center-cell {
        grid-row: auto;
        grid-column: auto;
        aspect-ratio: auto;
        padding: 2rem 1rem 2rem 1.75rem;
    }

    .photo-strip {
        display: flex;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 0;
        scrollbar-width: none;
    }

    .photo-strip::-webkit-scrollbar {
        display: none;
    }

    .photo-strip > img,
    .photo-strip > a {
        flex: 0 0 76.9%;
        /* width override needed because the cascaded .grid-3x3 img { width: 100% }
           combined with the image's intrinsic min-content keeps the photo at its
           natural width instead of the flex-basis we want. */
        width: 76.9%;
        min-width: 0;
        max-width: none;
        scroll-snap-align: start;
    }

    .photo-strip > img,
    .photo-strip > a img {
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }

    .photo-strip-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 0;
    }

    .photo-strip-dot {
        width: 1.75rem;
        height: 1.75rem;
        padding: 0;
        border: none;
        background: transparent;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .photo-strip-dot::before {
        content: "";
        width: 0.625rem;
        height: 0.625rem;
        border-radius: 50%;
        border: 1px solid #595959;
        background: transparent;
        transition: background-color 0.15s ease;
    }

    .photo-strip-dot:hover::before,
    .photo-strip-dot.active::before {
        background-color: #595959;
    }

    .photo-strip-dot:focus-visible {
        outline: 2px solid #ffcd00;
        outline-offset: 0;
        border-radius: 50%;
    }
}

/* ===== EVENTS SECTION ===== */
.events-section {
    padding: 5.18rem 0;
    background-color: #f5f5f5;
}

.events-heading {
    text-align: left;
    font-size: 4.0625rem;
    font-weight: 700;
    letter-spacing: -0.05em;
    margin-bottom: 2rem;
}

.events-loading {
    text-align: center;
    color: #666;
}

.events-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.event-card {
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: block;
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.2s, transform 0.2s;
}

.event-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

.event-card:focus-visible {
    outline: 2px solid #ffd200;
    outline-offset: 2px;
}

/* aspect-ratio, not a fixed height: below 768px .events-cards collapses to one column and the
   card goes full-width, so a fixed 200px height letterboxed the photo to ~3.6:1 and cropped
   faces out of frame. A ratio holds the same crop at every width. */
.event-card-img img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

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

.event-card-body h3 {
    font-size: 1rem;
    margin: 0 0 0.5rem;
    line-height: 1.4;
}

.event-date {
    font-size: 0.85rem;
    color: #545454;
    margin: 0 0 0.25rem;
}

.event-location {
    font-size: 0.8rem;
    color: #595959;
    margin: 0;
}

/* ===== SOCIAL SECTION ===== */
.social-section {
    background-color: #1a1a1a;
    color: #fff;
}

.social-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    max-width: 100%;
    padding: 0;
}

.social-photo img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.social-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}

.social-info h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.social-info p {
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
    max-width: 200px;
}

.social-icons {
    display: flex;
    gap: 1rem;
}

.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

.social-icons a:hover {
    opacity: 0.7;
}

/* ===== FOOTER ===== */
.site-footer {
    background-color: #0b0b0b;
    color: #fff;
    font-family: 'Roboto Condensed', 'Roboto', sans-serif;
    padding: 4rem 0;
}

/* One grid for the whole footer: the `auto` right column shrink-wraps to the
   pillar links list, so the social icons row below the divider can left-align
   with the beginning of the links text (same column, justify-self: start). */
.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 2rem;
}

.footer-divider {
    grid-column: 1 / -1;
    border-top: 1px solid #333;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.footer-logo .iowa-block-logo {
    height: 50px;
    position: static;
    top: auto;
    margin-bottom: 0.5rem;
    fill: #ffcd00;
}

.footer-unit {
    margin: 0.5rem 0;
    font-size: 1.7rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.footer-left address,
.footer-left p {
    font-size: 0.95rem;
    font-weight: 100;
    line-height: 1.5;
    color: #ccc;
    margin-top: 0.3rem;
}

.footer-left a {
    color: #ffcd00;
}

.footer-left a:hover {
    text-decoration: underline;
}

.footer-nav,
.footer-connect {
    /* links stacked above the social icons, sharing the column's left edge */
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.footer-nav ul,
.footer-connect ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* Bootstrap's reboot gives ul a 2rem padding-left (bootstrap loads before
       app.css and its element selector outranks the universal reset), which
       pushed the links right of the address column in the stacked mobile
       layout. Zero it and drop the markers it would otherwise reveal. */
    padding-left: 0;
    margin: 0;
    list-style: none;
}

.footer-nav a,
.footer-connect a {
    font-size: 0.95rem;
    font-weight: 100;
    color: #ccc;
    letter-spacing: 0.01em;
}

.footer-nav a:hover,
.footer-connect a:hover {
    color: #ffcd00;
    text-decoration: underline;
}

/* Single row under the divider: copyright left, legal links right. */
.footer-bottom {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    font-size: 0.85rem;
    font-weight: 100;
    color: #999;
}

.footer-bottom a {
    color: #999;
    font-size: 0.85rem;
}

.footer-bottom a:hover {
    color: #ffcd00;
    text-decoration: underline;
}

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

.footer-social a {
    color: #ccc;
}

.footer-social a:hover,
.footer-social a:focus-visible {
    color: #ffcd00;
    text-decoration: none;
}

.footer-social svg {
    display: block;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .site-nav {
        height: auto;
    }

    .nav-inner {
        height: auto;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .mobile-nav-toggle {
        display: block;
        padding: 1rem 0.5rem;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        height: auto;
    }

    .nav-links.open {
        display: flex;
    }

    .nav-links > li {
        flex: none;
        flex-direction: column;
        align-items: stretch;
    }

    .nav-links > li > a {
        justify-content: flex-start;
        text-align: left;
        padding: 0.75rem 1rem;
        height: auto;
        border-bottom: none;
    }

    .nav-links > li:hover > a {
        border-bottom: none;
        background-color: #f0f0f0;
    }

    .dropdown .dropdown-menu {
        display: none;
        position: static;
        box-shadow: none;
        border: none;
        padding-left: 1rem;
        width: auto;
    }

    .dropdown:hover .dropdown-menu {
        display: none;
    }

    .dropdown.dropdown-open .dropdown-menu {
        display: block;
    }

    /* Open/close chevron on the pillar toggles so the sub-options are
       discoverable. Decorative only — the link's aria-expanded already
       announces the state to screen readers. */
    .dropdown > a::after {
        content: "";
        flex: none;
        width: 0.5em;
        height: 0.5em;
        margin-left: auto;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        /* border-right + border-bottom rotated 45° draws a down-pointing chevron */
        transform: rotate(45deg);
        transition: transform 0.2s ease;
    }

    .dropdown.dropdown-open > a::after {
        /* flipped: points up while the sub-menu is open */
        transform: rotate(225deg);
    }

    .loop-cards {
        grid-template-columns: 1fr;
    }

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

    .voices-text {
        max-width: 100%;
        margin-left: 0;
        padding: 2.75rem 1.5rem;
    }

    .voices-text::before {
        font-size: 12rem;
    }

    /* Stacked: photo leads, gold edge moves to its bottom seam. */
    .voices-image {
        order: -1;
        border-left: none;
        border-bottom: 6px solid #ffcd00;
    }

    .voices-image img {
        height: auto;
    }

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

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

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

    .footer-nav,
    .footer-connect {
        /* restores the row spacing the desktop column-gap doesn't provide */
        margin-top: 2rem;
    }

    /* Stacked: legal links drop below the copyright line. */
    .footer-bottom {
        flex-direction: column;
        gap: 0.25rem;
    }

    .passion-section {
        padding: 4.5rem 1.25rem;
    }

    .passion-section::before {
        font-size: 8rem;
    }

    .passion-content h2 {
        font-size: 2.6rem;
    }

    .voices-text h2 {
        font-size: 2.6rem;
    }

    /* Match the Passion/Voices mobile heading scale. */
    .loop-header h2 {
        font-size: 2.6rem;
    }

    .events-heading {
        font-size: 2.6rem;
    }
}

/* ===== CONTENT PAGE LAYOUT ===== */
.content-page {
    padding: 3rem 0;
    /* Lets a full-bleed .quote reach the viewport edges without a spurious horizontal scrollbar
       (a 100vw bleed otherwise overshoots by the vertical scrollbar's width). overflow-x: clip
       does not create a scroll container, so sticky/vertical behaviour is unaffected. */
    overflow-x: clip;
}

.content-page section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

/* Responsive embeds: DB-authored <iframe>s (e.g. the TICE curriculum video, ref_Sections
   row 838) carry fixed width/height attributes. Cap them to the column width and hold 16:9
   so they never overflow a narrow phone (WCAG 1.4.10 reflow). */
.content-page section iframe {
    width: 100%;
    max-width: 560px;
    height: auto;
    aspect-ratio: 16 / 9;
}

/* "Serif with Gold Kicker" (2026-07 design round): the display serif in title case
   with a short gold kicker bar, replacing the old all-caps condensed + full-width
   gold underline. Pages author headings in Title Case — no text-transform. */
.content-page h2 {
    font-family: var(--font-display);
    font-size: 2.1rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
}

.content-page h2::after {
    content: "";
    display: block;
    width: 3.5rem;
    height: 4px;
    background: #ffcd00;
    margin-top: 0.6rem;
}

/* "Condensed Caps" h3 (2026-07 design round, companion to the serif h2): small ink
   caps with open tracking — serif landmarks, sans wayfinding. Scoped to CLASSLESS h3s
   only: component h3s (card titles, session names, accordion headers) carry a class
   and must not inherit the caps, and .content-page h3 outranks their single-class
   rules on specificity, so the :not([class]) guard is what keeps them safe. */
.content-page h3:not([class]) {
    font-family: 'Roboto Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 1.75rem 0 0.6rem;
}

.content-page p {
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.content-page ul,
.content-page ol {
    list-style: disc;
    padding-left: 2.5rem;
    margin-bottom: 1rem;
}

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

.content-page li {
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 0.3rem;
}

.content-page a {
    color: #000;
    text-decoration: underline;
    text-decoration-color: #ffcd00;
    text-underline-offset: 3px;
    transition: color 0.2s;
}

.content-page a:hover {
    color: #333;
}

/* ===== STAFF CARD GRID ===== */
/* Aligned with the program-card family: hairline border, gold top rule, uppercase
   gold eyebrow (the person's title), Playfair name, muted bio, hover lift. Square
   photo crop — the 2025 formal shots are centered, so the crop is safe. */
.staff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
    align-items: stretch;
    margin: 2rem 0;
}

.staff-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e7e3d8;
    border-top: 4px solid #ffcd00;
    border-radius: 3px;
    overflow: hidden;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.staff-card:hover {
    box-shadow: 0 8px 22px rgba(11, 11, 11, 0.10);
    transform: translateY(-2px);
}

.staff-card-photo {
    aspect-ratio: 1 / 1;
    background: #f5f3ee;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.staff-card-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
}

.staff-card-mono {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 2.6rem;
    color: #8a7300;
    letter-spacing: 0.02em;
}

.staff-card-info {
    padding: 1.1rem 1.4rem 1.3rem;
    text-align: left;
}

.staff-card .staff-card-eyebrow {
    font-family: 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7a6a2f;
    margin-bottom: 0.45rem;
}

.staff-card .staff-card-name {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.16;
    color: #0b0b0b;
    margin-bottom: 0.45rem;
}

.staff-card .staff-card-bio {
    font-size: 0.82rem;
    color: #595959;
    line-height: 1.5;
    margin: 0;
}

/* ===== PROGRAM CARDS ===== */
/* Refined cards adapted from the program-card-blazor design reference into this single
   global stylesheet (per docs/coding-conventions.md — no scoped .razor.css), reusing the
   site's already-loaded fonts (Playfair Display title, Roboto Condensed eyebrow). The gold
   accents are darkened from the reference (#9a8a55 eyebrow, #caa400 arrow) to meet WCAG 2.2
   AA contrast on white. Inner selectors are scoped under .program-card so they out-rank the
   .content-page prose rules (h3/p/a) above. Mobile-first grid: 1 / 2 / 3 cols at 620/980px. */
.program-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: stretch;
    margin: 1.5rem 0;
}

@media (min-width: 620px) {
    .program-card-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 980px) {
    .program-card-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

a.program-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 236px;
    background: #fff;
    border: 1px solid #e7e3d8;
    border-top: 4px solid #ffcd00;
    border-radius: 3px;
    padding: 26px 26px 22px;
    color: #0b0b0b;
    text-decoration: none !important;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

a.program-card:hover {
    box-shadow: 0 8px 22px rgba(11, 11, 11, 0.10);
    transform: translateY(-2px);
}

.program-card .program-card-eyebrow {
    font-family: 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7a6a2f;
    margin-bottom: 13px;
}

.program-card .program-card-title {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.16;
    color: #0b0b0b;
    margin-bottom: 11px;
}

.program-card .program-card-desc {
    font-size: 0.875rem;
    line-height: 1.58;
    color: #555;
    margin-bottom: 18px;
}

.program-card .program-card-cta {
    margin-top: auto;
    border-top: 1px solid #eee9dd;
    padding-top: 14px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #0b0b0b;
}

.program-card .program-card-arrow {
    color: #8a7300;
}

/* ===== BOARD MEMBER CARDS (BoardMemberCard: compact directory rows) ===== */
/* Directory rows for the Advisory Board (Our Story). White cards on the white page — like
   the staff/program grids; cream is reserved for the quote/editorial register, so it appears
   here only as the small monogram disc. Gold LEFT rule is the accent (a variant of the card
   top-border motif). Two-up at 760px. Inner selectors are scoped under .board-card so they
   out-rank the .content-page prose rules (h3/p). */
.board-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: stretch;
    margin: 2rem 0;
}

@media (min-width: 760px) {
    .board-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.board-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fff;
    border: 1px solid #e7e3d8;
    border-left: 4px solid #ffcd00;
    border-radius: 3px;
    padding: 0.95rem 1.15rem;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.board-card:hover {
    box-shadow: 0 6px 16px rgba(11, 11, 11, 0.08);
    transform: translateY(-1px);
}

.board-card .board-card-mono {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #f5f3ee;
    border: 1px solid #e7e3d8;
    color: #0b0b0b;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
}

.board-card .board-card-main {
    flex: 1 1 auto;
    min-width: 0;
}

.board-card .board-card-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.06rem;
    line-height: 1.15;
    color: #0b0b0b;
    margin: 0 0 0.12rem;
}

.board-card .board-card-role {
    font-family: 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7a6a2f;
    margin: 0;
}

.board-card .board-card-aside {
    flex: 0 0 auto;
    text-align: right;
}

.board-card .board-card-loc {
    font-size: 0.8rem;
    color: #555;
    margin: 0 0 0.15rem;
    white-space: nowrap;
}

.board-card .board-card-since {
    font-family: 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8a7300;
    white-space: nowrap;
}

/* Narrow screens: drop the location/since block under the name (left-aligned) instead of
   hiding it, so no member data is lost on mobile. */
@media (max-width: 520px) {
    .board-card {
        flex-wrap: wrap;
    }

    .board-card .board-card-aside {
        flex-basis: 100%;
        text-align: left;
        margin-left: calc(44px + 1rem);
        display: flex;
        gap: 0.9rem;
    }

    .board-card .board-card-loc {
        margin-bottom: 0;
    }
}

/* ===== BUCKSBAUM ALUMNI CARDS (BucksbaumAlumniCard: photo · name · year · degree) ===== */
/* The StaffCard pattern adapted for alumni: a square photo (headshot, or an initials monogram
   on cream when no photo) above name / grad year / degree. White cards on the white page with
   the gold top accent. Auto-fill grid at the staff-card rhythm. Inner selectors scoped under
   .alumni-card so they out-rank the .content-page prose rules (h3/p). */
.alumni-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 24px;
    align-items: stretch;
    margin: 2rem 0;
}

/* a.alumni-card matches .content-page a on specificity and wins on source order, so the
   prose gold underline never bleeds into the card. */
a.alumni-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e7e3d8;
    border-top: 4px solid #ffcd00;
    border-radius: 3px;
    overflow: hidden;
    text-decoration: none;
    color: #0b0b0b;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.alumni-card:hover {
    box-shadow: 0 8px 22px rgba(11, 11, 11, 0.10);
    transform: translateY(-2px);
}

/* Square media well. A headshot fills it (object-fit: cover); the monogram is the fallback. */
.alumni-card .alumni-card-photo {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #f5f3ee;
    border-bottom: 1px solid #e7e3d8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.alumni-card .alumni-card-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.alumni-card .alumni-card-mono {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 2.4rem;
    color: #8a7300;
    letter-spacing: 0.02em;
}

.alumni-card .alumni-card-body {
    padding: 1rem 1.2rem 1.2rem;
}

.alumni-card .alumni-card-year {
    font-family: 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7a6a2f;
    margin: 0 0 0.35rem;
}

.alumni-card .alumni-card-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.18rem;
    line-height: 1.14;
    color: #0b0b0b;
    margin: 0 0 0.35rem;
}

.alumni-card .alumni-card-degree {
    font-size: 0.86rem;
    color: #555;
    line-height: 1.4;
    margin: 0;
}

/* ===== BUCKSBAUM ALUMNI PROFILE (per-alum detail page, /students/academy/alumni/{id}) ===== */
/* Editorial single-column profile (design-round Option C): centered circular photo, serif name
   with gold rule, a label/value list, prose blocks, and the ink "Connect" mailto CTA. On white,
   in the design-system register. Empty fields are omitted by the page, so the layout stays tidy
   for sparsely-filled profiles. */
.alumni-profile {
    max-width: 660px;
    margin: 0 auto;
}

.alumni-profile .alumni-profile-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a7300;
    text-decoration: none;
    margin-bottom: 2rem;
}

.alumni-profile .alumni-profile-back::before {
    content: "\2190";
}

.alumni-profile-missing {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
}

.alumni-profile-head {
    text-align: center;
}

.alumni-profile .alumni-profile-photo {
    width: 150px;
    height: 150px;
    margin: 0 auto 1.2rem;
    border-radius: 50%;
    overflow: hidden;
    background: #f5f3ee;
    border: 1px solid #e7e3d8;
    box-shadow: 0 4px 16px rgba(11, 11, 11, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
}

.alumni-profile .alumni-profile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.alumni-profile .alumni-profile-mono {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 3rem;
    color: #8a7300;
}

.alumni-profile .alumni-profile-class {
    font-family: 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #7a6a2f;
    margin: 0 0 0.35rem;
}

.alumni-profile .alumni-profile-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.1;
    color: #0b0b0b;
    margin: 0;
}

.alumni-profile .alumni-profile-rule {
    width: 3rem;
    height: 4px;
    background: #ffcd00;
    margin: 1rem auto 0;
}

/* Facts as a definition list: label (dt) left, value (dd) right, one row each. */
.alumni-profile .alumni-profile-facts {
    margin: 2rem 0 0;
}

.alumni-profile .alumni-profile-facts dt {
    font-family: 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #8a7300;
    float: left;
    clear: left;
    padding: 0.85rem 1.5rem 0 0;
    border-top: 1px solid #eee9dd;
}

.alumni-profile .alumni-profile-facts dt:first-of-type {
    border-top-color: #e7e3d8;
}

.alumni-profile .alumni-profile-facts dd {
    font-size: 0.98rem;
    color: #0b0b0b;
    line-height: 1.4;
    text-align: right;
    margin: 0;
    padding: 0.85rem 0 0.8rem;
    border-top: 1px solid #eee9dd;
}

.alumni-profile .alumni-profile-facts dd:first-of-type {
    border-top-color: #e7e3d8;
}

.alumni-profile .alumni-profile-prose {
    margin-top: 1.8rem;
    text-align: center;
}

.alumni-profile .alumni-profile-prose h2 {
    font-family: 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0b0b0b;
    margin: 0 0 0.4rem;
}

.alumni-profile .alumni-profile-prose p {
    font-size: 0.98rem;
    color: #555;
    line-height: 1.65;
    margin: 0 auto;
    max-width: 48ch;
}

.alumni-profile .alumni-profile-cta {
    text-align: center;
    margin-top: 2rem;
}

/* Ink CTA with gold text (house button vocabulary), inverting on hover. */
.alumni-profile .alumni-profile-connect {
    display: inline-block;
    background: #0b0b0b;
    color: #ffcd00;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.75rem 1.6rem;
    border-radius: 3px;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.alumni-profile .alumni-profile-connect:hover,
.alumni-profile .alumni-profile-connect:focus-visible {
    background: #ffcd00;
    color: #0b0b0b;
}

/* ===== SESSION STATUS (shared leaf: ledger rows + spotlight panels) ===== */
.session-status {
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.session-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-open { color: #0a7d2f; }
.status-open .session-status-dot { background: #0a7d2f; }
.status-waitlist { color: #8a5a00; }
.status-waitlist .session-status-dot { background: #e3a712; }
.status-prereg { color: #2d4f80; }
.status-prereg .session-status-dot { background: #3a5e9a; }
.status-full,
.status-closed { color: #666; }
.status-full .session-status-dot,
.status-closed .session-status-dot { background: #bbb; }

/* ===== SESSION FACTS (shared leaf: labeled value list) ===== */
.session-facts {
    list-style: none;
    padding: 0;
    margin: 0 0 1.4rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem 2.2rem;
}

.session-facts li {
    font-size: 0.95rem;
    color: #0b0b0b;
    font-variant-numeric: tabular-nums;
}

.session-fact-label {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #595959;
    margin-bottom: 0.15rem;
}

/* ===== SESSION DETAILS (shared: collapsible description toggle) =====
   With several sessions on a page the descriptions fold behind a native
   <details> toggle so the list stays scannable; a lone session stays inline. */
.session-details {
    margin: 0.3rem 0 0;
}

.session-details summary {
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0b0b0b;
    width: fit-content;
}

.session-details summary::marker {
    color: #8a7300;
}

.session-details summary:hover {
    text-decoration: underline;
    text-decoration-color: #ffcd00;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.session-details[open] summary {
    margin-bottom: 0.25rem;
}

/* ===== SESSION LEDGER (CtlSessionLedger / CtlSessionLedgerView) =====
   Registrar's-ledger layout from design-system/cards/explorations/session-ledger.html:
   hairline-underlined date headings, AM/PM chips, hairline rows with aligned fact columns. */
.session-ledger {
    margin: 1.5rem 0;
}

.session-ledger-date {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem;
    margin: 2.2rem 0 0;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid #eceadf;
}

.session-ledger-date:first-child {
    margin-top: 0;
}

.session-ledger-day {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    color: #0b0b0b;
}

.session-ledger-daymeta {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7a6a2f;
}

.session-ledger-block {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin: 1.1rem 0 0.2rem;
}

.session-ledger-block-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #0b0b0b;
    background: #f5f3ee;
    border: 1px solid #e7e3d8;
    padding: 0.18rem 0.55rem;
}

.session-ledger-block-meta {
    font-size: 0.78rem;
    color: #595959;
}

.session-ledger-row {
    display: grid;
    grid-template-columns: 1fr 84px 84px 120px 130px;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 0.25rem;
    border-bottom: 1px solid #eceadf;
}

.session-ledger-row:hover {
    background: #fcfbf7;
}

.session-ledger-name {
    font-weight: 700;
    font-size: 1rem;
    color: #0b0b0b;
    line-height: 1.25;
    min-width: 0;
}

.session-ledger-desc {
    font-weight: 400;
    font-size: 0.8rem;
    color: #595959;
    line-height: 1.45;
    margin: 0.12rem 0 0;
}

.session-ledger-label {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #595959;
}

.session-ledger-value {
    font-size: 0.85rem;
    color: #1a1a1a;
    font-variant-numeric: tabular-nums;
}

.session-ledger-action {
    text-align: right;
}

.session-ledger-action p {
    margin: 0;
    font-size: 0.82rem;
    color: #595959;
}

.session-ledger-action .btn-primary,
.session-ledger-action .btn-secondary {
    padding: 0.45rem 1rem;
    font-size: 0.74rem;
    white-space: nowrap;
}

/* ===== SESSION SPOTLIGHT (CtlSessionSpotlight / CtlSessionSpotlightPanel) =====
   The "ledger single" variant: one session as an announcement, not a table row. */
.session-spotlight {
    margin: 1.5rem 0;
    border-bottom: 1px solid #eceadf;
    padding: 1.6rem 0.25rem 1.7rem;
}

.session-spotlight-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.session-spotlight-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #7a6a2f;
    margin: 0 0 0.5rem;
}

.session-spotlight-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.9rem;
    color: #0b0b0b;
    margin: 0 0 0.6rem;
    line-height: 1.15;
}

.session-spotlight-desc {
    font-size: 0.95rem;
    line-height: 1.65;
    color: #1a1a1a;
    max-width: 56ch;
    margin: 0 0 1.2rem;
    /* Session descriptions are authored in the DB; honor their blank lines. */
    white-space: pre-line;
}

.session-spotlight-action {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    flex-wrap: wrap;
}

.session-spotlight-action p {
    margin: 0;
}

.session-spotlight-deadline {
    font-size: 0.82rem;
    color: #595959;
}

/* ===== SESSION MARQUEE (CtlSessionMarquee / CtlSessionMarqueePanel) =====
   Save-the-date announcement band: oversized Playfair day numeral with a ghost
   echo behind it, gold rule, shared action ladder. Built for Information Days,
   where the date is the headline. */
.session-marquee-stack {
    margin: 1.5rem 0;
}

.session-marquee {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1.6rem;
    align-items: center;
    padding: 1.7rem 0.25rem 1.8rem;
    border-bottom: 1px solid #eceadf;
}

.session-marquee-date {
    position: relative;
    text-align: center;
}

.session-marquee-ghost {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -54%);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11rem;
    line-height: 1;
    color: #f5f3ee;
    z-index: 0;
    user-select: none;
}

.session-marquee .session-marquee-day {
    position: relative;
    z-index: 1;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 4.6rem;
    line-height: 1;
    color: #0b0b0b;
    font-variant-numeric: tabular-nums;
    margin: 0;
}

.session-marquee .session-marquee-month {
    position: relative;
    z-index: 1;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #7a6a2f;
    margin: 0.3rem 0 0;
}

.session-marquee-body {
    position: relative;
    z-index: 1;
    border-left: 3px solid #ffcd00;
    padding-left: 1.6rem;
    min-width: 0;
}

.session-marquee .session-marquee-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #7a6a2f;
    margin: 0 0 0.4rem;
}

.session-marquee .session-marquee-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.55rem;
    color: #0b0b0b;
    margin: 0 0 0.45rem;
    line-height: 1.15;
}

.session-marquee .session-marquee-desc {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #595959;
    max-width: 56ch;
    margin: 0 0 0.55rem;
}

.session-marquee .session-marquee-meta {
    font-size: 0.9rem;
    color: #1a1a1a;
    margin: 0 0 0.9rem;
    font-variant-numeric: tabular-nums;
}

.session-marquee-action {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.session-marquee-action p {
    margin: 0;
    font-size: 0.82rem;
    color: #595959;
}

.session-marquee-deadline {
    font-size: 0.82rem;
    color: #595959;
}

/* A passed date reads as an entry already torn out of the calendar. */
.session-marquee--closed .session-marquee-day {
    color: #9a958a;
}

.session-marquee--closed .session-marquee-body {
    border-left-color: #e7e3d8;
}

.session-marquee--closed .session-marquee-name {
    color: #595959;
}

@media (max-width: 620px) {
    .session-marquee {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .session-marquee-ghost {
        font-size: 8rem;
    }
}

/* ===== SESSION NAMES (CtlSessionNames: plain name-only list) ===== */
.session-names {
    list-style: disc;
    padding-left: 2.5rem;
    margin: 1rem 0;
}

.session-names li {
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 0.3rem;
}

/* ===== SESSION CATALOG (CtlSessionCatalog: name-first course list, IOAPA) =====
   Middle/high-school groups as Bootstrap-driven tabs (site .tab-btn styling); each
   course name is the <summary> of a native details toggle holding the description. */
.session-catalog {
    margin: 1.5rem 0;
}

.session-catalog-item {
    margin: 0;
    padding: 0.55rem 0.25rem;
    border-bottom: 1px solid #eceadf;
}

details.session-catalog-item summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    color: #0b0b0b;
}

details.session-catalog-item summary::marker {
    color: #8a7300;
}

/* Same row-tint hover as the session ledger rows. */
.session-catalog-item:hover {
    background: #fcfbf7;
}

/* Term + vendor line at the top of an expanded course entry. */
p.session-catalog-meta {
    font-size: 0.8rem;
    color: #595959;
    margin: 0.5rem 0 0 1.1rem;
}

p.session-catalog-desc {
    font-size: 0.9rem;
    line-height: 1.65;
    color: #1a1a1a;
    max-width: 66ch;
    margin: 0.5rem 0 0.3rem 1.1rem;
}

/* A course without a description renders as a plain, non-expandable name. */
p.session-catalog-item {
    font-weight: 600;
    font-size: 1rem;
    color: #0b0b0b;
}

/* ===== BUTTONS ===== */
/* Page-bottom call-to-action row: primary + secondary buttons side by side. */
.cta-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1rem 0 0;
}

.btn-primary {
    display: inline-block;
    background: #ffcd00;
    color: #000;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.6rem 1.5rem;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    text-decoration: none !important;
    transition: background-color 0.2s;
}

.btn-primary:hover {
    background: #e6b800;
}

.btn-secondary {
    display: inline-block;
    border: 2px solid #000;
    color: #000;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.6rem 1.5rem;
    background: transparent;
    border-radius: 2px;
    cursor: pointer;
    text-decoration: none !important;
    transition: all 0.2s;
}

/* hover goes ink, and ink means gold text (site-wide ink-button voice) */
.btn-secondary:hover {
    background: #000;
    color: #ffcd00;
}

/* ===== FIELD INFO (FieldInfo: label + info-icon toggle + collapsible hint) ===== */
.field-info-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.4rem;
}

/* direct children only: the > keeps the button's inner <span> (the "i") plain */
.field-info-label > label,
.field-info-label > span {
    font-weight: 700;
}

/* The trigger: an ink circle sized to the surrounding line of text (1em) with a gold
   serif "i"; hover inverts to gold-on-ink's opposite, the same swap as the ink CTA
   buttons, so it reads as clickable in the house vocabulary. */
.info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #0b0b0b;
    color: #ffcd00;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 1em;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.info-icon span {
    font-size: 0.72em;
}

.info-icon:hover,
.info-icon:focus-visible {
    background: #ffcd00;
    color: #0b0b0b;
}

.field-hint {
    max-width: 32rem;
    margin: 0 0 0.75rem;
    padding: 0.65rem 0.9rem;
    background: #f5f3ee;
    border-left: 4px solid #ffcd00;
    font-size: 0.95rem;
}

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

/* ===== TAB PANEL ===== */
.tab-panel {
    margin: 1.5rem 0;
}

.tab-buttons {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #ddd;
    flex-wrap: wrap;
}

.tab-btn {
    background: none;
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    color: #555;
    transition: color 0.2s, border-color 0.2s;
}

.tab-btn:hover {
    color: #000;
}

/* .tab-active = the Blazor TabPanel component; .active = Bootstrap's tab plugin. */
.tab-btn.tab-active,
.tab-btn.active {
    color: #000;
    border-bottom-color: #ffcd00;
}

.tab-content {
    padding: 1.5rem 0;
}

/* ===== ACCORDION ===== */
/* House skin for the stock Bootstrap accordion anatomy emitted by CtlAccordion
   (reference: the design-system content-accordion card):
   hairline-bordered white items, cream hover/active tints, dark-gold chevron and
   focus ring. Riding Bootstrap's --bs-accordion-* variables keeps the plugin's
   collapse behavior and icon rotation intact. */
.accordion {
    --bs-accordion-color: #1a1a1a;
    --bs-accordion-bg: #fff;
    --bs-accordion-border-color: #e7e3d8;
    --bs-accordion-border-radius: 3px;
    --bs-accordion-inner-border-radius: 2px;
    --bs-accordion-btn-padding-x: 1.25rem;
    --bs-accordion-btn-padding-y: 0.9rem;
    --bs-accordion-btn-color: #0b0b0b;
    --bs-accordion-btn-bg: #fff;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(138, 115, 0, 0.4);
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238a7300'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238a7300'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-active-color: #0b0b0b;
    --bs-accordion-active-bg: #fcfbf7;
    --bs-accordion-body-padding-x: 1.25rem;
    --bs-accordion-body-padding-y: 1.1rem;
}

/* The heading is a structural wrapper around the button, not prose — kill the
   .content-page h3 margin that otherwise opens a dead band between the button
   and the item's bottom border. */
h3.accordion-header {
    margin: 0;
}

.accordion-button {
    font-weight: 600;
}

.accordion-button:hover {
    background-color: #fcfbf7;
}

/* Icon hook for the DevExpress accordion branch (CtlAccordion framework="devexpress"). */
.accordion-icon {
    font-size: 1.2rem;
    font-weight: 700;
}

.accordion-body p {
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 0.75rem;
}

/* The staff-authored panel HTML ends with its own <p>/<ul> margin, which stacks on the
   body padding and bloats the panel bottom — zero the last element's margin instead. */
.accordion-body > :last-child {
    margin-bottom: 0;
}

/* ===== QUOTE BLOCK ===== */
.quote-block {
    background: #f5f5f5;
    border-left: 4px solid #ffcd00;
    padding: 1.5rem 2rem;
    margin: 1.5rem 0;
}

.quote-text {
    font-size: 1.1rem;
    font-style: italic;
    line-height: 1.7;
    margin-bottom: 0.75rem;
}

.quote-attribution {
    font-size: 0.85rem;
    font-weight: 700;
    color: #555;
}

/* ===== QUOTE — editorial band (DB-authored via <figure class="quote">) =====
   Content is authored in ref_Sections as <figure class="quote"> … </figure> and rendered by
   CtlSection. The cream band, decorative mark, fonts, and gold rule all come from here, so authors
   write only clean semantic HTML. Fonts (Playfair Display + Roboto Condensed) are already loaded in
   App.razor. Add the quote--photo modifier + an <img class="quote-img"> for the two-column variant. */
.quote {
    background: #f5f3ee;              /* cream */
    padding: 3.75rem 2rem;
    /* Full-bleed the band to the viewport edges while the inner blockquote keeps its centred,
       max-width text. The negative inline margins cancel the .content-page section's max-width +
       padding, so the band reaches both viewport edges regardless of the section's width. */
    margin: 2rem calc(50% - 50vw);
    text-align: center;
}

.quote blockquote {
    margin: 0 auto;
    max-width: 720px;
}

/* Big decorative opening mark — generated so authors never hand-write it (decorative only). */
.quote blockquote::before {
    content: "\201C";                /* left double quotation mark */
    display: block;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    font-size: 8rem;
    line-height: 0.6;
    color: #8A7300;                  /* gold-aa: the AA-contrast gold */
    margin: 0 0 -0.2rem -0.4rem;
}

.quote blockquote p {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 1.8rem;
    line-height: 1.42;
    color: #1a1a1a;
    margin: 0 0 1.6rem;
}

.quote blockquote p:last-child {
    margin-bottom: 0;
}

.quote blockquote p em {
    font-weight: 700;
}

.quote figcaption {
    display: inline-block;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #555;                     /* ~6.8:1 on cream — passes AA */
    border-top: 2px solid #8A7300;
    padding-top: 0.7rem;
    margin-top: 1.6rem;
}

/* Photo variant: two-column band, image beside a vertically-centred quote. The 1fr spacer rows
   above/below centre the blockquote + figcaption pair without needing a wrapper element. */
.quote--photo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto auto 1fr;
    padding: 0;
    text-align: left;
}

.quote--photo .quote-img {
    grid-column: 1;
    grid-row: 1 / -1;
    width: 100%;
    height: 100%;
    min-height: 380px;
    object-fit: cover;
    display: block;
}

.quote--photo blockquote {
    grid-column: 2;
    grid-row: 2;
    max-width: 520px;
    margin: 0;
    padding: 0 3rem;
}

.quote--photo figcaption {
    grid-column: 2;
    grid-row: 3;
    justify-self: start;             /* content-width, left-aligned → rule spans just the text */
    margin: 1.2rem 0 0 3rem;
}

@media (max-width: 768px) {
    .quote {
        padding: 2.5rem 1.5rem;
    }
    .quote blockquote p {
        font-size: 1.4rem;
    }
    .quote blockquote::before {
        font-size: 6rem;
    }
    /* Photo variant stacks: image on top, text below. */
    .quote--photo {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }
    .quote--photo .quote-img {
        grid-column: 1;
        grid-row: 1;
        min-height: 240px;
    }
    .quote--photo blockquote {
        grid-column: 1;
        grid-row: 2;
        padding: 2rem 1.5rem 0;
    }
    .quote--photo figcaption {
        grid-column: 1;
        grid-row: 3;
        margin: 1rem 0 0 1.5rem;
    }
}

/* ===== ISSUU EMBED ===== */
.issuu-grid {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin: 1.5rem 0;
}

.issuu-embed {
    flex: 1;
    min-width: 250px;
}

.issuu-embed iframe {
    border: none;
    width: 100%;
    height: 300px;
}

.issuu-caption {
    font-size: 0.8rem;
    color: #555;
    margin-top: 0.5rem;
    text-align: center;
}

/* ===== MISSION & VISION — editorial band ===== */
/* Cream full-bleed band in the .quote editorial language: a centered eyebrow heading over a
   short gold rule, the two statements set in Playfair italic, and a large decorative ampersand
   dividing them. The negative inline margins full-bleed the band the same way .quote does (see
   the bleed explanation there). */
.mv-band {
    background: #f5f3ee;
    padding: 4.5rem 2rem 4.75rem;
    margin: 2rem calc(50% - 50vw);
    text-align: center;
}

/* The section heading doubles as the band's eyebrow, so undo the .content-page h2 display
   treatment (big type, gold underline) in favor of letter-spaced small caps over a short rule. */
.mv-band h2 {
    font-family: 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #555;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0.9rem;
}

.mv-band h2::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    background: #ffcd00;
    margin: 0.9rem auto 0;
}

/* Three-column grid: statement | giant ampersand | statement */
.mv-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 3rem;
    max-width: 1080px;
    margin: 2.5rem auto 0;
}

.mv-amp {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    font-size: 7.5rem;
    line-height: 1;
    color: #8a7300;
    user-select: none;
}

.mv-item h3 {
    font-family: 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #555;
    margin-bottom: 1.1rem;
}

.mv-item p {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 1.65rem;
    line-height: 1.42;
    color: #1a1a1a;
    margin-bottom: 0;
}

.mv-item p strong {
    font-weight: 700;
}

/* ===== STRATEGIC PRIORITY BAND — per-pillar statement ===== */
/* Each pillar landing page echoes its Strategic Priorities card from the Philosophy page as a
   cream editorial band just under the intro: a letter-spaced eyebrow over a short gold rule,
   then the single statement in the display serif italic. Same cream palette and full-bleed
   trick as .quote / .mv-band; a statement (not a quotation) so no decorative quote marks. */
.priority-band {
    background: #f5f3ee;
    padding: 4rem 2rem;
    margin: 2rem calc(50% - 50vw);
    text-align: center;
}

/* The eyebrow doubles as the section heading, so undo the .content-page h2 display treatment
   (big serif + gold kicker) in favor of letter-spaced small caps over a short gold rule —
   matching .mv-band h2. */
.priority-band .priority-band__eyebrow {
    font-family: 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #555;
    border-bottom: none;
    padding-bottom: 0;
    margin: 0 0 0.9rem;
}

.priority-band .priority-band__eyebrow::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    background: #ffcd00;
    margin: 0.9rem auto 0;
}

/* Prefixed with .priority-band so this out-specifies .content-page p (which would otherwise
   force its 0.95rem body size onto the statement — same specificity trap as the h3 caps rule). */
.priority-band .priority-band__statement {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 1.65rem;
    line-height: 1.42;
    color: #1a1a1a;
    max-width: 760px;
    margin: 1.6rem auto 0;
}

@media (max-width: 768px) {
    .priority-band {
        padding: 2.75rem 1.5rem;
    }
    /* Match the desktop rule's specificity (.priority-band prefix) — a media query adds none,
       so a bare .priority-band__statement would lose to the two-class desktop selector. */
    .priority-band .priority-band__statement {
        font-size: 1.35rem;
    }
}

/* ===== STRATEGIC PRIORITY CARDS ===== */
/* Aligned with the program-card family: hairline border, gold top rule, Playfair title,
   muted description, CTA footer with gold arrow, hover lift. Landscape photo on top
   (heroes reused from the section landing pages). Mobile-first grid: 1 / 2 / 3 cols. */
.priority-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: stretch;
    margin: 2rem 0;
}

@media (min-width: 620px) {
    .priority-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 980px) {
    .priority-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* The whole card is a link; a.priority-card matches .content-page a on specificity and
   wins on source order, so the prose underline never bleeds into the card text. */
a.priority-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid #e7e3d8;
    border-top: 4px solid #ffcd00;
    border-radius: 3px;
    overflow: hidden;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
    text-decoration: none;
    color: #0b0b0b;
}

a.priority-card:hover {
    box-shadow: 0 8px 22px rgba(11, 11, 11, 0.10);
    transform: translateY(-2px);
    color: #0b0b0b;
}

.priority-card img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    height: auto;
    object-fit: cover;
}

.priority-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.1rem 1.4rem 1.3rem;
}

.priority-card .priority-card-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.16;
    color: #0b0b0b;
    margin-bottom: 0.6rem;
}

.priority-card .priority-card-desc {
    font-size: 0.875rem;
    line-height: 1.58;
    color: #555;
    margin-bottom: 18px;
}

.priority-card .priority-card-cta {
    margin-top: auto;
    border-top: 1px solid #eee9dd;
    padding-top: 14px;
    font-size: 0.875rem;
    font-weight: 700;
    color: #0b0b0b;
}

.priority-card .priority-card-arrow {
    color: #8a7300;
}

/* ===== CONTACT INFO ===== */
.contact-info {
    background: #f5f5f5;
    padding: 1.5rem;
    border-radius: 4px;
    margin: 1.5rem 0;
}

.contact-info p {
    margin-bottom: 0.5rem;
}

/* ===== PUBLICATION LIST (Service Publications: cover-thumbnail rows) =====
   Anatomy from the legacy site's pub-item rows (cover left, text right, whole
   row a link), restyled with the site's hairline/hover/gold tokens. */
.pub-list {
    margin: 1.5rem 0;
}

a.pub-item {
    display: flex;
    gap: 1.4rem;
    align-items: flex-start;
    padding: 1.1rem 0.25rem;
    border-bottom: 1px solid #eceadf;
    text-decoration: none;
    color: inherit;
}

a.pub-item:hover {
    background: #fcfbf7;
}

.pub-cover {
    flex: 0 0 110px;
}

.pub-cover img {
    display: block;
    width: 110px;
    aspect-ratio: 8.5 / 11;
    object-fit: cover;
    border: 1px solid #e7e3d8;
}

.pub-title {
    display: block;
    font-weight: 700;
    font-size: 1.05rem;
    color: #0b0b0b;
    line-height: 1.3;
}

.pub-year {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7a6a2f;
    margin: 0.2rem 0 0.5rem;
}

p.pub-text {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #595959;
    max-width: 62ch;
    margin: 0;
}

/* ===== RESPONSIVE: CONTENT PAGES ===== */
@media (max-width: 768px) {
    .content-page h2 {
        font-size: 1.8rem;
    }

    a.pub-item {
        gap: 1rem;
    }

    .pub-cover {
        flex-basis: 76px;
    }

    .pub-cover img {
        width: 76px;
    }

    .staff-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }

    .mv-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .mv-amp {
        font-size: 4.5rem;
    }

    .session-ledger-row {
        grid-template-columns: 1fr 1fr;
        row-gap: 0.5rem;
    }

    .session-ledger-name {
        grid-column: 1 / -1;
    }

    .session-ledger-action {
        grid-column: 2;
        text-align: left;
    }

    .tab-buttons {
        flex-direction: column;
    }

    .tab-btn {
        border-bottom: none;
        border-left: 3px solid transparent;
        text-align: left;
    }

    .tab-btn.tab-active,
    .tab-btn.active {
        border-bottom: none;
        border-left-color: #ffcd00;
    }

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

    .events-cards {
        grid-template-columns: 1fr;
    }
}

/* ===== ERROR UI ===== */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ===== BSI "Instagram on IG" slider ===== */
.ig-gallery {
    margin: 2rem 0;
}

.ig-heading {
    margin-bottom: 1rem;
}

.ig-frame {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Native horizontal scroller — gives free touch-swipe + snap; card width sets how many show. */
.ig-track {
    display: flex;
    gap: 1rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;              /* Firefox */
}
.ig-track::-webkit-scrollbar {         /* Chrome/Safari */
    display: none;
}
.ig-track:focus-visible {
    outline: 3px solid #000;
    outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
    .ig-track {
        scroll-behavior: smooth;
    }
}

/* 3 across on desktop/tablet (two 1rem gaps). Mobile drops to 1 (below). */
.ig-card {
    flex: 0 0 calc((100% - 2rem) / 3);
    scroll-snap-align: start;
    position: relative;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
}
.ig-card:focus-visible {
    outline: 3px solid #000;
    outline-offset: 2px;
}

.ig-photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Caption overlaid on the photo's lower edge; gradient scrim keeps white text >=4.5:1 (WCAG 1.4.3). */
.ig-caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 2.25rem 0.75rem 0.75rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.65) 55%, transparent 100%);
    color: #fff;
    font-size: 0.85rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Promo slide — connector to the Instagram profile (IG-gradient card). */
.ig-promo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    aspect-ratio: 1 / 1;
    padding: 1rem;
    color: #fff;
    text-align: center;
    /* Dark scrim over the Instagram brand gradient: white text on the gradient's light
       (#f09433) end is only ~2.3:1; the 40% black layer lifts it to >=4.5:1 (WCAG 1.4.3 AA)
       across every stop while the gradient stays recognizable underneath. */
    background:
        linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
        linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888);
}
.ig-promo-text {
    font-weight: 700;
}
.ig-promo-cta {
    font-size: 0.9rem;
}

/* Prev/next arrows. */
.ig-nav {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 1px solid #ccc;
    border-radius: 50%;
    background: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}
.ig-nav:disabled {
    opacity: 0.35;
    cursor: default;
}
.ig-nav:focus-visible {
    outline: 3px solid #000;
    outline-offset: 2px;
}

/* Paging dots (built by ig-slider.js). 24px hit area satisfies WCAG 2.5.8. */
.ig-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}
.ig-dot {
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ig-dot::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #bbb;
}
.ig-dot.is-active::before {
    background: #000;
}
.ig-dot:focus-visible {
    outline: 3px solid #000;
    outline-offset: 2px;
}

/* Subtle zoom on hover/keyboard focus; skipped for reduced-motion users (WCAG 2.3.3). */
@media (prefers-reduced-motion: no-preference) {
    .ig-photo {
        transition: transform 0.25s ease;
    }
    .ig-card:hover .ig-photo,
    .ig-card:focus-visible .ig-photo {
        transform: scale(1.04);
    }
}

/* Phones: one photo per view; swipe is primary, so hide the arrows. */
@media (max-width: 640px) {
    .ig-card {
        flex-basis: 100%;
    }
    .ig-nav {
        display: none;
    }
    .ig-caption {
        padding: 1.75rem 0.6rem 0.6rem;
        font-size: 0.8rem;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
}

/* Screen-reader-only utility (for the slider's live region). */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ===== INTERIOR HERO (split banner — reusable interior-page header) =====
   Recreates design_handoff_bsi_hero. Full-bleed, sits below the locked logo bar + nav.
   Tokens are scoped here as custom properties; to roll this out site-wide, promote them to
   :root (or override per-page). Fonts use the site's brand faces (Playfair Display + Roboto
   Condensed) in place of the handoff's Spectral/Libre Franklin, per the handoff's substitution
   note. The one deliberate token change: muted text is #6b6b6b (handoff #8a8a8a) so the small
   uppercase breadcrumb/labels meet WCAG 2.2 AA contrast on the warm panel. */
.interior-hero {
    --ih-gold: #ffcd00;
    --ih-ink: #0b0b0b;
    --ih-panel: #faf8f2;
    --ih-body: #4a4a4a;
    --ih-muted: #6b6b6b;
    --ih-secondary-border: #d6d2c6;

    display: grid;
    /* Col 1 "gutter" aligns the content's left edge with the centered, max-width-1200px page
       sections (100% here is the hero's own width, scrollbar-excluded). Col 3 (image) is a fixed
       50%, so its left edge sits at the page's horizontal center; the content (col 2) fills the
       space between the gutter and center. The image still bleeds to the right edge. */
    grid-template-columns: max(1.5rem, calc((100% - 1200px) / 2 + 1.5rem)) 1fr 50%;
    min-height: 540px;
    background: var(--ih-panel);
}

.interior-hero__content {
    grid-column: 2;                /* the gutter column (1) provides the left offset */
    padding: 46px 48px 46px 0;     /* no left padding — alignment comes from the gutter column */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.interior-hero__crumbs {
    margin-bottom: 16px;
}

.interior-hero__crumbs ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--ih-muted);
}

.interior-hero__crumbs li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.interior-hero__crumbs li + li::before {
    content: "/";
    color: var(--ih-muted);
    font-weight: 400;
}

.interior-hero__crumbs a {
    color: var(--ih-muted);
    text-decoration: none;
}

.interior-hero__crumbs a:hover {
    color: var(--ih-ink);
    text-decoration: underline;
}

.interior-hero__crumbs [aria-current="page"] {
    color: var(--ih-ink);
}

.interior-hero__rule {
    display: block;
    width: 46px;
    height: 4px;
    background: var(--ih-gold);
    margin-bottom: 20px;
}

.interior-hero__title {
    font-family: var(--font-display);
    font-size: 46px;
    font-weight: 700;
    line-height: 1.03;
    letter-spacing: -0.015em;
    text-transform: none;
    color: var(--ih-ink);
    max-width: 14ch;
    margin: 0 0 16px;
}

.interior-hero__intro {
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--ih-body);
    max-width: 46ch;
    margin: 0 0 24px;
}

.interior-hero__facts {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.interior-hero__fact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-left: 3px solid var(--ih-gold);
    padding: 1px 0 1px 11px;
    margin: 0;
}

.interior-hero__fact-label {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ih-muted);
}

.interior-hero__fact-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--ih-ink);
}

.interior-hero__actions {
    display: flex;
    gap: 12px;
}

.interior-hero__btn {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 14px;
    font-weight: 700;
    padding: 11px 22px;
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

/* Hero buttons are uniformly the quiet ghost style (2026-07 decision) — the strong
   gold/ink button voices belong to in-page CTAs, not the hero. */
.interior-hero__btn--secondary {
    background: transparent;
    color: var(--ih-ink);
    border: 1.5px solid var(--ih-secondary-border);
    font-weight: 600;
}

.interior-hero__btn--secondary:hover {
    border-color: var(--ih-ink);
}

.interior-hero__btn:focus-visible {
    outline: 3px solid var(--ih-gold);
    outline-offset: 2px;
}

/* Media panel — photo fills the cell, flush against the content panel. */
.interior-hero__media {
    grid-column: 3;
    position: relative;
    overflow: hidden;
    background: #1d1d1d;
}

.interior-hero__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Graphic fallback (image-less interior pages): gold geometry + faint serif initials on ink. */
.interior-hero__media--graphic {
    background: var(--ih-ink);
}

.interior-hero__shape {
    position: absolute;
    display: block;
}

.interior-hero__shape--disc {
    right: -46px;
    top: -46px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: var(--ih-gold);
    opacity: 0.92;
}

.interior-hero__shape--ring {
    left: 34px;
    bottom: 40px;
    width: 120px;
    height: 120px;
    border: 3px solid rgba(255, 205, 0, 0.4);
    border-radius: 50%;
}

.interior-hero__shape--square {
    right: 64px;
    bottom: 54px;
    width: 40px;
    height: 40px;
    background: var(--ih-gold);
    transform: rotate(45deg);
    opacity: 0.6;
}

.interior-hero__initials {
    position: absolute;
    left: 38px;
    top: 40px;
    font-family: var(--font-display);
    font-size: 120px;
    font-weight: 800;
    line-height: 0.8;
    color: transparent;
    -webkit-text-stroke: 2px rgba(255, 205, 0, 0.22);
}

/* Mobile reflow at the 640px container breakpoint: single column, media as a capped band on top. */
@media (max-width: 640px) {
    .interior-hero {
        grid-template-columns: 1fr;
    }

    .interior-hero__media {
        grid-column: auto;
        order: -1;
        height: 184px;
    }

    .interior-hero__media--graphic {
        height: 160px;
    }

    .interior-hero__shape--disc { right: -30px; top: -30px; width: 120px; height: 120px; }
    .interior-hero__shape--ring { left: 22px; bottom: 20px; width: 60px; height: 60px; }
    .interior-hero__shape--square { right: 38px; bottom: 26px; width: 24px; height: 24px; }
    .interior-hero__initials { left: 22px; top: 18px; font-size: 62px; }

    .interior-hero__content {
        grid-column: auto;       /* reset the desktop column placement for the stacked layout */
        padding: 26px 22px 30px;
    }

    .interior-hero__crumbs ol {
        font-size: 11px;
        letter-spacing: 0.08em;
    }

    .interior-hero__rule {
        width: 40px;
        margin-bottom: 16px;
    }

    .interior-hero__title {
        font-size: 30px;
        line-height: 1.06;
    }

    .interior-hero__intro {
        font-size: 14.5px;
    }

    .interior-hero__facts {
        gap: 18px;
    }

    .interior-hero__actions {
        flex-direction: column;
    }

    .interior-hero__btn {
        padding: 13px 22px;
        font-size: 14.5px;
        text-align: center;
    }
}

/* ===== PUBLICATIONS HERO MEDIA ===== */
/* Typographic media panel for /research/publications, supplied through InteriorHero's Media
   slot instead of a photo. The panel's aspect ratio swings from ~1.3 desktop to ~2.1 mobile,
   which slices a baked-in composition; a field of type has no edges to lose. Content comes
   from ref_StaffPublications. (Design round "Publications Hero Explorations", concept B — the
   runners-up live on as cards in the design system, not as code here.) */
.pub-hero {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #1d1d1d;
}

.pub-hero__field {
    margin: 0;
    padding: 30px 28px;
    font-family: var(--font-display);
    font-size: 12.5px;
    line-height: 1.62;
    color: rgba(255, 255, 255, 0.34);
    text-align: justify;
    hyphens: auto;
}

/* The staff admin app italicises journal titles, so the emphasis carries the gold accents. */
.pub-hero__field em,
.pub-hero__field i {
    color: #ffcd00;
    font-style: italic;
    font-weight: 700;
}

.pub-hero__sep {
    color: rgba(255, 255, 255, 0.22);
}

/* Vignette does the framing, so the composition has no edges to lose at any crop. */
.pub-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 46%, rgba(29, 29, 29, 0) 34%, rgba(29, 29, 29, 0.86) 84%);
}

.pub-hero__stamp {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    z-index: 2;
}

.pub-hero__count {
    display: block;
    font-family: var(--font-display);
    font-size: 76px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #ffcd00;
}

.pub-hero__label {
    display: block;
    margin-top: 8px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #fff;
}

/* The 184px-tall mobile band: shrink the field and the stamp to suit. */
@media (max-width: 640px) {
    .pub-hero__field {
        padding: 16px 16px;
        font-size: 9.5px;
        line-height: 1.5;
    }

    .pub-hero__count {
        font-size: 44px;
    }

    .pub-hero__label {
        font-size: 9px;
        letter-spacing: 0.14em;
    }
}