:root {
  --ink: #111111;
  --paper: #f3f0e9;
  --accent: #b89b64;
  --muted: #777166;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--ink); font-family: Arial, Helvetica, sans-serif; }
body { color: var(--ink); }
#app, .slide { width: 100%; height: 100%; }
.slide { display: grid; grid-template-columns: minmax(0, 1.68fr) minmax(390px, .82fr); background: var(--paper); }
.image-panel { position: relative; background-position: center; background-size: cover; transform: scale(1.015); animation: kenburns 12s linear forwards; }
.image-shade { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 60%, rgba(0,0,0,.22)); }
.content-panel { position: relative; z-index: 2; display: flex; flex-direction: column; padding: clamp(30px, 3.4vw, 70px); }
.brand { display: flex; align-items: center; gap: 18px; border-bottom: 1px solid rgba(17,17,17,.18); padding-bottom: 28px; }
.logo-mark { width: 74px; height: 74px; display: grid; place-items: center; background: var(--ink); color: white; font-size: 27px; font-weight: 700; letter-spacing: -2px; }
.brand strong { display: block; letter-spacing: .18em; font-size: clamp(18px, 1.3vw, 29px); }
.brand span { display: block; margin-top: 8px; color: var(--muted); font-size: clamp(13px, .85vw, 19px); }
.property { margin-top: auto; margin-bottom: auto; }
.badge { display: inline-flex; padding: 9px 14px; background: var(--accent); color: white; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: clamp(12px, .7vw, 16px); }
h1 { margin: 26px 0 18px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(38px, 4vw, 77px); line-height: .98; font-weight: 500; letter-spacing: -.035em; }
.location { color: var(--muted); text-transform: uppercase; letter-spacing: .16em; font-size: clamp(15px, 1vw, 23px); }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 36px; padding: 24px 0; border-top: 1px solid rgba(17,17,17,.2); border-bottom: 1px solid rgba(17,17,17,.2); }
.fact span { display: block; color: var(--muted); font-size: clamp(12px, .7vw, 16px); text-transform: uppercase; letter-spacing: .12em; }
.fact strong { display: block; margin-top: 8px; font-size: clamp(22px, 1.7vw, 35px); }
.bottom { display: grid; grid-template-columns: 1fr 130px; gap: 24px; align-items: end; }
.price { font-size: clamp(29px, 2.5vw, 49px); font-weight: 700; }
.price small { display: block; margin-bottom: 7px; color: var(--muted); font-size: 13px; font-weight: 400; text-transform: uppercase; letter-spacing: .16em; }
.qr { width: 130px; height: 130px; padding: 8px; background: #fff; }
.qr img { width: 100%; height: 100%; display: block; }
.scan { color: var(--muted); margin-top: 10px; font-size: 13px; line-height: 1.3; }
.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; background: rgba(17,17,17,.12); }
.progress::after { content: ''; display: block; height: 100%; background: var(--accent); animation: progress var(--duration, 12s) linear forwards; }
.status { position: fixed; right: 18px; top: 16px; z-index: 20; padding: 8px 11px; border-radius: 999px; background: rgba(0,0,0,.52); color: white; font-size: 12px; opacity: .65; }
.loader-copy { margin: auto 0; font-family: Georgia, serif; font-size: 33px; }
.fade-in { animation: fade .7s ease both; }
@keyframes fade { from { opacity: .25; } to { opacity: 1; } }
@keyframes progress { from { width: 0; } to { width: 100%; } }
@keyframes kenburns { from { transform: scale(1.015); } to { transform: scale(1.075); } }
@media (max-aspect-ratio: 4/3) {
  .slide { grid-template-columns: 1fr; grid-template-rows: 56% 44%; }
  .content-panel { padding: 28px 42px; }
  .brand { padding-bottom: 16px; }
  .logo-mark { width: 58px; height: 58px; }
  .property { margin: 20px 0; }
  h1 { font-size: clamp(32px, 6vw, 60px); margin: 14px 0; }
  .facts { margin-top: 18px; padding: 14px 0; }
  .bottom { position: absolute; right: 42px; bottom: 24px; }
}