/* Fixed chapter palettes: the visitor scrolls into a colour, never recolours it.
 * Transition strips live in document flow between readable chapter surfaces.
 * This works without scripts, with reduced motion and at restored positions. */
:root { --chapter-transition: clamp(96px, 12vw, 190px); }
body { background: var(--paper); color: var(--ink); }
.chapter { position: relative; }
.chapter-idea { background: linear-gradient(180deg, #eef3fb, #deebfa); }
.theme-dark { background: #08182d; color: var(--ink); }
.chapter-process { margin-block: var(--chapter-transition); }
.chapter-future { margin-top: var(--chapter-transition); }
.chapter-process::before,
.chapter-process::after,
.chapter-future::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: calc(var(--chapter-transition) + 1px);
  pointer-events: none;
}
.chapter-process::before {
  bottom: calc(100% - 1px);
  background: linear-gradient(180deg, #deebfa, #b7c9df 22%, #647c9a 52%, #20364f 78%, #08182d);
}
.chapter-process::after {
  top: calc(100% - 1px);
  background: linear-gradient(180deg, #08182d, #20364f 22%, #7188a3 53%, #cbd8e9 79%, #eef3fb);
}
.chapter-future::before {
  bottom: calc(100% - 1px);
  background: linear-gradient(180deg, #eef3fb, #cbd8e9 22%, #7188a3 52%, #20364f 78%, #08182d);
}
/* Keep the explanation airy without overextending the empty chapter margins. */
.chapter-process { padding-block: clamp(72px, 7vw, 132px); }
.chapter-future { padding-top: clamp(72px, 7vw, 132px); }
.chapter-contribution { padding-top: clamp(72px, 7vw, 132px); }
.theme-dark .chapter-kicker { color: #a7bbd5; }
.theme-dark .chapter-kicker > span:first-child::before { background: #88baff; }
.theme-dark .processing-steps h3,
.theme-dark .future-other h3 { color: #edf5ff; }
.theme-dark .processing-steps p,
.theme-dark .future-intro,
.theme-dark .future-other p { color: #a7bbd5; }
.site-footer { background: #08182d; }
[data-render-near] { will-change: transform; }
/* A fixed backdrop blur samples the moving page on every scroll frame. This
 * small control can use an opaque surface without filtering the page below. */
.back-to-top { backdrop-filter: none; -webkit-backdrop-filter: none; background: #f7fbff; }
[data-motion-reveal-state="entering"],
[data-motion-reveal-state="leaving"],
[data-motion-hero="waiting"],
[data-motion-hero="revealing"] { will-change: transform, opacity; }
.animated-details[data-motion-details-state="opening"] > .detail-content,
.animated-details[data-motion-details-state="closing"] > .detail-content { overflow: hidden; overflow: clip; }
.animated-details[data-motion-details-state="open"] > .detail-content { overflow: visible; }
.animated-details[data-motion-details-state="closing"] > summary > span:last-child { transform: rotate(0deg); }
.animated-details[data-motion-details-state="opening"] > summary > span:last-child { transform: rotate(45deg); }
html[data-motion-dialog-open], html[data-motion-scroll-locked] { overflow: hidden; }
dialog { max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal-v2], [data-hero-reveal] { opacity: 1 !important; filter: none !important; transform: none !important; }
}