@media (min-width: 981px) {
  .rulebook-shell {
    width: min(100% - 2rem, 100rem);
    min-height: auto;
    margin: 0 auto;
    padding: 1.75rem 0 2.25rem;
    grid-template-columns: var(--sidebar) minmax(0, 1fr);
    align-items: start;
    gap: clamp(1.5rem, 3vw, 3.25rem);
  }

  .rule-sidebar {
    position: static;
    height: auto;
    max-height: none;
    overflow: visible;
    margin: 0;
    padding: 1.25rem 1rem 1.5rem;
    border: 3px solid var(--ink);
    border-right: 3px solid var(--ink);
    background: var(--deep);
    box-shadow: 7px 7px 0 var(--ink);
  }

  .rule-main {
    padding: 0 0 5rem;
  }
}

@media (max-width: 980px) {
  .rule-sidebar {
    top: 80px;
    bottom: 0.85rem;
    left: 0.85rem;
    width: min(88vw, 22rem);
    height: auto;
    overflow-y: auto;
    padding: 1.25rem 1rem 1.5rem;
    border: 3px solid var(--ink);
    border-right: 3px solid var(--ink);
    background: var(--deep);
    box-shadow: 7px 7px 0 var(--ink);
  }
}

@media (max-width: 680px) {
  .rule-sidebar {
    top: 70px;
  }

  .rulebook-home .rule-content h1 {
    max-width: 100%;
    font-size: clamp(1.85rem, 9vw, 3rem);
    text-align: center;
    white-space: nowrap;
  }
}