/* ==========================================================================
   Components (mobile-first; wider layouts live in responsive.css)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons — the fill carries the chamfer on ::before so focus rings are never clipped
   -------------------------------------------------------------------------- */
.btn {
    --c: 10px;
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 48px;
    padding: 0.6rem 1.6rem 0.55rem;
    border: 0;
    background: none;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.125rem;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.btn::before,
.btn::after {
    content: "";
    position: absolute;
    z-index: -1;
    clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
    transition: background-position var(--dur-slow) var(--ease-out), background-color var(--dur) ease, opacity var(--dur) ease;
}

.btn--gold {
    color: var(--black);
}

.btn--gold:hover {
    color: var(--black);
}

.btn--gold::before {
    inset: 0;
    background: var(--metal);
    background-size: 220% 100%;
    background-position: 0% 0;
}

.btn--gold:hover::before {
    background-position: 100% 0;
}

.btn--line {
    color: var(--text);
}

.btn--line:hover {
    color: var(--black);
}

.btn--line::before {
    inset: 0;
    background: var(--gold);
}

.btn--line::after {
    inset: 1.5px;
    --c: 9px;
    background: var(--black);
}

.btn--line:hover::after {
    opacity: 0;
}

.btn--lg {
    min-height: 56px;
    padding-inline: 2.25rem;
    font-size: 1.25rem;
}

.btn .icon {
    width: 1em;
    height: 1em;
}

.btn[disabled],
.btn.is-loading {
    pointer-events: none;
    opacity: 0.65;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-stretch: 125%;
    font-weight: 600;
    font-size: var(--fs-sm);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid var(--gold-dark);
    padding-bottom: 2px;
}

.text-link:hover {
    border-color: var(--gold-light);
}

/* --------------------------------------------------------------------------
   Header & navigation
   -------------------------------------------------------------------------- */
.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: var(--z-header);
    height: var(--header-h);
    background: linear-gradient(180deg, rgba(5, 5, 5, 0.85) 0%, rgba(5, 5, 5, 0) 100%);
}

/* The blurred bar lives on a pseudo-element: backdrop-filter on the header itself would
   become the containing block for the fixed mobile panel and collapse it. */
.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(5, 5, 5, 0.86);
    border-bottom: 1px solid var(--line);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    opacity: 0;
    transition: opacity var(--dur) ease;
}

.site-header.is-scrolled::before,
.site-header.is-open::before {
    opacity: 1;
}

.site-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    height: 100%;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--text);
    text-decoration: none;
}

.brand:hover {
    color: var(--text);
}

.brand__crest {
    width: 48px;
    height: auto;
}

.brand__text {
    display: flex;
    flex-direction: column;
    width: fit-content;
    line-height: 1;
}

/* FLAG is spread to exactly the width of THUNDERS above it */
.brand__flag {
    display: flex;
    justify-content: space-between;
    margin-top: 3px;
    font-stretch: 125%;
    font-weight: 700;
    font-size: 0.6875rem;
    line-height: 1;
    text-transform: uppercase;
    color: var(--gold);
}

.brand__name {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.5rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.menu-toggle {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 48px;
    padding: 0 var(--space-2) 0 var(--space-3);
    background: none;
    border: 0;
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.menu-toggle__lines {
    position: relative;
    width: 26px;
    height: 14px;
}

.menu-toggle__lines span {
    position: absolute;
    left: 0;
    height: 2px;
    background: currentColor;
    transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) ease, width var(--dur) var(--ease-out);
}

.menu-toggle__lines span:nth-child(1) { top: 0; width: 100%; }
.menu-toggle__lines span:nth-child(2) { top: 6px; width: 70%; background: var(--gold); }
.menu-toggle__lines span:nth-child(3) { top: 12px; width: 100%; }

.menu-toggle[aria-expanded="true"] .menu-toggle__lines span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__lines span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__lines span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Language switch — stays in the bar on every screen size */
.lang-switch {
    display: flex;
    align-items: center;
    margin-left: auto;
    font-stretch: 125%;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
}

.lang-switch li + li::before {
    content: "/";
    color: var(--line-strong);
}

.lang-switch__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 44px;
    color: var(--text-muted);
    text-decoration: none;
}

.lang-switch__link:hover {
    color: var(--text);
}

.lang-switch__link[aria-current="true"] {
    color: var(--gold);
}

.lang-switch__link[aria-current="true"] span:first-child {
    border-bottom: 2px solid var(--gold);
    padding-bottom: 2px;
}

/* Mobile panel */
.site-nav {
    position: fixed;
    inset: var(--header-h) 0 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-5) var(--gutter) calc(var(--space-6) + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--black);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--dur) ease, transform var(--dur) var(--ease-out), visibility 0s linear var(--dur);
}

.site-header.is-open .site-nav {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity var(--dur) ease, transform var(--dur) var(--ease-out), visibility 0s;
}

.site-nav__list {
    display: flex;
    flex-direction: column;
}

.site-nav__link {
    display: flex;
    align-items: center;
    min-height: 56px;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.75rem, 1.2rem + 3vw, 2.5rem);
    line-height: 1;
    text-transform: uppercase;
    color: var(--text);
    text-decoration: none;
}

.site-nav__link[aria-current="page"] {
    color: var(--gold);
}

.site-nav__cta {
    align-self: stretch;
}

.site-nav__meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: auto;
    font-size: var(--fs-sm);
}

.site-nav__meta a {
    color: var(--text-muted);
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   Section heads
   -------------------------------------------------------------------------- */
.section-head {
    display: grid;
    gap: var(--space-4);
    margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.section-head--split {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4) var(--space-6);
}

.section-head__lead {
    max-width: 56ch;
    color: var(--text-body);
    font-size: var(--fs-md);
}

/* --------------------------------------------------------------------------
   Home hero — text column + looping crest video (entrance choreography: motion.js)
   The video's background is pure black, so its box is masked into the page with
   no visible edge: top zone on mobile, right-hand zone on desktop.
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: max(640px, min(100svh, 1040px));
    padding-top: calc(var(--header-h) + var(--space-6));
    overflow: hidden;
    isolation: isolate;
    background: var(--black);
}

.hero__media {
    position: absolute;
    inset: var(--header-h) 0 auto;
    height: 42%;
    z-index: -2;
    -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 90%);
    mask-image: linear-gradient(180deg, #000 40%, transparent 90%);
}

.hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

/* Gold bolt slash (drawn in by motion.js). With a video the crest carries the thunder,
   so the slash would only cut across it. */
.hero--video .hero__slash {
    display: none;
}

/* The clip's background is pure #000; matching it hides the video frame completely. */
.hero--video {
    background: #000;
}

/* The clip is a lit mark on pure black, which leaves the rest of the hero dead flat.
   This gives that emptiness some air: a low gold haze where the headline sits and the
   site's bolt pattern at a whisper. Both stay under 8% so the mark keeps the stage. */
.hero--video::before,
.hero--plain::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -3;
    background:
        radial-gradient(ellipse 52% 46% at 26% 62%, rgba(248, 185, 69, 0.07), transparent 70%),
        radial-gradient(ellipse 40% 38% at 84% 18%, rgba(215, 137, 40, 0.05), transparent 72%),
        url("../img/pattern-bolt.svg") center / 52cqw auto,
        linear-gradient(180deg, #0a0908 0%, #000 42%, #0b0a08 100%);
    opacity: 0.9;
    pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
    .hero--video::before,
    .hero--plain::before {
        animation: hero-haze 18s ease-in-out infinite alternate;
    }
}

@keyframes hero-haze {
    to { opacity: 0.62; }
}

/* --------------------------------------------------------------------------
   Hero slides (panel → Slider). Photos fill the whole hero and cross-fade;
   a scrim keeps the display type readable whatever the photo looks like.
   -------------------------------------------------------------------------- */
.hero--slides .hero__media {
    inset: 0;
    height: auto;
    -webkit-mask-image: none;
    mask-image: none;
}

.hero--slides .hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 5, 5, 0.86) 0%, rgba(5, 5, 5, 0.42) 34%, rgba(5, 5, 5, 0.94) 100%);
}

.hero--slides .hero__slash {
    display: none;
}

.hero__slides {
    position: absolute;
    inset: 0;
}

.hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.4s ease;
}

.hero__slide.is-active {
    opacity: 1;
}

.hero__slide picture {
    display: block;
    height: 100%;
}

.hero__slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 38%;
}

/* Gold bolt slash (drawn in by motion.js) */
.hero__slash {
    position: absolute;
    z-index: -1;
    left: -10%;
    right: -10%;
    top: 62%;
    height: clamp(5px, 0.7vw, 10px);
    background: var(--metal);
    transform: rotate(calc(var(--slant) * -1));
    transform-origin: left center;
    opacity: 0.85;
}

.hero__inner {
    position: relative;
    display: grid;
    gap: var(--space-6);
    padding-bottom: var(--space-8);
}

/* FLAG sets the left edge for everything under the wordmark, so its indent is a value the
   whole copy block shares rather than a number living on one element. It has to be derived
   from the title's size the way FLAG's own indent was (0.317em of a font that is 0.22em of
   the title), because an em here would resolve against each element's own font-size and
   three different sizes would give three different indents — which is what went wrong. */
.hero__copy {
    --copy-indent: calc(var(--fs-hero) * 0.0697);
}

.hero__title {
    display: flex;
    flex-direction: column;
    width: fit-content;
    font-size: var(--fs-hero);      /* everything in the lockup is sized in em from here */
    font-weight: 900;
    line-height: var(--lh-tight);
    text-transform: uppercase;
}

/* "THUNDERS" + solid gold "FLAG" at about a third of its size: one mark, ThundersFlag.
   FLAG starts under the T's stem, not under its crossbar. The offset is in FLAG's own
   em (0.22 of the display size), measured on the rendered face including the F's bearing. */
.hero__flag {
    display: block;
    margin-top: 0.1em;
    /* FLAG sets the left edge for everything under the wordmark — paragraph and buttons
       follow it, THUNDERS hangs a little to its left. Same indent it always had, now taken
       from the shared value so the three edges cannot drift apart again. */
    margin-left: var(--copy-indent);
    font-family: var(--font-body);
    font-stretch: 125%;
    font-weight: 700;
    font-size: 0.22em;
    letter-spacing: 0.04em;
    line-height: 1;
    color: var(--gold);
}

.hero__flag span {
    display: inline-block;          /* lets motion.js raise the letters one by one */
}

.hero__name {
    font-family: var(--font-display);
    font-size: 1em;
    letter-spacing: -0.01em;
    /* Optical correction for the T's side bearing, and no more than that. At -0.04em the
       headline hung six pixels left of the paragraph and the buttons below it, which is
       what made the copy look unaligned: three left edges where there should be one. */
    margin-left: -0.006em;
}


.hero__lead {
    max-width: 40ch;
    margin-top: var(--space-6);
    /* +3px: FLAG's F carries more side bearing than the body face, so matching the boxes
       would leave the ink a few pixels apart. It is the ink that has to line up. */
    margin-left: calc(var(--copy-indent) + 3px);
    color: var(--text-body);
    font-size: clamp(1.0625rem, 0.85rem + 0.5vw, 1.375rem);
}

.hero__actions,
.notfound__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

/* Same edge as FLAG and the paragraph. Scoped to the hero: the 404 page shares the rule
   above but has no wordmark to line up with. */
.hero__actions {
    margin-left: calc(var(--copy-indent) + 3px);
}

/* Pause / play for the looping video (WCAG 2.2.2) */
.hero__video-toggle {
    position: absolute;
    z-index: 2;
    right: var(--gutter);
    top: calc(var(--header-h) + var(--space-3));   /* mobile: corner of the video zone */
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    background: rgba(5, 5, 5, 0.7);
    border: 1px solid var(--line-strong);
    color: var(--text);
}

.hero__video-toggle:hover {
    border-color: var(--gold);
    color: var(--gold);
}

/* Pause glyph (two bars) → play glyph (triangle) when paused */
.hero__video-icon {
    width: 12px;
    height: 14px;
    border-left: 4px solid currentColor;
    border-right: 4px solid currentColor;
}

.hero__video-toggle[aria-pressed="true"] .hero__video-icon {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 0 7px 12px;
    border-color: transparent transparent transparent currentColor;
    margin-left: 3px;
}

.hero__ticker {
    position: relative;
    display: flex;
    align-items: stretch;
    border-top: 1px solid var(--line);
    background: rgba(5, 5, 5, 0.85);
    color: var(--text);
    text-decoration: none;
    font-size: var(--fs-sm);
}

.hero__ticker:hover {
    color: var(--gold-light);
}

.hero__ticker-label {
    display: flex;
    align-items: center;
    padding: var(--space-3) var(--space-5) var(--space-3) var(--gutter);
    background: var(--gold);
    color: var(--black);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}

.hero__ticker-text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--space-3);
    padding: var(--space-3) var(--gutter) var(--space-3) var(--space-4);
    font-stretch: 112%;
    font-weight: 600;
}

.hero__ticker-vs {
    color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Inner page hero
   -------------------------------------------------------------------------- */
.page-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: clamp(380px, 52vh, 560px);
    padding-top: calc(var(--header-h) + var(--space-7));
    padding-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem);
    overflow: hidden;
    border-bottom: 1px solid var(--line);
}

/* No photography yet: a gold stage light, halftone dots and a faded crest. */
.page-hero__media {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 55% 80% at 82% 10%, rgba(253, 233, 103, 0.14), rgba(248, 185, 69, 0.04) 50%, transparent 75%),
        linear-gradient(180deg, var(--surface) 0%, var(--black) 100%);
}

.page-hero__media::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(248, 185, 69, 0.14) 1px, transparent 1.6px);
    background-size: 14px 14px;
    -webkit-mask-image: linear-gradient(250deg, #000 0%, rgba(0, 0, 0, 0.4) 40%, transparent 75%);
    mask-image: linear-gradient(250deg, #000 0%, rgba(0, 0, 0, 0.4) 40%, transparent 75%);
}

.page-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--overlay-bottom);
}

.page-hero__media picture {
    position: absolute;
    top: 50%;
    right: max(var(--gutter), 50% - var(--container) / 2);
    width: clamp(220px, 34vw, 520px);
    transform: translateY(-42%);
}

.page-hero__mark {
    width: 100%;
    height: auto;
    opacity: 0.1;
}

.page-hero__title {
    font-weight: 900;
    font-size: var(--fs-3xl);
    line-height: var(--lh-tight);
    text-transform: uppercase;
    max-width: 14ch;
}

.page-hero__lead {
    max-width: 52ch;
    margin-top: var(--space-5);
    color: var(--text-body);
    font-size: var(--fs-md);
}

.breadcrumb ol {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
    font-stretch: 125%;
    font-weight: 600;
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.breadcrumb li + li::before {
    content: "/";
    margin-right: var(--space-2);
    color: var(--gold-dark);
}

.breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--gold-light);
}

.breadcrumb [aria-current] {
    color: var(--gold);
}

/* --------------------------------------------------------------------------
   Next game / matchup / countdown
   -------------------------------------------------------------------------- */
.nextgame {
    position: relative;
    isolation: isolate;
    padding-block: var(--section-y);
    background: var(--surface);
    overflow: hidden;
}

/* Diagonal split: home side lighter, away side black. The pivot is the middle of the
   block, so the gold edge crosses exactly through the centre line instead of leaning
   off to one side. */
.nextgame__split {
    position: absolute;
    inset: 0 0 0 50%;
    z-index: -1;
    background: var(--black);
    transform: skewX(calc(var(--slant) * -2));
    transform-origin: center;
}

/* Gold edge along the diagonal split */
.nextgame__split::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, transparent, var(--gold) 20%, var(--gold-light) 50%, var(--gold) 80%, transparent);
    opacity: 0.75;
}

/* Broadcast backdrop: stadium glows, halftone, watermark word, faded team crests */
.nextgame__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

/* Halftone dots on the home side, fading toward the split */
.nextgame__bg::before {
    content: "";
    position: absolute;
    inset: 0 50% 0 0;
    background-image: radial-gradient(rgba(248, 185, 69, 0.16) 1px, transparent 1.6px);
    background-size: 14px 14px;
    -webkit-mask-image: linear-gradient(100deg, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 90%);
    mask-image: linear-gradient(100deg, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 90%);
}

/* Soft vignette so the edges settle into black */
.nextgame__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 85% 75% at 50% 45%, transparent 60%, rgba(0, 0, 0, 0.4) 100%);
}

.nextgame__glow {
    position: absolute;
    top: -30%;
    width: 60%;
    height: 90%;
    background: radial-gradient(ellipse at 50% 0%, rgba(253, 233, 103, 0.16), rgba(248, 185, 69, 0.05) 45%, transparent 70%);
}

.nextgame__glow--home { left: -8%; }
.nextgame__glow--away { right: -8%; }

.nextgame__word {
    position: absolute;
    left: -50%;
    right: -50%;
    bottom: -0.12em;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(6rem, 3rem + 14vw, 17rem);
    line-height: 1;
    white-space: nowrap;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(248, 185, 69, 0.14);
}

.nextgame__mark {
    position: absolute;
    inset-block: 0;
    display: flex;
    align-items: center;           /* centred without transforms, so GSAP can own transform */
    width: clamp(260px, 38vw, 620px);
    opacity: 0.1;
}

.nextgame__mark picture,
.nextgame__mark img {
    width: 100%;
    height: auto;
}

.nextgame__mark--home {
    left: -3%;
    opacity: 0.13;
    filter: saturate(0.7);
}

.nextgame__mark--away {
    right: -2%;
    opacity: 0.08;
    filter: grayscale(0.4);
}

.nextgame__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2) var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--line-strong);
}

.nextgame__title {
    font-weight: 900;
    font-size: var(--fs-xl);
    text-transform: uppercase;
    line-height: 1;
}

.nextgame__comp {
    color: var(--text-muted);
    font-stretch: 112%;
    font-size: var(--fs-sm);
}

.matchup {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6) var(--space-4);
    align-items: start;
    padding-block: var(--space-7);
}

.matchup__team {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-2);
}

.matchup__team .team-mark {
    width: 88px;
    height: 88px;
    object-fit: contain;
    margin-bottom: var(--space-2);
}

/* Shield badge used when a team has no logo (or the opponent isn't known yet) */
.team-mark--tba {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    background: var(--gold-dark);
    clip-path: polygon(50% 0, 100% 14%, 100% 58%, 50% 100%, 0 58%, 0 14%);
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 2.5rem;
    line-height: 1;
    color: var(--black);
}

.matchup__team .team-mark--tba {
    width: 68px;               /* the crest art has transparent margins: match its visible size */
    height: 68px;
    margin-block: 10px calc(var(--space-2) + 10px);
    font-size: 2.25rem;
}

.fixture__team .team-mark--tba,
.result__team .team-mark--tba {
    width: 44px;
    height: 44px;
    font-size: 0.875rem;
}

.matchup__status {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    /* Sits on the diagonal split, so it carries its own ground: the gold edge passes
       behind the pill instead of running through the words. */
    background: rgba(5, 5, 5, 0.88);
    border: 1px solid var(--gold-dark);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-lg);
    line-height: 1.1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gold);
}

.matchup__name {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(1.375rem, 1rem + 1.8vw, 2.5rem);
    line-height: 0.95;
    text-transform: uppercase;
}

.matchup__side {
    color: var(--text-muted);
    font-stretch: 125%;
    font-weight: 600;
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.matchup__team.is-club .matchup__side {
    color: var(--gold);
}

.matchup__center {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
}

.matchup__vs {
    position: relative;
    z-index: 0;                     /* its own layer, so the halo below covers the split */
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(3rem, 2rem + 4vw, 6rem);
    line-height: 0.8;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--gold);
}

/* The word is outlined, not filled, so the diagonal split used to run straight through
   the letters. This soft ground fades the line out behind the word — no visible box. */
.matchup__vs::before {
    content: "";
    position: absolute;
    inset: -26% -22%;
    z-index: -1;
    background: radial-gradient(ellipse at center, rgba(5, 5, 5, 0.96) 40%, rgba(5, 5, 5, 0) 74%);
}

.matchup__impact {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.6em;
    height: 1.6em;
    margin: -0.8em 0 0 -0.8em;
    border: 2px solid var(--gold-light);
    transform: rotate(45deg);
    opacity: 0;
    pointer-events: none;
}

.matchup__when time {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
}

.matchup__date {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-lg);
    text-transform: uppercase;
}

.matchup__day {
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.matchup__time {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(2.25rem, 1.8rem + 2vw, 3.5rem);
    line-height: 1;
    color: var(--gold-light);
    font-variant-numeric: tabular-nums;
}

.matchup__venue {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.matchup__venue .icon {
    color: var(--gold);
}

.countdown {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 640px;
    margin-inline: auto;
    padding-top: var(--space-5);
}

.countdown__rule {
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--metal);
    transform-origin: left center;
}

.countdown__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
}

.countdown__unit + .countdown__unit {
    border-left: 1px solid var(--line-strong);
}

.countdown__value {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(3rem, 2rem + 5vw, 6rem);
    line-height: 0.9;
    font-variant-numeric: tabular-nums;
}

.countdown__label {
    font-stretch: 125%;
    font-weight: 600;
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
}

.nextgame__all {
    display: flex;
    width: fit-content;
    margin: var(--space-7) auto 0;
    background: rgba(5, 5, 5, 0.88);   /* same reason as the status pill above */
}

/* --------------------------------------------------------------------------
   THUNDERS PLAYER CARD
   Zones are fixed: number TL, position TR, photo centre (breaks the frame top),
   name plate bottom, physical data rail at the base. Sized with container units.
   -------------------------------------------------------------------------- */
.card-grid {
    display: grid;
    --col-gap: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
    /* At most 4 columns; each card at least 250px wide */
    grid-template-columns: repeat(auto-fill, minmax(max(min(100%, 250px), calc((100% - 3 * var(--col-gap)) / 4)), 1fr));
    gap: clamp(2.5rem, 2rem + 2vw, 3.5rem) var(--col-gap);
}

.pcard {
    --c: 7cqw;
    container-type: inline-size;
    position: relative;
    aspect-ratio: 5 / 7.4;
    padding-top: 12%;             /* headroom the photo breaks into */
    perspective: 1000px;
}

.pcard__body {
    --rx: 0;   /* tilt in degrees, driven by motion.js on fine pointers */
    --ry: 0;
    position: relative;
    height: 100%;
    transform: rotateX(calc(var(--rx) * 1deg)) rotateY(calc(var(--ry) * 1deg));
    transform-style: preserve-3d;
    transition: transform 400ms var(--ease-out);
}

/* Layered frame: metal edge → black gap → fine inner rule */
.pcard__frame {
    position: absolute;
    inset: 0;
    background: var(--metal-vertical);
    clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
    box-shadow: var(--shadow-deep);
}

.pcard__frame::before {
    content: "";
    position: absolute;
    inset: 2px;
    clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
    background:
        linear-gradient(calc(90deg - var(--slant)), transparent 44%, rgba(248, 185, 69, 0.2) 44.2%, rgba(248, 185, 69, 0.06) 58%, transparent 58.2%),
        radial-gradient(110% 60% at 65% 18%, rgba(248, 185, 69, 0.2), transparent 62%),
        url("../img/pattern-bolt.svg") center / 46cqw auto,
        linear-gradient(180deg, #1c1915 0%, #0a0908 72%);
}

.pcard__frame::after {
    content: "";
    position: absolute;
    inset: 3cqw;
    border: 1px solid rgba(119, 68, 13, 0.7);
    clip-path: polygon(0 0, calc(100% - var(--c) + 2cqw) 0, 100% calc(var(--c) - 2cqw), 100% 100%, calc(var(--c) - 2cqw) 100%, 0 calc(100% - var(--c) + 2cqw));
}

.pcard__number {
    position: absolute;
    z-index: 1;
    top: 5cqw;
    left: 7cqw;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 30cqw;
    line-height: 0.8;
    letter-spacing: -0.02em;
    background: var(--metal-vertical);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-variant-numeric: tabular-nums;
}

.pcard__pos {
    position: absolute;
    z-index: 3;
    top: 9cqw;
    right: -2cqw;
    padding: 1.6cqw 4cqw 1.4cqw 5.5cqw;
    background: var(--gold);
    color: var(--black);
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 7.5cqw;
    line-height: 1;
    letter-spacing: 0.04em;
    clip-path: polygon(3cqw 0, 100% 0, 100% 100%, 0 100%);
}

.pcard__edge {
    position: absolute;
    z-index: 1;
    left: 3.4cqw;
    bottom: 52%;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-stretch: 125%;
    font-weight: 600;
    font-size: 2.6cqw;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold-dark);
    white-space: nowrap;
}

/* Photo, default: an ordinary photo sits INSIDE the frame (left rail keeps the edge text free),
   its top-right corner cut to follow the frame, the bottom fading into the name plate. */
.pcard__photo {
    position: absolute;
    z-index: 1;
    top: 3cqw;
    left: 8cqw;
    right: 3cqw;
    bottom: 30%;
    overflow: hidden;
    clip-path: polygon(0 0, calc(100% - var(--c) + 1cqw) 0, 100% calc(var(--c) - 1cqw), 100% 100%, 0 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
}

.pcard__photo picture {
    display: block;
    width: 100%;
    height: 100%;
}

.pcard__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0%;      /* anchored to the top: heads are never cut, the extra falls behind the name plate */
    transition: transform var(--dur-slow) var(--ease-out);
}

/* Big number stays readable on top of a photo */
.pcard__number {
    z-index: 2;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.65));
}

/* Transparent cut-out (detected on upload): the player breaks out of the top of the frame. */
.pcard--cutout .pcard__photo {
    z-index: 2;
    top: -14cqw;
    left: 6cqw;
    right: 6cqw;
    bottom: 33%;
    overflow: visible;
    clip-path: none;
    transform-origin: 50% 100%;
    transition: transform var(--dur-slow) var(--ease-out);
    -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
}

.pcard--cutout .pcard__photo img {
    object-fit: contain;
    object-position: 50% 100%;
    filter: drop-shadow(var(--shadow-photo));
}

.pcard--cutout .pcard__number {
    z-index: 1;
    filter: none;
}

/* No photo yet: faded club crest in the photo area */
.pcard__photo.is-placeholder picture {
    display: grid;
    place-items: center;
}

.pcard__photo.is-placeholder img {
    width: 62%;
    height: auto;
    object-fit: contain;
    opacity: 0.18;
    filter: none;
}

.ccard__photo .ccard__crest {
    width: 70%;
    height: auto;
    margin: auto;
    opacity: 0.25;
    object-fit: contain;
}

/* Name plate with the bolt-slant top edge */
.pcard__plate {
    position: absolute;
    z-index: 3;
    left: 2px;
    right: 2px;
    bottom: 2px;
    padding: 12cqw 7cqw 5.5cqw;
}

.pcard__plate::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(10, 9, 8, 0.2) 0%, #0a0908 30%);
    clip-path: polygon(0 11cqw, 100% 1cqw, 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
}

.pcard__plate::after {
    content: "";
    position: absolute;
    top: 11cqw;
    left: 0;
    width: 101%;
    height: 2px;
    background: var(--metal);
    transform: rotate(-5.7deg);
    transform-origin: 0 0;
}

.pcard__name {
    display: flex;
    flex-direction: column;
    font-family: var(--font-display);
    line-height: 0.9;
    text-transform: uppercase;
}

.pcard__first {
    font-family: var(--font-body);
    font-stretch: 125%;
    font-weight: 600;
    font-size: max(0.75rem, 4.2cqw);
    letter-spacing: 0.2em;
    color: var(--gold);
    margin-bottom: 1cqw;
}

.pcard__last {
    font-weight: 900;
    font-size: 13cqw;
    letter-spacing: 0.005em;
    overflow-wrap: anywhere;
}

.pcard__role {
    display: flex;
    align-items: center;
    gap: 2cqw;
    margin-top: 1.5cqw;
    font-stretch: 112%;
    font-weight: 500;
    font-size: max(0.8125rem, 3.8cqw);
    color: var(--text-muted);
}

.pcard__role-alt {
    padding: 0.3cqw 1.5cqw;
    border: 1px solid var(--line-strong);
    font-size: max(0.6875rem, 3.2cqw);
    font-weight: 600;
    color: var(--text);
}

.pcard__meta {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    margin-top: 4cqw;
    border-top: 1px solid var(--line-strong);
}

.pcard__meta > div:not(.visually-hidden) {
    padding-top: 2.5cqw;
}

.pcard__meta > div:not(.visually-hidden) + div:not(.visually-hidden) {
    padding-left: 3cqw;
    border-left: 1px solid var(--line);
}

.pcard__meta dt {
    font-stretch: 125%;
    font-weight: 600;
    font-size: max(0.625rem, 2.5cqw);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-muted);
}

.pcard__meta dd {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: max(1.0625rem, 6.4cqw);
    line-height: 1.1;
    white-space: nowrap;
}

.pcard__stat dd {
    color: var(--gold-light);
}

/* Sheen that sweeps across the frame on hover */
.pcard__body::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
    background: linear-gradient(110deg, transparent 35%, rgba(253, 233, 103, 0.16) 48%, transparent 60%) no-repeat;
    background-size: 250% 100%;
    background-position: 130% 0;
    opacity: 0;
    transition: background-position 1s var(--ease-out), opacity var(--dur) ease;
}

/* Hover only on devices with a real pointer */
@media (hover: hover) and (pointer: fine) {
    .pcard:hover .pcard__body {
        transform: translateY(-8px) rotateX(calc(var(--rx) * 1deg)) rotateY(calc(var(--ry) * 1deg));
    }

    .pcard:hover .pcard__body::after {
        opacity: 1;
        background-position: -30% 0;
    }
}

/* --------------------------------------------------------------------------
   Coach card — horizontal staff credential
   -------------------------------------------------------------------------- */
.ccard {
    display: grid;
    grid-template-columns: minmax(110px, 36%) 1fr;
    background: var(--surface);
    border-top: 1px solid var(--line-strong);
}

.ccard__photo {
    position: relative;
    background: linear-gradient(180deg, var(--surface-3), var(--black));
    overflow: hidden;
}

.ccard__photo::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--metal-vertical);
}

.ccard__photo picture,
.ccard__photo img {
    width: 100%;
    height: 100%;
}

.ccard__photo img {
    object-fit: cover;
    object-position: 50% 15%;
    filter: grayscale(0.35) contrast(1.05);
}

.ccard__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-5) var(--space-4);
}

.ccard__role {
    font-stretch: 125%;
    font-weight: 600;
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--gold);
}

.ccard__name {
    font-weight: 500;
    font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem);
    line-height: 0.95;
    text-transform: uppercase;
}

.ccard__name span {
    display: block;
    font-weight: 900;
}

.ccard__bio {
    color: var(--text-body);
    font-size: var(--fs-sm);
    line-height: 1.55;
}

.ccard__team {
    margin-top: auto;
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Tabs & filters
   -------------------------------------------------------------------------- */
.tabs {
    display: flex;
    gap: var(--space-2);
    margin-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem);
    border-bottom: 1px solid var(--line-strong);
    overflow-x: auto;
    scrollbar-width: none;
}

.tabs__tab {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4) var(--space-4) 0;
    margin-right: var(--space-5);
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(1.625rem, 1.1rem + 2.4vw, 3rem);
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: var(--text-faint);
}

.tabs__tab:hover {
    color: var(--text);
}

.tabs__tab[aria-current="page"],
.tabs__tab[aria-selected="true"] {
    color: var(--text);
}

.tabs__tab[aria-current="page"]::after,
.tabs__tab[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: var(--space-4);
    bottom: -1px;
    height: 4px;
    background: var(--metal);
    clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}

.tabs__tab:focus-visible {
    outline-offset: -2px;
}

.tabs__count {
    font-family: var(--font-body);
    font-stretch: 125%;
    font-weight: 600;
    font-size: var(--fs-xs);
    color: var(--gold);
    padding-top: 0.25em;
}

.filter {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-7);
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.filter__item {
    --c: 8px;
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--space-4);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.0625rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: var(--text-muted);
    background: none;
    border: 0;
}

.filter__item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border: 1px solid var(--line-strong);
}

.filter__item:hover {
    color: var(--text);
}

.filter__item[aria-current="page"],
.filter__item[aria-pressed="true"] {
    color: var(--black);
}

.filter__item[aria-current="page"]::before,
.filter__item[aria-pressed="true"]::before {
    border-color: var(--gold);
    background: var(--gold);
    clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
}

/* --------------------------------------------------------------------------
   Fixtures (upcoming)
   -------------------------------------------------------------------------- */
.fixtures,
.results {
    display: grid;
    gap: var(--space-3);
}

.fixture {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-4) var(--space-5);
    align-items: center;
    padding: var(--space-5);
    background: var(--surface);
    border-left: 3px solid var(--line-strong);
}

.fixture:has(.fixture__tag.is-home) {
    border-left-color: var(--gold);
}

.fixture__date time {
    display: grid;
    justify-items: center;
    min-width: 64px;
    text-align: center;
    line-height: 1;
}

.fixture__day {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 3rem;
    line-height: 0.85;
}

.fixture__month {
    margin-top: var(--space-1);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.125rem;
    text-transform: uppercase;
    color: var(--gold);
}

.fixture__weekday {
    margin-top: var(--space-1);
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.fixture__teams {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
}

.fixture__team {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}

.fixture__team .team-mark {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.fixture__name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem);
    line-height: 1;
    text-transform: uppercase;
}

.fixture__team:not(.is-club) .fixture__name {
    color: var(--text);
}

.fixture__vs {
    font-stretch: 125%;
    font-weight: 600;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    color: var(--text-faint);
}

.fixture__meta {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--line);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.fixture__meta li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.fixture__meta .icon {
    color: var(--gold);
}

.fixture__tag {
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--line-strong);
    font-stretch: 125%;
    font-weight: 600;
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text);
}

.fixture__tag.is-home {
    border-color: var(--gold);
    color: var(--gold);
}

.fixture__squad {
    color: var(--text);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Results
   -------------------------------------------------------------------------- */
.result {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--surface);
}

.result__info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.result__final {
    padding: 0.2rem 0.55rem;
    background: var(--text);
    color: var(--black);
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 0.9375rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.2;
}

.result__final.is-pending {
    background: transparent;
    border: 1px solid var(--gold);
    color: var(--gold);
}

.result--pending .result__score {
    color: var(--text-faint);
}

.fixture__tag.is-notice {
    border-color: var(--danger);
    color: var(--danger);
}

.result__squad {
    color: var(--text);
    font-weight: 600;
}

.result__board {
    display: grid;
    gap: var(--space-2);
}

.result__team {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: var(--space-3);
    color: var(--text-faint);
}

.result__team .team-mark {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.result__name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.375rem;
    line-height: 1;
    text-transform: uppercase;
    color: var(--text-muted);
}

.result__score {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 2.5rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.result__team.is-winner .result__name,
.result__team.is-winner .result__score {
    color: var(--text);
}

.result__team.is-winner.is-club .result__score {
    color: var(--gold-light);
}

.result__outcome {
    font-stretch: 125%;
    font-weight: 600;
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
}

.result--w .result__outcome {
    color: var(--gold);
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form {
    display: grid;
    gap: var(--space-6);
}

.form__intro {
    margin: var(--space-3) 0 var(--space-6);
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.form__group {
    min-width: 0;
    padding: 0;
    border: 0;
}

.form__group legend {
    width: 100%;
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--line-strong);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-lg);
    text-transform: uppercase;
    color: var(--gold);
}

.form__grid {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;          /* hints sit under inputs, so paired inputs line up */
    gap: var(--space-5) var(--space-5);
}

.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.field__label {
    font-weight: 600;
    font-size: var(--fs-sm);
    color: var(--text);
}

.field__optional {
    margin-left: var(--space-1);
    font-weight: 400;
    color: var(--text-muted);
}

.field__hint {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.field input:not([type="checkbox"]),
.field select,
.field textarea {
    width: 100%;
    min-height: 52px;
    padding: 0.8rem 1rem;
    background: #0c0b0a;
    border: 1px solid var(--line-strong);
    border-bottom-color: var(--gold-dark);
    border-radius: var(--radius-input);
    color: var(--text);
    font-size: 1rem;            /* ≥16px: no iOS zoom */
    line-height: 1.4;
    transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}

.field textarea {
    min-height: 150px;
    resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
    color: var(--text-faint);
}

.field input:hover,
.field select:hover,
.field textarea:hover {
    border-color: var(--text-faint);
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 0;
    border-color: var(--gold);
    background: #100f0d;
}

.field input[type="date"] {
    color-scheme: dark;
}

.field__select {
    position: relative;
}

.field__select select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 3rem;
    cursor: pointer;
}

.field__select::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1.1rem;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--gold);
    border-bottom: 2px solid var(--gold);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

.field__select option {
    background: var(--surface);
    color: var(--text);
}

.field__check {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: var(--space-3);
    align-items: start;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.field__check label {
    cursor: pointer;
}

.field__check a {
    display: inline-block;
    margin-left: var(--space-1);
}

.field__check input {
    appearance: none;
    -webkit-appearance: none;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin: 0;
    background: #0c0b0a;
    border: 1.5px solid var(--gold-dark);
    cursor: pointer;
}

.field__check input::after {
    content: "";
    width: 6px;
    height: 12px;
    margin-top: -3px;
    border-right: 2.5px solid var(--black);
    border-bottom: 2.5px solid var(--black);
    transform: rotate(45deg) scale(0);
    transition: transform var(--dur-fast) var(--ease-out);
}

.field__check input:checked {
    background: var(--gold);
    border-color: var(--gold);
}

.field__check input:checked::after {
    transform: rotate(45deg) scale(1);
}

.field__error {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--danger);
}

.field__error:empty {
    display: none;
}

.field.has-error input:not([type="checkbox"]),
.field.has-error select,
.field.has-error textarea,
.field.has-error .field__check input {
    border-color: var(--danger);
}

.form__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
}

.form__status {
    margin-bottom: var(--space-6);
    padding: var(--space-5);
    background: var(--surface);
    border-left: 4px solid var(--gold);
}

.form__status.is-error {
    border-left-color: var(--danger);
}

.form__status:focus {
    outline: none;
}

.form__status:focus-visible {
    outline: 2px solid var(--gold-light);
}

.form__status-title {
    font-weight: 700;
    font-size: var(--fs-md);
}

.form__status.is-success .form__status-title::before {
    content: "";
    display: inline-block;
    width: 0.55em;
    height: 1em;
    margin-right: 0.6em;
    border-right: 3px solid var(--gold);
    border-bottom: 3px solid var(--gold);
    transform: rotate(45deg) translateY(-0.15em);
}

.form__status-list {
    margin-top: var(--space-3);
    display: grid;
    gap: var(--space-1);
    font-size: var(--fs-sm);
}

.form__status-list a {
    color: var(--danger);
}

/* --------------------------------------------------------------------------
   Sponsors wall
   -------------------------------------------------------------------------- */
.sponsor-wall {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
}

.sponsor-wall__item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--black);
    border: 1px solid var(--line);
    transition: border-color var(--dur) ease;
}

.sponsor-wall__item:hover,
.sponsor-wall__item:focus-within {
    border-color: var(--gold-dark);
}

/* More than five sponsors: a continuous right-to-left strip. The list is rendered
   twice, so moving the track by half its width loops without a seam. */
.sponsor-marquee {
    --marquee-gap: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.sponsor-marquee__track {
    display: flex;
    width: max-content;
    animation: sponsor-marquee 40s linear infinite;
}

.sponsor-marquee:hover .sponsor-marquee__track,
.sponsor-marquee:focus-within .sponsor-marquee__track {
    animation-play-state: paused;
}

.sponsor-marquee__list {
    display: flex;
    gap: var(--marquee-gap);
    padding-right: var(--marquee-gap);
    margin: 0;
    list-style: none;
}

.sponsor-marquee .sponsor-wall__item {
    flex: 0 0 clamp(160px, 12rem + 2vw, 230px);
}

@keyframes sponsor-marquee {
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .sponsor-marquee {
        overflow-x: auto;
        mask-image: none;
    }

    .sponsor-marquee__track {
        animation: none;
    }

    .sponsor-marquee__list[aria-hidden] {
        display: none;
    }
}

.sponsor-wall__item > a,
.sponsor-wall__item > picture {
    display: block;
}

.sponsor-wall__item > a {
    text-decoration: none;
}

.sponsor-wall__item picture {
    display: grid;
    place-items: center;
    padding: clamp(1.25rem, 1rem + 2vw, 2.5rem) var(--space-5) var(--space-3);
}

.sponsor-wall__logo {
    width: 100%;
    max-width: 220px;
    height: auto;
    opacity: 0.78;
    transition: opacity var(--dur) ease;
}

.sponsor-wall__item:hover .sponsor-wall__logo {
    opacity: 1;
}

.sponsor-wall__tier {
    display: block;
    padding: 0 var(--space-4) var(--space-4);
    text-align: center;
    font-stretch: 125%;
    font-weight: 600;
    font-size: 0.6875rem;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Join / recruiting CTA
   -------------------------------------------------------------------------- */
.join {
    position: relative;
    isolation: isolate;
    padding-block: var(--section-y);
    overflow: hidden;
    border-block: 1px solid var(--line);
}

.join__media {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.join__media {
    background:
        radial-gradient(ellipse 50% 90% at 100% 50%, rgba(253, 233, 103, 0.12), transparent 70%),
        var(--surface);
}

.join__media::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(248, 185, 69, 0.13) 1px, transparent 1.6px);
    background-size: 14px 14px;
    -webkit-mask-image: linear-gradient(270deg, #000 0%, transparent 60%);
    mask-image: linear-gradient(270deg, #000 0%, transparent 60%);
}

.join__media::after {
    content: "";
    position: absolute;
    inset: 0 0 0 auto;
    width: 38%;
    background: linear-gradient(180deg, rgba(248, 185, 69, 0.1), rgba(248, 185, 69, 0));
    clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
}

.join__inner {
    display: grid;
    gap: var(--space-8);
}

.join__title {
    font-weight: 900;
    font-size: var(--fs-3xl);
    line-height: var(--lh-tight);
    text-transform: uppercase;
}

.join__lead {
    max-width: 46ch;
    margin-top: var(--space-5);
    font-size: var(--fs-md);
    color: var(--text-body);
}

.join__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.join__steps,
.steps {
    counter-reset: step;
    display: grid;
    gap: 0;
}

.join__steps li,
.steps li {
    counter-increment: step;
    position: relative;
    display: grid;
    gap: var(--space-1);
    padding: var(--space-5) 0 var(--space-5) 4.25rem;
    border-top: 1px solid var(--line-strong);
}

.join__steps li::before,
.steps li::before {
    content: counter(step, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: var(--space-4);
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 2.75rem;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px var(--gold);
}

.join__steps strong,
.steps strong {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-lg);
    text-transform: uppercase;
    line-height: 1.1;
}

.join__steps span,
.steps span {
    color: var(--text-body);
    font-size: var(--fs-sm);
}

/* --------------------------------------------------------------------------
   Social band
   -------------------------------------------------------------------------- */
.social-band {
    padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
    background: var(--surface);
    border-top: 1px solid var(--line);
}

.social-band__inner {
    display: grid;
    gap: var(--space-6);
    align-items: center;
}

.social-band__title {
    font-weight: 900;
    font-size: var(--fs-xl);
    text-transform: uppercase;
    line-height: 0.95;
    margin-bottom: var(--space-3);
}

.social-band p {
    color: var(--text-body);
    max-width: 48ch;
}

.social-band__inner > div {
    max-width: 30rem;
}

/* Channel cards: one per social account in data/settings.php */
.channels {
    display: grid;
    gap: var(--space-3);
    list-style: none;
    margin: 0;
    padding: 0;
}

.channel {
    position: relative;
    container-type: inline-size;
    display: grid;
    align-content: start;
    gap: var(--space-1);
    height: 100%;
    padding: var(--space-5);
    background: var(--black);
    border: 1px solid var(--line-strong);
    clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
    color: var(--text);
    text-decoration: none;
    transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}

.channel:hover {
    color: var(--text);
    border-color: var(--gold);
    background: var(--surface-2);
}

.channel__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.channel__icon {
    width: 30px;
    height: 30px;
    color: var(--gold);
}

.channel__arrow {
    width: 20px;
    height: 20px;
    color: var(--text-faint);
    transform: rotate(-45deg);
    transition: transform var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.channel:hover .channel__arrow {
    color: var(--gold);
    transform: rotate(-45deg) translateX(3px);
}

.channel__name {
    font-weight: 700;
    font-size: var(--fs-sm);
    color: var(--gold);
}

.channel__handle {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: min(var(--fs-lg), 13cqw);   /* shrinks with the card so the handle stays on one line */
    line-height: 1.1;
    white-space: nowrap;
}

.channel__desc {
    margin-top: var(--space-2);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

@media (min-width: 640px) {
    .channels {
        grid-template-columns: repeat(3, 1fr);
    }
}

.social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--line-strong);
    color: var(--text);
    text-decoration: none;
}

.social__link:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.social__link .icon {
    width: 20px;
    height: 20px;
}

.social--large .social__link {
    padding: 0 var(--space-4);
    font-weight: 600;
    font-size: var(--fs-sm);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
    position: relative;
    padding-top: var(--space-9);
    background: var(--black);
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.site-footer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: var(--metal);
    opacity: 0.7;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7) var(--space-6);
    padding-bottom: var(--space-8);
}

.site-footer__brand {
    grid-column: 1 / -1;
    display: grid;
    gap: var(--space-5);
    align-content: start;
}

.site-footer__crest {
    width: 104px;
}

.site-footer__about {
    max-width: 36ch;
}

.site-footer__title {
    margin-bottom: var(--space-4);
    font-family: var(--font-body);
    font-stretch: 125%;
    font-weight: 600;
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--gold);
}

.site-footer__col ul {
    list-style: none;
    padding: 0;
}

.site-footer__col ul:not(.social) {
    display: grid;
    gap: var(--space-2);
}

.site-footer__col a {
    display: inline-block;
    padding-block: 0.3rem;
    color: var(--text-muted);
    text-decoration: none;
}

.site-footer__col a:hover {
    color: var(--text);
}

.site-footer__col .social__link {
    display: inline-flex;          /* beats `.site-footer__col a { display: inline-block }` so the icon stays centered */
    padding: 0;
    color: var(--text);
}

.site-footer__contact {
    margin-bottom: var(--space-5);
}

.site-footer__contact li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.site-footer__contact .icon {
    margin-top: 0.45rem;
    color: var(--gold);
}

.site-footer__contact span {
    padding-block: 0.3rem;
}

.site-footer__base {
    border-top: 1px solid var(--line);
    padding-block: var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom));
}

.site-footer__base-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2) var(--space-5);
    font-size: var(--fs-xs);
}

/* --------------------------------------------------------------------------
   Home gallery mosaic & gallery masonry
   -------------------------------------------------------------------------- */
.mosaic {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(140px, 30vw, 220px);
    gap: var(--space-2);
}

.mosaic__item:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

.mosaic__item:last-child {
    grid-column: span 2;
}

.mosaic__item a {
    position: relative;
    display: block;
    height: 100%;
    overflow: hidden;
    background: var(--surface);
}

/* The collage above is cut for six photos. With fewer, drop the spans and give every
   tile the same 3:2 box, so the row reads as one line instead of a broken grid. */
.mosaic.mosaic--even {
    grid-auto-rows: auto;
    /* Tiles keep a sane size and the short row sits centred instead of hugging the left. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 420px));
    justify-content: center;
}

.mosaic--even .mosaic__item,
.mosaic--even .mosaic__item:first-child,
.mosaic--even .mosaic__item:last-child,
.mosaic--even .mosaic__item:nth-child(4),
.mosaic--even .mosaic__item:nth-child(5),
.mosaic--even .mosaic__item:nth-child(6) {
    grid-column: auto;
    grid-row: auto;
}

.mosaic--even .mosaic__item a {
    height: auto;
    aspect-ratio: 3 / 2;
}

.mosaic__item picture,
.mosaic__item img {
    width: 100%;
    height: 100%;
}

.mosaic__item img {
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
}

.mosaic__caption,
.masonry__caption {
    position: absolute;
    inset: auto 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-6) var(--space-4) var(--space-3);
    background: linear-gradient(0deg, rgba(5, 5, 5, 0.92), rgba(5, 5, 5, 0));
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.125rem;
    text-transform: uppercase;
    line-height: 1.1;
}

.masonry__caption time {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-xs);
    text-transform: none;
    color: var(--text-muted);
}

/* An even grid rather than a waterfall: every photo gets the same 4:5 tile, so rows line
   up whatever the uploads' own proportions are. 4:5 is the format the club posts in. */
.masonry {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: var(--space-3);
}

.masonry__item {
    margin-bottom: 0;
}

.masonry__link {
    position: relative;
    display: block;
    height: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--surface);
}

.masonry__link picture {
    display: block;
    width: 100%;
    height: 100%;
}

.masonry__link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .mosaic__item a:hover img,
    .masonry__link:hover img {
        transform: scale(1.04);
    }

    .masonry__caption {
        opacity: 0;
        transform: translateY(8px);
        transition: opacity var(--dur) ease, transform var(--dur) var(--ease-out);
    }

    .masonry__link:hover .masonry__caption,
    .masonry__link:focus-visible .masonry__caption {
        opacity: 1;
        transform: none;
    }
}

.masonry__link:focus-visible {
    outline-offset: -3px;
}

/* --------------------------------------------------------------------------
   Lightbox (native <dialog>)
   -------------------------------------------------------------------------- */
.lightbox {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
}

.lightbox {
    overscroll-behavior: contain;
}

.lightbox::backdrop {
    background: rgba(5, 5, 5, 0.95);
}

.lightbox[open] {
    animation: fade-in var(--dur) ease;
}

.lightbox__stage {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    padding: calc(56px + var(--space-4)) var(--space-3) var(--space-4);
}

.lightbox__figure {
    display: grid;
    gap: var(--space-3);
    justify-items: center;
    max-width: 100%;
    max-height: 100%;
}

.lightbox__img {
    max-width: min(100%, 1400px);
    max-height: calc(100dvh - 180px);
    width: auto;
    height: auto;
    object-fit: contain;
    background: var(--surface);
}

.lightbox__caption {
    display: flex;
    gap: var(--space-4);
    align-items: baseline;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-md);
    text-transform: uppercase;
}

.lightbox__count {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.lightbox__btn {
    position: absolute;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    background: rgba(17, 16, 15, 0.9);
    border: 1px solid var(--line-strong);
    color: var(--gold);
}

.lightbox__btn:hover {
    border-color: var(--gold);
    color: var(--gold-light);
}

.lightbox__btn .icon {
    width: 22px;
    height: 22px;
}

.lightbox__btn--close { top: var(--space-3); right: var(--space-3); }
.lightbox__btn--prev { left: var(--space-3); bottom: var(--space-4); }
.lightbox__btn--next { right: var(--space-3); bottom: var(--space-4); }

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Entry announcement
   -------------------------------------------------------------------------- */
/* The dialog itself is the full-viewport backdrop area; the panel is centred inside it,
   so a click that misses the panel lands on the dialog and closes it (see js/promo.js).
   `display` is set only on [open], otherwise it would override the browser's own
   `display: none` for a closed dialog and the announcement would sit in the page. */
.promo {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: var(--space-4);
    border: 0;
    background: transparent;
    color: var(--text);
    overscroll-behavior: contain;
}

.promo[open] {
    display: grid;
    place-items: center;
}

.promo::backdrop {
    background: rgba(5, 5, 5, 0.9);
}

.promo__panel:focus {
    outline: none;
}

.promo__panel {
    position: relative;
    width: min(100%, 540px);
    max-height: calc(100dvh - var(--space-6));
    overflow-y: auto;
    padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
    background:
        radial-gradient(120% 70% at 50% 0%, rgba(248, 185, 69, 0.14), transparent 70%),
        var(--surface);
    border: 1px solid var(--line-strong);
    border-top: 3px solid var(--gold);
}

.promo__close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    background: rgba(5, 5, 5, 0.55);
    border: 1px solid var(--line-strong);
    color: var(--text-muted);
    transition: color var(--dur) ease, border-color var(--dur) ease;
}

.promo__close:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.promo__close .icon {
    width: 20px;
    height: 20px;
}

/* Room for the close button, so a long headline never runs under it. */
.promo__kicker {
    margin-right: 52px;
    color: var(--gold);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-sm);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.promo__title {
    margin-top: var(--space-2);
    font-weight: 900;
    font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
    line-height: 1;
    text-transform: uppercase;
}

.promo__lead {
    margin-top: var(--space-4);
    color: var(--text-body);
    font-size: var(--fs-sm);
    line-height: 1.6;
}

/* The button and the opt-out sit on one line while there is room, and the opt-out keeps
   its distance: it must never be the thing a thumb reaches for first. */
.promo__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-5);
    margin-top: var(--space-5);
}

.promo__again {
    grid-template-columns: 22px 1fr;
    gap: var(--space-2);
    align-items: center;
}

.promo__again input {
    width: 22px;
    height: 22px;
}

.promo__again label {
    font-size: var(--fs-sm);
}

@media (prefers-reduced-motion: no-preference) {
    .promo[open] .promo__panel {
        animation: promo-in 420ms var(--ease-out) both;
    }

    @keyframes promo-in {
        from { opacity: 0; transform: translateY(14px); }
        to   { opacity: 1; transform: none; }
    }
}

/* --------------------------------------------------------------------------
   Misc
   -------------------------------------------------------------------------- */
.facts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5) var(--space-5);
    margin-block: var(--space-6);
}

.facts > div {
    padding-top: var(--space-3);
    border-top: 1px solid var(--line-strong);
}

.facts dt {
    font-stretch: 125%;
    font-weight: 600;
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-muted);
}

.facts dd {
    margin-top: var(--space-1);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-lg);
    text-transform: uppercase;
    line-height: 1.1;
}

.schedule-list {
    display: grid;
}

.schedule-list li {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--line);
}

.schedule-list strong {
    font-weight: 600;
}

.schedule-list span {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.ticks {
    display: grid;
    gap: var(--space-3);
}

.ticks li {
    position: relative;
    padding-left: 1.75rem;
}

.ticks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 12px;
    height: 12px;
    background: var(--gold);
    clip-path: polygon(60% 0, 10% 58%, 45% 58%, 35% 100%, 90% 38%, 55% 38%);
}

.empty {
    padding: var(--space-6);
    background: var(--surface);
    border-left: 3px solid var(--gold-dark);
    color: var(--text-muted);
}

.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Extra height so the scroll drift in motion.js never shows an edge. */
.join__media {
    inset: -8% 0;
}

/* --------------------------------------------------------------------------
   "Coming soon" page (sections switched off in data/settings.php)
   -------------------------------------------------------------------------- */
.soon {
    align-items: center;
    min-height: clamp(560px, 88svh, 860px);
}

.soon__inner {
    width: 100%;
}

.soon__section {
    margin-top: var(--space-6);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-lg);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--gold);
}

.page-hero.soon .soon__title {   /* beats page-specific title sizes (e.g. .page-news) */
    margin-top: var(--space-2);
    max-width: none;
    font-size: clamp(4rem, 1.5rem + 11vw, 11rem);
}

.soon__lead {
    max-width: 46ch;
}

.soon__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.soon .page-hero__media picture {
    width: clamp(260px, 46vw, 680px);
}

.soon .page-hero__mark {
    opacity: 0.13;
}

@media (max-width: 699px) {
    .page-hero__media picture,
    .soon .page-hero__media picture {
        top: calc(var(--header-h) + var(--space-4));
        right: calc(var(--gutter) * -1);
        width: 62vw;
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   Instagram videos in the gallery: play badge on the thumbnail, player in the lightbox
   -------------------------------------------------------------------------- */
.masonry__play,
.mosaic__item a.is-video::after {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: clamp(52px, 14cqw, 72px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(5, 5, 5, 0.62);
    border: 2px solid var(--gold);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    transition: transform var(--dur) var(--ease-out), background-color var(--dur);
}

.mosaic__item a.is-video::after {
    content: "";
    width: 60px;
}

/* the triangle */
.masonry__play::after,
.mosaic__item a.is-video::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 0;
    height: 0;
    transform: translate(-35%, -50%);
    border-style: solid;
    border-width: 11px 0 11px 18px;
    border-color: transparent transparent transparent var(--gold-light);
    pointer-events: none;
}

.masonry__item.is-video .masonry__link { container-type: inline-size; }

@media (hover: hover) and (pointer: fine) {
    .masonry__link:hover .masonry__play { transform: translate(-50%, -50%) scale(1.08); }
}

.lightbox__video {
    max-width: min(100%, 1400px);
    max-height: calc(100dvh - 180px);
    width: auto;
    height: auto;
    background: #000;
}

.lightbox__source {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--fs-sm);
    text-transform: none;
    color: var(--gold-light);
}

.lightbox__source .icon { width: 18px; height: 18px; }

/* Turnstile box: sits with the submit button, left-aligned like the fields above it */
.form__captcha {
    margin-top: var(--space-6);
}

.form__captcha .cf-turnstile {
    min-height: 65px;
}