@import url('https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&display=swap');

:root {
  --mortis-gothic: "UnifrakturCook", "Old English Text MT", "Lucida Blackletter", fantasy;
  --mansion-stone: #11141a;
  --mansion-stone-light: #1b2028;
  --mansion-black: #050609;
  --mansion-gold: #d2aa62;
  --mansion-blue: #8eb6c6;
  --mansion-wine: #6e292b;
  --mansion-paper: #d6ccb8;
  --mansion-ink: #241f1b;
}

html {
  scroll-behavior: smooth;
}

.mortis-home {
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% -18%, rgba(142, 182, 198, .12), transparent 34rem),
    #07090d;
}

.mansion-home::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.013) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.009) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, #000, transparent 68%);
}

.mortis-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: .7rem;
  color: var(--ink);
  text-decoration: none;
}

.mortis-wordmark strong {
  font-family: var(--mortis-gothic);
  font-size: clamp(1.85rem, 3vw, 2.65rem);
  font-weight: 700;
  line-height: .8;
  letter-spacing: .015em;
}

.mortis-wordmark small {
  color: var(--accent);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* Guest Entrance */
.guest-entrance {
  min-height: 100svh;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0 clamp(1rem, 4vw, 4.5rem) clamp(4rem, 8vw, 8rem);
  border-bottom: 1px solid rgba(210, 170, 98, .2);
  background:
    linear-gradient(90deg, rgba(3, 4, 7, .94), rgba(3, 4, 7, .42) 52%, rgba(3, 4, 7, .82)),
    radial-gradient(circle at 74% 28%, rgba(142, 182, 198, .14), transparent 24rem),
    radial-gradient(circle at 16% 84%, rgba(210, 170, 98, .12), transparent 30rem),
    linear-gradient(150deg, #07080b 0%, #0c1118 52%, #050609 100%);
}

.guest-entrance::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .28;
  background:
    repeating-linear-gradient(90deg, transparent 0 7.8rem, rgba(255,255,255,.025) 7.85rem 7.92rem),
    repeating-linear-gradient(0deg, transparent 0 4.2rem, rgba(255,255,255,.018) 4.25rem 4.32rem);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.7), transparent 90%);
}

.mansion-nav {
  width: min(100%, 118rem);
  margin: 0 auto;
  padding-block: clamp(1.25rem, 2vw, 2rem);
  position: relative;
  z-index: 20;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.guest-grid {
  width: min(100%, 118rem);
  min-height: calc(100svh - 7rem);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(25rem, .72fr);
  gap: clamp(3rem, 8vw, 10rem);
  align-items: center;
  position: relative;
  z-index: 4;
  padding-block: clamp(4rem, 9vw, 9rem) clamp(5rem, 10vw, 10rem);
}

.guest-copy {
  position: relative;
  z-index: 5;
}

.guest-copy h1 {
  max-width: 7.2ch;
  margin: .35rem 0 0;
  font-family: var(--mortis-gothic);
  font-size: clamp(5.7rem, 11vw, 12rem);
  font-weight: 700;
  line-height: .67;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.guest-copy h1 span {
  display: block;
  color: var(--mansion-gold);
  text-shadow: 0 0 2rem rgba(210, 170, 98, .16);
}

.guest-declaration {
  max-width: 30ch;
  margin: clamp(1.7rem, 3vw, 2.5rem) 0 0;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.5rem, 2.6vw, 2.45rem);
  line-height: 1.22;
  text-wrap: balance;
}

.mortis-lead {
  max-width: 58ch;
  margin: 1.2rem 0 0;
  color: #c9c5be;
  line-height: 1.75;
  text-wrap: pretty;
}

.phobos-letter {
  width: min(100%, 35rem);
  margin: clamp(2rem, 5vw, 3.8rem) 0 0 clamp(0rem, 4vw, 4rem);
  position: relative;
  padding: clamp(1.4rem, 3vw, 2.3rem) clamp(1.5rem, 3vw, 2.5rem) 2rem;
  transform: rotate(-1.2deg);
  border: 1px solid rgba(70, 56, 42, .5);
  background:
    linear-gradient(90deg, transparent 0 2.1rem, rgba(117, 72, 59, .12) 2.15rem 2.2rem, transparent 2.25rem),
    radial-gradient(circle at 85% 5%, rgba(116, 79, 48, .16), transparent 9rem),
    #d7cdb8;
  color: #2a241e;
  box-shadow: 0 2.2rem 4rem rgba(0,0,0,.36);
  font-family: Georgia, "Times New Roman", serif;
}

.phobos-letter::before {
  content: "";
  width: 3.5rem;
  aspect-ratio: 1;
  position: absolute;
  right: 1.4rem;
  bottom: -1.25rem;
  border-radius: 48% 52% 44% 56%;
  background:
    radial-gradient(circle at 45% 38%, rgba(255,255,255,.13), transparent 18%),
    radial-gradient(circle, #772e31 0 42%, #542022 44% 62%, #3b1719 64% 100%);
  box-shadow: 0 .5rem .7rem rgba(0,0,0,.36);
}

.phobos-letter p {
  margin: 0 0 .8rem;
  line-height: 1.55;
}

.phobos-letter .letter-salutation {
  font-style: italic;
}

.letter-signature {
  margin-top: 1.4rem !important;
  font-family: var(--mortis-gothic);
  font-size: 1.8rem;
  line-height: .9 !important;
}

.letter-signature small {
  display: inline-block;
  margin-top: .55rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: .72rem;
  line-height: 1.25;
  letter-spacing: .04em;
}

/* Architectural entrance scene */
.entrance-scene {
  min-height: min(60rem, 72svh);
  position: relative;
  display: grid;
  place-items: center;
  align-self: stretch;
}

.entrance-door {
  width: min(27rem, 72%);
  height: min(45rem, 78%);
  min-height: 34rem;
  position: relative;
  margin-top: 4rem;
  border: .55rem solid #171b21;
  border-top-width: 1.2rem;
  border-radius: 13rem 13rem .25rem .25rem;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 2px, transparent 2px 38px),
    linear-gradient(90deg, #15100d, #271a14 48%, #120d0b 52%, #221711);
  box-shadow:
    0 0 0 1px rgba(210,170,98,.16),
    0 2rem 4rem rgba(0,0,0,.6),
    inset 0 0 5rem rgba(0,0,0,.82);
}

.entrance-door::before {
  content: "";
  position: absolute;
  inset: 2.2rem;
  border: 1px solid rgba(210,170,98,.22);
  border-radius: 10rem 10rem 0 0;
  box-shadow: inset 0 0 0 .5rem rgba(0,0,0,.2);
}

.door-panel {
  position: absolute;
  left: 13%;
  right: 13%;
  border: 1px solid rgba(210,170,98,.12);
  box-shadow: inset 0 0 2rem rgba(0,0,0,.34);
}

.door-panel-a { top: 31%; height: 19%; }
.door-panel-b { top: 57%; height: 25%; }

.door-handle {
  width: .75rem;
  height: .75rem;
  position: absolute;
  right: 13%;
  top: 54%;
  border-radius: 50%;
  background: #b78c43;
  box-shadow: 0 0 0 .35rem #362a1a, 0 0 1.5rem rgba(210,170,98,.25);
}

.door-light {
  position: absolute;
  inset: 1rem;
  border-radius: 12rem 12rem 0 0;
  box-shadow: inset 0 0 6rem rgba(142,182,198,.1);
}

.entrance-vault {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.vault-column {
  width: clamp(5rem, 9vw, 10rem);
  position: absolute;
  top: 10rem;
  bottom: 0;
  opacity: .48;
  border-inline: 1px solid rgba(255,255,255,.05);
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 5.8rem),
    linear-gradient(90deg, #080a0d, #181c22 50%, #08090c);
}

.vault-column-left { left: -2rem; }
.vault-column-right { right: -2rem; }

.vault-arch {
  width: min(72vw, 76rem);
  height: min(62vw, 58rem);
  position: absolute;
  right: -12rem;
  top: 3rem;
  border: 1px solid rgba(255,255,255,.06);
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
  box-shadow:
    0 0 0 2.6rem rgba(255,255,255,.012),
    0 0 0 5.2rem rgba(255,255,255,.008),
    inset 0 0 8rem rgba(0,0,0,.3);
}

.vault-window {
  width: 10rem;
  height: 20rem;
  position: absolute;
  right: 12%;
  top: 16%;
  overflow: hidden;
  opacity: .45;
  border: 1px solid rgba(142,182,198,.28);
  border-radius: 5rem 5rem 0 0;
  background:
    linear-gradient(90deg, transparent 48%, rgba(16,22,29,.9) 49% 51%, transparent 52%),
    linear-gradient(0deg, transparent 48%, rgba(16,22,29,.9) 49% 51%, transparent 52%),
    radial-gradient(circle at 45% 22%, #9bb8c4, #273949 44%, #0b1018 70%);
  box-shadow: 0 0 4rem rgba(142,182,198,.12);
}

.vault-window::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(140deg, transparent 0 43%, rgba(188,213,222,.45) 44% 45%, transparent 46%),
    linear-gradient(35deg, transparent 0 62%, rgba(188,213,222,.32) 63% 64%, transparent 65%);
}

.vault-candle {
  width: .35rem;
  height: 3.2rem;
  position: absolute;
  border-radius: .2rem;
  background: #d3c6a3;
  box-shadow: 0 0 1.2rem rgba(235,178,93,.35);
}

.vault-candle::before {
  content: "";
  width: .7rem;
  height: 1rem;
  position: absolute;
  left: 50%;
  top: -.85rem;
  transform: translateX(-50%);
  border-radius: 60% 40% 55% 45%;
  background: #e9b35e;
  filter: blur(.2px);
  box-shadow: 0 0 1.5rem .4rem rgba(233,179,94,.26);
}

.vault-candle-one { right: 8%; top: 69%; }
.vault-candle-two { right: 18%; top: 75%; height: 2.4rem; }
.vault-candle-three { right: 31%; top: 67%; height: 4rem; }

.descend-cue {
  position: absolute;
  left: 50%;
  bottom: 1.7rem;
  z-index: 5;
  transform: translateX(-50%);
  color: var(--muted);
  text-decoration: none;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.descend-cue:hover { color: var(--accent); }

/* Kai and Luna */
.pet-sighting {
  position: absolute;
  z-index: 8;
  transition: left .25s ease, right .25s ease, top .25s ease, bottom .25s ease;
}

.pet-sighting p {
  display: grid;
  gap: .1rem;
  margin: .45rem 0 0;
  color: var(--ink);
  font-size: .73rem;
  line-height: 1.2;
  text-align: center;
}

.pet-sighting p strong {
  font-family: var(--mortis-gothic);
  font-size: 1.45rem;
  line-height: .85;
}

.pet-sighting p span {
  color: var(--muted);
  font-size: .56rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.kai-sighting[data-position="0"] { left: 3%; bottom: 3%; }
.kai-sighting[data-position="1"] { right: 2%; bottom: 8%; }
.kai-sighting[data-position="2"] { left: 10%; top: 68%; }
.kai-sighting[data-position="3"] { right: 12%; top: 71%; }

.kai-derg {
  width: 6.4rem;
  height: 4.6rem;
  position: relative;
  margin: 0 auto;
}

.kai-body {
  width: 3.5rem;
  height: 2.6rem;
  position: absolute;
  left: 1.45rem;
  bottom: .75rem;
  border-radius: 53% 47% 55% 45%;
  background: linear-gradient(145deg, #667f78, #34453f 70%);
  box-shadow: inset -.45rem -.4rem .8rem rgba(0,0,0,.28), 0 .7rem 1rem rgba(0,0,0,.3);
}

.kai-head {
  width: 2.55rem;
  height: 2.3rem;
  position: absolute;
  left: 0;
  bottom: 1.55rem;
  z-index: 3;
  border-radius: 58% 45% 53% 43%;
  background: #587068;
  transform: rotate(-7deg);
}

.kai-head::before,
.kai-head::after {
  content: "";
  width: .65rem;
  height: .8rem;
  position: absolute;
  top: -.45rem;
  background: #3a4a45;
  clip-path: polygon(50% 0, 100% 100%, 0 82%);
}

.kai-head::before { left: .25rem; transform: rotate(-18deg); }
.kai-head::after { right: .25rem; transform: rotate(19deg); }

.kai-head i,
.kai-head b {
  width: .45rem;
  height: .5rem;
  position: absolute;
  top: .72rem;
  border-radius: 50%;
  background: #d7bf65;
  box-shadow: 0 0 .5rem rgba(215,191,101,.55);
}

.kai-head i { left: .5rem; }
.kai-head b { right: .55rem; }

.kai-head i::after,
.kai-head b::after {
  content: "";
  width: .12rem;
  height: .34rem;
  position: absolute;
  left: 50%;
  top: .08rem;
  transform: translateX(-50%);
  border-radius: 99px;
  background: #151915;
}

.kai-wing {
  width: 2.4rem;
  height: 2.3rem;
  position: absolute;
  z-index: 2;
  top: .5rem;
  background: linear-gradient(145deg, #506961, #283732);
  clip-path: polygon(0 100%, 14% 12%, 47% 57%, 75% 0, 100% 100%);
}

.kai-wing-left { left: 1.45rem; transform: rotate(-17deg); }
.kai-wing-right { right: .6rem; transform: scaleX(-1) rotate(-17deg); }

.kai-tail {
  width: 3.8rem;
  height: 1.15rem;
  position: absolute;
  right: -.55rem;
  bottom: 1rem;
  border-bottom: .62rem solid #3b5049;
  border-radius: 0 0 100% 0;
  transform: rotate(10deg);
}

.kai-foot {
  width: .8rem;
  height: .5rem;
  position: absolute;
  bottom: .42rem;
  z-index: 4;
  border-radius: 50%;
  background: #31433d;
}

.kai-foot-left { left: 2rem; }
.kai-foot-right { left: 4.05rem; }

.luna-sighting {
  min-width: 6rem;
  padding: .8rem 1rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(4,5,8,.82), rgba(4,5,8,0) 70%);
}

.luna-sighting[data-position="0"] { right: 0; top: 18%; }
.luna-sighting[data-position="1"] { left: 2%; top: 21%; }
.luna-sighting[data-position="2"] { right: 3%; bottom: 25%; }
.luna-sighting[data-position="3"] { left: 4%; bottom: 28%; }

.luna-eyes {
  display: flex;
  justify-content: center;
  gap: .7rem;
  opacity: .88;
}

.luna-eyes span {
  width: .55rem;
  height: .4rem;
  border-radius: 60% 40% 60% 40%;
  background: #c5a75b;
  box-shadow: 0 0 .9rem rgba(197,167,91,.65);
}

/* Grand Hall */
.grand-hall,
.house-lore,
.dream-window-section,
.house-notes,
.exit-experiment {
  width: min(100%, 112rem);
  margin: 0 auto;
  padding: clamp(5rem, 10vw, 10rem) clamp(1rem, 4vw, 4.5rem);
  border-bottom: 1px solid var(--line);
}

.grand-hall {
  position: relative;
  background:
    radial-gradient(circle at 50% -12%, rgba(210,170,98,.07), transparent 30rem),
    linear-gradient(180deg, rgba(255,255,255,.012), transparent 12rem);
}

.grand-hall::before {
  content: "";
  position: absolute;
  inset: 1.2rem 1rem auto;
  height: .45rem;
  opacity: .4;
  background: repeating-linear-gradient(90deg, transparent 0 2rem, rgba(210,170,98,.32) 2rem 2.05rem, transparent 2.05rem 4rem);
}

.hall-heading,
.house-lore-heading,
.house-notes-heading {
  display: grid;
  grid-template-columns: minmax(15rem, .4fr) minmax(0, 1fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
}

.hall-heading .kicker,
.house-lore-heading .kicker,
.house-notes-heading .kicker {
  grid-column: 1 / -1;
  margin-bottom: -1rem;
}

.hall-heading h2,
.house-lore-heading h2,
.house-notes-heading h2,
.dream-window-heading h2,
.exit-copy h2 {
  margin: 0;
  font-family: var(--mortis-gothic);
  font-weight: 700;
  line-height: .78;
  letter-spacing: -.015em;
}

.hall-heading h2,
.house-lore-heading h2,
.house-notes-heading h2 {
  max-width: 8ch;
  font-size: clamp(4rem, 8vw, 8rem);
}

.hall-heading > p:last-child {
  max-width: 42ch;
  margin: 0;
  color: #c9c5be;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 2vw, 1.85rem);
  line-height: 1.45;
}

.wing-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: clamp(1rem, 2.5vw, 2rem);
}

.wing-door {
  min-height: 31rem;
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: end;
  padding: clamp(1.4rem, 3vw, 2.6rem);
  border: 1px solid rgba(210,170,98,.18);
  background:
    linear-gradient(180deg, transparent, rgba(5,6,9,.94)),
    linear-gradient(145deg, #171b22, #090b10);
  color: var(--ink);
  text-decoration: none;
  box-shadow: inset 0 0 4rem rgba(0,0,0,.3);
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}

.wing-door::before {
  content: "";
  position: absolute;
  left: 9%;
  right: 9%;
  top: 8%;
  height: 56%;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 11rem 11rem .15rem .15rem;
  background:
    linear-gradient(90deg, transparent 49%, rgba(210,170,98,.09) 49.5% 50.5%, transparent 51%),
    radial-gradient(circle at 50% 18%, rgba(142,182,198,.08), transparent 32%),
    #090b10;
  box-shadow: inset 0 0 3rem rgba(0,0,0,.65);
}

.wing-door::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(125deg, rgba(255,255,255,.025), transparent 38%);
}

.wing-door:hover {
  transform: translateY(-.35rem);
  border-color: rgba(210,170,98,.55);
}

.wing-open::before {
  box-shadow: inset 0 0 4rem rgba(142,182,198,.12), 0 0 3rem rgba(142,182,198,.05);
}

.wing-locked {
  cursor: not-allowed;
}

.wing-locked::before {
  opacity: .55;
  background:
    repeating-linear-gradient(115deg, transparent 0 2.8rem, rgba(210,170,98,.08) 2.85rem 2.95rem, transparent 3rem 5.8rem),
    #090b10;
}

.wing-state,
.wing-year,
.wing-door strong,
.wing-door p,
.wing-action {
  position: relative;
  z-index: 2;
}

.wing-state {
  color: var(--accent);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.wing-year {
  position: absolute;
  right: .02em;
  top: -.05em;
  z-index: 1;
  color: rgba(243,239,231,.035);
  font-family: var(--mortis-gothic);
  font-size: clamp(8rem, 15vw, 15rem);
  line-height: 1;
}

.wing-door strong {
  margin-top: .7rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.6rem, 2.5vw, 2.5rem);
  font-weight: 400;
  line-height: 1.05;
}

.wing-door p {
  max-width: 35ch;
  margin: .85rem 0 1.2rem;
  color: var(--muted);
  line-height: 1.6;
}

.wing-action {
  color: var(--ink);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.wing-action b { color: var(--accent); }

.hall-corridors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border: 1px solid var(--line);
  background: var(--line);
}

.corridor {
  min-height: 14rem;
  padding: clamp(1.3rem, 2.5vw, 2.2rem);
  background: #090b10;
}

.corridor > span {
  color: var(--accent);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.corridor strong {
  display: block;
  margin-top: .75rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.55rem;
  font-weight: 400;
}

.corridor p {
  max-width: 35ch;
  margin: .75rem 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.corridor-private {
  background: linear-gradient(145deg, #10090a, #090b10 65%);
}

.corridor-private > span { color: #bb7778; }
.corridor-breach { background: radial-gradient(circle at 100% 0, rgba(142,182,198,.11), transparent 15rem), #090b10; }

/* Lore */
.house-lore-heading {
  grid-template-columns: 1fr;
}

.house-lore-heading h2 {
  max-width: 12ch;
}

.lore-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
}

.lore-card {
  min-height: 31rem;
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: end;
  padding: clamp(1.5rem, 3vw, 2.7rem);
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 85% 8%, rgba(210,170,98,.08), transparent 18rem),
    linear-gradient(155deg, #11151d, #07090d);
}

.lore-card::before {
  content: "";
  position: absolute;
  left: -30%;
  right: -30%;
  top: 12%;
  height: 40%;
  opacity: .4;
  border: 1px solid rgba(255,255,255,.045);
  border-radius: 50%;
}

.lore-number {
  position: absolute;
  right: .1em;
  top: -.25em;
  margin: 0;
  color: rgba(243,239,231,.035);
  font-family: var(--mortis-gothic);
  font-size: 13rem;
  line-height: 1;
}

.lore-card h3,
.lore-card > p:not(.lore-number) {
  position: relative;
  z-index: 2;
}

.lore-card h3 {
  margin: 0;
  font-family: var(--mortis-gothic);
  font-size: clamp(2.8rem, 4vw, 4.5rem);
  font-weight: 700;
  line-height: .86;
}

.lore-card > p:not(.lore-number) {
  margin: 1.25rem 0 0;
  color: #c9c5be;
  line-height: 1.7;
}

.lore-card .lore-aside {
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  color: var(--muted) !important;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
}

.lore-mortis {
  background:
    radial-gradient(circle at 82% 10%, rgba(110,41,43,.22), transparent 16rem),
    linear-gradient(155deg, #171016, #07090d);
}

.lore-phobos {
  background:
    radial-gradient(circle at 82% 10%, rgba(210,170,98,.14), transparent 16rem),
    linear-gradient(155deg, #17140e, #07090d);
}

.lore-leak {
  background:
    radial-gradient(circle at 78% 8%, rgba(142,182,198,.2), transparent 16rem),
    linear-gradient(155deg, #0c1620, #07090d);
}

/* Dream windows */
.dream-window-section {
  position: relative;
}

.dream-window-heading {
  display: grid;
  grid-template-columns: minmax(18rem, .55fr) minmax(0, .45fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
}

.dream-window-heading h2 {
  max-width: 11ch;
  font-size: clamp(3.8rem, 7vw, 7.2rem);
}

.dream-window-heading > p {
  max-width: 42ch;
  margin: 0;
  color: #c9c5be;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.2rem, 2vw, 1.75rem);
  line-height: 1.5;
}

.dream-window-grid {
  display: grid;
  grid-template-columns: 1.35fr .82fr .82fr;
  gap: clamp(1rem, 2vw, 1.6rem);
  align-items: stretch;
}

.dream-window {
  min-width: 0;
  display: block;
  color: var(--ink);
  text-decoration: none;
}

.dream-window figure {
  height: 100%;
  margin: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(210,170,98,.2);
  background: #03050a;
  box-shadow: inset 0 0 4rem rgba(0,0,0,.5), 0 2rem 4rem rgba(0,0,0,.2);
}

.dream-window figure::before {
  content: "";
  position: absolute;
  inset: .7rem;
  z-index: 2;
  border: 1px solid rgba(210,170,98,.25);
  pointer-events: none;
  box-shadow: inset 0 0 0 .4rem rgba(5,6,9,.5);
}

.dream-window img {
  width: 100%;
  height: 30rem;
  display: block;
  object-fit: contain;
  padding: 1.5rem;
  background:
    radial-gradient(circle at 50% 45%, rgba(142,182,198,.08), transparent 20rem),
    #03050a;
  transition: transform .3s ease;
}

.dream-window:hover img { transform: scale(1.018); }

.dream-window figcaption {
  position: relative;
  z-index: 3;
  display: grid;
  gap: .2rem;
  padding: 1.2rem 1.4rem 1.4rem;
  border-top: 1px solid rgba(210,170,98,.15);
  background: #090b10;
}

.dream-window figcaption span {
  color: var(--accent);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.dream-window figcaption strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
  font-weight: 400;
}

/* Notes */
.house-notes {
  position: relative;
  background:
    radial-gradient(circle at 85% 25%, rgba(210,170,98,.055), transparent 20rem),
    linear-gradient(180deg, transparent, rgba(255,255,255,.01));
}

.note-board {
  display: grid;
  grid-template-columns: 1.08fr .95fr .9fr;
  gap: clamp(1rem, 3vw, 2.4rem);
  align-items: start;
}

.phobos-note {
  position: relative;
  min-height: 18rem;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  box-shadow: 0 2rem 3rem rgba(0,0,0,.28);
}

.phobos-note > span {
  display: block;
  margin-bottom: 1.2rem;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.phobos-note p {
  margin: 0;
  font-size: clamp(1.2rem, 2vw, 1.65rem);
  line-height: 1.45;
}

.phobos-note strong {
  display: block;
  margin-top: 1.4rem;
}

.handwritten-note {
  transform: rotate(-1.1deg);
  border: 1px solid #9c8c70;
  background: #d8cdb7;
  color: #29231d;
  font-family: Georgia, "Times New Roman", serif;
}

.handwritten-note strong {
  font-family: var(--mortis-gothic);
  font-size: 2rem;
}

.typed-note {
  margin-top: 2.2rem;
  transform: rotate(.8deg);
  border: 1px solid #8d897c;
  background: #c7c4b7;
  color: #1f201d;
  font-family: "Courier New", monospace;
}

.typed-note p {
  font-size: 1.1rem;
  line-height: 1.62;
}

.note-warning {
  margin-top: 4.5rem;
  transform: rotate(1.5deg);
  background: #c8bca8;
}

/* Exit experiment */
.exit-experiment {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(24rem, .7fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: center;
}

.exit-copy h2 {
  max-width: 9ch;
  margin-top: .5rem;
  font-size: clamp(4rem, 7vw, 7rem);
}

.exit-copy > p:not(.kicker) {
  max-width: 60ch;
  color: #c9c5be;
  line-height: 1.75;
}

.exit-diagram {
  min-height: 28rem;
  position: relative;
  display: grid;
  place-items: center;
  border: 1px solid rgba(210,170,98,.14);
  background:
    radial-gradient(circle, rgba(142,182,198,.08), transparent 35%),
    #07090d;
}

.diagram-house,
.diagram-reality,
.diagram-question {
  position: absolute;
  font-family: Georgia, "Times New Roman", serif;
}

.diagram-house {
  left: 8%;
  color: var(--ink);
}

.diagram-reality {
  right: 6%;
  max-width: 7rem;
  color: var(--muted);
  font-size: .82rem;
  text-align: center;
}

.diagram-line {
  width: 62%;
  height: 1px;
  position: absolute;
  background: linear-gradient(90deg, var(--accent), transparent 47%, transparent 53%, var(--mansion-blue));
}

.diagram-rift {
  width: 6rem;
  height: 13rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid rgba(142,182,198,.38);
  border-radius: 50%;
  background:
    linear-gradient(120deg, transparent 0 42%, rgba(190,219,232,.7) 43% 44%, transparent 45%),
    radial-gradient(ellipse, rgba(142,182,198,.28), rgba(7,9,13,.6) 55%, #07090d 75%);
  box-shadow: 0 0 3rem rgba(142,182,198,.12);
}

.diagram-question {
  z-index: 2;
  color: var(--accent);
  font-size: 3rem;
}

/* Final and footer */
.mansion-final {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(210,170,98,.1), transparent 30rem),
    linear-gradient(180deg, #080a0e, #050609);
}

.mansion-final::before {
  content: "M";
  position: absolute;
  right: -.05em;
  bottom: -.28em;
  color: rgba(243,239,231,.025);
  font-family: var(--mortis-gothic);
  font-size: min(50vw, 38rem);
  line-height: 1;
}

.mansion-final > * {
  position: relative;
  z-index: 2;
}

.mansion-final > p:not(.kicker) {
  max-width: 35ch;
  margin-inline: auto;
  color: var(--muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
}

.mansion-footer {
  background: #050609;
}

.mortis-footer-mark {
  font-family: var(--mortis-gothic);
  font-size: 2.2rem;
  color: var(--ink);
}

/* Motion, accessibility and responsive behaviour */
@media (max-width: 1050px) {
  .guest-grid,
  .exit-experiment {
    grid-template-columns: 1fr;
  }

  .entrance-scene {
    min-height: 44rem;
  }

  .wing-grid,
  .lore-grid {
    grid-template-columns: 1fr;
  }

  .wing-door {
    min-height: 25rem;
  }

  .wing-year {
    font-size: 11rem;
  }

  .dream-window-grid {
    grid-template-columns: 1fr 1fr;
  }

  .dream-window-wide {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  .hall-heading,
  .dream-window-heading {
    grid-template-columns: 1fr;
  }

  .hall-corridors,
  .note-board {
    grid-template-columns: 1fr;
  }

  .typed-note,
  .note-warning {
    margin-top: 0;
  }

  .vault-window,
  .vault-candle {
    opacity: .55;
  }
}

@media (max-width: 680px) {
  .mortis-wordmark small,
  .mansion-nav .home-nav-links a:not(.home-nav-cta) {
    display: none;
  }

  .guest-grid {
    padding-top: 3rem;
  }

  .guest-copy h1 {
    font-size: clamp(4.6rem, 24vw, 7.3rem);
  }

  .guest-declaration {
    font-size: 1.4rem;
  }

  .phobos-letter {
    margin-left: 0;
    transform: rotate(-.45deg);
  }

  .entrance-scene {
    min-height: 36rem;
  }

  .entrance-door {
    min-height: 29rem;
    width: 72%;
  }

  .pet-sighting p span {
    display: none;
  }

  .dream-window-grid {
    grid-template-columns: 1fr;
  }

  .dream-window-wide {
    grid-column: auto;
  }

  .dream-window img {
    height: 24rem;
  }

  .exit-diagram {
    min-height: 20rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pet-sighting,
  .wing-door,
  .dream-window img { transition: none; }
}

@media (prefers-contrast: more) {
  .guest-entrance,
  .wing-door,
  .lore-card,
  .corridor,
  .exit-diagram,
  .mansion-final {
    background: var(--ground);
  }

  .vault-window,
  .vault-candle,
  .entrance-vault {
    display: none;
  }
}

@media (forced-colors: active) {
  .entrance-vault,
  .entrance-door,
  .kai-derg,
  .luna-eyes,
  .diagram-rift {
    display: none;
  }

  .phobos-letter,
  .phobos-note {
    transform: none;
    border: 1px solid CanvasText;
  }
}