/* css-hex-guard: allow */
/*
 * COD-017 — article template styles.
 *
 * Extracted verbatim from the two near-identical inline <style> blocks
 * in `articles/article_tpl.php` (one for embed-in-shell, one for the
 * standalone body) so the same selectors live in a cacheable
 * stylesheet rather than ship in the HTML on every article render,
 * and the hex literals stop showing up in css-hex-guard's per-PHP
 * tally for that file.
 *
 * The only delta between the two original blocks was `.mm-aw`'s
 * layout. We default to the standalone layout and let
 * `.mm-aw.mm-aw--embedded` override for the in-shell case.
 *
 * Semantics unchanged. The visual diff against the previous inline
 * blocks should be empty.
 */

body{background:var(--color-bg-page);color:var(--color-text);font-family:var(--mm-font-body);margin:0}

/*
 * Phase C2 — skip-link landmark (audit-r2 P0-10). First focusable element
 * on every article surface so keyboard / screen-reader users can bypass
 * the marketing nav and breadcrumb chrome.
 */
.skip-link{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:8px;top:8px;width:auto;height:auto;padding:12px 16px;background:var(--mm-navy,#0B1220);color:#fff;z-index:1000;border-radius:6px;text-decoration:none;font-weight:700}

.mm-aw{max-width:860px;margin:0 auto;padding:0 20px 60px}
.mm-aw.mm-aw--embedded{margin:0 auto;padding:0 0 12px}
.mm-bc{font-size:13px;color:var(--mm-fg-muted);margin-bottom:14px}
.mm-bc a{color:var(--mm-fg-muted);text-decoration:none}.mm-bc a:hover{text-decoration:underline}
.mm-bc span{margin:0 5px}

/*
 * Phase C6 — articles surface inherits Direction A (audit-r2 P1 cluster D).
 *
 * The article masthead (.mm-ah) and the articles-index masthead (.mm-lh) get
 * the broadsheet-cream background, Cormorant Garamond display title, and the
 * JetBrains Mono eyebrow caps used elsewhere on Direction A surfaces. Article
 * titles cap below the homepage hero (clamp(48px, 5.8vw, 76px)) so the landing
 * hero stays loudest: per-article ceiling 72px, articles-index ceiling 72px.
 *
 * Cormorant Garamond + JetBrains Mono are loaded by lib/mm-design-system.css
 * (Google Fonts @import) which is pulled in via lib/app.css; we reference
 * --mm-font-display / system fallbacks rather than re-importing.
 */
/* audit-r4 P1-4-I3 close: --mm-broadsheet-cream token (was raw #FAF6EF).
   audit-r4 P1-4-I4 close: section-padding token (was bespoke 48px 20px 40px). */
.mm-article-masthead{background:var(--mm-broadsheet-cream,#FAF6EF);margin:0 0 28px;padding:var(--mm-section-padding-md,clamp(40px,6vw,64px)) clamp(20px,4vw,40px);border-bottom:1px solid rgba(11,18,32,.08)}
.mm-article-masthead .mm-article-masthead__inner{max-width:860px;margin:0 auto}
.mm-article-masthead .mm-bc{margin-bottom:22px}
.mm-article-masthead .mm-ah-eyebrow{display:inline-block;font-family:'JetBrains Mono','SF Mono',Menlo,Consolas,monospace;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--color-primary-700,#0B1220);margin:0 0 14px}
.mm-ah h1{font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;font-weight:700;font-size:clamp(36px,4.8vw,72px);letter-spacing:-0.01em;line-height:1.05;color:var(--mm-fg-strong,#0B1220);margin:0 0 16px;text-wrap:balance}
.mm-byl{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--mm-fg-muted);flex-wrap:wrap;margin-bottom:24px;font-family:var(--mm-font-body)}
.mm-byl a{color:var(--color-primary-700);font-weight:600;text-decoration:none}.mm-byl a:hover{color:var(--color-accent-500)}
.mm-byl-s{color:var(--mm-border-strong)}
.mm-ab{font-size:17px;line-height:1.72;color:var(--mm-fg-strong)}
.mm-ab h2{color:var(--color-primary-700);font-size:clamp(20px,2.8vw,26px);margin:36px 0 12px;border-bottom:2px solid var(--mm-border-subtle);padding-bottom:6px}
.mm-ab h3{color:var(--color-primary-700);font-size:20px;margin:28px 0 10px}
.mm-ab p{margin:0 0 18px}
.mm-ab ul,.mm-ab ol{margin:0 0 18px;padding-left:24px}
.mm-ab li{margin:6px 0}
/* audit-r4 P1-4-I9 close: was raw #0050B3 (Tailwind blue, off-brand).
   Articles body links now use navy — same as the rest of the surface. */
.mm-ab a{color:var(--mm-navy,#0E1F3B);text-decoration:underline}
.mm-ab a:hover{color:var(--mm-accent,#FF6810)}
.mm-ab strong{color:var(--mm-fg-strong)}
.mm-ab blockquote{border:1px solid var(--color-neutral-200);margin:24px 0;padding:16px 22px;background:var(--mm-navy-50);color:var(--mm-fg-strong);font-style:italic;border-radius:var(--mm-radius-card,8px)}
.mm-ab table{width:100%;border-collapse:collapse;margin:24px 0;font-size:15px;overflow-x:auto;display:block}
.mm-ab th{background:var(--color-primary-700);color:#fff;padding:10px 14px;text-align:left;white-space:nowrap}
.mm-ab td{padding:9px 14px;border-bottom:1px solid var(--mm-border);vertical-align:top}
.mm-ab tr:nth-child(even) td{background:var(--mm-bg-alt)}
/* audit-r4 P0-4-3 close: canonical .mm-disclosure rule (the inline <style>
   in components/affiliate-disclosure.php was deleted). No border-left
   absolute-ban violation; canonical brand orange via --mm-accent tokens. */
.mm-disclosure{background:var(--mm-accent-50,#FFF4EC);border:1px solid var(--mm-accent-tint,#FFE8D6);border-radius:var(--mm-radius-card,8px);padding:14px 18px;margin:0 0 22px;font-size:14px;line-height:1.55;color:var(--mm-fg-strong,#0B1220)}
.mm-disclosure strong{color:var(--mm-navy,#0E1F3B)}
.mm-disclosure a{color:var(--mm-navy,#0E1F3B);text-decoration:underline}
.mm-disclosure a:hover{color:var(--mm-accent,#FF6810)}
.mm-disclosure--compact{font-size:12px;padding:10px 14px;margin:0 0 14px}
.mm-disclosure--loyalty{margin:0 0 18px}

/* audit-r4 P1-4-I7 close: admin-preview banner (was inline amber hex on
   the article template). Uses --mm-pace-amber* tokens defined in r4 C1. */
.mm-admin-preview {
  margin: 0 0 18px;
  padding: 14px 18px;
  border-radius: var(--mm-radius-card, 8px);
  background: var(--mm-pace-amber-paper, #F8EAC8);
  border: 1px solid var(--mm-pace-amber, #C58A2B);
  color: var(--mm-pace-amber, #C58A2B);
  font-family: var(--mm-font-body);
  font-size: 14px;
  font-weight: 600;
}

/* audit-r4 P1-4-I8 close: last-reviewed line (was inline #64748b slate). */
.mm-reviewed {
  margin: 22px 0 0;
  font-size: 13px;
  text-align: center;
  color: var(--mm-fg-muted);
}
.mm-reviewed a {
  color: var(--mm-fg-muted);
  text-decoration: underline;
}
.mm-reviewed a:hover {
  color: var(--mm-accent);
}
.mm-cta{background:var(--color-primary-700);color:#fff;border-radius:var(--mm-radius-xl,16px);padding:26px 28px;margin:40px 0;text-align:center}
.mm-cta h3{margin:0 0 8px;color:#fff;font-size:20px}
.mm-cta p{margin:0 0 16px;color:var(--mm-fg-subtle);font-size:15px}
.mm-cta a{display:inline-block;background:var(--color-accent-500);color:#fff;padding:13px 24px;border-radius:var(--mm-radius-card,8px);text-decoration:none;font-weight:700}
.mm-cta a:hover{background:var(--color-accent-600)}
.mm-auth{background:var(--mm-bg-alt);border:1px solid var(--mm-border);border-radius:var(--mm-radius-xl,16px);padding:20px 22px;margin:36px 0;display:flex;gap:18px;align-items:flex-start}
.mm-auth-av{width:56px;height:56px;border-radius:50%;background:var(--color-primary-700);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;flex-shrink:0}
.mm-auth-av--photo{object-fit:cover;background:transparent}
.mm-auth-inf h4{margin:0 0 4px;font-size:15px}
.mm-auth-inf h4 a{color:var(--color-primary-700);text-decoration:none;font-weight:700}.mm-auth-inf h4 a:hover{color:var(--color-accent-500)}
.mm-auth-inf p{margin:0;font-size:14px;color:var(--mm-fg-muted);line-height:1.5}
.mm-rel{margin:36px 0 0;padding-top:28px;border-top:2px solid var(--mm-border)}
.mm-rel h2{color:var(--color-primary-700);font-size:20px;margin:0 0 16px}
.mm-rel-g{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.mm-rel-c{background:#fff;border:1px solid var(--mm-border);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:transform .15s ease,box-shadow .15s ease}
.mm-rel-c:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(15,23,42,.06)}
.mm-rel-c__visual{aspect-ratio:16/10;overflow:hidden;background:var(--mm-bg-alt);display:block}
.mm-rel-c__visual img{width:100%;height:100%;object-fit:contain;display:block}
.mm-rel-c__body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.mm-rel-c__meta{font-size:12px;color:var(--mm-fg-subtle);margin:0 0 6px}
.mm-rel-c__title{margin:0 0 8px;font-size:17px;line-height:1.35;color: var(--mm-navy)}
.mm-rel-c__title a{color: var(--mm-navy);text-decoration:none;font-weight:600}
.mm-rel-c__title a:hover{color: var(--mm-accent)}
.mm-rel-c__desc{color:var(--mm-fg-muted);font-size:14px;line-height:1.5;flex:1;margin:0 0 12px}
.mm-rel-c__read{margin-top:auto;font-size:13px;font-weight:600;color: var(--mm-accent);text-decoration:none}
.mm-rel-c__read:hover{text-decoration:underline}
@media(max-width:640px){.mm-auth{flex-direction:column}}
.mm-ab figure{margin:28px 0}
.mm-ab figure img{width:100%;height:auto;display:block;border-radius:var(--mm-radius-card,8px);box-shadow:0 2px 14px rgba(0,0,0,.08)}
.mm-ab figcaption{font-size:13px;color:var(--mm-fg-muted);text-align:center;padding:7px 0 0;font-style:italic}
.mm-ab .mm-hero-img{margin:0 0 32px}
.mm-ab .mm-hero-img img{border-radius:12px}
.mm-callout{background:var(--mm-navy-50,#F1F3F8);border:1px solid var(--mm-border,#E2E7F0);border-radius:var(--mm-radius-card,8px);padding:16px 20px;margin:24px 0;font-size:16px;color:var(--mm-fg-strong,#0B1220);line-height:1.6}
.mm-callout strong{color:var(--color-primary-700)}
.article-hero{margin:0 0 32px;aspect-ratio:16/9;overflow:hidden;border-radius:12px}
.article-hero img{width:100%;height:100%;object-fit:cover;display:block}
.mm-ab .article-figure{margin:28px 0}
.mm-ab .article-figure img{aspect-ratio:auto}

/*
 * V2-013 — articles/index.php inline blocks extracted to share the
 * cacheable stylesheet. The two near-identical .mm-* listing-grid
 * style blocks (embed-in-shell + standalone) plus the .mm-cat-cards
 * topic chooser are folded together; .mm-lw selector switches its
 * layout on the standalone body via the same default/embedded toggle
 * we already use for .mm-aw.
 */
.mm-lw { max-width: 1100px; margin: 0 auto; padding: 0 24px 60px; }
.mm-lw.mm-lw--embedded { margin: 0 auto; padding: 0 0 12px; }

/*
 * Phase C6 — articles-index masthead inherits Direction A. Same broadsheet
 * cream slab + Cormorant title as the per-article hero (.mm-ah), capped at
 * 72px so it stays under the homepage hero's 76px ceiling per audit-r2
 * Round 2: the landing hero must remain the loudest type on the site.
 */
/* audit-r4 P1-4-I3 + P1-4-I4 close: token both background and padding. */
.mm-articles-masthead { background: var(--mm-broadsheet-cream, #FAF6EF); margin: 0 0 32px; padding: var(--mm-section-padding-md, clamp(40px, 6vw, 64px)) clamp(20px, 4vw, 40px); border-bottom: 1px solid rgba(11, 18, 32, .08); }
.mm-articles-masthead .mm-articles-masthead__inner { max-width: 1100px; margin: 0 auto; }
.mm-articles-masthead .mm-bc { margin-bottom: 22px; }
.mm-articles-masthead .mm-lh-eyebrow { display: inline-block; font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--color-primary-700, #0B1220); margin: 0 0 14px; }
.mm-lh { margin-bottom: 0; }
.mm-lh h1 { font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; font-weight: 700; font-size: clamp(40px, 5.4vw, 72px); letter-spacing: -0.01em; line-height: 1.05; color: var(--mm-fg-strong, #0B1220); margin: 0 0 14px; text-wrap: balance; }
.mm-lh p { color: var(--mm-fg-muted); font-size: 17px; margin: 0; line-height: 1.55; max-width: 56ch; font-family: var(--mm-font-body); }
.mm-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--mm-border); margin-bottom: 24px; overflow-x: auto; }
.mm-tab { padding: 9px 18px; font-size: 14px; font-weight: 600; color: var(--mm-fg-muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.mm-tab.active { color: var(--color-primary-700); border-bottom-color: var(--color-primary-700); }
.mm-tab:hover:not(.active) { color: var(--color-primary-700); }
.mm-al { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.mm-ai { background: #fff; border: 1px solid var(--mm-border); border-radius: var(--mm-radius-lg, 12px); overflow: hidden; display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease; }
.mm-ai:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15, 23, 42, .06); }
.mm-ai-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.mm-ai .article-card__visual { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--mm-bg-alt); display: block; }
.mm-ai .article-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.mm-ai-m { font-size: 12px; color: var(--mm-fg-subtle); margin-bottom: 6px; }
.mm-ai h2 { margin: 0 0 8px; }
.mm-ai h2 a { color: var(--color-primary-700); text-decoration: none; font-size: 17px; line-height: 1.35; font-weight: 600; }
.mm-ai h2 a:hover { color: var(--color-accent-500); }
.mm-ai p { margin: 0 0 12px; color: var(--mm-fg-muted); font-size: 14px; line-height: 1.5; flex: 1; }
.mm-ai-c { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px; background: var(--mm-border-subtle); color: var(--color-primary-700); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 10px; }
.mm-ai-r { margin-top: auto; font-size: 13px; font-weight: 600; color: var(--color-accent-500); text-decoration: none; }
.mm-ai-r:hover { text-decoration: underline; }
.mm-empty { background: #fff; border: 1px solid var(--mm-border); border-radius: var(--mm-radius-lg, 12px); padding: 22px 24px; color: var(--mm-fg-muted); grid-column: 1/-1; }

.mm-cat-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 0 0 28px; }
.mm-cat-cards a { display: block; background: #fff; border: 1px solid var(--mm-border); border-radius: 10px; padding: 14px 16px; text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.mm-cat-cards a:hover { border-color: var(--mm-navy); transform: translateY(-1px); }
.mm-cat-cards strong { display: block; color: var(--mm-navy); font-size: 14px; margin-bottom: 2px; }
.mm-cat-cards span { color: var(--mm-fg-muted); font-size: 12px; }

/*
 * Phase C8 — References / Sources block (audit-r2 cluster F). Rendered only
 * when $articleMeta['sources'] is a non-empty array; missing source data
 * renders nothing. Numbered list aligns with the academic / E-E-A-T tone
 * established elsewhere on the article surface.
 */
.mm-article-sources { margin: 36px 0 0; padding-top: 28px; border-top: 1px solid var(--mm-border, #E2E7F0); }
.mm-article-sources h2 { color: var(--color-primary-700, #0B1220); font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; letter-spacing: -0.005em; margin: 0 0 16px; }
.mm-article-sources ol { margin: 0; padding-left: 24px; color: var(--mm-fg-strong, #0B1220); font-size: 15px; line-height: 1.62; }
.mm-article-sources li { margin: 0 0 10px; }
.mm-article-sources li:last-child { margin-bottom: 0; }
.mm-article-sources a { color: var(--color-primary-700, #0B1220); text-decoration: underline; text-underline-offset: 2px; }
/* audit-r4 P1-4-I9 close: fallback was wrong-orange #C5704B, now canonical brand orange. */
.mm-article-sources a:hover { color: var(--color-accent-500, #FF6810); }
.mm-article-sources .mm-article-sources__pub { color: var(--mm-fg-muted, #5C667A); }
/* audit-r4 P1-4-I9 close: was Tailwind slate-400 fallback; --mm-fg-subtle resolves to #697587 (WCAG AA on white). */
.mm-article-sources .mm-article-sources__date { color: var(--mm-fg-subtle, #697587); font-variant-numeric: tabular-nums; }