/* Project rules: extend the existing Axolot site without changing other pages. */
body.site-page.rules-page { scroll-behavior: smooth; }
.rules-header { height: 150px; }
.rules-header > .site-container { height: 100%; position: relative; }
.rules-heading { padding: 30px 0 40px; }
.rules-breadcrumbs { display: flex; gap: 10px; align-items: center; margin-bottom: 25px; color: #B7B7B7; font-size: 15px; }
.rules-breadcrumbs a { color: inherit; text-decoration: none; }
.rules-breadcrumbs a:hover { color: #FFFFFF; }
.rules-heading h1 { color: #FFFFFF; font-size: 30px; font-weight: 700; line-height: 1.2; text-transform: uppercase; }
.rules-heading > p { margin-top: 15px; color: #B7B7B7; font-size: 15px; line-height: 1.5; }
.rules-layout { display: grid; grid-template-columns: 255px minmax(0, 1fr); align-items: start; gap: 30px; padding-top: 40px; padding-bottom: 50px; }
.rules-sidebar { position: sticky; top: 25px; padding: 20px 20px; border-radius: 10px; background: #1C1C1C; }
.rules-sidebar h2 { font-size: 15px; line-height: 1.3; margin-bottom: 20px; }
.rules-sidebar nav { display: flex; flex-direction: column; gap: 5px; }
.rules-sidebar nav a { display: flex; align-items: baseline; gap: 10px; border-radius: 5px; padding: 10px 10px; color: #B7B7B7; text-decoration: none; font-size: 15px; line-height: 1.4; }
.rules-sidebar nav a > span:first-child { color: #FF254F; font-size: 10px; font-weight: 700; }
.rules-sidebar nav a:hover, .rules-sidebar nav a:focus-visible { background: #282828; color: #FFFFFF; }
.rules-content { min-width: 0; }
.rules-section { scroll-margin-top: 25px; }
.rules-section + .rules-section { margin-top: 40px; }
.rules-section-heading { display: flex; gap: 15px; align-items: center; margin-bottom: 20px; }
.rules-section-heading h2 { color: #FFFFFF; font-size: 30px; font-weight: 700; line-height: 1.2; }
.rules-section-card { padding: 5px 25px; border-radius: 10px; background: #1C1C1C; }
.rules-rule { padding: 25px 0; scroll-margin-top: 25px; }
.rules-rule:target { outline: 5px solid #FF254F; outline-offset: 10px; border-radius: 5px; }
.rules-rule h3 { font-size: 15px; font-weight: 500; line-height: 1.6; overflow-wrap: anywhere; }
.rules-number { color: #FF254F; font-weight: 700; margin-right: 5px; }
.rules-rule p { margin-top: 15px; color: #B7B7B7; font-size: 15px; font-weight: 400; line-height: 1.65; overflow-wrap: anywhere; }
.rules-rule p strong { color: #FFFFFF; font-weight: 500; }
.rules-rule p.rules-penalty { padding: 10px 15px; border-radius: 5px 5px 5px 5px; background: #242020; color: #FFFFFF; }
.rules-rule p.rules-penalty strong { font-weight: 700; }
.rules-back-top { display: inline-flex; gap: 10px; margin-top: 30px; color: #B7B7B7; font-size: 15px; text-decoration: none; }
.rules-back-top:hover { color: #FFFFFF; }
.rules-page a:focus-visible { outline: 5px solid #FF254F; outline-offset: 5px; }
@media (max-width: 900px) {
    .rules-header { height: 140px; }
    .rules-layout { grid-template-columns: 1fr; gap: 30px; }
    .rules-sidebar { position: static; }
    .rules-sidebar h2 { margin-bottom: 10px; }
    .rules-sidebar nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .rules-header { height: 125px; }
    .rules-heading { padding-top: 20px; padding-bottom: 30px; }
    .rules-breadcrumbs { font-size: 10px; margin-bottom: 20px; }
    .rules-heading h1 { font-size: 25px; }
    .rules-layout { padding-top: 25px; padding-bottom: 30px; gap: 30px; }
    .rules-sidebar { padding: 20px 15px; }
    .rules-sidebar nav { grid-template-columns: 1fr; gap: 5px; }
    .rules-sidebar nav a { padding: 10px 10px; }
    .rules-section-heading { gap: 10px; margin-bottom: 15px; }
    .rules-section-heading h2 { font-size: 25px; }
    .rules-section-card { padding: 0 20px; }
    .rules-rule { padding: 20px 0; }
    .rules-rule p { font-size: 15px; }
    .rules-rule p.rules-penalty { padding: 10px 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .rules-page { scroll-behavior: auto; }
}

/* Use the same five-pixel spacing grid for inherited page elements. */
.rules-page .site-container { width: min(1110px, calc(100% - 60px)); }
.rules-page .site-navigation .site-brand-mark { width: 35px; height: 20px; }
.rules-page .site-avatar-placeholder { width: 30px; height: 30px; }
.rules-page .site-navigation-link::after { height: 5px; bottom: -10px; }
.rules-page .site-footer-brand { width: 135px; }
.rules-page .site-footer-brand .site-brand { font-size: 25px; }
.rules-page .site-footer-brand .site-brand-mark { width: 40px; height: 30px; }
.rules-page .site-footer-brand p { font-size: 10px; }
.rules-page .site-footer-links h2 { font-size: 15px; }
.rules-page .site-footer-links a { font-size: 15px; }
.rules-page .site-payment-card { height: 40px; }
.rules-page .site-payment-card img { max-width: 30px; max-height: 20px; }
@media (max-width: 900px) {
    .rules-page .site-container { width: calc(100% - 50px); }
    .rules-page .site-navigation { gap: 25px; }
    .rules-page .site-navigation-links { gap: 10px; }
    .rules-page .site-footer-content { grid-template-columns: minmax(110px, 135px) minmax(0, 1fr) 55px; }
    .rules-page .site-footer-brand .site-brand { font-size: 20px; }
    .rules-page .site-footer-brand .site-brand-mark { width: 35px; height: 25px; }
    .rules-page .site-footer-links { gap: 15px; }
    .rules-page .site-footer-links a { font-size: 10px; }
    .rules-page .site-footer-payments { width: 55px; gap: 10px; }
    .rules-page .site-payment-card { width: 55px; height: 35px; border-radius: 10px; }
}
@media (max-width: 700px) {
    .rules-page .site-navigation { gap: 15px; }
    .rules-page .site-navigation .site-brand-mark { width: 30px; height: 20px; }
}
@media (max-width: 600px) {
    .rules-page .site-container { width: calc(100% - 30px); }
    .rules-page .site-navigation { padding-top: 25px; }
    .rules-page .site-footer-content { grid-template-columns: 80px minmax(0, 1fr) 40px; }
    .rules-page .site-footer-brand .site-brand { gap: 5px; font-size: 15px; }
    .rules-page .site-footer-brand .site-brand-mark { width: 20px; height: 15px; }
    .rules-page .site-footer-links { gap: 10px; }
    .rules-page .site-footer-links section { gap: 10px; }
    .rules-page .site-footer-links h2 { font-size: 10px; }
    .rules-page .site-footer-payments { width: 40px; gap: 5px; }
    .rules-page .site-payment-card { width: 40px; height: 30px; border-radius: 5px; }
}
@media (max-width: 400px) {
    .rules-page .site-container { width: calc(100% - 20px); }
    .rules-page .site-navigation { gap: 5px; }
    .rules-page .site-navigation-links { gap: 5px; }
}