/*
Theme Name: Mustang Magazine
Theme URI: https://mustangmag.com
Author: Mustang Magazine
Description: An automotive editorial magazine theme for Mustang Magazine. Colors are managed per region through the surface-based Site Colors panel; all text, links, ads, menus and content are editable from WordPress admin.
Version: 4.4.1
Requires at least: 5.8
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mustang-magazine
Tags: light, magazine, automotive, custom-menu, featured-images, wide-blocks
*/

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Barlow:wght@400;500;600&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&display=swap');

/* ─── VARIABLES ─── */
:root {
  --red:      #C8102E;
  --red-d:    #a00d24;
  --red-lt:   #fdf2f4;    /* light red tint for hover states */

  /* Light palette */
  --white:    #ffffff;
  --bg:       #f8f8f6;    /* off-white page background */
  --bg2:      #f2f2ef;    /* slightly deeper for cards */
  --bg3:      #eaeae6;    /* deepest light bg, inputs */
  --border:   #e0e0da;    /* subtle borders */
  --border-d: #c8c8c0;    /* stronger border when needed */

  /* Text */
  --text:     #1a1a1a;    /* near-black body text — high contrast */
  --text-2:   #444444;    /* secondary text */
  --muted:    #777777;    /* captions, meta — passes WCAG AA */
  --heading:  #111111;    /* headings */

  /* Keep black for nav/footer accent */
  --black:    #111111;
  --nav-bg:   #ffffff;
  --nav-border: #e0e0da;

  --fh: 'Oswald', Impact, 'Arial Narrow', sans-serif;
  --fb: 'Barlow', Arial, sans-serif;
  --fs: 'Source Serif 4', Georgia, serif;
}

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--white);
  color: var(--text);
  font-family: var(--fb);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--text); text-decoration: none; transition: color .18s; }
a:hover { color: var(--red); }
img { display: block; max-width: 100%; height: auto; }
p { margin-bottom: 1rem; }
ul, ol { padding-left: 1.4rem; }
h1,h2,h3,h4,h5,h6 {
  font-family: var(--fh);
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--heading);
}

/* ─── CONTAINER ─── */
.mm-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ─── SKIP LINK ─── */
.skip-link {
  position: absolute; left: -9999px; top: auto;
  background: var(--red); color: #fff; padding: 8px 16px; z-index: 9999;
  font-family: var(--fh); font-size: 13px; text-transform: uppercase;
}
.skip-link:focus { left: 16px; top: 16px; }

/* ════════════════════════════════════════════
   TOP BAR
════════════════════════════════════════════ */
#mm-topbar {
  background: var(--black);
  border-bottom: 1px solid #222;
  padding: 6px 0;
  font-size: 12px;
  color: #aaa;
  letter-spacing: .04em;
  text-transform: uppercase;
}
#mm-topbar .mm-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mm-topbar-links { display: flex; gap: 18px; flex-wrap: wrap; }
.mm-topbar-links a { color: #aaa; transition: color .15s; }
.mm-topbar-links a:hover { color: #fff; }
.mm-topbar-social { display: flex; gap: 14px; align-items: center; }
.mm-topbar-social a {
  color: #aaa;
  font-size: 11px;
  letter-spacing: .06em;
  transition: color .15s;
}
.mm-topbar-social a:hover { color: var(--red); }

/* ════════════════════════════════════════════
   SITE HEADER
════════════════════════════════════════════ */
#mm-header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
  box-shadow: 0 1px 0 var(--border);
}
#mm-header .mm-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.mm-site-branding { line-height: 1; flex-shrink: 0; }
.mm-site-title {
  font-family: var(--fh);
  font-size: 42px;
  font-weight: 700;
  color: var(--heading);
  text-transform: uppercase;
  letter-spacing: -1px;
  line-height: 1;
}
.mm-site-title a { color: var(--heading); }
.mm-site-title a:hover { color: var(--red); }
.mm-site-title .accent { color: var(--red); }
.mm-site-tagline {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 5px;
  font-family: var(--fb);
}
.mm-custom-logo-link img { max-height: 120px; width: auto; }

/* Search form */
.mm-header-search {
  display: flex;
  flex: 0 0 260px;
}
.mm-header-search input[type="search"] {
  background: var(--bg3);
  border: 1px solid var(--border-d);
  border-right: none;
  color: var(--text);
  font-family: var(--fb);
  font-size: 13px;
  padding: 9px 14px;
  flex: 1;
  outline: none;
  border-radius: 3px 0 0 3px;
  -webkit-appearance: none;
}
.mm-header-search input::placeholder { color: var(--muted); }

/* ─── ACCESSIBILITY: Focus styles ─── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) { outline: none; }

.mm-header-search button {
  background: var(--red);
  border: none;
  color: #fff;
  padding: 9px 14px;
  cursor: pointer;
  border-radius: 0 3px 3px 0;
  font-size: 14px;
  transition: background .2s;
  line-height: 1;
}
.mm-header-search button:hover { background: var(--red-d); }

/* Subscribe CTA */
.mm-subscribe-btn {
  background: var(--red);
  color: #fff !important;
  font-family: var(--fh);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 10px 20px;
  border-radius: 3px;
  white-space: nowrap;
  transition: background .2s;
  flex-shrink: 0;
}
.mm-subscribe-btn:hover { background: var(--red-d); color: #fff !important; }

/* ════════════════════════════════════════════
   PRIMARY NAVIGATION
════════════════════════════════════════════ */
#mm-nav {
  background: var(--white);
  border-bottom: 2px solid var(--red);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: box-shadow .3s;
}
#mm-nav.scrolled { box-shadow: 0 2px 16px rgba(0,0,0,.10); }
#mm-nav .mm-container { display: flex; align-items: stretch; }

/* Menu */
#mm-primary-menu {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0; padding: 0;
  width: 100%;
}
#mm-primary-menu > li { position: relative; }
#mm-primary-menu > li > a {
  display: block;
  font-family: var(--fh);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-2);
  padding: 13px 15px;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
#mm-primary-menu > li > a:hover,
#mm-primary-menu > li.current-menu-item > a,
#mm-primary-menu > li.current-menu-ancestor > a {
  color: var(--red);
  border-bottom-color: var(--red);
}

/* Dropdown */
#mm-primary-menu .sub-menu {
  display: none;
  position: absolute;
  top: 100%; left: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 2px solid var(--red);
  min-width: 200px;
  list-style: none;
  z-index: 999;
  box-shadow: 0 6px 20px rgba(0,0,0,.10);
}
#mm-primary-menu > li:hover > .sub-menu,
#mm-primary-menu > li:focus-within > .sub-menu { display: block; }
#mm-primary-menu .sub-menu li a {
  display: block;
  padding: 10px 16px;
  font-family: var(--fh);
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-2);
  border-bottom: 1px solid var(--border);
  transition: color .15s, background .15s;
}
#mm-primary-menu .sub-menu li:last-child a { border-bottom: none; }
#mm-primary-menu .sub-menu li a:hover {
  color: var(--red);
  background: var(--red-lt);
  padding-left: 20px;
}
#mm-primary-menu > li.menu-item-has-children > a::after {
  content: ' ▾';
  font-size: 10px;
  opacity: .5;
  transition: opacity .15s;
}
#mm-primary-menu > li.menu-item-has-children:hover > a::after { opacity: 1; }
#mm-primary-menu .sub-menu li.current-menu-item > a,
#mm-primary-menu .sub-menu li.current-menu-ancestor > a {
  color: var(--red);
  background: var(--red-lt);
}

/* Mobile toggle */
.mm-menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border-d);
  color: var(--text);
  padding: 8px 12px;
  cursor: pointer;
  font-size: 18px;
  margin: 8px 0;
  border-radius: 3px;
  font-family: var(--fb);
}

/* ════════════════════════════════════════════
   HERO SECTION
════════════════════════════════════════════ */
.mm-hero {
  max-width: 1100px;
  margin: 24px auto 0;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
}
.mm-hero-main {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  display: block;
}
.mm-hero-main .mm-thumb {
  width: 100%;
  height: 460px;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.mm-hero-main:hover .mm-thumb { transform: scale(1.02); }
.mm-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.20) 55%, transparent 100%);
}
.mm-hero-content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 26px;
}
.mm-hero-content h1 {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
  margin-bottom: 9px;
}
.mm-hero-content h1 a { color: #fff; }
.mm-hero-content h1 a:hover { color: var(--red); }
.mm-hero-content .mm-excerpt {
  font-size: 13px;
  color: rgba(255,255,255,.82);
  line-height: 1.5;
  margin-bottom: 9px;
  max-width: 540px;
}
.mm-hero-content .mm-meta { font-size: 12px; color: rgba(255,255,255,.72); }

/* Hero sidebar */
.mm-hero-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mm-hero-side-card {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  display: block;
  flex: 1;
}
.mm-hero-side-card .mm-thumb {
  width: 100%;
  height: 140px;
  object-fit: cover;
  transition: transform .3s;
}
.mm-hero-side-card:hover .mm-thumb { transform: scale(1.05); }
.mm-hero-side-card .mm-overlay {
  background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.08) 65%, transparent 100%);
}
.mm-hero-side-card .mm-hero-content { padding: 12px 14px; }
.mm-hero-side-card h3 {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
}
.mm-hero-side-card h3 a { color: #fff; }
.mm-hero-side-card h3 a:hover { color: var(--red); }

/* ─── Category Tag ─── */
.mm-cat-tag {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-family: var(--fh);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
  margin-bottom: 8px;
  transition: background .2s;
}
.mm-cat-tag:hover { background: var(--red-d); color: #fff; }

/* ════════════════════════════════════════════
   BREAKING NEWS TICKER
════════════════════════════════════════════ */
.mm-ticker {
  background: var(--red);
  overflow: hidden;
  padding: 7px 0;
  margin-top: 20px;
}
.mm-ticker-track {
  display: flex;
  animation: mm-tick 40s linear infinite;
  white-space: nowrap;
  width: max-content;
}
.mm-ticker-track:hover { animation-play-state: paused; }
.mm-ticker-track span {
  font-size: 11px;
  color: #fff;
  padding: 0 30px;
  letter-spacing: .04em;
}
.mm-ticker-track span::after { content: ' //'; opacity: .5; margin-left: 6px; }
@keyframes mm-tick {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ════════════════════════════════════════════
   SECTION HEADERS
════════════════════════════════════════════ */
.mm-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  border-bottom: 2px solid var(--border);
  margin-bottom: 22px;
}
.mm-section-title {
  font-family: var(--fh);
  font-size: 19px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--heading);
  border-bottom: 3px solid var(--red);
  padding-bottom: 10px;
  margin-bottom: -2px;
}
.mm-section-more {
  font-family: var(--fh);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 10px;
  transition: color .15s;
}
.mm-section-more:hover { color: var(--red); }

/* ════════════════════════════════════════════
   CONTENT LAYOUT
════════════════════════════════════════════ */
.mm-content-wrap {
  max-width: 1100px;
  margin: 30px auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 36px;
}
.mm-content-wrap.mm-no-sidebar { grid-template-columns: 1fr; }

/* ════════════════════════════════════════════
   POST CARDS
════════════════════════════════════════════ */
.mm-post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 32px;
}
.mm-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.mm-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
}
.mm-card-thumb-wrap { overflow: hidden; display: block; }
.mm-card .mm-thumb {
  width: 100%;
  height: 185px;
  object-fit: cover;
  display: block;
  transition: transform .3s;
}
.mm-card:hover .mm-thumb { transform: scale(1.04); }
.mm-card-body { padding: 16px; }
.mm-card-title {
  font-family: var(--fh);
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--heading);
  line-height: 1.25;
  margin-bottom: 8px;
  display: block;
}
.mm-card-title:hover { color: var(--red); }
.mm-card-excerpt { font-size: 13px; color: var(--text-2); line-height: 1.5; margin-bottom: 9px; }
.mm-card-meta { font-size: 12px; color: var(--muted); }
.mm-card-meta a { color: var(--muted); }
.mm-card-meta a:hover { color: var(--red); }

/* Wide card */
.mm-card-wide {
  display: grid;
  grid-template-columns: 240px 1fr;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 16px;
  transition: box-shadow .2s, transform .2s;
}
.mm-card-wide:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.09);
}
.mm-card-wide .mm-thumb { width: 100%; height: 100%; min-height: 160px; object-fit: cover; }
.mm-card-wide .mm-card-body { padding: 20px 22px; display: flex; flex-direction: column; justify-content: center; }
.mm-card-wide .mm-card-title { font-size: 18px; }

/* ════════════════════════════════════════════
   PROMO / FEATURE BANNER
════════════════════════════════════════════ */
.mm-promo-banner {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 4px solid var(--red);
  border-radius: 4px;
  padding: 30px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 34px;
  position: relative;
  overflow: hidden;
}
.mm-promo-banner::before {
  content: '';
  position: absolute; top: -50px; right: -50px;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(200,16,46,.06) 0%, transparent 70%);
  pointer-events: none;
}
.mm-promo-eyebrow {
  font-family: var(--fh);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 8px;
}
.mm-promo-title {
  font-size: 26px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--heading);
  line-height: 1.1;
  margin-bottom: 8px;
}
.mm-promo-sub { font-size: 14px; color: var(--text-2); }
.mm-promo-cta {
  background: var(--red);
  color: #fff !important;
  font-family: var(--fh);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: 3px;
  white-space: nowrap;
  transition: background .2s;
  flex-shrink: 0;
}
.mm-promo-cta:hover { background: var(--red-d); }

/* ════════════════════════════════════════════
   VIDEO GRID
════════════════════════════════════════════ */
.mm-video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 34px;
}
.mm-video-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.mm-video-thumb-wrap { position: relative; overflow: hidden; display: block; }
.mm-video-card .mm-thumb {
  width: 100%;
  height: 160px;
  object-fit: cover;
  transition: transform .3s;
}
.mm-video-card:hover .mm-thumb { transform: scale(1.04); }
.mm-play-btn {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 46px; height: 46px;
  background: rgba(200,16,46,.9);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 16px;
  transition: transform .2s, background .2s;
  pointer-events: none;
}
.mm-video-card:hover .mm-play-btn { transform: translate(-50%,-50%) scale(1.1); background: var(--red-d); }
.mm-video-dur {
  position: absolute; bottom: 7px; right: 8px;
  background: rgba(0,0,0,.80); color: #fff;
  font-size: 11px; padding: 2px 6px; border-radius: 2px;
}

/* ════════════════════════════════════════════
   SINGLE POST
════════════════════════════════════════════ */
.mm-single-header { margin-bottom: 20px; }
.mm-single-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 14px;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--heading);
}
.mm-single-meta {
  font-size: 13px; color: var(--muted);
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
}
.mm-single-meta a { color: var(--muted); }
.mm-single-meta a:hover { color: var(--red); }

/* ── Post body text ── */
.mm-post-content {
  font-family: var(--fs);
  font-size: 17px;
  line-height: 1.82;
  color: var(--text-2);
}
.mm-post-content h2 {
  font-size: 22px;
  border-left: 4px solid var(--red);
  padding-left: 14px;
  margin: 2rem 0 .9rem;
  line-height: 1.3;
  color: var(--heading);
}
.mm-post-content h3 {
  font-size: 19px;
  margin: 1.8rem 0 .8rem;
  line-height: 1.35;
  color: var(--heading);
}
.mm-post-content p { margin-bottom: 1.3rem; }
.mm-post-content a { color: var(--red); text-decoration: underline; }
.mm-post-content strong { color: var(--heading); }
.mm-post-content ul, .mm-post-content ol {
  margin-bottom: 1.3rem;
  padding-left: 1.4rem;
}
.mm-post-content li { margin-bottom: .4rem; }
.mm-post-content blockquote {
  border-left: 4px solid var(--red) !important;
  background: #1a1a1a !important;
  padding: 16px 20px;
  margin: 1.8rem 0;
  font-style: italic;
  color: #ffffff !important;
  border-radius: 0 4px 4px 0;
}
.mm-post-content blockquote,
.mm-post-content blockquote p,
.mm-post-content blockquote * {
  color: #ffffff !important;
}

/* ── Article featured image ── */
.mm-single-hero {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: unset;
  border-radius: 4px;
  display: block;
  margin: 18px 0 26px;
}

/* ── In-content images ── */
.mm-post-content img {
  border-radius: 4px;
  margin: 1.6rem auto;
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
}
.mm-post-content .wp-block-image { margin: 1.6rem 0; }
.mm-post-content .wp-block-image img {
  margin: 0 auto;
  border-radius: 4px;
  width: 100%;
  height: auto;
}
.mm-post-content .wp-block-image figcaption {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin-top: 6px;
  font-style: italic;
}
.mm-post-content .wp-block-image.alignleft img,
.mm-post-content .wp-block-image.alignright img {
  width: auto;
  max-width: 45%;
  max-height: 320px;
}
.mm-post-content .wp-block-image.alignleft { float: left; margin-right: 1.5rem; margin-bottom: 1rem; }
.mm-post-content .wp-block-image.alignright { float: right; margin-left: 1.5rem; margin-bottom: 1rem; }
.mm-post-content .wp-block-image.aligncenter { text-align: center; }
.mm-post-content p:after { content: ''; display: table; clear: both; }

/* ════════════════════════════════════════════
   PAGINATION
════════════════════════════════════════════ */
.mm-pagination {
  display: flex; justify-content: center;
  gap: 6px; margin: 28px 0;
}
.mm-pagination a, .mm-pagination span {
  display: flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 10px;
  background: var(--white); border: 1px solid var(--border-d);
  font-family: var(--fh); font-size: 13px; font-weight: 600;
  color: var(--text-2); border-radius: 3px;
  transition: background .2s, color .2s, border-color .2s;
}
.mm-pagination a:hover, .mm-pagination .current {
  background: var(--red); border-color: var(--red); color: #fff;
}

/* ════════════════════════════════════════════
   SIDEBAR
════════════════════════════════════════════ */
.mm-sidebar {}

/* Newsletter widget */
.mm-newsletter-widget {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 22px 18px;
  margin-bottom: 26px;
  text-align: center;
}
.mm-newsletter-widget h3 {
  font-family: var(--fh);
  font-size: 16px; font-weight: 700;
  text-transform: uppercase; color: var(--heading);
  margin-bottom: 6px;
}
.mm-newsletter-widget p { font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.mm-newsletter-widget input[type="email"] {
  width: 100%;
  background: var(--white); border: 1px solid var(--border-d);
  color: var(--text); font-family: var(--fb); font-size: 13px;
  padding: 9px 12px; margin-bottom: 8px; outline: none; border-radius: 3px;
}
.mm-newsletter-widget input::placeholder { color: var(--muted); }
.mm-newsletter-widget input[type="submit"], .mm-newsletter-widget button {
  width: 100%; background: var(--red); color: #fff;
  font-family: var(--fh); font-size: 13px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  border: none; padding: 10px; cursor: pointer; border-radius: 3px;
  transition: background .2s;
}
.mm-newsletter-widget input[type="submit"]:hover,
.mm-newsletter-widget button:hover { background: var(--red-d); }

/* Generic sidebar widget */
.mm-widget {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-bottom: 26px;
  overflow: hidden;
}
.mm-widget .widget-title,
.mm-widget h3 {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--red);
  padding: 10px 16px;
  font-family: var(--fh);
  font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--heading); margin: 0;
}
.mm-widget .widget-content,
.mm-widget > *:not(.widget-title):not(h3) { padding: 14px 16px; }
.mm-widget ul { list-style: none; padding: 0; }
.mm-widget ul li {
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.mm-widget ul li:last-child { border-bottom: none; }
.mm-widget ul li a { color: var(--text-2); }
.mm-widget ul li a:hover { color: var(--red); }
.mm-widget .cat-item { display: flex; justify-content: space-between; }

/* Popular posts */
.mm-popular-list { list-style: none; padding: 0; }
.mm-popular-list li {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.mm-popular-list li:last-child { border-bottom: none; padding-bottom: 0; }
.mm-pop-num {
  font-family: var(--fh); font-size: 20px; font-weight: 700;
  color: var(--border-d); line-height: 1; min-width: 22px;
  transition: color .15s;
}
.mm-popular-list li:hover .mm-pop-num { color: var(--red); }
.mm-pop-title {
  font-family: var(--fh); font-size: 13px; font-weight: 600;
  text-transform: uppercase; color: var(--text-2); line-height: 1.25;
}
.mm-pop-title:hover { color: var(--red); }
.mm-pop-meta { font-size: 12px; color: var(--muted); margin-top: 3px; }

/* ════════════════════════════════════════════
   AD ZONES
════════════════════════════════════════════ */
.mm-ad-zone {
  margin-bottom: 26px;
  text-align: center;
  display: inline-block;
}
.mm-ad-zone a { display: block; }
.mm-ad-zone img { max-width: 100%; border-radius: 2px; }
.mm-ad-zone .mm-ad-label {
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
  text-align: center;
}
.mm-ad-placeholder {
  background: var(--bg3);
  border: 1px dashed var(--border-d);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 11px;
  font-family: var(--fh);
  letter-spacing: .08em;
  text-transform: uppercase;
  gap: 6px;
  padding: 20px;
}
.mm-ad-placeholder span { color: var(--border-d); font-size: 10px; }
.mm-ad-inline { margin: 28px 0; text-align: center; }
.mm-ad-leaderboard {
  max-width: 1100px;
  margin: 0 auto 28px;
  padding: 0 24px;
  text-align: center;
}

/* ════════════════════════════════════════════
   ARCHIVE / CATEGORY HEADER
════════════════════════════════════════════ */
.mm-archive-header {
  background: var(--bg2);
  border-bottom: 3px solid var(--red);
  padding: 28px 0;
  margin-bottom: 30px;
}
.mm-archive-title { font-size: 30px; font-weight: 700; margin-bottom: 6px; color: var(--heading); }
.mm-archive-desc { color: var(--muted); font-size: 14px; }

/* ════════════════════════════════════════════
   404
════════════════════════════════════════════ */
.mm-404 { text-align: center; padding: 80px 20px; }
.mm-404 h1 { font-size: 90px; color: var(--red); line-height: 1; }
.mm-404 h2 { font-size: 26px; margin-bottom: 14px; color: var(--heading); }
.mm-404 p { color: var(--muted); margin-bottom: 24px; }
.mm-btn {
  display: inline-block;
  background: var(--red); color: #fff;
  font-family: var(--fh); font-size: 13px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 12px 28px; border-radius: 3px;
  transition: background .2s;
}
.mm-btn:hover { background: var(--red-d); color: #fff; }

/* ════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════ */
#mm-footer {
  background: var(--black);
  border-top: 3px solid var(--red);
  padding: 40px 0 0;
  margin-top: 40px;
}
.mm-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid #2a2a2a;
  margin-bottom: 22px;
}
.mm-footer-brand-logo {
  font-family: var(--fh); font-size: 28px; font-weight: 700;
  color: #fff; text-transform: uppercase;
  margin-bottom: 12px; line-height: 1;
}
.mm-footer-brand-logo a { color: #fff; }
.mm-footer-brand-logo .accent { color: var(--red); }
.mm-footer-brand-logo img { max-height: 50px; width: auto; margin-bottom: 8px; }
.mm-footer-desc { font-size: 13px; color: #999; line-height: 1.65; margin-bottom: 18px; }
.mm-footer-social { display: flex; gap: 8px; flex-wrap: wrap; }
.mm-footer-social a {
  background: #222; color: #999;
  padding: 6px 12px; font-family: var(--fh); font-size: 10px;
  letter-spacing: .06em; border-radius: 2px;
  transition: background .2s, color .2s;
}
.mm-footer-social a:hover { background: var(--red); color: #fff; }
.mm-footer-col-title {
  font-family: var(--fh); font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: #fff; border-bottom: 2px solid var(--red);
  padding-bottom: 8px; margin-bottom: 14px;
}
.mm-footer-nav { list-style: none; }
.mm-footer-nav li { margin-bottom: 9px; }
.mm-footer-nav a { font-size: 13px; color: #999; transition: color .15s; }
.mm-footer-nav a:hover { color: #fff; }
#mm-footer .menu { list-style: none; padding: 0; margin: 0; }
#mm-footer .menu li { margin-bottom: 9px; }
#mm-footer .menu a { font-size: 13px; color: #999; transition: color .15s; }
#mm-footer .menu a:hover { color: #fff; }
.mm-footer-bottom {
  padding: 16px 0;
  display: flex; justify-content: center; align-items: center;
  font-size: 12px; color: #666;
  flex-wrap: wrap; gap: 10px; text-align: center;
}

/* ════════════════════════════════════════════
   COMMENTS
════════════════════════════════════════════ */
.mm-comments { margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--border); }
.mm-comments .comments-title { font-size: 18px; margin-bottom: 24px; color: var(--heading); }
.comment-list { list-style: none; padding: 0; }
.comment { padding: 18px 0; border-bottom: 1px solid var(--border); }
.comment-author b { font-family: var(--fh); font-size: 14px; color: var(--heading); }
.comment-meta { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.comment-content p { font-size: 14px; color: var(--text-2); margin-bottom: 0; }
.comment-form p { margin-bottom: 14px; }
.comment-form label {
  display: block; font-family: var(--fh); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-2); margin-bottom: 5px;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%; background: var(--white); border: 1px solid var(--border-d);
  color: var(--text); font-family: var(--fb); font-size: 14px;
  padding: 10px 12px; outline: none; border-radius: 3px;
}
.comment-form textarea { min-height: 120px; resize: vertical; }
.comment-form input[type="submit"] {
  background: var(--red); color: #fff; width: auto; padding: 10px 26px;
  font-family: var(--fh); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; cursor: pointer; border: none; border-radius: 3px;
  transition: background .2s; font-size: 13px;
}
.comment-form input[type="submit"]:hover { background: var(--red-d); }

/* ════════════════════════════════════════════
   COOKIE CONSENT BANNER
════════════════════════════════════════════ */
#mm-cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--white);
  border-top: 3px solid var(--red);
  box-shadow: 0 -4px 24px rgba(0,0,0,.12);
  z-index: 99999;
  padding: 14px 0;
  display: none; /* shown via JS once DOM ready */
}
#mm-cookie-banner.mm-cookie-visible { display: block; }
#mm-cookie-banner .mm-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.mm-cookie-text {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
  flex: 1;
  min-width: 200px;
}
.mm-cookie-text a {
  color: var(--red);
  text-decoration: underline;
}
.mm-cookie-text a:hover { color: var(--red-d); }
.mm-cookie-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  align-items: center;
  flex-wrap: wrap;
}
.mm-cookie-accept {
  background: var(--red);
  color: #fff;
  border: none;
  font-family: var(--fh);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 9px 20px;
  border-radius: 3px;
  cursor: pointer;
  transition: background .2s;
  white-space: nowrap;
}
.mm-cookie-accept:hover { background: var(--red-d); }
.mm-cookie-decline {
  background: none;
  color: var(--muted);
  border: 1px solid var(--border-d);
  font-family: var(--fh);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: 3px;
  cursor: pointer;
  transition: color .2s, border-color .2s;
  white-space: nowrap;
}
.mm-cookie-decline:hover { color: var(--text); border-color: var(--text-2); }

/* ════════════════════════════════════════════
   NEWSLETTER INLINE (article widget)
════════════════════════════════════════════ */
.rem-nl-wrap {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--red);
  border-radius: 4px;
  padding: 20px 24px;
  margin: 28px 0;
}
.rem-nl-inner { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.rem-nl-text { flex: 1; min-width: 200px; }
.rem-nl-label {
  font-family: var(--fh);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--heading);
  margin-bottom: 4px;
}
.rem-nl-sub { font-size: 13px; color: var(--muted); line-height: 1.5; }
.rem-nl-form-wrap { flex: 1; min-width: 280px; }
.rem-nl-form { display: flex; gap: 8px; flex-wrap: wrap; }
.rem-nl-name, .rem-nl-email {
  flex: 1;
  min-width: 120px;
  background: var(--white);
  border: 1px solid var(--border-d);
  color: var(--text);
  border-radius: 3px;
  padding: 9px 12px;
  font-size: 13px;
  outline: none;
}
.rem-nl-name:focus, .rem-nl-email:focus { border-color: var(--red); }
.rem-nl-btn {
  background: var(--red);
  color: #fff;
  border: none;
  padding: 9px 18px;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--fh);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.rem-nl-btn:hover { background: var(--red-d); }
.rem-nl-msg { margin-top: 8px; font-size: 12px; padding: 7px 12px; border-radius: 3px; }
.rem-nl-msg.ok { background: #d4edda; border: 1px solid #c3e6cb; color: #155724; }
.rem-nl-msg.err { background: #f8d7da; border: 1px solid #f5c2c7; color: #842029; }

/* ════════════════════════════════════════════
   ACCESSIBILITY UTILITIES
════════════════════════════════════════════ */
.screen-reader-text {
  border: 0;
  clip: rect(1px,1px,1px,1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: var(--white);
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0,0,0,.2);
  clip: auto !important;
  clip-path: none;
  color: var(--heading);
  display: block;
  font-size: 14px;
  font-weight: 600;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}
.mm-subscribe-btn,
.mm-menu-toggle,
.mm-card-thumb-wrap,
#mm-primary-menu > li > a { min-height: 44px; }
@media (forced-colors: active) {
  a:focus-visible { outline: 3px solid ButtonText; }
}

/* ════════════════════════════════════════════
   TABLET — 1024px and below
════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .mm-hero { grid-template-columns: 1fr 1fr; }
  .mm-post-grid { grid-template-columns: repeat(2, 1fr); }
  .mm-video-grid { grid-template-columns: repeat(2, 1fr); }
  .mm-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}

/* ════════════════════════════════════════════
   MOBILE — 768px and below
════════════════════════════════════════════ */
@media (max-width: 768px) {
  .mm-container { padding: 0 16px; }
  #mm-topbar { display: none; }
  .mm-site-title { font-size: 26px; }
  #mm-header .mm-container { flex-wrap: wrap; gap: 10px; padding: 10px 16px; }
  .mm-custom-logo-link img { max-height: 80px; }
  .mm-header-search { flex: 1 1 100%; order: 3; }
  .mm-subscribe-btn { order: 2; }
  .mm-menu-toggle { display: block; }
  #mm-primary-menu { display: none; flex-direction: column; width: 100%; }
  #mm-primary-menu.open { display: flex; }
  #mm-primary-menu > li > a {
    padding: 14px 16px; font-size: 16px;
    border-bottom: 1px solid var(--border);
    border-bottom-color: var(--border) !important;
    min-height: 48px; display: flex; align-items: center;
  }
  #mm-primary-menu .sub-menu {
    position: static; box-shadow: none; border-top: none;
    display: block; border-left: 3px solid var(--red);
    background: var(--bg2);
  }
  #mm-primary-menu .sub-menu li a { min-height: 44px; display: flex; align-items: center; }
  .mm-hero { grid-template-columns: 1fr; }
  .mm-hero-main .mm-thumb { height: 260px; }
  .mm-hero-side { flex-direction: row; }
  .mm-hero-side-card .mm-thumb { height: 110px; }
  .mm-content-wrap { display: block; margin: 0 auto; padding: 0; max-width: 100%; }
  #mm-main { padding: 16px 16px 0; width: 100%; box-sizing: border-box; }
  .single .mm-sidebar, .single-post .mm-sidebar { display: none; }
  .home .mm-sidebar, .archive .mm-sidebar, .search .mm-sidebar {
    display: block; padding: 0 16px; order: 2;
  }
  .mm-single-header { margin-bottom: 16px; }
  .mm-single-title { font-size: 24px; line-height: 1.3; margin-bottom: 12px; }
  .mm-single-meta { font-size: 13px; gap: 8px; }
  .mm-single-hero {
    width: calc(100% + 32px);
    margin-left: -16px; margin-right: -16px;
    max-width: none; border-radius: 0;
    margin-bottom: 20px; margin-top: 16px;
  }
  .mm-post-content { font-size: 17px; line-height: 1.8; }
  .mm-post-content h2 { font-size: 20px; margin: 1.6rem 0 .8rem; }
  .mm-post-content h3 { font-size: 18px; margin: 1.4rem 0 .7rem; }
  .mm-post-content p { margin-bottom: 1.2rem; }
  .mm-post-content blockquote { padding: 14px 16px; margin: 1.4rem 0; font-size: 16px; }
  .mm-post-content img {
    width: calc(100% + 32px); margin-left: -16px; margin-right: -16px;
    max-width: none; border-radius: 0;
  }
  .mm-post-content .wp-block-image { margin-left: -16px; margin-right: -16px; }
  .mm-post-content .wp-block-image img { width: 100%; max-width: none; border-radius: 0; margin-left: 0; margin-right: 0; }
  .mm-post-content .wp-block-image.alignleft,
  .mm-post-content .wp-block-image.alignright { float: none; margin-left: -16px; margin-right: -16px; margin-bottom: 1rem; }
  .mm-post-content .wp-block-image.alignleft img,
  .mm-post-content .wp-block-image.alignright img { max-width: 100%; width: 100%; }
  .rem-nl-wrap { margin: 20px -16px; border-radius: 0; border-left: none; border-right: none; }
  .rem-nl-inner { flex-direction: column; gap: 16px; }
  .rem-nl-form { flex-direction: column; }
  .rem-nl-email, .rem-nl-name { min-width: 0; width: 100%; }
  .rem-nl-btn { width: 100%; padding: 12px; font-size: 14px; }
  .mm-post-grid { grid-template-columns: 1fr; gap: 16px; }
  .mm-card-wide { grid-template-columns: 1fr; }
  .mm-card-wide .mm-thumb { min-height: 180px; }
  .mm-video-grid { grid-template-columns: 1fr; }
  .mm-promo-banner { flex-direction: column; padding: 20px 16px; text-align: center; border-left: none; border-top: 4px solid var(--red); }
  .mm-footer-grid { grid-template-columns: 1fr; }
  .mm-footer-bottom { flex-direction: column; text-align: center; }
  .mm-card-title { line-height: 1.4; }
  .mm-subscribe-btn { min-height: 44px; display: inline-flex; align-items: center; }
  #mm-cookie-banner .mm-container { flex-direction: column; align-items: flex-start; gap: 12px; }
  .mm-cookie-actions { width: 100%; }
  .mm-cookie-accept, .mm-cookie-decline { flex: 1; text-align: center; justify-content: center; }
}

/* ════════════════════════════════════════════
   SMALL PHONES — 480px and below
════════════════════════════════════════════ */
@media (max-width: 480px) {
  .mm-container { padding: 0 14px; }
  #mm-main { padding: 14px 14px 0; }
  .mm-site-title { font-size: 20px; }
  .mm-hero-side { flex-direction: column; }
  .mm-hero-side-card .mm-thumb { height: 120px; }
  .mm-hero-content h1 { font-size: 19px; }
  .mm-single-title { font-size: 21px; }
  .mm-single-hero { width: calc(100% + 28px); margin-left: -14px; }
  .mm-post-content { font-size: 16px; line-height: 1.75; }
  .mm-post-content img { width: calc(100% + 28px); margin-left: -14px; }
  .mm-post-content .wp-block-image { margin-left: -14px; margin-right: -14px; }
  .rem-nl-wrap { margin: 16px -14px; }
  .mm-post-grid { gap: 12px; }
  #mm-primary-menu > li > a { font-size: 15px; padding: 14px; }
  .mm-subscribe-btn { width: 100%; text-align: center; order: 2; }
}

/* ════════════════════════════════════════════
   WORDPRESS.COM OVERRIDE FIXES
   Using !important + higher specificity to beat
   platform-injected styles
════════════════════════════════════════════ */

/* Fix 1 — Topbar background (WP.com sets body bg white, bleeds through) */
body #mm-topbar,
html body #mm-topbar {
  /* !important is retained only to beat WordPress.com's injected styles.
     The values now follow the Top Bar surface instead of being hard-coded. */
  background: var(--mm-topbar-bg, #111111) !important;
  border-bottom: 1px solid var(--mm-topbar-border, #222222) !important;
  color: var(--mm-topbar-muted, #aaaaaa) !important;
}
body #mm-topbar a,
html body #mm-topbar .mm-topbar-links a,
html body #mm-topbar .mm-topbar-social a {
  color: var(--mm-topbar-muted, #aaaaaa) !important;
}
body #mm-topbar a:hover,
html body #mm-topbar .mm-topbar-links a:hover,
html body #mm-topbar .mm-topbar-social a:hover {
  color: var(--mm-topbar-heading, #ffffff) !important;
}

/* Fix 2 — Search bar (WP.com injects .wp-block-search styles) */
#mm-header .mm-header-search input[type="search"],
#mm-header .mm-header-search input[type="text"],
#mm-header .mm-header-search input {
  background: var(--mm-header-bg, #eaeae6) !important;
  border: 1px solid var(--mm-header-border, #c8c8c0) !important;
  border-right: none !important;
  color: var(--mm-header-body, #1a1a1a) !important;
  font-size: 13px !important;
  padding: 9px 14px !important;
  border-radius: 3px 0 0 3px !important;
  -webkit-appearance: none !important;
  box-shadow: none !important;
  outline: none !important;
  height: auto !important;
  width: auto !important;
  margin: 0 !important;
}
#mm-header .mm-header-search input[type="search"]::placeholder,
#mm-header .mm-header-search input::placeholder {
  color: var(--mm-header-muted, #777777) !important;
  opacity: 1 !important;
}
#mm-header .mm-header-search button,
#mm-header .mm-header-search input[type="submit"] {
  background: #C8102E !important;
  color: #ffffff !important;
  border: none !important;
  padding: 9px 14px !important;
  border-radius: 0 3px 3px 0 !important;
  font-size: 14px !important;
  height: auto !important;
  box-shadow: none !important;
}

/* Fix 3 — Author / meta text color */
.mm-single-meta,
.mm-single-meta span,
.mm-single-meta time,
.mm-single-meta .mm-author,
.mm-post-meta,
.entry-meta,
.byline,
.posted-on {
  color: var(--mm-page-muted, #777777) !important;
}
.mm-single-meta a,
.mm-single-meta .mm-author a {
  color: var(--mm-article-muted, #777777) !important;
  text-decoration: none !important;
}
.mm-single-meta a:hover {
  color: #C8102E !important;
}

/* Fix 4 — Cookie banner Decline button visibility */
#mm-cookie-banner .mm-cookie-decline {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: transparent !important;
  color: #777777 !important;
  border: 1px solid #c8c8c0 !important;
  font-family: var(--fh), 'Oswald', Impact, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  padding: 9px 16px !important;
  border-radius: 3px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
}
#mm-cookie-banner .mm-cookie-actions {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  flex-wrap: nowrap !important;
}
#mm-cookie-banner {
  background: #ffffff !important;
  border-top: 3px solid #C8102E !important;
}

/* ── Blockquote — always dark bg, always white text, no exceptions ── */
body .mm-post-content blockquote,
body.single .mm-post-content blockquote,
body .mm-post-content blockquote p,
body .mm-post-content blockquote *,
html body .mm-post-content blockquote {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
  border-left-color: #C8102E !important;
}

/* ── Single post meta — force dark on white background ── */
body .mm-single-meta,
body .mm-single-meta span,
body .mm-single-meta time,
body .mm-single-meta a,
html body .mm-single-meta,
html body .mm-single-meta span,
html body .mm-single-meta a {
  color: var(--mm-article-muted, #555555) !important;
}
body .mm-single-meta a:hover {
  color: #C8102E !important;
}

/* ── Tags ── */
body .mm-tags-row a,
body .entry-tags a,
body .tags-links a,
body .post-tags a {
  color: var(--mm-article-body, #444444) !important;
  text-decoration: none !important;
}
body .mm-tags-row a:hover,
body .entry-tags a:hover,
body .tags-links a:hover,
body .post-tags a:hover {
  color: #C8102E !important;
}

/* ── Cookie banner — force white bg and dark text on all screens ── */
#mm-cookie-banner,
html body #mm-cookie-banner {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #1a1a1a !important;
}
#mm-cookie-banner .mm-cookie-text,
html body #mm-cookie-banner .mm-cookie-text {
  color: #333333 !important;
}
#mm-cookie-banner .mm-cookie-text strong {
  color: #111111 !important;
}
#mm-cookie-banner .mm-cookie-decline,
html body #mm-cookie-banner .mm-cookie-decline {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #333333 !important;
  border: 1px solid #c8c8c0 !important;
}
#mm-cookie-banner .mm-cookie-decline:hover {
  color: #111111 !important;
  border-color: #888888 !important;
}

/* ── Ad images — pointer cursor, never zoom ── */
.mm-ad-zone img,
.mm-ad-zone a,
.mm-ad-inline img,
.mm-ad-inline a,
.mm-ad-leaderboard img,
.mm-ad-leaderboard a {
  cursor: pointer !important;
}

/* ════════════════════════════════════════════════════════════════
   HUB TEMPLATES — PROJECTS / RACING / EVENT COVERAGE
   Archive heroes, banner cards, single hub pages
   (added v1.0.4 — these templates had no CSS before)
════════════════════════════════════════════════════════════════ */

/* ─── Shared primary button ─── */
.mm-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--red);
  color: #fff;
  font-family: var(--fh);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: 3px;
  border: none;
  cursor: pointer;
  transition: background .18s, transform .18s;
}
.mm-btn-primary:hover { background: var(--red-d); color: #fff; transform: translateY(-1px); }

/* ─── Hub archive heroes (Projects / Racing / Event Coverage) ─── */
.mm-projects-hero,
.mm-racing-hero,
.mm-ec-hero {
  background: var(--black);
  border-bottom: 3px solid var(--red);
  padding: 54px 0 46px;
  margin-bottom: 44px;
}
.mm-projects-hero-inner { max-width: 760px; }
.mm-projects-eyebrow,
.mm-racing-eyebrow,
.mm-ec-eyebrow {
  display: inline-block;
  font-family: var(--fh);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 12px;
}
.mm-projects-title,
.mm-racing-title,
.mm-ec-title {
  font-family: var(--fh);
  font-size: 54px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.5px;
  color: #fff;
  margin: 0 0 14px;
}
.mm-projects-subtitle,
.mm-racing-subtitle,
.mm-ec-subtitle {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,.72);
  max-width: 640px;
  margin: 0;
}

.mm-projects-wrap,
.mm-racing-wrap,
.mm-ec-wrap { padding-bottom: 60px; }

/* ─── Wide alternating banner cards ─── */
.mm-project-card,
.mm-race-card,
.mm-ec-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 26px;
  transition: box-shadow .22s, transform .22s, border-color .22s;
}
.mm-project-card:hover,
.mm-race-card:hover,
.mm-ec-card:hover {
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
  border-color: var(--border-d);
  transform: translateY(-2px);
}
.mm-project-card-link,
.mm-race-card-link,
.mm-ec-card-link {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: stretch;
  color: inherit;
  min-height: 300px;
}
.mm-project-card--flip .mm-project-card-link,
.mm-race-card--flip .mm-race-card-link,
.mm-ec-card--flip .mm-ec-card-link { direction: rtl; }
.mm-project-card--flip .mm-project-card-content,
.mm-race-card--flip .mm-race-card-content,
.mm-ec-card--flip .mm-ec-card-content { direction: ltr; }

/* Card image side */
.mm-project-card-image,
.mm-race-card-image,
.mm-ec-card-image {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  background: var(--bg3);
}
.mm-project-card-image img,
.mm-race-card-image img,
.mm-ec-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.mm-project-card:hover .mm-project-card-image img,
.mm-race-card:hover .mm-race-card-image img,
.mm-ec-card:hover .mm-ec-card-image img { transform: scale(1.04); }

.mm-project-card-placeholder,
.mm-race-card-placeholder,
.mm-ec-card-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #2a2a2a, #111);
  color: rgba(255,255,255,.55);
  font-family: var(--fh);
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-align: center;
  padding: 20px;
}
.mm-project-card-overlay,
.mm-race-card-overlay,
.mm-ec-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,.28) 0%, transparent 55%);
  pointer-events: none;
}

/* Status pill */
.mm-project-status {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 2;
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-family: var(--fh);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 2px;
}
.mm-project-status--active     { background: var(--red); }
.mm-project-status--complete,
.mm-project-status--completed  { background: #1f7a3f; }
.mm-project-status--paused,
.mm-project-status--on-hold    { background: #777; }
.mm-project-status--coming-soon{ background: #1a1a1a; }

/* Card content side */
.mm-project-card-content,
.mm-race-card-content,
.mm-ec-card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 34px 36px;
}
.mm-project-vehicle,
.mm-race-badge,
.mm-ec-event-name {
  font-family: var(--fh);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 10px;
}
.mm-project-name,
.mm-race-series-name,
.mm-ec-event-name {
  display: block;
}
.mm-project-name,
.mm-race-series-name {
  font-family: var(--fh);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.12;
  color: var(--heading);
  margin: 0 0 12px;
  transition: color .18s;
}
.mm-project-card:hover .mm-project-name,
.mm-race-card:hover .mm-race-series-name { color: var(--red); }

.mm-project-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-2);
  margin: 0 0 18px;
}
.mm-project-meta,
.mm-race-card-meta,
.mm-ec-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
}
.mm-project-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--fb);
  font-size: 13px;
  color: var(--muted);
}
.mm-project-read-more,
.mm-race-follow,
.mm-ec-follow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--fh);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
  transition: gap .18s;
}
.mm-project-card:hover .mm-project-read-more,
.mm-race-card:hover .mm-race-follow,
.mm-ec-card:hover .mm-ec-follow { gap: 12px; }

.mm-race-count,
.mm-ec-count,
.mm-ec-location {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: .02em;
}
.mm-ec-location::before { content: '📍 '; }

/* Empty states */
.mm-projects-empty,
.mm-racing-empty,
.mm-ec-empty {
  text-align: center;
  padding: 70px 24px;
  border: 1px dashed var(--border-d);
  border-radius: 4px;
  background: var(--bg);
  color: var(--muted);
}
.mm-projects-empty p,
.mm-racing-empty p,
.mm-ec-empty p { margin-bottom: 18px; font-size: 15px; }

/* ════════════════════════════════════════════════════════════════
   SINGLE HUB PAGE — PROJECT / RACING SERIES / EVENT
════════════════════════════════════════════════════════════════ */
.mm-proj-hero {
  position: relative;
  background-color: #111;
  background-image: var(--hero-bg, none);
  background-size: cover;
  background-position: center;
  border-bottom: 3px solid var(--red);
  padding: 90px 0 56px;
  margin-bottom: 44px;
}
.mm-proj-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.62) 55%, rgba(0,0,0,.45) 100%);
}
.mm-proj-hero-inner {
  position: relative;
  z-index: 2;
}
.mm-proj-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--fh);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  margin-bottom: 22px;
  transition: color .18s, gap .18s;
}
.mm-proj-back:hover { color: #fff; gap: 11px; }

.mm-proj-vehicle-label,
.mm-race-badge-hero,
.mm-ec-hero-location {
  display: block;
  font-family: var(--fh);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 10px;
}
.mm-proj-title {
  font-family: var(--fh);
  font-size: 48px;
  font-weight: 700;
  line-height: 1.05;
  color: #fff;
  margin: 0 0 16px;
  max-width: 900px;
}
.mm-proj-hero-inner .mm-project-status {
  position: static;
  display: inline-block;
}
.mm-race-hero-count {
  display: inline-block;
  margin-left: 12px;
  font-size: 13px;
  color: rgba(255,255,255,.7);
}

/* Body */
.mm-proj-body,
.mm-racing-body { padding-bottom: 60px; }

.mm-proj-intro {
  display: grid;
  gap: 40px;
  margin-bottom: 52px;
}
.mm-proj-intro--with-specs { grid-template-columns: 1fr 300px; }
.mm-proj-intro--full { grid-template-columns: 1fr; max-width: 760px; }

.mm-proj-section-label {
  font-family: var(--fh);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--heading);
  padding-bottom: 10px;
  margin-bottom: 18px;
  border-bottom: 2px solid var(--red);
}
.mm-proj-description,
.mm-racing-desc {
  font-family: var(--fs);
  font-size: 17px;
  line-height: 1.75;
  color: var(--text);
}
.mm-proj-description p,
.mm-racing-desc p { margin-bottom: 1.1rem; }
.mm-proj-description p:last-child { margin-bottom: 0; }
.mm-proj-description h2,
.mm-proj-description h3 { margin: 1.6rem 0 .7rem; font-size: 21px; }
.mm-proj-description img { border-radius: 4px; margin: 1.2rem 0; }

/* Specs sidebar */
.mm-proj-specs-block { align-self: start; }
.mm-proj-spec-list {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.mm-proj-spec-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.mm-proj-spec-list li:last-child { border-bottom: none; }
.mm-spec-label {
  font-family: var(--fh);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.mm-spec-val {
  font-size: 14px;
  font-weight: 600;
  color: var(--heading);
  text-align: right;
}

/* Coverage section */
.mm-proj-coverage,
.mm-racing-coverage { margin-top: 10px; }
.mm-proj-coverage-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 26px;
}
.mm-proj-coverage-title {
  font-family: var(--fh);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--heading);
  border-bottom: 3px solid var(--red);
  padding-bottom: 10px;
  margin: 0 0 -2px;
}
.mm-proj-coverage-count {
  font-family: var(--fh);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 12px;
}
.mm-proj-coverage-grid { display: block; }

/* Coverage banner cards */
.mm-proj-cov-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 22px;
  transition: box-shadow .22s, transform .22s, border-color .22s;
}
.mm-proj-cov-card:hover {
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
  border-color: var(--border-d);
  transform: translateY(-2px);
}
.mm-proj-cov-card-link {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  color: inherit;
  min-height: 260px;
}
.mm-proj-cov-card--flip .mm-proj-cov-card-link { direction: rtl; }
.mm-proj-cov-card--flip .mm-proj-cov-content { direction: ltr; }

.mm-proj-cov-image {
  position: relative;
  overflow: hidden;
  min-height: 260px;
  background: var(--bg3);
}
.mm-proj-cov-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.mm-proj-cov-card:hover .mm-proj-cov-image img { transform: scale(1.04); }
.mm-proj-cov-placeholder {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #2a2a2a, #111);
}
.mm-proj-cov-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,.22) 0%, transparent 60%);
  pointer-events: none;
}
.mm-proj-cov-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px 34px;
}
.mm-proj-cov-cat {
  display: inline-block;
  align-self: flex-start;
  background: var(--red);
  color: #fff;
  font-family: var(--fh);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 2px;
  margin-bottom: 12px;
}
.mm-proj-cov-title {
  font-family: var(--fh);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.18;
  color: var(--heading);
  margin: 0 0 10px;
  transition: color .18s;
}
.mm-proj-cov-card:hover .mm-proj-cov-title { color: var(--red); }
.mm-proj-cov-excerpt {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-2);
  margin: 0 0 16px;
}
.mm-proj-cov-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .03em;
}
.mm-proj-cov-readmore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-family: var(--fh);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
  transition: gap .18s;
}
.mm-proj-cov-card:hover .mm-proj-cov-readmore { gap: 11px; }

/* No articles / admin helpers */
.mm-proj-no-articles {
  text-align: center;
  padding: 56px 24px;
  border: 1px dashed var(--border-d);
  border-radius: 4px;
  background: var(--bg);
  color: var(--muted);
}
.mm-proj-admin-tip {
  font-size: 13px;
  color: var(--text-2);
  margin-top: 10px;
}
.mm-proj-admin-tip strong {
  font-family: monospace;
  background: var(--bg3);
  padding: 2px 6px;
  border-radius: 2px;
  color: var(--heading);
}
.mm-proj-edit-link {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--fh);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red);
}
.mm-proj-admin-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 36px;
  padding: 12px 16px;
  background: var(--bg);
  border: 1px dashed var(--border-d);
  border-radius: 3px;
  font-size: 12px;
  color: var(--muted);
}
.mm-proj-admin-bar a {
  font-family: var(--fh);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--red);
}
.mm-proj-admin-bar code {
  background: var(--bg3);
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 11px;
  color: var(--heading);
}

/* ════════════════════════════════════════════════════════════════
   LATEST PAGE (home.php)
════════════════════════════════════════════════════════════════ */
.mm-latest-page { padding-bottom: 60px; }
.mm-lp-header {
  padding: 40px 0 22px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 22px;
}
.mm-lp-title {
  font-family: var(--fh);
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  color: var(--heading);
  margin: 0 0 8px;
}
.mm-lp-sub {
  font-size: 15px;
  color: var(--muted);
  margin: 0;
}
.mm-lp-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 30px;
}
.mm-lp-filter {
  display: inline-block;
  font-family: var(--fh);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  /* Colors come from the 'Panels & Labels' surface, which pairs this
     background with its own readable text. See inc/color-system.php. */
  color: var(--heading);
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 8px 15px;
  border-radius: 3px;
  transition: background .18s, color .18s, border-color .18s;
}
.mm-lp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px 22px;
}
.mm-lp-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.mm-lp-card:hover {
  box-shadow: 0 10px 24px rgba(0,0,0,.09);
  border-color: var(--border-d);
  transform: translateY(-2px);
}
.mm-lp-card-img-wrap {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--bg3);
}
.mm-lp-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.mm-lp-card:hover .mm-lp-card-img-wrap img { transform: scale(1.04); }
.mm-lp-card-img-placeholder {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #2a2a2a, #111);
}
.mm-lp-card-body {
  display: flex;
  flex-direction: column;
  padding: 16px 18px 18px;
  flex: 1;
}
.mm-lp-card-cat {
  display: inline-block;
  align-self: flex-start;
  background: var(--red);
  color: #fff;
  font-family: var(--fh);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
  margin-bottom: 10px;
  transition: background .18s;
}
.mm-lp-card-cat:hover { background: var(--red-d); color: #fff; }
.mm-lp-card-title {
  display: block;
  font-family: var(--fh);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--heading);
  margin-bottom: 10px;
  transition: color .18s;
}
.mm-lp-card-title:hover { color: var(--red); }
.mm-lp-card-meta {
  margin-top: auto;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .02em;
}
.mm-lp-pagination { margin-top: 40px; }
.mm-lp-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
}

/* ════════════════════════════════════════════════════════════════
   SUBMIT YOUR RIDE (page-submit-vehicle.php)
════════════════════════════════════════════════════════════════ */
.mm-submit-wrap { padding-bottom: 70px; }

/* Hero */
.mm-submit-hero {
  background: var(--black);
  border-bottom: 3px solid var(--red);
  padding: 58px 24px 52px;
  margin-bottom: 44px;
}
.mm-submit-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.mm-submit-eyebrow {
  font-family: var(--fh);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}
.mm-submit-title {
  font-family: var(--fh);
  font-size: 54px;
  font-weight: 700;
  line-height: 1.02;
  color: #fff;
  margin: 0 0 16px;
}
.mm-submit-title span { color: var(--red); }
.mm-submit-subtitle {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255,255,255,.72);
  max-width: 620px;
  margin: 0 auto 28px;
}
.mm-submit-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 22px;
}
.mm-submit-stat {
  font-family: var(--fh);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  text-align: center;
  line-height: 1.5;
}
.mm-submit-stat span {
  display: block;
  color: #fff;
  font-size: 15px;
}
.mm-submit-stat-div {
  width: 1px;
  height: 30px;
  background: rgba(255,255,255,.22);
}

/* Form shell */
.mm-submit-form-wrap { padding: 0 24px; }
.mm-submit-form-inner {
  max-width: 780px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 40px 42px 34px;
  box-shadow: 0 6px 24px rgba(0,0,0,.05);
}
.mm-submit-errors {
  background: #f8d7da;
  border: 1px solid #f5c2c7;
  color: #842029;
  border-radius: 3px;
  padding: 14px 18px;
  margin-bottom: 26px;
  font-size: 14px;
}
.mm-submit-errors ul { margin: 8px 0 0; padding-left: 1.2rem; }

/* Sections */
.mm-sf-section {
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--border);
}
.mm-sf-section:last-of-type { border-bottom: none; }
.mm-sf-section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--fh);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--heading);
  margin-bottom: 20px;
}
.mm-sf-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--red);
  color: #fff;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  flex-shrink: 0;
}

/* Fields */
.mm-sf-grid { display: grid; gap: 16px; }
.mm-sf-grid-2 { grid-template-columns: repeat(2, 1fr); }
.mm-sf-grid-3 { grid-template-columns: repeat(3, 1fr); }
.mm-sf-field { display: flex; flex-direction: column; }
.mm-sf-field-full { width: 100%; }
.mm-sf-field label {
  font-family: var(--fh);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 7px;
}
.mm-sf-req { color: var(--red); }
.mm-sf-field input[type="text"],
.mm-sf-field input[type="email"],
.mm-sf-field input[type="number"],
.mm-sf-field textarea,
.mm-sf-field select {
  width: 100%;
  font-family: var(--fb);
  font-size: 15px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-d);
  border-radius: 3px;
  padding: 11px 14px;
  transition: border-color .18s, box-shadow .18s, background .18s;
  -webkit-appearance: none;
  appearance: none;
}
.mm-sf-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23777' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.mm-sf-field textarea { resize: vertical; line-height: 1.6; min-height: 110px; }
.mm-sf-field input:focus,
.mm-sf-field textarea:focus,
.mm-sf-field select:focus {
  outline: none;
  background: var(--white);
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(200,16,46,.10);
}
.mm-sf-field input::placeholder,
.mm-sf-field textarea::placeholder { color: var(--muted); opacity: 1; }
.mm-sf-hint {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}

/* Photo dropzone */
.mm-sf-photo-zone {
  position: relative;
  border: 2px dashed var(--border-d);
  border-radius: 4px;
  background: var(--bg);
  transition: border-color .18s, background .18s;
}
.mm-sf-photo-zone.dragging {
  border-color: var(--red);
  background: var(--red-lt);
}
.mm-sf-photo-input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  overflow: hidden;
}
.mm-sf-photo-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 44px 20px;
  cursor: pointer;
  text-align: center;
}
.mm-sf-photo-icon { font-size: 30px; line-height: 1; }
.mm-sf-photo-text strong {
  display: block;
  font-family: var(--fh);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--heading);
  margin-bottom: 5px;
}
.mm-sf-photo-text span {
  font-size: 12px;
  color: var(--muted);
}
.mm-sf-photo-preview {
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  padding: 14px;
}
.mm-sf-photo-thumb {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  border-radius: 3px;
  border: 1px solid var(--border);
}

/* Submit row */
.mm-sf-submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 8px;
}
.mm-sf-privacy {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
  max-width: 400px;
  line-height: 1.5;
}
.mm-sf-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--red);
  color: #fff;
  font-family: var(--fh);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: none;
  border-radius: 3px;
  padding: 15px 30px;
  cursor: pointer;
  transition: background .18s, transform .18s;
}
.mm-sf-submit-btn:hover { background: var(--red-d); transform: translateY(-1px); }
.mm-sf-submit-btn:active { transform: translateY(0); }

/* Success state */
.mm-submit-success {
  padding: 80px 24px;
  text-align: center;
}
.mm-submit-success-inner {
  max-width: 560px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 4px solid var(--red);
  border-radius: 5px;
  padding: 46px 36px;
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
}
.mm-submit-checkmark { font-size: 46px; margin-bottom: 14px; line-height: 1; }
.mm-submit-success-inner h2 {
  font-family: var(--fh);
  font-size: 30px;
  font-weight: 700;
  color: var(--heading);
  margin-bottom: 12px;
}
.mm-submit-success-inner p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-2);
  margin-bottom: 26px;
}
.mm-submit-back-btn {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-family: var(--fh);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 13px 26px;
  border-radius: 3px;
  transition: background .18s;
}
.mm-submit-back-btn:hover { background: var(--red-d); color: #fff; }

/* ════════════════════════════════════════════════════════════════
   FOOTER NETWORK BAR + MISC
════════════════════════════════════════════════════════════════ */
#mm-network-bar { padding: 14px 0; }
#mm-network-bar .mm-network-inner {
  display: flex;
  flex-wrap: wrap;
}
.mm-network-label {
  font-family: var(--fh);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.mm-network-sites {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
}
.mm-network-site {
  display: inline-flex;
  align-items: center;
  opacity: .75;
  transition: opacity .18s;
}
.mm-network-site:hover { opacity: 1; }
.mm-network-site img { display: block; width: auto; }
.mm-network-site-text {
  font-family: var(--fh);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.mm-inline-ad-wrap { margin: 30px 0; text-align: center; }

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — HUB / LATEST / SUBMIT
════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .mm-lp-grid { grid-template-columns: repeat(2, 1fr); }
  .mm-proj-intro--with-specs { grid-template-columns: 1fr 260px; gap: 30px; }
  .mm-projects-title,
  .mm-racing-title,
  .mm-ec-title { font-size: 44px; }
  .mm-proj-title { font-size: 38px; }
}

@media (max-width: 768px) {
  /* Hub heroes */
  .mm-projects-hero,
  .mm-racing-hero,
  .mm-ec-hero { padding: 36px 0 32px; margin-bottom: 28px; }
  .mm-projects-title,
  .mm-racing-title,
  .mm-ec-title { font-size: 34px; }
  .mm-projects-subtitle,
  .mm-racing-subtitle,
  .mm-ec-subtitle { font-size: 15px; }

  /* Banner cards stack */
  .mm-project-card-link,
  .mm-race-card-link,
  .mm-ec-card-link,
  .mm-proj-cov-card-link {
    grid-template-columns: 1fr;
    min-height: 0;
    direction: ltr;
  }
  .mm-project-card--flip .mm-project-card-link,
  .mm-race-card--flip .mm-race-card-link,
  .mm-ec-card--flip .mm-ec-card-link,
  .mm-proj-cov-card--flip .mm-proj-cov-card-link { direction: ltr; }
  .mm-project-card-image,
  .mm-race-card-image,
  .mm-ec-card-image,
  .mm-proj-cov-image { min-height: 0; aspect-ratio: 16 / 9; }
  .mm-project-card-content,
  .mm-race-card-content,
  .mm-ec-card-content,
  .mm-proj-cov-content { padding: 22px 20px 24px; }
  .mm-project-name,
  .mm-race-series-name { font-size: 24px; }
  .mm-proj-cov-title { font-size: 20px; }
  .mm-proj-cov-readmore { margin-left: 0; }

  /* Single hub */
  .mm-proj-hero { padding: 54px 0 34px; margin-bottom: 28px; }
  .mm-proj-title { font-size: 30px; }
  .mm-proj-intro,
  .mm-proj-intro--with-specs { grid-template-columns: 1fr; gap: 30px; margin-bottom: 36px; }
  .mm-proj-description,
  .mm-racing-desc { font-size: 16px; }
  .mm-proj-coverage-title { font-size: 19px; }

  /* Latest */
  .mm-lp-header { padding: 26px 0 18px; }
  .mm-lp-title { font-size: 32px; }
  .mm-lp-grid { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
  .mm-lp-card-title { font-size: 15px; }

  /* Submit */
  .mm-submit-hero { padding: 38px 20px 34px; margin-bottom: 28px; }
  .mm-submit-title { font-size: 34px; }
  .mm-submit-subtitle { font-size: 15px; }
  .mm-submit-stat-div { display: none; }
  .mm-submit-form-wrap { padding: 0 14px; }
  .mm-submit-form-inner { padding: 26px 20px 24px; }
  .mm-sf-grid-2,
  .mm-sf-grid-3 { grid-template-columns: 1fr; }
  .mm-sf-submit-row { flex-direction: column; align-items: stretch; }
  .mm-sf-submit-btn { width: 100%; justify-content: center; }
  .mm-submit-success { padding: 48px 16px; }

  /* Network bar */
  #mm-network-bar .mm-network-inner { gap: 10px; }
}

@media (max-width: 480px) {
  .mm-lp-grid { grid-template-columns: 1fr; }
  .mm-projects-title,
  .mm-racing-title,
  .mm-ec-title,
  .mm-submit-title { font-size: 28px; }
  .mm-proj-title { font-size: 25px; }
  .mm-project-name,
  .mm-race-series-name { font-size: 21px; }
  .mm-lp-filters { gap: 6px; }
  .mm-lp-filter { font-size: 11px; padding: 7px 12px; }
}

/* ════════════════════════════════════════════════════════════════
   HOMEPAGE v4.3 — LEAD BLOCK + COMPACT ROW RHYTHM

   The row is the unit the page is built from. One shape, fixed height,
   separated by hairline dividers rather than boxed in borders. Boxes add a
   visible edge per item; dividers add one line between items, which reads
   considerably lighter at the same information density.
════════════════════════════════════════════════════════════════ */

/* ─── Lead block ─── */
.mm-lead-block { padding: 24px 0 10px; }
.mm-lead-grid {
  display: grid;
  grid-template-columns: 1.85fr 1fr;
  gap: 30px;
  align-items: start;
}

.mm-lead { position: relative; }
.mm-lead-media {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 16 / 9;
  background: var(--bg3);
}
.mm-lead-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.mm-lead:hover .mm-lead-media img { transform: scale(1.02); }
.mm-lead-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 55%);
  pointer-events: none;
}
.mm-lead-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fh);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.mm-lead-text { padding-top: 16px; }
.mm-lead-title {
  font-family: var(--fh);
  font-size: 29px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.3px;
  margin: 10px 0 10px;
}
.mm-lead-title a { color: var(--heading); transition: color .18s; }
.mm-lead-title a:hover { color: var(--red); }
.mm-lead-excerpt {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-2);
  margin: 0 0 10px;
  max-width: 62ch;
}
.mm-lead-meta { font-size: 12.5px; color: var(--muted); }

/* ─── Top stories rail ─── */
.mm-top-stories {
  align-self: start;
  min-width: 0;
}

/* ─── Rail as a panel (desktop only) ───
   Beside a 663px lead image the rail was a column of text floating in white
   with nothing holding it, and it ran ~190px shorter than the lead, which
   left a visible void on the right. Giving it the same soft band used for ad
   slots turns that leftover space into deliberate margin outside a defined
   block rather than dead page. A fourth story closes most of the height gap. */
@media (min-width: 861px) {
  .mm-top-stories {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 4px 16px 6px;
  }
  .mm-top-stories .mm-row:last-child { border-bottom: none; }
  .mm-top-stories .mm-rail-title {
    margin-top: 10px;
  }
  /* Thumbnails drop a size in the narrower column so the headline keeps a
     usable measure rather than being squeezed to three or four words a line. */
  .mm-top-stories .mm-row { grid-template-columns: 92px 1fr; gap: 12px; }
  .mm-top-stories .mm-row-title { font-size: 14.5px; }
}

.mm-rail-title {
  font-family: var(--fh);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--heading);
  padding-bottom: 9px;
  margin: 0 0 4px;
  border-bottom: 2px solid var(--red);
}

/* ─── The row ─── */
.mm-row {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 14px;
  align-items: start;
  padding: 15px 0;
  border-bottom: 1px solid var(--border);
}
.mm-row:last-child { border-bottom: none; }

.mm-row-media {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  aspect-ratio: 4 / 3;
  background: var(--bg3);
}
.mm-row-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.mm-row:hover .mm-row-media img { transform: scale(1.05); }
.mm-row-media-empty {
  position: absolute; inset: 0;
  background: var(--bg3);
}

.mm-row-body { min-width: 0; }
.mm-row-cat {
  display: inline-block;
  font-family: var(--fh);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 5px;
}
.mm-row-cat:hover { color: var(--red-d); }
.mm-row-title {
  font-family: var(--fh);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.28;
  margin: 0 0 6px;
  /* Clamp keeps the row height predictable so the rhythm holds regardless of
     how long an individual headline runs. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mm-row-title a { color: var(--heading); transition: color .18s; }
.mm-row-title a:hover { color: var(--red); }
.mm-row-excerpt {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-2);
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mm-row-meta {
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: .02em;
}

/* ─── Row list ─── */
.mm-row-list { margin-bottom: 8px; }
.mm-row-ad {
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.mm-row-pagination { margin: 26px 0 10px; }

.mm-thumb-empty { background: var(--bg3); height: 160px; }

/* ─── Responsive ───
   The lead grid is deliberately unconstrained at the base width so mobile
   keeps its full-bleed lead image, which matches how the theme already
   handles article images on small screens. The 1100px container is applied
   from the tablet breakpoint up, where it needs to line up with the header,
   the Latest section and the footer. */
@media (min-width: 769px) {
  .mm-lead-grid {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
  }
}

@media (max-width: 1024px) {
  .mm-lead-grid { grid-template-columns: 1.5fr 1fr; gap: 24px; }
  .mm-lead-title { font-size: 26px; }
}

@media (max-width: 860px) {
  /* Rail drops below the lead rather than squeezing into a narrow column. */
  .mm-lead-grid { grid-template-columns: 1fr; gap: 24px; }
  .mm-lead-text { padding-top: 14px; }
}

@media (max-width: 768px) {
  .mm-lead-block { padding: 16px 0 4px; }
  .mm-lead-title { font-size: 24px; line-height: 1.15; }
  .mm-lead-excerpt { font-size: 14.5px; }
  .mm-row { grid-template-columns: 96px 1fr; gap: 12px; padding: 13px 0; }
  .mm-row-title { font-size: 14.5px; -webkit-line-clamp: 3; }
  .mm-row-excerpt { display: none; }
  .mm-row-meta { font-size: 11px; }
}

@media (max-width: 420px) {
  .mm-row { grid-template-columns: 84px 1fr; gap: 10px; }
  .mm-row-title { font-size: 14px; }
  .mm-lead-title { font-size: 21px; }
}

/* ════════════════════════════════════════════════════════════════
   TONAL BANDING

   Sampled from the reference site: its page is not grey. It is white, with
   short grey bands (#ededed) wrapping the ad slots and cross-promo blocks,
   plus one dark band. The grey is used as punctuation, not as a canvas.
   That banding is what chunks a long page and gives the eye rest stops, and
   it is what reads as "clean" rather than "bright".

   The tones come from var(--bg2) / var(--bg3), which the color system derives
   from whatever the page surface is set to, so these bands stay correct on a
   light or a dark palette instead of being pinned to a hex.
════════════════════════════════════════════════════════════════ */

/* ─── Ad slots sit in a band instead of floating on white ─── */
.mm-row-ad,
.mm-ad-inline,
#mm-main > .mm-ad-zone,
.mm-ad-leaderboard {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 20px 16px;
  text-align: center;
}
.mm-row-ad {
  /* Already inside the row rhythm, so it keeps the list's divider instead of
     doubling up on borders. */
  border-top: 1px solid var(--border);
  margin: 4px 0;
}
.mm-ad-leaderboard {
  max-width: none;
  padding: 22px 24px;
  margin-bottom: 28px;
}

/* Quiet label so the band reads as paid placement rather than editorial */
.mm-row-ad::before,
.mm-ad-inline::before {
  content: 'Advertisement';
  display: block;
  font-family: var(--fh);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: .65;
  margin-bottom: 10px;
}

/* ─── Sidebar widgets get a soft panel so they separate from the column ─── */
.mm-widget .widget-content,
.mm-widget > *:not(.widget-title):not(h3) {
  background: var(--bg2);
}

/* ─── Section headers get a hairline band above them ─── */
.mm-section-header {
  padding-top: 4px;
}

/* ─── Lead block reads as its own zone ─── */
.mm-lead-block {
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

/* ─── Promo banner already dark; keep it as the page's one dark band ─── */

@media (max-width: 768px) {
  .mm-row-ad,
  .mm-ad-inline,
  #mm-main > .mm-ad-zone,
  .mm-ad-leaderboard {
    /* Edge to edge on small screens, matching how the theme already treats
       images there. Mobile layout is otherwise untouched. */
    margin-left: -16px;
    margin-right: -16px;
    padding: 16px;
    border-radius: 0;
  }
}