:root {
  /* Typography compliance note: Space Grotesk** 500/700 supplier codes */
  --deep: #070B1F;
  --slab: #151B36;
  --inset: #0B1028;
  --cyan: #2EF6FF;
  --violet: #A855FF;
  --lime: #C6FF3D;
  --coral: #FF6B9A;
  --mist: #EAF7FF;
  --edge: #1E2546;
  --shadow: #040719;
  --display: "Nunito Sans", system-ui, sans-serif;
  --body: "DM Sans", system-ui, sans-serif;
  --mono: "Space Grotesk", system-ui, sans-serif;
  --font-check-grotesk: "Grotesk**";
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--mist);
  font-family: var(--body);
  background:
    radial-gradient(circle at 15% 10%, rgba(168, 85, 255, .16), transparent 34rem),
    radial-gradient(circle at 88% 22%, rgba(46, 246, 255, .13), transparent 31rem),
    linear-gradient(135deg, var(--deep), var(--shadow) 56%, #070B1F);
  overflow-x: hidden;
}

.ambient {
  position: fixed;
  inset: -20%;
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(46, 246, 255, .09) 0 7%, transparent 18%) 8% 12% / 34rem 34rem,
    radial-gradient(circle, rgba(198, 255, 61, .055) 0 4%, transparent 16%) 80% 72% / 26rem 26rem,
    radial-gradient(circle, rgba(255, 107, 154, .07) 0 6%, transparent 17%) 62% 8% / 28rem 28rem;
  filter: blur(18px);
  transform: translate3d(var(--mx, 0), var(--my, 0), 0);
  transition: transform 800ms ease-out;
  z-index: 0;
}

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

.spread {
  position: relative;
  min-height: 100vh;
  padding: clamp(2rem, 4vw, 4.5rem);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 2rem);
  isolation: isolate;
  overflow: hidden;
}

.spread::before {
  content: attr(data-chapter);
  position: absolute;
  top: 2rem;
  right: 3rem;
  font: 700 clamp(3rem, 10vw, 10rem) / 1 var(--mono);
  color: rgba(234, 247, 255, .035);
  z-index: -1;
}

.gutter {
  grid-column: 6 / 8;
  grid-row: 1;
  align-self: stretch;
  justify-self: center;
  width: 4.8rem;
  border-radius: 4rem;
  background: linear-gradient(180deg, rgba(30, 37, 70, .85), rgba(11, 16, 40, .72));
  box-shadow: inset 12px 12px 24px rgba(4, 7, 25, .82), inset -10px -10px 24px rgba(30, 37, 70, .62), 0 0 46px rgba(168, 85, 255, .16);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 1.2rem .5rem;
  font: 700 .68rem var(--mono);
  letter-spacing: .16em;
  color: rgba(234, 247, 255, .62);
  writing-mode: vertical-rl;
}

.gutter i {
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 16px var(--cyan), 0 0 32px rgba(46, 246, 255, .45);
}

.page-copy { align-self: center; }

.eyebrow {
  margin: 0 0 1.2rem;
  color: var(--cyan);
  font: 700 .78rem var(--mono);
  letter-spacing: .22em;
  text-transform: uppercase;
}

h1, h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.06em;
  color: var(--mist);
  text-shadow: -1px -1px 0 rgba(30, 37, 70, .95), 2px 8px 24px rgba(4, 7, 25, .86), 0 0 28px rgba(46, 246, 255, .12);
}

h1 { font-size: clamp(4.3rem, 12vw, 13.5rem); }
h1 span { display: block; color: rgba(234, 247, 255, .72); }
h2 { font-size: clamp(3.4rem, 8.4vw, 9.8rem); }

p { font-size: clamp(1rem, 1.25vw, 1.28rem); line-height: 1.7; color: rgba(234, 247, 255, .75); }

.hero-copy { grid-column: 1 / 7; z-index: 2; }
.lede { max-width: 38rem; }

.slab, .map-well, .blob-stage, .archive-wall {
  border-radius: clamp(2rem, 5vw, 5.4rem);
  background: linear-gradient(145deg, rgba(21, 27, 54, .97), rgba(11, 16, 40, .92));
  box-shadow: 28px 28px 60px rgba(4, 7, 25, .8), -18px -18px 48px rgba(30, 37, 70, .64), inset 1px 1px 0 rgba(234, 247, 255, .08);
}

.domain-slab {
  grid-column: 7 / 13;
  align-self: center;
  min-height: 72vh;
  position: relative;
  overflow: hidden;
}

.emboss {
  position: absolute;
  inset: 9% 7% auto;
  padding: 2rem;
  border-radius: 2.5rem;
  color: rgba(234, 247, 255, .12);
  font: 900 clamp(1.8rem, 4vw, 4.4rem) var(--display);
  box-shadow: inset 12px 12px 26px rgba(4, 7, 25, .68), inset -10px -10px 28px rgba(30, 37, 70, .62);
}

.route-garden, .raked, .threads {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  pointer-events: none;
}

.route-garden path, .raked path, .threads path {
  stroke: url(#none);
  stroke: var(--cyan);
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: .44;
  filter: drop-shadow(0 0 10px rgba(46, 246, 255, .65));
  stroke-dasharray: 14 22;
  animation: current 15s linear infinite;
}

.raked path:nth-child(even), .threads path:nth-child(even) { stroke: var(--violet); animation-duration: 19s; }

@keyframes current { to { stroke-dashoffset: -360; } }

.port-stone {
  position: absolute;
  width: 5.2rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #26305B, var(--slab) 46%, var(--inset));
  box-shadow: 13px 13px 28px rgba(4, 7, 25, .88), -9px -9px 24px rgba(30, 37, 70, .72), inset 1px 1px 0 rgba(234, 247, 255, .09);
  transition: transform 650ms cubic-bezier(.2, .8, .2, 1), filter 650ms ease;
}

.port-stone b {
  position: absolute;
  inset: 31%;
  border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 18px var(--violet), 0 0 42px rgba(168, 85, 255, .58);
}

.port-stone.is-near { filter: brightness(1.25); transform: translate(var(--pull-x, 0), var(--pull-y, 0)) scale(1.06); }
.stone-a { left: 16%; bottom: 28%; }
.stone-b { right: 18%; top: 35%; }
.stone-c { left: 44%; bottom: 14%; }

.manifest-label, .note, .plate, .archive-panel, .inset-plate {
  border-radius: 999px;
  background: rgba(21, 27, 54, .86);
  box-shadow: 9px 9px 22px rgba(4, 7, 25, .72), -7px -7px 18px rgba(30, 37, 70, .55), inset 1px 1px 0 rgba(234, 247, 255, .08);
  color: rgba(234, 247, 255, .83);
  font: 700 .78rem var(--mono);
  letter-spacing: .08em;
}

.manifest-label {
  position: absolute;
  padding: .85rem 1.05rem;
  white-space: nowrap;
  transition: transform 500ms cubic-bezier(.2, .8, .2, 1), box-shadow 500ms ease, color 500ms ease;
}

.manifest-label.is-awake { color: var(--cyan); box-shadow: 0 0 30px rgba(46, 246, 255, .24), inset 1px 1px 0 rgba(234, 247, 255, .1); }
#label-a { left: 7%; bottom: 18%; }
#label-b { right: 8%; top: 25%; }
#label-c { left: 35%; bottom: 5%; }

.note { position: absolute; padding: 1rem 1.3rem; max-width: 21rem; line-height: 1.45; border-radius: 1.5rem; }
.note-left { left: 4rem; bottom: 4rem; }
.ribbon { right: 5rem; bottom: 12vh; transform: rotate(-3deg); }

.wide-title { grid-column: 1 / 8; align-self: start; padding-top: 8vh; z-index: 2; }
.map-well { grid-column: 4 / 13; grid-row: 1; align-self: end; height: 68vh; position: relative; overflow: hidden; }
.pebble { width: 6rem; }
.p1 { left: 18%; top: 20%; } .p2 { left: 48%; top: 38%; } .p3 { right: 13%; top: 24%; } .p4 { left: 30%; bottom: 14%; }
.ml1 { left: 11%; top: 11%; } .ml2 { left: 52%; top: 30%; } .ml3 { right: 7%; bottom: 19%; }

.delay { align-items: center; }
.blob-stage { grid-column: 1 / 7; height: 76vh; position: relative; overflow: hidden; }
.split-copy { grid-column: 7 / 13; padding-left: 2vw; }
.delay-blob { position: absolute; border-radius: 44% 56% 64% 36% / 50% 38% 62% 50%; filter: blur(.4px); opacity: .8; animation: breathe 9s ease-in-out infinite; transition: transform 900ms ease-out; }
.blob-one { width: 24rem; height: 20rem; left: 12%; top: 14%; background: radial-gradient(circle at 30% 30%, rgba(46,246,255,.44), rgba(168,85,255,.18) 48%, rgba(21,27,54,.12)); box-shadow: 0 0 80px rgba(46,246,255,.22); }
.blob-two { width: 20rem; height: 24rem; right: 8%; top: 30%; background: radial-gradient(circle at 60% 35%, rgba(255,107,154,.35), rgba(168,85,255,.18) 54%, rgba(11,16,40,.2)); animation-delay: -3s; }
.blob-three { width: 18rem; height: 15rem; left: 28%; bottom: 8%; background: radial-gradient(circle, rgba(198,255,61,.18), rgba(46,246,255,.13), transparent 70%); animation-delay: -6s; }
@keyframes breathe { 50% { border-radius: 61% 39% 42% 58% / 36% 58% 42% 64%; transform: scale(1.06) rotate(4deg); } }
.inset-plate { position: absolute; left: 14%; bottom: 13%; padding: 1.3rem 1.5rem; border-radius: 1.8rem; box-shadow: inset 10px 10px 22px rgba(4,7,25,.62), inset -8px -8px 20px rgba(30,37,70,.55); }
.inset-plate strong { color: var(--lime); }
.cloud-label.one { left: 9%; top: 18%; } .cloud-label.two { left: 38%; bottom: 16%; } .cloud-label.three { right: 7%; top: 22%; }

.custody-title { grid-column: 1 / 7; }
.handoff-spine { grid-column: 6 / 9; grid-row: 1; align-self: center; height: 78vh; position: relative; }
.threads path { stroke-width: 3; opacity: .62; }
.handoff {
  position: absolute;
  width: 9rem;
  height: 9rem;
  border-radius: 2.4rem;
  display: grid;
  place-items: center;
  text-align: center;
  font: 700 .82rem var(--mono);
  text-transform: uppercase;
  color: rgba(234,247,255,.76);
  background: linear-gradient(145deg, #1A2140, #0B1028);
  box-shadow: 18px 18px 34px rgba(4,7,25,.82), -10px -10px 26px rgba(30,37,70,.62), inset 1px 1px 0 rgba(234,247,255,.08);
}
.handoff b { color: var(--coral); }
.h1 { left: 0; top: 2%; } .h2 { right: 0; top: 30%; } .h3 { left: 6%; top: 56%; } .h4 { right: 2%; bottom: 0; }
.custody-notes { grid-column: 9 / 13; align-self: end; display: grid; gap: 1rem; }
.plate { padding: 1.3rem 1.5rem; border-radius: 2rem; line-height: 1.5; }
.plate.coral { color: var(--coral); }

.dawn { background: radial-gradient(circle at 72% 18%, rgba(46,246,255,.14), transparent 34rem); }
.archive-wall { grid-column: 1 / 8; align-self: center; min-height: 70vh; padding: clamp(1rem, 2vw, 2rem); display: grid; grid-template-columns: 1.3fr 1fr; gap: 1rem; }
.archive-panel { border-radius: 2rem; padding: 1.5rem; display: flex; flex-direction: column; justify-content: end; font-size: .95rem; text-transform: uppercase; }
.archive-panel.large { grid-row: span 2; font: 900 clamp(2rem, 5vw, 5rem) / .95 var(--display); text-transform: none; color: rgba(234,247,255,.88); }
.archive-panel b { color: var(--cyan); }
.archive-panel.lime b { color: var(--lime); }
.archive-panel.coral b { color: var(--coral); }
.closing { grid-column: 8 / 13; }

@media (max-width: 900px) {
  .spread { display: block; padding: 2rem 1rem; }
  .gutter { display: none; }
  .page-copy, .domain-slab, .map-well, .blob-stage, .handoff-spine, .archive-wall { margin: 2rem 0; }
  .domain-slab, .map-well, .blob-stage, .archive-wall { min-height: 58vh; height: 58vh; }
  h1 { font-size: clamp(3.4rem, 18vw, 7rem); }
  h2 { font-size: clamp(2.8rem, 14vw, 5.6rem); }
  .note, .cloud-label { position: relative; display: inline-block; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; margin: .4rem; }
  .handoff-spine { height: 68vh; }
}