@charset "UTF-8";
@font-face{font-family:"Noto Serif TC UI";src:url("fonts/noto-serif-tc-poetry.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
:root{--paper:#142b24;--ink:#e6e8df;--muted:#a7b5a4;--accent:#91a890;--ease:cubic-bezier(.22,1,.36,1);font-family:"Times New Roman",Times,"Noto Serif TC UI","Songti SC",serif;color:var(--ink);background:var(--paper);font-synthesis:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;word-spacing:.2em}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:50px}body{margin:0;overflow-x:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}img{display:block;max-width:100%;height:auto}figure,p,h1{margin:0}::selection{background:#526f59;color:#fff}.skip-link{position:fixed;top:8px;left:12px;transform:translateY(-160%);z-index:30;background:var(--paper);padding:10px}.skip-link:focus{transform:none}
.cover{position:relative;background:var(--paper)}.cover-scene{position:relative;height:100svh;min-height:520px;overflow:hidden;isolation:isolate}.hero-motion-ready .cover{height:calc(max(520px,100svh) + 42svh)}.hero-motion-ready .cover-scene{position:sticky;top:0}.hero-word{display:inline-block;transform-origin:50% 70%;backface-visibility:hidden}.hero-motion-ready .hero-word{will-change:transform,opacity}.cover-image{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:61% 50%;z-index:-2}.cover-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(9,35,48,.15),rgba(9,35,48,0) 48%,rgba(8,29,38,.2))}.cover-heading{position:absolute;top:calc(34px + env(safe-area-inset-top));left:22px;right:22px;display:flex;align-items:baseline;justify-content:space-between;gap:16px;color:#e7eeee}.cover h1{font-size:clamp(23px,6.5vw,32px);line-height:1.18;font-weight:400;letter-spacing:.015em;word-spacing:.28em;flex-shrink:0}.cover-title-zh{font-size:12px;line-height:1.7;letter-spacing:.12em;white-space:nowrap;text-align:right}.cover-dates{position:absolute;left:24px;right:24px;bottom:calc(38px + env(safe-area-inset-bottom));display:flex;align-items:baseline;justify-content:space-between;gap:20px;color:#edf1ef}.cover-date{font-size:13px;letter-spacing:.06em;word-spacing:.3em}.cover-date-zh{font-size:12px;letter-spacing:.1em;text-align:right}
.index-toggle{position:fixed;top:calc(112px + env(safe-area-inset-top));right:14px;z-index:10;width:48px;height:52px;display:grid;place-items:center;background:none;border-radius:12px}.index-toggle .fig-icon{width:40px;height:46px;overflow:visible;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}.index-toggle:active .fig-icon{transform:rotate(-5deg) scale(.94)}.fig-stem{fill:none;stroke:#bbcab5;stroke-width:1.6}.fig-leaf{fill:#64867c;stroke:#bbcab5;stroke-width:1}.fig-leaf-vein{fill:none;stroke:#bbcab5;stroke-width:.7;opacity:.8}.fig-rind{fill:#354a3b;stroke:#c9cdbb;stroke-width:1.2}.fig-flesh{fill:#9b7c83;opacity:.88}.fig-heart{fill:#d1ac9c;opacity:.85}.fig-seeds{fill:none;stroke:#e8d3b2;stroke-width:1.2}
.photographs{max-width:760px;margin:auto;padding:72px 20px calc(64px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:68px}.frame{width:100%;min-width:0;scroll-margin-top:70px}.photo{display:block;width:100%;aspect-ratio:3/2;background:var(--paper);cursor:zoom-in}.photo img{width:100%;height:100%;object-fit:contain;object-position:center;background:var(--paper)}.frame figcaption{font-size:10px;letter-spacing:.11em;font-variant-numeric:tabular-nums;line-height:1;margin-top:17px;text-align:center;color:var(--muted)}
.reveal{opacity:1;transform:none}.motion-ready .reveal{transition:opacity .85s var(--ease),transform .85s var(--ease)}.motion-ready .reveal:not(.is-visible){opacity:0;transform:translate3d(0,18px,0)}.motion-ready .reveal.is-visible{opacity:1;transform:none}
dialog{border:0;padding:0;color:inherit}dialog::backdrop{background:rgba(10,23,18,.6)}.icon-button{width:44px;height:44px;display:grid;place-items:center;font-size:26px;font-weight:300;line-height:1}.icon-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.1}
.viewer{position:fixed;inset:0;margin:0;width:100vw;max-width:none;height:100dvh;max-height:none;background:transparent;overflow:hidden;opacity:1}.viewer[open]{display:flex;flex-direction:column}.viewer::backdrop{background:rgba(10,23,18,0);transition:background .4s ease}.viewer.is-open::backdrop{background:rgba(10,23,18,1)}.viewer-top,.viewer-bottom{opacity:0;transition:opacity .25s ease;flex-shrink:0}.viewer.is-open .viewer-top,.viewer.is-open .viewer-bottom{opacity:1}.viewer-top{height:84px;padding:calc(12px + env(safe-area-inset-top)) 20px 8px;display:flex;align-items:center;justify-content:space-between}.viewer-top>span{font-size:11px;color:var(--muted);letter-spacing:.06em}.viewer-stage{flex:1;min-height:0;position:relative;overflow:hidden;width:100%;user-select:none;-webkit-user-select:none}.viewer-strip{display:flex;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x pinch-zoom;-webkit-overflow-scrolling:touch}.viewer-strip::-webkit-scrollbar{display:none}.viewer-slide{flex:0 0 100%;min-width:0;height:100%;display:flex;align-items:center;justify-content:center;scroll-snap-align:start;scroll-snap-stop:always}.viewer-slide img{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}.viewer-bottom{padding:12px 18px calc(18px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;min-height:78px}.viewer-bottom .icon-button{flex-shrink:0}.viewer-camera{flex:1;min-width:0;margin:0 8px;text-align:center;font-size:12px;line-height:1.5;letter-spacing:.025em;word-spacing:.1em;color:var(--muted)}.transition-image{object-fit:contain;pointer-events:none;max-width:none!important;max-height:none!important;z-index:100;will-change:transform,width,height;transform-origin:top left}
.index-panel{inset:auto 0 0;position:fixed;width:100%;max-width:760px;height:88dvh;max-height:88dvh;margin:0 auto;background:var(--paper);padding:0 22px calc(28px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;opacity:0;transform:translateY(24px);transition:opacity .3s ease,transform .4s var(--ease)}.index-panel.is-open{opacity:1;transform:none}.index-top{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--paper);z-index:1;padding:18px 0 14px;margin-bottom:10px}.index-top>span{font-size:10px;letter-spacing:.08em;color:var(--muted)}.index-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px 14px}.index-item{display:flex;flex-direction:column;text-align:center;gap:10px}.index-item img{width:100%;height:auto;aspect-ratio:3/2;object-fit:contain}.index-item span{font-size:9px;letter-spacing:.05em;color:var(--muted)}
@media(min-width:700px){.cover-heading{left:44px;right:44px;top:40px}.cover h1{font-size:36px}.cover-title-zh{font-size:17px;letter-spacing:.18em}.cover-dates{left:46px;right:46px;bottom:44px}.cover-date{font-size:14px}.cover-date-zh{font-size:13px}.index-toggle{right:34px;top:124px}.cover-image{object-position:50% 50%}.photographs{padding-top:100px;padding-bottom:100px;gap:96px}.viewer-slide{padding-inline:40px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;animation-iteration-count:1!important}.motion-ready .reveal:not(.is-visible){opacity:1;transform:none}}

@media(max-width:699px){.cover h1,.cover-title-zh{font-size:12px;line-height:1.7}.cover h1{letter-spacing:.06em}.photographs{padding:56px 12px 64px;gap:56px}.photo{aspect-ratio:auto;height:max(50svh,112vw)}.photo img{object-fit:cover}.frame figcaption{font-size:12px;margin-top:14px}}

@supports(overflow:clip){body{overflow-x:clip}}
@media(prefers-reduced-motion:reduce){.hero-motion-ready .cover{height:auto}.hero-motion-ready .cover-scene{position:relative}.hero-word{transform:none!important;opacity:1!important;will-change:auto!important}}

/* Crop only the preview surface; the lightbox uses the complete photograph. */
.photo,.photo-preview{position:relative;overflow:hidden;container-type:size}
.photo-preview{display:block;width:100%;aspect-ratio:3/2;background:var(--paper)}
.photo img,.index-item .photo-preview img{position:absolute;left:50%;top:50%;width:var(--preview-cover);height:auto;max-width:none;aspect-ratio:auto;object-fit:cover;transform:translate(var(--preview-x),var(--preview-y));clip-path:var(--preview-clip)}
@media(min-width:700px){.photo img{width:var(--preview-contain)}}
.gallery-footer{max-width:760px;margin:0 auto;padding:0 24px calc(72px + env(safe-area-inset-bottom));text-align:center}
.shuffle-button{display:inline-flex;flex-direction:column;align-items:center;gap:8px;min-width:96px;min-height:48px;padding:12px 16px;color:var(--ink);font-size:16px;font-weight:400;letter-spacing:.08em;text-decoration:none;transition:opacity .2s ease}
.shuffle-button:hover{opacity:.7}
.shuffle-label-zh{font-size:12px;line-height:1.6;letter-spacing:.14em;word-spacing:normal;color:var(--muted)}

/* A quiet page between the cover and the photographs. Translations share a
   grid cell so switching language does not move the photos or the control. */
.tree-introduction{min-height:72svh;padding:76px 34px 28px;display:flex;align-items:center;scroll-margin-top:0}
.tree-note{width:100%;max-width:460px;margin:0 auto}
.tree-name{display:grid;margin:0 0 26px;font-size:13px;line-height:1.7;font-weight:400;letter-spacing:.1em;color:var(--muted)}
.tree-name>span,.tree-poem>p{grid-area:1/1;min-width:0}
.tree-poem{display:grid;font-size:clamp(17px,4.6vw,20px);line-height:1.85;word-spacing:.1em;letter-spacing:.005em}
.tree-poem p>span{display:block}
.tree-poem [lang="zh-Hant"]{font-size:.9em;line-height:2.05;letter-spacing:.08em;word-spacing:normal}
[data-tree-language]{opacity:1;visibility:visible;transition:opacity .3s ease,visibility .3s ease}
[data-language="en"] [data-tree-language="zh-Hant"],[data-language="zh-Hant"] [data-tree-language="en"]{opacity:0;visibility:hidden}
.tree-language-toggle{display:block;min-width:44px;min-height:44px;margin-top:14px;text-align:left;font-size:11px;line-height:1.5;letter-spacing:.12em;color:var(--muted);transition:color .2s ease}
.tree-language-toggle[hidden]{display:none}
.tree-language-toggle:hover{color:var(--ink)}
@media(min-width:700px){.tree-introduction{padding:100px 48px 24px;min-height:640px}.tree-name{margin-bottom:30px}.tree-poem{font-size:22px;line-height:1.9}}
@media(max-width:359px){.tree-introduction{padding-left:28px;padding-right:32px}.tree-poem{font-size:16px}}

/* Observe a stationary frame; animate only its contents so reveals never
   disturb scroll position or retrigger their own intersection threshold. */
.motion-ready .frame.reveal{transform:none;transition:opacity 1s var(--ease)}
.motion-ready .frame.reveal .photo{transform:none;transition:transform 1.1s var(--ease)}
.motion-ready .frame.reveal:not(.is-visible){transform:none}
.motion-ready .frame.reveal:not(.is-visible) .photo{transform:translate3d(0,var(--reveal-y,48px),0) scale(.975)}
@media(prefers-reduced-motion:reduce){.motion-ready .frame.reveal:not(.is-visible) .photo{transform:none}}

.poem-word{display:inline-block;transform-origin:50% 70%;backface-visibility:hidden}
.poem-readable{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:pre-line;border:0}
@media(prefers-reduced-motion:reduce){.poem-word{transform:none!important;opacity:1!important}}

/* A separate, quiet tree layer follows the journey through the photographs. */
.tree-gallery{position:relative;isolation:isolate;background:var(--paper)}
.tree-ink-filter{position:absolute;pointer-events:none;overflow:hidden}
.tree-backdrop{position:absolute;inset:0;pointer-events:none;user-select:none;-webkit-user-select:none}
.tree-backdrop-window{position:sticky;top:0;height:100svh;overflow:hidden;opacity:.7;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 90%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 90%,transparent)}
.tree-backdrop-image{filter:url(#tree-blue-ink);position:absolute;top:0;left:50%;width:clamp(1080px,220vw,1800px);max-width:none;height:auto;transform:translate3d(-50%,var(--tree-shift,0px),0);pointer-events:none}
.tree-gallery .photographs,.tree-gallery .gallery-footer{position:relative;z-index:1}
.tree-gallery .photographs{padding-top:170px}
.tree-gallery .gallery-footer{padding-top:130px;padding-bottom:calc(90px + env(safe-area-inset-bottom))}
@media(min-width:700px){.tree-gallery .photographs{padding-top:220px}.tree-gallery .gallery-footer{padding-top:180px;padding-bottom:110px}}
@media(prefers-reduced-motion:reduce){.tree-backdrop-window{position:absolute;inset:0;height:100%;opacity:.42}.tree-backdrop-image{height:100%;object-fit:fill;transform:translateX(-50%)}}

/* Keep the close glyph independent of the button hit area and dialog motion. */
.close-control .close-glyph{display:block;font:inherit;line-height:1;color:inherit;letter-spacing:normal;transform-origin:center;backface-visibility:hidden;pointer-events:none}
@media(prefers-reduced-motion:reduce){.index-toggle .fig-icon{transition:none}.index-toggle:active .fig-icon{transform:none}}

/* Touch-opened dialogs retain focus without Safari's inherited focus ring. */
html[data-input-modality="pointer"] .close-control:focus{outline:none}