/* 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;
}
/* 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 1390 x 650). */
.home-hero-wordmark {
    display: flex;
    flex-direction: column;
    flex: none;
    width: min(100cqi, 100cqb * 1390 / 650);
    aspect-ratio: 1390 / 650;
}
/* Each word is its half of the logo file, masked over the green 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(--green);
    -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;
}
/* 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(--green);
    font-size: var(--font-size-xxl);
    text-align: center;
}
/* -- HOME HERO END -- */

/* -- PRODUCTION CARDS -- */
/* The first card takes two shares of the row, the rest one each. */
.production-cards-grid {
    display: grid;
    grid-template-columns: 2fr 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 - var(--global-spacing-16)) / 3 * 566 / 459);
    object-fit: cover;
}
.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;
}
@media (max-width: 768px) {
    .production-cards-grid {
        grid-template-columns: 1fr;
    }
    .production-card .production-card-image {
        height: auto;
        aspect-ratio: 4 / 3;
    }
}
/* -- PRODUCTION CARDS END -- */

/* -- IMAGE FEATURE -- */
/* Photograph under a 20% black wash, green 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(--green);
}
.image-feature-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.image-feature::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: 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;
}
.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. */
.image-feature-links-row {
    grid-column: 2 / -1;
    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 03'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.12em;
}
@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 END -- */

/* -- STORY CARDS -- */
.story-cards-grid {
    gap: var(--global-spacing-16);
    flex-wrap: nowrap;
}
/* Equal shares of what is left after the gap - col-md-6 alone is 50%
   each, which the gap would push past the rule. */
.story-cards-grid > [class*="col-"] {
    flex: 1 1 0;
}
.story-card-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 680 / 566;
    object-fit: cover;
}
.story-card-title {
    line-height: 1.3;
}
.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%;
    }
}
/* -- STORY CARDS END -- */

/* -- CTA CARDS -- */
.cta-cards-grid {
    gap: var(--global-spacing-16);
    flex-wrap: nowrap;
}
.cta-cards-grid > [class*="col-"] {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    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. */
    aspect-ratio: 1 / 1;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    background-color: var(--dark);
    color: var(--green);
}
/* Green 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 {
    max-width: 80%;
    font-family: var(--font-family-text);
    font-size: calc(22 * var(--px));
    font-weight: 400;
    line-height: 1;
}
.cta-card-button {
    display: block;
    margin-top: auto;
    /* Gate 03'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(48px + var(--cap-nudge)) var(--global-spacing-32) calc(48px - var(--cap-nudge));
    border-radius: 12px;
    background-color: var(--green);
    color: var(--dark) !important;
    text-align: center;
    text-decoration: none !important;
}
@media (min-width: 1600px) {
    .cta-card {
        aspect-ratio: 1 / 0.75;
    }
}
@media (max-width: 768px) {
    .cta-cards-grid {
        flex-wrap: wrap;
    }
    .cta-cards-grid > [class*="col-"] {
        flex: 1 1 100%;
    }
}
/* -- CTA CARDS END -- */

/* -- ABOUT SPLIT -- */
/* Rules above and below, a rule between image and text. */
.about-split-frame {
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
}
.about-split-media {
    border-right: 1px solid currentColor;
}
.about-split-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 656 / 636;
    object-fit: cover;
}
.about-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. */
.about-split-text div {
    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. */
.about-split-text > div {
    width: 100%;
    min-width: 0;
}
.about-split-text h2 {
    white-space: nowrap;
}
@media (max-width: 768px) {
    .about-split-media {
        border-right: 0;
        border-bottom: 1px solid currentColor;
    }
}
/* -- ABOUT 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: 50rem;
    margin-inline: auto;
}
/* Colour: the accent as a block, title and intro between two rules. */
.page-hero-colour {
    background-color: var(--accent);
    color: var(--dark);
}
.page-hero-colour .page-hero-text {
    padding-block: var(--global-spacing-64);
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
}
/* Image: photograph under a dark wash, accent type. */
/* main > article is a flex column, so the content is pushed to the foot
   with justify-content, not align-items. */
.page-hero-image {
    min-height: 900px;
    justify-content: flex-end;
    background-color: var(--dark);
    color: var(--accent);
}

.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);
}
.page-hero-image .page-hero-text {
    padding-bottom: var(--global-spacing-32);
    border-bottom: 1px solid currentColor;
}
.page-hero-breadcrumb {
    padding-bottom: var(--global-spacing-96);
    color: var(--light);
    font-size: var(--font-size-body);
    text-align: left;
}
.page-hero-breadcrumb a {
    text-decoration: none !important;
}
/* 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;
}
/* 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);
    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 03 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);
}
/* 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(--global-spacing-32);
    bottom: clamp(1rem, 0.4rem + 2.5vw, 3rem);
    text-align: left;
}
.site-header.menu-open ~ main .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(--global-spacing-32);
    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.06em;
}
/* -- 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 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 {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 430 / 451;
    object-fit: cover;
}
.split-people-list-wrap {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--global-spacing-32);
    align-items: start;
}
.split-people-list {
    grid-column: 2;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid currentColor;
}
.split-people-side + .split-people-list {
    grid-column: auto;
}
.split-people-list li {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--global-spacing-16);
    padding-block: var(--global-spacing-12);
    border-bottom: 1px solid currentColor;
    font-size: var(--font-size-xsmall);
}
@media (max-width: 768px) {
    .split-people-list-wrap {
        grid-template-columns: 1fr;
    }
    .split-people-list {
        grid-column: auto;
    }
}
/* -- 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 h3 {
    text-transform: none;
}
.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;
}
@media (max-width: 768px) {
    .contact-details-grid {
        grid-template-columns: 1fr;
    }
}
/* -- CONTACT DETAILS END -- */

/* -- EXPLORE MORE -- */
.explore-more-title {
    margin: 0;
    /* Gate 03'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;
    font-size: var(--font-size-xxl);
    line-height: 0.85;
}
.explore-more-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--global-spacing-16);
    padding-bottom: var(--global-spacing-32);
    border-bottom: 1px solid currentColor;
}
.explore-card-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 908 / 566;
    object-fit: cover;
}
.explore-card:nth-child(2) .explore-card-image {
    aspect-ratio: auto;
    height: calc(100% - 0px);
    max-height: 566px;
}
/* The image now sits in its link (see HOVER CARDS), which takes the
   card-relative height the image used to take. */
.explore-card:nth-child(2) .hover-card-media {
    height: calc(100% - 0px);
    max-height: 566px;
}
.explore-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    text-decoration: none !important;
}
.explore-card-link svg {
    /* Gate 03'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;
}
@media (max-width: 768px) {
    .explore-more-grid {
        grid-template-columns: 1fr;
    }
}
/* -- EXPLORE MORE END -- */

/* -- LINK CARDS -- */
.link-cards-title {
    margin: 0;
    border-top: 1px solid currentColor;
    font-size: var(--font-size-xxl);
    line-height: 0.85;
}
.link-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--global-spacing-16);
}
.link-card {
    display: flex;
    flex-direction: column;
    gap: var(--global-spacing-16);
    min-height: 320px;
    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;
}
.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;
}
/* -- 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);
}
@media (max-width: 768px) {
    .show-grid-grid {
        grid-template-columns: 1fr;
    }
    .show-card-wide {
        grid-column: auto;
    }
    /* One column: each image back to its own shape. */
    .show-grid-grid .show-card-image {
        aspect-ratio: 459 / 566;
        height: auto;
    }
    .show-grid-grid .show-card-wide .show-card-image {
        aspect-ratio: 905 / 566;
    }
}
/* -- 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;
}
.archive-decades {
    position: absolute;
    z-index: 2;
    top: calc(var(--header-height) + var(--global-spacing-32));
    left: var(--global-spacing-32);
    display: flex;
    flex-direction: column;
    width: 140px;
    padding: var(--global-spacing-12) var(--global-spacing-16);
    border-radius: 6px;
    background-color: var(--light);
    color: var(--dark);
}
.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);
    font-weight: 800;
    text-decoration: none !important;
}
.archive-decades a:last-child {
    border-bottom: 0;
}
.archive-decades svg {
    /* Gate 03'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);
    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;
    grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--global-spacing-16);
    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;
}
.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 {
    font-size: calc(18 * var(--px));
}
.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;
}
@media (max-width: 768px) {
    .credits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* -- CREDITS END -- */

/* -- INFO GRID -- */
.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;
    }
}
/* -- 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;
    }
}
/* -- 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);
    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;
}
.hover-card h3,
.hover-card .font-label {
    letter-spacing: var(--card-spread);
    transition: letter-spacing 0.3s ease;
}
/* 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: 0.12em;
}
/* 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) -- */
/* One screen of photograph. A current show: the dates under the header,
   ruled off; the title block ruled above and below at the foot, clear of
   the fixed Book tickets button (.show-book). */
/* 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,
.gate-book-dialog {
    --show-book-size: clamp(1.5rem, 0.9rem + 1.5vw, 2.75rem);
    --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);
    padding-bottom: calc(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 03'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 03'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);
}
/* Book tickets: fixed near the foot of the screen for the whole page,
   over the content as it scrolls past. Its caps are nudged down like the
   header's (Gate 03 centres high - see .site-header .menu a). */
.show-book {
    --cap-nudge: 0.12em;
    position: fixed;
    left: 50%;
    bottom: var(--show-book-bottom);
    z-index: 90;
    width: var(--show-measure);
    transform: translateX(-50%);
    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;
}
/* 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, 13.75rem);
}
/* 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, as the button is centred
       with a transform), 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;
    }
}
@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 03'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);
    font-size: calc(18 * var(--px));
    font-weight: 900;
}
.gate-book-heading h2 {
    margin: 0;
    /* At line-height 0.8 Gate 03'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);
    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);
}
.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;
    font-size: 0.85em;
    font-family: var(--font-family-text);
    font-weight: 400;
    line-height: 1.3;
    text-transform: none;
}
.quick-book__selection:empty {
    display: none;
}
.quick-book__options {
    /* Options set a little under the headings; four show, the rest
       scroll past a visible bar. */
    max-height: 6.1em;
    margin-bottom: 1.1em;
    overflow-y: auto;
    font-size: 0.85em;
    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%;
    padding: 0.1em 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;
}
.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 (padding-inline-32). */
@media (max-width: 768px) {
    .gate-native .gate-native-selection {
        right: var(--global-spacing-32);
        bottom: var(--global-spacing-32);
        left: var(--global-spacing-32);
        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 03'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;
}
/* 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 03 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-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: 32rem;
    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;
}
/* -- FORM END -- */