/* MUSICFM_ALMONI_STABLE_V4: canonical typography lock, no fallback to IBM Plex. */
/*
 * MUSIC FM — ONE FONT LOCK
 * Primary UI/content typeface: MF Almoni Neue (self-hosted)..
 * Loaded LAST, from same origin, to remain stable under Guardian Aegis CSP.
 */
:root,
html,
body{
  --mf-font:"MF Almoni Neue",Arial,sans-serif;
  --mf-font-primary:"MF Almoni Neue",Arial,sans-serif;
}

/*
 * One font across the whole product. Repeated :root selectors deliberately
 * raise specificity above legacy page rules that still carry !important.
 * The readable-font accessibility mode stays authoritative when enabled.
 */
html:root:root:root:not([data-mf-a11y-readable-font="on"]) body,
html:root:root:root:not([data-mf-a11y-readable-font="on"]) body *:not(svg):not(path):not(use):not(code):not(kbd):not(pre):not(samp):not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands):not([class^="fa-"]):not([class*=" fa-"]){
  font-family:var(--mf-font-primary)!important;
}

html:root:root:root:not([data-mf-a11y-readable-font="on"]) body :is(button,input,textarea,select,optgroup,option,label,summary){
  font-family:var(--mf-font-primary)!important;
}

/* Branding is intentionally the one visual exception to the site-wide UI font.
 * MUSIC FM keeps its classic editorial wordmark while all actual UI/content
 * continues to use Almoni Neue. */
html:root:root:root:not([data-mf-a11y-readable-font="on"]) body .mf-classic-word,
html:root:root:root:not([data-mf-a11y-readable-font="on"]) body .mf-classic-word *,
html:root:root:root:not([data-mf-a11y-readable-font="on"]) body .mf-entry-intro__wordmark,
html:root:root:root:not([data-mf-a11y-readable-font="on"]) body .mf-entry-intro__wordmark *,
html:root:root:root:not([data-mf-a11y-readable-font="on"]) body .mf-page-transition__word,
html:root:root:root:not([data-mf-a11y-readable-font="on"]) body .mf-page-transition__word *{
  font-family:"Cormorant Garamond",Georgia,serif!important;
}

/* Restore the original living MUSIC FM mark. These declarations are repeated
 * here because this stylesheet loads last and must therefore preserve both
 * the classic ring rotation and the calm equalizer movement. */
html:not([data-mf-a11y-readable-font="on"]) .mf-classic-ring{
  animation:mfClassicRing 18s linear infinite!important;
}
html:not([data-mf-a11y-readable-font="on"]) .mf-classic-bar{
  animation:mfClassicBar 6.2s cubic-bezier(.45,0,.2,1) infinite!important;
}
html:not([data-mf-a11y-readable-font="on"]) .mf-classic-bar--1{animation-delay:-1.2s!important}
html:not([data-mf-a11y-readable-font="on"]) .mf-classic-bar--2{animation-delay:-3.75s!important}
html:not([data-mf-a11y-readable-font="on"]) .mf-classic-bar--3{animation-delay:-2.45s!important}

@keyframes mfClassicRing{
  0%{stroke-dashoffset:0}
  100%{stroke-dashoffset:-123}
}
@keyframes mfClassicBar{
  0%,100%{transform:scaleY(.92);opacity:.9}
  48%{transform:scaleY(1.055);opacity:1}
  72%{transform:scaleY(.97);opacity:.95}
}

/* Match or exceed the high specificity of the branding animation rules.
 * Support both device settings and the site's own accessibility switch. */
@media (prefers-reduced-motion: reduce){
  html:root .mf-classic-ring,
  html:root .mf-classic-bar{animation:none!important}
}
html:root[data-mf-a11y-reduced-motion="on"] .mf-classic-ring,
html:root[data-mf-a11y-reduced-motion="on"] .mf-classic-bar{
  animation:none!important;
}

/* Explicit safety net for the About page shown in the regression screenshot. */
html:root:root:root:not([data-mf-a11y-readable-font="on"]) body.about-premium-page :is(
  .about-hero,
  .about-hero *,
  .about-jumpbar,
  .about-jumpbar *,
  .about-main,
  .about-main *
){
  font-family:var(--mf-font-primary)!important;
}

/* Technical text remains intentionally technical, not part of the UI font. */
code,kbd,pre,samp{
  font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
}

/* Use real display weights where editorial heading styles request them. */
html:root:root:root:root:not([data-mf-a11y-readable-font="on"]) body :is(h1,h2,h3,.mf-section-title,.section-title,.article-title,.adm-page-title) {
  font-family:"MF Almoni Tzar","MF Almoni Neue",Arial,sans-serif!important;
}
html:root:root:root:root:not([data-mf-a11y-readable-font="on"]) body :is(blockquote,.article-lead,.article-intro,.editorial-quote,.mf-pullquote) {
  font-family:"MF Almoni DL","MF Almoni Neue",Arial,sans-serif!important;
}
/* Preserve accessibility readable-font override, icons and code from the original lock. */