/* ============================================================================
   megatrend.css — "taste" theme for Megatrend content pages.
   Reskins the SAME mt-* markup the editorial lessons already emit (so no content
   fragment changes); only the stylesheet swaps. Imports the shared DNA from
   taste-core.css — this file adds ONLY editorial components + a Thai body face
   + the per-trend accent QUARANTINE.

   Taste translation of the NYT/newsprint original:
   - canvas → warm ivory; pure #000 reserved for full-bleed slabs
   - body/display → Noto Sans + Noto Sans Thai + Noto Sans JP across EN/TH/JA
   - SECTIONING by color-block, not rules: hero / key-players / footer are black slabs
   - per-trend colour QUARANTINED into tiles (stat, term, chart, figure, player tag,
     drop-cap, svg accent) — chrome (links, headings, nav, breadcrumb) stays neutral
   - one shadow, on the floating nav only; every content tile is flat
   ============================================================================ */
@import url('../../../css/taste-core.css?v=6');   /* shared DNA: tokens · base · .serif · pill nav */
@import url('../../../css/site-nav.css?v=14');   /* AGAIN, after taste-core: its older pill-nav primitive (flex row, 64px
                                                       logo, grey pill) must not win over the site nav → same nav as every page */
@import url('../../../css/mdx-hero.css?v=5');   /* the shared "More" button (.exh-more) — ONE look on every page */
@import url('./palette.css');                 /* per-trend --mt-accent via [data-trend] */

:root{
  /* map the editorial vars onto the taste palette; --mt-accent stays per-trend (palette.css) */
  --mt-ink:        var(--dark-warm);
  --mt-ink-soft:   #5b554e;
  --mt-muted:      var(--muted);
  --mt-rule:       #e7e3db;
  --mt-rule-strong:var(--border-medium);
  --mt-accent-ink:  color-mix(in srgb, var(--mt-accent) 78%, var(--dark-warm) 22%);
  --mt-accent-tint: color-mix(in srgb, var(--mt-accent) 12%, var(--bg));
  --mt-accent-tint2:color-mix(in srgb, var(--mt-accent) 20%, var(--bg));
  --mt-accent-line: color-mix(in srgb, var(--mt-accent) 45%, var(--bg));

  --font-sans:  'Noto Sans','Noto Sans Thai','Noto Sans JP',system-ui,sans-serif;
  --font-head:  'Noto Sans','Noto Sans Thai','Noto Sans JP',system-ui,sans-serif;
  --font-serif: 'Noto Sans','Noto Sans Thai','Noto Sans JP',system-ui,sans-serif;
  --font-label: 'Noto Sans','Noto Sans Thai','Noto Sans JP',system-ui,sans-serif;

  --measure: 39rem;   /* reading column */
  --wide:    62rem;   /* figures / charts */
}

/* ---- base ---- */
body.mt-lesson{
  color: var(--mt-ink); font-family: var(--font-sans); font-weight: 400;
  font-size: 1.06rem; line-height: 1.85;
}
.mt-lesson :is(img,svg):not(:where(.nav-wrap *)){ max-width:100%; height:auto; }   /* lesson media only — never the nav's icons; :where keeps
   the specificity the old `.mt-lesson svg` had (0,1,1) → component rules like .mt-subexp .se-legend-g{max-width:300px} still win */
/* the nav keeps the site's own type (the lesson body is 1.06rem / 400 / warm ink → it leaked into the nav) */
.mt-lesson .nav-wrap{ font-size:1rem; font-weight:500; color:#000; line-height:normal; }
/* prose links: neutral chrome — warm underline, contained tint on hover (no accent text) */
.mt-prose a{ color: var(--mt-ink); text-decoration:none; border-bottom:1px solid var(--mt-rule-strong); }
.mt-prose a:hover{ background: var(--mt-accent-tint); border-color: var(--mt-accent-line); }

/* full-bleed container — slabs span edge-to-edge, reading blocks re-center themselves */
.mt-shell{ max-width:none; margin:0; padding:0 0 0; }

/* ---- breadcrumb (sits below the fixed pill nav, on ivory) ---- */
.mt-topbar{ max-width:none; padding:7rem 1.5rem 0; display:flex; gap:.6rem; }
.mt-breadcrumb{ font-family:var(--font-label); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--mt-muted); display:flex; flex-wrap:wrap; gap:.45rem; }
.mt-breadcrumb a{ color:var(--mt-muted); text-decoration:none; }
.mt-breadcrumb a:hover{ color:var(--mt-ink); }
.mt-breadcrumb .here{ color:var(--mt-ink); }
.mt-breadcrumb .sep{ color:var(--dim); }

/* ====================== HERO — the compact page hero (same structure as theme · asset · gics) ======================
   [disc]  Megatrend › parent (small, one line, …)
           NAME
           the hook (subtitle)
   [deck — 2 lines on desktop, behind "More" on the phone]
   [meta chips — one line]                                  [More ▾]
   A light coat of the trend's colour (lesson.js: MegatrendMeta disc colour → --mt-coat) over the bg wave, fading
   into the page. lesson.js adds .mt-hero-disc + .mt-more (toggles .mt-open). */
.mt-hero{ --fg:#1A1712; --fg-dim:#5F574B; --surf:26,23,18; position:relative; isolation:isolate; color:var(--fg);
  display:grid; grid-template-columns:76px minmax(0,1fr) auto; column-gap:20px; align-items:center;
  padding:6.5rem max(1.5rem, calc(50% - 560px)) 1.6rem; }
.mt-hero::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(var(--mt-coat,var(--mt-accent)),var(--mt-coat,var(--mt-accent))), url(/images/bg.jpeg) center/cover no-repeat;
  background-blend-mode:color; opacity:.9;
  -webkit-mask-image:linear-gradient(#000 70%, transparent); mask-image:linear-gradient(#000 70%, transparent); }
.mt-hero > *{ min-width:0; }
.mt-hero-disc{ grid-column:1; grid-row:1 / span 3; align-self:center; width:76px; height:76px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--mt-accent); box-shadow:0 6px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.25); }
.mt-hero-disc svg{ width:56%; height:56%; }
/* breadcrumb above the name: one line, … */
.mt-eyebrow{ grid-column:2 / -1; grid-row:1; margin:0 0 2px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-family:var(--font-label); font-size:12.5px; font-weight:700; letter-spacing:0; text-transform:none; color:var(--fg-dim); }
.mt-eyebrow-line{ display:inline; }
.mt-eyebrow a{ color:inherit; text-decoration:none; }
.mt-eyebrow a:hover{ color:var(--fg); }
.mt-eyebrow .mt-crumb-sep{ margin:0 .35em; opacity:.6; }
.mt-nodename{ grid-column:2 / -1; grid-row:2; margin:0; font-family:var(--font-head); font-weight:700; font-size:clamp(1.9rem,2.8vw,2.5rem); line-height:1.1;
  letter-spacing:-.02em; color:var(--fg); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* the hook — where the ticker row sits on an asset page */
.mt-title{ grid-column:2 / -1; grid-row:3; margin:6px 0 0; font-family:var(--font-sans); font-weight:600; font-size:1.02rem; line-height:1.45; letter-spacing:0; color:var(--fg-dim); }
.mt-hero:not(:has(.mt-nodename)) .mt-title{ grid-row:2 / span 2; font-size:clamp(1.5rem,2.4vw,2rem); font-weight:700; color:var(--fg); }
.mt-deck{ grid-column:2 / -1; grid-row:4; margin:12px 0 0; max-width:48rem; font-family:var(--font-sans); font-weight:500; font-size:.98rem; line-height:1.6; color:var(--fg-dim);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mt-deck strong{ color:var(--fg); }
/* meta = one line of chips: label · value */
.mt-meta{ grid-column:2; grid-row:5; margin:14px 0 0; padding:0; border:0; display:flex; flex-wrap:wrap; gap:7px;
  font-size:12.5px; letter-spacing:0; line-height:normal; color:var(--fg); }
.mt-meta span{ display:inline-flex; align-items:baseline; gap:6px; flex:none; padding:6px 13px; border-radius:var(--pill,999px);   /* the .gk-chip box */
  border:1px solid rgba(var(--surf),.20); background:rgba(var(--surf),.08); font-size:13px; font-weight:600; white-space:nowrap; }
.mt-meta b{ color:var(--fg-dim); font-weight:700; font-size:11px; }
/* collapsed: ONE line that scrolls, fading at the edge ("More" wraps them) */
.mt-hero:not(.mt-open) .mt-meta{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent); }
.mt-hero:not(.mt-open) .mt-meta::-webkit-scrollbar{ display:none; }
.mt-more{ grid-column:3; grid-row:5; justify-self:end; align-self:start; margin:14px 0 0 8px; line-height:normal; }   /* the box = .exh-more (mdx-hero.css) */
.mt-hero.mt-open .mt-more svg{ transform:rotate(180deg); }
/* right of the name: 🔔 follow + 📈 the theme's explore page (lesson.js) — the 32px twins of the theme page's 🔔📖 */
.mt-hero-acts{ grid-column:3; grid-row:1 / span 3; align-self:center; justify-self:end; display:flex; gap:6px; margin-left:12px; }
.mt-hero-acts .mt-follow{ display:inline-flex; }
.mt-hero-acts .ex-filter-btn{ width:32px; height:32px; }
/* the tier-1 "Sub-categories · N" chip opens the children dialog (lesson.js) — a link chip like .gk-chip (› after) */
.mt-meta .mt-meta-link{ cursor:pointer; transition:background .15s; }
.mt-meta .mt-meta-link::after{ content:'\203A'; font-weight:700; opacity:.5; }
.mt-meta .mt-meta-link:hover{ background:rgba(var(--surf),.14); }
.mt-kids{ display:flex; flex-direction:column; gap:2px; padding:0 0 14px; }
.mt-kid{ display:flex; align-items:center; gap:12px; padding:9px 10px; margin:0 -10px; border-radius:12px; text-decoration:none; color:#0f1117; font-size:14.5px; font-weight:650; line-height:1.3; }
.mt-kid:hover{ background:rgba(0,0,0,.05); }
.mt-kid-disc{ flex:none; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.mt-kid-disc svg{ width:56%; height:56%; }
.mt-kid-nm{ flex:1; min-width:0; }
.mt-kid-go{ flex:none; font-size:20px; color:#9aa0aa; }
.mt-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }   /* the CTA's text, kept for screen readers + link text */
.mt-eyebrow, .mt-nodename, .mt-title{ grid-column:2; }   /* col 3 = the buttons */
.mt-hero:not(:has(.mt-hero-acts)) :is(.mt-eyebrow,.mt-nodename,.mt-title){ grid-column:2 / -1; }
.mt-hero.mt-open .mt-deck{ display:block; -webkit-line-clamp:unset; overflow:visible; }
/* a page without lesson.js (index-methodology): no disc → no logo column; no "More" → show everything */
.mt-hero:not(:has(.mt-hero-disc)){ grid-template-columns:0 minmax(0,1fr) auto; column-gap:0; }
.mt-hero:not(:has(.mt-more)) .mt-meta{ flex-wrap:wrap !important; overflow:visible; -webkit-mask-image:none; mask-image:none; }
.mt-hero:not(:has(.mt-more)) .mt-deck{ display:block !important; -webkit-line-clamp:unset; overflow:visible; }
.mt-hero:not(:has(.mt-more)) .mt-title{ display:block; -webkit-line-clamp:unset; }

@media (min-width:721px){   /* desktop: 🔔 📈 in the row under the name + hook (like explore's 🔔 📖 under the name) */
  .mt-hero:has(.mt-hero-acts) :is(.mt-eyebrow,.mt-nodename,.mt-title){ grid-column:2 / -1; }
  .mt-hero-acts{ grid-column:2; grid-row:4; justify-self:start; align-self:start; margin:10px 0 0; }
  .mt-hero:has(.mt-hero-acts) .mt-hero-disc{ grid-row:1 / span 4; }
  .mt-hero:has(.mt-hero-acts) .mt-deck{ grid-row:5; }
  .mt-hero:has(.mt-hero-acts) .mt-meta, .mt-hero:has(.mt-hero-acts) .mt-more{ grid-row:6; }
}

/* ---- table of contents — same grid + same sticky rail heading as a chapter ---- */
.mt-toc{ display:grid; grid-template-columns:14rem minmax(0,var(--measure)); justify-content:center; gap:0 3.5rem; align-items:start; padding:2.6rem 1.5rem; }
.mt-toc h2{ grid-column:1; grid-row:1 / -1; position:sticky; top:112px; align-self:start; font-family:var(--font-head); font-weight:700; font-size:clamp(1.5rem,2.5vw,2rem); line-height:1.16; letter-spacing:-.01em; text-transform:none; color:var(--mt-ink); margin:0; }
.mt-toc ol{ grid-column:2; }
.mt-toc ol{ margin:0; padding:0; list-style:none; counter-reset:toc; }
.mt-toc li{ counter-increment:toc; }
.mt-toc a{ display:flex; gap:.8rem; align-items:baseline; padding:.3rem 0; color:var(--mt-ink-soft); text-decoration:none; font-size:.98rem; }
.mt-toc a::before{ content:counter(toc,decimal-leading-zero); font-family:var(--font-label); font-size:.74rem; font-weight:700; color:var(--mt-accent); min-width:1.7rem; }
.mt-toc a:hover, .mt-toc a.active{ color:var(--mt-ink); }

/* ====================== PROSE (ivory reading area) ====================== */
/* anchor layout: heading sits in a sticky LEFT column, the chapter body flows on the right */
.mt-chapter{ display:grid; grid-template-columns:14rem minmax(0,var(--measure)); justify-content:center; gap:0 3.5rem; align-items:start; padding:3rem 1.5rem .4rem; scroll-margin-top:6rem; }
.mt-chapter > *{ grid-column:2; min-width:0; }
.mt-chapter > h2{ grid-column:1; grid-row:1 / -1; position:sticky; top:112px; align-self:start; font-family:var(--font-head); font-weight:700; font-size:clamp(1.5rem,2.5vw,2rem); line-height:1.16; letter-spacing:-.01em; margin:0; color:var(--mt-ink); }
.mt-chapter > h2 .num{ font-family:var(--font-label); font-size:.8rem; font-weight:700; color:var(--mt-accent); letter-spacing:.16em; display:block; margin-bottom:.7rem; }
.mt-chapter > h2 .num::after{ content:" —"; color:var(--mt-rule-strong); }
.mt-chapter > h3{ font-family:var(--font-head); font-weight:700; font-size:1.28rem; margin:2rem 0 .2rem; color:var(--mt-ink); }
@media (max-width:1439px){   /* below the 3-col breakpoint: ALL heading blocks stack as one column (hero=toc=chapter) */
  .mt-toc, .mt-chapter{ grid-template-columns:1fr; gap:0; }
  .mt-toc > *, .mt-toc ol, .mt-chapter > *, .mt-chapter > h2{ grid-column:1; }   /* .mt-toc ol needs the explicit reset (its base grid-column:2 out-specifies '.mt-toc > *') */
  /* un-stick BOTH the chapter headings AND the TOC heading on mobile (single-column flow) */
  .mt-chapter > h2, .mt-toc h2{ grid-row:auto; position:static; align-self:auto; margin-bottom:.9rem; }
  .mt-chapter > h2{ font-size:clamp(1.7rem,5vw,2.1rem); }
}
.mt-prose p{ margin:1.05rem 0; }
.mt-prose strong{ font-weight:700; color:var(--mt-ink); }
.mt-prose em{ font-style:italic; }
.mt-prose ul, .mt-prose ol{ margin:1rem 0; padding-left:1.3rem; }
.mt-prose li{ margin:.4rem 0; }
.mt-prose ul li::marker{ color:var(--mt-accent); }
/* drop cap — Playfair, trend accent: one decorative glyph = the "serif-italic seasoning" move */
.mt-chapter.lead .mt-prose > p:first-of-type::first-letter{ font-family:var(--font-serif); font-weight:700; float:left; font-size:3.6rem; line-height:.8; padding:.4rem .6rem 0 0; color:var(--mt-accent-ink); }

/* ---- term box (tile, trend accent quarantined inside) ---- */
.mt-term{ margin:1.9rem 0; padding:1.2rem 1.4rem; background:var(--ivory); border-left:3px solid var(--mt-accent); border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.mt-term .label{ font-family:var(--font-label); font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--mt-accent-ink); display:flex; gap:.45rem; margin-bottom:.35rem; }
.mt-term .label::before{ content:"✦"; }
.mt-term .term{ font-weight:700; font-size:1.04rem; color:var(--mt-ink); }
.mt-term p{ margin:.45rem 0 0; font-size:.98rem; color:var(--mt-ink-soft); line-height:1.7; }

/* ---- note (tile, neutral) ---- */
.mt-note{ margin:1.9rem 0; padding:1.1rem 1.3rem; font-size:.96rem; color:var(--mt-ink-soft); background:var(--ivory); border-radius:var(--radius-sm); }
.mt-note .label{ font-family:var(--font-label); font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--mt-muted); margin-bottom:.35rem; }

/* ---- pull stat (Playfair number = serif accent; trend colour) ---- */
.mt-stat{ margin:2.2rem 0; padding-left:1.2rem; border-left:3px solid var(--mt-accent); }
.mt-stat .n{ font-family:var(--font-serif); font-weight:700; font-style:italic; font-size:clamp(2.6rem,6.5vw,3.8rem); line-height:1; color:var(--mt-accent-ink); letter-spacing:-.01em; }
.mt-stat .cap{ font-size:.98rem; color:var(--mt-ink-soft); margin-top:.45rem; max-width:26rem; }

/* ---- pull quote ---- */
.mt-pullquote{ font-family:var(--font-serif); font-style:italic; font-weight:500; font-size:clamp(1.4rem,3vw,1.7rem); line-height:1.4; color:var(--mt-ink); margin:2.4rem 0; padding-left:1.3rem; border-left:3px solid var(--mt-accent-line); }

/* ---- figure (tile, radius 28) ---- */
.mt-figure{ margin:2.6rem auto; max-width:var(--wide); padding:0 1.5rem; }
.mt-figure.col{ max-width:var(--measure); }
/* top-level figures/charts (outside chapters): match the anchor grid's total width so their left edge lines up with the rail */
.mt-body-main > .mt-figure, .mt-body-main > .mt-chartwrap{ max-width:56.5rem; }
/* SVG diagrams keep an ivory tile; photos/illustrations (.frame.bare) are frameless — image rounds itself */
.mt-figure .frame{ background:var(--ivory); border-radius:var(--radius); padding:1.6rem; overflow:hidden; }
.mt-figure .frame.bare{ background:none; padding:0; border-radius:0; overflow:visible; }
.mt-figure .frame.bare img.mt-img{ border-radius:var(--radius); display:block; width:100%; }
.mt-figure svg{ display:block; margin:0 auto; }
.mt-figure figcaption{ font-family:var(--font-label); font-size:.8rem; color:var(--mt-muted); line-height:1.5; margin-top:.8rem; }
.mt-figure figcaption b{ color:var(--mt-ink-soft); font-weight:700; }
/* image placeholder → dark media tile (intentional even before the render is dropped in) */
.mt-imgph{ display:grid; place-items:center; min-height:17rem; text-align:center; background:var(--dark-warm); color:var(--dim); border-radius:var(--radius); font-family:var(--font-label); font-size:.82rem; padding:1.5rem; }

/* ---- SVG diagram helpers (trend accent quarantined in the figure tile) ---- */
.mt-svg{ font-family:var(--font-label); }
.mt-svg .ink{ stroke:var(--mt-ink); } .mt-svg .ink-fill{ fill:var(--mt-ink); }
.mt-svg .accent{ stroke:var(--mt-accent); } .mt-svg .accent-fill{ fill:var(--mt-accent); }
.mt-svg .muted{ stroke:var(--mt-rule-strong); }
.mt-svg .label{ fill:var(--mt-ink); font-size:13px; font-weight:500; }
.mt-svg .label-sm{ fill:var(--mt-muted); font-size:11px; letter-spacing:.04em; text-transform:uppercase; }
.mt-svg .num{ fill:var(--mt-accent); font-size:12px; font-weight:700; }

/* ---- data charts — wrapped in an ivory tile; bars use trend accent (charts.js reads --mt-accent) ---- */
.mt-chartwrap{ max-width:var(--wide); margin:2.6rem auto; padding:1.6rem; background:var(--ivory); border-radius:var(--radius); }
.mt-chartwrap.col{ max-width:var(--measure); }
.mt-chartwrap .chart-head{ font-family:var(--font-head); font-weight:700; font-size:1.08rem; color:var(--mt-ink); margin-bottom:.2rem; }
.mt-chartwrap .chart-sub{ font-family:var(--font-label); font-size:.8rem; color:var(--mt-muted); margin-bottom:1rem; line-height:1.5; }
.mt-chart{ width:100%; min-height:4rem; }
.mt-chart svg{ display:block; }
.mt-chartwrap .chart-src{ font-family:var(--font-label); font-size:.74rem; color:var(--mt-muted); margin-top:.8rem; }
.mt-chartwrap .chart-src b{ color:var(--mt-ink-soft); font-weight:700; }

/* ====================== KEY PLAYERS — flows like the rest of the content (no black slab) ====================== */
/* a centred light block (matches the wide content blocks); the CONTAINER holds the width so head / note /
   grid all share ONE left edge → the note lines up with the cards even though its JSON carries an inline margin. */
.mt-players{ color:var(--mt-ink); margin:3rem auto 0; max-width:72rem; padding:0 1.5rem 1rem; }
.mt-players > *{ max-width:none; margin-inline:0; }
.mt-players > .head{ font-family:var(--font-label); font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--mt-muted); margin-bottom:1.2rem; }
.mt-player-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); gap:12px; background:none; border:0; }
.mt-player{ background:var(--ivory); color:var(--mt-ink); border:1px solid var(--mt-rule-strong); border-radius:var(--radius-sm); padding:1.2rem 1.3rem; min-width:0; }   /* subtle border so the tile reads on the light page bg; min-width:0 keeps columns equal */
.mt-player .top{ display:flex; align-items:baseline; justify-content:space-between; gap:.3rem .55rem; flex-wrap:wrap; }
.mt-player .name{ font-weight:700; font-size:1.04rem; color:var(--mt-ink); min-width:0; flex:1 1 auto; }
.mt-player .name .mt-np{ white-space:nowrap; }                       /* keep "Oracle ● /" as one unbreakable unit */
.mt-player .name .mt-np-sep{ margin-left:.32rem; color:var(--mt-dim); font-weight:500; }
.mt-player .name a.mt-player-link{ color:inherit; text-decoration:none; border-bottom:1px solid var(--mt-rule-strong); }
.mt-player .name a.mt-player-link:hover{ border-color:var(--mt-accent); background:var(--mt-accent-tint); }
.mt-player .tick{ font-family:var(--font-label); font-size:.72rem; font-weight:700; color:var(--mt-accent-ink); flex:0 1 auto; text-align:right; }   /* wrap-able → won't force column width */
.mt-player .where{ font-family:var(--font-label); font-size:.72rem; color:var(--mt-muted); letter-spacing:.03em; margin-top:.15rem; }
/* inline 2yr EOW sparkline under the name (JS-filled; empty box removes itself if no price history) */
.mt-player .mt-spark{ margin-top:.5rem; padding-block:.45rem; line-height:0; }
.mt-player .mt-spark .mt-spark-svg{ display:block; width:100%; height:auto; overflow:visible; opacity:.92; }   /* height follows the viewBox aspect → uniform scale, even stroke, no stretch */
.mt-player .mt-spark-stat{ margin-top:.4rem; font-family:var(--font-label); font-size:.7rem; font-weight:700; letter-spacing:.01em; line-height:1.2; display:flex; flex-wrap:wrap; align-items:baseline; }
.mt-player .mt-spark-stat .dur{ color:var(--mt-muted); font-weight:500; margin-left:.3em; }
.mt-player .mt-spark-stat .sep{ color:var(--mt-dim); margin:0 .35rem; }
/* legend dot after a name part — colour matches its line (multi-line cards only) */
.mt-player .name .mt-leg{ display:inline-block; width:.5rem; height:.5rem; border-radius:50%; background:var(--lc); margin-left:.32rem; vertical-align:.04em; }
.mt-player .what{ font-size:.93rem; color:var(--mt-ink-soft); line-height:1.6; margin-top:.6rem; }
.mt-player .tag{ display:inline-block; margin-top:.8rem; font-family:var(--font-label); font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--mt-accent-ink); background:var(--mt-accent-tint2); padding:.2rem .6rem; border-radius:var(--pill); }

/* ---- responsive: wide screens → full-bleed hero + a wide 3-col body (rail | content | stocks) ----
   .mt-body wraps the reading content (JS). Narrow = transparent (children flow as before).
   Wide = a 3-col grid in a 1560px band; hero/footer stay edge-to-edge with their colour, but their
   CONTENT sits in the SAME band (padding-inline:max(48px, 50% - 732px), where 732 = (1560-96)/2). */
.mt-body, .mt-body-main{ display:contents; }
.mt-players-rail{ display:none; }

@media (min-width:1440px){
  /* hero + footer: colour stays full-bleed; their CONTENT sits in the same 1560 band as the body */
  .mt-hero{ padding-inline:max(48px, calc(50% - 732px)); }   /* the hero lines up with the body band below */
  .mt-footer{ padding-inline:max(48px, calc(50% - 732px)); }
  .mt-topbar{ padding-inline:max(48px, calc(50% - 732px)); }

  /* body = flexbox sticky-sidebar: [ reading column (flex:1) | stock rail (26rem) ], centred in 1560.
     align-items:stretch makes the rail as TALL as the reading column → the inner reliably sticks. */
  .mt-body{ display:flex; gap:3rem; align-items:stretch; max-width:1560px; margin:0 auto; padding:2.6rem 48px 2.6rem; }   /* padding top AND bottom = always-present whitespace between hero/footer and the body (incl. the rail) */
  .mt-body-main{ display:block; flex:1 1 auto; min-width:0; }
  /* article blocks: internal 2-col (heading rail | content) filling the reading column */
  .mt-body-main > .mt-toc, .mt-body-main > .mt-chapter{ grid-template-columns:13rem minmax(0,1fr); column-gap:3rem; justify-content:normal; padding-left:0; padding-right:0; }
  .mt-body-main > .mt-toc{ padding-top:0; }   /* align the TOC top with the rail head */
  .mt-body-main > .mt-figure, .mt-body-main > .mt-chartwrap{ max-width:none; }

  .mt-body .mt-players{ display:none; }   /* hide the in-flow slab wherever it's nested — rail replaces it (rail copies re-shown below) */
  /* rail = a flex column stretched to the reading column's height; the sticky lives in the inner so it
     pins reliably. Long list → inner scrolls (thin scrollbar), 32px bottom gap, padding so the last
     card never jams the frame. Sticks at 112px = a clear gap below the floating nav. */
  .mt-players-rail{ display:block; flex:0 0 26rem; }
  .mt-players-rail-inner{ position:sticky; top:112px; max-height:calc(100vh - 144px); overflow-y:auto; overscroll-behavior:contain; padding-bottom:15px; scrollbar-width:none; -ms-overflow-style:none;
    -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 30px),transparent); mask-image:linear-gradient(to bottom,#000 calc(100% - 30px),transparent); }   /* scroll, no visible scrollbar; bottom 30px fades out to the white page bg (no hard cut) */
  .mt-players-rail .mt-players{ display:block; background:none; color:var(--mt-ink); margin:0; padding:0; max-width:none; }
  .mt-players-rail .mt-players + .mt-players{ margin-top:1.6rem; }
  .mt-players-rail .mt-players > .head{ color:var(--mt-muted); font-size:.68rem; margin-bottom:.9rem; }
  .mt-players-rail .mt-player-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }   /* 2 EQUAL cards per row (minmax(0,…) forces equal width) */
  .mt-players-rail .mt-player{ background:var(--ivory); color:var(--mt-ink); padding:.85rem .95rem; border-radius:var(--radius-sm); }
  .mt-players-rail .mt-player .what{ font-size:.84rem; line-height:1.5; margin-top:.45rem; }   /* show the short story in the rail too */
  .mt-players-rail .mt-player .tag{ margin-top:.55rem; }
  .mt-players-rail-inner::-webkit-scrollbar{ display:none; }   /* hide scrollbar (Chrome/Safari) */

  /* end-of-lesson hub directory: sit in the SAME content column as the chapters (rail col empty) so it lines up */
  .mt-body-main > .mt-hubnav{ display:grid; grid-template-columns:13rem minmax(0,1fr); column-gap:3rem; max-width:none; margin:3rem 0 0; padding:0; }
  .mt-body-main > .mt-hubnav > *{ grid-column:2; }
}

/* ====================== FOOTER — dark slab ====================== */
.mt-footer{ background:var(--dark-warm); color:var(--dim); margin:0; padding:2.6rem 1.5rem 3.4rem; font-family:var(--font-label); font-size:.8rem; line-height:1.6; }
.mt-footer > *{ max-width:var(--measure); margin-inline:auto; }
.mt-sources{ margin-top:1.3rem; }
.mt-sources h3{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ivory); margin:0 0 .5rem; }
.mt-sources ol{ margin:0; padding-left:1.2rem; }
.mt-sources li{ margin:.25rem 0; }
.mt-sources a{ color:var(--dim); text-decoration:none; border-bottom:1px solid rgba(240,238,233,.2); }
.mt-sources a:hover{ color:var(--ivory); }

/* ---- live hub directory (pills) ---- */
.mt-hubnav{ max-width:var(--measure); margin:2.6rem auto; padding:0 1.5rem; }
.mt-hubnav-up{ display:inline-block; font-family:var(--font-label); font-size:.72rem; font-weight:700; letter-spacing:.04em; color:var(--mt-accent-ink); text-decoration:none; margin-bottom:.6rem; }
.mt-hubnav-up:hover{ text-decoration:underline; }
.mt-hubnav > .head{ font-size:.88rem; color:var(--mt-muted); margin-bottom:.7rem; }
.mt-hubnav > .head b{ color:var(--mt-ink); }
.mt-hubnav > .head .cnt{ font-family:var(--font-label); font-size:.68rem; font-weight:700; color:var(--mt-muted); margin-left:.3rem; }
.mt-hubnav-grid{ display:flex; flex-wrap:wrap; gap:.45rem; }
.mt-hubcard{ display:inline-flex; align-items:center; padding:.3rem .8rem; border-radius:var(--pill); background:var(--ivory); text-decoration:none; }
.mt-hubcard .nm{ font-size:.76rem; color:var(--mt-ink); } .mt-hubcard .badge{ display:none; }
.mt-hubcard.done .nm{ color:var(--mt-accent-ink); }
.mt-hubcard.done:hover{ background:var(--mt-accent-tint); }
.mt-hubcard.soon{ opacity:.5; }
.mt-hubcard.here{ background:var(--black); } .mt-hubcard.here .nm{ color:var(--ivory); }

/* ---- responsive ---- */
@media (max-width:720px){
  body.mt-lesson{ font-size:1.02rem; }
  /* hero, phone: 44px disc · small name · the hook; deck behind "More"; meta = one scrolling line */
  .mt-hero{ grid-template-columns:44px minmax(0,1fr) auto; column-gap:10px; padding:88px 16px 14px; }
  .mt-hero-disc{ width:44px; height:44px; }
  .mt-hero-disc svg{ width:54%; height:54%; }
  .mt-eyebrow{ font-size:11.5px; }
  .mt-nodename{ font-size:19px; line-height:1.15; letter-spacing:-.01em; }
  .mt-title{ margin-top:3px; font-size:13.5px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .mt-hero:not(:has(.mt-nodename)) .mt-title{ font-size:19px; }
  .mt-hero:not(.mt-open) .mt-deck{ display:none; }
  .mt-meta{ grid-column:1 / span 2; grid-row:4; margin-top:12px; }
  .mt-more{ grid-row:4; margin-top:12px; }
  .mt-meta span{ padding-top:5px; padding-bottom:5px; font-size:12.5px; }
  .mt-hero.mt-open .mt-title{ display:block; -webkit-line-clamp:unset; }
  .mt-hero.mt-open .mt-deck{ grid-column:1 / -1; grid-row:4; font-size:14px; line-height:1.6; }
  .mt-hero.mt-open .mt-meta{ grid-column:1 / -1; grid-row:5; }
  .mt-hero.mt-open .mt-more{ grid-column:1 / -1; grid-row:6; }
  .mt-hero:not(:has(.mt-more)) .mt-deck{ grid-column:1 / -1; grid-row:4; font-size:14px; line-height:1.6; }
  .mt-hero:not(:has(.mt-more)) .mt-meta{ grid-column:1 / -1; grid-row:5; }
  /* the stuck identity row (js/mdx-hero.js — the SAME machine + motion as .ex-hero.exh-stuck in css/mdx-hero.css):
     once the whole hero has scrolled away it sticks under the nav as disc · name, frosted glass + the trend's pastel */
  .mt-hero.exh-stuck{ position:fixed; top:0; left:0; right:0; z-index:900; margin:0; padding:var(--exs-top,92px) 16px 10px;
    box-shadow:0 12px 18px -18px rgba(0,0,0,.45); transition:top .22s ease; }
  /* the frosted glass lives on ::before, NOT the row: a backdrop-filter on the row makes it the containing block of every
     position:fixed child → the 🔔 follow dialog opened from the stuck row was trapped in the bar instead of centred */
  .mt-hero.exh-stuck::before{ background:var(--exs-veil,rgba(255,255,255,.28)); opacity:1; -webkit-mask-image:none; mask-image:none;
    -webkit-backdrop-filter:blur(22px) saturate(1.15); backdrop-filter:blur(22px) saturate(1.15); }
  .mt-hero.exh-stuck .mt-eyebrow, .mt-hero.exh-stuck .mt-title, .mt-hero.exh-stuck .mt-deck,
  .mt-hero.exh-stuck .mt-meta, .mt-hero.exh-stuck .mt-more{ display:none; }
  .mt-hero.exh-stuck .mt-hero-disc{ grid-row:2; width:36px; height:36px; }
  .mt-hero.exh-stuck .mt-nodename{ grid-row:2; -webkit-line-clamp:1; font-size:17px; }
  .mt-hero.exh-stuck .mt-hero-acts{ grid-row:2; }
  /* on the frosted pastel the hero's white-glass buttons vanish → solid white + dark icon (following = filled bell) */
  .mt-hero.exh-stuck .mt-hero-acts .ex-filter-btn{ background:rgba(255,255,255,.92); border-color:rgba(26,23,18,.12); color:#1a1712; }
  /* on the frosted pastel the hero's white-glass buttons vanish → solid white + dark icon (following = filled bell) */
  .mt-hero.exh-stuck .mt-hero-acts .ex-filter-btn{ background:rgba(255,255,255,.92); border-color:rgba(26,23,18,.12); color:#1a1712; }
  html.exh-navhide .mt-hero.exh-stuck{ top:calc(-1 * var(--exs-top,92px) + 10px + env(safe-area-inset-top,0px)); }
  .mt-hero.exh-stuck.exh-enter, .mt-hero.exh-stuck.exh-leave{ top:-240px; }
  .mt-hero.exh-stuck.exh-enter{ transition:none; }
  .mt-hero.exh-stuck.exh-leave{ transition:top .12s ease-in; }
  .mt-chapter{ padding-left:1.25rem; padding-right:1.25rem; }
  /* tap-to-zoom for vector diagrams: default = fit (unchanged); tap → real size + horizontal scroll; tap again = fit.
     .mt-zoomable is added by lesson.js only to figures that contain an <svg> (diagrams, not photos). Caption unaffected. */
  .mt-figure.mt-zoomable .frame{ position:relative; cursor:zoom-in; }
  .mt-figure.mt-zoomable:not(.mt-zoomed) .frame::after{ content:"⤢ แตะเพื่อขยาย"; position:absolute; right:.5rem; bottom:.5rem; font-family:var(--font-label); font-size:.62rem; font-weight:700; letter-spacing:.02em; color:var(--mt-muted); background:rgba(247,246,242,.85); border:1px solid var(--mt-rule-strong); border-radius:9999px; padding:.2rem .55rem; pointer-events:none; }
  .mt-figure.mt-zoomed .frame{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; cursor:zoom-out; }
  .mt-figure.mt-zoomed .frame::-webkit-scrollbar{ display:none; }
  .mt-figure.mt-zoomed .frame > svg{ width:720px; max-width:none; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; transition-duration:.001ms!important; }
}

/* ---- phone: lesson · champions · sub-sectors as swipeable panes (lesson.js; the why page's scroll-snap + -·· pager) ---- */
@media (max-width:720px){
  .mt-body.mt-panes{ display:flex; align-items:flex-start; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; }
  .mt-body.mt-panes::-webkit-scrollbar{ display:none; }
  .mt-panes > .mt-pane{ flex:0 0 100%; min-width:0; scroll-snap-align:start; scroll-snap-stop:always; }
  .mt-panes > .mt-body-main.mt-pane{ display:block; }
  .mt-panes > .mt-players-rail.mt-pane{ display:block; padding:1.6rem 1.25rem 5rem; }
  .mt-panes .mt-players-rail-inner{ position:static; max-height:none; overflow:visible; -webkit-mask-image:none; mask-image:none; padding:0; }
  .mt-panes .mt-players-rail .mt-players{ display:block; margin:0; padding:0; max-width:none; }
  .mt-panes .mt-players-rail .mt-players + .mt-players{ margin-top:1.6rem; }
  .mt-panes .mt-players-rail .mt-player-grid{ grid-template-columns:1fr; gap:10px; }
  .mt-panes > .mt-subexp.mt-pane{ margin:0; padding:1.6rem 12px 5rem; max-width:none; }
  .mt-lesson .mt-panes .mt-subexp #mtLessonScale{ min-width:720px; }   /* natural size (scale 1) — pans inside its .mt-scroll */
  .mt-panes .mt-body-main .mt-players[data-players]{ display:none; }   /* → the champions pane (a jump line stands in) */
  .mt-pane-jump{ display:block; width:100%; margin:1.6rem 0; padding:.9rem 1rem; border:1px solid var(--mt-rule-strong); border-radius:var(--radius-sm,14px);
    background:var(--ivory); color:var(--mt-ink); font:inherit; font-weight:700; font-size:.98rem; text-align:left; cursor:pointer; }
  /* the pager: current pane's name + the why page's -·· (current = the long one), floating at the bottom */
  .mt-pager{ position:fixed; left:50%; bottom:calc(14px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:850; display:flex; align-items:center; gap:10px;
    max-width:calc(100vw - 48px); padding:8px 14px; border-radius:999px; background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    box-shadow:0 8px 24px rgba(0,0,0,.14); font-size:12.5px; font-weight:700; color:var(--mt-ink); }
  .mt-pg-lbl{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mt-pg-dots{ display:flex; gap:6px; flex:none; }
  .mt-pager .cm-dot{ width:8px; height:8px; border-radius:50%; border:0; padding:0; background:var(--mt-coat,var(--mt-accent,#1a1712)); opacity:.35; cursor:pointer; }
  .mt-pager .cm-dot.cur{ width:22px; border-radius:4px; opacity:1; }
}