/* Focused presentation layer; operational content is always visible. */
/* Homepage-only branding comparison. Restore the saved anchor to undo it. */
.home-page .site-header .header-logo-test { flex: 0 0 auto; width: 145px; height: 55px; max-width: calc(100% - 105px); }
.home-page .header-logo-test .original-header-logo { display: block; width: 100%; height: auto; max-height: 55px; object-fit: contain; filter: invert(1); mix-blend-mode: screen; }
@media (max-width: 650px) {
  .home-page .site-header .header-logo-test { width: 125px; height: 47px; }
  .home-page .header-logo-test .original-header-logo { max-height: 47px; }
}
@media (max-width: 850px) {
  .home-page .hero-mobile-photo { position: relative; }
  .home-page .hero-mobile-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,.16) 28%, transparent 58%); }
}
/* Reusable Special Event category, alongside SX/Pee Wee and Motocross. */
:root { --special: #88cdb7; }
.calendar-key .key-special::before { background: var(--special); }
.days .race-day.special, .event-card.special .event-date,
.upcoming-feature.special .upcoming-date { background: var(--special); color: #101816; }
.event-card.special .event-main small, .event-detail.special .event-type,
.mini-event.special strong, .upcoming-feature.special .eyebrow { color: var(--special); }
.upcoming-feature.special, .mini-event.special,
.event-card.special.is-next { border-left-color: var(--special); }
.event-detail.special { border-top-color: var(--special); }
.days .race-day.special.is-past { background: #263d34; color: #b1e7d5; }
@media (hover: hover) { .mini-event.special.is-next:hover { box-shadow: inset 0 -2px 0 var(--special); } }
/* Photographic track features and the shared short racing-line accent. */
.hero, .tracks { position: relative; }
.hero::after, .tracks::before {
  content: "";
  position: absolute;
  left: max(20px, calc((100% - 1200px) / 2));
  width: 158px;
  height: 7px;
  background: var(--orange);
  clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%);
  pointer-events: none;
}
.hero::after { bottom: -4px; }
.tracks::before { top: 0; }
.hero-side { align-self: end; min-width: 0; }
.hero-signature { display: flex; justify-content: flex-end; padding: 0 4px 20px; }
.hero-signature .hero-official {
  display: block;
  width: 156px;
  height: auto;
  filter: invert(1);
  mix-blend-mode: screen;
}
.tracks { background: #171a1c; color: var(--ink); padding-block: 64px; }
.tracks .eyebrow { color: var(--orange); }
.tracks .track-links a { color: #ffad75; }
.track-features { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin-top: 30px; }
.track-feature { display: flex; align-items: end; position: relative; isolation: isolate; min-width: 0; min-height: 440px; overflow: hidden; color: #fff; background: #121415; text-decoration: none; border-bottom: 3px solid #6e3c24; }
.track-feature > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.track-feature-mx > img { object-position: 74% 44%; }
.track-feature-sx > img { object-position: 58% 42%; }
.track-feature-pw > img { object-position: 55% 45%; }
.track-feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(4,7,8,.02) 20%,rgba(4,7,8,.16) 45%,rgba(4,7,8,.88) 79%,#080b0d 100%); z-index: -1; pointer-events: none; }
.track-feature-copy { padding: 28px; width: 100%; }
.track-feature .track-number { display: block; width: 32px; border-top: 2px solid var(--orange); padding-top: 8px; color: #ff9b5c; font-size: .75rem; font-weight: 800; letter-spacing: .12em; }
.track-feature h3 { font-size: clamp(1.6rem,2.4vw,2.1rem); line-height: 1.06; margin: 14px 0 12px; max-width: 280px; }
.track-feature p { margin: 0; font-size: .95rem; line-height: 1.5; color: #dce0e0; max-width: 310px; }
.track-feature:focus-visible { outline: 3px solid #ffb581; outline-offset: 4px; }
.track-feature:active { border-bottom-color: var(--orange); }
.sponsor-full-banner { margin: 0 0 36px; }
.sponsors-page .sponsor-full-banner img { min-width: 0; width: 100%; }
.sponsor-list-title { font-size: clamp(1.6rem,3vw,2.2rem); }
.sponsor-text-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px 32px; list-style: none; padding: 0; margin: 24px 0 34px; }
.sponsor-text-list li { color: #d6d9d9; line-height: 1.5; }
.sponsor-text-list a { color: #ffad75; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.sponsor-text-list a:hover { color: #fff; }
@media (max-width: 950px) {
  .track-features { gap: 12px; }
  .track-feature { min-height: 400px; }
  .track-feature-copy { padding: 22px; }
  .sponsor-text-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .track-features { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .track-feature { min-height: 360px; }
  .track-feature h3 { max-width: none; font-size: 1.85rem; }
  .track-feature-copy { padding: 25px; }
  .track-feature-mx > img { object-position: 74% 40%; }
  .track-feature-sx > img { object-position: 58% 36%; }
  .track-feature-pw > img { object-position: 55% 48%; }
  .tracks { padding-block: 45px; }
  .hero-signature { justify-content: flex-start; padding-bottom: 18px; }
  .hero-signature .hero-official { width: 140px; }
}
@media (max-width: 420px) { .sponsor-text-list { grid-template-columns: minmax(0,1fr); gap: 12px; } }
@media (hover: hover) {
  .track-feature:hover { border-bottom-color: var(--orange); }
  .track-feature:hover > img { transform: scale(1.035); }
  .mini-event.is-next:hover { box-shadow: inset 0 -2px 0 var(--orange); }
  .mini-event.mx.is-next:hover { box-shadow: inset 0 -2px 0 var(--blue); }
}
@media (prefers-reduced-motion: no-preference) {
  .track-feature { transition: border-color .2s ease; }
  .track-feature > img { transition: transform .28s ease-out; }
}
@media (prefers-reduced-motion: reduce) { .track-feature:hover > img { transform: none; } }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; }
.site-credit { color: #b9bdbd; text-decoration: none; }
.site-credit:hover, .site-credit:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.hero-mobile-photo img { transform: none; object-position: 60% 88%; }
.hero-mobile-photo { aspect-ratio: 1.6; }
.upcoming-feature { border-left-width: 4px; }
.upcoming-date { padding: 12px 8px; gap: 4px; }
.upcoming-actions .button { line-height: 1.45; }
.month { padding: 20px; }
.month h2 { font-size: 1.35rem; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.days { gap: 5px; }
.days .race-day { border-radius: 0; border: 2px solid transparent; }
.days .race-day.is-next { border-color: #fff; box-shadow: 0 0 0 1px #111; }
.mini-event.is-next { border-color: #f5f3ef; }
.event-card.is-next { background: #25282a; border-left: 3px solid var(--orange); }
.event-card.mx.is-next { border-left-color: var(--blue); }
.days .race-day.is-past { background: #3a2a22; color: #ffae81; }
.days .race-day.mx.is-past { background: #233344; color: #a0cdff; }
.event-card.is-past .event-main small { color: #b7b9b9; }
.mini-month h3 { font-size: 1.05rem; line-height: 1.25; }
.mini-event { min-height: 44px; }
.calendar-key { flex-wrap: wrap; row-gap: 10px; }
.event-card { min-width: 0; }
.event-main strong { line-height: 1.25; }
.sponsor-options { scroll-margin-top: 24px; }
@media (max-width: 550px) {
  .month { padding: 16px; }
  .event-card { gap: 14px; padding-inline: 10px; }
}
@media (prefers-reduced-motion: no-preference) {
  .home-page .hero h1 { animation: hero-arrive .45s ease-out both; }
  .section-arriving { animation: section-arrive .4s ease-out both; }
  .button, .mini-event, .race-day, .event-card { transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease; }
  @media (hover: hover) {
    .button:hover { box-shadow: 0 3px 0 rgba(255,106,33,.2); }
    .mini-event:hover { background: #34393c; }
    .days .race-day:hover { border-color: #fff; }
  }
}
@keyframes hero-arrive { from { transform: translateY(8px); } to { transform: translateY(0); } }
@keyframes section-arrive { from { transform: translateY(9px); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .section-arriving { animation: none; } }