/* The public design language.
   Loaded after core-foundation.css on public pages only. This is the file a
   theme owns and may replace wholesale.

   Split out of public/assets/site.css. Placement is recorded in
   docs/theme-contract/stylesheet-ownership.json; source order within this file
   is the order those rules had in site.css. Rules whose class the attribution
   marks `duplicated` also appear in admin.css, so that each surface owns its
   own copy and neither is held hostage by the other. */

body.menu-open {
    overflow: hidden;
}

.shell {
    width: var(--shell);
    margin-inline: auto;
}

.section {
    padding-block: clamp(76px, 9vw, 140px);
}

.site-header {
    position: absolute;
    inset: 0 0 auto;
    z-index: 50;
    height: 84px;
    color: white;
    background: var(--ink);
    border-bottom: 1px solid rgb(255 255 255 / 15%);
    transition: background 180ms ease, height 180ms ease;
}

.home-page:not(.has-site-notices) .site-header:not(.is-scrolled),
.event-page:not(.has-site-notices) .site-header:not(.is-scrolled) {
    background: transparent;
}

.site-header.is-scrolled {
    position: fixed;
    height: 70px;
    background: rgb(16 18 15 / 94%);
    backdrop-filter: blur(14px);
}

body.has-social-bar {
    --social-bar-height: 34px;
    --social-bar-icon-size: 25px;
    --social-bar-label-size: 9px;
}

body.has-social-bar.social-bar-size-medium {
    --social-bar-height: 42px;
    --social-bar-icon-size: 30px;
    --social-bar-label-size: 10px;
}

body.has-social-bar.social-bar-size-large {
    --social-bar-height: 50px;
    --social-bar-icon-size: 34px;
    --social-bar-label-size: 11px;
}

.site-header.has-social-bar { height: calc(84px + var(--social-bar-height)); }

.site-header.has-social-bar .header-inner { height: 84px; }

.site-header.has-social-bar.is-scrolled { height: 70px; }

.site-header.has-social-bar.is-scrolled .header-inner { height: 70px; }

.site-social-bar {
    height: var(--social-bar-height);
    overflow: hidden;
    border-bottom: 1px solid rgb(255 255 255 / 12%);
    opacity: 1;
    visibility: visible;
    transition: height 180ms ease, opacity 140ms ease, visibility 0s;
}

.site-header.is-scrolled .site-social-bar {
    height: 0;
    border-bottom-width: 0;
    opacity: 0;
    visibility: hidden;
    transition: height 180ms ease, opacity 140ms ease, visibility 0s 180ms;
}

.site-social-bar-inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    height: var(--social-bar-height);
    transform: translateY(0);
    transition: transform 180ms ease;
}

.site-header.is-scrolled .site-social-bar-inner { transform: translateY(-8px); }

.site-social-bar-inner > span {
    color: inherit;
    font-size: var(--social-bar-label-size);
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.site-social-links {
    display: flex;
    align-items: center;
    gap: 7px;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.site-social-link {
    width: var(--social-bar-icon-size);
    height: var(--social-bar-icon-size);
    color: inherit;
    transition: color 150ms ease, transform 150ms ease;
}

.site-social-link:hover,
.site-social-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 1px;
    transform: translateY(-2px);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.site-header-minimal .header-inner {
    justify-content: center;
}

.site-header-minimal .brand-logo {
    width: min(230px, 68vw);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    font-family: var(--display);
    font-size: 16px;
    font-stretch: condensed;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
}

.brand-logo {
    display: block;
    width: 210px;
    line-height: 0;
}

.brand-logo-image {
    display: block;
    width: 100%;
    height: auto;
}

/* Both headers are a fixed height, so a logo must be clamped by height rather
   than by the container's width. Applies to every configured logo, not only a
   bundled one: an uploaded square image would otherwise render 210px tall in an
   84px header. Footer, ticket and kiosk contexts are deliberately unclamped —
   they size to the container. */

.site-header .brand-logo-image {
    width: auto;
    max-width: 100%;
}

.site-header .brand-logo-image {
    max-height: 52px;
}

/* Shown when an installation has configured no logo. One line, clipped at the
   width its container gives it, so a long public name cannot grow the header. */

/* A wordmark is text, so it sizes to what it says rather than to the width an
   image logo was given. The cap stops a long public name or a wide display face
   crowding out the navigation beside it, and the ellipsis below still handles
   anything past that. */

.brand-wordmark {
    display: block;
    width: max-content;
    max-width: min(340px, 42vw);
}

.brand-logo-wordmark {
    display: block;
    overflow: hidden;
    font-family: var(--display);
    font-size: 20px;
    font-stretch: condensed;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: clamp(22px, 3vw, 44px);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.site-nav a {
    position: relative;
    opacity: 0.8;
}

.site-nav a::after {
    position: absolute;
    right: 0;
    bottom: -9px;
    left: 0;
    height: 1px;
    background: var(--signal);
    content: "";
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 180ms ease;
}

.site-nav a:hover {
    opacity: 1;
}

.site-nav a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 12px 9px;
    border: 0;
    color: white;
    background: transparent;
}

.nav-toggle > span:not(.sr-only) {
    display: block;
    width: 26px;
    height: 1px;
    margin: 6px 0;
    background: currentColor;
    transition: transform 180ms ease;
}

.flash {
    position: relative;
    z-index: 45;
    padding: 12px 0;
    color: white;
    background: var(--olive);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

.flash-success {
    background: #52613c;
}

.read-only-banner .shell {
    display: flex;
    gap: 12px 24px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.maintenance-page .message-section {
    min-height: calc(100svh - 92px);
}

.location-compliance-flags {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 14px;
}

.hero {
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    height: clamp(680px, 100svh, 900px);
    min-height: 0;
    overflow: hidden;
    color: white;
    background: var(--ink);
}

.hero-media,
.hero-overlay {
    position: absolute;
    inset: 0;
}

/* The photograph comes from the installation's appearance settings via
   /assets/appearance.css. Longhand rather than the old shorthand so the custom
   property carries only the image layer; the gradients live on .hero-overlay,
   so this is a single layer and the position applies to it alone. Nothing here
   relied on the shorthand resetting background-color, -origin, -clip or
   -attachment — no rule sets them on .hero-media. */

.hero-media {
    background-image: var(--home-hero-image, none);
    background-position: 50% 38%;
    background-size: cover;
    background-repeat: no-repeat;
}

.hero-overlay {
    background:
        linear-gradient(90deg, rgb(8 10 8 / 95%) 0%, rgb(8 10 8 / 75%) 37%, rgb(8 10 8 / 12%) 78%),
        linear-gradient(0deg, rgb(8 10 8 / 68%) 0%, transparent 48%);
}

.hero-inner {
    position: relative;
    z-index: 2;
    display: flex;
    grid-row: 1;
    height: auto;
    min-height: 0;
    align-items: center;
    justify-content: space-between;
    padding-top: 72px;
}

.hero-copy {
    max-width: 760px;
}

.eyebrow,
.section-index {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.eyebrow i {
    width: 22px;
    height: 1px;
    background: currentColor;
}

.hero-eyebrow {
    color: rgb(255 255 255 / 66%);
}

.hero-eyebrow i {
    background: var(--signal);
}

.hero h1 {
    max-width: 750px;
    margin: 22px 0 26px;
    font-family: var(--display);
    font-size: clamp(64px, 8.4vw, 126px);
    font-stretch: condensed;
    font-weight: 900;
    letter-spacing: -0.055em;
    line-height: 0.78;
    text-transform: uppercase;
}

.hero h1 em {
    color: var(--signal);
    font-style: normal;
}

.hero-copy > p {
    max-width: 570px;
    margin: 0;
    color: rgb(255 255 255 / 73%);
    font-size: clamp(17px, 2vw, 21px);
    line-height: 1.6;
}

.hero-actions {
    display: flex;
    gap: 14px;
    margin-top: 38px;
}

.button {
    display: inline-flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 13px 24px;
    border: 1px solid transparent;
    border-radius: 0;
    cursor: pointer;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.09em;
    line-height: 1.1;
    text-transform: uppercase;
    transition: color 160ms ease, background 160ms ease, border 160ms ease, transform 160ms ease;
}

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

.button:active {
    transform: translateY(0) scale(0.98);
}

.button-primary {
    color: var(--ink);
    background: var(--signal);
}

.button-primary:hover {
    background: var(--signal-dark);
}

.button-quiet {
    color: white;
    border-color: rgb(255 255 255 / 28%);
    background: rgb(255 255 255 / 6%);
}

.button-outline {
    color: var(--ink);
    border-color: var(--line);
    background: transparent;
}

.button-disabled {
    color: rgb(255 255 255 / 55%);
    border-color: rgb(255 255 255 / 16%);
    background: rgb(255 255 255 / 8%);
}

.button-full {
    width: 100%;
}

.button[disabled] {
    cursor: not-allowed;
    opacity: 0.45;
    transform: none;
}

.hero-brief {
    align-self: flex-end;
    width: 250px;
    margin-bottom: 76px;
    padding-left: 20px;
    border-left: 1px solid var(--signal);
}

.hero-brief-label {
    color: rgb(255 255 255 / 45%);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hero-brief p {
    margin: 9px 0 0;
    font-family: var(--display);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.35;
    text-transform: uppercase;
}

.hero-rail {
    position: relative;
    z-index: 3;
    grid-row: 2;
    border-top: 1px solid rgb(255 255 255 / 15%);
    background: rgb(9 11 9 / 80%);
}

.hero-rail .shell {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.hero-rail span {
    position: relative;
    padding: 21px 24px 21px 38px;
    border-right: 1px solid rgb(255 255 255 / 10%);
    color: rgb(255 255 255 / 62%);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.hero-rail span::before {
    position: absolute;
    top: 27px;
    left: 18px;
    width: 5px;
    height: 5px;
    background: var(--olive-light);
    content: "";
}

.manifesto {
    color: var(--paper);
    background: #141a12;
}

.manifesto .section-index {
    color: rgb(216 209 191 / 52%);
}

.manifesto-grid {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 60px;
}

.manifesto-copy .lead {
    max-width: 990px;
    margin: -8px 0 56px;
    font-family: var(--display);
    font-size: clamp(40px, 5.7vw, 78px);
    font-stretch: condensed;
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1;
    text-transform: uppercase;
}

.manifesto-copy .lead em {
    color: var(--olive-light);
    font-style: normal;
}

.manifesto-principles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid rgb(216 209 191 / 16%);
    border-left: 1px solid rgb(216 209 191 / 16%);
}

.manifesto-principles article {
    position: relative;
    min-height: 268px;
    padding: 30px 28px;
    border-right: 1px solid rgb(216 209 191 / 16%);
    border-bottom: 1px solid rgb(216 209 191 / 16%);
    background:
        linear-gradient(145deg, rgb(112 128 76 / 9%), transparent 55%),
        rgb(255 255 255 / 1.5%);
}

.manifesto-principles article::after {
    position: absolute;
    top: 28px;
    right: 28px;
    width: 8px;
    height: 8px;
    border: 1px solid rgb(216 209 191 / 34%);
    content: "";
}

.manifesto-principles article > span,
.manifesto-statement > div > span {
    color: var(--signal);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.manifesto-principles h3 {
    max-width: 230px;
    margin: 62px 0 14px;
    font-family: var(--display);
    font-size: 27px;
    font-weight: 850;
    letter-spacing: -0.02em;
    line-height: 1;
    text-transform: uppercase;
}

.manifesto-principles p {
    margin: 0;
    color: rgb(216 209 191 / 62%);
    font-size: 13px;
    line-height: 1.65;
}

.manifesto-statement {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 44px;
    margin-top: 28px;
    padding: 27px 30px;
    border-left: 3px solid var(--olive-light);
    background: rgb(216 209 191 / 6%);
}

.manifesto-statement > div {
    max-width: 760px;
}

.manifesto-statement p {
    margin: 10px 0 0;
    color: rgb(216 209 191 / 68%);
    font-size: 15px;
    line-height: 1.65;
}

.manifesto .text-link {
    color: var(--paper);
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--ink);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.text-link span {
    color: var(--signal);
    font-size: 18px;
    transition: transform 160ms ease;
}

.text-link:hover span {
    transform: translateX(4px);
}

.events-section {
    color: var(--paper);
    background: #20291c;
}

.events-section .section-index {
    color: rgb(216 209 191 / 52%);
}

.events-section .section-heading > p {
    color: rgb(216 209 191 / 62%);
}

.events-section-action {
    flex: 0 0 auto;
    white-space: nowrap;
}

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

.section-heading h2,
.standard-intro h2,
.first-event-heading h2 {
    margin: 10px 0 0;
    font-family: var(--display);
    font-size: clamp(46px, 6vw, 80px);
    font-stretch: condensed;
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 0.94;
    text-transform: uppercase;
}

.section-heading > p {
    max-width: 430px;
    margin: 0 0 8px;
    color: var(--muted);
}

.event-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.event-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    color: var(--ink);
    background: var(--paper-2);
}

/*
 * Event hero fallback supplied by the installation's appearance settings.
 * Paint only: every surface this is applied to already owns its own box, so the
 * class carries no size, spacing or placement of its own.
 */

.event-hero-media {
    background-image: var(--event-hero-image, none);
    background-position: center;
    background-size: cover;
}

.event-card-image {
    position: relative;
    aspect-ratio: 1.55;
    overflow: hidden;
    background-color: var(--ink-2);
}

.event-card-image::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgb(0 0 0 / 45%));
    content: "";
}

.event-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.72) contrast(1.04);
    transition: transform 500ms cubic-bezier(.2, .7, .2, 1), filter 300ms ease;
}

.event-card:hover .event-card-image img {
    filter: saturate(0.9) contrast(1.06);
    transform: scale(1.035);
}

.event-code {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    padding: 6px 9px;
    color: var(--ink);
    background: var(--signal);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.event-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 24px;
}

.event-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    color: #4f5348;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.event-card-meta .event-category {
    color: var(--signal-dark);
}

.event-card-meta span + span::before {
    margin-right: 12px;
    color: var(--signal);
    content: "/";
}

.event-card h3 {
    margin: 12px 0 10px;
    font-family: var(--display);
    font-size: 28px;
    font-stretch: condensed;
    font-weight: 850;
    letter-spacing: -0.02em;
    line-height: 1;
    text-transform: uppercase;
}

.event-card h3 a:hover {
    color: var(--signal-dark);
}

.event-card-body a:focus-visible {
    outline: 3px solid var(--ink);
}

.event-card-body > p {
    flex: 1;
    margin: 0 0 24px;
    color: #484c42;
    font-size: 13px;
    line-height: 1.65;
}

.event-availability {
    padding: 17px 0 18px;
    border-top: 1px solid rgb(8 11 8 / 22%);
}

.availability-copy {
    display: flex;
    justify-content: space-between;
    margin-bottom: 9px;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.availability-copy strong {
    font-size: 12px;
}

.availability-track {
    display: block;
    width: 100%;
    height: 3px;
    overflow: hidden;
    border: 0;
    appearance: none;
    background: var(--paper-3);
}

.availability-track::-webkit-progress-bar {
    background: var(--paper-3);
}

.availability-track::-webkit-progress-value {
    background: var(--olive);
}

.availability-track::-moz-progress-bar {
    background: var(--olive);
}

.standard-section {
    position: relative;
    overflow: hidden;
    color: white;
    background:
        linear-gradient(135deg, rgb(255 255 255 / 2%) 25%, transparent 25%) 0 0 / 28px 28px,
        var(--ink);
}

.standard-section::after {
    position: absolute;
    top: 80px;
    right: -40px;
    color: rgb(255 255 255 / 2.5%);
    content: "FE";
    font-family: var(--display);
    font-size: 360px;
    font-weight: 900;
    letter-spacing: -0.12em;
    line-height: 1;
}

.standard-intro {
    position: relative;
    z-index: 1;
}

.section-index.light {
    color: rgb(255 255 255 / 46%);
}

.standard-intro h2 {
    max-width: 940px;
}

.standard-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 74px;
    border-top: 1px solid rgb(255 255 255 / 16%);
    border-bottom: 1px solid rgb(255 255 255 / 16%);
}

.standard-grid article {
    min-height: 290px;
    padding: 30px 26px;
    border-right: 1px solid rgb(255 255 255 / 16%);
}

.standard-grid article:last-child {
    border-right: 0;
}

.standard-number {
    display: block;
    color: var(--signal);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
}

.standard-grid h3 {
    margin: 78px 0 13px;
    font-family: var(--display);
    font-size: 22px;
    font-weight: 850;
    letter-spacing: 0.01em;
    line-height: 1.1;
    text-transform: uppercase;
}

.standard-grid p {
    margin: 0;
    color: rgb(255 255 255 / 56%);
    font-size: 13px;
}

.first-event {
    color: var(--paper);
    background: #151c14;
}

.first-event .section-index {
    color: rgb(216 209 191 / 52%);
}

.first-event-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(60px, 9vw, 140px);
}

.first-event-heading h2 {
    max-width: 570px;
}

.process-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.process-list li {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 22px;
    padding: 28px 0 32px;
    border-top: 1px solid rgb(216 209 191 / 16%);
}

.process-list li:last-child {
    border-bottom: 1px solid rgb(216 209 191 / 16%);
}

.process-list > li > span {
    color: var(--signal);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
}

.process-list h3 {
    margin: -4px 0 8px;
    font-family: var(--display);
    font-size: 23px;
    font-weight: 850;
    line-height: 1.1;
    text-transform: uppercase;
}

.process-list p {
    max-width: 540px;
    margin: 0;
    color: rgb(216 209 191 / 62%);
    font-size: 14px;
}

.final-cta {
    color: white;
    background: #2b3d29;
}

.final-cta-inner {
    display: flex;
    min-height: 260px;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.final-cta .eyebrow {
    color: rgb(255 255 255 / 58%);
}

.final-cta h2 {
    margin: 5px 0 0;
    font-family: var(--display);
    font-size: clamp(48px, 6vw, 82px);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1;
    text-transform: uppercase;
}

.site-footer {
    padding: 70px 0 26px;
    color: white;
    background: var(--ink);
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(240px, 1.05fr) minmax(420px, 1.8fr) minmax(180px, 0.72fr);
    gap: clamp(40px, 5vw, 80px);
    padding-bottom: 54px;
}

.footer-brand {
    margin-bottom: 22px;
}

.footer-brand .brand-logo {
    width: min(100%, 250px);
}

.footer-intro > p {
    max-width: 370px;
    margin: 0;
    color: rgb(255 255 255 / 45%);
    font-size: 13px;
}

.footer-grid .eyebrow {
    margin-bottom: 16px;
    color: rgb(255 255 255 / 36%);
}

.footer-navigation,
.footer-contact {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.footer-link-groups {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 48px);
    width: 100%;
}

.footer-link-group {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.footer-link-group > strong {
    margin-bottom: 13px;
    color: rgb(255 255 255 / 38%);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.footer-link-group a,
.footer-contact a,
.footer-contact p {
    margin: 0 0 9px;
    color: rgb(255 255 255 / 68%);
    font-size: 12px;
}

.footer-link-group a:hover,
.footer-contact a:hover {
    color: var(--signal);
}

.footer-cookie-settings {
    margin: 0 0 9px;
    padding: 0;
    border: 0;
    color: rgb(255 255 255 / 68%);
    background: transparent;
    font: inherit;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
}

.footer-cookie-settings:hover,
.footer-cookie-settings:focus-visible {
    color: var(--signal);
}

.footer-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 7px 0 5px;
}

.footer-contact .footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 50%;
    color: rgb(255 255 255 / 68%);
}

.social-link svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

.social-link svg rect,
.social-link svg circle:first-of-type {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.social-link .footer-social-icon-dot {
    fill: currentColor;
}

.footer-contact .footer-social-link:hover,
.footer-contact .footer-social-link:focus-visible {
    border-color: var(--signal);
    color: var(--signal);
}

.footer-intro .footer-event-pill {
    display: inline-flex;
    gap: 3px;
    flex-direction: column;
    margin-top: 24px;
    padding: 10px 12px;
    border: 1px solid rgb(255 255 255 / 16%);
    color: white;
    background: rgb(255 255 255 / 5%);
}

.footer-event-pill span {
    color: var(--signal);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.footer-event-pill strong {
    font-size: 11px;
    letter-spacing: 0.02em;
}

.footer-intro .footer-event-pill:hover {
    border-color: var(--signal);
    color: white;
}

.footer-contact .footer-staff-button {
    margin-top: 10px;
    padding: 8px 11px;
    border: 1px solid rgb(255 255 255 / 20%);
    color: rgb(255 255 255 / 52%);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.footer-contact .footer-staff-button:hover {
    border-color: var(--signal);
}

.footer-base {
    display: flex;
    justify-content: space-between;
    padding-top: 22px;
    border-top: 1px solid rgb(255 255 255 / 10%);
    color: rgb(255 255 255 / 34%);
    font-size: 9px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.footer-base a {
    color: inherit;
}

.footer-base a:hover {
    color: var(--signal);
}

/* "Powered by AirsoftOS". views/partials/powered-by.php draws it, and core's
   public shell and both themes' copies of that shell each call the partial into
   their own footer base.

   The first two rules are the attribution's own shape and go wherever it goes;
   the third is only about this footer's ground, which is why it is separate and
   why Gunman's sheet restates that one alone. The override is the point of it:
   `.footer-base` is 34% white composited on var(--ink), 3.02:1 — enough for a
   designer credit nobody reads and not enough for this. var(--paper-3) is 7.51:1
   on the same ground, computed in tests/checks/powered-by-region.php rather
   than taken on trust here. Two classes beat `.footer-base a`'s one class and
   one element, so the `color: inherit` above does not win it back. */

.powered-by {
    display: inline-flex;
    gap: 7px;
    align-items: center;
}

.powered-by-mark {
    width: auto;
    height: 2em;
}

.footer-base .powered-by {
    color: var(--paper-3);
}

.cookie-consent {
    position: fixed;
    z-index: 160;
    right: clamp(16px, 3vw, 42px);
    bottom: clamp(16px, 3vw, 36px);
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(230px, auto);
    gap: 24px;
    width: min(760px, calc(100% - 32px));
    padding: 22px;
    border: 1px solid rgb(255 255 255 / 20%);
    color: white;
    background: #0d120e;
    box-shadow: 0 20px 65px rgb(0 0 0 / 42%);
}

.cookie-consent[hidden] {
    display: none;
}

.cookie-consent-copy strong {
    display: block;
    margin-bottom: 7px;
    font-family: var(--display);
    font-size: 19px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.cookie-consent-copy p {
    margin: 0;
    color: rgb(255 255 255 / 68%);
    font-size: 12px;
    line-height: 1.6;
}

.cookie-consent-copy a {
    color: white;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cookie-consent-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-self: center;
}

.cookie-consent-actions button {
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid rgb(255 255 255 / 34%);
    color: white;
    background: rgb(255 255 255 / 8%);
    font: inherit;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.35;
    text-transform: uppercase;
    cursor: pointer;
}

.cookie-consent-actions button:hover,
.cookie-consent-actions button:focus-visible {
    border-color: var(--signal);
    color: var(--signal);
    background: rgb(255 255 255 / 4%);
}

@media (max-width: 760px) {
    .cookie-consent {
        right: 12px;
        bottom: 12px;
        grid-template-columns: 1fr;
        gap: 16px;
        width: calc(100% - 24px);
        padding: 18px;
    }

    .cookie-consent-actions {
        grid-template-columns: 1fr;
    }
}

/* Public information pages */

.content-page .site-header {
    position: absolute;
    color: white;
    background: rgb(13 16 13 / 62%);
}

.page-masthead {
    position: relative;
    min-height: 610px;
    overflow: hidden;
    color: white;
    background: var(--ink);
}

/* The photograph layer comes from the installation's appearance settings via
   /assets/appearance.css. The position and size apply to all three layers, not
   just the photograph as the old shorthand did, which is equivalent: a
   linear-gradient has no intrinsic size, so it renders at the full positioning
   area under both `auto` and `cover`, and a layer that already fills the area
   has no free space for background-position to distribute. */

.page-masthead-media {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(90deg, rgb(7 9 7 / 92%) 0%, rgb(7 9 7 / 50%) 62%, rgb(7 9 7 / 35%)),
        linear-gradient(0deg, rgb(7 9 7 / 80%), transparent 58%),
        var(--page-masthead-image, none);
    background-position: center 38%;
    background-size: cover;
    filter: saturate(0.48) contrast(1.08);
}

.location-masthead .page-masthead-media {
    background-position: center 52%;
}

.rules-masthead .page-masthead-media {
    background-position: center 62%;
}

.page-masthead-inner {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 610px;
    justify-content: flex-end;
    padding: 160px 0 72px;
    flex-direction: column;
}

.page-masthead .eyebrow {
    color: rgb(255 255 255 / 58%);
}

.page-masthead .eyebrow i {
    background: var(--signal);
}

.page-masthead h1 {
    max-width: 1020px;
    margin: 16px 0 20px;
    font-family: var(--display);
    font-size: clamp(62px, 8.5vw, 116px);
    font-weight: 900;
    letter-spacing: -0.055em;
    line-height: 0.84;
    text-transform: uppercase;
}

.page-masthead h1 em {
    color: var(--tan);
    font-style: normal;
}

.page-masthead-inner > p {
    max-width: 680px;
    margin: 0;
    color: rgb(255 255 255 / 64%);
    font-size: 18px;
}

.content-intro-grid,
.location-grid,
.facilities-grid {
    display: grid;
    grid-template-columns: minmax(190px, 0.7fr) minmax(0, 2fr);
    gap: clamp(50px, 8vw, 120px);
}

.content-lead,
.location-grid h2,
.facilities-grid h2 {
    margin: -8px 0 44px;
    font-family: var(--display);
    font-size: clamp(42px, 5.3vw, 72px);
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 0.98;
    text-transform: uppercase;
}

.prose-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 38px;
    padding-top: 30px;
    border-top: 1px solid var(--line);
}

.prose-columns p,
.story-copy p,
.location-copy > p {
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.78;
}

.story-section {
    color: white;
    background: var(--ink);
}

.story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(60px, 10vw, 150px);
}

.story-grid h2 {
    max-width: 520px;
    margin: 14px 0 0;
    font-family: var(--display);
    font-size: clamp(50px, 6vw, 82px);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 0.94;
    text-transform: uppercase;
}

.story-copy {
    display: grid;
    gap: 22px;
    align-content: end;
}

.story-copy p {
    color: rgb(255 255 255 / 58%);
}

.partner-grid,
.terrain-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
}

.partner-grid article,
.terrain-grid article {
    min-height: 330px;
    padding: 32px;
    background: var(--paper-2);
}

.partner-grid article > span,
.terrain-grid article > span {
    color: var(--signal);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 9px;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.partner-logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 92px;
    margin-bottom: 24px;
}

.partner-logo img {
    display: block;
    width: auto;
    max-width: 180px;
    max-height: 84px;
    object-fit: contain;
}

.partner-grid h3,
.terrain-grid h3 {
    margin: 0 0 16px;
    font-family: var(--display);
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.partner-grid p,
.terrain-grid p {
    margin: 0 0 28px;
    color: var(--muted);
    font-size: 13px;
}

.content-cta {
    color: white;
    background: var(--olive);
}

.content-cta-inner {
    display: flex;
    min-height: 280px;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.content-cta .eyebrow {
    color: rgb(255 255 255 / 52%);
}

.content-cta h2 {
    margin: 6px 0 0;
    font-family: var(--display);
    font-size: clamp(44px, 5.4vw, 74px);
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 1;
    text-transform: uppercase;
}

.team-event-cta {
    padding-block: clamp(28px, 4vw, 48px);
}

.team-event-cta .content-cta-inner {
    min-height: 150px;
}

.location-grid h2,
.facilities-grid h2 {
    margin-top: 16px;
}

.location-copy {
    display: grid;
    gap: 22px;
}

.location-index-heading {
    margin-bottom: 42px;
}

.location-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.location-card {
    display: flex;
    min-height: 330px;
    padding: 34px;
    border: 1px solid var(--line);
    flex-direction: column;
    background: var(--paper-2);
}

.location-card h3 {
    margin: 42px 0 14px;
    font-family: var(--display);
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.location-card p {
    margin: 0 0 18px;
    color: var(--muted);
    line-height: 1.7;
}

.location-card small {
    display: block;
    margin-bottom: 30px;
    color: #555a51;
}

.location-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

.location-card-action {
    min-width: 0;
    max-width: 100%;
    flex: 0 1 auto;
    padding: 11px 16px;
    overflow-wrap: anywhere;
    text-align: center;
    white-space: normal;
}

.location-card-actions a:focus-visible {
    outline: 3px solid var(--ink);
}

.team-card {
    border-top: 3px solid var(--olive);
}

.team-card-tan {
    border-top-color: var(--tan);
}

.team-card-black {
    border-top-color: var(--ink);
}

.team-card-blue {
    border-top-color: #3d5663;
}

/* Darker than the `.team-red` swatch, for the same reason `.team-card-blue` is
   darker than `.team-blue`: this is a 3px rule on `--paper-2`, the darkest light
   ground in the palette, where the swatch red is 2.68:1. #b3261e is 3.54:1
   there. There is no `.team-card-olive` because `.team-card` itself paints
   `--olive`, which is the olive card. */

.team-card-red {
    border-top-color: #b3261e;
}

.team-camo-section p {
    color: var(--muted);
    line-height: 1.7;
}

.team-camo-section ul {
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.team-command {
    color: white;
    background: var(--ink);
}

.team-command .section-heading > p {
    color: rgb(255 255 255 / 55%);
}

.team-command-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.team-commander {
    position: relative;
    min-height: 520px;
    margin: 0;
    overflow: hidden;
    background: var(--ink-2);
}

.team-commander::after {
    position: absolute;
    inset: 45% 0 0;
    content: "";
    background: linear-gradient(to bottom, transparent, rgb(5 8 6 / 92%));
    pointer-events: none;
}

.team-commander img {
    width: 100%;
    height: 620px;
    object-fit: cover;
    object-position: center 30%;
}

.team-commander-placeholder {
    display: grid;
    width: 100%;
    height: 620px;
    place-items: center;
    color: rgb(255 255 255 / 22%);
    background:
        linear-gradient(135deg, transparent 48%, rgb(255 255 255 / 5%) 49%, rgb(255 255 255 / 5%) 51%, transparent 52%),
        var(--ink-2);
    font-family: var(--display);
    font-size: clamp(44px, 7vw, 84px);
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.team-commander figcaption {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 34px;
}

.team-commander figcaption span,
.team-commander figcaption strong {
    display: block;
}

.team-commander figcaption span {
    margin-bottom: 7px;
    color: var(--tan);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.team-commander figcaption strong {
    font-family: var(--display);
    font-size: clamp(28px, 4vw, 48px);
    line-height: 0.95;
    text-transform: uppercase;
}

.location-events {
    background: var(--paper-2);
}

.location-events-discovery-link {
    display: flex;
    min-width: 0;
    max-width: 100%;
    min-height: 52px;
    align-items: center;
    overflow-wrap: anywhere;
    white-space: normal;
}

.location-events-discovery-link:focus-visible {
    outline: 3px solid var(--ink);
}

.address-card {
    margin-top: 24px;
    padding: 34px;
    border-left: 3px solid var(--signal);
    color: white;
    background: var(--ink);
}

.address-card > span {
    display: block;
    color: rgb(255 255 255 / 38%);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.address-card strong {
    display: block;
    margin-top: 8px;
    font-family: var(--display);
    font-size: 25px;
    text-transform: uppercase;
}

.address-card p {
    margin: 12px 0 28px;
    color: rgb(255 255 255 / 56%);
}

.terrain-section {
    color: white;
    background: var(--ink);
}

.terrain-section .section-heading > p {
    color: rgb(255 255 255 / 48%);
}

.terrain-grid {
    background: rgb(255 255 255 / 12%);
}

.terrain-grid article {
    color: white;
    background: var(--ink-2);
}

.terrain-grid p {
    color: rgb(255 255 255 / 48%);
}

.weapon-limits-section {
    background: var(--paper-2);
}

.weapon-limits-section .section-heading > p {
    color: var(--muted);
}

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

.weapon-limit-card {
    padding: 32px;
    border-top: 3px solid var(--signal);
    background: white;
}

.weapon-limit-card > span {
    color: var(--signal-dark);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.weapon-limit-card h3 {
    margin: 42px 0 22px;
    font-family: var(--display);
    font-size: clamp(24px, 2.5vw, 34px);
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.weapon-limit-card p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}

.weapon-limit-card p + p {
    margin-top: 16px;
}

.class-rules-heading {
    margin-top: 64px;
}

.class-rule-card p:first-of-type {
    margin-top: 32px;
}

.facilities-grid > ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.facilities-grid li {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 22px 0;
    border-top: 1px solid var(--line);
}

.facilities-grid li:last-child {
    border-bottom: 1px solid var(--line);
}

.facilities-grid strong {
    font-family: var(--display);
    text-transform: uppercase;
}

.facilities-grid span {
    color: var(--muted);
}

.facilities-grid a {
    color: var(--signal-dark);
    text-decoration: underline;
}

.rules-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: clamp(60px, 9vw, 130px);
    align-items: start;
}

.rules-index {
    position: sticky;
    top: 105px;
    display: flex;
    flex-direction: column;
}

.rules-index .section-index {
    margin-bottom: 22px;
}

.rules-index a {
    padding: 12px 0;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rules-index a:last-child {
    border-bottom: 1px solid var(--line);
}

.rules-index a:hover {
    color: var(--signal-dark);
}

.rules-content {
    display: grid;
    gap: 64px;
}

.rules-content > section {
    scroll-margin-top: 100px;
    padding-bottom: 54px;
    border-bottom: 1px solid var(--line);
}

.rules-content > section > span {
    color: var(--signal);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
}

.rules-content h2 {
    margin: 8px 0 24px;
    font-family: var(--display);
    font-size: clamp(36px, 4.6vw, 58px);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    text-transform: uppercase;
}

.rules-content ul {
    display: grid;
    gap: 13px;
    margin: 0;
    padding: 0;
    color: var(--muted);
    list-style: none;
}

.rules-content li {
    position: relative;
    padding-left: 24px;
}

.rules-content li::before {
    position: absolute;
    top: 10px;
    left: 0;
    width: 6px;
    height: 6px;
    background: var(--olive);
    content: "";
}

.rules-content > section > ol,
.rules-content .rules-contiguous-highlight > ol {
    padding-left: 24px;
    list-style: decimal;
}

.rules-content > section > ol > li::before,
.rules-content .rules-contiguous-highlight > ol > li::before,
.rules-content .rules-rich-text:not(.rules-rich-text-highlighted) > ol > li::before {
    content: none;
}

.rules-contiguous-highlight {
    display: grid;
    gap: 20px;
    padding: 28px;
    border: 1px solid var(--line);
    background: rgb(255 255 255 / 42%);
}

.rules-contiguous-highlight > :first-child {
    margin-top: 0;
}

.rules-contiguous-highlight > :last-child {
    margin-bottom: 0;
}

.rules-contiguous-highlight > ul,
.rules-contiguous-highlight > ol {
    margin: 0;
}

.rules-content .highlighted-rule-list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    counter-reset: highlighted-rule;
    list-style: none;
}

.rules-content .highlighted-rule-list li {
    min-height: 78px;
    padding: 24px 24px 24px 78px;
    border: 1px solid var(--line);
    color: var(--ink);
    background: rgb(255 255 255 / 42%);
    counter-increment: highlighted-rule;
}

.rules-content .highlighted-rule-list li::before {
    top: 24px;
    left: 24px;
    width: auto;
    height: auto;
    color: var(--signal-dark);
    background: transparent;
    content: "0" counter(highlighted-rule);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    font-weight: 800;
}

.rules-content .rules-rich-text {
    color: var(--muted);
}

.rules-content .rules-rich-text > ul,
.rules-content .rules-rich-text > ol {
    display: grid;
    gap: 13px;
    margin: 0;
}

.rules-content .rules-rich-text > ul {
    padding: 0;
    list-style: none;
}

.rules-content .rules-rich-text > ul > li {
    position: relative;
    padding-left: 24px;
}

.rules-content .rules-rich-text > ul > li::before {
    position: absolute;
    top: 10px;
    left: 0;
    width: 6px;
    height: 6px;
    background: var(--olive);
    content: "";
}

.rules-content .rules-rich-text > ol {
    padding-left: 24px;
    list-style: decimal;
}

.rules-content .rules-rich-text-highlighted > ul,
.rules-content .rules-rich-text-highlighted > ol {
    gap: 12px;
    padding: 0;
    counter-reset: highlighted-rule;
    list-style: none;
}

.rules-content .rules-rich-text-highlighted > ul > li,
.rules-content .rules-rich-text-highlighted > ol > li {
    min-height: 78px;
    padding: 24px 24px 24px 78px;
    border: 1px solid var(--line);
    color: var(--ink);
    background: rgb(255 255 255 / 42%);
    counter-increment: highlighted-rule;
}

.rules-content .rules-rich-text-highlighted > ul > li::before,
.rules-content .rules-rich-text-highlighted > ol > li::before {
    top: 24px;
    left: 24px;
    width: auto;
    height: auto;
    color: var(--signal-dark);
    background: transparent;
    content: "0" counter(highlighted-rule);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    font-weight: 800;
}

.highlighted-rule-list strong {
    font-family: var(--display);
    font-size: clamp(20px, 2.6vw, 30px);
    line-height: 1.15;
    text-transform: uppercase;
}

.camo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 28px;
}

.camo-grid article {
    padding: 24px;
    border: 1px solid var(--line);
    background: var(--paper-2);
}

.camo-grid article > i {
    display: block;
    width: 34px;
    height: 7px;
    margin-bottom: 32px;
    background: currentColor;
}

.camo-grid h3 {
    margin: 0 0 10px;
    color: var(--ink);
    font-family: var(--display);
    font-size: 19px;
    line-height: 1.1;
    text-transform: uppercase;
}

.camo-grid p,
.rules-content > section > p {
    color: var(--muted);
}

.camo-grid p {
    margin: 0;
    font-size: 13px;
}

.rules-note {
    margin: 20px 0 0;
    font-size: 12px;
}

/* Event detail */

.event-hero {
    position: relative;
    height: min(700px, 77vh);
    min-height: 560px;
    color: white;
    background-color: var(--ink);
}

.event-hero > img,
.event-hero-shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.event-hero > img {
    object-fit: cover;
    filter: saturate(0.7);
}

.event-hero-shade {
    background:
        linear-gradient(90deg, rgb(8 10 8 / 85%) 0%, rgb(8 10 8 / 25%) 70%),
        linear-gradient(0deg, rgb(8 10 8 / 78%), transparent 62%);
}

.event-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
    padding: 120px 0 64px;
}

.back-link {
    align-self: flex-start;
    color: rgb(255 255 255 / 72%);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.back-link.dark {
    color: var(--muted);
}

.event-hero .eyebrow {
    color: rgb(255 255 255 / 65%);
}

.event-hero .eyebrow i {
    background: var(--signal);
}

.event-hero h1 {
    max-width: 980px;
    margin: 14px 0 14px;
    font-family: var(--display);
    font-size: clamp(60px, 8vw, 112px);
    font-weight: 900;
    letter-spacing: -0.055em;
    line-height: 0.88;
    text-transform: uppercase;
}

.event-hero-content > div > p {
    max-width: 670px;
    margin: 0;
    color: rgb(255 255 255 / 68%);
    font-size: 17px;
}

.event-facts {
    background: var(--ink-2);
}

.facts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.facts-grid > div {
    padding: 24px 22px;
    border-right: 1px solid rgb(255 255 255 / 10%);
}

.facts-grid > div:first-child {
    border-left: 1px solid rgb(255 255 255 / 10%);
}

.facts-grid span,
.facts-grid strong {
    display: block;
}

.facts-grid strong a {
    text-decoration: underline;
    text-decoration-color: rgb(255 255 255 / 24%);
    text-underline-offset: 4px;
}

.facts-grid strong a:hover {
    color: var(--signal);
}

.facts-grid span {
    margin-bottom: 6px;
    color: rgb(255 255 255 / 34%);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.facts-grid strong {
    color: white;
    font-family: var(--display);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

/* Theme API 0.6's day times (core 0.3.0): the facts strip's note under
   "Game on to End of play", Terrain and Standard as tags under Overview, the
   "On the day" panel, and the lean booking card's age and uniform line and
   its folded policy. */

.facts-grid .event-facts-note { display: block; margin-top: 4px; color: rgb(255 255 255 / 72%); font-size: 0.8125rem; font-style: normal; }

.event-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }

.event-tags span { padding: 4px 10px; border: 1px solid var(--line); font-size: 0.875rem; }

.event-day-times { margin: 32px 0; }

.event-day-times h4 { margin: 16px 0 6px; }

.event-day-times dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }

.event-day-times dl div { display: grid; gap: 2px; min-width: 0; }

.event-day-times dt { color: var(--olive); font-size: 0.8125rem; }

.event-day-times dd { margin: 0; font-weight: 700; }

/* On the day with public itinerary entries (core 0.6.0): a day with entries
   reads as one list in time order, the time first (never wrapping, wide
   enough for "Mon 01:00"), then what happens, an entry's note under it in the
   labels' olive. Rows are ruled off. A day without entries keeps its three
   times in a row. */

.event-day-times dl.event-day-times-timeline { grid-template-columns: minmax(0, 1fr); gap: 0; }

.event-day-times .event-day-times-timeline div { grid-template-columns: 5.5rem minmax(0, 1fr); gap: 2px 16px; padding: 8px 0; border-top: 1px solid var(--line); }

.event-day-times .event-day-times-timeline div:last-child { border-bottom: 1px solid var(--line); }

.event-day-times .event-day-times-timeline dt { grid-column: 2; grid-row: 1; color: var(--ink); font-size: 1rem; }

.event-day-times .event-day-times-timeline dd { grid-column: 1; grid-row: 1; white-space: nowrap; }

.event-day-times .event-day-times-timeline .event-day-times-note { grid-column: 2; grid-row: 2; color: var(--olive); font-size: 0.8125rem; font-weight: 400; white-space: normal; }

.booking-panel-meta { margin: 12px 0; }

.booking-panel-meta a { text-decoration: underline; text-decoration-color: rgb(255 255 255 / 45%); text-underline-offset: 3px; }

.booking-panel-policy { margin-top: 12px; }

.booking-panel-policy summary { display: list-item; min-height: 44px; padding-block: 12px; cursor: pointer; }

.booking-panel-policy summary:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }

@media (max-width: 600px) { .event-day-times dl { grid-template-columns: 1fr; } }

.event-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(400px, 430px);
    gap: clamp(70px, 10vw, 150px);
    align-items: start;
}

.briefing-copy h2 {
    margin: 18px 0 32px;
    font-family: var(--display);
    font-size: 64px;
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 1;
    text-transform: uppercase;
}

.briefing-copy > p {
    max-width: 720px;
    margin: 0 0 20px;
    color: #555a51;
    font-size: 17px;
    line-height: 1.78;
}

.expectation-block {
    margin-top: 52px;
    padding: 30px;
    border-left: 3px solid var(--olive);
    background: var(--paper-2);
}

.expectation-block h3 {
    margin: 0 0 18px;
    font-family: var(--display);
    font-size: 22px;
    font-weight: 850;
    text-transform: uppercase;
}

.expectation-block ul {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    color: var(--muted);
    font-size: 13px;
    list-style: none;
}

.expectation-block li {
    position: relative;
    padding-left: 20px;
}

.expectation-block li::before {
    position: absolute;
    top: 10px;
    left: 0;
    width: 5px;
    height: 5px;
    background: var(--signal);
    content: "";
}

.booking-panel {
    position: sticky;
    top: 96px;
    padding: 32px;
    color: white;
    background: var(--ink);
}

.booking-panel-code {
    color: var(--signal);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 9px;
    letter-spacing: 0.12em;
}

.booking-panel h2 {
    margin: 9px 0 28px;
    font-family: var(--display);
    font-size: 31px;
    font-weight: 850;
    text-transform: uppercase;
}

.booking-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.booking-price strong {
    font-family: var(--display);
    font-size: 44px;
    line-height: 1;
}

.booking-price span {
    color: rgb(255 255 255 / 76%);
    font-size: 13px;
    line-height: 1.45;
}

.panel-rule {
    height: 1px;
    margin: 26px 0;
    background: rgb(255 255 255 / 12%);
}

.panel-stat {
    display: flex;
    justify-content: space-between;
    padding: 7px 0;
    font-size: 13px;
}

.panel-stat span {
    color: rgb(255 255 255 / 76%);
}

/* The "Places" heading over the per-day list: a real h3 under the panel's
   h2, set as the panel's other labels are. */

.panel-stat h3 {
    margin: 0;
    color: rgb(255 255 255 / 76%);
    font: inherit;
    letter-spacing: inherit;
    text-transform: none;
}

.team-summary {
    display: grid;
    gap: 8px;
    margin: 24px 0;
}

.team-summary > div {
    display: grid;
    grid-template-columns: 8px 1fr auto;
    gap: 9px;
    align-items: center;
    padding: 10px 12px;
    background: rgb(255 255 255 / 5%);
    font-size: 12px;
}

.team-summary > div > small {
    grid-column: 2 / 4;
    color: rgb(255 255 255 / 82%);
    font-size: 12px;
    line-height: 1.55;
}

.team-uniform-requirements {
    grid-column: 1 / -1;
    margin-top: 5px;
    padding: 13px 14px;
    border-left: 3px solid currentColor;
    color: white;
    background: rgb(255 255 255 / 14%);
}

.team-uniform-requirements b {
    display: block;
    margin-bottom: 5px;
    color: var(--signal);
    font-family: var(--display);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.team-uniform-requirements p {
    margin: 0;
    color: #fff;
    font-size: 13px;
    line-height: 1.65;
    text-align: left;
}

.uniform-policy-notice {
    grid-column: 1 / -1;
    padding: 16px 18px;
    border-left: 4px solid var(--olive);
    background: #edf0e5;
}

.uniform-policy-notice.is-strict {
    border-left-color: #a64028;
    background: #fae9e4;
}

.uniform-policy-notice strong {
    display: block;
    font-family: var(--display);
    font-size: 18px;
    text-transform: uppercase;
}

.uniform-policy-notice p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

.team-summary > .uniform-policy-notice {
    display: block;
    color: var(--ink);
}

.team-summary > .uniform-policy-notice.is-advisory {
    border-left-color: #58704f;
    background: #edf0e5;
}

.team-summary > .uniform-policy-notice strong {
    color: var(--ink);
    font-weight: 900;
}

.team-summary > .uniform-policy-notice p {
    color: #343b31;
}

.booking-main > .uniform-policy-notice {
    margin: 20px 0;
}

.team-summary > div > .team-sniper-availability {
    margin-top: 1px;
    text-align: left;
}

.team-summary i,
.team-option-copy i,
.ticket-details dd i {
    width: 7px;
    height: 7px;
    background: currentColor;
}

.team-olive {
    color: var(--olive-light);
}

.team-tan {
    color: var(--tan);
}

.team-black {
    color: #afb0aa;
}

.team-blue {
    color: #8ba5b0;
}

/* The fifth team identifier, and the only one measured against every ground it
   lands on. `team_class()` puts these on the dark event and ticket panels, on
   the light booking option, event dress-code card and dress-code dialog, and on
   the near-white staff tables, and the four above it were only ever chosen for
   the dark ones: on a light ground olive is 2.8:1 and tan, black and blue are
   between 1.7:1 and 2.2:1, all of them under the 3:1 a 7px square carrying
   meaning has to meet. #d2322d is 3.26:1 or better on all seven of those grounds
   and 3.62:1 on the dark panel, so it is the one identifier that passes
   everywhere rather than the one that matches the others' arithmetic.
   tests/checks/neutral-content-defaults.php computes it from this declaration. */

.team-red {
    color: #d2322d;
}

.team-summary span {
    color: white;
}

.team-summary span a {
    color: inherit;
    text-decoration-color: rgb(255 255 255 / 35%);
    text-underline-offset: 3px;
}

.team-summary strong {
    color: rgb(255 255 255 / 78%);
    font-weight: 600;
}

.booking-panel small {
    display: block;
    margin-top: 14px;
    color: rgb(255 255 255 / 72%);
    font-size: 11px;
    line-height: 1.5;
    text-align: center;
}

/* Booking form */

.booking-shell {
    padding-top: 140px;
}

.booking-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: clamp(60px, 9vw, 130px);
    align-items: start;
}

.booking-main > .section-index {
    display: flex;
    margin-top: 48px;
}

.booking-main h1 {
    margin: 12px 0 16px;
    font-family: var(--display);
    font-size: clamp(54px, 7vw, 90px);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 0.95;
    text-transform: uppercase;
}

.staff-toolbar h1 {
    margin: 12px 0 16px;
    font-family: var(--display);
    font-size: clamp(54px, 7vw, 90px);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 0.95;
    text-transform: uppercase;
}

.booking-lead {
    max-width: 670px;
    margin: 0 0 42px;
    color: var(--muted);
    font-size: 17px;
}

.form-errors {
    margin: 0 0 28px;
    padding: 16px 18px;
    border-left: 3px solid #a64028;
    color: #772a1d;
    background: #eddbd3;
}

.form-errors strong {
    display: block;
    font-size: 13px;
}

.form-errors p {
    margin: 2px 0 0;
    font-size: 12px;
}

.booking-form fieldset {
    margin: 0 0 46px;
    padding: 0;
    border: 0;
}

.event-form fieldset {
    margin: 0 0 46px;
    padding: 0;
    border: 0;
}

.booking-form legend {
    width: 100%;
    margin-bottom: 22px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--line);
    font-family: var(--display);
    font-size: 18px;
    font-weight: 850;
    text-transform: uppercase;
}

.event-form legend {
    width: 100%;
    margin-bottom: 22px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--line);
    font-family: var(--display);
    font-size: 18px;
    font-weight: 850;
    text-transform: uppercase;
}

/* A visually hidden legend keeps .sr-only's size: the rule above would
   otherwise stretch it to its positioned ancestor's width and scroll the
   page sideways. */

.booking-form legend.sr-only {
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

.event-form legend.sr-only {
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

.booking-form legend span {
    margin-right: 14px;
    color: var(--signal);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 9px;
}

.event-form legend span {
    margin-right: 14px;
    color: var(--signal);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 9px;
}

.booking-form legend em {
    margin-left: 8px;
    color: var(--muted);
    font-family: var(--body);
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.fieldset-intro {
    max-width: 660px;
    margin: -8px 0 22px;
    color: var(--muted);
    font-size: 11px;
}

.team-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.team-briefing-links {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 10px;
}

.team-briefing-links a {
    margin-left: 8px;
    color: var(--olive);
    font-weight: 800;
}

.team-option {
    position: relative;
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 12px;
    align-items: center;
    min-height: 90px;
    padding: 18px;
    border: 1px solid var(--line);
    cursor: pointer;
    background: #ebe8df;
}

.team-option:has(input:checked) {
    border-color: var(--olive);
    box-shadow: inset 0 0 0 1px var(--olive);
    background: #e2e3d8;
}

.team-option.is-full {
    cursor: not-allowed;
    opacity: 0.45;
}

.team-option.is-unavailable {
    border-color: #b76c58;
    cursor: not-allowed;
    background: #f5eadd;
}

.team-option.is-unavailable [data-team-space],
.team-booking-public-state.is-paused,
.team-booking-reopens {
    color: #712d24;
    font-weight: 850;
}

.team-booking-reopens {
    display: block;
    grid-column: 2;
    font-size: 10px;
}

.team-option input {
    position: absolute;
    opacity: 0;
}

.radio-mark {
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border: 1px solid #989b91;
    border-radius: 50%;
}

.radio-mark::after {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--signal);
    content: "";
    opacity: 0;
    transform: scale(.6);
    transition: opacity 140ms ease, transform 140ms ease;
}

.team-option input:checked + .radio-mark::after {
    opacity: 1;
    transform: scale(1);
}

.team-option input:focus-visible + .radio-mark {
    outline: 3px solid var(--signal);
    outline-offset: 3px;
}

.team-option-copy {
    display: grid;
    grid-template-columns: 8px 1fr;
    gap: 4px 9px;
    align-items: center;
}

.team-option-copy strong {
    color: var(--ink);
    font-family: var(--display);
    font-size: 15px;
    text-transform: uppercase;
}

.team-option-copy small {
    grid-column: 2;
    color: var(--muted);
    font-size: 10px;
}

.team-role-space,
.team-camo-rule {
    grid-column: 2;
    margin-top: 6px;
    color: #555b4e;
    font-size: 10px;
    line-height: 1.45;
}

.team-role-space {
    color: var(--signal-dark);
    font-weight: 800;
}

.role-options {
    margin-bottom: 20px;
}

.role-option .team-option-copy {
    grid-template-columns: 1fr;
}

.role-option .team-option-copy small {
    grid-column: 1;
}

/* Booking for someone else (core 0.9.0): the booker's fields and the
   player's wording for each answer to "Who is playing?" are all in the page,
   so the form works without JavaScript; the checked answer hides the other's.
   A browser without :has() shows both, and the server reads booking_for. */

.booking-form:has(input[name="booking_for"][value="me"]:checked) [data-booking-for="someone_else"],
.booking-form:has(input[name="booking_for"][value="someone_else"]:checked) [data-booking-for="me"] {
    display: none;
}

/* The player fieldset's legend names the player in either answer's words;
   they are legend text, not the step number the legend's first span is. */

.booking-form legend [data-booking-for] {
    margin-right: 0;
    color: inherit;
    font: inherit;
}

.booking-booker {
    margin-top: 28px;
}

.booking-booker h3 {
    margin: 0 0 16px;
    font-family: var(--display);
    font-size: 18px;
    text-transform: uppercase;
}

.group-name-field {
    margin-top: 20px;
}

.group-name-field label > small:first-of-type {
    color: var(--muted);
}

.friend-bookings > .fieldset-intro {
    max-width: 720px;
}

.friend-booking-card {
    margin-bottom: 18px;
    padding: clamp(18px, 3vw, 28px);
    border: 1px solid var(--line);
    border-left: 4px solid var(--signal);
    background: #ebe8df;
}

.friend-booking-card > header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: start;
    margin-bottom: 22px;
}

.friend-booking-card h3 {
    margin: 3px 0 0;
    font-family: var(--display);
    font-size: 22px;
    text-transform: uppercase;
}

/* Remove (core 0.9.3): an outline button, as "Add a friend" is, in the
   destructive red the old text button used; 44 pixels tall on the card. */

.friend-booking-card > header .friend-booking-remove {
    flex: none;
    min-height: 44px;
    padding: 10px 18px;
    border-color: #8c2d21;
    color: #8c2d21;
    background: transparent;
}

.friend-booking-card > header .friend-booking-remove:hover {
    color: #ffffff;
    background: #8c2d21;
}

.friend-booking-card > header .friend-booking-remove:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 3px;
}

/* Next of kin (core 0.9.3). "I'm their next of kin" is a choice row in the
   team option's idiom: bordered, 56 pixels, olive once ticked. Ticked, the
   name and number fields give way to a note and the relationship asks for
   the booker's own. A browser without :has() keeps the fields and the
   server uses the booker's details all the same. */

.friend-next-of-kin {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}

.friend-next-of-kin > h4 {
    margin: 0 0 14px;
    font-family: var(--display);
    font-size: 17px;
    text-transform: uppercase;
}

.friend-next-of-kin > h4 em {
    margin-left: 8px;
    color: var(--muted);
    font-family: var(--body);
    font-size: 10px;
    font-style: normal;
    font-weight: 850;
    letter-spacing: 0.1em;
}

.next-of-kin-booker {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    min-height: 56px;
    margin-bottom: 18px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    color: var(--ink);
    background: #f7f6f1;
    cursor: pointer;
    font-size: 15px;
    font-weight: 750;
}

.next-of-kin-booker input {
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--olive);
}

.next-of-kin-booker:has(input:checked) {
    border-color: var(--olive);
    box-shadow: inset 0 0 0 1px var(--olive);
    background: #e2e3d8;
}

.next-of-kin-booker.has-error,
.next-of-kin-booker.has-error:has(input:checked) {
    border-color: #a3221b;
    box-shadow: inset 0 0 0 1px #a3221b;
}

.next-of-kin-booker + .field-error {
    margin: -8px 0 14px;
}

.next-of-kin-booker-note {
    margin: -6px 0 18px;
    color: var(--ink);
    font-size: 13px;
}

.next-of-kin-booker-note,
.next-of-kin-booker-only {
    display: none;
}

/* A friend's box always counts; the lead's only while "Someone else" is
   chosen, as the server reads it. */

.friend-next-of-kin:has([data-next-of-kin-booker]:checked) .next-of-kin-booker-note,
.booking-form:has(input[name="booking_for"][value="someone_else"]:checked) fieldset.next-of-kin-group:has([data-next-of-kin-booker]:checked) .next-of-kin-booker-note {
    display: block;
}

.friend-next-of-kin:has([data-next-of-kin-booker]:checked) .next-of-kin-booker-only,
.booking-form:has(input[name="booking_for"][value="someone_else"]:checked) fieldset.next-of-kin-group:has([data-next-of-kin-booker]:checked) .next-of-kin-booker-only {
    display: inline;
}

.friend-next-of-kin:has([data-next-of-kin-booker]:checked) .next-of-kin-own,
.booking-form:has(input[name="booking_for"][value="someone_else"]:checked) fieldset.next-of-kin-group:has([data-next-of-kin-booker]:checked) .next-of-kin-own {
    display: none;
}

.friend-booking-selection,
.friend-emergency-fields {
    margin-bottom: 20px;
}

.friend-booking-limit {
    display: block;
    margin-top: 9px;
    color: var(--muted);
    font-size: 10px;
}

.friend-bookings [data-add-friend]:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-grid label {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.form-grid label > span {
    color: #575a52;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.form-grid label > span em {
    margin-left: 6px;
    color: #96998f;
    font-style: normal;
    font-weight: 600;
}

.form-grid input,
.form-grid textarea,
.form-grid select {
    width: 100%;
    min-height: 48px;
    padding: 11px 13px;
    border: 1px solid #cbc8bf;
    border-radius: 0;
    color: var(--ink);
    background: #f9f7f1;
}

.form-grid textarea {
    min-height: 110px;
    resize: vertical;
}

.form-grid .has-error input,
.form-grid .has-error textarea,
.has-error input {
    border-color: #a64028;
}

.form-grid label small {
    color: var(--muted);
    font-size: 10px;
}

.form-grid label.has-error > small:last-child {
    color: #9b3424;
}

.field-error {
    margin: 9px 0 0;
    color: #9b3424;
    font-size: 11px;
}

.terms-check {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 12px;
    align-items: start;
    margin-bottom: 9px;
    color: var(--muted);
    cursor: pointer;
    font-size: 12px;
}

.terms-check input {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--signal);
}

.terms-check > span {
    min-width: 0;
}

.terms-check > span > small {
    display: block;
    margin-top: 6px;
    line-height: 1.45;
}

/* A help or error note written as a direct child of .terms-check rather than
   inside its <span>. The grid is `20px 1fr`, so auto-placement put such a note in
   the checkbox gutter -- twenty pixels wide -- where it wrapped one or two
   characters per line. That is what "Set up at least one operational day before
   enabling automatic checkout." was doing under the automatic-checkout box. It is
   the rule above's sibling and not a replacement for it: both spellings of the
   note appear across the staff forms, and this puts them in the same column. */

.terms-check > small {
    grid-column: 2;
    margin-top: 6px;
    line-height: 1.45;
}

.button-pay {
    width: 100%;
    justify-content: space-between;
    margin-top: 24px;
}

.button-pay span {
    padding-left: 22px;
    border-left: 1px solid rgb(255 255 255 / 30%);
}

.payment-note {
    color: var(--muted);
    font-size: 10px;
    text-align: center;
}

.payment-note i {
    margin-right: 5px;
    color: var(--olive);
    font-style: normal;
}

.honeypot {
    position: absolute;
    left: -10000px;
}

/* Sticky, and SHORT ENOUGH TO STICK. A sticky element taller than its scrollport
   cannot pin until its bottom edge reaches the bottom of the window, so a card
   taller than the viewport travels with the document for the whole form and only
   appears to lock at the very end -- which is exactly what it did, and exactly
   what a player reported. Bounding it to the window is the whole fix: the card
   pins from the first pixel of scroll, and the part that no longer fits scrolls
   inside it instead of pushing the card past the window.

   120px is `top` plus breathing room, so the card clears the fixed header and
   does not run into the bottom edge.

   `overflow: hidden` used to be here and has gone, because it disables
   `position: sticky` on every descendant and the totals below are pinned to the
   card's own foot. It was holding nothing: the hero image is clipped by
   `.booking-summary-media`'s own overflow, and this element has no radius to
   clip to.

   The stacked layout at 820px opts out of all of it -- see the `position: static`
   there -- and `.gift-card-summary`, which never stuck, opts out too. */

.booking-summary {
    display: flex;
    position: sticky;
    top: 100px;
    flex-direction: column;
    max-height: calc(100vh - 120px);
    color: white;
    background: var(--ink);
}

/* Never shrinks. A flex item with an aspect ratio that is allowed to shrink
   squashes the photograph rather than cropping it; on a window too short to
   carry it at all it is removed outright below, because it is decorative and the
   figures under it are not. */

.booking-summary-media {
    flex: 0 0 auto;
    aspect-ratio: 1.75;
    overflow: hidden;
}

.booking-summary-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.65);
}

.booking-summary > .event-code {
    top: 15px;
    left: 15px;
}

/* The part that gives way. `min-height: 0` is not optional: a flex item's
   default minimum is its content, so without it this refuses to shrink, the card
   grows past its max-height again and nothing is fixed.

   The gift-card page shares this element and never sticks, so it never reaches a
   max-height and this never scrolls there. */

.booking-summary-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 28px;
}

/* The money, pinned to the foot of the card rather than left at the end of the
   region that scrolls. A running total the player has to scroll to find is a
   running total that is not doing its job. */

.booking-summary-totals {
    flex: 0 0 auto;
    padding: 0 28px 28px;
}

/* On a window too short to carry the whole card, the photograph goes first. It
   is decorative; the date, the location, the admission and the two figures are
   not, and losing 223px of it is what keeps them all on screen without anything
   having to scroll inside the card.
 *
 * Bounded by `min-width` as well, because below 821px the card is stacked above
 * the form and scrolls with the page -- it has no scrollport to fit into, and a
 * phone held sideways is short without being cramped. Mobile keeps its hero. */

@media (min-width: 821px) and (max-height: 900px) {
    .booking-summary-media {
        display: none;
    }

    /* The event code is positioned over the photograph's top-left corner, and
       with the photograph gone it lands on "Your event". Room is made for it
       rather than hiding it: it is the code a player reads out on the phone. */
    .booking-summary-body {
        padding-top: 56px;
    }
}

.booking-summary .eyebrow {
    color: rgb(255 255 255 / 40%);
}

.booking-summary h2 {
    margin: 7px 0 24px;
    font-family: var(--display);
    font-size: 31px;
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1;
    text-transform: uppercase;
}

.booking-summary dl {
    margin: 0;
}

.booking-summary dl div {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-top: 1px solid rgb(255 255 255 / 10%);
}

.booking-summary dt,
.booking-summary dd {
    margin: 0;
    font-size: 11px;
}

.booking-summary dt {
    color: rgb(255 255 255 / 40%);
}

/* No top margin any more. This rule used to separate itself from the detail list
   it sat directly under; it is now the first thing in `.booking-summary-totals`,
   whose own edge does the separating, and a margin here would be measured from
   the bottom of a region that scrolls. The border stays: it is what tells a
   player the figures are a summing-up rather than another detail row. */

.summary-total {
    display: flex;
    align-items: end;
    justify-content: space-between;
    padding-top: 20px;
    border-top: 1px solid rgb(255 255 255 / 30%);
}

.summary-total span {
    color: rgb(255 255 255 / 45%);
    font-size: 10px;
    text-transform: uppercase;
}

.summary-total strong {
    font-family: var(--display);
    font-size: 32px;
}

/* Tickets and messages */

.ticket-section {
    min-height: 75vh;
    padding-top: 150px;
}

.message-section {
    min-height: 75vh;
    padding-top: 150px;
}

.ticket-heading {
    max-width: 700px;
    margin-bottom: 46px;
}

.ticket-heading .eyebrow {
    color: var(--olive);
}

.ticket-heading h1 {
    margin: 10px 0 12px;
    font-family: var(--display);
    font-size: clamp(52px, 7vw, 88px);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 0.95;
    text-transform: uppercase;
}

.status-card h1 {
    margin: 10px 0 12px;
    font-family: var(--display);
    font-size: clamp(52px, 7vw, 88px);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 0.95;
    text-transform: uppercase;
}

.ticket-heading p {
    max-width: 610px;
    margin: 0;
    color: var(--muted);
}

.status-card p {
    max-width: 610px;
    margin: 0;
    color: var(--muted);
}

.ticket {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    max-width: 1050px;
    color: white;
    background: var(--ink);
    box-shadow: 0 28px 70px rgb(16 18 15 / 18%);
}

.ticket-waiver-pending {
    animation: ticket-waiver-pulse 2.4s ease-in-out infinite;
}

.ticket-main {
    padding: 40px 44px;
}

.ticket-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgb(255 255 255 / 68%);
    font-family: var(--display);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ticket-brand .brand-logo {
    width: min(100%, 240px);
}

.ticket-waiver-status {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    margin-top: 30px;
    padding: 14px 16px;
    border: 1px solid rgb(216 157 101 / 70%);
    background: rgb(113 57 29 / 42%);
}

.ticket-waiver-status strong {
    flex: 0 0 auto;
    color: #f1bd87;
    font-family: var(--display);
    font-size: 18px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ticket-waiver-status span {
    max-width: 430px;
    color: rgb(255 255 255 / 82%);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
    text-align: right;
}

.ticket-waiver-pending .ticket-operation {
    margin-top: 30px;
}

.ticket-operation {
    margin: 44px 0 36px;
}

.ticket-operation > span {
    color: var(--signal);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 9px;
    letter-spacing: 0.12em;
}

.ticket-operation h2 {
    margin: 8px 0 0;
    font-family: var(--display);
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 0.95;
    text-transform: uppercase;
}

.ticket-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin: 0;
}

.ticket-details div {
    padding-top: 13px;
    border-top: 1px solid rgb(255 255 255 / 14%);
}

.ticket-details dt,
.ticket-details dd {
    margin: 0;
}

.ticket-details dt {
    color: rgb(255 255 255 / 35%);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ticket-details dd {
    display: flex;
    gap: 7px;
    align-items: center;
    margin-top: 5px;
    color: white;
    font-family: var(--display);
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
}

.ticket-stub {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 36px;
    border-left: 1px dashed rgb(255 255 255 / 28%);
    background: var(--ink-2);
    text-align: center;
}

.ticket-stub::before,
.ticket-stub::after {
    position: absolute;
    left: -13px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--paper);
    content: "";
}

.ticket-stub::before {
    top: -13px;
}

.ticket-stub::after {
    bottom: -13px;
}

.ticket-stub > span,
.ticket-stub > small {
    color: rgb(255 255 255 / 38%);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.ticket-stub > .ticket-stub-each-day {
    display: none;
}

.ticket-stub > strong {
    margin: 14px 0 10px;
    color: var(--signal);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 17px;
}

.ticket-qr {
    width: 166px;
    margin-top: 18px;
    padding: 9px;
    background: white;
}

.ticket-qr img {
    display: block;
    width: 100%;
    height: auto;
}

.ticket-actions {
    display: flex;
    max-width: 1050px;
    align-items: center;
    justify-content: space-between;
    margin-top: 30px;
}

.ticket-next-steps {
    max-width: 1050px;
    margin-top: 30px;
    padding: clamp(26px, 4vw, 40px);
    color: white;
    background: var(--ink);
}

.ticket-next-steps > header {
    max-width: 720px;
}

.ticket-next-steps > header .section-index {
    color: var(--signal);
}

.ticket-next-steps h2 {
    margin: 7px 0 9px;
    font-family: var(--display);
    font-size: clamp(30px, 4vw, 48px);
    line-height: 0.95;
    text-transform: uppercase;
}

.ticket-next-steps > header p {
    margin: 0;
    color: rgb(255 255 255 / 68%);
    line-height: 1.6;
}

.ticket-next-steps > header .ticket-next-steps-each-day {
    margin-top: 10px;
}

.ticket-next-steps ol {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin: 26px 0 0;
    padding: 1px;
    background: rgb(255 255 255 / 16%);
    list-style: none;
}

.ticket-next-steps li {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 14px;
    align-content: start;
    padding: 22px;
    background: var(--ink-2);
}

.ticket-next-step-number {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 30%);
    color: var(--signal);
    font-family: var(--display);
    font-weight: 900;
}

.ticket-next-steps li.is-complete .ticket-next-step-number {
    border-color: var(--olive-light);
    color: white;
    background: var(--olive);
}

.ticket-next-steps li small,
.ticket-next-steps li strong {
    display: block;
}

.ticket-next-steps li small {
    color: var(--signal);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ticket-next-steps li.is-complete small {
    color: #b9cf94;
}

.ticket-next-steps li strong {
    margin-top: 5px;
    font-family: var(--display);
    font-size: 19px;
    text-transform: uppercase;
}

.ticket-next-steps li p {
    margin: 7px 0 0;
    color: rgb(255 255 255 / 62%);
    font-size: 12px;
    line-height: 1.55;
}

.ticket-next-steps li > .button {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 8px;
}

.ticket-next-steps .button-outline {
    border-color: rgb(255 255 255 / 34%);
    color: white;
}

.ticket-page-exit {
    display: flex;
    max-width: 1050px;
    justify-content: flex-end;
    margin-top: 30px;
}

.ticket-withdrawal {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
    max-width: 1050px;
    gap: 42px;
    align-items: center;
    margin-top: 54px;
    padding: clamp(28px, 5vw, 48px);
    border: 1px solid var(--line);
    background: var(--paper-2);
}

.ticket-withdrawal h2 {
    margin: 8px 0 12px;
    font-family: var(--display);
    font-size: clamp(32px, 5vw, 52px);
    line-height: 0.95;
    text-transform: uppercase;
}

.ticket-withdrawal p {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.ticket-withdrawal form {
    padding: 24px;
    border-left: 3px solid var(--signal);
    background: var(--paper);
}

.ticket-withdrawal form .button {
    width: 100%;
    margin-top: 16px;
}

.refund-incentive {
    margin-top: 22px;
    padding: 18px 20px;
    color: white;
    background: var(--olive);
}

.refund-incentive strong {
    display: block;
    margin-bottom: 6px;
    color: var(--signal);
    font-family: var(--display);
    font-size: 22px;
    text-transform: uppercase;
}

.refund-incentive p {
    color: rgb(255 255 255 / 72%);
}

.ticket-information {
    max-width: 1050px;
    margin-top: 24px;
    padding: 28px 32px;
    border-left: 3px solid var(--signal);
    background: var(--paper-2);
}

.ticket-information p {
    max-width: 760px;
    margin: 12px 0 0;
    color: var(--olive);
}

.ticket-information .button {
    margin-top: 22px;
}

/* The ticket page's tick boxes (signing the waiver, rescinding it, releasing
   the place) are 24-pixel targets, in a column as wide. */

.ticket-page .terms-check {
    grid-template-columns: 24px 1fr;
}

.ticket-page .terms-check input {
    width: 24px;
    height: 24px;
}

/* Ticket itinerary (core 0.3.0): each covered day's times, the kiosk's list
   shape on the light ticket. */

.ticket-itinerary h2,
.ticket-itinerary h3 {
    break-after: avoid;
}

.itinerary-list {
    margin: 8px 0 20px;
    padding: 0;
    list-style: none;
}

.itinerary-list li {
    display: grid;
    grid-template-columns: 6rem 1fr;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--line);
    break-inside: avoid;
}

.itinerary-list time {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.itinerary-list strong {
    display: block;
}

.itinerary-list p {
    margin: 2px 0 0;
    color: var(--olive);
    font-size: 0.875rem;
}

.ticket-wallet-actions {
    display: flex;
    max-width: 1050px;
    gap: 28px;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
    padding: 24px 28px;
    color: white;
    background: var(--ink-2);
}

.ticket-wallet-actions p {
    margin: 7px 0 0;
    color: rgb(255 255 255 / 58%);
    font-size: 11px;
}

.ticket-wallet-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.wallet-button {
    border: 1px solid rgb(255 255 255 / 32%);
    color: white;
    background: black;
}

.retrieval-layout {
    display: grid;
    grid-template-columns: minmax(0, 680px) minmax(280px, 380px);
    gap: clamp(50px, 9vw, 130px);
    align-items: start;
}

.retrieval-layout h1 {
    margin: 12px 0 16px;
    font-family: var(--display);
    font-size: clamp(54px, 7vw, 90px);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 0.95;
    text-transform: uppercase;
}

.retrieval-form {
    max-width: 620px;
}

.retrieval-note {
    padding: 32px;
    color: white;
    background: var(--ink);
}

.retrieval-note .eyebrow {
    color: var(--signal);
}

.retrieval-note h2 {
    margin: 16px 0;
    font-family: var(--display);
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.retrieval-note p {
    margin: 0;
    color: rgb(255 255 255 / 55%);
    font-size: 13px;
}

.retrieval-note .button {
    width: 100%;
    margin-top: 24px;
}

.status-card {
    max-width: 780px;
    padding: clamp(38px, 7vw, 86px);
    border-left: 4px solid var(--signal);
    background: var(--paper-2);
}

.withdrawal-status-card {
    max-width: 860px;
}

.withdrawal-status-card dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 30px 0;
    border-top: 1px solid var(--line);
}

.withdrawal-status-card dl div {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

.withdrawal-status-card dt,
.withdrawal-status-card dd {
    margin: 0;
}

.withdrawal-status-card dt {
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.withdrawal-status-card dd {
    margin-top: 5px;
    font-family: var(--display);
    font-weight: 800;
    text-transform: uppercase;
}

.refund-status {
    margin: 24px 0 0;
    padding: 18px 20px;
    border-left: 3px solid var(--signal);
    background: var(--paper);
}

.refund-status strong {
    display: block;
    font-family: var(--display);
    text-transform: uppercase;
}

.refund-status p {
    margin-top: 6px;
    font-size: 12px;
}

.refund-status-completed {
    border-left-color: var(--olive);
}

.refund-status-review {
    border-left-color: #a64028;
}

.local-payment-card {
    max-width: 760px;
    padding: clamp(34px, 7vw, 74px);
    color: white;
    background: var(--ink);
    box-shadow: 0 28px 70px rgb(16 18 15 / 18%);
}

.local-payment-card .eyebrow {
    color: var(--signal);
}

.local-payment-card h1 {
    margin: 10px 0 12px;
    font-family: var(--display);
    font-size: clamp(46px, 7vw, 76px);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 0.95;
    text-transform: uppercase;
}

.local-payment-card > p {
    max-width: 590px;
    color: rgb(255 255 255 / 80%);
    font-size: 14px;
    line-height: 1.65;
}

.local-payment-card dl {
    margin: 36px 0;
    border-top: 1px solid rgb(255 255 255 / 14%);
}

.local-payment-card dl div {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 13px 0;
    border-bottom: 1px solid rgb(255 255 255 / 14%);
}

.local-payment-card dt,
.local-payment-card dd {
    margin: 0;
}

.local-payment-card dt {
    color: rgb(255 255 255 / 68%);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.local-payment-card dd {
    font-family: var(--display);
    font-weight: 800;
    text-align: right;
    text-transform: uppercase;
}

.local-payment-actions {
    display: flex;
    gap: 10px;
}

.local-payment-card .button-outline {
    color: white;
    border-color: rgb(255 255 255 / 24%);
}

.group-booking-card {
    max-width: 920px;
}

.group-booking-members {
    display: grid;
    gap: 10px;
    margin: 30px 0;
}

.group-booking-members article {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
    padding: 18px;
    border: 1px solid rgb(255 255 255 / 18%);
    background: rgb(255 255 255 / 7%);
}

.group-booking-members article > div {
    display: grid;
    gap: 4px;
}

.group-booking-members article > div:last-child {
    justify-items: end;
}

.group-booking-members span,
.group-booking-members small {
    color: rgb(255 255 255 / 76%);
    font-size: 12px;
}

.group-booking-total {
    margin: 24px 0;
    padding: 16px 0;
    border-block: 1px solid rgb(255 255 255 / 18%);
    font-size: 16px;
}

.group-booking-card > .text-link {
    display: inline-block;
    margin-top: 18px;
    color: white;
}

.status-card .button {
    margin-top: 30px;
}

.error-code {
    color: var(--signal);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.booking-page .site-header,
.ticket-page .site-header,
.player-login-page .site-header,
.player-account-page .site-header,
.self-check-in-page .site-header,
.error-page .site-header,
.has-site-notices .site-header {
    position: absolute;
    color: white;
    background: var(--ink);
}

.has-site-notices .site-header + .flash,
.has-site-notices .site-header + .read-only-banner {
    margin-top: 84px;
}

.has-site-notices.has-social-bar .site-header + .flash,
.has-site-notices.has-social-bar .site-header + .read-only-banner {
    margin-top: calc(84px + var(--social-bar-height));
}

.staff-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 40px;
}

.staff-toolbar .back-link {
    display: block;
    margin-bottom: 18px;
}

.staff-toolbar h1 {
    font-size: clamp(38px, 4vw, 52px);
}

.staff-page-intro {
    max-width: 680px;
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
}

.staff-section {
    margin-top: 42px;
}

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

.staff-section-heading h2 {
    margin: 4px 0 0;
    font-family: var(--display);
    font-size: 27px;
    font-weight: 900;
    text-transform: uppercase;
}

.staff-section-heading > span:not(.status-pill) {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
}

.report-metrics article > span {
    display: block;
    color: var(--signal);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.report-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 22px;
}

.report-metrics article {
    min-height: 130px;
    padding: 22px;
    border: 1px solid var(--line);
    background: white;
}

.report-metrics article > strong {
    display: block;
    margin: 12px 0 7px;
    font-family: var(--display);
    font-size: clamp(27px, 3vw, 42px);
}

.report-metrics article > small {
    color: var(--muted);
    font-size: 9px;
}

.report-metrics .report-net {
    color: white;
    background: var(--olive);
}

.report-metrics .report-net small {
    color: rgb(255 255 255 / 60%);
}

@media (max-width: 1000px) {
    .report-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .report-metrics {
        grid-template-columns: 1fr;
    }

    .filter-bar > p {
        grid-column: 1;
    }
}

.status-pill {
    display: inline-flex;
    padding: 4px 8px;
    color: #3f4935;
    background: #e0e7d8;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.status-pending_payment {
    color: #625b3e;
    background: #eee9d1;
}

.status-cancelled {
    color: #782f25;
    background: #f0ddd8;
}

.filter-bar {
    --filter-label-height: 16px;
    --filter-control-height: 44px;
    --filter-label-gap: 8px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    margin-bottom: 16px;
    padding: 20px;
    border: 1px solid var(--line);
    background: white;
}

.filter-field {
    display: grid;
    grid-template-rows: var(--filter-label-height) var(--filter-control-height);
    gap: var(--filter-label-gap);
    min-width: 0;
    align-self: start;
}

.filter-field > span:first-child {
    display: flex;
    min-height: var(--filter-label-height);
    align-items: flex-end;
    margin: 0;
    color: #34382f;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.filter-field > input,
.filter-field > select {
    display: block;
    width: 100%;
    height: var(--filter-control-height);
    min-height: var(--filter-control-height);
    margin: 0;
    padding: 0 12px;
    border: 1px solid #918e85;
    border-radius: 0;
    color: var(--ink);
    background: #f8f7f2;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.2;
}

.filter-field > .field-error {
    grid-row: 3;
    margin-top: 0;
}

.filter-actions {
    display: flex;
    gap: 8px;
    align-items: stretch;
    align-self: start;
    padding-top: calc(var(--filter-label-height) + var(--filter-label-gap));
}

.filter-actions .button {
    height: var(--filter-control-height);
    min-height: var(--filter-control-height);
    margin: 0;
    padding: 10px 16px;
    font-size: 10px;
}

.filter-bar > p {
    grid-column: 1 / -1;
    margin: -6px 0 0;
    color: var(--muted);
    font-size: 10px;
}

.staff-section > p {
    color: var(--muted);
    line-height: 1.6;
}

.calendar-secret {
    display: grid;
    gap: 12px;
}

.account-booking-grid {
    display: grid;
    gap: 12px;
}

.calendar-secret {
    margin: 20px 0;
    padding: 20px;
    border-left: 4px solid var(--signal);
    color: white;
    background: var(--ink);
}

.calendar-secret input {
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid rgb(255 255 255 / 25%);
    color: white;
    background: rgb(255 255 255 / 8%);
}

.calendar-secret p {
    margin: 0;
    color: rgb(255 255 255 / 65%);
    font-size: 13px;
    line-height: 1.55;
}

.calendar-setup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.calendar-setup-actions .button {
    margin: 0;
}

.calendar-secret .calendar-setup-help {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
}

.calendar-secret .calendar-setup-help p {
    padding: 12px;
    border: 1px solid rgb(255 255 255 / 14%);
    background: rgb(255 255 255 / 5%);
}

.calendar-secret .calendar-setup-help strong {
    display: block;
    margin-bottom: 4px;
    color: white;
}

.calendar-secret .calendar-private-warning {
    color: rgb(255 255 255 / 78%);
}

.player-login-shell .narrow-shell,
.player-login-confirmation .narrow-shell {
    max-width: 760px;
}

.player-login-shell,
.player-login-confirmation {
    padding-top: 140px;
}

.player-login-form,
.player-login-confirmation-form {
    margin-top: 32px;
    padding: clamp(24px, 5vw, 44px);
    border: 1px solid var(--line);
    background: white;
}

.player-login-confirmation-form {
    max-width: 32.5rem;
}

.player-login-form > label:first-of-type,
.player-login-confirmation-form > label {
    display: grid;
    gap: 8px;
}

.player-login-form > label:first-of-type input,
.player-login-confirmation-form input[type="email"] {
    width: 100%;
    min-height: 52px;
    padding: 12px 14px;
    border: 1px solid var(--line);
}

.player-login-confirmation-form input[aria-invalid="true"] {
    border-color: #8d2d20;
    background: #fff0eb;
}

.player-login-confirmation-form .button {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
}

.player-login-confirmation-form > label > span {
    color: #575a52;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.player-login-confirmation-form > p:first-of-type {
    margin-top: 0;
}

.player-login-confirmation-identity {
    overflow-wrap: anywhere;
}

.player-login-confirmation-switch {
    overflow-wrap: anywhere;
}

@media (max-width: 620px) {
    .player-login-confirmation-form,
    .player-login-confirmation-form .button {
        width: 100%;
    }
}

.player-account-shell {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    padding-block: 0;
    background: var(--paper);
}

.player-account-page:not(.has-site-notices) .player-account-shell {
    padding-top: 84px;
}

.player-account-page.has-social-bar:not(.has-site-notices) .player-account-shell {
    padding-top: calc(84px + var(--social-bar-height));
}

/* The other pages that open under the public header clear it with a padding of
   their own (150px for a message or ticket, 140px for the booking and sign-in
   forms, 110px on a phone), sized for the header without the "Follow us" bar.
   The bar makes the header taller by --social-bar-height, and on a phone the
   header is fixed, so those pages lost the bar's height out of their clearance:
   a "Check-in is closed" card drew 24px under the header on an iPhone. Each
   page moves down by the bar's height instead of restating its offset. A site
   notice already clears the whole header (`.has-site-notices .site-header +
   .flash`), so the page under a notice keeps its own offset. Gunman's header is
   in flow and not `.site-header`, so none of this reaches it. */

body:not(.has-site-notices) > .site-header.has-social-bar ~ main .self-check-in-shell,
body:not(.has-site-notices) > .site-header.has-social-bar ~ main .message-section,
body:not(.has-site-notices) > .site-header.has-social-bar ~ main .ticket-section,
body:not(.has-site-notices) > .site-header.has-social-bar ~ main .ticket-page-shell,
body:not(.has-site-notices) > .site-header.has-social-bar ~ main .booking-shell,
body:not(.has-site-notices) > .site-header.has-social-bar ~ main .player-login-shell,
body:not(.has-site-notices) > .site-header.has-social-bar ~ main .player-login-confirmation {
    margin-top: var(--social-bar-height);
}

/* The event hero is held at its own height, so its column takes the bar inside
   its top padding rather than moving the hero; the header is transparent over
   it and its back link sat 2px below the bar-tall header on a laptop. */

body:not(.has-site-notices) > .site-header.has-social-bar ~ main .event-hero-content {
    padding-top: calc(120px + var(--social-bar-height));
}

.player-account-shell > .shell {
    display: flex;
    width: 100%;
    flex: 1;
    flex-direction: column;
    background: var(--paper);
}

.player-account-masthead {
    align-items: end;
    margin: 0;
    padding: clamp(24px, 4vw, 38px) clamp(20px, 4vw, 42px);
    color: white;
    background: var(--ink-2);
}

.player-account-masthead > *,
.player-account-layout > *,
.player-account-nav-group {
    min-width: 0;
}

.player-email-identity > summary > * {
    min-width: 0;
}

.player-account-masthead .section-index {
    color: var(--signal);
}

.player-account-masthead h1 {
    max-width: 100%;
    margin: 7px 0 8px;
    overflow-wrap: anywhere;
    line-height: 1;
}

.player-account-masthead .staff-page-intro {
    color: white;
}

.player-account-masthead .button-outline {
    border-color: currentColor;
    color: white;
}

.player-account-layout {
    display: grid;
    grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr);
    flex: 1;
    align-items: stretch;
    background: var(--paper);
}

.player-account-nav-desktop {
    display: block;
    padding: 26px 18px;
    border-right: 1px solid var(--line);
    background: var(--paper-2);
}

.player-account-nav-group + .player-account-nav-group {
    margin-top: 24px;
}

.player-account-nav-group h2 {
    margin: 0 10px 7px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.player-account-nav-group a {
    display: flex;
    min-height: 36px;
    align-items: center;
    padding: 8px 10px;
    border-left: 3px solid transparent;
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 750;
}

.player-account-nav-group a.is-active {
    border-left-color: var(--signal);
    color: white;
    background: var(--olive);
}

.player-account-nav-compact {
    display: none;
}

.player-account-content {
    min-width: 0;
    padding: clamp(24px, 4vw, 42px);
    overflow-wrap: anywhere;
    background: var(--paper);
}

.player-account-nav-compact > summary:focus-visible,
.player-account-content .player-email-identity > summary:focus-visible,
.player-account-content .player-profile-editor-section > summary:focus-visible {
    outline: 3px solid var(--olive);
    outline-offset: 3px;
}

.player-account-content > .staff-section {
    margin-top: 0;
}

.player-account-content .staff-section-heading {
    margin-bottom: 20px;
}

.player-account-page-heading p {
    max-width: 35rem;
    margin: 7px 0 0;
    color: var(--muted);
}

/* A status pill beside the heading never breaks inside a word. */

.player-account-page-heading > .status-pill {
    flex-shrink: 0;
    white-space: nowrap;
}

.player-account-content .player-profile-form {
    border: 0;
    background: transparent;
}

.player-account-content .player-profile-personal-card > fieldset {
    margin: 0;
    padding: 20px;
}

.player-account-content .player-profile-editor-section {
    margin-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
}

.player-account-content .player-profile-personal-card > .event-form-actions {
    margin: 0;
    padding: 14px 20px;
    background: var(--paper);
}

.player-account-content .event-form-actions,
.player-account-content .calendar-setup-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.account-booking-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.account-affiliate-dashboard,
.account-affiliate-event-grid,
.account-affiliate-rewards .affiliate-rewards {
    display: grid;
    gap: 14px;
}

.account-affiliate-dashboard {
    grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1fr);
}

.account-affiliate-code {
    display: grid;
    gap: 8px;
    padding: 22px;
    color: white;
    background: var(--ink);
}

.account-affiliate-code span {
    color: rgb(255 255 255 / 62%);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.account-affiliate-code code {
    overflow-wrap: anywhere;
    font-size: clamp(18px, 3vw, 28px);
}

.account-affiliate-share,
.account-affiliate-rewards {
    margin-top: 24px;
}

.account-affiliate-event-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.account-shortcut-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.account-shortcut-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 22px;
    border: 1px solid var(--line);
    background: white;
}

.account-shortcut-card h3,
.account-shortcut-card p {
    margin: 0;
}

.account-shortcut-card p {
    flex: 1;
    margin-top: 8px;
    color: var(--muted);
}

.account-shortcut-card .button {
    align-self: flex-start;
    margin-top: 20px;
}

.account-conduct-status {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px 28px;
    align-items: center;
    margin-bottom: 24px;
    padding: 22px 24px;
    border-left: 4px solid var(--olive);
    background: white;
}

.account-conduct-status.has-active-ban {
    border-left-color: #8f382e;
    background: #fff4f0;
}

.account-conduct-status h2,
.account-conduct-status p,
.account-conduct-status dl {
    margin: 0;
}

.account-conduct-status h2 {
    margin-top: 4px;
    font-family: var(--display);
    font-size: 26px;
    text-transform: uppercase;
}

.account-conduct-status dl {
    display: flex;
    gap: 28px;
}

.account-conduct-status dt {
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.account-conduct-status dd {
    margin: 4px 0 0;
    font-weight: 850;
}

.account-conduct-status .account-ban-value {
    display: grid;
    gap: 7px;
    justify-items: start;
}

.account-ban-expiry {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
}

.account-conduct-status p {
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: 12px;
}

.account-waiver-record {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr) auto;
    gap: 24px;
    align-items: center;
    padding: 24px;
    border-left: 4px solid var(--olive);
    background: var(--paper-2);
}

.account-waiver-record h3,
.account-waiver-record p,
.account-waiver-record dl {
    margin: 0;
}

.account-waiver-record h3 {
    font-family: var(--display);
    font-size: 24px;
    text-transform: uppercase;
}

.account-waiver-record p {
    margin-top: 7px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

.account-waiver-record dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
}

.account-waiver-record dt {
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.account-waiver-record dd {
    margin: 4px 0 0;
    font-size: 12px;
    font-weight: 800;
}

.account-waiver-actions {
    white-space: nowrap;
}

.account-booking-grid article {
    padding: 24px;
    border: 1px solid var(--line);
    background: white;
}

.account-booking-grid article.account-booking-withdrawn {
    border-color: #d0a349;
    box-shadow: inset 4px 0 0 #c88b19;
}

.account-booking-grid h3 {
    margin: 14px 0 8px;
    font-family: var(--display);
    font-size: 24px;
    text-transform: uppercase;
}

.account-booking-grid p,
.account-booking-grid small {
    color: var(--muted);
}

.account-booking-grid dl {
    margin: 20px 0;
}

/* Who a booking is for, or who booked it (core 0.9.0). */

.account-booking-for {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.account-booking-grid dl div {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
}

.booking-sign-in {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    margin: 26px 0;
    padding: 20px;
    border-left: 4px solid var(--olive);
    background: white;
}

.booking-sign-in p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.booking-sign-in.is-signed-in {
    border-left-color: var(--signal);
    background: var(--paper-2);
}

.ticket-calendar-actions {
    max-width: 1050px;
    margin-top: 24px;
    padding: 24px;
    border: 1px solid var(--line);
    background: white;
}

.ticket-wrap > .test-payment-warning {
    max-width: 1050px;
}

.ticket-calendar-actions > header {
    display: grid;
    gap: 7px;
}

.ticket-calendar-actions > header h2 {
    margin: 0;
    font-family: var(--display);
    font-size: 22px;
    text-transform: uppercase;
}

.ticket-calendar-actions > header p,
.ticket-calendar-choice p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

.ticket-calendar-actions > header p {
    margin: 0;
}

.ticket-calendar-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 22px;
}

.ticket-calendar-choice {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    padding: 18px;
    border: 1px solid var(--line);
    background: var(--paper-2);
}

.ticket-calendar-choice-subscribe {
    border-color: var(--olive);
}

.ticket-calendar-choice-label {
    color: var(--olive);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ticket-calendar-choice strong {
    margin-top: 6px;
    font-family: var(--display);
    font-size: 18px;
    text-transform: uppercase;
}

.ticket-calendar-choice p {
    flex: 1;
    margin: 8px 0 18px;
}

@media (max-width: 760px) {
    .booking-sign-in,
    .ticket-calendar-choices {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .booking-sign-in {
        display: grid;
    }

    .ticket-calendar-actions {
        padding: 20px;
    }
}

/* The booking form's add-on step. Deliberately the same shape as
   .ticket-option so that a player reads the two lists the same way. */

.add-on-options {
    display: grid;
    gap: 12px;
}

.add-on-option {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: start;
    padding: 16px;
    border: 1px solid var(--line, #d6d3c5);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.add-on-option.is-full {
    opacity: 0.6;
    cursor: not-allowed;
}

.add-on-option-copy {
    display: grid;
    gap: 4px;
}

.add-on-option-copy b {
    font-size: 16px;
}

.add-on-option-copy em {
    font-style: normal;
    font-size: 12px;
    color: #6b6754;
}

.staff-field {
    display: grid;
    gap: 9px;
    min-width: 0;
}

.staff-field-label,
.staff-field > legend {
    padding: 0;
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
}

.staff-field input:not([type="checkbox"]):not([type="radio"]),
.staff-field select,
.staff-field textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid #aaa69b;
    border-radius: 0;
    color: var(--ink);
    background: white;
    font: inherit;
    font-size: 14px;
}

.staff-field textarea {
    min-height: 180px;
    resize: vertical;
}

.staff-field input:focus-visible,
.staff-field select:focus-visible,
.staff-field textarea:focus-visible {
    border-color: var(--olive);
    outline: 3px solid rgb(85 102 58 / 18%);
    outline-offset: 1px;
}

.staff-field.has-error input,
.staff-field.has-error select,
.staff-field.has-error textarea,
.staff-field [aria-invalid="true"] {
    border-color: #a13a2b;
}

.staff-field-error {
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
}

.staff-field-error {
    color: #8f2f22;
    font-weight: 800;
}

.staff-switch {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    /* The whole label is the target: at least 44 pixels tall (core 0.9.2, D5;
       a one-line switch measured 43 at 1280). */
    min-height: 44px;
    cursor: pointer;
}

.staff-switch > input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.staff-switch-control {
    position: relative;
    width: 44px;
    height: 24px;
    margin-top: 1px;
    border: 1px solid #918e85;
    border-radius: 999px;
    background: #d8d5cc;
    transition: border-color 160ms ease, background-color 160ms ease;
}

.staff-switch-control::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 1px 3px rgb(0 0 0 / 26%);
    content: '';
    transition: transform 160ms ease;
}

.staff-switch input:checked + .staff-switch-control {
    border-color: var(--olive);
    background: var(--olive);
}

.staff-switch input:checked + .staff-switch-control::after {
    transform: translateX(20px);
}

/* --ink, not the translucent olive it was: the ring must reach 3:1 against
   the ground beside it on the staff and the public surfaces alike, and stay
   distinct from the olive track it surrounds. */

.staff-switch input:focus-visible + .staff-switch-control {
    outline: 3px solid var(--ink);
    outline-offset: 2px;
}

.staff-switch-copy {
    display: grid;
    gap: 3px;
}

.staff-switch-copy strong {
    font-size: 14px;
}

.staff-switch-copy small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.staff-empty {
    padding: 42px;
    border: 1px solid var(--line);
    color: var(--muted);
    background: white;
}

.staff-empty h3 {
    margin: 0 0 8px;
    font-family: var(--display);
    font-size: 26px;
    text-transform: uppercase;
}

.event-form {
    max-width: 980px;
}

.fieldset-note {
    margin: -10px 0 22px;
    color: var(--muted);
    font-size: 12px;
}

.event-form fieldset {
    margin-bottom: 60px;
}

.event-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}

.tools-masthead {
    background:
        linear-gradient(90deg, rgb(8 11 8 / 96%), rgb(17 23 15 / 82%)),
        var(--ink);
}

.tool-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: clamp(50px, 8vw, 120px);
    align-items: center;
}

.tool-copy h2 {
    margin: 10px 0 20px;
    font-family: var(--display);
    font-size: clamp(48px, 7vw, 82px);
    line-height: 0.9;
    text-transform: uppercase;
}

.tool-warning {
    margin-top: 28px;
    padding-left: 14px;
    border-left: 3px solid var(--signal);
    color: var(--muted);
    font-size: 12px;
}

.converter-card {
    padding: clamp(24px, 5vw, 52px);
    color: white;
    background: var(--ink);
}

.converter-card > label,
.converter-fields label {
    display: grid;
    gap: 8px;
}

.converter-card label > span:first-child {
    color: rgb(255 255 255 / 48%);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.converter-card select,
.converter-input {
    min-height: 54px;
    border: 1px solid rgb(255 255 255 / 18%);
    color: white;
    background: var(--ink-2);
}

.converter-card select {
    width: 100%;
    padding: 12px;
}

.converter-fields {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 18px;
    align-items: end;
    margin-top: 28px;
}

.converter-fields > i {
    padding-bottom: 17px;
    color: var(--signal);
    font-size: 24px;
    font-style: normal;
}

.converter-input {
    display: flex;
    align-items: center;
}

.converter-input input {
    width: 100%;
    min-width: 0;
    padding: 13px;
    border: 0;
    color: white;
    background: transparent;
    font-family: var(--display);
    font-size: 28px;
    font-weight: 800;
}

.converter-input b {
    padding-right: 13px;
    color: var(--signal);
    font-size: 11px;
}

.converter-formula {
    margin: 22px 0 0;
    color: rgb(255 255 255 / 38%);
    font-size: 10px;
}

.hero-atmosphere {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 24% 82%, rgb(164 151 116 / 18%), transparent 38%),
        radial-gradient(ellipse at 76% 18%, rgb(194 188 168 / 16%), transparent 34%);
}

.hero-atmosphere::before,
.hero-atmosphere::after {
    position: absolute;
    inset: -20%;
    content: "";
}

.hero-atmosphere::before {
    opacity: 0.5;
    background:
        radial-gradient(circle at 18% 72%, rgb(218 194 132 / 76%) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 42% 28%, rgb(218 194 132 / 60%) 0 2px, transparent 3px),
        radial-gradient(circle at 68% 62%, rgb(218 194 132 / 68%) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 83% 35%, rgb(218 194 132 / 56%) 0 2px, transparent 3px),
        radial-gradient(circle at 31% 46%, rgb(218 194 132 / 48%) 0 1px, transparent 2px),
        radial-gradient(circle at 91% 78%, rgb(218 194 132 / 52%) 0 1.5px, transparent 2.5px);
    background-size: 130px 145px, 175px 160px, 215px 190px, 255px 220px, 105px 125px, 290px 260px;
    animation: particulate-drift 17s linear infinite;
}

.hero-atmosphere::after {
    opacity: 0.3;
    filter: blur(24px);
    background:
        radial-gradient(ellipse at 32% 66%, rgb(189 181 153 / 62%), transparent 40%),
        radial-gradient(ellipse at 66% 48%, rgb(189 181 153 / 48%), transparent 38%),
        radial-gradient(ellipse at 86% 24%, rgb(189 181 153 / 38%), transparent 34%);
    animation: haze-drift 16s ease-in-out infinite alternate;
}

.hero-dust {
    position: absolute;
    inset: -22%;
    display: block;
}

.hero-dust-far {
    opacity: 0.42;
    background:
        radial-gradient(circle, rgb(225 211 171 / 68%) 0 1px, transparent 2px) 12% 18% / 82px 96px,
        radial-gradient(circle, rgb(225 211 171 / 58%) 0 1.5px, transparent 2.5px) 64% 41% / 146px 132px,
        radial-gradient(circle, rgb(225 211 171 / 46%) 0 1px, transparent 2px) 82% 78% / 188px 172px;
    animation: dust-far-drift 25s linear infinite;
}

.hero-dust-near {
    opacity: 0.58;
    filter: blur(0.35px);
    background:
        radial-gradient(circle, rgb(232 203 132 / 74%) 0 2px, transparent 3.5px) 20% 62% / 210px 240px,
        radial-gradient(circle, rgb(232 203 132 / 62%) 0 2.5px, transparent 4px) 74% 30% / 290px 260px,
        radial-gradient(circle, rgb(232 203 132 / 52%) 0 1.5px, transparent 3px) 48% 84% / 170px 205px;
    animation: dust-near-drift 13s linear infinite;
}

.hero-credit {
    position: absolute;
    right: 24px;
    bottom: 76px;
    z-index: 4;
    padding: 6px 8px;
    color: rgb(255 255 255 / 58%);
    background: rgb(8 11 8 / 58%);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero-credit:hover {
    color: white;
}

.has-js [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 700ms ease, transform 850ms cubic-bezier(.2, .7, .2, 1);
}

.has-js [data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
}

.has-js .staff-toolbar,
.has-js .message-section > .shell > * {
    animation: interface-enter 420ms cubic-bezier(.2, .7, .2, 1) both;
}

.public-ticket-options {
    display: grid;
    gap: 1px;
    margin: 22px 0 0;
    background: rgb(255 255 255 / 10%);
}

.public-ticket-options > div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    padding: 12px;
    background: #111611;
}

.public-ticket-options span,
.public-ticket-options span strong,
.public-ticket-options small {
    display: block;
}

.public-ticket-options span {
    color: rgb(255 255 255 / 76%);
    font-size: 11px;
    line-height: 1.45;
}

.public-ticket-options span strong {
    margin-bottom: 3px;
    color: white;
    font-size: 13px;
}

.public-ticket-options b {
    color: var(--signal);
    font-family: var(--display);
    font-size: 16px;
}

.public-ticket-options small {
    grid-column: 1 / -1;
    margin: 0;
    text-align: left;
    color: rgb(255 255 255 / 76%);
}

/* Places on the event page (theme API 0.5). The words carry the state
   ("4 places left", "Sold out — Sunday is full", "Full"); colour only
   repeats it. Every colour here is at least 7:1 on #111611. */

.public-ticket-options .ticket-places {
    color: rgb(255 255 255 / 82%);
    font-size: 12px;
    letter-spacing: 0.02em;
}

.public-ticket-options .ticket-places.is-low {
    color: #e2b56a;
}

.public-ticket-options .ticket-places.is-out {
    color: #e48a7a;
}

.public-ticket-options > div.is-sold-out > span,
.public-ticket-options > div.is-sold-out > b {
    opacity: 0.7;
}

.game-day-places {
    display: grid;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
}

.game-day-places li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid rgb(255 255 255 / 12%);
}

.game-day-places span {
    color: rgb(255 255 255 / 76%);
}

.game-day-places b {
    color: white;
    font-weight: 700;
}

.game-day-places b.is-low {
    color: #e2b56a;
}

.game-day-places b.is-out {
    color: #e48a7a;
}

/* The full days under a team's places ("Sunday full"), set as the sniper
   line is, so the panel's centred small text doesn't reach it. */

.team-summary > div > .team-day-places {
    margin-top: 1px;
    text-align: left;
    font-weight: 600;
}

.ticket-policy-compact {
    margin-top: 14px;
    padding: 10px;
    border: 1px solid rgb(255 255 255 / 13%);
    color: rgb(255 255 255 / 78%);
    font-size: 11px;
    line-height: 1.6;
    text-align: left;
}

.waiver-signing {
    margin-top: 28px;
}

.waiver-document-sheet {
    margin: 22px 0 0;
    overflow: hidden;
    border: 1px solid #b8b4a8;
    background: white;
    box-shadow: 0 16px 36px rgb(20 22 18 / 9%);
}

.waiver-document-heading {
    display: grid;
    gap: 5px;
    padding: clamp(22px, 4vw, 38px);
    border-bottom: 4px solid var(--signal);
    color: white;
    background: var(--ink);
}

.waiver-document-heading span,
.waiver-document-heading small {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.waiver-document-heading span {
    color: var(--signal);
}

.waiver-document-heading strong {
    max-width: 760px;
    font-family: var(--display);
    font-size: clamp(27px, 4vw, 46px);
    line-height: 0.96;
    text-transform: uppercase;
}

.waiver-document-heading small {
    color: rgb(255 255 255 / 68%);
}

.waiver-document-context {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    background: var(--line);
}

.waiver-document-context > div {
    display: grid;
    gap: 4px;
    padding: 16px clamp(20px, 4vw, 38px);
    background: #f5f3ec;
}

.waiver-document-context dt,
.waiver-document-end span,
.waiver-signature-heading > span {
    color: var(--muted);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.waiver-document-context dd {
    margin: 0;
    font-weight: 750;
}

.waiver-document-sheet .waiver-agreement-complete {
    max-height: none;
    margin: 0;
    padding: clamp(24px, 5vw, 52px);
    overflow: visible;
    border: 0;
    background: white;
    font-size: 14px;
    line-height: 1.75;
}

.waiver-document-end {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 15px clamp(20px, 4vw, 38px);
    border-top: 1px solid var(--line);
    background: #f5f3ec;
}

.waiver-document-end small {
    color: var(--muted);
}

.waiver-signature-form {
    display: grid;
    gap: 14px;
    margin: 0 0 26px;
    padding: clamp(22px, 4vw, 38px);
    border: 1px solid #b8b4a8;
    border-top: 0;
    background: #ece9df;
}

.waiver-signature-heading h3 {
    margin: 4px 0;
    font-family: var(--display);
    font-size: clamp(24px, 3.5vw, 38px);
    line-height: 1;
    text-transform: uppercase;
}

.waiver-signature-heading p {
    margin: 0;
    color: var(--muted);
}

.waiver-signature-fields {
    margin: 4px 0;
}

.waiver-pdf-panel {
    margin-top: 20px;
    overflow: hidden;
    border: 1px solid #b8b4a8;
    background: white;
}

.waiver-pdf-panel > header {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    color: white;
    background: var(--ink);
}

.waiver-pdf-panel > header > div {
    display: grid;
    gap: 3px;
}

.waiver-pdf-panel > header span {
    color: var(--signal);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.waiver-pdf-panel > header .button {
    border-color: rgb(255 255 255 / 45%);
    color: white;
}

.waiver-pdf-panel iframe {
    display: block;
    width: 100%;
    height: min(74vh, 820px);
    min-height: 560px;
    border: 0;
    background: #d4d2cc;
}

.waiver-pdf-panel > p {
    margin: 0;
    padding: 10px 18px;
    color: var(--muted);
    background: #f5f3ec;
    font-size: 11px;
}

.waiver-rescission {
    margin-top: 18px;
    border: 1px solid #c7b6ac;
    border-left: 3px solid #9d442e;
    background: #f7efeb;
}

.waiver-rescission > summary {
    padding: 14px 16px;
    cursor: pointer;
    color: #783521;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.waiver-rescission form {
    padding: 0 16px 18px;
}

.waiver-rescission p,
.ticket-information .waiver-rescission p {
    max-width: 760px;
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
}

.waiver-rescission-closed {
    padding: 12px 14px;
    border-left: 3px solid var(--line-dark);
    background: #ece9df;
    font-size: 11px;
}

.waiver-customer-flow {
    display: grid;
    gap: 1px;
    margin: 18px 0 0;
    padding: 0;
    background: var(--line);
    list-style: none;
    counter-reset: waiver-flow;
}

.waiver-customer-flow li {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 2px 10px;
    padding: 14px;
    background: white;
    counter-increment: waiver-flow;
}

.waiver-customer-flow li::before {
    grid-row: span 2;
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    content: counter(waiver-flow);
    color: white;
    background: var(--olive);
    font-size: 10px;
    font-weight: 850;
}

.waiver-customer-flow span {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
}

.waiver-agreement {
    max-height: 320px;
    margin: 18px 0;
    padding: 18px;
    overflow: auto;
    border: 1px solid var(--line);
    background: #f4f1e8;
    color: var(--ink);
    font-size: 13px;
    line-height: 1.65;
}

.legal-document {
    display: grid;
    gap: 12px;
}

.legal-document h3,
.legal-document h4,
.legal-document h5,
.legal-document p,
.legal-document ul,
.legal-document ol {
    margin: 0;
}

.legal-document h3,
.legal-document h4,
.legal-document h5 {
    color: var(--ink);
    font-family: var(--display);
    line-height: 1.18;
}

.legal-document h3 {
    margin-top: 8px;
    font-size: clamp(22px, 3vw, 34px);
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.legal-document h4 {
    margin-top: 12px;
    font-size: 18px;
}

.legal-document h5 {
    font-size: 14px;
}

.legal-document p,
.legal-document li {
    font-size: 13px;
    line-height: 1.72;
}

.legal-document ul,
.legal-document ol {
    display: grid;
    gap: 7px;
    padding-left: 24px;
}

.legal-document hr {
    width: 100%;
    margin: 10px 0;
    border: 0;
    border-top: 1px solid var(--line);
}

.waiver-signing form > .button {
    margin-top: 18px;
}

.ticket-option-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.ticket-option {
    position: relative;
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 12px;
    align-items: center;
    min-height: 126px;
    padding: 18px;
    border: 1px solid var(--line);
    cursor: pointer;
    background: #ebe8df;
}

.ticket-option:has(input:checked) {
    border-color: var(--olive);
    box-shadow: inset 0 0 0 1px var(--olive);
    background: #e2e3d8;
}

.ticket-option input {
    position: absolute;
    opacity: 0;
}

.ticket-option input:focus-visible + .radio-mark {
    outline: 3px solid var(--signal);
    outline-offset: 3px;
}

.ticket-option input:checked + .radio-mark::after {
    opacity: 1;
    transform: scale(1);
}

.ticket-option > span:last-child {
    display: grid;
    gap: 5px;
}

.ticket-option strong {
    font-family: var(--display);
    font-size: 16px;
    text-transform: uppercase;
}

.ticket-option small,
.ticket-option em {
    color: var(--muted);
    font-size: 10px;
    font-style: normal;
}

.ticket-option b {
    margin-top: 4px;
    color: var(--olive);
    font-family: var(--display);
    font-size: 24px;
}

/* Places on the booking page's admission cards. At least 5.5:1 on the
   card's #e4e1d8 sold-out ground and its #ebe8df normal one. */

.ticket-option .ticket-places {
    color: var(--olive);
    font-size: 12px;
    font-weight: 700;
}

.ticket-option .ticket-places.is-low {
    color: #7a4d00;
}

.ticket-option .ticket-places.is-out {
    color: #8e2a1c;
}

.ticket-option.is-sold-out {
    cursor: not-allowed;
    background: #e4e1d8;
}

.ticket-option.is-sold-out strong,
.ticket-option.is-sold-out b {
    opacity: 0.7;
}

/* The WhatsApp tick on the booking form, the lead's and a friend's (core
   0.9.4): the label is the target, and one line of its 12-pixel words made it
   20 pixels tall. The words keep their place; the space falls below them. */

.whatsapp-consent {
    margin-top: 18px;
    min-height: 44px;
}

/* Date of birth (core 0.9.4, views/partials/date-of-birth-field.php): Day,
   Month and Year as three short numeric fields in a row, under a legend set
   like the form's own field labels and a hint. The row fits 320 pixels. */

/* Named with the form, or .booking-form fieldset's 46-pixel margin wins. */

.booking-form .date-of-birth-field {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.event-form .date-of-birth-field,
.date-of-birth-field {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.booking-form .date-of-birth-field > legend {
    float: left;
    width: 100%;
    margin: 0 0 7px;
    padding: 0;
    border: 0;
    color: #575a52;
    font-family: inherit;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.event-form .date-of-birth-field > legend,
.date-of-birth-field > legend {
    float: left;
    width: 100%;
    margin: 0 0 7px;
    padding: 0;
    border: 0;
    color: #575a52;
    font-family: inherit;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.date-of-birth-field > legend em {
    margin-left: 6px;
    color: #96998f;
    font-style: normal;
    font-weight: 600;
}

.date-of-birth-hint {
    clear: both;
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 12px;
}

.date-of-birth-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.date-of-birth-inputs > label {
    width: 4.75rem;
    min-width: 0;
}

.date-of-birth-inputs > .date-of-birth-year {
    width: 6.5rem;
}

.date-of-birth-field.has-error input {
    border-color: #a64028;
}

.date-of-birth-field > .field-error {
    margin-top: 8px;
}

.booking-confirmations .terms-check {
    margin-top: 16px;
}

.terms-check a {
    color: var(--olive);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ticket-policy-notice {
    margin-bottom: 22px;
    padding: 18px;
    border-left: 3px solid var(--signal);
    background: #eee9d1;
}

.ticket-policy-notice strong {
    display: block;
    color: var(--ink);
    font-family: var(--display);
    font-size: 17px;
    text-transform: uppercase;
}

.ticket-policy-notice p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 11px;
}

/* Given the same weight as the ticket price, because it is the figure the
   player is actually about to be charged. It used to be an 11px footnote under
   a 32px number, which was tolerable while the two differed only on deposit
   tickets -- the small number was the smaller amount. Add-ons inverted that:
   tick a rental and the amount due today is the LARGER of the two, and it was
   the one set in footnote type. The signal colour still tells them apart. */

.summary-pay-now {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-top: 10px;
    color: var(--signal);
}

.summary-pay-now span {
    font-size: 10px;
    text-transform: uppercase;
}

.summary-pay-now strong {
    font-family: var(--display);
    font-size: 32px;
    line-height: 1.1;
}

.ticket-policy-ticket {
    margin: 16px 0 0;
    color: var(--muted);
    font-size: 10px;
}

/* The staff preview banner over the public event page and the teaser (core
   0.4.2). Its row is keyed on the bar's own child, not on core's `.shell`, so a
   theme's own shell class (Gunman's `.gm-shell`) is laid out too: keyed on
   `.shell`, Gunman's bar ran "Teaser previewThis is…Return to editor" together.
   Every colour is a literal rather than a token, because the bar is staff
   furniture on a themed page: in `var(--signal)` the link was 2.64:1 on this
   brown with core's tokens and lower under any theme or installation that
   revalues it. White on the brown is 7.35:1, and the label tag and the hovered
   link are the same pair the other way round. The ring is white too, at the
   same 7.35:1, where core's and Gunman's global rings would be under 3:1. */

.preview-banner {
    color: #ffffff;
    background: #7c4a21;
}

.preview-banner > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
    padding-block: 10px;
    font-size: 15px;
    line-height: 1.4;
}

.preview-banner strong {
    padding: 3px 8px;
    color: #7c4a21;
    background: #ffffff;
    font-family: var(--display);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
}

.preview-banner span {
    flex: 1 1 18rem;
    min-width: 0;
}

.preview-banner a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    padding: 0 14px;
    border: 2px solid #ffffff;
    color: #ffffff;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.preview-banner a:hover {
    color: #7c4a21;
    background: #ffffff;
}

.preview-banner a:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}

[data-condition-target].is-condition-disabled {
    opacity: 0.58;
}

[data-condition-target].is-condition-disabled input,
[data-condition-target].is-condition-disabled select,
[data-condition-target].is-condition-disabled textarea {
    cursor: not-allowed;
}

.pagination {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: flex-end;
    margin-top: 22px;
    font-size: 10px;
    text-transform: uppercase;
}

.pagination a,
.pagination span {
    padding: 9px 11px;
    border: 1px solid currentColor;
}

.pagination span {
    opacity: 0.35;
}

.events-section .pagination {
    color: var(--paper);
}

/* Public event catalogue */

.event-catalogue {
    background: var(--paper);
}

.event-filter-errors {
    margin-bottom: 22px;
    padding: 20px 22px;
    border-left: 4px solid #a64028;
    color: #6f2117;
    background: #eddbd3;
}

.event-filter-errors h2 {
    margin: 0;
    font-family: var(--display);
    font-size: 22px;
    text-transform: uppercase;
}

.event-filter-errors ul {
    display: grid;
    gap: 5px;
    margin: 10px 0 0;
    padding-left: 20px;
}

.event-filter-errors a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.event-filter-errors a:focus-visible {
    outline: 3px solid var(--ink);
}

.event-filter-bar {
    min-width: 0;
    padding: clamp(22px, 4vw, 36px);
    color: var(--paper);
    background: var(--ink-2);
}

.event-filter-bar > h2 {
    margin: 0 0 18px;
    font-family: var(--display);
    font-size: clamp(26px, 4vw, 38px);
    text-transform: uppercase;
}

.quick-filter-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    margin-bottom: 24px;
}

.quick-filter {
    display: inline-flex;
    min-height: 52px;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid rgb(216 209 191 / 32%);
    color: var(--paper);
    background: rgb(255 255 255 / 5%);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.08em;
    line-height: 1.25;
    text-transform: uppercase;
}

.quick-filter:hover {
    border-color: var(--signal);
    background: rgb(255 255 255 / 10%);
}

.quick-filter[aria-current="true"] {
    border-color: var(--signal);
    box-shadow: inset 0 -4px 0 var(--signal);
    background: var(--olive);
}

.quick-filter[aria-current="true"]::after {
    content: "Current";
    font-size: 8px;
    letter-spacing: 0.06em;
}

.event-filter-fields,
.event-filter-custom form {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    grid-template-rows: auto minmax(52px, auto) auto auto;
    gap: 7px 14px;
    align-items: start;
}

.event-filter-fields > label,
.event-filter-custom label {
    color: rgb(216 209 191 / 72%);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.event-filter-fields select,
.event-filter-custom input {
    width: 100%;
    min-width: 0;
    min-height: 52px;
    padding: 11px 13px;
    border: 1px solid rgb(216 209 191 / 42%);
    border-radius: 0;
    color: var(--ink);
    background: var(--paper);
}

.event-filter-fields [aria-invalid="true"],
.event-filter-custom [aria-invalid="true"] {
    border: 2px solid #a64028;
    background: #fff0eb;
    box-shadow: inset 4px 0 0 #a64028;
}

.event-filter-fields label[for="event-filter-ao"],
.event-filter-fields #event-filter-ao,
.event-filter-fields #event-filter-ao-error,
.event-filter-custom label[for="event-filter-from"],
.event-filter-custom #event-filter-from,
.event-filter-custom #event-filter-from-error {
    grid-column: 1;
}

.event-filter-fields label[for="event-filter-type"],
.event-filter-fields #event-filter-type,
.event-filter-fields #event-filter-type-error,
.event-filter-custom label[for="event-filter-to"],
.event-filter-custom #event-filter-to,
.event-filter-custom #event-filter-to-error {
    grid-column: 2;
}

.event-filter-fields label,
.event-filter-custom label {
    grid-row: 1;
}

.event-filter-fields select,
.event-filter-custom input,
.event-filter-fields .button,
.event-filter-custom .button {
    grid-row: 2;
}

.event-filter-fields .field-error,
.event-filter-custom .field-error {
    grid-row: 3;
    margin: 0;
    color: #ffb8aa;
    font-weight: 800;
}

.event-filter-fields .button,
.event-filter-custom .button {
    grid-column: 3;
    white-space: nowrap;
}

.event-filter-custom #event-filter-date-error {
    grid-column: 1 / -1;
    grid-row: 4;
}

.event-filter-custom {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid rgb(216 209 191 / 22%);
}

.event-filter-custom > summary {
    min-height: 52px;
    padding: 13px 4px;
    color: var(--paper);
    cursor: pointer;
    font-family: var(--display);
    font-size: 16px;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.event-filter-custom > summary:focus-visible {
    outline: 3px solid var(--signal);
    outline-offset: 3px;
}

.event-filter-custom form {
    margin-top: 14px;
}

.event-filter-bar > .field-error {
    display: block;
    margin: -12px 0 20px;
    color: #ffb8aa;
    font-weight: 800;
}

.event-filter-bar > .text-link {
    display: flex;
    width: fit-content;
    min-height: 52px;
    justify-content: flex-end;
    margin: 16px 0 -10px;
    margin-left: auto;
    color: var(--paper);
}

.event-result-summary {
    display: flex;
    min-width: 0;
    gap: 10px 28px;
    align-items: baseline;
    justify-content: space-between;
    margin: 28px 0 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.event-result-summary strong {
    font-family: var(--display);
    font-size: 26px;
    text-transform: uppercase;
}

.event-result-summary span {
    min-width: 0;
    max-width: 100%;
    color: var(--muted);
    overflow-wrap: anywhere;
    text-align: right;
}

.event-catalogue .staff-empty {
    display: grid;
    gap: 18px;
    justify-items: start;
}

.event-catalogue .staff-empty p {
    margin: 0;
}

.event-catalogue .pagination a,
.event-catalogue .pagination span {
    display: inline-flex;
    min-width: 52px;
    min-height: 52px;
    align-items: center;
    justify-content: center;
}

.event-catalogue .pagination a:focus-visible {
    outline: 3px solid var(--ink);
}

.event-catalogue .staff-empty .button:focus-visible {
    outline: 3px solid var(--ink);
}

@media (max-width: 760px) {
    .event-filter-fields,
    .event-filter-custom form {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        gap: 7px;
    }

    .event-filter-fields label[for="event-filter-ao"] { grid-column: 1; grid-row: 1; }
    .event-filter-fields #event-filter-ao { grid-column: 1; grid-row: 2; }
    .event-filter-fields #event-filter-ao-error { grid-column: 1; grid-row: 3; }
    .event-filter-fields label[for="event-filter-type"] { grid-column: 1; grid-row: 4; margin-top: 8px; }
    .event-filter-fields #event-filter-type { grid-column: 1; grid-row: 5; }
    .event-filter-fields #event-filter-type-error { grid-column: 1; grid-row: 6; }
    .event-filter-fields .button { grid-column: 1; grid-row: 7; width: 100%; margin-top: 9px; }

    .event-filter-custom label[for="event-filter-from"] { grid-column: 1; grid-row: 1; }
    .event-filter-custom #event-filter-from { grid-column: 1; grid-row: 2; }
    .event-filter-custom #event-filter-from-error { grid-column: 1; grid-row: 3; }
    .event-filter-custom label[for="event-filter-to"] { grid-column: 1; grid-row: 4; margin-top: 8px; }
    .event-filter-custom #event-filter-to { grid-column: 1; grid-row: 5; }
    .event-filter-custom #event-filter-to-error { grid-column: 1; grid-row: 6; }
    .event-filter-custom #event-filter-date-error { grid-column: 1; grid-row: 7; }
    .event-filter-custom .button { grid-column: 1; grid-row: 8; width: 100%; margin-top: 9px; }

    .event-filter-bar > .text-link {
        justify-content: flex-start;
        margin-left: 0;
    }

    .event-result-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .event-result-summary span {
        text-align: left;
    }
}

@media (max-width: 1000px) {
    .hero-brief {
        display: none;
    }

    .event-grid {
        grid-template-columns: 1fr 1fr;
    }

    .standard-grid {
        grid-template-columns: 1fr 1fr;
    }

    .standard-grid article:nth-child(2) {
        border-right: 0;
    }

    .standard-grid article:nth-child(-n+2) {
        border-bottom: 1px solid rgb(255 255 255 / 16%);
    }

    .event-detail-grid,
    .booking-layout {
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 45px;
    }

    .footer-grid {
        grid-template-columns: minmax(0, 2fr) minmax(180px, 0.7fr);
        gap: 40px;
    }

    .footer-link-groups {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-intro {
        grid-column: 1 / -1;
    }

    .partner-grid,
    .terrain-grid {
        grid-template-columns: 1fr 1fr;
    }

    .partner-grid article:last-child,
    .terrain-grid article:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 820px) {
    .site-header,
    .site-header.is-scrolled {
        height: 68px;
    }

    .site-header.has-social-bar {
        position: fixed;
        display: flex;
        height: calc(68px + var(--social-bar-height));
        flex-direction: column;
        background: var(--ink);
    }

    .site-header.has-social-bar .site-social-bar { flex: 0 0 var(--social-bar-height); }

    .site-header.has-social-bar .header-inner { height: 68px; flex: 0 0 68px; }

    .site-header.has-social-bar.is-scrolled,
    .site-header.has-social-bar.is-scrolled .header-inner { height: 68px; }

    .site-header.has-social-bar.is-scrolled .site-social-bar { display: none; }

    .has-site-notices .site-header + .flash,
    .has-site-notices .site-header + .read-only-banner {
        margin-top: 68px;
    }

    .has-site-notices.has-social-bar .site-header + .flash,
    .has-site-notices.has-social-bar .site-header + .read-only-banner {
        margin-top: calc(68px + var(--social-bar-height));
    }

    .player-account-page:not(.has-site-notices) .player-account-shell {
        padding-top: 68px;
    }

    .player-account-page.has-social-bar:not(.has-site-notices) .player-account-shell {
        padding-top: calc(68px + var(--social-bar-height));
    }

    .account-conduct-status {
        grid-template-columns: 1fr;
    }

    .account-conduct-status dl,
    .account-conduct-status p {
        grid-column: 1;
    }

    .account-conduct-status dl {
        flex-wrap: wrap;
    }

    .account-waiver-record {
        grid-template-columns: 1fr;
    }

    .account-waiver-actions {
        white-space: normal;
    }

    .account-waiver-actions .button {
        width: 100%;
    }

    .nav-toggle {
        display: block;
    }

    .site-nav {
        position: absolute;
        top: 68px;
        right: 0;
        bottom: auto;
        left: 0;
        display: flex;
        height: calc(100dvh - 68px);
        align-items: flex-start;
        padding: 48px 28px;
        flex-direction: column;
        gap: 26px;
        visibility: hidden;
        background: var(--ink);
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
    }

    .site-header.has-social-bar .site-nav {
        top: calc(68px + var(--social-bar-height));
        height: calc(100dvh - 68px - var(--social-bar-height));
    }

    .site-header.has-social-bar.is-scrolled .site-nav {
        top: 68px;
        height: calc(100dvh - 68px);
    }

    .site-nav.is-open {
        visibility: visible;
        opacity: 1;
        transform: none;
    }

    .site-nav a {
        font-size: 17px;
    }

    .nav-toggle[aria-expanded="true"] > span:first-child {
        transform: translateY(3.5px) rotate(45deg);
    }

    .nav-toggle[aria-expanded="true"] > span:nth-child(2) {
        transform: translateY(-3.5px) rotate(-45deg);
    }

    .hero {
        height: auto;
        min-height: 750px;
    }

    .hero-media {
        background-position: 63% center;
    }

    .hero-overlay {
        background:
            linear-gradient(90deg, rgb(8 10 8 / 92%) 0%, rgb(8 10 8 / 48%) 78%),
            linear-gradient(0deg, rgb(8 10 8 / 76%) 0%, transparent 55%);
    }

    .hero-inner {
        height: auto;
        min-height: 680px;
        align-items: flex-end;
        padding-bottom: 72px;
    }

    .hero h1 {
        font-size: clamp(58px, 14vw, 94px);
    }

    .hero-rail {
        display: none;
    }

    .hero-credit {
        right: 12px;
        bottom: 12px;
    }

    .manifesto-grid,
    .first-event-grid {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .manifesto-principles {
        grid-template-columns: 1fr;
    }

    .manifesto-principles article {
        min-height: 0;
    }

    .manifesto-statement {
        align-items: flex-start;
        flex-direction: column;
    }

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

    .events-section-action {
        width: 100%;
    }

    .event-detail-grid,
    .booking-layout,
    .retrieval-layout {
        grid-template-columns: 1fr;
    }

    .booking-panel,
    .booking-summary {
        position: static;
    }

    /* Stacked above the form and scrolling with the page, which is what it has
       always done here. `max-height: none` is the other half of the `position:
       static` above: with nothing sticking there is no scrollport to fit into,
       and a card that scrolled internally on a phone would hide the figures it
       exists to show. */

    .booking-summary {
        grid-row: 1;
        max-height: none;
    }

    .booking-main {
        grid-row: 2;
    }

    .facts-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .facts-grid > div:first-child {
        border-left: 0;
    }

    .facts-grid > div:nth-child(n+3) {
        border-top: 1px solid rgb(255 255 255 / 10%);
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-intro {
        grid-column: 1 / -1;
    }

    .ticket {
        grid-template-columns: 1fr;
    }

    .ticket-stub {
        min-height: 220px;
        border-top: 1px dashed rgb(255 255 255 / 28%);
        border-left: 0;
    }

    .ticket-stub::before,
    .ticket-stub::after {
        top: -13px;
        bottom: auto;
    }

    .ticket-stub::before {
        left: -13px;
    }

    .ticket-stub::after {
        right: -13px;
        left: auto;
    }

    .staff-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .content-intro-grid,
    .location-grid,
    .facilities-grid,
    .story-grid,
    .rules-layout {
        grid-template-columns: 1fr;
    }

    .rules-index {
        position: static;
    }

    .tool-grid,
    .location-card-grid,
    .weapon-limit-grid,
    .team-command-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .section {
        padding-block: 78px;
    }

    .brand-logo {
        width: 170px;
    }

    /* The header gives the brand around 210px here once the navigation has
       taken its share, and a wordmark cannot be scaled down the way an image
       is. Set it in type instead, so a normal public name fits rather than
       arriving ellipsised on every phone. */

    .brand-logo-wordmark {
        font-size: 16px;
        letter-spacing: 0.04em;
    }

    .hero {
        min-height: 690px;
    }

    .hero-inner {
        min-height: 690px;
        padding-bottom: 44px;
    }

    .hero h1 {
        font-size: 58px;
        line-height: 0.84;
    }

    .hero-copy > p {
        font-size: 15px;
    }

    .hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .event-grid,
    .standard-grid {
        grid-template-columns: 1fr;
    }

    .standard-grid article {
        min-height: auto;
        border-right: 0;
        border-bottom: 1px solid rgb(255 255 255 / 16%);
    }

    .standard-grid article:last-child {
        border-bottom: 0;
    }

    .standard-grid h3 {
        margin-top: 46px;
    }

    .final-cta-inner {
        min-height: 330px;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-intro {
        grid-column: auto;
    }

    .footer-link-groups {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-base {
        flex-direction: column;
        gap: 9px;
    }

    .event-hero {
        min-height: 600px;
    }

    .event-hero-content {
        padding-bottom: 42px;
    }

    .event-hero h1 {
        font-size: 54px;
    }

    .event-hero-content > div > p {
        font-size: 14px;
    }

    .facts-grid {
        grid-template-columns: 1fr 1fr;
    }

    .facts-grid > div {
        padding: 18px 12px;
    }

    .booking-shell,
    .player-login-shell,
    .player-login-confirmation {
        padding-top: 110px;
    }

    /* `.section` above shares `.message-section`'s specificity and comes
       later, so it was taking a message or ticket page to 78px: 10px below
       the 68px header. Give them the forms' phone offset back. */

    .site-header ~ main .message-section,
    .site-header ~ main .ticket-section {
        padding-top: 110px;
    }

    .team-options,
    .ticket-option-grid,
    .partner-grid,
    .terrain-grid,
    .prose-columns,
    .camo-grid {
        grid-template-columns: 1fr;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .partner-grid article:last-child,
    .terrain-grid article:last-child {
        grid-column: auto;
    }

    .page-masthead,
    .page-masthead-inner {
        min-height: 560px;
    }

    .page-masthead h1 {
        font-size: 54px;
    }

    .page-masthead-inner > p {
        font-size: 15px;
    }

    .content-cta-inner {
        min-height: 340px;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
    }

    .team-event-cta .content-cta-inner {
        min-height: 190px;
    }

    .facilities-grid li {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .ticket-main {
        padding: 30px 24px;
    }

    .ticket-waiver-status {
        align-items: flex-start;
        flex-direction: column;
    }

    .ticket-waiver-status span {
        text-align: left;
    }

    .ticket-details {
        grid-template-columns: 1fr 1fr;
    }

    .ticket-actions,
    .ticket-wallet-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .ticket-next-steps ol {
        grid-template-columns: 1fr;
    }

    .ticket-withdrawal {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .withdrawal-status-card dl {
        grid-template-columns: 1fr;
    }

    .pagination {
        justify-content: space-between;
    }

    .converter-fields {
        grid-template-columns: 1fr;
    }

    .converter-fields > i {
        justify-self: center;
        padding: 0;
        transform: rotate(90deg);
    }
}

.field-requirements {
    display: block;
    margin-top: 7px;
    color: var(--muted);
    font-size: 0.75rem;
}

.military-term {
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-color: rgba(184, 169, 126, 0.72);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    text-transform: inherit;
    cursor: help;
}

.military-term:focus-visible {
    border-radius: 2px;
    outline: 2px solid var(--khaki);
    outline-offset: 3px;
}

.military-term-tooltip {
    position: fixed;
    z-index: 120;
    width: max-content;
    max-width: min(320px, calc(100vw - 24px));
    padding: 10px 12px;
    border: 1px solid rgba(184, 169, 126, 0.5);
    background: #0d120e;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.38);
    color: #eef0e8;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.45;
    opacity: 0;
    pointer-events: none;
    transform: translateY(3px);
    transition: opacity 140ms ease, transform 140ms ease;
}

.player-balance-payment {
    margin: 34px 0;
    padding: 26px;
    border: 1px solid rgb(255 255 255 / 16%);
    background: rgb(255 255 255 / 5%);
}

.player-balance-payment h2 {
    margin: 8px 0 10px;
    font-family: var(--display);
    font-size: clamp(28px, 4vw, 40px);
    text-transform: uppercase;
}

.player-balance-payment > p {
    max-width: 590px;
    margin: 0;
    color: rgb(255 255 255 / 62%);
    font-size: 12px;
    line-height: 1.65;
}

.player-balance-action-form,
.player-balance-code-form {
    margin-top: 20px;
}

.player-balance-code-form.form-grid {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 12px;
}

.player-balance-code-form label > span {
    color: rgb(255 255 255 / 66%);
}

.player-balance-code-form input {
    font-size: 18px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.16em;
}

.player-balance-code-form .button {
    min-height: 48px;
}

.player-balance-resend-form {
    margin-top: 14px;
}

.player-balance-resend-form .text-link {
    padding: 0;
    border: 0;
    color: rgb(255 255 255 / 70%);
    cursor: pointer;
    background: transparent;
}

@media (max-width: 620px) {
    .player-balance-code-form.form-grid {
        grid-template-columns: 1fr;
    }

    .player-balance-code-form .button {
        width: 100%;
    }
}

.payment-methods {
    display: grid;
    gap: 16px;
    margin: 22px 0;
}

.payment-success-notice {
    border-color: #68815b;
    background: #e6eee1;
}

.currency-input {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    border: 1px solid var(--line);
    background: var(--paper-2);
}

.currency-input b {
    padding-left: 12px;
}

.currency-input input {
    border: 0;
}

.gift-card-public-tools {
    display: grid;
    gap: 22px;
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid rgb(255 255 255 / 14%);
}

/* The gift-card page borrows the card and has never stuck it, so it has no
   scrollport to be bounded by: `max-height: none` keeps its body one column of
   prose that grows, rather than a region that scrolls for no reason. */

.gift-card-summary {
    position: static;
    max-height: none;
    overflow: visible;
}

.gift-card-public-tools h3 {
    margin: 0;
    color: white;
    font-family: var(--display);
    font-size: 19px;
    text-transform: uppercase;
}

.gift-card-public-tools p {
    margin: 0;
    color: rgb(255 255 255 / 58%);
    font-size: 13px;
}

.gift-card-public-tools .button {
    width: 100%;
}

.gift-card-public-tools form,
.gift-card-public-tools label {
    display: grid;
    gap: 9px;
}

.gift-card-public-tools label > span {
    color: var(--signal);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.gift-card-public-tools input {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid rgb(255 255 255 / 24%);
    color: white;
    background: rgb(255 255 255 / 7%);
}

.gift-card-order-card {
    max-width: 980px;
}

.gift-card-order-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 24px 0;
}

.gift-card-order-actions .button {
    margin: 0;
}

.gift-card-printable {
    display: grid;
    gap: 14px;
    margin-top: 36px;
    padding: clamp(28px, 6vw, 58px);
    border: 1px solid #b7b19e;
    color: var(--ink);
    background: #eeeade;
    text-align: center;
}

.gift-card-printable h2 {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(52px, 8vw, 88px);
    text-transform: uppercase;
}

.gift-card-printable p,
.gift-card-printable blockquote,
.gift-card-printable small {
    margin: 0;
    color: #4e5349;
}

.gift-card-printable blockquote {
    font-style: italic;
}

.gift-card-printable > strong {
    display: block;
    padding: 14px;
    border: 1px dashed #777463;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: clamp(16px, 3vw, 25px);
    letter-spacing: 0.06em;
}

.gift-card-order-management {
    display: grid;
    gap: 24px;
    margin-top: 30px;
    padding: clamp(24px, 4vw, 38px);
    color: var(--ink);
    background: white;
}

.gift-card-order-management h2 {
    margin: 5px 0 8px;
    font-family: var(--display);
    font-size: 34px;
    text-transform: uppercase;
}

.gift-card-order-management p {
    margin: 0;
    color: var(--muted);
}

.gift-card-order-management .booking-form {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
}

.gift-card-balance-layout .local-payment-card {
    width: 100%;
}

/* Legal pages */

.legal-masthead {
    min-height: 520px;
}

.legal-masthead .page-masthead-inner {
    min-height: 520px;
}

.legal-masthead .page-masthead-media {
    background-position: center 55%;
}

.privacy-masthead .page-masthead-media {
    background-position: center 38%;
}

.legal-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: clamp(60px, 9vw, 130px);
    align-items: start;
}

.legal-index {
    position: sticky;
    top: 105px;
    display: flex;
    flex-direction: column;
}

.legal-index .section-index {
    margin-bottom: 22px;
}

.legal-index a {
    padding: 10px 0;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.legal-index a:last-child {
    border-bottom: 1px solid var(--line);
}

.legal-index a:hover {
    color: var(--signal-dark);
}

.legal-content {
    display: grid;
    gap: 60px;
}

.legal-introduction,
.legal-content > section {
    scroll-margin-top: 100px;
    padding-bottom: 50px;
    border-bottom: 1px solid var(--line);
}

.legal-introduction > span,
.legal-content > section > span {
    color: var(--signal-dark);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.legal-introduction > p {
    max-width: 760px;
    margin: 16px 0 20px;
    color: var(--ink);
    font-family: var(--display);
    font-size: clamp(25px, 3.2vw, 40px);
    font-weight: 850;
    letter-spacing: -0.025em;
    line-height: 1.15;
    text-transform: uppercase;
}

.legal-print {
    padding: 0;
    border: 0;
    cursor: pointer;
    background: transparent;
}

.legal-content h2 {
    margin: 8px 0 24px;
    font-family: var(--display);
    font-size: clamp(34px, 4.3vw, 54px);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    text-transform: uppercase;
}

.legal-content p,
.legal-content li,
.legal-contact-card dd {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.75;
}

.legal-content p {
    margin: 0 0 18px;
}

.legal-content p:last-child {
    margin-bottom: 0;
}

.legal-content ul {
    display: grid;
    gap: 13px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.legal-content li {
    position: relative;
    padding-left: 24px;
}

.legal-content li::before {
    position: absolute;
    top: 10px;
    left: 0;
    width: 6px;
    height: 6px;
    background: var(--olive);
    content: "";
}

.legal-content a {
    color: var(--signal-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ukara-sign-in {
    margin: 0;
}

.legal-content > .ukara-readiness {
    padding: clamp(24px, 4vw, 38px);
    border: 1px solid var(--line);
    border-left: 4px solid #a64028;
    background: white;
}

.legal-content > .ukara-readiness.is-ready {
    border-left-color: var(--olive);
}

.ukara-readiness-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 24px;
}

.ukara-readiness-heading > div > span {
    color: var(--signal-dark);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ukara-readiness-heading h2 {
    margin: 8px 0 18px;
    font-size: clamp(30px, 4vw, 46px);
}

.ukara-progress {
    display: grid;
    gap: 20px;
    margin-top: 28px;
}

.ukara-progress-row > span {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 8px;
    color: var(--ink);
    font-size: 11px;
}

.ukara-progress-row b {
    white-space: nowrap;
}

.ukara-progress-row progress {
    display: block;
    width: 100%;
    height: 10px;
    border: 0;
    border-radius: 0;
    appearance: none;
    background: #dfdcd2;
}

.ukara-progress-row progress::-webkit-progress-bar {
    background: #dfdcd2;
}

.ukara-progress-row progress::-webkit-progress-value {
    background: var(--signal);
}

.ukara-progress-row progress::-moz-progress-bar {
    background: var(--signal);
}

.ukara-readiness.is-ready progress::-webkit-progress-value {
    background: var(--olive);
}

.ukara-readiness.is-ready progress::-moz-progress-bar {
    background: var(--olive);
}

.ukara-qualifying-events {
    margin-top: 34px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
}

.ukara-qualifying-events h3 {
    margin: 0 0 18px;
    font-family: var(--display);
    font-size: 22px;
    text-transform: uppercase;
}

.ukara-event-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
}

.ukara-event-grid article {
    padding: 20px;
    background: var(--paper-2);
}

.ukara-event-grid article > span {
    color: var(--signal-dark);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ukara-event-grid h4 {
    margin: 12px 0 8px;
    font-family: var(--display);
    font-size: 18px;
    line-height: 1.1;
    text-transform: uppercase;
}

.ukara-event-grid h4 a,
.ukara-event-grid .text-link {
    color: var(--ink);
    text-decoration: none;
}

.ukara-event-grid article p {
    margin-bottom: 18px;
    font-size: 11px;
}

@media (max-width: 760px) {
    .ukara-readiness-heading {
        display: grid;
    }

    .ukara-readiness-heading .status-pill {
        justify-self: start;
    }

    .ukara-event-grid {
        grid-template-columns: 1fr;
    }
}

.legal-contact-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 28px 0 0;
    background: var(--line);
}

.legal-contact-card > div {
    padding: 20px;
    background: var(--paper-2);
}

.legal-contact-card dt {
    margin-bottom: 7px;
    color: var(--signal-dark);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.legal-contact-card dd {
    margin: 0;
}

.legal-purpose-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 26px;
}

.legal-purpose-grid article {
    padding: 22px;
    border: 1px solid var(--line);
    background: var(--paper-2);
}

.legal-purpose-grid strong,
.legal-admin-warning strong,
.legal-right-to-object strong {
    display: block;
    margin-bottom: 7px;
    color: var(--ink);
    font-family: var(--display);
    font-size: 17px;
    text-transform: uppercase;
}

.legal-purpose-grid p {
    margin: 0;
    font-size: 12px;
}

.legal-admin-warning,
.legal-right-to-object {
    margin-top: 24px;
    padding: 18px;
    border-left: 3px solid var(--signal);
    background: #eee9d1;
}

.legal-admin-warning p,
.legal-right-to-object p {
    margin: 0;
    font-size: 12px;
}

.legal-settings-warning {
    margin-bottom: 24px;
}

.self-check-in-kiosk-page {
    min-height: 100vh;
    color: white;
    background:
        radial-gradient(circle at 50% 42%, rgb(54 74 50 / 42%), transparent 42%),
        var(--ink);
}

.self-check-in-kiosk-page .site-header,
.self-check-in-kiosk-page .staff-nav,
.self-check-in-kiosk-page .staff-alert-stack,
.self-check-in-kiosk-page .site-footer {
    display: none;
}

.self-check-in-kiosk-page main {
    min-height: 100vh;
}

.self-check-in-kiosk {
    display: grid;
    min-height: 100vh;
    place-items: center;
    align-content: center;
    padding: clamp(24px, 4vh, 54px) clamp(20px, 4vw, 54px);
    text-align: center;
}

.self-check-in-kiosk-brand {
    width: min(280px, 55vw);
    margin-bottom: 14px;
}

.self-check-in-kiosk-brand .brand-logo {
    width: 100%;
}

/* The wordmark branch, which the rule above does not reach: `.brand-logo` is
   the `<picture>` an installation gets when it uploads a logo, and an
   installation on the default renders `.brand-wordmark` instead. That is
   `width: max-content` with no inline margins, which is right in a header
   where it sits at the start of a row -- and wrong here, where it sits inside
   a 280px box the grid has centred. The box was centred and the text inside it
   was not, so the operator's name sat left of the heading, the code and the
   footer it was supposed to head. */

.self-check-in-kiosk-brand .brand-wordmark {
    margin-inline: auto;
}

.self-check-in-kiosk h1 {
    margin: 10px 0 6px;
    color: white;
    font-family: var(--display);
    font-size: clamp(42px, 6vh, 76px);
    letter-spacing: -0.04em;
    line-height: 0.95;
    text-transform: uppercase;
}

.self-check-in-kiosk > p {
    max-width: 680px;
    margin: 0 0 18px;
    color: rgb(255 255 255 / 78%);
    font-size: clamp(13px, 1.8vh, 17px);
}

.self-check-in-kiosk-qr-frame {
    width: min(46vh, 520px, calc(100vw - 48px));
    padding: clamp(10px, 1.5vh, 18px);
    border: 1px solid rgb(255 255 255 / 22%);
    background: white;
    box-shadow: 0 24px 60px rgb(0 0 0 / 38%);
    transition: opacity 180ms ease, transform 180ms ease;
}

.self-check-in-kiosk-qr-frame.is-rotating {
    opacity: 0.5;
    transform: scale(0.985);
}

.self-check-in-kiosk-qr-frame img {
    width: 100%;
    height: auto;
}

.self-check-in-kiosk-rotation {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 12px;
    color: rgb(255 255 255 / 62%);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.self-check-in-kiosk-rotation strong {
    color: var(--signal);
    font-family: var(--display);
    font-size: 22px;
}

.self-check-in-kiosk-help {
    display: grid;
    gap: 2px;
    margin-top: 10px;
}

.self-check-in-kiosk-help strong {
    font-family: var(--display);
    font-size: 18px;
    text-transform: uppercase;
}

.self-check-in-kiosk-help span {
    color: rgb(255 255 255 / 68%);
    font-size: 11px;
}

.self-check-in-kiosk-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.self-check-in-kiosk-actions .button {
    min-height: 44px;
    padding: 10px 18px;
}

.self-check-in-kiosk-actions .button-outline {
    color: white;
    border-color: rgb(255 255 255 / 24%);
}

.self-check-in-shell {
    --self-check-in-secondary: #41483d;
    --self-check-in-surface: #eee7d6;
    --self-check-in-surface-strong: #f6f0e2;
    min-height: 100vh;
    padding-top: clamp(140px, 15vw, 190px);
    background:
        linear-gradient(135deg, rgb(54 74 50 / 9%), transparent 42%),
        var(--paper);
}

/* Self check-in is the one public page that reads in a narrower column than
   `--shell`, because it is a single journey on a phone at a gate rather than a
   page to browse. The header above it is the ordinary site header and was still
   drawing at the full shell, so the installation's name sat 170px to the left of
   everything it heads on any screen wide enough for the cap to bind -- which is
   what a tablet at a check-in desk is. One number, read by the column and by the
   header, is what stops the two drifting apart again. */

.self-check-in-page {
    --self-check-in-column: 900px;
}

.self-check-in-wrap {
    max-width: var(--self-check-in-column, 900px);
}

/* The name moves to the column's left edge; the navigation keeps the shell's
   right edge. Capping the whole lockup at the column instead would be tidier on
   paper and is wrong in practice -- seven navigation items do not fit in 900px at
   a desktop width, and forcing them wraps "Game sites" and "Player sign in" onto
   second lines. The complaint was that the name sat adrift of everything it
   introduced, and the indent is the whole of that.

   The bounds on the name are untouched and still do the work they were added for:
   `.brand-wordmark` caps an unbounded customer-supplied name at `min(340px, 42vw)`
   and `.brand-logo-wordmark` clips it with an ellipsis, so a long name eats into
   its own box rather than into the navigation. `max()` keeps the indent at zero
   on the narrow screens where the shell is already the column. */

.self-check-in-page .header-inner {
    padding-inline-start:
        max(0px, calc((var(--shell) - var(--self-check-in-column, 900px)) / 2));
}

.self-check-in-heading {
    margin-bottom: 34px;
}

.self-check-in-heading h1 {
    max-width: 820px;
    margin: 10px 0 14px;
    font-family: var(--display);
    font-size: clamp(42px, 7vw, 72px);
    letter-spacing: -0.04em;
    line-height: 0.95;
    text-transform: uppercase;
}

.self-check-in-heading p {
    max-width: 680px;
    margin: 0;
    color: var(--self-check-in-secondary);
    font-size: 14px;
    line-height: 1.65;
}

.self-check-in-progress {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin: 0 0 20px;
    padding: 1px;
    list-style: none;
    background: var(--line);
}

.self-check-in-progress li {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 0 10px;
    align-items: center;
    min-width: 0;
    padding: 14px;
    background: var(--self-check-in-surface);
}

.self-check-in-progress li.is-current {
    background: var(--self-check-in-surface-strong);
    box-shadow: inset 0 -4px var(--olive);
}

.self-check-in-progress li > span {
    grid-row: 1 / span 2;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid var(--line);
    color: var(--muted);
    font-family: var(--display);
    font-weight: 850;
}

.self-check-in-progress li.is-complete > span {
    border-color: var(--olive);
    color: white;
    background: var(--olive);
}

.self-check-in-progress li.is-current > span {
    border: 2px solid var(--olive);
    color: var(--olive);
    background: white;
}

.self-check-in-progress strong,
.self-check-in-progress small {
    min-width: 0;
    overflow-wrap: anywhere;
}

.self-check-in-progress strong {
    font-family: var(--display);
    font-size: 12px;
    line-height: 1.1;
    text-transform: uppercase;
}

.self-check-in-progress small {
    color: var(--self-check-in-secondary);
    font-size: 11px;
    line-height: 1.4;
}

.self-check-in-booking {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin-bottom: 20px;
    padding: 1px;
    background: var(--line);
}

.self-check-in-booking > div {
    display: grid;
    gap: 3px;
    padding: 15px;
    background: var(--self-check-in-surface);
}

.self-check-in-booking span {
    color: var(--self-check-in-secondary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.self-check-in-booking strong {
    font-family: var(--display);
    font-size: 15px;
    line-height: 1.2;
    overflow-wrap: anywhere;
    text-transform: uppercase;
}

.self-check-in-card {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 8px 20px;
    padding: clamp(22px, 4vw, 38px);
    border: 1px solid var(--line);
    background: var(--self-check-in-surface);
    box-shadow: 0 16px 36px rgb(8 11 8 / 8%);
}

.self-check-in-card > :not(.self-check-in-step) {
    grid-column: 2;
}

.self-check-in-card > .waiver-agreement {
    grid-column: 1 / -1;
}

.self-check-in-card > .waiver-document-sheet,
.self-check-in-card > .waiver-signature-form,
.self-check-in-card > .waiver-pdf-panel {
    grid-column: 1 / -1;
}

.self-check-in-step {
    grid-row: 1;
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    color: white;
    background: var(--ink);
    font-family: var(--display);
    font-size: 18px;
    font-weight: 850;
}

.self-check-in-card h2 {
    margin: 0 0 4px;
    font-family: var(--display);
    font-size: clamp(25px, 4vw, 36px);
    line-height: 1;
    text-transform: uppercase;
}

.self-check-in-card p {
    margin: 0;
    color: var(--self-check-in-secondary);
    font-size: 14px;
    line-height: 1.6;
}

.self-check-in-card .self-check-in-kicker {
    margin-bottom: 7px;
    color: var(--olive);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-transform: uppercase;
}

.self-check-in-card form {
    margin-top: 16px;
}

.self-check-in-card form > .button {
    margin-top: 12px;
}

.self-check-in-auth {
    align-items: center;
}

.self-check-in-ready {
    padding: clamp(28px, 5vw, 52px);
    border: 2px solid #98bb77;
    color: white;
    background:
        radial-gradient(circle at 88% 12%, rgb(255 255 255 / 12%), transparent 28%),
        #254c2b;
    box-shadow: 0 20px 50px rgb(23 56 27 / 20%);
    text-align: center;
}

.self-check-in-ready--on-site {
    border-color: #98bb77;
    color: #ffffff;
    background: #254c2b;
}

.self-check-in-ready--on-site .eyebrow {
    color: #ffffff;
}

.self-check-in-ready--checked-out {
    border-color: #364a32;
    color: #080b08;
    background: #f6f0e2;
    box-shadow: 0 20px 50px rgb(8 11 8 / 12%);
}

.self-check-in-ready--checked-out .self-check-in-ready-mark {
    border-color: #364a32;
    color: #364a32;
}

.self-check-in-ready--checked-out h2,
.self-check-in-ready--checked-out > p {
    color: #080b08;
}

.self-check-in-ready--checked-out .self-check-in-ready-instructions {
    border-color: #77796f;
    color: #080b08;
    background: #eee7d6;
}

.self-check-in-unavailable {
    border-left-color: #782f25;
    color: #782f25;
    background: #f0ddd8;
}

.self-check-in-identity-review {
    min-width: 0;
    border-left: 5px solid #a64028;
    background: #f0ddd8;
    overflow-wrap: anywhere;
}

.self-check-in-identity-review > *,
.self-check-in-identity-review__message {
    min-width: 0;
    overflow-wrap: anywhere;
}

.self-check-in-identity-review__actions {
    display: grid;
    gap: 12px;
    width: 100%;
}

.self-check-in-identity-review .button {
    width: 100%;
    min-height: 52px;
}

.self-check-in-identity-review .button:focus-visible {
    outline: 3px solid #273021;
    outline-offset: 3px;
}

.self-check-in-checkout-form {
    display: grid;
    gap: 12px;
    max-width: 680px;
    margin: 24px auto 0;
}

.self-check-in-checkout-form .terms-check {
    min-height: 44px;
    color: #ffffff;
    text-align: left;
}

.self-check-in-checkout-action {
    min-height: 52px;
    color: #080b08;
    background: var(--signal);
}

.self-check-in-checkout-action .button {
    width: 100%;
}

.self-check-in-ready--on-site .self-check-in-checkout-action .button-primary {
    color: #080b08;
    background: #aa9a6b;
}

.self-check-in-ready--on-site .self-check-in-checkout-action .button-primary:hover {
    color: #080b08;
    background: #aa9a6b;
}

.self-check-in-ready--on-site .self-check-in-checkout-action .button-primary:focus-visible {
    color: #080b08;
    background: #aa9a6b;
    outline: 3px solid #ffffff;
    outline-offset: 4px;
}

.self-check-in-ready--on-site .self-check-in-checkout-action .button-primary:disabled {
    color: #080b08;
    background: #aa9a6b;
    opacity: 1;
}

.self-check-in-checkout-action:focus-within {
    outline: 3px solid #ffffff;
    outline-offset: 4px;
}

.self-check-in-checkout-action .button:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 4px;
}

.self-check-in-ready-mark {
    display: grid;
    width: 82px;
    height: 82px;
    margin: 0 auto 14px;
    place-items: center;
    border: 3px solid #d9f0c7;
    border-radius: 50%;
    color: #d9f0c7;
    font-size: 48px;
    font-weight: 850;
    line-height: 1;
}

.self-check-in-ready h2 {
    margin: 8px 0 6px;
    color: white;
    font-family: var(--display);
    font-size: clamp(36px, 6vw, 62px);
    line-height: 0.95;
    text-transform: uppercase;
}

.self-check-in-ready > p {
    margin: 0;
    color: rgb(255 255 255 / 82%);
}

.self-check-in-ready .terms-check {
    color: #ffffff;
}

.self-check-in-ready-instructions {
    max-width: 680px;
    margin: 24px auto 0;
    padding: 18px;
    border: 1px solid rgb(255 255 255 / 22%);
    color: white;
    background: rgb(0 0 0 / 14%);
    font-size: 14px;
    text-align: left;
}

.self-check-in-schedule {
    max-width: 680px;
    margin: 20px auto 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.self-check-in-schedule li {
    display: grid;
    grid-template-columns: minmax(110px, 0.35fr) 1fr;
    gap: 18px;
    padding: 15px 0;
    border-top: 1px solid rgb(255 255 255 / 18%);
}

.self-check-in-schedule time {
    color: #d9f0c7;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.self-check-in-schedule strong {
    display: block;
    font-family: var(--display);
    font-size: 16px;
    text-transform: uppercase;
}

.self-check-in-schedule p {
    margin: 2px 0 0;
    color: rgb(255 255 255 / 72%);
    font-size: 11px;
}

@media (max-width: 900px) {
    .filter-bar {
        grid-template-columns: 1fr;
    }

    .filter-actions {
        width: 100%;
        flex-wrap: wrap;
        padding-top: 0;
    }

    .filter-actions .button {
        width: auto;
        flex: 1 1 140px;
    }

    .legal-layout {
        grid-template-columns: 1fr;
    }

    .legal-index {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .legal-index .section-index {
        grid-column: 1 / -1;
    }

    .self-check-in-progress {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .self-check-in-booking {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .legal-index,
    .legal-contact-card,
    .legal-purpose-grid {
        grid-template-columns: 1fr;
    }

    .self-check-in-progress,
    .self-check-in-booking {
        grid-template-columns: 1fr;
    }

    .waiver-document-context {
        grid-template-columns: 1fr;
    }

    .waiver-document-end,
    .waiver-pdf-panel > header {
        align-items: stretch;
        flex-direction: column;
    }

    .waiver-pdf-panel > header .button {
        width: 100%;
    }

    .waiver-pdf-panel iframe {
        height: 520px;
        min-height: 420px;
    }

    .self-check-in-card {
        grid-template-columns: 1fr;
    }

    .self-check-in-card > :not(.self-check-in-step),
    .self-check-in-card > .waiver-agreement {
        grid-column: 1;
    }

    .self-check-in-auth .button,
    .self-check-in-card form > .button {
        width: 100%;
    }

    .self-check-in-schedule li {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .self-check-in-kiosk-actions {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media print {
    .site-header,
    .site-footer,
    .cookie-consent,
    .ticket-heading,
    .ticket-actions,
    .ticket-next-steps,
    .ticket-page-exit,
    .ticket-wallet-actions,
    .ticket-withdrawal {
        display: none !important;
    }

    .flash {
        display: none !important;
    }

    /* Fixed, so print repeats it on every page of the ticket. */

    .ticket-page .skip-link {
        display: none !important;
    }

    .legal-page .page-masthead,
    .legal-page .legal-index,
    .legal-page .legal-print,
    .legal-page .legal-admin-warning {
        display: none !important;
    }

    .legal-page .legal-overview {
        padding: 0;
    }

    .legal-page .legal-layout {
        display: block;
    }

    .legal-page .legal-content {
        gap: 24px;
    }

    .legal-page .legal-introduction,
    .legal-page .legal-content > section {
        padding-bottom: 20px;
        break-inside: avoid;
    }

    .ticket-section {
        min-height: auto;
        padding: 20px;
    }

    .ticket {
        box-shadow: none;
        print-color-adjust: exact;
    }

    .ticket-stub > .ticket-stub-each-day {
        display: block;
        margin-top: 10px;
        color: rgb(255 255 255 / 80%);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: normal;
        line-height: 1.4;
        text-transform: none;
    }

    .ticket-page .no-print {
        display: none !important;
    }

    .gift-card-page .no-print,
    .gift-card-page .site-header,
    .gift-card-page .site-footer,
    .gift-card-page .flash,
    .gift-card-page .gift-card-order-card > *:not(.gift-card-printable) {
        display: none !important;
    }

    .gift-card-page .message-section,
    .gift-card-page .gift-card-order-card {
        padding: 0;
        color: black;
        background: white;
        box-shadow: none;
    }

    .gift-card-page .gift-card-printable {
        margin: 0;
        break-inside: avoid;
        print-color-adjust: exact;
    }
}

.team-dress-code-jump {
    position: fixed;
    z-index: 35;
    top: 50%;
    left: 0;
    display: flex;
    align-items: stretch;
    padding: 0;
    color: white;
    background: var(--ink);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-decoration: none;
    text-transform: uppercase;
    transform: translateY(-50%) translateX(calc(-100% + 52px));
    transition: transform 180ms ease;
}

.team-dress-code-jump-label {
    display: inline-flex;
    align-items: center;
    padding: 13px 10px 13px 15px;
    white-space: nowrap;
}

.team-dress-code-jump-icons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 52px;
    flex: 0 0 52px;
}

.team-dress-code-jump-clothing {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.team-dress-code-jump-arrow {
    color: var(--signal);
    font-style: normal;
    transition: transform 180ms ease;
}

.team-dress-code-jump:hover,
.team-dress-code-jump:focus-visible {
    outline: 3px solid var(--signal);
    outline-offset: 0;
    transform: translateY(-50%) translateX(0);
}

.team-dress-code-jump:hover .team-dress-code-jump-arrow,
.team-dress-code-jump:focus-visible .team-dress-code-jump-arrow {
    transform: translateY(2px);
}

.team-camo-section { scroll-margin-top: 100px; }

.team-dress-code-grid,
.event-dress-code-teams,
.rules-team-dress-code-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

.team-dress-code-card,
.event-dress-code-team,
.rules-team-dress-code { padding: clamp(22px, 3vw, 34px); border-top: 3px solid var(--olive); background: #ebe9e1; }

.team-dress-code-card .rich-text p { margin: 12px 0 0; color: var(--ink); font-size: 16px; line-height: 1.7; }

.dress-code-recommendations { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }

.dress-code-recommendations strong { font-family: var(--display); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }

.dress-code-recommendations ul { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 0; }

.dress-code-recommendations li { padding: 6px 9px; background: white; font-size: 12px; }

.event-dress-code-section { scroll-margin-top: 90px; padding: clamp(52px, 7vw, 84px) 0; border-top: 1px solid var(--line); }

.event-dress-code-heading { display: flex; justify-content: space-between; gap: 28px; align-items: end; margin-bottom: 22px; }

.event-dress-code-heading h2 { margin: 6px 0 0; }

.event-dress-code-heading > p { max-width: 340px; margin: 0; color: var(--muted); line-height: 1.6; }

.event-dress-code-team { padding: 25px; }

.event-dress-code-team header { display: flex; gap: 10px; align-items: center; margin-bottom: 20px; }

.event-dress-code-team header i { width: 8px; height: 26px; background: currentColor; }

.event-dress-code-team h3 { margin: 0; font-family: var(--display); font-size: 20px; text-transform: uppercase; }

.event-dress-code-team header > strong { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }

.event-dress-code-places { display: grid; gap: 2px; margin: -12px 0 20px; color: var(--muted); font-size: 13px; }

.event-dress-code-team section + section { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }

.event-dress-code-team .rich-text p { margin: 8px 0 0; color: #30332e; font-size: 16.5px; line-height: 1.68; }

.event-dress-code-recommended { color: var(--muted); font-size: 13px; }

.event-dress-code-section .shell > .button { margin-top: 20px; }

.team-uniform-requirements > span { display: block; margin-top: 10px; color: var(--signal); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.team-uniform-requirements > span:first-of-type { margin-top: 0; }

.team-uniform-requirements p { font-size: 13.5px; line-height: 1.7; }

.booking-panel-dress-code { margin: -12px 0 22px; border-color: rgb(255 255 255 / 35%); color: white; }

.team-camo-rule {
    grid-column: 1 / -1;
    margin-top: 12px;
    padding: 14px 16px;
    border-left: 4px solid var(--signal);
    color: #fff;
    background: #242a22;
    font-size: 15px;
    line-height: 1.6;
}

.team-camo-rule > b {
    display: block;
    margin-bottom: 8px;
    color: var(--signal);
    font-family: var(--display);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.team-camo-rule > section { display: block; margin-top: 9px; }

.team-camo-rule > section strong { color: #fff; }

.team-camo-rule .rich-text { display: inline; }

.team-camo-rule .rich-text p { display: inline; margin: 0; color: #fff; }

.team-dress-code-more { grid-column: 2; justify-self: start; padding: 0; border: 0; color: var(--olive); background: transparent; font: inherit; font-size: 11px; font-weight: 800; text-decoration: underline; cursor: pointer; }

.rules-team-dress-code { margin-top: 22px; }

.rules-team-dress-code header { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 20px; }

.rules-team-dress-code header strong { font-family: var(--display); font-size: 23px; text-transform: uppercase; }

.rules-team-dress-code header a { color: var(--olive); font-size: 12px; font-weight: 800; }

.rules-team-dress-code-grid section { padding: 18px; background: rgb(255 255 255 / 55%); }

.rules-team-dress-code-grid h3 { margin-top: 0; }

.dress-code-dialog { width: min(980px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; color: var(--ink); background: transparent; }

.dress-code-dialog::backdrop { background: rgb(13 16 13 / 76%); backdrop-filter: blur(3px); }

.dress-code-dialog-panel { max-height: calc(100dvh - 32px); overflow: auto; background: var(--paper); box-shadow: 0 24px 80px rgb(0 0 0 / 38%); }

.dress-code-dialog-panel > header { position: sticky; z-index: 2; top: 0; display: flex; justify-content: space-between; gap: 24px; padding: 28px 32px 22px; border-bottom: 1px solid var(--line); background: var(--paper); }

.dress-code-dialog-panel h2 { margin: 7px 0; font-family: var(--display); font-size: clamp(28px, 5vw, 44px); text-transform: uppercase; }

.dress-code-dialog-panel header p { max-width: 650px; margin: 0; color: var(--muted); }

.dress-code-dialog-close { width: 42px; height: 42px; border: 1px solid var(--line); color: var(--ink); background: transparent; font-size: 28px; cursor: pointer; }

.dress-code-dialog-teams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 28px 32px; }

.dress-code-dialog-team { padding: 24px; border-top: 4px solid currentColor; background: #e8e7df; }

.dress-code-dialog-team h3 { margin: 0 0 20px; font-family: var(--display); font-size: 24px; text-transform: uppercase; }

.dress-code-dialog-team article + article { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }

.dress-code-dialog-team .rich-text p { margin: 9px 0 0; color: var(--ink); font-size: 16px; line-height: 1.68; }

.dress-code-dialog-recommended { color: var(--muted); font-size: 13px; line-height: 1.55; }

.dress-code-dialog-panel > footer { display: flex; justify-content: flex-end; padding: 0 32px 28px; }

.promotion-code { display: grid; gap: 10px; }

.promotion-code-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.promotion-code-status { min-height: 1.4em; margin: 0; color: var(--muted); font-size: 13px; }

.promotion-code-policy { margin: 0; }

.promotion-code-policy .terms-check { margin-top: 12px; }

.booking-adjustment-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

.booking-adjustment-panel { display: grid; gap: 10px; align-content: start; padding: 20px; border: 1px solid var(--line); background: rgb(255 255 255 / 32%); }

.booking-adjustment-panel h2 { margin: 0 0 4px; font-family: var(--display); font-size: 17px; text-transform: uppercase; }

.booking-adjustment-panel label:not(.terms-check) { display: flex; flex-direction: column; gap: 7px; }

.booking-adjustment-panel label > span { color: #575a52; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }

.booking-adjustment-panel label > span em { margin-left: 6px; color: #96998f; font-style: normal; font-weight: 600; }

.booking-adjustment-panel input:not([type="checkbox"]) { width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid #cbc8bf; border-radius: 0; color: var(--ink); background: #f9f7f1; }

.booking-adjustment-panel .has-error + input { border-color: #a64028; }

.booking-adjustment-panel > small { color: var(--muted); font-size: 10px; }

.affiliate-rewards { display: grid; gap: 10px; }

.affiliate-rewards > article { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr) auto; gap: 14px; align-items: center; padding: 15px 17px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; }

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

.affiliate-metrics > div { padding: 14px; background: rgb(255 255 255 / 45%); }

.affiliate-metrics dt { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

.affiliate-metrics dd { margin: 5px 0 0; overflow-wrap: anywhere; }

@media (max-width: 760px) {
    .account-affiliate-dashboard { grid-template-columns: 1fr; }

    .affiliate-metrics { grid-template-columns: 1fr; }

    .affiliate-rewards > article { grid-template-columns: 1fr; }

    .booking-adjustment-panels { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .team-dress-code-jump { position: sticky; top: 74px; left: auto; z-index: 20; width: max-content; margin: 12px 0 0 12px; transform: none; transition: top 180ms ease; }
    .site-header.has-social-bar:not(.is-scrolled) ~ main .team-dress-code-jump { top: calc(88px + var(--social-bar-height)); }
    .team-dress-code-jump:hover, .team-dress-code-jump:focus-visible { transform: none; }
    .team-dress-code-grid, .event-dress-code-teams, .rules-team-dress-code-grid, .dress-code-dialog-teams { grid-template-columns: 1fr; }
    .event-dress-code-heading { display: block; }
    .event-dress-code-heading > p { margin-top: 12px; }
}

@media (max-width: 820px) {
    .team-dress-code-jump { top: 72px; }
    .site-header.has-social-bar:not(.is-scrolled) ~ main .team-dress-code-jump { top: calc(72px + var(--social-bar-height)); }
}

@media (max-width: 600px) {
    .dress-code-dialog { width: 100%; max-height: 100dvh; }
    .dress-code-dialog-panel { min-height: 100dvh; max-height: 100dvh; }
    .dress-code-dialog-panel > header, .dress-code-dialog-teams { padding: 22px 18px; }
    .dress-code-dialog-panel > footer { padding: 0 18px 22px; }
    .event-dress-code-team .rich-text p { font-size: 15.5px; }
}

.form-errors ul {
    display: grid;
    gap: 7px;
    margin: 12px 0 0;
    padding-left: 20px;
}

.form-errors li,
.form-errors a {
    color: #6f2117;
    font-size: 12px;
    line-height: 1.45;
}

.form-errors a {
    display: flex;
    min-height: 44px;
    align-items: center;
}

.form-errors a:focus-visible {
    outline: 3px solid #5f552f;
    outline-offset: 2px;
}

.event-form > fieldset:focus-visible {
    outline: 3px solid #5f552f;
    outline-offset: 8px;
}

.event-form [aria-invalid="true"] {
    border: 2px solid #8d2d20;
    background: #fff0eb;
    box-shadow: inset 4px 0 0 #8d2d20;
}

.event-form .field-error::before,
.event-form .staff-field-error::before,
.event-form .has-error > small:last-child::before {
    content: "!";
    display: inline-grid;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #812719;
    font-size: 10px;
    font-weight: 900;
}

.event-form [hidden] {
    display: none !important;
}

.event-form [disabled] {
    color: #555950;
    background: #ded9cd;
    cursor: not-allowed;
    opacity: 1;
}

.waiver-identity-confirmation,
.waiver-forward-handoff,
.waiver-replacement-email-review {
    display: grid;
    min-width: 0;
    gap: 14px;
    padding: clamp(18px, 3vw, 28px);
    border: 1px solid var(--line);
    background: var(--paper);
    overflow-wrap: anywhere;
}

.waiver-handoff-page .ticket-page-shell {
    min-height: 75vh;
    padding-top: 150px;
    padding-bottom: 72px;
}

.waiver-identity-confirmation h2,
.waiver-identity-confirmation p,
.waiver-forward-handoff h2,
.waiver-forward-handoff p,
.waiver-replacement-email-review h2,
.waiver-replacement-email-review p,
.waiver-replacement-email-review form {
    min-width: 0;
    margin: 0;
}

.waiver-identity-confirmation__actions {
    display: grid;
    gap: 12px;
}

.waiver-identity-confirmation__actions form,
.waiver-replacement-email-review form {
    display: grid;
    gap: 12px;
}

.waiver-forward-handoff label,
.waiver-replacement-email-review .field {
    display: grid;
    min-width: 0;
    gap: 7px;
}

.waiver-forward-link-field {
    grid-template-columns: minmax(0, 1fr);
}

.waiver-forward-email {
    margin-top: 4px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.waiver-forward-email fieldset {
    margin: 0;
}

.waiver-forward-handoff input,
.waiver-replacement-email-review input[type="email"] {
    width: 100%;
    min-width: 0;
}

/* Player profile editing and Game Day waiver delivery */

.player-profile-form fieldset {
    display: block;
}

.player-profile-form .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
}

.player-profile-form > .event-form-actions {
    justify-content: flex-end;
}

.player-profile-form .player-profile-field--full,
.player-profile-form .player-profile-field--phone,
.player-profile-form .player-profile-field--postcode {
    grid-column: 1 / -1;
}

.player-profile-form .player-profile-field--phone {
    max-width: 28rem;
}

.player-profile-form .player-profile-field--postcode {
    max-width: 14rem;
}

.player-profile-editor-section {
    margin-top: 18px;
    border: 1px solid var(--line);
    background: white;
}

.player-profile-editor-section > summary {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 16px;
    cursor: pointer;
    font-weight: 850;
    text-transform: uppercase;
}

.player-profile-editor-section > summary span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
}

.player-profile-editor-section > summary .player-profile-editor-section__summary-copy {
    display: grid;
    gap: 3px;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

.player-profile-editor-section__summary-copy small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.player-profile-editor-section > fieldset {
    margin: 0;
    padding: 20px;
    border: 0;
    border-top: 1px solid var(--line);
}

.player-account-card {
    margin: 0 0 22px;
    border: 1px solid var(--line);
    background: white;
}

.player-account-card__header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
}

.player-account-card__header h3 {
    margin: 0;
    font-family: var(--display);
    font-size: 18px;
    text-transform: uppercase;
}

.player-account-card__header p {
    margin: 3px 0 0;
    color: var(--muted);
}

.player-email-identity > summary {
    display: flex;
    min-height: 68px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 18px;
    cursor: pointer;
}

.player-email-identity__label {
    display: block;
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.player-email-identity__value {
    display: block;
    margin-top: 4px;
    overflow-wrap: anywhere;
}

.player-email-identity__status {
    display: inline-block;
    margin-left: 6px;
    color: #36562f;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.player-email-identity__editor {
    padding: 20px;
    border-top: 1px solid var(--line);
    background: #f6f4ed;
}

.player-email-identity__editor h4 {
    margin: 0;
    font-size: 15px;
    text-transform: uppercase;
}

.player-email-identity__editor > p {
    margin: 5px 0 16px;
    color: var(--muted);
}

.player-account-feedback {
    margin: 0 18px 16px;
    padding: 10px 12px;
    font-weight: 800;
}

.player-account-feedback--success {
    border: 1px solid #527048;
    color: #273021;
    background: #e4eee0;
}

.player-account-feedback--notice {
    border: 1px solid #a97831;
    color: #56380f;
    background: #fff4d8;
}

.player-account-feedback--error {
    border: 1px solid #a84937;
    color: #6b2116;
    background: #f8e8e3;
}

.player-email-change-form .player-email-change-new-email {
    display: grid;
    max-width: 32.5rem;
    gap: 6px;
}

.player-email-change-form .player-email-change-new-email > span {
    font-weight: 800;
}

.player-email-change-form .player-email-change-new-email small {
    color: #8c3020;
}

/* The address field matches the account's other fields: 48 px tall, a
   comfortable target on a phone (core 0.9.0). */

.player-email-change-form .player-email-change-new-email input {
    width: 100%;
    min-height: 48px;
    padding: 11px 13px;
    border: 1px solid #cbc8bf;
    border-radius: 0;
    color: var(--ink);
    background: #f9f7f1;
}

.player-account-card__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.player-email-change-new-email {
    max-width: 32.5rem;
}

/* "Your email addresses" (core 0.9.0): the account side of the Email address
   list. One row per address, its status in words, each action its own POST
   form at a 44 px target; the pending addition is a row of its own. */

.player-account-email-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.player-account-email-list > li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 16px;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
}

.player-account-email-list > li > div {
    min-width: 0;
}

.player-account-email {
    font-weight: 800;
    overflow-wrap: anywhere;
}

.player-account-email-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: center;
    margin-top: 6px;
    color: var(--muted);
    font-size: 13px;
}

.player-account-email-meta .status-pill.player-account-email-main {
    color: white;
    background: var(--ink);
}

.player-account-email-meta .status-pill.player-account-email-waiting {
    color: #56380f;
    background: #fff4d8;
}

.player-account-email-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.player-account-email-actions form {
    margin: 0;
}

.player-account-email-actions .button {
    min-height: 44px;
}

.player-email-change-form .player-email-change-new-email small.player-account-email-hint {
    color: var(--muted);
}

.player-account-email-full {
    margin: 0;
    padding: 14px 18px;
    color: var(--muted);
}

/* "People you’ve booked" (core 0.9.0, A4): one row per person, their next
   booking, and the claim disclosure; the answer shows inside the row. */

.player-account-people {
    margin: 0;
    padding: 0;
    list-style: none;
}

.player-account-person {
    border-bottom: 1px solid var(--line);
}

.player-account-person__who {
    padding: 14px 18px 0;
}

.player-account-person__who h3 {
    margin: 0;
    font-size: 17px;
    overflow-wrap: anywhere;
}

.player-account-person__who p {
    margin: 4px 0 0;
    color: var(--muted);
}

.player-account-person__who .text-link {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
}

.player-account-person .player-account-feedback {
    margin: 12px 18px 0;
}

.player-account-people-empty,
.player-account-people-note {
    margin: 0;
    padding: 14px 18px;
    color: var(--muted);
}

/* The claim confirmation (C6, U42): whose profile it is and who booked them. */

.player-claim-details {
    display: grid;
    gap: 10px;
    margin: 18px 0;
    padding: 16px 18px;
    border: 1px solid var(--line);
}

.player-claim-details > div {
    display: grid;
    grid-template-columns: minmax(7rem, auto) minmax(0, 1fr);
    gap: 12px;
}

.player-claim-details dt {
    color: var(--muted);
    font-weight: 800;
}

.player-claim-details dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.player-claim-note {
    color: var(--muted);
}

@media (max-width: 620px) {
    .player-account-email-list > li {
        grid-template-columns: minmax(0, 1fr);
    }

    .player-account-email-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .player-account-email-actions .button {
        width: 100%;
    }
}

.has-js .player-email-change-form > [data-condition-target].is-condition-disabled {
    display: none;
}

/* SA31 under a booking's price: the staff booking page, the profile, the account */

.staff-allowance-line {
    display: block;
    margin-top: 2px;
    color: #2f3810;
    font-size: 12px;
    font-weight: 700;
}

/* The booking page's staff allowance panel: full width, first, olive edge */

.booking-adjustment-panel.booking-staff-allowance {
    grid-column: 1 / -1;
    border-left: 6px solid var(--olive);
}

.booking-adjustment-panel.booking-staff-allowance--muted,
.booking-form:has(input[name="booking_for"][value="someone_else"]:checked) .booking-staff-allowance {
    border-left-color: var(--line);
}

.booking-staff-allowance--muted p,
.booking-staff-allowance [data-booking-for="someone_else"] {
    margin: 0;
    color: var(--muted);
}

.booking-staff-allowance-left {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
}

.booking-staff-allowance .terms-check {
    min-height: 44px;
}

/* The tick box's label sits inside a .booking-adjustment-panel label, whose
   `label > span` rule sets field labels in 10-pixel capitals: its words and
   hint read as a sentence instead, as the mockups draw them. */

.booking-staff-allowance .terms-check > span {
    font-size: 14px;
    letter-spacing: normal;
    text-transform: none;
}

.booking-staff-allowance .terms-check strong {
    font-size: 16px;
}

.booking-staff-allowance .terms-check input {
    width: 22px;
    height: 22px;
}

.booking-staff-allowance .terms-check small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 14px;
}

/* The summary's allowance row: smaller than the Ticket price above it */

.booking-summary-totals .summary-total.summary-staff-allowance {
    padding-top: 12px;
    border-top: 0;
}

.booking-summary-totals .summary-staff-allowance > span {
    color: rgb(255 255 255 / 70%);
    font-size: 11px;
}

.booking-summary-totals .summary-staff-allowance strong {
    font-size: 24px;
}

/* The account overview's card */

.account-staff-allowance {
    margin: 0 0 28px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-left: 6px solid var(--olive);
    background: white;
}

.account-staff-allowance h2 {
    margin: 0 0 6px;
    font-size: 22px;
    text-transform: uppercase;
}

.account-staff-allowance p {
    margin: 0;
    font-weight: 700;
}

@media (max-width: 620px) {
    /* On a phone the pill moves under the intro. */

    .player-account-page-heading {
        flex-direction: column;
        align-items: flex-start;
    }

    .account-shortcut-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .account-shortcut-card .button {
        width: 100%;
    }

    .player-profile-form .form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .player-profile-form .player-profile-field {
        grid-column: 1 / -1;
        width: 100%;
        max-width: none;
    }

    .player-profile-form > .event-form-actions,
    .player-profile-personal-card > .event-form-actions {
        flex-direction: column;
    }

    .player-profile-form > .event-form-actions .button,
    .player-profile-personal-card > .event-form-actions .button {
        width: 100%;
    }

    .player-account-content .event-form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .player-account-content .event-form-actions form {
        width: 100%;
    }

    .player-account-content .event-form-actions .button {
        width: 100%;
    }

    .player-account-content .calendar-setup-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .player-account-content .calendar-setup-actions .button {
        width: 100%;
    }

    .player-email-change-new-email {
        width: 100%;
        max-width: none;
    }

    .player-email-identity > summary {
        align-items: stretch;
        flex-direction: column;
    }

    .player-email-identity > summary .button {
        width: 100%;
    }

    .player-account-card__actions .button {
        width: 100%;
    }

    .player-account-card__actions {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .player-account-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .player-account-nav-desktop {
        display: none;
    }

    .player-account-nav-compact {
        display: block;
        padding: 12px 15px;
        border-bottom: 1px solid var(--line);
        background: var(--paper-2);
    }

    .player-account-nav-compact > summary {
        position: relative;
        display: grid;
        min-height: 38px;
        gap: 3px;
        padding: 8px 38px 8px 11px;
        border: 1px solid var(--line);
        cursor: pointer;
        background: white;
        list-style: none;
    }

    .player-account-nav-compact > summary::-webkit-details-marker {
        display: none;
    }

    .player-account-nav-compact > summary::after {
        position: absolute;
        top: 50%;
        right: 14px;
        width: 8px;
        height: 8px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        color: var(--olive);
        content: "";
        transform: translateY(-70%) rotate(45deg);
    }

    .player-account-nav-compact[open] > summary::after {
        transform: translateY(-30%) rotate(225deg);
    }

    .player-account-nav-compact > summary span {
        color: var(--muted);
        font-size: 9px;
        font-weight: 850;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .player-account-nav-compact nav {
        padding-top: 12px;
    }

    .player-account-nav-compact .player-account-nav-group {
        padding: 10px;
        border: 1px solid var(--line);
        border-bottom: 0;
        background: white;
    }

    .player-account-nav-compact .player-account-nav-group + .player-account-nav-group {
        margin-top: 0;
    }

    .player-account-nav-compact .player-account-nav-group:last-child {
        border-bottom: 1px solid var(--line);
    }

    .player-account-content {
        padding: 20px 15px 28px;
    }

    .player-account-masthead {
        align-items: stretch;
        flex-direction: column;
        gap: 16px;
        padding: 22px 17px 18px;
    }

    .player-account-masthead form,
    .player-account-masthead .button {
        width: 100%;
    }

    .player-account-content .player-profile-personal-card > fieldset,
    .player-account-content .player-profile-personal-card > .event-form-actions {
        padding-right: 15px;
        padding-left: 15px;
    }

    .player-profile-editor-section > summary {
        align-items: start;
        flex-direction: column;
        gap: 4px;
    }
}

/* Scheduled publishing (core 0.4.0, theme API 0.7): a teaser's three-item
   facts strip, its Overview, the Coming soon panel in the lean booking
   card's place, Notify me (partials/notify-me) and the board's Coming soon
   card. The panel takes the booking card's box and dark surface; Notify me's
   own rules suit any surface, and the panel adds the dark ones, as the event
   filter bar does for its fields. */

.event-facts--three .facts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.teaser-brief { margin: 0 0 16px; }

.teaser-brief p { margin: 0; font-size: 18px; line-height: 1.6; overflow-wrap: anywhere; }

.teaser-panel { min-width: 0; padding: 32px; color: white; background: var(--ink); }

.teaser-panel h2 { margin: 12px 0 8px; font-family: var(--display); font-size: 31px; font-weight: 850; text-transform: uppercase; }

.teaser-panel > p { margin: 0 0 8px; color: rgb(255 255 255 / 80%); }

.teaser-time { font-family: var(--display); font-size: 24px; font-weight: 800; line-height: 1.2; text-transform: uppercase; }

.teaser-panel > .teaser-time { color: white; }

.eyebrow-soon { display: inline-block; padding: 4px 8px; color: var(--ink); background: var(--signal); font-family: var(--display); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; line-height: 1.2; text-transform: uppercase; }

.notify-me { min-width: 0; margin-top: 24px; }

.notify-me-form { display: grid; min-width: 0; gap: 12px; }

.notify-me-field { display: grid; min-width: 0; gap: 7px; }

.notify-me-field label { font-size: 10px; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }

.notify-me-field input { width: 100%; min-width: 0; min-height: 52px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 0; color: var(--ink); background: var(--paper); }

.notify-me-field input[aria-invalid="true"] { border: 2px solid #a64028; background: #fff0eb; box-shadow: inset 4px 0 0 #a64028; }

.notify-me-field .field-error { margin: 0; font-weight: 800; }

.notify-me-form .button { width: 100%; }

.notify-me-hint { margin: 12px 0 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }

.notify-me-hint a { text-decoration: underline; text-underline-offset: 3px; }

.notify-me-status { margin: 0 0 12px; font-weight: 700; overflow-wrap: anywhere; }

.teaser-panel .notify-me-field label { color: rgb(216 209 191 / 72%); }

.teaser-panel .notify-me-field .field-error { color: #ffb8aa; }

.teaser-panel .notify-me-hint { color: rgb(255 255 255 / 72%); }

.teaser-panel .notify-me-hint a { color: white; }

.teaser-panel .notify-me .button-outline { color: white; border-color: rgb(255 255 255 / 28%); }

.event-card--soon .event-card-soon { flex: none; margin: 0 0 18px; padding-top: 17px; border-top: 1px solid rgb(8 11 8 / 22%); }

.event-card-soon strong { display: inline-block; padding: 4px 8px; color: var(--ink); background: var(--signal); font-family: var(--display); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }

@media (max-width: 820px) {
    .event-facts--three .facts-grid { grid-template-columns: 1fr; }
    .event-facts--three .facts-grid > div { border-right: 0; border-left: 0; }
    .event-facts--three .facts-grid > div + div { border-top: 1px solid rgb(255 255 255 / 10%); }
}

@keyframes ticket-waiver-pulse {
    0%,
    100% {
        box-shadow:
            0 28px 70px rgb(16 18 15 / 18%),
            0 0 0 2px rgb(194 132 76 / 72%);
    }
    50% {
        box-shadow:
            0 28px 70px rgb(16 18 15 / 18%),
            0 0 0 9px rgb(194 132 76 / 8%);
    }
}

@keyframes particulate-drift {
    from { transform: translate3d(-2%, 5%, 0) rotate(0deg); }
    to { transform: translate3d(5%, -8%, 0) rotate(2deg); }
}

@keyframes haze-drift {
    from { transform: translate3d(-3%, 2%, 0) scale(1); }
    to { transform: translate3d(4%, -3%, 0) scale(1.08); }
}

@keyframes dust-far-drift {
    from { transform: translate3d(3%, 6%, 0) rotate(-1deg); }
    to { transform: translate3d(-4%, -7%, 0) rotate(1deg); }
}

@keyframes dust-near-drift {
    from { transform: translate3d(-5%, 10%, 0) scale(1); }
    to { transform: translate3d(6%, -12%, 0) scale(1.04); }
}

@keyframes interface-enter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}