/*
Theme Name: Movieguide 2026
Author: Movieguide®
Description: The 2026 Movieguide® redesign — a clean, family-first look with light/dark themes, acceptability badges, review shelves, a daily news river, and donation-focused Give pages. Built from the Claude Design "Movieguide Redesign v2" file.
Version: 1.7.0
Requires at least: 6.5
Tested up to: 7.0
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: movieguide-2026
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --bg: #ffffff;
  --ink: #000000;
  --ink80: rgba(0, 0, 0, 0.8);
  --ink56: rgba(0, 0, 0, 0.56);
  --ink40: rgba(0, 0, 0, 0.58);
  --ink26: rgba(0, 0, 0, 0.26);
  --ink16: rgba(0, 0, 0, 0.16);
  --ink08: rgba(0, 0, 0, 0.08);
  --card: #f4f4f4;
  --card2: #ffffff;
  --hair: #efeff0;
  --chipbd: rgba(0, 0, 0, 0.18);
  --glass: rgba(255, 255, 255, 0.82);
  --accent: #003bff;
  --fam-ink: #0b7a3e;
  --fam-bg: rgba(11, 122, 62, 0.10);
  --cau-ink: #8a6100;
  --cau-bg: rgba(170, 120, 0, 0.13);
  --ext-ink: #b3261e;
  --ext-bg: rgba(179, 38, 30, 0.10);
  --pill-active-bg: #000000;
  --pill-active-ink: #ffffff;
  --dark-band: #0a0a0a;
}

html[data-theme="dark"] {
  --bg: #000000;
  --ink: #ffffff;
  --ink80: rgba(255, 255, 255, 0.82);
  --ink56: rgba(255, 255, 255, 0.6);
  --ink40: rgba(255, 255, 255, 0.58);
  --ink26: rgba(255, 255, 255, 0.28);
  --ink16: rgba(255, 255, 255, 0.16);
  --ink08: rgba(255, 255, 255, 0.1);
  --card: rgba(255, 255, 255, 0.08);
  --card2: rgba(0, 0, 0, 0.35);
  --hair: rgba(255, 255, 255, 0.12);
  --chipbd: rgba(255, 255, 255, 0.24);
  --glass: rgba(0, 0, 0, 0.72);
  --fam-ink: #57d98a;
  --fam-bg: rgba(87, 217, 138, 0.14);
  --cau-ink: #f5c04e;
  --cau-bg: rgba(245, 192, 78, 0.15);
  --ext-ink: #ff7b73;
  --ext-bg: rgba(255, 123, 115, 0.14);
  --pill-active-bg: #ffffff;
  --pill-active-ink: #000000;
}

/* ============================================================
   BASE
   ============================================================ */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
}

body {
  font-family: 'Manrope', 'Helvetica Neue', -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--ink);
  min-height: 100vh;
  transition: background 0.25s ease, color 0.25s ease;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

img { max-width: 100%; height: auto; }

button, input, textarea, select { font-family: 'Manrope', 'Helvetica Neue', sans-serif; }

@keyframes mgFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.mg-wrap { max-width: 1240px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.mg-wrap--narrow { max-width: 860px; }
.mg-wrap--article { max-width: 760px; }

.mg-main { animation: mgFadeUp 0.35s ease; }
/* Templates whose <main> is itself the content wrapper open under the header.
   Canvas templates (a bare .mg-main) lay out their own spacing. */
.mg-main.mg-wrap { padding-top: 40px; }
/* The 404 recovery page leads with a kicker rather than a title, so it starts lower. */
body.error404 .mg-main.mg-wrap { padding-top: 64px; }
/* Trailing spacer that keeps listing pages off the footer. */
.mg-main__end { height: 64px; }
/* A title or section head used as the page header sits directly inside <main>. */
.mg-main > .mg-page-title,
.mg-main > .mg-section__head { margin-bottom: 28px; }
.mg-main > .mg-section__head .mg-section__sub { font-size: 15px; }
/* Off-screen field the share "copy link" execCommand fallback selects from. */
.mg-copy-field { position: fixed; opacity: 0; }

.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
}
.screen-reader-text:focus,
.mg-skip-link:focus {
  clip: auto;
  width: auto;
  height: auto;
  overflow: visible;
}
.mg-skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 1000;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  overflow: hidden;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2);
  font-weight: 700;
}

/* ============================================================
   HEADER / TOP NAV
   ============================================================ */
.mg-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: var(--glass);
  border-bottom: 1px solid var(--hair);
}

body.admin-bar .mg-header { top: 32px; }

.mg-header__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  height: 68px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.mg-header__logo { display: flex; align-items: center; gap: 10px; }
.mg-header__logo img { height: 40px; width: auto; display: block; }
html[data-theme="light"] .mg-header__logo img.mg-logo--filter { filter: brightness(0); }
html[data-theme="dark"] .mg-header__logo img.mg-logo--filter { filter: none; }

.mg-topnav { display: flex; gap: 6px; margin-left: auto; }
.mg-topnav ul { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }

.mg-pill {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 18px;
  border-radius: 80px;
  font-size: 14px;
  font-weight: 600;
  background: transparent;
  color: inherit;
}
.mg-pill:hover { background: var(--card); color: inherit; }
.mg-pill.is-active { background: var(--pill-active-bg); color: var(--pill-active-ink); }
.mg-pill.is-active:hover { background: var(--pill-active-bg); color: var(--pill-active-ink); }

.mg-header__actions { display: flex; align-items: center; gap: 10px; }

/* ---------- Expanding search field (header icon + mobile bottom nav) ---------- */
/* Closed, the icon is all there is: the form is exactly the size of its own
   button. Open, a border fades in around that icon and the form grows leftwards
   over the nav links it sits beside — how far is the one thing CSS cannot know,
   so theme.js measures the run to the logo (header) or to the bar's own padding
   (bottom nav) and sets --mg-search-w. */
.mg-searchbox {
  position: relative;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
}

/* Two classes deep on purpose. The movieguide-search plugin adds
   .mg-suggest-anchor { position: relative } to every form holding a search
   field, and its inline CSS prints after this sheet — at one class it would win
   the tie, drop this form back into normal flow, and the field would grow
   rightwards from its left edge instead of leftwards from the icon. */
.mg-searchbox .mg-searchbox__form {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  width: 44px;
  height: 44px;
  padding-left: 0;
  border: 1px solid transparent;
  border-radius: 80px;
  background: transparent;
  overflow: hidden;
  transition: width 0.19s cubic-bezier(0.22, 0.61, 0.36, 1),
              padding-left 0.19s cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 0.12s ease,
              background-color 0.12s ease;
}
.mg-searchbox.is-open .mg-searchbox__form {
  width: var(--mg-search-w, 300px);
  padding-left: 16px;
  border-color: var(--chipbd);
  /* Opaque, not --glass: this covers live nav links rather than page behind. */
  background: var(--bg);
  /* Closed, the pill masks the 0-wide field; open, it must not clip the
     suggestions panel the movieguide-search plugin appends to this form. */
  overflow: visible;
}

/* That panel drops below the field by default, which on the bottom bar would be
   off the bottom of the screen. (The plugin aims the same rule at a
   .mg-bnav-search wrapper this theme no longer renders.) */
.mg-searchbox--bottomnav .mg-suggest {
  top: auto;
  bottom: calc(100% + 10px);
}
.mg-searchbox--header.is-open .mg-searchbox__form { box-shadow: 0 6px 22px rgba(0, 0, 0, 0.12); }

/* The field takes whatever width the form has, so it is 0 wide when closed. */
.mg-searchbox__input,
.mg-searchbox__input:focus,
.mg-searchbox__input:focus-visible {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  opacity: 0;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  transition: opacity 0.14s ease;
}
.mg-searchbox.is-open .mg-searchbox__input { opacity: 1; }
.mg-searchbox__input::placeholder { color: var(--ink40); font-weight: 500; }
.mg-searchbox__input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* 42px, not 44px: the form is 44px wide closed and its border takes 1px a side,
   so this is the whole of the form's content box and the icon stays centred. */
.mg-searchbox__btn {
  flex: 0 0 42px;
  width: 42px; height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  line-height: 1;
  transition: background-color 0.14s ease, color 0.14s ease;
}
.mg-searchbox__btn svg { display: block; flex: none; }
.mg-searchbox__btn:hover { background: var(--card); color: var(--ink); }
.mg-searchbox__btn.is-active { background: var(--pill-active-bg); color: var(--pill-active-ink); }
/* Open, the form's own border is the frame — the icon drops its pill. */
.mg-searchbox.is-open .mg-searchbox__btn,
.mg-searchbox.is-open .mg-searchbox__btn:hover {
  background: transparent;
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .mg-searchbox__form,
  .mg-searchbox__input { transition: none; }
}

.mg-theme-toggle {
  width: 44px; height: 44px;
  border-radius: 80px;
  border: 1px solid var(--chipbd);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}
.mg-theme-toggle:hover { background: var(--card); }

.mg-btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 80px;
  background: var(--accent);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  border: none;
  cursor: pointer;
}
.mg-btn:hover { opacity: 0.88; color: #ffffff; }
.mg-btn--lg { padding: 13px 26px; font-size: 15px; }

/* ============================================================
   MOBILE BOTTOM NAV
   ============================================================ */
.mg-bottomnav {
  display: none;
  position: fixed;
  left: 50%;
  /* --mg-kb-lift is set by theme.js while the search field is open, so an
     on-screen keyboard cannot sit over the field being typed into. */
  transform: translate(-50%, calc(-1 * var(--mg-kb-lift, 0px)));
  transition: transform 0.18s ease;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 60;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: 80px;
  border: 1px solid var(--ink08);
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
  /* How many links there are is the Primary menu's decision, so the bar
     scrolls sideways instead of growing past the viewport. */
  max-width: calc(100vw - 24px);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.mg-bottomnav::-webkit-scrollbar { display: none; }
.mg-bottomnav .mg-pill { flex: 0 0 auto; white-space: nowrap; padding: 11px 20px; font-weight: 700; }
@media (max-width: 430px) { .mg-bottomnav { gap: 2px; padding: 5px; } }
/* The expanding field is absolutely placed and grows only as far as the bar's
   padding box, so the bar's overflow-x neither clips it nor gains a scroll. */
.mg-bottomnav .mg-searchbox { position: relative; }

@media (max-width: 760px) {
  .mg-topnav { display: none !important; }
  .mg-header__actions { display: none !important; }
  .mg-header__inner > .mg-theme-toggle { display: none !important; }
  .mg-bottomnav { display: flex !important; }
}

/* ============================================================
   SECTION HEADINGS
   ============================================================ */
.mg-section { padding-top: 56px; }
.mg-section--tight { padding-top: 40px; }
.mg-section--loose { padding-top: 64px; }
.mg-section--end { padding-bottom: 64px; }

.mg-section__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.mg-section__head h2 { margin: 0; font-size: 26px; font-weight: 800; }
.mg-section__sub { font-size: 14px; font-weight: 600; color: var(--ink40); }
.mg-section__more { margin-left: auto; font-size: 14px; font-weight: 500; color: var(--ink40); }
.mg-section__more:hover { color: var(--accent); }

/* Recirculation modules (related stories, popular, more like this) close an
   article or review, so they sit tighter and read a step down from a
   page-level section. After .mg-section__head h2, which they override. */
.mg-section--recirc { padding-top: 48px; }
.mg-section--recirc h2 { margin: 0 0 20px; font-size: 22px; font-weight: 700; }
.mg-section--recirc .mg-section__head h2 { margin: 0; }

.mg-page-title {
  margin: 0;
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* The two Paragraph styles registered in inc/blocks.php, so landing-page copy
   can be sized from the editor's Styles tab instead of by typing a class.
   Margins are zero because the block that holds them sets the rhythm — a Stack
   with a gap, usually. */
.is-style-lede {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--ink56);
}
.is-style-lede strong { color: var(--ink); }
.is-style-note {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--ink80);
}

/* ============================================================
   ACCEPTABILITY BADGES & DOTS
   ============================================================ */
.mg-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  align-self: flex-start;
  white-space: nowrap;
}
.mg-badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.mg-badge--family { background: var(--fam-bg); color: var(--fam-ink); }
.mg-badge--caution { background: var(--cau-bg); color: var(--cau-ink); }
.mg-badge--extreme { background: var(--ext-bg); color: var(--ext-ink); }
.mg-badge--excessive { background: #b3261e; color: #ffffff; }
/* Solid: the tier colour as the fill instead of as the ink, for a badge that
   labels a whole tinted surface rather than sitting on the page. The dot is
   ::before with currentColor, so it turns white with the text. */
.mg-badge--solid { color: #ffffff; }
.mg-badge--solid.mg-badge--family { background: var(--fam-ink); }
.mg-badge--solid.mg-badge--caution { background: var(--cau-ink); }
.mg-badge--solid.mg-badge--extreme { background: var(--ext-ink); }
.mg-badge--abhorrent { background: #501313; color: #ffffff; box-shadow: 0 0 0 2px var(--ext-bg); }
html[data-theme="dark"] .mg-badge--abhorrent { box-shadow: 0 0 0 2px rgba(255, 123, 115, 0.3); }
.mg-badge--lg { padding: 8px 16px; border-radius: 8px; font-size: 15px; font-weight: 800; }
.mg-badge--lg::before { width: 8px; height: 8px; }

.mg-dots { display: flex; gap: 3px; }
.mg-dots span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0.16;
}
.mg-dots span.is-on { opacity: 1; }

.mg-stars { font-size: 14px; letter-spacing: 2px; color: var(--ink56); }

/* ============================================================
   POSTER CARDS & SHELVES
   ============================================================ */
.mg-shelf {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.mg-shelf::-webkit-scrollbar { display: none; }

.mg-poster-card {
  flex: 0 0 172px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mg-poster-card:hover { opacity: 0.85; color: inherit; }
.mg-poster-card .mg-poster {
  width: 172px;
  height: 250px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  background: var(--card);
}
.mg-poster-card__meta { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.mg-poster-card__title { font-size: 14px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.mg-poster-card__sub { font-size: 12px; font-weight: 500; color: var(--ink56); overflow-wrap: anywhere; }

.mg-poster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
  gap: 28px 20px;
}
.mg-poster-grid .mg-poster-card { flex: none; }
.mg-poster-grid .mg-poster-card .mg-poster {
  width: 100%;
  height: auto;
  aspect-ratio: 172 / 250;
}

/* ============================================================
   NEWS RIVER & GRIDS
   ============================================================ */
.mg-news-2col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 40px;
  align-items: start;
}

.mg-topstory { display: flex; flex-direction: column; gap: 14px; }
.mg-topstory:hover { opacity: 0.9; color: inherit; }
.mg-topstory img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  background: var(--card);
}
.mg-topstory__kicker { display: flex; align-items: center; gap: 10px; }
.mg-topstory > span { display: flex; flex-direction: column; gap: 10px; }
.mg-kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: var(--accent); }
.mg-dot-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--ink26); flex-shrink: 0; }
.mg-cat-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink40);
}
.mg-topstory__title { display: block; font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; line-height: 1.22; }
.mg-topstory__excerpt { display: block; font-size: 15px; font-weight: 500; line-height: 1.6; color: var(--ink56); }
.mg-topstory__excerpt p { margin: 0; }

/* Lead story at the head of a news archive: image beside the text, larger
   headline, and a gap before the grid of everything else. */
.mg-topstory--lead {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 32px;
  align-items: center;
  margin-bottom: 48px;
}
.mg-topstory--lead > span { gap: 12px; }
.mg-topstory--lead .mg-topstory__title { font-size: clamp(22px, 2.6vw, 32px); line-height: 1.2; }

.mg-river { display: flex; flex-direction: column; }
.mg-river__item {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--hair);
}
.mg-river__item:hover { opacity: 0.8; color: inherit; }
.mg-river__when { flex: 0 0 72px; display: flex; flex-direction: column; gap: 3px; }
.mg-river__cat {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.2;
}
.mg-river__time { font-size: 12px; font-weight: 700; color: var(--ink40); font-variant-numeric: tabular-nums; }
.mg-river__body { display: flex; flex-direction: column; gap: 3px; }
.mg-river__title { flex: 1; font-size: 15px; font-weight: 600; line-height: 1.4; }
.mg-river__thumb {
  flex: 0 0 72px;
  width: 72px; height: 52px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  background: var(--card);
}
.mg-river__more { padding: 16px 0 0; font-size: 14px; font-weight: 600; color: var(--ink40); }
.mg-river__more:hover { color: var(--accent); }

.mg-news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 28px;
}
.mg-news-card { display: flex; flex-direction: column; gap: 12px; }
.mg-news-card:hover { opacity: 0.85; color: inherit; }
/* .mg-news-card__ph stands in for the image when a post has no thumbnail. */
.mg-news-card img,
.mg-news-card__ph {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  background: var(--card);
}
.mg-news-card__meta { display: flex; flex-direction: column; gap: 6px; }
.mg-news-card__cat {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.mg-news-card__title { font-size: 16px; font-weight: 600; line-height: 1.35; }
.mg-news-card__date { font-size: 12px; font-weight: 600; color: var(--ink40); }

/* ============================================================
   HOME: DAILY STRIP
   ============================================================ */
.mg-daily { border-bottom: 1px solid var(--hair); }
.mg-daily__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.mg-daily__hello { display: flex; flex-direction: column; gap: 4px; min-width: 220px; }
.mg-daily__greeting { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.mg-daily__date { font-size: 13px; font-weight: 600; color: var(--ink40); }
.mg-daily__verse { flex: 1; min-width: 240px; display: flex; align-items: flex-start; gap: 10px; }
.mg-daily__verse-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--accent);
  flex-shrink: 0;
  padding-top: 2px;
}
.mg-daily__verse-text { font-size: 14px; font-weight: 500; font-style: italic; line-height: 1.5; color: var(--ink80); display: block; }
.mg-daily__verse-ref { font-size: 12px; font-weight: 700; color: var(--ink40); display: block; margin-top: 2px; }
.mg-daily__pick {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 8px 8px;
  border-radius: 14px;
  background: var(--card);
  flex-shrink: 0;
}
.mg-daily__pick:hover { opacity: 0.9; color: inherit; }
.mg-daily__pick img {
  width: 42px; height: 60px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  background: var(--bg);
}
.mg-daily__pick-label { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; color: var(--ink40); display: block; }
.mg-daily__pick-title { font-size: 14px; font-weight: 700; line-height: 1.15; display: block; margin-top: 4px; }
.mg-daily__pick .mg-badge { background: transparent; padding: 0; margin-top: 4px; font-size: 10px; }

/* ============================================================
   HOME: DR. TEDDY ASK BAR
   ============================================================ */
.mg-teddy { background: var(--dark-band); color: #ffffff; }
.mg-teddy__inner {
  max-width: 1020px;
  margin: 0 auto;
  padding: 24px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mg-teddy__row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.mg-teddy__row img { height: 64px; width: auto; display: block; flex-shrink: 0; }
.mg-teddy__row h1, .mg-teddy__row .mg-teddy__h {
  margin: 0;
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  flex-shrink: 0;
  max-width: 240px;
}
.mg-teddy__form {
  flex: 1;
  min-width: 280px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 80px;
  padding: 6px 6px 6px 20px;
}
.mg-teddy__form input[type="search"],
.mg-teddy__form input[type="text"] {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
  min-width: 0;
}
.mg-teddy__form input::placeholder { color: rgba(255, 255, 255, 0.5); }
.mg-teddy__submit {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: #ffffff;
  font-size: 17px;
  cursor: pointer;
  flex-shrink: 0;
}
.mg-teddy__submit:hover { opacity: 0.88; }
.mg-teddy__chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.mg-teddy__chips a {
  padding: 6px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  font-weight: 600;
}
.mg-teddy__chips a:hover { background: rgba(255, 255, 255, 0.1); color: #ffffff; }

@media (max-width: 640px) {
  .mg-teddy__h { max-width: none; }
  .mg-teddy__chips { justify-content: center; }
}

/* ============================================================
   HOME: FAMILY-SAFE BAND
   ============================================================ */
.mg-famsafe {
  background: var(--fam-bg);
  border-radius: 20px;
  padding: 28px 28px 32px;
}
.mg-famsafe__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.mg-famsafe__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 80px;
  background: var(--fam-ink);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.mg-famsafe__head h2 { margin: 0; font-size: 26px; font-weight: 800; }
.mg-famsafe__sub { font-size: 14px; font-weight: 600; color: var(--ink56); }
.mg-famsafe__more { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--fam-ink); }
.mg-famsafe__more:hover { opacity: 0.8; color: var(--fam-ink); }
.mg-famsafe .mg-poster-card img.mg-poster { background: var(--bg); }

/* ============================================================
   HOME: LISTS CARDS
   ============================================================ */
.mg-lists-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 24px;
}
.mg-list-card {
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #111;
}
.mg-list-card:hover { opacity: 0.9; }
.mg-list-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}
.mg-list-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.75) 100%);
}
.mg-list-card__text {
  position: absolute;
  left: 20px; right: 20px; bottom: 18px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mg-list-card__kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.7); }
.mg-list-card__title { font-size: 19px; font-weight: 700; line-height: 1.25; }
.mg-list-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink40);
  margin-top: 12px;
}

/* ============================================================
   HOME: TOP 10 / RANKED LISTS
   ============================================================ */
.mg-service-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }

.mg-chip {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 12px;
  border: 1px solid var(--chipbd);
  background: transparent;
  color: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.mg-chip:hover { background: var(--card); color: inherit; }
.mg-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}
.mg-chip.is-active:hover { color: #ffffff; }
.mg-chip--sm { padding: 6px 14px; font-size: 13px; }

/* Multi-column rather than grid: ranks read top-to-bottom down each column
   (1-4, then 5-7, then 8-10) instead of left-to-right across rows. Still up
   to three columns, still collapsing to one on narrow screens. */
.mg-ranked {
  columns: 300px 3;
  column-gap: 48px;
}
.mg-ranked__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--hair);
  break-inside: avoid;
}
.mg-ranked__item:hover { opacity: 0.8; color: inherit; }
.mg-ranked__rank {
  flex: 0 0 32px;
  font-size: 20px;
  font-weight: 800;
  color: var(--ink26);
  font-variant-numeric: tabular-nums;
}
.mg-ranked__body { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.mg-ranked__title { font-size: 15px; font-weight: 700; }
.mg-ranked__sub { font-size: 12px; font-weight: 500; color: var(--ink40); }

.mg-tabpane[hidden] { display: none; }

/* ============================================================
   ADS
   ============================================================ */
.mg-ad { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mg-ad__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ink26);
  text-transform: uppercase;
}
.mg-ad__slot { width: 100%; max-width: 970px; text-align: center; }
.mg-ad__placeholder {
  width: 100%;
  max-width: 970px;
  height: 120px;
  border-radius: 14px;
  border: 1px solid var(--hair);
  background: repeating-linear-gradient(45deg, var(--card), var(--card) 12px, transparent 12px, transparent 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: monospace;
  font-size: 12px;
  color: var(--ink40);
}
.mg-ad__placeholder--box { max-width: 336px; height: 280px; }
.mg-ad--bare .mg-ad__placeholder { border: none; background: none; }

/* ============================================================
   NEWSLETTER BAND
   ============================================================ */
.mg-nlband {
  background: var(--card);
  border-radius: 16px;
  padding: 40px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.mg-nlband__text { display: flex; flex-direction: column; gap: 6px; max-width: 560px; }
.mg-nlband__title { font-size: 22px; font-weight: 800; }
.mg-nlband__sub { font-size: 14px; font-weight: 500; line-height: 1.6; color: var(--ink56); }
.mg-nlband__form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.mg-input {
  padding: 13px 18px;
  border-radius: 80px;
  border: 1px solid var(--chipbd);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  outline: none;
  min-width: 220px;
}

/* ============================================================
   REVIEWS BROWSE
   ============================================================ */
.mg-browse-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.mg-browse-head .mg-page-title { margin-right: 0; }
.mg-browse-head__finder { font-size: 14px; font-weight: 600; color: var(--accent); }
.mg-browse-head__finder:hover { opacity: 0.8; }

.mg-viewtoggle {
  margin-left: auto;
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--card);
  border-radius: 12px;
}
.mg-viewtoggle button {
  padding: 7px 16px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.mg-viewtoggle button.is-active { background: var(--pill-active-bg); color: var(--pill-active-ink); }

.mg-filters { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.mg-filters__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mg-filters__label {
  flex: 0 0 110px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink40);
}

.mg-rows { display: flex; flex-direction: column; }
[data-mg-view][hidden] { display: none !important; }
.mg-row-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--hair);
}
.mg-row-item:hover { opacity: 0.8; color: inherit; }
.mg-row-item__poster {
  flex: 0 0 56px;
  width: 56px; height: 80px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  background: var(--card);
}
.mg-row-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mg-row-item__title { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.mg-row-item__sub { font-size: 12px; font-weight: 500; color: var(--ink40); overflow-wrap: anywhere; }
.mg-row-item > .mg-badge { flex-shrink: 0; }

.mg-pagination { display: flex; gap: 8px; flex-wrap: wrap; padding: 40px 0 0; justify-content: center; }
.mg-pagination .page-numbers {
  padding: 9px 16px;
  border-radius: 12px;
  border: 1px solid var(--chipbd);
  font-size: 14px;
  font-weight: 600;
}
.mg-pagination .page-numbers.current { background: var(--accent); border-color: var(--accent); color: #fff; }
.mg-pagination .page-numbers:hover { background: var(--card); }
.mg-pagination .page-numbers.current:hover { background: var(--accent); }

/* ============================================================
   REVIEW DETAIL
   ============================================================ */
.mg-back { font-size: 14px; font-weight: 600; color: var(--ink40); display: inline-block; }
.mg-back:hover { color: var(--accent); }

.mg-review-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 48px;
  align-items: start;
  margin-top: 24px;
}
.mg-review-hero__posterwrap { max-width: 320px; }
.mg-review-hero__posterwrap img {
  width: 100%;
  border-radius: 16px;
  display: block;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}
.mg-review-hero__body { display: flex; flex-direction: column; gap: 20px; }
.mg-review-hero__type { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; color: var(--ink40); }
.mg-review-hero__title {
  margin: 0;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.mg-review-hero__facts {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink56);
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.mg-review-hero__facts .sep { width: 1px; height: 14px; background: var(--ink26); }
.mg-review-hero__verdict { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mg-audience-chip {
  padding: 8px 16px;
  border: 1px solid var(--chipbd);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
}
.mg-review-hero__quality { display: flex; align-items: center; gap: 10px; }
.mg-review-hero__quality .label { font-size: 13px; font-weight: 600; color: var(--ink40); }
.mg-review-hero__quality a { font-size: 13px; font-weight: 600; color: var(--accent); }
.mg-review-hero__lede { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.65; color: var(--ink80); }

.mg-content-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 12px;
}
.mg-content-card {
  background: var(--card);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mg-content-card__label { font-size: 12px; font-weight: 600; color: var(--ink56); }
.mg-content-card__value { font-size: 14px; font-weight: 600; }

.mg-share { display: flex; align-items: center; gap: 10px; }
.mg-share__label { font-size: 12px; font-weight: 700; color: var(--ink40); }
.mg-share a {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--chipbd);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
}
.mg-share a:hover { background: var(--card); color: inherit; }
.mg-share--sm a { width: 32px; height: 32px; font-size: 12px; }

.mg-hr { height: 1px; background: var(--hair); margin: 48px 0; border: none; }

.mg-review-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 64px;
  align-items: start;
}
.mg-review-cols h2 { margin: 0 0 8px; font-size: 22px; font-weight: 700; }
.mg-prose { min-width: 0; font-size: 15px; font-weight: 500; line-height: 1.7; color: var(--ink80); overflow-wrap: anywhere; }
.mg-prose p { margin: 0 0 14px; }
.mg-prose p:last-child { margin-bottom: 0; }
.mg-prose img { border-radius: 16px; }

.mg-accordion { display: flex; flex-direction: column; }
.mg-accordion__item { display: flex; flex-direction: column; border-bottom: 1px solid var(--hair); }
.mg-accordion__toggle {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
  text-align: left;
  width: 100%;
}
.mg-accordion__toggle:hover { opacity: 0.75; }
.mg-accordion__heading { margin: 0; font-size: 16px; font-weight: 700; flex: 1; }
.mg-accordion__chev { font-size: 11px; color: var(--ink40); flex-shrink: 0; }
.mg-accordion__panel { margin: 0; padding: 0 0 20px; font-size: 14px; font-weight: 500; line-height: 1.7; color: var(--ink80); }
.mg-accordion__panel[hidden] { display: none; }

.mg-details { display: flex; flex-direction: column; max-width: 420px; }
.mg-details h2 { margin: 0 0 8px; font-size: 22px; font-weight: 700; }
.mg-details__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hair);
}
.mg-details__k { font-size: 12px; font-weight: 600; color: var(--ink56); }
.mg-details__v { font-size: 14px; font-weight: 600; line-height: 1.5; }

/* ============================================================
   COMMENTS
   ============================================================ */
.mg-comments { padding: 56px 0 72px; max-width: 760px; }
.mg-comments__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; }
.mg-comments__head h2 { margin: 0; font-size: 22px; font-weight: 700; }
.mg-comments__count { font-size: 14px; font-weight: 600; color: var(--ink40); }

.mg-comment-form-box {
  background: var(--card);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}
.mg-comment-form-box textarea,
.mg-comment-form-box input[type="text"],
.mg-comment-form-box input[type="email"],
.mg-comment-form-box input[type="url"] {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--chipbd);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  outline: none;
  resize: vertical;
}
.mg-comment-form-box .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 10px; }
.mg-comment-form-box .comment-form-cookies-consent input { flex: 0 0 auto; margin-top: 4px; }
.mg-comment-form-box .form-submit { margin: 0; }
.mg-comment-form-box .mg-comment-note { font-size: 12px; font-weight: 500; color: var(--ink40); }

.mg-comment-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mg-comment-list .comment-body { display: block; position: relative; padding: 20px 0; border-bottom: 1px solid var(--hair); }
.mg-comment-list .avatar { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; }
.mg-comment-list .comment-author { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; }
.mg-comment-list .comment-author .says { font-size: 12px; font-weight: 500; color: var(--ink40); }
.mg-comment-list .comment-metadata { margin: -12px 0 0 52px; font-size: 12px; font-weight: 500; color: var(--ink40); }
.mg-comment-list .comment-content { min-width: 0; margin-left: 52px; font-size: 14px; font-weight: 500; line-height: 1.65; color: var(--ink80); }
.mg-comment-list .comment-content p { margin: 10px 0 0; }
.mg-comment-list .reply { margin: 8px 0 0 52px; }
.mg-comment-list .reply a { font-size: 12px; font-weight: 700; color: var(--ink56); }
.mg-comment-list .children { list-style: none; padding-left: 40px; margin: 0; }

/* ============================================================
   ARTICLE
   ============================================================ */
.mg-article-head { display: flex; flex-direction: column; gap: 18px; margin-top: 24px; }
.mg-article-head__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mg-cat-chip {
  padding: 4px 12px;
  background: var(--card);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
}
.mg-article-head__date { font-size: 13px; font-weight: 600; color: var(--ink40); }
.mg-article-title {
  margin: 0;
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.mg-article-figure { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.mg-article-figure img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  background: var(--card);
}
.mg-article-figure figcaption { font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--ink40); }

/* Standalone pages have no .mg-article-head flex column to space the title
   and lead image, so they carry their own rhythm. */
.mg-page-article > .mg-article-title,
.mg-page-article > .mg-article-figure { margin-bottom: 24px; }

.mg-byline {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hair);
}
.mg-byline__avatar {
  flex: 0 0 36px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  overflow: hidden;
}
.mg-byline__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.mg-byline__name { font-size: 14px; font-weight: 700; }
.mg-byline .mg-share { margin-left: auto; }

.mg-article-body { min-width: 0; font-size: 16px; font-weight: 500; line-height: 1.75; color: var(--ink80); overflow-wrap: anywhere; }
.mg-article-body p { margin: 0 0 20px; }
.mg-article-body img { border-radius: 16px; height: auto; }
.mg-article-body h2, .mg-article-body h3 { color: var(--ink); line-height: 1.3; }
.mg-article-body a { color: var(--accent); }
.mg-article-body blockquote {
  margin: 0 0 20px;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--accent);
  font-style: italic;
}
.mg-article-body iframe { max-width: 100%; border-radius: 16px; }
.mg-article-body > *,
.mg-prose > * { max-width: 100%; }
.mg-article-body :where(iframe, video, embed, object, input, select, textarea),
.mg-prose :where(iframe, video, embed, object, input, select, textarea),
.wp-video,
.wp-video-shortcode { max-width: 100% !important; }
.mg-article-body table,
.mg-prose table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}
.mg-article-body pre,
.mg-prose pre { max-width: 100%; overflow-x: auto; white-space: pre; }
.mg-page-links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 28px; font-weight: 700; }
.mg-page-links > a,
.mg-page-links > span:not(:first-child) { padding: 8px 12px; border: 1px solid var(--chipbd); border-radius: 10px; }

/* ============================================================
   SEARCH
   ============================================================ */
.mg-search-input {
  width: 100%;
  padding: 20px 26px;
  border-radius: 18px;
  border: 1px solid var(--chipbd);
  background: var(--card);
  color: var(--ink);
  font-size: 20px;
  font-weight: 600;
  outline: none;
}
.mg-search-empty {
  padding: 64px 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.mg-search-empty__title { font-size: 18px; font-weight: 700; }
.mg-search-empty__sub { font-size: 14px; font-weight: 500; color: var(--ink56); }
/* Recovery controls offered under an empty state (404 search box and chips). */
.mg-search-empty form { width: min(100%, 640px); margin-top: 12px; }
.mg-search-empty .mg-filters__row { justify-content: center; margin-top: 8px; }
.mg-search-section { padding-top: 40px; }
.mg-search-section h2 { margin: 0 0 18px; font-size: 20px; font-weight: 800; }
.mg-search-section--end { padding-bottom: 24px; }

/* ============================================================
   GIVE PAGE
   ============================================================ */
.mg-dark-hero { background: var(--dark-band); color: #ffffff; }
.mg-give-hero {
  max-width: 1240px;
  margin: 0 auto;
  padding: 64px 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 48px;
  align-items: center;
}
.mg-give-hero__text { display: flex; flex-direction: column; gap: 18px; }
/* margin: 0 throughout this section — these classes sit on core paragraph and
   heading blocks now that the Give page is editable in Gutenberg, so the
   flex/grid gap is the only spacing, never a browser default margin. */
.mg-dark-kicker { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.55); }
.mg-give-hero__title {
  margin: 0;
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.mg-give-hero__sub { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.65; color: rgba(255, 255, 255, 0.65); max-width: 520px; }
.mg-give-stats { display: flex; gap: 28px; flex-wrap: wrap; padding-top: 8px; }
.mg-give-stat { display: flex; flex-direction: column; gap: 2px; }
.mg-give-stat__n { margin: 0; font-size: 26px; font-weight: 800; }
.mg-give-stat__l { margin: 0; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.55); }

.mg-give-card {
  background: var(--bg);
  color: var(--ink);
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 480px;
  justify-self: center;
  width: 100%;
}
.mg-give-card__title { margin: 0; font-size: 22px; font-weight: 800; }
.mg-give-card__sub { font-size: 13px; font-weight: 500; color: var(--ink56); }
.mg-give-freqs { display: flex; gap: 8px; }
.mg-give-freqs .mg-chip { flex: 1; text-align: center; padding: 12px 0; font-weight: 700; }
.mg-give-amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mg-give-amounts .mg-chip { text-align: center; padding: 14px 0; font-size: 15px; font-weight: 700; }
.mg-give-impact {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fam-ink);
  background: var(--fam-bg);
  border-radius: 10px;
  padding: 10px 14px;
  line-height: 1.5;
}
.mg-give-cta {
  display: block;
  text-align: center;
  padding: 16px 0;
  border-radius: 12px;
  background: var(--accent);
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
  border: none;
  width: 100%;
  cursor: pointer;
}
.mg-give-cta:hover { opacity: 0.9; color: #ffffff; }
.mg-give-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink40);
  flex-wrap: wrap;
}
.mg-give-methods {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink40);
  border-top: 1px solid var(--hair);
  padding-top: 16px;
  flex-wrap: wrap;
}

/* Full-bleed testimonial band — the hairline across the page, and nothing else.
   What fills it is the plugin's: the Give page puts the [movieguide_quotes]
   shortcode here, and the plugin's own stylesheet gives that its centered
   column. The band deliberately imposes no width or padding of its own, so the
   quote's box carries its own measure and can't be knocked off centre by a
   wrapper between the two. */
.mg-quoteband { border-bottom: 1px solid var(--hair); }

/* The hand-written card grid, still used by the About / Mission pattern, whose
   cards lead with a stat (.mg-info-card__big) rather than a category label. The
   Give page uses the mg26/card-grid and mg26/card blocks further down instead. */
.mg-cards-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 24px;
}
.mg-info-card {
  background: var(--card);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mg-info-card__kicker { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; color: var(--accent); }
.mg-info-card__big { margin: 0; font-size: 26px; font-weight: 800; }
.mg-info-card__title { margin: 0; font-size: 17px; font-weight: 700; }
/* When the card leads with a stat, the title reads as its caption. */
.mg-info-card__big + .mg-info-card__title { font-size: 15px; }
.mg-info-card__text { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.6; color: var(--ink56); }

/* ============================================================
   CONTAINER BLOCKS
   The grey rounded surfaces, as real blocks — mg26/card-grid, mg26/card,
   mg26/panel, mg26/stack — instead of layout classes typed into a core Group's
   Additional CSS Classes field. Each takes any blocks as children.

   Because those children are plain core blocks carrying nothing of their own,
   the surface declares the type scale for the headings and paragraphs inside
   it. Every rule here is scoped to a block class: there is no bare h2/h3/p
   rule that could reach an article, a review or a widget elsewhere on the site.
   ============================================================ */
.mg-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--mg-grid-min, 260px)), 1fr));
  gap: var(--mg-grid-gap, 24px);
}

.mg-stack {
  display: flex;
  flex-direction: column;
  gap: var(--mg-stack-gap, 8px);
}

/* ---------- Card: one box, grey unless tinted ---------- */
.mg-card {
  background: var(--card);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* The optional tints (mg26_card_backgrounds()). Named after acceptability
   tiers rather than colours because that is what they mean: the same three
   surfaces the badges and the family-safe shelf use. */
.mg-card--family { background: var(--fam-bg); }
.mg-card--caution { background: var(--cau-bg); }
.mg-card--extreme { background: var(--ext-bg); }
/* A tinted card is a callout an editor reached for deliberately, not one tile
   in a grid of them, so its copy reads at body size and full strength. Two
   classes, so this beats the .mg-card p above whatever the load order. */
.mg-card--family p,
.mg-card--caution p,
.mg-card--extreme p { font-size: 15px; line-height: 1.65; color: var(--ink80); }
/* A card leads with its category over its claim, so Heading 3 is the small
   tracked label and Heading 4 the title beneath it. The sizes run against the
   levels, which is what an eyebrow is; document order stays h3 → h4, so the
   outline is still correct for anyone reading it with a screen reader. */
.mg-card h3 { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; color: var(--accent); }
.mg-card :is(h2, h4, h5, h6) { margin: 0; font-size: 17px; font-weight: 700; }
.mg-card p { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.6; color: var(--ink56); }

/* ---------- Panel: one large grey box, laid out in columns ---------- */
.mg-panel {
  background: var(--card);
  border-radius: 20px;
  padding: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--mg-grid-min, 240px)), 1fr));
  gap: var(--mg-grid-gap, 32px);
  align-items: start;
}
/* Heading 2 is the panel's own title; every level below it labels one column. */
.mg-panel h2 { margin: 0; font-size: 22px; font-weight: 800; }
.mg-panel :is(h3, h4, h5, h6) { margin: 0; font-size: 15px; font-weight: 700; }
.mg-panel p { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.6; color: var(--ink56); }
/* Artwork in a column is a core Image block, so the <figure> is the box that
   has to lose its margin. The height is restated one level deeper than the
   figure because core's .wp-block-image img { height: auto } ties with a
   one-class rule on specificity and would win on load order. */
.mg-panel .wp-block-image { margin: 0; }
.mg-panel .wp-block-image img { height: 84px; width: auto; }

/* ---------- Chips: a wrapping row of outlined pills (mg26/chips) ---------- */
.mg-pill-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.mg-pill-chips span {
  padding: 8px 16px;
  border: 1px solid var(--chipbd);
  border-radius: 80px;
  font-size: 13px;
  font-weight: 600;
}

/* ---------- CTA Band: text left, buttons right (mg26/cta-band) ---------- */
.mg-cta-band {
  background: var(--card);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.mg-cta-band strong,
.mg-cta-band p { margin: 0; font-size: 16px; font-weight: 700; }
/* The band's buttons are core Buttons, so an editor gets the link picker. Two
   classes beat core's one-class .wp-block-button__link whatever the load
   order, which is what lets the pill shape hold. */
.mg-cta-band .wp-block-buttons { gap: 10px; margin: 0; }
.mg-cta-band .wp-block-button__link {
  padding: 13px 26px;
  border-radius: 80px;
  background: var(--accent);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  border: none;
}

/* ============================================================
   NEWSLETTER PAGE
   ============================================================ */
.mg-nl-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 48px;
  align-items: center;
  padding-bottom: 64px;
}
.mg-nl-hero__text { display: flex; flex-direction: column; gap: 18px; }
.mg-nl-hero__title {
  margin: 0;
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.mg-checklist { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.mg-checklist div { display: flex; gap: 12px; align-items: baseline; }
.mg-checklist .tick { color: var(--fam-ink); font-weight: 800; }
.mg-checklist span:not(.tick) { font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--ink80); }

.mg-nl-card {
  background: var(--card);
  border-radius: 20px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 460px;
  width: 100%;
  justify-self: center;
}
.mg-nl-card img.mg-nl-card__mascot { height: 90px; width: auto; align-self: center; }
.mg-nl-card h2 { margin: 0; font-size: 20px; font-weight: 800; text-align: center; }
.mg-nl-card input[type="email"] {
  padding: 15px 20px;
  border-radius: 12px;
  border: 1px solid var(--chipbd);
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  outline: none;
}
.mg-nl-card button {
  padding: 15px 0;
  border-radius: 12px;
  border: none;
  background: var(--accent);
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
.mg-nl-card button:hover { opacity: 0.9; }
/* [mg26_newsletter_form class="mg-nl-card__form"] inside the signup card: the
   provider's fields stack full width instead of sitting on one row. */
.mg-nl-card__form { display: flex; flex-direction: column; gap: 14px; }
.mg-nl-card__form input:not([type="checkbox"]):not([type="radio"]),
.mg-nl-card__form select,
.mg-nl-card__form .mg-btn { width: 100%; min-width: 0; }
.mg-nl-card__form .mg-btn { text-align: center; }
/* The card only styles the email input; a name field and any provider select
   need to match it. */
.mg-nl-card__form input[type="text"],
.mg-nl-card__form input[type="tel"],
.mg-nl-card__form select {
  padding: 15px 20px;
  border-radius: 12px;
  border: 1px solid var(--chipbd);
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  outline: none;
}
.mg-nl-card__form label:not(.screen-reader-text) { font-size: 13px; font-weight: 600; color: var(--ink80); }
.mg-nl-card__fine { font-size: 12px; font-weight: 500; color: var(--ink40); text-align: center; line-height: 1.6; }

/* ============================================================
   MOVIEGUIDE TV
   ============================================================ */
.mg-tv-featured {
  position: relative;
  display: block;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 16 / 7;
  background: #111;
  margin-bottom: 40px;
}
.mg-tv-featured:hover { opacity: 0.92; }
.mg-tv-featured img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.6; }
.mg-tv-featured__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.8) 100%); }
.mg-tv-featured__play {
  position: absolute;
  left: 50%; top: 42%;
  transform: translate(-50%, -50%);
  width: 76px; height: 76px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mg-tv-featured__play::after {
  content: "";
  width: 0; height: 0;
  border-left: 22px solid #0a0a0a;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  margin-left: 6px;
}
.mg-tv-featured__text {
  position: absolute;
  left: 28px; right: 28px; bottom: 24px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mg-tv-featured__kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.7); }
.mg-tv-featured__title { font-size: clamp(20px, 2.4vw, 30px); font-weight: 800; line-height: 1.2; max-width: 720px; }

.mg-tv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 32px 24px;
  padding-bottom: 64px;
}
.mg-tv-card { display: flex; flex-direction: column; gap: 12px; }
.mg-tv-card:hover { opacity: 0.85; color: inherit; }
.mg-tv-card__thumb { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 9; background: #111; }
.mg-tv-card__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mg-tv-card__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mg-tv-card__play::after {
  content: "";
  width: 0; height: 0;
  border-left: 14px solid #ffffff;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 4px;
}
.mg-tv-card__meta { display: flex; flex-direction: column; gap: 5px; }
.mg-tv-card__cat { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; color: var(--accent); text-transform: uppercase; }
.mg-tv-card__title { font-size: 15px; font-weight: 700; line-height: 1.35; }

/* ============================================================
   ABOUT
   ============================================================ */
.mg-mission-hero {
  max-width: 860px;
  margin: 0 auto;
  padding: 72px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: center;
  align-items: center;
}
.mg-mission-hero h1 {
  margin: 0;
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.mg-mission-hero p { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.65; color: rgba(255, 255, 255, 0.65); max-width: 620px; }

.mg-donor-band {
  background: var(--card);
  border-radius: 20px;
  padding: 36px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.mg-donor-band img { height: 96px; width: auto; }
.mg-donor-band__text { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 6px; }
.mg-donor-band__title { font-size: 18px; font-weight: 800; }
.mg-donor-band__sub { font-size: 14px; font-weight: 500; line-height: 1.6; color: var(--ink56); }

/* ============================================================
   LIST DETAIL (Top 10 posts)
   ============================================================ */
.mg-listdetail__head { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.mg-listdetail__facts {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink40);
  padding-bottom: 20px;
  border-bottom: 1px solid var(--hair);
  flex-wrap: wrap;
}
.mg-listdetail__lede { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.6; color: var(--ink56); max-width: 640px; }

/* ============================================================
   FOOTER
   ============================================================ */
.mg-footer { margin-top: 80px; border-top: 1px solid var(--hair); }
.mg-footer__grid {
  max-width: 1240px;
  margin: 0 auto;
  padding: 48px 24px 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 36px;
}
.mg-footer__col { display: flex; flex-direction: column; gap: 10px; }
.mg-footer__col-h { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--ink40); }
.mg-footer__col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.mg-footer__col a { font-size: 14px; font-weight: 600; color: var(--ink80); }
.mg-footer__col a:hover { color: var(--accent); }
/* Any blocks a column is filled with: headings read as a wordmark, paragraphs as the tagline. */
.mg-footer__col :is(h1, h2, h3, h4, h5, h6) { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: 0; }
.mg-footer__col :is(h1, h2, h3, h4, h5, h6) sup { font-size: 10px; }
.mg-footer__col p { margin: 0; font-size: 13px; font-weight: 500; line-height: 1.6; color: var(--ink56); max-width: 280px; }
/* Widgets dropped into the footer widget areas inherit the column layout. */
.mg-footer__widget { display: flex; flex-direction: column; gap: 10px; }
.mg-footer__widget div { display: contents; }
/* Social icon row (mg26/social-links block). After .mg-footer__col a, which it overrides in the footer. */
.mg-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.mg-social a {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--chipbd);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink80);
}
.mg-social a:hover { background: var(--card); color: inherit; }
.mg-footer__legal { max-width: 1240px; margin: 0 auto; padding: 0 24px 96px; }
.mg-footer__legal-inner {
  border-top: 1px solid var(--hair);
  padding-top: 20px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink40);
}

/* Give form column (used by the Give page pattern). */
.mg-give-form { max-width: 760px; margin: 0 auto; }

/* ============================================================
   MOVIEGUIDE® LIST BODY (list posts, from repeater meta)
   ============================================================ */
.mg-toplist { display: flex; flex-direction: column; gap: 20px; margin-top: 32px; }
.mg-toplist__group { margin: 20px 0 0; font-size: 22px; font-weight: 800; }
.mg-toplist__item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 20px;
  border: 1px solid var(--hair);
  border-radius: 20px;
  background: var(--bg);
}
.mg-toplist__rank {
  flex: 0 0 auto;
  min-width: 40px;
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  color: var(--ink16, var(--ink40));
  text-align: center;
  padding-top: 4px;
}
.mg-toplist__posterlink { flex: 0 0 auto; }
.mg-toplist__poster,
.mg-toplist__posterlink img {
  width: 96px;
  height: 140px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.mg-toplist__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mg-toplist__title { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.25; }
.mg-toplist__title a { color: inherit; }
.mg-toplist__title a:hover { color: var(--accent); }
.mg-toplist__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mg-toplist__sub { font-size: 13px; font-weight: 600; color: var(--ink56); }
.mg-toplist__desc { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.6; color: var(--ink80); }
.mg-toplist__more { font-size: 14px; font-weight: 700; color: var(--accent); }
@media (max-width: 560px) {
  .mg-toplist__item { flex-wrap: wrap; }
  .mg-toplist__rank { min-width: 28px; font-size: 24px; }
  .mg-toplist__poster,
  .mg-toplist__posterlink img { width: 72px; height: 105px; }
}

/* Sections nested inside the article column (recirculation modules)
   inherit the column's width — no second gutter. */
.mg-wrap--article .mg-section.mg-wrap { padding-left: 0; padding-right: 0; }

/* ============================================================
   MISC / WP DEFAULTS
   ============================================================ */
.alignleft { float: left; margin: 0 20px 12px 0; }
.alignright { float: right; margin: 0 0 12px 20px; }
.aligncenter { display: block; margin: 0 auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 13px; color: var(--ink40); }
.sticky {} .bypostauthor {} .gallery-caption {}

/*
 * Group blocks: make WordPress's restored inner container transparent.
 *
 * On a theme without a theme.json — this one — core's
 * wp_restore_group_inner_container() puts the pre-5.9 <div
 * class="wp-block-group__inner-container"> back around a Group's children on
 * the front end, for backwards compatibility with themes that styled it. The
 * editor shows no such wrapper, so a Group whose class makes it a flex or grid
 * container (.mg-cards-3, .mg-panel--grid, .mg-give-hero, .mg-center-head …)
 * would lay out one full-width child on the front end and its real children in
 * the editor — the same content, two different pages.
 *
 * display: contents removes the wrapper from layout without removing it from
 * the DOM, so the children are the flex/grid items either way. Nothing here
 * styles the wrapper itself, so there is nothing to lose.
 */
.wp-block-group__inner-container { display: contents; }

/* ============================================================
   ACCESSIBILITY / NARROW VIEWPORTS
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

@media (max-width: 782px) {
  body.admin-bar .mg-header { top: 46px; }
}

@media (max-width: 480px) {
  .mg-wrap,
  .mg-header__inner { padding-left: 16px; padding-right: 16px; }
  .mg-bottomnav { bottom: max(10px, env(safe-area-inset-bottom)); max-width: calc(100vw - 16px); }
  .mg-bottomnav .mg-pill { padding: 10px 12px; font-size: 12px; }
  .mg-poster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .mg-row-item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 8px 12px;
    align-items: start;
  }
  .mg-row-item__poster { grid-row: 1 / span 2; width: 48px; height: 68px; }
  .mg-row-item > .mg-badge { grid-column: 2; justify-self: start; }
  .mg-content-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mg-byline { flex-wrap: wrap; }
  .mg-byline .mg-share { flex-basis: 100%; margin-left: 0; }
  .mg-tv-featured { aspect-ratio: auto; min-height: 260px; }
  .mg-tv-featured__play { top: 31%; width: 52px; height: 52px; }
  .mg-tv-featured__play::after { border-left-width: 15px; border-top-width: 10px; border-bottom-width: 10px; margin-left: 4px; }
  .mg-tv-featured__text { left: 16px; right: 16px; bottom: 16px; }
  .mg-tv-featured__title { font-size: 18px; }
  .mg-article-body .alignleft,
  .mg-article-body .alignright,
  .mg-prose .alignleft,
  .mg-prose .alignright { float: none; margin-left: 0; margin-right: 0; }
  .mg-famsafe { padding: 22px 18px 26px; }
  .mg-ranked { gap: 0; }
  .mg-review-hero,
  .mg-review-cols,
  .mg-give-hero,
  .mg-nl-hero { gap: 32px; }
  .mg-comment-list .children { padding-left: 20px; }
  .mg-nl-card,
  .mg-give-card { padding: 24px 20px; }
}

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

/* FlixPatrol chart credit */
.mg-ranked__credit { margin: 14px 4px 0; font-size: 12.5px; font-weight: 500; color: var(--ink56); }
.mg-ranked__credit a { color: inherit; font-weight: 700; }

/* ============================================================
   REVIEW PAGE — 2026 FORMAT
   (verdict box, sections, talk-about cards, byline)
   ============================================================ */
.mg-review-hero__dek { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.45; color: var(--ink80); }

.mg-verdict {
  background: var(--card);
  border-radius: 20px;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mg-verdict__head { display: flex; align-items: center; gap: 12px; }
.mg-verdict__kicker { font-size: 12px; font-weight: 800; letter-spacing: 0.14em; color: var(--accent); }
.mg-verdict__rule { flex: 1; height: 1px; background: var(--ink16); }
.mg-verdict__link { font-size: 12px; font-weight: 700; color: var(--ink40); flex-shrink: 0; }
.mg-verdict__link:hover { color: var(--accent); }
.mg-verdict__headline {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.mg-verdict__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 10px;
}
.mg-vcard {
  background: var(--card2);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mg-vcard__label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--ink40); }
.mg-vcard__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mg-vcard__score { font-size: 13px; font-weight: 700; color: var(--ink56); }
.mg-vcard__note { font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--ink56); }
.mg-vcard .mg-stars { font-size: 15px; color: var(--ink); }
.mg-stars__off { opacity: 0.2; }
.mg-verdict__rows { display: flex; flex-direction: column; gap: 9px; padding-top: 2px; }
.mg-vrow { display: flex; gap: 12px; align-items: baseline; }
.mg-vrow__k { flex: 0 0 92px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; color: var(--ink40); }
.mg-vrow__k--best { color: var(--fam-ink); }
.mg-vrow__k--not { color: var(--ext-ink); }
.mg-vrow__v { font-size: 14px; font-weight: 600; line-height: 1.5; min-width: 0; }
.mg-vrow__v--soft { font-weight: 500; color: var(--ink80); }

.mg-review-main { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.mg-rsection { display: flex; flex-direction: column; gap: 14px; }
.mg-rsection h2 { margin: 0; }
.mg-rsection__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mg-rsection__head h2 { margin: 0; }
.mg-rsection__note { margin: -8px 0 0; font-size: 13px; font-weight: 500; font-style: italic; line-height: 1.6; color: var(--ink56); }
.mg-rsection__sub { margin: -8px 0 0; font-size: 14px; font-weight: 500; color: var(--ink56); }
.mg-chip-nospoilers {
  padding: 4px 12px;
  border-radius: 80px;
  background: var(--fam-bg);
  color: var(--fam-ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.mg-codes { border-top: 1px solid var(--hair); padding-top: 14px; font-size: 12px; font-weight: 600; line-height: 1.7; color: var(--ink40); }
.mg-codes__list { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.mg-codes a { color: var(--accent); font-weight: 700; }

.mg-talk {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 14px;
}
.mg-talk__card {
  background: var(--card);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mg-talk__num { font-size: 20px; font-weight: 800; color: var(--ink26); }
.mg-talk__q { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.6; color: var(--ink80); flex: 1; }
.mg-talk__refs { font-size: 12px; font-weight: 700; color: var(--accent); }

.mg-verdict-restate {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 20px;
  background: var(--card);
  border-radius: 14px;
}
.mg-verdict-restate__line { font-size: 17px; font-weight: 800; }

.mg-byline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mg-byline__avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}
.mg-byline__name { font-size: 14px; font-weight: 700; }
.mg-byline__meta { font-size: 13px; font-weight: 600; color: var(--ink40); }

.mg-family-cta { font-size: 14px; font-weight: 700; color: var(--accent); }

.mg-how-works {
  background: var(--card);
  border-radius: 16px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}
.mg-how-works__kicker { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; color: var(--accent); }
.mg-how-works__line { font-size: 14px; font-weight: 700; line-height: 1.55; }
.mg-how-works__body { font-size: 13px; font-weight: 500; line-height: 1.6; color: var(--ink56); }