/* MIDDERMUSIC final v1 (lilac L1). Generated from final-v1-lilac/src/fl.py on 2026-10-30. Do not hand-edit; re-run src/make_tokens.py. */
/* Fonts: self-hosted OFL files (Arimo, Newsreader: latin/latin-ext subsets; IBM Plex Mono: unmodified upstream, RFN "Plex"). Arial/Helvetica are not licensed for this project. */
:root {
  --mm-paper: #F6F5F1; /* Page background */
  --mm-ink: #0B0B0C; /* Text, rules, buttons, links (ink + underline) */
  --mm-meta: #5A5A5E; /* Datelines, captions, mono labels */
  --mm-deck: #2A2A2D; /* Standfirst / deck */
  --mm-rule: #CFCDC6; /* Decorative hairlines (non-text, never the only boundary of a control) */
  --mm-lilac: #B9A6DB; /* Lilac L1: flat field only (label blocks, verdict, takeaways, topic chips, active nav, homepage Reviews band). Ink text only. */
  --mm-lilac-hover: #C4B4DF; /* Hover state of lilac fields */
  --mm-affiliate-tint: #E2DBEA; /* Affiliate disclosure strip */
  --mm-neutral: #ECEBE5; /* Ad slots, sponsored / paid-partnership surfaces */
  --mm-placeholder: #D6D5D0; /* Image placeholder */
  --mm-placeholder-2: #C2C1BC; /* Image placeholder line */
  --mm-footer-bg: #0B0B0D;
  --mm-footer-text: #F6F5F2;
  --mm-font-sans: "Arimo", "Liberation Sans", system-ui, sans-serif;
  --mm-font-serif: "Newsreader", Georgia, serif;
  --mm-font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --mm-size-h1: 30px; --mm-lh-h1: 34px;
  --mm-size-h2: 21px; --mm-lh-h2: 30px;
  --mm-size-deck: 18px; --mm-lh-deck: 25px;
  --mm-size-body: 18px; --mm-lh-body: 29px;
  --mm-size-caption: 13px;
  --mm-size-label: 12px; /* live minimum for mono labels */
  --mm-content: 660px; --mm-rail: 300px; --mm-meta-col: 160px;
  --mm-rule-masthead: 3px; --mm-focus: 2px solid var(--mm-ink);
}
@media (min-width: 768px) {
 :root { --mm-size-h1: 44px; --mm-lh-h1: 50px; --mm-size-h2: 24px; --mm-size-deck: 21px; --mm-lh-deck: 29px; --mm-size-body: 19px; --mm-lh-body: 31px; --mm-size-caption: 14px; }
}
/* Lilac is a field only: always ink text on it. */
.mm-label, .mm-field-lilac { background: var(--mm-lilac); color: var(--mm-ink); }
a { color: var(--mm-ink); text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: var(--mm-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
/* Do NOT style Mediavine containers (.mv-ad-box, [id^="mv-"], .adunitwrapper) and do not rename .entry-content / the "secondary" sidebar / "singlebottom". */