/* ==========================================================================
   Macro Insight detail — economic research publication.
   Same visual family as the Stock Insight editorial page (same palette, type and hairline language) but
   a separate stylesheet: this page does NOT depend on stock_insight_publication.css.
   Dark charcoal, warm ivory type, one restrained gold, Newsreader for headlines and reading text, sans for
   metadata and navigation, hairlines instead of cards. No gradients, no shadows.

   Namespace: .mip-*   (templates/insights/macro_insight_detail.html — and only that template).
   Shared CSS (base.css, articles.css, insight_common.css, macro_insight.css) is NOT edited or loaded here.
   The shared advisory include (_advisory_disclaimer.html, .advz-*) is re-skinned below under `.mip-page`
   (specificity 0,2,0 beats the component's own 0,1,0 rules); its markup, links and tracking are untouched.
   The article body has id="mipContent", not "stockInsightContent" / ".article-content": base.css colours
   those with ID/class selectors that would otherwise leak into the new design.
   ========================================================================== */

.mip-page {
    --mip-bg: #14181b;
    --mip-panel: #1a1f22;
    --mip-ink: #efe7d3;
    --mip-body: #cfc8b6;
    --mip-muted: #918c7d;
    --mip-gold: #c9a766;
    --mip-gold-dim: #a68a55;
    --mip-rule: rgba(239, 231, 211, .14);
    --mip-rule-strong: rgba(239, 231, 211, .3);
    --mip-serif: "Newsreader", Georgia, "Times New Roman", serif;
    --mip-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --mip-navbar: 101px;            /* body { padding-top } in base.css: the fixed global navbar */
    width: 100%;
    padding: 0 0 104px;
    background: var(--mip-bg);
    color: var(--mip-body);
    font-family: var(--mip-sans);
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}
.mip-page *, .mip-page *::before, .mip-page *::after { box-sizing: border-box; }
/* base.css sets `p, span { color: var(--text-color) }` directly on the elements: inherit instead */
.mip-page p, .mip-page span { color: inherit; }
.mip-page :focus-visible { outline: 2px solid var(--mip-gold); outline-offset: 3px; }
.mip-shell { width: min(100% - 48px, 1180px); margin: 0 auto; }

/* ---- Breadcrumb ---- */
.mip-crumbs { position: absolute; z-index: 3; top: 24px; left: 50%; width: min(100% - 48px, 1180px); margin: 0; transform: translateX(-50%); }
.mip-crumbs ol { display: flex; flex-wrap: wrap; align-items: baseline; margin: 0; padding: 0; list-style: none; color: var(--mip-muted); font: 500 .78rem/1.5 var(--mip-sans); letter-spacing: .01em; }
.mip-crumbs li { margin: 0; padding: 0; min-width: 0; }
.mip-crumbs li + li::before { content: "\203A"; padding: 0 .65rem; color: var(--mip-muted); }
.mip-page .mip-crumbs a { color: var(--mip-muted); text-decoration: none; }
.mip-page .mip-crumbs li:first-child a { color: var(--mip-gold); }
.mip-page .mip-crumbs a:hover { color: var(--mip-ink); text-decoration: underline; text-underline-offset: .2em; }
.mip-page .mip-crumbs [aria-current] span { display: inline-block; max-width: 56ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* ---- Editorial cover: masthead and image are one cinematic surface ---- */
.mip-cover { position: relative; width: 100vw; min-height: clamp(500px, 36vw, 660px); margin-left: calc(50% - 50vw); overflow: hidden; isolation: isolate; background: var(--mip-panel); }
.mip-cover::after { position: absolute; z-index: 1; inset: 0; content: ""; background: radial-gradient(ellipse 90% 90% at 7% 12%, rgba(4, 10, 13, .98) 0%, rgba(4, 10, 13, .93) 30%, rgba(4, 10, 13, .72) 52%, rgba(4, 10, 13, .4) 68%, rgba(4, 10, 13, .08) 84%, transparent 100%), linear-gradient(180deg, rgba(4, 10, 13, .28) 0%, rgba(4, 10, 13, .08) 28%, transparent 52%, transparent 72%, var(--mip-bg) 100%); pointer-events: none; }
.mip-cover.has-featured-image::after { background: radial-gradient(ellipse 90% 90% at 7% 12%, rgba(4, 10, 13, .97) 0%, rgba(4, 10, 13, .91) 30%, rgba(4, 10, 13, .69) 52%, rgba(4, 10, 13, .37) 68%, rgba(4, 10, 13, .07) 84%, transparent 100%), linear-gradient(180deg, rgba(4, 10, 13, .25) 0%, rgba(4, 10, 13, .07) 28%, transparent 52%, transparent 72%, var(--mip-bg) 100%); }
.mip-hero { position: absolute; z-index: 0; inset: 0; margin: 0; }
.mip-hero-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 58% 28%; background: var(--mip-panel); filter: saturate(1.04) brightness(1.06) contrast(1.02); transform: scale(1.002); }
.mip-masthead { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 clamp(36px, 6vw, 88px); align-items: start; width: min(100% - 48px, 1180px); min-height: clamp(500px, 36vw, 660px); margin: 0 auto; padding: clamp(60px, 3.6vw, 68px) 0 clamp(36px, 4vw, 52px); }
.mip-masthead-main { min-width: 0; max-width: 760px; }
.mip-page .mip-eyebrow { margin: 0 0 16px; color: var(--mip-gold); font: 700 .72rem/1.2 var(--mip-sans); letter-spacing: .22em; text-transform: uppercase; }
.mip-page .mip-title { max-width: 23ch; margin: 0; color: #f4eddf; font: 400 clamp(2.25rem, 2vw + .95rem, 3.45rem)/1.07 var(--mip-serif); letter-spacing: -.026em; text-wrap: balance; overflow-wrap: break-word; }
.mip-page .mip-standfirst { display: -webkit-box; max-width: 58ch; margin: 18px 0 0; overflow: hidden; color: rgba(244, 237, 223, .72); font: 400 clamp(.96rem, .22vw + .92rem, 1.05rem)/1.5 var(--mip-sans); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

.mip-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-top: 28px; color: rgba(239, 231, 211, .68); font: 500 .82rem/1.6 var(--mip-sans); }
.mip-page .mip-meta-author { display: inline-flex; align-items: center; gap: 10px; color: var(--mip-ink); font-weight: 600; }
.mip-page .mip-meta-author-name { color: var(--mip-ink); }
.mip-avatar { flex: none; width: 36px; height: 36px; border: 1px solid var(--mip-rule-strong); border-radius: 50%; object-fit: cover; }
.mip-page .mip-avatar-initials { display: inline-flex; align-items: center; justify-content: center; background: var(--mip-panel); color: var(--mip-gold); font: 500 .92rem/1 var(--mip-serif); letter-spacing: .02em; }
.mip-page .mip-meta-sep { color: var(--mip-rule-strong); user-select: none; }
.mip-page .mip-meta-date, .mip-page .mip-meta-read { color: var(--mip-muted); font-variant-numeric: tabular-nums; }

/* ---- Research scope: countries + editorial topics (rendered only when the article has them) ---- */
.mip-scope { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; padding-top: 24px; border-top: 1px solid var(--mip-rule-strong); }
.mip-scope-block + .mip-scope-block { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--mip-rule); }
.mip-page .mip-scope-title { margin: 0 0 14px; color: var(--mip-ink); font: 500 1.08rem/1.3 var(--mip-serif); letter-spacing: -.005em; }
.mip-countries, .mip-topics { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mip-countries li, .mip-topics li { margin: 0; padding: 0; }
.mip-page .mip-country { padding: 8px 15px; border: 1px solid var(--mip-rule-strong); border-radius: 6px; color: var(--mip-ink); font: 500 .8rem/1.2 var(--mip-sans); }
.mip-page .mip-topic { display: inline-block; padding: 7px 15px; border: 1px solid var(--mip-rule); border-radius: 999px; color: var(--mip-body); font: 500 .78rem/1.2 var(--mip-sans); text-decoration: none; transition: border-color .15s ease, color .15s ease; }
.mip-page .mip-topic:hover { border-color: var(--mip-gold-dim); color: var(--mip-gold); text-decoration: none; }

/* ---- Reading layout: article | sticky table of contents. After the article: contact + investor note, stocks mentioned, related reading ---- */
.mip-layout { display: block; padding-top: 30px; }
.mip-article { min-width: 0; }
/* After the article: one column, hairlines instead of cards */
.mip-end { display: flex; flex-direction: column; gap: 3.25rem; margin-top: 3.25rem; }
.mip-end > * { margin: 0; }
.mip-page .mip-block-title { margin: 0 0 6px; padding-bottom: 12px; border-bottom: 1px solid var(--mip-rule-strong); color: var(--mip-ink); font: 500 1.18rem/1.25 var(--mip-serif); letter-spacing: -.005em; }

/* Table of contents (built from the article's h2/h3 by JS; stays hidden when there are none).
   Quiet index: an eyebrow title, a hairline spine with a gold marker on the section being read, a number column so wrapped titles hang under their text. */
.mip-toc[hidden] { display: none; }
.mip-toc-head { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 0; padding: 14px 0; border: 0; border-top: 1px solid var(--mip-rule); border-bottom: 1px solid var(--mip-rule); background: none; color: var(--mip-gold); font: 700 .72rem/1.2 var(--mip-sans); letter-spacing: .2em; text-transform: uppercase; text-align: left; cursor: pointer; }
.mip-page .mip-toc-head span { color: inherit; }
.mip-toc-chevron { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .15s ease; }
.mip-toc.is-open .mip-toc-chevron { transform: rotate(-135deg); }
.mip-toc-body { display: none; padding: 14px 0 4px; }
.mip-toc.is-open .mip-toc-body { display: block; }
.mip-toc-body ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--mip-rule); }
.mip-toc-body li { margin: 0; padding: 0; }
.mip-page .mip-toc-body a { display: grid; grid-template-columns: 1.6em minmax(0, 1fr); column-gap: .35em; align-items: baseline; margin-left: -1px; padding: 7px 4px 7px 15px; border-left: 2px solid transparent; color: var(--mip-muted); font: 500 .78rem/1.4 var(--mip-sans); text-decoration: none; transition: color .15s ease, border-color .15s ease; }
.mip-toc-num { color: var(--mip-gold-dim); font-variant-numeric: tabular-nums; font-weight: 600; font-size: .72rem; }
.mip-toc-label { min-width: 0; overflow-wrap: break-word; }
/* sub-sections (h3): no number, one step in, lighter */
.mip-toc-body li.is-sub a { padding-top: 4px; padding-bottom: 4px; font-size: .74rem; color: rgba(145, 140, 125, .85); }
.mip-toc-body li.is-sub .mip-toc-num { font-size: .68rem; color: rgba(201, 167, 102, .72); }
.mip-page .mip-toc-body a:hover { color: var(--mip-ink); text-decoration: none; }
.mip-page .mip-toc-body a.is-active { border-left-color: var(--mip-gold); color: var(--mip-ink); }
.mip-page .mip-toc-body a.is-active .mip-toc-num { color: var(--mip-gold); }

/* ---- Prose (RichText from the CMS) ---- */
/* Reading scale tuned for scanning: macro articles are written as short stanzas, so the stock page's looser 1.18rem/1.78 made every one-line
   paragraph float alone. ~18.7px / 1.58 on a 700px measure keeps lines at roughly 75 characters; paragraph gap .9em stays clearly smaller than the section gap. */
.mip-prose { color: var(--mip-body); font: 400 clamp(1.02rem, .25vw + 1rem, 1.1rem)/1.58 var(--mip-serif); overflow-wrap: break-word; }
.mip-prose > :first-child { margin-top: 0; }
.mip-prose p { margin: 0 0 .9em; color: inherit; font: inherit; }
/* Drop cap: same rule as Market Insight — a gold serif capital on the article's FIRST paragraph (`p:first-of-type`, wherever it sits after a leading heading,
   image or block), never on headings, lists, tables or figures. Sized to sit exactly two lines deep (3.4em ≈ cap height of one line + the next). `.mip-lead` is set by the page script on the first real paragraph: signed-in editors get
   Mezzanine's hidden inline-edit <form> (and its own <p>) injected ahead of the content, which would otherwise break the direct-child selector. */
.mip-prose > p:first-of-type::first-letter,
.mip-prose p.mip-lead::first-letter { float: left; padding: .06em .13em 0 0; color: var(--mip-gold); font: 600 3.4em/.82 var(--mip-serif); text-transform: uppercase; }
.mip-prose h2, .mip-prose h3, .mip-prose h4 { scroll-margin-top: calc(var(--mip-navbar) + 18px); }
.mip-prose h2 { margin: 1.65em 0 .72em; color: var(--mip-ink); font: 500 clamp(1.55rem, 1vw + 1.18rem, 1.9rem)/1.18 var(--mip-serif); letter-spacing: -.02em; }
.mip-prose h3 { margin: 1.9em 0 .55em; color: var(--mip-ink); font: 500 1.24rem/1.28 var(--mip-serif); letter-spacing: -.012em; }
.mip-prose h2.mip-section-heading { display: grid; grid-template-columns: 2.45em minmax(0, 1fr); column-gap: .35em; align-items: baseline; padding-top: .55em; border-top: 1px solid var(--mip-rule-strong); }
.mip-prose h2.mip-section-heading::before { content: attr(data-section-number); color: var(--mip-gold); font-size: 1.45em; line-height: .8; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.mip-prose h3.mip-section-heading { display: grid; grid-template-columns: 2.35em minmax(0, 1fr); column-gap: .2em; align-items: baseline; color: var(--mip-gold); }
.mip-prose h3.mip-section-heading::before { content: attr(data-section-number); color: var(--mip-gold-dim); font-size: .82em; font-variant-numeric: tabular-nums; }
.mip-heading-label { min-width: 0; color: inherit; }
.mip-prose h4 { margin: 1.8em 0 .5em; color: var(--mip-gold); font: 700 .78rem/1.4 var(--mip-sans); letter-spacing: .14em; text-transform: uppercase; }
.mip-prose strong, .mip-prose b { color: var(--mip-ink); font-weight: 600; }
.mip-prose em, .mip-prose i { font-style: italic; }
.mip-prose a { color: var(--mip-gold); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(201, 167, 102, .5); text-underline-offset: .2em; }
.mip-prose a:hover { color: var(--mip-ink); text-decoration-color: var(--mip-gold); }
.mip-prose ul, .mip-prose ol { margin: 0 0 1.35em; padding-left: 1.3em; }
.mip-prose li { margin: 0 0 .5em; padding-left: .2em; color: inherit; }
.mip-prose li::marker { color: var(--mip-gold-dim); }
.mip-prose blockquote { margin: 2em 0; padding: .1em 0 .1em 1.4em; border-left: 2px solid var(--mip-gold-dim); color: var(--mip-ink); font-size: 1.07em; font-style: italic; }
.mip-prose blockquote p:last-child { margin-bottom: 0; }
.mip-prose hr { height: 0; margin: 2.4em 0; border: 0; border-top: 1px solid var(--mip-rule); background: none; }
.mip-prose iframe, .mip-prose video { max-width: 100%; }
.mip-prose pre { margin: 0 0 1.35em; padding: 1em 1.1em; overflow-x: auto; border: 1px solid var(--mip-rule); background: var(--mip-panel); color: var(--mip-body); font-size: .86rem; line-height: 1.6; }
.mip-prose code { font-size: .88em; }

/* Figures: charts and pictures are research exhibits — hairline frame, caption and source underneath in quiet sans.
   Nothing is generated here: only the article's own <img>/<figure>/<figcaption> are styled. */
.mip-prose img { display: block; max-width: 100%; height: auto; margin: 1.9em 0; border: 1px solid var(--mip-rule); }
.mip-prose figure { margin: 2.1em 0; }
.mip-prose figure img { margin: 0; }
.mip-prose figcaption { margin-top: .75em; color: var(--mip-muted); font: 500 .76rem/1.55 var(--mip-sans); font-style: normal; text-align: left; }
/* Real source notes already in the article ("Nguồn: …" — tagged by the page script, plus <small>) read as subordinate notes */
.mip-prose .mip-source, .mip-prose small { color: var(--mip-muted); font: 500 .76rem/1.55 var(--mip-sans); }
.mip-prose .mip-source { margin: -.7em 0 1.8em; }
.mip-prose img + .mip-source, .mip-prose figure + .mip-source, .mip-prose .mip-table-wrap + .mip-source { margin-top: -1.3em; }

/* Tables: wrapped in .mip-table-wrap by the page script so a wide data table scrolls inside its frame.
   Numbers right-aligned in tabular figures, first column is the label (left, wraps, stays visible while the periods scroll).
   `!important` only where CMS tables carry inline width/border/background that would otherwise win. */
.mip-table-wrap { margin: 2.2em 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--mip-rule); background: var(--mip-panel); scrollbar-width: thin; scrollbar-color: rgba(239, 231, 211, .3) transparent; }
.mip-table-wrap:focus-visible { outline: 2px solid var(--mip-gold); outline-offset: 2px; }
.mip-prose table { width: max-content !important; min-width: 100% !important; max-width: none !important; margin: 0 !important; border: 0 !important; border-collapse: separate !important; border-spacing: 0 !important; background: none !important; color: var(--mip-body); font: 400 .88rem/1.45 var(--mip-sans); font-variant-numeric: tabular-nums; }
.mip-prose caption { padding: .9rem 1rem .4rem; color: var(--mip-ink); font: 600 .84rem/1.4 var(--mip-sans); text-align: left; caption-side: top; }
.mip-prose th, .mip-prose td { padding: .7rem 1rem; border: 0 !important; border-bottom: 1px solid var(--mip-rule) !important; background: none !important; color: var(--mip-body) !important; text-align: right; vertical-align: top; white-space: nowrap; }
.mip-prose th:first-child, .mip-prose td:first-child { position: sticky; left: 0; z-index: 1; min-width: 11rem; max-width: 18rem; background: var(--mip-panel) !important; text-align: left; white-space: normal; }
.mip-prose thead th, .mip-prose tr:first-child th { color: var(--mip-gold-dim) !important; font: 700 .7rem/1.3 var(--mip-sans); letter-spacing: .08em; text-transform: uppercase; border-bottom-color: var(--mip-rule-strong) !important; }
.mip-prose tbody th { color: var(--mip-ink) !important; font-weight: 500; }
.mip-prose tr:last-child th, .mip-prose tr:last-child td { border-bottom: 0 !important; }
.mip-prose td p, .mip-prose th p { margin: 0; font: inherit; color: inherit; }

/* ---- Rail: related reading ---- */
.mip-related-list { margin: 0; padding: 0; list-style: none; }
.mip-related-list li { margin: 0; padding: 0; }
.mip-related-list li { border-bottom: 1px solid var(--mip-rule); }
.mip-page .mip-related-item { display: flex; align-items: flex-start; gap: 16px; padding: 16px 0; text-decoration: none; }
.mip-related-thumb { flex: none; width: 80px; height: 80px; object-fit: cover; background: var(--mip-panel); filter: saturate(.9); }
.mip-related-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mip-page .mip-related-title { color: var(--mip-ink); font: 500 1.02rem/1.38 var(--mip-serif); letter-spacing: -.005em; overflow-wrap: break-word; }
.mip-page .mip-related-item:hover .mip-related-title { color: var(--mip-gold); }
.mip-page .mip-related-date { color: var(--mip-muted); font: 500 .76rem/1.3 var(--mip-sans); font-variant-numeric: tabular-nums; }
.mip-page .mip-all-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--mip-gold); font: 600 .84rem/1.4 var(--mip-sans); text-decoration: none; }
.mip-page .mip-all-link span { color: inherit; transition: transform .18s ease; }
.mip-page .mip-all-link:hover { color: var(--mip-ink); }
.mip-page .mip-all-link:hover span { transform: translateX(4px); }

/* ---- Stocks mentioned: a compact row of tickers (a way into the Stock system, not a price board — no price, no %, no trading arrows, no long company names) ---- */
.mip-stock-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.mip-stock-list li { margin: 0; padding: 0; }
.mip-page .mip-stock { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 1px solid var(--mip-rule-strong); border-radius: 6px; text-decoration: none; transition: border-color .15s ease; }
.mip-page .mip-stock:hover { border-color: var(--mip-gold-dim); }
.mip-page .mip-stock-symbol { color: var(--mip-ink); font: 700 .8rem/1.2 var(--mip-sans); letter-spacing: .05em; }
.mip-stock-arrow { color: var(--mip-gold-dim); }
.mip-page .mip-stock:hover .mip-stock-arrow { color: var(--mip-gold); }

/* ---- Contact + investor note, right after the article — the same skin as Stock Insight (re-skin of _advisory_disclaimer.html; markup, links and contact tracking untouched) ---- */
.mip-advisory { margin-top: 3.25rem; }
.mip-page .mip-advisory .advz-wrap { margin: 0; }
.mip-page .mip-advisory .advz-card { gap: 18px; padding: 20px 22px; border: 1px solid var(--mip-rule); border-radius: 0; background: none; }
.mip-page .mip-advisory .advz-avatar { width: 44px; height: 44px; border: 1px solid var(--mip-gold-dim); border-radius: 0; background: none; color: var(--mip-gold); font: 500 1rem/1 var(--mip-serif); }
.mip-page .mip-advisory .advz-eyebrow { color: var(--mip-gold); }
.mip-page .mip-advisory .advz-desc { color: var(--mip-body); }
.mip-page .mip-advisory .advz-btn { padding: 9px 16px; border-radius: 0; font-size: .82rem; font-weight: 600; }
.mip-page .mip-advisory .advz-btn.is-secondary { border: 1px solid var(--mip-rule-strong); background: none; color: var(--mip-ink); }
.mip-page .mip-advisory .advz-btn.is-primary { border: 1px solid var(--mip-gold-dim); background: none; color: var(--mip-gold); font-weight: 600; }
.mip-page .mip-advisory .advz-btn:hover { border-color: var(--mip-gold); color: var(--mip-ink); text-decoration: none; }
.mip-page .mip-advisory .advz-disclaimer { padding: 2px 0 2px 16px; border-left: 1px solid var(--mip-rule-strong); border-radius: 0; background: none; color: var(--mip-muted); }
.mip-page .mip-advisory .advz-disclaimer strong { color: var(--mip-body); }

/* ---- Desktop: article + sticky table of contents (stays in view while reading) ---- */
@media (min-width: 992px) {
    .mip-layout.has-toc { display: grid; grid-template-columns: minmax(0, 720px) minmax(240px, 280px); grid-template-areas: "article aside"; column-gap: clamp(32px, 3vw, 48px); justify-content: start; align-items: start; }
    .mip-layout:not(.has-toc) .mip-article { max-width: 700px; }
    .mip-layout.has-toc .mip-article { grid-area: article; }
    .mip-layout.has-toc .mip-aside { grid-area: aside; align-self: stretch; }
    .mip-toc { position: sticky; top: calc(var(--mip-navbar) + 24px); max-height: calc(100vh - var(--mip-navbar) - 56px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(239, 231, 211, .25) transparent; }
    .mip-toc-head { padding: 0 0 14px; border-top: 0; border-bottom: 1px solid var(--mip-gold-dim); cursor: default; pointer-events: none; }
    .mip-toc-chevron { display: none; }
    .mip-toc-body { display: block; padding-top: 16px; }
}

/* ---- Tablet / mobile ---- */
@media (max-width: 991.98px) {
    .mip-masthead { gap: 34px 0; }
    .mip-toc { margin-bottom: 30px; }
}
@media (max-width: 767.98px) {
    .mip-page { padding: 0 0 72px; }
    .mip-shell { width: min(100% - 32px, 1180px); }
    .mip-crumbs { top: 20px; width: calc(100% - 48px); }
    /* the title sits right below: a trail of three would wrap and strand its separator */
    .mip-crumbs li[aria-current] { display: none; }
    .mip-cover, .mip-masthead { min-height: 560px; }
    .mip-masthead { padding: 82px 24px 30px; }
    .mip-page .mip-title { max-width: 19ch; font-size: clamp(2.15rem, 10vw, 3rem); }
    .mip-hero-img { object-position: 62% 30%; }
    .mip-layout { padding-top: 34px; }
    .mip-prose h2.mip-section-heading { grid-template-columns: 1.9em minmax(0, 1fr); column-gap: .28em; }
    .mip-prose h3.mip-section-heading { grid-template-columns: 2.15em minmax(0, 1fr); }
    .mip-prose > p:first-of-type::first-letter, .mip-prose p.mip-lead::first-letter { font-size: 3.3em; }
    .mip-prose th:first-child, .mip-prose td:first-child { min-width: 9rem; max-width: 12rem; }
    .mip-advisory { margin-top: 2.5rem; }
    .mip-end { gap: 2.75rem; margin-top: 2.75rem; }
    .mip-scope { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    .mip-page *, .mip-page *::before, .mip-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}