:root{
--paper:#f3e9d4;--paper-deep:#e9dcc2;--ink:#183735;--muted:#47605a;--gold:#a75b24;--glow:#e8b46a;
color-scheme:light;font-family:Georgia,'Times New Roman',serif;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}
body{margin:0;background:
radial-gradient(120% 70% at 50% 0%,#f7efdd 0%,var(--paper) 55%,var(--paper-deep) 100%)}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit}
button{font:inherit;color:inherit}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:5px}
#journey{height:470svh}
.scene{position:sticky;top:0;height:100svh;min-height:620px;overflow:hidden}
header{height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;gap:20px}
.brand{text-decoration:none;font-size:18px;font-weight:bold}
.brand span{display:block;font:10px/1.5 system-ui,sans-serif;font-weight:400;letter-spacing:.1em;text-transform:uppercase;margin-top:4px}
.place{margin:0;text-align:right;font:10px/1.6 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.layout{height:calc(100% - 80px);display:flex;align-items:center;justify-content:center;gap:clamp(35px,6vw,110px);padding:0 5vw 32px}
figure{margin:0;flex-shrink:0;display:flex;flex-direction:column}
.clip{position:relative;height:min(78svh,800px);aspect-ratio:825/1024;overflow:hidden;
border:3px solid var(--ink);border-radius:4px;background:#0d211f;
box-shadow:0 0 0 6px rgba(243,233,212,.9),0 0 55px 8px rgba(232,180,106,.55),0 24px 60px -18px rgba(24,55,53,.45)}
.clip img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;transform-origin:0 0;will-change:transform}
figcaption{font:10px/1.5 system-ui,sans-serif;color:var(--muted);text-align:center;padding-top:9px}
.story{max-width:390px;flex:1}
.eyebrow{font:11px/1.5 system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 20px}
h1{font-size:clamp(40px,4.8vw,70px);font-weight:400;line-height:1.02;letter-spacing:-.04em;margin:0 0 38px}
h1 em{color:var(--gold);font-weight:400}
.beats{display:grid;min-height:185px}
.beats article{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .45s ease,transform .45s ease,visibility 0s linear .45s}
.beats article.active{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease,transform .45s ease}
.number{font:11px/1.5 system-ui,sans-serif;letter-spacing:.14em;color:var(--gold);margin:0 0 13px}
h2{font-size:23px;line-height:1.15;font-weight:400;margin:0 0 12px}
article>p:last-child{font-size:16px;line-height:1.55;margin:0;max-width:34ch}
nav{display:flex;align-items:center;gap:14px;margin-top:20px}
nav button{width:44px;height:44px;border:1px solid #b8b6a3;background:none;cursor:pointer;font:12px system-ui,sans-serif;border-radius:2px}
nav button[aria-current]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
nav span{height:1px;flex:1;background:#b8b6a3;max-width:40px}
.scroll{font:11px/1.5 system-ui,sans-serif;color:var(--muted);margin:22px 0 0}
.scroll span{margin-left:15px;font-size:17px;display:inline-block;animation:hint 2.2s ease-in-out infinite}
@keyframes hint{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
footer{max-width:750px;margin:auto;padding:60px 25px 100px;font:13px/1.7 system-ui,sans-serif;color:var(--muted)}
footer p{margin-top:0}
footer>a{display:block;margin-top:30px}
summary{cursor:pointer;padding:10px 0}
details a{display:block;padding:8px 0}
[hidden]{display:none!important}
@media(max-width:760px){
.scene{min-height:0}
header{height:64px;padding:0 18px;gap:10px}
.brand{font-size:15px}
.brand span{font-size:8px;letter-spacing:.04em}
.place{font-size:8px;letter-spacing:.06em}
.layout{flex-direction:column;justify-content:flex-start;gap:0;height:calc(100% - 64px);padding:0 16px 12px}
figure{width:min(100%,calc((100svh - 348px)*.805664));margin:12px auto 0}.clip{width:100%;height:auto}
figcaption{font-size:8px;padding-top:6px}
.story{width:100%;max-width:520px;flex:0;margin-top:20px}
.eyebrow{font-size:8px;letter-spacing:.1em;margin-bottom:4px}
h1{font-size:25px;line-height:1;letter-spacing:-.035em;margin:0 0 10px}
h1 br{display:none}
h1 em{margin-left:5px}
.beats{min-height:88px}
.number{float:right;font-size:9px;margin:4px 0 0 12px}
h2{font-size:17px;line-height:1.2;margin:0 0 6px}
article>p:last-child{font-size:13px;line-height:1.35;max-width:43ch}
nav{margin-top:8px;gap:12px}
nav button{width:44px;min-height:44px;font-size:10px}
nav span{max-width:22px}
.scroll{position:absolute;bottom:16px;right:18px;font-size:9px;margin:0}
.scroll span{margin-left:5px}
}
@media(max-width:360px){.place{display:none}}
@media(max-height:690px) and (max-width:760px){
figure{width:min(100%,calc((100svh - 316px)*.805664));margin-top:8px}
.story{margin-top:14px}
h1{font-size:21px;margin-bottom:7px}
.eyebrow{display:none}
.beats{min-height:80px}
h2{font-size:16px}
article>p:last-child{font-size:12px}
nav{margin-top:3px}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.beats article,.beats article.active{transition:none}
.scroll span{animation:none}
}