/* MST-RALLYDAY - bold rally look for the rally pages only (Dan: "go hard"). Red / black / white, diagonal stripes, slanted
   heavy italic type, door-number plates. Light page underneath; nothing borrowed from any manufacturer's marks. */
body.rally { --r-red: #E10600; --r-red-d: #A30400; --r-black: #0B0B0F; --r-white: #fff; --r-amber: #FFB800; background: #F4F4F6; }
body.rally .top { background: var(--r-black); border-bottom: 4px solid var(--r-red); }
body.rally .top .brand, body.rally .top nav a { color: #fff; }
body.rally .top .brand b { color: var(--r-red); }
body.rally .top nav a:hover, body.rally .top nav a.on { background: var(--r-red); color: #fff; }
body.rally .stripes i:nth-child(1) { background: var(--r-red); } body.rally .stripes i:nth-child(2) { background: #fff; } body.rally .stripes i:nth-child(3) { background: var(--r-red); }
body.rally .chequer { opacity: .5; }
body.rally h1, body.rally h2 { letter-spacing: .02em; }

/* banner */
.rbanner { position: relative; overflow: hidden; display: flex; gap: 12px; align-items: flex-end; padding: 14px 16px 12px; border-radius: 4px;
  background: linear-gradient(105deg, var(--r-red) 0 58%, var(--r-red-d) 58% 100%); color: #fff; box-shadow: 0 6px 0 var(--r-black); }
.rbanner h1 { font-size: clamp(30px, 6vw, 52px); color: #fff; text-shadow: 3px 3px 0 rgba(0,0,0,.35); }
.rbanner .rkick { font: 700 13px/1 Inter, sans-serif; text-transform: uppercase; letter-spacing: .12em; opacity: .9; margin-bottom: 4px; }
.rstripes { position: absolute; right: -30px; top: -20px; bottom: -20px; display: flex; gap: 10px; transform: skewX(-24deg); opacity: .95; pointer-events: none; }
.rstripes i { display: block; width: 26px; background: #fff; } .rstripes i:nth-child(2) { background: var(--r-black); width: 40px; } .rstripes i:nth-child(3) { width: 12px; }
.rbanner .grow { position: relative; z-index: 1; }
.rstats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rstats span { background: var(--r-black); color: #fff; padding: 3px 10px 3px 8px; font: 600 12px/1.4 Inter, sans-serif; text-transform: uppercase; letter-spacing: .05em; transform: skewX(-12deg); }
.rstats span b { font: 800 italic 16px/1 "Barlow Condensed", sans-serif; margin-right: 3px; }
.rstats span.on { background: #fff; color: var(--r-black); } .rstats span.alarm { background: var(--r-amber); color: var(--r-black); animation: rflash 1s steps(2) infinite; }
.rlive { position: relative; z-index: 1; align-self: flex-start; background: #fff; color: var(--r-red); font: 800 italic 15px/1 "Barlow Condensed", sans-serif; padding: 5px 10px; transform: skewX(-12deg); }

/* tabs: slanted blocks */
.rtabs { border: 0; gap: 6px; margin: 0; }
.rtabs a { background: #fff; color: var(--r-black); border: 2px solid var(--r-black); border-bottom-width: 2px; transform: skewX(-12deg); font: 800 italic 17px/1 "Barlow Condensed", sans-serif; text-transform: uppercase; padding: 7px 14px; }
.rtabs a.on, .rtabs a:hover { background: var(--r-black); color: #fff; border-color: var(--r-black); }
.rtabs a.on { box-shadow: 4px 4px 0 var(--r-red); }

/* ladder */
.ladder { display: flex; flex-direction: column; background: #fff; border: 2px solid var(--r-black); border-radius: 4px; overflow: hidden; }
.lline, .lstage { display: grid; grid-template-columns: 150px 1fr; align-items: stretch; }
.lname, .lss { display: flex; flex-direction: column; justify-content: center; padding: 6px 10px; }
.lline { background: var(--r-black); color: #fff; min-height: 38px; }
.lline .lname span { font: 800 italic 18px/1 "Barlow Condensed", sans-serif; text-transform: uppercase; }
.lline .lname small { font: 700 10px/1.2 Inter, sans-serif; letter-spacing: .1em; color: var(--r-red); }
.lline.finish { background: repeating-conic-gradient(#000 0 25%, #fff 0 50%) 0 0 / 16px 16px; }
.lline.finish .lname { background: var(--r-black); }
.lline.paddock { background: #3A3A44; }
.lstage { min-height: 54px; background: repeating-linear-gradient(-45deg, #fff 0 14px, #F7F7F9 14px 28px); border-left: 8px solid var(--r-red); }
.lstage .lss { border-right: 2px dashed #D5D5DC; }
.lstage .lss b { font: 800 italic 26px/1 "Barlow Condensed", sans-serif; color: var(--r-red); }
.lstage .lss small { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; } .lstage .lss small.x { color: var(--r-red); font-weight: 700; }
.lstage.cancelled { opacity: .45; border-left-color: #999; }
.lcars { display: flex; flex-wrap: wrap; gap: 5px; padding: 6px 8px; align-items: center; }
.lline .lcars { background: rgba(255,255,255,.06); }
.lline.finish .lcars { background: rgba(255,255,255,.88); }
.lempty { color: #9A9AA6; font-size: 12px; }
.lline .lempty { color: #8A8A96; }

/* car chip = door number plate */
.rchip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px 0 0; background: #fff; border: 2px solid var(--r-black); transform: skewX(-10deg); color: var(--r-black); position: relative; font-size: 13px; font-weight: 600; white-space: nowrap; }
.rchip > * { transform: skewX(10deg); }
.rchip .rnum { align-self: stretch; display: flex; align-items: center; justify-content: center; min-width: 32px; padding: 0 5px; background: var(--r-black); color: #fff; font: 800 italic 18px/1 "Barlow Condensed", sans-serif; border-right: 4px solid var(--r-red); transform: none; }
.rchip .rname { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.rchip .rclock { font: 800 italic 17px/1 "Barlow Condensed", sans-serif; font-variant-numeric: tabular-nums; color: var(--r-red); min-width: 50px; text-align: right; }
.rchip .rpos-s { font: 800 italic 14px/1 "Barlow Condensed", sans-serif; color: var(--muted); }
.rchip .rbar { position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: #E5E5EA; transform: none; } .rchip .rbar i { display: block; height: 100%; width: 0; background: var(--r-red); transition: width .1s linear; }
.rchip.me { box-shadow: 0 0 0 3px var(--blue); }
.rchip.od { background: var(--r-amber); animation: rflash 1s steps(2) infinite; }
.rchip .rod { font: 800 italic 13px/1 "Barlow Condensed", sans-serif; color: var(--r-black); }
@keyframes rflash { 50% { filter: brightness(1.25); outline: 3px solid var(--r-red); } }

/* tables */
.rtbl thead th { background: var(--r-black); color: #fff; font: 800 italic 14px/1.2 "Barlow Condensed", sans-serif; letter-spacing: .04em; }
.rtbl thead th .muted { color: #C9C9D2 !important; }
.rtbl thead th.x { text-decoration: line-through; opacity: .6; }
.rtbl tr.me td { background: var(--blue-t); }
.rtbl tr.od td { background: #FFF4D6; }
.rpos { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 26px; background: var(--r-black); color: #fff; font: 800 italic 17px/1 "Barlow Condensed", sans-serif; transform: skewX(-10deg); }
.rpos.p1 { background: var(--r-red); } .rpos.p2 { background: #4B4B57; } .rpos.p3 { background: #7A7A88; }
.pen { color: var(--r-red); font-size: 11px; font-weight: 700; }
.matrix td, .matrix th { white-space: nowrap; }
.matrix tr.winners td { background: #FAFAFB; }

@media (max-width: 599px) {
  .lline, .lstage { grid-template-columns: 92px 1fr; }
  .lline .lname span { font-size: 15px; } .lstage .lss b { font-size: 21px; }
  .rchip .rname { max-width: 90px; }
}
.ladder[hidden], .rtbl[hidden], section[hidden] { display: none !important; }
@media (max-width: 599px) { .rbanner .grow { padding-right: 56px; } .rstripes { right: -60px; opacity: .8; } }