@charset "UTF-8";
:root{color-scheme:dark;--paper:#efefed;--muted:#858584;--dim:#454544;--edge:#202020;--side:clamp(24px,5.5vw,112px)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:88px}body{margin:0;background:#000;color:var(--paper);font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}body,h1,h2,h3,p,figure{margin:0}a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible{outline:1px solid #ddd;outline-offset:8px}img{display:block;width:100%;height:100%;object-fit:contain}h1,h2,h3{font-weight:400}p{color:var(--muted);font-size:14px;line-height:1.9;letter-spacing:.08em}h2{font-size:clamp(28px,3.4vw,56px);line-height:1.55;letter-spacing:.08em}.skip{position:fixed;z-index:100;top:10px;left:20px;background:#ddd;color:#000;padding:10px 20px;transform:translateY(-160%)}.skip:focus{transform:none}.reading-progress{position:fixed;top:0;left:0;right:0;height:1px;z-index:50;pointer-events:none}.reading-progress span{display:block;width:100%;height:100%;background:#aaa;transform:scaleX(0);transform-origin:left}.site-header{height:88px;padding:0 var(--side);display:flex;align-items:center;justify-content:space-between;position:fixed;top:0;left:0;right:0;z-index:40;background:none;text-shadow:0 1px 12px #000;border:0}.site-header.scrolled{background:none}.wordmark{display:flex;align-items:center;gap:12px;font-size:14px;letter-spacing:.18em}.mark{display:block;width:25px;height:13px;border-top:1px solid #bebebe;transform:translateY(6px)}.wordmark-dot{margin-left:0;color:#747474}nav{display:flex;gap:38px;align-items:center}nav a{font-size:12px;color:#939392;letter-spacing:.15em;position:relative;padding:12px 0;transition:color .4s}nav a:hover,nav a[aria-current]{color:#fff}.nav-dot{display:inline-block;width:3px;height:3px;background:#999;border-radius:50%;vertical-align:middle;margin-left:8px}.hero{height:100svh;min-height:680px;max-height:1250px;position:relative;overflow:hidden}.hero-art{position:absolute;right:5%;top:0;width:min(69vw,960px);height:113%;transform-origin:50% 35%}.hero-art img{object-position:center top}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#000 0%,#000a 24%,transparent 60%),linear-gradient(0deg,#000,transparent 23%)}.hero-copy{position:absolute;left:var(--side);top:35%;z-index:2}.eyebrow{font-size:11px;line-height:1.8;letter-spacing:.3em;color:#828281}.hero h1{font-size:clamp(52px,6.5vw,104px);line-height:1.6;letter-spacing:.08em;margin:17px 0 22px}.hero .period{color:#929292}.hero-sub{font-size:16px;line-height:2;letter-spacing:.2em;color:#a5a5a2}.scroll-cue{position:absolute;left:var(--side);bottom:48px;display:flex;align-items:center;gap:29px;font-size:10px;letter-spacing:.18em;color:#81817f}.scroll-cue i{font-size:18px;font-style:normal}.hero-note{position:absolute;right:var(--side);bottom:49px;font-size:10px;letter-spacing:.22em;color:#525251}.afterglow{min-height:700px;height:85svh;max-height:980px;display:flex;position:relative;align-items:center;overflow:hidden}.afterglow-art{position:absolute;left:4%;width:62%;height:120%;filter:grayscale(1)}.afterglow-art img{object-fit:contain}.afterglow-copy{position:relative;margin-left:61%;padding-right:var(--side);z-index:1}.afterglow-copy h2{font-size:clamp(30px,3.2vw,50px);margin-top:24px}.anchor{scroll-margin-top:30px}.scene{position:relative;padding:90px var(--side) 65px;overflow:hidden}.section-copy{position:relative;z-index:2}.section-copy h2{margin:18px 0 17px}.chapter-no{color:#626260;font-size:10px;letter-spacing:.24em}.scene-art{width:100%;max-width:1600px;margin:0 auto;aspect-ratio:1.75}.scene-focus{text-align:center;padding-top:110px}.scene-focus .scene-art{margin-top:-20px}.scene-focus .section-copy h2{font-size:clamp(30px,3.6vw,58px)}.paired{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#000;margin:75px var(--side) 40px;border:0}.paired-scene{background:#000;min-width:0;padding-bottom:45px}.paired-art{width:100%;aspect-ratio:1.35}.paired-art img{object-fit:contain}.paired-copy{padding:12px 8% 0;position:relative}.paired-copy h2{font-size:clamp(23px,2.2vw,36px);margin-bottom:12px}.small-index{position:absolute;right:8%;top:25px;font-size:9px;color:#5d5d5b;letter-spacing:.16em}.paired-copy p{font-size:12px}.scene-moments{padding-top:170px}.scene-moments .scene-art{margin-top:-20px}.scene-echo{display:grid;grid-template-columns:1.4fr 1fr;align-items:center;padding-top:40px;padding-bottom:110px;column-gap:5vw}.scene-echo .scene-art{aspect-ratio:1.1;min-width:0}.scene-echo .section-copy h2{font-size:clamp(28px,3vw,48px)}.scene-traces{padding-top:110px}.scene-traces .scene-art{margin-top:0}.scene-path{padding-top:30px;padding-bottom:150px}.scene-path .section-copy{margin-top:-50px;margin-left:8%}.scene-path .scene-art{aspect-ratio:1.9}.details{padding:120px var(--side) 150px;border:0;scroll-margin-top:70px}.details-heading{text-align:center}.details-heading h2{margin:24px 0 20px}.details-heading>p:last-child{font-size:13px}.details-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4vw;margin-top:80px}.detail:nth-child(2){padding-top:90px}.detail:nth-child(3){padding-top:180px}.detail-art{aspect-ratio:1/1.36;overflow:hidden}.detail-art img{filter:grayscale(1)}figcaption{padding-top:28px;border:0;position:relative}figcaption>span{position:absolute;right:0;top:33px;font-size:11px;color:#555}figcaption h3{font-size:22px;letter-spacing:.12em;margin-bottom:10px}figcaption p{font-size:11px}.closing{position:relative;height:95svh;min-height:760px;max-height:1200px;overflow:hidden;text-align:center;scroll-margin-top:0}.closing-copy{position:relative;z-index:2;padding-top:110px}.closing-copy h2{font-size:clamp(64px,8vw,120px);line-height:1.4;margin:20px 0}.closing-copy h2 span{color:#6d6d6b}.closing-copy>p:last-child{font-size:13px}.closing-art{position:absolute;left:15%;width:70%;height:130%;top:5%;pointer-events:none}.closing-art img{object-position:center center}.replay{position:absolute;bottom:55px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:50px;font-size:11px;letter-spacing:.2em;color:#989895;padding:14px 0;border:0;z-index:3}.replay span{font-size:17px}footer{margin:0 var(--side);border:0;padding:32px 0;display:flex;align-items:center;justify-content:space-between;color:#666;font-size:11px;letter-spacing:.13em}footer p{font-size:10px;color:#4e4e4c}footer>a:first-child span{padding-left:10px}footer>a:last-child{font-size:17px;padding:0 10px}
@media(prefers-reduced-motion:no-preference){.js .reveal{opacity:0;transform:translateY(24px);transition:opacity 1.2s ease,transform 1.2s cubic-bezier(.2,.65,.3,1)}.js .reveal.visible{opacity:1;transform:translateY(0)}.js .hero-art{animation:arrive 2.8s cubic-bezier(.2,.5,.3,1) both}.js .intro{animation:emerge 1.6s .2s both}.js h1.intro{animation-delay:.35s}.js .hero-sub.intro{animation-delay:.6s}@keyframes arrive{from{opacity:0;transform:scale(1.035)}to{opacity:1;transform:scale(1)}}@keyframes emerge{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}}
@media(min-width:1800px){main{max-width:2200px;margin:auto}.hero-art{right:12%}}
@media(max-width:900px){.site-header{height:76px}nav{gap:24px}.hero-art{right:-12%;width:87%;height:110%;top:5%}.hero-shade{background:linear-gradient(90deg,#000a,transparent 75%),linear-gradient(0deg,#000,transparent 35%)}.hero-copy{top:34%}.hero h1{font-size:64px}.hero .eyebrow{font-size:10px}.afterglow{min-height:580px;height:75svh}.afterglow-art{width:75%;left:-13%}.afterglow-copy{margin-left:56%;padding-right:20px}.scene{padding:70px var(--side)}.paired{margin-top:40px}.paired-copy h2{font-size:23px}.small-index{position:static;display:block;margin-bottom:18px}.paired-copy{padding-top:0}.scene-moments{padding-top:120px}.scene-echo{grid-template-columns:1.2fr 1fr;gap:3vw}.scene-echo .scene-art{aspect-ratio:1}.scene-echo .section-copy h2{font-size:28px}.scene-path .section-copy{margin-top:0}.details{padding-top:100px}.details-grid{gap:3vw}.detail:nth-child(2){padding-top:50px}.detail:nth-child(3){padding-top:100px}figcaption h3{font-size:18px}figcaption>span{top:32px}.closing{min-height:700px}.closing-art{width:100%;left:0;top:10%}}
@media(max-width:600px){:root{--side:25px}html{scroll-padding-top:75px}.site-header{height:70px}.wordmark{font-size:12px;gap:8px;letter-spacing:.1em}.mark{width:17px}nav{gap:20px}nav a{font-size:10px;letter-spacing:.08em}.nav-dot{display:none}.hero{min-height:720px;max-height:1050px}.hero-art{right:-8%;top:10%;height:85%;width:115%;}.hero-art img{object-fit:contain;object-position:center top}.hero-shade{background:linear-gradient(0deg,#000 4%,#000c 25%,transparent 70%)}.hero-copy{top:auto;bottom:16%;left:var(--side)}.hero h1{font-size:48px;margin:12px 0 16px;letter-spacing:.07em}.hero-sub{font-size:12px;line-height:1.9}.hero-sub br{display:none}.hero .eyebrow{font-size:9px;color:#91918f}.scroll-cue{bottom:30px;font-size:9px;gap:24px}.hero-note{bottom:31px;font-size:9px}.afterglow{height:590px;min-height:0;align-items:flex-end;padding-bottom:70px}.afterglow-art{left:-15%;top:-50px;width:100%;height:590px}.afterglow-copy{margin-left:44%;padding-right:15px}.afterglow-copy h2{font-size:27px;line-height:1.8;margin-top:15px}.afterglow-copy .eyebrow{font-size:9px;letter-spacing:.15em}.scene{padding:70px 0 45px}.section-copy{padding:0 var(--side)}.section-copy h2{font-size:30px;line-height:1.7;margin:15px 0}.section-copy p{font-size:11px;letter-spacing:.04em}.chapter-no{font-size:9px}.scene-art{width:120%;margin-left:-10%;aspect-ratio:1.6}.scene-focus{padding-top:90px}.scene-focus .scene-art{margin-top:35px;margin-left:-10%}.scene-focus .section-copy h2{font-size:29px}.paired{grid-template-columns:1fr;margin:30px var(--side) 0;background:transparent;border:0;gap:35px}.paired-scene{padding-bottom:35px;border:0}.paired-art{aspect-ratio:1.45;width:116%;margin-left:-8%}.paired-copy{padding:10px 0 0}.paired-copy h2{font-size:26px;letter-spacing:.07em}.paired-copy p{font-size:11px}.small-index{position:absolute;right:0;top:23px;font-size:9px}.scene-moments{padding-top:110px}.scene-moments .scene-art{margin-top:20px;width:142%;margin-left:-21%;aspect-ratio:1.7}.scene-echo{display:flex;flex-direction:column;padding-top:20px;padding-bottom:65px;gap:0}.scene-echo .scene-art{aspect-ratio:1.5;order:1}.scene-echo .section-copy{order:0;width:100%;margin-top:40px}.scene-echo .section-copy h2{font-size:29px}.scene-traces{padding-top:60px}.scene-traces .scene-art{width:138%;margin-left:-19%;margin-top:25px;aspect-ratio:1.6}.scene-path{display:flex;flex-direction:column;padding-bottom:90px}.scene-path .section-copy{order:0;margin:0;width:100%}.scene-path .scene-art{order:1;margin-top:20px;width:130%;margin-left:-15%;aspect-ratio:1.65}.details{padding-top:85px;padding-bottom:80px}.details-heading{text-align:left}.details-heading h2{font-size:28px;letter-spacing:.05em;margin:18px 0}.details-heading>p:last-child{font-size:11px;letter-spacing:.04em}.details-grid{grid-template-columns:1fr;gap:55px;margin-top:35px}.detail:nth-child(n){padding:0}.detail-art{aspect-ratio:1.2}.detail-art img{object-fit:contain}figcaption{padding-top:24px}figcaption h3{font-size:22px}figcaption p{font-size:11px}figcaption>span{top:29px}.closing{height:720px;min-height:0}.closing-copy{padding-top:80px}.closing-copy h2{font-size:76px;margin-top:24px}.closing-copy>p:last-child{font-size:11px;letter-spacing:.04em}.closing-art{top:12%;width:140%;left:-20%;height:115%}.replay{bottom:52px;font-size:10px}footer{padding:26px 0}footer p{font-size:9px;letter-spacing:.05em}footer>a:first-child{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1!important;transform:none!important}}

/* Keep every scene intact on narrow screens. */
@media(max-width:600px){.paired-scene{overflow:hidden}.scene-moments .scene-art,.scene-traces .scene-art{width:100%;margin-left:0;aspect-ratio:1.6}.detail-art{aspect-ratio:.85}}

.closing-art{filter:grayscale(1);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}

/* Dissolve detail imagery into the black field, keeping the center crisp. */
.detail-art{position:relative}.detail-art::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#000 0%,#000 8%,transparent 25%,transparent 75%,#000 92%,#000 100%),linear-gradient(0deg,#000 0%,#000 8%,transparent 32%,transparent 84%,#000 100%)}

/* The images flow directly into each other without a section heading. */
.details-grid{margin-top:0}

/* Quiet typography: lighter strokes and room for each character. */
body{font-family:"PingFang SC","Noto Sans CJK SC","Microsoft YaHei",sans-serif}
h1,h2,h3{font-weight:300}
.hero h1{letter-spacing:.12em}
h2{letter-spacing:.11em}
figcaption h3{font-weight:400;letter-spacing:.14em}
.closing-copy h2{font-size:clamp(50px,6vw,88px);letter-spacing:.14em}
@media(max-width:600px){.hero h1{letter-spacing:.1em}.closing-copy h2{font-size:54px}}

/* Quiet, unhurried transitions; imagery responds only while it is being explored. */
@media(prefers-reduced-motion:no-preference){
  .js .reveal{transform:translateY(10px);transition:opacity 1.25s ease,transform 1.25s cubic-bezier(.2,.65,.3,1)}
  .js .scene-art.reveal,.js .afterglow-art.reveal,.js .closing-art.reveal,.js .paired-scene.reveal{transform:none;transition:opacity 1.45s ease}
  .js .reveal.visible{opacity:1;transform:none}
  .js .section-copy.reveal,.js .afterglow-copy.reveal{transition-delay:.12s}
  .js .hero-art img,.js .detail-art img{transform:translate3d(var(--drift-x,0px),var(--drift-y,0px),0);transition:transform .65s cubic-bezier(.2,.65,.3,1)}
}

/* WenKai GB display type, locally hosted. The web subset is named Teaser Kai. */
@font-face{font-family:"Teaser Kai";src:url("assets/fonts/teaser-kai-light.woff2") format("woff2");font-style:normal;font-weight:300;font-display:swap}
@font-face{font-family:"Teaser Kai";src:url("assets/fonts/teaser-kai-regular.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
body{font-family:"Teaser Kai","Songti SC","Noto Serif CJK SC","SimSun",serif}
h1,h2,h3{font-weight:300}
figcaption h3{font-weight:400}

/* Subtle depth follows the visitor throughout the story. */
@media(prefers-reduced-motion:no-preference){
  .js .motion-image{transform:translate3d(var(--drift-x,0px),calc(var(--drift-y,0px) + var(--scroll-y,0px)),0);transition:transform .8s cubic-bezier(.2,.65,.3,1),filter .8s ease;will-change:transform}
  .js .motion-active .motion-image{filter:brightness(1.15)}
  .js .detail.motion-active .motion-image{filter:grayscale(1) brightness(1.15)}
  .paired-copy h2,figcaption h3{transition:color .7s ease,transform .7s cubic-bezier(.2,.65,.3,1)}
  .motion-active .paired-copy h2,.motion-active figcaption h3{color:#fff;transform:translateY(-3px)}
}

/* Independent planes keep the silhouettes intact while adding depth. */
.hero-art{container-type:size}
.hero-stack{position:absolute;top:0;left:50%;width:min(100%,66.6667cqh);aspect-ratio:2/3;transform:translateX(-50%)}
.hero-stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.hero-stack .hero-hand{clip-path:polygon(0 26%,25% 18%,45% 18%,69% 21%,70% 25%,43% 25%,35% 28%,24% 34%,12% 36%,0 43%);mask-image:linear-gradient(90deg,transparent 0%,#000 19%,#000 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 19%,#000 100%)}
.rest-depth{position:relative}
.rest-depth .rest-stone{position:absolute;left:0;top:50%;width:100%;height:auto;transform:translateY(-50%);clip-path:ellipse(8.5% 9% at 51.5% 57%);pointer-events:none}
.memory-depth{position:relative}
.memory-layer{display:none;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.js .memory-original,.js .whisper-original{opacity:0}
.js .memory-layer{display:block}
.memory-one{clip-path:inset(0 60.5% 0 0)}
.memory-two{clip-path:inset(0 30% 0 40%)}
.memory-three{clip-path:inset(0 0 0 70%)}
@media(prefers-reduced-motion:no-preference){
  .js .hero-stack .hero-hand{transform:translate3d(calc(var(--layer-x,0px) * 1.8),calc(var(--layer-y,0px) * 1.8 + var(--layer-scroll,0px) * .7),0);transition:transform .8s cubic-bezier(.2,.65,.3,1)}
  .rest-depth .rest-stone{transform:translate3d(calc(var(--layer-x,0px) * 1.4),calc(-50% + var(--layer-y,0px) * 1.4 + var(--layer-scroll,0px) * .8),0);transition:transform .8s cubic-bezier(.2,.65,.3,1)}
  .memory-layer{transition:transform .8s cubic-bezier(.2,.65,.3,1)}
  .memory-one{transform:translate3d(calc(var(--layer-x,0px) * -.7),calc(var(--layer-y,0px) * -.5 + var(--layer-scroll,0px) * .5),0)}
  .memory-two{transform:translate3d(calc(var(--layer-x,0px) * .6),calc(var(--layer-y,0px) * .6 + var(--layer-scroll,0px)),0)}
  .memory-three{transform:translate3d(calc(var(--layer-x,0px) * 1.3),calc(var(--layer-y,0px) * 1.1 + var(--layer-scroll,0px) * 1.3),0)}
}

.whisper-depth{position:relative}
.whisper-layer{display:none;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;object-fit:contain}
.js .whisper-layer{display:block}
.whisper-head{clip-path:inset(0 43% 0 0)}
.whisper-frame{clip-path:inset(0 0 0 57%)}
@media(prefers-reduced-motion:no-preference){
  .whisper-layer{transition:transform .8s cubic-bezier(.2,.65,.3,1)}
  .whisper-head{transform:translate3d(calc(var(--layer-x,0px) * .8),calc(var(--layer-y,0px) * .8 + var(--layer-scroll,0px)),0)}
  .whisper-frame{transform:translate3d(calc(var(--layer-x,0px) * -1.1),calc(var(--layer-y,0px) * -.8 + var(--layer-scroll,0px) * .6),0)}
}

/* Fade the actual image edges into the black page at every aspect ratio. */
.afterglow-art{display:flex;align-items:center;justify-content:center;container-type:size}
.afterglow-art img{width:min(100%,66.6667cqh);height:auto;mask-image:linear-gradient(90deg,transparent 0%,#000 16%,#000 84%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 16%,#000 84%,transparent 100%)}
@supports (mask-composite:intersect){
  .afterglow-art img{mask-image:linear-gradient(90deg,transparent 0%,#000 16%,#000 84%,transparent 100%),linear-gradient(0deg,transparent 0%,#000 10%,#000 90%,transparent 100%);mask-composite:intersect;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 16%,#000 84%,transparent 100%),linear-gradient(0deg,transparent 0%,#000 10%,#000 90%,transparent 100%);-webkit-mask-composite:source-in}
}
@media(max-width:900px){.afterglow-art{left:0}}