/* House: rooms start in the dark; the light comes on as you reach them */
.house-hero { padding: clamp(8rem, 18vh, 12rem) 0 var(--sec); background: radial-gradient(80% 60% at 80% 0%, var(--deep), var(--ink) 70%); }
.house-hero__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.house-hero__title { font-size: var(--t-hero); font-weight: 800; letter-spacing: -.055em; line-height: .88; margin-bottom: 1.8rem; transition: color 1s, text-shadow 1s; color: #2a3557; }
.house-hero.is-on .house-hero__title { color: var(--sun); text-shadow: 0 0 .4em rgb(244 196 48 / .35); }
.house-hero .lead { margin-bottom: 2rem; }
.house-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); counter-reset: r; }
.house-index a {
  display: flex; gap: 1.2rem; align-items: baseline; padding: .85rem 0; border-bottom: 1px solid var(--line);
  text-decoration: none; color: var(--mist); font-size: 1.05rem; transition: color .3s, padding .5s var(--ease);
}
.house-index span { font: 600 .72rem/1 var(--f-display); color: #2a3557; transition: color .3s; }
.house-index a:hover, .house-index a.is-lit { color: var(--steam); padding-left: .6rem; }
.house-index a.is-lit span, .house-index a:hover span { color: var(--sun); }

.rooms { background: var(--ink); padding-bottom: var(--sec); }
.room {
  display: grid; grid-template-columns: 1.45fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center;
  width: min(100% - 2 * var(--gut), 1320px); margin: 0 auto; padding: clamp(3rem, 8vw, 7rem) 0;
  scroll-margin-top: 4rem;
}
.room--flip { grid-template-columns: 1fr 1.45fr; }
.room--flip .room__stage { order: 2; }
.room__stage { position: relative; }
.room__frame img { filter: brightness(.18) grayscale(.85) contrast(1.1); transform: scale(1.04); transition: filter 1.6s var(--ease), transform 2.4s var(--ease); }
.room__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 55% at 50% 25%, rgb(255 186 100 / .3), transparent 70%); mix-blend-mode: screen; opacity: 0; transition: opacity 1.2s var(--ease); }
.room.is-on .room__frame img { filter: none; transform: none; }
.room.is-on .room__glow { opacity: 1; animation: flicker .45s steps(2) 1; }
@keyframes flicker { 0% { opacity: .15; } 50% { opacity: .9; } }
.room__duo { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.room__duo .frame:last-child .room__glow, .room__duo .frame:last-child img { transition-delay: .25s; }
.room--flip .switch { left: auto; right: -1.6rem; }
.room__n { font: 800 clamp(4rem, 8vw, 7rem)/.8 var(--f-display); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1px #2a3557; display: block; margin-bottom: 1rem; transition: color 1s, -webkit-text-stroke-color 1s; }
.room.is-on .room__n { color: var(--sun); -webkit-text-stroke-color: var(--sun); }
.room h2 { font-size: var(--t-l); margin-bottom: 1rem; }
.room__text p { color: var(--mist); max-width: 40ch; }
.room__text { opacity: .45; transition: opacity 1s; }
.room.is-on .room__text { opacity: 1; }
.tags { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 1.4rem 0 0; padding: 0; }
.tags li { padding: .45rem .85rem; border: 1px solid var(--line); border-radius: 99px; font-size: .84rem; color: var(--steam); }
@media (max-width: 900px) {
  .house-hero__grid, .room, .room--flip { grid-template-columns: 1fr; }
  .room--flip .room__stage { order: 0; }
  .room--flip .switch { right: 1rem; }
}

.inventory { padding: var(--sec) 0; background: var(--steam); color: var(--ink); }
.inventory .eyebrow { color: var(--deep); }
.inventory h2 { font-size: var(--t-xl); margin-bottom: clamp(2.5rem, 6vw, 4.5rem); max-width: 14ch; }
.inventory__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.inventory h3 { font-size: .95rem; padding-bottom: .9rem; margin-bottom: .9rem; border-bottom: 2px solid var(--ink); }
.inventory ul { list-style: none; margin: 0; padding: 0; }
.inventory li { padding: .55rem 0; border-bottom: 1px solid var(--line-ink); color: #2b3350; font-size: .96rem; }
@media (max-width: 1000px) { .inventory__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .inventory__grid { grid-template-columns: 1fr; } }