:root {
  --parchment-honey: #F2D89B;
  --warm-vellum: #FFF2CC;
  --walnut-ink: #3B2618;
  --loam-brown: #6B4A2F;
  --brass-patina: #B98232;
  --clay-rose: #B96A4D;
  --moss-shadow: #46523A;
  --glitch-teal: #37B8A7;
  --glitch-berry: #B13A6B;
  --display: "Nunito Sans", system-ui, sans-serif;
  --body: "Quicksand", system-ui, sans-serif;
  --badge: "Baloo 2", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--walnut-ink);
  font-family: var(--body);
  background: var(--loam-brown);
  overflow-x: hidden;
}

.earthen-wall,
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.earthen-wall {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 242, 204, 0.35), transparent 28rem),
    radial-gradient(circle at 15% 80%, rgba(70, 82, 58, 0.55), transparent 32rem),
    radial-gradient(circle at 84% 74%, rgba(177, 58, 107, 0.18), transparent 24rem),
    linear-gradient(125deg, #3B2618 0%, #6B4A2F 42%, #46523A 100%);
  z-index: -3;
}

.grain {
  opacity: .24;
  z-index: -2;
  background-image:
    repeating-radial-gradient(circle at 20% 30%, rgba(255,242,204,.34) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(59,38,24,.16) 0 1px, transparent 1px 7px);
  mix-blend-mode: overlay;
}

.persistent-frame {
  position: fixed;
  inset: 2.1rem;
  border: 2px solid rgba(185, 130, 50, .72);
  border-radius: 42px;
  box-shadow: inset 0 0 0 6px rgba(255, 242, 204, .14), inset 0 0 0 8px rgba(59,38,24,.32), 0 0 38px rgba(59,38,24,.44);
  pointer-events: none;
  z-index: 20;
  transform: scale(.985);
  animation: frameDraw 1400ms ease-out forwards;
}

.persistent-frame::before,
.persistent-frame::after {
  content: "";
  position: absolute;
  inset: 1.2rem;
  border: 1px dashed rgba(255,242,204,.38);
  border-radius: 34px;
}

.persistent-frame::after {
  inset: 2.1rem;
  border-style: dotted;
  opacity: .55;
}

.corner {
  position: absolute;
  width: 86px;
  height: 86px;
  border-color: var(--brass-patina);
  filter: drop-shadow(0 3px 0 rgba(59,38,24,.35));
}

.corner::before,
.corner::after {
  content: "";
  position: absolute;
  border: 2px solid rgba(255,242,204,.6);
  border-radius: 50%;
}

.corner::before { inset: 8px; }
.corner::after { inset: 25px; border-color: rgba(55,184,167,.35); }
.corner-one { left: -8px; top: -8px; border-left: 6px double var(--brass-patina); border-top: 6px double var(--brass-patina); border-radius: 40px 0 0 0; }
.corner-two { right: -8px; top: -8px; border-right: 6px double var(--brass-patina); border-top: 6px double var(--brass-patina); border-radius: 0 40px 0 0; }
.corner-three { right: -8px; bottom: -8px; border-right: 6px double var(--brass-patina); border-bottom: 6px double var(--brass-patina); border-radius: 0 0 40px 0; }
.corner-four { left: -8px; bottom: -8px; border-left: 6px double var(--brass-patina); border-bottom: 6px double var(--brass-patina); border-radius: 0 0 0 40px; }

.pin {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--warm-vellum), var(--brass-patina) 48%, var(--walnut-ink));
}
.pin-one { left: 50%; top: 1rem; }
.pin-two { right: 1rem; top: 50%; }
.pin-three { left: 50%; bottom: 1rem; }
.pin-four { left: 1rem; top: 50%; }

.folio { position: relative; z-index: 1; }

.chapter {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 7rem 2rem;
  perspective: 1200px;
}

.ornate-card {
  width: min(860px, calc(100vw - 6rem));
  min-height: min(720px, calc(100vh - 9rem));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(2rem, 5vw, 4.8rem);
  position: relative;
  border-radius: 48% 48% 16% 16% / 11% 11% 11% 11%;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,242,204,.88), transparent 20rem),
    repeating-linear-gradient(45deg, rgba(185,130,50,.08) 0 1px, transparent 1px 11px),
    linear-gradient(180deg, rgba(255,242,204,.96), rgba(242,216,155,.94));
  border: 2px solid rgba(59,38,24,.8);
  box-shadow: 0 28px 70px rgba(59,38,24,.5), inset 0 0 0 9px rgba(185,130,50,.38), inset 0 0 0 12px rgba(255,242,204,.5);
  overflow: hidden;
  opacity: .42;
  transform: translateY(34px) rotateX(3deg) scale(.96);
  transition: opacity 700ms ease, transform 900ms cubic-bezier(.2,.75,.2,1);
}

.ornate-card.in-view { opacity: 1; transform: translateY(0) rotateX(0) scale(1); }

.ornate-card::before {
  content: "❧  ·  ❧  ·  ❧";
  position: absolute;
  left: 1.3rem;
  right: 1.3rem;
  top: 1.2rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid rgba(59,38,24,.36);
  font-family: var(--badge);
  color: var(--brass-patina);
  letter-spacing: .55em;
}

.ornate-card::after {
  content: "";
  position: absolute;
  inset: 1.8rem;
  border: 2px double rgba(107,74,47,.6);
  border-radius: inherit;
  pointer-events: none;
}

.chapter-badge,
.small-label,
.plate-caption,
.quiet-seal,
.charm span {
  font-family: var(--badge);
  letter-spacing: .08em;
}

.chapter-badge {
  color: var(--warm-vellum);
  background: linear-gradient(135deg, var(--loam-brown), var(--brass-patina));
  border: 1px solid rgba(59,38,24,.75);
  border-radius: 999px;
  padding: .35rem .95rem;
  box-shadow: 0 4px 0 rgba(59,38,24,.2);
  margin-bottom: 1rem;
}

.small-label { color: var(--moss-shadow); margin: 0 0 .2rem; }

h1, h2 {
  font-family: var(--display);
  letter-spacing: -0.035em;
  margin: 0;
  color: var(--walnut-ink);
  line-height: .9;
}

h1 { font-size: clamp(3.1rem, 10vw, 8.6rem); }
h2 { font-size: clamp(2.8rem, 7vw, 6.8rem); max-width: 750px; }

.glitch-title { position: relative; text-shadow: 2px 1px 0 rgba(55,184,167,.28), -2px -1px 0 rgba(177,58,107,.25); animation: textCorrect 5.5s infinite; }
.glitch-title::before,
.glitch-title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.glitch-title::before { color: var(--glitch-teal); transform: translate(5px, -2px); clip-path: inset(0 0 62% 0); animation: glitchSlice 4.8s infinite; }
.glitch-title::after { color: var(--glitch-berry); transform: translate(-4px, 2px); clip-path: inset(58% 0 0 0); animation: glitchSlice 5.2s infinite reverse; }

.lead {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.65;
  max-width: 620px;
  margin: 1.2rem auto 2rem;
  font-weight: 600;
}

.plate-caption {
  width: min(650px, 90%);
  margin: 1.2rem auto 0;
  padding: .75rem 1.2rem;
  border-top: 1px solid rgba(107,74,47,.52);
  border-bottom: 1px solid rgba(107,74,47,.52);
  color: var(--loam-brown);
}

.specimen-stage, .emblem-seal {
  position: relative;
  display: grid;
  place-items: center;
  width: min(430px, 72vw);
  aspect-ratio: 1;
  margin: 1.1rem auto;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,242,204,.88) 0 39%, rgba(185,130,50,.3) 40% 42%, transparent 43%),
    repeating-conic-gradient(from 4deg, rgba(59,38,24,.13) 0deg 5deg, transparent 5deg 12deg);
}

.frost-shadow {
  position: absolute;
  inset: 12%;
  border-radius: 50% 50% 45% 45%;
  background: rgba(255,242,204,.42);
  backdrop-filter: blur(2px);
}

.monster {
  width: 75%;
  overflow: visible;
  filter: drop-shadow(0 14px 12px rgba(59,38,24,.26));
  animation: breathe 4.6s ease-in-out infinite;
}

.monster-shadow { opacity: .82; animation: breathe 4.6s ease-in-out infinite, inkAppear 2100ms ease-out both; }
.horn, .smile, .pattern, .proof-paw { fill: none; stroke: var(--walnut-ink); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.body { fill: var(--clay-rose); stroke: var(--walnut-ink); stroke-width: 7; }
.eye { fill: var(--warm-vellum); stroke: var(--walnut-ink); stroke-width: 7; transform-origin: 130px 120px; animation: blink 6s infinite; }
.pupil { fill: var(--moss-shadow); transform-origin: 130px 120px; animation: blink 6s infinite; }
.cloak { fill: var(--moss-shadow); stroke: var(--walnut-ink); stroke-width: 5; }
.pattern, .proof-paw { stroke: var(--warm-vellum); stroke-width: 5; }
.smile { stroke-width: 6; }

.orbit {
  position: relative;
  width: min(590px, 80vw);
  aspect-ratio: 1;
  margin: .5rem auto 0;
}

.core-seal {
  position: absolute;
  inset: 32%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--warm-vellum);
  border: 8px double var(--brass-patina);
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.15rem, 3vw, 2.1rem);
  line-height: 1;
  box-shadow: 0 0 0 10px rgba(107,74,47,.13);
}

.charm {
  position: absolute;
  width: 176px;
  min-height: 112px;
  display: grid;
  place-items: center;
  padding: 1rem;
  border-radius: 22px 22px 34px 34px;
  background: linear-gradient(180deg, var(--warm-vellum), var(--parchment-honey));
  border: 2px solid rgba(59,38,24,.74);
  box-shadow: inset 0 0 0 5px rgba(185,130,50,.18), 0 12px 24px rgba(59,38,24,.2);
  font-weight: 600;
  transform: translate(-50%, -50%);
}
.charm::before { content: ""; position: absolute; top: -8px; width: 15px; height: 15px; border-radius: 50%; background: var(--brass-patina); border: 2px solid var(--walnut-ink); }
.charm span { display: block; width: 100%; color: var(--clay-rose); font-size: .86rem; }
.charm-one { left: 50%; top: 8%; }
.charm-two { left: 91%; top: 50%; }
.charm-three { left: 50%; top: 92%; }
.charm-four { left: 9%; top: 50%; }

.ribbon-system {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr minmax(260px, 450px) 1fr;
  gap: 1rem;
  align-items: center;
  margin: 2rem 0 1rem;
}

.marginalia {
  background: linear-gradient(90deg, rgba(185,130,50,.2), rgba(255,242,204,.72));
  border: 1px solid rgba(107,74,47,.5);
  border-radius: 999px;
  padding: 1rem;
  font-size: .92rem;
  color: var(--loam-brown);
  transform: translateX(var(--slide, 0));
  transition: transform 900ms ease;
}
.ornate-card:not(.in-view) .left-note { --slide: -50px; }
.ornate-card:not(.in-view) .right-note { --slide: 50px; }

.argument-frame {
  position: relative;
  min-height: 320px;
  display: grid;
  place-items: center;
  padding: 2rem;
  border-radius: 45% 45% 20% 20%;
  background: rgba(255,242,204,.58);
  border: 7px double var(--brass-patina);
}
.argument-frame p { max-width: 320px; font-weight: 600; line-height: 1.65; }
.thread { position: absolute; font-family: var(--badge); color: var(--warm-vellum); background: var(--clay-rose); border: 1px solid var(--walnut-ink); border-radius: 999px; padding: .35rem 1.3rem; box-shadow: 0 5px 0 rgba(59,38,24,.16); }
.thread-a { left: -8%; top: 18%; transform: rotate(-12deg); }
.thread-b { right: -10%; top: 46%; transform: rotate(10deg); background: var(--moss-shadow); }
.thread-c { left: 18%; bottom: 11%; transform: rotate(5deg); background: var(--brass-patina); }

.emblem-seal { border: 8px double var(--brass-patina); background-color: var(--warm-vellum); }
.friendly { width: 69%; }
.resolved-labels { position: absolute; inset: 0; animation: slowTurn 28s linear infinite; }
.resolved-labels span { position: absolute; font-family: var(--badge); color: var(--loam-brown); background: rgba(255,242,204,.85); border: 1px solid rgba(59,38,24,.45); border-radius: 999px; padding: .2rem .7rem; }
.resolved-labels span:nth-child(1) { left: 42%; top: 3%; }
.resolved-labels span:nth-child(2) { right: 0; top: 45%; }
.resolved-labels span:nth-child(3) { left: 43%; bottom: 3%; }
.resolved-labels span:nth-child(4) { left: -4%; top: 45%; }
.quiet-seal { font-size: clamp(1.2rem, 3vw, 2rem); color: var(--clay-rose); margin: 1rem 0 0; }

body[data-chapter="02"] .persistent-frame { border-color: rgba(55,184,167,.75); }
body[data-chapter="03"] .persistent-frame { border-color: rgba(185,106,77,.8); }
body[data-chapter="04"] .persistent-frame { border-color: rgba(177,58,107,.58); }

@keyframes frameDraw { from { opacity: 0; clip-path: inset(50% 50% 50% 50% round 42px); } to { opacity: 1; clip-path: inset(0 0 0 0 round 42px); } }
@keyframes textCorrect { 0%, 88%, 100% { filter: none; } 90% { filter: hue-rotate(95deg); transform: translateX(1px); } 92% { transform: translateX(-2px); } 94% { transform: translateX(0); } }
@keyframes glitchSlice { 0%, 84%, 100% { opacity: 0; } 86%, 91% { opacity: .75; } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035) translateY(-3px); } }
@keyframes inkAppear { 0% { opacity: 0; filter: blur(7px) drop-shadow(8px 0 0 var(--glitch-teal)) drop-shadow(-8px 0 0 var(--glitch-berry)); } 65% { opacity: .86; filter: blur(1px) drop-shadow(2px 0 0 var(--glitch-teal)); } 100% { opacity: .82; filter: drop-shadow(0 14px 12px rgba(59,38,24,.26)); } }
@keyframes blink { 0%, 46%, 50%, 100% { transform: scaleY(1); } 48% { transform: scaleY(.08); } }
@keyframes slowTurn { to { transform: rotate(360deg); } }

@media (max-width: 780px) {
  .persistent-frame { inset: .8rem; border-radius: 26px; }
  .chapter { padding: 4.5rem 1rem; }
  .ornate-card { width: calc(100vw - 2.6rem); min-height: auto; padding: 4.2rem 1.3rem 2.2rem; border-radius: 34px; }
  .orbit { width: min(440px, 82vw); min-height: 530px; aspect-ratio: auto; }
  .charm { width: 150px; min-height: 100px; font-size: .9rem; }
  .charm-two { left: 79%; }
  .charm-four { left: 21%; }
  .ribbon-system { grid-template-columns: 1fr; }
  .marginalia { border-radius: 24px; }
  .thread-a { left: 2%; }
  .thread-b { right: 2%; }
}