:root {
  /* Design typography tokens: Space Grotesk** for the mosoon.org wordmark; Inter** for readable fragments; IBM Plex Sans Condensed** for station tags; appearing as if reflected in shallow water. After a beat */
  --ink: #0B1F2A;
  --fog: #D7E6E3;
  --coral: #FF6F61;
  --violet: #2A2438;
  --sky: #8DBBC7;
  --teal: #2E8C92;
  --pearl: #F4EFD8;
  --display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
  --condensed: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--ink);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--fog);
  font-family: var(--body);
  background:
    radial-gradient(circle at 80% 8%, rgba(244, 239, 216, .16), transparent 19rem),
    radial-gradient(circle at 14% 34%, rgba(46, 140, 146, .23), transparent 28rem),
    linear-gradient(145deg, var(--ink) 0%, #0a1b25 36%, var(--violet) 74%, var(--ink) 100%);
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }

.paper-grain,
.weather-field,
.cursor-ripple {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.paper-grain {
  z-index: 5;
  opacity: .22;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(circle at 23% 41%, rgba(244,239,216,.18) 0 1px, transparent 1px),
    radial-gradient(circle at 74% 12%, rgba(141,187,199,.14) 0 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04), transparent 16%, rgba(0,0,0,.08) 38%, transparent 62%);
  background-size: 7px 9px, 11px 13px, 100% 3px;
}

.weather-field { z-index: 4; overflow: hidden; }
.weather-field .ripple {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(141, 187, 199, .55);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.2);
  opacity: .8;
  animation: ripple-expand 1.9s ease-out forwards;
  box-shadow: 0 0 18px rgba(46, 140, 146, .18), inset 0 0 18px rgba(244, 239, 216, .09);
}

.cursor-ripple {
  z-index: 7;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(141,187,199,.12), rgba(46,140,146,.06) 7rem, transparent 14rem);
  opacity: var(--cursor-opacity, 0);
  transition: opacity .8s ease;
}

.station-rail {
  position: fixed;
  z-index: 10;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-family: var(--condensed);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .72rem;
}

.station {
  display: grid;
  grid-template-columns: 2.25rem auto;
  align-items: center;
  gap: .6rem;
  color: rgba(215, 230, 227, .48);
  transition: color .4s ease, transform .4s ease;
}

.station::before {
  content: attr(data-station);
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(141, 187, 199, .28);
  border-radius: 50%;
  background: rgba(11, 31, 42, .45);
}

.station.active,
.station:hover { color: var(--pearl); transform: translateX(-.35rem); }
.station.active::before { border-color: var(--teal); box-shadow: 0 0 22px rgba(46, 140, 146, .35); }

.rain-walk { position: relative; z-index: 2; }
.chapter {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(4rem, 8vw, 8rem);
}

.before-rain {
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse at 50% 76%, rgba(46,140,146,.18), transparent 34rem),
    linear-gradient(180deg, rgba(11,31,42,.1), rgba(42,36,56,.28));
}

.mist {
  position: absolute;
  filter: blur(24px);
  opacity: .48;
  border-radius: 48% 52% 62% 38% / 45% 39% 61% 55%;
  background: radial-gradient(circle, rgba(215, 230, 227, .42), rgba(141, 187, 199, .13) 42%, transparent 70%);
  animation: drift 18s ease-in-out infinite alternate;
}

.veil-one { width: 64vw; height: 32vh; top: 7vh; left: -12vw; }
.veil-two { width: 58vw; height: 42vh; right: -14vw; bottom: 17vh; animation-delay: -7s; }

.city-edge {
  position: absolute;
  left: 4vw;
  right: 4vw;
  bottom: 12vh;
  height: 22vh;
  opacity: .36;
  filter: blur(.4px);
  transform: skewY(-2deg);
}
.tower { position: absolute; bottom: 0; width: 9vw; background: linear-gradient(180deg, rgba(42,36,56,.2), rgba(42,36,56,.82)); border-radius: 1rem 1rem .25rem .25rem; }
.t1 { left: 3%; height: 64%; } .t2 { left: 15%; height: 91%; width: 7vw; } .t3 { left: 31%; height: 54%; width: 13vw; } .t4 { right: 22%; height: 78%; width: 8vw; } .t5 { right: 6%; height: 49%; width: 16vw; }
.wire { position: absolute; height: 1px; left: 8%; right: 8%; background: rgba(215,230,227,.24); transform-origin: left center; }
.w1 { top: 24%; transform: rotate(-3deg); } .w2 { top: 38%; transform: rotate(2deg); }

.moon-seal {
  position: absolute;
  top: 9vh;
  left: 11vw;
  width: 5.4rem;
  height: 5.4rem;
  border: 1px solid rgba(244,239,216,.22);
  border-radius: 50%;
  display: grid;
  place-items: center;
  opacity: .72;
}
.moon { width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--pearl); box-shadow: 0 0 32px rgba(244,239,216,.55); }
.rain-bars { position: absolute; width: 62%; height: 38%; bottom: .55rem; background: repeating-linear-gradient(90deg, transparent 0 .35rem, rgba(46,140,146,.8) .36rem .43rem); }

.title-pool {
  position: relative;
  width: min(70rem, 86vw);
  min-height: 48vh;
  padding: clamp(2rem, 5vw, 5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 42% 58% 54% 46% / 55% 38% 62% 45%;
  background:
    radial-gradient(ellipse at 56% 64%, rgba(244,239,216,.12), transparent 31%),
    radial-gradient(ellipse at 42% 38%, rgba(46,140,146,.21), transparent 48%),
    rgba(11, 31, 42, .22);
  box-shadow: inset 0 0 4rem rgba(141,187,199,.08), 0 3rem 7rem rgba(0,0,0,.24);
}

.micro-label {
  margin: 0 0 1rem;
  font-family: var(--condensed);
  text-transform: uppercase;
  letter-spacing: .18em;
  color: rgba(215,230,227,.62);
  font-size: .82rem;
}

.glitch-title,
.chapter-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -.065em;
  line-height: .86;
  color: var(--pearl);
}
.glitch-title { font-size: clamp(4.8rem, 16vw, 15rem); position: relative; }
.glitch-title::before,
.glitch-title::after,
.glitch-soft::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: var(--sky);
  opacity: .3;
  transform: translateX(var(--glitch-x, 0));
  clip-path: inset(48% 0 28% 0);
  pointer-events: none;
}
.glitch-title::after { color: var(--coral); opacity: .24; clip-path: inset(16% 0 64% 0); transform: translateX(calc(var(--glitch-x, 0) * -1)); }
body.rain-hit .glitch-title { animation: word-waver .8s ease both; }

.title-reflection {
  font-family: var(--display);
  font-size: clamp(3rem, 10vw, 9rem);
  font-weight: 600;
  letter-spacing: -.065em;
  line-height: .8;
  color: rgba(141,187,199,.18);
  transform: scaleY(-1) skewX(-8deg);
  filter: blur(2px);
  opacity: .72;
  mask-image: linear-gradient(transparent, black 16%, transparent 72%);
}
.first-line { max-width: 30rem; margin: 1rem 0 0 1vw; color: rgba(215,230,227,.78); font-size: clamp(1.05rem, 2vw, 1.45rem); opacity: 0; transform: translateY(1rem); transition: opacity 1.4s ease, transform 1.4s ease; }
body.rain-hit .first-line { opacity: 1; transform: translateY(0); }
.drop-node { position: absolute; width: .8rem; height: .8rem; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 .45rem rgba(46,140,146,.13), 0 0 2rem rgba(141,187,199,.5); }
.primary-drop { right: 31vw; top: 45vh; animation: drop-pulse 3.4s ease-in-out infinite; }
.side-caption { position: absolute; left: 7vw; bottom: 7vh; max-width: 18rem; font-family: var(--condensed); letter-spacing: .09em; text-transform: uppercase; color: rgba(215,230,227,.42); }

.street-signal { min-height: 110vh; display: grid; grid-template-columns: minmax(18rem, 33rem) 1fr; align-items: center; gap: 8vw; background: linear-gradient(170deg, rgba(42,36,56,.22), rgba(11,31,42,.08)); }
.watercolor-bloom { position: absolute; border-radius: 52% 48% 43% 57% / 48% 62% 38% 52%; filter: blur(20px); mix-blend-mode: screen; opacity: .34; }
.bloom-coral { width: 22rem; height: 14rem; right: 18vw; top: 18vh; background: radial-gradient(circle, rgba(255,111,97,.52), transparent 68%); animation: blink-coral 9s step-end infinite; }
.bloom-teal { width: 46rem; height: 28rem; left: -14rem; bottom: 8vh; background: radial-gradient(circle, rgba(46,140,146,.44), transparent 70%); }
.signal-column { position: relative; z-index: 2; transform: rotate(-2deg); }
.chapter-title { font-size: clamp(3.6rem, 10vw, 9rem); position: relative; }
.narrow-copy, .settled-copy, .text-island p { color: rgba(215,230,227,.76); line-height: 1.75; max-width: 32rem; }
.civic-markers { position: relative; z-index: 2; min-height: 38rem; }
.marker {
  position: absolute;
  min-width: 13rem;
  padding: 1rem 1.2rem;
  border: 1px solid rgba(141,187,199,.28);
  border-radius: 999px;
  background: rgba(11,31,42,.34);
  color: var(--fog);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-family: var(--condensed);
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: transform .45s ease, border-color .45s ease, background .45s ease;
}
.marker span { color: var(--teal); margin-right: .7rem; }
.marker:hover { transform: translateY(-.4rem) rotate(.6deg); border-color: var(--coral); background: rgba(255,111,97,.08); }
.marker:nth-child(1) { left: 5%; top: 8%; } .marker:nth-child(2) { right: 10%; top: 26%; } .marker:nth-child(3) { left: 17%; bottom: 25%; } .marker:nth-child(4) { right: 23%; bottom: 4%; }
.transmission { position: absolute; right: 8vw; bottom: 11vh; width: min(28rem, 56vw); padding: 1.4rem; border-left: 2px solid var(--coral); color: var(--pearl); background: linear-gradient(90deg, rgba(255,111,97,.12), transparent); transform: translateX(var(--transmission-slip, 0)); transition: opacity .5s ease; }
.transmission p { margin: 0; font-family: var(--display); font-size: clamp(1.2rem, 2.5vw, 2.1rem); }

.drainage-map { min-height: 126vh; padding-top: 12vh; }
.map-wash { position: absolute; inset: 8vh 6vw; background: radial-gradient(ellipse at 40% 30%, rgba(215,230,227,.12), transparent 32%), radial-gradient(ellipse at 72% 68%, rgba(46,140,146,.18), transparent 38%); border-radius: 34% 66% 49% 51% / 39% 44% 56% 61%; filter: blur(1px); }
.channel { position: absolute; height: 1.1rem; border-radius: 999px; background: linear-gradient(90deg, transparent, rgba(46,140,146,.38), rgba(141,187,199,.18), transparent); filter: blur(1px); transform-origin: left center; }
.channel-one { width: 72vw; left: 6vw; top: 38vh; transform: rotate(14deg); } .channel-two { width: 62vw; right: -5vw; top: 58vh; transform: rotate(-18deg); } .channel-three { width: 74vw; left: 13vw; bottom: 23vh; transform: rotate(7deg); }
.map-heading { position: relative; z-index: 2; margin-left: 8vw; }
.fragment-flow { position: relative; z-index: 3; min-height: 78vh; }
.text-island { position: absolute; width: min(26rem, 72vw); padding: 2rem; background: rgba(215,230,227,.065); border: 1px solid rgba(141,187,199,.22); border-radius: 41% 59% 50% 50% / 58% 42% 58% 42%; box-shadow: inset 0 0 3rem rgba(46,140,146,.06); backdrop-filter: blur(8px); }
.text-island h3 { margin: .8rem 0 .6rem; font-family: var(--display); font-size: 1.8rem; color: var(--pearl); letter-spacing: -.03em; }
.island-one { left: 8vw; top: 9vh; } .island-two { right: 12vw; top: 25vh; transform: rotate(2.5deg); } .island-three { left: 31vw; bottom: 2vh; transform: rotate(-2deg); }
.weather-glyph { display: inline-block; width: 3.1rem; height: 3.1rem; border: 1px solid rgba(244,239,216,.4); border-radius: 50%; background: radial-gradient(circle at 55% 35%, var(--pearl) 0 .42rem, transparent .45rem), linear-gradient(180deg, transparent 54%, rgba(46,140,146,.65) 55% 61%, transparent 62%); }
.weather-glyph.wave { background: repeating-radial-gradient(circle at 50% 70%, transparent 0 .38rem, rgba(46,140,146,.8) .4rem .48rem, transparent .5rem .85rem); }
.weather-glyph.moon-mark { background: radial-gradient(circle at 42% 42%, var(--pearl) 0 .8rem, transparent .83rem), radial-gradient(circle at 58% 42%, rgba(11,31,42,.92) 0 .72rem, transparent .75rem); }
.tide-gauge { position: absolute; right: 8vw; bottom: 9vh; display: flex; align-items: end; gap: .45rem; font-family: var(--condensed); text-transform: uppercase; letter-spacing: .12em; color: rgba(215,230,227,.52); }
.tide-gauge span { writing-mode: vertical-rl; margin-right: .5rem; }
.tide-gauge i { width: .55rem; height: var(--h); min-height: 2rem; background: linear-gradient(var(--coral), var(--teal)); border-radius: 999px; opacity: .74; }

.harbor-quiet { min-height: 112vh; display: grid; place-items: center; background: linear-gradient(180deg, rgba(11,31,42,0), rgba(141,187,199,.08) 48%, rgba(244,239,216,.05)); }
.horizon { position: absolute; left: -4vw; right: -4vw; bottom: 28vh; height: 18vh; background: linear-gradient(180deg, transparent, rgba(141,187,199,.22), rgba(11,31,42,.08)); border-radius: 50% 50% 0 0; filter: blur(8px); }
.bridge-span { position: absolute; left: 12vw; right: 12vw; bottom: 35vh; height: 7rem; border-top: 1px solid rgba(215,230,227,.25); border-radius: 50% 50% 0 0; opacity: .54; }
.bridge-span::before, .bridge-span::after { content: ""; position: absolute; bottom: 0; width: 1px; height: 6rem; background: rgba(215,230,227,.18); } .bridge-span::before { left: 26%; } .bridge-span::after { right: 31%; }
.moon-tide { position: absolute; top: 18vh; right: 18vw; width: 11rem; height: 11rem; border-radius: 50%; background: var(--pearl); opacity: .72; box-shadow: 0 0 6rem rgba(244,239,216,.4); }
.final-chamber { position: relative; z-index: 2; width: min(54rem, 82vw); padding: clamp(2rem, 5vw, 5rem); border-radius: 58% 42% 48% 52% / 43% 56% 44% 57%; background: radial-gradient(ellipse at 55% 45%, rgba(244,239,216,.14), transparent 48%), rgba(11,31,42,.28); text-align: left; }
.quiet-subtitles { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; font-family: var(--condensed); text-transform: uppercase; letter-spacing: .14em; }
.quiet-subtitles span { border: 1px solid rgba(141,187,199,.26); border-radius: 999px; padding: .65rem 1rem; color: rgba(215,230,227,.72); }

@keyframes ripple-expand { to { transform: translate(-50%, -50%) scale(18); opacity: 0; } }
@keyframes drift { from { transform: translate3d(-2vw, -1vh, 0) rotate(-2deg); } to { transform: translate3d(4vw, 2vh, 0) rotate(3deg); } }
@keyframes drop-pulse { 0%, 100% { transform: scale(.8); opacity: .5; } 50% { transform: scale(1.35); opacity: 1; } }
@keyframes word-waver { 0%, 100% { filter: none; } 35% { filter: blur(.4px); transform: skewX(-1deg); } 65% { transform: skewX(1deg); } }
@keyframes blink-coral { 0%, 86%, 100% { opacity: .08; } 88% { opacity: .52; } 90% { opacity: .16; } 92% { opacity: .48; } }

@media (max-width: 820px) {
  .station-rail { right: auto; left: 1rem; top: auto; bottom: 1rem; transform: none; flex-direction: row; max-width: calc(100vw - 2rem); overflow: hidden; }
  .station span { display: none; }
  .chapter { padding: 5rem 1.4rem; }
  .street-signal { grid-template-columns: 1fr; gap: 2rem; }
  .civic-markers { min-height: 28rem; }
  .marker { min-width: 10rem; font-size: .72rem; }
  .transmission { width: auto; left: 1.4rem; right: 1.4rem; }
  .island-one, .island-two, .island-three { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin: 1.4rem 0; transform: none; }
  .fragment-flow { min-height: auto; }
  .moon-tide { right: 8vw; width: 7rem; height: 7rem; }
}