/* 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(5, 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;
}

.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%);
}

.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;
}

.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;
}

.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;
}

.friend-booking-card .text-button {
    color: #8c2d21;
}

.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 > 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 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(--muted);
}

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

.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));
}

.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);
}

.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;
}

.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;
    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);
}

.staff-switch input:focus-visible + .staff-switch-control {
    outline: 3px solid rgb(85 102 58 / 24%);
    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%);
}

.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;
}

.whatsapp-consent {
    margin-top: 18px;
}

.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;
}

.preview-banner {
    color: white;
    background: #7c4a21;
}

.preview-banner .shell {
    display: flex;
    gap: 18px;
    align-items: center;
    padding-block: 12px;
    font-size: 11px;
}

.preview-banner a {
    margin-left: auto;
    color: var(--signal);
    font-weight: 800;
}

[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;
    }

    .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;
    }

    .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;
    }

    .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-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;
}

.player-account-card__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.player-email-change-new-email {
    max-width: 32.5rem;
}

.has-js .player-email-change-form > [data-condition-target].is-condition-disabled {
    display: none;
}

@media (max-width: 620px) {
    .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;
    }
}

@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);
    }
}