*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:#432b30;background:#f5ecd9;font-family:Arial,Helvetica,sans-serif}#journey{height:650vh}.stage{height:100svh;position:sticky;top:0;overflow:hidden;background:radial-gradient(ellipse at 100% 100%,#efd0b5 0,transparent 58%),linear-gradient(115deg,#faf7eb,#f4e7ce)}.arcs{position:absolute;width:110vw;height:110vw;border:1px solid #9e927b33;border-radius:50%;top:54%;left:-5%;pointer-events:none}.arcs:after{content:"";position:absolute;inset:7%;border:1px solid #9e927b33;border-radius:50%}header{position:absolute;left:2.5%;top:8.6%;z-index:8}header a{font:italic clamp(15px,1.5vw,26px) Georgia,serif;color:#ab6065;text-underline-offset:6px}h1{font-size:clamp(26px,3.4vw,59px);letter-spacing:-.055em;line-height:1.03;font-weight:600;margin:42px 0 0}h1 em{font-family:Georgia,serif;font-weight:400;color:#b5666c;letter-spacing:-.06em}.rule{position:absolute;top:49.1%;left:2.5%;right:1.2%;height:1px;background:#76614e33}.counter{position:absolute;z-index:9;top:49.1%;left:19.4%;transform:translate(-50%,-50%);width:clamp(72px,7.1vw,123px);aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:#f4eddc;border:1px solid #ad5a64;border-radius:50%;box-shadow:0 0 0 5px #f4eddc88;font:clamp(22px,2vw,35px) Georgia,serif}.counter button{border:0;background:none;color:#a45c65;padding:4px;cursor:pointer;opacity:0;position:absolute;font-size:25px}.counter:hover button,.counter:focus-within button{opacity:1}#previous{left:3px}#next{right:3px}.aside{position:absolute;left:2.5%;bottom:10.6%;width:28%;font-size:clamp(15px,1.4vw,25px);line-height:1.48;color:#7d756c;margin:0}.deck{position:absolute;top:49.1%;left:50.6%;width:35.4vw;max-width:67vh;aspect-ratio:608/536;transform:translate(-50%,-50%);z-index:5;perspective:1400px}.card{position:absolute;inset:0;margin:0;border-radius:22px;overflow:hidden;box-shadow:0 22px 33px #51343735;will-change:transform,opacity;transform-origin:50% 70%}.card img{display:block;width:100%;height:100%;object-fit:cover}.copy{position:absolute;right:1.2%;top:41%;width:29.4%;text-align:right;z-index:6}.copy h2{font:400 clamp(23px,2.8vw,49px)/1.1 'Times New Roman',serif;letter-spacing:-.055em;white-space:nowrap;margin:0 0 9.8vh}.copy p{font:clamp(16px,1.52vw,27px)/1.4 'Times New Roman',serif;letter-spacing:-.035em;margin:0;color:#786251}.intro{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;font:clamp(50px,8.4vw,148px) 'Times New Roman',serif;color:#a84f60;letter-spacing:-.07em;white-space:nowrap}.intro span:last-child{transform:translateX(10%)}.top{position:absolute;bottom:8.3%;right:1%;height:66px;width:66px;border:0;border-radius:50%;font:32px Arial;background:#fffcf5;color:#432b30;cursor:pointer;box-shadow:0 12px 24px #634d3825;z-index:10}.scroll-hint{position:absolute;bottom:4%;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.2em;color:#976969}.scroll-hint span{display:inline-block;margin-left:16px;font-size:20px}@media(max-width:760px){#journey{height:620vh}header{top:4%;left:6%}header a{font-size:16px}h1{font-size:32px;margin-top:20px}.deck{width:70vw;max-width:44vh;top:46%;left:50%}.counter{left:12%;top:75%;width:58px;font-size:22px}.rule{top:75%;left:6%;right:6%}.aside{display:none}.copy{top:72%;right:6%;width:70%}.copy h2{font-size:25px;margin:0 0 32px;white-space:normal}.copy p{font-size:17px;line-height:1.35}.top{height:42px;width:42px;bottom:2%;right:5%;font-size:24px}.scroll-hint{bottom:2%;left:6%;transform:none;font-size:8px}.card{border-radius:14px}.intro{font-size:13vw;flex-direction:column;justify-content:center;gap:43vh}.intro span:last-child{transform:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Opening title separates horizontally before the commitment sequence. */
.intro{justify-content:center;gap:2.2vw;z-index:7;pointer-events:none;font-size:clamp(28px,8.4vw,148px)}
.intro span{display:block;will-change:transform}
.intro span:first-child{transform:translateX(calc(var(--split,0) * -75vw))}
.intro span:last-child{transform:translateX(calc(var(--split,0) * 75vw))}
@media(max-width:760px){.intro{flex-direction:row;gap:2vw;font-size:8.6vw}.intro span:last-child{transform:translateX(calc(var(--split,0) * 75vw))}}