:root{--blue:#0954fa;--paper:#f3efe6;--serif:'Yu Mincho','Hiragino Mincho ProN','Noto Serif JP',serif;color:var(--paper);background:var(--blue);font-family:var(--serif);font-synthesis:none}*{box-sizing:border-box}body{margin:0}a{color:inherit}a,button{transition:opacity .15s}a:hover,button:hover{opacity:.65}a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:6px}header{position:absolute;z-index:3;top:3.1vw;left:2.4%;right:3.4%;display:flex;justify-content:space-between;align-items:start;color:#090f25;font-family:Arial,sans-serif;font-size:clamp(10px,1.06vw,16px);font-weight:700;line-height:1.15}header a{text-decoration:none}nav{display:flex;gap:3.4vw}nav a{text-decoration:underline;text-underline-offset:2px}main{position:relative;min-height:262vw;overflow:hidden}section,figure{position:absolute;margin:0;z-index:1}p{margin:0 0 1.25em}.wind-text{font-size:clamp(16px,1.75vw,27px);line-height:1.3;font-weight:400;letter-spacing:.015em}.wind-text p:last-child{margin:0}.glyph{display:inline-block;white-space:pre;transform-origin:50% 80%}.motion-ready .wind-text:not(.arrived) .glyph{opacity:0}.opening{inset:0 0 auto;height:62vw}h1{font-weight:400;margin:0;line-height:1}.title-wind{position:absolute;left:22.5%;top:14.4vw;font-size:10.8vw;transform:rotate(-5deg)}.title-seas{position:absolute;left:28.3%;top:24vw;font-size:9.4vw;letter-spacing:-.065em}.title-seas>span{font-size:1.16em;display:inline-block;transform:translateY(-.08em) rotate(5deg)}.title-over{position:absolute;left:60.5%;top:29vw;font-size:4.4vw;line-height:1.25}.title-over:first-line{font-size:2.4vw}.english{position:absolute;left:14%;top:40.5vw;font:clamp(10px,1.3vw,17px) Arial,sans-serif;color:#09132c}.definition{left:4%;top:64.5vw;width:49%}.boat{left:34.8%;top:78.8vw;width:24.8%}.boat img,.portrait img{display:block;width:100%;height:auto}.story{left:59%;top:121.8vw;width:38%}.portrait{left:10.6%;top:139.6vw;width:29.4%}.quote{left:46.5%;top:170.5vw;width:50%}.closing{left:15%;top:204.5vw;width:70%;text-align:center}.closing .wind-text{font-size:clamp(20px,2.4vw,36px);line-height:1.75}.closing p+p{margin-top:1.6em}.wind-route{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}.wind-route path{fill:none;stroke:var(--paper);stroke-width:1.1;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}.trace{opacity:.13}.ink{opacity:.85}footer{background:#f5f2ed;color:#171717;padding:2.7vw 4%;display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:6%;font:clamp(10px,1vw,14px)/1.35 Arial,sans-serif}footer h2{font-size:1em;margin:0}footer p{font-size:.8em;margin:0 0 2em}footer div>span{font-family:var(--serif);text-decoration:underline}footer div>h2:not(:first-child){margin-top:3em}button{display:block;margin-top:3em;background:none;color:inherit;border:0;border-bottom:1px solid;padding:8px 0;cursor:pointer;font:inherit}
@media(max-width:600px){header{top:22px;left:20px;right:20px;font-size:9px}nav{gap:14px;font-size:10px}main{min-height:2390px}.opening{height:490px}.title-wind{top:130px;left:15%;font-size:19vw}.title-seas{top:205px;left:23%;font-size:15vw}.title-over{top:255px;left:67%;font-size:7vw}.english{top:350px;left:14%;font-size:10px}.definition{top:510px;left:7%;width:90%}.wind-text{font-size:15px;line-height:1.65;letter-spacing:0}.boat{top:730px;left:38%;width:40%}.story{top:1100px;left:20%;width:78%}.portrait{top:1410px;left:9%;width:52%}.quote{top:1640px;left:14%;width:84%}.closing{top:1930px;left:4%;width:92%}.closing .wind-text{font-size:17px;line-height:2}footer{padding:28px 22px;grid-template-columns:1fr 1fr;gap:28px;font-size:10px}footer>div:first-child{grid-column:1/-1}}
.title-over{width:30%;white-space:nowrap}.title-over small{font-size:.55em}.title-over:first-line{font-size:inherit}
:root{--blue:#0557de;--paper:#d2e8ff}body{overflow-x:clip}#stage{position:relative}header,.english{color:#0c0f32}.wind-route path{stroke:#d2e8ff;stroke-width:1;opacity:1}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:pre-line;border:0}.scroll-story header,.scroll-story h1,.scroll-story .english,.scroll-story figure,.scroll-story footer{transition:none}.scroll-story .wind-route{z-index:0}.scroll-story h1{height:62vw;position:relative}.scroll-story figure{overflow:hidden}nav a{min-height:44px;display:inline-flex;align-items:flex-start}button:active{opacity:.5}
.tail-route{position:absolute;bottom:0;width:100%;height:33vw;pointer-events:none}.tail-route path{fill:none;stroke:var(--paper);stroke-width:1.1;vector-effect:non-scaling-stroke;opacity:.65}
/* Measured from the Framer 1440px canvas; independently positioned glyphs. */
@font-face{font-family:ShipporiTitle;src:url('assets/shippori-title.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
.scroll-story h1{font-family:ShipporiTitle,var(--serif);width:100%;height:62vw;line-height:.92;font-weight:400;overflow:visible}
.scroll-story h1>span{position:absolute;white-space:nowrap;transform:none;letter-spacing:-.02em}
.scroll-story .title-wind{left:21.18056%;top:13.125vw;font-size:10.41667vw;letter-spacing:-.025em}
.title-thirty{left:27.77778%;top:24.23611vw;font-size:6.52778vw;letter-spacing:-.035em!important;line-height:.91}
.title-sea{left:39.58333%;top:21.09722vw;font-size:10.27778vw}
.title-mile{left:50%;top:24.23611vw;font-size:7.63889vw}
.title-particle{left:56.94444%;top:28.40278vw;font-size:2.77778vw;line-height:1}
.title-beyond{left:59.375%;top:30.48611vw;font-size:4.30556vw}
.title-e{left:63.88889%;top:30.76389vw;font-size:4.30556vw}
.title-ru{left:68.40278%;top:30.625vw;font-size:4.30556vw}
@media(min-width:601px){header{top:2.63889vw;left:5.55556%;right:5.55556%}.identity{font-size:1.18056vw}.english{left:13.88889%;top:37.43056vw;font-size:.83333vw;letter-spacing:.04em}}
@media(max-width:600px){.scroll-story h1{top:90px}}
@media(prefers-reduced-motion:reduce){.motion-ready .wind-text:not(.arrived) .glyph{opacity:1!important}.glyph{transform:none!important;opacity:1!important}}
/* Refinement: same title geometry and blue surface, clearer supporting type. */
:root{--wind-width:1.4px;--support-ink:#d2e8ff}
.wind-route .ink,.wind-crossing use{fill:none;stroke:var(--support-ink);stroke-width:var(--wind-width);vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;opacity:1}
.wind-crossing{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.wind-crossing .crossing-clearance{stroke:var(--blue);stroke-width:5.4px}
#wind-master{fill:inherit;stroke:inherit;stroke-width:inherit;opacity:inherit}
.scroll-story h1>span{text-shadow:1px 0 var(--blue),-1px 0 var(--blue),0 1px var(--blue),0 -1px var(--blue)}
header,.english{color:var(--support-ink)}
header{align-items:flex-start;font-weight:500}
.identity{font-size:12px;font-weight:400;line-height:1.4;letter-spacing:.015em}
nav{gap:36px;align-items:baseline}
nav a{font-size:14px;line-height:1.4;font-weight:500;letter-spacing:.035em;text-decoration:none;min-width:44px;min-height:44px;justify-content:center}
header a:hover{opacity:1;color:#fff}nav a:hover,nav a:focus-visible{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
header a:active{opacity:.8}.english{font-size:clamp(14px,1.2vw,16px);line-height:1.4;letter-spacing:.025em}
.header-actions{display:flex;align-items:flex-start;gap:26px}
.language-picker{position:relative;font-family:Arial,sans-serif;color:var(--support-ink)}
.language-trigger{display:flex;align-items:flex-start;justify-content:center;gap:9px;min-width:58px;min-height:44px;margin:0;padding:0 4px;border:0;background:none;color:inherit;font:500 14px/1.4 Arial,sans-serif;letter-spacing:.04em;cursor:pointer}
.language-chevron{width:8px;height:8px;margin-top:4px;border-right:1.25px solid currentColor;border-bottom:1.25px solid currentColor;transform:rotate(45deg);transition:transform .28s cubic-bezier(.22,1,.36,1)}
.language-trigger[aria-expanded="true"] .language-chevron{transform:translateY(4px) rotate(225deg)}
.language-menu{position:absolute;top:44px;right:0;z-index:4;width:72px;padding:7px 0;border:1px solid rgb(234 243 255 / 24%);background:rgb(16 61 181 / 92%);box-shadow:0 6px 8px rgb(7 25 78 / 12%)}
.language-menu[hidden]{display:none}
.language-menu button{display:flex;align-items:center;justify-content:center;width:100%;height:38px;margin:0;padding:0;border:0;background:none;color:rgb(234 243 255 / 68%);font:400 14px/1 Arial,sans-serif;letter-spacing:.04em;cursor:pointer}
.language-menu button[aria-selected="true"]{color:var(--support-ink)}
.language-menu button:hover,.language-menu button:focus-visible{color:#fff;opacity:1;background:rgb(234 243 255 / 7%)}
@media(max-width:600px){header{left:16px;right:16px;gap:12px}.identity{font-size:10px;max-width:145px}.header-actions{gap:7px}nav{gap:5px}nav a{font-size:10px;letter-spacing:0;min-width:36px}.language-trigger{min-width:38px;font-size:10px;gap:5px}.language-menu{top:40px;width:54px}.language-menu button{height:34px;font-size:11px}.english{font-size:14px}}
/* Airier title composition and the approved soft ocean-B palette. */
:root{--blue:var(--theme-brand);--paper:#eaf3ff;--support-ink:#eaf3ff;--wind-ink:#c7d4f4}
.wind-route .ink,.wind-crossing .crossing-ink{stroke:var(--wind-ink)}
.scroll-story .title-wind{top:11.80556vw}
.title-thirty{left:26.04167%;top:23.61111vw}
.title-sea{left:43.40278%;top:22.22222vw}
.title-mile{left:56.94444%;top:25.34722vw}
.title-particle{left:65.97222%;top:29.16667vw}
.title-beyond{left:48.61111%;top:35.41667vw}
.title-e{left:56.25%;top:37.5vw}
.title-ru{left:64.58333%;top:35.76389vw}
@media(max-width:600px){.wind-crossing .crossing-clearance{stroke-width:3.4px}}
/* Reference 2: close-set middle phrase, raised final phrase, one pressure ribbon. */
.scroll-story .title-wind{left:22.91667%;top:14.23611vw}
.title-thirty{left:28.125%;top:26.04167vw}
.title-sea{left:40.625%;top:22.56944vw}
.title-mile{left:51.73611%;top:25.34722vw}
.title-particle{left:59.72222%;top:29.86111vw}
.title-beyond{left:62.5%;top:33.33333vw}
.title-e{left:67.36111%;top:34.02778vw}
.title-ru{left:71.52778%;top:33.68056vw}
.wind-route .ink,.wind-crossing .crossing-ink{fill:var(--wind-ink);stroke:none}
#home > .wind-route .ink,#home > .wind-crossing .crossing-ink{opacity:.75}
#wind-pressure{fill:inherit;stroke:none}
#wind-pressure path{fill:inherit;stroke:none;opacity:1}
.wind-crossing .crossing-clearance{stroke-width:3px}
@media(max-width:600px){.wind-crossing .crossing-clearance{stroke-width:2.4px}}
/* First two narrative blocks: opening statement, then quieter explanatory copy. */
.definition .wind-text,.story .wind-text{font-size:clamp(16px,1.4vw,21px);line-height:1.8;letter-spacing:.025em}
.definition .wind-text p:first-child,.story .wind-text p:first-child{font-size:clamp(22px,2.1vw,32px);line-height:1.55;letter-spacing:.035em;margin-bottom:1.15em}
.wind-text .glyph{transform-origin:50% 65%}
@media(max-width:600px){.definition .wind-text,.story .wind-text{font-size:15px;line-height:1.85}.definition .wind-text p:first-child,.story .wind-text p:first-child{font-size:20px;line-height:1.65;letter-spacing:.01em;text-wrap:balance}}
.boat boat-flow-animation{display:block;width:100%}
.boat{aspect-ratio:4/5;box-shadow:0 18px 42px -12px rgb(5 16 65 / 30%),0 3px 12px rgb(5 16 65 / 12%)}
/* The blue page slides over a stationary colophon, uncovering it at the end. */
.icon-library{position:absolute;width:0;height:0;overflow:hidden}
#stage{isolation:isolate}
main{z-index:1;background:var(--blue);box-shadow:0 12px 28px -20px rgb(12 15 50 / 25%)}
footer{position:sticky;bottom:0;z-index:0;display:grid;grid-template-columns:minmax(300px,1.05fr) minmax(370px,1.3fr) minmax(150px,.65fr);grid-template-rows:auto;column-gap:clamp(36px,3.2vw,52px);align-items:start;min-height:230px;padding:38px clamp(32px,5.5vw,88px) 30px;background:var(--theme-surface);color:var(--theme-muted);font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif}
footer h2{margin:0 0 25px;font:600 15px/1.3 Georgia,"Times New Roman",serif;letter-spacing:.08em;color:var(--theme-ink)}
footer p{font-size:13px;margin:0;line-height:1.9;letter-spacing:.025em}
.footer-notice p,.footer-contact p{white-space:nowrap}
.footer-notice{padding-right:clamp(28px,2.5vw,42px);border-right:1px solid var(--theme-rule)}
.footer-contact{padding-left:0}
.footer-signoff{grid-column:3;justify-self:start;display:flex;flex-direction:column;align-items:flex-start;gap:14px;width:144px}
.footer-copyright{width:132px;margin-left:12px;text-align:center;white-space:nowrap;font:400 11px/1.4 Georgia,"Times New Roman",serif;letter-spacing:.04em;color:var(--theme-faint)}
.contact-icons,.portrait-socials{display:flex;gap:10px;align-items:center}
.footer-contact .contact-icons{margin-top:22px;gap:22px}
.social-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:8px;margin:0;border:0;background:none;color:inherit}
.social-icon svg{width:24px;height:24px;display:block}
.social-icon img{display:block;width:24px;height:24px;opacity:.72}
.social-icon:disabled{opacity:1;cursor:default}
.scroll-story .portrait{overflow:visible}
.portrait-media{position:relative;width:100%;overflow:hidden}
.portrait-socials{position:absolute;right:4.5%;bottom:5%;justify-content:flex-end;margin:0;color:#fff;gap:6px}
.portrait-socials .social-icon{width:34px;height:34px;padding:6px;filter:drop-shadow(0 1px 3px rgb(4 16 51 / 35%))}
.site-back-to-top{display:grid;place-items:center;width:132px;height:132px;margin:0 0 0 12px;padding:16px;border:0;border-bottom:0;background:none;cursor:pointer}
.site-back-to-top img{display:block;width:92px;height:92px;opacity:.58;transform:rotate(5deg);transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .25s ease}
.site-back-to-top:hover{opacity:1}.site-back-to-top:hover img,.site-back-to-top:focus-visible img{opacity:.82;transform:scale(1.13) rotate(1deg)}
@media(max-width:900px){footer{grid-template-columns:1fr 1fr 110px;column-gap:28px;min-height:240px;padding:32px 5% 26px}.footer-notice{padding-right:28px}.footer-signoff{width:104px;align-items:center}.footer-copyright{width:auto;margin-left:0}.site-back-to-top{justify-self:center;width:104px;height:104px;margin-left:0}.site-back-to-top img{width:74px;height:74px}}
@media(max-width:600px){footer{grid-template-columns:1fr 76px;grid-template-rows:auto auto auto;gap:20px 16px;min-height:0;padding:30px 7% 26px}.footer-notice,.footer-contact{grid-column:1/-1}.footer-notice{padding:0 0 22px;border-right:0;border-bottom:1px solid #b9bab5}footer h2{margin-bottom:16px;font-size:14px}footer p{font-size:11px;line-height:1.85}.footer-notice p,.footer-contact p{white-space:normal}.footer-signoff{grid-column:2;grid-row:3;width:76px;gap:10px}.footer-copyright{font-size:9px}.site-back-to-top{width:76px;height:76px;padding:8px}.site-back-to-top img{width:54px;height:54px}.portrait-socials{right:4%;bottom:4%;gap:3px}.portrait-socials .social-icon{width:30px;height:30px;padding:5px}}
@media(prefers-reduced-motion:reduce){footer{position:relative}.site-back-to-top img{transition:none}}
html{scrollbar-gutter:stable;overscroll-behavior-y:none}
html.intro-locked{overflow:hidden;overscroll-behavior:none}
html.intro-skip:not(.intro-ready) #stage{visibility:hidden}
.intro-locked body{overflow:hidden;touch-action:none}
.scroll-story header{position:fixed}
.scroll-story header.nav-ready{opacity:1;visibility:visible;transform:translateY(0);transition:transform .42s cubic-bezier(.22,1,.36,1),opacity .3s ease,visibility 0s}
.scroll-story header.nav-hidden{opacity:0;visibility:hidden;transform:translateY(calc(-100% - 4vw - 24px));pointer-events:none;transition:transform .32s cubic-bezier(.22,1,.36,1),opacity .24s ease,visibility 0s .32s}
@media(prefers-reduced-motion:reduce){.scroll-story header.nav-ready{transition:none}}
/* Refine the first narrative handoff without disturbing the wider composition. */
.boat{left:43.5%;top:77.2vw;width:20.8%}
.story{top:115.8vw}
@media(max-width:600px){.boat{top:710px;left:52%;width:33%}.story{top:1020px}}
/* Home reading rhythm: keep the hero and supporting copy, soften chapter type and shorten the gaps. */
@media(min-width:601px){
 main{min-height:238vw}
 .story{top:109vw}
 .portrait{top:131vw}
 .quote{top:157vw}
 .closing{top:185vw}
}
.definition .wind-text p:first-child,.story .wind-text p:first-child{font-size:clamp(19px,1.85vw,28px)}
.quote .wind-text{font-size:clamp(14px,1.55vw,24px)}
.closing .wind-text{font-size:clamp(18px,2.1vw,31px)}
@media(max-width:600px){
 main{min-height:2280px}
 .story{top:960px}
 .portrait{top:1330px}
 .quote{top:1560px}
 .closing{top:1800px}
 .definition .wind-text p:first-child,.story .wind-text p:first-child{font-size:18px}
 .quote .wind-text{font-size:15px}
 .closing .wind-text{font-size:17px}
}
/* Leave half a viewport of open sky between the final wish and colophon. */
main{--ending-start:170vw;min-height:calc(170vw + 150svh)}
.ending{top:var(--ending-start);left:0;right:0;bottom:0;min-height:150svh;overflow:hidden}
.ending .closing{position:absolute;top:calc(185vw - var(--ending-start) - 38px)}
@media(min-width:900px){.ending .closing{top:calc(185vw - var(--ending-start) - 90px)}}
.closing p+p{margin-top:2.6em}
@media(min-width:601px) and (max-width:800px){main{--ending-start:175vw;min-height:calc(175vw + 150svh)}}
@media(max-width:600px){main{--ending-start:1690px;min-height:calc(1690px + 150svh)}.ending .closing{top:calc(1800px - var(--ending-start) - 38px)}}
/* The final wish gradually opens into sky; the colophon stays inside it. */
.ending{isolation:isolate;--ending-progress:0}
.ending-sky,.ending-clouds{position:absolute;inset:0;pointer-events:none}
.ending-sky{z-index:0;opacity:var(--ending-progress);background:var(--blue)}
.ending-digital-clouds{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:1;visibility:hidden;transform:translate3d(0,440px,0);transition:none}
.ending.cloud-visible .ending-digital-clouds{visibility:visible}
.ending-digital-clouds canvas{display:block;width:100%;height:100%}
.cloud-particle-group{position:absolute;inset:0;pointer-events:none}
.ending .closing{z-index:2}
@media(prefers-reduced-motion:reduce){.ending-digital-clouds{transition:none;transform:none}}
/* First-screen title edges and sparse air motes. */
.opening h1{color:#f1f7ff;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.identity{opacity:.76}.header-actions{opacity:.88}
.opening-motes{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity 1s ease}
html[data-opening="complete"] .opening-motes{opacity:1}
.opening-motes span,.home-air-motes span{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);border-radius:50%;background:#e7f4ff;opacity:var(--alpha);animation:opening-mote-drift var(--dur) ease-in-out var(--delay) infinite alternate}
.opening-motes .still,.home-air-motes .still{animation:none}
@keyframes opening-mote-drift{to{transform:translate3d(var(--dx),var(--dy),0);opacity:calc(var(--alpha) * .55)}}
@media(max-width:600px){.opening-motes span:nth-child(2n){display:none}}
@media(prefers-reduced-motion:reduce){.opening-motes{transition:none}.opening-motes span{animation:none}}
/* Give the closing wish its own pause without moving the existing wind path. */
main{--wish-gap:15svh;min-height:calc(var(--ending-start) + 150svh + var(--wish-gap))}
.ending{min-height:calc(150svh + var(--wish-gap))}
.ending .closing{top:calc(185vw - var(--ending-start) - 38px + var(--wish-gap))}
@media(min-width:900px){.ending .closing{top:calc(185vw - var(--ending-start) - 90px + var(--wish-gap))}}
@media(max-width:600px){.ending .closing{top:calc(1800px - var(--ending-start) - 38px + var(--wish-gap))}}
.transition-glints{position:absolute;top:calc(var(--ending-start) - 3vw);left:0;z-index:2;width:100%;height:calc(15vw + var(--wish-gap));pointer-events:none}
.transition-glints span{position:absolute;width:2px;height:2px;border-radius:50%;background:#e5f3ff;animation:transition-glint 8s ease-in-out infinite alternate}
.transition-glints span:first-child{left:38%;top:22%;opacity:.38;animation-delay:-2.3s}
.transition-glints span:nth-child(2){left:72%;top:49%;width:3px;height:3px;opacity:.56;animation-delay:-5.1s;animation-duration:9.5s}
.transition-glints span:last-child{left:55%;top:78%;width:1.5px;height:1.5px;opacity:.32;animation-delay:-.7s;animation-duration:7.2s}
@keyframes transition-glint{to{transform:translate3d(3px,-5px,0);opacity:.22}}
@media(prefers-reduced-motion:reduce){.transition-glints span{animation:none}}
/* Keep the portrait's soft image shadow and restrained social-icon feedback. */
.portrait-media{box-shadow:0 18px 42px rgb(5 24 82 / 16%),0 4px 15px rgb(5 24 82 / 9%)}
.portrait-socials .social-icon{position:relative;cursor:pointer;transition:transform .28s ease,opacity .28s ease,filter .28s ease}
.portrait-socials .social-icon::before{content:"";position:absolute;inset:-3px}
.portrait-socials .social-icon:hover,.portrait-socials .social-icon:focus-visible{opacity:1;transform:scale(1.1);filter:brightness(1.08) drop-shadow(0 1px 3px rgb(4 16 51 / 35%))}
@media(prefers-reduced-motion:reduce){.portrait-socials .social-icon{transition:none}}
/* Fixed hero copies keep their geometry while the blue curtain alone moves. */
#stage.curtain-enabled{padding-top:var(--curtain-distance,0px)}
.curtain-cream{--curtain-paper:var(--theme-page);--curtain-ink:var(--theme-brand);position:fixed;top:0;left:0;z-index:100;width:100%;height:100svh;overflow:hidden;background:var(--curtain-paper);pointer-events:none}
/* Map the static relief to cream directly: soft-light loses almost all
   contrast on this near-white surface. This layer never covers the ink. */
.curtain-cream::before{content:"";position:absolute;inset:0;z-index:-1;background:url('/home/assets/cream-paper-reference.jpg') repeat 0 0 / 627px 627px;filter:url('#cream-paper-tone');opacity:.9;pointer-events:none}
.curtain-blue{position:fixed;top:-12px;left:0;z-index:101;width:100%;height:calc(100svh + 12px);overflow:hidden;background:var(--blue);pointer-events:none;transform:translate3d(0,100%,0);will-change:transform}
/* The shader generates full-viewport coverage; neither mask nor hero copies translate. */
.curtain-blue{top:0;height:100svh;transform:none;opacity:0;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 0;mask-position:0 0;will-change:auto}
.curtain-blue-inner{position:absolute;top:0;left:0;width:100%;height:100svh;transform:none}
/* A phone keeps the WebGL tide as a composited canvas across rotation. */
.curtain-blue-direct{background:transparent;-webkit-mask-image:none!important;mask-image:none!important}
.curtain-tide-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.curtain-blue-direct .curtain-blue-inner{clip-path:inset(var(--blue-content-reveal-y,100%) 0 0 0)}
.curtain-complete .curtain-cream,.curtain-complete .curtain-blue{display:none}
.curtain-route,.curtain-cream .wind-crossing,.curtain-blue-inner .wind-crossing{position:absolute;top:0;left:0;width:100%;overflow:visible;pointer-events:none}
.curtain-route{z-index:0}
.curtain-cream .wind-crossing,.curtain-blue-inner .wind-crossing{z-index:2}
.curtain-route use,.curtain-cream .crossing-ink{fill:var(--curtain-ink);stroke:none}
.curtain-route use{stroke-width:var(--wind-width)}
.curtain-cream .crossing-clearance{fill:none;stroke:var(--curtain-paper)}
.curtain-cream .opening,.curtain-blue-inner .opening{z-index:1}
.curtain-blue-inner .curtain-route use,.curtain-blue-inner .crossing-ink{fill:var(--wind-ink)}
.curtain-blue-inner .curtain-route use:not(.curtain-seam-highlight),.curtain-blue-inner .crossing-ink{opacity:.75}
.curtain-blue-inner .curtain-route .curtain-seam-highlight{fill:#f4f7fa;opacity:.98;stroke:none}
.curtain-blue-inner .crossing-clearance{stroke:var(--blue)}
/* The blue surface arrives first; the two aligned type copies trade opacity within a 16px scroll band. */
.curtain-blue-inner .opening:not(.curtain-lagged-opening) h1,.curtain-blue-inner .opening:not(.curtain-lagged-opening) .english{-webkit-mask-image:linear-gradient(to bottom,transparent calc(var(--text-reveal-y,100vh) - var(--text-origin-y,0px) - 8px),#000 calc(var(--text-reveal-y,100vh) - var(--text-origin-y,0px) + 8px));mask-image:linear-gradient(to bottom,transparent calc(var(--text-reveal-y,100vh) - var(--text-origin-y,0px) - 8px),#000 calc(var(--text-reveal-y,100vh) - var(--text-origin-y,0px) + 8px))}
.curtain-blue-inner .curtain-lagged-opening h1,.curtain-blue-inner .curtain-lagged-opening .english{-webkit-mask-image:linear-gradient(to bottom,#000 calc(var(--text-reveal-y,100vh) - var(--text-origin-y,0px) - 8px),transparent calc(var(--text-reveal-y,100vh) - var(--text-origin-y,0px) + 8px));mask-image:linear-gradient(to bottom,#000 calc(var(--text-reveal-y,100vh) - var(--text-origin-y,0px) - 8px),transparent calc(var(--text-reveal-y,100vh) - var(--text-origin-y,0px) + 8px));color:var(--theme-brand)}
.curtain-cream .opening h1{color:var(--curtain-ink)}
.curtain-cream .opening h1>span{text-shadow:1px 0 var(--curtain-paper),-1px 0 var(--curtain-paper),0 1px var(--curtain-paper),0 -1px var(--curtain-paper)}
.curtain-cream .english{color:var(--curtain-ink)}
.curtain-cream .opening-motes span{background:var(--curtain-ink)}
body[data-page=home] .curtain-cream .shared-header{color:var(--theme-muted);--site-accent:var(--theme-brand);--site-menu-bg:var(--theme-surface);--site-menu-hover:var(--theme-hover);pointer-events:none}
body[data-page=home] .curtain-blue .shared-header{pointer-events:none}
@media(prefers-reduced-motion:reduce){.curtain-cream,.curtain-blue{display:none}}
/* Keep the quiet hover response while the boat plays in place. */
.scroll-story .boat{transform-origin:top left;cursor:pointer;transition:transform .26s ease,filter .26s ease}
.scroll-story .boat:focus-visible{outline:2px solid #dce6fa;outline-offset:5px}
@media(hover:hover){.scroll-story .boat:hover:not(.boat-cinema):not(.boat-hover-rest){transform:scale(1.04);filter:brightness(1.035)}}
@media(prefers-reduced-motion:reduce){.scroll-story .boat{transition:none}.scroll-story .boat:hover{transform:none;filter:none}}
/* The existing figure enters the top layer without moving/remounting its canvas. */
.scroll-story .boat.boat-cinema{position:fixed;inset:0 auto auto 0;margin:0;padding:0;border:0;max-width:none;max-height:none;aspect-ratio:auto;overflow:hidden;background:var(--theme-brand);box-shadow:none;filter:none;outline:none;opacity:1!important;visibility:visible!important;clip-path:none!important;transform:var(--boat-cinema-transform)!important;transition:none!important;will-change:transform;cursor:pointer;touch-action:none;overscroll-behavior:none}
.scroll-story .boat.boat-cinema::backdrop{background:transparent;pointer-events:none}
.boat.boat-cinema boat-flow-animation{height:100%;aspect-ratio:auto}
html.boat-cinema-locked{overflow:hidden!important;overscroll-behavior:none}
html.boat-cinema-locked body{overflow:hidden!important;touch-action:none}
html.boat-cinema-full #stage > header,html.boat-cinema-full #stage > .curtain-cream,html.boat-cinema-full #stage > .curtain-blue,html.boat-cinema-full #home > :not(.boat){visibility:hidden!important}
@media(hover:hover) and (pointer:fine){.scroll-story .boat,.scroll-story .boat *{cursor:none!important}}
.boat-cursor{position:absolute;z-index:5;left:0;top:0;width:0;height:0;pointer-events:none;opacity:0;transform-origin:0 0;transition:opacity .14s ease}
.boat-cursor.is-visible{opacity:1}
.boat-cursor::before,.boat-cursor::after{content:"";position:absolute;display:block;background:#e1eafa;pointer-events:none}
.boat-cursor::before{left:-8px;top:-.5px;width:16px;height:1px}
.boat-cursor::after{left:-.5px;top:-8px;width:1px;height:16px;transform-origin:center;transition:transform .16s ease,opacity .16s ease}
@media(hover:none),(pointer:coarse){.boat-cursor{display:none!important}}
@media(prefers-reduced-motion:reduce){.boat-cursor,.boat-cursor::after{transition:none}}

/* The cream opening uses the shared light navigation palette. */
body[data-page=home] .curtain-cream .shared-header a:hover{color:var(--theme-brand)}

/* A short scene pause consumes the triggering gesture without changing layout width. */
html.scene-locked{overflow:hidden;overscroll-behavior:none}
.scene-locked body{overflow:hidden;touch-action:none}
/* Keep the final three-line wish intact in the upper part of the last viewport. */
.ending .closing .wind-text{font-size:clamp(17px,1.9vw,28px)}
.ending .closing p+p{position:absolute;top:calc(76svh - (185vw - var(--ending-start) - 38px + var(--wish-gap)));left:0;width:100%;margin-top:0}
@media(min-width:900px){.ending .closing p+p{top:calc(76svh - (185vw - var(--ending-start) - 90px + var(--wish-gap)))}}
@media(max-width:600px){.ending .closing .wind-text{font-size:16px}.ending .closing p+p{top:calc(76svh - (1800px - var(--ending-start) - 38px + var(--wish-gap)))}}
/* Home navigation shares the English caption's reveal progress after the title. */
body[data-page=home] header.shared-header:not(.nav-ready){opacity:0;visibility:hidden;pointer-events:none}
body[data-page=home] header.shared-header.nav-ready:not(.nav-hidden){opacity:var(--intro-nav-opacity,0);transition:transform .42s cubic-bezier(.22,1,.36,1)}
body[data-page=home] header.shared-header.intro-nav-pending{pointer-events:none}

/* A quieter home ending: keep shared footers on other pages unchanged. */
body[data-page=home] .ending .closing p+p{font-size:clamp(16px,1.8vw,26px);line-height:1.9}
body[data-page=home] .ending-colophon{bottom:12px;gap:3px}
body[data-page=home] .ending-colophon .colophon-links{margin-bottom:10px}
body[data-page=home] .ending-colophon p{font-size:9px;color:rgb(234 243 255 / 48%);line-height:1.55}
@media(max-width:600px){body[data-page=home] .ending .closing p+p{font-size:15px}body[data-page=home] .ending-colophon{bottom:12px}body[data-page=home] .ending-colophon .colophon-links{margin-bottom:9px}body[data-page=home] .ending-colophon p{font-size:8px}}
/* Match the first wish's typography to the second without moving either group. */
body[data-page=home] .ending .closing .wind-text > p:first-child{font-size:clamp(16px,1.8vw,26px);line-height:1.9}
@media(max-width:600px){body[data-page=home] .ending .closing .wind-text > p:first-child{font-size:15px}}

/* Sparse air accents reuse opening mote size, ink and drift; no particle loop. */
.home-air-motes{position:absolute;inset:0;z-index:0;pointer-events:none}
.ending-air-motes{z-index:2}
@media(max-width:600px){.home-air-motes span{top:var(--mobile-y,var(--y))}.home-air-motes span:nth-child(2n){display:none}}
@media(prefers-reduced-motion:reduce){.home-air-motes span{animation:none}}

/* Identity appears after the existing portrait reveal, without changing its frame. */
.portrait-details{position:absolute;inset:0;color:#f1f7ff}
.portrait-name{position:absolute;left:5%;bottom:6%;display:flex;flex-direction:column;align-items:flex-start;gap:7px;pointer-events:none}
.portrait-name-ja{font:400 clamp(17px,1.65vw,27px)/1.2 ShipporiTitle,var(--serif);letter-spacing:.14em}
.portrait-name-en{font:400 clamp(9px,.8vw,13px)/1.3 var(--home-font-ui);letter-spacing:.16em}
.portrait-details .portrait-socials{bottom:5%;right:4.5%;color:inherit}
.portrait-details .social-icon,.portrait-details .social-icon:hover,.portrait-details .social-icon:focus-visible{filter:none}
@media(max-width:600px){.portrait-name{gap:5px}.portrait-name-ja{font-size:16px}.portrait-name-en{font-size:9px}.portrait-details .portrait-socials{gap:2px;right:4%;bottom:4%}.portrait-details .social-icon{width:26px;height:26px;padding:5px}}

/* One shared visual offset preserves the approved hero crossing geometry. */
body[data-page=home] .opening h1{translate:0 var(--hero-group-y,-7svh)}

/* Phone composition only; the desktop scene remains unchanged. */
@media(max-width:600px){
 body[data-page=home] main{--mobile-definition-top:calc(var(--mobile-vh,1svh) * 88);--mobile-boat-top:calc(var(--mobile-definition-top) + var(--mobile-definition-height,137px) + 76px);--mobile-story-top:calc(var(--mobile-boat-top) + 90vw + 72px);--mobile-portrait-top:calc(var(--mobile-story-top) + var(--mobile-story-height,238px) + 80px);--mobile-quote-top:calc(var(--mobile-portrait-top) + var(--mobile-portrait-height,59vw) + 80px);--ending-start:calc(var(--mobile-quote-top) + var(--mobile-quote-height,80px) + 80px);--wish-gap:0px;min-height:calc(var(--ending-start) + var(--mobile-vh,1svh) * 100)}
 body[data-page=home] .definition{top:var(--mobile-definition-top);left:10%;width:80%}
 body[data-page=home] .boat{top:var(--mobile-boat-top);left:14%;width:72%;aspect-ratio:4/5}
 body[data-page=home] .story{top:var(--mobile-story-top);left:10%;width:80%}
 body[data-page=home] .portrait{top:var(--mobile-portrait-top);left:9%;width:78%}
 body[data-page=home] .quote{top:var(--mobile-quote-top);left:10%;width:80%}
 body[data-page=home] .ending{min-height:calc(var(--mobile-vh,1svh) * 100)}
 body[data-page=home] .ending .closing{top:calc(var(--mobile-vh,1svh) * 14);left:8%;width:84%}
 body[data-page=home] .ending .closing p+p{top:calc(var(--mobile-vh,1svh) * 28)}
 body[data-page=home] .ending-digital-clouds{transform:translate3d(0,24px,0)}
 body[data-page=home] .ending-colophon{left:5%;right:5%;bottom:max(18px,calc(env(safe-area-inset-bottom,0px) + 12px))}
}

/* The continuous phone blue surface already supplies the ending background.
   Keep the underlying completed route visible instead of covering it on scroll. */
@media(max-width:600px){body[data-page=home] .ending-sky{background:transparent}}

/* Scale only the approved phone hero group; the English note stays outside it. */
@media(max-width:600px){body[data-page=home] .opening h1{scale:var(--hero-group-scale,1.12);transform-origin:var(--hero-scale-origin,86vw 30vw)}}

/* Portrait tablets retain the desktop composition with their own reading space. */
@media(min-width:601px) and (max-width:1024px) and (orientation:portrait){
 body[data-page=home] .opening .english{translate:0 var(--tablet-hero-y,27svh)}
 body[data-page=home] main{--tablet-story-offset:calc(105svh - 64.5vw);--tablet-middle-lift:16svh;--ending-start:calc(170vw + var(--tablet-story-offset));--wish-gap:0px;min-height:calc(var(--ending-start) + 100svh)}
 body[data-page=home] .definition{top:83svh}
 body[data-page=home] .boat{top:calc(77.2vw + var(--tablet-story-offset) - var(--tablet-middle-lift))}
 body[data-page=home] .story{top:calc(109vw + var(--tablet-story-offset) - var(--tablet-middle-lift))}
 body[data-page=home] .portrait{top:calc(131vw + var(--tablet-story-offset))}
 body[data-page=home] .quote{top:calc(157vw + var(--tablet-story-offset))}
 body[data-page=home] .ending{min-height:100svh}
 /* Reuse the phone fix: the blue page supplies the sky behind the route. */
 body[data-page=home] .ending-sky{background:transparent}
 body[data-page=home] .ending .closing{top:10svh}
 body[data-page=home] .ending .closing p+p{top:32svh}
 body[data-page=home] .ending-digital-clouds{top:45svh;transform:translate3d(0,24px,0)}
}

/* Safari paints its inset/browser areas from the document surface. Keep that
   surface in the same state as the existing curtain, from the first paint. */
 html[data-home-scene]{background:var(--theme-page,#f5f2e9)}
 html[data-home-scene] body[data-page=home]{background:var(--theme-page,#f5f2e9);min-height:100svh}
 html[data-home-scene=blue],html[data-home-scene=blue] body[data-page=home]{background:var(--theme-brand,#1640a8)}
@media(max-width:600px){
 body[data-page=home] .curtain-cream,body[data-page=home] .curtain-blue,body[data-page=home] .curtain-blue-inner{height:100vh;height:100dvh}
 /* Keep the direct canvas measurable after handoff; display:none would zero
    its viewport and force Safari to clear/reallocate it on the next resize. */
 body[data-page=home] .curtain-complete .curtain-cream,body[data-page=home] .curtain-complete .curtain-blue{display:block;visibility:hidden;opacity:0!important}
 body[data-page=home] .boat.boat-cinema::backdrop{background:var(--blue)}
}

/* Tablet Safari uses the existing live tide; address bars only change coverage. */
.tablet-tide .curtain-cream,.tablet-tide .curtain-blue{height:100dvh}

/* Reading-area motes: same tiny circular marks, clearer and gently drifting. */
.home-air-motes span{opacity:calc(var(--alpha) * 1.35);animation-name:reading-mote-drift}
@keyframes reading-mote-drift{to{transform:translate3d(var(--dx),var(--dy),0);opacity:calc(var(--alpha) * 1.05)}}

/* Only the home phone footer separates its two existing statements. */
.home-mobile-footer-break{display:none}
@media(max-width:600px){body[data-page=home] .home-mobile-footer-break{display:block}}

@media(max-width:600px){
 html.home-language-restoring[data-home-scene=blue] .curtain-cream,html.home-language-restoring[data-home-scene=blue] .curtain-blue{visibility:hidden}
}

/* Selected Mobile layout study: B boat only; keep original surrounding layout. */
@media(max-width:600px){
 body[data-page=home] .boat:not(.boat-cinema){left:31%;width:62%;top:calc(var(--mobile-definition-top) + var(--mobile-definition-height,137px) + 44px)}
 body[data-page=home] .portrait{left:18.8%;width:62.4%}
}

/* Same approved top-20% crop at every size; widths and anchors stay local. */
body[data-page=home] .portrait-media{aspect-ratio:638 / 384}
body[data-page=home] .portrait-media > img{width:100%;height:auto;margin-top:-15.04702194%}

/* Keep the tablet direct tide allocated through the same-frame hero handoff. */
.tablet-tide .curtain-complete .curtain-cream,.tablet-tide .curtain-complete .curtain-blue{display:block;visibility:hidden;opacity:0!important}

/* Keep WebKit’s live canvas allocated through the hero handoff. */
.safari-tide .curtain-complete .curtain-cream,.safari-tide .curtain-complete .curtain-blue{display:block;visibility:hidden;opacity:0!important}