:root {
  --abyss: #031923;
  --teal: #075E66;
  --marble: #F2EFE7;
  --laurel: #2F8A5B;
  --verdigris: #57C7B2;
  --coral: #E56F52;
  --ink: #011015;
  --display: 'Bungee Shade', Impact, fantasy;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'DM Sans', Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--abyss);
  color: var(--marble);
  font-family: var(--sans);
  overflow-x: hidden;
}

.site-shell {
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(circle at 78% 12%, rgba(87,199,178,.24), transparent 28vw),
    radial-gradient(circle at 20% 76%, rgba(7,94,102,.55), transparent 34vw),
    linear-gradient(135deg, var(--abyss), var(--ink) 58%, #042631);
}

.site-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .2;
  background-image:
    linear-gradient(118deg, transparent 0 13%, rgba(242,239,231,.18) 13.4%, transparent 14%),
    linear-gradient(62deg, transparent 0 42%, rgba(47,138,91,.18) 42.3%, transparent 43%),
    repeating-linear-gradient(104deg, rgba(242,239,231,.05) 0 1px, transparent 1px 76px);
  mix-blend-mode: screen;
}

.waterlight {
  position: fixed;
  inset: -20%;
  pointer-events: none;
  background:
    repeating-radial-gradient(ellipse at 70% 20%, rgba(87,199,178,.16) 0 2px, transparent 3px 26px),
    repeating-linear-gradient(116deg, transparent 0 28px, rgba(242,239,231,.05) 29px 31px, transparent 33px 70px);
  filter: blur(.4px);
  animation: shimmer 13s linear infinite;
}

@keyframes shimmer {
  0% { transform: translate3d(-2%, -1%, 0) rotate(0deg); }
  50% { transform: translate3d(2%, 1%, 0) rotate(1deg); }
  100% { transform: translate3d(-2%, -1%, 0) rotate(0deg); }
}

.sigil-line {
  position: fixed;
  left: 8vw;
  top: 20vh;
  width: 84vw;
  height: 58vh;
  pointer-events: none;
  z-index: 4;
  opacity: .85;
  background:
    linear-gradient(18deg, transparent 0 5%, var(--laurel) 5.2% 5.9%, transparent 6.1% 50%, var(--laurel) 50.2% 51%, transparent 51.2%),
    linear-gradient(160deg, transparent 0 44%, var(--verdigris) 44.2% 44.8%, transparent 45%);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.4s cubic-bezier(.2,.9,.1,1);
}

.sigil-line.drawn { clip-path: inset(0 0 0 0); }

.floating-seal {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  width: 5.4rem;
  height: 5.4rem;
  z-index: 8;
  display: grid;
  place-items: center;
  border: 1px solid rgba(242,239,231,.4);
  border-radius: 50%;
  color: var(--marble);
  background: radial-gradient(circle, rgba(7,94,102,.9), rgba(1,16,21,.65));
  box-shadow: 0 0 30px rgba(87,199,178,.3), inset 0 0 20px rgba(242,239,231,.12);
  transition: transform .7s ease;
}

.floating-seal span { position: absolute; font-family: var(--serif); font-size: 1.9rem; }
.seal-leaf { transform: rotate(120deg) translateY(-1.55rem); color: var(--laurel); }
.seal-wave { transform: rotate(240deg) translateY(-1.55rem); color: var(--verdigris); }

.chapter {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: clamp(1.3rem, 3vw, 3rem);
  isolation: isolate;
}

.chapter::before {
  content: attr(data-room);
  position: absolute;
  right: 5vw;
  top: 8vh;
  font-family: var(--display);
  font-size: clamp(9rem, 24vw, 22rem);
  color: rgba(242,239,231,.045);
  z-index: -1;
}

.atrium { background: linear-gradient(145deg, rgba(3,25,35,.95), rgba(1,16,21,.92)); }
.laurel { background: radial-gradient(circle at 76% 21%, rgba(47,138,91,.18), transparent 28%), linear-gradient(35deg, #04202b, var(--abyss)); }
.archive { background: radial-gradient(circle at 22% 78%, rgba(229,111,82,.13), transparent 22%), linear-gradient(155deg, var(--ink), #042a32 68%, var(--abyss)); }
.plinth { background: radial-gradient(circle at 76% 78%, rgba(87,199,178,.18), transparent 28%), linear-gradient(40deg, var(--abyss), var(--ink)); }

.upper-left, .upper-right, .lower-left, .lower-right { position: absolute; z-index: 3; }
.upper-left { left: clamp(1.4rem, 5vw, 5rem); top: clamp(1.5rem, 7vh, 5rem); }
.upper-right { right: clamp(1.4rem, 5vw, 5rem); top: clamp(1.5rem, 8vh, 5rem); }
.lower-left { left: clamp(1.4rem, 6vw, 6rem); bottom: clamp(1.7rem, 8vh, 5rem); }
.lower-right { right: clamp(1.4rem, 6vw, 6rem); bottom: clamp(1.7rem, 8vh, 5rem); }

.corner-copy { max-width: min(48rem, 58vw); }
.chapter-kicker {
  margin: 0 0 .8rem;
  color: var(--verdigris);
  font-size: .83rem;
  letter-spacing: .18em;
  font-weight: 900;
  text-transform: uppercase;
}

.wordmark {
  margin: 0;
  max-width: 68vw;
  font-family: var(--display);
  font-size: clamp(4.7rem, 13.7vw, 13.5rem);
  line-height: .76;
  color: var(--marble);
  letter-spacing: -.08em;
  transform: translateX(-.16em);
  text-shadow: 0 14px 42px rgba(1,16,21,.9), 0 0 24px rgba(87,199,178,.18);
}

.oracle-line, .chapter-title, .final-name {
  margin: clamp(1rem, 2vw, 2rem) 0 0;
  font-family: var(--serif);
  font-weight: 900;
  line-height: .95;
  color: var(--marble);
  font-size: clamp(2.2rem, 5.6vw, 6.2rem);
}

.final-name { font-size: clamp(3rem, 6vw, 7rem); color: var(--verdigris); }

.body-copy, .inscription, .oracle-statement, .artifact-caption, .coral-seal p {
  font-size: clamp(1rem, 1.45vw, 1.35rem);
  line-height: 1.5;
  color: rgba(242,239,231,.86);
}

.body-copy { max-width: 32rem; }
.reveal { max-width: 28rem; }

.underline-vine { position: relative; display: inline-block; }
.underline-vine::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.18em;
  height: .11em;
  width: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--laurel), var(--verdigris), var(--coral));
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.1s cubic-bezier(.17,.84,.2,1);
}

.underline-vine::before {
  content: "❦";
  position: absolute;
  right: -.82em;
  bottom: -.62em;
  color: var(--laurel);
  opacity: 0;
  transform: scale(.4) rotate(-20deg);
  transition: opacity .5s ease .9s, transform .5s ease .9s;
}

.is-visible .underline-vine::after, .ritualized .underline-vine::after { transform: scaleX(1); }
.is-visible .underline-vine::before, .ritualized .underline-vine::before { opacity: 1; transform: scale(1) rotate(0deg); }

.artifact { width: min(34vw, 28rem); }
.mask-artifact { display: grid; justify-items: center; gap: 1rem; }

.marble-mask, .marble-slab, .plinth-stone {
  position: relative;
  width: clamp(13rem, 26vw, 25rem);
  aspect-ratio: 3 / 4;
  background:
    linear-gradient(118deg, transparent 0 20%, rgba(1,16,21,.13) 20.3% 21%, transparent 21.3%),
    linear-gradient(64deg, transparent 0 54%, rgba(7,94,102,.18) 54.2% 55%, transparent 55.2%),
    radial-gradient(circle at 70% 18%, rgba(87,199,178,.28), transparent 18%),
    var(--marble);
  box-shadow: 0 28px 90px rgba(0,0,0,.42), inset 0 0 35px rgba(7,94,102,.16);
}

.marble-mask {
  border-radius: 48% 52% 44% 46% / 35% 36% 58% 60%;
  clip-path: polygon(18% 4%, 83% 7%, 95% 38%, 76% 93%, 50% 100%, 24% 93%, 5% 38%);
  transition: border-radius .8s ease, transform .8s ease;
}
.marble-mask.front { border-radius: 50% 50% 45% 45% / 34% 34% 58% 58%; transform: rotateY(8deg); }

.mask-brow, .mouth-line, .nose-ridge { position: absolute; background: var(--ink); opacity: .75; }
.mask-brow { left: 21%; top: 31%; width: 58%; height: 3px; transform: rotate(-3deg); }
.eye { position: absolute; top: 41%; width: 18%; height: 9%; border-radius: 50%; background: var(--teal); box-shadow: 0 0 18px var(--verdigris); }
.eye-left { left: 25%; } .eye-right { right: 25%; }
.nose-ridge { left: 49%; top: 38%; width: 3px; height: 28%; }
.mouth-line { left: 34%; bottom: 22%; width: 32%; height: 3px; }

.artifact-caption { margin: 0; max-width: 16rem; text-align: center; color: rgba(242,239,231,.65); font-size: .85rem; text-transform: uppercase; letter-spacing: .12em; }

.diagonal-botany {
  position: absolute;
  left: 15vw;
  top: 24vh;
  width: 70vw;
  height: 52vh;
  z-index: 2;
  transform: rotate(-16deg);
  border-top: 2px solid rgba(47,138,91,.78);
  pointer-events: none;
}
.diagonal-botany.reverse { transform: rotate(16deg); border-color: rgba(87,199,178,.7); }
.diagonal-botany span {
  position: absolute;
  top: -.52rem;
  width: 1.3rem;
  height: .72rem;
  border-radius: 100% 0 100% 0;
  background: var(--laurel);
  box-shadow: 0 0 18px rgba(87,199,178,.36);
}
.diagonal-botany span:nth-child(1) { left: 9%; transform: rotate(26deg); }
.diagonal-botany span:nth-child(2) { left: 27%; transform: rotate(-32deg); }
.diagonal-botany span:nth-child(3) { left: 48%; transform: rotate(20deg); }
.diagonal-botany span:nth-child(4) { left: 66%; transform: rotate(-24deg); }
.diagonal-botany span:nth-child(5) { left: 84%; transform: rotate(31deg); }

.reflection-pool {
  width: min(36rem, 42vw);
  min-height: 8rem;
  padding: 2rem;
  border: 1px solid rgba(87,199,178,.48);
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--verdigris);
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.5vw, 2.4rem);
  font-weight: 900;
  text-align: center;
  background: radial-gradient(circle at var(--rx, 50%) var(--ry, 50%), rgba(87,199,178,.4), rgba(7,94,102,.25) 24%, rgba(1,16,21,.9) 74%);
  box-shadow: inset 0 0 32px rgba(0,0,0,.7), 0 0 36px rgba(87,199,178,.18);
  text-transform: lowercase;
}

.reflection-pool span { filter: blur(.25px); transform: scaleY(.9); }

.marble-slab { border-radius: 2rem; transform: rotate(-7deg); }
.bust-profile {
  position: absolute;
  left: 26%; top: 14%;
  width: 42%; height: 58%;
  background: var(--ink);
  opacity: .82;
  border-radius: 48% 36% 46% 42%;
  clip-path: polygon(36% 0, 75% 8%, 88% 32%, 70% 45%, 80% 62%, 58% 66%, 67% 100%, 22% 100%, 26% 68%, 8% 55%, 23% 30%);
}
.laurel-wreath {
  position: absolute;
  inset: 12%;
  border: 5px double var(--laurel);
  border-left-color: transparent;
  border-radius: 50%;
  transform: rotate(25deg);
}

.persona-name {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 5vw, 5rem);
  font-weight: 900;
  color: var(--marble);
}

.rotating-disc {
  position: relative;
  width: clamp(13rem, 25vw, 24rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--marble), #d7d2c6 62%, var(--teal));
  box-shadow: inset 0 0 40px rgba(1,16,21,.22), 0 24px 80px rgba(0,0,0,.42);
  transition: transform .35s ease;
}
.disc-ring { position: absolute; inset: 9%; border: 2px dashed var(--teal); border-radius: 50%; }
.disc-symbol { position: absolute; font-family: var(--serif); font-size: clamp(2.4rem, 5vw, 5rem); color: var(--ink); }
.symbol-bust { left: 38%; top: 8%; }
.symbol-leaf { right: 12%; bottom: 24%; color: var(--laurel); }
.symbol-wave { left: 14%; bottom: 23%; color: var(--teal); }

.archive-table {
  display: grid;
  gap: .8rem;
  width: min(28rem, 40vw);
}
.archive-table div {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(87,199,178,.45);
  padding: .9rem 0;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.archive-table b { color: var(--coral); }
.archive-table span { color: rgba(242,239,231,.72); }
.coral-seal { border-left: .45rem solid var(--coral); padding-left: 1rem; }

.plinth-stone { aspect-ratio: 1.25 / 1; border-radius: 2rem 2rem .8rem .8rem; }
.half-mask {
  position: absolute;
  left: 18%; top: 16%;
  width: 42%; height: 68%;
  background: var(--ink);
  border-radius: 50% 16% 40% 48%;
  opacity: .86;
}
.sprout {
  position: absolute;
  left: 54%; top: 18%;
  width: 5px; height: 58%;
  background: var(--laurel);
  transform: rotate(-18deg);
}
.sprout::before, .sprout::after {
  content: "";
  position: absolute;
  width: 3.2rem; height: 1.4rem;
  background: var(--laurel);
  border-radius: 100% 0 100% 0;
}
.sprout::before { top: 20%; left: .2rem; transform: rotate(-14deg); }
.sprout::after { top: 46%; right: .2rem; transform: rotate(190deg); }

.final-declaration { max-width: 38rem; }
.oracle-statement { font-family: var(--serif); font-weight: 900; font-size: clamp(1.8rem, 3vw, 3.2rem); line-height: 1.05; }
.ritual-button {
  border: 1px solid var(--verdigris);
  background: linear-gradient(90deg, var(--teal), var(--laurel));
  color: var(--marble);
  font-family: var(--sans);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .16em;
  padding: 1rem 1.3rem;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(87,199,178,.22);
}
.ritual-button:hover { background: linear-gradient(90deg, var(--laurel), var(--coral)); }

@media (max-width: 820px) {
  .chapter { min-height: 118vh; }
  .upper-left, .upper-right, .lower-left, .lower-right { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin: 1.4rem 0; }
  .corner-copy, .artifact, .reflection-pool, .archive-table { max-width: none; width: 100%; }
  .wordmark { max-width: 100%; font-size: clamp(3.7rem, 17vw, 6rem); }
  .diagonal-botany { top: 47vh; left: 3vw; width: 94vw; }
  .floating-seal { width: 4rem; height: 4rem; right: 1rem; bottom: 1rem; }
}