/* ============================================================
   SKEION — shared design system (every page of the site)
   Tone: a space agency annual report — large type, 1 px rules,
   mono metadata, captioned figures, a lot of negative space.
   Load order: site.css, then the page's own stylesheet (home.css on /).
   Guide: docs/build/13-design-system.md. One class = one component;
   states are .is-*; modifiers are --x. Standalone: no dependency on /style.css.
   ============================================================ */

/* ---------- Self-hosted fonts (same files and ranges as /style.css) ---------- */
@font-face {
  font-family: "Spline Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/spline-sans-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Spline Sans Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/fonts/spline-sans-mono-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  /* Symbols subset of the same family, loaded only where one is used: ∞ ≈ ⁴ ₂ (Google Fonts css2 &text=, 2 KB).
     The family has no → ⊕ ∝ ρ Ω (nor U+202F): the scenes draw → ⊕ ∝ themselves (assets/js/skeion-scenes.js). */
  font-family: "Spline Sans Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/fonts/spline-sans-mono-var-symbols.woff2") format("woff2");
  unicode-range: U+2074, U+2082, U+221E, U+2248;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/barlow-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/barlow-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/barlow-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  --bg: #0A081B;
  --bg-2: #091231;
  --ink: #F0FCFF;
  --ink-2: #BFC9D4;
  --ink-3: #7E8A9A;            /* 5.5:1 on --bg: the floor for small text */
  --teal: #2DDDB8;
  --cyan: #29DDDA;
  --blue: #37A7E7;
  --deep: #15B89A;
  --sev: #5BB4EC;              /* "severity" blue: errors and warnings, never red */
  --line: rgba(240, 252, 255, 0.1);
  --line-2: rgba(240, 252, 255, 0.18);
  --line-3: rgba(240, 252, 255, 0.38);   /* 3.4:1 on --bg: form field rules (WCAG 1.4.11) */
  --aurora: linear-gradient(100deg, #2DDDB8 0%, #29DDDA 42%, #37A7E7 96%);
  --rule: linear-gradient(90deg, rgba(45, 221, 184, 0.62), rgba(41, 221, 218, 0.2) 42%, rgba(41, 221, 218, 0));

  --f-display: "Spline Sans", ui-sans-serif, system-ui, sans-serif;
  --f-text: "Barlow", ui-sans-serif, system-ui, sans-serif;
  --f-mono: "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --gut: 16px;                 /* page gutter */
  --idx: 0px;                  /* margin column for the section numbers (desktop) */
  --maxw: 1240px;
  --hdr: 64px;                 /* header height */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}
@media (min-width: 600px) { :root { --gut: 24px; } }
@media (min-width: 1024px) { :root { --gut: 40px; --idx: 88px; --hdr: 76px; } }
@media (min-width: 1280px) { :root { --gut: 48px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; min-width: 320px; overflow-x: clip;
  background: var(--bg); color: var(--ink);
  font: 400 1rem/1.6 var(--f-text);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Grain (≈ 2.5 %) against banding in the large dark gradients */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}

img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p, h1, h2, h3, h4, dl, dd, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
em { font-style: italic; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: rgba(45, 221, 184, 0.32); color: var(--ink); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 2px; }
#main:focus { outline: none; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
html[lang="fr"] body { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; }
html[lang="fr"] .lead, .chain, .sources, .sk-readouts, .badge, .step-l, .person-r, .req-note, .ftr-cred, .support-l { hyphens: manual; -webkit-hyphens: manual; }
html[lang="fr"] .h1, html[lang="fr"] .h2, html[lang="fr"] .eyebrow, html[lang="fr"] .btn, html[lang="fr"] .ftr { hyphens: manual; -webkit-hyphens: manual; }

@view-transition { navigation: auto; }

.skip {
  position: fixed; left: 12px; top: 12px; z-index: 100; padding: 12px 18px; border-radius: 4px;
  background: var(--teal); color: var(--bg); font-weight: 600; text-decoration: none;
  transform: translateY(-160%); transition: transform 0.2s;
}
.skip:focus { transform: none; }

.wrap { width: min(100% - 2 * var(--gut), var(--maxw)); margin-inline: auto; position: relative; }

/* ---------- Type ---------- */
.eyebrow {
  font: 500 0.75rem/1.4 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal);
}
.h1 {
  font: 600 clamp(40px, calc(4.9vw + 21px), 92px)/1.02 var(--f-display);
  letter-spacing: -0.035em; color: var(--ink); margin: 18px 0 0;
}
.h2 {
  font: 600 clamp(28px, calc(1.7vw + 21px), 48px)/1.06 var(--f-display);
  letter-spacing: -0.028em; color: var(--ink); text-wrap: balance; max-width: 18ch;
}
.h2--wide { max-width: 24ch; }
.h2--xl { font-size: clamp(38px, calc(3.4vw + 22px), 72px); letter-spacing: -0.034em; line-height: 1.02; }
.body { font-size: clamp(16px, calc(0.23vw + 14.8px), 18px); line-height: 1.62; color: var(--ink-2); max-width: 62ch; text-wrap: pretty; }
.lead { font-size: clamp(17px, calc(0.45vw + 14.5px), 21px); line-height: 1.55; color: var(--ink-2); max-width: 54ch; text-wrap: pretty; }
.glow { background: var(--aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Hero title: one mask per word, revealed line by line (delays set per word in the markup) */
.h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.08em 0.02em 0.12em 0; margin: -0.08em -0.02em -0.12em 0; }
.h1 .w > span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .js .h1 .w > span { animation: word-rise 1s var(--ease) both; animation-delay: calc(var(--d, 0ms) + 60ms); }
}
@keyframes word-rise { from { transform: translateY(112%); } }

/* Section number: in the margin column (desktop), inline before the eyebrow (below 1024 px) */
.idx {
  font: 500 0.75rem/1 var(--f-mono); letter-spacing: 0.12em; color: var(--ink-3); font-variant-numeric: tabular-nums;
}

/* ---------- Buttons and links ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 22px; border-radius: 4px; overflow: hidden; isolation: isolate;
  font: 600 0.97rem/1.2 var(--f-text); letter-spacing: 0.01em; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}
/* No decorative arrow anywhere (design pass of 4 October 2026, docs/build/18-design-pass.md): a button is identified by
   its fill or its border, a link by its colour and its rule. Legacy markup that still carries an arrow icon hides it. */
.btn-arr { display: none; }
.btn-primary { background: var(--teal); color: var(--bg); }
.btn-ghost { color: var(--ink); border-color: var(--line-2); background: rgba(10, 8, 27, 0.35); }
.btn-sm { min-height: 44px; padding: 0 16px; font-size: 0.92rem; }
.btn-block { width: 100%; }
/* one light sweep per hover: pointer devices only */
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.34) 50%, transparent 80%);
}
.btn-ghost::after { background: linear-gradient(100deg, transparent 20%, rgba(45, 221, 184, 0.16) 50%, transparent 80%); }
@media (hover: hover) {
  .btn-primary:hover { background: #52E6C6; }
  .btn-ghost:hover { border-color: rgba(45, 221, 184, 0.6); }
  .btn:hover::after { transform: translateX(120%); transition: transform 0.8s var(--ease); }
}

/* A standalone link: teal text on a faint rule that is always there; on hover the rule traces itself in full colour
   from the left and the text lightens. 44 px hit area. */
.link {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 500 0.97rem/1.3 var(--f-text); color: var(--teal); text-decoration: none;
  background:
    linear-gradient(currentColor, currentColor) left calc(50% + 0.85em) / 0 1px no-repeat,
    linear-gradient(rgba(45, 221, 184, 0.4), rgba(45, 221, 184, 0.4)) left calc(50% + 0.85em) / 100% 1px no-repeat;
  transition: background-size 0.5s var(--ease), color 0.2s;
}
/* a link inside a sentence: underlined, larger hit area without changing the line */
.link--inline {
  display: inline; min-height: 0; padding: 10px 0; margin: -10px 0; white-space: nowrap; background: none;
  text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(45, 221, 184, 0.45); text-underline-offset: 3px;
}
@media (hover: hover) {
  .link:hover { background-size: 100% 1px, 100% 1px; color: #6FEBD0; }
  .link--inline:hover { background: none; text-decoration-color: currentColor; }
}
@media (prefers-reduced-motion: reduce) { .link { transition: none; } }

/* ---------- Invitation: a framed link to an immersive page (the journey, the guided scenario). Not a call to action (the
   filled button stays the pilot project): a still picture on the right, a label and a mono line. No arrow, nothing plays.
   Guide: docs/seo/06-bouton-experience.md ---------- */
.invites { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; max-width: 920px; }   /* auto-fill: a single invitation keeps the width of one column */
.invite {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; min-height: 96px;
  border: 1px solid var(--line-2); border-radius: 4px; background: var(--bg);
  color: var(--ink); text-decoration: none; transition: border-color 0.25s;
}
.invite-copy { position: relative; z-index: 1; display: grid; gap: 8px; max-width: 72%; padding: 18px 16px 18px 22px; }
.invite-l { font: 500 clamp(19px, calc(0.5vw + 15px), 23px)/1.2 var(--f-display); letter-spacing: -0.012em; color: var(--ink); transition: color 0.2s; }
.invite-m { display: grid; gap: 1px; font: 500 0.75rem/1.45 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.invite-media { position: absolute; inset: 0 0 0 auto; z-index: 0; width: 48%; }
.invite-media picture { display: block; height: 100%; }
.invite-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; transition: opacity 0.4s var(--ease), transform 0.8s var(--ease); }
/* the picture fades into the page colour under the text */
.invite-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 0%, rgba(10, 8, 27, 0.6) 40%, rgba(10, 8, 27, 0) 100%); }
/* one light sweep per hover, as on .btn-ghost */
.invite::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 20%, rgba(45, 221, 184, 0.12) 50%, transparent 80%);
}
@media (hover: hover) {
  .invite:hover { border-color: rgba(45, 221, 184, 0.6); }
  .invite:hover .invite-l { color: #6FEBD0; }
  .invite:hover .invite-media img { opacity: 0.85; transform: scale(1.03); }
  .invite:hover::after { transform: translateX(120%); transition: transform 0.8s var(--ease); }
}
.invite:focus-visible { border-radius: 4px; }   /* the global :focus-visible sets 2px */
.invite:active { border-color: var(--teal); }
html[lang="fr"] .invite { hyphens: manual; -webkit-hyphens: manual; }
@media (prefers-reduced-motion: reduce) {
  .invite, .invite-l, .invite-media img { transition: none; }
  .invite:hover .invite-media img { transform: none; }
  .invite::after { display: none; }
}
@media (max-width: 767px) {
  .invite { min-height: 84px; }
  .invite-copy { max-width: 70%; gap: 6px; padding: 16px 14px 16px 18px; }
  .invite-media { width: 50%; }
  .invite-media::after { background: linear-gradient(90deg, var(--bg) 0%, rgba(10, 8, 27, 0.78) 45%, rgba(10, 8, 27, 0.2) 100%); }
}
/* narrow phones: the longest mono lines (« FROM THE SUN TO POWER GRIDS », « SATELLITES OR POWER GRIDS ») stay on one line, so that
   the invitations side by side keep one height (the picture fades under the text anyway) */
@media (max-width: 480px) {
  .invite-copy { max-width: 84%; }
  .invite-m { letter-spacing: 0.04em; }
}

/* ---------- Lead invitation: the guided scenario (.invite--lead). Reserved to that one card (home, journey page): never on the
   journey card, never on a filled button. At rest the card has a fixed green border, firmer than the others' (this is also the
   whole state with JavaScript off, under reduced motion, and in an engine without the features below). When the card first
   reaches the screen, then on each hover or keyboard focus, site.js adds .is-orbiting: a light runs twice round the border,
   2 x 2.4 s = 4.8 s (under 5 s: no pause control needed, WCAG 2.2.2), then goes out and leaves the fixed border. It is a conic
   gradient whose start angle (--invite-a, a registered <angle> so that it can be animated) turns, seen through a 2 px ring
   mask. One pseudo-element, no canvas, no layout change, nothing for the SkeionMotion bus to arbitrate. The ring sits inside
   the 1 px border (the card clips its content to the padding box): its radius is the inner one, 3px. Guide: docs/build/43 ---------- */
@property --invite-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.invite--lead { border-color: rgba(45, 221, 184, 0.5); }
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) and (background: conic-gradient(from 0deg, red, blue)) {
  .invite--lead::before {
    content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
    padding: 2px; border-radius: 3px;
    background: conic-gradient(from var(--invite-a), transparent 0 55%, rgba(45, 221, 184, 0.18) 66%, #2DDDB8 93%, #C8FFF3 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;   /* only the 2 px between the content box and the border box stays visible */
  }
  @media (prefers-reduced-motion: no-preference) {
    .invite--lead.is-orbiting::before { animation: invite-orbit 2.4s linear 2, invite-glow 4.8s linear 1; }
  }
  @media (forced-colors: active) { .invite--lead::before { display: none; } }
}
@keyframes invite-orbit { to { --invite-a: 360deg; } }
@keyframes invite-glow { 0% { opacity: 0; } 5% { opacity: 1; } 95% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- Status badges (no pulsing) ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 8px; width: max-content; max-width: 100%;
  padding: 5px 11px 5px 9px; border-radius: 999px; border: 1px solid;
  font: 500 0.75rem/1.3 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; box-sizing: border-box; }
.badge--pub { color: var(--teal); border-color: rgba(45, 221, 184, 0.4); }
.badge--pub::before { background: var(--teal); }
.badge--early { color: var(--cyan); border-color: rgba(41, 221, 218, 0.4); }
.badge--early::before { border: 2px solid var(--cyan); background: radial-gradient(circle, var(--cyan) 35%, transparent 40%); }
.badge--dev { color: #6DBCEE; border-color: rgba(91, 180, 236, 0.4); border-style: dashed; }
.badge--dev::before { border: 1.5px dashed #6DBCEE; }

/* ---------- Rules (1 px, teal → transparent) that draw themselves ---------- */
.rule { display: block; height: 1px; background: var(--rule), rgba(240, 252, 255, 0.07); transform-origin: left center; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] .rule, .js .rule[data-reveal] { transform: scaleX(0); transition: transform 1.3s var(--ease); }
  .js [data-reveal].is-in .rule, .js .rule[data-reveal].is-in { transform: none; }
}
/* numbers that print themselves */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] .num, .js [data-reveal] .print { clip-path: inset(0 100% 0 0); }
  .js [data-reveal].is-in .num { animation: print 0.5s steps(2, end) 0.35s forwards; }
  .js [data-reveal].is-in .print { animation: print 0.9s steps(9, end) 0.25s forwards; }
}
@keyframes print { to { clip-path: inset(0 0 0 0); } }

/* ---------- Figures and captions ---------- */
.fig-cap {
  font: 400 0.75rem/1.55 var(--f-mono); letter-spacing: 0.04em; color: var(--ink-3);
  hyphens: manual; -webkit-hyphens: manual;
}
.fig-n { display: block; color: var(--ink-2); }
.fig-k { color: var(--ink-2); }
.fig-k::after { content: " \2014  "; }  /* " — " */
.fig-d { display: block; }
.fig-note { color: var(--ink-3); }

.motion-btn {
  display: inline-flex; align-items: center; gap: 9px; flex: none; min-height: 44px; padding: 0 14px 0 12px;
  border: 1px solid var(--line-2); border-radius: 999px; background: rgba(10, 8, 27, 0.6); cursor: pointer;
  font: 500 0.75rem/1 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2);
  transition: color 0.2s, border-color 0.2s;
}
.motion-btn::before { content: ""; width: 8px; height: 10px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; box-sizing: border-box; }
.motion-paused .motion-btn::before { width: 0; height: 0; border: 0; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.motion-btn .when-paused, .motion-paused .motion-btn .when-playing { display: none; }
.motion-paused .motion-btn .when-paused { display: inline; }
.motion-btn[hidden] { display: none; }
@media (hover: hover) { .motion-btn:hover { color: var(--ink); border-color: rgba(45, 221, 184, 0.55); } }
@media (prefers-reduced-motion: reduce) { .motion-btn { display: none; } }

/* ---------- Aurora curtains: very diffuse, slow drift (only one animation at a time: see main.js) ---------- */
.aurora {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 64%, transparent); mask-image: linear-gradient(180deg, transparent, #000 22%, #000 64%, transparent);
}
.aurora::before {
  content: ""; position: absolute; inset: -10% -20% 0; transform: skewX(-14deg);
  background:
    radial-gradient(9% 58% at 22% 0%, rgba(45, 221, 184, 0.11), transparent 72%),
    radial-gradient(7% 46% at 31% 0%, rgba(41, 221, 218, 0.08), transparent 72%),
    radial-gradient(12% 64% at 44% 0%, rgba(45, 221, 184, 0.06), transparent 74%),
    radial-gradient(8% 40% at 58% 0%, rgba(55, 167, 231, 0.07), transparent 72%),
    radial-gradient(40% 50% at 30% 0%, rgba(21, 184, 154, 0.07), transparent 70%);
}
.aurora[data-drift]::before { will-change: transform; animation: aurora-drift 56s ease-in-out infinite alternate; animation-play-state: paused; }
.aurora[data-drift].is-live::before { animation-play-state: running; }
@keyframes aurora-drift {
  0% { transform: skewX(-14deg) translate3d(-4%, 0, 0) scaleY(1); }
  50% { transform: skewX(-10deg) translate3d(2%, -2%, 0) scaleY(1.08); }
  100% { transform: skewX(-16deg) translate3d(6%, 0, 0) scaleY(0.96); }
}
@media (prefers-reduced-motion: reduce) { .aurora[data-drift]::before { animation: none; } }

/* ============================================================
   HEADER
   ============================================================ */
.hdr { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hdr); }
.hdr::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.35s;
  background: rgba(10, 8, 27, 0.95); border-bottom: 1px solid var(--line);   /* nearly opaque: text scrolling under the
     menu labels, the language switch or the logo must not blur them (review of 5 October 2026; was 0.82) */
  /* no backdrop-filter on purpose: a blurred backdrop re-computed under the animated canvases flickered (the translucency
     dropped out for a few frames). A plain translucent fill is composited once and never flickers. */
}
.hdr.is-scrolled::before, .hdr.is-open::before { opacity: 1; }
.hdr-in {
  position: relative; height: 100%; width: min(100% - 2 * var(--gut), var(--maxw)); margin-inline: auto;
  display: flex; align-items: center; gap: 16px;
}
.brand { display: inline-flex; align-items: center; gap: 9px; flex: none; min-height: 44px; text-decoration: none; margin-right: auto; }
.brand-mark { width: auto; height: 24px; }
.brand-word { width: auto; height: 12px; }
@media (min-width: 400px) { .brand-mark { height: 26px; } .brand-word { height: 13px; } }
@media (min-width: 1024px) { .brand-mark { height: 30px; } .brand-word { height: 15px; } .brand { gap: 11px; } }

.hdr-actions { display: flex; align-items: center; gap: 12px; flex: none; }

/* Language switch: two buttons, a pill that slides (driven by html[lang]) */
.lang { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line-2); border-radius: 999px; padding: 1px; }
.lang::before {
  content: ""; position: absolute; top: 1px; bottom: 1px; left: 1px; width: calc(50% - 1px); border-radius: 999px;
  background: rgba(45, 221, 184, 0.16); box-shadow: inset 0 0 0 1px rgba(45, 221, 184, 0.45);
  transition: transform 0.4s var(--ease);
}
html[lang="fr"] .lang::before { transform: translateX(100%); }
.lang-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; min-width: 44px; min-height: 44px; padding: 0 10px; border: 0; background: none; cursor: pointer;
  font: 500 0.75rem/1 var(--f-mono); letter-spacing: 0.12em; color: var(--ink-3); border-radius: 999px; transition: color 0.2s;
}
.lang-btn.active, .lang-btn[aria-current] { color: var(--ink); }
@media (hover: hover) { .lang-btn:hover { color: var(--ink); } }
.lang--menu { display: none; }

.menu-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: -8px;
  border: 0; background: none; cursor: pointer; color: var(--ink); border-radius: 4px;
}
.menu-ico { position: relative; width: 22px; height: 12px; }
.menu-ico span { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform 0.35s var(--ease), top 0.35s var(--ease); }
.menu-ico span:first-child { top: 0; }
.menu-ico span:last-child { top: 10.5px; }
.menu-btn[aria-expanded="true"] .menu-ico span:first-child { top: 5.25px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-ico span:last-child { top: 5.25px; transform: rotate(-45deg); }
.menu-btn .when-open, .menu-btn[aria-expanded="true"] .when-closed { display: none; }
.menu-btn[aria-expanded="true"] .when-open { display: inline; }

.nav-a { text-decoration: none; }
.hdr-cta { display: none; }

/* ----- Menu panel (< 1180 px) ----- */
@media (max-width: 1179px) {
  .nav {
    position: fixed; top: var(--hdr); left: 0; right: 0; height: calc(100dvh - var(--hdr)); overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; padding: 8px var(--gut) calc(24px + env(safe-area-inset-bottom));
    background: rgba(10, 8, 27, 0.985);
    visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path 0.5s var(--ease), visibility 0s 0.5s;
  }
  .hdr.is-open .nav { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path 0.5s var(--ease), visibility 0s; }
  .nav-list { width: min(100%, 640px); margin-inline: auto; }
  .nav-list li { border-bottom: 1px solid var(--line); }
  .nav-a {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px;
    font: 500 clamp(24px, 6vw, 30px)/1.1 var(--f-display); letter-spacing: -0.02em; color: var(--ink);
  }
  .nav-a[aria-current] { color: var(--teal); }
  .nav-ind { display: none; }
  .menu-foot { width: min(100%, 640px); margin: 28px auto 0; display: grid; gap: 16px; }
  .menu-foot .btn { min-height: 54px; }
}
@media (max-width: 1179px) and (prefers-reduced-motion: reduce) { .nav, .hdr.is-open .nav { transition: none; } }
/* Without JavaScript (js-flag.js adds .js before the first paint): the burger would do nothing, so it is removed and the
   navigation stays visible, on a second row of the header, which then scrolls with the page. */
@media (max-width: 1179px) {
  html:not(.js) .menu-btn { display: none; }
  html:not(.js) .hdr { position: relative; height: auto; }
  html:not(.js) .hdr::before { opacity: 1; }
  html:not(.js) .hdr-in { flex-wrap: wrap; height: auto; padding-block: 8px 0; }
  html:not(.js) .nav { position: static; order: 3; flex: 1 0 100%; height: auto; overflow: visible; padding: 0; background: none; visibility: visible; clip-path: none; transition: none; }
  html:not(.js) .nav-list { display: flex; flex-wrap: wrap; gap: 0 20px; width: auto; margin: 0; }
  html:not(.js) .nav-list li { border: 0; }
  html:not(.js) .nav-a { min-height: 44px; font: 500 0.97rem/1.2 var(--f-text); color: var(--ink-2); }
  html:not(.js) .menu-foot { width: auto; margin: 0; }
}

@media (min-width: 768px) { .hdr-cta { display: inline-flex; } .menu-foot .btn { display: none; } }
@media (max-width: 359px) { .lang--hdr { display: none; } .lang--menu { display: inline-grid; justify-self: start; } .lang--menu .lang-btn { min-height: 44px; min-width: 56px; } }

/* ----- Full navigation (≥ 1180 px) ----- */
@media (min-width: 1180px) {
  .menu-btn, .menu-foot { display: none; }
  .nav { position: relative; margin-right: 8px; }
  .nav-list { display: flex; align-items: center; gap: 4px; }
  .nav-a {
    position: relative; display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 12px;
    font: 500 0.95rem/1 var(--f-text); color: var(--ink-2); transition: color 0.2s;
  }
  .nav-a:hover, .nav-a[aria-current] { color: var(--ink); }
  /* active underline: one element that slides (width and position) */
  .nav-ind {
    position: absolute; left: 0; bottom: 4px; height: 1.5px; width: 10px; border-radius: 2px; background: var(--aurora);
    opacity: 0; transform-origin: left center; transition: transform 0.5s var(--ease), width 0.5s var(--ease), opacity 0.3s;
  }
  .nav-ind.is-on { opacity: 1; }
}

/* ============================================================
   SECTIONS
   ============================================================ */
/* Vertical rhythm: 56 px on phones, ≈ 88 px at 1440, 96 px at most (design pass of 4 October 2026, tightened after the
   review of the same day, docs/build/19-review-fixes.md: the bands and their hairlines carry the separation). */
.sec { position: relative; isolation: isolate; padding: clamp(56px, calc(3.2vw + 42px), 96px) 0; }
/* Bands: sections alternate the page background (--bg) and a deeper blue band (--bg-2) edged by hairlines, so that
   each section reads as one unit. .sec--deep is a very soft gradient, for a pause between two dense sections. */
.sec--tint { background: var(--bg-2); border-block: 1px solid var(--line); }
.sec--deep { background: linear-gradient(180deg, var(--bg) 0%, #0B1129 38%, #0B1129 62%, var(--bg) 100%); }
/* Section head on one line, like a report: number in the margin column · eyebrow · rule that draws to the edge.
   No column gap: the eyebrow starts exactly where the titles and the copy start (the --idx column). */
.sec-head { display: grid; grid-template-columns: var(--idx) auto minmax(24px, 1fr); align-items: center; column-gap: 0; margin-bottom: clamp(28px, 2.6vw, 40px); }
.sec-head .idx { grid-column: 1; grid-row: 1; }
.sec-head .eyebrow { grid-column: 2; grid-row: 1; }
.sec-head .rule { grid-column: 3; grid-row: 1; margin-left: 20px; }
.sec-head--sub { margin-bottom: 22px; }
@media (max-width: 1023px) {
  /* no margin column: the number sits inline, before the eyebrow */
  .sec-head { grid-template-columns: auto auto minmax(20px, 1fr); }
  .sec-head .idx { margin-right: 12px; }
  .sec-head .rule { margin-left: 12px; }
}
.sec-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; padding-left: var(--idx); }
.sec-grid > * { grid-column: 1 / -1; min-width: 0; }
.h2 + .body { margin-top: 24px; }
.note {
  position: relative; padding-left: 40px; max-width: 62ch;
  font-size: 1rem; line-height: 1.55; color: var(--ink-2);
}
.note::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 26px; height: 1px; background: var(--teal); }

/* ---------- Stats: facts as the rows of a small table, then the sources line ---------- */
.stats { display: grid; gap: 0; }
.stat {
  display: grid; grid-template-columns: minmax(0, 9.6rem) minmax(0, 1fr); column-gap: 20px; align-items: baseline;
  padding: 12px 0 13px; border-top: 1px solid var(--line);
}
.stat-v {
  font: 400 clamp(22px, 1.75vw, 27px)/1.1 var(--f-mono); letter-spacing: -0.03em; color: var(--ink); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.stat-v .print { display: inline-block; }
.stat dd { font-size: 0.95rem; line-height: 1.5; color: var(--ink-2); max-width: 44ch; }
.sources { padding-top: 12px; border-top: 1px solid var(--line); font: 400 0.75rem/1.6 var(--f-mono); letter-spacing: 0.03em; color: var(--ink-3); }
.sources a { color: var(--ink-2); text-underline-offset: 2px; text-decoration-thickness: 1px; padding: 12px 0; margin: -12px 0; }   /* inline: a taller hit area, same line */
@media (hover: hover) { .sources a:hover { color: var(--teal); } }

/* ---------- Key facts: three large figures side by side, each under its own rule (then .sources) ---------- */
.keyfacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(28px, 3vw, 48px); padding-left: var(--idx); margin-top: clamp(32px, 3.2vw, 52px); }
.keyfact { display: flex; flex-direction: column; gap: 14px; padding-top: 22px; border-top: 1px solid var(--line-2); min-width: 0; }
.keyfact-v { font: 500 clamp(34px, calc(1.5vw + 22px), 50px)/1 var(--f-display); letter-spacing: -0.03em; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.keyfact-v .print { display: inline-block; }
.keyfact dd { font-size: 1rem; line-height: 1.5; color: var(--ink-2); max-width: 34ch; }
.keyfacts + .sources { margin: 28px 0 0 var(--idx); padding-top: 0; border-top: 0; max-width: 120ch; }
@media (max-width: 1023px) { .keyfacts + .sources { margin-left: 0; } }
@media (max-width: 767px) {
  .keyfacts { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 32px; }
  .keyfact { gap: 8px; padding: 18px 0 20px; }
  .keyfact-v { font-size: 2rem; }
  .keyfact dd { font-size: 0.95rem; max-width: 44ch; }
}

/* ---------- Plate: a still figure (capture, scene poster, diagram) in a hairline frame, then its caption ---------- */
.plate { min-width: 0; }
.plate-img { position: relative; overflow: hidden; border-radius: 3px; background: var(--bg); }
.plate-img::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--line); border-radius: inherit; pointer-events: none; }
.plate-img img, .plate-img svg { width: 100%; height: auto; }
.plate > .fig-cap { margin-top: 12px; }
/* --capture: a real screen capture, usually much brighter than the drawn figures; a soft shade on two edges evens out a row */
.plate--capture .plate-img::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(10, 8, 27, 0.4), transparent 22%), linear-gradient(0deg, rgba(10, 8, 27, 0.45), transparent 30%);
}

/* ---------- Scene figure (SkeionScenes): the band, then caption (left) and model values (right);
   pause control under the caption (outside the canvas). The poster of each scene is declared by the page. ---------- */
.fig--scene {
  position: relative; margin-top: clamp(32px, 2.6vw, 38px); padding-left: var(--idx);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; align-items: start;
}
.fig--scene > .sk-stage { grid-column: 1 / -1; grid-row: 1; }
.fig--scene .sk-stage {
  /* 4:1 at most: sun-earth was validated up to 1120 × 280; wider bands end its magnetotail before the edge */
  position: relative; width: 100%; aspect-ratio: 4 / 1; background-color: var(--bg); overflow: hidden;
  background-size: cover; background-position: center;
}
.fig--scene.is-near .sk-stage, html:not(.js) .fig--scene .sk-stage { background-image: var(--poster); }
.fig--scene .sk-stage::before, .fig--scene .sk-stage::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; z-index: 2; pointer-events: none; background: var(--line); }
.fig--scene .sk-stage::before { top: 0; }
.fig--scene .sk-stage::after { bottom: 0; }
.fig--scene canvas { width: 100%; height: 100%; }
.fig--scene > .fig-cap { margin-top: 14px; max-width: 78ch; }
.fig--scene > figcaption { grid-column: 1; grid-row: 2; }
.fig--scene > .sk-readouts { grid-column: 2; grid-row: 2; }
.fig--scene > .fig-note { grid-column: 2; grid-row: 3; margin-top: 10px; }
/* The pause control sits under the band, below the caption: never over the canvas, where the scenes draw their own labels */
.fig--scene > .motion-btn--fig { grid-column: 1; grid-row: 3; justify-self: start; align-self: start; margin-top: 14px; }
.sk-readouts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 20px; margin-top: 14px; }
/* label on top, value at the bottom: values stay on one line even when a label wraps */
.sk-readouts > div { display: grid; grid-template-rows: 1fr auto; border-top: 1px solid var(--line); padding-top: 10px; min-width: 0; }
.sk-readouts dt { font: 400 0.75rem/1.4 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.sk-readouts .nc { text-transform: none; letter-spacing: 0.02em; }  /* physics notation keeps its case: Bz */
.sk-readouts sub { font-size: 0.85em; line-height: 0; vertical-align: -0.25em; }
.sk-readouts dd { margin-top: 4px; font: 400 1.05rem/1.3 var(--f-mono); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Steps: a chain of rules, one per step ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 28px; padding-left: var(--idx); margin-top: clamp(30px, 2.6vw, 40px); }
.step { display: flex; flex-direction: column; gap: 12px; }
.step .rule { position: relative; margin-bottom: 8px; }
.step-l { font: 500 0.75rem/1.3 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); }
.step-t { font-size: 1.06rem; line-height: 1.5; color: var(--ink); max-width: 30ch; }
.step .badge { margin-top: auto; }
.step:first-child .step-t { margin-bottom: auto; }
@media (max-width: 1023px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
}
@media (max-width: 599px) {
  .steps { grid-template-columns: 1fr; gap: 24px; }
  .step .badge { margin-top: 2px; }
}

/* ---------- Rows: an editorial list, no cards (classes kept from the home: .sectors > .sector) ---------- */
.sectors { margin-top: clamp(30px, 2.6vw, 40px); }
/* each row sits on the same 12-column grid as the section copy; its letter hangs in the margin column */
.sector {
  position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 8px;
  padding: 16px 0 16px var(--idx);
}
.sector > .rule { position: absolute; top: 0; left: 0; right: 0; }
.sector:last-child { border-bottom: 1px solid var(--line); }
.sector-n { position: absolute; left: 0; top: 20px; font: 500 0.75rem/1.4 var(--f-mono); letter-spacing: 0.12em; color: var(--ink-3); transition: color 0.3s; }
.sector-t { grid-column: 1 / span 5; font: 500 clamp(19px, calc(0.5vw + 15px), 23px)/1.25 var(--f-display); letter-spacing: -0.012em; color: var(--ink); padding-right: 12px; }
.sector-d { grid-column: 6 / -1; }
.sector-b { font-size: 1rem; line-height: 1.55; color: var(--ink-2); max-width: 78ch; }
/* Causal chain: an ordered list read left to right, the steps joined by short rules (no arrow glyph); give the <ol> an
   aria-label ("Causal chain"). */
.chain { display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; margin-top: 6px; font: 400 0.75rem/1.7 var(--f-mono); letter-spacing: 0.02em; color: #8FE6D2; }
.chain > li { display: inline-flex; align-items: center; }
.chain > li:not(:last-child)::after { content: ""; flex: none; width: 18px; height: 1px; margin: 0 10px; background: rgba(45, 221, 184, 0.55); }   /* a wrapped line ends on the joint */
.sector .link { position: relative; z-index: 2; margin-top: 2px; min-height: 44px; }   /* a secondary link stays above the stretched row link */
/* Linked rows: the title carries the link (underlined by a faint rule, full colour on hover); its ::after stretches over
   the whole row, so the row is the target and the keyboard ring surrounds the row (use-cases overview). */
.sector-t a {
  color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(45, 221, 184, 0.4); text-underline-offset: 6px;
  transition: color 0.25s, text-decoration-color 0.25s;
}
.sector-t a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 2px; }
.sector-t a:focus-visible { outline: none; }
.sector-t a:focus-visible::after { outline: 2px solid var(--teal); outline-offset: 2px; }
/* pointer spotlight on the row (hover devices only) */
@media (hover: hover) and (min-width: 1024px) {
  .sector::before {
    content: ""; position: absolute; inset: 0 -24px; z-index: -1; opacity: 0; transition: opacity 0.4s; pointer-events: none;
    background: radial-gradient(420px 160px at var(--mx, 30%) var(--my, 50%), rgba(45, 221, 184, 0.07), transparent 70%);
  }
  .sector:hover::before { opacity: 1; }
}
@media (hover: hover) {
  .sector:hover .sector-n { color: var(--teal); }
  .sector:hover .sector-t a { color: var(--teal); text-decoration-color: currentColor; }
}
@media (max-width: 1023px) {
  /* one column; the letter moves to the right end of the title line */
  .sector { grid-template-columns: minmax(0, 1fr); padding: 16px 0 18px; }
  .sector-n { left: auto; right: 0; top: 20px; }
  .sector-t, .sector-d { grid-column: 1; padding-right: 28px; }
  .sector-d { padding-right: 0; }
}

/* ---------- Covers: a pair of journal covers ---------- */
.covers { display: flex; gap: 16px; align-items: flex-start; }
.covers picture { flex: 1 1 0; max-width: 180px; }
.covers picture:last-child { margin-top: 28px; }
.covers img { width: 100%; border-radius: 2px; box-shadow: 0 20px 44px -18px rgba(0, 0, 0, 0.8); outline: 1px solid rgba(240, 252, 255, 0.1); outline-offset: -1px; }
.fig--covers .fig-cap { margin-top: 16px; }

/* ---------- Person, and Support block (partner logos) ---------- */
.person { border-top: 1px solid var(--line); padding-top: 18px; }
.person-n { font: 500 1.45rem/1.2 var(--f-display); letter-spacing: -0.015em; }
.person-r { margin-top: 8px; font: 500 0.75rem/1.45 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); }
.person-b { margin-top: 12px; font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
.support { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.support-l { font: 500 0.75rem/1.3 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.support-logos { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; text-decoration: none; border-radius: 2px; }
.support-logos .logo-cnrs { height: 44px; }
.support-logos .logo-rise { height: 23px; }
.support-t { font-size: 0.95rem; line-height: 1.5; color: var(--ink-2); max-width: 44ch; }
.support-t a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; padding: 12px 0; margin: -12px 0; }
@media (hover: hover) { .support-t a:hover { color: var(--teal); } }

/* ---------- Partner logos ---------- */
.logo-cnrs { width: auto; height: 42px; }
.logo-rise { width: auto; height: 22px; }
.logos-sep { width: 1px; align-self: stretch; margin: 6px 0; background: var(--line-2); }

/* ---------- Framed screenshot ---------- */
.ax-frame {
  position: relative; padding: 1px; border-radius: 6px;
  background: linear-gradient(140deg, rgba(45, 221, 184, 0.55), rgba(41, 221, 218, 0.12) 38%, rgba(240, 252, 255, 0.06) 70%, rgba(55, 167, 231, 0.3));
  box-shadow: 0 40px 90px -40px rgba(41, 221, 218, 0.28);
}
.ax-frame img { width: 100%; border-radius: 5px; }
.ax-frame::after {
  content: ""; position: absolute; inset: 1px; border-radius: 5px; pointer-events: none;
  background: linear-gradient(90deg, rgba(10, 8, 27, 0.55), transparent 16%), linear-gradient(0deg, rgba(10, 8, 27, 0.35), transparent 22%);
}

/* ---------- Form ---------- */
.form { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 28px; }
.form > * { grid-column: 1 / -1; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.req-note { font: 400 0.75rem/1.4 var(--f-mono); letter-spacing: 0.06em; color: var(--ink-3); margin-bottom: 4px; }
.req { color: var(--teal); }
/* name · organisation, then email · topic, side by side from 600 px */
@media (min-width: 600px) {
  .form .field:nth-of-type(-n+4) { grid-column: span 1; }
}
.field { position: relative; }
.input {
  display: block; width: 100%; min-height: 58px; padding: 26px 0 8px; border: 0; border-radius: 0;
  border-bottom: 1px solid var(--line-3); background: transparent; color: var(--ink);
  font: 400 1.06rem/1.4 var(--f-text); outline: none; transition: border-color 0.25s;
  -webkit-appearance: none; appearance: none;
}
.input::placeholder { color: transparent; transition: color 0.2s; }
.input:focus::placeholder { color: rgba(126, 138, 154, 0.9); }
textarea.input { min-height: 92px; resize: vertical; line-height: 1.5; }
.field label {
  position: absolute; left: 0; top: 8px; pointer-events: none; transform-origin: left top;
  font: 500 0.75rem/1.3 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
  transition: transform 0.3s var(--ease), color 0.25s;
}
/* resting label sits in the empty field; it floats up on focus or once filled */
.field:has(.input:placeholder-shown:not(:focus)) label { transform: translateY(22px) scale(1.18); }
.field:focus-within label { color: var(--teal); }
.field::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--aurora);
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease);
}
.field:focus-within::after { transform: none; }
.field--select .input {
  padding-right: 32px; cursor: pointer;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%237E8A9A' stroke-width='1.4' stroke-linecap='round'/></svg>") right 4px center / 14px no-repeat;
}
.field--select option { background: var(--bg); color: var(--ink); }
.input:-webkit-autofill, .input:-webkit-autofill:hover, .input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink); -webkit-box-shadow: 0 0 0 1000px var(--bg) inset; caret-color: var(--ink);
}
.input[aria-invalid="true"] { border-bottom-color: var(--sev); }
.field-error { display: flex; align-items: center; gap: 8px; margin-top: 8px; font: 400 0.75rem/1.4 var(--f-mono); color: var(--sev); }
.field-error::before { content: "!"; display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none; border: 1px solid currentColor; border-radius: 50%; font-size: 0.75rem; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 20px; }
.btn-submit { min-width: 210px; }
.btn-check { display: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; }
.submit-busy { display: none; }
.form.is-sending .submit-l { display: none; }
.form.is-sending .submit-busy { display: inline; }
.form.is-sending .btn-submit { opacity: 0.72; cursor: progress; }
.form.is-sent .btn-arr { display: none; }
.form.is-sent .btn-check { display: block; animation: draw 0.6s var(--ease) 0.1s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .form.is-sent .btn-check { animation: none; stroke-dashoffset: 0; } }
.form-status { flex: 1 1 240px; font-size: 0.95rem; line-height: 1.45; color: var(--ink-2); }
.form-status.is-success { color: var(--teal); }
.form-status.is-error { color: var(--sev); }
.form-status a { color: inherit; text-underline-offset: 3px; }
.privacy { margin-top: 14px; font-size: 0.85rem; line-height: 1.5; color: var(--ink-3); max-width: 60ch; }
.privacy a { color: var(--ink-2); text-underline-offset: 3px; display: inline-block; padding: 14px 0; margin: -14px 0; }
@media (hover: hover) { .privacy a:hover { color: var(--teal); } }

/* ---------- Sign-up band: the launch list (Brevo), docs/build/25-newsletter.md ----------
   A quiet band at the bottom of a page, before the footer: one title, one sentence, one field, one consent box, one
   secondary (bordered) button: never a filled one, the page's call to action stays the pilot project. Reuses .field,
   .input, .field-error and .hp of the contact form. Markup: tools/partials/newsletter.html. States set by
   assets/site/newsletter.js: .is-sending, .is-done (form sent), .is-confirmed (back from the confirmation link). */
.nl { position: relative; padding: clamp(44px, calc(1.6vw + 34px), 64px) 0; border-top: 1px solid var(--line); }
.nl[hidden] { display: none; }
.nl-grid { display: grid; gap: 22px 24px; padding-left: var(--idx); }
@media (min-width: 1024px) {
  .nl-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .nl-copy { grid-column: 1 / span 5; }
  .nl-main { grid-column: 7 / -1; }
}
.nl-t { font: 500 clamp(20px, calc(0.5vw + 16.5px), 26px)/1.25 var(--f-display); letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; max-width: 28ch; }
.nl-d { margin-top: 10px; font-size: 0.97rem; line-height: 1.55; color: var(--ink-2); max-width: 50ch; text-wrap: pretty; }
/* field and button on one line; the button's bottom meets the field's rule (58 px field, 50 px button) */
.nl-row { display: flex; align-items: flex-start; gap: 12px 20px; }
.nl-row .field { flex: 1 1 auto; min-width: 0; }
.nl-submit { flex: none; min-width: 200px; margin-top: 8px; }
.nl-submit-busy { display: none; }
.nl-form.is-sending .nl-submit-l { display: none; }
.nl-form.is-sending .nl-submit-busy { display: inline; }
.nl-form.is-sending .nl-submit { opacity: 0.72; cursor: progress; }
/* consent: the whole line is the label (a 44 px target at least); the box is drawn, the native one is hidden */
.nl-consent { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; margin-top: 18px; padding: 4px 0; cursor: pointer; font-size: 0.9rem; line-height: 1.5; color: var(--ink-2); }
.nl-check {
  flex: none; display: grid; place-content: center; width: 22px; height: 22px; margin: 0; border: 1px solid var(--line-3); border-radius: 3px;
  background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background-color 0.2s, border-color 0.2s;
}
.nl-check::after { content: ""; width: 11px; height: 6px; border-left: 2px solid var(--bg); border-bottom: 2px solid var(--bg); transform: translateY(-2px) rotate(-45deg); opacity: 0; }
.nl-check:checked { background: var(--teal); border-color: var(--teal); }
.nl-check:checked::after { opacity: 1; }
.nl-check[aria-invalid="true"] { border-color: var(--sev); }
@media (hover: hover) { .nl-consent:hover .nl-check:not(:checked) { border-color: rgba(45, 221, 184, 0.7); } }
.nl-consent + .field-error { margin: 2px 0 0 34px; }
.nl-privacy { margin-top: 4px; padding-left: 34px; font-size: 0.85rem; line-height: 1.5; }
.nl-privacy a { display: inline-block; padding: 12px 0; margin: -12px 0; color: var(--ink-2); text-underline-offset: 3px; }
@media (hover: hover) { .nl-privacy a:hover { color: var(--teal); } }
.nl-status { margin-top: 14px; font-size: 0.95rem; line-height: 1.5; color: var(--ink-2); max-width: 56ch; }
.nl-status:empty { margin-top: 0; }
.nl-status.is-success, .nl-done { color: var(--teal); }
.nl-status.is-error { color: var(--sev); }
.nl-done { font-size: 1rem; line-height: 1.5; max-width: 52ch; }
.nl-done:focus { outline: none; }   /* focused by the script to be read out, like #main: not a control */
html[lang="fr"] .nl-t, html[lang="fr"] .nl-d, html[lang="fr"] .nl-consent { hyphens: manual; -webkit-hyphens: manual; }
.nl-form.is-done .nl-fields { display: none; }
.nl.is-confirmed .nl-form, .nl.is-confirmed .nl-d { display: none; }
.nl.is-confirmed .nl-status { margin-top: 0; font-size: 1rem; }
@media (min-width: 1024px) { .nl.is-confirmed .nl-main { align-self: end; } }
@media (max-width: 599px) {
  .nl-row { flex-direction: column; align-items: stretch; }
  .nl-submit { width: 100%; min-width: 0; margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) { .nl .field label, .nl .field::after, .nl-check { transition: none; } }

/* ============================================================
   FOOTER
   ============================================================ */
.ftr { position: relative; padding: 40px 0 calc(26px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: linear-gradient(180deg, #080717, var(--bg)); }
.ftr-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 24px; padding-left: var(--idx); }
.ftr-word { width: auto; height: 16px; }
.ftr-tag { margin-top: 18px; font-size: 1rem; color: var(--ink-2); max-width: 36ch; }
.ftr-cred { margin-top: 8px; font: 400 0.75rem/1.5 var(--f-mono); letter-spacing: 0.04em; color: var(--ink-3); }
.ftr-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ftr-h { font: 500 0.75rem/1.3 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.ftr-col a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font-size: 0.97rem; color: var(--ink-2); text-decoration: none; transition: color 0.2s; }
@media (hover: hover) { .ftr-col a:hover { color: var(--ink); } }
.ftr-email[hidden] { display: none; }
.ftr-support { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 20px; margin-top: 20px; max-width: 520px; }
.ftr-support .support-l { grid-column: 1 / -1; }
.ftr-support .support-t { font-size: 0.9rem; }
.ftr-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin: 30px 0 0 var(--idx); padding-top: 18px; border-top: 1px solid var(--line); font: 400 0.75rem/1.5 var(--f-mono); letter-spacing: 0.04em; color: var(--ink-3); }
@media (max-width: 1023px) {
  .ftr-top { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  .ftr-top { gap: 28px; }
  .ftr-nav { gap: 12px; }
  .ftr-col a { font-size: 0.9rem; line-height: 1.25; }
  .ftr-support { gap: 10px 18px; }
  .ftr-support .logo-cnrs { height: 36px; }
  .ftr-support .logo-rise { height: 19px; }
}
@media (max-width: 359px) { .ftr-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ============================================================
   Responsive glue of the shared components (original order)
   ============================================================ */

@media (max-width: 1023px) {
  .fig--scene { display: flex; flex-direction: column; }
  .fig--scene > .sk-stage { order: -1; }
  .fig--scene > .motion-btn--fig { align-self: flex-start; margin-top: 12px; }
  .fig--scene .sk-stage { aspect-ratio: 3 / 1; }
  .fig--scene .sk-readouts { margin-top: 16px; }
  .sec-grid { row-gap: 32px; }
  .fig--covers { max-width: 420px; }
}
@media (max-width: 767px) {
  .sec-head { margin-bottom: 24px; }
  .fig-note { display: none; }
  .h2 + .body { margin-top: 16px; }
  .sec-grid { row-gap: 26px; }
  .stat { grid-template-columns: minmax(0, 7.4rem) minmax(0, 1fr); column-gap: 14px; padding: 12px 0 13px; }
  .stat-v { font-size: 1.25rem; }
  .stat dd { font-size: 0.9rem; line-height: 1.45; }
  .steps { gap: 20px; margin-top: 26px; }
  .step { gap: 8px; }
  .step .rule { margin-bottom: 6px; }
  .sectors { margin-top: 24px; }
  .sector { padding: 14px 0 15px; row-gap: 6px; }
  .sector-n { top: 18px; }
  .sector-b { font-size: 0.97rem; line-height: 1.52; }
  .covers { gap: 14px; }
  .covers picture { max-width: 108px; }
  .covers picture:last-child { margin-top: 16px; }
  .person { padding-top: 14px; }
  .person-n { font-size: 1.2rem; }
  .person-r { font-size: 0.75rem; letter-spacing: 0.1em; }
  .person-b { margin-top: 8px; font-size: 0.93rem; }
  .support { gap: 8px 20px; padding-top: 14px; }
  .support .support-logos .logo-cnrs { height: 36px; }
  .support .support-logos .logo-rise { height: 19px; }
  .form { column-gap: 18px; }
  .form .field:nth-of-type(-n+2) { grid-column: span 1; }
  .form .field:nth-of-type(3), .form .field:nth-of-type(4) { grid-column: 1 / -1; }
  .fig--scene .sk-stage { height: auto; aspect-ratio: 16 / 11; }
  .fig--scene { margin-inline: calc(-1 * var(--gut)); margin-top: 32px; }
  .fig--scene > .fig-cap, .fig--scene .sk-readouts { margin-inline: var(--gut); }
  .fig--scene > .fig-cap { margin-top: 12px; }
  /* pause control: a labelled pill under the caption, aligned on the same gutter */
  .fig--scene > .motion-btn--fig { margin: 12px var(--gut) 0; }
  .sk-readouts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
  .ftr { padding-top: 36px; }
}
@media (max-width: 359px) {
  .stat { grid-template-columns: minmax(0, 6.6rem) minmax(0, 1fr); column-gap: 12px; }
  .stat-v { font-size: 1.1rem; }
}

/* ============================================================
   EXTENSIONS — what the inner pages need and the home does not
   (the home composes its own hero and sections). Same vocabulary:
   1 px rules, mono metadata, no boxes, no shadows, no rounded cards.
   ============================================================ */

/* ---------- Layout helpers ---------- */
.wrap--narrow { width: min(100% - 2 * var(--gut), 880px); }
.sec--flush { padding-top: 0; }                         /* continues the previous section */
.aurora--top::before { inset: -20% 10% 20% -20%; opacity: 0.8; }
.aurora--end::before { inset: -20% -20% 10% -20%; }
.aurora--side::before { inset: -10% -30% 40% 20%; opacity: 0.75; }

/* Placement of the children of a .sec-grid (12 columns) from 1024 px; below, every child is full width */
@media (min-width: 1024px) {
  .col-1-5 { grid-column: 1 / span 5; }
  .col-1-6 { grid-column: 1 / span 6; }
  .col-1-7 { grid-column: 1 / span 7; }
  .col-6-12 { grid-column: 6 / -1; }
  .col-7-12 { grid-column: 7 / -1; }
  .col-8-12 { grid-column: 8 / -1; }
  .col-9-12 { grid-column: 9 / -1; }
  .self-center { align-self: center; }
  .self-end { align-self: end; }
}

/* A row of buttons */
.actions { display: flex; flex-wrap: wrap; gap: 12px 14px; }
@media (max-width: 767px) { .actions--stack .btn { flex: 1 1 220px; } }

/* ---------- Status badge: the fourth state, what is announced but not under way ---------- */
.badge--vision { color: var(--ink-2); border-color: rgba(191, 201, 212, 0.4); border-style: dotted; }
.badge--vision::before { border: 1.5px dotted var(--ink-2); }

/* ---------- Page head: the opening of every inner page ---------- */
.page-head { position: relative; isolation: isolate; overflow: hidden; overflow: clip; padding: calc(var(--hdr) + clamp(8px, 2vw, 28px)) 0 clamp(36px, 4.4vw, 64px); }
.page-head > .aurora { z-index: -1; }
.page-head-grid { display: grid; grid-template-columns: var(--idx) minmax(0, 1fr); }
.page-head-grid > .idx { padding-top: 0.2em; }
/* the site's pages carry no section number any more (audit A16): the copy and the media keep their columns, the margin
   column (--idx) stays empty, so everything still lines up with the sections below */
.page-head-grid > .page-head-copy { grid-column: 2; }
.page-head-copy { max-width: 820px; }
.page-head .h1 { font-size: clamp(36px, calc(3.4vw + 20px), 68px); line-height: 1.04; margin-top: 18px; text-wrap: balance; }
.page-head .lead { margin-top: 24px; max-width: 58ch; }
.page-head .actions { margin-top: 32px; }
.page-head-media { min-width: 0; margin-top: 36px; }
@media (min-width: 1024px) {
  .page-head--media .page-head-grid { grid-template-columns: var(--idx) minmax(0, 7fr) minmax(0, 5fr); column-gap: 48px; align-items: center; }
  .page-head--media .page-head-media { margin-top: 0; }
  .page-head--media .page-head-grid > .page-head-media { grid-column: 3; }
}
@media (max-width: 1023px) {
  .page-head-grid { display: block; }
  .page-head-grid > .idx { display: none; }
}
@media (max-width: 767px) {
  .page-head { padding-bottom: 32px; }
  .page-head .h1 { margin-top: 12px; }
  .page-head .lead { margin-top: 18px; }
  .page-head .actions { margin-top: 26px; }
  .page-head .actions .btn { flex: 1 1 220px; }
}

/* Breadcrumb: Home / Section / Page */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin: 0 0 6px; padding-left: var(--idx); font: 400 0.75rem/1.4 var(--f-mono); letter-spacing: 0.06em; color: var(--ink-3); }
.crumbs li { display: inline-flex; align-items: center; gap: 12px; }
.crumbs li + li::before { content: ""; width: 5px; height: 5px; border-top: 1px solid var(--ink-3); border-right: 1px solid var(--ink-3); transform: rotate(45deg); margin-right: 2px; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); text-decoration: none; transition: color 0.2s; }
.crumbs [aria-current] { color: var(--ink-3); }
@media (max-width: 1023px) { .crumbs { padding-left: 0; } }
@media (hover: hover) { .crumbs a:hover { color: var(--teal); } }

/* ---------- Cards: a rule, a label, a title, a text, a footer. No box. ---------- */
.cards { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 36px 28px; padding-left: var(--idx); margin-top: clamp(30px, 2.6vw, 40px); }
.cards--2 { --cols: 2; }
.cards--4 { --cols: 4; }
.card { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.card .rule { margin-bottom: 8px; }
.card-k { font: 500 0.75rem/1.3 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); }
.card-t { font: 500 clamp(19px, calc(0.5vw + 15px), 23px)/1.25 var(--f-display); letter-spacing: -0.012em; color: var(--ink); }
.card-b { font-size: 1rem; line-height: 1.55; color: var(--ink-2); max-width: 46ch; }
.card-f { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
/* An illustrated card: a .plate first (it replaces the rule), then a head row (title, status badge on the right). */
.card > .plate { margin-bottom: 10px; }
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
/* A card title that is a link, or a whole card that is a link: the title carries a faint rule, full colour on hover. */
.card-t a, .card--link .card-t {
  color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(45, 221, 184, 0.4); text-underline-offset: 6px;
  transition: color 0.25s, text-decoration-color 0.25s;
}
.card-t a { display: inline-block; padding-block: calc((44px - 1.25em) / 2); margin-block: calc((1.25em - 44px) / 2); }   /* 44 px hit area on a one-line title */
.card--link { color: inherit; text-decoration: none; }
@media (hover: hover) {
  .card-t a:hover, .card--link:hover .card-t { color: var(--teal); text-decoration-color: currentColor; }
}
@media (max-width: 1023px) { .cards, .cards--4 { --cols: 2; } }
@media (max-width: 599px) { .cards, .cards--2, .cards--4 { --cols: 1; gap: 28px; } }

/* ---------- Lists ---------- */
.list, .prose ul { display: grid; gap: 10px; }
.list > li, .prose ul > li { position: relative; padding-left: 28px; line-height: 1.55; color: var(--ink-2); }
.list > li::before, .prose ul > li::before { content: ""; position: absolute; left: 0; top: 0.82em; width: 14px; height: 1px; background: var(--teal); }
.list--num { counter-reset: n; }
.list--num > li { counter-increment: n; padding-left: 42px; }
.list--num > li::before { content: counter(n, decimal-leading-zero); top: 0.3em; width: auto; height: auto; background: none; font: 500 0.75rem/1.5 var(--f-mono); letter-spacing: 0.1em; color: var(--teal); }

/* ---------- Table: horizontal scroll inside its own region on narrow screens, never on the page ---------- */
.table-wrap { position: relative; margin: clamp(24px, 2.2vw, 32px) 0 0 var(--idx); overflow-x: auto; overscroll-behavior-x: contain; }   /* relative: the .sr-only (absolute) of a cell must not escape the scroll region */
.table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.97rem; line-height: 1.5; text-align: left; }
.table thead th { padding: 0 20px 12px 0; border-bottom: 1px solid var(--line-2); font: 500 0.75rem/1.3 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); text-align: left; vertical-align: bottom; }
.table td, .table tbody th { padding: 16px 20px 16px 0; border-top: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
.table tbody tr:first-child td, .table tbody tr:first-child th { border-top: 0; }
.table tbody th { font: 500 1.05rem/1.3 var(--f-display); letter-spacing: -0.01em; text-transform: none; color: var(--ink); }
.table tr > :last-child { padding-right: 0; }
.table caption { caption-side: bottom; padding-top: 14px; text-align: left; font: 400 0.75rem/1.55 var(--f-mono); letter-spacing: 0.04em; color: var(--ink-3); }
@media (max-width: 1023px) { .table-wrap { margin-left: 0; } }

/* ---------- Facts: a definition list as a small table (term · value) ---------- */
.facts { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); column-gap: 28px; align-content: start; }
.facts dt, .facts dd { padding: 14px 0; border-top: 1px solid var(--line); }
.facts dt { padding-top: 17px; font: 500 0.75rem/1.5 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.facts dd { line-height: 1.55; color: var(--ink-2); }
.facts > :nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
.facts a, .prose a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: rgba(45, 221, 184, 0.5); padding: 12px 0; margin: -12px 0; }
@media (hover: hover) { .facts a:hover, .prose a:hover { color: var(--teal); text-decoration-color: currentColor; } }
@media (max-width: 767px) {
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts dt { padding-bottom: 0; }
  .facts dd { padding-top: 6px; border-top: 0; }
  .facts > :nth-last-child(2) { border-bottom: 0; }
}

/* ---------- Prose: long text (legal notices, privacy, long explanations) ---------- */
.prose { max-width: 72ch; }
.prose-section { padding: 28px 0 10px; border-top: 1px solid var(--line); }
.prose h2 { font: 500 clamp(22px, calc(0.9vw + 16px), 30px)/1.2 var(--f-display); letter-spacing: -0.018em; color: var(--ink); text-wrap: balance; }
.prose h3 { margin-top: 26px; font: 500 1.15rem/1.3 var(--f-display); letter-spacing: -0.01em; color: var(--ink); }
.prose p { font-size: clamp(16px, calc(0.23vw + 14.8px), 17.5px); line-height: 1.65; color: var(--ink-2); text-wrap: pretty; }
.prose h2 + *, .prose h3 + * { margin-top: 14px; }
.prose p + p { margin-top: 14px; }
.prose p + ul, .prose ul + p, .prose p + .facts, .prose .facts + p { margin-top: 16px; }
.prose ul { font-size: clamp(16px, calc(0.23vw + 14.8px), 17.5px); }
.prose strong { font-weight: 500; color: var(--ink); }
.prose .prose-meta { font: 400 0.75rem/1.5 var(--f-mono); letter-spacing: 0.06em; color: var(--ink-3); }

/* ---------- Callout: a statement that must not be missed (status, limits, caveats) ---------- */
.callout { max-width: 62ch; padding: 4px 0 4px 22px; border-left: 2px solid var(--teal); font-size: 1.02rem; line-height: 1.6; color: var(--ink-2); }
.callout strong { font-weight: 500; color: var(--ink); }
.callout--dev { border-left: 2px dashed #6DBCEE; }

/* ---------- Statement: one sentence, large (a promise, a positioning) ---------- */
.statement { max-width: 34ch; font: 500 clamp(24px, calc(1.7vw + 15px), 40px)/1.2 var(--f-display); letter-spacing: -0.022em; color: var(--ink); text-wrap: balance; }

/* ---------- Big numeral (404, key figures) ---------- */
.big-num { font: 600 clamp(88px, 18vw, 220px)/0.9 var(--f-display); letter-spacing: -0.05em; background: var(--aurora); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }

/* ---------- Disclosure: a question and its answer (native <details>) ---------- */
.disclosure { border-top: 1px solid var(--line); }
.disclosure:last-child { border-bottom: 1px solid var(--line); }
.disclosure > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 14px 0; cursor: pointer; list-style: none;
  font: 500 clamp(18px, calc(0.4vw + 15px), 21px)/1.3 var(--f-display); letter-spacing: -0.01em; color: var(--ink);
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::after {
  content: ""; width: 14px; height: 14px; flex: none; transition: transform 0.3s var(--ease);
  background: linear-gradient(var(--teal), var(--teal)) center / 100% 1.5px no-repeat, linear-gradient(var(--teal), var(--teal)) center / 1.5px 100% no-repeat;
}
.disclosure[open] > summary::after { transform: rotate(45deg); }
.disclosure > div { max-width: 62ch; padding: 0 0 22px; color: var(--ink-2); line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .disclosure > summary::after { transition: none; } }
/* Quiet disclosure: secondary detail kept out of the reading flow (how a model works, the full sources). A mono label,
   the plus on the left; the summary stays a 48 px target. */
.disclosure--quiet > summary {
  justify-content: flex-start; gap: 14px; min-height: 48px; padding: 10px 0;
  font: 500 0.75rem/1.4 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2);
}
.disclosure--quiet > summary::after { order: -1; width: 11px; height: 11px; }
.disclosure--quiet > div { padding: 2px 0 20px 25px; font-size: 0.97rem; }
@media (hover: hover) { .disclosure--quiet > summary:hover { color: var(--ink); } }

/* ---------- Call-to-action band: closes a page ---------- */
.cta-band { display: grid; gap: 24px 48px; padding-left: var(--idx); }
.cta-band > .rule { grid-column: 1 / -1; margin-bottom: 8px; }
.cta-band .body { margin-top: 16px; max-width: 52ch; }
@media (min-width: 1024px) { .cta-band { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } .cta-band > .rule { margin-bottom: 20px; } }
@media (max-width: 1023px) { .cta-band { padding-left: 0; } }

/* ---------- Footer additions: grouped legal line, back to top ---------- */
.ftr-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.ftr-up {
  display: inline-flex; align-items: center; min-height: 44px; margin: -14px 0; color: var(--ink-2);
  text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--line-2); text-underline-offset: 4px; transition: color 0.2s, text-decoration-color 0.2s;
}
@media (hover: hover) { .ftr-up:hover { color: var(--ink); text-decoration-color: currentColor; } }

/* ---------- Utilities (few, on purpose) ---------- */
.measure { max-width: 62ch; }
.mt-s { margin-top: 12px; }
.mt-m { margin-top: 24px; }
.mt-l { margin-top: 40px; }
.mt-xl { margin-top: clamp(48px, 5vw, 72px); }
.text-ink { color: var(--ink); }
.text-ink-2 { color: var(--ink-2); }
.text-ink-3 { color: var(--ink-3); }
.text-teal { color: var(--teal); }
.mono { font-family: var(--f-mono); }
.nowrap { white-space: nowrap; }
@media (max-width: 767px) { .hide-sm { display: none !important; } }
@media (min-width: 768px) { .show-sm { display: none !important; } }