/* Hybrid A×B — éditorial letterpress × blueprint d'architecte */

@font-face { font-family: 'Fraunces'; src: url('../fonts/fraunces-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('../fonts/fraunces-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('../fonts/fraunces-semibold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('../fonts/fraunces-bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'PublicSans'; src: url('../fonts/publicsans-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'PublicSans'; src: url('../fonts/publicsans-medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'PublicSans'; src: url('../fonts/publicsans-semibold.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
  --paper:     #f6f3ec;
  --paper-2:   #efeadd;
  --paper-3:   #e6dfce;
  --ink:       #1c1a17;
  --ink-mid:   #5a544b;
  --ink-soft:  #8f887a;
  --rule:      #d8cfc0;
  --rule-2:    #b9b0a0;
  --accent:    #8a3a2a;   /* oxblood — numerals, key marks */
  --accent-2:  #1e4d66;   /* blueprint blue — diagram, measures */
  --danger:    #b14838;
  --grid-maj:  rgba(28, 26, 23, 0.07);
  --grid-min:  rgba(28, 26, 23, 0.035);
  --serif:     'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans:      'PublicSans', system-ui, -apple-system, sans-serif;
  --mono:      ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background:
    linear-gradient(var(--grid-min) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, var(--grid-min) 1px, transparent 1px) 0 0 / 16px 16px,
    var(--paper);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* ---------- masthead cartouche ------------------------------------------ */
.cartouche {
  position: fixed; top: 14px; left: 14px; right: 14px;
  z-index: 100;
  padding: 12px 22px;
  background: rgba(246, 243, 236, 0.92);
  border: 1.5px solid var(--ink);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.cartouche__brand { font-weight: 700; font-size: 12.5px; letter-spacing: 0.04em; color: var(--ink); text-decoration: none; }
.cartouche__brand em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); text-transform: none; letter-spacing: 0; font-size: 14px; margin-left: 6px; }
.cartouche__brand .short { display: none; }
.cartouche__nav { display: flex; gap: 22px; align-items: center; }
.cartouche__nav a {
  color: var(--ink-mid);
  text-decoration: none;
  padding-bottom: 2px;
  transition: color 0.2s;
}
.cartouche__nav a:hover { color: var(--ink); }
.cartouche__nav a.current { color: var(--accent); border-bottom: 1.5px solid var(--accent); }

/* lang-switch integrated into the cartouche */
.cartouche .lang-switch {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--ink-soft);
  font-size: 10px;
}
.cartouche .lang-switch__link {
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0 2px;
}
.cartouche .lang-switch__link:hover,
.cartouche .lang-switch__link[aria-current="true"],
.cartouche .lang-switch__link.is-active {
  color: var(--ink);
}
.cartouche .lang-switch__link + .lang-switch__link::before {
  content: '·';
  color: var(--ink-soft);
  margin-right: 6px;
}

@media (max-width: 780px) {
  .cartouche { padding: 8px 14px; grid-template-columns: 1fr; gap: 6px; }
  .cartouche__nav { gap: 12px; font-size: 10px; flex-wrap: wrap; }
  .cartouche__brand .full { display: none; }
  .cartouche__brand .short { display: inline; }
}

/* ---------- layout ------------------------------------------------------ */
main {
  padding-top: 100px;
  padding-bottom: 120px;
  max-width: 1240px;
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}
.rule       { border: 0; height: 0; background: transparent; margin: 92px 0; }
.rule--bold { border: 0; height: 0; background: transparent; margin: 104px 0 82px; }
.rule--double { border: 0; height: 0; background: transparent; margin: 104px 0 82px; }
.rule--gap-ix-x { margin: 156px 0 144px; }
.rule--gap-x-xi { margin: 148px 0 132px; }

/* ---------- hero -------------------------------------------------------- */
.hero {
  padding: 40px 0 24px;
}
.hero__ref {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mid);
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.hero__ref span::before { content: '—'; margin-right: 8px; color: var(--ink-soft); }
.hero__ref span:first-child::before { content: ''; margin-right: 0; }
.hero__ref .mark { color: var(--accent); }

.hero-title {
  font-family: var(--serif);
  font-size: clamp(3.5rem, 8vw + 1rem, 7.2rem);
  line-height: 0.92;
  font-weight: 600;
  letter-spacing: -0.035em;
  margin: 0 0 14px;
  color: var(--ink);
  font-feature-settings: "onum", "liga", "ss01";
}
.hero-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  display: block;
  font-size: 0.58em;
  margin-top: 0.1em;
}

.hero-subtitle {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.15rem, 1vw + 1rem, 1.6rem);
  color: var(--ink-mid);
  margin: 20px 0 48px;
  max-width: 720px;
  line-height: 1.45;
}

.hero__grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.hero__meta {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.8;
  color: var(--ink-mid);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.hero__meta .label {
  display: block;
  color: var(--ink-soft);
  margin-top: 12px;
  font-size: 9.5px;
  letter-spacing: 0.16em;
}
.hero__meta .label:first-child { margin-top: 0; }
.hero__meta strong { color: var(--ink); font-weight: 700; }

.hero-lead {
  font-size: 17.5px;
  line-height: 1.7;
  color: #2f2b25;
  max-width: 620px;
  margin: 0 0 14px;
}
.hero-lead em { font-family: var(--serif); }
.hero-lead code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--paper-2);
  padding: 1px 6px;
  border-radius: 2px;
}

/* chapter-tag (kept for i18n: "Le fil") — small eyebrow in the hero */
.hero .chapter-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}

/* ---------- planche (diagramme central) -------------------------------- */
.planche {
  margin: 72px 0 24px;
  background: rgba(255,255,255,0.55);
  border: 1.5px solid var(--ink);
  position: relative;
  padding: 28px 28px 22px;
}
.planche__tick {
  position: absolute; width: 14px; height: 14px;
  background: var(--accent-2);
  pointer-events: none;
}
.planche__tick--tl { top: -1px; left: -1px; }
.planche__tick--tr { top: -1px; right: -1px; }
.planche__tick--bl { bottom: -1px; left: -1px; }
.planche__tick--br { bottom: -1px; right: -1px; }

.planche__ref {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mid);
  margin-bottom: 18px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.planche__ref .mark { color: var(--accent-2); font-weight: 700; }

.planche__layers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--ink);
  border: 1px solid var(--ink);
  margin-bottom: 20px;
}
.planche__layer {
  background: #fff;
  padding: 14px 16px 16px;
}
.planche__layer .n {
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1;
}
.planche__layer .n.blue { color: var(--accent-2); }
.planche__layer .t {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  margin: 4px 0 2px;
  letter-spacing: -0.01em;
}
.planche__layer .s {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-mid);
}
.planche__dim {
  display: flex;
  align-items: center;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-mid);
}
.planche__dim .bar { flex: 1; height: 1px; background: var(--ink-mid); position: relative; }
.planche__dim .bar::before,
.planche__dim .bar::after {
  content: ''; position: absolute; top: -4px; width: 1px; height: 9px; background: var(--ink-mid);
}
.planche__dim .bar::before { left: 0; }
.planche__dim .bar::after  { right: 0; }
.planche__dim .label { padding: 0 14px; white-space: nowrap; }

/* ---------- chapter ----------------------------------------------------- */
.chapter {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  padding: 68px 0;
  align-items: start;
}
.chapter--hero { padding-top: 84px; }

.chapter__gutter { position: relative; }

/* Episode number — existing "Ép. I" text, rendered as editorial numeral */
.chapter-number {
  font-family: var(--serif);
  font-size: 56px;
  line-height: 0.9;
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}
.chapter--hero .chapter-number,
.chapter--flagship .chapter-number {
  font-size: 84px;
}

.chapter__tag {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.5;
  margin: 0;
}
.chapter__tag strong { color: var(--ink); font-weight: 700; display: block; margin-top: 2px; }

/* marginalia box — technical annotation */
.marginalia {
  margin-top: 24px;
  padding: 12px 14px;
  background: var(--paper-2);
  border-left: 2px solid var(--ink-soft);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink-mid);
}
.marginalia .head {
  color: var(--ink);
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}
.marginalia .head .dot {
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--accent);
  vertical-align: 1px;
  margin-right: 6px;
}

.chapter__body h2 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 1vw + 1.4rem, 2.3rem);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 18px;
}
.chapter__body h2 em { font-style: italic; font-weight: 400; color: var(--accent); }
.chapter__body p {
  font-size: 17px;
  line-height: 1.72;
  margin: 0 0 14px;
  color: #2a2520;
  text-wrap: pretty;
}
.chapter__body p em { font-family: var(--serif); }
.chapter__body p code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--paper-2);
  padding: 1px 6px;
  border-radius: 2px;
  color: var(--accent-2);
}

/* drop cap on flagship chapters */
.dropcap .chapter__body p:first-of-type::first-letter {
  font-family: var(--serif);
  font-size: 4.4em;
  line-height: 0.85;
  font-weight: 700;
  float: left;
  margin: 6px 10px 0 0;
  color: var(--ink);
}

/* pull quote (applied to existing <p class="pull">) */
.pull {
  margin: 28px 0 0;
  padding: 16px 0 16px 22px;
  border-left: 3px solid var(--accent);
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  color: var(--ink);
}
.pull::before { content: '«\00a0'; color: var(--accent); }
.pull::after  { content: '\00a0»'; color: var(--accent); }
.pull em { font-style: italic; }

/* blueprint-style call-out */
.callout-measure {
  display: flex;
  align-items: center;
  margin: 22px 0;
  padding: 10px 14px;
  background: rgba(30, 77, 102, 0.04);
  border: 1px dashed var(--accent-2);
  color: var(--accent-2);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
  gap: 12px;
}
.callout-measure .tag {
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.callout-threat {
  border-color: var(--danger);
  color: var(--danger);
  background: rgba(177, 72, 56, 0.04);
}

/* detail zoom — blueprint mini-diagram inside a chapter */
.detail {
  margin: 28px 0 4px;
  background: rgba(255,255,255,0.55);
  border: 1.5px solid var(--ink);
  padding: 22px 22px 18px;
  position: relative;
}
.detail__tick {
  position: absolute; width: 10px; height: 10px;
  background: var(--accent-2);
}
.detail__tick--tl { top: -1px; left: -1px; }
.detail__tick--br { bottom: -1px; right: -1px; }
.detail__ref {
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mid);
  margin-bottom: 14px;
}
.detail__ref .mark { color: var(--accent-2); font-weight: 700; }

.flow {
  display: flex; align-items: stretch; gap: 0;
  padding: 10px 0 4px;
  overflow-x: auto;
}
.flow__node {
  flex: 1 1 auto; min-width: 96px;
  border: 1px solid var(--ink);
  background: #fff;
  padding: 12px 10px 10px;
  text-align: center;
  position: relative;
}
.flow__node.hi { border: 2px solid var(--accent-2); background: rgba(30, 77, 102, 0.06); }
.flow__node.ghost { background: var(--paper-2); color: var(--ink-soft); }
.flow__node .lbl {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}
.flow__node.hi .lbl { color: var(--accent-2); }
.flow__node .sublbl {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-mid);
  margin-top: 2px;
}
.flow__arrow {
  flex: 0 0 22px;
  align-self: center;
  height: 2px;
  background: var(--ink);
  position: relative;
}
.flow__arrow::after {
  content: ''; position: absolute; right: -1px; top: -4px;
  width: 0; height: 0;
  border-left: 8px solid var(--ink);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

/* ---------- folio ------------------------------------------------------- */
.folio {
  font-family: var(--serif); font-style: italic;
  color: var(--ink-soft); text-align: center;
  font-size: 14px;
  padding: 40px 0 0;
}

/* ---------- footer ------------------------------------------------------ */
.site-footer {
  margin-top: 80px; padding: 32px 0 0;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
  border-top: 1px solid var(--ink);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mid);
}
.site-footer p { margin: 0; }
.site-footer p:first-child { font-weight: 700; color: var(--ink); }
.site-footer a { color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; }
.site-footer a:hover { border-bottom-color: var(--ink); }

/* ---------- reveal on scroll ------------------------------------------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- responsive -------------------------------------------------- */
@media (max-width: 820px) {
  main { padding-left: 18px; padding-right: 18px; padding-top: 110px; }
  .chapter { grid-template-columns: 1fr; gap: 18px; padding: 52px 0; }
  .rule--gap-ix-x { margin: 118px 0 108px; }
  .rule--gap-x-xi { margin: 112px 0 96px; }
  .chapter__gutter { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
  .chapter-number { font-size: 40px; margin: 0; }
  .chapter--hero .chapter-number,
  .chapter--flagship .chapter-number { font-size: 52px; }
  .hero__grid { grid-template-columns: 1fr; gap: 24px; }
  .planche__layers { grid-template-columns: repeat(2, 1fr); }
  .site-footer { grid-template-columns: 1fr; padding-left: 18px; padding-right: 18px; }
}