:root{
  --stage:#1C1726; --spot:#F7931E; --cream:#FFF4E6; --ink:#1F1A17;
  --paper:#FBF6EE; --paper-2:#F3EADC; --text:#1F1A17; --soft:#5C534C; --rule:#D9CBB8;
  --accent:#A3500A; --todo-bg:#FFF1B8; --todo-ink:#5A4300;
  --display:"Gloock", "Didot", "Bodoni 72", Georgia, serif;
  --body:"Libre Franklin", "Franklin Gothic Book", "Helvetica Neue", Arial, sans-serif;
  box-sizing:border-box; color-scheme:light;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#17131F; --paper-2:#211B2C; --text:#F5ECE1; --soft:#C7BCB1; --rule:#3B3349;
    --accent:#FFAE57; --todo-bg:#4A3D10; --todo-ink:#FFE9A3; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#17131F; --paper-2:#211B2C; --text:#F5ECE1; --soft:#C7BCB1; --rule:#3B3349;
  --accent:#FFAE57; --todo-bg:#4A3D10; --todo-ink:#FFE9A3; color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 84px); -webkit-text-size-adjust:100%}
body{margin:0; background:var(--paper); color:var(--text); font-family:var(--body); font-size:1.0625rem; line-height:1.65}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:10; background:var(--paper)}
img{max-width:100%; height:auto; display:block}
a{color:var(--accent); text-underline-offset:.2em; text-decoration-thickness:1px}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid var(--spot); outline-offset:3px}
h1,h2,h3{font-family:var(--display); font-weight:400; line-height:1.08; margin:0 0 .45em; letter-spacing:-.01em}
h1{font-size:clamp(2.6rem,6.4vw,5rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.8rem)}
h3{font-size:1.45rem}
p{margin:0 0 1em; max-width:64ch}
.wrap{width:min(1120px,100% - 2.5rem); margin-inline:auto}
.skip{position:absolute; left:-9999px} .skip:focus{left:1rem; top:1rem; z-index:20; background:var(--cream); color:var(--ink); padding:.5rem 1rem}
.todo{background:var(--todo-bg); color:var(--todo-ink); padding:.05em .35em; border-radius:3px; font-size:.92em}

/* masthead */
.mast{position:sticky; top:env(safe-area-inset-top,0px); z-index:5; background:var(--paper); border-bottom:1px solid var(--rule)}
.mast .wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:72px}
.brand{line-height:0; display:block}
.logo{width:112px; height:auto}
.logo .beam{display:none}
.logo-cream{display:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .logo-ink{display:none} :root:not([data-theme="light"]) .logo-cream{display:block}}
:root[data-theme="dark"] .logo-ink{display:none} :root[data-theme="dark"] .logo-cream{display:block}
.nav{display:flex; align-items:center; gap:1.4rem}
.nav a{color:var(--text); text-decoration:none; font-weight:600; font-size:.98rem; padding:.35rem 0; border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--rule)}
.nav a[aria-current="page"]{border-bottom-color:var(--spot)}
.menu-btn{display:none; background:none; border:1px solid var(--text); color:var(--text); font:600 .95rem var(--body); padding:.45rem .9rem; border-radius:2px}
@media (max-width:820px){
  .menu-btn{display:block}
  .nav{display:none; position:absolute; left:0; right:0; top:100%; background:var(--paper); flex-direction:column; align-items:stretch; gap:0; padding:.5rem 1.25rem 1.25rem; border-bottom:1px solid var(--rule)}
  .nav.open{display:flex}
  .nav a{padding:.8rem 0; border-bottom:1px solid var(--rule)}
}

/* ticket button */
.ticket{display:inline-flex; align-items:center; gap:.9rem; background:var(--spot); color:var(--ink); text-decoration:none; font-weight:700; font-size:1.05rem; padding:.95rem 1.9rem; border:0; cursor:pointer;
  -webkit-mask:radial-gradient(circle at 0 50%,transparent 9px,#000 9.5px) left/51% 100% no-repeat, radial-gradient(circle at 100% 50%,transparent 9px,#000 9.5px) right/51% 100% no-repeat;
          mask:radial-gradient(circle at 0 50%,transparent 9px,#000 9.5px) left/51% 100% no-repeat, radial-gradient(circle at 100% 50%,transparent 9px,#000 9.5px) right/51% 100% no-repeat}
.ticket::before{content:""; width:0; align-self:stretch; border-left:2px dashed rgba(31,26,23,.45); margin:-.3rem 0; order:2}
.ticket span{order:3; font-weight:400; font-size:.95rem}
.ticket:focus-visible{outline:none; box-shadow:inset 0 0 0 3px var(--ink)}
.text-link{font-weight:600}

/* programme label with hand-drawn underline */
.label{font-family:var(--display); font-size:1.15rem; color:var(--accent); display:inline-block; margin-bottom:.6rem; position:relative; padding-bottom:.35rem}
.label svg{position:absolute; left:0; bottom:0; width:100%; height:8px; overflow:visible}

/* cover */
.cover{padding:3.5rem 0 2.5rem}
.cover .wrap{display:grid; grid-template-columns:1.55fr 1fr; gap:3.5rem; align-items:end}
.cover h1{margin-bottom:.35em}
.cover h1 em{font-style:normal; color:var(--accent); position:relative; white-space:nowrap}
.cover .intro{font-size:1.2rem; color:var(--soft); max-width:46ch}
.cover .act{display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; margin-top:1.75rem}
.credits{border-top:3px double var(--text); border-bottom:3px double var(--text); padding:1.1rem 0}
.credits h2{font-size:1.25rem; margin:0 0 .6rem}
.credits dl{margin:0}
.credits div{display:flex; align-items:baseline; gap:.5rem; padding:.3rem 0}
.credits dt{font-weight:700}
.credits dd{margin:0; text-align:right}
.credits .dots{flex:1; border-bottom:2px dotted var(--rule); transform:translateY(-.3em)}
.credits small{display:block; color:var(--soft); text-align:right; font-size:.88rem}
@media (max-width:860px){.cover .wrap{grid-template-columns:1fr; gap:2rem} .cover{padding-top:2.25rem}}

figure{margin:0}
figcaption{font-style:italic; color:var(--soft); font-size:.92rem; margin-top:.6rem}
.bleed img{width:100%; max-height:78vh; object-fit:cover}
.bleed figcaption{width:min(1120px,100% - 2.5rem); margin:.6rem auto 0}

.section{padding:4.5rem 0}
.section.tint{background:var(--paper-2)}

/* director's note */
.note-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:4rem; align-items:center}
.note-grid blockquote{margin:0}
.note-grid blockquote p{font-size:1.15rem}
.sign{font-family:var(--display); font-size:1.6rem; margin-top:.5rem}
.sign small{display:block; font-family:var(--body); font-size:.9rem; color:var(--soft)}
.shot{position:relative}
.shot img{border:10px solid #fff; box-shadow:0 1px 2px rgba(0,0,0,.12), 0 14px 30px -18px rgba(0,0,0,.45)}
.shot.tilt-r img{transform:rotate(1.4deg)}
.shot.tilt-l img{transform:rotate(-1.2deg)}
@media (max-width:860px){.note-grid{grid-template-columns:1fr; gap:2rem}}

/* running order */
.running{display:grid; grid-template-columns:1fr 1fr; gap:3rem; margin-top:2rem}
.act-block h3{display:flex; align-items:baseline; gap:.75rem}
.act-block h3 small{font-family:var(--body); font-size:.95rem; color:var(--soft)}
.act-block ol{list-style:none; margin:0; padding:0}
.act-block li{display:flex; align-items:baseline; gap:.5rem; padding:.55rem 0}
.act-block li .dots{flex:1; border-bottom:2px dotted var(--rule); transform:translateY(-.3em); min-width:1.5rem}
.act-block li .when{font-weight:700; white-space:nowrap}
.act-block li.interval{font-style:italic; color:var(--soft)}
.act-block li.show .what{color:var(--accent); font-weight:700}
@media (max-width:760px){.running{grid-template-columns:1fr; gap:2rem}}

/* reviews: the one dark moment */
.reviews{background:var(--stage); color:var(--cream); position:relative; overflow:hidden}
.reviews::before{content:""; position:absolute; top:0; left:52%; width:46%; height:100%; background:linear-gradient(105deg, transparent 0 30%, rgba(247,147,30,.13) 30% 70%, transparent 70%); pointer-events:none}
.reviews .label{color:var(--spot)}
.reviews h2{color:var(--cream)}
.revs{display:grid; grid-template-columns:1.2fr 1fr; gap:3rem 4rem; margin-top:2rem; position:relative}
.rev p{font-size:1.1rem; color:#EFE5D9}
.rev .stars{color:var(--spot); letter-spacing:.2em; font-size:.95rem; margin-bottom:.6rem}
.rev cite{font-style:normal; font-weight:700; color:var(--cream); font-size:.95rem}
.rev.big{grid-column:1 / -1; border-top:1px solid rgba(255,244,230,.25); padding-top:2.5rem}
.rev.big p{font-family:var(--display); font-size:clamp(1.6rem,3.4vw,2.4rem); line-height:1.25; color:var(--cream); max-width:30ch}
@media (max-width:760px){.revs{grid-template-columns:1fr}}

/* production photos */
.gallery{display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:460px; gap:2rem 1.25rem; margin-top:2rem}
.gallery figure:nth-child(1){grid-column:1 / 6}
.gallery figure:nth-child(2){grid-column:6 / 13}
.gallery figure:nth-child(3){grid-column:1 / 8}
.gallery figure:nth-child(4){grid-column:8 / 13}
.gallery img{width:100%; height:100%; object-fit:cover; aspect-ratio:auto}
.gallery figure{display:flex; flex-direction:column}
.gallery .frame{flex:1; overflow:hidden; min-height:0}
@media (max-width:760px){.gallery{grid-template-columns:1fr; grid-auto-rows:auto} .gallery figure:nth-child(n){grid-column:auto} .gallery .frame{flex:none} .gallery img{height:auto}}

/* box office */
.box{padding:4rem 0}
.stub{display:grid; grid-template-columns:1fr auto; gap:2rem; align-items:center; background:var(--spot); color:var(--ink); padding:2.25rem 2.75rem; position:relative;
  -webkit-mask:radial-gradient(circle at 0 50%,transparent 18px,#000 18.5px) left/51% 100% no-repeat, radial-gradient(circle at 100% 50%,transparent 18px,#000 18.5px) right/51% 100% no-repeat;
          mask:radial-gradient(circle at 0 50%,transparent 18px,#000 18.5px) left/51% 100% no-repeat, radial-gradient(circle at 100% 50%,transparent 18px,#000 18.5px) right/51% 100% no-repeat}
.stub h2{margin:0 0 .3rem}
.stub p{margin:0; font-size:1.05rem}
.stub .admit{font-family:var(--display); font-size:1.15rem; margin-bottom:.4rem}
.stub .tear{border-left:2px dashed rgba(31,26,23,.5); padding-left:2rem; text-align:center}
.stub .tear b{display:block; font-family:var(--display); font-weight:400; font-size:2.6rem; line-height:1}
.stub .tear small{display:block; margin:.25rem 0 1rem}
.stub .go{display:inline-block; background:var(--ink); color:var(--cream); text-decoration:none; font-weight:700; padding:.8rem 1.4rem}
@media (max-width:700px){.stub{grid-template-columns:1fr; padding:2rem 1.75rem} .stub .tear{border-left:0; border-top:2px dashed rgba(31,26,23,.5); padding:1.25rem 0 0; text-align:left}}

/* inner pages */
.page-head{padding:3.25rem 0 2rem}
.page-head .lead{font-size:1.2rem; color:var(--soft); max-width:58ch}
.two{display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start}
@media (max-width:860px){.two{grid-template-columns:1fr; gap:2rem}}
.skills{list-style:none; padding:0; margin:1.25rem 0 0; counter-reset:sk}
.skills li{display:grid; grid-template-columns:3rem 1fr; padding:1rem 0; border-top:1px solid var(--rule)}
.skills li::before{counter-increment:sk; content:counter(sk); font-family:var(--display); font-size:2rem; line-height:1; color:var(--accent)}
.skills b{display:block; font-size:1.1rem}
.pull{margin:3rem 0 0; padding:2rem 0 0; border-top:3px double var(--text)}
.pull p{font-family:var(--display); font-size:clamp(1.3rem,2.4vw,1.75rem); line-height:1.35; max-width:44ch}
.pull cite{font-style:normal; font-weight:700}
.price{display:flex; gap:3rem; flex-wrap:wrap; margin:1rem 0 1.25rem}
.price b{display:block; font-family:var(--display); font-weight:400; font-size:3.2rem; line-height:1}
.price .v b{color:var(--accent)}
.price span{color:var(--soft)}
details{border-top:1px solid var(--rule); padding:1.1rem 0}
details:last-of-type{border-bottom:1px solid var(--rule)}
summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:1rem; font-family:var(--display); font-size:1.35rem; line-height:1.25}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; color:var(--accent); font-family:var(--body); font-size:1.5rem; line-height:1}
details[open] summary::after{content:"–"}
details p{margin:.8rem 0 0}
.contact div{display:flex; align-items:baseline; gap:.5rem; padding:.5rem 0}
.contact dt{font-weight:700}
.contact dd{margin:0}
.contact .dots{flex:1; border-bottom:2px dotted var(--rule); transform:translateY(-.3em)}
.contact dl{margin:0}

/* rehearsal room */
.lock{border-top:3px double var(--text); border-bottom:3px double var(--text); padding:1.75rem 0; max-width:560px}
.lock label{display:block; font-family:var(--display); font-size:1.4rem; margin-bottom:.75rem}
.lock-row{display:flex; gap:.75rem; flex-wrap:wrap}
.lock input{flex:1 1 220px; font:inherit; padding:.8rem 1rem; border:1px solid var(--text); background:transparent; color:var(--text); border-radius:0}
.hint{color:var(--soft); margin:.9rem 0 0; font-size:.95rem}
.songs{list-style:none; padding:0; margin:1rem 0 1.5rem; counter-reset:song; max-width:760px}
.songs li{display:grid; grid-template-columns:2.5rem 1fr auto; gap:1rem; align-items:center; padding:1rem 0; border-top:1px solid var(--rule)}
.songs li::before{counter-increment:song; content:counter(song); font-family:var(--display); font-size:1.8rem; color:var(--accent)}
.songs b{display:block; font-size:1.1rem}
.songs small{color:var(--soft)}
.mock-player{display:flex; align-items:center; gap:.6rem; border:1px solid var(--text); padding:.35rem .9rem .35rem .4rem; font-size:.9rem; white-space:nowrap}
.mock-player i{width:1.8rem; height:1.8rem; background:var(--spot); position:relative; display:inline-block}
.mock-player i::after{content:""; position:absolute; left:.68rem; top:.5rem; border-left:.6rem solid var(--ink); border-top:.4rem solid transparent; border-bottom:.4rem solid transparent}
@media (max-width:560px){.songs li{grid-template-columns:2rem 1fr} .mock-player{grid-column:2; justify-self:start}}
.link-btn{background:none; border:0; color:var(--accent); font:inherit; font-weight:600; text-decoration:underline; cursor:pointer; padding:0}

/* footer */
.foot{border-top:3px double var(--text); padding:2.5rem 0 3rem; font-size:.95rem; color:var(--soft)}
.foot .wrap{display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap}
.foot p{margin:0}

/* entrance */
@media (prefers-reduced-motion:no-preference){
  .cover h1, .cover .intro, .cover .act, .credits{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
  .cover .intro{animation-delay:.08s} .cover .act{animation-delay:.16s} .credits{animation-delay:.24s}
  @keyframes rise{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
}