/* =========================================================
   TISONS — Design tokens
   Editorial · Skeptical-systemic · SpaceX-engineering tone
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700;9..144,800&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ---------- Color · surfaces ---------- */
  --bg:              #0A0A0B;
  --surface:         #131316;
  --surface-hover:   #1C1C20;
  --surface-deep:    #08080A;
  --border:          #26262C;
  --border-strong:   #34343C;
  --border-hair:     #1A1A1F;

  /* ---------- Color · text ---------- */
  --text:            #D8D4CC;   /* adouci (audit 360°) : #F5F2EC quasi-blanc sur noir → fatigue */
  --text-2:          #9A968D;
  --text-3:          #5A574F;
  --text-4:          #3A3832;

  /* ---------- Color · accent ---------- */
  --ember:           #E55D2B;
  --ember-hover:     #FF7A4A;
  --ember-soft:      #1F0E08;
  --ember-soft-2:    #2A1410;

  /* ---------- Magnitude scale ---------- */
  --mag-low:         #5A574F;   /* 1–4 */
  --mag-mid:         #B8842F;   /* 5–6 */
  --mag-high:        #E55D2B;   /* 7–8 */
  --mag-alert:       #FF3D1F;   /* 9–10 */

  /* ---------- Reliability tiers ---------- */
  --tier-a:          #4F9D69;
  --tier-b:          #B8842F;
  --tier-c:          #5A574F;

  /* ---------- Type ---------- */
  --serif:           'Fraunces', 'GT Sectra', 'Tiempos Headline', Georgia, serif;
  --sans:            'Inter', 'Söhne', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:            'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* ---------- Layout ---------- */
  --container:       1280px;
  --gutter:          80px;
  --gutter-sm:       40px;
}

/* =========================================================
   Reset · base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  font-feature-settings: 'ss01', 'cv11', 'tnum';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  background: var(--bg);
}

img, svg, video { display: block; max-width: 100%; }

a {
  color: inherit;
  text-decoration: none;
  transition: color .15s ease;
}

a:hover { color: var(--ember); }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

input, textarea, select {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  outline: 0;
}

::selection { background: var(--ember); color: var(--bg); }

/* =========================================================
   Typographic utilities
   ========================================================= */
.serif       { font-family: var(--serif); }
.sans        { font-family: var(--sans); }
.mono        { font-family: var(--mono); }
.tnum        { font-variant-numeric: tabular-nums; }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.eyebrow--ember { color: var(--ember); }
.eyebrow--dim   { color: var(--text-3); }

.h-display {
  font-family: var(--serif);
  font-weight: 500;
  font-optical-sizing: auto;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  letter-spacing: -0.025em;
  line-height: 0.95;
}

.h-1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 72px;
  line-height: 1.02;
  letter-spacing: -0.022em;
}

.h-2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: -0.018em;
}

.h-3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.18;
  letter-spacing: -0.012em;
}

.h-4 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.008em;
}

.body {
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.7;
  color: var(--text);
}

.lede {
  font-family: var(--sans);
  font-size: 21px;
  line-height: 1.6;
  color: var(--text);
  font-weight: 400;
}

.small {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
}

.meta {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   Layout
   ========================================================= */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.container--wide {
  max-width: 1440px;
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

.hairline { background: var(--border); height: 1px; width: 100%; }
.hairline--strong { background: var(--border-strong); }

/* =========================================================
   Magnitude badge
   ========================================================= */
.mag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 8px 3px;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: 1;
}

.mag::before {
  content: '';
  width: 5px;
  height: 5px;
  background: currentColor;
  border-radius: 50%;
  flex-shrink: 0;
}

.mag--low    { color: var(--mag-low); }
.mag--mid    { color: var(--mag-mid); }
.mag--high   { color: var(--mag-high); }
.mag--alert  { color: var(--mag-alert); animation: pulse 2.4s ease-in-out infinite; }

@keyframes pulse {
  0%,100% { opacity: 1; }
  50%     { opacity: .55; }
}

/* Filled variant for hero */
.mag--solid {
  background: var(--ember);
  color: var(--bg);
  border-color: var(--ember);
}
.mag--solid::before { background: var(--bg); }

/* =========================================================
   Reliability tier inline tag
   ========================================================= */
.tier {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
}
.tier::before { content: '['; opacity: .6; margin-right: 1px; }
.tier::after  { content: ']'; opacity: .6; margin-left: 1px; }

.tier--a { color: var(--tier-a); }
.tier--b { color: var(--tier-b); }
.tier--c { color: var(--tier-c); }

/* =========================================================
   Hypothesis grade · three stars
   ========================================================= */
.hyp {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-2);
}
.hyp__stars {
  letter-spacing: 1px;
  color: var(--ember);
  font-size: 14px;
}
.hyp__stars .dim { color: var(--text-4); }

/* =========================================================
   Thread tag
   ========================================================= */
.thread {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-2);
}
.thread__glyph {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  font-size: 11px;
  line-height: 1;
  color: var(--text);
  font-weight: 500;
}

.thread--monetary    .thread__glyph { color: var(--mag-mid); border-color: color-mix(in oklab, var(--mag-mid) 60%, var(--border)); }
.thread--control     .thread__glyph { color: var(--ember); border-color: color-mix(in oklab, var(--ember) 60%, var(--border)); }
.thread--sovereignty .thread__glyph { color: var(--mag-alert); border-color: color-mix(in oklab, var(--mag-alert) 60%, var(--border)); }
.thread--europe      .thread__glyph { color: var(--tier-a); border-color: color-mix(in oklab, var(--tier-a) 60%, var(--border)); }

/* =========================================================
   Source citation card
   ========================================================= */
.cite {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: background .15s ease, border-color .15s ease;
}
.cite:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.cite__name { font-family: var(--sans); font-size: 15px; color: var(--text); font-weight: 500; }
.cite__meta { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--text-3); text-transform: uppercase; }
.cite__icon { color: var(--text-3); transition: color .15s ease; }
.cite:hover .cite__icon { color: var(--ember); }

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 14px 22px;
  background: var(--ember);
  color: var(--bg);
  border: 1px solid var(--ember);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
  line-height: 1;
}
.btn:hover { background: var(--ember-hover); color: var(--bg); }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.btn--ghost:hover { background: var(--surface-hover); color: var(--text); border-color: var(--text-2); }

.btn--small { padding: 10px 14px; font-size: 10px; }

/* =========================================================
   Input
   ========================================================= */
.input {
  width: 100%;
  padding: 16px 18px;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .04em;
}
.input::placeholder { color: var(--text-3); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; }
.input:focus { border-color: var(--ember); }

/* =========================================================
   Nav (top)
   ========================================================= */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.nav__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
  height: 64px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.nav__brand {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: .26em;
  color: var(--text);
}
.nav__brand sup { font-family: var(--mono); font-size: 9px; color: var(--ember); letter-spacing: .1em; vertical-align: super; margin-left: 4px; }

.nav__list {
  display: flex;
  gap: 36px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.nav__list a { color: var(--text-2); }
.nav__list a:hover, .nav__list a.is-active { color: var(--text); }
.nav__list a.is-active { position: relative; }
.nav__list a.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -22px; height: 1px; background: var(--ember); }

.nav__right {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: flex-end;
}
.nav__icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: var(--text-2);
  border: 1px solid transparent;
}
.nav__icon:hover { color: var(--text); border-color: var(--border-strong); }

/* =========================================================
   Footer
   ========================================================= */
.footer {
  border-top: 1px solid var(--border);
  background: var(--bg);
  padding: 80px 0 32px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
  gap: 48px;
}
.footer h5 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 20px;
  font-weight: 500;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer a { color: var(--text-2); font-size: 14px; }
.footer a:hover { color: var(--ember); }
.footer__brand .nav__brand { font-size: 24px; }
.footer__credit {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--border-hair);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-4);
}

/* =========================================================
   Card · article
   ========================================================= */
.card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px 0 0;
  border-top: 1px solid var(--border);
  min-height: 100%;
  transition: border-color .15s ease;
}
.card:hover { border-color: var(--ember); }
.card:hover .card__title { color: var(--ember); }
.card__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.card__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--text);
  transition: color .15s ease;
  text-wrap: pretty;
}
.card__excerpt { color: var(--text-2); font-size: 15px; line-height: 1.55; text-wrap: pretty; }
.card__foot { display: flex; gap: 14px; align-items: center; margin-top: auto; padding-top: 8px; }

/* =========================================================
   List row · dense
   ========================================================= */
.row {
  display: grid;
  grid-template-columns: 110px 150px 1fr 90px;
  gap: 32px;
  padding: 22px 0;
  border-top: 1px solid var(--border);
  align-items: baseline;
  transition: background .15s ease;
}
.row:hover { background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--ember) 5%, transparent) 50%, transparent); }
.row:hover .row__title { color: var(--ember); }
.row__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  color: var(--text);
  letter-spacing: -0.008em;
  transition: color .15s ease;
}
.row__excerpt { color: var(--text-2); font-size: 13px; line-height: 1.5; margin-top: 4px; }

/* =========================================================
   Tweak helpers
   ========================================================= */
.divider-v {
  width: 1px;
  background: var(--border);
  align-self: stretch;
}

.kbd {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-family: var(--mono);
  font-size: 10px;
  border: 1px solid var(--border-strong);
  color: var(--text-2);
  background: var(--surface);
  line-height: 1;
}

/* Grid noise — subtle background texture for hero areas */
.grid-bg {
  background-image:
    linear-gradient(var(--border-hair) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-hair) 1px, transparent 1px);
  background-size: 80px 80px;
  background-position: -1px -1px;
}

/* Smaller vertical rhythm util */
.section {
  padding: 120px 0;
  border-top: 1px solid var(--border);
}
.section--tight { padding: 80px 0; }
.section--loose { padding: 160px 0; }

/* Section header */
.sec-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 56px;
  gap: 24px;
}
.sec-head__left { display: flex; flex-direction: column; gap: 12px; }
.sec-head__title { font-family: var(--serif); font-weight: 400; font-size: 36px; letter-spacing: -0.015em; color: var(--text); line-height: 1.1; }

/* ============================================================
   PAGE-SPECIFIC STYLES — merged from all 7 screen HTML files
   ============================================================ */

/* ------ 01-homepage ------ */
  /* --- Hero --- */
  .hero {
    position: relative;
    min-height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 80px 0 56px;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
  }
  .hero__bg {
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 80% 60% at 70% 100%, color-mix(in oklab, var(--ember) 14%, transparent), transparent 60%),
      linear-gradient(180deg, transparent 0%, var(--bg) 100%);
    pointer-events: none;
  }
  .hero__bg-grid {
    position: absolute; inset: 0;
    background-image:
      linear-gradient(var(--border-hair) 1px, transparent 1px),
      linear-gradient(90deg, var(--border-hair) 1px, transparent 1px);
    background-size: 120px 120px;
    mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, black 30%, transparent 80%);
    opacity: .5;
  }
  .hero__inner {
    position: relative;
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .hero__bar-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--border-hair);
  }
  .hero__bar-top .meta { color: var(--text-3); }
  .hero__bar-top .pulse {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--ember);
  }
  .hero__bar-top .pulse::before {
    content: ''; width: 6px; height: 6px; background: var(--ember); border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
  }

  .hero__title {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(120px, 18vw, 280px);
    line-height: .88;
    letter-spacing: -0.04em;
    margin: auto 0;
    color: var(--text);
  }
  .hero__title em {
    font-style: italic;
    font-weight: 400;
    color: var(--ember);
  }
  .hero__tag {
    margin-top: 32px;
    max-width: 760px;
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-2);
    line-height: 1.6;
  }
  .hero__tag .text--em { color: var(--text); }

  .hero__bottom {
    margin-top: auto;
    padding-top: 56px;
    display: grid;
    grid-template-columns: 220px 1fr 320px;
    gap: 48px;
    align-items: end;
  }

  .signal-pin .meta { color: var(--text-3); margin-bottom: 8px; display:block;}
  .signal-pin__title {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 22px;
    line-height: 1.2;
    color: var(--text);
    letter-spacing: -0.008em;
    text-wrap: pretty;
  }
  .signal-pin__title:hover { color: var(--ember); }
  .signal-pin__row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }

  .hero__scroll {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-end;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-3);
  }
  .hero__scroll-line {
    width: 80px; height: 1px; background: var(--text-3); position: relative; overflow: hidden;
  }
  .hero__scroll-line::after {
    content: ''; position: absolute; left: -30%; top: 0; bottom: 0; width: 30%;
    background: var(--ember); animation: scrollLine 2.4s ease-in-out infinite;
  }
  @keyframes scrollLine {
    0% { left: -30%; } 100% { left: 100%; }
  }

  /* --- Section: derniers signaux --- */
  .signals-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
  }

  /* --- Section: threads --- */
  .threads-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    border-left: 1px solid var(--border);
  }
  .thread-card {
    padding: 40px 32px;
    border-right: 1px solid var(--border);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-height: 320px;
    transition: background .2s ease;
    position: relative;
  }
  .thread-card:hover { background: var(--surface); }
  .thread-card:hover .thread-card__arrow { color: var(--ember); transform: translateX(4px); }

  .thread-card__glyph {
    font-size: 56px;
    line-height: 1;
    font-family: var(--serif);
    font-weight: 400;
  }
  .thread-card--monetary    .thread-card__glyph { color: var(--mag-mid); }
  .thread-card--control     .thread-card__glyph { color: var(--ember); }
  .thread-card--sovereignty .thread-card__glyph { color: var(--mag-alert); }
  .thread-card--europe      .thread-card__glyph { color: var(--tier-a); }

  .thread-card__label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--text-3);
  }
  .thread-card__name {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 24px;
    letter-spacing: -0.01em;
    color: var(--text);
    line-height: 1.1;
  }
  .thread-card__desc {
    font-size: 14px;
    color: var(--text-2);
    line-height: 1.55;
    margin-top: auto;
  }
  .thread-card__stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
    border-top: 1px solid var(--border-hair);
  }
  .thread-card__arrow {
    color: var(--text-3);
    transition: color .15s ease, transform .15s ease;
  }

  /* --- Newsletter banner --- */
  .brief {
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 120px 0;
    position: relative;
    overflow: hidden;
  }
  .brief::before {
    content: '';
    position: absolute; inset: 0;
    background:
      radial-gradient(circle at 100% 0%, color-mix(in oklab, var(--ember) 18%, transparent), transparent 50%);
    pointer-events: none;
  }
  .brief__inner {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 80px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
  }
  .brief__title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 56px;
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  .brief__title em { color: var(--ember); font-style: italic; }
  .brief__form {
    display: flex;
    border: 1px solid var(--border-strong);
    background: var(--bg);
  }
  .brief__form input { flex: 1; border: 0; }
  .brief__form button { border: 0; padding: 0 28px; }
  .brief__bullets {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .brief__bullets li {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-2);
    display: flex; align-items: center; gap: 12px;
  }
  .brief__bullets li::before { content: '◦'; color: var(--ember); }

  /* --- Autres signaux dense list --- */
  .row--home {
    grid-template-columns: 130px 140px 1fr 150px;
  }

  .ticker {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    background: var(--surface-deep);
  }
  .ticker__track {
    display: flex;
    gap: 56px;
    padding: 14px 0;
    white-space: nowrap;
    animation: ticker 60s linear infinite;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-2);
  }
  .ticker__track .ember { color: var(--ember); }
  @keyframes ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

/* ------ 02-article ------ */
  /* --- Header strip --- */
  .art-strip {
    border-bottom: 1px solid var(--border);
    background: var(--bg);
  }
  .art-strip__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
  }
  .art-strip__left, .art-strip__right {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
  }
  .art-strip__right .meta { color: var(--text-3); }

  /* --- Title block --- */
  .art-title {
    padding: 96px 0 80px;
    border-bottom: 1px solid var(--border);
  }
  .art-title__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 80px;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 80px;
    align-items: end;
  }
  .art-title h1 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(48px, 5.6vw, 80px);
    line-height: 1.02;
    letter-spacing: -0.024em;
    margin: 16px 0 0;
    text-wrap: balance;
    color: var(--text);
  }
  .art-title h1 em { font-style: italic; color: var(--ember); font-weight: 400; }
  .art-title__meta-card {
    border: 1px solid var(--border);
    padding: 24px;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .art-title__meta-card .row { display: flex; justify-content: space-between; padding: 0; border: 0; align-items: center; grid-template-columns: none; gap: 16px; }
  .art-title__meta-card .row > .meta:first-child { color: var(--text-3); }
  .art-title__meta-card .row > *:last-child { color: var(--text); font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
  .art-title__meta-card hr { border: 0; border-top: 1px solid var(--border); margin: 0; }

  /* --- Body layout: marginalia + prose --- */
  .art-body {
    padding: 96px 0 120px;
  }
  .art-body__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 80px;
    display: grid;
    grid-template-columns: 220px minmax(0,1fr) 220px;
    gap: 80px;
  }

  .toc {
    position: sticky;
    top: 96px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .toc h6 {
    margin: 0 0 12px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--text-3);
    font-weight: 500;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
  }
  .toc a {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-2);
    padding: 8px 0;
    border-left: 1px solid var(--border);
    padding-left: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: border-color .15s ease, color .15s ease;
    line-height: 1.4;
  }
  .toc a:hover, .toc a.is-active { color: var(--text); border-color: var(--ember); }
  .toc a.is-active { color: var(--ember); }
  .toc a span:first-child { color: var(--text-3); font-size: 10px; }

  /* --- Prose --- */
  .prose {
    max-width: 640px;
    color: var(--text);
    font-size: 18px;
    line-height: 1.7;
  }
  .prose h2 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 36px;
    line-height: 1.15;
    letter-spacing: -0.012em;
    margin: 72px 0 24px;
    color: var(--text);
    text-wrap: balance;
  }
  .prose h2:first-child { margin-top: 0; }
  .prose h3 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 24px;
    line-height: 1.2;
    margin: 48px 0 16px;
    color: var(--text);
  }
  .prose p { margin: 0 0 24px; color: var(--text); }
  .prose p strong { color: var(--text); font-weight: 600; }
  .prose .lede {
    font-size: 22px;
    line-height: 1.55;
    color: var(--text);
    font-weight: 400;
    margin: 0 0 40px;
  }
  .prose .lede::first-letter {
    font-family: var(--serif);
    font-size: 56px;
    line-height: 0.9;
    font-weight: 500;
    float: left;
    margin: 6px 12px -2px 0;
    color: var(--ember);
  }
  .prose a { color: var(--ember); border-bottom: 1px solid color-mix(in oklab, var(--ember) 50%, transparent); }
  .prose a:hover { background: color-mix(in oklab, var(--ember) 16%, transparent); border-color: var(--ember); }
  .prose blockquote {
    margin: 32px 0;
    padding: 8px 0 8px 32px;
    border-left: 2px solid var(--ember);
    font-family: var(--serif);
    font-weight: 400;
    font-style: italic;
    font-size: 22px;
    line-height: 1.45;
    color: var(--text);
  }
  .prose blockquote cite {
    display: block;
    font-family: var(--mono);
    font-size: 11px;
    font-style: normal;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-top: 16px;
  }
  .prose ul, .prose ol {
    margin: 0 0 24px;
    padding-left: 0;
    list-style: none;
  }
  .prose ul li, .prose ol li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 10px;
  }
  .prose ul li::before {
    content: '▸';
    position: absolute;
    left: 0; top: 0;
    color: var(--ember);
    font-family: var(--mono);
    font-size: 14px;
  }
  .prose ol { counter-reset: li; }
  .prose ol li { counter-increment: li; }
  .prose ol li::before {
    content: counter(li, decimal-leading-zero);
    position: absolute;
    left: 0; top: 0;
    color: var(--ember);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .06em;
  }

  .sidenote {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-3);
    border-left: 1px solid var(--border);
    padding-left: 16px;
    margin: 32px 0;
  }
  .sidenote span { color: var(--ember); }

  /* --- Inline source citation block --- */
  .source-block {
    margin: 32px 0;
    padding: 20px 24px;
    border: 1px solid var(--border);
    background: var(--surface);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 24px;
    align-items: center;
  }
  .source-block:hover { border-color: var(--border-strong); background: var(--surface-hover); }
  .source-block__label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-3);
  }
  .source-block__name {
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.005em;
  }
  .source-block__author {
    font-family: var(--sans);
    font-size: 13px;
    color: var(--text-2);
    margin-top: 4px;
  }
  .source-block__icon {
    color: var(--text-3);
    transition: color .15s ease;
  }
  .source-block:hover .source-block__icon { color: var(--ember); }

  /* --- Right rail --- */
  .rail {
    position: sticky;
    top: 96px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .rail h6 {
    margin: 0 0 8px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--text-3);
    font-weight: 500;
  }
  .rail__share { display: flex; gap: 8px; }
  .rail__share button {
    width: 36px; height: 36px;
    border: 1px solid var(--border);
    color: var(--text-2);
    display: grid; place-items: center;
    transition: border-color .15s ease, color .15s ease;
  }
  .rail__share button:hover { border-color: var(--ember); color: var(--ember); }

  /* --- Magnitude callout --- */
  .mag-callout {
    margin: 56px 0;
    padding: 32px;
    border: 1px solid var(--border);
    background: var(--surface);
    position: relative;
  }
  .mag-callout::before {
    content: ''; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px;
    background: var(--ember);
  }
  .mag-callout__title {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 22px;
    letter-spacing: -0.008em;
    margin: 8px 0 24px;
  }
  .mag-callout__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 32px;
  }
  .mag-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-top: 1px solid var(--border);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .mag-row:first-child, .mag-row:nth-child(2) { border-top: 0; padding-top: 0;}
  .mag-row__label { color: var(--text-2); }
  .mag-row__val { color: var(--text); display: flex; align-items: baseline; gap: 8px; }
  .mag-bar {
    display: inline-flex;
    gap: 3px;
  }
  .mag-bar i {
    display: block;
    width: 6px; height: 14px;
    background: var(--border-strong);
  }
  .mag-bar i.on { background: var(--ember); }
  .mag-bar i.mid { background: var(--mag-mid); }

  .mag-callout__total {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .mag-callout__total-val {
    font-family: var(--serif);
    font-size: 48px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--ember);
    line-height: 1;
  }
  .mag-callout__total-val span { color: var(--text-3); font-size: 24px; }

  /* --- Contre-angle --- */
  .contre {
    margin: 64px 0;
    padding: 40px;
    background: var(--ember-soft);
    border: 1px solid color-mix(in oklab, var(--ember) 30%, var(--border));
    position: relative;
  }
  .contre__label {
    display: inline-block;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ember);
    margin-bottom: 16px;
  }
  .contre__title {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 28px;
    line-height: 1.15;
    margin: 0 0 16px;
    color: var(--text);
    letter-spacing: -0.012em;
  }
  .contre p { color: var(--text); margin: 0 0 12px;}
  .contre p:last-child { margin-bottom: 0; }

  /* --- Synthèse --- */
  .synthese {
    margin: 64px 0 56px;
    padding: 48px;
    border: 1px solid var(--border-strong);
    background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
  }
  .synthese__label { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ember); }
  .synthese__title { font-family: var(--serif); font-weight: 500; font-size: 32px; line-height: 1.15; letter-spacing: -0.014em; margin: 12px 0 24px; }
  .synthese__list { margin: 0; padding: 0; list-style: none; counter-reset: s; }
  .synthese__list li { counter-increment: s; padding: 20px 0; border-top: 1px solid var(--border); display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: baseline; }
  .synthese__list li::before { content: counter(s, decimal-leading-zero); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--ember); padding-top: 4px; }
  .synthese__list li strong { color: var(--text); font-weight: 500; }
  .synthese__list li p { color: var(--text-2); margin: 4px 0 0; font-size: 15px; line-height: 1.55; }

  /* --- FAQ --- */
  .faq { margin: 48px 0; }
  .faq__item {
    border-top: 1px solid var(--border);
    padding: 20px 0;
  }
  .faq__item:last-child { border-bottom: 1px solid var(--border); }
  .faq__q {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    cursor: pointer;
    list-style: none;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 19px;
    color: var(--text);
    letter-spacing: -0.005em;
  }
  .faq__q::-webkit-details-marker { display: none; }
  .faq__q .plus { font-family: var(--mono); color: var(--ember); font-size: 14px; flex-shrink: 0;}
  .faq__a {
    margin-top: 16px;
    color: var(--text-2);
    font-size: 16px;
    line-height: 1.65;
  }
  details[open] .faq__q .plus::after { content: '−'; }
  details:not([open]) .faq__q .plus::after { content: '+'; }
  details .faq__q .plus { width: 1ch; text-align: center; }
  details .faq__q .plus::before { display: none; }

  /* --- Desk byline --- */
  .byline {
    margin-top: 64px;
    padding: 32px;
    border: 1px solid var(--border);
    background: var(--surface);
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 24px;
    align-items: center;
  }
  .byline__monogram {
    width: 64px; height: 64px;
    border: 1px solid var(--border-strong);
    display: grid; place-items: center;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 28px;
    color: var(--ember);
    letter-spacing: -0.02em;
  }
  .byline__name { font-family: var(--serif); font-weight: 500; font-size: 18px; }
  .byline__role { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-top: 4px; }

  /* --- Related --- */
  .related { padding: 96px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }

  /* --- CTA newsletter inline --- */
  .nl-inline {
    padding: 96px 0;
    background: var(--surface-deep);
    border-bottom: 1px solid var(--border);
  }
  .nl-inline__inner {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 40px;
    text-align: center;
  }
  .nl-inline h3 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 44px;
    line-height: 1.1;
    margin: 16px 0 32px;
    letter-spacing: -0.018em;
  }
  .nl-inline__form {
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    border: 1px solid var(--border-strong);
  }
  .nl-inline__form input { flex: 1; border: 0; }
  .nl-inline__form button { border: 0; }

/* ------ 03-archive ------ */
  .arch-hero {
    padding: 96px 0 80px;
    border-bottom: 1px solid var(--border);
    position: relative;
  }
  .arch-hero__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 80px;
    align-items: end;
  }
  .arch-hero h1 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(72px, 8vw, 120px);
    line-height: .96;
    letter-spacing: -0.028em;
    margin: 24px 0 0;
  }
  .arch-hero h1 em { font-style: italic; color: var(--ember); font-weight:400; }

  .arch-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
  }
  .arch-stat {
    background: var(--bg);
    padding: 24px 24px;
  }
  .arch-stat__label { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); }
  .arch-stat__val { font-family: var(--serif); font-size: 42px; font-weight: 500; letter-spacing: -0.022em; line-height: 1; margin-top: 12px; color: var(--text); }
  .arch-stat__val .ember { color: var(--ember); }
  .arch-stat__sub { font-family: var(--mono); font-size: 11px; color: var(--text-2); letter-spacing: .06em; margin-top: 8px; text-transform: uppercase; }

  /* --- Filter bar --- */
  .filterbar {
    position: sticky;
    top: 64px;
    z-index: 30;
    background: color-mix(in oklab, var(--bg) 90%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
  }
  .filterbar__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 16px 40px;
    display: grid;
    grid-template-columns: 1fr auto auto auto auto;
    gap: 12px;
    align-items: center;
  }
  .filter-group {
    display: flex;
    gap: 0;
    border: 1px solid var(--border);
    overflow: hidden;
  }
  .filter-chip {
    padding: 10px 16px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-2);
    background: transparent;
    border: 0;
    border-right: 1px solid var(--border);
    transition: background .15s ease, color .15s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
    white-space: nowrap;
  }
  .filter-chip:last-child { border-right: 0; }
  .filter-chip:hover { color: var(--text); background: var(--surface-hover); }
  .filter-chip.is-active { color: var(--bg); background: var(--ember); }
  .filter-chip.is-active .count { color: var(--bg); }
  .filter-chip .count {
    font-size: 10px;
    color: var(--text-3);
    background: color-mix(in oklab, var(--text-3) 18%, transparent);
    padding: 2px 6px;
    border-radius: 1px;
  }
  .filter-chip.is-active .count { background: color-mix(in oklab, var(--bg) 30%, transparent); }

  .filter-search {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--border);
    padding: 0 14px;
    height: 38px;
    min-width: 320px;
  }
  .filter-search input {
    flex: 1;
    background: transparent;
    border: 0;
    color: var(--text);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .04em;
  }
  .filter-search input::placeholder { color: var(--text-3); text-transform: uppercase; letter-spacing: .14em; font-size: 11px; }
  .filter-search svg { color: var(--text-3); }
  .filter-search .kbd { margin-left: 6px; }

  .select-mini {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-2);
    height: 38px;
    line-height: 1;
  }
  .select-mini:hover { color: var(--text); }
  .select-mini__sep { color: var(--text-3); }
  .select-mini__val { color: var(--text); }

  /* --- Section heading row --- */
  .year-heading {
    border-top: 2px solid var(--text);
    padding: 24px 0 16px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }
  .year-heading h2 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 56px;
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 0;
  }
  .year-heading__count {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-3);
  }

  /* --- Archive table --- */
  .arch-table {
    width: 100%;
    border-collapse: collapse;
  }
  .arch-table thead th {
    text-align: left;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-3);
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    font-weight: 500;
  }
  .arch-table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background .15s ease;
  }
  .arch-table tbody tr:hover { background: var(--surface); }
  .arch-table tbody tr:hover .arch-table__title { color: var(--ember); }
  .arch-table td {
    padding: 22px 16px;
    vertical-align: top;
  }
  .arch-table__date { font-family: var(--mono); font-size: 12px; color: var(--text-2); letter-spacing: .04em; padding-top: 26px !important; white-space: nowrap; }
  .arch-table__title {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -0.008em;
    color: var(--text);
    transition: color .15s ease;
    margin: 0;
    text-wrap: pretty;
  }
  .arch-table__excerpt {
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.5;
    margin: 6px 0 0;
    max-width: 60ch;
    text-wrap: pretty;
  }
  .arch-table__cell-meta { white-space: nowrap; padding-top: 26px !important; }
  .arch-table__tier { padding-top: 26px !important; text-align: right; }
  .arch-table__time { font-family: var(--mono); font-size: 11px; color: var(--text-3); letter-spacing: .06em; text-transform: uppercase; }
  .arch-table th.col-date { width: 110px; }
  .arch-table th.col-thread { width: 200px; }
  .arch-table th.col-mag { width: 130px; }
  .arch-table th.col-tier { width: 120px; text-align: right; }

  /* --- Pagination --- */
  .pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 56px 0;
    border-top: 1px solid var(--border);
    margin-top: 24px;
  }
  .pagination__count {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-3);
  }
  .pagination__count .ember { color: var(--ember); }
  .pagination__nav { display: flex; gap: 4px; }
  .pagination__nav button {
    width: 36px; height: 36px;
    border: 1px solid var(--border);
    color: var(--text-2);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .06em;
    transition: all .15s ease;
  }
  .pagination__nav button:hover { color: var(--text); border-color: var(--text-2); }
  .pagination__nav button.is-active { background: var(--ember); color: var(--bg); border-color: var(--ember); }
  .pagination__nav button[disabled] { opacity: .3; cursor: not-allowed; }

/* ------ 04-thread ------ */
  /* --- Thread breadcrumbs / strip --- */
  .crumbs {
    border-bottom: 1px solid var(--border);
  }
  .crumbs__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 18px 40px;
    display: flex;
    gap: 12px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-3);
    align-items: center;
  }
  .crumbs a { color: var(--text-2); }
  .crumbs__sep { color: var(--text-4); }

  /* --- Hero --- */
  .thero {
    position: relative;
    padding: 120px 0 96px;
    border-bottom: 1px solid var(--border);
    overflow: hidden;
  }
  .thero__bg {
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 60% 80% at 90% 50%, color-mix(in oklab, var(--mag-alert) 18%, transparent), transparent 60%);
    pointer-events: none;
  }
  .thero__inner {
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 280px 1fr 320px;
    gap: 80px;
    align-items: start;
  }
  .thero__glyph {
    width: 240px; height: 240px;
    border: 1px solid var(--border);
    display: grid; place-items: center;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 160px;
    line-height: 1;
    color: var(--mag-alert);
    position: relative;
    background: var(--surface-deep);
  }
  .thero__glyph::before, .thero__glyph::after {
    content: ''; position: absolute;
    width: 10px; height: 10px;
    border: 1px solid var(--text-3);
  }
  .thero__glyph::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
  .thero__glyph::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

  .thero__copy h1 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(64px, 7vw, 96px);
    line-height: .98;
    letter-spacing: -0.024em;
    margin: 16px 0 32px;
  }
  .thero__copy h1 em { font-style: italic; color: var(--mag-alert); font-weight: 400; }
  .thero__copy .lede {
    font-size: 20px;
    line-height: 1.6;
    color: var(--text-2);
    max-width: 60ch;
  }
  .thero__copy .lede strong { color: var(--text); font-weight: 500; }

  .thero__panel {
    border: 1px solid var(--border);
    background: var(--surface);
    padding: 0;
  }
  .thero__panel-row {
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
  }
  .thero__panel-row:last-child { border-bottom: 0; }
  .thero__panel-row .label { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); }
  .thero__panel-row .val { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
  .thero__panel-row .val--big { font-family: var(--serif); font-size: 32px; letter-spacing: -0.018em; font-weight: 500; color: var(--mag-alert); text-transform: none; line-height: 1;}
  .thero__panel-row .val--big span { color: var(--text-3); font-size: 16px; }

  /* --- Trend mini chart --- */
  .trend {
    padding: 24px 20px;
    border-bottom: 1px solid var(--border);
  }
  .trend__title { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); margin-bottom: 14px; }
  .trend__chart {
    height: 60px;
    width: 100%;
  }

  /* --- Layout for content --- */
  .twrap {
    padding: 96px 0;
  }
  .twrap__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 80px;
  }

  /* --- Timeline --- */
  .timeline {
    border-left: 1px solid var(--border);
    position: relative;
    padding-left: 0;
  }
  .timeline__year {
    padding: 24px 0 16px 32px;
    font-family: var(--serif);
    font-size: 36px;
    font-weight: 500;
    letter-spacing: -0.018em;
    color: var(--text);
    background: var(--bg);
    position: sticky; top: 64px;
    z-index: 5;
    border-bottom: 1px solid var(--border);
  }
  .timeline__year::before {
    content: ''; position: absolute; left: -5px; top: 36px;
    width: 9px; height: 9px; background: var(--ember); border-radius: 50%;
  }

  .tl-item {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 24px;
    padding: 32px 32px 32px 32px;
    border-bottom: 1px solid var(--border);
    position: relative;
  }
  .tl-item::before {
    content: '';
    position: absolute;
    left: -4px; top: 40px;
    width: 7px; height: 7px;
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: 50%;
  }
  .tl-item:hover::before { border-color: var(--ember); background: var(--ember); }
  .tl-item:hover .tl-item__title { color: var(--ember); }
  .tl-item__date {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-2);
    letter-spacing: .04em;
    padding-top: 2px;
  }
  .tl-item__title {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 24px;
    line-height: 1.18;
    letter-spacing: -0.01em;
    color: var(--text);
    transition: color .15s ease;
    margin: 12px 0;
    text-wrap: pretty;
  }
  .tl-item__excerpt {
    color: var(--text-2);
    font-size: 15px;
    line-height: 1.55;
    margin: 0 0 16px;
    text-wrap: pretty;
  }
  .tl-item__meta {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
  }
  .tl-item__meta .meta { color: var(--text-3); }
  .tl-item__top { display: flex; gap: 12px; align-items: center; }

  /* --- Sidebar --- */
  .tsb { position: sticky; top: 96px; align-self: start; display: flex; flex-direction: column; gap: 32px; }
  .tsb__block {
    border: 1px solid var(--border);
    background: var(--surface);
    padding: 24px;
  }
  .tsb__block h6 {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-3);
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    font-weight: 500;
  }
  .src-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-hair);
    align-items: baseline;
  }
  .src-row:last-child { border-bottom: 0; }
  .src-row__name { font-family: var(--sans); font-size: 14px; color: var(--text); font-weight: 500; }
  .src-row__sub  { font-family: var(--mono); font-size: 10px; color: var(--text-3); letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; }

  .pulse-list { display: flex; flex-direction: column; gap: 16px; }
  .pulse-row {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  }
  .pulse-row__l { color: var(--text-2); }
  .pulse-row__r { display: flex; align-items: center; gap: 8px; color: var(--text); }
  .pulse-bar {
    width: 60px; height: 4px; background: var(--border); position: relative; overflow: hidden;
  }
  .pulse-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ember); }

  .related-thread {
    display: flex; flex-direction: column; gap: 12px;
  }
  .related-thread a {
    display: flex; gap: 12px; align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--border);
    transition: border-color .15s ease, background .15s ease;
  }
  .related-thread a:hover { border-color: var(--ember); background: var(--surface-hover); }
  .related-thread a .glyph {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border: 1px solid var(--border-strong);
    font-family: var(--mono);
    font-size: 13px;
  }
  .related-thread a .info { flex: 1; }
  .related-thread a .info .n { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
  .related-thread a .info .t { font-family: var(--serif); font-size: 16px; color: var(--text); }

/* ------ 05-desk ------ */
  .desk-hero {
    padding: 120px 0 120px;
    border-bottom: 1px solid var(--border);
    position: relative;
  }
  .desk-hero__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 80px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: end;
  }
  .desk-hero h1 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(72px, 8vw, 128px);
    line-height: .9;
    letter-spacing: -0.03em;
    margin: 24px 0 0;
  }
  .desk-hero h1 em { color: var(--ember); font-style: italic; font-weight: 400; }
  .desk-hero__right {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .desk-hero__monogram {
    width: 160px; height: 160px;
    border: 1px solid var(--border-strong);
    display: grid; place-items: center;
    font-family: var(--serif);
    font-size: 96px;
    font-weight: 500;
    color: var(--ember);
    line-height: 1;
    background: var(--surface-deep);
  }

  /* --- Manifesto --- */
  .manifesto {
    padding: 120px 0;
    border-bottom: 1px solid var(--border);
  }
  .manifesto__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 80px;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 80px;
  }
  .manifesto__heading h2 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 44px;
    line-height: 1.05;
    letter-spacing: -0.018em;
    margin: 16px 0 0;
  }
  .manifesto__heading h2 em { color: var(--ember); font-style: italic; font-weight: 400; }
  .manifesto__body {
    max-width: 680px;
    font-size: 19px;
    line-height: 1.65;
    color: var(--text);
  }
  .manifesto__body p { margin: 0 0 24px; }
  .manifesto__body p strong { color: var(--text); font-weight: 600; }
  .manifesto__body p em { font-family: var(--serif); font-style: italic; font-size: 21px; }

  /* --- 3 commitments --- */
  .commits {
    padding: 120px 0;
    border-bottom: 1px solid var(--border);
  }
  .commits__head {
    max-width: 1280px;
    margin: 0 auto 64px;
    padding: 0 80px;
  }
  .commits__head h2 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 56px;
    letter-spacing: -0.02em;
    margin: 16px 0 0;
    max-width: 18ch;
    text-wrap: balance;
    line-height: 1.05;
  }
  .commits__grid {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 80px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid var(--border);
    border-right: 0;
  }
  .commit {
    padding: 40px 32px 40px;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 380px;
  }
  .commit__num {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ember);
  }
  .commit__title {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: -0.012em;
    color: var(--text);
  }
  .commit__title em { color: var(--ember); font-style: italic; }
  .commit__body {
    color: var(--text-2);
    font-size: 15px;
    line-height: 1.6;
    flex: 1;
  }
  .commit__sig {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-3);
    padding-top: 16px;
    border-top: 1px solid var(--border-hair);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* --- Legal block --- */
  .legal {
    padding: 80px 0;
    background: var(--surface-deep);
    border-bottom: 1px solid var(--border);
  }
  .legal__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 80px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 56px;
  }
  .legal__col h6 { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); margin: 0 0 16px; font-weight: 500; }
  .legal__col p { margin: 0 0 8px; color: var(--text); font-size: 14px; line-height: 1.6; }
  .legal__col p.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--text-2); }
  .legal__col .h { font-family: var(--serif); font-size: 24px; font-weight: 500; letter-spacing: -0.01em; color: var(--text); margin: 0 0 16px; line-height: 1.15; }
  .legal__col strong { color: var(--text); font-weight: 600; }

  /* --- Articles list --- */
  .articles {
    padding: 120px 0;
  }
  .articles__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 80px;
  }
  .articles .sec-head { margin-bottom: 24px; }
  .arch-table { width: 100%; border-collapse: collapse; }
  .arch-table tbody tr { border-bottom: 1px solid var(--border); transition: background .15s ease; }
  .arch-table tbody tr:first-child { border-top: 1px solid var(--border); }
  .arch-table tbody tr:hover { background: var(--surface); }
  .arch-table tbody tr:hover .arch-table__title { color: var(--ember); }
  .arch-table td { padding: 22px 16px; vertical-align: top; }
  .arch-table__date { font-family: var(--mono); font-size: 12px; color: var(--text-2); letter-spacing: .04em; padding-top: 26px !important; white-space: nowrap; width: 110px; }
  .arch-table__title { font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.2; letter-spacing: -0.008em; color: var(--text); transition: color .15s ease; }
  .arch-table__excerpt { color: var(--text-2); font-size: 14px; line-height: 1.5; margin: 6px 0 0; max-width: 60ch; }
  .arch-table__cell-meta { white-space: nowrap; padding-top: 26px !important; }
  .arch-table__time { font-family: var(--mono); font-size: 11px; color: var(--text-3); letter-spacing: .06em; text-transform: uppercase; padding-top: 26px !important; text-align: right; width: 80px; }

  /* --- Methodology bar --- */
  .method {
    border-top: 1px solid var(--border);
    padding: 24px 0;
  }
  .method__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 80px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
  }
  .method__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-left: 1px solid var(--border);
    padding-left: 16px;
  }
  .method__item:first-child { border-left: 0; padding-left: 0; }
  .method__label { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); }
  .method__val { font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: -0.01em; color: var(--text); }

  /* --- Quote pull --- */
  .pullquote {
    padding: 96px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    position: relative;
  }
  .pullquote__inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 80px;
  }
  .pullquote blockquote {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(36px, 4.4vw, 64px);
    line-height: 1.1;
    letter-spacing: -0.018em;
    margin: 24px 0;
    color: var(--text);
    text-wrap: balance;
  }
  .pullquote blockquote em { color: var(--ember); font-style: italic; }
  .pullquote .mark {
    font-family: var(--serif);
    font-size: 96px;
    line-height: 0.5;
    color: var(--ember);
  }

/* ------ 06-subscribe ------ */
  /* Hide footer here — focused page */
  .sub-page {
    min-height: calc(100vh - 64px);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .sub-page::before {
    content: '';
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 60% 50% at 50% 100%, color-mix(in oklab, var(--ember) 22%, transparent), transparent 60%),
      radial-gradient(ellipse 50% 30% at 50% 0%, color-mix(in oklab, var(--mag-alert) 8%, transparent), transparent 70%);
    pointer-events: none;
  }
  .sub-page::after {
    content: '';
    position: absolute; inset: 0;
    background-image:
      linear-gradient(var(--border-hair) 1px, transparent 1px),
      linear-gradient(90deg, var(--border-hair) 1px, transparent 1px);
    background-size: 120px 120px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 80%);
    opacity: .5;
    pointer-events: none;
  }

  .sub-strip {
    border-bottom: 1px solid var(--border);
    position: relative;
    z-index: 1;
  }
  .sub-strip__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 18px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-3);
  }
  .sub-strip .pulse { color: var(--ember); display: inline-flex; align-items: center; gap: 8px; }
  .sub-strip .pulse::before { content:''; width: 6px; height: 6px; background: var(--ember); border-radius:50%; animation: pulse 2s ease-in-out infinite; }

  .sub-main {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 480px;
    gap: 80px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 96px 80px 64px;
    position: relative;
    z-index: 1;
  }

  /* Left column */
  .sub-left { display: flex; flex-direction: column; gap: 32px; max-width: 580px; }
  .sub-left h1 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(56px, 6vw, 84px);
    line-height: .98;
    letter-spacing: -0.024em;
    margin: 0;
    text-wrap: balance;
  }
  .sub-left h1 em { color: var(--ember); font-style: italic; font-weight: 400; }
  .sub-left .lede {
    font-size: 20px;
    line-height: 1.55;
    color: var(--text);
    max-width: 50ch;
  }
  .sub-left .lede strong { color: var(--text); font-weight: 600; }

  /* Trust bullets */
  .trust {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .trust__row {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 16px;
    align-items: center;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-2);
  }
  .trust__row .check {
    width: 22px; height: 22px;
    border: 1px solid var(--ember);
    color: var(--ember);
    display: grid; place-items: center;
    font-size: 13px;
    line-height: 1;
  }
  .trust__row .num {
    font-family: var(--mono);
    color: var(--text-3);
    font-size: 11px;
  }

  /* Right column — signup card */
  .sub-card {
    border: 1px solid var(--border-strong);
    background: color-mix(in oklab, var(--surface) 92%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
  }
  .sub-card::before {
    content:'';
    position: absolute; top: -1px; right: -1px;
    width: 24px; height: 24px;
    border: 1px solid var(--ember);
    border-left: 0; border-bottom: 0;
  }
  .sub-card::after {
    content:'';
    position: absolute; bottom: -1px; left: -1px;
    width: 24px; height: 24px;
    border: 1px solid var(--ember);
    border-right: 0; border-top: 0;
  }
  .sub-card__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
  }
  .sub-card__top .label { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); }
  .sub-card__top .free { color: var(--ember); font-weight: 600; }

  .sub-card__title {
    font-family: var(--serif);
    font-size: 32px;
    font-weight: 500;
    letter-spacing: -0.014em;
    line-height: 1.1;
    margin: 0;
  }
  .sub-card__sub {
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.6;
    margin: -8px 0 0;
  }

  .sub-input {
    border: 1px solid var(--border-strong);
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .sub-input label {
    display: block;
    padding: 14px 18px 4px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-3);
  }
  .sub-input input {
    padding: 0 18px 14px;
    background: transparent;
    border: 0;
    color: var(--text);
    font-family: var(--sans);
    font-size: 18px;
    width: 100%;
  }
  .sub-input:focus-within { border-color: var(--ember); }

  .checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
  }
  .checkbox-row input { display: none; }
  .checkbox-row .box {
    width: 18px; height: 18px;
    border: 1px solid var(--border-strong);
    flex-shrink: 0;
    margin-top: 2px;
    display: grid; place-items: center;
    color: transparent;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
  }
  .checkbox-row input:checked + .box { background: var(--ember); border-color: var(--ember); color: var(--bg); }
  .checkbox-row .lbl { font-size: 13px; color: var(--text-2); line-height: 1.55; }
  .checkbox-row .lbl strong { color: var(--text); font-weight: 500; }

  .sub-btn {
    background: var(--ember);
    color: var(--bg);
    padding: 20px 24px;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    cursor: pointer;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background .15s ease;
    line-height: 1;
  }
  .sub-btn:hover { background: var(--ember-hover); }
  .sub-btn .arrow { font-size: 16px; transition: transform .2s ease; }
  .sub-btn:hover .arrow { transform: translateX(4px); }

  /* Premium tease */
  .premium {
    margin-top: 32px;
    padding: 24px 28px;
    border: 1px dashed var(--border-strong);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
  }
  .premium__left .label { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ember); }
  .premium__left .h { font-family: var(--serif); font-size: 17px; font-weight: 500; color: var(--text); margin-top: 6px; line-height: 1.3; }
  .premium__left .sub { color: var(--text-2); font-size: 13px; margin-top: 4px; }
  .premium__price { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text); text-align: right; }
  .premium__price .big { font-family: var(--serif); font-size: 24px; font-weight: 500; color: var(--ember); display: block; letter-spacing: -0.01em; }

  /* Sample reader strip */
  .sub-readers {
    margin-top: 32px;
    padding: 24px 28px;
    border: 1px solid var(--border);
    background: var(--surface-deep);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .sub-readers__avatars {
    display: flex;
    align-items: center;
  }
  .sub-readers__avatars .a {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: var(--surface-hover);
    margin-left: -8px;
    display: grid; place-items: center;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-2);
  }
  .sub-readers__avatars .a:first-child { margin-left: 0; }
  .sub-readers__avatars .a:nth-child(1) { background: color-mix(in oklab, var(--ember) 30%, var(--bg)); color: var(--bg); }
  .sub-readers__avatars .a:nth-child(2) { background: color-mix(in oklab, var(--mag-mid) 30%, var(--bg)); color: var(--text); }
  .sub-readers__avatars .a:nth-child(3) { background: color-mix(in oklab, var(--tier-a) 30%, var(--bg)); color: var(--text); }
  .sub-readers__text { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
  .sub-readers__text .ember { color: var(--ember); }

  /* Footer mini */
  .sub-foot {
    border-top: 1px solid var(--border);
    padding: 24px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
    position: relative;
    z-index: 1;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-4);
  }

/* ------ 07-404 ------ */
  .four-wrap {
    min-height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
  }
  .four-wrap::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
      linear-gradient(var(--border-hair) 1px, transparent 1px),
      linear-gradient(90deg, var(--border-hair) 1px, transparent 1px);
    background-size: 120px 120px;
    mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, black 30%, transparent 80%);
    opacity: .4;
    pointer-events: none;
  }
  .four-wrap::after {
    content: '';
    position: absolute; inset: 0;
    background:
      radial-gradient(circle 50% 40% at 50% 60%, color-mix(in oklab, var(--ember) 14%, transparent), transparent 70%);
    pointer-events: none;
  }

  /* Top error bar */
  .err-strip {
    border-bottom: 1px solid var(--border);
    position: relative; z-index: 1;
  }
  .err-strip__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 14px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-3);
  }
  .err-strip .alert {
    color: var(--mag-alert);
    display: inline-flex; align-items: center; gap: 10px;
  }
  .err-strip .alert::before {
    content: ''; width: 8px; height: 8px;
    background: var(--mag-alert);
    border-radius: 50%;
    animation: pulse 1.5s ease-in-out infinite;
  }

  /* Center */
  .four-center {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    padding: 80px 40px;
    position: relative;
    z-index: 1;
  }
  .four-card {
    max-width: 980px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  /* Glyph */
  .ember-glyph {
    position: relative;
    width: 140px; height: 140px;
    margin-bottom: 8px;
  }
  .ember-glyph svg {
    width: 100%; height: 100%;
    display: block;
  }
  .ember-glyph .smoke {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .four-eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ember);
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }
  .four-eyebrow::before, .four-eyebrow::after {
    content: ''; width: 24px; height: 1px; background: var(--ember);
  }

  .four-h1 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(72px, 9vw, 144px);
    line-height: .94;
    letter-spacing: -0.03em;
    margin: 0;
    max-width: 14ch;
    text-wrap: balance;
    color: var(--text);
  }
  .four-h1 em { color: var(--ember); font-style: italic; font-weight: 400; }

  .four-sub {
    font-size: 19px;
    line-height: 1.5;
    color: var(--text-2);
    max-width: 52ch;
    margin: 0;
    text-wrap: pretty;
  }

  .err-code {
    border: 1px dashed color-mix(in oklab, var(--mag-alert) 50%, var(--border));
    padding: 14px 24px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--mag-alert);
    display: inline-flex;
    align-items: center;
    gap: 16px;
  }
  .err-code .label { color: var(--text-3); }
  .err-code .code { color: var(--mag-alert); }
  .err-code .ts { color: var(--text-3); }

  .four-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 8px;
  }
  .four-actions .btn { padding: 16px 24px; }

  /* Suggestions */
  .four-suggest {
    margin-top: 80px;
    width: 100%;
    max-width: 1080px;
    border-top: 1px solid var(--border);
    padding-top: 56px;
  }
  .four-suggest__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 32px;
  }
  .four-suggest__head h3 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 28px;
    letter-spacing: -0.012em;
    margin: 0;
  }
  .four-suggest__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid var(--border);
    border-right: 0;
    text-align: left;
  }
  .suggest-card {
    padding: 28px 24px;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: background .15s ease;
    text-decoration: none;
    min-height: 200px;
  }
  .suggest-card:hover { background: var(--surface); }
  .suggest-card:hover .suggest-card__title { color: var(--ember); }
  .suggest-card__top { display: flex; justify-content: space-between; align-items: center; }
  .suggest-card__title {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.2;
    color: var(--text);
    letter-spacing: -0.008em;
    margin-top: auto;
    text-wrap: pretty;
  }
  .suggest-card__date { font-family: var(--mono); font-size: 11px; color: var(--text-3); letter-spacing: .06em; }

  /* Footer mini */
  .four-foot {
    border-top: 1px solid var(--border);
    padding: 24px 40px;
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-4);
    position: relative; z-index: 1;
  }

  /* Tiny flicker */
  @keyframes flicker {
    0%, 100% { opacity: 1; }
    20% { opacity: .85; }
    40% { opacity: 1; }
    60% { opacity: .92; }
    80% { opacity: 1; }
  }
  .flicker { animation: flicker 4s linear infinite; }

/* ============================================================
   GHOST PROSE — Article body rendering (post content)
   Ghost outputs raw HTML in .post-content — these are the rules
   that style h2/h3/p/img/blockquote/figure/lists inside it.
   ============================================================ */

.post-content {
  font-family: var(--sans);
  font-size: 19px;
  line-height: 1.7;
  color: var(--text);
  max-width: 66ch;
  margin: 0 auto;
}

.post-content > * + * { margin-top: 1.4em; }

.post-content h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-top: 2.2em;
  text-wrap: balance;
}

.post-content h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-top: 1.8em;
}

.post-content h4 {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ember);
  margin-top: 2em;
}

.post-content p { color: var(--text); }
.post-content strong { color: var(--text); font-weight: 600; }
.post-content em { font-style: italic; }
.post-content a {
  color: var(--text);
  background-image: linear-gradient(var(--ember), var(--ember));
  background-position: 0 100%;
  background-size: 100% 1px;
  background-repeat: no-repeat;
  transition: color .15s ease;
}
.post-content a:hover { color: var(--ember); }

.post-content blockquote {
  margin: 2em 0;
  padding: 24px 32px;
  border-left: 2px solid var(--ember);
  background: var(--surface);
  font-family: var(--serif);
  font-size: 22px;
  font-style: italic;
  line-height: 1.45;
  color: var(--text);
}
.post-content blockquote p { margin: 0; }
.post-content blockquote cite, .post-content blockquote footer {
  display: block;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11px;
  font-style: normal;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
}

.post-content ul, .post-content ol {
  padding-left: 24px;
  color: var(--text);
}
.post-content li { margin-bottom: .6em; }
.post-content li::marker { color: var(--ember); }

.post-content hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 3em 0;
}

.post-content figure {
  margin: 2.4em 0;
}
.post-content figure img {
  width: 100%;
  border: 1px solid var(--border);
}
.post-content figcaption {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: center;
}

.post-content pre, .post-content code {
  font-family: var(--mono);
  font-size: 14px;
  background: var(--surface);
  color: var(--text);
}
.post-content code { padding: 2px 6px; border: 1px solid var(--border); }
.post-content pre {
  padding: 20px 24px;
  border: 1px solid var(--border);
  overflow-x: auto;
}
.post-content pre code { background: transparent; border: 0; padding: 0; }

.post-content .kg-bookmark-card,
.post-content .kg-callout-card,
.post-content .kg-toggle-card {
  margin: 2em 0;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 20px 24px;
}

/* ============================================================
   GHOST MEMBERS / SUBSCRIBE OVERRIDES
   ============================================================ */

[data-portal] {
  --grey1: var(--bg);
  --grey-bg: var(--bg);
  --black: var(--text);
  --brand: var(--ember);
}

/* ============================================================
   RESPONSIVE — minimal mobile breakpoints
   ============================================================ */

@media (max-width: 1024px) {
  .container { padding-left: 32px; padding-right: 32px; }
  .nav__inner { padding: 0 24px; }
  .hero__inner { padding: 0 24px; }
  .hero__bottom { grid-template-columns: 1fr; gap: 32px; }
  .signals-grid { grid-template-columns: 1fr 1fr; }
  .threads-row { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .brief__inner { grid-template-columns: 1fr; padding: 0 32px; gap: 48px; }
  .row { grid-template-columns: 1fr; gap: 8px; padding: 18px 0; }
  .row > * { display: inline-block; margin-right: 12px; }
  .post-content { font-size: 17px; }
  .post-content h2 { font-size: 28px; }
}

@media (max-width: 640px) {
  html { font-size: 16px; }
  .container { padding-left: 20px; padding-right: 20px; }
  .nav__inner { grid-template-columns: 1fr auto; }
  .nav__list { display: none; }
  .hero__title { font-size: clamp(72px, 22vw, 120px) !important; }
  .signals-grid { grid-template-columns: 1fr; gap: 24px; }
  .threads-row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .section { padding: 64px 0; }
}

/* ============================================================
   PRINT — readable archive of any article
   ============================================================ */

@media print {
  body { background: white; color: black; }
  .nav, .footer, .ticker, .brief, .hero__bg, .hero__bg-grid { display: none !important; }
  .post-content { max-width: 100%; color: black; }
  a { color: black; text-decoration: underline; }
}

/* ============================================================
   KOENIG EDITOR — required width classes (gscan)
   Ghost editor cards can be normal / wide / full bleed.
   ============================================================ */
.post-content :is(img, figure, .kg-card, video, iframe) { max-width: 100%; }

.kg-width-wide {
  position: relative;
  width: 85vw;
  min-width: 100%;
  margin-left: 50%;
  transform: translateX(-50%);
  max-width: 1100px;
}

.kg-width-full {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
}

.kg-width-full img { width: 100%; }

/* Koenig gallery + cards baseline */
.kg-gallery-container { display: flex; flex-direction: column; gap: 8px; }
.kg-gallery-row { display: flex; gap: 8px; }
.kg-gallery-image img { width: 100%; height: 100%; object-fit: cover; }
.kg-embed-card { display: flex; justify-content: center; }
.kg-image-card img { margin: 0 auto; }

/* ============================================================
   Audit 360° 2026-07-02 — capture hero, thread ⚑ Souveraineté
   individuelle, bloc newsletter in-article
   ============================================================ */
.hero__capture{margin:26px 0 6px;max-width:560px}
.hero__capture-label{display:block;font-size:13px;line-height:1.5;color:var(--text-2);margin-bottom:12px}
.hero__capture-row{display:flex;gap:0;border:1px solid var(--border-strong)}
.hero__capture-row .input{border:0;flex:1;min-width:0}
.hero__capture-row .btn{border:0;white-space:nowrap}
.hero__capture-msg{display:block;margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ember)}
@media (max-width:600px){.hero__capture-row{flex-direction:column}.hero__capture-row .btn{padding:12px}}

.thread--souverainete .thread__glyph{color:var(--ember);border-color:color-mix(in oklab,var(--ember) 60%,var(--border))}
.thread-card--souverainete .thread-card__glyph{color:var(--ember)}
.thread-card--souverainete{border-color:color-mix(in oklab,var(--ember) 30%,var(--border))}

.nl-mid{margin:2.2em 0;padding:1.25em 1.5em;border:1px solid color-mix(in oklab,var(--ember) 35%,var(--border));border-left:3px solid var(--ember);border-radius:6px;background:color-mix(in oklab,var(--ember) 5%,transparent)}
.nl-mid p{margin:0 0 .8em;font-size:.95em;color:var(--text-2)}

/* ============================================================
   HOMEPAGE v2 — « cover éditoriale »  (append-only, scoped .hx-)
   ============================================================ */
.hx-hero{
  position:relative; min-height:calc(100vh - 64px);
  display:flex; flex-direction:column;
  padding:72px 0 40px; overflow:hidden;
  border-bottom:1px solid var(--border);
  background:var(--bg);
}
.hx-hero__grid-bg{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(var(--border-hair) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-hair) 1px, transparent 1px);
  background-size:104px 104px;
  mask-image:radial-gradient(ellipse 95% 75% at 50% 42%, black 25%, transparent 82%);
  -webkit-mask-image:radial-gradient(ellipse 95% 75% at 50% 42%, black 25%, transparent 82%);
  opacity:.45;
}
.hx-hero__glow{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 55% at 82% 92%, color-mix(in oklab, var(--ember) 20%, transparent), transparent 62%),
    radial-gradient(ellipse 55% 45% at 8% 6%, color-mix(in oklab, var(--ember) 7%, transparent), transparent 60%);
  animation:hx-glow 7s ease-in-out infinite;
}
.hx-hero__sweep{
  position:absolute; top:0; bottom:0; left:0; width:1px; pointer-events:none;
  background:linear-gradient(180deg, transparent, color-mix(in oklab,var(--ember) 60%, transparent), transparent);
  opacity:0; animation:hx-sweep 11s linear infinite;
}
.hx-hero__inner{
  position:relative; z-index:1; flex:1;
  width:100%; max-width:1460px; margin:0 auto; padding:0 40px;
  display:flex; flex-direction:column;
}

.hx-edition{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding-bottom:26px; border-bottom:1px solid var(--border-hair);
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
}
.hx-edition__left{ color:var(--text-3); }
.hx-edition__live{ display:inline-flex; align-items:center; gap:9px; color:var(--ember); }
.hx-edition__live i{ width:6px; height:6px; border-radius:50%; background:var(--ember); animation:pulse 2s ease-in-out infinite; }

.hx-cover{
  flex:1; display:grid; grid-template-columns:1.05fr .95fr; gap:72px;
  align-items:center; padding:52px 0 40px;
}

/* --- Colonne marque --- */
.hx-wordmark{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(88px, 11vw, 168px); line-height:.86; letter-spacing:-.045em;
  color:var(--text); margin:0;
}
.hx-wordmark em{ font-style:normal; color:var(--ember); }
.hx-manifesto{
  margin:26px 0 0; font-family:var(--mono); font-size:13px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-2);
}
.hx-pitch{
  margin:20px 0 0; max-width:44ch; font-size:15.5px; line-height:1.6; color:var(--text-2); text-wrap:pretty;
}
.hx-pitch span{ color:var(--text); }

.hx-capture{ margin-top:34px; display:flex; flex-wrap:wrap; gap:12px; max-width:520px; }
.hx-capture__input{
  flex:1 1 240px; min-width:0; background:var(--surface-deep);
  border:1px solid var(--border-strong); color:var(--text);
  padding:15px 18px; font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  transition:border-color .15s ease;
}
.hx-capture__input::placeholder{ color:var(--text-3); letter-spacing:.14em; }
.hx-capture__input:focus{ outline:none; border-color:var(--ember); }
.hx-capture__btn{
  flex:0 0 auto; background:var(--ember); color:var(--bg); border:0;
  padding:15px 24px; font-family:var(--mono); font-size:12px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.hx-capture__btn:hover{ background:var(--ember-hover); transform:translateY(-1px); }
.hx-capture__msg{ flex:1 1 100%; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ember); }
.hx-capture__msg--err{ color:var(--mag-alert); }
.hx-trust{
  margin:16px 0 0; font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-3);
}
.hx-threads-mini{ margin-top:40px; display:flex; flex-wrap:wrap; gap:10px; }
.hx-threads-mini a{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--border); padding:8px 14px;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-2); transition:border-color .15s ease, color .15s ease;
}
.hx-threads-mini a span{ color:var(--ember); font-size:13px; }
.hx-threads-mini a:hover{ color:var(--text); border-color:var(--border-strong); }

/* --- Colonne signal du jour --- */
.hx-lead{
  display:block; text-decoration:none; color:inherit;
  border:1px solid var(--border); background:var(--surface-deep);
  padding:32px 34px; position:relative;
  transition:border-color .2s ease, transform .2s ease, background .2s ease;
}
.hx-lead::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--ember);
  transform:scaleY(0); transform-origin:top; transition:transform .25s ease;
}
.hx-lead:hover{ border-color:var(--border-strong); transform:translateY(-3px); background:var(--surface); }
.hx-lead:hover::before{ transform:scaleY(1); }
.hx-lead__eyebrow{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-3);
}
.hx-lead__meta{ position:relative; z-index:2; display:flex; align-items:center; gap:14px; margin:14px 0 18px; }
.hx-lead__rt{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); }
.hx-lead__media{ margin:0 0 20px; overflow:hidden; border:1px solid var(--border); }
.hx-lead__media img{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; transition:transform .4s ease; }
.hx-lead:hover .hx-lead__media img{ transform:scale(1.03); }
.hx-lead__title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(30px, 3.3vw, 46px); line-height:1.06; letter-spacing:-.02em;
  margin:0; text-wrap:balance;
}
.hx-lead__title a{ color:var(--text); text-decoration:none; transition:color .2s ease; }
.hx-lead__title a::after{ content:''; position:absolute; inset:0; z-index:1; }
.hx-lead:hover .hx-lead__title a{ color:var(--ember); }
.hx-lead__excerpt{ margin:18px 0 0; font-size:15px; line-height:1.6; color:var(--text-2); text-wrap:pretty; }
.hx-lead__cta{
  display:inline-flex; align-items:center; gap:10px; margin-top:24px;
  font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ember);
}
.hx-lead__cta span{ transition:transform .2s ease; }
.hx-lead:hover .hx-lead__cta span{ transform:translateX(5px); }

.hx-scroll{
  margin-top:auto; padding-top:28px; display:flex; align-items:center; gap:12px; justify-content:flex-end;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3);
}
.hx-scroll i{ width:74px; height:1px; background:var(--border-strong); position:relative; overflow:hidden; }
.hx-scroll i::after{ content:''; position:absolute; top:0; bottom:0; left:-30%; width:30%; background:var(--ember); animation:scrollLine 2.4s ease-in-out infinite; }

/* --- §03 Track record band --- */
.hx-track{ background:var(--surface-deep); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:104px 0; }
.hx-track__inner{ display:grid; grid-template-columns:1fr .92fr; gap:72px; align-items:center; }
.hx-track__title{
  font-family:var(--serif); font-weight:500; font-size:clamp(34px, 4vw, 52px);
  line-height:1.05; letter-spacing:-.02em; color:var(--text); margin:22px 0 0;
}
.hx-track__title em{ font-style:italic; font-weight:400; color:var(--ember); }
.hx-track__lede{ margin:24px 0 34px; max-width:52ch; font-size:16px; line-height:1.62; color:var(--text-2); text-wrap:pretty; }
.hx-track__lede strong{ color:var(--text); font-weight:500; }
.hx-track__tiles{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); border:1px solid var(--border); }
.hx-tile{ background:var(--bg); padding:28px 26px; min-height:132px; display:flex; flex-direction:column; gap:12px; }
.hx-tile__k{ font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ember); }
.hx-tile__v{ font-size:14px; line-height:1.5; color:var(--text-2); }
.hx-tile--ember{ background:color-mix(in oklab, var(--ember) 9%, var(--bg)); }
.hx-tile--ember .hx-tile__v{ color:var(--text); }

/* --- Animations --- */
@keyframes hx-glow{ 0%,100%{ opacity:.55 } 50%{ opacity:1 } }
@keyframes hx-sweep{ 0%{ transform:translateX(-6vw); opacity:0 } 8%{ opacity:.5 } 88%{ opacity:.5 } 100%{ transform:translateX(100vw); opacity:0 } }
@media (prefers-reduced-motion: reduce){
  .hx-hero__glow, .hx-hero__sweep, .hx-scroll i::after, .hx-edition__live i{ animation:none; }
  .hx-hero__sweep{ display:none; }
}

/* --- Responsive --- */
@media (max-width:1024px){
  .hx-hero__inner{ padding:0 32px; }
  .hx-cover{ grid-template-columns:1fr; gap:48px; padding:44px 0 32px; }
  .hx-cover__brand{ order:1; }
  .hx-lead{ order:2; }
  .hx-wordmark{ font-size:clamp(80px, 20vw, 132px); }
  .hx-track{ padding:80px 0; }
  .hx-track__inner{ grid-template-columns:1fr; gap:44px; }
}
@media (max-width:640px){
  .hx-hero{ padding:40px 0 32px; min-height:auto; }
  .hx-hero__inner{ padding:0 20px; }
  .hx-edition{ flex-wrap:wrap; gap:8px; font-size:10px; }
  .hx-cover{ padding:36px 0 28px; gap:40px; }
  .hx-capture{ flex-direction:column; }
  .hx-capture__btn{ width:100%; }
  .hx-lead{ padding:24px 20px; }
  .hx-scroll{ display:none; }
  .hx-track__tiles{ grid-template-columns:1fr; }
  .hx-threads-mini a{ font-size:10px; padding:7px 11px; }
}

/* ============================================================
   TRACK RECORD — page /track-record/ (scope body.page-track-record)
   ============================================================ */
body.page-track-record .post-content{ max-width:1080px; font-size:17px; }
.tr{ font-family:var(--sans); }
.tr-intro{ font-size:19px; line-height:1.6; color:var(--text-2); max-width:70ch; }
.tr-intro strong{ color:var(--text); font-weight:600; }
.tr-intro em{ color:var(--ember); font-style:italic; }

/* KPI strip */
.tr-kpis{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)) 1.7fr; gap:1px; background:var(--border); border:1px solid var(--border); margin:44px 0 8px; }
.tr-kpi{ background:var(--surface-deep); padding:24px 22px; display:flex; flex-direction:column; gap:8px; justify-content:center; min-height:120px; }
.tr-kpi__n{ font-family:var(--serif); font-weight:500; font-size:48px; line-height:.9; letter-spacing:-.02em; color:var(--text); }
.tr-kpi__l{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); }
.tr-kpi--wide{ background:color-mix(in oklab, var(--ember) 7%, var(--surface-deep)); }
.tr-kpi__flag{ font-family:var(--mono); font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--ember); }
.tr-kpi__pair{ font-size:15px; color:var(--text-2); } .tr-kpi__pair b{ font-family:var(--serif); font-size:30px; color:var(--text); font-weight:500; }
.tr-kpi__note{ font-size:12.5px; line-height:1.5; color:var(--text-3); }

/* Blocks + eyebrow */
.tr-block{ margin:56px 0 0; }
.tr-eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ember); padding-bottom:16px; border-bottom:1px solid var(--border); margin-bottom:24px; }
.tr-lead-sm{ font-size:15px; line-height:1.6; color:var(--text-2); max-width:64ch; margin:0 0 22px; }
.tr-lead-sm em{ color:var(--ember); font-style:italic; }

/* Divergence */
.tr-div{ display:flex; flex-direction:column; gap:1px; background:var(--border); border:1px solid var(--border); }
.tr-div__row{ background:var(--bg); padding:18px 20px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.tr-div__claim{ flex:1 1 340px; font-size:14.5px; line-height:1.5; color:var(--text); }
.tr-div__gauge{ display:flex; align-items:center; gap:14px; font-family:var(--mono); font-size:12px; letter-spacing:.04em; white-space:nowrap; }
.tr-div__t{ color:var(--text); font-weight:600; }
.tr-div__m{ color:var(--text-3); }
.tr-div__m a{ color:var(--text-3); border-bottom:1px solid var(--border-strong); }
.tr-div__gap{ font-weight:700; padding:4px 10px; border:1px solid var(--border-strong); }
.tr-div__gap--up{ color:var(--tier-a); border-color:color-mix(in oklab,var(--tier-a) 45%,var(--border)); }
.tr-div__gap--down{ color:var(--ember); border-color:color-mix(in oklab,var(--ember) 45%,var(--border)); }
.tr-div__gap--flat{ color:var(--text-3); }

/* Chips */
.tr-chip{ display:inline-block; font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; padding:3px 8px; margin-right:10px; border:1px solid var(--border-strong); color:var(--text-2); vertical-align:middle; }
.tr-chip--monetary{ color:var(--mag-mid); border-color:color-mix(in oklab,var(--mag-mid) 40%,var(--border)); }
.tr-chip--control{ color:var(--ember); border-color:color-mix(in oklab,var(--ember) 40%,var(--border)); }
.tr-chip--sovereignty{ color:var(--mag-alert); border-color:color-mix(in oklab,var(--mag-alert) 40%,var(--border)); }
.tr-chip--europe{ color:var(--tier-a); border-color:color-mix(in oklab,var(--tier-a) 40%,var(--border)); }

/* Ledger table */
.tr-table-wrap{ overflow-x:auto; border:1px solid var(--border); }
.tr-table{ width:100%; border-collapse:collapse; font-size:14px; }
.tr-table thead th{ font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); text-align:left; padding:14px 16px; background:var(--surface-deep); border-bottom:1px solid var(--border); white-space:nowrap; }
.tr-table thead th:nth-child(2),.tr-table thead th:nth-child(3),.tr-table thead th:nth-child(4){ text-align:center; }
.tr-row .tr-td{ padding:16px; border-bottom:1px solid var(--border-hair); vertical-align:top; }
.tr-row:last-child .tr-td{ border-bottom:0; }
.tr-row:hover{ background:color-mix(in oklab, var(--ember) 4%, transparent); }
.tr-td--claim{ min-width:320px; }
.tr-claim{ color:var(--text); line-height:1.45; }
a.tr-claim:hover{ color:var(--ember); }
.tr-td--date{ text-align:center; font-family:var(--mono); font-size:12px; color:var(--text-2); white-space:nowrap; }
.tr-td--prob{ text-align:center; white-space:nowrap; }
.tr-prob{ display:block; font-family:var(--serif); font-size:22px; font-weight:500; color:var(--text); line-height:1; }
.tr-stars{ font-size:10px; letter-spacing:1px; color:var(--ember); }
.tr-stars__off{ color:var(--text-4); }
.tr-td--mkt{ text-align:center; font-family:var(--mono); font-size:13px; color:var(--text-2); white-space:nowrap; }
.tr-td--mkt a{ color:var(--text-2); border-bottom:1px solid var(--border-strong); }
.tr-dim{ color:var(--text-3); }
.tr-pill{ display:inline-block; font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:5px 10px; border:1px solid var(--border-strong); white-space:nowrap; }
.tr-pill--open{ color:var(--mag-mid); border-color:color-mix(in oklab,var(--mag-mid) 45%,var(--border)); }
.tr-pill--confirmed{ color:var(--tier-a); border-color:color-mix(in oklab,var(--tier-a) 50%,var(--border)); background:color-mix(in oklab,var(--tier-a) 8%,transparent); }
.tr-pill--refuted{ color:var(--mag-alert); border-color:color-mix(in oklab,var(--mag-alert) 45%,var(--border)); }

.tr-note{ margin-top:40px; font-size:13px; line-height:1.6; color:var(--text-3); border-top:1px solid var(--border); padding-top:20px; }

@media (max-width:900px){
  .tr-kpis{ grid-template-columns:1fr 1fr; }
  .tr-kpi--wide{ grid-column:1 / -1; }
}
@media (max-width:640px){
  body.page-track-record .post-content{ padding:0 16px; }
  .tr-kpis{ grid-template-columns:1fr 1fr; }
  .tr-kpi__n{ font-size:38px; }
  .tr-div__row{ gap:12px; }
}

/* Track record : lien nav mis en valeur (discret) */
.nav__list a.nav__star{ color:var(--ember); }
.nav__list a.nav__star:hover{ color:var(--ember-hover); }

/* ============================================================
   TRACK RECORD v2 — page vitrine (hero, next, gauges, steps, CTA)
   ============================================================ */
.tr-hero{ max-width:940px; margin:0 0 4px; }
.tr-hero__eye{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ember); }
.tr-hero__title{ font-family:var(--serif); font-weight:500; font-size:clamp(40px,6vw,76px); line-height:1.02; letter-spacing:-.025em; color:var(--text); margin:18px 0 0; text-wrap:balance; }
.tr-hero__title em{ font-style:italic; font-weight:400; color:var(--ember); }
.tr-hero__lede{ margin:26px 0 0; max-width:60ch; font-size:19px; line-height:1.6; color:var(--text-2); }
.tr-hero__lede b{ color:var(--text); font-weight:600; }
.tr-badges{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.tr-badge{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-2); border:1px solid var(--border-strong); padding:8px 14px; }
.tr-badge--seal{ color:var(--ember); border-color:color-mix(in oklab,var(--ember) 45%,var(--border)); }

.tr-next{ margin:44px 0 0; border:1px solid color-mix(in oklab,var(--ember) 35%,var(--border)); background:color-mix(in oklab,var(--ember) 7%,var(--surface-deep)); padding:26px 30px; display:grid; grid-template-columns:auto 1fr; grid-template-areas:"k k" "date claim" "cta cta"; gap:4px 28px; align-items:baseline; }
.tr-next__k{ grid-area:k; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ember); margin-bottom:10px; }
.tr-next__date{ grid-area:date; font-family:var(--serif); font-size:32px; font-weight:500; letter-spacing:-.01em; color:var(--text); line-height:1.1; white-space:nowrap; }
.tr-next__claim{ grid-area:claim; font-size:15px; line-height:1.5; color:var(--text-2); }
.tr-next__cta{ grid-area:cta; margin-top:16px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); }

.tr-gauges{ display:flex; flex-direction:column; gap:1px; background:var(--border); border:1px solid var(--border); }
.tr-gauge{ background:var(--bg); padding:20px 22px; display:grid; grid-template-columns:1fr 300px auto; gap:26px; align-items:center; }
.tr-gauge__claim{ font-size:14.5px; line-height:1.5; color:var(--text); }
.tr-gauge__bars{ display:flex; flex-direction:column; gap:9px; }
.tr-gauge__row{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:11px; }
.tr-gauge__lbl{ width:52px; color:var(--text-3); letter-spacing:.08em; text-transform:uppercase; }
.tr-gauge__track{ flex:1; height:8px; background:var(--surface); border:1px solid var(--border); position:relative; }
.tr-gauge__fill{ position:absolute; left:0; top:0; bottom:0; }
.tr-gauge__fill--t{ background:var(--ember); }
.tr-gauge__fill--m{ background:var(--text-3); }
.tr-gauge__val{ width:44px; text-align:right; color:var(--text); font-weight:600; }
.tr-gauge__val--m{ color:var(--text-3); }
.tr-gauge__gap{ font-family:var(--mono); font-size:12px; font-weight:700; white-space:nowrap; }
.tr-gauge__gap a{ font-weight:400; color:var(--text-3); border-bottom:1px solid var(--border-strong); }
.tr-gauge__gap--up{ color:var(--tier-a); }
.tr-gauge__gap--down{ color:var(--ember); }
.tr-gauge__gap--flat{ color:var(--text-3); }

.tr-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); }
.tr-step{ background:var(--surface-deep); padding:26px 24px; display:flex; flex-direction:column; gap:10px; }
.tr-step__n{ font-family:var(--mono); font-size:13px; font-weight:700; color:var(--ember); letter-spacing:.1em; }
.tr-step b{ font-family:var(--serif); font-size:19px; font-weight:500; color:var(--text); }
.tr-step p{ font-size:13.5px; line-height:1.55; color:var(--text-2); margin:0; }

.tr-cta{ margin:56px 0 0; border:1px solid var(--border); background:linear-gradient(160deg,color-mix(in oklab,var(--ember) 11%,var(--surface-deep)),var(--surface-deep)); padding:44px 40px; }
.tr-cta__k{ font-family:var(--serif); font-size:30px; font-weight:500; letter-spacing:-.01em; color:var(--text); }
.tr-cta__p{ margin:14px 0 24px; max-width:56ch; font-size:15.5px; line-height:1.6; color:var(--text-2); }
.tr-cta__form{ display:flex; flex-wrap:wrap; gap:12px; max-width:560px; }
.tr-cta__input{ flex:1 1 260px; min-width:0; background:var(--bg); border:1px solid var(--border-strong); color:var(--text); padding:15px 18px; font-family:var(--mono); font-size:12px; letter-spacing:.08em; }
.tr-cta__input:focus{ outline:none; border-color:var(--ember); }
.tr-cta__btn{ flex:0 0 auto; background:var(--ember); color:var(--bg); border:0; padding:15px 26px; font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
.tr-cta__btn:hover{ background:var(--ember-hover); }
.tr-cta__msg{ flex:1 1 100%; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ember); }
.tr-cta__msg--err{ color:var(--mag-alert); }

@media (max-width:900px){
  .tr-gauge{ grid-template-columns:1fr; gap:14px; }
  .tr-steps{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .tr-next{ grid-template-columns:1fr; grid-template-areas:"k" "date" "claim" "cta"; }
  .tr-steps{ grid-template-columns:1fr; }
  .tr-cta{ padding:32px 22px; }
  .tr-cta__form{ flex-direction:column; } .tr-cta__btn{ width:100%; }
}

/* ===== TRACK RECORD v3 — titres vendeurs, accroche+libellé, barres proba ===== */
.tr-sechead{ margin-bottom:28px; }
.tr-eyebrow--flat{ border:0 !important; padding:0 !important; margin-bottom:14px; }
.tr-sectitle{ font-family:var(--serif); font-weight:500; font-size:clamp(28px,3.6vw,42px); line-height:1.04; letter-spacing:-.02em; color:var(--text); margin:0; }
.tr-secsub{ margin:12px 0 0; max-width:62ch; font-size:15px; line-height:1.55; color:var(--text-2); }

.tr-h{ font-family:var(--serif); font-weight:500; font-size:19px; line-height:1.22; letter-spacing:-.01em; color:var(--text); }
a.tr-h{ transition:color .15s ease; }
a.tr-h:hover{ color:var(--ember); }
.tr-sub{ margin-top:7px; font-size:12.5px; line-height:1.5; color:var(--text-3); max-width:70ch; }

/* barre de probabilité (remplace les étoiles) */
.tr-pbar{ display:block; width:96px; height:6px; margin:9px auto 0; background:var(--surface); border:1px solid var(--border); position:relative; }
.tr-pbar__fill{ position:absolute; left:0; top:0; bottom:0; background:var(--ember); }

/* ============================================================
   TISONS — RESPONSIVE OVERHAUL  ·  2026-07-11
   Additif en fin de screen.css. Toutes les règles sont soit
   des garde-fous inoffensifs, soit scopées <= 1024px.
   Aucune incidence sur le rendu desktop >= 1025px.
   ============================================================ */

/* ---------- 0. GARDE-FOUS ANTI-DÉBORDEMENT (tous viewports) ---------- */
html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }
img, svg, video, iframe, canvas { max-width: 100%; height: auto; }
.post-content table, .prose table { display: block; width: 100%; overflow-x: auto; }
.post-content pre, .prose pre { overflow-x: auto; max-width: 100%; }
/* break-word (et non anywhere) : ne coupe qu'en dernier recours, pas de césure typographique */
.post-content :is(p, li, blockquote, h1, h2, h3, h4) { overflow-wrap: break-word; hyphens: manual; }
.post-content :is(h2, h3), .prose :is(h2, h3) { scroll-margin-top: 84px; }

/* ---------- 0b. BLOC PARTAGER — les <a> n'héritaient d'aucun style (seul le <button> était traité) ---------- */
.rail__share { display: flex; align-items: center; gap: 8px; }
.rail__share > * {
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  color: var(--text-2);
  display: grid; place-items: center;
  background: transparent;
  transition: border-color .15s ease, color .15s ease;
}
.rail__share > *:hover { border-color: var(--ember); color: var(--ember); }
.rail__share button.is-copied { border-color: var(--ember); color: var(--ember); }
.rail__share svg { display: block; }

/* ---------- 1. NAVIGATION MOBILE (burger) ---------- */
.navm { position: relative; display: none; }
.navm > summary {
  list-style: none; cursor: pointer;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--border); color: var(--text-2);
}
.navm > summary::-webkit-details-marker { display: none; }
.navm[open] > summary { border-color: var(--ember); color: var(--ember); }
.navm__panel {
  position: fixed; left: 0; right: 0; top: 56px; z-index: 60;
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column;
  padding: 8px 20px 20px;
  max-height: calc(100vh - 56px); overflow-y: auto;
  box-shadow: 0 24px 48px rgba(0, 0, 0, .55);
}
.navm__panel a {
  font-family: var(--mono); font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-2);
  padding: 16px 0; border-bottom: 1px solid var(--border);
  min-height: 44px; display: flex; align-items: center;
}
.navm__panel a:last-child { border-bottom: 0; }
.navm__panel a:hover, .navm__panel a.is-active { color: var(--ember); }

/* ---------- 2. TOC : identique au h6 sur desktop, repliable sur mobile ---------- */
.toc__d > summary {
  list-style: none; cursor: default;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 0 12px; padding-bottom: 12px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  font-weight: 500; text-transform: uppercase; color: var(--text-3);
  border-bottom: 1px solid var(--border);
}
.toc__d > summary::-webkit-details-marker { display: none; }
.toc__links { display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 900px) {
  .toc__d > summary { cursor: pointer; min-height: 44px; padding-bottom: 0; margin-bottom: 0; }
  .toc__d > summary::after { content: '+'; font-size: 15px; color: var(--text-2); }
  .toc__d[open] > summary::after { content: '−'; }
  .toc__d[open] > summary { margin-bottom: 12px; padding-bottom: 12px; }
  .toc__links { padding-top: 4px; }
}

/* ---------- 3. TABLETTE (<= 1024px) ---------- */
@media (max-width: 1024px) {
  .hero__bottom      { grid-template-columns: 1fr; }
  .thero__inner      { grid-template-columns: 1fr; gap: 32px; }
  .twrap__inner      { grid-template-columns: 1fr; gap: 32px; }
  .sub-main          { grid-template-columns: 1fr; gap: 40px; }
  .manifesto__inner  { grid-template-columns: 1fr; gap: 24px; }
  .arch-hero__inner  { grid-template-columns: 1fr; gap: 32px; }
  .desk-hero__inner  { grid-template-columns: 1fr; gap: 32px; }
  .related__grid     { grid-template-columns: 1fr 1fr; gap: 32px; }
  .commits__grid,
  .four-suggest__grid { grid-template-columns: 1fr 1fr; }
  .method__inner     { grid-template-columns: 1fr 1fr; }
  .legal__inner      { grid-template-columns: 1fr; gap: 24px; }
  .mag-callout__grid { grid-template-columns: 1fr; }
  .filterbar__inner  { grid-template-columns: 1fr; gap: 12px; }
  .sub-left          { max-width: 100%; }
}

/* ---------- 4. GABARIT ARTICLE — 1 colonne (<= 900px) ---------- */
@media (max-width: 900px) {
  .art-strip__inner {
    flex-wrap: wrap; gap: 10px;
    padding: 14px 20px;
  }
  .art-strip__left, .art-strip__right { flex-wrap: wrap; gap: 10px; }

  .art-title { padding: 40px 0 32px; }
  .art-title__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px; padding: 0 20px; align-items: start;
  }
  .art-title h1 {
    font-size: clamp(30px, 7.4vw, 46px);
    line-height: 1.08; letter-spacing: -0.018em;
    text-wrap: balance;
  }
  .art-title .lede { max-width: 100%; font-size: 17px; margin-top: 20px; }
  .art-title__meta-card { padding: 18px; }

  .art-hero figure { margin-top: 28px; padding: 0 20px; }

  .art-body { padding: 36px 0 64px; }
  .art-body__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px; padding: 0 20px;
  }

  .toc { position: static; top: auto; display: block; }
  .prose {
    max-width: 100%;
    font-size: 17px; line-height: 1.68;
  }
  .prose h2 { font-size: clamp(24px, 5.8vw, 30px); line-height: 1.2; margin: 44px 0 18px; }
  .prose h3 { font-size: clamp(19px, 4.6vw, 22px); margin: 32px 0 12px; }
  .prose blockquote, .post-content blockquote { margin-left: 0; margin-right: 0; padding-left: 16px; }
  .post-content figure, .post-content .kg-card { margin-left: 0; margin-right: 0; }

  .rail {
    position: static; top: auto;
    border-top: 1px solid var(--border); padding-top: 28px;
  }
  .byline { grid-template-columns: 56px minmax(0, 1fr); gap: 16px; }
  .byline > a { grid-column: 1 / -1; justify-self: start; }
  .byline__monogram { width: 56px; height: 56px; }

  .source-block { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .related__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .sec-head { flex-direction: column; align-items: flex-start; margin-bottom: 32px; }
  .sec-head__title { font-size: clamp(24px, 6vw, 32px); }
  .nl-inline__inner { padding: 0 20px; }
  .nl-inline__form { flex-direction: column; border: 0; gap: 10px; max-width: 100%; }
  .nl-inline__form input {
    border: 1px solid var(--border-strong); height: 52px; box-sizing: border-box;
  }
  .nl-inline__form button { border: 0; height: 52px; }
  .tisons-cta a { display: block; text-align: center; }
}

/* ---------- 5. MOBILE (<= 640px) ---------- */
@media (max-width: 640px) {
  /* Header condensé + burger */
  .nav__inner {
    height: 56px; padding: 0 16px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }
  .nav__brand { font-size: 15px; letter-spacing: .18em; }
  .nav__list { display: none; }
  .nav__right { display: flex; align-items: center; gap: 8px; }
  .nav__icon { width: 44px; height: 44px; }
  .nav__right .btn--small {
    padding: 0 12px; height: 40px;
    display: inline-flex; align-items: center;
    font-size: 10px; letter-spacing: .1em; white-space: nowrap;
  }
  .navm { display: block; }

  /* Home — capture email : correction du bug flex-basis vertical */
  .hx-capture {
    flex-direction: column; flex-wrap: nowrap;
    align-items: stretch; max-width: 100%; gap: 10px;
  }
  .hx-capture__input {
    flex: 0 0 auto; width: 100%; height: 52px;
    box-sizing: border-box; font-size: 16px; /* >=16px : pas de zoom iOS */
    letter-spacing: .08em;
  }
  .hx-capture__btn { flex: 0 0 auto; width: 100%; height: 52px; }
  .hx-capture__msg { flex: 0 0 auto; }
  .hero__capture-row { flex-direction: column; }
  .hero__capture-row .input { flex: 0 0 auto; width: 100%; height: 52px; box-sizing: border-box; font-size: 16px; }
  .hero__capture-row .btn { width: 100%; height: 52px; }
  .footer__form .input { height: 48px; font-size: 16px; }
  input, textarea, select { font-size: 16px; }
  .hx-pitch { max-width: 100%; }
  .hx-manifesto { font-size: 11px; letter-spacing: .12em; }

  /* Grilles génériques */
  .related__grid,
  .commits__grid,
  .four-suggest__grid,
  .method__inner,
  .signals-grid,
  .threads-row,
  .footer__grid,
  .arch-stats,
  .desk-hero__inner,
  .brief__inner { grid-template-columns: minmax(0, 1fr); }
  .footer__credit { flex-direction: column; gap: 8px; align-items: flex-start; text-align: left; }

  /* Lignes tabulaires (home, archive, tag, threads) */
  .row, .row--home, .tl-item, .src-row, .trust__row, .arch-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px;
  }
  .arch-table__date, .arch-table__cell-meta {
    white-space: normal !important; width: auto !important;
    padding-top: 0 !important;
  }
  .arch-table__excerpt { max-width: 100%; }

  /* Titres de section fluides */
  .sec-head__title { font-size: clamp(24px, 6.4vw, 30px); }
  .synthese__title { font-size: clamp(22px, 5.8vw, 28px); }
  .arch-stat__val { font-size: 32px; }

  /* Track record */
  .tr-kpis { grid-template-columns: minmax(0, 1fr); }
  .tr-gauge { grid-template-columns: minmax(0, 1fr); }
  .tr-steps { grid-template-columns: minmax(0, 1fr); }
  .tr-cta__form { flex-direction: column; }
  .tr-cta__input { flex: 0 0 auto; width: 100%; height: 52px; box-sizing: border-box; font-size: 16px; }
  .tr-cta__form .btn, .tr-cta__form button { width: 100%; height: 52px; }
  .tr-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  body.page-track-record .post-content { font-size: 17px; }

  /* Zones tactiles */
  .rail__share button, .rail__share a { width: 44px; height: 44px; }
  .btn, .btn--small { min-height: 40px; }
}

/* ---------- 6. TRÈS PETITS ÉCRANS (<= 380px) ---------- */
@media (max-width: 380px) {
  .nav__brand { font-size: 14px; letter-spacing: .12em; }
  .nav__right .btn--small { padding: 0 9px; font-size: 9px; }
  .container { padding-left: 16px; padding-right: 16px; }
  .art-title__inner, .art-body__inner, .art-strip__inner { padding-left: 16px; padding-right: 16px; }
}

/* ---------- 7. ICÔNES THREADS — jeu monoline unifié (2026-07-11) ----------
   Les glyphes Unicode étaient rendus par la police système : ₿ doré, △ rouge,
   ⚑ en émoji couleur. Remplacés par un jeu SVG (grille 32, graisse 1.25,
   currentColor). Cartes en monochrome sobre, ambre au survol.               */
.thread-card__glyph { font-size: 0; line-height: 0; height: 34px; display: flex; align-items: center; }
.thread-card__glyph .tglyph { width: 32px; height: 32px; transition: color .2s ease, transform .2s ease; }
.thread-card--monetary    .thread-card__glyph,
.thread-card--control     .thread-card__glyph,
.thread-card--sovereignty .thread-card__glyph,
.thread-card--europe      .thread-card__glyph,
.thread-card--souverainete .thread-card__glyph { color: var(--text-2); }
.thread-card:hover .thread-card__glyph { color: var(--ember); }
.thread-card:hover .thread-card__glyph .tglyph { transform: translateY(-1px); }

/* Pastilles d'article : même dessin, 13 px, couleur du thread conservée */
.thread__glyph { display: inline-flex; align-items: center; }
.thread__glyph .tglyph { width: 13px; height: 13px; stroke-width: 1.7; }

/* Aucun rendu émoji pour les glyphes résiduels (footer, mini-threads) */
.footer a, .hx-threads-mini a, .hx-threads-mini a span { font-variant-emoji: text; }

/* ---------- 8. REGISTRE DES VERROUS — page /verrous/ (2026-07-12) ---------- */
body.page-verrous .post-content { max-width: 1080px; font-size: 17px; }
.vr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border);
  border: 1px solid var(--border); margin: 26px 0 56px; }
.vr-card { background: var(--bg); padding: 28px 30px; display: flex; flex-direction: column; gap: 14px; }
.vr-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vr-fen { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.vr-title { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.18;
  letter-spacing: -.015em; color: var(--text); margin: 2px 0 0; }
.vr-block p { margin: 5px 0 0; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.vr-k { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-3); display: block; }
.vr-rdv { border-left: 2px solid var(--ember); padding-left: 14px; font-size: 14px; color: var(--text-2); }
.vr-rdv span:last-child { display: block; margin-top: 4px; }
.vr-src { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border);
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--text-3); line-height: 1.7; }
.vr-src a { color: var(--text-2); }
.vr-src a:hover { color: var(--ember); }
.vr-tier { color: var(--tier-a); }
.vr-gauge { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; }
.vr-gauge i { width: 7px; height: 7px; border: 1px solid var(--border-strong); display: block; }
.vr-gauge i.on { background: var(--ember); border-color: var(--ember); }
.vr-gauge b { font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--text-3); margin-left: 6px; }
.tr-pill--conf { border-color: var(--mag-alert); color: var(--mag-alert); }
.tr-pill--ref { border-color: var(--tier-a); color: var(--tier-a); }
.tr-pill--open { border-color: var(--border-strong); color: var(--text-2); }
@media (max-width: 900px) {
  .vr-grid { grid-template-columns: minmax(0, 1fr); }
  .vr-card { padding: 22px 20px; }
  .vr-title { font-size: 21px; }
}

/* ---------- 9. Accessibilité ---------- */
@media (prefers-reduced-motion: reduce) {
  .hx-hero__sweep, .hx-edition__live i { animation: none !important; }
}
  .hx-hero__sweep, .hx-edition__live i { animation: none !important; }
}

/* §9 — Verrous : bloc « Le pari Tisons » (couplage registre ↔ track record, 2026-07-12) */
.vr-pari { border-left: 2px solid var(--ember); background: rgba(224, 122, 47, .07); padding: 10px 14px; font-size: 14px; color: var(--text-2); }
.vr-pari span:last-child { display: block; margin-top: 4px; }
.vr-pari b { color: var(--text-1); }
.vr-pari a { color: var(--ember); text-decoration: none; }
.vr-pari a:hover { text-decoration: underline; }
.vr-pari b { color: var(--text-1); }
.vr-pari a { color: var(--ember); text-decoration: none; }
.vr-pari a:hover { text-decoration: underline; }

/* §10 — Indice État-Réseau (.ier-*, 2026-07-12) */
.ier-dial { margin: 28px 0 40px; text-align: center; }
.ier-dial__n { font-size: clamp(64px, 12vw, 120px); font-weight: 700; line-height: 1; color: var(--ember); font-variant-numeric: tabular-nums; }
.ier-dial__scale { position: relative; height: 8px; margin: 22px auto 10px; max-width: 640px; border-radius: 4px;
  background: linear-gradient(90deg, var(--mag-alert), var(--ember) 50%, var(--tier-a)); opacity: .9; }
.ier-dial__scale i { position: absolute; top: -5px; width: 4px; height: 18px; background: var(--text-1); border-radius: 2px; transform: translateX(-50%); }
.ier-dial__legend { display: flex; justify-content: space-between; max-width: 640px; margin: 0 auto; font-size: 13px; color: var(--text-3); }
.ier-dial__band { color: var(--text-1); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 12px; }
.ier-bars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 28px; margin: 8px 0 24px; }
@media (max-width: 700px) { .ier-bars { grid-template-columns: 1fr; } }
.ier-bar__head { display: flex; justify-content: space-between; font-size: 14px; color: var(--text-2); margin-bottom: 6px; }
.ier-bar__head b { color: var(--text-1); font-variant-numeric: tabular-nums; }
.ier-bar__track { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.ier-bar__track i { display: block; height: 100%; background: var(--ember); border-radius: 3px; }
.ier-bar__w { font-size: 12px; color: var(--text-3); margin-top: 4px; }
.ier-tablewrap { overflow-x: auto; margin: 8px 0 24px; }
.ier-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
.ier-table th { text-align: left; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding: 8px 10px; border-bottom: 1px solid var(--border); }
.ier-td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--text-2); }
.ier-td b { color: var(--text-1); }
.ier-td a { color: var(--text-2); } .ier-td a:hover { color: var(--ember); }
.ier-dim { font-size: 12px; color: var(--text-3); }
.ier-flag { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ember); border: 1px solid var(--ember); border-radius: 3px; padding: 1px 5px; margin-left: 6px; }
.ier-chg { font-size: 14px; color: var(--text-2); padding-left: 18px; }
/* §10b — contrôles croisés indice */
.ier-ok { color: var(--tier-a); font-weight: 600; }
.ier-ko { color: var(--mag-alert); font-weight: 600; }
/* ============================================================
   §12 — PASSE D'ART DIRECTION (2026-07-12)
   Additive, zéro ressource nouvelle. Détails typographiques,
   micro-interactions, états de focus. Animations = transform/
   opacity uniquement ; neutralisées sous prefers-reduced-motion.
   ============================================================ */

/* — Fondations — */
::selection { background: var(--ember); color: #0A0A0B; }
html { scrollbar-width: thin; scrollbar-color: var(--border-strong) var(--bg); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 5px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--ember); }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 2px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
h1, h2, h3, .tr-hero__title, .tr-sectitle, .vr-title { text-wrap: balance; }
.prose p, .tr-intro, .tr-secsub { text-wrap: pretty; }
.meta, .tr-kpi__n, .ier-dial__n, time { font-feature-settings: "tnum" 1; }

/* — Navigation : souligné vivant, signature apaisée — */
.nav__list a { position: relative; transition: color .18s ease; }
.nav__list a::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 1px; width: 100%;
  background: var(--ember); transform: scaleX(0); transform-origin: left;
  transition: transform .24s cubic-bezier(.22,1,.36,1);
}
.nav__list a:hover::after, .nav__list a[aria-current="page"]::after { transform: scaleX(1); }
.nav__list a[aria-current="page"] { color: var(--text); }
.nav__list a.nav__star { color: var(--text-2); }
.nav__list a.nav__star::before { content: "◆ "; color: var(--ember); font-size: 8px; vertical-align: 2px; }
.nav__list a.nav__star:hover { color: var(--text); }
@media (prefers-reduced-motion: reduce) { .nav__list a::after { transition: none; } }

/* — Liens du corps — */
.prose a { text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .15s ease, text-decoration-color .15s ease; }
.prose a:hover { color: var(--ember-hover); }

/* — Cartes : élévation braise — */
@media (prefers-reduced-motion: no-preference) {
  .thread-card, .vr-card { transition: transform .28s cubic-bezier(.22,1,.36,1), border-color .28s ease, box-shadow .28s ease; }
  .thread-card:hover, .vr-card:hover { transform: translateY(-3px); }
}
.thread-card:hover, .vr-card:hover { border-color: var(--border-strong); box-shadow: 0 18px 48px -20px rgba(229,93,43,.28), 0 4px 16px rgba(0,0,0,.4); }

/* — Lettrine d'ouverture (articles) — */
.post-content > p:first-of-type::first-letter {
  font-family: var(--serif); font-weight: 600; font-size: 3.3em;
  float: left; line-height: .82; padding: .04em .12em 0 0; color: var(--ember);
}

/* — Images du corps — */
.prose img { border-radius: 3px; border: 1px solid var(--border-hair); }

/* — Séparateur : la ligne qui couve — */
.prose hr { border: 0; height: 1px; margin: 2.6em auto;
  background: linear-gradient(90deg, var(--ember) 0, var(--border) 90px, var(--border) calc(100% - 90px), transparent); }

/* — Boutons — */
.btn { transition: background .18s ease, transform .18s ease, box-shadow .18s ease; }
@media (prefers-reduced-motion: no-preference) {
  .btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px -10px rgba(229,93,43,.5); }
  .btn:active { transform: translateY(0); box-shadow: none; }
}

/* — Footer — */
.footer { position: relative; }
.footer::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, var(--ember), var(--border) 240px, var(--border)); }
.footer a { transition: color .15s ease; }
.footer a:hover { color: var(--ember-hover); }

/* — Menu mobile : panneau de verre — */
@media (max-width: 1024px) {
  .navm__panel { background: color-mix(in oklab, var(--bg) 90%, transparent);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 10px 22px 26px; }
  .navm__panel a { padding: 15px 2px; border-bottom: 1px solid var(--border-hair);
    transition: color .15s ease, padding-left .2s ease; }
  .navm__panel a:hover { color: var(--ember-hover); padding-left: 8px; }
  .navm__panel a:last-child { border-bottom: 0; }
}

/* — Tableaux d'instruments : survol braise — */
.ier-table tbody tr { transition: background .15s ease; }
.ier-table tbody tr:hover { background: rgba(229,93,43,.04); }
/* §13 — retouches art direction 2 (2026-07-12) */
/* Braises vivantes du hero */
.hx-hero { position: relative; }
.hx-hero__embers { position: absolute; inset: 0; pointer-events: none; z-index: 1; mix-blend-mode: screen; }

/* Cartes threads : numéral typographique (remplace les glyphes) */
.thread-card__no { font-family: var(--serif); font-weight: 300; font-size: 58px; line-height: .9;
  letter-spacing: -.02em; color: var(--text-4); margin: 16px 0 22px; font-feature-settings: "tnum" 1;
  transition: color .28s ease; }
.thread-card__no b { color: var(--ember); font-weight: 600; }
.thread-card:hover .thread-card__no { color: var(--text-2); }
.thread-card__glyph { display: none; }

/* Track record : « Prochain verdict » v2 */
.tr-next2 { position: relative; border: 1px solid var(--border-strong); border-left: 3px solid var(--ember);
  background: linear-gradient(135deg, rgba(229,93,43,.07), rgba(229,93,43,.015) 55%, transparent);
  padding: 34px 38px 30px; margin: 56px 0; }
.tr-next2__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 14px; }
.tr-next2__k { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ember); }
.tr-next2__count { font-family: var(--mono); font-size: 13px; letter-spacing: .1em; color: var(--ember);
  border: 1px solid rgba(229,93,43,.5); border-radius: 3px; padding: 4px 12px; font-feature-settings: "tnum" 1; }
.tr-next2__date { font-family: var(--serif); font-weight: 600; font-size: clamp(38px, 5.4vw, 62px);
  line-height: 1.02; color: var(--text); margin: 0 0 16px; text-wrap: balance; }
.tr-next2__title { font-family: var(--serif); font-size: clamp(19px, 2.4vw, 24px); color: var(--text);
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.tr-next2__title a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--border-strong); transition: border-color .18s ease; }
.tr-next2__title a:hover { border-color: var(--ember); }
.tr-next2__claim { font-size: 15px; line-height: 1.65; color: var(--text-2); max-width: 74ch; margin: 0 0 20px; }
.tr-next2__foot { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.tr-next2__odds { font-family: var(--mono); font-size: 13px; color: var(--text-2); }
.tr-next2__odds b { color: var(--ember); }
.tr-next2__read { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ember); text-decoration: none; }
.tr-next2__read:hover { color: var(--ember-hover); }
.tr-next2__cta { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
@media (max-width: 640px) { .tr-next2 { padding: 26px 22px 24px; } }