/* =========================================================================
   article.css: newsroom article layout (pages/news-*.html), Sept 2026
   Load after base.css and style.css:
     <link rel="stylesheet" href="../base.css"/>
     <link rel="stylesheet" href="../style.css"/>
     <link rel="stylesheet" href="../article.css"/>
   Reuses the design tokens in style.css (colour, type scale, spacing, radius, shadow), the shared
   .svc-breadcrumb, .svc-related cards and .cta-banner, and inside diagrams the .proj-svg drawing
   vocabulary (.d-*). Everything new is prefixed .art-*.
   Markup, components and usage rules: ARTICLE-GUIDE.md (build folder).
   ========================================================================= */

.art {
  --art-text: clamp(1.0625rem, 0.99rem + 0.3vw, 1.1875rem);  /* body copy: 17px phone -> 19px desktop */
  --art-measure: 68ch;                                         /* readable line length */
  --art-col: 47rem;                                            /* article column */
  --art-rail: 14.5rem;                                         /* sticky TOC rail (>= 1100px) */
  --art-gap: clamp(3rem, 4.5vw, 4.5rem);
  --art-pull: 0px;                                             /* how far the lead photo rises into the navy band */
  --art-navy-tint: #EEF2F8;
  --art-navy-line: #C9D3E4;
  --art-red-line: #F1C7CF;
  --art-gold-tint: #FBF5E6;
  --art-gold-line: #E6D3A1;
  --art-gold-ink: #6E4E07;                                     /* 7.9:1 on the gold tint */
  background: var(--color-surface);
}

/* =========================================================================
   1. Hero: navy title band (breadcrumb, topic, H1, dek, meta row), then the lead photo
      rising into it. Text sits on solid navy, so contrast never depends on the photo.
   ========================================================================= */
.art-hero-band {
  background: linear-gradient(135deg, var(--color-navy-dark) 0%, var(--color-navy) 100%);
  color: #fff;
  padding-block: clamp(var(--space-5), 3vw, var(--space-8)) calc(var(--art-pull) + clamp(var(--space-8), 5vw, var(--space-12)));
}
.art-hero-band :focus-visible { outline-color: #fff; }
.art-hero-text { max-width: 54rem; margin-top: clamp(var(--space-8), 5vw, var(--space-12)); }
.art-topic {
  display: inline-flex; align-items: center; gap: var(--space-3);
  max-width: none;
  margin-bottom: var(--space-4);
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--on-navy-strong);
}
.art-topic::before { content: ''; width: 28px; height: 2px; background: var(--color-primary); flex-shrink: 0; }
.art-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.3rem + 2.3vw, 3rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: #fff;
  overflow-wrap: break-word;
}
.art-dek {
  max-width: 60ch;
  margin-top: var(--space-5);
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
  line-height: var(--leading-prose);
  color: var(--on-navy-strong);
}
.art-meta {
  list-style: none;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2) 0;
  margin-top: var(--space-6);
  font-size: var(--text-sm); font-weight: 500;
  color: var(--on-navy);
}
.art-meta > li { display: inline-flex; align-items: center; max-width: none; white-space: nowrap; }
.art-meta > li:not(:last-child)::after {        /* separator trails its item, so a wrapped line never starts with one */
  content: '';
  width: 4px; height: 4px;
  margin-inline: var(--space-3);
  border-radius: 50%;
  background: var(--color-primary);
}
.art-meta strong { font-weight: 700; color: var(--on-navy-strong); }
/* Byline link ("By American Engineering" -> About): same colour as the meta row (about 9:1 on the navy band),
   marked as a link by its underline; white focus ring, since crimson measures under 3:1 on navy */
.art-meta a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  border-radius: var(--radius-sm);
}
.art-meta a:hover { color: #fff; text-decoration-thickness: 2px; }
.art-meta a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Lead photo (a real <picture>; fetchpriority="high", never lazy) */
.art-lede { position: relative; margin: calc(-1 * var(--art-pull)) 0 0; }
.art-lede img {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: var(--hero-pos, 50% 45%);
  border-radius: var(--radius-panel);
  background: var(--color-surface-2);
  box-shadow: var(--shadow-lg);
}
.art-lede-caption {
  max-width: none;
  margin-top: var(--space-3);
  font-size: var(--text-xs); line-height: 1.55;
  color: var(--color-text-muted);
}
.art-lede-caption a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.art-lede-caption a:hover { color: var(--color-primary-text); }
@media (min-width: 1100px) {
  .art { --art-pull: calc(0.2 * min(100vw - 3rem, 73.25rem)); }   /* ~47% of a 21:9 photo sits on navy */
}
/* Below 1100px (no TOC rail) the whole article is one centred column: breadcrumb, title block, lead photo
   and body share the same left and right edges instead of leaving an empty strip on the right. */
@media (max-width: 1099px) {
  .art-hero .svc-breadcrumb,
  .art-hero-text,
  .art-lede,
  .art-body { max-width: var(--art-col); margin-inline: auto; }
}
@media (min-width: 901px) and (max-width: 1099px) {
  .art { --art-pull: calc(0.2 * min(100vw - 3rem, var(--art-col))); }
}
@media (max-width: 900px) {
  .art { --art-pull: calc(0.24 * min(100vw - 3rem, var(--art-col))); }
  .art-lede img { aspect-ratio: 16 / 9; border-radius: var(--radius-card); object-position: var(--hero-pos-mobile, var(--hero-pos, 50% 45%)); }
}
@media (max-width: 600px) {
  /* Full-bleed pieces on phones are sized against the article's own width (a query container), so they
     don't depend on the .container gutter in style.css and never include a desktop scrollbar (100vw would).
     The first declaration is the fallback for browsers without container units. */
  .art { --art-pull: 0px; container-type: inline-size; }
  .art-lede {                                                     /* full-bleed photo on phones */
    max-width: none;
    margin-inline: calc(-1 * var(--space-6));
    margin-inline: calc(50% - 50cqi);
  }
  .art-lede img { border-radius: 0; box-shadow: none; }
  .art-lede-caption { padding-inline: var(--space-6); }
}

/* =========================================================================
   2. Layout: one column; from 1100px a sticky "In this article" rail on the left.
   ========================================================================= */
.art-layout {
  padding-block: clamp(var(--space-8), 5vw, var(--space-12)) clamp(var(--space-12), 7vw, var(--space-20));
}
.art-body { max-width: var(--art-col); min-width: 0; }
.art-rail { display: none; }
@media (min-width: 1100px) {
  .art-layout {
    display: grid;
    grid-template-columns: var(--art-rail) minmax(0, var(--art-col));
    column-gap: var(--art-gap);
    align-items: start;
  }
  .art-rail { display: block; align-self: stretch; }
  .art-toc { display: none; }
}

/* ---- Table of contents: rail (>= 1100px) and collapsible <details> (below) share the list styles ---- */
.art-toc-rail {
  position: sticky;
  top: calc(var(--header-h) + var(--space-6));
  max-height: calc(100vh - var(--header-h) - var(--space-12));
  overflow-y: auto;
  padding-bottom: var(--space-4);
}
.art-toc-title {
  max-width: none;
  margin-bottom: var(--space-3);
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-text-muted);
}
.art-toc-list { list-style: none; counter-reset: art-toc; border-left: 2px solid var(--color-divider); }
.art-toc-list > li { counter-increment: art-toc; max-width: none; }
.art-toc-list a {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  margin-left: -2px;
  padding: 0.45rem 0 0.45rem var(--space-3);
  border-left: 2px solid transparent;
  font-size: 0.9375rem; line-height: 1.4;
  color: var(--color-text-muted);
  text-decoration: none;
}
.art-toc-list a::before {
  content: counter(art-toc, decimal-leading-zero);
  font-size: 0.75rem; font-weight: 700;
  line-height: 1.85;
  color: var(--color-primary-text);
  font-variant-numeric: tabular-nums;
}
.art-toc-list a:hover { color: var(--color-navy); border-left-color: var(--color-primary); }
.art-toc-list a:focus-visible { outline-offset: 0; }

.art-toc {
  margin-top: var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}
.art-toc > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: 48px;
  padding: var(--space-3) var(--space-5);
  list-style: none;
  cursor: pointer;
  font-size: var(--text-sm); font-weight: 700;
  color: var(--color-navy);
  border-radius: var(--radius-card);
}
.art-toc > summary::-webkit-details-marker { display: none; }
.art-toc > summary::after {                     /* chevron */
  content: '';
  flex-shrink: 0;
  width: 9px; height: 9px;
  margin-right: 4px;
  border-right: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--transition-interactive);
}
.art-toc[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.art-toc > summary:focus-visible { outline-offset: -2px; }
.art-toc .art-toc-list { margin: 0 var(--space-5) var(--space-5); }

/* =========================================================================
   3. Key takeaways (first thing in the column)
   ========================================================================= */
.art-takeaways {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.art-takeaways-title {
  display: flex; align-items: center; gap: var(--space-3);
  max-width: none;
  padding: var(--space-3) var(--space-6);
  background: var(--color-navy);
  color: #fff;
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.art-takeaways-title svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-primary-on-dark); }
.art-takeaways ul { list-style: none; display: grid; gap: var(--space-3); padding: var(--space-5) var(--space-6) var(--space-6); }
.art-takeaways li {
  position: relative;
  max-width: none;
  padding-left: var(--space-7);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  color: var(--color-text);
}
.art-takeaways li::before {                     /* check mark */
  content: '';
  position: absolute; left: 3px; top: 0.42em;
  width: 0.62em; height: 0.34em;
  border-left: 2.5px solid var(--color-primary);
  border-bottom: 2.5px solid var(--color-primary);
  transform: rotate(-45deg);
}

/* =========================================================================
   4. Prose: rhythm, headings, links, default lists
   ========================================================================= */
.art-prose {
  --measure: var(--art-measure);
  margin-top: clamp(var(--space-8), 4vw, var(--space-10));
  font-size: var(--art-text);
  line-height: 1.72;
  color: var(--color-text);
  overflow-wrap: break-word;
}
.art-prose::after { content: ''; display: table; clear: both; }   /* contain inset figures */
.art-prose > * + * { margin-top: var(--space-5); }
.art-prose h2 {
  clear: both;
  margin-top: clamp(var(--space-12), 6vw, var(--space-16));
  scroll-margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.125rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-navy);
}
.art-prose h2::before {                         /* short crimson rule: a visual section break */
  content: '';
  display: block;
  width: 2.5rem; height: 3px;
  margin-bottom: var(--space-4);
  border-radius: 2px;
  background: var(--color-primary);
}
.art-prose h3 {
  margin-top: var(--space-8);
  scroll-margin-top: var(--space-4);
  font-family: var(--font-body);
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-navy);
}
.art-prose > h2 + *,
.art-prose > h3 + * { margin-top: var(--space-3); }
/* Boxed components get a little more air; photos and diagrams more still. :where() keeps these at
   class-level specificity, so a following H2/H3 keeps its own larger top margin. */
.art-prose > :where(.art-callout, .art-keyfig, .art-table, .art-steps, .art-cases, blockquote),
.art-prose > :where(.art-callout, .art-keyfig, .art-table, .art-steps, .art-cases, blockquote) + :where(:not(h2, h3)) { margin-top: var(--space-6); }
.art-prose > :where(.art-figure--full, .art-diagram) { margin-block: var(--space-8); }
.art-prose > :where(.art-figure--full, .art-diagram) + :where(:not(h2, h3)) { margin-top: 0; }
.art-prose a {
  color: var(--color-primary-text);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.art-prose a:hover { color: var(--color-primary-hover); text-decoration-thickness: 2px; }
.art-prose strong { font-weight: 700; }
.art-lead { font-size: 1.08em; }                /* optional: the opening paragraph, slightly larger */
.art-answer strong:first-child { color: var(--color-navy); }   /* "No." / "Often, yes." short answers */

/* Default bullets: small crimson diamonds */
/* Lists beside an inset photo are plain blocks (not grid/flex), so their lines wrap around the float and run
   full width again below it; item spacing is a top margin. */
.art-prose ul:not([class]),
.art-list { list-style: none; padding: 0; }
.art-prose ul:not([class]) > li + li,
.art-list > li + li,
.art-prose ol:not([class]) > li + li,
.art-checklist > li + li { margin-top: var(--space-3); }
.art-prose ul:not([class]) > li,
.art-list > li { position: relative; padding-left: 1.6em; }
.art-prose ul:not([class]) > li::before,
.art-list > li::before {
  content: '';
  position: absolute; left: 0.35em; top: 0.68em;
  width: 0.4em; height: 0.4em;
  border-radius: 1px;
  background: var(--color-primary);
  transform: rotate(45deg);
}
/* Default numbered list */
.art-prose ol:not([class]) { padding-left: 1.5em; }
.art-prose ol:not([class]) > li::marker { color: var(--color-primary-text); font-weight: 700; }

/* ---- Quotation from a source (keep the wording exact; cite the document and section) ---- */
.art-prose blockquote {
  clear: both;
  margin: 0;
  padding: var(--space-5) var(--space-6);
  background: var(--color-bg);
  border-left: 4px solid var(--color-navy);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
}
.art-prose blockquote p { font-family: var(--font-display); font-size: 1.0625em; line-height: 1.6; color: var(--color-navy); }
.art-prose blockquote cite { display: block; margin-top: var(--space-3); font-size: var(--text-sm); font-style: normal; color: var(--color-text-muted); }

/* ---- Numbered steps (a sequence the reader follows) ---- */
.art-steps {
  clear: both;
  list-style: none;
  counter-reset: art-step;
  padding: var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-card);
}
.art-steps > li {
  counter-increment: art-step;
  position: relative;
  max-width: none;
  padding: 0 0 var(--space-5) 3.25rem;
}
.art-steps > li:last-child { padding-bottom: 0; }
.art-steps > li::before {
  content: counter(art-step);
  position: absolute; left: 0; top: 0;
  width: 2.125rem; height: 2.125rem;
  border-radius: 50%;
  background: var(--color-navy);
  color: #fff;
  font: 700 1rem/2.125rem var(--font-body);
  text-align: center;
  font-variant-numeric: lining-nums;
}
.art-steps > li:not(:last-child)::after {      /* connector line */
  content: '';
  position: absolute; left: calc(1.0625rem - 1px); top: 2.5rem; bottom: 0.375rem;
  width: 2px;
  background: var(--art-navy-line);
}
.art-steps-title { display: block; margin-bottom: 2px; color: var(--color-navy); font-weight: 700; }

/* ---- Scenario cards (an "if this, then that" list with a bold lead) ---- */
.art-cases { clear: both; list-style: none; display: grid; gap: var(--space-3); padding: 0; }
.art-cases > li {
  max-width: none;
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-left: 3px solid var(--color-navy);
  border-radius: var(--radius-card);
}
.art-case-title { display: block; margin-bottom: var(--space-1); color: var(--color-navy); line-height: 1.45; }
/* A long card may hold one <p> per sentence, or a lead-in plus a short nested <ul role="list"> (diamond bullets). */
.art-cases > li > :where(p, ul) + :where(p, ul) { margin-top: var(--space-2); }
.art-cases > li > ul:not([class]) > li + li { margin-top: var(--space-1); }

/* ---- Checklist (what to record / what to do) ---- */
.art-checklist { list-style: none; padding: 0; }
.art-checklist > li { position: relative; padding-left: 2.25rem; }
.art-checklist > li::before {
  content: '';
  position: absolute; left: 0; top: 0.22em;
  width: 1.375rem; height: 1.375rem;
  border-radius: 50%;
  background: var(--color-primary-bg);
  border: 1.5px solid var(--color-primary);
}
.art-checklist > li::after {
  content: '';
  position: absolute; left: 0.45rem; top: calc(0.22em + 0.42rem);
  width: 0.5rem; height: 0.28rem;
  border-left: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: rotate(-45deg);
}

/* =========================================================================
   5. Tables: a bordered box with a navy caption bar. .art-table--stack turns rows into cards
      on phones (every <td> needs data-label="<column header>"); otherwise the box scrolls
      sideways inside itself (give the scroll box tabindex="0", role="region", aria-labelledby).
   ========================================================================= */
.art-table { clear: both; }
.art-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}
.art-table table { width: 100%; border-collapse: collapse; font-size: 0.9375em; line-height: 1.5; }
.art-table:not(.art-table--stack) table { min-width: 36rem; }   /* scroll variant: columns stay readable; the box scrolls */
.art-table caption {
  caption-side: top;
  padding: var(--space-3) var(--space-5);
  background: var(--color-navy);
  color: #fff;
  text-align: left;
  font-size: var(--text-sm); font-weight: 700; line-height: 1.4;
}
.art-table th,
.art-table td {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-divider);
  text-align: left; vertical-align: top;
  color: var(--color-text);
}
.art-table thead th {
  border-top: 0;
  background: var(--color-surface-2);
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-navy);
  white-space: nowrap;
}
.art-table tbody th { font-weight: 700; color: var(--color-navy); }
.art-table tbody tr:nth-child(even) { background: #FBFAF8; }
.art-table-note { max-width: none; margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
@media (max-width: 600px) {
  .art-table--stack table,
  .art-table--stack tbody,
  .art-table--stack tr,
  .art-table--stack th,
  .art-table--stack td { display: block; width: 100%; }
  .art-table--stack caption { display: block; }
  .art-table--stack thead {                   /* headers move into each cell's data-label */
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .art-table--stack tbody tr { padding: var(--space-4); border-top: 1px solid var(--color-divider); }
  .art-table--stack tbody tr:first-child { border-top: 0; }
  .art-table--stack tbody th { padding: 0 0 var(--space-2); border: 0; font-size: 1.0625rem; }
  .art-table--stack td {
    display: grid;
    grid-template-columns: 6.25rem minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-1) 0;
    border: 0;
  }
  .art-table--stack td::before {
    content: attr(data-label);
    padding-top: 0.2em;
    font-size: 0.6875rem; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--color-text-muted);
  }
}
@media (max-width: 420px) {                     /* narrow phones: label above its value */
  .art-table--stack td { display: block; padding: var(--space-1) 0 var(--space-2); }
  .art-table--stack td::before { display: block; padding-top: 0; }
}

/* =========================================================================
   6. Callouts: <div class="art-callout art-callout--<kind>" role="note">
      kinds: project ("What this means for your project"), watch ("Watch out"),
      deadline ("Key deadline"), example ("Worked example" / "Example"), note (neutral)
   ========================================================================= */
.art-callout {
  clear: both;
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-left: 4px solid var(--color-text-muted);
  border-radius: var(--radius-card);
  font-size: 0.95em;
}
.art-callout > * + * { margin-top: var(--space-3); }
.art-callout-title {
  display: flex; align-items: center; gap: var(--space-2);
  max-width: none;
  font-size: 0.75rem; font-weight: 700; line-height: 1.3;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-text-muted);
}
.art-callout-title svg { width: 18px; height: 18px; flex-shrink: 0; }
.art-callout--project { background: var(--art-navy-tint); border-color: var(--art-navy-line); border-left-color: var(--color-navy); }
.art-callout--project .art-callout-title { color: var(--color-navy); }
.art-callout--watch { background: var(--color-primary-bg); border-color: var(--art-red-line); border-left-color: var(--color-primary); }
.art-callout--watch .art-callout-title { color: var(--color-primary-text); }
.art-callout--deadline { background: var(--art-gold-tint); border-color: var(--art-gold-line); border-left-color: var(--color-gold); }
.art-callout--deadline .art-callout-title { color: var(--art-gold-ink); }
.art-callout--example { background: var(--color-surface); border-color: var(--color-border); border-left-color: var(--color-navy-light); }
.art-callout--example .art-callout-title { color: var(--color-navy); }

/* Worked-example sum (decorative restatement of the sentence above it: aria-hidden="true") */
.art-sum { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-2); font-variant-numeric: tabular-nums lining-nums; }
.art-sum-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 4.25rem;
  padding: var(--space-2) var(--space-3);
  background: var(--art-navy-tint);
  border: 1px solid var(--art-navy-line);
  border-radius: var(--radius-md);
  line-height: 1.2;
}
.art-sum-cell small { font-size: 0.6875rem; font-weight: 600; color: var(--color-text-muted); }
.art-sum-cell b { font-size: 1.0625rem; color: var(--color-navy); }
.art-sum-op { align-self: center; font-weight: 700; color: var(--color-text-muted); }
.art-sum-total { background: var(--color-navy); border-color: var(--color-navy); }
.art-sum-total small, .art-sum-total b { color: #fff; }

/* ---- "What this means for your project": a closing action panel that holds its own H2 ---- */
.art-prose > .art-action {
  clear: both;
  margin-top: clamp(var(--space-12), 6vw, var(--space-16));
  padding: clamp(var(--space-6), 4vw, var(--space-10));
  background: var(--art-navy-tint);
  border: 1px solid var(--art-navy-line);
  border-radius: var(--radius-panel);
}
.art-action > * + * { margin-top: var(--space-4); }
.art-prose .art-action > h2 { margin-top: 0; }

/* =========================================================================
   7. Key figures: big number + label, only for figures already stated in the text
   ========================================================================= */
.art-keyfig {
  clear: both;
  padding: var(--space-5) var(--space-6);
  background: var(--color-bg);
  border-top: 3px solid var(--color-navy);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
}
.art-stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--space-5) var(--space-8);
  padding: 0;
}
.art-stat { display: flex; flex-direction: column; gap: var(--space-2); max-width: none; }
.art-stat-value {
  font-family: var(--font-display);
  font-size: var(--text-stat);
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary);
  font-variant-numeric: lining-nums;
}
.art-stat-label { font-size: var(--text-sm); line-height: 1.5; color: var(--color-text); }
.art-keyfig-note {
  max-width: none;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
  font-size: var(--text-xs); line-height: 1.55;
  color: var(--color-text-muted);
}

/* =========================================================================
   8. Photo figures: full-width (column wide) and inset (floats right from 700px)
   ========================================================================= */
:where(.art-figure) { margin: 0; }             /* low specificity: the .art-prose spacing rules win */
.art-figure img {
  display: block;
  width: 100%; height: auto;
  border-radius: var(--radius-card);
  background: var(--color-surface-2);
}
.art-figure figcaption {
  max-width: none;
  margin-top: var(--space-3);
  font-size: var(--text-sm); line-height: 1.55;
  color: var(--color-text-muted);
}
.art-figure figcaption strong { color: var(--color-text); font-weight: 600; }
.art-credit { display: block; margin-top: 2px; font-size: var(--text-xs); }
.art-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; font-weight: 400; }
.art-credit a:hover { color: var(--color-primary-text); }
.art-figure--full { clear: both; }
@media (min-width: 700px) {
  .art-figure--inset {
    float: right;
    clear: right;
    width: min(40%, 18.5rem);
    margin: 0 0 var(--space-5) var(--space-7);
  }
  .art-prose > h3 { clear: right; }             /* an inset never runs past its own subsection */
  .art-prose > .art-figure--inset { margin-top: calc(var(--space-5) + 0.3em); }   /* top aligns with the next line of text */
  .art-prose > h2 + .art-figure--inset,
  .art-prose > h3 + .art-figure--inset { margin-top: calc(var(--space-3) + 0.3em); }
  .art-prose > h2 + .art-figure--inset + *,
  .art-prose > h3 + .art-figure--inset + * { margin-top: var(--space-3); }
}
@media (max-width: 699px) {
  .art-prose > .art-figure--inset { margin-block: var(--space-6); }
  .art-figure--inset img { aspect-ratio: 4 / 3; object-fit: cover; object-position: var(--fig-pos, 50% 50%); }
}

/* =========================================================================
   9. Diagram figure (original inline SVG; drawing classes are the .proj-svg / .d-* vocabulary)
   ========================================================================= */
:where(.art-diagram) { margin: 0; }
.art-diagram {
  clear: both;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-sm);
  container-type: inline-size;
}
.art-diagram-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-divider);
}
.art-diagram-title { max-width: none; font-size: var(--text-sm); font-weight: 700; line-height: 1.4; color: var(--color-navy); }
.art-diagram-tag {                              /* "Illustrative diagram — not to scale" (exact text, every diagram) */
  max-width: none;
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-primary-text);
}
.art-diagram .proj-svg { max-width: 30rem; }
.proj-svg .art-d-dashed { stroke-dasharray: 6 5; }                                   /* add to a .d-dim line */
.proj-svg .art-d-axis { fill: none; stroke: var(--d-ink); stroke-width: 2.5; stroke-linecap: round; }  /* time / distance axis */
.art-key { list-style: none; display: grid; gap: var(--space-3); margin-top: var(--space-4); padding: 0; }
.art-key > li {
  max-width: none;
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: var(--space-3);
  font-size: var(--text-sm); line-height: 1.55;
  color: var(--color-text);
}
.art-key-num {
  width: 1.5rem; height: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--color-navy);
  color: #fff;
  font-size: 0.75rem; font-weight: 700;
  font-variant-numeric: lining-nums;
}
.art-key-num--accent { background: var(--color-primary); }
.art-diagram figcaption {
  max-width: none;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
  font-size: var(--text-xs); line-height: 1.55;
  color: var(--color-text-muted);
}
@container (min-width: 40rem) {                 /* wide column: key beside the drawing */
  .art-diagram-body {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: center;
  }
  .art-diagram-body .art-key { margin-top: 0; }
}
@media (max-width: 600px) {
  .art-diagram {                               /* 8px from the screen edge so 17-unit SVG text stays >= 12px */
    margin-inline: calc(var(--space-2) - var(--space-6));
    margin-inline: calc(50% - 50cqi + var(--space-2));
    padding: var(--space-3) var(--space-2);
    border-radius: var(--radius-card);
  }
  .art-diagram-head,
  .art-key,
  .art-diagram figcaption { margin-inline: var(--space-2); }
}

/* =========================================================================
   10. Sources, disclaimer
   ========================================================================= */
.art-sources {
  margin-top: clamp(var(--space-12), 6vw, var(--space-16));
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-divider);
}
.art-sources-title {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-navy);
  scroll-margin-top: var(--space-4);
}
.art-sources-lead { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.art-sources-list { list-style: none; counter-reset: art-src; display: grid; gap: var(--space-3); margin-top: var(--space-5); padding: 0; }
.art-sources-list > li {
  counter-increment: art-src;
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: var(--space-2);
  max-width: none;
  font-size: var(--text-sm); line-height: 1.55;
  color: var(--color-text-muted);
}
.art-sources-list > li::before {
  content: counter(art-src);
  font-size: 0.75rem; font-weight: 700; line-height: 1.9;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.art-sources-list a {
  color: var(--color-primary-text);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
.art-sources-list a:hover { color: var(--color-primary-hover); text-decoration-thickness: 2px; }
.art-disclaimer {
  max-width: none;
  margin-top: var(--space-8);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg);
  border-radius: var(--radius-card);
  font-size: var(--text-xs); line-height: 1.6;
  color: var(--color-text-muted);
}
.art-disclaimer a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* =========================================================================
   11. After the article: related services (.svc-related cards from style.css) + More news
   ========================================================================= */
.art-more { background: var(--color-surface-warm); padding-block: clamp(var(--space-12), 7vw, var(--space-20)); }
.art-more-block + .art-more-block { margin-top: clamp(var(--space-12), 6vw, var(--space-16)); }
.art-more-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  margin-bottom: var(--space-6);
}
.art-more-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-navy);
}
.art-more .svc-related-card { background: var(--color-surface); }
.art-news { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); padding: 0; }
.art-news > li { max-width: none; }
.art-news-card {
  position: relative;
  height: 100%;
  display: flex; flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive), transform var(--transition-interactive);
}
.art-news-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(var(--lift)); }
.art-news-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--color-surface-2); }
.art-news-body { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); }
.art-news-tag {
  max-width: none;
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-primary-text);
}
.art-news-title { font-family: var(--font-display); font-size: 1.1875rem; font-weight: 700; line-height: 1.3; color: var(--color-navy); }
.art-news-title a { color: inherit; text-decoration: none; }
.art-news-title a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.art-news-desc { font-size: var(--text-sm); line-height: 1.6; color: var(--color-text-muted); }
.art-news-date { max-width: none; margin-top: auto; padding-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
@supports selector(:has(a)) {
  .art-news-title a:focus-visible { outline: none; }
  .art-news-card:has(a:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 3px; }
}
@media (max-width: 1000px) {
  .art-news { grid-template-columns: minmax(0, 1fr); }
  .art-news-card { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .art-news-card img { height: 100%; aspect-ratio: auto; min-height: 11rem; }
}
@media (max-width: 520px) {
  .art-news-card { display: flex; }
  .art-news-card img { height: auto; aspect-ratio: 16 / 9; min-height: 0; }
}

/* =========================================================================
   12. Small screens, motion, forced colours, print
   ========================================================================= */
@media (max-width: 600px) {
  .art-takeaways-title,
  .art-takeaways ul { padding-inline: var(--space-5); }
  .art-callout { padding: var(--space-4) var(--space-5); }
  .art-steps { padding: var(--space-5) var(--space-4); }
  .art-keyfig { padding: var(--space-4) var(--space-5); }
  .art-cases > li { padding: var(--space-4); }
}
@media (max-width: 480px) {                     /* sum as a row of values over a full-width total */
  .art-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .art-sum-op { display: none; }
  .art-sum-cell { min-width: 0; padding: var(--space-1) 2px; white-space: nowrap; }
  .art-sum-total { grid-column: 1 / -1; flex-direction: row; gap: var(--space-2); }
}
@media (prefers-reduced-motion: reduce) {
  .art-news-card:hover { transform: none; }
  .art-toc > summary::after { transition: none; }
}
@media (forced-colors: active) {
  .art-prose h2::before,
  .art-topic::before,
  .art-meta > li:not(:last-child)::after,
  .art-prose ul:not([class]) > li::before,
  .art-list > li::before,
  .art-steps > li::after { forced-color-adjust: none; background: CanvasText; }
  .art-steps > li::before,
  .art-key-num,
  .art-sum-cell { border: 1px solid CanvasText; }
  .art-takeaways li::before,
  .art-checklist > li::after { border-color: CanvasText; }
}
@media print {
  #site-header, #site-footer, .skip-link,
  .svc-breadcrumb, .art-rail, .art-toc, .art-more, .cta-banner { display: none !important; }
  .art { --art-pull: 0px; background: none; }
  .art-hero-band { background: none; color: #000; padding: 0 0 12pt; }
  .art-title { color: #000; font-size: 22pt; }
  .art-topic, .art-dek, .art-meta, .art-meta strong { color: #333; }
  .art-lede img { max-height: 8cm; box-shadow: none; border-radius: 0; }
  .art-layout { display: block; padding: 12pt 0 0; }
  .art-body { max-width: none; }
  .art-prose { font-size: 11pt; line-height: 1.5; }
  .art-prose h2 { margin-top: 18pt; }
  .art-prose h2, .art-prose h3 { break-after: avoid; }
  html, body { background: #fff !important; }
  .art-takeaways { box-shadow: none; }
  .art-callout, .art-figure, .art-diagram, .art-keyfig, .art-table, .art-prose blockquote,
  .art-steps > li, .art-cases > li, .art-checklist > li { break-inside: avoid; box-shadow: none; }
  .art-figure--inset { width: 35%; }
  .art-table--stack thead { position: static; width: auto; height: auto; clip: auto; clip-path: none; }
  .art-sources-list a::after { content: ' <' attr(href) '>'; font-size: 8pt; color: #333; overflow-wrap: anywhere; }
  .art-prose a, .art-sources-list a { color: #000; }
}