/* ============================================================
   Projet Prométhée — supplemental styles for the note body.
   Builds on styles.css (design tokens, fonts, header, footer,
   hero, preamble) reused from the Europe 2031 design system.
   ============================================================ */

/* --- Hero attribution line specific to a policy note --- */
/* ============================================================
   1950s GOVERNMENT-AGENCY REPORT TYPE SYSTEM
   Body: Courier Prime (typewriter, ragged-right, like a typed
   technical report / declassified memo).
   Headings & letterhead: Oswald (condensed gothic, set in caps),
   the mid-century "official cover / stamp" voice.
   ============================================================ */
/* Light scheme only (dark mode removed). */
html { color-scheme: light; }

:root {
  --font-serif: "Courier Prime", "Courier New", ui-monospace, monospace;
  --font-num: "Courier Prime", "Courier New", monospace;
  --font-mono: "Courier Prime", "Courier New", ui-monospace, monospace;
  --font-mono-cap: "Courier Prime", "Courier New", monospace;
  --font-mono-ch: "Courier Prime", "Courier New", monospace;
  --font-display: "Oswald", "Arial Narrow", "Helvetica Neue", sans-serif;
}

/* Letterhead / cover voice — condensed gothic, all caps */
.wordmark,
.footer-wordmark,
.hero-mark,
.part-head h2,
.note-toc-title,
.part-kicker {
  font-family: var(--font-display) !important;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 700;
}
.hero-mark {
  white-space: normal !important;
  font-size: clamp(46px, 5vw, 84px) !important;
  /* Enough leading that acute accents on capitals (É) clear the
     line above instead of merging with it. */
  line-height: 1.18 !important;
  letter-spacing: .015em !important;
  max-width: 12ch;
}
.part-head h2 { letter-spacing: .015em; }
.note-toc-title,
.part-kicker { letter-spacing: .12em; font-weight: 600; }

/* Typed body — Courier Prime, looser leading for legibility */
.note-article p,
.note-article li {
  font-size: 16px;
  line-height: 1.72;
  letter-spacing: 0;
}
.hero-sub {
  font-family: var(--font-serif) !important;
  font-size: clamp(17px, 1.8vw, 23px) !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
}
.hero-note { font-family: var(--font-serif); }
.hero-authors {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: .01em;
  color: var(--ink-soft);
  max-width: 540px;
}

/* ============================================================
   Résumé subpage — the abstract on its own tab, in an outlined box
   ============================================================ */
.resume-page {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 64px var(--gutter) 110px;
}
.resume-wrap {
  max-width: 820px;
  margin: 0 auto;
}
.resume-head { margin-bottom: 30px; }
.resume-kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue-700);
  margin: 0 0 14px;
}
.resume-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 700;
  font-size: clamp(40px, 5vw, 66px);
  line-height: 1.02;
  color: var(--ink);
  margin: 0 0 12px;
}
.resume-strap {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
.resume-box {
  border: 1px solid var(--ink);
  padding: 32px 38px;
}
.resume-box p {
  font-family: var(--font-serif);
  font-size: 16.5px;
  line-height: 1.8;
  letter-spacing: 0;
  color: var(--ink);
  margin: 0;
}
.resume-more {
  margin: 26px 0 0;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .04em;
}
.resume-more a { color: var(--blue-700); text-decoration: none; }
.resume-more a:hover { text-decoration: underline; }

/* Authors list (Les auteurs page) */
.authors-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.authors-list li {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.3;
  color: var(--ink);
  padding: 20px 2px;
  border-bottom: 1px solid var(--rule);
}

/* Placeholder for blank pages (Calculs) */
.page-placeholder {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--ink-soft);
  border: 1px dashed var(--mute);
  padding: 28px 32px;
  margin: 0;
}
.page-placeholder::before {
  content: "À VENIR";
  display: block;
  color: var(--blue-700);
  font-weight: 600;
  margin-bottom: 8px;
}

@media (max-width: 720px) {
  .resume-page { padding: 40px 22px 72px; }
  .resume-box { padding: 24px 22px; }
}

/* Typed subheadings — bold typewriter, underscored like a typed report */
.note-article h3 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

/* Tab-style nav labels in the gothic */
.nav-link,
.footer-nav a,
.lang-picker .label {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 500;
}

/* Tables read as a typed data appendix */
.note-table thead th { font-family: var(--font-display); letter-spacing: .06em; font-weight: 600; }

/* ============================================================
   COMPACT HERO  (overlap fix)
   The reference hero is a full-viewport block with a STICKY
   illustration, designed for a long scrolling preamble. This
   note has no such preamble, so that sticky image pinned itself
   and overlapped the article on scroll, and the 100vh min-height
   left a large empty band. Make the hero a normal, self-contained
   block and keep the article above it in the stacking order.
   ============================================================ */
.hero {
  align-items: center;
  padding-bottom: 64px;
}
.hero-title {
  min-height: 0 !important;
  justify-content: center !important;
  pointer-events: auto !important;
  will-change: auto !important;
  /* Kill the reference's scroll-driven "hero-pin" animation, which translated
     the title down as you scrolled (pinning it in place so the content rode up
     over it). We want plain scrolling: the content pushes the title up. */
  animation: none !important;
  transform: none !important;
}
.hero-illustration {
  position: static !important;
  top: auto !important;
  align-self: center !important;
  height: 320px !important;          /* mobile / stacked default */
}
.hero-illustration .hero-image {
  height: 100% !important;
  width: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  object-fit: contain;
  display: block;
}
/* Desktop hero. The decisive guarantee against the abstract overlapping is
   min-height on the hero CONTAINER: every browser honours it unconditionally,
   so the next block (the abstract) always starts at least this far down,
   regardless of how the artwork itself is sized. Below 1024px the base
   stylesheet stacks the hero, so leave it alone. */
@media (min-width: 1025px) {
  .hero {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 56px !important;
    /* Fill the first screen so the article/TOC sits below the fold on landing. */
    min-height: calc(100vh - 72px) !important;
  }
  .hero > .hero-title { flex: 1 1 46%; min-width: 0; }
  .hero > .hero-illustration { flex: 1 1 54%; min-width: 0; height: 520px !important; }
}
.note-layout {
  position: relative;
  z-index: 1;
  background: transparent;
}

/* ============================================================
   Tiled paper texture background (1950s report stock)
   ============================================================ */
body {
  background-color: var(--paper);
  background-image: url("/assets/paper-texture.webp");
  background-repeat: repeat;
  background-size: 520px auto;
  background-attachment: fixed;
}
/* Sticky header carries the same paper so content scrolls under it cleanly */
.site-header {
  background-color: var(--paper);
  background-image: url("/assets/paper-texture.webp");
  background-repeat: repeat;
  background-size: 520px auto;
  background-attachment: fixed;
}

.hero-kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue-700);
  margin: 0 0 18px;
}
.hero-note {
  margin-top: 16px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.4;
  color: var(--ink-soft);
  max-width: 540px;
}

/* --- Abstract / lead inside the preamble --- */
.preamble .lead p {
  font-size: 20px;
  line-height: 1.5;
}
.abstract-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 18px;
}

/* ============================================================
   Reading layout: sticky table of contents + article
   ============================================================ */
.note-layout {
  display: grid;
  grid-template-columns: var(--rail-right) minmax(0, 1fr);
  column-gap: var(--gutter);
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter) 40px;
}

.note-toc {
  position: sticky;
  top: 96px;
  align-self: start;
  max-height: calc(100vh - 120px);
  overflow: auto;
  padding-top: 8px;
}
.note-toc-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.note-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
}
.note-toc > ol > li { margin-bottom: 6px; }
.note-toc a {
  display: block;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.3;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 4px 0 4px 0;
  border-left: 2px solid transparent;
  padding-left: 14px;
  margin-left: -2px;
  transition: color .18s var(--ease-out), border-color .18s var(--ease-out);
}
.note-toc > ol > li > a { counter-increment: toc; }
.note-toc > ol > li > a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--mute);
  margin-right: 10px;
}
.note-toc a:hover { color: var(--ink); }
.note-toc a.is-active {
  color: var(--blue-700);
  border-left-color: var(--blue-700);
}
.note-toc .toc-sub a {
  font-size: 13.5px;
  padding-left: 36px;
  color: var(--mute);
}
.note-toc .toc-sub a::before { content: none; }
.note-toc .toc-sub a.is-active { color: var(--blue-700); }

/* ============================================================
   Article
   ============================================================ */
.note-article {
  max-width: 760px;
}
.note-article > section { scroll-margin-top: 110px; }

.part-head {
  margin: 72px 0 26px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.note-article > section:first-child .part-head { border-top: none; padding-top: 0; margin-top: 8px; }
.part-kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--blue-700);
  display: block;
  margin-bottom: 12px;
}
.part-head h2 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.06;
  letter-spacing: -.025em;
  color: var(--ink);
  margin: 0;
  max-width: 720px;
}
.note-article h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.14;
  letter-spacing: -.018em;
  color: var(--ink);
  margin: 48px 0 6px;
  max-width: 720px;
}
.note-article p {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.62;
  letter-spacing: -.001em;
  color: var(--ink);
  max-width: 720px;
  margin: 18px 0;
}
.note-article p em { font-style: italic; }
.note-article strong { font-weight: 700; }

/* --- Figures --- */
.figure {
  margin: 40px 0;
  max-width: 760px;
}
.figure img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--white);
}
html.dark .figure img { filter: brightness(.94); }
.figure figcaption {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: -.005em;
  color: var(--ink-soft);
  max-width: 680px;
}
.figure figcaption .fig-num {
  color: var(--blue-700);
  margin-right: 8px;
}

/* --- Equation callout --- */
.equation {
  margin: 32px 0;
  padding: 26px 30px;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-radius: 8px;
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: -.01em;
  color: var(--blue-800);
}

/* --- Pull quote (conclusion) --- */
.note-quote {
  margin: 44px 0;
  padding: 6px 0 6px 28px;
  border-left: 3px solid var(--blue-700);
  max-width: 720px;
}
.note-quote p {
  font-style: italic;
  color: var(--ink);
}
.note-quote cite {
  display: block;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink-soft);
}

/* --- Tables --- */
.table-wrap {
  margin: 36px 0;
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: 8px;
}
.note-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 720px;
  font-family: var(--font-serif);
  font-size: 14.5px;
  line-height: 1.45;
}
.note-table thead th {
  background: var(--blue-50);
  text-align: left;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--blue-800);
  padding: 14px 16px;
  border-bottom: 1px solid var(--blue-100);
  vertical-align: bottom;
}
.note-table tbody th {
  text-align: left;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.note-table td,
.note-table tbody th {
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  color: var(--ink);
}
.note-table tbody tr:last-child td,
.note-table tbody tr:last-child th { border-bottom: none; }
.note-table tbody tr:nth-child(even) td,
.note-table tbody tr:nth-child(even) th { background: rgba(0,0,0,.012); }
html.dark .note-table tbody tr:nth-child(even) td,
html.dark .note-table tbody tr:nth-child(even) th { background: rgba(255,255,255,.025); }

/* --- Draft / placeholder notes for unfinished sections --- */
.draft-note {
  margin: 22px 0;
  padding: 14px 18px;
  border: 1px dashed var(--mute);
  border-radius: 6px;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--ink-soft);
  max-width: 720px;
}
.draft-note::before {
  content: "À VENIR";
  display: inline-block;
  margin-right: 12px;
  color: var(--blue-700);
  font-weight: 600;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1040px) {
  .note-layout {
    grid-template-columns: 1fr;
  }
  .note-toc {
    position: static;
    max-height: none;
    margin-bottom: 40px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--rule);
  }
}
@media (max-width: 720px) {
  .note-layout { padding: 0 22px 32px; }
  .note-article p,
  .figure figcaption { font-size: 17px; }
  .equation { padding: 20px 18px; }
}