:root{--stone:#E9E7DF;--ink:#29342F;--trail:#A3AA9C;--muted:#5c665e;--line:#bdc2b6}*{box-sizing:border-box}html{scroll-behavior:auto}body{margin:0;background:var(--stone);color:var(--ink);font-family:system-ui,-apple-system,"Noto Sans JP",sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-underline-offset:5px}button{font:inherit;color:inherit;cursor:pointer}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid #4d6b57;outline-offset:6px}.skip{position:absolute;top:-100px;left:24px;z-index:12;padding:15px;background:var(--stone)}.skip:focus{top:20px}.topline{max-width:1500px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:30px 5vw;font-size:10px;letter-spacing:.13em}.topline a{text-decoration:none}.topline button{border:0;background:transparent;font-size:11px;letter-spacing:.07em;padding:12px;min-height:44px}.js-only{display:none}.enhanced .js-only{display:inline-flex}.hero{max-width:1200px;margin:25px auto 0;padding:38px 7vw 76px;position:relative}.hero .eyebrow{font-size:10px;letter-spacing:.21em;color:var(--muted)}h1{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-weight:400;font-size:clamp(36px,5vw,68px);letter-spacing:.12em;line-height:1.65;margin:28px 0 22px}.hero .intro{font-size:12px;letter-spacing:.11em;line-height:2.3;color:var(--muted)}.hero .scroll{margin-top:48px;font-size:9px;letter-spacing:.24em;color:var(--muted)}.walk{position:relative;max-width:1260px;margin:0 auto;padding:10px 70px 100px;isolation:isolate}.chapter{position:relative;z-index:1;font-size:12px;font-weight:400;letter-spacing:.24em;line-height:1.8;margin:20px 0 64px;padding-top:35px}.chapter span{font-family:Georgia,serif;font-size:11px;display:block;letter-spacing:.14em;color:var(--muted);margin-bottom:9px}.scene{position:relative;z-index:1;width:40%;margin:0 0 150px}.scene.right{margin-left:60%;margin-top:-310px}.scene.small{width:31%;margin-left:7%}.scene.small.right{margin-left:63%}.scene.medium-wide{width:51%;margin-left:0;margin-top:0}.scene.major{width:55%;margin:100px auto 170px}.scene.wide{width:100%;margin:100px 0 160px}.chapter+.scene.right,.scene.major+.scene.right,.scene.wide+.scene.right{margin-top:0}.scene img,.scene video{display:block;width:100%;height:auto;max-height:850px;object-fit:contain}.scene.major img{max-height:1050px}.scene video{background:#29342f;aspect-ratio:9/16}.scene figcaption{display:flex;justify-content:space-between;gap:20px;margin-top:14px;font-size:10px;line-height:1.7;letter-spacing:.07em;color:var(--muted)}.scene figcaption time{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:9px;letter-spacing:.08em}.route-fallback,.route-motion{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}.route-motion{display:none;width:100%;height:100%;overflow:hidden}.route-fallback{left:calc(50% - 24px);width:48px;background:radial-gradient(circle at 24px 3px,rgba(163,170,156,.48) 1.2px,transparent 1.8px) center top/48px 20px repeat-y}.enhanced .route-fallback{display:none}.enhanced .route-motion{display:block}.route-guide{fill:none;stroke:var(--trail);stroke-width:.65;opacity:.12}.route-dots{fill:none;stroke:var(--trail);stroke-width:2.3;stroke-linecap:round;stroke-dasharray:.1 17;opacity:.6}.walker{fill:var(--trail);opacity:.82}.walker .back{opacity:.5}.motion-off .walker{display:none}.arrival{position:relative;max-width:1000px;margin:0 auto;text-align:center;padding:20px 30px 140px}.slime{position:relative;width:144px;height:144px;margin:0 auto 20px;transform-origin:center 85%}.slime img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.slime .open{opacity:0}.slime .closed{opacity:1}.is-ready .slime .open{opacity:1}.is-ready .slime .closed{opacity:0}.is-clapping .slime{animation:slime-settle 1.9s ease-in-out both}.is-clapping .slime .open{animation:hands-open 1.9s steps(1,end) both}.is-clapping .slime .closed{animation:hands-closed 1.9s steps(1,end) both}.clap-copy{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:21px;font-weight:400;letter-spacing:.25em;margin:15px 0 25px}.rest-copy{font-size:11px;letter-spacing:.13em;color:var(--muted)}.replay{margin:27px auto 0;border:0;border-bottom:1px solid var(--line);padding:10px 4px;background:none;font-size:10px;letter-spacing:.06em;min-height:44px}.arrival .echo{height:110px}.end-links{display:flex;justify-content:center;gap:35px;flex-wrap:wrap;font-size:11px;letter-spacing:.04em}.footer{max-width:1260px;margin:auto;padding:25px 5vw;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:24px;font-size:9px;line-height:1.8;letter-spacing:.09em;color:var(--muted)}.motion-off .slime,.motion-off .slime img{animation:none!important}.motion-off .slime .open{opacity:0}.motion-off .slime .closed{opacity:1}.motion-off .replay{display:none}.motion-off .rest-copy{opacity:1}.video-fallback{font-size:11px;line-height:1.8}.no-script{max-width:40em;margin:20px auto;padding:0 24px;font-size:11px;line-height:1.8;color:var(--muted)}
@keyframes hands-open{0%,21%{opacity:1}23%,36%{opacity:0}38%,53%{opacity:1}55%,100%{opacity:0}}@keyframes hands-closed{0%,21%{opacity:0}23%,36%{opacity:1}38%,53%{opacity:0}55%,100%{opacity:1}}@keyframes slime-settle{0%,19%,39%,51%,72%,100%{transform:translateY(0) scale(1)}24%,57%{transform:translateY(1px) scale(1.015,.985)}30%,63%{transform:translateY(-1px) scale(.995,1.005)}}
@media(min-width:1500px){.hero{padding-left:70px;padding-right:70px}}
@media(max-width:760px){.topline{padding:14px 22px;font-size:9px}.hero{margin-top:6px;padding:30px 26px 45px}.hero h1{font-size:39px;line-height:1.75;margin-top:25px;letter-spacing:.09em}.hero .intro{font-size:11px}.hero .scroll{margin-top:35px}.walk{padding:5px 25px 65px}.chapter{font-size:11px;margin-bottom:38px;padding-top:25px}.scene,.scene.small,.scene.medium-wide,.scene.right,.scene.small.right{width:87%;margin:0 0 85px}.scene.right,.scene.small.right{margin-left:13%}.scene.major{width:100%;margin:40px 0 95px}.scene.wide{width:calc(100% + 50px);margin:25px -25px 90px}.scene.wide figcaption{padding-left:25px;padding-right:25px}.scene img,.scene video{max-height:none}.scene figcaption{font-size:10px;margin-top:12px;gap:12px}.scene figcaption time{font-size:9px}.scene.major img{max-height:none}.arrival{padding:15px 25px 90px}.slime{width:126px;height:126px}.clap-copy{font-size:19px}.arrival .echo{height:80px}.footer{padding:20px 24px;font-size:8px}.end-links{gap:24px;font-size:10px}.route-dots{opacity:.54}.walker{opacity:.7}}
@media(max-width:359px){.hero h1{font-size:34px}.topline{padding-left:18px;padding-right:18px}.walk{padding-left:20px;padding-right:20px}.scene.wide{width:calc(100% + 40px);margin-left:-20px;margin-right:-20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}.walker{display:none!important}.slime,.slime img{animation:none!important}.slime .open{opacity:0!important}.slime .closed{opacity:1!important}.replay{display:none!important}}

/* Scroll-scrubbed photo entrance; layout and caption positions stay stable. */
.photo-reveal{transform:translateY(var(--rise,0px));clip-path:inset(var(--cover,0%) 0 0);opacity:var(--photo-opacity,1)}
.motion-off .photo-reveal,.photo-reveal:focus-within{transform:none;clip-path:none;opacity:1}
@media(prefers-reduced-motion:reduce){.photo-reveal{transform:none!important;clip-path:none!important;opacity:1!important}}
@media print{.photo-reveal{transform:none!important;clip-path:none!important;opacity:1!important}.route-motion{display:none!important}}

/* The closing thought is the visual focus after the small two-clap gesture. */
.arrival .rest-copy{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:28px;font-weight:400;line-height:2;letter-spacing:.12em;color:var(--ink);margin:32px 0 14px}
.arrival .clap-copy{font-size:17px;color:var(--muted);margin-bottom:0}
@media(max-width:760px){.arrival .rest-copy{font-size:22px;letter-spacing:.08em;line-height:2;margin-top:27px}.arrival .clap-copy{font-size:15px}}

/* Closing copy: the idea first, followed by the personal Togakushi experience. */
.arrival .rest-copy{font-size:clamp(28px,3.2vw,38px);line-height:1.8;letter-spacing:.08em;margin:36px 0 0}
.arrival .ending-sub{font-size:14px;font-weight:400;line-height:2.15;letter-spacing:.035em;color:var(--muted);margin:26px 0 0}
@media(max-width:760px){.arrival .rest-copy{font-size:clamp(23px,6.5vw,28px);line-height:1.85;letter-spacing:.05em;margin-top:28px}.arrival .ending-sub{font-size:13px;line-height:2.1;letter-spacing:0;margin-top:22px}}

/* Optional sound trial: shared fixed controls, independent sound and motion. */
.site-controls{position:fixed;z-index:20;top:max(12px,env(safe-area-inset-top));right:max(20px,env(safe-area-inset-right));gap:8px;align-items:center;padding:5px;border:1px solid #bdc2b6;border-radius:6px;background:#e9e7dff5;max-width:calc(100vw - 24px)}
.site-controls button{border:0;background:transparent;min-height:44px;min-width:44px;padding:10px 12px;font-size:11px;line-height:1.4;letter-spacing:.02em;white-space:nowrap}
.site-controls button+button{border-left:1px solid var(--line)}
#sound-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:85px}
#sound-toggle[hidden]{display:none}
#sound-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#sound-toggle .sound-waves{display:none}
#sound-toggle[data-state="on"] .sound-waves{display:block}
#sound-toggle[data-state="on"] .sound-mute{display:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.footer{flex-wrap:wrap}.audio-credit{font-size:9px}
@media(max-width:760px){.site-controls{right:max(12px,env(safe-area-inset-right));top:max(8px,env(safe-area-inset-top));gap:3px;padding:3px}.site-controls button{font-size:10px;padding:10px 9px}#sound-toggle{min-width:79px;gap:5px}.topline{padding-top:calc(76px + env(safe-area-inset-top))}.footer{gap:15px}.audio-credit{font-size:8px}}
@media(max-width:319px){.site-controls{flex-direction:column;align-items:stretch}.site-controls button+button{border-left:0;border-top:1px solid var(--line)}.topline{padding-top:calc(124px + env(safe-area-inset-top))}}
/* Contacts measured from the user's two-clap recording: 0.199365s / 0.811565s. */
@keyframes hands-open{0%{opacity:1}10.493%{opacity:0}27%{opacity:1}42.714%,100%{opacity:0}}
@keyframes hands-closed{0%{opacity:0}10.493%{opacity:1}27%{opacity:0}42.714%,100%{opacity:1}}
@keyframes slime-settle{0%,8%,20%,40%,54%,100%{transform:translateY(0) scale(1)}10.493%,42.714%{transform:translateY(1px) scale(1.015,.985)}15%,48%{transform:translateY(-1px) scale(.995,1.005)}}

@media(min-width:761px){.topline{min-height:104px}}

/* Five breathing spaces on mobile; the original photo margins remain intact. */
.walking-pause,.mobile-route{display:none}
@media(max-width:760px){
  .enhanced .route-motion{display:none}
  .enhanced .walking-pause{display:block;height:176px;position:relative;pointer-events:none}
  .enhanced .before-walking-pause{margin-bottom:0}
  .enhanced .mobile-route{display:block;position:absolute;z-index:0;pointer-events:none;overflow:visible;opacity:0}
  .pause-walker{fill:#919C88;opacity:.92}
  .pause-guide{fill:none;stroke:var(--trail);stroke-width:.65;opacity:.16}
  .pause-dots{fill:none;stroke:var(--trail);stroke-width:2.3;stroke-linecap:round;stroke-dasharray:.1 14;opacity:.6}
  .motion-off .mobile-route{visibility:hidden}
}
@media(prefers-reduced-motion:reduce){.mobile-route{visibility:hidden!important}}
@media print{.walking-pause,.mobile-route{display:none!important}}

/* Gallery reveal: a stone-coloured soft peripheral veil, composited only.
   Original pixels, colour, geometry and captions are untouched. */
.vision-window{position:relative;overflow:hidden;isolation:isolate}
.vision-veil{position:absolute;inset:0;pointer-events:none;transform-origin:50% 48%;background:radial-gradient(ellipse at 50% 48%,transparent 8%,rgba(233,231,223,.08) 22%,rgba(233,231,223,.55) 53%,#E9E7DF 83%);opacity:.94}
[data-vision="quiet"] .vision-veil{opacity:.65}
[data-vision-state="opening"] .vision-veil{will-change:transform,opacity}
[data-vision-state="clear"] .vision-veil,.motion-off .vision-veil{display:none}
@media(prefers-reduced-motion:reduce){.vision-veil{display:none!important}}
@media print{.vision-veil{display:none!important}}

/* Introductory sound guidance, shown once in normal document flow. */
.hero .sound-note{margin:22px 0 0;font-size:12px;line-height:1.9;letter-spacing:.035em;color:var(--muted)}
.hero .sound-note small{display:block;margin-top:3px;font-size:11px;letter-spacing:.02em}
.hero .sound-note+.scroll{margin-top:26px}