/* ARTICLE v3 (2026-11-12, Boss redesign Magna_Bureau_Article_Redesign.html)
   — the article page rebuilt to the prototype: sticky "In this story"
   sidebar + share, three readings as TABS with a source-balance bar,
   numbered key-point refs, mid-story single ad slot, consensus rows +
   what-to-watch grid, FAQ accordion, sources by lens, dark CTA band,
   related in the right rail. The old three-cards-side-by-side prism
   layout, the sticky share bar, the .paper/.wrap wrappers and the
   wide-desktop block are DELETED.
   The 780px article column STANDS (Boss order, same day): the grid is
   200px sidebar / minmax(0,780px) article / 300px rail, max-width
   1400px — never the full-viewport wide wrap.
   Root class is .mb3 (NOT .mb): the builder wraps the shared header /
   footer in <div class="mb"> and the band-hide rule targets
   div.mb>section.band, so .mb3 avoids every collision.
   Tokens are the prototype's. Article pages are pinned
   data-theme="light" (stamper t12), so the light values are what
   renders. */
.mb3{--ink:#0C111D;--text:#171C2B;--mute:#566074;--paper:#FBFBFC;
  --tint:#F0F3F8;--rule:#DCE1EA;--w:#234BB5;--e:#B4451F;--s:#0F7A5A;
  font-family:'Public Sans',system-ui,sans-serif;color:var(--text);
  background:var(--paper)}
.mb3 *{box-sizing:border-box}
.mb3 button{font:inherit;cursor:pointer}
.mb3 :focus-visible{outline:2px solid #1D3FA0;outline-offset:2px}
.mb3 [hidden]{display:none!important}

/* --- three-column grid: sidebar / 780px article / rail --- */
.mb3 .cols{max-width:1400px;margin:0 auto;padding:40px 24px 56px;
  display:grid;grid-template-columns:200px minmax(0,780px) 300px;
  gap:0 40px;justify-content:center}
.mb3 .art{min-width:0}

/* --- left sidebar: sticky TOC + share --- */
.mb3 .rl{align-self:start;position:sticky;top:24px;display:flex;
  flex-direction:column;gap:28px}
.mb3 .toch{font-size:13px;font-weight:600;color:var(--mute);margin:0 0 8px}
.mb3 .toc{display:flex;flex-direction:column;border-left:1px solid var(--rule)}
.mb3 .toc a{padding:9px 14px;font-size:14px;color:var(--mute);
  text-decoration:none;margin-left:-1px;border-left:2px solid transparent}
.mb3 .toc a:hover{color:var(--ink);border-left-color:var(--ink)}
.mb3 .share{display:flex;gap:8px}
.mb3 .ib{width:44px;height:44px;border-radius:8px;border:1px solid var(--rule);
  background:transparent;color:var(--ink);display:inline-flex;
  align-items:center;justify-content:center}
.mb3 .ib:hover{background:var(--tint)}

/* --- right rail: related only (no rail ads — one-slot law) --- */
.mb3 .rr{display:flex;flex-direction:column;gap:32px;min-width:0}
.mb3 .rel a{display:block;padding:14px 0;border-top:1px solid var(--rule);
  text-decoration:none;color:var(--ink);font-family:'Source Serif 4',Georgia,serif;
  font-weight:600;font-size:17px;line-height:1.3}
.mb3 .rel a:hover{text-decoration:underline}
.mb3 .rel small{display:block;font:500 13px 'Public Sans',sans-serif;
  color:var(--mute);margin-bottom:4px}

/* --- article header: section label, H1, dek, byline, hero --- */
.mb3 .sec{font-size:14px;font-weight:600;color:var(--mute)}
.mb3 .article-hero h1{font-family:'Source Serif 4',Georgia,serif;
  font-weight:700;font-size:clamp(32px,3.4vw,48px);line-height:1.1;
  letter-spacing:-.015em;margin:10px 0 16px;text-wrap:balance;color:var(--ink)}
.mb3 .dek{font-size:20px;line-height:1.5;color:#3B4458;margin:0 0 22px}
.mb3 .byline{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center;
  font-size:14px;color:var(--mute);padding:14px 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.mb3 .byline a{color:var(--ink);font-weight:600;text-decoration:none}
.mb3 .byline a:hover{text-decoration:underline}
.mb3 .byline b{font-weight:600}
.mb3 .dots{display:inline-flex;gap:6px;align-items:center}
.mb3 .hero{margin:24px 0 0}
.mb3 .hero img{display:block;width:100%;height:auto;aspect-ratio:16/9;
  object-fit:cover;border-radius:6px}
.mb3 .hero figcaption{font-size:13px;line-height:1.5;color:var(--mute);margin-top:8px}
.mb3 .hero figcaption .photo-caption{display:block}
.mb3 .hero figcaption .photo-credit{display:block;font-size:13px;
  line-height:1.5;color:var(--mute);margin:4px 0 0;white-space:normal}
.mb3 .mk{display:inline-block;width:10px;height:10px;flex:none}
.mb3 .mk.w{background:var(--w);border-radius:50%}
.mb3 .mk.e{background:var(--e)}
.mb3 .mk.s{background:var(--s);clip-path:polygon(50% 0,100% 100%,0 100%)}
.mb3 .mk.o{background:var(--mute);border-radius:50%}

/* --- section headings --- */
.mb3 .sh{font-family:'Source Serif 4',Georgia,serif;font-weight:700;
  font-size:28px;line-height:1.2;color:var(--ink);margin:48px 0 8px;
  letter-spacing:-.01em;scroll-margin-top:24px;text-wrap:balance}
.mb3 .sub{margin:0 0 4px;color:var(--mute);font-size:15px}
.mb3 .h3{font-family:'Source Serif 4',Georgia,serif;font-weight:700;
  font-size:23px;line-height:1.25;margin:36px 0 12px;color:var(--ink);
  text-wrap:balance}

/* --- key points --- */
.mb3 .kp{background:var(--tint);border-radius:8px;padding:20px 24px;margin:28px 0 0}
.mb3 .kp h2{font:600 15px 'Public Sans',sans-serif;color:var(--ink);margin:0 0 10px}
.mb3 .kp ul{margin:0;padding-left:20px;display:flex;flex-direction:column;
  gap:8px;font-size:16px;line-height:1.55}
.mb3 .r a{font-size:11px;font-weight:600;text-decoration:none;color:#1D3FA0;padding:0 2px}
.mb3 .r a:hover{text-decoration:underline}
.mb3 .mb-pill{display:inline-block;font-size:12px;color:var(--mute);
  border:1px solid var(--rule);border-radius:999px;padding:0 8px;
  margin-left:6px;white-space:nowrap;text-decoration:none}
.mb3 .mb-pill:hover{border-color:#1D3FA0;color:var(--text)}

/* --- prisms: tabs, one panel at a time, balance bar --- */
.mb3 .tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;margin-top:14px}
.mb3 .tab{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  text-align:left;padding:12px 14px;border:1px solid var(--rule);
  border-radius:8px;background:var(--paper);color:var(--text);min-height:60px}
.mb3 .tab:hover{background:var(--tint)}
.mb3 .tab .tn{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px}
.mb3 .tab .tc{font-size:13px;color:var(--mute)}
.mb3 .tab.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);
  background:var(--paper)}
.mb3 .mb-prisms .lens-block{border:1px solid var(--rule);border-radius:8px;
  padding:22px 24px;margin-top:8px;min-height:260px}
.mb3 .ph{font-family:'Source Serif 4',Georgia,serif;font-weight:700;
  font-size:22px;line-height:1.25;margin:0 0 10px;color:var(--ink)}
.mb3 .lens-summary{font-family:'Source Serif 4',Georgia,serif;
  font-size:17px;line-height:1.6;margin:0 0 12px}
.mb3 .pd{font-size:15px;line-height:1.55;margin:0;color:#2B3347}
.mb3 .pd b{color:var(--ink)}
.mb3 .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.mb3 .chip{font-size:13px;font-weight:500;padding:7px 11px;border-radius:999px;
  background:var(--tint);text-decoration:none;color:var(--ink)}
.mb3 .chip:hover{background:#E1E7F1}
.mb3 .bal{display:flex;gap:2px;height:8px;margin-top:18px;
  border-radius:4px;overflow:hidden}
.mb3 .balnote{font-size:13px;color:var(--mute);margin:8px 0 0}
.mb3 .balnote a{color:#1D3FA0}

/* --- story body --- */
.mb3 .body p{font-family:'Source Serif 4',Georgia,serif;font-size:19px;
  line-height:1.7;margin:0 0 1.1em;color:#1E2433}
.mb3 .body a{color:#1D3FA0;text-underline-offset:3px}
.mb3 .body b{font-family:'Public Sans',sans-serif;font-size:16px;
  font-weight:600;color:var(--ink)}
.mb3 .body .story-section h2{font-family:'Source Serif 4',Georgia,serif;
  font-weight:700;font-size:28px;line-height:1.2;color:var(--ink);
  margin:48px 0 8px;letter-spacing:-.01em;text-wrap:balance}
.mb3 .body .story-section h3{font-family:'Source Serif 4',Georgia,serif;
  font-weight:700;font-size:23px;line-height:1.25;margin:36px 0 12px;
  color:var(--ink);text-wrap:balance}

/* --- story pull-quote (kept from v2 — Boss's Nov 12 UK decision) --- */
.mb3 .mb-pull{margin:24px 0;padding:0 0 0 18px;border-left:4px solid #1D3FA0;
  font-family:'Source Serif 4',Georgia,serif;font-size:24px;line-height:1.35;
  max-width:30ch;color:var(--ink)}

/* --- single ad slot (inside the story; the head <style> hides it
   until .is-filled, .is-empty hides it again — this file sets NO
   display property, so the collapse mechanism is never overridden) --- */
.mb3 .ad{background:var(--tint);border:1px solid var(--rule);
  flex-direction:column;align-items:center;gap:6px;padding:8px 0 0;
  font-size:11px;color:var(--mute);max-width:100%}
.mb3 .ad.awide{margin:36px 0}

/* --- consensus: rows + what-to-watch grid --- */
.mb3 details.mb-fold.consensus>summary{cursor:pointer}
.mb3 .fx{border-top:1px solid var(--ink);margin-top:12px}
.mb3 .fr{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;
  padding:18px 0;border-bottom:1px solid var(--rule)}
.mb3 .fr h3{margin:0;font:600 15px 'Public Sans',sans-serif;color:var(--ink)}
.mb3 .fr ul{margin:0;padding-left:18px;display:flex;flex-direction:column;
  gap:8px;font-size:16px;line-height:1.55}
.mb3 .wt{display:grid;grid-template-columns:132px minmax(0,1fr);
  border-top:1px solid var(--ink);margin-top:12px}
.mb3 .wt .d{font-weight:600;font-size:15px;color:var(--ink);
  padding:14px 16px 14px 0;border-bottom:1px solid var(--rule)}
.mb3 .wt .t{padding:14px 0;border-bottom:1px solid var(--rule);
  font-size:16px;line-height:1.5}

/* --- FAQ accordion --- */
.mb3 .q{border-top:1px solid var(--rule)}
.mb3 .q:last-child{border-bottom:1px solid var(--rule)}
.mb3 .qb{width:100%;display:flex;justify-content:space-between;
  align-items:center;gap:16px;text-align:left;background:none;border:0;
  padding:16px 0;font-family:'Source Serif 4',Georgia,serif;font-size:19px;
  font-weight:600;line-height:1.3;color:var(--ink);min-height:56px}
.mb3 .qb svg{flex:none;width:20px;height:20px;transition:transform .15s;stroke:currentColor;fill:none;stroke-width:2}
.mb3 .qb[aria-expanded="true"] svg{transform:rotate(180deg)}
.mb3 .qa{margin:0 0 18px;font-family:'Source Serif 4',Georgia,serif;
  font-size:17px;line-height:1.65;max-width:62ch}

/* --- sources by lens --- */
.mb3 .sg{margin-top:22px}
.mb3 .sgh{display:flex;align-items:center;gap:8px;font-weight:600;
  font-size:15px;color:var(--ink);padding-bottom:8px;
  border-bottom:1px solid var(--ink)}
.mb3 .sr{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:12px;
  padding:12px 0;border-bottom:1px solid var(--rule);font-size:15px;
  align-items:baseline;scroll-margin-top:24px}
.mb3 .sr .n{font-weight:600;color:var(--mute);font-variant-numeric:tabular-nums}
.mb3 .sr a{color:#1D3FA0}
.mb3 .sr .dt{color:var(--mute);font-size:14px;white-space:nowrap}
.mb3 .sr:target{background:#FFF3C4}

/* --- CTA band + discussion --- */
.mb3 .cta{margin-top:48px;padding:24px;background:var(--ink);color:#fff;
  border-radius:8px;display:flex;flex-wrap:wrap;gap:16px 24px;
  align-items:center;justify-content:space-between}
.mb3 .cta p{margin:0;font-family:'Source Serif 4',Georgia,serif;
  font-size:20px;line-height:1.35;max-width:30ch}
.mb3 .cta .acts{display:flex;flex-wrap:wrap;gap:8px}
.mb3 .cta a.btn{display:inline-flex;align-items:center;min-height:44px;
  padding:0 18px;border-radius:8px;background:#fff;color:var(--ink);
  font-weight:600;font-size:15px;text-decoration:none}
.mb3 .cta a.btn.ghost{background:transparent;color:#fff;border:1px solid #3A4560}
.mb3 .mb-discuss{margin:24px 0}
.mb3 .mb-discuss-btn{width:100%;margin-top:24px;min-height:52px;display:flex;
  align-items:center;justify-content:center;gap:10px;border:1px solid var(--rule);
  border-radius:8px;background:var(--paper);color:var(--ink);
  font-weight:600;font-size:15px}
.mb3 .mb-discuss-btn:hover{background:var(--tint)}
.mb3 .mb-discuss-skel{min-height:140px;border:1px solid var(--rule);
  border-radius:8px;padding:16px;margin-top:12px}
.mb3 .mb-discuss-skel .sk{height:14px;border-radius:4px;background:var(--rule);
  margin:10px 0;opacity:.7}
@media (prefers-reduced-motion:no-preference){
  .mb3 .mb-discuss-skel .sk{animation:mb-skel-pulse 1.4s ease-in-out infinite}
  @keyframes mb-skel-pulse{0%,100%{opacity:.45}50%{opacity:.9}}
}
.mb3 .mb-discuss-skel .mfeed-status{font-size:14px;color:var(--mute)}
.mb3 .mfeed-thread-err{color:var(--e);font-size:15px;line-height:1.55;
  margin:0 0 12px}
.mb3 .read-next{margin-top:16px;font-size:15px}
.mb3 .read-next a{color:#1D3FA0}

/* --- duplicate footer band (Boss 2026-11-12): the shared footer
   <section class="band"> ("The news starts free…") sits after </main>
   in a div.mb and duplicates the article's own .cta. Hide the
   visual block only — the band's DOM and display logic are untouched. */
body[data-article] div.mb>section.band{display:none}

/* --- breakpoints: the sidebar becomes a full-width strip above the
   article at <=1240px (a deliberate deviation from the prototype,
   which hides it) so mobile readers keep sharing and navigation --- */
@media (max-width:1240px){
  .mb3 .cols{grid-template-columns:minmax(0,780px) 300px}
  .mb3 .rl{grid-column:1/-1;position:static;flex-direction:row;
    flex-wrap:wrap;align-items:center;gap:12px 24px}
  .mb3 .rl nav{flex:1;min-width:280px}
  .mb3 .rl .toch{margin:0 0 4px}
  .mb3 .toc{flex-direction:row;flex-wrap:wrap;border-left:0;gap:4px 8px}
  .mb3 .toc a{border-left:0;margin-left:0;padding:6px 10px}
  .mb3 .toc a:hover{border-left-color:transparent;text-decoration:underline}
}
@media (max-width:900px){
  .mb3 .cols{grid-template-columns:minmax(0,1fr);padding-top:24px}
  .mb3 .rr{margin-top:40px}
}
@media (max-width:520px){
  .mb3 .cols{padding-left:16px;padding-right:16px}
  .mb3 .tab .tc{display:none}
  .mb3 .tab{padding:10px;min-height:48px}
  .mb3 .fr{grid-template-columns:minmax(0,1fr);gap:8px}
  .mb3 .wt{grid-template-columns:96px minmax(0,1fr)}
  .mb3 .dek{font-size:18px}
  .mb3 .sr{grid-template-columns:24px minmax(0,1fr)}
  .mb3 .sr .dt{grid-column:2}
}