/* ============================================================================
   CIRC / BRAIN-Lab design system
   Aligned with Michigan State University public brand guidance:
   Spartan green primary, generous whitespace, clear hierarchy, AA contrast.
   Single stylesheet, no build step. Edit tokens in :root to re-theme.
   ========================================================================== */

/* ---- 1. Design tokens ---------------------------------------------------- */
:root {
    /* MSU brand palette */
    --msu-green:        #18453b;   /* Spartan green (primary) */
    --msu-green-700:    #0f322b;
    --msu-green-050:    #eaf1ee;
    --accent-kelly:     #008208;   /* MSU kelly green (secondary) */
    --accent-lime:      #7bbd00;   /* MSU teaching/accent green */
    --accent-lime-soft: #d1e700;

    /* Neutrals */
    --ink:              #1a1a1a;
    --ink-soft:         #4a4a4a;
    --line:             #e3e3e3;
    --bg:               #ffffff;
    --bg-muted:         #f4f6f5;
    --bg-sink:          #eef0ef;

    /* Feedback */
    --warn-bg:          #fff8c4;
    --warn-ink:         #5a4a00;
    --warn-line:        #eadd89;

    /* Type */
    --font-head: "Montserrat", "Helvetica Neue", Arial, sans-serif;
    --font-body: "Source Sans 3", "Segoe UI", Arial, sans-serif;

    /* Layout */
    --wrap:        1120px;
    --wrap-narrow: 780px;
    --radius:      6px;
    --shadow-sm:   0 1px 3px rgba(0,0,0,.08);
    --shadow-md:   0 6px 20px rgba(0,0,0,.08);
    --space:       clamp(1rem, 2vw, 1.5rem);

    /* Per-site accent (overridden by body theme) */
    --accent: var(--accent-kelly);
}

/* BRAIN-Lab sub-site accent shift for subtle differentiation */
body.theme-brain-lab {
    --accent: var(--accent-lime);
}

/* ---- 2. Reset + base ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--ink);
    background: var(--bg);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--msu-green); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-kelly); }

h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.15; color: var(--msu-green); margin: 0 0 .5em; }
h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 700; }
h2 { font-size: clamp(1.4rem, 2.5vw, 1.9rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 600; }
p  { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }

/* ---- 3. Layout helpers --------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.site-main { display: block; }
.section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
/* Faint neuron/brain watermark on the plain white bands (not muted/sink). */
.section:not(.section--muted):not(.section--sink):not(.section--plain):not(.section--dark) { position: relative; overflow: hidden; }
.section:not(.section--muted):not(.section--sink):not(.section--plain):not(.section--dark)::before {
    content: ""; position: absolute; inset: 0 -40px 0 auto; width: min(52%, 640px);
    background: url("../img/circ-brain-bg.jpg") no-repeat right center;
    background-size: auto 128%;
    opacity: .08; pointer-events: none; z-index: 0;
}
.section > * { position: relative; z-index: 1; }
.section--muted { background: var(--bg-muted); }
.section--sink  { background: var(--msu-green); color: #fff; }
.section--sink h2, .section--sink h3 { color: #fff; }
/* Dark feature band (e.g. the ICA video feature on the BRAIN-Lab home). */
.section--dark { background: #0d0d12; color: #cfd8d6; }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark p { color: #cfd8d6; }
.section--dark strong { color: #fff; }
.section--dark .section__eyebrow { color: var(--accent-lime); }
.section--dark .lede { color: #eaf3ef; }
.section__head--center { margin-inline: auto; text-align: center; }
/* DC explanatory split sits under the video within the same dark feature. */
.video-feature__detail { margin-top: clamp(1.75rem, 4vw, 3rem); }
.section__head { max-width: var(--wrap-narrow); margin-bottom: 2rem; }
.section__eyebrow {
    font-family: var(--font-head); font-weight: 600; font-size: .78rem;
    letter-spacing: .12em; text-transform: uppercase; color: var(--accent-kelly);
    margin: 0 0 .5rem;
}
.lede { font-size: 1.2rem; color: var(--ink-soft); }

/* Accessibility: skip link + focus */
.skip-link {
    position: absolute; left: -999px; top: 0; z-index: 100;
    background: var(--msu-green); color: #fff; padding: .6rem 1rem; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--accent-lime); outline-offset: 2px; }

/* ---- 4. Utility bar + masthead ------------------------------------------ */
.utility-bar { background: var(--msu-green-700); color: #cfe0da; font-size: .92rem; }
.utility-bar__inner { display: flex; justify-content: space-between; align-items: center; min-height: 52px; gap: 1rem; }
.utility-bar a { color: #dfeae6; text-decoration: none; font-weight: 600; }
.utility-bar a:hover { color: #fff; text-decoration: underline; }
.utility-bar__links { display: flex; gap: 1.25rem; }
.utility-bar__crumbs { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.utility-bar__crumbs a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.utility-bar__msu { display: inline-flex; align-items: center; overflow: visible; }
.utility-bar__msu-logo { height: 30px; width: auto; display: block; }
.utility-bar__sep { opacity: .55; }
@media (max-width: 560px) { .utility-bar__crumbs a:not(.utility-bar__msu), .utility-bar__sep { display: none; } }

.masthead { background: var(--msu-green); color: #fff; border-bottom: 4px solid var(--accent-lime); }
.masthead__inner { display: flex; align-items: center; gap: 1.1rem; padding-block: 1.25rem; }
.masthead__brand { display: flex; align-items: center; gap: 1.25rem; text-decoration: none; color: #fff; }
/* CIRC round logo: shown directly (it already has its own ring) — no plate/shadow.
   The seal carries fine ring text, so it needs room to read: size it generously. */
.masthead__logo { width: 104px; height: 104px; object-fit: contain; flex-shrink: 0; }
.masthead__name { font-family: var(--font-head); font-weight: 700; font-size: 1.35rem; line-height: 1.18; text-transform: uppercase; letter-spacing: .5px; display: block; }
.masthead__sub  { font-size: .82rem; opacity: .9; display: block; margin-top: 6px; letter-spacing: .04em; }
/* CIRC center name as a Metropolis wordmark SVG (matches the MSU masthead). */
.masthead__name-svg { height: clamp(42px, 5vw, 56px); width: auto; display: block; }
.masthead__wordmark { margin-left: auto; font-family: var(--font-head); font-weight: 700; font-size: .8rem; letter-spacing: .15em; opacity: .9; }
@media (max-width: 640px) { .masthead__wordmark { display: none; } }

/* BRAIN-Lab masthead: same green bar as CIRC (brand consistency). The light
   logo variant (white strokes, bright accents) sits directly on the green —
   no tile needed. Padded export (transparent margin baked in), so it is sized
   a little taller than the CIRC seal to net the same visual brain size. */
.masthead__logo--brain { width: auto; height: 92px; }
.masthead__name--script { text-transform: none; letter-spacing: 0; font-size: 1.5rem; }
.masthead__name--script b { color: #cea4eb; } /* echoes the purple network in the mark */

/* ---- 5. Primary nav ------------------------------------------------------ */
.primary-nav { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; box-shadow: var(--shadow-sm); }
.primary-nav__inner { display: flex; align-items: center; }
.primary-nav__menu { list-style: none; display: flex; flex-wrap: wrap; margin: 0; padding: 0; gap: 0; }
.primary-nav__link {
    display: block; padding: 1rem .95rem; font-family: var(--font-head); font-weight: 600;
    font-size: .92rem; color: var(--ink); text-decoration: none; border-bottom: 3px solid transparent;
}
.primary-nav__link:hover { color: var(--msu-green); background: var(--msu-green-050); }
.primary-nav__link.is-active { color: var(--msu-green); border-bottom-color: var(--accent-lime); }
.primary-nav__toggle { display: none; align-items: center; gap: .5rem; background: none; border: 0; padding: .9rem .2rem; font-family: var(--font-head); font-weight: 600; cursor: pointer; color: var(--msu-green); }
.primary-nav__toggle-bar { width: 22px; height: 2px; background: currentColor; position: relative; }
.primary-nav__toggle-bar::before, .primary-nav__toggle-bar::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor; }
.primary-nav__toggle-bar::before { top: -6px; } .primary-nav__toggle-bar::after { top: 6px; }

@media (max-width: 820px) {
    .primary-nav__toggle { display: flex; }
    .primary-nav__menu { flex-direction: column; width: 100%; display: none; }
    .primary-nav__menu.is-open { display: flex; }
    .primary-nav__inner { flex-wrap: wrap; }
    .primary-nav__link { padding: .85rem .2rem; border-bottom: 1px solid var(--line); }
    .primary-nav__link.is-active { border-bottom-color: var(--accent-lime); }
}

/* ---- 6. Hero ------------------------------------------------------------- */
.hero {
    position: relative;
    background:
        linear-gradient(180deg, rgba(15,50,43,.92), rgba(24,69,59,.92)),
        radial-gradient(circle at 80% -10%, rgba(123,189,0,.35), transparent 45%);
    background-color: var(--msu-green);
    color: #fff;
    overflow: hidden;
}
/* Image-backed hero: pass a background image via inline style on .hero--image */
.hero--image { background-color: #0d0d12; }
.hero--image::before {
    content: ""; position: absolute; inset: 0;
    background-image: var(--hero-img);
    background-size: cover; background-position: center right;
    opacity: 1; z-index: 0;
}
.hero--image::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, rgba(10,12,16,.94) 0%, rgba(12,20,20,.82) 42%, rgba(13,20,24,.45) 100%);
}
.hero--image .hero__inner { position: relative; z-index: 2; }
.hero--tall .hero__inner { padding-block: clamp(4rem, 11vw, 7rem); }
.hero__inner { padding-block: clamp(3rem, 8vw, 5.5rem); max-width: var(--wrap-narrow); position: relative; z-index: 2; }
.hero__eyebrow { font-family: var(--font-head); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; color: var(--accent-lime-soft); margin: 0 0 .75rem; }
.hero__title { color: #fff; margin: 0 0 1rem; text-shadow: 0 2px 20px rgba(0,0,0,.3); }
.hero__lede { font-size: 1.25rem; color: #eaf3ef; margin: 0 0 1.75rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Interior page hero: slimmer, with a faint connectome motif on the right */
.hero--slim .hero__inner { padding-block: clamp(2.25rem, 5vw, 3.25rem); }

/* ---- 7. Buttons ---------------------------------------------------------- */
.btn { display: inline-block; font-family: var(--font-head); font-weight: 600; font-size: .95rem; padding: .7rem 1.4rem; border-radius: var(--radius); text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .05s ease; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent-lime); color: var(--msu-green-700); }
.btn--primary:hover { background: #fff; color: var(--msu-green); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); color: #fff; }
.btn--solid { background: var(--msu-green); color: #fff; }
.btn--solid:hover { background: var(--msu-green-700); color: #fff; }

/* ---- 8. Alert banner ----------------------------------------------------- */
.alert-banner { background: var(--warn-bg); color: var(--warn-ink); border-bottom: 1px solid var(--warn-line); }
.alert-banner .wrap { padding-block: .6rem; font-size: .9rem; font-weight: 600; text-align: center; }

/* ---- 9. Grids + cards ---------------------------------------------------- */
.grid { display: grid; gap: 1.5rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* People grid: fixed-width cards, left-aligned, so a lone card (e.g. a single
   director) stays a sensible size instead of stretching the full row. */
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 280px)); gap: 1.5rem; justify-content: start; }

.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-sm); }
/* Scanner product shot at the top of a facility card. */
.card__scanner { width: 100%; height: 165px; object-fit: contain; background: var(--bg-muted);
    border-radius: var(--radius); padding: .75rem; margin-bottom: 1.1rem; }
/* Photo at the top of a facility card (fills the frame, like a header image). */
.card__photo { width: 100%; height: 165px; object-fit: cover; border-radius: var(--radius); margin-bottom: 1.1rem; }
.card--feature { border-top: 4px solid var(--accent-lime); }
.card h3 { margin-top: 0; }

/* Split media/text block */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.split--reverse .split__media { order: 2; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } .split--reverse .split__media { order: 0; } }
.split__media img { border-radius: var(--radius); box-shadow: var(--shadow-md); width: 100%; object-fit: cover; }
/* Transparent product render: show whole, no plate/crop/shadow. */
.split__media--product img { box-shadow: none; border-radius: 0; object-fit: contain; }

/* ---- 10. Lab cards ------------------------------------------------------- */
.lab-card { display: flex; gap: 1.25rem; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--msu-green); border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow-sm); transition: box-shadow .15s ease, transform .15s ease; }
.lab-card--placeholder { border-left-color: var(--line); background: var(--bg-muted); }
/* Whole-card link variant */
.lab-card--link { text-decoration: none; color: inherit; }
.lab-card--link:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.lab-card--link:hover .lab-card__link { text-decoration: underline; }
.lab-card__media { flex-shrink: 0; width: 84px; display: flex; align-items: flex-start; justify-content: center; }
.lab-card__logo { width: 84px; height: auto; }
.lab-card__monogram { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: var(--msu-green-050); color: var(--msu-green); font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; }
/* Brain/body-connectivity image used in place of an initials monogram —
   shown whole (white background), just sized to fit the media column. */
.lab-card__placeholder-img { width: 84px; height: auto; object-fit: contain; }
.lab-card__dept { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-kelly); font-weight: 600; margin: 0 0 .25rem; }
.lab-card__name { margin: 0 0 .25rem; font-size: 1.12rem; }
.lab-card__pi { font-size: .92rem; color: var(--ink-soft); font-style: italic; margin: 0 0 .6rem; }
.lab-card__focus { font-size: .95rem; margin: 0 0 .75rem; }
.lab-card__link { font-family: var(--font-head); font-weight: 600; font-size: .9rem; text-decoration: none; color: var(--accent-kelly); }
.lab-card__soon { font-size: .85rem; color: var(--ink-soft); font-style: italic; }

/* ---- 11. Person cards ---------------------------------------------------- */
.person-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.person-card__photo { aspect-ratio: 1 / 1; background: var(--msu-green-050); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.person-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.person-card__initials { font-family: var(--font-head); font-weight: 700; font-size: 2.4rem; color: var(--msu-green); opacity: .55; }
.person-card__body { padding: 1.1rem 1.25rem 1.4rem; }
.person-card__name { margin: 0 0 .15rem; font-size: 1.08rem; }
.person-card__role { margin: 0 0 .5rem; font-weight: 600; color: var(--accent-kelly); font-size: .9rem; }
.person-card__detail { font-size: .92rem; color: var(--ink-soft); margin: 0 0 .5rem; }
.person-card__email { font-size: .88rem; margin: 0; }
.person-card__link { font-family: var(--font-head); font-weight: 600; font-size: .85rem; margin: .5rem 0 0; }
.person-card__link a { text-decoration: none; color: var(--accent-kelly); }
.person-card__link a:hover { text-decoration: underline; }
/* Whole-card link variant (e.g. a person with a profile page) */
.person-card { transition: box-shadow .15s ease, transform .15s ease; }
.person-card--link { text-decoration: none; color: inherit; }
.person-card--link:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.person-card--link:hover .person-card__link { text-decoration: underline; }

/* ---- Profile / PI page --------------------------------------------------- */
.profile-header { display: grid; grid-template-columns: 220px 1fr; gap: clamp(1.5rem, 4vw, 2.75rem); align-items: center; }
@media (max-width: 640px) { .profile-header { grid-template-columns: 1fr; justify-items: start; } }
.profile-photo { width: 100%; max-width: 220px; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; box-shadow: var(--shadow-md); background: var(--msu-green-050); }
.profile-photo img { width: 100%; height: 100%; object-fit: cover; }
.profile-header__roles { list-style: none; margin: .5rem 0 1.25rem; padding: 0; color: var(--ink-soft); }
.profile-header__roles li { margin: 0 0 .15rem; }
.profile-links { display: flex; flex-wrap: wrap; gap: .7rem 1.4rem; align-items: center; margin: 0; }
.profile-links a:not(.btn) { font-family: var(--font-head); font-weight: 600; font-size: .9rem; text-decoration: none; color: var(--msu-green); }
.profile-links a:not(.btn):hover { color: var(--accent-kelly); text-decoration: underline; }
.profile-prose { max-width: var(--wrap-narrow); }

/* CV-style entry list (education, appointments, grants, awards) */
.cv-list { list-style: none; margin: 0; padding: 0; }
.cv-entry { display: grid; grid-template-columns: 150px 1fr; gap: 1.25rem; padding: .95rem 0; border-top: 1px solid var(--line); }
.cv-list > .cv-entry:first-child { border-top: 0; }
.cv-entry__when { font-family: var(--font-head); font-weight: 600; font-size: .85rem; color: var(--accent-kelly); }
.cv-entry__what { margin: 0; }
.cv-entry__what strong { display: block; }
.cv-entry__detail { color: var(--ink-soft); font-size: .95rem; }
@media (max-width: 560px) { .cv-entry { grid-template-columns: 1fr; gap: .1rem; } }

/* Publication list */
.pub-list { list-style: none; margin: 0; padding: 0; }
.pub-list li { padding: .85rem 0; border-top: 1px solid var(--line); font-size: .95rem; line-height: 1.55; }
.pub-list li:first-child { border-top: 0; }
.pub-list em { color: var(--ink-soft); }

/* Tag cluster (research interests) */
.tag-cluster { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---- 12. Definition / spec lists ---------------------------------------- */
.spec-list { display: grid; gap: .6rem; margin: 0; padding: 0; }
.spec-list__row { display: grid; grid-template-columns: 200px 1fr; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.spec-list__term { font-weight: 600; color: var(--msu-green); }
@media (max-width: 620px) { .spec-list__row { grid-template-columns: 1fr; gap: .1rem; } }

/* ---- 13. Publication list ------------------------------------------------ */
.pub-list { list-style: none; margin: 0; padding: 0; }
.pub-list__item { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.pub-list__title { font-weight: 600; color: var(--msu-green); }
.pub-list__meta { font-size: .9rem; color: var(--ink-soft); }
.pub-list__links { margin-top: .35rem; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-family: var(--font-head); font-size: .82rem; font-weight: 600; }
.pub-list__links a { text-decoration: none; color: var(--accent-kelly); }
.pub-list__links a:hover { text-decoration: underline; }

/* ---- 14. Partner columns ------------------------------------------------- */
.partner-list { list-style: none; margin: 0; padding: 0; columns: 2; gap: 2rem; }
.partner-list li { break-inside: avoid; margin-bottom: .6rem; }
@media (max-width: 620px) { .partner-list { columns: 1; } }
.partner-feature { background: var(--msu-green-050); border-left: 4px solid var(--accent-lime); border-radius: var(--radius); padding: 1.5rem; }

/* ---- 15. Footer ---------------------------------------------------------- */
.site-footer { background: var(--msu-green-700); color: #ccd9d4; margin-top: 0; }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; padding-block: clamp(2rem, 5vw, 3rem); }
@media (max-width: 720px) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer__heading { color: #fff; font-size: 1rem; margin: 0 0 .75rem; }
.site-footer a { color: #dfeae6; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.site-footer__legal { border-top: 1px solid rgba(255,255,255,.15); font-size: .82rem; color: #9fb3ac; }
.site-footer__legal .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding-block: 1rem; }
.site-footer__legal p { margin: 0; }
.site-footer__wm { font-family: var(--font-head); font-weight: 700; letter-spacing: .12em; color: #cfe0da; margin-left: 1.5rem; }

/* ---- 15b. Engagement components ----------------------------------------- */

/* Media card: image on top, text below — for research/imaging showcases */
.media-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform .12s ease, box-shadow .12s ease; }
.media-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.media-card__img { aspect-ratio: 16 / 10; background: #0d0d12; overflow: hidden; }
.media-card__img img { width: 100%; height: 100%; object-fit: cover; object-position: left center; }
/* Scientific figures sit on black with varied aspect ratios — show them whole,
   centered, letterboxed on the dark plate rather than cropped. */
.media-card__img--contain { background: radial-gradient(circle at 50% 40%, #14141b, #08080c); }
.media-card__img--contain img { object-fit: contain; object-position: center; padding: .4rem; }
/* White plate for figures rendered on a white background (montages, glass-brain
   plots) so the card background matches the image and reads seamlessly. */
.media-card__img--white { background: #fff; }
.media-card__img--white img { object-fit: contain; object-position: center; padding: .5rem; }
/* Spartan-green plate for the athlete cut-out (transparent PNG). */
.media-card__img--green { background: radial-gradient(circle at 50% 30%, #1c5548, var(--msu-green-700)); }
.media-card__img--green img { object-fit: contain; object-position: center bottom; }
.media-card__body { padding: 1.25rem 1.35rem 1.4rem; }
.media-card__body h3 { margin: 0 0 .4rem; }
.media-card__body p { margin: 0; font-size: .95rem; color: var(--ink-soft); }

/* Clinical-trial cards: study logo above the copy, whole card links out */
.trial-card__logo { display: flex; justify-content: center; margin: 0 0 1.1rem; }
.trial-card__logo img { height: 92px; width: auto; max-width: 80%; object-fit: contain; }
.trial-card__link { font-family: var(--font-head); font-weight: 600; font-size: .9rem; text-decoration: none; }
.trial-card h3 a { text-decoration: none; color: var(--msu-green); }
.trial-card h3 a:hover, .trial-card__link:hover { color: var(--accent-kelly); }

/* ICA video feature: height-capped clip, centered and framed within the dark
   band, shown whole (no crop), with a caption beneath. */
.video-banner { margin: 0; text-align: center; }
.video-banner video { display: inline-block; width: auto; max-width: 100%;
    height: auto; max-height: clamp(180px, 34vh, 340px); object-fit: contain;
    border-radius: var(--radius); box-shadow: 0 12px 40px rgba(0,0,0,.55); }
.video-banner__cap { margin-top: .85rem; line-height: 1.5; font-family: var(--font-head);
    font-size: .82rem; letter-spacing: .02em; color: #9fb0ac; }

/* Video feature: autoplay-muted-loop clip on a black plate, framed like a figure */
.video-figure { border-radius: var(--radius); overflow: hidden; background: #000; box-shadow: var(--shadow-md); line-height: 0; max-width: 460px; margin-inline: auto; }
.video-figure video { width: 100%; height: auto; display: block; object-fit: contain; }
.video-figure__cap { line-height: 1.5; font-size: .8rem; color: #cfd8d6; background: #0d0d12; padding: .6rem .9rem; font-family: var(--font-head); letter-spacing: .02em; }
.spotlight__media video { width: 100%; border-radius: var(--radius); box-shadow: 0 10px 40px rgba(0,0,0,.5); display: block; }
/* Wide, short clips (e.g. the ICA filmstrip): too wide to sit beside the text
   without cropping, so the feature stacks — the clip spans the full width above
   the copy and is shown whole. See .spotlight--video-feature below. */
.spotlight__media--video { overflow: hidden;
    background: #05070a; border-radius: var(--radius); box-shadow: 0 10px 40px rgba(0,0,0,.5); line-height: 0; }
.spotlight__media--video video { width: 100%; height: auto; display: block; object-fit: contain; box-shadow: none; border-radius: 0; }

/* Spotlight band: dark, image + text, for a striking research feature */
.spotlight { background: #0d0d12; color: #fff; position: relative; overflow: hidden; }
.spotlight__inner { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1.5rem,4vw,3.5rem); align-items: center; padding-block: clamp(2.5rem,6vw,4.5rem); }
/* Stacked video feature: full-width clip on top, copy below. */
.spotlight--video-feature .spotlight__inner { grid-template-columns: 1fr; align-items: start; gap: clamp(1.25rem,3vw,2rem); }
/* Copy sits left, a supporting brain image (transparent PNG) sits right. */
.spotlight__body--split { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(0,1fr); gap: clamp(1.5rem,4vw,3rem); align-items: center; }
.spotlight__aside img { width: 100%; height: auto; display: block; }
@media (max-width: 820px) {
    .spotlight__body--split { grid-template-columns: 1fr; }
    .spotlight__aside { max-width: 340px; margin-inline: auto; }
}
.spotlight h2 { color: #fff; }
.spotlight p { color: #cfd8d6; }
.spotlight__media img { border-radius: var(--radius); box-shadow: 0 10px 40px rgba(0,0,0,.5); width: 100%; }
@media (max-width: 820px) {
    .spotlight__inner { grid-template-columns: 1fr; }
    .spotlight--video-feature .spotlight__inner { grid-template-columns: 1fr; align-items: center; }
    .spotlight__media--video { align-self: auto; }
    .spotlight__media--video video { height: auto; object-fit: contain; }
}

/* Image tiles row (small brain gallery) */
.tile-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
.tile { border-radius: var(--radius); overflow: hidden; background: #0d0d12; aspect-ratio: 1 / 1; box-shadow: var(--shadow-sm); position: relative; }
.tile img { width: 100%; height: 100%; object-fit: cover; object-position: left center; transition: transform .3s ease; }
.tile:hover img { transform: scale(1.06); }
.tile__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: .5rem .7rem; font-size: .72rem; font-weight: 600; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.75)); font-family: var(--font-head); letter-spacing: .02em; }

/* Stat strip */
.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.5rem; align-items: start; }
/* Inside the narrower spotlight body, two columns keeps the big numbers from
   colliding — the third stat wraps neatly below the first. */
.spotlight .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; }
@media (max-width: 560px) { .spotlight .stat-strip { grid-template-columns: 1fr; } }
/* Biograph spec bar: full-width row of three specs beneath the product banner. */
.biograph-specs { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(2rem, 5vw, 3rem);
    border-top: 1px solid var(--line); padding-top: clamp(1.5rem, 3vw, 2rem); }
.section--muted .stat__num { color: var(--msu-green); }
@media (max-width: 560px) { .biograph-specs { grid-template-columns: 1fr; } }
.stat { display: flex; flex-direction: column; text-align: center; padding: 1rem 0.5rem; }
.stat__num { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.3rem); color: var(--accent-lime); line-height: 1.05; display: block; }
.spotlight .stat__num { color: var(--accent-lime); }
.stat__label { display: block; font-size: .9rem; margin-top: .5rem; color: inherit; opacity: .9; }

/* Feature card with accent icon dot */
.card--feature { position: relative; }
.card--icon { padding-top: 1.6rem; }
.icon-dot { width: 44px; height: 44px; border-radius: 12px; background: var(--msu-green-050); display: flex; align-items: center; justify-content: center; margin-bottom: .9rem; }
.icon-dot svg { width: 24px; height: 24px; stroke: var(--msu-green); fill: none; stroke-width: 1.8; }

/* Connectome divider (decorative SVG band) */
.connectome-divider { line-height: 0; background: var(--msu-green); }
.connectome-divider svg { width: 100%; height: 60px; display: block; }

/* Full-bleed image band with caption overlay */
.image-band { position: relative; min-height: 320px; background-size: cover; background-position: center; display: flex; align-items: flex-end; }
.image-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13,20,24,.85), transparent 70%); }
.image-band__cap { position: relative; z-index: 1; color: #fff; padding: 1.75rem; }
.image-band__cap p { margin: 0; max-width: 640px; color: #eaf3ef; }

/* Logo strip (partner/affiliation logos) */
.logo-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2.5rem; padding: 1rem 0; }
.logo-strip__item { display: flex; align-items: center; justify-content: center; height: 64px; filter: grayscale(1); opacity: .75; transition: filter .2s ease, opacity .2s ease; }
.logo-strip__item:hover { filter: grayscale(0); opacity: 1; }
.logo-strip__item img { max-height: 64px; max-width: 190px; width: auto; object-fit: contain; }

/* ---- 16. Misc ------------------------------------------------------------ */
.breadcrumb { font-size: .85rem; color: var(--ink-soft); padding-top: 1.25rem; }
.breadcrumb a { text-decoration: none; }
.callout { background: var(--msu-green-050); border-radius: var(--radius); padding: 1.5rem; border-left: 4px solid var(--accent-lime); }
.tag { display: inline-block; background: var(--msu-green-050); color: var(--msu-green); font-family: var(--font-head); font-weight: 600; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; padding: .25rem .6rem; border-radius: 999px; }