:root{
  --ink:#0a0807;
  --ink-2:#120e0c;
  --paper:#efe4cf;
  --paper-dim:rgba(239,228,207,.62);
  --paper-faint:rgba(239,228,207,.32);
  --gold:#c9a46a;
  --gold-line:rgba(201,164,106,.42);
  --wine:#5a1414;
  --go:#7fc59a;
  --serif:"Fraunces",Georgia,serif;
  --zh-serif:"Noto Serif TC","Songti TC",serif;
  --sans:"Noto Sans TC",-apple-system,"PingFang TC",sans-serif;
  --gutter:clamp(20px,5.2vw,96px);
  color-scheme:dark;
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--ink);scroll-behavior:auto;overflow-x:clip}
body{background:var(--ink);color:var(--paper);font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:1px solid var(--gold);outline-offset:4px}

/* film grain over everything */
body::after{content:"";position:fixed;inset:-50%;pointer-events:none;z-index:50;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}100%{transform:translate(0,0)}}

.eyebrow{font:400 11px/1 var(--sans);letter-spacing:.42em;text-transform:uppercase;color:var(--gold);margin-bottom:28px}
h1,h2,h3{font-family:var(--serif);font-weight:300;font-variation-settings:"opsz" 144;letter-spacing:-.01em;line-height:1.02}
h2{font-size:clamp(40px,6.2vw,104px)}
h2 em,h1 em{font-style:italic;color:var(--paper)}
em{font-style:italic}
.zh{font-family:var(--zh-serif);font-weight:300;color:var(--paper-dim);letter-spacing:.18em;line-height:2;font-size:clamp(13px,1.05vw,16px)}

/* HUD */
.hud{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;justify-content:space-between;align-items:center;padding:26px var(--gutter);pointer-events:none;mix-blend-mode:difference}
.hud>*{pointer-events:auto}
.mark{font:400 italic 18px/1 var(--serif);text-decoration:none;color:var(--paper)}
.mark span{font:300 11px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;font-style:normal;opacity:.55;margin-left:6px}
.sound{font:400 11px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--paper);padding:10px 0}
.sound b{font-weight:400;color:var(--gold)}

.acts{position:fixed;right:var(--gutter);top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:14px;text-align:right}
.acts a{font:300 italic 14px/1 var(--serif);color:var(--paper-faint);text-decoration:none;transition:color .4s}
.acts a span{display:inline-block;font:300 10px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;font-style:normal;margin-left:10px;opacity:0;transform:translateX(6px);transition:.4s}
.acts a:hover span,.acts a.on span{opacity:1;transform:none}
.acts a.on{color:var(--paper)}
.acts a.on::before{content:"— ";color:var(--gold)}

.scene{position:relative}
.pin-scene{}
.pin{position:relative;height:100vh;height:100svh;overflow:hidden}
.bg{position:absolute;inset:0;background-size:cover;background-position:center;will-change:transform}
.bg-hall{background-image:url(img/bg-hall.jpg)}
.bg-corridor{background-image:url(img/bg-corridor.jpg);background-position:30% center}
.bg-backstage{background-image:url(img/bg-backstage.jpg);background-position:75% center}
.bg-curtain{background-image:url(img/bg-curtain.jpg)}
.vignette{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 45%,transparent 30%,rgba(5,4,4,.88) 100%)}
.vignette.soft{background:linear-gradient(180deg,rgba(5,4,4,.55),transparent 30%,transparent 70%,rgba(5,4,4,.8))}
.vignette.left{background:linear-gradient(90deg,rgba(5,4,4,.96) 0%,rgba(5,4,4,.82) 38%,rgba(5,4,4,.1) 70%,transparent)}

/* 0 · Ticket */
.ticket-scene{min-height:100vh;min-height:100svh;display:grid;place-items:center;align-content:center;gap:56px;padding:120px var(--gutter);
  background:radial-gradient(60% 50% at 50% 42%,#1a1310 0%,var(--ink) 70%)}
.ticket{display:flex;width:min(560px,100%);border:1px solid var(--gold-line);position:relative}
.ticket-main{flex:1;min-width:0;padding:40px 44px 36px}
.ticket h1{font-size:clamp(44px,6vw,68px);font-style:italic;margin-bottom:18px}
.ticket .role{font:400 11px/1 var(--sans);letter-spacing:.36em;text-transform:uppercase;color:var(--paper-dim);margin-bottom:14px}
.ticket .zh{font-size:13px}
.ticket-stub{width:112px;border-left:1px dashed var(--gold-line);display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:32px 0;transform-origin:0 100%}
.stub-no{writing-mode:vertical-rl;font:300 italic 30px/1 var(--serif);color:var(--gold)}
.stub-seat{writing-mode:vertical-rl;font:400 10px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--paper-faint)}
.enter{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:center}
.btn-line{font:400 11px/1 var(--sans);letter-spacing:.36em;text-transform:uppercase;padding:18px 28px;border:1px solid var(--gold-line);transition:background .4s,color .4s}
.btn-line:hover{background:var(--gold);color:var(--ink)}
.enter-or{font:300 italic 15px/1 var(--serif);color:var(--paper-faint)}
.btn-quiet{font:400 11px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--paper-dim);text-decoration:none;padding:12px 0;border-bottom:1px solid transparent;transition:border-color .4s}
.btn-quiet:hover{border-color:var(--gold-line)}

/* I · Lobby */
.lobby-copy{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(64px,11vh,140px);max-width:1100px}
.marquee{list-style:none;display:flex;flex-wrap:wrap;gap:12px 44px;margin-bottom:clamp(28px,5vh,56px)}
.marquee li{font:300 11px/1 var(--sans);letter-spacing:.34em;text-transform:uppercase;color:var(--paper-dim)}
.marquee b{display:block;font:300 italic clamp(40px,5vw,76px)/1 var(--serif);letter-spacing:0;color:var(--paper);margin-bottom:10px;font-variation-settings:"opsz" 144}
.lobby-line{margin-bottom:22px}
.lobby-zh{max-width:640px}

/* II · Corridor */
.corridor-head{position:absolute;left:var(--gutter);top:clamp(96px,15vh,170px);z-index:2;max-width:520px}
.corridor-head h2{font-size:clamp(34px,4.4vw,72px);margin-bottom:18px}
.track{position:absolute;left:0;top:0;bottom:0;display:flex;align-items:center;gap:clamp(56px,7vw,130px);padding-left:max(48vw,560px);padding-right:30vw;z-index:1;will-change:transform}
.frame{position:relative;flex:none;height:min(46vh,520px);margin-top:-8vh}
.frame img{height:100%;width:auto;box-shadow:0 40px 90px rgba(0,0,0,.75),0 0 0 1px rgba(201,164,106,.18);filter:brightness(.55) saturate(.85);transition:filter .9s ease}
.frame .glow{position:absolute;left:-30%;right:-30%;top:-34%;bottom:-6%;background:radial-gradient(48% 55% at 50% 40%,rgba(255,208,146,.26),transparent 70%);opacity:0;transition:opacity .9s;pointer-events:none}
.frame.lit img,.frame:hover img{filter:none}
.frame.lit .glow,.frame:hover .glow{opacity:1}
.frame figcaption{position:absolute;left:0;top:calc(100% + 26px);width:max(100%,300px);max-width:340px;opacity:.35;transition:opacity .9s}
.frame.lit figcaption,.frame:hover figcaption{opacity:1}
.frame .no{display:block;font:300 italic 13px/1 var(--serif);color:var(--gold);margin-bottom:10px}
.frame b{display:block;font:400 italic 19px/1.25 var(--serif);margin-bottom:10px}
.frame .d{display:block;font:300 12.5px/1.65 var(--sans);color:var(--paper-dim);margin-bottom:4px}
.frame .d i{font-style:normal;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-right:8px}
.track-end{flex:none;font:300 italic 28px/1 var(--serif);color:var(--paper-dim)}
.track-end span{color:var(--gold)}

/* III · Backstage */
.cue-sheet{position:absolute;left:var(--gutter);top:50%;transform:translateY(-50%);width:min(620px,calc(100% - 2*var(--gutter)));z-index:2}
.cue-sheet h2{font-size:clamp(34px,4.2vw,68px);margin-bottom:16px}
.cue-sheet .zh{margin-bottom:clamp(22px,4vh,44px)}
.cues{list-style:none;border-top:1px solid var(--gold-line)}
.cues li{display:grid;grid-template-columns:16px 64px 1fr;column-gap:16px;align-items:baseline;padding:13px 0;border-bottom:1px solid rgba(201,164,106,.16);opacity:.28;transition:opacity .6s}
.cues li.on{opacity:1}
.cues .light{width:7px;height:7px;border-radius:50%;background:#b8392b;box-shadow:0 0 0 0 transparent;align-self:center;transition:background .4s,box-shadow .4s}
.cues li.go .light{background:var(--go);box-shadow:0 0 12px var(--go)}
.cues .cn{font:400 10px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.cues b{font:400 italic 18px/1.2 var(--serif)}
.cues .cd{grid-column:3;font:300 13px/1.6 var(--sans);color:var(--paper-dim);margin-top:4px}

/* IV · Stage */
.stage-pin{background:#050404;display:flex;flex-direction:column}
.stage-wrap{flex:1;display:grid;place-items:center;min-height:0;overflow:hidden}
.stage{position:relative;aspect-ratio:2000/1125;width:min(100vw,calc((100svh - 150px)*1.7778));background:url(img/bg-hall.jpg) center/100% 100% no-repeat}
.stage .screen{position:absolute;left:18.5%;top:11.9%;width:63%;height:54.6%;background:#000;overflow:hidden}
.stage video{width:100%;height:100%;object-fit:contain}
.curtain{position:absolute;top:11.9%;height:54.6%;width:31.5%;background:url(img/bg-curtain.jpg) center/cover;box-shadow:0 0 40px rgba(0,0,0,.8) inset}
.curtain.left{left:18.5%;transform-origin:left}
.curtain.right{left:50%;background-position:70% center;transform-origin:right}
.stage-ui{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 40px;flex-wrap:wrap;padding:0 var(--gutter) clamp(22px,4vh,40px)}
.stage-title{max-width:520px}
.stage-title .eyebrow{margin-bottom:14px}
.stage-title h3{font-size:clamp(22px,2.2vw,32px);font-style:italic;margin-bottom:8px}
.now-note{font:300 13px/1.6 var(--sans);color:var(--paper-dim)}
.programme-btns{display:flex;gap:6px;flex-wrap:wrap}
.programme-btns button{font:300 italic 15px/1 var(--serif);color:var(--paper-faint);padding:12px 14px;border-bottom:1px solid transparent;transition:.4s}
.programme-btns button span{font:400 10px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;font-style:normal;margin-left:8px}
.programme-btns button[aria-selected="true"]{color:var(--paper);border-color:var(--gold)}
.programme-btns button:hover{color:var(--paper)}

/* V · Programme */
.programme{padding:clamp(120px,18vh,200px) var(--gutter);background:linear-gradient(180deg,#050404,var(--ink-2) 40%,var(--ink))}
.programme-inner{max-width:1080px;margin:0 auto}
.programme h2{margin-bottom:18px}
.programme .zh{margin-bottom:56px}
.prog-list{list-style:none;border-top:1px solid var(--gold-line)}
.prog-list li{display:grid;grid-template-columns:56px 1fr 260px 90px;gap:20px;align-items:baseline;padding:20px 0;border-bottom:1px solid rgba(201,164,106,.16)}
.pn{font:300 italic 15px/1 var(--serif);color:var(--gold)}
.pt{font:300 clamp(17px,1.5vw,21px)/1.35 var(--serif)}
.pk{font:400 10.5px/1.6 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--paper-dim)}
.pm{font:300 italic 14px/1 var(--serif);color:var(--paper-faint);text-align:right}
.prog-note{margin-top:40px;font:300 13px/1.8 var(--sans);color:var(--paper-dim)}
.prog-note .zh{font-size:13px;letter-spacing:.12em}

/* VI · Curtain call */
.call{min-height:100vh;min-height:100svh;display:grid;place-items:center;text-align:center;overflow:hidden;padding:140px var(--gutter)}
.call .bg{opacity:.75}
.call .vignette{background:radial-gradient(70% 70% at 50% 50%,rgba(10,8,7,.72),rgba(5,4,4,.96))}
.call-inner{position:relative;z-index:2;max-width:760px}
.call h2{margin-bottom:28px}
.call-line{font:300 italic clamp(18px,1.6vw,23px)/1.6 var(--serif);color:var(--paper);margin-bottom:12px}
.contact{list-style:none;display:flex;justify-content:center;gap:clamp(24px,4vw,56px);margin:48px 0 64px;flex-wrap:wrap}
.contact a{font:400 11px/1 var(--sans);letter-spacing:.36em;text-transform:uppercase;text-decoration:none;padding:14px 4px;border-bottom:1px solid var(--gold-line);transition:color .3s,border-color .3s}
.contact a:hover{color:var(--gold);border-color:var(--gold)}
.credits{font:300 11px/1.8 var(--sans);letter-spacing:.14em;color:var(--paper-faint)}

/* small screens */
@media (max-width:820px){
  .acts{display:none}
  .hud{padding:18px var(--gutter)}
  .mark span{display:none}
  .ticket-main{padding:30px 26px 28px}
  .ticket-stub{width:76px}
  .stub-no{font-size:22px}
  .corridor-head{top:84px;right:var(--gutter)}
  .track{padding-left:var(--gutter);padding-right:20vw;gap:44px;align-items:flex-end;padding-bottom:30svh}
  .frame{height:min(38svh,400px);margin-top:0}
  .frame figcaption{max-width:260px;width:260px}
  .frame b{font-size:17px}
  .frame .d{font-size:12px}
  .cue-sheet{top:auto;bottom:5svh;transform:none}
  .cue-sheet h2{font-size:32px}
  .cues li:not(.go) .cd{display:none}
  .vignette.left{background:linear-gradient(0deg,rgba(5,4,4,.97) 0%,rgba(5,4,4,.88) 62%,rgba(5,4,4,.2) 100%)}
  .cues li{padding:9px 0;grid-template-columns:12px 52px 1fr;column-gap:10px}
  .cues .cd{font-size:12px}
  .stage{width:100vw}
  .stage-ui{flex-direction:column;align-items:flex-start}
  .prog-list li{grid-template-columns:40px 1fr;row-gap:6px}
  .pk{grid-column:2}.pm{grid-column:2;text-align:left}
}
@media (prefers-reduced-motion:reduce){
  body::after{animation:none}
  .frame img{filter:none}.frame figcaption{opacity:1}
  .cues li{opacity:1}
}