/*
Theme Name: MFL
Theme URI: https://modernpublicfleet.com
Author: Modern Public Fleet
Author URI: https://modernpublicfleet.com
Description: Content-first theme for Modern Public Fleet.
Version: 0.1.1
Requires at least: 6.6
Tested up to: 6.7
Requires PHP: 8.1
Text Domain: mfl
*/

* {
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    margin: 0;
    background: linear-gradient(180deg, #f3f6f8 0, var(--mfl-bg) 260px, #edf1f4 100%);
    color: var(--mfl-ink);
    font-family: "Source Sans 3", "Segoe UI", sans-serif;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: var(--mfl-brand);
    text-decoration: none;
}

a:hover,
a:focus {
    color: var(--mfl-brand-strong);
    text-decoration: underline;
}

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

/* Subtle zoom on image hover */
a img,
a .mfl-grid-thumb-img,
.mfl-home-lead-media img,
.mfl-lane-card-media img,
.mfl-more-story-media img,
.mfl-card img {
    transition: transform 0.3s ease;
}

a:hover img,
a:hover .mfl-grid-thumb-img,
.mfl-home-lead-story:hover .mfl-home-lead-media img,
.mfl-lane-card:hover .mfl-lane-card-media img,
.mfl-more-story:hover .mfl-more-story-media img,
.mfl-card:hover img {
    transform: scale(1.04);
}

/* Global rounded edges — pill-style */
.mfl-card img,
.mfl-home-lead-media img,
.mfl-home-lead-grid-item img,
.mfl-lane-card-media img,
.mfl-media-fallback,
.mfl-more-story-media img,
.mfl-feed-list img {
    border-radius: 1rem !important;
}

.mfl-home-lead-media,
.mfl-lane-card-media,
.mfl-more-story-media,
.mfl-grid-thumb,
.mfl-card .mfl-media-fallback {
    border-radius: 1rem;
    overflow: hidden;
}

.mfl-btn,
button[type="submit"],
.mfl-search-submit {
    border-radius: 0.5rem !important;
}

/* Modern hamburger icon */
.mfl-mobile-nav-toggle-label {
    display: none;
}

.mfl-mobile-nav-toggle {
    position: relative;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mfl-hamburger {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--mfl-ink, #00112b);
    border-radius: 1px;
    position: relative;
    transition: background 0.2s ease;
}

.mfl-hamburger::before,
.mfl-hamburger::after {
    content: '';
    display: block;
    width: 20px;
    height: 2px;
    background: var(--mfl-ink, #00112b);
    border-radius: 1px;
    position: absolute;
    left: 0;
    transition: transform 0.25s ease, top 0.25s ease;
}

.mfl-hamburger::before { top: -7px; }
.mfl-hamburger::after { top: 7px; }

.mfl-mobile-nav-toggle.is-open .mfl-hamburger { background: transparent; }
.mfl-mobile-nav-toggle.is-open .mfl-hamburger::before { top: 0; transform: rotate(45deg); }
.mfl-mobile-nav-toggle.is-open .mfl-hamburger::after { top: 0; transform: rotate(-45deg); }

.mfl-wrap {
    width: min(100% - 2rem, var(--mfl-max-width));
    margin-inline: auto;
}

.mfl-header-shell {
    position: relative;
}

.mfl-mobile-bar {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.6rem 0 0.7rem;
}

.mfl-mobile-bar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
}

.mfl-mobile-bar-row .mfl-logo-link-mobile {
    flex: 0 1 auto;
    text-align: center;
}

.mfl-mobile-bar-row .mfl-logo-link-mobile .mfl-logo {
    max-height: 56px;
    width: auto;
    display: block;
    margin: 0 auto;
}

.mfl-mobile-bar-spacer {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: inline-block;
}

.mfl-mobile-bar-cta {
    display: flex;
    justify-content: center;
}

.mfl-mobile-bar-cta a.mfl-newsletter-btn-mobile {
    font-size: 0.82rem !important;
    padding: 0.4rem 1.1rem !important;
    line-height: 1.25 !important;
    color: #e26a26 !important;
    background-color: #ffffff !important;
    border: 1.5px solid #e26a26 !important;
    border-radius: 2rem !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    font-weight: 700 !important;
    display: inline-block !important;
}

.mfl-mobile-bar-cta .mfl-newsletter-btn-mobile:hover,
.mfl-mobile-bar-cta .mfl-newsletter-btn-mobile:focus,
.mfl-mobile-bar-cta .mfl-newsletter-btn-mobile:active,
.mfl-mobile-bar-cta a.mfl-newsletter-btn-mobile:visited:hover {
    color: #ffffff !important;
    background-color: #e26a26 !important;
    border-color: #e26a26 !important;
}

.mfl-logo-link-mobile {
    flex: 1 1 auto;
    min-width: 0;
}

.mfl-mobile-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
}

.mfl-newsletter-btn-mobile {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    font-size: 0.82rem;
    padding: 0.35rem 0.6rem;
}

.mfl-mobile-nav-toggle {
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 0.55rem;
    background: transparent;
    color: #f7fcff;
    font-weight: 700;
    padding: 0.38rem 0.65rem;
    cursor: pointer;
}

.mfl-mobile-nav-toggle:hover,
.mfl-mobile-nav-toggle:focus {
    background: rgba(255, 255, 255, 0.16);
}

.mfl-mobile-nav-toggle.is-open {
    background: rgba(255, 255, 255, 0.2);
}

.mfl-utility {
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.mfl-utility-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.34rem 0;
}

.mfl-search {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mfl-search input[type="search"] {
    width: min(220px, 45vw);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 0.35rem;
    padding: 0.3rem 0.52rem;
    background: rgba(0, 0, 0, 0.18);
    color: #ffffff;
}

.mfl-search input[type="search"]::placeholder {
    color: rgba(255, 255, 255, 0.72);
}

.mfl-btn,
.mfl-search button {
    background: #ffffff;
    border: 1.5px solid #e26a26;
    color: #e26a26;
    padding: 0.36rem 0.72rem;
    border-radius: 2rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    box-shadow: none;
}

.mfl-btn:hover,
.mfl-btn:focus,
.mfl-search button:hover,
.mfl-search button:focus {
    background: #e26a26;
    color: #ffffff;
    box-shadow: 0 3px 12px rgba(226,106,38,0.28);
    transform: translateY(-1px);
}

.mfl-newsletter-btn {
    font-size: 0.85rem;
}

.mfl-header-grid {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: calc(0.54rem + 15px) 0 calc(0.58rem + 15px);
}

.mfl-header-grid > .mfl-logo-link {
    flex-shrink: 0;
}

.mfl-header-navs {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    min-width: 0;
    align-self: stretch;
}

.mfl-branding {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: calc(0.54rem + 15px) 0 calc(0.58rem + 15px);
}

.mfl-logo-link {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
}

.mfl-logo {
    width: min(278px, 52vw);
}

.mfl-logo {
    display: inline-block;
}

.mfl-tagline {
    margin: 0;
    max-width: 38ch;
    color: rgba(248, 251, 253, 0.92);
    font-size: 0.82rem;
}

.mfl-nav {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.mfl-nav-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin: 0;
    padding: 0.34rem 0;
}

.mfl-nav-list a {
    display: inline-block;
    color: #f8fdff;
    padding: 0.22rem 0.36rem;
    border-radius: 0.3rem;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 700;
}

.mfl-nav-list a:hover,
.mfl-nav-list a:focus {
    background: rgba(255, 255, 255, 0.16);
}

.mfl-main {
    padding: 1.35rem 0 2.5rem;
}

.mfl-grid {
    display: grid;
    gap: 1rem;
}

.mfl-grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.mfl-module {
    background: var(--mfl-surface);
    border: 1px solid var(--mfl-border);
    border-radius: 1rem;
    padding: 0.95rem 1rem;
    box-shadow: none;
}

.mfl-module h2,
.mfl-module h3 {
    margin: 0 0 0.42rem;
    line-height: 1.18;
    font-family: "Source Serif 4", Georgia, serif;
}

.mfl-homepage {
    display: grid;
    /* minmax(0,...) so no child's min-content width can widen the page */
    grid-template-columns: minmax(0, 1fr);
    gap: 1.8rem;
}

.mfl-homepage > .mfl-home-topic-module,
.mfl-homepage > .mfl-home-feed-grid,
.mfl-homepage > .mfl-home-more-layout {
    border-top: 1px solid var(--mfl-border);
    padding-top: 1.8rem;
}

.mfl-homepage .mfl-home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr);
    align-items: stretch;
    gap: 1rem;
    background: linear-gradient(135deg, #f9fcfd 0%, #ecf4f7 100%);
}

.mfl-home-hero-copy {
    display: grid;
    align-content: center;
    gap: 0.6rem;
}

.mfl-home-hero-copy h1 {
    margin: 0;
    font-family: "Source Serif 4", Georgia, serif;
    line-height: 1.14;
    font-size: clamp(1.78rem, 3.5vw, 2.25rem);
}

.mfl-home-hero-copy p {
    margin: 0;
}

.mfl-home-hero-newsletter {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mfl-home-hero-newsletter .mfl-newsletter-cta {
    width: 100%;
    max-width: 450px;
}

.mfl-home-lead-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr);
    gap: 1.1rem;
}

.mfl-home-lead-column {
    min-width: 0;
    border: 1px solid var(--mfl-border);
    border-radius: 1rem;
    background: var(--mfl-surface);
    color: var(--mfl-ink);
    overflow: hidden;
}

.mfl-home-lead-column .mfl-home-lead-story h2 a {
    color: var(--mfl-ink);
}

.mfl-home-lead-column .mfl-home-lead-story h2 a:hover,
.mfl-home-lead-column .mfl-home-lead-story h2 a:focus {
    color: var(--mfl-brand);
}

.mfl-home-lead-column .mfl-home-lead-story p {
    color: var(--mfl-ink);
}

.mfl-home-lead-column .mfl-home-lead-story .mfl-meta,
.mfl-home-lead-column .mfl-home-lead-story .mfl-taxonomy-line {
    color: var(--mfl-ink-muted);
}

.mfl-home-lead-story {
    display: grid;
    gap: 0.55rem;
}

.mfl-home-lead-story h2 {
    margin: 0;
    line-height: 1.14;
    font-size: clamp(1.55rem, 2.7vw, 2.05rem);
}

.mfl-home-lead-story p {
    margin: 0;
}

.mfl-home-lead-media {
    display: block;
    aspect-ratio: 3 / 2;
    border-radius: 1rem !important;
    overflow: hidden;
    background: #ffffff;
}

.mfl-home-lead-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mfl-home-top-stories {
    border: 1px solid #d0dade;
    border-radius: 0.5rem;
    background: var(--mfl-surface-alt);
    padding: 0.72rem;
}

.mfl-home-top-stories h2 {
    margin: 0 0 0.75rem;
}

.mfl-home-top-story-list {
    display: grid;
    gap: 0.55rem;
}

.mfl-home-top-story {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 0.65rem;
    padding-top: 0.72rem;
    border-top: 1px solid rgba(19, 32, 40, 0.1);
}

.mfl-home-top-story:first-child {
    border-top: 0;
    padding-top: 0;
}

.mfl-home-top-story-media {
    display: block;
    aspect-ratio: 4 / 3;
    min-height: 80px;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #ffffff;
}

.mfl-home-top-story-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mfl-home-top-story-body {
    min-width: 0;
}

.mfl-home-top-story-body h3 {
    margin: 0.08rem 0 0.24rem;
    line-height: 1.24;
    font-size: 0.98rem;
}

.mfl-home-top-story-body p {
    margin: 0;
}

.mfl-home-lane-grid {
    overflow: hidden;
    max-width: 100%;
}

.mfl-home-topic-grid {
    display: flex;
    gap: 1rem;
    overflow: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0.35rem 0;
}

.mfl-home-topic-grid::-webkit-scrollbar { display: none; }

.mfl-home-topic-grid .mfl-lane-card {
    flex: 0 0 calc(33.333% - 0.67rem);
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.mfl-home-topic-grid .mfl-lane-card-media {
    margin: 0 0 0.55rem;
    border-radius: 0.45rem;
    overflow: hidden;
}

.mfl-home-topic-grid .mfl-lane-card-media img {
    border-radius: 0.45rem;
}

.mfl-home-topic-grid .mfl-lane-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.mfl-home-topic-grid .mfl-lane-card-content h3 {
    flex: 0 0 auto;
}

.mfl-home-topic-grid .mfl-lane-card-content p {
    flex: 1;
}

/* Editor's Picks scroll arrows */
.mfl-editors-picks-wrap {
    position: relative;
}

/* Editor's Picks header with inline arrows */
.mfl-editors-picks-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.mfl-editors-picks-nav {
    display: flex;
    gap: 0.4rem;
}

.mfl-editors-picks-arrow {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: #ffffff;
    border: 1.5px solid #e26a26;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #e26a26;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.mfl-editors-picks-arrow:hover {
    background: #e26a26;
    color: #ffffff;
    transform: scale(1.08);
}

.mfl-home-lane-grid--content-types {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mfl-lane-card {
    background: var(--mfl-surface);
    border: 1px solid var(--mfl-border);
    border-radius: 1rem !important;
    padding: 0.65rem 0.72rem;
    border-left: 3px solid #c6d6de;
}

.mfl-lane-card h3 {
    margin: 0.1rem 0 0.3rem;
    line-height: 1.28;
    font-size: 1.12rem;
}

.mfl-lane-card p {
    margin: 0;
}

.mfl-home-feed-section {
    max-width: 100%;
    border-top: 1px solid var(--mfl-border);
    padding-top: 1.8rem;
}

.mfl-home-feed-headers {
    display: grid;
    grid-template-columns: 3fr 5fr;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.mfl-home-feed-headers h2 {
    font-family: "Source Sans 3", "Segoe UI", sans-serif !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #3d6ba8 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mfl-home-feed-grid {
    display: grid;
    grid-template-columns: 3fr 5fr;
    gap: 1.5rem;
    max-width: 100%;
}

/* Perspectives column removed — single-column Resources layout */
.mfl-home-feed-headers-single {
    grid-template-columns: 1fr;
}
.mfl-home-feed-grid-single {
    grid-template-columns: 1fr;
}

/* Resources column */
.mfl-home-resources-col h2,
.mfl-home-feed-perspectives h2 {
    font-family: "Source Sans 3", "Segoe UI", sans-serif !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #3d6ba8 !important;
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important;
}

.mfl-home-feed-grid {
    align-items: start;
}

.mfl-home-resources-col {
    padding-top: 0;
    margin-top: 0;
}

.mfl-home-feed-perspectives {
    margin-top: 0;
}

/* Resources scroll */
.mfl-resources-scroll-wrap {
    position: relative;
    overflow: hidden;
}

.mfl-resources-list {
    max-height: none;
    transition: max-height 0.3s ease;
}

.mfl-resources-scroll-wrap .mfl-resources-list {
    max-height: 420px;
    overflow-y: auto;
    scroll-behavior: smooth;
    padding-right: 2.5rem;
    scrollbar-width: none;
}

.mfl-resources-scroll-wrap .mfl-resource-item {
    display: flex !important;
}

.mfl-resources-scroll-wrap .mfl-resources-list::-webkit-scrollbar {
    display: none;
}

.mfl-resources-nav {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.mfl-resources-nav button {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #ffffff;
    border: 1.5px solid #e26a26;
    color: #e26a26;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.mfl-resources-nav button:hover {
    background: #e26a26;
    color: #ffffff;
}

.mfl-resources-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mfl-resource-item {
    display: flex;
    gap: 0.65rem;
    align-items: center;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--mfl-border);
}

.mfl-resource-item:last-child {
    border-bottom: none;
}

.mfl-resource-thumb {
    flex-shrink: 0;
    width: 62px;
    height: 80px;
    border-radius: 0.5rem;
    overflow: hidden;
    display: block;
    box-shadow: 3px 3px 10px rgba(0, 17, 43, 0.22), 0 1px 2px rgba(0, 0, 0, 0.10);
    border: 1px solid rgba(0, 0, 0, 0.06);
    position: relative;
    text-decoration: none;
}

/* Spine edge */
.mfl-resource-thumb::before { content: none; }

/* Dark overlay for title legibility */
/* dark wash removed 2026-08-27 — same clean treatment as the resource
   list cards; the composite covers carry their own page styling */
.mfl-resource-thumb::after { content: none; }

.mfl-resource-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mfl-resource-img-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: #ffffff;
    border: 2px solid rgba(226, 106, 38, 0.25);
    border-radius: 0.75rem;
    box-sizing: border-box;
}

.mfl-resource-cover-title {
    position: absolute;
    bottom: 5px;
    left: 5px;
    right: 5px;
    z-index: 2;
    color: #ffffff;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 0.52rem;
    font-weight: 700;
    line-height: 1.25;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mfl-resource-info {
    flex: 1;
    min-width: 0;
}

.mfl-resource-info h3 {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.35;
    font-weight: 800;
}

.mfl-resource-info h3 a {
    color: var(--mfl-ink);
    text-decoration: none;
}

.mfl-resource-info h3 a:hover {
    color: var(--mfl-brand);
}

.mfl-resource-info p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--mfl-ink-muted);
    line-height: 1.4;
}

.mfl-resource-sponsor {
    margin: 0.15rem 0 0 !important;
    font-size: 0.72rem !important;
    color: var(--mfl-ink-muted) !important;
    line-height: 1.3;
    font-style: normal;
}

.mfl-resource-sponsor em {
    font-style: italic;
    color: var(--mfl-ink);
}

@media (max-width: 860px) {
    .mfl-home-feed-grid {
        grid-template-columns: 1fr;
    }

    /* Hide the shared headers block on mobile so each section gets its own inline header */
    .mfl-home-feed-headers {
        display: none !important;
    }

    /* Inline section headers on mobile — keep section title attached to its content */
    .mfl-home-resources-col::before {
        content: "Resources";
        display: block;
        font-family: "Source Sans 3", "Segoe UI", sans-serif;
        font-size: 1.25rem;
        font-weight: 800;
        color: #3d6ba8;
        margin: 0 0 0.75rem;
    }

    .mfl-home-feed-perspectives::before {
        content: "Perspectives";
        display: block;
        font-family: "Source Sans 3", "Segoe UI", sans-serif;
        font-size: 1.25rem;
        font-weight: 800;
        color: #3d6ba8;
        margin: 0 0 0.75rem;
    }
}

.mfl-home-feed-perspectives {
    background: linear-gradient(135deg, #e4f2fc 0%, #daedfb 50%, #eaf5ff 100%);
    border: 1px solid rgba(61, 107, 168, 0.2);
    border-radius: 1rem;
    padding: 2rem;
}

.mfl-home-feed-perspectives .mfl-home-perspective-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
    gap: 1.5rem;
}

.mfl-home-feed-perspectives .mfl-home-perspective-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
    border-top: none;
    padding: 1.5rem;
    background: #ffffff;
    border: 1px solid rgba(61, 107, 168, 0.25);
    border-radius: 1rem;
    box-shadow: 0 3px 12px rgba(0, 17, 43, 0.12);
}

.mfl-home-feed-perspectives .mfl-home-perspective-avatar-image {
    flex-shrink: 0;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.mfl-home-feed-perspectives .mfl-home-perspective-card:hover {
    box-shadow: 0 6px 20px rgba(61, 107, 168, 0.15);
    transform: translateY(-3px);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.mfl-home-feed-perspectives .mfl-home-perspective-card:hover .mfl-home-perspective-avatar-image {
    transform: scale(1.06);
    box-shadow: 0 4px 12px rgba(0, 17, 43, 0.15);
}

.mfl-home-feed-perspectives .mfl-perspective-text {
    text-align: left;
}

.mfl-home-feed-perspectives .mfl-perspective-text h3 {
    font-size: 1.35rem;
}

@media (max-width: 860px) {
    .mfl-home-feed-perspectives .mfl-home-perspective-list {
        grid-template-columns: 1fr;
    }
}

/* More Stories infinite list */
/* More Stories + Sidebar layout */
.mfl-home-more-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 2rem;
    margin-top: 1.5rem;
}

.mfl-home-more-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    position: sticky;
    top: 100px;
    align-self: start;
}

/* Calendar icon for events */
.mfl-event-calendar-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mfl-event-item {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--mfl-border);
}

.mfl-event-item:last-child { border-bottom: none; }

.mfl-event-cal-icon {
    flex-shrink: 0;
    width: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.mfl-event-cal-month {
    display: block;
    text-align: center;
    color: #ed8a4f;
    font-family: "Source Sans 3", sans-serif;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
}

.mfl-event-cal-day {
    display: block;
    color: #043962;
    font-family: "Source Sans 3", sans-serif;
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 1.1;
}

.mfl-event-info h4 {
    margin: 0 0 0.15rem;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.3;
}

.mfl-event-info h4 a {
    color: var(--mfl-ink);
    text-decoration: none;
}

.mfl-event-info h4 a:hover { color: var(--mfl-brand); }

.mfl-event-info .mfl-meta {
    font-size: 0.75rem;
    margin: 0;
}

@media (max-width: 960px) {
    .mfl-home-more-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .mfl-home-more-sidebar {
        position: static;
    }
}

.mfl-home-more-stories > h2 {
    margin-bottom: 1rem !important;
}

/* Lane tabs (homepage More Recent + News page): true tab treatment on a
   baseline rule, distinct from the pill filter chips. Mobile scrolls the
   row horizontally instead of wrapping. */
.mfl-more-tabs,
.mfl-lane-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.15rem;
    margin: 0 0 1.25rem;
    border-bottom: 2px solid var(--mfl-border);
    overflow-x: auto;
    scrollbar-width: none;
}
.mfl-more-tabs::-webkit-scrollbar,
.mfl-lane-tabs::-webkit-scrollbar { display: none; }
.mfl-more-tab {
    position: relative;
    flex: 0 0 auto;
    border: 0;
    background: none;
    border-radius: 0;
    padding: 0.6rem 0.95rem 0.65rem;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--mfl-ink-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease;
}
.mfl-more-tab {
    border-radius: 0.5rem 0.5rem 0 0;
    transition: color 0.15s ease, background 0.15s ease;
}
.mfl-more-tab::after {
    content: '';
    position: absolute;
    left: 0.55rem;
    right: 0.55rem;
    bottom: -2px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: #e26a26;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.18s ease;
}
.mfl-more-tab:hover {
    color: var(--mfl-ink);
    background: #e9f0f8;
}
.mfl-more-tab:hover::after {
    transform: scaleX(0.55);
}
.mfl-more-tab:focus-visible {
    outline: 2px solid rgba(226, 106, 38, 0.55);
    outline-offset: -2px;
}
.mfl-more-tab.is-active {
    color: var(--mfl-ink);
    font-weight: 700;
    background: #fdeee3;
}
.mfl-more-tab.is-active::after { transform: scaleX(1); }
.mfl-more-empty { color: var(--mfl-ink-muted); margin: 0.5rem 0 0; }

.mfl-lane-tabs .mfl-more-tab {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.mfl-more-stories-list {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.mfl-more-story {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 1rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--mfl-border);
    align-items: start;
}

.mfl-more-story:last-child {
    border-bottom: none;
}

.mfl-more-story-media {
    display: block;
    aspect-ratio: 3 / 2;
    border-radius: 1rem !important;
    overflow: hidden;
}

.mfl-more-story-media img,
.mfl-more-story-media .mfl-media-fallback,
.mfl-more-story-media .mfl-media-fallback-inner {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 1rem !important;
    box-sizing: border-box;
}
/* When the more-story slot is a fallback container (span, not <a>),
   still enforce the tile aspect + rounded corners. */
.mfl-more-story-media.mfl-media-fallback {
    aspect-ratio: 3 / 2;
}

.mfl-more-story-content h3 {
    margin: 0 0 0.3rem;
    font-size: 1.35rem;
    line-height: 1.3;
}

.mfl-more-story-content h3 a {
    color: var(--mfl-ink);
    text-decoration: none;
}

.mfl-more-story-content h3 a:hover {
    color: var(--mfl-brand);
}

.mfl-more-story-content .mfl-taxonomy-line {
    margin-bottom: 0.3rem;
}

.mfl-more-story-content p {
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--mfl-ink-muted);
    margin: 0;
}

.mfl-more-stories-loader,
.mfl-more-coverage-loader {
    text-align: center;
    padding: 1.5rem 0;
    margin: 1rem 0 0.5rem;
}
.mfl-more-coverage-status {
    text-align: center;
    font-size: 0.9rem;
    color: #6f8194;
    margin: 1rem 0 0;
}

.mfl-load-more-btn {
    background: #ffffff;
    color: #e26a26;
    border: 1.5px solid #e26a26;
    border-radius: 2rem;
    padding: 0.62rem 2rem;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.mfl-load-more-btn:hover {
    background: #e26a26;
    color: #ffffff;
}

/* Archive load-more wrapper (category / topic / sub-topic archives) */
.mfl-load-more-wrap {
    margin: 2rem 0 1.2rem;
    text-align: center;
}
.mfl-load-more-wrap .mfl-load-more-status {
    text-align: center;
    font-size: 0.9rem;
    color: #6f8194;
    margin: 1rem 0 0;
    font-style: italic;
}

/* Hide numeric pagination on archive pages when JS is on — load-more takes over. */
.mfl-has-js .mfl-pagination-wrap[data-mfl-nojs-pagination] {
    display: none;
}

@media (max-width: 640px) {
    .mfl-more-story {
        grid-template-columns: 120px 1fr;
    }
}

.mfl-card-list-featured {
    gap: 0.6rem;
}

.mfl-kicker {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--mfl-brand);
    font-size: 0.66rem;
    font-weight: 700;
}

/* Breadcrumb trail: kicker styling, Home / News / Local Fleet Wire */
.mfl-breadcrumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
}
.mfl-breadcrumbs li {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--mfl-brand);
}
.mfl-breadcrumbs li + li::before {
    content: '/';
    color: var(--mfl-ink-muted);
    font-weight: 400;
}
.mfl-breadcrumbs a {
    color: var(--mfl-brand);
    text-decoration: none;
}
.mfl-breadcrumbs a:hover { text-decoration: underline; }
.mfl-archive-header .mfl-breadcrumbs { margin-bottom: 0.45rem; }
.mfl-archive-intro {
    margin: 0.35rem 0 0.75rem;
    max-width: 640px;
    color: var(--mfl-ink-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Topics + sub-topics: one aligned block in the meta row; sub-topics sit
   directly under the topics one size down, sharing the left edge */
.mfl-story-taxonomies {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.65rem;
    row-gap: 0.15rem;
    min-width: 0;
}
.mfl-story-taxonomies .mfl-taxonomy-line { margin: 0; }
.mfl-story-taxonomies-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--mfl-ink-muted);
    white-space: nowrap;
}
/* This block only (Eric, 2026-09-03: "remove the little tag icons here") —
   the same tag glyph on cards/archives elsewhere via .mfl-taxonomy-line a::before
   is untouched. */
.mfl-story-taxonomies .mfl-taxonomy-line a::before { display: none; }
.mfl-story-subtopics {
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.4;
    color: #ed8a4f;
}
.mfl-story-subtopics a {
    color: #ed8a4f;
    text-decoration: none;
}
.mfl-story-subtopics a:hover { color: var(--mfl-brand); }

/* Footer tags: the topic + sub-topic row now shares the Share/Print row at the
   foot of the article (Eric: same row). The tags flex-grow to push the tools to
   the right edge and shrink/wrap internally when the list is long; Share and
   Print refuse to shrink (below) so the Print button never orphans onto its own
   line. */
.mfl-story-footer-tags {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
}
.mfl-article-tools-bottom .mfl-share-wrapper,
.mfl-article-tools-bottom .mfl-print-btn { flex-shrink: 0; }
/* On phones the tags take a full row and Share/Print drop beneath them, rather
   than cramming all three onto one line. */
@media (max-width: 640px) {
    .mfl-story-footer-tags { flex-basis: 100%; }
}

/* Featured image caption row: caption left, credit right, one line
   (wrapping to stacked on narrow screens) */
.mfl-story-featured-caption-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1.25rem;
    margin: 0.5rem 0 0;
    padding: 0 0.2rem;
}
.mfl-story-featured-caption-row .mfl-story-featured-caption {
    display: inline;
    flex: 1 1 260px;
    margin: 0;
    text-align: left;
}
.mfl-story-featured-caption-row .mfl-story-featured-credit {
    display: inline;
    flex: 0 0 auto;
    margin: 0 0 0 auto;
    padding: 0;
    text-align: right;
    white-space: nowrap;
}

/* Sidebar heading links (Local Fleet Wire) read like plain headings */
.mfl-sidebar-section h3 a, .mfl-sidebar-section h2 a {
    color: inherit;
    text-decoration: none;
}
.mfl-sidebar-section h3 a:hover, .mfl-sidebar-section h2 a:hover { color: var(--mfl-brand); }

/* Date line above a sidebar headline stays on its own line */
.mfl-sidebar-list .mfl-meta {
    display: block;
    margin-bottom: 0.15rem;
}

.mfl-lead {
    display: grid;
    gap: 0.85rem;
}

.mfl-archive-shell {
    display: grid;
    gap: 0.7rem;
    align-content: start;
}

/* "More Coverage" infinite-scroll stream on single article pages */
.mfl-more-coverage {
    margin-top: 3rem;
    padding-top: 2.5rem;
    border-top: 1px solid rgba(0, 17, 43, 0.08);
}
.mfl-more-coverage-header {
    margin-bottom: 1.5rem;
}
.mfl-more-coverage-sentinel {
    height: 1px;
    margin: 2rem 0 0;
}
.mfl-more-coverage-status {
    text-align: center;
    font-size: 0.9rem;
    color: #6f8194;
    margin: 1.25rem 0 0.5rem;
    font-style: italic;
}

.mfl-archive-header {
    margin-bottom: 0;
}

.mfl-archive-header h1 {
    margin: 0.25rem 0 0.35rem;
    line-height: 1.14;
    font-size: clamp(1.62rem, 3vw, 2rem);
    font-family: "Source Serif 4", Georgia, serif;
}

.mfl-archive-header > p {
    margin: 0;
}

.mfl-filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-end;
    margin-top: 0.75rem;
    border: 1px solid var(--mfl-border);
    border-radius: 0.42rem;
    background: var(--mfl-surface-alt);
    padding: 0.48rem 0.56rem 0.54rem;
}

.mfl-filter-group {
    display: grid;
    gap: 0.2rem;
}

.mfl-filter-group label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mfl-ink-muted);
    font-weight: 700;
}

/* Base sizing only. The shared appearance for every filter select lives in
   one authoritative block at the end of this file — see "FILTER SELECTS". */
.mfl-filter-group select {
    min-width: 156px;
}

.mfl-card-list {
    display: grid;
    gap: 0.6rem;
}

.mfl-card {
    background: var(--mfl-surface);
    border: 1px solid var(--mfl-border);
    border-radius: 0.45rem;
    padding: 0.7rem 0.75rem;
}

.mfl-feed-list .mfl-card {
    border: 0;
    border-top: 1px solid var(--mfl-border);
    border-radius: 0;
    background: transparent;
    padding: 0.6rem 0;
}

.mfl-feed-list .mfl-card-has-image .mfl-card-media {
    aspect-ratio: 3 / 2;
}

.mfl-feed-list .mfl-card:last-child {
    border-bottom: 1px solid var(--mfl-border);
}

.mfl-feed-list .mfl-card-has-image {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.mfl-feed-list .mfl-card-has-image .mfl-card-media {
    flex-shrink: 0;
    width: 250px;
    height: auto;
    aspect-ratio: 3 / 2;
    align-self: center;
    border-radius: 1rem;
    overflow: hidden;
}

.mfl-feed-list .mfl-card-has-image .mfl-card-media img,
.mfl-feed-list .mfl-card-has-image .mfl-card-media .mfl-media-fallback,
.mfl-feed-list .mfl-card-has-image .mfl-card-media .mfl-media-fallback-inner {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.mfl-feed-list .mfl-card-has-image .mfl-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mfl-card-has-image {
    padding: 0;
    overflow: hidden;
}

.mfl-card-media {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: #ffffff;
    border-radius: 1rem;
}

.mfl-story-media,
.mfl-story-hero-media {
    border-radius: 1rem;
    overflow: hidden;
}

.mfl-story-media img,
.mfl-story-hero-media img {
    border-radius: 1rem !important;
}

.mfl-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Empty white placeholder with a very light orange rounded border — used
   any time a post has no featured image. Matches outer card corner radius. */
.mfl-media-fallback {
    position: relative;
    background: #ffffff;
    border: 2px solid rgba(226, 106, 38, 0.25);
    border-radius: 1rem;
    box-sizing: border-box;
}

.mfl-media-fallback-inner {
    display: block;
    width: 100%;
    height: 100%;
}

.mfl-card-body {
    display: grid;
    gap: 0.45rem;
}

.mfl-card-has-image .mfl-card-body {
    padding: 0.72rem 0.75rem 0.84rem;
}

.mfl-feed-list .mfl-card-body {
    padding: 0 0 0 0.82rem;
    align-content: start;
}

.mfl-feed-list .mfl-card h3 {
    font-size: clamp(1.08rem, 1.75vw, 1.28rem);
    line-height: 1.2;
}

.mfl-card h3 {
    margin: 0.08rem 0 0.24rem;
    line-height: 1.22;
    font-family: "Source Serif 4", Georgia, serif;
}

.mfl-card p {
    margin: 0;
}

.mfl-meta,
.mfl-taxonomy-line {
    color: var(--mfl-ink-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.mfl-label {
    display: inline-block;
    padding: 0.17rem 0.5rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.69rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.mfl-label-editorial {
    background: #d7eaf2;
    border-color: #94bac8;
    color: #083d4c;
}

.mfl-label-sponsored {
    background: #ffe0e5;
    border-color: #dfa0aa;
    color: var(--mfl-sponsored);
}

.mfl-label-press-release {
    background: #fff6db;
    border-color: #ceb77c;
    color: var(--mfl-press);
}

.mfl-pagination-wrap {
    margin-top: 0.7rem;
}

.mfl-pagination-wrap .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.mfl-pagination-wrap .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    min-height: 2.1rem;
    padding: 0.35rem 0.7rem;
    border-radius: 0.55rem;
    border: 1px solid var(--mfl-border);
    background: var(--mfl-surface);
    color: var(--mfl-brand);
    font-weight: 700;
    text-decoration: none;
}

.mfl-pagination-wrap .page-numbers.current {
    background: #e26a26;
    border-color: #e26a26;
    color: #ffffff;
}

.mfl-pagination-wrap .page-numbers:not(.current):hover {
    border-color: #e26a26;
    color: #e26a26;
}

.mfl-story {
    width: 100%;
}

.mfl-story h1,
.mfl-story h2,
.mfl-story h3 {
    font-family: "Source Serif 4", Georgia, serif;
    line-height: 1.22;
}

.mfl-story-main {
    background: var(--mfl-surface);
    border: 1px solid var(--mfl-border);
    border-radius: 1rem;
}

.mfl-story-header {
    padding: 1.1rem 1.1rem 0.9rem;
}

.mfl-story-header h1 {
    margin: 0.2rem 0 0.3rem;
    font-size: clamp(1.8rem, 2.85vw, 2.24rem);
    line-height: 1.13;
}

.mfl-story-standfirst {
    margin: 0.7rem 0 0;
    font-size: 1.05rem;
    line-height: 1.65;
    color: #243743;
}

.mfl-story-featured-media {
    margin: 0 1rem;
    padding: 0;
    border-top: none;
    border-bottom: none;
    overflow: hidden;
    border-radius: 1rem;
    display: block;
    isolation: isolate;
}

.mfl-story-featured-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 0.3s ease;
    transform-origin: center;
}

.mfl-story-featured-media:hover img {
    transform: scale(1.04);
}

/* Article tools: share + listen */
.mfl-story-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-top: 0.5rem;
}

.mfl-story-meta-row .mfl-meta {
    margin: 0;
}

.mfl-story-meta-row .mfl-taxonomy-line {
    margin: 0;
}

.mfl-article-tools-inline {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-left: auto;
}

.mfl-article-tools-inline .mfl-listen-btn,
.mfl-article-tools-inline .mfl-share-btn {
    padding: 0.28rem 0.6rem;
    font-size: 0.75rem;
}

.mfl-article-tools {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem 0;
}

/* Round corners on article page elements */
.mfl-story-rail-module {
    border-radius: 1rem;
}

.mfl-story-featured-media img {
    border-radius: 1rem;
}

.mfl-article-tools-bottom {
    border-top: none;
    border-bottom: none;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem 1.5rem;
    flex-wrap: wrap;
    row-gap: 0.6rem;
}
@media (max-width: 640px) {
    .mfl-article-tools-bottom {
        margin-top: 1rem;
        margin-bottom: 0.5rem;
        padding: 0.5rem 1rem;
    }
}

.mfl-listen-btn,
.mfl-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--mfl-border);
    border-radius: 2rem;
    background: var(--mfl-surface);
    color: var(--mfl-ink);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.mfl-listen-btn:hover,
.mfl-share-btn:hover {
    border-color: #e26a26;
    color: #e26a26;
    box-shadow: 0 2px 8px rgba(226, 106, 38, 0.18);
}

.mfl-share-wrapper {
    position: relative;
}

.mfl-share-dropdown {
    display: none;
    position: absolute;
    bottom: calc(100% + 0.4rem);
    left: 0;
    background: #ffffff;
    border: 1px solid var(--mfl-border);
    border-radius: 0.65rem;
    box-shadow: 0 8px 24px rgba(0, 17, 43, 0.14);
    padding: 0.4rem 0;
    min-width: 180px;
    z-index: 50;
}

.mfl-article-tools:not(.mfl-article-tools-bottom) .mfl-share-dropdown {
    bottom: auto;
    top: calc(100% + 0.4rem);
}

.mfl-share-dropdown.is-open {
    display: block;
}

.mfl-share-option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.85rem;
    color: var(--mfl-ink);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s ease;
}

.mfl-share-option:hover {
    background: #eef9ff;
}

.mfl-share-option svg {
    flex-shrink: 0;
    color: #043962;
}

/* AI-generated Key Takeaways box — sits below featured image, above article body.
   Inset from the article column edges so it doesn't run flush to the borders. */
.mfl-takeaways {
    background: #ffefe4;
    border: 1px solid rgba(226, 106, 38, 0.2);
    border-left: 4px solid #e26a26;
    border-radius: 0.7rem;
    padding: 1.25rem 1.6rem 1.35rem;
    margin: 2rem 2rem 2.25rem;
    box-shadow: 0 1px 4px rgba(0, 17, 43, 0.04);
}
.mfl-takeaways-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.75rem;
    font-family: "Source Sans 3", "Satoshi", "Segoe UI", sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #e26a26;
}
.mfl-takeaways-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    color: #e26a26;
    box-shadow: 0 1px 3px rgba(226, 106, 38, 0.18);
}
.mfl-takeaways-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.5rem;
}
.mfl-takeaways-list li {
    position: relative;
    padding: 0.05rem 0 0.05rem 1.35rem;
    font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
    font-size: 1rem;
    line-height: 1.55;
    color: #1a3a5e;
}
.mfl-takeaways-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e26a26;
    box-shadow: 0 0 0 3px rgba(226, 106, 38, 0.18);
}
@media (max-width: 640px) {
    .mfl-takeaways {
        padding: 0.95rem 1.15rem 1.05rem;
        border-radius: 0.55rem;
        margin: 1.4rem 1rem 1.8rem;
    }
    .mfl-takeaways-list li { font-size: 0.95rem; }
}

/* Article bottom newsletter CTA */
.mfl-article-newsletter-cta {
    margin: 2.5rem auto 1.5rem;
    max-width: 820px;
    border: 1px solid rgba(226, 106, 38, 0.25);
    border-radius: 1rem;
    background: #ffe4d1;
    overflow: hidden;
    position: relative;
}

/* Logo-inspired dashed "o" rings — dashes grow from small to large in one revolution */
.mfl-article-newsletter-cta::before {
    content: "";
    position: absolute;
    top: -50px;
    right: -50px;
    width: 240px;
    height: 240px;
    background-image: url("assets/img/newsletter-o.svg");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.10;
    pointer-events: none;
}

.mfl-article-newsletter-cta::after {
    content: "";
    position: absolute;
    bottom: -60px;
    left: -45px;
    width: 180px;
    height: 180px;
    background-image: url("assets/img/newsletter-o.svg");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.07;
    pointer-events: none;
}

.mfl-article-newsletter-inner {
    display: flex;
    align-items: center;
    gap: 2rem;
    position: relative;
    z-index: 1;
    padding: 1.25rem 1.5rem;
}

.mfl-article-newsletter-copy {
    flex: 1;
    min-width: 0;
}

.mfl-article-newsletter-action {
    flex: 0 1 420px;
    min-width: 0;
}

.mfl-article-newsletter-kicker {
    margin: 0 0 0.5rem;
    font-family: var(--mfl-font-sans);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #e26a26;
}

.mfl-article-newsletter-accent {
    width: 2.5rem;
    height: 3px;
    background: linear-gradient(90deg, #e26a26 0%, #f5b08e 100%);
    border-radius: 2px;
    margin-bottom: 0.9rem;
}

.mfl-article-newsletter-copy h2 {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--mfl-ink);
    margin: 0 0 0.4rem;
}

.mfl-article-newsletter-copy p {
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--mfl-ink-muted);
    margin: 0;
    max-width: 42ch;
}

.mfl-article-newsletter-copy h2 { margin-bottom: 0.3rem; }

.mfl-article-newsletter-accent { margin-bottom: 0.6rem; }

.mfl-article-newsletter-action .mfl-compact-newsletter-consent {
    font-size: 0.66rem;
    line-height: 1.5;
    margin: 0.45rem 0 0;
}

.mfl-article-newsletter-form .mfl-article-newsletter-email { flex: 1 1 220px; }

@media (max-width: 700px) {
    .mfl-article-newsletter-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 0.9rem;
    }

    .mfl-article-newsletter-action { flex: 1 1 auto; }
}

.mfl-article-newsletter-form {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.mfl-article-newsletter-email {
    padding: 0.7rem 1rem;
    border: 1px solid var(--mfl-border);
    border-radius: 0.5rem;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--mfl-ink);
    flex: 0 1 260px;
    min-width: 0;
}

.mfl-article-newsletter-email::placeholder {
    color: var(--mfl-ink-muted);
}

.mfl-article-newsletter-form .mfl-btn {
    flex-shrink: 0;
    padding: 0.6rem 1.6rem !important;
    font-size: 0.95rem !important;
}

@media (max-width: 640px) {
    .mfl-article-newsletter-copy {
        padding: 1.2rem;
    }

    .mfl-article-newsletter-copy h2 {
        font-size: 1.2rem;
    }

    .mfl-article-newsletter-icon {
        display: none;
    }

    /* Stay a single row on phones, like every other signup on the site.
       This block used to switch to a column, which left `flex: 1 1 auto` on
       the input: flex-grow in a COLUMN grows VERTICALLY, so the email field
       stretched to 220px and the whole box ran to 551px on a 375px screen.
       Row direction restores the intended behaviour and the grow goes back to
       filling the width. min-width:0 lets the input shrink below its default
       size so the button always fits beside it. */
    .mfl-article-newsletter-form {
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
    }
    .mfl-article-newsletter-email {
        flex: 1 1 auto;
        min-width: 0;
        height: auto;
    }
    .mfl-article-newsletter-form .mfl-btn {
        align-self: auto;
        flex-shrink: 0;
        padding: 0.6rem 1.1rem !important;
    }
}

/* Sidebar newsletter CTA — vertical cousin of the bottom newsletter CTA */
.mfl-rail-newsletter-cta {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(226, 106, 38, 0.25);
    border-radius: 1rem;
    background: #ffe4d1;
    padding: 1.1rem 1.05rem 1.15rem;
    text-align: left;
}

/* On mobile, hide the sidebar Sightline promo since the bottom one is shown */
@media (max-width: 768px) {
    .mfl-rail-newsletter-cta {
        display: none !important;
    }
}

.mfl-rail-newsletter-cta::before {
    content: "";
    position: absolute;
    top: -50px;
    right: -50px;
    width: 170px;
    height: 170px;
    background-image: url("assets/img/newsletter-o.svg");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.10;
    pointer-events: none;
}

.mfl-rail-newsletter-cta::after {
    content: "";
    position: absolute;
    bottom: -55px;
    left: -50px;
    width: 155px;
    height: 155px;
    background-image: url("assets/img/newsletter-o.svg");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.07;
    pointer-events: none;
}

.mfl-rail-newsletter-kicker {
    position: relative;
    z-index: 1;
    margin: 0 0 0.45rem;
    font-family: var(--mfl-font-sans);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #e26a26;
}

.mfl-rail-newsletter-icon {
    position: relative;
    z-index: 1;
    width: 42px;
    color: #e26a26;
    opacity: 0.65;
    margin-bottom: 0.5rem;
}

.mfl-rail-newsletter-icon svg {
    width: 100%;
    height: auto;
    display: block;
}

.mfl-rail-newsletter-accent {
    position: relative;
    z-index: 1;
    width: 2rem;
    height: 3px;
    background: linear-gradient(90deg, #e26a26 0%, #f5b08e 100%);
    border-radius: 2px;
    margin-bottom: 0.55rem;
}

.mfl-rail-newsletter-cta h3, .mfl-rail-newsletter-cta h2 {
    position: relative;
    z-index: 1;
    margin: 0 0 0.3rem;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.22;
    color: var(--mfl-ink);
}

.mfl-rail-newsletter-cta p {
    position: relative;
    z-index: 1;
    margin: 0 0 0.85rem;
    font-size: 0.84rem;
    line-height: 1.4;
    color: var(--mfl-ink-muted);
}

.mfl-rail-newsletter-form {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mfl-rail-newsletter-email {
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--mfl-border);
    border-radius: 0.5rem;
    font-family: inherit;
    font-size: 0.85rem;
    background: #ffffff;
    color: var(--mfl-ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mfl-rail-newsletter-email::placeholder {
    color: var(--mfl-ink-muted);
}

.mfl-rail-newsletter-email:focus {
    outline: none;
    border-color: #e26a26;
    box-shadow: 0 0 0 3px rgba(226, 106, 38, 0.14);
}

.mfl-rail-newsletter-form .mfl-btn {
    align-self: stretch;
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 0.45rem 0.9rem !important;
    font-size: 0.85rem !important;
}

.mfl-story-body {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 1rem 1.1rem 1.2rem;
}

.mfl-story-body p {
    margin: 0 0 1rem;
    font-size: 1rem;
    line-height: 1.72;
}

/* Scope the first/last paragraph rules to the body's own children. Pasted copy
   often arrives with every paragraph inside a bare <div>, which makes each
   paragraph both a :first-child and a :last-child of its wrapper — that wiped
   the bottom margin off every paragraph (no spacing at all) and gave every one
   of them the lede font size. */
.mfl-story-body > p:last-child,
.mfl-story-body > div:last-child > p:last-child {
    margin-bottom: 0;
}

.mfl-story-body > p:first-child {
    font-size: 1.09rem;
}

.mfl-story-rail-module {
    background: var(--mfl-surface);
    border: 1px solid var(--mfl-border);
    border-radius: 1rem;
    padding: 0.72rem;
    box-shadow: none;
}

.mfl-story-rail-module h2 {
    margin: 0.18rem 0 0.5rem;
    font-size: 1.16rem;
    font-family: "Source Serif 4", Georgia, serif;
    line-height: 1.2;
}

.mfl-story-rail-module .mfl-newsletter-cta {
    padding: 1rem;
}

.mfl-story-rail-list .mfl-card {
    border: 0;
    border-top: 1px solid var(--mfl-border);
    border-radius: 0;
    padding: 0.65rem 0;
}

.mfl-story-rail-list .mfl-card-has-image {
    grid-template-columns: 1fr;
}

.mfl-story-rail-list .mfl-card-body {
    padding: 0;
}

.mfl-ad-slot {
    border: 1px dashed #afbcc3;
    border-radius: 0.42rem;
    background: #edf2f5;
    padding: 0.6rem 0.68rem;
    margin: 0.85rem 0 0.95rem;
}

.mfl-ad-title {
    margin: 0 0 0.35rem;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mfl-ink-muted);
    font-weight: 700;
}

.mfl-ad-content {
    margin: 0;
    font-size: 0.85rem;
    color: var(--mfl-ink-muted);
}

.mfl-ad-format {
    color: var(--mfl-ink);
}

.mfl-ad-slot-id {
    color: #3f535d;
}

.mfl-newsletter-cta {
    background: linear-gradient(125deg, #073145 0%, #0f5e71 100%);
    color: #f4fbff;
    border-radius: 1rem;
    padding: 0.84rem;
}

.mfl-newsletter-cta p {
    margin: 0.35rem 0 0.8rem;
}

.mfl-newsletter-cta a {
    color: #f5ffcb;
    font-weight: 700;
}

.mfl-empty {
    margin: 0;
    color: var(--mfl-ink-muted);
}

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.screen-reader-text:focus {
    clip: auto;
    clip-path: none;
    height: auto;
    left: 5px;
    top: 5px;
    width: auto;
    background: #f5f5f5;
    color: #000;
    font-size: 0.9rem;
    padding: 0.6rem;
    z-index: 100000;
}

@media (max-width: 1024px) {
    .mfl-home-hero,
    .mfl-home-lead-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .mfl-home-top-story {
        grid-template-columns: 90px minmax(0, 1fr);
    }
}

@media (max-width: 980px) {
    .mfl-story-layout {
        grid-template-columns: 1fr;
    }

    .mfl-story {
        width: min(100%, var(--mfl-content-width));
    }

    .mfl-story-rail {
        width: min(100%, var(--mfl-content-width));
        margin-inline: auto;
        position: static;
    }
}

@media (max-width: 860px) {
    .mfl-header {
        position: sticky;
        top: 0;
        z-index: 90;
    }

    .mfl-mobile-bar {
        display: flex;
    }

    .mfl-logo-link-mobile .mfl-logo {
        width: min(190px, 50vw);
    }

    .mfl-branding {
        align-items: flex-start;
        flex-direction: column;
    }

    .mfl-nav-list {
        gap: 0.2rem;
        padding: 0.5rem 0;
    }

    .mfl-main {
        padding-top: 1rem;
    }

    .mfl-homepage {
        gap: 0.65rem;
    }

    .mfl-home-top-stories {
        padding: 0.65rem;
    }

    .mfl-home-feed-grid {
        grid-template-columns: 1fr;
    }

    .mfl-feed-list .mfl-card-has-image {
        display: flex;
        gap: 0.7rem;
        align-items: flex-start;
    }

    .mfl-feed-list .mfl-card-has-image .mfl-card-media {
        width: 130px !important;
        flex: 0 0 130px;
        flex-shrink: 0;
    }

    .mfl-feed-list .mfl-card-has-image .mfl-card-body {
        flex: 1 1 auto;
        min-width: 0;
        padding: 0;
    }

    .mfl-feed-list .mfl-card h3 {
        font-size: 0.98rem;
        line-height: 1.3;
    }

    .mfl-feed-list .mfl-card .mfl-meta {
        font-size: 0.72rem;
    }

    .mfl-feed-list .mfl-card-body > p:not(.mfl-meta):not(.mfl-taxonomy-line) {
        font-size: 0.84rem;
        line-height: 1.4;
    }

    .mfl-has-js .mfl-header-shell {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        z-index: 95;
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
        background: #ffffff;
        padding-top: 0;
        box-shadow: 0 16px 40px rgba(0, 17, 43, 0.15);
    }

    .mfl-has-js .mfl-header:not(.is-menu-open) .mfl-header-shell {
        display: none;
    }

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

    .mfl-has-js .mfl-header .mfl-utility-inner {
        padding: 0.45rem 0;
    }

    .mfl-has-js .mfl-header .mfl-branding {
        padding: 0.6rem 0 0.7rem;
    }

    .mfl-has-js .mfl-header .mfl-branding .mfl-logo-link {
        display: none;
    }

    .mfl-has-js .mfl-header .mfl-tagline {
        max-width: none;
        font-size: 0.9rem;
    }

    .mfl-has-js .mfl-header .mfl-newsletter-btn:not(.mfl-newsletter-btn-mobile) {
        display: none;
    }

    /* Mobile menu: clean full-screen layout */
    .mfl-has-js .mfl-header-shell .mfl-header-grid {
        flex-direction: column;
        padding: 0 1.2rem;
    }

    .mfl-has-js .mfl-header-shell .mfl-header-grid > .mfl-logo-link {
        display: none;
    }

    .mfl-has-js .mfl-header-shell .mfl-header-navs {
        width: 100%;
        align-items: stretch;
    }

    .mfl-has-js .mfl-header-shell .mfl-utility-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
    }

    .mfl-has-js .mfl-header-shell .mfl-content-type-nav .mfl-nav-list {
        flex-direction: column;
        gap: 0;
    }

    .mfl-has-js .mfl-header-shell .mfl-content-type-nav .mfl-nav-list a {
        display: block;
        padding: 0.85rem 0;
        font-size: 1rem;
        font-weight: 700;
        text-transform: none;
        letter-spacing: 0;
        color: var(--mfl-ink);
        border-bottom: 1px solid var(--mfl-border);
    }

    .mfl-has-js .mfl-header-shell .mfl-search-wrapper {
        display: none;
    }

    .mfl-has-js .mfl-header-shell .mfl-topic-nav-inline {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
        margin-top: 0.5rem;
    }

    .mfl-has-js .mfl-header-shell .mfl-topic-nav-inline::before {
        content: 'Topics';
        display: block;
        padding: 0.85rem 0;
        font-size: 1rem;
        font-weight: 700;
        text-transform: none;
        letter-spacing: 0;
        color: #8a9baa;
        border-bottom: 1px solid var(--mfl-border);
    }

    .mfl-has-js .mfl-header-shell .mfl-topic-nav-inline .mfl-nav-list {
        flex-direction: column;
        gap: 0;
        padding: 0;
    }

    .mfl-has-js .mfl-header-shell .mfl-topic-nav-inline .mfl-nav-list a {
        display: block;
        padding: 0.7rem 0 0.7rem 1.2rem;
        font-size: 0.92rem;
        font-weight: 700;
        border-bottom: 1px solid var(--mfl-border);
        color: var(--mfl-primary-strong);
    }

    .mfl-has-js .mfl-header-shell .mfl-newsletter-btn-topicnav {
        display: none !important;
    }

    /* Mobile menu footer section */
    .mfl-mobile-menu-footer {
        padding: 1rem 1.2rem 2rem;
        border-top: 1px solid var(--mfl-border);
        margin-top: 0.5rem;
    }

    .mfl-mobile-search {
        display: flex;
        gap: 0.5rem;
        margin-bottom: 1.2rem;
    }

    .mfl-mobile-search input {
        flex: 1;
        padding: 0.55rem 0.75rem;
        border: 1px solid var(--mfl-border);
        border-radius: 2rem;
        font-size: 0.95rem;
        font-family: inherit;
    }

    .mfl-mobile-search button {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .mfl-mobile-menu-links {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .mfl-mobile-menu-links a {
        color: var(--mfl-ink);
        text-decoration: none;
        font-family: var(--mfl-font-sans);
        font-size: 0.92rem;
        font-weight: 700;
        padding: 0.7rem 0 0.7rem 1.2rem;
        border-bottom: 1px solid var(--mfl-border);
        display: block;
        letter-spacing: 0;
    }

    .mfl-mobile-menu-links a:first-child {
        color: #ffffff;
        background-color: #e26a26;
        font-weight: 800;
    }

    .mfl-mobile-menu-links a:hover {
        color: #e26a26;
    }

    .mfl-mobile-menu-links a:first-child:hover {
        color: #e26a26;
        background-color: #ffffff;
    }

    .mfl-mobile-menu-legal {
        padding: 0.8rem 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.35rem 0.5rem;
        align-items: center;
    }

    .mfl-mobile-menu-legal a {
        color: var(--mfl-ink-muted);
        text-decoration: none;
        font-size: 0.75rem;
        font-weight: 600;
    }

    .mfl-mobile-menu-legal a:hover {
        color: var(--mfl-brand);
    }

    .mfl-mobile-legal-sep {
        color: var(--mfl-ink-muted);
        font-size: 0.75rem;
    }
}

/* Hide mobile-only elements on desktop */
.mfl-mobile-menu-footer,
.mfl-mobile-menu-legal {
    display: none;
}

@media (max-width: 860px) {
    .mfl-mobile-menu-footer,
    .mfl-mobile-menu-legal {
        display: block;
    }

    .mfl-mobile-menu-legal {
        display: flex;
    }
}

@media (max-width: 640px) {
    .mfl-wrap {
        width: min(100% - 1.15rem, var(--mfl-max-width));
    }

    .mfl-search {
        width: 100%;
    }

    .mfl-search input[type="search"] {
        width: min(100%, 320px);
        flex: 1 1 auto;
    }

    .mfl-filter-group select {
        min-width: 130px;
    }

    .mfl-filter-form {
        display: grid;
        align-items: stretch;
    }

    .mfl-filter-group {
        width: 100%;
    }

    .mfl-filter-group select {
        min-width: 0;
        width: 100%;
    }

    .mfl-home-hero-copy h1 {
        font-size: clamp(1.6rem, 6vw, 1.9rem);
    }

    .mfl-home-top-story {
        grid-template-columns: 1fr;
    }

    .mfl-home-top-story-media {
        max-width: 160px;
    }

    /* Compact rows on phones: thumbnail beside the text so images
       stop dominating the screen (Eric, 2026-08-27). */
    .mfl-feed-list .mfl-card-has-image {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start;
        gap: 0.7rem;
    }

    .mfl-feed-list .mfl-card-has-image .mfl-card-media {
        width: 122px !important;
        max-width: 122px !important;
        aspect-ratio: 3 / 2;
        flex: 0 0 122px !important;
    }

    .mfl-feed-list .mfl-card-has-image .mfl-card-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .mfl-feed-list .mfl-card-has-image .mfl-card-body {
        padding: 0 !important;
        flex: 1 1 auto !important;
        width: 100%;
    }

    .mfl-feed-list .mfl-card-body {
        padding: 0;
    }

    .mfl-feed-list .mfl-card h3 {
        font-size: 1.05rem;
        line-height: 1.3;
    }

    .mfl-story-header,
    .mfl-story-body,
    .mfl-story-rail-module {
        padding: 1rem;
    }
}

/* -------------------------------------------------------------------------- */
/* Reference-Driven Design Pass (IndustryDive-inspired, MFL-branded)          */
/* -------------------------------------------------------------------------- */

.mfl-utility-inner {
    padding: 0.28rem 0;
}

.mfl-search input[type="search"] {
    width: min(192px, 36vw);
    border-radius: 0.25rem;
    padding: 0.29rem 0.5rem;
}

.mfl-btn,
.mfl-search button {
    border-radius: 0.28rem;
    padding: 0.31rem 0.62rem;
    font-size: 0.82rem;
}

.mfl-branding {
    padding: 0.4rem 0 0.46rem;
    gap: 0.9rem;
}

.mfl-logo {
    width: min(209px, 46vw);
}

.mfl-tagline {
    font-size: 0.78rem;
    max-width: 34ch;
}

.mfl-nav-list {
    gap: 0.18rem;
    padding: 0.25rem 0;
}

.mfl-nav-list a {
    font-size: 0.7rem;
    padding: 0.2rem 0.34rem;
    border-radius: 0.24rem;
}

.mfl-main {
    padding: 1.05rem 0 2.75rem;
}

.mfl-homepage {
    gap: 1.8rem;
}

.mfl-homepage .mfl-module {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}


/* -------------------------------------------------------------------------- */
/* Consolidated Theme Overrides (Phases 1-5)                                  */
/* -------------------------------------------------------------------------- */

/* Foundation */
.mfl-main {
    padding-top: 1rem;
}

body.home .mfl-main {
    padding-top: 0;
}

/* Homepage composition */
.mfl-homepage {
    gap: 1.8rem;
}

.mfl-homepage .mfl-home-hero {
    border-color: #d4dde2;
    border-radius: 0.3rem;
    padding: 1rem 1.05rem;
    gap: 1rem;
}

.mfl-home-lead-layout {
    grid-template-columns: minmax(0, 1.52fr) minmax(0, 340px);
    gap: 0.95rem;
}

.mfl-home-lead-module {
    display: grid;
    /* minmax(0,...) so a wide child (hero img) can't inflate the track */
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
}

/* Bridge image: overlaps blue hero into white content area */
.mfl-home-bridge-layout {
    margin-top: -6rem;
    position: relative;
    z-index: 2;
}

.mfl-home-bridge-layout.mfl-home-lead-layout {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) !important;
    gap: 2rem !important;
    align-items: start;
}

@media (max-width: 860px) {
    .mfl-home-bridge-layout {
        margin-top: -3rem;
    }

    .mfl-home-bridge-layout.mfl-home-lead-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

.mfl-home-hero-image-bridge {
    min-width: 0;
}

.mfl-bridge-image {
    border-radius: 0.7rem;
    overflow: hidden;
    background: none !important;
}

.mfl-bridge-image img {
    border-radius: 0.7rem;
    display: block;
}

.mfl-home-hero-image-bridge .mfl-home-lead-media {
    background: none;
}

.mfl-home-lead-story {
    border-radius: 0.28rem;
    padding: 0.82rem 0.88rem 0.95rem;
}

.mfl-home-lead-story-no-media {
    gap: 0.48rem;
}

.mfl-home-lead-story h2 {
    font-size: clamp(1.62rem, 2.65vw, 2.05rem);
}

.mfl-home-lead-media {
    aspect-ratio: 3 / 2;
    margin: 0.08rem 0 0.26rem;
}

.mfl-home-perspectives {
    border: 1px solid var(--mfl-border);
    border-radius: 1rem;
    background: #ffffff;
    padding: 1.1rem 1.2rem;
    display: grid;
    align-content: start;
    gap: 0.48rem;
}

.mfl-home-latest-header {
    font-family: "Source Sans 3", "Segoe UI", sans-serif !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #3d6ba8 !important;
    margin: 0 0 0.5rem !important;
    padding-top: 0.5rem;
}

/* Full-width 3x2 article grid below lead section */
.mfl-home-lead-grid-full {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem 1.8rem;
    padding: 2rem 0 0;
    border-top: 1px solid var(--mfl-border);
    margin-top: 1.5rem;
}

.mfl-home-lead-grid-full .mfl-home-lead-grid-item {
    display: flex;
    flex-direction: column;
}

.mfl-home-lead-grid-full .mfl-grid-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    border-radius: 0.5rem;
    overflow: hidden;
    margin-bottom: 0.45rem;
    display: block;
}

.mfl-home-lead-grid-full .mfl-grid-thumb .mfl-media-fallback,
.mfl-home-lead-grid-full .mfl-grid-thumb .mfl-media-fallback-inner {
    width: 100%;
    height: 100%;
    display: block;
    box-sizing: border-box;
    border-radius: 0.5rem !important;
}

.mfl-home-lead-grid-full .mfl-grid-thumb img {
    border-radius: 0.75rem !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}

.mfl-home-lead-grid-full .mfl-home-lead-grid-item h3 {
    font-size: 1.35rem;
    line-height: 1.28;
    margin-bottom: 0.4rem;
}

.mfl-home-lead-grid-full .mfl-home-lead-grid-item p {
    font-size: 0.88rem;
    line-height: 1.48;
    color: var(--mfl-ink-muted);
}

.mfl-home-lead-grid-full .mfl-home-lead-grid-item h3 {
    font-size: 1.1rem;
}

@media (max-width: 860px) {
    .mfl-home-lead-grid-full {
        grid-template-columns: minmax(0, 1fr);
    }
}

.mfl-home-lead-grid-item {
    padding: 0.5rem 0;
}

.mfl-home-lead-grid-item h3 {
    margin: 0 0 0.35rem;
    font-size: 1.25rem;
    line-height: 1.3;
}

.mfl-grid-blurb-row {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
}

.mfl-grid-thumb {
    flex-shrink: 0;
    width: 160px;
    height: 120px;
    display: block;
    border-radius: 0.6rem;
    overflow: hidden;
}

.mfl-grid-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0.6rem;
}

.mfl-grid-blurb-row p {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 0.97rem;
    line-height: 1.5;
}

.mfl-home-lead-grid-item h3 a {
    color: var(--mfl-ink);
    text-decoration: none;
}

.mfl-home-lead-grid-item h3 a:hover {
    color: var(--mfl-brand);
}

.mfl-home-lead-grid-item .mfl-meta {
    font-size: 0.78rem;
    color: var(--mfl-ink-muted);
    margin: 0 0 0.3rem;
}

.mfl-home-lead-grid-item p:last-child {
    margin: 0;
}

/* Most Popular */
.mfl-home-trending {
    padding-bottom: 0.65rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--mfl-border);
}

.mfl-home-trending h2,
.mfl-home-feed-module h2,
.mfl-home-topic-module h2,
.mfl-home-more-stories h2,
.mfl-home-perspectives h2,
.mfl-home-resources-col h2,
.mfl-sidebar-section h3, .mfl-sidebar-section h2,
.mfl-archive-header h1 {
    font-family: "Source Sans 3", "Segoe UI", sans-serif !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em;
    color: #3d6ba8 !important;
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
}

.mfl-home-trending h2 {
    margin: 0 0 0.55rem;
}

.mfl-trending-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.mfl-trending-header-row h2 {
    margin-bottom: 0 !important;
}

.mfl-trending-tabs {
    display: flex;
    gap: 0.35rem;
}

.mfl-tab {
    position: relative;
    background: none;
    border: 0;
    border-radius: 0.45rem 0.45rem 0 0;
    padding: 0.35rem 0.6rem 0.45rem;
    font-family: var(--mfl-font-sans);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--mfl-ink-muted);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}
.mfl-tab::after {
    content: '';
    position: absolute;
    left: 0.4rem;
    right: 0.4rem;
    bottom: 0;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: #e26a26;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.18s ease;
}
.mfl-tab:hover {
    color: var(--mfl-ink);
    background: #e9f0f8;
}
.mfl-tab:hover::after { transform: scaleX(0.55); }
.mfl-tab.is-active {
    color: var(--mfl-ink);
    background: #fdeee3;
}
.mfl-tab.is-active::after { transform: scaleX(1); }

.mfl-trending-panel { display: none; }
.mfl-trending-panel.is-active { display: block; }

.mfl-trending-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: popular;
}

.mfl-trending-list li {
    counter-increment: popular;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--mfl-border);
    font-family: var(--mfl-font-serif, 'Source Serif 4', Georgia, serif);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.4;
    display: flex;
    /* extra lead-in so headlines clear the circle */
    gap: 1rem;
    /* Centred, not top-aligned. The rank circle is taller than a single line
       of headline, so flex-start left the number sitting above a one-line
       title with a visible gap beneath it. Most headlines here are one or two
       lines, and centring reads correctly for both. */
    align-items: center;
}

.mfl-trending-list li:last-child,
.mfl-trending-list li:nth-child(5) {
    border-bottom: none !important;
    border: none !important;
    padding-bottom: 0 !important;
}

/* Rank badge: hairline brand-orange circle with a light numeral.
   Pure CSS so it stays crisp at any size and adds no image weight. */
.mfl-trending-list li::before {
    content: counter(popular);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 2.43rem;
    height: 2.43rem;
    /* 1.25px keeps the hairline read at this diameter without
       vanishing the way a true 1px does when the circle grows. */
    border: 1.25px solid #e26a26;
    border-radius: 50%;
    font-family: 'Source Sans 3', 'Satoshi', system-ui, sans-serif;
    font-size: 1.21rem;
    font-weight: 500;
    line-height: 1;
    color: #e26a26;
    margin-top: 0.05rem;
}

.mfl-trending-list a {
    color: var(--mfl-ink);
    text-decoration: none;
    font-size: 1.01rem;
}

.mfl-trending-list a:hover { color: var(--mfl-brand); }

.mfl-home-perspectives .mfl-kicker {
    margin: 0;
}

.mfl-home-perspectives h2 {
    margin: 0;
}

.mfl-home-perspective-list {
    display: grid;
    gap: 0;
}

.mfl-home-perspective-card {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 0.74rem 0;
    border-top: 1px solid rgba(19, 32, 40, 0.1);
}

.mfl-home-perspective-card:first-child {
    border-top: 0;
}

.mfl-perspective-text {
    flex: 1;
    min-width: 0;
}

.mfl-perspective-text h3 {
    margin: 0 0 0.2rem;
    font-size: 1.48rem;
    line-height: 1.3;
}

.mfl-perspective-text h3 a {
    color: var(--mfl-ink);
    text-decoration: none;
}

.mfl-perspective-text h3 a:hover {
    color: var(--mfl-brand);
}

.mfl-story-topic a,
.mfl-taxonomy-line a {
    color: #ed8a4f;
    text-decoration: none;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Card meta row: content type (light blue) left of all topics, one line */
.mfl-story-topic-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0.85rem;
    margin-top: 0.45rem;
}
.mfl-story-topic-row .mfl-story-card-type {
    color: #2f6ab0;
    text-decoration: none;
    font-size: 0.56rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.mfl-story-topic-row a { font-size: 0.56rem; }
.mfl-story-topic-row a.mfl-story-card-type::before { display: none; }
.mfl-story-topic-row .mfl-story-card-type:hover { color: #3d6ba8; }

.mfl-story-topic a::before,
.mfl-taxonomy-line a::before {
    content: '';
    display: inline-block;
    width: 0.7em;
    height: 0.7em;
    margin-right: 0.3em;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z'/%3E%3Ccircle cx='7' cy='7' r='1'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z'/%3E%3Ccircle cx='7' cy='7' r='1'/%3E%3C/svg%3E") no-repeat center;
    vertical-align: -0.05em;
}

.mfl-story-topic a:hover,
.mfl-taxonomy-line a:hover {
    color: #e26a26;
}

.mfl-story-topic,
.mfl-taxonomy-line {
    margin: 0 0 0.3rem;
}

.mfl-perspective-byline {
    margin: 0;
    font-size: 0.95rem;
    color: var(--mfl-ink-muted);
    font-style: italic;
}

.mfl-home-perspective-avatar-image {
    width: 7.35rem;
    height: 7.35rem;
    border-radius: 999px;
    border: 2px solid rgba(226, 106, 38, 0.25);
    object-fit: cover;
    background: #ffffff;
    flex: 0 0 auto;
    box-sizing: border-box;
}

.mfl-home-perspective-avatar-placeholder {
    width: 7.35rem;
    height: 7.35rem;
    font-size: 2rem;
    border-radius: 999px;
    border: 2px solid rgba(226, 106, 38, 0.25);
    background: #ffffff;
    color: transparent;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-sizing: border-box;
}

.mfl-home-perspective-name {
    display: inline-block;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

.mfl-home-perspective-card h3 {
    margin: 0;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 1.48rem;
    line-height: 1.3;
}

.mfl-home-perspective-card h3 a {
    color: var(--mfl-ink);
}

.mfl-home-perspective-card h3 a:hover,
.mfl-home-perspective-card h3 a:focus {
    color: var(--mfl-brand);
}

.mfl-home-lane-grid,
.mfl-home-topic-grid {
    gap: 0.78rem;
}

.mfl-home-topic-module {
    display: grid;
    gap: 0.72rem;
}

.mfl-lane-card {
    border: 1px solid #d7e0e5;
    border-radius: 0.26rem;
    padding: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    box-shadow: 0 1px 4px rgba(0, 17, 43, 0.08);
}

.mfl-lane-card .mfl-kicker {
    padding: 0.52rem 0.68rem 0;
}

.mfl-lane-card-media {
    margin-top: 0.34rem;
    border-radius: 1rem;
    aspect-ratio: 3 / 2;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.mfl-lane-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mfl-lane-card-media-mock {
    display: block;
    background: linear-gradient(140deg, #d5e8f4 0%, #b9d6e8 52%, #9cc5dd 100%);
}

.mfl-lane-card-content {
    padding: 0.6rem 0.68rem 0.72rem;
    display: grid;
    gap: 0.28rem;
    min-width: 0;
}

.mfl-lane-card .mfl-kicker,
.mfl-lane-card .mfl-kicker a,
.mfl-lane-card-content h3,
.mfl-lane-card-content p {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.mfl-lane-card-content .mfl-meta {
    font-size: 0.75rem;
}

.mfl-lane-card-content p:last-child {
    margin: 0;
    font-size: 0.87rem;
    line-height: 1.45;
}

.mfl-home-feed-module {
    padding: 0.72rem 0.8rem;
}

.mfl-home-feed-module .mfl-kicker {
    margin-bottom: 0.2rem;
}

.mfl-home-feed-module h2 {
    margin: 0;
}

.mfl-home-compact-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mfl-home-compact-list-item {
    border-top: 1px solid var(--mfl-border);
    padding: 0.66rem 0;
}

.mfl-home-compact-list-item:first-child {
    border-top: 0;
}

.mfl-home-compact-list-item h3 {
    margin: 0;
    font-size: 0.96rem;
    line-height: 1.24;
}

.mfl-home-compact-list-item .mfl-meta {
    margin-top: 0.16rem;
    font-size: 0.74rem;
}

.mfl-card-list-featured {
    gap: 0;
}

.mfl-card-list-featured .mfl-card {
    border: 0;
    border-top: 1px solid var(--mfl-border);
    border-radius: 0;
    background: transparent;
    padding: 0.78rem 0;
}

.mfl-card-list-featured .mfl-card:first-child {
    border-top: 0;
}

.mfl-card-list-featured .mfl-card-has-image {
    display: grid;
    grid-template-columns: minmax(0, 132px) minmax(0, 1fr);
    gap: 0.72rem;
}

.mfl-card-list-featured .mfl-card-media {
    border-radius: 0.26rem;
    aspect-ratio: 4 / 3;
}

.mfl-card-list-featured .mfl-card-has-image .mfl-card-body {
    padding: 0;
}

.mfl-card-kicker {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--mfl-brand);
    font-size: 0.62rem;
    font-weight: 700;
}

.mfl-card-list-featured .mfl-card h3 {
    margin: 0.1rem 0 0.2rem;
    font-size: 1rem;
}

.mfl-home-feed-module .mfl-card-list-featured .mfl-card {
    padding: 0.66rem 0;
}

.mfl-home-feed-module .mfl-card-list-featured .mfl-card-has-image {
    grid-template-columns: minmax(0, 116px) minmax(0, 1fr);
    gap: 0.62rem;
}

.mfl-home-feed-module .mfl-card-list-featured .mfl-card-media {
    aspect-ratio: 3 / 2;
}

.mfl-home-feed-module .mfl-card-list-featured .mfl-card h3 {
    font-size: 0.96rem;
    line-height: 1.2;
}

.mfl-home-feed-module .mfl-card .mfl-meta {
    font-size: 0.74rem;
}

.mfl-home-feed-module .mfl-card .mfl-taxonomy-line {
    display: block;
    margin-top: 0.4rem;
}

/* Archive density and filter hierarchy */
.mfl-archive-shell {
    gap: 0.8rem;
}

.mfl-archive-header {
    border-radius: 1rem;
    padding: 0.65rem 1.1rem 0.7rem;
}

.mfl-archive-header h1 {
    margin: 0;
    font-size: clamp(1.4rem, 2.4vw, 1.8rem);
}

.mfl-archive-description {
    margin: 0;
    color: #394a54;
    max-width: 76ch;
    font-size: 0.97rem;
}

/* Title row: h1 + inline meta */
.mfl-archive-title-row {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.mfl-archive-meta-inline {
    font-size: 0.78rem;
    color: #485a65;
    font-weight: 400;
    white-space: nowrap;
}

.mfl-archive-meta-sep {
    margin: 0 0.2rem;
    opacity: 0.5;
}

.mfl-archive-summary {
    display: none;
}

.mfl-archive-summary p {
    margin: 0;
}

.mfl-archive-filter-indicator {
    border: 1px solid #b8ced9;
    border-radius: 999px;
    background: #edf4f8;
    color: #0b5e75;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 0.08rem 0.48rem;
    text-transform: uppercase;
}

.mfl-filter-form {
    margin-top: 0.56rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.46rem 0.55rem;
    border-radius: 0.24rem;
    background: #f3f7fa;
    border-color: #d8e2e8;
    padding: 0.54rem 0.58rem;
}

.mfl-filter-group {
    display: grid;
    gap: 0.15rem;
}

.mfl-filter-group label {
    font-size: 0.69rem;
    letter-spacing: 0.055em;
}

.mfl-filter-group select {
    min-width: 154px;
    border-radius: 2rem;
    font-size: 0.85rem;
    padding: 0.32rem 0.7rem;
}

.mfl-filter-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
}

.mfl-filter-form button {
    border-radius: 2rem;
    font-size: 0.8rem;
    padding: 0.34rem 0.58rem;
    min-height: 34px;
}

.mfl-filter-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    border: 1px solid #bfd1dc;
    border-radius: 0.24rem;
    color: #1f3b49;
    font-size: 0.79rem;
    font-weight: 700;
    padding: 0.3rem 0.54rem;
    text-decoration: none;
}

.mfl-filter-reset:hover,
.mfl-filter-reset:focus {
    background: #e8f1f6;
    color: #0b5e75;
    text-decoration: none;
}

.mfl-archive-results {
    display: grid;
    gap: 0.34rem;
}

.mfl-archive-results-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.mfl-archive-results-head h2 {
    margin: 0;
    font-size: 1.18rem;
    font-family: "Source Serif 4", Georgia, serif;
}

.mfl-feed-list {
    gap: 0;
    border-radius: 0.26rem;
    padding: 0 0.9rem;
    align-content: start;
}

.mfl-archive-results {
    align-self: start;
}

.mfl-feed-list .mfl-card {
    padding: 0.76rem 0;
}

.mfl-feed-list .mfl-card:first-child {
    border-top: 0;
}

.mfl-feed-list .mfl-card-has-image {
    grid-template-columns: minmax(0, 188px) minmax(0, 1fr);
    gap: 0.74rem;
}

.mfl-feed-list .mfl-card-media {
    aspect-ratio: 16 / 9;
}

.mfl-feed-list .mfl-card h3 {
    font-size: clamp(1.01rem, 1.55vw, 1.16rem);
    line-height: 1.2;
    margin: 0.05rem 0 0.16rem;
}

.mfl-feed-list .mfl-card .mfl-meta {
    font-size: 0.75rem;
}

.mfl-feed-list .mfl-card .mfl-taxonomy-line {
    display: block;
    margin: 0 0 0;
    line-height: 1.2;
}

.mfl-feed-list .mfl-card-body > p:not(.mfl-meta):not(.mfl-taxonomy-line) {
    margin-bottom: 0.15rem;
}

.mfl-feed-list .mfl-card-body > p:last-child {
    font-size: 0.9rem;
    line-height: 1.45;
}

/* Article layout and utility rail */
.mfl-story-layout {
    display: grid;
    align-items: start;
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: 1.5rem;
}

.mfl-story-main {
    border-radius: 1rem;
}

.mfl-story-header {
    padding: 0.9rem 1rem 0.76rem;
}

.mfl-story-path {
    margin-bottom: 0.34rem;
    font-size: 0.62rem;
}

.mfl-story-path a {
    color: var(--mfl-ink-muted);
}

.mfl-story-path a:hover,
.mfl-story-path a:focus {
    color: var(--mfl-brand);
}

.mfl-story-header h1 {
    margin: 0.14rem 0 0.26rem;
    font-size: clamp(1.92rem, 3.1vw, 2.34rem);
    line-height: 1.08;
}

.mfl-story-subhead {
    margin: 0 0 0.7rem;
    color: var(--mfl-ink-muted);
    font-size: 1.08rem;
    line-height: 1.45;
}

.mfl-story-event-meta {
    margin: 0 0 0.48rem;
    color: var(--mfl-brand-strong);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mfl-story-header .mfl-meta {
    font-size: 0.75rem;
}

.mfl-story-header .mfl-taxonomy-line {
    font-size: 0.73rem;
}

.mfl-story-standfirst {
    margin-top: 0.54rem;
    font-size: 1.02rem;
    line-height: 1.56;
}

.mfl-story-featured-media {
    border-top: none;
    border-bottom: none;
    padding: 0;
    overflow: hidden;
    border-radius: 1rem;
}

.mfl-story-featured-media img {
    aspect-ratio: 16 / 9;
    display: block;
    width: 100%;
    height: auto;
}

.mfl-story-featured-media img {
    transition: transform 0.3s ease;
}

.mfl-story-featured-media:hover img {
    transform: scale(1.04);
}

.mfl-story-featured-credit {
    display: block;
    margin: 0.5rem 0 0;
    padding: 0 0.8rem 0 0;
    font-size: 0.78rem;
    font-style: italic;
    color: #6f7c8b;
    text-align: right;
    overflow: visible;
    white-space: normal;
    box-sizing: border-box;
}
.mfl-story-featured-credit-label {
    font-style: normal;
    font-weight: 700;
    color: #3d6ba8;
    margin-right: 0.2rem;
}
.mfl-story-featured-caption {
    display: block;
    margin: 0.6rem 0 0.15rem;
    padding: 0 0.2rem;
    font-size: 0.92rem;
    font-style: normal;
    line-height: 1.4;
    color: var(--mfl-ink, #00112b);
}
/* Inline media captions inside the article body — WP-native [caption]
   shortcode and Gutenberg Image block. Match the featured caption style. */
.mfl-story-body .wp-caption-text,
.mfl-story-body figure.wp-block-image figcaption {
    display: block;
    margin: 0.5rem 0 1rem;
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--mfl-ink, #00112b);
    text-align: left;
}
/* Wrap only the image in an overflow-clipping frame so the figcaption
   below is never clipped by the hover-zoom's overflow:hidden. */
.mfl-story-featured-media {
    overflow: visible !important;
    border-radius: 0 !important;
    display: block !important;
    background: transparent !important;
    align-items: initial !important;
    justify-content: initial !important;
}
.mfl-story-featured-media-frame {
    display: block;
    overflow: hidden;
    border-radius: 1rem;
    background: #ffffff;
    border: none;
    box-sizing: border-box;
}
.mfl-story-featured-media-frame img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 0.3s ease;
    transform-origin: center;
}
.mfl-story-featured-media:hover .mfl-story-featured-media-frame img {
    transform: scale(1.04);
}

.mfl-source-note {
    margin: 1.4rem 0 0.6rem;
    padding: 0.7rem 0.9rem;
    font-size: 0.78rem;
    font-style: italic;
    line-height: 1.5;
    color: #6f7c8b;
    background: #faf8f5;
    border-left: 3px solid #e0e6ec;
    border-radius: 0.35rem;
}

.mfl-meta a[rel="author"],
.mfl-story-meta-row .mfl-meta a[rel="author"] {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(61, 107, 168, 0.35);
    text-underline-offset: 2px;
}
.mfl-meta a[rel="author"]:hover,
.mfl-story-meta-row .mfl-meta a[rel="author"]:hover {
    color: #3d6ba8;
    text-decoration-color: currentColor;
}

.mfl-author-header {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1rem;
    background: #ffffff;
    border: 1px solid var(--mfl-border, #e0e6ec);
    border-radius: 1rem;
}
.mfl-author-header-avatar img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    display: block;
}
.mfl-author-header-meta { flex: 1; min-width: 0; }
.mfl-author-header-meta h1 {
    margin: 0.15rem 0 0.1rem;
    font-size: 1.6rem;
    line-height: 1.15;
}
.mfl-author-header-role {
    margin: 0 0 0.4rem;
    font-size: 0.9rem;
    color: #6f7c8b;
    font-weight: 600;
}
.mfl-author-header-bio {
    margin: 0;
    font-size: 0.94rem;
    line-height: 1.5;
    color: #2c3e50;
}
@media (max-width: 640px) {
    .mfl-author-header { flex-direction: column; align-items: center; text-align: center; }
}

.mfl-story-share {
    display: grid;
    gap: 0.78rem;
    padding: 0.86rem 1rem 1rem;
    background: linear-gradient(135deg, rgba(61, 107, 168, 0.1) 0%, rgba(226, 106, 38, 0.17) 100%);
}

.mfl-story-share-intro {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem 0.8rem;
}

.mfl-story-share-kicker {
    margin: 0;
}

.mfl-story-share-note {
    margin: 0;
    color: var(--mfl-ink-muted);
    font-size: 0.83rem;
    line-height: 1.4;
}

.mfl-story-share-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.52rem;
}

.mfl-story-share-item {
    position: relative;
    display: flex;
}

.mfl-story-share-item .mfl-story-share-action {
    width: 100%;
}

.mfl-story-share-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 2.9rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--mfl-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--mfl-brand);
    box-shadow: 0 10px 18px rgba(3, 22, 36, 0.08);
    font: inherit;
    font-size: 0.87rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.mfl-story-share-action:hover,
.mfl-story-share-action:focus {
    border-color: var(--mfl-accent);
    background: var(--mfl-surface);
    color: var(--mfl-brand-strong);
    box-shadow: 0 14px 24px rgba(3, 22, 36, 0.11);
    transform: translateY(-1px);
    text-decoration: none;
}

.mfl-story-share-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: rgba(61, 107, 168, 0.12);
    color: var(--mfl-brand);
    flex: 0 0 auto;
}

.mfl-story-share-action-icon svg {
    width: 1rem;
    height: 1rem;
}

.mfl-story-share-action-text {
    white-space: nowrap;
}

.mfl-story-share-copy.is-copied {
    border-color: var(--mfl-accent);
    background: var(--mfl-accent);
    color: var(--mfl-button-ink);
}

.mfl-story-share-copy.is-copy-error {
    border-color: rgba(143, 31, 31, 0.38);
    background: rgba(143, 31, 31, 0.08);
    color: var(--mfl-danger);
}

.mfl-story-share-copy.is-copied .mfl-story-share-action-icon,
.mfl-story-share-copy.is-copy-error .mfl-story-share-action-icon {
    background: rgba(255, 255, 255, 0.52);
    color: inherit;
}

.mfl-story-body {
    padding: 0.9rem 1rem 1.08rem;
}

.mfl-story-body p {
    margin-bottom: 0.96rem;
    font-size: 0.99rem;
    line-height: 1.68;
}

.mfl-story-body > p:first-child {
    font-size: 1.05rem;
}

/* Resource page: cover image floated right, ebook style */
.mfl-resource-cover-float {
    float: right;
    width: 200px;
    margin: 0 0 1rem 1.5rem;
    border-radius: 2px 5px 5px 2px;
    overflow: hidden;
    box-shadow: 5px 5px 18px rgba(0, 17, 43, 0.25), 0 2px 4px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(0, 0, 0, 0.06);
    position: relative;
}

/* Spine edge */
.mfl-resource-cover-float::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(0,0,0,0.12) 100%);
    z-index: 2;
    pointer-events: none;
}

/* Subtle sheen across cover */
.mfl-resource-cover-float::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 50%, rgba(0,0,0,0.04) 100%);
    z-index: 1;
    pointer-events: none;
}

.mfl-resource-cover-img {
    width: 100%;
    height: auto;
    aspect-ratio: 8.5 / 11;
    object-fit: cover;
    display: block;
    border-radius: 2px 5px 5px 2px;
}

.mfl-story-body-resource::after {
    content: "";
    display: table;
    clear: both;
}

/* Resource PDF gate form */
.mfl-resource-pdf-gate {
    clear: both;
    margin-top: 2rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #ffefe4 0%, #ffdec5 100%);
    border: 1px solid rgba(226, 106, 38, 0.22);
    border-radius: 1rem;
}

.mfl-resource-pdf-gate-inner h3, .mfl-resource-pdf-gate-inner h2 {
    margin: 0 0 0.25rem;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--mfl-ink);
}

.mfl-resource-pdf-gate-inner > p {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: var(--mfl-ink-muted);
}

.mfl-resource-pdf-form .mfl-pdf-form-row {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.mfl-resource-pdf-form input[type="text"],
.mfl-resource-pdf-form input[type="tel"],
.mfl-resource-pdf-form input[type="email"] {
    flex: 1;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--mfl-border);
    border-radius: 0.5rem;
    font-family: var(--mfl-font-sans);
    font-size: 0.88rem;
    background: #ffffff;
    color: var(--mfl-ink);
    transition: border-color 0.15s ease;
}

.mfl-resource-pdf-form input:focus {
    outline: none;
    border-color: #e26a26;
    box-shadow: 0 0 0 3px rgba(226,106,38,0.15);
}

.mfl-resource-pdf-form .mfl-btn {
    margin-top: 0.25rem;
}

@media (max-width: 600px) {
    .mfl-resource-cover-float {
        float: none;
        width: 140px;
        margin: 0 auto 1rem;
    }
    .mfl-resource-pdf-form .mfl-pdf-form-row {
        flex-direction: column;
    }
}

.mfl-story-rail {
    display: grid;
    position: sticky;
    gap: 0.68rem;
    top: 0.8rem;
}

.mfl-story-rail-module {
    border-radius: 1rem;
    padding: 0.7rem;
}

.mfl-story-rail-module .mfl-kicker {
    margin-bottom: 0.1rem;
}

.mfl-story-rail-module-newsletter .mfl-newsletter-cta {
    border-radius: 0.24rem;
    padding: 0.82rem;
}

.mfl-story-rail-module-related h2 {
    margin: 0.12rem 0 0.24rem;
    font-size: 1.04rem;
}

.mfl-story-rail-note {
    margin: 0;
    color: #4a5b66;
    font-size: 0.81rem;
    line-height: 1.4;
}

.mfl-story-rail-list {
    margin-top: 0.42rem;
}

.mfl-story-rail-list .mfl-card {
    padding: 0.56rem 0;
}

.mfl-story-rail-list .mfl-card-has-image {
    grid-template-columns: minmax(0, 100px) minmax(0, 1fr);
    gap: 0.52rem;
}

.mfl-story-rail-list .mfl-card-media {
    aspect-ratio: 4 / 3;
    border-radius: 0.2rem;
}

.mfl-story-rail-list .mfl-card-body {
    gap: 0.24rem;
}

.mfl-story-rail-list .mfl-card h3 {
    margin: 0;
    font-size: 0.89rem;
    line-height: 1.2;
}

.mfl-story-rail-list .mfl-card .mfl-meta {
    font-size: 0.68rem;
}

.mfl-story-rail-list .mfl-card .mfl-label {
    padding: 0.1rem 0.36rem;
    font-size: 0.61rem;
}

/* Typography, labels, ads, footer polish */
.mfl-module h2,
.mfl-module h3 {
    line-height: 1.16;
    letter-spacing: -0.01em;
}

.mfl-kicker {
    letter-spacing: 0.075em;
    font-size: 0.62rem;
}

.mfl-meta,
.mfl-taxonomy-line {
    font-size: 0.74rem;
    line-height: 1.42;
}

.mfl-card h3,
.mfl-feed-list .mfl-card h3 {
    line-height: 1.18;
}

.mfl-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-height: 1.3rem;
    padding: 0.08rem 0.46rem;
    border-width: 1px;
    border-style: solid;
    border-radius: 999px;
    font-size: 0.62rem;
    letter-spacing: 0.05em;
    font-weight: 700;
}

.mfl-label-editorial {
    background: #d9ebf4;
    border-color: #94bac8;
    color: #0b4658;
}

.mfl-label-sponsored {
    background: #ffe4e9;
    border-color: #d595a0;
    color: #8e2432;
}

.mfl-label-press-release {
    background: #fff5d4;
    border-color: #ccaf67;
    color: #6d5200;
}

.mfl-ad-slot {
    border-style: solid;
    border-color: #d6e0e6;
    border-radius: 0.3rem;
    background: #f7fafc;
    padding: 0.56rem 0.64rem;
    margin: 0.64rem 0 0.74rem;
}

.mfl-ad-title {
    display: inline-block;
    margin: 0 0 0.25rem;
    color: #5a6c77;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mfl-ad-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.22rem;
    margin: 0;
    font-size: 0.79rem;
}

.mfl-ad-format {
    color: #1d333e;
}

.mfl-ad-divider {
    color: #7e929d;
}

.mfl-ad-slot-id {
    color: #4f6470;
}

.mfl-footer-inner {
    padding: 1rem 0 1rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.4rem;
}

.mfl-footer-column {
    min-width: 0;
}

.mfl-footer h3 {
    margin: 0 0 0.62rem;
    /* Sans + the brand blue used in homepage headers, not the inherited serif
       (Eric: the footer column headings looked off-brand). */
    font-family: var(--mfl-font-sans);
    font-size: 0.79rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    color: #3d6ba8;
}

.mfl-footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.36rem;
    font-size: 0.9rem;
}

.mfl-footer-list a {
    display: inline-block;
    padding: 0.05rem 0;
    color: var(--mfl-brand);
}

/* Footer social icons */
.mfl-footer-social {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.mfl-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: rgba(0, 17, 43, 0.06);
    color: #043962;
    transition: background 0.2s ease, color 0.2s ease;
}

.mfl-social-icon:hover,
.mfl-social-icon:focus-visible {
    background: #3d6ba8;
    color: #ffffff;
}

/* Compact chip for the header row, which sits on the white shell. Same brand
   treatment as the footer, scaled down: the icon-to-chip ratio is kept so the
   two read as one family rather than two different buttons. */
.mfl-social-icon-sm {
    width: 1.7rem;
    height: 1.7rem;
}

/* Footer bottom: legal + privacy/terms */
.mfl-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--mfl-border);
    padding: 0.7rem 0 0.96rem;
    gap: 1rem;
}

.mfl-footer-legal {
    margin: 0;
    font-size: 0.72rem;
    color: var(--mfl-ink-muted);
}

/* Parent-brand credit above the copyright row. The wordmark is inline SVG
   filled with currentColor, so it reads at the same weight as the words on
   either side of it, and is sized in em so it tracks the line at every
   breakpoint instead of needing its own media queries. */
.mfl-parent-brand {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.45em;
    margin: 0;
    padding: 0.1rem 0 0.9rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mfl-ink-muted);
    opacity: 0.75;
}

.mfl-parent-brand-mark {
    display: inline-flex;
    align-items: center;
    /* The wordmark opens on the flat side of the M, so the shared flex gap
       reads tighter on the left than it does where the mark meets MEDIA.
       A little extra lead-in evens the line out optically. */
    margin-left: 0.4em;
}

.mfl-parent-brand-mark svg {
    display: block;
    height: 1.5em;
    width: auto;
}

.mfl-footer-legal-links {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.mfl-footer-legal-links a {
    font-size: 0.72rem;
    color: var(--mfl-ink-muted);
    text-decoration: none;
}

.mfl-footer-legal-links a:hover {
    color: var(--mfl-brand);
}

.mfl-footer-legal-links span {
    color: var(--mfl-ink-muted);
    font-size: 0.72rem;
}

@media (max-width: 640px) {
    .mfl-footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 0.3rem;
    }
}

/* Contact form */
.mfl-contact-form {
    max-width: 600px;
    margin-top: 1.5rem;
}

.mfl-form-row {
    margin-bottom: 1rem;
}

.mfl-form-row label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #043962;
    margin-bottom: 0.3rem;
}

.mfl-form-row input[type="text"],
.mfl-form-row input[type="email"],
.mfl-form-row select,
.mfl-form-row textarea {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--mfl-border);
    border-radius: 0.5rem;
    font-family: inherit;
    font-size: 0.92rem;
    color: var(--mfl-ink);
}

.mfl-form-row textarea {
    resize: vertical;
}

.mfl-form-row input[type="file"] {
    font-size: 0.85rem;
}

.mfl-form-row-half {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 640px) {
    .mfl-form-row-half {
        grid-template-columns: 1fr;
    }
}

/* Responsive consolidated overrides */
@media (max-width: 1080px) {
    .mfl-home-lead-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 980px) {
    .mfl-story-layout {
        grid-template-columns: 1fr;
        gap: 0.9rem;
    }

    .mfl-story {
        width: min(100%, var(--mfl-content-width));
    }

    .mfl-story-rail {
        width: min(100%, var(--mfl-content-width));
        margin-inline: auto;
        position: static;
    }

    .mfl-story-rail-list .mfl-card-has-image {
        grid-template-columns: minmax(0, 92px) minmax(0, 1fr);
    }

    .mfl-footer-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mfl-story-share-action,
    .mfl-story-share-item {
        flex: 1 1 calc(50% - 0.52rem);
    }
}

@media (max-width: 940px) {
    .mfl-filter-actions {
        margin-left: 0;
    }

    .mfl-feed-list .mfl-card-has-image {
        grid-template-columns: minmax(0, 162px) minmax(0, 1fr);
    }
}

@media (max-width: 860px) {
    .mfl-has-js .mfl-header {
        position: sticky;
        top: 0;
    }

    .mfl-has-js .mfl-mobile-bar {
        display: flex;
    }

    /* Mobile menu handled by earlier 860px block */

    .mfl-home-perspectives {
        padding: 0.68rem 0.72rem;
    }
}

@media (max-width: 680px) {
    .mfl-home-hero {
        padding: 0.86rem;
    }

    .mfl-home-perspectives {
        padding: 0.62rem 0.64rem;
    }

    .mfl-home-perspective-avatar-image {
        width: 5rem;
        height: 5rem;
    }

    .mfl-home-perspective-avatar-placeholder {
        width: 5rem;
        height: 5rem;
    }

    .mfl-home-lane-grid--content-types {
        grid-template-columns: 1fr;
    }

    .mfl-lane-card-content {
        padding: 0.55rem 0.62rem 0.68rem;
    }

    .mfl-home-feed-module .mfl-card-list-featured .mfl-card-has-image {
        grid-template-columns: 1fr;
        gap: 0.56rem;
    }

    .mfl-archive-header {
        padding: 0.74rem;
    }

    .mfl-filter-form {
        display: grid;
        gap: 0.45rem;
        padding: 0.54rem;
    }

    .mfl-filter-group {
        width: 100%;
    }

    .mfl-filter-group select {
        width: 100%;
        min-width: 0;
    }

    .mfl-filter-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .mfl-feed-list {
        padding: 0 0.72rem;
    }

    .mfl-feed-list .mfl-card-has-image {
        grid-template-columns: 1fr;
        gap: 0.56rem;
    }

    .mfl-story-header,
    .mfl-story-body,
    .mfl-story-rail-module {
        padding-left: 0.86rem;
        padding-right: 0.86rem;
    }

    .mfl-story-share {
        padding-inline: 0.86rem;
    }

    .mfl-story-share-intro {
        display: grid;
        justify-content: start;
    }

    .mfl-story-share-action,
    .mfl-story-share-item {
        flex-basis: 100%;
    }

    .mfl-story-header h1 {
        font-size: clamp(1.6rem, 8vw, 2rem);
    }

    .mfl-story-featured-media img {
        aspect-ratio: 16 / 9;
    }

    .mfl-story-rail-list .mfl-card-has-image {
        grid-template-columns: minmax(0, 84px) minmax(0, 1fr);
    }

    .mfl-footer {
        margin-top: 1.7rem;
    }

    .mfl-footer-inner {
        grid-template-columns: 1fr;
        gap: 1.05rem;
    }
}

/* -------------------------------------------------------------------------- */
/* Logo-palette token alignment and dark mode switch                          */
/* -------------------------------------------------------------------------- */

:root {
    --mfl-font-sans: "Satoshi", "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
    --mfl-font-serif: "Source Serif 4", Georgia, serif;

    /* Logo-derived palette */
    --mfl-primary: #3d6ba8;
    --mfl-primary-strong: #00112b;
    --mfl-callout: #e26a26;
    --mfl-accent-alt: #e26a26;
    --mfl-accent-bright: #e26a26;
    --mfl-editorial-haze: rgba(61, 107, 168, 0.14);
    --mfl-dive-grey-1: #f4fbff;
    --mfl-neutral-900: #00112b;
    --mfl-neutral-700: #1e2d44;
    --mfl-neutral-500: #586374;
    --mfl-neutral-300: #a7dcfc;
    --mfl-white: #ffffff;

    --mfl-bg: var(--mfl-dive-grey-1);
    --mfl-surface: var(--mfl-white);
    --mfl-surface-alt: #eef9ff;
    --mfl-ink: var(--mfl-neutral-900);
    --mfl-ink-muted: var(--mfl-neutral-500);
    --mfl-brand: #00112b;
    --mfl-brand-strong: var(--mfl-primary-strong);
    --mfl-accent: var(--mfl-callout);
    --mfl-border: #f0b98a;
    --mfl-sponsored: var(--mfl-accent-alt);
    --mfl-press: var(--mfl-primary-strong);
    --mfl-success: #1f6f45;
    --mfl-danger: #8f1f1f;
    --mfl-shadow: 0 6px 18px rgba(3, 22, 36, 0.08);
    --mfl-max-width: 1280px;
    --mfl-content-width: 735px;
    --mfl-metadata-ink: var(--mfl-neutral-700);
    --mfl-kicker-ink: var(--mfl-primary-strong);

    --mfl-button-ink: #00112b;
    --mfl-button-hover-bg: var(--mfl-accent-alt);
    --mfl-button-hover-ink: #00112b;

    --mfl-header-bg-start: var(--mfl-primary-strong);
    --mfl-header-bg-end: var(--mfl-primary);
    --mfl-header-ink: #ffffff;
    --mfl-header-border: rgba(255, 255, 255, 0.22);
    --mfl-header-control-bg: rgba(0, 17, 43, 0.28);
    --mfl-header-control-border: rgba(255, 255, 255, 0.46);
    --mfl-header-control-placeholder: rgba(255, 255, 255, 0.8);

    --mfl-label-editorial-bg: rgba(61, 107, 168, 0.14);
    --mfl-label-editorial-border: #3d6ba8;
    --mfl-label-editorial-ink: #00112b;
    --mfl-label-sponsored-bg: rgba(226, 106, 38, 0.18);
    --mfl-label-sponsored-border: #e26a26;
    --mfl-label-sponsored-ink: #00112b;
    --mfl-label-press-bg: rgba(226, 106, 38, 0.18);
    --mfl-label-press-border: #e26a26;
    --mfl-label-press-ink: #00112b;

}

body {
    background: var(--mfl-bg);
    color: var(--mfl-ink);
    font-family: var(--mfl-font-sans);
}

h1,
h2,
h3,
h4,
h5,
h6,
.mfl-module h2,
.mfl-module h3,
.mfl-story h1,
.mfl-story h2,
.mfl-story h3,
.mfl-card h3 {
    font-family: var(--mfl-font-serif);
}

a {
    color: var(--mfl-brand);
}

a:hover,
a:focus {
    color: var(--mfl-brand-strong);
}

.mfl-header {
    color: var(--mfl-header-ink);
    background: linear-gradient(128deg, #1a3a5e 0%, #3d6ba8 100%);
    border-bottom: none;
    position: relative;
    z-index: 30;
}

.mfl-branding {
    background: var(--mfl-surface);
}

.mfl-header-shell {
    background: var(--mfl-surface);
    color: var(--mfl-ink);
}

.mfl-branding .mfl-tagline {
    color: var(--mfl-ink-muted);
}

.mfl-header-shell .mfl-utility,
.mfl-header-shell .mfl-nav {
    border-color: transparent;
}

.mfl-header-shell .mfl-tagline,
.mfl-header-shell .mfl-nav-list a,
.mfl-header-shell .mfl-mobile-nav-toggle {
    color: var(--mfl-ink);
}

.mfl-header-shell .mfl-nav-list a {
    color: var(--mfl-primary-strong);
}

.mfl-header-shell .mfl-nav-list a:hover,
.mfl-header-shell .mfl-nav-list a:focus,
.mfl-header-shell .mfl-mobile-nav-toggle:hover,
.mfl-header-shell .mfl-mobile-nav-toggle:focus {
    background: var(--mfl-surface-alt);
}

.mfl-header-shell .mfl-nav-list a:hover,
.mfl-header-shell .mfl-nav-list a:focus {
    color: var(--mfl-primary-strong);
    background: var(--mfl-editorial-haze);
}

.mfl-header-shell .current-menu-item > a,
.mfl-header-shell .current-menu-ancestor > a,
.mfl-header-shell .current_page_item > a {
    color: var(--mfl-primary-strong);
    background: var(--mfl-editorial-haze);
}

.mfl-header-shell .mfl-mobile-nav-toggle {
    border-color: var(--mfl-border);
    background: var(--mfl-surface);
}

.mfl-header-shell .mfl-search input[type="search"] {
    border-color: var(--mfl-border);
    background: var(--mfl-surface);
    color: var(--mfl-ink);
}

.mfl-header-shell .mfl-search input[type="search"]::placeholder {
    color: var(--mfl-ink-muted);
}

.mfl-utility {
    border-bottom: none;
}

.mfl-nav {
    border-top: none;
}

.mfl-header-shell .mfl-nav-list a {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.mfl-tagline,
.mfl-nav-list a,
.mfl-mobile-nav-toggle {
    color: var(--mfl-header-ink);
}

.mfl-mobile-nav-toggle {
    border-color: var(--mfl-header-control-border);
}

.mfl-mobile-nav-toggle:hover,
.mfl-mobile-nav-toggle:focus,
.mfl-nav-list a:hover,
.mfl-nav-list a:focus {
    background: rgba(255, 255, 255, 0.14);
}

.mfl-search input[type="search"] {
    border-color: var(--mfl-header-control-border);
    background: var(--mfl-header-control-bg);
    color: var(--mfl-header-ink);
}

.mfl-search input[type="search"]::placeholder {
    color: var(--mfl-header-control-placeholder);
}

.mfl-btn,
.mfl-btn:visited,
.mfl-search button {
    background: var(--mfl-accent);
    color: var(--mfl-button-ink);
    border-color: transparent;
    text-decoration: none;
}

.mfl-btn:hover,
.mfl-btn:focus,
.mfl-search button:hover,
.mfl-search button:focus {
    background: var(--mfl-button-hover-bg);
    color: var(--mfl-button-hover-ink);
    text-decoration: none;
}

.mfl-utility-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mfl-module,
.mfl-card,
.mfl-story-main,
.mfl-story-rail-module,
.mfl-home-top-stories,
.mfl-lane-card,
.mfl-home-feed-module,
.mfl-feed-list,
.mfl-archive-header {
    border-color: var(--mfl-border);
    background: var(--mfl-surface);
}

.mfl-filter-form,
.mfl-ad-slot {
    border-color: var(--mfl-border);
    background: var(--mfl-surface-alt);
}

.mfl-filter-group select {
    background: var(--mfl-surface);
    border-color: var(--mfl-border);
    color: var(--mfl-ink);
}

.mfl-filter-reset {
    border-color: var(--mfl-border);
    color: var(--mfl-ink);
    background: transparent;
}

.mfl-filter-reset:hover,
.mfl-filter-reset:focus {
    background: var(--mfl-surface-alt);
    color: var(--mfl-brand);
}

.mfl-home-lead-media,
.mfl-home-top-story-media,
.mfl-card-media {
    background: #ffffff;
}

/* Placeholder: plain white with a very light rounded orange border. */
.mfl-media-fallback {
    background: #ffffff !important;
    color: transparent !important;
    border: 2px solid rgba(226, 106, 38, 0.25) !important;
    border-radius: 1rem !important;
    box-sizing: border-box;
}

.mfl-home-top-story-excerpt,
.mfl-archive-description,
.mfl-archive-summary,
.mfl-story-standfirst,
.mfl-story-rail-note,
.mfl-ad-title,
.mfl-ad-slot-id,
.mfl-ad-divider {
    color: var(--mfl-ink-muted);
}

.mfl-ad-format {
    color: var(--mfl-ink);
}

.mfl-label-editorial {
    background: var(--mfl-label-editorial-bg);
    border-color: var(--mfl-label-editorial-border);
    color: var(--mfl-label-editorial-ink);
}

.mfl-label-sponsored {
    background: var(--mfl-label-sponsored-bg);
    border-color: var(--mfl-label-sponsored-border);
    color: var(--mfl-label-sponsored-ink);
}

.mfl-label-press-release {
    background: var(--mfl-label-press-bg);
    border-color: var(--mfl-label-press-border);
    color: var(--mfl-label-press-ink);
}

.mfl-newsletter-cta {
    background: linear-gradient(140deg, var(--mfl-primary-strong) 0%, var(--mfl-primary) 100%);
    color: var(--mfl-white);
}

.mfl-newsletter-cta a {
    color: #e26a26;
}

.screen-reader-text:focus {
    background: var(--mfl-surface);
    color: var(--mfl-ink);
    border: 1px solid var(--mfl-border);
}

@media (min-width: 861px) {
    .mfl-header {
        position: sticky;
        top: 0;
        z-index: 90;
    }

    .admin-bar .mfl-header {
        top: 32px;
    }

    .mfl-header-shell {
        position: sticky;
        top: 0;
        z-index: 1;
    }

}

@media (max-width: 860px) {
    .mfl-header {
        background: var(--mfl-surface);
        color: var(--mfl-ink);
        border-bottom-color: var(--mfl-border);
    }

    .mfl-mobile-bar {
        color: var(--mfl-ink);
    }

    .mfl-mobile-bar .mfl-mobile-nav-toggle {
        color: var(--mfl-ink);
        border-color: var(--mfl-border);
        background: var(--mfl-surface);
    }

    .mfl-mobile-bar .mfl-mobile-nav-toggle:hover,
    .mfl-mobile-bar .mfl-mobile-nav-toggle:focus {
        background: var(--mfl-surface-alt);
    }

    .mfl-mobile-bar .mfl-mobile-nav-toggle.is-open {
        background: var(--mfl-surface-alt);
    }

    .mfl-has-js .mfl-header-shell {
        /* the mobile header (logo row + Subscribe) stands ~8.5rem tall;
           100dvh tracks the real visible viewport on phones */
        max-height: calc(100dvh - 8.75rem);
        background: var(--mfl-surface);
        border-top: 1px solid var(--mfl-border);
        box-shadow: 0 16px 26px rgba(10, 10, 10, 0.14);
    }

    .mfl-mobile-actions {
        gap: 0.5rem;
    }

    .mfl-mobile-actions > * {
        flex-shrink: 0;
        min-height: 2.75rem;
    }

    .mfl-mobile-nav-toggle,
    .mfl-newsletter-btn-mobile {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .mfl-mobile-nav-toggle {
        padding: 0.52rem 0.86rem;
        font-size: 0.82rem;
        line-height: 1.15;
        border-radius: 0.64rem;
    }

    .mfl-mobile-nav-toggle-label {
        white-space: nowrap;
    }

    .mfl-newsletter-btn-mobile {
        padding: 0.5rem 0.78rem;
        line-height: 1.1;
    }
}

/* -------------------------------------------------------------------------- */
/* Utility bar (Row 1): Content type nav left + search icon right              */
/* -------------------------------------------------------------------------- */

.mfl-utility-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 0.32rem 0 0;
}

.mfl-content-type-nav .mfl-nav-list {
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0.65rem;
    padding: 0;
}

.mfl-content-type-nav .mfl-nav-list a {
    white-space: nowrap;
    font-size: clamp(0.62rem, 0.78vw, 0.72rem);
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.22rem 0.38rem;
    border-radius: 0.2rem;
    color: var(--mfl-ink-muted);
    transition: color 0.15s ease, background 0.15s ease;
}

.mfl-content-type-nav .mfl-nav-list a:hover,
.mfl-content-type-nav .mfl-nav-list a:focus {
    color: var(--mfl-primary-strong);
    background: rgba(0, 17, 43, 0.06);
}

.mfl-content-type-nav .current-menu-item > a,
.mfl-content-type-nav .current-menu-ancestor > a,
.mfl-content-type-nav .current_page_item > a {
    color: var(--mfl-primary-strong);
    background: rgba(0, 17, 43, 0.1);
}

/* -------------------------------------------------------------------------- */
/* Modern search: icon toggle + expandable input                               */
/* -------------------------------------------------------------------------- */

.mfl-search-wrapper {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.mfl-search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: none;
    border: none;
    color: var(--mfl-ink-muted);
    cursor: pointer;
    border-radius: 50%;
    transition: color 0.15s ease, background 0.15s ease;
    padding: 0;
}

.mfl-search-toggle:hover,
.mfl-search-toggle:focus {
    color: var(--mfl-primary-strong);
    background: rgba(0, 17, 43, 0.06);
}

.mfl-search-expandable {
    display: flex;
    align-items: center;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width 0.3s ease, opacity 0.25s ease, padding 0.3s ease;
    background: var(--mfl-surface);
    border: 1px solid transparent;
    border-radius: 0.4rem;
    padding: 0;
    margin: 0;
    gap: 0;
}

.mfl-search-wrapper.is-search-open .mfl-search-expandable {
    max-width: min(360px, 50vw);
    opacity: 1;
    padding: 0.2rem 0.35rem;
    border-color: var(--mfl-border);
    box-shadow: 0 4px 16px rgba(0, 17, 43, 0.12);
}

.mfl-search-wrapper.is-search-open .mfl-search-toggle {
    display: none;
}

.mfl-search-expandable input[type="search"] {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--mfl-ink);
    font-family: var(--mfl-font-sans);
    font-size: 0.88rem;
    padding: 0.32rem 0.4rem;
    outline: none;
    width: 100%;
}

/* outline:none above removes the focus ring, and nothing replaced it, so the
   header search had NO focus indicator anywhere on the site. Every other
   outline:none in this file substitutes its own; this one was the exception.
   focus-visible so it shows for keyboard users without ringing on click. */
.mfl-search-expandable input[type="search"]:focus-visible {
    outline: 2px solid #e26a26;
    outline-offset: 2px;
    border-radius: 3px;
}

.mfl-search-expandable input[type="search"]::placeholder {
    color: var(--mfl-ink-muted);
}

.mfl-search-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.8rem;
    height: 1.8rem;
    background: #3d6ba8;
    border: none;
    border-radius: 0.28rem;
    color: #ffffff;
    cursor: pointer;
    transition: background 0.15s ease;
}

.mfl-search-submit:hover,
.mfl-search-submit:focus {
    background: #e26a26;
    color: #00112b;
}

/* -------------------------------------------------------------------------- */
/* Branding row (Row 2): Logo left + topic nav + subscribe right               */
/* -------------------------------------------------------------------------- */

.mfl-branding {
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
}

.mfl-branding .mfl-logo-link {
    flex-shrink: 0;
    align-self: center;
}

.mfl-branding-nav {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.26rem;
}

.mfl-branding-nav .mfl-nav-list {
    flex: 0 1 auto;
}

.mfl-newsletter-btn-topicnav {
    flex-shrink: 0;
    font-family: inherit;
    font-size: clamp(0.84rem, 0.96vw, 0.96rem) !important;
    font-weight: 800;
    letter-spacing: 0.012em;
    padding: 0.18rem 0.55rem !important;
    white-space: nowrap;
    background-color: #ffffff !important;
    border: 1.5px solid #e26a26 !important;
    color: #e26a26 !important;
    border-radius: 2rem !important;
    box-shadow: none !important;
    text-decoration: none;
    line-height: 1.25;
    display: inline-flex !important;
    align-self: center;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.mfl-newsletter-btn-topicnav:hover {
    background-color: #ffdcc5 !important;
    color: #ed8a4f !important;
    border-color: #ed8a4f !important;
}

/* On scroll: fill the button orange */
.is-scrolled .mfl-newsletter-btn-topicnav {
    background-color: #e26a26 !important;
    color: #ffffff !important;
    border-color: #e26a26 !important;
}

.is-scrolled .mfl-newsletter-btn-topicnav:hover {
    background-color: #ed8a4f !important;
    color: #ffffff !important;
    border-color: #ed8a4f !important;
}

.mfl-topic-nav-inline {
    display: flex;
    align-items: center;
    gap: 0.26rem;
}

.mfl-topic-nav-inline .mfl-nav-list {
    flex: 0 1 auto;
    gap: 0.26rem;
    padding: 0;
}

.mfl-topic-nav-inline .mfl-nav-list a {
    font-size: clamp(0.84rem, 0.96vw, 0.96rem);
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: 0.012em;
    padding: 0.18rem 0.42rem;
    border-radius: 0.28rem;
    color: var(--mfl-primary-strong);
    transition: color 0.15s ease, background 0.15s ease;
}

.mfl-topic-nav-inline .mfl-nav-list a:hover,
.mfl-topic-nav-inline .mfl-nav-list a:focus {
    color: var(--mfl-primary-strong);
    background: var(--mfl-editorial-haze);
}

.mfl-topic-nav-inline .current-menu-item > a,
.mfl-topic-nav-inline .current-menu-ancestor > a,
.mfl-topic-nav-inline .current_page_item > a {
    color: var(--mfl-primary-strong);
    background: var(--mfl-editorial-haze);
}

.mfl-topics-dropdown {
    display: none;
}

@media (max-width: 860px) {
    .mfl-has-js .mfl-header-shell .mfl-branding {
        align-items: flex-start;
        justify-content: flex-start;
        padding: 0.46rem 0 0.56rem;
        border-bottom: 1px solid var(--mfl-header-border);
    }

    .mfl-has-js .mfl-header-shell .mfl-branding {
        border-bottom-color: var(--mfl-border);
    }

    .mfl-branding {
        align-items: flex-start;
        justify-content: flex-start;
    }

    .mfl-branding .mfl-logo-link {
        align-self: auto;
    }

    .mfl-branding-nav {
        flex: 1 1 auto;
        width: 100%;
        align-self: auto;
    }

    .mfl-content-type-nav .mfl-nav-list {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 0.24rem;
        padding: 0.34rem 0 0.22rem;
    }

    .mfl-content-type-nav .mfl-nav-list a {
        font-size: 0.82rem;
        line-height: 1.28;
        padding: 0.34rem 0.52rem;
    }

    .mfl-has-js .mfl-header-shell .mfl-nav .mfl-wrap {
        padding-top: 0.32rem;
        padding-bottom: 0.36rem;
    }

    .mfl-has-js .mfl-header-shell .mfl-nav .mfl-nav-list {
        gap: 0.32rem;
        padding: 0;
    }

    .mfl-has-js .mfl-header-shell .mfl-nav .mfl-nav-list a {
        font-size: 1rem;
        line-height: 1.28;
        padding: 0.46rem 0.66rem;
        border-radius: 0.38rem;
    }
}

/* -------------------------------------------------------------------------- */
/* Homepage hero + newsletter variant                                          */
/* -------------------------------------------------------------------------- */

.mfl-home-hero {
    position: relative;
    isolation: isolate;
    margin-bottom: 1.8rem;
    padding: clamp(1.8rem, 3.5vw, 2.5rem) 0 clamp(5rem, 7vw, 6.5rem);
    border: 0;
    border-radius: 0;
    background: linear-gradient(90deg, #1a3a5e 0%, #3d6ba8 100%);
    box-shadow: none;
    overflow: hidden;
}

.mfl-home-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(1rem, 2.2vw, 1.45rem);
    position: relative;
    z-index: 1;
}

.mfl-home-hero::before {
    content: "";
    position: absolute;
    inset: auto auto -120px -100px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(226, 106, 38, 0.2) 0%, rgba(226, 106, 38, 0) 72%);
    pointer-events: none;
}

.mfl-home-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 86% 14%, rgba(226, 106, 38, 0.15) 0%, rgba(226, 106, 38, 0) 44%);
    pointer-events: none;
}

.mfl-home-hero-copy {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: center;
    gap: 0.85rem;
    padding-left: 1.5rem;
    padding-right: 0;
}

.mfl-home-hero-featured {
    display: grid;
    align-content: center;
    gap: 0.72rem;
}

.mfl-home-hero-blurb-row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.mfl-home-hero-circle {
    flex-shrink: 0;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    overflow: hidden;
    display: block;
    border: 3px solid rgba(255, 255, 255, 0.4);
}

.mfl-home-hero-circle-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.mfl-home-hero-blurb-row .mfl-home-hero-featured-excerpt {
    flex: 1;
    min-width: 0;
}

.mfl-home-hero-featured .mfl-kicker {
    margin: 0;
}

.mfl-home-hero-featured .mfl-kicker a {
    color: inherit;
    text-decoration: none;
}

.mfl-home-hero-featured .mfl-kicker a:hover,
.mfl-home-hero-featured .mfl-kicker a:focus {
    text-decoration: underline;
}

.mfl-home-hero-featured h1 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.95rem, 3.9vw, 2.68rem);
    line-height: 1.08;
    max-width: 22ch;
    text-wrap: balance;
}

.mfl-home-hero-featured h1 a {
    color: inherit;
    text-decoration: none;
}

.mfl-home-hero-featured h1 a:hover,
.mfl-home-hero-featured h1 a:focus {
    text-decoration: underline;
    text-underline-offset: 0.08em;
}

.mfl-home-hero-featured .mfl-meta {
    margin: 0;
    color: rgba(255, 255, 255, 0.84);
    font-size: 0.84rem;
    letter-spacing: 0.01em;
    font-weight: 600;
}

.mfl-home-hero-featured-excerpt {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.16rem;
    line-height: 1.62;
    max-width: 58ch;
}

.mfl-home-hero-copy .mfl-kicker {
    display: inline-flex;
    align-items: center;
    width: max-content;
    margin: 0;
    padding: 0.22rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.mfl-home-hero-copy h1 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.95rem, 3.9vw, 2.68rem);
    line-height: 1.08;
    max-width: 22ch;
    text-wrap: balance;
}

.mfl-home-hero-copy > p:last-child {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.01rem;
    line-height: 1.62;
    max-width: 58ch;
}

.mfl-home-hero-newsletter {
    position: relative;
    z-index: 1;
    display: grid;
}

.mfl-home-hero-newsletter .mfl-newsletter-cta {
    position: relative;
    display: grid;
    align-content: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(61, 107, 168, 0.3);
    border-radius: 1rem;
    background: #e8f4fd;
    color: #00112B;
}

.mfl-home-hero-newsletter .mfl-newsletter-cta .mfl-kicker {
    margin: 0;
    color: #00112B;
    font-size: 0.68rem;
}

.mfl-home-hero-newsletter .mfl-newsletter-email {
    padding: 0.22rem 0.55rem;
    font-size: 0.75rem;
}

/* hero newsletter btn handled below */

.mfl-home-hero-newsletter .mfl-newsletter-cta h3 {
    margin: 0;
    color: #00112B;
    font-size: 1.3rem;
    line-height: 1.25;
    font-weight: 800;
}

.mfl-home-hero-newsletter .mfl-newsletter-cta p {
    margin: 0;
    color: rgba(0, 17, 43, 0.82);
    font-size: 0.96rem;
    line-height: 1.54;
}

/* Deleted old hero newsletter btn — replaced by clean rule below */

/* Newsletter email form */
.mfl-newsletter-form {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.22rem;
}

.mfl-newsletter-email {
    flex: 1;
    min-width: 0;
    padding: 0.52rem 0.72rem;
    border: 1px solid rgba(0, 17, 43, 0.16);
    border-radius: 0.42rem;
    font-family: var(--mfl-font-sans);
    font-size: 0.92rem;
    color: #00112b;
    background: #ffffff;
}

.mfl-newsletter-email::placeholder {
    color: rgba(0, 17, 43, 0.48);
}

.mfl-newsletter-form .mfl-btn {
    flex-shrink: 0;
    width: auto !important;
    margin-top: 0 !important;
}

.mfl-compact-newsletter-consent,
.mfl-compact-newsletter-status {
    position: relative;
    z-index: 1;
    margin: 0.55rem 0 0;
    max-width: 52ch;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--mfl-ink-muted);
}

.mfl-compact-newsletter-consent a {
    color: #c2541a;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mfl-compact-newsletter-status {
    font-size: 0.88rem;
    font-weight: 700;
}

.mfl-compact-newsletter-status.is-success {
    color: #24683b;
}

.mfl-compact-newsletter-status.is-error {
    color: #a32929;
}

[data-mfl-compact-newsletter][aria-busy="true"] {
    opacity: 0.72;
}

[data-mfl-compact-newsletter] button:disabled {
    cursor: wait;
}

.mfl-home-hero-newsletter .mfl-newsletter-cta .mfl-compact-newsletter-consent,
.mfl-home-hero-newsletter .mfl-newsletter-cta .mfl-compact-newsletter-status {
    margin-top: 0.45rem;
    font-size: 0.68rem;
    line-height: 1.35;
}

.mfl-article-newsletter-copy .mfl-compact-newsletter-consent,
.mfl-article-newsletter-copy .mfl-compact-newsletter-status,
.mfl-rail-newsletter-cta .mfl-compact-newsletter-consent,
.mfl-rail-newsletter-cta .mfl-compact-newsletter-status {
    margin-top: 0.55rem;
    margin-bottom: 0;
}

.mfl-rail-newsletter-cta .mfl-compact-newsletter-consent {
    font-size: 0.68rem;
}

/* Hero newsletter subscribe button — single clean rule */
.mfl-home-hero-newsletter .mfl-btn {
    padding: 0.15rem 0.55rem !important;
    min-height: 0 !important;
    height: auto !important;
    font-family: "Source Sans 3", sans-serif !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.012em;
}

/* Hero collapse disabled — blue accent bar used instead */

@media (prefers-reduced-motion: no-preference) {
    .mfl-home-hero {
        animation: mfl-hero-rise 400ms ease-out both;
    }

    .mfl-home-hero-newsletter .mfl-newsletter-cta {
        animation: mfl-hero-rise 560ms ease-out both;
    }
}

@keyframes mfl-hero-rise {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1040px) {
    .mfl-home-hero-inner {
        grid-template-columns: 1fr;
    }

    .mfl-home-hero-copy h1 {
        max-width: 24ch;
    }

    .mfl-home-hero-newsletter .mfl-newsletter-cta {
        max-width: 480px;
    }
}

@media (max-width: 860px) {
    .mfl-home-hero-newsletter {
        display: none;
    }

    .mfl-home-hero-inner {
        grid-template-columns: 1fr;
    }

    .mfl-home-hero-featured-excerpt {
        margin-bottom: 1.5rem !important;
    }

    .mfl-home-bridge-layout.mfl-home-lead-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 680px) {
    .mfl-home-hero {
        padding: 0.95rem 0;
    }

    .mfl-home-hero-inner {
        gap: 0.9rem;
    }

    .mfl-home-hero-copy h1 {
        font-size: clamp(1.7rem, 7vw, 2.08rem);
    }

    .mfl-home-hero-featured h1 {
        font-size: clamp(1.7rem, 7vw, 2.08rem);
    }

    .mfl-home-hero-copy > p:last-child {
        font-size: 0.95rem;
    }

    .mfl-home-hero-featured-excerpt {
        font-size: 0.95rem;
    }

    .mfl-home-hero-newsletter .mfl-newsletter-cta {
        border-radius: 0.72rem;
    }
}

/* -------------------------------------------------------------------------- */
/* Internal page: sticky newsletter bar                                        */
/* -------------------------------------------------------------------------- */

.mfl-internal-blue-bar {
    height: 10px;
    background: linear-gradient(90deg, #1a3a5e 0%, #3d6ba8 100%);
}

/* -------------------------------------------------------------------------- */
/* Internal page: archive sidebar layout                                       */
/* -------------------------------------------------------------------------- */

.mfl-archive-with-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 1.5rem;
    align-items: start;
}

.mfl-archive-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.mfl-sidebar-ad-slot {
    background: var(--mfl-surface-alt);
    border: 1px solid var(--mfl-border);
    border-radius: 0.5rem;
    padding: 0.75rem;
    text-align: center;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mfl-ink-muted);
    font-size: 0.78rem;
}

.mfl-sidebar-section {
    border: 1px solid var(--mfl-border);
    border-radius: 1rem;
    background: var(--mfl-surface);
    padding: 0.85rem 1rem;
}

.mfl-sidebar-section h3, .mfl-sidebar-section h2 {
    margin: 0 0 0.55rem;
    font-size: 1rem;
    font-weight: 800;
}

.mfl-sidebar-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mfl-sidebar-list li {
    padding: 0.42rem 0;
    border-bottom: 1px solid var(--mfl-border);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.35;
}

.mfl-sidebar-list li:last-child { border-bottom: none; }

.mfl-sidebar-list a {
    color: var(--mfl-ink);
    text-decoration: none;
}

.mfl-sidebar-list a:hover { color: var(--mfl-brand); }

.mfl-sidebar-updates li {
    font-family: "Source Serif 4", Georgia, serif;
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.4;
    display: block;
    padding: 0.7rem 0;
}

.mfl-sidebar-updates .mfl-meta {
    display: block;
    margin-bottom: 0.15rem;
}

.mfl-sidebar-updates a {
    padding-left: 1rem;
    position: relative;
    display: block;
    color: #00112b;
    text-decoration: none;
}

.mfl-sidebar-updates a:hover {
    color: var(--mfl-brand);
}

.mfl-sidebar-updates a::before {
    content: '●';
    position: absolute;
    left: 0;
    top: 0.35em;
    color: #ed8a4f;
    font-size: 0.45rem;
}

.mfl-sidebar-updates .mfl-meta {
    font-family: "Source Sans 3", sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    color: #8a9baa;
    margin: 0 0 0.1rem;
    display: block;
    padding-left: 1rem;
}

/* sidebar updates colors handled above */

@media (max-width: 960px) {
    .mfl-archive-with-sidebar {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------------------------------------- */
/* Filter toolbar: collapsible pill button                                     */
/* -------------------------------------------------------------------------- */

.mfl-filter-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.45rem;
    flex-wrap: wrap;
}

.mfl-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.32rem 0.7rem;
    border: 1.5px solid #e26a26;
    border-radius: 2rem;
    background: #ffffff;
    color: #e26a26;
    font-family: var(--mfl-font-sans);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.mfl-filter-toggle:hover {
    background: #3d6ba8;
    border-color: #3d6ba8;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(61, 107, 168, 0.25);
}

.mfl-filter-toggle[aria-expanded="true"] {
    background: #3d6ba8;
    color: #ffffff;
    border-color: #3d6ba8;
}

.mfl-filter-badge {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e26a26;
    display: inline-block;
}

.mfl-filter-toggle[aria-expanded="true"] .mfl-filter-badge { background: #ffffff; }

.mfl-active-filters {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.35rem;
}

a.mfl-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.35rem 0.18rem 0.6rem;
    background: #ffdcc5;
    color: #6e3210;
    border: 1px solid rgba(226, 106, 38, 0.3);
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

a.mfl-filter-chip:hover {
    background: #fbdcc3;
    border-color: rgba(226, 106, 38, 0.5);
}

.mfl-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(226, 106, 38, 0.18);
    color: #ed8a4f;
    font-size: 0.85rem;
    line-height: 1;
    font-weight: 400;
    transition: background 0.15s ease, color 0.15s ease;
}

a.mfl-filter-chip:hover .mfl-chip-x {
    background: #e26a26;
    color: #ffffff;
}

.mfl-filter-clear {
    font-size: 0.75rem;
    color: var(--mfl-ink-muted);
    text-decoration: underline;
    white-space: nowrap;
    margin-left: 0.15rem;
}

.mfl-filter-clear:hover { color: var(--mfl-brand); }

.mfl-filter-panel {
    display: contents !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* On mobile, filters default to closed unless explicitly opened */
@media (max-width: 768px) {
    .mfl-filter-panel {
        display: none !important;
    }
    .mfl-filter-panel.is-open {
        display: contents !important;
    }
}

.mfl-filter-panel.is-collapsed {
    display: none !important;
}

.mfl-filter-panel.is-open {
    display: contents !important;
}

.mfl-filter-panel .mfl-filter-group {
    flex: 0 0 auto;
}

.mfl-filter-panel select {
    border: 1.5px solid #e26a26;
    border-radius: 2rem;
    padding: 0.32rem 0.7rem;
    font-family: "Source Sans 3", sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    background: #ffffff;
    color: #e26a26;
    cursor: pointer;
    appearance: auto;
}

.mfl-filter-panel .mfl-filter-actions {
    margin-left: 0;
}

.mfl-filter-dropdown-group {
    position: relative;
}

.mfl-filter-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.32rem 0.7rem;
    border: 1.5px solid #e26a26;
    border-radius: 2rem;
    background: #ffffff;
    color: #e26a26;
    font-family: "Source Sans 3", sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}

.mfl-filter-dropdown-toggle:hover {
    background: #e26a26;
    border-color: #e26a26;
    color: #ffffff;
}

.mfl-filter-dropdown-group.is-dropdown-open .mfl-filter-dropdown-toggle {
    background: #e26a26;
    border-color: #e26a26;
    color: #ffffff;
}

.mfl-filter-dropdown-toggle svg {
    transition: transform 0.2s ease;
}

.mfl-filter-dropdown-group.is-dropdown-open .mfl-filter-dropdown-toggle svg {
    transform: rotate(180deg);
}

.mfl-checkbox-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 0.3rem);
    left: 0;
    z-index: 20;
    background: #ffffff;
    border: 1px solid var(--mfl-border);
    border-radius: 1rem;
    box-shadow: 0 8px 24px rgba(0, 17, 43, 0.14);
    padding: 0.5rem;
    min-width: 220px;
    max-height: 240px;
    overflow-y: auto;
}

.mfl-filter-dropdown-group.is-dropdown-open .mfl-checkbox-dropdown {
    display: block;
}

.mfl-checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--mfl-ink);
    cursor: pointer;
    padding: 0.35rem 0.5rem;
    border-radius: 0.35rem;
    transition: background 0.12s ease;
    width: 100%;
}

.mfl-checkbox-item:hover {
    background: #ffdcc5;
}

/* Hide the native input for BOTH kinds. The orange .mfl-checkbox-mark IS
   the control; leaving the real radio visible drew two circles per row. */
.mfl-checkbox-item input[type="checkbox"],
.mfl-checkbox-item input[type="radio"] {
    display: none;
}

.mfl-checkbox-mark {
    width: 16px;
    height: 16px;
    border: 2px solid var(--mfl-border);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.mfl-checkbox-item input:checked + .mfl-checkbox-mark {
    background: #e26a26;
    border-color: #e26a26;
}

.mfl-checkbox-item input:checked + .mfl-checkbox-mark::after {
    content: '';
    display: block;
    width: 5px;
    height: 9px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-top: -2px;
}

button.mfl-filter-apply {
    background: #e26a26;
    color: #ffffff;
    border: 1px solid #e26a26 !important;
    border-radius: 2rem !important;
    padding: 0.28rem 1.15rem;
    line-height: 1.35;
    font-family: var(--mfl-font-sans);
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

button.mfl-filter-apply:hover {
    background: #c2541a;
    border-color: #c2541a !important;
    color: #ffffff;
}

/* -------------------------------------------------------------------------- */
/* Footer alignment with header language                                      */
/* -------------------------------------------------------------------------- */

.mfl-footer {
    margin-top: 2.2rem;
    background: var(--mfl-surface);
    color: var(--mfl-ink);
    border-top: 1px solid var(--mfl-border);
}

.mfl-footer-branding {
    padding: 1.05rem 0 0.95rem;
    border-bottom: 1px solid var(--mfl-border);
    display: grid;
    gap: 0.72rem;
}

.mfl-footer-branding-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.72rem;
}

.mfl-footer-logo-link .mfl-logo {
    width: min(150px, 46vw);
}

.mfl-footer-newsletter-btn {
    white-space: nowrap;
}

.mfl-footer-tagline {
    margin: 0;
    max-width: 68ch;
    font-size: 0.87rem;
    color: var(--mfl-ink-muted);
}

.mfl-footer-lanes .mfl-nav-list {
    gap: 0.5rem 1.1rem;
    padding: 0;
}

.mfl-footer-lanes .mfl-nav-list a {
    color: var(--mfl-brand);
    border: 0;
    background: transparent;
    border-radius: 0;
    padding: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.mfl-footer-lanes .mfl-nav-list a:hover,
.mfl-footer-lanes .mfl-nav-list a:focus {
    background: transparent;
    color: var(--mfl-brand-strong);
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

.mfl-footer-list a:hover,
.mfl-footer-list a:focus {
    color: var(--mfl-brand-strong);
}

.mfl-footer .mfl-btn,
.mfl-footer .mfl-btn:visited {
    background: var(--mfl-accent);
    color: var(--mfl-button-ink);
    border-color: transparent;
    text-decoration: none;
}

.mfl-footer .mfl-btn:hover,
.mfl-footer .mfl-btn:focus {
    background: var(--mfl-button-hover-bg);
    color: var(--mfl-button-hover-ink);
    text-decoration: none;
}

@media (max-width: 860px) {
    .mfl-footer-branding-main {
        align-items: flex-start;
    }

    .mfl-footer-newsletter-btn {
        width: 100%;
        justify-content: center;
    }

    .mfl-footer-lanes .mfl-nav-list a {
        font-size: 0.74rem;
    }
}

/* -------------------------------------------------------------------------- */
/* MFL-LM-004: Typography and contrast baseline upgrade                        */
/* -------------------------------------------------------------------------- */

.mfl-kicker,
.mfl-card-kicker {
    font-size: 0.74rem;
    line-height: 1.35;
    letter-spacing: 0.035em;
    text-transform: none;
    color: var(--mfl-kicker-ink);
}

.mfl-meta,
.mfl-taxonomy-line {
    font-size: 0.82rem;
    line-height: 1.52;
    color: var(--mfl-metadata-ink);
}

.mfl-lane-card-content .mfl-meta,
.mfl-home-feed-module .mfl-card .mfl-meta,
.mfl-feed-list .mfl-card .mfl-meta,
.mfl-story-header .mfl-meta,
.mfl-story-header .mfl-taxonomy-line,
.mfl-story-rail-list .mfl-card .mfl-meta {
    font-size: 0.8rem;
}

.mfl-story-path {
    font-size: 0.75rem;
}

.mfl-story-path a,
.mfl-story-path a:visited {
    color: var(--mfl-metadata-ink);
}

.mfl-filter-group label {
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    text-transform: none;
    color: var(--mfl-metadata-ink);
}

.mfl-ad-title {
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--mfl-metadata-ink);
}

.mfl-label,
.mfl-story-rail-list .mfl-card .mfl-label {
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    min-height: 1.45rem;
    padding: 0.14rem 0.52rem;
    text-transform: none;
}

/* -------------------------------------------------------------------------- */
/* MFL-LM-005: Flat-corner default UI system                                  */
/* -------------------------------------------------------------------------- */

/* Global button style: white pill with orange outline */
.mfl-btn:not(.mfl-newsletter-btn-topicnav),
.mfl-search button,
button[type="submit"]:not(.mfl-filter-apply),
.mfl-load-more-btn,
.page-numbers,
.mfl-pagination-wrap a {
    background-color: #ffffff !important;
    color: #e26a26 !important;
    border: 1.5px solid #e26a26 !important;
    border-radius: 2rem !important;
    font-family: "Source Sans 3", "Segoe UI", sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: 0.012em;
    cursor: pointer;
    box-shadow: none;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.mfl-btn:not(.mfl-newsletter-btn-topicnav):hover,
.mfl-btn:not(.mfl-newsletter-btn-topicnav):focus,
.mfl-search button:hover,
.mfl-search button:focus,
button[type="submit"]:not(.mfl-filter-apply):hover,
button[type="submit"]:not(.mfl-filter-apply):focus,
.mfl-load-more-btn:hover,
.page-numbers:hover,
.mfl-pagination-wrap a:hover {
    background-color: #e26a26 !important;
    color: #ffffff !important;
    border-color: #e26a26 !important;
    box-shadow: none !important;
    transform: translateY(-1px);
}

.mfl-pagination-wrap .page-numbers.current,
.mfl-pagination-wrap a.current {
    background-color: #e26a26 !important;
    color: #ffffff !important;
    border-color: #e26a26 !important;
}

.mfl-btn:not(.mfl-newsletter-btn-topicnav):visited {
    color: #e26a26 !important;
}

.mfl-action-form-wrap {
    margin-top: 1.5rem;
    border: 1px solid var(--mfl-border);
    background: var(--mfl-surface-alt);
    padding: 0.95rem;
}

.mfl-action-form-header h2 {
    margin: 0;
    font-size: clamp(1.35rem, 2.1vw, 1.7rem);
    line-height: 1.2;
}

.mfl-action-form-header p {
    margin: 0.5rem 0 0;
    color: var(--mfl-ink-muted);
}

.mfl-action-status {
    margin-top: 0.9rem;
    padding: 0.64rem 0.7rem;
    border: 1px solid transparent;
}

.mfl-action-status p {
    margin: 0;
}

.mfl-action-status ul {
    margin: 0.55rem 0 0;
    padding-left: 1.1rem;
}

.mfl-action-status-success {
    border-color: #88bca4;
    background: #eaf7ef;
    color: #143425;
}

.mfl-action-status-error {
    border-color: #d4a1a1;
    background: #fff0f0;
    color: #5b2222;
}

.mfl-action-form {
    margin-top: 1rem;
}

.mfl-action-form-grid {
    display: grid;
    gap: 0.8rem 0.85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mfl-action-field {
    display: grid;
    gap: 0.32rem;
}

.mfl-action-field-full {
    grid-column: 1 / -1;
}

.mfl-action-field label {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--mfl-ink);
}

.mfl-action-required-indicator {
    color: #8b2a2a;
    margin-left: 0.2rem;
}

.mfl-action-input {
    width: 100%;
    border: 1px solid var(--mfl-border);
    padding: 0.5rem 0.56rem;
    background: var(--mfl-surface);
    color: var(--mfl-ink);
    font: inherit;
}

.mfl-action-input:focus {
    border-color: #2d708c;
    outline: 2px solid rgba(45, 112, 140, 0.22);
    outline-offset: 1px;
}

.mfl-action-field.has-error .mfl-action-input {
    border-color: #bc3f3f;
    background: #fff8f8;
}

.mfl-action-field-error {
    margin: 0;
    font-size: 0.83rem;
    color: #8b2a2a;
}

.mfl-action-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem 0.95rem;
    margin-top: 1rem;
}

.mfl-action-submit {
    min-width: 210px;
    min-height: 2.82rem;
    padding: 0.56rem 0.98rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.mfl-action-required-note {
    margin: 0;
    font-size: 0.82rem;
    color: var(--mfl-ink-muted);
}

.mfl-action-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (max-width: 860px) {
    .mfl-action-form-grid {
        grid-template-columns: 1fr;
    }

    .mfl-action-submit {
        width: 100%;
        min-width: 0;
    }
}

/* -------------------------------------------------------------------------- */
/* Events archive + single event detail layout                                */
/* -------------------------------------------------------------------------- */

/* Match the default archive header used by other content types — no
   peach/cream fade. Falls back to the standard surface + border. */
.mfl-events-archive-header {
    background: var(--mfl-surface);
    border: 1px solid var(--mfl-border);
}

.mfl-events-archive-intro {
    margin: 0.4rem 0 0;
    color: var(--mfl-ink-muted);
    font-size: 0.9rem;
    max-width: 60ch;
}

.mfl-events-list {
    display: grid;
    gap: 1rem;
    margin-top: 1.25rem;
}

.mfl-event-card {
    background: var(--mfl-surface);
    border: 1px solid var(--mfl-border);
    border-radius: 1rem;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.mfl-event-card:hover {
    border-color: rgba(226, 106, 38, 0.4);
    box-shadow: 0 6px 22px rgba(0, 17, 43, 0.08), 0 2px 6px rgba(226, 106, 38, 0.10);
    transform: translateY(-2px);
}

.mfl-event-card-link {
    display: grid;
    grid-template-columns: 130px 96px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: center;
    padding: 1.25rem 1.5rem;
    text-decoration: none;
    color: inherit;
}

.mfl-event-card-date {
    flex-shrink: 0;
    text-align: center;
    background: linear-gradient(180deg, #ffefe4 0%, #f9c9a4 100%);
    border: 1px solid rgba(226, 106, 38, 0.28);
    border-radius: 0.85rem;
    padding: 0.75rem 0.55rem 0.65rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.1rem;
    min-height: 96px;
}

.mfl-event-card-month {
    display: block;
    font-family: var(--mfl-font-sans);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #ed8a4f;
    margin: 0;
    line-height: 1;
    text-align: center;
}
.mfl-event-card-day {
    display: block;
    font-family: var(--mfl-font-sans);
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--mfl-ink);
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-align: center;
    margin: 0.1rem 0;
}
.mfl-event-card-multiday .mfl-event-card-day {
    font-size: 1.4rem;
    white-space: nowrap;
}

/* Cross-month layout: two stacked lines with a small connector */
.mfl-event-card-date-line {
    display: block;
    font-family: var(--mfl-font-sans);
    font-size: 1rem;
    font-weight: 800;
    color: var(--mfl-ink);
    line-height: 1.1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
}
.mfl-event-card-date-connector {
    display: block;
    font-family: var(--mfl-font-sans);
    font-size: 0.85rem;
    font-weight: 800;
    color: rgba(226, 106, 38, 0.65);
    line-height: 1;
    text-align: center;
    margin: 0.1rem 0;
}
.mfl-event-card-year {
    display: block;
    font-family: var(--mfl-font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--mfl-ink-muted);
    margin: 0.4rem 0 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
    text-align: center;
}

/* Format badge on the meta row */
.mfl-event-card-format {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
}
/* Neutralized format badges — subtle outlined pill, no blue/teal fills.
   Applied to the badge span only; the article container no longer carries
   the format-* class so cards render on the standard white surface. */
.mfl-event-card-format.mfl-event-card-format-in-person,
.mfl-event-card-format.mfl-event-card-format-virtual,
.mfl-event-card-format.mfl-event-card-format-hybrid {
    background: transparent !important;
    color: var(--mfl-ink) !important;
    border: 1px solid var(--mfl-border) !important;
}
/* Belt-and-suspenders: if the article ever carries a format-* class again,
   force the card surface to stay neutral. */
article.mfl-event-card.mfl-event-card-format-in-person,
article.mfl-event-card.mfl-event-card-format-virtual,
article.mfl-event-card.mfl-event-card-format-hybrid {
    background: var(--mfl-surface) !important;
}

.mfl-event-card-logo {
    width: 96px;
    height: 96px;
    border-radius: 0.7rem;
    overflow: hidden;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--mfl-border);
    padding: 0.4rem;
}

.mfl-event-card-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    background: transparent;
    padding: 0;
}

.mfl-event-card-logo-fallback {
    font-family: var(--mfl-font-sans);
    font-size: 2rem;
    font-weight: 800;
    color: #ed8a4f;
}

.mfl-event-card-body h2 {
    margin: 0 0 0.3rem;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 1.18rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--mfl-ink);
}

.mfl-event-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
    margin: 0 0 0.4rem;
    font-size: 0.78rem;
    color: var(--mfl-ink-muted);
}

.mfl-event-card-when,
.mfl-event-card-where,
.mfl-event-card-duration {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.mfl-event-card-duration {
    background: rgba(226, 106, 38, 0.12);
    color: #ed8a4f;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
}

.mfl-event-card-excerpt {
    margin: 0 0 0.35rem;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--mfl-ink);
}

.mfl-event-card-cta {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    color: #e26a26;
}

@media (max-width: 768px) {
    .mfl-event-card-link {
        grid-template-columns: 90px 1fr;
        grid-template-rows: auto auto;
        gap: 0.75rem;
        padding: 0.85rem;
    }

    .mfl-event-card-logo {
        grid-row: 1;
        grid-column: 2;
        width: 60px;
        height: 60px;
        margin-left: auto;
    }

    .mfl-event-card-date {
        grid-row: 1 / span 2;
        grid-column: 1;
    }

    .mfl-event-card-body {
        grid-row: 2;
        grid-column: 2;
    }

    .mfl-event-card-body h2 {
        font-size: 1.02rem;
    }
}

/* Single event detail layout */
.mfl-event-detail {
    padding: 1.2rem 1.1rem 0;
}

.mfl-event-detail-header {
    display: grid;
    grid-template-columns: auto 110px minmax(0, 1fr);
    gap: 1.2rem;
    align-items: center;
    background: linear-gradient(135deg, #ffefe4 0%, #ffdcc5 100%);
    border: 1px solid rgba(226, 106, 38, 0.25);
    border-radius: 1rem;
    padding: 1.2rem 1.4rem;
}

.mfl-event-detail-date {
    text-align: center;
    background: #ffffff;
    border: 1.5px solid rgba(226, 106, 38, 0.35);
    border-radius: 0.85rem;
    padding: 0.85rem 0.7rem 0.7rem;
    min-width: 100px;
}

.mfl-event-detail-month {
    display: block;
    font-family: var(--mfl-font-sans);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #ed8a4f;
    margin-bottom: 0.2rem;
}

.mfl-event-detail-day {
    display: block;
    font-family: var(--mfl-font-sans);
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--mfl-ink);
    line-height: 1;
}

.mfl-event-detail-year {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--mfl-ink-muted);
    margin-top: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.mfl-event-detail-logo {
    width: 110px;
    height: 110px;
    border-radius: 0.85rem;
    background: #ffffff;
    border: 1px solid var(--mfl-border);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem;
}

.mfl-event-detail-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mfl-event-detail-meta {
    min-width: 0;
}

.mfl-event-detail-when {
    margin: 0 0 0.45rem;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--mfl-ink);
    line-height: 1.3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
}

.mfl-event-detail-pill {
    display: inline-flex;
    background: #e26a26;
    color: #ffffff;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    font-family: var(--mfl-font-sans);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mfl-event-detail-where {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.85rem;
    color: var(--mfl-ink-muted);
    font-size: 0.92rem;
}

.mfl-event-detail-actions .mfl-btn {
    font-size: 0.85rem !important;
    padding: 0.42rem 1rem !important;
}

.mfl-story-body-event {
    padding-top: 1.2rem;
}

@media (max-width: 768px) {
    .mfl-event-detail-header {
        grid-template-columns: 1fr;
        gap: 0.85rem;
        padding: 0.95rem;
        text-align: center;
    }

    .mfl-event-detail-date {
        margin: 0 auto;
    }

    .mfl-event-detail-logo {
        margin: 0 auto;
        width: 90px;
        height: 90px;
    }

    .mfl-event-detail-when {
        justify-content: center;
        font-size: 1rem;
    }

    .mfl-event-detail-where {
        justify-content: center;
    }

    .mfl-event-detail-actions {
        display: flex;
        justify-content: center;
    }
}

/* Unified event calendar tile: two-line stacked format for all three
   cases (single, same-month range, cross-month range). Fixed width so
   items align cleanly down the sidebar. */
.mfl-event-cal-icon {
    width: 72px !important;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    line-height: 1;
}
.mfl-event-cal-line {
    display: block;
    text-align: center;
    font-family: "Source Sans 3", sans-serif;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.mfl-event-cal-line-primary {
    font-size: 0.95rem;
    font-weight: 800;
    color: #043962;
    line-height: 1.15;
    text-transform: uppercase;
}
.mfl-event-cal-line-primary:first-child {
    color: #ed8a4f;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
}
/* Cross-month: each line is "MMM D"; the month stays peach, the day navy. */
.mfl-event-cal-month { color: #ed8a4f; }
.mfl-event-item-crossmonth .mfl-event-cal-line-primary {
    color: #043962;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* -------------------------------------------------------------------------- */
/* Event detail page hero — bigger logo and Add to Calendar dropdown          */
/* -------------------------------------------------------------------------- */

.mfl-event-detail-hero {
    display: grid;
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: 1.6rem;
    align-items: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, #ffefe4 0%, #ffdcc5 100%);
    border: 1px solid rgba(226, 106, 38, 0.25);
    border-radius: 1rem;
    margin: 1.2rem 1.1rem;
}

.mfl-event-detail-hero .mfl-event-detail-logo {
    width: 100%;
    max-width: 280px;
    aspect-ratio: 4 / 3;
    border-radius: 0.85rem;
    background: #ffffff;
    border: 1px solid var(--mfl-border);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem;
    margin: 0 auto;
}

.mfl-event-detail-hero .mfl-event-detail-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.mfl-event-detail-info {
    min-width: 0;
}

.mfl-event-detail-organizer {
    margin: 0 0 0.45rem;
    font-family: var(--mfl-font-sans);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ed8a4f;
}

/* Rebalanced big-date block: stacked, centered, consistent typography
   across single-day, same-month multi-day, and cross-month layouts. */
.mfl-event-detail-bigdate {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    margin: 0 0 0.85rem;
    padding: 0.9rem 1.25rem 0.85rem;
    background: linear-gradient(180deg, #ffefe4 0%, #fdd9c2 100%);
    border: 1px solid rgba(226, 106, 38, 0.28);
    border-radius: 0.9rem;
    font-family: var(--mfl-font-sans);
    color: var(--mfl-ink);
    min-width: 128px;
}

.mfl-event-detail-bigdate-month {
    display: block;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #ed8a4f;
    line-height: 1;
}

.mfl-event-detail-bigdate-day {
    display: block;
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--mfl-ink);
    margin: 0.15rem 0;
}
.mfl-event-detail-bigdate.is-multi .mfl-event-detail-bigdate-day {
    font-size: 1.85rem;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

/* Cross-month layout: stacked lines with dash connector */
.mfl-event-detail-bigdate-line {
    display: block;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--mfl-ink);
    line-height: 1.15;
    white-space: nowrap;
    text-align: center;
}
.mfl-event-detail-bigdate-dash {
    display: block;
    font-size: 0.9rem;
    font-weight: 800;
    color: rgba(226, 106, 38, 0.65);
    line-height: 1;
    text-align: center;
    margin: 0.15rem 0;
}
.mfl-event-detail-bigdate.is-cross-month .mfl-event-detail-bigdate-year {
    margin-top: 0.35rem;
}

.mfl-event-detail-bigdate-year {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--mfl-ink-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 0.4rem;
    line-height: 1;
    text-align: center;
}
.mfl-event-detail-pill {
    display: inline-block;
    margin-top: 0.55rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: rgba(226, 106, 38, 0.14);
    color: #b8541f;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mfl-event-detail-fullwhen,
.mfl-event-detail-where {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.5rem;
    color: var(--mfl-ink-muted);
    font-size: 0.95rem;
    font-weight: 500;
}

.mfl-event-detail-fullwhen svg,
.mfl-event-detail-where svg {
    color: #ed8a4f;
    flex-shrink: 0;
}

.mfl-event-detail-where {
    margin-bottom: 1rem;
}

.mfl-event-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
    margin-top: 0.5rem;
}

.mfl-event-cal-dropdown {
    position: relative;
    display: inline-block;
}

.mfl-event-cal-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 0.4rem;
}

.mfl-event-cal-toggle-chevron {
    transition: transform 0.15s ease;
    margin-left: 0.15rem;
}
.mfl-event-cal-toggle[aria-expanded="true"] .mfl-event-cal-toggle-chevron {
    transform: rotate(180deg);
}

.mfl-event-cal-menu {
    display: none;
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    z-index: 30;
    min-width: 300px;
    background: #ffffff;
    border: 1px solid rgba(0, 17, 43, 0.10);
    border-radius: 0.85rem;
    box-shadow: 0 12px 32px rgba(0, 17, 43, 0.16), 0 2px 6px rgba(0, 17, 43, 0.06);
    padding: 0.45rem;
    /* Instant open — no fade animation to feel snappy */
}

.mfl-event-cal-dropdown.is-open .mfl-event-cal-menu {
    display: block;
}

.mfl-event-cal-menu-divider {
    height: 1px;
    background: rgba(0, 17, 43, 0.08);
    margin: 0.4rem 0.3rem;
}

/* Featured option (Outlook Desktop) — visually elevated at the top */
.mfl-event-cal-option-featured {
    background: linear-gradient(180deg, #ffefe4 0%, #fdd9c2 100%);
    border-radius: 0.6rem;
    border: 1px solid rgba(226, 106, 38, 0.22);
}
.mfl-event-cal-option-featured:hover,
.mfl-event-cal-option-featured:focus {
    background: linear-gradient(180deg, #fdd9c2 0%, #f0b98a 100%) !important;
    border-color: rgba(226, 106, 38, 0.4);
}

/* Option row: icon + label stack */
.mfl-event-cal-option {
    display: flex !important;
    align-items: center;
    gap: 0.7rem !important;
    padding: 0.55rem 0.7rem !important;
    border-radius: 0.55rem !important;
    color: var(--mfl-ink);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.94rem;
    transition: background 0.12s ease;
}
.mfl-event-cal-option:hover,
.mfl-event-cal-option:focus {
    background: rgba(0, 17, 43, 0.045);
    outline: none;
}
.mfl-event-cal-option svg {
    flex-shrink: 0;
    display: block;
}
.mfl-event-cal-option-text {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    line-height: 1.15;
}
.mfl-event-cal-option-title {
    font-weight: 700;
    color: var(--mfl-ink);
}
.mfl-event-cal-option-sub {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--mfl-ink-muted);
}

/* Inline Add-to-Calendar buttons (no dropdown, instant) */
.mfl-event-cal-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0;
}
.mfl-event-cal-buttons-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--mfl-ink-muted);
    margin-right: 0.35rem;
}
.mfl-event-cal-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.42rem 0.85rem;
    border: 1px solid rgba(0, 17, 43, 0.14);
    border-radius: 2rem;
    background: #ffffff;
    color: var(--mfl-ink);
    text-decoration: none;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.mfl-event-cal-btn:hover,
.mfl-event-cal-btn:focus {
    background: #f5f9fd;
    border-color: rgba(0, 17, 43, 0.28);
    box-shadow: 0 2px 6px rgba(0, 17, 43, 0.08);
    transform: translateY(-1px);
    text-decoration: none;
}
.mfl-event-cal-btn svg {
    flex-shrink: 0;
    display: block;
}

/* Cross-month date range in the event archive card */
.mfl-event-card-daterange {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.05rem;
    font-family: "Source Serif 4", Georgia, serif;
    font-weight: 800;
    color: var(--mfl-ink);
    line-height: 1.05;
    letter-spacing: -0.01em;
}
.mfl-event-card-daterange-part {
    font-size: 1.25rem;
}
.mfl-event-card-daterange-dash {
    font-size: 0.9rem;
    color: #b8c4d1;
    line-height: 1;
    margin: 0.05rem 0;
}

/* Ad placeholder markup is deprecated pre-launch — hide any lingering slots. */
.mfl-ad-slot { display: none !important; }

/* Events archive filters — matched to the standard content-type filter
   look: orange outlined pill selects on a white background, hover snaps
   to blue like the other .mfl-filter-toggle controls. */
/* Upcoming / Past. A segmented control rather than a fourth dropdown: it
   switches which list you are reading, and sits above the filters that
   refine it, so the hierarchy is visible rather than implied. */
.mfl-events-when-tabs {
    display: inline-flex;
    margin-top: 0.9rem;
    border: 1px solid var(--mfl-border);
    border-radius: 999px;
    padding: 2px;
    background: #fff;
}

.mfl-events-when-tab {
    display: inline-block;
    padding: 0.3rem 0.95rem;
    border-radius: 999px;
    font-family: var(--mfl-font-sans);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #5c6b7a;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.mfl-events-when-tab:hover,
.mfl-events-when-tab:focus-visible {
    color: var(--mfl-ink);
    background: rgba(226, 106, 38, 0.08);
}

.mfl-events-when-tab.is-active {
    background: #e26a26;
    color: #fff;
}

.mfl-events-empty {
    padding: 1.4rem 1.2rem;
    text-align: center;
}

.mfl-events-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.6rem;
}
.mfl-events-filter .mfl-filter-group {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.mfl-events-filter .mfl-filter-label {
    font-family: var(--mfl-font-sans);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--mfl-ink);
    letter-spacing: 0.02em;
}
.mfl-events-filter select {
    display: inline-flex;
    align-items: center;
    padding: 0.32rem 0.7rem;
    border: 1.5px solid #e26a26;
    border-radius: 2rem;
    background: #ffffff;
    color: #e26a26;
    font-family: var(--mfl-font-sans);
    font-size: 0.8rem;
    font-weight: 700;
    min-width: 0;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    appearance: auto;
}
.mfl-events-filter select:hover,
.mfl-events-filter select:focus {
    background: #3d6ba8;
    border-color: #3d6ba8;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(61, 107, 168, 0.25);
    outline: none;
}
.mfl-events-filter .mfl-filter-clear {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.75rem;
    border-radius: 2rem;
    border: 1.5px solid transparent;
    font-family: var(--mfl-font-sans);
    font-size: 0.78rem;
    font-weight: 700;
    color: #e26a26;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.mfl-events-filter .mfl-filter-clear:hover {
    background: rgba(226, 106, 38, 0.10);
    text-decoration: none;
}

.mfl-event-cal-option {
    display: block;
    padding: 0.55rem 0.7rem;
    color: var(--mfl-ink);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    border-radius: 0.4rem;
    transition: background 0.15s ease, color 0.15s ease;
}

.mfl-event-cal-option:hover,
.mfl-event-cal-option:focus {
    background: #ffdcc5;
    color: #ed8a4f;
}

.mfl-event-register-btn {
    background: #e26a26 !important;
    color: #ffffff !important;
    border-color: #e26a26 !important;
}

.mfl-event-register-btn:hover {
    background: #ed8a4f !important;
    border-color: #ed8a4f !important;
    color: #ffffff !important;
}

@media (max-width: 768px) {
    .mfl-event-detail-hero {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1.1rem;
    }

    .mfl-event-detail-hero .mfl-event-detail-logo {
        max-width: 200px;
    }

    .mfl-event-detail-bigdate-day {
        font-size: 2rem;
    }

    .mfl-event-detail-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .mfl-event-cal-dropdown {
        width: 100%;
    }

    .mfl-event-cal-toggle {
        width: 100%;
        justify-content: center;
    }

    .mfl-event-cal-menu {
        position: static;
        width: 100%;
    }
}
/* Perspectives + Resources styles - to be appended to style.css */

/* -------------------------------------------------------------------------- */
/* Perspectives — author-led detail page + grid list                          */
/* -------------------------------------------------------------------------- */

.mfl-perspectives-archive-header {
    background: linear-gradient(135deg, #f4f8fc 0%, #eaf1f8 100%);
    border-color: rgba(61, 107, 168, 0.22);
}

.mfl-perspectives-archive-intro {
    margin: 0.4rem 0 0;
    color: var(--mfl-ink-muted);
    font-size: 0.9rem;
    max-width: 64ch;
}

.mfl-perspectives-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.mfl-perspective-card {
    background: var(--mfl-surface);
    border: 1px solid var(--mfl-border);
    border-radius: 1rem;
    overflow: hidden;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.mfl-perspective-card:hover {
    border-color: rgba(61, 107, 168, 0.4);
    box-shadow: 0 4px 18px rgba(61, 107, 168, 0.12);
    transform: translateY(-2px);
}

.mfl-perspective-card-link {
    display: block;
    padding: 1.2rem 1.2rem 1.4rem;
    text-decoration: none;
    color: inherit;
}

.mfl-perspective-card-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.mfl-perspective-card-avatar {
    flex-shrink: 0;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #ffdcc5;
    background: #f4f8fc;
}

.mfl-perspective-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mfl-perspective-card-author-meta {
    min-width: 0;
}

.mfl-perspective-card-author-name {
    margin: 0;
    font-family: var(--mfl-font-sans);
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--mfl-ink);
    line-height: 1.2;
}

.mfl-perspective-card-author-role {
    margin: 0.1rem 0 0;
    font-size: 0.74rem;
    color: var(--mfl-ink-muted);
    font-weight: 600;
}

.mfl-perspective-card-title {
    margin: 0 0 0.5rem;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 1.18rem;
    font-weight: 800;
    line-height: 1.28;
    color: var(--mfl-ink);
}

.mfl-perspective-card-excerpt {
    margin: 0 0 0.85rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--mfl-ink-muted);
}

.mfl-perspective-card-meta {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.74rem;
    color: var(--mfl-ink-muted);
}

.mfl-perspective-card-topic {
    color: #ed8a4f;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Single perspective detail */
.mfl-perspective-detail {
    padding: 0;
}

.mfl-perspective-byline-card {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin: 1.2rem 1.1rem;
    padding: 1.3rem 1.4rem;
    background: linear-gradient(135deg, #f4f8fc 0%, #eaf1f8 100%);
    border: 1px solid rgba(61, 107, 168, 0.22);
    border-radius: 1rem;
}

.mfl-perspective-byline-avatar {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #ffffff;
    box-shadow: 0 4px 14px rgba(0, 17, 43, 0.12);
    background: #ffffff;
}

.mfl-perspective-byline-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mfl-perspective-byline-meta {
    min-width: 0;
}

.mfl-perspective-byline-kicker {
    margin: 0 0 0.3rem;
    font-family: var(--mfl-font-sans);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #3d6ba8;
}

.mfl-perspective-byline-name {
    margin: 0 0 0.25rem;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--mfl-ink);
}

.mfl-perspective-byline-name a {
    color: inherit;
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.mfl-perspective-byline-name a:hover {
    border-bottom-color: #3d6ba8;
}

.mfl-perspective-byline-role {
    margin: 0;
    font-size: 0.88rem;
    color: var(--mfl-ink-muted);
}

.mfl-perspective-feature-media {
    margin: 0 1.1rem 0;
    padding: 0;
    border-radius: 1rem;
    overflow: hidden;
}

.mfl-perspective-feature-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 7.5;
    object-fit: cover;
}

/* Perspective body inherits the standard story body fonts/sizes */

.mfl-perspective-author-bio {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin: 1.5rem 1.1rem 1.1rem;
    padding: 1.2rem;
    background: #f4f8fc;
    border: 1px solid rgba(61, 107, 168, 0.22);
    border-radius: 1rem;
}

.mfl-perspective-author-bio-avatar {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #ffffff;
}

.mfl-perspective-author-bio-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mfl-perspective-author-bio-text h3, .mfl-perspective-author-bio-text h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
}

.mfl-perspective-author-bio-label {
    margin: 0 0 0.15rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #3d6ba8;
}

.mfl-perspective-author-bio-role {
    margin: 0.1rem 0 0.5rem;
    font-size: 0.85rem;
    color: var(--mfl-ink-muted);
}

.mfl-perspective-author-bio-desc {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--mfl-ink);
}

.mfl-perspective-author-bio-link {
    color: #3d6ba8;
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
}

.mfl-perspective-author-bio-link:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .mfl-perspective-byline-card {
        flex-direction: column;
        text-align: center;
        gap: 0.8rem;
    }

    .mfl-perspective-byline-avatar {
        width: 80px;
        height: 80px;
    }

    .mfl-perspective-author-bio {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

}

/* -------------------------------------------------------------------------- */
/* Resources — bookshelf-style grid + bigger cover on detail page             */
/* -------------------------------------------------------------------------- */

.mfl-resources-archive-header {
    background: linear-gradient(135deg, #ffefe4 0%, #ffdcc5 100%);
    border-color: rgba(226, 106, 38, 0.22);
}

.mfl-resources-archive-intro {
    margin: 0.4rem 0 0;
    color: var(--mfl-ink-muted);
    font-size: 0.9rem;
    max-width: 64ch;
}

.mfl-resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.4rem;
    margin-top: 1rem;
}

.mfl-resource-card {
    transition: transform 0.2s ease;
}

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

.mfl-resource-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.mfl-resource-card-cover {
    position: relative;
    aspect-ratio: 8.5 / 11;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 4px 5px 14px rgba(0, 17, 43, 0.16), 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #ffffff;
    margin-bottom: 0.85rem;
}

.mfl-resource-card-cover::before { content: none; }

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

.mfl-resource-card-cover-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, #1a3a5e 0%, #e26a26 100%);
}

.mfl-resource-card-cover-title {
    position: absolute;
    bottom: 14px;
    left: 14px;
    right: 14px;
    z-index: 2;
    color: #ffffff;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.25;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mfl-resource-card-body {
    padding: 0;
}

.mfl-resource-card-title {
    margin: 0 0 0.3rem;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--mfl-ink);
}

.mfl-resource-card-sponsor {
    margin: 0 0 0.45rem;
    font-size: 0.72rem;
    color: var(--mfl-ink-muted);
    line-height: 1.3;
}

.mfl-resource-card-sponsor em {
    font-style: italic;
    color: var(--mfl-ink);
    font-weight: 700;
}

.mfl-resource-card-excerpt {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--mfl-ink-muted);
}

.mfl-resource-card-topic {
    margin: 0 0 0.4rem;
    font-size: 0.7rem;
    font-weight: 800;
    color: #ed8a4f;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mfl-resource-card-cta {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 800;
    color: #e26a26;
}

/* Resources kind filter — a quiet segmented VIEW switcher, deliberately
   different from the orange action pills above it (Eric, 2026-09-02: the two
   rows read as one busy filter bar). One joined capsule, navy active state,
   small SHOW label. Client-side only: no query args, no form. */
.mfl-resources-filter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 2.25rem 0 -0.5rem; /* grid carries ~29px of its own top space; net ~48px above, ~21px below */
}


.mfl-resources-filter-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #586374;
}

.mfl-resources-filter-group {
    display: inline-flex;
    border: 1px solid #cfd9e2;
    border-radius: 999px;
    background: #fff;
    overflow: hidden;
}

.mfl-resources-filter-btn {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    background: transparent;
    color: #3d5a73;
    font: inherit;
    font-size: 0.83rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 0.42rem 1rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.mfl-resources-filter-btn + .mfl-resources-filter-btn {
    border-left: 1px solid #e3ebf1;
}

.mfl-resources-filter-btn:hover {
    background: #f4fbff;
    color: #00112b;
}

.mfl-resources-filter-btn.is-active {
    /* The bar's own blue (same as the active Filter toggle), not near-black
       navy — reads as a deliberate brand color while staying quiet against the
       orange action pills (Eric: the black is a little off-brand). */
    background: #3d6ba8;
    color: #fff;
}

.mfl-resource-card.is-filtered-out { display: none; }

/* Calculator/tool cover — same PORTRAIT footprint as the ebook covers, but a
   distinct tool treatment: dark panel, orange border, a Free Tool badge. The
   screenshot fills the frame when present; until then a designed placeholder
   (calculator mark + tool name) shows, not a blank gradient. */
.mfl-resource-card-cover--tool {
    aspect-ratio: 8.5 / 11;
    border: 2px solid #e26a26;
    background: linear-gradient(158deg, #00112b 0%, #0a2440 55%, #143a63 100%);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    padding: 1.4rem 1.15rem;
    text-align: center;
}

.mfl-tool-cover-badge {
    position: absolute;
    top: 11px;
    right: 11px;
    z-index: 2;
    background: #e26a26;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.22rem 0.6rem;
    border-radius: 4px;
}

/* The tool screenshot is captured PORTRAIT to match this cover's footprint, so
   it fills the frame edge to edge (cover) the way an ebook cover does. The
   navy panel and orange border are its frame; the "Free Tool" badge sits over
   the top corner. A landscape capture would crop badly here — tools are shot
   portrait for this reason. */
.mfl-tool-cover-shot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.mfl-tool-cover-art {
    color: #e26a26;
    line-height: 0;
}

.mfl-tool-cover-art svg { display: block; }

.mfl-tool-cover-name {
    font-family: var(--mfl-font-serif, 'Source Serif 4', Georgia, serif);
    font-weight: 800;
    font-size: 1.05rem;
    line-height: 1.25;
    color: #fff;
    max-width: 15ch;
}

/* Concept Map "Related to your search" — always BELOW the exact matches,
   clearly separated, each group labeled with the concept it came from. */
.mfl-search-related {
    margin-top: 2rem;
    padding-top: 1.4rem;
    border-top: 2px solid var(--mfl-border);
}

.mfl-search-related-heading {
    font-size: 1.15rem;
    margin: 0 0 0.2rem;
    color: var(--mfl-ink);
}

.mfl-search-related-group { margin-top: 1.1rem; }

.mfl-search-related-why {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #e26a26;
    background: rgba(226, 106, 38, 0.10);
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    margin: 0 0 0.6rem;
}

/* "No results for X. Showing results for Y instead." */
.mfl-search-correction {
    margin: 0 0 1.1rem;
    padding: 0.7rem 0.9rem;
    background: var(--mfl-surface-alt, #f3f6f8);
    border-left: 3px solid #e26a26;
    border-radius: 4px;
    color: var(--mfl-ink);
    font-size: 0.95rem;
}

.mfl-search-correction strong { color: var(--mfl-brand, #e26a26); }

.mfl-resource-detail-hero {
    display: grid;
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    gap: 1.8rem;
    align-items: center;
    padding: 1.8rem 1.5rem;
    background: linear-gradient(135deg, #ffefe4 0%, #ffdcc5 100%);
    border: 1px solid rgba(226, 106, 38, 0.25);
    border-radius: 1rem;
    margin: 1.2rem 1.1rem;
}

.mfl-resource-detail-cover {
    position: relative;
    aspect-ratio: 8.5 / 11;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 7px 8px 22px rgba(0, 17, 43, 0.25), 0 2px 6px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(0, 0, 0, 0.06);
    margin: 0 auto;
    width: 100%;
    max-width: 240px;
}

.mfl-resource-detail-cover::before { content: none; }

.mfl-resource-detail-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mfl-resource-detail-cover-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, #1a3a5e 0%, #e26a26 100%);
}

.mfl-resource-detail-info {
    min-width: 0;
}

.mfl-resource-detail-kicker {
    margin: 0 0 0.4rem;
    font-family: var(--mfl-font-sans);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #ed8a4f;
}

.mfl-resource-detail-sponsor {
    margin: 0 0 0.85rem;
    font-size: 0.92rem;
    color: var(--mfl-ink-muted);
}

.mfl-resource-detail-sponsor em {
    font-style: italic;
    color: var(--mfl-ink);
    font-weight: 700;
}

.mfl-resource-detail-excerpt {
    margin: 0 0 1.1rem;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--mfl-ink);
}

.mfl-resource-detail-cta {
    background: #e26a26 !important;
    color: #ffffff !important;
    border-color: #e26a26 !important;
    font-size: 0.95rem !important;
    padding: 0.55rem 1.4rem !important;
}

.mfl-resource-detail-cta:hover {
    background: #ed8a4f !important;
    border-color: #ed8a4f !important;
    color: #ffffff !important;
}

@media (max-width: 768px) {
    .mfl-resource-detail-hero {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 1rem;
        padding: 1.2rem;
    }

    .mfl-resource-detail-cover {
        max-width: 180px;
    }

    .mfl-resources-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 1rem;
    }
}

/* ==========================================================================
   Image fit — SURGICAL. The theme already gives most media boxes a fixed
   aspect-ratio + object-fit:cover (do NOT change those). The one exception is
   the homepage Editor's Picks row, whose card media has no ratio, so cards took
   the natural height of each image and rows came out uneven. Give that row one
   fixed ratio for ALL cards (image or placeholder) so heights match, and cover-
   fill the images (zoom). Placeholders keep their white/orange styling.
   Added 2026-07.
   ========================================================================== */
.mfl-home-topic-grid .mfl-lane-card-media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.mfl-home-topic-grid .mfl-lane-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* --------------------------------------------------------------------------
 * MFL Editorial Page (About / Team / Contact / Sightline / Advertise /
 * Submit Press Release / Promote an Event)
 *
 * Hero band + constrained reading column + optional action form.
 * -------------------------------------------------------------------------- */
.mfl-editorial-page {
    display: block;
    margin: 0 0 3rem;
}

.mfl-editorial-hero {
    padding: 3.25rem 0 2.75rem;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid rgba(226, 106, 38, 0.16);
}

.mfl-editorial-accent-peach .mfl-editorial-hero {
    background: linear-gradient(160deg, #ffefe4 0%, #ffdcc5 55%, #ffffff 100%);
}
.mfl-editorial-accent-blue .mfl-editorial-hero {
    background: linear-gradient(160deg, #eef4fb 0%, #dfeaf6 55%, #ffffff 100%);
    border-bottom-color: rgba(61, 107, 168, 0.18);
}
.mfl-editorial-accent-plain .mfl-editorial-hero {
    background: #ffffff;
    border-bottom-color: var(--mfl-border);
}

.mfl-editorial-hero-inner {
    max-width: 780px;
    margin: 0 auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    text-align: left;
}

.mfl-editorial-kicker {
    margin: 0 0 0.75rem;
    color: #e26a26;
    font-family: var(--mfl-font-sans);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.mfl-editorial-accent-blue .mfl-editorial-kicker {
    color: #3d6ba8;
}

.mfl-editorial-title {
    margin: 0 0 1rem;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: clamp(2rem, 4.4vw, 3rem);
    font-weight: 700;
    line-height: 1.14;
    color: var(--mfl-ink);
    letter-spacing: -0.01em;
}

.mfl-editorial-lede {
    margin: 0;
    font-family: var(--mfl-font-sans);
    font-size: 1.12rem;
    line-height: 1.55;
    color: var(--mfl-ink-muted);
    max-width: 62ch;
}

.mfl-editorial-shell {
    padding: 0 1.25rem;
}

.mfl-editorial-column {
    max-width: 720px;
    margin: 0 auto;
}

.mfl-editorial-body {
    font-family: var(--mfl-font-sans);
    font-size: 1.06rem;
    line-height: 1.7;
    color: var(--mfl-ink);
}

.mfl-editorial-body p {
    margin: 0 0 1.15rem;
}

/* Direct children only — see the .mfl-story-body note about div-wrapped pastes. */
.mfl-editorial-body > p:last-child,
.mfl-editorial-body > div:last-child > p:last-child { margin-bottom: 0; }

.mfl-editorial-body h2 {
    margin: 2rem 0 0.75rem;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: clamp(1.35rem, 2.4vw, 1.6rem);
    line-height: 1.24;
    color: var(--mfl-ink);
    font-weight: 700;
}

.mfl-editorial-body h3 {
    margin: 1.75rem 0 0.55rem;
    font-family: var(--mfl-font-sans);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--mfl-ink);
    letter-spacing: 0.01em;
}

.mfl-editorial-body ul,
.mfl-editorial-body ol {
    margin: 0 0 1.4rem;
    padding: 0 0 0 1.35rem;
}

.mfl-editorial-body li {
    margin: 0 0 0.55rem;
    line-height: 1.55;
}

.mfl-editorial-body ul li::marker {
    color: #e26a26;
    font-size: 1.1em;
}

/* Short punchy stack ("No politics. / No agendas. / No filler.") */
.mfl-editorial-body p:has(> br),
.mfl-editorial-body p.mfl-editorial-punch {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 1.24rem;
    font-weight: 700;
    color: #e26a26;
    line-height: 1.4;
}

.mfl-editorial-body blockquote {
    margin: 1.75rem 0;
    padding: 1rem 1.35rem;
    border-left: 4px solid #e26a26;
    background: linear-gradient(90deg, rgba(253, 238, 227, 0.55) 0%, rgba(253, 238, 227, 0) 100%);
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 1.16rem;
    font-style: italic;
    color: var(--mfl-ink);
    border-radius: 0 0.5rem 0.5rem 0;
}

/* Action-form wrap — soft card that follows the reading column width. */
.mfl-editorial-form-wrap {
    margin-top: 2.5rem;
    padding: 1.75rem 1.75rem 1.5rem;
    background: #ffffff;
    border: 1px solid rgba(226, 106, 38, 0.22);
    border-radius: 1rem;
    box-shadow: 0 4px 22px rgba(0, 17, 43, 0.05);
}
.mfl-editorial-accent-blue .mfl-editorial-form-wrap {
    border-color: rgba(61, 107, 168, 0.22);
}

.mfl-editorial-form-wrap .mfl-action-form-header h2 {
    margin: 0 0 0.35rem;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 1.5rem;
    color: var(--mfl-ink);
}

.mfl-editorial-form-wrap .mfl-action-form-header p {
    margin: 0 0 1.25rem;
    color: var(--mfl-ink-muted);
    font-size: 0.98rem;
}

@media (max-width: 720px) {
    .mfl-editorial-hero { padding: 2.5rem 0 2rem; }
    .mfl-editorial-title { font-size: clamp(1.65rem, 6vw, 2.15rem); }
    .mfl-editorial-body { font-size: 1.02rem; }
    .mfl-editorial-form-wrap { padding: 1.35rem; }
}

/* Personal welcome block (About Us — Eric's message) */
.mfl-editorial-welcome {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
    padding: 1.5rem 1.5rem 1.75rem;
    margin: 0 0 2rem;
    background: linear-gradient(160deg, #ffefe4 0%, #ffdcc5 100%);
    border: 1px solid rgba(226, 106, 38, 0.22);
    border-radius: 1rem;
}

.mfl-editorial-welcome-avatar {
    width: 120px;
    height: 120px;
    border-radius: 999px;
    overflow: hidden;
    background: #ffffff;
    border: 2px solid rgba(226, 106, 38, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
}
.mfl-editorial-welcome-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mfl-editorial-welcome-initials {
    font-family: var(--mfl-font-sans);
    font-weight: 800;
    font-size: 1.5rem;
    color: #b8541f;
    letter-spacing: 0.04em;
}

.mfl-editorial-welcome-body p {
    margin: 0 0 0.9rem;
    font-family: var(--mfl-font-sans);
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--mfl-ink);
}
.mfl-editorial-welcome-body p:last-child { margin-bottom: 0; }

.mfl-editorial-welcome-byline {
    margin: 0 0 0.85rem !important;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid rgba(226, 106, 38, 0.18);
    font-family: var(--mfl-font-sans);
}
.mfl-editorial-welcome-byline strong { color: var(--mfl-ink); font-weight: 800; }
.mfl-editorial-welcome-role {
    display: block;
    color: #b8541f;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: 0.2rem;
}
.mfl-editorial-welcome-signoff {
    font-family: "Source Serif 4", Georgia, serif;
    font-style: italic;
    color: #b8541f;
    font-weight: 700;
}

@media (max-width: 620px) {
    .mfl-editorial-welcome {
        grid-template-columns: 1fr;
        text-align: left;
        padding: 1.25rem 1.25rem 1.5rem;
    }
    .mfl-editorial-welcome-avatar {
        width: 96px;
        height: 96px;
    }
}

/* Team grid on Our Team */
.mfl-editorial-team {
    margin: 2.5rem 0 0;
}

.mfl-editorial-team-heading {
    font-family: "Source Serif 4", Georgia, serif !important;
    font-size: 1.5rem !important;
    color: var(--mfl-ink) !important;
    margin: 0 0 1.25rem !important;
    text-align: center;
}

/* Flex-based team grid: capped at 3 across so 5 members render as 3 + 2
   centered instead of an uneven 4 + 1 row on wide screens. */
.mfl-editorial-team-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.4rem 1.25rem;
}

.mfl-editorial-team-card {
    flex: 0 0 calc((100% - 2.5rem) / 3);
    max-width: 220px;
    min-width: 160px;
}

@media (max-width: 720px) {
    .mfl-editorial-team-card {
        flex: 0 0 calc((100% - 1.25rem) / 2);
    }
}

@media (max-width: 460px) {
    .mfl-editorial-team-card {
        flex: 0 0 100%;
        max-width: 320px;
    }
}

.mfl-editorial-team-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.15rem 0.75rem 1.25rem;
    background: #ffffff;
    border: 1px solid var(--mfl-border);
    border-radius: 0.85rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.mfl-editorial-team-card:hover {
    border-color: rgba(226, 106, 38, 0.4);
    box-shadow: 0 8px 22px rgba(0, 17, 43, 0.06);
    transform: translateY(-2px);
}

/* The whole card is the click target for the person's author archive. The card
   already had a hover state before it was clickable, which promised a link that
   did not exist; the anchor makes good on it. The link text names the
   destination for screen readers and is covered by the overlay visually, so the
   headshot and name read as one target rather than two. */
.mfl-editorial-team-card--linked { position: relative; }
/* The anchor IS the overlay; its label is hidden by .screen-reader-text on the
   span inside. Clipping the anchor itself and covering the card with its
   ::after does not work: the clip applies to the pseudo-element too. */
.mfl-editorial-team-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    text-decoration: none;
}
.mfl-editorial-team-card--linked:focus-within {
    border-color: rgba(226, 106, 38, 0.55);
    box-shadow: 0 0 0 3px rgba(226, 106, 38, 0.25);
}
.mfl-editorial-team-card--linked:hover .mfl-editorial-team-name { color: var(--mfl-orange, #e26a26); }

.mfl-editorial-team-avatar {
    width: 96px;
    height: 96px;
    border-radius: 999px;
    overflow: hidden;
    background: #ffffff;
    border: 2px solid rgba(226, 106, 38, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.85rem;
    box-sizing: border-box;
}
.mfl-editorial-team-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mfl-editorial-team-initials {
    font-family: var(--mfl-font-sans);
    font-weight: 800;
    font-size: 1.35rem;
    color: #b8541f;
    letter-spacing: 0.04em;
}

.mfl-editorial-team-name {
    margin: 0 0 0.2rem !important;
    font-family: var(--mfl-font-sans) !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: var(--mfl-ink);
}

.mfl-editorial-team-role {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    /* The site's canonical dark orange (card-title hovers, links, kickers),
       not the muddier one-off #b8541f (Eric: the team role read off-brand). */
    color: #c2541a;
}

/* Action-form additions: help hints + checkbox groups */
.mfl-action-field-help {
    margin: 0.15rem 0 0.5rem;
    font-size: 0.82rem;
    color: var(--mfl-ink-muted);
    line-height: 1.5;
}

.mfl-action-checkbox-group {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    background: rgba(253, 238, 227, 0.35);
    border: 1px solid rgba(226, 106, 38, 0.18);
    border-radius: 0.6rem;
}

@media (min-width: 620px) {
    .mfl-action-checkbox-group {
        grid-template-columns: 1fr 1fr;
        gap: 0.55rem 1.25rem;
    }
}

.mfl-action-checkbox-option {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.3rem 0;
    font-family: var(--mfl-font-sans);
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--mfl-ink);
    cursor: pointer;
}
.mfl-action-checkbox-option input[type="checkbox"] {
    margin-top: 0.2rem;
    accent-color: #e26a26;
    flex-shrink: 0;
}
.mfl-action-checkbox-option:hover span { color: #b8541f; }

/* --------------------------------------------------------------------------
 * Newsletter signup card (Sightline signup embedded inside site chrome)
 *
 * The .mfl-ea-* classes come from the coming-soon page's markup; the .mfl-ns-*
 * classes add the chrome specific to the newsletter page (progress dots,
 * hero-adjacent card, success state). All warm-orange only.
 * -------------------------------------------------------------------------- */
.mfl-newsletter-signup-wrap {
    margin-top: 2.5rem;
    margin-bottom: 3rem;
}
/* Tighten the standout "punch" paragraph so it doesn't leave a big
   whitespace gap between it and the next paragraph. */
.mfl-newsletter-page .mfl-editorial-body p.mfl-editorial-punch,
.mfl-newsletter-page .mfl-editorial-body p:has(> br) {
    margin-bottom: 0.35rem;
}

.mfl-ns-card {
    background: #ffffff;
    border: 1px solid rgba(226, 106, 38, 0.22);
    border-radius: 1rem;
    padding: 2rem 2rem 1.75rem;
    box-shadow: 0 6px 26px rgba(0, 17, 43, 0.05);
}

.mfl-ns-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin: 0 0 1.5rem;
}
.mfl-ns-progress-dot {
    width: 32px;
    height: 5px;
    border-radius: 999px;
    background: #f0b98a;
    transition: background 0.3s ease;
}
.mfl-ns-progress-dot.is-active { background: #e26a26; }

.mfl-ns-hint {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    color: var(--mfl-ink-muted);
}

.mfl-ns-success {
    text-align: center;
    padding: 1rem 0.5rem;
}
.mfl-ns-success-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(226, 106, 38, 0.14);
    color: #e26a26;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}
.mfl-ns-success h2 {
    margin: 0 0 0.4rem;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 1.5rem;
    color: var(--mfl-ink);
}
.mfl-ns-success p {
    margin: 0;
    color: var(--mfl-ink-muted);
    font-size: 1rem;
}

/* mfl-ea-* — reused signup step styles, warm accent only */
.mfl-ea-form { display: block; }

.mfl-ea-step { display: none; }
.mfl-ea-step.is-active { display: block; }

.mfl-ea-step-label {
    margin: 0 0 0.9rem;
    font-family: var(--mfl-font-sans);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #e26a26;
    text-align: center;
}

.mfl-ea-step-email .mfl-ea-step-label { text-align: center; }
.mfl-ea-step-email-inner {
    max-width: 460px;
    margin: 0 auto;
}
.mfl-ea-input-lg {
    font-size: 1.05rem;
    padding: 0.85rem 1rem;
}
.mfl-ea-actions-center { justify-content: center !important; }
.mfl-ea-actions-center .mfl-ea-btn { min-width: 220px; }

.mfl-ea-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem 1rem;
    margin-bottom: 0.5rem;
}
.mfl-ea-grid .mfl-ea-row-full { grid-column: 1 / -1; }

.mfl-ea-row { display: block; margin-bottom: 0; }
.mfl-ea-row label {
    display: block;
    font-family: var(--mfl-font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--mfl-ink);
    margin-bottom: 0.25rem;
    letter-spacing: 0.02em;
}

.mfl-ea-input {
    width: 100%;
    padding: 0.55rem 0.85rem;
    font-family: var(--mfl-font-sans);
    font-size: 0.95rem;
    color: var(--mfl-ink);
    background: #ffffff;
    border: 1.5px solid #f0b98a;
    border-radius: 0.55rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}
.mfl-ea-input::placeholder { color: #a8b6c4; }
.mfl-ea-input:focus {
    outline: none;
    border-color: #e26a26;
    box-shadow: 0 0 0 3px rgba(226, 106, 38, 0.14);
}

.mfl-ea-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23e26a26' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 10px;
    padding-right: 2.4rem;
    cursor: pointer;
}

.mfl-ea-other-row[hidden] { display: none !important; }

.mfl-ea-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: 1.25rem;
}

.mfl-ea-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.65rem 1.4rem;
    font-family: var(--mfl-font-sans);
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    border-radius: 2rem;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
}
.mfl-ea-btn-primary {
    background: #e26a26;
    color: #ffffff;
    border-color: #e26a26;
    flex: 1 1 auto;
}
.mfl-ea-btn-primary:hover {
    background: #ed8a4f;
    border-color: #ed8a4f;
    transform: translateY(-1px);
}
.mfl-ea-btn-secondary {
    background: #ffffff;
    color: var(--mfl-ink);
    border-color: rgba(226, 106, 38, 0.32);
}
.mfl-ea-btn-secondary:hover {
    background: rgba(226, 106, 38, 0.10);
    color: #b8541f;
}

.mfl-ea-error {
    margin: 0.55rem 0 0;
    font-size: 0.85rem;
    color: #c2410c;
    min-height: 1.1em;
}

.mfl-ea-disclaimer {
    margin: 1.25rem 0 0;
    padding: 0.75rem 0 0;
    border-top: 1px solid rgba(226, 106, 38, 0.14);
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--mfl-ink-muted);
    text-align: center;
}
.mfl-ea-disclaimer a {
    color: #e26a26;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.mfl-ea-disclaimer a:hover { color: #b8541f; }

/* Honeypot: keep off-screen but avoid layout artifacts */
.mfl-ea-hp {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 620px) {
    .mfl-ns-card { padding: 1.35rem 1.15rem; }
    .mfl-ea-grid { grid-template-columns: 1fr; gap: 0.75rem; }
    .mfl-ea-actions { flex-direction: column-reverse; align-items: stretch; }
    .mfl-ea-btn-secondary { text-align: center; }
}

/* Unified archive header background — matches Resources across all lanes. */
.mfl-archive-header.mfl-module,
.mfl-archive-header {
    background: linear-gradient(135deg, #ffefe4 0%, #ffdcc5 100%) !important;
    border-color: rgba(226, 106, 38, 0.22) !important;
}

/* Perspective posts in card contexts: circular headshot centered on
   a white 16:9 tile, so cards align with News/BP/IU heights. */
/* Perspective in card contexts: just the small circular headshot, no
   forced 16:9 tile, no border, no zoom. Matches how the headshot is
   used elsewhere on the site. */
.mfl-media-perspective {
    display: inline-block;
    background: transparent;
    border: none !important;
    border-radius: 0;
    overflow: visible;
    aspect-ratio: auto;
    width: auto;
    padding: 0.35rem 0;
}
.mfl-media-perspective .mfl-media-perspective-frame {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
}
.mfl-media-perspective .mfl-media-perspective-img {
    width: 96px;
    height: 96px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    box-shadow: 0 2px 8px rgba(0, 17, 43, 0.08);
    transition: none;
}
.mfl-media-perspective .mfl-media-perspective-initials {
    font-family: -apple-system, "Segoe UI", sans-serif;
    font-weight: 800;
    font-size: 1.6rem;
    color: #b8541f;
    letter-spacing: 0.06em;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: #faf8f5;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mfl-card:hover .mfl-media-perspective-img,
.mfl-more-story:hover .mfl-media-perspective-img,
a:hover .mfl-media-perspective-img,
.mfl-media-perspective:hover .mfl-media-perspective-img {
    transform: none !important;
}

/* When the media wrapper is a perspective (combined classes like
   .mfl-more-story-media.mfl-media-perspective or
   .mfl-card-media.mfl-media-perspective), override the tile styling that
   would force 16:9 + image-fill. Just show the circle at its natural
   96px, no tile background, no border, no rounded rectangle. */
/* Perspective media in cards: KEEP the outer dimensions (width +
   aspect-ratio) that the base .mfl-*-media rule assigns, so the title
   and blurb column starts at the same X as News/BP rows. Just center
   the small circular headshot inside, no border, no tile background. */
.mfl-more-story-media.mfl-media-perspective,
.mfl-card-media.mfl-media-perspective,
.mfl-lane-card-media.mfl-media-perspective,
.mfl-grid-thumb.mfl-media-perspective {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    overflow: hidden !important;
}
.mfl-more-story-media.mfl-media-perspective .mfl-media-perspective-frame,
.mfl-card-media.mfl-media-perspective .mfl-media-perspective-frame,
.mfl-lane-card-media.mfl-media-perspective .mfl-media-perspective-frame,
.mfl-grid-thumb.mfl-media-perspective .mfl-media-perspective-frame {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.55rem;
    width: 100%;
    height: 100%;
}
.mfl-more-story-media.mfl-media-perspective img,
.mfl-card-media.mfl-media-perspective img,
.mfl-lane-card-media.mfl-media-perspective img,
.mfl-grid-thumb.mfl-media-perspective img {
    width: 96px !important;
    height: 96px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
    box-sizing: border-box !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0, 17, 43, 0.08);
    transition: none !important;
    transform: none !important;
}

/* Light peach border around all main content image containers. Border
   lives on the wrapper (which already has overflow:hidden), so the image
   can zoom on hover without the border moving or clipping. Excludes:
   perspective headshots (circle only, no border) and the homepage hero. */
.mfl-card-media,
.mfl-home-lead-media,
.mfl-lane-card-media,
.mfl-more-story-media,
.mfl-grid-thumb,
.mfl-feed-list .mfl-card-media {
    border: 1px solid rgba(226, 106, 38, 0.28);
    box-sizing: border-box;
}
/* Article hero: border on the image frame (rounded), NOT on the outer
   figure which also contains the caption + credit lines below. */
.mfl-story-featured-media { border: none !important; }
.mfl-story-featured-media-frame {
    border: 1px solid rgba(226, 106, 38, 0.28) !important;
    border-radius: 1rem;
    overflow: hidden;
    box-sizing: border-box;
}
.mfl-home-hero-image-bridge,
.mfl-home-hero-image-bridge .mfl-home-lead-media,
.mfl-bridge-image,
.mfl-media-perspective {
    border: none !important;
}

/* Homepage section titles that link to their archive: keep the h2/h3
   color and size, drop the underline. */
.mfl-home-section-title a,
.mfl-home-section-title a:link,
.mfl-home-section-title a:visited {
    color: inherit !important;
    text-decoration: none !important;
    background: none !important;
    border-bottom: 0 !important;
}
.mfl-home-section-title a:hover,
.mfl-home-section-title a:focus {
    color: #b8541f !important;
    text-decoration: none !important;
}

/* (Reverted the "no-upscale" experiment — images fill their slot again
   via object-fit: cover, matching the site's previous behavior.) */

/* Perspective media in cards: center headshot + badge INSIDE whatever
   dimensions the parent card layout already set. Do NOT override width
   or add !important — let .mfl-feed-list (250px slot), .mfl-more-story
   (small thumb), etc. keep controlling the outer size. */
.mfl-media-perspective .mfl-media-perspective-frame {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    height: 100%;
}
.mfl-media-perspective .mfl-media-perspective-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: -apple-system, "Segoe UI", sans-serif;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #b8541f;
    background: linear-gradient(135deg, #ffefe4 0%, #ffdcc5 100%);
    border: 1px solid rgba(226, 106, 38, 0.35);
    border-radius: 999px;
    padding: 0.22rem 0.6rem 0.22rem 0.5rem;
    line-height: 1;
}
.mfl-media-perspective .mfl-media-perspective-badge-icon {
    font-family: "Source Serif 4", Georgia, serif;
    font-weight: 800;
    font-size: 1rem;
    color: #e26a26;
    line-height: 0;
    position: relative;
    top: 0.28rem;
}

/* Article body inline image alignment — covers ALL three markup shapes
   WordPress produces: Gutenberg block (<figure class="wp-block-image ...>),
   classic-editor bare image (<img class="alignleft" ...>), and classic
   editor with caption (<div class="wp-caption alignleft">). */
.mfl-story-body .alignleft,
.mfl-story-body .wp-block-image.alignleft,
.mfl-story-body .wp-caption.alignleft,
.mfl-story-body img.alignleft {
    float: left !important;
    margin: 0.4rem 1.25rem 1rem 0 !important;
    max-width: 42% !important;
    clear: left;
}
.mfl-story-body .alignright,
.mfl-story-body .wp-block-image.alignright,
.mfl-story-body .wp-caption.alignright,
.mfl-story-body img.alignright {
    float: right !important;
    margin: 0.4rem 0 1rem 1.25rem !important;
    max-width: 42% !important;
    clear: right;
}
.mfl-story-body .aligncenter,
.mfl-story-body .wp-block-image.aligncenter,
.mfl-story-body .wp-caption.aligncenter,
.mfl-story-body img.aligncenter {
    display: block;
    margin: 1.25rem auto !important;
    max-width: 100% !important;
    clear: both;
    float: none;
}
.mfl-story-body .alignnone,
.mfl-story-body img.alignnone {
    display: block;
    margin: 1.25rem 0 !important;
    max-width: 100%;
    clear: both;
    float: none;
}
.mfl-story-body .mfl-story-inline-image {
    max-width: 42%;
    margin: 0.4rem 0 1rem;
}
/* Uniform-cropped headshots (Eric 2026-09-03): fixed width + a shared aspect
   ratio so five photos of different source dimensions (square, portrait, one
   awkward landscape crop) all read as one consistent treatment next to the
   paragraph that introduces each person. Narrower than a full editorial
   inline photo, since this is a face rather than a scene, and the figcaption
   carries the person's name rather than a sentence of caption text. */
/* Selector carries figure + three classes (0,3,1) with !important because the
   alignment rules below set `max-width: 42% !important` on
   `.mfl-story-body .wp-block-image.alignright` (0,3,0). A two-class rule loses
   to that no matter where it sits in the file, which is exactly what happened
   on the first pass: aspect-ratio and object-fit applied while the width
   silently stayed at 42%. */
.mfl-story-body figure.wp-block-image.mfl-story-headshot {
    max-width: 160px !important;
}
.mfl-story-body .mfl-story-headshot img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center top;
}
.mfl-story-body .mfl-story-headshot figcaption {
    text-align: center;
    font-weight: 700;
    color: var(--mfl-ink, #00112b);
    margin: 0.5rem 0 0;
}
/* Inline body images: one framed unit, per Eric 2026-09-01. The brand-orange
   frame wraps the image AND its caption AND its credit as a single block, so
   the caption can never read as loose body text. Three markup shapes get the
   same treatment: figure.wp-block-image (Gutenberg), .wp-caption (classic
   caption shortcode), and .mfl-inline-figure (the render-time wrapper
   inc/inline-images.php puts around bare imgs that carry a credit). */
.mfl-story-body figure.wp-block-image,
.mfl-story-body .wp-caption,
.mfl-story-body .mfl-inline-figure {
    border: 1.5px solid rgba(226, 106, 38, 0.55);
    border-radius: 0.65rem;
    background: #fdf8f4;
    padding: 0.55rem;
    box-sizing: border-box;
}
.mfl-story-body img,
.mfl-story-body .wp-block-image img,
.mfl-story-body .wp-caption img {
    display: block;
    height: auto;
    max-width: 100%;
    border-radius: 0.35rem;
    box-sizing: border-box;
}
/* A bare img with no caption still gets the frame, carried by the img itself. */
.mfl-story-body > p > img.alignleft,
.mfl-story-body > p > img.alignright,
.mfl-story-body > p > img.aligncenter,
.mfl-story-body > img {
    border: 1.5px solid rgba(226, 106, 38, 0.55);
    border-radius: 0.65rem;
    background: #fdf8f4;
    padding: 0.55rem;
}
/* Caption and credit: the brand sans, small, upright. The credit sits after
   the caption in a dimmer weight with the same label the featured image uses. */
.mfl-story-body .wp-caption-text,
.mfl-story-body figcaption {
    font-family: var(--mfl-font-sans, "Source Sans 3", "Segoe UI", sans-serif);
    font-size: 0.82rem;
    font-style: normal;
    line-height: 1.45;
    color: #4a5461;
    margin: 0.5rem 0.15rem 0.05rem;
    text-align: left;
}
.mfl-story-body .mfl-inline-credit {
    display: inline-block;
    font-family: var(--mfl-font-sans, "Source Sans 3", "Segoe UI", sans-serif);
    font-size: 0.76rem;
    color: #8a93a1;
    letter-spacing: 0.01em;
}
.mfl-story-body .wp-caption-text .mfl-inline-credit,
.mfl-story-body figcaption .mfl-inline-credit {
    margin-left: 0.4rem;
}
/* Editor Formats > "Image caption" (inc/editor-formats.php): a caption line an
   editor typed in the body rather than in the media modal. Same face as a real
   figcaption above, with a little more bottom margin because it is a standalone
   paragraph rather than something tucked under an image. Mirrored in
   assets/css/editor-style.css so wp-admin shows what publishes. */
.mfl-story-body .mfl-caption {
    font-family: var(--mfl-font-sans, "Source Sans 3", "Segoe UI", sans-serif);
    font-size: 0.82rem;
    font-style: normal;
    line-height: 1.45;
    color: #4a5461;
    margin: 0.5rem 0.15rem 0.9rem;
    text-align: left;
}
/* A credit applied inside a typed caption reads the same as one the render
   filter injects into a figcaption. */
.mfl-story-body .mfl-caption .mfl-inline-credit { margin-left: 0.4rem; }

/* Headings clear floats so nothing sits half-behind an aligned image. */
.mfl-story-body h2,
.mfl-story-body h3,
.mfl-story-body h4 { clear: both; }
/* Trailing clearfix on the body so floats don't spill past its bottom edge. */
.mfl-story-body::after {
    content: "";
    display: block;
    clear: both;
}
@media (max-width: 640px) {
    .mfl-story-body .alignleft,
    .mfl-story-body .alignright,
    .mfl-story-body .wp-block-image.alignleft,
    .mfl-story-body .wp-block-image.alignright,
    .mfl-story-body .wp-caption.alignleft,
    .mfl-story-body .wp-caption.alignright,
    .mfl-story-body img.alignleft,
    .mfl-story-body img.alignright,
    .mfl-story-body .mfl-story-inline-image {
        float: none !important;
        margin: 1rem 0 !important;
        max-width: 100% !important;
    }
    /* A headshot stays small and centered on mobile rather than blowing up
       to the full column width like an editorial photo would. Same specificity
       reason as the desktop rule: the mobile alignment rule just above is
       `max-width: 100% !important` at 0,3,0. */
    .mfl-story-body figure.wp-block-image.mfl-story-headshot {
        max-width: 120px !important;
        margin: 1rem auto !important;
        float: none !important;
    }
}

/* Homepage mobile tweaks (≤640px): Editor's Picks stack; Latest goes to
   compact side-by-side rows with a small thumbnail on the left. */
@media (max-width: 640px) {
    /* Editor's Picks — swap horizontal scroll for vertical stack */
    .mfl-home-topic-grid {
        flex-direction: column;
        overflow: visible;
    }
    .mfl-home-topic-grid .mfl-lane-card {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100%;
    }
    .mfl-editors-picks-nav { display: none; } /* scroll arrows unneeded when stacked */

    /* Latest — 4-col desktop grid → single-column stack on mobile.
       Image on top at a comfortable 55vw (cap 260px), title + blurb below
       with generous line-height and a 3-line blurb clamp so cards stay
       scannable. Thin divider between cards for rhythm. */
    .mfl-home-lead-grid-full {
        grid-template-columns: 1fr;
        gap: 0;
        padding-top: 1.25rem;
    }
    .mfl-home-lead-grid-full .mfl-home-lead-grid-item {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        padding: 1.1rem 0;
        border-bottom: 1px solid var(--mfl-border);
    }
    .mfl-home-lead-grid-full .mfl-home-lead-grid-item:last-child { border-bottom: 0; }
    .mfl-home-lead-grid-full .mfl-grid-thumb {
        width: 55vw !important;
        max-width: 260px;
        min-width: 180px;
        height: auto;
        aspect-ratio: 16 / 9;
        margin: 0;
        border-radius: 0.65rem;
        align-self: flex-start;
    }
    .mfl-home-lead-grid-full .mfl-home-lead-grid-item h3 {
        font-size: 1.1rem;
        line-height: 1.28;
        margin: 0 0 0.25rem;
    }
    .mfl-home-lead-grid-full .mfl-home-lead-grid-item p {
        font-size: 0.92rem;
        line-height: 1.5;
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .mfl-home-lead-grid-full .mfl-home-latest-header {
        grid-column: 1 / -1;
        margin: 0 0 0.4rem;
    }
}


/* Search rail: compact directory matches */
.mfl-search-side-label {
    margin: 0.9rem 0 0.4rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mfl-ink-muted);
}
.mfl-search-side-dir .mfl-search-side-label:first-of-type { margin-top: 0.3rem; }
.mfl-search-side-co-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}
.mfl-search-side-co {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.mfl-search-side-co-logo {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid rgba(226, 106, 38, 0.25);
    border-radius: 0.5rem;
    overflow: hidden;
}
.mfl-search-side-co-logo img {
    max-width: 32px;
    max-height: 32px;
    width: auto;
    height: auto;
    object-fit: contain;
}
.mfl-search-side-co a {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--mfl-ink);
    text-decoration: none;
}
.mfl-search-side-co a:hover { color: #e26a26; }

/* Featured partner leads the search rail (Eric, 2026-09-03): a tinted panel
   with a wide landscape logo box and the name on its own line, so it reads as
   a placement rather than another 38px row. Relevance still decides who
   appears; search.php only re-sorts what already matched. */
.mfl-search-side-co--featured {
    display: block;
    background: #fde7d2;
    border: 1px solid rgba(226, 106, 38, 0.35);
    border-radius: 0.6rem;
    padding: 0.7rem 0.75rem;
    margin-bottom: 0.35rem;
}
.mfl-search-side-co--featured .mfl-search-side-co-logo {
    width: 100%;
    height: 60px;
    margin-bottom: 0.45rem;
    border-color: rgba(226, 106, 38, 0.3);
}
.mfl-search-side-co--featured .mfl-search-side-co-logo img {
    max-width: 100%;
    max-height: 52px;
    object-fit: contain;
}
.mfl-search-side-co--featured a {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
}
.mfl-search-side-co--featured .mpfs-ad-featured { margin-left: 0; margin-top: 0.3rem; }
.mfl-search-side-all {
    display: inline-block;
    margin-top: 0.9rem;
    font-weight: 700;
    font-size: 0.9rem;
    color: #e26a26;
    text-decoration: none;
}

/* Perspectives comments — styled to match the site's action forms */
.mfl-comments-wrap {
    max-width: 720px;
    margin: 1.25rem auto 0;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(0, 17, 43, 0.08);
}
/* Comments and the directory band live inside the story card now:
   hold the reading column and keep air before the next section */
.mfl-story-main > .mfl-comments-wrap,
.mfl-story-main > .mpfs-article-directory {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2.5rem;
    padding-left: 1.1rem;
    padding-right: 1.1rem;
}
.mfl-comments-wrap .comment-reply-title,
.mfl-comments-wrap .comments-title {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 1.45rem;
    color: #00112b;
    margin: 0 0 0.5rem;
}
.mfl-comments-wrap .comment-respond {
    border: 1px solid var(--mfl-border);
    background: var(--mfl-surface-alt);
    border-radius: 1rem;
    padding: 1rem 1.1rem 1.1rem;
}
.mfl-comments-wrap .comment-notes { color: var(--mfl-ink-muted); font-size: 0.9rem; margin: 0 0 0.35rem; }
.mfl-comments-wrap .comment-form {
    display: grid;
    gap: 0.8rem 0.85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mfl-comments-wrap .comment-form p { margin: 0; }
.mfl-comments-wrap .comment-notes,
.mfl-comments-wrap .comment-form-comment,
.mfl-comments-wrap .logged-in-as,
.mfl-comments-wrap .cf-turnstile,
.mfl-comments-wrap .form-submit {
    grid-column: 1 / -1;
}
.mfl-comments-wrap .comment-form label {
    display: block;
    font-weight: 700;
    font-size: 0.86rem;
    color: var(--mfl-ink);
    margin-bottom: 0.32rem;
}
.mfl-comments-wrap .comment-form .required { color: #8b2a2a; margin-left: 0.2rem; }
.mfl-comments-wrap .comment-form input[type="text"],
.mfl-comments-wrap .comment-form input[type="email"],
.mfl-comments-wrap .comment-form input[type="url"],
.mfl-comments-wrap .comment-form textarea {
    width: 100%;
    border: 1px solid var(--mfl-border);
    padding: 0.5rem 0.56rem;
    background: var(--mfl-surface);
    color: var(--mfl-ink);
    font: inherit;
    font-size: 0.95rem;
    border-radius: 0.5rem;
    margin-bottom: 0;
}
.mfl-comments-wrap .comment-form input[type="text"]:focus,
.mfl-comments-wrap .comment-form textarea:focus {
    border-color: #2d708c;
    outline: 2px solid rgba(45, 112, 140, 0.22);
    outline-offset: 1px;
}
.mfl-comments-wrap .comment-form textarea {
    min-height: 6.25rem;
    resize: vertical;
}
.mfl-comments-wrap .form-submit { margin-top: 0.2rem; }
.mfl-comments-wrap .form-submit .submit {
    background: #F26925;
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    min-height: 2.82rem;
    padding: 0.56rem 1.4rem;
    cursor: pointer;
}
@media (max-width: 640px) {
    .mfl-comments-wrap .comment-form {
        grid-template-columns: 1fr;
    }
    .mfl-comments-wrap .form-submit .submit { width: 100%; }
}
.mfl-comments-wrap .form-submit .submit:hover { background: #0B4169; }
.mfl-comments-wrap .comment-list { list-style: none; margin: 0 0 2rem; padding: 0; }
.mfl-comments-wrap .comment-list .comment {
    padding: 1rem 0;
    border-bottom: 1px solid rgba(0, 17, 43, 0.08);
}
.mfl-comments-wrap .comment-author { font-weight: 700; }
.mfl-comments-wrap .mfl-comment-org { font-weight: 400; color: #4A5568; }
.mfl-comments-wrap .comment-metadata { font-size: 0.8rem; color: #9AA5B1; }
.mfl-comments-wrap .comment-metadata a { color: #9AA5B1; text-decoration: none; }
.mfl-comments-wrap .reply a { font-size: 0.85rem; color: #F26925; text-decoration: none; font-weight: 600; }

/* "More from {author}" — the recent-work module below a Perspective's
   comments, rendered as a rounded card matching the site's card treatment
   (surface, hairline border, soft shadow). Compact headline list, matching the
   list page's restraint: only the headline links, no dates, no images. */
.mfl-perspective-more {
    /* Inset left+right to align with the byline card at the top of the article
       (Eric: needs more left spacing) instead of hugging the column's left rule. */
    margin: 1.5rem 1.1rem 0;
    padding: 1.4rem 1.6rem;
    background: var(--mfl-surface, #fff);
    border: 1px solid var(--mfl-border);
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(0, 17, 43, 0.06);
}
/* Scoped under .mfl-perspective-more so the sans font-family beats the
   article's `.mfl-story h2` serif rule (0,1,1), which otherwise wins over a
   single class and drags this eyebrow into the serif face. */
.mfl-perspective-more .mfl-perspective-more-title {
    font-family: var(--mfl-font-sans);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    /* The Perspective byline kicker's blue, so this eyebrow reads on-brand for
       the section rather than a neutral gray (Eric). */
    color: #3d6ba8;
    margin: 0 0 0.85rem;
}
.mfl-perspective-more-list { list-style: none; margin: 0; padding: 0; }
.mfl-perspective-more-item { padding: 0.7rem 0; border-bottom: 1px solid var(--mfl-border); }
.mfl-perspective-more-item:first-child { padding-top: 0; }
.mfl-perspective-more-item:last-child { border-bottom: 0; padding-bottom: 0; }
.mfl-perspective-more-link {
    font-family: var(--mfl-font-serif, 'Source Serif 4', Georgia, serif);
    font-weight: 700;
    font-size: 1.08rem;
    line-height: 1.35;
    color: var(--mfl-ink);
    text-decoration: none;
}
.mfl-perspective-more-link:hover { color: var(--mfl-accent); }

/* ============================================================
 * Homepage heading rhythm: every section heading sits exactly
 * 16px above its content (browser-measured 2026-08-26). These
 * live LAST so they win their equal-specificity fights.
 * ============================================================ */
.mfl-home-more-stories > h2 {
    margin-bottom: 1rem !important;
}
.mfl-trending-header-row {
    margin-bottom: 0.75rem;
}
/* The picks header row is taller than its text (nav arrows) and the
   section grid adds its own row gap; the negative margin nets the same
   16px text-to-content distance as every other heading. */
.mfl-editors-picks-header {
    margin-bottom: -0.375rem;
}
/* Picks card image: the wrapper's border + overflow clip define the
   corner; the image contributes no rounding of its own, so the orange
   border hugs the image edge exactly. */
.mfl-home-topic-grid .mfl-lane-card-media img {
    border-radius: 0;
}
/* Cascade winners for the rhythm pass: the blanket img radius rule and
   the card <p> margin rules both carry higher weight, so these do too. */
.mfl-home-topic-grid .mfl-lane-card-media img {
    border-radius: 0 !important;
}
.mfl-more-story-content .mfl-story-topic-row,
.mfl-lane-card-content .mfl-story-topic-row {
    margin-top: 0.45rem !important;
    margin-bottom: 0 !important;
}
/* Archive card topic tags match the homepage size */
.mfl-feed-list .mfl-taxonomy-line a,
.mfl-card .mfl-taxonomy-line a {
    font-size: 0.56rem;
}

/* Homepage sidebar Products: small thumb + title rows */
.mfl-sidebar-product {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.mfl-sidebar-product-thumb {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid rgba(226, 106, 38, 0.25);
    background: #fff;
}
.mfl-sidebar-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    display: block;
}
.mfl-sidebar-product-list .mfl-sidebar-product a.mfl-sidebar-product-title {
    flex: 1 1 auto;
}

/* Small featured images: never upscaled, never cropped. Natural size,
   centered in the bordered frame; the hover zoom may overflow-clip only
   on mouseover. */
.mfl-story-featured-media--small .mfl-story-featured-media-frame {
    padding: 1.25rem;
    text-align: center;
}
.mfl-story-featured-media--small .mfl-story-featured-media-frame img {
    width: auto;
    max-width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    margin: 0 auto;
}

/* Print: the article alone, full width, chrome and modules hidden */
@media print {
    .mfl-header,
    .mfl-site-footer,
    footer,
    .mfl-story-rail,
    .mfl-article-tools,
    .mfl-article-newsletter-cta,
    .mfl-comments-wrap,
    .mpfs-article-directory,
    .mfl-breadcrumbs,
    .mfl-listen-btn,
    .mfl-print-btn,
    .mfl-share-wrapper {
        display: none !important;
    }
    .mfl-story-layout {
        display: block;
    }
    .mfl-story-main {
        border: none;
    }
}

/* Story meta: tags on top, then date/byline left of the tool buttons */
.mfl-story-meta-row-stacked {
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
}
.mfl-story-meta-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}
.mfl-story-meta-bottom .mfl-meta { margin: 0; }
.mfl-story-meta-bottom .mfl-article-tools-inline { margin-left: auto; }

/* News nav dropdown: subtle chevron affordance, click-open panel */
.mfl-nav-has-sub {
    position: relative;
    /* stays a normal list item so News shares the exact text baseline of
       its siblings; the chevron rides inline beside the link */
}
.mfl-nav-sub-toggle {
    display: inline-flex;
    align-items: center;
    vertical-align: -2px;
    border: 0;
    background: none;
    padding: 2px 3px;
    /* tuck the arrow into the link's own right padding: 3px glyph gap */
    margin-left: -6px;
    cursor: pointer;
    color: inherit;
}
.mfl-nav-sub-toggle svg {
    opacity: 0.55;
    transition: transform 0.18s ease, opacity 0.18s ease;
}
.mfl-nav-sub-toggle:hover svg,
.mfl-nav-has-sub.is-open .mfl-nav-sub-toggle svg { opacity: 1; }
.mfl-nav-has-sub.is-open .mfl-nav-sub-toggle svg { transform: rotate(180deg); }
.mfl-nav-sub {
    position: absolute;
    top: calc(100% + 12px);
    left: -0.4rem;
    z-index: 80;
    min-width: 172px;
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    background: #ffffff;
    border: 1px solid rgba(226, 106, 38, 0.28);
    border-radius: 0.85rem;
    box-shadow: 0 16px 38px rgba(0, 17, 43, 0.16);
    overflow: hidden;
}
.mfl-nav-sub::before {
    content: '';
    display: block;
    height: 3px;
    margin: -0.35rem -0.35rem 0.35rem;
    background: linear-gradient(90deg, #e26a26, #f0b98a);
}
.mfl-nav-has-sub.is-open .mfl-nav-sub {
    animation: mflNavSubIn 0.16s ease;
}
@keyframes mflNavSubIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .mfl-nav-has-sub.is-open .mfl-nav-sub { animation: none; }
}
.mfl-nav-sub li { display: block; }
.mfl-content-type-nav .mfl-nav-list .mfl-nav-sub li a,
.mfl-nav-sub li a {
    display: block;
    padding: 0.42rem 0.65rem;
    border-radius: 0.5rem;
    text-decoration: none;
    white-space: nowrap;
    /* one notch under the nav's own clamp(0.62rem, 0.78vw, 0.72rem) */
    font-size: clamp(0.57rem, 0.72vw, 0.66rem);
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--mfl-ink);
}
.mfl-content-type-nav .mfl-nav-list .mfl-nav-sub li a:hover,
.mfl-content-type-nav .mfl-nav-list .mfl-nav-sub li a:focus,
.mfl-nav-sub li a:hover,
.mfl-nav-sub li a:focus {
    background: #fdeee3;
    color: #e26a26;
}
@media (max-width: 860px) {
    .mfl-nav-sub {
        position: static;
        min-width: 0;
        border: none;
        box-shadow: none;
        border-radius: 0;
        padding: 0 0 0 0.9rem;
    }
    .mfl-nav-sub::before { display: none; }
}

/* Mobile: image credit (source) stacks above the caption */
@media (max-width: 640px) {
    .mfl-story-featured-caption-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.15rem;
    }
    .mfl-story-featured-caption-row .mfl-story-featured-credit {
        order: -1;
        margin-left: 0;
        text-align: left;
        white-space: normal;
    }

    /* the desktop flex-basis (260px) reads as HEIGHT in column
       direction and opened a huge blank gap under captions */
    .mfl-story-featured-caption-row .mfl-story-featured-caption {
        flex: 0 0 auto;
    }
}

/* Newsletter consent lines match the signup page's disclaimer size */
.mfl-compact-newsletter-consent {
    font-size: 0.78rem;
    line-height: 1.5;
}

/* Privacy Notice modal: small, chrome-free, easy to close */
.mfl-privacy-overlay {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(0, 17, 43, 0.45);
}
.mfl-privacy-modal {
    position: relative;
    width: min(100%, 560px);
    max-height: 72vh;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 18px 48px rgba(0, 17, 43, 0.25);
    padding: 1.5rem 1.6rem;
}
.mfl-privacy-modal-body h2 {
    margin: 0 0 0.75rem;
    font-size: 1.3rem;
}
.mfl-privacy-modal-body {
    font-size: 0.9rem;
    line-height: 1.55;
}
.mfl-privacy-close {
    position: sticky;
    top: 0;
    float: right;
    margin: -0.4rem -0.5rem 0 0;
    border: 0;
    background: none;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--mfl-ink-muted);
    cursor: pointer;
    padding: 0.2rem 0.45rem;
}
.mfl-privacy-close:hover { color: #e26a26; }
body.mfl-privacy-open { overflow: hidden; }

/* the hidden attribute must beat the overlay's display:flex */
.mfl-privacy-overlay[hidden] { display: none; }

/* Footer lanes on mobile: dot separators with a measured gap — enough to read
   the links apart, not so much that the row floats (Eric: not too close, not
   too far). Bullet sits between items with equal, moderate margins. */
@media (max-width: 640px) {
    .mfl-footer-lanes .mfl-nav-list {
        row-gap: 0.6rem;
        column-gap: 0;
    }
    .mfl-footer-lanes .mfl-nav-list li {
        display: inline-flex;
        align-items: center;
    }
    .mfl-footer-lanes .mfl-nav-list li + li::before {
        content: '\00B7';
        margin: 0 0.5rem;
        opacity: 0.6;
    }
}

/* Tab pills meet the 44px touch guideline on phones */
@media (max-width: 640px) {
    .mfl-more-tab,
    .mfl-trending-tabs button {
        min-height: 44px;
        padding-top: 0.55rem;
        padding-bottom: 0.55rem;
    }
}


/* ============================================================
 * Filter row uniformity: toggle, chips, select, and Apply all
 * share one 34px pill height and one font size.
 * ============================================================ */
.mfl-filter-toggle,
.mfl-filter-dropdown-toggle,
.mfl-filter-group select {
    height: 34px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 0.8rem !important;
    line-height: 1;
}
/* Apply: same pill, but bold-white-on-orange reads optically larger, so
   it sits a step below the chips to LOOK the same size */
button.mfl-filter-apply {
    height: 34px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    line-height: 1;
}
.mfl-filter-group select {
    height: 34px;
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 0.8rem !important;
    line-height: 32px;
}

/* Sightline signup BOX on the homepage hero only: the card itself swaps
   its navy gradient for the light orange of the filter bands. The hero
   band around it is untouched. */
.mfl-home-hero-newsletter .mfl-newsletter-cta {
    background: linear-gradient(90deg, #fbe2cd 0%, #fdf1e6 100%);
    color: var(--mfl-ink);
    border: 1px solid rgba(226, 106, 38, 0.25);
}
.mfl-home-hero-newsletter .mfl-newsletter-cta h2,
.mfl-home-hero-newsletter .mfl-newsletter-cta h3 {
    color: var(--mfl-ink);
}
.mfl-home-hero-newsletter .mfl-newsletter-cta p {
    color: var(--mfl-ink);
}
.mfl-home-hero-newsletter .mfl-newsletter-cta .mfl-compact-newsletter-consent {
    color: var(--mfl-ink-muted);
}
.mfl-home-hero-newsletter .mfl-newsletter-cta a {
    color: #c2541a;
}

/* Sidebar section heading links inherit the heading look */
.mfl-sidebar-section h3 a, .mfl-sidebar-section h2 a,
.mpfs-sidebar-directory h3 a,
.mfl-search-side-dir h3 a {
    color: inherit;
    text-decoration: none;
}
.mfl-sidebar-section h3 a:hover, .mfl-sidebar-section h2 a:hover,
.mpfs-sidebar-directory h3 a:hover,
.mfl-search-side-dir h3 a:hover {
    color: #e26a26;
}

/* Cross-links in article bodies: quietly obvious. Ink text with a thin
   light-orange underline; the text itself warms on hover. */
.mfl-story-body a.mfl-crosslink,
.mfl-story-body a.mpfs-mention-link {
    color: var(--mfl-ink);
    text-decoration: underline;
    text-decoration-color: #f5cba4;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.mfl-story-body a.mfl-crosslink:hover,
.mfl-story-body a.mfl-crosslink:focus,
.mfl-story-body a.mpfs-mention-link:hover,
.mfl-story-body a.mpfs-mention-link:focus {
    color: #c2541a;
    text-decoration-color: #e26a26;
}

/* Logo-shaped featured images (flagged by mfl_thumbnail_is_logo_shaped)
   show whole: contain on a white ground with breathing room, overriding
   every card's object-fit:cover. */
img.mfl-logo-fit {
    object-fit: contain !important;
    background: #fff;
    padding: 7%;
    box-sizing: border-box;
}

/* Sub-topic overflow on article pages: first four show, the rest hide
   behind a +N chip; clicking the chip toggles them open (navigation.js
   flips .is-open) so the revealed terms stay clickable. */
.mfl-subtopic-more { position: relative; }

.mfl-subtopic-more-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.4rem;
    padding: 0.05rem 0.42rem;
    border: 1px solid #f5cba4;
    border-radius: 999px;
    background: #fdeee3;
    color: #c2541a;
    font-family: inherit;
    font-size: 0.85em;
    font-weight: 700;
    line-height: 1.3;
    cursor: pointer;
    vertical-align: baseline;
}

.mfl-subtopic-more-count:hover,
.mfl-subtopic-more-count:focus-visible {
    background: #fbe2cd;
    border-color: #ed8a4f;
}

.mfl-subtopic-more-items { display: none; }

.mfl-subtopic-more.is-open .mfl-subtopic-more-items {
    display: inline;
}

.mfl-subtopic-more.is-open .mfl-subtopic-more-count {
    background: #fbe2cd;
    border-color: #ed8a4f;
}

/* Mobile: tab rows WRAP instead of scrolling — every tab stays visible
   and tappable. Each tab carries its own baseline so both rows read as
   tabs; the active tab's orange bar paints over its own baseline. */
@media (max-width: 860px) {
    .mfl-more-tabs,
    .mfl-lane-tabs {
        flex-wrap: wrap;
        overflow-x: visible;
        border-bottom: 0;
        gap: 0 0.1rem;
    }

    .mfl-more-tabs .mfl-more-tab,
    .mfl-lane-tabs .mfl-more-tab {
        padding: 0.55rem 0.7rem 0.6rem;
        font-size: 0.85rem;
        border-bottom: 2px solid var(--mfl-border);
    }
}

/* Mobile menu: News keeps its chevron on the same row (the block-level
   link was wrapping it underneath), and the search bar rides at the top
   of the menu, right above Best Practices. */
.mfl-mobile-search-top { display: none; }

@media (max-width: 860px) {
    .mfl-has-js .mfl-header-shell .mfl-content-type-nav .mfl-nav-list .mfl-nav-has-sub {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        border-bottom: 1px solid var(--mfl-border);
    }

    .mfl-has-js .mfl-header-shell .mfl-content-type-nav .mfl-nav-list .mfl-nav-has-sub > a {
        flex: 1 1 auto;
        border-bottom: 0;
    }

    .mfl-has-js .mfl-header-shell .mfl-nav-sub-toggle {
        margin-left: auto;
        padding: 0.45rem 0.55rem;
    }

    .mfl-has-js .mfl-header-shell .mfl-mobile-search-top {
        display: flex;
        margin: 0.55rem 0 0.4rem;
    }
}

/* Resource detail cover in its native orientation: the box follows the
   page's own shape (horizontal or vertical), nothing cropped. */
.mfl-resource-detail-cover.is-native {
    aspect-ratio: auto;
    max-width: 320px;
}

.mfl-resource-detail-cover.is-native .mfl-resource-detail-cover-img {
    height: auto;
    object-fit: contain;
    background: #fff;
}

/* Resource detail: supplier card in the rail, clean download focus */
.mfl-resource-supplier-card .mfl-resource-supplier-logo img {
    max-width: 180px;
    height: auto;
    display: block;
    margin: 0.25rem 0 0.6rem;
}

.mfl-resource-supplier-blurb {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--mfl-muted, #5a6a7d);
    margin: 0 0 0.6rem;
}

.mfl-resource-supplier-facts {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
    font-size: 0.85rem;
    line-height: 1.6;
}

.mfl-resource-supplier-site {
    margin-bottom: 0.6rem;
}

.mfl-resource-supplier-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    font-size: 0.82rem;
    margin: 0 0 0.5rem;
}

.mfl-resource-supplier-listing {
    font-size: 0.85rem;
    margin: 0;
}

.mfl-resource-pdf-form > input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0.65rem;
}

/* Resource gate: anchor breathing room + unlocked download button */
#mfl-pdf-form { scroll-margin-top: 24px; }

.mfl-resource-unlocked .mfl-resource-download-now {
    display: inline-block;
    margin-top: 0.5rem;
}

/* Resource pages: no rail — one focused column, comfortably measured */
.mfl-story-layout-resource {
    grid-template-columns: minmax(0, 1fr);
    max-width: 760px;
    margin: 0 auto;
}

/* Resource hero: one block — description in the info column, gate form
   riding full-width inside the same peach panel */
.mfl-resource-detail-hero { align-items: start; }

.mfl-resource-detail-description {
    font-size: 0.95rem;
    line-height: 1.62;
}

.mfl-resource-detail-description p { margin: 0 0 0.8rem; }
.mfl-resource-detail-description p:last-child { margin-bottom: 0; }

.mfl-resource-pdf-gate-embedded {
    grid-column: 1 / -1;
    margin-top: 0.9rem;
    padding: 1.25rem 0 0;
    background: none;
    border: 0;
    border-radius: 0;
    border-top: 1px solid rgba(226, 106, 38, 0.28);
}

/* Visit Event Site: readable hover — solid orange with white text */
.mfl-event-register-btn:hover,
.mfl-event-register-btn:focus-visible {
    background: #e26a26 !important;
    border-color: #e26a26 !important;
    color: #ffffff !important;
}

/* Perspectives cards: only the avatar and headline link now */
.mfl-perspective-card-link { cursor: default; }

.mfl-perspective-card-avatar { display: block; text-decoration: none; }

.mfl-perspective-card-title a {
    color: inherit;
    text-decoration: none;
}

.mfl-perspective-card-title a:hover { color: #c2541a; }

.mfl-perspective-card .mfl-story-card-tags,
.mfl-perspective-card .mfl-story-card-topics { margin-top: 0.45rem; }

/* Resource cards: only cover, title, and the CTA are links; no title
   overlaid on the cover image anywhere. */
a.mfl-resource-card-cover {
    display: block;
    text-decoration: none;
}

.mfl-resource-card-cover-title,
.mfl-resource-cover-title { display: none !important; }

.mfl-resource-card-title a {
    color: inherit;
    text-decoration: none;
}

.mfl-resource-card-title a:hover { color: #c2541a; }

a.mfl-resource-card-cta { text-decoration: none; }
a.mfl-resource-card-cta:hover { color: #c2541a; }

.mfl-resource-card-body { padding: 0.35rem 0.15rem 0; }

/* Resource gate: standardized labeled fields (same treatment as the
   newsletter signup), consent line, and the on-brand ready panel */
.mfl-resource-pdf-form .mfl-pdf-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
    margin-bottom: 0.65rem;
}

.mfl-resource-pdf-form .mfl-pdf-form-row .mfl-pdf-field { margin-bottom: 0; }

.mfl-resource-pdf-form .mfl-pdf-field label {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--mfl-ink-muted);
}

.mfl-resource-pdf-form select {
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--mfl-border);
    border-radius: 0.5rem;
    font-family: var(--mfl-font-sans);
    font-size: 0.88rem;
    background: #ffffff;
    color: var(--mfl-ink);
}

.mfl-pdf-consent {
    font-size: 0.74rem;
    line-height: 1.5;
    color: var(--mfl-ink-muted);
    margin: 0.35rem 0 0.75rem;
}

.mfl-pdf-consent a { color: #c2541a; }

/* Deliberately outsized (Eric, 2026-09-01): readers were filling in the form
   and then MISSING the View Now / Save buttons. This state is the payoff of
   the whole gate, so it gets headline scale, not form scale. */
.mfl-resource-ready {
    text-align: center;
    padding: 1.25rem 0 0.75rem;
}

.mfl-resource-ready h3, .mfl-resource-ready h2 {
    margin: 0 0 0.5rem;
    font-size: 2rem;
    font-weight: 800;
    color: var(--mfl-ink);
}

.mfl-resource-ready p {
    margin: 0 0 1.4rem;
    color: var(--mfl-ink-muted);
    font-size: 1.15rem;
}

.mfl-resource-ready-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Override .mfl-btn's small sizing for these two only. The !important flags
   match the ones .mfl-btn itself uses, so this wins on specificity rather
   than on load order. */
a.mfl-resource-ready-btn {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    padding: 0.85rem 2.2rem !important;
    border-width: 2px !important;
}

a.mfl-resource-ready-btn:hover,
a.mfl-resource-ready-btn:focus-visible {
    background: #e26a26 !important;
    border-color: #e26a26 !important;
    color: #ffffff !important;
}

@media (max-width: 600px) {
    .mfl-resource-pdf-form .mfl-pdf-form-row .mfl-pdf-field { margin-bottom: 0.65rem; }
}

/* Any button inside the resource gate: hover is always solid orange
   with white lettering, whatever the global pill rules say */
.mfl-resource-pdf-gate .mfl-btn:hover,
.mfl-resource-pdf-gate .mfl-btn:focus,
.mfl-resource-pdf-gate .mfl-btn:focus-visible {
    background: #e26a26 !important;
    border-color: #e26a26 !important;
    color: #ffffff !important;
}

/* reCAPTCHA v3 badge hidden; required attribution lives in the footer */
.grecaptcha-badge { visibility: hidden; }

/* Story gallery in the featured slot */
.mfl-story-gallery-frame { position: relative; display: block; }

.mfl-story-gallery-slide { display: none; }
.mfl-story-gallery-slide.is-active { display: block; }

.mfl-story-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.3rem;
    height: 2.3rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #00112b;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 17, 43, 0.25);
    transition: background 0.15s ease, color 0.15s ease;
    z-index: 2;
}

.mfl-story-gallery-prev { left: 0.7rem; }
.mfl-story-gallery-next { right: 0.7rem; }

.mfl-story-gallery-nav:hover,
.mfl-story-gallery-nav:focus-visible {
    background: #e26a26;
    color: #ffffff;
}

.mfl-story-gallery-count {
    position: absolute;
    right: 0.7rem;
    bottom: 0.6rem;
    background: rgba(0, 17, 43, 0.72);
    color: #ffffff;
    font-family: var(--mfl-font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    z-index: 2;
}

/* Galleries hub + standalone gallery view */
.mfl-galleries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-top: 1.25rem;
}

.mfl-gallery-card-cover {
    position: relative;
    display: block;
    border-radius: 0.75rem;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: #f4f8fc;
}

.mfl-gallery-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.25s ease;
}

.mfl-gallery-card-cover:hover img { transform: scale(1.03); }

.mfl-gallery-card-count {
    position: absolute;
    right: 0.6rem;
    bottom: 0.55rem;
    background: rgba(0, 17, 43, 0.72);
    color: #fff;
    font-family: var(--mfl-font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.16rem 0.55rem;
    border-radius: 999px;
}

.mfl-gallery-card-title {
    font-size: 1.02rem;
    line-height: 1.35;
    margin: 0.6rem 0 0.15rem;
}

.mfl-gallery-card-title a { color: var(--mfl-ink); text-decoration: none; }
.mfl-gallery-card-title a:hover { color: #c2541a; }

.mfl-gallery-card-storylink { margin: 0; font-size: 0.8rem; }
.mfl-gallery-card-storylink a { color: #c2541a; text-decoration: none; }
.mfl-gallery-card-storylink a:hover { text-decoration: underline; }

.mfl-gallery-standalone { max-width: 860px; margin: 0 auto; padding-top: 1rem; }
.mfl-gallery-standalone-kicker { font-size: 0.8rem; margin: 0 0 0.4rem; }
.mfl-gallery-standalone-kicker a { color: #c2541a; text-decoration: none; }
.mfl-gallery-standalone-kicker a:hover { text-decoration: underline; }
.mfl-gallery-standalone-storylink { margin: 1.2rem 0 2rem; }

/* Wide Sightline signup band above the footer (homepage + list pages) */
.mfl-footer-signup-band {
    margin-top: 2.5rem;
    padding: 0 0 2rem;
}

.mfl-footer-signup-inner {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.4rem 2rem;
    background: linear-gradient(90deg, #fbe2cd 0%, #fdf1e6 100%);
    border: 1px solid rgba(226, 106, 38, 0.22);
    border-radius: 1rem;
}

.mfl-footer-signup-inner::before {
    content: "";
    position: absolute;
    top: -55px;
    right: -40px;
    width: 200px;
    height: 200px;
    background: url("assets/img/newsletter-o.svg") no-repeat center / contain;
    opacity: 0.08;
    pointer-events: none;
}

.mfl-footer-signup-copy { position: relative; }

.mfl-footer-signup-copy h2 {
    margin: 0.1rem 0 0.2rem;
    font-size: 1.35rem;
    line-height: 1.25;
    color: var(--mfl-ink);
}

.mfl-footer-signup-sub {
    margin: 0;
    color: var(--mfl-ink-muted);
    font-size: 0.92rem;
}

.mfl-footer-signup-action { position: relative; flex: 0 1 460px; }

.mfl-footer-signup-form {
    display: flex;
    gap: 0.6rem;
}

.mfl-footer-signup-form input[type="email"] {
    flex: 1;
    padding: 0.6rem 0.95rem;
    border: 1px solid rgba(226, 106, 38, 0.35);
    border-radius: 999px;
    font-family: var(--mfl-font-sans);
    font-size: 0.9rem;
    background: #ffffff;
    color: var(--mfl-ink);
}

.mfl-footer-signup-form input[type="email"]:focus {
    outline: none;
    border-color: #e26a26;
    box-shadow: 0 0 0 3px rgba(226, 106, 38, 0.15);
}

.mfl-footer-signup-action .mfl-compact-newsletter-consent {
    margin: 0.5rem 0 0;
    font-size: 0.68rem;
}

@media (max-width: 860px) {
    .mfl-footer-signup-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 0.9rem;
        padding: 1.2rem 1.2rem 1.35rem;
    }

    .mfl-footer-signup-action { flex: 1 1 auto; }

    .mfl-footer-signup-form { flex-direction: column; }
}

/* Header social icons, left of the search toggle. The icons themselves use the
   shared .mfl-social-icon chip (see the footer block) with the -sm size, so
   this only owns the row layout. They previously carried their own white fill,
   which was invisible against the white header shell they actually sit on. */
.mfl-header-social {
    display: flex;
    align-items: center;
    /* gap is BETWEEN the icons — leave it alone. The trailing margin is
       the only lever for the space before search; it pulls against the
       utility bar's own 12px flex gap without touching the other
       children of that bar. */
    gap: 0.4rem;
    margin-right: -0.15rem;
}

@media (max-width: 860px) {
    .mfl-header-social { display: none; }
}

/* Search page: the rail follows the reader down long result lists */
.mfl-archive-results + .mfl-archive-sidebar,
.mfl-archive-sidebar {
    align-self: start;
}

body.search .mfl-archive-sidebar {
    position: sticky;
    top: 1.25rem;
    max-height: calc(100vh - 2.5rem);
    overflow-y: auto;
}

.mfl-search-side-note {
    margin: -0.2rem 0 0.6rem;
    font-family: var(--mfl-font-sans);
    font-size: 0.72rem;
    color: var(--mfl-ink-muted);
}

.mfl-search-side-events .mfl-sidebar-list li { margin-bottom: 0.5rem; }

.mfl-search-side-event-date {
    display: block;
    font-family: var(--mfl-font-sans);
    font-size: 0.7rem;
    color: #ed8a4f;
    font-weight: 700;
}

/* Card tags share one wrapping row (content type then topics) rather
   than stacking as separate block lines in the flex-column card body. */
.mfl-card-tagrow {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.5rem;
    row-gap: 0.15rem;
}

.mfl-card-tagrow > .mfl-taxonomy-line,
.mfl-card-tagrow > .mfl-content-type-line {
    margin: 0;
}

/* Labels are chips, never column-wide bars. The card body is a flex
   column, so an inline-flex label stretches to the full column unless
   it opts out. */
.mfl-label {
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
}

/* ============================================================
   FILTER SELECTS — single source of truth
   ============================================================
   These had accumulated seven competing rule blocks across this file
   (archive, panel, events, plus media queries), so the same control
   looked different on different pages and a late `background:`
   shorthand reset the repeat on an earlier background-image, tiling
   the custom arrow across the pill.

   One block, last in the file, covering every filter select on the
   site. It matches .mfl-filter-dropdown-toggle exactly: same border,
   radius, font, weight and hover. The native dropdown arrow is kept
   deliberately — a background-image arrow is what broke, and any
   future `background:` shorthand would break it again.
   ============================================================ */
.mfl-filter-group select,
.mfl-filter-panel select,
.mfl-events-filter select {
    height: 34px;
    box-sizing: border-box;
    padding: 0 0.7rem;
    border: 1.5px solid #e26a26;
    border-radius: 2rem;
    background: #ffffff;
    color: #e26a26;
    font-family: "Source Sans 3", sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.mfl-filter-group select:hover,
.mfl-filter-panel select:hover,
.mfl-events-filter select:hover,
.mfl-filter-group select:focus-visible,
.mfl-filter-panel select:focus-visible,
.mfl-events-filter select:focus-visible {
    background: #e26a26;
    border-color: #e26a26;
    color: #ffffff;
    outline: none;
}

/* The open menu is drawn by the OS and would otherwise inherit the
   orange-on-orange hover state, which is unreadable. */
.mfl-filter-group select option,
.mfl-filter-panel select option,
.mfl-events-filter select option,
.mfl-filter-group select optgroup,
.mfl-filter-panel select optgroup,
.mfl-events-filter select optgroup {
    background: #ffffff;
    color: var(--mfl-ink);
    font-weight: 400;
}

.mfl-filter-group select optgroup,
.mfl-filter-panel select optgroup,
.mfl-events-filter select optgroup {
    font-weight: 700;
    font-style: normal;
}

/* Subtypes sit under their parent, indented. The indent carries the
   relationship, so the list needs no group heading. */
.mfl-checkbox-item-child {
    padding-left: 1.35rem;
}

/* Radio panels reuse the checkbox item styling; a round mark distinguishes
   "pick one" from the multi-select topic lists. */
.mfl-checkbox-item input[type="radio"] + .mfl-checkbox-mark {
    border-radius: 50%;
}

/* The toggle now carries the active value, which varies in length, so let it
   size to content instead of sitting at the select's old fixed min-width. */
.mfl-filter-dropdown-group .mfl-filter-dropdown-toggle {
    max-width: 100%;
}

.mfl-filter-dropdown-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A radio row marks its choice with a filled dot, not the checkbox tick.
   Overrides the shared ::after, which draws a rotated tick. */
.mfl-checkbox-item input[type="radio"]:checked + .mfl-checkbox-mark::after {
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    transform: none;
    margin-top: 0;
}

/* ============================================================
   PRIVACY CHOICES
   ============================================================
   The footer control is a button, not a link, because it does
   something rather than navigating. Styled to sit with the legal
   links beside it so it does not read as a stray control.

   The dialog is position:fixed and hidden until opened, so it is
   never in normal flow and cannot shift layout. That matters:
   this ships a week before launch onto pages whose Core Web
   Vitals were fought for.
   ============================================================ */
.mfl-privacy-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.mfl-privacy-link:hover,
.mfl-privacy-link:focus-visible {
    color: #e26a26;
}

.mfl-privacy-root[hidden] { display: none; }

.mfl-privacy-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 17, 43, 0.55);
}

.mfl-privacy-dialog {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: 85vh;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 10px;
    padding: 1.6rem 1.5rem 1.3rem;
    box-shadow: 0 18px 48px rgba(0, 17, 43, 0.3);
    font-family: "Source Sans 3", system-ui, sans-serif;
}

.mfl-privacy-dialog h2 {
    margin: 0 0 0.6rem;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 1.3rem;
}

.mfl-privacy-dialog p { margin: 0 0 0.9rem; font-size: 0.94rem; line-height: 1.6; }

.mfl-privacy-close {
    position: absolute;
    top: 0.5rem;
    right: 0.7rem;
    background: none;
    border: 0;
    font-size: 1.6rem;
    line-height: 1;
    color: #5c6b7a;
    cursor: pointer;
}

.mfl-privacy-close:hover { color: #e26a26; }

/* The confirmation California requires. Always rendered client-side. */
.mfl-privacy-state {
    padding: 0.6em 0.8em;
    border-radius: 4px;
    background: #eef4ee;
    color: #1d6b38;
    font-weight: 600;
    font-size: 0.88rem !important;
}

.mfl-privacy-choice {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    margin: 0.2rem 0 0.5rem;
    font-size: 0.94rem;
    line-height: 1.5;
    cursor: pointer;
}

.mfl-privacy-choice input { margin-top: 0.25rem; flex-shrink: 0; }
.mfl-privacy-choice input:disabled + span { color: #5c6b7a; }

.mfl-privacy-note { color: #5c6b7a; font-size: 0.85rem !important; }
.mfl-privacy-actions { margin: 0.9rem 0 0.4rem; }
.mfl-privacy-links a { font-size: 0.85rem; color: #3d6ba8; }

body.mfl-privacy-open { overflow: hidden; }

/* ==========================================================================
   Privacy opt-out page (page-templates/privacy-opt-out.php)
   Design: docs/PRIVACY-OPT-OUT-FORM.md
   ========================================================================== */

.mfl-optout {
    max-width: 44rem;
}

.mfl-optout-header h1 {
    margin-bottom: 0.5rem;
}

.mfl-optout-intro {
    max-width: 36rem;
}

.mfl-optout-intro h2 {
    font-size: 1.3rem;
    margin: 2rem 0 0.5rem;
}

.mfl-optout-intro p {
    margin: 0 0 0.85rem;
}

/* The "this is not the footer control" block. Given its own surface because a
   reader who skims past it uses the wrong mechanism and believes they are
   covered when they are not. */
.mfl-optout-callout {
    background: var(--mfl-surface, #fff);
    border: 1px solid var(--mfl-border, #dfe2e8);
    border-left: 3px solid var(--mfl-brand, #e26a26);
    border-radius: 3px;
    padding: 1.1rem 1.3rem;
    margin: 1.5rem 0;
}

.mfl-optout-callout h3 {
    margin: 0 0 0.5rem;
    font-size: 1.02rem;
}

.mfl-optout-callout p {
    margin: 0;
}

.mfl-optout-form {
    max-width: 36rem;
    margin-top: 2.5rem;
}

.mfl-optout-form h2 {
    font-size: 1.3rem;
    margin: 0 0 0.4rem;
}

.mfl-optout-note {
    font-size: 0.9rem;
    margin: 0 0 1.5rem;
}

.mfl-optout-form label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.mfl-optout-form input[type="email"],
.mfl-optout-form input[type="text"],
.mfl-optout-form input[type="tel"],
.mfl-optout-form textarea {
    display: block;
    width: 100%;
    margin-top: 0.3rem;
    padding: 0.6rem 0.7rem;
    font: inherit;
    font-weight: 400;
    border: 1px solid var(--mfl-border, #c3c9d4);
    border-radius: 3px;
    background: var(--mfl-surface, #fff);
    color: var(--mfl-ink, #00112b);
}

.mfl-optout-form input:focus-visible,
.mfl-optout-form textarea:focus-visible,
.mfl-optout-form button:focus-visible {
    outline: 2px solid var(--mfl-brand, #e26a26);
    outline-offset: 2px;
}

.mfl-optout-hint {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.8rem;
    font-weight: 400;
}

.mfl-optout-req {
    font-weight: 700;
}

/* Two-up on desktop, stacked on mobile. */
@media (min-width: 620px) {
    .mfl-optout-form .mfl-form-row {
        display: flex;
        gap: 1rem;
    }
    .mfl-optout-form .mfl-form-row > label {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* The consequence, immediately above the submit. Deliberately heavier than the
   rest of the page: this is the last thing between a reader and losing a
   newsletter they meant to keep. */
.mfl-optout-warning {
    border: 2px solid var(--mfl-brand, #e26a26);
    border-radius: 3px;
    padding: 1.15rem 1.3rem;
    margin: 2rem 0 1.25rem;
}

.mfl-optout-warning p {
    margin: 0 0 0.7rem;
}

.mfl-optout-warning p:last-child {
    margin-bottom: 0;
}

.mfl-optout-check {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.9rem;
    font-weight: 400;
    margin-bottom: 0.9rem;
}

.mfl-optout-check input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 0.15rem;
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--mfl-brand, #e26a26);
}

.mfl-optout-actions {
    margin-top: 1.5rem;
}

.mfl-optout-errors {
    border: 1px solid #b8501a;
    border-left: 3px solid #b8501a;
    border-radius: 3px;
    padding: 1rem 1.2rem;
    margin: 1.5rem 0;
    max-width: 36rem;
}

.mfl-optout-errors ul {
    margin: 0.4rem 0 0;
    padding-left: 1.2rem;
}

.mfl-optout-done {
    border: 1px solid var(--mfl-border, #dfe2e8);
    border-left: 3px solid var(--mfl-brand, #e26a26);
    border-radius: 3px;
    padding: 1.4rem 1.5rem;
    margin: 1.5rem 0 3rem;
    max-width: 36rem;
}

.mfl-optout-done h2 {
    margin: 0 0 0.6rem;
}

.mfl-optout-done p:last-child {
    margin-bottom: 0;
}

/* Honeypot: off-screen rather than display:none, so a bot filling hidden
   fields still finds it while a human never tabs into it. */
.mfl-optout-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.mfl-optout-done-echo {
    padding: 0.6rem 0.8rem;
    margin: 0 0 1rem;
    border-radius: 3px;
    background: var(--mfl-bg, #f3f6f8);
    font-size: 0.92rem;
    word-break: break-all;
}

/* ==========================================================================
   Your Privacy Choices page (page-templates/privacy-opt-out.php)

   Two blocks, deliberately unequal in weight. The instant browser control is
   the small reversible one and comes first; the removal form is irreversible
   and is styled to feel heavier, because a reader should be able to tell them
   apart before reading a word.

   The control markup reuses .mfl-privacy-* from the old footer dialog. Those
   rules still apply and still suit it; only the fixed-position .mfl-privacy-
   overlay is not rendered here, which is why the block flows normally.
   ========================================================================== */

.mfl-optout {
    max-width: 46rem;
}

.mfl-optout-header h1 {
    margin-bottom: 0.4rem;
}

.mfl-optout-lede {
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--mfl-ink);
}

.mfl-optout-block {
    margin: 2rem 0;
    padding: 1.4rem 1.5rem;
    border: 1px solid #dfe2e8;
    border-radius: 4px;
}

.mfl-optout-block > h2 {
    margin: 0 0 0.2rem;
    font-size: 1.2rem;
}

.mfl-optout-block-sub {
    margin: 0 0 1rem;
    font-size: 0.88rem;
    color: #5c6b7a;
}

/* The irreversible one carries the brand rule; the reversible one does not. */
.mfl-optout-block-form {
    border-left: 3px solid #e26a26;
}

.mfl-privacy-inline {
    margin: 0;
}

.mfl-optout-callout {
    margin: 0 0 1.4rem;
    padding: 0.9rem 1.1rem;
    background: #f6f8fa;
    border-radius: 4px;
}

.mfl-optout-callout h3 {
    margin: 0 0 0.4rem;
    font-size: 1rem;
}

.mfl-optout-callout p,
.mfl-optout-note {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #4a5461;
}

.mfl-optout-note {
    margin-top: 0.9rem;
}

.mfl-optout-form label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.9rem;
}

.mfl-optout-form input[type="text"],
.mfl-optout-form input[type="email"],
.mfl-optout-form input[type="tel"],
.mfl-optout-form textarea {
    display: block;
    width: 100%;
    margin-top: 0.3rem;
    padding: 0.55rem 0.7rem;
    font: inherit;
    font-weight: 400;
    border: 1px solid #c3c9d4;
    border-radius: 3px;
}

.mfl-optout-form input:focus-visible,
.mfl-optout-form textarea:focus-visible {
    outline: 2px solid #1f5fa8;
    outline-offset: 1px;
}

.mfl-optout-req {
    color: #b8501a;
}

.mfl-optout-hint {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.82rem;
    font-weight: 400;
    color: #5c6b7a;
}

.mfl-optout-form .mfl-form-row {
    display: flex;
    gap: 1rem;
}

.mfl-optout-form .mfl-form-row > label {
    flex: 1 1 0;
    min-width: 0;
}

/* Honeypot: off-screen rather than display:none, because some bots skip
   hidden fields and a real reader never reaches it via tab (tabindex -1). */
.mfl-optout-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.mfl-optout-warning {
    margin: 1.6rem 0 1rem;
    padding: 1rem 1.2rem;
    background: #fbeee6;
    border-left: 3px solid #b8501a;
    border-radius: 0 4px 4px 0;
}

.mfl-optout-warning p {
    margin: 0 0 0.7rem;
    font-size: 0.92rem;
    line-height: 1.6;
}

.mfl-optout-warning p:last-child {
    margin-bottom: 0;
}

.mfl-optout-check {
    display: flex !important;
    gap: 0.6rem;
    align-items: flex-start;
    font-weight: 400 !important;
    font-size: 0.9rem;
    line-height: 1.5;
}

.mfl-optout-check input {
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.mfl-optout-errors {
    margin: 1.2rem 0;
    padding: 0.9rem 1.1rem;
    background: #fdf0ee;
    border-left: 3px solid #a8322a;
    border-radius: 0 4px 4px 0;
    font-size: 0.92rem;
}

.mfl-optout-errors ul {
    margin: 0.4rem 0 0;
    padding-left: 1.1rem;
}

/* The receipt. There is no confirmation email by design, so this screen is the
   only record the reader gets and it is weighted to look like one. */
.mfl-optout-done {
    margin: 1.5rem 0;
    padding: 1.5rem 1.6rem;
    background: #f2f7f3;
    border-left: 3px solid #1d6b38;
    border-radius: 0 4px 4px 0;
}

.mfl-optout-done h2 {
    margin: 0 0 0.6rem;
    font-size: 1.25rem;
}

.mfl-optout-done p {
    margin: 0 0 0.8rem;
    font-size: 0.94rem;
    line-height: 1.65;
}

.mfl-optout-done p:last-child {
    margin-bottom: 0;
}

.mfl-optout-done-echo {
    font-size: 0.9rem !important;
    color: #4a5461;
}

@media (max-width: 600px) {
    .mfl-optout-form .mfl-form-row {
        display: block;
    }
    .mfl-optout-block {
        padding: 1.1rem 1rem;
    }
}

/* The Sightline opt-in on the resource gate. Same quiet weight as the consent
   line below it; the tick is the reader's, not ours, so nothing here shouts. */
.mfl-pdf-optin {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    margin: 0.9rem 0 0.4rem;
    font-size: 0.92rem;
    line-height: 1.5;
    cursor: pointer;
}

.mfl-pdf-optin input {
    margin-top: 0.2rem;
    flex-shrink: 0;
    accent-color: #e26a26;
}

/* ==========================================================================
   Article callouts ([mfl_callout]) — the editor-placed sidebar box.

   Distinct from the image frame on purpose: images get the thin full border,
   callouts get the heavy brand rule down the left and a warm field, so the
   two never read as the same device. Title is the site's sans in caps; body
   inherits the article serif. Left/right float at sidebar width with text
   wrapping, exactly like aligned images; full spans the column.
   ========================================================================== */

.mfl-story-body .mfl-callout {
    border-left: 4px solid #e26a26;
    background: #fdf6f0;
    border-radius: 0 0.5rem 0.5rem 0;
    padding: 1rem 1.15rem;
    box-sizing: border-box;
}

.mfl-story-body .mfl-callout-right {
    float: right;
    width: 38%;
    margin: 0.4rem 0 1rem 1.4rem;
    clear: right;
}

.mfl-story-body .mfl-callout-left {
    float: left;
    width: 38%;
    margin: 0.4rem 1.4rem 1rem 0;
    clear: left;
}

.mfl-story-body .mfl-callout-full {
    clear: both;
    margin: 1.4rem 0;
}

.mfl-story-body .mfl-callout-title {
    font-family: var(--mfl-font-sans, "Source Sans 3", "Segoe UI", sans-serif);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #c2541a;
    margin: 0 0 0.55rem;
}

.mfl-story-body .mfl-callout-body > :first-child { margin-top: 0; }
.mfl-story-body .mfl-callout-body > :last-child { margin-bottom: 0; }

.mfl-story-body .mfl-callout-body p {
    font-size: 0.95rem;
    line-height: 1.6;
}

.mfl-story-body .mfl-callout-body img {
    /* Images inside a callout are already inside the brand device; the
       image frame's own border would double it up. */
    border: 0;
    background: transparent;
    padding: 0;
    border-radius: 0.35rem;
}

@media (max-width: 640px) {
    .mfl-story-body .mfl-callout-right,
    .mfl-story-body .mfl-callout-left {
        float: none;
        width: 100%;
        margin: 1rem 0;
    }
}

/* ==========================================================================
   Form prefill banner (.mfl-prefill-note)

   CDP inserts this as the FIRST CHILD of a [data-mfl-prefill] form the moment
   it fills the fields, before any submission is possible. Website owns the
   look; CDP owns the behaviour and the data-mfl-prefill-clear button.

   Privacy's conditions are the design brief, not decoration: it must be seen
   without looking for it (so: full-width, its own brand-orange field at the
   top of the form, not a subtle hint), it must read as remembered details,
   and the clear control must be an obvious button. On shared depot terminals
   this banner is the only thing standing between convenience and one reader
   submitting another's identity.
   ========================================================================== */

.mfl-prefill-note {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 0 0 1.1rem;
    padding: 0.7rem 0.95rem;
    background: #fdf0e6;
    border: 1.5px solid #e26a26;
    border-radius: 6px;
    font-family: var(--mfl-font-sans, "Source Sans 3", "Segoe UI", sans-serif);
    font-size: 0.92rem;
    line-height: 1.45;
    color: #6a3410;
}

.mfl-prefill-note::before {
    content: "";
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    background: #e26a26;
    /* a small info glyph, so the row reads as a notice at a glance */
    -webkit-mask: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-6h2zm0-8h-2V7h2z"/></svg>');
    mask: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-6h2zm0-8h-2V7h2z"/></svg>');
}

.mfl-prefill-note-text {
    flex: 1 1 auto;
    min-width: 0;
}

.mfl-prefill-note strong {
    font-weight: 700;
    color: #4a2409;
}

/* The clear control: a real button, obviously clickable, never a faint link. */
.mfl-prefill-note [data-mfl-prefill-clear],
.mfl-prefill-note button {
    flex: 0 0 auto;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    padding: 0.4rem 0.9rem;
    color: #ffffff;
    background: #e26a26;
    border: 0;
    border-radius: 4px;
}

.mfl-prefill-note [data-mfl-prefill-clear]:hover,
.mfl-prefill-note [data-mfl-prefill-clear]:focus-visible {
    background: #c2541a;
}

.mfl-prefill-note [data-mfl-prefill-clear]:focus-visible {
    outline: 2px solid #6a3410;
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .mfl-prefill-note [data-mfl-prefill-clear] {
        width: 100%;
    }
}

/* The "Details saved on this device" control on the opt-out page. Quiet, since
   it lives inside the browser-control block and is a housekeeping action, not a
   rights action. */
.mfl-prefill-clear-control {
    margin-top: 1.4rem;
    padding-top: 1.2rem;
    border-top: 1px solid #e6e9ee;
}

.mfl-prefill-clear-control h3 {
    margin: 0 0 0.4rem;
    font-size: 1rem;
}

.mfl-prefill-clear-control p {
    margin: 0 0 0.8rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #4a5461;
}

.mfl-prefill-clear-status {
    margin: 0.6rem 0 0 !important;
    font-weight: 700;
    color: #1d6b38;
}

/* -------------------------------------------------------------------------- */
/* FleetPedia — the public fleet reference                                    */
/* -------------------------------------------------------------------------- */

.mfl-fp {
    max-width: 820px;
}

/* ---------------------------------------------------------------------------
   FLEETPEDIA MASTHEAD - a deliberate cousin of the Solutions Guide.

   SHARED so the two read as one publication: the lockup silhouette. A small
   tracked-out sans overline above serif main words, centered on a dark band.

   DIFFERENT so FleetPedia reads as its own section: the ground. The Guide sits
   on flat --mpfs-navy #0B4169; this sits one step deeper on the SAME ramp,
   --mpfs-navy-deep #072E4A, graded back toward navy. Cousins share a palette,
   not a color, and taking the neighbouring value off the Guide's own ramp keeps
   this on-brand rather than inventing a tone.

   The flush-under-header rule is lifted verbatim from the Guide
   (suppliers.css 116-123) rather than re-derived: .mfl-main carries 16px of top
   padding, and pairing a negative margin with a :has() override is the version
   landed after -16px alone left slivers at some breakpoints.
   --------------------------------------------------------------------------- */
.mfl-fp-masthead {
    /* THE HOUSE PEACH, lifted from .mfl-editorial-accent-peach (style.css ~8470)
       rather than invented. That treatment is already shipped on the editorial
       and Advertise pages, so FleetPedia matches an existing pattern instead of
       introducing another masthead idea. Two earlier attempts, a deep burnt
       orange and then a mid logo orange, were both my own mixes and both wrong
       for that reason. */
    background: linear-gradient(160deg, #ffefe4 0%, #ffdcc5 55%, #ffffff 100%);
    border-bottom: 1px solid rgba(226, 106, 38, 0.16);
    color: #0F416A;
    padding: 44px 16px 36px;
    text-align: center;
}
.mfl-main > .mfl-fp-masthead:first-child { margin-top: -16px; }
@supports selector(:has(*)) {
    .mfl-main:has(> .mfl-fp-masthead:first-child) { padding-top: 0; }
    .mfl-main > .mfl-fp-masthead:first-child { margin-top: 0; }
}

.mfl-fp-wordmark {
    display: inline-block;
    text-align: center;
    line-height: 1;
    text-decoration: none;
    color: #0F416A;
    font-size: 40px; /* the tagline is sized in em off this, so it sets the lockup */
}
.mfl-fp-wordmark-under {
    /* The house kicker, matched exactly: same color, size, weight and family as
       .mfl-editorial-kicker, the orange line above the heading on the Advertise
       and editorial pages. Tracking stays wider than that kicker's 0.16em
       because this sits under a wordmark rather than above a headline. */
    margin: 0.75em 0 0;
    font-family: var(--mfl-font-sans);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.3em;
    padding-left: 0.3em; /* balances the last glyph's trailing tracking */
    text-transform: uppercase;
    color: #e26a26;
}
/* Pedia is italic wherever the brand is displayed (Eric, 2026-09-02). Declared
   rather than left to the browser default for <em> so it survives any reset,
   and so the nav, masthead and prose cannot drift apart. */
.mfl-fp-pedia { font-style: italic; }

.mfl-fp-wordmark-main {
    display: block;
    font-family: var(--mfl-font-serif);
    font-weight: 600;
    white-space: nowrap;
}
.mfl-fp-wordmark:hover .mfl-fp-wordmark-main { color: #00112b; }

.mfl-fp-nav {
    margin-top: 10px;
    font-family: var(--mfl-font-sans);
    font-size: 13.5px;
    letter-spacing: 0.02em;
    color: rgba(15, 65, 106, 0.75);
}
.mfl-fp-nav a { color: #0F416A; text-decoration: none; font-weight: 600; }
.mfl-fp-nav a:hover { text-decoration: underline; }
.mfl-fp-nav span { margin: 0 8px; }

@media (max-width: 640px) {
    .mfl-fp-masthead { padding: 30px 12px 24px; }
    .mfl-fp-wordmark { font-size: 28px; }
    /* That much tracking overflows a phone; tighten rather than let the overline
       force a horizontal scrollbar. */
    .mfl-fp-wordmark-under { letter-spacing: 0.18em; padding-left: 0.18em; font-size: 0.7rem; }
}

.mfl-fp-preview {
    background: #fff4e8;
    border: 1px solid rgba(226, 106, 38, 0.4);
    border-left: 4px solid #e26a26;
    color: #7a3d12;
    padding: 0.7rem 0.95rem;
    border-radius: 5px;
    font-size: 0.9rem;
    margin: 0 0 1.4rem;
}

.mfl-fp-back {
    margin: 0 0 0.55rem;
    font-family: var(--mfl-font-sans);
    font-size: 0.85rem;
    font-weight: 600;
}
.mfl-fp-back a { color: var(--mfl-accent); text-decoration: none; }
.mfl-fp-back a:hover { text-decoration: underline; }

.mfl-fp-crumbs {
    font-size: 0.82rem;
    color: var(--mfl-ink-muted);
    /* Breathing room between the masthead band and the first line of content.
       Without it the breadcrumb sits tight against the orange. */
    margin: 1.6rem 0 1rem;
}
.mfl-fp-back + .mfl-fp-crumbs { margin-top: 0; }
.mfl-fp-wrap-top,
.mfl-fp-concept > .mfl-fp-back:first-child,
.mfl-fp-track > .mfl-fp-back:first-child { margin-top: 1.6rem; }
.mfl-fp-crumbs a { color: var(--mfl-brand, #e26a26); text-decoration: none; }
.mfl-fp-crumbs a:hover { text-decoration: underline; }
.mfl-fp-crumb-current { color: var(--mfl-ink); font-weight: 600; }

/* Inline cross-links inside concept copy. Distinguished from ordinary body
   links so a reader can see that the reference is connected to itself, and
   category links tinted differently because they leave for the Solutions
   Guide rather than staying inside FleetPedia. */
.mfl-fp-body a.mfl-fp-xl {
    color: var(--mfl-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--mfl-accent);
    padding-bottom: 1px;
}
.mfl-fp-body a.mfl-fp-xl:hover { color: var(--mfl-accent); }
.mfl-fp-body a.mfl-fp-xl-category { border-bottom-style: dotted; }

.mfl-fp-head h1 {
    font-family: var(--mfl-font-serif, 'Source Serif 4', Georgia, serif);
    font-size: 2.2rem;
    line-height: 1.15;
    margin: 0 0 0.5rem;
    color: var(--mfl-ink);
}
.mfl-fp-abbr { color: var(--mfl-ink-muted); font-weight: 400; font-size: 1.4rem; }

.mfl-fp-short {
    font-size: 1.2rem;
    line-height: 1.5;
    color: var(--mfl-ink);
    font-weight: 500;
    margin: 0 0 1.4rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--mfl-border);
}

.mfl-fp-body {
    font-size: 1.05rem;
    line-height: 1.72;
    color: var(--mfl-ink);
}
.mfl-fp-body p { margin: 0 0 1.1rem; }

.mfl-fp-sec {
    margin: 2rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--mfl-border);
}
.mfl-fp-sec h2 {
    font-family: var(--mfl-font-sans);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mfl-ink-muted);
    margin: 0 0 0.9rem;
}

.mfl-fp-provider-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
}
.mfl-fp-provider-list li { display: block; }
/* Landscape logo box that preserves the wordmark's aspect (Directory normalizes
   logos to 600x300), never the hard square crop of the 'thumbnail' size. */
.mfl-fp-provider-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 78px;
    padding: 0.5rem 0.7rem;
    background: #ffffff;
    border: 1px solid var(--mfl-border);
    border-radius: 8px;
    margin-bottom: 0.5rem;
}
.mfl-fp-provider-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* Same footprint as a real logo box so the row keeps its rhythm, with a paler
   edge so it reads as deliberately blank rather than as a failed image. */
.mfl-fp-provider-logo--empty {
    background: var(--mfl-surface-alt, #f7f8fa);
    border-style: dashed;
    border-color: var(--mfl-border);
}
.mfl-fp-provider-list a {
    display: block;
    text-decoration: none;
    font-family: var(--mfl-font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--mfl-brand);
}
.mfl-fp-provider-list a:hover { color: var(--mfl-accent); }

/* Featured partner leads the FleetPedia rail (Eric, 2026-09-03). It spans the
   full grid width as a tinted panel with a much taller logo box, so it reads
   as a placement rather than one more equal tile; the rest stay in the small
   auto-fill grid below it. Featured already sorts first, so grid-column: 1/-1
   puts it on its own top row. */
.mfl-fp-provider--featured {
    grid-column: 1 / -1;
    background: #fdeee3;
    border: 1px solid rgba(226, 106, 38, 0.35);
    border-radius: 10px;
    padding: 0.9rem 1rem;
}
.mfl-fp-provider--featured .mfl-fp-provider-logo {
    height: 110px;
    background: #fff;
    margin-bottom: 0.6rem;
}
.mfl-fp-provider--featured .mfl-fp-provider-logo img { max-height: 92px; }
.mfl-fp-provider--featured a { font-size: 1.05rem; }
.mfl-fp-provider-tier {
    display: inline-block;
    margin-top: 0.3rem;
    font-family: var(--mfl-font-sans);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mfl-accent);
    background: rgba(226, 106, 38, 0.10);
    padding: 0.12rem 0.4rem;
    border-radius: 3px;
}
.mfl-fp-provider-all {
    display: inline-block;
    margin-top: 1rem;
    color: var(--mfl-accent);
    font-family: var(--mfl-font-sans);
    font-weight: 700;
    font-size: 0.9rem;
}

.mfl-fp-cover-list, .mfl-fp-related-list, .mfl-fp-sources ul {
    list-style: none; margin: 0; padding: 0;
}
.mfl-fp-cover-list li, .mfl-fp-sources li { margin: 0 0 0.5rem; }
.mfl-fp-cover-list a { color: var(--mfl-brand, #e26a26); text-decoration: none; font-weight: 600; }
.mfl-fp-cover-list a:hover { text-decoration: underline; }

.mfl-fp-related-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mfl-fp-related-list li a {
    display: inline-block;
    background: var(--mfl-surface-alt, #f3f6f8);
    border: 1px solid var(--mfl-border);
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.85rem;
    color: var(--mfl-ink);
    text-decoration: none;
}
.mfl-fp-related-list li a:hover { border-color: #e26a26; color: #e26a26; }

.mfl-fp-sources a { color: var(--mfl-ink); }
.mfl-fp-retrieved { color: var(--mfl-ink-muted); font-size: 0.8rem; }

.mfl-fp-reviewed {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--mfl-border);
    color: var(--mfl-ink-muted);
    font-size: 0.85rem;
}

/* Track landing */
.mfl-fp-track-hero { margin: 0 0 1.8rem; }
.mfl-fp-index-hero { margin-top: 1.6rem; }
.mfl-fp-kicker {
    font-family: var(--mfl-font-sans);
    font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--mfl-accent); margin: 0 0 0.3rem;
}
.mfl-fp-track-hero h1 {
    font-family: var(--mfl-font-serif, 'Source Serif 4', Georgia, serif);
    font-size: 2.4rem; margin: 0 0 0.5rem; color: var(--mfl-ink);
}
/* Module jump nav on the Fleet 101 page. */
.mfl-fp-modnav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1.8rem;
}
.mfl-fp-modnav a {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--mfl-border);
    border-radius: 999px;
    background: #fff;
    text-decoration: none;
    font-family: var(--mfl-font-sans);
    font-size: 0.85rem;
    color: var(--mfl-ink);
}
.mfl-fp-modnav a:hover { border-color: var(--mfl-accent); color: var(--mfl-accent); }
.mfl-fp-modnav b { font-weight: 800; color: var(--mfl-accent); }
.mfl-fp-modnav .mfl-fp-modnav-n { color: var(--mfl-ink-muted); font-size: 0.78rem; }

.mfl-fp-track-intro { font-size: 1.1rem; color: var(--mfl-ink-muted); line-height: 1.55; max-width: 62ch; }

.mfl-fp-module { margin: 0 0 1.8rem; }

.mfl-fp-module-title {
    font-size: 1.2rem; color: var(--mfl-ink);
    padding: 0 0 0.5rem; margin: 0 0 0.8rem;
    border-bottom: 2px solid var(--mfl-accent);
}
.mfl-fp-module-empty { color: var(--mfl-ink-muted); font-style: italic; }
.mfl-fp-module-list { list-style: none; margin: 0; padding: 0; counter-reset: fp; }
.mfl-fp-module-item { margin: 0 0 0.5rem; }
.mfl-fp-module-item a {
    display: block;
    padding: 0.75rem 0.9rem;
    background: var(--mfl-surface, #fff);
    border: 1px solid var(--mfl-border);
    border-radius: 7px;
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.mfl-fp-module-item a:hover { border-color: var(--mfl-accent); transform: translateX(2px); }
.mfl-fp-module-item-title { display: block; font-weight: 700; color: var(--mfl-ink); }
.mfl-fp-module-item-short { display: block; font-size: 0.88rem; color: var(--mfl-ink-muted); margin-top: 0.2rem; }
.mfl-fp-draft-tag, .mfl-fp-nav a::after { }
.mfl-fp-draft-tag {
    display: inline-block; font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; color: #7a3d12; background: #ffe6cf;
    padding: 0.05rem 0.4rem; border-radius: 3px; margin-left: 0.4rem; vertical-align: middle;
}

@media (max-width: 600px) {
    .mfl-fp-head h1, .mfl-fp-track-hero h1 { font-size: 1.8rem; }
    .mfl-fp-short { font-size: 1.08rem; }
}

/* FleetPedia index — searchable A–Z reference */
.mfl-fp-index-hero { margin: 0 0 1.6rem; }
.mfl-fp-search {
    display: flex;
    gap: 0.5rem;
    margin: 1rem 0 0.6rem;
    max-width: 480px;
}
/* In the masthead the form is centered under the wordmark, on the peach ground
   rather than on the page ground, so the field needs its own white fill to
   stay legible. */
.mfl-fp-search--masthead {
    margin: 1.1rem auto 0;
    justify-content: center;
}
.mfl-fp-search--masthead input[type="search"] {
    background: #fff;
    border-color: rgba(226, 106, 38, 0.35);
}
.mfl-fp-search input[type="search"] {
    flex: 1 1 auto;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--mfl-border);
    border-radius: 6px;
    font: inherit;
}
.mfl-fp-search button {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    background: #e26a26;
    color: #fff;
    font-weight: 700;
    padding: 0 1.1rem;
    border-radius: 6px;
    cursor: pointer;
}
.mfl-fp-index-track a { color: var(--mfl-brand, #e26a26); font-weight: 600; text-decoration: none; }
.mfl-fp-index-track a:hover { text-decoration: underline; }

/* ONE ROW, ALWAYS. It used to wrap, which meant its height changed with the
   viewport, and a sticky bar of variable height cannot have a correct
   scroll-margin: every fixed value is wrong at some width, and the letter
   landed under the bar. A single scrolling strip has a constant height, so the
   offset can be exact. That height lives on .mfl-fp as --mfl-fp-azbar-h and is
   deliberately NOT repeated here: two declarations of one measurement is how
   they drift apart. */
.mfl-fp-azbar {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.15rem;
    padding: 0.6rem 0;
    background: var(--mfl-bg, #fff);
    border-bottom: 1px solid var(--mfl-border);
    margin: 0 0 1.4rem;
}
/* THE PILLS SHARE THE WIDTH RATHER THAN CLAIMING A FIXED ONE.
   flex: 1 1 0 makes all 27 equal and fills the bar exactly, so the whole
   alphabet is always visible at any width. Fixed-width pills forced a choice
   between two broken states: wrapping, which made the bar height variable and
   left no correct scroll offset, or horizontal scroll, which pushed X, Y and Z
   off the end. Sharing the width is neither.
   Height stays fixed, which is what keeps --mfl-fp-azbar-h true. */
.mfl-fp-azbar a, .mfl-fp-azbar span {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.9rem;
    border-radius: 5px;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
}
@media (max-width: 700px) {
    /* 27 columns on a phone is narrow, so shrink the glyph rather than let a
       letter clip or the row break. */
    .mfl-fp-azbar a, .mfl-fp-azbar span { font-size: 0.72rem; border-radius: 4px; }
    .mfl-fp-azbar { gap: 0.08rem; }
}
.mfl-fp-azbar a { color: #e26a26; background: rgba(226, 106, 38, 0.10); }
.mfl-fp-azbar a:hover { background: #e26a26; color: #fff; }
.mfl-fp-azbar span.is-empty { color: var(--mfl-ink-muted); opacity: 0.4; }

/* ANCHOR LANDING, IN ONE PLACE.
   scroll-margin belongs on the element carrying the id, because that is what
   the browser scrolls to; putting it on the heading inside does nothing.

   The offset is the sticky bar PLUS a real gap, not just the bar. At exactly
   the bar height the heading lands flush against its lower edge with nothing
   above it, which reads as landing below the title, and any rounding tucks the
   heading underneath. The gap is what puts the landing point ABOVE the title.

   --mfl-fp-azbar-h is the measured height of the letter strip: 1.9rem pills
   plus 0.6rem padding top and bottom plus a 1px border. It is only correct
   because the strip no longer wraps. */
/* ANCHOR OFFSETS, FROM MEASUREMENT RATHER THAN ESTIMATE.
   Measured in the browser on staging: .mfl-header is sticky at top:0 and is a
   constant 104px that does not shrink on scroll. THAT is what was cutting the
   letter heading off, and I missed it three times because the sticky
   declaration lives inside a min-width:861px media query, so a plain grep for
   a sticky header came back negative and I offset only for the letter strip.

   Below 861px the header is not sticky, so the strip is the only thing above
   the target and the offset is much smaller.

   Values in px because that is how the occlusion was measured:
     header 104 + strip 51 + a 24 gap = 179. */
.mfl-fp-az-group {
    margin: 0 0 1.6rem;
    scroll-margin-top: 75px;
}
.mfl-fp-module { scroll-margin-top: 24px; }

@media (min-width: 861px) {
    /* The strip has to sit BELOW the sticky header, not behind it. */
    .mfl-fp-azbar { top: 104px; }
    .mfl-fp-az-group { scroll-margin-top: 179px; }
    .mfl-fp-module { scroll-margin-top: 128px; }

    /* WordPress adds a fixed 32px admin bar for signed-in viewers, which is
       everyone who can currently see FleetPedia at all. */
    .admin-bar .mfl-fp-azbar { top: 136px; }
    .admin-bar .mfl-fp-az-group { scroll-margin-top: 211px; }
    .admin-bar .mfl-fp-module { scroll-margin-top: 160px; }
}
/* Calculator unit and the Solutions Guide hand-off. Both are FleetPedia
   telling a reader where to go next, so they share a look: a tinted panel
   distinct from the reference copy around them. */
.mfl-fp-calc, .mfl-fp-handoff {
    margin: 2rem 0 0;
    padding: 1.1rem 1.2rem 1.2rem;
    background: linear-gradient(160deg, #ffefe4 0%, #fff8f3 70%, #ffffff 100%);
    border: 1px solid rgba(226, 106, 38, 0.22);
    border-radius: 10px;
}
.mfl-fp-calc-kicker {
    margin: 0 0 0.35rem;
    font-family: var(--mfl-font-sans);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #e26a26;
}
.mfl-fp-calc-head {
    font-family: var(--mfl-font-serif);
    font-size: 1.15rem;
    line-height: 1.25;
    margin: 0 0 0.5rem;
    color: var(--mfl-ink);
}
.mfl-fp-calc-line, .mfl-fp-handoff-note {
    margin: 0 0 0.9rem;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--mfl-ink-muted);
}
.mfl-fp-calc-cta, .mfl-fp-handoff-all {
    display: inline-block;
    font-family: var(--mfl-font-sans);
    font-weight: 700;
    font-size: 0.88rem;
    color: #e26a26;
    text-decoration: none;
}
.mfl-fp-calc-cta:hover, .mfl-fp-handoff-all:hover { text-decoration: underline; }

.mfl-fp-handoff-list { list-style: none; margin: 0 0 0.9rem; padding: 0; }
.mfl-fp-handoff-list li { margin: 0 0 0.35rem; }
.mfl-fp-handoff-list a {
    font-family: var(--mfl-font-sans);
    font-weight: 600;
    color: var(--mfl-ink);
    text-decoration: none;
}
.mfl-fp-handoff-list a:hover { color: #e26a26; }

.mfl-fp-totop {
    display: block;
    margin: 0.2rem 0 2rem;
    text-align: right;
    font-family: var(--mfl-font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mfl-ink-muted);
    text-decoration: none;
}
.mfl-fp-totop:hover { color: var(--mfl-accent); }

.mfl-fp-az-letter {
    font-family: var(--mfl-font-serif, 'Source Serif 4', Georgia, serif);
    font-size: 1.5rem;
    color: #e26a26;
    margin: 0 0 0.5rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid var(--mfl-border);
}
.mfl-fp-index-h2 { font-size: 1.15rem; color: var(--mfl-ink); margin: 0 0 0.9rem; }

.mfl-fp-term-list { list-style: none; margin: 0; padding: 0; }
.mfl-fp-term-list li { border-bottom: 1px solid var(--mfl-border); }
.mfl-fp-term-list li a {
    display: block;
    padding: 0.65rem 0.2rem;
    text-decoration: none;
    color: var(--mfl-ink);
}
.mfl-fp-term-list li a:hover { background: var(--mfl-surface-alt, #f3f6f8); }
.mfl-fp-term-name { font-weight: 700; color: var(--mfl-ink); }
.mfl-fp-term-list li a:hover .mfl-fp-term-name { color: var(--mfl-accent); }
.mfl-fp-term-short { display: block; font-size: 0.9rem; color: var(--mfl-ink-muted); margin-top: 0.15rem; }

/* -------------------------------------------------------------------------- */
/* Perspectives archive — author columns (headshot once per author)           */
/* -------------------------------------------------------------------------- */
.mfl-pa-authors { margin-top: 1.2rem; }
.mfl-pa {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 1.9rem;
    align-items: start;
    padding: 1.7rem 1.9rem;
    margin: 0 0 1.4rem;
    background: var(--mfl-surface, #fff);
    border: 1px solid var(--mfl-border);
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(0, 17, 43, 0.08);
}

.mfl-pa-head {
    position: sticky;
    top: 1rem;
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
}
/* Headshot framed like the homepage: orange ring on a white ground, a soft
   drop shadow, and a gentle pop on hover (it links to the author's latest
   piece). Only the headshot and the headline are clickable. */
.mfl-pa-avatar {
    display: inline-block;
    width: 122px;
    height: 122px;
    border-radius: 50%;
    padding: 4px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0, 17, 43, 0.14), 0 0 0 2px rgba(226, 106, 38, 0.30);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mfl-pa-avatar:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 10px 24px rgba(0, 17, 43, 0.20), 0 0 0 2px #e26a26;
}
.mfl-pa-avatar img,
.mfl-pa-avatar .avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    box-sizing: border-box;
}
.mfl-pa-byline { display: flex; flex-direction: column; }
.mfl-pa-name {
    font-family: var(--mfl-font-serif, 'Source Serif 4', Georgia, serif);
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--mfl-ink);
    line-height: 1.2;
}
.mfl-pa-role { color: var(--mfl-ink-muted); font-size: 0.85rem; }

.mfl-pa-list { list-style: none; margin: 0; padding: 0; }
.mfl-pa-item { border-bottom: 1px solid var(--mfl-border); padding: 0.9rem 0; }
.mfl-pa-item:first-child { padding-top: 0; }
.mfl-pa-item:last-child { border-bottom: 0; }
.mfl-pa-title {
    margin: 0;
    font-family: var(--mfl-font-serif, 'Source Serif 4', Georgia, serif);
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.3;
}
.mfl-pa-title a { color: var(--mfl-ink); text-decoration: none; }
.mfl-pa-title a:hover { color: #e26a26; }
.mfl-pa-excerpt { margin: 0.3rem 0 0; color: var(--mfl-ink-muted); font-size: 0.95rem; line-height: 1.5; }
.mfl-pa-date { display: block; color: var(--mfl-ink-muted); font-size: 0.78rem; margin-top: 0.35rem; }

/* "More Perspectives from {First}" — shown only when a contributor has more
   than the two pieces the main list caps at; links to their per-author view. */
.mfl-pa-more {
    display: inline-block;
    margin-top: 1rem;
    font-family: var(--mfl-font-sans);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--mfl-accent);
    text-decoration: none;
}
.mfl-pa-more:hover { text-decoration: underline; }

/* Back link at the top of a per-author (solo) view. */
.mfl-pa-back {
    display: inline-block;
    margin-bottom: 0.6rem;
    font-family: var(--mfl-font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mfl-ink-muted);
    text-decoration: none;
}
.mfl-pa-back:hover { color: var(--mfl-accent); }

@media (max-width: 640px) {
    .mfl-pa { grid-template-columns: 1fr; gap: 0.9rem; padding: 1.2rem 1.1rem; }
    .mfl-pa-head { position: static; flex-direction: row; align-items: center; text-align: left; gap: 0.9rem; }
    .mfl-pa-avatar { width: 84px; height: 84px; }
    .mfl-pa-title { font-size: 1.15rem; }
}

/* Editor's Picks on mobile: compact horizontal cards with a small image, so the
   pictures don't dominate the stacked column. Eric. Scoped to the picks module. */
@media (max-width: 680px) {
    .mfl-editors-picks-wrap .mfl-home-topic-grid .mfl-lane-card {
        flex-direction: row;
        gap: 0.75rem;
        align-items: flex-start;
    }
    .mfl-editors-picks-wrap .mfl-home-topic-grid .mfl-lane-card-media {
        flex: 0 0 108px;
        width: 108px;
        margin: 0;
    }
    .mfl-editors-picks-wrap .mfl-home-topic-grid .mfl-lane-card-content {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* Mobile menu footer + Subscribe CTA tweaks (Eric). */
@media (max-width: 860px) {
    /* The footer links in the open menu (Newsletter, About Us, Advertise,
       Promote an Event...) read smaller than the Subscribe link above them. */
    .mfl-has-js .mfl-header-shell .mfl-mobile-menu-links a:not(:first-child) {
        font-size: 0.8rem;
        padding-top: 0.55rem;
        padding-bottom: 0.55rem;
    }
    /* One divider between the topic list and the footer links, not two: the
       last topic item (The Shop) had a bottom border AND the footer section a
       top border. Drop the topic item's and keep the section's full-width line. */
    .mfl-has-js .mfl-header-shell .mfl-topic-nav-inline .mfl-nav-list li:last-child > a {
        border-bottom: 0;
    }
}
/* Tighten the space above the mobile "Subscribe to The Sightline" button. */
.mfl-mobile-bar-cta { margin-top: -0.3rem; }

/* ============================================================
 * Fleet Tools sidebar promo (.mfl-toolpromo) - inc/tools-promo.php.
 * Peach band, portrait cover cropped square and tilted with a drop shadow,
 * question headline, one line, orange CTA, and a very small black
 * "View All Calculators" link beneath it (Eric, 2026-09-02).
 * ============================================================ */
.mfl-toolpromo {
    position: relative;
    /* Breathing room from the module above (Eric): the tilted screenshot is
       absolutely positioned 12px ABOVE this box, so with no top margin it
       collided with the card above it. 2rem leaves ~20px clear above the shot. */
    margin-top: 2rem;
    background: #fff;
    border: 1px solid #e7eef3;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(3, 22, 36, 0.08);
    padding: 0 18px 18px;
    overflow: visible;
}
.mfl-toolpromo-band {
    height: 158px;
    margin: 0 -18px 0;
    border-radius: 14px 14px 0 0;
    background: linear-gradient(160deg, #fef6f0 0%, #fdeee3 100%);
    border-bottom: 1px solid #f5d4be;
}
.mfl-toolpromo--noshot .mfl-toolpromo-band {
    height: 44px;
}
.mfl-toolpromo-shot {
    position: absolute;
    top: -12px;
    right: 22px;
    width: 150px;
    height: 150px;
    overflow: hidden;
    border-radius: 7px;
    border: 1px solid #e26a26;
    background: #fff;
    transform: rotate(7deg);
    box-shadow: 0 22px 34px rgba(0, 17, 43, 0.28), 0 4px 10px rgba(0, 17, 43, 0.12);
    display: block;
}
.mfl-toolpromo-shot img {
    display: block;
    width: 100%;
    height: auto;
}
.mfl-toolpromo-badge {
    position: absolute;
    top: 12px;
    left: 16px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: #00112b;
    color: #fff;
    padding: 3px 8px;
    border-radius: 999px;
}
.mfl-toolpromo-kicker {
    margin: 22px 0 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #e26a26;
}
.mfl-toolpromo-title {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 19px;
    line-height: 1.18;
    margin: 0 0 8px;
    color: #00112b;
}
.mfl-toolpromo-title a {
    color: inherit;
    text-decoration: none;
}
.mfl-toolpromo-title a:hover {
    text-decoration: underline;
}
.mfl-toolpromo-line {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.45;
    color: #586374;
}
.mfl-toolpromo-cta {
    display: inline-block;
    background: #e26a26;
    color: #fff;
    font-weight: 700;
    font-size: 13.5px;
    padding: 8px 14px;
    border-radius: 7px;
    text-decoration: none;
}
.mfl-toolpromo-cta:hover {
    background: #c9581b;
    color: #fff;
}
.mfl-toolpromo-all {
    display: block;
    margin-top: 9px;
    font-size: 11.5px;
    line-height: 1.3;
    color: #111;
    text-decoration: none;
}
.mfl-toolpromo-all:hover {
    text-decoration: underline;
    color: #111;
}
.mfl-toolpromo-shot[hidden] {
    display: none;
}

/* ---------- Perspectives: headshots in black and white ----------
   Eric, 2026-09-05: "make them black and white just for any headshots or
   images related to Perspectives. That will make them stand out more."

   Applied at every surface a Perspectives face appears on, so the treatment
   reads as deliberate rather than as one page being different: the homepage
   band, the list/archive card, and the author bio on the article itself.

   Deliberately NOT reverted on hover. The greyscale IS the signal Eric asked
   for; flashing back to colour on hover would undercut the thing it exists to
   do, and hover states do not exist on touch at all. The existing scale-up
   hover on the homepage card still fires, so the card keeps its feedback. */
.mfl-home-perspective-avatar-image,
.mfl-perspective-card-avatar img,
.mfl-perspective-author-bio-avatar img,
.mfl-home-feed-perspectives .mfl-home-perspective-avatar-image {
    filter: grayscale(100%);
}

/* Forced-colors users get the system palette; a filter there is noise. */
@media (forced-colors: active) {
    .mfl-home-perspective-avatar-image,
    .mfl-perspective-card-avatar img,
    .mfl-perspective-author-bio-avatar img {
        filter: none;
    }
}

/* ---------- Perspectives byline card ----------
   The avatar here is a THIRD element I missed first time: the article byline
   card uses .mfl-perspective-avatar-img inside .mfl-perspective-byline-avatar,
   which none of the earlier selectors matched, so these stayed in colour while
   the homepage and list versions went grey. Eric spotted it on a live article.

   The card itself moves off the grey-lilac gradient (#f4f8fc -> #eaf1f8), which
   read as washed rather than branded, onto a lighter tint of the brand blue
   (#10a5f5). Lighter and unmistakably blue, per Eric 2026-09-05. */
.mfl-perspective-byline-avatar img,
.mfl-perspective-avatar-img {
    filter: grayscale(100%);
}

.mfl-perspective-byline-card {
    background: linear-gradient(135deg, #f0f9ff 0%, #e2f2fd 100%);
    border-color: rgba(16, 165, 245, 0.28);
}

@media (forced-colors: active) {
    .mfl-perspective-byline-avatar img,
    .mfl-perspective-avatar-img {
        filter: none;
    }
}

/* ---------- Perspectives greyscale: the complete set ----------
   Chasing these one screenshot at a time found five different avatar classes
   across four surfaces, so this is the enumerated list rather than another
   guess. Taken from every avatar/headshot class in the templates:

     mfl-home-perspective-avatar-image  homepage band
     mfl-perspective-byline-avatar      article byline card
     mfl-perspective-avatar-img         article byline card (the img itself)
     mfl-perspective-author-bio-avatar  article author bio
     mfl-perspective-card-avatar        list card
     mfl-pa-avatar                      /category/perspectives/ archive

   DELIBERATELY NOT INCLUDED, because Eric scoped this to Perspectives:
   mfl-author-header-avatar, mfl-editorial-team-avatar,
   mfl-editorial-welcome-avatar, mfl-ea-welcome-avatar. The team page and
   author archives stay in colour. */
.mfl-pa-avatar,
.mfl-pa-avatar img {
    filter: grayscale(100%);
}

@media (forced-colors: active) {
    .mfl-pa-avatar,
    .mfl-pa-avatar img { filter: none; }
}

/* ---------- Card and hero images: fit, never crop ----------
   Eric, 2026-09-05: the homepage hero goes back to the wider ratio, and
   off-ratio images get "a background that fills in with color around border of
   area to make up the difference" rather than being cut.

   WHY CONTAIN RATHER THAN COVER. cover fills the box by cropping whatever does
   not fit. Measured on live, that was removing 17-31% of image HEIGHT on 4:3
   and 3:2 sources - and our generated covers carry TEXT, so the crop was
   deleting the message. contain fits the whole image and pads the remainder.

   The pad is a soft on-brand wash rather than flat grey, so a letterboxed
   image reads as a deliberate treatment instead of a rendering accident. */
.mfl-home-lead-media {
    /* Back to the wider hero shape. */
    aspect-ratio: 16 / 9;
}

.mfl-home-lead-media,
.mfl-more-story-media,
.mfl-lane-card-media,
.mfl-home-lead-grid-full .mfl-grid-thumb,
.mfl-feed-list .mfl-card-has-image .mfl-card-media {
    background: linear-gradient(135deg, #eaf3fb 0%, #dce9f6 55%, #eef6fd 100%);
    overflow: hidden;
}

.mfl-home-lead-media img,
.mfl-more-story-media img,
.mfl-lane-card-media img,
.mfl-home-lead-grid-full .mfl-grid-thumb img,
.mfl-feed-list .mfl-card-has-image .mfl-card-media img {
    object-fit: contain;
    object-position: center;
    width: 100%;
    height: 100%;
}

/* ---------- Editor's Picks: a real scroller on mobile ----------
   REVERSES an earlier decision, deliberately. The block above at ~12366 made
   mobile picks compact horizontal cards with a 108px thumbnail, "so the
   pictures don't dominate the stacked column". Eric, 2026-09-05: the images
   are too small on mobile, and Editor's Picks should be a scroller with arrows
   and a larger image. The newer instruction wins; the old rules are overridden
   here rather than deleted so the history stays readable.

   Measured before changing: the picks thumbnail rendered 106x59 at 375px, or
   28% of screen width. B2B publishing convention is a card image at 60% of
   viewport width or more, with card headlines around 17-18px rather than 20. */
@media (max-width: 680px) {
    .mfl-editors-picks-wrap .mfl-home-topic-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 0.9rem;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Bleed to the screen edge so a half-visible next card signals
           "scrollable" without needing an affordance. */
        padding-inline: 0.2rem 1.1rem;
    }
    .mfl-editors-picks-wrap .mfl-home-topic-grid::-webkit-scrollbar { display: none; }

    .mfl-editors-picks-wrap .mfl-home-topic-grid .mfl-lane-card {
        flex: 0 0 76vw !important;
        width: 76vw !important;
        max-width: 340px;
        flex-direction: column;
        scroll-snap-align: start;
    }
    .mfl-editors-picks-wrap .mfl-home-topic-grid .mfl-lane-card-media {
        flex: none;
        width: 100%;
        aspect-ratio: 3 / 2;
        margin: 0 0 0.65rem;
    }
    /* The arrows were hidden because the cards used to stack. They scroll now,
       so they are the control for it. */
    .mfl-editors-picks-nav { display: flex !important; }

    .mfl-editors-picks-wrap .mfl-home-topic-grid .mfl-lane-card h3,
    .mfl-editors-picks-wrap .mfl-home-topic-grid .mfl-lane-card h3 a {
        font-size: 1.06rem;   /* ~17px, down from 20 */
        line-height: 1.32;
    }

    /* More Recent: same complaint, same fix. Image across the card rather than
       a thumbnail beside the text. */
    .mfl-more-story-media {
        width: 100%;
        aspect-ratio: 3 / 2;
        margin: 0 0 0.6rem;
    }
    .mfl-more-story {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ---------- Correction: fit GENERATED covers, fill photographs ----------
   The block above applied object-fit: contain to every card and hero image.
   That was too broad and the homepage hero looked bad for it: a photograph
   letterboxed inside a large hero reads as a mistake, and a photo losing a few
   percent to a crop reads as normal. Eric flagged it immediately.

   The real distinction is not the container, it is the IMAGE. Our generated
   covers have TEXT rendered into the pixels, so any crop deletes words.
   Photographs have no such constraint and should fill their frame.

   Generated covers are identifiable by filename, which is the only handle CSS
   has on this: cover-<lane>-<id>.jpg from the fallback generator,
   perspectives-card-<author>.jpg, and the resource covers. */
.mfl-home-lead-media img,
.mfl-more-story-media img,
.mfl-lane-card-media img,
.mfl-home-lead-grid-full .mfl-grid-thumb img,
.mfl-feed-list .mfl-card-has-image .mfl-card-media img {
    object-fit: cover;
}

img[src*="/cover-"],
img[src*="perspectives-card"],
img[src*="resource-card-cover"],
img[src*="resource-cover-"] {
    object-fit: contain !important;
    /* The wash sits behind the letterbox so the padding looks intended.
       Only ever visible on an image that does not fill its frame. */
    background: linear-gradient(135deg, #eaf3fb 0%, #dce9f6 55%, #eef6fd 100%);
}

/* ---------- 3:2 on the last two surfaces still at 16:9 ----------
   Eric, 2026-09-05: the full-article page's main image and the homepage
   Editor's Picks row are still the wrong ratio.

   Both were missed by the earlier 3:2 pass because neither is set where the
   others are. Editor's Picks gets its ratio from the "Image fit - SURGICAL"
   block near line 8457, which was written in July for a different problem
   (uneven card heights) and hard-set 16/9. The article hero sets its ratio on
   the IMG rather than the frame, at line 4020, so a search for a container
   ratio does not find it. Overridden here rather than edited in place, which
   is how the rest of this file records a reversal.

   Why 3:2 matters more here than elsewhere: these two surfaces show the
   generated covers, and a generated cover is mostly TEXT. Cropping 16:9 out of
   a 3:2 source removes about 16% of the width, and what it removes is words. */
.mfl-home-topic-grid .mfl-lane-card-media {
    aspect-ratio: 3 / 2;
}

.mfl-story-featured-media-frame img {
    aspect-ratio: 3 / 2;
}

@media (max-width: 680px) {
    /* The mobile block near 4857 restates 16/9 for the article hero; it is
       inside a media query, so it outranks the rule above on phones. */
    .mfl-story-featured-media img {
        aspect-ratio: 3 / 2;
    }
}

/* The small-image exemption STAYS. A featured image narrower than the content
   column is shown at its natural size rather than stretched, and forcing a
   ratio on it is what upscaling looks like. */
.mfl-story-featured-media--small .mfl-story-featured-media-frame img {
    aspect-ratio: auto;
}

/* The article hero frame is white, so a letterboxed generated cover there sat
   in white bars while the same cover on a card sat in the brand wash. Same
   treatment on both. Photographs fill the frame and never reveal it. */
.mfl-story-featured-media-frame {
    background: linear-gradient(135deg, #eaf3fb 0%, #dce9f6 55%, #eef6fd 100%);
}

/* ...except the small-image frame, which pads around a natural-size image.
   There the fill is not a letterbox, it is the whole surround, and it was
   deliberately white. Eric asked about ratios, not about that. */
.mfl-story-featured-media--small .mfl-story-featured-media-frame {
    background: #ffffff;
}