/* ==========================================================================
   cedriccharbit.com — Core system
   Art direction: Parisian modernism × architectural precision.
   Ground: warm parchment. Ink: midnight. Accent: restrained ultramarine.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* Material palette */
  --ink:        #131519;
  --ink-2:      #1D2027;
  --graphite:   #333941;
  --steel:      #626B78;
  --mineral:    #9BA3AD;
  --concrete:   #D3D0C7;
  --parchment:  #E7E3D9;
  --paper:      #F2F0EA;
  --paper-hi:   #FAF9F5;
  --signal:     #2C3EE0;   /* restrained electric ultramarine */
  --signal-dim: #6572E8;

  /* Semantic */
  --bg:         var(--paper);
  --fg:         var(--ink);
  --fg-muted:   var(--steel);
  --rule:       rgba(19, 21, 25, 0.14);
  --rule-soft:  rgba(19, 21, 25, 0.08);
  --rule-inv:   rgba(242, 240, 234, 0.18);

  /* Type */
  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Newsreader", "Times New Roman", Times, Georgia, serif;

  /* Metrics */
  --shell: 1480px;
  --pad: clamp(1.25rem, 4.2vw, 4.5rem);
  --head-h: 66px;
  --band: clamp(4.5rem, 9vw, 9.5rem);   /* vertical section rhythm */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (max-width: 640px) {
  :root { --head-h: 58px; }
}

/* ---------- 2. Reset ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
}

img, picture, svg, video { display: block; max-width: 100%; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 1px;
}

/* Screen-reader only */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 400;
  background: var(--ink); color: var(--paper);
  padding: 0.7rem 1.1rem; font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ---------- 3. Typography scale ----------------------------------------- */
.t-display {
  font-family: var(--serif);
  font-weight: 200;
  font-size: clamp(2.9rem, 8.2vw, 7.4rem);
  line-height: 0.92;
  letter-spacing: -0.025em;
}

.t-h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.2rem, 5.4vw, 4.35rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.t-h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.t-h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.35rem, 2.2vw, 1.95rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.t-h4 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(0.98rem, 1.15vw, 1.1rem);
  line-height: 1.35;
  letter-spacing: -0.005em;
}

/* Structural micro-label — the architectural annotation voice */
.t-label {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.685rem;
  line-height: 1.4;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--steel);
}
.t-label--signal { color: var(--signal); }

.t-index {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--signal);
  font-variant-numeric: tabular-nums;
}

/* Editorial voice */
.t-lead {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.18rem, 1.85vw, 1.6rem);
  line-height: 1.52;
  letter-spacing: -0.006em;
  color: var(--ink-2);
}

.t-body { font-size: clamp(0.95rem, 1.02vw, 1.02rem); line-height: 1.78; color: var(--graphite); }
.t-body + .t-body { margin-top: 1.15em; }
.t-body strong { font-weight: 600; color: var(--ink); }

.t-note {
  font-size: 0.82rem;
  line-height: 1.66;
  color: var(--steel);
}

.t-quote {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 2.2rem);
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.measure { max-width: 62ch; }
.measure-sm { max-width: 46ch; }
.measure-lg { max-width: 78ch; }

/* Inline link inside running copy */
.lnk {
  color: var(--ink);
  box-shadow: inset 0 -1px 0 0 var(--signal);
  transition: color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.lnk:hover { color: var(--signal); box-shadow: inset 0 -2px 0 0 var(--signal); }

/* ---------- 4. Layout primitives ---------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.band { padding-block: var(--band); }
.band--tight { padding-block: calc(var(--band) * 0.62); }
.band--top0 { padding-top: 0; }

.grid12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.1vw, 2.1rem);
}

.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }
.rule--soft { background: var(--rule-soft); }

/* Blueprint column guides — the architectural substrate */
.guides { position: relative; }
.guides::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to right,
    var(--rule-soft) 0 1px,
    transparent 1px calc(100% / 6)
  );
  background-position: left top;
  opacity: 0.85;
  z-index: 0;
}
.guides > * { position: relative; z-index: 1; }
@media (max-width: 900px) { .guides::before { display: none; } }

/* Section heading cluster */
.sec-head { display: flex; flex-direction: column; gap: 0.9rem; }
.sec-head__meta { display: flex; align-items: baseline; gap: 0.85rem; }
.sec-head__meta::after {
  content: ""; flex: 1 1 auto; height: 1px;
  background: var(--rule); transform: translateY(-0.32em);
}

/* Inverted (ink) surfaces */
.inv {
  background: var(--ink);
  color: var(--parchment);
  --rule: var(--rule-inv);
  --rule-soft: rgba(242, 240, 234, 0.09);
  --fg: var(--parchment);
}
.inv .t-body { color: rgba(231, 227, 217, 0.76); }
.inv .t-lead { color: rgba(242, 240, 234, 0.92); }
.inv .t-label { color: rgba(231, 227, 217, 0.55); }
.inv .t-quote { color: var(--paper); }
.inv .t-note { color: rgba(231, 227, 217, 0.55); }
.inv .t-h1, .inv .t-h2, .inv .t-h3, .inv .t-h4 { color: var(--paper); }
.inv .t-label--signal, .inv .t-index { color: var(--signal-dim); }
.inv .lnk { color: var(--paper); box-shadow: inset 0 -1px 0 0 var(--signal-dim); }
.inv .lnk:hover { color: var(--signal-dim); }

/* Parchment surface */
.surf-parch { background: var(--parchment); }
.surf-hi { background: var(--paper-hi); }

/* ---------- 5. Figures — subject-safe imagery ---------------------------- */
/* Every portrait frame letterboxes rather than crops: the face is never cut. */
.fig { margin: 0; }

.fig__frame {
  position: relative;
  width: 100%;
  background: var(--parchment);
  overflow: hidden;
}
.inv .fig__frame { background: #1B1E25; }
.fig__frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.fig__frame--4x5  { aspect-ratio: 4 / 5; }
.fig__frame--3x4  { aspect-ratio: 3 / 4; }
.fig__frame--1x1  { aspect-ratio: 1 / 1; }
.fig__frame--5x4  { aspect-ratio: 5 / 4; }
.fig__frame--4x3  { aspect-ratio: 4 / 3; }
.fig__frame--3x2  { aspect-ratio: 3 / 2; }
.fig__frame--16x9 { aspect-ratio: 16 / 9; }
.fig__frame--auto { aspect-ratio: auto; }
.fig__frame--auto img { height: auto; }

/* Hairline register mark on figures */
.fig__frame::after {
  content: "";
  position: absolute; inset: 0;
  border: 1px solid var(--rule);
  pointer-events: none;
}

.fig__cap {
  display: flex; gap: 0.7rem; align-items: flex-start;
  margin-top: 0.85rem;
  font-size: 0.7rem; line-height: 1.55;
  letter-spacing: 0.03em;
  color: var(--steel);
}
.fig__cap b {
  font-weight: 500; color: var(--signal);
  font-variant-numeric: tabular-nums; flex: none;
}
.inv .fig__cap { color: rgba(231, 227, 217, 0.5); }
.inv .fig__cap b { color: var(--signal-dim); }

/* ---------- 6. Buttons & actions ---------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.85rem;
  padding: 0.95rem 1.5rem;
  font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  position: relative; overflow: hidden;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.btn span { position: relative; z-index: 1; }
.btn::before {
  content: ""; position: absolute; inset: 0;
  background: var(--ink);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.42s var(--ease);
}
.btn:hover { color: var(--paper); }
.btn:hover::before { transform: scaleX(1); }
.btn--signal { border-color: var(--signal); color: var(--signal); }
.btn--signal::before { background: var(--signal); }
.btn--signal:hover { color: var(--paper-hi); }
.inv .btn { border-color: rgba(242,240,234,0.42); color: var(--paper); }
.inv .btn::before { background: var(--paper); }
.inv .btn:hover { color: var(--ink); border-color: var(--paper); }

/* Text action with a drawing arrow */
.act {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 0.45rem;
  position: relative;
}
.act::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--rule);
}
.act__arrow { width: 26px; height: 1px; background: currentColor; position: relative; flex: none; transition: width 0.35s var(--ease); }
.act__arrow::after {
  content: ""; position: absolute; right: 0; top: -2.5px;
  width: 6px; height: 6px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.act:hover { color: var(--signal); }
.act:hover .act__arrow { width: 42px; }
.inv .act { color: var(--paper); }
.inv .act:hover { color: var(--signal-dim); }

/* ---------- 7. Header --------------------------------------------------- */
.hd {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  height: var(--head-h);
  background: rgba(242, 240, 234, 0.9);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--rule);
  transition: transform 0.4s var(--ease), background 0.3s var(--ease);
}
.hd--hidden { transform: translateY(-100%); }

.hd__in {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
}

.hd__brand { display: flex; align-items: center; gap: 0.9rem; flex: none; }
.hd__name {
  font-family: var(--sans);
  font-weight: 600; font-size: 0.775rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  white-space: nowrap;
}
.hd__mark { width: 1px; height: 20px; background: var(--rule); flex: none; }
.hd__role {
  font-size: 0.66rem; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--steel); white-space: nowrap;
}
@media (max-width: 560px) { .hd__mark, .hd__role { display: none; } }

/* Desktop nav */
.nav {
  display: none;
  align-items: center;
  gap: clamp(0.85rem, 1.5vw, 1.55rem);
}
.nav__a {
  position: relative;
  font-size: 0.685rem; font-weight: 500;
  letter-spacing: 0.155em; text-transform: uppercase;
  color: var(--graphite);
  padding: 0.35rem 0;
  white-space: nowrap;
  transition: color 0.25s var(--ease);
}
.nav__a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--signal);
  transform: scaleX(0); transform-origin: right center;
  transition: transform 0.32s var(--ease);
}
.nav__a:hover { color: var(--ink); }
.nav__a:hover::after { transform: scaleX(1); transform-origin: left center; }
.nav__a[aria-current="page"] { color: var(--signal); }
.nav__a[aria-current="page"]::after { transform: scaleX(1); }

@media (min-width: 1160px) {
  .nav { display: flex; }
}

/* Index toggle */
.hd__toggle {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-size: 0.685rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  padding: 0.6rem 0;
}

/* Above the desktop breakpoint the full bar is present, so the overlay
   trigger is removed together with the overlay it controls. */
@media (min-width: 1160px) {
  .hd__toggle { display: none; }
}
.hd__bars { width: 22px; display: grid; gap: 5px; flex: none; }
.hd__bars i { display: block; height: 1px; background: var(--ink); transition: transform 0.35s var(--ease), opacity 0.25s var(--ease); }
body.menu-open .hd__bars i:first-child { transform: translateY(3px) rotate(45deg); }
body.menu-open .hd__bars i:last-child { transform: translateY(-3px) rotate(-45deg); }

/* ---------- 8. Index overlay (mobile / tablet nav) ---------------------- */
.idx {
  position: fixed; inset: 0; z-index: 190;
  background: var(--ink);
  color: var(--paper);
  display: flex; flex-direction: column;
  padding-top: var(--head-h);
  opacity: 0; visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.36s var(--ease), transform 0.36s var(--ease), visibility 0.36s;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.idx[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
body.menu-open { overflow: hidden; }
body.menu-open .hd { background: var(--ink); border-bottom-color: var(--rule-inv); }
body.menu-open .hd__name, body.menu-open .hd__toggle { color: var(--paper); }
body.menu-open .hd__role { color: var(--mineral); }
body.menu-open .hd__bars i { background: var(--paper); }
body.menu-open .hd__mark { background: var(--rule-inv); }

.idx__list { padding-block: clamp(1.4rem, 4vw, 3rem); }
.idx__item { border-top: 1px solid rgba(242, 240, 234, 0.13); }
.idx__item:last-child { border-bottom: 1px solid rgba(242, 240, 234, 0.13); }
.idx__a {
  display: flex; align-items: baseline; gap: clamp(1rem, 4vw, 2.5rem);
  padding: clamp(0.72rem, 1.9vw, 1.05rem) 0;
  transition: color 0.3s var(--ease), padding-left 0.35s var(--ease);
}
.idx__n {
  font-size: 0.68rem; font-weight: 500; letter-spacing: 0.12em;
  color: var(--signal-dim); flex: none; width: 2.2rem;
  font-variant-numeric: tabular-nums;
}
.idx__t {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.5rem, 5.2vw, 2.5rem);
  line-height: 1.1; letter-spacing: -0.015em;
  color: rgba(242, 240, 234, 0.9);
  transition: color 0.3s var(--ease);
}
.idx__a:hover { padding-left: 0.7rem; }
.idx__a:hover .idx__t { color: #fff; }
.idx__a[aria-current="page"] .idx__t { color: var(--signal-dim); }
.idx__foot {
  margin-top: auto;
  padding-block: clamp(1.5rem, 4vw, 2.6rem);
  border-top: 1px solid rgba(242, 240, 234, 0.13);
  display: flex; flex-wrap: wrap; gap: 0.6rem 2.4rem;
}
.idx__foot a, .idx__foot span {
  font-size: 0.68rem; letter-spacing: 0.1em;
  color: rgba(231, 227, 217, 0.6);
}
.idx__foot a:hover { color: var(--signal-dim); }

@media (min-width: 1160px) { .idx { display: none; } }

/* ---------- 9. Page head (internal pages) ------------------------------- */
.phead {
  padding-top: calc(var(--head-h) + clamp(3rem, 7vw, 6.5rem));
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.phead__crumb { display: flex; align-items: center; gap: 0.7rem; margin-bottom: clamp(1.6rem, 3.5vw, 2.6rem); }
.phead__crumb a { color: var(--steel); transition: color 0.25s var(--ease); }
.phead__crumb a:hover { color: var(--signal); }
.phead__crumb i { width: 18px; height: 1px; background: var(--rule); font-style: normal; }

/* ---------- 10. Footer -------------------------------------------------- */
.ft {
  background: var(--ink);
  color: var(--parchment);
  --rule: var(--rule-inv);
  padding-top: clamp(3.2rem, 7vw, 6rem);
}
.ft__top { display: grid; gap: clamp(2.4rem, 5vw, 3.5rem); grid-template-columns: 1fr; }
@media (min-width: 900px) { .ft__top { grid-template-columns: 1.15fr 0.85fr 1fr; gap: clamp(2rem, 4vw, 4rem); } }

.ft__wordmark {
  font-family: var(--serif); font-weight: 200;
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  line-height: 1; letter-spacing: -0.02em;
  color: var(--paper);
}
.ft__tag { margin-top: 1rem; max-width: 34ch; font-size: 0.85rem; line-height: 1.7; color: rgba(231, 227, 217, 0.62); }

.ft__h {
  font-size: 0.665rem; font-weight: 500; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(231, 227, 217, 0.45);
  padding-bottom: 0.9rem; margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--rule-inv);
}

.ft__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem 1.4rem; }
.ft__nav a {
  font-size: 0.79rem; color: rgba(231, 227, 217, 0.74);
  transition: color 0.25s var(--ease), transform 0.25s var(--ease);
  display: inline-block;
}
.ft__nav a:hover { color: var(--signal-dim); transform: translateX(3px); }

.ft__dl dt {
  font-size: 0.665rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(231, 227, 217, 0.42); margin-bottom: 0.28rem;
}
.ft__dl dd { margin-bottom: 1.05rem; font-size: 0.92rem; color: var(--paper); }
.ft__dl dd:last-child { margin-bottom: 0; }
.ft__dl a { transition: color 0.25s var(--ease); }
.ft__dl a:hover { color: var(--signal-dim); }

.ft__social { display: flex; gap: 0.55rem; margin-top: 1.6rem; flex-wrap: wrap; }
.ft__social a,
.ft__social span {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid rgba(242, 240, 234, 0.22);
  color: rgba(231, 227, 217, 0.8);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), opacity 0.3s var(--ease);
}
.ft__social a:hover { background: var(--signal); border-color: var(--signal); color: #fff; }
/* No verified personal profile exists for these platforms, so the marks are
   shown as identifiers rather than invented links. */
.ft__social span { cursor: default; opacity: 0.5; }
.ft__social span:hover { opacity: 0.72; border-color: rgba(242, 240, 234, 0.34); }
.ft__social svg { width: 15px; height: 15px; fill: currentColor; }
.ft__social-note {
  margin-top: 0.9rem;
  font-size: 0.68rem; line-height: 1.6;
  color: rgba(231, 227, 217, 0.42);
  max-width: 40ch;
}

.ft__bar {
  margin-top: clamp(2.6rem, 5vw, 4rem);
  border-top: 1px solid var(--rule-inv);
  padding-block: 1.6rem clamp(1.6rem, 3vw, 2.2rem);
  display: flex; flex-wrap: wrap; gap: 0.7rem 2rem;
  align-items: center; justify-content: space-between;
}
.ft__bar p, .ft__bar a { font-size: 0.72rem; letter-spacing: 0.04em; color: rgba(231, 227, 217, 0.52); }
.ft__bar a { color: rgba(231, 227, 217, 0.72); }
.ft__bar a:hover { color: var(--signal-dim); }

.ft__disclaimer {
  border-top: 1px solid var(--rule-inv);
  padding-block: 1.4rem 2.2rem;
  font-size: 0.68rem; line-height: 1.7;
  color: rgba(231, 227, 217, 0.38);
  max-width: 92ch;
}

/* ---------- 11. Shared editorial components ----------------------------- */

/* Ledger — a numbered horizontal band system (replaces card grids) */
.ledger { border-top: 1px solid var(--rule); }
.ledger__row {
  display: grid; gap: 0.6rem clamp(1rem, 2.5vw, 2.5rem);
  grid-template-columns: 1fr;
  padding-block: clamp(1.5rem, 3vw, 2.35rem);
  border-bottom: 1px solid var(--rule);
  transition: background 0.4s var(--ease);
}
.ledger__row:hover { background: rgba(44, 62, 224, 0.028); }
.inv .ledger__row:hover { background: rgba(242, 240, 234, 0.032); }
@media (min-width: 820px) {
  .ledger__row { grid-template-columns: 3.2rem minmax(0, 0.85fr) minmax(0, 1.35fr); align-items: start; }
}
.ledger__n { font-variant-numeric: tabular-nums; }

/* Dossier — key/value verified-fact list */
.dossier { border-top: 1px solid var(--rule); }
.dossier__row {
  display: grid; grid-template-columns: 1fr; gap: 0.2rem;
  padding-block: 0.95rem;
  border-bottom: 1px solid var(--rule-soft);
}
@media (min-width: 460px) {
  .dossier__row { grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0.75rem; align-items: baseline; }
}
.dossier__k {
  font-size: 0.665rem; font-weight: 500; letter-spacing: 0.19em;
  text-transform: uppercase; color: var(--steel);
}
.dossier__v { font-size: 0.9rem; line-height: 1.6; color: var(--ink); }
.inv .dossier__v { color: var(--paper); }

/* Marginal note — editorial annotation block */
.margin-note {
  border-left: 1px solid var(--signal);
  padding-left: clamp(0.9rem, 1.8vw, 1.4rem);
}

/* Source / provenance tag */
.src {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.665rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--steel);
}
.src::before { content: ""; width: 14px; height: 1px; background: var(--signal); flex: none; }
.inv .src { color: rgba(231, 227, 217, 0.5); }

/* Context badge — labels editorial analysis vs. verified record */
.badge {
  display: inline-block;
  font-size: 0.665rem; font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.34rem 0.65rem;
  border: 1px solid var(--rule);
  color: var(--steel);
}
.badge--record { border-color: var(--signal); color: var(--signal); }
.inv .badge { border-color: var(--rule-inv); color: rgba(231, 227, 217, 0.6); }
.inv .badge--record { border-color: var(--signal-dim); color: var(--signal-dim); }

/* Stack of themed essay blocks */
.essay { display: grid; gap: clamp(2.2rem, 4.5vw, 3.6rem); }
.essay__block { display: grid; gap: 0.9rem; }
.essay__h { display: flex; align-items: baseline; gap: 0.9rem; }

/* ---------- 12. Reveal animation ---------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
/* Release the compositing layer once the element has arrived: hundreds of
   permanently promoted layers cost memory and break long-page rasterisation. */
[data-reveal].is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

[data-reveal-line] {
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal-line].is-in { transform: scaleX(1); }

.no-js [data-reveal], .no-js [data-reveal-line] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal], [data-reveal-line] { opacity: 1 !important; transform: none !important; }
}

/* ---------- 13. Utilities ----------------------------------------------- */
.stack-xs > * + * { margin-top: 0.6rem; }
.stack-sm > * + * { margin-top: 1rem; }
.stack-md > * + * { margin-top: 1.6rem; }
.stack-lg > * + * { margin-top: clamp(2rem, 4vw, 3.2rem); }
.flow > * + * { margin-top: 1.15em; }

.hide-sm { display: none; }
@media (min-width: 760px) { .hide-sm { display: revert; } }