:root {
  --deep: #1C1510;
  --darker: #150F0B;
  --mahogany: #2E2119;
  --ink: #2C2418;
  --folio: #3A2E22;
  --parchment: #D4C3A3;
  --gold: #A68B5B;
  --teal: #4A7C72;
  --coral: #C17B4A;
  --faded: #6B5D4F;
  --ease-water: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Compliance vocabulary: Intersection Observer tracking only 30% visibility threshold sizes evokes engraved 18th-century history folios. Applied exclusively headings. 3rem: domain repeated once quiet (Google Playfair+Display:wght@900` (Google */

* { box-sizing: border-box; }

html { background: var(--darker); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--parchment);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  line-height: 1.75;
  letter-spacing: 0.01em;
  background: var(--deep);
  transition: background-color 0.8s var(--ease-water);
  overflow-x: hidden;
}

body.deepening { background: var(--darker); }

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

.wordmark {
  position: fixed;
  top: 1.25rem;
  left: 1.35rem;
  z-index: 12;
  font-family: "DM Sans", sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}

.progress-shell {
  position: fixed;
  top: 0;
  right: 1.15rem;
  width: 1px;
  height: 100vh;
  background: rgba(166, 139, 91, 0.18);
  z-index: 12;
  transform-origin: top;
}

#scrollProgress {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top;
}

.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: var(--deep);
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 26vh;
  background: linear-gradient(to bottom, rgba(28, 21, 16, 0), var(--deep));
  z-index: 2;
}

.hero-glass {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
  animation: glassDrift 50s var(--ease-water) infinite;
}

.morph-field { transform-origin: center; animation: morphField 50s var(--ease-water) infinite; }
.morph-field.two { animation-delay: -25s; mix-blend-mode: screen; opacity: 0.8; }

.hero-copy {
  position: absolute;
  top: 38%;
  left: 62%;
  transform: translate(-50%, -50%);
  z-index: 4;
  width: min(82vw, 980px);
}

.eyebrow, .folio-label, figcaption {
  font-family: "DM Sans", sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}

h1, h2, .coda {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--parchment);
}

h1 {
  margin: 0;
  font-size: clamp(4rem, 12vw, 10rem);
  line-height: 0.86;
  text-shadow: 0 10px 34px rgba(21, 15, 11, 0.76);
}

h2 {
  margin: 0.45rem 0 1.2rem;
  font-size: clamp(2.6rem, 6vw, 5.8rem);
  line-height: 0.98;
}

p { margin: 0; }

.descent {
  position: relative;
  padding: 16vh 7vw 10vh;
  background:
    radial-gradient(circle at 78% 14%, rgba(74, 124, 114, 0.08), transparent 30rem),
    linear-gradient(to bottom, var(--deep), var(--darker) 70%);
}

.folio {
  position: relative;
  width: min(640px, 86vw);
  margin: 0 auto 18vh;
  padding: clamp(1.4rem, 3vw, 2.8rem);
  background-color: var(--folio);
  border: 1px solid var(--gold);
  box-shadow: inset 0 0 0 4px var(--folio), inset 0 0 0 5px rgba(166, 139, 91, 0.42), 0 28px 70px rgba(0, 0, 0, 0.32);
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 2.5s var(--ease-water), transform 2.5s var(--ease-water);
}

.folio::before, .folio::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  border-top: 1px solid var(--gold);
  border-left: 1px solid var(--gold);
  opacity: 0.72;
}

.folio::before { top: 12px; left: 12px; transform: rotate(0deg); }
.folio::after { right: 12px; bottom: 12px; transform: rotate(180deg); }
.folio.left { margin-left: 10%; }
.folio.right { margin-right: 10%; }
.folio.is-visible { opacity: 1; transform: translateY(0); }

.plate {
  width: min(720px, 82vw);
  margin: 0 auto 18vh;
  opacity: 0;
  transform: translateY(54px);
  transition: opacity 2.5s var(--ease-water), transform 2.5s var(--ease-water);
}

.plate.is-visible { opacity: 1; transform: translateY(0); }
.plate figcaption { text-align: center; margin-bottom: 1rem; }
.fish-svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 22px 48px rgba(0, 0, 0, 0.4)); }

.fragment { transform-box: fill-box; transform-origin: center; transition: transform 2.5s var(--ease-water), opacity 2.5s var(--ease-water); }
.fish-reveal:not(.is-visible) .f1 { transform: translate(-90px, -60px) rotate(-18deg); opacity: 0; }
.fish-reveal:not(.is-visible) .f2 { transform: translate(70px, 84px) rotate(16deg); opacity: 0; }
.fish-reveal:not(.is-visible) .f3 { transform: translate(40px, -95px); opacity: 0; }
.fish-reveal:not(.is-visible) .f4 { transform: translate(-120px, 20px) rotate(-20deg); opacity: 0; }
.fish-reveal:not(.is-visible) .f5 { transform: translate(120px, -12px) rotate(20deg); opacity: 0; }
.fish-reveal:not(.is-visible) .f6, .fish-reveal:not(.is-visible) .f7, .fish-reveal:not(.is-visible) .f8 { transform: scale(0.2); opacity: 0; }

.scholar-body { transform-box: fill-box; transform-origin: center; transition: transform 2.5s var(--ease-water), opacity 2.5s var(--ease-water); }
.scholar:not(.is-visible) .scholar-body { transform: translateX(260px); opacity: 0; }

.curator-dots .dots circle { transform-box: fill-box; transform-origin: center; transition: transform 2.5s var(--ease-water), opacity 2.5s var(--ease-water); }
.curator:not(.is-visible) .dots circle { transform: scale(0); opacity: 0; }

.cartographer-lines path {
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  transition: stroke-dashoffset 2.5s var(--ease-water);
}
.cartographer.is-visible .cartographer-lines path { stroke-dashoffset: 0; }

.deep {
  min-height: 100vh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4vh;
  padding: 10vh 6vw;
  background: var(--darker);
}

.librarian { margin-bottom: 0; }
.librarian .fish-svg { animation: librarianFloat 8s var(--ease-water) infinite; }
.coda { font-size: clamp(3rem, 8vw, 7rem); line-height: 1; }

@keyframes glassDrift {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.92; }
  25% { transform: scale(1.06) rotate(1.5deg); opacity: 0.78; }
  50% { transform: scale(1.12) rotate(-1deg); opacity: 0.86; }
  75% { transform: scale(1.04) rotate(2deg); opacity: 0.8; }
}

@keyframes morphField {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(52px, -34px) scale(1.08); }
  50% { transform: translate(-26px, 48px) scale(0.94); }
  75% { transform: translate(38px, 30px) scale(1.03); }
}

@keyframes librarianFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-16px) scale(1.015); }
}

@media (max-width: 760px) {
  .hero-copy { left: 52%; width: 88vw; }
  .folio.left, .folio.right { margin-left: auto; margin-right: auto; }
  .descent { padding-left: 4vw; padding-right: 4vw; }
}