@font-face{font-family:"Special Elite";src:url("/fonts/SpecialElite-Regular.woff2") format("woff2");font-weight:400;font-display:swap}

/* Design tokens: see DESIGN.md ("warm dark stage"). Use the names, never raw values. */
:root{
  --tt-ink-950:#1A1917; --tt-ink-900:#24231F; --tt-ink-800:#33322E; --tt-ink-700:#45433D;
  --tt-stone-400:#A8A69E; --tt-stone-200:#D4D2CA; --tt-paper:#F2F1EC;
  --tt-yellow:#F2C230; --tt-yellow-hover:#F7D35E; --tt-pink:#E8437A;
  --tt-error:#F06A5B; --tt-success:#7BC47F;

  --tt-font:"Bricolage Grotesque",system-ui,sans-serif;
  --tt-font-mark:"Special Elite","Courier New",monospace;
  --tt-text-display:clamp(3rem,7vw,5.5rem); --tt-text-h1:clamp(2.5rem,5vw,3.5rem);
  --tt-text-h2:clamp(1.75rem,3.5vw,2.5rem); --tt-text-h3:1.5rem;
  --tt-text-lead:1.375rem; --tt-text-body:1.125rem; --tt-text-small:.9375rem; --tt-text-label:.8125rem;
  --tt-measure:65ch;

  --tt-space-1:4px; --tt-space-2:8px; --tt-space-3:12px; --tt-space-4:16px; --tt-space-5:24px;
  --tt-space-6:32px; --tt-space-7:48px; --tt-space-8:64px; --tt-space-9:96px; --tt-space-10:128px;
  --tt-section:clamp(64px,8vw,96px); --tt-content:1200px; --tt-gutter:clamp(20px,4vw,48px);

  --tt-radius-sm:8px; --tt-radius-md:16px; --tt-radius-pill:999px;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--tt-space-5)}
body{margin:0;background:var(--tt-ink-900);color:var(--tt-paper);font-family:var(--tt-font);font-optical-sizing:auto;font-size:var(--tt-text-body);line-height:1.6}
img{max-width:100%;display:block}
h1,h2,h3{font-weight:700;font-stretch:85%;letter-spacing:-.01em;margin:0}
h2{font-size:var(--tt-text-h2);line-height:1.1}
h3{font-size:var(--tt-text-h3);line-height:1.2}
p{margin:0 0 1em;max-width:var(--tt-measure)}
a{color:inherit;text-decoration-color:var(--tt-yellow);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--tt-yellow)}
:focus-visible{outline:3px solid var(--tt-yellow);outline-offset:3px}
.wrap{max-width:calc(var(--tt-content) + 2 * var(--tt-gutter));margin:0 auto;padding:0 var(--tt-gutter)}
.label{display:inline-block;font-size:var(--tt-text-label);font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.3}
.label.pill{background:var(--tt-yellow);color:var(--tt-ink-950);padding:6px 12px;border-radius:var(--tt-radius-pill)}
.lead{font-size:var(--tt-text-lead);line-height:1.45;font-weight:500}
.muted{color:var(--tt-stone-400)}
.small{font-size:var(--tt-text-small);line-height:1.5}
section{padding:var(--tt-section) 0}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--tt-space-5);margin-bottom:var(--tt-space-6)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 var(--tt-space-5);border-radius:var(--tt-radius-pill);font:inherit;font-size:var(--tt-text-small);font-weight:700;text-decoration:none;border:2px solid transparent;cursor:pointer;white-space:nowrap}
.btn-primary{background:var(--tt-yellow);color:var(--tt-ink-950)}
.btn-primary:hover{background:var(--tt-yellow-hover);color:var(--tt-ink-950)}
.btn-secondary{border-color:var(--tt-paper);color:var(--tt-paper)}
.btn-secondary:hover{background:var(--tt-paper);color:var(--tt-ink-950)}
/* on light or key-art backgrounds */
.btn-dark{background:var(--tt-ink-950);color:var(--tt-paper)}
.btn-dark:hover{background:var(--tt-ink-800);color:var(--tt-paper)}
.btn-outline-dark{border-color:var(--tt-ink-950);color:var(--tt-ink-950)}
.btn-outline-dark:hover{background:var(--tt-ink-950);color:var(--tt-paper)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.4;pointer-events:none}
.on-light :focus-visible,.keyart :focus-visible{outline-color:var(--tt-ink-950)}
.actions{display:flex;flex-wrap:wrap;gap:var(--tt-space-3)}

/* ---------- Header ---------- */
.site-header{position:absolute;top:0;left:0;right:0;z-index:3}
.site-header.solid{position:static;background:var(--tt-ink-950)}
.site-header .wrap{display:flex;justify-content:space-between;align-items:center;gap:var(--tt-space-4);padding-top:var(--tt-space-5);padding-bottom:var(--tt-space-5)}
.wordmark{font-family:var(--tt-font-mark);font-size:1.5rem;line-height:1;text-decoration:none;color:inherit}
.wordmark:hover{color:inherit}
.site-header ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--tt-space-5);font-size:var(--tt-text-small);font-weight:500}
.site-header ul a{text-decoration:none}
.site-header ul a:hover,.site-header ul a[aria-current="page"]{color:inherit;text-decoration:underline;text-decoration-color:var(--tt-yellow)}
.keyart .site-header ul a:hover{text-decoration-color:var(--tt-ink-950)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.menu-toggle{display:none;background:none;border:0;color:inherit;width:44px;height:44px;margin-right:-10px;cursor:pointer;border-radius:var(--tt-radius-sm)}
.menu-toggle .bars,.menu-toggle .bars::before,.menu-toggle .bars::after{display:block;width:22px;height:2px;background:currentColor;margin:0 auto;position:relative;transition:transform .2s ease,background .2s ease}
.menu-toggle .bars::before,.menu-toggle .bars::after{content:"";position:absolute;left:0}
.menu-toggle .bars::before{top:-7px}.menu-toggle .bars::after{top:7px}
.menu-toggle[aria-expanded="true"] .bars{background:transparent}
.menu-toggle[aria-expanded="true"] .bars::before{transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .bars::after{transform:translateY(-7px) rotate(-45deg)}
@media (max-width:600px){
  .site-header .wrap{position:relative}
  .menu-toggle{display:block;position:relative;z-index:2}
  .site-header nav{display:none;position:absolute;top:100%;left:var(--tt-gutter);right:var(--tt-gutter);background:var(--tt-ink-950);color:var(--tt-paper);border-radius:var(--tt-radius-md);padding:var(--tt-space-3) var(--tt-space-5)}
  .site-header nav.open{display:block}
  .site-header ul{flex-direction:column;gap:0;font-size:1.25rem}
  .site-header ul li + li{border-top:1px solid var(--tt-ink-700)}
  .site-header ul a{display:block;padding:var(--tt-space-4) 0}
  .keyart .site-header nav :focus-visible{outline-color:var(--tt-yellow)}
}
@media (prefers-reduced-motion:reduce){.menu-toggle .bars,.menu-toggle .bars::before,.menu-toggle .bars::after{transition:none}}

/* ---------- Home: current production (key art hero) ---------- */
.feature-hero{background:var(--keyart,var(--tt-ink-950));color:var(--tt-ink-950);position:relative;padding:0}
.feature-hero > .wrap{display:grid;gap:var(--tt-space-7);align-items:center;padding-top:calc(var(--tt-space-10) + var(--tt-space-4));padding-bottom:var(--tt-space-8)}
@media (min-width:820px){.feature-hero > .wrap{grid-template-columns:minmax(0,1fr) minmax(0,26rem);padding-top:var(--tt-space-10);padding-bottom:var(--tt-space-9);min-height:min(100vh,56rem)}}
.feature-hero h1{font-size:var(--tt-text-display);line-height:.95;margin:var(--tt-space-4) 0 var(--tt-space-3)}
.feature-hero .by{font-size:var(--tt-text-lead);font-weight:500;margin-bottom:var(--tt-space-5)}
.feature-hero .when{font-size:var(--tt-text-body);margin-bottom:var(--tt-space-6)}
.feature-hero .when strong{display:block}
.feature-hero .label.pill{background:var(--tt-ink-950);color:var(--tt-paper)}
.feature-hero .art img{width:100%;height:auto;border-radius:var(--tt-radius-sm)}
@media (max-width:819px){.feature-hero .art{max-width:20rem}}

.intro{padding:var(--tt-section) 0 0}
.intro p{font-size:var(--tt-text-h2);line-height:1.2;font-weight:700;font-stretch:85%;max-width:24ch;margin:0}

/* ---------- Production cards ---------- */
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--tt-space-5)}
@media (min-width:900px){.cards{grid-template-columns:repeat(var(--cols,4),minmax(0,1fr))}}
@media (max-width:600px){.cards{gap:var(--tt-space-3)}.card-body{padding:var(--tt-space-4)}.card h3{font-size:1.15rem}.card .btn{min-height:44px;padding:0 var(--tt-space-4)}}
.card{display:flex;flex-direction:column;border-radius:var(--tt-radius-md);overflow:hidden;background:var(--tt-stone-200);color:var(--tt-ink-950);height:100%;position:relative}
.card-media{aspect-ratio:848/1200;background:var(--tt-ink-800);position:relative}
.card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card-media .label.pill{position:absolute;top:var(--tt-space-4);left:var(--tt-space-4)}
.card-body{padding:var(--tt-space-5);display:flex;flex-direction:column;gap:var(--tt-space-1);flex:1}
.card h3 a{text-decoration:none;color:inherit}
.card h3 a::after{content:"";position:absolute;inset:0}
.card h3 a:focus-visible{outline:none}
.card:has(h3 a:focus-visible){outline:3px solid var(--tt-yellow);outline-offset:3px}
.card .meta{color:var(--tt-ink-700);font-size:var(--tt-text-small)}
.card .actions{margin-top:auto;padding-top:var(--tt-space-4);position:relative;z-index:1}
.card:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}

/* ---------- Footer ---------- */
.site-footer{background:var(--tt-stone-200);color:var(--tt-ink-950);border-radius:var(--tt-radius-md) var(--tt-radius-md) 0 0;margin-top:var(--tt-section);padding:var(--tt-space-8) 0 var(--tt-space-6)}
.site-footer h2{margin-bottom:var(--tt-space-4)}
.site-footer .email{display:inline-block;font-size:clamp(1.5rem,3vw,2.25rem);font-weight:500;line-height:1.2;letter-spacing:-.01em;text-decoration-thickness:1px;text-underline-offset:.22em;margin:var(--tt-space-3) 0 var(--tt-space-6);overflow-wrap:anywhere}
.site-footer .email:hover{color:var(--tt-ink-700)}
.site-footer a:hover{color:var(--tt-ink-700)}
.site-footer a{text-decoration-color:var(--tt-ink-950)}
.footer-base{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--tt-space-4);border-top:1px solid rgba(26,25,23,.2);padding-top:var(--tt-space-5);margin-top:var(--tt-space-7);font-size:var(--tt-text-small)}

/* ---------- Production page ---------- */
.show-hero{position:relative;height:75vh;min-height:520px;max-height:860px;background:var(--keyart,var(--tt-ink-950));overflow:hidden}
.show-hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.show-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(26,25,23,.7),rgba(26,25,23,0) 25%,rgba(26,25,23,0) 55%,var(--tt-ink-900))}
.show-hero.keyart .bg{object-fit:contain;padding:calc(var(--tt-space-10) + var(--tt-space-4)) var(--tt-gutter) var(--tt-space-10)}
.show-hero.keyart::after{background:linear-gradient(to bottom,rgba(0,0,0,0) 70%,var(--tt-ink-900))}
.show-hero.keyart{color:var(--tt-ink-950)}

.title-panel{position:relative;z-index:2;margin-top:calc(-1 * var(--tt-space-9));background:var(--tt-ink-800);border-radius:var(--tt-radius-md);padding:var(--tt-space-6);display:grid;gap:var(--tt-space-5)}
@media (min-width:820px){.title-panel{grid-template-columns:minmax(0,1fr) auto;align-items:end;padding:var(--tt-space-7)}}
.title-panel h1{font-size:var(--tt-text-display);line-height:.95;margin:var(--tt-space-3) 0}
.title-panel .by{font-size:var(--tt-text-lead);font-weight:500;margin:0}
.title-panel .when{margin:0 0 var(--tt-space-4)}
.title-panel .when strong{display:block;font-size:var(--tt-text-lead);line-height:1.3}
.title-panel .actions{flex-direction:column;align-items:stretch}
@media (min-width:820px){.title-panel .side{min-width:19rem}}

.about{display:grid;gap:var(--tt-space-7)}
@media (min-width:820px){.about{grid-template-columns:minmax(0,1fr) 15rem;gap:var(--tt-space-9);align-items:start}}
.about h2{margin-bottom:var(--tt-space-5)}
.about .poster{border-radius:var(--tt-radius-sm);max-width:15rem;width:100%;height:auto}
.placeholder{color:var(--tt-stone-400);font-style:italic}

.info{list-style:none;margin:var(--tt-space-7) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:var(--tt-space-3)}
.info li{background:var(--tt-ink-800);border-radius:var(--tt-radius-sm);padding:var(--tt-space-4)}
.info .label{display:block;color:var(--tt-stone-400);margin-bottom:var(--tt-space-1)}
.info .warn .label{color:var(--tt-pink)}

.credits{display:grid;gap:var(--tt-space-7)}
@media (min-width:820px){.credits{grid-template-columns:1fr 1fr;gap:var(--tt-space-9)}}
.credits h3{margin-bottom:var(--tt-space-4)}
.credits dl{margin:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
.credits dt,.credits dd{margin:0;padding:var(--tt-space-3) 0;border-top:1px solid var(--tt-ink-700)}
.credits dt{color:var(--tt-stone-400)}
.credits dd{font-weight:500}
.credits ul{list-style:none;margin:0;padding:0}
.credits li{padding:var(--tt-space-3) 0;border-top:1px solid var(--tt-ink-700);font-weight:500}
.thanks{margin-top:var(--tt-space-7);color:var(--tt-stone-400);font-size:var(--tt-text-small);max-width:none}
.thanks strong{color:var(--tt-paper)}

.gallery{list-style:none;margin:0 0 var(--tt-space-4);padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--tt-space-3)}
@media (max-width:700px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gallery button{all:unset;cursor:zoom-in;display:block;aspect-ratio:3/2;border-radius:var(--tt-radius-md);overflow:hidden;background:var(--tt-ink-800)}
.gallery button:focus-visible{outline:3px solid var(--tt-yellow);outline-offset:3px}
.gallery img{width:100%;height:100%;object-fit:cover;transition:opacity .2s ease}
.gallery button:hover img{opacity:.85}
@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(26,25,23,.95)}
dialog.lightbox img{max-height:82vh;width:auto;margin:0 auto;border-radius:var(--tt-radius-sm)}
dialog.lightbox figcaption{color:var(--tt-paper);font-size:var(--tt-text-small);margin-top:var(--tt-space-3);text-align:center}
dialog.lightbox .lb-btn{position:fixed;background:var(--tt-paper);color:var(--tt-ink-950);border:0;font:inherit;font-weight:700;font-size:1rem;min-width:44px;min-height:44px;padding:0 var(--tt-space-4);border-radius:var(--tt-radius-pill);cursor:pointer}
dialog.lightbox .lb-close{top:var(--tt-space-4);right:var(--tt-space-4)}
dialog.lightbox .lb-prev{left:var(--tt-space-4);top:50%;translate:0 -50%}
dialog.lightbox .lb-next{right:var(--tt-space-4);top:50%;translate:0 -50%}

/* ---------- Tickets page ---------- */
.page-title{font-size:var(--tt-text-h1);line-height:1;margin:var(--tt-space-3) 0 var(--tt-space-5)}
.ticketshop{background:#fff;color:var(--tt-ink-950);border-radius:var(--tt-radius-md);padding:var(--tt-space-5);margin:var(--tt-space-6) 0 var(--tt-space-4);min-height:20rem}
.ticketshop a{text-decoration-color:var(--tt-ink-950)}