/* ==========================================================================
   Taiping Half Marathon 2026
   ========================================================================== */

/* --- tokens --------------------------------------------------------------- */
:root {
    /* ground is a green-biased near-black, not pure #000 */
    --ground:      #050a07;
    --surface:     #0b140f;
    --surface-2:   #111c16;
    --line:        #1e2c24;
    --line-strong: #2b3d33;

    --green: #46e07c;
    --green-dim: #2fa85b;
    --amber: #f0a93b;
    --red:   #e8543f;

    --ink:    #e9f1ec;
    --ink-2:  #b6c6bc;
    --muted:  #8ca096;

    --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --font-body:    "Archivo", "Helvetica Neue", Arial, sans-serif;
    --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --page:  1200px;
    --gut:   clamp(20px, 5vw, 56px);

    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 22px;

    --ease: cubic-bezier(.22, .61, .36, 1);
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 92px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--font-display);
    line-height: 1.02;
    text-wrap: balance;
}

p { margin: 0; }

::selection { background: var(--green); color: #04120a; }

:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 3px;
    border-radius: 3px;
}

.wrap {
    width: 100%;
    max-width: var(--page);
    margin-inline: auto;
    padding-inline: var(--gut);
}

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- navigation ----------------------------------------------------------- */
.nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 90;
    padding: 18px 0;
    transition: padding .35s var(--ease), background-color .35s var(--ease),
                border-color .35s var(--ease), backdrop-filter .35s var(--ease);
    border-bottom: 1px solid transparent;
}

.nav.is-stuck {
    padding: 10px 0;
    background: rgba(5, 10, 7, .82);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom-color: var(--line);
}

.nav__inner {
    display: flex;
    align-items: center;
    gap: 28px;
}

.nav__brand {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    margin-right: auto;
    flex-shrink: 0;
}

/* the brand is a wide two-line wordmark (~4:1), so it is sized by height and
   kept large enough that "HALF MARATHON" stays legible once the nav condenses */
.nav__brand img {
    height: 40px;
    width: auto;
    transition: height .35s var(--ease);
}

.nav.is-stuck .nav__brand img { height: 32px; }

.nav__links {
    display: flex;
    align-items: center;
    gap: 26px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* :not(.btn) keeps these link rules from overriding the Register button,
   which is a .btn and owns its own padding, colour and radius */
.nav__links a:not(.btn) {
    position: relative;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink-2);
    padding: 4px 0;
    transition: color .25s var(--ease);
    white-space: nowrap;
}

.nav__links a:not(.btn)::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 2px;
    background: var(--green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s var(--ease);
}

.nav__links a:not(.btn):hover { color: var(--ink); }
.nav__links a:not(.btn):hover::after,
.nav__links a:not(.btn).is-active::after { transform: scaleX(1); }
.nav__links a:not(.btn).is-active { color: var(--green); }

.nav__toggle {
    display: none;
    background: none;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    width: 42px; height: 42px;
    cursor: pointer;
    padding: 0;
    position: relative;
}

.nav__toggle i {
    position: absolute;
    left: 11px;
    width: 18px; height: 2px;
    background: var(--ink);
    transition: transform .3s var(--ease), opacity .2s var(--ease);
}

.nav__toggle i:nth-child(1) { top: 14px; }
.nav__toggle i:nth-child(2) { top: 20px; }
.nav__toggle i:nth-child(3) { top: 26px; }

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

/* --- buttons -------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 24px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .03em;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .22s var(--ease), background-color .22s var(--ease),
                border-color .22s var(--ease), color .22s var(--ease),
                box-shadow .22s var(--ease);
}

.btn svg { width: 15px; height: 15px; flex-shrink: 0; }

.btn--primary {
    background: var(--green);
    color: #04120a;
    box-shadow: 0 0 0 0 rgba(70, 224, 124, .5);
}

.btn--primary:hover {
    background: #5cf091;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px -8px rgba(70, 224, 124, .55);
}

.btn--ghost {
    border-color: var(--line-strong);
    color: var(--ink);
    background: rgba(255, 255, 255, .02);
}

.btn--ghost:hover {
    border-color: var(--green);
    color: var(--green);
    transform: translateY(-2px);
}

.btn--sm { padding: 9px 17px; font-size: 13px; }

/* --- hero ----------------------------------------------------------------- */
.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 128px 0 96px;
}

.hero__bg {
    position: absolute;
    inset: 0;
    background-image: url("../img/texture.jpg");
    background-size: cover;
    background-position: center;
    opacity: .22;
    filter: saturate(.7);
}

/* canvas rainfall sits above the texture, below the content */
.hero__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero__veil {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 85% at 50% 8%, rgba(70, 224, 124, .10), transparent 62%),
        linear-gradient(to bottom, rgba(5, 10, 7, .55) 0%, rgba(5, 10, 7, .78) 55%, var(--ground) 100%);
}

.hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 26px;
}

.hero__logo {
    width: clamp(150px, 20vw, 216px);
    filter: drop-shadow(0 0 34px rgba(70, 224, 124, .28));
}

.hero__date {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 7.4vw, 5.4rem);
    font-weight: 800;
    font-style: italic;
    font-stretch: 112%;
    letter-spacing: -.015em;
    line-height: .96;
}

.hero__date sup { font-size: .44em; vertical-align: super; margin-left: .04em; }

.hero__place {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: clamp(.78rem, 1.9vw, .95rem);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--green);
}

.hero__place::before,
.hero__place::after {
    content: "";
    width: clamp(18px, 5vw, 46px);
    height: 1px;
    background: linear-gradient(to right, transparent, var(--green-dim), transparent);
}

.hero__tag {
    max-width: 46ch;
    color: var(--ink-2);
    font-size: clamp(.95rem, 2vw, 1.1rem);
}

.hero__tag b { color: var(--ink); font-weight: 700; }

.hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    justify-content: center;
    margin-top: 4px;
}

/* distance chips */
.hero__dist {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 6px;
}

.chip {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .12em;
    padding: 7px 15px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    color: var(--ink-2);
    background: rgba(255, 255, 255, .02);
}

.chip--g { border-color: rgba(70, 224, 124, .38);  color: var(--green); }
.chip--a { border-color: rgba(240, 169, 59, .38);  color: var(--amber); }
.chip--r { border-color: rgba(232, 84, 63, .38);   color: var(--red); }

/* centred with auto margins rather than translateX(-50%): the heroIn keyframe
   ends on `transform: none`, which would wipe a transform-based centring and
   shift this right by half its width once the animation finished */
.hero__scroll {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 26px;
    margin-inline: auto;
    width: max-content;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
}

.hero__scroll i {
    width: 1px;
    height: 34px;
    background: linear-gradient(to bottom, var(--green), transparent);
    animation: scrollcue 1.9s var(--ease) infinite;
}

@keyframes scrollcue {
    0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
    45%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
    55%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
    100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* --- section shell -------------------------------------------------------- */
.section { padding: clamp(52px, 7vw, 90px) 0; position: relative; }
.section--alt { background: var(--surface); }
.section--edge { border-top: 1px solid var(--line); }

.shead { margin-bottom: clamp(34px, 5vw, 58px); }

.shead__eyebrow {
    display: flex;
    align-items: center;
    gap: 11px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: 16px;
}

.shead__eyebrow::before {
    content: "";
    width: 26px; height: 1px;
    background: var(--green);
}

.shead__title {
    font-size: clamp(2rem, 5.2vw, 3.5rem);
    font-weight: 800;
    font-style: italic;
    font-stretch: 110%;
    letter-spacing: -.02em;
}

.shead__lead {
    margin-top: 16px;
    max-width: 62ch;
    color: var(--ink-2);
    font-size: clamp(1rem, 2vw, 1.12rem);
}

/* --- overview ------------------------------------------------------------- */
/* the stat rail that sat alongside this has been removed, so the overview is
   a single column held to a comfortable reading measure */
.overview { max-width: 66ch; }

.overview__body p + p { margin-top: 19px; }
.overview__body { color: var(--ink-2); }
.overview__body b { color: var(--ink); font-weight: 700; }

/* --- editions / history --------------------------------------------------
   A real chronological sequence, so the ordered-list markup and the rail
   both carry meaning rather than decoration.
   ------------------------------------------------------------------------ */
.editions {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
}

.edition {
    display: grid;
    grid-template-columns: minmax(96px, 132px) 26px 1fr auto;
    align-items: center;
    gap: clamp(14px, 2.4vw, 34px);
    padding: clamp(20px, 3vw, 30px) 0;
    border-top: 1px solid var(--line);
}

.edition:last-child { border-bottom: 1px solid var(--line); }

.edition__yr {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    font-style: italic;
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.edition__status {
    display: inline-block;
    margin-top: 9px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .15em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    color: var(--muted);
}

/* the rail: a dot per edition, joined by a line through the column */
.edition__rail {
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
}

.edition__rail::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 1px;
    background: var(--line);
}

.edition:first-child .edition__rail::before { top: 50%; }
.edition:last-child  .edition__rail::before { bottom: 50%; }

.edition__dot {
    position: relative;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: var(--ground);
    border: 2px solid var(--line-strong);
}

.edition__date {
    font-family: var(--font-display);
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    font-weight: 700;
    font-style: italic;
}

.edition__place {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 6px;
}

.edition__count { text-align: right; }

.edition__num {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3.4vw, 2.15rem);
    font-weight: 800;
    font-style: italic;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.edition__label {
    display: block;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 7px;
}

/* the current edition carries the accent */
.edition--now .edition__yr,
.edition--now .edition__num { color: var(--green); }

.edition--now .edition__dot {
    border-color: var(--green);
    background: var(--green);
}

.edition--now .edition__dot::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid var(--green);
    opacity: 0;
    animation: pulse 2.6s var(--ease) infinite;
}

@keyframes pulse {
    0%   { transform: scale(.6); opacity: .9; }
    70%  { transform: scale(1.5); opacity: 0; }
    100% { transform: scale(1.5); opacity: 0; }
}

.edition--now .edition__status {
    border-color: rgba(70, 224, 124, .45);
    color: var(--green);
}

.editions__growth {
    margin-top: 26px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}

.editions__growth b {
    color: var(--amber);
    font-weight: 600;
    font-size: 14px;
}

@media (max-width: 720px) {
    /* every cell is placed explicitly -- leaving any of them to auto-placement
       lets the count claim column 1 and push the year across */
    .edition {
        grid-template-columns: 1fr auto;
        column-gap: 18px;
        row-gap: 8px;
        align-items: start;
    }
    .edition__rail  { display: none; }
    .edition__head  { grid-column: 1; grid-row: 1; }
    .edition__meta  { grid-column: 1; grid-row: 2; }
    .edition__count { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* --- video ---------------------------------------------------------------- */
.video {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--line);
    background: #000;
    aspect-ratio: 16 / 9;
}

.video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* --- data tables ---------------------------------------------------------- */
.tablewrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface-2);
    -webkit-overflow-scrolling: touch;
    transition: box-shadow .3s var(--ease);
}

/* Horizontal scroll affordance. These tables are wider than a phone, and with
   no cue the columns past the fold are invisible. JS adds .has-overflow only
   when a table actually overflows, and .at-end once it has been scrolled
   through, so nothing shows when there is nothing to reach.
   An inset shadow is painted on the border box, so it stays pinned to the
   right edge while the content scrolls underneath it. */
.tablewrap.has-overflow {
    box-shadow: inset -38px 0 30px -28px rgba(0, 0, 0, .95);
}

.tablewrap.has-overflow.at-end { box-shadow: none; }

.scrollcue {
    display: none;
    align-items: center;
    gap: 8px;
    width: max-content;
    margin: 0 0 11px auto;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--amber);
}

.scrollcue.is-on { display: flex; }

.scrollcue svg {
    width: 15px;
    height: 15px;
    animation: nudge 1.9s var(--ease) infinite;
}

@keyframes nudge {
    0%, 55%, 100% { transform: translateX(0);   opacity: .65; }
    28%           { transform: translateX(6px); opacity: 1; }
}

/* the scroll container is focusable when it overflows, so it can be reached
   and scrolled by keyboard as well as touch */
.tablewrap:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

.dtable {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    min-width: 540px;
}

.dtable caption {
    text-align: left;
    padding: 16px 20px 0;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--amber);
}

.dtable th,
.dtable td {
    padding: 13px 18px;
    text-align: left;
    border-bottom: 1px solid var(--line);
}

.dtable thead th {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
    background: rgba(255, 255, 255, .022);
    white-space: nowrap;
}

.dtable tbody tr { transition: background-color .2s var(--ease); }
.dtable tbody tr:hover { background: rgba(70, 224, 124, .045); }
.dtable tbody tr:last-child td { border-bottom: 0; }

.dtable .code {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--green);
    width: 58px;
}

.dtable .dist {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--ink);
    white-space: nowrap;
    width: 84px;
}

.dtable .num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    text-align: center;
    white-space: nowrap;
}

.dtable td.muted { color: var(--muted); }
.dtable .win { color: var(--amber); font-weight: 600; }

/* entitlement ticks */
.tick { color: var(--green); }
.tick svg { width: 17px; height: 17px; display: inline-block; vertical-align: middle; }
.dash { color: var(--line-strong); font-weight: 700; }

/* --- fees ----------------------------------------------------------------- */
.fees {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.tier {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface-2);
    padding: 26px 24px 24px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform .3s var(--ease), border-color .3s var(--ease),
                box-shadow .3s var(--ease);
}

.tier:hover {
    transform: translateY(-4px);
    border-color: var(--line-strong);
    box-shadow: 0 18px 50px -24px rgba(0, 0, 0, .8);
}

.tier--now {
    border-color: rgba(70, 224, 124, .45);
    box-shadow: 0 0 0 1px rgba(70, 224, 124, .12), 0 20px 60px -30px rgba(70, 224, 124, .5);
}

.tier--now:hover { border-color: var(--green); }

.tier__flag {
    position: absolute;
    top: -11px; left: 24px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    background: var(--green);
    color: #04120a;
    padding: 4px 11px;
    border-radius: 999px;
    font-weight: 600;
}

.tier__name {
    font-family: var(--font-display);
    font-size: 1.28rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: -.01em;
}

.tier__note {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 6px;
}

.tier__rows { margin-top: 22px; display: grid; gap: 1px; }

.tier__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    border-top: 1px solid var(--line);
}

.tier__row span {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .1em;
    color: var(--ink-2);
}

.tier__row b {
    font-family: var(--font-display);
    font-size: 1.32rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.tier--now .tier__row b { color: var(--green); }

/* --- generic card grid ---------------------------------------------------- */
.grid {
    display: grid;
    gap: clamp(16px, 2.4vw, 26px);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

.card {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface-2);
    overflow: hidden;
    transition: transform .3s var(--ease), border-color .3s var(--ease);
}

.card:hover { transform: translateY(-4px); border-color: var(--line-strong); }

.card__media {
    padding: 22px;
    background: rgba(255, 255, 255, .014);
    display: flex;
    align-items: center;
    justify-content: center;
}

.card__media img { transition: transform .5s var(--ease); }
.card:hover .card__media img { transform: scale(1.035); }

.card__body { padding: 20px 22px 24px; }

.card__title {
    font-family: var(--font-display);
    font-size: 1.16rem;
    font-weight: 800;
    font-style: italic;
}

.card__note {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 7px;
}

/* --- routes --------------------------------------------------------------- */
.route {
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface-2);
    overflow: hidden;
    transition: border-color .3s var(--ease);
}

.route:hover { border-color: var(--line-strong); }
.route + .route { margin-top: clamp(18px, 2.5vw, 28px); }

.route__map {
    padding: clamp(18px, 3vw, 32px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .014);
    border-right: 1px solid var(--line);
}

.route__side {
    padding: clamp(22px, 3vw, 32px);
    display: flex;
    flex-direction: column;
    gap: 18px;
    justify-content: center;
}

.route__dist {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.4vw, 2.9rem);
    font-weight: 800;
    font-style: italic;
    line-height: 1;
    letter-spacing: -.02em;
}

.route--5  .route__dist { color: var(--green); }
.route--10 .route__dist { color: var(--amber); }
.route--21 .route__dist { color: var(--red); }

.route__label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 8px;
}

.qr {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

.qr__plate {
    background: #fff;
    padding: 11px;
    border-radius: var(--r-sm);
    line-height: 0;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.qr__plate:hover {
    transform: scale(1.04);
    box-shadow: 0 12px 34px -12px rgba(70, 224, 124, .45);
}

.qr__plate canvas { display: block; image-rendering: pixelated; }

.qr__cap {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    max-width: 22ch;
    line-height: 1.5;
}

/* --- race guide ----------------------------------------------------------- */
.guide {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(26px, 4vw, 50px);
    align-items: center;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background:
        radial-gradient(90% 130% at 0% 0%, rgba(70, 224, 124, .07), transparent 60%),
        var(--surface-2);
    padding: clamp(26px, 4vw, 44px);
}

.guide__title {
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 800;
    font-style: italic;
}

.guide__text { color: var(--ink-2); margin-top: 13px; max-width: 52ch; }
.guide__cta { margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap; }

/* --- size chart ----------------------------------------------------------- */
.sizing {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: clamp(24px, 4vw, 48px);
    align-items: start;
}

.sizing__notes {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    display: grid;
    gap: 11px;
    counter-reset: n;
}

.sizing__notes li {
    position: relative;
    padding-left: 30px;
    font-size: 14px;
    color: var(--ink-2);
    counter-increment: n;
}

.sizing__notes li::before {
    content: counter(n);
    position: absolute;
    left: 0; top: 1px;
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    font-family: var(--font-mono);
    font-size: 10px;
    display: grid;
    place-items: center;
    color: var(--muted);
}

.sizing__tables { display: grid; gap: 26px; }

/* --- register banner ------------------------------------------------------ */
.register {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-lg);
    border: 1px solid rgba(70, 224, 124, .28);
    padding: clamp(38px, 6vw, 68px) clamp(24px, 5vw, 60px);
    text-align: center;
    background:
        radial-gradient(80% 140% at 50% 0%, rgba(70, 224, 124, .13), transparent 62%),
        var(--surface-2);
}

/* entries are closed, so this block no longer carries the green "go" accent */
.register__status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--amber);
    border: 1px solid rgba(240, 169, 59, .4);
    border-radius: 999px;
    padding: 6px 15px;
}

.register__status::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--amber);
}

.register__title {
    font-size: clamp(1.8rem, 5vw, 3.1rem);
    font-weight: 800;
    font-style: italic;
    font-stretch: 110%;
    letter-spacing: -.02em;
}

.register__text {
    margin: 16px auto 0;
    max-width: 52ch;
    color: var(--ink-2);
}

.register__cta {
    margin-top: 28px;
    display: flex;
    gap: 13px;
    justify-content: center;
    flex-wrap: wrap;
}

/* --- footer --------------------------------------------------------------- */
.foot {
    border-top: 1px solid var(--line);
    padding: 52px 0 40px;
    background: var(--surface);
}

.foot__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: center;
    justify-content: space-between;
}

.foot__brand { display: flex; align-items: center; gap: 14px; }
.foot__brand img { height: 54px; width: auto; }

.foot__meta {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    line-height: 1.9;
}

.foot__bottom {
    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .1em;
    color: var(--muted);
}

/* ==========================================================================
   Motion
   ========================================================================== */

/* scroll reveal — JS adds .is-in once the element enters the viewport */
.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .75s var(--ease), transform .75s var(--ease);
    transition-delay: var(--d, 0ms);
}

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

/* hero load sequence */
.hero__inner > * {
    opacity: 0;
    transform: translateY(20px);
    animation: heroIn .9s var(--ease) forwards;
}

.hero__inner > *:nth-child(1) { animation-delay: .12s; }
.hero__inner > *:nth-child(2) { animation-delay: .26s; }
.hero__inner > *:nth-child(3) { animation-delay: .38s; }
.hero__inner > *:nth-child(4) { animation-delay: .50s; }
.hero__inner > *:nth-child(5) { animation-delay: .60s; }
.hero__inner > *:nth-child(6) { animation-delay: .70s; }

@keyframes heroIn { to { opacity: 1; transform: none; } }

.hero__scroll {
    opacity: 0;
    animation: heroIn .9s var(--ease) .95s forwards;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1040px) {
    .route { grid-template-columns: 1fr; }
    .route__map { border-right: 0; border-bottom: 1px solid var(--line); }
    .sizing { grid-template-columns: 1fr; }
    .sizing__shirt { max-width: 220px; }
}

/* The nav collapses earlier than the rest of the layout: eight links plus the
   brand and Register button stop fitting at around 1000px, well before the
   content grids need to reflow. */
@media (max-width: 1000px) {
    .nav__toggle { display: block; }

    .nav__links {
        position: fixed;
        inset: 0 0 auto 0;
        top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: rgba(5, 10, 7, .97);
        backdrop-filter: blur(16px);
        border-bottom: 1px solid var(--line);
        padding: 8px var(--gut) 20px;
        transform: translateY(-8px);
        opacity: 0;
        pointer-events: none;
        transition: opacity .28s var(--ease), transform .28s var(--ease);
    }

    .nav__links.is-open { opacity: 1; transform: none; pointer-events: auto; }
    .nav__links a:not(.btn) { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
    .nav__links a:not(.btn)::after { display: none; }
    .nav__links .btn { margin-top: 16px; justify-content: center; }
}

@media (max-width: 900px) {
    .fees { grid-template-columns: 1fr; }
    .grid--3 { grid-template-columns: repeat(2, 1fr); }
    .guide { grid-template-columns: 1fr; justify-items: start; }
}

@media (max-width: 620px) {
    body { font-size: 16px; }
    .grid--2, .grid--3 { grid-template-columns: 1fr; }
    .register__cta .btn, .hero__cta .btn { width: 100%; justify-content: center; }
    .foot__grid { flex-direction: column; align-items: flex-start; }
    .dtable { font-size: 14px; }
    .dtable th, .dtable td { padding: 11px 14px; }
}

/* ==========================================================================
   Reduced motion — keep the page fully legible with no movement
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    .reveal { opacity: 1; transform: none; }
    .hero__inner > *, .hero__scroll { opacity: 1; transform: none; animation: none; }
    .hero__scroll i { animation: none; }
}

/* ==========================================================================
   Print — QR codes and tables should survive a printout
   ========================================================================== */
@media print {
    .nav, .hero__canvas, .hero__scroll, .video, .register { display: none !important; }
    body { background: #fff; color: #000; }
    .section, .section--alt, .foot { background: #fff; padding: 12px 0; }
    .card, .route, .tablewrap, .guide, .tier { border-color: #bbb; background: #fff; break-inside: avoid; }
    .shead__title, .route__dist { color: #000; }
    .reveal { opacity: 1 !important; transform: none !important; }
}