.races { --race-ink: #f3f7fc; --race-muted: #9eafc0; --race-sky: #80c9ff; position: relative; isolation: isolate; background: #08121c; color: var(--race-ink); padding: 64px var(--page-gutter) 20px; scroll-margin-top: 20px; }
.races::before { content: ''; position: absolute; z-index: -1; inset: 0; background: url('../images/races/helmet-triangles.svg') top center / 360px 360px repeat; opacity: .2; mask-image: linear-gradient(to bottom, transparent, #000 85px, #000 calc(100% - 100px), transparent); pointer-events: none; }
.races-inner { max-width: 1470px; margin: 0 auto; }
.races-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 32px; }
.races-eyebrow { display: block; margin: 0 0 13px; color: #a7c8e1; font: 9px var(--font-mono); letter-spacing: .15em; text-transform: uppercase; }
.races h2 { margin: 0; font: 600 clamp(36px, 3.1vw, 49px)/.97 var(--font-display); text-transform: uppercase; }
.races h2 > span { color: var(--race-sky); }
.races-timezone { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding-bottom: 4px; font-size: 10px; white-space: nowrap; }
.races-timezone img { width: 23px; height: 16px; object-fit: cover; border-radius: 2px; }
.races-timezone small { font: 9px var(--font-mono); color: var(--race-muted); }
.race-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid #324253; border-bottom: 1px solid #324253; }
.race-card { --race-card-gutter: 25px; position: relative; min-width: 0; padding: 19px var(--race-card-gutter) 17px; border-right: 1px solid #324253; background: #08121cf5; }
.race-card:first-child { border-left: 1px solid #324253; }
.race-card.is-featured { background: #142837; }
.race-card.is-selected::before { content: ''; height: 3px; background: var(--race-sky); position: absolute; inset: -1px 0 auto; }
.race-card.is-selected::after { content: ''; position: absolute; bottom: -18px; left: calc(50% - 18px); width: 36px; height: 36px; background: #08121c url('../icons/sol-de-mayo.svg') center / 32px 32px no-repeat; border-radius: 50%; pointer-events: none; z-index: 2; }
.race-card-top { display: flex; justify-content: space-between; gap: 8px; font: 8px var(--font-mono); color: var(--race-muted); text-transform: uppercase; letter-spacing: .04em; }
.is-featured .race-card-top > :first-child { color: #a5d8fb; }
.race-card-track { position: relative; isolation: isolate; height: 130px; display: flex; justify-content: center; align-items: center; margin: 13px calc(-1 * var(--race-card-gutter)) 15px; overflow: hidden; }
.race-card-track > img:not(.race-flag) { position: relative; z-index: 1; width: 148px; height: 119px; object-fit: contain; filter: drop-shadow(0 2px 3px #08121c) drop-shadow(0 0 1px #08121c); transition: transform .25s ease; }
.race-card:hover .race-card-track > img:not(.race-flag) { transform: scale(1.045); }
.is-featured .race-card-track > img:not(.race-flag) { filter: invert(19%) sepia(22%) saturate(874%) hue-rotate(166deg) drop-shadow(0 2px 3px #08121c) drop-shadow(0 0 1px #08121c); }
.race-card-track .race-flag { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .48; pointer-events: none; }
.is-featured .race-card-track .race-flag { opacity: .58; }
.race-card-name h3 { margin: 0 0 5px; font: 600 clamp(22px, 1.85vw, 32px)/1 var(--font-display); text-transform: uppercase; }
.race-card-name > span { color: var(--race-muted); font-size: 10px; }
.race-card-date { margin: 12px 0 16px; color: #d4dfe9; font: 10px var(--font-mono); }
.race-results { display: flex; align-items: center; gap: 18px; min-height: 33px; border-top: 1px solid #ffffff1a; padding-top: 10px; }
.race-results > span { display: flex; align-items: center; gap: 8px; font-size: 9px; color: var(--race-muted); }
.race-results strong { font: 600 23px/.9 var(--font-display); color: var(--race-ink); }
.race-pending { font-size: 9px; color: var(--race-muted); }
.race-select { display: flex; align-items: center; justify-content: space-between; min-height: 33px; border-top: 1px solid #ffffff1a; padding-top: 10px; font-size: 10px; color: #b9daee; }
.race-chevron { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid #698397; border-radius: 50%; font-size: 16px; line-height: 1; }
.race-select[aria-expanded="true"] .race-chevron { transform: rotate(135deg); background: #80c9ff; color: #08121c; border-color: #80c9ff; }
.race-weekend { position: relative; min-height: 555px; margin-top: 25px; overflow: hidden; isolation: isolate; background: #102534; border: 1px solid #344a5b; border-radius: 4px; }
.race-weekend[hidden] { display: none; }
.race-weekend::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, #0d2334a6, #18354724 55%, #17354678); pointer-events: none; }
.race-action-photo { position: absolute; z-index: -2; left: 0; top: 0; width: 72%; height: 100%; object-fit: cover; object-position: 60% center; opacity: .25; mask-image: linear-gradient(90deg, #000, #000 45%, transparent); }
.race-weekend-copy { position: relative; z-index: 4; padding: 37px 0 35px 34px; width: 37%; pointer-events: none; }
.race-status-dot { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 4px #f580b716; vertical-align: 1px; }
.race-weekend-copy h3 { margin: 24px 0 16px; font: 700 clamp(48px, 5.4vw, 85px)/.89 var(--font-display); text-transform: uppercase; letter-spacing: -.012em; overflow-wrap: break-word; }
.race-weekend-copy h3 > span { display: block; margin-top: 15px; font: 400 10px var(--font-mono); letter-spacing: .11em; color: #c5d7e6; }
.race-gp-name { margin-top: 23px; max-width: 260px; font-size: 12px; line-height: 1.65; color: #d4dfe8; }
.race-gp-name > span { display: block; color: var(--race-muted); font: 10px var(--font-mono); margin-top: 7px; }
.race-countdown { margin-top: 32px; }
.race-countdown > span { display: block; font: 8px var(--font-mono); text-transform: uppercase; letter-spacing: .12em; color: #b9cad7; }
.race-countdown > strong { display: block; margin-top: 8px; font: 600 clamp(22px, 2.4vw, 34px) var(--font-display); letter-spacing: .035em; font-variant-numeric: tabular-nums; color: #93d2ff; }
.race-countdown-ended { color: var(--race-sky); font-size: 12px; }
.race-speed-shot { position: relative; margin: 30px 0 0 4px; width: 168px; height: 90px; border: 4px solid #e7edf2; border-bottom-width: 18px; transform: rotate(-6deg); box-shadow: 0 10px 25px #0005; }
.race-speed-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 64%; display: block; }
.race-speed-shot > span { position: absolute; bottom: -15px; right: 4px; font: 8px var(--font-mono); color: #102b48; }
.race-agenda-scene { position: absolute; width: 72%; right: 25px; top: 0; bottom: 0; }
.race-reaching { position: absolute; z-index: 1; bottom: 0; left: calc(56% + 20px); width: max(102%, 835px); max-width: none; height: auto; transform: translateX(-65%); pointer-events: none; }
.race-agenda { position: relative; z-index: 2; width: 44%; margin: 82px 0 35px auto; background: #ecf3f7; color: #102b48; padding: 21px 25px 16px; box-shadow: 0 14px 40px #0004; border-radius: 0; }
.race-agenda::before { content: ''; position: absolute; top: 0; left: 0; height: 5px; width: 100%; background: var(--pink); }
.race-agenda-heading { display: flex; justify-content: space-between; gap: 10px; align-items: center; font: 600 25px var(--font-display); text-transform: uppercase; }
.race-agenda-heading > :last-child { font: 700 29px var(--font-display); color: #386889; font-style: italic; }
.race-agenda-zone { margin: 3px 0 17px; font: 8px var(--font-mono); text-transform: uppercase; letter-spacing: .02em; color: #51697e; }
.race-sessions { list-style: none; padding: 0; margin: 0; }
.race-sessions li { display: flex; justify-content: space-between; gap: 12px; align-items: center; border-top: 1px solid #c5d3dd; padding: 11px 0; }
.race-sessions li > span { display: flex; flex-direction: column; gap: 3px; }
.race-sessions small { font: 8px var(--font-mono); color: #526b80; }
.race-sessions strong { font-size: 12px; font-weight: 600; }
.race-sessions time { font: 600 29px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.race-sessions .is-race { margin: 4px -10px 0; padding: 12px 10px; background: #102b48; border: 0; color: #fff; }
.race-sessions .is-race small { color: #bed8eb; }
.race-sessions .is-race time { color: #a0dbff; }
.race-time-pending { font-size: 10px; }
.race-schedule-source { display: block; margin-top: 13px; text-align: right; font-size: 9px; color: #496379; }
.race-live { margin-top: 20px; border: 1px solid #334452; border-radius: 4px; overflow: hidden; background: #0d1c28; }
.race-live summary { position: relative; display: flex; align-items: center; min-height: 136px; padding: 23px 27px 23px 218px; gap: 20px; list-style: none; cursor: pointer; }
.race-live summary::-webkit-details-marker { display: none; }
.race-live-photo { position: absolute; inset: 0 auto 0 0; height: 100%; width: 245px; object-fit: cover; object-position: center 38%; mask-image: linear-gradient(90deg, #000 30%, transparent); opacity: .85; pointer-events: none; }
.race-live-copy { position: relative; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.race-live-copy .races-eyebrow { margin-bottom: 3px; font-size: 8px; }
.race-live-copy > strong { font: 600 clamp(24px, 2.5vw, 35px)/1 var(--font-display); text-transform: uppercase; }
.race-live-copy > :last-child { font-size: 10px; color: var(--race-muted); margin-top: 4px; }
.race-live-action { display: flex; align-items: center; gap: 25px; padding: 13px 16px; font-size: 10px; border: 1px solid #6b91aa; border-radius: 2px; }
.race-live-action > :last-child { font-size: 20px; }
.race-live-close, .race-live[open] .race-live-open { display: none; }
.race-live[open] .race-live-close { display: inline; }
.race-live-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 28px; border-top: 1px solid #334452; }
.race-live-toolbar h4 { margin: 0 0 6px; font: 600 29px/1 var(--font-display); }
.race-live-toolbar p { font-size: 11px; color: #b6c7d6; margin: 0; max-width: 620px; line-height: 1.6; }
.race-live-toolbar a { font-size: 11px; color: #a0d7ff; white-space: nowrap; }
.race-feed { padding: 0 28px 28px; }
.race-feed-statusbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 81px; padding: 14px 0 21px; border-top: 1px solid #ffffff12; }
.race-feed-statusbar p { margin: 0; font: 9px/1.6 var(--font-mono); color: #9db6c9; }
.race-feed-statusbar .is-stale { color: #ebce8a; }
.race-feed button { cursor: pointer; color: #b9ddf6; border: 1px solid #436177; background: #122a3b; border-radius: 3px; font-size: 11px; }
.race-feed button:hover { background: #1a374c; border-color: #80c9ff; }
.race-feed button:disabled { opacity: .5; cursor: progress; }
.race-feed-statusbar button { flex-shrink: 0; padding: 10px 13px; }
.race-feed-statusbar button span { margin-left: 8px; font-size: 17px; }
.race-feed .race-feed-new { padding: 10px 13px; color: #08121c; background: #80c9ff; border-color: #80c9ff; font-weight: 600; }
.race-feed .race-feed-new:hover { background: #a1d7fc; }
.race-timeline { padding: 0; margin: 0; list-style: none; }
.race-update { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 0 26px; padding-bottom: 14px; }
.race-update-day { grid-column: 1 / -1; margin: 14px 0 19px; color: #a4bed2; font: 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.race-update:first-child .race-update-day { margin-top: 0; }
.race-update-time { position: relative; padding-top: 23px; color: #a5cce6; font: 12px var(--font-mono); text-align: right; }
.race-update-time::before { content: ''; position: absolute; top: 29px; bottom: -15px; right: -15px; border-left: 1px solid #365065; }
.race-update-time::after { content: ''; position: absolute; top: 27px; right: -18px; width: 7px; height: 7px; border-radius: 50%; background: #628aa8; }
.race-update:last-child .race-update-time::before { display: none; }
.race-update.is-latest .race-update-time::after { background: #80c9ff; box-shadow: 0 0 0 4px #80c9ff15; }
.race-update-card { min-width: 0; padding: 20px 23px; border: 1px solid #2a4051; border-radius: 3px; background: #112431; overflow-wrap: anywhere; }
.race-update.is-latest .race-update-card { border-color: #5384a7; background: linear-gradient(110deg, #193b52, #112431); }
.race-update-label { display: block; margin-bottom: 10px; color: #8fcfff; font: 8px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.race-update-title { margin: 0; font: 600 25px/1.2 var(--font-display); color: #edf4fa; }
.race-update-text { margin: 8px 0 0; color: #b9cbd8; font-size: 13px; line-height: 1.7; white-space: pre-line; }
.race-feed-empty { margin: 0; padding: 28px; color: #b9cbd8; font-size: 13px; line-height: 1.7; }
.race-feed-empty a { color: #a0d7ff; text-decoration: underline; }
.race-feed .race-feed-more { display: block; min-height: 44px; margin: 12px auto 0; padding: 12px 22px; }
.race-feed-more span { margin-left: 16px; }
.race-feed [hidden], .race-feed[hidden] { display: none; }
.races-source { display: flex; justify-content: space-between; gap: 10px 25px; flex-wrap: wrap; padding-top: 17px; font: 8px var(--font-mono); color: #8a9fb1; }
.races-source a:hover, .race-schedule-source:hover { text-decoration: underline; }
.race-empty { padding: 25px 0; color: #afc2d0; font-size: 13px; line-height: 1.8; }
.race-empty a { color: #80c9ff; }
.races :focus-visible { outline: 2px solid #80c9ff; outline-offset: 4px; }
.race-agenda :focus-visible { outline-color: #1d5b89; }
@media (min-width: 1600px) {
  .race-weekend { min-height: 630px; }
  .race-agenda { margin-top: 114px; padding: 25px 32px 20px; }
  .race-sessions li { padding-top: 14px; padding-bottom: 14px; }
  .race-sessions strong { font-size: 14px; }
  .race-sessions small { font-size: 9px; }
  .race-weekend-copy { padding: 45px; width: 40%; }
  .race-speed-shot { margin-top: 50px; width: 205px; height: 108px; }
}
@media (max-width: 1100px) {
  .race-strip { grid-template-columns: repeat(5, minmax(190px, 1fr)); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #65859d #152535; padding-bottom: 20px; }
  .race-card { scroll-snap-align: start; }
}
@media (max-width: 1050px) {
  .race-card { --race-card-gutter: 16px; }
  .race-card-top { font-size: 7px; }
  .race-weekend { min-height: 525px; }
  .race-weekend-copy { padding-left: 26px; width: 34%; }
  .race-weekend-copy h3 { font-size: 59px; }
  .race-agenda-scene { width: 74%; right: 18px; }
  .race-agenda { width: 50%; padding: 20px 22px 16px; margin-top: 92px; }
  .race-reaching { left: calc(50% + 17px); width: max(110%, 790px); }
  .race-agenda-heading { font-size: 23px; }
  .race-live summary { padding-left: 160px; }
  .race-live-photo { width: 190px; }
}
@media (max-width: 760px) {
  .races { padding-top: 40px; }
  .races::before { background-size: 260px 260px; opacity: .16; }
  .races-heading { display: block; margin-bottom: 24px; }
  .races h2 { font-size: 38px; }
  .races-timezone { margin-top: 17px; font-size: 9px; }
  .race-strip { grid-template-columns: repeat(5, minmax(200px, 1fr)); }
  .race-card { --race-card-gutter: 19px; padding-top: 17px; padding-bottom: 17px; }
  .race-card-top { font-size: 8px; }
  .race-card-name h3 { font-size: 26px; }
  .race-card-track { height: 120px; }
  .race-card-track > img:not(.race-flag) { height: 105px; }
  .race-weekend { margin-top: 18px; min-height: 945px; }
  .race-weekend-copy { width: 100%; padding: 28px 23px 0; }
  .race-weekend-copy h3 { font-size: 63px; max-width: 100%; margin-top: 20px; }
  .race-weekend-copy h3 > span { margin-top: 12px; }
  .race-gp-name { margin-top: 16px; font-size: 11px; }
  .race-countdown { margin-top: 19px; }
  .race-countdown > strong { font-size: 28px; }
  .race-speed-shot { display: none; }
  .race-agenda-scene { width: 100%; height: 610px; right: 0; top: auto; bottom: 0; }
  .race-reaching { width: 120%; left: -15%; top: 0; bottom: auto; transform: none; mask-image: linear-gradient(transparent, #000 22px); }
  .race-agenda { width: calc(100% - 40px); margin: 205px 20px 0; padding: 25px 22px 17px; }
  .race-agenda-heading { font-size: 22px; }
  .race-agenda-heading > :last-child { font-size: 25px; }
  .race-agenda-zone { font-size: 7px; }
  .race-sessions li { gap: 7px; padding-top: 12px; padding-bottom: 12px; }
  .race-sessions strong { font-size: 11px; }
  .race-sessions time { font-size: 27px; }
  .race-sessions small { font-size: 7px; }
  .race-schedule-source { font-size: 8px; }
  .race-action-photo { width: 100%; height: 48%; opacity: .35; mask-image: linear-gradient(#000, transparent); }
  .race-live summary { padding: 25px 20px 20px; display: block; }
  .race-live-copy { padding-left: 75px; }
  .race-live-photo { width: 160px; height: 140px; }
  .race-live-copy > strong { font-size: 28px; }
  .race-live-copy > :last-child { font-size: 10px; line-height: 1.5; }
  .race-live-action { position: relative; margin-top: 23px; justify-content: space-between; padding: 10px 14px; }
  .race-live-toolbar { display: block; padding: 22px 20px; }
  .race-live-toolbar a { display: inline-block; margin-top: 10px; }
  .race-feed { padding: 0 18px 22px; }
  .race-feed-statusbar { align-items: flex-start; gap: 12px; }
  .race-feed-statusbar p { font-size: 8px; }
  .race-feed-statusbar button { padding: 8px 10px; font-size: 10px; }
  .race-update { grid-template-columns: 41px minmax(0, 1fr); column-gap: 19px; }
  .race-update-time { font-size: 10px; padding-top: 20px; }
  .race-update-time::before { top: 24px; right: -11px; }
  .race-update-time::after { top: 22px; right: -14px; }
  .race-update-card { padding: 16px; }
  .race-update-title { font-size: 22px; }
  .race-update-text { font-size: 12px; }
  .races-source { font-size: 7px; justify-content: flex-start; line-height: 1.6; }
}
@media (min-width: 520px) and (max-width: 760px) {
  .race-weekend { min-height: 1100px; }
  .race-agenda-scene { height: 770px; }
  .race-agenda { max-width: 390px; margin: 340px 25px 0 auto; }
  .race-reaching { left: -12%; width: 115%; }
}
@media (max-width: 380px) {
  .race-weekend-copy { padding-left: 18px; }
  .race-weekend-copy h3 { font-size: 55px; }
  .race-agenda { width: calc(100% - 32px); margin-left: 16px; margin-right: 16px; padding-left: 20px; padding-right: 20px; }
  .race-agenda-heading { font-size: 20px; }
  .race-sessions time { font-size: 24px; }
  .race-live-copy { padding-left: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  .race-card-track > img { transition: none; }
  .race-card:hover .race-card-track > img:not(.race-flag) { transform: none; }
}