:root {
  --ink: #29372e;
  --forest: #315f45;
  --forest-dark: #234b36;
  --maquis: #dce8c7;
  --coral: #e57556;
  --cream: #fffaf0;
  --sand: #f4ead4;
  --line: #e8dfca;
  --font: "DM Sans", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--sand) radial-gradient(#dfd2b8 1px, transparent 1px);
  background-size: auto, 23px 23px;
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

.topbar {
  width: min(100%, 980px);
  height: 76px;
  margin: auto;
  padding: 0 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -.7px;
}
.brand i { color: var(--forest); font-style: normal; }
.brand i.brand-edition { display: inline-block; margin-left: 4px; font-family: "Caveat", "Segoe Print", cursive; font-size: 16px; font-weight: 600; letter-spacing: 0; transform: rotate(-3deg); }
.footer-edition { display: inline-block; margin-left: 3px; font-family: "Caveat", "Segoe Print", cursive; font-size: 15px; font-weight: 600; font-style: normal; text-transform: none; letter-spacing: 0; }
#runnerSummary .runner-average-position { font-family: Georgia, "Times New Roman", serif; color: #936b31; font-size: .94em; font-weight: 400; font-style: italic; }
#runnerSummary .runner-stat-value { color: var(--forest-dark); font-size: 1.4em; font-weight: 900; letter-spacing: -.4px; }
#runnerSummary > span { padding: 3px 0; }
.brand-mark { font-size: 23px; }
.edition-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border: 1px solid #d7c9aa;
  border-radius: 999px;
  background: #fff9ea;
  color: #66744f;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  white-space: nowrap;
}
.pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }

main { width: min(100% - 36px, 700px); margin: 0 auto; padding: 22px 0 34px; }
.intro { text-align: center; }
.mountain-line { display: flex; justify-content: center; align-items: end; gap: 11px; height: 39px; color: var(--forest); }
.mountain-line span { font-size: 26px; line-height: 1; }
.mountain-line span:nth-child(2) { font-size: 19px; transform: translateY(2px); }
.eyebrow { margin: 17px 0 0; color: #72805d; font-size: 10px; font-weight: 900; letter-spacing: .2em; }
.intro-invite { max-width: 560px; margin: 15px auto 0; color: #596557; font-size: clamp(15px, 2.5vw, 18px); font-weight: 700; letter-spacing: 0; line-height: 1.5; }
.intro-invite strong { color: var(--forest); font-weight: 1000; }
h1 { margin: 13px 0 18px; font-size: clamp(43px, 8vw, 62px); font-weight: 900; line-height: .99; letter-spacing: -3.5px; }
h1 span { color: var(--forest); }
.runner-profile-link { color: inherit; text-decoration: none; }
.runner-profile-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.runner-profile-link:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 3px; }
#headline .headline-tagline { display: inline-block; margin-top: 2px; font-family: "Caveat", "Segoe Print", cursive; font-size: clamp(28px, 5vw, 36px); font-weight: 600; line-height: 1; letter-spacing: 0; transform: rotate(-2deg); }
.intro-copy { max-width: 590px; margin: 0 auto; color: #596557; font-size: clamp(15px, 2.8vw, 17px); font-weight: 600; line-height: 1.6; }

.duel-panel {
  max-width: 590px;
  margin: 29px auto 0;
  padding: 26px 27px 19px;
  border: 3px solid white;
  border-radius: 28px;
  background: var(--cream);
  box-shadow: 0 8px 0 #d7cbb0, 0 18px 38px #443d2912;
}
.pickers { display: grid; grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr); align-items: center; gap: 13px; }
.runner-picker { display: flex; min-width: 0; flex-direction: column; align-items: center; }
.avatar { display: grid; width: 57px; height: 57px; margin-bottom: 8px; place-items: center; border: 3px solid #fff; border-radius: 50%; background: var(--maquis); box-shadow: 0 4px 0 #263b2415; font-size: 28px; }
.runner-b .avatar { background: #f6ded1; }
.picker-label { margin-bottom: 9px; color: #7d806d; font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.input-wrap { position: relative; width: 100%; }
input { width: 100%; min-width: 0; height: 47px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 13px; outline: 0; background: #fff; color: var(--ink); font: 700 14px var(--font); text-align: center; transition: border-color .16s, box-shadow .16s; }
input::placeholder { color: #a6a697; font-weight: 500; }
input:focus { border-color: #76966c; box-shadow: 0 0 0 3px #76966c24; }
.suggestions { position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; right: 0; display: none; max-height: 220px; overflow-y: auto; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: 0 8px 20px #29372e20; text-align: left; }
.suggestions.is-open { display: grid; gap: 2px; }
.suggestion-option { width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer; font: 600 13px var(--font); text-align: left; }
.suggestion-option:hover, .suggestion-option:focus-visible { outline: 0; background: var(--maquis); }
.versus { display: grid; width: 48px; height: 48px; place-items: center; border: 2px solid #fff; border-radius: 50%; background: #f1d49e; color: #8a5c35; font-size: 13px; font-weight: 1000; transform: rotate(-8deg); }
.compare-btn { display: flex; width: min(100%, 340px); min-height: 52px; margin: 24px auto 0; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 15px; background: var(--forest); box-shadow: 0 5px 0 var(--forest-dark); color: #fffdf5; cursor: pointer; font: 900 12px var(--font); letter-spacing: .1em; transition: transform .15s, box-shadow .15s, background .15s; }
.compare-btn:hover { background: #3d704f; transform: translateY(-2px); box-shadow: 0 7px 0 var(--forest-dark); }
.compare-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--forest-dark); }
.compare-btn:focus-visible { outline: 3px solid #e57556; outline-offset: 4px; }
.panel-note { margin: 14px 0 0; color: #8e907c; font-size: 12px; font-weight: 600; text-align: center; }
.results { max-width: 590px; margin: 20px auto 0; }
.message { padding: 14px 18px; border: 1px solid #e8d8b4; border-radius: 14px; background: #fff7df; color: #716346; font-size: 14px; font-weight: 700; line-height: 1.5; text-align: center; }
.duel-score { display: grid; grid-template-columns: minmax(0, 1fr) 52px 22px 52px minmax(0, 1fr); align-items: center; gap: 8px; padding: 17px; border: 2px solid white; border-radius: 20px; background: var(--cream); box-shadow: 0 5px 0 #d7cbb0; text-align: center; }
.score-name { overflow-wrap: anywhere; color: var(--forest-dark); font-size: clamp(14px, 2.8vw, 18px); font-weight: 900; }
.score-number { color: var(--forest); font-size: 30px; font-weight: 1000; }
.score-name.is-score-winner, .score-number.is-score-winner { color: #247346; }
.score-name.is-score-loser, .score-number.is-score-loser { color: #c14e43; }
.score-x { color: #a78a5c; font-size: 18px; font-weight: 900; }
.duel-score p { grid-column: 1 / -1; margin: 4px 0 0; color: #777b68; font-size: 12px; font-weight: 700; }
.share-row { display: flex; min-height: 40px; margin-top: 10px; align-items: center; justify-content: center; gap: 9px; }
.share-button { padding: 8px 15px; border: 1px solid #c9d5bd; border-radius: 999px; background: #f8fbf2; color: var(--forest-dark); cursor: pointer; font: 900 12px var(--font); transition: background .15s, transform .15s; }
.share-button:hover { background: var(--maquis); transform: translateY(-1px); }
.share-button:focus-visible { outline: 3px solid #e57556; outline-offset: 3px; }
.share-status { color: #6f785f; font-size: 11px; font-weight: 700; }
.duel-taunt { margin: 16px 8px 8px; color: var(--forest-dark); font-size: clamp(16px, 3.5vw, 19px); font-weight: 900; line-height: 1.45; text-align: center; }
.duel-details { display: grid; gap: 10px; margin-top: 15px; }
.duel-result-row { padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--cream); }
.duel-race { display: flex; justify-content: space-between; gap: 10px; color: #66744f; font-size: 11px; font-weight: 900; }
.duel-race span { color: #96917e; text-align: right; }
.duel-times { display: grid; grid-template-columns: 1fr 34px 1fr; align-items: center; gap: 9px; margin-top: 12px; }
.duel-runner { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.duel-runner.is-winner { padding: 10px 6px; border: 2px solid var(--forest); border-radius: 15px; background: var(--maquis); box-shadow: 0 4px 0 #315f4522; }
.duel-runner.is-winner > strong { color: var(--forest-dark); font-size: clamp(21px, 4.5vw, 28px); }
.duel-runner.is-tied { padding: 8px 5px; border: 1px dashed #c8a363; border-radius: 15px; background: #fff5df; }
.duel-runner > .runner-outcome { display: inline-flex; min-height: 20px; margin-bottom: 3px; align-items: center; padding: 3px 8px; border-radius: 999px; background: var(--forest); color: white; font-size: 9px; font-weight: 1000; letter-spacing: .1em; }
.duel-runner > .runner-outcome.is-tie { background: #ead5a9; color: #74542d; }
.duel-runner > span { color: #858472; font-size: 11px; font-weight: 800; }
.duel-runner > strong { color: var(--forest-dark); font-size: clamp(18px, 4vw, 24px); font-weight: 1000; letter-spacing: -.5px; }
.duel-runner > small { max-width: 100%; overflow-wrap: anywhere; color: #777b68; font-size: 10px; font-weight: 700; }
.duel-divider { color: #b28b54; font-size: 10px; font-weight: 1000; text-align: center; }
.data-note { display: flex; max-width: 520px; margin: 25px auto 0; align-items: center; justify-content: center; gap: 9px; color: #777b68; font-size: 12px; font-weight: 600; line-height: 1.5; text-align: center; }
.catalogue-link-wrap { margin: 9px auto 0; text-align: center; }
.catalogue-link, .back-link { color: var(--forest-dark); font-size: 12px; font-weight: 900; text-decoration: none; }
.catalogue-link { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border: 1px solid #d9cfb9; border-radius: 999px; background: #fffaf0aa; }
.catalogue-link:hover, .back-link:hover { color: var(--coral); }
.catalogue-link.queens-link { min-height: 54px; padding: 14px 28px; border: 2px solid #f38abd; background: #ffb8db; color: #702046; font-size: 17px; font-weight: 900; box-shadow: 0 4px 0 #e98ab6, 0 10px 22px #e84c9a20; transition: background .18s ease, box-shadow .18s ease; }
.catalogue-link.queens-link:hover { background: #ffa5d1; color: #571333; box-shadow: 0 4px 0 #df73a7, 0 12px 26px #e84c9a30; }
.catalogue-link.queens-link:focus-visible { outline: 3px solid #a92f6c; outline-offset: 5px; }
.catalogue-link.bosses-link { min-height: 54px; padding: 14px 28px; border: 2px solid #89b89a; background: #b8dfc5; color: #214d37; font-size: 17px; font-weight: 900; box-shadow: 0 4px 0 #81b494, 0 10px 22px #315f4620; transition: background .18s ease, box-shadow .18s ease; }
.catalogue-link.bosses-link:hover { background: #a5d6b5; color: #173d29; box-shadow: 0 4px 0 #70a884, 0 12px 26px #315f4630; }
.catalogue-link.bosses-link:focus-visible { outline: 3px solid #315f46; outline-offset: 5px; }
.back-link { white-space: nowrap; }
.feedback-link { color: var(--forest-dark); font-size: 11px; font-weight: 800; text-align: center; text-decoration: underline; text-decoration-color: #b5c4a1; text-underline-offset: 3px; }
.feedback-link:hover { color: var(--coral); }
.feedback-link-wrap { margin: 8px auto 0; text-align: center; }
.feedback-link-after-years { margin: -12px auto 24px; }
.leaderboard-link-wrap { margin: 11px auto 0; text-align: center; }
.leaderboard-link { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border: 1px solid #dbc596; border-radius: 999px; background: #fff7e4; box-shadow: 0 3px 0 #e3d2ad; color: #76542c; font-size: 13px; font-weight: 900; text-decoration: none; transition: transform .15s, background .15s; }
.leaderboard-link:hover { transform: translateY(-1px); background: #fff1cc; }
.leaderboard-link.home-queens-link { border-color: #ed91be; background: #ffb8db; color: #702046; box-shadow: 0 3px 0 #e98ab6; }
.leaderboard-link.home-queens-link:hover { background: #ffa5d1; }
.leaderboard-link[href="leaderboard.html"], .catalogue-link[href="leaderboard.html"] { border-color: #89b89a; background: #b8dfc5; color: #214d37; box-shadow: 0 4px 0 #81b494, 0 10px 22px #315f4620; }
.leaderboard-link[href="leaderboard.html"]:hover, .catalogue-link[href="leaderboard.html"]:hover { background: #a5d6b5; color: #173d29; }
#top .leaderboard-link[href="leaderboard.html"], #top .leaderboard-link[href="women-leaderboard.html"] { box-sizing: border-box; width: 212px; max-width: 100%; }
.leaderboard-link:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
.leaderboard-main { width: min(100% - 36px, 760px); min-height: calc(100vh - 162px); padding-top: 28px; }
.leaderboard-intro { margin-bottom: 28px; text-align: center; }
.leaderboard-trophy { display: grid; width: 56px; height: 56px; margin: 0 auto 7px; place-items: center; border: 3px solid #fff; border-radius: 50%; background: #f1d49e; box-shadow: 0 4px 0 #d7cbb0; font-size: 28px; }
.leaderboard-intro .eyebrow { margin-top: 11px; }
.leaderboard-intro h1 { margin: 10px 0 12px; font-size: clamp(42px, 7vw, 58px); }
.leaderboard-intro h1 span { color: var(--forest); }
.leaderboard-intro .intro-copy { font-size: clamp(15px, 2.8vw, 18px); font-weight: 800; }
.leaderboard-card { padding: 20px; border: 3px solid #fff; border-radius: 25px; background: var(--cream); box-shadow: 0 7px 0 #d7cbb0, 0 18px 38px #443d2912; }
.leaderboard-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.leaderboard-premium-title { margin: 8px 0 26px; color: var(--forest-dark); text-align: center; font-size: clamp(32px, 5vw, 46px); font-weight: 900; line-height: 1.15; letter-spacing: -1.8px; }
.leaderboard-premium-title span { color: #9b742f; }
.leaderboard-premium-title::after { content: ""; display: block; width: 72px; height: 2px; margin: 16px auto 0; background: linear-gradient(90deg, transparent, #bc9956, transparent); }
.leaderboard-toolbar-sort { justify-content: flex-end; }
.catalogue-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 24px 0 28px; text-align: center; }
.catalogue-stats > div { padding: 18px 10px; border: 2px solid white; border-radius: 18px; background: var(--cream); }
.catalogue-stats strong { display: block; color: var(--forest-dark); font-size: 28px; font-weight: 900; }
.catalogue-stats span { display: block; margin-top: 6px; color: #69765b; font-size: 12px; font-weight: 700; }
@media (max-width: 600px) { .catalogue-stats { grid-template-columns: repeat(2, 1fr); } }
.ranking-search { margin: 0 0 24px; }
.ranking-search label { display: block; margin-bottom: 8px; color: var(--forest-dark); font-size: 13px; font-weight: 700; }
.ranking-search input { box-sizing: border-box; width: 100%; padding: 14px 16px; border: 1px solid #d8cfbb; border-radius: 12px; background: white; font: inherit; }
.ranking-search input:focus { outline: 2px solid #76966c; outline-offset: 2px; }
#runnerSearchResults a { display: block; padding: 12px 8px; border-bottom: 1px solid #e8dcc6; color: var(--forest-dark); text-decoration: none; font-size: 14px; }
#runnerSearchResults a:hover { background: #f4ead4; }
.leaderboard-toolbar > div { color: var(--forest-dark); font-size: 15px; }
.leaderboard-toolbar > div strong { font-size: 18px; font-weight: 1000; }
.leaderboard-toolbar > div span { color: #858472; font-size: 12px; font-weight: 700; }
.sort-control { display: grid; min-width: 190px; gap: 4px; color: #69765b; font-size: 10px; font-weight: 900; }
.sort-control select { width: 100%; min-height: 44px; padding: 0 32px 0 12px; border: 1px solid #d8cfbb; border-radius: 11px; background: #fff; color: var(--ink); font: 700 13px var(--font); }
.sort-control select:focus-visible { outline: 3px solid #76966c66; outline-offset: 2px; }
.leaderboard-explainer { margin: 12px 0 16px; color: #7c7c69; font-size: 11px; line-height: 1.5; }
.leaderboard-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.leaderboard-person { padding: 10px 12px; border: 1px solid var(--line); border-radius: 15px; background: #fffdf8; }
.leaderboard-person-heading { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 9px; }
.leaderboard-position { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: #eee7d7; color: #727260; font-size: 12px; font-weight: 1000; }
.leaderboard-position.podium-1 { background: #f1d49e; color: #795526; }
.leaderboard-position.podium-2 { background: #e5e8e1; color: #5b6658; }
.leaderboard-position.podium-3 { background: #edd8c9; color: #865d43; }
.leaderboard-person h2 { min-width: 0; margin: 0; color: var(--forest-dark); font-size: 15px; font-weight: 900; overflow-wrap: anywhere; }
.leaderboard-win-count { color: #557248; font-size: 11px; font-weight: 900; text-align: right; white-space: nowrap; }
.leaderboard-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 8px 0 0 47px; }
.leaderboard-stats > div { display: grid; gap: 2px; }
.leaderboard-stats span { color: #898774; font-size: 9px; font-weight: 700; }
.leaderboard-stats strong { color: var(--ink); font-size: 13px; font-weight: 900; }
.leaderboard-back { margin: 23px 0 0; text-align: center; }
.contact-main { width: min(100% - 36px, 650px); min-height: calc(100vh - 162px); padding-top: 34px; }
.contact-intro { margin-bottom: 26px; text-align: center; }
.contact-intro h1 { margin-bottom: 14px; }
.contact-intro h1 span { color: var(--forest); }
.contact-card { padding: 24px; border: 3px solid #fff; border-radius: 25px; background: var(--cream); box-shadow: 0 8px 0 #d7cbb0, 0 18px 38px #443d2912; }
.contact-form { display: grid; gap: 17px; }
.contact-field { display: grid; gap: 7px; }
.contact-field > span { color: #69765b; font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.contact-form input[type="text"], .contact-form textarea { width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; outline: 0; background: white; color: var(--ink); font: 600 14px/1.5 var(--font); text-align: left; }
.contact-form textarea { min-height: 150px; resize: vertical; }
.contact-form input[type="text"]:focus, .contact-form textarea:focus, .contact-form input[type="file"]:focus-visible { border-color: #76966c; box-shadow: 0 0 0 3px #76966c24; }
.contact-form input[type="file"] { width: 100%; color: #69765b; font: 600 12px var(--font); }
.field-hint { color: #898774; font-size: 11px; line-height: 1.5; }
.contact-submit { width: 100%; margin-top: 4px; }
.contact-status { min-height: 20px; margin: 12px 0 0; color: var(--forest-dark); font-size: 12px; font-weight: 800; text-align: center; }
.contact-back { margin: 18px 0 0; text-align: center; }
.contact-back a { color: var(--forest-dark); font-size: 12px; font-weight: 900; text-decoration: none; }
.contact-back a:hover { color: var(--coral); }
.catalogue-main { width: min(100% - 36px, 760px); min-height: calc(100vh - 162px); padding-top: 34px; }
.catalogue-sources { margin: 24px 0 28px; padding: clamp(18px, 4vw, 28px); border: 1.5px solid var(--forest); border-radius: 20px; background: var(--cream); color: var(--ink); text-align: left; font-size: 14px; line-height: 1.75; }
.catalogue-sources p { margin: 0; }
.catalogue-sources p + p { margin-top: 14px; }
.catalogue-sources a { color: var(--forest-dark); font-weight: 800; text-underline-offset: 3px; }
.catalogue-sources a:hover { color: var(--coral); }
.catalogue-sources a:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }
.catalogue-intro { margin-bottom: 32px; text-align: center; }
.catalogue-intro h1 { margin-bottom: 15px; }
.catalogue-intro h1 span { color: var(--forest); }
.year-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 10px; margin: 0 auto 25px; }
.year-button { display: grid; gap: 3px; min-height: 68px; padding: 10px 12px; border: 2px solid white; border-radius: 16px; background: var(--cream); box-shadow: 0 4px 0 #d7cbb0; color: var(--ink); cursor: pointer; font-family: var(--font); text-align: center; transition: transform .15s, background .15s, box-shadow .15s; }
.year-button:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #d7cbb0; }
.year-button[aria-pressed="true"] { border-color: var(--forest); background: var(--forest); box-shadow: 0 4px 0 var(--forest-dark); color: white; }
.year-button strong { font-size: 18px; font-weight: 1000; }
.year-button span { color: #898774; font-size: 10px; font-weight: 700; }
.year-button[aria-pressed="true"] span { color: #e9f0e1; }
.trail-list:empty { display: none; }
.trail-list { display: grid; gap: 27px; }
.trail-year { padding: 19px; border: 2px solid white; border-radius: 21px; background: var(--cream); box-shadow: 0 5px 0 #d7cbb0; }
.trail-year-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.trail-year-heading h2 { margin: 0; color: var(--forest-dark); font-size: 25px; font-weight: 1000; letter-spacing: -1px; }
.trail-year-heading > span { color: #898774; font-size: 11px; font-weight: 700; }
.trail-year-courses { display: grid; gap: 8px; }
.trail-card { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 15px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 13px; background: #fffdf8; }
.trail-card-name { display: grid; gap: 3px; }
.trail-card-name strong { color: var(--ink); font-size: 13px; font-weight: 900; }
.trail-card-name span, .trail-finisher-count { color: #898774; font-size: 11px; font-weight: 700; }
.trail-results-link { display: inline-flex; align-items: center; gap: 6px; color: var(--forest); font-size: 11px; font-weight: 900; text-decoration: none; white-space: nowrap; }
.trail-results-link:hover { color: var(--coral); text-decoration: underline; }
footer { display: flex; width: min(100% - 40px, 900px); min-height: 66px; margin: 10px auto 0; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid #d9cfb9; color: #78806b; font-size: 11px; font-weight: 700; }

@media (max-width: 560px) {
  .topbar { height: 68px; padding: 0 17px; }
  .brand { gap: 7px; font-size: 16px; }
  .brand-mark { font-size: 20px; }
  .edition-pill { padding: 8px 9px; font-size: 8px; letter-spacing: .08em; }
  main { width: min(100% - 28px, 700px); padding-top: 24px; }
  .eyebrow { font-size: 9px; }
  h1 { letter-spacing: -2.5px; }
  .intro-copy { padding: 0 4px; }
  .duel-panel { margin-top: 25px; padding: 23px 16px 17px; border-radius: 24px; }
  .pickers { grid-template-columns: minmax(0, 1fr) 39px minmax(0, 1fr); gap: 7px; }
  .avatar { width: 51px; height: 51px; font-size: 25px; }
  input { height: 44px; padding: 0 6px; font-size: 12px; }
  .versus { width: 38px; height: 38px; font-size: 11px; }
  .compare-btn { font-size: 10px; }
  .duel-score { grid-template-columns: minmax(0, 1fr) 36px 18px 36px minmax(0, 1fr); gap: 5px; padding: 14px 9px; }
  .score-name { font-size: 13px; }
  .score-number { font-size: 25px; }
  .duel-result-row { padding: 12px 10px; }
  .catalogue-main { width: min(100% - 28px, 760px); padding-top: 28px; }
  .contact-main { width: min(100% - 28px, 650px); padding-top: 28px; }
  .contact-card { padding: 19px 15px; border-radius: 22px; }
  .trail-year { padding: 14px 11px; }
  .trail-card { grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; padding: 11px 9px; }
  .trail-card-name { grid-column: 1; }
  .trail-finisher-count { grid-column: 2; grid-row: 1; text-align: right; }
  .trail-results-link { grid-column: 1 / -1; justify-self: start; padding-top: 4px; }
  footer { width: min(100% - 32px, 900px); padding: 12px 0; flex-direction: column; justify-content: center; gap: 5px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; } }

/* Mobile comfort: readable fields, generous touch targets, and no sideways scroll. */
@media (max-width: 560px) {
  html, body { max-width: 100%; overflow-x: clip; }
  body { min-height: 100vh; min-height: 100dvh; }
  .topbar { min-height: 64px; height: auto; padding: 10px 15px; }
  main { width: min(100% - 24px, 700px); padding: 18px 0 calc(28px + env(safe-area-inset-bottom)); }
  h1 { font-size: clamp(38px, 11vw, 50px); line-height: 1; }
  .intro-copy { max-width: 34ch; font-size: 15px; }
  .intro-invite { max-width: 34ch; font-size: 15px; line-height: 1.45; }
  .feedback-link { display: inline-flex; min-height: 44px; align-items: center; padding: 6px; }
  .duel-panel { margin-top: 20px; padding: 19px 12px 16px; border-width: 2px; }
  .pickers { grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr); gap: 5px; }
  .runner-picker { width: 100%; }
  .picker-label { margin-bottom: 7px; font-size: 8px; }
  .input-wrap { width: 100%; }
  input { height: 50px; padding: 0 8px; font-size: 16px; }
  .suggestions { max-height: min(40vh, 260px); }
  .suggestion-option { min-height: 44px; padding: 10px; font-size: 15px; }
  .versus { width: 34px; height: 34px; font-size: 10px; }
  .compare-btn { width: 100%; min-height: 54px; padding: 10px 12px; gap: 7px; font-size: 11px; line-height: 1.3; letter-spacing: .06em; }
  .panel-note { font-size: 12px; }
  .duel-score { grid-template-columns: minmax(0, 1fr) 32px 15px 32px minmax(0, 1fr); gap: 4px; padding: 14px 8px; }
  .score-name { font-size: 13px; line-height: 1.25; }
  .score-number { font-size: 25px; }
  .share-button { min-height: 44px; padding: 10px 18px; font-size: 13px; }
  .duel-taunt { margin: 14px 2px 8px; font-size: 17px; line-height: 1.4; }
  .duel-result-row { padding: 12px 10px; }
  .duel-race { align-items: flex-start; flex-direction: column; gap: 3px; font-size: 12px; }
  .duel-race span { text-align: left; }
  .duel-times { grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); gap: 5px; }
  .duel-runner > strong { font-size: clamp(17px, 5vw, 22px); }
  .duel-runner.is-winner > strong { font-size: clamp(19px, 5.5vw, 25px); }
  .data-note { padding: 0 4px; font-size: 12px; }
  .catalogue-link { min-height: 44px; justify-content: center; padding: 10px 14px; }
  .contact-main, .catalogue-main { width: min(100% - 24px, 760px); }
  .leaderboard-main { width: min(100% - 24px, 760px); padding-top: 20px; }
  .leaderboard-intro { margin-bottom: 21px; }
  .leaderboard-card { padding: 14px 11px; border-width: 2px; border-radius: 21px; }
  .leaderboard-toolbar { align-items: stretch; flex-direction: column; gap: 10px; }
  .leaderboard-toolbar > div strong { font-size: 17px; }
  .sort-control { min-width: 0; }
  .sort-control select { min-height: 48px; font-size: 16px; }
  .leaderboard-explainer { margin: 10px 2px 13px; }
  .leaderboard-person { padding: 9px 8px; }
  .leaderboard-person-heading { grid-template-columns: 33px minmax(0, 1fr); gap: 7px; }
  .leaderboard-position { width: 31px; height: 31px; }
  .leaderboard-person h2 { font-size: 14px; }
  .leaderboard-win-count { grid-column: 2; justify-self: start; font-size: 10px; text-align: left; }
  .leaderboard-stats { margin: 7px 0 0 40px; gap: 5px; }
  .leaderboard-stats span { font-size: 9px; }
  .leaderboard-stats strong { font-size: 12px; }
  .leaderboard-link { min-height: 46px; padding: 10px 17px; }
  .contact-form input[type="text"], .contact-form textarea { font-size: 16px; }
  .contact-form input[type="file"] { min-height: 44px; padding: 8px 0; font-size: 14px; }
  .contact-submit { min-height: 52px; }
  .year-button { min-height: 64px; }
  .trail-results-link { min-height: 44px; align-items: center; }
  footer { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}

@media (max-width: 360px) {
  .brand { font-size: 14px; }
  .edition-pill { gap: 5px; padding: 7px; font-size: 7px; }
  .duel-panel { padding-right: 9px; padding-left: 9px; }
  .pickers { grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr); gap: 4px; }
  .versus { width: 30px; height: 30px; font-size: 9px; }
  .duel-score { grid-template-columns: minmax(0, 1fr) 27px 13px 27px minmax(0, 1fr); gap: 3px; padding-right: 6px; padding-left: 6px; }
  .score-name { font-size: 12px; }
  .score-number { font-size: 23px; }
  .duel-runner > .runner-outcome { font-size: 8px; letter-spacing: .04em; }
  .leaderboard-person h2 { font-size: 13px; }
  .leaderboard-stats { margin-left: 38px; }
}

.leaderboard-person h2 a { color: inherit; text-decoration: none; }
.leaderboard-person h2 a:hover { text-decoration: underline; }
.leaderboard-person h2 a:focus-visible { outline: 2px solid var(--forest); outline-offset: 4px; }
.runner-main { width: min(100% - 32px, 900px); margin: 0 auto; padding: 32px 0; min-height: calc(100vh - 160px); }
.runner-main h1 { overflow-wrap: anywhere; }
.runner-year { margin: 24px 0; padding: 18px; background: var(--cream); border: 2px solid white; border-radius: 20px; }
.runner-year h2 { display: flex; justify-content: space-between; gap: 16px; margin: 0 0 14px; color: var(--forest-dark); }
.runner-year h2 span { font-size: 12px; font-weight: 600; align-self: center; }
.runner-table-wrap { overflow-x: auto; }
.runner-table { width: 100%; min-width: 520px; table-layout: fixed; border-collapse: collapse; font-size: 13px; text-align: left; }
.runner-table th:nth-child(1) { width: 52%; overflow-wrap: anywhere; }
.runner-table th:nth-child(2) { width: 14%; }
.runner-table th:nth-child(3) { width: 16%; }
.runner-table th:nth-child(4) { width: 18%; }
.runner-table th, .runner-table td { padding: 12px 8px; border-bottom: 1px solid var(--line); }
.runner-table thead { color: var(--forest-dark); }
.runner-table tbody th { font-weight: 600; min-width: 170px; }
.runner-table td { white-space: nowrap; }
@media(max-width: 540px) { .runner-year { padding: 12px; } .runner-table { font-size: 12px; } }

#exportDuelBtn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.share-row { flex-wrap: wrap; }

.profile-stats { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px 20px;max-width:650px;margin:28px auto 24px;padding:30px 22px;border:2px solid var(--forest-dark);border-radius:24px;background:var(--cream); }
.profile-stat { display:flex;flex-direction:column;align-items:center;min-width:0; }
.profile-stat-value { font-family:Georgia,serif;font-style:italic;font-size:clamp(38px,6vw,51px);line-height:1.2;color:#936b31; }
.profile-stat-parts .profile-stat-value { color:#315f45; }
.profile-stat-wins .profile-stat-value { color:#bd6543; }
.profile-stat-label { font-size:14px;line-height:1.5;color:#777b68;font-weight:700; }
.profile-stat-ranking { display:block;font-size:11px;line-height:1.5;color:#94866b;margin-top:5px;font-weight:400; }
@media(max-width:420px) { .profile-stats { padding:24px 12px;gap:24px 12px; } .profile-stat-label { font-size:12px; } }

.profile-duel-action { margin:22px 0 0;text-align:center; }
.profile-duel-button { display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:58px;width:min(100%,340px);padding:16px 26px;border:2px solid #234b36;border-radius:18px;background:#315f45;color:#fffaf0;text-decoration:none;font:900 20px var(--font);box-shadow:0 5px 0 #234b36;transition:transform .15s,background .15s; }
.profile-duel-button:hover { background:#234b36;transform:translateY(-1px); }
.profile-duel-button:focus-visible { outline:3px solid #e57556;outline-offset:5px; }

/* The duel poster uses the same local typography and palette as its story. */
@font-face { font-family: "Monta Story"; src: url("anton.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Monta Edition"; src: url("caveat.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
body.duel-home { background: #fcf9ee; color: #062c22; }
.duel-home #headline { font-family: "Monta Story", sans-serif; font-weight: 400; letter-spacing: .02em; }
.duel-home .duel-panel { background: #fcf9ee; border: 1px solid #062c2233; box-shadow: none; border-radius: 8px; }
.duel-home .versus { color: #f36b32; background: transparent; border: 0; transform: none; font: 400 29px "Monta Story", sans-serif; }
.duel-score.editorial-duel { display: block; padding: clamp(18px,4vw,36px); border: 1px solid #062c2233; border-radius: 8px; background: #fcf9ee; box-shadow: none; color: #062c22; }
.duel-poster-brand { display: flex; justify-content: center; align-items: center; gap: 12px; }
.duel-poster-brand svg { flex: 0 0 24px; width: 24px; height: 38px; }
.duel-poster-brand > span { padding-left: 14px; border-left: 1px solid; font: 400 clamp(23px,5vw,32px) "Monta Story",sans-serif; letter-spacing: .1em; white-space: nowrap; }
.duel-poster-brand i { font: 600 clamp(19px,4vw,27px) "Monta Edition",cursive; white-space: nowrap; }
.duel-poster-tagline { margin: 15px 0 34px; font-size: clamp(12px,2.7vw,15px); font-weight: 700; }
.duel-poster-names { display: grid; grid-template-columns: minmax(0,1fr) 34px minmax(0,1fr); align-items: center; gap: 6px; }
.editorial-duel .score-name { min-width: 0; color: #062c22; font: 400 var(--duel-name-size,40px)/1.1 "Monta Story",sans-serif; text-transform: uppercase; overflow-wrap: normal; }
.editorial-duel .score-name a { display: block; }
.editorial-duel .score-name span { display: block; white-space: nowrap; }
.duel-poster-vs { color: #f36b32; font: 400 30px "Monta Story",sans-serif; }
.duel-poster-score { display: grid; grid-template-columns: minmax(0,1fr) 34px minmax(0,1fr); align-items: center; gap: 6px; margin: 20px 0; }
.editorial-duel .score-number { color: #062c22; font: 400 clamp(90px,24vw,165px)/1 "Monta Story",sans-serif; }
.editorial-duel .score-x { color: #062c22; font: 400 60px/1 "Monta Story",sans-serif; }
.duel-score.editorial-duel p { margin: 20px 0 30px; color: #062c22; font-size: clamp(15px,3.5vw,20px); text-transform: uppercase; }
.duel-poster-stats { border-top: 1px solid #062c22; }
.duel-stat-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2.5fr) minmax(0,1fr); align-items: center; gap: 6px; min-height: 62px; border-bottom: 1px solid #062c22; }
.duel-stat-row > span { font-size: clamp(10px,2.5vw,14px); font-weight: 700; text-transform: uppercase; }
.duel-stat-row > strong { font-size: clamp(14px,3.2vw,22px); }
.duel-stat-row small { font-size: .68em; white-space: nowrap; }
.duel-home .results > .share-row { flex-wrap: wrap; margin: 16px 0; }
@media(max-width:380px) { .duel-poster-brand { gap: 8px; } .duel-poster-brand > span { padding-left: 8px; font-size: 21px; } .duel-poster-brand i { font-size: 18px; } .duel-poster-brand svg { width: 18px; flex-basis: 18px; } }

/* Keep the duel's two sharing actions prominent below its score. */
.duel-home .results > .share-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.5fr); gap: 12px; margin: 20px 0 24px; }
.duel-home .results > .share-row .share-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 54px; padding: 14px 18px; border: 2px solid #062c22; border-radius: 12px; background: #062c22; color: #fcf9ee; box-shadow: 0 4px 0 #062c2230; font-size: 15px; line-height: 1.3; text-align: center; }
.duel-home .results #exportDuelBtn { border-color: #b5451a; background: #f36b32; color: #172c23; box-shadow: 0 4px 0 #b5451a; }
.duel-home .results > .share-row .share-button:hover { filter: brightness(1.1); transform: translateY(-2px); }
.duel-home .results > .share-row .share-button:active { transform: translateY(2px); box-shadow: none; }
.duel-home .results > .share-row .share-button:disabled { opacity: .65; cursor: wait; transform: none; }
.duel-home .results > .share-row .share-button svg { flex-shrink: 0; width: 20px; height: 20px; }
.duel-home .results .share-status { grid-column: 1 / -1; text-align: center; }
.duel-home .results .share-status:empty { display: none; }
@media(max-width:480px) { .duel-home .results > .share-row { grid-template-columns: 1fr; gap: 12px; } .duel-home .results > .share-row .share-button { width: 100%; min-height: 56px; font-size: 16px; } }

/* Runner profiles share the duel's editorial palette and typography. */
body.profile-editorial { background: #fcf9ee; color: #062c22; }
.profile-editorial .catalogue-intro { max-width: 650px; margin: 0 auto; }
.profile-editorial .catalogue-intro > .eyebrow { font: 700 clamp(18px,4vw,24px)/1.4 var(--font); letter-spacing: 0; color: #d35522; text-transform: none; }
.profile-editorial #runnerName { margin: 28px auto 12px; font: 400 var(--profile-name-size,60px)/1.12 "Monta Story",sans-serif; letter-spacing: 0; text-transform: uppercase; overflow-wrap: normal; }
.profile-editorial #runnerName span { display: block; white-space: nowrap; color: inherit; }
.profile-poster-summary { margin: 0 auto 24px; }
.profile-poster-total { display: flex; flex-direction: column; align-items: center; margin: 18px 0 32px; }
.profile-poster-total > strong { font: 400 clamp(110px,24vw,180px)/1.2 "Monta Story",sans-serif; }
.profile-poster-total > span { margin-top: 6px; font-size: clamp(17px,4vw,23px); font-weight: 800; text-transform: uppercase; }
.profile-poster-total > small { margin-top: 8px; font-size: 13px; }
.profile-poster-rows { border-top: 1px solid #062c22; text-align: left; }
.profile-poster-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px 15px; padding: 20px 10px; border-bottom: 1px solid #062c22; }
.profile-poster-label { font-size: clamp(12px,2.7vw,16px); font-weight: 700; text-transform: uppercase; }
.profile-poster-row > strong { font: 400 clamp(28px,6vw,39px)/1.1 "Monta Story",sans-serif; }
.profile-poster-row > strong small { font: 700 .55em Arial,sans-serif; }
.profile-poster-ranks { display: flex; flex-wrap: wrap; gap: 5px 18px; grid-column: 1/-1; }
.profile-poster-ranks small { font-size: clamp(11px,2.5vw,13px); color: #536458; }
.profile-editorial .runner-year { background: #fcf9ee; border: 1px solid #062c2240; border-radius: 8px; }
.profile-editorial .runner-year h2 { font: 400 32px "Monta Story",sans-serif; color: #062c22; }
.profile-editorial .runner-year h2 span { font-family: var(--font); }
.profile-editorial .runner-table th, .profile-editorial .runner-table td { border-color: #062c2226; }
.profile-editorial .catalogue-intro > .share-row { display: grid; grid-template-columns: 1fr 1.6fr; gap: 12px; margin-top: 22px; }
.profile-editorial .share-row .share-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 56px; padding: 14px 16px; border: 2px solid #062c22; border-radius: 12px; background: #062c22; color: #fcf9ee; font-size: 15px; line-height: 1.3; box-shadow: 0 4px 0 #062c2230; }
.profile-editorial #exportProfileBtn { background: #f36b32; color: #172c23; border-color: #b5451a; box-shadow: 0 4px 0 #b5451a; }
.profile-editorial .share-row svg { width: 20px; height: 20px; flex-shrink: 0; }
.profile-editorial .share-status { grid-column: 1/-1; text-align: center; }
.profile-editorial .share-status:empty { display: none; }
.profile-editorial .share-button:disabled { opacity: .65; cursor: wait; }
.profile-editorial .profile-duel-button { background: transparent; color: #062c22; border-color: #062c22; border-radius: 12px; box-shadow: none; font-size: 17px; }
.profile-editorial .profile-duel-button:hover { background: #062c220a; }
@media(max-width:480px) { .profile-editorial .catalogue-intro > .share-row { grid-template-columns: 1fr; } .profile-editorial .share-row .share-button { width: 100%; font-size: 16px; } }