@font-face {
    font-family: "Bebas Neue";
    src: url("/assets/fonts/bebas-neue-latin-400.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: Montserrat;
    src: url("/assets/fonts/montserrat-latin-variable.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
}

.mf-spotlight {
    --sp-ink: var(--mf-editorial-copy, #eaf0e6);
    --sp-muted: var(--mf-editorial-muted, #afbdad);
    --sp-lime: var(--mf-editorial-lime, #c9f24b);
    --sp-gold: var(--mf-editorial-gold, #f2c746);
    --sp-line: var(--mf-editorial-line, rgba(237, 244, 234, .16));
    width: min(76rem, calc(100% - 2rem));
    margin-inline: auto;
    padding-block: 1rem 2.5rem;
    color: var(--sp-ink);
    font: 500 1rem/1.6 Montserrat, Arial, sans-serif;
}

body:has(.mf-spotlight) {
    background: var(--mf-editorial-paper, #0b110e);
}

.mf-spotlight :is(h1, h2, h3, p, figure) { margin: 0; }

.mf-spotlight a { color: var(--sp-lime); }

.mf-spotlight :is(a, button):focus-visible {
    outline: 2px solid var(--sp-gold);
    outline-offset: 4px;
}

.mf-sp-crumb {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-block-end: .9rem;
    color: var(--sp-muted);
    font-size: .82rem;
}

.mf-sp-hero {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr);
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--sp-line);
    border-top: 3px solid var(--sp-lime);
    border-radius: .8rem;
    background: var(--mf-editorial-panel, #101a14);
}

.mf-sp-intro { padding: clamp(1.2rem, 3vw, 2.65rem); }

.mf-spotlight .mf-sp-intro > * + * { margin-top: .75rem; }

.mf-sp-intro p { color: var(--sp-muted); }

.mf-sp-intro .mf-sp-kicker,
.mf-sp-intro .mf-sp-status {
    color: var(--sp-gold);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.mf-spotlight h1 {
    font: 400 clamp(3.15rem, 6.8vw, 6.2rem)/.92 "Bebas Neue", Impact, sans-serif;
    margin-block-start: .5rem;
}

.mf-spotlight h1 span { color: var(--sp-lime); }

.mf-spotlight h2 {
    font: 400 clamp(1.8rem, 3.3vw, 2.55rem)/1 "Bebas Neue", Impact, sans-serif;
}

.mf-sp-intro h2 { margin-block-start: 1.1rem; }

.mf-sp-art { padding: .75rem; }

.mf-sp-art img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: .55rem;
}

.mf-spotlight a.mf-sp-button {
    display: inline-flex;
    gap: .6rem;
    align-items: center;
    min-height: 2.75rem;
    padding: .55rem .9rem;
    border: 1px solid var(--sp-lime);
    border-radius: .4rem;
    background: var(--sp-lime);
    color: #0b110e;
    font-weight: 800;
    text-decoration: none;
}

.mf-spotlight a.mf-sp-button:hover { filter: brightness(1.12); }

.mf-sp-intro a.mf-sp-button { margin-block-start: 1rem; }

.mf-spotlight a.mf-sp-button--outline {
    background: transparent;
    color: var(--sp-lime);
}

.mf-sp-program, .mf-sp-share, .mf-sp-outreach { margin-block-start: 1.4rem; }

.mf-sp-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin-block-start: .65rem;
}

.mf-sp-card,
.mf-sp-outreach {
    padding: 1rem;
    border: 1px solid var(--sp-line);
    border-radius: .65rem;
    background: var(--mf-editorial-panel, #101a14);
}

.mf-sp-card h3 { font-size: 1rem; }

.mf-sp-card p, .mf-sp-outreach p {
    margin-block-start: .35rem;
    color: var(--sp-muted);
    font-size: .92rem;
}

.mf-sp-outreach {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
}

.mf-sp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-block-start: .65rem;
}

.mf-sp-actions :is(a, button) {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    padding: .4rem .75rem;
    border: 1px solid var(--sp-line);
    border-radius: .35rem;
    background: var(--mf-editorial-panel, #101a14);
    color: var(--sp-lime);
    font: inherit;
    font-size: .83rem;
    cursor: pointer;
}

.mf-sp-actions [hidden] { display: none; }

.mf-sp-share [role="status"]:not(:empty) {
    margin-block-start: .35rem;
    color: var(--sp-muted);
}

@media (max-width: 47rem) {
    .mf-sp-hero, .mf-sp-grid { grid-template-columns: 1fr; }
    .mf-sp-art { padding: 0 .75rem .75rem; }
}

@media (max-width: 25rem) {
    .mf-spotlight { width: calc(100% - 1.25rem); }
    .mf-sp-intro { padding: 1rem; }
}

/* Keep the shared shell and route headings consistent with other editorial pages. */
html:root body main.mf-spotlight h1#spotlight-title {
    font: 400 clamp(3.1rem, 5.7vw, 5.3rem)/.95 "Bebas Neue", Impact, sans-serif !important;
}

body:has(.mf-spotlight) .site-nav__list {
    list-style: none;
    padding-inline-start: 0;
}

body:has(.mf-spotlight) a.skip-link {
    position: fixed;
    inset: .5rem auto auto .5rem;
    z-index: 10000;
    padding: .5rem .75rem;
    border-radius: .25rem;
    background: #f2c746;
    color: #0b110e;
    transform: translateY(calc(-100% - 1rem));
}

body:has(.mf-spotlight) a.skip-link:focus {
    transform: none;
}