@charset "UTF-8";
:root{color-scheme:dark;--black:#030303;--ivory:#eee9de;--muted:#b2aca3;--gold:#b39965;--robe-shift:0px;--robe-scale:1;--robe-light:.8;font-family:Georgia,'Times New Roman',serif;background:var(--black);color:var(--ivory)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;overflow-x:hidden;background:var(--black)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:1px solid var(--ivory);outline-offset:7px}
button:disabled{cursor:wait;opacity:.6}
button[hidden],[hidden]{display:none!important}
::selection{background:#8b232a;color:#fff}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:15px;left:20px;padding:12px;background:#111;z-index:100;transform:translateY(-160%)}
.skip-link:focus{transform:translateY(0)}
.site-header{position:absolute;inset:0 0 auto;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:34px 4.5vw;gap:24px}
.wordmark{font-size:20px;letter-spacing:.18em;white-space:nowrap}
.site-header nav{display:flex;gap:40px;align-items:center;font-size:16px;letter-spacing:.02em}
.site-header nav a{padding:8px 0;transition:color .2s}
.site-header nav a:hover,.text-button:hover{color:#fff}
#stop-camera{position:fixed;right:25px;bottom:23px;z-index:60;background:#111e;border:1px solid #aaa6;border-radius:30px;padding:12px 22px;backdrop-filter:blur(16px);font-size:15px;text-decoration:none}
.hero{height:100svh;min-height:850px;max-height:1250px;position:relative;isolation:isolate;overflow:hidden;background:#030303}
.portrait{position:absolute;top:-35px;left:50%;width:min(100vw,80svh,840px);height:min(100vw,80svh,840px);transform:translateX(-50%);-webkit-mask-image:linear-gradient(#000 0%,#000 62%,transparent 92%);mask-image:linear-gradient(#000 0%,#000 62%,transparent 92%);user-select:none;touch-action:pan-y;contain:paint}
.mask-frame{width:100%;height:100%;background-image:url('assets/masks.png');background-size:300% 100%;background-position:0% 0%;background-repeat:no-repeat;will-change:background-position;filter:brightness(.98)}
.mask-frame[data-face="1"]{background-position:50% 0%}
.mask-frame[data-face="2"]{background-position:100% 0%}
.mask-target{position:absolute;left:33%;top:30%;width:34%;height:36%;pointer-events:none}
.portrait.is-changing .mask-frame{animation:mask-strike .18s ease-out}
@keyframes mask-strike{0%{filter:brightness(.7)}45%{filter:brightness(1.1)}100%{filter:brightness(.98)}}
.hero-copy{position:absolute;bottom:75px;left:50%;width:min(92%,650px);transform:translateX(-50%);text-align:center;z-index:5;pointer-events:none}
.hero-copy h1{font-family:'Songti SC','Noto Serif CJK SC','SimSun',serif;font-size:clamp(64px,6vw,90px);line-height:1;margin:0 0 10px;font-weight:400;letter-spacing:.1em;padding-left:.1em;text-shadow:0 2px 30px #000}
.hero-description{margin:0;font-size:21px;line-height:1.5;letter-spacing:.015em;text-shadow:0 2px 15px #000}
.interaction{margin-top:27px;pointer-events:auto}
.gesture-instruction{font-size:16px;margin:0 0 17px;line-height:1.5}
.mode-controls{display:flex;flex-direction:column;align-items:center;gap:14px}
.camera-button{border:1px solid #e7e0d3ab;background:#05050566;border-radius:30px;min-width:186px;padding:12px 27px;font-size:16px;line-height:1.2;backdrop-filter:blur(8px);transition:background .2s,border-color .2s}
.camera-button:hover{background:#2c2118a6;border-color:var(--ivory)}
.camera-button[aria-pressed="true"]{background:#181511ad}
.text-button{background:none;border:0;padding:3px;font-size:14px;line-height:1.4;color:var(--muted);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.camera-note{font-family:Arial,sans-serif;font-size:12px;letter-spacing:.015em;color:#99938b;margin:15px 0 0;line-height:1.5}
.interaction-status{font-family:Arial,sans-serif;font-size:13px;line-height:1.55;color:#c4b89c;margin:9px auto 0;max-width:400px;min-height:20px}
.change-button{font-size:13px;border:0;background:none;padding:5px 12px;color:#b2aca3;line-height:1.5}
.change-button span{margin-left:5px;display:inline-block;font-family:Arial,sans-serif;font-size:16px}
.change-button:hover{color:var(--ivory)}
.scroll-link{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);font-size:13px;color:#b3a995;display:flex;gap:16px;align-items:center;z-index:6;letter-spacing:.04em}
.scroll-link span{font-family:Arial,sans-serif;font-size:18px}
.guide-hand{position:absolute;z-index:4;width:min(42vw,450px);height:auto;opacity:0;pointer-events:none;transform-origin:70% 65%;mix-blend-mode:screen;will-change:transform,opacity;filter:grayscale(1) blur(.6px)}
body[data-mode="pointer"] .portrait{cursor:crosshair;touch-action:none}
.live-hand{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:35;mix-blend-mode:screen}

.costume-world{position:relative;isolation:isolate;background:#030303}
.robe-stage{position:sticky;top:0;height:100svh;margin-bottom:-100svh;overflow:hidden;z-index:-1;pointer-events:none}
.robe-image{display:block;position:absolute;left:50%;top:50%;width:100%;height:160svh;object-fit:cover;object-position:50% 40%;transform:translate(-50%,calc(-50% + var(--robe-shift))) scale(var(--robe-scale));opacity:var(--robe-light);will-change:transform,opacity}
.robe-shade{position:absolute;inset:0;background:linear-gradient(to bottom,#030303 0%,transparent 14%,transparent 88%,#030303a8 100%),linear-gradient(to right,transparent 14%,#03030322 26%,#030303c4 40%,#030303e0 50%,#030303c4 60%,#03030322 74%,transparent 86%)}
.chapter{position:relative;min-height:105svh;display:flex;align-items:center;justify-content:center;padding:130px 24px;isolation:isolate}
.chapter-copy{max-width:460px;width:100%;text-align:center}
.chapter h2,.pocket-copy h2{font-weight:400;font-size:clamp(35px,3.5vw,52px);line-height:1.12;letter-spacing:-.035em;margin:0 0 30px;text-wrap:balance}
.chapter p{color:#d4cec2;font-size:18px;line-height:1.8;margin:0 0 24px;text-wrap:pretty}
.art-chapter{min-height:115svh}
.art-chapter .chapter-copy{padding-top:6vh}
.costume-chapter{min-height:95svh}
.pocket-sequence{height:210svh;min-height:1550px;position:relative}
.pocket-stage{position:sticky;top:0;height:100svh;min-height:700px;overflow:hidden}
.pocket-copy{position:absolute;left:50%;top:10%;width:min(450px,50vw);transform:translateX(-50%);text-align:center;z-index:8}
.pocket-copy h2{font-size:clamp(32px,3vw,45px);margin-bottom:20px}
.pocket-copy p{font-size:18px;line-height:1.8;color:#d4cec2}
.pocket-action{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pocket-mouth{display:none}
.pocket-hand{position:absolute;z-index:5;width:59%;left:20%;top:18%;opacity:0;mix-blend-mode:screen;filter:grayscale(1) blur(.7px);transform-origin:58% 60%;will-change:transform,opacity}
.pocket-object{position:absolute;left:31%;top:24%;width:30%;height:43%;transform-origin:50% 65%;opacity:0;will-change:transform,opacity;filter:drop-shadow(0 10px 16px #000);clip-path:ellipse(43% 47% at 50% 48%)}
.pocket-mask{width:100%;height:100%;background-image:url('assets/masks.png');background-size:750% 222%;background-position:50% 48%;}
.pocket-lip{position:absolute;z-index:7;background-image:url('assets/costume.png');background-repeat:no-repeat;-webkit-mask-image:linear-gradient(#000 20%,transparent 95%);mask-image:linear-gradient(#000 20%,transparent 95%);opacity:var(--robe-light)}
.interpretation-note{position:absolute;bottom:65px;left:50%;transform:translateX(-50%);text-align:center;font-family:Arial,sans-serif;color:#a69b88;font-size:12px;line-height:1.5;width:min(86%,450px);z-index:10}
.replay-button{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);z-index:10;white-space:nowrap}
.closing-chapter{min-height:95svh}
.source-link{display:inline-block;font-size:15px;line-height:1.6;color:#cabd9f;border-bottom:1px solid #99826269;padding-bottom:7px;margin-top:12px}
.source-link span{margin-left:8px;font-family:Arial,sans-serif}
.back-to-mask{display:block;font-size:16px;margin:65px 0 0;color:var(--ivory)}
.back-to-mask span{margin-left:12px;font-family:Arial,sans-serif}
.site-footer{min-height:180px;position:relative;display:grid;grid-template-columns:1fr 2fr 1fr;align-items:end;gap:40px;padding:50px 4.5vw 40px;background:linear-gradient(transparent,#030303 42%);color:#928b7e;font-size:12px;line-height:1.7;font-family:Arial,sans-serif}
.site-footer>span{font-family:Georgia,serif;letter-spacing:.16em;font-size:14px;color:#c8bda9}
.site-footer p{margin:0;text-align:center}
.site-footer>a{text-align:right;text-decoration:underline;text-underline-offset:4px}
.noscript-note{position:fixed;bottom:0;left:0;right:0;text-align:center;background:#181818;padding:15px;z-index:70;margin:0;font-size:16px}
@media(min-width:1600px){.hero-copy{bottom:90px}.robe-image{height:200svh}.chapter-copy{max-width:510px}}
@media(max-height:820px) and (min-width:761px){.hero{min-height:780px}.portrait{width:680px;height:680px;top:-50px}.hero-copy{bottom:60px}.hero-copy h1{font-size:65px}.hero-description{font-size:18px}.interaction{margin-top:20px}.gesture-instruction{margin-bottom:12px}}
@media(max-width:760px){
  html{scroll-padding-top:65px}
  .site-header{padding:23px 6vw;gap:15px}
  .wordmark{font-size:16px;letter-spacing:.13em}
  .site-header nav{gap:22px;font-size:14px}
  .hero{height:100svh;min-height:830px;max-height:none}
  .portrait{width:650px;max-width:none;height:650px;top:12px;-webkit-mask-image:linear-gradient(#000 0%,#000 56%,transparent 79%);mask-image:linear-gradient(#000 0%,#000 56%,transparent 79%)}
  .mask-target{left:36%;top:29%;width:28%;height:29%}
  .hero-copy{bottom:65px;width:94%}
  .hero-copy h1{font-size:66px;margin-bottom:10px}
  .hero-description{font-size:17px}
  .interaction{margin-top:24px}
  .gesture-instruction{font-size:14px;margin-bottom:16px}
  .camera-button{font-size:15px;padding:12px 25px;min-width:178px}
  .mode-controls{gap:13px}
  .camera-note{font-size:12px;margin-top:14px}
  .interaction-status{font-size:12px;max-width:290px;margin-top:7px}
  .change-button{font-size:13px}
  .guide-hand{width:330px}
  .scroll-link{bottom:22px}
  .robe-image{height:120svh;width:100%;object-fit:fill;object-position:50% 45%}
  .robe-shade{background:linear-gradient(to bottom,#030303 0%,transparent 18%,transparent 85%,#030303b3 100%),linear-gradient(to right,transparent,#03030333 10%,#030303dd 25%,#030303e8 50%,#030303dd 75%,#03030333 90%,transparent)}
  .chapter{padding:100px 13vw;min-height:100svh}
  .chapter h2{font-size:36px;margin-bottom:28px}
  .chapter p{font-size:16px;line-height:1.8}
  .pocket-sequence{height:180svh;min-height:1300px}
  .pocket-stage{min-height:650px}
  .pocket-copy{top:10%;width:76vw}
  .pocket-copy h2{font-size:34px}
  .pocket-copy p{font-size:16px}
  .pocket-action{width:100%;height:100%}
  .interpretation-note{bottom:70px;font-size:12px;width:70%}
  .source-link{font-size:14px}
  .site-footer{display:flex;flex-direction:column;align-items:center;gap:22px;padding:40px 9vw;font-size:12px}
  .site-footer>a{text-align:center}
  #stop-camera{bottom:15px;right:15px;padding:10px 18px;font-size:14px}
}
@media(max-width:400px){.site-header nav{gap:15px;font-size:13px}.wordmark{font-size:15px}.portrait{width:640px;height:640px;top:5px}.hero{min-height:810px}.chapter{padding-left:12vw;padding-right:12vw}.chapter h2{font-size:32px}.hero-copy{bottom:63px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.mask-frame,.robe-image,.pocket-object,.pocket-hand,.guide-hand{will-change:auto}.portrait.is-changing .mask-frame{animation:none}.guide-hand{display:none}.pocket-sequence{height:110svh;min-height:800px}.pocket-stage{position:relative}.robe-image{transform:translate(-50%,-50%)}.pocket-hand{display:none}.pocket-object{opacity:1!important;transform:translate(50%,-15%) rotate(5deg)!important}.replay-button{display:none}}