/* finesse · register=brand · A=mist-blue + red/amber signals · B=Noto Serif TC / Noto Sans TC · C=open 9-stop route + chapter-specific layouts · D=scroll-spy waterline + CSS image response · E=scientific atlas / water journey · SOUL=8 SPECTACLE=5 DENSITY=4 */
/* A water-science atlas: one pale page, one continuous route, chapter-specific compositions. */
:root {
  --wj-paper: #f3f8f8;
  --wj-page: #eaf4f5;
  --wj-surface: #f9fcfb;
  --wj-ink: #203f48;
  --wj-deep: #2e6675;
  --wj-muted: #536e75;
  --wj-water: #78b7c4;
  --wj-line: rgba(49, 111, 126, 0.17);
  --wj-red: #934b45;
  --wj-amber: #795b29;
}

html { background: var(--wj-paper); scroll-behavior: smooth; overflow-x: clip; }
body.water-journey {
  color: var(--wj-ink);
  background: var(--wj-paper);
  overflow-x: clip;
}
.water-journey .aurora { display: none; }
.water-journey header.site {
  min-height: 72px;
  background: #f5f9f8;
  border-bottom: 1px solid var(--wj-line);
  box-shadow: none;
}
.water-journey .brand { color: var(--wj-ink); letter-spacing: 0.01em; }
.water-journey .nav-desk a { color: var(--wj-muted); }
.water-journey .nav-desk a:hover,
.water-journey .nav-desk a.is-on { color: var(--wj-deep); }
.water-journey .topbar { height: 3px; background: rgba(72, 143, 157, 0.12); }
.water-journey .topbar span { background: linear-gradient(90deg, #83c4ce, #4c9dad); }

/* Hero: a photographic specimen with room for a confident, readable statement. */
.water-journey .hero {
  position: relative;
  min-height: min(790px, calc(100svh - 72px));
  padding: clamp(64px, 7vw, 104px) 0 clamp(66px, 7vw, 96px);
  overflow: hidden;
  isolation: isolate;
  color: var(--wj-ink);
  background: linear-gradient(118deg, #eaf5f6 0%, #f6faf9 51%, #e6f2f3 100%);
}
.water-journey .hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -400px;
  right: -270px;
  width: min(76vw, 1020px);
  aspect-ratio: 1;
  border: 1px solid rgba(66, 143, 158, 0.15);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(66, 143, 158, 0.035), 0 0 0 74px rgba(66, 143, 158, 0.025), 0 0 0 132px rgba(66, 143, 158, 0.018);
}
.water-journey .hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -14vw;
  bottom: -36vw;
  width: min(60vw, 760px);
  aspect-ratio: 1;
  border: 1px solid rgba(66, 143, 158, 0.12);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(66, 143, 158, 0.025), 0 0 0 54px rgba(66, 143, 158, 0.018);
}
.water-journey .hero-grid {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0, 1.12fr) minmax(310px, 0.78fr);
  align-items: center;
  gap: clamp(42px, 7vw, 104px);
}
.water-journey .hero-copy { max-width: 760px; }
.water-journey .hero .kicker {
  max-width: 28em;
  margin: 0 0 clamp(22px, 2.3vw, 34px);
  color: #377f8f;
  font-size: clamp(19px, 1.45vw, 23px);
  font-weight: 700;
  letter-spacing: 0.015em;
  line-height: 1.62;
  text-wrap: pretty;
}
.water-journey .hero h1 {
  max-width: 12em;
  margin: 0 0 20px;
  color: #213f48;
  font-size: clamp(48px, 5.1vw, 72px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.water-journey .hero h1 span { color: #2d6574; }
.water-journey .hero .sub {
  max-width: 33em;
  margin-bottom: 28px;
  color: #5b747b;
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.85;
}
.water-journey .hero .btn.primary {
  color: #f5faf9;
  background: #34788a;
  box-shadow: 0 9px 24px rgba(35, 91, 107, 0.18);
}
.water-journey .hero .btn.ghost {
  color: #356f7d;
  border-color: rgba(49, 111, 126, 0.23);
  background: rgba(248, 252, 251, 0.68);
}
.water-journey .hero-photo {
  position: relative;
  width: min(100%, 470px);
  justify-self: end;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.water-journey .hero-photo::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -22px -17px 52px -17px;
  border: 1px solid rgba(67, 145, 161, 0.2);
  border-radius: 48% 48% 45% 45%;
  box-shadow: 0 0 0 14px rgba(67, 145, 161, 0.035);
}
.water-journey .hero-photo img {
  display: block;
  width: 100%;
  min-height: 0;
  aspect-ratio: 0.84;
  object-fit: cover;
  object-position: 56% center;
  border: 0;
  border-radius: 48% 48% 7px 7px;
  box-shadow: 0 25px 58px rgba(44, 91, 104, 0.16);
}
.water-journey .hero-photo figcaption {
  position: static;
  max-width: 34em;
  margin: 0 0 0 auto;
  padding: 17px 0 0;
  color: var(--wj-muted);
  background: none;
  border: 0;
  box-shadow: none;
  font-size: 13px;
  line-height: 1.7;
  text-align: right;
}

/* Chapter map: an open contents page, not a wall of nine identical cards. */
.water-journey .chapter-map {
  padding: clamp(68px, 8vw, 112px) 0 clamp(78px, 8vw, 116px);
  background: var(--wj-paper);
  border-bottom: 1px solid var(--wj-line);
}
.water-journey .chapter-map-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.55fr);
  align-items: start;
  gap: clamp(40px, 7vw, 100px);
}
.water-journey .chapter-map-copy { max-width: 410px; }
.water-journey .chapter-map .eyebrow {
  margin-bottom: 18px;
  color: #3b7886;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.09em;
}
.water-journey .chapter-map h2 {
  margin: 0 0 17px;
  color: var(--wj-ink);
  font-size: clamp(31px, 3.3vw, 43px);
  line-height: 1.28;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.water-journey .map-intro {
  max-width: 27em;
  margin: 0;
  color: var(--wj-muted);
  font-size: 16px;
  line-height: 1.85;
}
.water-journey .journey-index {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(20px, 3vw, 42px);
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--wj-line);
  list-style: none;
}
.water-journey .journey-index li { min-width: 0; border-bottom: 1px solid var(--wj-line); }
.water-journey .journey-index a {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 9px;
  min-height: 82px;
  padding: 14px 0;
  color: var(--wj-ink);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 15px;
  line-height: 1.55;
  transition: color 180ms ease, transform 220ms ease;
}
.water-journey .journey-index a::after { display: none; }
.water-journey .journey-index small {
  margin: 0;
  color: #3e7582;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.04em;
}
.water-journey .journey-arrow {
  color: #3e7280;
  opacity: 0;
  transform: translate(-3px, 3px);
  transition: opacity 180ms ease, transform 180ms ease;
}
.water-journey .journey-index a:hover { color: #2d7182; background: transparent; box-shadow: none; transform: translateX(3px); }
.water-journey .journey-index a:hover .journey-arrow,
.water-journey .journey-index a:focus-visible .journey-arrow { opacity: 1; transform: none; }
.water-journey .journey-index a:focus-visible { outline: 2px solid #4a9aaa; outline-offset: 3px; }

/* Longform rhythm: editorial space, fine rules, and layouts shaped by each chapter. */
.water-journey .chapter {
  position: relative;
  padding: clamp(84px, 9vw, 128px) 0;
  overflow: hidden;
  background: #f8fbfa;
  border-bottom: 1px solid rgba(49, 111, 126, 0.1);
}
.water-journey .chapter:nth-child(even) { background: #edf5f6; }
.water-journey .chapter::before {
  top: 34px;
  right: clamp(30px, 9vw, 148px);
  color: transparent;
  -webkit-text-stroke: 1px rgba(46, 105, 119, 0.105);
  font-size: clamp(142px, 20vw, 250px);
  line-height: 0.9;
  opacity: 0.72;
}
.water-journey .chapter .wrap { position: relative; z-index: 1; }
.water-journey .chapter .chapter-index {
  gap: 11px;
  margin-bottom: 17px;
  color: #3d7481;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.water-journey .chapter .chapter-index::before { width: 32px; background: #82bdc8; }
.water-journey .chapter .wrap > h2 {
  max-width: 17em;
  margin-bottom: 18px;
  color: var(--wj-ink);
  font-size: clamp(34px, 3.4vw, 49px);
  line-height: 1.23;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.water-journey .chapter .lead {
  max-width: 43em;
  margin-bottom: clamp(30px, 4vw, 48px);
  color: var(--wj-muted);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.82;
}
.water-journey .split,
.water-journey .two { align-items: center; gap: clamp(30px, 5vw, 70px); }
.water-journey .chapter figure img {
  border-radius: 8px 44% 8px 8px;
  background: #e7f1f2;
  box-shadow: 0 18px 44px rgba(41, 88, 100, 0.12);
}
.water-journey figure figcaption {
  padding: 12px 2px 0;
  color: #657c81;
  font-size: 13px;
  line-height: 1.7;
}
.water-journey .chapter .card,
.water-journey .chapter .scene,
.water-journey .chapter .note,
.water-journey .chapter .take,
.water-journey .chapter .channel-scale,
.water-journey .chapter .nobel-feature {
  border-color: var(--wj-line);
  background: rgba(249, 252, 251, 0.74);
  box-shadow: 0 10px 28px rgba(39, 84, 95, 0.055);
}
.water-journey .chapter .take {
  margin-top: 28px;
  border-left: 2px solid #77b4c0;
  border-radius: 0 8px 8px 0;
}
.water-journey .chapter .cards { gap: 0; }
.water-journey .chapter .cards .card {
  min-width: 0;
  padding: 22px 24px;
  border: 0;
  border-top: 1px solid var(--wj-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.water-journey .chapter .cards .card + .card { border-left: 1px solid var(--wj-line); }
.water-journey .chapter .cards .card h3 { color: var(--wj-deep); font-size: 22px; letter-spacing: -0.02em; }
.water-journey .chapter .cards .card p { color: #5d747a; font-size: 15px; line-height: 1.85; }

/* Chapter 02 reads as three body functions; chapter 07 gives the middle estimate room. */
.water-journey .chapter[data-chapter="02"] .cards { grid-template-columns: 1fr; border-top: 1px solid var(--wj-line); }
.water-journey .chapter[data-chapter="02"] .cards .card {
  display: grid;
  grid-template-columns: minmax(150px, 0.42fr) minmax(0, 1fr);
  align-items: baseline;
  gap: 22px;
  padding: 19px 0;
}
.water-journey .chapter[data-chapter="02"] .cards .card + .card { border-left: 0; }
.water-journey .chapter[data-chapter="02"] .cards .card h3,
.water-journey .chapter[data-chapter="02"] .cards .card p { margin: 0; }
.water-journey .chapter[data-chapter="07"] .cards { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.4fr) minmax(0, 0.9fr); }
.water-journey .chapter[data-chapter="07"] .cards .card:nth-child(2) { background: rgba(229, 242, 243, 0.58); }

/* Chapter-specific signals: the palette follows the science, not decoration. */
.water-journey .chapter[data-chapter="03"] .channel-scale {
  border-radius: 4px 20px 4px 20px;
  background: #e8f2f3;
  box-shadow: none;
}
.water-journey .chapter[data-chapter="04"] { background: #f8f3f1; }
.water-journey .chapter[data-chapter="04"] .chapter-index { color: var(--wj-red); }
.water-journey .chapter[data-chapter="04"] .chapter-index::before { background: #c77c70; }
.water-journey .chapter[data-chapter="04"] figure img { border-radius: 42% 8px 8px 8px; }
.water-journey .chapter[data-chapter="05"] .organ-layout { align-items: start; gap: 28px; }
.water-journey .chapter[data-chapter="05"] .organ-list button {
  color: var(--wj-muted);
  border: 0;
  border-bottom: 1px solid var(--wj-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}
.water-journey .chapter[data-chapter="05"] .organ-list button[aria-selected="true"] {
  color: var(--wj-deep);
  border-bottom-color: #4f9bab;
  background: transparent;
}
.water-journey .chapter[data-chapter="06"] { background: #f7f5ef; }
.water-journey .chapter[data-chapter="06"] .chapter-index { color: var(--wj-amber); }
.water-journey .chapter[data-chapter="06"] .chapter-index::before { background: #c6a15d; }
.water-journey .chapter[data-chapter="06"] .urine-scale li {
  border-color: rgba(142, 115, 61, 0.16);
  background: rgba(251, 250, 246, 0.88);
  box-shadow: 0 8px 22px rgba(92, 77, 45, 0.045);
}
.water-journey .chapter[data-chapter="06"] .urine-scale strong { color: #705b32; }
.water-journey .chapter[data-chapter="09"] .myth {
  margin: 0;
  padding: 18px 0;
  border: 0;
  border-top: 1px solid var(--wj-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.water-journey .chapter[data-chapter="09"] .myth:last-child { border-bottom: 1px solid var(--wj-line); }
.water-journey .chapter[data-chapter="09"] .myth summary {
  color: var(--wj-ink);
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 600;
  line-height: 1.55;
}
.water-journey .chapter[data-chapter="09"] .myth[open] summary { color: var(--wj-deep); }
.water-journey .chapter[data-chapter="09"] .myth p { max-width: 54em; color: var(--wj-muted); line-height: 1.82; }

/* Reading route: the progress marks become a quiet waterline. */
.water-journey .progress-rail {
  color: var(--wj-muted);
  background: transparent;
  border: 0;
  box-shadow: none;
}
.water-journey .progress-rail-label {
  color: #4c717a;
  font-size: 11px;
  letter-spacing: 0.12em;
}
.water-journey .progress-links {
  position: relative;
  gap: 5px;
  padding: 9px 7px;
  overflow: visible;
  background: rgba(248, 252, 251, 0.82);
  border: 1px solid rgba(49, 111, 126, 0.12);
  box-shadow: 0 8px 24px rgba(39, 84, 95, 0.055);
}
.water-journey .progress-links::before {
  content: "";
  position: absolute;
  top: 17px;
  bottom: 17px;
  left: 50%;
  width: 1px;
  background: rgba(72, 145, 159, 0.24);
  transform: translateX(-50%);
}
.water-journey .progress-links a {
  position: relative;
  z-index: 1;
  width: 17px;
  height: 17px;
  color: #466c74;
  background: #f5faf9;
  border: 1px solid rgba(64, 136, 151, 0.27);
  box-shadow: none;
}
.water-journey .progress-links a span { font-size: 8px; }
.water-journey .progress-links a.is-on {
  color: #f8fbfa;
  background: #34788a;
  border-color: #34788a;
  transform: scale(1.16);
}
.water-journey .progress-current { color: #397786; font-size: 11px; font-variant-numeric: tabular-nums; }
.water-journey .drawer {
  background: #f4f9f8;
  border: 1px solid var(--wj-line);
  box-shadow: 0 18px 50px rgba(39, 84, 95, 0.16);
}

/* Gentle, intentional feedback. Content stays present without generic fade-up reveals. */
.water-journey .rise,
.water-journey .rise.in { opacity: 1 !important; transform: none !important; transition: none !important; }
.water-journey .hero-photo img,
.water-journey .chapter figure img { transition: transform 650ms cubic-bezier(0.2, 0.7, 0.2, 1); }
@media (hover: hover) and (pointer: fine) {
  .water-journey .hero-photo:hover img,
  .water-journey .chapter figure:hover img { transform: scale(1.018); }
}
.water-journey a:focus-visible,
.water-journey button:focus-visible,
.water-journey summary:focus-visible {
  outline: 2px solid #438d9c;
  outline-offset: 3px;
}
.water-journey .sources {
  background: #eaf3f4;
  border-top: 1px solid var(--wj-line);
}
.water-journey .source-list li {
  border-color: var(--wj-line);
  border-radius: 4px;
  background: rgba(248, 252, 251, 0.64);
  box-shadow: none;
}
.water-journey footer.site { color: #eaf4f4; background: #355660; }

@media (max-width: 980px) {
  .water-journey .hero { min-height: 0; padding: 62px 0 68px; }
  .water-journey .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 42px; }
  .water-journey .hero-copy { max-width: 760px; }
  .water-journey .hero-photo { width: min(76%, 560px); justify-self: center; }
  .water-journey .hero-photo img { aspect-ratio: 1.25; border-radius: 40% 40% 7px 7px; object-position: center 58%; }
  .water-journey .chapter-map-grid { grid-template-columns: 1fr; gap: 32px; }
  .water-journey .chapter-map-copy { max-width: 620px; }
  .water-journey .chapter[data-chapter="07"] .cards { grid-template-columns: 1fr; }
  .water-journey .chapter[data-chapter="07"] .cards .card + .card { border-left: 0; }
}
@media (max-width: 760px) {
  .water-journey .chapter[data-chapter="02"] .cards .card { grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .water-journey header.site { min-height: 64px; }
  .water-journey .hero { padding: 42px 0 58px; }
  .water-journey .hero-grid { gap: 34px; }
  .water-journey .hero .kicker { max-width: 26em; margin-bottom: 19px; font-size: 17px; line-height: 1.62; }
  .water-journey .hero h1 { max-width: 13em; font-size: clamp(39px, 10vw, 52px); line-height: 1.24; }
  .water-journey .hero .sub { margin-bottom: 22px; font-size: 16px; }
  .water-journey .hero-photo { width: 88%; }
  .water-journey .hero-photo img { aspect-ratio: 1.1; border-radius: 38% 38% 6px 6px; }
  .water-journey .hero-photo::before { inset: -12px -10px 37px -10px; }
  .water-journey .hero-photo figcaption { padding-top: 12px; font-size: 12px; }
  .water-journey .chapter-map { padding: 52px 0 62px; }
  .water-journey .chapter-map-grid { gap: 23px; }
  .water-journey .chapter-map h2 { max-width: 15em; font-size: 31px; }
  .water-journey .map-intro { font-size: 15px; }
  .water-journey .journey-index { grid-template-columns: 1fr; }
  .water-journey .journey-index a { min-height: 60px; grid-template-columns: 34px minmax(0, 1fr) 16px; padding: 11px 0; font-size: 15px; }
  .water-journey .journey-index small { font-size: 16px; }
  .water-journey .journey-arrow { opacity: 0.65; transform: none; }
  .water-journey .chapter { padding: 66px 0; }
  .water-journey .chapter::before { top: 19px; right: 8px; font-size: 126px; opacity: 0.48; }
  .water-journey .chapter .wrap > h2 { max-width: 13em; font-size: clamp(30px, 8vw, 37px); line-height: 1.3; }
  .water-journey .chapter .lead { margin-bottom: 26px; font-size: 16px; line-height: 1.82; }
  .water-journey .chapter .split,
  .water-journey .chapter .two { gap: 22px; }
  .water-journey .chapter figure img { border-radius: 8px 34% 8px 8px; }
  .water-journey .chapter .cards,
  .water-journey .chapter[data-chapter="07"] .cards { grid-template-columns: 1fr; }
  .water-journey .chapter .cards .card { padding: 17px 0; }
  .water-journey .chapter .cards .card + .card { border-left: 0; }
  .water-journey .chapter[data-chapter="02"] .cards .card { grid-template-columns: 1fr; gap: 5px; }
  .water-journey .chapter[data-chapter="02"] .cards .card h3,
  .water-journey .chapter[data-chapter="02"] .cards .card p { margin: 0; }
  .water-journey .chapter[data-chapter="07"] .cards .card:nth-child(2) { background: transparent; }
  .water-journey .chapter[data-chapter="05"] .organ-layout { gap: 15px; }
  .water-journey .chapter[data-chapter="05"] .organ-list { display: flex; flex-wrap: wrap; gap: 5px 13px; }
  .water-journey .chapter[data-chapter="05"] .organ-list button { min-height: 44px; padding: 8px 2px; }
  .water-journey .progress-rail { display: none; }
  .water-journey .drawer { max-height: calc(100dvh - 82px); overflow-y: auto; }
  .water-journey .drawer a { min-height: 48px; }
  .water-journey .sources { padding: 54px 0; }
  .water-journey .source-list li { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .water-journey *,
  .water-journey *::before,
  .water-journey *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}