/* Layout: one sticky stage. The walk video fills it, the room copy sits low on the left,
   and the hand-inked floor plan rides in the corner with a dot that follows the camera. */
:root{
  /* walk tokens (hand-drawn plan, night house) */
  --night:#14110d;          /* page ground, the dark around the house */
  --paper:#efe6d2;          /* plan sheet */
  --ink:#2a2118;            /* plan lines and plan text */
  --cream:#f6efe0;          /* text over the video */
  --lamp:#e9a84a;           /* porch light, the one warm accent */
  --orchid:#b48aae;         /* the walk route and you-are-here dot on dark */
  --orchid-ink:#7a5876;     /* the same route color on paper */
  --hand:"Architects Daughter","Comic Neue","Bradley Hand",cursive;
  --body:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}

/* stage */
.walk{position:relative;background:var(--night);color:var(--cream)}
.walk a{color:inherit}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.stage video,.stage canvas,.stage .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage .poster{background:#1d1812 center/cover no-repeat}
.veil{position:absolute;inset:0;pointer-events:none;background:#0e0b08;opacity:0}
.shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(14,11,8,.86) 0%,rgba(14,11,8,.38) 34%,rgba(14,11,8,0) 58%),
             linear-gradient(to right,rgba(14,11,8,.55) 0%,rgba(14,11,8,0) 46%)}

/* room copy */
.copy{position:absolute;left:0;bottom:0;width:min(560px,100%);
  padding-bottom:max(56px,calc(env(safe-area-inset-bottom,0px) + 40px));
  padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:24px}
.room{position:absolute;left:max(24px,env(safe-area-inset-left,0px));right:calc(clamp(250px,30vw,400px) + 72px);max-width:680px;bottom:max(56px,calc(env(safe-area-inset-bottom,0px) + 40px));
  opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .35s ease;pointer-events:none}
.room.on{opacity:1;transform:none;pointer-events:auto}
.eyebrow{font-family:var(--hand);font-size:17px;letter-spacing:.04em;color:var(--lamp);margin:0 0 6px}
.room h1,.room h2{font-family:var(--hand);font-weight:400;line-height:1.08;margin:0 0 14px;text-wrap:balance;color:var(--cream)}
.room h1{font-size:clamp(46px,7vw,84px)}
.room h2{font-size:clamp(32px,4.4vw,52px)}
.room p{margin:0 0 16px;max-width:44ch;font-size:clamp(16px,1.35vw,18.5px);color:rgba(246,239,224,.9)}
.room .go{font-weight:600;font-size:16px;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.room .go:hover{color:var(--lamp)}
.hint{font-family:var(--hand);font-size:17px;color:var(--orchid);display:flex;align-items:center;gap:10px}
.hint svg{flex:none}

/* plan */
.plan{position:absolute;right:max(24px,env(safe-area-inset-right,0px));bottom:max(32px,calc(env(safe-area-inset-bottom,0px) + 24px));
  width:clamp(250px,30vw,400px);background:var(--paper);color:var(--ink);border-radius:3px;padding:12px 12px 8px;
  box-shadow:0 18px 40px rgba(0,0,0,.45),0 2px 0 rgba(0,0,0,.2);transform:rotate(-.6deg)}
.plan svg{display:block;width:100%;height:auto}
.plan .cap{display:flex;justify-content:space-between;font-family:var(--hand);font-size:12.5px;opacity:.75;padding:4px 2px 0}
.plan .room-hit{fill:transparent;cursor:pointer}
.plan .room-hit:hover{fill:rgba(233,168,74,.16)}
.plan .room-hit.on{fill:rgba(233,168,74,.22)}
.plan .room-hit:focus-visible{outline:none;stroke:var(--lamp);stroke-width:4}
.plan text{font-family:var(--hand);fill:var(--ink);pointer-events:none}
.plan .route{fill:none;stroke:var(--orchid-ink);stroke-width:3.2;stroke-linecap:round;stroke-dasharray:2 11;opacity:.9}
.plan .dot{fill:var(--orchid-ink)}
.plan .halo{fill:var(--orchid-ink);opacity:.2}
.ink path{fill:none;stroke:var(--ink);stroke-linecap:round;stroke-linejoin:round}

@media (max-width:760px){
  .room{right:max(24px,env(safe-area-inset-right,0px))}
  .plan{width:min(46vw,210px);top:calc(env(safe-area-inset-top,0px) + 64px);bottom:auto;padding:8px 8px 4px}
  .plan .cap{display:none}
  .shade{background:linear-gradient(to top,rgba(14,11,8,.9) 0%,rgba(14,11,8,.5) 42%,rgba(14,11,8,0) 66%)}
}
@media (prefers-reduced-motion:reduce){
  .room{transition:none}
}

/* stills mode (phones, no WebCodecs): six keyframes cross-fading */
.stage .still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease}
.stage .still.on{opacity:1}
/* return visit: no scrub, the porch with the doors listed */
.walk.returning{height:auto!important}
.walk.returning .stage{position:relative;height:100svh;min-height:640px}
.walk.returning .room{display:none}
.walk.returning .room[data-stop="0"]{display:block}
.doors{display:none}
.walk.returning .again-wrap{display:flex}
.walk.returning .hint:not(.again-wrap){display:none}
.walk.returning .doors{display:grid;gap:4px 18px;grid-template-columns:1fr 1fr;margin:14px 0 18px;max-width:520px}
.doors a{font-family:var(--hand);font-size:19px;text-decoration:none;color:var(--cream);padding:4px 0;border-bottom:1px dashed rgba(246,239,224,.3)}
.doors a:hover{color:var(--lamp)}
.again{font-family:var(--hand);font-size:16px;color:var(--orchid)}
.walk .hint{margin:0}
.walk .again-wrap{display:none}
/* the site header floats over the stage */
.walk-home .site-header{position:fixed;left:0;right:0;top:0;transition:background .3s,border-color .3s;background:linear-gradient(to bottom,rgba(20,17,13,.78),rgba(20,17,13,0));border-bottom:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.walk-home .site-header.solid{background:rgba(30,43,38,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line-dark)}
@media(max-width:760px){.walk.returning .doors{grid-template-columns:1fr}.plan{display:none}.walk.returning .plan{display:block;position:relative;top:auto;right:auto;width:min(60vw,260px);margin:16px 0 0;transform:none}}

.hint-mob{display:none}
@media(max-width:760px){.hint-desk{display:none}.hint-mob{display:inline}}