/* The guides (/guides and /guides/<name>): pages written for one search each, built by Hosting/guides/build.mjs from
   one template. The website layout rule (CLAUDE.md, 2026-11-11): a guide is one 760 column (its head's text and its
   framed body share both edges); the index's cards sit on the 1120 board in thirds, halves or one across, never one
   alone short of the row. Painted pieces only: the kit's frame, divider and buttons (site.css). Gaps from 8, 16, 24,
   32 and 48 px. Four heading looks, each smaller than the one above: page (IM Fell 50), section (Cinzel 24 gold),
   topic (Cinzel 14.5 small caps bronze), card title (Cinzel 17 cream, the index only). */

.guides { display: grid; align-content: start; }

/* ---------- a guide: one 760 column ---------- */
.guide { width: min(760px, 100%); margin: 0 auto; display: grid; gap: 32px; }
.guide > * { min-width: 0; }

.g-head, .gi-head { display: grid; gap: 16px; justify-items: center; text-align: center; }
.g-head .eyebrow, .gi-head .eyebrow { font: 500 13px/1.3 var(--ui); letter-spacing: 0.16em; color: var(--bronze-hi); }
.g-head .eyebrow a { color: inherit; text-decoration: none; }
.g-head .eyebrow a:hover { color: var(--gold); }
.g-head h1, .gi-head h1 {
  margin: 0; font: 400 clamp(32px, 6vw, 50px)/1.08 var(--display); color: var(--gold); letter-spacing: 0.02em;
  text-wrap: balance; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}
.g-lead, .gi-lead { margin: 0; width: 100%; font: italic 19px/1.5 var(--lore); color: #dccaa4; text-wrap: pretty; }

.g-body { display: grid; gap: 16px; font-size: 17px; line-height: 1.6; }
.g-body > * { margin: 0; min-width: 0; }
.g-body h2 { margin: 16px 0 0; font: 600 24px/1.2 var(--heading); color: var(--gold); letter-spacing: 0.04em; }
.g-body > h2:first-child { margin-top: 0; }
.g-body h3 { margin: 8px 0 0; font: 600 14.5px/1.3 var(--heading); letter-spacing: 0.13em; text-transform: uppercase; color: var(--bronze-hi); }
.g-body p, .g-body li { color: var(--text); }
.g-body b { color: var(--parch); font-weight: 600; }
.g-body ul { padding-left: 24px; display: grid; gap: 8px; }
.g-body code { font-size: 0.92em; color: var(--parch); overflow-wrap: anywhere; }
.g-body kbd { font: 500 0.9em var(--ui); color: var(--parch); }

/* one clip or still from the game, the column's full width */
.g-fig { display: grid; gap: 8px; }
.g-fig img, .g-fig video {
  display: block; width: 100%; height: auto; border-radius: 3px; background: #0c0a08;
  box-shadow: 0 0 0 1px rgba(156, 122, 71, 0.35);
}
.g-fig figcaption { font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.g-fig figcaption b { color: var(--parch); }

/* the one button, to /beta, centred under the divider */
.g-cta { display: grid; gap: 16px; justify-items: center; text-align: center; padding-top: 16px; }
.g-cta::before {
  content: ""; display: block; width: min(100%, 360px); aspect-ratio: 640 / 30;
  background: var(--kit-divider) center / 100% 100% no-repeat;
}
.g-cta p { margin: 0; color: var(--text-2); }

/* links to the other guides */
.g-more { display: grid; gap: 8px; }
.g-more h2 { margin: 0; font: 600 14.5px/1.3 var(--heading); letter-spacing: 0.13em; text-transform: uppercase; color: var(--bronze-hi); text-align: center; }
.g-more ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
.g-more li { min-width: 0; }
.g-more a { display: flex; align-items: center; min-height: 32px; line-height: 1.35; }
.g-more .g-all { grid-column: 1 / -1; justify-content: center; }
@media (max-width: 560px) { .g-more ul { grid-template-columns: minmax(0, 1fr); } .g-more .g-all { justify-content: flex-start; } }

/* ---------- the index: the 1120 board ---------- */
.gi-wrap { width: min(1120px, 100%); margin: 0 auto; display: grid; gap: 32px; }
.gi-head { width: min(760px, 100%); justify-self: center; }
.gi-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gi-cards > li { min-width: 0; display: grid; }
@media (max-width: 960px) { .gi-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .gi-cards { grid-template-columns: minmax(0, 1fr); } }
.gi-card {
  --fw: 18px;
  display: grid; gap: 8px; align-content: start; min-width: 0; color: inherit; text-decoration: none;
  border: var(--fw) solid transparent; border-image: var(--kit-frame) 120 fill / var(--fw) stretch;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.6)); transition: filter 0.15s;
}
.gi-card:hover { filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.6)) brightness(1.12); }
.gi-card:hover .gi-title { color: var(--gold); }
.gi-cover { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 2px; background: #0c0a08; box-shadow: 0 0 0 1px rgba(95, 158, 148, 0.35); }
.gi-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gi-title { font: 600 17px/1.3 var(--heading); color: var(--cream); letter-spacing: 0.02em; text-wrap: balance; transition: color 0.15s; }
.gi-desc { font-size: 15px; line-height: 1.45; color: var(--muted); }
.gi-foot { width: min(760px, 100%); justify-self: center; display: grid; gap: 16px; justify-items: center; text-align: center; }
.gi-foot p { margin: 0; color: var(--text-2); }