/* ═══════════════════════════════════════════════════════════════════
   NPolls — article internals.

   Stripping each article's embedded <style> removed its colours, which
   was the point — they hardcoded a dark card and would not follow the
   theme. But those blocks were also carrying the LAYOUT: .card, .grid,
   .note, .chips and the FAQ <details> all lost their structure and the
   content collapsed into flat text.

   All 62 articles come from the same generator, so the vocabulary is
   shared and one stylesheet covers them. Counted across a six-article
   sample: .card 72, .grid 18, .note 15, .bullets 14, <details> 19.
   ═══════════════════════════════════════════════════════════════════ */

/* Article-authored containers must not fight the page shell. */
.prose .wrap,
.prose .blog-article,
.prose article,
.prose section { max-width: none; padding: 0; margin: 0; width: auto; }
.prose section + section { margin-top: 2.2em; }

/* ── Headings ───────────────────────────────────────────────────────
   The display face is deliberately quirky and works at hero size; at
   subhead size inside running text it reads as a novelty. Article
   headings use the body face with weight instead. */
.prose h2,
.prose h3,
.prose h4,
.prose .sec-title {
  font-family: var(--body);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.25;
  color: var(--txt);
}
.prose h2, .prose .sec-title {
  font-size: clamp(21px, 2.5vw, 27px);
  margin: 2em 0 .7em;
  padding-bottom: .45em;
  border-bottom: 1px solid var(--edge);
  scroll-margin-top: 96px;
}
.prose h3 { font-size: clamp(18px, 2vw, 21px); margin: 1.7em 0 .5em; scroll-margin-top: 96px; }
.prose h4 { font-size: 16.5px; margin: 1.4em 0 .4em; color: var(--txt-2); }

/* ── Intro / hero block ─────────────────────────────────────────── */
.prose .hero,
.prose .intro {
  background: var(--glass); border: 1px solid var(--edge);
  border-radius: var(--r-2); padding: 22px 26px; margin: 0 0 26px;
  backdrop-filter: blur(16px);
}
.prose .hero h1, .prose .intro h1 { font-size: clamp(22px, 2.6vw, 28px); margin: 0 0 8px; border: 0; padding: 0; }
.prose .dek { font-size: 16px; color: var(--txt-2); margin: 0; }

/* ── Cards, the workhorse ───────────────────────────────────────── */
.prose .card {
  position: relative;
  background: var(--glass); border: 1px solid var(--edge);
  border-radius: var(--r-2); padding: 20px 24px; margin: 0 0 18px;
  backdrop-filter: blur(16px);
  transition: border-color var(--fast) var(--ease), box-shadow var(--mid) var(--ease);
}
.prose .card:hover { border-color: var(--edge-2); }
.prose .card > :first-child { margin-top: 0; }
.prose .card > :last-child { margin-bottom: 0; }
.prose .card h2, .prose .card h3, .prose .card .sec-title {
  border: 0; padding: 0; margin-top: 0;
}

/* ── Grids ──────────────────────────────────────────────────────── */
.prose .grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px; margin: 0 0 20px; align-items: start;
}
.prose .grid > .card { margin: 0; height: 100%; }
@media (max-width: 620px) { .prose .grid { grid-template-columns: 1fr; } }

/* ── Notes and callouts ─────────────────────────────────────────────
   These carried a dark background in the original and are the one place
   the accent earns a solid fill. */
.prose .note,
.prose .callout {
  position: relative;
  background: var(--glass-2); border: 1px solid var(--edge);
  border-left: 3px solid var(--c3);
  border-radius: var(--r); padding: 16px 20px; margin: 0 0 20px;
  font-size: .97em;
}
.prose .note > :first-child, .prose .callout > :first-child { margin-top: 0; }
.prose .note > :last-child,  .prose .callout > :last-child  { margin-bottom: 0; }
.prose .note strong:first-child,
.prose .callout strong:first-child { color: var(--c3); }

/* ── Chips, pills, badges ───────────────────────────────────────── */
.prose .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
/* A badge is sometimes a whole sentence in these articles, so it has to
   be able to wrap rather than run past the measure. */
.prose p.badge{ display:block; max-width:100%; }
.prose .chip,
.prose .pill,
.prose .badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; padding: 6px 13px; border-radius: 99px;
  background: var(--glass-2); border: 1px solid var(--edge); color: var(--txt-2);
  white-space: nowrap;
}
.prose .badge { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }

/* ── Lists ──────────────────────────────────────────────────────── */
.prose .bullets { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 10px; }
.prose .bullets li { position: relative; padding-left: 26px; margin: 0; }
.prose .bullets li::before {
  content: ""; position: absolute; left: 6px; top: .62em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--grad); box-shadow: 0 0 9px var(--c3);
}

/* ── Key / value rows ───────────────────────────────────────────── */
.prose .row {
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--edge);
}
.prose .row:last-child { border-bottom: 0; }
.prose .k { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-3); font-weight: 700; min-width: 130px; }
.prose .v { color: var(--txt); font-weight: 600; }

/* ── Contents list ──────────────────────────────────────────────── */
.prose .on-this-page {
  background: var(--glass); border: 1px solid var(--edge); border-radius: var(--r-2);
  padding: 18px 22px; margin: 0 0 26px;
}
.prose .on-this-page ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.prose .on-this-page a { color: var(--txt-2); text-decoration: none; font-size: 15px; }
.prose .on-this-page a:hover { color: var(--c3); }

/* ── FAQ accordions ─────────────────────────────────────────────────
   19 across the sample, and with the original CSS gone they rendered as
   bare disclosure triangles on unstyled text. */
.prose details {
  background: var(--glass); border: 1px solid var(--edge);
  border-radius: var(--r); margin: 0 0 10px; overflow: hidden;
  transition: border-color var(--fast) var(--ease);
}
.prose details[open] { border-color: var(--edge-2); }
.prose details > summary {
  cursor: pointer; list-style: none; padding: 15px 20px 15px 46px;
  font-weight: 600; font-size: 16px; color: var(--txt); position: relative;
  transition: background var(--fast) var(--ease);
}
.prose details > summary::-webkit-details-marker { display: none; }
.prose details > summary:hover { background: var(--glass-2); }
/* Custom marker: a chevron that rotates open. */
.prose details > summary::before {
  content: ""; position: absolute; left: 20px; top: 50%;
  width: 8px; height: 8px; margin-top: -5px;
  border-right: 2px solid var(--c3); border-bottom: 2px solid var(--c3);
  transform: rotate(-45deg); transition: transform var(--mid) var(--ease);
}
.prose details[open] > summary::before { transform: rotate(45deg); margin-top: -7px; }
.prose details > *:not(summary) { padding: 0 20px; }
.prose details > *:not(summary):last-child { padding-bottom: 18px; }

/* ── Tables ─────────────────────────────────────────────────────── */
.prose .table,
.prose table {
  width: 100%; border-collapse: collapse; margin: 0 0 22px;
  font-size: 15px; display: block; overflow-x: auto;
  border: 1px solid var(--edge); border-radius: var(--r);
}
.prose th, .prose td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--edge); }
.prose thead th {
  font-size: 11px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--txt-3); font-weight: 700; background: var(--glass-2);
}
.prose tbody tr:last-child td { border-bottom: 0; }
.prose tbody tr:hover { background: var(--glass); }

/* Articles ship inline <script> for their own widgets; nothing should
   render if one fails to run. */
.prose script { display: none; }

@media (max-width: 620px) {
  .prose .card, .prose .hero, .prose .intro { padding: 16px 18px; }
  .prose .k { min-width: 0; }
}


/* ═══════════════════════════════════════════════════════════════════
   Embedded poll — [poll:slug] inside an article body.

   Two things fought the first version of this and both are handled by
   specificity here rather than by hoping about load order:

     1. np-legacy.css sets `.vote-btn { width: 100% }` and loads AFTER
        this file, so the compact Vote button stretched to 730px and
        crushed everything beside it. `.poll-embed .pe-vote` is two
        classes and wins regardless of order.
     2. The embed sits inside `.prose`, which indents lists and spaces
        list items. Both are reset here — this is a widget, not prose.
   ═══════════════════════════════════════════════════════════════════ */
.poll-embed{
  position:relative; overflow:hidden;
  margin:36px 0; padding:26px 28px 22px; border-radius:26px;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(var(--c1-rgb),.13), transparent 58%),
    radial-gradient(ellipse at 88% 100%, rgba(var(--c5-rgb),.13), transparent 58%),
    var(--glass);
  border:1px solid var(--edge);
  backdrop-filter:blur(20px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 24px 60px -34px rgba(0,0,0,.8);
}
/* Faint grid, matching the site's ground. */
.poll-embed::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.45;
  background-image:
    linear-gradient(var(--edge) 1px, transparent 1px),
    linear-gradient(90deg, var(--edge) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%, #000, transparent 75%);
          mask-image:radial-gradient(ellipse at 50% 0%, #000, transparent 75%);
}
.poll-embed > *{ position:relative; z-index:1; }

.poll-embed .pe-kicker{
  display:flex; align-items:center; gap:8px; margin:0 0 12px;
  font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--txt-2); max-width:none;
}
.poll-embed .pe-q{
  margin:0 0 22px; font-family:var(--display); font-weight:800;
  font-size:clamp(17px,2vw,21px); line-height:1.28; letter-spacing:-.02em;
  border:0; padding:0;
}
.poll-embed .pe-q a{ color:var(--txt); text-decoration:none; }
.poll-embed .pe-q a:hover{ color:var(--c1); }

/* Reset the prose list treatment. */
.poll-embed .pe-list{
  list-style:none; margin:0; padding:0; display:grid; gap:10px; max-width:none;
}
.poll-embed .pe-list > li{ margin:0; padding:0; list-style:none; }
.poll-embed .pe-list > li::marker{ content:none; }

.poll-embed .pe-row{
  display:flex; align-items:center; gap:14px;
  padding:12px 14px; border-radius:16px;
  background:var(--glass-2); border:1px solid transparent;
  transition:border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.poll-embed .pe-row:hover{ border-color:var(--edge-2); }
.poll-embed .pe-row.is-lead{
  background:rgba(var(--c1-rgb),.08);
  border-color:rgba(var(--c1-rgb),.30);
}

.poll-embed .pe-face{
  flex:0 0 auto; width:48px; height:48px; border-radius:50%; overflow:hidden;
  border:2px solid rgba(255,255,255,.14); background:var(--glass-2);
  box-shadow:0 8px 20px rgba(0,0,0,.45);
}
.poll-embed .pe-face img{
  width:100%; height:100%; object-fit:cover; display:block;
  margin:0; border-radius:0; max-width:none;
}

.poll-embed .pe-b{ flex:1 1 auto; min-width:0; display:grid; gap:7px; }
.poll-embed .pe-top{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
}
.poll-embed .pe-name{
  font-family:var(--display); font-weight:700; font-size:15px; color:var(--txt);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.poll-embed .pe-pct{
  font-family:var(--display); font-weight:800; font-size:18px;
  color:var(--txt-2); font-variant-numeric:tabular-nums; flex:0 0 auto;
}
.poll-embed .pe-row.is-lead .pe-pct{ color:var(--c1); }

.poll-embed .pe-track{
  display:block; height:8px; border-radius:99px; overflow:hidden;
  background:rgba(255,255,255,.07);
}
:root[data-theme="light"] .poll-embed .pe-track{ background:rgba(10,18,38,.08); }
/* No entrance animation on result bars.
 *
 * These used `animation: <name> .8s ... backwards` with a keyframe of
 * `from { width: 0 }`. When that animation does not run — and in the
 * embedded poll it reliably did not — `backwards` holds the FROM state
 * permanently, so every bar rendered at 0px while the label beside it
 * said 50%. Measured: 0px animated, 300px with the animation removed.
 *
 * A bar that silently reads zero is a worse failure than no animation,
 * and the transition below still animates the bar when a vote lands,
 * which is the movement that actually means something. */
.poll-embed .pe-track i{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--c5),var(--c3));
  transition:width .8s var(--spring);
}
.poll-embed .pe-row.is-lead .pe-track i{ background:var(--grad-cta); }

/* The fix for the stretched button: two classes beat np-legacy's one. */
.poll-embed .pe-vote{
  flex:0 0 auto; width:auto; min-width:0;
  padding:9px 20px; font-size:12.5px; border-radius:100px;
}

.poll-embed .pe-foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin:18px 0 0; padding-top:15px;
  border-top:1px solid var(--edge);
  font-size:12.5px; color:var(--txt-3); max-width:none;
}
.poll-embed .pe-foot a{ color:var(--c3); text-decoration:none; font-weight:600; }
.poll-embed .pe-foot a:hover{ text-decoration:underline; }
.poll-embed .vote-status{ margin:12px 0 0; }

@media (max-width:600px){
  .poll-embed{ padding:20px 16px 18px; border-radius:20px; }
  .poll-embed .pe-row{ flex-wrap:wrap; gap:11px; }
  .poll-embed .pe-face{ width:40px; height:40px; }
  .poll-embed .pe-b{ flex-basis:calc(100% - 130px); }
  .poll-embed .pe-vote{ flex-basis:100%; }
}
@media (prefers-reduced-motion:reduce){
  /* No entrance animation on result bars.
 *
 * These used `animation: <name> .8s ... backwards` with a keyframe of
 * `from { width: 0 }`. When that animation does not run — and in the
 * embedded poll it reliably did not — `backwards` holds the FROM state
 * permanently, so every bar rendered at 0px while the label beside it
 * said 50%. Measured: 0px animated, 300px with the animation removed.
 *
 * A bar that silently reads zero is a worse failure than no animation,
 * and the transition below still animates the bar when a vote lands,
 * which is the movement that actually means something. */
.poll-embed .pe-track i{ transition:none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Editorial prose.

   Everything above this point styles the vocabulary the 62 legacy
   articles use — .card, .grid, .note, .callout. None of it touches plain
   semantic HTML, so an article written as ordinary <p>, <h2>, <ul> got
   almost no treatment at all and rendered as body text on a dark page.
   This is the treatment for that: measure, rhythm, a lede, a drop cap,
   real section marks, pull quotes and list markers.

   Scoped to `.prose >` where it could collide, so the legacy articles —
   whose paragraphs live inside .card and .wrap — are untouched.
   ═══════════════════════════════════════════════════════════════════ */

.article-body{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0;
}

/* ── Measure and rhythm ─────────────────────────────────────────── */
.prose{
  font-size:clamp(16.5px,1.15vw,18px);
  line-height:1.72;
  color:var(--txt-2);
  /* Slightly tighter than the browser default so long paragraphs do not
     drift; 68ch is about 12 words a line at this size. */
  max-width:68ch;
  margin-inline:auto;
  --flow:1.35em;
}
.prose > * + *{ margin-top:var(--flow); }
.prose > p{ margin:0; }
.prose strong{ color:var(--txt); font-weight:650; }
.prose em{ color:var(--txt); font-style:italic; }

/* The opening paragraph carries the piece: larger, lighter, brighter. */
.prose > p:first-of-type{
  font-size:1.16em;
  line-height:1.62;
  color:var(--txt);
  font-weight:400;
}
/* Drop cap, on clean semantic articles only — a legacy article's first
   paragraph sits inside .card and never matches `.prose > p`. */
.prose > p:first-of-type::first-letter{
  float:left;
  font-family:var(--display);
  font-weight:800;
  font-size:3.1em;
  line-height:.84;
  margin:.06em .12em 0 0;
  background:var(--grad-cta);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}


/* ── Links ──────────────────────────────────────────────────────── */
.prose > p a, .prose > ul a, .prose > ol a, .prose blockquote a{
  color:var(--txt);
  text-decoration:none;
  background-image:linear-gradient(var(--c1),var(--c1));
  background-size:100% 1px;
  background-repeat:no-repeat;
  background-position:0 100%;
  padding-bottom:1px;
  transition:background-size var(--fast) var(--ease), color var(--fast) var(--ease);
}
.prose > p a:hover, .prose > ul a:hover, .prose > ol a:hover{
  color:var(--c1);
  background-size:100% 2px;
}

/* ── Lists ──────────────────────────────────────────────────────── */
.prose > ul, .prose > ol{
  margin-top:var(--flow);
  padding:0; list-style:none;
  display:grid; gap:.7em;
}
.prose > ul > li, .prose > ol > li{
  position:relative;
  padding-left:1.8em;
  margin:0;
}
.prose > ul > li::before{
  content:"";
  position:absolute; left:.28em; top:.66em;
  width:7px; height:7px; border-radius:2px;
  background:var(--grad-cta);
  transform:rotate(45deg);
}
.prose > ol{ counter-reset:li; }
.prose > ol > li{ counter-increment:li; }
.prose > ol > li::before{
  content:counter(li);
  position:absolute; left:0; top:.12em;
  font-family:var(--mono); font-size:12px; font-weight:600;
  color:var(--c1);
}
.prose > ul > li > strong:first-child,
.prose > ol > li > strong:first-child{ color:var(--txt); }

/* ── Quotes ─────────────────────────────────────────────────────────
   A blockquote is a change of voice, so it gets a different measure and
   its own weight rather than an indent. */
.prose > blockquote{
  position:relative;
  margin:2em 0;
  padding:0 0 0 1.6em;
  border-left:3px solid transparent;
  border-image:var(--grad-cta) 1;
  font-family:var(--display);
  font-weight:600;
  font-size:1.18em;
  line-height:1.5;
  letter-spacing:-.015em;
  color:var(--txt);
}
.prose > blockquote p{ margin:0; }
.prose > blockquote cite{
  display:block; margin-top:.7em;
  font-family:var(--body); font-size:.72em; font-weight:500;
  font-style:normal; color:var(--txt-3);
}

/* ── Rules, figures, tables ─────────────────────────────────────── */
.prose > hr{
  border:0; height:1px; margin:2.6em 0;
  background:linear-gradient(90deg, transparent, var(--edge-2) 30%, var(--edge-2) 70%, transparent);
}
.prose > figure{ margin:2em 0; }
.prose > figure img, .prose > p > img{
  width:100%; height:auto; display:block;
  border-radius:var(--r-2); border:1px solid var(--edge);
}
.prose > figure figcaption{
  margin-top:.7em; font-size:13px; color:var(--txt-3); text-align:center;
}
.prose > table{
  width:100%; border-collapse:collapse; font-size:.92em;
  display:block; overflow-x:auto;
}
.prose > table th{
  text-align:left; padding:10px 14px; white-space:nowrap;
  font-size:11px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--txt-3); border-bottom:1px solid var(--edge-2);
}
.prose > table td{ padding:11px 14px; border-bottom:1px solid var(--edge); }

.prose code{
  font-family:var(--mono); font-size:.86em;
  padding:.15em .45em; border-radius:6px;
  background:var(--glass-2); border:1px solid var(--edge); color:var(--c1);
}
.prose > pre{
  padding:18px 20px; border-radius:var(--r-2); overflow-x:auto;
  background:var(--bg-2); border:1px solid var(--edge);
  font-family:var(--mono); font-size:13.5px; line-height:1.6;
}
.prose > pre code{ background:none; border:0; padding:0; color:var(--txt-2); }

/* The closing italic note that ends a piece. */
.prose > p:last-child em:only-child{
  display:block; padding-top:1.2em; border-top:1px solid var(--edge);
  font-size:.9em; color:var(--txt-3); font-style:italic;
}

/* An embedded poll should break the measure — it is a different object
   from the prose around it. */
.prose .poll-embed{
  width:min(100%, 780px);
  margin-inline:calc(50% - min(50%, 390px));
}

/* ── Contents rail ──────────────────────────────────────────────────
   Built by np.js from the h2s. Only appears when there is room for it
   and the article actually has sections. */
.toc{
  position:sticky; top:96px;
  align-self:start;
  max-height:calc(100vh - 130px); overflow-y:auto;
  padding-right:8px;
  scrollbar-width:thin;
}
.toc-h{
  margin:0 0 12px; font-size:10.5px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--txt-3);
}
.toc ol{ list-style:none; margin:0; padding:0; display:grid; gap:2px; counter-reset:toc; }
.toc li{ margin:0; counter-increment:toc; }
.toc a{
  display:flex; gap:10px; align-items:baseline;
  padding:7px 10px; border-radius:9px;
  font-size:13px; line-height:1.4; color:var(--txt-3); text-decoration:none;
  border-left:2px solid transparent;
  transition:color var(--fast) var(--ease), background var(--fast) var(--ease),
             border-color var(--fast) var(--ease);
}
.toc a::before{
  content:counter(toc,decimal-leading-zero);
  font-family:var(--mono); font-size:10px; color:var(--txt-3); flex:0 0 auto;
}
.toc a:hover{ color:var(--txt); background:var(--glass-2); }
.toc a.is-on{
  color:var(--txt); border-left-color:var(--c1); background:var(--glass-2);
}
.toc a.is-on::before{ color:var(--c1); }

/* The two-column layout applies ONLY when a contents rail was actually
   built. Declaring `grid-template-columns: 220px 1fr` unconditionally
   was a real bug: on the 62 legacy articles the rail stays hidden, the
   grid still defines two tracks, and the prose dropped into the 220px
   one — measured at 220px wide with 56 elements overflowing it.
   np.js adds .has-toc only after it finds two or more sections. */
@media (min-width:1180px){
  .article-body.has-toc{
    grid-template-columns:220px minmax(0,1fr);
    gap:56px;
  }
  /* The prose keeps its own measure inside the wider column rather than
     stretching to fill it. */
  .article-body.has-toc .prose{ margin-inline:0; }
}
@media (max-width:1179px){
  .toc{ display:none; }
}

@media (max-width:620px){
  .prose{ font-size:16.5px; line-height:1.68; }
  .prose > p:first-of-type::first-letter{ font-size:2.7em; }
  .prose > h2{ margin-top:2em; }
  .prose .poll-embed{ width:100%; margin-inline:0; }
}

/* ═══════════════════════════════════════════════════════════════════
   Article blocks.

   Typography alone does not fix a wall of text. A reader scrolling past
   six identical paragraphs has nothing to catch on, so they leave. These
   are the things that go BETWEEN paragraphs: numbers pulled out of the
   prose, a quote at a different size, a two-sided comparison, a boxed
   takeaway.

   The vocabulary is deliberately small and plain-HTML, because it has to
   be typeable into the Body field of the admin form:

     <div class="stats">  <div><b>33 km</b><span>label</span></div> … </div>
     <blockquote class="pull">…</blockquote>
     <div class="vs"> <div class="vs-side"><h4>A</h4><ul>…</ul></div> … </div>
     <div class="key"><h4>Title</h4><p>…</p></div>
     <p class="lead-in"><strong>Lead.</strong> Rest of the sentence…</p>
   ═══════════════════════════════════════════════════════════════════ */

/* ── Stat strip ──────────────────────────────────────────────────────
   Numbers buried mid-paragraph are invisible. Pulled out, they are the
   thing a scanning reader stops on. */
.prose .stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;
  margin:2.2em 0;
  border-radius:var(--r-2);
  overflow:hidden;
  background:var(--edge);
  border:1px solid var(--edge);
}
.prose .stats > div{
  padding:20px 22px;
  background:var(--bg-2);
  display:grid; gap:7px; align-content:start;
}
.prose .stats b{
  font-family:var(--display); font-weight:800;
  font-size:clamp(24px,3vw,32px); line-height:1;
  letter-spacing:-.03em;
  background:var(--grad-cta);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-variant-numeric:tabular-nums;
}
.prose .stats span{
  font-size:12.5px; line-height:1.45; color:var(--txt-3);
}

/* ── Pull quote ─────────────────────────────────────────────────────
   A change of pace, not a citation. Breaks the measure so the eye
   registers it as a different kind of object. */
.prose .pull{
  position:relative;
  margin:2.4em 0;
  padding:0 0 0 2.2em;
  border:0;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(19px,2.1vw,24px);
  line-height:1.36;
  letter-spacing:-.025em;
  color:var(--txt);
  text-wrap:balance;
}
.prose .pull::before{
  content:"\201C";
  position:absolute; left:-.06em; top:-.22em;
  font-family:var(--display); font-weight:800; font-size:2.6em; line-height:1;
  background:var(--grad-cta);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.prose .pull p{ margin:0; }
.prose .pull cite{
  display:block; margin-top:.7em;
  font-family:var(--body); font-size:.6em; font-weight:600;
  font-style:normal; letter-spacing:.02em; color:var(--txt-3);
}

/* ── Two-sided comparison ───────────────────────────────────────────
   For a piece whose whole subject is two sides, a table of differences
   does more than three paragraphs describing them. */
.prose .vs{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  margin:2.2em 0;
}
.prose .vs-side{
  padding:20px 22px; border-radius:var(--r-2);
  background:var(--glass); border:1px solid var(--edge);
  backdrop-filter:blur(14px);
}
.prose .vs-side h4{
  margin:0 0 14px; padding:0 0 12px;
  border-bottom:1px solid var(--edge);
  font-family:var(--display); font-weight:800; font-size:15px;
  letter-spacing:.02em; color:var(--txt);
  display:flex; align-items:center; gap:9px;
}
.prose .vs-side h4::before{
  content:""; width:9px; height:9px; border-radius:3px;
  background:var(--c1); transform:rotate(45deg); flex:0 0 auto;
}
.prose .vs-side:last-child h4::before{ background:var(--c5); }
.prose .vs-side ul{
  margin:0; padding:0; list-style:none; display:grid; gap:9px;
}
.prose .vs-side li{
  position:relative; margin:0; padding-left:1.3em;
  font-size:14px; line-height:1.55; color:var(--txt-2);
}
.prose .vs-side li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:5px; height:5px; border-radius:50%; background:var(--txt-3);
}
@media (max-width:620px){
  .prose .vs{ grid-template-columns:1fr; }
}

/* ── Key takeaway ───────────────────────────────────────────────────
   One boxed conclusion per section at most. Any more and it stops
   meaning "this is the important bit". */
.prose .key{
  position:relative; overflow:hidden;
  margin:2.2em 0; padding:20px 24px 20px 26px;
  border-radius:var(--r-2);
  background:rgba(var(--c1-rgb),.06);
  border:1px solid rgba(var(--c1-rgb),.24);
}
.prose .key::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--grad-cta);
}
.prose .key h4{
  margin:0 0 8px; font-family:var(--display); font-weight:800;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--c1);
}
.prose .key p{ margin:0; font-size:15px; line-height:1.6; color:var(--txt); }
.prose .key p + p{ margin-top:.7em; }

/* ── Lead-in ────────────────────────────────────────────────────────
   Bolding the first few words gives a scanning reader an entry point to
   every paragraph without adding another heading. */
.prose .lead-in > strong:first-child{
  color:var(--c1); font-weight:700;
}

/* ── Aside note ─────────────────────────────────────────────────── */
.prose .side{
  margin:2em 0; padding:16px 20px;
  border-left:2px solid var(--edge-2); border-radius:0 var(--r) var(--r) 0;
  background:var(--glass-2);
  font-size:14.5px; line-height:1.6; color:var(--txt-2);
}
.prose .side strong{ color:var(--txt); }

/* Blocks are objects, not prose: they keep their own top margin rather
   than inheriting the paragraph flow. */
.prose > .stats, .prose > .pull, .prose > .vs,
.prose > .key, .prose > .side{ margin-inline:0; }

/* ═══════════════════════════════════════════════════════════════════
   Legacy articles, brought up to the editorial standard.

   62 of the 64 published articles use the older vocabulary — .intro,
   .card, .grid, .table/.row/.k/.v, .note, .chips — and between them they
   carry every one of the site's 77,432 article views. The editorial
   rules written earlier only reach plain semantic HTML, so the pages
   that actually earn the traffic were the plainest on the site.

   This closes that gap without touching a single article's markup. The
   rules below override the earlier, thinner definitions of the same
   classes; they are appended after them deliberately.
   ═══════════════════════════════════════════════════════════════════ */

/* ── The intro is the lede ───────────────────────────────────────────
   It is the first thing a reader sees and it was styled as a generic
   glass box. Now it reads as an opening: larger, brighter, with the
   accent rule the new articles get. */
.prose .intro{
  position:relative;
  background:rgba(var(--c1-rgb),.05);
  border:1px solid rgba(var(--c1-rgb),.20);
  border-radius:var(--r-2);
  padding:24px 28px 24px 30px;
  margin:0 0 30px;
  overflow:hidden;
}
.prose .intro::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--grad-cta);
}
.prose .intro > p{
  font-size:1.1em; line-height:1.62; color:var(--txt); margin:0;
}
.prose .intro > p + p{ margin-top:.8em; }
.prose .intro strong{ color:var(--txt); font-weight:650; }

/* ── Chips ───────────────────────────────────────────────────────── */
.prose .chips{ gap:7px; margin-top:16px; }
.prose .chip{
  font-size:11.5px; font-weight:600; letter-spacing:.01em;
  padding:5px 12px; border-radius:99px;
  background:var(--glass-2); border:1px solid var(--edge-2); color:var(--txt-2);
}

/* ── Cards become sections, not boxes ───────────────────────────────
   A page of ten bordered boxes reads as a form. Dropping the border and
   keeping only a top rule turns them back into sections of one article,
   which is what they are. */
.prose .card{
  background:none;
  border:0;
  border-top:1px solid var(--edge);
  border-radius:0;
  padding:26px 0 0;
  margin:0 0 30px;
  backdrop-filter:none;
  counter-increment:sec;
}
.prose .card:hover{ border-color:var(--edge); }
/* An <aside class="card"> is the article's own word for "this is beside
   the argument, not part of it", so that is the only card kept as a box.
   Everything else is a sequential section and is numbered. */
.prose aside.card{
  background:var(--glass); border:1px solid var(--edge);
  border-radius:var(--r-2); padding:22px 24px; margin:1.6em 0;
  counter-increment:none;
}
.prose aside.card > h2{ font-size:16.5px; margin-bottom:.6em; }
.prose aside.card > h2::before,
.prose aside.card > h2::after{ display:none; }

/* ── Section headings, whatever wraps them ───────────────────────────
   These articles were written by hand over two years and each one wraps
   its sections differently: some in .card, some in bare <section>, the
   newest in nothing at all. Chasing wrappers meant the treatment kept
   missing articles — the Palestinian-deaths explainer, sixth by traffic,
   was still rendering its headings in the body font.
   
   So the rule targets the heading itself. The counter lives on the h2,
   not the wrapper, so numbering works at any nesting depth. An <aside>
   is the one exception: it is beside the argument, so it is not a
   numbered step in it. */
.prose{ counter-reset:sec; }

/* A heading may be an <h2>, or any element carrying .sec-title — both
   conventions exist across these articles, and one article uses both at
   once. `.prose .sec-title` is (0,2,0) and silently outranked
   `.prose h2` (0,1,1), which is why a single article kept the body face
   while every other one changed. Listing both here settles it by source
   order; the cascade picks one value for counter-increment, so nothing
   double-counts. */
.prose h2,
.prose .sec-title{
  position:relative;
  counter-increment:sec;
  font-family:var(--display); font-weight:800; letter-spacing:-.025em;
  font-size:clamp(20px,2.3vw,26px); line-height:1.22;
  color:var(--txt); margin:2.2em 0 .7em; padding:0; border:0;
  scroll-margin-top:96px; text-wrap:balance;
}
.prose .card > h2:first-child,
.prose section > h2:first-child,
.prose > h2:first-child{ margin-top:0; }

.prose h2::before,
.prose .sec-title::before{
  content:counter(sec,decimal-leading-zero);
  display:block; margin-bottom:.5em;
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.22em; color:var(--c1);
}
.prose h2::after,
.prose .sec-title::after{
  content:""; display:block; width:52px; height:2px; margin-top:.55em;
  border-radius:2px; background:var(--grad-cta);
}

/* Asides sit outside the numbered sequence. */
.prose aside h2,
.prose aside .sec-title{
  counter-increment:none;
  font-size:16.5px; margin:0 0 .6em;
}
.prose aside h2::before, .prose aside h2::after,
.prose aside .sec-title::before, .prose aside .sec-title::after{ display:none; }

.prose h3{
  font-family:var(--display); font-weight:700;
  font-size:clamp(16.5px,1.7vw,19px); line-height:1.3;
  margin:1.7em 0 .5em; color:var(--txt); border:0; padding:0;
  scroll-margin-top:96px;
}

/* ── Body copy inside cards ─────────────────────────────────────── */
.prose .card p,
.prose .intro p,
.prose .note p{ font-size:1em; line-height:1.7; color:var(--txt-2); max-width:68ch; }
.prose .card p + p{ margin-top:1.1em; }
.prose .card strong{ color:var(--txt); font-weight:650; }

/* Lists get the diamond markers the new articles use. */
.prose .card ul{ margin:1.1em 0; padding:0; list-style:none; display:grid; gap:.65em; }
.prose .card ul > li{ position:relative; padding-left:1.7em; margin:0; line-height:1.6; color:var(--txt-2); }
.prose .card ul > li::before{
  content:""; position:absolute; left:.26em; top:.62em;
  width:6px; height:6px; border-radius:2px;
  background:var(--grad-cta); transform:rotate(45deg);
}
.prose .card ol{ margin:1.1em 0; padding-left:1.4em; display:grid; gap:.65em; }
.prose .card ol > li{ line-height:1.6; color:var(--txt-2); padding-left:.3em; }
.prose .card ol > li::marker{ color:var(--c1); font-family:var(--mono); font-size:.85em; }

/* ── The key/value table is data — treat it as data ──────────────── */
.prose .table{
  margin:1.2em 0; border-radius:var(--r);
  border:1px solid var(--edge); overflow:hidden;
}
.prose .table .row{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; padding:12px 16px; margin:0; border:0;
  border-bottom:1px solid var(--edge);
  background:var(--glass-2);
}
.prose .table .row:last-child{ border-bottom:0; }
.prose .table .row:nth-child(odd){ background:transparent; }
.prose .table .k{
  flex:0 0 auto; font-size:13px; font-weight:600; color:var(--txt-2);
  min-width:0;
}
.prose .table .v{
  flex:0 0 auto; text-align:right;
  font-family:var(--display); font-weight:700; font-size:14.5px; color:var(--txt);
  font-variant-numeric:tabular-nums;
}

/* ── Notes and callouts ─────────────────────────────────────────── */
.prose .note,
.prose .callout{
  margin:1.4em 0; padding:14px 18px;
  border-left:2px solid var(--edge-2); border-radius:0 var(--r) var(--r) 0;
  background:var(--glass-2); border-top:0; border-right:0; border-bottom:0;
  font-size:.94em; line-height:1.6; color:var(--txt-2);
}
.prose .note strong:first-child,
.prose .callout strong:first-child{ color:var(--c1); }

/* ── Grid ───────────────────────────────────────────────────────────
   These were two columns inside a 736px measure, which gave 360px of
   body text per column — far too narrow to read comfortably. The
   article's sections are sequential anyway, so they stack. */
.prose .grid{
  display:grid; grid-template-columns:1fr; gap:0; margin:0;
}

/* ── Details / FAQ ──────────────────────────────────────────────── */
.prose details{
  margin:.6em 0; padding:0; border-radius:var(--r);
  background:var(--glass-2); border:1px solid var(--edge);
  overflow:hidden;
}
.prose details > summary{
  cursor:pointer; padding:13px 16px; list-style:none;
  font-weight:650; font-size:.97em; color:var(--txt);
  display:flex; align-items:center; gap:10px;
}
.prose details > summary::-webkit-details-marker{ display:none; }
.prose details > summary::before{
  content:"+"; flex:0 0 auto; width:18px; height:18px; border-radius:5px;
  display:grid; place-items:center; font-size:13px; font-weight:700;
  background:rgba(var(--c1-rgb),.14); color:var(--c1);
}
.prose details[open] > summary::before{ content:"\2212"; }
.prose details[open] > summary{ border-bottom:1px solid var(--edge); }
.prose details > *:not(summary){ padding:0 16px; }
.prose details > *:not(summary):first-of-type{ padding-top:14px; }
.prose details > *:not(summary):last-child{ padding-bottom:14px; }

@media (max-width:620px){
  .prose .intro{ padding:18px 18px 18px 20px; }
  .prose .card{ padding-top:22px; margin-bottom:24px; }
  .prose .grid > .card{ padding:18px 18px; }
  .prose .table .row{ flex-wrap:wrap; gap:4px; }
  .prose .table .v{ text-align:left; }
}