:root {
  color-scheme: light;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #e9e8df;
  color: #42483e;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; padding: 38px clamp(22px, 6vw, 84px); }
main { max-width: 1040px; margin: 0 auto; }
header, footer { display: flex; justify-content: space-between; gap: 24px; }
header { font-size: 10px; line-height: 1.6; letter-spacing: .2em; }
.landing {
  position: relative; height: clamp(270px, 42vw, 390px); max-width: 640px;
  margin: 66px auto 0; overflow: hidden;
  background: linear-gradient(90deg, #c5c8b8 0%, #d4d5c4 24%, #e0dfca 65%, #c7cbbb 100%);
  box-shadow: inset 0 1px 0 #f3f0d7;
}
.landing::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, #a5ae9d, #bcc1af);
  clip-path: polygon(0 0, 19% 13%, 19% 80%, 0 100%);
}
.landing::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, #c4c8b7, #adb5a6);
  clip-path: polygon(89% 13%, 100% 0, 100% 100%, 89% 80%);
}
.ceiling-light {
  position: absolute; top: 10%; left: 43%; width: 21%; height: 4px;
  background: #f7f4d4; box-shadow: 0 0 17px 5px #f5f0c75c;
}
.door {
  position: absolute; left: 51%; bottom: 20%; width: 19%; height: 57%;
  border: 5px solid #8f9885; border-bottom: 0;
  background: linear-gradient(90deg, #a6ae99, #b5bba5 94%, #e9dfaa 95%);
  box-shadow: -3px 0 0 #c8cbb6, 3px 0 0 #d9dbc1, inset 1px 0 4px #78847144;
}
.sign { position: absolute; top: 25%; left: 40%; padding: 5px 7px; background: #cdd0bc; color: #56634f; font-size: 10px; letter-spacing: .08em; }
.handle { position: absolute; right: 11%; top: 59%; width: 12%; height: 2px; background: #737e6a; }
.floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 20%;
  background: linear-gradient(180deg, #999e8c, #b5b7a3); border-top: 3px solid #959e88;
}
.floor::after {
  content: ""; position: absolute; inset: 0; background: #e4d9a4; opacity: .25;
  clip-path: polygon(69% 0, 70% 0, 85% 100%, 64% 100%);
}
.wall-label { position: absolute; left: 27%; top: 46%; font-size: 7px; color: #727d66; letter-spacing: .12em; }
.message { text-align: center; padding: 45px 0 68px; }
.eyebrow { font-size: 9px; letter-spacing: .2em; color: #626b5a; margin: 0 0 19px; }
h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(28px, 4.5vw, 44px); font-weight: 400; line-height: 1.2; letter-spacing: -.025em; margin: 0; }
.welcome { font-size: 13px; line-height: 1.8; color: #616a59; margin: 16px 0 0; }
footer { border-top: 1px solid #cdd0c2; padding-top: 17px; font-size: 10px; line-height: 1.7; color: #626b5a; }
footer span:first-child { font-family: ui-monospace, monospace; }
@media (max-width: 500px) {
  body { padding-top: 26px; }
  header { font-size: 8px; gap: 14px; letter-spacing: .13em; }
  .landing { margin-top: 46px; height: 280px; }
  .door { left: 49%; width: 25%; }
  .message { padding: 38px 0 50px; }
  footer { flex-direction: column; gap: 7px; }
}