:root {
  --paper: #F4F0E8;
  --ink: #121628;
  --blue: #26345F;
  --periwinkle: #7F9CFF;
  --coral: #FF8A65;
  --apricot: #FFD0A6;
  --mint: #8FE3C4;
  --headline: 'Nunito Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --label: 'Quicksand', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* IBM Plex Mono** is limited to tiny technical footnotes only for restrained fragments such as `L1`. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--paper);
  font-family: var(--headline);
  background:
    radial-gradient(circle at 18% 12%, rgba(127,156,255,.18), transparent 34rem),
    radial-gradient(circle at 80% 18%, rgba(255,138,101,.1), transparent 28rem),
    linear-gradient(135deg, var(--ink), #151B35 48%, #0F1324);
}

.paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .18;
  background-image:
    radial-gradient(circle, rgba(244,240,232,.4) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(255,208,166,.22) 0 .8px, transparent 1.2px);
  background-size: 17px 19px, 29px 31px;
  mix-blend-mode: soft-light;
}

.edge-tabs {
  position: fixed;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.edge-tabs a {
  color: rgba(244,240,232,.76);
  text-decoration: none;
  font: 700 .72rem/1 var(--label);
  letter-spacing: .04em;
  padding: .6rem .75rem;
  border: 1px solid rgba(127,156,255,.25);
  border-radius: 999px 999px 999px 4px;
  background: rgba(38,52,95,.48);
  backdrop-filter: blur(10px);
  transition: background .3s, color .3s, transform .3s;
}

.edge-tabs a.active, .edge-tabs a:hover {
  color: var(--ink);
  background: var(--apricot);
  transform: translateX(-.25rem);
}

.chapter {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 5rem);
  isolation: isolate;
  background:
    radial-gradient(ellipse at 25% 85%, rgba(38,52,95,.95), transparent 42%),
    radial-gradient(ellipse at 85% 18%, rgba(127,156,255,.08), transparent 38%);
}

.chapter::before,
.chapter::after {
  content: "";
  position: absolute;
  border-radius: 48% 52% 55% 45% / 55% 42% 58% 45%;
  filter: blur(22px);
  opacity: .42;
  z-index: -1;
  animation: drift 9s ease-in-out infinite alternate;
}

.chapter::before { width: 32rem; height: 22rem; left: -10rem; top: 18%; background: rgba(127,156,255,.22); }
.chapter::after { width: 28rem; height: 24rem; right: -7rem; bottom: 10%; background: rgba(255,138,101,.14); animation-delay: -3s; }

.z-route {
  position: absolute;
  inset: 5vh 4vw;
  width: 92vw;
  height: 90vh;
  z-index: 1;
  pointer-events: none;
}

.z-route path {
  fill: none;
  stroke: var(--periwinkle);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1900;
  stroke-dashoffset: calc(1900 - (1900 * var(--draw, 0)));
  filter: drop-shadow(0 0 14px rgba(127,156,255,.45));
  opacity: .9;
}

.chapter-head, .z-copy { position: relative; z-index: 5; max-width: 44rem; }
.chapter-head { padding-top: 2vh; }
.kicker {
  margin: 0 0 .75rem;
  color: var(--mint);
  font: 700 .85rem/1 var(--label);
  letter-spacing: .13em;
  text-transform: uppercase;
}
h1, h2 {
  margin: 0;
  font-family: var(--headline);
  font-weight: 900;
  letter-spacing: -.055em;
}
h1 { font-size: clamp(4rem, 14vw, 12rem); line-height: .82; max-width: 9ch; text-shadow: 0 22px 50px rgba(0,0,0,.25); }
h2 { font-size: clamp(3.4rem, 9vw, 8rem); line-height: .86; color: var(--paper); }
.lede, .z-copy p:not(.kicker) { font-size: clamp(1.1rem, 2.3vw, 1.65rem); line-height: 1.45; color: rgba(244,240,232,.82); max-width: 35rem; }
.top-left { margin-top: 2vh; }

.mono { font-family: var(--mono); }
.wash { position: absolute; inset: 0; z-index: 0; opacity: .75; }
.wash-blue { background: radial-gradient(ellipse at 46% 42%, rgba(38,52,95,.7), transparent 48%); }

.blob, .stone, .bubble, .note-chip, .glossary-chip, .swatch, .definition-card, .bloom-definition, .lower-reveal, .margin-note {
  box-shadow: inset 0 0 30px rgba(244,240,232,.08), 0 24px 70px rgba(0,0,0,.22);
}

.blob {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  color: rgba(18,22,40,.78);
  font: 700 .9rem/1.1 var(--label);
  text-align: center;
  padding: 2rem;
  border-radius: 58% 42% 51% 49% / 45% 55% 39% 61%;
  filter: blur(.1px);
  animation: blobFloat 7s ease-in-out infinite alternate;
}
.blob::after { content: ""; position: absolute; inset: .7rem; border: 2px solid rgba(18,22,40,.12); border-radius: inherit; filter: blur(2px); }
.blob-apricot { background: radial-gradient(circle at 40% 35%, rgba(255,208,166,.82), rgba(255,138,101,.36) 70%, transparent); }
.blob-periwinkle { background: radial-gradient(circle at 38% 36%, rgba(127,156,255,.76), rgba(143,227,196,.22) 70%, transparent); color: var(--paper); }
.blob-mint { background: radial-gradient(circle, rgba(143,227,196,.74), rgba(127,156,255,.25) 72%, transparent); }
.blob-coral { background: radial-gradient(circle, rgba(255,138,101,.72), rgba(255,208,166,.22) 72%, transparent); }
.blob-one { width: 25rem; height: 16rem; right: 8vw; top: 10vh; }
.blob-two { width: 17rem; height: 13rem; left: 34vw; top: 44vh; animation-delay: -1.5s; }
.lift-execution { width: 22rem; height: 16rem; left: 28vw; top: 30vh; }
.lift-settlement { width: 20rem; height: 14rem; right: 10vw; top: 14vh; animation-delay: -2s; }

.margin-note {
  position: absolute;
  z-index: 7;
  color: rgba(244,240,232,.84);
  background: rgba(38,52,95,.75);
  border: 1px solid rgba(255,208,166,.22);
  border-radius: 1.2rem 1.2rem 1.2rem .25rem;
  padding: 1rem 1.1rem;
  font: 700 .95rem/1.35 var(--label);
  transform: rotate(-3deg);
}
.margin-note em { color: var(--apricot); font-style: normal; }
.note-a { right: 17vw; bottom: 28vh; }
.bridge-note { right: 9vw; top: 17vh; max-width: 15rem; transform: rotate(3deg); }

.shoreline {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16vh;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-left: 6vw;
  background: linear-gradient(180deg, transparent, rgba(38,52,95,.95));
  color: rgba(244,240,232,.72);
  font-family: var(--label);
}
.shoreline .mono { color: var(--mint); padding: .4rem .65rem; border: 1px solid rgba(143,227,196,.4); border-radius: 999px; }
.shoreline i { width: 9rem; height: 2.2rem; border-top: 3px solid rgba(255,208,166,.28); border-radius: 50%; transform: translateY(.9rem); }

.lower-reveal {
  position: absolute;
  z-index: 8;
  right: clamp(2rem, 7vw, 7rem);
  bottom: clamp(2rem, 7vh, 5rem);
  max-width: 24rem;
  padding: 1.15rem 1.35rem;
  border-radius: 1.6rem 1.6rem .35rem 1.6rem;
  background: linear-gradient(135deg, rgba(255,208,166,.94), rgba(255,138,101,.82));
  color: var(--ink);
  font: 800 clamp(1rem, 2vw, 1.35rem)/1.25 var(--headline);
  transform: translateY(28px);
  opacity: .2;
  transition: opacity .7s, transform .7s;
}
.chapter.active .lower-reveal { opacity: 1; transform: translateY(0); }

.route-dot {
  position: absolute;
  z-index: 6;
  display: grid;
  place-items: center;
  min-width: 3.4rem;
  height: 3.4rem;
  padding: 0 .8rem;
  border-radius: 999px;
  background: var(--blue);
  border: 2px solid rgba(127,156,255,.55);
  color: var(--paper);
  font: 700 .85rem/1 var(--mono);
  transform: scale(.8);
  opacity: .45;
  transition: transform .5s, opacity .5s, background .5s;
}
.active .route-dot { transform: scale(1); opacity: 1; }
.dot-one { left: 46vw; top: 12vh; }
.dot-two { left: 26vw; top: 63vh; transition-delay: .15s; }
.dot-three { right: 13vw; bottom: 15vh; transition-delay: .3s; background: rgba(143,227,196,.25); }

.bubble {
  position: absolute;
  z-index: 7;
  padding: .9rem 1.1rem;
  border-radius: 999px;
  background: rgba(244,240,232,.92);
  color: var(--ink);
  font-family: var(--label);
  transform: translateY(22px) rotate(-2deg);
  opacity: .25;
  transition: opacity .6s, transform .6s;
}
.bubble b { display: block; font-size: 1rem; }
.bubble span { color: rgba(18,22,40,.62); }
.active .bubble { opacity: 1; transform: translateY(0) rotate(-2deg); }
.trail-one { left: 50vw; top: 15vh; }
.trail-two { left: 19vw; top: 57vh; transition-delay: .15s; }
.trail-three { right: 10vw; bottom: 26vh; transition-delay: .3s; }

.lagoon {
  position: absolute;
  z-index: 4;
  right: 8vw;
  top: 18vh;
  width: min(50vw, 46rem);
  height: min(62vh, 40rem);
  border-radius: 55% 45% 58% 42% / 44% 58% 42% 56%;
  background:
    radial-gradient(circle at 52% 42%, rgba(127,156,255,.62), rgba(38,52,95,.6) 52%, rgba(143,227,196,.13) 76%, transparent),
    radial-gradient(circle at 28% 70%, rgba(255,208,166,.24), transparent 42%);
  filter: drop-shadow(0 0 45px rgba(127,156,255,.25));
  animation: lagoon 8s ease-in-out infinite alternate;
}
.lagoon-ring { position: absolute; inset: 10%; border: 2px dashed rgba(244,240,232,.22); border-radius: inherit; }
.note-chip, .glossary-chip {
  border: 0;
  cursor: pointer;
  color: var(--ink);
  font: 700 .95rem/1 var(--label);
  background: rgba(255,208,166,.95);
  border-radius: 999px 999px 999px .25rem;
  padding: .9rem 1.1rem;
  transition: transform .3s, background .3s;
}
.note-chip:hover, .glossary-chip:hover, .glossary-chip.active { transform: translateY(-6px) rotate(-2deg); background: var(--mint); }
.note-chip { position: absolute; }
.note-chip:nth-of-type(1) { left: 18%; top: 22%; }
.note-chip:nth-of-type(2) { right: 18%; top: 30%; }
.note-chip:nth-of-type(3) { left: 34%; bottom: 26%; }
.note-chip:nth-of-type(4) { right: 24%; bottom: 18%; }
.definition-card, .bloom-definition {
  position: absolute;
  z-index: 8;
  left: clamp(2rem, 7vw, 6rem);
  bottom: 14vh;
  max-width: 28rem;
  padding: 1.35rem 1.5rem;
  border-radius: 1.5rem 1.5rem 1.5rem .3rem;
  background: rgba(38,52,95,.82);
  border: 1px solid rgba(127,156,255,.35);
  color: rgba(244,240,232,.88);
  font: 700 1.1rem/1.45 var(--headline);
  transition: transform .35s, background .35s;
}
.definition-card.bloom { transform: scale(1.04); background: rgba(255,138,101,.84); color: var(--ink); }

.stone {
  position: absolute;
  z-index: 6;
  width: 12rem;
  height: 8rem;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 52% 48% 58% 42% / 48% 60% 40% 52%;
  background: radial-gradient(circle at 42% 35%, rgba(255,208,166,.82), rgba(127,156,255,.2));
  color: var(--ink);
  font-family: var(--label);
  transform: translateY(45px) rotate(-4deg);
  opacity: .35;
  transition: transform .7s, opacity .7s;
}
.active .stone { transform: translateY(0) rotate(-4deg); opacity: 1; }
.stone span { display: block; font-weight: 800; font-size: 1.2rem; }
.stone small { display: block; font: 600 .8rem/1.1 var(--mono); opacity: .65; }
.stone-a { left: 51vw; top: 14vh; }
.stone-b { left: 37vw; top: 42vh; transition-delay: .12s; }
.stone-c { left: 18vw; top: 67vh; transition-delay: .24s; }
.stone-d { right: 7vw; bottom: 12vh; transition-delay: .36s; }
.paper-boat { position: absolute; z-index: 7; left: 61vw; top: 46vh; color: var(--mint); font-size: 5rem; transform: rotate(13deg); opacity: .8; }

.desk {
  position: absolute;
  z-index: 4;
  inset: 18vh 8vw 10vh 45vw;
  border-radius: 3rem;
  background: radial-gradient(circle at 50% 42%, rgba(244,240,232,.08), transparent 50%), rgba(38,52,95,.3);
  border: 1px solid rgba(244,240,232,.08);
}
.swatch {
  position: absolute;
  padding: 1.4rem 1.6rem;
  border-radius: 1.8rem .45rem 1.8rem 1.8rem;
  color: var(--ink);
  font: 800 1rem/1 var(--label);
  transform: rotate(-8deg);
}
.swatch.coral { right: 8%; top: 15%; background: var(--coral); }
.swatch.periwinkle { left: 20%; top: 46%; background: var(--periwinkle); color: var(--paper); }
.swatch.mint { right: 24%; bottom: 14%; background: var(--mint); }
.glossary-cloud { position: absolute; z-index: 8; left: 7vw; bottom: 28vh; display: flex; flex-wrap: wrap; gap: .85rem; max-width: 36rem; }
.bloom-definition { left: auto; right: 9vw; bottom: 16vh; background: rgba(255,208,166,.92); color: var(--ink); }

@keyframes drift { to { transform: translate(18px, -12px) rotate(4deg); } }
@keyframes blobFloat { to { transform: translate(12px, -18px) rotate(3deg); } }
@keyframes lagoon { to { transform: translate(-8px, 14px) scale(1.02); border-radius: 44% 56% 48% 52% / 58% 42% 58% 42%; } }

@media (max-width: 760px) {
  .edge-tabs { right: .5rem; gap: .35rem; }
  .edge-tabs a { padding: .5rem; font-size: .62rem; }
  .chapter { padding: 1.4rem; }
  h1 { font-size: clamp(3.5rem, 18vw, 6rem); }
  h2 { font-size: clamp(3rem, 15vw, 5rem); }
  .blob-one, .lagoon, .desk { right: -8vw; width: 86vw; }
  .blob-two, .lift-execution { left: 8vw; }
  .lift-settlement { right: 0; }
  .stone { width: 9rem; height: 6.5rem; }
  .stone-a { left: 50vw; } .stone-b { left: 26vw; } .stone-c { left: 5vw; } .stone-d { right: 1vw; }
  .definition-card, .bloom-definition { left: 1.4rem; right: 1.4rem; bottom: 11vh; }
  .glossary-cloud { left: 1.4rem; bottom: 31vh; max-width: calc(100vw - 2.8rem); }
}