/* Canonical MoFutbol article presentation. Scoped to article routes only. */
body.mf-article-page {
 --mf-article-bg: #020705;
 --mf-article-panel: #07110d;
 --mf-article-panel-strong: #0b1711;
 --mf-article-line: rgba(247, 205, 46, 0.32);
 --mf-article-line-soft: rgba(221, 235, 226, 0.16);
 --mf-article-text: #f5f7f5;
 --mf-article-muted: #b6c4bc;
 --mf-article-gold: #f4cf35;
 --mf-article-green: #69d36f;
 background: var(--mf-article-bg);
 color: var(--mf-article-text);
 letter-spacing: 0;
}

body.mf-article-page *,
body.mf-article-page *::before,
body.mf-article-page *::after {
 box-sizing: border-box;
 letter-spacing: 0;
}

body.mf-article-page a {
 color: inherit;
 text-underline-offset: 0.2em;
}

body.mf-article-page a:focus-visible,
body.mf-article-page button:focus-visible {
 outline: 3px solid var(--mf-article-green);
 outline-offset: 3px;
}

body.mf-article-page .stl-container {
 width: min(100% - 40px, 1240px);
 margin-inline: auto;
}

body.mf-article-page #article-hero.stl-city-hero {
 min-height: 0;
 padding: 28px 0 32px;
 border-block: 1px solid var(--mf-article-line);
 background: var(--mf-article-panel);
 color: var(--mf-article-text);
}

body.mf-article-page .mf-story-masthead-shell,
body.mf-article-page .mf-story-masthead {
 min-width: 0;
}

body.mf-page-shell.mf-article-page #article-hero > .mf-story-masthead-shell > .mf-story-masthead {
 width: 100% !important;
 max-width: none !important;
 margin: 0 !important;
 padding: 0 !important;
}

body.mf-article-page .mf-article-breadcrumbs {
 margin: 0 0 18px;
 font-family: var(--mf-font-body, "Montserrat", Arial, sans-serif);
 font-size: 13px;
 line-height: 1.4;
 color: var(--mf-article-muted);
}

body.mf-article-page .mf-article-breadcrumbs ol {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 7px;
 margin: 0;
 padding: 0;
 list-style: none;
}

body.mf-article-page .mf-article-breadcrumbs li {
 display: inline-flex;
 align-items: center;
 gap: 7px;
}

body.mf-article-page .mf-article-breadcrumbs li + li::before {
 content: "/";
 color: var(--mf-article-gold);
}

body.mf-article-page .mf-article-breadcrumbs a:hover {
 color: var(--mf-article-gold);
}

body.mf-article-page .mf-story-masthead__grid {
 display: grid;
 grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
 align-items: center;
 gap: clamp(24px, 3vw, 42px);
}

body.mf-article-page .mf-story-masthead__copy {
 min-width: 0;
 max-width: 680px;
}

body.mf-article-page .mf-article-hero__eyebrow,
body.mf-article-page .mf-article-kicker {
 margin: 0;
 color: var(--mf-article-gold);
 font-family: var(--mf-font-body, "Montserrat", Arial, sans-serif);
 font-size: 12px;
 font-weight: 800;
 line-height: 1.35;
 text-transform: uppercase;
}

body.mf-page-shell.mf-article-page #article-hero .mf-story-masthead__copy h1 {
 max-width: 680px !important;
 margin: 10px 0 14px;
 color: var(--mf-article-text);
 font-family: "Archivo", var(--mf-font-body, "Montserrat"), Arial, sans-serif !important;
 font-size: clamp(36px, 4vw, 58px) !important;
 font-weight: 780 !important;
 line-height: 1.12 !important;
 text-wrap: balance;
 overflow-wrap: normal !important;
 word-break: normal !important;
}

body.mf-article-page .mf-article-hero__deck {
 max-width: 620px;
 margin: 0;
 color: #dce5df;
 font-family: var(--mf-font-body, "Montserrat", Arial, sans-serif);
 font-size: 18px;
 line-height: 1.55;
}

body.mf-article-page .mf-article-hero__byline {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 7px;
 margin-top: 18px;
 color: var(--mf-article-muted);
 font-family: var(--mf-font-body, "Montserrat", Arial, sans-serif);
 font-size: 13px;
 line-height: 1.45;
}

body.mf-article-page .mf-article-hero__byline a {
 color: var(--mf-article-text);
 font-weight: 750;
}

body.mf-article-page .mf-story-masthead__actions {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
 gap: 12px 18px;
 margin-top: 18px;
 min-height: 44px;
}

body.mf-article-page .mf-article-back-link {
 display: inline-flex;
 min-height: 44px;
 align-items: center;
}

body.mf-article-page .mf-story-masthead__share {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 8px;
}

body.mf-article-page .mf-article-share--inline {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 7px;
 position: relative;
}

body.mf-article-page .mf-article-share--inline .mf-article-share__button {
 display: inline-flex;
 min-width: 44px;
 min-height: 44px;
 align-items: center;
 justify-content: center;
 margin: 0;
 padding: 8px 12px;
 border: 1px solid var(--mf-article-line-soft);
 border-radius: 4px;
 background: #030806;
 color: var(--mf-article-text);
 font: 750 12px/1 var(--mf-font-body, "Montserrat", Arial, sans-serif);
 text-decoration: none;
 cursor: pointer;
}

body.mf-article-page .mf-article-share--inline .mf-article-share__button:hover {
 border-color: var(--mf-article-gold);
 color: var(--mf-article-gold);
}

body.mf-article-page .mf-article-share__status {
 min-width: 1px;
 color: var(--mf-article-green);
 font: 700 12px/1.3 var(--mf-font-body, "Montserrat", Arial, sans-serif);
}

body.mf-article-page .mf-story-masthead__visual {
 min-width: 0;
 margin: 0;
 border: 1px solid var(--mf-article-line);
 border-radius: 4px;
 overflow: hidden;
 background: #010403;
}

body.mf-article-page .mf-story-masthead__image {
 display: block;
 width: 100%;
 aspect-ratio: 16 / 9;
 height: auto;
 object-fit: cover;
 background: #010403;
}

body.mf-article-page .mf-story-masthead__visual figcaption {
 display: flex;
 flex-wrap: wrap;
 gap: 4px;
 margin: 0;
 padding: 9px 11px;
 border-top: 1px solid var(--mf-article-line-soft);
 color: var(--mf-article-muted);
 font: 500 11px/1.45 var(--mf-font-body, "Montserrat", Arial, sans-serif);
 overflow-wrap: anywhere;
}

body.mf-article-page .mf-story-masthead__visual figcaption a {
 color: var(--mf-article-text);
 font-weight: 700;
}

body.mf-article-page #main-content.stl-section {
 min-width: 0;
 padding: 38px 0 56px;
 background: var(--mf-article-bg);
}

body.mf-page-shell.mf-article-page #article-detail > .mf-article-detail-grid {
 display: grid;
 grid-template-columns: minmax(0, 700px) minmax(230px, 280px) !important;
 justify-content: center;
 align-items: start;
 gap: 40px !important;
 min-width: 0;
}

body.mf-article-page .mf-article-detail,
body.mf-article-page .mf-article-afterword {
 min-width: 0;
 width: 100%;
 max-width: 780px;
}

body.mf-page-shell.mf-article-page #article-detail .mf-article-detail--story {
 width: 100% !important;
 max-width: 780px !important;
 margin: 0 !important;
 padding: 0 !important;
 border: 0 !important;
 border-radius: 0 !important;
 background: transparent !important;
 box-shadow: none !important;
}

body.mf-article-page .mf-article-afterword {
 grid-column: 1;
 display: grid;
 gap: 28px;
}

body.mf-article-page .mf-article-copy {
 color: var(--mf-article-text);
 font-family: "Archivo", var(--mf-font-body, "Montserrat"), Arial, sans-serif;
 font-size: 18px;
 line-height: 1.75;
 overflow-wrap: break-word;
}

body.mf-page-shell.mf-article-page #main-content .mf-article-copy > p {
 font-size: 18px !important;
 line-height: 1.75 !important;
}

body.mf-article-page .mf-article-copy > :first-child {
 margin-top: 0;
}

body.mf-article-page .mf-article-copy p {
 margin: 0 0 1.45em;
}

body.mf-article-page .mf-article-copy h2,
body.mf-article-page .mf-article-copy h3 {
 color: var(--mf-article-text);
 font-family: "Archivo", var(--mf-font-body, "Montserrat"), Arial, sans-serif !important;
 font-weight: 760 !important;
 line-height: 1.22;
 text-wrap: balance;
 overflow-wrap: anywhere;
 scroll-margin-top: 110px;
}

body.mf-article-page .mf-article-copy h2 {
 margin: 1.75em 0 0.65em;
 font-size: 28px;
}

body.mf-article-page .mf-article-copy h3 {
 margin: 1.55em 0 0.6em;
 font-size: 22px;
}

body.mf-article-page .mf-article-copy ul,
body.mf-article-page .mf-article-copy ol {
 margin: 0 0 1.45em;
 padding-left: 1.3em;
}

body.mf-article-page .mf-article-copy li + li {
 margin-top: 0.45em;
}

body.mf-article-page .mf-article-copy a,
body.mf-article-page .mf-article-sources a,
body.mf-article-page .mf-article-correction a {
 color: var(--mf-article-green);
 font-weight: 700;
 overflow-wrap: anywhere;
}

body.mf-article-page .mf-article-copy blockquote {
 margin: 1.7em 0;
 padding: 2px 0 2px 22px;
 border-left: 4px solid var(--mf-article-gold);
 color: #e7eee9;
 font-size: 21px;
 line-height: 1.55;
}

body.mf-article-page .mf-article-copy blockquote p {
 margin: 0;
}

body.mf-article-page .mf-article-fact-panel {
 margin: 0 0 30px;
 padding: 18px;
 border: 1px solid var(--mf-article-line);
 border-radius: 4px;
 background: var(--mf-article-panel);
}

body.mf-article-page .mf-article-fact-panel h2,
body.mf-article-page .mf-article-author h2,
body.mf-article-page .mf-article-sources h2,
body.mf-article-page .mf-article-related h2,
body.mf-article-page .mf-article-follow h2 {
 margin: 5px 0 0;
 color: var(--mf-article-text);
 font-family: var(--mf-font-display, "Bebas Neue", Impact, sans-serif);
 font-size: 28px;
 font-weight: 400;
 line-height: 1.08;
}

body.mf-article-page .mf-article-fact-panel dl {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 1px;
 margin: 15px 0 0;
 background: var(--mf-article-line-soft);
}

body.mf-article-page .mf-article-fact-panel dl > div {
 min-width: 0;
 padding: 12px;
 background: var(--mf-article-panel-strong);
}

body.mf-article-page .mf-article-fact-panel dt,
body.mf-article-page .mf-article-sidebar dt {
 margin: 0 0 4px;
 color: var(--mf-article-muted);
 font: 700 11px/1.35 var(--mf-font-body, "Montserrat", Arial, sans-serif);
 text-transform: uppercase;
}

body.mf-article-page .mf-article-fact-panel dd,
body.mf-article-page .mf-article-sidebar dd {
 margin: 0;
 color: var(--mf-article-text);
 font: 700 14px/1.4 var(--mf-font-body, "Montserrat", Arial, sans-serif);
 overflow-wrap: anywhere;
}

body.mf-article-page .mf-article-sidebar {
 grid-column: 2;
 grid-row: 1 / span 2;
 display: grid;
 gap: 0;
 min-width: 0;
 border: 1px solid var(--mf-article-line-soft);
 border-radius: 4px;
 background: var(--mf-article-panel);
}

body.mf-article-page .mf-article-sidebar > * {
 min-width: 0;
 padding: 18px;
}

body.mf-article-page .mf-article-sidebar > * + * {
 border-top: 1px solid var(--mf-article-line-soft);
}

body.mf-article-page .mf-article-sidebar h2 {
 margin: 0 0 12px;
 color: var(--mf-article-gold);
 font: 800 13px/1.35 var(--mf-font-body, "Montserrat", Arial, sans-serif);
 text-transform: uppercase;
}

body.mf-article-page .mf-article-sidebar ol {
 display: grid;
 gap: 8px;
 margin: 0;
 padding: 0;
 list-style: none;
 counter-reset: article-outline;
}

body.mf-article-page .mf-article-sidebar ol li {
 counter-increment: article-outline;
}

body.mf-article-page .mf-article-sidebar ol a {
 display: grid;
 grid-template-columns: 24px minmax(0, 1fr);
 gap: 7px;
 color: var(--mf-article-text);
 font: 650 13px/1.4 var(--mf-font-body, "Montserrat", Arial, sans-serif);
 text-decoration: none;
}

body.mf-article-page .mf-article-sidebar ol a::before {
 content: counter(article-outline, decimal-leading-zero);
 color: var(--mf-article-green);
 font-size: 10px;
}

body.mf-article-page .mf-article-sidebar dl {
 display: grid;
 gap: 12px;
 margin: 0;
}

body.mf-article-page .mf-article-sidebar dl > div {
 min-width: 0;
}

body.mf-article-page .mf-article-author,
body.mf-article-page .mf-article-sources,
body.mf-article-page .mf-article-related,
body.mf-article-page .mf-article-follow {
 min-width: 0;
 padding: 22px 0;
 border-top: 1px solid var(--mf-article-line-soft);
}

body.mf-article-page .mf-article-author {
 display: grid;
 grid-template-columns: auto minmax(0, 1fr);
 align-items: center;
 gap: 16px;
}

body.mf-article-page .mf-article-author img {
 display: block;
 width: 72px;
 height: 72px;
 border: 1px solid var(--mf-article-line);
 border-radius: 50%;
 object-fit: cover;
}

body.mf-article-page .mf-article-author h2 a {
 text-decoration: none;
}

body.mf-article-page .mf-article-author h2 a:hover {
 color: var(--mf-article-gold);
}

body.mf-article-page .mf-article-author p:last-child,
body.mf-article-page .mf-article-follow p:last-child {
 margin: 8px 0 0;
 color: var(--mf-article-muted);
 font: 500 14px/1.55 var(--mf-font-body, "Montserrat", Arial, sans-serif);
}

body.mf-article-page .mf-article-author .mf-article-author__role {
 margin: 5px 0 0;
 color: var(--mf-article-gold);
 font: 750 12px/1.4 var(--mf-font-body, "Montserrat", Arial, sans-serif);
}

body.mf-article-page .mf-article-sources ul {
 display: grid;
 gap: 8px;
 margin: 14px 0 0;
 padding: 0;
 list-style: none;
}

body.mf-article-page .mf-article-sources li {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 gap: 6px 14px;
 padding: 9px 0;
 border-bottom: 1px solid var(--mf-article-line-soft);
 font: 600 14px/1.45 var(--mf-font-body, "Montserrat", Arial, sans-serif);
}

body.mf-article-page .mf-article-sources li span {
 color: var(--mf-article-muted);
 font-size: 12px;
}

body.mf-article-page .mf-article-correction {
 margin: 0;
 padding: 16px 0;
 border-top: 1px solid var(--mf-article-line-soft);
 color: var(--mf-article-muted);
 font: 500 13px/1.5 var(--mf-font-body, "Montserrat", Arial, sans-serif);
}

body.mf-article-page .mf-article-related > div {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 14px;
 margin-top: 14px;
}

body.mf-article-page .mf-article-related article {
 min-width: 0;
 border: 1px solid var(--mf-article-line-soft);
 border-radius: 4px;
 background: var(--mf-article-panel);
}

body.mf-article-page .mf-article-related article a {
 display: grid;
 gap: 7px;
 height: 100%;
 min-height: 126px;
 padding: 14px;
 text-decoration: none;
}

body.mf-article-page .mf-article-related article img {
 display: block;
 width: 100%;
 aspect-ratio: 16 / 9;
 border-bottom: 1px solid var(--mf-article-line-soft);
 object-fit: cover;
}

body.mf-article-page .mf-article-related article span {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 gap: 4px 8px;
 color: var(--mf-article-gold);
 font: 800 10px/1.35 var(--mf-font-body, "Montserrat", Arial, sans-serif);
 text-transform: uppercase;
}

body.mf-article-page .mf-article-related article time {
 color: var(--mf-article-muted);
}

body.mf-article-page .mf-article-related article strong {
 color: var(--mf-article-text);
 font: 750 16px/1.4 "Archivo", var(--mf-font-body, "Montserrat"), Arial, sans-serif;
 overflow-wrap: anywhere;
}

body.mf-article-page .mf-article-related article a:hover {
 border-color: var(--mf-article-gold);
 background: var(--mf-article-panel-strong);
}

body.mf-article-page .mf-article-follow {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 20px;
 padding-bottom: 0;
}

body.mf-article-page .mf-article-follow .stl-btn {
 flex: 0 0 auto;
 min-height: 44px;
 border-radius: 4px;
}

body.mf-article-page .mf-article-empty {
 max-width: 680px;
 padding: 44px 0;
}

body.mf-article-page .mf-article-empty h1 {
 margin: 0 0 10px;
 font-family: var(--mf-font-display, "Bebas Neue", Impact, sans-serif);
 font-size: 44px;
 font-weight: 400;
 line-height: 1;
}

body.mf-article-page .mf-article-empty p {
 margin: 0 0 20px;
 color: var(--mf-article-muted);
}

body.mf-article-page .mf-article-reading-progress {
 --mf-reading-progress: 0%;
 position: fixed;
 z-index: 1200;
 inset: 0 auto auto 0;
 width: var(--mf-reading-progress);
 height: 3px;
 background: var(--mf-article-gold);
 pointer-events: none;
}

body.mf-article-page .mc-disclosure {
 margin: 0 0 24px;
 padding: 12px 14px;
 border: 1px solid var(--mf-article-line);
 border-radius: 4px;
 background: var(--mf-article-panel);
}

@media (min-width: 1101px) {
 body.mf-article-page .mf-article-sidebar {
  position: sticky;
  top: 92px;
 }
}

@media (max-width: 1100px) {
 body.mf-page-shell.mf-article-page #article-hero .mf-story-masthead__copy h1 {
  font-size: 52px !important;
 }

 body.mf-article-page .mf-story-masthead__grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 26px;
 }

 body.mf-page-shell.mf-article-page #article-detail > .mf-article-detail-grid {
  grid-template-columns: minmax(0, 780px) !important;
  gap: 30px !important;
 }

 body.mf-article-page .mf-article-sidebar,
 body.mf-article-page .mf-article-afterword {
  grid-column: 1;
  grid-row: auto;
  width: 100%;
  max-width: 780px;
 }

 body.mf-article-page .mf-article-sidebar {
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }

 body.mf-article-page .mf-article-sidebar > * + * {
  border-top: 0;
  border-left: 1px solid var(--mf-article-line-soft);
 }
}

@media (max-width: 820px) {
 body.mf-article-page .stl-container {
  width: min(100% - 32px, 780px);
 }

 body.mf-article-page #article-hero.stl-city-hero {
  padding: 22px 0 26px;
 }

 body.mf-article-page .mf-story-masthead__grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
 }

 body.mf-article-page .mf-story-masthead__copy {
  max-width: 680px;
 }

 body.mf-page-shell.mf-article-page #article-hero .mf-story-masthead__copy h1 {
  font-size: 48px !important;
 }

 body.mf-article-page #main-content.stl-section {
  padding: 32px 0 48px;
 }

 body.mf-article-page .mf-article-copy {
  font-size: 18px;
  line-height: 1.68;
 }

 body.mf-page-shell.mf-article-page #main-content .mf-article-copy > p {
  font-size: 18px !important;
  line-height: 1.68 !important;
 }
}

@media (max-width: 560px) {
 body.mf-article-page .mf-story-masthead__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
 }

 body.mf-article-page .mf-story-masthead__share {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
 }

 body.mf-article-page .stl-container {
  width: min(100% - 28px, 780px);
 }

 body.mf-article-page .mf-article-breadcrumbs {
  margin-bottom: 14px;
  font-size: 12px;
 }

 body.mf-page-shell.mf-article-page #article-hero .mf-story-masthead__copy h1 {
  margin-top: 8px;
  font-size: clamp(32px, 9vw, 38px) !important;
  line-height: 1.04 !important;
 }

 body.mf-article-page .mf-article-hero__deck {
  font-size: 17px;
  line-height: 1.5;
 }

 body.mf-article-page .mf-article-hero__byline {
  margin-top: 14px;
  font-size: 12px;
 }

 body.mf-article-page .mf-article-share--inline {
  width: 100%;
 }

 body.mf-article-page .mf-article-share--inline .mf-article-share__button {
  flex: 1 1 calc(50% - 7px);
 }

 body.mf-article-page .mf-article-copy {
  font-size: 17px;
  line-height: 1.68;
 }

 body.mf-page-shell.mf-article-page #main-content .mf-article-copy > p {
  font-size: 17px !important;
  line-height: 1.68 !important;
 }

 body.mf-article-page .mf-article-copy h2 {
  font-size: 25px;
 }

 body.mf-article-page .mf-article-copy h3 {
  font-size: 21px;
 }

 body.mf-article-page .mf-article-copy blockquote {
  padding-left: 16px;
  font-size: 19px;
 }

 body.mf-article-page .mf-article-fact-panel dl,
 body.mf-article-page .mf-article-sidebar,
 body.mf-article-page .mf-article-related > div {
  grid-template-columns: minmax(0, 1fr);
 }

 body.mf-article-page .mf-article-sidebar > * + * {
  border-top: 1px solid var(--mf-article-line-soft);
  border-left: 0;
 }

 body.mf-article-page .mf-article-author {
  align-items: start;
 }

 body.mf-article-page .mf-article-follow {
  align-items: flex-start;
  flex-direction: column;
 }

 body.mf-article-page .mf-article-follow .stl-btn {
  width: 100%;
 }
}

@media (max-width: 370px) {
 body.mf-article-page .stl-container {
  width: min(100% - 24px, 780px);
 }

 body.mf-page-shell.mf-article-page #article-hero .mf-story-masthead__copy h1 {
  font-size: 32px !important;
 }
}

@media (prefers-reduced-motion: reduce) {
 body.mf-article-page *,
 body.mf-article-page *::before,
 body.mf-article-page *::after {
  scroll-behavior: auto;
  transition-duration: 0.01ms;
  animation-duration: 0.01ms;
  animation-iteration-count: 1;
 }
}

@media print {
 body.mf-article-page [data-site-header],
 body.mf-article-page [data-site-footer],
 body.mf-article-page .mf-article-share,
 body.mf-article-page .mf-article-sidebar,
 body.mf-article-page .mf-article-follow,
 body.mf-article-page .mf-article-reading-progress {
  display: none;
 }

 body.mf-article-page,
 body.mf-article-page #article-hero.stl-city-hero,
 body.mf-article-page #main-content.stl-section {
  background: #fff;
  color: #111;
 }

 body.mf-article-page .mf-story-masthead__grid,
 body.mf-article-page .mf-article-detail-grid {
  display: block;
 }

 body.mf-article-page .mf-story-masthead__copy h1,
 body.mf-article-page .mf-article-copy,
 body.mf-article-page .mf-article-copy h2,
 body.mf-article-page .mf-article-copy h3 {
  color: #111;
 }
}
