:root {
  --imperial-void: #071019;
  --malachite-jade: #0F8B6D;
  --moonlit-vellum: #F2E6C8;
  --cinnabar-seal: #B9362D;
  --lapis-annotation: #2456A6;
  --frozen-pearl: #D9F5F1;
  --aged-gold: #D6A84F;
  --ink: rgba(7, 16, 25, 0.9);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--moonlit-vellum);
  font-family: "Cormorant Garamond", serif;
  background:
    radial-gradient(circle at 12% 18%, rgba(15, 139, 109, 0.17), transparent 32rem),
    radial-gradient(circle at 84% 38%, rgba(36, 86, 166, 0.18), transparent 34rem),
    linear-gradient(120deg, #071019 0%, #0a1620 54%, #071019 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(242, 230, 200, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 230, 200, 0.035) 1px, transparent 1px);
  background-size: 54px 54px, 54px 54px;
  mask-image: radial-gradient(circle, black, transparent 74%);
  z-index: 2;
}

.archive-sky {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.pearl-field,
.pearl-field::before,
.pearl-field::after {
  position: absolute;
  inset: -20%;
  content: "";
  background-image:
    radial-gradient(circle, rgba(217,245,241,0.55) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(214,168,79,0.5) 0 1px, transparent 2px);
  background-size: 170px 190px, 250px 210px;
  animation: pearlDrift 42s linear infinite;
}

.pearl-field::before { transform: rotate(12deg); opacity: 0.45; animation-duration: 58s; }
.pearl-field::after { transform: rotate(-8deg); opacity: 0.35; animation-duration: 71s; }

.compass-rose {
  position: fixed;
  right: 8vw;
  top: 12vh;
  width: 18rem;
  height: 18rem;
  border: 1px solid rgba(214,168,79,0.25);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: rgba(214,168,79,0.32);
  font-family: "Noto Serif SC", serif;
  font-size: 9rem;
  animation: rotateCompass 50s linear infinite;
}

.citation-ribbon {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 3;
  opacity: 0.78;
}

.citation-ribbon path {
  fill: none;
  stroke: var(--cinnabar-seal);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 14 10;
  filter: drop-shadow(0 0 8px rgba(185,54,45,0.42));
}

.citation-ribbon .thread-gold {
  stroke: var(--aged-gold);
  stroke-width: 1;
  stroke-dasharray: 3 18;
}

.jade-bookmarks {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 12;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.jade-bookmarks a {
  font-family: "IBM Plex Mono", monospace;
  color: var(--frozen-pearl);
  text-decoration: none;
  background: linear-gradient(90deg, rgba(15,139,109,0.94), rgba(15,139,109,0.52));
  border: 1px solid rgba(217,245,241,0.28);
  border-right: 0;
  padding: 0.65rem 0.55rem 0.65rem 1rem;
  border-radius: 999px 0 0 999px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  box-shadow: inset 0 0 14px rgba(217,245,241,0.18), 0 8px 24px rgba(0,0,0,0.28);
  transition: transform 300ms ease, background 300ms ease;
}

.jade-bookmarks a:hover { transform: translateX(-0.45rem); background: linear-gradient(90deg, #0F8B6D, #2456A6); }

.codex { position: relative; z-index: 4; }

.folio {
  min-height: 100vh;
  position: relative;
  display: grid;
  overflow: hidden;
  padding: clamp(2rem, 6vw, 6rem);
  isolation: isolate;
}

.folio::before {
  content: attr(data-folio);
  position: absolute;
  left: 2.2rem;
  top: 2rem;
  font-family: "IBM Plex Mono", monospace;
  color: rgba(214,168,79,0.42);
  letter-spacing: 0.4em;
  z-index: -1;
}

.gate {
  place-items: center;
  background:
    radial-gradient(ellipse at 50% 92%, rgba(15,139,109,0.18), transparent 42%),
    linear-gradient(180deg, #071019 10%, #09131b 100%);
}

.revision-cursor {
  position: absolute;
  top: 18vh;
  left: 13vw;
  font-family: "IBM Plex Mono", monospace;
  color: var(--frozen-pearl);
  text-shadow: 0 0 18px rgba(217,245,241,0.8);
  animation: blink 1.1s steps(2, end) infinite, floatCursor 5s ease-in-out infinite;
}

.river-line {
  position: absolute;
  width: 72vw;
  height: 36vh;
  border-bottom: 2px solid var(--malachite-jade);
  border-radius: 50%;
  transform: rotate(-8deg);
  opacity: 0.5;
  filter: drop-shadow(0 0 12px rgba(15,139,109,0.7));
}

.embossed-title { text-align: center; transform: translateY(-4vh); }
.inscription {
  font-family: "Noto Serif SC", serif;
  color: var(--aged-gold);
  letter-spacing: 0.22em;
  opacity: 0.8;
}

h1, h2 {
  font-family: "Unbounded", sans-serif;
  margin: 0;
  text-transform: lowercase;
}

h1 {
  font-size: clamp(3.2rem, 12vw, 12rem);
  letter-spacing: -0.08em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(242,230,200,0.65);
  text-shadow: 0 2px 0 rgba(214,168,79,0.28), 0 0 38px rgba(15,139,109,0.2);
  animation: embossIn 2s ease both;
}

.embossed-title p {
  margin: 1rem 0 0;
  color: rgba(242,230,200,0.76);
  font-size: clamp(1.25rem, 2vw, 2rem);
  font-style: italic;
}

.marginal-note {
  position: absolute;
  right: 14vw;
  bottom: 18vh;
  border: 1px solid rgba(214,168,79,0.52);
  background: rgba(7,16,25,0.45);
  color: var(--aged-gold);
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 1.35rem;
  padding: 0.9rem 1.4rem;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(214,168,79,0.22), inset 0 0 18px rgba(214,168,79,0.08);
}

.moon-gate-link {
  position: absolute;
  right: 9vw;
  top: 28vh;
  width: 8rem;
  height: 8rem;
  border: 2px solid var(--malachite-jade);
  border-radius: 50%;
  color: var(--malachite-jade);
  display: grid;
  place-items: center;
  font-size: 5rem;
  opacity: 0.38;
}

.cabinet {
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.82fr);
  gap: 6vw;
  align-items: center;
  background: linear-gradient(90deg, rgba(185,54,45,0.1), transparent 40%), #071019;
}

.vellum-panel, .cracked-tablet, .garden-caption {
  background:
    linear-gradient(135deg, rgba(242,230,200,0.98), rgba(217,245,241,0.8)),
    repeating-linear-gradient(0deg, transparent 0 19px, rgba(7,16,25,0.05) 20px);
  color: var(--ink);
  border: 1px solid rgba(214,168,79,0.75);
  box-shadow: 0 24px 80px rgba(0,0,0,0.42), inset 0 0 38px rgba(214,168,79,0.16);
  padding: clamp(2rem, 4vw, 4.6rem);
  position: relative;
}

.vellum-panel::after, .cracked-tablet::after {
  content: "";
  position: absolute;
  inset: 1rem;
  border: 1px solid rgba(185,54,45,0.16);
  pointer-events: none;
}

.meta, .hash, .revision-hashes {
  font-family: "IBM Plex Mono", monospace;
  color: var(--lapis-annotation);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
}

h2 {
  color: var(--imperial-void);
  font-size: clamp(2.15rem, 5vw, 5.8rem);
  line-height: 0.92;
  margin: 0.6rem 0 1.2rem;
}

p, dd {
  font-size: clamp(1.18rem, 1.55vw, 1.55rem);
  line-height: 1.45;
}

.drawer { transform-origin: center left; transition: transform 900ms cubic-bezier(.2,.8,.2,1), opacity 900ms ease; }
body:not(.fragment-open) .drawer-left { transform: translateX(-28vw) rotateY(12deg); opacity: 0.4; }
body:not(.fragment-open) .drawer-right { transform: translateX(28vw) rotateY(-12deg); opacity: 0.4; }

.article-link {
  color: var(--malachite-jade);
  text-decoration: none;
  font-family: "IBM Plex Mono", monospace;
  border-bottom: 2px solid var(--lapis-annotation);
  background-image: linear-gradient(var(--malachite-jade), var(--malachite-jade));
  background-size: 0 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 500ms ease, color 300ms ease;
}
.article-link:hover { background-size: 100% 2px; color: var(--lapis-annotation); }

.garden-plan {
  min-height: 58vh;
  border: 1px solid rgba(15,139,109,0.8);
  background: rgba(217,245,241,0.08);
  position: relative;
  overflow: hidden;
}
.plan-label { position: absolute; top: 1rem; left: 1rem; font-family: "IBM Plex Mono", monospace; color: var(--frozen-pearl); }
.dome-elevation { position: absolute; left: 18%; bottom: 20%; width: 64%; height: 42%; border: 2px solid var(--aged-gold); border-bottom: 0; border-radius: 100% 100% 0 0; }
.contour { position: absolute; border: 1px solid var(--malachite-jade); border-radius: 48%; opacity: 0.75; }
.c1 { width: 76%; height: 22%; left: 10%; top: 26%; transform: rotate(-12deg); }
.c2 { width: 64%; height: 18%; right: 8%; top: 43%; transform: rotate(8deg); }
.c3 { width: 88%; height: 16%; left: 5%; bottom: 16%; transform: rotate(-4deg); }
.lotus-tack { position: absolute; right: 16%; top: 22%; width: 1.2rem; height: 1.2rem; background: var(--aged-gold); clip-path: polygon(50% 0, 62% 35%, 100% 50%, 62% 65%, 50% 100%, 38% 65%, 0 50%, 38% 35%); }

.reference-slips { position: absolute; left: 56%; bottom: 10vh; display: grid; gap: 0.7rem; transform: rotate(-5deg); }
.reference-slips div { background: var(--moonlit-vellum); color: var(--imperial-void); padding: 0.75rem 1.1rem; border-left: 4px solid var(--cinnabar-seal); font-family: "IBM Plex Mono", monospace; box-shadow: 0 10px 30px rgba(0,0,0,0.35); }

.glossary { grid-template-columns: 0.4fr 1fr 0.34fr; gap: 4vw; align-items: center; }
.vertical-title { writing-mode: vertical-rl; font-family: "Unbounded", sans-serif; font-size: clamp(5rem, 12vw, 13rem); color: rgba(36,86,166,0.46); letter-spacing: -0.09em; }
dt { font-family: "Noto Serif SC", serif; color: var(--cinnabar-seal); font-size: 1.5rem; }
dd { margin: 0 0 1.2rem 1.5rem; }
.jade-tabs { display: grid; gap: 1rem; }
.jade-tabs button { border: 1px solid rgba(217,245,241,0.45); background: linear-gradient(90deg, #0F8B6D, rgba(15,139,109,0.5)); color: var(--frozen-pearl); font-family: "Unbounded", sans-serif; padding: 1rem 1.2rem; cursor: pointer; border-radius: 0 2rem 2rem 0; }
.ink-note { position: absolute; right: 11vw; bottom: 12vh; color: var(--aged-gold); font-family: "IBM Plex Mono", monospace; border-bottom: 2px solid var(--lapis-annotation); padding-bottom: 0.3rem; }

.ice { grid-template-columns: 0.9fr 1.1fr; align-items: center; gap: 5vw; background: radial-gradient(circle at 75% 44%, rgba(217,245,241,0.18), transparent 34%), #071019; }
.cracked-tablet { clip-path: polygon(0 4%, 48% 0, 52% 4%, 100% 0, 96% 100%, 58% 96%, 54% 100%, 0 96%); }
.ice-diagram { min-height: 58vh; border: 1px solid rgba(217,245,241,0.7); background: linear-gradient(135deg, rgba(217,245,241,0.15), rgba(36,86,166,0.16)); position: relative; overflow: hidden; }
.ice-diagram span { position: absolute; inset: auto 2rem 2rem auto; font-family: "IBM Plex Mono", monospace; color: var(--frozen-pearl); }
.frost { position: absolute; inset: 10%; border: 1px solid rgba(217,245,241,0.65); clip-path: polygon(0 20%, 34% 0, 52% 32%, 74% 12%, 100% 42%, 82% 100%, 35% 82%, 12% 100%); animation: thaw 6s ease-in-out infinite alternate; }
.f2 { inset: 24%; transform: rotate(28deg); animation-delay: -2s; }
.f3 { inset: 37%; transform: rotate(-18deg); animation-delay: -4s; }
.seal { position: absolute; right: 9vw; top: 14vh; width: 7.5rem; height: 7.5rem; border-radius: 50%; background: var(--cinnabar-seal); color: rgba(242,230,200,0.92); display: grid; place-items: center; text-align: center; font-family: "Unbounded", sans-serif; transform: rotate(14deg); box-shadow: 0 0 0 8px rgba(185,54,45,0.18); opacity: 0.9; }
.seal.stamped { animation: stamp 620ms cubic-bezier(.1,.9,.2,1); }

.lyre { grid-template-columns: 0.6fr 0.9fr; align-items: center; gap: 6vw; }
.lyre-strings { height: 76vh; display: flex; justify-content: space-between; align-items: stretch; padding: 2rem; border-top: 2px solid var(--aged-gold); border-bottom: 2px solid var(--aged-gold); }
.lyre-strings i { width: 2px; background: linear-gradient(#D6A84F, #D9F5F1, #B9362D); display: block; transform-origin: top; animation: stringHum 3s ease-in-out infinite; }
.lyre-strings i:nth-child(2) { animation-delay: -0.5s; } .lyre-strings i:nth-child(3) { animation-delay: -1s; } .lyre-strings i:nth-child(4) { animation-delay: -1.5s; } .lyre-strings i:nth-child(5) { animation-delay: -2s; }
.appendix { transform: rotate(2deg); }
.bracket-dragon { position: absolute; left: 8vw; bottom: 9vh; font-size: clamp(2rem, 6vw, 7rem); color: rgba(15,139,109,0.45); font-family: "IBM Plex Mono", monospace; }

.garden { place-items: center; text-align: center; background: radial-gradient(ellipse at 50% 58%, rgba(15,139,109,0.22), transparent 38%), #071019; }
.garden-caption { max-width: 58rem; z-index: 2; }
.dome-garden { position: absolute; inset: 8vh 8vw; }
.garden-dome-line { position: absolute; left: 20%; right: 20%; bottom: 18%; height: 42%; border: 2px solid var(--aged-gold); border-bottom: 4px solid var(--aged-gold); border-radius: 100% 100% 0 0; opacity: 0.58; }
.leaf { position: absolute; color: var(--malachite-jade); font-family: "IBM Plex Mono", monospace; text-shadow: 0 0 14px rgba(15,139,109,0.8); animation: leafArrange 8s ease-in-out infinite alternate; }
.l1 { left: 24%; bottom: 26%; } .l2 { left: 36%; bottom: 48%; } .l3 { left: 49%; bottom: 58%; } .l4 { right: 36%; bottom: 47%; } .l5 { right: 24%; bottom: 26%; } .l6 { left: 50%; bottom: 23%; }
.fireflies i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--aged-gold); box-shadow: 0 0 15px var(--aged-gold); animation: firefly 7s ease-in-out infinite; }
.fireflies i:nth-child(1){left:22%;top:30%;}.fireflies i:nth-child(2){left:70%;top:24%;animation-delay:-1s}.fireflies i:nth-child(3){left:62%;top:68%;animation-delay:-2s}.fireflies i:nth-child(4){left:38%;top:76%;animation-delay:-3s}.fireflies i:nth-child(5){left:48%;top:18%;animation-delay:-4s}.fireflies i:nth-child(6){left:80%;top:58%;animation-delay:-5s}

@keyframes pearlDrift { to { transform: translate3d(80px, 120px, 0); } }
@keyframes rotateCompass { to { transform: rotate(360deg); } }
@keyframes blink { 50% { opacity: 0.25; } }
@keyframes floatCursor { 50% { transform: translateY(-1rem); } }
@keyframes embossIn { from { opacity: 0; filter: blur(16px); letter-spacing: 0.02em; } to { opacity: 1; filter: blur(0); } }
@keyframes thaw { from { opacity: 0.96; filter: blur(0); } to { opacity: 0.28; filter: blur(5px); transform: scale(1.08) rotate(3deg); } }
@keyframes stamp { 0% { transform: scale(1.9) rotate(14deg); opacity: 0; } 65% { transform: scale(0.86) rotate(14deg); opacity: 1; } 100% { transform: scale(1) rotate(14deg); } }
@keyframes stringHum { 50% { transform: scaleX(3) skewX(2deg); filter: drop-shadow(0 0 8px #D6A84F); } }
@keyframes leafArrange { to { transform: translateY(-1.4rem) rotate(8deg); color: var(--aged-gold); } }
@keyframes firefly { 50% { transform: translate(2rem, -3rem); opacity: 0.35; } }

@media (max-width: 820px) {
  .jade-bookmarks { display: none; }
  .cabinet, .glossary, .ice, .lyre { grid-template-columns: 1fr; }
  .vertical-title { writing-mode: horizontal-tb; font-size: 4rem; }
  .reference-slips { position: relative; left: auto; bottom: auto; }
  .marginal-note { right: 8vw; bottom: 12vh; }
  .folio { padding: 5rem 1.25rem; }
}