:root {
  --ink: #f7efe2;
  --muted: #c8b7a6;
  --night: #08060a;
  --night-2: #12080d;
  --wine: #6a1027;
  --wine-bright: #a61c3e;
  --blood: #8f0d2c;
  --brass: #d2a24c;
  --brass-pale: #f0d790;
  --blue: #496f91;
  --panel: rgba(18, 10, 15, .84);
  --panel-strong: rgba(10, 7, 10, .94);
  --border: rgba(222, 184, 108, .32);
  --shadow: 0 24px 70px rgba(0, 0, 0, .55);
  --radius: 24px;
  --content: 1120px;
  --header-h: 66px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--night); }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 0%, rgba(91, 19, 43, .28), transparent 38rem),
    var(--night);
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body:not(.has-entered) { overflow: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
a { color: inherit; }
img { display: block; max-width: 100%; }

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 10px;
  transform: translateY(-160%);
  padding: .8rem 1rem;
  border-radius: 999px;
  color: #16070c;
  background: var(--brass-pale);
  font-family: system-ui, sans-serif;
  font-weight: 800;
}
.skip-link:focus { transform: translateY(0); }

.ambient { pointer-events: none; position: fixed; inset: 0; z-index: 30; }
.ambient--grain {
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
.ambient--fog {
  z-index: 15;
  width: 160vw;
  left: -30vw;
  background:
    radial-gradient(ellipse at 15% 60%, rgba(190, 201, 213, .15), transparent 25%),
    radial-gradient(ellipse at 50% 45%, rgba(190, 201, 213, .08), transparent 28%),
    radial-gradient(ellipse at 85% 70%, rgba(190, 201, 213, .12), transparent 24%);
  filter: blur(14px);
  opacity: .42;
  animation: fogDrift 24s linear infinite alternate;
}
.ambient--fog-two { opacity: .22; animation-duration: 38s; animation-direction: alternate-reverse; transform: scaleY(.65); }

.page-progress {
  position: fixed;
  z-index: 120;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255,255,255,.05);
}
.page-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--wine-bright), var(--brass));
  box-shadow: 0 0 14px rgba(210,162,76,.65);
}

.entrance {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 21%, rgba(111, 150, 184, .3), transparent 22%),
    linear-gradient(#07070b 0 58%, #10080d 58% 100%);
  transition: opacity .5s ease, visibility 0s linear .5s;
}
.entrance::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, transparent 49.2%, rgba(232,198,124,.06) 49.5% 50.5%, transparent 50.8%),
    radial-gradient(ellipse at 50% 100%, rgba(107, 16, 39, .28), transparent 42%);
}
.entrance__moon {
  position: absolute;
  top: 8svh;
  left: 50%;
  width: min(54vw, 290px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #f5edc9 0 8%, #d7d5bf 44%, #9daabd 70%, #6a7890 100%);
  box-shadow: 0 0 58px rgba(167,194,219,.35);
  opacity: .36;
}
.entrance__william {
  position: absolute;
  z-index: -1;
  bottom: -4svh;
  left: 50%;
  width: min(88vw, 620px);
  transform: translateX(-50%);
  filter: brightness(.14) saturate(.7);
  opacity: .8;
}
.entrance__william { aspect-ratio: 1 / 1; }
.entrance__william img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.entrance__content {
  position: relative;
  z-index: 8;
  width: min(92vw, 650px);
  margin-top: 12svh;
  padding: 1.5rem 1rem calc(1.5rem + var(--safe-bottom));
  text-align: center;
  text-shadow: 0 4px 24px #000;
}
.entrance h1 {
  margin: .55rem 0 .7rem;
  font-size: clamp(2.65rem, 13vw, 5.4rem);
  line-height: .9;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.entrance h1 span { color: var(--brass-pale); font-size: .58em; letter-spacing: -.02em; }
.entrance__content > p:not(.eyebrow):not(.entrance__sound-note) { margin: 0 0 1.25rem; font-size: 1.12rem; color: #e4d7c6; }
.entrance__sound-note { margin: .75rem 0 0; color: #ac9a8d; font-family: system-ui, sans-serif; font-size: .72rem; }

.door {
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  width: 52%;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(0,0,0,.65), transparent 15% 85%, rgba(0,0,0,.7)),
    repeating-linear-gradient(90deg, #2a1218 0 12%, #35171f 12% 24%);
  box-shadow: inset 0 0 60px #000;
  transition: transform 1.35s cubic-bezier(.75,0,.2,1);
}
.door::before, .door::after {
  content: '';
  position: absolute;
  inset: 5% 11%;
  border: 2px solid rgba(178,125,63,.3);
  box-shadow: inset 0 0 0 8px rgba(0,0,0,.16), inset 0 0 30px #10070a;
}
.door::after { inset: 56% 11% 6%; }
.door span {
  position: absolute;
  width: 22px;
  height: 22px;
  top: 50%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f0d898, #9f6a26 50%, #3f260c 100%);
  box-shadow: 0 0 0 5px rgba(126,81,30,.25), 0 4px 10px #000;
}
.door--left { left: 0; border-right: 5px solid #080306; }
.door--right { right: 0; border-left: 5px solid #080306; }
.door--left span { right: 10%; }
.door--right span { left: 10%; }
.entrance.is-opening .door--left { transform: translateX(-101%); }
.entrance.is-opening .door--right { transform: translateX(101%); }
.entrance.is-opening .entrance__content { animation: fadeBack .72s ease forwards; }
.entrance.is-opening .entrance__william { animation: williamReveal 1.2s ease forwards; }
.entrance.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }

.site-header {
  position: fixed;
  z-index: 110;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) .75rem 0;
  border-bottom: 1px solid rgba(210,162,76,.16);
  background: linear-gradient(180deg, rgba(8,6,10,.94), rgba(8,6,10,.7));
  backdrop-filter: blur(14px);
  transform: translateY(-110%);
  transition: transform .6s ease;
}
body.has-entered .site-header { transform: translateY(0); }
.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; min-width: 0; }
.brand img { width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.42)); }
.brand span { display: grid; line-height: 1.05; min-width: 0; }
.brand strong { font-size: .98rem; letter-spacing: .02em; }
.brand small { color: var(--muted); font-family: system-ui, sans-serif; font-size: .62rem; text-transform: uppercase; letter-spacing: .12em; margin-top: .22rem; }
.header-actions { display: flex; align-items: center; gap: .5rem; }
.header-call {
  padding: .58rem .8rem;
  border: 1px solid rgba(210,162,76,.4);
  border-radius: 999px;
  text-decoration: none;
  color: var(--brass-pale);
  font-family: system-ui, sans-serif;
  font-size: .75rem;
  font-weight: 800;
  white-space: nowrap;
}
.icon-button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(210,162,76,.35);
  border-radius: 50%;
  color: var(--brass-pale);
  background: rgba(32,13,21,.78);
  cursor: pointer;
}
.icon-button .sound-off { display: none; font-family: system-ui, sans-serif; font-size: 1.2rem; }
.icon-button[aria-pressed="false"] .sound-on { display: none; }
.icon-button[aria-pressed="false"] .sound-off { display: inline; }

main { position: relative; z-index: 10; }
.scene { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; }
.eyebrow {
  margin: 0;
  color: var(--brass-pale);
  font-family: system-ui, sans-serif;
  font-size: .69rem;
  font-weight: 850;
  letter-spacing: .19em;
  line-height: 1.4;
  text-transform: uppercase;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: .8rem 1.05rem;
  border: 1px solid transparent;
  border-radius: 999px;
  text-decoration: none;
  font-family: system-ui, sans-serif;
  font-size: .9rem;
  font-weight: 850;
  text-align: center;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.button:active { transform: scale(.97); }
.button--primary {
  color: #17080c;
  background: linear-gradient(135deg, var(--brass-pale), var(--brass));
  box-shadow: 0 10px 30px rgba(210,162,76,.22), inset 0 1px rgba(255,255,255,.5);
}
.button--ghost { border-color: rgba(240,215,144,.42); background: rgba(17,9,13,.55); color: var(--ink); }
.button--enter { min-width: min(82vw, 330px); }

.hero {
  display: grid;
  align-content: start;
  padding: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 2.3rem) 1rem 5rem;
  background:
    radial-gradient(circle at 75% 15%, rgba(93,130,160,.25), transparent 30%),
    linear-gradient(180deg, #08080e 0%, #14111a 44%, #160b12 72%, #0a070a 100%);
}
.hero::before {
  content: '';
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: 46%;
  opacity: .8;
  background:
    linear-gradient(153deg, transparent 0 12%, #0a070a 12% 15%, transparent 15% 26%, #0a070a 26% 30%, transparent 30%),
    linear-gradient(207deg, transparent 0 15%, #0a070a 15% 18%, transparent 18% 29%, #0a070a 29% 32%, transparent 32%),
    linear-gradient(#0a070a, #070608);
  clip-path: polygon(0 45%, 8% 36%, 18% 46%, 30% 22%, 42% 43%, 56% 30%, 67% 46%, 79% 17%, 91% 40%, 100% 31%, 100% 100%, 0 100%);
}
.hero__sky { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.moon {
  position: absolute;
  top: 43%;
  right: -28vw;
  width: min(58vw, 390px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: .38;
  background: radial-gradient(circle at 35% 35%, #fff7d2 0 8%, #d9d7c1 42%, #9fb0c2 72%, #67778c 100%);
  box-shadow: 0 0 80px rgba(155,188,215,.24);
}
.bat { position: absolute; width: 28px; height: 12px; opacity: .5; animation: batFly 9s ease-in-out infinite; }
.bat::before, .bat::after { content: ''; position: absolute; top: 0; width: 17px; height: 10px; background: #020204; }
.bat::before { right: 50%; border-radius: 80% 15% 10% 80%; transform: rotate(18deg); }
.bat::after { left: 50%; border-radius: 15% 80% 80% 10%; transform: rotate(-18deg); }
.bat--one { top: 22%; left: 15%; }
.bat--two { top: 34%; left: 59%; animation-delay: -3s; transform: scale(.7); }
.bat--three { top: 14%; left: 49%; animation-delay: -6s; transform: scale(.45); }

.hero__content { position: relative; z-index: 2; width: min(100%, 620px); margin: 0 auto; text-align: center; }
.hero h2, .room h2, .oracle h2, .finale h2 {
  margin: .55rem 0 .85rem;
  font-size: clamp(2.25rem, 10.5vw, 4.7rem);
  line-height: .96;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.hero__lead { margin: 0 auto; max-width: 40rem; color: #d3c6bc; font-size: 1.03rem; }
.hero__actions { display: grid; gap: .7rem; margin: 1.25rem auto 0; width: min(100%, 420px); }
.hero__portrait { position: relative; z-index: 1; width: min(100%, 600px); margin: 1.5rem auto 0; }
.portrait-frame {
  position: relative;
  width: min(92vw, 560px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(233,198,117,.3);
  border-radius: 48% 48% 28px 28px;
  background:
    radial-gradient(circle at 50% 35%, rgba(153,47,63,.32), transparent 31%),
    linear-gradient(#100c12, #1f0b13 65%, #090609);
  box-shadow: var(--shadow), inset 0 0 70px #000;
}
.portrait-frame::before {
  content: '';
  position: absolute;
  inset: 10px;
  z-index: 2;
  border: 1px solid rgba(210,162,76,.3);
  border-radius: inherit;
  pointer-events: none;
}
.portrait-frame picture { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }
.portrait-frame img { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: contain; object-position: center bottom; animation: williamBreathe 7s ease-in-out infinite; transform-origin: 50% 85%; }
.portrait-glow { position: absolute; inset: 10% 8% 0; border-radius: 50%; background: radial-gradient(circle, rgba(150,29,49,.28), transparent 65%); filter: blur(20px); }
.speech {
  position: relative;
  z-index: 4;
  width: calc(100% - 1rem);
  margin: -1.2rem auto 0;
  padding: 1.05rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(12,8,11,.92);
  box-shadow: 0 18px 40px rgba(0,0,0,.42);
  text-align: left;
}
.speech p { margin: 0; color: #f1e6d9; font-size: .98rem; }
.speech p span { display: inline-block; margin-top: .12rem; }
.speech cite { display: block; margin-top: .35rem; color: var(--muted); font-family: system-ui, sans-serif; font-size: .68rem; font-style: normal; text-transform: uppercase; letter-spacing: .1em; }
.scroll-cue { position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%); display: none; text-decoration: none; color: #b9aaa1; font-family: system-ui, sans-serif; font-size: .7rem; text-transform: uppercase; letter-spacing: .15em; }
.scroll-cue span { display: block; width: 1px; height: 30px; margin: 0 auto .45rem; background: linear-gradient(transparent, var(--brass)); animation: scrollPulse 2s infinite; }

.room {
  display: block;
  padding: calc(var(--header-h) + 1rem) 0 4rem;
  background: #0a080b;
}
.room::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 80%, rgba(112,20,42,.18), transparent 48%);
}
.room__architecture {
  position: relative;
  z-index: 0;
  width: 100%;
  height: clamp(360px, 62svh, 560px);
  overflow: hidden;
  pointer-events: none;
}
.room__architecture::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  z-index: 20;
  height: 30%;
  background: linear-gradient(transparent, rgba(8, 6, 9, .78));
  pointer-events: none;
}
.room__content {
  position: relative;
  z-index: 2;
  width: calc(100% - 2rem);
  max-width: 610px;
  margin: -2.8rem auto 0;
  padding: 1.3rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(24,13,19,.92), rgba(9,7,9,.9));
  box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.03);
  backdrop-filter: blur(8px);
}
.room__number { position: absolute; top: 1rem; right: 1rem; color: rgba(240,215,144,.52); font-family: system-ui, sans-serif; font-size: .65rem; letter-spacing: .13em; text-transform: uppercase; }
.room h2 { font-size: clamp(2rem, 9vw, 4rem); }
.room__content > p:not(.eyebrow):not(.william-line) { color: #cdbfb6; font-size: .98rem; }
.william-line {
  margin: 1rem 0 .75rem;
  padding: .75rem .9rem;
  border-left: 2px solid var(--brass);
  color: #efe3d3;
  background: linear-gradient(90deg, rgba(210,162,76,.1), transparent);
  font-style: italic;
}
.text-link { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; color: var(--brass-pale); font-family: system-ui, sans-serif; font-size: .84rem; font-weight: 800; }
.text-link span { transition: transform .2s ease; }
.text-link:hover span { transform: translateX(4px); }

.object {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 340px);
  min-height: 170px;
  margin: 1rem auto .8rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 16px 24px rgba(0,0,0,.5));
}
.object__hint {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: .32rem .62rem;
  border: 1px solid rgba(240,215,144,.28);
  border-radius: 999px;
  background: rgba(8,5,8,.78);
  color: #dcccae;
  font-family: system-ui, sans-serif;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  animation: hintGlow 2.2s ease-in-out infinite;
}

.room--library { background: linear-gradient(180deg, #130c10, #080608); }
.shelf { position: absolute; left: -8%; right: -8%; height: 26%; border-top: 10px solid #2f1a16; border-bottom: 14px solid #140b0a; background: repeating-linear-gradient(90deg, #30111b 0 4%, #5d2430 4% 7%, #1d2431 7% 10%, #5b3b1c 10% 13%, #201118 13% 17%); opacity: .5; filter: brightness(.7); }
.shelf--one { top: 14%; transform: perspective(500px) rotateX(-2deg); }
.shelf--two { bottom: 8%; }
.window { position: absolute; top: 10%; left: 50%; width: 45%; max-width: 270px; aspect-ratio: .58; transform: translateX(-50%); border: 15px solid #1f1213; border-radius: 48% 48% 4px 4px; background: radial-gradient(circle at 45% 28%, #dbe2d2 0 5%, #7896aa 28%, #243746 65%, #10131b 100%); box-shadow: 0 0 60px rgba(90,133,166,.22); opacity: .55; }
.window::before, .window::after { content: ''; position: absolute; background: #1d1113; }
.window::before { left: 50%; top: 0; bottom: 0; width: 6px; transform: translateX(-50%); }
.window::after { left: 0; right: 0; top: 50%; height: 6px; }
.candle { position: absolute; bottom: 18%; width: 14px; height: 90px; background: linear-gradient(90deg,#a28e70,#f3e1bc,#8d775d); opacity: .55; }
.candle--left { left: 8%; }
.candle--right { right: 8%; }
.candle i { position: absolute; left: 50%; top: -18px; width: 11px; height: 23px; transform: translateX(-50%); border-radius: 50% 50% 45% 45%; background: radial-gradient(circle at 50% 65%, #fff, #f9b73c 40%, #a81d0f 75%, transparent 76%); filter: drop-shadow(0 0 12px #e79a28); animation: candleFlicker .85s ease-in-out infinite alternate; }
.object--book { transform: rotate(-4deg); }
.object--book::before { content: ''; width: 200px; height: 125px; border-radius: 8px 13px 13px 8px; background: linear-gradient(90deg,#24070e 0 9%,#7f1832 10% 90%,#3a0a15 100%); border: 3px solid #bd8442; box-shadow: inset 0 0 0 6px #4a0b1b, inset 0 0 28px #1e050b, 7px 9px 0 #d9c69f; }
.book__spine { position: absolute; z-index: 2; color: #e3bc65; font-size: .75rem; letter-spacing: .18em; transform: rotate(-4deg); text-shadow: 0 1px #000; }
.book__pages { position: absolute; width: 192px; height: 10px; margin-top: 128px; border-radius: 0 0 6px 6px; background: repeating-linear-gradient(#e5d5b6 0 2px,#b9a781 2px 3px); transform: rotate(-4deg); }
.secret-seal { position: absolute; z-index: 30; pointer-events: auto; top: 23%; right: 7%; width: 24px; height: 24px; border: 1px solid rgba(240,215,144,.45); border-radius: 50%; color: rgba(240,215,144,.58); background: rgba(105,13,38,.45); box-shadow: 0 0 14px rgba(240,215,144,.2); opacity: .38; cursor: pointer; animation: secretGlint 5s ease-in-out infinite; }
.secret-seal span { font-size: .65rem; }
.secret-seal.is-found { opacity: 0; pointer-events: none; transform: scale(2); transition: .5s ease; }

.room--study { background: linear-gradient(180deg, #08090d, #171016 55%, #090709); }
.study-window { position: absolute; top: 8%; left: 50%; width: min(76vw,430px); height: 45%; transform: translateX(-50%); border: 18px solid #211416; border-radius: 50% 50% 5px 5px; background: linear-gradient(160deg,#29384a,#0d1118 55%,#050608); opacity: .7; overflow: hidden; }
.study-window::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(105deg, transparent 0 13px, rgba(212,231,244,.15) 14px 15px, transparent 16px 28px); animation: rainFall .55s linear infinite; }
.study-window span { position: absolute; top: 15%; left: 16%; width: 100px; height: 100px; border-radius: 50%; background: #bfcede; opacity: .32; box-shadow: 0 0 50px #a8c3dd; }
.desk { position: absolute; left: -10%; right: -10%; bottom: 0; height: 32%; background: linear-gradient(#2b1714,#130c0b); border-top: 16px solid #40231c; box-shadow: 0 -12px 40px rgba(0,0,0,.65); }
.clock { position: absolute; top: 17%; right: 8%; width: 80px; aspect-ratio: 1; border: 8px solid #3a2217; border-radius: 50%; background: #bca06e; opacity: .45; }
.clock::before, .clock::after { content: ''; position: absolute; left: 50%; top: 50%; width: 2px; height: 24px; background: #21120f; transform-origin: 50% 100%; }
.clock::before { transform: translate(-50%,-100%) rotate(10deg); }
.clock::after { height: 18px; transform: translate(-50%,-100%) rotate(120deg); }
.quill { position: absolute; bottom: 20%; left: 14%; width: 12px; height: 130px; background: linear-gradient(90deg,#8f7a5c,#e5d4b1,#705a42); transform: rotate(28deg); opacity: .5; }
.quill::before { content: ''; position: absolute; top: -20px; left: -22px; width: 50px; height: 100px; border-radius: 80% 10% 80% 10%; background: linear-gradient(135deg,#e5ddd0,#8a8278); clip-path: polygon(0 20%,100% 0,50% 100%); }
.object--document { min-height: 210px; }
.object--document::before { content: ''; position: absolute; width: 175px; height: 205px; border-radius: 4px; background: linear-gradient(135deg,#f1e7cf,#c8b993); box-shadow: inset 0 0 20px rgba(87,59,29,.2), 0 0 24px rgba(232,206,134,.22); transform: rotate(3deg); }
.document__title { position: absolute; z-index: 2; top: 35px; color: #3e251e; font-size: .83rem; font-weight: bold; }
.object--document i { position: relative; z-index: 2; display: block; width: 115px; height: 3px; margin: 8px; background: rgba(62,37,30,.34); }
.document__signature { position: absolute; z-index: 2; bottom: 40px; width: 110px; padding-top: 6px; border-top: 1px solid #533124; color: #713044; font-family: cursive; font-size: .68rem; text-align: center; animation: signatureGlow 2s ease-in-out infinite; }

.room--vault { background: radial-gradient(circle at 50% 38%,#202124,#0b0a0c 68%); }
.room--vault::before { content: ''; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(0deg,transparent 0 58px,rgba(255,255,255,.025) 59px 61px), repeating-linear-gradient(90deg,transparent 0 90px,rgba(255,255,255,.018) 91px 93px); }
.vault-door { position: absolute; top: 10%; left: 50%; width: min(88vw,470px); aspect-ratio: .85; transform: translateX(-50%); border: 22px solid #26272a; border-radius: 48% 48% 12px 12px; background: radial-gradient(circle,#3b3c3e,#161719 68%); box-shadow: inset 0 0 0 7px #0e0f10,inset 0 0 50px #000,0 0 50px #000; opacity: .65; }
.vault-door span { position: absolute; left: 50%; top: 51%; width: 110px; aspect-ratio: 1; transform: translate(-50%,-50%); border: 14px solid #8a6a35; border-radius: 50%; box-shadow: inset 0 0 0 5px #221b12; }
.vault-door span::before, .vault-door span::after { content: ''; position: absolute; left: 50%; top: 50%; width: 85px; height: 10px; background: #8a6a35; transform: translate(-50%,-50%) rotate(45deg); }
.vault-door span::after { transform: translate(-50%,-50%) rotate(-45deg); }
.portrait { position: absolute; top: 20%; width: 100px; height: 130px; border: 10px solid #5a3b20; background: linear-gradient(#302626,#0f0d0e); opacity: .45; }
.portrait--one { left: 4%; transform: rotate(-5deg); }
.portrait--two { right: 4%; transform: rotate(5deg); }
.portrait span::before, .portrait span::after { content: ''; position: absolute; top: 36%; width: 9px; height: 4px; border-radius: 50%; background: #d8c992; box-shadow: 0 0 8px #d8c992; animation: eyesShift 5s ease-in-out infinite; }
.portrait span::before { left: 31%; }
.portrait span::after { right: 31%; }
.ledger-stack { position: absolute; right: -2%; bottom: 10%; width: 140px; height: 75px; background: repeating-linear-gradient(0deg,#291019 0 14px,#b98c47 15px 17px,#171018 18px 25px); opacity: .45; transform: rotate(4deg); }
.object--key { min-height: 180px; transform: rotate(-15deg); }
.key__ring { position: absolute; left: 24%; width: 90px; height: 90px; border: 17px solid #b88d3f; border-radius: 50%; box-shadow: inset 0 0 0 4px #594019,0 0 16px rgba(210,162,76,.3); }
.key__shaft { position: absolute; left: 46%; width: 145px; height: 18px; border-radius: 8px; background: linear-gradient(#e0bd68,#7c5723); }
.key__teeth { position: absolute; left: 78%; width: 35px; height: 50px; border-right: 15px solid #9f742f; border-bottom: 15px solid #9f742f; box-shadow: 20px 12px 0 -2px #9f742f; }

.room--carriage { background: linear-gradient(180deg,#11131a,#161016 60%,#080709); }
.rain { position: absolute; inset: 0; opacity: .28; background: repeating-linear-gradient(105deg,transparent 0 17px,rgba(210,225,235,.14) 18px 19px,transparent 20px 34px); animation: rainFall .55s linear infinite; }
.garage-arch { position: absolute; left: 50%; bottom: 0; width: min(110vw,700px); height: 76%; transform: translateX(-50%); border: 26px solid #25191a; border-bottom: 0; border-radius: 50% 50% 0 0; background: radial-gradient(circle at 50% 20%,rgba(86,110,129,.22),transparent 45%),#08090c; box-shadow: inset 0 0 90px #000; opacity: .75; }
.car { position: absolute; left: 50%; bottom: 8%; width: min(86vw,560px); height: 180px; transform: translateX(-50%); border-radius: 45% 45% 18% 18%; background: linear-gradient(#2d3036,#08090a 70%); opacity: .58; box-shadow: 0 20px 40px #000; }
.car::before { content: ''; position: absolute; left: 18%; right: 18%; top: -70px; height: 95px; border-radius: 55% 55% 0 0; background: linear-gradient(#1e252d,#090b0e); border: 8px solid #141517; }
.car span, .car i { position: absolute; bottom: -25px; width: 70px; height: 70px; border: 15px solid #070708; border-radius: 50%; background: #26272a; }
.car span { left: 12%; }
.car i { right: 12%; }
.car b { position: absolute; left: 50%; bottom: 25px; width: 120px; height: 26px; transform: translateX(-50%); border-radius: 50%; background: #e8c78a; filter: blur(4px); box-shadow: 0 0 50px #e8c78a; opacity: .35; }
.object--bell { min-height: 180px; }
.bell__top { position: absolute; top: 34px; width: 30px; height: 20px; border-radius: 50% 50% 0 0; background: linear-gradient(#f1d084,#855c25); }
.bell__body { position: absolute; top: 49px; width: 150px; height: 95px; border-radius: 50% 50% 18% 18%; background: radial-gradient(circle at 40% 25%,#f4d887,#b58438 40%,#563a18 100%); box-shadow: inset 0 -15px 20px rgba(0,0,0,.25),0 0 20px rgba(210,162,76,.2); }
.bell__base { position: absolute; top: 134px; width: 190px; height: 24px; border-radius: 50%; background: linear-gradient(#d7ac59,#64431e); }

.oracle { display: grid; place-items: center; padding: calc(var(--header-h) + 3rem) 1rem 4rem; background: radial-gradient(circle at 50% 40%,rgba(93,36,105,.3),transparent 30%),linear-gradient(180deg,#09070c,#170b18 60%,#080609); }
.oracle::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 20% 30%,rgba(82,114,150,.12),transparent 20%),radial-gradient(circle at 80% 70%,rgba(154,34,70,.14),transparent 25%); }
.oracle__content { width: min(100%,650px); text-align: center; }
.oracle h2 { font-size: clamp(2.4rem, 11vw, 5rem); }
.oracle__content > p:not(.eyebrow) { color: #cdbfc8; }
.crystal-ball { position: relative; display: grid; place-items: center; width: min(86vw,370px); height: 340px; margin: .3rem auto 0; border: 0; background: transparent; cursor: pointer; }
.orb { position: absolute; top: 14px; width: 230px; aspect-ratio: 1; overflow: hidden; border: 3px solid rgba(223,199,241,.38); border-radius: 50%; background: radial-gradient(circle at 35% 25%,rgba(255,255,255,.85),rgba(137,83,170,.5) 16%,rgba(62,36,93,.8) 48%,rgba(20,12,30,.95) 75%); box-shadow: inset -30px -35px 50px rgba(0,0,0,.6),inset 15px 15px 35px rgba(222,207,244,.25),0 0 55px rgba(130,69,161,.35); animation: orbFloat 5s ease-in-out infinite; }
.orb::before, .orb::after { content: ''; position: absolute; inset: 15%; border-radius: 50%; background: radial-gradient(ellipse,rgba(224,219,241,.28),transparent 60%); filter: blur(10px); animation: mistTurn 8s linear infinite; }
.orb::after { inset: 30% 5% 5% 25%; animation-direction: reverse; animation-duration: 11s; }
.orb i { position: absolute; top: 12%; left: 18%; width: 46px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.45); filter: blur(8px); transform: rotate(-30deg); }
.orb b { position: absolute; inset: 36%; border-radius: 50%; background: rgba(225,211,235,.18); box-shadow: 0 0 45px rgba(230,212,247,.4); }
.stand { position: absolute; top: 223px; width: 185px; height: 85px; border-radius: 0 0 50% 50%; background: linear-gradient(90deg,#4d3018,#bc8840 45%,#53331a); clip-path: polygon(12% 0,88% 0,100% 100%,0 100%); box-shadow: inset 0 12px 14px rgba(255,255,255,.08),0 18px 25px rgba(0,0,0,.6); }
.crystal-ball .object__hint { bottom: 3px; }
.oracle__result { min-height: 105px; display: grid; place-items: center; margin: .2rem auto 1rem; padding: 1rem; border: 1px solid rgba(189,150,211,.26); border-radius: 18px; background: rgba(20,11,25,.7); color: #efe6f2; font-size: 1.05rem; font-style: italic; }
.oracle__result.is-reading span { opacity: .25; filter: blur(3px); }
.hunt-status { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; width: 100%; padding: .8rem; border: 1px solid rgba(210,162,76,.28); border-radius: 16px; background: rgba(10,7,10,.68); text-align: left; }
.hunt-status__icon { display: grid; place-items: center; width: 38px; height: 38px; border: 2px solid #9d6d27; border-radius: 50%; color: var(--brass-pale); background: #6a1027; }
.hunt-status strong, .hunt-status small { display: block; }
.hunt-status small { color: #a99aa5; font-family: system-ui, sans-serif; font-size: .68rem; }
.hunt-status__state { color: #b8a99d; font-family: system-ui, sans-serif; font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.hunt-status.is-found { border-color: rgba(240,215,144,.62); box-shadow: 0 0 24px rgba(210,162,76,.12); }
.hunt-status.is-found .hunt-status__state { color: var(--brass-pale); }

.finale { display: grid; place-items: center; padding: calc(var(--header-h) + 3rem) 1rem 4rem; background: linear-gradient(180deg,#080609 0,#160b12 42%,#37222a 70%,#8c5b51 100%); }
.finale__dawn { position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse at 50% 100%,rgba(255,202,135,.38),transparent 48%); }
.finale::before { content: ''; position: absolute; inset: auto 0 0; z-index: -1; height: 25%; background: #080608; clip-path: polygon(0 42%,8% 28%,15% 46%,28% 19%,41% 43%,55% 26%,67% 47%,80% 12%,92% 40%,100% 26%,100% 100%,0 100%); }
.finale__content { width: min(100%,760px); text-align: center; }
.finale__logo { width: 82px; height: 82px; margin: 0 auto 1rem; object-fit: contain; filter: drop-shadow(0 8px 20px rgba(0,0,0,.45)); }
.finale h2 { font-size: clamp(2.2rem, 10vw, 4.7rem); }
.finale__content > p:not(.eyebrow) { color: #ddceca; }
.cta-grid { display: grid; gap: .7rem; margin-top: 1.35rem; text-align: left; }
.cta-card { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .8rem; min-height: 78px; padding: .8rem; border: 1px solid rgba(240,215,144,.25); border-radius: 17px; background: rgba(13,8,11,.82); text-decoration: none; box-shadow: 0 10px 30px rgba(0,0,0,.2); transition: transform .2s ease,border-color .2s ease; }
.cta-card:active { transform: scale(.98); }
.cta-card--featured { border-color: rgba(240,215,144,.58); background: linear-gradient(135deg,rgba(118,19,47,.92),rgba(43,11,23,.94)); box-shadow: 0 15px 40px rgba(80,6,28,.35); }
.cta-card__icon { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(240,215,144,.4); border-radius: 50%; color: var(--brass-pale); background: rgba(0,0,0,.18); font-family: system-ui, sans-serif; font-weight: 900; }
.cta-card strong, .cta-card small { display: block; }
.cta-card strong { font-size: .95rem; }
.cta-card small { margin-top: .16rem; color: #b9a9a5; font-family: system-ui, sans-serif; font-size: .68rem; line-height: 1.35; }
.finale__note { margin: 1.1rem auto 0; color: #cdbfba; font-family: system-ui, sans-serif; font-size: .72rem; }
.finale__note strong, .finale__note span { display: block; }

.site-footer { position: relative; z-index: 20; padding: 1.5rem 1rem calc(1.5rem + var(--safe-bottom)); border-top: 1px solid rgba(210,162,76,.16); background: #060507; color: #9d9091; text-align: center; font-family: system-ui, sans-serif; font-size: .72rem; }
.site-footer p { margin: .25rem 0; }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem 1rem; margin-top: .8rem; }
.site-footer a, .site-footer button { padding: .35rem 0; border: 0; color: #d8c79f; background: transparent; text-decoration: underline; cursor: pointer; }

.manor-dialog { width: min(calc(100% - 2rem),560px); max-height: calc(100svh - 2rem); overflow: auto; padding: 1.4rem; border: 1px solid rgba(240,215,144,.42); border-radius: 24px; color: var(--ink); background: linear-gradient(145deg,#1c0f16,#080608); box-shadow: 0 30px 100px #000; }
.manor-dialog::backdrop { background: rgba(3,2,4,.78); backdrop-filter: blur(8px); }
.manor-dialog[open] { animation: dialogIn .25s ease; }
.dialog-close { position: absolute; top: .65rem; right: .65rem; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(240,215,144,.26); border-radius: 50%; color: var(--brass-pale); background: rgba(0,0,0,.2); font-family: system-ui, sans-serif; font-size: 1.3rem; cursor: pointer; }
.dialog-emblem { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: .8rem; border: 2px solid #a97b35; border-radius: 50%; color: var(--brass-pale); background: #6a1027; box-shadow: 0 0 22px rgba(210,162,76,.15); }
.manor-dialog h2 { margin: .45rem 2.2rem .75rem 0; font-size: 2rem; line-height: 1; letter-spacing: -.03em; }
.manor-dialog p, .manor-dialog li { color: #d2c4bd; }
.manor-dialog ul { padding-left: 1.1rem; }
.dialog-actions { display: grid; gap: .6rem; margin-top: 1rem; }
.dialog-actions .button { width: 100%; }

.toast { position: fixed; z-index: 600; left: 50%; bottom: calc(1rem + var(--safe-bottom)); width: min(calc(100% - 2rem),420px); padding: .9rem 1rem; border: 1px solid rgba(240,215,144,.48); border-radius: 15px; color: #f4e9dc; background: rgba(19,9,14,.96); box-shadow: 0 18px 60px #000; text-align: center; transform: translate(-50%,150%); transition: transform .35s ease; }
.toast.is-visible { transform: translate(-50%,0); }
.noscript { position: fixed; z-index: 1000; inset: auto 1rem 1rem; padding: 1rem; border-radius: 12px; color: #16070c; background: #f1d790; font-family: system-ui, sans-serif; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease,transform .8s ease; }
.reveal[data-delay="1"] { transition-delay: .16s; }
.reveal.in-view { opacity: 1; transform: none; }


/* Mobile-first room tableaux: the scenery gets its own full scroll beat before the copy card. */
@media (max-width: 719px) {
  .room__architecture { min-height: 390px; }
  .room--library .window { width: min(54vw, 220px); top: 5%; }
  .room--library .shelf--one { top: 9%; }
  .room--library .shelf--two { bottom: 4%; }
  .room--library .candle { bottom: 12%; opacity: .75; }

  .room--study .study-window { top: 3%; width: min(84vw, 430px); height: 66%; }
  .room--study .desk { height: 30%; }
  .room--study .clock { top: 12%; right: 5%; }
  .room--study .quill { bottom: 13%; left: 10%; opacity: .7; }

  .room--vault .vault-door { top: 3%; width: min(84vw, 410px); }
  .room--vault .portrait { top: 19%; width: 82px; height: 108px; }
  .room--vault .ledger-stack { bottom: 7%; opacity: .62; }

  .room--carriage .garage-arch { width: 116vw; height: 90%; }
  .room--carriage .car { bottom: 9%; width: min(88vw, 500px); height: 132px; }
  .room--carriage .car::before { top: -54px; height: 72px; }
  .room--carriage .car span,
  .room--carriage .car i { width: 54px; height: 54px; bottom: -19px; border-width: 11px; }
}

@media (min-width: 720px) {
  :root { --header-h: 76px; --radius: 28px; }
  .site-header { padding-left: 1.4rem; padding-right: 1.4rem; }
  .brand img { width: 45px; height: 45px; }
  .brand strong { font-size: 1.08rem; }
  .header-call { padding: .7rem 1rem; font-size: .82rem; }
  .hero { padding: calc(var(--header-h) + 4rem) 2rem 5rem; }
  .moon { top: 11%; right: -13vw; opacity: .68; }
  .hero__content { text-align: center; margin: 0 auto; }
  .hero h2 { font-size: clamp(3rem, 6.5vw, 4rem); }
  .hero__lead { margin-left: auto; margin-right: auto; }
  .hero__actions { width: min(100%, 520px); margin-left: auto; margin-right: auto; }
  .hero__portrait { width: min(100%, 600px); margin: 2rem auto 0; }
  .speech { width: 90%; }
  .room { padding-left: 0; padding-right: 0; }
  .room__architecture { height: clamp(500px, 58svh, 650px); }
  .room__content { width: min(calc(100% - 4rem), 720px); margin-top: -4rem; padding: 2rem; }
  .room h2 { font-size: clamp(2.7rem,6vw,4.5rem); }
  .room__content > p:not(.eyebrow):not(.william-line) { font-size: 1.08rem; }
  .cta-grid { grid-template-columns: 1fr 1fr; }
  .cta-card--featured { grid-column: 1/-1; }
  .manor-dialog { padding: 2rem; }
  .dialog-actions { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 960px) {
  .hero {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 1.5rem;
    padding: calc(var(--header-h) + 4rem) max(2rem, calc((100vw - var(--content)) / 2)) 5rem;
  }
  .hero__content { text-align: left; margin: 0; }
  .hero__lead { margin-left: 0; margin-right: 0; }
  .hero__actions { width: 100%; margin-left: 0; margin-right: 0; }
  .hero__portrait { width: 100%; margin: 0; }
  .portrait-frame { width: 100%; max-width: 560px; }
  .speech { width: 88%; }
}

@media (min-width: 1080px) {
  .scroll-cue { display: block; }
  .hero { min-height: 100vh; }
  .hero__portrait { max-width: 610px; }
  .hero__actions { grid-template-columns: 1fr 1fr; }
  .portrait-frame { width: 100%; }
  .room {
    display: grid;
    place-items: center;
    min-height: 920px;
    padding: calc(var(--header-h) + 2.6rem) 2rem 4rem;
  }
  .room__architecture { position: absolute; inset: 0; z-index: -2; width: auto; height: auto; }
  .room__architecture::after { display: none; }
  .room__content {
    max-width: none;
    margin-top: 0;
    width: min(48vw,690px);
    justify-self: end;
    margin: 0 max(2rem, calc((100vw - var(--content)) / 2)) 0 0;
  }
  .room--study .room__content,
  .room--carriage .room__content {
    justify-self: start;
    margin: 0 0 0 max(2rem, calc((100vw - var(--content)) / 2));
  }
  .room--library .window,
  .room--vault .vault-door { left: 23%; }
  .room--study .study-window,
  .room--carriage .garage-arch { left: 76%; }
  .object { margin-left: 0; }
  .oracle__content { width: 720px; }
  .cta-card:hover, .button:hover { transform: translateY(-2px); }
  .cta-card:hover { border-color: rgba(240,215,144,.55); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
  .ambient--fog { display: none; }
  .reveal { opacity: 1; transform: none; }
}

@keyframes fogDrift { to { transform: translateX(14vw) scale(1.04); } }
@keyframes fadeBack { to { opacity: 0; transform: scale(.96); } }
@keyframes williamReveal { to { filter: brightness(.5) saturate(.9); transform: translateX(-50%) scale(1.03); } }
@keyframes williamBreathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.012) translateY(-2px); } }
@keyframes batFly { 0%,100% { transform: translate(0,0) rotate(-3deg); } 45% { transform: translate(42px,-20px) rotate(8deg); } 60% { transform: translate(55px,-10px) rotate(-8deg); } }
@keyframes scrollPulse { 0% { transform: scaleY(.2); transform-origin: top; opacity: 0; } 50% { opacity: 1; } 100% { transform: scaleY(1); transform-origin: top; opacity: 0; } }
@keyframes candleFlicker { 0% { transform: translateX(-50%) rotate(-4deg) scale(.9); opacity: .7; } 100% { transform: translateX(-50%) rotate(5deg) scale(1.08); opacity: 1; } }
@keyframes hintGlow { 0%,100% { box-shadow: 0 0 0 rgba(210,162,76,0); } 50% { box-shadow: 0 0 16px rgba(210,162,76,.18); } }
@keyframes secretGlint { 0%,72%,100% { box-shadow: 0 0 8px rgba(240,215,144,.06); } 78% { box-shadow: 0 0 28px rgba(240,215,144,.7); opacity: .8; } }
@keyframes rainFall { to { background-position: 0 35px; } }
@keyframes signatureGlow { 0%,100% { color: #713044; text-shadow: none; } 50% { color: #9d284f; text-shadow: 0 0 8px rgba(142,24,61,.35); } }
@keyframes eyesShift { 0%,38%,100% { transform: translateX(-2px); } 45%,75% { transform: translateX(3px); } }
@keyframes orbFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes mistTurn { to { transform: rotate(360deg) scale(1.08); } }
@keyframes dialogIn { from { opacity: 0; transform: translateY(12px) scale(.98); } }