/*
 * MoFutbol Brand V2 theme layer.
 * Centralized tokens and production-safe overrides for the approved MF identity.
 */
:root {
  --mf-black: #080B0B;
  --mf-onyx: #0B0B0B;
  --mf-charcoal: #121715;
  --mf-surface: #171D1A;
  --mf-surface-raised: #1D2521;
  --mf-border: #2B352F;
  --mf-white: #F7F7F4;
  --mf-gray-100: #E7EAE7;
  --mf-gray-300: #B7BEB9;
  --mf-gray-500: #89928C;
  --mf-green-dark: #1B5E2B;
  --mf-green: #2E7D32;
  --mf-green-bright: #46A83E;
  --mf-yellow: #F4C430;
  --mf-red: #E53935;
  --brand-red: var(--mf-red);
  --brand-yellow: var(--mf-yellow);
  --brand-green: var(--mf-green);
  --brand-black: var(--mf-black);
  --color-bg: var(--mf-black);
  --color-surface: var(--mf-charcoal);
  --color-surface-2: var(--mf-surface);
  --color-surface-3: var(--mf-surface-raised);
  --color-text: var(--mf-white);
  --color-muted: var(--mf-gray-300);
  --color-border: rgba(43, 53, 47, .88);
  --color-border-strong: rgba(70, 168, 62, .46);
  --color-accent: var(--mf-green-bright);
  --color-accent-hover: #63B95B;
  --color-accent-dim: var(--mf-green-dark);
  --color-accent-soft: rgba(46, 125, 50, .14);
  --color-danger: var(--mf-red);
  --font-display: "Bebas Neue", sans-serif;
  --font-heading: "Bebas Neue", sans-serif;
  --font-body: "Montserrat", sans-serif;
  --font-ui: "Montserrat", sans-serif;
  --font-mono: var(--font-ui);
  --f-display: var(--font-display);
  --f-heading: var(--font-heading);
  --f-body: var(--font-body);
  --f-sans: var(--font-body);
  --f-mono: var(--font-ui);
  --mf-brand-bg-16x9: url("/assets/brand-v2/backgrounds/mf-background-16x9.webp");
  --mf-brand-social: url("/assets/brand-v2/backgrounds/mf-background-1200x630.webp");
  color-scheme: dark;
}

html {
  scroll-behavior: smooth;
  background: var(--mf-black);
}

body.mf-brand-v2,
html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 16% 0, rgba(46, 125, 50, .16), transparent 24rem),
    linear-gradient(180deg, var(--mf-black), #040606 58%, var(--mf-onyx));
  color: var(--mf-white);
  font-family: var(--font-body);
}

body.mf-brand-v2::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(135deg, rgba(247, 247, 244, .025) 0 1px, transparent 1px 19px),
    radial-gradient(circle at 88% 12%, rgba(244, 196, 48, .06), transparent 18rem);
  background-size: 19px 19px, auto;
  opacity: .58;
}

.mf-page,
.mf-shell,
.site-container,
.stl-container,
.mf-v22-container {
  width: min(calc(100% - 2rem), 1200px);
  margin-inline: auto;
}

.mf-section {
  padding-block: clamp(1.1rem, 2.4vw, 2.2rem);
}

.mf-section-heading,
.stl-heading,
.stl-subheading,
body.mf-brand-v2 h1,
body.mf-brand-v2 h2,
body.mf-brand-v2 h3 {
  font-family: var(--font-display);
  letter-spacing: 0;
  text-wrap: balance;
}

.mf-card,
.mf-card-featured,
.mf-card-media,
.mf-card-player,
body.mf-brand-v2 main :where(article, .mf-home-spotlight-card, .mf-v22-find-panel, .mf-newsroom-today-card, .mf-newsroom-story, .mf-newsroom-player-card, .mf-v22-feature, .mf-v22-diaspora-card, .mf-info-card) {
  border: 1px solid rgba(43, 53, 47, .95);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(29, 37, 33, .92), rgba(10, 14, 13, .96));
  box-shadow: inset 0 1px 0 rgba(247, 247, 244, .045);
}

body.mf-brand-v2 main :where(article, a, button, input, textarea, select) {
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

body.mf-brand-v2 main :where(a, button, input, textarea, select):focus-visible,
body.mf-brand-v2 .site-header :where(a, button):focus-visible,
body.mf-brand-v2 .site-footer :where(a, button):focus-visible {
  outline: 2px solid var(--mf-yellow);
  outline-offset: 3px;
}

.mf-button-primary,
body.mf-brand-v2 :where(.stl-btn--primary, .site-button--primary, .mf-v22-button--primary, .site-header__cta--media) {
  border-color: rgba(70, 168, 62, .78) !important;
  color: var(--mf-white) !important;
  background: linear-gradient(135deg, var(--mf-green-dark), var(--mf-green) 68%, #3C9341) !important;
  text-shadow: none !important;
}

.mf-button-secondary,
body.mf-brand-v2 :where(.stl-btn--ghost, .mf-v22-button--secondary, .site-button--secondary) {
  border-color: rgba(70, 168, 62, .52) !important;
  color: var(--mf-white) !important;
  background: rgba(23, 29, 26, .82) !important;
}

.mf-button-ghost {
  color: var(--mf-green-bright);
  background: transparent;
}

body.mf-brand-v2 :where(.stl-btn--primary, .site-button--primary, .mf-v22-button--primary, .site-header__cta--media):hover,
body.mf-brand-v2 :where(.stl-btn--ghost, .mf-v22-button--secondary, .site-button--secondary):hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .28);
}

.mf-badge,
.mf-badge-live,
.stl-eyebrow,
.mf-v22-kicker,
.mf-v22-hero-kicker span {
  color: var(--mf-green-bright) !important;
  font-family: var(--font-ui);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mf-badge-live {
  color: var(--mf-white) !important;
}

.mf-badge-live::before {
  display: inline-block;
  width: .5rem;
  height: .5rem;
  margin-right: .4rem;
  border-radius: 999px;
  background: var(--mf-red);
  content: "";
}

.mf-divider,
.mf-accent-line {
  min-height: 1px;
  background: linear-gradient(90deg, var(--mf-green), var(--mf-yellow), rgba(229, 57, 53, .72));
}

.mf-pattern-africa,
.mf-pattern-pitch {
  position: relative;
  overflow: hidden;
}

.mf-pattern-africa::before,
.mf-pattern-pitch::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
  opacity: .04;
  background-image:
    linear-gradient(45deg, currentColor 12%, transparent 12%, transparent 50%, currentColor 50%, currentColor 62%, transparent 62%);
  background-size: 28px 28px;
}

.mf-logo-compact {
  display: inline-block;
  width: 2.75rem;
  height: 2.75rem;
  object-fit: contain;
}

.mf-logo-lockup {
  display: inline-block;
  width: min(18rem, 100%);
  height: auto;
  object-fit: contain;
}

body.mf-brand-v2 .site-header {
  border-bottom: 1px solid rgba(43, 53, 47, .95);
  background: rgba(11, 11, 11, .96) !important;
  backdrop-filter: blur(14px);
}

body.mf-brand-v2 .site-brand {
  gap: .62rem;
}

body.mf-brand-v2 .site-brand__logo {
  border-radius: 999px;
  background: var(--mf-black);
  box-shadow: 0 0 0 1px rgba(70, 168, 62, .32);
}

body.mf-brand-v2 .site-brand__name {
  color: var(--mf-white);
  font-family: var(--font-display);
  letter-spacing: .02em;
  text-transform: uppercase;
}

body.mf-brand-v2 .site-brand__name::after {
  content: ".TV";
  color: var(--mf-green-bright);
}

body.mf-brand-v2 .site-brand__tag {
  color: var(--mf-gray-300);
  letter-spacing: .12em;
  text-transform: uppercase;
}

body.mf-brand-v2 .site-nav :where(.site-nav__link, .site-nav__toggle):hover,
body.mf-brand-v2 .site-nav :where(.site-nav__link, .site-nav__toggle)[aria-current="page"],
body.mf-brand-v2 .site-nav [data-has-panel].is-open > .site-nav__toggle {
  color: var(--mf-white) !important;
  background: rgba(46, 125, 50, .18) !important;
  box-shadow: inset 0 -2px 0 var(--mf-green-bright);
}

body.mf-brand-v2 .mf-score-ribbon {
  border-block-color: rgba(43, 53, 47, .95) !important;
  background: linear-gradient(90deg, #040606, var(--mf-charcoal), #040606) !important;
}

body.mf-brand-v2 .mf-score-ribbon__brand span {
  color: var(--mf-yellow);
}

body.mf-brand-v2 .mf-v22-hero {
  min-height: auto;
  padding-block: clamp(1.15rem, 2.4vw, 2rem) !important;
  background:
    linear-gradient(90deg, rgba(8, 11, 11, .96), rgba(8, 11, 11, .78) 46%, rgba(8, 11, 11, .93)),
    var(--mf-brand-bg-16x9) center / cover no-repeat !important;
}

body.mf-brand-v2 .mf-v22-hero__bg {
  background:
    linear-gradient(90deg, rgba(8, 11, 11, .94), rgba(8, 11, 11, .54) 54%, rgba(8, 11, 11, .82)),
    var(--mf-brand-bg-16x9) center / cover no-repeat !important;
}

body.mf-brand-v2 .mf-v22-hero__copy,
body.mf-brand-v2 .mf-v22-find-panel {
  border-color: rgba(43, 53, 47, .94) !important;
  background: rgba(11, 11, 11, .82) !important;
}

body.mf-brand-v2 #home-hero-title {
  max-width: 15ch;
  color: var(--mf-white);
  font-size: clamp(2.3rem, 4.5vw, 4.6rem) !important;
  line-height: .9 !important;
}

body.mf-brand-v2 .mf-v22-hero__lede {
  max-width: 55ch;
  color: var(--mf-gray-100);
  font-size: clamp(1rem, 1.25vw, 1.18rem);
}

body.mf-brand-v2 .mf-v22-now-line {
  border-left: 3px solid var(--mf-yellow) !important;
  background: rgba(18, 23, 21, .9) !important;
}

body.mf-brand-v2 .site-footer {
  border-top: 1px solid rgba(43, 53, 47, .95);
  background:
    linear-gradient(180deg, rgba(11, 11, 11, .96), rgba(4, 6, 6, .98)),
    var(--mf-brand-social) center / cover no-repeat !important;
}

body.mf-brand-v2 .site-footer__copy {
  max-width: 56ch;
  color: var(--mf-gray-300);
}

html body.mf-brand-v2.mf-page-shell.mf-system-page.mf-system-diaspora.mf-v44-players main#main-content .mf-player-tracker-hero.mf-polish-hero {
  background:
    radial-gradient(circle at 82% 14%, rgba(70, 168, 62, .16), transparent 19rem),
    radial-gradient(circle at 18% 12%, rgba(244, 196, 48, .12), transparent 17rem),
    linear-gradient(105deg, rgba(8, 11, 11, .98) 0%, rgba(4, 22, 16, .94) 50%, rgba(8, 11, 11, .98) 100%) !important;
}

html body.mf-brand-v2.mf-page-shell.mf-system-page.mf-system-diaspora.mf-v44-players main#main-content .mf-player-tracker-hero.mf-polish-hero .mf-tracker-hero-bg.mf-diaspora-hero__bg {
  background:
    linear-gradient(100deg, rgba(8, 11, 11, .96) 0%, rgba(8, 11, 11, .66) 48%, rgba(8, 11, 11, .9) 100%),
    radial-gradient(circle at 20% 16%, rgba(244, 196, 48, .24), transparent 15rem),
    radial-gradient(circle at 78% 20%, rgba(70, 168, 62, .24), transparent 18rem),
    linear-gradient(135deg, rgba(46, 125, 50, .11) 0 1px, transparent 1px 20px),
    linear-gradient(90deg, transparent 0 49%, rgba(247, 247, 244, .07) 49% 51%, transparent 51% 100%),
    linear-gradient(0deg, transparent 0 49%, rgba(247, 247, 244, .045) 49% 51%, transparent 51% 100%) !important;
  background-size: auto, auto, auto, 20px 20px, 18rem 18rem, 18rem 18rem !important;
}

.mf-brand-v2-kit {
  background: var(--mf-black);
}

.mf-brand-v2-kit__hero {
  padding-block: clamp(2rem, 5vw, 4rem);
  background:
    linear-gradient(90deg, rgba(8, 11, 11, .95), rgba(8, 11, 11, .68) 54%, rgba(8, 11, 11, .92)),
    var(--mf-brand-bg-16x9) center / cover no-repeat;
}

.mf-brand-v2-kit__grid,
.mf-brand-v2-kit__asset-grid,
.mf-brand-v2-kit__template-grid,
.mf-brand-v2-kit__usage-grid {
  display: grid;
  gap: clamp(.8rem, 1.5vw, 1.15rem);
}

.mf-brand-v2-kit__grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(18rem, .9fr);
  align-items: center;
}

.mf-brand-v2-kit__panel {
  padding: clamp(1rem, 2vw, 1.4rem);
  border: 1px solid var(--mf-border);
  border-radius: 8px;
  background: rgba(11, 11, 11, .84);
}

.mf-brand-v2-kit__panel img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.mf-brand-v2-kit__asset-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mf-brand-v2-kit__template-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mf-brand-v2-kit__usage-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mf-brand-v2-swatch {
  display: grid;
  gap: .45rem;
  min-height: 8rem;
  padding: .8rem;
  border: 1px solid var(--mf-border);
  border-radius: 8px;
  background: var(--mf-surface);
}

.mf-brand-v2-swatch i {
  display: block;
  min-height: 3.4rem;
  border-radius: 6px;
  background: var(--swatch);
}

.mf-brand-v2-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.65rem;
  padding-inline: .95rem;
  border: 1px solid rgba(70, 168, 62, .55);
  border-radius: 6px;
  color: var(--mf-white);
  background: rgba(23, 29, 26, .9);
  font-weight: 800;
  text-decoration: none;
}

@media (max-width: 900px) {
  .mf-brand-v2-kit__grid,
  .mf-brand-v2-kit__asset-grid,
  .mf-brand-v2-kit__template-grid,
  .mf-brand-v2-kit__usage-grid {
    grid-template-columns: 1fr;
  }

  body.mf-brand-v2 .site-brand__tag {
    display: none;
  }
}

/* Brand-v2 editorial alignment for the official STL route map. */
.mf-route-map {
  background:
    linear-gradient(90deg, rgba(238, 58, 62, 0.05), transparent 28%),
    radial-gradient(circle at 84% 0%, rgba(32, 93, 54, 0.38), transparent 38%),
    #030806;
}

.mf-route-shell {
  width: min(1220px, calc(100% - 32px));
}

.mf-route-hero {
  gap: 16px;
}

.mf-route-intro,
.mf-route-proof,
.mf-route-tier,
.mf-route-note {
  border-color: rgba(245, 207, 72, 0.34);
  border-radius: 10px;
}

.mf-route-intro {
  min-height: 358px;
  background-image:
    linear-gradient(96deg, rgba(3, 12, 7, 0.97) 0%, rgba(3, 12, 7, 0.78) 53%, rgba(3, 12, 7, 0.34) 100%),
    url("/assets/img/stl-hero/energizer-park-stl.jpg");
  background-position: center;
}

.mf-route-intro h1 {
  max-width: 12ch;
  font-family: var(--font-display);
  font-size: clamp(2.35rem, 5vw, 4.75rem);
  line-height: 0.93;
}

.mf-route-proof {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(15, 49, 30, 0.94), rgba(3, 13, 8, 0.98));
}

.mf-route-proof::after {
  position: absolute;
  right: -4px;
  bottom: 16px;
  width: 52px;
  height: 3px;
  background: linear-gradient(90deg, #8ce64f, #f5cf48, #ee3a3e);
  content: "";
}

.mf-route-map__head {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid rgba(221, 235, 214, 0.18);
}

.mf-route-tier {
  background: linear-gradient(118deg, rgba(12, 37, 23, 0.98), rgba(4, 14, 9, 0.98));
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
}

.mf-route-tier[style*="56aaff"] {
  --tier-color: #8ce64f !important;
}

.mf-route-node {
  border-color: rgba(125, 158, 94, 0.48);
  border-radius: 7px;
  background: rgba(5, 20, 12, 0.9);
}

.mf-route-node:hover,
.mf-route-node:focus-visible {
  background: #123b25;
}

.mf-route-note {
  background: linear-gradient(96deg, rgba(17, 54, 31, 0.96), rgba(4, 15, 9, 0.98));
}

@media (max-width: 850px) {
  .mf-route-hero {
    grid-template-columns: 1fr;
  }

  .mf-route-intro {
    min-height: 0;
  }
}

@media (max-width: 560px) {
  .mf-route-shell {
    width: min(100% - 22px, 1220px);
  }
}

/* Article desk refinement: presentation only, live stories remain data-driven. */
body.mf-articles-page #mf-newsroom-front {
  position: relative;
  overflow: hidden;
  border-block: 1px solid rgba(245, 207, 72, 0.4);
  background:
    linear-gradient(90deg, rgba(245, 207, 72, 0.08), transparent 27%),
    linear-gradient(180deg, #06110b 0%, #030806 100%);
}

body.mf-articles-page #mf-newsroom-front::before {
  position: absolute;
  top: 0;
  right: 0;
  width: min(34vw, 420px);
  height: 3px;
  background: linear-gradient(90deg, #8ce64f, #f5cf48, #ee3a3e);
  content: "";
}

body.mf-articles-page .mf-newsroom-masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.42fr) minmax(240px, 0.72fr);
  gap: 24px;
  align-items: end;
  margin-bottom: 14px;
  padding: 20px 0 18px;
  border-bottom: 1px solid rgba(221, 235, 214, 0.22);
}

body.mf-articles-page .mf-newsroom-masthead__copy h2 {
  margin: 5px 0 4px;
  color: #fffdf4;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 4.2rem);
  line-height: 0.95;
}

body.mf-articles-page .mf-newsroom-masthead__copy p {
  max-width: 52ch;
  margin: 0;
  color: #cbd7c8;
}

body.mf-articles-page .mf-newsroom-edition {
  display: grid;
  gap: 5px;
  align-self: stretch;
  align-content: end;
  padding: 12px 0 12px 16px;
  border-left: 2px solid #f5cf48;
}

body.mf-articles-page .mf-newsroom-edition span,
body.mf-articles-page .mf-newsroom-edition small {
  color: #bdcdbb;
  font: 700 0.72rem/1.25 var(--font-ui);
  text-transform: uppercase;
}

body.mf-articles-page .mf-newsroom-edition strong {
  color: #f8d64d;
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.15;
}

body.mf-articles-page .mf-newsroom-search {
  padding: 0;
  border: 0;
  background: transparent;
}

body.mf-articles-page .mf-newsroom-tools {
  position: relative;
  z-index: 1;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(221, 235, 214, 0.16);
}

body.mf-articles-page .mf-newsroom-front-grid--deduped {
  position: relative;
}

body.mf-articles-page .mf-newsroom-card--lead {
  border-top: 3px solid #f5cf48;
}

body.mf-articles-page .mf-newsroom-side {
  gap: 14px;
}

body.mf-articles-page .mf-newsroom-card--side {
  border-left: 2px solid rgba(140, 230, 79, 0.74);
}

body.mf-articles-page .mf-newsroom-card__meta span {
  color: #f5cf48;
}

@media (max-width: 880px) {
  body.mf-articles-page .mf-newsroom-masthead {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.7fr);
  }

  body.mf-articles-page .mf-newsroom-search {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  body.mf-articles-page .mf-newsroom-masthead {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  body.mf-articles-page .mf-newsroom-edition {
    padding: 10px 0 10px 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.mf-brand-v2 *,
  body.mf-brand-v2 *::before,
  body.mf-brand-v2 *::after {
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
  }
}

/* Homepage brand masthead: aligns the live experience with the approved
   stadium-lit MoFutbol visual world while keeping its existing routes intact. */
body.mf-brand-v2.mf-home-v22 .site-header {
  border-bottom-color: rgba(190, 210, 187, .18);
  background: rgba(9, 11, 10, .98) !important;
}

body.mf-brand-v2.mf-home-v22 .site-header::before {
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--mf-green), var(--mf-yellow) 62%, var(--mf-red));
  content: "";
}

body.mf-brand-v2.mf-home-v22 .mf-v22-hero--clean {
  position: relative;
  isolation: isolate;
  min-height: clamp(35rem, 51vw, 45rem) !important;
  overflow: hidden;
  padding: 0 !important;
  border-bottom: 1px solid rgba(218, 228, 215, .25) !important;
  background:
    linear-gradient(90deg, rgba(7, 9, 8, .99) 0%, rgba(7, 9, 8, .95) 42%, rgba(7, 9, 8, .46) 72%, rgba(7, 9, 8, .84) 100%),
    linear-gradient(0deg, rgba(7, 9, 8, .95), transparent 36%, rgba(7, 9, 8, .44)),
    var(--mf-brand-bg-16x9) center / cover no-repeat !important;
}

body.mf-brand-v2.mf-home-v22 .mf-v22-hero--clean::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(135deg, transparent 0 11%, rgba(72, 168, 73, .72) 11.1% 11.3%, transparent 11.4% 100%),
    linear-gradient(135deg, transparent 0 12.5%, rgba(244, 196, 48, .72) 12.6% 12.8%, transparent 12.9% 100%),
    linear-gradient(135deg, transparent 0 14%, rgba(229, 57, 53, .68) 14.1% 14.3%, transparent 14.4% 100%);
  opacity: .78;
  content: "";
}

body.mf-brand-v2.mf-home-v22 .mf-v22-hero--clean .mf-v22-hero__bg {
  display: none;
}

body.mf-brand-v2.mf-home-v22 .mf-v22-hero--clean .mf-v22-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 43rem) minmax(20rem, 1fr);
  align-items: center;
  min-height: clamp(35rem, 51vw, 45rem);
  padding-block: clamp(3.4rem, 6vw, 5.8rem) clamp(6.25rem, 9vw, 8.75rem) !important;
}

body.mf-brand-v2.mf-home-v22 .mf-v22-hero--clean .mf-v22-hero__grid::before {
  position: absolute;
  z-index: -1;
  inset: 0 -4vw 0 auto;
  width: min(50vw, 42rem);
  background:
    linear-gradient(90deg, rgba(7, 9, 8, 1), transparent 26%),
    linear-gradient(0deg, rgba(7, 9, 8, .88), transparent 42%),
    url("../img/homepage/mofutbol-founder-portrait.png") 50% 42% / cover no-repeat;
  filter: saturate(.9) contrast(1.04);
  content: "";
}

body.mf-brand-v2.mf-home-v22 .mf-v22-hero--clean .mf-v22-hero__copy {
  position: relative;
  z-index: 1;
  max-width: 43rem;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.mf-brand-v2.mf-home-v22 .mf-v22-hero-kicker {
  width: fit-content;
  margin-bottom: .65rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid rgba(245, 247, 242, .42);
}

body.mf-brand-v2.mf-home-v22 .mf-v22-hero-kicker span {
  color: #d7e7d2 !important;
  font-size: .7rem;
  letter-spacing: .22em;
}

body.mf-brand-v2.mf-home-v22 #home-hero-title {
  max-width: 10.5ch !important;
  margin: 0;
  color: #f1f3ee;
  font-size: clamp(3rem, 6.2vw, 6.5rem) !important;
  line-height: .82 !important;
  letter-spacing: .01em !important;
  text-shadow: 0 4px 26px rgba(0, 0, 0, .35);
}

body.mf-brand-v2.mf-home-v22 #home-hero-title::after {
  display: block;
  width: min(13rem, 45%);
  height: 3px;
  margin-top: .72rem;
  background: linear-gradient(90deg, var(--mf-green), var(--mf-yellow) 66%, var(--mf-red));
  content: "";
}

body.mf-brand-v2.mf-home-v22 .mf-v22-hero__lede {
  max-width: 35rem !important;
  margin-top: 1.1rem;
  color: rgba(235, 240, 233, .84) !important;
  font-size: clamp(1rem, 1.45vw, 1.17rem) !important;
  line-height: 1.48 !important;
}

body.mf-brand-v2.mf-home-v22 .mf-v22-now-line {
  max-width: 35rem;
  margin-top: .55rem;
  padding: .82rem 0 .3rem 1rem;
  border: 0 !important;
  border-left: 2px solid var(--mf-yellow) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body.mf-brand-v2.mf-home-v22 .mf-v22-now-line span {
  color: var(--mf-yellow);
  font: 800 .63rem/1.2 var(--font-ui);
  letter-spacing: .18em;
  text-transform: uppercase;
}

body.mf-brand-v2.mf-home-v22 .mf-v22-now-line strong {
  margin-top: .25rem;
  color: #f5f6f1;
  font-family: var(--font-heading);
  font-size: clamp(1rem, 1.5vw, 1.22rem);
  line-height: 1.14;
}

body.mf-brand-v2.mf-home-v22 .mf-v22-now-line small {
  color: rgba(225, 235, 222, .64);
}

body.mf-brand-v2.mf-home-v22 .mf-v22-actions {
  margin-top: .95rem;
  gap: .65rem !important;
}

body.mf-brand-v2.mf-home-v22 .mf-v22-actions .mf-v22-button {
  min-height: 2.9rem !important;
  border-radius: 2px !important;
  padding-inline: 1rem !important;
  font-size: .83rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

body.mf-brand-v2.mf-home-v22 .mf-v22-actions .mf-v22-button--primary {
  border-color: rgba(225, 236, 218, .54) !important;
  background: #255f31 !important;
}

body.mf-brand-v2.mf-home-v22 .mf-v22-actions .mf-v22-button--secondary {
  border-color: rgba(245, 196, 48, .68) !important;
  background: rgba(11, 14, 12, .52) !important;
}

body.mf-brand-v2.mf-home-v22 .mf-v22-group-label,
body.mf-brand-v2.mf-home-v22 .mf-v22-quick-routes,
body.mf-brand-v2.mf-home-v22 .mf-v22-find-panel {
  display: none !important;
}

body.mf-brand-v2.mf-home-v22 .mf-v22-league-doors {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  max-width: 38rem;
  margin-top: 1.3rem;
  border-top: 1px solid rgba(238, 242, 234, .24);
  border-bottom: 1px solid rgba(238, 242, 234, .24);
}

body.mf-brand-v2.mf-home-v22 .mf-v22-league-doors a {
  min-height: 4.35rem;
  padding: .7rem .8rem;
  border: 0 !important;
  border-right: 1px solid rgba(238, 242, 234, .2) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body.mf-brand-v2.mf-home-v22 .mf-v22-league-doors a:last-child {
  border-right: 0 !important;
}

body.mf-brand-v2.mf-home-v22 .mf-v22-league-doors a:hover,
body.mf-brand-v2.mf-home-v22 .mf-v22-league-doors a:focus-visible {
  background: rgba(61, 116, 65, .25) !important;
  transform: translateY(-2px);
}

body.mf-brand-v2.mf-home-v22 .mf-v22-league-doors span {
  color: var(--mf-yellow) !important;
  font: 800 .64rem/1 var(--font-ui);
  letter-spacing: .1em;
}

body.mf-brand-v2.mf-home-v22 .mf-v22-league-doors strong {
  margin-top: .36rem;
  color: #f3f5ef;
  font: 700 .83rem/1.05 var(--font-heading);
}

body.mf-brand-v2.mf-home-v22 .mf-v22-league-doors small {
  display: none;
}

body.mf-brand-v2.mf-home-v22 .mf-v22-hero--clean .mf-v22-hero__copy > * {
  animation: mf-home-masthead-enter .7s cubic-bezier(.16, 1, .3, 1) both;
}

body.mf-brand-v2.mf-home-v22 .mf-v22-hero--clean .mf-v22-hero__copy > :nth-child(2) { animation-delay: .07s; }
body.mf-brand-v2.mf-home-v22 .mf-v22-hero--clean .mf-v22-hero__copy > :nth-child(3) { animation-delay: .13s; }
body.mf-brand-v2.mf-home-v22 .mf-v22-hero--clean .mf-v22-hero__copy > :nth-child(4) { animation-delay: .19s; }
body.mf-brand-v2.mf-home-v22 .mf-v22-hero--clean .mf-v22-hero__copy > :nth-child(5) { animation-delay: .25s; }

@keyframes mf-home-masthead-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 980px) {
  body.mf-brand-v2.mf-home-v22 .mf-v22-hero--clean {
    min-height: 0 !important;
  }

  body.mf-brand-v2.mf-home-v22 .mf-v22-hero--clean .mf-v22-hero__grid {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    padding-block: 3.5rem 4rem !important;
  }

  body.mf-brand-v2.mf-home-v22 .mf-v22-hero--clean .mf-v22-hero__grid::before {
    right: -12vw;
    width: min(58vw, 32rem);
    opacity: .56;
  }
}

@media (max-width: 680px) {
  body.mf-brand-v2.mf-home-v22 .mf-v22-hero--clean .mf-v22-hero__grid {
    width: min(calc(100% - 2rem), 34rem) !important;
    padding-block: 2.5rem 2.75rem !important;
  }

  body.mf-brand-v2.mf-home-v22 .mf-v22-hero--clean .mf-v22-hero__grid::before {
    display: none;
  }

  body.mf-brand-v2.mf-home-v22 #home-hero-title {
    max-width: 9.8ch !important;
    font-size: clamp(2.9rem, 15vw, 4.6rem) !important;
  }

  body.mf-brand-v2.mf-home-v22 .mf-v22-league-doors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 100%;
  }

  body.mf-brand-v2.mf-home-v22 .mf-v22-league-doors a:nth-child(2) {
    border-right: 0 !important;
  }

  body.mf-brand-v2.mf-home-v22 .mf-v22-league-doors a:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(238, 242, 234, .2) !important;
  }
}

/* Runtime homepage polish adds its own compact rules. These selectors retain
   the masthead hierarchy after those enhancements have arranged the links. */
html body.mf-brand-v2.mf-home-v22 main#main-content.mf-v22-home > .mf-v22-hero--clean.mf-v22-hero--single-focus {
  min-height: clamp(35rem, 51vw, 45rem) !important;
  padding: 0 !important;
}

html body.mf-brand-v2.mf-home-v22 main#main-content.mf-v22-home > .mf-v22-hero--clean.mf-v22-hero--single-focus .mf-v22-hero__grid {
  width: min(calc(100% - 2rem), 1200px) !important;
  max-width: 1200px !important;
  grid-template-columns: minmax(0, 43rem) minmax(20rem, 1fr) !important;
  min-height: clamp(35rem, 51vw, 45rem) !important;
  padding-block: clamp(3.4rem, 6vw, 5.8rem) clamp(6.25rem, 9vw, 8.75rem) !important;
}

html body.mf-brand-v2.mf-home-v22 main#main-content.mf-v22-home > .mf-v22-hero--clean.mf-v22-hero--single-focus .mf-v22-hero__copy {
  width: 100% !important;
  max-width: 43rem !important;
  padding: 0 !important;
}

html body.mf-brand-v2.mf-home-v22 main#main-content.mf-v22-home > .mf-v22-hero--clean.mf-v22-hero--single-focus h1 {
  max-width: 10.5ch !important;
  font-size: clamp(3rem, 6.2vw, 6.5rem) !important;
  line-height: .82 !important;
  letter-spacing: .01em !important;
}

html body.mf-brand-v2.mf-home-v22 main#main-content.mf-v22-home > .mf-v22-hero--clean.mf-v22-hero--single-focus .mf-v22-hero__lede {
  max-width: 35rem !important;
  font-size: clamp(1rem, 1.45vw, 1.17rem) !important;
  font-weight: 500 !important;
  line-height: 1.48 !important;
}

html body.mf-brand-v2.mf-home-v22 main#main-content.mf-v22-home > .mf-v22-hero--clean.mf-v22-hero--single-focus .mf-v22-now-line.mf-v22-now-line--with-media {
  display: grid !important;
  grid-template-columns: minmax(9rem, .72fr) minmax(0, 1.28fr) !important;
  min-height: 8.5rem !important;
  max-height: none !important;
  margin-top: .8rem !important;
  padding: 0 !important;
  border: 1px solid rgba(245, 196, 48, .44) !important;
  border-left: 2px solid var(--mf-yellow) !important;
  background: rgba(7, 26, 16, .9) !important;
}

html body.mf-brand-v2.mf-home-v22 main#main-content.mf-v22-home > .mf-v22-hero--clean.mf-v22-hero--single-focus .mf-v22-now-line--with-media .mf-v22-now-line__content {
  padding: .9rem 1rem !important;
  background: transparent !important;
}

html body.mf-brand-v2.mf-home-v22 main#main-content.mf-v22-home > .mf-v22-hero--clean.mf-v22-hero--single-focus .mf-v22-now-line--with-media .mf-v22-now-line__title {
  color: #f5f6f1 !important;
  font: 800 clamp(.92rem, 1.2vw, 1.08rem)/1.08 var(--font-heading) !important;
}

html body.mf-brand-v2.mf-home-v22 main#main-content.mf-v22-home > .mf-v22-hero--clean.mf-v22-hero--single-focus .mf-v22-actions {
  display: flex !important;
  grid-template-columns: none !important;
  margin-top: .95rem !important;
}

html body.mf-brand-v2.mf-home-v22 main#main-content.mf-v22-home > .mf-v22-hero--clean.mf-v22-hero--single-focus .mf-v22-actions .mf-v22-button {
  width: auto !important;
  min-height: 2.9rem !important;
  padding: .72rem 1rem !important;
}

html body.mf-brand-v2.mf-home-v22 main#main-content.mf-v22-home > .mf-v22-hero--clean.mf-v22-hero--single-focus .mf-v22-hero-explore {
  display: block !important;
  margin-top: 1.35rem !important;
  padding-top: 0 !important;
  border: 0 !important;
}

html body.mf-brand-v2.mf-home-v22 main#main-content.mf-v22-home > .mf-v22-hero--clean.mf-v22-hero--single-focus .mf-v22-hero-explore > summary {
  display: none !important;
}

html body.mf-brand-v2.mf-home-v22 main#main-content.mf-v22-home > .mf-v22-hero--clean.mf-v22-hero--single-focus .mf-v22-hero-explore > .mf-v22-hero-explore__content {
  display: block !important;
  padding: 0 !important;
}

html body.mf-brand-v2.mf-home-v22 main#main-content.mf-v22-home > .mf-v22-hero--clean.mf-v22-hero--single-focus .mf-v22-hero-explore .mf-v22-quick-routes,
html body.mf-brand-v2.mf-home-v22 main#main-content.mf-v22-home > .mf-v22-hero--clean.mf-v22-hero--single-focus .mf-v22-hero-explore .mf-v22-find-panel {
  display: none !important;
}

html body.mf-brand-v2.mf-home-v22 main#main-content.mf-v22-home > .mf-v22-hero--clean.mf-v22-hero--single-focus .mf-v22-hero-explore .mf-v22-league-doors {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  max-width: 38rem !important;
  margin: 0 !important;
}

@media (max-width: 980px) {
  html body.mf-brand-v2.mf-home-v22 main#main-content.mf-v22-home > .mf-v22-hero--clean.mf-v22-hero--single-focus,
  html body.mf-brand-v2.mf-home-v22 main#main-content.mf-v22-home > .mf-v22-hero--clean.mf-v22-hero--single-focus .mf-v22-hero__grid {
    min-height: 0 !important;
  }

  html body.mf-brand-v2.mf-home-v22 main#main-content.mf-v22-home > .mf-v22-hero--clean.mf-v22-hero--single-focus .mf-v22-hero__grid {
    grid-template-columns: minmax(0, 1fr) !important;
    padding-block: 3.5rem 4rem !important;
  }
}

@media (max-width: 680px) {
  html body.mf-brand-v2.mf-home-v22 main#main-content.mf-v22-home > .mf-v22-hero--clean.mf-v22-hero--single-focus .mf-v22-hero__grid {
    width: min(calc(100% - 2rem), 34rem) !important;
    padding-block: 2.5rem 2.75rem !important;
  }

  html body.mf-brand-v2.mf-home-v22 main#main-content.mf-v22-home > .mf-v22-hero--clean.mf-v22-hero--single-focus h1 {
    font-size: clamp(2.9rem, 15vw, 4.6rem) !important;
  }

  html body.mf-brand-v2.mf-home-v22 main#main-content.mf-v22-home > .mf-v22-hero--clean.mf-v22-hero--single-focus .mf-v22-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.mf-brand-v2.mf-home-v22 main#main-content.mf-v22-home > .mf-v22-hero--clean.mf-v22-hero--single-focus .mf-v22-now-line.mf-v22-now-line--with-media {
    grid-template-columns: 1fr !important;
  }

  html body.mf-brand-v2.mf-home-v22 main#main-content.mf-v22-home > .mf-v22-hero--clean.mf-v22-hero--single-focus .mf-v22-now-line__media {
    height: 8rem;
  }

  html body.mf-brand-v2.mf-home-v22 main#main-content.mf-v22-home > .mf-v22-hero--clean.mf-v22-hero--single-focus .mf-v22-hero-explore .mf-v22-league-doors {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 100% !important;
  }
}

body.mf-brand-v2.mf-home-v22 .mf-home-wafcon-next {
  border-block-color: rgba(244, 196, 48, .38) !important;
  background:
    linear-gradient(90deg, rgba(229, 57, 53, .1), transparent 26%),
    linear-gradient(110deg, #0a0d0b, #113a27 72%, #0a0d0b) !important;
}

body.mf-brand-v2.mf-home-v22 .mf-home-wafcon-next__card {
  border-color: rgba(244, 196, 48, .52) !important;
  background: linear-gradient(90deg, rgba(22, 92, 47, .92), rgba(10, 16, 12, .96)) !important;
  box-shadow: inset 0 1px 0 rgba(247, 247, 244, .08) !important;
}

body.mf-brand-v2.mf-home-v22 .mf-home-wafcon-next__mark {
  border-color: rgba(244, 196, 48, .54) !important;
  background: linear-gradient(135deg, #1b6334, #0b130e 66%) !important;
}

body.mf-brand-v2.mf-home-v22 .mf-home-wafcon-next__action {
  border-color: rgba(244, 196, 48, .74) !important;
  color: #10120e !important;
  background: var(--mf-yellow) !important;
}

/*
 * Sitewide stadium editorial system.
 * This is deliberately a shared final layer: public routes that already load
 * Brand V2 inherit the refreshed visual language without changing content,
 * data modules, forms, or navigation contracts.
 */
:root {
  --mf-black: #080b09;
  --mf-onyx: #0c100d;
  --mf-charcoal: #121813;
  --mf-surface: #171d17;
  --mf-surface-raised: #202820;
  --mf-border: #354136;
  --mf-green-dark: #1e5f31;
  --mf-green: #398544;
  --mf-green-bright: #67ae52;
  --mf-yellow: #e4b632;
  --mf-red: #c94139;
  --mf-white: #f3f4ee;
  --mf-gray-100: #e2e6dd;
  --mf-gray-300: #b9c1b6;
  --mf-gray-500: #89928a;
}

body.mf-brand-v2,
html[data-theme="dark"] body {
  background: #080b09;
  color: var(--mf-white);
}

body.mf-brand-v2::before {
  background:
    linear-gradient(135deg, transparent 0 14%, rgba(103, 174, 82, .045) 14.05% 14.12%, transparent 14.18% 100%),
    linear-gradient(135deg, transparent 0 15.25%, rgba(228, 182, 50, .045) 15.3% 15.37%, transparent 15.43% 100%),
    linear-gradient(135deg, transparent 0 16.5%, rgba(201, 65, 57, .04) 16.55% 16.62%, transparent 16.68% 100%),
    linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, .014) 1px, transparent 1px);
  background-size: auto, auto, auto, 32px 32px, 32px 32px;
  opacity: .58;
}

body.mf-brand-v2 main {
  position: relative;
  isolation: isolate;
}

body.mf-brand-v2 main > :where(section, header)[class*="hero"] {
  position: relative;
  overflow: hidden;
  border-block: 1px solid rgba(226, 230, 221, .14);
  background:
    linear-gradient(104deg, rgba(8, 11, 9, .98) 0%, rgba(12, 20, 14, .96) 56%, rgba(8, 11, 9, .98) 100%) !important;
}

body.mf-brand-v2 main > :where(section, header)[class*="hero"]::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(135deg, transparent 0 71%, rgba(103, 174, 82, .18) 71.1% 71.28%, transparent 71.4% 100%),
    linear-gradient(135deg, transparent 0 74%, rgba(228, 182, 50, .16) 74.1% 74.28%, transparent 74.4% 100%),
    linear-gradient(135deg, transparent 0 77%, rgba(201, 65, 57, .15) 77.1% 77.28%, transparent 77.4% 100%);
  content: "";
}

body.mf-brand-v2 main :is(.mf-diaspora-hero, .mf-polish-hero, .mf-editorial-hero, .mf-afcon-hero, .mf-worldcup-hero, .mf-youth-hero, .mf-ac-hero, .mf-route-hero, .mf-page-hero) :where(h1, h2) {
  max-width: 15ch;
  color: var(--mf-white);
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.3vw, 4.85rem);
  line-height: .92;
}

body.mf-brand-v2 main :is(.mf-diaspora-hero, .mf-polish-hero, .mf-editorial-hero, .mf-afcon-hero, .mf-worldcup-hero, .mf-youth-hero, .mf-ac-hero, .mf-route-hero, .mf-page-hero) :where(h1, h2)::after {
  display: block;
  width: 8.25rem;
  height: 2px;
  margin-top: .7rem;
  background: linear-gradient(90deg, var(--mf-green) 0 58%, var(--mf-yellow) 58% 82%, var(--mf-red) 82% 100%);
  content: "";
}

body.mf-brand-v2 main :where(.stl-section, .mf-section, .mf-ac-section, .mf-route-tier, .mf-route-note, .mf-tracker-links-section, .mf-newsroom-front) {
  border-color: rgba(226, 230, 221, .13);
}

body.mf-brand-v2 main :where(.stl-section--alt, .mf-ac-section--surface, .mf-route-tier, .mf-tracker-links-section) {
  background-color: rgba(16, 24, 18, .9) !important;
}

body.mf-brand-v2 main :where(article, .mf-card, .mf-card-featured, .mf-card-media, .mf-card-player, .mf-info-card, .mf-ac-callout, .mf-route-proof, .mf-route-node, .mf-tracker-link-card, .mf-tracker-route-card, .mf-tracker-lane-panel) {
  border-color: rgba(226, 230, 221, .17) !important;
  border-radius: 4px !important;
  background-color: rgba(17, 24, 18, .94) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

body.mf-brand-v2 main :where(article, .mf-card, .mf-card-featured, .mf-card-media, .mf-card-player, .mf-info-card, .mf-route-node, .mf-tracker-link-card, .mf-tracker-route-card):hover {
  border-color: rgba(103, 174, 82, .58) !important;
}

body.mf-brand-v2 :where(.stl-btn--primary, .site-button--primary, .mf-v22-button--primary, .site-header__cta--media, .mf-ac-button--primary) {
  border-radius: 3px !important;
  border-color: rgba(228, 182, 50, .72) !important;
  background: #2f783d !important;
  box-shadow: none !important;
}

body.mf-brand-v2 :where(.stl-btn--primary, .site-button--primary, .mf-v22-button--primary, .site-header__cta--media, .mf-ac-button--primary).mf-conversion-primary {
  background: #d9ff36 !important;
  color: #07140c !important;
}

body.mf-brand-v2 :where(.stl-btn--ghost, .mf-v22-button--secondary, .site-button--secondary, .mf-ac-button:not(.mf-ac-button--primary)) {
  border-radius: 3px !important;
  border-color: rgba(228, 182, 50, .5) !important;
  background: rgba(8, 11, 9, .5) !important;
}

body.mf-brand-v2 :where(.stl-btn--primary, .site-button--primary, .mf-v22-button--primary, .site-header__cta--media, .mf-ac-button--primary):hover {
  background: #3a8646 !important;
  box-shadow: none !important;
}

body.mf-brand-v2 main :where(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
  border: 1px solid rgba(226, 230, 221, .24) !important;
  border-radius: 3px !important;
  background: #0d130f !important;
  color: var(--mf-white) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

body.mf-brand-v2 main :where(input, textarea, select)::placeholder {
  color: rgba(185, 193, 182, .68) !important;
}

body.mf-brand-v2 main :where(input, textarea, select):focus {
  border-color: var(--mf-yellow) !important;
  outline: 2px solid rgba(228, 182, 50, .24) !important;
  outline-offset: 1px;
}

body.mf-brand-v2 :where(.site-header, .site-footer) {
  position: relative;
  background: #0c100d !important;
}

body.mf-brand-v2 :where(.site-header, .site-footer)::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--mf-green) 0 58%, var(--mf-yellow) 58% 81%, var(--mf-red) 81% 100%);
  content: "";
}

body.mf-brand-v2 .site-header__search,
body.mf-brand-v2 .site-header__cta,
body.mf-brand-v2 .site-theme-toggle,
body.mf-brand-v2 .site-nav__menu-button {
  border-radius: 3px !important;
}

body.mf-brand-v2 .site-footer {
  background: #0c100d !important;
}

body.mf-brand-v2 .site-footer::after {
  top: -1px;
  bottom: auto;
}

/* The founder portrait is a contained accent, not a page-sized background. */
html body.mf-brand-v2.mf-home-v22 main#main-content.mf-v22-home > .mf-v22-hero--clean.mf-v22-hero--single-focus,
html body.mf-brand-v2.mf-home-v22 main#main-content.mf-v22-home > .mf-v22-hero--clean.mf-v22-hero--single-focus .mf-v22-hero__grid {
  min-height: clamp(29rem, 38vw, 35rem) !important;
}

html body.mf-brand-v2.mf-home-v22 main#main-content.mf-v22-home > .mf-v22-hero--clean.mf-v22-hero--single-focus .mf-v22-hero__grid {
  padding-block: clamp(2.4rem, 4vw, 3.6rem) clamp(3.5rem, 5vw, 4.8rem) !important;
}

html body.mf-brand-v2.mf-home-v22 main#main-content.mf-v22-home > .mf-v22-hero--clean.mf-v22-hero--single-focus .mf-v22-hero__grid::before {
  right: 1vw;
  width: min(31vw, 27rem);
  background:
    linear-gradient(90deg, rgba(7, 9, 8, .97), transparent 30%),
    linear-gradient(0deg, rgba(7, 9, 8, .86), transparent 40%),
    url("../img/homepage/mofutbol-founder-portrait.png") right bottom / contain no-repeat;
  filter: saturate(.86) contrast(1.02);
}

html body.mf-brand-v2.mf-home-v22 main#main-content.mf-v22-home > .mf-v22-hero--clean.mf-v22-hero--single-focus h1 {
  font-size: clamp(2.65rem, 4.55vw, 5rem) !important;
}

html body.mf-brand-v2.mf-home-v22 main#main-content.mf-v22-home > .mf-v22-hero--clean.mf-v22-hero--single-focus .mf-v22-now-line.mf-v22-now-line--with-media {
  min-height: 6.75rem !important;
}

@media (max-width: 980px) {
  html body.mf-brand-v2.mf-home-v22 main#main-content.mf-v22-home > .mf-v22-hero--clean.mf-v22-hero--single-focus .mf-v22-hero__grid {
    padding-block: 3rem 3.4rem !important;
  }
}

@media (max-width: 680px) {
  body.mf-brand-v2 main > :where(section, header)[class*="hero"]::before {
    opacity: .55;
  }

  body.mf-brand-v2 main :is(.mf-diaspora-hero, .mf-polish-hero, .mf-editorial-hero, .mf-afcon-hero, .mf-worldcup-hero, .mf-youth-hero, .mf-ac-hero, .mf-route-hero, .mf-page-hero) :where(h1, h2) {
    font-size: clamp(2rem, 11vw, 3.25rem);
  }
}

/* Shared article masthead: compact, wide, and readable at desktop scale. */
@media (min-width: 48rem) {
  body.mf-article-page #article-hero {
    min-height: 0 !important;
    padding-block: 0.7rem !important;
  }

  body.mf-article-page #article-hero .mf-article-hero__shell {
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    grid-template-areas:
      "breadcrumb meta actions"
      "breadcrumb copy actions";
    align-items: start;
    column-gap: clamp(0.8rem, 1.6vw, 1.5rem) !important;
    row-gap: 0.35rem !important;
    width: min(calc(100% - 3rem), 84rem) !important;
    max-width: 84rem !important;
    margin-inline: auto !important;
    padding: clamp(0.75rem, 1.15vw, 1rem) clamp(0.9rem, 1.6vw, 1.35rem) !important;
    border-radius: 8px !important;
  }

  body.mf-article-page #article-hero .mf-article-breadcrumb {
    grid-area: breadcrumb;
    align-self: center;
  }

  body.mf-article-page #article-hero .mf-article-hero__meta {
    grid-area: meta;
    align-self: end;
  }

  body.mf-article-page #article-hero .mf-article-hero__copy {
    grid-area: copy;
    max-width: none;
    gap: 0.36rem;
  }

  body.mf-article-page #article-hero .mf-article-hero__copy h1 {
    max-width: none !important;
    font-size: clamp(1.75rem, 2.65vw, 2.8rem) !important;
    line-height: 0.98 !important;
  }

  body.mf-article-page #article-hero .mf-article-hero__copy p {
    max-width: 74ch;
    font-size: 0.92rem;
    line-height: 1.4;
  }

  body.mf-article-page #article-hero .mf-article-hero__actions {
    grid-area: actions;
    align-self: center;
    justify-content: flex-end;
    max-width: 19rem;
  }
}

@media (max-width: 47.99rem) {
  body.mf-article-page #article-hero {
    padding-block: 0.6rem 0.75rem !important;
  }

  body.mf-article-page #article-hero .mf-article-hero__shell {
    width: min(calc(100% - 1rem), 38rem) !important;
    padding: 0.75rem !important;
    border-radius: 8px !important;
  }

  body.mf-article-page #article-hero .mf-article-hero__copy h1 {
    max-width: 17ch !important;
    font-size: clamp(1.55rem, 7.1vw, 2.05rem) !important;
    line-height: 0.99 !important;
  }
}

@media (min-width: 75rem) {
  body.mf-article-page #article-detail > .stl-container {
    width: min(calc(100% - 4rem), 110rem) !important;
    max-width: 110rem !important;
  }

  body.mf-article-page .mf-article-detail-grid {
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 22rem) !important;
    gap: clamp(1.25rem, 2vw, 2rem) !important;
  }

  body.mf-article-page .mf-article-copy,
  body.mf-article-page .mf-article-photo-gallery {
    width: min(100%, 78ch);
    max-width: 78ch;
  }
}

/* Brand typography: Bebas Neue for editorial display, Montserrat everywhere else. */
html body.mf-brand-v2,
html[data-theme] body {
  font-family: var(--font-body) !important;
}

html body.mf-brand-v2 :where(
  .site-header,
  .site-header *,
  .site-nav,
  .site-nav *,
  .site-drawer,
  .site-drawer *,
  .site-footer,
  .site-footer *,
  .mf-score-ribbon,
  .mf-score-ribbon *,
  nav,
  nav *,
  button,
  [role="button"],
  input,
  select,
  textarea,
  label,
  option,
  .stl-eyebrow,
  .eyebrow,
  .section-label,
  .mf-v22-kicker,
  .mf-v22-group-label,
  .mf-v22-hero-kicker,
  [class*="badge"],
  [class*="chip"],
  [class*="pill"],
  [class*="kicker"],
  [class*="eyebrow"],
  [class*="tag"],
  [class*="label"]
) {
  font-family: var(--font-ui) !important;
}

html body.mf-brand-v2 :where(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .mf-section-heading,
  .stl-heading,
  .stl-subheading,
  .section-title,
  .story-card-title,
  .article-card-title,
  [class$="__title"],
  [class*="hero-title"],
  [class*="card-title"],
  [class*="section-title"],
  [class*="headline"],
  [class*="heading"],
  [class*="card"] > strong,
  [class*="card"] h3,
  [class*="card"] h4
) {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
}

html body.mf-brand-v2 :where(
  p,
  li,
  dd,
  dt,
  blockquote,
  figcaption,
  .stl-muted,
  .mf-lede,
  [class*="description"],
  [class*="summary"],
  [class*="excerpt"],
  [class*="__copy"]
) {
  font-family: var(--font-body) !important;
}

html body.mf-brand-v2 :where(
  [class*="stat"] strong,
  [class*="stat"] b,
  [class*="metric"] strong,
  [class*="metric"] b,
  [class*="count"] strong,
  [class*="number"],
  [data-stat-value]
) {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
}

html body.mf-brand-v2 :where(
  [class*="stat"] small,
  [class*="stat"] span,
  [class*="metric"] small,
  [class*="metric"] span,
  [class*="count"] small
) {
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
}