/* Journal uses the shared type, light, arrows and page transition. */
.journal-home{min-height:100svh;scroll-snap-align:start;scroll-snap-stop:always;display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;background:#000000;padding:clamp(36px,5svh,54px) 24px clamp(36px,5svh,60px)}
.journal-home-center{display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:clamp(28px,5vw,72px);width:min(1100px,100%);padding:clamp(24px,4svh,48px) 0}
.journal-home-copy{min-width:0}
.journal-photo-link{display:block;width:100%;text-decoration:none}
.journal-photo-link img{display:block;width:100%;height:auto;max-height:60svh;object-fit:contain}
.journal-title-link{display:block;width:fit-content;margin:0 auto;color:#fff}
.journal-title-link h1{font:italic 400 clamp(62px,7vw,100px)/1.15 var(--serif);letter-spacing:-.025em;margin:0}
.journal-title-link small{color:var(--muted);font:13px/1.8 "Songti SC",serif;letter-spacing:.2em;margin-top:20px}
.journal-home-description{font:italic 400 clamp(17px,2vw,22px)/1.8 var(--serif);color:var(--muted);margin:30px 0 38px}
.journal-open,.journal-return{display:inline-block;text-decoration:none;color:var(--body);font:italic 16px/1.7 var(--serif);padding:12px;transition:color var(--motion-ui) ease}
.journal-open:hover,.journal-return:hover{color:var(--ink)}
.journal-index{min-height:75svh;width:min(1100px,calc(100% - 48px));margin:0 auto;padding:clamp(125px,17svh,180px) 0 65px;text-align:center}
.journal-index-heading h2{font:24px/1.6 "Songti SC",serif;letter-spacing:.15em;margin:24px 0;color:#fff}
.journal-index-heading .journal-subtitle{font:16px/1.9 "Songti SC",serif;letter-spacing:.2em;color:var(--muted);margin:0 0 16px}
.journal-empty{padding:clamp(48px,8svh,80px) 0}
.journal-empty p{font:18px/2 "Songti SC",serif;color:var(--body);margin:0 0 20px}
.journal-empty small{font:12px/1.8 "Songti SC",serif;color:var(--dim);letter-spacing:.08em}
@media(max-width:600px){.journal-home{padding:36px 22px}.journal-home-center{display:flex;flex-direction:column;gap:22px;padding:22px 0}.journal-photo-link img{max-height:30svh;width:auto;max-width:100%;margin:auto}.journal-home-copy{width:100%}.journal-title-link h1{font-size:58px}.journal-title-link small{margin-top:12px}.journal-home-description{font-size:17px;margin:24px 0 28px}.journal-index{width:calc(100% - 44px)}.journal-empty p{font-size:16px}}
@media(max-height:540px){.journal-home{padding:28px 24px}.journal-home-center{padding:12px 0}.journal-title-link h1{font-size:62px}.journal-title-link small{margin-top:8px}.journal-home-description{margin:12px 0}.journal-index{padding-top:90px}}

.journal-welcome{height:100svh;position:relative;isolation:isolate;overflow:hidden;background:#000}
.journal-welcome-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:45% 50%;opacity:0;transition:opacity 1.8s ease}
.journal-welcome-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.22) 45%,rgba(0,0,0,.48));pointer-events:none}
.journal-welcome-copy{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:min(800px,88vw);text-align:center;color:#fff}
.journal-welcome-copy h1{font:italic 400 clamp(72px,10vw,128px)/1.15 var(--serif);letter-spacing:-.025em;margin:0 0 26px;opacity:0;transform:translateY(10px);transition:opacity 1.4s ease .85s,transform 1.6s var(--ease-quiet) .85s;text-shadow:0 2px 24px rgba(0,0,0,.28)}
.journal-welcome-copy p{font:18px/1.9 "Songti SC",serif;letter-spacing:.24em;margin:0;opacity:0;transform:translateY(7px);transition:opacity 1.4s ease 1.15s,transform 1.6s var(--ease-quiet) 1.15s}
.journal-welcome-scroll{position:absolute;bottom:35px;left:50%;transform:translateX(-50%);font:italic 14px/1.8 var(--serif);text-decoration:none;color:#fff;white-space:nowrap;opacity:0;transition:opacity 1.2s ease 1.6s;padding:10px}
.journal-ready .journal-welcome-photo,.journal-ready .journal-welcome-copy h1,.journal-ready .journal-welcome-copy p,.journal-ready .journal-welcome-scroll{opacity:1}
.journal-ready .journal-welcome-copy h1,.journal-ready .journal-welcome-copy p{transform:translateY(0)}
@media(max-width:600px){.journal-welcome-photo{object-position:43% 50%}.journal-welcome-copy h1{font-size:76px;margin-bottom:22px}.journal-welcome-copy p{font-size:16px}}
@media(prefers-reduced-motion:reduce){.journal-welcome-photo,.journal-welcome-copy h1,.journal-welcome-copy p,.journal-welcome-scroll{opacity:1;transition:none}.journal-welcome-copy h1,.journal-welcome-copy p{transform:none}}

/* Published stories and a quiet reserved place for the next entry. */
.journal-index-note{font:italic 14px/1.8 var(--serif);color:var(--dim);margin:18px 0 0}
.journal-folder-placeholder{min-width:0;color:#fff}
.journal-folder-placeholder .folder-tab{background:#151515;color:var(--dim)}
.placeholder-sheet{position:absolute;inset:0;background:#111;border:1px solid rgba(255,255,255,.1);transform:translate(4px,-6px);pointer-events:none}
.placeholder-cover{position:relative;display:grid;place-items:center;aspect-ratio:4/3;background:#080808;border:1px solid rgba(255,255,255,.16)}
.placeholder-cover>span{font:italic 400 clamp(60px,7vw,90px)/1 var(--serif);color:rgba(255,255,255,.16)}
.journal-folder-placeholder .folder-title{color:rgba(255,255,255,.7);margin-bottom:12px}
.folder-placeholder-note{font:italic 12px/1.9 "Songti SC",serif;color:var(--dim);letter-spacing:.04em;margin:0 0 20px}
.journal-folder-placeholder .folder-open{color:var(--dim)}
/* Thin archival folders. The photograph itself has no added frame or texture. */
.journal-folders{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,340px));justify-content:center;gap:88px clamp(44px,7vw,88px);margin:100px 0 60px;text-align:left}
.journal-folder{display:block;scroll-margin-top:64px;min-width:0;text-decoration:none;color:#fff;perspective:1000px;transform:translateY(0);transition:transform .75s var(--ease-quiet)}
.folder-visual{position:relative;isolation:isolate;aspect-ratio:4/3;margin-top:24px}
.folder-tab{position:absolute;left:0;top:-23px;width:76px;height:25px;padding:6px 12px;background:#1b1b1b;clip-path:polygon(0 0,78% 0,100% 100%,0 100%);color:rgba(255,255,255,.8);font:10px/1 var(--sans);letter-spacing:.14em}
.folder-sheet{position:absolute;inset:0;background:#151515;pointer-events:none;transform-origin:50% 90%;transition:transform .9s var(--ease-quiet)}
.folder-sheet img{display:block;width:100%;height:100%;object-fit:cover}
.sheet-back{transform:translate(7px,-12px) rotate(1.5deg);z-index:0}
.sheet-inner{transform:translate(-5px,-7px) rotate(-1deg);z-index:1}
.folder-front{position:relative;z-index:2;transform-origin:50% 90%;transition:transform .9s var(--ease-quiet)}
.folder-front img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;view-transition-name:journal-photo-01}
.folder-copy{padding:25px 0 0}
.folder-meta{display:flex;justify-content:space-between;gap:18px;font:11px/1.8 var(--sans);letter-spacing:.1em;color:var(--muted)}
.folder-meta span{font-family:"Songti SC",serif;letter-spacing:.12em}
.folder-title{font:italic 400 clamp(26px,2.3vw,32px)/1.35 var(--serif);margin:15px 0 18px;color:#fff;transition:text-shadow 1s ease,transform .75s var(--ease-quiet)}
.folder-open{font:italic 14px/1.8 var(--serif);color:var(--muted)}
.journal-folder:focus-visible:not(:target){outline:1px solid rgba(255,255,255,.75);outline-offset:14px}
.journal-folder:focus-visible:not(:target) .sheet-back{transform:translate(22px,-43px) rotate(4deg)}
.journal-folder:focus-visible:not(:target) .sheet-inner{transform:translate(-18px,-26px) rotate(-3deg)}
@media(hover:hover) and (pointer:fine){
 .journal-folder:hover{transform:translateY(-6px)}
 .journal-folder:hover .sheet-back{transform:translate(22px,-43px) rotate(4deg)}
 .journal-folder:hover .sheet-inner{transform:translate(-18px,-26px) rotate(-3deg)}
 .journal-folder:hover .folder-front{transform:translateY(-3px) rotateX(2deg)}
 .journal-folder:hover .folder-title{transform:translateY(-2px);text-shadow:0 0 14px rgba(255,255,255,.3),0 0 36px rgba(255,255,255,.2)}
 .journal-folder:hover .arrow{transform:translate(3px,-3px)}
}
.journal-folder:target:focus{outline:none}
.journal-folder:target .folder-title{animation:folder-return-light 1.8s ease both}
@keyframes folder-return-light{0%,100%{text-shadow:0 0 14px transparent}35%{text-shadow:0 0 14px rgba(255,255,255,.45),0 0 42px rgba(255,255,255,.25)}}
.journal-story{width:min(1100px,calc(100% - 48px));margin:0 auto;padding:130px 0 65px;text-align:center}
.journal-story-heading{max-width:850px;margin:0 auto 48px}
.journal-story-heading .story-title{font:italic 400 clamp(35px,5vw,62px)/1.25 var(--serif);margin:23px 0 20px;color:#fff}
.story-date{font:12px/1.8 var(--sans);letter-spacing:.12em;color:var(--muted)}
.journal-story-cover{width:min(920px,100%);margin:0 auto}
.journal-story-cover a{display:block}
.journal-story-cover img{display:block;width:100%;height:auto;view-transition-name:journal-photo-01}
.journal-story-body{width:min(680px,100%);margin:65px auto 45px;text-align:left;font:19px/1.9 var(--serif);color:#fff}
.journal-draft-note{font:14px/1.9 "Songti SC",serif;text-align:center;color:var(--dim);margin:0}
.journal-story-back{display:inline-block;font:italic 16px/1.8 var(--serif);text-decoration:none;padding:12px;color:#fff}
/* A quiet photo sequence, using each photograph at its original ratio. */
.story-photographs{margin:clamp(70px,10vw,130px) auto 0;display:grid;gap:clamp(70px,9vw,120px)}
.story-photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);align-items:center}
.street-pair{grid-template-columns:1.7fr 1fr}
.story-photo-breath{width:min(760px,100%);margin:auto}
.story-photograph{margin:0;min-width:0}
.story-photograph a{display:block}
.story-photograph img{display:block;width:100%;height:auto}
.story-photograph figcaption{font:10px/1.8 var(--sans);letter-spacing:.12em;color:var(--dim);margin-top:18px;text-align:right}
.story-photograph a:focus-visible,.journal-story-cover a:focus-visible{outline:1px solid #fff;outline-offset:8px}
@media(max-width:600px){.story-photo-pair{grid-template-columns:1fr;gap:56px}.street-pair .story-photograph:last-child{width:76%;margin:auto}.story-photographs{gap:64px}.story-photograph figcaption{margin-top:12px}.journal-folders{margin-top:90px}}
@media(prefers-reduced-motion:reduce){.journal-folder:hover .sheet-back,.journal-folder:focus-visible .sheet-back{transform:translate(7px,-12px) rotate(1.5deg)}.journal-folder:hover .sheet-inner,.journal-folder:focus-visible .sheet-inner{transform:translate(-5px,-7px) rotate(-1deg)}}
/* Bilingual passages follow the photographs without separate scrolling regions. */
.story-narrative{margin:0}
.story-passage{width:min(660px,100%);margin:clamp(60px,8vw,100px) auto;text-align:left;color:#fff}
.story-english{font:400 clamp(21px,2.2vw,25px)/1.7 var(--serif);text-wrap:pretty}
.story-english p{margin:0 0 20px}
.story-english p:last-child{margin-bottom:0}
.story-chinese{font:italic 400 13px/2.15 "Songti SC","Noto Serif SC",serif;letter-spacing:.035em;margin:30px 0 0;color:var(--dim);text-wrap:pretty}
.story-opening .story-english{font-style:italic;font-size:clamp(26px,3vw,34px);line-height:1.55}
.story-ending .story-english{font-style:italic;font-size:clamp(23px,2.5vw,29px)}
.story-ending{margin-bottom:clamp(85px,12vw,150px)}
.story-ending .story-english p:last-child{margin-top:30px}
.story-narrative>.story-photo-breath{width:min(760px,100%)}
.story-closing-photo{width:min(920px,100%);margin:clamp(65px,9vw,120px) auto 0}
.story-narrative .story-photograph a{cursor:zoom-in}
@media(max-width:600px){.story-passage{width:100%;margin:60px auto}.story-english{font-size:22px;line-height:1.65}.story-chinese{font-size:12px;line-height:2.1;margin-top:26px}.story-opening .story-english{font-size:28px}.story-ending .story-english{font-size:25px}.story-ending{margin-bottom:100px}}
/* Each entrance completes once, independently of scrolling speed. */
.story-photograph.story-reveal{opacity:0;transform:translateY(20px);transition:opacity 1.1s ease var(--story-delay,0ms),transform 1.2s var(--ease-quiet) var(--story-delay,0ms)}
.story-photograph.story-reveal.story-visible{opacity:1;transform:none}
.story-passage.story-reveal .story-english,.story-passage.story-reveal .story-chinese{opacity:0;transform:translateY(12px);transition:opacity 1s ease,transform 1.1s var(--ease-quiet)}
.story-passage.story-reveal .story-chinese{transition-delay:.22s}
.story-passage.story-reveal.story-visible .story-english,.story-passage.story-reveal.story-visible .story-chinese{opacity:1;transform:none}
.story-closing-photo .story-photograph.story-reveal{transition-duration:1.45s,1.5s}
@media(min-width:601px){.story-photo-pair>.story-photograph:nth-child(2){--story-delay:140ms}}
@media(prefers-reduced-motion:reduce),print{.story-photograph.story-reveal,.story-passage.story-reveal .story-english,.story-passage.story-reveal .story-chinese{opacity:1;transform:none;transition:none}}
/* The Journal index becomes one full-width, snapped cabinet. */
.journal-cabinet{position:relative;width:100%;min-height:100svh;padding:92px 0 30px;overflow:hidden;scroll-margin-top:-80px}
.cabinet-anchor{position:absolute;top:0;left:0;width:1px;height:1px;scroll-margin-top:-80px;pointer-events:none}
.journal-cabinet .journal-index-heading{padding:0 24px}
.journal-cabinet .journal-index-heading .eyebrow{margin:0}
.journal-cabinet .journal-index-heading h2{margin:18px 0 0}
.cabinet-stage{position:relative;margin:12px 0 0;padding-top:18px;touch-action:pan-y}
.cabinet-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,280px));gap:40px;justify-content:center;padding:45px 24px}
.cabinet-folder{border:0;padding:0;background:none;color:#fff;position:relative;aspect-ratio:4/3;text-align:left;cursor:pointer;appearance:none;-webkit-tap-highlight-color:transparent}
.cabinet-tab{position:absolute;top:-24px;left:0;background:#252525;clip-path:polygon(0 0,75% 0,100% 100%,0 100%);height:26px;width:76px;padding:7px 12px;font:10px/1 var(--sans);letter-spacing:.13em;color:#fff}
.cabinet-folder-body{display:block;position:relative;width:100%;height:100%}
.cabinet-paper{position:absolute;inset:0;background:#1b1b1b;border:1px solid rgba(255,255,255,.13);overflow:hidden;pointer-events:none}
.cabinet-paper img{display:block;width:100%;height:100%;object-fit:cover}
.paper-one{transform:translate(5px,-8px)}
.paper-two{transform:translate(-3px,-4px)}
.cabinet-front{display:grid;place-items:center;position:relative;width:100%;height:100%;background:#101010;border:1px solid rgba(255,255,255,.28);overflow:hidden}
.cabinet-front>img{display:block;width:100%;height:100%;object-fit:contain}
.cabinet-story-image{view-transition-name:journal-photo-01}
.cabinet-empty-number{font:italic 400 clamp(70px,9vw,110px)/1 var(--serif);color:rgba(255,255,255,.35)}
.cabinet-shade{position:absolute;inset:0;background:#000;opacity:var(--cabinet-shade,0);pointer-events:none}
.cabinet-ready .cabinet-stage{height:clamp(270px,44svh,400px);perspective:1100px}
.cabinet-ready .cabinet-cards{position:absolute;inset:0;display:block;padding:0;transform-style:preserve-3d}
.cabinet-ready .cabinet-folder{position:absolute;top:50%;left:50%;width:var(--folder-width,300px);height:calc(var(--folder-width,300px)*.75);aspect-ratio:auto;transform-style:preserve-3d;backface-visibility:hidden}
.cabinet-ready .cabinet-folder:focus-visible{outline:none}
.cabinet-folder:focus-visible .cabinet-front{outline:1px solid #fff;outline-offset:6px}
.cabinet-folder[aria-pressed=true] .cabinet-front{border-color:rgba(255,255,255,.45)}
.cabinet-floor{display:none}
.cabinet-ready .cabinet-floor{display:block;position:absolute;left:5%;right:5%;top:78%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);pointer-events:none}
.cabinet-copy{width:min(560px,calc(100% - 48px));margin:0 auto;position:relative;min-height:124px;text-align:center}
.cabinet-meta{font:10px/1.8 var(--sans);letter-spacing:.1em;color:var(--dim);margin:0}
.cabinet-title{font:italic 400 clamp(26px,3vw,36px)/1.25 var(--serif);color:#fff;margin:12px 0 14px}
.cabinet-status{min-height:40px}
.cabinet-read{font-size:15px;padding:4px}
.cabinet-unwritten{font:italic 15px/1.8 var(--serif);color:var(--dim)}
.cabinet-unwritten small{display:block;font:italic 11px/1.8 "Songti SC",serif;margin-top:5px}
.cabinet-controls{display:flex;align-items:center;justify-content:center;gap:28px;margin:18px auto 0}
.cabinet-controls button{background:none;border:0;color:#fff;font:20px/1 var(--serif);padding:10px 14px;cursor:pointer;transition:opacity .3s ease,transform .4s ease}
.cabinet-controls button:disabled{opacity:.2;cursor:default}
.cabinet-controls button:not(:disabled):hover{transform:translateY(-2px)}
.cabinet-position{font:10px/1.8 var(--sans);letter-spacing:.2em;color:var(--muted);min-width:60px}
.cabinet-hint{font:italic 12px/1.8 var(--serif);color:var(--dim);margin:6px 0 16px}
.cabinet-touch-hint{display:none}
.journal-cabinet .journal-return{font-size:13px;margin:0 auto;padding:8px}
.journal-cabinet [hidden]{display:none!important}
@media(max-width:600px){.journal-cabinet{position:relative;width:100%;padding-top:92px}.cabinet-ready .cabinet-stage{height:clamp(250px,40svh,330px)}.cabinet-title{font-size:27px}.cabinet-copy{min-height:122px}.cabinet-controls{margin-top:8px}.cabinet-desktop-hint{display:none}.cabinet-touch-hint{display:inline}.cabinet-hint{margin-bottom:12px}}
@media(prefers-reduced-motion:reduce){.cabinet-controls button{transition:none}}
@view-transition{navigation:auto}
::view-transition-group(journal-photo-01){animation-duration:.7s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-old(journal-photo-01),::view-transition-new(journal-photo-01){height:100%;object-fit:contain;mix-blend-mode:normal}
@media(max-width:600px){.journal-folders{grid-template-columns:minmax(0,1fr);gap:82px;margin-top:90px}.folder-copy{padding-top:24px}.folder-title{font-size:28px}.journal-story{width:calc(100% - 44px);padding-top:115px}.journal-story-heading{margin-bottom:36px}.journal-story-heading .story-title{font-size:36px}.journal-story-body{margin:45px auto 28px}}
@media(prefers-reduced-motion:reduce){.journal-folder,.folder-sheet,.folder-front,.folder-title{transition:none;animation:none}.journal-folder:hover,.journal-folder:hover .folder-front,.journal-folder:hover .folder-title{transform:none}::view-transition-group(*){animation-duration:.01ms!important}}