@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Manrope:wght@400;500;600;800&display=swap');
*{box-sizing:border-box}html{scrollbar-width:none}html::-webkit-scrollbar{display:none}body{margin:0;background:#e7e0d3;color:#3f332b;font-family:'DM Sans',Arial,sans-serif;overscroll-behavior-y:none}.journey-track{height:1200vh;height:1200svh}.experience{position:fixed;inset:0;overflow:hidden}canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y}.shade{position:absolute;inset:0;background:linear-gradient(#f5f0e7c9 0%,#f5f0e74d 24%,transparent 41%,transparent 63%,#eee6d8b0 84%,#eee6d8ed 100%);pointer-events:none}header{position:absolute;top:max(25px,env(safe-area-inset-top));left:5%;right:5%;display:flex;align-items:center;justify-content:space-between}.logo{font:800 45px/1 Manrope,Arial;letter-spacing:-4px;text-decoration:none;color:inherit}.logo span{font:11px Arial;vertical-align:top;letter-spacing:0;margin-left:6px}header>span{font-size:9px;letter-spacing:2px}header button{width:38px;height:38px;border:1px solid #64524166;border-radius:50%;color:inherit;font-size:20px;background:#f7f1e455;cursor:pointer}.story{position:absolute;top:18%;left:6%;width:58%;pointer-events:none;will-change:opacity,transform}.story>span{font-size:9px;letter-spacing:2px}.story h1{font:500 clamp(45px,5.5vw,78px)/1.04 Manrope,Arial;letter-spacing:-3.8px;margin:20px 0 0}.story em{font-family:Georgia,serif;font-weight:400}.object-note{position:absolute;right:6%;bottom:31%;display:flex;align-items:center;gap:9px;font-size:8px;letter-spacing:1.4px}.dot{width:5px;height:5px;border-radius:50%;background:#7c5540;box-shadow:0 0 0 5px #eee5d56b}.bottom-copy{position:absolute;left:6%;bottom:17%;pointer-events:none}.bottom-copy>span{font-size:8px;letter-spacing:1.5px}.bottom-copy p{font-size:14px;line-height:1.6;margin:12px 0 0}.season-switch{position:absolute;right:6%;bottom:18%;display:flex;padding:4px;border:1px solid #9e8a6c77;border-radius:40px;background:#f8f2e1aa;backdrop-filter:blur(12px);transition:opacity .3s}.season-switch button{border:0;background:none;border-radius:30px;padding:11px 18px;font:11px 'DM Sans',Arial;color:inherit;cursor:pointer}.season-switch button.selected{background:#5d4036;color:#fff0d5}.tour-controls{position:absolute;left:6%;right:6%;bottom:max(32px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;gap:12px;align-items:center}.tour-controls nav{display:flex;gap:3px;padding:4px;border:1px solid #a48e6b70;border-radius:40px;background:#f7f1e7bb;backdrop-filter:blur(14px)}nav button{border:0;border-radius:30px;background:none;padding:12px 23px;color:inherit;font:11px 'DM Sans',Arial;cursor:pointer}nav button.selected{background:#4c392c;color:#f5e9d6}#next{border:1px solid #76604c80;border-radius:50%;width:43px;height:43px;background:#f8f0e29c;color:inherit;font-size:21px;cursor:pointer}.scroll-hint{position:absolute;right:13%;bottom:49px;font-size:7px;letter-spacing:1.5px;opacity:.6}.scroll-hint span{margin-left:10px}.progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:#947b5333}.progress i{display:block;height:100%;width:0;background:#8a5239}.credits{position:absolute;left:6%;top:50%;font-size:6px;letter-spacing:1px;writing-mode:vertical-rl;opacity:.4}button:focus-visible,a:focus-visible{outline:3px solid #b98242;outline-offset:4px}
@media(max-width:760px){header{left:6%;right:6%;top:max(21px,env(safe-area-inset-top))}.logo{font-size:36px;letter-spacing:-3px}header>span{font-size:6px;letter-spacing:1px;max-width:100px;text-align:center;line-height:1.6}header button{width:32px;height:32px;font-size:17px}.story{top:13%;left:7%;width:88%}.story>span{font-size:7px;letter-spacing:1.6px}.story h1{font-size:clamp(36px,10.7vw,52px);letter-spacing:-2.2px;margin-top:13px;line-height:1.03}.object-note{right:7%;bottom:36%;font-size:6px;letter-spacing:.8px}.bottom-copy{left:7%;bottom:22%}.bottom-copy>span{font-size:6px;letter-spacing:1px}.bottom-copy p{font-size:11px;line-height:1.5;margin-top:8px}.season-switch{left:7%;right:auto;bottom:13%;padding:3px}.season-switch button{padding:8px 16px;font-size:10px}.tour-controls{left:5%;right:5%;bottom:max(22px,env(safe-area-inset-bottom));gap:9px}nav{flex:1;justify-content:space-between}nav button{padding:11px 11px;font-size:9px}#next{width:36px;height:36px;font-size:18px;flex-shrink:0}.scroll-hint{right:7%;bottom:14%;font-size:5px;letter-spacing:.7px;max-width:80px;line-height:1.6;text-align:right}.credits{left:3%;font-size:5px}.shade{background:linear-gradient(#f5f0e7df 0%,#f5f0e77a 23%,transparent 35%,transparent 61%,#eee6d8bd 77%,#eee6d8ed 100%)}}
@media(prefers-reduced-motion:reduce){.season-switch{transition:none}}
/* Photographic presentation: typography and controls sit over the full-frame house. */
body{background:#20150e;color:#fff2db}.experience{background:#20150e}.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(20px) brightness(.7);transform:scale(1.08)}canvas{opacity:0;transition:opacity .7s}canvas.ready{opacity:1}.shade{background:linear-gradient(#100b07b0 0%,#100b0733 28%,transparent 42%,transparent 60%,#100b0766 77%,#100b07b8 100%)}.story{text-shadow:0 2px 25px #0008}.story h1{font-weight:400}.bottom-copy{text-shadow:0 1px 12px #000}.object-note{color:#fff1d4;text-shadow:0 1px 9px #000}.dot{background:#efd6a3;box-shadow:0 0 0 5px #ffffff16}header button{border-color:#ffebcc70;background:#ffffff12;color:#ffefd7}.tour-controls nav,.season-switch{border-color:#ffe2b654;background:#33201355;color:#fff0d4}nav button.selected,.season-switch button.selected{background:#f4e9d3;color:#4b3525}#next{border-color:#ffe2b670;background:#33201355;color:#fff0d4}.progress{background:#ffffff25}.progress i{background:#ebc994}.credits{color:#fff2db}.scroll-hint{opacity:.8;text-shadow:0 1px 10px #000}#loading{position:absolute;z-index:8;top:48%;left:0;right:0;text-align:center;font-size:11px;letter-spacing:1px;color:#fff1d9;text-shadow:0 1px 15px #000}.experience.overview .story{top:auto;bottom:26%;max-width:700px}.experience.overview .bottom-copy{opacity:0}.story{width:60%;top:17%}
@media(max-width:760px){.shade{background:linear-gradient(#100b079c 0%,#100b0722 27%,transparent 36%,transparent 60%,#100b0755 76%,#100b07b8 100%)}.story{top:13%;width:88%}.story h1{font-size:clamp(35px,10.5vw,50px)}.experience.overview .story{bottom:24%;top:auto}.experience.overview .story h1{font-size:40px}.bottom-copy{bottom:22%}.object-note{bottom:35%}.poster{object-position:55% 50%}}
/* Focused objects share a centered composition with their copy above them. */
.experience:not(.overview) .story{top:12%;left:8%;width:84%;max-width:none;text-align:center}
.experience:not(.overview) .story h1{font-size:clamp(40px,4.2vw,60px);letter-spacing:-2.7px;margin-top:13px}
.experience:not(.overview) .bottom-copy{top:29%;bottom:auto;left:10%;right:10%;text-align:center}
.experience:not(.overview) .bottom-copy p{font-size:13px;margin-top:8px}
.experience:not(.overview) .object-note{left:0;right:0;bottom:26%;justify-content:center}
@media(max-width:760px){
 .experience:not(.overview) .story{top:12%;left:6%;width:88%}
 .experience:not(.overview) .story h1{font-size:clamp(31px,9vw,40px);letter-spacing:-1.7px;margin-top:12px}
 .experience:not(.overview) .bottom-copy{top:25.5%;left:7%;right:7%}
 .experience:not(.overview) .bottom-copy p{font-size:11px;line-height:1.5;margin-top:6px}
 .experience:not(.overview) .object-note{bottom:26%}
}
/* A full-height, fixed presentation. Gestures trigger scenes instead of native scrolling. */
html,body{width:100%;height:100%;overflow:hidden;background:#322318 url('assets/house-gold.webp') 55% center/cover no-repeat fixed}
.journey-track{display:none}.experience{inset:0 auto auto 0;width:100%;height:100vh;height:100lvh;min-height:100%;touch-action:pinch-zoom;background:transparent}
.poster{inset:0;width:100%;height:100%;object-fit:cover;filter:none;transform:none;object-position:55% center}
canvas{inset:0;width:100%;height:100%;touch-action:pinch-zoom}.bottom-copy{display:none}
header{top:calc(env(safe-area-inset-top,0px) + 22px)}
.tour-controls{bottom:max(32px,calc(env(safe-area-inset-bottom,0px) + 22px))}
@media(max-width:760px){.tour-controls{bottom:max(22px,calc(env(safe-area-inset-bottom,0px) + 16px))}}
@supports(height:100dvh){.tour-controls{bottom:calc(100lvh - 100dvh + max(22px,env(safe-area-inset-bottom,0px)))}}
/* Match Safari's surrounding color, with fully opaque edges and long photographic fades. */
:root{--edge-color:#30231a;--edge-fade-top:clamp(120px,18svh,190px);--edge-fade-bottom:clamp(150px,22svh,220px)}
html,body,.experience{background:var(--edge-color)}
.shade{position:absolute;inset:0 0 auto;height:100%;pointer-events:none;background:
 linear-gradient(to bottom,#30231a 0px,#30231af0 20px,#30231a99 65px,#30231a00 var(--edge-fade-top)),
 linear-gradient(to top,#30231a 0px,#30231aeb 24px,#30231a99 80px,#30231a00 var(--edge-fade-bottom))}
.progress{left:6%;right:6%;bottom:10px;height:2px;opacity:.35;border-radius:2px}
@supports(height:100dvh){.shade{height:100dvh}.progress{bottom:calc(100lvh - 100dvh + 8px)}}
/* Center the complete opening/closing text group within the visible viewport. */
.experience.overview .story{top:50vh;top:50dvh;bottom:auto;translate:0 -50%}
/* Both bars share a viewport-safe baseline, retaining a clear gap in Safari. */
:root{--tour-bottom:max(32px,calc(env(safe-area-inset-bottom,0px) + 22px));--bars-gap:80px;--tour-bar-height:50px}
.tour-controls{bottom:var(--tour-bottom)}
.season-switch{bottom:calc(var(--tour-bottom) + var(--tour-bar-height) + var(--bars-gap))}
@media(max-width:760px){:root{--tour-bottom:max(22px,calc(env(safe-area-inset-bottom,0px) + 16px));--bars-gap:64px;--tour-bar-height:44px}}
@supports(height:100dvh){:root{--tour-bottom:calc(100lvh - 100dvh + max(22px,env(safe-area-inset-bottom,0px)))}}
/* Compact stacked wordmark and scroll prompt in the header. */
:root{--bars-gap:24px}
header{align-items:center;gap:20px}
.logo{display:flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1}
.logo .logo-formy{font:800 40px/.95 Manrope,Arial;letter-spacing:-2.7px;margin:0;vertical-align:baseline}
.logo .logo-seasons{font:600 18px/1.1 Manrope,Arial;letter-spacing:.7px;margin:0;vertical-align:baseline}
header .scroll-hint{position:static;inset:auto;max-width:170px;font-size:9px;letter-spacing:1.1px;text-align:right;display:flex;align-items:center;gap:12px;line-height:1.5;opacity:.85}
header .scroll-hint span{font-size:17px;margin:0}
@media(max-width:760px){:root{--bars-gap:20px}.logo .logo-formy{font-size:34px;letter-spacing:-2.2px}.logo .logo-seasons{font-size:16px;letter-spacing:.5px}header .scroll-hint{font-size:7px;max-width:135px;letter-spacing:.9px;gap:10px}header .scroll-hint span{font-size:15px}}
/* Keep the opening title on exactly two lines, including narrow iPhones. */
.experience.intro .story h1{font-size:clamp(30px,4.2vw,60px);letter-spacing:-1.6px;line-height:1.12}
.intro-line{display:block;white-space:nowrap}
@media(max-width:760px){.experience.intro .story h1{font-size:clamp(24px,7.6vw,32px);letter-spacing:-.8px;line-height:1.16}}

/* Give the opening and closing copy room beside the vertical credits on desktop. */
@media(min-width:761px){.experience.overview .story{left:12%}}