:root {
  --black: #080609;
  --burgundy: #3A0714;
  --gold: #C49A45;
  --parchment: #E8D8B4;
  --moon: #8EA4B8;
  --bronze: #5D4A2E;
  --wax: #8F1D2C;
  --display: "Cinzel Decorative", serif;
  --serif: "Cormorant Garamond", serif;
  --small: "Alegreya Sans SC", "Inter", "Space Grotesk", sans-serif;
  --glint-x: 50%;
  --glint-y: 50%;
}

* { box-sizing: border-box; }

html { background: var(--black); color: var(--parchment); scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--serif);
  background:
    radial-gradient(circle at var(--glint-x) var(--glint-y), rgba(196,154,69,.09), transparent 16rem),
    radial-gradient(circle at 50% 8%, rgba(196,154,69,.16), transparent 28rem),
    radial-gradient(circle at 15% 45%, rgba(58,7,20,.82), transparent 32rem),
    linear-gradient(135deg, var(--black), var(--burgundy) 45%, var(--black));
  overflow-x: hidden;
}

.velvet-grain,
.velvet-grain::before {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

.velvet-grain {
  opacity: .38;
  background-image: repeating-radial-gradient(circle at 14% 12%, rgba(232,216,180,.08) 0 1px, transparent 1px 5px), repeating-linear-gradient(90deg, rgba(196,154,69,.03) 0 1px, transparent 1px 7px);
  mix-blend-mode: screen;
}

.velvet-grain::before {
  content: "";
  background: radial-gradient(circle, transparent 45%, rgba(8,6,9,.7));
}

.manor { position: relative; }

.chamber {
  position: relative;
  min-height: 100vh;
  padding: clamp(4rem, 8vw, 8rem);
  isolation: isolate;
  overflow: hidden;
}

.chamber::before {
  content: "";
  position: absolute;
  inset: 1.2rem;
  border: 1px solid rgba(196,154,69,.42);
  clip-path: polygon(0 2rem, 2rem 0, calc(100% - 2rem) 0, 100% 2rem, 100% calc(100% - 2rem), calc(100% - 2rem) 100%, 2rem 100%, 0 calc(100% - 2rem));
  pointer-events: none;
  z-index: -1;
}

.small-rune, .room-label, .scroll-oath, .seal-note em {
  font-family: var(--small);
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--gold);
}

.map-rail {
  position: fixed;
  right: 1.6rem;
  top: 8vh;
  height: 84vh;
  width: 2px;
  background: linear-gradient(var(--gold), var(--moon), var(--gold));
  z-index: 30;
  box-shadow: 0 0 18px rgba(196,154,69,.45);
}

.room-label {
  position: absolute;
  right: .8rem;
  top: 0;
  writing-mode: vertical-rl;
  font-size: .8rem;
  white-space: nowrap;
}

.crown-marker {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  color: var(--parchment);
  text-shadow: 0 0 12px var(--gold);
  font-size: 1.2rem;
}

.gatehouse { display: grid; place-items: center; text-align: center; min-height: 112vh; }

.arch {
  position: absolute;
  bottom: -12vh;
  width: 42vw;
  height: 78vh;
  border: 2px solid rgba(142,164,184,.24);
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
  filter: drop-shadow(0 0 30px rgba(142,164,184,.14));
  opacity: .75;
}

.arch-left { left: -13vw; }
.arch-right { right: -11vw; height: 68vh; bottom: -8vh; }

.banner {
  position: absolute;
  top: 15vh;
  width: min(20rem, 24vw);
  height: 58vh;
  background: linear-gradient(var(--burgundy), rgba(143,29,44,.55));
  border: 1px solid rgba(196,154,69,.65);
  box-shadow: inset 0 0 30px rgba(8,6,9,.65), 0 18px 50px rgba(0,0,0,.55);
  clip-path: polygon(0 0, 100% 0, 100% 86%, 50% 100%, 0 86%);
  transform-origin: top;
  animation: unfurl 1.8s cubic-bezier(.2,.8,.2,1) both;
}

.banner-left { left: 5vw; transform: rotate(-2deg); }
.banner-right { right: 7vw; top: 24vh; transform: rotate(3deg); animation-delay: .2s; }
.banner span { writing-mode: vertical-rl; font-family: var(--small); letter-spacing: .34em; color: var(--parchment); font-size: 1.1rem; line-height: 1; margin-top: 3rem; display: inline-block; }

.lintel { margin-top: -18vh; }
.lintel h1 {
  margin: .4rem 0 0;
  font-family: var(--display);
  font-size: clamp(4.3rem, 13vw, 14rem);
  font-weight: 900;
  line-height: .82;
  color: var(--parchment);
  text-shadow: 0 0 2px var(--gold), 0 12px 0 rgba(58,7,20,.9), 0 34px 50px rgba(0,0,0,.9);
}

.portcullis {
  position: absolute;
  top: 25vh;
  left: 50%;
  width: min(30rem, 44vw);
  height: 54vh;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.portcullis span {
  width: 1px;
  height: 100%;
  background: linear-gradient(transparent, var(--gold), var(--parchment), var(--gold), transparent);
  transform-origin: top;
  animation: lowerPart 2.5s cubic-bezier(.28,.78,.18,1) both, partGate 1.8s cubic-bezier(.4,0,.2,1) 2.2s forwards;
  box-shadow: 0 0 16px rgba(196,154,69,.85);
}

.portcullis span:nth-child(odd) { animation-delay: .12s, 2.3s; }
.portcullis span:nth-child(4) { width: 2px; }

.wax-seal {
  position: absolute;
  width: clamp(7rem, 12vw, 11rem);
  bottom: 18vh;
  filter: drop-shadow(0 20px 24px rgba(0,0,0,.55));
  animation: sealGlimmer 5s ease-in-out infinite;
}

.wax-seal svg { width: 100%; overflow: visible; }
.seal-edge { fill: var(--wax); }
.seal-ring, .seal-key { fill: none; stroke: var(--gold); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.seal-crown { fill: var(--gold); opacity: .85; }

.threshold-copy {
  position: absolute;
  bottom: 8vh;
  width: min(44rem, 70vw);
  font-size: clamp(1.25rem, 2vw, 2rem);
  color: rgba(232,216,180,.86);
}

.scroll-oath { position: absolute; bottom: 3rem; font-size: .8rem; }

.room-title { display: flex; gap: 1.5rem; align-items: flex-start; margin-bottom: 4rem; }
.room-title span { font-family: var(--small); color: var(--moon); letter-spacing: .2em; }
h2 { font-family: var(--display); font-size: clamp(3rem, 7vw, 8rem); line-height: .9; margin: 0; color: var(--parchment); }

.vestibule { background: linear-gradient(180deg, rgba(8,6,9,.55), rgba(58,7,20,.78)); }
.seal-ledger { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; position: relative; z-index: 2; }
.seal-note {
  min-height: 21rem;
  padding: 2rem;
  background: linear-gradient(135deg, rgba(232,216,180,.96), rgba(196,154,69,.25));
  color: var(--black);
  border: 1px solid var(--gold);
  box-shadow: 0 28px 60px rgba(0,0,0,.46), inset 0 0 40px rgba(93,74,46,.16);
  clip-path: polygon(0 0, 94% 0, 100% 7%, 100% 100%, 6% 100%, 0 93%);
}
.seal-note.offset { margin-top: 4rem; }
.seal-note b { font-family: var(--display); font-size: 7rem; color: var(--wax); float: left; line-height: .75; margin-right: .8rem; }
.seal-note p { font-size: 1.6rem; line-height: 1.15; margin: 0 0 2rem; }
.seal-note em { color: var(--bronze); font-size: .78rem; font-style: normal; }
.heraldic-beast { position: absolute; right: 4vw; bottom: 4vh; width: 36vw; opacity: .22; fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }

.great-hall { min-height: 120vh; display: grid; grid-template-columns: .7fr 1.3fr; align-items: center; background: radial-gradient(circle at 78% 35%, rgba(142,164,184,.13), transparent 24rem), var(--black); }
.rail-ornament { position: absolute; left: 10vw; top: 8vh; bottom: 8vh; width: 5px; border-left: 1px solid var(--gold); border-right: 1px solid var(--gold); }
.rail-ornament::before, .rail-ornament::after { content: "✥"; position: absolute; left: 50%; transform: translateX(-50%); color: var(--gold); font-size: 2rem; background: var(--black); padding: 1rem 0; }
.rail-ornament::before { top: 12%; } .rail-ornament::after { bottom: 12%; }
.giant-initial { font-family: var(--display); font-size: clamp(16rem, 35vw, 34rem); color: rgba(196,154,69,.13); text-shadow: 0 0 40px rgba(196,154,69,.18); line-height: .7; }
.hall-text { max-width: 58rem; }
.hall-text p:not(.small-rune), .observatory-copy p:not(.small-rune) { font-size: clamp(1.4rem, 2.5vw, 2.4rem); line-height: 1.2; color: rgba(232,216,180,.82); }
.unfurling-banner { position: absolute; right: 7vw; bottom: 10vh; display: flex; gap: .6rem; transform: rotate(-4deg); }
.unfurling-banner span { font-family: var(--small); letter-spacing: .2em; padding: .8rem 2rem; background: var(--burgundy); border: 1px solid var(--gold); box-shadow: 0 10px 30px rgba(0,0,0,.4); }

.treaty { background: linear-gradient(160deg, var(--burgundy), var(--black)); }
.parchments { min-height: 50vh; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: center; }
.parchment {
  position: relative;
  padding: 3rem 2.4rem;
  min-height: 26rem;
  background: radial-gradient(circle at 20% 10%, rgba(255,255,255,.15), transparent 12rem), var(--parchment);
  color: var(--black);
  border: 2px solid var(--bronze);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  transform: rotate(-2deg);
}
.parchment::before, .parchment::after { content: ""; position: absolute; width: 4rem; height: 4rem; border: 1px solid rgba(93,74,46,.45); }
.parchment::before { top: .8rem; left: .8rem; border-right: 0; border-bottom: 0; }
.parchment::after { right: .8rem; bottom: .8rem; border-left: 0; border-top: 0; }
.parchment.raised { margin-top: -5rem; transform: rotate(2deg); }
.parchment.lowered { margin-top: 5rem; transform: rotate(-1deg); }
.parchment h3 { font-family: var(--display); font-size: clamp(2rem, 3vw, 3.4rem); margin: 0 0 1rem; color: var(--wax); }
.parchment p { font-size: 1.45rem; line-height: 1.2; }
.parchment.pressed { transform: translateY(1rem) rotate(0deg); box-shadow: 0 18px 55px rgba(0,0,0,.58), inset 0 0 34px rgba(143,29,44,.13); transition: transform .35s ease, box-shadow .35s ease; }
.treaty-stamps { position: absolute; inset: auto 8vw 7vh auto; display: flex; gap: 1rem; color: var(--gold); font-size: 2rem; }

.observatory { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 5vw; background: radial-gradient(circle at 35% 50%, rgba(142,164,184,.18), transparent 28rem), var(--black); }
.astrolabe { position: relative; aspect-ratio: 1; max-width: 42rem; margin: auto; }
.astrolabe svg { width: 100%; height: 100%; fill: none; stroke: var(--moon); stroke-width: 1.5; opacity: .75; filter: drop-shadow(0 0 14px rgba(142,164,184,.35)); animation: slowTurn 40s linear infinite; }
.center-signet { position: absolute; inset: 36%; display: grid; place-items: center; text-align: center; border-radius: 50%; background: var(--wax); border: 2px solid var(--gold); font-family: var(--display); text-transform: uppercase; color: var(--parchment); box-shadow: 0 0 30px rgba(196,154,69,.45); }
.center-signet em { font-family: var(--small); font-style: normal; color: var(--gold); }
.orbit { position: absolute; left: 50%; top: 50%; color: var(--gold); font-family: var(--small); text-shadow: 0 0 12px var(--gold); animation: orbit 16s linear infinite; }
.o1 { --r: 15rem; animation-duration: 18s; } .o2 { --r: 11rem; animation-duration: 13s; animation-direction: reverse; } .o3 { --r: 18rem; animation-duration: 22s; } .o4 { --r: 7rem; animation-duration: 10s; animation-direction: reverse; color: var(--moon); }

@keyframes lowerPart { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
@keyframes partGate { to { transform: translateX(var(--spread, 0)) scaleY(.82); opacity: .78; } }
.portcullis span:nth-child(1) { --spread: -6rem; } .portcullis span:nth-child(2) { --spread: -4rem; } .portcullis span:nth-child(3) { --spread: -2rem; } .portcullis span:nth-child(5) { --spread: 2rem; } .portcullis span:nth-child(6) { --spread: 4rem; } .portcullis span:nth-child(7) { --spread: 6rem; }
@keyframes unfurl { from { transform: scaleY(0) rotate(0deg); opacity: .2; } to { opacity: 1; } }
@keyframes sealGlimmer { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); filter: drop-shadow(0 0 22px rgba(196,154,69,.52)); } }
@keyframes slowTurn { to { transform: rotate(360deg); } }
@keyframes orbit { from { transform: rotate(0) translateX(var(--r)) rotate(0); } to { transform: rotate(360deg) translateX(var(--r)) rotate(-360deg); } }

@media (max-width: 900px) {
  .chamber { padding: 5rem 1.2rem; }
  .map-rail { display: none; }
  .banner { opacity: .35; width: 9rem; }
  .seal-ledger, .parchments, .great-hall, .observatory { grid-template-columns: 1fr; }
  .seal-note.offset, .parchment.raised, .parchment.lowered { margin-top: 0; }
  .portcullis { width: 70vw; }
  .threshold-copy { width: 82vw; }
}