@font-face{font-family:"Special Elite";src:url("/fonts/SpecialElite-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
:root{
  --floor:#3A4250;      /* rehearsal-room floor */
  --page:#F6F6F3;       /* script paper */
  --ink:#1D2433;
  --muted:#5B6271;
  --rule:#DCDCD6;
  --yellow:#F2C230;     /* spike tape */
  --pink:#E8437A;
  --blue:#3B82D6;
  --measure:62ch;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--page);color:var(--ink);
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-optical-sizing:auto;font-size:1.125rem;line-height:1.55;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.wrap{max-width:72rem;margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Floor (dark header band) ---------- */
.floor{background:var(--floor);color:var(--page);position:relative;overflow:hidden}
.floor > .wrap{width:100%}
nav.top{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-top:1.5rem;padding-bottom:1.5rem;font-size:1rem}
nav.top .brand{font-weight:700;text-decoration:none}
nav.top ul{list-style:none;margin:0;padding:0;display:flex;gap:1.5rem}
nav.top ul a{text-decoration:none;opacity:.8}
@media (max-width:640px){nav.top{flex-direction:column;align-items:flex-start;gap:.6rem}nav.top ul{gap:1.1rem;font-size:.95rem}}
nav.top ul a:hover,nav.top ul a[aria-current="page"]{opacity:1;text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px;text-underline-offset:.35em}

.home-floor{min-height:min(88vh,50rem);display:flex;flex-direction:column}
.hero{flex:1;display:flex;align-items:flex-end;padding-bottom:clamp(2.5rem,7vw,5.5rem);position:relative;z-index:1}
h1.mast{margin:0;font-family:"Special Elite","Courier New",monospace;font-weight:400;font-size:clamp(3.4rem,16vw,12rem);line-height:.92;letter-spacing:-.03em}
h1.mast span{display:block}
.strap{margin:1.75rem 0 0;max-width:38ch;text-wrap:balance;font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1.35;opacity:.92}
@media (max-width:640px){.home-floor{min-height:34rem}}

.page-floor .titlebar{padding-top:clamp(2rem,6vw,4.5rem);padding-bottom:clamp(2.5rem,6vw,4rem);position:relative;z-index:1}
.page-floor h1{margin:0;font-weight:800;font-stretch:75%;font-size:clamp(3rem,9vw,7rem);line-height:.9;letter-spacing:-.015em}
.page-floor .titlebar p{margin:1rem 0 0;max-width:40ch;opacity:.9}

/* spike marks: tape on the floor where the actors stand */
.spike{position:absolute;pointer-events:none}
.spike i{position:absolute;display:block;border-radius:1px;opacity:.95}
.cross i:nth-child(1){width:44px;height:9px;left:0;top:17px}
.cross i:nth-child(2){width:9px;height:44px;left:17px;top:0}
.tee i:nth-child(1){width:52px;height:9px;left:0;top:0}
.tee i:nth-child(2){width:9px;height:34px;left:21px;top:0}
.ell i:nth-child(1){width:40px;height:9px;left:0;top:31px}
.ell i:nth-child(2){width:9px;height:40px;left:0;top:0}
.y i{background:var(--yellow)} .p i{background:var(--pink)} .b i{background:var(--blue)}
.s1{right:12%;top:22%;transform:rotate(6deg)}
.s2{right:5%;top:46%;transform:rotate(-9deg)}
.s3{right:7%;bottom:18%;transform:rotate(14deg)}
.s4{left:58%;top:16%;transform:rotate(-4deg)}
.s5{right:17%;top:12%;transform:rotate(30deg)}
.page-floor .s1{top:30%} .page-floor .s3{bottom:20%}
@media (prefers-reduced-motion:no-preference){
  .home-floor .spike{animation:lay .5s cubic-bezier(.2,.8,.2,1) both}
  .s1{animation-delay:.15s}.s2{animation-delay:.3s}.s3{animation-delay:.45s}.s4{animation-delay:.6s}.s5{animation-delay:.75s}
  @keyframes lay{from{opacity:0;scale:1.6}to{opacity:1;scale:1}}
}
@media (max-width:640px){.s2,.s5{display:none}.s1{top:16%}.s4{left:auto;right:8%;top:30%}}

/* ---------- Sections ---------- */
section{padding:clamp(3.5rem,8vw,6.5rem) 0}
section + section{border-top:1px solid var(--rule)}
h2{font-weight:700;font-stretch:85%;font-size:clamp(2rem,4.5vw,3.25rem);line-height:1.02;margin:0 0 1.25rem;letter-spacing:-.01em}
h3{font-weight:700;font-size:1.25rem;margin:0 0 .5rem}
p{margin:0 0 1em;max-width:var(--measure)}
.lede{font-size:clamp(1.25rem,2.4vw,1.6rem);line-height:1.4;max-width:34ch}
.muted{color:var(--muted)}
.small{font-size:.95rem;color:var(--muted)}

.btn{
  font:inherit;font-size:1rem;font-weight:700;cursor:pointer;
  padding:.85rem 1.4rem;border:2px solid var(--ink);border-radius:2px;
  background:var(--ink);color:var(--page);text-decoration:none;display:inline-block
}
.btn:hover{background:var(--floor);border-color:var(--floor)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--page)}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}

/* ---------- Current production ---------- */
.section-title{font-size:clamp(1.75rem,3.5vw,2.5rem);margin-bottom:1.75rem}
.card{background:#fff;border:1px solid var(--rule);border-radius:6px;padding:clamp(1.25rem,3.5vw,3rem);box-shadow:0 1px 2px rgba(29,36,51,.05),0 12px 32px -18px rgba(29,36,51,.25)}
.show-title{font-weight:700;font-stretch:85%;font-size:clamp(2.5rem,6vw,4.5rem);line-height:.95;margin:0 0 .75rem;letter-spacing:-.01em}

/* dates as ticket stubs */
.dates{list-style:none;margin:0 0 2.25rem;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:.75rem}
@media (max-width:520px){.dates{grid-template-columns:1fr 1fr}}
.dates a{display:grid;text-decoration:none;transition:transform .15s ease;grid-template-columns:auto auto;grid-template-areas:"num day" "num mon" "num time";column-gap:.9rem;align-items:center;padding:1.1rem 1.6rem 1.1rem 1.2rem;background:var(--ink);color:var(--page);border-radius:4px;position:relative;
  -webkit-mask:radial-gradient(circle 9px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 9px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle 9px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 9px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat}
.dates a:hover{transform:translateY(-2px)}
.dates a:focus-visible{outline:none}
.dates li:has(a:focus-visible){outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.dates a{transition:none}.dates a:hover{transform:none}}
.dates .num{grid-area:num;font-family:"Special Elite","Courier New",monospace;font-size:clamp(2.6rem,7vw,5rem);line-height:1;color:var(--yellow);padding-left:.4rem}
.dates .day{grid-area:day;font-weight:700;font-size:clamp(1rem,1.6vw,1.2rem);line-height:1.1}
.dates .mon{grid-area:mon;font-size:1rem;line-height:1.1;opacity:.85}
.dates .time{grid-area:time;font-weight:700;font-size:1rem;line-height:1.2;color:var(--yellow)}

.show{display:grid;gap:2.5rem;align-items:start}
@media (min-width:860px){.show{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:4.5rem}}
.show h2{font-size:clamp(2.5rem,6vw,4.5rem);line-height:.95}
.byline{font-size:1.15rem;margin:-.5rem 0 1.5rem}
.facts{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.25rem;margin:1.5rem 0;padding:1.25rem 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font-size:1rem}
.facts dt{font-weight:700}
.facts dd{margin:0}

/* poster: real image, or a typographic stand-in until one arrives */
.poster{aspect-ratio:600/903;background:var(--floor);color:var(--page);position:relative;overflow:hidden;box-shadow:0 1px 0 rgba(29,36,51,.08)}
.poster img{width:100%;height:100%;object-fit:cover}
.poster.stand-in{border-left:9px solid var(--yellow);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(1.25rem,3vw,2rem)}
.poster.stand-in strong{font-weight:800;font-stretch:75%;font-size:clamp(2.5rem,7vw,4.5rem);line-height:.9}
.poster.stand-in span{margin-top:.75rem;opacity:.85}

.contact a.big{font-weight:700;font-size:clamp(1.5rem,4vw,2.5rem);text-decoration:none;border-bottom:6px solid var(--pink);line-height:1.2;word-break:break-word}
.contact a.big:hover{border-bottom-color:var(--ink)}

/* ---------- Past productions ---------- */
.production{padding:clamp(3rem,7vw,5.5rem) 0;border-top:1px solid var(--rule)}
.production:first-of-type{border-top:0}
.production header{display:grid;gap:2rem;align-items:start}
@media (min-width:860px){.production header{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:4rem}}
.production .year{font-weight:700;font-size:1rem;display:inline-block;padding:.2rem .6rem;background:var(--yellow);color:var(--ink);margin-bottom:1rem}
.production h2{font-size:clamp(2.25rem,5vw,3.75rem);line-height:.95;margin-bottom:.5rem}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.75rem;margin-top:2.5rem;padding:0;list-style:none}
.gallery button{all:unset;cursor:zoom-in;display:block;aspect-ratio:3/2;overflow:hidden;background:var(--rule)}
.gallery button:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.gallery button:hover img{transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){.gallery img{transition:none}}

/* lightbox */
dialog.lightbox{border:0;padding:0;background:transparent;max-width:min(92vw,80rem);max-height:92vh;overflow:visible}
dialog.lightbox::backdrop{background:rgba(29,36,51,.92)}
dialog.lightbox img{max-height:82vh;width:auto;margin:0 auto}
dialog.lightbox figcaption{color:var(--page);font-size:.95rem;margin-top:.75rem;text-align:center}
dialog.lightbox .lb-btn{position:fixed;background:var(--page);color:var(--ink);border:0;font:inherit;font-weight:700;font-size:1rem;padding:.6rem .9rem;border-radius:2px;cursor:pointer}
dialog.lightbox .lb-close{top:1rem;right:1rem}
dialog.lightbox .lb-prev{left:1rem;top:50%;translate:0 -50%}
dialog.lightbox .lb-next{right:1rem;top:50%;translate:0 -50%}

footer{background:var(--floor);color:#C9CDD5;font-size:.95rem;padding:2rem 0}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem}
@media (max-width:520px){.dates .long{display:none}.dates a{padding:.9rem 1rem .9rem .8rem;column-gap:.6rem}}