@charset "UTF-8";
/* Small traces of a travel notebook. */
.reading-line{position:fixed;inset:0 auto auto 0;width:100%;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;z-index:30;pointer-events:none}
.trip-intro{position:relative}.trip-intro>div:first-child{position:relative;padding-bottom:126px}
.passport-stamp{position:absolute;left:4px;bottom:0;width:106px;height:106px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--accent);border:1px solid currentColor;border-radius:50%;transform:rotate(-13deg);opacity:.75;pointer-events:none;outline:1px dashed #9f593b70;outline-offset:-7px}
.passport-stamp svg{width:41px;height:23px;fill:none;stroke:currentColor;stroke-width:1.3}.passport-stamp span{font:8px Arial,sans-serif;letter-spacing:2px}.passport-stamp strong{font:17px Georgia,serif;letter-spacing:1px}.passport-stamp small{font:6px Arial,sans-serif;letter-spacing:1.6px}
.travel-divider{position:relative;display:flex;align-items:center;gap:25px;margin-top:-38px;margin-bottom:48px;color:var(--accent);pointer-events:none}.travel-divider:before,.travel-divider:after{content:"";height:1px;background:var(--line);flex:1}.travel-divider svg{width:190px;height:62px;overflow:visible;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.2}.travel-divider .trail-ink{stroke-dasharray:100;stroke-dashoffset:0}.travel-divider .trail-dot{fill:var(--accent);stroke:none}.travel-divider span{position:absolute;left:50%;top:100%;transform:translateX(-50%) rotate(-4deg);font:12px var(--serif);white-space:nowrap;letter-spacing:3px}
.pocket-note{position:relative;transition:box-shadow .35s,transform .35s}.pocket-note:before{content:"";position:absolute;top:-11px;left:calc(50% - 29px);width:58px;height:23px;background:#d9c9a8b3;border-left:1px dashed #c2b28e80;border-right:1px dashed #c2b28e80;transform:rotate(-7deg);z-index:2;pointer-events:none}.pocket-street:before{transform:rotate(8deg);background:#c6cebbb5}.pocket-coffee:before{transform:rotate(-4deg)}
.postcard>.photo-open{outline:1px solid #aaa98e65;outline-offset:6px}.postcard-tall{position:relative}.postcard-tall:after{content:"山间来信";position:absolute;right:16px;top:23px;writing-mode:vertical-rl;letter-spacing:4px;color:#f8f4e9;font:14px var(--serif);padding:13px 8px;border:1px solid #f8f4e980;pointer-events:none;text-shadow:0 1px 5px #24302980}
.panorama-section>.page-width{position:relative;padding-right:190px}.compass-doodle{position:absolute;right:6.2%;top:5px;width:86px;height:86px;color:#7f8a70;pointer-events:none;transform:rotate(13deg)}.compass-doodle circle{fill:none;stroke:currentColor;stroke-width:.7;stroke-dasharray:2 5}.compass-doodle path{fill:none;stroke:currentColor;stroke-width:1}.compass-doodle .compass-needle{fill:#9f593b;stroke:none}.compass-doodle text{fill:currentColor;stroke:none;font:8px Georgia,serif;letter-spacing:1px}
.route-detail-wrap{position:relative}.route-detail-wrap:after{content:"";position:absolute;right:10px;top:10px;width:17px;height:17px;border-top:1px solid #9f593b65;border-right:1px solid #9f593b65;pointer-events:none}.route-choice{transition:background .3s,color .3s}.station-dot{transition:background .3s,color .3s,border-color .3s,transform .3s}.station-arrow{transition:color .3s}.station-button:hover .station-dot{transform:scale(1.08)}
.trip-closing{position:relative}.closing-star{width:68px;height:68px;margin:0 auto 27px;display:grid;place-items:center;position:relative;transition:transform .7s}.closing-star:before{content:"";position:absolute;inset:0;border:1px solid #9f593b55;border-radius:50%}.closing-star:after{content:"";position:absolute;inset:-9px;border:1px dashed #9f593b45;border-radius:50%}.trip-closing:hover .closing-star{transform:rotate(35deg)}
.travel-page .header nav a{position:relative}.travel-page .header nav a:after{content:"";position:absolute;bottom:3px;left:0;width:100%;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s}.travel-page .header nav a:hover:after,.travel-page .header nav a:focus-visible:after{transform:scaleX(1)}
.photo-expand{transition:transform .35s,background .35s,color .35s}.photo-open:hover .photo-expand,.photo-open:focus-visible .photo-expand{transform:translate(2px,-2px);background:var(--green);color:var(--paper)}
@media(hover:hover){.pocket-note:hover{box-shadow:0 12px 24px #24341a12;transform:translateY(-5px)}.photo-open:hover img{transform:scale(1.045)}}
@media(prefers-reduced-motion:no-preference){
 .trip-location{animation:paper-enter .8s .1s both}.trip-hero h1{animation:paper-enter 1s .22s both}.trip-hero-bottom{animation:paper-enter .9s .4s both}.mountain-label{animation:paper-enter 1s .5s both}
 .trip-hero-bottom>a span{animation:look-down 1.5s .9s 2}.is-arrived .trail-ink{animation:trace-trail 1.8s cubic-bezier(.2,.6,.3,1) both}.trip-intro.is-arrived .passport-stamp{animation:stamp-arrive .7s .25s both}
 #photo-dialog[open]{animation:photo-unfold .32s cubic-bezier(.2,.7,.3,1)}#photo-dialog[open]::backdrop{animation:backdrop-in .32s}
}
@keyframes paper-enter{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes look-down{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@keyframes trace-trail{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes stamp-arrive{from{opacity:0;transform:rotate(-20deg) scale(1.18)}to{opacity:.75;transform:rotate(-13deg) scale(1)}}
@keyframes photo-unfold{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes backdrop-in{from{opacity:0}to{opacity:1}}
@media(max-width:700px){.trip-intro>div:first-child{padding-bottom:0;padding-right:95px}.passport-stamp{width:80px;height:80px;left:auto;right:0;bottom:12px;gap:3px;outline-offset:-5px}.passport-stamp svg{width:29px;height:18px}.passport-stamp span{font-size:6px;letter-spacing:1px}.passport-stamp strong{font-size:13px}.passport-stamp small{font-size:5px;letter-spacing:.7px}.travel-divider{margin-top:-20px;margin-bottom:47px;gap:13px}.travel-divider svg{width:148px;height:48px}.travel-divider span{font-size:10px;letter-spacing:2px}.panorama-section>.page-width{padding-right:100px}.compass-doodle{width:53px;height:53px;top:15px}.postcard-tall:after{font-size:12px;right:13px;top:19px}.pocket-coffee:before{left:13px;top:-9px;width:47px;height:19px}.reading-line{height:2px}}
@media(prefers-reduced-motion:reduce){.pocket-note:hover,.photo-open:hover img,.photo-open:hover .photo-expand,.station-button:hover .station-dot,.station-button:hover .station-arrow,.trip-closing:hover .closing-star{transform:none}}