/* Shared article components for the nine series articles (WP1).
   Loaded after each article stylesheet and article-navigation.css, so equal-specificity rules here win.
   A-articles-01: Subscribe block (moved here from nine duplicated per-article copies).
   A-articles-03: generated series grid (current-article card).
   A-articles-04: hide/reveal header (opt-in by /assets/js/article-navigation.js) and Back-to-top.
   A-font-01 (3): article prose size, leading and measure. */

/* ---- A-font-01 (3): prose. 17px, line-height 1.65. The measure is 33em (~561px at 17px), which
   holds Inter body text near 68-70 characters per line: Inter's "0" glyph (the CSS ch unit) is
   0.631em, so a literal 68ch would be ~729px, wider than the 716px column, and change nothing.
   Only direct, unclassed prose paragraphs are constrained; tables, figures, callouts, evidence
   blocks, the series grid and the Subscribe block keep the full column. ---- */
.page > .body > p:not([class]){font-size:17px;line-height:1.65;max-width:33em}
.page > .body > p.lead{font-size:19px;line-height:1.6;max-width:33em}

/* ---- A-articles-01: Subscribe block, two rows: copy on top; form and proof link below. ---- */
.email-cap{background:var(--tint2);border:1px solid var(--border);border-left:3px solid var(--green);border-radius:4px;padding:14px 16px;margin:10px 0;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"copy copy" "form proof";align-items:start;gap:10px 16px}
.email-cap .copy{grid-area:copy;min-width:0}
.email-cap .copy b{display:block;color:var(--navy);font-weight:700;font-size:13px;margin-bottom:3px}
.email-cap .copy span{color:var(--muted);font-size:11px;line-height:1.5}
.email-cap form{grid-area:form;display:flex;gap:6px;flex-wrap:wrap;min-width:0}
.email-cap .form-privacy{flex-basis:100%;font-size:9px;line-height:1.45;color:var(--muted)}
.email-cap .form-privacy a{color:inherit}
.email-cap input{padding:7px 9px;border:1px solid var(--border);border-radius:3px;font-size:11.5px;font-family:inherit;background:#fff;width:180px}
.email-cap input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(26,107,127,.12)}
.email-cap button{background:var(--green);color:var(--navy);font-weight:700;font-size:11.5px;padding:7px 12px;border-radius:3px;border:none;cursor:pointer;font-family:inherit;letter-spacing:.02em}
.email-cap .vfy-note{grid-area:proof;margin:0;padding-top:7px}
@media (max-width:836px){
  .email-cap{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "form" "proof";gap:12px}
  .email-cap form{flex-direction:column}
  .email-cap input{width:100%}
  .email-cap .vfy-note{margin:10px 0 0;padding-top:0}
}
@media (forced-colors:active){
  .email-cap input:focus{outline:2px solid Highlight;outline-offset:1px}
}

/* ---- A-articles-03: series grid generated from data/article-series.json. ---- */
.sn-card:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.sn-card--current{background:#fff;border-left-color:var(--navy);box-shadow:inset 0 0 0 1px var(--teal)}
.sn-card--current:hover{transform:none;border-left-color:var(--navy)}
.sn-card--current .ar{color:var(--navy)}
@media (prefers-reduced-motion:reduce){
  .sn-card:hover{transform:none}
}

/* ---- A-articles-04 R1: hide/reveal header. Sticky only when the shared script opts in, so the
   no-JS header keeps its normal flow. ---- */
.article-site-nav.article-site-nav--autohide{position:sticky;top:0}
.article-site-nav.is-hidden{transform:translateY(-100%)}
.article-site-nav a:focus-visible{outline:2px solid #22d3ee;outline-offset:3px;border-radius:2px}
html.article-nav-autohide{scroll-padding-top:calc(var(--article-nav-height, 64px) + 12px)}

/* ---- A-articles-04 R2: Back-to-top, bottom-right, above the Cookie settings control
   (consent.css: fixed at bottom 16px, ~48px tall, so its top edge is ~64px; 96px leaves ~32px). ---- */
.back-to-top{position:fixed;right:24px;bottom:96px;z-index:30;display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:11px 16px;border-radius:999px;background:#0c1726;border:1px solid #52718f;color:#e9f4ff;font-family:Inter,"Segoe UI",sans-serif;font-size:13px;font-weight:600;letter-spacing:.02em;line-height:1;cursor:pointer;box-shadow:0 8px 24px -8px rgba(0,0,0,.55)}
.back-to-top .btt-arrow{color:#22d3ee;font-size:14px}
.back-to-top:hover{color:#fff;border-color:#22d3ee}
.back-to-top:focus-visible{outline:3px solid #22d3ee;outline-offset:2px}
.back-to-top[hidden]{display:none}
@media (max-width:640px){
  .back-to-top{right:16px;bottom:96px}
}

@media (prefers-reduced-motion:no-preference){
  .article-site-nav.article-site-nav--autohide{transition:transform .2s ease}
  .back-to-top{animation:article-back-to-top-in .25s ease-out}
}
@keyframes article-back-to-top-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}