/* WE RUN DOHA — public landing page. Self-contained, no Bootstrap: keeps this page light. */

@font-face {
    font-family: 'PSG';
    src: url('/fonts/PSG-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'PSG';
    src: url('/fonts/PSG-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'PSG Light';
    src: url('/fonts/PSG-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Bebas Neue';
    src: url('/fonts/BebasNeue-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --navy: #0A1B3D;
    --navy-deep: #060F26;
    --red: #DA0212;
    --red-deep: #A70210;
    --white: #FFFFFF;
    --ink: #E8ECF5;
    --muted: #9AA6C3;
    --line: rgba(255, 255, 255, 0.12);
    --muted-on-light: #5A6584;
    --line-on-light: rgba(10, 27, 61, 0.12);
    --container: 100vw;
    --gap: clamp(1.5rem, 4vw, 3.5rem);
    --radius: 14px;
    --ease: cubic-bezier(.22, 1, .36, 1);
    --marquee-h: clamp(2.75rem, 3.6vw, 4.4rem);
    /* Pulls a container child out to the true viewport edge: cancels the gutter,
       plus the container's centring margin once the viewport exceeds --container. */
    --gutter: clamp(1.5rem, 5vw, 5rem);
    --bleed-end: min(
        calc(-1 * var(--gutter)),
        calc((var(--container) - 100vw) / 2 - var(--gutter))
    );
}

* { box-sizing: border-box; }

html {
    overflow-x: hidden;
    width: 100%;
}

.wrd {
    margin: 0;
    width: 100%;
    font-family: 'PSG Light', 'PSG', Arial, sans-serif;
    background: var(--white);
    color: var(--navy);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
    overflow-y: visible;
}

.wrd img { max-width: 100%; display: block; }

.wrd h1, .wrd h2, .wrd h3 {
    font-family: 'PSG', Arial, sans-serif;
    font-weight: 700;
    font-style: italic;
    line-height: 1.05;
    margin: 0 0 .5em;
    text-transform: uppercase;
    letter-spacing: .01em;
}

.wrd h2 {
    font-family: 'Bebas Neue', 'PSG', Arial, sans-serif;
    font-style: italic;
}

.wrd a { color: inherit; text-decoration: none; }

.wrd .container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: clamp(1rem, 2.5vw, 2.5rem);
}

.wrd .eyebrow {
    /* Explicit 'PSG' (not the inherited 'PSG Light' stack): 'PSG Light' only
       registers a 300 face, so font-weight:700 here had nothing bold to match
       and rendered at 300 regardless. 'PSG' has a real Bold (700) face. */
    font-family: 'PSG', Arial, sans-serif;
    color: var(--red);
    font-weight: 700;
    letter-spacing: .12em;
    font-size: clamp(.85rem, 1.1vw, 1.5rem);
    text-transform: uppercase;
    margin-bottom: .5rem;
    display: block;
}
.wrd .eyebrow.is-visible { font-weight: 700; }

.wrd .section-head-center { text-align: center; }

.wrd .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: var(--red);
    color: var(--white);
    font-family: 'PSG', Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: clamp(1rem, 1.3vw, 1.4rem);
    padding: clamp(1rem, 1.6vw, 1.4rem) clamp(1.5rem, 2.2vw, 2.75rem);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: transform .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease);
    box-shadow: 0 8px 24px -8px rgba(218, 2, 18, .55);
}
.wrd .btn:hover { background: var(--red-deep); transform: translateY(-2px); }
.wrd .btn:active { transform: translateY(0); }
.wrd .btn-outline {
    background: transparent;
    border: 1px solid var(--line);
    box-shadow: none;
}
.wrd .btn-outline:hover { background: var(--line); }
.wrd .btn-square {
    border-radius: 0;
    box-shadow: none;
    padding: .85rem 2.75rem;
}

/* ---------- Nav ---------- */
.wrd .site-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: linear-gradient(90deg, #14336e 0%, var(--navy-deep) 100%);
    border-bottom: 1px solid var(--line);
    color: var(--ink);
}
.wrd .site-nav .bar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    gap: 1rem;
    padding-block: .75rem;
}
.wrd .site-nav .brand {
    display: flex;
    align-items: center;
    white-space: nowrap;
}
.wrd .site-nav .brand-logo {
    height: clamp(36px, 3.5vw, 72px);
    width: auto;
    margin: .5rem;
}
.wrd .site-nav .links {
    display: none;
    justify-self: center;
    gap: 1.5rem;
    font-size: clamp(.8rem, .9vw, 1.05rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.wrd .site-nav .links a { opacity: .8; transition: opacity .2s; }
.wrd .site-nav .links a:hover { opacity: 1; }
@media (min-width: 900px) {
    .wrd .site-nav .links { display: flex; }
}
.wrd .site-nav .right { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; }
.wrd .nav-register-btn {
    font-size: clamp(.75rem, .85vw, .95rem);
    padding: .6rem clamp(1rem, 1.4vw, 1.6rem);
    box-shadow: none;
    white-space: nowrap;
}

/* Hamburger toggle: only reachable path to nav links below 900px, where the
   inline nav is hidden — without it the links are unreachable on phones/tablets. */
.wrd .site-nav .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    flex: none;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--ink);
}
@media (min-width: 900px) {
    .wrd .site-nav .nav-toggle { display: none; }
}
.wrd .site-nav .nav-toggle span,
.wrd .site-nav .nav-toggle span::before,
.wrd .site-nav .nav-toggle span::after {
    display: block;
    width: 1.5rem;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.wrd .site-nav .nav-toggle span { position: relative; }
.wrd .site-nav .nav-toggle span::before,
.wrd .site-nav .nav-toggle span::after {
    content: '';
    position: absolute;
    left: 0;
}
.wrd .site-nav .nav-toggle span::before { top: -7px; }
.wrd .site-nav .nav-toggle span::after { top: 7px; }
.wrd .site-nav.nav-open .nav-toggle span { background: transparent; }
.wrd .site-nav.nav-open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
.wrd .site-nav.nav-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); }

/* Mobile/tablet nav drawer: below 900px the inline .links block is display:none
   (see the min-width:900px rule above), so opening it needs its own layout —
   dropped below the bar as a full-width panel instead of squeezed inline. */
@media (max-width: 899.98px) {
    .wrd .site-nav .bar {
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .wrd .site-nav.nav-open .links {
        display: flex;
        flex-direction: column;
        position: absolute;
        inset-inline: 0;
        top: 100%;
        padding: 1.25rem clamp(1rem, 5vw, 2.5rem) 1.5rem;
        gap: 1.1rem;
        background: var(--navy-deep);
        border-top: 1px solid var(--line);
        box-shadow: 0 16px 32px -16px rgba(0, 0, 0, .5);
    }
    .wrd .site-nav.nav-open .links a {
        opacity: 1;
        font-size: 1.05rem;
        padding-block: .25rem;
    }
}

.wrd .countdown-banner {
    background: var(--navy-deep);
    border-bottom: 1px solid var(--line);
    padding-block: clamp(1.75rem, 3.5vw, 3rem);
}
.wrd .countdown-banner-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.wrd .countdown-banner-label {
    text-transform: uppercase;
    color: var(--red);
    font-family: 'PSG', Arial, sans-serif;
    font-weight: 700;
    letter-spacing: .12em;
    font-size: clamp(.85rem, 1.1vw, 1.2rem);
}
.wrd .countdown {
    display: flex;
    align-items: center;
}
.wrd .countdown .units {
    display: flex;
    gap: clamp(.5rem, 1.2vw, 1rem);
}
.wrd .countdown .unit {
    background: #2E3157;
    padding: clamp(.6rem, 1.2vw, 1.1rem) clamp(.75rem, 1.6vw, 1.5rem);
    font-family: 'PSG', Arial, sans-serif;
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.1;
    min-width: 1.6em;
    text-align: center;
    color: var(--white);
    border-radius: 8px;
}
/* Seconds box is de-emphasised in the design: darker fill, dimmer digits. */
.wrd .countdown .unit:last-child {
    background: #232544;
    color: #9497D6;
}
.wrd .countdown .unit-label {
    display: block;
    font-family: 'PSG Light', Arial, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: clamp(.55rem, .7vw, .75rem);
    margin-top: .35rem;
}
@media (max-width: 699.98px) {
    .wrd .countdown .units { gap: .4rem; }
    .wrd .countdown .unit { padding: .5rem .6rem; }
}
/* Digits sit in their own span so scaleY stretches only the glyphs — scaling the
   .unit box instead would stretch its background and overflow the nav bar. */
.wrd .countdown .unit .num {
    display: inline-block;
    transform: scaleY(1.1);
}

/* ---------- Hero ---------- */
.wrd .hero {
    position: relative;
    width: 100%;
    aspect-ratio: 1.9 / 1;
    /* Never taller than the viewport below the sticky nav, so the hero cannot
       push the rest of the page off-screen on short displays. */
    max-height: calc(100vh - 68px);
    max-height: calc(100svh - 68px);
    min-height: 420px;
    overflow: hidden;
    background: var(--navy);
}
.wrd .hero .hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
.wrd .hero .hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .6s ease;
}
.wrd .hero .hero-video.hero-video--ready {
    opacity: 1;
}
.wrd .hero .hero-bg-mobile,
.wrd .hero .hero-video-mobile {
    display: none;
}
/* Wordmark and caption scale together off the hero centre, so pulling the group
   in keeps their relative alignment exactly as the design has it. */
.wrd .hero-stage {
    position: absolute;
    inset: 0;
    transform: scale(.84);
    transform-origin: 50% 50%;
}
/* Box is placed on the design's own measurements: DOHA runs 10.9%-94.1% of the
   hero width and the WERUN cap line sits at 13.4% of its height. The art fills
   94.8% of the SVG (the rest is the year's gutter), hence the 87.8% box width.
   object-fit keeps it undistorted when max-height clamps the hero on short
   viewports — it shrinks in place instead of overflowing the frame. */
.wrd .hero-wordmark-wrap {
    position: absolute;
    left: 11%;
    top: 13.4%;
    width: 87.8%;
    height: 81.9%;
    z-index: 1;
    opacity: .88;
    pointer-events: none;
}
.wrd .hero-wordmark {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left top;
}
.wrd .hero-caption {
    position: absolute;
    left: 13.4%;
    top: 42%;
    transform: translateY(-50%);
    /* Stops short of the W of WERUN, which starts at ~42% of the hero width. */
    max-width: 28%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1.1rem;
}
.wrd[dir="rtl"] .hero-caption { left: auto; right: 13.4%; }
.wrd .hero-caption .btn-ribbon { align-self: flex-end; }
@media (max-width: 700px) {
    .wrd .hero { aspect-ratio: auto; min-height: clamp(380px, 125vw, 520px); max-height: none; }
    .wrd .hero-stage {
        position: absolute;
        inset: 0;
        transform: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-inline: 8%;
        gap: .5rem;
    }
    .wrd .hero-wordmark-wrap { position: static; width: 100%; height: auto; }
    .wrd .hero-wordmark { height: auto; }
    .wrd .hero-caption { position: static; max-width: none; transform: none; }
    /* Only swap to the mobile asset when the admin actually uploaded one — otherwise the
       desktop image/video keeps rendering (scaled by the rules above) as the fallback. */
    .wrd .hero.hero--mobile-image .hero-bg-desktop { display: none; }
    .wrd .hero .hero-bg-mobile { display: block; }
    .wrd .hero.hero--mobile-video .hero-video-desktop { display: none; }
    .wrd .hero .hero-video-mobile { display: block; }
}
.wrd .hero .subtitle {
    font-family: 'PSG', Arial, sans-serif;
    font-style: italic;
    font-size: clamp(.85rem, 1.33vw, 1.6rem);
    color: var(--white);
    text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: end;
    line-height: 1.3;
}
.wrd .hero .subtitle .line-1 { font-weight: 400; letter-spacing: 1px; }
.wrd .hero .subtitle .line-2 { font-weight: 700; }
.wrd .btn-ribbon {
    /* clip-path skews the shape only — the design's button text baseline stays
       upright even though the button itself is a slanted parallelogram. */
    border-radius: 0;
    clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
    font-style: italic;
    font-size: clamp(.8rem, 1.4vw, 1.7rem);
    padding: clamp(.7rem, 1.35vw, 1.2rem) clamp(1.1rem, 1.9vw, 1.75rem);
}

/* ---------- Marquee ---------- */
/* In-flow band: the design runs it under the hero and again between the schedule
   and the register form, not pinned to the viewport. */
.wrd .marquee {
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--marquee-h);
    background: var(--red);
    color: var(--white);
    overflow: hidden;
    white-space: nowrap;
    font-family: 'PSG', Arial, sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: clamp(1.1rem, 1.35vw, 1.6rem);
    text-transform: uppercase;
    letter-spacing: .12em;
}
.wrd .marquee .track {
    display: inline-flex;
    gap: 2.5rem;
    animation: wrd-marquee 22s linear infinite;
}
/* scaleY sits on the inner spans, not .track — .track's transform carries the
   scroll animation and would be overwritten. */
.wrd .marquee .track span {
    display: inline-flex;
    gap: 2.5rem;
    transform: scaleY(1.35);
}
@keyframes wrd-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .wrd .marquee .track { animation: none; }
}

/* ---------- Sponsor strip ---------- */
.wrd .sponsor-strip { background: #004070; }
.wrd .sponsor-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1.25rem, 3vw, 3rem);
    padding-block: 1.1rem;
}
.wrd .sponsor-logo { display: flex; align-items: center; }
.wrd .sponsor-logo img {
    height: clamp(26px, 2.4vw, 38px);
    width: auto;
    object-fit: contain;
}

/* ---------- Sections ---------- */
.wrd section.block { padding-block: clamp(3rem, 8vw, 6rem); position: relative; }
.wrd .split {
    display: grid;
    gap: var(--gap);
    align-items: center;
}
.wrd #event .eyebrow {
    font-size: clamp(.85rem, 1.1vw, 1.5rem);
    letter-spacing: .06em;
}
/*.wrd #event h2 {
    font-size: clamp(2.25rem, 4.6vw, 4.5rem);
    line-height: 1.2;
    max-width: 15ch;
    margin-bottom: .6em;
    transform: scaleX(1);
}*/
.wrd #event h2 {
    /* 'PSG' is the design's actual exported font (self-hosted below) — already
       condensed/italic at the right proportions, unlike the unloaded "Archivo
       Black" this used to name (silently fell back to wide Arial Narrow). */
    font-family: 'Bebas Neue', 'PSG', Arial, sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: clamp(2.1rem, 5.4vw, 6.5rem);
    line-height: 1.05;
    max-width: 18ch;
    /*margin-bottom: 0em;*/
    letter-spacing: .01em;
    color: #0b3c63;
}
/* Body copy is set in a neutral sans in the design, not the condensed PSG
   display face used for headings. */
.wrd #event p {
    font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    font-weight: 400;
    font-size: clamp(1.1rem, 1.4vw, 1.7rem);
    line-height: 1.85;
    margin: 0;
}
/* Rich text from the CMS editor: only the tags the editor's toolbar can produce. */
.wrd #event .rich-body > * + * { margin-top: 1.6em; }
.wrd #event .rich-body ul,
.wrd #event .rich-body ol {
    font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    font-size: clamp(1.1rem, 1.4vw, 1.7rem);
    line-height: 1.85;
    padding-inline-start: 1.4em;
    margin-block: 0;
}
.wrd #event .rich-body li + li { margin-top: .4em; }
.wrd #event .rich-body li[data-list="bullet"] { list-style-type: disc; }
.wrd #event .rich-body a { color: var(--red); text-decoration: underline; }
.wrd #event .rich-body strong, .wrd #event .rich-body b { font-weight: 700; }
@media (min-width: 900px) {
    .wrd .split { grid-template-columns: 1fr 1fr; }
    .wrd #event .split { grid-template-columns: 52fr 48fr; align-items: start; }
    /* Blade bleeds past the container gutter to the page edge, as in the design. */
    .wrd #event .overview-photo,
    .wrd #event .blade { margin-inline-end: var(--bleed-end); }
}

/* ---------- Event overview media ---------- */
.wrd .overview-photo {
    position: relative;
    /* Design runs this panel near-square, with the leading edge raked back 20%. */
    aspect-ratio: 1 / 1;
    overflow: hidden;
    /* Same slanted leading edge as the venue tiles, mirrored for RTL below. */
    clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
}
.wrd .overview-photo img { width: 100%; height: 100%; object-fit: cover; }
.wrd[dir="rtl"] .overview-photo { clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%); }
.wrd .overview-photo.gallery { background: var(--navy-deep); }
.wrd .gallery-track { display: flex; width: 100%; height: 100%; will-change: transform; }
.wrd .gallery-slide { flex: 0 0 100%; width: 100%; height: 100%; }
.wrd .gallery-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wrd .gallery-arrow {
    position: absolute;
    bottom: 1rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: none;
    border-radius: 50%;
    background: rgba(6, 20, 46, .55);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease;
}
.wrd .gallery-arrow:hover { background: var(--red); }
.wrd .gallery-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.wrd .gallery-arrow--prev { left: 1rem; }
.wrd .gallery-arrow--next { left: calc(1rem + 3.25rem); }
.wrd[dir="rtl"] .gallery-arrow--prev { left: auto; right: 1rem; }
.wrd[dir="rtl"] .gallery-arrow--next { left: auto; right: calc(1rem + 3.25rem); }
@media (max-width: 599px) {
    .wrd .gallery-arrow {
        width: 2.25rem;
        height: 2.25rem;
        bottom: .65rem;
        font-size: .9rem;
    }
    .wrd .gallery-arrow--prev { left: .65rem; }
    .wrd .gallery-arrow--next { left: calc(.65rem + 2.65rem); }
    .wrd[dir="rtl"] .gallery-arrow--prev { right: .65rem; }
    .wrd[dir="rtl"] .gallery-arrow--next { right: calc(.65rem + 2.65rem); }
}
.wrd .overview-band {
    margin-block: clamp(2rem, 5vw, 4rem);
    height: clamp(220px, 30vw, 460px);
}
.wrd .overview-band img { width: 100%; height: 100%; object-fit: cover; }
.wrd .blade {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: transparent;
}
.wrd .blade-layer { position: absolute; inset: 0; }
.wrd .blade-layer--0 {
    background: linear-gradient(90deg, #1857B8 0%, var(--navy-deep) 100%);
    clip-path: polygon(16% 0, 74% 0, 66% 100%, 0 100%);
}
.wrd .blade-layer--1 {
    background: var(--red);
    clip-path: polygon(74% 0, 92% 0, 84% 100%, 66% 100%);
}
.wrd .blade-layer--2 {
    background: var(--navy-deep);
    clip-path: polygon(92% 0, 93.7% 0, 85.7% 100%, 84% 100%);
}
.wrd .blade-layer--3 {
    background: var(--red);
    clip-path: polygon(93.7% 0, 118% 0, 110% 100%, 85.7% 100%);
}
.wrd .blade-label {
    position: absolute;
    left: 28%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    font-family: 'PSG', Arial, sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: clamp(1.25rem, 2.25vw, 2.25rem);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #5E7FA8;
}
.wrd[dir="rtl"] .blade-layer--0 { clip-path: polygon(84% 0, 26% 0, 34% 100%, 100% 100%); }
.wrd[dir="rtl"] .blade-layer--1 { clip-path: polygon(26% 0, 8% 0, 16% 100%, 34% 100%); }
.wrd[dir="rtl"] .blade-layer--2 { clip-path: polygon(8% 0, 6.3% 0, 14.3% 100%, 16% 100%); }
.wrd[dir="rtl"] .blade-layer--3 { clip-path: polygon(6.3% 0, -18% 0, -10% 100%, 14.3% 100%); }
.wrd[dir="rtl"] .blade-label { left: auto; right: 28%; }
.wrd .stat-row {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--red);
    max-width: 1200px;
    margin-inline: auto;
}
.wrd .stat-row-line {
    display: grid;
    gap: 1rem;
}
.wrd .stat-row-line--venue {
    grid-template-columns: 1fr;
}
.wrd .stat-row-line--secondary {
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px) {
    .wrd .stat-row-line { gap: 1.5rem; }
}
.wrd .stat-row .stat .k {
    /* Explicit 'PSG' — 'PSG Light' has no real 700 face, see .eyebrow above. */
    font-family: 'PSG', Arial, sans-serif;
    color: var(--red);
    font-size: clamp(.6rem, 1.3vw, 1.5rem);
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    display: block;
    margin-bottom: .3rem;
}
.wrd .stat-row .stat .v {
    font-family: 'Bebas Neue', Arial, sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: clamp(1.1rem, 5vw, 4.5rem);
    text-transform: uppercase;
    overflow-wrap: break-word;
}
.wrd .stat-row .stat { min-width: 0; }

/* ---------- Race categories ---------- */
.wrd #races {
    position: relative;
    background: #F4F5F8;
    overflow: hidden;
}
.wrd .section-head-center { position: relative; }
.wrd .section-head-center h2 {
    font-size: clamp(2.5rem, 5.5vw, 7.8rem);
    line-height: 1.05;
    margin-bottom: 0;
}
/* Watermark belongs to the races section only — other centred heads have none. */
.wrd #races::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: min(120%, 1500px);
    aspect-ratio: 191 / 76;
    background-image: url('/Images/seed/wordmark-werun-doha.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: .07;
    pointer-events: none;
    z-index: 0;
}
.wrd #races .container { position: relative; z-index: 1; }
.wrd .cards {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: var(--gap);
    margin-top: 2rem;
    padding-bottom: .25rem;
    cursor: grab;
}
.wrd .cards.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.wrd .cards::-webkit-scrollbar { display: none; }
.wrd .race-card {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: none;
    width: 100%;
    scroll-snap-align: start;
    background: var(--navy-deep);
    transition: transform .4s var(--ease);
    will-change: transform;
}
.wrd .race-card:hover {
    transform: translateY(-4px);
}
.wrd .race-card-image {
    position: relative;
    flex: none;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: linear-gradient(160deg, #14285e 0%, var(--navy) 100%);
    background-size: cover;
    background-position: center;
}
.wrd .race-card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(10, 27, 61, .25) 0%, var(--navy-deep) 100%);
    opacity: .8;
}
.wrd .race-card-content {
    position: relative;
    flex: 1;
    background: var(--navy-deep);
    padding: 1.75rem 1.5rem 1.5rem;
}
.wrd .race-card-headline {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}
.wrd .race-card .price {
    flex: none;
    text-align: center;
    color: var(--white);
    font-family: 'PSG', Arial, sans-serif;
    font-style: italic;
    line-height: 1;
}
.wrd .race-card .price .currency {
    display: block;
    font-size: .7rem;
    font-weight: 400;
    letter-spacing: .08em;
    margin-bottom: .2rem;
}
.wrd .race-card .price .amount {
    display: block;
    font-weight: 700;
    font-size: clamp(1.5rem, 2.6vw, 3.2rem);
}
.wrd .race-card .dist {
    font-family: 'PSG', Arial, sans-serif;
    font-weight: 700;
    font-style: italic;
    transform: skewX(-6deg);
    display: inline-block;
    font-size: clamp(2.5rem, 5vw, 6rem);
    line-height: 1;
    color: var(--white);
}
.wrd .race-card .dist .unit {
    color: var(--red);
    font-size: .55em;
    letter-spacing: .03em;
    margin-inline-start: .15rem;
}
.wrd .race-card .label {
    font-family: 'PSG', Arial, sans-serif;
    font-size: clamp(1rem, 1.3vw, 1.55rem);
    font-weight: 700;
    font-style: italic;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--red);
    margin-top: .35rem;
}
.wrd .race-card-divider {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    margin: 1rem 0;
}
.wrd .race-card .meta {
    font-size: clamp(.95rem, 1.25vw, 1.5rem);
    color: var(--ink);
    opacity: .9;
    font-weight: 300;
}
.wrd .race-card .meta + .meta { margin-top: .4rem; }
.wrd .race-card .meta strong { color: var(--white); font-weight: 700; opacity: 1; }
.wrd .race-card-btn {
    position: absolute;
    top: 0;
    right: 1.5rem;
    transform: translateY(-50%);
    z-index: 2;
    border-radius: 0;
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
    padding: .55rem 1.2rem;
    font-size: .7rem;
    box-shadow: none;
    font-style: italic;
}
.wrd[dir="rtl"] .race-card-btn {
    right: auto;
    left: 1.5rem;
    clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%);
}
.wrd .race-card-sold-out {
    position: absolute;
    top: 0;
    left: 1.5rem;
    transform: translateY(-50%);
    z-index: 2;
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
    padding: .55rem 1.2rem;
    font-size: .7rem;
    font-weight: 700;
    font-style: italic;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--white);
    background: var(--red);
}
.wrd[dir="rtl"] .race-card-sold-out {
    left: auto;
    right: 1.5rem;
    clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%);
}
@media (min-width: 700px) {
    .wrd .race-card { width: calc((100% - var(--gap)) / 2); }
}
@media (min-width: 1100px) {
    .wrd .race-card { width: calc((100% - (2 * var(--gap))) / 3); }
}
.wrd .races-nav {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}
.wrd .races-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: none;
    border-radius: 50%;
    background: var(--navy-deep);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease;
}
.wrd .races-arrow:hover { background: var(--red); }
.wrd .races-arrow:focus-visible { outline: 2px solid var(--navy-deep); outline-offset: 2px; }
.wrd .races-arrow:disabled { opacity: .35; cursor: default; background: var(--navy-deep); }
@media (max-width: 599px) {
    .wrd .races-arrow { width: 2.25rem; height: 2.25rem; font-size: .9rem; }
}

/* ---------- Prizes ---------- */
.wrd #prizes { position: relative; overflow: hidden; }
.wrd #prizes .container { position: relative; z-index: 1; }
.wrd #prizes .eyebrow {
    font-size: clamp(.85rem, 1.1vw, 1.5rem);
    letter-spacing: .11em;
    margin-bottom: 1.1em;
}
.wrd #prizes h2 {
    /* 'PSG' is the design's actual exported font (self-hosted) — already
       condensed/italic at the right proportions, unlike the unloaded "Archivo
       Black" this used to name (silently fell back to wide Arial Narrow). */
    font-family: 'Bebas Neue', 'PSG', Arial, sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: clamp(2.6rem, 6vw, 7.2rem);
    line-height: 1;
    letter-spacing: .01em;
    max-width: 11ch;
    margin-bottom: .42em;
    color: #0b3c63;
}
.wrd #prizes p {
    font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.4vw, 1.4rem);
    line-height: 1.85;
    max-width: 55ch;
    margin: 0;
}
@media (min-width: 900px) {
    .wrd #prizes .split { grid-template-columns: 46fr 54fr; align-items: start; }
    /* Banners run off the right page edge, as in the design. */
    .wrd #prizes .prize-banners { margin-inline-end: var(--bleed-end); }
}
.wrd .prize-banners {
    position: relative;
    display: flex;
    flex-direction: column;
    --prize-gap: clamp(.5rem, 1.7vw, 2rem);
    gap: var(--prize-gap);
    --prize-rake: clamp(14px, 1.5vw, 28px);
    /* One banner's rake covers its own height; the step has to cover height + gap
       as well, or the leading edges stop lining up into a single diagonal. */
    --prize-step: calc(var(--prize-rake) * 1.3);
}
.wrd .prize-banner {
    position: relative;
    /* The design staggers the stack — each banner reaches further left than the one
       above, so every leading edge lands on a single diagonal. */
    margin-inline-start: calc(var(--step, 0) * var(--prize-step));
    /* Solid blue over the raked head, then near-black from mid-bar on, so the prize
       text always sits on the dark end rather than on the blue. */
    background: linear-gradient(90deg, #1B63C9 0%, #175AB8 26%, #0A1128 58%, #070C1C 100%);
    color: var(--white);
    padding-block: clamp(.75rem, 1.4vw, 1.5rem);
    padding-inline: clamp(1.5rem, 4vw, 4rem) clamp(1.25rem, 6vw, 7rem);
    /* Plain slanted leading edge in the updated design — the old arrow notch is gone. */
    clip-path: polygon(var(--prize-rake) 0, 100% 0, 100% 100%, 0 100%);
    text-align: end;
    overflow: hidden;
}
/* One crest spans the whole stack; prize-crest.js measures each banner's offset
   inside .prize-banners and writes --crest-x/--crest-y/--crest-size per banner. */
.wrd .prize-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    /*background-image: url('/Images/seed/psg-crest.svg');*/
    background-repeat: no-repeat;
    background-size: var(--crest-size, 32vw) var(--crest-size, 32vw);
    background-position: var(--crest-x, center) var(--crest-y, center);
    opacity: .1;
    pointer-events: none;
}
/* Text rides above the crest slice, which is absolutely positioned. */
.wrd .prize-banner .tier,
.wrd .prize-banner .desc { position: relative; z-index: 1; }
.wrd .prize-banner .tier {
    display: block;
    color: var(--red);
    font-family: 'PSG', Arial, sans-serif;
    font-style: italic;
    font-size: clamp(.7rem, 1.05vw, 1.2rem);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: .15em;
}
.wrd .prize-banner .desc {
    display: block;
    font-family: 'PSG', Arial, sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: clamp(1rem, 2vw, 2.4rem);
    line-height: 1.05;
    text-transform: uppercase;
}

/* ---------- Benefits ---------- */
.wrd #benefits { background-color: #f0f0f0; }
.wrd #benefits h2 { font-size: clamp(2.5rem, 6.5vw, 7.8rem); line-height: 1.05; }
.wrd .benefit-list { margin-top: 1.5rem; }
.wrd .benefit-row {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    padding-block: clamp(.6rem, 1vw, 1.1rem);
}
.wrd .benefit-row h3 {
    color: var(--red);
    font-size: clamp(1rem, 1.35vw, 1.65rem);
    letter-spacing: .06em;
    margin-bottom: .2rem;
}
.wrd .benefit-row p { color: var(--muted-on-light); font-size: clamp(1.3rem, 1.75vw, 2.1rem); margin: 0; }
.wrd .benefits-photo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
}
/* A real photo sits behind the tee in the updated design, tinted navy rather than
   the flat gradient panel it replaces. */
.wrd .benefits-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
    z-index: 0;
}
.wrd .benefits-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    /*background: linear-gradient(100deg, rgba(24, 87, 184, .78) 0%, rgba(6, 15, 38, .88) 100%);*/
    clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
    z-index: 1;
}
.wrd[dir="rtl"] .benefits-backdrop,
.wrd[dir="rtl"] .benefits-photo::after { clip-path: polygon(0 0, 82% 0, 100% 100%, 0 100%); }
.wrd .benefits-tee {
    position: relative;
    z-index: 2;
    max-height: 520px;
    width: auto;
    margin-inline: auto;
}
@media (min-width: 900px) {
    /* Navy panel bleeds past the container gutter to the page edge. */
    .wrd .benefits-photo { margin-inline-end: var(--bleed-end); }
}

/* ---------- Schedule ---------- */
.wrd #schedule { position: relative; overflow: hidden; }
.wrd .schedule-photo {
    position: relative;
    aspect-ratio: 3 / 4;
}
.wrd .schedule-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: polygon(0 0, 82% 0, 100% 100%, 0 100%);
}
.wrd[dir="rtl"] .schedule-backdrop { clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%); }
.wrd #schedule .container { position: relative; z-index: 1; }
/* Content sits in the right half in the updated design; the photo fills the left. */
.wrd .schedule-split { display: grid; gap: var(--gap); }
@media (min-width: 900px) {
    .wrd .schedule-split { grid-template-columns: 40fr 60fr; align-items: center; }
    .wrd .schedule-body { grid-column: 2; }
    .wrd .schedule-photo { margin-inline-start: var(--bleed-end); }
    .wrd #schedule .section-head-center { text-align: start; }
}
.wrd .schedule-list { margin-top: 2rem; display: flex; flex-direction: column; }
.wrd .schedule-row {
    display: grid;
    /* minmax(0, 1fr), not 1fr: a bare 1fr track won't shrink past its content's
       intrinsic width, so a long title forces the row into horizontal scroll
       on narrow phones instead of wrapping. */
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .5rem .75rem;
    padding: clamp(.9rem, 1.3vw, 1.5rem) 0;
}
@media (max-width: 480px) {
    .wrd .schedule-row {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "marker title tag" "time title tag";
        row-gap: .2rem;
    }
    .wrd .schedule-row .marker { grid-area: marker; }
    .wrd .schedule-row .title { grid-area: title; overflow-wrap: break-word; }
    .wrd .schedule-row .tag { grid-area: tag; }
    .wrd .schedule-row .time { grid-area: time; font-size: clamp(.85rem, 3vw, 1rem); }
}
@media (max-width: 899px) {
    .wrd .schedule-photo { display: none; }
}
.wrd .schedule-row .time {
    font-family: 'PSG', Arial, sans-serif;
    font-weight: 700;
    font-style: italic;
    color: var(--navy);
    font-size: clamp(1.2rem, 1.7vw, 1.9rem);
    letter-spacing: .04em;
}
.wrd .schedule-row .marker {
    width: clamp(28px, 2vw, 40px);
    height: clamp(28px, 2vw, 40px);
    flex: none;
    border: 2px solid var(--navy);
    display: grid;
    place-items: center;
}
.wrd .schedule-row .marker::before {
    content: '';
    width: clamp(15px, 1vw, 20px);
    height: clamp(15px, 1vw, 20px);
    background: var(--red);
}
.wrd .schedule-row .title { font-size: clamp(1.3rem, 1.85vw, 2.05rem); }
.wrd .tag {
    font-size: clamp(.7rem, .9vw, .95rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .3rem .6rem;
    border-radius: 3px;
    background: #EDEFF4;
    color: var(--muted-on-light);
    white-space: nowrap;
}

/* ---------- Register form ---------- */
.wrd .form-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin-top: 2.5rem;
    max-width: 960px;
    margin-inline: auto;
}
.wrd .form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem 1.5rem;
}
@media (min-width: 700px) {
    .wrd .form-grid { grid-template-columns: 1fr 1fr; }
    .wrd .form-grid .full { grid-column: 1 / -1; }
}
.wrd .field label {
    display: block;
    font-size: .9rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: .35rem;
}
.wrd .field input,
.wrd .field select {
    width: 100%;
    background: #EDEFF4;
    border: 0;
    border-radius: 4px;
    padding: .7rem .9rem;
    color: var(--navy);
    font-family: inherit;
    font-size: .95rem;
}
.wrd .field input:focus,
.wrd .field select:focus {
    outline: none;
    box-shadow: inset 0 0 0 1px var(--red);
}
.wrd .field .text-danger {
    color: var(--red);
    font-size: .75rem;
    display: block;
    margin-top: .3rem;
}
.wrd .form-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.wrd .checkbox-field {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: clamp(.9rem, 1.1vw, 1.15rem);
    color: var(--muted-on-light);
}
.wrd .checkbox-field a { color: var(--red); text-decoration: underline; }
.wrd .terms-note {
    margin: 0;
    font-size: .85rem;
    color: var(--muted-on-light);
}
.wrd .form-alert {
    border-radius: 4px;
    padding: .85rem 1rem;
    font-size: .85rem;
    margin-bottom: 1.25rem;
}
.wrd .form-alert.success { background: rgba(46, 160, 90, .12); color: #1c7a44; }
.wrd .form-alert.error { background: rgba(218, 2, 18, .1); color: var(--red-deep); }

/* ---------- Waiver modal ---------- */
.wrd .waiver-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.wrd .waiver-modal[hidden] { display: none; }
.wrd .waiver-modal-backdrop { position: absolute; inset: 0; background: rgba(6, 15, 38, .72); }
.wrd .waiver-modal-dialog {
    position: relative;
    background: var(--white);
    border-radius: var(--radius);
    width: min(720px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
}
.wrd .waiver-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid var(--line-on-light);
}
.wrd .waiver-modal-header h3 { margin: 0; color: var(--navy); font-size: 1.15rem; }
.wrd .waiver-modal-close {
    background: none;
    border: 0;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--muted-on-light);
    cursor: pointer;
    padding: .1rem .4rem;
}
.wrd .waiver-modal-body {
    overflow-y: auto;
    padding: 1rem;
    background: #EDEFF4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
}
.wrd .waiver-modal-body .waiver-page { max-width: 100%; box-shadow: 0 4px 14px rgba(0, 0, 0, .12); }
.wrd .waiver-modal-body .waiver-error { color: var(--red-deep); font-size: .9rem; }
.wrd .waiver-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.4rem;
    border-top: 1px solid var(--line-on-light);
}
.wrd .waiver-scroll-hint { font-size: .8rem; color: var(--muted-on-light); }
.wrd .waiver-scroll-hint.done { color: #1c7a44; }
.wrd .waiver-modal-footer .btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- FAQ ---------- */
.wrd .faq-grid { margin-top: 2.5rem; max-width: 960px; margin-inline: auto; }
/* Multi-column, not grid: the design fills column-by-column, so questions 1-4
   sit in the left column and 5-8 in the right. */
@media (min-width: 900px) {
    .wrd .faq-grid { columns: 2; column-gap: 5rem; }
    .wrd .faq-grid .faq-item { break-inside: avoid; }
}
.wrd .faq-item {
    border-bottom: 1px solid var(--line-on-light);
}
.wrd .faq-item summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .9rem 0;
    font-weight: 700;
    font-size: clamp(1.05rem, 1.4vw, 1.6rem);
    gap: 1.5rem;
}
.wrd .faq-item summary::-webkit-details-marker { display: none; }
.wrd .faq-item summary::after {
    content: '+';
    font-size: clamp(1.2rem, 1.5vw, 1.8rem);
    color: var(--red);
    transition: transform .25s var(--ease);
}
.wrd .faq-item[open] summary::after { transform: rotate(45deg); }
.wrd .faq-item .answer {
    padding: 0 0 .9rem;
    color: var(--muted-on-light);
    font-size: clamp(1.2rem, 1.6vw, 1.9rem);
    line-height: 1.55;
}

/* ---------- Venue ---------- */
.wrd #venue { background: #F4F5F8; }
.wrd #venue h2 { font-size: clamp(2.5rem, 6.5vw, 7.8rem); line-height: 1.05; }
.wrd #venue p {
    font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    font-size: clamp(1.1rem, 1.4vw, 1.7rem);
    line-height: 1.9;
    margin: 0;
    max-width: 80ch;
}
.wrd .venue-cta { margin-block: 1.75rem; }
@media (min-width: 900px) {
    .wrd .venue-split { grid-template-columns: 46fr 54fr; align-items: start; }
    /* Map bleeds past the container gutter to the page edge, as elsewhere. */
    .wrd .venue-map { margin-inline-end: var(--bleed-end); }
}
.wrd .venue-map {
    position: relative;
    aspect-ratio: 1200 / 931;
    overflow: hidden;
    clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
}
.wrd .venue-map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wrd .venue-map iframe { width: 100%; height: 100%; border: 0; }
.wrd[dir="rtl"] .venue-map { clip-path: polygon(0 0, 82% 0, 100% 100%, 0 100%); }

/* Three tiles with parallel slanted inner edges; the outer edges stay straight so
   the row sits flush inside the container. --venue-skew is in cqi (% of the row's
   own width, not each tile's) so it's the same px value on every tile regardless
   of width — needed because non-first tiles are widened below to overlap their
   neighbor and interlock the diagonal cuts, leaving only --venue-gap visible. */
.wrd .venue-photos {
    container-type: inline-size;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: clamp(2rem, 5vw, 3.5rem);
    --venue-skew: 4cqi;
    --venue-gap: 4px;
    --venue-overlap: calc(var(--venue-skew) - var(--venue-gap));
}
.wrd .venue-photo {
    position: relative;
    width: 100%;
    padding-top: 96.6667%; /* 2.9/3 — fixed box height, independent of the source image's own size */
    overflow: hidden;
    clip-path: polygon(var(--venue-skew) 0, 100% 0, calc(100% - var(--venue-skew)) 100%, 0 100%);
}
.wrd .venue-photo:not(.venue-photo--first) {
    width: calc(100% + var(--venue-overlap));
    margin-inline-start: calc(-1 * var(--venue-overlap));
}
.wrd .venue-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wrd .venue-photo--first { clip-path: polygon(0 0, 100% 0, calc(100% - var(--venue-skew)) 100%, 0 100%); }
.wrd .venue-photo--last { clip-path: polygon(var(--venue-skew) 0, 100% 0, 100% 100%, 0 100%); }
.wrd[dir="rtl"] .venue-photo { clip-path: polygon(0 0, calc(100% - var(--venue-skew)) 0, 100% 100%, var(--venue-skew) 100%); }
.wrd[dir="rtl"] .venue-photo--first { clip-path: polygon(0 0, 100% 0, 100% 100%, var(--venue-skew) 100%); }
.wrd[dir="rtl"] .venue-photo--last { clip-path: polygon(0 0, calc(100% - var(--venue-skew)) 0, 100% 100%, 0 100%); }
@media (max-width: 700px) {
    .wrd .venue-photos {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: .85rem;
        margin-inline: calc(-1 * clamp(1rem, 2.5vw, 2.5rem));
        padding-inline: clamp(1rem, 2.5vw, 2.5rem);
        padding-bottom: .25rem;
    }
    .wrd .venue-photos::-webkit-scrollbar { display: none; }
    .wrd .venue-photo,
    .wrd .venue-photo--first,
    .wrd .venue-photo--last {
        flex: none;
        width: 78vw;
        height: 230px;
        padding-top: 0;
        margin-inline-start: 0;
        scroll-snap-align: center;
        clip-path: polygon(var(--venue-skew) 0, 100% 0, calc(100% - var(--venue-skew)) 100%, 0 100%);
        border-top: 4px solid var(--red);
    }
    .wrd[dir="rtl"] .venue-photo,
    .wrd[dir="rtl"] .venue-photo--first,
    .wrd[dir="rtl"] .venue-photo--last {
        clip-path: polygon(0 0, calc(100% - var(--venue-skew)) 0, 100% 100%, var(--venue-skew) 100%);
    }
}

.wrd .venue-tagline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(1rem, 3vw, 2.5rem);
    margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
.wrd .venue-tagline-word {
    font-family: 'PSG', Arial, sans-serif;
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
    color: var(--red);
    font-size: clamp(2.5rem, 6.5vw, 7.8rem);
    line-height: 1;
}
.wrd .venue-tagline p {
    font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    font-size: clamp(1.1rem, 1.4vw, 1.7rem);
    line-height: 1.85;
    max-width: 60ch;
}

/* ---------- Results ---------- */
.wrd #results { position: relative; overflow: hidden; background: var(--white); }
.wrd .results-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: .12;
    pointer-events: none;
}
.wrd #results .container { position: relative; z-index: 1; }
.wrd .results-embed {
    margin-top: 2rem;
    margin-inline: auto;
    max-width: 900px;
    padding: 1rem;
    overflow-x: auto;
    border-top: 10px solid var(--red);
    background: var(--white);
    color: var(--navy);
    font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    box-shadow: 0 18px 50px -24px rgba(10, 27, 61, .45);
}
.wrd .results-placeholder {
    display: block;
    width: 100%;
    height: clamp(160px, 28vw, 280px);
    object-fit: cover;
}
.wrd .results-embed:has(#divRRPublish:not(:empty)) .results-placeholder { display: none; }
.wrd .results-embed #divRRPublish:empty { min-height: 0; }
.wrd .results-embed #divRRPublish {
    display: block;
    width: 100%;
    min-height: 160px;
}

/* ---------- Newsletter ---------- */
.wrd .newsletter {
    background: var(--red);
    color: var(--white);
}
.wrd .newsletter h2 { font-size: clamp(1.75rem, 3.25vw, 3.9rem); line-height: 1.05; }
.wrd .newsletter p { font-size: clamp(1rem, 1.3vw, 1.4rem); }
.wrd .newsletter .bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding-block: 2rem;
}
/* The input reads as a lighter slab of the red band with the ribbon button riding
   its trailing edge, rather than the pill pair it replaces. */
.wrd .newsletter-form {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.wrd .newsletter input[type=email] {
    padding: .95rem 1.4rem;
    border: 0;
    min-width: min(420px, 60vw);
    background: #F0313F;
    color: var(--white);
    font-family: inherit;
    clip-path: polygon(4% 0, 100% 0, 97% 100%, 0 100%);
}
.wrd .newsletter input[type=email]::placeholder { color: rgba(255, 255, 255, .75); }
.wrd .newsletter input[type=email]:focus { outline: none; background: #F5525E; }
.wrd .newsletter .btn {
    background: var(--white);
    color: var(--red);
    box-shadow: none;
}
.wrd .newsletter .btn:hover { background: var(--ink); }
.wrd[dir="rtl"] .newsletter input[type=email] { clip-path: polygon(0 0, 96% 0, 100% 100%, 0 100%); }

/* ---------- Sponsor panel (white, sits between the last body section and the footer) ---------- */
.wrd .sponsor-panel {
    background: var(--white);
    border-top: 1px solid var(--line-on-light);
    padding-block: clamp(2rem, 4vw, 3.5rem);
}
.wrd .sponsor-panel-tiers {
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 3vw, 2.5rem);
}
.wrd .sponsor-tier {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(1.25rem, 3vw, 3rem);
}
.wrd .sponsor-tier .sponsor-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(44px, 4.5vw, 60px);
    width: clamp(110px, 11vw, 150px);
}
.wrd .sponsor-tier .sponsor-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: brightness(0) saturate(100%);
    opacity: .78;
    transition: opacity .2s;
}
.wrd .sponsor-tier .sponsor-logo:hover img { opacity: 1; }
.wrd .sponsor-tier .sponsor-logo--square {
    height: clamp(64px, 6.5vw, 88px);
    width: clamp(64px, 6.5vw, 88px);
}
.wrd .sponsor-panel-socials {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 2vw, 1.5rem);
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    padding-top: clamp(1.5rem, 3vw, 2.5rem);
    border-top: 1px solid var(--line-on-light);
    color: var(--navy);
}
.wrd .sponsor-panel-socials a { display: flex; align-items: center; opacity: .7; transition: opacity .2s; }
.wrd .sponsor-panel-socials a:hover { opacity: 1; }
.wrd .sponsor-panel-socials svg { width: 18px; height: 18px; fill: currentColor; }
.wrd .sponsor-panel-socials .social-text {
    font-family: 'PSG', Arial, sans-serif;
    font-weight: 700;
    font-size: .85rem;
}
@media (max-width: 699.98px) {
    .wrd .sponsor-panel-tiers { gap: 1.25rem; }
    .wrd .sponsor-tier {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 1.25rem 1rem;
        justify-items: center;
    }
    .wrd .sponsor-tier .sponsor-logo { grid-column: span 2; width: 100%; height: 44px; }
    .wrd .sponsor-tier .sponsor-logo--square { width: 100%; height: 56px; }
    .wrd .sponsor-tier .sponsor-logo:nth-child(3n+1):last-child { grid-column: 3 / span 2; }
    .wrd .sponsor-tier .sponsor-logo:nth-child(3n+1):nth-last-child(2) { grid-column: 2 / span 2; }
    .wrd .sponsor-tier .sponsor-logo:nth-child(3n+2):last-child { grid-column: 4 / span 2; }
}

/* ---------- Footer ---------- */
.wrd footer.site-footer {
    position: relative;
    overflow: hidden;
    background: linear-gradient(100deg, #0E2A5C 0%, #1B4FA0 55%, #0E2A5C 100%);
    padding-block: clamp(3rem, 6vw, 5rem) 0;
    color: var(--ink);
}
.wrd footer.site-footer .container {
    position: relative;
    z-index: 1;
    padding-inline: clamp(1.5rem, 4vw, 4rem);
}
.wrd footer.site-footer .footer-top-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.5rem;
}
@media (min-width: 700px) {
    .wrd footer.site-footer .footer-top-row { flex-direction: row; justify-content: space-between; }
}
.wrd footer.site-footer .footer-columns {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(2.5rem, 6vw, 5rem);
}
.wrd footer.site-footer .footer-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    min-width: max-content;
}
.wrd footer.site-footer .footer-col-heading {
    font-family: 'PSG', Arial, sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: clamp(.85rem, 1vw, 1.05rem);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--white);
}
.wrd footer.site-footer .links {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    font-size: clamp(.85rem, .95vw, 1rem);
    color: var(--muted);
}
.wrd footer.site-footer .links a:hover { color: var(--white); }
.wrd footer.site-footer .footer-logo { display: inline-flex; flex: none; }
.wrd footer.site-footer .footer-logo .brand-logo {
    height: clamp(96px, 10vw, 136px);
    width: auto;
}
.wrd footer.site-footer .footer-copyright {
    display: block;
    margin-top: 2.5rem;
    padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
    font-size: .72rem;
    color: var(--muted);
}
.wrd[dir="rtl"] footer.site-footer .footer-col { align-items: flex-end; text-align: end; }
.wrd footer.site-footer .footer-giant-wordmark-band {
    overflow: hidden;
    padding-block: clamp(1rem, 3vw, 2rem);
}
.wrd footer.site-footer .footer-giant-wordmark-text {
    display: block;
    font-family: 'PSG', Arial, sans-serif;
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: .02em;
    font-size: clamp(1.5rem, 4vw, 3rem);
    color: var(--white);
}

@media (max-width: 699.98px) {
    .wrd footer.site-footer .footer-top-row { align-items: center; text-align: center; gap: 1.5rem; }
    .wrd footer.site-footer .footer-columns { justify-content: center; width: 100%; gap: 2rem; }
    .wrd footer.site-footer .footer-col { align-items: center; min-width: 0; }
    .wrd footer.site-footer .footer-col-heading { font-size: .7rem; }
    .wrd footer.site-footer .footer-copyright { text-align: center; }
}

/* ---------- Scroll reveal ---------- */
.wrd [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.wrd [data-reveal].is-visible { opacity: 1; transform: none; }
.wrd [data-reveal="left"] { transform: translateX(-32px); }
.wrd [data-reveal="left"].is-visible { transform: none; }
.wrd [data-reveal="right"] { transform: translateX(32px); }
.wrd [data-reveal="right"].is-visible { transform: none; }
@media (prefers-reduced-motion: reduce) {
    .wrd [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* RTL mirror for a couple of directional bits */
.wrd[dir="rtl"] .prize-banner {
    clip-path: polygon(0 0, calc(100% - var(--prize-rake)) 0, 100% 100%, 0 100%);
}
.wrd[dir="rtl"] .btn-ribbon { clip-path: polygon(0 0, 94% 0, 100% 100%, 6% 100%); }