/* Ariela Insights: rich BTR article (Claude artifact structure on Ariela tokens)
   Depends on site styles.css tokens: --font, --font-serif, --article-frame, --pad

   LAYOUT SYSTEM (v4)
   One measure, one centre axis, shared with the article title.
   - Reading measure  --read  680px : EVERYTHING in the article body uses it, so every block's
     left and right edges match the body paragraphs: hero, prose, h2s, toplines, pull quotes,
     stat figures, cards, findings, opex figure, case box, framework cards and steps,
     value-split panels, Sources & notes, disclaimer, author blurb.
     (Framework step badges hang in the left margin on desktop; the step content box is 680.)
   - Gutter           --gut   72px desktop / 24px at <=900px (same as site .frame padding).
   Widths use container units on .wrap, so a classic scrollbar can never cause overflow.

   COLOUR SYSTEM (v3)
   ~85% neutral (ink / dim / muted / faint, hairline borders).
   --hl  sand  #C9B48A : emphasis (key figures, highlighted phrases, card markers,
                         framework active state, value-split bars + pressed state, pull-quote rules).
   --coral     #D5564A : punctuation only (progress bar, eyebrow/kicker labels, footnote marks,
                         link underlines, brand marks).
*/
.article-rich{
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:var(--lh-body);
  letter-spacing:var(--ls-body);
  font-style:normal;
  --bg:#181311;
  --bg-2:#211d1a;
  --bg-3:#2a2420;
  --ink:#F4F0EA;
  --ink-strong:#FBF8F3;
  --dim:#BBB2A8;
  --muted:#8A8078;
  --faint:#5E554E;
  --line:rgba(236,228,220,0.10);
  --line-2:rgba(236,228,220,0.17);
  --neutral-soft:rgba(138,128,120,0.14);
  --label:#9C9289;
  /* small labels on raised panels:>=5:1 on bg, bg-2 and bg-3 */

  /* highlight: muted warm sand */
  --hl:#C9B48A;
  --hl-strong:#D8C7A2;
  --hl-soft:rgba(201,180,138,0.14);
  --hl-tint:rgba(201,180,138,0.07);
  --hl-line:rgba(201,180,138,0.45);
  --hl-ink:#181311;
  /* coral:punctuation only */
  --coral:#D5564A;
  /* legacy aliases still referenced by inline styles in the artifact markup */
  --copper:var(--coral);
  --sage:var(--muted);
  --sage-bright:var(--dim);
  /* layout */
  --read:680px;
  --gut:var(--pad,72px);
  --read-w:min(var(--read), calc(100cqw - 2 * var(--gut)));
  color-scheme:dark;
  position:relative;
  color:var(--ink);
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
@media(max-width:900px){.article-rich{--gut:24px}}
.article-rich *{box-sizing:border-box}

/* faint architectural grid wash behind everything */
.article-rich::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:clamp(44px,7vw,88px) clamp(44px,7vw,88px);
  -webkit-mask-image:radial-gradient(130% 90% at 50% 0%,#000 0%,transparent 72%);
          mask-image:radial-gradient(130% 90% at 50% 0%,#000 0%,transparent 72%);
  opacity:.5;
}
.article-rich .wrap{position:relative;z-index:1;padding-top:0;container-type:inline-size}

/* ---- shared typography: every rule maps to the shared scale tokens in styles.css ----
   h1 · h2 · h3 · lead · body · small · label (see :root in styles.css) */
.article-rich h1,.article-rich h2,.article-rich h3{
  font-family:var(--font-sans);
  font-size:var(--fs-h2);
  font-weight:700;
  line-height:var(--lh-h2);
  letter-spacing:var(--ls-h2);
  font-style:normal;
  color:var(--ink-strong);
  text-wrap:balance;
  margin:0;
}
.article-rich .eyebrow{
  font-family:var(--font-sans);
  font-size:var(--fs-label);
  font-weight:700;
  line-height:var(--lh-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  font-style:normal;
  color:var(--coral);
}
.article-rich .mono{
  }
.article-rich a{color:var(--dim);text-decoration-color:var(--coral);text-underline-offset:3px;text-decoration-thickness:1px}
.article-rich a:hover{color:var(--ink-strong)}
.article-rich em,.article-rich i{font-style:italic}
.article-rich strong{color:var(--ink-strong);font-weight:600}
.article-rich ::selection{background:var(--hl);color:var(--hl-ink)}
.article-rich :focus-visible{outline:2px solid var(--coral);outline-offset:3px;border-radius:3px}
.article-rich .hl{color:var(--hl)}

/* ---- scaffold ---- */
.article-rich section{position:relative;padding-block:clamp(2.6rem,6vw,4.6rem)}
.article-rich p{margin:0 0 1.25em;max-width:none}

/* Reading-measure containers (one centre axis, one left edge) */
.article-rich .hero .col,
.article-rich section > .col,
.article-rich .brief .bleed,
.article-rich .stat-wrap > *,
.article-rich .fw-head,
.article-rich .mistaken > *,
.article-rich .rail,
.article-rich .flow-wrap > *,
.article-rich .article-foot,
.article-rich .article-about,
.article-rich .colophon-note{
  width:var(--read-w);max-width:none;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0;
}
/* Figures and cards inside a reading column fill it exactly */
.article-rich .col > .twocards,
.article-rich .col > .findings,
.article-rich .col > .opex,
.article-rich .col > .casebox{width:auto;max-width:none;margin-left:0;margin-right:0}
/* Outer wrappers are full width; their children carry the measure */
.article-rich .stat-wrap,
.article-rich .flow-wrap,
.article-rich .mistaken{max-width:none;padding-inline:0;width:auto}

/* ---- scroll progress (coral punctuation) ---- */
body.article-page .progress{position:fixed;top:0;left:0;height:2px;width:0%;
  background:var(--coral);z-index:60;transition:width .08s linear}

/* =================== HERO =================== */
.article-rich .hero{display:flex;flex-direction:column;justify-content:center;
  min-height:min(78svh,720px);padding-top:2.5rem;padding-bottom:2rem;gap:0}
.article-rich .hero .kicker{display:flex;align-items:center;gap:.8rem;margin-bottom:1.6rem}
.article-rich .hero .kicker .ln{height:1px;flex:1;background:var(--line-2);max-width:60px}
.article-rich .hero h1{
  font-family:var(--font-sans);
  font-size:var(--fs-h1);
  font-weight:700;
  line-height:var(--lh-h1);
  letter-spacing:var(--ls-h1);
  font-style:normal;
  margin:0;
  max-width:none;
}
.article-rich .hero h1 .l2{color:var(--hl);display:block}
.article-rich .hero .standfirst{
  font-family:var(--font-serif);
  font-size:var(--fs-lead);
  font-weight:400;
  line-height:var(--lh-lead);
  letter-spacing:var(--ls-lead);
  font-style:normal;
  color:var(--dim);
  max-width:40rem;
  margin-top:1.7rem;
}
.article-rich .hero .byline{
  font-family:var(--font-sans);
  font-size:var(--fs-small);
  font-weight:400;
  line-height:var(--lh-small);
  letter-spacing:var(--ls-small);
  font-style:normal;
  margin-top:2.1rem;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 1.1rem;
  align-items:center;
  color:var(--muted);
}
.article-rich .hero .byline b{color:var(--dim);font-weight:600}
.article-rich .hero .byline .dot{color:var(--line-2)}
.article-rich .scrollcue{
  font-family:var(--font-sans);
  font-size:var(--fs-label);
  font-weight:700;
  line-height:var(--lh-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  font-style:normal;
  margin-top:2.6rem;
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  align-self:flex-start;
  color:var(--muted);
}
.article-rich .scrollcue .arrow{display:inline-block;width:1px;height:26px;background:var(--muted);position:relative;animation:cue 2.2s ease-in-out infinite}
.article-rich .scrollcue .arrow::after{content:"";position:absolute;bottom:0;left:-3px;width:7px;height:7px;
  border-right:1px solid var(--muted);border-bottom:1px solid var(--muted);transform:rotate(45deg)}
@keyframes cue{0%,100%{transform:translateY(-4px);opacity:.5}50%{transform:translateY(4px);opacity:1}}

/* =================== IN BRIEF =================== */
.brief{border-top:1px solid var(--line);background:linear-gradient(180deg,var(--bg),var(--bg-2))}
.brief .head{display:flex;align-items:center;gap:.9rem;margin-bottom:1.2rem}
.brief .head .ln{height:1px;flex:1;background:var(--line-2);max-width:70px}
.article-rich .brief .thesis{
  font-family:var(--font-sans);
  font-size:var(--fs-h2);
  font-weight:700;
  line-height:var(--lh-h2);
  letter-spacing:var(--ls-h2);
  font-style:normal;
  color:var(--ink-strong);
  max-width:none;
  text-wrap:balance;
  margin:0 0 2rem;
}
.brief .scenario{margin-top:1.9rem;border-left:2px solid var(--hl);background:var(--bg-3);
  border-radius:0 8px 8px 0;padding:1.3rem 1.5rem}
.article-rich .brief .scenario p{
  font-family:var(--font-serif);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:var(--lh-body);
  letter-spacing:var(--ls-body);
  font-style:normal;
  margin:0;
  color:var(--ink);
}
.brief .scenario .hl{
  }
.article-rich .brief .scenario .sc-note{
  font-family:var(--font-serif);
  font-size:var(--fs-card);
  font-weight:400;
  line-height:var(--lh-card);
  letter-spacing:var(--ls-body);
  font-style:normal;
  margin-top:.85rem;
  color:var(--ink);
}

/* =================== STAT REVEAL =================== */
.stat-band{background:
   radial-gradient(120% 140% at 85% 0%,var(--neutral-soft),transparent 60%),var(--bg-2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.article-rich .stat-head{margin-bottom:2.4rem}
.stat-head .eyebrow{display:block;margin-bottom:.7rem}
.stat-head h2{
  }
.article-rich .stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem 1.4rem;
  margin-top:0;margin-bottom:0}
.article-rich .stat{border-top:2px solid var(--hl-line);padding-top:.9rem;min-width:0}
.article-rich .stat .fig{
  font-family:var(--font-sans);
  font-size:var(--fs-h2);
  font-weight:700;
  line-height:1;
  letter-spacing:var(--ls-h2);
  font-style:normal;
  color:var(--hl);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.article-rich .stat .fig .u{font-size:.42em;color:var(--hl);margin-left:.1em;letter-spacing:0}
.article-rich .stat .lab{
  font-family:var(--font-sans);
  font-size:var(--fs-small);
  font-weight:400;
  line-height:var(--lh-small);
  letter-spacing:var(--ls-small);
  font-style:normal;
  margin-top:.6rem;
  color:var(--dim);
}
.article-rich p.stat-foot{
  font-family:var(--font-serif);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:var(--lh-body);
  letter-spacing:var(--ls-body);
  font-style:normal;
  margin-top:2.3rem;
  margin-bottom:0;
  color:var(--dim);
}

/* =================== READING =================== */
.drop::first-letter{initial-letter:2;font-family:var(--font-sans);font-weight:600;color:var(--hl);
  margin-right:.08em}
.kick-line{display:flex;align-items:baseline;gap:.9rem;margin-bottom:1.5rem}
.kick-line .n{
  font-family:var(--font-sans);
  font-size:var(--fs-label);
  font-weight:700;
  line-height:var(--lh-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  font-style:normal;
  color:var(--coral);
}
.kick-line h2{
  }
.q-ask{color:var(--ink-strong);font-style:italic}
/* hard-hitting section lead (was being flattened to body copy by the shared .article p rule) */
.article-rich p.topline{
  font-family:var(--font-serif);
  font-size:var(--fs-lead);
  font-weight:400;
  line-height:var(--lh-lead-serif);
  letter-spacing:var(--ls-lead);
  font-style:normal;
  color:var(--ink-strong);
  text-wrap:balance;
  margin:.4rem 0 1.1rem;
}

/* two-kinds cards */
.twocards{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.8rem 0 1.6rem}
.kcard{background:var(--bg-2);border:1px solid var(--line);border-top:2px solid var(--hl-line);border-radius:4px;
  padding:1.3rem 1.4rem 1.4rem;min-width:0}
.kcard .t{
  font-family:var(--font-sans);
  font-size:var(--fs-label);
  font-weight:700;
  line-height:var(--lh-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  font-style:normal;
  color:var(--label);
  margin-bottom:.7rem;
}
.kcard h3{
  font-family:var(--font-sans);
  font-size:var(--fs-h3);
  font-weight:600;
  line-height:var(--lh-h3);
  letter-spacing:var(--ls-h3);
  font-style:normal;
  margin-bottom:.45rem;
}
.article-rich .kcard p{
  font-family:var(--font-serif);
  font-size:var(--fs-card);
  font-weight:400;
  line-height:var(--lh-card);
  letter-spacing:var(--ls-body);
  font-style:normal;
  margin:0;
  color:var(--ink);
}
@media(max-width:560px){.twocards{grid-template-columns:1fr}}

/* findings list */
.findings{margin:1.8rem 0 1.6rem;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--bg-2)}
.finding{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:1.2rem;padding:.95rem 1.3rem;border-top:1px solid var(--line)}
.finding:first-child{border-top:none}
.finding .fl{
  font-family:var(--font-sans);
  font-size:var(--fs-label);
  font-weight:700;
  line-height:var(--lh-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  font-style:normal;
  color:var(--hl);
  padding-top:.3rem;
}
.article-rich .finding p{
  font-family:var(--font-serif);
  font-size:var(--fs-card);
  font-weight:400;
  line-height:var(--lh-card);
  letter-spacing:var(--ls-body);
  font-style:normal;
  margin:0;
  color:var(--ink);
}
@media(max-width:520px){.finding{grid-template-columns:1fr;gap:.25rem}}

/* case-study callout */
.casebox{margin:1.8rem 0 1.6rem;border:1px solid var(--line-2);border-radius:10px;
  background:linear-gradient(180deg,var(--bg-3),var(--bg-2));overflow:hidden;position:relative}
.casebox::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--hl)}
.casebox .cb-tag{
  font-family:var(--font-sans);
  font-size:var(--fs-label);
  font-weight:700;
  line-height:var(--lh-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  font-style:normal;
  display:block;
  color:var(--label);
  padding:1.2rem 1.4rem 0;
}
.casebox .cb-body{padding:.8rem 1.4rem 1.4rem;display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem 1.6rem;align-items:center}
.cb-metric{
  font-family:var(--font-sans);
  font-size:var(--fs-h1);
  font-weight:700;
  line-height:1;
  letter-spacing:.01em; /* open tracking so the range breathes (h1 tracking is too tight for figures) */
  font-style:normal;
  color:var(--hl);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.cb-metric .cb-fig{display:block}
.cb-metric small{
  font-family:var(--font-sans);
  font-size:var(--fs-label);
  font-weight:700;
  line-height:var(--lh-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  font-style:normal;
  display:block;
  color:var(--label);
  margin-top:.75rem;
}
.article-rich .cb-text .cb-h{
  font-family:var(--font-sans);
  font-size:var(--fs-h3);
  font-weight:600;
  line-height:var(--lh-h3);
  letter-spacing:var(--ls-h3);
  font-style:normal;
  color:var(--ink-strong);
  margin:0 0 .5rem;
}
.article-rich .cb-text p{
  font-family:var(--font-serif);
  font-size:var(--fs-card);
  font-weight:400;
  line-height:var(--lh-card);
  letter-spacing:var(--ls-body);
  font-style:normal;
  margin:0;
  color:var(--ink);
}
@media(max-width:520px){.casebox .cb-body{grid-template-columns:1fr;gap:.6rem}
  }

/* opex micro-figure */
.opex{display:grid;grid-template-columns:1fr;gap:0;margin:1.8rem 0 1.6rem;
  background:var(--bg-2);border:1px solid var(--line);border-radius:6px;padding:1.3rem 1.5rem}
.opex .okey{
  font-family:var(--font-sans);
  font-size:var(--fs-small);
  font-weight:400;
  line-height:var(--lh-small);
  letter-spacing:var(--ls-small);
  font-style:normal;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 2rem;
  color:var(--dim);
}
.opex .okey b{
  font-family:var(--font-sans);
  font-size:var(--fs-h3);
  font-weight:600;
  line-height:var(--lh-h3);
  letter-spacing:var(--ls-h3);
  font-style:normal;
  color:var(--hl);
  margin-right:.2rem;
}

/* =================== FRAMEWORK =================== */
.fw{background:
   radial-gradient(100% 70% at 50% -10%,var(--neutral-soft),transparent 55%),var(--bg-2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fw-head{text-align:center}
.fw-head .eyebrow{display:inline-block}
.fw-head h2{
  margin:.8rem 0 .5rem;
}
.article-rich .fw-head .sub{
  font-family:var(--font-serif);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:var(--lh-body);
  letter-spacing:var(--ls-body);
  font-style:normal;
  color:var(--dim);
  max-width:34rem;
  margin:0 auto;
}

.mistaken{margin:2.4rem 0 0}
.mistaken .cap{
  font-family:var(--font-sans);
  font-size:var(--fs-label);
  font-weight:700;
  line-height:var(--lh-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  font-style:normal;
  color:var(--label);
  text-align:center;
  margin-bottom:1rem;
}
.mis-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.mis{border:1px dashed var(--line-2);border-radius:4px;padding:1.1rem 1.3rem;background:rgba(255,255,255,.015);min-width:0}
.mis b{
  font-family:var(--font-sans);
  font-size:var(--fs-h3);
  font-weight:600;
  line-height:var(--lh-h3);
  letter-spacing:var(--ls-h3);
  font-style:normal;
  display:block;
  color:var(--ink);
  margin-bottom:.3rem;
}
.mis span{
  font-family:var(--font-serif);
  font-size:var(--fs-card);
  font-weight:400;
  line-height:var(--lh-card);
  letter-spacing:var(--ls-body);
  font-style:normal;
  color:var(--ink);
}
.article-rich p.mis-note{
  font-family:var(--font-serif);
  font-size:var(--fs-card);
  font-weight:400;
  line-height:var(--lh-card);
  letter-spacing:var(--ls-body);
  font-style:normal;
  text-align:center;
  color:var(--dim);
  margin-top:1.1rem;
  margin-bottom:0;
}
@media(max-width:560px){.mis-grid{grid-template-columns:1fr}}

/* Steps: badges hang in the left breakout margin so step text shares the prose left edge */
.article-rich .steps{
  --bsize:clamp(30px,6.2vw,40px);
  --sgap:clamp(14px,2.4vw,32px);
  --bcol:calc(var(--bsize) + var(--sgap));
  --hang:var(--bcol);
  position:relative;margin-top:2.8rem;
  /* widen by the badge column and shift left, so the step content box is exactly the reading column */
  width:calc(var(--read-w) + var(--hang));max-width:none;padding-inline:0;
  margin-left:auto;margin-right:auto;
  left:calc(var(--hang) / -2);
}
/* no margin to hang into on small screens: badges sit inside the column */
@media(max-width:900px){.article-rich .steps{--hang:0px}}
.steps .spine{position:absolute;left:calc(var(--bcol) - var(--sgap) - var(--bsize) / 2 - 1px);top:14px;bottom:70px;width:2px;
  background:var(--line-2);overflow:hidden}
.steps .spine i{position:absolute;inset:0 0 auto 0;height:0;background:linear-gradient(var(--hl-line),var(--hl));
  transition:height .5s ease}
.step{position:relative;display:grid;grid-template-columns:var(--bcol) minmax(0,1fr);gap:0;padding:.2rem 0 2.1rem}
.step .badge{position:relative;z-index:2;display:flex;justify-content:flex-end;padding-right:var(--sgap)}
.step .badge span{
  font-family:var(--font-sans);
  font-size:var(--fs-small);
  font-weight:600;
  line-height:var(--lh-small);
  letter-spacing:var(--ls-small);
  font-style:normal;
  display:grid;
  place-items:center;
  width:var(--bsize);
  height:var(--bsize);
  border-radius:50%;
  background:var(--bg-3);
  border:1.5px solid var(--line-2);
  color:var(--label);
  transition:all .45s ease;
}
.step.on .badge span{background:var(--hl);border-color:var(--hl);color:var(--hl-ink)}
.step .body{min-width:0}
.step .lab{
  font-family:var(--font-sans);
  font-size:var(--fs-label);
  font-weight:700;
  line-height:var(--lh-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  font-style:normal;
  color:var(--label);
  transition:color .4s;
}
.step.on .lab{color:var(--hl)}
.step .q{
  font-family:var(--font-sans);
  font-size:var(--fs-lead);
  font-weight:400;
  line-height:var(--lh-lead);
  letter-spacing:var(--ls-lead);
  font-style:normal;
  color:var(--ink-strong);
  margin:.35rem 0 .55rem;
}
.step .tag{
  font-family:var(--font-serif);
  font-size:var(--fs-card);
  font-weight:400;
  line-height:var(--lh-card);
  letter-spacing:var(--ls-body);
  font-style:normal;
  color:var(--ink);
}
.step .tag .mono{
  color:var(--ink);
}
.card-hi{border:1px solid var(--hl-line);background:var(--hl-tint);border-radius:6px;
  padding:1rem 1.3rem 1.1rem;margin-top:.4rem}
.pills{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 .8rem}
.pill{
  font-family:var(--font-sans);
  font-size:var(--fs-label);
  font-weight:700;
  line-height:var(--lh-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  font-style:normal;
  color:var(--hl);
  border:1px solid var(--hl-line);
  border-radius:999px;
  padding:.32rem .85rem;
  background:var(--hl-soft);
}

.article-rich .rail{margin-top:1rem}
.rail .inner{
  font-family:var(--font-serif);
  font-size:var(--fs-card);
  font-weight:400;
  line-height:var(--lh-card);
  letter-spacing:var(--ls-body);
  font-style:normal;
  border-left:2px solid var(--hl);
  background:var(--bg-3);
  border-radius:0 5px 5px 0;
  padding:1rem 1.3rem;
  display:flex;
  flex-wrap:wrap;
  gap:.35rem .9rem;
  align-items:center;
  color:var(--ink);
}
.rail .inner .sep{color:var(--label)}

/* =================== VALUE SPLIT (interactive) =================== */
.flow{background:var(--bg)}
.article-rich .flow-head{margin-bottom:1.8rem}
.flow-head h2{
  }
.article-rich .flow-head p{color:var(--dim);margin-top:.7rem;margin-bottom:0}
.article-rich p.flow-caption{
  font-family:var(--font-sans);
  font-size:var(--fs-small);
  font-weight:400;
  line-height:var(--lh-small);
  letter-spacing:var(--ls-small);
  font-style:normal;
  margin-top:1.6rem;
  margin-bottom:0;
  color:var(--dim);
}
.dual{display:grid;grid-template-columns:minmax(0,1fr);gap:1.2rem}
.dpanel{background:linear-gradient(180deg,var(--bg-2),var(--bg));border:1px solid var(--line);border-radius:10px;
  padding:clamp(1.1rem,2.5vw,1.6rem);min-width:0;display:flex;flex-direction:column}
.dp-h .dp-tag{
  font-family:var(--font-sans);
  font-size:var(--fs-label);
  font-weight:700;
  line-height:var(--lh-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  font-style:normal;
  color:var(--label);
}
.dp-h h3{
  font-family:var(--font-sans);
  font-size:var(--fs-h3);
  font-weight:600;
  line-height:var(--lh-h3);
  letter-spacing:var(--ls-h3);
  font-style:normal;
  color:var(--ink-strong);
  margin:.35rem 0 1.15rem;
}
.ctrls{display:flex;flex-direction:column;gap:.95rem;margin-bottom:1.2rem}
.ctrl .cq{
  font-family:var(--font-serif);
  font-size:var(--fs-card);
  font-weight:400;
  line-height:var(--lh-card);
  letter-spacing:var(--ls-body);
  font-style:normal;
  margin-bottom:.45rem;
  color:var(--ink);
}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:7px;overflow:hidden;flex-wrap:wrap;max-width:100%}
.seg button{
  font-family:var(--font-sans);
  font-size:var(--fs-small);
  font-weight:400;
  line-height:var(--lh-small);
  letter-spacing:var(--ls-small);
  font-style:normal;
  cursor:pointer;
  color:var(--label);
  background:transparent;
  border:none;
  padding:.45rem .85rem;
  transition:background .2s,color .2s,box-shadow .2s;
  border-right:1px solid var(--line-2);
}
.seg button:last-child{border-right:none}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--hl-soft);color:var(--hl-strong);font-weight:600;box-shadow:inset 0 -2px 0 var(--hl)}
.dbar{height:26px;border-radius:5px;overflow:hidden;display:flex;background:var(--bg-3);border:1px solid var(--line);margin-bottom:.55rem}
.dbar>div{transition:width .45s ease}
.seg-inv{background:var(--hl)}
.seg-op{background:var(--muted)}
.seg-non,.dlegend i.hatch{background:repeating-linear-gradient(45deg,var(--line-2),var(--line-2) 4px,transparent 4px,transparent 8px)}
.dlegend{
  font-family:var(--font-sans);
  font-size:var(--fs-label);
  font-weight:700;
  line-height:var(--lh-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  font-style:normal;
  display:flex;
  flex-wrap:wrap;
  gap:.3rem 1rem;
  color:var(--dim);
  margin-bottom:1.1rem;
}
.dlegend span{display:inline-flex;align-items:center;gap:.35rem}
.dlegend i{width:10px;height:10px;border-radius:2px;display:inline-block;flex:none}
.dlegend i.k-inv{background:var(--hl)}
.dlegend i.k-op{background:var(--muted)}
.dout{margin-top:auto;border-top:1px solid var(--line);padding-top:.95rem}
.dout .do-who{
  font-family:var(--font-sans);
  font-size:var(--fs-label);
  font-weight:700;
  line-height:var(--lh-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  font-style:normal;
  color:var(--hl);
  margin-bottom:.4rem;
}
.article-rich .dout p{
  font-family:var(--font-serif);
  font-size:var(--fs-card);
  font-weight:400;
  line-height:var(--lh-card);
  letter-spacing:var(--ls-body);
  font-style:normal;
  margin:0;
  color:var(--ink);
}
/* stacked panels: questions sit beside their toggles when there is room */
@media(min-width:621px){
  .ctrl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.4rem 1.2rem;align-items:center}
  .ctrl .cq{margin-bottom:0}
}

/* =================== PULL QUOTE =================== */
.article-rich .pq{padding-block:clamp(2.4rem,6vw,4.4rem)}
.article-rich .pq .col{border-left:2px solid var(--hl);padding-left:clamp(1.1rem,3vw,1.8rem)}
.pq blockquote{
  font-family:var(--font-serif);
  font-size:var(--fs-quote);
  font-weight:400;
  line-height:var(--lh-quote);
  letter-spacing:var(--ls-quote);
  font-style:normal;
  margin:0;
  color:var(--ink-strong);
  text-wrap:balance;
}
.pq .mark{font-family:var(--font-serif);color:var(--hl);font-size:var(--fs-quote);line-height:0;display:block;height:1rem;opacity:.75}

/* footnote markers: tiny coral punctuation */
sup.fn{font-family:var(--font-sans);font-size:.62em;line-height:0}
.article-rich sup.fn a{color:var(--coral);text-decoration:none;padding:0 .1em}
.article-rich sup.fn a:hover{text-decoration:underline}

/* =================== CLOSE =================== */
.close{background:linear-gradient(180deg,var(--bg),var(--bg-2));border-top:1px solid var(--line)}

/* reveal system: visible by default; JS opts elements into animate-on-scroll */
html.js .article-rich .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
html.js .article-rich .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html.js .article-rich .reveal{opacity:1!important;transform:none!important;transition:none}
  .article-rich .scrollcue .arrow{animation:none}
  .article-rich .steps .spine i{transition:none}
  .article-rich .dbar>div{transition:none}
  .article-rich *{scroll-behavior:auto!important}
}

/* =================== SITE CHROME COEXISTENCE =================== */
body.article-page.article-rich-page{overflow-x:hidden}

/* Gate sits between hero and gated body; no side padding so section backgrounds run full bleed */
.article-rich .article-gate-region{margin-top:0;padding-inline:0}
.article-rich .article-gate{left:50%;right:auto;transform:translateX(-50%);width:min(28rem, calc(100% - 2 * var(--gut)))}
html:not(.article-unlocked) body.article-locked .article-rich .article-gate-region{min-height:32rem}
html.article-unlocked .article-rich .article-gated,
body.article-page:not(.article-locked) .article-rich .article-gated{display:block}

/* Sources & notes + disclaimer (reading measure) */
.article-rich .article-foot{padding-top:2.4rem;padding-bottom:1rem;border-top:1px solid var(--line)}
.article-rich .article-foot .eyebrow{color:var(--coral)}
.article-rich .article-sources{color:var(--muted)}
.article-rich .article-sources li{
  margin:0 0 .85rem;
  color:var(--muted);
}
.article-rich .article-sources li strong{color:var(--ink);font-weight:600}
.article-rich .article-sources a{color:var(--dim)}
.article-rich .article-sources a.fn-back{text-decoration:none;color:var(--muted)}
.article-rich .article-disclaimer p:not(.eyebrow),
.article-rich .article-disclaimer [data-legal="short-disclaimer"]{
  color:var(--muted);
  max-width:none;
}
.article-rich .full-link{
  font-family:var(--font-sans);
  font-size:var(--fs-small);
  font-weight:600;
  line-height:var(--lh-small);
  letter-spacing:var(--ls-small);
  font-style:normal;
  color:var(--dim);
}
.article-rich .full-link:hover{color:var(--ink-strong)}

/* Author blurb (reading measure) */
.article-rich .article-about{padding-top:2rem;padding-bottom:2.5rem;border-top:1px solid var(--line)}
.article-rich .article-about-inner{display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px 24px;align-items:start}
.article-rich .article-about-portrait{margin:0;width:96px;height:96px;border-radius:2px;overflow:hidden}
.article-rich .article-about-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.article-rich .article-about h2{
  font-family:var(--font-sans);
  font-size:var(--fs-h3);
  font-weight:600;
  line-height:var(--lh-h3);
  letter-spacing:var(--ls-h3);
  font-style:normal;
  max-width:none;
  margin:.2rem 0 .8rem;
}
.article-rich .article-about p:not(.eyebrow){
  color:var(--dim);
  max-width:none;
}
.article-rich .article-about .eyebrow{margin:0 0 .5rem}
.article-rich .about-links a{
  font-family:var(--font-sans);
  font-size:var(--fs-small);
  font-weight:600;
  line-height:var(--lh-small);
  letter-spacing:var(--ls-small);
  font-style:normal;
  color:var(--dim);
}
.article-rich .about-links a:hover{color:var(--ink-strong)}
@media(max-width:900px){
  .article-rich .article-about-inner{grid-template-columns:72px minmax(0,1fr);gap:16px}
  .article-rich .article-about-portrait{width:72px;height:72px}
}

.article-rich .colophon-note{
  font-family:var(--font-sans);
  font-size:var(--fs-small);
  font-weight:400;
  line-height:var(--lh-small);
  letter-spacing:var(--ls-small);
  font-style:normal;
  margin-top:0;
  margin-bottom:0;
  padding-top:0;
  padding-bottom:2.5rem;
  color:var(--muted);
}

/* inline-styled helpers in the artifact markup, mapped to the scale */
.article-rich p.mono{font-family:var(--font-sans);font-size:var(--fs-label);font-weight:700;line-height:var(--lh-label);letter-spacing:var(--ls-label);text-transform:uppercase}
.article-rich .opex .okey-note{
  font-family:var(--font-serif);
  font-size:var(--fs-card);
  font-weight:400;
  line-height:var(--lh-card);
  letter-spacing:var(--ls-body);
  font-style:normal;
  margin-top:.9rem;
  color:var(--ink);
}
.article-rich .article-about p.disclose{font-style:normal;color:var(--dim);margin-top:.8rem}

/* Card and panel body text: same Source Serif voice as the paragraphs (scale token --fs-card) */
.article-rich .article-about p:not(.eyebrow):not(.about-links){font-family:var(--font-serif);font-size:var(--fs-card);font-weight:400;line-height:var(--lh-card);letter-spacing:var(--ls-body);color:var(--ink)}
.article-rich .article-gate-card .gate-lede{font-family:var(--font-serif);font-size:var(--fs-card);font-weight:400;line-height:var(--lh-card);letter-spacing:var(--ls-body);color:var(--ink)}
/* Author disclosure: muted small serif, set apart from the bio */
.article-rich .article-about p.disclose:not(.eyebrow):not(.about-links){font-size:var(--fs-small);line-height:var(--lh-card);color:var(--muted);font-style:normal;margin-top:.8rem}