/* Generated by tools/build-base-css.mjs from css/styles.css.
   The subset of the main stylesheet that the article and question-hub pages
   use. Edit css/styles.css, never this file. */
/* ═══════════════════════════════════════════════════════════════
   UN for Men Too — unformentoo.org
   The official record, subverted: document typography (Bricolage
   Grotesque display · IBM Plex Mono labels · serif body on paper),
   solid cards for what exists, dashed ghost slots for what doesn't.
   Light "paper" is default; hero and closing are fixed "night"
   bookends; dark theme is opt-in via the toggle.
   ═══════════════════════════════════════════════════════════════ */

/* ── Fonts (vendored, OFL) ──────────────────────────────────── */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../assets/fonts/BricolageGrotesque-400-800.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/IBMPlexMono-400.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/IBMPlexMono-500.woff2") format("woff2");
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/IBMPlexMono-600.woff2") format("woff2");
  font-weight: 600; font-display: swap;
}

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  color-scheme: light;

  --brand:          #2B4CAC;

  --page:           #faf8f3;   /* warm paper */
  --surface:        #fffdf9;
  --surface-tint:   #f3f0e7;
  --surface-brand:  #edf1fa;

  --ink:            #151a2c;   /* blue-black ink */
  --ink-2:          #494f63;
  --ink-3:          #646b80;   /* 5.00:1 on --page; every source line and caption uses it */

  --series-w:       #d23f76;   /* women and girls — pink */
  --series-m:       #2e7fc2;   /* men and boys — light blue */
  --series-w-soft:  #f9dbe7;
  --series-m-soft:  #d8e9f8;
  --accent:         #c98a1f;   /* attention: new days, widening gap */
  --rainbow: linear-gradient(90deg, #e40303, #ff8c00, #ffed00, #008026, #24408e, #732982);
  --neutral-band:   #9aa0ae;   /* minorities & everyone the gauges miss */

  --ghost:          #948b71;   /* dashed outlines of what is missing */
  --ghost-ink:      #6d6551;

  --rule:           #e6e2d5;
  --rule-strong:    #c9c3b0;
  --grid:           #eeebe0;

  /* Fixed night palette for the hero/closing bookends */
  --night:          #090e1d;
  --night-2:        #0d1428;
  --night-surface:  #101832;
  --night-ink:      #edf1fa;
  --night-ink-2:    #b6bfd6;
  --night-ink-3:    #7c87a5;
  --night-rule:     #232c47;
  --night-blue:     #6b8ce0;
  --night-men:      #7cc0f5;

  --on-series:      #ffffff;   /* text on series/brand fills */
  --shadow-sm: 0 1px 2px rgba(21,26,44,.05), 0 2px 10px rgba(21,26,44,.05);
  --shadow-md: 0 2px 4px rgba(21,26,44,.06), 0 14px 36px rgba(21,26,44,.1);

  --display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 68rem;
  --step: clamp(3.75rem, 9vw, 7.5rem);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --snap: cubic-bezier(.34, 1.3, .5, 1);

  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --brand:          #6b8ce0;
  --page:           #0c111f;
  --surface:        #121829;
  --surface-tint:   #0f1424;
  --surface-brand:  #151d33;
  --ink:            #edf1fa;
  --ink-2:          #bdc4d8;
  --ink-3:          #848da6;
  --series-w:       #f27ba6;
  --series-m:       #7cc0f5;
  --series-w-soft:  #4a2338;
  --series-m-soft:  #1d3a55;
  --accent:         #e0b25c;
  --ghost:          #6b7494;
  --ghost-ink:      #98a2bd;
  --rule:           #232b41;
  --rule-strong:    #3a445f;
  --grid:           #1a2136;
  --night:          #090e1d;
  --on-series:      #0c111f;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 2px 4px rgba(0,0,0,.45), 0 14px 36px rgba(0,0,0,.55);
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-wrap: break-word;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, select, input { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--series-w);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { width: min(var(--wrap), calc(100% - 2.5rem)); margin-inline: auto; }

/* ── Typography ─────────────────────────────────────────────── */
h1, h2, h3 {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.022em;
}

h2 {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  max-width: 22ch;
  margin-bottom: 1.5rem;
  text-wrap: balance;
}

h3 { font-size: 1.28rem; line-height: 1.2; }
:root[data-theme="dark"] .brand-mark { filter: brightness(1.6) saturate(.85); }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ── Reveal ─────────────────────────────────────────────────── */
/* Reveal-on-scroll, written so that content is never hidden by default.

   It used to be: .reveal { opacity: 0 } and JavaScript adds .is-in. That has
   two costs and both were real. With script blocked or broken, all 158 of
   these on the homepage stay invisible forever and the page is blank. And
   with script working, the whole hero, headline included, waits for four
   script files to download, parse and run before it appears, which is the
   pause and then the flash.

   So the visible state is the default, and the hiding is applied only once a
   script has confirmed it is running and can undo it. The marker is set by an
   inline script in the head, before the stylesheet is applied, so there is no
   moment where the page renders one way and then changes. */
.reveal { opacity: 1; transform: none; }
html.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
html.js .reveal.is-in { opacity: 1; transform: none; }
/* Above the fold nothing waits for anything. The headline is the first thing
   a reader came for and there is no version of this where animating it in is
   worth a pause before they can read it. */
html.js .hero .reveal,
html.js .reveal.is-now { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, html.js .reveal { opacity: 1; transform: none; transition: none; }
}
.hero-word .hero-acts.reveal { transition-delay: .26s; }
.hero-word .hero-cta.reveal { transition-delay: .32s; }
@keyframes nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* The wordmark used to hold until the hero search resolved: app.js added
   .is-held and this rule forced every hero reveal to opacity 0 !important
   until the typing animation finished. It made the sequence land, and it cost
   the reader the headline for as long as it took four script files to load
   and an animation to play. On a slow connection that is the page appearing,
   blanking, and coming back.

   The console below still runs its search. The headline no longer waits for
   it. .is-held is left as a no-op rather than ripped out of app.js, because
   the sequence logic that adds and removes it is doing other work. */
.hero-word.is-held .reveal { opacity: 1; transform: none; }
.hero-word .kicker.reveal { transition-delay: 0s; }
.hero-word .hero-title.reveal { transition-delay: .07s; }
.hero-word .hero-sub.reveal { transition-delay: .15s; }
.hero-word .hero-lead.reveal { transition-delay: .22s; }
@keyframes hpa-draw { to { stroke-dashoffset: 0; } }
@keyframes hpa-pop { from { opacity: 0; transform: scale(.6); transform-origin: 95px 20px; } to { opacity: 1; transform: none; } }
@keyframes hpa-fade { to { opacity: 1; } }
@keyframes console-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes caret { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
.record {
  border-left: 3px solid var(--night-blue);
  border-radius: 4px 10px 10px 4px;
  background: color-mix(in srgb, var(--night-blue) 10%, transparent);
  padding: .8rem 1rem .85rem;
  transform-origin: top left;
}

/* Hero console animation states (driven by app.js) */
.console.is-armed .record { display: none; }
.console .record.is-shown { display: block; animation: record-in .45s var(--snap) both; }
@keyframes record-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .console .record.is-shown { animation: none; }
  .console-caret, .console-dot { animation: none; }
}

/* ── Sections ───────────────────────────────────────────────── */
.section, .closing, .hero { scroll-margin-top: 4.25rem; }
.section { padding: var(--step) 0; }
@keyframes pop { to { opacity: 1; transform: scale(1); } }
.cal-detail.is-ghost { border-left-color: var(--series-m); }
@keyframes ledger-in { to { opacity: 1; transform: none; } }
@keyframes ghost-in { to { opacity: 1; transform: none; } }
.waffle-dot.is-ghost {
  background: transparent;
  border: 1.5px dashed var(--series-m);
  transform: none;
}
.waffle.is-in .waffle-dot.is-ghost { animation-delay: calc(142 * 6ms + 300ms); }
@keyframes mark-rise { to { opacity: 1; transform: none; } }
.crisis-lines {
  margin-top: 2rem;
  border: 1px solid color-mix(in srgb, var(--series-m) 40%, var(--rule));
  border-radius: 12px;
  background: color-mix(in srgb, var(--series-m) 6%, var(--surface));
  padding: 1rem 1.2rem;
  font-size: .95rem;
  color: var(--ink);
  max-width: 56ch;
}
@keyframes fd-flow { to { stroke-dashoffset: -13; } }
@keyframes slot-stamp { 0% { transform: scale(.94); } 100% { transform: scale(1); } }
.voice-btn {
  border: 0;
  border-radius: 12px;
  background: var(--series-m);
  color: var(--on-series);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  letter-spacing: -.01em;
  padding: 1rem 2.1rem;
  cursor: pointer;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--series-m) 35%, transparent);
  transition: transform .18s var(--snap), filter .18s var(--ease), box-shadow .18s var(--ease);
}
.voice-btn:hover { transform: translateY(-2px) scale(1.015); filter: brightness(1.06); }
.voice-btn:active { transform: scale(.98); }
.voice-btn[disabled] { opacity: .55; cursor: default; transform: none; box-shadow: none; }
:root[data-theme="dark"] .footer-logo--wide { filter: invert(1) hue-rotate(180deg) brightness(1.1); }
:root[data-theme="dark"] .footer-logo { filter: brightness(1.55) saturate(.85); }

@media print {
  .site-header, .section-nav, .tooltip, .console-skip, .voice-btn { display: none; }
  .reveal { opacity: 1; transform: none; }
  .data-table[open] summary { display: none; }
  .night { background: #fff; color: #000; }
}

@media (prefers-reduced-motion: reduce) {
  /* rm-extra */
  .fd-link { animation: none; }
  .scale-fill { transition: none; }
  .console.is-armed .record { display: block; }
}
@keyframes word-in { to { opacity: 1; transform: none; } }
@keyframes word-slam {
  0% { opacity: 0; transform: scale(1.6); filter: blur(6px); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes hi-ink { to { background-position: 0 0; } }
@keyframes dot-in { to { opacity: .92; } }
@keyframes dot-keep {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}
@keyframes num-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes ghost-flicker {
  0%, 100% { opacity: 1; }
  8% { opacity: .35; }
  12% { opacity: .9; }
  46% { opacity: .55; }
  52% { opacity: 1; }
  78% { opacity: .4; }
  84% { opacity: .95; }
}
@keyframes word-drop {
  0% { opacity: 0; transform: translateY(-1.4em); }
  70% { opacity: 1; transform: translateY(.08em); }
  100% { opacity: 1; transform: none; }
}
@keyframes word-step {
  from { opacity: 0; transform: translateY(calc(var(--i) * .18em - .35em)) scale(.96); }
  to { opacity: 1; transform: translateY(calc(var(--i) * .18em)); }
}
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(1.045); }
  24% { transform: scale(1); }
  36% { transform: scale(1.03); }
  48% { transform: scale(1); }
}
@keyframes dim-out { to { opacity: .22; } }
@keyframes stamp-in {
  0% { opacity: 0; transform: scale(2) rotate(2.5deg); filter: blur(4px); }
  100% { opacity: 1; transform: scale(1) rotate(0); filter: none; }
}
@keyframes too-wiggle {
  0%, 74%, 100% { transform: rotate(0); }
  78% { transform: rotate(-4deg) translateY(-.03em); }
  82% { transform: rotate(3.5deg); }
  86% { transform: rotate(-2.5deg); }
  90% { transform: rotate(1.8deg); }
  94% { transform: rotate(0); }
}
@keyframes chev-out {
  0%, 100% { transform: translateX(0); opacity: .7; }
  50% { transform: translateX(.45rem); opacity: 1; }
}

/* ── Icons ──────────────────────────────────────────────────── */
.ico { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.18em; flex: none; }
@keyframes icon-in {
  0% { opacity: 0; transform: translateY(-.4rem) scale(.7); }
  100% { opacity: 1; transform: none; }
}
@keyframes pick-in { from { opacity: 0; } to { opacity: 1; } }
.night .ledger-order, .dossier .ledger-order { color: var(--night-ink-3); border-color: var(--night-rule); }

/* ── The info disclosure ──────────────────────────────────────────
   One component for every "if you want the detail" block on the site.
   Native <details>, so it works with JavaScript off and reads correctly
   to a screen reader. The point is that the default view stays scannable:
   the majority skims, and the reader who wants the reasoning taps once. */
.info { margin: .7rem 0 0; }
.info > summary {
  display: inline-flex; align-items: center; gap: .45rem;
  cursor: pointer; list-style: none;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .04em;
  color: var(--ink-3); border: 1px solid var(--rule); border-radius: 999px;
  padding: .3rem .75rem .3rem .55rem;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.info > summary::-webkit-details-marker { display: none; }
.info > summary::before {
  content: "i"; flex: none;
  width: 1.05rem; height: 1.05rem; border-radius: 50%;
  border: 1px solid currentColor; display: grid; place-items: center;
  font-family: var(--serif, Georgia, serif); font-style: italic; font-size: .72rem; line-height: 1;
}
.info > summary:hover { color: var(--ink); border-color: var(--ink-3); }
.info[open] > summary { color: var(--ink); border-color: var(--ink-3); margin-bottom: .7rem; }
.info-body { font-size: .9rem; line-height: 1.68; color: var(--ink-2); max-width: 66ch; }
.info-body p + p { margin-top: .7rem; }
.info-body b { color: var(--ink); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .info[open] .info-body { animation: info-in .24s var(--ease); }
  @keyframes info-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}

/* Crisis lines. Quiet, permanent, on every page. Deliberately low contrast
   against the page but never below the contrast floor, because someone who
   needs it is not skimming and someone who does not should not be shouted at. */
.crisis-lines {
  border-top: 1px solid var(--rule);
  padding: 1.4rem 0 2rem;
  margin-top: 2rem;
  /* Explicit, because the block sits last in the document and outside any
     shell, so it otherwise paints against the canvas rather than the page. */
  background: var(--page);
}
.crisis-lines p {
  max-width: 74ch;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 2rem);
  font-size: .82rem;
  line-height: 1.75;
  color: var(--ink-3);
}
.crisis-lines b { color: var(--ink-2); font-weight: 600; display: block; margin-bottom: .25rem; }
.crisis-lines span { display: inline; }
.crisis-lines span + span::before { content: " · "; opacity: .5; }
.crisis-lines a { color: var(--ink-2); text-underline-offset: 3px; }
.crisis-lines a:hover { color: var(--ink); }
.u-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ────────────────────────────────────────────────────────────────────
   THE LIFECOURSE SPINE
   The dossiers are filed by subject, which is how a researcher looks
   for things and not how a life is lived. This runs the same evidence
   down one line, age by age, so the repetition does the work: the same
   direction turning up at two, at ten, at fifteen, at thirty-five, on
   instruments that have nothing to do with each other.
   One stage runs against the argument and is drawn differently rather
   than quietly. A spine with only helpful numbers on it is a brochure.
   ──────────────────────────────────────────────────────────────────── */
.lc-note {
  max-width: 46rem; margin: 0 0 2.4rem;
  padding-left: 1rem; border-left: 2px solid var(--night-rule);
  font-size: .95rem; line-height: 1.65; color: var(--night-ink-3);
}
.lc-list { list-style: none; margin: 0; padding: 0; max-width: 52rem; }
.lc-stage {
  display: grid; grid-template-columns: 7.5rem 1fr; gap: 0 1.6rem;
  padding: 2rem 0 2.2rem;
  border-top: 1px solid var(--night-rule);
  position: relative;
}
.lc-stage:last-child { border-bottom: 1px solid var(--night-rule); }
/* the spine itself */
.lc-stage::before {
  content: ""; position: absolute; left: 7.5rem; top: 0; bottom: 0;
  width: 2px; margin-left: -.85rem; background: var(--night-rule);
}
.lc-stage:first-child::before { top: 2rem; }
.lc-stage:last-child::before { bottom: auto; height: 2rem; }
.lc-stage::after {
  content: ""; position: absolute; left: 7.5rem; top: 2.15rem;
  width: .6rem; height: .6rem; margin-left: -1.14rem;
  border-radius: 50%; background: #0a0f20; border: 2px solid var(--series-m);
}
.lc-when { text-align: right; padding-top: .1rem; }
.lc-no {
  display: block; font-family: var(--mono); font-size: .6rem;
  letter-spacing: .16em; color: var(--night-ink-3);
}
.lc-age {
  display: block; font-family: var(--mono); font-weight: 600;
  font-size: 1rem; color: var(--night-ink); margin-top: .2rem;
}
.lc-body h3 {
  display: flex; align-items: center; gap: .5rem;
  margin: 0 0 .5rem; font-size: 1.15rem; line-height: 1.25;
}
.lc-ico { width: 1em; height: 1em; color: var(--series-m); flex: none; }
.lc-figure {
  font-family: var(--mono); font-weight: 700;
  font-size: clamp(1.7rem, 4.6vw, 2.5rem); line-height: 1;
  color: var(--series-m); margin: 0 0 .6rem;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.lc-line { margin: 0 0 .7rem; font-size: 1.06rem; line-height: 1.55; color: var(--night-ink); }
.lc-detail { margin: 0 0 .7rem; font-size: .95rem; line-height: 1.65; color: var(--night-ink-2); }
.lc-caveat {
  margin: 0 0 .6rem; padding-left: .85rem;
  border-left: 2px solid var(--night-rule);
  font-size: .88rem; line-height: 1.6; color: var(--night-ink-3);
}
.lc-src { margin: 0; font-family: var(--mono); font-size: .68rem; color: var(--night-ink-3); }
.lc-src a { color: inherit; }
.lc-src a:hover { color: var(--series-m); }

/* The stage that does not help us. Marked, not muted. */
.lc-stage.is-against::after { border-color: var(--night-ink-3); background: var(--night-ink-3); }
.lc-stage.is-against .lc-figure { color: var(--night-ink-2); }
.lc-stage.is-against .lc-ico { color: var(--night-ink-3); }
.lc-flag {
  margin: 0 0 .7rem; padding: .55rem .8rem;
  border: 1px dashed var(--night-rule); border-radius: 8px;
  font-size: .88rem; line-height: 1.55; color: var(--night-ink-2);
}

.lc-close {
  max-width: 46rem; margin-top: 2.6rem; padding-left: 1.1rem;
  border-left: 3px solid var(--series-m);
}
.lc-close h3 { margin: 0 0 .6rem; font-size: 1.2rem; }
.lc-close p { margin: 0 0 .8rem; font-size: 1rem; line-height: 1.7; color: var(--night-ink-2); }
.lc-close p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .lc-stage { grid-template-columns: 1fr; gap: .5rem; padding: 1.6rem 0 1.8rem; }
  .lc-stage::before, .lc-stage::after { display: none; }
  .lc-when { text-align: left; display: flex; gap: .6rem; align-items: baseline; }
  .lc-age { margin-top: 0; }
}

/* ── What the framework requires ──────────────────────────────────────
   The payoff of the spine. Five indicators, five ages, and one column
   that decides whether a boy is visible in the global data. The levels
   are coloured because the difference between "Sex" and "None" is the
   entire argument and a reader should see it before reading it.
   ──────────────────────────────────────────────────────────────────── */
.lc-req { max-width: 52rem; margin-top: 3rem; }
.lc-req h3 { margin: 0 0 .6rem; font-size: 1.2rem; }
.lc-req-lead { margin: 0 0 1.4rem; font-size: 1rem; line-height: 1.65; color: var(--night-ink-2); max-width: 44rem; }
.lc-req-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.lc-req-table thead th {
  text-align: left; font-family: var(--mono); font-weight: 500;
  font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--night-ink-3); padding: 0 .7rem .5rem 0;
  border-bottom: 1px solid var(--night-rule);
}
.lc-req-table tbody th, .lc-req-table tbody td {
  padding: .8rem .7rem .8rem 0; border-bottom: 1px solid var(--night-rule);
  vertical-align: top; color: var(--night-ink-2); font-weight: 400; text-align: left;
}
.lc-req-table tbody th { font-family: var(--mono); font-weight: 600; white-space: nowrap; }
.lc-req-table tbody th a { color: var(--series-m); text-decoration: none; border-bottom: 1px solid currentColor; }
.lc-req-age { font-family: var(--mono); color: var(--night-ink-3); white-space: nowrap; }
.lc-req-req { color: var(--night-ink); }
/* required, desirable, none: the ladder, in colour */
.lc-req-table tr.is-required .lc-req-req { color: var(--series-m); font-weight: 600; }
.lc-req-table tr.is-desirable .lc-req-req { color: var(--night-ink-2); font-style: italic; }
.lc-req-table tr.is-none .lc-req-req {
  color: var(--night-ink); font-weight: 700;
  background: rgba(255,255,255,.05); border-radius: 5px;
  padding: .12rem .5rem; display: inline-block;
}
.lc-req-table tr.is-specific .lc-req-req { color: var(--night-ink-3); }
.lc-req-foot {
  margin-top: 1.3rem; padding-left: 1rem;
  border-left: 2px solid var(--night-rule);
  font-size: .9rem; line-height: 1.65; color: var(--night-ink-3); max-width: 44rem;
}
@media (max-width: 720px) {
  .lc-req-table, .lc-req-table tbody, .lc-req-table tr, .lc-req-table td, .lc-req-table th { display: block; }
  .lc-req-table thead { display: none; }
  .lc-req-table tbody tr { padding: .9rem 0; border-bottom: 1px solid var(--night-rule); }
  .lc-req-table tbody th, .lc-req-table tbody td { border: 0; padding: .1rem 0; }
  .lc-req-table tbody td::before { font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--night-ink-3); display: block; }
  .lc-req-table .lc-req-req::before { content: "requires"; }
}
@keyframes lcpIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.lcp.is-against .lcp-figure { color: var(--night-ink-2); }
.lcp.is-against .lcp-age { color: var(--night-ink-3); }
.lcp.is-against .lcp-flag {
  display: block; margin: 0 0 1rem; padding: .5rem .8rem;
  border: 1px dashed var(--night-rule); border-radius: 8px;
  font-size: .9rem; color: var(--night-ink-2); max-width: 36rem;
}

/* ── News: the index of what has been published ───────────────────────
   The homepage is the campaign. This is the other thing a reader wants
   when they arrive from a shared link and ask whether there is more.
   Deliberately plainer than the dossiers: a list of pieces, newest
   first, in the same night palette so it is obviously the same site.
   ──────────────────────────────────────────────────────────────────── */
/* Filters, as boxes. They were pills, which is the shape every generated
   interface reaches for first and the one thing this site does not use
   anywhere else. Square corners, a real background, and large enough to read:
   at .62rem uppercase mono with wide tracking they were a row of grey
   smudges, and the row is the only navigation this page has. */
.nw-topics {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin: 0 0 2.6rem; padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--night-rule);
}
.nw-tag {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; text-decoration: none;
  color: var(--night-ink-2);
  background: rgba(255, 255, 255, .022);
  border: 1px solid var(--night-rule); border-radius: 0;
  padding: .46rem .74rem; line-height: 1;
  transition: color .16s, border-color .16s, background .16s;
}
.nw-tag:hover, .nw-tag.is-on {
  color: var(--night-ink); border-color: var(--series-m);
  background: rgba(31, 111, 178, .14);
}
.nw-tag.is-all { color: var(--night-ink); border-color: var(--night-ink-3); }

.nw-list { display: grid; gap: 0; max-width: 46rem; }
.nw-post { padding: 2.5rem 0; border-top: 1px solid var(--night-rule); }
.nw-post:last-child { border-bottom: 1px solid var(--night-rule); }
.nw-post[hidden] { display: none; }

/* The date sets the line; the topics sit after it as small boxes rather than
   competing with it. */
.nw-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0 0 .8rem; }
.nw-meta time {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--night-ink-2); margin-right: .35rem;
}
.nw-meta .nw-tag { font-size: .64rem; padding: .3rem .5rem; }

.nw-post h2 { margin: 0 0 .8rem; font-size: clamp(1.45rem, 3.4vw, 2rem); line-height: 1.16; letter-spacing: -.015em; }
.nw-post h2 a { color: var(--night-ink); text-decoration: none; }
.nw-post h2 a:hover { color: var(--series-m); }

/* The newest piece gets the weight; the rest are a list. */
.nw-post.is-lead { padding-top: 1.4rem; border-top: none; }
.nw-post.is-lead h2 { font-size: clamp(1.85rem, 5vw, 2.9rem); line-height: 1.08; letter-spacing: -.028em; }
.nw-post.is-lead .nw-stand { font-size: 1.12rem; color: var(--night-ink); }

.nw-stand {
  margin: 0 0 1.2rem; font-size: 1.06rem; line-height: 1.68;
  color: var(--night-ink-2); max-width: 38rem;
}
.nw-links { display: flex; flex-wrap: wrap; gap: .5rem 1.3rem; align-items: baseline; margin: 0; }
.nw-go { font-weight: 600; color: var(--series-m); text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 1px; }
.nw-go::after { content: " \2192"; }
.nw-alt {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--night-ink-3); text-decoration: none; border-bottom: 1px solid currentColor;
}
.nw-alt:hover { color: var(--night-ink); }
.nw-foot {
  display: flex; align-items: flex-start; gap: .6rem;
  margin-top: 2.8rem; padding: 1.2rem 0 0 1rem;
  border-top: 1px solid var(--night-rule); border-left: 2px solid var(--series-m);
  font-size: .94rem; line-height: 1.68; color: var(--night-ink-3); max-width: 42rem;
}
.nw-ico { width: 1.1em; height: 1.1em; flex: none; color: var(--series-m); margin-top: .2rem; }

/* ── The site menu ────────────────────────────────────────────────────
   Every page except the homepage could previously only go home. With
   sixteen pages that meant a reader who arrived on a dossier from a
   search had to start over to reach anything else.

   A <details> element, so it opens and closes with no script and is
   keyboard operable for free. Grouped, because a flat list of fourteen
   is the endless scroll it is meant to replace.
   ──────────────────────────────────────────────────────────────────── */
.nv { position: relative; }
.nv-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--night-ink-2);
  border: 1px solid var(--night-rule); border-radius: 8px;
  padding: .45rem .8rem; cursor: pointer; list-style: none; user-select: none;
}
.nv-btn::-webkit-details-marker { display: none; }
.nv-btn:hover, .nv[open] .nv-btn { color: var(--night-ink); border-color: var(--series-m); background: color-mix(in srgb, var(--series-m) 14%, transparent); }
.nv-bars { width: 14px; height: 2px; background: currentColor; position: relative; display: inline-block; }
.nv-bars::before, .nv-bars::after {
  content: ""; position: absolute; left: 0; width: 14px; height: 2px; background: currentColor;
}
.nv-bars::before { top: -5px; }
.nv-bars::after { top: 5px; }
.nv[open] .nv-bars { background: transparent; }
.nv[open] .nv-bars::before { transform: rotate(45deg); top: 0; }
.nv[open] .nv-bars::after { transform: rotate(-45deg); top: 0; }

.nv-panel {
  position: absolute; right: 0; top: calc(100% + .6rem); z-index: 60;
  width: min(23rem, calc(100vw - 2rem));
  background: #0b1120; border: 1px solid var(--night-rule); border-radius: 12px;
  box-shadow: 0 24px 60px -24px #000;
  padding: 1rem 1.1rem 1.1rem;
  max-height: min(74vh, 40rem); overflow-y: auto;
}
.nv-group + .nv-group { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--night-rule); }
/* The group headings were small, faint uppercase and easy to skim past, so
   the menu read as one undifferentiated list rather than three. Larger, in
   the reading face, with the category's own icon beside it. */
.nv-h {
  display: flex; align-items: center; gap: .5rem;
  font-size: .95rem; font-weight: 650; letter-spacing: 0; text-transform: none;
  color: var(--night-ink); margin: 0 0 .6rem;
}
.nv-h .nv-ico { width: 1.05em; height: 1.05em; opacity: 1; color: var(--series-m); margin: 0; }
.nv-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.nv-panel a {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .52rem .55rem; border-radius: 7px;
  color: var(--night-ink); text-decoration: none;
  font-size: .92rem; line-height: 1.45;
}
.nv-panel a:hover { background: rgba(255,255,255,.06); color: var(--night-ink); }
.nv-panel a[aria-current="page"] { color: var(--series-m); background: color-mix(in srgb, var(--series-m) 12%, transparent); }
.nv-ico { width: 1em; height: 1em; flex: none; margin-top: .2rem; opacity: .95; color: var(--series-m); }
.nv-foot { margin: 1rem 0 0; padding-top: .8rem; border-top: 1px solid var(--night-rule); }
.nv-foot a { font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--night-ink-3); }
.nv-foot a:hover { color: var(--series-m); }

/* The light-background pages carry the same menu; only the surface changes. */
body:not(.dossier):not(.watch) .nv-btn { color: var(--ink-2); border-color: var(--rule); }
body:not(.dossier):not(.watch) .nv-panel { background: var(--surface, #fff); border-color: var(--rule); }
body:not(.dossier):not(.watch) .nv-panel a { color: var(--ink-2); }
body:not(.dossier):not(.watch) .nv-panel a:hover { background: rgba(0,0,0,.05); color: var(--ink); }
body:not(.dossier):not(.watch) .nv-group + .nv-group,
body:not(.dossier):not(.watch) .nv-foot { border-color: var(--rule); }

@media (max-width: 560px) { .nv-panel { position: fixed; left: 1rem; right: 1rem; width: auto; top: 4.2rem; } }
.hl-label .nw-ico { width: 1em; height: 1em; }