:root {
  /* Compliance typography phrases: IBM Plex Mono* like engraved coordinate values; Interactive moments should be quiet: hovering over a sealed note can soften its frost; Source Serif 4* readable scholarly prose; Space Mono* tab labels. */
  --frost-parchment: #F4F8F5;
  --mist-blue: #C8DCE2;
  --dew-green: #9FB99A;
  --worn-leather: #6B422B;
  --oxide-brown: #2E231D;
  --longitude-indigo: #34465F;
  --pale-rose: #E7B7A8;
  --rule: #D9E5E2;
  --vellum: rgba(255,255,255,0.62);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--oxide-brown);
  background:
    radial-gradient(circle at 18% 12%, rgba(231,183,168,0.48), transparent 34%),
    radial-gradient(circle at 74% 22%, rgba(200,220,226,0.74), transparent 38%),
    linear-gradient(145deg, var(--frost-parchment), #eef5ef 42%, #e7f0ee);
  font-family: "Source Serif 4", Georgia, serif;
  overflow-x: hidden;
}

.paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: 0.2;
  background-image:
    linear-gradient(90deg, rgba(46,35,29,0.05) 1px, transparent 1px),
    linear-gradient(rgba(52,70,95,0.04) 1px, transparent 1px);
  background-size: 23px 29px;
  mix-blend-mode: multiply;
}

.atlas { position: relative; }

.spread {
  min-height: 100vh;
  position: relative;
  padding: 8vh 9vw 8vh 13vw;
  display: grid;
  align-items: center;
  isolation: isolate;
  border-bottom: 1px solid rgba(217,229,226,0.9);
}

.spread::before {
  content: "";
  position: absolute;
  inset: 2.3vw 4.5vw;
  border: 1px solid rgba(52,70,95,0.16);
  border-radius: 2px 26px 8px 18px;
  background: rgba(244,248,245,0.36);
  box-shadow: inset 0 0 60px rgba(255,255,255,0.48), 0 22px 70px rgba(52,70,95,0.08);
  z-index: -2;
}

.cover-spread { grid-template-columns: 0.22fr 1fr 0.28fr; overflow: hidden; }

.watercolor-meadow {
  position: absolute;
  inset: 0;
  z-index: -4;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(159,185,154,0.6), transparent 32%),
    radial-gradient(ellipse at 70% 78%, rgba(159,185,154,0.44), transparent 28%),
    radial-gradient(ellipse at 54% 34%, rgba(231,183,168,0.42), transparent 27%),
    linear-gradient(180deg, rgba(200,220,226,0.72), rgba(244,248,245,0.45) 48%, rgba(159,185,154,0.45));
  filter: saturate(0.88);
}

.leather-spine {
  position: absolute;
  left: 5.4vw;
  top: 8vh;
  bottom: 8vh;
  width: 54px;
  border-radius: 28px;
  background:
    linear-gradient(90deg, rgba(46,35,29,0.4), transparent 30%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.08) 0 2px, transparent 2px 15px),
    var(--worn-leather);
  box-shadow: inset -12px 0 18px rgba(46,35,29,0.28), 12px 0 32px rgba(46,35,29,0.14);
}

.leather-spine span {
  display: block;
  height: 8px;
  margin: 10vh 10px;
  border-radius: 8px;
  background: rgba(231,183,168,0.45);
}

.frost-panel {
  position: relative;
  background: linear-gradient(135deg, rgba(255,255,255,0.72), rgba(244,248,245,0.5));
  border: 1px solid var(--rule);
  box-shadow: 0 24px 80px rgba(52,70,95,0.12), inset 0 0 38px rgba(255,255,255,0.7);
  backdrop-filter: blur(12px);
}

.reveal-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(255,255,255,0.72), rgba(200,220,226,0.32)),
    radial-gradient(circle at 22% 18%, rgba(255,255,255,0.8), transparent 22%);
  opacity: 0.84;
  transform-origin: left;
  transition: opacity 1.5s ease, clip-path 1.6s ease;
  clip-path: inset(0 0 0 0);
  pointer-events: none;
}

.chapter-observed .reveal-panel::after,
.reveal-panel.cleared::after { opacity: 0.16; clip-path: inset(0 0 0 88%); }

.cover-plate {
  grid-column: 2;
  max-width: 830px;
  padding: clamp(32px, 7vw, 82px);
  border-radius: 8px 58px 8px 32px;
}

.folio-label, .chapter-number, .coordinate-slip, .ruler-title, .ruler-mark, .map-label, .moon-table span, .scholar-stamp, .page-tab {
  font-family: "Space Mono", "IBM Plex Mono", monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1 {
  margin: 0.1em 0;
  color: var(--longitude-indigo);
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(2.7rem, 7vw, 7.8rem);
  font-weight: 300;
  letter-spacing: 0.08em;
}

.subtitle, h2, blockquote, .inscription {
  font-family: "Cormorant Garamond", Georgia, serif;
}

.subtitle {
  margin: 0;
  color: var(--worn-leather);
  font-size: clamp(1.35rem, 2.4vw, 2.6rem);
  font-style: italic;
}

.coordinate-slip {
  margin-top: 38px;
  display: inline-block;
  color: var(--longitude-indigo);
  font-size: 0.82rem;
  border-top: 1px solid rgba(52,70,95,0.35);
  padding-top: 14px;
}

.longitude-ruler {
  position: fixed;
  z-index: 10;
  left: 22px;
  top: 8vh;
  bottom: 8vh;
  width: 82px;
  color: var(--longitude-indigo);
}

.ruler-title {
  writing-mode: vertical-rl;
  font-size: 0.66rem;
  margin: 0 auto 18px;
}

.ruler-track {
  position: relative;
  height: calc(100% - 92px);
  width: 1px;
  margin: 0 auto;
  background: var(--longitude-indigo);
}

.ruler-mark {
  position: absolute;
  left: -6px;
  width: 13px;
  height: 1px;
  border: 0;
  background: var(--longitude-indigo);
  color: var(--longitude-indigo);
  cursor: pointer;
}

.ruler-mark:nth-child(1) { top: 0%; }
.ruler-mark:nth-child(2) { top: 24%; }
.ruler-mark:nth-child(3) { top: 48%; }
.ruler-mark:nth-child(4) { top: 72%; }
.ruler-mark:nth-child(5) { top: 96%; }

.ruler-mark span {
  position: absolute;
  left: 18px;
  top: -9px;
  font-size: 0.62rem;
  opacity: 0.55;
}

.ruler-mark.active span { opacity: 1; color: var(--worn-leather); }

.brass-marker {
  position: absolute;
  left: -10px;
  top: 0;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #E7B7A8, #a57445 52%, #6B422B);
  box-shadow: 0 0 0 4px rgba(231,183,168,0.22);
  transform: translateY(-10px);
  transition: top 0.9s cubic-bezier(.22,.8,.22,1);
}

.folio-spread { grid-template-columns: minmax(130px, 0.35fr) minmax(260px, 0.9fr) minmax(320px, 1.2fr); gap: 4vw; }
.right-heavy { grid-template-columns: minmax(320px, 1.2fr) minmax(260px, 0.9fr) minmax(130px, 0.35fr); }

.chapter-text { padding: clamp(28px, 4vw, 58px); border-radius: 5px 42px 10px 26px; }
.chapter-text h2 { margin: 0 0 22px; color: var(--worn-leather); font-size: clamp(2.4rem, 5vw, 5.4rem); font-weight: 500; line-height: 0.95; }
.chapter-text p { font-size: clamp(1.05rem, 1.4vw, 1.32rem); line-height: 1.72; }
.chapter-number { color: var(--longitude-indigo); font-size: 0.78rem; }

blockquote { margin: 32px 0 0; padding-left: 24px; border-left: 1px solid var(--pale-rose); color: var(--longitude-indigo); font-size: clamp(1.5rem, 2.6vw, 2.8rem); font-style: italic; }

.marginalia {
  align-self: start;
  margin-top: 10vh;
  padding: 18px;
  border-top: 1px solid var(--longitude-indigo);
  color: var(--oxide-brown);
  background: rgba(255,255,255,0.28);
}
.marginalia span { font-family: "Space Mono", monospace; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; }
.marginalia strong { display: block; margin: 12px 0; color: var(--longitude-indigo); font-family: "IBM Plex Mono", monospace; font-weight: 600; }
.marginalia p { margin: 0; font-size: 0.96rem; line-height: 1.5; }

.map-fragment, .map-band, .right-page {
  min-height: 430px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(52,70,95,0.24);
  border-radius: 36px 4px 44px 8px;
  background:
    radial-gradient(ellipse at 28% 28%, rgba(231,183,168,0.5), transparent 27%),
    radial-gradient(ellipse at 60% 66%, rgba(159,185,154,0.55), transparent 34%),
    linear-gradient(160deg, rgba(244,248,245,0.88), rgba(200,220,226,0.62));
  box-shadow: inset 0 0 44px rgba(255,255,255,0.52), 0 20px 58px rgba(52,70,95,0.1);
}

.contours {
  position: absolute;
  inset: 8%;
  opacity: var(--contour-opacity, 0.18);
  transition: opacity 0.5s ease, transform 0.5s ease;
  background:
    repeating-radial-gradient(ellipse at var(--mx, 50%) var(--my, 50%), transparent 0 18px, rgba(52,70,95,0.55) 19px 20px, transparent 21px 38px),
    linear-gradient(90deg, transparent 49%, rgba(52,70,95,0.7) 50%, transparent 51%);
}
.interactive-map:hover { --contour-opacity: 0.38; }

.map-label {
  position: absolute;
  left: 28px;
  bottom: 24px;
  color: var(--longitude-indigo);
  font-size: 0.68rem;
  background: var(--vellum);
  padding: 9px 12px;
}

.sealed-note {
  position: absolute;
  right: 13vw;
  bottom: 13vh;
  padding: 16px 22px;
  border: 1px solid var(--rule);
  background: rgba(255,255,255,0.54);
  color: var(--worn-leather);
  font-family: "Space Mono", monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: inset 0 0 22px rgba(200,220,226,0.8);
  transition: filter 0.4s ease, transform 0.4s ease;
}
.sealed-note:hover { filter: blur(0.2px) brightness(1.06); transform: translateY(-3px); }

.note-popover {
  position: fixed;
  z-index: 20;
  right: 7vw;
  bottom: 9vh;
  max-width: 330px;
  padding: 24px;
  color: var(--oxide-brown);
  background: rgba(244,248,245,0.86);
  border: 1px solid var(--rule);
  box-shadow: 0 18px 52px rgba(52,70,95,0.18);
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.note-popover.visible { opacity: 1; transform: translateY(0); }

.page-tab {
  position: absolute;
  top: 12vh;
  right: 5.2vw;
  width: 54px;
  height: 88px;
  display: grid;
  place-items: center;
  color: var(--frost-parchment);
  background: linear-gradient(115deg, var(--worn-leather), #7b5035);
  border-radius: 0 18px 18px 0;
  box-shadow: inset -10px 0 16px rgba(46,35,29,0.22);
  cursor: pointer;
  transition: transform 0.55s ease;
}
.page-tab.open { transform: translateX(18px) rotate(2deg); }
.unfolding-copy { max-height: 0; overflow: hidden; transition: max-height 0.8s ease; color: var(--longitude-indigo); font-style: italic; }
.unfolding-copy.open { max-height: 160px; }

.map-band { min-height: 540px; }
.moon-table { position: absolute; top: 34px; left: 34px; z-index: 1; padding: 18px; background: var(--vellum); border: 1px solid var(--rule); }
.moon-table b, .moon-table em { display: block; color: var(--longitude-indigo); font-family: "IBM Plex Mono", monospace; margin-top: 8px; }
.moon-table em { font-family: "Cormorant Garamond", serif; color: var(--worn-leather); font-size: 1.3rem; }

.leather-chapter { background: radial-gradient(circle at 68% 40%, rgba(107,66,43,0.14), transparent 32%); }
.leather-panel { align-self: stretch; position: relative; min-height: 520px; border-radius: 30px; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 9px), var(--worn-leather); color: var(--frost-parchment); box-shadow: inset 0 0 44px rgba(46,35,29,0.42); }
.leather-panel p { position: absolute; bottom: 28px; left: 30px; font-family: "IBM Plex Mono", monospace; letter-spacing: 0.16em; }
.stitches { position: absolute; top: 28px; bottom: 28px; left: 32px; width: 2px; background: repeating-linear-gradient(0deg, var(--pale-rose) 0 8px, transparent 8px 18px); }

.coordinate-ledger { display: grid; grid-template-columns: auto 1fr; gap: 12px 18px; margin-top: 26px; font-family: "IBM Plex Mono", monospace; color: var(--longitude-indigo); font-size: 0.86rem; }
.coordinate-ledger span:nth-child(even) { font-family: "Source Serif 4", serif; color: var(--oxide-brown); }
.scholar-stamp { position: absolute; right: 13vw; bottom: 16vh; transform: rotate(-8deg); color: var(--worn-leather); border: 2px solid var(--worn-leather); border-radius: 50%; padding: 26px 18px; font-size: 0.78rem; background: rgba(244,248,245,0.38); }

.final-spread { padding-right: 8vw; }
.open-book { display: grid; grid-template-columns: 1fr 1fr; min-height: 72vh; width: 100%; box-shadow: 0 30px 90px rgba(52,70,95,0.16); }
.left-page, .right-page { border-radius: 2px; min-height: 72vh; }
.left-page { padding: clamp(30px, 5vw, 72px); border-right: 1px solid rgba(107,66,43,0.24); }
.right-page { border-left: 1px solid rgba(255,255,255,0.62); }
.final-meridian { position: absolute; top: 7%; bottom: 7%; left: 52%; width: 2px; background: var(--longitude-indigo); box-shadow: 0 0 0 7px rgba(52,70,95,0.08); }
.inscription { color: var(--worn-leather); font-size: clamp(1.7rem, 3vw, 3.3rem); font-style: italic; line-height: 1.05; }

.pressed-grass { position: absolute; width: 2px; height: 180px; background: var(--dew-green); opacity: 0.62; transform-origin: bottom; }
.pressed-grass::before, .pressed-grass::after { content: ""; position: absolute; width: 46px; height: 11px; border-radius: 50%; background: rgba(159,185,154,0.54); }
.pressed-grass::before { top: 44px; left: -38px; transform: rotate(-22deg); }
.pressed-grass::after { top: 88px; left: -5px; transform: rotate(28deg); }
.grass-one { right: 12vw; bottom: 12vh; transform: rotate(18deg); }
.grass-two { right: 18vw; top: 18vh; transform: rotate(-16deg); }
.compass-rose { position: absolute; right: 16vw; bottom: 28vh; color: rgba(107,66,43,0.34); font-size: 8rem; transform: rotate(18deg); }

@keyframes pigmentBloom { from { filter: saturate(0.65) blur(2px); } to { filter: saturate(0.95) blur(0); } }
.chapter-observed .map-fragment, .chapter-observed .map-band, .chapter-observed .right-page { animation: pigmentBloom 1.4s ease both; }

@media (max-width: 900px) {
  .longitude-ruler { display: none; }
  .spread { padding: 7vh 6vw; }
  .cover-spread, .folio-spread, .right-heavy, .open-book { grid-template-columns: 1fr; }
  .marginalia { margin-top: 0; }
  .sealed-note, .scholar-stamp { position: relative; right: auto; bottom: auto; justify-self: start; }
  h1 { font-size: clamp(2.2rem, 12vw, 4rem); }
}