/* Compact rules layout: the video remains visible around a smaller reading panel. */
main.rules-page {
  display: flex !important;
  flex-direction: column !important;
  width: min(920px, calc(100% - 52px)) !important;
  margin: 24px auto 56px !important;
  padding: 10px 10px 34px !important;
}

.rules-page .rules-hero { order: 1; min-height: 220px !important; padding: 30px 40px !important; }
.rules-page .rules-hero h1 { font-size: clamp(44px, 5vw, 62px) !important; }
.rules-page .rules-hero p { max-width: 490px !important; margin-top: 13px !important; font-size: 14px !important; line-height: 1.6 !important; }
.rules-page .frontier-kicker { margin-bottom: 9px !important; }

/* Categories are immediately below the title instead of lower on the page. */
.rules-page .rule-index {
  order: 2;
  width: min(100% - 34px, 820px) !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
  margin: 22px auto 20px !important;
}
.rules-page .rule-index a { min-height: 58px !important; padding: 11px 12px !important; font-size: 10px !important; }

.rules-page .rule-guides { order: 3; width: min(100% - 38px, 800px) !important; gap: 16px !important; margin: 0 auto 24px !important; padding: 17px 0 !important; }
.rules-page .rule-guide img { width: 72px !important; height: 72px !important; padding: 3px !important; }
.rules-page .rule-guides-copy h2 { margin-bottom: 7px !important; font-size: clamp(25px, 3vw, 33px) !important; }
.rules-page .rule-guides-copy p { font-size: 13px !important; line-height: 1.55 !important; }

.rules-page .rule-dossiers { order: 4; width: min(100% - 38px, 820px) !important; gap: 16px !important; }
.rules-page .rule-dossier summary { min-height: 68px !important; padding: 12px 15px !important; }
.rules-page .rule-dossier-number { width: 40px !important; height: 40px !important; }
.rules-page .rule-dossier summary strong { font-size: clamp(23px, 3vw, 31px) !important; }
.rules-page .rule-dossier-body { padding: 23px 26px !important; }

@media (max-width: 760px) {
  main.rules-page { width: min(100% - 20px, 920px) !important; margin-top: 14px !important; }
  .rules-page .rules-hero { min-height: 190px !important; padding: 24px !important; }
  .rules-page .rule-index { grid-template-columns: repeat(2, 1fr) !important; width: min(100% - 24px, 820px) !important; }
  .rules-page .rule-guides, .rules-page .rule-dossiers { width: min(100% - 24px, 820px) !important; }
}