/* Player guide pages (guide.html, class-*.html): role G, generated with the pages. Base styles: style.css */
.page-head .kicker a { color: inherit; text-decoration: none; } .page-head .kicker a:hover { color: var(--bone); }
.guide-class .gc-top { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: start; margin-bottom: 2rem; }
.gc-art { margin: 0; } .article.guide-class .gc-art img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }   /* not the news 16:9 */
.gc-intro h2 { margin-top: 0; }
.gc-facts { display: grid; gap: .6rem; margin: 1.4rem 0 0; padding: 1rem 1.2rem; border: 1px solid #3a2c1a; background: rgba(11,10,18,.45); }
.gc-facts div { display: grid; grid-template-columns: 9.5em 1fr; gap: 1rem; } .gc-facts dt { font: 600 .95rem/1.6 var(--display); letter-spacing: .06em; color: var(--gold); } .gc-facts dd { margin: 0; }
.article table.skills, .article table.levels, .article table.narrow { min-width: 0; }
.table-wrap:has(> table.narrow) { max-width: 560px; }
.sk { display: flex; align-items: center; gap: .6em; }
.si { flex: none; width: 32px; height: 32px; border: 1px solid #4a3a24; box-shadow: 0 0 0 1px #000; }
.quick .si { width: 24px; height: 24px; }
.gc-quick { margin: 0 0 1.6rem; } .gc-quick summary { cursor: pointer; font: 600 1rem/1.6 var(--display); letter-spacing: .06em; color: var(--gold); }
.gc-quick .table-wrap { max-width: 640px; } .article table.quick { min-width: 0; font-size: .95rem; } .quick td.lv { color: var(--gold); white-space: nowrap; } .quick .ty { color: var(--ash); }
.skills td.lv, .levels td.lv { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--gold); }
.skills th[scope="row"] { white-space: nowrap; color: var(--bone); }
.skills .ty { white-space: nowrap; color: var(--ash); }
.levels small { color: var(--ash); }
.gc-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 2.4rem; padding-top: 1.2rem; border-top: 1px solid #3a2c1a; font-family: var(--display); }
.gc-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.gc-grid a { display: grid; justify-items: center; gap: .5rem; padding: 14px 8px; text-align: center; text-decoration: none; color: var(--bone); border: 1px solid #3a2c1a; background: rgba(11,10,18,.45); font: 600 .95rem/1.3 var(--display); }
.gc-grid a:hover, .gc-grid a:focus-visible { border-color: var(--gilt); }
.gc-grid img { width: 72px; height: 72px; border-radius: 50%; }
@media (max-width: 760px) { .skills .si { width: 24px; height: 24px; } .sk { gap: .45em; } .article table.skills { font-size: .92rem; }
  .article table.skills th, .article table.skills td, .article table.quick th, .article table.quick td, .article table.levels th,
  .article table.levels td { padding-left: .4em; padding-right: .4em; } .quick .ty { display: none; }
  .article table.quick { font-size: .85rem; } .quick .si { width: 20px; height: 20px; }
  .article table.skills td:last-child, .article table.levels td:not(.lv) { overflow-wrap: anywhere; }   /* long words in the text columns only */
  .article table.skills thead th, .article table.quick thead th, .article table.levels thead th { white-space: nowrap; } }
@media (max-width: 760px) { .guide-class .gc-top { grid-template-columns: 1fr; } .gc-art { max-width: 300px; justify-self: center; width: 100%; } .skills .ty { display: none; } .skills th[scope="row"] { white-space: normal; } }
@media (max-width: 460px) { .gc-facts div { grid-template-columns: 1fr; gap: 0; } }