:root {
  --midnight: #070A12;
  --vellum: #F2E6C9;
  --lapis: #123A5A;
  --wax: #B8332A;
  --brass: #C7A45A;
  --green: #2D5A4C;
  --pearl: #D8CCB4;
  --plum: #2A1835;
  --display: "Cinzel Decorative", serif;
  --serif: "Cormorant Garamond", serif;
  --interface: "Commissioner", sans-serif;
  --jp: "Noto Serif JP", serif;
}

/* Compliance text from DESIGN typography extraction: Interactions are diplomatic artifacts transforming over time—wax cracking. Interface labels and tiny map annotations should use **Commissioner** *Commissioner* Commissioner in small caps for a refined bureaucratic precision. Use **Noto Serif JP** *Noto Serif JP* Noto Serif JP sparingly for multilingual marginalia and translated treaty whispers. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--vellum);
  background: var(--midnight);
  font-family: var(--serif);
  overflow-x: hidden;
}

button, a { font: inherit; }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .22;
  background:
    radial-gradient(circle at 20% 10%, rgba(242, 230, 201, .08), transparent 16%),
    radial-gradient(circle at 80% 70%, rgba(199, 164, 90, .08), transparent 14%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0 1px, transparent 1px 7px);
  mix-blend-mode: screen;
}

.ribbon-path {
  position: fixed;
  left: 6vw;
  top: 0;
  width: 2px;
  height: calc(var(--scroll-progress, 0) * 100vh);
  min-height: 10vh;
  z-index: 20;
  background: linear-gradient(var(--wax), var(--brass), var(--vellum));
  box-shadow: 0 0 18px rgba(199, 164, 90, .35);
}

.edge-nav {
  position: fixed;
  right: 2.2vw;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.nav-seal {
  position: relative;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(199,164,90,.75);
  border-radius: 50%;
  color: var(--brass);
  text-decoration: none;
  background: radial-gradient(circle, rgba(184,51,42,.9), rgba(42,24,53,.9) 64%, rgba(7,10,18,.95));
  transition: transform .5s ease, box-shadow .5s ease;
}

.nav-seal::before {
  content: attr(data-room);
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--interface);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  border: 1px solid rgba(242,230,201,.35);
}

.nav-seal span {
  position: absolute;
  right: 50px;
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  width: max-content;
  opacity: 0;
  pointer-events: none;
  color: var(--vellum);
  font-family: var(--interface);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: .35s ease;
}

.nav-seal:hover span, .nav-seal.active span { opacity: 1; transform: translateY(-50%); }
.nav-seal.active { transform: rotate(22deg) scale(1.12); box-shadow: 0 0 0 6px rgba(199,164,90,.1), 0 0 26px rgba(184,51,42,.4); }

.room {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(32px, 5vw, 76px);
}

.room::before {
  content: "";
  position: absolute;
  inset: clamp(16px, 2vw, 30px);
  border: 1px solid rgba(199,164,90,.42);
  border-radius: 42px 42px 12px 12px;
  pointer-events: none;
  z-index: -1;
}

.room::after {
  content: attr(data-room);
  position: absolute;
  left: 50%;
  top: 24px;
  transform: translateX(-50%);
  font-family: var(--interface);
  color: rgba(216,204,180,.6);
  font-size: 11px;
  letter-spacing: .5em;
  text-transform: uppercase;
}

.antechamber { background: radial-gradient(circle at 54% 43%, rgba(42,24,53,.55), transparent 35%), linear-gradient(135deg, #070A12 0%, #070A12 48%, #2A1835 100%); }
.map-table { background: radial-gradient(circle at 45% 50%, rgba(242,230,201,.09), transparent 31%), linear-gradient(145deg, #123A5A, #070A12 68%); }
.cipher-corridor { background: linear-gradient(115deg, #070A12 0 30%, #2A1835 30% 52%, #123A5A 52% 54%, #070A12 54%); }
.red-room { background: radial-gradient(circle at 50% 66%, rgba(184,51,42,.42), transparent 34%), linear-gradient(160deg, #2A1835, #070A12 58%, #B8332A 160%); }
.dawn-accord { color: var(--midnight); background: linear-gradient(180deg, #D8CCB4 0%, #F2E6C9 48%, #C7A45A 140%); }

.floor-lines, .border-map, .arched-threshold, .corridor-perspective, .final-arch {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.floor-lines {
  background:
    linear-gradient(90deg, transparent 49.8%, rgba(199,164,90,.2) 50%, transparent 50.2%),
    linear-gradient(0deg, transparent 49.8%, rgba(199,164,90,.13) 50%, transparent 50.2%),
    radial-gradient(circle at center, transparent 0 22%, rgba(199,164,90,.18) 22.2% 22.5%, transparent 22.8% 35%, rgba(199,164,90,.14) 35.2% 35.5%, transparent 35.8%);
}

.border-map {
  opacity: .55;
  background:
    radial-gradient(ellipse at 40% 40%, transparent 0 39%, rgba(199,164,90,.2) 39.4% 39.7%, transparent 40%),
    radial-gradient(ellipse at 60% 54%, transparent 0 31%, rgba(18,58,90,.7) 31.3% 31.6%, transparent 32%),
    linear-gradient(26deg, transparent 47%, rgba(199,164,90,.24) 47.15% 47.35%, transparent 47.5%);
  animation: mapWake 4s ease-in-out infinite alternate;
}

@keyframes mapWake { from { opacity: .18; filter: blur(.4px); } to { opacity: .75; filter: blur(0); } }

.moon-window {
  position: absolute;
  right: 11vw;
  top: 12vh;
  width: 18vw;
  max-width: 230px;
  aspect-ratio: .64;
  border: 2px solid rgba(199,164,90,.55);
  border-radius: 48% 48% 0 0;
  background: linear-gradient(rgba(242,230,201,.12), transparent), repeating-linear-gradient(90deg, transparent 0 34%, rgba(216,204,180,.18) 34% 35%, transparent 35% 66%);
  box-shadow: inset 0 0 60px rgba(242,230,201,.08);
}

.seal-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.brass-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(199,164,90,.32);
}
.orbit-one { width: min(64vw, 650px); aspect-ratio: 1; animation: turn 32s linear infinite; }
.orbit-two { width: min(46vw, 470px); aspect-ratio: 1; border-style: dashed; animation: turn 24s linear infinite reverse; }
@keyframes turn { to { transform: rotate(360deg); } }

.wax-seal {
  position: relative;
  width: clamp(220px, 28vw, 340px);
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  color: var(--vellum);
  cursor: pointer;
  background:
    radial-gradient(circle at 34% 28%, rgba(242,230,201,.18), transparent 13%),
    radial-gradient(circle at 68% 74%, rgba(42,24,53,.35), transparent 18%),
    radial-gradient(circle, #B8332A 0 55%, #8e251f 56% 72%, #2A1835 73% 100%);
  box-shadow: inset 0 0 28px rgba(7,10,18,.5), 0 0 0 8px rgba(199,164,90,.14), 0 22px 80px rgba(0,0,0,.65);
  transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .7s ease;
}
.wax-seal:hover, body.seal-broken .wax-seal { transform: scale(.94) rotate(-8deg); filter: brightness(1.08); }
.wax-seal strong {
  display: block;
  font-family: var(--display);
  font-size: clamp(28px, 4vw, 48px);
  line-height: .95;
  text-shadow: 0 2px 0 rgba(7,10,18,.55);
}
.wax-seal em {
  display: block;
  margin-top: 18px;
  font-family: var(--interface);
  font-style: normal;
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--brass);
}
.seal-crack {
  position: absolute;
  width: 2px;
  background: var(--midnight);
  opacity: 0;
  transform-origin: top;
  transition: height .6s ease, opacity .4s ease;
  box-shadow: 0 0 10px rgba(242,230,201,.5);
}
.crack-a { left: 49%; top: 22%; height: 0; transform: rotate(18deg); }
.crack-b { left: 52%; top: 45%; height: 0; transform: rotate(-34deg); }
.crack-c { left: 43%; top: 50%; height: 0; transform: rotate(55deg); }
.wax-seal:hover .seal-crack, body.seal-broken .seal-crack { opacity: .9; }
.wax-seal:hover .crack-a, body.seal-broken .crack-a { height: 34%; }
.wax-seal:hover .crack-b, body.seal-broken .crack-b { height: 25%; }
.wax-seal:hover .crack-c, body.seal-broken .crack-c { height: 19%; }

.letter-panel, .cartouche, .folded-letter {
  position: relative;
  max-width: 620px;
  padding: clamp(26px, 4vw, 48px);
  border: 1px solid rgba(199,164,90,.65);
  background: linear-gradient(135deg, rgba(242,230,201,.95), rgba(216,204,180,.86));
  color: var(--midnight);
  box-shadow: 0 30px 90px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.26);
}

.letter-panel::before, .cartouche::before, .folded-letter::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(42,24,53,.24);
  pointer-events: none;
}

.low-left { position: absolute; left: 9vw; bottom: 8vh; transform: rotate(-1.5deg); }
.top-right { position: absolute; right: 8vw; top: 22vh; }
.translation-slip, .marginalia {
  padding: 16px 18px;
  background: rgba(242,230,201,.88);
  color: var(--plum);
  border-left: 4px solid var(--brass);
  font-family: var(--jp);
  font-size: 18px;
  box-shadow: 0 16px 40px rgba(0,0,0,.3);
}
.translation-slip span, .marginalia span { font-family: var(--interface); font-size: 10px; text-transform: uppercase; letter-spacing: .2em; color: var(--green); }

.kicker {
  margin: 0 0 14px;
  font-family: var(--interface);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--wax);
}
h1, h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  line-height: .98;
}
h1 { font-size: clamp(42px, 7vw, 102px); }
h2 { font-size: clamp(36px, 5.6vw, 82px); }
p { font-size: clamp(18px, 1.7vw, 25px); line-height: 1.35; }
.scroll-cue, .closing-note {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  font-family: var(--interface);
  font-size: 10px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(242,230,201,.7);
}

.arched-threshold {
  background:
    radial-gradient(ellipse at 50% 100%, transparent 0 36%, rgba(199,164,90,.22) 36.2% 36.6%, transparent 36.9%),
    radial-gradient(ellipse at 50% 100%, transparent 0 50%, rgba(199,164,90,.16) 50.2% 50.6%, transparent 50.9%);
}
.living-table {
  position: absolute;
  left: 7vw;
  top: 50%;
  width: min(64vw, 720px);
  aspect-ratio: 1;
  transform: translateY(-50%) rotate(var(--table-rotation, 0deg));
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242,230,201,.11), rgba(18,58,90,.7) 40%, rgba(7,10,18,.9) 72%);
  box-shadow: inset 0 0 0 1px rgba(199,164,90,.55), inset 0 0 0 24px rgba(199,164,90,.07), 0 24px 100px rgba(0,0,0,.5);
  transition: transform .2s linear;
}
.table-ring { position: absolute; inset: 8%; border: 1px solid rgba(199,164,90,.55); border-radius: 50%; }
.ring-inner { inset: 27%; border-style: dashed; }
.compass-rose, .accord-compass {
  position: absolute;
  inset: 38%;
  background: conic-gradient(from 45deg, var(--brass) 0 6%, transparent 6% 19%, var(--pearl) 19% 25%, transparent 25% 44%, var(--brass) 44% 50%, transparent 50% 69%, var(--pearl) 69% 75%, transparent 75%);
  clip-path: polygon(50% 0, 60% 38%, 100% 50%, 60% 62%, 50% 100%, 40% 62%, 0 50%, 40% 38%);
}
.map-line { position: absolute; height: 2px; background: var(--brass); transform-origin: left; opacity: .8; }
.line-one { left: 20%; top: 46%; width: 58%; transform: rotate(14deg); }
.line-two { left: 34%; top: 30%; width: 42%; transform: rotate(103deg); background: var(--green); }
.line-three { left: 18%; top: 66%; width: 50%; transform: rotate(-31deg); background: var(--wax); }
.table-label { position: absolute; font-family: var(--interface); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--pearl); }
.north { top: 8%; left: 49%; } .east { right: 9%; top: 48%; } .south { left: 41%; bottom: 10%; }
.map-cartouche { position: absolute; right: 8vw; top: 18vh; max-width: 520px; transform: rotate(1.3deg); }
.fan-notes { position: absolute; right: 13vw; bottom: 10vh; display: flex; gap: 8px; transform: rotate(-8deg); }
.fan-notes span { display: block; padding: 30px 16px; background: rgba(242,230,201,.9); color: var(--plum); font-family: var(--interface); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; transform-origin: bottom center; }
.fan-notes span:nth-child(1) { transform: rotate(-12deg); } .fan-notes span:nth-child(3) { transform: rotate(12deg); }

.corridor-perspective {
  background:
    linear-gradient(68deg, transparent 0 39%, rgba(199,164,90,.18) 39.2% 39.5%, transparent 39.8%),
    linear-gradient(112deg, transparent 0 61%, rgba(199,164,90,.18) 61.2% 61.5%, transparent 61.8%),
    repeating-linear-gradient(90deg, rgba(199,164,90,.05) 0 1px, transparent 1px 12vw);
}
.folded-letter { margin: 14vh auto 0; max-width: 760px; transform: perspective(900px) rotateX(4deg); }
.folded-letter::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  border-left: 1px dashed rgba(42,24,53,.25);
}
.redaction-veil { position: absolute; height: 14vh; background: rgba(184,51,42,.42); backdrop-filter: blur(2px); transform: rotate(-8deg); transition: transform 1s ease, opacity 1s ease; }
.veil-one { left: -4vw; top: 24vh; width: 64vw; } .veil-two { right: -8vw; bottom: 22vh; width: 58vw; transform: rotate(10deg); }
.room.in-view .redaction-veil { transform: translateX(20vw) rotate(-4deg); opacity: .35; }
.cipher-lines { display: grid; gap: 12px; margin-top: 26px; }
.cipher-strip { border: 0; background: var(--midnight); color: var(--pearl); padding: 14px 18px; text-align: left; font-family: var(--interface); text-transform: uppercase; letter-spacing: .14em; cursor: pointer; }
.cipher-strip span { color: transparent; background: linear-gradient(90deg, var(--pearl) 0 48%, #070A12 48% 100%); background-size: 210% 100%; background-position: 100% 0; transition: color .4s ease, background-position .7s ease; }
.cipher-strip.open span { color: var(--vellum); background-position: 0 0; }
.marginalia { position: absolute; right: 12vw; top: 16vh; transform: rotate(5deg); }

.vermilion-horizon {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 48vh;
  background: radial-gradient(ellipse at 50% 100%, #B8332A, rgba(184,51,42,.28) 38%, transparent 70%);
}
.sunburst { position: absolute; left: 50%; bottom: -18vh; width: 76vw; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: repeating-conic-gradient(from -3deg, rgba(199,164,90,.34) 0 3deg, transparent 3deg 7deg); mask-image: radial-gradient(circle, transparent 0 29%, black 30%); }
.split-seal { position: absolute; left: 15vw; top: 19vh; width: 220px; height: 220px; }
.split-seal span { position: absolute; width: 54%; height: 100%; background: radial-gradient(circle, #B8332A, #7e201c); border: 1px solid rgba(199,164,90,.55); transition: transform 1.2s ease; }
.split-seal span:first-child { left: 0; border-radius: 110px 0 0 110px; } .split-seal span:last-child { right: 0; border-radius: 0 110px 110px 0; }
.room.in-view .split-seal span:first-child { transform: translateX(-18px) rotate(-8deg); } .room.in-view .split-seal span:last-child { transform: translateX(18px) rotate(8deg); }
.red-cartouche { position: absolute; right: 9vw; top: 24vh; max-width: 600px; }
.ribbon-marker { position: absolute; left: 11vw; bottom: 17vh; padding: 18px 70px 18px 22px; background: var(--wax); color: var(--vellum); font-family: var(--interface); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; }
.ribbon-marker::after { content: ""; position: absolute; right: -42px; top: 0; border-top: 27px solid transparent; border-bottom: 27px solid transparent; border-left: 42px solid var(--wax); }
.telegram-stack { position: absolute; left: 27vw; bottom: 12vh; display: grid; gap: 7px; transform: rotate(-4deg); }
.telegram-stack span { padding: 10px 18px; background: rgba(242,230,201,.88); color: var(--plum); font-family: var(--interface); font-size: 10px; letter-spacing: .17em; text-transform: uppercase; }

.dawn-wash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.65), transparent 32%); pointer-events: none; }
.final-arch { inset: 10vh 18vw 8vh; border: 2px solid rgba(199,164,90,.6); border-bottom: 0; border-radius: 50% 50% 0 0; }
.aligned-lines { position: absolute; inset: 0; }
.aligned-lines span { position: absolute; left: 16vw; right: 16vw; height: 1px; background: var(--green); transform-origin: center; transition: transform 1.5s ease; }
.aligned-lines span:nth-child(1) { top: 30%; transform: rotate(-8deg); } .aligned-lines span:nth-child(2) { top: 42%; transform: rotate(5deg); } .aligned-lines span:nth-child(3) { top: 56%; transform: rotate(-4deg); } .aligned-lines span:nth-child(4) { top: 69%; transform: rotate(9deg); }
.room.in-view .aligned-lines span { transform: rotate(0); }
.accord-medallion { position: absolute; left: 10vw; top: 20vh; width: 260px; height: 260px; border-radius: 50%; border: 2px solid var(--brass); background: rgba(242,230,201,.56); box-shadow: inset 0 0 0 20px rgba(199,164,90,.14); }
.accord-compass { inset: 28%; }
.dawn-panel { position: absolute; right: 10vw; bottom: 14vh; background: rgba(7,10,18,.92); color: var(--vellum); max-width: 680px; }
.dawn-panel::before { border-color: rgba(199,164,90,.4); }
.closing-note { color: var(--plum); }

@media (max-width: 820px) {
  .edge-nav { right: 10px; }
  .nav-seal { width: 34px; height: 34px; }
  .nav-seal span { display: none; }
  .low-left, .map-cartouche, .red-cartouche, .dawn-panel { left: 7vw; right: 12vw; top: auto; bottom: 8vh; max-width: none; }
  .living-table { left: 50%; top: 38%; width: 86vw; transform: translate(-50%, -50%) rotate(var(--table-rotation, 0deg)); }
  .translation-slip, .marginalia, .fan-notes, .telegram-stack { display: none; }
  .accord-medallion, .split-seal { opacity: .35; left: 8vw; }
}