:root {
  --parchment: #F6F0E4;
  --cream: #E9DFC9;
  --sage: #B8C7AE;
  --olive: #8FA17B;
  --celadon: #D7E0CF;
  --graphite: #3E3A31;
  --brass: #B79A5B;
  --clay: #C9A283;
  --paper-shadow: 0 28px 80px rgba(62, 58, 49, 0.16);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--parchment);
  color: var(--graphite);
  font-family: "Nunito Sans", "Inter", Arial, sans-serif;
  font-weight: 300;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: 0.05;
  background:
    radial-gradient(circle at 12% 18%, #3E3A31 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 42%, #8FA17B 0 1px, transparent 1.8px),
    radial-gradient(circle at 35% 75%, #B79A5B 0 0.8px, transparent 1.4px),
    linear-gradient(115deg, transparent, rgba(62, 58, 49, 0.4), transparent);
  background-size: 38px 38px, 54px 54px, 29px 29px, 100% 100%;
}

.folio-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--olive), var(--brass), var(--clay));
  z-index: 30;
  transition: width 0.2s ease-out;
}

.archive { width: 100%; }

.chapter {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 1.2vw;
  padding: 8vh 8vw;
  isolation: isolate;
  overflow: hidden;
}

.chapter::after {
  content: attr(data-chapter);
  position: absolute;
  right: 5vw;
  bottom: 4vh;
  font-family: "IBM Plex Sans", sans-serif;
  letter-spacing: 0.22em;
  font-size: 0.74rem;
  color: rgba(62, 58, 49, 0.34);
}

.chapter-kicker,
.catalog-label,
.sheet-pin,
.specimen,
.margin-note,
.field-note,
.archive-drawer,
.closing-inscription {
  font-family: "IBM Plex Sans", sans-serif;
}

.chapter-kicker {
  grid-column: 1 / 7;
  align-self: start;
  color: var(--olive);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.76rem;
  font-weight: 500;
}

h1, h2 {
  font-family: "Alegreya", Georgia, serif;
  font-weight: 400;
  color: var(--graphite);
  margin: 0;
  line-height: 0.95;
}

h1 { font-size: clamp(4rem, 9vw, 10.8rem); letter-spacing: -0.055em; }
h2 { font-size: clamp(2.7rem, 6vw, 7.6rem); letter-spacing: -0.035em; }

.title-block {
  grid-column: 1 / 7;
  grid-row: 2;
  align-self: start;
  margin-top: 4vh;
  z-index: 3;
}

.catalog-label {
  margin: 0 0 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.75rem;
  color: var(--brass);
}

.thesis {
  max-width: 33rem;
  margin: 2rem 0 0;
  font-size: clamp(1.1rem, 1.6vw, 1.55rem);
  line-height: 1.65;
}

.ledger-sheet,
.artifact-path,
.parchment-plane,
.atlas-panel {
  position: relative;
  background:
    repeating-linear-gradient(to bottom, transparent 0 44px, rgba(62, 58, 49, 0.06) 45px 46px),
    linear-gradient(135deg, rgba(255,255,255,0.52), rgba(233,223,201,0.72));
  border: 1px solid rgba(62, 58, 49, 0.16);
  box-shadow: var(--paper-shadow);
  z-index: 2;
}

.animated-frame::before,
.animated-frame::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border: 1px solid transparent;
}

.animated-frame::before {
  background: linear-gradient(90deg, var(--brass) 50%, transparent 0) 0 0 / 200% 1px no-repeat,
              linear-gradient(180deg, var(--brass) 50%, transparent 0) 100% 0 / 1px 200% no-repeat;
  animation: borderTraceOne 9s ease-in-out infinite;
}

.animated-frame::after {
  background: linear-gradient(270deg, var(--clay) 50%, transparent 0) 100% 100% / 200% 1px no-repeat,
              linear-gradient(0deg, var(--clay) 50%, transparent 0) 0 100% / 1px 200% no-repeat;
  animation: borderTraceTwo 9s ease-in-out infinite;
}

.ledger-sheet {
  grid-column: 6 / 15;
  grid-row: 1 / span 3;
  align-self: center;
  min-height: 72vh;
  padding: 8vh 5vw;
  transform: rotate(0.7deg);
}

.sheet-pin {
  position: absolute;
  top: 2rem;
  right: 2.5rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  color: var(--olive);
}

.ledger-rule {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) 1fr;
  gap: 2rem;
  align-items: center;
  min-height: 12vh;
  border-bottom: 1px solid rgba(62, 58, 49, 0.11);
}

.ledger-rule span {
  font-family: "Alegreya", Georgia, serif;
  font-size: clamp(1.7rem, 3vw, 3.2rem);
}

.ledger-rule em { font-style: normal; line-height: 1.7; color: rgba(62, 58, 49, 0.72); }

.wax-seal {
  position: absolute;
  width: 7rem;
  height: 7rem;
  right: 9%;
  bottom: 9%;
  border: 2px solid var(--brass);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--brass);
  background: radial-gradient(circle, rgba(183,154,91,0.12), transparent 68%);
}

.wax-seal::before { content: ""; position: absolute; inset: 0.7rem; border: 1px dashed rgba(183,154,91,0.75); border-radius: 50%; }
.wax-seal span { font-family: "Alegreya", serif; font-size: 1.9rem; }

.margin-note {
  position: relative;
  z-index: 4;
  background: rgba(233, 223, 201, 0.78);
  border-left: 2px solid var(--clay);
  padding: 1rem 1.2rem;
  line-height: 1.55;
  font-size: 0.92rem;
  box-shadow: 0 14px 38px rgba(62, 58, 49, 0.09);
}

.note-opening { grid-column: 2 / 5; grid-row: 3; align-self: end; transform: rotate(-1.4deg); }

.blob {
  position: absolute;
  filter: blur(20px);
  opacity: 0.55;
  border-radius: 58% 42% 63% 37% / 45% 62% 38% 55%;
  animation: blobFloat 24s ease-in-out infinite alternate;
  z-index: 1;
}

.blob-sage { width: 34vw; height: 30vw; right: 12vw; top: 16vh; background: var(--sage); }
.blob-clay { width: 22vw; height: 18vw; right: 33vw; bottom: 10vh; background: var(--clay); animation-delay: -9s; opacity: 0.38; }
.blob-celadon { width: 44vw; height: 34vw; left: 8vw; bottom: 8vh; background: var(--celadon); animation-delay: -5s; }

.chapter-anatomy { background: linear-gradient(180deg, var(--parchment), var(--cream)); }

.artifact-path {
  grid-column: 2 / 13;
  grid-row: 2;
  min-height: 66vh;
  padding: 2rem;
  transform: rotate(-0.5deg);
}

.transaction-svg,
.atlas-lines { position: absolute; inset: 4%; width: 92%; height: 92%; overflow: visible; }
.transaction-svg path,
.atlas-lines path {
  fill: none;
  stroke: var(--olive);
  stroke-width: 2;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: drawRoute 12s ease-in-out infinite;
}

.atlas-lines circle { fill: var(--parchment); stroke: var(--brass); stroke-width: 2; }

.specimen {
  position: absolute;
  min-width: 10.2rem;
  background: rgba(246, 240, 228, 0.86);
  border: 1px solid rgba(62, 58, 49, 0.22);
  padding: 0.86rem 1rem;
  box-shadow: 0 12px 28px rgba(62, 58, 49, 0.1);
}

.specimen::before {
  content: "";
  position: absolute;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--brass);
  top: -0.3rem;
  left: 1rem;
}

.specimen b { display: block; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; color: var(--olive); margin-bottom: 0.42rem; }
.specimen span { font-size: 0.9rem; }
.node-intent { left: 5%; bottom: 11%; }
.node-counterparty { left: 37%; top: 19%; transform: rotate(1.2deg); }
.node-proof { right: 24%; bottom: 25%; transform: rotate(-1deg); }
.node-memory { right: 5%; top: 10%; }
.archive-drawer { position: absolute; right: 7%; bottom: 7%; border-top: 1px solid rgba(62,58,49,0.2); padding-top: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(62,58,49,0.72); }
.archive-drawer i { display: block; font-style: normal; text-transform: none; letter-spacing: 0; margin-top: 0.45rem; color: var(--brass); }
.note-anatomy { grid-column: 11 / 15; grid-row: 1; align-self: end; transform: rotate(1.3deg); }

.chapter-notes { background: var(--parchment); }
.parchment-plane { grid-column: 4 / 13; grid-row: 2; min-height: 58vh; padding: 7vh 6vw; transform: rotate(0.35deg); }
.plane-text { max-width: 35rem; font-size: clamp(1.1rem, 1.7vw, 1.45rem); line-height: 1.8; margin-top: 2rem; }
.hairline { position: absolute; height: 1px; background: rgba(62,58,49,0.22); transform-origin: left; }
.hairline::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--brass); }
.hairline-one { width: 22vw; left: -9vw; top: 23%; transform: rotate(-8deg); }
.hairline-two { width: 28vw; right: -13vw; bottom: 25%; transform: rotate(7deg); }
.field-note { position: absolute; z-index: 4; width: min(18rem, 32vw); padding: 1rem 1.1rem; background: rgba(215,224,207,0.62); border: 1px solid rgba(62,58,49,0.13); line-height: 1.55; box-shadow: 0 12px 30px rgba(62,58,49,0.08); }
.field-note sup { color: var(--brass); font-weight: 500; margin-right: 0.4rem; }
.note-one { left: 8vw; top: 25vh; transform: rotate(-1.5deg); }
.note-two { right: 9vw; top: 20vh; transform: rotate(1.1deg); }
.note-three { left: 14vw; bottom: 10vh; transform: rotate(1.6deg); }
.note-four { right: 15vw; bottom: 14vh; transform: rotate(-1deg); }

.chapter-atlas { background: linear-gradient(180deg, var(--cream), var(--parchment)); }
.atlas-panel { grid-column: 2 / 14; grid-row: 2; min-height: 70vh; padding: 6vh 5vw; overflow: hidden; }
.territory { position: absolute; display: grid; place-items: center; border-radius: 58% 42% 63% 37% / 45% 62% 38% 55%; border: 1px solid rgba(62,58,49,0.13); color: var(--graphite); font-family: "IBM Plex Sans", sans-serif; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.76rem; }
.territory-a { width: 18rem; height: 13rem; left: 9%; bottom: 13%; background: rgba(184,199,174,0.64); }
.territory-b { width: 22rem; height: 15rem; left: 39%; top: 30%; background: rgba(215,224,207,0.76); }
.territory-c { width: 16rem; height: 12rem; right: 7%; top: 15%; background: rgba(201,162,131,0.38); }
.territory-d { width: 19rem; height: 14rem; right: 13%; bottom: 8%; background: rgba(233,223,201,0.8); }
.blob-atlas-one { width: 30vw; height: 26vw; left: 5vw; top: 20vh; background: var(--sage); }
.blob-atlas-two { width: 26vw; height: 23vw; right: 8vw; bottom: 10vh; background: var(--celadon); animation-delay: -12s; }
.closing-inscription { position: absolute; left: 8vw; bottom: 6vh; margin: 0; text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.78rem; color: var(--brass); }

.paper-drift { opacity: 0; transform: translateY(18px) rotate(var(--tilt, 0deg)); transition: opacity 1.2s ease, transform 1.2s ease, box-shadow 1.2s ease; }
.paper-drift.in-view { opacity: 1; transform: translateY(0) rotate(var(--tilt, 0deg)); }
.ledger-sheet { --tilt: 0.7deg; }
.artifact-path { --tilt: -0.5deg; }
.parchment-plane { --tilt: 0.35deg; }

@keyframes blobFloat {
  0% { transform: translate3d(0,0,0) rotate(0deg) scale(1); border-radius: 58% 42% 63% 37% / 45% 62% 38% 55%; }
  100% { transform: translate3d(2vw,-2vh,0) rotate(8deg) scale(1.07); border-radius: 42% 58% 39% 61% / 61% 39% 56% 44%; }
}

@keyframes drawRoute {
  0%, 12% { stroke-dashoffset: 1200; opacity: 0.45; }
  50%, 82% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: -1200; opacity: 0.4; }
}

@keyframes borderTraceOne {
  0%, 15% { background-position: 100% 0, 100% 100%; }
  45%, 100% { background-position: 0 0, 100% 0; }
}

@keyframes borderTraceTwo {
  0%, 35% { background-position: 0 100%, 0 0; }
  70%, 100% { background-position: 100% 100%, 0 100%; }
}

@media (max-width: 820px) {
  .chapter { display: block; padding: 7vh 6vw; min-height: auto; }
  .chapter > * { margin-bottom: 2rem; }
  .ledger-sheet, .artifact-path, .parchment-plane, .atlas-panel { min-height: 68vh; padding: 2rem; }
  .title-block { margin-top: 8vh; }
  .note-opening, .note-anatomy { width: 78%; margin-left: 12%; }
  .ledger-rule { grid-template-columns: 1fr; gap: 0.4rem; min-height: 8.5rem; }
  .specimen { min-width: 8.4rem; padding: 0.7rem; }
  .node-counterparty { left: 31%; }
  .node-proof { right: 11%; bottom: 32%; }
  .archive-drawer { left: 2rem; right: auto; bottom: 2rem; }
  .field-note { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 74%; margin: -1rem 0 2rem auto; }
  .note-one, .note-three { margin-left: 0; margin-right: auto; }
  .territory { transform: scale(0.72); transform-origin: center; }
  .territory-a { left: -8%; }
  .territory-b { left: 22%; }
  .territory-c { right: -15%; }
  .territory-d { right: -5%; }
}