:root {
  /* DESIGN TYPOGRAPHY TOKENS: Space Grotesk** Grotesk* Groteskk for clean navigation fragments and observational labels. Use **IBM Plex Mono only for tiny coordinates */
  --dragon-midnight: #07111F;
  --cinnabar: #D63B2A;
  --jade: #36D399;
  --brass: #B88A44;
  --moon-bone: #F2E6CF;
  --violet: #24143E;
  --display: "Bodoni Moda", "Bodoni 72", serif;
  --kr: "Noto Serif KR", serif;
  --sans: "Space Grotesk", sans-serif;
  --mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--moon-bone);
  background: var(--dragon-midnight);
  font-family: var(--sans);
  overflow-x: hidden;
}

.lacquer-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 18% 18%, rgba(36, 20, 62, .72), transparent 34%),
    radial-gradient(circle at 74% 62%, rgba(214, 59, 42, .12), transparent 28%),
    radial-gradient(circle at 45% 105%, rgba(54, 211, 153, .08), transparent 30%),
    repeating-linear-gradient(91deg, rgba(242, 230, 207, .025) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(8deg, rgba(184, 138, 68, .025) 0 1px, transparent 1px 11px);
}

.lacquer-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(242, 230, 207, .16) 1px, transparent 1.5px);
  background-size: 73px 73px;
  opacity: .28;
  mix-blend-mode: screen;
}

.cursor-glint {
  position: fixed;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 8;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(54, 211, 153, .20), rgba(54, 211, 153, .06) 30%, transparent 66%);
  opacity: .65;
  transition: opacity .3s ease;
}

.orbital-stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.orbit-svg {
  position: absolute;
  width: 118vw;
  height: 118vh;
  left: -11vw;
  top: -7vh;
  opacity: .95;
}

.brass-ring {
  fill: none;
  stroke: var(--brass);
  stroke-width: 1.2;
  stroke-dasharray: 2 12;
  opacity: .52;
  transform-origin: center;
}

.ring-one { animation: ringTurn 38s linear infinite; }
.ring-two { animation: ringTurn 52s linear infinite reverse; }
.ring-three { animation: ringTurn 47s linear infinite; opacity: .36; }

.scale-field { opacity: .55; mix-blend-mode: screen; }

.spiral-path {
  fill: none;
  stroke: var(--jade);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: .85;
}

.constellation path {
  fill: none;
  stroke: var(--moon-bone);
  stroke-width: 1;
  opacity: .22;
}

.constellation circle {
  fill: var(--jade);
  opacity: .65;
  filter: drop-shadow(0 0 8px #36D399);
}

.living-seal {
  position: absolute;
  left: 57vw;
  top: 49vh;
  width: clamp(82px, 10vw, 142px);
  height: clamp(82px, 10vw, 142px);
  display: grid;
  place-items: center;
  color: var(--moon-bone);
  background: var(--cinnabar);
  border: 2px solid rgba(242, 230, 207, .36);
  box-shadow: 0 0 0 8px rgba(214, 59, 42, .07), 0 26px 70px rgba(214, 59, 42, .24);
  transform: translate(-50%, -50%) rotate(var(--seal-rot, -7deg)) scale(var(--seal-scale, 1));
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), filter .45s ease, left .45s ease, top .45s ease;
  font-family: var(--kr);
  font-size: clamp(2rem, 5vw, 5rem);
  font-weight: 700;
  letter-spacing: -.08em;
  isolation: isolate;
}

.living-seal::before,
.living-seal::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(242, 230, 207, .45);
}

.living-seal::after {
  inset: -9px;
  border-color: rgba(184, 138, 68, .35);
  transform: rotate(5deg);
}

.seal-crack {
  position: absolute;
  width: 128%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--jade), transparent);
  transform: rotate(47deg) scaleX(var(--crack, .08));
  box-shadow: 0 0 18px #36D399;
  opacity: .78;
}

.orbit-fragments span {
  position: absolute;
  left: 50%;
  top: 50%;
  color: var(--moon-bone);
  font-family: var(--mono);
  font-size: clamp(.62rem, 1vw, .9rem);
  letter-spacing: .24em;
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(54, 211, 153, .55);
  opacity: .78;
  transform: translate(-50%, -50%);
}

.radial-dial {
  position: fixed;
  right: 3.2vw;
  top: 50%;
  width: 132px;
  height: 132px;
  z-index: 10;
  transform: translateY(-50%);
  border: 1px solid rgba(184, 138, 68, .45);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(7, 17, 31, .76), rgba(36, 20, 62, .32));
}

.radial-dial::before {
  content: "YZ";
  position: absolute;
  inset: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(214, 59, 42, .55);
  color: var(--cinnabar);
  font-family: var(--display);
}

.radial-dial button {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px;
  border: 0;
  border-radius: 50%;
  background: var(--brass);
  color: var(--dragon-midnight);
  font-family: var(--mono);
  font-size: .55rem;
  cursor: pointer;
  transform: rotate(var(--angle)) translate(62px) rotate(calc(var(--angle) * -1));
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}

.radial-dial button.is-active { background: var(--jade); box-shadow: 0 0 18px rgba(54, 211, 153, .9); }
.radial-dial button:nth-child(1) { --angle: -90deg; }
.radial-dial button:nth-child(2) { --angle: -30deg; }
.radial-dial button:nth-child(3) { --angle: 30deg; }
.radial-dial button:nth-child(4) { --angle: 90deg; }
.radial-dial button:nth-child(5) { --angle: 150deg; }
.radial-dial button:nth-child(6) { --angle: 210deg; }

.bestiary { position: relative; z-index: 2; }

.chamber {
  min-height: 100vh;
  position: relative;
  padding: clamp(30px, 6vw, 86px);
  display: grid;
  align-items: center;
}

.coordinate {
  position: absolute;
  top: 8vh;
  left: 8vw;
  color: var(--brass);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
}

h1, h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  line-height: .83;
  letter-spacing: -.055em;
}

h1 { font-size: clamp(5rem, 16vw, 15rem); }
h2 { font-size: clamp(4rem, 11vw, 10.5rem); }

p { font-size: clamp(1rem, 1.45vw, 1.35rem); line-height: 1.6; }

.title-cluster {
  width: min(84vw, 1100px);
  margin-left: 7vw;
  margin-top: 8vh;
}

.title-cluster p,
.signature-finale p {
  max-width: 520px;
  color: rgba(242, 230, 207, .78);
  font-family: var(--kr);
}

.vertical-note {
  position: absolute;
  left: 4vw;
  top: 28vh;
  writing-mode: vertical-rl;
  color: var(--jade);
  font-family: var(--kr);
  letter-spacing: .32em;
}

.stamp-plate,
.caliper-mark,
.red-orbit-panel,
.field-notes {
  border: 1px solid rgba(184, 138, 68, .55);
  background: linear-gradient(135deg, rgba(242, 230, 207, .10), rgba(7, 17, 31, .42));
  box-shadow: inset 0 0 28px rgba(184, 138, 68, .08);
}

.stamp-plate {
  position: absolute;
  right: 14vw;
  bottom: 13vh;
  width: 260px;
  padding: 18px;
  color: var(--brass);
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  transform: rotate(-8deg);
}

.tangent-slip {
  width: min(700px, 76vw);
  margin-left: 42vw;
  transform: rotate(4deg);
}

.tangent-slip p,
.red-orbit-panel p,
.observatory-copy p,
.field-notes p { max-width: 560px; color: rgba(242, 230, 207, .78); font-family: var(--kr); }

.caliper-mark {
  position: absolute;
  left: 9vw;
  bottom: 17vh;
  width: 390px;
  padding: 16px 22px;
  color: var(--brass);
  font-family: var(--mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.red-orbit-panel {
  width: min(790px, 82vw);
  margin-left: 10vw;
  padding: clamp(24px, 4vw, 54px);
  border-color: rgba(214, 59, 42, .65);
  transform: rotate(-3deg);
}

.wax-smear {
  position: absolute;
  right: 10vw;
  top: 22vh;
  width: 210px;
  height: 72px;
  background: radial-gradient(ellipse, rgba(214, 59, 42, .74), rgba(214, 59, 42, .10) 64%, transparent 70%);
  transform: rotate(18deg);
  filter: blur(.4px);
}

.observatory-copy {
  width: min(760px, 80vw);
  margin-left: 33vw;
  margin-top: -8vh;
}

.eclipse-disc {
  position: absolute;
  left: 13vw;
  bottom: 14vh;
  width: clamp(150px, 22vw, 280px);
  height: clamp(150px, 22vw, 280px);
  border-radius: 50%;
  border: 1px solid rgba(184, 138, 68, .5);
  background: radial-gradient(circle at 62% 42%, var(--violet) 0 20%, transparent 21%), radial-gradient(circle, rgba(54, 211, 153, .10), transparent 62%);
}

.eclipse-disc span {
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  background: var(--dragon-midnight);
  box-shadow: 0 0 0 1px rgba(242, 230, 207, .18), 0 0 44px rgba(54, 211, 153, .16);
}

.field-notes {
  width: min(560px, 78vw);
  margin-left: 16vw;
  padding: 30px;
  transform: rotate(2.5deg);
}

.field-notes h2 { font-size: clamp(3.2rem, 8vw, 7.5rem); }
.field-notes ul { margin: 24px 0 0; padding: 0; list-style: none; color: var(--jade); font-family: var(--mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.field-notes li { margin: 10px 0; }

.signature-finale {
  text-align: left;
  margin-left: 8vw;
  transform: translateY(-2vh);
}

.signature-finale h2 {
  font-size: clamp(4.5rem, 15vw, 15rem);
  color: var(--moon-bone);
  text-shadow: 0 0 24px rgba(214, 59, 42, .22);
}

.final-note {
  color: var(--brass);
  font-family: var(--mono);
  letter-spacing: .24em;
  text-transform: uppercase;
}

.chamber::after {
  content: attr(data-title);
  position: absolute;
  right: 5vw;
  bottom: 9vh;
  color: rgba(184, 138, 68, .35);
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

.chamber-two { background: radial-gradient(circle at 78% 26%, rgba(54, 211, 153, .08), transparent 28%); }
.chamber-three { background: radial-gradient(circle at 24% 50%, rgba(214, 59, 42, .12), transparent 30%); }
.chamber-four { background: radial-gradient(circle at 68% 58%, rgba(36, 20, 62, .42), transparent 38%); }
.chamber-five { background: radial-gradient(circle at 20% 45%, rgba(242, 230, 207, .055), transparent 26%); }
.chamber-six { background: radial-gradient(circle at 54% 50%, rgba(214, 59, 42, .15), transparent 26%), radial-gradient(circle at 54% 50%, rgba(54, 211, 153, .10), transparent 46%); }

@keyframes ringTurn {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}

@media (max-width: 760px) {
  .radial-dial { right: 18px; width: 96px; height: 96px; }
  .radial-dial button { transform: rotate(var(--angle)) translate(46px) rotate(calc(var(--angle) * -1)); }
  .radial-dial::before { inset: 31px; }
  .tangent-slip, .observatory-copy, .field-notes, .signature-finale, .title-cluster { margin-left: 0; }
  .caliper-mark { width: 74vw; left: 8vw; }
  .living-seal { left: 66vw; }
}