/* ═══════════════════════════════════════════════════════════
   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 — ink chrome, mono trail, brass hairline,
   Archivo display type — around a single reading measure.
   Extends site.css; tokens come from there unchanged.
   ═══════════════════════════════════════════════════════════ */

/* ─── Document header ───────────────────────────────────── */
.art-head{
  background:var(--ink);
  color:#fff;
  padding-block:clamp(30px,4vw,44px) clamp(38px,5vw,58px);
}
.art-head__in{max-width:calc(var(--wrap) - 120px)}
.art-head h1{
  margin-top:22px;
  max-width:20ch;
  font-size:clamp(1.95rem,4vw,3rem);
}
/* The brass hairline that closes the header — the same device the long-form section
   indices use, aligned to the text column rather than the viewport. */
.art-head__in::after{
  content:"";display:block;width:74px;height:2px;
  background:var(--brass);margin-top:clamp(26px,3vw,34px);
}

/* ─── 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 and marks h2 with a short brass rule. */
.art-h{color:var(--ink);letter-spacing:-.025em}
h2.art-h{
  font-size:clamp(1.35rem,2.4vw,1.8rem);
  line-height:1.14;
  margin-top:clamp(40px,4.5vw,58px);
  padding-top:22px;
  border-top:1px solid var(--line);
  position:relative;
}
h2.art-h::before{
  content:"";position:absolute;top:-1px;left:0;
  width:56px;height:2px;background:var(--brass);
}
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:7px;height:7px;background:var(--brass);
  transform:rotate(45deg);
}
.art-ol{counter-reset:art-ol}
.art-ol>li{counter-increment:art-ol;padding-left:36px}
.art-ol>li::before{
  content:counter(art-ol,decimal-leading-zero);
  position:absolute;left:0;top:.12em;
  font-family:var(--mono);font-size:.75rem;color:var(--brass-lo);
}
/* 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-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;
  padding:0 18px 12px 0;border-bottom:1px 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:3px;background:var(--paper)}

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

/* ─── The site-wide CTA below the article ───────────────── */
.band--art{border-top:1px solid var(--line)}

@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}
}