.shows-page{overflow-x:hidden}
.shows-page .main-nav a.current{color:var(--pink)}
.shows-shell{width:min(75em,calc(100% - 3em));margin-inline:auto}
.shows-heading{text-align:center}
.shows-heading h1,.shows-heading h2{margin:0;font-family:Montserrat,sans-serif;font-size:3em;line-height:1.166667;font-weight:600;letter-spacing:-.01em}
.shows-heading h1 strong,.shows-heading h2 strong{font-weight:800}
.shows-heading p{margin:.5em 0 0;font-size:1.5em;line-height:1.166667;font-style:italic;font-weight:500}
.shows-intro{padding:13em 0 7.5em}
.show-filters{display:grid;grid-template-columns:repeat(3,15em);justify-content:center;gap:1em;margin-top:1.75em}
.show-filters label{display:block}
.show-filters select{width:100%;height:2.777778em;appearance:none;border:.0625em solid #000;border-radius:1em;background:#fff url('../assets/icons/icon-select.svg') right 1em center/1.333333em 1.333333em no-repeat;padding:0 3em 0 1.5em;color:#000;font-size:1.125em;line-height:1.25em;font-weight:700;letter-spacing:-.01em;cursor:pointer}
.show-filters .custom-select{position:relative}
.show-filters .custom-select.is-open{z-index:20}
.show-filters .custom-select-native{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.custom-select-trigger{display:flex;width:100%;height:2.777778em;align-items:center;justify-content:space-between;border:.0625em solid #000;border-radius:1em;outline:0;background:#fff;padding:0 3em 0 1.5em;color:#000;font:700 1.125em/1.25 Figtree,Arial,sans-serif;letter-spacing:-.01em;text-align:left;cursor:pointer}
.custom-select-trigger:focus-visible{box-shadow:0 0 0 .1875em rgba(255,64,161,.32)}
.custom-select-trigger::after{content:"";position:absolute;right:1em;width:1.333333em;height:1.333333em;background:url('../assets/icons/icon-select.svg') center/contain no-repeat;transition:transform .2s ease}
.custom-select.is-open .custom-select-trigger::after{transform:rotate(180deg)}
.custom-select-menu{position:absolute;top:calc(100% + .25em);left:0;display:none;width:100%;overflow:hidden;border:.0625em solid #000;border-radius:1.25em;background:#fff;padding:.75em 0;box-shadow:0 .5em 1em rgba(0,0,0,.12)}
.custom-select.is-open .custom-select-menu{display:block;animation:filter-menu-in .18s cubic-bezier(.22,1,.36,1)}
.custom-select-option{display:block;width:100%;border:0;background:transparent;padding:.5em 1.25em;color:#000;font:500 1.125em/1.35 Figtree,Arial,sans-serif;text-align:left;cursor:pointer}
.custom-select-option:hover,.custom-select-option:focus-visible{background:#f8e8f0;outline:0}
.custom-select-option[aria-selected="true"]{font-weight:700}
@keyframes filter-menu-in{from{opacity:0;transform:translateY(-.375em)}to{opacity:1;transform:translateY(0)}}
/* Desktop: 4 columns instead of 3. Image, fonts, and the inter-card
   gap are all reduced to fit a meaningfully narrower card (~360px ->
   ~276px at the shell's 1200px max width), while keeping every piece
   of text the 3-column card showed -- title, description, time,
   location, button -- nothing is hidden, only made smaller.

   Height is a floor (min-height via height:auto), not fixed, unlike
   the old 3-column card: that 48.5em was hand-tuned for exactly this
   column count's image+text proportions (see the removed comment this
   replaced) and doesn't carry over to a narrower 4th column, and a
   fixed height sized for typical content clips or overlaps whenever a
   real title/venue runs longer than the sample text it was tuned
   against -- the same class of bug already fixed for the mobile
   2-column layout below and the homepage rail.

   Selectors touching h2/description/meta margins are qualified with
   .shows-page for specificity parity with css/custom.css's own
   .shows-grid overrides of those same properties (custom.css loads
   after this file) -- without it, this file's plain .shows-grid rules
   would lose to custom.css's defaults despite appearing later here. */
.shows-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:auto;gap:2em;margin-top:3.75em}
.shows-grid .event-card{height:auto;min-height:34em;display:flex;flex-direction:column;padding:0 .1875em 1.125em;border-radius:1.25em}
.shows-grid .event-date{flex:0 0 2.5em;height:2.5em;min-height:2.5em;padding-top:.6em;font-size:1em}
.shows-grid .event-card>img{width:100%;height:auto;flex:0 0 auto;aspect-ratio:1/1;object-fit:cover;border-radius:1em}
.shows-grid .event-card>.event-image-link{display:block;width:100%;height:auto;flex:0 0 auto;border-radius:1em;overflow:hidden}
.shows-grid .event-card>.event-image-link>img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.shows-grid .card-body{display:flex;flex:1;flex-direction:column;padding:.9375em .9375em 0}
.shows-page .shows-grid .card-body h2{min-height:0;margin:0 0 .625rem;font-size:1.25em;line-height:1.2;font-weight:700;letter-spacing:-.01em}
.shows-page .shows-grid .card-description{margin:0 0 .625rem;font-size:.75em;line-height:1.333333}
.shows-page .shows-grid .meta{margin:0 0 .625rem;font-size:.8125em}
.shows-grid .meta img{width:1.25em;height:1.25em}
.shows-page .shows-grid .event-card .meta:last-of-type{margin-bottom:.625rem}
.shows-grid .event-card .button{margin-top:0;min-height:2.75em;padding:.75em 1em;font-size:.8125em}
.shows-grid .event-card[hidden]{display:none!important}

.faq-section{height:auto;min-height:0;padding:7.5em 0;background:var(--blush)}
.faq-heading{margin-bottom:2.75em}
.faq-list{display:grid;gap:1em}
.faq-list details{overflow:hidden;border-radius:2em;background:#fff}
.faq-list summary{position:relative;display:flex;min-height:4.333333em;align-items:center;padding:1.333333em 3.75em 1.333333em 1.5em;list-style:none;font-size:1.5em;line-height:1.166667;font-weight:600;cursor:pointer}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";position:absolute;right:1.5em;top:1.5em;width:1.333333em;height:1.333333em;background:url('../assets/icons/icon-plus.svg') center/contain no-repeat}
.faq-list details[open] summary::after{background-image:url('../assets/icons/icon-minus.svg')}
.faq-list details.is-closing summary::after{background-image:url('../assets/icons/icon-plus.svg')}
.faq-list details.is-animating{will-change:height}
.faq-answer{padding:0 5.75em 2em 1.8em;font-size:1.25em;line-height:1.4;opacity:0;transform:translateY(-.5em);transition:opacity .2s ease,transform .28s cubic-bezier(.22,1,.36,1)}
.faq-list details[open]:not(.is-closing) .faq-answer{opacity:1;transform:translateY(0)}
.faq-answer p{margin:0 0 1.2em}
.faq-answer p:last-child{margin-bottom:0}
.faq-answer a{color:var(--pink);font-weight:700;text-decoration:underline}

.shows-newsletter{padding:7.5em 0 6.25em}
.shows-newsletter .newsletter-grid{display:block}
.shows-newsletter .newsletter-grid>div{width:50em;margin:0 auto 2.5em}
.shows-newsletter .subscribe-form{display:grid;width:50em;height:5em;grid-template-columns:1.5em minmax(0,1fr) 15.4375em;grid-template-rows:1fr;gap:1em;align-items:center;margin-inline:auto;padding:.25em .25em .25em 1.5em}
.shows-newsletter .input-icon{position:static;display:flex;align-items:center;padding:0}
.shows-newsletter .input-icon img{width:1.5em;height:1.5em}
.shows-newsletter .subscribe-form input{position:static;width:100%;height:1.4em;padding:0;min-width:0}
.shows-newsletter .subscribe-form .button{position:static;width:100%;height:auto;min-height:0;grid-column:auto;align-self:stretch;margin:0}

@media(max-width:68.75em){
  .shows-shell{width:min(40.5em,calc(100% - 6em))}
  .shows-intro{padding:9.75em 0 6em}
  .shows-heading h1,.shows-heading h2{font-size:2.5em;line-height:1.2}
  .shows-heading h1{max-width:34.125em;margin-inline:auto}
  .shows-heading p{font-size:1.25em;line-height:1.4}
  .show-filters{grid-template-columns:repeat(3,12.8125em);margin-top:1.375em}
  .show-filters select{font-size:1.125em}
  .custom-select-trigger,.custom-select-option{font-size:1.125em}
  .shows-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:44.25em;gap:2em;margin-top:3em}
  .shows-grid .event-card{min-width:0;height:44.25em;padding-bottom:1.5em}
  .shows-grid .event-date{height:3.111111em;min-height:3.111111em;flex-basis:3.111111em;font-size:1.125em;padding-top:.888889em}
  .shows-grid .card-body{padding:1.25em 1.25em 0}
  .shows-grid .card-body h2{min-height:2.333333em;font-size:1.5em;line-height:1.166667}
  .shows-grid .meta{font-size:1em}
  .shows-grid .event-card .button{margin-top:auto;min-height:3.5em;font-size:1em}
  .faq-section{height:auto;min-height:0;padding:6em 0 4em}
  .faq-heading{margin-bottom:2.875em;text-align:left}
  .faq-list details{border-radius:2em}
  .faq-list details[open]{height:auto}
  .faq-list summary{min-height:4em;padding:1.333333em 3.75em 1.333333em 1.333333em;font-size:1.5em}
  .faq-list summary::after{right:1.333333em;top:1.333333em;width:1.333333em;height:1.333333em}
  .faq-answer{padding:0 4.6em 1.6em 1.6em;font-size:1.25em}
  .shows-newsletter{height:26.875em;min-height:26.875em;padding:6em 0 0}
  .shows-newsletter .newsletter-grid>div,.shows-newsletter .subscribe-form{width:100%}
  .shows-newsletter .newsletter-grid>div{margin-bottom:3.25em}
  .shows-newsletter .subscribe-form{height:5em;grid-template-columns:1.5em minmax(0,1fr) 15.4375em}
}

@media(min-width:37.5em) and (max-width:68.75em){
  .shows-shell{width:calc(100% - 6em);max-width:none}
  .shows-grid .event-card:nth-child(3){display:none}
}

@media(min-width:46.5625em) and (max-width:68.75em) and (orientation:portrait){
  .shows-grid{grid-auto-rows:calc(44.25em + (100vw - 46.5em)*.5)}
  .shows-grid .event-card{height:calc(44.25em + (100vw - 46.5em)*.5)}
}

@media(max-width:37.4375em){
  .shows-shell{width:calc(100% - 4em)}
  .shows-intro{padding:8.25em 0 5em}
  .shows-heading h1,.shows-heading h2{font-size:2em;line-height:1.125}
  .shows-heading h1{max-width:none}
  .shows-heading p{margin-top:.666667em;font-size:1.125em;line-height:1.333333}
  .show-filters{grid-template-columns:1fr;gap:.75em;margin-top:1.5em}
  .show-filters select{height:3.125em;padding-left:.75em;font-size:1em;background-position:right .5em center}
  .custom-select-trigger{height:3.125em;padding-left:.75em;padding-right:2.75em;font-size:1em}
  .custom-select-trigger::after{right:.5em}
  .custom-select-option{padding:.5em .75em;font-size:1em}
  /* Two columns instead of one below 600px, with everything sized down
     to fit. Card/image widths are fluid (100% of their grid track)
     rather than pinned to a fixed px value -- a fixed value is what
     caused the homepage rail's image to overflow past the card's edge,
     since it didn't account for .event-card's own "invisible" 4px
     hover border (see css/custom.css); fluid widths always fill
     correctly regardless of border width. Card height is a floor
     (min-height via height:auto), not fixed, so a longer real
     title/venue than the Figma sample text grows the card instead of
     clipping the button against the card's overflow:hidden edge --
     same fix as the homepage rail. The archive-only description
     paragraph is hidden here: four clamped lines of body copy aren't
     legible at half this card width. */
  .shows-grid{width:auto;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:1rem;margin:2rem 0 0}
  .shows-grid .event-card{width:100%;min-width:0;max-width:none;height:auto;min-height:0;padding:0 .1875rem .75rem;border-radius:1rem}
  .shows-grid .event-date{height:auto;min-height:0;flex:0 0 auto;padding:.375rem .25rem;font-size:.625rem;line-height:1.2;white-space:normal}
  .shows-grid .event-card>img,
  .shows-grid .event-card>.event-image-link{width:100%;height:auto;flex:0 0 auto;aspect-ratio:1;border-radius:.75rem;overflow:hidden}
  .shows-grid .event-card>.event-image-link>img{width:100%;height:100%;aspect-ratio:1;object-fit:cover;border-radius:.75rem}
  .shows-grid .card-body{padding:.625rem .5rem 0}
  .shows-grid .card-body h2{min-height:0;margin-bottom:.375rem;font-size:.8125rem;line-height:1.25}
  .shows-page .shows-grid .card-description{display:none}
  .shows-grid .meta{gap:.25rem;font-size:.625rem;line-height:1.2}
  .shows-grid .meta img{width:.875rem;height:.875rem}
  .shows-grid .event-card .meta:last-of-type{margin-bottom:.5rem}
  .shows-grid .event-card .button{width:100%;height:2rem;min-height:2rem;margin-top:auto;border-radius:.5rem;font-size:.625rem}
  .shows-grid .optional-mobile-event{display:none}
  .faq-section{height:auto;min-height:0;padding:5em 0 4em}
  .faq-heading{margin-bottom:2.5em}
  .faq-list{gap:.75em;margin-inline:-.25em}
  .faq-list details{border-radius:1.5em}
  .faq-list summary{min-height:4em;padding:1.2em 3.4em 1.2em 1.2em;font-size:1.25em;line-height:1.2;font-weight:700}
  .faq-list summary::after{right:1.2em;top:1.2em;width:1.6em;height:1.6em}
  .faq-answer{padding:0 3.6875em 1.5em 1.5em;font-size:1em;line-height:1.5}
  .shows-newsletter{height:29.75em;min-height:29.75em;padding:5em 0}
  .shows-newsletter .newsletter-grid>div{margin-bottom:2.5em}
  .shows-newsletter .subscribe-form{height:9em}
  .shows-newsletter .subscribe-form{position:relative;display:block;padding:.5em}
  .shows-newsletter .input-icon{position:absolute;left:1.25em;top:1.5em;padding:0}
  .shows-newsletter .subscribe-form input{position:absolute;left:3.5em;top:1.5em;width:calc(100% - 4.75em);height:1.75em;padding:0;font-size:1.25em}
  .shows-newsletter .subscribe-form .button{position:absolute;left:.5em;top:4.75em;width:calc(100% - 1em);height:3.75em;min-height:3.75em}
}

@media(prefers-reduced-motion:reduce){
  .faq-list details{scroll-behavior:auto}
  .faq-answer{transition:none;transform:none}
  .custom-select-menu{animation:none!important}
  .custom-select-trigger::after{transition:none}
}

/* Match the homepage's balanced landscape-tablet page gutters. */
@media(min-width:68.8125em) and (max-width:84.9375em){
  .shows-shell{
    width:calc(100% - var(--responsive-inline-space,10em));
    max-width:none
  }
}

@media(max-width:37.4375em){
  .shows-newsletter .subscribe-form{display:grid;box-sizing:border-box;height:9rem;grid-template-columns:2.25rem minmax(0,1fr);grid-template-rows:4.25rem 3.75rem;gap:0 .75rem;align-items:center;padding:.5rem;border-color:#a9869c;border-radius:1.25rem}
  .shows-newsletter .subscribe-form:focus-within{border-color:#a9869c}
  .shows-newsletter .input-icon{position:static;grid-column:1;grid-row:1;width:1.5rem;height:1.5rem;margin-left:.75rem;padding:0}
  .shows-newsletter .input-icon img{width:1.5rem;height:1.5rem}
  .shows-newsletter .subscribe-form input{position:static;grid-column:2;grid-row:1;align-self:center;width:100%;height:2rem;padding:0;font-size:1.25rem;line-height:2rem}
  .shows-newsletter .subscribe-form .button{position:static;grid-column:1/-1;grid-row:2;align-self:stretch;width:100%;height:3.75rem;min-height:3.75rem;margin:0;border-radius:.875rem;font-size:1rem}
}

/* Fluid tablet spacing between FAQ, Ticket Alerts, and footer. */
@media(min-width:37.5em) and (max-width:68.75em){
  .shows-page .shows-newsletter{
    height:auto;
    min-height:0;
    padding:clamp(4rem,7vw,5rem) 0 clamp(4.5rem,8vw,5.5rem)
  }
  .shows-page .shows-newsletter .newsletter-grid{
    display:flex;
    height:auto;
    flex-direction:column;
    align-items:center;
    gap:clamp(2rem,4vw,2.5rem)
  }
  .shows-page .shows-newsletter .newsletter-grid>div,
  .shows-page .shows-newsletter .subscribe-form{width:100%;margin:0}
}

/* Figma 183:715 — tablet show cards fill their 308px grid columns. */
@media(min-width:37.5em) and (max-width:68.75em){
  .shows-grid .event-card{
    width:100%;
    min-width:0;
    max-width:none
  }
}