:root {
  /* Compliance anchors from DESIGN.md typography prose: Mono** Inter** Grotesk** CTA-heavy hero */
  --abyss: #071014;
  --kelp: #12343B;
  --mist: #B7D8D6;
  --pearl: #E8E1D2;
  --jade: #6BE7C8;
  --violet: #8C7CFF;
  --saddle: #5A3D2E;
  --champagne: #C7A96B;
  --mx: 50%;
  --my: 50%;
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--abyss);
  color: var(--pearl);
}

body {
  margin: 0;
  min-height: 210vh;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--pearl);
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(107, 231, 200, 0.08), transparent 24rem),
    radial-gradient(circle at 78% 16%, rgba(140, 124, 255, 0.12), transparent 26rem),
    linear-gradient(145deg, #071014 0%, #0a1b20 46%, #12343B 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -4;
  background:
    radial-gradient(circle at 20% 30%, rgba(90, 61, 46, 0.22) 0 1px, transparent 2px),
    radial-gradient(circle at 76% 74%, rgba(232, 225, 210, 0.08) 0 1px, transparent 2px),
    repeating-linear-gradient(98deg, rgba(232, 225, 210, 0.025) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(8deg, rgba(90, 61, 46, 0.05) 0 2px, transparent 2px 15px);
  background-size: 34px 34px, 55px 55px, 100% 100%, 100% 100%;
  opacity: 0.8;
  mix-blend-mode: screen;
}

.ambient { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }

.aurora {
  position: absolute;
  left: -15vw;
  right: -15vw;
  height: 24vh;
  top: -4vh;
  opacity: 0.4;
  filter: blur(24px);
  background: linear-gradient(135deg, #071014 0%, #12343B 48%, #6BE7C8 74%, #8C7CFF 100%);
  clip-path: polygon(0 35%, 15% 48%, 31% 24%, 47% 42%, 62% 12%, 77% 31%, 100% 18%, 100% 62%, 0 72%);
  animation: auroraDrift 18s ease-in-out infinite alternate;
}

.aurora-two {
  top: 5vh;
  opacity: 0.18;
  transform: scaleY(-1) translateX(8vw);
  animation-duration: 25s;
}

.meridian {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(183, 216, 214, 0.46), rgba(199, 169, 107, 0.26), transparent);
  box-shadow: 0 0 24px rgba(107, 231, 200, 0.16);
}

.salt-field {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(232, 225, 210, 0.22) 0 1px, transparent 1.7px);
  background-size: 86px 86px;
  opacity: 0.08;
}

.bearing {
  position: fixed;
  top: 24px;
  right: 28px;
  z-index: 20;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(183, 216, 214, 0.28);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  color: var(--mist);
  background: rgba(7, 16, 20, 0.52);
  box-shadow: inset 0 0 28px rgba(107, 231, 200, 0.08), 0 12px 34px rgba(0, 0, 0, 0.28);
  transition: transform 900ms cubic-bezier(.2,.8,.2,1);
}

.bearing span { position: absolute; }
.bearing span:nth-child(1) { top: 6px; color: var(--champagne); }
.bearing span:nth-child(2) { font-size: 16px; color: var(--jade); }
.bearing span:nth-child(3) { bottom: 6px; }

.observatory { width: min(1440px, 100%); margin: 0 auto; padding: 0 clamp(18px, 4vw, 56px); }

.threshold {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 11vh;
  gap: 18px;
}

.eyebrow, .micro {
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(183, 216, 214, 0.72);
}

h1, h2, h3 {
  margin: 0;
  font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
  letter-spacing: -0.045em;
  line-height: 0.92;
}

h1 {
  font-size: clamp(56px, 11vw, 168px);
  max-width: 11ch;
  color: var(--pearl);
  text-shadow: 0 0 42px rgba(183, 216, 214, 0.08);
}

h2 { font-size: clamp(34px, 5vw, 86px); }
h3 { font-size: clamp(22px, 2.8vw, 42px); color: var(--pearl); }

p { font-size: 16px; line-height: 1.55; color: rgba(232, 225, 210, 0.76); }

.threshold-copy { max-width: 360px; margin: 0; color: rgba(183, 216, 214, 0.78); }

.disclose {
  width: max-content;
  margin-top: 18px;
  padding: 13px 18px 14px;
  border: 1px solid rgba(199, 169, 107, 0.42);
  border-radius: 999px;
  color: var(--pearl);
  background: linear-gradient(180deg, rgba(18, 52, 59, 0.72), rgba(7, 16, 20, 0.68));
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(232, 225, 210, 0.06), 0 20px 50px rgba(0,0,0,0.28);
  transition: border-color 400ms ease, transform 400ms ease, box-shadow 400ms ease;
}

.disclose:hover { border-color: var(--violet); transform: translateY(-2px); box-shadow: 0 0 34px rgba(140,124,255,0.16); }

.cabinet {
  min-height: 100vh;
  padding: 9vh 0 16vh;
  display: grid;
  grid-template-columns: 1.18fr 0.82fr 1fr 0.92fr;
  grid-auto-rows: minmax(168px, 24vh);
  gap: clamp(12px, 1.4vw, 22px);
  perspective: 1600px;
}

.tile {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(183, 216, 214, 0.16);
  border-radius: clamp(22px, 2.4vw, 38px);
  padding: clamp(22px, 3vw, 42px);
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(232, 225, 210, 0.08), transparent 20rem),
    repeating-linear-gradient(92deg, rgba(90, 61, 46, 0.14) 0 2px, rgba(7, 16, 20, 0) 2px 11px),
    linear-gradient(145deg, rgba(18, 52, 59, 0.92), rgba(7, 16, 20, 0.94) 56%, rgba(90, 61, 46, 0.32));
  box-shadow: inset 0 1px 0 rgba(232, 225, 210, 0.08), inset 0 -18px 60px rgba(0, 0, 0, 0.34), 0 30px 90px rgba(0, 0, 0, 0.34);
  transform: translateY(70px) scale(0.96) rotateX(3deg);
  opacity: 0;
  transition: opacity 900ms ease, transform 1100ms cubic-bezier(.16,.86,.18,1), border-color 700ms ease;
}

.cabinet.open .tile, .tile.revealed { opacity: 1; transform: translateY(0) scale(1) rotateX(0); }
.tile.revealed { border-color: rgba(107, 231, 200, 0.32); }
.tile:nth-child(2) { transition-delay: 100ms; }
.tile:nth-child(3) { transition-delay: 190ms; }
.tile:nth-child(4) { transition-delay: 280ms; }
.tile:nth-child(5) { transition-delay: 350ms; }
.tile:nth-child(6) { transition-delay: 430ms; }

.tile::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: inherit;
  border: 1px solid rgba(199, 169, 107, 0.09);
  pointer-events: none;
}

.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(183,216,214,0.12), transparent 48%);
  transform: translateX(-130%);
  transition: transform 1300ms ease;
  pointer-events: none;
}

.tile.revealed::after, .cabinet.open .tile:hover::after { transform: translateX(130%); }

.tile-sheen {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(107, 231, 200, 0.11), transparent 16rem);
  mix-blend-mode: screen;
  opacity: 0.8;
  pointer-events: none;
}

.tile-horizon { grid-column: 1 / 4; display: flex; flex-direction: column; justify-content: space-between; }
.tile-monolith { grid-column: 4; grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: space-between; background-color: var(--kelp); }
.tile-void { grid-column: 1 / 3; grid-row: 2 / 4; display: grid; align-content: space-between; min-height: 520px; }
.tile-wide { grid-column: 3 / 5; grid-row: 3; display: flex; flex-direction: column; justify-content: space-between; }
.tile-specimen { display: flex; flex-direction: column; justify-content: space-between; min-height: 260px; }

.tile p:not(.micro) { max-width: 450px; margin: 18px 0 0; }
.tile-monolith p:not(.micro) { max-width: 230px; }

.field-line {
  position: absolute;
  width: 58%;
  height: 110%;
  right: 5%;
  top: -12%;
  border: 1px solid rgba(107, 231, 200, 0.24);
  border-left-color: transparent;
  border-radius: 50%;
  transform: rotate(-12deg);
}

.line-b { width: 38%; height: 72%; right: 12%; top: 8%; border-color: rgba(140,124,255,0.18); border-bottom-color: transparent; }

.stitched-edge {
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(199,169,107,0.62) 0 4px, transparent 4px 13px);
  box-shadow: 0 0 18px rgba(199,169,107,0.12);
}

.monopole-void {
  position: relative;
  width: min(340px, 72vw);
  aspect-ratio: 1;
  justify-self: center;
  align-self: center;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 0 12%, rgba(7,16,20,0.92) 13% 18%, rgba(107,231,200,0.06) 19%, transparent 48%);
  filter: drop-shadow(0 0 28px rgba(107,231,200,0.12));
}

.monopole-void span {
  position: absolute;
  inset: calc(var(--i, 0) * 22px);
  border: 1px solid rgba(183, 216, 214, 0.22);
  border-left-color: transparent;
  border-radius: 50%;
  animation: ringWarp 9s ease-in-out infinite alternate;
}
.monopole-void span:nth-child(1) { --i: 0; border-top-color: var(--jade); }
.monopole-void span:nth-child(2) { --i: 1; animation-delay: -2s; transform: rotate(22deg); }
.monopole-void span:nth-child(3) { --i: 2; animation-delay: -4s; border-right-color: var(--violet); }
.monopole-void span:nth-child(4) { --i: 3; animation-delay: -6s; border-bottom-color: var(--champagne); }

.relic-bloom {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle, #6BE7C8 0 3px, transparent 4px), conic-gradient(from 20deg, transparent, rgba(107,231,200,0.65), transparent, rgba(140,124,255,0.4), transparent);
  mask: radial-gradient(circle, transparent 0 32%, #000 33% 36%, transparent 37% 50%, #000 51% 54%, transparent 55%);
  animation: slowSpin 18s linear infinite;
}

.glass-chip {
  width: 110px;
  height: 88px;
  background: linear-gradient(135deg, rgba(232,225,210,0.84), rgba(183,216,214,0.32), rgba(140,124,255,0.18));
  clip-path: polygon(16% 12%, 74% 0, 100% 38%, 82% 86%, 27% 100%, 0 54%);
  box-shadow: inset 0 0 22px rgba(255,255,255,0.18), 0 0 26px rgba(183,216,214,0.12);
}

.tide-ripple {
  position: absolute;
  right: 32px;
  bottom: 24px;
  width: 180px;
  height: 70px;
  border: 1px solid rgba(183,216,214,0.18);
  border-radius: 50%;
  box-shadow: 0 0 0 18px rgba(107,231,200,0.025), 0 0 0 38px rgba(140,124,255,0.018);
}

.chapter-strip {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 18;
  display: flex;
  gap: 6px;
  padding: 7px;
  border: 1px solid rgba(183,216,214,0.16);
  border-radius: 999px;
  background: rgba(7,16,20,0.66);
  backdrop-filter: blur(16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease;
}
body.cabinet-open .chapter-strip { opacity: 1; pointer-events: auto; }

.chapter-strip button {
  border: 0;
  border-radius: 999px;
  padding: 9px 13px;
  color: rgba(183,216,214,0.72);
  background: transparent;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
}
.chapter-strip button.active { color: var(--abyss); background: var(--mist); }

@keyframes auroraDrift { from { transform: translateX(-5vw) skewX(-8deg); } to { transform: translateX(9vw) skewX(7deg); } }
@keyframes ringWarp { from { transform: rotate(-8deg) scaleX(0.92); } to { transform: rotate(18deg) scaleX(1.08); } }
@keyframes slowSpin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  body { min-height: auto; }
  .cabinet { grid-template-columns: 1fr; grid-auto-rows: auto; padding-top: 4vh; }
  .tile, .tile-horizon, .tile-monolith, .tile-void, .tile-wide { grid-column: 1; grid-row: auto; min-height: 280px; }
  .tile-void { min-height: 520px; }
  .chapter-strip { width: calc(100% - 24px); justify-content: center; bottom: 12px; }
  .chapter-strip button { padding: 8px 9px; }
}