@font-face{font-family:"Bowlby";src:url("/fonts/bowlby.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Newsreader";src:url("/fonts/newsreader.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Newsreader";src:url("/fonts/newsreaderbold.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow";src:url("/fonts/barlow.ttf") format("truetype");font-weight:700;font-display:swap}

:root {
  --black:#070908;--ivory:#eee8d7;--paper:#d8d0bb;--burgundy:#72131d;
  --brass:#c0a16b;--fog:#a9afaa;--forest:#111d18;
  --display:"Bowlby",Georgia,serif;--body:"Newsreader",Georgia,serif;
  --utility:"Barlow","Arial Narrow",sans-serif;color-scheme:dark;font-synthesis:none;
  /* Height of the film-frame bars. The hero reserves this much at its bottom
     edge plus room for the date's ink, so the credits row can never slide
     under the bottom bar. Anything that changes one must change the other,
     which is why it is a variable rather than 8vh written twice. */
  --letterbox:8vh
}
*{box-sizing:border-box}
html{background:var(--black);scroll-behavior:smooth;scrollbar-color:var(--burgundy) var(--black);scrollbar-width:thin}
body{margin:0;background:var(--black);color:var(--ivory);font-family:var(--body);font-size:18px;line-height:1.5;overflow-x:hidden}
body::selection,body *::selection{background:var(--brass);color:var(--black)}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
button,a{-webkit-tap-highlight-color:transparent}
button{color:inherit}
:focus-visible{outline:3px solid var(--brass);outline-offset:5px}
.skip{background:var(--ivory);color:var(--black);font:700 .78rem/1 var(--utility);left:1rem;padding:.8rem 1rem;position:fixed;text-transform:uppercase;top:-5rem;z-index:100}
.skip:focus{top:1rem}

.header{align-items:center;border-bottom:1px solid rgb(238 232 215 / 18%);display:grid;grid-template-columns:minmax(145px,205px) 1fr auto;left:0;min-height:82px;padding:.7rem clamp(1.1rem,4vw,4.5rem);position:absolute;right:0;top:0;z-index:30}
.brand,footer img{display:block;width:100%}
.brand img,footer img{display:block;height:auto;width:100%}
.header nav{display:flex;gap:clamp(1.3rem,3vw,3rem);justify-content:center}
.header nav a,.menu{color:var(--ivory);font:700 .75rem/1 var(--utility);letter-spacing:.16em;text-decoration:none;text-transform:uppercase}
.header nav a{opacity:.8;transition:opacity 180ms ease-out}
.header nav a:hover{opacity:1}
.menu{background:transparent;border:1px solid rgb(238 232 215 / 42%);display:none;padding:.72rem .9rem}
.ticket{align-items:center;background:var(--burgundy);border:1px solid #c3565e;color:#fff9e8;display:inline-flex;font:700 .82rem/1 var(--utility);justify-content:center;letter-spacing:.13em;min-height:52px;padding:1rem 1.35rem .9rem;text-decoration:none;text-transform:uppercase;transition:background 180ms ease-out,box-shadow 220ms ease-out,transform 220ms ease-out}
.ticket:hover{background:#941d29;box-shadow:0 18px 38px rgb(0 0 0 / 38%);transform:translateY(-2px)}
.ticket-small{min-height:40px;padding:.75rem 1rem .68rem}
/* The three "be part of the show" CTAs are real calls to action but they must
   not compete with the ticket button, which is the one that takes money. Same
   silhouette, brass outline instead of burgundy fill. */
.ticket-ghost{background:transparent;border-color:rgb(183 149 95 / 62%);color:var(--brass)}
.ticket-ghost:hover,.ticket-ghost:focus-visible{background:rgb(183 149 95 / 12%);border-color:var(--brass)}

.hero{align-items:end;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.65fr);grid-template-rows:1fr auto;min-height:max(760px,100svh);overflow:hidden;padding:10rem clamp(1.2rem,4.5vw,5rem) calc(var(--letterbox) + clamp(2.4rem,4.6vh,3.4rem));position:relative}
.hero-scene,.hero::after,.grain{inset:0;pointer-events:none;position:absolute}
.hero-scene{background:url("/assets/roadshow.webp") center/cover no-repeat;filter:saturate(.82) contrast(1.04);transform:scale(1);z-index:0}
.hero::after{background:linear-gradient(180deg,rgb(3 5 4 / 67%) 0%,transparent 23%,transparent 55%,rgb(3 5 4 / 88%) 100%),linear-gradient(90deg,rgb(3 5 4 / 48%),transparent 30%,transparent 72%,rgb(3 5 4 / 32%));content:"";z-index:1}
.grain{animation:grain 850ms steps(2) infinite;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");inset:-25%;mix-blend-mode:soft-light;opacity:.27;z-index:4}
.letterbox{background:#020302;height:var(--letterbox);left:0;pointer-events:none;position:absolute;right:0;z-index:12}
.letterbox-top{top:0;transform-origin:top}
.letterbox-bottom{bottom:0;transform-origin:bottom}
.hero-credit{color:#d8d2c3;display:flex;font:700 .69rem/1.3 var(--utility);grid-column:1/-1;justify-content:space-between;letter-spacing:.2em;position:absolute;left:clamp(1.2rem,4.5vw,5rem);right:clamp(1.2rem,4.5vw,5rem);text-transform:uppercase;top:7.4rem;z-index:5}
.hero-billing{align-self:end;grid-column:1/-1;grid-row:1;padding-bottom:clamp(2.5rem,7vh,5rem);position:relative;z-index:5}
.hero h1{color:var(--ivory);font:400 clamp(4rem,8vw,6rem)/.88 var(--display);letter-spacing:-.04em;margin:0;max-width:11ch;text-shadow:0 8px 30px rgb(0 0 0 / 74%);text-transform:uppercase;text-wrap:balance}
.lede{color:#ded8c8;font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.42;margin:1.25rem 0 0;max-width:48ch;text-shadow:0 3px 14px rgb(0 0 0 / 90%)}
.hero-details{align-items:end;border-top:1px solid rgb(238 232 215 / 46%);display:grid;gap:clamp(1rem,3vw,3rem);grid-column:1/-1;grid-row:2;grid-template-columns:auto minmax(240px,1fr) auto;padding-top:1.3rem;position:relative;z-index:6}
.hero-date{align-items:baseline;display:flex;gap:.75rem}
.hero-date span,.hero-date small,.hero-place span{color:#d2ccbd;font:700 .7rem/1.25 var(--utility);letter-spacing:.15em;text-transform:uppercase}
.hero-date strong{color:var(--brass);font:400 clamp(2.2rem,4vw,4rem)/.8 var(--display);letter-spacing:-.04em}
.hero-cta,.finale-cta{display:flex;flex-direction:column;gap:.55rem}
/* Kept to the width of the button above it so the line breaks under the CTA
   rather than stretching the hero's last grid column. */
.hero-cta small,.finale-cta small{color:var(--brass);font:700 .62rem/1.35 var(--utility);letter-spacing:.09em;max-width:27ch;text-transform:uppercase}
.hero-place{display:flex;flex-direction:column;gap:.35rem}
.hero-place strong{font-size:1.2rem;font-weight:600}
.hero-place .countdown{color:var(--brass)}
.scroll-cue{bottom:50%;color:#d2ccbd;font:700 .65rem/1 var(--utility);letter-spacing:.17em;position:absolute;right:clamp(1.2rem,2vw,2rem);text-decoration:none;text-transform:uppercase;transform:rotate(90deg) translateX(50%);transform-origin:right bottom;z-index:6}
.scroll-cue span{background:currentColor;display:inline-block;height:1px;margin:0 0 .2rem .7rem;width:42px}
.motion .hero-scene{animation:establish 2.4s cubic-bezier(.16,1,.3,1) both}
.motion .letterbox{animation:openframe 1.8s 300ms cubic-bezier(.16,1,.3,1) both}
.motion .hero-billing{animation:titlein 1.4s 650ms cubic-bezier(.16,1,.3,1) both}
.motion .hero-details,.motion .hero-credit{animation:creditsin 1s 1.1s ease-out both}

.marquee{background:var(--ivory);color:var(--black);font:700 .76rem/1 var(--utility);letter-spacing:.16em;overflow:hidden;padding:.95rem 0 .85rem;text-transform:uppercase;white-space:nowrap}
.marquee div{animation:marquee 30s linear infinite;display:inline-block;min-width:max-content;padding-left:100%}
.marquee i{color:var(--burgundy);font-style:normal;padding:0 1.5rem}
.section{padding:clamp(5.5rem,10vw,9rem) clamp(1.2rem,5vw,5rem);scroll-margin-top:2rem}
.section-heading{align-items:end;color:var(--black);display:grid;gap:3rem;grid-template-columns:minmax(0,1fr) minmax(300px,.62fr);margin:0 auto clamp(3rem,6vw,5.5rem);max-width:1500px}
.section-heading h2,.venue h2,.finale h2{font:400 clamp(2.8rem,6vw,6rem)/.92 var(--display);letter-spacing:-.04em;margin:0;max-width:12ch;text-transform:uppercase;text-wrap:balance}
.section-heading p{font-size:clamp(1.05rem,1.6vw,1.28rem);line-height:1.48;margin:0;max-width:55ch}

.cast{background:var(--paper);color:var(--black);overflow:hidden}
.heading-side{align-items:end;display:flex;flex-direction:column;gap:1.6rem}
.cast-controls{align-items:center;align-self:stretch;border-top:1px solid rgb(7 9 8 / 40%);display:grid;grid-template-columns:52px 1fr 52px;padding-top:.75rem}
.cast-controls button{align-items:center;background:transparent;border:1px solid rgb(7 9 8 / 50%);cursor:pointer;display:flex;height:44px;justify-content:center;padding:0}
.cast-controls button:hover{background:var(--black);color:var(--ivory)}
.cast-controls svg{fill:none;height:21px;stroke:currentColor;stroke-width:1.5;width:21px}
.cast-controls span{font:700 .75rem/1 var(--utility);letter-spacing:.14em;text-align:center}
.cast-controls b{color:var(--burgundy);font-size:1rem}
.film-reel{margin-inline:calc(clamp(1.2rem,5vw,5rem)*-1);position:relative}
.film-reel::before,.film-reel::after{background:var(--black);content:"";height:22px;left:0;position:absolute;right:0;z-index:4}
.film-reel::before{top:0}.film-reel::after{bottom:0}
.guest-grid{display:flex;gap:2px;overflow-x:auto;overscroll-behavior-inline:contain;padding:22px max(7vw,calc((100vw - 1500px)/2));scroll-padding-inline:max(7vw,calc((100vw - 1500px)/2));scroll-snap-type:x mandatory;scrollbar-color:var(--burgundy) var(--black);scrollbar-width:thin}
.guest{background:#111310;color:var(--ivory);flex:0 0 min(68vw,920px);min-height:min(62vw,650px);overflow:hidden;position:relative;scroll-snap-align:center}
.guest-image,.guest-image::after{inset:0;position:absolute}
.guest-image::after{background:linear-gradient(180deg,transparent 38%,rgb(7 9 8 / 92%) 100%);content:""}
.guest img{filter:grayscale(.82) contrast(1.08) saturate(.7);height:100%;object-fit:cover;transform:scale(1.01);transition:filter 450ms ease-out,transform 900ms cubic-bezier(.16,1,.3,1);width:100%}
.guest:nth-child(3n + 2) img{object-position:center 22%}
.guest:hover img,.guest:focus-within img{filter:grayscale(.12) contrast(1.03) saturate(.9);transform:scale(1.035)}
.guest-copy{bottom:clamp(2rem,5vw,4.5rem);left:clamp(1.5rem,4vw,4rem);position:absolute;right:clamp(1.5rem,4vw,4rem);z-index:2}
.guest h3{font:400 clamp(2.5rem,5vw,5.7rem)/.92 var(--display);letter-spacing:-.04em;margin:0 0 .7rem;max-width:12ch;text-shadow:0 7px 24px rgb(0 0 0 / 72%);text-transform:uppercase;text-wrap:balance}
.guest p,.appearance,.fineprint{font:700 .75rem/1.35 var(--utility);letter-spacing:.12em;text-transform:uppercase}
.guest p{color:#e1dac9;margin:0}
.appearance{background:var(--burgundy);display:inline-block;margin-top:.9rem;padding:.42rem .55rem}
.fineprint{margin:2rem auto 0;max-width:900px;text-align:center}

.program{background:#0b0d0b;color:var(--ivory);position:relative}
.program::after{background:url("/assets/roadshow.webp") 60% center/cover;content:"";inset:0;opacity:.08;pointer-events:none;position:absolute}
.section-heading.light,.playbill{color:var(--ivory);position:relative;z-index:1}
.playbill{display:grid;gap:clamp(3rem,7vw,8rem);grid-template-columns:repeat(2,minmax(0,1fr));margin:auto;max-width:1380px}
.day{border-top:1px solid var(--brass)}
.day-title{align-items:end;border-bottom:1px solid rgb(238 232 215 / 28%);display:flex;justify-content:space-between;padding:1rem 0 1.6rem}
.day-title span{font:600 clamp(1.7rem,3vw,3rem)/1 var(--body)}
.day-title strong{color:var(--brass);font:400 clamp(4rem,7vw,6rem)/.8 var(--display)}
.program-item{border-bottom:1px solid rgb(238 232 215 / 20%);display:grid;gap:1.2rem;grid-template-columns:108px minmax(0,1fr);padding:1.6rem 0}
.program-item time,.program-item span{color:var(--brass);font:700 .7rem/1.35 var(--utility);letter-spacing:.1em;text-transform:uppercase}
.program-item h3{font:600 1.45rem/1.1 var(--body);margin:0 0 .5rem}
.program-item p{color:#c9c5b9;margin:0 0 .75rem}

.visit{background:var(--forest);display:grid;gap:clamp(3rem,8vw,9rem);grid-template-columns:minmax(250px,.7fr) minmax(0,.85fr) minmax(310px,.65fr);min-height:780px;overflow:hidden;position:relative}
.visit::before{background:radial-gradient(circle at 30% 30%,rgb(192 161 107 / 16%),transparent 30%);content:"";inset:0;pointer-events:none;position:absolute}
.visit-art{align-self:end;filter:grayscale(.6) contrast(1.1) drop-shadow(0 28px 30px rgb(0 0 0 / 60%));margin-bottom:-14%;max-height:680px;max-width:100%;object-fit:contain;position:relative;z-index:1}
.venue,.hotels{align-self:center;position:relative;z-index:2}
.venue h2{margin-bottom:2.2rem}
.venue-name{color:var(--brass);font:600 clamp(1.5rem,2.7vw,2.5rem)/1.1 var(--body);margin:0 0 .7rem}
.venue address{font:700 .78rem/1.5 var(--utility);letter-spacing:.1em;text-transform:uppercase}
.venue>p:not(.venue-name){color:#c8c5b9;max-width:50ch}
.text-link{color:var(--ivory);font:700 .78rem/1 var(--utility);letter-spacing:.13em;text-transform:uppercase}
.hotels{border-block:1px solid rgb(192 161 107 / 55%);padding:1.8rem 0}
.hotels h3{color:var(--brass);font:700 .75rem/1 var(--utility);letter-spacing:.16em;margin:0 0 1rem;text-transform:uppercase}
.hotels a{border-top:1px solid rgb(238 232 215 / 18%);display:flex;flex-direction:column;gap:.3rem;padding:1.25rem 0;text-decoration:none}
.hotels strong{font:600 1.2rem/1.15 var(--body);transition:color 180ms ease-out}
.hotels a:hover strong{color:var(--brass)}
.hotels span{color:var(--fog);font:700 .69rem/1.4 var(--utility);letter-spacing:.08em;text-transform:uppercase}

/* Be part of the show — vendors, sponsors, volunteers. Deep forest rather than
   ivory so it reads as a scene change between the venue and the house rules,
   and so the brass outlines have something to sit on. */
.join{background:var(--forest);color:var(--ivory)}
.join .section-heading{color:var(--ivory)}
.join-grid{display:grid;gap:1px;margin:auto;max-width:1500px;background:rgb(238 232 215 / 20%);border:1px solid rgb(238 232 215 / 20%);grid-template-columns:repeat(3,1fr)}
/* One-pixel gaps over a light background draw the dividing rules, so the cards
   read as three panels of one ledger rather than three floating boxes. */
.join-card{background:var(--forest);display:flex;flex-direction:column;gap:.9rem;padding:clamp(2rem,3.4vw,3.2rem)}
.join-kicker{color:var(--brass);font:700 .68rem/1 var(--utility);letter-spacing:.2em;text-transform:uppercase}
.join-card h3{font:400 clamp(1.9rem,2.6vw,2.6rem)/.98 var(--display);letter-spacing:-.03em;margin:0;text-transform:uppercase}
.join-card p{color:#cfd3ce;font-size:1rem;line-height:1.5;margin:0}
.join-card .ticket{align-self:start;margin-top:auto}

.policies{background:var(--ivory);color:var(--black)}
.policy-list{border-top:1px solid rgb(7 9 8 / 40%);margin:auto;max-width:1180px}
.policy-list details{border-bottom:1px solid rgb(7 9 8 / 40%)}
.policy-list summary{cursor:pointer;display:grid;gap:2rem;grid-template-columns:.5fr 1fr;list-style:none;padding:1.7rem 0}
.policy-list summary::-webkit-details-marker{display:none}
.policy-list summary span{font:600 1.5rem/1.1 var(--body);position:relative}
.policy-list summary span::after{color:var(--burgundy);content:"+";font-family:var(--utility);position:absolute;right:1rem}
.policy-list details[open] summary span::after{content:"−"}
.policy-list summary small,.policy-list details>p{font-size:1rem;font-weight:400}
.policy-list details>p{margin:-.6rem 0 1.8rem 50%;max-width:65ch;padding-left:1rem}

.finale{align-items:center;display:flex;gap:3rem;justify-content:space-between;min-height:520px;overflow:hidden;padding:clamp(4rem,8vw,7rem) clamp(1.2rem,6vw,7rem);position:relative}
.finale-scene{background:linear-gradient(90deg,rgb(7 9 8 / 95%),rgb(7 9 8 / 56%) 58%,rgb(7 9 8 / 76%)),url("/assets/roadshow.webp") center 56%/cover;inset:0;position:absolute}
.finale>div:not(.finale-scene),.finale .ticket{position:relative;z-index:1}
.finale h2{max-width:13ch}
.finale p{color:#c8c5b9;font:700 .78rem/1.4 var(--utility);letter-spacing:.12em;text-transform:uppercase}
footer{align-items:start;background:#030403;border-top:1px solid rgb(238 232 215 / 16%);color:var(--fog);display:grid;font:700 .7rem/1.65 var(--utility);gap:2rem;grid-template-columns:205px 1fr 1fr auto;letter-spacing:.08em;padding:3rem clamp(1.2rem,5vw,5rem);text-transform:uppercase}
footer div{display:flex;flex-direction:column;gap:.25rem}
footer p{grid-column:1/-1;margin:0}
/* The archival credit. Sentence case and un-tracked on purpose: it is a
   citation, not a label, and the footer's uppercase utility face makes a
   two-line credit unreadable. */
.credit{color:rgb(169 175 170 / 72%);font:400 .68rem/1.5 var(--body);grid-column:1/-1;letter-spacing:0;max-width:70ch;text-transform:none}
.credit a{color:rgb(183 149 95 / 90%)}

@keyframes establish{from{filter:saturate(.55) contrast(1.12) blur(3px);transform:scale(1.09)}to{filter:saturate(.82) contrast(1.04) blur(0);transform:scale(1)}}
@keyframes openframe{from{transform:scaleY(1.9)}to{transform:scaleY(1)}}
@keyframes titlein{from{clip-path:inset(0 100% 0 0);filter:blur(7px);transform:translateY(22px)}to{clip-path:inset(0);filter:blur(0);transform:translateY(0)}}
@keyframes creditsin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes grain{0%{transform:translate3d(0,0,0)}25%{transform:translate3d(4%,-6%,0)}50%{transform:translate3d(-7%,3%,0)}75%{transform:translate3d(5%,7%,0)}100%{transform:translate3d(-3%,-4%,0)}}
@keyframes marquee{to{transform:translateX(-100%)}}

@media(max-width:1040px){
  .join-grid{grid-template-columns:repeat(2,1fr)}
  .header{grid-template-columns:175px 1fr auto}.header nav{gap:1.25rem}.hero{min-height:840px}
  .hero-details{grid-template-columns:1fr auto}.hero-place{display:none}
  .guest{flex-basis:78vw;min-height:64vw}
  .visit{grid-template-columns:minmax(220px,.45fr) minmax(0,1fr)}.hotels{grid-column:1/-1}
}
@media(max-width:760px){
  body{font-size:17px}.header{grid-template-columns:145px 1fr auto;min-height:70px;padding-block:.55rem}
  .menu{display:block;justify-self:end}.header nav{background:#080a08;border-bottom:1px solid rgb(238 232 215 / 24%);display:none;flex-direction:column;gap:0;left:0;padding:0 1.2rem 1rem;position:absolute;right:0;top:69px}
  .header nav[data-open]{display:flex}.header nav a{border-top:1px solid rgb(238 232 215 / 15%);padding:1rem 0}.ticket-small{display:none}
  .hero{--letterbox:5vh;display:block;min-height:max(760px,100svh);padding:8.5rem 1.2rem calc(var(--letterbox) + 1.9rem)}.hero-scene{background-image:url("/assets/roadshowmobile.webp");background-position:center}
  .hero-credit{display:block;left:1.2rem;top:6.7rem}.hero-credit span:last-child,.scroll-cue{display:none}
  .hero-billing{bottom:15.5rem;left:1.2rem;padding:0;position:absolute;right:1.2rem}.hero h1{font-size:clamp(3.45rem,16vw,5rem)}
  .lede{font-size:1rem;max-width:40ch}.hero-details{bottom:calc(var(--letterbox) + 1.9rem);display:grid;grid-template-columns:1fr;left:1.2rem;position:absolute;right:1.2rem}
  .hero-date{display:grid;gap:.2rem .7rem;grid-template-columns:auto 1fr}.hero-date strong{font-size:2.7rem;grid-column:1/-1}.hero-date small{position:absolute;right:0;top:1.4rem}.hero-details .ticket{width:100%}
  .join-grid{grid-template-columns:1fr}
  .section-heading,.playbill{grid-template-columns:1fr}.section-heading{gap:1.5rem}.heading-side{align-items:start}.cast-controls{align-self:stretch}
  .guest-grid{padding-inline:1.2rem;scroll-padding-inline:1.2rem}.guest{flex-basis:86vw;min-height:118vw}.guest h3{font-size:clamp(2.35rem,11vw,4rem)}
  .program-item{grid-template-columns:88px minmax(0,1fr)}.visit{display:block;min-height:0}.visit-art{display:block;margin:-1rem auto 3rem;max-height:430px}.hotels{margin-top:4rem}
  .policy-list summary{gap:.7rem;grid-template-columns:1fr}.policy-list summary span{padding-right:2rem}.policy-list summary span::after{right:0}.policy-list details>p{margin:-.3rem 0 1.7rem;padding:0}
  .finale{align-items:start;flex-direction:column;justify-content:end;min-height:620px}footer{grid-template-columns:1fr 1fr}footer img{max-width:190px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}