/* Colorado Triathlete archive. Mobile-first; brand colors from docs/brand-guide.pdf. */
@font-face { font-family: "Montserrat"; font-weight: 600; font-display: swap; src: url(/assets/fonts/montserrat-600.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-display: swap; src: url(/assets/fonts/montserrat-700.woff2) format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-display: swap; src: url(/assets/fonts/source-sans-3-400.woff2) format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-style: italic; font-display: swap; src: url(/assets/fonts/source-sans-3-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 600; font-display: swap; src: url(/assets/fonts/source-sans-3-600.woff2) format("woff2"); }

:root {
  --blue: #1c3664;
  --red: #bb2332;
  --yellow: #ffd200;
  --ink: #1d2433;
  --muted: #5a6273;
  --line: #d9dde5;
  --paper: #ffffff;
  --wash: #f3f5f9;
  --heading: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --measure: 46rem;
  --wide: 72rem;
  --gap: 1rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.125rem/1.6 var(--body); }
img, video, iframe { max-width: 100%; height: auto; }
iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; }
/* links: color only, no underline (owner preference); in running text they are also semibold so they stand out from body copy */
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--red); }
.prose a { font-weight: 600; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; box-shadow: 0 0 0 5px var(--blue); }
h1, h2, h3, h4 { font-family: var(--heading); font-weight: 700; color: var(--blue); line-height: 1.2; margin: 1.6em 0 0.5em; }
h1 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.6rem); margin-top: 0.6em; }
h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); }
h3 { font-size: 1.2rem; }
.skip { position: absolute; left: -999px; top: 0; background: var(--yellow); color: var(--blue); padding: 0.5rem 1rem; z-index: 60; }
.skip:focus { left: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- masthead: banner logo on a blue band ---------- */
.band { background: var(--blue); }
.logo { display: block; max-width: var(--wide); margin: 0 auto; }
.logo img { display: block; width: 100%; height: auto; }
/* menu bar: brand blue; links yellow on blue (brand guide).
   Smart sticky: it sticks to the top of the screen, slides away while scrolling down and back on scrolling up (menu.js) */
.nav { background: var(--blue); position: sticky; top: 0; z-index: 50; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.nav.nav-stuck { box-shadow: 0 2px 8px rgba(10, 16, 30, 0.25); }
.nav.nav-hidden { transform: translateY(-100%); box-shadow: none; }
/* jump links (#y2001, #page-4) land below the bar */
html { scroll-padding-top: 3.5rem; }
.nav ul { list-style: none; margin: 0 auto; padding: 0 var(--gap); max-width: var(--wide); display: flex; gap: 0.25rem 1.25rem; flex-wrap: wrap; overflow-x: auto; }
.nav a { display: block; padding: 0.75rem 0 0.6rem; border-bottom: 3px solid transparent; color: var(--yellow); text-decoration: none; font: 700 0.95rem/1.2 var(--heading); white-space: nowrap; }
.nav a:hover { color: #fff; }
.nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--yellow); }
.nav-search { margin-left: auto; }
/* mobile: menu collapses behind a "Menu" button (menu.js) */
.nav-toggle { display: flex; align-items: center; gap: 0.6rem; width: 100%; max-width: var(--wide); margin: 0 auto; padding: 0.8rem var(--gap); background: none; border: 0; color: var(--yellow); font: 700 1rem/1 var(--heading); cursor: pointer; }
.nav-toggle[hidden] { display: none; }
.nav-toggle:hover { color: #fff; }
.nav-icon, .nav-icon::before, .nav-icon::after { display: block; width: 1.3rem; height: 3px; border-radius: 2px; background: currentColor; transition: transform 0.2s; }
.nav-icon { position: relative; }
.nav-icon::before, .nav-icon::after { content: ""; position: absolute; left: 0; }
.nav-icon::before { top: -7px; }
.nav-icon::after { top: 7px; }
.nav.open .nav-icon { background: transparent; }
.nav.open .nav-icon::before { transform: translateY(7px) rotate(45deg); }
.nav.open .nav-icon::after { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 49.99rem) {
  .nav.collapsible ul { display: none; }
  .nav.collapsible.open ul { display: block; padding-bottom: 0.5rem; max-height: calc(100vh - 3.5rem); max-height: calc(100dvh - 3.5rem); overflow-y: auto; }
  .nav.collapsible a { padding: 0.8rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.15); font-size: 1.05rem; }
  .nav.collapsible li:last-child a { border-bottom: 0; }
  .nav.collapsible a[aria-current="page"] { border-bottom-color: rgba(255, 255, 255, 0.15); box-shadow: inset 4px 0 0 var(--yellow); padding-left: 0.75rem; }
  .nav.collapsible .nav-search { margin-left: 0; }
}
@media (min-width: 50rem) { .nav-toggle { display: none; } }

/* ---------- layout ---------- */
main { padding-bottom: 3rem; }
.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gap); }
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1em; }
.prose p, .prose ul, .prose ol { margin: 0 0 1em; }
.prose blockquote { margin: 1.5em 0; padding-left: 1em; border-left: 4px solid var(--yellow); color: var(--muted); }
.lede { font-size: 1.25rem; color: var(--muted); }
.meta { color: var(--muted); font-size: 0.95rem; margin: 0 0 1.5rem; }
.meta a { color: inherit; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0.5rem 0; list-style: none; }
.chip { display: inline-block; padding: 0.15rem 0.6rem; border: 1px solid var(--line); border-radius: 999px; font: 600 0.8rem/1.5 var(--heading); color: var(--blue); text-decoration: none; background: var(--paper); }
a.chip:hover { border-color: var(--red); }
.badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 0.25rem; background: var(--yellow); color: var(--blue); font: 700 0.75rem/1.5 var(--heading); text-transform: uppercase; letter-spacing: 0.04em; vertical-align: middle; }
.badge.defunct { background: var(--wash); color: var(--muted); }
figure { margin: 1.5em 0; }
figure img { display: block; width: 100%; height: auto; background: var(--wash); }
figcaption { font-size: 0.9rem; color: var(--muted); margin-top: 0.4rem; }
.prose figure img { width: auto; max-width: 100%; }
.prose figure:not(.float) img { margin: 0 auto; }
/* portrait and small photos: the figure is the photo's real width (inline style), never wider than the column;
   on wider screens it sits on the right at up to 45% of the column, with the text flowing around it */
.prose figure.float { max-width: 100%; margin: 1.5em auto; }
.prose figure.float img { width: 100%; }
@media (min-width: 40rem) {
  .prose figure.float { float: right; max-width: 45%; margin: 0.35rem 0 1rem 1.5rem; }
}
.prose h2, .prose h3, .prose h4, .prose table, .prose pre, .prose hr, .prose figure:not(.float), .prose .gallery-link { clear: both; }
.prose::after { content: ""; display: table; clear: both; }

/* tables (results) scroll on small screens */
.prose table { display: block; overflow-x: auto; border-collapse: collapse; font-size: 0.95rem; font-variant-numeric: tabular-nums; margin: 1em 0 1.5em; max-width: 100%; }
.prose th, .prose td { padding: 0.3rem 0.6rem; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.prose th { font-family: var(--heading); font-weight: 600; font-size: 0.85rem; color: var(--blue); }

/* ---------- cards and lists ---------- */
.grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); margin: 1rem 0 2rem; padding: 0; list-style: none; }
.card { display: flex; flex-direction: column; gap: 0.35rem; text-decoration: none; color: inherit; }
.card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--wash); border-radius: 0.25rem; }
/* small photos (early galleries): shown at actual size, centered on the card's background, never stretched */
.card img.img-small { object-fit: scale-down; }
.card .title { font: 700 1.05rem/1.3 var(--heading); color: var(--blue); }
.card:hover .title { color: var(--red); }
.card .sub { font-size: 0.9rem; color: var(--muted); }
.list { list-style: none; padding: 0; margin: 0 0 2rem; }
.list li { padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
.list .title { font: 600 1.05rem/1.35 var(--heading); }
.list .sub { display: block; font-size: 0.9rem; color: var(--muted); }

/* ---------- filters ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: end; padding: 1rem; background: var(--wash); border-radius: 0.5rem; margin: 1rem 0 1.5rem; }
.filters label { display: flex; flex-direction: column; gap: 0.2rem; font: 600 0.8rem/1.2 var(--heading); color: var(--blue); }
.filters select, .filters input { font: 1rem var(--body); padding: 0.4rem 0.5rem; border: 1px solid var(--line); border-radius: 0.25rem; background: #fff; min-width: 10rem; }
.filter-count { color: var(--muted); font-size: 0.95rem; margin-left: auto; }
[hidden] { display: none !important; }

/* ---------- race pages ---------- */
.race-facts { display: grid; gap: 0.5rem 1.5rem; grid-template-columns: max-content 1fr; margin: 1rem 0 2rem; }
.race-facts dt { font: 600 0.85rem/1.6 var(--heading); color: var(--blue); }
.race-facts dd { margin: 0; }
.year-grid { display: grid; gap: 0.35rem; grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); padding: 0; margin: 1rem 0 2rem; list-style: none; }
.year-grid a, .year-grid span { display: block; padding: 0.4rem 0.3rem; border-radius: 0.25rem; text-align: center; font: 600 0.9rem/1.2 var(--heading); text-decoration: none; }
.year-grid a { background: var(--blue); color: #fff; }
.year-grid a:hover { background: var(--red); color: #fff; }
.year-grid a small, .year-grid span small { display: block; font: 400 0.7rem/1.3 var(--body); opacity: 0.85; }
/* years with no coverage: visibly empty, not broken */
.year-grid .empty { border: 1px dashed var(--line); color: var(--muted); background: transparent; }
.year-grid .cancelled { border: 1px dashed var(--red); color: var(--red); }
.directory-month { margin-top: 2rem; }
.race-row { display: grid; gap: 0.15rem; padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
.race-row .name { font: 700 1.05rem/1.3 var(--heading); }
.race-row .sub { color: var(--muted); font-size: 0.92rem; }
.feature-race { display: block; padding: 1.25rem; border-radius: 0.5rem; background: var(--blue); color: #fff; text-decoration: none; margin: 1rem 0 2rem; }
.feature-race .title { font: 700 1.35rem/1.25 var(--heading); color: var(--yellow); }
.feature-race:hover .title { text-decoration: underline; }

/* ---------- galleries ---------- */
.thumbs { display: grid; gap: 0.35rem; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); padding: 0; margin: 1rem 0 2rem; list-style: none; }
.thumbs a { display: block; aspect-ratio: 1; overflow: hidden; background: var(--wash); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s; }
.thumbs a:hover img { transform: scale(1.04); }
.pager { display: flex; justify-content: space-between; gap: 1rem; margin: 2rem 0; flex-wrap: wrap; }
.lightbox { padding: 0; border: 0; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; background: rgba(10, 16, 30, 0.96); color: #fff; }
.lightbox::backdrop { background: rgba(10, 16, 30, 0.9); }
.lightbox figure { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 0.5rem 1rem; }
.lightbox img { max-height: calc(100vh - 8rem); width: auto; max-width: 100%; object-fit: contain; background: transparent; }
.lightbox figcaption { color: #e6e9f0; max-width: 50rem; text-align: center; padding: 0.5rem 1rem; }
.lightbox button { position: absolute; background: transparent; border: 0; color: #fff; font: 700 2rem/1 var(--heading); padding: 0.5rem 0.9rem; cursor: pointer; }
.lightbox button:hover { color: var(--yellow); }
.lb-close { top: 0.25rem; right: 0.25rem; }
.lb-prev { left: 0.25rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: 0.25rem; top: 50%; transform: translateY(-50%); }
.lb-count { position: absolute; top: 0.9rem; left: 1rem; font-size: 0.9rem; color: #c9cfdc; }

/* ---------- home ---------- */
.hero { padding: 1.5rem 0 0.5rem; }
.hero p { max-width: var(--measure); }
.archive-feature { display: grid; gap: 1rem; align-items: center; margin: 1.5rem 0 2rem; }
.archive-feature img { width: 100%; height: auto; border-radius: 0.25rem; }
.note { padding: 1rem 1.25rem; background: var(--wash); border-left: 4px solid var(--yellow); border-radius: 0.25rem; }
.years { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0; list-style: none; }
.years a { display: block; padding: 0.35rem 0.6rem; border: 1px solid var(--line); border-radius: 0.25rem; font: 600 0.9rem/1.2 var(--heading); text-decoration: none; }
.years a:hover, .years a[aria-current="page"] { background: var(--blue); color: #fff; border-color: var(--blue); }

/* ---------- issues ---------- */
.covers { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); padding: 0; list-style: none; }
.covers img { width: 100%; height: auto; border: 1px solid var(--line); background: var(--wash); }

/* ---------- footer ---------- */
.footer { background: var(--blue); color: #fff; margin-top: 3rem; padding: 2rem var(--gap); }
.footer-inner { max-width: var(--wide); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between; }
.footer-inner p { margin: 0; font-size: 0.95rem; }
.footer-name { text-align: center; font: 600 1rem/1.5 var(--heading); }
.footer img { display: block; height: 56px; width: auto; }
.footer a { color: var(--yellow); }
@media (max-width: 39.99rem) { .footer-inner { flex-direction: column; justify-content: center; gap: 1.25rem; } }
/* yellow bar at the very bottom, links centered, styled like the menu bar */
.footer-bar { background: var(--yellow); padding: 0.75rem var(--gap); text-align: center; }
.footer-bar p { margin: 0; color: var(--blue); font: 700 0.95rem/1.2 var(--heading); }
.footer-bar a { color: var(--blue); }
.footer-bar a:hover { color: var(--red); }
.browse { margin: 1rem 0 0; font-family: var(--heading); font-weight: 600; }
.photo-single img { width: 100%; height: auto; max-height: 32rem; object-fit: cover; border-radius: 0.35rem; display: block; }

/* dated home notice */
.notice { display: grid; grid-template-columns: 6rem 1fr; gap: 1rem; align-items: center; margin: 1.5rem 0 0; padding: 1rem; background: var(--blue); color: #fff; border-left: 0.4rem solid var(--yellow); border-radius: 0.35rem; }
.notice p { margin: 0; }
.notice-title { font: 700 1.2rem/1.3 var(--heading); margin-bottom: 0.4rem !important; }
.notice a { color: var(--yellow); }
.notice a:hover { color: #fff; }
.notice-links a { white-space: nowrap; }
.notice-thumb img { width: 6rem; height: 6rem; object-fit: cover; border-radius: 0.25rem; display: block; }
@media (min-width: 40rem) { .notice { grid-template-columns: 9rem 1fr; } .notice-thumb img { width: 9rem; height: 6.75rem; } .notice-title { font-size: 1.4rem; } }

@media (min-width: 48rem) {
  :root { --gap: 1.5rem; }
  .archive-feature { grid-template-columns: 3fr 2fr; }
  .race-row { grid-template-columns: 1fr auto; align-items: baseline; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
@media print { .nav, .footer, .filters { display: none; } }

/* ---------- heroes: a full-width photo behind the page title ---------- */
.hero { position: relative; overflow: hidden; background: var(--blue); color: #fff; display: grid; align-items: end; min-height: clamp(16rem, 42vw, 30rem); }
.hero.short { min-height: clamp(11rem, 26vw, 18rem); margin-bottom: 1.5rem; }
.hero-media, .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-img { object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 20, 40, 0.75), rgba(10, 20, 40, 0.1) 60%); }
.hero-text { position: relative; z-index: 1; max-width: var(--wide); width: 100%; margin: 0 auto; padding: 1.5rem var(--gap); }
.hero-text h1 { color: #fff; margin: 0; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); }
.hero-text p { margin: 0.4rem 0 0; font-size: 1.15rem; max-width: var(--measure); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); }
.hero-text a { color: var(--yellow); }
.hero-credit { position: absolute; right: 0.5rem; bottom: 0.35rem; z-index: 1; font-size: 0.75rem; color: #dfe4ee; }
.hero-credit a { color: inherit; }
.home-section { margin: 2.5rem 0; }
.button { display: inline-block; padding: 0.55rem 1.1rem; border-radius: 0.3rem; background: var(--blue); color: #fff; font: 600 0.95rem/1.2 var(--heading); }
.button:hover { background: var(--red); color: #fff; }

/* photos from the archive: three photos side by side */
.photo-strip { display: grid; gap: 0.35rem; grid-template-columns: 1fr; }
.photo-strip img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0.25rem; }
.photo-feature-title { margin: 0.6rem 0 1rem; font: 700 1.15rem/1.3 var(--heading); }
.photo-feature-title .sub { display: block; font: 400 0.95rem var(--body); color: var(--muted); }
@media (min-width: 40rem) { .photo-strip { grid-template-columns: 2fr 1fr 1fr; } .photo-strip img:first-child { grid-row: span 1; } }

/* upcoming events */
.event-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.75rem; }
.event-list li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.event-date { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 0.35rem; background: var(--blue); color: #fff; line-height: 1; }
.event-date .m { font: 700 0.75rem var(--heading); text-transform: uppercase; color: var(--yellow); }
.event-date .d { font: 700 1.4rem var(--heading); }
.event-list .title { font: 700 1.05rem/1.3 var(--heading); }
.event-list .sub { display: block; color: var(--muted); font-size: 0.92rem; }

/* status box: "Next date: …", "Next date: TBA", "Held …" */
.status-box { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 0.25rem; background: var(--yellow); color: var(--blue); font: 700 0.8rem/1.5 var(--heading); white-space: nowrap; }
.status-box.tba { background: #fff4bf; }
.status-box.defunct { background: var(--wash); color: var(--muted); }

/* lists with thumbnails */
.thumbs-list li { display: grid; grid-template-columns: 6rem 1fr; gap: 0.9rem; align-items: center; }
.thumbs-list li:not(:has(.thumb)) { grid-template-columns: 1fr; }
.thumbs-list .thumb img { width: 6rem; height: 4.5rem; object-fit: cover; border-radius: 0.25rem; display: block; background: var(--wash); }
.race-row.with-thumb { grid-template-columns: 7rem 1fr; align-items: center; column-gap: 1rem; }
.race-row .race-thumb img { width: 7rem; height: 4.7rem; object-fit: cover; border-radius: 0.25rem; display: block; }
@media (min-width: 48rem) { .race-row.with-thumb { grid-template-columns: 7rem 1fr auto; } }
.race-row .when { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; align-items: center; font-size: 0.92rem; }

/* archive page */
.years-large a { padding: 0.5rem 0.85rem; font-size: 1rem; }
.archive-photo { margin: 2rem 0 0; }
.archive-photo img { width: 100%; height: auto; max-height: 34rem; object-fit: cover; border-radius: 0.35rem; }

/* results tables (Results page and race pages) */
.results-wrap { overflow-x: auto; }
.results-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; font-variant-numeric: tabular-nums; margin: 0.5rem 0 1rem; }
.results-table th, .results-table td { padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.results-table th { font: 600 0.82rem/1.3 var(--heading); color: var(--blue); }
.results-table td.time { font-weight: 600; }
.results-table .sub { color: var(--muted); font-size: 0.85rem; }
.results-group { margin: 0.5rem 0 1rem; border: 1px solid var(--line); border-radius: 0.35rem; padding: 0.4rem 0.8rem; }
.results-group summary { cursor: pointer; font: 700 1rem/1.4 var(--heading); color: var(--blue); padding: 0.25rem 0; }
.results-group .results-table { margin-top: 0.4rem; }

/* print issues: cover at actual size, contents beside it, then the page-by-page text */
.issue-head { display: grid; gap: 1.5rem; margin: 1.5rem 0 2rem; }
.issue-cover img { display: block; width: auto; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 0.2rem; }
@media (min-width: 40rem) { .issue-head { grid-template-columns: auto 1fr; align-items: start; } }
.issue-contents { list-style: none; padding: 0; margin: 0; }
.issue-contents li { padding: 0.45rem 0; border-bottom: 1px solid var(--line); }
.issue-contents .sub { display: block; font-size: 0.9rem; color: var(--muted); }
.issue-text { margin: 2rem 0; border: 1px solid var(--line); border-radius: 0.35rem; padding: 0.75rem 1rem; }
.issue-text summary { cursor: pointer; font: 700 1.15rem/1.3 var(--heading); color: var(--blue); }
.issue-page { max-width: var(--measure); margin-top: 1.5rem; }
.issue-page h3 { font-size: 1rem; margin-bottom: 0.5rem; }
.issue-page { border-top: 1px solid var(--line); padding-top: 1rem; }
.issue-page p { margin: 0 0 0.85em; line-height: 1.6; }
/* results tables and lists: one row per line, in a compact block that scrolls sideways on phones */
.issue-rows { margin: 0.5rem 0 1rem; padding: 0.6rem 0.8rem; background: var(--wash); border-radius: 0.25rem; overflow-x: auto; font-size: 0.85rem; line-height: 1.55; font-variant-numeric: tabular-nums; }
.issue-rows span { display: block; white-space: nowrap; }

/* results rows kept in their printed columns (```text blocks in articles): one row per line, scrolls sideways on phones */
.prose pre { margin: 1em 0 1.5em; padding: 0.75rem 1rem; background: var(--wash); border-radius: 0.25rem; overflow-x: auto; font-size: 0.85rem; line-height: 1.55; }
.prose pre code { font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace; white-space: pre; }

/* race-page results: rows past the first 10 wait behind "Show all" */
.results-group.collapsed tr.extra { display: none; }
.results-more-btn { margin: 0.25rem 0 1rem; font-size: 0.85rem; }
button.button { border: 0; cursor: pointer; }