/* Option 5 uses one continuous stage width from the cutout to the film. */
:root{--stage-width:1180px;--red:#b61922}
.site-header,.hero,.story-stage,.chapter-suite,.performance-film,.site-footer{width:min(100%,var(--stage-width));margin-inline:auto}
.site-header{padding:30px 40px}.site-header nav{gap:28px}.site-header nav a{font-size:14px}
.opening-sequence{position:relative}.hero{height:100svh;min-height:760px;max-height:none}
.js .opening-sequence{height:calc(100svh + 580px);min-height:1340px}
.js .hero{position:sticky;top:0}
.portrait{width:1180px;height:1180px;top:calc(40svh - 590px);mask-image:linear-gradient(#000 0%,#000 57%,transparent 77%);-webkit-mask-image:linear-gradient(#000 0%,#000 57%,transparent 77%)}
.hero-copy{bottom:70px}.hero-copy h1{font-size:54px}.hero-description{font-size:18px}.interaction{margin-top:18px}.scroll-link{bottom:22px}
.red-curtain,.curtain-copy{display:none}
.js .red-curtain{display:block;position:absolute;inset:0;z-index:20;pointer-events:none;will-change:opacity}
.cutout-screen{width:100%;height:100%;display:block}.cutout-screen text{font-family:'Songti SC','Noto Serif CJK SC','SimSun',serif;font-weight:900}
.js .curtain-copy{display:block;position:absolute;z-index:22;bottom:12%;left:0;right:0;text-align:center}
.curtain-copy p{font-size:clamp(17px,2vw,24px);margin:0 0 27px}.curtain-copy button{background:none;border:0;border-bottom:1px solid #eee9de8c;padding:12px 0;min-height:44px;font:14px Arial,sans-serif;letter-spacing:.01em}.curtain-copy button span{margin-left:35px}
.hero[data-unveiled="false"] .guide-hand{visibility:hidden}.hero[data-unveiled="false"] .portrait{pointer-events:none}
.story-stage{max-width:var(--stage-width)}.robe-layer{width:100%}
.chapter-link{display:inline-block;font:12px/1.6 Arial,sans-serif;color:#d4c5a9;border-bottom:1px solid #d4c5a955;padding:5px 0}
.scene-copy h2{margin-bottom:20px;letter-spacing:-.025em;word-spacing:.04em}.scene-copy p{margin-bottom:14px;word-spacing:.02em}
.chapter-suite{padding:30px 7% 55px;position:relative;isolation:isolate;background:#0a0807}
.chapter-suite::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#030303aa,#030303f5 20%,#030303f5 80%,#030303aa),url('assets/costume-inner.png') center / 1180px auto repeat-y;opacity:.85}
.reading-chapter{display:grid;grid-template-columns:.85fr 1.2fr;gap:8%;padding:75px 0;border-bottom:1px solid #b399653d;scroll-margin-top:20px}
.reading-chapter:last-child{border-bottom:0}.reading-chapter header{padding:0}.chapter-number{display:block;color:#b69f77;font:12px Arial,sans-serif;letter-spacing:.14em;margin-bottom:28px}
.reading-chapter h2{font-size:clamp(34px,3.4vw,47px);font-weight:400;line-height:1.08;letter-spacing:-.035em;margin:0;max-width:340px;text-wrap:balance}
.reading-copy p{font-size:18px;line-height:1.85;color:#cec6b9;margin:0 0 22px;text-wrap:pretty}.reading-copy .chapter-source{font:12px/1.7 Arial,sans-serif;color:#a69980;margin:28px 0 0}.chapter-source a{text-decoration:underline;text-underline-offset:4px}
.performance-film{padding:85px 40px 90px;background:#030303}.film-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:30px}.film-heading h2{font-weight:400;font-size:clamp(35px,4vw,54px);letter-spacing:-.04em;margin:0}.film-heading p{font:12px/1.7 Arial,sans-serif;color:#ad9b80;margin:0 0 6px}
.video-shell{aspect-ratio:16/9;background:#090909;position:relative;overflow:hidden;border:1px solid #b49b7038}.video-art{position:absolute;inset:0;background:linear-gradient(#0002,#0008),url('assets/embroidery-macro.png') 50% 60% / cover;filter:brightness(.65)}
.load-film{position:absolute;inset:0;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;border:0;background:transparent;font:16px Georgia,serif}.play-symbol{display:grid;place-items:center;border:1px solid #e2d2bba1;width:74px;height:74px;border-radius:50%;font:21px Arial,sans-serif;padding-left:4px;transition:background .2s}.load-film:hover .play-symbol{background:#b61922}.video-shell iframe{width:100%;height:100%;border:0;position:absolute;inset:0}
.film-details{display:flex;justify-content:space-between;gap:30px;font:12px/1.8 Arial,sans-serif;color:#a99d89;padding-top:20px}.film-details p{margin:0}.film-details>div{text-align:right}.film-details a{color:#e0d8ca;display:inline-block;text-decoration:underline;text-underline-offset:4px;margin-bottom:5px}.performance-film .back-to-mask{margin-top:55px;font-size:14px}
.site-footer{padding:32px 40px 75px;border-top:1px solid #b399652b}
.reading-chapter h2,.film-heading h2{letter-spacing:-.02em;word-spacing:.04em}
@media(max-height:820px) and (min-width:761px){.portrait{width:1120px;height:1120px;top:-315px}.hero-copy{bottom:52px}.hero-copy h1{font-size:43px}.hero-description{font-size:16px}.interaction{margin-top:13px}.gesture-instruction{font-size:14px}.hero-copy .mode-controls{gap:24px}.scroll-link{bottom:17px}}
@media(max-width:760px){
 .site-header{padding:23px 22px;background:none}.site-header nav{gap:15px}.site-header nav a{font-size:12px}.wordmark{font-size:15px}.site-header nav a:first-child{display:none}
 .hero{min-height:780px}.js .opening-sequence{height:calc(100svh + 440px);min-height:1220px}.portrait{width:760px;height:760px;top:-25px}.hero-copy{bottom:70px}.hero-copy h1{font-size:52px}.hero-description{font-size:16px}.interaction{margin-top:20px}.mode-controls{gap:18px}.camera-button{min-width:155px}.interaction-meta{gap:17px}.interaction-meta .camera-note{font-size:10px}
 .curtain-copy p{font-size:17px}.js .curtain-copy{bottom:18%}.robe-layer{width:max(100%,620px)}
 .scene-copy{width:80%}.chapter-link{font-size:11px}.scene-copy h2{font-size:34px}.scene-copy p{font-size:15px;line-height:1.65}
 .chapter-suite{padding:10px 26px 15px}.reading-chapter{display:block;padding:50px 0;scroll-margin-top:15px}.chapter-number{margin-bottom:15px}.reading-chapter h2{font-size:36px;margin-bottom:27px;max-width:270px}.reading-copy p{font-size:16px;line-height:1.85}.reading-copy .chapter-source{font-size:11px}
 .performance-film{padding:50px 22px 60px}.film-heading{display:block;margin-bottom:23px}.film-heading h2{font-size:35px;max-width:270px}.film-heading p{margin:14px 0 0;font-size:11px}.load-film{font-size:14px;gap:14px}.play-symbol{width:54px;height:54px;font-size:16px}.film-details{display:block;font-size:11px}.film-details>div{text-align:left;margin-top:18px}.site-footer{padding:30px 25px 80px}
}
@media(prefers-reduced-motion:reduce){.js .opening-sequence{height:auto;min-height:0}.js .hero{position:relative}.js .red-curtain,.js .curtain-copy{display:none}.hero-copy,.scroll-link{opacity:1!important}.hero .guide-hand{display:none}}