/* component-classes.css
   All styling for wp-content/themes/<theme>/inc-blocks/*.php components.
   No inline <style> blocks in component files - this is the only place
   component-specific CSS lives. One section per component, named after
   its inc-blocks filename. Loads after gate.css, so a rule here can
   win over a utility class. */

/* -- TEXT -- */
/* Fully covered by the gate.css utilities - nothing component-specific
   yet. Section kept as the place for it when it's needed. */
/* -- TEXT END -- */

/* -- TEXT IMAGE -- */
.text-image img {
    object-fit: cover;
    height: 100%;
}
/* -- TEXT IMAGE END -- */

/* -- HERO BANNER -- */
/* Exactly one screen - never taller, never shorter. Set here rather than
   with Bootstrap's .vh-100 because that is height:100vh!important, which
   would block the dvh line below. dvh discounts mobile browser chrome, so
   the hero does not run under the address bar and force a scroll. */
.hero-banner {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100vh;
    height: 100dvh;
}
/* Fills the article whether or not there is an image, so a colour-only
   hero covers the full screen. */
.hero-banner .row {
    position: relative;
    z-index: 1;
    height: 100%;
}
.hero-banner-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
/* -- HERO BANNER END -- */

/* -- SINGLE IMAGE -- */
.single-image img {
    display: block;
}
/* -- SINGLE IMAGE END -- */

/* -- DOUBLE IMAGE -- */
.double-image-figure {
    margin: 0;
}
.double-image-photo {
    display: block;
    width: 100%;
    height: auto;
}
/* Sits under the photo, flush with its left edge, in the section's own
   text colour. */
.double-image-caption {
    text-align: left;
}
/* -- DOUBLE IMAGE END -- */

/* -- TESTIMONIAL -- */
/* blockquote carries a browser default margin that would knock the quote
   out of line with the padding wrapper. */
.testimonial-quote {
    margin: 0;
}
/* -- TESTIMONIAL END -- */

/* -- ITEM LIST -- */
/* One value per row with a rule between rows: a top border on the first
   row, separators between, nothing closing the foot. */
.item-list-items {
    margin: 0;
    padding: 0;
    list-style: none;
}
.item-list-row {
    padding-block: var(--global-spacing-12);
    border-bottom: 1px solid currentColor;
}
.item-list-row:first-child {
    border-top: 1px solid currentColor;
}
.item-list-row:last-child {
    border-bottom: none;
}
/* -- ITEM LIST END -- */

/* -- VIDEO -- */
.video-poster {
    position: relative;
    background: transparent;
    cursor: pointer;
}
.video-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid var(--light);
    display: flex;
    align-items: center;
    justify-content: center;
}
.video-play-triangle {
    width: 0;
    height: 0;
    margin-left: 6px;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-left: 22px solid var(--light);
}
/* -- VIDEO END -- */

/* -- HOME HERO -- */
/* One screen of photograph with the logo (or the title) centred across
   it. With Logo Animation on, js/script.js plays the logo into the header
   over --logo-travel of scrolling while the stage stays pinned. */
.home-hero {
    --logo-travel: 150vh;
    position: relative;
    overflow: clip;
    height: 100vh;
    height: 100dvh;
    min-height: 32rem;
    background-color: var(--dark);
}
/* Full-bleed despite the container's padding, which it restores for the
   row inside. */
.home-hero-stage {
    position: relative;
    height: 100%;
    margin-inline: calc(var(--bs-gutter-x) * -0.5);
    padding-inline: calc(var(--bs-gutter-x) * 0.5);
}
@media (prefers-reduced-motion: no-preference) {
    .has-js .home-hero-animated {
        height: calc(100dvh + var(--logo-travel));
    }
    .has-js .home-hero-animated .home-hero-stage {
        position: sticky;
        top: 0;
        height: 100vh;
        height: 100dvh;
        min-height: 32rem;
    }
    /* Stage 1 has no header to clear. */
    .has-js .home-hero-animated .home-hero-inner {
        padding-top: var(--global-spacing-24);
    }
}
.home-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Video mode: the 16:9 player scaled to cover the stage, as object-fit
   does for the photograph - at least as wide as the stage and as tall,
   centred, the overflow cropped. Container units measure the stage. */
.home-hero-video {
    overflow: hidden;
    container-type: size;
    pointer-events: none;
}
.home-hero-video-toggle {
    position: absolute;
    right: var(--page-inset);
    bottom: var(--global-spacing-24);
    z-index: 2;
    /* Just the icon - no circle - in a 44px box, so it is still easy to
       tap. A soft shadow keeps the white icon visible over light video. */
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.6));
    cursor: pointer;
}
/* Pause: two bars. Paused (.is-paused): a play triangle. */
.home-hero-video-toggle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 22px;
    transform: translate(-50%, -50%);
    background: linear-gradient(90deg, currentColor 0 6px, transparent 6px 12px, currentColor 12px 18px);
}
.home-hero-video-toggle.is-paused::before {
    width: 18px;
    height: 22px;
    margin-left: 2px;
    background: currentColor;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.home-hero-video-toggle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}
.home-hero-video iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100cqw, 177.78cqh);
    height: max(100cqh, 56.25cqw);
    border: 0;
    transform: translate(-50%, -50%);
}
/* No z-index here: positioned and later in the source is enough to sit
   over the photograph, and a stacking context would trap the pinned
   words underneath the header. */
.home-hero .row,
.home-hero .col-12 {
    position: relative;
    height: 100%;
}
.home-hero-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding-top: calc(var(--header-height) + var(--global-spacing-24));
    container-type: size;
}
/* As wide as the hero allows without overrunning its height (the logo
   file is 3446 x 1589). */
.home-hero-wordmark {
    display: flex;
    flex-direction: column;
    flex: none;
    width: min(100cqi, 100cqb * 3446 / 1589);
    /* Safari measures the container units across the hero's padding as
       well, which ran the logo to the window's edges; percentages of the
       padded box hold it inside in every browser. */
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 3446 / 1589;
}
/* Each word is its half of the logo file, masked over the red the same
   way as .site-logo. The file splits cleanly at half height, in the gap
   between the lines. */
.home-hero-word {
    display: block;
    flex: 1 1 0;
    background-color: var(--brand-red);
    -webkit-mask: url("../assets/images/logos/gate-logo.svg") 0 0 / 100% 200% no-repeat;
    mask: url("../assets/images/logos/gate-logo.svg") 0 0 / 100% 200% no-repeat;
    transform-origin: 0 0;
}
.home-hero-word-bottom {
    -webkit-mask-position: 0 100%;
    mask-position: 0 100%;
}
/* js/script.js pins each word where it sat and moves it from there. */
.home-hero-word.is-pinned {
    position: fixed;
    z-index: 101;
    margin: 0;
    pointer-events: none;
    will-change: transform;
}
/* Intro, from the brand loop: GATE drops in from its top edge, then
   THEATRE rises out of its baseline - each clipped at that edge, as if
   from behind a rule. translate and clip-path rather than transform,
   which js/script.js drives on scroll - so the two never collide. */
@media (prefers-reduced-motion: no-preference) {
    /* Where they're printed, in the hero, they wait: js/script.js moves them
       into .logo-flight at once, and moving an element restarts its
       animation (GATE rose twice). The late start here is only a fallback
       in case the script never runs. */
    .has-js .home-hero-word {
        animation: home-hero-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1.5s both;
    }
    .has-js .home-hero-word-top {
        animation-name: home-hero-drop;
    }
    .has-js .home-hero-word-bottom {
        animation-delay: 1.95s;
    }
    /* Moved: the intro proper. */
    .has-js .logo-flight .home-hero-word {
        animation-delay: 0.2s;
    }
    .has-js .logo-flight .home-hero-word-bottom {
        animation-delay: 0.65s;
    }
    /* Docked in the header (and only then - never out in the hero), the
       words replay the intro when the header's logo link under them is
       hovered or focused, as .site-logo does elsewhere. */
    .site-header:has(.site-logo:hover, .site-logo:focus-visible) ~ .logo-flight.is-intro-done.is-docked .home-hero-word {
        animation: home-hero-rise-again 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .site-header:has(.site-logo:hover, .site-logo:focus-visible) ~ .logo-flight.is-intro-done.is-docked .home-hero-word-top {
        animation-name: home-hero-drop-again;
    }
    .site-header:has(.site-logo:hover, .site-logo:focus-visible) ~ .logo-flight.is-intro-done.is-docked .home-hero-word-bottom {
        animation-delay: 0.2s;
    }
}
/* Once the intro has run (js/script.js), it is dropped, so taking the
   pointer off the logo can't set it going again. */
.logo-flight.is-intro-done .home-hero-word {
    animation: none;
}
@keyframes home-hero-drop {
    from {
        translate: 0 -100%;
        clip-path: inset(100% 0 0 0);
    }
    to {
        translate: 0 0;
        clip-path: inset(0);
    }
}
/* The header run moves the logo inside each word's own box (its mask
   slides, the box stays put): docked, the words are scaled down by
   transform, and a translate would be measured on their full hero size -
   it threw them well outside the header. Each word's mask is the logo at
   twice its height, GATE at 0 0 and THEATRE at 0 100%. GATE comes down
   from the top edge of its box, THEATRE up from the bottom of its own. */
@keyframes home-hero-drop-again {
    from {
        -webkit-mask-position: 0 100%;
        mask-position: 0 100%;
        clip-path: inset(0 0 100% 0);
    }
    to {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
        clip-path: inset(0);
    }
}
@keyframes home-hero-rise-again {
    from {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
        clip-path: inset(100% 0 0 0);
    }
    to {
        -webkit-mask-position: 0 100%;
        mask-position: 0 100%;
        clip-path: inset(0);
    }
}
@keyframes home-hero-rise {
    from {
        translate: 0 100%;
        clip-path: inset(0 0 100% 0);
    }
    to {
        translate: 0 0;
        clip-path: inset(0);
    }
}
/* The phone menu panel opens over the page; the header shows its own
   logo for as long as it is open. Once the animation runs the words live
   in .logo-flight, straight under <body> (see js/script.js). */
.site-header.menu-open ~ main .home-hero-wordmark,
.site-header.menu-open ~ .logo-flight {
    visibility: hidden;
}
.home-hero-title {
    color: var(--brand-red);
    font-size: var(--font-size-xxl);
    text-align: center;
}
/* -- HOME HERO END -- */

/* -- PRODUCTION CARDS -- */
/* Three columns; a wide card spans two. Rows alternate - wide + slim,
   then slim + wide (production_cards.php sets the shape). */
.production-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--global-spacing-16);
    /* So the cards can size their images off the grid's width (cqi). */
    container-type: inline-size;
}
.production-card-media {
    position: relative;
}
.production-card-image {
    display: block;
    width: 100%;
    /* Every image the same height - the narrow column's width at the
       design's 459:566 - so the wide card's photo is a wider crop, not a
       taller one. */
    height: calc((100cqi - 2 * var(--global-spacing-16)) / 3 * 566 / 459);
    object-fit: cover;
}
.production-card-wide {
    grid-column: span 2;
}
/* A placeholder here has its height set above, so it drops its own 4:3 -
   with both, its width would follow the height and push the narrow
   column wider. (Phones set 4:3 again below.) */
.production-card-image.image-placeholder {
    aspect-ratio: auto;
}
.production-card-tags {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-wrap: wrap;
}
.production-card-tags .tag {
    border-radius: 0;
}
.production-card-text {
    display: flex;
    flex-direction: column;
    gap: var(--global-spacing-16);
}
.production-card-text a {
    text-decoration: none !important;
}
/* No photo: a block in the brand's red (wide cards) or black (slim
   cards) - so the colours alternate with the shapes - the title large in
   the other colour, as the design's placeholder cards. Square, like the tags. The title is the same size
   on every wide card, but never wider than the block will take its
   longest word (--label-chars, from gate_image()); on a slim card
   js/script.js grows it to the block's width (--label-fit below). It is
   centred in the block, clear of the price tag above and an equal
   margin below. */
.production-card .hover-card-media:has(.image-placeholder),
.production-card .production-card-image.image-placeholder {
    border-radius: 0;
}
.production-card-slim .image-placeholder {
    background-color: var(--dark);
    color: var(--accent);
}
.production-card .image-placeholder-inner {
    --tag-height: calc(2 * var(--global-spacing-12) + var(--font-size-subheading));
    top: calc(var(--tag-height) + var(--placeholder-inset));
    left: var(--global-spacing-16);
    right: var(--global-spacing-16);
    bottom: calc(var(--tag-height) + var(--placeholder-inset));
    --placeholder-inset: var(--global-spacing-16);
    padding-inline: 0;
}
.production-card .image-placeholder-label {
    font-size: min(4.75rem, 17cqi, calc(86cqi / (var(--label-chars, 6) * 0.95)));
    line-height: 0.9;
}
/* A slim block (the narrow column; every card on a phone): the title is
   grown to fill the block's width, 16px in from each side, in line with
   the tag's text (js/script.js, Placeholder titles). */
@container (max-width: 560px) {
    .production-card .image-placeholder-label {
        --label-fit: 1;
    }
}
@media (max-width: 768px) {
    .production-cards-grid {
        grid-template-columns: 1fr;
    }
    .production-card-wide {
        grid-column: auto;
    }
    .production-card .production-card-image {
        height: auto;
        aspect-ratio: 4 / 3;
    }
}
/* -- PRODUCTION CARDS END -- */

/* -- IMAGE FEATURE -- */
/* Photograph under a 20% black wash, red header on top, optional
   link list at the foot, its left edge on the title's. */
.image-feature {
    position: relative;
    overflow: hidden;
    background-color: var(--dark);
    color: var(--brand-red);
}
.image-feature-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.image-feature::after {
    content: "";
    position: absolute;
    inset: 0;
    /* The 20% wash, deepened behind the title and copy at the top so the
       red type reads on any photograph. */
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0, rgba(0, 0, 0, 0.45) 35%, rgba(0, 0, 0, 0) 70%),
        rgba(0, 0, 0, 0.2);
}
.image-feature-row,
.image-feature-row > .col-12 {
    position: relative;
    z-index: 1;
    min-height: inherit;
}
/* The header centres its title in a 1fr / auto / 1fr grid, so where the
   title starts depends on the word and the screen. The section shares
   that grid (subgrid down to the title row) and the links span from the
   title's column to the right edge, so they always start where it does. */
.image-feature-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto 1fr;
    min-height: 100vh;
}
/* With no photo, header (and any links under it) centred in the height. */
.image-feature-no-image .image-feature-inner {
    grid-template-rows: auto auto;
    align-content: center;
}
.image-feature .section-header,
.image-feature .section-header-row {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    column-gap: 0;
}
.image-feature .section-header {
    row-gap: var(--global-spacing-32);
}
.image-feature .section-header-caption {
    grid-column: 1 / -1;
    justify-self: center;
    font-family: var(--font-family-serif);
}
/* Pushed to the foot of the section, closed with a rule. They start a
   third of the way across - the line the split sections' content starts
   on - rather than at the title's left edge, which on a wide title came
   out too far. A third of the section, so laptop and iMac keep the same
   proportions. */
.image-feature-links-row {
    grid-column: 1 / -1;
    margin-left: calc(100% / 3);
    align-self: end;
    padding-top: var(--global-spacing-96);
}
.image-feature-links {
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid currentColor;
}
.image-feature-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--global-spacing-16);
    padding-block: var(--global-spacing-16);
    border-top: 1px solid currentColor;
    text-decoration: none !important;
}
.image-feature-link svg {
    /* Gate Loud's arrow, at the size it has in the font: as tall as the
       caps beside it. */
    width: 0.9em;
    height: auto;
    flex: none;
    transition: transform 0.2s ease;
}
/* Hover spreads the letters, as on the header nav (.site-header .menu a);
   the arrow sits at the far end, so the word has room to grow into. */
.image-feature-link span {
    letter-spacing: 0;
    transition: letter-spacing 0.3s ease;
}
.image-feature-link:hover span,
.image-feature-link:focus-visible span {
    letter-spacing: 0.03em;
}
@media (prefers-reduced-motion: reduce) {
    .image-feature-link span {
        transition: none;
    }
}
.image-feature-link:hover svg,
.image-feature-link:focus svg {
    transform: translateX(4px);
}
@media (max-width: 1100px) {
    /* The header stacks and centres here (see .section-header-row), so
       the title and link take the full width. */
    .image-feature .section-header-title,
    .image-feature .section-header-link,
    .image-feature-links-row {
        grid-column: 1 / -1;
    }
    .image-feature-links-row {
        margin-left: 0;
    }
}
/* -- IMAGE FEATURE END -- */

/* -- STORY GRID FILTER -- */
/* The category buttons over the Story Grid: label type in an outline, the
   chosen one filled with the accent, as the tags are. */
.story-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--global-spacing-12);
}
.story-filter-button {
    --cap-nudge: 0.12em;
    padding: calc(var(--global-spacing-12) + var(--cap-nudge)) var(--global-spacing-16) calc(var(--global-spacing-12) - var(--cap-nudge));
    border: 1px solid currentColor;
    border-radius: var(--border-radius-tag);
    background: transparent;
    color: inherit;
    font-family: var(--font-family-label);
    font-size: var(--font-size-subheading);
    font-weight: 800;
    line-height: 1;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.story-filter-button[aria-pressed="true"] {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--dark);
}
.story-filter-button:hover,
.story-filter-button:focus-visible {
    border-color: var(--dark);
    background: var(--dark);
    color: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
    .story-filter-button {
        transition: none;
    }
}
/* Cards the filter leaves out (js/script.js), whatever display the card sets. */
.story-grid-grid > [hidden] {
    display: none !important;
}
/* -- STORY GRID FILTER END -- */

/* -- STORY CARDS -- */
.story-cards-grid {
    gap: var(--global-spacing-16);
    flex-wrap: nowrap;
}
/* Half of the row less half the gap each - col-md-6 alone is 50%, which
   the gap would push past the rule. Fixed, not shared out, so a lone
   story (one related story on a show) stays the standard card size
   instead of stretching across the whole row. */
.story-cards-grid > [class*="col-"] {
    flex: 0 0 calc(50% - var(--global-spacing-16) / 2);
    max-width: calc(50% - var(--global-spacing-16) / 2);
}
.story-card-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 680 / 566;
    object-fit: cover;
}
.story-card-title a {
    text-decoration: none !important;
}
@media (max-width: 768px) {
    .story-cards-grid {
        flex-wrap: wrap;
        row-gap: var(--global-spacing-32);
    }
    .story-cards-grid > [class*="col-"] {
        flex: 1 1 100%;
        max-width: 100%;
    }
}
/* More than two stories: a slider (js/script.js), two cards to a view
   (one on a phone). The arrows (styled with the gallery's) sit level with
   the middle of the photos, not the whole card. */
.story-cards-splide {
    container-type: inline-size;
}
.story-cards-splide .splide__arrow {
    top: calc((100cqi - var(--global-spacing-16)) / 2 * 566 / 680 / 2);
}
@media (max-width: 768px) {
    .story-cards-splide .splide__arrow {
        top: calc(100cqi * 566 / 680 / 2);
    }
}
/* -- STORY CARDS END -- */

/* -- CTA CARDS -- */
/* The columns (col-xl-3 col-lg-4 col-md-6 col-12) and the gutter (g-3)
   are Bootstrap's; each column just stretches its card to the row's
   height, so cards side by side match. */
.cta-cards-grid > [class*="col-"] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.cta-card {
    /* Square, and 4:3 on big screens (below) so it isn't huge on an iMac.
       Content that needs more room still grows it, and flex-grow keeps two
       cards side by side the same height. */
    /* An explicit width, so content taller than the square grows the
       card down: Safari otherwise keeps the square by widening it, past
       the edge of the screen. */
    width: 100%;
    min-width: 0;
    aspect-ratio: 1 / 1;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    background-color: var(--dark);
    color: var(--brand-red);
}
/* Red rules top and bottom, button pinned to the foot. */
.cta-card-inner {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
}
.cta-card-text {
    /* At least this much air above the button - its margin-top: auto
       shrinks to nothing when the text fills the card (on a phone). */
    padding-bottom: var(--global-spacing-32);
    /* Full width; held to 80% only on very large screens (below), where a
       line across the whole card gets too long. */
    max-width: 100%;
    /* The body text, as on every other card (accent cards, Tiers) - no
       size of its own. */
}
.cta-card-button {
    display: block;
    margin-top: auto;
    /* One step below the H5 size the buttons had: 20-24px. */
    font-size: var(--font-size-intro-small);
    /* Gate Loud's capitals sit high in the line box, so the padding shifts
       the text down to centre the caps (as on Book now). */
    --cap-nudge: 0.12em;
    padding: calc(var(--global-spacing-24) + var(--cap-nudge)) var(--global-spacing-32) calc(var(--global-spacing-24) - var(--cap-nudge));
    border-radius: 12px;
    background-color: var(--brand-red);
    color: var(--dark) !important;
    text-align: center;
    text-decoration: none !important;
}
/* Whole words only: a label too wide for a narrow card is shrunk to fit
   (data-fit, js/script.js) rather than broken mid-word. A block inside
   the button, so it's measured against the space inside the padding and
   stays centred. */
.cta-card-button-label {
    display: block;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}
@media (min-width: 1600px) {
    .cta-card {
        aspect-ratio: 1 / 0.75;
    }
    .cta-card-text {
        max-width: 80%;
    }
}
@media (max-width: 768px) {
    .cta-card-button {
        padding: calc(var(--global-spacing-24) + var(--cap-nudge)) var(--global-spacing-16) calc(var(--global-spacing-24) - var(--cap-nudge));
    }
}
/* -- CTA CARDS END -- */

/* -- FEATURE SPLIT -- */
/* Rules above and below, a rule between image and text. */
.feature-split-frame {
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
}
.feature-split-media {
    border-right: 1px solid currentColor;
}
/* Stacked on a phone: the photo takes the full width (its right padding
   is for the side-by-side layout). */
@media (max-width: 767.98px) {
    .feature-split-media .padding-right-32 {
        padding-right: 0;
    }
}
.feature-split-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 656 / 636;
    object-fit: cover;
}
.feature-split-text {
    display: flex;
    align-items: center;
    justify-content: center;
}
/* reset.css sets text-align on every div, so centring has to be applied
   to the text block itself rather than inherited. */
.feature-split-text div,
.feature-split-text h2 {
    text-align: center;
}
/* One line, as designed; js/script.js (Fit) scales it to the column.
   The text block takes the column's full width, so a title too long for
   it overflows the title (which Fit catches) rather than the column. */
.feature-split-text > div {
    width: 100%;
    min-width: 0;
}
.feature-split-text h2 {
    white-space: nowrap;
}
@media (max-width: 768px) {
    .feature-split-media {
        border-right: 0;
        border-bottom: 1px solid currentColor;
    }
}
/* -- FEATURE SPLIT END -- */

/* -- PAGE HERO -- */
/* Clears the fixed header itself so its colour runs up behind it. */
.page-hero {
    position: relative;
    overflow: hidden;
    padding-top: calc(var(--header-height) + var(--global-spacing-64));
    padding-bottom: var(--global-spacing-64);
    text-align: center;
}
/* reset.css left-aligns every div, so the centring is set on the
   wrappers themselves rather than inherited. */
.page-hero-inner,
.page-hero-text,
.page-hero-season {
    position: relative;
    z-index: 1;
    text-align: center;
}
.page-hero-title {
    margin: 0;
    font-size: var(--font-size-xl);
}
.page-hero-intro {
    max-width: 50vw;
    margin-inline: auto;
}
@media (max-width: 768px) {
    .page-hero-intro {
        max-width: 100%;
    }
}
/* Colour: the accent as a block, title and intro over a closing rule -
   the header's own rule above stands in as the top one. */
.page-hero-colour {
    background-color: var(--accent);
    color: var(--dark);
}
.page-hero-colour .page-hero-text {
    padding-block: var(--global-spacing-64);
    border-bottom: 1px solid currentColor;
}
/* Under a hero's closing rule: 32px, as on the home page's sections -
   64 left the rule floating. */
.page-hero.page-hero-colour,
.page-hero.page-hero-image {
    padding-bottom: var(--global-spacing-32);
}
/* Image: photograph under a dark wash, accent type. */
/* main > section is a flex column, so the content is pushed to the foot
   with justify-content, not align-items. */
/* The screen less a peek of the next section, so there is always a hint
   of more below - up to the 900px designed. On a tall screen that leaves
   more of the next section showing; on a laptop the hero shrinks to fit. */
.page-hero-image {
    --hero-peek: var(--global-spacing-96);
    min-height: min(900px, calc(100svh - var(--hero-peek)));
    justify-content: flex-end;
    background-color: var(--dark);
    color: var(--accent);
}
/* The admin toolbar takes 32px of the screen (see HEADER in gate.css). */
@media (min-width: 783px) {
    body.admin-bar .page-hero-image {
        min-height: min(900px, calc(100svh - 32px - var(--hero-peek)));
    }
}

.page-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.page-hero-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 160px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0.6));
}
.page-hero-image .page-hero-title {
    font-size: var(--font-size-xxl);
}
/* A story's title is a sentence, not a page name: a size down (as the
   colour heroes), so a long one stays on the photo instead of running
   past the screen. */
body.single-story .page-hero-image .page-hero-title {
    font-size: var(--font-size-xl);
}
.page-hero-image .page-hero-text {
    padding-bottom: var(--global-spacing-32);
    border-bottom: 1px solid currentColor;
}
/* The breadcrumb places itself against the hero, not the inner column. */
.page-hero-image .page-hero-inner {
    position: static;
}
/* Pinned just under the header rather than stacked on the title, which
   sits at the foot of the hero - so on a short screen it stays up top. */
.page-hero-breadcrumb {
    position: absolute;
    top: calc(var(--header-height) + var(--global-spacing-32));
    left: var(--page-inset);
    right: var(--page-inset);
    z-index: 1;
    /* The hero's own text colour: black on a colour ground, white on black;
       white over a photograph (below). */
    color: currentColor;
    font-size: var(--font-size-body);
    text-align: left;
}
.page-hero-breadcrumb a {
    text-decoration: none !important;
}
.page-hero-image .page-hero-breadcrumb {
    color: var(--light);
}
/* Not over a photograph, the breadcrumb sits in the page: top left, just
   under the header's rule, with the hero's content starting where it did
   (the hero's top padding gives up what the breadcrumb takes). */
.page-hero:not(.page-hero-image) {
    padding-top: calc(var(--header-height) + var(--global-spacing-24));
}
.page-hero:not(.page-hero-image) .page-hero-breadcrumb {
    position: static;
    margin-bottom: var(--global-spacing-24);
    line-height: 1;
}
/* Year: the season set huge in outline across the full width, the title
   solid and centred over it. Both share one grid cell. */
.page-hero-stack {
    display: grid;
    align-items: center;
    container-type: inline-size;
    padding-bottom: var(--global-spacing-32);
    border-bottom: 1px solid currentColor;
}
.page-hero-stack > * {
    grid-area: 1 / 1;
    /* A grid item won't shrink below its longest word by default, so a
       long title on a phone widened its box past the screen - and the
       Fit script, which compares the type with its box, never caught it. */
    min-width: 0;
}
/* 30.4cqi spans the width with "2027" (3.29em wide); data-fill in
   js/script.js corrects it for any other kicker. */
.page-hero-season {
    font-family: var(--font-family-label);
    text-transform: uppercase;
    font-size: 30.4cqi;
    white-space: nowrap;
    font-weight: 800;
    line-height: 0.8;
    color: transparent;
    -webkit-text-stroke: 1px var(--accent);
    /* Trims the line box to the digits' ink, which overshoots the top by
       0.094em and stops 0.14em short of the bottom - so the rule below
       sits close and the title centres on the figures. */
    margin: 0.094em 0 -0.14em;
}
/* Gate Loud capitals sit high in their line; the cap-nudge centres them. */
.page-hero-stack .page-hero-title {
    position: relative;
    top: 0.12em;
    font-size: var(--font-size-xxl);
}
/* On a phone the title wraps to two lines and outgrows the year, so the
   two stop sharing a cell: the title sits on top, the year below it. */
@media (max-width: 768px) {
    .page-hero-stack {
        row-gap: var(--global-spacing-24);
    }
    .page-hero-stack .page-hero-text {
        grid-area: 1 / 1;
    }
    .page-hero-stack .page-hero-season {
        grid-area: 2 / 1;
    }
    .page-hero-stack .page-hero-title {
        top: 0;
    }
}
/* Dark: black ground, white type. */
.page-hero-dark {
    background-color: var(--dark);
    color: var(--light);
}
/* Jump to: fixed to the foot of the screen on the left, so it is always
   to hand - its foot level with the show page's Book tickets
   (--show-book-bottom, see SHOW HERO). */
.jump-to {
    position: fixed;
    z-index: 90;
    left: var(--page-inset);
    bottom: clamp(1rem, 0.4rem + 2.5vw, 3rem);
    text-align: left;
}
.site-header.menu-open ~ .jump-to {
    visibility: hidden;
}
/* It floats over every section, so its colours follow what is behind it
   (script.js adds .is-on-dark from the background under it): black, or
   white over a dark section - never lost against the ground. The panel
   takes the same pair. */
.jump-to {
    --jump-bg: var(--dark);
    --jump-fg: var(--light);
}
.jump-to.is-on-dark {
    --jump-bg: var(--light);
    --jump-fg: var(--dark);
}
/* Styled and behaving like the header's Book now and its Quick book
   panel, in white - turned upside down, as the button sits at the foot
   of the screen: open, the button squares off its top and a strip joins
   it to the panel, which rises from its top-left corner. script.js sets
   --jump-bottom from the button. */
.jump-to {
    --jump-size: max(var(--font-size-xsmall), var(--header-type-size));
    --jump-gap: calc(var(--jump-size) * 0.75);
}
.jump-to-button {
    --cap-nudge: 0.12em;
    position: relative;
    padding: calc(var(--global-spacing-12) + var(--cap-nudge)) var(--global-spacing-16) calc(var(--global-spacing-12) - var(--cap-nudge));
    border: 0;
    border-radius: var(--border-radius-tag);
    background-color: var(--jump-bg);
    color: var(--jump-fg);
    font-family: var(--font-family-display);
    font-size: var(--jump-size);
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
}
/* Hover: letters and outline in the button's own colour on no fill,
   rather than the page accent the other filled buttons take (gate.css,
   Filled buttons). Not while open. */
.jump-to-button:not([aria-expanded="true"]):hover,
.jump-to-button:not([aria-expanded="true"]):focus-visible {
    background-color: transparent !important;
    box-shadow: inset 0 0 0 1px var(--jump-bg);
    color: var(--jump-bg) !important;
}
.jump-to-button[aria-expanded="true"] {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background-color: var(--jump-bg) !important;
    box-shadow: none;
    color: var(--jump-fg) !important;
}
.jump-to-button[aria-expanded="true"]::after {
    content: "";
    position: absolute;
    bottom: 100%;
    right: 0;
    left: 0;
    height: calc(var(--jump-gap) + 1px);
    background: inherit;
}
.jump-to-list {
    position: fixed;
    z-index: 90;
    bottom: calc(var(--jump-bottom, 0px) + var(--jump-gap));
    left: var(--page-inset);
    width: max(20rem, calc(var(--jump-size) * 24));
    max-width: calc(100vw - 2 * var(--global-spacing-16));
    max-height: calc(100dvh - var(--jump-bottom, 0px) - var(--jump-gap) - var(--header-height) - var(--global-spacing-16));
    margin: 0;
    padding: calc(var(--jump-size) * 1.2);
    overflow-y: auto;
    list-style: none;
    border-radius: var(--border-radius-tag) var(--border-radius-tag) var(--border-radius-tag) 0;
    background-color: var(--jump-bg);
    color: var(--jump-fg);
    font-size: var(--jump-size);
}
.jump-to-list[hidden] {
    display: none;
}
/* reset.css forces a list's side padding to 0 (!important), so the
   panel's side inset is a margin on the items instead. */
.jump-to-list li {
    margin-inline: calc(var(--jump-size) * 1.2);
    border-top: 1px solid currentColor;
}
.jump-to-list li:last-child {
    border-bottom: 1px solid currentColor;
}
.jump-to-list a {
    display: block;
    padding: calc(0.8em + 0.12em) 0 calc(0.8em - 0.12em);
    color: inherit !important;
    font-family: var(--font-family-display);
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: letter-spacing 0.3s ease;
}
.jump-to-list a:hover,
.jump-to-list a:focus-visible {
    letter-spacing: 0.015em;
}
/* -- PAGE HERO END -- */

/* -- SPLIT TEXT IMAGE -- */
.split-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 898 / 561;
    object-fit: cover;
}
/* -- SPLIT TEXT IMAGE END -- */

/* -- SPLIT SECTION -- */
/* The blocks keep their source components' look (split_section.php); the
   gap between them is set once here, so any order is even. */
.split-section-blocks > .split-block + .split-block {
    margin-top: var(--global-spacing-32);
}
.split-section-figure {
    margin: 0;
}
.split-section-caption {
    font-size: var(--font-size-xsmall);
}
/* -- SPLIT SECTION END -- */

/* -- SPLIT CARDS -- */
.split-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--global-spacing-16);
}
@media (max-width: 768px) {
    .split-cards-grid {
        grid-template-columns: 1fr;
    }
}
/* -- SPLIT CARDS END -- */

/* -- SPLIT ACCORDION -- */
/* Accordion styles live with the split sections in gate.css - the map
   section uses them too. */
/* -- SPLIT ACCORDION END -- */

/* -- SPLIT PEOPLE -- */
.split-people-featured {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--global-spacing-16);
}
.person {
    margin: 0;
}
.person-image,
.split-people-side-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 430 / 451;
    object-fit: cover;
}
/* The portrait of whoever is hovered in the list (js/script.js swaps
   .is-active), under the title in the title column; every portrait is
   stacked in the one cell. Sticky so it stays in view down a long list.
   The title column is a flex item, so the sticky box gets its full
   height to travel in. */
.split-people-side {
    display: grid;
    position: sticky;
    top: calc(var(--header-height) + var(--header-top) + var(--global-spacing-24));
    max-width: 340px;
}
.split-people .split-frame > :first-child > div {
    height: 100%;
}
.split-people-side-image {
    grid-area: 1 / 1;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.split-people-side-image.is-active {
    opacity: 1;
}
.split-people-heading {
    margin: 0;
    padding-block: var(--global-spacing-48) var(--global-spacing-12);
}
.split-people-heading:first-child {
    padding-top: 0;
}
.split-people-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid currentColor;
}
.split-people-list + .split-people-list {
    border-top: 0;
}
.split-people-list li {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: baseline;
    gap: var(--global-spacing-16);
    padding-block: var(--global-spacing-12);
    border-bottom: 1px solid currentColor;
    font-size: var(--font-size-body);
}
/* Names and roles the same 16px, sharing a baseline. */
.split-people-list li > * {
    font-size: inherit;
}
/* Once the columns stack (and on touch screens, with no hover), there's
   no portrait to swap beside the list. */
@media (max-width: 991px) {
    .split-people-side {
        display: none;
    }
}
/* -- SPLIT PEOPLE END -- */

/* -- SPLIT MAP -- */
.split-map-address {
    margin: 0;
}
/* -- SPLIT MAP END -- */

/* -- NEWS CARDS -- */
.news-cards .padding-bottom-96 {
    padding-bottom: var(--global-spacing-32);
}
.news-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--global-spacing-16);
}
.news-card-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 445 / 547;
    object-fit: cover;
}
.news-card a {
    text-decoration: none !important;
}
@media (max-width: 768px) {
    .news-cards-grid {
        grid-template-columns: 1fr;
    }
}
/* -- NEWS CARDS END -- */

/* -- CONTACT DETAILS -- */
.contact-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--global-spacing-32) var(--global-spacing-64);
}
.contact-group p {
    margin: 0;
}
.contact-group-text p + p {
    margin-top: 1em;
}
.contact-group-text a {
    color: inherit;
}
@media (max-width: 768px) {
    .contact-details-grid {
        grid-template-columns: 1fr;
    }
}
/* -- CONTACT DETAILS END -- */

/* -- EXPLORE MORE -- */
.explore-more-title {
    margin: 0;
    /* Gate Loud's capitals stand about 0.065em above their box at this
       line-height; adding it back leaves the same clear 32px under the
       rule as the other headings and rules. */
    padding-top: calc(var(--global-spacing-32) + 0.065em);
    border-top: 1px solid currentColor;
    /* The medium title size, as the split sections' titles. */
    font-size: var(--font-size-medium);
    line-height: var(--line-height-medium);
}
/* Each card spans three shared rows - image, title, text - through
   subgrid, so the two images share one row (its height set by the wide
   image's aspect ratio), the titles line up, and the grid grows with
   whatever copy is underneath rather than letting it spill past the
   rule. */
.explore-more-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    column-gap: var(--global-spacing-16);
    padding-bottom: var(--global-spacing-32);
    border-bottom: 1px solid currentColor;
}
.explore-card {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    align-content: start;
}
.explore-card-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 908 / 566;
    object-fit: cover;
}
/* The narrow card's image fills the image row the wide one sets. It is
   taken out of flow so its own (much taller) natural height can't push
   that row taller. */
.explore-card:nth-child(2) .explore-card-image {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
}
.explore-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    text-decoration: none !important;
}
.explore-card-link svg {
    /* Gate Loud's arrow, at the size it has in the font: as tall as the
       caps beside it - and lifted to centre on them, as flex centring
       sits it on the line box, below the caps (measured). */
    position: relative;
    top: -0.16em;
    width: 0.9em;
    height: auto;
}
/* Stacked on a phone, so there is no wide image to follow: the narrow
   card's image takes the same shape as the first. */
@media (max-width: 768px) {
    .explore-more-grid {
        grid-template-columns: 1fr;
    }
    .explore-card + .explore-card {
        margin-top: var(--global-spacing-16);
    }
    .explore-card:nth-child(2) .explore-card-image {
        position: static;
        height: auto;
        aspect-ratio: 908 / 566;
    }
}
/* -- EXPLORE MORE END -- */

/* -- LINK CARDS -- */
.link-cards-title {
    margin: 0;
    border-top: 1px solid currentColor;
    font-size: var(--font-size-medium);
    line-height: var(--line-height-medium);
}
.link-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--global-spacing-16);
}
.link-card {
    display: block;
    padding: var(--global-spacing-32);
    border-radius: 8px;
    background-color: var(--accent);
    color: var(--dark) !important;
    text-decoration: none !important;
}
.link-cards-black .link-card {
    background-color: var(--dark);
    color: var(--accent) !important;
}
.ground-accent .link-cards-accent .link-card {
    background-color: var(--dark);
    color: var(--accent) !important;
}
/* Rules top and bottom, as on the accent cards; the arrow pinned to the
   foot. */
.link-card-inner {
    display: flex;
    flex-direction: column;
    gap: var(--global-spacing-16);
    min-height: 256px;
    height: 100%;
    padding-block: var(--global-spacing-24);
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
}
@media (max-width: 768px) {
    .link-card {
        padding: var(--global-spacing-16);
    }
}
.link-card-kicker {
    font-size: var(--font-size-body);
}
.link-card-text {
    max-width: 30rem;
}
.link-card-arrow {
    margin-top: auto;
    align-self: flex-end;
}
/* Hover (a linked card), as the accent cards: the title spreads, left
   edge fixed, and the arrow nudges on. */
a.link-card {
    --card-spread: 0em;
}
a.link-card .link-card-title {
    letter-spacing: var(--card-spread);
    transition: letter-spacing 0.3s ease;
}
a.link-card .link-card-arrow svg {
    transition: transform 0.3s ease;
}
a.link-card:hover,
a.link-card:focus-visible {
    --card-spread: 0.03em;
}
a.link-card:hover .link-card-arrow svg,
a.link-card:focus-visible .link-card-arrow svg {
    transform: translateX(6px);
}
@media (prefers-reduced-motion: reduce) {
    a.link-card .link-card-title,
    a.link-card .link-card-arrow svg {
        transition: none;
    }
}
/* -- LINK CARDS END -- */

/* -- SHOW GRID -- */
.show-grid-title {
    font-size: var(--font-size-medium);
}
.show-grid-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--global-spacing-32) var(--global-spacing-16);
    /* So the cards can size their images off the grid's width (cqi). */
    container-type: inline-size;
}
/* Mosaic: a wide card spans two of the three columns. Every image is the
   same height - a single column's width at the design's 459:566 - so the
   wide card's photo is a wider crop rather than a taller one. */
.show-card-wide {
    grid-column: span 2;
}
.show-grid-grid .show-card-image {
    aspect-ratio: auto;
    height: calc((100cqi - 2 * var(--global-spacing-16)) / 3 * 566 / 459);
}
/* The promo card ("Become a member") in the last gap: a square, not
   stretched to the row (which also holds the cards' dates, titles and
   credits) - it grows past square only if its copy needs the room. */
.show-grid-grid .promo-card {
    align-self: start;
    aspect-ratio: 1 / 1;
}
@media (max-width: 768px) {
    .show-grid-grid {
        grid-template-columns: 1fr;
    }
    .show-card-wide {
        grid-column: auto;
    }
    /* One column: every image the same shape, 4:3 - as the home page's
       cards and the no-photo placeholders on a phone. */
    .show-grid-grid .show-card-image,
    .show-grid-grid .show-card-wide .show-card-image {
        aspect-ratio: 4 / 3;
        height: auto;
    }
    .show-grid-grid .promo-card {
        aspect-ratio: auto;
    }
}
/* A show card with no photo, when it's slim (the narrow column; every
   card on a phone): the title grows to fill the block's width, 16px in
   from each side and clear of the tags, as on the slim production cards
   (js/script.js, Placeholder titles). Wide cards keep their size. */
@container (max-width: 560px) {
    .show-card .image-placeholder-inner {
        --tag-height: calc(2 * var(--global-spacing-12) + var(--font-size-subheading));
        --placeholder-inset: var(--global-spacing-16);
        top: calc(var(--tag-height) + var(--placeholder-inset));
        bottom: calc(var(--tag-height) + var(--placeholder-inset));
        left: var(--global-spacing-16);
        right: var(--global-spacing-16);
        padding-inline: 0;
    }
    .show-card .image-placeholder-label {
        --label-fit: 1;
    }
}
/* Tags in a card's corner (show, content and production cards): a
   little tighter at the sides, so two sit side by side on a slim card.
   When they still don't fit, js/script.js stacks them (.is-stacked) as
   a column the width of the longest, so the pair stays even. */
:is(.show-card-tags, .production-card-tags) .tag {
    padding-inline: var(--global-spacing-12);
}
:is(.show-card-tags, .production-card-tags).is-stacked {
    flex-direction: column;
    align-items: stretch;
}
/* One system for the labels, whatever they say: the first is the season
   red with black type; the second is black with red type - or dark grey
   (#2e2e2e) on a black placeholder card, where black wouldn't show. Red
   on that grey is 3.2:1, which passes WCAG AA only as large text (bold,
   18.66px and up), so card labels are set at 19px. Season colours are
   held to 3:1 on the grey (functions/season_colour.php). */
:is(.show-card-tags, .production-card-tags) {
    --tag-grey: #2e2e2e;
}
:is(.show-card-tags, .production-card-tags) .tag {
    font-size: 1.1875rem;
}
:is(.show-card-tags, .production-card-tags) > .tag:first-child {
    background-color: var(--accent);
    color: var(--dark) !important;
    box-shadow: none;
}
:is(.show-card-tags, .production-card-tags) > .tag:nth-child(n+2) {
    background-color: var(--dark);
    color: var(--accent) !important;
    box-shadow: none;
}
.production-card-slim .production-card-media:has(.image-placeholder) .production-card-tags > .tag:nth-child(n+2) {
    background-color: var(--tag-grey);
}
/* No photo: wide cards red, slim cards black - so the colours alternate
   with the shapes, as on Production Cards. The second label goes dark
   grey on the black ones (see the label system below). */
.show-grid-grid .show-card:not(.show-card-wide) .image-placeholder {
    background-color: var(--dark);
    color: var(--accent);
}
.show-grid-grid .show-card:not(.show-card-wide) .show-card-media:has(.image-placeholder) .show-card-tags > .tag:nth-child(n+2) {
    background-color: var(--tag-grey, #2e2e2e);
}
/* On a red placeholder the first label inverts - black with red type -
   as red on red wouldn't show; the second goes dark grey (as on a black
   placeholder) so the pair still reads as two. Black placeholders (slim
   cards) keep the red first label. Not on a red page, where placeholders
   are black. */
:where(body:not(.ground-accent)) :is(.production-card-media, .show-card-media):has(.image-placeholder) :is(.show-card-tags, .production-card-tags) > .tag:first-child {
    background-color: var(--dark);
    color: var(--accent) !important;
}
:is(.production-card-media, .show-card-media):has(.image-placeholder) :is(.show-card-tags, .production-card-tags) > .tag:nth-child(n+2) {
    background-color: var(--tag-grey, #2e2e2e);
}
.production-card-slim .production-card-media:has(.image-placeholder) .production-card-tags > .tag:first-child,
.show-grid-grid .show-card:not(.show-card-wide) .show-card-media:has(.image-placeholder) .show-card-tags > .tag:first-child {
    background-color: var(--accent);
    color: var(--dark) !important;
}
/* A card's credits / copy held to a readable line on a wide card. */
:is(.show-card-text, .production-card-text) > p {
    max-width: 32rem;
}
/* -- SHOW GRID END -- */

/* -- CONTENT CARDS -- */
.content-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--global-spacing-32) var(--global-spacing-16);
}
.content-cards-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.content-cards-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.content-cards-four .content-card-image {
    aspect-ratio: 333 / 467;
}
@media (max-width: 992px) {
    .content-cards-four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 768px) {
    .content-cards-grid {
        grid-template-columns: 1fr;
    }
}
/* -- CONTENT CARDS END -- */

/* -- PRODUCTION ARCHIVE -- */
.production-archive {
    position: relative;
}
/* The black head runs edge to edge and up behind the header. */
.production-archive-head {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 680px;
    margin-inline: calc(var(--global-spacing-32) * -1);
    margin-bottom: var(--global-spacing-64);
    padding-top: calc(var(--header-height) + var(--global-spacing-96)) !important;
    background-color: var(--dark);
    color: var(--light);
    text-align: center;
}
.production-archive-head h1 {
    max-width: min(10em, 100%);
    margin: 0 auto;
}
.production-archive-head p {
    text-align: center;
}
/* Above the first year, on the page's white. */
.archive-decades {
    display: flex;
    flex-direction: column;
    width: 140px;
    margin-block: var(--global-spacing-48) var(--global-spacing-32);
    padding: var(--global-spacing-12) var(--global-spacing-16);
    border-radius: 6px;
    background-color: var(--dark);
    color: var(--light);
}
.archive-decades a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--global-spacing-12);
    border-bottom: 1px solid currentColor;
    font-family: var(--font-family-label);
    text-transform: uppercase;
    font-weight: 800;
    text-decoration: none !important;
}
.archive-decades a:last-child {
    border-bottom: 0;
}
.archive-decades svg {
    /* Gate Loud's arrow, at the size it has in the font: as tall as the
       caps beside it. */
    width: 0.9em;
    height: auto;
}
.archive-year {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--global-spacing-32);
    padding-block: var(--global-spacing-32) var(--global-spacing-64);
    border-top: 1px solid currentColor;
    scroll-margin-top: var(--header-height);
}
.archive-year-number {
    margin: 0;
    font-family: var(--font-family-label);
    text-transform: uppercase;
    font-size: calc(84 * var(--px));
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px currentColor;
    -webkit-text-stroke-color: var(--page-fg);
}
.archive-rows {
    margin: 0;
    padding: 0;
    list-style: none;
}
.archive-row {
    display: grid;
    /* Dates get room for "12 APR-24 MAY" on one line; the credits give
       up the width. */
    grid-template-columns: 220px minmax(0, 1.4fr) minmax(0, 0.8fr);
    gap: var(--global-spacing-16) var(--global-spacing-48);
    padding-block: var(--global-spacing-24);
    border-bottom: 1px solid currentColor;
    text-decoration: none !important;
}
.archive-row-title {
    font-family: var(--font-family-label);
    font-size: calc(36 * var(--px));
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
}
.archive-row:hover .archive-row-title {
    color: var(--accent);
}
.archive-preview {
    position: fixed;
    z-index: 50;
    top: 0;
    left: 0;
    width: 320px;
    height: auto;
    pointer-events: none;
}
@media (max-width: 992px) {
    .archive-decades {
        display: none;
    }
    .archive-year,
    .archive-row {
        grid-template-columns: 1fr;
        gap: var(--global-spacing-12);
    }
    .archive-row-title {
        font-size: 1.75rem;
    }
}
/* -- PRODUCTION ARCHIVE END -- */

/* -- SHOW DETAILS -- */
.show-facts,
.info-grid-list {
    margin: 0;
}
.show-fact {
    padding-block: var(--global-spacing-16);
    border-top: 1px solid currentColor;
}
/* The first item in each column sits under the section's own rule, so
   it has none of its own (no doubled rule); the rest are ruled above. */
.info-grid-list > .show-fact:first-child {
    border-top: 0;
}
@media (min-width: 769px) {
    .info-grid-list > .show-fact:nth-child(2) {
        border-top: 0;
    }
}
.show-fact dd {
    margin: var(--global-spacing-12) 0 0;
}
/* Each line of a fact is its own block (Show times: Evening, Matinee),
   spaced apart - at line-height 1 they would touch. */
.show-fact-line {
    display: block;
}
.show-fact-line + .show-fact-line {
    margin-top: 8px;
}
.show-details-body p {
    /* Body copy: 16 at a line-height of 1.2, held to a readable line. */
    font-size: var(--font-size-body);
    line-height: 1.2;
    max-width: 46rem;
}
.show-details-body p + p {
    margin-top: 1em;
}
@media (max-width: 992px) {
    .show-facts {
        margin-bottom: var(--global-spacing-32);
    }
}
/* -- SHOW DETAILS END -- */

/* -- REVIEWS -- */
.reviews-list {
    display: flex;
    flex-direction: column;
    gap: var(--global-spacing-32);
}
.review {
    display: flex;
    flex-direction: column;
    gap: var(--global-spacing-16);
    margin: 0;
}
.review p {
    margin: 0;
}
.review-stars {
    letter-spacing: 0.3em;
}
/* -- REVIEWS END -- */

/* -- CREDITS -- */
.credits-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--global-spacing-32) var(--global-spacing-16);
}
.credit-image {
    display: block;
    width: 99px;
    height: 99px;
    object-fit: cover;
}
.profile-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 429 / 441;
    object-fit: cover;
}
/* Stacked on a phone: the photo takes the full width (its right padding
   is for the side-by-side layout) and leaves a gap before the label. */
@media (max-width: 767.98px) {
    .profile-media {
        padding-right: 0 !important;
        padding-bottom: var(--global-spacing-24);
    }
}
@media (max-width: 768px) {
    .credits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* -- CREDITS END -- */

/* -- INFO GRID -- */
/* No margin: with no rule above, the row's own padding is the gap, the
   same as between the item's paragraphs. */
.info-grid-list .info-grid-dropdowns {
    margin-top: 0;
}
.info-grid-list .info-grid-dropdowns summary {
    padding-block: var(--global-spacing-12);
}
/* Drop-down rows: the item's own type, bold, and a rule only between
   rows - none above the first or below the last, so a single row has none. */
.info-grid-list .info-grid-dropdowns .accordion-item {
    border-top: 0;
    border-bottom: 0;
}
.info-grid-list .info-grid-dropdowns .accordion-item + .accordion-item {
    border-top: 1px solid currentColor;
}
.info-grid-dropdown-title {
    font-family: var(--font-family-base);
    font-size: var(--font-size-body);
    font-weight: 700;
    line-height: var(--line-height-body);
    text-transform: none;
}
.info-grid-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--global-spacing-32);
}
@media (max-width: 768px) {
    .info-grid-list {
        grid-template-columns: 1fr;
    }
}
/* Packed (js/script.js): each item spans as many 1px rows as it is tall,
   so a column runs on under a short item instead of waiting for a taller
   one beside it - no gap under a closed drop-down. Still in source order,
   so screen readers and the phone's single column are unchanged. */
@media (min-width: 769px) {
    .info-grid-list.is-packed {
        grid-auto-rows: 1px;
        grid-auto-flow: row dense;
        row-gap: 0;
        align-items: start;
    }
    /* Each item keeps its column (1st, 3rd... left; 2nd, 4th... right), so
       nothing jumps across when a drop-down opens. */
    .info-grid-list.is-packed > :nth-child(odd) {
        grid-column: 1;
    }
    .info-grid-list.is-packed > :nth-child(even) {
        grid-column: 2;
    }
}
/* -- INFO GRID END -- */

/* -- TEXT IMAGES -- */
.text-images-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--global-spacing-16);
}
.text-images-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 429 / 527;
    object-fit: cover;
}
@media (max-width: 768px) {
    .text-images-grid {
        grid-auto-flow: row;
    }
}
/* -- TEXT IMAGES END -- */

/* -- GALLERY -- */
.gallery-title {
    font-size: var(--font-size-medium);
}
.gallery-image {
    display: block;
    width: auto;
    height: 527px;
    max-width: 85vw;
    object-fit: cover;
}
@media (max-width: 768px) {
    .gallery-image {
        height: 360px;
    }
}
/* Arrows: the site's chunky arrow (gate_arrow_icon()) on the accent, as
   the buttons are, turning dark on hover like Book now. Splide's own
   theme draws them as faded grey circles. */
.gallery .splide__arrow,
.story-cards .splide__arrow {
    width: 56px;
    height: 56px;
    border-radius: var(--border-radius-tag);
    background: var(--accent);
    color: var(--dark);
    opacity: 1;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.gallery .splide__arrow svg,
.story-cards .splide__arrow svg {
    width: 28px;
    height: auto;
    fill: currentColor;
}
.gallery .splide__arrow:hover:not(:disabled),
.gallery .splide__arrow:focus-visible,
.story-cards .splide__arrow:hover:not(:disabled),
.story-cards .splide__arrow:focus-visible {
    background: var(--dark);
    color: var(--accent);
    opacity: 1;
}
.gallery .splide__arrow:disabled,
.story-cards .splide__arrow:disabled {
    opacity: 0.4;
}
@media (prefers-reduced-motion: reduce) {
    .gallery .splide__arrow,
    .story-cards .splide__arrow {
        transition: none;
    }
}
/* -- GALLERY END -- */

/* -- ARCHIVE LINKS -- */
.archive-links-frame {
    padding-block: var(--global-spacing-32);
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
}
.archive-links-title {
    font-size: var(--font-size-medium);
}
.archive-links-row {
    display: flex;
    gap: var(--global-spacing-32);
    overflow-x: auto;
    scrollbar-width: none;
}
.archive-links-row a {
    flex: none;
    font-family: var(--font-family-display);
    text-transform: uppercase;
    font-size: var(--font-size-medium);
    font-weight: 900;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px var(--page-fg);
    text-decoration: none !important;
}
.archive-links-row a:hover {
    color: var(--accent);
    -webkit-text-stroke-color: var(--accent);
}
/* -- ARCHIVE LINKS END -- */

/* -- HOVER CARDS -- */
/* Any card whose image links somewhere (show cards, production cards,
   Explore More, story cards): hovering or focusing one of its links
   spreads the card's date and title, left edge fixed, like the header
   nav (on Explore More the title's arrow travels with it), and eases the
   photo in slightly closer inside its frame, which stays put. The serif
   text and the tags over the image stay still.
     .hover-card        the card
     .hover-card-media  the image's link wrapper - the frame */
.hover-card-media {
    position: relative;
    display: block;
    overflow: hidden;
}
.hover-card-media img {
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.hover-card:has(a:hover, a:focus-visible) .hover-card-media img {
    transform: scale(1.04);
}
.hover-card {
    --card-spread: 0em;
    /* The hover spread; js/script.js measures with it. */
    --card-spread-hover: 0.03em;
}
/* Text that would wrap onto another line when spread doesn't spread. */
.hover-card [data-no-spread] {
    --card-spread: 0em;
}
.hover-card h3,
.hover-card .font-label {
    letter-spacing: var(--card-spread);
    transition: letter-spacing 0.3s ease;
}
/* The dates keep the label size's default spacing under the spread. */
.hover-card .font-label.font-size-subheading {
    letter-spacing: calc(var(--tracking-label) + var(--card-spread));
}
/* Explore More: the arrow keeps its distance from the last letter as
   the title spreads (the margin takes back the trailing spacing) and
   nudges on, as on the other arrow links. */
.hover-card .explore-card-link svg {
    margin-left: calc(-1 * var(--card-spread));
    transition: margin-left 0.3s ease, transform 0.2s ease;
}
.hover-card:has(a:hover, a:focus-visible) .explore-card-link svg {
    transform: translateX(3px);
}
/* Text that also scroll-reveals: .has-js .text-reveal (gate.css, REVEALS)
   sets its own transition list and would drop the letter-spacing one, so
   the spread snapped. All three together - the reveal keeps its stagger
   delay, the spread starts at once. */
@media (prefers-reduced-motion: no-preference) {
    .has-js .hover-card h3.text-reveal,
    .has-js .hover-card .font-label.text-reveal {
        transition: opacity 1.5s cubic-bezier(0.33, 0.1, 0.25, 1),
            transform 1.5s cubic-bezier(0.33, 0.1, 0.25, 1),
            letter-spacing 0.3s ease;
        transition-delay: calc(var(--card-i, 0) * 0.1s + var(--text-i, 0) * 0.07s),
            calc(var(--card-i, 0) * 0.1s + var(--text-i, 0) * 0.07s),
            0s;
    }
    /* Likewise the photo's fade-in (.shutter-reveal) and its hover scale. */
    .has-js .hover-card-media .shutter-reveal {
        transition: opacity 1.5s cubic-bezier(0.33, 0.1, 0.25, 1),
            transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
        transition-delay: calc(var(--reveal-i, 0) * 0.18s), 0s;
    }
}
.hover-card:has(a:hover, a:focus-visible) {
    --card-spread: var(--card-spread-hover);
}
/* Left-aligned text, so the spread runs from the left edge to the right
   (the trailing space after the last letter just widens the line). While
   script.js measures the spread height it reserves, nothing animates. */
.is-measuring-cards .hover-card h3,
.is-measuring-cards .hover-card .font-label {
    transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
    .hover-card-media img,
    .hover-card .explore-card-link svg,
    .hover-card h3,
    .hover-card .font-label {
        transition: none;
    }
}
/* -- HOVER CARDS END -- */

/* -- SHOW HERO (single-show.php) -- */
/* A photograph hero. A current show: the title block ruled above and
   below, centred between the header and the fixed Book tickets button
   (.show-book). A past show: one screen, dates and title at the foot. */
/* The button's type, padding and distance from the screen's foot - the
   hero keeps that much (plus a gap) clear under the title. Set on both,
   as the button sits beside the hero, not in it. */
.show-hero,
.show-book,
.show-book-rest,
.gate-book-dialog {
    --show-book-size: clamp(1.5rem, 0.9rem + 1.5vw, 2.25rem);
    --show-book-pad: clamp(1rem, 0.5rem + 1.4vw, 2rem);
    --show-book-bottom: clamp(1rem, 0.4rem + 2.5vw, 3rem);
    /* The button's width, which the current show's title wraps to. */
    --show-measure: min(100vw - 2 * var(--global-spacing-16), max(58.333vw, 30rem));
}
.show-hero {
    position: relative;
    overflow: hidden;
    background-color: var(--dark);
    color: var(--accent);
    text-align: center;
}
.show-hero > .row {
    position: relative;
    z-index: 1;
}
.show-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* An even wash so the type reads anywhere on the photograph. */
.show-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.45);
}
/* reset.css sets text-align on the blocks themselves, so the hero's own
   centring does not reach them by inheritance. */
.show-hero-inner,
.show-hero-inner > *,
.show-hero-clip,
.show-hero-rise {
    text-align: center;
}
.show-hero-inner {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: var(--header-height);
    /* Book tickets' height (its Gate Loud line is 0.85 of the type size,
       like all Gate Loud text) and distance from the foot, plus 32px. */
    padding-bottom: calc(0.85 * var(--show-book-size) + 2 * var(--show-book-pad) + var(--show-book-bottom) + var(--global-spacing-32));
}
/* Logged in, the admin toolbar pushes the page down (see .admin-bar in
   gate.css), so the hero is that much shorter - or its foot, and the
   titles' rule, would sit behind Book tickets. */
body.admin-bar .show-hero-inner {
    min-height: calc(100vh - 32px);
    min-height: calc(100dvh - 32px);
}
/* The toolbar is 46px tall on phones. */
@media (max-width: 782px) {
    body.admin-bar .show-hero-inner {
        min-height: calc(100vh - 46px);
        min-height: calc(100dvh - 46px);
    }
}
.show-hero-dates,
.show-hero-title {
    margin: 0;
    font-family: var(--font-family-display);
    font-size: var(--font-size-xl);
    font-weight: 900;
    line-height: 0.8;
    text-transform: uppercase;
}
.show-hero-current .show-hero-dates {
    position: relative;
    /* Gate Loud's capitals stand 0.094em above their line box and stop
       0.14em short of its foot, so the top takes 0.234em more to leave
       the same gap above the figures (to the header's rule) as below
       them (to their own). em is the dates' size, after data-fit. */
    padding-top: calc(var(--global-spacing-24) + 0.234em);
    padding-bottom: var(--global-spacing-24);
}
/* The rules are drawn as pseudo-elements rather than borders, so the
   intro can slide them in (see SHOW HERO INTRO). */
.show-hero-current .show-hero-dates::after,
.show-hero-current .show-hero-titles::before,
.show-hero-current .show-hero-titles::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background-color: currentColor;
}
.show-hero-current .show-hero-dates::after,
.show-hero-current .show-hero-titles::after {
    bottom: 0;
}
.show-hero-current .show-hero-titles::before {
    top: 0;
}
/* A block, so the intro can move it - inline-block would add a strut's
   worth of space under the figures. */
.show-hero-dates > .show-hero-rise {
    display: block;
}
.show-hero-titles {
    margin-top: auto;
    padding-top: var(--global-spacing-64);
}
.show-hero-current .show-hero-titles {
    position: relative;
    padding-block: var(--global-spacing-32);
}
.show-hero-current .show-hero-title {
    max-width: var(--show-measure);
    margin-inline: auto;
    /* Gate Loud's capitals stand 0.094em above their box; this gives it
       back, so the gap under the rule above matches the one under the
       credit. */
    padding-top: 0.094em;
}
.show-hero-credit {
    margin: 0;
    padding-top: var(--global-spacing-24);
    font-size: var(--font-size-intro-medium);
}
/* A current show with a photograph, on scroll: the hero is two screens tall. The photograph
   is one screen, sticky, so it holds still while the title - centred in
   the first screen - scrolls up and out of the window; through the second
   screen the photograph is on its own, until the hero's foot meets the
   window's, it pins (HERO PIN) and the page slides up over it as usual.
   overflow: clip, not hidden - hidden would make the hero a scroller and
   stop the photograph sticking. */
.show-hero-current {
    overflow: clip;
}
.show-hero-current .show-hero-bg {
    position: sticky;
    inset: auto;
    top: 0;
    display: block;
    /* In the flow now, so the container's side padding would inset it:
       full window width again (the clip trims any scrollbar overlap). */
    width: 100vw;
    max-width: none;
    margin-inline: calc(50% - 50vw);
    height: 100vh;
    height: 100lvh;
    margin-bottom: -100vh;
    margin-bottom: -100lvh;
}
/* The second screen - only with a photograph to hold on. */
.show-hero-current.show-hero-has-photo > .row {
    /* Long enough for the title to scroll off before the hero pins;
       js/script.js measures it (and brings the page up early, over the
       photograph). This is the stand-in without script. */
    padding-bottom: 55vh;
    padding-bottom: var(--show-hero-hold, 55svh);
}
/* Compact hero (a show's hidden hero_variant meta = "compact", for
   comparing): one screen, no photo-only stretch, and the title block sits
   low, just above Book tickets. */
.show-hero-current.show-hero-compact > .row {
    padding-bottom: 0;
}
.show-hero-current.show-hero-compact .show-hero-titles {
    margin-top: auto;
    margin-bottom: 0;
}
.show-hero-current.show-hero-compact .show-hero-inner {
    padding-bottom: calc(0.85 * var(--show-book-size) + 2 * var(--show-book-pad) + var(--show-book-bottom) + var(--global-spacing-12));
}
/* No rule above the title block - just the one under the credit. */
.show-hero-current .show-hero-titles::before {
    content: none;
}
/* The title block sits at the foot of the first screen: the hero's
   padding-bottom (.show-hero-inner) leaves Book tickets plus 32px clear,
   so the rule is as far above the button as the credit is above the rule. */
.show-hero-current .show-hero-titles {
    margin-top: auto;
    margin-bottom: 0;
}
/* On a phone: the title block fills the screen from the header's line
   down to its own closing line, which sits above Book tickets by the
   same gap as the button sits above the foot of the screen
   (--show-book-bottom); the title and credits are centred between the
   two lines. */
@media (max-width: 767.98px) {
    .show-hero-current .show-hero-inner {
        padding-bottom: calc(0.85 * var(--show-book-size) + 2 * var(--show-book-pad) + 2 * var(--show-book-bottom));
    }
    .show-hero-current .show-hero-titles {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1 1 auto;
        margin-block: 0;
    }
}
/* Book tickets: held at the foot of the screen, over the content as it
   scrolls past, until the end of the page comes up - then it rests in its
   own place at the end of <main> (single-show.php prints it last), in the
   space it leaves above the newsletter band. Sticky, so no script. Its caps
   are nudged down like the header's (Gate Loud centres high - see
   .site-header .menu a). */
.show-book {
    --cap-nudge: 0.12em;
    position: sticky;
    bottom: var(--show-book-bottom);
    z-index: 90;
    display: block;
    width: var(--show-measure);
    margin: var(--show-book-bottom) auto 0;
    padding: calc(var(--show-book-pad) + var(--cap-nudge)) var(--global-spacing-16) calc(var(--show-book-pad) - var(--cap-nudge));
    border-radius: var(--border-radius-tag);
    background-color: var(--accent);
    color: var(--dark) !important;
    font-family: var(--font-family-display);
    font-size: var(--show-book-size);
    font-weight: 900;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none !important;
}
/* Hover: the fill becomes an outline, as on the header's Book now. The
   button floats over whatever is scrolling past, so it keeps a dark
   backing behind the outline to stay readable over a white page. */
.show-book {
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.show-book:hover,
.show-book:focus-visible {
    background-color: var(--dark);
    box-shadow: inset 0 0 0 1px currentColor;
    color: var(--accent) !important;
}
.site-header.menu-open ~ main .show-book {
    visibility: hidden;
}
/* The button's resting place at the end of the page: a band of the page
   colour from a gap above it to a gap below, pulled up under it, so the
   pinned hero photo doesn't show round it. Only at the end - the floating
   button has nothing behind it. */
.show-book-rest {
    --show-book-h: calc(0.85 * var(--show-book-size) + 2 * var(--show-book-pad));
    position: relative;
    z-index: 1;
    display: block;
    height: calc(var(--show-book-h) + 2 * var(--show-book-bottom));
    margin-top: calc(-1 * (var(--show-book-h) + var(--show-book-bottom)));
    background-color: var(--page-bg);
}
/* A past show: dates small and serif, title set huge in white, at the
   foot of the photograph with a fade behind it; no booking. */
.show-hero-past {
    color: var(--light);
}
.show-hero-past::after {
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 160px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.75));
}
.show-hero-past .show-hero-inner {
    padding-bottom: var(--global-spacing-64);
}
.show-hero-past .show-hero-dates {
    font-family: var(--font-family-serif);
    font-size: var(--font-size-intro-medium);
    font-weight: 400;
    line-height: 1.1;
    text-transform: none;
}
.show-hero-past .show-hero-title {
    padding-top: var(--global-spacing-24);
    font-size: clamp(4.5rem, 1.5rem + 12.8vw, 13rem);
}
/* SHOW HERO INTRO - a current show's hero plays in four steps on load:
     1. the photograph fades up from black
     2. the dates' rule drops in from the top of the screen; the titles'
        two rules rise from the bottom
     3. the dates rise out of the rule beneath them, the title and credit
        out of theirs (each .show-hero-rise inside a clip whose bottom
        edge is that rule)
     4. Book tickets grows from nothing to its full width, then its text
        fades in.
   Everything waits, paused at its start, until script.js adds
   .is-playing - once the photograph has loaded, so step 1 fades a real
   image. Scoped like the reveals: no JS or reduced motion, no intro. */
@media (prefers-reduced-motion: no-preference) {
    .has-js .show-hero-current .show-hero-bg,
    .has-js .show-hero-current .show-hero-dates::after,
    .has-js .show-hero-current .show-hero-titles::before,
    .has-js .show-hero-current .show-hero-titles::after,
    .has-js .show-hero-current .show-hero-rise,
    .has-js .show-hero-current ~ .show-book {
        animation-fill-mode: both;
        animation-play-state: paused;
    }
    .has-js .show-hero-current.is-playing .show-hero-bg,
    .has-js .show-hero-current.is-playing .show-hero-dates::after,
    .has-js .show-hero-current.is-playing .show-hero-titles::before,
    .has-js .show-hero-current.is-playing .show-hero-titles::after,
    .has-js .show-hero-current.is-playing .show-hero-rise,
    .has-js .show-hero-current.is-playing ~ .show-book {
        animation-play-state: running;
    }
    /* 1 */
    .has-js .show-hero-current .show-hero-bg {
        animation-name: show-intro-fade;
        animation-duration: 1.2s;
        animation-timing-function: ease;
    }
    /* 2 - the hero's overflow: hidden makes the screen edges the
       entrances. */
    .has-js .show-hero-current .show-hero-dates::after {
        animation-name: show-intro-from-top;
    }
    .has-js .show-hero-current .show-hero-titles::before,
    .has-js .show-hero-current .show-hero-titles::after {
        animation-name: show-intro-from-bottom;
    }
    .has-js .show-hero-current .show-hero-dates::after,
    .has-js .show-hero-current .show-hero-titles::before,
    .has-js .show-hero-current .show-hero-titles::after {
        animation-duration: 1s;
        animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
        animation-delay: 0.9s;
    }
    .has-js .show-hero-current .show-hero-titles::before {
        animation-delay: 1s;
    }
    /* 3 - the clips open upwards without limit but stop at the rule. */
    .has-js .show-hero-current .show-hero-dates {
        clip-path: inset(-100vh -100vw 0 -100vw);
    }
    .has-js .show-hero-current .show-hero-clip {
        clip-path: inset(-100vh -100vw calc(-1 * var(--global-spacing-32)) -100vw);
    }
    .has-js .show-hero-current .show-hero-rise {
        --rise-from: var(--global-spacing-32);
        animation-name: show-intro-rise;
        animation-duration: 1s;
        animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
        animation-delay: 1.9s;
    }
    .has-js .show-hero-current .show-hero-dates > .show-hero-rise {
        --rise-from: var(--global-spacing-24);
        animation-delay: 1.8s;
    }
    /* 4 - grows from its centre (clip-path, which leaves its sticky
       position alone), then the text fades in. */
    .has-js .show-hero-current ~ .show-book {
        animation-name: show-intro-grow, show-intro-text;
        animation-duration: 0.8s, 0.5s;
        animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1), ease;
        animation-delay: 2.7s, 3.5s;
        /* The text fade lets go when it ends, so the hover's colour change
           still reaches the text. */
        animation-fill-mode: both, backwards;
    }
    /* Opened partway down the page (js/script.js): no waiting on the
       hero's intro, which nobody is watching. */
    .has-js .show-hero-current.is-late ~ .show-book {
        animation-delay: 0s, 0.8s;
    }
}
@keyframes show-intro-fade {
    from { opacity: 0; }
}
@keyframes show-intro-from-top {
    from { transform: translateY(-100vh); }
}
@keyframes show-intro-from-bottom {
    from { transform: translateY(100vh); }
}
/* The extra quarter of the heading size clears Gate Loud's capitals, which
   at line-height 0.8 stand above their own box - without it their tops
   peek over the rule before the rise. */
@keyframes show-intro-rise {
    from { transform: translateY(calc(100% + var(--rise-from) + 0.25 * var(--font-size-xl))); }
}
@keyframes show-intro-grow {
    from { clip-path: inset(0 50% 0 50% round var(--border-radius-tag)); }
    to { clip-path: inset(0 0 0 0 round var(--border-radius-tag)); }
}
@keyframes show-intro-text {
    from { -webkit-text-fill-color: transparent; }
    to { -webkit-text-fill-color: currentColor; }
}
/* -- SHOW HERO END -- */

/* -- BOOKING -- */
/* Phil's Spektrix booking: the show page's Book tickets dialog
   (template-parts/gate-show-booking.php) and the header's Quick book
   (template-parts/quick-book.php). Both take the page theme - the
   accent ground with dark type, like the buttons that open them. */

/* Book tickets: the launcher is .show-book (see SHOW HERO). The dialog
   grows out of it and fills the screen below the header. Heading and
   tools stay put; the list or calendar scrolls, its bar in the right-hand
   gutter beside the close button. */
.gate-book-launch {
    border: 0;
    cursor: pointer;
}
.gate-book-launch[hidden],
.gate-book-dialog [hidden] {
    display: none !important;
}
.gate-book-dialog {
    --book-pad: var(--global-spacing-32);
    --book-gutter: calc(96 * var(--px));
    position: fixed;
    inset: auto 0 var(--show-book-bottom);
    width: min(calc(1170 * var(--px)), 100% - 2 * var(--global-spacing-16));
    max-width: none;
    height: calc(100dvh - var(--header-height) - var(--show-book-bottom));
    max-height: none;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    overscroll-behavior: contain;
    border: 0;
    border-radius: var(--border-radius-tag);
    background-color: var(--accent);
    color: var(--dark);
    font-family: var(--font-family-text);
    font-size: calc(18 * var(--px));
    line-height: 1.2;
}
.gate-book-dialog::backdrop {
    background: rgba(0, 0, 0, 0.35);
}
.gate-book-dialog.is-opening::backdrop {
    animation: gate-book-backdrop-in 560ms ease both;
}
.gate-book-dialog.is-closing::backdrop {
    animation: gate-book-backdrop-out 420ms ease both;
}
@keyframes gate-book-backdrop-in {
    from { background: transparent; }
}
@keyframes gate-book-backdrop-out {
    to { background: transparent; }
}
body:has(.gate-book-dialog[open]) {
    overflow: hidden;
}
.gate-book-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--book-pad) var(--book-gutter) 0 var(--book-pad);
}
.gate-book-heading {
    padding-bottom: var(--global-spacing-32);
    border-bottom: 1px solid currentColor;
}
.gate-book-eyebrow {
    /* Padding, not margin: reset.css zeroes paragraph margins. */
    padding-bottom: var(--global-spacing-12);
    font-family: var(--font-family-display);
    text-transform: uppercase;
    font-size: calc(18 * var(--px));
    font-weight: 900;
}
.gate-book-heading h2 {
    margin: 0;
    /* At line-height 0.8 Gate Loud's capitals rise out of the box. */
    padding-top: 0.12em;
    font-family: var(--font-family-display);
    font-size: var(--font-size-medium);
    font-weight: 900;
    line-height: 0.8;
    text-transform: uppercase;
}
.gate-book-close {
    position: absolute;
    top: var(--book-pad);
    right: var(--book-pad);
    width: calc(40 * var(--px));
    height: calc(40 * var(--px));
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.gate-book-close svg {
    width: 100%;
    height: 100%;
}
.gate-book-tools {
    padding: var(--global-spacing-16) 0 var(--global-spacing-48);
}
.gate-book-views {
    display: flex;
    gap: var(--global-spacing-12);
}
/* Calendar / List: text-font toggles, filled when chosen. */
.gate-book-views button {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.45em 0.8em;
    border: 1px solid currentColor;
    border-radius: 4px;
    background: transparent;
    color: var(--dark);
    font: inherit;
    line-height: 1;
    cursor: pointer;
}
.gate-book-views button svg {
    width: 1.2em;
    height: 1.2em;
}
.gate-book-views button[aria-pressed="true"] {
    border-color: var(--dark);
    background-color: var(--dark);
    color: var(--light);
}
.gate-book-month {
    display: flex;
    align-items: center;
    gap: var(--global-spacing-24);
    margin-bottom: var(--global-spacing-32);
}
.gate-book-month > button {
    display: flex;
    width: 1.4em;
    height: 1.4em;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}
.gate-book-month > button svg {
    width: 100%;
    height: 100%;
}
.gate-book-month-box {
    display: flex;
    align-items: center;
    gap: var(--global-spacing-24);
    padding: var(--global-spacing-12) var(--global-spacing-16);
    border: 1px solid currentColor;
    border-radius: var(--border-radius-tag);
}
.gate-book-month-box svg {
    width: 1.4em;
    height: 1.4em;
}
.gate-book-month h3 {
    margin: 0;
    padding-top: 0.12em;
    font-family: var(--font-family-display);
    font-size: calc(26 * var(--px));
    font-weight: 900;
    line-height: 0.8;
    text-transform: uppercase;
}
/* The scrolling part reaches into the gutter, so its bar sits there. */
.gate-book-results {
    flex: 1 1 auto;
    min-height: 0;
    margin-right: calc(var(--book-pad) - var(--book-gutter));
    padding-right: calc(var(--book-gutter) - var(--book-pad));
    padding-bottom: var(--book-pad);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.08);
}
.gate-book-results > p {
    margin: 0;
}
/* Every Book now and Sold out: dark tags; Book now in white, Sold out
   in the accent. */
.gate-book-row a,
.gate-book-row button,
.gate-book-slot a,
.gate-book-slot button {
    --cap-nudge: 0.12em;
    display: inline-block;
    padding: calc(0.5em + var(--cap-nudge)) 0.75em calc(0.5em - var(--cap-nudge));
    border: 0;
    border-radius: 4px;
    background-color: var(--dark);
    color: var(--light) !important;
    font-family: var(--font-family-display);
    font-size: calc(16 * var(--px));
    font-weight: 900;
    line-height: 1;
    text-align: center;
    text-decoration: none !important;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.gate-book-row button:disabled,
.gate-book-slot button:disabled {
    color: var(--accent) !important;
    cursor: default;
}
/* Hover: the outline of the site's other filled buttons. */
.gate-book-row a:hover,
.gate-book-row a:focus-visible,
.gate-book-slot a:hover,
.gate-book-slot a:focus-visible {
    background-color: transparent;
    box-shadow: inset 0 0 0 1px currentColor;
    color: var(--dark) !important;
}
/* The rows share one set of columns (subgrid), so the date column is as
   wide as the longest date and date, time and availability sit an even
   gap apart on every row; the button takes the far end. */
.gate-book-results:has(> .gate-book-row) {
    display: grid;
    /* The date wraps rather than pass half the width; the button's auto
       column takes up the slack. The gap narrows on smaller screens. */
    grid-template-columns: fit-content(50%) max-content max-content auto;
    column-gap: min(calc(80 * var(--px)), 5vw);
    align-content: start;
}
.gate-book-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
    padding-block: var(--global-spacing-24);
    border-top: 1px solid currentColor;
}
.gate-book-row:last-child {
    border-bottom: 1px solid currentColor;
}
.gate-book-row > strong {
    padding-top: 0.12em;
    font-family: var(--font-family-display);
    font-size: calc(22 * var(--px));
    font-weight: 900;
    line-height: 0.8;
    text-transform: uppercase;
}
.gate-book-row > a,
.gate-book-row > button {
    justify-self: end;
}
/* Availability: a white dot, black once sold out. */
.gate-book-availability::before {
    content: "";
    display: inline-block;
    width: 0.45em;
    height: 0.45em;
    margin-right: 0.7em;
    border-radius: 50%;
    background-color: var(--light);
    vertical-align: 0.1em;
}
.gate-book-availability.is-sold::before {
    background-color: var(--dark);
}
.gate-book-calendar-scroll {
    overflow-x: auto;
}
.gate-book-calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    min-width: 770px;
    border-left: 1px solid currentColor;
}
.gate-book-weekday {
    padding: calc(var(--global-spacing-12) + 0.12em) var(--global-spacing-16) calc(var(--global-spacing-12) - 0.12em);
    border-right: 1px solid var(--accent);
    background-color: var(--dark);
    color: var(--light);
    font-family: var(--font-family-display);
    font-size: calc(16 * var(--px));
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}
.gate-book-weekday:nth-child(7) {
    border-right-color: var(--dark);
}
/* Each day: its number at the top, performances at the foot, so a time
   lines up across the week. */
.gate-book-day {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: calc(260 * var(--px));
    padding: var(--global-spacing-16);
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
}
.gate-book-day h4 {
    margin: 0 0 auto;
    font-family: var(--font-family-display);
    text-transform: uppercase;
    font-size: calc(16 * var(--px));
    font-weight: 900;
    line-height: 1;
}
.gate-book-slot {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: var(--global-spacing-24);
    padding-top: var(--global-spacing-16);
    border-top: 1px solid currentColor;
}
.gate-book-slot strong {
    font-family: var(--font-family-display);
    font-size: calc(16 * var(--px));
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}
.gate-book-slot p {
    margin: 0 0 6px;
    font-size: calc(14 * var(--px));
}
.gate-book-dialog :focus-visible,
.gate-book-launch:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}
@media (max-width: 900px) {
    .gate-book-dialog {
        --book-pad: var(--global-spacing-16);
        --book-gutter: calc(var(--global-spacing-16) + 44px);
    }
    .gate-book-results {
        margin-right: calc(-1 * var(--global-spacing-16));
        padding-right: var(--global-spacing-16);
    }
    .gate-book-inner {
        padding-right: var(--global-spacing-16);
    }
    .gate-book-heading {
        padding-right: 44px;
    }
    .gate-book-results:has(> .gate-book-row) {
        display: block;
    }
    .gate-book-row {
        grid-template-columns: 1fr auto;
        gap: var(--global-spacing-12);
    }
    .gate-book-row > * {
        grid-column: 1;
    }
    .gate-book-row > strong {
        font-size: 18px;
        line-height: 0.95;
    }
    .gate-book-row > a,
    .gate-book-row > button {
        grid-column: 2;
        grid-row: 1 / span 3;
    }
}
@media (prefers-reduced-motion: reduce) {
    .gate-book-dialog::backdrop {
        animation: none !important;
    }
}

/* Quick book: hangs from the header's Book now (its script sets --qb-top
   and --qb-right from the button), which becomes the panel's tab - the
   two join over --qb-gap. Sized from the header type, so it grows with
   the header. */
body {
    --qb-size: max(var(--font-size-xsmall), var(--header-type-size));
    --qb-gap: calc(var(--qb-size) * 0.75);
}
.quick-book {
    --qb-bg: var(--accent);
    --qb-fg: var(--dark);
    position: fixed;
    z-index: 1000;
    top: calc(var(--qb-top, 0px) + var(--qb-gap));
    right: var(--qb-right, var(--global-spacing-32));
    color: var(--qb-fg);
    font-family: var(--font-family-text);
    font-size: var(--qb-size);
}
/* Over a coloured hero, Book now is dark with accent type - so is this. */
body.hero-colour:has(.site-header:not(.is-scrolled)) .quick-book {
    --qb-bg: var(--dark);
    --qb-fg: var(--accent);
}
.quick-book [hidden],
.quick-book__toggle {
    display: none !important;
}
.quick-book button,
.quick-book summary {
    color: inherit;
    font: inherit;
}
.quick-book button {
    cursor: pointer;
}
.quick-book__panel {
    /* The design's proportions: about 16 header-type sizes wide, padded
       by 1.2 of them. */
    width: max(20rem, calc(var(--qb-size) * 16.5));
    max-width: calc(100vw - 2 * var(--global-spacing-16));
    max-height: calc(100dvh - var(--qb-top, 0px) - var(--qb-gap) - var(--global-spacing-16));
    overflow-y: auto;
    padding: calc(var(--qb-size) * 1.2);
    border-radius: var(--border-radius-tag) 0 var(--border-radius-tag) var(--border-radius-tag);
    background-color: var(--qb-bg);
}
/* Docked (a phone, opened from the menu): the full width of the page
   under the header, no tab to join. */
.quick-book.is-docked {
    --qb-size: var(--font-size-body);
    left: var(--page-inset);
    right: var(--page-inset);
}
/* Its heading stands in for the Book now tab it has no room for. */
.quick-book__title {
    display: none;
}
.quick-book.is-docked .quick-book__title {
    display: block;
    margin: 0;
    padding-bottom: calc(var(--qb-size) * 1.2);
    font-family: var(--font-family-display);
    font-size: var(--font-size-medium);
    font-weight: 900;
    line-height: 0.9;
    text-align: center;
    text-transform: uppercase;
}
.quick-book.is-docked .quick-book__panel {
    width: auto;
    max-width: none;
    border-radius: var(--border-radius-tag);
}
/* In the phone menu (opened from its Quick book button): in the menu's
   flow under that button, full width, the button standing in for its
   title. The menu's spare space moves below the panel. It opens by
   growing from nothing (a grid row from 0fr to 1fr), pushing the menu's
   links down, and folds away the same way - so while shut it stays
   displayed, kept out of reach with visibility once it has folded. */
/* Folds open and shut on its height, from 0 to auto (interpolate-size;
   a browser without it opens and closes it at once). .is-open is set by
   the script with the panel's hidden - not :has(), which some browsers
   don't re-check when the attribute changes. Shutting, the panel stays
   visible until the fold is done, its contents fading as it goes; the
   gaps above and below it are its margins, inside the fold. */
.quick-book.is-in-menu {
    --qb-size: var(--font-size-body);
    position: static;
    display: block;
    /* Never squeezed by the menu's column to fit the screen (overflow
       hidden would let it shrink and cut the panel off): the menu scrolls
       instead. */
    flex-shrink: 0;
    height: 0;
    overflow: hidden;
    interpolate-size: allow-keywords;
    transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.quick-book.is-in-menu.is-open {
    height: auto;
    transition: height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.quick-book.is-in-menu .quick-book__title {
    display: none;
}
.quick-book.is-in-menu .quick-book__panel {
    width: auto;
    max-width: none;
    max-height: none;
    min-height: 0;
    margin-block: var(--global-spacing-12) var(--global-spacing-24);
    overflow: hidden;
    border-radius: var(--border-radius-tag);
}
.quick-book.is-in-menu .quick-book__panel[hidden] {
    display: block !important;
    visibility: hidden;
    transition: visibility 0s 0.45s;
}
.quick-book.is-in-menu .quick-book__panel > * {
    transition: opacity 0.35s ease 0.1s;
}
.quick-book.is-in-menu .quick-book__panel[hidden] > * {
    opacity: 0;
    transition: opacity 0.25s ease;
}
@media (prefers-reduced-motion: reduce) {
    .quick-book.is-in-menu,
    .quick-book.is-in-menu .quick-book__panel[hidden],
    .quick-book.is-in-menu .quick-book__panel > * {
        transition: none;
    }
}
.mobile-menu.has-quick-book-open .mobile-menu-book {
    margin-bottom: 0;
}
.mobile-menu.has-quick-book-open .quick-book {
    margin-bottom: auto;
}
.quick-book__section {
    border-top: 1px solid currentColor;
}
.quick-book__section:last-of-type {
    border-bottom: 1px solid currentColor;
}
.quick-book__section summary {
    position: relative;
    padding: calc(0.8em + 0.12em) 2em calc(0.8em - 0.12em) 0;
    font-family: var(--font-family-display);
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    list-style: none;
    cursor: pointer;
}
.quick-book__section summary::-webkit-details-marker {
    display: none;
}
/* The chevron: down when closed, up when open. */
.quick-book__section summary::after {
    content: "";
    position: absolute;
    top: 0.8em;
    right: 0.2em;
    width: 0.5em;
    height: 0.5em;
    border-right: 0.15em solid;
    border-bottom: 0.15em solid;
    transform: translateY(-0.1em) rotate(45deg);
}
.quick-book__section[open] summary::after {
    transform: translateY(0.2em) rotate(225deg);
}
.quick-book__selection {
    display: block;
    margin-top: 0.6em;
    /* The same size as the options listed under it. */
    font-size: 0.95em;
    font-family: var(--font-family-text);
    /* The weight of the list it was chosen from. */
    font-weight: 500;
    line-height: 1.3;
    text-transform: none;
}
.quick-book__selection:empty {
    display: none;
}
.quick-book__options {
    /* Options set a little under the headings; about four and a half
       show (each 1em line + 0.7em), so the rest plainly scroll. */
    max-height: 7.6em;
    margin-bottom: 1.1em;
    overflow-y: auto;
    font-size: 0.95em;
    scrollbar-width: thin;
    scrollbar-color: currentColor rgba(0, 0, 0, 0.15);
}
.quick-book__options p {
    margin: 0;
}
.quick-book__option {
    display: block;
    width: 100%;
    /* 0.7em between entries. */
    padding: 0.35em 0;
    border: 0;
    background: none;
    line-height: 1.3;
    text-align: left;
}
.quick-book__option:hover,
.quick-book__option:focus-visible {
    text-decoration: underline;
}
.quick-book__option[aria-pressed="true"] {
    font-weight: 700;
}
.quick-book__option:disabled {
    opacity: 0.55;
    text-decoration: line-through;
    cursor: default;
}
.quick-book__status {
    margin: 0;
    overflow: hidden;
}
.quick-book__note {
    display: block;
    overflow: hidden;
}
/* Failures and empty states, shown as well as announced. */
.quick-book__message {
    margin: 0;
    padding-top: 0.6em;
    line-height: 1.3;
}
.quick-book__book {
    display: block;
    margin-left: auto;
    padding: calc(1em + 0.12em) 0 0;
    transition: letter-spacing 0.3s ease;
    border: 0;
    background: none;
    font-family: var(--font-family-display) !important;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}
.quick-book__book:not(:disabled):hover,
.quick-book__book:not(:disabled):focus-visible {
    letter-spacing: 0.06em;
}
.quick-book__book:disabled {
    cursor: default;
}
.quick-book :focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}
/* The open trigger: square-bottomed and filled, with a strip below it
   down to the panel so the two read as one shape. */
.site-header .site-header-book[aria-expanded="true"] {
    position: relative;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background-color: var(--accent) !important;
    box-shadow: none;
    color: var(--dark) !important;
}
body.hero-colour .site-header:not(.is-scrolled) .site-header-book[aria-expanded="true"] {
    background-color: var(--dark) !important;
    color: var(--accent) !important;
}
.site-header .site-header-book[aria-expanded="true"]::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    height: calc(var(--qb-gap) + 1px);
    background: inherit;
}
/* -- BOOKING END -- */

/* -- BOOKING PAGE -- */
/* Phil's seat selector and basket ([gate_booking] / [gate_basket] in
   mu-plugins/gate-native-booking.php, on the Book and Basket pages). The
   plan's seats take the page accent; chosen ones go black. */
.gate-native [hidden] {
    display: none !important;
}
.gate-native button,
.gate-native input,
.gate-native select {
    font: inherit;
}
.gate-native button {
    --cap-nudge: 0.12em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--global-spacing-12) + var(--cap-nudge)) var(--global-spacing-16) calc(var(--global-spacing-12) - var(--cap-nudge));
    border: 0;
    border-radius: var(--border-radius-tag);
    background-color: var(--accent);
    color: var(--dark) !important;
    font-family: var(--font-family-label);
    font-size: var(--font-size-subheading);
    font-weight: 900;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}
.gate-native button:disabled {
    opacity: 0.5;
    cursor: default;
}
.gate-native [data-native-refresh] {
    display: none;
}
.gate-native-sidebar p {
    margin: var(--global-spacing-16) 0;
}
/* Find a seat: underlined, like the newsletter field. */
.gate-native-search {
    display: block;
    margin-top: var(--global-spacing-100);
}
.gate-native-search input {
    width: 100%;
    min-width: 0;
    padding: 0 0 var(--global-spacing-12);
    border: 0;
    border-bottom: 1px solid currentColor;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-size: var(--font-size-body);
}
.gate-native-search input::placeholder {
    color: inherit;
    opacity: 1;
}
.gate-native-search input:focus-visible {
    outline: none;
    border-bottom-width: 2px;
}
.gate-native-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--global-spacing-16);
    font-size: var(--font-size-xsmall);
}
.gate-native-legend span::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 6px;
    border: 1px solid var(--dark);
    border-radius: 50%;
    background-color: var(--accent);
    vertical-align: -1px;
}
.gate-native-legend .is-selected::before {
    background-color: var(--dark);
}
.gate-native-legend .is-unavailable::before {
    border-color: transparent;
    background-color: rgba(0, 0, 0, 0.12);
}
/* Search, legend and the plan note as one group, 100px clear of the
   title and date above and of the text below. */
[data-native-chart-legend] {
    margin-top: var(--global-spacing-16);
}
.gate-native-sidebar .gate-native-map-note {
    /* Padding, not margin: reset.css forces paragraph margin-bottom to 0.
       The next paragraph's own 16px top margin makes up the 100. */
    margin-top: 0;
    padding: var(--global-spacing-12) 0 calc(var(--global-spacing-100) - var(--global-spacing-16));
    font-size: var(--font-size-xsmall);
}

/* The plan: about a screen tall, so the whole house can show at once
   (the script zooms out to fit it on first draw). */
.gate-native-plan {
    position: relative;
    min-width: 0;
}
.gate-native-chart-viewport {
    height: max(550px, calc(100dvh - var(--header-height) - 2 * var(--global-spacing-32) - 56px));
    overflow: auto;
    overscroll-behavior: contain;
    touch-action: pan-x pan-y;
    border: 1px solid currentColor;
    border-radius: var(--border-radius-tag);
    background-color: var(--page-bg);
}
.gate-native-chart-viewport + .gate-native-chart-viewport {
    margin-top: var(--global-spacing-24);
}
.gate-native-chart-viewport svg {
    display: block;
    max-width: none;
    height: auto;
}
.gate-native-map-seat {
    cursor: pointer;
}
.gate-native-map-seat circle {
    fill: var(--accent);
    stroke: var(--dark);
    stroke-width: 1;
}
.gate-native-map-seat text {
    fill: var(--dark);
    font-family: var(--font-family-text);
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
}
.gate-native-map-seat[aria-pressed="true"] circle {
    fill: var(--dark);
}
.gate-native-map-seat[aria-pressed="true"] text {
    fill: var(--accent);
}
.gate-native-map-seat[aria-disabled="true"] {
    cursor: default;
}
.gate-native-map-seat[aria-disabled="true"] circle {
    fill: rgba(0, 0, 0, 0.1);
    stroke: none;
}
.gate-native-map-seat[aria-disabled="true"] text {
    fill: rgba(0, 0, 0, 0.4);
}
.gate-native-map-seat:focus {
    outline: none;
}
.gate-native-map-seat:focus-visible circle {
    stroke-width: 3;
}
/* Status and zoom, in a bar above the plan - floating over it, they
   covered the first row of seats. */
.gate-native-plan-overlay {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin-bottom: var(--global-spacing-12);
}
.gate-native .gate-native-plan-overlay [data-native-status] {
    min-width: 0;
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--border-radius-tag);
    background-color: var(--dark);
    color: var(--light);
    font-size: var(--font-size-xsmall);
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.gate-native .gate-native-plan-overlay [data-native-status]:empty {
    display: none;
}
.gate-native [data-native-chart-controls] {
    margin-left: auto;
}
.gate-native-chart-toolbar {
    display: flex;
    gap: 8px;
}
.gate-native .gate-native-chart-toolbar button {
    min-width: 44px;
    border: 1px solid var(--dark);
    background-color: var(--page-bg);
    transition: background-color 0.2s ease, color 0.2s ease;
}
.gate-native .gate-native-chart-toolbar button:hover,
.gate-native .gate-native-chart-toolbar button:focus-visible {
    background-color: var(--dark);
    color: var(--page-bg) !important;
}
.gate-native-map-tooltip {
    position: fixed;
    z-index: 10000;
    max-width: min(260px, calc(100vw - 16px));
    padding: 8px 12px;
    border-radius: var(--border-radius-tag);
    background-color: var(--dark);
    color: var(--light);
    font-size: var(--font-size-xsmall);
    line-height: 1.3;
    pointer-events: none;
}

/* Chosen seats: a black panel in the corner with each seat, its price,
   a remove button and Add to basket. */
.gate-native .gate-native-selection {
    position: fixed;
    right: var(--global-spacing-24);
    bottom: var(--global-spacing-24);
    z-index: 9999;
    width: min(380px, calc(100vw - 32px));
    max-height: min(70vh, 650px);
    overflow: auto;
    padding: var(--global-spacing-24);
    border-radius: var(--border-radius-tag);
    background-color: var(--dark);
    color: var(--light);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.gate-native-selection h3 {
    display: none !important;
}
.gate-native .gate-native-selection-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 44px;
    align-items: center;
    gap: var(--global-spacing-16);
    padding: var(--global-spacing-16) 0;
}
.gate-native .gate-native-selection-row + .gate-native-selection-row {
    border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.gate-native .gate-native-selection-row strong {
    min-width: 0;
    font-size: var(--font-size-body);
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.gate-native .gate-native-selection-price {
    font-size: var(--font-size-body);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.gate-native .gate-native-selection .gate-native-selection-remove {
    width: 44px;
    height: 44px;
    padding: 0;
    font: 700 28px/1 Arial, sans-serif;
}
/* Add to basket: full width, its words centred however they wrap. */
.gate-native .gate-native-selection .gate-native-add {
    display: flex;
    gap: 0.6em;
    width: 100%;
    margin-top: var(--global-spacing-16);
    padding-block: calc(18px + var(--cap-nudge)) calc(18px - var(--cap-nudge));
    line-height: 1.1;
    text-align: center;
    white-space: normal;
}
/* While it works: full strength, with a spinner after the words. */
.gate-native .gate-native-add.is-loading:disabled {
    opacity: 1;
    cursor: progress;
}
.gate-native .gate-native-add.is-loading::after {
    content: "";
    flex: none;
    width: 0.9em;
    height: 0.9em;
    border: 0.15em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: gate-native-spin 0.8s linear infinite;
}
@keyframes gate-native-spin {
    to { transform: rotate(360deg); }
}
.gate-native .gate-native-selection button:focus-visible {
    outline: 2px solid var(--light);
    outline-offset: 3px;
}

/* The Basket page. */
.gate-native-ticket {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--global-spacing-24);
    padding: var(--global-spacing-24) 0;
    border-top: 1px solid currentColor;
}
/* Each ticket reads as a line item in the serif, ruled off from the
   total beneath (as on the checkout). */
.gate-native-ticket > span {
    font-family: var(--font-family-serif);
    font-size: var(--font-size-intro-small);
    line-height: 1.1;
}
.gate-native-ticket:has(+ :not(.gate-native-ticket)) {
    border-bottom: 1px solid currentColor;
}
/* A clear break before the total, fluid with the screen: about 130px
   of air on a big screen, 70px at 1440, never under 32px on a phone. */
.gate-native-ticket + h4 {
    padding-top: clamp(var(--global-spacing-32), 6vw, 160px);
}
.gate-native-checkout-link {
    --cap-nudge: 0.12em;
    display: block;
    width: fit-content;
    margin-top: var(--global-spacing-24);
    padding: calc(18px + var(--cap-nudge)) 28px calc(18px - var(--cap-nudge));
    font-size: calc(20 * var(--px));
    border-radius: var(--border-radius-tag);
    background-color: var(--accent);
    color: var(--dark) !important;
    font-family: var(--font-family-label);
    font-weight: 900;
    line-height: 1;
    text-decoration: none !important;
    text-transform: uppercase;
}
.gate-native-basket-link {
    display: inline-block;
    margin-top: var(--global-spacing-12);
}
/* Phones and small tablets: the panel spans the screen, inset by the
   same side spacing as every component (--page-inset). */
@media (max-width: 768px) {
    .gate-native .gate-native-selection {
        right: var(--page-inset);
        bottom: var(--global-spacing-32);
        left: var(--page-inset);
        width: auto;
        max-height: 55vh;
    }
}
@media (max-width: 600px) {
    .gate-native-chart-viewport {
        height: 70vh;
    }
}
@media (max-width: 400px) {
    .gate-native .gate-native-selection {
        padding: var(--global-spacing-16);
    }
    .gate-native .gate-native-selection-row {
        grid-template-columns: minmax(0, 1fr) auto 40px;
        gap: 10px;
    }
    .gate-native .gate-native-selection-row strong,
    .gate-native .gate-native-selection-price {
        font-size: var(--font-size-xsmall);
    }
    .gate-native .gate-native-selection .gate-native-selection-remove {
        width: 40px;
        height: 40px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .gate-native .gate-native-add.is-loading::after {
        animation-duration: 2.4s;
    }
}
/* -- BOOKING PAGE END -- */

/* -- CHECKOUT -- */
/* Phil's checkout ([gate_checkout] in mu-plugins/gate-native-checkout.php):
   the order summary, delivery, billing address, review and payment. */
.gate-checkout [hidden] {
    display: none !important;
}
.gate-checkout {
    font-size: var(--font-size-body-large);
}
/* Section headings: room above, as Gate Loud's capitals rise out of their
   box and would otherwise sit on the rule before them. */
.gate-checkout h2:not(.split-title) {
    margin: 0;
    padding: clamp(var(--global-spacing-32), 4vw, 96px) 0 var(--global-spacing-24);
}
.gate-checkout [data-co-summary] > h2:first-child {
    padding-top: var(--global-spacing-32);
}
.gate-checkout label {
    display: block;
    margin: var(--global-spacing-16) 0;
    line-height: 1.3;
}
.gate-checkout input:not([type="checkbox"], [type="radio"]),
.gate-checkout select {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: var(--global-spacing-12) var(--global-spacing-16);
    border: 1px solid currentColor;
    border-radius: var(--border-radius-tag);
    background-color: var(--page-bg);
    color: inherit;
    font: inherit;
    font-size: var(--font-size-body);
}
/* Radios and the consent box: bordered squares like the header's icon
   boxes, filled with the page accent (inset from the edge) once chosen. */
.gate-checkout input[type="radio"],
.gate-checkout input[type="checkbox"] {
    flex: none;
    width: 1.2em;
    height: 1.2em;
    margin: 0 0.6em 0 0;
    border: 1px solid currentColor;
    border-radius: 4px;
    background-color: var(--page-bg);
    vertical-align: -0.2em;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: background-color 0.15s ease;
}
.gate-checkout input[type="radio"]:checked,
.gate-checkout input[type="checkbox"]:checked {
    background-color: var(--accent);
    box-shadow: inset 0 0 0 3px var(--page-bg);
}
.gate-checkout label:has(> input[type="radio"]),
.gate-checkout label:has(> input[type="checkbox"]) {
    display: flex;
    align-items: center;
    cursor: pointer;
}
/* Buttons: tags in the page accent, as across the site; the main ones
   (Review order, Continue to secure payment) a size up, matching the
   basket's Continue to checkout. Secondary ones are outlined. */
.gate-checkout button {
    --cap-nudge: 0.12em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--global-spacing-12) + var(--cap-nudge)) var(--global-spacing-16) calc(var(--global-spacing-12) - var(--cap-nudge));
    border: 1px solid currentColor;
    border-radius: var(--border-radius-tag);
    background: transparent;
    color: var(--dark);
    font-family: var(--font-family-label);
    font-size: var(--font-size-subheading);
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.gate-checkout .gate-checkout-primary {
    margin: var(--global-spacing-32) 0 0;
    padding: calc(18px + var(--cap-nudge)) 28px calc(18px - var(--cap-nudge));
    border-color: transparent;
    background-color: var(--accent);
    font-size: calc(20 * var(--px));
}
.gate-checkout .gate-checkout-primary:not(:disabled):hover,
.gate-checkout .gate-checkout-primary:not(:disabled):focus-visible {
    background-color: transparent;
    box-shadow: inset 0 0 0 1px currentColor;
}
.gate-checkout button:disabled {
    opacity: 0.5;
    cursor: default;
}
.gate-checkout-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--global-spacing-24);
}
.gate-checkout details {
    margin: var(--global-spacing-32) 0 0;
    padding: var(--global-spacing-24) 0;
    border-block: 1px solid currentColor;
}
.gate-checkout summary {
    font-family: var(--font-family-label);
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
}
/* Warnings (online payment unavailable and the like): red outline and
   text. */
.gate-checkout-notice {
    margin: var(--global-spacing-16) 0;
    padding: var(--global-spacing-16);
    border: 1px solid currentColor;
    color: var(--red);
    border-radius: var(--border-radius-tag);
    font-size: var(--font-size-body);
}
/* Order lines in the serif, like the basket's; the total stays in
   display type. */
.gate-checkout-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--global-spacing-24);
    padding: var(--global-spacing-24) 0;
    border-bottom: 1px solid currentColor;
    font-family: var(--font-family-serif);
    font-size: var(--font-size-intro-small);
    font-weight: 400;
    line-height: 1.1;
}
.gate-checkout-line strong {
    font-weight: inherit;
    white-space: nowrap;
}
.gate-checkout-total {
    font-family: var(--font-family-display);
    font-size: var(--font-size-small);
    font-weight: 900;
    text-transform: uppercase;
}
.gate-checkout-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--global-spacing-16);
}
.gate-checkout-actions .gate-checkout-primary {
    margin: 0;
}
.gate-checkout [data-co-confirmed] {
    padding: var(--global-spacing-24);
    border-radius: var(--border-radius-tag);
    background-color: var(--accent);
}
.gate-checkout :focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}
@media (max-width: 600px) {
    .gate-checkout-fields {
        grid-template-columns: 1fr;
    }
    .gate-checkout-line {
        flex-wrap: wrap;
    }
}
/* -- CHECKOUT END -- */

/* -- DASHBOARD -- */
/* The member dashboard (dashboard.php, Figma "Membership"): a welcome
   band in the accent under a transparent header (a colour hero - see
   functions/header_offset.php), two black membership cards, the shows
   (tabs), suggestions and seat preferences. */
.gate-dashboard-welcome {
    background-color: var(--accent);
    color: var(--dark);
}
/* The name, then the membership from 84% of the content width, as in
   the design. */
.gate-dashboard-welcome-inner {
    display: grid;
    grid-template-columns: minmax(0, 84fr) minmax(0, 16fr);
    align-items: center;
    min-height: calc(var(--header-height) + 167px);
    padding-top: var(--header-height);
}
.gate-dashboard-welcome-title {
    margin: 0;
    padding-top: 0.12em;
    font-size: var(--font-size-medium);
    line-height: 0.8;
}
.gate-dashboard-member-label {
    padding-bottom: 8px;
    font-size: var(--font-size-subheading);
    text-transform: uppercase;
}
.gate-dashboard-member-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    color: inherit !important;
    font-family: var(--font-family-text);
    font-size: var(--font-size-body);
    text-decoration: none !important;
}
.gate-dashboard-member-link svg {
    width: 0.9em;
    height: auto;
    transition: transform 0.2s ease;
}
.gate-dashboard-member-link:hover svg,
.gate-dashboard-member-link:focus-visible svg {
    transform: translateX(3px);
}

/* Membership cards: black, ruled top and bottom, the figure huge, its
   label in the serif and Book now at the foot. */
.gate-dashboard-perks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--global-spacing-16);
    padding-top: var(--global-spacing-64);
}
.gate-dashboard-perk {
    padding: var(--global-spacing-32);
    border-radius: var(--border-radius-tag);
    background-color: var(--dark);
    color: var(--light);
}
.gate-dashboard-perk-inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-block: var(--global-spacing-24);
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
}
.gate-dashboard-perk-figure {
    padding-top: 0.094em;
    font-family: var(--font-family-display);
    font-size: var(--font-size-large);
    font-weight: 900;
    line-height: 0.8;
    text-transform: uppercase;
}
.gate-dashboard-perk-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--global-spacing-12) var(--global-spacing-24);
}
.gate-dashboard-perk-label {
    font-size: var(--font-size-intro-small);
    line-height: 1.1;
}
.gate-dashboard .gate-dashboard-perk-link {
    color: var(--light) !important;
    font-size: var(--font-size-subheading);
}

/* Sections: a rule, the heading 32px clear of it, content 64px below. */
.gate-dashboard-section {
    margin-top: var(--global-spacing-64);
    padding-top: var(--global-spacing-32);
    border-top: 1px solid currentColor;
}
.gate-dashboard-section + .gate-dashboard-section {
    margin-top: var(--global-spacing-96);
}
.gate-dashboard-title,
.gate-dashboard-tabs button[aria-pressed="true"] {
    margin: 0;
    padding: 0.094em 0 0;
    font-family: var(--font-family-display);
    font-size: var(--font-size-medium);
    font-weight: 900;
    line-height: 0.8;
    text-transform: uppercase;
}
.gate-dashboard-title {
    margin-bottom: calc(var(--global-spacing-64) - 0.14em);
}
/* Tabs: the chosen one is the heading; the others small and grey,
   sitting on its baseline. */
.gate-dashboard-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--global-spacing-12) var(--global-spacing-48);
    margin-bottom: calc(var(--global-spacing-64) - 0.14 * var(--font-size-medium));
}
.gate-dashboard-tabs button {
    padding: 0;
    border: 0;
    background: none;
    color: rgba(0, 0, 0, 0.45);
    font-family: var(--font-family-display);
    font-size: var(--font-size-menu);
    font-weight: 900;
    line-height: 0.8;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.2s ease;
}
.gate-dashboard-tabs button:hover,
.gate-dashboard-tabs button:focus-visible {
    color: var(--dark);
}
.gate-dashboard-tabs button[aria-pressed="true"] {
    order: -1;
    color: var(--dark);
    cursor: default;
}
.gate-dashboard-panel[hidden] {
    display: none;
}
/* Cards: the show grid's three columns and show cards. */
.gate-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--global-spacing-32) var(--global-spacing-16);
}
.gate-dashboard-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--global-spacing-16);
}
/* The date and title keep the show card's 16px gap inside their
   wrapper (the bookmark sits beside them). */
.gate-dashboard-card-head > div {
    display: flex;
    flex-direction: column;
    gap: var(--global-spacing-16);
}
.gate-dashboard-save {
    margin: 0;
}
.gate-dashboard-save button {
    display: flex;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--dark);
    cursor: pointer;
}
.gate-dashboard-save svg {
    width: 100%;
    height: 100%;
}
.gate-dashboard-card .gate-dashboard-card-button {
    align-self: flex-start;
}
/* Seat preferences: rows of seats, how often, and Book again. Your
   membership uses the same rows - name, expiry, status tag - then a
   credit row with the balance in the end column. */
.gate-dashboard-seat {
    display: grid;
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--global-spacing-16);
    padding-block: var(--global-spacing-12);
    border-top: 1px solid currentColor;
}
.gate-dashboard-seat-label {
    font-size: var(--font-size-subheading);
}
.gate-dashboard-seat-note {
    font-family: var(--font-family-text);
    font-size: var(--font-size-body);
}
.gate-dashboard-credit {
    font-size: var(--font-size-subheading);
}
.gate-dashboard-account-note {
    padding-top: var(--global-spacing-32);
}
.gate-dashboard-account-link {
    margin-top: var(--global-spacing-24);
}
.gate-dashboard-notice {
    margin: var(--global-spacing-32) 0 0;
    padding: var(--global-spacing-16);
    border: 1px solid var(--red);
    border-radius: var(--border-radius-tag);
    color: var(--red);
}
.gate-dashboard-login {
    max-width: 30rem;
}
.gate-dashboard-login label {
    display: block;
    margin-top: var(--global-spacing-16);
}
.gate-dashboard-login input:not([type="checkbox"], [type="submit"]) {
    width: 100%;
    margin-top: 8px;
    padding: var(--global-spacing-12) var(--global-spacing-16);
    border: 1px solid currentColor;
    border-radius: var(--border-radius-tag);
}
.gate-dashboard-login input[type="submit"] {
    margin-top: var(--global-spacing-16);
    padding: var(--global-spacing-12) var(--global-spacing-24);
    border: 0;
    border-radius: var(--border-radius-tag);
    background-color: var(--accent);
    font-family: var(--font-family-label);
    font-weight: 900;
    text-transform: uppercase;
}
@media (max-width: 992px) {
    .gate-dashboard-welcome-inner {
        grid-template-columns: 1fr;
        gap: var(--global-spacing-24);
        padding-block: calc(var(--header-height) + var(--global-spacing-32)) var(--global-spacing-32);
    }
    .gate-dashboard-perks,
    .gate-dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 600px) {
    .gate-dashboard-perks,
    .gate-dashboard-grid {
        grid-template-columns: 1fr;
    }
    .gate-dashboard-seat {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .gate-dashboard-seat-note {
        grid-column: 1;
        grid-row: 2;
    }
    .gate-dashboard-seat .tag,
    .gate-dashboard-credit {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
}
/* -- DASHBOARD END -- */

/* -- STORY GRID -- */
/* Show cards (gate.css, CARDS) three to a row - two on a tablet, one on
   a phone. */
.story-grid-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--global-spacing-32) var(--global-spacing-16);
}
@media (max-width: 992px) {
    .story-grid-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 600px) {
    .story-grid-grid {
        grid-template-columns: 1fr;
    }
}
/* -- STORY GRID END -- */

/* -- TIERS -- */
/* Rows: name, price, then the +/- of the shared accordion. The name and
   price columns line up down the list. */
.tiers-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: center;
    padding-block: var(--global-spacing-24) !important;
}
/* The +/- keeps the end column when a row has no price. */
.tiers-row .accordion-icon {
    grid-column: 3;
}
.tiers-price {
    font-family: var(--font-family-text);
    font-size: var(--font-size-body);
}
.tiers-details ul,
.membership-card-benefits {
    margin: 0;
    list-style: disc;
}
/* Space between a tier's intro line and the bullets under it. Scoped
   under .tiers to beat the reset's ul:not(...) margin. */
.tiers .tiers-details * + ul {
    margin-top: var(--global-spacing-24);
}
/* The reset zeroes list padding (!important), so the bullet's inset is a
   margin on each item. */
.tiers-details li,
.membership-card-benefits li {
    display: list-item;
    list-style: disc outside;
    margin-left: 1.2em;
    padding-bottom: 4px;
    line-height: 1.3;
}
/* Gate Loud capitals ride high in their line; nudge the name down to sit
   level with the price. */
.tiers-row .font-label {
    position: relative;
    top: 0.12em;
}
.tiers-row-image {
    display: block;
    width: 100%;
    height: auto;
    margin-top: var(--global-spacing-16);
}
.tiers-cards-title {
    margin: 0;
}
@media (max-width: 600px) {
    .tiers-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .tiers-price {
        grid-column: 1;
        grid-row: 2;
        padding-top: 4px;
    }
    .tiers-row .accordion-icon {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
}
/* -- TIERS END -- */

/* -- DONATE -- */
/* Black card, a white rule top and bottom inside its padding (as the
   dashboard's perk cards), amount buttons in the page accent. */
.donate-card {
    padding: var(--global-spacing-32);
    border-radius: 8px;
    background-color: var(--dark);
    color: var(--light);
}
.donate-inner {
    display: flex;
    flex-direction: column;
    gap: var(--global-spacing-12);
    padding-block: var(--global-spacing-24);
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
}
.donate-inner h2 {
    margin: 0;
}
.donate-text {
    max-width: 48rem;
    font-family: var(--font-family-text);
}
.donate-amounts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 2fr);
    gap: var(--global-spacing-16);
    padding-top: var(--global-spacing-64);
}
.donate-button {
    --cap-nudge: 0.12em;
    padding: calc(var(--global-spacing-12) + var(--cap-nudge)) var(--global-spacing-16) calc(var(--global-spacing-12) - var(--cap-nudge));
    border: 0;
    border-radius: var(--border-radius-tag);
    background-color: var(--accent);
    color: var(--dark);
    font-family: var(--font-family-display);
    font-size: var(--font-size-small);
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.donate-button:hover,
.donate-button:focus-visible,
.donate-custom-toggle[aria-expanded="true"] {
    background-color: transparent;
    box-shadow: inset 0 0 0 1px var(--accent);
    color: var(--accent);
}
/* Custom amount: shown until script.js takes it over, then opened by its
   button. */
.donate-custom {
    display: grid;
    grid-template-columns: auto minmax(0, 12rem) auto;
    align-items: center;
    gap: var(--global-spacing-16);
    padding-top: var(--global-spacing-16);
}
.has-js .donate-custom:not(.is-open) {
    display: none;
}
.donate-custom input {
    padding: var(--global-spacing-12) var(--global-spacing-16);
    border: 1px solid currentColor;
    border-radius: var(--border-radius-tag);
    background-color: transparent;
    color: inherit;
    font: inherit;
}
.donate-custom .donate-button {
    font-size: var(--font-size-subheading);
}
.donate-error,
.membership-options-error,
.gate-form-error {
    margin: var(--global-spacing-24) 0 0;
    padding: var(--global-spacing-16);
    border: 1px solid var(--red);
    border-radius: var(--border-radius-tag);
    color: var(--red);
}
@media (max-width: 768px) {
    .donate-amounts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .donate-custom-toggle {
        grid-column: 1 / -1;
    }
    .donate-custom {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .donate-custom label {
        grid-column: 1 / -1;
    }
}
/* -- DONATE END -- */

/* -- MEMBERSHIP OPTIONS -- */
/* Accent cards: name, benefits, then price and Add to basket pinned to
   the foot so the cards' prices line up across a row. */
.membership-card h3 {
    margin: 0;
}
.membership-card-benefits {
    padding-top: 8px;
}
.membership-card-foot {
    display: flex;
    flex-direction: column;
    gap: var(--global-spacing-16);
    margin-top: auto;
    padding-top: var(--global-spacing-24);
}
.membership-card-period {
    font-family: var(--font-family-text);
    font-size: var(--font-size-body);
    font-weight: 400;
    text-transform: none;
}
.membership-card form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--global-spacing-16);
}
.membership-card-renew {
    display: flex;
    align-items: center;
    gap: 0.6em;
    cursor: pointer;
}
.membership-card-renew input,
.gate-form-fields input[type="checkbox"] {
    flex: none;
    width: 1.2em;
    height: 1.2em;
    margin: 0;
    border: 1px solid currentColor;
    border-radius: 4px;
    background-color: transparent;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.membership-card-renew input:checked {
    background-color: var(--dark);
    box-shadow: inset 0 0 0 3px var(--accent);
}
/* -- MEMBERSHIP OPTIONS END -- */

/* -- SPLIT LIST -- */
.split-list-items {
    margin: 0;
    padding: 0;
    list-style: none;
}
.split-list-items li {
    padding: calc(var(--global-spacing-12) + 0.094em) 0 var(--global-spacing-12);
    border-bottom: 1px solid currentColor;
    line-height: 0.8;
}
/* -- SPLIT LIST END -- */

/* -- FORM -- */
/* Fields stacked, a label over each, inputs bordered in the text colour
   like the checkout's. */
.gate-form-fields {
    display: flex;
    flex-direction: column;
    gap: var(--global-spacing-24);
    max-width: 40rem;
}
.gate-form-field label {
    display: block;
    padding-bottom: 8px;
}
.gate-form-optional {
    font-family: var(--font-family-text);
    font-weight: 400;
    text-transform: none;
}
.gate-form-field input,
.gate-form-field select,
.gate-form-field textarea {
    display: block;
    width: 100%;
    padding: var(--global-spacing-12) var(--global-spacing-16);
    border: 1px solid currentColor;
    border-radius: var(--border-radius-tag);
    background-color: transparent;
    color: inherit;
    font-family: var(--font-family-text);
    font-size: var(--font-size-body);
}
.gate-form-field textarea {
    resize: vertical;
}
.gate-form-trap {
    position: absolute;
    left: -9999px;
}
.gate-form-sent {
    max-width: 40rem;
}
/* WPForms (functions/wpforms.php), in the same dress: WPForms' own
   stylesheet is off, so its fields stack and space like the rules above,
   and what its stylesheet would have hidden is hidden here. */
.gate-form-body .wpforms-field-container {
    display: flex;
    flex-direction: column;
    gap: var(--global-spacing-24);
    max-width: 40rem;
}
.gate-form-body label[data-optional]::after {
    content: " (optional)";
    font-family: var(--font-family-text);
    font-weight: 400;
    text-transform: none;
}
/* The button sat in a padding-top-16 row under the last field's 24px gap. */
.gate-form-body .wpforms-submit-container {
    padding-top: calc(var(--global-spacing-24) + var(--global-spacing-16));
}
.gate-form-body .wpforms-field-hp,
.gate-form-body .wpforms-hidden,
.gate-form-body .wpforms-submit-spinner {
    display: none !important;
}
.gate-form-body .wpforms-screen-reader-element {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.gate-form-body .wpforms-error {
    display: block;
    padding-top: 8px;
    color: inherit;
    font-style: normal;
}
.gate-form-body .wpforms-field input.wpforms-error,
.gate-form-body .wpforms-field select.wpforms-error,
.gate-form-body .wpforms-field textarea.wpforms-error {
    display: block;
    padding: var(--global-spacing-12) var(--global-spacing-16);
    border-width: 2px;
}
/* The thank-you message, as gate-form-sent was set (the -full box after
   a page reload, the plain one after an in-page submit). */
.gate-form-body .wpforms-confirmation-container,
.gate-form-body .wpforms-confirmation-container-full {
    max-width: 40rem;
    font-family: var(--font-family-serif);
    font-size: var(--font-size-intro-small);
    font-weight: 400;
    line-height: var(--line-height-intro-small);
}
/* WPForms focuses it so screen readers announce it; no focus ring. */
.gate-form-body .wpforms-confirmation-container:focus,
.gate-form-body .wpforms-confirmation-container-full:focus {
    outline: none;
}
/* Its <p> takes the box's size, not the global paragraph size. */
.gate-form-body .wpforms-confirmation-container p,
.gate-form-body .wpforms-confirmation-container-full p {
    font-size: inherit;
    line-height: inherit;
}
/* -- FORM END -- */

/* -- HERO PIN -- */
/* The opening hero holds still and the page slides up over it (js/script.js
   adds .hero-pin and sets --hero-pin-top: 0, or less for a hero taller than
   the window). Everything after it is lifted above it and given the page's
   ground so the hero doesn't show through. :where() keeps these at no
   specificity, so a component's own position, stacking or background
   (Book tickets is fixed, many sections set their colour) still wins. */
.hero-pin {
    position: sticky;
    top: var(--hero-pin-top, 0px);
    z-index: 0;
}
:where(.hero-pin ~ *) {
    position: relative;
    z-index: 1;
    background-color: var(--page-bg);
}
:where(body:has(.hero-pin) .site-footer) {
    position: relative;
    z-index: 1;
}
/* Fully covered (js/script.js): not drawn, so it can't show through. */
.hero-pin.is-covered {
    visibility: hidden;
}
/* A coloured or black page hero ends in its own colour, so the top rule of
   the section under it only doubled that edge. */
:is(.page-hero-colour, .page-hero-dark, .page-hero-image) + section .split-frame:first-child {
    border-top: 0;
}
/* -- HERO PIN END -- */

/* -- ACCESSIBILITY -- */
@media (prefers-reduced-motion: reduce) {
    .jump-to-list a,
    .quick-book__book {
        transition: none;
    }
}
/* A very short window (400% zoom): Book tickets and Jump to sit in the
   page rather than fixed over a screen that has little room to spare. */
@media (max-height: 500px) {
    .show-book,
    .jump-to {
        position: static;
        left: auto;
        bottom: auto;
        transform: none;
    }
    .show-book {
        display: block;
        width: auto;
        margin: var(--global-spacing-16) var(--page-inset);
    }
}
/* -- ACCESSIBILITY END -- */

/* -- RELATED STORIES (show pages) -- */
/* Titled like Explore More and Link Cards - a rule above, the medium title
   on the left - rather than the centred, double-ruled section header Story
   Cards use elsewhere. "All stories" sits at the right of the title. */
.show-related-stories .padding-32 {
    padding-top: 0;
}
.show-related-stories .section-header {
    display: block;
    padding-block: 0;
    border-bottom: 0;
    text-align: left;
}
.show-related-stories .section-header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--global-spacing-16);
}
.show-related-stories .section-header-title {
    top: 0;
    padding-top: calc(var(--global-spacing-32) + 0.065em);
    font-size: var(--font-size-medium);
    text-align: left;
}
.show-related-stories .section-header-link {
    position: static;
    justify-self: auto;
}
/* -- RELATED STORIES END -- */

/* -- GATE LOUD LINE HEIGHT -- */
/* Every h1-h6 and everything set in Gate Loud (the display/label face) at a
   line-height of 0.85, overriding each component's own. Forced, so a later
   component rule can't drift from it; anything new set in Gate Loud should
   join this list (or use .font-display / .font-label, already in it).
   Body text (Balto, Editorial New) keeps its own spacing. */
:is(
    h1, h2, h3, h4, h5, h6,
    .font-display, .font-label, .font-size-subheading, .font-size-menu,
    .site-header .menu a, .site-header .site-header-book, .site-header .menu-toggle,
    .mobile-menu .mobile-menu-book, .mobile-menu-list a,
    .site-footer-menu a, .site-footer-office-title,
    .image-placeholder-label, .arrow-link, .tag, .tag-large, .skip-link,
    .story-filter-button, .page-hero-season, .jump-to-button, .jump-to-list a,
    .archive-decades a, .archive-year-number, .archive-row-title, .archive-links-row a,
    .show-hero-dates, .show-hero-title, .show-book,
    .gate-book-eyebrow, .gate-book-row a, .gate-book-row button, .gate-book-slot a,
    .gate-book-slot button, .gate-book-row > strong, .gate-book-weekday, .gate-book-slot strong,
    .quick-book.is-docked .quick-book__title, .quick-book__section summary, .quick-book__book,
    .gate-native button, .gate-native-checkout-link,
    .gate-checkout button, .gate-checkout summary, .gate-checkout-total,
    .gate-dashboard-perk-figure, .gate-dashboard-title, .gate-dashboard-tabs button,
    .gate-dashboard-login input[type="submit"], .donate-button
):not(.font-serif) {
    line-height: 0.85 !important;
}
/* A heading set in the serif (Editorial New - .font-serif, e.g. the news
   cards' titles) isn't Gate Loud: it takes 1 instead. */
:is(h1, h2, h3, h4, h5, h6).font-serif {
    line-height: 1 !important;
}
/* By size (snag list, 11 Nov): 16px Gate Loud (labels, subheadings,
   tags) at 1 - 16 on 16; the 28-32px size (.font-size-small: card and
   group titles) at 0.9 - 28 on 25, 32 on 29. Larger headings stay 0.85.
   The :not(#gate-lh) (an id never used) outranks the list above, whose
   strongest member would otherwise win. */
:is(.font-size-subheading, .font-label, .tag):not(.font-serif):not(#gate-lh) {
    line-height: 1 !important;
}
.font-size-small:not(.font-serif):not(#gate-lh) {
    line-height: 0.9 !important;
}
/* -- GATE LOUD LINE HEIGHT END -- */

/* -- NEWS POST (single-story.php; Figma: Ready for Dev > Wireframe - 114) -- */
/* The title two thirds wide, on the page's own ground. */
.story-title {
    margin: 0;
    max-width: 66.666%;
    text-transform: uppercase;
}
@media (max-width: 991.98px) {
    .story-title {
        max-width: none;
    }
}
.story-date {
    margin: 0;
}
/* The right-hand column: intro, photo, then the post's own parts, 32px
   apart (a part's blocks keep their own spacing). */
.story-column > * + * {
    margin-top: var(--global-spacing-32);
}
.story-intro {
    max-width: 44rem;
    font-size: var(--font-size-intro-small);
    line-height: 1.2;
}
.story-intro p {
    font-size: inherit;
    line-height: inherit;
}
.story-image {
    margin-bottom: 0;
}
.story-image img {
    display: block;
    width: 100%;
    height: auto;
}
/* Running text held to a readable line, as in the design. */
.story-column .small-text,
.story-column .split-intro {
    max-width: 46rem;
}
.story-part-title {
    margin-bottom: var(--global-spacing-32);
}
/* Credits with no photos: a ruled list - the group under a rule, its
   heading, then a row per person, name left and role from halfway. */
.story-column > .credits {
    margin-top: var(--global-spacing-64);
}
.credits-group-list {
    padding-top: var(--global-spacing-32);
    border-top: 1px solid currentColor;
}
.credits-group-list + .credits-group-list,
.credits-group-list + .credits-group {
    margin-top: var(--global-spacing-64);
}
.credits-group-list :is(h2, h3) {
    margin: 0 0 var(--global-spacing-32);
}
.credits-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.credits-list li {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: baseline;
    gap: var(--global-spacing-16);
    padding-block: var(--global-spacing-16);
    border-top: 1px solid currentColor;
}
/* More news: a rule, the heading, then three cards. */
.story-more-header {
    border-top: 1px solid currentColor;
}
.story-more-header h2 {
    margin: 0;
}
/* A post's sans-serif text (Small Text, drop-downs) is body copy - 16px
   at 1.2 - whatever Text size its block was given. */
.story-body .story-column :is(.small-text, .accordion-answer),
.story-body .story-column :is(.small-text, .accordion-answer) :is(p, li) {
    font-size: var(--font-size-body);
    line-height: 1.2;
}
/* Images in a post no taller than three quarters of the screen: a
   portrait one scales down (left-aligned, its own shape) rather than
   filling the screen; landscape ones are unaffected. */
.story-column :is(.story-image, .split-section-figure, .split-text-image-figure) img {
    width: auto;
    max-width: 100%;
    max-height: 75vh;
    max-height: 75svh;
}
/* -- NEWS POST END -- */

/* -- SNAGS 10 NOV (3) -- */
/* Quick Book's Book now: the site's arrow after it, nudging on hover. */
.quick-book__book {
    display: flex;
    align-items: center;
    gap: var(--global-spacing-12);
    width: fit-content;
}
.quick-book__book svg {
    position: relative;
    top: -0.12em;
    width: 0.9em;
    height: auto;
    flex: none;
    transition: transform 0.2s ease;
}
.quick-book__book:not(:disabled):hover svg,
.quick-book__book:not(:disabled):focus-visible svg {
    transform: translateX(3px);
}
/* Running text: body copy 16 and large body (Small Text) 20, both at a
   line-height of 1.2. Paragraphs otherwise keep the reset's 1. Serif
   text - marked .font-serif or an intro size, or inside one - keeps its own. */
:is(.rich-text, .accordion-answer):not(.font-serif, .font-serif *, [class*="font-size-intro"], [class*="font-size-intro"] *) :is(p, li) {
    line-height: 1.2;
}
.small-text,
.small-text:is(.rich-text, div) :is(p, li) {
    line-height: 1.2;
}
.text-size-small .small-text,
.text-size-small .small-text:is(.rich-text, div) :is(p, li) {
    line-height: 1.2;
}
/* Credits: 8px between a name and the role under it. */
.credit .font-label + div {
    margin-top: 8px;
}
/* -- SNAGS 10 NOV (3) END -- */

/* -- PAGE HERO: NO PHOTOGRAPH, A SCREEN TALL -- */
/* A colour or black page hero fills the screen but for a sliver of what
   comes next (about a section title and a line of its text), so there's a
   hint to scroll. The title and intro sit centred in it; the colour
   hero's closing rule stays at its foot. The admin toolbar, when shown,
   is taken off (WordPress sets its height as a custom property). */
.page-hero:is(.page-hero-colour, .page-hero-dark) {
    --hero-sliver: 7.5rem;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - var(--hero-sliver));
    min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px) - var(--hero-sliver));
}
.page-hero:is(.page-hero-colour, .page-hero-dark) > .row {
    flex: 1 1 auto;
}
.page-hero:is(.page-hero-colour, .page-hero-dark) > .row > [class*="col-"],
.page-hero:is(.page-hero-colour, .page-hero-dark) .page-hero-inner {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.page-hero:is(.page-hero-colour, .page-hero-dark) .page-hero-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
}
/* -- PAGE HERO: NO PHOTOGRAPH, A SCREEN TALL END -- */
/* -- JOIN & GIVE / MEMBERSHIPS (Figma Wireframe - 120, 125) -- */
/* A linked card's label as a button across its foot ("Become a member",
   "Become a patron"); the arrow nudges on as the card is hovered. */
.card-cta {
    justify-content: center;
    gap: var(--global-spacing-12);
    width: 100%;
    margin-top: auto;
    white-space: normal;
    text-align: center;
}
.membership-card-foot .card-cta {
    margin-top: 0;
}
.card-cta svg {
    flex: none;
    width: 0.9em;
    height: auto;
    position: relative;
    top: -0.12em;
    transition: transform 0.3s ease;
}
a.accent-card:hover .card-cta svg,
a.accent-card:focus-visible .card-cta svg {
    transform: translateX(6px);
}
@media (prefers-reduced-motion: reduce) {
    .card-cta svg {
        transition: none;
    }
}
/* Extra membership cards' text (a list) as the Spektrix cards' benefits. */
.membership-card-benefits.rich-text ul {
    margin: 0;
    list-style: disc;
}
.membership-card-benefits.rich-text :is(ul, li) {
    margin-block: 0;
}
.membership-card-benefits.rich-text p {
    margin-top: var(--global-spacing-12);
}
/* Tiers with full-width cards: three to a row under the section, which
   gives up most of its foot so the cards follow on. */
.tiers-cards-full {
    margin-top: calc(-1 * var(--global-spacing-64));
}
.split-cards-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 991.98px) {
    .split-cards-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 768px) {
    .split-cards-grid-3 {
        grid-template-columns: 1fr;
    }
}
/* Split List's small heading over the list ("Member benefits include."). */
.split-list-heading {
    margin: 0 0 var(--global-spacing-12);
    font-family: var(--font-family-label);
    font-size: var(--font-size-subheading);
    font-weight: 800;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}
/* Under an intro, the list heading and its list start a step down. */
.split-list-heading.has-intro {
    margin-top: var(--global-spacing-48);
}
.split-list-button {
    padding-top: var(--global-spacing-48);
}
/* Three cards to a row: titles a step smaller so a long name
   (GROUNDBREAKERS) fits whole - never broken mid-word. */
.split-cards-grid-3 .accent-card .font-display {
    font-size: clamp(1.25rem, 0.6rem + 1.4vw, 2rem);
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}
/* Card and group titles are h2 where their section has no title of its
   own (no skipped heading level) - set exactly as the h3s. */
:is(.show-card-text, .credits-group) > h2 {
    margin: 0;
}
/* -- JOIN & GIVE / MEMBERSHIPS END -- */