:root{color-scheme:dark;--gold:#e9c677;--cream:#f7eddb;--muted:#b6a99c;--red:#841529}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:#160e10;color:var(--cream);font:16px/1.6 system-ui,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button,.secondary{font:inherit;cursor:pointer;border:1px solid var(--gold);border-radius:3px;padding:12px 24px;background:var(--gold);color:#261415;font-weight:650;text-decoration:none}button:hover,.secondary:hover{filter:brightness(1.12)}a{color:var(--gold);text-underline-offset:5px}button:focus-visible,a:focus-visible{outline:3px solid white;outline-offset:5px}button:disabled{opacity:.45;cursor:default}.skip{position:absolute;left:12px;top:-80px;z-index:20;background:#160e10;padding:12px}.skip:focus{top:12px}header{max-width:1200px;margin:auto;padding:26px 32px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff14;font-size:12px;letter-spacing:.12em}.brand{font-family:Georgia,serif;font-size:27px;text-decoration:none}.brand span{font:10px system-ui;letter-spacing:.15em;margin-left:10px}header>a:last-child{text-decoration:none;letter-spacing:0}.theater{max-width:1080px;margin:auto;padding:36px 28px 0;text-align:center}.eyebrow,.section-label{font-size:10px;letter-spacing:.22em;font-weight:650}.theater>.eyebrow{color:var(--muted);margin:0 0 28px}.marquee{position:relative;padding:16px;border:3px solid #ac8040;border-radius:70px 70px 8px 8px;background:radial-gradient(circle,#fff2b3 2px,#dba751 3px,transparent 5px) 0 0/24px 24px,#5b3b20;box-shadow:0 0 35px #e5ac4230;z-index:3}.marquee-inner{background:linear-gradient(#351a1c,#230f14);border:1px solid #b38c4a;border-radius:50px 50px 2px 2px;padding:22px 12px 18px}.marquee p{margin:0;color:var(--gold);font-size:clamp(10px,1.8vw,16px);letter-spacing:.22em}h1{font:clamp(42px,7vw,76px)/1.1 Georgia,serif;margin:8px 0;color:#f6dfaa;text-shadow:0 2px #754b29}.marquee span{font-size:9px;letter-spacing:.24em;color:#c5ad81}.proscenium{padding:0 27px 17px;background:linear-gradient(90deg,#392217,#a57b3d 2%,#50341e 4%,#221318 6%,#221318 94%,#50341e 96%,#a57b3d 98%,#392217);border-bottom:6px ridge #8b6536}.stage{position:relative;overflow:hidden;background:#080707;min-height:420px;height:620px;box-shadow:inset 0 0 40px #000}.stage>img{display:block;width:100%;height:100%;object-fit:contain;background:#080707}.curtain{position:absolute;top:0;bottom:0;width:50.3%;background:repeating-linear-gradient(90deg,#370511 0%,#6e0c23 9%,#a72239 16%,#6c0e24 24%,#310711 31%);box-shadow:inset 0 0 40px #160208,8px 0 20px #0009;transition:transform 2.3s cubic-bezier(.65,0,.2,1);z-index:2;border-bottom:5px solid #a47537}.left{left:0}.right{right:0;transform:scaleX(-1)}.stage.open .left{transform:translateX(-100%)}.stage.open .right{transform:translateX(100%) scaleX(-1)}.valance{position:absolute;top:-35px;left:-5%;width:110%;height:90px;background:repeating-linear-gradient(90deg,#450a18,#951a30 6%,#490815 12%);border-bottom:5px solid #b48b48;border-radius:0 0 50% 50%;z-index:3;box-shadow:0 10px 20px #0008}.entry{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity .35s;background:radial-gradient(ellipse,#24000a22,transparent)}.entry[hidden]{display:none}.entry p{font:italic 26px Georgia,serif}.entry small{margin-top:18px;font-size:10px;letter-spacing:.2em;color:#eed9bc}.ornament{font-size:30px;color:var(--gold)}.stage-controls{display:flex;align-items:center;justify-content:space-between;padding:16px 0;color:var(--muted);font-size:11px}.text-button{background:none;color:var(--gold);border:0;padding:8px;font-size:12px}.program,.ticket-section{max-width:1024px;margin:60px auto;padding:0 28px}.section-label{color:var(--gold);padding-bottom:18px;border-bottom:1px solid #b8975c55}.program-body{display:grid;grid-template-columns:1fr 1fr;gap:80px;padding:38px 0 10px}h2{font:46px/1.12 Georgia,serif;margin:15px 0 20px}.program-body p:not(.eyebrow){color:var(--muted);max-width:380px;font-size:14px}.text-link{font-size:12px}dl{margin:0}dl>div{border-bottom:1px solid #ffffff16;padding:12px 0}dt{color:var(--gold);font-size:9px;letter-spacing:.15em}dd{margin:5px 0 0;font:20px Georgia,serif}dd small{display:block;color:var(--muted);font:12px/2 system-ui}.ticket{margin:32px 0 22px;display:grid;grid-template-columns:1fr 280px;background:#efe2c7;color:#331f1b;border:1px solid #d4ad61;border-radius:10px}.ticket-info{padding:36px 42px}.ticket h2{font-size:42px}.ticket p{font-size:13px}.ticket .eyebrow{font-size:10px}.ticket .admission{font-size:12px;letter-spacing:.2em;font-weight:750}.ticket-rule{height:1px;background:#b49b7155;margin:20px 0}.ticket .fine{font-size:11px;color:#655242}.ticket a{color:#71392a}.ticket-qr{padding:32px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-left:2px dashed #ae956f;text-align:center}.ticket-qr p{font-weight:750;letter-spacing:.15em;font-size:12px;line-height:1.8}.ticket-qr p span,.serial{font-size:8px;letter-spacing:.12em}#qr{background:white;padding:12px;max-width:180px}#qr svg{display:block;width:100%;height:auto}.share-actions{display:flex;gap:12px;flex-wrap:wrap}.secondary{background:transparent;color:var(--gold)}.fine,.hosting-note{font-size:12px;color:var(--muted)}.hosting-note{max-width:670px}footer{max-width:1024px;margin:60px auto 0;padding:24px 28px 40px;border-top:1px solid #ffffff14;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.09em;color:var(--muted)}dialog{border:1px solid var(--gold);background:#271318;color:var(--cream);max-width:560px;width:calc(100% - 32px);padding:40px 24px;text-align:center;border-radius:8px}dialog::backdrop{background:#080408e8}.seal{color:var(--gold);font-size:55px}.welcome-content h2{font-size:39px}body:has(dialog[open]){overflow:hidden}@media(max-width:640px){header{padding:18px}.brand span{display:block;margin:0;font-size:8px}.theater{padding:26px 12px 0}.theater>.eyebrow{font-size:8px}.marquee{padding:11px;border-radius:35px 35px 4px 4px}.marquee-inner{border-radius:24px 24px 0 0;padding:18px 8px}.marquee p{letter-spacing:.12em}.marquee span{font-size:7px}.proscenium{padding:0 12px 12px}.stage{height:510px;min-height:0}.valance{height:70px}.entry p{font-size:22px}.program,.ticket-section{margin:38px auto;padding:0 20px}.program-body{grid-template-columns:1fr;gap:24px;padding-top:24px}h2{font-size:39px}.ticket{grid-template-columns:1fr}.ticket-info{padding:26px}.ticket-qr{border-left:0;border-top:2px dashed #ae956f;padding:24px}.share-actions>*{flex:1 1 43%;text-align:center;font-size:13px;padding:12px}footer{gap:20px;align-items:start}footer span{max-width:48%}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}@media print{body{background:white}header,.theater,.program,.section-label,.share-actions,footer,.hosting-note,#share-status,dialog{display:none!important}.ticket-section{margin:0;padding:0}.ticket{break-inside:avoid}.ticket a{display:none}}

/* Event program is revealed on the original artwork with the curtains. */
.stage-program{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:72px 22px 20px;pointer-events:none}
.stage-title{width:min(100%,560px);padding:12px 18px 16px;background:linear-gradient(90deg,#160c10c9,#160c10ec,#160c10c9);border-top:1px solid #e9c67788;border-bottom:1px solid #e9c67788;text-shadow:0 2px 6px #000}
.stage-title .eyebrow{margin:0;color:var(--gold);font-size:9px}
.stage-title h2{font:clamp(23px,3.5vw,35px)/1.15 Georgia,serif;margin:8px 0 0;color:#fff1d1}
.stage-details{width:min(100%,560px);padding:16px 20px 12px;background:#1c1014ed;border:1px solid #d6ad635c;box-shadow:0 8px 28px #0006}
.stage-details dl{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stage-details dl>div{padding:0;border:0}
.stage-details dt{font-size:9px}
.stage-details dd{font-size:19px;color:#fff1d1}
.stage-details .stage-location{grid-column:1/-1;border-top:1px solid #e9c67740;padding-top:10px}
.stage-details dd small{color:#e1cfb8;font-size:11px;line-height:1.6}
.stage-details>p{font-size:8px;letter-spacing:.18em;color:var(--gold);margin:12px 0 0}
@media(max-width:640px){.stage-program{padding:48px 12px 12px}.stage-title{padding:10px}.stage-title h2{font-size:24px}.stage-details{padding:12px}.stage-details dd{font-size:17px}.stage-details dl{gap:9px}}
.stage-title{margin-top:auto;margin-bottom:12px}
@media(max-width:640px){.stage-title{margin-bottom:8px}}

/* All invitation details and the universal ticket live on the stage. */
.header-note{font-size:9px;letter-spacing:.12em;color:var(--gold)}
.stage-program{pointer-events:auto;padding:68px 22px 20px}
.stage-title{background:linear-gradient(90deg,transparent,#160c104d,transparent);border:0;text-shadow:0 2px 5px #000,0 0 18px #000;margin-bottom:16px}
.stage-title h2{color:#fff5dc}
.stage-title .eyebrow{color:#fff0c7;text-shadow:0 1px 4px #000}
.stage-bottom{width:min(100%,640px);display:grid;grid-template-columns:1fr 136px;gap:18px;align-items:end;padding:16px;background:linear-gradient(0deg,#130b105c,#130b1026);border-radius:4px;text-shadow:0 1px 4px #000,0 0 12px #000}
.stage-details{width:auto;padding:0;background:transparent;border:0;box-shadow:none}
.stage-details dt,.stage-details>p{color:#ffedbd}
.stage-details dd{color:#fff9e9}
.stage-details dd small{color:#fff0dc}
.stage-ticket{display:flex;flex-direction:column;align-items:center;gap:6px}
.stage-ticket #qr{padding:7px;width:120px;max-width:100%;box-shadow:0 2px 14px #0003;text-shadow:none}
.stage-ticket>a{font-size:9px;line-height:1.5;color:#fff4d8;text-decoration:none}
.stage-ticket>span{font-size:8px;color:#fff4d8}
.hosting-note{margin:0 auto 20px;max-width:640px;font-size:10px}
@media(max-width:640px){.header-note{font-size:7px;max-width:135px;text-align:right}.stage{height:590px}.stage-program{padding:48px 9px 12px}.stage-title{margin-bottom:12px;padding:10px 4px}.stage-title h2{font-size:23px}.stage-bottom{grid-template-columns:minmax(0,1fr) 104px;gap:10px;padding:10px 7px}.stage-details{padding:0}.stage-details dl{gap:12px 6px}.stage-details dd{font-size:15px}.stage-details dt{font-size:8px}.stage-details dd small{font-size:10px}.stage-details>p{font-size:7px;letter-spacing:.1em}.stage-ticket #qr{width:104px;padding:6px}.stage-ticket>a{font-size:8px}.stage-ticket>span{font-size:7px}.stage-location dd{font-size:16px}}
@media(max-width:360px){.stage-bottom{grid-template-columns:minmax(0,1fr) 90px;gap:8px}.stage-ticket #qr{width:90px}.stage-details dd{font-size:14px}}
.stage-title{width:min(100%,420px)}
.stage-title h2{font-size:clamp(23px,3vw,30px)}
.stage-bottom{width:min(100%,420px);grid-template-columns:minmax(0,1fr) 104px;gap:12px;padding:12px 8px}
.stage-details dd{font-size:17px}
.stage-ticket #qr{width:104px}
@media(max-width:640px){.stage-title h2{font-size:23px}.stage-details dd{font-size:15px}.stage-bottom{gap:10px;padding:10px 7px}.stage-details .stage-location dd{font-size:16px}}
@media(max-width:360px){.stage-bottom{grid-template-columns:minmax(0,1fr) 90px;gap:8px}.stage-ticket #qr{width:90px}.stage-details dd{font-size:14px}}

/* Raise the event copy and reserve the lower stage for future wording. */
.stage-program{justify-content:flex-start;padding:140px 24px 24px}
.stage-title{margin:0 0 12px;width:min(100%,460px);padding:8px 12px}
.stage-bottom{display:block;width:min(100%,460px);padding:12px 16px}
.stage-details dl{gap:12px 20px}
.stage-details>p{margin-top:10px}
.stage-ticket{position:absolute;right:20px;bottom:20px;display:block;line-height:0}
.stage-ticket>a{display:block}
.stage-ticket #qr{width:104px;padding:7px}
@media(max-width:640px){
 .stage-program{padding:118px 16px 16px}
 .stage-title{margin:0 0 10px;padding:8px 4px}
 .stage-bottom{padding:10px 12px}
 .stage-ticket{right:14px;bottom:14px}
 .stage-ticket #qr{width:96px;padding:6px}
}
@media(max-width:360px){
 .stage-program{padding:100px 12px 12px}
 .stage-ticket #qr{width:86px}
}

/* Warm theater lights frame the untouched original artwork. */
.stage{background:
 radial-gradient(ellipse at 50% 78%,#c58c3240,transparent 65%),
 linear-gradient(180deg,#281a17,#30201a 65%,#1e1315)}
.stage>img{background:transparent;position:relative;z-index:1}
.stage::before,.stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0;transition:opacity 1.8s ease .5s}
.stage::before{background:
 radial-gradient(ellipse at 2% 0%,#fff1bf, #eac47780 2%,transparent 9%),
 conic-gradient(from 145deg at 2% 0%,transparent 0deg,#ffda8938 7deg,#ffe3a273 16deg,#e6b55d18 29deg,transparent 36deg),
 radial-gradient(ellipse at 32% 65%,#e8b76632,transparent 42%)}
.stage::after{background:
 radial-gradient(ellipse at 98% 0%,#fff1bf,#eac47780 2%,transparent 9%),
 conic-gradient(from 179deg at 98% 0%,transparent 0deg,#e6b55d18 7deg,#ffe3a273 20deg,#ffda8938 29deg,transparent 36deg),
 radial-gradient(ellipse at 68% 65%,#e8b76632,transparent 42%)}
.stage.open::before,.stage.open::after{opacity:1}

.stage-details>.admission-love{margin:14px 0 0;font:16px/1.4 Georgia,serif;letter-spacing:.04em;color:var(--gold)}
.admission-love span{font-style:italic;color:#fff1d1}

/* A compact menu leaves the universal QR on its own. */
.spirit-menu{position:absolute;left:24px;bottom:22px;width:calc(100% - 172px);max-width:620px;padding:12px 16px;background:#211319db;border:1px solid #e9c67755;border-radius:4px;text-shadow:0 1px 4px #000}
.spirit-menu h3{margin:0 0 9px;color:var(--gold);font:20px/1.2 Georgia,serif}
.spirit-menu ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px 12px;text-align:left;font-size:13px;line-height:1.4;color:#fff1d1}
.spirit-menu>p{margin:8px 0 0;font-size:9px;letter-spacing:.1em;color:var(--gold)}
@media(max-width:640px){.spirit-menu{left:14px;bottom:126px;width:calc(100% - 28px);padding:10px 12px}.spirit-menu h3{font-size:18px}.spirit-menu ul{font-size:11px;gap:7px 6px}.stage{height:680px}.stage-program{padding-top:98px}}
@media(max-width:360px){.spirit-menu ul{font-size:10px}.spirit-menu h3{font-size:16px}}

/* Center the vertical concession menu beneath the event location. */
.stage{height:920px}
.stage-program{padding:100px 24px 24px}
.spirit-menu{position:static;flex-shrink:0;width:min(100%,460px);max-width:460px;margin:16px auto 0;padding:12px 16px;background:linear-gradient(0deg,#130b105c,#130b1026);border:0;border-radius:4px;text-shadow:0 1px 4px #000,0 0 12px #000}
.spirit-menu h3{font-size:21px;margin:0 0 10px}
.spirit-menu table{width:100%;border-collapse:collapse;text-align:left;color:#fff1d1;font-size:14px;line-height:1.5}
.spirit-menu thead th{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);padding:0 0 7px;border-bottom:1px solid #e9c67740}
.spirit-menu tbody th,.spirit-menu td{font-weight:400;padding:5px 0}
.spirit-menu th:first-child{width:55%;padding-right:10px}
.spirit-menu>p{margin-top:10px}
@media(max-width:640px){.stage{height:950px}.stage-program{padding:80px 16px 16px}.spirit-menu{width:min(100%,460px);padding:10px 12px;margin-top:14px}.spirit-menu h3{font-size:19px}.spirit-menu table{font-size:13px}.spirit-menu tbody th,.spirit-menu td{padding:5px 0}.spirit-menu th:first-child{padding-right:8px}}
@media(max-width:360px){.stage-program{padding:72px 12px 12px}.spirit-menu table{font-size:12px}}

/* Balance the wording vertically with a smaller corner ticket. */
.stage-program{padding-top:160px}
.stage-ticket #qr{width:80px;padding:6px}
.stage-ticket{right:18px;bottom:18px}
@media(max-width:640px){.stage-program{padding-top:140px}.stage-ticket #qr{width:76px}.stage-ticket{right:14px;bottom:14px}}
@media(max-width:360px){.stage-program{padding-top:124px}.stage-ticket #qr{width:72px}}

/* Dotted menu leaders connect each concession to its right-aligned cost. */
.spirit-menu table,.spirit-menu tbody{display:block}
.spirit-menu thead{display:block}
.spirit-menu tr{display:flex;align-items:baseline;gap:10px}
.spirit-menu thead tr{justify-content:space-between;border-bottom:1px solid #e9c67740;margin-bottom:5px}
.spirit-menu thead th{border:0}
.spirit-menu th:first-child{width:auto;padding-right:0}
.spirit-menu tbody tr::before{content:"";order:1;flex:1;min-width:12px;border-bottom:1px dotted #e9c677a6;transform:translateY(-3px)}
.spirit-menu tbody th{order:0;flex:0 0 auto;text-align:left}
.spirit-menu td{order:2;flex:0 0 auto;text-align:right}
.spirit-menu thead th:last-child{text-align:right}
@media(max-width:360px){.spirit-menu tr{gap:6px}}

/* Keep the artwork at its earlier scale as the menu extends the stage. */
.stage>img{object-fit:contain;object-position:center;width:min(100%,460px);height:100%;margin-inline:auto}
@media(max-width:640px){.stage>img{width:78%}}

/* A shallow wooden stage grounds the artwork beneath the spotlights. */
.stage{height:860px}
.stage-program{padding-top:130px}
.stage{background:
 radial-gradient(ellipse at 50% 92%,#e4b56850,transparent 35%),
 repeating-linear-gradient(90deg,transparent 0,transparent 109px,#160b0990 110px,#b17c4930 112px,transparent 114px) bottom/100% 100px no-repeat,
 repeating-linear-gradient(0deg,#3d271e 0px,#503426 2px,#342119 4px,#432b20 14px) bottom/100% 100px no-repeat,
 radial-gradient(ellipse at 50% 78%,#c58c3240,transparent 65%),
 linear-gradient(180deg,#281a17,#30201a 65%,#1e1315)}
@media(max-width:640px){.stage{height:900px}.stage-program{padding-top:115px}}
@media(max-width:360px){.stage-program{padding-top:100px}}

/* Perspective floorboards and a raised apron create a dimensional stage. */
.stage{isolation:isolate;background:radial-gradient(ellipse at 50% 65%,#805b3545,transparent 65%),linear-gradient(#211517,#39261e 82%,#180e0e)}
.stage-floor{position:absolute;left:0;right:0;bottom:0;height:112px;perspective:220px;overflow:hidden;z-index:0;background:linear-gradient(#29170e,#80502c);border-top:2px solid #ad7b484d;box-shadow:0 -14px 30px #0005}
.floorboards{position:absolute;inset:-35px -45% -15px;transform-origin:center bottom;transform:rotateX(52deg);background:radial-gradient(ellipse at 50% 28%,#f9d99480,transparent 58%),repeating-linear-gradient(90deg,transparent 0 73px,#1e0d09a6 74px,#c28a484d 76px,transparent 78px),repeating-linear-gradient(0deg,#6a4025 0px,#825131 2px,#60391f 4px,#80502d 7px,#744629 24px);box-shadow:inset 0 12px 35px #0007}
.stage-floor::after{content:"";position:absolute;bottom:0;left:0;right:0;height:23px;border-top:3px solid #ba8850;background:linear-gradient(#4e2d1c,#24120e 65%,#100909);box-shadow:0 -3px 9px #0008,inset 0 -3px #b07a3738}
.stage>img{filter:drop-shadow(0 12px 13px #0008)}

/* Leave slim red curtain wings framing the open stage. */
.stage.open .left{transform:translateX(-91%)}
.stage.open .right{transform:translateX(91%) scaleX(-1)}
.stage.open .curtain{box-shadow:inset 0 0 24px #160208,5px 0 12px #0007}
.stage-ticket{right:calc(4.53% + 14px)}

/* Swept velvet drapes gathered by gold rope tiebacks. */
.curtain{transition:transform 2.3s cubic-bezier(.65,0,.2,1),width 2.3s cubic-bezier(.65,0,.2,1),clip-path 2.3s ease;clip-path:polygon(0 0,100% 0,100% 15%,100% 30%,100% 46%,100% 53%,100% 70%,100% 88%,100% 100%,0 100%)}
.stage.open .curtain{width:12%;clip-path:polygon(0 0,100% 0,92% 15%,70% 30%,43% 46%,40% 53%,61% 70%,83% 88%,96% 100%,0 100%);background:repeating-linear-gradient(95deg,#3d0615 0%,#791127 12%,#b62d45 24%,#6f1028 38%,#41091b 50%);border-bottom:5px solid #a47537}
.stage.open .left{transform:none}
.stage.open .right{transform:scaleX(-1)}
.curtain::after{content:"";position:absolute;left:-4%;top:49%;width:48%;height:11px;border-top:3px solid #f0cf7a;border-bottom:3px solid #9c6c28;border-radius:50%;background:repeating-linear-gradient(125deg,#c79543 0 2px,#f5d98e 3px 4px);box-shadow:0 3px 5px #0008;opacity:0;transition:opacity .5s ease 1.6s}
.stage.open .curtain::after{opacity:1}
.stage-ticket{right:calc(12% + 12px)}

/* Fuller upper swags with hanging braided cords and tassels. */
.stage.open .curtain{width:14%;clip-path:polygon(0 0,100% 0,88% 12%,65% 27%,37% 46%,34% 53%,53% 70%,71% 88%,82% 100%,0 100%)}
.curtain::after{width:40%}
.tieback-tassels{position:absolute;left:12%;top:50%;width:15%;height:80px;opacity:0;border-left:3px solid #e5b75b;border-right:3px solid #b98430;border-radius:0 0 45% 30%;filter:drop-shadow(2px 3px 2px #0009);transition:opacity .5s ease 1.6s}
.tieback-tassels::before,.tieback-tassels::after{content:"";position:absolute;top:65px;left:-8px;width:13px;height:29px;border-radius:5px 5px 2px 2px;background:repeating-linear-gradient(90deg,#a97725 0 1px,#f1cc79 2px 3px);border-top:6px solid #e5b75b;box-shadow:0 -4px 0 -1px #996320}
.tieback-tassels::after{left:auto;right:-8px;top:76px;height:25px}
.stage.open .tieback-tassels{opacity:1}

/* Anchor the ticket inside the artwork, just above the stage floor. */
.stage-ticket{right:calc(50% - min(50%,230px) + 10px);bottom:116px}
.stage-ticket #qr{width:64px;padding:5px}
@media(max-width:640px){.stage-ticket{right:calc(11% + 8px);bottom:118px}.stage-ticket #qr{width:60px;padding:4px}}
@media(max-width:360px){.stage-ticket #qr{width:56px}}
/* Tighten menu rows to leave the image corner clear for the ticket. */
.spirit-menu table{line-height:1.35}
.spirit-menu tbody th,.spirit-menu td{padding:1px 0}

/* Place the ticket in the lit gap between the artwork and right drape. */
.stage-ticket{right:calc(19% - 147px);bottom:116px}
@media(max-width:640px){.stage-ticket{right:3.8%;bottom:118px}.stage-ticket #qr{width:clamp(22px,6.5vw,40px);padding:2px}}
@media(min-width:641px){.stage-ticket{right:calc(30.75% - 147px)}}

/* Clear the image edge and restore the full-height menu. */
.spirit-menu table{line-height:1.5}
.spirit-menu tbody th,.spirit-menu td{padding:5px 0}
@media(min-width:641px){.stage-ticket{right:calc(30.75% - 155px)}.stage-ticket #qr{width:48px;padding:4px}}
@media(max-width:640px){.stage-ticket{right:3.5%}.stage-ticket #qr{width:clamp(20px,6vw,36px);padding:2px}}

/* Center the small ticket within the clear side gap. */
@media(min-width:641px){.stage-ticket{right:calc(30.75% - 148px)}}

/* The complete quotation appears on the floor after the reveal. */
.stage-quote{position:absolute;z-index:1;bottom:27px;left:15%;width:70%;margin:0;text-align:center;color:#fff0cf;text-shadow:0 1px 4px #160905,0 0 8px #160905;opacity:0;transform:translateY(5px);transition:opacity 1.4s ease 2.4s,transform 1.4s ease 2.4s;pointer-events:none}
.stage-quote p{font:italic 12px/1.45 Georgia,serif;margin:0 auto 4px;max-width:590px}
.stage-quote cite{font:9px/1.3 Georgia,serif;letter-spacing:.05em;color:var(--gold)}
.stage.open .stage-quote{opacity:1;transform:none}
@media(max-width:640px){.stage-quote{left:15%;width:70%;bottom:25px}.stage-quote p{font-size:10px;line-height:1.35}.stage-quote cite{font-size:8px}}

/* A single, readable quotation pass across the stage floor. */
.stage-quote{left:0;bottom:26px;width:100%;height:65px;display:flex;align-items:center;padding:0;margin:0;overflow:hidden;opacity:1;transform:none;transition:none;text-align:left;visibility:hidden}
.stage-quote p{flex:none;max-width:none;white-space:nowrap;margin:0;padding-left:100%;font:italic 21px/1.4 Georgia,serif;color:#fff3dc;text-shadow:0 2px 4px #170b07,0 0 6px #170b07;transform:translateX(0)}
.stage-quote cite{display:none}
.stage.open .stage-quote{visibility:visible;transform:none}
.stage.open .stage-quote p{animation:stage-quotation-pass 46s linear 2.6s 1 both}
@keyframes stage-quotation-pass{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media(max-width:640px){.stage-quote{left:0;width:100%;bottom:25px;height:65px}.stage-quote p{font-size:19px}}
@media(prefers-reduced-motion:reduce){.stage-quote{left:14%;width:72%;height:auto;bottom:26px;text-align:center}.stage-quote p{white-space:normal;padding:0;font-size:12px;transform:none;animation:none!important}}

/* Layered velvet nap, rounded folds, and warm reflected stage light. */
.curtain,.stage.open .curtain{background:
 repeating-linear-gradient(3deg,#fff2 0px,transparent 1px,transparent 3px,#0001 4px),
 repeating-linear-gradient(92deg,#210510 0%,#4a091a 5%,#8b1531 11%,#ba344d 15%,#7a102a 20%,#360715 26%,#20040d 29%);
 background-blend-mode:soft-light,normal;box-shadow:inset 10px 0 22px #0008,inset -6px 0 15px #21020db3,8px 0 20px #0008}
.stage.open .left{animation:velvet-settle-left 1.8s ease-in-out 2.3s both}
.stage.open .right{animation:velvet-settle-right 1.8s ease-in-out 2.3s both}
@keyframes velvet-settle-left{0%,100%{transform:skewX(0)}35%{transform:skewX(.6deg)}70%{transform:skewX(-.25deg)}}
@keyframes velvet-settle-right{0%,100%{transform:scaleX(-1) skewX(0)}35%{transform:scaleX(-1) skewX(.6deg)}70%{transform:scaleX(-1) skewX(-.25deg)}}
.stage.open .tieback-tassels{transform-origin:50% 0;animation:tassel-settle 2.8s ease-out 2.2s both}
@keyframes tassel-settle{0%{transform:rotate(-7deg)}25%{transform:rotate(5deg)}50%{transform:rotate(-3deg)}75%{transform:rotate(1deg)}100%{transform:rotate(0)}}
.valance{background:repeating-linear-gradient(92deg,#330714 0%,#691025 3%,#ae2b43 6%,#6a1028 9%,#310611 12%);box-shadow:inset 0 -12px 18px #29020a88,0 10px 18px #0008}
.floorboards{background:
 radial-gradient(ellipse at 50% 28%,#ffdfa175,transparent 62%),
 repeating-linear-gradient(90deg,transparent 0 73px,#1b0c08b3 74px,#c28a4855 76px,transparent 78px),
 repeating-linear-gradient(1deg,transparent 0px,#1f100b40 1px,transparent 2px,transparent 5px,#d89a4b25 6px,transparent 7px),
 repeating-linear-gradient(0deg,#56311e 0px,#ae7545 2px,#54321e 4px,#825331 7px,#694027 24px);box-shadow:inset 0 18px 30px #13090699,inset 0 -5px 10px #e4a65e33}
.stage-floor::after{background:linear-gradient(#8c582f,#452617 22%,#2b170f 70%,#160c09);border-top-color:#d4a466;box-shadow:0 -2px 7px #f1c38040,inset 0 -4px 6px #090605}

/* A quiet lighting cue starts the show; gold details catch the light. */
.stage.open{animation:house-light-cue 4s ease-in-out both}
@keyframes house-light-cue{0%{filter:brightness(.65)}18%{filter:brightness(.38)}65%{filter:brightness(.88)}100%{filter:brightness(1)}}
.stage.open::before,.stage.open::after{animation:spotlight-rise 4s ease-out both}
@keyframes spotlight-rise{0%,22%{opacity:0}65%{opacity:.65}100%{opacity:1}}
.marquee{animation:marquee-shimmer 7s ease-in-out infinite}
@keyframes marquee-shimmer{0%,100%{box-shadow:0 0 24px #e5ac4226}50%{box-shadow:0 0 42px #efbd6559}}
.stage.open .curtain::after{animation:tieback-glint 1.3s ease-in-out 3.2s both}
@keyframes tieback-glint{0%,100%{filter:brightness(1)}45%{filter:brightness(1.8) drop-shadow(0 0 4px #ffd77f)}}

/* Brighten only the revealed scene; velvet and gold stay fully lit. */
.stage.open{animation:none;filter:none}
.stage.open>img,.stage.open .stage-program,.stage.open .stage-floor{animation:scene-light-rise 3s ease-out both}
@keyframes scene-light-rise{from{filter:brightness(.3)}to{filter:brightness(1)}}
.stage.open::before,.stage.open::after{animation:scene-spotlight-rise 3s ease-out both}
@keyframes scene-spotlight-rise{from{opacity:0}to{opacity:1}}

.playback-controls{display:flex;gap:12px;align-items:center}.music-credit{text-align:center;color:var(--muted);font-size:9px;margin:0 auto 22px;padding:0 20px}.music-credit a{color:var(--muted)}


/* The artwork comes forward as the velvet opens. */
.stage>img{transform-origin:50% 48%}
.stage.open>img{animation:artwork-entrance 3.2s cubic-bezier(.2,.65,.25,1) both}
@keyframes artwork-entrance{
  0%{transform:perspective(1000px) translateZ(-180px) scale(.88);filter:brightness(.3) drop-shadow(0 12px 13px #0008)}
  75%{transform:perspective(1000px) translateZ(12px) scale(1.01);filter:brightness(.95) drop-shadow(0 12px 13px #0008)}
  100%{transform:perspective(1000px) translateZ(0) scale(1);filter:brightness(1) drop-shadow(0 12px 13px #0008)}
}

/* A clearly visible approach begins once the curtains have parted. */
.stage.open>img{animation:artwork-forward-reveal 5.5s cubic-bezier(.22,.61,.36,1) .8s both}
@keyframes artwork-forward-reveal{
  0%{transform:scale(.52) translateY(-45px);filter:brightness(.3) drop-shadow(0 8px 8px #0008)}
  80%{transform:scale(1.025) translateY(0);filter:brightness(1) drop-shadow(0 16px 18px #0009)}
  100%{transform:scale(1) translateY(0);filter:brightness(1) drop-shadow(0 12px 13px #0008)}
}

/* Bring the artwork a little closer at the end of its entrance. */
@keyframes artwork-forward-reveal{
  0%{transform:scale(.52) translateY(-45px);filter:brightness(.3) drop-shadow(0 8px 8px #0008)}
  80%{transform:scale(1.085) translateY(0);filter:brightness(1) drop-shadow(0 18px 20px #0009)}
  100%{transform:scale(1.06) translateY(0);filter:brightness(1) drop-shadow(0 16px 17px #0008)}
}

/* Program panels enter from opposite wings as the artwork approaches. */
.stage.open .stage-title{animation:panel-from-left 2.8s cubic-bezier(.2,.7,.2,1) 1.3s both}
.stage.open .stage-bottom{animation:panel-from-left 3s cubic-bezier(.2,.7,.2,1) 1.7s both}
.stage.open .spirit-menu{animation:panel-from-right 3s cubic-bezier(.2,.7,.2,1) 2s both}
@keyframes panel-from-left{from{transform:translateX(-130%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes panel-from-right{from{transform:translateX(130%);opacity:0}to{transform:translateX(0);opacity:1}}

/* The corner ticket appears after the event information settles. */
.stage.open .stage-ticket{animation:ticket-arrive 1.1s ease-out 4.8s both}
@keyframes ticket-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Angled program entrances settle beneath a passing gold highlight. */
.stage-title,.stage-bottom{position:relative;overflow:hidden;transform-origin:center}
.stage.open .stage-title{animation:cinematic-panel-left 2.8s cubic-bezier(.2,.7,.2,1) 1.3s both}
.stage.open .stage-bottom{animation:cinematic-panel-left 3s cubic-bezier(.2,.7,.2,1) 1.7s both}
@keyframes cinematic-panel-left{
 from{transform:perspective(900px) translateX(-130%) rotateY(24deg) rotateZ(-3deg);opacity:0}
 75%{transform:perspective(900px) translateX(2%) rotateY(-3deg) rotateZ(.4deg);opacity:1}
 to{transform:perspective(900px) translateX(0) rotateY(0) rotateZ(0);opacity:1}
}
.stage-title::after,.stage-bottom::after{content:"";position:absolute;inset:-30% -50%;pointer-events:none;background:linear-gradient(110deg,transparent 38%,#f6d68c08 44%,#ffe9ac40 50%,#f6d68c08 56%,transparent 62%);transform:translateX(-100%);opacity:0}
.stage.open .stage-title::after{animation:program-gold-sweep 1.5s ease-in-out 3.2s both}
.stage.open .stage-bottom::after{animation:program-gold-sweep 1.6s ease-in-out 3.7s both}
@keyframes program-gold-sweep{0%{transform:translateX(-75%);opacity:0}25%,70%{opacity:1}100%{transform:translateX(75%);opacity:0}}

/* Slow recurring highlights continue until the stage is closed or replayed. */
.stage.open .stage-title::after{animation:program-gold-sweep-loop 10s ease-in-out 3.2s infinite both}
.stage.open .stage-bottom::after{animation:program-gold-sweep-loop 10s ease-in-out 3.7s infinite both}
@keyframes program-gold-sweep-loop{
  0%{transform:translateX(-75%);opacity:0}
  10%{opacity:.85}
  35%{opacity:.85}
  45%{transform:translateX(75%);opacity:0}
  100%{transform:translateX(75%);opacity:0}
}

/* Carry the same recurring gold light across the complete event program. */
.spirit-menu{position:relative;overflow:hidden}
.spirit-menu::after{content:"";position:absolute;inset:-30% -50%;pointer-events:none;background:linear-gradient(110deg,transparent 38%,#f6d68c08 44%,#ffe9ac40 50%,#f6d68c08 56%,transparent 62%);transform:translateX(-100%);opacity:0}
.stage.open .stage-bottom::after{animation:program-gold-sweep-loop 10s ease-in-out 3.7s infinite both}
.stage.open .spirit-menu::after{animation:program-gold-sweep-loop 10s ease-in-out 4.2s infinite both}

/* Reset old side offsets now that the menu sits in the centered program flow. */
.spirit-menu{left:auto;right:auto;bottom:auto;align-self:center;margin-left:auto;margin-right:auto}

/* Layered stage depth with restrained pointer-driven perspective. */
.proscenium{perspective:1600px}
.stage{transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transform-origin:50% 50%;transition:transform .35s ease-out;box-shadow:inset 0 0 45px #000a,0 15px 25px #0005}
.stage-program{translate:var(--panel-x,0px) var(--panel-y,0px);transition:translate .35s ease-out}
.stage-title,.stage-bottom,.spirit-menu{box-shadow:0 8px 18px #0005,inset 0 1px #ffe5ac24;border-radius:4px}
.stage.open .curtain{filter:drop-shadow(12px 6px 12px #0009)}
.valance{filter:drop-shadow(0 8px 6px #0008)}
@media(prefers-reduced-motion:reduce){.stage{transform:none}.stage-program{translate:none}}

/* Pointer movement gives the hanging cords a small responsive sway. */
.tieback-tassels{rotate:var(--tassel-sway,0deg);transition:opacity .5s ease 1.6s,rotate .75s cubic-bezier(.2,.8,.3,1);transform-origin:50% 0}
.right .tieback-tassels{rotate:calc(-1 * var(--tassel-sway,0deg))}
@media(prefers-reduced-motion:reduce){.tieback-tassels,.right .tieback-tassels{rotate:none}}

/* Clear panels let the artwork show through; letter shadows preserve contrast. */
.stage-title,.stage-bottom,.stage-details,.spirit-menu{background:transparent;border:0;box-shadow:none}
.stage-title,.stage-bottom,.spirit-menu{text-shadow:-1px -1px 1px #130a0e,1px -1px 1px #130a0e,-1px 1px 1px #130a0e,1px 1px 1px #130a0e,0 2px 4px #000,0 0 7px #000}
.stage-title h2,.stage-title .eyebrow{text-shadow:inherit}
.stage-details dd,.stage-details dt,.stage-details dd small,.spirit-menu table,.spirit-menu h3,.spirit-menu>p{text-shadow:inherit}

/* Remove program box rules while preserving gold sweeps and menu leaders. */
.stage-title,.stage-bottom,.stage-details,.spirit-menu,.stage-details dl>div,.stage-details .stage-location,.spirit-menu thead tr,.spirit-menu thead th{border:0;outline:0;box-shadow:none}

/* Leave the figure's head clear between the title and event details. */
.stage-program{padding-top:48px}
.stage-title{margin-bottom:155px}
.spirit-menu{margin-top:20px}
.spirit-menu tbody th,.spirit-menu td{padding:3px 0}
@media(max-width:640px){.stage-program{padding-top:45px}.stage-title{margin-bottom:145px}.spirit-menu{margin-top:18px}.spirit-menu tbody th,.spirit-menu td{padding:3px 0}}
@media(max-width:360px){.stage-title{margin-bottom:135px}}
.spirit-menu tbody th,.spirit-menu td{padding:2px 0}

/* Keep the feature title on the artwork, just above the figure's head. */
.stage-program{padding-top:88px}
.stage-title{margin-bottom:115px}
@media(max-width:640px){.stage-program{padding-top:85px}.stage-title{margin-bottom:105px}}
@media(max-width:360px){.stage-title{margin-bottom:95px}}

/* Ticket welcome: red velvet with colors drawn from the original artwork. */
#welcome::backdrop{background:
 radial-gradient(ellipse at 50% 35%,#c14a5b26,transparent 70%),
 repeating-linear-gradient(92deg,#370713 0%,#641024 5%,#a52a43 9%,#7c142f 13%,#42091a 18%,#2e0611 22%)}
#welcome{background:radial-gradient(ellipse at 50% 0%,#79434c55,transparent 70%),linear-gradient(145deg,#4c1c2b,#35131f);border:1px solid #e9c677;color:#fff0df;box-shadow:0 20px 65px #23030bb3,inset 0 1px 0 #f3cbd22e}
#welcome .eyebrow{color:#ebc4c8}
#welcome .seal{color:#e9c677;text-shadow:0 2px 16px #f3babe30}
#welcome h2{color:#fff1e3;text-shadow:0 2px 5px #21081180}
#welcome .welcome-content>p:not(.eyebrow){color:#f1d8d3}
#close-welcome{background:linear-gradient(#f1d18c,#ddb568);border-color:#f2d394;color:#391b23;box-shadow:0 3px 12px #21081155}

/* The invitation remains visible behind a velvet ticket popup. */
#welcome::backdrop{background:#080408b3}
#welcome{background:
 radial-gradient(ellipse at 50% 30%,#edb3bc14,transparent 75%),
 repeating-linear-gradient(92deg,#3e0b19 0%,#62142b 10%,#8e2540 20%,#5e142b 30%,#370a18 40%);box-shadow:0 20px 65px #130209aa,inset 0 1px 0 #f3cbd22e}

/* Portrait phones: keep the complete performance within one screen. */
@media(max-width:640px) and (orientation:portrait){
 .theater{padding:8px 8px 0}
 .theater>.eyebrow{font-size:7px;margin-bottom:8px}
 .marquee{padding:8px;border-radius:28px 28px 4px 4px}
 .marquee-inner{padding:8px 4px}
 .marquee p{font-size:9px}
 h1{font-size:32px;margin:3px 0}
 .proscenium{padding:0 7px 5px}
 .stage{height:min(calc(100svh - 155px),165vw);min-height:390px;container-type:size}
 .stage>img{width:94%;height:calc(100% - 64px);margin:0 auto;object-fit:fill}
 .stage-program{padding:0;inset:0;display:block;translate:none}
 .stage-title{position:absolute;top:5%;left:8%;width:84%;margin:0;padding:4px}
 .stage-title .eyebrow{font-size:7px}
 .stage-title h2{font-size:21px;margin-top:4px}
 .stage-bottom{position:absolute;top:29%;left:6%;width:88%;padding:3px 4px}
 .stage-details dl{gap:6px}
 .stage-details dt{font-size:7px}
 .stage-details dd{font-size:12px;margin-top:2px}
 .stage-details dd small{font-size:9px;line-height:1.3}
 .stage-details .stage-location{padding-top:6px}
 .stage-details .stage-location dd{font-size:13px}
 .spirit-menu{position:absolute;top:51%;left:6%;right:auto;bottom:auto;width:88%;margin:0;padding:2px 4px}
 .spirit-menu h3{font-size:16px;margin-bottom:6px}
 .spirit-menu table{font-size:clamp(9px,2.65vw,11px);line-height:1.3}
 .spirit-menu thead th{font-size:7px;padding-bottom:3px}
 .spirit-menu tbody th,.spirit-menu td{padding:2px 0}
 .spirit-menu tr{gap:4px}
 .spirit-menu tbody tr::before{min-width:4px}
 .stage-ticket{right:7%;bottom:65px}
 .stage-ticket #qr{width:34px;padding:3px}
 .stage-floor{height:64px}
 .stage-floor::after{height:14px}
 .stage-quote{bottom:15px;height:45px}
 .stage-quote p{font-size:16px}
 .stage.open .curtain{width:8%}
 .valance{top:-38px;height:65px}
 .tieback-tassels{height:44px}
 .tieback-tassels::before{top:36px;height:20px;width:8px;left:-5px}
 .tieback-tassels::after{top:44px;height:18px;width:8px;right:-5px}
 .stage-controls{padding:3px 0;font-size:8px;gap:3px}
 .text-button{font-size:10px;padding:7px 4px}
 .playback-controls{gap:5px}
 .music-credit{font-size:7px;line-height:1.3;margin:4px auto;padding:0 12px}
}
@media(max-width:640px) and (orientation:portrait){
 .stage{height:min(calc(100svh - 180px),165vw)}
 .spirit-menu{top:49%}
 .spirit-menu tbody th,.spirit-menu td{padding:1px 0}
 .stage-ticket{z-index:2;bottom:65px}
}

/* Reserve a separate QR pocket below all nine menu rows on portrait phones. */
@media(max-width:640px) and (orientation:portrait){
 .stage-title{top:2.5%}
 .stage-title h2{font-size:19px}
 .stage-title .eyebrow{font-size:6px}
 .stage-bottom{top:28%}
 .spirit-menu{top:47%;height:calc(100% - 47% - 106px);padding:2px 4px}
 .spirit-menu h3{font-size:15px;margin-bottom:4px}
 .spirit-menu table{font-size:clamp(8px,2.4vw,10px);line-height:1.15}
 .spirit-menu tbody th,.spirit-menu td{padding:1px 0}
 .spirit-menu tbody tr{min-height:clamp(13px,2.6cqh,17px)}
 .stage-ticket{right:7%;bottom:66px;z-index:2}
 .stage-ticket #qr{width:32px;padding:3px}
}
@media(max-width:640px) and (orientation:portrait){.spirit-menu tbody tr{min-height:clamp(11px,2.2cqh,15px)}.spirit-menu tbody th,.spirit-menu td{padding:0}}
@media(max-width:640px) and (orientation:portrait){.stage-title{top:5%}}

/* Phone refinement: clear the upper valance and give the menu breathing room. */
@media(max-width:640px) and (orientation:portrait){
 .stage>img{position:absolute;top:30px;left:3%;margin:0;height:calc(100% - 94px);transform-origin:50% 50%}
 .stage-title{top:9%}
 .stage-bottom{top:30%}
 .spirit-menu{top:51%;height:calc(49% - 106px)}
 .spirit-menu h3{margin-bottom:7px}
 .spirit-menu tbody tr{min-height:clamp(14px,2.8cqh,20px)}
 .spirit-menu tbody th,.spirit-menu td{padding:1px 0}
}
@media(max-width:640px) and (orientation:portrait){
 .spirit-menu{top:48%;height:auto}
 .spirit-menu tbody tr{min-height:clamp(12px,2.65cqh,20px)}
 .spirit-menu tbody th,.spirit-menu td{padding:0}
}

/* Portrait-only final spacing: title above the head and menu below the address. */
@media(max-width:640px) and (orientation:portrait){
 .stage-title{top:7%}
 .stage-bottom{top:28%}
 .spirit-menu{top:49%}
 .spirit-menu h3{margin-bottom:6px}
 .spirit-menu tbody tr{min-height:clamp(12px,2.5cqh,19px)}
}