:root {
  /* Typography compliance tokens: Interface Coordinates:* Coordinates:** (Google */
  --frost-vellum: #F4F8F7;
  --mist-blue: #DDECF0;
  --washed-celadon: #BFD8D2;
  --ink-slate: #253238;
  --pale-lavender: #D8D5EA;
  --rose-stain: #D9A7A0;
  --deep-teal: #0F2B2E;
  --glass-highlight: rgba(255,255,255,0.58);
  --display: "Bebas Neue", sans-serif;
  --body: "Cormorant Garamond", serif;
  --mono: "IBM Plex Mono", monospace;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink-slate);
  background: var(--frost-vellum);
  font-family: var(--body);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 16%, rgba(255,255,255,0.82), transparent 22%),
    radial-gradient(circle at 78% 80%, rgba(191,216,210,0.34), transparent 34%),
    linear-gradient(120deg, rgba(244,248,247,0.86), rgba(221,236,240,0.42));
  z-index: -5;
}

.ambient-grid {
  position: fixed;
  inset: -4vh -4vw;
  z-index: -4;
  opacity: 0.78;
  transform: translate3d(var(--grid-x, 0px), var(--grid-y, 0px), 0);
  background-image:
    linear-gradient(rgba(37,50,56,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,50,56,.08) 1px, transparent 1px),
    linear-gradient(rgba(15,43,46,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,43,46,.045) 1px, transparent 1px);
  background-size: 56px 56px, 56px 56px, 224px 224px, 224px 224px;
  transition: transform 900ms ease, opacity 1200ms ease;
}

.watercolor-field,
.watercolor-field .wash {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.watercolor-field {
  z-index: -3;
  overflow: hidden;
}

.wash {
  filter: blur(22px);
  opacity: 0.55;
  mix-blend-mode: multiply;
  animation: driftWash 18s ease-in-out infinite alternate;
}

.wash-blue {
  background: radial-gradient(ellipse at 32% 34%, rgba(221,236,240,0.92), rgba(221,236,240,0.1) 37%, transparent 60%);
}

.wash-rose {
  background: radial-gradient(ellipse at 70% 44%, rgba(217,167,160,0.42), rgba(217,167,160,0.08) 34%, transparent 58%);
  animation-duration: 22s;
}

.wash-lavender {
  background: radial-gradient(ellipse at 52% 80%, rgba(216,213,234,0.62), rgba(216,213,234,0.08) 32%, transparent 62%);
  animation-duration: 26s;
}

.edge-nav {
  position: fixed;
  left: 22px;
  top: 24px;
  bottom: 24px;
  z-index: 20;
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  gap: 24px;
  color: var(--deep-teal);
}

.vertical-mark {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--display);
  letter-spacing: 0.14em;
  font-size: 1.05rem;
  opacity: 0.72;
}

.plate-dots {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 17px;
}

.plate-dot {
  width: 13px;
  height: 13px;
  border: 1px solid rgba(15,43,46,0.38);
  border-radius: 50%;
  padding: 0;
  background: rgba(244,248,247,0.5);
  cursor: pointer;
  position: relative;
  transition: background 450ms ease, transform 450ms ease, border-color 450ms ease;
}

.plate-dot span {
  position: absolute;
  left: 19px;
  top: -4px;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  opacity: 0;
  transition: opacity 420ms ease;
}

.plate-dot.is-current {
  background: var(--deep-teal);
  border-color: var(--deep-teal);
  transform: scale(1.22);
}

.plate-dot.is-current span,
.plate-dot:hover span {
  opacity: 0.7;
}

.scroll-progress {
  width: 1px;
  height: 19vh;
  background: rgba(37,50,56,0.12);
  overflow: hidden;
}

.scroll-progress span {
  display: block;
  width: 100%;
  height: var(--progress, 0%);
  background: linear-gradient(var(--washed-celadon), var(--deep-teal));
}

.story-plate {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(3rem, 7vw, 6rem) clamp(2rem, 7vw, 7rem);
  overflow: hidden;
  isolation: isolate;
}

.frost-pane {
  position: relative;
  width: min(1120px, 88vw);
  min-height: min(74vh, 760px);
  border: 1px solid rgba(255,255,255,0.58);
  background:
    linear-gradient(135deg, rgba(244,248,247,.62), rgba(244,248,247,.38)),
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.52), transparent 38%);
  backdrop-filter: blur(14px);
  box-shadow: 0 38px 90px rgba(15,43,46,0.08), inset 0 0 0 1px rgba(37,50,56,0.035);
  opacity: 0;
  transform: translateY(26px) scale(0.985);
  transition: opacity 1100ms ease, transform 1100ms ease;
}

.story-plate.is-visible .frost-pane {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.frost-pane::before {
  content: "";
  position: absolute;
  inset: 20px;
  border: 1px solid rgba(37,50,56,0.06);
  pointer-events: none;
}

.coordinate-label {
  margin: 0;
  font-family: var(--mono);
  font-weight: 300;
  font-size: clamp(0.68rem, 1vw, 0.78rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(15,43,46,0.62);
}

.opening-pane {
  display: grid;
  align-content: center;
  padding: clamp(2rem, 5vw, 5rem);
}

.opening-pane::after {
  content: "";
  position: absolute;
  inset: -8% -10%;
  z-index: -1;
  background:
    radial-gradient(ellipse at 35% 50%, rgba(191,216,210,0.54), transparent 36%),
    radial-gradient(ellipse at 63% 42%, rgba(217,167,160,0.28), transparent 31%);
  filter: blur(18px);
  animation: breathe 9s ease-in-out infinite alternate;
}

.opening-title {
  margin: 0.06em 0 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(5rem, 18vw, 16rem);
  line-height: 0.78;
  letter-spacing: 0.035em;
  color: var(--deep-teal);
  text-transform: uppercase;
}

.opening-title span {
  display: block;
}

.opening-copy {
  width: min(390px, 80vw);
  margin: 2rem 0 0 0.2rem;
  font-size: clamp(1.35rem, 2vw, 2.1rem);
  line-height: 1.28;
  color: rgba(37,50,56,0.82);
}

.artifact {
  transform-style: preserve-3d;
  animation: floatArtifact 8s ease-in-out infinite alternate;
}

.quill-bone {
  position: absolute;
  right: 10%;
  top: 24%;
  width: clamp(120px, 22vw, 250px);
  height: clamp(220px, 36vw, 420px);
  transform: rotateX(58deg) rotateY(-18deg) rotateZ(18deg);
}

.quill-bone i {
  position: absolute;
  left: 42%;
  width: 42%;
  height: 13%;
  border-radius: 45% 55% 55% 45%;
  background: linear-gradient(125deg, rgba(244,248,247,0.88), rgba(191,216,210,0.48), rgba(216,213,234,0.3));
  box-shadow: 0 18px 30px rgba(15,43,46,0.12), inset 8px 8px 18px rgba(255,255,255,0.52);
  border: 1px solid rgba(255,255,255,0.6);
}

.quill-bone i:nth-child(1) { top: 0; transform: rotate(-22deg) translateZ(22px); }
.quill-bone i:nth-child(2) { top: 16%; transform: rotate(-12deg) translateZ(18px); }
.quill-bone i:nth-child(3) { top: 32%; transform: rotate(2deg) translateZ(14px); }
.quill-bone i:nth-child(4) { top: 48%; transform: rotate(12deg) translateZ(10px); }
.quill-bone i:nth-child(5) { top: 64%; transform: rotate(20deg) translateZ(6px); }
.quill-bone i:nth-child(6) { top: 80%; transform: rotate(28deg) translateZ(2px); }

.registration-cross {
  position: absolute;
  width: 54px;
  height: 54px;
  opacity: 0.28;
}

.registration-cross::before,
.registration-cross::after {
  content: "";
  position: absolute;
  background: var(--ink-slate);
}

.registration-cross::before { left: 50%; top: 0; width: 1px; height: 100%; }
.registration-cross::after { top: 50%; left: 0; height: 1px; width: 100%; }
.cross-one { right: 11vw; bottom: 16vh; }
.cross-two { left: 17vw; top: 20vh; transform: scale(0.6); }

.coordinate-pane,
.memory-pane,
.skeleton-pane,
.closing-pane {
  padding: clamp(2rem, 5vw, 5rem);
}

.plate-heading {
  display: flex;
  align-items: flex-start;
  gap: 1.4rem;
}

.chapter-number {
  font-family: var(--display);
  font-size: clamp(4rem, 11vw, 10rem);
  line-height: 0.75;
  letter-spacing: 0.05em;
  color: rgba(15,43,46,0.9);
}

.coordinate-map {
  position: absolute;
  inset: 12% 7% 10% 9%;
  width: 84%;
  height: 74%;
  fill: none;
  overflow: visible;
}

.map-path {
  stroke: rgba(15,43,46,0.42);
  stroke-width: 1.4;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 1800ms ease 350ms;
}

.map-path.faint {
  stroke: rgba(217,167,160,0.34);
  stroke-width: 1;
}

.map-node {
  fill: rgba(244,248,247,0.82);
  stroke: var(--deep-teal);
  stroke-width: 1.2;
  opacity: 0;
  transform-origin: center;
  transition: opacity 700ms ease 1000ms;
}

.story-plate.is-visible .map-path {
  stroke-dashoffset: 0;
}

.story-plate.is-visible .map-node {
  opacity: 1;
  animation: nodeBloom 2300ms ease infinite alternate;
}

.fragment {
  position: absolute;
  width: min(255px, 28vw);
  padding-left: 17px;
  border-left: 1px solid rgba(15,43,46,0.22);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 800ms ease, transform 800ms ease;
}

.story-plate.is-visible .fragment {
  opacity: 1;
  transform: translateY(0);
}

.fragment-a { left: 12%; bottom: 18%; transition-delay: 650ms; }
.fragment-b { left: 42%; top: 40%; transition-delay: 900ms; }
.fragment-c { right: 8%; top: 24%; transition-delay: 1150ms; }

.fragment span {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: rgba(15,43,46,0.58);
}

.fragment p {
  margin: 0.35rem 0 0;
  font-size: clamp(1.1rem, 1.8vw, 1.55rem);
  line-height: 1.26;
}

.skeleton-pane {
  display: grid;
  grid-template-columns: minmax(160px, 0.8fr) minmax(260px, 1fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: center;
}

.skeleton-object {
  width: min(350px, 32vw);
  aspect-ratio: 0.72;
  position: relative;
  justify-self: center;
  transform: rotateX(54deg) rotateZ(-18deg);
}

.skeleton-object::before {
  content: "";
  position: absolute;
  left: 48%;
  top: 6%;
  width: 8px;
  height: 86%;
  border-radius: 999px;
  background: linear-gradient(rgba(15,43,46,0.2), rgba(191,216,210,0.22));
  filter: blur(0.2px);
}

.skeleton-object span {
  position: absolute;
  left: 16%;
  width: 68%;
  height: 13%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0.58), rgba(191,216,210,0.36), rgba(216,213,234,0.34));
  border: 1px solid rgba(255,255,255,0.54);
  box-shadow: 0 20px 32px rgba(15,43,46,0.1);
}

.skeleton-object span:nth-child(1) { top: 9%; transform: rotate(8deg); }
.skeleton-object span:nth-child(2) { top: 26%; transform: rotate(-4deg); }
.skeleton-object span:nth-child(3) { top: 43%; transform: rotate(3deg); }
.skeleton-object span:nth-child(4) { top: 60%; transform: rotate(-7deg); }
.skeleton-object span:nth-child(5) { top: 77%; transform: rotate(5deg); }

.skeleton-text h2 {
  max-width: 560px;
  margin: 1rem 0 1.3rem;
  font-family: var(--display);
  font-size: clamp(3.2rem, 8vw, 7.8rem);
  line-height: 0.87;
  letter-spacing: 0.03em;
  font-weight: 400;
  color: var(--deep-teal);
}

.bone-lines {
  display: grid;
  gap: 12px;
  width: min(460px, 100%);
  margin: 1rem 0 1.35rem;
}

.bone-lines i {
  display: block;
  height: 13px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(191,216,210,0.2), rgba(191,216,210,0.62), rgba(216,213,234,0.26));
  transform-origin: left center;
  animation: bonePulse 1800ms ease-in-out 2 paused;
}

.bone-lines i:nth-child(2) { width: 84%; }
.bone-lines i:nth-child(3) { width: 64%; }
.bone-lines i:nth-child(4) { width: 77%; }

.story-plate.is-visible .bone-lines i {
  animation-play-state: running;
}

.resolved-copy {
  max-width: 460px;
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.72rem);
  line-height: 1.45;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 900ms ease 1450ms, transform 900ms ease 1450ms;
}

.story-plate.is-visible .resolved-copy {
  opacity: 1;
  transform: translateY(0);
}

.memory-wash {
  position: absolute;
  inset: 5%;
  background:
    radial-gradient(ellipse at 28% 72%, rgba(217,167,160,0.34), transparent 35%),
    radial-gradient(ellipse at 63% 40%, rgba(221,236,240,0.74), transparent 43%),
    radial-gradient(ellipse at 54% 62%, rgba(191,216,210,0.46), transparent 38%);
  filter: blur(26px);
  animation: breathe 12s ease-in-out infinite alternate;
}

.memory-pane {
  min-height: 78vh;
}

.artifact-field {
  position: absolute;
  inset: 12% 10%;
}

.relic {
  position: absolute;
  background: linear-gradient(145deg, rgba(244,248,247,0.88), rgba(191,216,210,0.38), rgba(216,213,234,0.26));
  border: 1px solid rgba(255,255,255,0.68);
  box-shadow: 0 36px 62px rgba(15,43,46,0.12), inset 14px 16px 28px rgba(255,255,255,0.46);
}

.relic-key {
  width: 210px;
  height: 70px;
  left: 7%;
  top: 45%;
  border-radius: 999px 22px 22px 999px;
  transform: rotate(-18deg);
}

.relic-key::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 15px;
  width: 38px;
  height: 38px;
  border: 10px solid rgba(15,43,46,0.12);
  border-radius: 50%;
}

.relic-key::after {
  content: "";
  position: absolute;
  right: 26px;
  bottom: -17px;
  width: 16px;
  height: 35px;
  background: inherit;
  border: inherit;
}

.relic-map {
  width: 190px;
  height: 145px;
  left: 38%;
  top: 22%;
  border-radius: 12px;
  clip-path: polygon(0 12%, 28% 0, 56% 12%, 100% 2%, 100% 88%, 68% 100%, 37% 86%, 0 98%);
  transform: rotate(10deg) skewY(-4deg);
}

.relic-map span,
.relic-note span {
  position: absolute;
  inset: 22% 18%;
  background-image: linear-gradient(rgba(37,50,56,0.13) 1px, transparent 1px), linear-gradient(90deg, rgba(37,50,56,0.1) 1px, transparent 1px);
  background-size: 22px 22px;
}

.relic-moon {
  width: 142px;
  height: 142px;
  right: 13%;
  top: 42%;
  border-radius: 50%;
  transform: rotateX(30deg) rotateY(-22deg);
}

.relic-moon::after {
  content: "";
  position: absolute;
  inset: 28px 22px 30px 44px;
  border-radius: 50%;
  border-left: 1px solid rgba(15,43,46,0.12);
}

.relic-note {
  width: 150px;
  height: 120px;
  right: 30%;
  bottom: 10%;
  border-radius: 10px 10px 44px 10px;
  transform: rotate(-7deg);
}

.memory-copy {
  position: absolute;
  left: 12%;
  bottom: 12%;
  max-width: 430px;
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.82rem);
  line-height: 1.38;
}

.closing-plate .ambient-grid {
  opacity: 0;
}

.closing-pane {
  min-height: 66vh;
  display: grid;
  place-items: center;
  text-align: center;
  background: rgba(244,248,247,0.72);
}

.closing-line {
  max-width: 620px;
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 4.6rem);
  line-height: 1.08;
  color: var(--deep-teal);
}

.domain-seal {
  position: absolute;
  right: 9%;
  bottom: 9%;
  font-family: var(--display);
  font-size: clamp(1.2rem, 3vw, 2.8rem);
  letter-spacing: 0.08em;
  color: rgba(15,43,46,0.72);
  border: 1px solid rgba(15,43,46,0.18);
  padding: 0.2em 0.42em 0.12em;
  transform: rotate(-2deg);
}

@keyframes driftWash {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to { transform: translate3d(3%, 4%, 0) scale(1.06); }
}

@keyframes breathe {
  from { opacity: 0.55; transform: scale(0.98) translate(-1%, 1%); }
  to { opacity: 0.9; transform: scale(1.04) translate(2%, -2%); }
}

@keyframes floatArtifact {
  from { translate: 0 -8px; }
  to { translate: 0 12px; }
}

@keyframes nodeBloom {
  from { filter: drop-shadow(0 0 0 rgba(217,167,160,0)); }
  to { filter: drop-shadow(0 0 18px rgba(217,167,160,0.66)); }
}

@keyframes bonePulse {
  0%, 100% { opacity: 0.34; transform: scaleX(0.72); }
  50% { opacity: 1; transform: scaleX(1); }
}

@media (max-width: 780px) {
  .edge-nav {
    left: 12px;
    top: 14px;
    bottom: 14px;
  }

  .story-plate {
    padding-left: 3.1rem;
    padding-right: 1rem;
  }

  .frost-pane {
    width: 100%;
    min-height: 78vh;
  }

  .quill-bone {
    opacity: 0.62;
    right: 2%;
    top: 35%;
  }

  .fragment {
    width: 44vw;
  }

  .fragment-a { left: 8%; bottom: 14%; }
  .fragment-b { left: 20%; top: 42%; }
  .fragment-c { right: 5%; top: 20%; }

  .skeleton-pane {
    grid-template-columns: 1fr;
  }

  .skeleton-object {
    width: min(240px, 56vw);
  }

  .relic-key { width: 150px; height: 54px; }
  .relic-map { width: 130px; height: 105px; }
  .relic-moon { width: 96px; height: 96px; }
  .relic-note { width: 100px; height: 86px; }
  .memory-copy { left: 9%; right: 9%; max-width: none; }
}