/* An open sheet becomes a small world. All destinations remain native links. */
*{box-sizing:border-box}
:root{--ink:#29392d;--muted:#66705f;--green:#456246;--orchard-earth:#a28b62;--page-space:clamp(20px,4vw,64px)}
html{scroll-behavior:smooth;background:#faf8f0;scrollbar-color:#9aab90 #faf8f0}
html,body{margin:0;min-height:100%;color:var(--ink);font-family:Inter,system-ui,sans-serif}
body:before{content:'';position:fixed;inset:0;background:url('/assets/arrival/paper.svg');opacity:.085;pointer-events:none;z-index:4}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.front-door{position:relative}
.arrival-journey{position:relative;min-height:100svh;--fold:0;--scene:0;--travel:0;--outro:0}
.arrival-stage{height:100svh;min-height:640px;position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 13% 94%,#e8ead850,transparent 48%),radial-gradient(ellipse at 94% 75%,#e7dfcb60,transparent 42%),#faf8f0}
.arrival-world{position:absolute;inset:0;z-index:0;opacity:calc(var(--scene) * var(--fold));pointer-events:none}
.arrival-stage:after{content:"";position:absolute;inset:0;z-index:1;background:#faf8f0;opacity:var(--outro);pointer-events:none}
.arrival-world canvas{display:block;width:100%;height:100%;outline:0}
.entry-heading{position:absolute;top:clamp(22px,5vh,64px);left:var(--page-space);right:var(--page-space);z-index:2;pointer-events:none}
.ink-title{margin:0;line-height:1;width:min(1100px,90vw);transform:scale(calc(1 - var(--fold)*.74));transform-origin:top left;will-change:transform}
.ink-title svg{display:block;width:100%;height:auto;overflow:visible}

.doorways{position:absolute;z-index:2;--door-rest-bottom:calc(110px - var(--fold)*36px);bottom:calc(var(--door-rest-bottom)*(1 - var(--outro)) + 50%*var(--outro));left:50%;translate:-50% 0;transform:translateY(calc(50%*var(--outro)));display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(clamp(25px,6vw,100px) * (1 - var(--fold)*.7) + var(--outro)*24px);--door-rest-width:min(calc(880px - var(--fold)*360px),83vw);--door-final-width:min(1040px,90vw);width:calc(var(--door-rest-width)*(1 - var(--outro)) + var(--door-final-width)*var(--outro));align-items:end}
.door-choice{min-width:0}
.drafting-door{display:flex;flex-direction:column;align-items:center;position:relative;color:inherit;text-decoration:none;padding:12px 18px 14px;isolation:isolate;touch-action:manipulation}
.drafting-door:before{content:'';position:absolute;inset:0;z-index:-1;opacity:calc(var(--fold)*.94*(1 - var(--outro)*.65));background:#faf8f0;box-shadow:0 4px 0 #e9e4d657,0 10px 26px #4653330d;border:1px solid #cfd5c2;border-radius:2px 5px 2px 4px;transition:border-color .3s}
.drafting-door:is(:hover,:focus-visible):before{border-color:#667f59}
.door-icon{display:block;width:calc(100% - var(--fold)*73%);height:calc(clamp(160px,29vh,300px) * (1 - var(--fold)));pointer-events:none;position:relative;transform-origin:bottom center}
.door-icon>svg{display:block;width:100%;height:100%;overflow:visible}
.door-copy{display:flex;align-items:center;justify-content:center;gap:16px;pointer-events:none}
.door-copy strong.ink-label{display:block;font-family:'Kamil Ink',Georgia,serif;font-synthesis:none;font-weight:400;--label-rest-size:calc(clamp(52px,5.8vw,83px) * (1 - var(--fold)*.5));--label-final-size:clamp(48px,5.8vw,76px);font-size:calc(var(--label-rest-size)*(1 - var(--outro)) + var(--label-final-size)*var(--outro));letter-spacing:0;line-height:1.4;white-space:nowrap;color:#1f271f;-webkit-text-stroke:1.1px currentColor;paint-order:stroke fill}
.forest-door .ink-label{-webkit-text-stroke:1.35px currentColor}
.door-arrow{font-size:24px;transition:transform .25s}
.drafting-door:is(:hover,:focus-visible) .door-arrow{transform:translate(3px,0)}
.door-copy:after{content:'';position:absolute;bottom:8px;left:22%;right:22%;height:1px;background:currentColor;transform:scaleX(0) rotate(-.8deg);transform-origin:left;transition:transform .35s}
.drafting-door:is(:hover,:focus-visible) .door-copy:after{transform:scaleX(1) rotate(-.8deg)}
.door-utilities{position:absolute;bottom:15px;right:var(--page-space);left:var(--page-space);display:flex;align-items:center;justify-content:space-between;gap:18px;z-index:3}
.sculpture-motion{min-height:44px;padding:8px 12px;margin-left:-12px;border:1px solid #faf8f077;border-radius:3px;background:#faf8f0df;font:inherit;font-size:12px;color:#344732;cursor:pointer;box-shadow:0 2px 9px #29392d09}.sculpture-motion[aria-pressed=true]{color:var(--green)}
.door-languages{display:flex;align-items:center;gap:20px;margin-left:auto}.door-languages button{min-height:44px;border:0;border-bottom:1px solid transparent;padding:8px 2px;background:none;font:inherit;font-size:13px;color:var(--muted);cursor:pointer}.door-languages button[aria-pressed=true]{border-bottom-color:var(--ink);color:var(--ink)}
.sculpture-motion[hidden]{display:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--green);outline-offset:6px}
.arrival-scroll{position:absolute;bottom:12px;left:50%;translate:-50% 0;display:flex;align-items:center;gap:12px;min-height:46px;font-size:13px;color:var(--muted);text-decoration:none;z-index:4}
.arrival-scroll svg{width:14px;height:29px;transition:translate .3s}.arrival-scroll:hover svg{translate:0 5px}
.arrival-rail{display:none;opacity:calc(1 - var(--outro));position:absolute;top:28%;bottom:33%;right:var(--page-space);width:1px;background:#afbd9a55}
.arrival-rail span{display:block;width:1px;height:calc(var(--travel)*100%);background:#526943}
.arrival-rail i{position:absolute;top:calc(var(--travel)*100%);left:-3px;width:7px;height:7px;border:1px solid #526943;border-radius:50%;background:#faf8f0}
.arrival-footer{min-height:190px;padding:45px var(--page-space);display:flex;align-items:center;justify-content:space-between;gap:32px;position:relative;border-top:1px solid #d7decc;background:#faf8f0}
.arrival-footer .profile-links{display:flex;flex-wrap:wrap;gap:12px 36px}
.arrival-footer a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:none;font-size:17px;gap:8px;border-bottom:1px solid transparent}
.arrival-footer a:hover{border-bottom-color:#8e9474}
.arrival-footer .back-to-sheet{justify-content:center;min-width:44px;font-size:25px}
/* Only extend the document after a scene has successfully drawn. */
html[data-arrival-ready] .arrival-journey{height:calc(100svh + var(--arrival-scroll-distance,0px))}
html[data-arrival-ready] .arrival-stage{position:sticky;top:0}
html[data-arrival-ready] .arrival-rail{display:block}
html[data-arrival-ready][data-arrival-quiet] .arrival-journey{height:100svh}
html[data-arrival-quiet] .arrival-rail{display:none}
html[data-arrival-quiet] .arrival-stage{position:relative}
@media(min-width:1700px){.ink-title{width:min(1400px,90vw)}.doorways{--door-rest-width:calc(1040px - var(--fold)*460px)}}
@media(max-width:700px){
 .arrival-stage{min-height:560px}.entry-heading{top:clamp(35px,7vh,80px)}.ink-title{width:100%;transform:scale(calc(1 - var(--fold)*.58))}
 .doorways{--door-rest-width:calc(100% - 32px);--door-final-width:calc(100% - 24px);gap:6px;--door-rest-bottom:calc(135px - var(--fold)*32px)}
 .drafting-door{padding:12px 5px}.door-icon{height:calc(clamp(130px,24vh,200px) * (1 - var(--fold)))}
 .door-copy{gap:calc(6px*(1 - var(--outro)*.5))}.door-copy strong.ink-label{--label-rest-size:calc(clamp(31px,8vw,52px) * (1 - var(--fold)*.12));--label-final-size:clamp(32px,9.6vw,60px);-webkit-text-stroke:.8px currentColor}.forest-door .ink-label{-webkit-text-stroke:1px currentColor}
 .door-arrow{font-size:calc(18px*(1 - var(--outro)*.4))}.arrival-scroll{bottom:65px}.door-utilities{bottom:12px;gap:12px}.door-languages{gap:15px}.sculpture-motion{font-size:12px}
 .arrival-rail{top:24%;bottom:40%;right:15px}.arrival-footer{min-height:180px;padding-block:32px;gap:10px}.arrival-footer .profile-links{gap:6px 22px}.arrival-footer a{font-size:15px}
}
@media(max-height:600px) and (min-width:701px){.arrival-stage{min-height:0}.entry-heading{top:18px}.ink-title{width:55vw}.doorways{--door-rest-width:min(630px,80vw);--door-final-width:min(740px,90vw);--door-rest-bottom:70px}.door-icon{height:calc(135px * (1 - var(--fold)))}.door-copy strong.ink-label{--label-rest-size:calc(44px * (1 - var(--fold)*.2));--label-final-size:52px}.door-utilities{bottom:8px}.arrival-scroll{bottom:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}.sculpture-motion{display:none}.ink-title{transform:none}.arrival-journey{height:100svh!important}.arrival-world,.arrival-rail{display:none!important}}
@media print{.arrival-journey{height:auto!important}.arrival-stage{height:800px;position:relative!important}.arrival-world,.arrival-scroll,.arrival-rail,.door-utilities{display:none}.ink-title{transform:none!important}}

@media(max-height:600px) and (max-width:700px) and (orientation:landscape){.arrival-stage{min-height:0}.entry-heading{top:12px}.ink-title{width:60vw}.doorways{--door-rest-bottom:86px;--door-rest-width:min(470px,90vw)}.door-icon{height:calc(90px * (1 - var(--fold)))}.door-copy strong.ink-label{--label-rest-size:28px;--label-final-size:32px}.drafting-door{padding-block:6px}.arrival-scroll{bottom:45px}.door-utilities{bottom:0}.arrival-rail{top:20%;bottom:50%}}

/* Keep pause and languages inside short portrait screens throughout the story. */
@media(max-width:700px){html[data-arrival-ready] .arrival-stage{min-height:0}}

/* Slightly uneven ink and warm paper keep the two original drawings tactile. */
.door-icon{filter:drop-shadow(0 2px 0 #9a895912)}
.door-arrow{color:#667955}
.arrival-rail{background:linear-gradient(#a6b59920,#a6b59977,#a6b59920)}
.arrival-rail i{box-shadow:0 0 0 4px #faf8f0a6}
.drafting-door:is(:hover,:focus-visible) .door-icon{filter:drop-shadow(0 3px 0 #7c875823)}

/* The original ink drawings lead into the scrollable scene. */
.entry-heading{opacity:calc(1 - var(--fold))}


.door-icon{opacity:calc(1 - var(--fold))}
.skip{position:fixed;top:-100px;left:20px;z-index:20;padding:12px 20px;background:#faf8f0;color:var(--ink)}.skip:focus{top:12px}
html[data-arrival-quiet] .arrival-stage{min-height:100svh}
@media(max-width:700px){.arrival-stage{min-height:100svh}}
@media(max-width:700px) and (max-height:560px){.entry-heading{top:28px}.doorways{--door-rest-bottom:116px}.door-icon{height:calc(100px * (1 - var(--fold)))}.arrival-scroll{bottom:58px}}
@media(max-height:600px) and (min-width:701px){.ink-title{width:48vw}.door-icon{height:calc(100px * (1 - var(--fold)))}.doorways{--door-rest-bottom:62px}}
@media(max-height:600px) and (max-width:700px) and (orientation:landscape){.entry-heading{top:10px}.ink-title{width:55vw}.doorways{--door-rest-bottom:83px}.door-icon{height:calc(62px * (1 - var(--fold)))}.arrival-scroll{bottom:42px}}
@media(prefers-reduced-motion:reduce){.arrival-stage{min-height:100svh}}

html[data-arrival-quiet] .arrival-journey{--fold:0!important;--scene:0!important;--travel:0!important;--outro:0!important}
@media(prefers-reduced-motion:reduce){.arrival-journey{--fold:0!important;--scene:0!important;--travel:0!important;--outro:0!important}}






/* The branch drawing stays in ink; its three apples have solid lit surfaces. */
.entry-apple-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
#orchard-plate[data-apple-ready] [data-ink-part^="apple-"]{opacity:0}
@media print{.entry-apple-canvas{display:none}#orchard-plate[data-apple-ready] [data-ink-part^="apple-"]{opacity:1}}

/* Keep the final handwritten choices within very narrow phones. */
@media(max-width:350px){.door-copy strong.ink-label{--label-final-size:31px}}

/* Each original pen shape stays intact as the handwritten doors settle. */
.door-copy strong.arrival-lettering{position:relative;display:flex;align-items:center;justify-content:center;width:var(--lettering-width);max-width:100%;line-height:1.4;-webkit-text-stroke:0}
.arrival-lettering-svg{display:block;width:100%;height:1.4em;overflow:visible;flex:none;fill:currentColor;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.arrival-lettering-svg path{vector-effect:non-scaling-stroke;stroke-width:var(--lettering-stroke,.7px)}
.arrival-lettering-text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.arrival-lettering[data-lettering-static] .arrival-lettering-svg{display:none}
.arrival-lettering[data-lettering-static] .arrival-lettering-text{position:static;width:auto;height:auto;margin:0;overflow:visible;clip-path:none;-webkit-text-stroke:.8px currentColor}
@media(prefers-reduced-motion:reduce){.arrival-lettering-svg{display:none}.arrival-lettering-text{position:static;width:auto;height:auto;margin:0;overflow:visible;clip-path:none;-webkit-text-stroke:.8px currentColor}}
/* The Japanese name sits quietly under the handwritten one, in the visitor's own Mincho font (no extra download). */
.entry-name-ja{display:block;margin:.6em 0 0 .35em;font:400 clamp(13px,1.3vw,20px)/1.2 'Hiragino Mincho ProN','Yu Mincho',YuMincho,'Noto Serif JP',serif;letter-spacing:.32em;color:var(--muted)}
@media(max-width:700px){.entry-name-ja{font-size:13px;letter-spacing:.24em}}
