/* Font ledger: Caveat, Cormorant Garamond, IBM Plex Mono” */
:root {
  --lampblack: #0B0908;
  --parchment: #D8C6A1;
  --teal: #2F8F83;
  --burgundy: #7A2332;
  --brass: #B8893A;
  --violet: #342445;
  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--lampblack);
  color: var(--parchment);
  font-family: "Cormorant Garamond", serif;
  overflow-x: hidden;
}

.atmosphere {
  position: fixed;
  inset: 0;
  z-index: -4;
  background:
    radial-gradient(circle at 63% 29%, rgba(216, 198, 161, .09), transparent 28%),
    radial-gradient(circle at 9% 18%, rgba(52, 36, 69, .62), transparent 35%),
    radial-gradient(circle at 88% 76%, rgba(122, 35, 50, .22), transparent 32%),
    linear-gradient(180deg, #120d11 0%, #0B0908 48%, #050403 100%);
}

.atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .14;
  background-image: repeating-linear-gradient(90deg, rgba(216,198,161,.18) 0 1px, transparent 1px 84px), repeating-linear-gradient(0deg, rgba(184,137,58,.12) 0 1px, transparent 1px 72px);
  mix-blend-mode: soft-light;
}

.folio-nav {
  position: fixed;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: .16em;
}

.folio-nav a {
  color: rgba(216, 198, 161, .62);
  text-decoration: none;
  writing-mode: vertical-rl;
  padding: 8px 4px;
  position: relative;
  transition: color 900ms var(--ease);
}

.folio-nav a::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 7px;
  width: 1px;
  height: 0;
  background: var(--brass);
  transition: height 900ms var(--ease);
}

.folio-nav a:hover, .folio-nav a.active { color: var(--parchment); }
.folio-nav a:hover::after, .folio-nav a.active::after { height: calc(100% - 14px); }

.wave-field {
  position: fixed;
  inset: 0;
  z-index: -2;
  width: 100vw;
  height: 100vh;
  overflow: visible;
  opacity: .72;
  pointer-events: none;
}

.wave {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.25;
  stroke-dasharray: 1800;
  stroke-dashoffset: 1800;
  animation: drawWave 8s var(--ease) forwards, candle 7s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 9px rgba(47,143,131,.08));
}

.wave-a, .wave-c, .wave-e { stroke: rgba(47, 143, 131, .66); }
.wave-b, .wave-d { stroke: rgba(184, 137, 58, .5); animation-delay: .8s, 0s; }
.wave-f { stroke: rgba(122, 35, 50, .62); animation-delay: 1.5s, .4s; }
body.cursor-near .wave { filter: drop-shadow(0 0 16px rgba(47,143,131,.35)); opacity: .95; }

@keyframes drawWave { to { stroke-dashoffset: 0; } }
@keyframes candle { from { opacity: .42; } to { opacity: .84; } }

.chamber {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: 8vh 8vw 8vh 11vw;
}

.folio-number, .catalogue, .closing-index, .scrap-two, .caption {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  line-height: 1.8;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(216, 198, 161, .58);
}

.handwritten { font-family: "Caveat", cursive; letter-spacing: -.015em; }

.chamber-one { display: grid; place-items: center; }
.chamber-one .folio-number { position: absolute; top: 44px; right: 8vw; }

.parchment {
  position: absolute;
  border: 1px solid rgba(184, 137, 58, .22);
  background: linear-gradient(115deg, rgba(216,198,161,.1), rgba(216,198,161,.025));
  box-shadow: 0 30px 120px rgba(0,0,0,.46), inset 0 0 70px rgba(216,198,161,.025);
}

.layer-back { width: 64vw; height: 62vh; transform: rotate(-4deg); opacity: .52; }
.layer-mid { width: 54vw; height: 52vh; transform: rotate(2deg) translate(3vw, 2vh); opacity: .66; }

.title-stack {
  position: relative;
  width: 70vw;
  height: 44vh;
  max-width: 1050px;
  font-family: "Caveat", cursive;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--parchment);
  text-shadow: 0 0 35px rgba(216,198,161,.08);
}

.title-fragment {
  position: absolute;
  opacity: .92;
  animation: pageBreath 9s var(--ease) infinite alternate;
}

.fragment-one { left: 5%; top: 12%; font-size: clamp(7rem, 18vw, 19rem); }
.fragment-two { left: 39%; top: 23%; font-size: clamp(6rem, 15vw, 16rem); color: rgba(216,198,161,.78); animation-delay: .8s; }
.fragment-three { right: 7%; bottom: 3%; font-size: clamp(5rem, 12vw, 13rem); color: rgba(184,137,58,.86); animation-delay: 1.3s; }

@keyframes pageBreath { to { transform: translate3d(1.2vw, -1vh, 0) rotate(.7deg); } }

.opening-note {
  position: absolute;
  right: 15vw;
  bottom: 18vh;
  font-size: clamp(1.9rem, 3.6vw, 4rem);
  color: rgba(216,198,161,.74);
}

.glyph {
  position: absolute;
  font-family: "Caveat", cursive;
  color: var(--brass);
  font-size: 36px;
  opacity: .78;
}
.glyph-a { left: 22vw; bottom: 22vh; }
.glyph-b { right: 16vw; top: 26vh; color: var(--burgundy); font-size: 26px; }

.compass {
  position: absolute;
  left: 14vw;
  top: 21vh;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(184,137,58,.35);
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  transform: rotate(-22deg);
}
.compass span { position: absolute; width: 1px; height: 16px; background: rgba(184,137,58,.5); left: 50%; top: -8px; transform-origin: 0 98px; }
.compass span:nth-child(2) { transform: rotate(28deg); }
.compass span:nth-child(3) { transform: rotate(56deg); }

.manuscript-grid {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 14% 58% 1fr;
  gap: 4vw;
  align-items: center;
}

.left-gutter, .right-gutter { min-height: 68vh; position: relative; }
.vertical-note {
  writing-mode: vertical-rl;
  font-size: clamp(2rem, 3.2vw, 3.9rem);
  color: rgba(216,198,161,.55);
  position: absolute;
  right: 8px;
  top: 4vh;
}
.catalogue { position: absolute; left: 0; bottom: 7vh; color: rgba(47,143,131,.72); }
.bracket-mark { position: absolute; top: 35vh; left: 20%; font-family: "Caveat", cursive; font-size: 92px; color: var(--brass); opacity: .55; }

.central-page {
  position: relative;
  padding: clamp(40px, 6vw, 82px);
  border-left: 1px solid rgba(184,137,58,.28);
  border-top: 1px solid rgba(184,137,58,.2);
  background: linear-gradient(105deg, rgba(216,198,161,.13), rgba(216,198,161,.04) 70%, rgba(52,36,69,.12));
  box-shadow: 0 38px 140px rgba(0,0,0,.5);
}

.paper-rule {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(0deg, transparent 0 37px, rgba(216,198,161,.09) 38px 39px);
  pointer-events: none;
}

.central-page h1, .under-copy h2 {
  margin: 0 0 28px;
  font-weight: 500;
  font-size: clamp(3.6rem, 7vw, 8rem);
  line-height: .9;
  color: var(--parchment);
}

.central-page p, .under-copy p {
  position: relative;
  max-width: 680px;
  font-size: clamp(1.4rem, 2vw, 2rem);
  line-height: 1.36;
  color: rgba(216,198,161,.82);
}

.scrap {
  position: absolute;
  border: 1px solid rgba(184,137,58,.22);
  background: rgba(11,9,8,.55);
  box-shadow: 0 18px 60px rgba(0,0,0,.38);
}
.scrap-one { right: -5vw; top: 18%; padding: 16px 24px; color: var(--brass); font-size: 2.1rem; transform: rotate(5deg); }
.scrap-two { left: 9%; bottom: -34px; padding: 14px 20px; color: rgba(216,198,161,.62); transform: rotate(-1.5deg); }

.tick-column { margin-top: 17vh; display: flex; flex-direction: column; gap: 22px; width: 78px; }
.tick-column i { display: block; height: 1px; width: 100%; background: rgba(184,137,58,.45); }
.tick-column i:nth-child(even) { width: 55%; background: rgba(47,143,131,.45); }
.caption { margin-top: 42px; max-width: 230px; color: rgba(216,198,161,.48); }

.chamber-three {
  display: grid;
  grid-template-columns: 1fr 420px;
  align-items: end;
  gap: 6vw;
  background: radial-gradient(circle at 54% 80%, rgba(47,143,131,.11), transparent 28%);
}

.under-copy { align-self: center; padding-left: 8vw; }
.under-copy h2 { color: rgba(216,198,161,.9); }

.seal {
  position: relative;
  width: min(38vw, 360px);
  aspect-ratio: 1;
  margin-bottom: 16vh;
  color: var(--brass);
  display: grid;
  place-items: center;
  filter: drop-shadow(0 0 35px rgba(122,35,50,.18));
}
.seal svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.seal circle, .seal path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; opacity: .75; stroke-dasharray: 700; stroke-dashoffset: 700; animation: drawWave 9s var(--ease) forwards 1.2s; }
.seal span { font-size: clamp(2.7rem, 5vw, 5.5rem); color: var(--parchment); transform: rotate(-7deg); }
.closing-index { position: absolute; left: 11vw; bottom: 8vh; color: rgba(184,137,58,.58); }

.cursor-mark {
  position: fixed;
  z-index: 30;
  width: 22px;
  height: 22px;
  border-left: 1px solid var(--brass);
  border-bottom: 1px solid var(--brass);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 700ms var(--ease), border-color 500ms var(--ease);
  mix-blend-mode: screen;
}

@media (max-width: 820px) {
  .folio-nav { left: 10px; gap: 12px; }
  .chamber { padding-left: 56px; padding-right: 24px; }
  .title-stack { width: 82vw; }
  .layer-back, .layer-mid { width: 74vw; }
  .manuscript-grid, .chamber-three { grid-template-columns: 1fr; gap: 20px; }
  .left-gutter, .right-gutter { min-height: 120px; }
  .vertical-note { position: static; writing-mode: horizontal-tb; }
  .central-page { padding: 36px 26px; }
  .scrap { position: relative; inset: auto; margin-top: 18px; display: inline-block; }
  .under-copy { padding-left: 0; }
  .seal { width: 270px; margin: 0 0 18vh; }
}