/* Scoped beneath .se-prototype when adapting to Elements; see README. */
:root{
  --ink:#101010;
  --paper:#f6f3ec;
  --red:#e52c3d;
  --muted:#b4b1ac;
  --line:#343434;
  --space:clamp(22px,5vw,88px)
}

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:95px
}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:Arial,Helvetica,sans-serif;
  font-size:16px;
  line-height:1.55
}

a{
  color:inherit;
  text-decoration:none
}

button{
  font:inherit
}

img{
  max-width:100%;
  display:block
}

a,button{
  -webkit-tap-highlight-color:transparent
}

a:focus-visible,
button:focus-visible{
  outline:3px solid #ffd76c;
  outline-offset:6px
}

a:hover.text-link{
  color:var(--red)
}

.skip{
  position:fixed;
  top:-100px;
  left:20px;
  background:white;
  color:black;
  padding:14px;
  z-index:100
}

.skip:focus{
  top:10px
}

.header{
  min-height:88px;
  padding:22px var(--space);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  background:var(--paper);
  color:var(--ink)
}

.brand{
  width:205px;
  display:block;
  flex-shrink:0
}

.brand img{
  width:100%;
  height:auto
}

nav{
  display:flex;
  align-items:center;
  gap:32px;
  font-size:14px;
  font-weight:700
}

.button{
  display:inline-flex;
  justify-content:space-between;
  align-items:center;
  gap:42px;
  padding:17px 23px;
  background:var(--red);
  color:#fff;
  font-size:15px;
  font-weight:700;
  transition:background .2s,transform .2s
}

.button:hover{
  background:#bd1427;
  transform:translateY(-2px)
}

.button span{
  font-size:22px;
  line-height:1
}

.button.small{
  padding:12px 18px;
  gap:27px
}

.hero{
  min-height:690px;
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  padding:65px var(--space) 110px;
  overflow:hidden
}

.hero-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:65% center;
  z-index:-3
}

.hero:before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(0,0,0,.89),
    rgba(0,0,0,.5) 42%,
    rgba(0,0,0,.02) 85%
  );
  z-index:-2
}

.hero:after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,#101010,transparent 35%);
  z-index:-1
}

.eyebrow{
  font-size:12px;
  font-weight:700;
  letter-spacing:2px;
  margin:0 0 20px;
  line-height:1.7
}

.hero .eyebrow{
  color:#eee3d3
}

h1,h2,h3,p{
  margin-top:0
}

h1,h2,.final-cta h2{
  font-family:Impact,'Arial Narrow',Arial,sans-serif;
  font-weight:900;
  letter-spacing:-1.5px;
  line-height:.98
}

h1{
  font-size:clamp(64px,7.8vw,120px);
  margin-bottom:25px
}

em{
  font-style:normal;
  color:var(--red)
}

.hero-intro{
  color:#dedad4;
  margin-bottom:29px
}

.hero-bottom{
  position:absolute;
  bottom:27px;
  left:var(--space);
  right:var(--space);
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:12px;
  letter-spacing:1px;
  color:#c7c3bd
}

.hero-bottom a{
  letter-spacing:0
}

.strap{
  display:flex;
  justify-content:space-between;
  gap:22px;
  padding:19px var(--space);
  background:var(--red);
  color:white;
  font-size:clamp(13px,1.65vw,22px);
  font-weight:900;
  letter-spacing:-.3px
}

.section{
  padding:85px var(--space)
}

.section-heading{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px;
  margin-bottom:36px
}

.section-heading h2{
  margin:0;
  font-size:clamp(46px,5vw,72px)
}

.section-heading .eyebrow{
  color:var(--muted);
  margin-bottom:13px
}

.red{
  color:var(--red)
}

.text-link{
  font-size:15px;
  font-weight:700;
  display:inline-flex;
  gap:32px;
  align-items:center;
  border-bottom:1px solid #696764;
  padding-bottom:8px
}

.text-link span{
  font-size:23px
}

.events{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:25px
}

.event-image{
  position:relative;
  display:block;
  overflow:hidden
}

.event-image img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  transition:transform .5s
}

.event-image:hover img{
  transform:scale(1.04)
}

.date{
  position:absolute;
  left:15px;
  top:15px;
  background:var(--paper);
  color:var(--ink);
  display:grid;
  min-width:62px;
  padding:10px;
  text-align:center;
  font-size:12px;
  font-weight:700;
  line-height:1.2
}

.date b{
  font-size:27px
}

.date small{
  font-size:12px;
  margin-top:4px
}

.event-copy{
  padding:24px 0 6px
}

.event-copy .eyebrow{
  color:#f77983;
  font-size:12px;
  letter-spacing:1.4px;
  margin-bottom:10px
}

.event h3{
  font-size:24px;
  line-height:1.15;
  margin-bottom:14px;
  letter-spacing:-.7px
}

.event-copy p{
  font-size:15px
}

.event-copy p span{
  color:var(--muted)
}

.event-copy .text-link{
  width:100%;
  justify-content:space-between
}

.snapshot{
  color:var(--muted);
  font-size:13px;
  margin:26px 0 0
}

.shows{
  background:#1b1b1b
}

.section-heading>p{
  color:#c8c4be;
  margin-bottom:0
}

.show-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:18px
}

.show-tile{
  position:relative;
  min-height:420px;
  display:flex;
  align-items:end;
  padding:28px;
  overflow:hidden;
  isolation:isolate
}

.show-tile img{
  position:absolute;
  width:100%;
  height:100%;
  inset:0;
  object-fit:cover;
  z-index:-2;
  transition:transform .5s
}

.show-tile:after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(
    0deg,
    rgba(0,0,0,.95),
    rgba(0,0,0,0) 85%
  );
  z-index:-1
}

.show-tile:hover img{
  transform:scale(1.045)
}

.show-tile h3{
  font-size:clamp(26px,3vw,42px);
  line-height:1.05;
  margin-bottom:10px;
  letter-spacing:-1px
}

.show-tile .eyebrow{
  font-size:12px;
  letter-spacing:1px;
  max-width:220px;
  margin-bottom:12px
}

.show-tile p{
  margin-bottom:0
}

.circle{
  position:absolute;
  right:18px;
  top:18px;
  border:1px solid #ffffff80;
  border-radius:50%;
  height:38px;
  width:38px;
  display:grid;
  place-items:center;
  background:#1115
}

.more-shows{
  display:flex;
  gap:20px 30px;
  flex-wrap:wrap;
  font-size:14px;
  margin-top:30px
}

.more-shows>span{
  color:var(--muted)
}

.more-shows a:hover{
  text-decoration:underline
}


/* ========================================
   AUDIENCE REVIEWS
   ======================================== */

.audience-reviews{
  background:var(--ink);
  color:var(--paper);
  overflow:hidden
}

.audience-reviews .section-heading{
  align-items:end;
  gap:clamp(40px,8vw,130px);
  margin-bottom:55px
}

.audience-reviews .section-heading>div{
  flex:0 1 650px
}

.audience-reviews .section-heading .eyebrow{
  color:var(--muted)
}

.audience-reviews .section-heading>p{
  flex:0 1 520px;
  max-width:520px;
  color:#c8c4be;
  line-height:1.6
}

.review-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  align-items:stretch
}

.review-card{
  position:relative;
  min-width:0;
  min-height:360px;
  padding:40px 36px 34px;
  background:var(--paper);
  color:var(--ink);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transition:transform .25s ease,background .25s ease
}

.review-card:before{
  content:'“';
  position:absolute;
  top:-25px;
  right:20px;
  font-family:Georgia,'Times New Roman',serif;
  font-size:150px;
  line-height:1;
  color:var(--red);
  opacity:.16;
  pointer-events:none
}

.review-card:after{
  content:'';
  position:absolute;
  left:36px;
  top:0;
  width:58px;
  height:6px;
  background:var(--red)
}

.review-card:hover{
  transform:translateY(-6px);
  background:#fff
}

.review-stars{
  display:none
}

.review-quote{
  position:relative;
  z-index:1;
  flex:1;
  margin:12px 0 38px;
  padding:0;
  border:0;
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(21px,1.65vw,27px);
  line-height:1.42;
  letter-spacing:-.25px
}

.review-show{
  position:relative;
  z-index:1;
  margin:0;
  padding-top:19px;
  border-top:1px solid #d7d1c7;
  font-size:0;
  line-height:1.3
}

.review-show span{
  display:block;
  color:var(--red);
  font-size:12px;
  font-weight:900;
  letter-spacing:1.6px;
  text-transform:uppercase
}

.audience-reviews .snapshot{
  color:var(--muted)
}

@media(max-width:900px){

  .audience-reviews .section-heading{
    align-items:flex-start;
    flex-direction:column;
    gap:22px
  }

  .audience-reviews .section-heading>div,
  .audience-reviews .section-heading>p{
    flex:auto;
    max-width:650px
  }

  .review-grid{
    grid-template-columns:1fr 1fr
  }

  .review-card:last-child{
    grid-column:1/-1;
    min-height:280px
  }

}

@media(max-width:680px){

  .audience-reviews .section-heading{
    margin-bottom:38px
  }

  .review-grid{
    grid-template-columns:1fr;
    gap:16px
  }

  .review-card,
  .review-card:last-child{
    grid-column:auto;
    min-height:0;
    padding:34px 28px 28px
  }

  .review-card:after{
    left:28px
  }

  .review-card:before{
    right:12px;
    font-size:125px
  }

  .review-quote{
    font-size:22px;
    margin-bottom:30px
  }

}


/* ========================================
   UK TRIBUTE SHOWS FEATURE
   ======================================== */

.seo-intro{
  background:var(--red);
  color:#fff;
  padding-top:60px;
  padding-bottom:60px
}

.seo-intro .section-heading{
  align-items:center;
  gap:7vw;
  margin-bottom:26px
}

.seo-intro .section-heading > div{
  flex:0 0 36%
}

.seo-intro .section-heading .eyebrow{
  color:#fff;
  margin-bottom:16px
}

.seo-intro .section-heading>p{
  color:#fff;
  flex:1;
  max-width:760px;
  font-size:16px;
  line-height:1.55
}

.seo-intro h2{
  color:#fff;
  font-size:clamp(42px,4.2vw,62px);
  line-height:.98
}

.seo-intro h2 .red{
  color:var(--ink)
}

.seo-intro .text-link{
  color:#fff;
  border-color:rgba(255,255,255,.55)
}

.seo-intro .text-link:hover{
  color:#fff;
  border-color:#fff
}

@media(max-width:680px){

  .seo-intro{
    padding-top:50px;
    padding-bottom:50px
  }

  .seo-intro .section-heading{
    align-items:flex-start;
    gap:25px
  }

  .seo-intro .section-heading > div{
    flex:auto
  }

  .seo-intro h2{
    font-size:44px
  }

}


.about{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:10%;
  background:var(--paper);
  color:var(--ink)
}

.about h2{
  font-size:clamp(48px,5.4vw,80px);
  margin-bottom:28px
}

.about p:not(.eyebrow){
  max-width:490px;
  color:#494744
}

.about-image{
  position:relative;
  max-width:500px;
  justify-self:end;
  width:100%
}

.about-image img{
  width:100%;
  height:460px;
  object-fit:cover
}

.about-image:after{
  content:'';
  position:absolute;
  inset:40% 0 0;
  background:linear-gradient(transparent,#000b)
}

.about-image span{
  position:absolute;
  bottom:28px;
  left:28px;
  z-index:1;
  color:white;
  font-weight:900;
  font-size:30px;
  line-height:1.1
}

.venues{
  text-align:center;
  padding-top:60px;
  padding-bottom:60px
}

.venue-list{
  display:flex;
  justify-content:space-between;
  gap:25px;
  margin:30px 0
}

.venue-list>span{
  font-family:Georgia,serif;
  font-size:22px
}

.venue-list small{
  display:block;
  font-family:Arial,sans-serif;
  font-size:11px;
  letter-spacing:2px;
  margin-top:8px;
  color:var(--muted)
}

.venues>p:last-child{
  color:var(--muted);
  font-size:14px;
  margin:0
}

.final-cta{
  padding:75px var(--space);
  background:var(--red);
  text-align:center
}

.final-cta h2{
  font-size:clamp(64px,8.5vw,128px);
  margin:0 0 30px
}

.final-cta em{
  color:var(--ink)
}

.light{
  background:var(--paper);
  color:var(--ink)
}

.light:hover{
  background:white
}

.footer{
  padding:45px var(--space);
  background:var(--paper);
  color:var(--ink);
  display:flex;
  align-items:center;
  gap:25px;
  flex-wrap:wrap
}

.footer .brand{
  width:160px
}

.footer p{
  font-size:14px;
  margin:0
}

.footer>div{
  margin-left:auto;
  display:flex;
  gap:22px;
  font-size:14px
}

.footer small{
  width:100%;
  font-size:12px;
  color:#58534f
}

.menu-toggle{
  -webkit-appearance:none;
  appearance:none;
  background:var(--ink);
  color:#fff;
  border:0;
  border-radius:4px;
  padding:10px 12px;
  min-height:44px;
  flex-shrink:0;
  font-family:Arial,Helvetica,sans-serif;
  font-size:14px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer
}

.menu-toggle[hidden]{
  display:none
}


@media(min-width:1600px){

  .hero{
    min-height:820px
  }

  .section{
    padding-left:max(
      var(--space),
      calc((100vw - 1440px)/2)
    );

    padding-right:max(
      var(--space),
      calc((100vw - 1440px)/2)
    )
  }

}


@media(max-width:900px){

  nav{
    gap:17px
  }

  .brand{
    width:170px
  }

  .show-grid{
    grid-template-columns:1fr 1fr
  }

  .show-tile.wide{
    grid-column:1/-1;
    min-height:380px
  }

  .show-tile.wide img{
    object-position:50% 40%
  }

  .venue-list{
    flex-wrap:wrap;
    justify-content:center
  }

  .venue-list>span{
    flex:1 1 26%
  }

  .event h3{
    font-size:21px
  }

  .about{
    gap:35px
  }

  .about-image img{
    height:410px
  }

}


@media(max-width:680px){

  .header{
    flex-wrap:wrap;
    min-height:74px;
    padding-top:20px;
    padding-bottom:20px;
    gap:18px
  }

  .menu-toggle:not([hidden]){
    display:block
  }

  nav{
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:0
  }

  nav a{
    padding:13px 0
  }

  .js nav:not(.is-open){
    display:none
  }

  .hero{
    min-height:680px;
    padding-top:55px;
    padding-bottom:110px;
    align-items:center
  }

  .hero-photo{
    object-position:62% center
  }

  .hero:before{
    background:linear-gradient(
      90deg,
      #000c,
      #0005
    )
  }

  h1{
    font-size:clamp(58px,13vw,86px);
    letter-spacing:-1px
  }

  .hero .eyebrow{
    max-width:230px;
    font-size:11px
  }

  .hero-intro{
    font-size:16px;
    max-width:320px
  }

  .hero-intro-opening{
    display:block
  }

  .hero-bottom{
    flex-direction:column;
    gap:8px;
    font-size:10px
  }

  .hero-bottom a{
    font-size:12px
  }

  .strap{
    flex-wrap:wrap;
    justify-content:center;
    gap:6px 18px;
    font-size:13px
  }

  .strap span:last-child{
    width:100%;
    text-align:center
  }

  .section{
    padding-top:57px;
    padding-bottom:57px
  }

  .section-heading{
    align-items:start;
    flex-direction:column;
    gap:22px
  }

  .section-heading h2{
    font-size:48px
  }

  .events{
    grid-template-columns:1fr;
    gap:35px
  }

  .event-image img{
    aspect-ratio:16/9
  }

  .event h3{
    font-size:27px
  }

  .event-copy{
    padding-top:20px
  }

  .show-grid{
    grid-template-columns:1fr
  }

  .show-tile,
  .show-tile.wide{
    min-height:420px;
    grid-column:auto
  }

  .show-tile h3{
    font-size:38px
  }

  .more-shows{
    flex-direction:column;
    gap:18px
  }

  .about{
    grid-template-columns:1fr
  }

  .about-image{
    max-width:none;
    justify-self:stretch
  }

  .about-image img{
    height:auto;
    aspect-ratio:1;
    object-fit:cover
  }

  .venue-list{
    gap:28px
  }

  .venue-list>span{
    flex:1 1 40%;
    font-size:20px
  }

  .final-cta{
    padding-top:58px;
    padding-bottom:58px
  }

  .final-cta h2{
    font-size:64px
  }

  .footer{
    gap:23px
  }

  .footer>div{
    margin-left:0;
    width:100%;
    flex-wrap:wrap
  }

  .desktop{
    display:none
  }

}


@media(prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto
  }

  *,
  *:before,
  *:after{
    transition:none!important;
    animation:none!important
  }

}


/* Explicit height reset allows the card aspect ratio to override HTML dimensions. */

.event-image img{
  height:auto
}


@media(min-width:681px){

  .menu-toggle:not([hidden]){
    display:none
  }

}

/* ========================================
   AUTOMATIC EVENT PAGES
   ======================================== */

.event-page-hero{
  background:var(--ink);
  color:var(--paper);
  padding:clamp(70px,9vw,140px) var(--space) clamp(70px,8vw,120px)
}

.event-page-inner{
  max-width:1440px;
  margin:0 auto
}

.event-page-hero .eyebrow{
  color:#f77983;
  margin-bottom:24px
}

.event-page-hero h1{
  max-width:1200px;
  font-size:clamp(62px,8vw,120px);
  margin-bottom:55px
}

.event-page-details{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  max-width:1050px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}

.event-page-details>div{
  padding:25px 30px 27px 0
}

.event-page-details>div+div{
  border-left:1px solid var(--line);
  padding-left:30px
}

.event-page-details span{
  display:block;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  letter-spacing:1.6px;
  text-transform:uppercase;
  margin-bottom:7px
}

.event-page-details strong{
  display:block;
  font-size:clamp(19px,2vw,26px);
  line-height:1.2
}

.event-page-details small{
  display:block;
  color:var(--muted);
  margin-top:5px;
  font-size:13px
}

.event-page-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:16px 26px;
  margin-top:38px
}

.event-ticket-button{
  min-width:190px
}

.event-page-secondary{
  display:inline-flex;
  align-items:center;
  gap:30px;
  padding:16px 0;
  font-size:15px;
  font-weight:700;
  border-bottom:1px solid #696764
}

.event-page-secondary:hover{
  color:var(--red)
}

.event-page-secondary span{
  font-size:21px
}

.event-page-status{
  display:inline-block;
  padding:17px 23px;
  background:var(--paper);
  color:var(--ink);
  font-size:15px;
  font-weight:700
}


/* INFORMATION */

.event-page-info{
  background:var(--paper);
  color:var(--ink);
  padding:85px var(--space);
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(280px,.7fr);
  gap:clamp(55px,9vw,140px);
  align-items:start
}

.event-page-info-copy{
  max-width:780px
}

.event-page-info .eyebrow{
  color:#6d6963
}

.event-page-info h2{
  font-family:Impact,'Arial Narrow',Arial,sans-serif;
  font-size:clamp(48px,5.5vw,80px);
  font-weight:900;
  letter-spacing:-1.5px;
  line-height:.98;
  margin:0 0 35px
}

.event-page-info h2 span{
  color:var(--red)
}

.event-page-lead{
  font-size:clamp(20px,2vw,25px);
  line-height:1.45;
  max-width:720px
}

.event-page-info-copy>p:not(.eyebrow):not(.event-page-lead){
  max-width:680px;
  color:#494744;
  font-size:16px
}

.event-page-links{
  display:flex;
  flex-wrap:wrap;
  gap:24px 35px;
  margin-top:35px
}


/* AT A GLANCE */

.event-page-card{
  background:var(--ink);
  color:var(--paper);
  padding:35px
}

.event-page-card .eyebrow{
  color:#f77983;
  margin-bottom:20px
}

.event-page-card dl{
  margin:0
}

.event-page-card dl>div{
  padding:17px 0;
  border-top:1px solid var(--line)
}

.event-page-card dt{
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  letter-spacing:1.3px;
  text-transform:uppercase;
  margin-bottom:4px
}

.event-page-card dd{
  margin:0;
  font-size:17px;
  font-weight:700
}


/* FINAL CTA */

.event-page-cta em{
  color:var(--ink)
}


/* 404 */

.event-page-not-found{
  min-height:65vh;
  padding:100px var(--space)
}

.event-page-not-found h1{
  max-width:900px
}

.event-page-not-found>p:not(.eyebrow){
  color:var(--muted);
  font-size:18px;
  margin-bottom:30px
}


/* LARGE SCREENS */

@media(min-width:1600px){

  .event-page-hero,
  .event-page-info{
    padding-left:max(
      var(--space),
      calc((100vw - 1440px)/2)
    );

    padding-right:max(
      var(--space),
      calc((100vw - 1440px)/2)
    )
  }

}


/* TABLET */

@media(max-width:900px){

  .event-page-info{
    grid-template-columns:1fr;
    gap:50px
  }

  .event-page-card{
    max-width:600px
  }

}


/* MOBILE */

@media(max-width:680px){

  .event-page-hero{
    padding-top:60px;
    padding-bottom:65px
  }

  .event-page-hero h1{
    font-size:clamp(52px,15vw,76px);
    margin-bottom:38px
  }

  .event-page-details{
    grid-template-columns:1fr
  }

  .event-page-details>div{
    padding:18px 0
  }

  .event-page-details>div+div{
    border-left:0;
    border-top:1px solid var(--line);
    padding-left:0
  }

  .event-page-actions{
    align-items:stretch;
    flex-direction:column;
    margin-top:30px
  }

  .event-page-actions .button{
    width:100%
  }

  .event-page-secondary{
    width:100%;
    justify-content:space-between
  }

  .event-page-info{
    padding-top:60px;
    padding-bottom:60px
  }

  .event-page-info h2{
    font-size:50px
  }

  .event-page-card{
    padding:27px
  }

  .event-page-links{
    flex-direction:column;
    align-items:flex-start
  }

}


/* ========================================
   EVENT PAGE PRODUCTION ARTWORK
   ======================================== */

.event-production-image{
  width:100%;
  margin:0 0 30px;
  overflow:hidden;
  background:var(--ink)
}

.event-production-image img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  object-position:center
}


/* Production description */

.event-page-info .event-page-lead{
  max-width:720px;
  margin-bottom:28px;
  font-size:clamp(18px,1.55vw,22px);
  line-height:1.55;
  font-weight:400
}


/* Give the production artwork a little breathing room */

.event-page-info h2{
  margin-bottom:38px
}


/* ========================================
   TABLET
   ======================================== */

@media(max-width:900px){

  .event-production-image{
    max-width:780px
  }

}


/* ========================================
   MOBILE
   ======================================== */

@media(max-width:680px){

  .event-production-image{
    margin-bottom:25px
  }

  .event-production-image img{
    aspect-ratio:16/10
  }

  .event-page-info .event-page-lead{
    font-size:18px;
    line-height:1.5
  }

}

/* ========================================
   ARTIST PAGE AUDIENCE REVIEWS
   ======================================== */

.artist-reviews{
  background:var(--ink);
  color:var(--paper);
  overflow:hidden
}

.artist-reviews[hidden]{
  display:none
}


/* ----------------------------------------
   Heading and carousel controls
   ---------------------------------------- */

.artist-reviews-heading{
  align-items:end;
  gap:40px;
  margin-bottom:55px
}

.artist-reviews-heading>div:first-child{
  flex:1
}

.artist-reviews .eyebrow{
  color:var(--muted)
}

.artist-review-controls{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px
}

.artist-review-arrow{
  width:52px;
  height:52px;
  padding:0;
  border:1px solid rgba(255,255,255,.35);
  border-radius:50%;
  background:transparent;
  color:var(--paper);
  font:inherit;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  transition:
    background .2s ease,
    color .2s ease,
    border-color .2s ease,
    opacity .2s ease
}

.artist-review-arrow:hover:not(:disabled){
  background:var(--red);
  border-color:var(--red);
  color:#fff
}

.artist-review-arrow:disabled{
  opacity:.25;
  cursor:default
}

.artist-review-arrow[hidden]{
  display:none
}


/* ----------------------------------------
   Carousel
   ---------------------------------------- */

.artist-review-viewport{
  position:relative;
  width:100%
}

.artist-review-track{
  display:flex;
  gap:22px;
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch
}

.artist-review-track::-webkit-scrollbar{
  display:none
}


/* ----------------------------------------
   Review cards
   ---------------------------------------- */

.artist-review-card{
  position:relative;
  flex:0 0 calc((100% - 44px) / 3);
  min-width:0;
  min-height:360px;
  padding:40px 36px 34px;
  background:var(--paper);
  color:var(--ink);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  scroll-snap-align:start
}


/* Giant faded quote mark */

.artist-review-card:before{
  content:'“';
  position:absolute;
  top:-25px;
  right:20px;
  font-family:Georgia,'Times New Roman',serif;
  font-size:150px;
  line-height:1;
  color:var(--red);
  opacity:.16;
  pointer-events:none
}


/* Red line at top */

.artist-review-card:after{
  content:'';
  position:absolute;
  left:36px;
  top:0;
  width:58px;
  height:6px;
  background:var(--red)
}


/* ----------------------------------------
   Quote
   ---------------------------------------- */

.artist-review-quote{
  position:relative;
  z-index:1;
  flex:1;
  margin:12px 0 0;
  padding:0;
  border:0;
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(21px,1.65vw,27px);
  line-height:1.42;
  letter-spacing:-.25px
}

.artist-review-quote-text{
  display:block
}


/* Reviewer name / location */

.artist-review-attribution{
  display:block;
  margin-top:20px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:13px;
  font-style:normal;
  font-weight:700;
  line-height:1.4;
  letter-spacing:.3px;
  color:#77716b
}


/* ----------------------------------------
   Tablet
   ---------------------------------------- */

@media(max-width:900px){

  .artist-reviews-heading{
    align-items:flex-end
  }

  .artist-review-card{
    flex-basis:calc((100% - 22px) / 2)
  }

}


/* ----------------------------------------
   Mobile
   ---------------------------------------- */

@media(max-width:680px){

  .artist-reviews-heading{
    align-items:flex-start;
    flex-direction:column;
    gap:25px;
    margin-bottom:38px
  }

  .artist-review-controls{
    justify-content:flex-start
  }

  .artist-review-arrow{
    width:46px;
    height:46px
  }

  .artist-review-track{
    gap:16px
  }

  .artist-review-card{
    flex:0 0 88%;
    min-height:300px;
    padding:34px 28px 28px
  }

  .artist-review-card:after{
    left:28px
  }

  .artist-review-card:before{
    right:12px;
    font-size:125px
  }

  .artist-review-quote{
    font-size:22px
  }

  .artist-review-attribution{
    margin-top:17px;
    font-size:12px
  }

}

/* White break between artist gallery and reviews */

.artist-reviews{
  border-top:24px solid var(--paper);
}

@media(max-width:680px){

  .artist-reviews{
    border-top-width:16px;
  }

}

/* ========================================
   NEWS & STORIES
   ======================================== */


/* ----------------------------------------
   NEWS ARCHIVE INTRO
   ---------------------------------------- */

.news-page-intro{
  padding:clamp(75px,9vw,135px) var(--space) clamp(65px,7vw,105px);
  background:var(--ink);
  color:var(--paper)
}

.news-page-intro .eyebrow{
  color:var(--muted);
  margin-bottom:20px
}

.news-page-intro h1{
  max-width:900px;
  margin:0 0 30px;
  font-size:clamp(70px,8vw,120px)
}

.news-page-intro>p:last-child{
  max-width:650px;
  margin:0;
  color:#c8c4be;
  font-size:18px;
  line-height:1.6
}


/* ----------------------------------------
   NEWS ARCHIVE
   ---------------------------------------- */

.news-page-feed{
  background:var(--paper);
  color:var(--ink)
}

.news-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:55px 26px
}


/* ----------------------------------------
   NEWS CARD
   ---------------------------------------- */

.news-card{
  min-width:0
}

.news-card-image{
  position:relative;
  display:block;
  overflow:hidden;
  background:#ddd8ce
}

.news-card-image:after{
  content:'';
  position:absolute;
  inset:0;
  border:1px solid rgba(16,16,16,.08);
  pointer-events:none
}

.news-card-image img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1;
  object-fit:cover;
  transition:transform .5s ease
}

.news-card:hover .news-card-image img{
  transform:scale(1.035)
}

.news-card-copy{
  padding-top:24px
}

.news-card-copy .eyebrow{
  margin-bottom:13px;
  color:#77716b;
  font-size:11px;
  letter-spacing:1.5px
}

.news-card-copy h2{
  margin:0 0 17px;
  font-family:Impact,'Arial Narrow',Arial,sans-serif;
  font-size:clamp(30px,2.6vw,42px);
  font-weight:900;
  letter-spacing:-.8px;
  line-height:1.02
}

.news-card-copy h2 a{
  transition:color .2s ease
}

.news-card-copy h2 a:hover{
  color:var(--red)
}

.news-card-copy>p:not(.eyebrow){
  margin:0 0 22px;
  color:#56514c;
  font-size:15px;
  line-height:1.6
}

.news-card-copy .text-link{
  width:100%;
  justify-content:space-between
}


/* ----------------------------------------
   INDIVIDUAL NEWS ARTICLE HERO
   ---------------------------------------- */

.news-article-hero{
  padding:clamp(70px,8vw,120px) var(--space);
  background:var(--paper);
  color:var(--ink);
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(360px,.75fr);
  gap:clamp(55px,8vw,125px);
  align-items:center
}

.news-article-heading{
  max-width:850px
}

.news-article-heading .eyebrow{
  margin-bottom:22px;
  color:var(--red)
}

.news-article-heading h1{
  margin:0 0 25px;
  font-size:clamp(58px,6.4vw,100px);
  line-height:.95
}

.news-article-date{
  margin:0 0 28px;
  color:#77716b;
  font-size:12px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase
}

.news-article-intro{
  max-width:700px;
  margin:0;
  color:#494744;
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(20px,1.7vw,26px);
  line-height:1.5
}

.news-article-image{
  width:100%;
  max-width:600px;
  justify-self:end;
  position:relative
}

.news-article-image:before{
  content:'';
  position:absolute;
  left:-18px;
  bottom:-18px;
  width:42%;
  height:42%;
  background:var(--red);
  z-index:0
}

.news-article-image img{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1;
  object-fit:cover
}


/* ----------------------------------------
   ARTICLE BODY
   ---------------------------------------- */

.news-article-body{
  padding:clamp(70px,8vw,115px) var(--space);
  background:var(--ink);
  color:var(--paper)
}

.news-article-body>article{
  width:min(100%,820px);
  margin:0 auto
}

.news-article-body>article>p{
  margin:0 0 27px;
  color:#dedad4;
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(18px,1.45vw,21px);
  line-height:1.75
}

.news-article-body>article>p:first-child{
  font-size:clamp(21px,1.7vw,25px);
  color:var(--paper)
}


/* ----------------------------------------
   RELATED SHOW
   ---------------------------------------- */

.news-related-show{
  margin-top:65px;
  padding:38px 40px 42px;
  background:var(--paper);
  color:var(--ink);
  border-top:7px solid var(--red)
}

.news-related-show .eyebrow{
  margin-bottom:15px;
  color:#77716b
}

.news-related-show h2{
  margin:0 0 25px;
  font-family:Impact,'Arial Narrow',Arial,sans-serif;
  font-size:clamp(42px,4vw,62px);
  font-weight:900;
  letter-spacing:-1px;
  line-height:1
}


/* ----------------------------------------
   ARTICLE FOOTER LINKS
   ---------------------------------------- */

.news-article-links{
  margin-top:60px;
  padding-top:28px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:25px;
  flex-wrap:wrap
}


/* ----------------------------------------
   NEWS 404
   ---------------------------------------- */

.news-not-found{
  min-height:65vh;
  padding:100px var(--space);
  background:var(--ink);
  color:var(--paper)
}

.news-not-found .eyebrow{
  color:var(--muted)
}

.news-not-found h1{
  max-width:900px
}

.news-not-found>p:not(.eyebrow){
  max-width:600px;
  margin-bottom:32px;
  color:var(--muted);
  font-size:18px
}


/* ----------------------------------------
   LARGE SCREENS
   ---------------------------------------- */

@media(min-width:1600px){

  .news-page-intro,
  .news-article-hero,
  .news-article-body,
  .news-not-found{
    padding-left:max(
      var(--space),
      calc((100vw - 1440px)/2)
    );

    padding-right:max(
      var(--space),
      calc((100vw - 1440px)/2)
    )
  }

}


/* ----------------------------------------
   TABLET
   ---------------------------------------- */

@media(max-width:900px){

  .news-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .news-article-hero{
    grid-template-columns:minmax(0,1fr) minmax(280px,.7fr);
    gap:45px
  }

  .news-article-heading h1{
    font-size:clamp(52px,8vw,78px)
  }

}


/* ----------------------------------------
   MOBILE
   ---------------------------------------- */

@media(max-width:680px){

  .news-page-intro{
    padding-top:65px;
    padding-bottom:65px
  }

  .news-page-intro h1{
    font-size:clamp(58px,16vw,82px)
  }

  .news-page-intro>p:last-child{
    font-size:16px
  }

  .news-grid{
    grid-template-columns:1fr;
    gap:50px
  }

  .news-card-copy h2{
    font-size:38px
  }

  .news-article-hero{
    grid-template-columns:1fr;
    gap:45px;
    padding-top:60px;
    padding-bottom:75px
  }

  .news-article-heading h1{
    font-size:clamp(52px,14vw,74px)
  }

  .news-article-intro{
    font-size:20px
  }

  .news-article-image{
    max-width:none;
    justify-self:stretch;
    width:calc(100% - 14px)
  }

  .news-article-image:before{
    left:14px;
    bottom:-14px
  }

  .news-article-body{
    padding-top:65px;
    padding-bottom:70px
  }

  .news-article-body>article>p{
    font-size:18px;
    line-height:1.7
  }

  .news-article-body>article>p:first-child{
    font-size:20px
  }

  .news-related-show{
    margin-top:50px;
    padding:30px 27px 34px
  }

  .news-related-show h2{
    font-size:44px
  }

  .news-article-links{
    margin-top:45px;
    flex-direction:column;
    align-items:flex-start
  }

  .news-article-links .text-link{
    width:100%;
    justify-content:space-between
  }

}

/* ========================================
   HOMEPAGE NEWS & STORIES
   ======================================== */

.homepage-news{
  --muted:#56514c;
  background:var(--paper);
  color:var(--ink)
}

.homepage-news .section-heading h2{
  color:var(--ink)
}

.homepage-news .section-heading .eyebrow,
.homepage-news .section-heading>p,
.homepage-news .snapshot{
  color:#56514c
}

.homepage-news-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:55px 26px
}

.homepage-news-grid>.snapshot{
  grid-column:1/-1;
  margin:0
}

.homepage-news-card{
  min-width:0;
  background:var(--paper);
  color:var(--ink)
}

.homepage-news-image{
  position:relative;
  display:block;
  overflow:hidden;
  aspect-ratio:1;
  background:#eeeae3
}

.homepage-news-image:after{
  content:'';
  position:absolute;
  inset:0;
  border:1px solid rgba(16,16,16,.08);
  pointer-events:none
}

.homepage-news-image img{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:1;
  object-fit:cover;
  transition:transform .5s ease
}

.homepage-news-copy{
  padding-top:24px
}

.homepage-news-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 14px;
  margin:0 0 13px;
  color:#56514c;
  font-size:11px;
  font-weight:700;
  line-height:1.7;
  letter-spacing:1.5px;
  text-transform:uppercase
}

.homepage-news-meta span:first-child,
.homepage-news-meta strong{
  color:#bd1427
}

.homepage-news-meta time{
  color:#56514c
}

.homepage-news-copy h2,
.homepage-news-copy h3{
  margin:0 0 17px;
  color:var(--ink);
  font-family:Impact,'Arial Narrow',Arial,sans-serif;
  font-size:clamp(30px,2.6vw,42px);
  font-weight:900;
  letter-spacing:-.8px;
  line-height:1.02;
  overflow-wrap:break-word
}

.homepage-news-summary{
  margin:0 0 22px;
  color:#56514c;
  font-size:15px;
  line-height:1.6;
  overflow-wrap:break-word
}

.homepage-news a{
  color:var(--ink);
  transition:color .2s ease
}

.homepage-news a:hover,
.homepage-news a:focus-visible{
  color:#bd1427
}

.homepage-news a:focus-visible{
  outline-color:#bd1427
}

.homepage-news .text-link{
  color:var(--ink);
  border-color:#696764
}

.homepage-news .text-link:hover,
.homepage-news .text-link:focus-visible{
  color:#bd1427;
  border-color:#bd1427
}

.homepage-news-copy .text-link{
  width:100%;
  justify-content:space-between
}

.homepage-news .snapshot a,
.homepage-news-summary a{
  text-decoration:underline;
  text-underline-offset:3px
}

@media(hover:hover) and (prefers-reduced-motion:no-preference){

  .homepage-news-card:hover .homepage-news-image img{
    transform:scale(1.035)
  }

}

@media(max-width:900px){

  .homepage-news-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

}

@media(max-width:680px){

  .homepage-news-grid{
    grid-template-columns:1fr;
    gap:50px
  }

  .homepage-news-copy h2,
  .homepage-news-copy h3{
    font-size:38px
  }

}


/* HOMEPAGE NEWS TICKER */
.news-ticker{
  --ticker-gap:42px;
  width:100%;
  overflow:hidden;
  background:var(--red);
  color:#fff;
  border-top:1px solid rgba(0,0,0,.12);
  border-bottom:1px solid rgba(0,0,0,.16)
}
.news-ticker[hidden]{display:none}
.news-ticker-viewport{width:100%;overflow:hidden}
.news-ticker-track{
  display:flex;
  width:max-content;
  will-change:transform;
  animation:news-ticker-scroll var(--ticker-duration,60s) linear 3s infinite
}
.news-ticker-sequence{
  display:flex;
  align-items:center;
  flex-shrink:0;
  min-width:max-content;
  padding:11px 0;
  gap:var(--ticker-gap);
  white-space:nowrap
}
.news-ticker-label{
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
  padding-left:var(--space);
  color:var(--ink);
  font-size:13px;
  font-weight:900;
  letter-spacing:1.2px
}
.news-ticker-item{
  display:inline-flex;
  align-items:center;
  gap:var(--ticker-gap);
  color:#fff;
  font-size:14px;
  font-weight:700;
  line-height:1.3;
  transition:color .2s ease
}
.news-ticker-item:after{
  content:'◆';
  color:var(--ink);
  font-size:7px;
  opacity:.75
}
.news-ticker-item:hover,
.news-ticker-item:focus-visible{color:var(--ink)}
.news-ticker:hover .news-ticker-track,
.news-ticker:focus-within .news-ticker-track{animation-play-state:paused}
@keyframes news-ticker-scroll{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
@media(max-width:680px){
  .news-ticker{--ticker-gap:28px}
  .news-ticker-sequence{padding-top:10px;padding-bottom:10px}
  .news-ticker-label{font-size:11px;letter-spacing:1px}
  .news-ticker-item{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  .news-ticker-track{width:100%;animation:none;will-change:auto}
  .news-ticker-sequence{
    width:100%;overflow-x:auto;overflow-y:hidden;
    scrollbar-width:none;-webkit-overflow-scrolling:touch
  }
  .news-ticker-sequence::-webkit-scrollbar{display:none}
  .news-ticker-sequence[aria-hidden="true"]{display:none}
}

/* ========================================
   NEWS TICKER LOAD SMOOTHING
   ======================================== */

.news-ticker{
  min-height:42px;
}

.news-ticker[hidden]{
  display:block !important;
  visibility:visible;
}

.news-ticker[hidden]::before{
  content:'LATEST NEWS:';
  display:flex;
  align-items:center;
  min-height:42px;
  padding-left:var(--space);
  color:var(--ink);
  font-size:13px;
  font-weight:900;
  letter-spacing:1.2px;
}

.news-ticker[hidden] .news-ticker-viewport{
  display:none;
}

/* ========================================
   MAIN NAVIGATION UNDERLINES
   ======================================== */

/* Normal navigation links */
#navigation > a:not(.button){
  position:relative;
  text-decoration:none !important;
  border-bottom:1px solid #9a9a9a !important;
  padding-bottom:6px;
}

/* Current page */
#navigation > a:not(.button)[aria-current="page"]{
  border-bottom-color:var(--red) !important;
}

/* Find a Show remains a button */
#navigation > a.button{
  border-bottom:0 !important;
}

/* ========================================
   NEWS CATEGORY FILTER HEADING
   ======================================== */

.news-category-heading h2{
  font-family:inherit;
  font-size:clamp(28px,3vw,42px);
  font-weight:900;
  line-height:1;
  letter-spacing:-1px;
  margin:12px 0 22px;
}

/* News category links */

.news-category-link{
  color:inherit;
  text-decoration:none;
  transition:color .2s ease;
}

.news-category-link:hover,
.news-category-link:focus-visible{
  color:var(--ink);
}

/* Filtered news page back button spacing */

.news-category-back{
  margin-top:24px;
  margin-bottom:40px;
}

@media(max-width:680px){
  .news-category-back{
    margin-top:24px;
    margin-bottom:24px;
  }
}

/* Homepage news category links */

.homepage-news-meta .news-category-link{
  color:var(--red);
}

.homepage-news-meta .news-category-link:hover,
.homepage-news-meta .news-category-link:focus-visible{
  color:var(--ink);
}

/* ========================================
   HOMEPAGE AUDIENCE REVIEWS PARALLAX
   ======================================== */

.audience-reviews{
  background-color:var(--ink);
  background-image:
    linear-gradient(
      rgba(16,16,16,.75),
      rgba(16,16,16,.75)
    ),
    url('/assets/theatre-parallax.jpg');
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  background-attachment:fixed;
}

@media(max-width:900px){
  .audience-reviews{
    background-attachment:scroll;
    background-position:center center;
  }
}