/* Over The Top guide pages (and the guide directory on the home page). Uses the tokens from site.css. */
.g-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 1.5rem; min-height: 64px; padding: 0 max(18px, calc((100% - 1240px) / 2)); background: rgba(21, 19, 15, .96); border-bottom: 1px solid var(--line); }
.g-brand { display: flex; align-items: center; gap: .7rem; color: var(--cream); text-decoration: none; flex: none; }
.g-brand span { display: grid; place-items: center; min-width: 44px; height: 34px; padding: 0 6px; border: 2px solid var(--red); color: var(--cream); font: 800 1rem/1 "Barlow Condensed", sans-serif; letter-spacing: .06em; }
.g-brand b { display: block; font: 800 1.1rem/1 "Barlow Condensed", sans-serif; letter-spacing: .08em; }
.g-brand small { display: block; font: 600 .74rem/1.3 "Barlow Condensed", sans-serif; letter-spacing: .14em; color: var(--brass); }
.g-top nav { display: flex; gap: .1rem; margin-left: auto; }
.g-top nav a { padding: .5rem .6rem; color: #d9d0bc; text-decoration: none; font: 700 1rem/1 "Barlow Condensed", sans-serif; letter-spacing: .06em; text-transform: uppercase; border-bottom: 2px solid transparent; }
.g-top nav a:hover { color: #fff; }
.g-top nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--red); }
.g-top .g-steam { flex: none; color: var(--brass); text-decoration: none; font: 700 .9rem "Barlow Condensed", sans-serif; letter-spacing: .08em; }
.g-menu { display: none; margin-left: auto; min-height: 44px; padding: 0 1rem; background: none; border: 1px solid var(--line); color: var(--cream); font: 700 .95rem "Barlow Condensed", sans-serif; letter-spacing: .12em; cursor: pointer; }

.g-hero { position: relative; min-height: 0; display: flex; align-items: flex-end; padding: 40px max(18px, calc((100% - 1240px) / 2)) 40px; overflow: hidden; border-bottom: 1px solid var(--line); }
.g-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: saturate(.7) brightness(.55); }
.g-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #15130ff2 0%, #15130f99 55%, #15130f33 100%), linear-gradient(0deg, var(--ink), transparent 60%); }
.g-hero .g-label { font: 700 .82rem "Barlow Condensed", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); margin: 0; }
.g-hero h1 { font: 900 clamp(2.8rem, 7vw, 4.8rem)/.95 "Barlow Condensed", sans-serif; text-transform: uppercase; color: var(--cream); margin: .3rem 0 .6rem; letter-spacing: -.01em; }
.g-hero h1 em { font-style: normal; color: #e0493b; }
.g-hero p:not(.g-label) { max-width: 640px; margin: 0; font: 500 1.12rem/1.55 "Source Serif 4", Georgia, serif; color: #e9e1cd; }

.g-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; width: min(1240px, calc(100% - 36px)); margin: 0 auto; padding: 44px 0 80px; }
.g-toc { position: sticky; top: 84px; align-self: start; display: flex; flex-direction: column; gap: .1rem; }
.g-toc b { font: 700 .8rem "Barlow Condensed", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); margin-bottom: .5rem; }
.g-toc a { color: var(--paper); text-decoration: none; padding: .3rem 0 .3rem .7rem; border-left: 2px solid var(--line); font: 500 .98rem/1.35 "Source Serif 4", Georgia, serif; }
.g-toc a:hover { color: #fff; border-left-color: var(--red); }
.g-article { min-width: 0; font: 400 1.05rem/1.65 "Source Serif 4", Georgia, serif; color: var(--paper); }
.g-article > section { padding-bottom: 2.4rem; margin-bottom: 2.4rem; border-bottom: 1px solid var(--line); scroll-margin-top: 84px; }
.g-article > section:last-child { border-bottom: 0; }
.g-article h2 { font: 800 clamp(1.8rem, 3.2vw, 2.4rem)/1 "Barlow Condensed", sans-serif; text-transform: uppercase; color: var(--cream); margin: 0 0 .8rem; letter-spacing: .01em; }
.g-article h3 { font: 800 1.35rem/1.1 "Barlow Condensed", sans-serif; text-transform: uppercase; color: var(--cream); margin: 1.4rem 0 .4rem; letter-spacing: .02em; }
.g-article p { margin: 0 0 1em; }
.g-article ul, .g-article ol { padding-left: 1.2em; }
.g-article li { margin-bottom: .4rem; }
.g-article strong { color: var(--cream); }
.g-article a { color: #e6b86a; }
.g-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 1rem 0 1.2rem; }
.g-card { background: #1d1a14; border: 1px solid var(--line); border-top: 3px solid var(--brass); padding: 1rem 1.15rem; }
.g-card.red { border-top-color: var(--red); }
.g-card h3 { margin-top: 0; }
.g-card p:last-child, .g-card ul:last-child { margin-bottom: 0; }
.g-table { overflow-x: auto; border: 1px solid var(--line); margin: 1rem 0; }
.g-table table { width: 100%; border-collapse: collapse; font-size: .98rem; }
.g-table th, .g-table td { text-align: left; vertical-align: top; padding: .7rem .85rem; border-bottom: 1px solid var(--line); }
.g-table thead th { font: 700 .82rem "Barlow Condensed", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--brass); background: #1d1a14; }
.g-table tbody th { font: 800 1.08rem "Barlow Condensed", sans-serif; color: var(--cream); text-transform: uppercase; letter-spacing: .03em; }
.g-table tbody tr:last-child th, .g-table tbody tr:last-child td { border-bottom: 0; }
.g-note { border: 1px solid var(--line); border-left: 3px solid var(--brass); background: #1d1a14; padding: .9rem 1.1rem; margin: 0 0 1.2rem; }
.g-note.red { border-left-color: var(--red); }
.g-note p:last-child { margin: 0; }
.g-src { font-size: .92rem; color: #b8ad96; }
.g-faq details { border-bottom: 1px solid var(--line); }
.g-faq summary { cursor: pointer; padding: .9rem 0; font: 800 1.2rem "Barlow Condensed", sans-serif; text-transform: uppercase; color: var(--cream); letter-spacing: .02em; min-height: 44px; }
.g-faq details > div { padding: 0 0 1rem; }

.g-feed-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.g-feed-card { background: #1d1a14; border: 1px solid var(--line); padding: 1rem 1.1rem; display: flex; flex-direction: column; }
.g-feed-card small { font: 700 .82rem "Barlow Condensed", sans-serif; letter-spacing: .1em; color: var(--brass); }
.g-feed-card h3 { margin: .3rem 0 .4rem; font-size: 1.15rem; }
.g-feed-card p { font-size: .95rem; color: #bdb29b; }
.g-feed-card a { margin-top: auto; font-weight: 600; }

.g-foot { padding: 34px max(18px, calc((100% - 1240px) / 2)) 42px; border-top: 1px solid var(--line); background: #100e0b; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; }
.g-foot p { margin: .7rem 0 0; color: #b8ad96; font: 400 .95rem/1.5 "Source Serif 4", Georgia, serif; }
.g-foot nav { display: flex; flex-wrap: wrap; gap: .4rem 1rem; justify-content: flex-end; }
.g-foot nav a { color: var(--paper); text-decoration: none; font: 700 1rem "Barlow Condensed", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.g-foot nav a:hover { color: #e0493b; }

/* Home page guide directory */
.guide-directory { padding: clamp(56px, 7vw, 96px) max(18px, calc((100% - 1240px) / 2)); border-top: 1px solid var(--line); }
.guide-directory h2 { font: 900 clamp(2.4rem, 5vw, 4rem)/.95 "Barlow Condensed", sans-serif; text-transform: uppercase; color: var(--cream); margin: .3rem 0 1.4rem; }
.guide-directory .dir-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.guide-directory .dir-grid a { display: block; padding: 1rem 1.1rem; border: 1px solid var(--line); background: #1d1a14; color: var(--paper); text-decoration: none; }
.guide-directory .dir-grid a:hover { border-color: var(--brass); }
.guide-directory .dir-grid b { display: block; font: 800 1.3rem "Barlow Condensed", sans-serif; text-transform: uppercase; color: var(--cream); letter-spacing: .03em; }
.guide-directory .dir-grid span { font: 400 .95rem/1.45 "Source Serif 4", Georgia, serif; color: #bdb29b; }

@media (max-width: 1100px) { .g-top nav a { padding: .5rem .4rem; font-size: .94rem; } .g-top .g-steam { display: none; } }
@media (max-width: 960px) {
  .g-menu { display: inline-flex; align-items: center; }
  .g-top nav { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; padding: .4rem 18px 1rem; background: #15130ff7; border-bottom: 1px solid var(--line); }
  .g-top nav.open { display: flex; }
  .g-top nav a { padding: .8rem 0; border-bottom: 1px solid var(--line); font-size: 1.1rem; }
  .g-body { grid-template-columns: 1fr; gap: 18px; }
  .g-toc { position: static; flex-direction: row; flex-wrap: wrap; gap: .4rem; }
  .g-toc b { width: 100%; margin: 0; }
  .g-toc a { border: 1px solid var(--line); padding: .3rem .6rem; font-size: .92rem; }
  .g-feed-grid, .guide-directory .dir-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-foot { grid-template-columns: 1fr; }
  .g-foot nav { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .g-grid, .g-feed-grid, .guide-directory .dir-grid { grid-template-columns: 1fr; }
  .g-body { width: calc(100% - 32px); }
  .g-hero { min-height: 0; padding: 28px 16px 22px; }
  .g-article { font-size: 1rem; }
}

/* Home page header on small screens: the original stylesheet never collapsed the nav. */
.topbar nav a { white-space: nowrap; }
@media (max-width: 1180px) { .topbar nav { gap: 18px; } .topbar .steam-link { display: none; } }
@media (max-width: 980px) {
  .topbar .menu { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; letter-spacing: .12em; }
  .topbar nav { display: none; position: absolute; top: 78px; left: 0; right: 0; flex-direction: column; gap: 0; padding: 6px 18px 14px; background: #15130ff7; border-bottom: 1px solid var(--line); }
  .topbar nav.open { display: flex; }
  .topbar nav a { padding: 13px 0; font-size: 15px; border-bottom: 1px solid var(--line); }
}
/* Readability floor for the small labels on the home page. */
.cgn-brand small { font-size: 11.5px; }
.topbar nav a { font-size: 13px; }
.steam-link { font-size: 12px; }
.hero .eyebrow, .hero-actions .button { font-size: 12.5px; }
.perk-table .perk-head { font-size: 12px; }
.section-label { font-size: 12px; }
.kicker, .hero .eyebrow { font-size: 12.5px; }
.hero-card dt, .hero .scroll { font-size: 12px; }
.battlefield-art span, .arsenal-grid b { font-size: 12px; }
@media (max-width: 700px) {
  .section-head { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .arsenal-grid { grid-template-columns: minmax(0, 1fr); }
  .battlefield-art span { right: 16px; left: 16px; bottom: 16px; }
}
/* Remaining 9-10px labels on the home page, lifted to a readable size. */
.fact-row span, .class-tabs button small, .class-visual > div > span, .class-perks > span, .callin-grid .head,
.xp-lead span, .unlock-paths article > span, .ballistics-grid article > b, .range-cards span,
.gallery-status b, .gallery-status span, .gallery-caption span, section.gallery > p, section.gallery > p span,
body > footer p, body > footer p a, body > footer > a { font-size: 12px; }