/* The approved About composition now moves from daylight into the night-side Earth. */
body.about-page {
  --text: #172a43;
  --muted: #50657f;
  --soft: #71829a;
  --stroke: rgba(34, 78, 128, .16);
  background: #f9fbff;
  color: var(--text);
  color-scheme: light;
}
body.about-page::before,
body.about-page > .ambient-field { display: none; }

/* Keep navigation legible through dusk, then turn it dark near the planet. */
.about-page .site-header {
  background: #fff;
  border-bottom-color: #dce6f1;
  box-shadow: 0 6px 25px #173e6810;
  backdrop-filter: blur(18px);
  transition: background-color .26s ease, border-color .26s ease;
}
.about-page .site-header .brand,
.about-page .site-header .main-nav a,
.about-page .site-header .header-login {
  color: #213b5b;
  transition: color .26s ease;
}
.about-page .site-header .main-nav a:is(:hover, [aria-current="page"]) {
  background: #e9f2fb;
}
.about-page .site-header :is(.icon-btn, .lang-main, .avatar-button, .motion-toggle) {
  color: #22466e;
  background: #fff;
  border-color: #d7e4f2;
}
.about-page .site-header :is(.btn-primary, .btn-secondary) {
  background: #286ab3;
  border-color: transparent;
  color: #fff;
  box-shadow: none;
}
.about-page.about-night-chrome .site-header {
  background: #071829;
  border-bottom-color: #315777;
}
.about-page.about-night-chrome .site-header :is(.brand, .main-nav a, .header-login) { color: #eff6ff; }
.about-page.about-night-chrome .site-header .main-nav a:is(:hover, [aria-current="page"]) { background: #d4e8fa22; }
.about-page.about-night-chrome .site-header :is(.icon-btn, .lang-main, .avatar-button, .motion-toggle) {
  color: #e4f1ff;
  background: #17314b;
  border-color: #80b4e988;
}
.about-page.about-night-chrome .site-header :is(.btn-primary, .btn-secondary) { background: #1a568a; }

.about-main {
  background:
    radial-gradient(ellipse 34% 14% at 89% 39%, #b9d8f742, transparent 80%),
    radial-gradient(ellipse 44% 14% at 6% 60%, #ccdef333, transparent 84%),
    linear-gradient(180deg,
      #ffffff 0%, #f9fbff 19%, #f1f7fd 34%, #deebf8 47%,
      #8eabc9 59%, #456b8e 68%, #173653 78%, #061c30 88%, #031320 100%);
}
.about-page .about-hero h1,
.about-page .story-heading h2 { color: #152d49; }
.about-page .about-eyebrow,
.about-page .about-motto { color: #2b689e; }
.about-page .about-motto > span:first-child { background: #78aeda; }
.about-page .about-intro,
.about-page .story-heading > p:last-child { color: #4c627d; }
.about-page .story-heading::before {
  background: linear-gradient(90deg, transparent, #8baecc88, transparent);
}

/* Each chapter keeps sufficient contrast as the paper gives way to dusk. */
.about-page .story-step:nth-child(-n+4) .story-copy h3 { color: #112c49; }
.about-page .story-step:nth-child(-n+4) .story-copy p { color: #17324f; }
.about-page .story-step:nth-child(4) .story-copy { isolation: isolate; }
.about-page .story-step:nth-child(4) .story-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -18px -24px -25px;
  pointer-events: none;
  background: radial-gradient(ellipse at center, #e7f3ffbd, #e7f3ff7d 40%, transparent 78%);
  filter: blur(12px);
}
.about-page .story-step:nth-child(-n+4) .story-node {
  color: #245b8d;
  background: radial-gradient(circle at 27% 17%, #fff, #d9eaf9 82%);
  border-color: #88b6d9;
  box-shadow: 0 7px 22px #285c8b1a, inset 0 1px #fff;
}
.about-page .story-step:nth-child(n+5) .story-copy h3 { color: #f4f8fd; }
.about-page .story-step:nth-child(n+5) .story-copy p { color: #dfecf8; }
.about-page .story-step:nth-child(n+5) .story-node {
  color: #f4f9ff;
  background: radial-gradient(circle at 30% 15%, #316996, #092840 78%);
}
.about-page .story-timeline::before { background: linear-gradient(#8db4d34d, #80bfe377); }
.about-page .story-timeline::after { background: linear-gradient(#729fc8, #83d4ff); }
.about-page .about-earth { background: transparent; }
.about-page .site-footer {
  --text: #f2f7fd;
  --muted: #b5c6d8;
  --soft: #91a5bb;
  color: var(--text);
  background: #031320;
  border-top: 1px solid #416a8d66;
}

@media (prefers-reduced-motion: reduce) {
  .about-page .site-header { transition: none; }
  .about-page .founder-marker svg { animation: none; }
}