/* =============================================================================
   The Nonprofit Guide - Direction C, "The Almanac"
   Light ground throughout. Dark is used structurally, for furniture only:
   the masthead, the footer, and table headers. The reading column stays light,
   because positive polarity measurably wins for long reads.

   The dark token set is defined at the foot of this file but deliberately NOT
   wired to prefers-color-scheme. Enabling it is a one-line change, not a rebuild.
   ========================================================================== */

:root {
  /* ground. Warm, not clinical. Pure white reads as an admin panel. */
  --npg-base:        #FCFBF9;
  --npg-surface:     #F3F0EA;
  --npg-sunken:      #EAE5DC;

  /* type */
  --npg-ink:         #16212E;
  --npg-body:        #2A3340;
  --npg-muted:       #5C6775;

  /* structure */
  --npg-rule:        #E4DFD7;
  --npg-rule-strong: #C9C2B7;

  /* signal. Teal carries links and identity. Ochre carries attention:
     deadlines, cautions, verify-this. One hue cannot do both jobs. */
  --npg-accent:      #0F5B60;
  --npg-accent-deep: #0A4448;
  --npg-accent-tint: #E3EDEC;
  --npg-flag:        #9A5B18;
  --npg-flag-tint:   #F5EADC;

  /* reversed furniture. Deep navy, not near-black: dark enough to be
     furniture, warm enough not to read as a funeral notice. Used only on the
     masthead and the footer, so the page is never half black. */
  --npg-rev-bg:      #16212E;
  --npg-rev-raise:   #1E2B3A;
  --npg-rev-ink:     #F4F2EE;
  --npg-rev-muted:   #9AA3B0;
  --npg-rev-rule:    #2C3949;
  --npg-rev-accent:  #4FB3A8;

  /* families */
  --npg-serif: "IBM Plex Serif", Cambria, Georgia, "Times New Roman", serif;
  --npg-sans:  "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --npg-mono:  "IBM Plex Mono", Consolas, "Cascadia Mono", ui-monospace, monospace;

  /* three widths, each with one job */
  --npg-page:    84rem;   /* every band: masthead, footer, grids, tables */
  --npg-read:    48rem;   /* article body copy only */
  --npg-rail:    19rem;   /* apparatus rail beside an article body */
  --npg-measure: 48rem;   /* alias, kept so older rules keep working */
  --npg-wide:    84rem;   /* alias */

  /* rhythm */
  --npg-s10: 0.25rem;
  --npg-s20: 0.5rem;
  --npg-s30: 0.875rem;
  --npg-s40: 1.25rem;
  --npg-s50: 2rem;
  --npg-s60: 3rem;
  --npg-s70: 4.5rem;
}

/* -----------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--npg-base);
  color: var(--npg-body);
  font-family: var(--npg-serif);
  font-size: 1.1875rem;      /* 19px. R5: generous body type. */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--npg-ink);
  font-family: var(--npg-serif);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 0;
}

p, ul, ol, dl, figure, table, blockquote { margin: 0; }

a { color: var(--npg-accent); text-underline-offset: 0.14em; }
a:hover { color: var(--npg-accent-deep); }
a:focus-visible {
  outline: 2px solid var(--npg-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection { background: var(--npg-accent); color: #fff; }

.npg-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.npg-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--npg-ink); color: var(--npg-rev-ink);
  padding: var(--npg-s20) var(--npg-s40);
  font-family: var(--npg-sans); font-size: 0.875rem;
}
.npg-skip:focus { left: 0; }

/* -----------------------------------------------------------------------------
   Layout. R1: one measure, never a grid.
   -------------------------------------------------------------------------- */

.npg-shell { width: 100%; margin: 0 auto; padding-inline: 1.5rem; }
@media (min-width: 1100px) { .npg-shell { padding-inline: var(--npg-s50); } }
.npg-shell--wide    { max-width: var(--npg-page); }
.npg-shell--article { max-width: var(--npg-page); }
.npg-shell--measure { max-width: var(--npg-read); }

.npg-main { padding-block: var(--npg-s60) var(--npg-s70); }

/* Content flow: siblings get gap, not margins that collapse. */
.npg-flow { display: flex; flex-direction: column; gap: var(--npg-s40); }
.npg-flow > h2 { margin-top: var(--npg-s40); }
.npg-flow > h3 { margin-top: var(--npg-s30); }

/* Wide breakouts inside a measured column, for tables and figures. */
.npg-breakout {
  width: min(var(--npg-wide), 100vw - 2 * var(--npg-s40));
  margin-inline: calc(50% - min(var(--npg-wide), 100vw - 2 * var(--npg-s40)) / 2);
}

/* -----------------------------------------------------------------------------
   Masthead. Reversed furniture.
   -------------------------------------------------------------------------- */

.npg-masthead {
  background: var(--npg-rev-bg);
  color: var(--npg-rev-ink);
}

/* Wordmark, then navigation, then search. The nav takes the slack so the
   wordmark and the search box stay pinned to the two edges. */
.npg-masthead-inner {
  display: flex; align-items: center;
  gap: var(--npg-s40); flex-wrap: wrap;
  padding-block: var(--npg-s30);
}
.npg-masthead-inner .npg-nav { flex: 1 1 auto; }
.npg-masthead-inner .npg-nav ul { justify-content: flex-end; }
@media (max-width: 720px) {
  .npg-masthead-inner .npg-nav ul { justify-content: flex-start; }
  .npg-search--bar input { width: 100%; }
  .npg-search--bar { flex: 1 1 100%; }
}

/* Wordmark. Type only, no icon. */
.npg-logo {
  font-family: var(--npg-serif);
  font-size: 1.5rem; font-weight: 700;
  letter-spacing: -0.018em; line-height: 1;
  color: var(--npg-rev-ink); text-decoration: none;
  white-space: nowrap;
}
.npg-logo b { color: var(--npg-rev-accent); font-weight: 700; }
.npg-logo:hover b { color: var(--npg-rev-ink); }

/* Sentence case in the interface face, not uppercase mono. Mono is reserved
   for data and labels; using it for navigation made three words look like six. */
.npg-nav ul {
  display: flex; flex-wrap: wrap; gap: var(--npg-s50);
  list-style: none; margin: 0; padding: 0;
}
.npg-nav a {
  font-family: var(--npg-sans);
  font-size: 0.9375rem; font-weight: 500; letter-spacing: 0;
  color: var(--npg-rev-muted); text-decoration: none;
}
.npg-nav a:hover,
.npg-nav .current-menu-item > a { color: var(--npg-rev-ink); }
.npg-nav a:focus-visible { outline-color: var(--npg-rev-accent); }

.npg-standfirst {
  background: var(--npg-rev-bg);
  border-top: 1px solid var(--npg-rev-rule);
  color: var(--npg-rev-muted);
  font-family: var(--npg-mono);
  font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding-block: var(--npg-s20);
}
/* The standfirst carries the two trust claims, and each one links to the page
   that substantiates it. About and Disclosure earn their place here rather
   than taking a slot in a four-item subject nav. */
.npg-standfirst a { color: var(--npg-rev-muted); text-decoration: none; }
.npg-standfirst a:hover { color: var(--npg-rev-ink); text-decoration: underline; }
.npg-standfirst a:focus-visible { outline-color: var(--npg-rev-accent); }
.npg-standfirst span { color: var(--npg-rev-accent); margin-inline: 0.6rem; text-transform: none; }

/* -----------------------------------------------------------------------------
   Article head
   -------------------------------------------------------------------------- */

.npg-eyebrow {
  display: block;
  font-family: var(--npg-mono);
  font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--npg-accent); font-weight: 500;
}

.npg-title {
  font-size: clamp(1.875rem, 1.35rem + 2.3vw, 2.5rem);
  line-height: 1.1; letter-spacing: -0.015em;
  margin-top: var(--npg-s20);
}

/* R2, module 1. The extraction target. */
.npg-capsule {
  border-top: 1px solid var(--npg-rule);
  border-bottom: 1px solid var(--npg-rule);
  padding-block: var(--npg-s30);
  font-size: 1.1875rem;
}
.npg-capsule p { margin: 0; }
.npg-capsule p + p { margin-top: var(--npg-s20); }
.npg-capsule strong, .npg-capsule b { color: var(--npg-accent); }

/* -----------------------------------------------------------------------------
   Body content
   -------------------------------------------------------------------------- */

.npg-content > * + * { margin-top: var(--npg-s40); }
.npg-content h2 { font-size: 1.6875rem; margin-top: var(--npg-s60); }
.npg-content h3 { font-size: 1.375rem; margin-top: var(--npg-s50); }
.npg-content ul, .npg-content ol { padding-left: 1.35em; }
.npg-content li + li { margin-top: var(--npg-s20); }

.npg-content blockquote {
  border-left: 3px solid var(--npg-accent);
  padding-left: var(--npg-s40);
  color: var(--npg-ink);
}

.npg-content code {
  font-family: var(--npg-mono); font-size: 0.8125rem;
  background: var(--npg-surface); color: var(--npg-ink);
  padding: 0.1em 0.4em; border-radius: 2px;
}

/* -----------------------------------------------------------------------------
   Tables. R4: a table is a finished object at any size.
   -------------------------------------------------------------------------- */

.npg-tablewrap {
  overflow-x: auto;
  border: 1px solid var(--npg-rule);
  border-radius: 4px;
}

.npg-content table, table.npg-table {
  width: 100%; border-collapse: collapse;
  font-size: 0.9375rem; font-variant-numeric: tabular-nums;
}

.npg-content th, table.npg-table th {
  background: var(--npg-surface);
  color: var(--npg-muted);
  border-bottom: 2px solid var(--npg-ink);
  font-family: var(--npg-mono);
  font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 600; text-align: left;
  padding: 0.6rem 0.75rem;
}

.npg-content td, table.npg-table td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--npg-rule);
  vertical-align: top;
}
.npg-content tr:last-child td, table.npg-table tr:last-child td { border-bottom: none; }

td.npg-num, .npg-mono {
  font-family: var(--npg-mono); font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.npg-tag {
  display: inline-block;
  font-family: var(--npg-mono); font-size: 0.625rem; letter-spacing: 0.04em;
  padding: 0.1rem 0.4rem; border-radius: 2px;
  background: var(--npg-accent); color: #fff; white-space: nowrap;
}
.npg-tag--quiet {
  background: transparent; color: var(--npg-muted);
  border: 1px solid var(--npg-rule-strong);
}

/* -----------------------------------------------------------------------------
   Apparatus. R2: populated from metadata, never from body length.
   -------------------------------------------------------------------------- */

.npg-apparatus {
  margin-top: var(--npg-s60);
  padding-top: var(--npg-s20);
  border-top: 2px solid var(--npg-ink);
  display: flex; flex-direction: column; gap: var(--npg-s40);
}

.npg-mod { border-top: 1px solid var(--npg-rule); padding-top: var(--npg-s30); }
.npg-apparatus > .npg-mod:first-child { border-top: none; padding-top: var(--npg-s30); }

.npg-mod-h {
  font-family: var(--npg-mono);
  font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--npg-muted); font-weight: 500;
  margin-bottom: var(--npg-s20);
}

/* facts strip */
.npg-kv { display: flex; flex-wrap: wrap; gap: var(--npg-s10) var(--npg-s40); margin: 0; }
.npg-kv-pair { display: flex; align-items: baseline; gap: var(--npg-s20); }
.npg-kv dt {
  font-family: var(--npg-mono); font-size: 0.6875rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--npg-muted);
}
.npg-kv dd {
  margin: 0; font-family: var(--npg-mono); font-size: 0.8125rem;
  color: var(--npg-ink); font-variant-numeric: tabular-nums;
}

/* R3: ruled lists, not card grids. */
.npg-ruled { list-style: none; margin: 0; padding: 0; }
.npg-ruled li {
  padding-block: var(--npg-s30);
  border-bottom: 1px solid var(--npg-rule);
  font-size: 1rem;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--npg-s20) var(--npg-s30);
  justify-content: space-between;
}
.npg-ruled li:last-child { border-bottom: none; }
.npg-ruled a { color: var(--npg-ink); text-decoration: none; }
.npg-ruled a:hover { color: var(--npg-accent); text-decoration: underline; }

.npg-sub {
  font-family: var(--npg-mono);
  font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--npg-muted);
}

/* Byline, inline under the capsule. Quiet: who wrote it and when it was last
   checked, which the site promises on the homepage, and nothing more. */
.npg-byline {
  margin-top: var(--npg-s30);
  padding-top: var(--npg-s20);
  border-top: 1px solid var(--npg-rule);
  max-width: 62ch;
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0 var(--npg-s30);
}
.npg-byline-line { font-size: 0.9375rem; color: var(--npg-body); }
.npg-byline-dates {
  font-family: var(--npg-mono); font-size: 0.6875rem;
  letter-spacing: 0.04em; color: var(--npg-muted);
}

/* -----------------------------------------------------------------------------
   Footer. Reversed furniture.
   -------------------------------------------------------------------------- */

.npg-footer {
  background: var(--npg-rev-bg);
  color: var(--npg-rev-muted);
  padding-block: var(--npg-s60);
  margin-top: 0;
}
.npg-footer h2 {
  color: var(--npg-rev-ink);
  font-family: var(--npg-mono);
  font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 500; margin-bottom: var(--npg-s30);
}
.npg-footer-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--npg-s50);
}
.npg-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--npg-s20); }
.npg-footer a { color: var(--npg-rev-muted); text-decoration: none; font-size: 0.9375rem; }
.npg-footer a:hover { color: var(--npg-rev-ink); text-decoration: underline; }
.npg-footer a:focus-visible { outline-color: var(--npg-rev-accent); }

.npg-colophon {
  border-top: 1px solid var(--npg-rev-rule);
  margin-top: var(--npg-s50); padding-top: var(--npg-s30);
  font-family: var(--npg-mono); font-size: 0.6875rem;
  letter-spacing: 0.04em; color: var(--npg-rev-muted);
  display: flex; flex-wrap: wrap; gap: var(--npg-s20) var(--npg-s40);
  justify-content: space-between;
}
.npg-pledge { color: var(--npg-rev-accent); }

/* -----------------------------------------------------------------------------
   Homepage

   Full-width bands, each with internal structure. The 41rem reading measure
   used by article templates is NOT used here. A single narrow column is right
   for a long read and wrong for a front page, where it strands the content in
   white space and makes a thin site look thinner.
   -------------------------------------------------------------------------- */

.npg-band {
  padding-block: var(--npg-s60);
  border-bottom: 1px solid var(--npg-rule);
  font-size: 1.0625rem;
}
.npg-band:last-of-type { border-bottom: 0; }
.npg-band--surface { background: var(--npg-surface); }
.npg-band--hero {
  background: var(--npg-surface);
  padding-block: var(--npg-s60) var(--npg-s60);
}

/* No dark band anywhere except the masthead and the footer. A dark section
   sitting above a dark footer has no edge between them, and the page ends in
   an undifferentiated slab. Kept as a light variant so old markup still works. */
.npg-band--reversed { background: var(--npg-base); color: var(--npg-body); }

/* The last band before the footer is always light, so the footer starts on a
   visible edge rather than blending into whatever came before it. */
.npg-footer { border-top: 4px solid var(--npg-accent); }

/* The rubric rule spans the full section width. Capping the whole head at
   60ch made the rule stop halfway across the content beneath it, which read as
   a misalignment rather than a divider. The intro paragraph is capped instead. */
.npg-band-head {
  display: flex;
  flex-direction: column;
  gap: var(--npg-s20);
  margin-bottom: var(--npg-s50);
}
.npg-band-head .npg-band-intro { max-width: 62ch; }

/* Section rubric. Mono, quiet, ruled. The almanac's divider. */
.npg-rubric {
  font-family: var(--npg-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--npg-muted);
  padding-bottom: var(--npg-s20);
  border-bottom: 1px solid var(--npg-ink);
}
.npg-rubric--rev { color: var(--npg-rev-muted); border-bottom-color: var(--npg-rev-accent); }

.npg-band-intro { color: var(--npg-body); font-size: 1.0625rem; }
.npg-band-intro--rev { color: var(--npg-rev-muted); }

/* ---------- Hero ---------- */

.npg-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--npg-s70);
  align-items: start;
}
@media (max-width: 940px) {
  .npg-hero-grid { grid-template-columns: 1fr; gap: var(--npg-s60); }
}

.npg-hero-h1 {
  font-size: clamp(1.75rem, 1.25rem + 2.2vw, 2.625rem);
  line-height: 1.1;
  letter-spacing: -0.023em;
  max-width: 16ch;
}

.npg-hero-sub {
  margin-top: var(--npg-s30);
  font-size: 1.125rem;
  color: var(--npg-body);
  max-width: 64ch;
}

.npg-cta-row { display: flex; flex-wrap: wrap; gap: var(--npg-s30); margin-top: var(--npg-s50); }

.npg-cta {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--npg-sans);
  font-size: 0.9375rem; font-weight: 600; line-height: 1.2;
  text-decoration: none;
  padding: 0.75rem 1.2rem;
  border-radius: 3px;
  border: 1px solid transparent;
}
.npg-cta--primary {
  background: var(--npg-accent); color: #FFFFFF; border-color: var(--npg-accent);
}
.npg-cta--primary::after { content: "\2192"; font-size: 1.05em; }
.npg-cta--primary:hover {
  background: var(--npg-accent-deep); border-color: var(--npg-accent-deep); color: #FFFFFF;
}

.npg-hero-trust {
  list-style: none; margin: var(--npg-s40) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--npg-s20) 0;
  font-family: var(--npg-mono);
  font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--npg-muted);
}
.npg-hero-trust li { display: inline-flex; align-items: center; }
.npg-hero-trust li + li::before {
  content: "\00B7"; color: var(--npg-rule-strong); margin-inline: 0.75rem;
}

/* Search panel beside the positioning statement. */
.npg-hero-aside {
  background: var(--npg-surface);
  border: 1px solid var(--npg-rule);
  border-radius: 4px;
  padding: var(--npg-s40);
}
.npg-hero-aside .npg-rubric { margin-bottom: var(--npg-s30); }

.npg-aside-label {
  font-family: var(--npg-mono);
  font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--npg-muted);
  margin: var(--npg-s40) 0 var(--npg-s20);
}

.npg-chiplist { list-style: none; margin: 0; padding: 0; }
.npg-chiplist li { border-top: 1px solid var(--npg-rule); }
.npg-chiplist a {
  display: block; padding-block: var(--npg-s30);
  font-size: 0.9375rem; color: var(--npg-ink); text-decoration: none;
}
.npg-chiplist a:hover { color: var(--npg-accent); }

/* ---------- Search ---------- */

.npg-search { display: flex; }

.npg-search--bar input {
  font-family: var(--npg-sans); font-size: 0.8125rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--npg-rev-rule);
  border-right: 0;
  border-radius: 3px 0 0 3px;
  color: var(--npg-rev-ink);
  padding: 0.4rem 0.6rem;
  width: 9rem;
}
.npg-search--bar input::placeholder { color: var(--npg-rev-muted); }
.npg-search--bar input:focus { outline: none; border-color: var(--npg-rev-accent); }
.npg-search--bar button {
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--npg-rev-rule);
  border-radius: 0 3px 3px 0;
  color: var(--npg-rev-muted);
  padding-inline: 0.6rem;
  cursor: pointer;
}
.npg-search--bar button:hover { color: var(--npg-rev-ink); border-color: var(--npg-rev-accent); }

.npg-search--panel input {
  flex: 1; min-width: 0;
  font-family: var(--npg-serif); font-size: 1rem;
  background: var(--npg-base);
  border: 1px solid var(--npg-rule-strong);
  border-right: 0;
  border-radius: 3px 0 0 3px;
  color: var(--npg-ink);
  padding: 0.6rem 0.75rem;
}
.npg-search--panel input:focus { outline: none; }
.npg-search--panel:focus-within input { border-color: var(--npg-accent); }
.npg-search--panel button {
  font-family: var(--npg-sans); font-size: 0.875rem; font-weight: 600;
  background: var(--npg-accent); color: #FFFFFF;
  border: 1px solid var(--npg-accent);
  border-radius: 0 3px 3px 0;
  padding-inline: 1rem;
  cursor: pointer;
}
.npg-search--panel button:hover { background: var(--npg-accent-deep); border-color: var(--npg-accent-deep); }

/* ---------- Subjects ---------- */

.npg-subjects {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--npg-rule);
  border: 1px solid var(--npg-rule);
  border-radius: 4px;
  overflow: hidden;
}
/* Explicit columns, never auto-fit. Four items in an auto-fit grid land as
   three plus one orphan, and an empty cell reads as a missing card. */
@media (min-width: 720px)  { .npg-subjects { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .npg-subjects { grid-template-columns: repeat(4, 1fr); } }

.npg-subject {
  background: var(--npg-base);
  padding: var(--npg-s40);
  display: flex; flex-direction: column; gap: var(--npg-s20);
}

.npg-subject-icon {
  color: var(--npg-accent);
  display: block;
  margin-bottom: var(--npg-s10);
}
.npg-subject-h { font-size: 1.125rem; line-height: 1.25; }
.npg-subject-h a { color: var(--npg-ink); text-decoration: none; }
.npg-subject-h a:hover { color: var(--npg-accent); }

.npg-subject-note { font-size: 0.9375rem; color: var(--npg-muted); }

.npg-subject-list { list-style: none; margin: var(--npg-s20) 0 0; padding: 0; }
.npg-subject-list li { border-top: 1px solid var(--npg-rule); }
.npg-subject-list a {
  display: block; padding-block: var(--npg-s20);
  font-size: 0.9375rem; color: var(--npg-ink); text-decoration: none;
}
.npg-subject-list a:hover { color: var(--npg-accent); }

/* Shown until a subject has pages. Says what will be there, which is honest
   and still tells a visitor what the section is for. */
.npg-subject-soon {
  font-size: 0.875rem;
  color: var(--npg-muted);
  border-top: 1px solid var(--npg-rule);
  padding-top: var(--npg-s30);
  margin-top: auto;
}

.npg-subject-count {
  font-family: var(--npg-mono);
  font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--npg-muted);
  margin-top: auto;
}

/* ---------- The numbers ---------- */

.npg-facts-table { background: var(--npg-base); border-color: var(--npg-rule-strong); }
.npg-facts-table td:first-child {
  font-weight: 700;
  color: var(--npg-ink);
  white-space: nowrap;
}
.npg-facts-table td:last-child { color: var(--npg-muted); }
.npg-facts-table .npg-num {
  color: var(--npg-accent);
  font-weight: 500;
  white-space: nowrap;
}

.npg-facts-foot {
  margin-top: var(--npg-s30);
  font-size: 0.8125rem;
  color: var(--npg-muted);
  max-width: 72ch;
}

/* ---------- Ruled list, two columns on wide screens ---------- */

.npg-ruled--split {
  columns: 2;
  column-gap: var(--npg-s70);
}
@media (max-width: 780px) { .npg-ruled--split { columns: 1; } }
.npg-ruled--split li { break-inside: avoid; }

/* ---------- Tools ---------- */

.npg-tools { display: grid; grid-template-columns: 1fr; gap: var(--npg-s40); }
@media (min-width: 780px) { .npg-tools { grid-template-columns: repeat(2, 1fr); } }

.npg-tool {
  display: flex; flex-direction: column; gap: var(--npg-s20);
  border: 1px solid var(--npg-rule-strong);
  border-radius: 4px;
  padding: var(--npg-s40);
  text-decoration: none;
  background: var(--npg-base);
}
a.npg-tool:hover { border-color: var(--npg-accent); }

.npg-tool-kicker {
  font-family: var(--npg-mono);
  font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--npg-accent);
}
.npg-tool-h {
  font-family: var(--npg-serif); font-weight: 700;
  font-size: 1.0625rem; line-height: 1.3; color: var(--npg-ink);
  letter-spacing: -0.012em;
}
.npg-tool-note { font-size: 0.9375rem; color: var(--npg-muted); }

.npg-tool--soon { border-style: dashed; background: transparent; }
.npg-tool--soon .npg-tool-kicker { color: var(--npg-muted); }
.npg-tool--soon .npg-tool-h { color: var(--npg-muted); }

/* ---------- How we work ---------- */

.npg-principles { display: grid; grid-template-columns: 1fr; gap: var(--npg-s50); }
@media (min-width: 860px) { .npg-principles { grid-template-columns: repeat(3, 1fr); } }

.npg-principle { display: flex; flex-direction: column; gap: var(--npg-s20); }
.npg-principle h3 {
  color: var(--npg-ink);
  font-size: 1.125rem;
  padding-bottom: var(--npg-s20);
  border-bottom: 2px solid var(--npg-accent);
}
.npg-principle p { font-size: 0.9375rem; color: var(--npg-body); }
.npg-principle a {
  font-family: var(--npg-mono);
  font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--npg-accent); text-decoration: none;
  margin-top: auto; padding-top: var(--npg-s20);
}
.npg-principle a:hover { color: var(--npg-accent-deep); text-decoration: underline; }

/* The reversed band runs straight into the dark footer, so no seam between. */
.home .npg-footer { margin-top: 0; }
.npg-main { padding-block: 0; }
.home .npg-main { padding: 0; }

/* -----------------------------------------------------------------------------
   Index and archive rows
   -------------------------------------------------------------------------- */

.npg-index-list li { align-items: baseline; gap: var(--npg-s20) var(--npg-s50); }
.npg-index-main { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; flex: 1 1 24rem; }
.npg-index-main a { font-size: 1.0625rem; font-weight: 700; }
.npg-index-note { font-size: 0.9375rem; color: var(--npg-muted); font-weight: 400; }

.npg-empty {
  max-width: 58ch;
  padding-block: var(--npg-s50);
  display: flex; flex-direction: column; gap: var(--npg-s30);
}
.npg-empty h2 { font-size: 1.375rem; }
.npg-empty-sub {
  font-family: var(--npg-mono);
  font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--npg-muted); font-weight: 500;
  margin-top: var(--npg-s40);
}
.npg-empty p { font-size: 1rem; }

.npg-search--index { margin-top: var(--npg-s50); max-width: 30rem; }

/* Pagination */
.npg-band .nav-links {
  display: flex; flex-wrap: wrap; gap: var(--npg-s30);
  margin-top: var(--npg-s50);
  padding-top: var(--npg-s30);
  border-top: 1px solid var(--npg-rule);
  font-family: var(--npg-sans); font-size: 0.875rem;
}
.npg-band .nav-links .page-numbers {
  padding: 0.3rem 0.65rem; border: 1px solid var(--npg-rule-strong);
  border-radius: 3px; text-decoration: none; color: var(--npg-accent);
}
.npg-band .nav-links .page-numbers.current {
  background: var(--npg-accent); border-color: var(--npg-accent); color: #FFFFFF;
}

/* -----------------------------------------------------------------------------
   Author and legal pages
   -------------------------------------------------------------------------- */

.npg-author-role {
  font-family: var(--npg-mono);
  font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--npg-accent);
  margin-top: var(--npg-s20);
}

.npg-legal-date {
  font-family: var(--npg-mono);
  font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--npg-muted);
  margin-top: var(--npg-s30);
  padding-top: var(--npg-s20);
  border-top: 1px solid var(--npg-rule);
}
.npg-legal-foot {
  margin-top: var(--npg-s50); padding-top: var(--npg-s30);
  border-top: 1px solid var(--npg-rule);
  font-size: 0.9375rem; color: var(--npg-muted);
}

/* -----------------------------------------------------------------------------
   Per-type article furniture
   -------------------------------------------------------------------------- */

.npg-type-strip { margin-top: var(--npg-s30); }

/* Best-for and not-for, on reviews and best-of pillars. Marked by rule and
   label rather than by a green tick and a red cross, which read as a scorecard
   rather than an assessment. */
.npg-verdict {
  margin-top: var(--npg-s40);
  border: 1px solid var(--npg-rule-strong);
  border-radius: 4px;
  overflow: hidden;
}
.npg-verdict-row {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: var(--npg-s30);
  padding: var(--npg-s30) var(--npg-s40);
  border-bottom: 1px solid var(--npg-rule);
}
.npg-verdict-row:last-child { border-bottom: none; }
.npg-verdict-k {
  font-family: var(--npg-mono);
  font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--npg-accent);
  padding-top: 0.25rem;
}
.npg-verdict-row--neg .npg-verdict-k { color: var(--npg-flag); }
.npg-verdict-v { font-size: 1rem; color: var(--npg-ink); }
@media (max-width: 560px) {
  .npg-verdict-row { grid-template-columns: 1fr; gap: var(--npg-s10); }
}

.npg-disclaimer {
  margin-top: var(--npg-s50);
  padding: var(--npg-s30) var(--npg-s40);
  background: var(--npg-surface);
  border-left: 3px solid var(--npg-flag);
  font-size: 0.9375rem;
  color: var(--npg-body);
}

/* -----------------------------------------------------------------------------
   Free tools
   No email gate anywhere in here. The answer is the product.
   -------------------------------------------------------------------------- */

.npg-calc {
  border: 1px solid var(--npg-rule-strong);
  border-radius: 4px;
  overflow: hidden;
}

.npg-calc-control {
  background: var(--npg-surface);
  border-bottom: 1px solid var(--npg-rule-strong);
  padding: var(--npg-s40);
}

.npg-calc-control label {
  display: block;
  font-family: var(--npg-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--npg-muted);
  margin-bottom: var(--npg-s20);
}

.npg-calc-input {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15rem;
  background: var(--npg-base);
  border: 1px solid var(--npg-rule-strong);
  border-radius: 3px;
  padding: 0.4rem 0.7rem;
}
.npg-calc-input span {
  font-family: var(--npg-mono);
  font-size: 1.125rem;
  color: var(--npg-muted);
}
.npg-calc-input input {
  width: 6ch;
  border: 0;
  background: transparent;
  font-family: var(--npg-mono);
  font-size: 1.375rem;
  font-variant-numeric: tabular-nums;
  color: var(--npg-ink);
  padding: 0;
}
.npg-calc-input input:focus { outline: none; }
.npg-calc-input:focus-within {
  border-color: var(--npg-accent);
  box-shadow: 0 0 0 2px rgba(15, 91, 96, 0.16);
}

.npg-calc-hint {
  margin-top: var(--npg-s30);
  font-size: 0.9375rem;
  color: var(--npg-muted);
  max-width: 52ch;
}

.npg-calc .npg-tablewrap { border: 0; border-radius: 0; }

.npg-calc-note {
  display: block;
  font-family: var(--npg-sans);
  font-size: 0.75rem;
  color: var(--npg-muted);
  line-height: 1.4;
  margin-top: 0.15rem;
}

/* The cheapest route at the current amount. Marked with the site's own mark
   rather than a colour fill, so it survives being printed in black and white. */
.npg-calc-best td { background: var(--npg-surface); }
.npg-calc-best td:first-child::before {
  content: "\00A7";
  color: var(--npg-accent);
  font-weight: 700;
  margin-right: 0.4rem;
}

.npg-calc-foot {
  border-top: 1px solid var(--npg-rule);
  padding: var(--npg-s30) var(--npg-s40);
  font-size: 0.8125rem;
  color: var(--npg-muted);
  line-height: 1.55;
}
.npg-calc-foot a { color: var(--npg-accent); }

/* -----------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -----------------------------------------------------------------------------
   Dark theme, defined but not wired.
   To enable, add: @media (prefers-color-scheme: dark) { :root { ... } }
   or set data-theme="dark" on <html> and change this selector to match.
   Every pair below was measured to WCAG 2.1: body 13.27:1, accent 6.48:1.
   -------------------------------------------------------------------------- */

:root[data-npg-theme="dark"] {
  --npg-base:        #0E1013;
  --npg-surface:     #16191D;
  --npg-sunken:      #1D2126;
  --npg-ink:         #F2F4F5;
  --npg-body:        #D3D8DC;
  --npg-muted:       #8A939B;
  --npg-rule:        #262B30;
  --npg-rule-strong: #394148;
  --npg-accent:      #3FA69B;
  --npg-accent-deep: #5FBFB4;
  --npg-flag:        #D9A05B;
}

/* -----------------------------------------------------------------------------
   Article layout: body plus apparatus rail

   Interior pages were a 44rem column stranded in a 1568px window. The rail
   fills that space with something useful rather than widening the measure past
   comfortable reading. The modules populate from post metadata, so the rail is
   full even on a 600 word page.
   -------------------------------------------------------------------------- */

.npg-article-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--npg-s60);
  align-items: start;
}
@media (min-width: 1040px) {
  /* Body at one edge, rail at the other, filling the same width the homepage
     uses. Prose stays at a readable measure while the page reads as full
     width, which is the only way to have both. Running text at the full
     84rem would be roughly 148 characters a line. */
  .npg-article-grid {
    grid-template-columns: minmax(0, var(--npg-read)) var(--npg-rail);
    justify-content: space-between;
    gap: var(--npg-s70);
  }
  /* Nothing for the rail yet, so the column centres rather than sitting off
     to one side with a hole beside it. */
  .npg-article-grid--solo {
    grid-template-columns: minmax(0, 54rem);
    justify-content: center;
  }
  .npg-article-grid--solo + * { text-align: initial; }
  .npg-article-grid .npg-apparatus {
    position: sticky;
    top: var(--npg-s40);
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
  .npg-article-grid .npg-apparatus > .npg-mod:first-child { border-top: 0; }
}

/* Article hero band, so a page never opens on a naked H1 in a white void. */
.npg-article-hero { background: var(--npg-surface); border-bottom: 1px solid var(--npg-rule); }
.npg-article-hero .npg-title { margin-top: var(--npg-s20); max-width: 26ch; }
.npg-article-hero .npg-capsule,
.npg-article-hero .npg-byline { border-bottom: 0; padding-bottom: 0; max-width: var(--npg-read); }

/* -----------------------------------------------------------------------------
   Mobile

   Designed rather than inherited. Every rule below exists because the desktop
   layout collapsed into something worse than it needed to.
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {

  /* M1. One row for the wordmark and search, nav on a scrollable row beneath,
     instead of three stacked full-width rows eating the first screen. */
  .npg-masthead-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--npg-s30) var(--npg-s40);
    align-items: center;
  }
  .npg-logo { font-size: 1.25rem; }
  .npg-masthead-inner .npg-search--bar { grid-column: 2; flex: 0 0 auto; }
  .npg-search--bar input { width: 6.5rem; }
  .npg-masthead-inner .npg-nav {
    grid-column: 1 / -1;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .npg-masthead-inner .npg-nav::-webkit-scrollbar { display: none; }
  .npg-masthead-inner .npg-nav ul {
    flex-wrap: nowrap;
    gap: var(--npg-s40);
    justify-content: flex-start;
  }
  .npg-nav a { white-space: nowrap; padding-block: 0.35rem; }

  /* M3. Ruled rows stack rather than fighting over one line. */
  .npg-ruled li { flex-direction: column; align-items: flex-start; gap: var(--npg-s10); }
  .npg-index-main { flex: 1 1 auto; }

  /* M4. Touch targets. */
  .npg-ruled a, .npg-chiplist a, .npg-subject-list a { min-height: 44px; display: flex; align-items: center; }
  .npg-ruled--split { columns: 1; }

  .npg-band { padding-block: var(--npg-s50); }
  .npg-band-head { margin-bottom: var(--npg-s40); }
}

@media (max-width: 640px) {

  /* M2. Reference tables restack as label and value pairs. A three column
     table with nowrap cells forced sideways scrolling and pinch-zooming,
     which is the single worst thing on a phone. */
  .npg-facts-table table,
  .npg-facts-table thead,
  .npg-facts-table tbody,
  .npg-facts-table tr,
  .npg-facts-table td { display: block; width: 100%; }

  .npg-facts-table thead { display: none; }

  .npg-facts-table tr {
    border-bottom: 1px solid var(--npg-rule);
    padding: var(--npg-s30) 0;
  }
  .npg-facts-table tr:last-child { border-bottom: 0; }

  .npg-facts-table td { border: 0; padding: 0.1rem 0.75rem; }
  .npg-facts-table td:first-child { white-space: normal; font-size: 1rem; }
  .npg-facts-table td.npg-num { font-size: 1.125rem; margin-block: 0.15rem; }
  .npg-facts-table td:last-child { color: var(--npg-muted); font-size: 0.9375rem; }

  /* Calculator table keeps its columns but stops forcing a scroll. */
  .npg-calc-table th, .npg-calc-table td { padding: 0.5rem 0.5rem; }
  .npg-calc-input input { width: 5ch; }

  .npg-hero-h1 { max-width: none; }
  .npg-hero-aside { padding: var(--npg-s30); }
}

/* Nothing should ever force the page to scroll sideways. */
html, body { overflow-x: hidden; }

/* -----------------------------------------------------------------------------
   Roadmap. What is being written, and when.
   -------------------------------------------------------------------------- */

.npg-roadmap { list-style: none; margin: 0; padding: 0; }
.npg-roadmap li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  gap: var(--npg-s30);
  align-items: baseline;
  padding-block: var(--npg-s30);
  border-top: 1px solid var(--npg-rule);
}
.npg-roadmap li:last-child { border-bottom: 1px solid var(--npg-rule); }
.npg-roadmap-n {
  font-family: var(--npg-mono); font-size: 0.6875rem;
  color: var(--npg-muted); font-variant-numeric: tabular-nums;
}
.npg-roadmap-t { font-size: 1.0625rem; color: var(--npg-ink); }
.npg-roadmap-s {
  font-family: var(--npg-mono); font-size: 0.625rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.15rem 0.5rem; border-radius: 2px;
  background: var(--npg-flag-tint); color: var(--npg-flag);
  white-space: nowrap;
}
.npg-roadmap li:nth-child(-n+2) .npg-roadmap-s {
  background: var(--npg-accent-tint); color: var(--npg-accent);
}
@media (max-width: 640px) {
  .npg-roadmap li { grid-template-columns: 2rem minmax(0, 1fr); }
  .npg-roadmap-s { grid-column: 2; justify-self: start; }
}

/* -----------------------------------------------------------------------------
   Touch targets

   WCAG 2.5.8 exempts links inline in a sentence, so body copy is left alone.
   Everything that is a control rather than prose gets a real target: the
   navigation, form fields, buttons and list rows.
   -------------------------------------------------------------------------- */

@media (pointer: coarse), (max-width: 860px) {

  .npg-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .npg-search input,
  .npg-search button {
    min-height: 44px;
  }
  .npg-search--bar input,
  .npg-search--bar button { min-height: 40px; }

  .npg-copy,
  .npg-cta { min-height: 44px; }

  .npg-roadmap li,
  .npg-contents-list a,
  .npg-subjects .npg-subject-h a { min-height: 44px; }
  .npg-contents-list a { align-items: center; }
  .npg-subjects .npg-subject-h a { display: inline-flex; align-items: center; }

  .npg-facts-foot a,
  .npg-principle a,
  .npg-footer a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  /* The masthead grew with the taller nav, so claw the padding back. */
  .npg-masthead-inner { padding-block: var(--npg-s20); }
}

/* -----------------------------------------------------------------------------
   Contents. Navigation, not self-promotion.
   -------------------------------------------------------------------------- */

.npg-contents-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: npg-toc;
}
.npg-contents-list li {
  counter-increment: npg-toc;
  border-top: 1px solid var(--npg-rule);
}
.npg-contents-list li:first-child { border-top: 0; }
.npg-contents-list a {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  gap: var(--npg-s20);
  padding-block: var(--npg-s20);
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--npg-body);
  text-decoration: none;
}
.npg-contents-list a::before {
  content: counter(npg-toc, decimal-leading-zero);
  font-family: var(--npg-mono);
  font-size: 0.625rem;
  color: var(--npg-muted);
  padding-top: 0.28rem;
}
.npg-contents-list a:hover { color: var(--npg-accent); }
.npg-contents-list a:hover::before { color: var(--npg-accent); }

/* Anchored headings should not land under a sticky rail or the viewport edge. */
.npg-content h2[id] { scroll-margin-top: var(--npg-s50); }

/* -----------------------------------------------------------------------------
   Front matter and the lead

   A publication does not open with a claim about itself and a button. It runs
   a dateline and then prints the lead. The positioning statement survives, it
   just sits at masthead scale instead of taking the top third of the page.
   -------------------------------------------------------------------------- */

.npg-dateline {
  background: var(--npg-base);
  border-bottom: 1px solid var(--npg-rule-strong);
  padding-block: var(--npg-s30);
  font-family: var(--npg-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--npg-muted);
}
.npg-dateline .npg-shell {
  display: flex;
  flex-wrap: wrap;
  gap: var(--npg-s20) var(--npg-s50);
  align-items: baseline;
  justify-content: space-between;
}
.npg-dateline-lede { color: var(--npg-ink); }
.npg-dateline-meta { display: flex; flex-wrap: wrap; gap: var(--npg-s20) var(--npg-s40); }
.npg-dateline-meta a { color: var(--npg-muted); text-decoration: none; }
.npg-dateline-meta a:hover { color: var(--npg-accent); text-decoration: underline; }

/* The lead item. */
.npg-lead { background: var(--npg-base); padding-block: var(--npg-s50) var(--npg-s60); }

.npg-lead-kicker {
  display: block;
  font-family: var(--npg-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--npg-accent);
  font-weight: 500;
}

/* Lead headline. Large, tight, and set to a real headline measure rather than
   the 24ch a landing page uses, so it occupies the width instead of hugging
   the left margin. */
.npg-lead-h1 {
  font-size: clamp(2rem, 1.15rem + 3.6vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.026em;
  /* Newspaper headlines run wide. At 21ch this stacked into three short lines
     and stranded the right half of the page. */
  max-width: 34ch;
  margin-top: var(--npg-s30);
}

.npg-lead-standfirst {
  margin-top: var(--npg-s40);
  margin-bottom: var(--npg-s50);
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--npg-body);
  max-width: 78ch;
  padding-left: var(--npg-s40);
  border-left: 3px solid var(--npg-accent);
}

.npg-lead-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--npg-s40);
  margin-top: var(--npg-s40);
}
.npg-lead-foot .npg-facts-foot { margin-top: 0; flex: 1 1 34rem; }

@media (max-width: 700px) {
  .npg-lead-standfirst { padding-left: var(--npg-s30); font-size: 1.0625rem; }
  .npg-lead-foot .npg-cta { width: 100%; justify-content: center; }
}

/* Dateline on small screens.
   At full content it wrapped to three lines and took 99px, which is a lot of
   the first screen for a masthead line. The updated date is dropped because
   the lead already carries its own checked-on date directly under the table,
   so nothing is lost. The independence claim stays, because that one is the
   point. */
@media (max-width: 700px) {
  .npg-dateline { padding-block: var(--npg-s20); letter-spacing: 0.05em; }
  .npg-dateline .npg-shell { gap: 0.2rem var(--npg-s30); }
  .npg-dateline-meta > span:first-child { display: none; }
  .npg-dateline-meta a { min-height: 0; }
}

/* -----------------------------------------------------------------------------
   Who this is for

   The one place on the front page written in the second person. Set at
   statement scale rather than body scale, because it is doing the job a
   masthead motto does at a newspaper: telling you whose paper this is.
   -------------------------------------------------------------------------- */

.npg-statement {
  background: var(--npg-surface);
  border-bottom: 1px solid var(--npg-rule);
  padding-block: var(--npg-s60);
}

.npg-statement-lead {
  font-family: var(--npg-serif);
  font-size: clamp(1.375rem, 1rem + 1.6vw, 2rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.018em;
  color: var(--npg-ink);
  max-width: 30ch;
  text-wrap: balance;
}

.npg-statement-sub {
  margin-top: var(--npg-s40);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--npg-body);
  max-width: 64ch;
  padding-top: var(--npg-s30);
  border-top: 1px solid var(--npg-rule-strong);
}

@media (min-width: 900px) {
  /* Statement left, the qualifying detail beside it, so the block reads as one
     masthead unit rather than two stacked paragraphs. */
  .npg-statement .npg-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--npg-s70);
    align-items: start;
  }
  .npg-statement-sub {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    border-left: 3px solid var(--npg-accent);
    padding-left: var(--npg-s40);
  }
}

@media (max-width: 700px) {
  /* On a phone this block ran to 398px, which put the lead below the fold on
     an 812px screen. It still earns its place, it just has to be tighter. */
  .npg-statement { padding-block: var(--npg-s40); }
  .npg-statement-lead { font-size: 1.3125rem; line-height: 1.2; max-width: none; }
  .npg-statement-sub {
    margin-top: var(--npg-s30);
    padding-top: var(--npg-s30);
    font-size: 0.9375rem;
    line-height: 1.5;
  }
}

/* -----------------------------------------------------------------------------
   Questions people ask

   Expanded by default. Collapsing answers behind a toggle hides them from some
   extractors and gains nothing on a page people arrive at from a search for
   the question itself.
   -------------------------------------------------------------------------- */

.npg-faq {
  margin-top: var(--npg-s60);
  padding-top: var(--npg-s40);
  border-top: 2px solid var(--npg-ink);
}

.npg-faq-heading {
  font-family: var(--npg-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--npg-muted);
  font-weight: 500;
  margin-bottom: var(--npg-s40);
}

.npg-faq-list { display: flex; flex-direction: column; }

.npg-faq-item {
  padding-block: var(--npg-s40);
  border-top: 1px solid var(--npg-rule);
}
.npg-faq-item:first-child { border-top: 0; padding-top: 0; }

.npg-faq-q {
  font-size: 1.1875rem;
  line-height: 1.3;
  color: var(--npg-ink);
  scroll-margin-top: var(--npg-s50);
}

.npg-faq-a {
  margin-top: var(--npg-s30);
  color: var(--npg-body);
}
.npg-faq-a p + p { margin-top: var(--npg-s30); }
.npg-faq-a strong { color: var(--npg-ink); }

/* -----------------------------------------------------------------------------
   Diagrams

   Inline SVG with real text inside, so it stays selectable, extractable and
   printable, and inherits the theme rather than being baked into a raster.
   There is no decorative artwork on this site, only diagrams that carry
   information the prose cannot.
   -------------------------------------------------------------------------- */

.npg-figure { margin-block: var(--npg-s50); }

.npg-diagram {
  display: block;
  width: 100%;
  height: auto;
  background: var(--npg-surface);
  border: 1px solid var(--npg-rule-strong);
  border-radius: 4px;
  padding: var(--npg-s30);
}

.npg-diagram .d-box { fill: var(--npg-base); stroke: var(--npg-rule-strong); stroke-width: 1; }
.npg-diagram .d-start { fill: var(--npg-sunken); }
.npg-diagram .d-out { fill: var(--npg-accent-tint); stroke: var(--npg-accent); }
.npg-diagram .d-out--heavy { stroke-width: 2; }
.npg-diagram .d-ring1 { fill: var(--npg-base); }
.npg-diagram .d-ring2 { fill: var(--npg-surface); }
.npg-diagram .d-ring3 { fill: var(--npg-accent-tint); stroke: var(--npg-accent); }

.npg-diagram .d-line { stroke: var(--npg-rule-strong); stroke-width: 1.5; fill: none; }
.npg-diagram .d-node { fill: var(--npg-accent); }

.npg-diagram text { font-family: var(--npg-sans); }
.npg-diagram .d-label {
  font-family: var(--npg-mono); font-size: 11px;
  letter-spacing: 0.09em; text-transform: uppercase; fill: var(--npg-muted);
}
.npg-diagram .d-label--accent { fill: var(--npg-accent); }
.npg-diagram .d-text { font-size: 15px; font-weight: 600; fill: var(--npg-ink); }
.npg-diagram .d-cond { font-size: 14px; fill: var(--npg-body); }
.npg-diagram .d-note { font-size: 12.5px; fill: var(--npg-muted); }
.npg-diagram .d-out-label {
  font-family: var(--npg-serif); font-size: 19px; font-weight: 700; fill: var(--npg-ink);
}

.npg-figure figcaption {
  margin-top: var(--npg-s30);
  font-size: 0.875rem;
  color: var(--npg-muted);
  max-width: 62ch;
}

/* Diagrams are the one thing on a printed page worth the ink. */
@media print {
  .npg-diagram { background: #fff !important; border: 1pt solid #666 !important; page-break-inside: avoid; }
  .npg-diagram .d-out, .npg-diagram .d-ring3 { fill: #fff !important; stroke: #000 !important; }
}

/* -----------------------------------------------------------------------------
   Downloads

   No email gate. The file is a convenience over content that is already on the
   page in full, because a .docx is invisible to a search engine and to a model.
   -------------------------------------------------------------------------- */

.npg-downloads {
  margin-block: var(--npg-s50);
  border: 1px solid var(--npg-accent);
  border-radius: 4px;
  background: var(--npg-accent-tint);
  padding: var(--npg-s40);
}

.npg-dl-heading {
  font-family: var(--npg-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--npg-accent);
  font-weight: 600;
}

.npg-dl-intro {
  margin-top: var(--npg-s20);
  font-size: 0.9375rem;
  color: var(--npg-body);
  max-width: 60ch;
}

.npg-dl-list { list-style: none; margin: var(--npg-s30) 0 0; padding: 0; }

.npg-dl-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--npg-s20) var(--npg-s40);
  padding-block: var(--npg-s30);
  border-top: 1px solid var(--npg-rule-strong);
}

.npg-dl-list a { text-decoration: none; display: flex; flex-direction: column; gap: 0.15rem; }
.npg-dl-label {
  font-family: var(--npg-serif);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--npg-accent);
}
.npg-dl-list a:hover .npg-dl-label { color: var(--npg-accent-deep); text-decoration: underline; }
.npg-dl-note { font-size: 0.875rem; color: var(--npg-muted); font-weight: 400; }

.npg-dl-meta {
  font-family: var(--npg-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--npg-muted);
  white-space: nowrap;
}

/* The template text itself, set apart from the surrounding explanation so it
   is obvious what you are meant to copy. */
.npg-template-text {
  border-left: 3px solid var(--npg-rule-strong);
  padding-left: var(--npg-s40);
  margin-block: var(--npg-s40);
}
.npg-template-text h3 {
  font-family: var(--npg-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--npg-muted);
  margin-top: var(--npg-s40);
}
.npg-template-text .npg-fill {
  background: var(--npg-flag-tint);
  color: var(--npg-flag);
  padding: 0.05em 0.35em;
  border-radius: 2px;
  font-family: var(--npg-mono);
  font-size: 0.875em;
}

@media print { .npg-downloads { display: none !important; } }

/* -----------------------------------------------------------------------------
   Homepage rebuild, August 2026

   Three additions: a call to action in the masthead, which the front page
   previously did not have at all; the documents index; and the byline that
   closes the page.
   -------------------------------------------------------------------------- */

/* ---------- Masthead call to action ---------- */

.npg-statement-cta {
  margin-top: var(--npg-s40);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--npg-s30) var(--npg-s40);
}

.npg-cta {
  display: inline-block;
  background: var(--npg-accent);
  color: var(--npg-base);
  font-family: var(--npg-sans);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--npg-accent);
  border-radius: 2px;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}
.npg-cta:hover,
.npg-cta:focus-visible {
  background: transparent;
  color: var(--npg-accent);
  text-decoration: none;
}

.npg-cta-note {
  font-size: 0.875rem;
  color: var(--npg-muted);
  max-width: 34ch;
  line-height: 1.45;
}

@media (min-width: 900px) {
  /* The masthead is a two column grid: lead left, qualifying detail right. The
     action belongs under the detail rather than under the lead, so it reads as
     the end of the argument rather than an interruption of it. */
  .npg-statement-cta { grid-column: 2; margin-top: var(--npg-s40); }
}

@media (max-width: 700px) {
  .npg-statement-cta { margin-top: var(--npg-s30); gap: var(--npg-s20); }
  .npg-cta { padding: 0.6875rem 1.25rem; font-size: 0.9375rem; }
  .npg-cta-note { max-width: none; font-size: 0.8125rem; }
}

/* ---------- Documents index ----------

   A ruled list rather than a card grid. Fourteen cards would be a wall; a
   ruled index is what a reference work does with a list of this length, and it
   stays legible when the count changes. */

.npg-docs {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--npg-ink);
  display: grid;
  grid-template-columns: 1fr;
}

.npg-doc {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title meta"
    "note  meta";
  column-gap: var(--npg-s40);
  row-gap: 0.125rem;
  align-items: baseline;
  padding: var(--npg-s30) 0;
  border-bottom: 1px solid var(--npg-rule);
}

.npg-doc-title {
  grid-area: title;
  font-family: var(--npg-serif);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--npg-ink);
  letter-spacing: -0.01em;
  text-decoration: none;
}
.npg-doc-title:hover { color: var(--npg-accent); text-decoration: underline; }

.npg-doc-note {
  grid-area: note;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--npg-muted);
  max-width: 62ch;
}

.npg-doc-meta {
  grid-area: meta;
  display: flex;
  align-items: baseline;
  gap: var(--npg-s20);
  white-space: nowrap;
}
.npg-doc-meta a {
  font-family: var(--npg-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--npg-accent);
  background: var(--npg-accent-tint);
  padding: 0.25rem 0.5rem;
  border-radius: 2px;
  text-decoration: none;
}
.npg-doc-meta a:hover { background: var(--npg-accent); color: var(--npg-base); }

.npg-doc-size {
  font-family: var(--npg-mono);
  font-size: 0.625rem;
  color: var(--npg-muted);
}

@media (min-width: 900px) {
  /* Two columns once there is room. The rule between them keeps it reading as
     one index rather than two unrelated lists. */
  .npg-docs { grid-template-columns: 1fr 1fr; column-gap: var(--npg-s60); }
  .npg-docs > .npg-doc:nth-child(odd) { border-right: 0; }
}

@media (max-width: 620px) {
  /* Stacked, with the format chip dropping under the title. Two columns of
     this at phone width squeezed the note to four words a line. */
  .npg-doc {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "note" "meta";
    row-gap: var(--npg-s20);
  }
  .npg-doc-meta { justify-content: flex-start; }
}

/* ---------- Closing byline ---------- */

.npg-byline-foot {
  margin-top: var(--npg-s60);
  padding-top: var(--npg-s40);
  border-top: 1px solid var(--npg-rule-strong);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--npg-body);
  max-width: 78ch;
}

/* The subject count became a link in the rebuild, so it needs to look like
   one without losing the small-caps treatment that made it read as furniture. */
.npg-subject-count a {
  color: var(--npg-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--npg-rule-strong);
}
.npg-subject-count a:hover { color: var(--npg-accent); border-bottom-color: var(--npg-accent); }

@media print {
  .npg-statement-cta, .npg-doc-meta { display: none !important; }
}

/* The masthead statement is the homepage H1. Everything about it is set by
   .npg-statement-lead, so the base heading rules must not reassert themselves
   on the element. */
h1.npg-statement-lead { margin: 0; }

@media (max-width: 620px) {
  /* Measured on a 375px viewport: the documents index ran to 2,283px, 2.8
     screens, the tallest section on the page. The per-document note is the
     cost, and on a phone the title already says what the file is. The note
     stays on tablet and desktop where it costs nothing. */
  .npg-doc-note { display: none; }
  .npg-doc { row-gap: var(--npg-s10); padding: var(--npg-s20) 0; }
}

/* -----------------------------------------------------------------------------
   Homepage design pass, August 2026

   Two problems. Eight bands of paper and surface read as one long scroll
   however good the content is, so the page had no spine. And two classes were
   carrying no rules at all, so the lead headline rendered at default h2 size
   and the recently-verified list rendered with browser bullets.

   Contrast on the inverted panel was measured before it was written. The
   working teal is #0F5B60 and it returns 2.08:1 against navy, which fails
   outright, so the panel uses the lighter teal at 7.43:1.
   -------------------------------------------------------------------------- */

/* ---------- The inverted lead panel ---------- */

.npg-lead--invert {
  --npg-invert-ink:   #FCFBF9;
  --npg-invert-body:  #D3D8DC;
  --npg-invert-muted: #97A1AB;
  --npg-invert-teal:  #5FBFB4;

  background: var(--npg-ink);
  color: var(--npg-invert-body);
  padding-block: var(--npg-s60) var(--npg-s60);
  border-top: 1px solid var(--npg-ink);
  border-bottom: 1px solid var(--npg-ink);
}

.npg-lead--invert .npg-lead-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--npg-s20);
  color: var(--npg-invert-teal);
}
.npg-lead--invert .npg-lead-kicker .npg-icon { flex: none; }

.npg-lead--invert .npg-lead-h { color: var(--npg-invert-ink); }

.npg-lead--invert .npg-lead-standfirst {
  color: var(--npg-invert-body);
  border-left-color: var(--npg-invert-teal);
}

/* The table has to be rebuilt on navy: every default here is a light-ground
   value and several of them vanish outright against it. */
.npg-lead--invert .npg-tablewrap {
  border-color: rgba(252, 251, 249, 0.16);
  background: rgba(252, 251, 249, 0.03);
}
.npg-lead--invert table.npg-table th {
  background: rgba(252, 251, 249, 0.06);
  color: var(--npg-invert-muted);
  border-bottom-color: var(--npg-invert-teal);
}
.npg-lead--invert table.npg-table td {
  color: var(--npg-invert-body);
  border-bottom-color: rgba(252, 251, 249, 0.1);
}
.npg-lead--invert table.npg-table td:first-child { color: var(--npg-invert-ink); font-weight: 600; }
.npg-lead--invert table.npg-table td.npg-num,
.npg-lead--invert table.npg-table th.npg-num {
  color: var(--npg-invert-teal);
  font-weight: 700;
}
.npg-lead--invert table.npg-table tbody tr:last-child td { border-bottom: 0; }

/* The revocation row is the one that closes organizations. Flagged, not shouted. */
.npg-lead--invert table.npg-table tbody tr:last-child {
  background: rgba(217, 160, 91, 0.09);
}
.npg-lead--invert table.npg-table tbody tr:last-child td.npg-num { color: #E5B575; }

.npg-lead--invert .npg-facts-foot { color: var(--npg-invert-muted); }
.npg-lead--invert .npg-facts-foot a {
  color: var(--npg-invert-ink);
  text-decoration-color: rgba(252, 251, 249, 0.4);
}
.npg-lead--invert .npg-facts-foot a:hover { color: var(--npg-invert-teal); }

/* ---------- The lead headline, previously unstyled ---------- */

.npg-lead-h {
  font-size: clamp(1.625rem, 1.1rem + 2.2vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
  max-width: 26ch;
  margin-top: var(--npg-s30);
  text-wrap: balance;
}

/* ---------- Recently verified, previously unstyled ---------- */

.npg-verified {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--npg-ink);
}
.npg-verified > li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--npg-s30);
  padding: var(--npg-s30) 0;
  border-bottom: 1px solid var(--npg-rule);
}
.npg-verified > li > a {
  font-family: var(--npg-serif);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--npg-ink);
  text-decoration: none;
}
.npg-verified > li > a:hover { color: var(--npg-accent); text-decoration: underline; }

.npg-verified-mark { color: var(--npg-accent); display: flex; align-self: center; }

.npg-verified-meta {
  display: flex;
  align-items: baseline;
  gap: var(--npg-s30);
  font-family: var(--npg-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--npg-muted);
  white-space: nowrap;
}
.npg-verified-type {
  background: var(--npg-accent-tint);
  color: var(--npg-accent);
  padding: 0.2rem 0.45rem;
  border-radius: 2px;
}

@media (max-width: 620px) {
  .npg-verified > li {
    grid-template-columns: auto 1fr;
    row-gap: var(--npg-s20);
  }
  .npg-verified-meta { grid-column: 2; }
}

/* ---------- Icons ---------- */

/* Subject cards: the icon sat loose above the heading at 22px and read as a
   stray mark. In a tinted disc it reads as a deliberate element. */
.npg-subject-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--npg-accent-tint);
  color: var(--npg-accent);
  margin-bottom: var(--npg-s30);
}

/* Documents: the format glyph carries the xlsx and docx distinction visually,
   so the chip beside it is confirmation rather than the only signal. */
.npg-doc-icon {
  grid-area: icon;
  display: flex;
  align-items: center;
  color: var(--npg-muted);
}

.npg-doc {
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "icon title meta"
    "icon note  meta";
  column-gap: var(--npg-s30);
}

/* Tool cards: a large glyph gives each card a face, which two blocks of text
   side by side did not have. */
.npg-tool-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 4px;
  background: var(--npg-accent-tint);
  color: var(--npg-accent);
  margin-bottom: var(--npg-s10);
}
a.npg-tool:hover .npg-tool-icon { background: var(--npg-accent); color: var(--npg-base); }

/* Principles: icon above the rule, so the three columns read as a set. */
.npg-principle-icon {
  display: inline-flex;
  color: var(--npg-accent);
  margin-bottom: var(--npg-s20);
}

@media (max-width: 620px) {
  .npg-doc {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon title"
      "icon meta";
  }
  .npg-subject-icon { width: 2.25rem; height: 2.25rem; }
}

@media print {
  .npg-lead--invert { background: transparent; color: #000; }
  .npg-lead--invert .npg-lead-h,
  .npg-lead--invert table.npg-table td { color: #000; }
  .npg-doc-icon, .npg-tool-icon, .npg-principle-icon, .npg-verified-mark { display: none !important; }
}

@media (max-width: 620px) {
  /* Measured at 375px: the three columns came out 108, 87 and 130px, and the
     explanation column wrapped to seven lines, giving 144px rows and a 1,188px
     table. Three columns do not fit here and pretending otherwise is what
     produces that.

     So each row restacks: label and figure on one line, the explanation full
     width underneath. The caption stays for context. This trades table
     semantics on small screens for a row that can actually be read, which is
     the right way round for a reference people consult on a phone. */
  .npg-lead--invert table.npg-table,
  .npg-lead--invert table.npg-table tbody,
  .npg-lead--invert table.npg-table tr,
  .npg-lead--invert table.npg-table td { display: block; width: auto; }

  .npg-lead--invert table.npg-table thead { display: none; }

  .npg-lead--invert table.npg-table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--npg-s30);
    padding: var(--npg-s30) var(--npg-s30);
    border-bottom: 1px solid rgba(252, 251, 249, 0.1);
  }

  .npg-lead--invert table.npg-table td { padding: 0; border: 0; }
  .npg-lead--invert table.npg-table td:first-child { flex: 1 1 auto; font-size: 0.9375rem; }
  .npg-lead--invert table.npg-table td.npg-num {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 1.0625rem;
    text-align: right;
  }
  .npg-lead--invert table.npg-table td:last-child {
    flex: 1 1 100%;
    margin-top: var(--npg-s10);
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--npg-invert-muted);
  }

  .npg-lead--invert .npg-tablewrap { overflow-x: visible; }
  .npg-lead--invert { padding-block: var(--npg-s50); }
}

/* -----------------------------------------------------------------------------
   The hero, third pass

   The previous block could not be made to feel big whatever the copy said. It
   was a two column grid with the headline confined to the left half and capped
   at 2rem, which is 32px on a 1280px screen. A masthead statement at 32px
   competes with the section headings below it and loses.

   Full width, up to 4rem, one real action.
   -------------------------------------------------------------------------- */

.npg-hero {
  background: var(--npg-surface);
  border-bottom: 1px solid var(--npg-rule);
  padding-block: clamp(var(--npg-s50), 6vw, var(--npg-s70));
}

.npg-hero-h {
  font-family: var(--npg-serif);
  font-weight: 700;
  /* 36px on a phone, 64px on a desktop. The old ceiling was 32px. */
  font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--npg-ink);
  /* 20ch forced a third line at 64px and overrode the authored break, which
     put "has to get" and "right." on separate lines. Measured: the first line
     needs about 26ch to hold. */
  max-width: 26ch;
  margin: 0;
  /* Balance fights the authored <br>. The break is deliberate, so let it win. */
  text-wrap: pretty;
}

/* The line break is authored so the headline breaks where the sense does,
   rather than wherever the measure happens to run out. Removed below the
   breakpoint where the line no longer fits. */
.npg-hero-br { display: none; }
@media (min-width: 760px) { .npg-hero-br { display: inline; } }

.npg-hero-sub {
  margin-top: var(--npg-s40);
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem);
  line-height: 1.55;
  color: var(--npg-body);
  max-width: 60ch;
  padding-left: var(--npg-s40);
  border-left: 3px solid var(--npg-accent);
}

.npg-hero-actions {
  margin-top: var(--npg-s50);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--npg-s30) var(--npg-s40);
}

/* The large action. The small one further down the page is fine where it is;
   this one has to carry the whole first screen. */
.npg-cta--lg {
  display: inline-flex;
  align-items: center;
  gap: var(--npg-s20);
  font-size: 1.0625rem;
  padding: 0.9375rem 1.75rem;
  box-shadow: 0 1px 0 rgba(22, 33, 46, 0.18);
}
.npg-cta-arrow { transition: transform 0.14s ease; }
.npg-cta--lg:hover .npg-cta-arrow,
.npg-cta--lg:focus-visible .npg-cta-arrow { transform: translateX(3px); }

/* The second route, for people who came for the documents rather than the
   reading. Deliberately not a second button: two buttons of equal weight is
   two primary actions, which is none. */
.npg-hero-alt {
  font-size: 0.9375rem;
  color: var(--npg-body);
  text-decoration-color: var(--npg-rule-strong);
  text-underline-offset: 3px;
}
.npg-hero-alt:hover { color: var(--npg-accent); }

/* The three proofs. These carry the credibility the old copy spent half its
   words on, in a form a reader can skip. */
.npg-hero-trust {
  list-style: none;
  margin: var(--npg-s50) 0 0;
  padding: var(--npg-s40) 0 0;
  border-top: 1px solid var(--npg-rule-strong);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--npg-s30);
  font-size: 0.875rem;
  color: var(--npg-muted);
}
.npg-hero-trust li {
  display: flex;
  align-items: center;
  gap: var(--npg-s20);
}
.npg-hero-trust .npg-icon { color: var(--npg-accent); flex: none; }

@media (min-width: 820px) {
  .npg-hero-trust { grid-template-columns: repeat(3, 1fr); gap: var(--npg-s40); }
}

@media (max-width: 700px) {
  .npg-hero-h { max-width: none; letter-spacing: -0.025em; }
  .npg-hero-sub { margin-top: var(--npg-s30); padding-left: var(--npg-s30); }
  .npg-hero-actions { margin-top: var(--npg-s40); }
  .npg-cta--lg { width: 100%; justify-content: center; }
  .npg-hero-trust { margin-top: var(--npg-s40); padding-top: var(--npg-s30); }
}

/* -----------------------------------------------------------------------------
   Hero, fourth pass: two real actions, and a proof strip that holds one line
   -------------------------------------------------------------------------- */

/* The second action is now a button rather than a text link, because both
   destinations are worth going to. It stays visually subordinate through
   weight rather than through size: outlined against the solid primary, so the
   pair still reads as one first choice and one alternative. */
.npg-cta--ghost {
  background: transparent;
  color: var(--npg-accent);
  border-color: var(--npg-rule-strong);
  box-shadow: none;
}
.npg-cta--ghost:hover,
.npg-cta--ghost:focus-visible {
  background: var(--npg-accent-tint);
  color: var(--npg-accent);
  border-color: var(--npg-accent);
}

/* The proof strip. Each item was running to two lines in its column, which
   turned three short claims into a six line block sitting under the buttons.
   The copy is shorter now; these rules stop it wrapping again if it is ever
   edited back to something longer. */
.npg-hero-trust li {
  font-size: 0.875rem;
  line-height: 1.4;
}

@media (min-width: 820px) {
  /* Sized to content rather than in equal thirds, so a slightly longer item
     takes the room it needs from a shorter one instead of wrapping. */
  .npg-hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--npg-s30) var(--npg-s50);
  }
  .npg-hero-trust li { white-space: nowrap; }
}

@media (max-width: 700px) {
  /* Two full width buttons stacked reads as a form. The second one sizes to
     its content and sits under the first. */
  .npg-cta--ghost { width: auto; }
}