/* guides.html -- the hub for all 36 opening guides */
.gh-wrap { max-width: 1180px; margin: 0 auto; padding: 8px 32px 64px; box-sizing: border-box; }
.gh-head { margin: 8px 0 36px; }
.gh-eyebrow { font: 600 13px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--brass); }
.gh-h1 { font: 700 clamp(30px, 4vw, 46px)/1.1 var(--serif); color: var(--ivory); margin: 8px 0 12px; }
.gh-lede { font: 400 17px/1.6 var(--sans); color: var(--slate); max-width: 72ch; margin: 0 0 20px; }
.gh-jump { display: flex; flex-wrap: wrap; gap: 8px; }
.gh-jump a {
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--ink-900);
  font: 500 15px var(--sans); color: var(--ivory); text-decoration: none;
}
.gh-jump a:hover { border-color: var(--brass-dim); color: var(--brass-bright); }

.gh-group { margin: 0 0 44px; scroll-margin-top: 90px; }
.gh-group-title { font: 700 24px/1.25 var(--serif); color: var(--ivory); margin: 0 0 6px; display: flex; align-items: center; gap: 10px; }
.gh-count { font: 600 13px var(--mono); color: var(--slate); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; }
.gh-group-blurb { font: 400 15px/1.55 var(--sans); color: var(--slate); margin: 0 0 16px; }

.gh-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.gh-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 20px; border-radius: 14px; background: var(--ink-900); border: 1px solid var(--line);
}
.gh-card:hover { border-color: var(--brass-dim); }
.gh-card-title { margin: 0; font: 700 19px/1.25 var(--serif); }
.gh-card-title a { color: var(--ivory); text-decoration: none; }
.gh-card-title a:hover { color: var(--brass-bright); }
.gh-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.gh-pill { font: 500 13px var(--mono); color: var(--slate); background: var(--ink-850); border: 1px solid var(--line-soft); border-radius: 6px; padding: 3px 8px; }
.gh-desc { margin: 0; flex: 1; font: 400 15px/1.55 var(--sans); color: var(--slate); }
.gh-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.gh-btn { flex: 1 1 auto; text-align: center; padding: 10px 12px; border-radius: 10px; font: 600 15px var(--sans); text-decoration: none; }
.gh-btn-read { border: 1px solid var(--line); color: var(--ivory); }
.gh-btn-read:hover { border-color: var(--brass-dim); }
.gh-btn-practice { background: var(--brass); color: var(--ink-950); }
.gh-btn-practice:hover { background: var(--brass-bright); }

.gh-hubs { padding: 24px; border-radius: 16px; border: 1px solid var(--brass-dim); background: rgba(201, 162, 75, .06); }
.gh-hub-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.gh-hub-list a { font: 500 15px var(--sans); color: var(--brass-bright); text-decoration: none; }
.gh-hub-list a:hover { text-decoration: underline; }

@media (max-width: 700px) {
  .gh-wrap { padding: 4px 16px 48px; }
}