:root {
    --brand: #4d2730;
    --brand-deep: #2e171c;
    --brand-light: #593b45;
    --accent: #b99b3b;
    --text: #fefefe;
    --muted: rgba(254, 254, 254, 0.65);
    /* Ghost Admin → Design → Brand → Typography overrides these when set. */
    --font: var(--gh-font-body, "Lexend Deca", system-ui, sans-serif);
    --font-heading: var(--gh-font-heading, "Lexend Deca", system-ui, sans-serif);
    --reading-size: clamp(1.375rem, 3.2vw, 2rem); /* event description and page content */
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    height: 100%;
}

body {
    background: var(--brand);
    color: var(--text);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
}

/* ---------- Map page ---------- */

.map {
    position: fixed;
    inset: 0;
    background: var(--brand);
}

/* Inverted grey tiles blend into the brand background. */
.map .leaflet-tile-pane {
    filter: invert(100%);
    opacity: 0.5;
}

/* Top bar on the map and on pages: [left] [VSPORT icon] [account].
   The bar itself lets clicks through to the map. */
.top-bar {
    position: fixed;
    top: 0;
    left: 16px;
    right: 16px;
    z-index: 1000;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    gap: 12px;
    pointer-events: none;
}

.top-bar > * {
    pointer-events: auto;
}

.top-bar > :first-child {
    justify-self: start;
    margin-top: 16px;
}

.top-bar > :last-child {
    justify-self: end;
    margin-top: 16px;
}

/* On posts and pages, a brand-coloured fade behind the bar lets the text
   scroll softly under the header. The map page has no fade. */
body:not(.map-page)::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    height: 150px;
    background: linear-gradient(var(--brand) 25%, rgba(77, 39, 48, 0));
    pointer-events: none;
}

/* The icon hangs from the top edge, as on vsport.online. */
.brand {
    display: block;
    width: 72px;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}

.brand img {
    display: block;
    width: 100%;
    height: auto;
}

@media (min-width: 768px) {
    .brand {
        width: 96px;
    }
}

.label-short {
    display: none;
}

@media (max-width: 479px) {
    .label-long {
        display: none;
    }

    .label-short {
        display: inline;
    }
}

.account-button {
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--brand-deep);
    color: var(--text);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}

.account-button--cta {
    background: var(--accent);
    color: var(--brand-deep);
    font-weight: 600;
}

.account-button:hover,
.account-button:focus-visible {
    filter: brightness(1.1);
}

/* Headline and time ranges, over the map: bottom left on wide screens,
   along the bottom edge on phones. */
.intro {
    position: fixed;
    left: 16px;
    bottom: 32px;
    z-index: 1000;
    width: min(30rem, calc(100% - 32px));
    padding: 24px;
    border-radius: 24px;
    background: rgba(46, 23, 28, 0.92);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

.intro__title {
    margin: 0;
    font-size: clamp(1.25rem, 2.6vw, 1.75rem);
    font-weight: 600;
    line-height: 1.25;
}

.intro__text {
    margin: 0.75rem 0 0;
    color: var(--muted);
    line-height: 1.5;
}

.ranges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 1.25rem;
}

.range {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid rgba(254, 254, 254, 0.25);
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
}

.range:hover,
.range:focus-visible {
    border-color: var(--text);
}

.range[aria-pressed="true"] {
    border-color: var(--text);
    background: var(--text);
    color: var(--brand-deep);
    font-weight: 600;
}

.range__lock {
    font-size: 0.75rem;
}

.range__short {
    display: none;
}

/* Collapse handle for the intro panel; phones only (see below). */
.intro__toggle {
    display: none;
}

/* Tells visitors how to unlock the locked ranges. */
.ranges__unlock {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(185, 155, 59, 0.16);
    color: var(--text);
    font-size: 0.875rem;
    line-height: 1.4;
    text-decoration: none;
}

.ranges__unlock strong {
    color: var(--accent);
}

.ranges__unlock:hover,
.ranges__unlock:focus-visible {
    background: rgba(185, 155, 59, 0.26);
}

.ranges__empty {
    margin: 1rem 0 0;
    color: var(--muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

.ranges__empty a {
    color: var(--accent);
}

@media (max-width: 767px) {
    /* Bottom space leaves room for the map credit underneath. */
    .intro {
        right: 16px;
        bottom: 36px;
        width: auto;
        padding: 18px;
    }

    .intro__text {
        font-size: 0.9375rem;
    }

    /* Pinch to zoom on phones; the buttons would sit under the panel. */
    .leaflet-control-zoom {
        display: none;
    }
}

.emoji-marker {
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--text);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    font-size: 24px;
    line-height: 1;
    transition: transform 0.15s ease;
}

.emoji-marker:hover,
.emoji-marker:focus-visible {
    transform: scale(1.15);
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

/* ---------- Scroll reveal ---------- */

/* Opacity is set per word by reveal.js; the short transition smooths the
   steps of wheel scrolling. */
.rv-word {
    opacity: 0.25;
    transition: opacity 0.12s linear;
}

/* The html.rv class is set in <head>, so the article starts dimmed instead
   of flashing bright before reveal.js runs. If the script never runs, the
   text fades in after 4s. */
.rv .post:not(.rv-ready) {
    opacity: 0.25;
    animation: rv-failsafe 0.4s 4s forwards;
}

@keyframes rv-failsafe {
    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rv .post:not(.rv-ready) {
        opacity: 1;
        animation: none;
    }
}

/* ---------- Post / page ---------- */

.back-to-map {
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--brand-deep);
    color: var(--muted);
    font-size: 0.875rem;
    text-decoration: none;
}

.back-to-map:hover,
.back-to-map:focus-visible {
    color: var(--text);
}

/* The top space clears the hanging logo (72–96px) with room to breathe. */
.post {
    max-width: 46rem;
    margin: 0 auto;
    padding: clamp(170px, 22vh, 260px) 16px 10vh;
}

/* ---------- Event header (post.hbs with ?event=) ---------- */

.has-event .post {
    padding-top: clamp(180px, 24vh, 280px);
}

.event > * {
    margin: 0;
}

.event__icon {
    font-size: 3rem;
    line-height: 1;
    margin-bottom: 1.25rem;
}

.event__competition {
    color: var(--accent);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.event__date {
    margin-top: 0.5rem;
    color: var(--muted);
}

.event__title {
    margin-top: 1rem;
    font-size: clamp(2rem, 6vw, 4rem);
    font-weight: 600;
    line-height: 1.1;
}

.event__where {
    margin-top: 1rem;
    font-size: 1.125rem;
    color: var(--muted);
}

.event__text {
    margin-top: 2.5rem;
    font-size: var(--reading-size);
    line-height: 1.5;
}

.event__text p,
.post__content p {
    margin: 0 0 1.25em;
}

.event-locked {
    margin: 0 0 3rem;
    padding: 20px 24px;
    border-radius: 20px;
    background: var(--brand-deep);
    line-height: 1.5;
}

.event-locked a {
    color: var(--accent);
    font-weight: 600;
}

/* The linked page follows the event as a second section. */
.has-event .post__header {
    margin-top: 6rem;
    padding-top: 3rem;
    border-top: 1px solid rgba(254, 254, 254, 0.15);
}

/* ---------- Post content ---------- */

.post__title {
    margin: 0 0 0.75rem;
    font-size: clamp(2rem, 6vw, 4rem);
    font-weight: 600;
    line-height: 1.1;
}

.has-event .post__title {
    font-size: clamp(1.75rem, 4.5vw, 3rem);
}

.post__header {
    margin-bottom: 2rem;
}

.post__date {
    margin: 0;
    color: var(--muted);
}

.post__image {
    display: block;
    width: 100%;
    height: auto;
    margin: 2rem 0;
    border-radius: 24px;
}

.post__content {
    font-size: var(--reading-size);
    line-height: 1.5;
}

.post__content img {
    max-width: 100%;
    height: auto;
}

.post__content a {
    color: var(--accent);
}

h1,
h2,
h3 {
    font-family: var(--font-heading);
}

/* Wide and full-width images and cards from the Ghost editor. */
.post__content .kg-width-wide {
    position: relative;
    width: min(85vw, 1100px);
    left: 50%;
    transform: translateX(-50%);
}

.post__content .kg-width-full {
    position: relative;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
}

.post__content .kg-width-wide img,
.post__content .kg-width-full img {
    width: 100%;
}

/* ---------- Legal links (partials/legal.hbs) ---------- */

.legal {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    color: var(--muted);
    font-size: 0.75rem;
    line-height: 1.5;
}

.legal a {
    color: var(--muted);
}

.legal a:hover,
.legal a:focus-visible {
    color: var(--text);
}

/* In the intro panel on the map. */
.intro .legal {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(254, 254, 254, 0.12);
}

/* Below the article on posts and pages. */
.page-footer {
    max-width: 46rem;
    margin: 0 auto;
    padding: 24px 16px 40px;
    border-top: 1px solid rgba(254, 254, 254, 0.12);
}

/* ---------- Phones ---------- */

@media (max-width: 767px) {
    /* The three ranges always share one line. */
    .ranges {
        flex-wrap: nowrap;
        gap: 6px;
    }

    .range {
        flex: 1 1 auto;
        justify-content: center;
        gap: 4px;
        padding: 7px 8px;
        font-size: 0.8125rem;
        white-space: nowrap;
    }

    .range__lock {
        font-size: 0.625rem;
    }

    /* Collapsible intro panel: a handle on the top edge, like a bottom
       sheet. Collapsed, only the time ranges stay. */
    .intro__toggle {
        position: absolute;
        top: -14px;
        left: 50%;
        display: grid;
        place-items: center;
        width: 56px;
        height: 28px;
        padding: 0;
        border: 1px solid rgba(254, 254, 254, 0.15);
        border-radius: 999px;
        background: var(--brand-deep);
        color: var(--text);
        cursor: pointer;
        transform: translateX(-50%);
    }

    .intro__toggle svg {
        width: 18px;
        height: 18px;
        transition: transform 0.2s ease;
    }

    .intro.is-collapsed {
        padding-top: 22px;
        padding-bottom: 14px;
    }

    .intro.is-collapsed .intro__toggle svg {
        transform: rotate(180deg);
    }

    .intro.is-collapsed .intro__title,
    .intro.is-collapsed .intro__text,
    .intro.is-collapsed .ranges__unlock,
    .intro.is-collapsed .legal {
        display: none;
    }

    .intro.is-collapsed .ranges {
        margin-top: 0;
    }

    /* Soft brand-coloured edges at the top and bottom of the map. Inside
       the map: above Leaflet's map pane (z 400), below its controls (z 1000),
       so the attribution stays visible. Markers are kept off the edges by
       the fitBounds padding in map.js. */
    .map::before,
    .map::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        z-index: 450;
        pointer-events: none;
    }

    .map::before {
        top: 0;
        height: 110px;
        background: linear-gradient(var(--brand), rgba(77, 39, 48, 0));
    }

    .map::after {
        bottom: 0;
        height: 160px;
        background: linear-gradient(rgba(77, 39, 48, 0), var(--brand));
    }
}

/* Smallest iPhones: short labels keep the three ranges on one line. */
@media (max-width: 359px) {
    .range__long {
        display: none;
    }

    .range__short {
        display: inline;
    }
}

/* ---------- Map info box (events without a linked page) ---------- */

.event-popup .leaflet-popup-content-wrapper,
.event-popup .leaflet-popup-tip {
    background: var(--brand-deep);
    color: var(--text);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}

.event-popup .leaflet-popup-content-wrapper {
    border-radius: 18px;
}

.event-popup .leaflet-popup-content {
    margin: 18px 20px;
    font-family: var(--font);
    font-size: 0.875rem;
    line-height: 1.5;
}

.event-popup .leaflet-popup-content p {
    margin: 0;
}

.event-popup__competition {
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.event-popup__date,
.event-popup__where {
    color: var(--muted);
}

.event-popup .event-popup__title {
    margin: 6px 0 4px;
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.25;
}

.event-popup .event-popup__text {
    margin-top: 10px;
}

.event-popup a.leaflet-popup-close-button {
    color: var(--muted);
}

/* ---------- Bookmark card (Ghost editor) ----------
   Overrides Ghost's cards.min.css; ".post__content" gives the extra
   specificity. Image right on wide screens, on top on phones. */

.post__content .kg-bookmark-card {
    width: 100%;
    margin: 2.5rem 0;
}

.post__content .kg-bookmark-card a.kg-bookmark-container,
.post__content .kg-bookmark-card a.kg-bookmark-container:hover {
    display: flex;
    min-height: 190px;
    border: 1px solid rgba(254, 254, 254, 0.12);
    border-radius: 24px;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(185, 155, 59, 0.16), rgba(185, 155, 59, 0) 55%),
        var(--brand-deep);
    color: var(--text);
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.post__content .kg-bookmark-card a.kg-bookmark-container:hover,
.post__content .kg-bookmark-card a.kg-bookmark-container:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(185, 155, 59, 0.65);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38), 0 0 0 4px rgba(185, 155, 59, 0.12);
}

.post__content .kg-bookmark-content {
    position: relative;
    padding: 26px 28px 24px;
    font-family: var(--font);
}

/* External-link arrow, top right of the text. */
.post__content .kg-bookmark-content::after {
    content: "↗";
    position: absolute;
    top: 22px;
    right: 24px;
    color: var(--accent);
    font-size: 1.125rem;
    line-height: 1;
    transition: transform 0.25s ease;
}

.post__content a.kg-bookmark-container:hover .kg-bookmark-content::after {
    transform: translate(3px, -3px);
}

.post__content .kg-bookmark-title {
    padding-right: 28px;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
}

.post__content .kg-bookmark-description {
    max-height: none;
    margin-top: 8px;
    color: var(--muted);
    font-size: 0.9375rem;
    line-height: 1.5;
    opacity: 1;
}

.post__content .kg-bookmark-metadata {
    margin-top: auto;
    padding-top: 20px;
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.post__content .kg-bookmark-metadata > *:not(img) {
    opacity: 1;
}

.post__content .kg-bookmark-metadata > span:nth-of-type(2) {
    color: var(--muted);
    font-weight: 500;
}

/* Site icons are often dark; a light chip keeps them visible. */
.post__content .kg-bookmark-icon {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    padding: 3px;
    border-radius: 7px;
    background: var(--text);
}

.post__content .kg-bookmark-thumbnail {
    flex: 0 0 38%;
    min-width: 0;
    overflow: hidden;
}

/* Blends the image into the card instead of a hard edge. */
.post__content .kg-bookmark-thumbnail::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, var(--brand-deep), rgba(46, 23, 28, 0) 45%);
    pointer-events: none;
}

.post__content .kg-bookmark-thumbnail img {
    height: 100%;
    max-width: none;
    border-radius: 0;
    transition: transform 0.6s ease;
}

.post__content a.kg-bookmark-container:hover .kg-bookmark-thumbnail img {
    transform: scale(1.05);
}

/* No real image: a blank "data:" placeholder from the linked site, or an
   image that failed to load (Ghost hides it). The text takes the full width. */
.post__content .kg-bookmark-thumbnail:has(img[src^="data:"]),
.post__content .kg-bookmark-thumbnail:has(img[style*="display: none"]) {
    display: none;
}

@media (max-width: 599px) {
    .post__content .kg-bookmark-card a.kg-bookmark-container {
        flex-direction: column-reverse;
    }

    .post__content .kg-bookmark-thumbnail {
        flex-basis: auto;
        height: 170px;
    }

    .post__content .kg-bookmark-thumbnail::before {
        background: linear-gradient(0deg, var(--brand-deep), rgba(46, 23, 28, 0) 55%);
    }

    .post__content .kg-bookmark-content {
        padding: 18px 20px 20px;
    }
}

/* ---------- Map credit (required by BKG, see map.js) ----------
   Replaces Leaflet's white box with a quiet line in the brand colours. */

.map .leaflet-control-attribution {
    margin: 0 8px 6px 0;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(46, 23, 28, 0.72);
    color: var(--muted);
    font-family: var(--font);
    font-size: 0.6875rem;
    line-height: 1.5;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.map .leaflet-control-attribution a {
    color: var(--muted);
    text-decoration: none;
}

.map .leaflet-control-attribution a:hover,
.map .leaflet-control-attribution a:focus-visible {
    color: var(--text);
    text-decoration: underline;
}

/* Leaflet's zoom buttons in the same style. */
.map .leaflet-bar {
    border: 1px solid rgba(254, 254, 254, 0.15);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.map .leaflet-bar a {
    background: var(--brand-deep);
    color: var(--text);
    border-bottom-color: rgba(254, 254, 254, 0.12);
}

.map .leaflet-bar a:hover,
.map .leaflet-bar a:focus-visible {
    background: var(--brand-light);
    color: var(--text);
}

/* ---------- Divider (Ghost editor) ----------
   A thin line that fades out at both ends, with a small gold dot. */

.post__content hr {
    position: relative;
    height: 1px;
    margin: 3.5rem 0;
    border: 0;
    background: linear-gradient(90deg, rgba(254, 254, 254, 0), rgba(254, 254, 254, 0.18) 50%, rgba(254, 254, 254, 0));
    overflow: visible;
}

.post__content hr::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 6px var(--brand);
    transform: translate(-50%, -50%);
}