/* DIRTSIM site pages: home, the game, tracks, ranked races, news, account, race now.
   Built on the template's --ds-* colors. The look comes from the dirt track itself:
   night sky charcoal, red clay bands, the orange of the DIRTSIM plate, and the
   scoring tower that stands in turn 4 at every short track. */

.dsx {
  --_bg: var(--ds-bg, #17161a);
  --_surface: var(--ds-surface, #201f24);
  --_raise: var(--ds-raise, #2a282e);
  --_line: var(--ds-line, #37343b);
  --_frame: var(--ds-frame, #4b4750);
  --_text: var(--ds-text, #f4f0ea);
  --_muted: var(--ds-muted, #aaa39b);
  --_orange: var(--ds-orange, #fa5900);
  --_accent: var(--ds-accent, #ff7a2b);
  --_clay: var(--ds-clay, #7a3f22);
  --_clay-dark: var(--ds-clay-dark, #3f2113);
  --_cushion: var(--ds-cushion, #c08a5b);
  --_ink: var(--ds-ink, #0d0c0e);
  --_rule: var(--ds-orange, #fa5900);
  --_up: var(--ds-up, #6fd38a);
  --_down: var(--ds-down, #ff6b81);
  --_display: var(--ds-display, "Saira", "Arial Narrow", sans-serif);
  color: var(--_text);
  font-variant-numeric: tabular-nums;
}

.dsx a {
  color: inherit;
}

/* Shared type */

.hx-display {
  margin: 0;
  font-family: var(--_display);
  font-style: italic;
  font-weight: 850;
  font-stretch: 78%;
  font-size: clamp(2.6rem, 8.2vw, 5.6rem);
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.hx-display-sm {
  font-size: clamp(2.2rem, 6vw, 4rem);
}

.hx-lede {
  max-width: 34rem;
  margin: 1.1rem 0 0;
  color: var(--_text);
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  line-height: 1.55;
  opacity: 0.92;
}

.hx-h2,
.hx-h3 {
  margin: 0;
  font-family: var(--_display);
  font-style: italic;
  font-weight: 800;
  font-stretch: 85%;
  line-height: 1;
}

.hx-h2 {
  font-size: clamp(1.9rem, 4.2vw, 2.8rem);
}

.hx-h3 {
  margin: 2rem 0 0.9rem;
  font-size: 1.6rem;
}

.hx-sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-bottom: 1.4rem;
}

.hx-more {
  color: var(--_muted) !important;
  text-decoration: none;
  font-weight: 600;
}

.hx-more:hover,
.hx-more:focus-visible {
  color: var(--_accent) !important;
}

/* Buttons: the DIRTSIM plate, leaning forward */

.ds-btn {
  --_skew: -12deg;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.55rem 1.35rem;
  border: 0;
  background: none;
  color: var(--_text, #f4f0ea);
  font: inherit;
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none !important;
  cursor: pointer;
  isolation: isolate;
}

.ds-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: skewX(var(--_skew));
  border: 2px solid currentColor;
  border-radius: 2px;
}

.ds-btn-go {
  color: var(--_ink, #0d0c0e) !important;
}

.ds-btn-go::before {
  border-color: var(--_orange, #fa5900);
  background: var(--_orange, #fa5900);
}

.ds-btn-go:hover::before,
.ds-btn-go:focus-visible::before {
  border-color: #ff8a40;
  background: #ff8a40;
}

.ds-btn-ghost {
  color: var(--_text, #f4f0ea) !important;
}

.ds-btn-ghost::before {
  border-color: rgba(244, 240, 234, 0.55);
}

.ds-btn-ghost:hover::before,
.ds-btn-ghost:focus-visible::before {
  border-color: var(--_orange, #fa5900);
  background: rgba(250, 89, 0, 0.12);
}

.ds-btn:focus-visible {
  outline: 3px solid var(--_accent, #ff7a2b);
  outline-offset: 4px;
}

.ds-btn-lg {
  min-height: 3.2rem;
  padding: 0.7rem 1.8rem;
  font-size: 1.1rem;
}

.ds-btn-sm {
  min-height: 2.2rem;
  padding: 0.35rem 1rem;
  font-size: 0.95rem;
}

/* Full-width bands */

.hx-hero,
.pg-band,
.tr-hero,
.ph {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(70rem 40rem at 88% -10%, rgba(255, 176, 92, 0.22), transparent 60%),
    radial-gradient(60rem 30rem at 10% 120%, rgba(122, 63, 34, 0.75), transparent 70%),
    linear-gradient(180deg, #121115 0%, #17161a 55%, #2a1810 100%);
}

/* Dust in the lights: fine grain, no images to load. */
.hx-hero::after,
.pg-band::after,
.tr-hero::after,
.ph::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .85 0 0 0 0 .7 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
}

.hx-hero-bg {
  position: absolute;
  inset: 0;
}

.hx-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}

.hx-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(18, 17, 21, 0.96) 0%, rgba(18, 17, 21, 0.82) 42%, rgba(18, 17, 21, 0.35) 100%),
    linear-gradient(0deg, rgba(23, 22, 26, 1) 0%, rgba(23, 22, 26, 0) 35%);
}

/* No picture: the week's track drawn big and faint, like a chalk line on the clay. */
.hx-hero-bg-map {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 2rem 4vw;
}

.hx-hero-bg-map::after {
  display: none;
}

.hx-hero-map {
  width: min(78rem, 120%);
  height: auto;
  max-height: 120%;
  opacity: 0.16;
  transform: translateX(14%) rotate(-6deg);
}

.hx-hero-map .ds-map-edge {
  stroke-width: 12;
}

.hx-hero-map .ds-map-line {
  stroke-width: 4;
}

.hx-hero-map .ds-map-sf {
  display: none;
}

@media (max-width: 959px) {
  .hx-hero-map {
    width: 160%;
    transform: translate(28%, -8%) rotate(-6deg);
    opacity: 0.12;
  }
}

.hx-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2.5rem;
  width: 100%;
  max-width: var(--wrap, 1200px);
  margin-inline: auto;
  padding: clamp(2.5rem, 7vw, 6rem) var(--gutter, 16px) clamp(2.5rem, 5vw, 4.5rem);
}

@media (min-width: 960px) {
  .hx-hero-grid {
    grid-template-columns: minmax(0, 1fr) 24rem;
    align-items: end;
  }
}

.hx-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.4rem;
  margin-top: 1.9rem;
}

.hx-latest {
  display: grid;
  gap: 0.15rem;
  max-width: 34rem;
  margin-top: 2.4rem;
  padding: 0.7rem 0 0.7rem 1rem;
  border-left: 4px solid var(--_orange);
  text-decoration: none;
}

.hx-latest-k {
  color: var(--_cushion);
  font-size: 0.9rem;
  font-weight: 600;
}

.hx-latest-t {
  font-size: 1.15rem;
  font-weight: 700;
}

.hx-latest:hover .hx-latest-t,
.hx-latest:focus-visible .hx-latest-t {
  color: var(--_accent);
}

/* The scoring tower: black, tall, numbers in lights. */

.hx-tower {
  position: relative;
  padding: 1.1rem 1.1rem 1rem;
  border: 3px solid #050506;
  border-radius: 4px;
  background: linear-gradient(180deg, #0b0b0d, #111014);
  box-shadow: 0 0 0 1px #2c2a30, 0 30px 60px -20px rgba(0, 0, 0, 0.8);
}

.hx-tower::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 1.1rem;
  right: 1.1rem;
  height: 5px;
  background: var(--_orange);
  transform: skewX(-20deg);
}

.hx-tower-h {
  margin: 0.3rem 0 0.9rem;
  font-family: var(--_display);
  font-style: italic;
  font-weight: 800;
  font-stretch: 85%;
  font-size: 1.45rem;
  line-height: 1;
}

.hx-week {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.9rem;
  padding: 0.6rem;
  border-radius: 3px;
  background: #19181c;
  text-decoration: none;
}

.hx-week.no-map {
  grid-template-columns: 1fr;
  padding-inline: 0.9rem;
}

.hx-week-map {
  width: 100%;
  height: auto;
}

.hx-week-t {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.hx-week-k {
  color: var(--_muted);
  font-size: 0.85rem;
}

.hx-week-n {
  font-weight: 700;
  line-height: 1.2;
}

.hx-week:hover .hx-week-n,
.hx-week:focus-visible .hx-week-n {
  color: var(--_accent);
}

.hx-tower-note {
  margin: 0.8rem 0 0;
  color: var(--_muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.hx-tower-note a {
  color: var(--_text);
  white-space: nowrap;
}

/* Race times */

.rt-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.65rem 0.8rem;
  border-radius: 3px;
  background: var(--_surface);
  border-left: 4px solid var(--_frame);
}

.rt-compact .rt {
  background: #19181c;
  padding: 0.55rem 0.7rem;
}

.rt-on {
  border-left-color: #4fbf6a;
}

.rt-live {
  border-left-color: var(--_orange);
}

.rt.is-mine {
  box-shadow: inset 0 0 0 1px rgba(250, 89, 0, 0.55);
}

.rt-time {
  display: grid;
  min-width: 4.6rem;
  font-family: var(--_display);
  font-style: italic;
  font-weight: 800;
  line-height: 1;
}

.rt-clock {
  font-size: 1.55rem;
  color: #ffb347;
  text-shadow: 0 0 12px rgba(255, 150, 40, 0.35);
}

.rt-clock small {
  margin-left: 0.2em;
  font-size: 0.55em;
}

.rt-day {
  margin-top: 0.15rem;
  color: var(--_muted);
  font-size: 0.85rem;
  font-weight: 600;
  font-style: normal;
}

.rt-info {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.rt-track {
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rt-count {
  color: var(--_muted);
  font-size: 0.92rem;
}

.rt-on .rt-count {
  color: #8fe0a2;
}

.rt-bar {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: #2f2d33;
  overflow: hidden;
}

.rt-bar span {
  display: block;
  height: 100%;
  background: var(--_orange);
}

.rt-on .rt-bar span {
  background: #4fbf6a;
}

.rt-act {
  margin: 0;
}

/* Live strip */

.hx-live {
  border-block: 1px solid #2b2a2f;
  background: #121115;
}

.hx-live-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.2rem;
  padding-block: 0.8rem;
}

.hx-live-dot {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: 0.45rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: #4fbf6a;
  box-shadow: 0 0 0 4px rgba(79, 191, 106, 0.2);
}

@media (prefers-reduced-motion: no-preference) {
  .hx-live-dot {
    animation: ds-pulse 2s ease-in-out infinite;
  }
}

@keyframes ds-pulse {
  50% {
    box-shadow: 0 0 0 8px rgba(79, 191, 106, 0);
  }
}

.hx-live-list {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hx-live-s {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.8rem;
}

.hx-live-t {
  font-weight: 700;
}

.hx-live-d {
  color: var(--_muted, #b3aea6);
}

.hx-live-wait {
  color: var(--_muted, #b3aea6);
  font-size: 0.9rem;
  font-style: italic;
}

.hx-live-all {
  margin-left: auto;
  font-weight: 600;
}

/* News */

.hx-news,
.hx-rank,
.hx-start {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.nx-grid {
  display: grid;
  gap: 1.4rem;
}

@media (min-width: 700px) {
  .nx-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .nx-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .nx-grid .nx-lead {
    grid-column: span 2;
    grid-row: span 2;
  }
}

.nx-card {
  min-width: 0;
}

.nx-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
}

.nx-img {
  position: relative;
  display: block;
  aspect-ratio: 1200 / 630;
  overflow: hidden;
  border-radius: 3px;
  background: var(--_surface);
}

.nx-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nx-body {
  display: grid;
  gap: 0.35rem;
  padding-top: 0.75rem;
}

.nx-noimg .nx-body {
  height: 100%;
  padding: 1.1rem 1.1rem 1rem;
  border-top: 4px solid var(--_clay);
  border-radius: 3px;
  background: var(--_surface);
}

.nx-kind {
  color: var(--_cushion);
  font-size: 0.85rem;
  font-weight: 700;
}

.nx-kind.is-ranked {
  color: var(--_accent);
}

.nx-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 750;
  line-height: 1.25;
}

.nx-lead .nx-title {
  font-family: var(--_display);
  font-style: italic;
  font-weight: 800;
  font-stretch: 88%;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.05;
}

.nx-sum {
  color: var(--_muted);
  line-height: 1.5;
}

.nx-date {
  color: var(--_muted);
  font-size: 0.85rem;
}

.nx-link:hover .nx-title,
.nx-link:focus-visible .nx-title {
  color: var(--_accent);
}

.nx-link:focus-visible {
  outline: 3px solid var(--_accent);
  outline-offset: 4px;
}

/* The game, on clay */

.hx-game {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0)),
    repeating-linear-gradient(-14deg, rgba(0, 0, 0, 0.06) 0 2px, transparent 2px 9px),
    linear-gradient(160deg, #6e381e, #4b2716 60%, #3a1e11);
}

.hx-game-in {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 960px) {
  .hx-game-in {
    grid-template-columns: 22rem minmax(0, 1fr);
    align-items: start;
  }
}

.hx-game-intro p {
  margin: 1rem 0 1.4rem;
  line-height: 1.6;
}

.hx-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin: 0 0 1.6rem;
}

.hx-numbers div {
  display: flex;
  flex-direction: column-reverse;
}

.hx-numbers dt {
  color: #e7c9ad;
  font-size: 0.9rem;
  font-weight: 600;
}

.hx-numbers dd {
  margin: 0;
  font-family: var(--_display);
  font-style: italic;
  font-weight: 800;
  font-size: 2.2rem;
  line-height: 1;
}

.ft-list {
  display: grid;
  gap: 1.6rem 2.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .ft-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ft {
  padding-top: 0.9rem;
  border-top: 2px solid rgba(255, 228, 200, 0.28);
}

.ft-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-bottom: 0.8rem;
  border-radius: 3px;
}

.ft-h {
  margin: 0 0 0.4rem;
  font-size: 1.2rem;
  line-height: 1.25;
}

.ft-h a {
  text-decoration: none;
}

.ft-h a:hover,
.ft-h a:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--_orange);
}

.ft-p {
  margin: 0;
  color: #f0dfcf;
  line-height: 1.55;
}

/* Track maps and cards */

.ds-map {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.ds-map-edge {
  fill: none;
  stroke: #4a2a1a;
  stroke-width: 15;
  stroke-linejoin: round;
}

.ds-map-line {
  fill: none;
  stroke: var(--_orange, #fa5900);
  stroke-width: 4;
  stroke-linejoin: round;
}

.ds-map-sf {
  fill: #fff;
}

.ds-map-lg .ds-map-edge {
  stroke-width: 20;
}

.ds-map-lg .ds-map-line {
  stroke-width: 5;
}

.hx-tracks {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) 1rem;
}

.tk-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 17rem);
  gap: 1rem;
  overflow-x: auto;
  padding: 0.25rem max(var(--gutter, 16px), calc((100vw - var(--wrap, 1200px)) / 2 + var(--gutter, 16px))) 2rem;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--_frame) transparent;
}

.tk-rail:focus-visible {
  outline: 3px solid var(--_accent);
  outline-offset: -3px;
}

.tk-rail .tk-card {
  scroll-snap-align: start;
}

.tk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.2rem;
}

.tk-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 3px;
  background: var(--_surface);
  text-decoration: none;
  overflow: hidden;
}

.tk-art {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  padding: 0.9rem 1.2rem;
  background: radial-gradient(circle at 50% 40%, #241c18, #141316 75%);
}

.tk-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tk-nomap {
  font-family: var(--_display);
  font-style: italic;
  font-weight: 800;
  font-size: 3.5rem;
  color: #3a363d;
}

.tk-flag {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  padding: 0.15rem 0.6rem;
  background: var(--_orange);
  color: var(--_ink);
  font-size: 0.8rem;
  font-weight: 700;
}

.tk-body {
  display: grid;
  gap: 0.2rem;
  padding: 0.8rem 0.9rem 0.9rem;
}

.tk-name {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 750;
  line-height: 1.25;
}

.tk-loc {
  color: var(--_muted);
  font-size: 0.92rem;
}

.tk-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
  margin-top: 0.3rem;
  color: var(--_cushion);
  font-size: 0.88rem;
  font-weight: 600;
}

.tk-link:hover .tk-name,
.tk-link:focus-visible .tk-name {
  color: var(--_accent);
}

.tk-link:focus-visible {
  outline: 3px solid var(--_accent);
  outline-offset: 2px;
}

.is-week .tk-link {
  box-shadow: inset 0 0 0 2px var(--_orange);
}

/* Rankings and tower */

.hx-rank-in {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 860px) {
  .hx-rank-in {
    grid-template-columns: 22rem minmax(0, 1fr);
    align-items: start;
  }
}

.hx-rank-copy p {
  max-width: 38rem;
  line-height: 1.6;
}

.tw {
  padding: 1rem;
  border: 3px solid #050506;
  border-radius: 4px;
  background: #0d0c0f;
  box-shadow: 0 0 0 1px #2c2a30;
}

.tw-head {
  margin: 0 0 0.6rem;
  font-family: var(--_display);
  font-style: italic;
  font-weight: 800;
  font-stretch: 85%;
  font-size: 1.4rem;
}

.tw-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.tw-list a {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.4rem;
  border-bottom: 1px solid #1f1e22;
  text-decoration: none;
}

.tw-pos {
  font-family: var(--_display);
  font-style: italic;
  font-weight: 850;
  font-size: 1.5rem;
  line-height: 1;
  color: #ffb347;
  text-align: center;
  text-shadow: 0 0 10px rgba(255, 150, 40, 0.35);
}

.tw-name {
  overflow: hidden;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tw-val {
  font-weight: 700;
}

.tw-list a:hover .tw-name,
.tw-list a:focus-visible .tw-name {
  color: var(--_accent);
}

.tw-more {
  display: inline-block;
  margin-top: 0.7rem;
  color: var(--_muted) !important;
  font-weight: 600;
}

.tw-empty {
  color: var(--_muted);
}

/* Start racing: three steps in order */

.st-steps {
  display: grid;
  gap: 1.2rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

@media (min-width: 860px) {
  .st-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .st-steps-wide {
    grid-template-columns: 1fr;
  }
}

.st-steps > li {
  position: relative;
  padding: 1.2rem 1.2rem 1.3rem 4.4rem;
  border-radius: 3px;
  background: var(--_surface, #201f24);
  counter-increment: step;
}

.st-steps > li::before {
  content: counter(step);
  position: absolute;
  top: 0.9rem;
  left: 1.1rem;
  font-family: var(--_display, "Saira", sans-serif);
  font-style: italic;
  font-weight: 850;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--_orange, #fa5900);
}

.st-steps h2,
.st-steps h3 {
  margin: 0 0 0.4rem;
  font-size: 1.2rem;
}

.st-steps p {
  margin: 0 0 0.7rem;
  color: var(--_muted, #aaa39b);
  line-height: 1.55;
}

.st-steps a:not(.ds-btn) {
  color: var(--_text, #f4f0ea);
  font-weight: 700;
}

/* Page bands (the game, ranked races, a track) */

.pg-band-in {
  position: relative;
  z-index: 1;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.pg-band-in .ds-btn {
  margin-top: 1.6rem;
}

.gm-features {
  display: grid;
  gap: 2.5rem;
  padding-block: clamp(2rem, 5vw, 3.5rem);
}

.gm-feature {
  display: grid;
  gap: 1.4rem;
  max-width: 62rem;
}

@media (min-width: 860px) {
  .gm-feature.has-img {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: center;
    gap: 2.5rem;
  }

  .gm-feature.has-img.is-flip .gm-img {
    order: 2;
  }
}

.gm-feature:not(.has-img) {
  padding-left: 1.2rem;
  border-left: 4px solid var(--_clay);
}

.gm-img img {
  display: block;
  width: 100%;
  border-radius: 3px;
}

.gm-h {
  margin: 0 0 0.6rem;
  font-family: var(--_display);
  font-style: italic;
  font-weight: 800;
  font-stretch: 88%;
  font-size: 1.8rem;
  line-height: 1.05;
}

.gm-body {
  max-width: 40rem;
  line-height: 1.65;
}

.gm-body p {
  margin: 0 0 0.8rem;
}

.gm-tracks {
  padding-bottom: 2rem;
}

.gm-mini {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gm-mini a {
  display: grid;
  gap: 0.4rem;
  padding: 0.7rem;
  border-radius: 3px;
  background: var(--_surface);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.gm-mini a:hover span,
.gm-mini a:focus-visible span {
  color: var(--_accent);
}

.gm-needs {
  padding-block: 1rem 3.5rem;
}

.gm-needs-list {
  display: grid;
  gap: 1rem 2rem;
  margin: 1.2rem 0 0;
}

@media (min-width: 760px) {
  .gm-needs-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.gm-needs-list dt {
  font-weight: 750;
}

.gm-needs-list dd {
  margin: 0.25rem 0 0;
  color: var(--_muted);
  line-height: 1.55;
}

/* Track page */

.tr-hero-in {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2rem;
  padding-block: clamp(2rem, 5vw, 3.5rem);
}

@media (min-width: 900px) {
  .tr-hero-in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
    align-items: center;
  }
}

.dsx .ds-back {
  display: inline-block;
  margin-bottom: 0.6rem;
  color: var(--_muted);
  text-decoration: none;
}

.dsx .ds-back:hover,
.dsx .ds-back:focus-visible {
  color: var(--_accent);
}

.tr-loc {
  margin: 0.6rem 0 0;
  color: var(--_cushion);
  font-size: 1.15rem;
  font-weight: 600;
}

.tr-week {
  margin: 0.8rem 0 0;
}

.tr-week a {
  display: inline-block;
  padding: 0.25rem 0.8rem;
  background: var(--_orange);
  color: var(--_ink) !important;
  font-weight: 700;
  text-decoration: none;
}

.tr-stats {
  margin-top: 1.6rem;
}

.tr-map {
  padding: 1rem;
}

.tr-body {
  display: grid;
  gap: 1rem 3rem;
  padding-block: 1rem 3.5rem;
}

@media (min-width: 900px) {
  .tr-body {
    grid-template-columns: 20rem minmax(0, 1fr);
  }
}

.tr-col-wide {
  min-width: 0;
}

.tr-records {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tr-records li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--_line);
}

.tr-rpos {
  color: var(--_orange);
  font-family: var(--_display);
  font-style: italic;
  font-weight: 800;
}

.tr-rname {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tr-rtime {
  font-weight: 700;
}

.nx-grid-3 {
  gap: 1.2rem;
}

@media (min-width: 1000px) {
  .nx-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.tr-col .nx-grid-3 .nx-title {
  font-size: 1.02rem;
}

/* Ranked races page */

.sc-band-in {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2rem;
  padding-block: clamp(2.25rem, 5vw, 3.75rem);
}

@media (min-width: 900px) {
  .sc-band-in {
    grid-template-columns: minmax(0, 1fr) 20rem;
    align-items: center;
  }
}

.sc-format {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.8rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}

.sc-format li {
  color: #e9ddd2;
}

.sc-format strong {
  display: block;
  font-family: var(--_display);
  font-style: italic;
  font-weight: 850;
  font-size: 2rem;
  line-height: 1;
  color: var(--_text);
}

.sc-week {
  display: grid;
  gap: 0.35rem;
  padding: 1rem;
  border: 3px solid #050506;
  border-radius: 4px;
  background: #0d0c0f;
  text-decoration: none;
}

.sc-week-k {
  color: var(--_cushion);
  font-weight: 700;
  font-size: 0.9rem;
}

.sc-week-n {
  font-size: 1.2rem;
  font-weight: 750;
}

.sc-week-l {
  color: var(--_muted);
  font-size: 0.92rem;
}

.sc-week:hover .sc-week-n,
.sc-week:focus-visible .sc-week-n {
  color: var(--_accent);
}

.sc-body {
  padding-block: 1rem 3.5rem;
}

.sc-next-in {
  display: grid;
  gap: 1rem 2rem;
  padding: 1.1rem 1.2rem;
  border-left: 4px solid var(--_orange);
  border-radius: 3px;
  background: var(--_surface);
}

@media (min-width: 760px) {
  .sc-next-in {
    grid-template-columns: 18rem minmax(0, 1fr);
  }
}

.sc-clock-t {
  display: block;
  font-family: var(--_display);
  font-style: italic;
  font-weight: 800;
  font-size: 1.7rem;
  line-height: 1.1;
}

.sc-count {
  display: block;
  margin-top: 0.3rem;
  color: #ffb347;
  font-weight: 700;
}

.sc-signed {
  margin: 0 0 0.5rem;
  font-weight: 650;
}

.sc-names {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sc-names li {
  padding: 0.2rem 0.65rem;
  border-radius: 3px;
  background: var(--_raise);
  font-weight: 600;
}

.sc-names a {
  text-decoration: none;
}

.sc-login {
  margin: 1.5rem 0 0;
  padding: 0.8rem 1rem;
  border-radius: 3px;
  background: rgba(250, 89, 0, 0.1);
}

.sc-login a {
  font-weight: 700;
}

.sc-days {
  display: grid;
  gap: 1.8rem;
  margin-top: 1.5rem;
}

@media (min-width: 900px) {
  .sc-days {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.8rem 2.5rem;
  }
}

.sc-day-h {
  margin: 0 0 0.7rem;
  font-size: 1.15rem;
}

.sc-day-h span {
  color: var(--_muted);
  font-weight: 500;
}

.sc-nextweek {
  margin-top: 2rem;
  color: var(--_muted);
}

.sc-nextweek a {
  color: var(--_text);
  font-weight: 700;
}

.sc-how-list {
  max-width: 44rem;
  padding-left: 1.2rem;
  line-height: 1.6;
}

.sc-how-list li + li {
  margin-top: 0.5rem;
}

/* Server list: like the game's own list. Name and track, how full it is, Join. */

.sv-list {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sv {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8.5rem minmax(7rem, max-content);
  align-items: center;
  gap: 0.6rem 1.5rem;
  padding: 0.8rem 1rem;
  border-left: 4px solid var(--ds-frame, #4b4750);
  border-radius: 3px;
  background: var(--ds-surface, #201f24);
}

.sv.is-live {
  border-left-color: #4fbf6a;
}

.sv.is-racing {
  border-left-color: var(--ds-orange, #fa5900);
}

.sv.is-quiet {
  opacity: 0.85;
}

.sv-info {
  min-width: 0;
}

.sv-name {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-weight: 750;
  font-size: 1.08rem;
  line-height: 1.25;
}

.sv-lock {
  flex: 0 0 auto;
  width: 0.95em;
  height: 0.95em;
  fill: var(--ds-cushion, #c08a5b);
}

.sv-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1rem;
  margin: 0.2rem 0 0;
  color: var(--ds-muted, #aaa39b);
  font-size: 0.95rem;
}

.sv-track {
  color: var(--ds-cushion, #c08a5b);
  font-weight: 650;
}

.sv-doing {
  color: var(--ds-text, #f4f0ea);
  font-weight: 600;
}

.sv.is-quiet .sv-doing {
  color: var(--ds-muted, #aaa39b);
  font-weight: 500;
}

/* How full: a fuel-gauge bar and 5/24. Pressing it opens the who's-on box. */
.sv-slots {
  display: grid;
  gap: 0.35rem;
  padding: 0.35rem 0;
  border: 0;
  background: none;
  color: var(--ds-text, #f4f0ea);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sv-slots.is-empty {
  cursor: default;
}

.sv-meter {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--ds-line, #37343b);
  overflow: hidden;
}

.sv-meter > span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: #4fbf6a;
}

.sv-count {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-decoration: underline dotted rgba(244, 240, 234, 0.45);
  text-underline-offset: 3px;
}

.sv-slots:hover .sv-count,
.sv-slots[aria-expanded="true"] .sv-count {
  text-decoration-color: var(--ds-orange, #fa5900);
}

.sv-act {
  justify-self: end;
  display: flex;
  align-items: center;
}

.sv-go .sv-lock {
  margin-right: 0.4rem;
  fill: currentColor;
}

.sv-wait {
  color: var(--ds-muted, #aaa39b);
  font-size: 0.92rem;
  font-weight: 600;
  text-align: right;
}

/* Who's on: the box under a server */
.sv-tip {
  position: absolute;
  z-index: 30;
  top: calc(100% - 0.35rem);
  left: 1rem;
  width: min(25rem, calc(100% - 2rem));
  padding: 0.9rem 1rem 1rem;
  border: 1px solid var(--ds-frame, #4b4750);
  border-top: 3px solid var(--ds-orange, #fa5900);
  border-radius: 3px;
  background: #26242a;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease 0.08s, visibility 0s linear 0.2s;
}

.sv-tip.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}

@media (hover: hover) {
  .sv:hover > .sv-tip {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.12s ease 0.35s, visibility 0s linear 0.35s;
  }
}

.sv-tip-h {
  margin: 0 0 0.55rem;
  font-weight: 750;
}

.sv-tip-facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.25rem 1rem;
  margin: 0 0 0.75rem;
}

.sv-tip-facts > div {
  display: contents;
}

.sv-tip-facts dt {
  color: var(--ds-muted, #aaa39b);
  font-weight: 500;
}

.sv-tip-facts dd {
  margin: 0;
  font-weight: 600;
}

.sv-tip-k {
  margin: 0 0 0.35rem;
  color: var(--ds-muted, #aaa39b);
  font-size: 0.9rem;
}

.sv-tip-who {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 1.25rem;
}

.sv-tip-who li {
  padding: 0.1rem 0;
  break-inside: avoid;
}

.sv-tip-wait {
  margin: 0.7rem 0 0;
  color: var(--ds-accent, #ff7a2b);
  font-weight: 600;
}

@media (max-width: 640px) {
  .sv {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.7rem 1rem;
  }

  .sv-info {
    grid-column: 1 / -1;
  }

  .sv-slots {
    min-width: 7rem;
  }

  .sv-tip {
    left: 0.6rem;
    width: calc(100% - 1.2rem);
  }
}

.sv-help {
  margin-top: 0.8rem;
  padding: 0.7rem 0.9rem;
  border-radius: 3px;
  background: var(--ds-raise, #2a282e);
}

.sv-none {
  padding: 1.2rem;
  border-radius: 3px;
  background: var(--ds-surface, #201f24);
  color: var(--ds-muted, #aaa39b);
}

.sv-refresh {
  margin-top: 1rem;
  font-size: 0.9rem;
}

.hx-live-lock {
  margin-left: 0.4rem;
  color: var(--ds-muted, #aaa39b);
  font-size: 0.85rem;
  font-weight: 500;
}

/* Password box for locked servers */
.ds-pw {
  width: min(26rem, calc(100vw - 2rem));
  padding: 1.3rem 1.3rem 1.2rem;
  border: 1px solid var(--ds-frame, #4b4750);
  border-top: 4px solid var(--ds-orange, #fa5900);
  border-radius: 4px;
  background: var(--ds-surface, #201f24);
  color: var(--ds-text, #f4f0ea);
}

.ds-pw::backdrop {
  background: rgba(10, 9, 12, 0.72);
}

.ds-pw-h {
  margin: 0 0 1rem;
  font-size: 1.35rem;
}

.ds-pw-label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
}

.ds-pw-input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--ds-frame, #4b4750);
  border-radius: 3px;
  background: var(--ds-bg, #17161a);
  color: var(--ds-text, #f4f0ea);
  font: inherit;
}

.ds-pw-input:focus-visible {
  outline: 2px solid var(--ds-orange, #fa5900);
  outline-offset: 1px;
}

.ds-pw-note {
  margin: 0.6rem 0 1.1rem;
  color: var(--ds-muted, #aaa39b);
  font-size: 0.9rem;
}

.ds-pw-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.2rem;
}

/* Race page story */

.rc-headline {
  font-stretch: 90%;
  max-width: 50rem;
  line-height: 1.02;
}

.rc-story {
  display: grid;
  gap: 1.5rem;
  margin: 0.5rem 0 2rem;
}

@media (min-width: 980px) {
  .rc-story.has-img {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
  }
}

.rc-pic {
  margin: 0;
}

.rc-pic img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
}

.rc-text {
  max-width: 40rem;
  font-size: 1.08rem;
  line-height: 1.7;
}

.rc-text p {
  margin: 0 0 1rem;
}

.rc-text p:first-child {
  font-size: 1.18rem;
  font-weight: 600;
}

.rc-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.6rem;
  margin: 0 0 2rem;
}

.rc-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 3px;
}

.rc-results-h {
  margin-top: 0.5rem;
}

.ds-tag-ranked {
  background: var(--ds-orange, #fa5900) !important;
  color: var(--ds-ink, #0d0c0e) !important;
}

/* Account and play */

.ac-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 860px) {
  .ac-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ac-box {
  padding: 0.2rem 1.3rem 1.3rem;
  border-radius: 3px;
  background: var(--ds-surface, #201f24);
}

.ac-box .hx-h3 {
  margin-top: 1rem;
}

.ac-driver {
  margin: 0 0 1rem;
  font-size: 1.4rem;
  font-weight: 750;
}

.ac-unlink {
  margin: 1rem 0;
}

.ac-code {
  margin-top: 1rem;
  padding: 1rem;
  border: 2px dashed var(--ds-orange, #fa5900);
  border-radius: 3px;
}

.ac-code p {
  margin: 0 0 0.5rem;
}

.ac-code-big kbd {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border-radius: 3px;
  background: #0d0c0f;
  color: #ffb347;
  font-family: var(--ds-display, "Saira", sans-serif);
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.ac-list {
  padding-left: 1.1rem;
  line-height: 1.7;
}

.pl-note {
  margin-top: 0.8rem;
  color: var(--ds-text, #f4f0ea);
}

.dsx-play .st-steps > li {
  padding-bottom: 1.5rem;
}

.ds-pages {
  margin-top: 2rem;
}

@media (max-width: 520px) {
  .rt {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .rt-act {
    grid-column: 1 / -1;
  }

  .rt-act .ds-btn {
    width: 100%;
  }

  .st-steps > li {
    padding-left: 3.6rem;
  }
}

/* Race times as small buttons, one row per day */

.sc-days {
  display: block;
  margin-top: 2rem;
}

.sc-days-help {
  max-width: 44rem;
  margin: -0.4rem 0 1.2rem;
  color: var(--_muted);
}

.sc-day {
  display: grid;
  gap: 0.3rem 1.2rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--_line);
}

@media (min-width: 760px) {
  .sc-day {
    grid-template-columns: 11rem minmax(0, 1fr);
    align-items: center;
  }

  .sc-day .rp-list {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

.sc-day-h {
  margin: 0;
  font-size: 1.1rem;
}

.sc-day-t {
  margin: 0;
  color: var(--_cushion);
  font-size: 0.92rem;
  font-weight: 600;
}

.rp-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rp form {
  margin: 0;
}

.rp-in {
  display: grid;
  justify-items: start;
  gap: 0.1rem;
  min-width: 6.4rem;
  padding: 0.45rem 0.75rem 0.5rem;
  border: 0;
  border-left: 4px solid var(--_frame);
  border-radius: 3px;
  background: var(--_surface);
  color: var(--_text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

button.rp-in:hover,
button.rp-in:focus-visible {
  background: var(--_raise);
  border-left-color: var(--_orange);
}

button.rp-in:focus-visible {
  outline: 3px solid var(--_accent);
  outline-offset: 2px;
}

.rp-time {
  font-family: var(--_display);
  font-style: italic;
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1;
  color: #ffb347;
}

.rp-time small {
  margin-left: 0.15em;
  font-size: 0.6em;
}

.rp-n {
  color: var(--_muted);
  font-size: 0.85rem;
  font-weight: 600;
}

.rp-on .rp-in {
  border-left-color: #4fbf6a;
}

.rp-on .rp-n {
  color: #8fe0a2;
}

.rp-live .rp-in {
  border-left-color: var(--_orange);
  cursor: default;
}

.rp.is-mine .rp-in {
  background: rgba(250, 89, 0, 0.16);
  box-shadow: inset 0 0 0 1px rgba(250, 89, 0, 0.6);
}

.rp-you {
  color: var(--_accent);
}

/* Servers page */

.sv-get a {
  font-weight: 700;
}

.sv-next {
  margin: 0 0 1.2rem;
  padding: 0.7rem 1rem;
  border-left: 4px solid var(--ds-orange, #fa5900);
  border-radius: 3px;
  background: var(--ds-surface, #201f24);
}

.sv-next a {
  margin-left: 0.5rem;
  font-weight: 700;
}


/* ------------------------------------------------------------------ */
/* Page header band: every DIRTSIM page starts the same way.           */

.ph-in {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.4rem 3rem;
  padding-block: clamp(2rem, 5vw, 3.4rem) clamp(1.9rem, 4.5vw, 3rem);
}

@media (min-width: 860px) {
  .ph-in.has-aside {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}

.ph-text {
  min-width: 0;
}

.dsx .ph-back {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.6rem;
  color: var(--ds-muted, #aaa39b);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
}

.ph-back::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.dsx .ph-back:hover,
.dsx .ph-back:focus-visible {
  color: var(--ds-accent, #ff7a2b);
}

.ph-title {
  margin: 0;
  font-family: var(--ds-display);
  font-style: italic;
  font-weight: 850;
  font-stretch: 80%;
  font-size: clamp(2.3rem, 6vw, 4.1rem);
  line-height: 0.95;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.ph-race .ph-title {
  font-size: clamp(2rem, 4.6vw, 3.3rem);
}

.ph-lede {
  max-width: 42rem;
  margin: 0.85rem 0 0;
  color: #dcd6ce;
  font-size: clamp(1.02rem, 1.6vw, 1.15rem);
  line-height: 1.55;
}

.ph-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 1.2rem;
  margin-top: 1rem;
  color: var(--ds-muted, #aaa39b);
}

.dsx .ph-meta a {
  color: var(--ds-text, #f4f0ea);
  text-decoration: underline;
  text-decoration-color: rgba(244, 240, 234, 0.35);
  text-underline-offset: 3px;
}

.ph-aside {
  min-width: 0;
}

/* Numbers in a page header (a race: drivers, field strength, cautions). */
.ph-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2.2rem;
  margin: 0;
}

.ph-stats dt {
  color: var(--ds-muted, #aaa39b);
  font-size: 0.85rem;
  font-weight: 500;
}

.ph-stats dd {
  margin: 0.1rem 0 0;
  font-family: var(--ds-display);
  font-weight: 750;
  font-stretch: 105%;
  font-size: 1.9rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.ph .ds-big {
  align-items: flex-end;
}

.ph .ds-search input {
  width: min(20rem, 100%);
  background: rgba(13, 12, 14, 0.55);
}

.pg-body {
  padding-block: clamp(1.75rem, 4vw, 2.75rem) clamp(3rem, 6vw, 4.5rem);
}

.pg-body > :first-child,
.pg-body > section:first-child > :first-child {
  margin-top: 0;
}

/* All races / Ranked only */
.ds-tabs {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--ds-frame, #4b4750);
  border-radius: 4px;
  background: rgba(13, 12, 14, 0.55);
}

.dsx .ds-tabs a {
  padding: 0.45rem 1rem;
  border-radius: 2px;
  color: var(--ds-text, #f4f0ea);
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}

.dsx .ds-tabs a:hover {
  background: rgba(255, 255, 255, 0.06);
}

.dsx .ds-tabs a[aria-current="page"] {
  background: var(--ds-orange, #fa5900);
  color: var(--ds-ink, #0d0c0e);
}

/* Small labels in tables: Ranked / Open, and the winner's car number plate. */
.ds-badge {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border-radius: 3px;
  background: var(--ds-raise, #2a282e);
  color: var(--ds-muted, #aaa39b);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.ds-badge-ranked {
  background: var(--ds-orange, #fa5900);
  color: var(--ds-ink, #0d0c0e);
}

.ds-plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 1.4rem;
  margin-right: 0.55rem;
  padding: 0 0.45rem;
  background: var(--ds-orange, #fa5900);
  color: var(--ds-ink, #0d0c0e);
  clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
  font-family: var(--ds-display);
  font-style: italic;
  font-weight: 850;
  font-stretch: 90%;
  font-size: 0.88rem;
  line-height: 1;
  vertical-align: 0.05em;
}

.ds-when {
  white-space: nowrap;
}

.ds-when-d {
  display: block;
  font-weight: 650;
}

.ds-when-t {
  display: block;
  color: var(--ds-muted, #aaa39b);
  font-size: 0.85rem;
}

.dsx .ds-race-track {
  font-weight: 700;
}

.ds-race-head {
  display: block;
  max-width: 28rem;
  overflow: hidden;
  color: var(--ds-muted, #aaa39b);
  font-size: 0.88rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-race-cell .ds-badge {
  margin-left: 0.5rem;
}

.ds-winner {
  white-space: nowrap;
}

.ds-sm-only {
  display: none;
}

.ds-race-when {
  display: none;
}

@media (max-width: 720px) {
  .ds-sm-only {
    display: inline-block;
  }

  .ds-race-head {
    display: none;
  }

  .ds-race-when {
    display: block;
    color: var(--ds-muted, #aaa39b);
    font-size: 0.85rem;
  }

  .ds-winner .ds-plate {
    display: none;
  }
}

/* Page numbers */
.ds-pages {
  margin-top: 1.5rem;
}

.ds-pages .pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-pages .page-item.disabled {
  display: none;
}

.ds-pages .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.7rem;
  border: 1px solid var(--ds-line, #37343b);
  border-radius: 3px;
  background: var(--ds-surface, #201f24);
  color: var(--ds-text, #f4f0ea);
  font-weight: 650;
  text-decoration: none;
}

.ds-pages a.page-link:hover,
.ds-pages a.page-link:focus-visible {
  border-color: var(--ds-orange, #fa5900);
  color: var(--ds-accent, #ff7a2b);
}

.ds-pages .active .page-link {
  border-color: var(--ds-orange, #fa5900);
  background: var(--ds-orange, #fa5900);
  color: var(--ds-ink, #0d0c0e);
}

/* Joomla's page arrows use an icon font the site doesn't load: plain marks instead. */
.ds-pages [class*="icon-angle"] {
  font-style: normal;
}

.ds-pages .icon-angle-double-left::before { content: "\00AB"; }
.ds-pages .icon-angle-left::before { content: "\2039"; }
.ds-pages .icon-angle-right::before { content: "\203A"; }
.ds-pages .icon-angle-double-right::before { content: "\00BB"; }

/* Top drivers: the top three on the podium */
.pd-list {
  display: grid;
  gap: 0.9rem;
  margin: 0 0 1.6rem;
  padding: 0;
  list-style: none;
}

@media (min-width: 760px) {
  .pd-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
  }

  .pd-1 {
    order: 2;
  }

  .pd-2 {
    order: 1;
  }

  .pd-3 {
    order: 3;
  }

  .pd-1 .pd-link {
    padding-block: 2.4rem 1.4rem;
  }
}

.pd-link {
  position: relative;
  display: grid;
  gap: 0.2rem;
  padding: 1.15rem 1.2rem 1.1rem 4.6rem;
  border: 1px solid var(--ds-line, #37343b);
  border-top: 4px solid var(--_pd, var(--ds-frame));
  border-radius: 4px;
  background: linear-gradient(180deg, #232127 0%, #1b1a1f 100%);
  text-decoration: none;
}

.pd-1 {
  --_pd: var(--ds-orange, #fa5900);
}

.pd-2 {
  --_pd: #e7e2da;
}

.pd-3 {
  --_pd: var(--ds-cushion, #c08a5b);
}

.pd-pos {
  position: absolute;
  top: 50%;
  left: 1.1rem;
  transform: translateY(-50%);
  color: var(--_pd);
  font-family: var(--ds-display);
  font-style: italic;
  font-weight: 900;
  font-stretch: 80%;
  font-size: 3.4rem;
  line-height: 1;
}

.pd-name {
  overflow: hidden;
  font-weight: 750;
  font-size: 1.2rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pd-rating {
  font-family: var(--ds-display);
  font-weight: 750;
  font-stretch: 105%;
  font-size: 1.7rem;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.pd-unit {
  color: var(--ds-muted, #aaa39b);
  font-family: var(--ds-body);
  font-size: 0.8rem;
  font-weight: 600;
  font-stretch: 100%;
}

.pd-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
  color: var(--ds-muted, #aaa39b);
  font-size: 0.88rem;
}

.pd-link:hover,
.pd-link:focus-visible {
  border-color: var(--_pd);
}

.pd-link:hover .pd-name,
.pd-link:focus-visible .pd-name {
  color: var(--ds-accent, #ff7a2b);
}

/* Driver page: numbers in small panels */
.ds-statcards {
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.6rem;
  border: 0;
}

.ds-statcards > div {
  padding: 0.8rem 1rem 0.85rem;
  border: 1px solid var(--ds-line, #37343b);
  border-radius: 4px;
  background: #1b1a1f;
}

.ds-statcards > div:nth-child(even) {
  background: #222127;
}

/* News: the newest report big, then a striped list */
.nx-feature {
  margin-bottom: 1.6rem;
}

@media (min-width: 860px) {
  .nx-feature .nx-link {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: center;
    gap: 2rem;
  }

  .nx-feature .nx-body {
    padding-top: 0;
  }
}

.nx-feature .nx-title {
  font-family: var(--ds-display);
  font-style: italic;
  font-weight: 850;
  font-stretch: 85%;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  line-height: 1.02;
}

.nx-feature .nx-sum {
  font-size: 1.05rem;
}

.nx-rows {
  margin: 0;
  padding: 0;
  border: 1px solid var(--ds-line, #37343b);
  border-radius: 4px;
  background: #1b1a1f;
  list-style: none;
  overflow: hidden;
}

.nx-rows > li + li {
  border-top: 1px solid rgba(255, 255, 255, 0.035);
}

.nx-rows > li:nth-child(even) {
  background: rgba(255, 255, 255, 0.045);
}

.nx-row .nx-link {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0.9rem;
}

@media (min-width: 700px) {
  .nx-row .nx-link {
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: 1.3rem;
  }
}

.nx-row .nx-body {
  padding-top: 0;
  gap: 0.2rem;
}

.nx-row .nx-sum {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 0.95rem;
}

.nx-rows > li:hover {
  background: rgba(250, 89, 0, 0.1);
  box-shadow: inset 3px 0 0 var(--ds-orange, #fa5900);
}

.nx-rows .nx-link:focus-visible {
  outline-offset: -3px;
}

@media (max-width: 560px) {
  .nx-row .nx-sum {
    display: none;
  }
}

/* The game page: features side by side */
@media (min-width: 860px) {
  .gm-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 2.5rem;
  }

  .gm-feature {
    max-width: none;
  }

  .gm-feature.has-img {
    grid-column: 1 / -1;
  }
}

.gm-feature:not(.has-img) {
  padding: 1.2rem 1.3rem 1.25rem;
  border: 1px solid var(--ds-line, #37343b);
  border-left: 4px solid var(--ds-clay, #7a3f22);
  border-radius: 4px;
  background: #1b1a1f;
}

.gm-feature:not(.has-img):nth-child(4n + 2),
.gm-feature:not(.has-img):nth-child(4n + 3) {
  background: #222127;
}

.gm-h {
  font-size: 1.6rem;
}

/* Server list: one sheet, every other server shaded */
.sv-list {
  gap: 0;
  border: 1px solid var(--ds-line, #37343b);
  border-radius: 4px;
  background: #1b1a1f;
}

.sv {
  border-radius: 0;
  background: transparent;
}

.sv + .sv {
  border-top: 1px solid rgba(255, 255, 255, 0.035);
}

.sv:nth-child(even) {
  background: rgba(255, 255, 255, 0.045);
}

.sv:first-child {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.sv:last-child {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

.sv-next {
  border-radius: 4px;
}

/* Ranked races: one shaded row per day */
.sc-day {
  padding: 0.85rem 1rem;
  border-top: 0;
  border-radius: 3px;
}

.sc-day:nth-of-type(odd) {
  background: rgba(255, 255, 255, 0.045);
}

/* Track page and home: ranked lists */
.tr-records li {
  padding: 0.5rem 0.6rem;
  border-bottom: 0;
  border-radius: 3px;
}

.tr-records li:nth-child(odd) {
  background: rgba(255, 255, 255, 0.045);
}

.tw-list li:nth-child(odd) a {
  background: rgba(255, 255, 255, 0.035);
}

.tw-list a {
  border-bottom-color: transparent;
}

/* Track cards without a map yet: a plain oval in the track's place */
.tk-noimg-oval {
  width: 62%;
  aspect-ratio: 2 / 1;
  border: 10px solid #2f2c33;
  border-radius: 999px;
}