:root{color-scheme:dark;--night:#2a221e;--cream:#eee4d3;--muted:#c7baac;--gold:#d1ac76;background:#2a221e;color:var(--cream);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-width:320px;background:var(--night)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}[hidden]{display:none!important}img{display:block;width:100%;height:auto}p,h1,h2,figure{margin:0}
.gate{min-height:100svh;display:grid;place-content:center;justify-items:center;gap:20px;font-size:12px}.gate>span{font:44px "Songti SC",serif}.gate a,.gate button{padding:12px;border-bottom:1px solid #c6b69c66}
.time-walk{height:300svh}
.porch{position:sticky;top:0;height:100svh;min-height:440px;isolation:isolate;background:var(--night);overflow:hidden}
.preview-bar{position:absolute;z-index:5;inset:max(8px,env(safe-area-inset-top)) 25px auto;display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:9px;letter-spacing:.08em}.preview-bar>span{color:var(--muted)}.preview-bar a{min-height:44px;display:flex;align-items:center}
.intro{position:absolute;z-index:2;top:clamp(85px,14svh,150px);left:5vw;max-width:45vw;text-shadow:0 2px 22px #080706}.kicker{font-size:9px;letter-spacing:.24em;color:var(--muted);margin-bottom:11px}.intro h1{font:400 clamp(28px,3.3vw,50px)/1.5 "Songti SC","Noto Serif CJK SC",serif;letter-spacing:.14em}.intro-note{margin-top:9px;font-size:11px;letter-spacing:.15em;color:var(--cream)}
.picture{position:absolute;inset:0;isolation:isolate;overflow:hidden}
.picture:after{content:"";position:absolute;z-index:2;inset:0;pointer-events:none;background:linear-gradient(180deg,#100e0c55,transparent 25%,transparent 70%,#100e0ca6)}
/* The image and the static dog share one cover coordinate system. No stretching. */
.art-plane{position:absolute;width:max(100%,80svh);height:max(100%,125vw);left:50%;top:100%;transform:translate(-50%,-100%)}
.shop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;opacity:0}
.shop:first-child{opacity:1}
.shop[data-time-image="1"]{object-position:50% 65%}
.shop[data-time-image="2"]{object-position:100% 70%}
.taipei{position:absolute;left:41.5%;top:75.7%;width:22%;aspect-ratio:1;transform:translateX(-50%);filter:brightness(.92) saturate(.82);pointer-events:none}
.dog-pose{position:absolute;inset:0;background-size:300% 200%;background-position:100% 100%;background-repeat:no-repeat}
.dog-shadow{position:absolute;left:13%;right:9%;bottom:5%;height:6%;background:#070a0ab0;border-radius:50%;filter:blur(3px)}
.time-caption{position:absolute;z-index:3;right:4vw;bottom:114px;text-align:right;text-shadow:0 1px 12px #080706}
.time-caption>p{font-size:10px;letter-spacing:.12em;color:var(--muted);line-height:1.7}
.time-choices{display:flex;justify-content:flex-end;gap:12px}
.time-choices button{min-height:44px;padding:8px 10px;font-size:9px;letter-spacing:.08em;color:var(--muted);opacity:.6}
.time-choices button:before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:currentColor;margin-right:6px;vertical-align:middle}
.time-choices button[aria-pressed=true]{color:var(--cream);opacity:1}
.porch-bottom{position:absolute;z-index:3;bottom:0;left:0;width:100%;padding:0 5vw max(14px,env(safe-area-inset-bottom));background:linear-gradient(transparent,#171713c9);backdrop-filter:blur(5px)}
.entry-nav{display:flex;justify-content:center;gap:clamp(28px,8vw,130px);border-top:1px solid #eee4d350;padding-top:6px;font-size:14px;letter-spacing:.12em}
.entry-nav a{min-height:48px;display:flex;align-items:center;gap:10px}
.entry-nav a:hover{color:var(--gold)}.entry-nav a>span{font-size:10px}
.scroll-hint{text-align:center;font-size:8px;letter-spacing:.12em;color:var(--muted);padding-top:4px}
.draft-note{padding:25px 24px 32px;text-align:center;color:var(--muted);font-size:9px;line-height:1.9;background:var(--night)}.draft-note a{display:inline-block;padding:14px 0}
/* Detail pages remain quiet reading spaces, rather than further animation chapters. */
.detail-page{max-width:1120px;margin:auto;padding:115px 7vw 65px}.detail-top{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.1em;margin-bottom:60px}.detail-top a{min-height:44px;display:flex;align-items:center}.detail-top>span{opacity:.5;font-size:9px}.detail-page h1{font:400 clamp(30px,4vw,52px)/1.5 "Songti SC",serif;letter-spacing:.12em}.detail-lead{margin:18px 0 40px;color:var(--muted);font-size:12px;line-height:2;letter-spacing:.12em}
.about-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:center}.about-copy{font-size:14px;line-height:2.3;letter-spacing:.05em}.about-copy p+p{margin-top:28px}.about-copy blockquote{margin:30px 0;font-family:"Songti SC",serif;font-size:22px;line-height:1.9}.signature{color:var(--gold);font-size:11px}.painting-caption{font-size:10px;color:var(--muted);line-height:1.8;margin-top:15px}
.bread-figure{max-width:100%;margin-top:30px}.bread-figure img{max-height:65svh;object-fit:contain}.detail-links{display:flex;gap:32px;flex-wrap:wrap;margin-top:45px;padding-top:22px;border-top:1px solid #d2bc942b;font-size:12px;letter-spacing:.1em}.detail-links a{padding:12px 0}.editor-note{margin-top:30px;font-size:10px;line-height:1.8;color:var(--muted)}
.story-section{margin-top:65px;max-width:660px}.story-section h2{font:400 25px/1.6 "Songti SC",serif;margin-bottom:24px}
.bread-names{list-style:none;padding:0;margin:24px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 25px}.bread-names li{font-size:14px;padding:16px 0;border-bottom:1px solid #d2bc942b}.source-link{display:inline-block;padding:12px 0;font-size:11px;color:var(--muted)}

@media(max-width:760px){
 .preview-bar{inset:max(5px,env(safe-area-inset-top)) 18px auto;font-size:8px}
 .intro{top:max(80px,11svh);left:26px;max-width:85vw}.intro h1{font-size:29px}.intro-note{font-size:10px}
 .art-plane{top:50%;transform:translate(-50%,-50%)}
 .time-caption{right:22px;bottom:106px}.time-caption>p{font-size:9px}
 .time-choices{gap:2px}.time-choices button{padding:8px}
 .porch-bottom{padding-left:22px;padding-right:22px}.entry-nav{font-size:12px;gap:12px;justify-content:space-between;letter-spacing:.03em}
 .detail-page{padding:75px 26px 45px}.detail-top{margin-bottom:35px;gap:12px}.about-grid{grid-template-columns:1fr;gap:30px}.about-copy{font-size:13px}.about-copy blockquote{font-size:20px}.detail-lead{margin-bottom:30px}.detail-links{font-size:11px}
}
@media(max-height:680px){
 .intro{top:65px}.intro h1{font-size:24px}.intro-note{margin-top:5px}.kicker{margin-bottom:6px}
 .time-caption{bottom:95px}.time-caption>p{display:none}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}