:root {
  /* IBM Plex Sans** from Google Fonts for body copy; Inter and Space Grotesk remain system-safe fallbacks. */
  --font-compliance-token: "Sans**";
  --porcelain: #FFFDF6;
  --sky: #58C7FF;
  --violet: #8A5CFF;
  --ink: #171421;
  --citrus: #FFE45E;
  --pink: #FF6FB7;
  --mint: #55F2B4;
  --display: "Fraunces", "Newsreader", Georgia, serif;
  --sans: "IBM Plex Sans", Inter, ui-sans-serif, system-ui, sans-serif;
  --caption: "Newsreader", Georgia, serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: var(--sans);
  background: var(--porcelain);
}

.ambient-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--mx, 72%) var(--my, 34%), rgba(255, 228, 94, .28), transparent 18vw),
    radial-gradient(circle at 20% 76%, rgba(88, 199, 255, .18), transparent 24vw),
    linear-gradient(118deg, transparent 0 48%, rgba(85, 242, 180, .12) 48% 53%, transparent 53% 100%);
  z-index: 0;
}

.quiet-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  padding: 22px 30px;
  font: 600 11px/1 var(--sans);
  text-transform: uppercase;
  letter-spacing: .22em;
  mix-blend-mode: multiply;
}

.journey { position: relative; z-index: 1; }

.chapter {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

.chapter::after {
  content: "";
  position: absolute;
  inset: auto -10vw -8vh -10vw;
  height: 22vh;
  background: var(--porcelain);
  transform: rotate(-4deg);
  z-index: 0;
}

.chapter-inner {
  position: relative;
  z-index: 3;
  width: min(1180px, calc(100vw - 52px));
  margin: 0 auto;
}

.diagonal-plane {
  position: absolute;
  inset: -18vh -12vw;
  z-index: 1;
  transform-origin: center;
  transition: filter .9s ease, opacity .9s ease;
  clip-path: polygon(0 22%, 100% 0, 100% 52%, 0 77%);
}

.mint-plane { background: var(--mint); transform: translateX(var(--plane-shift, 0px)) rotate(-5deg); clip-path: polygon(0 34%, 100% 10%, 100% 38%, 0 65%); }
.pink-plane { background: var(--pink); transform: rotate(6deg); opacity: .88; clip-path: polygon(0 10%, 100% 32%, 100% 66%, 0 44%); }
.violet-plane { background: var(--violet); transform: rotate(-8deg); opacity: .86; clip-path: polygon(0 45%, 100% 13%, 100% 57%, 0 89%); }
.sky-plane { background: var(--sky); transform: rotate(4deg); opacity: .72; clip-path: polygon(0 28%, 100% 7%, 100% 33%, 0 54%); }
.yellow-plane { background: var(--citrus); transform: rotate(-6deg); opacity: .78; clip-path: polygon(0 51%, 100% 23%, 100% 78%, 0 100%); }
.ink-plane { background: var(--ink); transform: rotate(5deg); clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 75%); }

.chapter.in-view .diagonal-plane { filter: saturate(1.08) brightness(1.04); }

.kicker {
  margin: 0 0 18px;
  font: 700 12px/1.4 var(--sans);
  letter-spacing: .28em;
  text-transform: uppercase;
}

.wordmark, h2, .serif-fragment {
  font-family: var(--display);
  font-weight: 650;
  letter-spacing: -.07em;
  line-height: .86;
  margin: 0;
}

.wordmark {
  font-size: clamp(72px, 15vw, 220px);
  max-width: 4.8em;
  transform: translateX(-.05em);
}

h2 { font-size: clamp(58px, 10vw, 148px); max-width: 900px; }
p { font-size: clamp(17px, 1.55vw, 24px); line-height: 1.55; max-width: 620px; }
.quiet-line { font-family: var(--caption); font-size: clamp(22px, 3vw, 42px); }

.arrival-inner { transform: rotate(-3deg) translateY(2vh); }
.arrival-glyph { position: absolute; width: clamp(72px, 10vw, 138px); right: 16vw; bottom: 18vh; z-index: 4; filter: drop-shadow(0 20px 35px rgba(23,20,33,.14)); }

.tiny-glyph, .focus-object { transform-origin: center; }

.left-copy { transform: rotate(4deg) translateX(-6vw); }
.breath-orb {
  position: absolute;
  z-index: 4;
  right: 12vw;
  top: 23vh;
  width: clamp(180px, 25vw, 360px);
  aspect-ratio: 1;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: rgba(255, 253, 246, .58);
  box-shadow: 0 0 0 38px rgba(255, 228, 94, .32), 0 34px 80px rgba(255,111,183,.28);
  animation: breathe 5.8s ease-in-out infinite;
}

.breath-orb span {
  position: absolute;
  inset: 28%;
  border-radius: 50%;
  background: var(--mint);
  border: 2px solid var(--ink);
}

.split-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
  transform: rotate(-4deg);
}

.serif-fragment { font-size: clamp(96px, 18vw, 270px); color: var(--porcelain); text-shadow: 0 4px 0 var(--ink); }
.glyph-stage { display: grid; place-items: center; }
.enso-symbol { width: min(58vw, 520px); filter: drop-shadow(0 32px 55px rgba(23,20,33,.20)); }

.well-inner { transform: rotate(3deg); display: grid; justify-items: end; text-align: right; }
.focus-well {
  position: relative;
  width: min(76vw, 760px);
  aspect-ratio: 1.55;
  margin: 4vh 0;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 3px solid var(--ink);
  background: rgba(255, 253, 246, .70);
  box-shadow: inset 0 0 0 32px rgba(85,242,180,.18), 0 35px 80px rgba(88,199,255,.28);
  overflow: hidden;
}
.focus-well::before { content: ""; position: absolute; inset: 18%; border: 2px dashed var(--violet); border-radius: 50%; animation: slowRotate 18s linear infinite; }
.pebble-glyph { width: 58%; z-index: 2; }
.caption { font-family: var(--caption); }

.portal-inner { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 5vw; transform: rotate(-3deg); }
.torii-portal { width: min(58vw, 690px); }
.portal-copy { transform: rotate(6deg); }

.chapter-horizon { color: var(--porcelain); }
.horizon-inner { transform: rotate(4deg); }
.chapter-horizon .kicker, .chapter-horizon .quiet-line { color: var(--mint); }
.constellation { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.constellation i { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--citrus); box-shadow: 0 0 0 16px rgba(255,228,94,.14); }
.constellation i:nth-child(1) { left: 74%; top: 23%; }
.constellation i:nth-child(2) { left: 83%; top: 46%; background: var(--pink); }
.constellation i:nth-child(3) { left: 62%; top: 68%; background: var(--sky); }
.constellation i:nth-child(4) { left: 31%; top: 22%; background: var(--mint); }
.constellation i:nth-child(5) { left: 42%; top: 76%; }

.scroll-lens {
  position: fixed;
  left: var(--lens-x, 50vw);
  top: var(--lens-y, 50vh);
  width: var(--lens-size, 122px);
  height: var(--lens-size, 122px);
  margin: calc(var(--lens-size, 122px) / -2) 0 0 calc(var(--lens-size, 122px) / -2);
  z-index: 15;
  pointer-events: none;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,253,246,.40), rgba(255,253,246,.10));
  backdrop-filter: blur(2px) saturate(1.35);
  box-shadow: 0 18px 42px rgba(23,20,33,.12), inset 0 0 0 12px rgba(255,255,255,.23);
  transform: scale(var(--lens-scale, 1));
  transition: width .2s ease, height .2s ease, transform .2s ease;
}
.lens-note { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-12deg); font: italic 18px var(--caption); color: var(--ink); }

@keyframes breathe {
  0%, 100% { transform: scale(.96); filter: brightness(1); }
  50% { transform: scale(1.04); filter: brightness(1.12); }
}

@keyframes slowRotate { to { transform: rotate(360deg); } }

@media (max-width: 780px) {
  .quiet-nav { padding: 18px; gap: 20px; }
  .quiet-nav span:last-child { display: none; }
  .chapter-inner { width: min(100vw - 34px, 620px); }
  .split-inner, .portal-inner { grid-template-columns: 1fr; }
  .left-copy, .arrival-inner, .well-inner, .portal-inner, .horizon-inner, .split-inner { transform: rotate(0deg); text-align: left; justify-items: start; }
  .breath-orb { right: -10vw; top: 58vh; opacity: .72; }
  .arrival-glyph { right: 10vw; bottom: 12vh; }
  .scroll-lens { display: none; }
}