/* Daylight surfaces share the global theme tokens. The original portrait,
   sleeve, laptop, plant and Earth retain their colours and proportions. */
html[data-theme='light'] .about-page {
  --accent: inherit;
  background: var(--bg);
  color: var(--text);
}

/* Share the homepage's daylight space environment. Only decorative background
   layers change: the real Kai portrait, sleeve and laptop stay pixel-identical. */
html[data-theme='light'] .about-page .about-hero-shell {
  background: linear-gradient(180deg, #f3f8fccc, #f3f8fc00 155px),
    url('assets/light-space-earth.webp') center top / cover no-repeat,
    var(--bg);
}

html[data-theme='light'] .about-page .about-hero-shell::before,
html[data-theme='light'] .about-page .about-hero__earth {
  display: none;
}

html[data-theme='light'] .about-page .about-hero__space {
  background: none;
}

html[data-theme='light'] .about-page .about-hero-shell::after {
  height: 34px;
  background: linear-gradient(180deg, transparent, var(--bg));
}

html[data-theme='light'] .about-page .about-hero__table {
  background: #d4e2eb url('assets/about/table-daylight.webp') center / cover no-repeat;
  background-blend-mode: normal;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000);
  mask-image: linear-gradient(180deg, transparent, #000 14%, #000);
}

/* The transparent original plant is shared by both themes. */
html[data-theme='light'] .about-page .about-hero__plant::after {
  background: #28405240;
}

html[data-theme='light'] .about-page .about-hero h1,
html[data-theme='light'] .about-page .journey-section h2 {
  color: var(--text);
}

html[data-theme='light'] .about-page .about-hero-subtitle {
  color: var(--body);
}

html[data-theme='light'] .about-page .journey-section {
  background: var(--bg);
}

/* Use the original connector silhouettes, with a cyan that remains readable
   on the daylight canvas. No glow or redrawn arrow is needed. */
html[data-theme='light'] .about-page .journey-wrap::before,
html[data-theme='light'] .about-page .journey-wrap::after {
  background: var(--accent);
  -webkit-mask: var(--journey-connector) center / 100% 100% no-repeat;
  mask: var(--journey-connector) center / 100% 100% no-repeat;
  filter: none;
}

html[data-theme='light'] .about-page .journey-wrap::before {
  --journey-connector: url('assets/about/journey-connector-1.svg');
}

html[data-theme='light'] .about-page .journey-wrap::after {
  --journey-connector: url('assets/about/journey-connector-2.svg');
}

html[data-theme='light'] .about-page .journey-card {
  --journey-art-height: calc(11.8 * var(--about-unit));
  border-color: #a6c2d2;
  background: var(--surface);
  box-shadow: 0 5px 16px #1c567112;
}

/* A crisp photograph above a solid light text surface preserves the artwork's
   colour and detail. The existing icon naturally overlaps this boundary. */
html[data-theme='light'] .about-page .journey-card::before {
  inset: 0 0 auto;
  height: var(--journey-art-height);
  background-position: center 62%;
  /* Zoom the image inside the fixed photo band, so its lower edge remains
     aligned with the white text panel while baked-in image borders disappear. */
  background-size: 106% auto;
  transform: none;
}

html[data-theme='light'] .about-page .journey-card::after {
  inset: 0 0 auto;
  height: var(--journey-art-height);
  border-bottom: 1px solid #a6c2d2;
  background: linear-gradient(180deg, #00142670, #0014260d 75%);
}

html[data-theme='light'] .about-page .journey-card:hover,
html[data-theme='light'] .about-page .journey-card:focus-visible,
html[data-theme='light'] .about-page .journey-card.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px #007f9c1a, 0 8px 25px #007f9c17;
}

html[data-theme='light'] .about-page .journey-time {
  color: #fff;
  text-shadow: 0 1px 3px #001426;
}

html[data-theme='light'] .about-page .journey-icon {
  border-color: #498ca7;
  background: var(--surface);
  box-shadow: 0 2px 10px #001e3733;
  color: var(--accent);
}

html[data-theme='light'] .about-page .journey-card h3,
html[data-theme='light'] .about-page .fact-item {
  color: var(--text);
}

html[data-theme='light'] .about-page .journey-subtitle,
html[data-theme='light'] .about-page .journey-text {
  color: var(--body);
}

html[data-theme='light'] .about-page .journey-arrow {
  border-color: #76aabd;
  background: #ecf7fb;
  color: var(--accent);
}

html[data-theme='light'] .about-page .quick-facts {
  border-color: #a6c2d2;
  background: var(--surface);
  box-shadow: 0 3px 12px #1c567108;
}

html[data-theme='light'] .about-page .fact-item + .fact-item::before {
  border-color: #bfd4df;
}

html[data-theme='light'] .about-page .journey-track {
  scrollbar-color: #7dc6d6 #e7f3f8;
}

@media (max-width: 900px) {
  html[data-theme='light'] .about-page .journey-card {
    --journey-art-height: 119px;
  }
  html[data-theme='light'] .about-page .fact-item:nth-child(n+3) {
    border-color: var(--line);
  }
}

@media (max-width: 900px) {
  html[data-theme='light'] .about-page .about-hero-shell {
    background-position: center, 64% top;
  }
}