/* ═══════════════════════════════════════════════════════════
   article.css — the 94 blog posts.

   The long-form design is a marketing page: numbered sections,
   staggered photography, dark bands. An article is a document,
   so it drops all of that and keeps the system's voice in the
   parts that carry it — the paper header, Archivo display type,
   rounded photography — around a single reading measure.
   Extends site.css; tokens come from there unchanged.
   ═══════════════════════════════════════════════════════════ */

/* ─── Document header ─────────────────────────────────────
   .dochead in site.css carries the rhythm and the closing brass
   rule. An article narrows the measure — and the rule follows it,
   since site.css hangs it off .wrap rather than the viewport. */
.art-head__in{max-width:calc(var(--wrap) - 120px)}
.art-head h1{max-width:20ch;font-size:clamp(2.1rem,4.6vw,3.6rem)}

/* ─── Body ──────────────────────────────────────────────── */
.art-body{background:#fff;padding-block:clamp(46px,6vw,72px) clamp(56px,7vw,88px)}
/* One column, set to a reading measure and centred; everything inside inherits it.
   Tables and figures break out a little wider, which is all the width they need. */
.art-body .wrap{max-width:calc(68ch + var(--gut) * 2)}

.art-body .copy{max-width:none}
.art-body .copy+.copy{margin-top:18px}
.art-body p{margin-top:0}
.art-body .copy p+p{margin-top:18px}

/* Sub-headings. The marketing h2 is display-scale and would shout inside prose, so
   the article steps both levels down; space, not rules, sets them off. */
.art-h{color:var(--ink);letter-spacing:-.028em}
h2.art-h{
  font-size:clamp(1.45rem,2.6vw,1.95rem);
  line-height:1.12;
  margin-top:clamp(44px,5vw,64px);
}
h3.art-h{
  font-size:1.1875rem;
  line-height:1.3;
  margin-top:clamp(28px,3vw,38px);
}
.art-h+.copy,.art-h+.art-ul,.art-h+.art-ol,.art-h+.art-table{margin-top:16px}

/* A run of has-medium-font-size paragraphs. Live they are styled sub-heads that were
   never marked up as headings; promoting them would break the heading-order
   guarantee, so they read as one here instead. */
.art-body .copy--med{margin-top:clamp(30px,3.4vw,42px)}
.art-body .copy--med p{
  font-size:1.1875rem;line-height:1.4;color:var(--ink);
  letter-spacing:-.015em;
}
.art-body .copy--med strong{font-weight:700}

/* Links pick up the system's navy-with-brass-underline treatment from site.css;
   the article sets them on stray paragraphs outside .copy too. */
.art-body a{color:var(--navy);text-decoration-color:var(--brass);text-underline-offset:3px}
.art-body a:hover{color:var(--brass-lo)}

/* ─── Lists ─────────────────────────────────────────────── */
.art-ul,.art-ol{margin-top:20px;display:grid;gap:11px}
.art-ul li,.art-ol li{position:relative;padding-left:28px}
.art-ul>li::before{
  content:"";position:absolute;left:2px;top:.62em;
  width:8px;height:8px;border-radius:50%;background:var(--brass);
}
.art-ol{counter-reset:art-ol}
.art-ol>li{counter-increment:art-ol;padding-left:36px}
.art-ol>li::before{
  content:counter(art-ol);
  position:absolute;left:0;top:.12em;
  font-size:.9375rem;font-weight:800;color:var(--navy);
}
/* Nested lists step down to a hairline dash. */
.art-ul .art-ul,.art-ol .art-ul{margin-top:10px;gap:8px}
.art-ul .art-ul>li::before{
  width:9px;height:1px;background:var(--line);
  transform:none;top:.85em;
}

/* ─── Tables ────────────────────────────────────────────── */
.art-table{
  margin-top:clamp(24px,3vw,34px);
  margin-inline:calc(var(--gut) * -1);
  padding-inline:var(--gut);
  overflow-x:auto;
}
.art-table table{border-collapse:collapse;width:100%;min-width:420px;font-size:.9375rem}
.art-table th{
  text-align:left;font-weight:600;color:var(--ink);
  font-size:.875rem;
  padding:0 18px 12px 0;border-bottom:2px solid var(--ink);
}
.art-table th strong{font-weight:inherit}
.art-table td{padding:13px 18px 13px 0;border-bottom:1px solid var(--line);vertical-align:top}
.art-table tr:last-child td{border-bottom:0}
.art-table th:last-child,.art-table td:last-child{padding-right:0}

/* ─── Featured photo ────────────────────────────────────── */
/* Natural size, centred, capped a little wider than the text measure. The intrinsic
   width attribute does the capping, so a 300px source sits small and deliberate
   instead of being stretched to fill — these photos vary too much to crop. */
.art-hero{
  margin:0 auto clamp(34px,4vw,48px);
  width:fit-content;max-width:100%;
}
.art-hero img{max-width:100%;border-radius:var(--r-lg);background:var(--paper)}

/* ─── Figures ───────────────────────────────────────────── */
.art-fig{margin-top:clamp(26px,3vw,36px)}
.art-fig img{margin-inline:auto;border-radius:var(--r-md)}

/* ─── The site-wide CTA below the article ───────────────── */


@media (max-width:620px){
  .art-head h1{max-width:none}
  .art-ul li,.art-ol li{padding-left:24px}
  .art-ol>li{padding-left:32px}
}