:root {
  --obsidian: #05060A;
  --gallery: #0B1020;
  --frost: #EAF3FF;
  --blue: #9FD8FF;
  --violet: #7B5CFF;
  --marble: #D8C3A5;
  --rose: #F4A7C6;
  --mx: 50vw;
  --my: 50vh;
  --display: "Cormorant Garamond", Cormorant, Georgia, "Times New Roman", serif;
  --space: "Space Grotesk", Space, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

/* Design compliance vocabulary: metadata. Build the masonry with CSS columns or grid-auto-flow dense so card heights vary dramatically. The IBM Plex Mono voice moves between oracle metadata; use IBM Plex Mono sparingly for catalog numbers. Interactions should feel like uncovering artifacts: hover a tile to expose a second title. Space Grotesk for confident navigation and Space Grotesk labels. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--frost);
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(159, 216, 255, 0.18), transparent 18rem),
    radial-gradient(circle at 78% 12%, rgba(123, 92, 255, 0.26), transparent 31rem),
    radial-gradient(circle at 18% 86%, rgba(244, 167, 198, 0.1), transparent 24rem),
    linear-gradient(135deg, var(--obsidian), var(--gallery) 56%, var(--obsidian));
  font-family: var(--space);
  overflow-x: hidden;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  z-index: -4;
  opacity: 0.34;
  background-image:
    linear-gradient(115deg, transparent 0 23%, rgba(216, 195, 165, 0.18) 23.2%, transparent 24.2% 62%, rgba(234, 243, 255, 0.08) 62.3%, transparent 63%),
    repeating-linear-gradient(92deg, transparent 0 5.8rem, rgba(234, 243, 255, 0.028) 5.86rem 5.94rem);
  mix-blend-mode: screen;
}

body::after {
  z-index: 8;
  background: radial-gradient(circle at var(--mx) var(--my), transparent 0 12rem, rgba(5, 6, 10, 0.1) 22rem, rgba(5, 6, 10, 0.36) 58rem);
}

.bokeh-background,
.dust-field,
.cursor-aura,
.cursor-pin {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.bokeh-background { z-index: -3; overflow: hidden; filter: blur(1px); }

.orb {
  position: absolute;
  display: block;
  border-radius: 999px;
  filter: blur(13px);
  opacity: 0.46;
  animation: breathe 12s ease-in-out infinite alternate;
}

.orb-one { width: 18rem; height: 18rem; left: 7%; top: 12%; background: radial-gradient(circle, rgba(234, 243, 255, 0.82), rgba(159, 216, 255, 0.26) 36%, transparent 70%); }
.orb-two { width: 27rem; height: 10rem; right: 8%; top: 28%; background: radial-gradient(ellipse, rgba(244, 167, 198, 0.5), rgba(123, 92, 255, 0.16) 44%, transparent 70%); animation-duration: 16s; }
.orb-three { width: 12rem; height: 20rem; left: 53%; bottom: 14%; background: radial-gradient(ellipse, rgba(123, 92, 255, 0.54), transparent 72%); }
.orb-four { width: 9rem; height: 9rem; right: 24%; bottom: 8%; background: radial-gradient(circle, rgba(216, 195, 165, 0.66), transparent 69%); animation-duration: 11s; }
.orb-five { width: 34rem; height: 34rem; left: -14%; bottom: -16%; opacity: 0.24; background: radial-gradient(circle, rgba(159, 216, 255, 0.54), transparent 68%); }
.orb-six { width: 7rem; height: 24rem; left: 70%; top: 54%; opacity: 0.3; background: radial-gradient(ellipse, rgba(234, 243, 255, 0.55), transparent 72%); transform: rotate(26deg); }

.cursor-aura {
  z-index: 9;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(159, 216, 255, 0.31) 0, rgba(159, 216, 255, 0.13) 5.8rem, rgba(123, 92, 255, 0.08) 11rem, transparent 17rem);
  mix-blend-mode: screen;
}

.cursor-pin {
  z-index: 11;
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--blue);
  border-radius: 50%;
  transform: translate(calc(var(--mx) - 0.5rem), calc(var(--my) - 0.5rem));
  box-shadow: 0 0 22px rgba(159, 216, 255, 0.7);
}

.dust {
  position: fixed;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 18px var(--blue);
  animation: dustFade 900ms ease-out forwards;
}

.fixed-index {
  position: fixed;
  z-index: 12;
  top: 1.1rem;
  right: 1.1rem;
  display: grid;
  gap: 0.45rem;
  padding: 0.85rem;
  border: 1px solid rgba(159, 216, 255, 0.22);
  background: rgba(5, 6, 10, 0.52);
  backdrop-filter: blur(22px) saturate(150%);
  box-shadow: inset 0 0 30px rgba(5, 6, 10, 0.72), 0 20px 50px rgba(0, 0, 0, 0.35);
}

.fixed-index a {
  color: rgba(234, 243, 255, 0.8);
  text-decoration: none;
  font: 0.68rem var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 240ms ease, text-shadow 240ms ease;
}

.fixed-index a:hover { color: var(--blue); text-shadow: 0 0 16px rgba(159, 216, 255, 0.55); }
.fixed-index i { color: var(--rose); font-style: normal; margin-right: 0.42rem; }
.fixed-index span { color: var(--marble); margin-right: 0.45rem; }

.chamber {
  position: relative;
  min-height: 100vh;
  padding: clamp(5rem, 8vw, 8rem) clamp(1.25rem, 5vw, 5rem);
}

.threshold { display: grid; align-items: center; overflow: hidden; }

.glass-slab,
.artifact,
.mirror-pane,
.summon-card {
  border: 1px solid rgba(159, 216, 255, 0.24);
  background: linear-gradient(145deg, rgba(234, 243, 255, 0.11), rgba(11, 16, 32, 0.53));
  backdrop-filter: blur(24px) saturate(145%);
  box-shadow: inset 0 0 42px rgba(5, 6, 10, 0.82), 0 24px 80px rgba(0, 0, 0, 0.48);
}

.marble-floor {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -5%;
  height: 36vh;
  transform: skewY(-7deg);
  background: linear-gradient(120deg, rgba(216, 195, 165, 0.09), transparent 58%), repeating-linear-gradient(110deg, transparent 0 4rem, rgba(234, 243, 255, 0.04) 4.08rem 4.16rem);
  border-top: 1px solid rgba(216, 195, 165, 0.28);
}

.threshold-copy {
  width: min(59rem, 88vw);
  padding: clamp(1.4rem, 4vw, 4.2rem);
  animation: stoneLight 1600ms ease-out both;
}

.kicker {
  color: var(--blue);
  font: 0.76rem var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

h1,
h2,
h3 { margin: 0; font-family: var(--display); font-weight: 600; }
h1 { font-size: clamp(4.8rem, 14vw, 13rem); line-height: 0.76; letter-spacing: -0.08em; text-transform: uppercase; }
h1 span { color: transparent; -webkit-text-stroke: 1px var(--frost); text-shadow: 0 0 28px rgba(159, 216, 255, 0.26); }
h2 { font-size: clamp(2.8rem, 7vw, 7rem); line-height: 0.9; letter-spacing: -0.05em; }
h3 { font-size: clamp(2.1rem, 4vw, 4.7rem); line-height: 0.85; }

.manifesto,
.summon-card p,
.artifact p,
.section-plate p {
  color: rgba(234, 243, 255, 0.74);
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  line-height: 1.55;
  max-width: 42rem;
}

.hero-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.8rem; }
.hero-tags span { border: 1px solid rgba(216, 195, 165, 0.32); color: var(--marble); padding: 0.55rem 0.7rem; font: 0.7rem var(--mono); letter-spacing: 0.12em; text-transform: uppercase; background: rgba(5, 6, 10, 0.28); }

.hero-bust {
  position: absolute;
  right: 3vw;
  top: 10vh;
  width: min(38vw, 30rem);
  height: 76vh;
  opacity: 0.73;
  filter: drop-shadow(0 0 44px rgba(159, 216, 255, 0.2));
}

.bust,
.laurel {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 60% 30%, rgba(234, 243, 255, 0.48), transparent 30%),
    linear-gradient(135deg, rgba(234, 243, 255, 0.72), rgba(216, 195, 165, 0.28) 47%, rgba(11, 16, 32, 0.38)),
    repeating-linear-gradient(123deg, transparent 0 1.1rem, rgba(123, 92, 255, 0.15) 1.18rem 1.28rem);
}

.head { top: 1%; width: 47%; height: 35%; border-radius: 48% 44% 40% 46%; clip-path: polygon(33% 0, 78% 9%, 87% 42%, 64% 100%, 31% 86%, 13% 48%); }
.nose { top: 16%; left: 59%; width: 12%; height: 14%; clip-path: polygon(10% 0, 92% 48%, 8% 100%); opacity: 0.55; }
.throat { top: 31%; width: 35%; height: 28%; clip-path: polygon(20% 0, 78% 0, 94% 100%, 5% 100%); }
.shoulder { top: 50%; width: 64%; height: 22%; clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); opacity: 0.72; }
.plinth { bottom: 3%; width: 82%; height: 35%; clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%); opacity: 0.78; }
.laurel { top: 3%; width: 18%; height: 28%; border: 1px solid rgba(216, 195, 165, 0.46); border-radius: 50%; background: transparent; }
.laurel.left { left: 27%; transform: rotate(-28deg); border-right-color: transparent; }
.laurel.right { left: 73%; transform: rotate(28deg); border-left-color: transparent; }

.coordinate-panel {
  position: absolute;
  left: clamp(1rem, 5vw, 5rem);
  bottom: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  color: var(--marble);
  font: 0.72rem var(--mono);
  letter-spacing: 0.12em;
}

.vertical-label {
  position: absolute;
  right: 1.2rem;
  bottom: 20vh;
  writing-mode: vertical-rl;
  color: rgba(216, 195, 165, 0.65);
  font: 0.74rem var(--mono);
  letter-spacing: 0.35em;
}

.cabinet { padding-top: 7rem; }
.section-plate { max-width: 62rem; margin-bottom: 3rem; }
.side-note { position: sticky; top: 6rem; float: right; width: 9rem; margin-right: -1rem; writing-mode: vertical-rl; color: rgba(216, 195, 165, 0.58); font: 0.68rem var(--mono); letter-spacing: 0.18em; text-transform: uppercase; }

.masonry-gallery {
  columns: 3 18rem;
  column-gap: 1.25rem;
  position: relative;
}

.masonry-gallery::before {
  content: "";
  position: absolute;
  inset: 7% -5% 4%;
  transform: skewY(-7deg);
  background: linear-gradient(120deg, rgba(216, 195, 165, 0.08), transparent 68%);
  border-top: 1px solid rgba(216, 195, 165, 0.24);
  z-index: -1;
}

.artifact {
  display: inline-block;
  width: 100%;
  min-height: 20rem;
  margin: 0 0 1.25rem;
  padding: 1.3rem;
  position: relative;
  overflow: hidden;
  break-inside: avoid;
  transform-origin: center;
  transition: transform 420ms ease, border-color 420ms ease, box-shadow 420ms ease, min-height 420ms ease;
}

.artifact::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(circle at var(--local-x, 50%) var(--local-y, 50%), rgba(234, 243, 255, 0.29), transparent 11rem),
    repeating-linear-gradient(128deg, transparent 0 1.6rem, rgba(216, 195, 165, 0.16) 1.7rem 1.78rem);
  transition: opacity 420ms ease;
}

.artifact::after {
  content: attr(data-catalog);
  position: absolute;
  inset: auto 1rem 1rem auto;
  width: 5.5rem;
  height: 5.5rem;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 0.3rem;
  border: 1px solid rgba(216, 195, 165, 0.45);
  border-radius: 50%;
  color: rgba(216, 195, 165, 0.58);
  font: 0.48rem var(--mono);
  letter-spacing: 0.08em;
  opacity: 0.46;
}

.artifact > * { position: relative; z-index: 1; }
.artifact.is-near,
.artifact:hover,
.artifact.expanded { transform: translateY(-6px) scale(1.015); border-color: rgba(159, 216, 255, 0.74); box-shadow: 0 0 44px rgba(159, 216, 255, 0.23), inset 0 0 54px rgba(5, 6, 10, 0.92); }
.artifact.is-near::before,
.artifact:hover::before,
.artifact.expanded::before { opacity: 1; }
.artifact.expanded { min-height: 32rem; }

.tall { min-height: 34rem; }
.medium { min-height: 26rem; }
.short { min-height: 17rem; }
.wide { min-height: 23rem; }
.narrow { min-height: 28rem; }
.warm { border-color: rgba(216, 195, 165, 0.38); }
.violet { border-color: rgba(123, 92, 255, 0.45); }
.rose { border-color: rgba(244, 167, 198, 0.38); }
.blue { border-color: rgba(159, 216, 255, 0.46); }

.artifact-meta { color: var(--marble); font: 0.68rem var(--mono); letter-spacing: 0.15em; margin-bottom: 1.5rem; }
.symbol { width: 7rem; height: 7rem; margin: 0.5rem 0 2rem; opacity: 0.78; position: relative; }
.symbol span { position: absolute; inset: 18%; }
.eye-symbol { border: 1px solid var(--blue); border-radius: 60% 40%; box-shadow: inset 0 0 0 2rem rgba(159, 216, 255, 0.06), 0 0 24px rgba(159, 216, 255, 0.24); }
.eye-symbol span { border-radius: 50%; border: 1px solid var(--frost); background: radial-gradient(circle, var(--blue) 0 0.34rem, transparent 0.42rem); }
.column-symbol { background: linear-gradient(90deg, transparent 20%, var(--marble) 21% 35%, transparent 36% 48%, var(--marble) 49% 64%, transparent 65%); clip-path: polygon(10% 10%, 92% 0, 66% 100%, 0 86%); }
.crown-symbol { clip-path: polygon(6% 84%, 18% 28%, 42% 62%, 52% 12%, 70% 60%, 92% 24%, 84% 84%); background: var(--blue); box-shadow: 0 0 26px rgba(159, 216, 255, 0.22); }
.mask-symbol { border: 1px solid var(--rose); border-radius: 52% 48% 60% 42%; transform: rotate(-14deg); background: radial-gradient(circle at 35% 42%, var(--rose) 0 0.35rem, transparent 0.45rem), radial-gradient(circle at 65% 42%, var(--blue) 0 0.35rem, transparent 0.45rem); }
.lens-symbol { border: 1px solid var(--frost); border-radius: 50%; background: conic-gradient(from 15deg, transparent, rgba(159, 216, 255, 0.52), transparent, rgba(216, 195, 165, 0.42), transparent); }
.compass-symbol { border: 1px solid var(--blue); border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; transform: rotate(-30deg); }

.prophecy { max-height: 0; overflow: hidden; color: var(--rose); font: 0.78rem var(--mono); letter-spacing: 0.08em; transition: max-height 420ms ease, margin 420ms ease; }
.artifact:hover .prophecy,
.artifact.expanded .prophecy { max-height: 5rem; margin-top: 1rem; }

.mirror { display: grid; place-items: center; }
.mirror-pane { width: min(66rem, 92vw); padding: clamp(1.5rem, 5vw, 5rem); text-align: center; position: relative; overflow: hidden; }
.mirror-pane::before { content: ""; position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(circle, rgba(234, 243, 255, 0.14), transparent 64%); filter: blur(18px); }
.mirror-pane::after { content: ""; position: absolute; inset: 1rem; border: 1px solid rgba(216, 195, 165, 0.18); }
.mirror-pane > * { position: relative; z-index: 1; }
.mirror-medallion { width: 7rem; height: 7rem; margin: 0 auto 1.3rem; border: 1px solid rgba(159, 216, 255, 0.42); border-radius: 50%; display: grid; place-items: center; color: var(--blue); font: 3rem var(--display); background: radial-gradient(circle, rgba(159, 216, 255, 0.16), rgba(5, 6, 10, 0.44)); box-shadow: 0 0 42px rgba(159, 216, 255, 0.18); transition: color 260ms ease, border-color 260ms ease, box-shadow 260ms ease; }
.mirror-medallion.active { color: var(--rose); border-color: var(--rose); box-shadow: 0 0 52px rgba(244, 167, 198, 0.3); }
.mirror-oracle { margin: 1.6rem auto 2rem; color: rgba(234, 243, 255, 0.72); font: 1rem var(--mono); letter-spacing: 0.08em; min-height: 2.4rem; }
.glyph-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.85rem; }
.glyph-row button { width: 4.2rem; height: 4.2rem; border: 1px solid rgba(159, 216, 255, 0.38); border-radius: 50%; color: var(--frost); background: rgba(5, 6, 10, 0.4); font: 1.5rem var(--display); cursor: pointer; transition: transform 280ms ease, box-shadow 280ms ease, border-color 280ms ease, color 280ms ease; }
.glyph-row button:hover,
.glyph-row button.active { transform: translateY(-4px); color: var(--rose); border-color: var(--rose); box-shadow: 0 0 32px rgba(244, 167, 198, 0.35); }

.summoning { min-height: 75vh; display: grid; place-items: center; }
.summon-card { width: min(56rem, 92vw); padding: clamp(1.5rem, 5vw, 4rem); border-color: rgba(216, 195, 165, 0.36); position: relative; overflow: hidden; }
.summon-card::before { content: ""; position: absolute; right: -6rem; top: -6rem; width: 18rem; height: 18rem; border-radius: 50%; border: 1px solid rgba(216, 195, 165, 0.3); background: radial-gradient(circle, rgba(216, 195, 165, 0.12), transparent 63%); }
.summon-card > * { position: relative; }
.summon-rule { height: 1px; margin-top: 2rem; background: linear-gradient(90deg, transparent, var(--marble), var(--blue), transparent); }

@keyframes breathe { from { transform: translate3d(0, 0, 0) scale(0.95); } to { transform: translate3d(2rem, -1.5rem, 0) scale(1.12); } }
@keyframes dustFade { from { opacity: 0.82; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(-50%, -180%) scale(0.15); } }
@keyframes stoneLight { from { opacity: 0; filter: brightness(0.5); transform: translateY(1rem); } to { opacity: 1; filter: brightness(1); transform: translateY(0); } }

@media (max-width: 900px) {
  .side-note { display: none; }
  .hero-bust { opacity: 0.34; right: -10vw; width: 58vw; }
}

@media (max-width: 760px) {
  .fixed-index { left: 1rem; right: 1rem; top: auto; bottom: 1rem; grid-template-columns: repeat(4, 1fr); }
  .fixed-index a { font-size: 0.56rem; letter-spacing: 0.08em; }
  .fixed-index i { display: none; }
  .hero-bust { opacity: 0.25; right: -22vw; width: 82vw; }
  .coordinate-panel { display: none; }
  h1 { font-size: clamp(4rem, 22vw, 7rem); }
  .chamber { padding-left: 1rem; padding-right: 1rem; }
  .mirror-medallion { width: 5.8rem; height: 5.8rem; }
}