/* Bilingual contract for the whole site.
   French appears in exactly two roles: a body echo and a heading echo.
   One size rule each, so a French line always weighs the same next to
   English wherever it appears. Colours stay contextual (some sections sit on
   navy, some on paper, some on red) — only the scale is standardised here.

   Loaded last on every page so it wins the cascade. */

.fr-echo {
  margin-top: .6rem;
  font-size: .92em;          /* one ratio, everywhere */
  font-style: italic;
  color: var(--fr-ink);
  line-height: 1.56;
}

/* the echo of a heading — a real heading, never a caption */
.fr-echo--head {
  margin-top: .5rem;
  font-size: clamp(1.02rem, 1.8vw, 1.42rem);
  font-style: italic;
  font-weight: 400;
  color: var(--fr-ink);
  line-height: 1.4;
}

/* Display headings on this site are set between line-height .8 and .88, so the
   line box is shorter than the glyphs and descenders spill below it — the tail
   of a y or a g reaches roughly a fifth of the heading's own font size past the
   element. At .5rem the echo sat inside that spill and the descender struck
   through it. Every such heading here is a vw-based clamp, so a vw clearance
   tracks them at every breakpoint without a fixed number per size.

   Specified on h1/h2/h3 + .fr-echo--head rather than on .fr-echo--head alone,
   so paragraph echoes keep their .5rem and this only ever applies under a
   heading. */
h1 + .fr-echo--head,
h2 + .fr-echo--head,
h3 + .fr-echo--head { margin-top: clamp(1.05rem, 2.3vw, 2.6rem); }

/* Anything in French that is not one of the two echo classes — the quotation
   blocks, the room theses, the word-bank — still has to carry the marker.

   The colour is pinned rather than merely suggested, because this is the exact
   failure the stylesheet exists to prevent. Page stylesheets set colours on
   bare `p` inside containers — `.chapter-feature-copy p:not(.chapter-kicker)`
   is (0,2,1), `.route-list p` is (0,1,1) — and both out-specify `.fr-echo` at
   (0,1,0). When that happened the French quietly reverted to body colour and
   the two languages became indistinguishable, which is the one thing the
   reader must never have to guess at. Chasing specificity page by page only
   moves the problem, so the invariant is declared once, here.

   The value is still --fr-ink, set by the painted surface, so the correct
   colour for each background comes from one place. A local override is still
   possible, it just has to say so deliberately. */
[lang="fr"] { font-style: italic; color: var(--fr-ink) !important; }

/* The annex room index styles bare `span`s with the `font` shorthand, whose
   implied font-style: normal outranks the blanket rule above on specificity.
   That left the six French room names upright and the same near-white as their
   English partners, with nothing to mark where the English stopped. Restate
   the marker here — and on hover, where the card turns gold and a gold French
   would vanish into it, drop it to the red the room number uses. */
.room-index [lang="fr"] { font-style: italic; color: var(--fr-ink); }
.room-index a:hover [lang="fr"] { color: #7a2c2c !important; }

/* Echoes that live inside a display-scale line. They previously had no rule
   at all and rendered at full display weight, running straight into the
   English with no line break. */
.epoch-turn span,
.pressure-line span {
  display: block;
  margin-top: .8rem;
  font-size: .44em;
  line-height: 1.42;
  letter-spacing: -.01em;
}
.epoch-turn span { color: var(--fr-ink); }
.pressure-line span { color: var(--fr-ink); }

/* Bring the annex room thesis onto the same .44em scale as the other
   display-line echoes. */
.room-thesis span { font-size: .44em; }

/* ---------------------------------------------------------------------------
   Contextual corrections.

   The base rust colour belongs on paper. A few sections sit on navy, on red or
   inside a card, and need their own value; and a couple of containers set a
   font-size on bare `p`, which outranks a single-class heading echo.
   --------------------------------------------------------------------------- */

/* The hero sits on near-black navy. It is already on the dark-surface list
   below, so the token resolves correctly here — but restating it at this
   specificity is what stops a bare `p` rule inside .hero from out-specifying
   the marker. */
.hero .fr-echo,
.hero .fr-echo--head { color: var(--fr-ink); }

/* Quotation blocks take their colour from the blockquote itself, which is a
   rule the marker cannot out-specify. The French inside them is still French
   and still has to read as French. */
blockquote [lang="fr"],
blockquote[lang="fr"] { color: var(--fr-ink); }

/* card-scale headings get a compact echo, or it outweighs the title itself */
.press-grid .fr-echo--head,
.chapter-card .fr-echo--head { font-size: .96rem; margin-top: .35rem; }

/* containers that style bare `p` outrank `.fr-echo--head`; restate the size */
.track-card .fr-echo--head,
.pressure-card .fr-echo--head,
.balcescu-moment .fr-echo--head { font-size: clamp(1rem, 1.6vw, 1.28rem); }

/* a centred heading keeps its echo centred */
.opening > .fr-echo--head { max-width: 900px; margin-inline: auto; text-align: center; }

/* closing statements centre their echo too */
.chapter-closing > .fr-echo,
.chapter-closing > .fr-echo--head,
.annex-hero-copy > .fr-echo,
.annex-hero-copy > .fr-echo--head { max-width: 780px; margin-inline: auto; }

/* --- contextual colours -------------------------------------------------
   French is one voice on this site: always italic, always gold. What changes
   is the value, and it has to follow the surface it is painted on — the same
   gold that is legible on navy disappears on cream.

   The default is therefore the DARK gold, which is safe on paper, and every
   dark surface re-declares the light gold. Because this is a custom property,
   it inherits: anything new dropped into a dark section picks up the right
   colour without needing a rule of its own. Set the variable on the painted
   surface, never on the individual French element. */

:root { --fr-ink: #6f5211; }

/* on the deep red closing panel the gold has to be lighter still */
.art-closing { --fr-ink: #f4dc9a; }

/* --- surfaces that need the light gold ---
   Verified by measuring each section's own opaque background, not by eye:
   every selector below paints between #090c12 and #233249. The dark gold
   scores 1.5–2.6:1 on them, so they need the light one.

   Measure the section's own background. Several of these — .language-section,
   .crossroads, .room--maps — contain lighter inner blocks, and reading the
   lightest background found inside them will wrongly suggest they are paper.
   That mistake has already been made once here. */
.site-nav, .annex-nav,
.hero, .landing, .screen,
.manuc-hero, .annex-hero, .manuc-man, .manuc-treaty,
.chapter-hero, .chapter-split--ink, .chapter-essay--art,
.chapter-cards, .chapter-german,
.epoch--paris, .epoch--napoleon, .pressure, .language-section, .crossroads,
.frontier-map, .room-index, .room--language, .room--art, .room--maps,
.word-bank, footer
{ --fr-ink: #e0c68e; }

/* --- the landing page and routes are dark at the root, so they set it there --- */

/* --- apparatus: tiny uppercase labels, so the echo must be smaller --- */
.manuc-sources .fr-echo--head,
.sources .fr-echo--head,
.chapter-sources .fr-echo--head { font-size: .8rem; letter-spacing: .02em; }