/* ===========================================================================
   Plurimedia SAS — plurimedia.fr
   ---------------------------------------------------------------------------
   DESIGN DIRECTION: "la plaque" — a printing plate, not a platform page.

   What is shared with media-press.tv is the DNA, and only the DNA: the exact
   palette and the exact type stack from Media Press Design Tokens v3.0.1
   (`tokens.yaml` in the mp-website repo). Nothing else.

   How the deployment differs, deliberately:

     media-press.tv                  here
     ──────────────────────────────  ─────────────────────────────────────
     navy hero, paper bands below    paper everywhere; navy survives only in
                                     the footer colophon and the one screen
     nav bar                         masthead + dateline rule
     Garamond for display only       Garamond for BODY TEXT as well; Geist
                                     sans retreats to nothing but chrome
     pill buttons, sentence case     squared blocks, mono, uppercase
     centred section heads           full-measure rules with the § set on them
     radius 4 / 6 / 999              radius 0 on anything that gets pressed

   The single biggest signal is the body text: setting it in Garamond is what
   stops this reading as the group site's French tab. See docs/status.md.

   No build step and no JavaScript, by design.
   ======================================================================== */

/* ── Fonts ─────────────────────────────────────────────────────────────── */
/* Self-hosted (no third-party CDN: GDPR, and one less connection to open).
   Copied from @fontsource in the mp-website repo — same files the group site
   serves. Latin subset only: it covers French and English in full, œ/Œ too. */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/eb-garamond-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/eb-garamond-latin-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/geist-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/geist-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/geist-mono-latin-400-normal.woff2') format('woff2');
}

/* ── Tokens ────────────────────────────────────────────────────────────── */
/* Values are from tokens.yaml v3.0.1 and must not be edited here. */
:root {
  --paper: #f4f4f1;
  --paper-2: #eaeae5;
  --panel: #dcd8cb;

  --ink: #0a0e18;
  --ink-2: #3e4759;
  /* --dim is NOT used for text anywhere on this site. At the 10-11px mono
     sizes this design sets its labels in, #7B8294 on paper measures 3.49:1,
     under the 4.5:1 WCAG AA floor for small text; --ink-2 measures 8.47:1.
     Kept only so the palette stays a faithful copy of tokens.yaml. */
  --dim: #7b8294;

  --navy-900: #0c1424;
  --navy-800: #131c30;
  --navy-700: #1a2233;
  --navy-600: #243049;
  --navy-500: #34425e;
  --navy-200: #c9d0dd;

  --accent: #be0d18;
  --accent-2: #9d0814;
  --accent-wash: #f8e0e2;

  --rule: rgb(26 34 51 / 0.12);
  --rule-soft: rgb(26 34 51 / 0.06);
  --rule-on-dark: rgb(255 255 255 / 0.14);
  --rule-on-dark-soft: rgb(255 255 255 / 0.07);

  --font-display: 'EB Garamond', Garamond, 'Times New Roman', serif;
  --font-sans: 'Geist', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-mono: 'Geist Mono', 'IBM Plex Mono', ui-monospace, monospace;

  --beat: 1.4s;
  --fast: 150ms;
  --base: 200ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout — project-local, not from tokens.yaml. */
  --container: 1340px;
  --pad-x: clamp(18px, 3.4vw, 48px);
  --sec-y: clamp(56px, 6.5vw, 96px);
  --mast-h: 78px;

  /* The plate's two weights of rule. The heavy one is structural: it opens a
     section the way a broadsheet opens one. */
  --rule-heavy: 2px solid var(--ink);
  --rule-hair: 1px solid var(--rule);
}

/* ── Reset ─────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--mast-h) + 12px);
}

body {
  /* Garamond sets the body. This is the direction's load-bearing decision. */
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.58;
  color: var(--ink-2);
  background: var(--paper);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums;
}

img,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
ul,
ol {
  list-style: none;
}
strong {
  font-weight: 400;
  color: var(--ink);
  box-shadow: inset 0 -0.42em var(--accent-wash);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--accent);
  color: #fff;
  padding: 12px 20px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
}
.skip:focus {
  left: 0;
}

/* ── Primitives ────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* Mono is the whole label system: datelines, kickers, field names, IDs,
   captions, buttons. If it is not prose, it is set in mono. */
.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-variant-numeric: normal;
}

/* Red italic Garamond: the one thing kept untouched from the group site,
   because it is the family's strongest typographic signal. */
em {
  font-style: italic;
  color: var(--accent);
}
.on-dark em {
  color: #ff6671;
}

/* The heartbeat. Deliberately NOT gated behind prefers-reduced-motion: iOS
   Low Power Mode reports that preference and most phones run with it on,
   which would leave a "real time" claim next to a dead indicator. Project
   standard, same as mp-website. */
.dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  animation: beat var(--beat) var(--ease) infinite;
  flex: none;
}
@keyframes beat {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
    transform: scale(0.65);
  }
}

/* Buttons: squared blocks set in mono. Nothing rounded, nothing sentence
   case — the opposite of the group site's pills, on purpose. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-variant-numeric: normal;
  border: 1px solid transparent;
  border-radius: 0;
  transition: background var(--base) var(--ease), color var(--base) var(--ease),
    border-color var(--base) var(--ease);
}
.btn--red {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
}
.btn--red:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
}
.btn--ink {
  color: var(--ink);
  border-color: var(--ink);
}
.btn--ink:hover {
  background: var(--ink);
  color: var(--paper);
}
.btn--ghost-dark {
  color: var(--paper);
  border-color: var(--rule-on-dark);
}
.btn--ghost-dark:hover {
  border-color: var(--paper);
  background: rgb(255 255 255 / 0.06);
}

/* Inline link: a thick red rule that the text sits on. */
.lnk {
  color: var(--ink);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 100% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size var(--base) var(--ease), color var(--base) var(--ease);
}
.lnk:hover {
  background-size: 100% 100%;
  color: var(--paper);
}
.on-dark .lnk {
  color: var(--paper);
}
.on-dark .lnk:hover {
  color: var(--paper);
}

/* ── Logo ──────────────────────────────────────────────────────────────── */
/* Converted to SVG from the original Illustrator EPS, so the two inks sit on
   separate paths.
   An external SVG referenced by <img> is an isolated document that this
   stylesheet never reaches, so the inks are declared INSIDE each file and
   there are two of them: logo-plurimedia.svg for paper, and
   logo-plurimedia-inverted.svg for the navy colophon. Do not try to recolour
   the logo from here — it silently renders solid black. */
.logo {
  height: 42px;
  width: auto;
}

/* ── Masthead ──────────────────────────────────────────────────────────── */
/* Paper, not navy. Closed by a hairline over a 2px red rule, the way a
   front page closes its masthead. */
.mast {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 2px solid var(--accent);
  box-shadow: 0 -1px 0 var(--rule) inset;
}
.mast__row {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--mast-h);
  border-bottom: var(--rule-hair);
  margin-bottom: -1px;
}
.mast__logo {
  display: inline-flex;
  align-items: center;
  flex: none;
}
.mast__nav {
  display: flex;
  align-items: baseline;
  gap: 28px;
  margin-left: auto;
}
.mast__link {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.mast__link:hover {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
.mast__right {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: none;
  margin-left: auto;
}
.mast__nav + .mast__right {
  margin-left: 0;
}
.mast__lang {
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  padding-left: 18px;
  border-left: var(--rule-hair);
  color: var(--ink-2);
}
.mast__lang a {
  padding: 4px 6px;
  transition: color var(--fast) var(--ease);
}
.mast__lang a:hover {
  color: var(--ink);
}
.mast__lang a[aria-current='true'] {
  color: var(--paper);
  background: var(--ink);
}
.mast__cta {
  padding: 11px 20px;
}

/* Mobile: section links become a scrollable wire strip. No burger, no JS. */
.mast__strip {
  display: none;
}
@media (max-width: 1100px) {
  .mast__nav {
    display: none;
  }
  .mast__strip {
    display: block;
    /* Dark bar, light type: on phones this strip IS the navigation, so it
       needs to read as a bar rather than as a row of pale labels on paper. */
    background: var(--navy-900);
    border-top: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .mast__strip::-webkit-scrollbar {
    display: none;
  }
  .mast__strip ul {
    display: flex;
    gap: 22px;
    padding: 0 var(--pad-x);
    width: max-content;
  }
  .mast__strip a {
    display: block;
    padding: 13px 0;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgb(244 244 241 / 0.82);
    white-space: nowrap;
  }
  /* The red rule belongs under the masthead proper; with the dark strip
     below it, it would cut the two apart. */
  .mast {
    border-bottom: 0;
  }
  :root {
    --mast-h: 68px;
  }
  html {
    scroll-padding-top: 118px;
  }
}
@media (max-width: 580px) {
  .mast__cta {
    display: none;
  }
  .logo {
    height: 34px;
  }
}

/* ── Dateline ──────────────────────────────────────────────────────────── */
/* A masthead credits line, carrying no date on purpose: the site is static
   and has no JavaScript, so a printed date would go stale the next day. */
.dateline {
  border-bottom: var(--rule-hair);
}
.dateline__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 28px;
  padding: 13px 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-variant-numeric: normal;
}

@media (max-width: 760px) {
  /* M2: centred, and M3: no hairline. With the live indicator gone the row
     holds a single descriptor, which centres better than it ranges left. */
  .dateline {
    border-bottom: 0;
  }
  .dateline__row {
    justify-content: center;
    text-align: center;
    padding: 14px 0 4px;
  }
}
/* The dateline's live indicator was removed (the pulsing dot and "Mise à
   jour en continu"). The record card in the hero still carries its own
   "Live ingest" line, where a live signal is the actual subject. */

/* ── Front page ────────────────────────────────────────────────────────── */
.front {
  padding-top: clamp(28px, 3.4vw, 46px);
  /* Light, because .sec already opens with its own generous top padding. */
  padding-bottom: clamp(20px, 2.6vw, 38px);
}

/* Lead story left, picture right — a front page, not a poster. An earlier
   pass ran the headline across the full measure at up to 96px; it swallowed
   the viewport on its own and pushed the lede and the screen below the fold.
   Sizes here are set so the left column lands close to the screen's own
   height, which is what makes the two columns sit level. */
.front__grid {
  display: grid;
  /* The right column carries the record card, which is a dense two-column
     layout in its own right, so it gets the larger share. */
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: clamp(30px, 4vw, 62px);
  align-items: start;
}
.front__head {
  font-size: clamp(2.1rem, 3.7vw, 3.35rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.026em;
  color: var(--ink);
  text-wrap: balance;
}
/* The deck rule: a heavy rule between the headline and its lede, the way a
   broadsheet separates a lead from its standfirst. */
.front__rule {
  margin: clamp(20px, 2.4vw, 30px) 0 clamp(18px, 2.1vw, 26px);
  border: 0;
  border-top: var(--rule-heavy);
}
.front__lede {
  text-wrap: pretty;
  font-size: clamp(1.125rem, 1.3vw, 1.3125rem);
  line-height: 1.56;
  color: var(--ink-2);
}
/* Drop cap: the most literal plate device on the page, and the cheapest.
   Sized to span two lines of the lede. Garamond's cap height is ~0.66em, so
   the box is kept slightly under 2 line-boxes and nudged down to sit the cap
   on the first baseline. */
.front__lede::first-letter {
  float: left;
  font-size: 3.3em;
  line-height: 0.68;
  padding: 0.08em 0.07em 0 0;
  color: var(--accent);
}
.front__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px, 2.8vw, 34px);
}
/* Collapses at 1320px, which is where the two-column hero stops giving the
   record card a workable width.
   The arithmetic: the right column is (container - 2*padding - gap) / 1.82,
   and the container caps at 1340px, so the card tops out at ~652px and only
   reaches it at the very top of the range. At 1081px it was down to 522px,
   where the keyword chips need ~503px of height against the 470px the card
   allows. Rather than carry a fixed height per 100px of viewport, the hero
   goes single-column as soon as the card would be squeezed, and there the
   card gets the full container width instead. */
@media (max-width: 1320px) {
  .front__grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}

/* On phones the hero is nothing but type, so it is centred like the section
   openers below it. The drop cap goes: it is a floated ::first-letter, and a
   float inside centred text sits hard against the left edge with the lines
   wrapping around it, which reads as a mistake rather than as a device. The
   red accent is still carried by the headline's italic. */
@media (max-width: 760px) {
  .front__lead {
    text-align: center;
  }
  .front__lede::first-letter {
    float: none;
    font-size: inherit;
    line-height: inherit;
    padding: 0;
    color: inherit;
  }
  .front__actions {
    justify-content: center;
  }
}

/* ── Sections ──────────────────────────────────────────────────────────── */
.sec {
  /* Asymmetric: the rule that opens the NEXT section should sit closer to the
     content above it than the section head sits below its own rule. */
  padding-block: var(--sec-y) calc(var(--sec-y) * 0.52);
}
.sec--dark {
  background: var(--navy-900);
  color: var(--navy-200);
}

/* A section opens on a heavy rule with its § number and kicker set ON the
   rule, replacing the group site's centred heading block. */
.sec__open {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  /* Well clear of the rule: at 12px the eyebrow read as attached to it. */
  padding-top: 26px;
  border-top: var(--rule-heavy);
}
.sec--dark .sec__open {
  border-top-color: var(--paper);
}
.sec__num {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: var(--accent);
  flex: none;
  font-variant-numeric: normal;
}
.sec--dark .eyebrow {
  color: rgb(255 255 255 / 0.5);
}
/* Centred: the § opener, the heading and the standfirst form one centred
   block, while the rows and lists underneath stay left-aligned. The front
   page keeps its left-aligned lead, so the two registers stay distinct. */
.sec__head {
  margin-top: clamp(22px, 2.6vw, 34px);
  margin-inline: auto;
  text-align: center;
  max-width: 21ch;
  font-size: clamp(2rem, 4.3vw, 3.5rem);
  font-weight: 400;
  line-height: 1.07;
  letter-spacing: -0.024em;
  color: var(--ink);
  text-wrap: balance;
}
.sec--dark .sec__head {
  color: var(--paper);
}
.sec__lead {
  text-wrap: pretty;
  /* Wider than a reading measure on purpose: centred and short, 54ch made it
     a narrow stripe under a wide heading. */
  max-width: 68ch;
  margin-top: clamp(18px, 2vw, 26px);
  margin-inline: auto;
  text-align: center;
  font-size: clamp(1.2rem, 1.4vw, 1.375rem);
  line-height: 1.55;
  color: var(--ink-2);
}
.sec--dark .sec__lead {
  color: var(--navy-200);
}

/* ── Rows ──────────────────────────────────────────────────────────────── */
/* Rule-separated entries rather than cards: a card boxes every idea into an
   identical rectangle, a rule lets the content set its own length. */
.rows {
  margin-top: clamp(38px, 4.2vw, 60px);
  border-top: var(--rule-hair);
}
.sec--dark .rows,
.sec--dark .row {
  border-color: var(--rule-on-dark);
}
.row {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: clamp(14px, 2vw, 30px);
  padding-block: clamp(26px, 3vw, 38px);
  border-bottom: var(--rule-hair);
}
/* Divider rule for the whole page: a section OPENS on a rule, so nothing
   closes on one. The last entry in any list drops its bottom border, leaving
   a single line at every boundary instead of a hairline stacked under the
   next section's heavy rule. */
.row:last-child {
  border-bottom: 0;
}
.row__num {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--ink-2);
  padding-top: 0.6em;
  font-variant-numeric: normal;
}
.row__body {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(12px, 2.2vw, 34px);
  align-items: start;
}
.row__title {
  font-size: 1.85rem;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.sec--dark .row__title {
  color: var(--paper);
}
.row__txt {
  text-wrap: pretty;
  font-size: 1.1875rem;
  line-height: 1.58;
  color: var(--ink-2);
}
.sec--dark .row__txt {
  color: var(--navy-200);
}
.row__txt p + p {
  margin-top: 12px;
}
/* Field list: the metadata under an entry, mono and boxed in hairline. */
.row__fields {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 18px;
}
.row__field {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 9px;
  border: var(--rule-hair);
  color: var(--ink-2);
  font-variant-numeric: normal;
}
.sec--dark .row__field {
  border-color: var(--rule-on-dark);
  color: rgb(255 255 255 / 0.6);
}
@media (max-width: 760px) {
  .row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .row__num {
    padding-top: 0;
  }
  .row__body {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .row__title {
    font-size: 1.6rem;
  }
}

/* ── Two-column lists ──────────────────────────────────────────────────── */
.cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(38px, 4.2vw, 56px);
}
.cols__h {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: 14px;
  border-bottom: var(--rule-heavy);
  font-variant-numeric: normal;
}
.cols li {
  padding: 15px 0;
  border-bottom: var(--rule-hair);
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--ink-2);
}
/* See the divider rule above .row__num. */
.cols li:last-child {
  border-bottom: 0;
}
.cols li span {
  display: block;
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  line-height: 1.5;
  color: var(--ink-2);
  font-variant-numeric: normal;
}
@media (max-width: 760px) {
  .cols {
    grid-template-columns: 1fr;
  }
}

/* ── Crops ─────────────────────────────────────────────────────────────── */
/* Top-aligned on purpose: the differing heights ARE the point, so the row
   reads as one clean top edge stepping down through the ratios. */
.crops {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
  margin-top: clamp(28px, 3.2vw, 40px);
}
/* Hairline frame: without it a pale image sits on pale paper with no edge,
   which reads as an empty box rather than a picture. */
.crop figure {
  margin: 0;
  overflow: hidden;
  background: var(--panel);
  border: var(--rule-hair);
}
.crop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.crop--169 img {
  aspect-ratio: 16 / 9;
}
.crop--43 img {
  aspect-ratio: 4 / 3;
}
.crop--45 img {
  aspect-ratio: 4 / 5;
}
/* No rule above the caption: the figure's own frame already closes the
   picture, and the two lines 10px apart read as a doubled divider. */
.crop figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-variant-numeric: normal;
}
@media (max-width: 900px) {
  .crops {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Encadrés ──────────────────────────────────────────────────────────── */
/* The boxed sidebar of a newspaper: paper-2 fill, hairline frame, red rule
   across the top. Used for the group and TEMDG notes. */
.encadre {
  margin-top: clamp(30px, 3.4vw, 44px);
  padding: clamp(24px, 2.8vw, 38px);
  background: var(--paper-2);
  border: var(--rule-hair);
  border-top: 2px solid var(--accent);
}
.sec--dark .encadre {
  background: rgb(255 255 255 / 0.04);
  border-color: var(--rule-on-dark);
  border-top-color: var(--accent);
}
.encadre {
  text-align: center;
}
.encadre__h {
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin-bottom: 14px;
}
.sec--dark .encadre__h {
  color: var(--paper);
}
.encadre__txt {
  text-wrap: pretty;
  font-size: 1.125rem;
  line-height: 1.58;
  color: var(--ink-2);
  max-width: 72ch;
  margin-inline: auto;
}
.sec--dark .encadre__txt {
  color: var(--navy-200);
}
.encadre__txt p + p {
  margin-top: 13px;
}
.encadre__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

/* ── Contact ───────────────────────────────────────────────────────────── */
.contact {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(38px, 4.2vw, 56px);
  border-top: var(--rule-heavy);
}
.contact__cell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(24px, 2.8vw, 34px) clamp(18px, 2.2vw, 30px);
  border-left: var(--rule-hair);
  /* No bottom border: the colophon's red rule closes this section. See the
     divider rule above .row__num. */
}
.contact__cell:first-child {
  border-left: 0;
  padding-left: 0;
}
.contact__lbl {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-variant-numeric: normal;
}
.contact__addr {
  align-self: start;
  font-size: 1.3rem;
  line-height: 1.22;
  color: var(--ink);
  word-break: break-word;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 100% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 3px;
  transition: background-size var(--base) var(--ease), color var(--base) var(--ease);
}
.contact__addr:hover {
  background-size: 100% 100%;
  color: var(--paper);
}
.contact__note {
  text-wrap: pretty;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink-2);
}
@media (max-width: 860px) {
  .contact {
    grid-template-columns: 1fr;
  }
  .contact__cell {
    border-left: 0;
    padding-left: 0;
  }
}

/* ── Colophon ──────────────────────────────────────────────────────────── */
/* The footer is the one full navy band on the page: the colophon at the foot
   of the plate. */
.colophon {
  background: var(--navy-900);
  color: var(--navy-200);
  border-top: 2px solid var(--accent);
  padding-block: clamp(44px, 5vw, 68px) 30px;
}
.colophon__top {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 60px);
  padding-bottom: clamp(32px, 4vw, 46px);
  border-bottom: 1px solid var(--rule-on-dark);
}
.colophon__tag {
  text-wrap: pretty;
  margin-top: 20px;
  max-width: 34ch;
  font-size: 1.0625rem;
  line-height: 1.58;
}
.colophon__h {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.45);
  padding-bottom: 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--rule-on-dark);
  font-variant-numeric: normal;
}
.colophon__list li {
  padding: 7px 0;
  font-size: 1.0625rem;
}
.colophon__list a {
  transition: color var(--fast) var(--ease);
}
.colophon__list a:hover {
  color: var(--paper);
}
.colophon__bot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  padding-top: 24px;
  font-family: var(--font-mono);
  /* 10px at 0.4 alpha measured 3.81:1 on navy-900, under the AA floor. */
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.62);
  font-variant-numeric: normal;
}
@media (max-width: 780px) {
  .colophon__top {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}

/* ── Legal page ────────────────────────────────────────────────────────── */
.legal {
  padding-block: clamp(40px, 5vw, 72px);
}
.legal__body {
  max-width: 68ch;
}
/* The centred section opener belongs to the homepage sections. On the legal
   page the whole body is left-aligned prose, so a centred § over it reads as
   a mistake rather than as a device. */
.legal .sec__open {
  justify-content: flex-start;
}
.legal h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.026em;
  color: var(--ink);
  padding-top: 14px;
  border-top: var(--rule-heavy);
}
.legal h2 {
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin-top: 2em;
  padding-top: 18px;
  border-top: var(--rule-hair);
}
.legal p {
  text-wrap: pretty;
  margin-top: 15px;
  font-size: 1.1875rem;
  line-height: 1.62;
}
.legal code {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  background: var(--paper-2);
  border: var(--rule-hair);
  padding: 2px 6px;
  word-break: break-all;
  font-variant-numeric: normal;
}
/* Fields still awaiting confirmation from the client — see docs/status.md. */
.todo-flag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--accent-wash);
  border: 1px solid rgb(190 13 24 / 0.3);
  color: var(--accent-2);
  padding: 2px 7px;
  margin-left: 4px;
  vertical-align: 2px;
  font-variant-numeric: normal;
}

/* ── Print ─────────────────────────────────────────────────────────────── */
@media print {
  .mast,
  .dateline {
    display: none;
  }
  body {
    background: #fff;
  }
  .sec {
    padding-block: 22px;
  }
}