/* =============================================================
   CANAL-AI — modern, funder-facing, trilingual-ready stylesheet
   ============================================================= */

:root {
  --fr-blue:   #0055A4;
  --fr-blue-2: #003d78;
  --jp-red:    #BC002D;
  --jp-red-2:  #82001f;
  --ink:       #14161a;
  --ink-2:     #2a2e35;
  --muted:     #5a5f66;
  --muted-2:   #8e939b;
  --paper:     #ffffff;
  --cream:     #f7f5f1;
  --cream-2:   #efece5;
  --line:      #d6d1c5;
  --line-2:    #bdb7a7;
  --accent:    #0b4d8f;
  --focus:     #ffbf47;

  --radius:    12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(20, 22, 26, 0.04), 0 1px 3px rgba(20, 22, 26, 0.06);
  --shadow-md: 0 4px 12px rgba(20, 22, 26, 0.08), 0 2px 4px rgba(20, 22, 26, 0.04);
  --shadow-lg: 0 16px 40px rgba(20, 22, 26, 0.12), 0 4px 12px rgba(20, 22, 26, 0.06);

  --max:       72rem;
  --topbar-h:  64px;
  --sans:      "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --sans-jp:   "Noto Sans JP", "Hiragino Sans", "Yu Gothic", var(--sans);
  --serif:     "Merriweather", Georgia, "Noto Serif JP", serif;
}

/* ---------- Reset & base ---------- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

/* Per-language font swap so CJK metrics are right. */
html[lang="ja"] body { font-family: var(--sans-jp); }

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

/* <picture> should not affect layout — only its <img> child does. Without
   this, a <picture> inside a sized flex container (logo chips, partner
   tiles) takes the img's natural dimensions and overflows the container. */
picture { display: contents; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.015em;
  font-weight: 800;
}

h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); margin: 0.2em 0 0.25em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 0.75em; }
h3 { font-size: 1.15rem; margin: 0 0 0.5em; font-weight: 700; }
h4 { font-size: 1rem; margin: 0 0 0.4em; font-weight: 700; font-family: var(--sans); letter-spacing: normal; }

p { margin: 0 0 1em; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

/* Abbreviation tooltips — dotted underline + instant styled tooltip on hover / focus. */
abbr[aria-label] {
  position: relative;
  text-decoration: underline dotted var(--muted-2);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: help;
}

abbr[aria-label]:hover,
abbr[aria-label]:focus-visible { text-decoration-color: var(--accent); }

abbr[aria-label]:hover::after,
abbr[aria-label]:focus-visible::after {
  content: attr(aria-label);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  padding: 0.55rem 0.85rem;
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.45;
  white-space: normal;
  width: max-content;
  max-width: 280px;
  text-align: left;
  letter-spacing: normal;
  text-decoration: none;
  text-transform: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  z-index: 1000;
}

abbr[aria-label]:hover::before,
abbr[aria-label]:focus-visible::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--ink);
  pointer-events: none;
  z-index: 1000;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-sm);
  z-index: 200;
  text-decoration: none;
  font-weight: 700;
}

/* Global focus ring */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn:focus-visible,
.logo-chip:focus-visible,
.partners__ext:focus-visible,
.footer__repo:focus-visible,
.lang button:focus-visible,
.person__links a:focus-visible,
.nav-toggle:focus-visible {
  outline-color: var(--focus);
  outline-offset: 3px;
}
.hero .btn:focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 2px var(--accent);
}

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.kicker {
  display: inline-block;
  margin: 0 0 0.6rem;
  padding: 0.3rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fr-blue);
  background: rgba(0, 85, 164, 0.08);
  border-radius: 999px;
}

/* ---------- Top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(1.3) blur(12px);
  -webkit-backdrop-filter: saturate(1.3) blur(12px);
  border-bottom: 1px solid var(--line);
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.75rem 1.5rem;
  min-height: var(--topbar-h);
}

.topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  color: var(--ink);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.brand-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
}

.brand-dot--blue { background: var(--fr-blue); }
.brand-dot--red  { background: var(--jp-red); margin-left: -2px; }

.brand-word { font-family: var(--serif); font-size: 1.05rem; }

.topbar__nav {
  display: flex;
  gap: 1rem;
  margin-left: auto;
  flex-wrap: wrap;
}

.topbar__nav a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  padding: 0.5rem 0;
  position: relative;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.topbar__nav a:hover { color: var(--accent); }

.lang {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px;
  background: #fff;
}

.lang button {
  background: transparent;
  border: 0;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  letter-spacing: 0.02em;
  min-height: 36px;
  min-width: 44px;
}

.lang button:hover { color: var(--ink); }

.lang button.is-active {
  background: var(--ink);
  color: #fff;
}

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 0.5rem;
  margin-left: auto;
  cursor: pointer;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}

@media (max-width: 920px) {
  .topbar__nav {
    display: none;
    position: absolute;
    top: var(--topbar-h);
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    gap: 0;
    padding: 0.5rem 1.5rem 1rem;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
  }
  .topbar__nav.is-open { display: flex; }
  .topbar__nav a {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--line);
    font-size: 1rem;
  }
  .topbar__nav a:last-child { border-bottom: 0; }
  .nav-toggle { display: inline-flex; }
  .topbar__inner { gap: 0.75rem; }
}

@media (max-width: 460px) {
  .lang button { font-size: 0.72rem; padding: 0.4rem 0.55rem; min-width: 36px; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: 4rem 0 4.5rem;
  color: #fff;
  isolation: isolate;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1200px 400px at 80% 10%, rgba(255, 255, 255, 0.16), transparent 60%),
    linear-gradient(135deg, var(--fr-blue-2) 0%, var(--fr-blue) 38%, var(--jp-red) 62%, var(--jp-red-2) 100%);
}

.hero__inner {
  position: relative;
  display: block;
}

.hero__text {
  min-width: 0;
  max-width: 60rem;
}

/* ---------- Hero panoramic photo ---------- */
.hero__photo {
  margin: 2.5rem auto 0;
  max-width: 920px;
}

.hero__photo picture {
  display: block;
  line-height: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.18);
}

.hero__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1040 / 594;
  transition: transform 0.4s ease;
}

.hero__photo:hover img { transform: scale(1.005); }

/* Editorial / museum-card caption.
   Gradient accent rule on top, brand dots + serif italic kicker on the
   left, vertical hairline + italic disclosure on the right. Sits on
   the hero gradient — no dark plate. */
.hero__photo-caption {
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-areas:
    "rule rule rule"
    "mark kicker disclosure";
  column-gap: 0.9rem;
  row-gap: 0;
  align-items: baseline;
  margin: 1.1rem 0.25rem 0;
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--sans);
}

.hero__photo-rule {
  grid-area: rule;
  display: block;
  width: 110px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--fr-blue) 0%, #ffffff 50%, var(--jp-red) 100%);
  margin-bottom: 0.85rem;
  opacity: 0.95;
}

.hero__photo-mark {
  grid-area: mark;
  display: inline-flex;
  align-items: center;
  align-self: center;
}
.hero__photo-mark .brand-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}
.hero__photo-mark .brand-dot--blue { background: var(--fr-blue); }
.hero__photo-mark .brand-dot--red  { background: var(--jp-red); margin-left: -3px; }

.hero__photo-kicker {
  grid-area: kicker;
  align-self: center;
  font-family: var(--serif, "Merriweather", Georgia, serif);
  font-style: italic;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.005em;
  color: #fff;
  white-space: nowrap;
}

.hero__photo-disclosure {
  grid-area: disclosure;
  font-size: 0.82rem;
  font-style: italic;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  border-left: 1px solid rgba(255, 255, 255, 0.28);
  padding-left: 1rem;
  align-self: center;
}
.hero__photo-disclosure em {
  font-style: italic;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 500;
}

@media (max-width: 720px) {
  .hero__photo { margin-top: 1.75rem; }
  .hero__photo-caption {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "rule rule"
      "mark kicker"
      "disclosure disclosure";
    row-gap: 0.4rem;
  }
  .hero__photo-kicker { white-space: normal; font-size: 1rem; }
  .hero__photo-disclosure {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    padding-top: 0.6rem;
  }
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.8rem;
  font-weight: 700;
  opacity: 1;
  margin: 0 0 0.4rem;
}

.hero__title {
  margin: 0;
  /* Sized for the descriptive tagline ("Caen-Nagoya Alliance for AI in
     Health Data" — ~40 chars), not for a 3-letter acronym. */
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 18ch;
}
@media (max-width: 900px) {
  .hero__title { max-width: none; font-size: clamp(2rem, 7vw, 3rem); }
}

.hero__tagline {
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  margin: 0.4rem 0 1.3rem;
  font-weight: 500;
  opacity: 0.95;
}

.hero__lede {
  font-size: 1.05rem;
  max-width: 52rem;
  margin-bottom: 1.25rem;
  opacity: 0.97;
}

.pledge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 600;
  padding: 0.6rem 1rem;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.38);
  margin: 0.3rem 0 1.4rem;
  font-size: 0.95rem;
}

.pledge__icon { stroke: currentColor; }

.hero h1, .hero p { color: #fff; }

.hero__ctas {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.3rem;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.3rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  white-space: nowrap;
  border: 1.5px solid transparent;
  min-height: 44px;
}

.btn:hover { transform: translateY(-1px); }

.btn--primary {
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow-md);
}

.btn--primary:hover {
  background: #fff;
  box-shadow: var(--shadow-lg);
}

.btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.8);
}

.btn--ghost:hover { background: rgba(255, 255, 255, 0.12); }

.btn--lg { padding: 0.95rem 1.6rem; font-size: 1.02rem; }

.section--cta .btn--primary {
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow-md);
}

.section--cta .btn--primary:hover { background: var(--accent); }

/* ---------- Section scaffolding ---------- */

.section { padding: 4.5rem 0; }

.section--band {
  background: var(--cream);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 3rem;
  align-items: start;
}

@media (max-width: 800px) {
  .section__grid { grid-template-columns: 1fr; gap: 1.25rem; }
}

.section__head h2 { margin-top: 0; }

.section__subtitle {
  color: var(--muted);
  font-size: 1.05rem;
  margin: -0.3rem 0 1.2rem;
  font-weight: 500;
}

.section__lede {
  max-width: 52rem;
  font-size: 1.02rem;
  color: var(--ink-2);
}

/* ---------- How it works: diagram + stack ---------- */

.fed-diagram {
  margin: 1.5rem auto 2rem;
  max-width: 56rem;
  padding: 1.25rem 1rem;
  background:
    radial-gradient(600px 200px at 20% 30%, rgba(0, 85, 164, 0.05), transparent 70%),
    radial-gradient(600px 200px at 80% 70%, rgba(188, 0, 45, 0.05), transparent 70%),
    var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.fed-diagram svg {
  width: 100%;
  height: auto;
  display: block;
}

.fed-line {
  stroke-dasharray: 6 6;
  animation: fed-flow 2s linear infinite;
}
.fed-line--future {
  stroke-dasharray: 3 5;
  animation-duration: 3.2s;
  opacity: 0.7;
}

@keyframes fed-flow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -24; }
}

.fed-node__halo {
  opacity: 0.18;
  transform-origin: center;
  transform-box: fill-box;
  animation: fed-pulse 2.8s ease-in-out infinite;
}
.fed-node--delay .fed-node__halo { animation-delay: 1.4s; }

@keyframes fed-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.15; }
  50%      { transform: scale(1.12); opacity: 0.22; }
}

.fed-future { opacity: 0.65; }

/* ---------- Phase-driven SVG emphasis ---------- */

.fed-packets,
.fed-agg__rect,
.fed-node__halo,
.fed-node__boundary,
.fed-node__stay,
.fed-agg__caption,
.fed-agg__lock {
  transition: opacity 0.5s ease, filter 0.5s ease, stroke 0.5s ease;
}

/* Hospital boundary rings + "data stays" caption only visible in Phase 1 */
.fed-node__boundary,
.fed-node__stay { opacity: 0; }
.fed-story[data-phase="1"] .fed-node__boundary { opacity: 0.7; }
.fed-story[data-phase="1"] .fed-node__stay { opacity: 1; }

/* Phase 1 — Local training: hospital halos prominent, packets hidden, aggregator recedes */
.fed-story[data-phase="1"] .fed-packets { opacity: 0; visibility: hidden; }
.fed-story[data-phase="1"] .fed-node__halo { opacity: 0.4; animation-duration: 1.6s; }
.fed-story[data-phase="1"] .fed-agg__rect { opacity: 0.55; }
.fed-story[data-phase="1"] .fed-agg__lock,
.fed-story[data-phase="1"] .fed-agg__caption { opacity: 0.45; }

/* Phase 2 — Secure send: outbound padlocks visible, return hidden, aggregator ringed */
.fed-story[data-phase="2"] .fed-packets--outbound { opacity: 1; visibility: visible; }
.fed-story[data-phase="2"] .fed-packets--return   { opacity: 0; visibility: hidden; }
.fed-story[data-phase="2"] .fed-agg__rect { stroke: var(--accent); stroke-width: 2.5; }

/* Phase 3 — Average: aggregator glows, packets hidden */
.fed-story[data-phase="3"] .fed-packets { opacity: 0; visibility: hidden; }
.fed-story[data-phase="3"] .fed-agg__rect {
  stroke: var(--accent);
  stroke-width: 3;
  filter: drop-shadow(0 0 10px rgba(11, 77, 143, 0.55));
}
.fed-story[data-phase="3"] .fed-agg__lock circle { fill: var(--accent); }
.fed-story[data-phase="3"] .fed-node__halo { opacity: 0.15; }

/* Phase 4 — Update and repeat: return padlocks visible, halos glow (receiving) */
.fed-story[data-phase="4"] .fed-packets--outbound { opacity: 0; visibility: hidden; }
.fed-story[data-phase="4"] .fed-packets--return   { opacity: 1; visibility: visible; }
.fed-story[data-phase="4"] .fed-node__halo { opacity: 0.35; animation-duration: 1.6s; }

/* Round counter: subtle highlight when the loop restarts (phase 4 → 1) */
.fed-round { transition: opacity 0.3s ease; }
.fed-story.is-round-bump .fed-round__n {
  animation: round-bump 0.8s ease-out 1;
}
@keyframes round-bump {
  0%   { font-size: 11px; fill: var(--accent); }
  40%  { font-size: 15px; fill: var(--jp-red); }
  100% { font-size: 11px; fill: var(--accent); }
}

/* ---------- Fed-story widget ---------- */

.fed-story { max-width: 56rem; margin: 0 auto 2rem; }

.fed-story__controls {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 0.4rem;
  margin: 0.75rem 0 0.5rem;
  flex-wrap: wrap;
}

/* Segmented pill: numbered circle + step title */
.fed-story__dot {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 1rem 0.55rem 0.55rem;
  height: 44px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  cursor: pointer;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.fed-story__dot-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--cream-2);
  color: var(--muted);
  font-family: var(--serif);
  font-weight: 800;
  font-size: 0.85rem;
  transition: background 0.18s ease, color 0.18s ease;
}

.fed-story__dot-label {
  white-space: nowrap;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fed-story__dot:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.fed-story__dot.is-active {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(135deg, var(--fr-blue), var(--jp-red));
  box-shadow: 0 4px 12px rgba(11, 77, 143, 0.25);
}

.fed-story__dot.is-active .fed-story__dot-num {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

@media (max-width: 720px) {
  .fed-story__dot { padding: 0.5rem 0.8rem 0.5rem 0.5rem; font-size: 0.82rem; }
  .fed-story__dot-num { width: 26px; height: 26px; font-size: 0.78rem; }
  .fed-story__dot-label { max-width: 9rem; }
}

@media (max-width: 560px) {
  .fed-story__controls { justify-content: flex-start; }
  .fed-story__dot-label { display: none; }
  .fed-story__dot { padding: 0.35rem; }
}

.fed-story__toggle {
  margin-left: 0.35rem;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.fed-story__toggle:hover { color: var(--accent); border-color: var(--accent); }

.fed-story__icon--play { display: none; }
.fed-story.is-paused .fed-story__icon--pause { display: none; }
.fed-story.is-paused .fed-story__icon--play  { display: block; }

.fed-story__progress {
  width: 100%;
  max-width: 28rem;
  height: 3px;
  margin: 0.2rem auto 1rem;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}

.fed-story__progress-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--fr-blue), var(--jp-red));
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.1s linear;
}

.fed-story__stage {
  position: relative;
  min-height: 9rem;
}

.fed-story__card {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.35rem 1.6rem;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--fr-blue);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.fed-story__card[data-step="2"] { border-left-color: var(--jp-red); }
.fed-story__card[data-step="3"] { border-left-color: var(--accent); }
.fed-story__card[data-step="4"] { border-left-color: var(--ink); }

.fed-story__card.is-active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.fed-story__num {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--fr-blue), var(--jp-red));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-weight: 800;
  font-size: 1.3rem;
}

.fed-story__body { flex: 1; min-width: 0; }

.fed-story__body h3 {
  margin: 0.1rem 0 0.4rem;
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.25;
}

.fed-story__body p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.98rem;
  line-height: 1.55;
}

/* All-steps fallback used when prefers-reduced-motion is set */
.fed-story.is-all-steps .fed-story__stage {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.85rem;
}

.fed-story.is-all-steps .fed-story__card {
  position: relative;
  inset: auto;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.fed-story.is-all-steps .fed-story__controls,
.fed-story.is-all-steps .fed-story__progress {
  display: none;
}

@media (max-width: 560px) {
  .fed-story__card { padding: 1.1rem 1.2rem; gap: 0.9rem; }
  .fed-story__num { width: 40px; height: 40px; font-size: 1.1rem; }
}

.stack__title {
  margin: 2rem 0 1rem;
  font-family: var(--serif);
  font-size: 1.25rem;
}

/* Spec-sheet panel: a single bordered card with one row per stack item.
   Length variance between rows is natural (each row sizes to its own
   content), so translation can grow or shrink any cell without making
   neighbours look hollow. */
.stack {
  margin: 0;
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.stack__item {
  display: grid;
  grid-template-columns: minmax(10rem, 22%) 1fr;
  align-items: baseline;
  gap: 0.6rem 2rem;
  padding: 0.95rem 1.4rem;
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid var(--fr-blue);
  border-radius: 0;
  box-shadow: none;
}
.stack__item:last-child { border-bottom: 0; }

.stack__item:nth-child(2) { border-left-color: var(--jp-red); }
.stack__item:nth-child(3) { border-left-color: var(--accent); }
.stack__item:nth-child(4) { border-left-color: var(--fr-blue); }
.stack__item:nth-child(5) { border-left-color: var(--jp-red); }
.stack__item:nth-child(6) { border-left-color: var(--accent); }
.stack__item:nth-child(7) { border-left-color: var(--fr-blue); }

/* Subtle alternating tint to help row scanning */
.stack__item:nth-child(even) {
  background: rgba(11, 77, 143, 0.025);
}

.stack__item--accent {
  border-left-color: var(--ink) !important;
  background: var(--ink);
  color: #fff;
}
.stack__item--accent dt,
.stack__item--accent dd { color: #fff; }
.stack__item--accent dt { color: rgba(255, 255, 255, 0.82); }

.stack__item dt {
  margin: 0;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  align-self: start;
  padding-top: 0.15rem;
}

.stack__item dd {
  margin: 0;
  font-size: 0.97rem;
  color: var(--ink-2);
  line-height: 1.6;
}

@media (max-width: 720px) {
  .stack__item {
    grid-template-columns: 1fr;
    gap: 0.3rem;
    padding: 0.85rem 1rem;
  }
}

/* Regulatory status block */
.reg-status {
  margin-top: 2.5rem;
  padding: 1.4rem 1.5rem;
  background: rgba(11, 77, 143, 0.04);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
}

.reg-status h3 {
  margin: 0 0 0.75rem;
  font-family: var(--serif);
  font-size: 1.1rem;
}

.reg-status p { margin: 0 0 0.6rem; color: var(--ink-2); font-size: 0.97rem; }
.reg-status p:last-child { margin: 0; }

/* ---------- Glossary ---------- */

.glossary {
  margin-top: 2rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.glossary > summary {
  cursor: pointer;
  padding: 1rem 1.25rem;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-weight: 700;
  font-family: var(--serif);
  color: var(--ink);
  transition: background 0.12s ease;
}

.glossary > summary::-webkit-details-marker { display: none; }

.glossary > summary::after {
  content: "+";
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.glossary[open] > summary::after {
  content: "−";
  transform: rotate(180deg);
}

.glossary > summary:hover { background: var(--cream); }

.glossary__title {
  font-size: 1.05rem;
  flex: 1;
}

.glossary__toggle {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.82rem;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
}

.glossary__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 0.75rem 1.75rem;
  padding: 0.5rem 1.25rem 1.25rem;
  margin: 0;
  border-top: 1px solid var(--line);
}

.glossary__item {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px dashed var(--line);
  align-items: baseline;
}

.glossary__item:last-child { border-bottom: 0; }

.glossary__item dt {
  font-weight: 700;
  color: var(--accent);
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  margin: 0;
}

.glossary__item dd {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-2);
  line-height: 1.45;
}

@media (max-width: 560px) {
  .glossary__item {
    grid-template-columns: 1fr;
    gap: 0.1rem;
  }
  .glossary__item dt { font-size: 0.9rem; }
}

/* ---------- Roadmap ---------- */

.roadmap {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  counter-reset: rm;
}

.roadmap li {
  counter-increment: rm;
  position: relative;
  padding: 1.25rem 1.2rem 1.2rem;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--fr-blue);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.roadmap li:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.roadmap li:nth-child(2) { border-top-color: var(--jp-red); }
.roadmap li:nth-child(3) { border-top-color: var(--accent); }
.roadmap li:nth-child(4) { border-top-color: var(--fr-blue); }
.roadmap li:nth-child(5) { border-top-color: var(--jp-red); }

.roadmap__date {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin: 0 0 0.6rem;
}

.roadmap li p { margin: 0; font-size: 0.92rem; color: var(--ink-2); line-height: 1.5; }

/* ---------- Team ---------- */

.team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.person {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.person:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.person__photo {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 1rem;
  border: 4px solid #fff;
  box-shadow: 0 0 0 2px var(--line), var(--shadow-sm);
}

.person__name {
  margin: 0.25rem 0 0.1rem;
  font-family: var(--serif);
  font-size: 1.2rem;
}

.person__aff {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.person__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

.person__links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--muted);
  background: #fff;
  transition: transform 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.person__links a:hover {
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
}

/* Brand-coloured icon links on team cards. Uses :has() to target each link by the icon it contains. */
.person__links a:has(use[href="#icon-orcid"])    { color: #A6CE39; border-color: rgba(166, 206, 57, 0.5); }
.person__links a:has(use[href="#icon-orcid"]):hover    { color: #fff; background: #A6CE39; border-color: #A6CE39; }

.person__links a:has(use[href="#icon-linkedin"]) { color: #0A66C2; border-color: rgba(10, 102, 194, 0.5); }
.person__links a:has(use[href="#icon-linkedin"]):hover { color: #fff; background: #0A66C2; border-color: #0A66C2; }

.person__links a:has(use[href="#icon-mail"])     { color: var(--jp-red); border-color: rgba(188, 0, 45, 0.45); }
.person__links a:has(use[href="#icon-mail"]):hover     { color: #fff; background: var(--jp-red); border-color: var(--jp-red); }

/* ---------- Partners (logo cards) ---------- */

.partners {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}

.partners__card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.2rem 1.2rem;
  box-shadow: var(--shadow-sm);
  height: 100%;
  list-style: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.partners__card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.partners__logo-wrap {
  width: 100%;
  max-width: 200px;
  height: 80px;
  margin: 0 auto 0.95rem;
  padding: 0.55rem 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.partners__logo {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 64px;
  object-fit: contain;
  display: block;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
}

.partners h3 { margin: 0 0 0.35rem; font-size: 1rem; }
.partners p { margin: 0 0 1rem; color: var(--muted); font-size: 0.9rem; line-height: 1.5; }

.partners__ext {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: auto auto 0;
  padding: 0.6rem 1rem;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(11, 77, 143, 0.3);
  border-radius: 999px;
  min-height: 44px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.partners__ext:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.partners__ext svg { stroke: currentColor; }

/* ---------- Thanks + Funding ---------- */

.thanks {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.75rem;
}

@media (min-width: 60rem) {
  .thanks--row-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .thanks--row-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.thanks + .thanks { margin-top: -1rem; }

.thanks a {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 0.75rem;
  row-gap: 0.15rem;
  padding: 0.9rem 1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink);
  min-height: 44px;
  align-items: center;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
  box-shadow: var(--shadow-sm);
}

.thanks a:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-2px); }

.thanks__name {
  grid-column: 1;
  grid-row: 1;
  font-weight: 600;
  line-height: 1.3;
}

.thanks__role {
  grid-column: 1;
  grid-row: 2;
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 400;
  line-height: 1.45;
}

.thanks__ext {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--muted);
  flex-shrink: 0;
  stroke: currentColor;
}

.funding {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--jp-red);
  border-radius: var(--radius-sm);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-sm);
  max-width: 48rem;
}

.funding h3 {
  margin: 0 0 0.5rem;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--jp-red);
}

.funding p { margin: 0 0 1rem; color: var(--ink-2); font-size: 0.98rem; }

.funding__logos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 0;
}

.logo-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 56px;
  padding: 0.4rem 0.6rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink-2);
  flex-shrink: 0;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.logo-chip:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
  color: var(--accent);
}

.logo-chip {
  overflow: hidden;
}

.logo-chip img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 40px;
  object-fit: contain;
  display: block;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
}

.logo-chip--placeholder {
  border-style: dashed;
  border-color: var(--line-2);
  background: transparent;
  flex-direction: column;
  gap: 0.1rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-2);
}

.logo-chip__plus { font-size: 1.1rem; line-height: 1; font-weight: 700; }

/* ---------- News (card grid) ---------- */

.news-notice {
  font-size: 0.85rem;
  color: var(--muted);
  background: rgba(11, 77, 143, 0.05);
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-sm);
  display: inline-block;
  margin: 0 0 1.25rem;
}

.timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}

.timeline li {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem 1.1rem 1.1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--fr-blue);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.timeline li:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.timeline li:nth-child(even)   { border-top-color: var(--jp-red); }
.timeline li:nth-child(4n+3)   { border-top-color: var(--accent); }

.timeline__date {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 0.15rem;
}

.timeline__title { font-family: var(--serif); font-size: 1rem; margin: 0 0 0.3rem; line-height: 1.3; }
.timeline__body  { margin: 0; color: var(--ink-2); font-size: 0.88rem; line-height: 1.5; }

/* Link tile: each announcement now opens its own page in a new window */
.timeline__link {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  height: 100%;
  text-decoration: none;
  color: inherit;
  outline-offset: 4px;
}

.timeline__link:focus-visible { outline: 2px solid var(--accent); border-radius: var(--radius-sm); }
.timeline__link:hover .timeline__title { color: var(--accent); }

.timeline__cta {
  margin-top: auto;
  padding-top: 0.55rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.01em;
}

.timeline__link:hover .timeline__cta,
.timeline__link:focus-visible .timeline__cta { color: var(--jp-red); }

.timeline__cta svg { stroke: currentColor; }

/* Auto-flipping news tile: front shows the text card, back shows the photo.
   Uses a 3D rotation on the inner wrapper. Both faces share the same grid
   cell via grid-template-areas so the parent sizes to the taller face and
   no fixed height is required. */
.timeline__flip {
  perspective: 1400px;
  padding: 0;
  background: transparent;
  border: 0;
  border-top: 0;
  box-shadow: none;
  transform: none;
  transition: transform 0.15s ease;
}

.timeline__flip:hover { transform: translateY(-2px); box-shadow: none; }

.timeline__flip-inner {
  position: relative;
  display: grid;
  grid-template-areas: "face";
  transform-style: preserve-3d;
  animation: timeline-flip 12s cubic-bezier(0.7, 0, 0.3, 1) infinite;
  height: 100%;
}

.timeline__flip:hover .timeline__flip-inner,
.timeline__flip:focus-within .timeline__flip-inner {
  animation-play-state: paused;
}

/* Manual control: once the user clicks a flip button the card stops
   auto-flipping and obeys the data-flip-state attribute. */
.timeline__flip[data-flip-state="front"] .timeline__flip-inner {
  animation: none;
  transform: rotateY(0deg);
  transition: transform 0.55s cubic-bezier(0.7, 0, 0.3, 1);
}

.timeline__flip[data-flip-state="back"] .timeline__flip-inner {
  animation: none;
  transform: rotateY(180deg);
  transition: transform 0.55s cubic-bezier(0.7, 0, 0.3, 1);
}

/* Expanded body: remove the 3-line clamp so users can read the whole text. */
.timeline__flip[data-expanded="true"] .timeline__flip-face--front .timeline__body {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  -webkit-box-orient: unset;
  overflow: visible;
}

.timeline__flip-face {
  grid-area: face;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem 1.1rem 1.1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--fr-blue);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.timeline__flip-face--back {
  transform: rotateY(180deg);
  padding: 0;
  overflow: hidden;
  background: var(--ink);
  border-top-color: var(--jp-red);
}

.timeline__flip-face--back picture {
  display: block;
  width: 100%;
  height: 100%;
}

.timeline__flip-face--back img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* Front text: cap body at 3 lines so card height matches other news tiles. */
.timeline__flip-face--front .timeline__body {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.timeline__flip-controls {
  margin-top: auto;
  padding-top: 0.5rem;
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  align-items: center;
}

.timeline__flip-link {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--accent);
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.timeline__flip-link:hover,
.timeline__flip-link:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.timeline__flip-link--icon::after {
  content: "↻";
  margin-left: 0.3rem;
  font-weight: 700;
}

.timeline__flip-link--overlay {
  position: absolute;
  bottom: 0.7rem;
  right: 0.7rem;
  z-index: 2;
  background: rgba(255, 255, 255, 0.92);
  border-color: transparent;
  color: var(--ink);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.timeline__flip-link--overlay:hover,
.timeline__flip-link--overlay:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.timeline__flip-face--back { position: relative; }

@keyframes timeline-flip {
  0%   { transform: rotateY(0deg); }
  42%  { transform: rotateY(0deg); }
  52%  { transform: rotateY(180deg); }
  92%  { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .timeline__flip-inner { animation: none; }
}

/* ---------- CTA sections (Fund / Join) ---------- */

.section--cta {
  background: var(--cream-2);
  padding: 4.5rem 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.section--cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(600px 200px at 20% 20%, rgba(0, 85, 164, 0.06), transparent 70%),
    radial-gradient(600px 200px at 80% 80%, rgba(188, 0, 45, 0.06), transparent 70%);
}

.section--cta h2 { margin-top: 0; font-size: clamp(1.8rem, 3.2vw, 2.4rem); }
.section--cta p  { max-width: 52rem; color: var(--ink-2); font-size: 1.02rem; }
.section--cta .btn { margin-top: 1rem; }

.section--cta-fund { border-top: 4px solid var(--fr-blue); }
.section--cta-join { border-top: 4px solid var(--jp-red); background: var(--cream-2); }

.fund__subtitle,
.join__subtitle {
  margin: 1.5rem 0 0.8rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.fund-ask {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}

.fund-ask li {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--fr-blue);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow-sm);
}

.fund-ask li:nth-child(2) { border-left-color: var(--accent); }
.fund-ask li:nth-child(3) { border-left-color: var(--jp-red); }

.fund-ask h4 {
  margin: 0 0 0.3rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-weight: 700;
}

.fund-ask p { margin: 0; font-size: 0.93rem; color: var(--ink-2); line-height: 1.5; }

.checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 0.6rem 1.5rem;
}

.checklist li {
  position: relative;
  padding-left: 1.8rem;
  color: var(--ink-2);
  font-size: 0.98rem;
  line-height: 1.5;
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--fr-blue), var(--jp-red));
  box-shadow: inset 0 0 0 3px #fff;
}

/* ---------- Risks ---------- */

.risks {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
}

.risks li {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--muted-2);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.2rem;
  box-shadow: var(--shadow-sm);
}

.risks h3 { font-family: var(--sans); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); margin: 0 0 0.4rem; font-weight: 700; }
.risks p  { margin: 0; font-size: 0.93rem; color: var(--ink-2); line-height: 1.5; }

/* ---------- Contact ---------- */

.contact { max-width: 48rem; text-align: left; }
.contact .btn { margin-top: 1rem; }

.contact-form {
  display: grid;
  gap: 1rem;
  margin-top: 1.25rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1.25rem 1.4rem;
  box-shadow: var(--shadow-sm);
}

.contact-form__row { display: grid; gap: 0.35rem; }

.contact-form label {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.contact-form input,
.contact-form textarea {
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(11, 77, 143, 0.18);
}

.contact-form textarea { resize: vertical; min-height: 8rem; line-height: 1.5; }

.contact-form .btn { justify-self: start; margin-top: 0.25rem; }

.contact-form__note {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.45;
}

.contact-form__status {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.85rem;
}

.contact-form__status--error,
.contact-form__status--server-error {
  color: var(--jp-red);
  background: rgba(188, 0, 45, 0.08);
  border-left: 3px solid var(--jp-red);
}

.contact-form__status--success {
  color: #1a5e20;
  background: rgba(46, 125, 50, 0.08);
  border-left: 3px solid #2e7d32;
}

.contact-form__status--sending {
  color: var(--accent);
  background: rgba(11, 77, 143, 0.06);
  border-left: 3px solid var(--accent);
}

/* Honeypot: invisible to humans, present in DOM so bots fill it. */
.contact-form__honey {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.contact-form button[disabled] { opacity: 0.6; cursor: not-allowed; }

/* Backwards-compat: keep the old class working in case it's cached anywhere */
.contact-form__error { color: var(--jp-red); font-weight: 600; margin: 0; }

/* External-link cue on Japanese announcements (per JP web convention) */
html[lang="ja"] #news a[target="_blank"]::after {
  content: " ↗";
  font-size: 0.85em;
  color: var(--muted);
  margin-left: 0.15em;
}

/* ---------- Footer ---------- */

.footer {
  background: var(--ink);
  color: #dcdfe4;
  padding: 2.5rem 0;
}

.footer__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: space-between;
}

.footer p { margin: 0; font-size: 0.9rem; }

.footer__small { color: #a4a8ad; font-size: 0.82rem; width: 100%; margin-top: 0.6rem; }

.footer__repo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  padding: 0.55rem 1rem;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.footer__repo:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.45); }

.footer__links {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.footer__link {
  color: #dcdfe4;
  text-decoration: none;
  font-size: 0.9rem;
  padding: 0.55rem 0.85rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  transition: color 0.12s ease, background 0.12s ease;
}

.footer__link:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }

/* ===========================================================================
   Bridge: photographic interlude between Pilot and Why
   ===========================================================================
   Image sits full-bleed at the native aspect-ratio (capped); the caption
   sits below in the regular page palette as a museum-style label
   ("kicker · italic disclosure"), so the image floats inside the
   cream-and-white visual rhythm rather than fighting it. */
.section--bridge {
  position: relative;
  margin: 0;
  padding: 2.5rem 0 2.75rem;
  background: var(--cream-2, #f6f1e1);
  overflow: hidden;
}

.bridge-figure {
  margin: 0 auto;
  /* Cap to a comfortable reading width so the image isn't an absurd full-
     screen 16:9 panorama on wide desktops; render at native aspect-ratio,
     no cropping. */
  max-width: 920px;
  padding: 0 1.25rem;
}

.bridge-figure picture {
  display: block;
  line-height: 0;
  border-radius: var(--radius-sm, 8px);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.bridge-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1040 / 594;
}

.bridge-figure__caption {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.45rem 1.3rem;
  align-items: baseline;
  margin: 0.9rem 0.25rem 0;
  padding: 0;
  background: transparent;
  color: var(--ink-2);
  font-family: var(--sans);
  border-top: 0;
}

.bridge-figure__kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

.bridge-figure__disclosure {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--muted);
  line-height: 1.5;
}
.bridge-figure__disclosure em { font-style: italic; color: var(--ink); font-weight: 500; }

@media (max-width: 720px) {
  .bridge-figure img { max-height: 260px; }
  .bridge-figure__caption {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
  .bridge-figure__kicker { white-space: normal; }
}


/* ===========================================================================
   Round 2 of design review — hero / footer / brand-mark / bridge motif
   =========================================================================== */

/* Hero brand lockup: small line above the descriptive H1.
   Text is white-on-gradient, so the eyebrow uses translucent white. */
.hero__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.85);
}

.hero__brand-mark {
  display: inline-flex;
  align-items: center;
  isolation: isolate;
  height: 14px;
  /* Tiny white halo behind the dots so they remain readable on any gradient stop */
  padding: 2px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 999px;
}
.hero__brand-mark .brand-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
  mix-blend-mode: multiply;
}
.hero__brand-mark .brand-dot--blue { background: var(--fr-blue); }
.hero__brand-mark .brand-dot--red  { background: var(--jp-red); margin-left: -5px; }

.hero__brand-name {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #fff;
}

.hero__brand-eyebrow {
  color: rgba(255, 255, 255, 0.78);
}
.hero__brand-eyebrow::before {
  content: "·";
  margin: 0 0.55em;
  color: rgba(255, 255, 255, 0.5);
}

/* Status badge in the hero — keeps the "no patient data" trust signal
   permanently visible above the fold. Translucent-white over hero gradient. */
.hero__status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.75rem;
  margin: 0.55rem 0 0.85rem;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border-left: 3px solid rgba(255, 255, 255, 0.85);
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.4;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.hero__status::before {
  content: "●";
  color: #6ee7b7;
  margin-right: 0.1em;
  font-size: 0.65em;
}

/* Apply the same overlapping-dot brand-mark to the topbar so the motif
   recurs at every scale (hero, topbar, footer favicon-style). */
.topbar__brand .brand-dot { mix-blend-mode: multiply; }
.topbar__brand .brand-dot--red { margin-left: -5px; }

/* Bridge-motif divider: a thin gradient hairline between bands —
   "France blue → neutral → Japan red" carrying the federation idea
   silently across the page. */
.section--band + .section,
.section + .section--band,
.section--cta + .section,
.section + .section--cta {
  position: relative;
}
.section + .section::before,
.section + .section--band::before,
.section + .section--cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, 70vw);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 85, 164, 0.0) 5%,
    rgba(0, 85, 164, 0.55) 30%,
    rgba(94, 50, 95, 0.55) 50%,
    rgba(188, 0, 45, 0.55) 70%,
    rgba(188, 0, 45, 0.0) 95%,
    transparent 100%
  );
  opacity: 0.7;
  pointer-events: none;
}

/* Multi-column footer with institutional anchoring */
.footer__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.2fr;
  gap: 2.5rem;
  align-items: start;
}

.footer__col {
  font-size: 0.88rem;
  line-height: 1.55;
  color: #c8ccd2;
}
.footer__col p { color: inherit; margin: 0 0 0.5rem; font-size: inherit; }
.footer__col a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  transition: border-color 0.12s ease, color 0.12s ease;
}
.footer__col a:hover,
.footer__col a:focus-visible {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.7);
}

.footer__heading {
  font-family: var(--sans);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #fff;
  font-weight: 700;
  margin-top: 1.1rem;
}
.footer__heading:first-child { margin-top: 0; }

.footer__inst-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.5rem;
  display: grid;
  gap: 0.35rem;
}
.footer__inst-list--two-col { grid-template-columns: 1fr 1fr; gap: 0.35rem 1rem; }

.footer__col--legal { font-size: 0.82rem; color: #a4a8ad; }
.footer__col--legal p { font-size: inherit; }
.footer__col--legal .footer__small { width: auto; margin-top: 0.6rem; }
.footer__updated { color: #888c92; font-size: 0.78rem; }

@media (max-width: 920px) {
  .footer__inner { grid-template-columns: 1fr; gap: 1.75rem; }
  .footer__inst-list--two-col { grid-template-columns: 1fr; }
}

/* ===========================================================================
   Accessibility, mobile-UX, and visual-polish improvements (post design review)
   =========================================================================== */

/* ===========================================================================
   Card system unification — single set of tokens used by every card variant
   =========================================================================== */
/* Every card-shaped element on the site (announcements, deliverables,
   roadmap, partners, risks, fund-ask, person, thanks) shares the same
   padding, border-radius, top-border accent, shadow, and hover lift. */
:root {
  --card-pad-y: 1.1rem;
  --card-pad-x: 1.15rem;
  --card-radius: var(--radius-sm);
  --card-shadow: var(--shadow-sm);
  --card-shadow-hover: var(--shadow-md);
  --card-border: 1px solid var(--line);
  --card-accent: 3px solid var(--accent);
  --card-bg: #fff;
}

.timeline li,
.timeline__flip-face,
.roadmap li,
.fund-ask li,
.risks li,
.partners__card {
  padding: var(--card-pad-y) var(--card-pad-x);
  background: var(--card-bg);
  border: var(--card-border);
  border-top: var(--card-accent);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.timeline li:hover,
.roadmap li:hover,
.fund-ask li:hover,
.risks li:hover,
.partners__card:hover {
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-2px);
}

/* .stack__item is now a row inside the spec-sheet panel — see the
   .stack rules earlier. We deliberately do NOT apply the generic card
   token padding/border/shadow here, so each row reads as a row, not
   as a free-floating card. */

/* H3 type-ramp fix — avoid the cliff between H2 (~2rem) and body (~1rem) */
h3 {
  font-size: clamp(1.2rem, 1.6vw, 1.4rem);
  line-height: 1.35;
}

/* Negative tracking is for display sizes only; reset at H3/H4 */
h3, h4 { letter-spacing: 0; }

/* Multi-script line-height: CJK glyphs need looser leading than Latin */
html[lang="ja"] body { line-height: 1.8; }
html[lang="ja"] h1, html[lang="ja"] h2, html[lang="ja"] h3, html[lang="ja"] h4 {
  line-height: 1.4; letter-spacing: 0;
}

/* Tighter prose container for text-only sections */
.container--prose { max-width: 48rem; }

/* Drop the nth-child color cycling on cards: card colour was decorative,
   never semantic. Reserve fr-blue/jp-red for actual Caen-vs-Nagoya markers. */
.timeline li:nth-child(even),
.timeline li:nth-child(4n+3),
.roadmap li:nth-child(even),
.roadmap li:nth-child(4n+3) { border-top-color: var(--accent); }

/* Funding callout: drop the JP-red bar (could imply Japan-only funding) */
.funding { border-left-color: var(--accent); }
.funding h3 { color: var(--accent); }

/* Abbr touch fallback: on no-hover devices, append the gloss inline so it's
   visible (instead of relying on a hover/focus tooltip that touch can't trigger) */
@media (hover: none) {
  abbr[aria-label]::after {
    content: " (" attr(aria-label) ")";
    font-size: 0.85em;
    color: var(--muted);
    font-style: italic;
  }
}

/* Contact form per-field error display */
.contact-form__field-error {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.85rem;
  color: var(--jp-red);
  font-weight: 500;
}

.contact-form input[aria-invalid="true"],
.contact-form textarea[aria-invalid="true"] {
  border-color: var(--jp-red);
  box-shadow: 0 0 0 1px var(--jp-red);
}

.contact-form__optional {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.85em;
}

/* Mobile-nav: max-height + scroll on small landscape phones; smoother look */
@media (max-width: 920px) {
  .topbar__nav.is-open {
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Mobile: drop backdrop-filter on small viewports (GPU-expensive) */
@media (max-width: 720px), (prefers-reduced-transparency: reduce) {
  .topbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.96);
  }
}

/* Reduced-motion: also halt the news flip-card outer rotation, not just inner */
@media (prefers-reduced-motion: reduce) {
  .timeline__flip-inner { animation: none !important; transform: none !important; }
}

/* ---------- Per-language team ordering (JA: Nishida first, then Basile, then Charles) ---------- */

[lang="ja"] .team .person[data-person="nishida"] { order: -3; }
[lang="ja"] .team .person[data-person="basile"]  { order: -2; }
[lang="ja"] .team .person[data-person="charles"] { order: -1; }

/* ---------- News article page (news.html?id=X) ---------- */

.news-article {
  background: var(--cream);
  padding: 3rem 0 4rem;
  min-height: calc(100vh - 240px);
}

.news-article > .container { max-width: 48rem; }

.news-article__back { margin: 0 0 1.5rem; font-size: 0.92rem; }
.news-article__back--bottom { margin: 2.5rem 0 0; }

.news-article__back a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
  padding: 0.4rem 0;
}

.news-article__back a:hover,
.news-article__back a:focus-visible { color: var(--jp-red); text-decoration: underline; }

.news-article__header { margin: 0 0 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }

.news-article__header .kicker { margin-bottom: 0.75rem; }

.news-article__date {
  display: block;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.news-article__title {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  line-height: 1.25;
  margin: 0;
  color: var(--ink);
}

.news-article__body {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0 0 1.5rem;
}

.news-article__body p:first-child { margin-top: 0; }

.news-article__body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.news-article__body a:hover { color: var(--jp-red); }

.news-article__figure {
  margin: 1.5rem 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.news-article__figure img {
  width: 100%;
  height: auto;
  display: block;
}

/* External-link cue on Japanese news article page (per JP web convention) */
html[lang="ja"] .news-article__body a[target="_blank"]::after {
  content: " ↗";
  font-size: 0.85em;
  color: var(--muted);
  margin-left: 0.15em;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .fed-line, .fed-node__halo { animation: none !important; }
}