/* OnTrack Timing — shared visual system
   Yellow (--hivis) is semantic, never decorative: it marks the live line,
   the live-results action, and the next event. Nothing else. */

:root{
  --track:#000000;
  --board:#141414;
  --edge:#262629;
  --chalk:#EDEDEA;
  --steel:#8A8D94;
  --hivis:#FFD100;
  --measure:34rem;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--track);
  color:var(--chalk);
  font-family:'Archivo','Helvetica Neue',Arial,sans-serif;
  font-variation-settings:'wdth' 100,'wght' 400;
  font-size:1rem;
  line-height:1.6;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit}

.shell{max-width:64rem;margin:0 auto;padding:0 1.5rem}

/* ---- masthead + the live line ---- */
.masthead{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.4rem 0 1.25rem}
.mark{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.monogram{display:grid;place-items:center;width:2.3rem;height:2.3rem;
  background:var(--board);border:1px solid var(--edge);
  font-variation-settings:'wdth' 125,'wght' 800;font-size:.9rem;letter-spacing:.01em}
.mark img{height:2.3rem;width:auto;display:block}
.wordmark{font-variation-settings:'wdth' 112,'wght' 700;font-size:1.02rem;
  letter-spacing:-.01em;white-space:nowrap}
.mastnav{display:flex;gap:1.4rem;font-size:.9rem}
.mastnav a{color:var(--steel);text-decoration:none;padding-bottom:2px;
  white-space:nowrap;border-bottom:1px solid transparent}
.mastnav a:hover,.mastnav a[aria-current]{color:var(--chalk);border-bottom-color:var(--chalk)}
.liveline{height:3px;background:var(--hivis)}

/* ---- hero ---- */
.hero{padding:4rem 0 3.25rem}
.hero h1{
  margin:0 0 1.1rem;
  font-variation-settings:'wdth' 125,'wght' 800;
  font-size:clamp(2.7rem,7.5vw,5rem);
  line-height:.92;
  letter-spacing:-.035em;
}
.lede{margin:0;max-width:var(--measure);color:var(--steel);font-size:1.06rem}
.lede strong{color:var(--chalk);font-variation-settings:'wdth' 100,'wght' 600}

/* ---- the two destinations ---- */
.go{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  margin-top:2.5rem;background:var(--edge);border:1px solid var(--edge)}
.go a{display:block;padding:1.5rem 1.5rem 1.65rem;background:var(--track);
  text-decoration:none;transition:background .12s linear,color .12s linear}
.go b{display:block;font-variation-settings:'wdth' 118,'wght' 700;
  font-size:1.5rem;letter-spacing:-.02em;line-height:1.1}
.go span{display:block;margin-top:.45rem;color:var(--steel);font-size:.92rem;line-height:1.45}
.go .now{background:var(--hivis);color:var(--track)}
.go .now span{color:#3d3200}
.go .now:hover{background:#ffdd3d}
.go .then:hover{background:var(--board)}

/* ---- next event ---- */
.next{border-top:1px solid var(--edge);padding:2.5rem 0}
.next-card{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;
  border-left:3px solid var(--hivis);padding-left:1.25rem}
.when{display:flex;align-items:baseline;gap:.45rem;color:var(--hivis);
  font-variation-settings:'wdth' 125,'wght' 800;letter-spacing:-.03em}
.when .day{font-size:3.1rem;line-height:1}
.when .mon{font-size:1.15rem}
.when .yr{font-size:1.15rem;color:var(--steel);font-variation-settings:'wdth' 100,'wght' 600}
.next-card h3{margin:0;font-variation-settings:'wdth' 112,'wght' 700;
  font-size:1.3rem;letter-spacing:-.015em}
.next-card p{margin:.2rem 0 0;color:var(--steel);font-size:.94rem}

/* ---- section headings ---- */
h2{margin:0 0 1.4rem;font-variation-settings:'wdth' 112,'wght' 700;
  font-size:1.12rem;letter-spacing:-.01em}

/* ---- archive ---- */
.archive{border-top:1px solid var(--edge);padding:2.5rem 0}
/* One structural device, reused: a label column, a content column, a hairline
   between rows. Used by both the race archive and the services list. */
.row{display:grid;grid-template-columns:14rem 1fr;gap:1.25rem;
  padding:1.1rem 0;border-top:1px solid var(--edge)}
.row:first-of-type{border-top:0}
.row h3{margin:0;font-variation-settings:'wdth' 106,'wght' 600;font-size:1.02rem}
.row p{margin:0;color:var(--steel);font-size:.94rem;max-width:var(--measure)}
.yrs{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin:0;padding:0}
.yrs a{display:inline-block;padding:.34rem .7rem;background:var(--board);
  border:1px solid var(--edge);text-decoration:none;font-size:.92rem;
  transition:background .12s linear,color .12s linear,border-color .12s linear}
.yrs a:hover{background:var(--chalk);color:var(--track);border-color:var(--chalk)}

/* ---- services ---- */
.does{border-top:1px solid var(--edge);padding:2.5rem 0 1rem}

.row p a.mail{color:var(--chalk);text-decoration:none;
  border-bottom:1px solid var(--steel)}
.row p a.mail:hover{border-bottom-color:var(--chalk)}


/* ---- results tables ---- */
.eventmeta{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:.9rem;
  color:var(--steel);font-size:.94rem}
.eventmeta b{display:block;color:var(--chalk);
  font-variation-settings:'wdth' 106,'wght' 600;font-size:1rem}

.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-top:1px solid var(--edge);margin-top:2rem}
table.rt{width:100%;border-collapse:collapse;font-size:.93rem}
table.rt th{text-align:left;white-space:nowrap;color:var(--steel);
  font-variation-settings:'wdth' 106,'wght' 600;font-size:.83rem;
  padding:.7rem .7rem;border-bottom:1px solid var(--edge)}
table.rt td{white-space:nowrap;padding:.5rem .7rem;border-bottom:1px solid #1a1a1d}
table.rt td.nm{white-space:normal;font-variation-settings:'wdth' 100,'wght' 500}
table.rt td.n{text-align:right}
table.rt tr.grp td{background:var(--board);color:var(--chalk);
  font-variation-settings:'wdth' 112,'wght' 700;font-size:.97rem;
  padding:.85rem .7rem;border-top:1px solid var(--edge);white-space:normal}
table.rt tr:hover td{background:#131316}
table.rt tr.grp:hover td{background:var(--board)}
.dnf{color:var(--steel)}

.pending{color:var(--chalk);border-bottom:1px dotted var(--steel)}
footer{border-top:1px solid var(--edge);margin-top:2.5rem;padding:1.6rem 0 3rem;
  color:var(--steel);font-size:.88rem;display:flex;gap:1.4rem;flex-wrap:wrap}
footer a{text-decoration:none;border-bottom:1px solid var(--edge)}
footer a:hover{color:var(--chalk);border-bottom-color:var(--chalk)}

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

@media (max-width:40rem){
  .go{grid-template-columns:1fr}
  .row{grid-template-columns:1fr;gap:.45rem}
  .hero{padding:3rem 0 2.5rem}
}
/* Below ~26rem the wordmark and both nav links cannot sit on one line.
   Drop to the monogram rather than let them wrap. */
@media (max-width:26rem){
  .wordmark{display:none}
  .mastnav{gap:1rem;font-size:.86rem}
  .shell{padding:0 1.15rem}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}