:root {
  --brass: #C49A52;
  --burgundy: #7B1E2B;
  --slate: #52606A;
  --ink: #101820;
  --moon-blue: #C8D8DD;
  --paper: #F4F0E6;
  --walnut: #241A16;
  --fraunces: "Fraunces", serif;
  --noto: "Noto Sans KR", sans-serif;
  --outfit: "Outfit", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--noto);
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .18;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(244, 240, 230, .18) 0 1px, transparent 1px),
    linear-gradient(115deg, rgba(196, 154, 82, .08), transparent 32%, rgba(200, 216, 221, .08));
  background-size: 23px 23px, 100% 100%;
  mix-blend-mode: screen;
}

.emblem {
  position: fixed;
  right: 28px;
  bottom: 24px;
  width: 54px;
  height: 54px;
  border: 2px solid var(--brass);
  border-radius: 50%;
  z-index: 12;
  opacity: .78;
  transition: transform .5s ease, border-color .5s ease;
}

.emblem span {
  position: absolute;
  width: 4px;
  height: 68px;
  left: 24px;
  top: -7px;
  background: var(--burgundy);
  border-radius: 9px;
}

.emblem.turn { transform: rotate(28deg); border-color: var(--moon-blue); }

.house-nav {
  position: fixed;
  top: 22px;
  right: 28px;
  z-index: 15;
  display: flex;
  gap: 9px;
  font-family: var(--outfit);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.house-nav a {
  color: var(--paper);
  text-decoration: none;
  padding: 9px 12px;
  border: 1px solid rgba(244, 240, 230, .18);
  background: rgba(16, 24, 32, .45);
  backdrop-filter: blur(10px);
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}

.house-nav a:hover, .house-nav a.active { color: var(--ink); border-color: var(--brass); background: var(--brass); }

.room {
  position: relative;
  min-height: 100vh;
  padding: clamp(42px, 7vw, 92px);
  overflow: hidden;
  display: grid;
  align-items: center;
}

.opening-room {
  background:
    linear-gradient(90deg, rgba(36, 26, 22, .97), rgba(36, 26, 22, .82) 48%, rgba(16, 24, 32, .98)),
    radial-gradient(circle at 15% 68%, rgba(123, 30, 43, .35), transparent 32%);
}

.paper-halo {
  position: absolute;
  width: min(70vw, 780px);
  height: min(70vw, 780px);
  left: -14vw;
  top: 7vh;
  border-radius: 50%;
  background: radial-gradient(circle, var(--paper) 0 45%, rgba(244, 240, 230, .15) 46% 61%, transparent 62%);
  filter: drop-shadow(0 0 80px rgba(200, 216, 221, .22));
  opacity: .92;
}

.moon-gate {
  position: absolute;
  width: min(65vw, 700px);
  height: min(65vw, 700px);
  left: -10vw;
  top: 12vh;
  border: 18px solid var(--moon-blue);
  border-radius: 50%;
  background: radial-gradient(circle at 55% 50%, rgba(200, 216, 221, .16), rgba(16, 24, 32, .28) 62%);
  transition: transform 1.2s cubic-bezier(.77, 0, .18, 1), opacity 1.2s ease;
}

body.entered .moon-gate { transform: translateX(54vw) rotate(7deg); opacity: .58; }

.gate-post {
  position: absolute;
  width: 20px;
  height: 112%;
  left: 50%;
  top: -6%;
  transform: translateX(-50%);
  background: var(--walnut);
  box-shadow: 0 0 0 5px rgba(196, 154, 82, .45);
}

.gate-label {
  position: absolute;
  right: 11%;
  top: 45%;
  font-family: var(--noto);
  color: var(--burgundy);
  font-size: clamp(32px, 6vw, 84px);
  font-weight: 700;
}

.brass-rail {
  position: relative;
  z-index: 2;
  margin-left: min(34vw, 420px);
  max-width: 720px;
  border-top: 7px solid var(--brass);
  border-bottom: 1px solid rgba(196, 154, 82, .45);
  padding: 28px 0 32px 38px;
}

.kicker, .room-number, .vertical-tag, .drawer span {
  font-family: var(--outfit);
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--brass);
  font-size: 12px;
}

h1, h2 {
  font-family: var(--fraunces);
  font-weight: 650;
  line-height: .95;
  margin: 0;
}

h1 { font-size: clamp(70px, 13vw, 178px); color: var(--paper); letter-spacing: -.07em; }
h2 { font-size: clamp(44px, 7.8vw, 104px); color: var(--ink); letter-spacing: -.045em; }

p { font-size: clamp(17px, 1.45vw, 22px); line-height: 1.72; color: rgba(16, 24, 32, .78); }

.ritual-button, .thought, .drawer {
  font-family: var(--outfit);
  cursor: pointer;
  border: 0;
}

.ritual-button {
  margin-top: 24px;
  padding: 16px 24px;
  color: var(--paper);
  background: var(--burgundy);
  box-shadow: inset 0 -5px rgba(36, 26, 22, .38), 0 18px 40px rgba(0, 0, 0, .28);
  letter-spacing: .13em;
  text-transform: uppercase;
  transition: transform .25s ease, background .25s ease;
}

.ritual-button:hover { transform: translateX(9px); background: #101820; }

.shadow-plant { position: absolute; right: 8vw; bottom: 0; width: 180px; height: 360px; opacity: .22; background: radial-gradient(ellipse at 55% 18%, var(--moon-blue) 0 12%, transparent 13%), radial-gradient(ellipse at 35% 38%, var(--moon-blue) 0 17%, transparent 18%), linear-gradient(var(--moon-blue), var(--moon-blue)); background-size: 150px 120px, 160px 130px, 8px 320px; background-repeat: no-repeat; background-position: 20px 0, 0 80px, 88px 60px; }
.floor-map { position: absolute; inset: auto 0 0 0; height: 26vh; background: linear-gradient(90deg, transparent 10%, rgba(196, 154, 82, .24) 10% 10.4%, transparent 10.4% 32%, rgba(196, 154, 82, .18) 32% 32.3%, transparent 32.3%), linear-gradient(0deg, rgba(244, 240, 230, .05), transparent); }

.lintel-room { grid-template-columns: 1.1fr .9fr; background: var(--paper); }
.vertical-tag { position: absolute; left: 34px; top: 24%; writing-mode: vertical-rl; color: var(--burgundy); }
.walnut-panel { position: absolute; right: 9vw; top: 0; width: 23vw; min-width: 240px; height: 82vh; background: linear-gradient(90deg, var(--walnut), #3a251e, var(--walnut)); box-shadow: inset 18px 0 rgba(196, 154, 82, .12); }
.notice-panel, .drawer-copy, .window-text, .table-copy, .registry-card { position: relative; z-index: 3; max-width: 740px; padding: clamp(28px, 5vw, 62px); background: rgba(244, 240, 230, .9); border: 1px solid rgba(82, 96, 106, .24); box-shadow: 18px 18px 0 rgba(196, 154, 82, .28); }
.low-bench { align-self: end; height: 72px; width: 62vw; background: var(--walnut); border-top: 9px solid var(--brass); display: flex; justify-content: space-around; }
.low-bench span { width: 14px; height: 92px; background: var(--walnut); margin-top: 58px; }

.drawer-room { grid-template-columns: minmax(320px, 48vw) 1fr; gap: 6vw; background: linear-gradient(120deg, var(--moon-blue), var(--paper) 58%); }
.cabinet-stack { display: grid; gap: 18px; z-index: 3; }
.drawer { min-height: 142px; padding: 22px 32px; text-align: left; color: var(--paper); background: linear-gradient(90deg, #2e201a, var(--walnut)); border-left: 12px solid var(--brass); box-shadow: 12px 14px 0 rgba(82, 96, 106, .22); transition: transform .42s cubic-bezier(.2, .8, .2, 1), background .3s ease; }
.drawer strong { display: block; margin-top: 18px; font-family: var(--fraunces); font-size: clamp(27px, 3.3vw, 52px); font-weight: 620; }
.drawer.open { transform: translateX(46px); background: linear-gradient(90deg, var(--burgundy), #3a141a); }
.hinge-line { position: absolute; right: 7vw; top: 15vh; width: 11px; height: 70vh; background: repeating-linear-gradient(var(--brass) 0 24px, transparent 24px 42px); }

.window-room { background: var(--ink); grid-template-columns: .95fr 1.05fr; color: var(--paper); }
.round-window { width: min(58vw, 620px); height: min(58vw, 620px); border-radius: 50%; border: 16px solid var(--paper); background: radial-gradient(circle at 48% 48%, var(--moon-blue) 0 43%, rgba(82, 96, 106, .52) 44% 58%, rgba(16, 24, 32, .2) 59%); position: relative; box-shadow: 0 0 90px rgba(200, 216, 221, .28); transition: transform .6s ease; }
.round-window:hover { transform: rotate(-6deg) scale(1.02); }
.vertical-post { position: absolute; top: -9%; bottom: -9%; left: 50%; width: 14px; background: var(--burgundy); transform: translateX(-50%); }
.window-text { background: rgba(16, 24, 32, .76); border-color: rgba(200, 216, 221, .24); box-shadow: -18px 18px 0 rgba(123, 30, 43, .55); }
.window-text h2, .window-text p { color: var(--paper); }
.paper-screens { position: absolute; right: 4vw; bottom: 0; display: flex; gap: 14px; opacity: .22; }
.paper-screens span { width: 90px; height: 64vh; background: linear-gradient(var(--paper), var(--moon-blue)); }

.table-room { background: linear-gradient(180deg, var(--paper), #e7dfcf); grid-template-columns: 1fr 1fr; gap: 5vw; }
.listening-table { height: 34vh; min-height: 270px; border-radius: 999px 999px 28px 28px; background: linear-gradient(90deg, #3b251d, var(--walnut)); border-bottom: 14px solid var(--brass); position: relative; box-shadow: 0 36px 0 rgba(82, 96, 106, .2); transition: transform .35s ease, filter .35s ease; }
.listening-table.warm { transform: translateY(-12px); filter: drop-shadow(0 0 44px rgba(196, 154, 82, .48)); }
.ceramic-tablet { position: absolute; left: 18%; top: 28%; padding: 18px 24px; border-radius: 18px; background: var(--moon-blue); color: var(--ink); font-family: var(--outfit); letter-spacing: .12em; text-transform: uppercase; }
.cord-knot { position: absolute; right: 19%; top: 34%; width: 92px; height: 92px; border: 8px solid var(--burgundy); border-radius: 50%; }
.thought-row { display: flex; gap: 12px; flex-wrap: wrap; }
.thought { padding: 12px 18px; background: var(--moon-blue); color: var(--ink); text-transform: uppercase; letter-spacing: .12em; }
.thought.active { background: var(--burgundy); color: var(--paper); }

.cord-room { background: var(--walnut); grid-template-columns: .85fr 1.15fr; }
.red-cord { position: relative; height: 78vh; width: 22vw; min-width: 230px; justify-self: center; }
.red-cord span { position: absolute; top: 0; bottom: 0; width: 8px; background: var(--burgundy); border-radius: 20px; box-shadow: 0 0 0 3px rgba(196, 154, 82, .28); transform-origin: top; transition: transform .55s ease; }
.red-cord span:nth-child(1) { left: 25%; transform: rotate(-8deg); }
.red-cord span:nth-child(2) { left: 50%; transform: rotate(3deg); }
.red-cord span:nth-child(3) { left: 75%; transform: rotate(11deg); }
.red-cord.tug span:nth-child(1) { transform: rotate(-15deg); }
.red-cord.tug span:nth-child(2) { transform: rotate(-2deg); }
.red-cord.tug span:nth-child(3) { transform: rotate(18deg); }
.registry-card { background: var(--paper); }
.stamp-grid { position: absolute; right: 8vw; bottom: 8vh; display: grid; grid-template-columns: repeat(2, 82px); gap: 12px; }
.stamp-grid span { display: grid; place-items: center; width: 82px; height: 82px; border: 2px solid var(--brass); color: var(--brass); font-family: var(--noto); font-size: 32px; }

.reveal-card { opacity: .2; transform: translateY(44px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
.reveal-card.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 850px) {
  .house-nav { display: none; }
  .room, .lintel-room, .drawer-room, .window-room, .table-room, .cord-room { grid-template-columns: 1fr; }
  .brass-rail { margin-left: 0; margin-top: 36vh; }
  .paper-halo, .moon-gate { width: 86vw; height: 86vw; }
  .drawer.open { transform: translateX(18px); }
  .walnut-panel { opacity: .28; }
}