/* Agent and map pages (routes/guides.js), Facet look */
:root { --g: #10141A; --s1: #171C24; --s2: #1E2530; --s3: #26303D; --ink: #ECE8E1; --ink2: #BDB8AF; --ink3: #8E949C; --red: #FF4655; --win: #3ED1B3; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--g); color: var(--ink); font: 17px/1.6 'Archivo', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--ink); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
img { max-width: 100%; }
.g-skip { position: absolute; left: -9999px; }
.g-skip:focus { left: 16px; top: 16px; padding: 10px 14px; background: var(--red); color: var(--g); z-index: 2; }
.g-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; max-width: 1240px; margin: 0 auto; padding: 22px 32px; }
.g-brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; font-stretch: 112%; font-size: 22px; text-decoration: none; }
.g-brand span { width: 22px; height: 22px; background: var(--red); clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%); }
.g-top nav { display: flex; gap: 4px; flex-wrap: wrap; }
.g-top nav a { padding: 8px 12px; color: var(--ink2); font-weight: 600; text-decoration: none; }
.g-top nav a:hover { color: var(--ink); }
.g-crumbs { max-width: 1240px; margin: 0 auto; padding: 0 32px; color: var(--ink3); font-size: 14px; }
.g-crumbs a { color: var(--ink3); }
.g-main { max-width: 1240px; margin: 0 auto; padding: 16px 32px 64px; }
h1 { margin: 8px 0 12px; font-size: clamp(40px, 7vw, 76px); font-weight: 800; font-stretch: 112%; line-height: 1; letter-spacing: -.02em; }
h2 { margin: 48px 0 14px; font-size: 28px; font-weight: 800; line-height: 1.15; }
h3 { margin: 28px 0 10px; font-size: 20px; font-weight: 800; }
.g-lead { max-width: 64ch; color: var(--ink2); font-size: 19px; }
.g-kicker { font-weight: 700; color: var(--red); }
.g-hero { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 32px; align-items: end; padding: 32px; background: var(--s1); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); overflow: hidden; }
.g-hero > img { display: block; justify-self: end; max-height: 420px; width: auto; }
.g-hero-map { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; }
.g-hero-map > img { max-height: none; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.g-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px; }
.g-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; background: var(--s1); text-decoration: none; transition: background .2s cubic-bezier(.2, .8, .2, 1); }
.g-card:hover { background: var(--s2); }
.g-card b { font-size: 18px; }
.g-card span { color: var(--ink3); font-size: 14px; }
.g-grid-maps { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.g-map img { width: 100%; aspect-ratio: 16 / 5; object-fit: cover; }
.g-abilities { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 4px; }
.g-abilities article { display: flex; gap: 14px; padding: 16px; background: var(--s1); }
.g-abilities p { margin: 4px 0 0; color: var(--ink2); font-size: 15px; }
.g-key { display: inline-block; min-width: 26px; padding: 0 6px; margin-left: 6px; background: var(--s3); color: var(--ink2); font-size: 13px; text-align: center; }
.g-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.g-stats div { display: flex; flex-direction: column; padding: 16px; background: var(--s1); }
.g-stats span { color: var(--ink3); font-size: 14px; }
.g-stats b { font-size: 34px; font-stretch: 78%; font-variant-numeric: tabular-nums; }
.g-note { color: var(--ink3); font-size: 14px; }
.g-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 4px; }
.g-list li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--s1); }
.g-list span { color: var(--ink3); font-size: 14px; }
.g-inline { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.g-minimap { background: var(--s1); padding: 12px; }
.g-foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; max-width: 1240px; margin: 0 auto; padding: 24px 32px 40px; border-top: 1px solid var(--s3); color: var(--ink3); font-size: 14px; }
.g-foot p { margin: 0; }
@media (max-width: 860px) {
    .g-top, .g-crumbs, .g-main, .g-foot { padding-left: 16px; padding-right: 16px; }
    .g-hero, .g-hero-map { grid-template-columns: minmax(0, 1fr); padding: 20px; }
    .g-hero > img { justify-self: center; max-height: 300px; }
    .g-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}