/* ─────────────────────────────────────────────────────────────────────────
   Asynk Runner — typography & spacing overrides on top of hugo-bearblog
   Inspiration: Scribbles (scribbles.page) — warm serif, generous spacing
   ───────────────────────────────────────────────────────────────────────── */

/* Fonts loaded via custom_head.html:
   - Lora      → body text  (warm, readable serif)
   - Inter     → nav, meta, tags, headings (clean sans-serif)            */

/* ── Root overrides ───────────────────────────────────────────────────── */
:root {
  --width:        960px;
  --font-main:    "Lora", Georgia, "Times New Roman", serif;
  --font-second:  "Inter", system-ui, -apple-system, sans-serif;

  /* Warm off-white instead of stark white */
  --background-color: #faf9f6;
  --text-color:       #2c2c2c;
  --heading-color:    #1a1a1a;

  /* Forest green — running trails, outdoors, travel */
  --link-color:    #2e7d5e;
  --visited-color: #5a9e7e;

  --meta-color:    #888;
  --border-color:  #e8e3d8;
}

/* ── Dark mode overrides ──────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #1a1c19;
    --text-color:       #e4e8e1;
    --heading-color:    #f0f4ed;
    --link-color:       #6abf9e;
    --visited-color:    #8ecfb4;
    --meta-color:       #7a8078;
    --border-color:     #2e332c;
  }
}

/* ── Base typography ──────────────────────────────────────────────────── */
body {
  font-family: var(--font-main);
  font-size:   18px;
  line-height: 1.85;
  color:       var(--text-color);
  background:  var(--background-color);
}

/* Headings: Inter for clean contrast against Lora body */
h1, h2, h3, h4, h5, h6 {
  font-family:     var(--font-second);
  font-weight:     600;
  line-height:     1.25;
  letter-spacing:  -0.02em;
  color:           var(--heading-color);
}

h1 { font-size: 1.75rem; margin-bottom: 0.25rem; }

h2 {
  font-size:     1.5rem;
  font-weight:   700;
  margin-top:    2.75rem;
  margin-bottom: 0.5rem;
  padding-left:  0.75rem;
  border-left:   3px solid var(--link-color);
  color:         var(--heading-color);
}

h3 {
  font-size:     1.15rem;
  font-weight:   600;
  margin-top:    2rem;
  color:         var(--link-color);
}

/* ── Header & Navigation ─────────────────────────────────────────────── */
header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   2rem;
  gap:             1rem;
}

header .title {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.brand {
  display:        flex;
  flex-direction: column;
  line-height:    1.2;
}

/* Composite brand icon: green pill wrapping monitor SVG + runner PNG */
.brand-icon-wrap {
  display:     flex;
  align-items: center;
  gap:         6px;
  background:  var(--link-color);
  border-radius: 16px;
  padding:     7px 10px;
  flex-shrink: 0;
}

.brand-monitor-svg {
  width:  34px;
  height: 37px;
}

.brand-runner-img {
  width:        58px;
  height:       58px;
  border-radius: 50%;
  background:   white;
  padding:      4px;
  box-sizing:   border-box;
}

.brand-name {
  font-family:  var(--font-second);
  font-size:    1.9rem;
  font-weight:  800;
  letter-spacing: -0.03em;

  /* Gradient text */
  background:                linear-gradient(120deg, var(--heading-color) 40%, var(--link-color));
  -webkit-background-clip:   text;
  -webkit-text-fill-color:   transparent;
  background-clip:           text;
}

.brand-k {
  font-style:  italic;
  font-size:   2.1rem;
}

.brand-tagline {
  font-family:    var(--font-second);
  font-size:      0.68rem;
  font-weight:    500;
  letter-spacing: 0.05em;
  color:          var(--meta-color);
  margin-top:     0.05rem;
  padding-left:   0.1rem;
}

nav {
  display:    flex;
  gap:        0.35rem;
  flex-wrap:  wrap;
  justify-content: flex-end;
}

a.nav-tab {
  font-family:     var(--font-second);
  font-size:       0.8rem;
  font-weight:     500;
  letter-spacing:  0.03em;
  color:           var(--heading-color);
  text-decoration: none;
  padding:         0.35em 0.9em;
  border-radius:   99px;
  border:          1px solid var(--border-color);
  transition:      background 0.15s, color 0.15s, border-color 0.15s;
}

a.nav-tab:hover {
  background:   color-mix(in srgb, var(--text-color) 8%, var(--background-color));
  border-color: var(--text-color);
  color:        var(--heading-color);
}

a.nav-tab.nav-tab--active {
  background:   var(--link-color);
  color:        #fff;
  border-color: var(--link-color);
  font-weight:  700;
}

a.nav-tab.nav-tab--active:hover {
  opacity: 0.88;
  color:   #fff;
}

/* ── Links ────────────────────────────────────────────────────────────── */
a {
  color:                  var(--link-color);
  text-decoration:        underline;
  text-decoration-thickness: 1px;
  text-underline-offset:  3px;
}

a:visited { color: var(--visited-color); }

a:hover {
  text-decoration-thickness: 2px;
}

/* ── Post list (homepage) ─────────────────────────────────────────────── */
ul.post-list li {
  margin-bottom: 0.6rem;
}

ul.post-list li a {
  font-family:    var(--font-second);
  font-weight:    500;
  font-size:      1rem;
  text-decoration: none;
}

ul.post-list li a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Date column in post list */
ul.post-list li time {
  font-family: var(--font-second);
  font-size:   0.82rem;
  color:       var(--meta-color);
}

/* ── Post page ────────────────────────────────────────────────────────── */
/* Title above a post */
article h1 {
  font-size:     2rem;
  margin-bottom: 0.2rem;
}

/* Post meta (date, tags) */
.post-meta,
article time,
article .tags {
  font-family: var(--font-second);
  font-size:   0.82rem;
  color:       var(--meta-color);
}

article .tags a {
  font-size:       0.78rem;
  text-transform:  uppercase;
  letter-spacing:  0.06em;
  text-decoration: none;
  border-bottom:   1px solid var(--border-color);
  padding-bottom:  1px;
}

article .tags a:hover {
  border-bottom-color: var(--link-color);
}

/* ── Reading experience ───────────────────────────────────────────────── */
/* First paragraph after title — slightly larger lead-in */
article > p:first-of-type {
  font-size:   1.08rem;
  line-height: 1.8;
}

blockquote {
  border-left:  3px solid var(--border-color);
  padding-left: 1.25rem;
  margin-left:  0;
  font-style:   italic;
  color:        var(--meta-color);
}

blockquote p {
  margin: 0;
}

/* Inline code */
code {
  font-size:        0.85em;
  background-color: color-mix(in srgb, var(--text-color) 6%, var(--background-color));
  padding:          0.15em 0.35em;
  border-radius:    3px;
}

/* Code blocks */
pre code {
  background:   none;
  padding:      0;
  border-radius: 0;
  font-size:    0.88rem;
  line-height:  1.6;
}

pre {
  padding:       1.25rem 1.5rem;
  border-radius: 6px;
  overflow-x:    auto;
  border:        1px solid var(--border-color);
}

/* ── Images ───────────────────────────────────────────────────────────── */
figure {
  margin:    2rem 0;
  padding:   0;
}

figure img {
  display:       block;
  width:         60%;
  height:        auto;
  margin:        0 auto;
  border-radius: 10px;
  border:        1px solid var(--border-color);
  box-shadow:
    0 1px 2px  rgba(0, 0, 0, 0.06),
    0 4px 12px rgba(0, 0, 0, 0.10),
    0 12px 32px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

figure img:hover {
  transform:    translateY(-3px) scale(1.005);
  border-color: var(--link-color);
  box-shadow:
    0 2px 4px  rgba(0, 0, 0, 0.08),
    0 8px 20px rgba(0, 0, 0, 0.14),
    0 20px 48px rgba(0, 0, 0, 0.12);
}

figcaption {
  margin-top:  0.6rem;
  font-family: var(--font-second);
  font-size:   0.78rem;
  color:       var(--meta-color);
  text-align:  center;
  font-style:  italic;
}

/* Fallback for images outside figures */
article img {
  border-radius: 10px;
  border:        1px solid var(--border-color);
  max-width:     100%;
  height:        auto;
  box-shadow:
    0 1px 2px  rgba(0, 0, 0, 0.06),
    0 4px 12px rgba(0, 0, 0, 0.10),
    0 12px 32px rgba(0, 0, 0, 0.08);
}

/* Horizontal rule — lighter than bearblog default */
hr {
  border:       none;
  border-top:   1px solid var(--border-color);
  margin:       2.5rem 0;
}

/* ── Running stats block ─────────────────────────────────────────────── */
.running-stats {
  display:       flex;
  flex-wrap:     wrap;
  gap:           0.75rem;
  margin:        2rem 0;
  padding:       1.5rem;
  background:    color-mix(in srgb, var(--link-color) 5%, var(--background-color));
  border:        1px solid var(--border-color);
  border-radius: 10px;
}

.stat {
  flex:       1;
  min-width:  90px;
  text-align: center;
}

.stat-number {
  display:     block;
  font-family: var(--font-second);
  font-size:   1.75rem;
  font-weight: 700;
  color:       var(--link-color);
  line-height: 1;
}

.stat-label {
  display:        block;
  font-family:    var(--font-second);
  font-size:      0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--meta-color);
  margin-top:     0.35rem;
}

/* ── Blog page sidebar layout ────────────────────────────────────────── */
.blog-layout {
  display:     flex;
  gap:         2.5rem;
  align-items: flex-start;
}

.tag-sidebar {
  width:      180px;
  flex-shrink: 0;
  position:   sticky;
  top:        1.5rem;
}

.sidebar-heading {
  font-family:    var(--font-second);
  font-size:      0.7rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          var(--meta-color);
  margin:         0 0 0.75rem;
  padding:        0;
  border:         none;       /* override h3 accent border */
  padding-left:   0;
}

.sidebar-tags {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    flex;
  flex-direction: column;
  gap:        0.3rem;
}

.sidebar-tag {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  font-family:     var(--font-second);
  font-size:       0.85rem;
  color:           var(--text-color);
  text-decoration: none;
  padding:         0.3rem 0.6rem;
  border-radius:   6px;
  transition:      background 0.15s, color 0.15s;
}

.sidebar-tag:hover,
.sidebar-tag--active {
  background: color-mix(in srgb, var(--link-color) 10%, var(--background-color));
  color:      var(--link-color);
}

.sidebar-tag--active {
  font-weight: 600;
}

.sidebar-tag-count {
  font-size:   0.72rem;
  color:       var(--meta-color);
  background:  color-mix(in srgb, var(--text-color) 8%, var(--background-color));
  padding:     0.1em 0.45em;
  border-radius: 99px;
}

.blog-main {
  flex:      1;
  min-width: 0;
}

.filter-heading {
  font-size:     1rem;
  margin-bottom: 1rem;
  border:        none;
  padding-left:  0;
  color:         var(--meta-color);
}

.filter-clear {
  font-size:   0.8rem;
  margin-left: 0.5rem;
  color:       var(--meta-color);
}

/* Collapse sidebar above posts on mobile */
@media (max-width: 720px) {
  .blog-layout {
    flex-direction: column;
    gap: 1.5rem;
  }
  .tag-sidebar {
    width:    100%;
    position: static;
  }
  .sidebar-tags {
    flex-direction: row;
    flex-wrap:      wrap;
  }
  .sidebar-tag {
    gap: 0.3rem;
  }
}

/* ── Tag cloud ───────────────────────────────────────────────────────── */
.topic-cards {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap:                   0.75rem;
  margin:                1.75rem 0 2rem;
}

.topic-card {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             0.35rem;
  padding:         1rem 0.75rem;
  border:          1px solid var(--border-color);
  border-radius:   12px;
  text-decoration: none;
  background:      color-mix(in srgb, var(--background-color) 97%, var(--text-color));
  transition:      border-color 0.15s, transform 0.15s, background 0.15s;
}

.topic-card:hover {
  border-color: var(--link-color);
  background:   color-mix(in srgb, var(--link-color) 8%, var(--background-color));
  transform:    translateY(-2px);
}

.topic-card-icon {
  font-size: 1.6rem;
  line-height: 1;
}

.topic-card-label {
  font-family:  var(--font-second);
  font-size:    0.85rem;
  font-weight:  600;
  color:        var(--text-color);
}

.topic-card-count {
  font-family: var(--font-second);
  font-size:   0.72rem;
  color:       var(--text-color);
  opacity:     0.5;
}

.posts-heading {
  margin-top:    2.5rem;
  margin-bottom: 1rem;
}

.pinned-heading {
  display:     flex;
  align-items: center;
  gap:         0.4rem;
}

.pin-icon { font-size: 1rem; line-height: 1; }

ul.pinned-cards .post-card-link {
  border-color: color-mix(in srgb, var(--link-color) 35%, var(--border-color));
  background:   color-mix(in srgb, var(--link-color) 5%, var(--background-color));
}

ul.pinned-cards .post-card-link:hover {
  border-color: var(--link-color);
  background:   color-mix(in srgb, var(--link-color) 10%, var(--background-color));
}

.badge-pinned {
  display:        inline-block;
  font-family:    var(--font-second);
  font-size:      0.62rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color:          var(--link-color);
  background:     color-mix(in srgb, var(--link-color) 12%, var(--background-color));
  border:         1px solid color-mix(in srgb, var(--link-color) 30%, var(--border-color));
  padding:        0.15em 0.5em;
  border-radius:  4px;
  vertical-align: middle;
  margin-left:    0.4rem;
  position:       relative;
  top:            -1px;
}

/* ── Post cards ──────────────────────────────────────────────────────── */
ul.post-cards {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    flex;
  flex-direction: column;
  gap:        0.875rem;
}

.post-card a.post-card-link {
  display:         flex;
  gap:             1rem;
  padding:         1.1rem 1.25rem;
  border:          1px solid var(--border-color);
  border-radius:   10px;
  text-decoration: none;
  transition:      border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.post-card a.post-card-link:hover {
  border-color:    var(--link-color);
  box-shadow:      0 4px 16px rgba(0, 0, 0, 0.08);
  transform:       translateY(-2px);
  text-decoration: none;
}

.topic-card,
.topic-card:hover,
.races-feature-card,
.races-feature-card:hover,
.post-card a.post-card-link,
ul.pinned-cards .post-card-link,
ul.pinned-cards .post-card-link:hover {
  text-decoration: none;
}

.post-card-thumb {
  width:       100px;
  height:      70px;
  object-fit:  cover;
  object-position: top center;
  border-radius: 6px;
  flex-shrink: 0;
  border:      1px solid var(--border-color);
}

.post-card-body {
  flex:      1;
  min-width: 0;
}

.post-card-title {
  font-family:   var(--font-second);
  font-size:     0.975rem;
  font-weight:   600;
  color:         var(--heading-color);
  margin-bottom: 0.25rem;
  line-height:   1.3;
}

.post-card-meta {
  font-family:   var(--font-second);
  font-size:     0.75rem;
  color:         var(--meta-color);
  margin-bottom: 0.4rem;
}

.post-card-tag {
  margin-left: 0.4rem;
  color:       var(--link-color);
}

.badge-new {
  display:        inline-block;
  font-family:    var(--font-second);
  font-size:      0.62rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color:          #fff;
  background:     var(--link-color);
  padding:        0.15em 0.5em;
  border-radius:  4px;
  vertical-align: middle;
  margin-left:    0.5rem;
  position:       relative;
  top:            -1px;
}

.post-card-desc {
  font-size:   0.875rem;
  line-height: 1.5;
  color:       var(--text-color);
  opacity:     0.85;
  display:          -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:    hidden;
}

.post-card-engagement {
  font-size:  0.75rem;
  color:      var(--meta-color);
  margin-top: 0.35rem;
}

/* ── Footer ───────────────────────────────────────────────────────────── */
footer {
  font-family: var(--font-second);
  font-size:   0.82rem;
  color:       var(--meta-color);
  border-top:  1px solid var(--border-color);
  padding-top: 1.5rem;
  margin-top:  3rem;
}

/* ── Giscus comments ──────────────────────────────────────────────────── */
.giscus {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-color);
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  body        { font-size: 17px; }
  article h1  { font-size: 1.6rem; }

  header {
    flex-direction: column;
    align-items:    flex-start;
    gap:            0.75rem;
  }

  nav { justify-content: flex-start; }

  .post-card a.post-card-link {
    flex-direction: column;
  }

  .post-card-thumb {
    width:  100%;
    height: 160px;
  }

  .running-stats { gap: 0.5rem; }
  .stat-number   { font-size: 1.4rem; }
}

/* ── Post engagement (reactions + comments) ──────────────────────────── */
#post-engagement {
  margin-top:  3rem;
  padding-top: 2rem;
  border-top:  1px solid var(--border-color);
}

/* Reactions */
#post-engagement .reactions-bar {
  display:       flex;
  gap:           0.75rem;
  margin-bottom: 2rem;
}

#post-engagement .reaction-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           0.45rem;
  font-family:   var(--font-second);
  font-size:     0.9rem;
  font-weight:   500;
  color:         var(--text-color);
  background:    transparent;
  border:        1px solid var(--border-color);
  border-radius: 99px;
  padding:       0.45em 1.1em;
  cursor:        pointer;
  opacity:       0.65;
  transition:    background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
}

#post-engagement .reaction-btn:hover {
  border-color: var(--link-color);
  color:        var(--link-color);
  opacity:      1;
}

#post-engagement .reaction-btn--active {
  background:   color-mix(in srgb, var(--link-color) 12%, var(--background-color));
  border-color: var(--link-color);
  color:        var(--link-color);
  opacity:      1;
}

/* Comments section */
#post-engagement .comments-section {
  border:        1px solid var(--border-color);
  border-radius: 12px;
  padding:       1.5rem;
  background:    color-mix(in srgb, var(--background-color) 98%, var(--text-color));
}

#post-engagement .comments-heading {
  font-family:   var(--font-second);
  font-size:     1rem;
  font-weight:   700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color:         var(--text-color);
  opacity:       0.55;
  margin:        0 0 1.25rem;
}

/* Form */
#post-engagement .comment-form {
  display:        flex !important;
  flex-direction: column !important;
  gap:            0.65rem;
  margin-bottom:  1.75rem;
}

#post-engagement .comment-input {
  display:       block;
  width:         100%;
  box-sizing:    border-box;
  font-family:   var(--font-main);
  font-size:     0.9rem;
  color:         var(--text-color);
  background:    var(--background-color);
  border:        1px solid var(--border-color);
  border-radius: 6px;
  padding:       0.6em 0.85em;
  transition:    border-color 0.15s;
}

#post-engagement .comment-input:focus {
  outline:      none;
  border-color: var(--link-color);
  box-shadow:   0 0 0 3px color-mix(in srgb, var(--link-color) 15%, transparent);
}

#post-engagement textarea.comment-input {
  min-height: 90px;
  resize:     vertical;
}

#post-engagement .comment-submit {
  align-self:    flex-start;
  font-family:   var(--font-second);
  font-size:     0.85rem;
  font-weight:   600;
  color:         #fff;
  background:    var(--link-color);
  border:        none;
  border-radius: 6px;
  padding:       0.55em 1.3em;
  cursor:        pointer;
  transition:    opacity 0.15s;
}

#post-engagement .comment-submit:hover { opacity: 0.85; }

#post-engagement .comment-status {
  font-size: 0.8rem;
  opacity:   0.55;
}

/* Comment list */
#post-engagement #comment-list {
  list-style: none !important;
  padding:    0 !important;
  margin:     0;
  display:    flex;
  flex-direction: column;
  gap:        1rem;
}

#post-engagement #comment-list li { list-style: none !important; }

#post-engagement .comment-empty {
  font-size: 0.875rem;
  opacity:   0.45;
  margin:    0;
}

#post-engagement .comment-item {
  padding:       0.9rem 1rem;
  border:        1px solid var(--border-color);
  border-radius: 8px;
}

#post-engagement .comment-author {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  font-family:     var(--font-second);
  font-weight:     600;
  font-size:       0.85rem;
  margin-bottom:   0.35rem;
}

#post-engagement .comment-date {
  font-weight: 400;
  font-size:   0.75rem;
  opacity:     0.45;
}

#post-engagement .comment-body {
  font-size:   0.9rem;
  line-height: 1.6;
  margin:      0;
}

/* ── Trending section ────────────────────────────────────────────────── */
.trending-heading { margin-top: 2.5rem; }

.trending-loading,
.trending-empty {
  font-size:  0.9rem;
  opacity:    0.45;
  list-style: none;
  padding:    0.5rem 0;
}

.trending-score {
  font-size:  0.78rem;
  opacity:    0.55;
  margin-top: 0.2rem;
}

/* ── Races feature card ──────────────────────────────────────────────── */
.races-feature-card {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             1.5rem;
  margin:          1.75rem 0;
  padding:         1.5rem 1.75rem;
  border:          1px solid color-mix(in srgb, var(--link-color) 35%, var(--border-color));
  border-radius:   14px;
  background:      color-mix(in srgb, var(--link-color) 6%, var(--background-color));
  text-decoration: none;
  transition:      border-color 0.15s, background 0.15s, transform 0.15s;
}

.races-feature-card:hover {
  border-color: var(--link-color);
  background:   color-mix(in srgb, var(--link-color) 10%, var(--background-color));
  transform:    translateY(-2px);
}

.races-feature-left {
  display:        flex;
  flex-direction: column;
  gap:            0.35rem;
  flex:           1;
}

.races-feature-label {
  font-family:    var(--font-second);
  font-size:      0.7rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          var(--link-color);
  opacity:        0.8;
}

.races-feature-title {
  font-family: var(--font-second);
  font-size:   1.15rem;
  font-weight: 700;
  color:       var(--text-color);
  margin:      0;
}

.races-feature-desc {
  font-size:   0.88rem;
  color:       var(--text-color);
  opacity:     0.65;
  margin:      0;
  line-height: 1.4;
}

.races-feature-cta {
  font-family: var(--font-second);
  font-size:   0.85rem;
  font-weight: 600;
  color:       var(--link-color);
  margin-top:  0.25rem;
}

.races-feature-stats {
  display:   flex;
  flex-wrap: wrap;
  gap:       1rem 1.25rem;
  flex-shrink: 0;
}

.races-feature-stat {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0.15rem;
}

.races-feature-num {
  font-family: var(--font-second);
  font-size:   1.3rem;
  font-weight: 700;
  color:       var(--link-color);
}

.races-feature-statlabel {
  font-family: var(--font-second);
  font-size:   0.7rem;
  color:       var(--text-color);
  opacity:     0.5;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .races-feature-card  { flex-direction: column; align-items: flex-start; }
  .races-feature-stats { gap: 0.75rem 1.25rem; }
  .races-feature-num   { font-size: 1.1rem; }
}