html, body { margin: 0; width: 100%; height: 100%; }
body { box-sizing: border-box; overflow: hidden; background: #06100f; color: #e9eee4; }
.village-page {
  height: calc(100vh - var(--site-header-height, 78px));
  height: calc(100svh - var(--site-header-height, 78px));
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  padding: 0 clamp(12px, 2.2vw, 36px) 12px; box-sizing: border-box;
}
.village-intro { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; }
.village-intro p { margin: 0; }
.village-intro > div > p { font: 400 10px/1.4 var(--site-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--site-aqua); }
.village-intro h1 { margin: 5px 0 0; font: 400 clamp(24px, 3.3vw, 42px)/1.05 var(--site-sans); letter-spacing: -.05em; }
.village-intro em { font-family: var(--site-serif); color: var(--site-lav); font-weight: 300; }
.village-hint { color: #a7b9af; font: 400 11px/1.8 var(--site-mono); text-align: right; }
.village-scene { display: block; width: 100%; height: 100%; min-height: 0; border: 1px solid var(--site-line); border-radius: 12px; box-sizing: border-box; background: #bad8ea; }
@media (max-width: 650px) {
  .village-intro { align-items: flex-start; flex-direction: column; gap: 8px; padding: 12px 0; }
  .village-hint { text-align: left; font-size: 10px; line-height: 1.6; }
}