.coc-state-directory-page .site-content { background: linear-gradient(180deg, #fbf9f3 0, #fff 34rem); }
/* Widen the theme container (as the tool pages do) so the auto-fit club grid reaches three columns on desktop. */
.coc-state-directory-page .site-content > .ast-container { width: min(1240px, calc(100% - 32px)); max-width: 1240px; }
.coc-state-directory-page .content-area,
.coc-state-directory-page .site-main { width: 100%; margin: 0; }
.coc-state-directory { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: clamp(36px, 6vw, 80px) 0; color: var(--coc-ink); }
.coc-state-directory__header { position: relative; max-width: 850px; margin-bottom: clamp(28px, 5vw, 52px); padding-bottom: 24px; }
.coc-state-directory__header::after { position: absolute; bottom: 0; left: 0; width: 88px; height: 3px; background: var(--coc-gold); content: ""; }
.coc-state-directory__header h1 { margin: 0 0 12px; color: var(--coc-green-950); font-family: var(--coc-serif); font-size: clamp(2.4rem, 6vw, 4.7rem); line-height: .98; }
.coc-state-directory__header > p:last-child { color: var(--coc-muted); font-size: 1.08rem; line-height: 1.7; }
.coc-state-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: clamp(28px, 5vw, 48px); }
.coc-state-stats div { padding: clamp(18px, 3vw, 26px); border: 1px solid var(--coc-line); border-top: 3px solid var(--coc-green-900); background: var(--coc-paper); box-shadow: 0 8px 24px rgba(16, 42, 32, .05); }
.coc-state-stats dt { color: var(--coc-muted); font-family: var(--coc-sans); font-size: .72rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.coc-state-stats dd { margin: 5px 0 0; color: var(--coc-green-950); font-family: var(--coc-serif); font-size: 2rem; font-weight: 650; line-height: 1; }
.coc-pagination { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 36px; font-family: var(--coc-sans); font-size: .85rem; font-weight: 700; }
.coc-pagination a { color: var(--coc-green-900); text-underline-offset: 4px; }

@media (max-width: 720px) {
  .coc-state-directory { width: calc(100% - 24px); }
  .coc-state-stats { grid-template-columns: 1fr; }
}