:root {
  --ink: #11100E;
  --vellum: #F4EAD8;
  --lilac: #D9D0EA;
  --blue: #294C73;
  --red: #C93A2E;
  --graphite: #6F6A60;
  --gold: #C6A15B;
  --serif: "Instrument Serif", "Newsreader", Georgia, serif;
  --grotesk: "Space Grotesk", Inter, ui-sans-serif, system-ui, sans-serif;
  --mono: "Syne Mono", "SFMono-Regular", Consolas, monospace;
  --design-font-token: "Space Grotesk* Grotesk** for structural labels";
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--vellum);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 8%, rgba(217, 208, 234, .55), transparent 30vw),
    radial-gradient(circle at 88% 38%, rgba(198, 161, 91, .28), transparent 24vw),
    linear-gradient(115deg, rgba(17,16,14,.05) 1px, transparent 1px),
    var(--vellum);
  background-size: auto, auto, 34px 34px, auto;
  overflow-x: hidden;
  font-family: var(--grotesk);
}

.paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .38;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(17,16,14,.13) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 80%, rgba(111,106,96,.1) 0 1px, transparent 1.5px),
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(17,16,14,.025) 7px 8px);
  background-size: 17px 19px, 23px 29px, 100% 100%;
}

.registry-nav {
  position: fixed;
  z-index: 60;
  top: 1.2rem;
  right: 1.1rem;
  display: grid;
  gap: .45rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
}

.registry-nav a {
  width: 2.4rem;
  height: 1.65rem;
  display: grid;
  place-items: center;
  color: var(--blue);
  text-decoration: none;
  border: 1px solid rgba(41,76,115,.45);
  background: rgba(244,234,216,.52);
  backdrop-filter: blur(3px);
  transform: rotate(-2deg);
  transition: transform .35s ease, color .35s ease, border-color .35s ease;
}

.registry-nav a:nth-child(even) { transform: rotate(2deg); }
.registry-nav a.active, .registry-nav a:hover { color: var(--red); border-color: var(--red); transform: rotate(0deg) translateX(-.25rem); }

.room {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 5rem);
  border-bottom: 1px solid rgba(111,106,96,.22);
}

.entry-room {
  display: grid;
  place-items: center;
  text-align: center;
}

.vellum-sheet {
  position: absolute;
  inset: 7vh 9vw;
  background: rgba(244,234,216,.48);
  border: 1px solid rgba(111,106,96,.2);
  box-shadow: 0 22px 80px rgba(17,16,14,.07);
  transform: rotate(-3deg);
  z-index: -1;
}

.sheet-two { inset: 13vh 16vw; background: rgba(217,208,234,.28); transform: rotate(4deg); }

.micro-stamp, .room-label em, .name-slip b, .desk-note {
  font-family: var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.micro-stamp {
  position: absolute;
  top: 9vh;
  left: 7vw;
  color: var(--red);
  border: 2px solid var(--red);
  padding: .35rem .6rem;
  transform: rotate(-8deg);
  opacity: .78;
}

.wordmark {
  margin: 0;
  display: flex;
  gap: clamp(.1rem, 1.5vw, 1rem);
  font-family: var(--serif);
  font-size: clamp(7rem, 24vw, 22rem);
  font-weight: 400;
  line-height: .72;
  letter-spacing: -.09em;
  filter: url(#none);
}

.letter {
  position: relative;
  display: inline-block;
  font-style: italic;
  transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0));
  transition: transform .4s ease-out;
}

.letter::before, .letter::after {
  content: attr(data-shadow);
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.letter::before { color: var(--blue); transform: translate(-.045em, .035em); opacity: .65; }
.letter::after { color: var(--lilac); transform: translate(.04em, -.03em); opacity: .8; }

.entry-note {
  max-width: 36rem;
  margin: 1.4rem auto 0;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.3vw, 2.2rem);
  color: var(--graphite);
}

.redaction-reveal {
  position: absolute;
  right: 8vw;
  bottom: 12vh;
  display: grid;
  gap: .35rem;
  font-family: var(--mono);
  color: var(--vellum);
}

.redaction-reveal span {
  position: relative;
  padding: .22rem .55rem;
  background: var(--ink);
}

.redaction-reveal span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--red);
  transform-origin: right;
  animation: shutter 6s ease-in-out infinite;
}

.redaction-reveal span:nth-child(2)::after { animation-delay: .8s; }
.redaction-reveal span:nth-child(3)::after { animation-delay: 1.6s; }

.room-label {
  position: absolute;
  top: 6vh;
  left: 5vw;
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  z-index: 3;
}

.room-label span {
  font-family: var(--serif);
  font-size: clamp(5rem, 12vw, 12rem);
  line-height: .75;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--blue);
  text-shadow: .05em .04em 0 rgba(201,58,46,.22);
}

.room-label em { font-style: normal; color: var(--red); font-size: .76rem; padding-bottom: .8rem; }

.n-room { background: linear-gradient(150deg, rgba(244,234,216,.95), rgba(217,208,234,.2)); }

.diagonal-ledger {
  position: absolute;
  inset: 18vh -8vw auto 14vw;
  height: 70vh;
  transform: rotate(-13deg);
  display: grid;
  grid-template-columns: repeat(3, minmax(13rem, 1fr));
  gap: 1.4rem;
}

.name-slip {
  min-height: 9rem;
  padding: 1rem;
  background: rgba(244,234,216,.88);
  border: 1px solid rgba(111,106,96,.42);
  box-shadow: 9px 10px 0 rgba(41,76,115,.14), 0 18px 45px rgba(17,16,14,.08);
  transform: translateY(var(--slip, 0)) rotate(var(--tilt, 0deg));
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
}

.name-slip span { display: block; font-family: var(--serif); font-size: clamp(2.4rem, 5vw, 5.2rem); line-height: .85; }
.name-slip small { color: var(--graphite); font-family: var(--grotesk); }
.name-slip:nth-child(2) { --tilt: 3deg; margin-top: 2rem; }
.name-slip:nth-child(3) { --tilt: -2deg; margin-top: -1.2rem; }
.name-slip:nth-child(4) { --tilt: 2deg; }
.name-slip:nth-child(5) { --tilt: -4deg; margin-top: 1.7rem; }
.name-slip:nth-child(6) { --tilt: 1deg; }

.vertical {
  writing-mode: vertical-rl;
  position: absolute;
  right: 7vw;
  top: 18vh;
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--graphite);
}

.folding-n {
  position: absolute;
  left: -2vw;
  bottom: -6vh;
  font-family: var(--serif);
  font-size: 34vw;
  color: rgba(198,161,91,.2);
  transform: skewY(-12deg);
}

.a-room { background: radial-gradient(circle at 55% 46%, rgba(198,161,91,.22), transparent 24rem), var(--vellum); }

.atrium-triangle {
  position: absolute;
  inset: 18vh 18vw 14vh 18vw;
  display: grid;
  place-items: center;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  border: 1px solid var(--gold);
  background: linear-gradient(180deg, rgba(217,208,234,.38), rgba(244,234,216,.28));
}

.atrium-triangle::before {
  content: "";
  position: absolute;
  inset: 1.2rem;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  border: 2px solid rgba(201,58,46,.55);
}

.atrium-triangle h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(4rem, 13vw, 13rem);
  font-weight: 400;
  color: var(--ink);
}

.atrium-triangle h2 span { display: inline-block; margin: 0 -.08em; }
.atrium-triangle p { position: absolute; bottom: 13%; width: 26rem; max-width: 70%; font-family: var(--serif); font-size: 1.35rem; text-align: center; color: var(--blue); }

.bracket { position: absolute; width: 15%; height: 44%; border-color: var(--blue); opacity: .8; transform: scaleY(var(--draw, .12)); transition: transform 1s ease; }
.bracket-left { left: 23%; bottom: 18%; border-left: 3px solid; border-top: 3px solid; border-bottom: 3px solid; transform-origin: bottom; }
.bracket-right { right: 23%; bottom: 18%; border-right: 3px solid; border-top: 3px solid; border-bottom: 3px solid; transform-origin: top; }
.in-view .bracket { --draw: 1; }

.phonetic-orbit span {
  position: absolute;
  font-family: var(--mono);
  color: var(--red);
  transform: translate(-50%, -50%);
}
.phonetic-orbit span:nth-child(1) { left: 22%; top: 32%; }
.phonetic-orbit span:nth-child(2) { left: 74%; top: 28%; }
.phonetic-orbit span:nth-child(3) { left: 81%; top: 70%; }
.phonetic-orbit span:nth-child(4) { left: 19%; top: 74%; }
.phonetic-orbit span:nth-child(5) { left: 50%; top: 13%; }
.seal-press { position: absolute; right: 7vw; bottom: 5vh; font-family: var(--serif); font-size: 18vw; color: rgba(201,58,46,.16); transform: rotate(var(--seal, -18deg)); transition: transform .4s ease; }

.m-room { background: linear-gradient(90deg, rgba(41,76,115,.12), transparent 25%, transparent 75%, rgba(41,76,115,.12)), var(--vellum); }
.mirror-corridor { min-height: 86vh; display: grid; grid-template-columns: 1fr auto 1fr; gap: 3vw; align-items: center; padding-top: 10vh; }
.corridor-letter { font-family: var(--serif); font-size: clamp(9rem, 28vw, 26rem); color: var(--ink); line-height: .7; text-shadow: -.045em .025em 0 rgba(41,76,115,.45), .045em -.025em 0 rgba(217,208,234,.8); }
.alias-column { display: grid; gap: 1.1rem; }
.right-aliases { transform: scaleX(-1); }
.alias-word {
  border: 0;
  background: transparent;
  color: var(--blue);
  cursor: pointer;
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 6rem);
  text-align: right;
  text-decoration: line-through .06em var(--red);
  transition: letter-spacing .35s ease, color .35s ease, transform .35s ease;
}
.right-aliases .alias-word { text-align: left; }
.alias-word:hover { color: var(--red); letter-spacing: .08em; transform: translateX(1rem); }
.alias-word.revealed::after { content: " / " attr(data-alt); font-family: var(--mono); font-size: 1rem; color: var(--graphite); text-decoration: none; }
.corridor-note { position: absolute; left: 50%; bottom: 9vh; transform: translateX(-50%); width: min(33rem, 78vw); text-align: center; font-family: var(--serif); font-size: 1.45rem; color: var(--graphite); }

.e-room { background: linear-gradient(180deg, var(--vellum), rgba(217,208,234,.45)); }
.peeling-board { position: absolute; inset: 13vh 8vw 36vh 8vw; }
.peel-label {
  position: absolute;
  padding: .8rem 1.4rem;
  background: rgba(244,234,216,.9);
  border: 1px solid rgba(111,106,96,.45);
  box-shadow: 0 14px 35px rgba(17,16,14,.1);
  font-family: var(--mono);
  text-transform: uppercase;
  color: var(--blue);
  transform: rotate(var(--rot)) translateY(var(--peel, 0));
  transition: transform 1s cubic-bezier(.2,.75,.1,1), opacity 1s ease;
}
.l1 { left: 9%; top: 30%; --rot: -8deg; }
.l2 { left: 31%; top: 8%; --rot: 5deg; }
.l3 { left: 53%; top: 28%; --rot: -3deg; }
.l4 { left: 69%; top: 4%; --rot: 9deg; }
.l5 { left: 42%; top: 58%; --rot: -12deg; color: var(--red); }
.in-view .peel-label { --peel: -6vh; opacity: .34; }

.final-desk {
  position: absolute;
  left: 50%;
  bottom: 11vh;
  width: min(64rem, 86vw);
  transform: translateX(-50%);
  padding: 2.2rem 2rem 1.4rem;
  border-top: 2px solid var(--ink);
  text-align: center;
}
.desk-note { color: var(--graphite); font-size: .74rem; }
.final-name { margin: 0; font-family: var(--serif); font-size: clamp(5.5rem, 16vw, 15rem); font-weight: 400; line-height: .75; letter-spacing: -.07em; }
.final-name span { display: inline-block; transform: translateY(var(--align, 0)); transition: transform 1s ease; }
.final-name span:nth-child(1) { --align: -.08em; }
.final-name span:nth-child(2) { --align: .05em; }
.final-name span:nth-child(3) { --align: -.04em; }
.final-name span:nth-child(4) { --align: .07em; }
.in-view .final-name span { --align: 0; }
.stamp-seal {
  position: absolute;
  right: 9%;
  top: 32%;
  width: 6.4rem;
  height: 6.4rem;
  display: grid;
  place-items: center;
  border: 3px double var(--red);
  border-radius: 50%;
  color: var(--red);
  font-family: var(--mono);
  text-transform: uppercase;
  transform: rotate(-18deg) scale(var(--stamp, .82));
  transition: transform .5s cubic-bezier(.2,1.45,.35,1);
}
.in-view .stamp-seal { --stamp: 1; }
.closing-line { position: absolute; left: 8vw; bottom: 4vh; width: min(34rem, 76vw); font-family: var(--serif); font-size: 1.35rem; color: var(--graphite); }

.room::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 0 42%, rgba(244,234,216,.38) 44% 55%, transparent 57%);
  mix-blend-mode: screen;
}

@keyframes shutter {
  0%, 24% { transform: scaleX(1); }
  42%, 62% { transform: scaleX(.08); }
  82%, 100% { transform: scaleX(1); }
}

@media (max-width: 800px) {
  .room { padding: 1.4rem; }
  .registry-nav { right: .5rem; top: .5rem; }
  .wordmark { font-size: 31vw; }
  .diagonal-ledger { inset: 22vh -20vw auto 5vw; grid-template-columns: 1fr 1fr; gap: .8rem; transform: rotate(-8deg); }
  .name-slip { min-height: 7rem; }
  .atrium-triangle { inset: 22vh 4vw 16vh 4vw; }
  .mirror-corridor { grid-template-columns: 1fr; gap: 1rem; padding-top: 18vh; }
  .corridor-letter { text-align: center; font-size: 38vw; }
  .right-aliases { transform: none; }
  .alias-word, .right-aliases .alias-word { text-align: center; font-size: 11vw; }
  .peeling-board { inset: 18vh 2vw 38vh; }
  .stamp-seal { right: 0; top: 46%; }
}