@charset "UTF-8";
/* Must be the very first bytes of the file — nothing, not even a comment, may
   precede it. Apache serves .css as `text/css` with no charset parameter, so a
   browser is free to decode this file as something other than UTF-8, which turns
   the ✓ in the inclusion lists and the other glyph markers into mojibake. The
   at-rule travels with the file, so it survives being deployed anywhere. */

/* ──────────────────────────────────────────────────────────────────────────────
   Eastern Cape Grand Tour — landing page (/rally/)

   Loaded *after* rally.css and depends on it for the palette tokens, the type
   stack, the reset and the shared .btn. Only the marketing page's own furniture
   lives here.

   Everything is prefixed .mk- and none of it reuses a class rally.css already
   defines (.section, .wrap, .rally-header …). That's deliberate: the two pages
   share a visual language but not a layout, and overlapping class names between
   two stylesheets loaded together is how padding rules start cancelling each
   other out. The one intentional overlap is .btn, which should look identical on
   both pages.
   ────────────────────────────────────────────────────────────────────────────── */

/* Deliberately no `html { scroll-behavior: smooth }`. Some environments accept
   it and then decline to scroll at all, which turns every programmatic scroll —
   including the back-to-top button — into a no-op. The button asks for the
   animation itself and falls back to a jump if it doesn't happen. */

/* rally.css reserves space at the foot of the page for the entry form's sticky
   total bar. There's no such bar here, so that reservation is just a gap. */
body.mk {
    padding-bottom: 0;
    overflow-x: hidden;
}

.mk-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: .75rem 1.25rem;
    background: var(--action);
    color: var(--action-ink);
    font-family: 'Oswald', sans-serif;
    text-decoration: none;
}

.mk-skip:focus { left: 0; }

.mk-wrap {
    max-width: 66rem;
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* Reading columns are held narrower than the full grid — prose at 66rem is a
   chore to read, but package cards and photo grids want the width.

   The constraint is on the children, not the wrap, so a narrow section keeps the
   same left edge as a full-width one. Centring the wrap instead would leave every
   prose heading starting on a different axis to "Packages" above it. */
.mk-narrow > * { max-width: 44rem; }

/* The closing CTA is the one centred block on the page, so there its column does
   centre rather than align left. */
.mk-final .mk-narrow > * {
    margin-left: auto;
    margin-right: auto;
}

/* ─── Sticky bar ──────────────────────────────────────────────────────────────
   Only appears once the hero is gone, so there's never a moment with two Enter
   buttons on screen competing for the same click. */

.mk-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    background: rgba(10, 10, 10, .92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}

.mk-bar[hidden] { display: none; }

.mk-bar-inner {
    max-width: 66rem;
    margin: 0 auto;
    padding: .6rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.mk-bar-name {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text);
    /* On a phone the event name would push the CTA off screen. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mk-bar-cta {
    margin-left: auto;
    flex: 0 0 auto;
    padding: .5rem 1.1rem;
    font-size: .85rem;
}

.mk-bar-closed {
    margin-left: auto;
    font-family: 'Oswald', sans-serif;
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted-dim);
}

/* ─── Hero ────────────────────────────────────────────────────────────────────
   Two treatments. With a dedicated hero photograph uploaded, it runs full-bleed
   behind the type under a scrim. Without one, the hero is type-led on the flat
   dark ground with an oxblood glow raking in from the left — the event poster is not
   pressed into service as scenery, because it carries its own title across the
   middle and this page draws its own.

   Both keep the same box, so the layout below doesn't shift between them. */

.mk-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: min(92vh, 46rem);
    padding: 7rem 0 3.5rem;
    background:
        radial-gradient(58% 92% at 8% 88%, rgba(165, 56, 42, .26), transparent 68%),
        radial-gradient(46% 70% at 92% 8%, rgba(200, 145, 42, .10), transparent 70%),
        var(--bg-alt);
    overflow: hidden;
}

/* Faint diagonal rake, the same motorsport cue the entry form's masthead uses, so
   the two pages read as one system even where the layouts diverge. */
.mk-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        -60deg,
        transparent 0 26px,
        rgba(255, 255, 255, .018) 26px 28px
    );
    pointer-events: none;
}

/* Weighted right of centre: the copy occupies the left of the hero under the
   scrim, so pushing the artwork across keeps its subject clear of the type
   instead of centring it directly behind the title. */
.mk-hero.has-art::before {
    background-image: var(--art);
    background-size: cover;
    background-position: 70%;
}

/* Two scrims, because the hero's type is all left-aligned while the photograph's
   subject usually isn't.

   The horizontal one carries the contrast: it darkens the left column the copy
   sits in and clears by two-thirds across, so a bright sky or a light-coloured
   car no longer swallows the eyebrow and subtitle while the vehicle stays fully
   visible. The vertical one only has to settle the foot of the image, and its
   bottom stop matches --bg exactly so the hero hands off to the first section
   without a seam. */
.mk-hero.has-art::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(10,10,10,.85) 0%,
            rgba(10,10,10,.62) 28%,
            rgba(10,10,10,.28) 52%,
            transparent 72%),
        linear-gradient(180deg,
            rgba(10,10,10,.45) 0%,
            rgba(10,10,10,.32) 32%,
            rgba(10,10,10,.62) 68%,
            rgba(10,10,10,.90) 88%,
            var(--bg) 100%);
}

/* On a photograph the muted greys lose their footing, so the supporting lines
   come up to full white and everything picks up a shadow. */
.mk-hero.has-art .mk-eyebrow {
    color: #F0C46A;
    text-shadow: 0 1px 8px rgba(0,0,0,.9);
}

.mk-hero.has-art .mk-hero-sub { color: var(--text); }

.mk-hero.has-art .mk-scroll-cue { color: #D8DBDF; }

.mk-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 66rem;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.mk-eyebrow {
    font-family: 'Oswald', sans-serif;
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--gold);
    /* Sits close to the title it introduces — Anton carries a lot of internal
       leading of its own, so a full rem on top of that reads as a stray line. */
    margin: 0 0 .45rem;
}

.mk-hero-title {
    font-family: 'Anton', 'Oswald', Impact, sans-serif;
    font-size: clamp(2.6rem, 11vw, 6rem);
    /* Anton's caps very nearly fill its em box, so anything under 1 collides on
       a two-line title — which is exactly what this one does on a phone. */
    line-height: 1;
    letter-spacing: .005em;
    text-transform: uppercase;
    margin: 0;
    max-width: 15ch;
    text-shadow: 0 2px 24px rgba(0,0,0,.6);
}

.mk-hero-sub {
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    font-size: clamp(1rem, 3.4vw, 1.45rem);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 1rem 0 0;
    text-shadow: 0 1px 10px rgba(0,0,0,.8);
}

/* The dates get the gold rule rather than a chip — a pill here would read as a
   button next to the actual button a few pixels below it. */
.mk-hero-dates {
    display: inline-block;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: clamp(1rem, 3.2vw, 1.3rem);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text);
    margin: 1.4rem 0 0;
    padding-bottom: .45rem;
    border-bottom: 2px solid var(--gold);
    text-shadow: 0 1px 10px rgba(0,0,0,.8);
}

.mk-hero-cta {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 2.25rem;
}

.mk-cta {
    padding: 1rem 2.25rem;
    font-size: 1.05rem;
    letter-spacing: .12em;
    /* Tighter and deeper than the old red halo. A wide diffuse glow in oxblood
       just greys the ground around the button; pulled in close it reads as the
       button sitting slightly proud of the page instead. */
    box-shadow: 0 10px 26px -14px rgba(165, 56, 42, .95);
}

.mk-closed-chip {
    font-family: 'Oswald', sans-serif;
    font-size: .9rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    border: 1px solid var(--border-hi);
    border-radius: 999px;
    padding: .7rem 1.4rem;
}

.mk-scroll-cue {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: 'Oswald', sans-serif;
    font-size: .75rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
}

.mk-scroll-cue:hover { color: var(--text); }
.mk-scroll-cue:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

.mk-scroll-cue svg {
    width: 1.1rem;
    height: 1.1rem;
    animation: mk-nudge 2.4s ease-in-out infinite;
}

@keyframes mk-nudge {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(.28rem); }
}

.mk-hero-logos {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    flex-wrap: wrap;
    margin-top: 3rem;
}

.mk-hero-logos img {
    height: 2.4rem;
    width: auto;
    max-width: 8rem;
    object-fit: contain;
    opacity: .85;
}

/* ─── Route spine ─────────────────────────────────────────────────────────────
   The one piece of ornament on the page, and it earns its place: this is a road
   rally, so the page reads as a road — a dashed centre-line running the full
   length of the content, just outside the column.

   Desktop only. Below 64rem there is no margin to put it in, and squeezing it
   against the text would make it noise rather than atmosphere. */

.mk-route { display: none; }

@media (min-width: 64rem) {
    main {
        position: relative;
    }

    main::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        /* Sits just outside the 66rem column, and clamps to the viewport edge on
           screens too narrow to have that margin to spare. */
        left: max(1.75rem, calc(50% - 35.5rem));
        width: 2px;
        background: repeating-linear-gradient(
            180deg,
            rgba(200, 145, 42, .3) 0 1.75rem,
            transparent 1.75rem 3.5rem
        );
        pointer-events: none;
    }
}

/* ─── Section rhythm ──────────────────────────────────────────────────────────
   Alternating bands rather than dividers: on a dark theme a hairline rule
   disappears, while a shift in surface reads clearly. */

.mk-section {
    padding: 5rem 0;
}

.mk-section-tight { padding: 3rem 0; }

.mk-band {
    background: var(--bg-alt);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

/* Waypoints along the route. Gold, small, with a lead-in dash that ties them to
   the spine even where the spine isn't drawn. */
.mk-waypoint {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-family: 'Oswald', sans-serif;
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 1rem;
}

.mk-waypoint::before {
    content: '';
    width: 1.75rem;
    height: 2px;
    background: var(--action-edge);
    flex: 0 0 auto;
}

.mk-waypoint-center {
    justify-content: center;
    margin-bottom: 2rem;
}

.mk-h2 {
    font-family: 'Anton', 'Oswald', Impact, sans-serif;
    font-size: clamp(1.8rem, 5.5vw, 2.9rem);
    line-height: 1.02;
    letter-spacing: .01em;
    text-transform: uppercase;
    margin: 0 0 1.5rem;
}

.mk-lede {
    font-size: clamp(1rem, 2.2vw, 1.15rem);
    line-height: 1.7;
    color: var(--muted);
    margin: 0 0 1.15rem;
}

.mk-lede:first-of-type { color: var(--text); }

.mk-body {
    color: var(--muted);
    line-height: 1.75;
    margin: 0 0 1rem;
}

.mk-body-wide { max-width: 44rem; }

.mk-sub {
    color: var(--muted);
    max-width: 40rem;
    margin: -.6rem 0 2.5rem;
    line-height: 1.7;
}

.mk-note {
    font-size: .88rem;
    color: var(--muted-dim);
    line-height: 1.65;
    margin: 1.5rem 0 0;
}

.mk-note-center {
    text-align: center;
    max-width: 38rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2.5rem;
}

/* ─── Highlights ──────────────────────────────────────────────────────────── */

.mk-pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 2.5rem 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mk-pillar { text-align: left; }

.mk-pillar-icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(200, 145, 42, .35);
    border-radius: 50%;
    color: var(--gold);
}

.mk-pillar-icon svg { width: 1.5rem; height: 1.5rem; }

.mk-pillar-title {
    font-family: 'Oswald', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin: 0 0 .5rem;
}

.mk-pillar-text {
    font-size: .92rem;
    color: var(--muted);
    line-height: 1.65;
    margin: 0;
}

/* On a phone the grid drops to one or two columns and the stacked icon turns
   each pillar into a tall block, so four of them become a long scroll of mostly
   empty space. Setting the icon beside its heading pairs the two as one label
   and lets the copy run the full width underneath. */
@media (max-width: 40rem) {
    .mk-pillars {
        gap: 1.75rem 2rem;
    }

    .mk-pillar {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: .85rem;
        align-items: center;
    }

    .mk-pillar-icon {
        width: 2.5rem;
        height: 2.5rem;
        margin-bottom: 0;
    }

    .mk-pillar-icon svg { width: 1.25rem; height: 1.25rem; }

    .mk-pillar-title { margin: 0; }

    /* Second column, not full width: the copy hangs off the heading's left edge
       so the icon owns a margin of its own and each pillar reads as one block.
       Running it back under the icon left the text floating with no relationship
       to the heading above it. */
    .mk-pillar-text {
        grid-column: 2;
        margin-top: .35rem;
    }
}

/* ─── Split (copy + image) ────────────────────────────────────────────────── */

.mk-split {
    display: grid;
    gap: 2.5rem;
    align-items: center;
}

@media (min-width: 52rem) {
    .mk-split:not(.is-solo) { grid-template-columns: 1fr 1fr; }
}

.mk-split.is-solo { max-width: 44rem; }

/* The event poster, shown whole. object-fit: contain rather than cover — the
   artwork has the event name and dates set into it, and cropping would cut the
   type. The plate behind it gives the letterboxing somewhere to land. */
.mk-poster {
    margin: 0;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface-2);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
}

.mk-poster img {
    display: block;
    width: 100%;
    height: auto;
}

.mk-split-art {
    margin: 0;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
}

.mk-split-art img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 26rem;
    object-fit: cover;
}

/* ─── Sealed route ────────────────────────────────────────────────────────────
   There is no itinerary on this page and there must never be one — the rally is
   a clue-by-clue navigation game, so the route is confidential. This panel is
   what stands in its place, and it is styled as a sealed document rather than as
   a content section: a dashed border reads as a perforated envelope, and the
   dashes are the same road-marking motif the page's route spine uses. */

.mk-sealed {
    position: relative;
    overflow: hidden;
    margin-top: .5rem;
    padding: 3.25rem 2.5rem;
    min-height: 24rem;
    display: flex;
    align-items: center;
    border: 1px dashed rgba(200, 145, 42, .45);
    border-radius: var(--radius);
    background:
        radial-gradient(80% 100% at 50% 0%, rgba(200, 145, 42, .07), transparent 70%),
        var(--surface);
}

/* Optional background artwork. Two stacked layers so the gradient survives as an
   overlay rather than being replaced by the photograph. */
.mk-sealed.has-art::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--seal-img);
    background-size: cover;
    background-position: center;
}

/* The copy occupies the left two-thirds, so the scrim is weighted that way:
   heavy where the text sits, clearing to the right so the artwork reads. The
   gold radial from the flat version rides on top, keeping the card's warmth
   whether or not an image is set. */
.mk-sealed.has-art::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(12, 13, 15, .95) 0%,
            rgba(12, 13, 15, .92) 52%,
            /* Full strength has to outlast the copy column, not end level with it,
               or the last words of each line sit on the fade. */
            rgba(12, 13, 15, .84) 70%,
            rgba(12, 13, 15, .48) 86%,
            rgba(12, 13, 15, .30) 100%),
        radial-gradient(80% 100% at 50% 0%, rgba(200, 145, 42, .12), transparent 70%);
}

.mk-sealed-copy {
    position: relative;
    z-index: 1;
    max-width: 66%;
}

/* Muted grey holds up on the flat card but not over a photograph, so the
   supporting paragraphs lift a step and pick up a shadow. */
.mk-sealed.has-art .mk-lede {
    color: #DCDFE3;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
}

.mk-sealed.has-art .mk-sealed-title { text-shadow: 0 2px 12px rgba(0, 0, 0, .7); }

/* Below the two-column breakpoint there is no room to hold the copy to a third
   of the width, so it runs full width and the scrim turns vertical to match. */
@media (max-width: 52rem) {
    .mk-sealed {
        padding: 2.5rem 1.75rem;
        min-height: 0;
    }

    .mk-sealed-copy { max-width: 100%; }

    .mk-sealed.has-art::after {
        background:
            linear-gradient(180deg,
                rgba(12, 13, 15, .82) 0%,
                rgba(12, 13, 15, .92) 45%,
                rgba(12, 13, 15, .96) 100%),
            radial-gradient(80% 100% at 50% 0%, rgba(200, 145, 42, .12), transparent 70%);
    }
}

/* The lock is an inline part of the heading, not a flex sibling of it. Two things
   fall out of that and both are why it's done this way: it rides the first line
   when the heading wraps to two, and `vertical-align` centres it on that line
   instead of on a baseline — a disc sitting on a baseline hangs half of itself
   below the text, which is what makes badges like this look dropped. */
.mk-sealed-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    width: 2.5rem;
    height: 2.5rem;
    margin-right: .85rem;
    border-radius: 50%;
    background: var(--action);
    color: var(--action-ink);
    box-shadow: 0 6px 18px rgba(165, 56, 42, .35);
    /* Anton is all-caps with no descenders, so its optical centre sits above the
       middle `vertical-align` computes from the x-height. This lifts the disc
       onto the cap band. */
    transform: translateY(-.1em);
}

.mk-sealed-mark svg { width: 1.25rem; height: 1.25rem; }

.mk-sealed-title { margin-bottom: 1.25rem; }

.mk-sealed-alone { margin: 0 0 1.25rem; }

.mk-sealed .mk-lede:last-child { margin-bottom: 0; }

/* ─── Packages ────────────────────────────────────────────────────────────────
   Presentational here — no selection state. The interactive radio cards live on
   the entry form; repeating that affordance on a page where nothing can be
   selected would promise an interaction the page doesn't have. */

/* 13.5rem, not 15rem: at 15rem four cards plus their gaps come to a few pixels
   more than the 66rem column, so the fourth package wrapped onto its own row. */
.mk-packages {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
    gap: 1.25rem;
}

.mk-pkg {
    display: flex;
    flex-direction: column;
    padding: 1.75rem 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    /* The oxblood cap is the tell that this is a package and not just a panel;
       it lifts to gold on hover, which is the same accent-leads logic the CTAs
       use. --action-edge rather than --action: a 3px rule of the button fill
       would be too dark to register against the card. */
    border-top: 3px solid var(--action-edge);
    transition: border-color .18s, transform .18s;
}

.mk-pkg:hover {
    border-color: var(--border-hi);
    border-top-color: var(--gold);
    transform: translateY(-3px);
}

.mk-pkg-head {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    margin-bottom: 1rem;
}

.mk-pkg-name {
    font-family: 'Anton', sans-serif;
    font-size: 1.5rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    margin: 0;
}

.mk-pkg-tag {
    margin-left: auto;
    font-family: 'Oswald', sans-serif;
    font-size: .66rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--error);
    border: 1px solid rgba(225, 54, 44, .4);
    background: rgba(225, 54, 44, .1);
    border-radius: 999px;
    padding: .2rem .6rem;
    white-space: nowrap;
}

/* Every card reserves the qualifier slot above the figure, whether or not it has
   one to show. That keeps all four prices on the same baseline — the reason the
   label used to be set inline — while letting the figures themselves start hard
   against the left edge, so the Family card scans like the fixed-price ones
   instead of having its price shunted sideways by a word. */
.mk-pkg-price {
    position: relative;
    font-family: 'Oswald', sans-serif;
    font-size: 2.1rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .01em;
    padding-top: 1.05rem;
    margin: 0 0 .35rem;
}

.mk-pkg-from {
    position: absolute;
    top: 0;
    left: 0;
    font-size: .7rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--muted-dim);
}

.mk-pkg-people {
    font-family: 'Oswald', sans-serif;
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 1rem;
}

/* Room names run to one or two lines depending on the package, so the box is
   sized for two either way — otherwise the inclusion lists start at a different
   height on each card in the row. */
/* The room is the card's payload now that the shared inclusions have moved out,
   so it is set as a labelled fact rather than a caption. min-height keeps a
   one-line room name level with a two-line one across the row. */
.mk-pkg-room {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    margin: 0 0 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    min-height: 4.4rem;
}

.mk-pkg-room-label {
    font-family: 'Oswald', sans-serif;
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--muted-dim);
}

.mk-pkg-room-name {
    font-family: 'Oswald', sans-serif;
    font-size: 1.02rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--text);
}

/* ─── Shared inclusions strip ─────────────────────────────────────────────────
   One statement of what every package carries, under the grid where it reads as
   a floor beneath all four rather than as a feature of any one of them. */

.mk-pkg-shared {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .6rem 1.75rem;
    margin-top: 2rem;
    padding: 1.1rem 1.4rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.mk-pkg-shared-label {
    margin: 0;
    font-family: 'Oswald', sans-serif;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold);
}

.mk-pkg-shared-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mk-pkg-shared-list li {
    position: relative;
    padding-left: 1.4rem;
    font-size: .92rem;
    color: var(--muted);
}

.mk-pkg-shared-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--green);
}

/* ─── Hoody upsell ────────────────────────────────────────────────────────────
   The card itself is `.hoody-drop`, defined once in rally.css and shared with the
   entry form so the two pages can't drift apart. All this page adds is the top
   margin — rally.css only reserves space below it, because on the form the card
   sits directly under a section heading. Don't restyle the card from here. */

.mk-wrap > .hoody-drop { margin-top: 2rem; }

/* ─── Ledger (included vs own account) ────────────────────────────────────────
   Side by side so the two halves of the cost are read together. */

.mk-ledger {
    display: grid;
    gap: 2.5rem;
    margin-top: 2rem;
}

@media (min-width: 46rem) {
    .mk-ledger:not(.is-solo) { grid-template-columns: 1fr 1fr; gap: 3rem; }
}

.mk-ledger.is-solo { max-width: 44rem; }

.mk-ledger-head {
    font-family: 'Oswald', sans-serif;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 1rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--border);
}

.mk-ledger-note {
    margin: -.4rem 0 1rem;
    font-size: .88rem;
    color: var(--muted-dim);
}

/* Inside the ledger the inclusion list is a single column — it sits in a half
   width column already, and letting it fan out again would break the pairing. */
.mk-ledger .mk-included {
    grid-template-columns: 1fr;
    gap: .7rem;
}

.mk-own {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .7rem;
}

/* An arrow, not a cross. These aren't things you're being denied — they're the
   line items that leave your own pocket, so the mark points outward rather than
   reading as a refusal. */
.mk-own li {
    position: relative;
    padding-left: 1.9rem;
    font-size: .95rem;
    line-height: 1.5;
    color: var(--muted);
}

.mk-own li::before {
    content: '→';
    position: absolute;
    left: 0;
    top: -.02em;
    color: var(--action-edge);
    font-size: 1rem;
}

.mk-pkg-cta {
    margin-top: auto;
    font-family: 'Oswald', sans-serif;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold);
    text-decoration: none;
}

.mk-pkg-cta:hover { color: var(--gold-hi); }
.mk-pkg-cta:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.mk-pkg-cta.is-disabled {
    color: var(--muted-dim);
    cursor: not-allowed;
}

/* Sold out is signalled by text and a tag, never by colour alone. */
.mk-pkg.is-gone {
    opacity: .58;
    border-top-color: var(--border-hi);
}

.mk-pkg.is-gone:hover { transform: none; }

/* ─── Photo grids ─────────────────────────────────────────────────────────── */

.mk-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.mk-tile {
    margin: 0;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface);
}

.mk-tile img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.mk-tile figcaption {
    padding: .7rem .9rem;
    font-size: .82rem;
    color: var(--muted);
}

/* ─── What's included ─────────────────────────────────────────────────────── */

.mk-included {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: .75rem 1.5rem;
}

.mk-included li {
    position: relative;
    padding-left: 1.9rem;
    font-family: 'Oswald', sans-serif;
    font-size: .95rem;
    font-weight: 500;
    letter-spacing: .06em;
    color: var(--text);
}

.mk-included li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--green);
    font-size: 1.05rem;
}

/* Qualitative scarcity only — exact remaining counts stay in the admin, because
   rooms are a soft cap and a stale "1 left" would read badly. */
.mk-scarcity {
    margin: 2.5rem 0 0;
    padding: 1.1rem 1.4rem;
    border-left: 3px solid var(--gold);
    background: rgba(200, 145, 42, .08);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-family: 'Oswald', sans-serif;
    font-size: 1rem;
    letter-spacing: .06em;
    color: #EFD09A;
}

/* ─── FAQ ─────────────────────────────────────────────────────────────────────
   Native <details>, which comes with keyboard support and open-by-find-in-page
   for free — a hand-rolled accordion would have to re-earn both. */

.mk-faq {
    border-top: 1px solid var(--border);
}

.mk-q {
    border-bottom: 1px solid var(--border);
}

.mk-q summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 0;
    cursor: pointer;
    list-style: none;
    font-family: 'Oswald', sans-serif;
    font-size: 1.02rem;
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--text);
}

.mk-q summary::-webkit-details-marker { display: none; }
.mk-q summary:hover { color: var(--gold); }
.mk-q summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.mk-q-mark {
    width: 1.15rem;
    height: 1.15rem;
    margin-left: auto;
    flex: 0 0 auto;
    color: var(--muted-dim);
    transition: transform .2s;
}

.mk-q[open] .mk-q-mark { transform: rotate(180deg); }

.mk-q p {
    margin: 0 0 1rem;
    padding-right: 2.15rem;
    color: var(--muted);
    line-height: 1.75;
}

.mk-q p:last-child { padding-bottom: .35rem; }

/* ─── Sponsors ────────────────────────────────────────────────────────────── */

.mk-sponsors {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mk-sponsors img {
    height: 2.6rem;
    width: auto;
    max-width: 9rem;
    object-fit: contain;
    opacity: .75;
    transition: opacity .18s;
}

.mk-sponsors a:hover img { opacity: 1; }
.mk-sponsors a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* ─── Closing CTA ─────────────────────────────────────────────────────────── */

.mk-final {
    position: relative;
    overflow: hidden;
    padding: 5.5rem 0;
    text-align: center;
    background:
        radial-gradient(70% 120% at 50% 0%, rgba(165, 56, 42, .22), transparent 70%),
        var(--bg-alt);
    border-top: 1px solid var(--border);
}

/* Optional background artwork, same two-layer arrangement as the sealed card:
   the photograph underneath, the existing red glow kept on top as an overlay so
   the band still reads as part of this page rather than as a stock image. */
.mk-final.has-art {
    padding: 7rem 0;
    background: var(--bg-alt);
}

.mk-final.has-art::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--final-img);
    background-size: cover;
    background-position: center;
}

/* This band's copy is centred rather than held to one side, so the wash is even
   across the width instead of weighted left like the sealed card's. It lifts a
   little through the middle to let the artwork show behind the heading. */
.mk-final.has-art::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(10, 10, 10, .90) 0%,
            rgba(10, 10, 10, .74) 42%,
            rgba(10, 10, 10, .88) 100%),
        radial-gradient(70% 120% at 50% 0%, rgba(165, 56, 42, .26), transparent 70%);
}

.mk-final > .mk-wrap {
    position: relative;
    z-index: 1;
}

.mk-final.has-art .mk-final-title { text-shadow: 0 2px 14px rgba(0, 0, 0, .75); }

.mk-final.has-art .mk-final-sub {
    color: #DCDFE3;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
}

/* ─── Back to top ─────────────────────────────────────────────────────────────
   Driven by the same trigger as the sticky bar — both mean "you have scrolled
   past the hero" — so the two appear together. */

.mk-totop {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 45;
    display: grid;
    place-items: center;
    width: 2.9rem;
    height: 2.9rem;
    padding: 0;
    border: 1px solid var(--border-hi);
    border-radius: 50%;
    background: rgba(20, 21, 24, .92);
    backdrop-filter: blur(8px);
    color: var(--text);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

/* The class sets display: grid, which would otherwise beat the hidden
   attribute's own display: none. */
.mk-totop[hidden] { display: none; }

.mk-totop:hover {
    background: var(--action);
    border-color: var(--action-edge);
    color: var(--action-ink);
}

.mk-totop:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.mk-totop svg { width: 1.15rem; height: 1.15rem; }

.mk-final-title {
    font-family: 'Anton', sans-serif;
    font-size: clamp(2rem, 7vw, 3.4rem);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .01em;
    margin: 0 0 1rem;
}

.mk-final-sub {
    color: var(--muted);
    max-width: 32rem;
    margin: 0 auto 2rem;
    line-height: 1.7;
}

/* ─── Footer ──────────────────────────────────────────────────────────────── */

.mk-footer {
    padding: 3rem 0 4rem;
    border-top: 1px solid var(--border);
    background: var(--bg);
}

.mk-footer-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: space-between;
    align-items: flex-start;
}

.mk-footer-name {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin: 0;
}

.mk-footer-dates {
    font-size: .85rem;
    color: var(--muted-dim);
    margin: .35rem 0 0;
}

.mk-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mk-footer-links a {
    font-size: .88rem;
    color: var(--muted);
    text-decoration: none;
}

.mk-footer-links a:hover { color: var(--text); }
.mk-footer-links a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.mk-footer-fine {
    margin: 2.5rem 0 0;
    font-size: .78rem;
    color: var(--muted-dim);
}

/* ─── Scroll reveal ───────────────────────────────────────────────────────────
   The class is added by JS only when the visitor hasn't asked for reduced
   motion, so there is no state in which content can be left stuck at opacity 0
   — no JS, no class, no hiding. */

.will-reveal {
    opacity: 0;
    transform: translateY(1.25rem);
    transition: opacity .6s ease, transform .6s ease;
}

.will-reveal.is-revealed {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .will-reveal,
    .will-reveal.is-revealed {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .mk-scroll-cue svg { animation: none; }
    .mk-pkg:hover { transform: none; }
    .mk-q-mark { transition: none; }
    .mk-totop { transition: none; }
}