*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:#252623;background:#f1f0eb;font-family:"Songti SC","Noto Serif CJK SC",serif;background-image:radial-gradient(ellipse at 0 10%,#b8bab64d,transparent 45%),radial-gradient(ellipse at 100% 90%,#a0a39b33,transparent 40%)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;background:transparent;border:1px solid #9999;border-radius:0;padding:10px 18px;cursor:pointer}button:hover,button:focus-visible{background:#292c28;color:#fff}a{color:inherit;text-decoration:none}header{height:90px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #3332}.brand{font-size:26px;letter-spacing:5px}.brand span{font-size:12px;border-left:1px solid;padding-left:15px}.edition,.eyebrow,.subtle,.guide,footer{font:11px/1.8 sans-serif;letter-spacing:3px;color:#777b72}.intro{padding:6vh 8vw 2vh;position:relative}.intro h1{font-size:clamp(34px,4vw,60px);font-weight:400;letter-spacing:10px;margin:15px 0}.intro h1 span{margin-left:30px;color:#686c64}.intro>p:last-of-type{letter-spacing:5px;font-size:13px}.seal{position:absolute;right:9vw;top:45%;writing-mode:vertical-rl;border:1px solid #835448;color:#835448;padding:8px 5px;font-size:12px;letter-spacing:3px}.scroll-frame{overflow-x:auto;padding:35px 0 20px}.scroll-art{position:relative;width:100%;min-width:980px;isolation:isolate}.group{display:block;width:100%;mix-blend-mode:multiply;transition:opacity .5s}.scroll-art.selected .group{opacity:.2}#spots{position:absolute;inset:0;z-index:5}.spot{position:absolute;transform:translate(-50%,-50%);border:0;padding:0;width:7%;height:45%;background:transparent!important}.spot:focus-visible{outline:1px solid #666}#lift{position:absolute;height:90%;width:20%;object-fit:contain;transform:translate(-50%,-50%) scale(.92);pointer-events:none;opacity:0;z-index:3;filter:drop-shadow(0 18px 15px #2225) drop-shadow(0 0 12px white);transition:opacity .3s,transform .6s}.selected #lift{opacity:1;transform:translate(-50%,-55%) scale(1.04)}#halo{position:absolute;width:22%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(ellipse,#fff8,transparent 70%);opacity:0;z-index:2;pointer-events:none}.selected #halo{opacity:1;animation:halo 3s infinite}#halo:after{content:'';position:absolute;inset:10%;border:6px dotted white;border-radius:50%;filter:blur(1px)}.guide{display:flex;justify-content:space-between;margin:15px 6vw}.guide span:first-child{visibility:hidden}nav{display:flex;justify-content:center;gap:3vw;margin:35px 5vw 50px}nav button{border:0;border-bottom:1px solid transparent;writing-mode:vertical-rl;letter-spacing:8px;padding:15px 8px;font-size:18px}nav button.active{border-color:#333;background:#252623;color:#fff}footer{margin:0 5vw;padding:24px 0;border-top:1px solid #3332;display:flex;justify-content:space-between}.back{margin:25px 5vw}.portrait{display:grid;grid-template-columns:1fr 1fr;max-width:1100px;margin:0 auto;align-items:center;padding:20px 40px 80px;gap:50px}.copy h1{font-size:76px;font-weight:400;letter-spacing:15px;margin:25px 0}.poem{font-size:22px;letter-spacing:4px;max-width:300px;line-height:2}.copy button{margin-top:30px}.poster-wrap{position:relative;box-shadow:0 30px 70px #292c2822;overflow:hidden}#poster{width:100%;display:block;filter:grayscale(1)}#spirit{position:absolute;width:86%;height:78%;object-fit:contain;bottom:6%;left:7%;filter:drop-shadow(5px 12px 12px #3334);animation:breathe 6s ease-in-out infinite;opacity:.9}.story{display:grid;grid-template-columns:1fr 1fr;gap:8vw;padding:90px 9vw;background:#dedfd833;align-items:center}.story h2{font-size:48px;font-weight:400;letter-spacing:10px}.story p{line-height:2.2}.story h3{font-size:24px;font-weight:400;line-height:1.9}.story hr{border:0;border-top:1px solid #3332;margin:35px 0}.artifact{height:400px;overflow:hidden;position:relative;background:radial-gradient(#fff9,transparent 70%)}.artifact img{height:600px;width:100%;object-fit:contain;object-position:top;filter:grayscale(1)}.artifact span{position:absolute;bottom:0;left:0;right:0;text-align:center;background:#e8e9e1;font-size:12px;letter-spacing:4px;padding:16px}.next{display:flex;justify-content:space-between;align-items:center;padding:45px 8vw}.next span{font-size:12px;letter-spacing:3px;color:#777}[hidden]{display:none!important}@keyframes breathe{50%{transform:translateY(-6px) rotate(.7deg) skewX(.5deg)}}@keyframes halo{50%{transform:translate(-50%,-50%) scale(1.15);opacity:.5}}@media(max-width:700px){header{height:70px}.edition{display:none}.intro{padding-top:35px}.intro h1{font-size:32px;letter-spacing:5px}.intro h1 span{display:block;margin:12px 0 0 35px}.guide{font-size:9px;letter-spacing:1px}.guide span:first-child{visibility:visible}.guide span:last-child{display:none}nav{gap:2vw;margin-top:20px}nav button{font-size:16px;padding:12px 5px}.portrait{display:flex;flex-direction:column;padding:15px 24px 50px;gap:30px}.copy{width:100%}.copy h1{font-size:45px;margin:15px 0}.poem{font-size:17px;max-width:none}.copy button{margin:0}.poster-wrap{width:100%;max-width:430px}.story{grid-template-columns:1fr;padding:45px 25px;gap:20px}.artifact{height:280px}.artifact img{height:430px}.story h2{font-size:36px}.next{padding:30px 20px}.next span{display:none}footer{font-size:9px;letter-spacing:1px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
#spirit{display:none}#poster{animation:inkbreath 8s ease-in-out infinite;transform-origin:50% 75%}@keyframes inkbreath{50%{transform:scale(1.018) translateY(-3px)}}@media(min-width:701px){.scroll-art{min-width:0}}@media(max-width:700px){.scroll-art{min-width:1200px}}
/* Second edition: fine contour dust, original-color living posters. */
#halo,#spirit{display:none!important}#lift{filter:drop-shadow(0 12px 16px #26282545) drop-shadow(0 0 2px #fff9)}#dust{position:absolute;inset:-60px 0;width:100%;height:calc(100% + 120px);z-index:4;pointer-events:none}.scroll-art.selected{background:#c9cbc780}.scroll-art{transition:background .6s}#poster{filter:none;animation:none;transform:none}#living{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.portrait{max-width:1350px;grid-template-columns:.65fr 1fr;gap:6vw}.poster-wrap{width:100%;box-shadow:0 25px 65px #1c211d25}.copy{align-self:center}.copy h1{font-size:clamp(44px,5.8vw,82px)}.copy .poem{line-height:2.2;max-width:350px}.copy button{font-size:12px;margin:15px 8px 0 0}.artifact{height:480px;display:flex;flex-direction:column;align-items:center;justify-content:center}.artifact img{width:100%;height:90%;object-fit:contain;filter:none}.artifact span{background:transparent;bottom:0}.story{padding-top:80px;padding-bottom:70px}.story h3{font-size:21px}.story p{font-size:16px;line-height:2.25}.narrative{max-width:1100px;margin:auto;padding:60px 6vw 80px}.narrative h2{font-size:38px;font-weight:400;letter-spacing:5px}.story-columns{display:grid;grid-template-columns:1fr 1fr;gap:55px}.story-columns h3{font-size:19px;font-weight:400;letter-spacing:4px}.story-columns p{font-size:16px;line-height:2.4;color:#53574e}.source{font-size:11px;line-height:2;color:#7c8076;margin-top:35px}.source a{text-decoration:underline}.copy .subtle{letter-spacing:1px;font-size:11px;max-width:320px}button:focus-visible{outline:2px solid #5d6b57;outline-offset:4px}@media(max-width:700px){.portrait{display:flex;gap:25px;padding:15px 18px 45px}.poster-wrap{max-width:600px}.copy{padding:0 10px}.copy .poem{font-size:20px;max-width:none}.artifact{height:340px}.story-columns{grid-template-columns:1fr;gap:20px}.narrative{padding:45px 25px}.narrative h2{font-size:28px}.story{padding-top:45px}.copy button{margin-top:8px}}

/* Photographic handscroll asset; the original artwork remains an independent layer. */
.scroll-frame {
  padding: 28px 3vw 35px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #85857e55 transparent;
  overscroll-behavior-x: contain;
}
.scroll-frame:focus-visible { outline: 1px solid #88887c; outline-offset: -6px; }
.scroll-object {
  position: relative;
  width: 100%;
  min-width: 820px;
  aspect-ratio: 3 / 1;
  isolation: isolate;

}
.scroll-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  filter: grayscale(1) drop-shadow(0 13px 10px #25251e28);
  pointer-events: none;
  user-select: none;
}
.scroll-paper {
  position: absolute;
  left: 10%;
  top: 20%;
  width: 80%;
}
.scroll-object .scroll-art {
  width: 100%;
  min-width: 0;
  isolation: auto;
  background: transparent;
}
.scroll-object .scroll-art.selected { background: transparent; }
.scroll-object .group { mix-blend-mode: multiply; }
/* The painting stays full size while a moving roller reveals it from left to right. */
.scroll-reveal { position: absolute; inset: 0; }
.scroll-travel {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  clip-path: inset(-8% -2% -8% 93.5%);
}
.scroll-travel img {
  display: block;
  width: 100%;
  height: 100%;
  filter: grayscale(1) drop-shadow(-4px 6px 5px #25251e32);
}
.scroll-curl-shadow {
  position: absolute;
  top: 13%;
  bottom: 13%;
  right: 4.8%;
  width: 1.7%;
  background: linear-gradient(90deg, transparent, #302e2544);
  border-radius: 50%;
  filter: blur(2px);
}
.is-unrolling .scroll-reveal { animation: scroll-reveal-right 2.4s cubic-bezier(.3,.05,.2,1) both; }
.is-unrolling .scroll-travel { display: block; animation: scroll-roller-right 2.4s cubic-bezier(.3,.05,.2,1) both; }
@keyframes scroll-reveal-right {
  from { clip-path: inset(-8% 93% -8% -2%); }
  to { clip-path: inset(-8% 3% -8% -2%); }
}
@keyframes scroll-roller-right {
  from { transform: translateX(-90%); }
  to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .is-unrolling .scroll-travel { display: none; }
  .is-unrolling .scroll-reveal { clip-path: none; }
}
@media (max-width: 700px) {
  .scroll-frame { padding: 20px 15px 28px; }
  .scroll-object { min-width: 1400px; }
  .guide { margin-top: 0; gap: 16px; }
}

/* Matches the editable body type layer in the user's group-poster PSD.
   Load the same bundled font on desktop and mobile devices. */
@font-face {
  font-family: "Baxian Poster Body";
  src: url("assets/fonts/longyin-web.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  --poster-body-font: "Baxian Poster Body", "Songti SC", "Noto Serif CJK SC", serif;
  --poster-title-font: var(--poster-body-font);
}
body, .edition, .eyebrow, .subtle, .guide, footer, .source {
  font-family: var(--poster-body-font);
  font-weight: 400;
}
h1, h2, h3, .brand, #names button { font-family: var(--poster-title-font); }
.story p, .story-columns p { font-size: 18px; line-height: 2.25; }
.guide, .eyebrow, .edition, footer { font-size: 12px; }
.copy .subtle, .source { font-size: 13px; }
@media (max-width:700px) {
  .guide, footer { font-size: 11px; }
  .story p, .story-columns p { font-size: 17px; }
}

/* Original calligraphic display artwork; real text labels remain accessible. */
.brush-heading { display: block; width: 100%; height: auto; overflow: hidden; mix-blend-mode: multiply; }
.brand { display: block; width: 142px; flex-shrink: 0; }
.intro .home-brush-title { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 5px 0 12px; }
.home-brush-title .brush-heading { width: clamp(190px,23vw,310px); }
.home-brush-title .brush-heading + .brush-heading { opacity: .78; }
.copy .person-brush-title { width: min(100%,310px); margin: 15px 0 22px; font-size: inherit; }
.story h2, .story h3, .narrative h2, .story-columns h3 { font-weight: 400; }
@media (max-width:700px) {
  .brand { width: 112px; }
  .intro .home-brush-title { flex-direction: column; align-items: flex-start; gap: 0; }
  .home-brush-title .brush-heading { width: 210px; }
  .home-brush-title .brush-heading + .brush-heading { margin-left: 30px; }
  .copy .person-brush-title { width: 230px; margin: 8px 0 12px; }
}

#voiceStatus:empty { display: none; }