/* ── The 2026 redesign: the site's one stylesheet ──────────────────────────
   Paper, black and the hall's orange, with the green of the hall section.
   Karantina for the display lines, Assistant for reading, IBM Plex Mono for
   the small labels. The pages write their look inline, as the design does;
   what is here is what cannot be inline: states, breakpoints and keyframes.
   Every page of the coded site loads this file, and the WordPress plugin
   loads the same file, so a rule changed here changes both sites. */
html,body{margin:0;padding:0;background:#F9F5ED;}
body{font-family:Assistant,system-ui,sans-serif;color:#1A1A1A;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
a:hover{color:#B45F14;}
button,input,select,textarea{font:inherit;color:inherit;}
select:focus{outline:none;}
:focus-visible{outline:2px solid #E58D33;outline-offset:3px;}
::selection{background:#E58D33;color:#1A1A1A;}
@keyframes slowzoom{from{transform:scale(1.02)}to{transform:scale(1.1)}}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-10px,0)}}
@keyframes enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(50%)}}
@keyframes tickLtr{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes waPulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(2.2);opacity:0}}
@keyframes arrowUp{0%,100%{transform:translateY(1.5px)}50%{transform:translateY(-2px)}}
@keyframes tagBlink{0%,100%{opacity:1}50%{opacity:.38}}
@keyframes spin{to{transform:rotate(360deg)}}
/* The "in beta" strip above the frame: tighter on a phone (its type is left free for the accessibility toolbar). */
@media (max-width:720px){.r-beta{padding:6px 12px!important;gap:3px 8px!important;}}
@keyframes onlinePulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.6)}70%{box-shadow:0 0 0 8px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);}
[data-reveal].in{opacity:1;transform:none;}
#quick,#week,#shows,#subs,#house,#promos,#visit{scroll-margin-top:120px;}

/* ── Strip and header ── */
.r-soc-wa{color:#25D366!important;}
.r-soc-fb{color:#0866FF!important;}
.r-soc-waze{color:#33CCFF!important;}
.r-soc-ig rect,.r-soc-ig circle{stroke:url(#igBrand);}
.r-soc-ig circle[fill]{fill:url(#igBrand);}
.r-soc:hover{filter:brightness(1.18) saturate(1.1);}
.r-navlink,.r-navlink:link,.r-navlink:visited{color:#F4EFE4;}
.r-navlink:hover,.r-navlink:focus-visible{color:#E58D33;}
.r-subspill,.r-subspill:link,.r-subspill:visited,.r-subspill:hover{color:#1A1A1A;}
/* The header's links keep to one row. A link the row has no room for, in a
   language whose names are long and a width that is narrow, wraps onto a
   second row, which is clipped; the script takes it out of the tab order, and
   the menu has every one of them. A row is one link: 10px above and below a
   19px line. */
.r-desknav{flex-wrap:wrap!important;height:39px!important;overflow:hidden!important;overflow:clip!important;overflow-clip-margin:4px;}
@media not all and (max-width:1120px){
  .r-stripphone,.r-strippersonal{display:none!important;}
  .r-strippromo{position:absolute;left:50%;transform:translateX(-50%);}
}
@media (max-width:1120px){
  .r-desknav{display:none!important;}
}
@media (max-width:900px){
  .r-strippromo{display:none!important;}
}
@media (max-width:600px){
  .r-striplinks{display:none!important;}
  .r-subspill{display:none!important;}
  .r-facts{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}

/* ── Hero: a layer per show, revealed top to bottom over the last ── */
.r-herolayer{position:absolute;inset:0;opacity:0;clip-path:inset(0 0 100% 0);transition:clip-path 1.05s cubic-bezier(.66,0,.2,1),opacity .8s ease;}
.r-herolayer[data-on="1"]{opacity:1;clip-path:inset(0 0 0 0);}
.r-herocap{display:none;flex-direction:column;gap:clamp(9px,1.1vw,15px);}
.r-herocap[data-on="1"]{display:flex;}
.r-herocap[data-on="1"] .r-herometa{animation:enter .5s ease both;}
.r-herocap[data-on="1"] .r-herotitle{animation:enter .6s .06s ease both;}
.r-herocap[data-on="1"] .r-herocta{animation:enter .6s .14s ease both;}
.r-herocta,.r-herocta:link,.r-herocta:visited{color:#1A1A1A;}
.r-herocta:hover{color:#1A1A1A;background:#F9F5ED!important;gap:18px!important;}
.r-herodot{display:block;width:14px;height:3px;background:rgba(249,245,237,.42);transition:width .4s ease,background .4s ease;cursor:pointer;}
.r-herodot[data-on="1"]{width:38px;background:#E58D33;}
.r-heroarrow,.r-heroarrow:link,.r-heroarrow:visited{color:#F9F5ED;}
.r-heroarrow:hover{color:#E58D33;}
/* A screen taller than it is wide — a phone, a tablet held upright — would
   cover the hero's height with a 16:9 film and show a third of it. There the
   stage takes the film's own shape, so every film is seen whole, unzoomed,
   with only a breath of shade where it meets the caption; the caption comes
   under it. The captions share one cell, so the hero is as tall as its
   tallest caption and the page under it never moves when the show changes. */
@media (max-aspect-ratio:6/5){
  .r-hero{height:auto!important;}
  .r-herostage{position:relative!important;inset:auto!important;width:100%!important;aspect-ratio:16/9;}
  .r-herozoom{animation:none!important;}
  .r-heroshade{background:linear-gradient(to top,rgba(18,16,13,.55) 0%,rgba(18,16,13,0) 24%)!important;}
  .r-herobar{position:relative!important;inset:auto!important;padding:18px clamp(14px,3.4vw,56px) 24px!important;}
  .r-herocaps{display:grid!important;}
  .r-herocap{display:flex!important;grid-area:1/1;visibility:hidden;}
  .r-herocap[data-on="1"]{visibility:visible;}
}
/* A phone plays the upright cut (hero-reel.js), framed shot by shot on the
   actors, and the stage takes that cut's shape. */
@media (max-aspect-ratio:6/5) and (max-width:599px){
  .r-herostage{aspect-ratio:1176/1280;}
}

/* ── The announcement band: the logo's arc, colour after colour ── */
.r-tickitem,.r-tickitem:link,.r-tickitem:visited,.r-tickitem:hover,.r-tickitem:focus,.r-tickitem:active{color:#F9F5ED;}
.r-tickitem:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;}
.r-tickitem:focus-visible{outline:2px solid #F9F5ED;outline-offset:2px;}
.r-tickmove:hover,.r-tickmove:focus-within{animation-play-state:paused;}

/* ── Quick order ── */
.r-quick>*{min-width:0;}
.r-quick select{width:100%;max-width:100%;text-overflow:ellipsis;}
@media (max-width:1120px){
  .r-quick{grid-template-columns:1fr 1fr!important;}
  .r-quickhead{grid-column:1 / -1;}
  .r-qbuy{grid-column:1 / -1;}
}
@media (max-width:600px){
  .r-quick{grid-template-columns:1fr!important;}
  .r-quick>div{border-inline-start:none!important;border-top:1px solid #1A1A1A;}
}

/* ── This week: the poster rail ── */
.r-rail{position:relative;touch-action:pan-y;cursor:grab;overflow:hidden;user-select:none;-webkit-user-select:none;}
.r-rail.is-dragging{cursor:grabbing;}
.r-railhost{position:absolute;inset:0;}
.r-railslot{position:absolute;top:50%;left:50%;display:block;will-change:transform;}
.r-railslot,.r-railslot:link,.r-railslot:visited,.r-railslot:hover{color:inherit;}
.r-wcardin{background:#F9F5ED;color:#1A1A1A;}
.r-wcard[data-theme="1"] .r-wcardin{background:#1A1A1A;color:#F4EFE4;}
.r-wcard[data-theme="2"] .r-wcardin{background:#476D64;color:#F4EFE4;}
.r-wcard[data-theme="3"] .r-wcardin{background:#E9F4EA;color:#1A1A1A;}
.r-winfo{border-top:2px solid #E58D33;}
.r-wcard[data-theme="2"] .r-winfo{border-top-color:#E9F4EA;}
.r-wcard[data-theme="3"] .r-winfo{border-top-color:#476D64;}
.r-wcat{background:#E58D33;color:#1A1A1A;}
.r-wcard[data-theme="1"] .r-wcat{background:#E9F4EA;color:#1A1A1A;}
.r-wcard[data-theme="3"] .r-wcat{background:#476D64;color:#F4EFE4;}
/* A show without a category has no tag (the runtime wraps each hole in a span). */
.r-wcat:empty,.r-cattag:empty,.r-wcat:has(>.sc-interp:empty),.r-cattag:has(>.sc-interp:empty){display:none;}
.r-enter{animation:enter .5s ease both;}
.r-railbtn,.r-railbtn:link,.r-railbtn:visited{color:inherit;}
.r-railbtn:hover{background:#E58D33;border-color:#E58D33!important;color:#1A1A1A;}
.r-actcta,.r-actcta:link,.r-actcta:visited,.r-actcta:hover{color:#1A1A1A;}
.r-actcta:hover{gap:18px!important;}

/* ── The schedule: category tabs and the board ── */
.r-cattab{cursor:pointer;}
.r-cattab:hover{color:#1A1A1A!important;}
.r-showgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(30px,3.4vw,48px) clamp(18px,2vw,30px);}
@media (max-width:1120px){.r-showgrid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:900px){.r-showgrid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:520px){.r-showgrid{gap:26px 12px;}}
.r-poster img{transition:transform .7s ease;}
.r-card:hover .r-poster img{transform:scale(1.05);}
.r-cardname,.r-cardname:link,.r-cardname:visited{color:#1A1A1A;}
.r-cardname:hover{color:#B45F14;}
.r-tagblink{animation:tagBlink 1.5s ease-in-out infinite;}
.r-play,.r-play:link,.r-play:visited{color:#1A1A1A;}
.r-play:hover{background:#1A1A1A;color:#F9F5ED;}

/* ── Sections on dark grounds keep their links light ── */
.r-dark a,.r-dark a:link,.r-dark a:visited{color:#F4EFE4;}
.r-dark a:hover{color:#E58D33;}
.r-promorow:hover{background:rgba(244,239,228,.05);padding-inline-start:14px!important;}
.r-visitcta:hover{gap:15px!important;}

@media (max-width:900px){
  .r-newsgrid{grid-template-columns:1fr!important;}
  .r-visitgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media (max-width:560px){
  .r-visitgrid{grid-template-columns:minmax(0,1fr)!important;}
}

/* ── Floating buttons and the sticky subscription bar (phones) ── */
.r-scta{position:fixed;inset-inline:0;bottom:0;z-index:145;display:none;box-sizing:border-box;padding:10px clamp(10px,3vw,16px) calc(10px + env(safe-area-inset-bottom,0px));background:rgba(18,16,13,.94);backdrop-filter:blur(14px);border-top:1px solid rgba(244,239,228,.16);animation:popIn .4s ease both;}
@media (max-width:900px){
  .r-scta{display:block;}
  .r-root.scta-on{--float-lift:calc(74px + env(safe-area-inset-bottom,0px));}
  .r-root.scta-on .r-footpad{height:calc(84px + env(safe-area-inset-bottom,0px))!important;background:#1A1A1A;}
}

/* The footer's credit line, on a narrow screen, keeps between the floating
   buttons in the bottom corners, which would otherwise sit on its words at
   the very end of the page. */
@media (max-width:720px){
  [data-credit]{padding-inline:calc(clamp(14px,3vw,26px) + clamp(52px,7vw,60px) + 10px)!important;}
}
/* Its sentence breaks into even lines, never one word left alone (WordPress
   draws the words as a heading inside a container). */
[data-credit] > span:first-child,
[data-credit] > :first-child .elementor-heading-title{text-wrap:balance;}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important;}
  [data-reveal]{opacity:1;transform:none;}
}

/* ── The programme rows (the events board) ── */
.r-progrow:hover{background:rgba(244,239,228,.05);padding-inline-start:14px!important;}
.r-progrow:hover .r-progbuy{background:#F9F5ED!important;}
@media (max-width:900px){
  .r-progrow{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;align-items:baseline!important;gap:6px 14px!important;}
  .r-prognum{display:none;}
  .r-progname{flex:1 1 100%!important;order:-1;}
  .r-progbuy{margin-inline-start:auto!important;padding:8px 14px!important;font-size:13px!important;}
}

/* ── The show page ── */
.r-root.buybar-on{--float-lift:66px;}
/* On a phone the poster leads the page across the whole column, as the client
   asked — never taller than the screen under the header, so a phone held
   sideways still sees all of it, centred. */
@media (max-width:700px){
  .r-showhead{grid-template-columns:minmax(0,1fr)!important;}
  .r-showposter{order:-1;width:min(100%,calc((100svh - 120px) * .75));justify-self:center;}
}

/* ── The booklet ──
   Drawn by assets/js/booklet-flip.js from the list of pages in the markup:
   the list is the source, the book on screen is its copy. */
#bookbox .bk-pages{display:none;}
#bookbox .bk-page{position:relative;overflow:hidden;background:#FFFFFF;}
#bookbox .stf__item{position:absolute;transform-style:flat;}
#bookbox .bk-host{position:absolute;top:18px;bottom:18px;left:66px;right:66px;transition:transform .6s ease;}
#bookbox .bk-spot{position:absolute;display:block;border-radius:0;transition:background .25s ease,box-shadow .25s ease;}
#bookbox .bk-spot:hover,#bookbox .bk-spot:focus-visible{background:rgba(229,141,51,.16);box-shadow:inset 0 0 0 2px rgba(229,141,51,.95);outline:none;}
#bookbox .bk-spot::after{content:attr(aria-label);position:absolute;left:50%;bottom:8px;width:max-content;max-width:calc(100% - 16px);transform:translate(-50%,6px);opacity:0;pointer-events:none;background:#E58D33;color:#1A1A1A;font-size:clamp(11.5px,1.4vw,13.5px);font-weight:600;line-height:1.35;text-align:center;padding:7px 14px;border-radius:0;box-shadow:0 10px 24px -10px rgba(0,0,0,.6);transition:opacity .25s ease,transform .25s ease;}
#bookbox .bk-spot:hover::after,#bookbox .bk-spot:focus-visible::after{opacity:1;transform:translate(-50%,0);}
#bookbox .bk-host[data-dir="rtl"] .bk-spot::after{direction:rtl;}
#bookbox .bk-nav{position:absolute;top:50%;z-index:5;width:44px;height:44px;margin-top:-22px;padding:0;border-radius:50%;border:1px solid rgba(244,239,228,.25);background:rgba(18,16,13,.78);color:#F4EFE4;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .3s ease,opacity .3s ease;}
#bookbox .bk-nav[data-side="left"]{left:12px;}
#bookbox .bk-nav[data-side="right"]{right:12px;}
#bookbox .bk-nav:hover{background:#E58D33;color:#1A1A1A;}
#bookbox .bk-nav:disabled{opacity:.25;cursor:default;background:rgba(18,16,13,.78);}
@media (max-width:600px){
  #bookbox .bk-host{top:10px;bottom:10px;left:10px;right:10px;}
  #bookbox .bk-nav{width:36px;height:36px;margin-top:-18px;}
  #bookbox .bk-nav[data-side="left"]{left:4px;}
  #bookbox .bk-nav[data-side="right"]{right:4px;}
}
@media (max-width:760px){
  .b-bar{flex-wrap:wrap;justify-content:center;row-gap:10px;}
}
@media (max-width:900px){
  .b-stage{flex-direction:column;gap:12px;}
  .b-toc{width:auto!important;height:auto!important;}
  #bookbox{flex:0 0 auto!important;}
  .b-toclist{display:none!important;}
  .b-tocsel{display:block!important;}
}

/* ── The information pages ── */
input:focus,textarea:focus{outline:none;border-color:#1A1A1A!important;}
@media (max-width:1000px){
  .r-contact{grid-template-columns:1fr!important;}
  .r-accgrid{grid-template-columns:1fr!important;}
  .r-accbox{position:static!important;}
}
@media (max-width:640px){
  .r-trow{grid-template-columns:1fr!important;gap:8px!important;}
  .r-arow{grid-template-columns:1fr!important;gap:8px!important;}
}

/* ── The personal area ──
   The code is spaced out like a ticket number; the words asking for it are not. */
.r-acct-code::placeholder{letter-spacing:normal;font-family:Assistant,system-ui,sans-serif;font-size:16px;}
/* Once the two columns stack, the sign-in box comes before the words about the area. */
@media (max-width:1000px){
  .r-acctperks{order:2;}
}
/* A ticket row on a phone: the poster and the words side by side, the two
   buttons under them, sharing the width. */
@media (max-width:640px){
  .r-krow{grid-template-columns:72px 1fr!important;}
  .r-kact{grid-column:1/-1;flex-direction:row!important;}
  .r-kact > *{flex:1 1 0;}
}

/* ── Conferences and events ──
   The text and the sticky contact card side by side on wide screens, stacked
   on narrow ones; the numbers go four across, then two. */
.c-stats{display:grid;grid-template-columns:repeat(4,1fr);}
.c-stats>div{border-inline-end:1px solid rgba(26,26,26,.25);}
.c-stats>div:last-child{border-inline-end:none;}
.c-body{display:grid;grid-template-columns:7fr 5fr;gap:clamp(32px,6vw,88px);align-items:start;}
.c-card{position:sticky;top:140px;}
.c-services{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(26,26,26,.25);border:1px solid rgba(26,26,26,.25);}
.c-legend{display:flex;flex-wrap:wrap;gap:12px 28px;}
.c-mapwrap{overflow:hidden;}
@media (max-width:1000px){
  .c-body{grid-template-columns:1fr;}
  .c-card{position:static;}
  .c-services{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:760px){
  .c-stats{grid-template-columns:1fr 1fr;}
  .c-stats>div:nth-child(2){border-inline-end:none;}
  .c-stats>div:nth-child(-n+2){border-bottom:1px solid rgba(26,26,26,.25);}
  .c-services{grid-template-columns:1fr;}
}

/* Words for search engines and screen readers alone: the home page's h1,
   which the hero's films say to the eye. */
.r-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important;}