/* Approved Diagonal: angled fill, stable text colour and moving arrows. */
:root{--hover-duration:320ms;--hover-ease:cubic-bezier(.2,.8,.2,1)}
.album-card,.album-card:visited{color:#fff}
:root{--red:#dc013b;--navy:#0a0032}
:is(.button,.tabs a,.menu-toggle,.dialog-close,.photo-prev,.photo-next){position:relative;isolation:isolate;overflow:hidden;--diagonal-fill:#43008b;transition:none}
.button.light{background:#f4f4f6;color:#0a0032;--diagonal-fill:#dc013b}
:is(.button,.tabs a,.menu-toggle,.dialog-close,.photo-prev,.photo-next)::before{content:'';position:absolute;inset:0 auto 0 0;width:125%;background:var(--diagonal-fill);transform:translateX(-115%) skewX(-24deg);transition:transform var(--hover-duration) var(--hover-ease);pointer-events:none;z-index:-1}
.hover-label{position:relative;z-index:1;opacity:1}.hover-arrow{display:inline-block;transition:transform var(--hover-duration) var(--hover-ease)}
a:where(:not(.button):not(.brand):not(.album-card):not(.lead-story):not(.partner-logo):not(.tabs a):not(:has(img))){background-image:linear-gradient(110deg,var(--red) 0 98%,transparent 98%);background-repeat:no-repeat;background-position:left bottom;background-size:0 2px;transition:background-size var(--hover-duration) var(--hover-ease);text-decoration:none;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.red a:where(:not(.button):not(.partner-logo):not(:has(img))){background-image:linear-gradient(110deg,#fff 0 98%,transparent 98%)}.nav a::after{content:none}
:is(.album-card,.lead-story,.more-stories a,.race-card) h3{background:linear-gradient(110deg,var(--red) 0 98%,transparent 98%) left bottom/0 2px no-repeat;padding-bottom:4px;transition:background-size var(--hover-duration) var(--hover-ease)}
.brand,.partner-logo,.photo,.journal-card>a:has(img){background-image:none;transition:none}
.brand::after,.partner-logo::after,.photo::after,.journal-card>a:has(img)::after{content:none}
.brand img,.partner-logo img,.photo img,.album-card>img,.journal-card img,.news-grid img{transition:none}
@media(hover:hover){
:is(.button,.tabs a,.menu-toggle,.dialog-close,.photo-prev,.photo-next):hover::before{transform:translateX(-8%) skewX(-24deg)}
a:hover>.hover-arrow,a:hover .hover-label>.hover-arrow,button:hover .hover-arrow,:is(.album-card,.race-card):hover .hover-arrow{transform:translateX(4px)}
a:where(:not(.button):not(.brand):not(.album-card):not(.lead-story):not(.partner-logo):not(.tabs a):not(:has(img))):hover{background-size:100% 2px}
:is(.album-card,.lead-story,.more-stories a,.race-card):hover h3{background-size:100% 2px}
}
:is(.button,.tabs a,.menu-toggle,.dialog-close,.photo-prev,.photo-next):focus-visible::before{transform:translateX(-8%) skewX(-24deg)}
a:focus-visible .hover-arrow,button:focus-visible .hover-arrow{transform:translateX(4px)}
a:where(:not(.button):not(.brand):not(.album-card):not(.lead-story):not(.partner-logo):not(.tabs a):not(:has(img))):focus-visible{background-size:100% 2px}
:is(.album-card,.lead-story,.more-stories a,.race-card):focus-visible h3{background-size:100% 2px}
@media(prefers-reduced-motion:reduce){.hover-arrow,a,.hover-label,:is(.album-card,.lead-story,.more-stories a,.race-card) h3,:is(.button,.tabs a,.menu-toggle,.dialog-close,.photo-prev,.photo-next)::before,:is(.photo,a.partner-logo,.brand,.journal-card>a:has(img))::after{transition:none!important}.hover-arrow{transform:none!important}}