:root {
  --deep-violet: #2B1038;
  --midnight-sapphire: #0B1B3D;
  --emerald-marble: #0C3B2E;
  --garnet-petal: #8E244D;
  --amethyst-shadow: #4A245F;
  --antique-gold: #C49A45;
  --aged-parchment: #EFE0BC;
  --faded-rose: #C77C8C;
  --bone-highlight: #FFF4D6;
  --ink: #241123;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 20% 10%, rgba(142, 36, 77, .38), transparent 28rem),
    radial-gradient(circle at 80% 20%, rgba(12, 59, 46, .4), transparent 32rem),
    linear-gradient(135deg, var(--midnight-sapphire), var(--deep-violet) 54%, #13091f);
  font-family: "Cormorant Garamond", Georgia, serif;
  overflow-x: hidden;
}

.grain, .gold-dust {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

.grain {
  opacity: .16;
  background-image:
    repeating-radial-gradient(circle at 17% 23%, rgba(255,244,214,.35) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(97deg, transparent 0 11px, rgba(43,16,56,.2) 12px 13px);
  mix-blend-mode: multiply;
}

.gold-dust {
  opacity: .55;
  background-image: radial-gradient(circle, rgba(196,154,69,.8) 0 1px, transparent 1.4px);
  background-size: 6rem 6rem;
  transform: translate3d(var(--dust-x, 0), var(--dust-y, 0), 0);
  transition: transform .2s ease-out;
}

.cover {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 6vw;
  position: relative;
  transition: transform 1.15s cubic-bezier(.77,0,.18,1), opacity .9s ease;
}

.cover.opened { transform: translateY(-18vh) rotateX(12deg); opacity: 0; pointer-events: none; }

.cover-shadow {
  position: absolute;
  width: min(72rem, 84vw);
  height: min(42rem, 70vh);
  border-radius: 2rem;
  background: rgba(0,0,0,.38);
  filter: blur(2.2rem);
  transform: translateY(2rem) rotate(-2deg);
}

.cover-folio, .page {
  background:
    radial-gradient(circle at 18% 16%, rgba(255,244,214,.82), transparent 18rem),
    linear-gradient(100deg, rgba(199,124,140,.12), transparent 35%),
    var(--aged-parchment);
  border: 1px solid rgba(196,154,69,.6);
  box-shadow: inset 0 0 0 1rem rgba(255,244,214,.16), 0 2rem 7rem rgba(0,0,0,.48);
}

.cover-folio {
  position: relative;
  width: min(70rem, 92vw);
  min-height: 38rem;
  padding: clamp(2rem, 5vw, 5rem);
  border-radius: 1.1rem .35rem 1.4rem .45rem;
  text-align: center;
  overflow: hidden;
}

.cover-folio::before, .page::before {
  content: "";
  position: absolute;
  inset: 1rem;
  border: 1px solid rgba(43,16,56,.35);
  border-radius: inherit;
  pointer-events: none;
}

.folio-tab, .plate-number {
  font-family: "Grenze Gotisch", "Times New Roman", serif;
  color: var(--antique-gold);
  letter-spacing: .12em;
  text-transform: lowercase;
}

.folio-tab { position: absolute; top: 1.4rem; right: 2rem; font-size: 1.2rem; }
.overline, .instruction, .vertical-caption { font-family: "Newsreader", Georgia, serif; letter-spacing: .22em; text-transform: uppercase; }
.overline { color: var(--garnet-petal); font-size: .8rem; }

h1, h2 {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "SOFT" 18, "WONK" 1, "opsz" 110;
  line-height: .84;
  margin: 0;
  color: var(--deep-violet);
}

h1 {
  font-size: clamp(4.5rem, 12vw, 12rem);
  text-shadow: 0 0 .5rem rgba(196,154,69,.52), .04em .04em 0 rgba(196,154,69,.25);
}

h1 span { color: var(--antique-gold); }
h2 { font-size: clamp(3.3rem, 7vw, 8rem); }

.cover-copy { max-width: 40rem; margin: 2rem auto; font-size: 1.45rem; line-height: 1.5; }
.instruction { color: var(--emerald-marble); font-size: .72rem; }

.seal-cluster { position: relative; width: 18rem; height: 12rem; margin: 1.5rem auto; }
.vellum-rip {
  position: absolute;
  inset: 2.2rem .8rem 1.4rem;
  background: rgba(255,244,214,.56);
  clip-path: polygon(0 18%, 13% 8%, 30% 17%, 49% 4%, 72% 12%, 100% 2%, 94% 82%, 75% 76%, 51% 93%, 26% 79%, 0 90%);
  border: 1px solid rgba(196,154,69,.45);
  transform-origin: top;
  animation: vellumLift 6s ease-in-out infinite;
}

.wax-seal {
  position: absolute;
  z-index: 3;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 6.4rem; height: 6.4rem;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  color: var(--bone-highlight);
  background: radial-gradient(circle at 35% 30%, #C77C8C, var(--garnet-petal) 55%, #5b132e);
  box-shadow: inset 0 -.5rem 1rem rgba(43,16,56,.45), 0 .9rem 2rem rgba(43,16,56,.42);
  font-family: "Grenze Gotisch", serif;
  font-size: 1.6rem;
}
.wax-seal.cracked { animation: crackSeal .8s ease forwards; }

.lottie-daisy, .pressed-daisy { position: relative; width: 10rem; height: 10rem; }
.cover-daisy { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.72); opacity: .55; }
.lottie-daisy span, .pressed-daisy span {
  position: absolute;
  width: 2.2rem; height: 5.2rem;
  left: 3.9rem; top: .4rem;
  border-radius: 50% 50% 44% 44%;
  background: linear-gradient(var(--bone-highlight), var(--aged-parchment));
  border: 1px solid rgba(142,36,77,.45);
  transform-origin: 50% 4.6rem;
  box-shadow: inset .2rem 0 .3rem rgba(11,27,61,.12);
}
.lottie-daisy i, .pressed-daisy i, .pressed-daisy b {
  position: absolute;
  display: block;
}
.lottie-daisy i, .pressed-daisy i {
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  left: 3.75rem; top: 3.75rem;
  background: radial-gradient(circle, var(--antique-gold), var(--garnet-petal) 64%);
  border: 1px solid var(--deep-violet);
  z-index: 2;
}
.pressed-daisy b { width: .24rem; height: 7rem; left: 4.9rem; top: 5.6rem; background: var(--emerald-marble); transform: rotate(10deg); }
.lottie-daisy span:nth-child(1), .pressed-daisy span:nth-of-type(1) { transform: rotate(0deg); }
.lottie-daisy span:nth-child(2), .pressed-daisy span:nth-of-type(2) { transform: rotate(45deg); }
.lottie-daisy span:nth-child(3), .pressed-daisy span:nth-of-type(3) { transform: rotate(90deg); }
.lottie-daisy span:nth-child(4), .pressed-daisy span:nth-of-type(4) { transform: rotate(135deg); }
.lottie-daisy span:nth-child(5), .pressed-daisy span:nth-of-type(5) { transform: rotate(180deg); }
.lottie-daisy span:nth-child(6), .pressed-daisy span:nth-of-type(6) { transform: rotate(225deg); }
.lottie-daisy span:nth-child(7), .pressed-daisy span:nth-of-type(7) { transform: rotate(270deg); }
.lottie-daisy span:nth-child(8), .pressed-daisy span:nth-of-type(8) { transform: rotate(315deg); }
.breathing, .cover-daisy, .final-daisy { animation: breatheDaisy 5.5s ease-in-out infinite; }

.folio { position: relative; }
.plate-tabs { position: fixed; right: 1rem; top: 50%; transform: translateY(-50%); z-index: 12; display: grid; gap: .55rem; }
.plate-tabs a { color: var(--antique-gold); text-decoration: none; font-family: "Grenze Gotisch", serif; border: 1px solid rgba(196,154,69,.55); width: 2.2rem; height: 2.2rem; display: grid; place-items: center; background: rgba(11,27,61,.7); }

.plate {
  min-height: 100vh;
  padding: clamp(4rem, 8vw, 8rem) clamp(1.5rem, 7vw, 7rem);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(18rem, .9fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: center;
  position: relative;
}

.page { position: relative; padding: clamp(2rem, 4vw, 4.5rem); border-radius: .8rem .25rem .9rem .35rem; }
.page p { font-size: clamp(1.2rem, 1.6vw, 1.55rem); line-height: 1.58; }
.lede { color: var(--garnet-petal); font-size: clamp(1.45rem, 2vw, 2rem) !important; }
.drop { float: left; font-size: 1.6em; line-height: .7; color: var(--garnet-petal); margin-right: .15em; }
.vertical-caption { position: absolute; left: -1.1rem; top: 4rem; writing-mode: vertical-rl; color: var(--antique-gold); font-size: .7rem; }
.margin-note { border-left: 1px solid var(--antique-gold); padding-left: 1rem; color: var(--emerald-marble); font-style: italic; }

.specimen-frame {
  min-height: 34rem;
  display: grid;
  place-items: center;
  position: relative;
  border: double .45rem rgba(196,154,69,.65);
  background: rgba(255,244,214,.12);
  box-shadow: inset 0 0 4rem rgba(239,224,188,.16);
}
.pin { position: absolute; width: .8rem; height: .8rem; border-radius: 50%; background: var(--antique-gold); box-shadow: 0 0 0 .35rem rgba(196,154,69,.2); }
.pin-one { top: 22%; left: 48%; }
.caption-plaque { position: absolute; bottom: 1.2rem; right: 1.2rem; color: var(--antique-gold); font-family: "Grenze Gotisch", serif; }

.index { grid-template-columns: .65fr 1.35fr; background: linear-gradient(90deg, rgba(43,16,56,.5), transparent); }
.petal-index { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.petal-index li { position: relative; background: var(--aged-parchment); border: 1px solid rgba(196,154,69,.55); padding: 1rem 1.25rem; box-shadow: .5rem .5rem 0 rgba(11,27,61,.28); }
.petal-index button { width: 100%; border: 0; background: transparent; display: flex; gap: 1rem; align-items: baseline; cursor: pointer; color: var(--deep-violet); font-family: "Fraunces", Georgia, serif; font-size: clamp(1.4rem, 2vw, 2.2rem); text-align: left; }
.petal-index button span { color: var(--antique-gold); font-family: "Grenze Gotisch", serif; }
.petal-index p { max-height: 0; overflow: hidden; margin: 0; color: var(--garnet-petal); font-style: italic; transition: max-height .55s ease, margin .55s ease; font-size: 1.25rem; }
.petal-index li.revealed p { max-height: 5rem; margin: .7rem 0 0 3rem; }
.thread-map span { position: absolute; height: 1px; width: 14rem; background: var(--garnet-petal); opacity: .55; transform: rotate(-18deg); }
.thread-map span:nth-child(1) { right: 22%; top: 30%; }
.thread-map span:nth-child(2) { right: 13%; top: 52%; transform: rotate(11deg); }
.thread-map span:nth-child(3) { right: 31%; top: 71%; transform: rotate(-4deg); }

.marble { background: radial-gradient(circle at 20% 40%, rgba(12,59,46,.65), transparent 30rem); }
.marble-slab {
  min-height: 38rem;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(128deg, transparent 0 35%, rgba(196,154,69,.5) 36%, transparent 37%),
    radial-gradient(circle at 15% 30%, #164c3c, var(--emerald-marble) 45%, #03120f);
  border: 1px solid rgba(196,154,69,.65);
  box-shadow: 0 2rem 5rem rgba(0,0,0,.45), inset 0 0 0 .6rem rgba(255,244,214,.04);
}
.marble-slab p { position: absolute; bottom: 1rem; color: var(--antique-gold); font-family: "Grenze Gotisch", serif; font-size: 1.4rem; }
.broken-arch { position: absolute; width: 60%; height: 64%; border: 1px solid rgba(239,224,188,.18); border-bottom: 0; border-radius: 50% 50% 0 0; top: 12%; }
.noon-daisy { transform: rotate(-6deg); filter: drop-shadow(0 1rem 1rem rgba(0,0,0,.35)); }
blockquote { margin: 2rem 0 0; color: var(--emerald-marble); font-size: 1.7rem; font-style: italic; border-top: 1px solid var(--antique-gold); padding-top: 1rem; }

.dusk { grid-template-columns: 1.25fr .75fr; background: radial-gradient(circle at 75% 30%, rgba(199,124,140,.32), transparent 28rem); }
.spread { min-height: 40rem; }
.vellum-strip { margin: 2rem 0; padding: 1.2rem 1.5rem; color: var(--deep-violet); background: rgba(255,244,214,.52); border: 1px solid rgba(196,154,69,.5); transform-origin: top left; transition: transform .7s ease; }
.vellum-strip.lifted { transform: rotate(-2deg) translateY(-.7rem); }
.notes-field { position: relative; min-height: 10rem; }
.notes-field span { position: absolute; color: var(--garnet-petal); font-style: italic; font-size: 1.2rem; animation: driftNote 7s ease-in-out infinite; }
.notes-field span:nth-child(1) { left: 4%; top: 20%; }
.notes-field span:nth-child(2) { right: 12%; top: 5%; animation-delay: -2s; }
.notes-field span:nth-child(3) { left: 22%; bottom: 15%; animation-delay: -4s; }
.notes-field span:nth-child(4) { right: 4%; bottom: 2%; animation-delay: -1s; }
.cameo { width: 18rem; height: 18rem; border-radius: 50%; display: grid; place-items: center; color: var(--antique-gold); font: 3rem "Grenze Gotisch", serif; border: .7rem double rgba(196,154,69,.55); background: radial-gradient(circle, var(--amethyst-shadow), var(--deep-violet)); box-shadow: inset 0 0 4rem rgba(0,0,0,.45); }

.night { grid-template-columns: 1fr 1fr; background: linear-gradient(145deg, #030918, var(--midnight-sapphire) 60%, var(--deep-violet)); color: var(--bone-highlight); }
.night h2, .night p { color: var(--bone-highlight); }
.night-flower { min-height: 36rem; display: grid; place-items: center; position: relative; }
.guilloche { position: absolute; width: 27rem; height: 27rem; border-radius: 50%; border: 1px solid rgba(196,154,69,.7); background: repeating-conic-gradient(from 12deg, transparent 0 5deg, rgba(196,154,69,.12) 6deg 8deg); animation: slowSpin 22s linear infinite; }
.final-daisy { filter: drop-shadow(0 0 2rem rgba(255,244,214,.55)); }
.final-line { color: var(--faded-rose) !important; font-family: "Grenze Gotisch", serif; font-size: 2rem !important; }

@keyframes vellumLift { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-3deg) translateY(-.4rem); } }
@keyframes crackSeal { 50% { transform: translate(-50%, -50%) scale(.92) rotate(4deg); } 100% { transform: translate(-50%, -50%) scale(1.05) rotate(-6deg); clip-path: polygon(0 0, 47% 0, 42% 44%, 55% 58%, 48% 100%, 0 100%); } }
@keyframes breatheDaisy { 0%,100% { transform: scale(1) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1.5deg); } }
@keyframes driftNote { 0%,100% { transform: translate(0,0) rotate(-1deg); opacity: .72; } 50% { transform: translate(.8rem,-.7rem) rotate(1deg); opacity: 1; } }
@keyframes slowSpin { to { transform: rotate(360deg); } }

@media (max-width: 820px) {
  .plate { grid-template-columns: 1fr; padding-right: 4rem; }
  .index, .marble, .dusk, .night { grid-template-columns: 1fr; }
  .cover-folio { min-height: 34rem; }
  .specimen-frame, .marble-slab, .night-flower { min-height: 27rem; }
}