/* Eventra.Run website styles (step 2, follows the Figma design: Deep Blue header, photo hero with search bar,
   white cards, Deep Blue action card on race pages). Brand colours come from tokens.css (copied from the Mini App).
   Contrast rules (same as the Mini App): Orange and Sky Blue are never text on light surfaces.
   Orange = fill with Deep Blue text (4.6:1), or text only on Deep Blue. Light: Deep Blue text on white (13:1).
   Dark: Sky Blue is the accent on dark surfaces; fills keep dark text. */

:root {
  --bg: #ffffff;
  --surface: var(--brand-light);
  --card: #ffffff;
  --text: var(--brand-charcoal);
  --head: var(--brand-deep);
  --accent: var(--brand-deep);
  --accent-text: #ffffff;
  --muted: #4b5563;
  --line: #d9dfeb;
  --chip: #e8eefb;
  --chip-text: var(--brand-deep);
  --sky-tint: #dff1ff;
  --shadow: 0 1px 2px rgba(11, 45, 107, .06), 0 6px 18px rgba(11, 45, 107, .08);
  --font: 'Poppins', 'Noto Sans Khmer', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r: 16px;
}
:root[data-theme="dark"] {

  --bg: #0e1422;
  --surface: #131b2e;
  --card: #1a2234;
  --text: #e8ecf4;
  --head: #ffffff;
  --accent: var(--brand-sky);
  --accent-text: #0b1220;
  --muted: #a9b3c6;
  --line: #2b3550;
  --chip: #243049;
  --chip-text: #e8ecf4;
  --sky-tint: #17314d;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .25);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.6; color: var(--text); background: var(--bg); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { color: var(--head); line-height: 1.25; margin: 0; }
p { margin: 0; }
[hidden] { display: none !important; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.center { text-align: center; }
.sr, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { position: fixed; top: 8px; left: 8px; z-index: 50; background: #fff; color: var(--brand-deep); padding: 10px 14px; border-radius: 8px; }
:focus-visible { outline: 3px solid var(--brand-orange); outline-offset: 2px; }
.ic { width: 20px; height: 20px; flex: none; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; min-height: 48px; border-radius: 12px; border: 0; font: 600 15px/1.2 var(--font); text-decoration: none; cursor: pointer; background: var(--accent); color: var(--accent-text); }
.btn-orange { background: var(--brand-orange); color: var(--brand-deep); }
.btn-orange:hover { filter: brightness(1.05); }
.btn-sm { min-height: 40px; padding: 8px 16px; font-size: 14px; border-radius: 10px; }
.btn-block { display: flex; width: 100%; }
.btn-soft { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .35); }
.btn-soft-dark { background: transparent; color: var(--head); border: 1px solid var(--line); }
.btn-ghost { background: transparent; color: var(--head); border: 1.5px solid var(--head); }
.btn-disabled { background: var(--chip); color: var(--muted); cursor: default; }

/* ---------- badges ---------- */
.btn-sm { white-space: nowrap; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.badge-open { background: var(--brand-deep); color: #fff; }
.badge-closed, .badge-orange { background: var(--brand-orange); color: var(--brand-deep); }
.badge-orange.urgent { font-weight: 700; box-shadow: 0 0 0 2px var(--brand-deep) inset; }
.badge-urgency { background: var(--brand-charcoal); color: #fff; }
.badge-blue { background: var(--sky-tint); color: var(--chip-text); }
.badge-grey { background: var(--chip); color: var(--muted); }
:root[data-theme="dark"] .badge-open { background: var(--brand-sky); color: #0b1220; }
:root[data-theme="dark"] .badge-urgency { background: #3b4559; color: #fff; }
:root[data-theme="dark"] .badge-orange.urgent { box-shadow: none; }

/* ---------- header (floating glass bar) / footer ---------- */
.site-header { position: fixed; top: 14px; left: 0; right: 0; z-index: 40; padding: 0 16px; pointer-events: none; }
.hbar { pointer-events: auto; position: relative; display: flex; align-items: center; gap: 14px; max-width: 1180px; margin: 0 auto; height: 64px; padding: 0 12px 0 10px; border-radius: 999px; color: #fff;
  background: rgba(8, 31, 74, .55); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 10px 30px rgba(3, 12, 36, .28); transition: height .25s ease, background .25s ease; }
.site-header.scrolled .hbar { height: 58px; background: rgba(8, 31, 74, .92); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.logo { width: auto; height: 32px; }
.logo-tile { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border-radius: 12px; flex: none; }
.logo-tile .logo { width: 32px; height: 27px; }
.wordmark { font-weight: 700; font-size: 20px; letter-spacing: .2px; }
.wordmark .run { color: var(--brand-orange); }
.hnav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.hlink { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 500; font-size: 15px; padding: 8px 12px; position: relative; white-space: nowrap; }
.hlink .ic-nav, .hcta .ic-nav { width: 17px; height: 17px; stroke-width: 1.9; }
.hlink::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #ff6b35, #ffb347); transform: scaleX(0); transition: transform .2s ease; }
.hlink:hover::after, .hlink.on::after { transform: scaleX(1); }
.hcta { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; padding: 10px 18px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 14.5px; white-space: nowrap;
  background: linear-gradient(135deg, #ff6b35, #ff8f3d); color: var(--brand-deep); box-shadow: 0 6px 18px rgba(255, 107, 53, .45); transition: transform .2s ease, box-shadow .2s ease; }
.hcta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(255, 107, 53, .6); }
.hmenu { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; align-items: center; justify-content: center; padding: 0; }
.hmenu .ic { width: 22px; height: 22px; }

/* language switcher */
.lang-sw { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px 0 10px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .08); color: #fff; font: 700 13px/1 var(--font); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.lang-btn:hover, .lang-btn[aria-expanded="true"] { border-color: var(--brand-orange); box-shadow: 0 0 0 3px rgba(255, 107, 53, .3); }
.lang-chev { transition: transform .2s ease; }
.lang-btn[aria-expanded="true"] .lang-chev { transform: rotate(180deg); }
.flag { display: inline-flex; width: 26px; height: 17px; border-radius: 3px; overflow: hidden; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .18); }
.flag svg { display: block; width: 100%; height: 100%; }
.lang-menu { position: absolute; right: 0; top: calc(100% + 10px); min-width: 190px; padding: 6px; background: #fff; color: #1f2937; border-radius: 12px; box-shadow: 0 16px 40px rgba(3, 12, 36, .35); opacity: 0; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease; z-index: 5; }
.lang-menu.open { opacity: 1; transform: none; }
.lang-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; font-size: 14px; font-weight: 600; }
.lang-item.on { background: #fff1e8; }
.lang-item.off { color: #4b5563; cursor: not-allowed; }
.li-name { flex: 1; }
.li-code { font-size: 12px; color: #4b5563; font-weight: 600; }
.li-end { display: inline-flex; width: 38px; justify-content: flex-end; }
.li-end .ic { width: 16px; height: 16px; color: var(--brand-deep); }
.soon { font-size: 10px; font-weight: 800; letter-spacing: .06em; padding: 2px 7px; border-radius: 999px; background: #e8eefb; color: var(--brand-deep); }

@media (max-width: 900px) {
  .hmenu { display: inline-flex; }
  .hnav { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 10px); flex-direction: column; align-items: stretch; gap: 4px; margin: 0; padding: 12px;
    border-radius: 24px; background: rgba(8, 31, 74, .97); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 16px 40px rgba(3, 12, 36, .4); }
  .site-header.open .hnav { display: flex; }
  .hlink { padding: 12px 14px; border-radius: 12px; }
  .hlink::after { left: 14px; right: auto; width: 36px; bottom: 6px; }
  .hcta { margin: 6px 0 0; justify-content: center; padding: 14px 18px; }
  .lang-sw { margin-left: auto; }
}
@media (max-width: 440px) {
  .site-header { padding: 0 10px; }
  .hbar { gap: 8px; padding: 0 8px; }
  .wordmark { font-size: 17px; }
  .brand { gap: 8px; min-width: 0; }
  .logo-tile { width: 40px; height: 40px; }
  .logo-tile .logo { width: 32px; height: 27px; }
  .lang-btn { padding: 0 9px 0 8px; gap: 5px; }
}
body:not(.home) main { padding-top: 92px; }

.org-cta { background: var(--brand-deep); color: #fff; padding: 56px 0; margin-top: 56px; }
.org-cta h2 { color: #fff; font-size: clamp(22px, 5vw, 30px); margin-bottom: 10px; }
.org-cta p { max-width: 560px; margin: 0 auto 22px; opacity: .92; }
.site-footer { background: #081f4a; color: #dbe3f4; padding: 40px 0 20px; font-size: 14px; }
.site-footer a { color: #dbe3f4; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.foot-grid { display: grid; gap: 28px; grid-template-columns: 1.2fr 1.8fr; }
.foot-brand p { margin-top: 12px; max-width: 360px; opacity: .85; }
.foot-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.foot-cols h3 { color: #fff; font-size: 14px; margin-bottom: 10px; }
.foot-cols a { display: block; padding: 4px 0; }
.foot-bottom { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .15); font-size: 12.5px; opacity: .85; }
@media (max-width: 720px) { .foot-grid { grid-template-columns: 1fr; } .foot-bottom { flex-direction: column; } }

/* ---------- hero + search ---------- */
.hero-wrap { position: relative; }
.hero { position: relative; color: #fff; padding: 130px 0 96px; background: #0b1530; overflow: hidden; }
.hero-bg, .hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-bg img { object-fit: cover; }
.hero-bg { z-index: 0; }  /* own stacking layer: keeps the slides and fade below the hero text */
.hero-slides { position: absolute; inset: 0; }
.hslide { opacity: 0; transition: opacity 1.8s ease-in-out; transform: scale(1.02); }
.hslide.on { opacity: 1; animation: kenburns 9s ease-out forwards; z-index: 1; }
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .hslide.on { animation: none; } }
.hero-bg::after { content: ''; position: absolute; inset: 0; z-index: 2;
  background: radial-gradient(ellipse 55% 60% at 80% 35%, rgba(255, 107, 53, .22), transparent 70%), radial-gradient(ellipse 50% 70% at 95% 80%, rgba(56, 130, 246, .28), transparent 70%),
    linear-gradient(90deg, rgba(8, 25, 66, .94) 0%, rgba(8, 25, 66, .78) 45%, rgba(8, 25, 66, .4) 100%), linear-gradient(180deg, rgba(11, 21, 48, 0) 50%, #0b1530 100%); }
.hero-in { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.hero-grid.no-cards { grid-template-columns: minmax(0, 1fr); }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--brand-orange); color: var(--brand-deep); font-weight: 700; font-size: 13px; padding: 6px 14px; border-radius: 999px; margin-bottom: 18px; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #b6f23c; box-shadow: 0 0 0 0 rgba(182, 242, 60, .7); animation: pulse 1.8s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(182, 242, 60, .7); } 70% { box-shadow: 0 0 0 9px rgba(182, 242, 60, 0); } 100% { box-shadow: 0 0 0 0 rgba(182, 242, 60, 0); } }
.hero h1 { color: #fff; font-size: clamp(36px, 5.4vw, 58px); line-height: 1.12; max-width: 640px; margin-bottom: 16px; }
.grad { background: linear-gradient(90deg, #ff6b35, #ffb347); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.hero-copy p { max-width: 520px; font-size: 17px; color: #fff; opacity: .95; margin-bottom: 16px; }
.hero-copy .hero-org { font-size: 15px; opacity: 1; margin-bottom: 0; }
.hero-org a { color: #ffb347; text-decoration: none; }
.hero-org a:hover { text-decoration: underline; }

/* featured race cards (3 per page, frosted glass) */
.hero-cards { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fpages { display: grid; grid-template-areas: 'stack'; grid-template-columns: minmax(0, 1fr); }
.fpage { grid-area: stack; display: flex; flex-direction: column; gap: 12px; visibility: hidden; pointer-events: none; }
.fpage.is-active, .fpage.is-leaving { visibility: visible; }
.fpage.is-active { pointer-events: auto; }
.fcard { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 44px 14px 14px; border-radius: 16px; overflow: hidden; text-decoration: none; color: #0b2d6b;
  background: linear-gradient(135deg, rgba(255, 244, 224, .72), rgba(255, 255, 255, .66) 55%, rgba(255, 232, 238, .62));
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1.5px solid rgba(255, 153, 51, .75); box-shadow: 0 12px 30px rgba(3, 12, 36, .28);
  opacity: 0; transform: translateX(-90px); }
.fcard:hover .ftitle { text-decoration: underline; }
.fpage:not(.is-active):not(.is-leaving) .fcard { transition: none; }
/* entering: from the left, slow and smooth (1.8 s; fade 1.5 s; 0.22 s between cards) */
.fpage.is-active .fcard { opacity: 1; transform: none; transition: transform 1.8s cubic-bezier(.22, 1, .36, 1), opacity 1.5s ease; }
.fpage.is-active .fcard:nth-child(2) { transition-delay: .22s; }
.fpage.is-active .fcard:nth-child(3) { transition-delay: .44s; }
/* leaving: drifts to the right and fades (1.6 s; 0.12 s between cards) */
.fpage.is-leaving .fcard { opacity: 0; transform: translateX(90px); transition: transform 1.6s ease-in-out, opacity 1.6s ease-in-out; }
.fpage.is-leaving .fcard:nth-child(2) { transition-delay: .12s; }
.fpage.is-leaving .fcard:nth-child(3) { transition-delay: .24s; }
.fdate { flex: none; width: 62px; height: 62px; border-radius: 14px; background: #fff1d6; border: 1.5px solid var(--brand-orange); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.fdate b { font-size: 26px; font-weight: 800; color: #0b2d6b; }
.fdate i { font-style: normal; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: #44546f; margin-top: 3px; }
.fbody { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; padding-right: 22px; }
.ftitle { font-size: 17px; font-weight: 800; color: #0b2d6b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; }
.fchip { font-size: 12px; font-weight: 500; color: #0b2d6b; background: rgba(255, 255, 255, .7); border: 1px solid rgba(11, 45, 107, .2); border-radius: 7px; padding: 1px 8px; line-height: 1.6; white-space: nowrap; }
.fchip.fdist { font-weight: 500; }
.floc { font-size: 13px; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.floc b { font-weight: 800; color: #0b2d6b; }
.ribbon { position: absolute; top: 0; right: 0; width: 96px; height: 96px; overflow: hidden; pointer-events: none; }
.ribbon span { position: absolute; top: 17px; right: -30px; width: 118px; text-align: center; transform: rotate(45deg); padding: 3px 0; background: linear-gradient(135deg, #ff6b35, #ff8f3d); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 1px 1px rgba(0, 0, 0, .25); }
.fdots { display: flex; gap: 8px; justify-content: center; align-items: center; min-height: 20px; }
.fdot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .55); cursor: pointer; transition: width .3s ease, background .3s ease; position: relative; }
.fdot::before { content: ''; position: absolute; inset: -9px -5px; }
.fdot.on { width: 24px; background: var(--brand-orange); }

/* search bar: white pill overlapping the bottom edge of the hero */
.sb-wrap { position: relative; z-index: 3; margin-top: -34px; }
.searchbar { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 6px; align-items: center; background: #fff; border-radius: 999px; padding: 8px; max-width: 880px; margin: 0 auto; box-shadow: 0 18px 44px rgba(3, 12, 36, .28); }
.sb-field { position: relative; display: flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 0 16px; min-height: 48px; color: #4b5563; background: #fff; }
.sb-field + .sb-field { border-left: 1px solid #e3e8f2; border-radius: 0; }
.sb-field input, .sb-field select { flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; font: 500 15px var(--font); color: #1f2937; outline: none; appearance: none; -webkit-appearance: none; padding: 10px 0; }
.sb-sel .ic { position: absolute; right: 14px; pointer-events: none; width: 16px; height: 16px; }
.sb-sel select { padding-right: 26px; }
.sb-field:focus-within { box-shadow: 0 0 0 2px var(--brand-deep); border-radius: 999px; }
.searchbar .btn { border-radius: 999px; min-height: 48px; padding: 12px 28px; }
@media (max-width: 900px) {
  .hero { padding: 108px 0 80px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .hero-bg::after { background: linear-gradient(180deg, rgba(8, 25, 66, .86), rgba(8, 25, 66, .78) 60%, #0b1530 100%); }
}
@media (max-width: 860px) {
  .searchbar { grid-template-columns: 1fr 1fr; border-radius: 24px; gap: 8px; padding: 10px; }
  .sb-q { grid-column: 1 / -1; }
  .searchbar .btn { grid-column: 1 / -1; }
  .sb-field, .sb-field + .sb-field { border: 1px solid #d9dfeb; border-radius: 14px; }
  .sb-field:focus-within { border-radius: 14px; }
}
@media (max-width: 440px) {
  .fcard { gap: 10px; padding: 12px 40px 12px 12px; }
  .fdate { width: 54px; height: 54px; }
  .fdate b { font-size: 22px; }
  .ftitle { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
  .hbar, .hcta, .hlink::after, .lang-menu, .lang-chev, .fdot { transition: none; }
  .fcard { transform: none; }
  .fpage.is-active .fcard, .fpage.is-leaving .fcard { transform: none; transition: opacity .5s ease; transition-delay: 0s; }
}

/* ---------- early bird strip ---------- */
.eb-strip { margin-top: 40px; }
.sec-head { margin-bottom: 16px; }
.sec-head h2, .list-head h2 { font-size: clamp(22px, 4.5vw, 30px); }
.sec-head p, .count { color: var(--muted); font-size: 14.5px; margin-top: 4px; }
.eb-row { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 12px; scroll-snap-type: x proximity; }
.eb-card { flex: 0 0 260px; scroll-snap-align: start; display: block; background: var(--card); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); text-decoration: none; color: var(--text); }
.eb-img { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--chip); }
.eb-img img { width: 100%; height: 100%; object-fit: cover; }
.eb-img .badge { position: absolute; left: 10px; top: 10px; }
.eb-body { display: block; padding: 12px 14px 14px; }
.eb-name { display: block; font-weight: 600; color: var(--head); line-height: 1.3; }
.eb-org { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.eb-price { display: block; font-weight: 700; color: var(--head); margin-top: 6px; }

/* ---------- list ---------- */
.list-sec { margin-top: 40px; }
.list-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.seg { display: inline-flex; background: var(--chip); border-radius: 999px; padding: 4px; }
.seg a { padding: 8px 18px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 14px; color: var(--chip-text); }
.seg a.on { background: var(--brand-deep); color: #fff; }
:root[data-theme="dark"] .seg a.on { background: var(--brand-sky); color: #0b1220; }
.more-filters { margin-bottom: 16px; }
.more-filters summary { cursor: pointer; font-weight: 600; color: var(--head); padding: 8px 0; }
.mf-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; padding: 12px 0; font-size: 14px; }
.mf-row label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-weight: 500; }
.mf-row select { min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: 500 15px var(--font); }
.mf-row .chk { flex-direction: row; align-items: center; gap: 8px; min-height: 44px; color: var(--text); }
.mf-row .chk input { width: 20px; height: 20px; accent-color: var(--brand-deep); }
.link-btn { background: none; border: 0; padding: 10px 4px; font: 600 14px var(--font); color: var(--head); text-decoration: underline; cursor: pointer; min-height: 44px; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .grid, .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid, .grid-3 { grid-template-columns: 1fr; } }
.card { position: relative; display: flex; flex-direction: column; background: var(--card); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); transition: transform .15s ease, box-shadow .15s ease; }
.card:hover { transform: translateY(-2px); }
.card-link { position: absolute; inset: 0; z-index: 2; border-radius: var(--r); }
.card-img { position: relative; aspect-ratio: 16 / 9; background: var(--chip); overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.card-img.contain { background: var(--chip); }
.card-img img.contain { object-fit: contain; }
.noimg { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--muted); background: var(--chip); }
.noimg .ic { width: 44px; height: 44px; }
.stock-tag { position: absolute; right: 8px; bottom: 8px; background: rgba(11, 18, 32, .78); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 999px; }
.card-body { display: flex; flex-direction: column; gap: 8px; padding: 16px; flex: 1; }
.card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.card-date { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--muted); }
.card-title { font-size: 18px; line-height: 1.3; }
.card-place { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; }
.card-place .ic { width: 16px; height: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-block; background: var(--chip); color: var(--chip-text); font-size: 12.5px; font-weight: 600; padding: 2px 10px; border-radius: 999px; }
.chip-lg { font-size: 14px; padding: 6px 16px; }
.card-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
.price-note, .muted-note { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text); font-weight: 600; }
.muted-note { color: var(--muted); font-weight: 500; }
.price-note .ic, .muted-note .ic { width: 16px; height: 16px; }
.empty { grid-column: 1 / -1; padding: 28px; text-align: center; color: var(--muted); background: var(--surface); border-radius: var(--r); }
.notice { display: flex; gap: 10px; align-items: flex-start; margin-top: 28px; padding: 14px 16px; background: var(--surface); border-radius: 12px; font-size: 14px; color: var(--muted); }
.notice strong { color: var(--text); font-weight: 600; }

/* ---------- race page ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 18px; padding-bottom: 6px; font-size: 14px; color: var(--muted); }
.crumbs a { color: var(--head); }
.race { padding-bottom: 8px; }
.race-hero { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 7; background: var(--chip); margin-top: 10px; }
.race-hero img { width: 100%; height: 100%; object-fit: cover; }
.race-hero.contain img { object-fit: contain; }
@media (max-width: 620px) { .race-hero { aspect-ratio: 16 / 10; border-radius: 14px; } }
.race-body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; margin-top: 24px; align-items: start; }
@media (max-width: 920px) { .race-body { grid-template-columns: 1fr; } .action { order: -1; } }
.race-info { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.tag { display: inline-block; align-self: flex-start; background: var(--brand-orange); color: var(--brand-deep); font-size: 12px; font-weight: 700; letter-spacing: .06em; padding: 4px 12px; border-radius: 999px; }
.race h1 { font-size: clamp(28px, 6vw, 42px); }
.meta-row { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--text); }
.meta { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.card-box { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; }
.card-box h2 { font-size: 20px; margin-bottom: 12px; }
.eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.card-box h2.eyebrow { font-size: 12.5px; color: var(--muted); }
.chips.lg { gap: 10px; }
.stack h2 { font-size: 22px; margin-bottom: 8px; }
.about { color: var(--text); max-width: 70ch; }
.note-small { font-size: 13.5px; color: var(--muted); margin: -4px 0 14px; }
.np { color: var(--muted); font-style: italic; font-weight: 400; }
.fee-block + .fee-block { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.fee-block h3 { font-size: 18px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fee-sub { font-size: 13px; font-weight: 500; color: var(--muted); }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
@media (max-width: 560px) { .facts { grid-template-columns: 1fr; } }
.fact { display: grid; grid-template-columns: 20px 1fr; column-gap: 8px; background: var(--surface); border-radius: 10px; padding: 8px 12px; font-size: 13.5px; align-items: center; }
.fact .fk { color: var(--muted); }
.fact .fv { grid-column: 2; font-weight: 600; }
.tiers { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tier { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); }
.tier.now { border: 2px solid var(--head); background: var(--surface); }
.tier.ended { opacity: .6; }
.tier.ended .tier-price strong { text-decoration: line-through; }
.tier-main { display: flex; flex-direction: column; min-width: 0; }
.tier-name { font-weight: 600; color: var(--head); }
.tier-when { font-size: 13px; color: var(--muted); }
.tier-price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; }
.tier-price strong { font-size: 17px; color: var(--head); }
.eq { font-size: 12.5px; color: var(--muted); }
.tier-flag { min-width: 52px; text-align: right; }
@media (max-width: 480px) { .tier { grid-template-columns: 1fr auto; } .tier-flag { grid-column: 1 / -1; text-align: left; } .tier-flag:empty { display: none; } }
.kit { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 16px; }
@media (max-width: 560px) { .kit { grid-template-columns: 1fr; } }
.kit li { display: flex; gap: 10px; align-items: center; }
.kit em { color: var(--muted); font-style: normal; font-size: 13px; }
.line { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.sub { font-size: 14px; color: var(--muted); font-weight: 600; margin: 14px 0 10px; }
.contacts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 560px) { .contacts { grid-template-columns: 1fr; } }
.contact { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; min-height: 52px; min-width: 0; }
.contact:hover { background: var(--surface); }
.cv { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.cv b { font-weight: 600; overflow-wrap: anywhere; color: var(--head); }
.cv small { color: var(--muted); font-size: 12.5px; }
.src { font-size: 13px; color: var(--muted); }
.src a { color: var(--head); }
.eid { font-family: ui-monospace, monospace; }

.action { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 920px) { .action { position: static; } }
.action-card { background: var(--brand-deep); color: #fff; border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.action-card hr { border: 0; border-top: 1px solid rgba(255, 255, 255, .2); margin: 4px 0; width: 100%; }
.eyebrow-dark { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #c9d6f2; }
.status-big { font-size: 26px; font-weight: 700; color: #fff; line-height: 1.2; }
.status-sub { color: #dbe3f4; font-size: 14.5px; }
.kv { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.kv > div { display: grid; grid-template-columns: 20px 90px 1fr; gap: 8px; align-items: start; font-size: 14.5px; }
.kv dt { color: #c9d6f2; }
.kv dd { margin: 0; font-weight: 600; text-align: right; }
.kv .ic { margin-top: 2px; color: var(--brand-orange); }
.link-light { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 500; font-size: 14.5px; }
.cal { display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; }
.cal a { color: #fff; }
.share { display: flex; flex-direction: column; gap: 10px; }
.share-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--head); font: 600 14px var(--font); text-decoration: none; cursor: pointer; }
.chip-btn .ic { width: 18px; height: 18px; }
.copied { font-size: 13.5px; color: var(--head); font-weight: 600; }
.related { margin-top: 48px; }
.related h2 { font-size: 24px; margin-bottom: 16px; }

/* ---------- simple pages ---------- */
.simple { padding-top: 56px; padding-bottom: 24px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.simple h1 { font-size: clamp(28px, 6vw, 40px); }
.simple p { max-width: 60ch; }
.simple .btn + .btn { margin-left: 8px; }

/* ---------- light hero: clear photo, pale frosted fade behind the text, dark text, light glass header ---------- */

:root:not([data-theme="dark"]) .hero { color: var(--brand-deep); background: #eaf1fb; }
:root:not([data-theme="dark"]) .hero-bg::after {
    background: linear-gradient(90deg, rgba(245, 249, 255, .97) 0%, rgba(245, 249, 255, .9) 40%, rgba(245, 249, 255, .35) 70%, rgba(245, 249, 255, 0) 100%),
      linear-gradient(180deg, rgba(245, 249, 255, .35) 0%, rgba(245, 249, 255, 0) 22%, rgba(245, 249, 255, 0) 80%, var(--bg) 100%); }
:root:not([data-theme="dark"]) .hero h1 { color: var(--brand-deep); }
:root:not([data-theme="dark"]) .grad { background-image: linear-gradient(90deg, #ff6b35, #ff9f1c); }
:root:not([data-theme="dark"]) .hero-copy p { color: #334155; opacity: 1; }
:root:not([data-theme="dark"]) .hero-org a { color: #e8590c; }

:root:not([data-theme="dark"]) .hbar { color: var(--brand-deep); background: rgba(255, 255, 255, .6); border-color: rgba(255, 255, 255, .75); box-shadow: 0 10px 30px rgba(11, 45, 107, .14); }
:root:not([data-theme="dark"]) .site-header.scrolled .hbar { background: rgba(255, 255, 255, .9); }
:root:not([data-theme="dark"]) .hbar .brand, :root:not([data-theme="dark"]) .hlink { color: var(--brand-deep); }
:root:not([data-theme="dark"]) .hbar .wordmark .run { color: #c2410c; }
:root:not([data-theme="dark"]) .hmenu, :root:not([data-theme="dark"]) .lang-btn { color: var(--brand-deep); border-color: rgba(11, 45, 107, .25); background: rgba(255, 255, 255, .55); }
:root:not([data-theme="dark"]) .hnav { color: var(--brand-deep); }
:root:not([data-theme="dark"]) .hcta { color: #fff; }
@media (max-width: 900px) {

:root:not([data-theme="dark"]) .hero-bg::after { background: linear-gradient(180deg, rgba(245, 249, 255, .9), rgba(245, 249, 255, .78) 55%, var(--bg) 100%); }
:root:not([data-theme="dark"]) .hnav { background: rgba(255, 255, 255, .97); border-color: rgba(11, 45, 107, .12); box-shadow: 0 16px 40px rgba(11, 45, 107, .18); }
}



/* header: nav pill and language switch sit side by side (the language switch is no longer inside the pill) */
.hwrap { display: flex; align-items: center; gap: 12px; max-width: 1180px; margin: 0 auto; pointer-events: none; }
.hwrap .hbar { flex: 1; min-width: 0; max-width: none; margin: 0; }
.hwrap .lang-sw { pointer-events: auto; flex: none; }
.hwrap .lang-btn { height: 46px; background: rgba(255, 255, 255, .92); }
.hwrap .lang-menu { right: 0; }
/* Submit button: white badge with a plus, deep-blue text on orange (readable) and a soft attention glow */
.hcta { color: var(--brand-deep); padding: 10px 18px 10px 10px; gap: 9px; box-shadow: 0 6px 18px rgba(255, 107, 53, .45), 0 0 0 0 rgba(255, 107, 53, .55); animation: hctaGlow 2.6s ease-out infinite; }
.hcta-ic { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--brand-orange); box-shadow: 0 2px 6px rgba(11, 45, 107, .25); flex: none; }
.hcta-ic .ic-nav { width: 16px; height: 16px; stroke-width: 2.6; }
@keyframes hctaGlow { 0% { box-shadow: 0 6px 18px rgba(255, 107, 53, .45), 0 0 0 0 rgba(255, 107, 53, .55); } 70% { box-shadow: 0 6px 18px rgba(255, 107, 53, .45), 0 0 0 10px rgba(255, 107, 53, 0); } 100% { box-shadow: 0 6px 18px rgba(255, 107, 53, .45), 0 0 0 0 rgba(255, 107, 53, 0); } }
@media (prefers-reduced-motion: reduce) { .hcta { animation: none; } }
@media (max-width: 900px) { .hwrap .hbar { flex: 1; } .hwrap { gap: 8px; } }

/* smaller language button, bigger logo (desktop + phone) */
.hwrap .lang-btn { height: 36px; padding: 0 9px 0 7px; gap: 5px; font-size: 12px; }
.hwrap .lang-btn .flag { width: 20px; height: 13px; }
.hwrap .lang-btn .flag svg { width: 20px; height: 13px; }
.hwrap .lang-chev { width: 12px; height: 12px; }
.logo-tile { width: 54px; height: 54px; border-radius: 15px; }
.logo-tile .logo { width: auto; height: 42px; }
@media (max-width: 440px) {
  .logo-tile { width: 46px; height: 46px; border-radius: 13px; }
  .logo-tile .logo { height: 34px; }
  .hwrap .lang-btn { height: 34px; }
}

/* phone: menu button sits at the right edge of the pill */
@media (max-width: 900px) { .hmenu { margin-left: auto; } }

/* narrower screens: language button sits closer to the right edge (still inside the page) */
@media (max-width: 900px) { .hwrap .lang-sw { margin-left: auto; margin-right: -6px; } }
/* wide screens: language button pinned to the right edge of the page (20px margin); the nav pill stays centred */
@media (min-width: 1380px) { .hwrap .lang-sw { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); } }

/* header logo: the dark-background version shows in dark mode */
.logo-dark-mark { display: none; }
:root[data-theme="dark"] .logo-dark-mark { display: block; }
:root[data-theme="dark"] .logo-light-mark { display: none; }

/* header dark mode button: a round glass icon next to the flag; shows the sun in dark mode, the moon in light mode */
.theme-icon { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: border-color .15s ease, box-shadow .15s ease, transform .2s ease; }
.theme-icon svg { width: 17px; height: 17px; }
.theme-icon:hover { border-color: var(--brand-orange); box-shadow: 0 0 0 3px rgba(255, 107, 53, .3); }
.theme-icon:focus-visible { outline: 3px solid var(--brand-orange); outline-offset: 3px; }
.theme-icon .ti-sun { display: none; color: #ffb347; }
.theme-icon .ti-moon { display: block; }
.theme-icon[aria-checked="true"] .ti-sun { display: block; color: #ffb347; }
.theme-icon[aria-checked="true"] .ti-moon { display: none; }
:root:not([data-theme="dark"]) .theme-icon { color: var(--brand-deep); border-color: rgba(11, 45, 107, .25); background: rgba(255, 255, 255, .55); }
:root[data-theme="dark"] .theme-icon { color: #fff; border-color: rgba(255, 255, 255, .35); background: rgba(8, 31, 74, .55); }
:root[data-theme="dark"] .theme-icon .ti-sun { color: #ffb347; }
.hwrap .lang-btn { padding: 0 9px; }
.hwrap .lang-btn .flag { margin: 0; }
.hwrap .theme-icon { pointer-events: auto; }
/* language button on the dark header (flag + chevron) */
:root[data-theme="dark"] .hwrap .lang-btn { background: rgba(8, 31, 74, .55); color: #fff; border-color: rgba(255, 255, 255, .35); }

/* event cards: type tag and distances sit on the poster; location is a small remark under the title */
.card-tag { position: absolute; top: 12px; left: 12px; z-index: 1; background: #fff; color: var(--brand-deep); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.card-dists { position: absolute; left: 12px; bottom: 12px; right: 12px; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.card-dists .chip { background: rgba(8, 31, 74, .85); color: #fff; border: 0; font-weight: 800; font-size: 12px; padding: 4px 10px; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.card-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.6em; }
.card-place { font-size: 12.5px; opacity: .85; margin-top: -2px; }
.card-place .ic { width: 13px; height: 13px; }
/* card typography: lighter, calmer weights (benchmarked against the reference card layout) */
.card-title { font-size: 17px; font-weight: 700; line-height: 1.32; }
.card-date { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; }
.card-place { font-size: 13px; font-weight: 400; color: var(--muted); opacity: 1; }
/* card styling adapted from the reference: neutral slate title, plain date, quiet tag, plain white distances on the poster */
.card-title { font-size: 16px; font-weight: 700; line-height: 1.35; color: #2d3b56; }
.card-date { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #5a6a80; }
.card-tag { font-size: 10px; font-weight: 600; letter-spacing: .05em; padding: 4px 9px; border-radius: 4px; color: #2d3b56; background: rgba(255, 255, 255, .94); box-shadow: none; }
.card-dists { gap: 10px; }
.card-dists .chip { background: none; color: #fff; border: 0; padding: 0; font-size: 17px; font-weight: 700; box-shadow: none; text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
:root[data-theme="dark"] .card-title { color: #f1f5fb; }
:root[data-theme="dark"] .card-date { color: #a9b3c6; }
/* distances sit on a soft dark band at the bottom of the poster so they read on light and dark posters */
.card-dists { left: 0; right: 0; bottom: 0; padding: 30px 12px 9px; background: linear-gradient(to top, rgba(8, 31, 74, .88), rgba(8, 31, 74, 0)); }
/* early-bird cards follow the event card style: slate bold title, small muted note line for the organiser/location */
.eb-img::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(to top, rgba(8, 31, 74, .55), rgba(8, 31, 74, 0)); pointer-events: none; }
.eb-name { font-size: 15px; font-weight: 700; color: #2d3b56; }
.eb-org { font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 4px; }
.eb-price { font-size: 14px; font-weight: 700; color: #2d3b56; margin-top: 8px; }
:root[data-theme="dark"] .eb-name, :root[data-theme="dark"] .eb-price { color: #f1f5fb; }
/* event cards: type label like the early-bird badge (orange, white text); date in the reference's small grey monospace */
.card-tag { background: var(--brand-orange); color: #fff; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .05em; padding: 4px 10px; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
.card-date { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; font-weight: 400; letter-spacing: 0; color: #5a6a80; }
:root[data-theme="dark"] .card-date { color: #a9b3c6; }
/* type label and location use the reference's small monospace face, same as the date */
.card-tag { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; padding: 4px 9px; }
.card-place { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; font-weight: 400; letter-spacing: 0; color: #5a6a80; }
.card-place .ic { width: 12px; height: 12px; }
:root[data-theme="dark"] .card-place { color: #a9b3c6; }
/* type label colour and shape follow the reference: white tag, dark slate text, small radius */
.card-tag { background: rgba(255, 255, 255, .94); color: #2d3b56; border-radius: 3px; box-shadow: none; }
:root[data-theme="dark"] .card-tag { background: rgba(255, 255, 255, .94); color: #2d3b56; }

/* early-bird cards: same name, location and spacing as the event cards below (no price) */
.eb-name { font-size: 16px; font-weight: 700; color: #2d3b56; line-height: 1.35; }
.eb-org { display: flex; align-items: center; gap: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; font-weight: 400; color: #5a6a80; margin-top: 6px; }
.eb-org .ic { width: 12px; height: 12px; flex: none; }
:root[data-theme="dark"] .eb-name { color: #f1f5fb; }
:root[data-theme="dark"] .eb-org { color: #a9b3c6; }
/* early-bird deadline badge: keeps the orange background; text uses the type label's monospace font and slate colour */
.eb-img .badge { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; font-weight: 500; color: #2d3b56; background: var(--brand-orange); box-shadow: none; }
.eb-img .badge.urgent { box-shadow: none; }

/* early-bird cards: date above the name, location as the card footer (white badge text) */
.eb-img .badge { color: #fff; }
.eb-card { display: flex; flex-direction: column; }
.eb-body { display: flex; flex-direction: column; flex: 1; }
.eb-date { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; font-weight: 500; color: #5a6a80; margin-bottom: 6px; }
.eb-org { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
:root[data-theme="dark"] .eb-date { color: #a9b3c6; }

/* early-bird strip: the same card as the grid, with the early-bird badge on the top-right of the poster */
.eb-slot { flex: 0 0 300px; scroll-snap-align: start; display: flex; }
.eb-slot .card { flex: 1; }
.card-eb { position: absolute; top: 12px; right: 12px; z-index: 1; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10.5px; font-weight: 500; color: #fff; background: var(--brand-orange); padding: 4px 10px; border-radius: 999px; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
/* poster distances use the type label's monospace font (size kept), on every card */
.card-dists .chip { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 17px; font-weight: 500; letter-spacing: 0; }
/* poster distances: a little smaller */
.card-dists .chip { font-size: 14px; }
/* featured (hero) cards follow the event card typography: monospace labels, slate title, small location line */
.fchip { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10px; font-weight: 500; letter-spacing: .02em; color: #2d3b56; background: #fff; border: 0; border-radius: 3px; padding: 3px 8px; }
.fchip.fdist { font-size: 12px; font-weight: 500; background: #fff; color: #2d3b56; }
.ftitle { font-size: 16px; font-weight: 700; color: #2d3b56; }
.floc { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; font-weight: 400; color: #5a6a80; }
.floc b { font-family: inherit; font-weight: 500; color: #2d3b56; }

.card.past-limit { display: none; }
.grid-more-wrap { display: flex; justify-content: center; margin-top: 20px; }

/* browse by type: compact tiles below the upcoming list (below its View more) */
.browse { margin-top: 48px; }
.browse-eyebrow { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #3b82c4; margin-bottom: 6px; }
.browse h2 { font-size: 22px; font-weight: 800; color: var(--brand-deep); margin-bottom: 16px; }
.browse-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.btype { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: inherit; transition: border-color .15s ease, box-shadow .15s ease; }
.btype:hover { border-color: var(--brand-orange); box-shadow: 0 4px 14px rgba(11, 45, 107, .08); }
.bt-name { font-size: 14px; font-weight: 700; color: #2d3b56; }
.bt-n { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; color: #5a6a80; }
:root[data-theme="dark"] .btype { background: var(--card); }
:root[data-theme="dark"] .bt-name { color: #f1f5fb; }

/* ---------- Past events archive (Figma: Past Events) ---------- */
.pa-hero { background: var(--brand-deep); color: #fff; padding: 36px 0 28px; }
[data-theme="dark"] .pa-hero { background: #081a3a; }
.pa-hero-in { display: flex; flex-direction: column; gap: 22px; }
.pa-hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.pa-eyebrow { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .75; margin: 0 0 8px; }
.pa-hero h1 { font-size: clamp(28px, 4.2vw, 44px); margin: 0 0 8px; color: #fff; font-weight: 700; }
.pa-sub { margin: 0 0 10px; opacity: .85; }
.pa-meta { margin: 0; font-size: 14px; opacity: .85; }
.pa-meta b { color: #fff; }
.pa-seg { background: rgba(255, 255, 255, .12); }
.pa-seg a { color: #fff; }
.pa-seg a.on { background: var(--brand-orange, #ff6b35); color: var(--brand-deep); }
.pa-search-field { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); border-radius: 14px; padding: 12px 16px; max-width: 560px; }
.pa-search-field .ic { width: 18px; height: 18px; opacity: .8; flex: none; }
.pa-search-field input { flex: 1; min-width: 0; background: transparent; border: 0; color: #fff; font: inherit; font-size: 15px; outline: none; }
.pa-search-field input::placeholder { color: rgba(255, 255, 255, .7); }
.pa-filters { background: var(--surface); border-bottom: 1px solid var(--line); padding: 16px 0; }
.pa-filters-in { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; }
.pa-lbl { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.pa-year-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.pf-chip { font: 600 13px var(--font); padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--head); cursor: pointer; }
.pf-chip.on { background: var(--brand-orange, #ff6b35); border-color: transparent; color: var(--brand-deep); }
.pa-selects { display: flex; gap: 12px; flex-wrap: wrap; }
.pa-selects label { min-width: 170px; }
.pa-selects select { width: 100%; font: 500 14px var(--font); padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--text); }
.pa-results { padding: 26px 16px 8px; }
.pa-count-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.pm-group { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.pm-group[hidden] { display: none; }
.pm-label b { display: block; font-size: 17px; color: var(--head); }
.pm-label span { font-size: 13px; color: var(--muted); }
.pm-cards { display: flex; flex-direction: column; gap: 12px; }
.pm-item { position: relative; display: grid; grid-template-columns: 64px 96px 1fr auto; align-items: center; gap: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 18px; box-shadow: var(--shadow); }
.pm-item[hidden] { display: none; }
.pm-item:hover { border-color: var(--accent); }
.pm-link { position: absolute; inset: 0; border-radius: var(--r); }
.pm-date { background: var(--chip); border-radius: 12px; text-align: center; padding: 8px 4px; }
.pm-date b { display: block; font-size: 22px; color: var(--head); line-height: 1.1; }
.pm-date span { font-size: 11px; letter-spacing: .06em; color: var(--muted); }
.pm-thumb { width: 96px; height: 72px; border-radius: 10px; overflow: hidden; background: var(--surface); }
.pm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pm-thumb .noimg { height: 100%; display: flex; align-items: center; justify-content: center; }
.pm-main h3 { margin: 0 0 6px; font-size: 17px; color: var(--head); }
.pm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.pm-chips .chip { font-size: 12px; }
.pm-place { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13.5px; color: var(--muted); }
.pm-place .ic { width: 15px; height: 15px; flex: none; }
.pm-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; }
.pm-fin { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--chip); color: var(--head); white-space: nowrap; }
.pm-view { font-size: 13px; color: var(--muted); white-space: nowrap; }
.pa-empty { text-align: center; padding: 36px 20px; background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r); }
.pa-empty[hidden] { display: none; }
.pa-empty h2 { margin: 0 0 8px; color: var(--head); font-size: 22px; }
.pa-empty p { color: var(--muted); margin: 0 0 16px; }
.pa-foot { font-size: 12.5px; color: var(--muted); text-align: center; margin: 22px 0 0; }
@media (max-width: 760px) {
  .pm-group { grid-template-columns: 1fr; gap: 8px; }
  .pm-item { grid-template-columns: 52px 1fr; grid-template-areas: "date main" "thumb thumb" "side side"; gap: 12px; }
  .pm-date { grid-area: date; }
  .pm-thumb { grid-area: thumb; width: 100%; height: 150px; }
  .pm-main { grid-area: main; }
  .pm-side { grid-area: side; flex-direction: row; justify-content: space-between; align-items: center; text-align: left; }
  .pa-selects label { flex: 1 1 140px; min-width: 0; }
}
@media (max-width: 440px) {
  .pa-results { padding-left: 16px; padding-right: 16px; }
  .pa-hero { padding-top: 28px; }
}
.pa-count-right { display: flex; gap: 14px; align-items: center; }
.pa-clear-top { color: var(--accent); font-weight: 600; font-size: 13px; }
.pa-clear-top[hidden] { display: none; }

/* Finished race page (results-less) */
.back-link { display: inline-block; color: var(--accent-text); font-size: 14px; margin: 16px 0 0; }
.fin-banner { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; margin-bottom: 20px; }
.fin-banner > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.fin-banner strong { color: var(--accent-text); font-size: 16px; }
.fin-banner span { color: var(--muted); font-size: 14px; }
.fin-icon { color: var(--accent-text); }
.fin-edition { margin-top: 8px; }
.fin-alert { background: var(--brand-deep); color: #fff; border-radius: var(--r); padding: 20px; display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.fin-alert h2 { color: #fff; font-size: 20px; margin: 0; }
.fin-alert p { margin: 0; opacity: 0.85; font-size: 14px; }
.all-link { display: inline-block; color: var(--accent-text); font-size: 14px; margin: 4px 0 12px; }
.fin-links { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.fin-link { display: flex; flex-direction: column; gap: 12px; }
.fin-link h2 { margin: 0; }
.fin-link .note-small { margin: 0; }
.fin-na { color: var(--muted); font-size: 14px; margin: auto 0 0; }
@media (max-width: 640px) { .fin-links { grid-template-columns: 1fr; } }
.legal { max-width: 720px; }
.legal h2 { font-size: 20px; margin-top: 8px; }
.legal p { max-width: 680px; }
.draft-note { background: #fff4d6; color: #7a4b00; border: 1px solid #f0c75e; border-radius: var(--r); padding: 10px 14px; font-size: 14px; width: 100%; }