/* ============================================================
   Neutral News — CSS Design System
   v0.1 · 2026-05-07
   Mostly black & white, paper-feel, bold editorial typography.
   Drop this single file into site/static/ and import in templates.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&family=Schibsted+Grotesk:wght@400..900&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ---------- Tokens ---------- */
:root {
  /* Paper & ink */
  --nn-paper:        #f6f4ee;
  --nn-paper-dim:    #ede9df;
  --nn-paper-deep:   #e3dfd1;
  --nn-ink:          #111110;
  --nn-ink-soft:     #2a2a27;
  --nn-ink-mute:     #6b6960;
  --nn-ink-faint:    #a09c91;
  --nn-rule:         #1a1a18;
  --nn-rule-soft:    #d6d2c5;

  /* Single signal accent — verification / primary source */
  --nn-signal:       oklch(0.52 0.18 30);
  --nn-signal-ink:   oklch(0.32 0.12 30);
  --nn-signal-soft:  oklch(0.95 0.04 30);

  /* Type families */
  --nn-font-display: 'Schibsted Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --nn-font-text:    'Newsreader', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --nn-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Fluid type scale (1.2 mobile → 1.25 desktop) */
  --nn-step--2: clamp(0.69rem, 0.67rem + 0.13vw, 0.78rem);
  --nn-step--1: clamp(0.83rem, 0.79rem + 0.20vw, 0.94rem);
  --nn-step-0:  clamp(1.00rem, 0.94rem + 0.30vw, 1.13rem);
  --nn-step-1:  clamp(1.20rem, 1.11rem + 0.45vw, 1.41rem);
  --nn-step-2:  clamp(1.44rem, 1.31rem + 0.66vw, 1.76rem);
  --nn-step-3:  clamp(1.73rem, 1.54rem + 0.93vw, 2.20rem);
  --nn-step-4:  clamp(2.07rem, 1.81rem + 1.31vw, 2.75rem);
  --nn-step-5:  clamp(2.49rem, 2.13rem + 1.81vw, 3.43rem);
  --nn-step-6:  clamp(2.99rem, 2.49rem + 2.50vw, 4.29rem);
  --nn-step-7:  clamp(3.58rem, 2.91rem + 3.36vw, 5.36rem);
  --nn-step-8:  clamp(4.30rem, 3.40rem + 4.50vw, 6.70rem);

  /* Spacing */
  --nn-3xs: 0.25rem;
  --nn-2xs: 0.5rem;
  --nn-xs:  0.75rem;
  --nn-s:   1rem;
  --nn-m:   1.5rem;
  --nn-l:   2rem;
  --nn-xl:  3rem;
  --nn-2xl: 4.5rem;
  --nn-3xl: 6rem;

  /* Layout */
  --nn-measure:    65ch;
  --nn-container:  78rem;
  --nn-narrow:     42rem;
  --nn-gutter:     clamp(1rem, 4vw, 2.5rem);
  --nn-rule-w:     1px;
  --nn-rule-w-bold: 3px;
}

/* Dark mode opt-in (paper inverts to deep ink) */
[data-theme="dark"] {
  --nn-paper:        #0c0c0a;
  --nn-paper-dim:    #161614;
  --nn-paper-deep:   #1f1f1c;
  --nn-ink:          #f1eee5;
  --nn-ink-soft:     #d8d4c8;
  --nn-ink-mute:     #9a978c;
  --nn-ink-faint:    #4a4843;
  --nn-rule:         #f1eee5;
  --nn-rule-soft:    #2a2926;
  --nn-signal:       oklch(0.72 0.18 30);
  --nn-signal-ink:   oklch(0.85 0.15 30);
  --nn-signal-soft:  oklch(0.28 0.08 30);
}

/* High-contrast / pure mode (true B&W press) */
[data-theme="pure"] {
  --nn-paper:        #ffffff;
  --nn-paper-dim:    #f4f4f4;
  --nn-paper-deep:   #ebebeb;
  --nn-ink:          #000000;
  --nn-ink-soft:     #000000;
  --nn-ink-mute:     #555555;
  --nn-ink-faint:    #999999;
  --nn-rule:         #000000;
  --nn-rule-soft:    #d8d8d8;
  --nn-signal:       #000000;
  --nn-signal-ink:   #000000;
  --nn-signal-soft:  #ebebeb;
}

/* ---------- Reset (light) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--nn-paper);
  color: var(--nn-ink);
  font-family: var(--nn-font-text);
  font-size: var(--nn-step-0);
  line-height: 1.55;
  font-feature-settings: "ss01", "kern", "liga";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
hr { border: 0; border-top: var(--nn-rule-w) solid var(--nn-rule); margin: var(--nn-l) 0; }
::selection { background: var(--nn-ink); color: var(--nn-paper); }

/* ---------- Layout primitives ---------- */
.nn-container {
  width: 100%;
  max-width: var(--nn-container);
  margin-inline: auto;
  padding-inline: var(--nn-gutter);
}
.nn-main { padding-block: var(--nn-l) var(--nn-2xl); }
.nn-narrow { max-width: var(--nn-narrow); margin-inline: auto; }
.nn-measure { max-width: var(--nn-measure); }

.nn-stack > * + * { margin-top: var(--nn-stack-gap, var(--nn-m)); }
.nn-stack-s > * + * { margin-top: var(--nn-2xs); }
.nn-stack-m > * + * { margin-top: var(--nn-m); }
.nn-stack-l > * + * { margin-top: var(--nn-l); }

.nn-row { display: flex; flex-wrap: wrap; gap: var(--nn-row-gap, var(--nn-s)); align-items: center; }
.nn-row-between { justify-content: space-between; }
.nn-row-baseline { align-items: baseline; }

/* ---------- Type ---------- */
.nn-display {
  font-family: var(--nn-font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 0.95;
  text-wrap: balance;
}
.nn-headline {
  font-family: var(--nn-font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.05;
  text-wrap: balance;
  color: var(--nn-ink);
}
.nn-dek {
  font-family: var(--nn-font-text);
  font-weight: 300;
  font-style: italic;
  font-size: var(--nn-step-1);
  line-height: 1.35;
  color: var(--nn-ink-soft);
  text-wrap: pretty;
}
.nn-body {
  font-family: var(--nn-font-text);
  font-size: var(--nn-step-0);
  line-height: 1.65;
  color: var(--nn-ink);
  text-wrap: pretty;
  hanging-punctuation: first last;
}
.nn-body p { margin: 0; }
.nn-body p + p { margin-top: 1em; text-indent: 1.4em; }
.nn-body p.nn-lede {
  text-indent: 0;
  font-size: var(--nn-step-1);
  line-height: 1.5;
}
.nn-body p.nn-lede::first-letter {
  font-family: var(--nn-font-display);
  font-weight: 800;
  font-size: 4.4em;
  float: left;
  line-height: 0.85;
  padding: 0.05em 0.1em 0 0;
  margin-right: 0.04em;
  color: var(--nn-ink);
}

.nn-meta {
  font-family: var(--nn-font-mono);
  font-size: var(--nn-step--2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nn-ink-mute);
}
.nn-eyebrow {
  font-family: var(--nn-font-display);
  font-weight: 700;
  font-size: var(--nn-step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nn-ink);
}
.nn-byline {
  font-family: var(--nn-font-mono);
  font-size: var(--nn-step--2);
  color: var(--nn-ink-mute);
  letter-spacing: 0.02em;
}

/* Display sizes */
.nn-d-1 { font-size: var(--nn-step-8); } /* masthead-grade */
.nn-d-2 { font-size: var(--nn-step-7); }
.nn-d-3 { font-size: var(--nn-step-6); }
.nn-d-4 { font-size: var(--nn-step-5); }
.nn-d-5 { font-size: var(--nn-step-4); }
.nn-d-6 { font-size: var(--nn-step-3); }
.nn-d-7 { font-size: var(--nn-step-2); }
.nn-d-8 { font-size: var(--nn-step-1); }

/* ---------- Rules ---------- */
.nn-rule        { border: 0; border-top: var(--nn-rule-w) solid var(--nn-rule); margin: 0; }
.nn-rule-bold   { border: 0; border-top: var(--nn-rule-w-bold) solid var(--nn-rule); margin: 0; }
.nn-rule-soft   { border: 0; border-top: var(--nn-rule-w) solid var(--nn-rule-soft); margin: 0; }
.nn-rule-double { border: 0; border-top: 1px solid var(--nn-rule); border-bottom: 1px solid var(--nn-rule); height: 4px; margin: 0; }

/* ---------- Masthead ---------- */
.nn-masthead {
  padding: var(--nn-l) 0 0;
}
.nn-masthead__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--nn-s);
  padding-block: var(--nn-2xs);
}
.nn-masthead__title {
  font-family: var(--nn-font-display);
  font-weight: 900;
  font-size: var(--nn-step-7);
  letter-spacing: -0.04em;
  line-height: 0.85;
  text-align: center;
  margin: 0;
  font-feature-settings: "ss01";
}
.nn-masthead__title .fets-dot {
  color: var(--nn-signal);
}
.nn-masthead__title sup {
  font-family: var(--nn-font-mono);
  font-size: 0.18em;
  font-weight: 500;
  vertical-align: super;
  margin-left: 0.3em;
  letter-spacing: 0.08em;
  color: var(--nn-signal);
  text-transform: uppercase;
}
.nn-masthead__left, .nn-masthead__right {
  font-family: var(--nn-font-mono);
  font-size: var(--nn-step--2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--nn-ink-mute);
  display: flex;
  gap: var(--nn-m);
  align-items: center;
}
.nn-masthead__right { justify-content: flex-end; }
.nn-masthead__left  { justify-content: flex-start; flex-wrap: wrap; }
/* The left side of the masthead carries the print-paper triplet:
   issue number · edition kind · date. Each in mono caps; the issue
   number is the bold headline of the three. */
.nn-masthead__issue {
  color: var(--nn-ink);
  font-weight: 700;
}
.nn-masthead__edition-kind {
  color: var(--nn-signal);
  font-weight: 600;
}
.nn-masthead__date {
  color: var(--nn-ink-mute);
}
.nn-masthead__motto {
  text-align: center;
  font-family: var(--nn-font-text);
  font-style: italic;
  font-weight: 300;
  font-size: var(--nn-step-3);
  color: var(--nn-ink-mute);
  margin-top: var(--nn-m);
  margin-bottom: var(--nn-m);
  line-height: 1.25;
  letter-spacing: -0.005em;
  text-wrap: balance;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Section nav (Today · Archive · Timeline · About) ----------
   The nav itself spans the full viewport width so the thin rule at its
   bottom edge meets the page gutters; an inner container re-applies
   horizontal padding so the LINKS stay centred on the same gutter as
   the masthead and content above. The bold divider lives on a sibling
   <hr> so it can also reach the viewport edges. */
.nn-secnav {
  border-bottom: var(--nn-rule-w) solid var(--nn-rule-soft);
  font-family: var(--nn-font-display);
  font-weight: 700;
  font-size: var(--nn-step-2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.nn-secnav__inner {
  display: flex;
  justify-content: center;
  gap: var(--nn-2xl);
  padding-block: var(--nn-m) var(--nn-s);
  flex-wrap: wrap;
}
.nn-secnav a {
  position: relative;
  padding: var(--nn-2xs) 0;
  color: var(--nn-ink);
  text-decoration: none;
}
.nn-secnav a[aria-current="page"]::after,
.nn-secnav a:hover::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--nn-ink);
}
.nn-secnav__divider {
  border: 0;
  border-top: var(--nn-rule-w-bold) solid var(--nn-rule);
  margin: 0;
}

/* ---------- Language toggle ---------- */
.nn-lang {
  display: inline-flex;
  font-family: var(--nn-font-mono);
  font-size: var(--nn-step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--nn-rule);
}
.nn-lang button, .nn-lang a {
  padding: 0.35em 0.7em;
  color: var(--nn-ink);
  border-right: 1px solid var(--nn-rule);
}
.nn-lang button:last-child, .nn-lang a:last-child { border-right: 0; }
.nn-lang [aria-current="true"], .nn-lang .is-active {
  background: var(--nn-ink);
  color: var(--nn-paper);
}

/* ---------- Section header ---------- */
.nn-section-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: var(--nn-m);
  padding: var(--nn-xl) 0 var(--nn-s);
  border-bottom: var(--nn-rule-w) solid var(--nn-rule);
}
.nn-section-head__label {
  font-family: var(--nn-font-display);
  font-weight: 900;
  font-size: var(--nn-step-5);
  letter-spacing: -0.02em;
  line-height: 0.9;
  margin: 0;
}
.nn-section-head__count {
  font-family: var(--nn-font-mono);
  font-size: var(--nn-step--1);
  color: var(--nn-ink-mute);
  letter-spacing: 0.04em;
  align-self: end;
}
.nn-section-head__meta {
  font-family: var(--nn-font-mono);
  font-size: var(--nn-step--2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--nn-ink-mute);
  text-align: right;
}

/* ---------- Article cards / bulletins ---------- */
.nn-grid {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(12, 1fr);
}
.nn-grid > * { padding: var(--nn-m) var(--nn-m) var(--nn-l); }
.nn-grid > * + * { border-left: var(--nn-rule-w) solid var(--nn-rule-soft); }

.nn-grid--lead-3 > :nth-child(1) { grid-column: span 6; padding-left: 0; }
.nn-grid--lead-3 > :nth-child(2) { grid-column: span 3; }
.nn-grid--lead-3 > :nth-child(3) { grid-column: span 3; padding-right: 0; }

.nn-grid--3up > * { grid-column: span 4; }
.nn-grid--3up > :first-child { padding-left: 0; }
.nn-grid--3up > :last-child  { padding-right: 0; }

.nn-grid--4up > * { grid-column: span 3; }
.nn-grid--4up > :first-child { padding-left: 0; }
.nn-grid--4up > :last-child  { padding-right: 0; }

.nn-grid--2up > * { grid-column: span 6; }
.nn-grid--2up > :first-child { padding-left: 0; }
.nn-grid--2up > :last-child  { padding-right: 0; }

@media (max-width: 760px) {
  .nn-grid > * { grid-column: 1 / -1 !important; padding-inline: 0 !important; border-left: 0 !important; border-top: var(--nn-rule-w) solid var(--nn-rule-soft); }
  .nn-grid > :first-child { border-top: 0; }
}

/* Article card content */
.nn-art { display: flex; flex-direction: column; gap: var(--nn-2xs); }
.nn-art__kicker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nn-2xs);
  align-items: center;
  font-family: var(--nn-font-mono);
  font-size: var(--nn-step--2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--nn-ink-mute);
}
.nn-art__head {
  font-family: var(--nn-font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.05;
  color: var(--nn-ink);
  text-wrap: balance;
}
.nn-art--lead .nn-art__head { font-size: var(--nn-step-5); font-weight: 800; }
.nn-art--medium .nn-art__head { font-size: var(--nn-step-3); }
.nn-art--small .nn-art__head { font-size: var(--nn-step-2); }
.nn-art--bulletin .nn-art__head { font-size: var(--nn-step-1); font-weight: 700; }
.nn-art__dek {
  font-family: var(--nn-font-text);
  font-style: italic;
  font-weight: 300;
  font-size: var(--nn-step-0);
  line-height: 1.4;
  color: var(--nn-ink-soft);
  text-wrap: pretty;
  margin-top: var(--nn-2xs);
}
.nn-art__body {
  font-family: var(--nn-font-text);
  font-size: var(--nn-step-0);
  line-height: 1.55;
  color: var(--nn-ink-soft);
  margin-top: var(--nn-2xs);
  text-wrap: pretty;
}
.nn-art__foot {
  margin-top: var(--nn-s);
  display: flex;
  flex-wrap: wrap;
  gap: var(--nn-2xs) var(--nn-s);
  align-items: center;
}

/* ---------- Source pills (the "neutrality guarantee" UI) ---------- */
.nn-source {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--nn-font-mono);
  font-size: var(--nn-step--2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.25em 0.55em;
  border: 1px solid var(--nn-rule);
  color: var(--nn-ink);
  line-height: 1;
  white-space: nowrap;
}
.nn-source::before {
  content: "";
  width: 0.55em;
  height: 0.55em;
  display: inline-block;
  background: currentColor;
}
.nn-source--institutional { color: var(--nn-ink); border-color: var(--nn-ink); }
.nn-source--institutional::before { background: var(--nn-ink); }
.nn-source--sensor       { color: var(--nn-ink); border-color: var(--nn-ink); }
.nn-source--sensor::before { background: var(--nn-paper); border: 2px solid var(--nn-ink); width: 0.6em; height: 0.6em; transform: rotate(45deg); }
.nn-source--wire         { color: var(--nn-ink-mute); border-color: var(--nn-ink-mute); }
.nn-source--wire::before { background: transparent; border: 1px solid currentColor; border-radius: 999px; }
.nn-source--curated      { color: var(--nn-ink); border-color: var(--nn-ink); }
.nn-source--curated::before { background: var(--nn-ink); border-radius: 999px; }
.nn-source--verified     { color: var(--nn-signal); border-color: var(--nn-signal); }
.nn-source--verified::before { background: var(--nn-signal); }

/* ---------- Threshold badge ---------- */
.nn-threshold {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  font-family: var(--nn-font-mono);
  font-size: var(--nn-step--2);
  color: var(--nn-ink-mute);
  letter-spacing: 0.02em;
  border-bottom: 1px dotted var(--nn-ink-faint);
  padding-bottom: 0.1em;
}
.nn-threshold strong {
  color: var(--nn-ink);
  font-weight: 600;
}
.nn-threshold__op { color: var(--nn-signal); font-weight: 600; }

/* ---------- Per-card relevance disclosure trigger ----------
   The summary line that, when clicked, reveals the existing
   `.nn-prov` provenance card with PROVENANCE + EDITORIAL tabs. */
.nn-rationale {
  margin-top: var(--nn-2xs);
  font-family: var(--nn-font-mono);
  font-size: var(--nn-step--2);
  color: var(--nn-ink-mute);
  border-top: 1px dotted var(--nn-rule);
  padding-top: var(--nn-2xs);
}
.nn-rationale__summary {
  cursor: pointer;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  user-select: none;
}
.nn-rationale__summary::-webkit-details-marker { display: none; }
.nn-rationale__summary::before {
  content: "▶";
  display: inline-block;
  font-size: 0.7em;
  transition: transform 120ms ease;
}
.nn-rationale[open] > .nn-rationale__summary::before {
  transform: rotate(90deg);
}
.nn-rationale__summary:hover { color: var(--nn-ink); }
.nn-rationale > .nn-prov { margin-top: var(--nn-xs); }

/* ---------- Provenance card tabs (PROVENANCE / EDITORIAL) ----------
   Pure CSS tabs via radio + label inside the existing .nn-prov
   container. Each card gets a unique radio group via item_id so
   multiple expanded cards on a page don't fight each other. */
.nn-prov__tabs {
  display: flex;
  gap: 0;
  margin-bottom: var(--nn-s);
  border-bottom: 1px solid var(--nn-rule);
}
.nn-prov__tab-input { position: absolute; opacity: 0; pointer-events: none; }
.nn-prov__tab-label {
  font-family: var(--nn-font-display);
  font-weight: 700;
  font-size: var(--nn-step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nn-ink-mute);
  padding: 0.4em 0.9em;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  user-select: none;
}
.nn-prov__tab-label:hover { color: var(--nn-ink); }
.nn-prov:has(.nn-prov__tab-input--prov:checked) .nn-prov__tab-label[for$="-prov"],
.nn-prov:has(.nn-prov__tab-input--edit:checked) .nn-prov__tab-label[for$="-edit"] {
  color: var(--nn-ink);
  border-bottom-color: var(--nn-signal);
}
.nn-prov:has(.nn-prov__tab-input--prov:focus-visible) .nn-prov__tab-label[for$="-prov"],
.nn-prov:has(.nn-prov__tab-input--edit:focus-visible) .nn-prov__tab-label[for$="-edit"] {
  outline: 2px solid var(--nn-signal);
  outline-offset: 2px;
}
.nn-prov__panel { display: none; }
.nn-prov:has(.nn-prov__tab-input--prov:checked) .nn-prov__panel--prov,
.nn-prov:has(.nn-prov__tab-input--edit:checked) .nn-prov__panel--edit {
  display: block;
}
/* Editorial panel — same dl shape as provenance but the value cells
   often hold short prose, so they wrap onto their own line. */
.nn-prov__panel--edit dl {
  grid-template-columns: 1fr;
  gap: var(--nn-s);
}
.nn-prov__panel--edit dt {
  font-family: var(--nn-font-display);
  font-weight: 700;
  font-size: var(--nn-step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nn-ink);
}
.nn-prov__path strong { color: var(--nn-ink); font-weight: 600; }
.nn-prov__arrow { color: var(--nn-ink-faint); margin: 0 0.3em; }
.nn-prov__hint { color: var(--nn-ink-mute); font-style: italic; margin-left: 0.3em; }
.nn-prov__why-heading {
  margin: var(--nn-s) 0 0.2em;
  font-family: var(--nn-font-mono);
  font-size: var(--nn-step--2);
  letter-spacing: 0.04em;
  color: var(--nn-ink);
}
.nn-prov__reason {
  margin: 0.3em 0 0;
  color: var(--nn-ink-soft);
  font-family: var(--nn-font-text, inherit);
  font-size: var(--nn-step--1);
  line-height: 1.5;
}
.nn-prov__rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5em; }
.nn-prov__rule {
  display: grid;
  grid-template-columns: 1.4em auto 1fr;
  gap: 0.2em 0.5em;
  align-items: baseline;
}
.nn-prov__rule .nn-prov__reason { grid-column: 2 / span 2; }
.nn-prov__verdict { font-weight: 600; width: 1.1em; text-align: center; }
.nn-prov__rule--match .nn-prov__verdict { color: var(--nn-signal); }
.nn-prov__rule--miss .nn-prov__verdict { color: var(--nn-ink-faint); }
.nn-prov__rule--miss .nn-prov__rule-name { color: var(--nn-ink-mute); }
.nn-prov__rule--miss .nn-prov__reason { color: var(--nn-ink-faint); }
.nn-prov__rule-name { letter-spacing: 0.03em; text-transform: uppercase; }

/* Bias-detection block (Provenance tab) — small score chip + dl rows
   for target / polarity / verbatim signals from the source. The
   chip's colour follows the score so a 0 reads neutral and a 3
   reads as a clear warning. */
.nn-prov__head--bias {
  margin-top: var(--nn-m);
  padding-top: var(--nn-s);
  border-top: 1px dotted var(--nn-rule);
}
.nn-prov__bias dt { color: var(--nn-ink-mute); }
.nn-prov__bias dd { color: var(--nn-ink); }
.nn-bias-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--nn-font-mono);
  font-size: var(--nn-step--2);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.2em 0.55em;
  border: 1px solid var(--nn-rule);
  text-transform: uppercase;
  white-space: nowrap;
}
.nn-bias-chip--0 { color: var(--nn-ink-mute); border-color: var(--nn-rule); }
.nn-bias-chip--1 { color: var(--nn-ink); border-color: var(--nn-rule); }
.nn-bias-chip--2 {
  color: var(--nn-signal);
  border-color: var(--nn-signal);
}
.nn-bias-chip--3 {
  color: var(--nn-paper);
  background: var(--nn-signal);
  border-color: var(--nn-signal);
}
.nn-prov__bias-signals {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}
.nn-prov__bias-signals li {
  font-family: var(--nn-font-text, inherit);
  font-size: var(--nn-step--1);
  color: var(--nn-ink-soft);
  line-height: 1.45;
  font-style: italic;
}

/* At-a-glance bias mark in the article footer. Visually a sibling of
   `.nn-threshold` (same mono/mute typography, same dotted underline)
   so the two chips read as a coherent pair under the article body.
   Forced onto its own line (flex-basis: 100%) directly below the
   threshold chip. Score 3 swaps to the accent colour so promotional
   framing is visible at a glance while skimming. */
.nn-threshold--bias {
  flex-basis: 100%;
  cursor: help;
}
.nn-threshold--bias-3 {
  color: var(--nn-signal);
  border-bottom-color: var(--nn-signal);
}
.nn-threshold--bias-3 strong,
.nn-threshold--bias-3 .nn-threshold__op {
  color: var(--nn-signal);
}

/* ---------- Primary source link / footer card on article ---------- */
.nn-prov {
  border: 1px solid var(--nn-rule);
  padding: var(--nn-m);
  background: var(--nn-paper-dim);
  font-family: var(--nn-font-mono);
  font-size: var(--nn-step--1);
  line-height: 1.5;
  color: var(--nn-ink-soft);
}
.nn-prov__head {
  font-family: var(--nn-font-display);
  font-weight: 700;
  font-size: var(--nn-step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nn-ink);
  margin: 0 0 var(--nn-s);
  display: flex;
  align-items: center;
  gap: var(--nn-2xs);
}
.nn-prov__head::before {
  content: "";
  width: 0.7em; height: 0.7em;
  background: var(--nn-signal);
  display: inline-block;
}
/* The card responds to its own container width (not the viewport) so
   it can sit in any-sized column. When the column is narrow — e.g. a
   span-3 cell of a 4-up grid — the dl collapses to single-column
   (label above value) so URLs and long target names get the full
   width instead of wrapping one segment per line. */
.nn-prov {
  container-type: inline-size;
  container-name: provcard;
}
.nn-prov dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--nn-2xs) var(--nn-s);
  margin: 0;
}
/* Threshold sits comfortably above the typical 4-up cell width (~280-
   320px content area at desktop) so the query fires reliably for any
   non-lead column. Lead columns at 6/12 (~600px+) stay above the
   threshold and keep the airy default treatment. */
@container provcard (max-width: 420px) {
  .nn-prov dl {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .nn-prov dt {
    margin-top: var(--nn-xs);
  }
  .nn-prov dt:first-of-type {
    margin-top: 0;
  }
  /* Tab labels are uppercase + wide letter-spacing by default — fine in
     a wide cell but visually overstuffed in a narrow column. Tighten
     letter-spacing and padding (font-size keeps --nn-step--2 since
     there's no smaller step variable defined). */
  .nn-prov__tab-label {
    letter-spacing: 0.04em;
    padding: 0.4em 0.55em;
    font-size: 0.62rem;
  }
  /* Inner card section headers ("FONT PRIMÀRIA", "BIAIX DETECTAT")
     get the same treatment so they don't bump into the card edge. */
  .nn-prov__head {
    letter-spacing: 0.06em;
    font-size: 0.7rem;
  }
}
.nn-prov dt { color: var(--nn-ink-mute); }
.nn-prov dd {
  margin: 0;
  color: var(--nn-ink);
  /* Long URLs and other unbroken strings must wrap inside the
     value cell so they don't blow the card past its container. */
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.nn-prov dd a { border-bottom: 1px solid currentColor; }
.nn-prov dd a:hover { color: var(--nn-signal); }

/* ---------- Source list (end of synthesis article) ---------- */
.nn-sources {
  border-top: var(--nn-rule-w-bold) solid var(--nn-rule);
  border-bottom: var(--nn-rule-w-bold) solid var(--nn-rule);
  padding: var(--nn-l) 0;
  margin-top: var(--nn-xl);
}
.nn-sources__title {
  font-family: var(--nn-font-display);
  font-weight: 800;
  font-size: var(--nn-step-2);
  letter-spacing: -0.01em;
  margin: 0 0 var(--nn-s);
}
.nn-sources__sub {
  font-family: var(--nn-font-mono);
  font-size: var(--nn-step--2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--nn-ink-mute);
  margin-bottom: var(--nn-m);
}
.nn-sources ol {
  list-style: none;
  margin: 0; padding: 0;
  counter-reset: src;
}
.nn-sources li {
  counter-increment: src;
  display: grid;
  grid-template-columns: 2.5em 1fr auto;
  gap: var(--nn-s);
  padding: var(--nn-s) 0;
  border-top: 1px solid var(--nn-rule-soft);
  font-family: var(--nn-font-text);
  font-size: var(--nn-step--1);
  line-height: 1.45;
  align-items: baseline;
}
.nn-sources li::before {
  content: "[" counter(src, decimal-leading-zero) "]";
  font-family: var(--nn-font-mono);
  font-size: var(--nn-step--2);
  color: var(--nn-signal);
  letter-spacing: 0.04em;
}
.nn-sources li a { border-bottom: 1px solid var(--nn-ink-faint); }
.nn-sources li a:hover { color: var(--nn-signal); border-color: var(--nn-signal); }
.nn-sources li .nn-meta { white-space: nowrap; }

/* In-body inline citation marker */
.nn-cite {
  font-family: var(--nn-font-mono);
  font-size: 0.7em;
  vertical-align: super;
  color: var(--nn-signal);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0 0.1em;
}
.nn-cite::before { content: "["; }
.nn-cite::after  { content: "]"; }

/* ---------- Banner / status ---------- */
.nn-banner {
  font-family: var(--nn-font-mono);
  font-size: var(--nn-step--2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--nn-2xs) var(--nn-gutter);
  background: var(--nn-ink);
  color: var(--nn-paper);
  text-align: center;
}
.nn-banner--soft {
  background: var(--nn-paper-dim);
  color: var(--nn-ink-mute);
  border-bottom: 1px solid var(--nn-rule-soft);
}

/* ---------- Buttons ---------- */
.nn-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--nn-font-display);
  font-weight: 700;
  font-size: var(--nn-step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.85em 1.3em;
  background: var(--nn-ink);
  color: var(--nn-paper);
  border: 1px solid var(--nn-ink);
  transition: background 120ms, color 120ms;
}
.nn-btn:hover { background: var(--nn-paper); color: var(--nn-ink); }
.nn-btn--ghost { background: transparent; color: var(--nn-ink); }
.nn-btn--ghost:hover { background: var(--nn-ink); color: var(--nn-paper); }
.nn-btn::after { content: "→"; font-family: var(--nn-font-text); font-weight: 400; }

/* ---------- Footer ---------- */
.nn-footer {
  margin-top: var(--nn-3xl);
  padding: var(--nn-xl) 0 var(--nn-l);
  border-top: var(--nn-rule-w-bold) solid var(--nn-rule);
  font-family: var(--nn-font-mono);
  font-size: var(--nn-step--2);
  color: var(--nn-ink-mute);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.nn-footer a:hover { color: var(--nn-ink); }
.nn-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--nn-l);
}
.nn-footer__cols h4 {
  font-family: var(--nn-font-display);
  font-size: var(--nn-step--1);
  margin: 0 0 var(--nn-s);
  color: var(--nn-ink);
}
.nn-footer__cols ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--nn-2xs); }
@media (max-width: 760px) {
  .nn-footer__cols { grid-template-columns: 1fr 1fr; }
}

/* ---------- Image placeholder (rare) ---------- */
.nn-img-slot {
  background:
    repeating-linear-gradient(135deg, var(--nn-paper-deep) 0 8px, var(--nn-paper-dim) 8px 16px);
  border: 1px solid var(--nn-rule-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--nn-font-mono);
  font-size: var(--nn-step--2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--nn-ink-mute);
  aspect-ratio: 16 / 10;
  text-align: center;
  padding: var(--nn-s);
}

/* ---------- Pull quote ---------- */
.nn-pull {
  border-top: var(--nn-rule-w-bold) solid var(--nn-rule);
  border-bottom: var(--nn-rule-w-bold) solid var(--nn-rule);
  padding: var(--nn-l) 0;
  margin: var(--nn-xl) 0;
  font-family: var(--nn-font-display);
  font-weight: 700;
  font-size: var(--nn-step-4);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.nn-pull cite {
  display: block;
  margin-top: var(--nn-s);
  font-family: var(--nn-font-mono);
  font-size: var(--nn-step--2);
  font-weight: 400;
  font-style: normal;
  color: var(--nn-ink-mute);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- Held / corrections marker (transparency) ---------- */
.nn-held {
  display: inline-block;
  font-family: var(--nn-font-mono);
  font-size: var(--nn-step--2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2em 0.55em;
  background: var(--nn-signal);
  color: var(--nn-paper);
}

/* ---------- Archive list ---------- */
.nn-arch {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nn-arch li {
  display: grid;
  grid-template-columns: 6em 1fr auto;
  gap: var(--nn-m);
  padding: var(--nn-s) 0;
  border-top: 1px solid var(--nn-rule-soft);
  align-items: baseline;
}
.nn-arch li:first-child { border-top: 0; }
.nn-arch__date {
  font-family: var(--nn-font-mono);
  font-size: var(--nn-step--1);
  color: var(--nn-ink);
  letter-spacing: 0.02em;
}
.nn-arch__title {
  font-family: var(--nn-font-display);
  font-weight: 700;
  font-size: var(--nn-step-1);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.nn-arch__count {
  font-family: var(--nn-font-mono);
  font-size: var(--nn-step--2);
  color: var(--nn-ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---------- Tag swatch (style guide) ---------- */
.nn-swatch {
  border: 1px solid var(--nn-rule-soft);
  padding: var(--nn-s);
  display: flex;
  flex-direction: column;
  gap: var(--nn-2xs);
}
.nn-swatch__chip {
  height: 5rem;
  border: 1px solid var(--nn-rule-soft);
}
.nn-swatch__name {
  font-family: var(--nn-font-mono);
  font-size: var(--nn-step--2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--nn-ink);
}
.nn-swatch__val {
  font-family: var(--nn-font-mono);
  font-size: var(--nn-step--2);
  color: var(--nn-ink-mute);
}

/* ---------- Utilities ---------- */
.nn-link        { border-bottom: 1px solid var(--nn-ink-faint); }
.nn-link:hover  { color: var(--nn-signal); border-color: var(--nn-signal); }

/* Source link in the article kicker — shows the upstream hostname
   ("boe.es ↗", "govern.cat ↗") so the reader knows where the link
   leads before clicking. Mono font + small caps to sit alongside
   the source-id pill without competing with the headline. Always
   opens in a new tab so the fets. tab stays put. */
.nn-source-link {
  font-family: var(--nn-font-mono);
  font-size: var(--nn-step--2);
  letter-spacing: 0.04em;
  color: var(--nn-ink-mute);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  padding-bottom: 0.05em;
  white-space: nowrap;
}
.nn-source-link:hover {
  color: var(--nn-signal);
  border-bottom-color: var(--nn-signal);
}
.nn-text-mute   { color: var(--nn-ink-mute); }
.nn-text-faint  { color: var(--nn-ink-faint); }
.nn-text-signal { color: var(--nn-signal); }
.nn-mono        { font-family: var(--nn-font-mono); }
.nn-display-f   { font-family: var(--nn-font-display); }
.nn-text-f      { font-family: var(--nn-font-text); }
.nn-uppercase   { text-transform: uppercase; letter-spacing: 0.08em; }
.nn-center      { text-align: center; }
.nn-right       { text-align: right; }
.nn-hide        { display: none !important; }