/* the House Rules plaque: bottle-green leather, brass double rule, Roman numerals from counters */
.rules .head { max-width: 40rem; margin-bottom: var(--s-7); }
.plaque {
  position: relative; max-width: 74rem; margin-inline: auto; padding: var(--s-6) var(--s-5);
  background: var(--bottle) url(../img/tex/leather-512.webp) 0 0 / 512px; border: 1px solid var(--brass); outline: 1px solid var(--brass-deep); outline-offset: 5px;
  box-shadow: inset 0 0 120px rgba(36, 80, 61, 0.55);
}
.rule-list { counter-reset: rule; list-style: none; padding: 0; display: grid; gap: var(--s-6); }
.rule-list li { counter-increment: rule; position: relative; padding-left: 5.25rem; min-height: 3.25rem; }
.rule-list li::before {
  content: counter(rule, upper-roman); position: absolute; left: 0; top: -0.2rem; width: 4.75rem;
  font: 500 1.75rem/1 var(--f-display); color: var(--brass); letter-spacing: 0.02em;
}
.rule-list b { display: block; margin-bottom: 4px; font: 700 var(--t-label) var(--f-sc); letter-spacing: 0.08em; color: var(--ivory); }
.rule-list i { display: block; font: italic 400 1.1875rem/1.35 var(--f-display); color: var(--ivory); text-wrap: pretty; }
@media (max-width: 899px) {
  .plaque, .rules-d { display: none; }
  .rules { padding-block: var(--s-6) var(--s-5); }
  .rules .head { margin-bottom: 0; }
}
@media (min-width: 900px) {
  .rules-m { display: none; }
  .plaque { padding: var(--s-8) var(--s-8); }
  .rule-list { grid-auto-flow: column; grid-template-rows: repeat(6, auto); column-gap: var(--s-9); row-gap: var(--s-6); }
}