@font-face {
  font-family:Barlow;
  src:url('../media/art/fonts/body.ttf') format('truetype');
  font-weight:400;
  font-display:swap;
}

@font-face {
  font-family:Barlow;
  src:url('../media/art/fonts/body_bold.ttf') format('truetype');
  font-weight:700;
  font-display:swap;
}

@font-face {
  font-family:Display;
  src:url('../media/art/fonts/display.ttf') format('truetype');
  font-weight:700;
  font-display:swap;
}

@font-face {
  font-family:UI;
  src:url('../media/art/fonts/ui_bold.ttf') format('truetype');
  font-weight:700;
  font-display:swap;
}

:root {
  color-scheme:dark;
  --line:#30425c;
  --muted:#a7bdd0;
  --accent:var(--cyan);
  --content:1280px;
}

* {
  box-sizing:border-box;
}

html {
  scroll-padding-top:100px;
}

body {
  margin:0;
  background:var(--night);
  color:var(--paper);
  font-family:Barlow,Arial,sans-serif;
  font-size:17px;
  line-height:1.6;
}

body:before {
  content:'';
  position:absolute;
  inset:0 0 auto;
  height:800px;
  pointer-events:none;
  background:radial-gradient(ellipse at 80% 5%,#1a8c9c19,transparent 60%);
  z-index:-1;
}

a {
  color:var(--cyan-soft);
  text-decoration:none;
}

a:hover {
  color:white;
}

button,input,select {
  font:inherit;
}

button,a,input,select {
  touch-action:manipulation;
}

button {
  cursor:pointer;
}

a,button,input,select {
  outline-offset:5px;
}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible {
  outline:2px solid var(--cyan);
}

::selection {
  background:var(--teal);
  color:white;
}

[hidden] {
  display:none!important;
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.skip-link {
  position:fixed;
  top:8px;
  left:8px;
  z-index:100;
  background:var(--paper);
  color:var(--ink);
  padding:10px 20px;
  transform:translateY(-150%);
}

.skip-link:focus {
  transform:none;
}

.site-header {
  position:sticky;
  top:0;
  z-index:30;
  border-bottom:1px solid var(--line);
  background:#0d1424f5;
  backdrop-filter:blur(16px);
}

.header-inner {
  max-width:1440px;
  margin:auto;
  min-height:88px;
  padding:0 36px;
  display:flex;
  align-items:center;
  gap:38px;
}

.brand {
  display:flex;
  gap:13px;
  align-items:center;
  color:var(--paper);
  font:700 22px/1 UI,Barlow,sans-serif;
  letter-spacing:.03em;
  flex-shrink:0;
}

.brand small {
  display:block;
  font:700 10px/1.5 Barlow,sans-serif;
  letter-spacing:.22em;
  color:var(--paper-dim);
  margin-top:7px;
}

.brand-mark {
  font:700 34px/1 Display,sans-serif;
  letter-spacing:-4px;
  display:grid;
  grid-auto-flow:column;
  align-items:center;
  width:53px;
  height:48px;
  border:1px solid var(--slate-light);
  transform:skew(-7deg);
  padding-right:4px;
  background:var(--navy);
}

.brand-mark span {
  color:var(--cyan);
  font-size:42px;
}

nav {
  display:flex;
  gap:25px;
  align-self:stretch;
  align-items:center;
}

nav a {
  font-size:15px;
  font-weight:700;
  position:relative;
  color:var(--paper-dim);
  padding:30px 0;
}

nav a[aria-current] {
  color:var(--paper);
}

nav a[aria-current]:after {
  content:'';
  position:absolute;
  bottom:0;
  height:3px;
  background:var(--cyan);
  left:0;
  right:0;
}

.header-search {
  position:relative;
  margin-left:auto;
  max-width:210px;
}

.header-search input {
  width:100%;
  background:#17233a80;
  border:1px solid var(--line);
  padding:10px 36px 10px 14px;
  border-radius:4px;
  color:var(--paper);
  font-size:14px;
}

.header-search kbd {
  position:absolute;
  right:11px;
  top:9px;
  border:1px solid var(--line);
  border-radius:3px;
  padding:0 5px;
  color:var(--muted);
  font:13px/22px Barlow;
}

.menu-toggle {
  display:none;
}

main {
  max-width:var(--content);
  margin:0 auto;
  padding:48px 40px 80px;
  min-height:70vh;
}

h1,h2,h3,h4 {
  font-family:Display,Barlow,sans-serif;
  font-weight:700;
  line-height:1.08;
  letter-spacing:.01em;
  margin:0 0 20px;
}

h1 {
  font-size:clamp(48px,5.5vw,80px);
}

h2 {
  font-size:36px;
  margin-top:44px;
}

h3 {
  font-size:28px;
}

p {
  margin:0 0 22px;
}

p:last-child {
  margin-bottom:0;
}

.eyebrow {
  font:700 12px/1.5 Barlow,sans-serif;
  text-transform:uppercase;
  letter-spacing:.17em;
  color:var(--cyan);
  display:block;
  margin-bottom:12px;
}

.lead {
  font-size:20px;
  line-height:1.6;
  color:var(--muted);
  max-width:640px;
}

.section-note {
  font-size:16px;
  color:var(--paper-dim);
  margin-top:-8px;
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin:60px 0 24px;
}

.section-heading h2 {
  margin:6px 0 0;
  font-size:42px;
}

.section-heading>a,.section-heading>span {
  font-size:14px;
  flex-shrink:0;
}

.section-heading>span {
  color:var(--muted);
}

.button {
  display:inline-flex;
  justify-content:space-between;
  align-items:center;
  gap:32px;
  padding:14px 22px;
  font-weight:700;
  font-size:15px;
  border:1px solid var(--line);
  border-radius:3px;
  min-height:50px;
}

.button.primary {
  background:var(--cyan);
  color:var(--ink);
  border-color:var(--cyan);
}

.button.primary:hover {
  background:var(--cyan-soft);
}

.button.secondary {
  color:var(--paper);
  background:var(--navy);
}

.home-hero {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  align-items:center;
  min-height:440px;
  position:relative;
  padding:18px 0 45px;
}

.home-hero h1 {
  font-size:clamp(58px,6.8vw,90px);
  letter-spacing:-.015em;
  line-height:.99;
  margin:24px 0;
}

.home-hero h1 em {
  font-style:normal;
  color:var(--cyan);
}

.home-hero .lead {
  max-width:490px;
  font-size:19px;
}

.hero-copy {
  position:relative;
  z-index:2;
}

.hero-actions {
  display:flex;
  gap:14px;
  margin-top:32px;
  flex-wrap:wrap;
}

.status-dot {
  display:inline-block;
  background:var(--cyan);
  width:7px;
  height:7px;
  border-radius:50%;
  margin-right:8px;
  box-shadow:0 0 12px #2ee6ff60;
}

.hero-art {
  height:390px;
  position:relative;
  isolation:isolate;
}

.hero-art:before {
  content:'';
  position:absolute;
  inset:30px 0;
  background:radial-gradient(ellipse,#2ee6ff17,transparent 70%);
}

.orbit {
  position:absolute;
  border:1px solid #3b507060;
  width:290px;
  height:290px;
  left:20%;
  top:45px;
  transform:rotate(-20deg);
  border-radius:50%;
}

.orbit-two {
  width:360px;
  height:360px;
  left:13%;
  top:10px;
  border-style:dashed;
  opacity:.6;
}

.hero-gun {
  position:absolute;
  width:100%;
  height:250px;
  filter:drop-shadow(10px 24px 15px #0008);
}

.gun-one {
  top:0;
  left:0;
  transform:rotate(-12deg);
  z-index:2;
}

.gun-two {
  top:146px;
  left:15px;
  transform:rotate(13deg);
  z-index:1;
}

.hero-gun .game-art {
  width:100%;
  height:100%;
}

.art-caption {
  position:absolute;
  bottom:-1px;
  right:0;
  font:700 10px/1.5 Barlow;
  letter-spacing:.17em;
  color:var(--paper-dim);
}

.index-strip {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);
  background:#17233a60;
}

.index-strip a {
  display:flex;
  align-items:center;
  gap:16px;
  padding:17px 24px;
  color:var(--paper);
  border-right:1px solid var(--line);
}

.index-strip a:last-child {
  border:0;
}

.index-strip strong {
  font:700 36px/1 Display;
  color:var(--cyan);
}

.index-strip span {
  text-transform:uppercase;
  font:700 12px/1 Barlow;
  letter-spacing:.12em;
}

.index-strip b {
  margin-left:auto;
  color:var(--paper-dim);
}

.index-strip a:hover {
  background:var(--navy);
}

.card-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}

.entry-card {
  position:relative;
  color:var(--paper);
  background:linear-gradient(140deg,#1b2b42,#121d30);
  border:1px solid var(--line);
  border-radius:4px;
  overflow:hidden;
  transition:border-color .16s,transform .16s,background .16s;
}

.entry-card:hover {
  border-color:var(--accent);
  transform:translateY(-3px);
  background:linear-gradient(140deg,#213b51,#14243b);
}

.entry-card.revenant {
  --accent:var(--heal);
}

.card-art {
  height:190px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:26px 30px 8px;
  background:radial-gradient(ellipse at center,#8fb3c912,transparent 70%);
}

.game-art {
  display:block;
  width:100%;
  height:100%;
  overflow:hidden;
}

.card-art .game-art {
  max-width:220px;
  filter:drop-shadow(0 9px 6px #0005);
}

.card-copy {
  position:relative;
  padding:22px 24px 28px;
}

.card-copy h3 {
  font-size:30px;
  margin-bottom:10px;
  padding-right:18px;
}

.card-copy p {
  color:var(--muted);
  font-size:15px;
  line-height:1.55;
}

.card-copy .eyebrow {
  font-size:10px;
  margin-bottom:10px;
  color:var(--accent);
}

.card-arrow {
  position:absolute;
  right:22px;
  top:23px;
  color:var(--accent);
  font-size:20px;
}

.class-showcase .card-art {
  height:230px;
  padding-top:30px;
}

.class-showcase .entry-card {
  border-top:3px solid var(--accent);
}

.class-showcase .card-copy {
  min-height:185px;
}

.class-showcase .revenant .card-art {
  background:radial-gradient(ellipse,#39e6a81c,transparent 70%);
}

.weapon-showcase {
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.weapon-showcase .card-art {
  height:160px;
  padding:20px;
}

.weapon-showcase .card-copy {
  padding:20px;
}

.weapon-showcase h3 {
  font-size:26px;
}

.weapon-showcase .card-arrow {
  right:15px;
  top:18px;
}

.weapon-showcase .eyebrow {
  display:none;
}

.upgrade-feature {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:50px;
  margin:70px 0 0;
  padding:44px;
  background:linear-gradient(110deg,#192b41,#152337);
  border:1px solid var(--line);
  border-left:3px solid var(--amber);
  position:relative;
}

.upgrade-feature h2 {
  margin-top:8px;
  font-size:52px;
}

.upgrade-feature p {
  color:var(--muted);
  max-width:420px;
}

.upgrade-feature .eyebrow {
  color:var(--amber);
}

.upgrade-mosaic {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  transform:rotate(-6deg);
}

.upgrade-mosaic .game-art {
  height:125px;
  filter:drop-shadow(0 9px 4px #0005);
}

.bottom-links {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  margin:55px 0;
}

.bottom-links>a {
  padding:30px 0;
  border-top:1px solid var(--line);
}

.bottom-links h2 {
  font-size:34px;
  margin:0 0 12px;
  color:var(--paper);
}

.bottom-links p {
  color:var(--muted);
}

.development-note {
  padding:22px 26px;
  border:1px solid var(--line);
  font-size:14px;
  color:var(--paper-dim);
  background:#17233a60;
}

.development-note strong {
  display:block;
  color:var(--paper);
  font:700 14px/1.6 Barlow;
  margin-bottom:6px;
  letter-spacing:.1em;
}

.development-note a {
  white-space:nowrap;
}

.catalogue-intro {
  padding:20px 0 30px;
  border-bottom:1px solid var(--line);
  margin-bottom:30px;
}

.catalogue-intro h1 {
  margin-bottom:18px;
}

.catalogue-tools {
  display:flex;
  gap:20px;
  align-items:flex-end;
  margin-bottom:30px;
  padding:20px 24px;
  background:#17233a90;
  border:1px solid var(--line);
  border-radius:4px;
}

.catalogue-tools label,.search-panel>label {
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.07em;
  font-weight:700;
  color:var(--muted);
}

.catalogue-tools input,.catalogue-tools select,.search-panel>input {
  padding:10px 14px;
  min-height:46px;
  border:1px solid var(--slate-mid);
  border-radius:3px;
  background:var(--night);
  color:var(--paper);
  font-size:16px;
  min-width:240px;
}

.catalogue-tools select {
  cursor:pointer;
}

.result-count {
  font-size:14px;
  color:var(--muted);
  margin-left:auto;
  padding-bottom:10px;
  white-space:nowrap;
}

.catalogue.upgrades,.compact {
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.catalogue.upgrades .entry-card,.compact .entry-card {
  display:grid;
  grid-template-columns:88px minmax(0,1fr);
  align-items:start;
  padding:20px 14px;
  gap:10px;
}

.catalogue.upgrades .card-art,.compact .card-art {
  height:88px;
  padding:6px 0;
}

.catalogue.upgrades .card-copy,.compact .card-copy {
  padding:0 8px;
}

.catalogue.upgrades h3,.compact h3 {
  font-size:26px;
  padding-right:12px;
}

.catalogue.upgrades .card-arrow,.compact .card-arrow {
  right:0;
  top:23px;
  font-size:16px;
}

.catalogue.upgrades p,.compact p {
  font-size:14px;
}

.catalogue.classes .card-art {
  height:240px;
}

.catalogue.enemies {
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.enemy-art {
  width:100%;
  height:100%;
  object-fit:contain;
}

.enemies .card-art {
  height:180px;
  padding:10px;
}

.art-pending {
  color:var(--slate-light);
  font:700 70px Display;
}

.empty-state {
  padding:60px;
  text-align:center;
  color:var(--muted);
  border:1px dashed var(--line);
}

.detail-hero {
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  align-items:center;
  gap:60px;
  padding:24px 0 38px;
  margin-bottom:36px;
  border-bottom:1px solid var(--line);
}

.detail-hero h1 {
  margin:18px 0 20px;
  font-size:clamp(52px,6vw,84px);
}

.detail-art {
  height:245px;
  padding:12px;
  position:relative;
  isolation:isolate;
}

.detail-art:before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(ellipse,#2ee6ff15,transparent 70%);
}

.detail-art .game-art {
  filter:drop-shadow(0 13px 10px #0008);
}

.detail-hero.revenant .detail-art:before {
  background:radial-gradient(ellipse,#39e6a825,transparent 70%);
}

.detail-hero .lead {
  font-size:20px;
}

.back-link {
  color:var(--muted);
}

.tag {
  display:inline-block;
  background:#2ee6ff0c;
  border:1px solid #2ee6ff38;
  color:var(--cyan-soft);
  border-radius:3px;
  padding:5px 10px;
  font-size:12px;
  letter-spacing:.07em;
  text-transform:uppercase;
  font-weight:700;
}

.requirements {
  margin-top:20px;
  font-size:16px;
  color:var(--muted);
}

.term {
  color:var(--cyan-soft);
  border-bottom:1px solid #7ff3ff50;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

.term:hover {
  border-bottom-color:var(--cyan);
  background:#2ee6ff0d;
}

.term.spectral {
  color:var(--heal);
  border-color:#39e6a860;
}

.term.shield {
  color:#8ab6ff;
  border-color:#4a8cff80;
}

.game-art.inline-icon {
  display:inline-block;
  width:1.45em;
  height:1.45em;
  vertical-align:-.35em;
  margin:-.15em .18em -.15em .02em;
  filter:drop-shadow(0 2px 1px #0008);
}

.fact-number {
  color:var(--paper);
  font-weight:700;
  font-variant-numeric:tabular-nums;
  background:#2ee6ff10;
  padding:1px 3px;
  border-radius:2px;
  white-space:nowrap;
}

.rank-list {
  display:grid;
  gap:16px;
}

.rank {
  display:flex;
  gap:26px;
  align-items:center;
  padding:28px 32px;
  border:1px solid var(--line);
  border-left:3px solid var(--cyan);
  background:linear-gradient(110deg,#172b41,#121d30);
}

.rank-number {
  font:700 64px/1 Display;
  color:var(--cyan);
  min-width:58px;
}

.rank h3 {
  font-size:24px;
  margin-bottom:10px;
}

.rank p {
  font-size:19px;
  line-height:1.8;
}

.table-wrap {
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:4px;
}

.rank-table {
  border-collapse:collapse;
  width:100%;
  text-align:left;
}

.rank-table thead {
  background:var(--slate);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.14em;
}

.rank-table th,.rank-table td {
  padding:22px 28px;
}

.rank-table tbody th {
  width:160px;
  min-width:120px;
  background:#17233a90;
  vertical-align:middle;
  border-right:1px solid var(--line);
}

.rank-table tbody td {
  font-size:18px;
  line-height:1.9;
  background:#17233a30;
}

.rank-table tbody tr+tr {
  border-top:1px solid var(--line);
}

.rank-table tbody tr:hover td {
  background:#2ee6ff08;
}

.rank-label {
  font:700 24px Display;
  white-space:nowrap;
}

.rank-meter {
  display:block;
  background:var(--slate);
  height:4px;
  margin-top:12px;
  width:90px;
  border-radius:1px;
  overflow:hidden;
}

.rank-meter:before {
  content:'';
  display:block;
  height:100%;
  background:var(--cyan);
  width:calc(100% * var(--rank) / var(--max));
}

.stat-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;
  border:1px solid var(--line);
  background:var(--line);
  margin-bottom:42px;
}

.stat {
  display:flex;
  flex-direction:column;
  padding:24px;
  background:var(--navy);
}

.stat>span {
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:var(--muted);
}

.stat>strong {
  font:700 48px/1.2 Display;
  color:var(--cyan);
  margin:9px 0 4px;
}

.stat>small {
  color:var(--muted);
  font-size:13px;
  min-height:20px;
}

.handling-list {
  border-top:1px solid var(--line);
}

.handling-list section {
  display:grid;
  grid-template-columns:210px minmax(0,1fr);
  padding:24px 0;
  gap:24px;
  border-bottom:1px solid var(--line);
}

.handling-list h3 {
  font-size:25px;
  margin:0;
}

.handling-list p {
  color:var(--muted);
}

.ability-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}

.ability {
  display:grid;
  grid-template-columns:85px minmax(0,1fr);
  gap:20px;
  padding:26px;
  background:var(--navy);
  border:1px solid var(--line);
  border-radius:4px;
}

.ability>.game-art {
  height:92px;
  filter:drop-shadow(0 6px 3px #0005);
}

.ability h3 {
  margin:0 0 14px;
  font-size:29px;
  scroll-margin-top:105px;
}

.ability p {
  font-size:16px;
  color:var(--muted);
  line-height:1.8;
}

.ability .tag {
  margin-top:18px;
  font-size:10px;
}

.enemy-facts {
  display:flex;
  align-items:center;
  gap:28px;
  margin-bottom:32px;
}

.enemy-facts .stat {
  min-width:200px;
  border:1px solid var(--line);
}

.enemy-facts>p {
  max-width:480px;
  color:var(--muted);
}

.field-note {
  padding:28px 32px;
  background:#ff8a2b0b;
  border-left:3px solid var(--amber);
}

.field-note h2 {
  margin:0 0 14px;
  font-size:32px;
  color:var(--amber);
}

.provenance {
  margin-top:42px;
  border-top:1px solid var(--line);
  padding-top:18px;
  font-size:13px;
  color:var(--muted);
}

.mechanic-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 40px;
}

.mechanic {
  padding:28px 0;
  border-bottom:1px solid var(--line);
}

.mechanic h2 {
  font-size:31px;
  margin:0 0 16px;
}

.mechanic>p {
  color:var(--muted);
  line-height:1.9;
}

.mechanic-detail {
  max-width:850px;
  font-size:23px;
  line-height:1.95;
  color:var(--muted);
}

.page-mechanics .detail-art:has(> :only-child) {
  height:210px;
}

.page-source main {
  overflow-wrap:anywhere;
}

.page-source main>ul {
  padding:24px 24px 24px 44px;
  background:var(--navy);
  border:1px solid var(--line);
}

.page-source code {
  color:var(--cyan-soft);
  font-size:14px;
}

.search-panel {
  max-width:900px;
}

.search-panel>input {
  width:100%;
  margin:10px 0 20px;
  padding:16px 20px;
  font-size:20px;
}

.search-panel>p {
  color:var(--muted);
  font-size:14px;
}

#mkdocs-search-results article {
  border-top:1px solid var(--line);
  padding:25px 0;
}

#mkdocs-search-results h2 {
  font-size:29px;
  margin:0 0 12px;
}

#mkdocs-search-results p {
  color:var(--muted);
  font-size:16px;
}

.site-footer {
  max-width:var(--content);
  margin:auto;
  padding:30px 40px 44px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:25px;
  flex-wrap:wrap;
  font-size:12px;
  color:var(--paper-dim);
}

.footer-brand {
  font:700 17px Display;
  color:var(--paper);
}

.footer-brand span {
  color:var(--paper-dim);
}

.site-footer p {
  margin:0;
}

.site-footer>a:last-child {
  margin-left:auto;
}

@media(min-width:1500px) {
  :root {
    --content:1380px;
  }
  .home-hero {
    min-height:490px;
  }
  .home-hero h1 {
    font-size:100px;
  }
  .hero-art {
    height:430px;
  }
  .hero-gun {
    height:280px;
  }
  .gun-two {
    top:160px;
  }
}

@media(max-width:1150px) {
  .header-inner {
    gap:25px;
    padding:0 24px;
  }
  nav {
    gap:18px;
  }
  .brand {
    font-size:19px;
  }
  .header-search {
    max-width:170px;
  }
  .weapon-showcase {
    grid-template-columns:repeat(2,1fr);
  }
  .catalogue.upgrades,.compact {
    grid-template-columns:repeat(2,1fr);
  }
  .catalogue.enemies {
    grid-template-columns:repeat(3,1fr);
  }
  .home-hero h1 {
    font-size:68px;
  }
  .hero-gun {
    height:200px;
  }
  .gun-two {
    top:160px;
  }
  .hero-actions {
    gap:10px;
  }
  .hero-actions .button {
    font-size:14px;
    padding:12px 16px;
  }
  .index-strip a {
    padding:18px;
  }
  .index-strip span {
    font-size:10px;
  }
  .ability {
    grid-template-columns:65px minmax(0,1fr);
    gap:16px;
    padding:22px;
  }
  .upgrade-feature {
    gap:30px;
    padding:32px;
  }
  .upgrade-feature h2 {
    font-size:44px;
  }
  .upgrade-mosaic {
    gap:14px;
  }
  .upgrade-mosaic .game-art {
    height:100px;
  }
}

@media(max-width:900px) {
  .header-inner {
    flex-wrap:wrap;
    gap:12px;
    padding:16px 24px;
  }
  .brand {
    margin-right:auto;
  }
  .menu-toggle {
    display:flex;
    gap:12px;
    align-items:center;
    color:var(--paper);
    background:var(--navy);
    border:1px solid var(--line);
    border-radius:3px;
    padding:8px 12px;
    font-size:14px;
  }
  .header-search {
    max-width:220px;
    margin-left:8px;
  }
  .site-header nav {
    display:none;
    order:4;
    width:100%;
    gap:24px;
    flex-wrap:wrap;
    border-top:1px solid var(--line);
    padding-top:12px;
  }
  .site-header.menu-open nav {
    display:flex;
  }
  .site-header nav a {
    padding:10px 0;
  }
  .home-hero {
    grid-template-columns:1.2fr 1fr;
  }
  .home-hero h1 {
    font-size:58px;
  }
  .hero-art {
    height:330px;
  }
  .hero-gun {
    height:180px;
  }
  .gun-two {
    top:130px;
  }
  .orbit {
    width:210px;
    height:210px;
    left:12%;
    top:40px;
  }
  .orbit-two {
    width:260px;
    height:260px;
    left:3%;
    top:15px;
  }
  .art-caption {
    font-size:8px;
  }
  .hero-actions {
    flex-direction:column;
    align-items:flex-start;
  }
  .home-hero .lead {
    font-size:17px;
  }
  .class-showcase,.catalogue.classes {
    grid-template-columns:1fr;
  }
  .class-showcase .entry-card,.catalogue.classes .entry-card {
    display:grid;
    grid-template-columns:200px minmax(0,1fr);
    align-items:center;
  }
  .class-showcase .card-art,.catalogue.classes .card-art {
    height:210px;
    padding:20px;
  }
  .class-showcase .card-copy {
    min-height:0;
  }
  .index-strip a {
    padding:16px 12px;
    gap:10px;
  }
  .index-strip strong {
    font-size:30px;
  }
  .index-strip b {
    display:none;
  }
  .detail-hero {
    grid-template-columns:1fr 220px;
    gap:30px;
  }
  .detail-art {
    height:200px;
  }
  .ability-grid {
    grid-template-columns:1fr;
  }
  .ability {
    grid-template-columns:85px minmax(0,1fr);
  }
  .mechanic-grid {
    gap:0 24px;
  }
  .catalogue-tools {
    flex-wrap:wrap;
  }
  .catalogue-tools label {
    flex:1;
  }
  .catalogue-tools input,.catalogue-tools select {
    min-width:0;
    width:100%;
  }
  .bottom-links {
    gap:25px;
  }
  .bottom-links h2 {
    font-size:30px;
  }
}

@media(max-width:620px) {
  body {
    font-size:16px;
  }
  .header-inner {
    padding:12px 20px;
    gap:10px;
  }
  .brand {
    font-size:18px;
    gap:10px;
  }
  .brand-mark {
    width:43px;
    height:40px;
    font-size:28px;
  }
  .brand-mark span {
    font-size:35px;
  }
  .brand small {
    font-size:9px;
    margin-top:5px;
  }
  .header-search {
    max-width:none;
    width:100%;
    margin:0;
    order:3;
  }
  .header-search input {
    min-height:42px;
    font-size:15px;
  }
  .site-header nav {
    gap:16px;
  }
  .site-header nav a {
    font-size:14px;
  }
  main {
    padding:26px 20px 50px;
  }
  h1 {
    font-size:48px;
  }
  h2 {
    font-size:32px;
    margin-top:34px;
  }
  .eyebrow {
    font-size:10px;
  }
  .lead {
    font-size:18px;
  }
  .home-hero {
    display:flex;
    flex-direction:column;
    padding:8px 0 26px;
    min-height:0;
    align-items:stretch;
  }
  .home-hero h1 {
    font-size:clamp(49px,11vw,68px);
    margin:18px 0;
  }
  .home-hero .lead {
    font-size:18px;
  }
  .hero-actions {
    flex-direction:row;
    align-items:stretch;
    margin-top:24px;
  }
  .hero-actions .button {
    flex:1;
    gap:15px;
    font-size:13px;
    padding:12px;
  }
  .hero-art {
    height:245px;
    margin-top:24px;
    max-width:420px;
    width:100%;
    align-self:center;
  }
  .hero-gun {
    height:170px;
    width:90%;
  }
  .gun-one {
    top:0;
    left:0;
  }
  .gun-two {
    top:75px;
    left:10%;
  }
  .orbit {
    width:190px;
    height:190px;
    left:23%;
    top:16px;
  }
  .orbit-two {
    width:225px;
    height:225px;
    left:18%;
    top:0;
  }
  .art-caption {
    font-size:8px;
    bottom:0;
  }
  .index-strip {
    grid-template-columns:1fr 1fr;
  }
  .index-strip a {
    padding:18px 20px;
    gap:14px;
    border-bottom:1px solid var(--line);
  }
  .index-strip a:nth-child(2) {
    border-right:0;
  }
  .index-strip a:nth-child(3) {
    border-bottom:0;
  }
  .index-strip span {
    font-size:11px;
  }
  .section-heading {
    margin-top:40px;
    gap:16px;
  }
  .section-heading h2 {
    font-size:32px;
  }
  .section-heading>a {
    font-size:12px;
  }
  .card-grid,.catalogue.upgrades,.compact,.catalogue.enemies {
    grid-template-columns:1fr;
    gap:14px;
  }
  .class-showcase .entry-card,.catalogue.classes .entry-card {
    grid-template-columns:112px minmax(0,1fr);
  }
  .class-showcase .card-art,.catalogue.classes .card-art {
    height:155px;
    padding:18px 5px 18px 15px;
  }
  .class-showcase .card-copy,.catalogue.classes .card-copy {
    padding:22px 20px 22px 12px;
  }
  .card-copy h3 {
    font-size:28px;
  }
  .card-copy p {
    font-size:14px;
  }
  .weapon-showcase {
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  .weapon-showcase .card-art {
    height:125px;
    padding:14px;
  }
  .weapon-showcase .card-copy {
    padding:16px;
  }
  .weapon-showcase h3 {
    font-size:23px;
    padding-right:0;
  }
  .weapon-showcase .card-arrow {
    display:none;
  }
  .weapon-showcase p {
    font-size:13px;
  }
  .upgrade-feature {
    grid-template-columns:1fr;
    margin-top:40px;
    padding:26px;
    gap:30px;
  }
  .upgrade-feature h2 {
    font-size:42px;
  }
  .upgrade-mosaic {
    transform:rotate(-4deg);
    gap:18px;
  }
  .upgrade-mosaic .game-art {
    height:80px;
  }
  .bottom-links {
    grid-template-columns:1fr;
    gap:10px;
    margin:30px 0;
  }
  .bottom-links>a {
    padding:24px 0;
  }
  .development-note {
    padding:20px;
    font-size:13px;
  }
  .development-note a {
    white-space:normal;
  }
  .catalogue-intro {
    padding-top:8px;
    margin-bottom:22px;
  }
  .catalogue-intro h1 {
    font-size:47px;
  }
  .catalogue-tools {
    padding:16px;
    gap:12px;
  }
  .catalogue-tools label {
    flex-basis:100%;
  }
  .result-count {
    padding:0;
  }
  .catalogue.weapons {
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  .catalogue.weapons .card-art {
    height:130px;
    padding:15px;
  }
  .catalogue.weapons .card-copy {
    padding:17px;
  }
  .catalogue.weapons h3 {
    font-size:24px;
    padding:0;
  }
  .catalogue.weapons .card-arrow {
    display:none;
  }
  .catalogue.weapons p {
    font-size:13px;
  }
  .catalogue.enemies .entry-card {
    display:grid;
    grid-template-columns:110px minmax(0,1fr);
    align-items:center;
  }
  .catalogue.enemies .card-art {
    height:130px;
    padding:6px;
  }
  .catalogue.enemies .card-copy {
    padding:20px 18px 20px 8px;
  }
  .detail-hero {
    grid-template-columns:minmax(0,1fr) 105px;
    gap:12px;
    padding:12px 0 26px;
    margin-bottom:26px;
    align-items:start;
  }
  .detail-hero h1 {
    font-size:46px;
    margin:14px 0 18px;
    overflow-wrap:anywhere;
  }
  .detail-art {
    height:130px;
    margin-top:24px;
    padding:0;
  }
  .detail-hero .lead {
    font-size:17px;
  }
  .requirements {
    font-size:14px;
    margin-top:14px;
  }
  .tag {
    font-size:10px;
  }
  .rank {
    padding:22px 20px;
    gap:16px;
    align-items:flex-start;
  }
  .rank-number {
    font-size:45px;
    min-width:40px;
  }
  .rank h3 {
    font-size:23px;
  }
  .rank p {
    font-size:17px;
  }
  .rank-table th,.rank-table td {
    padding:18px 15px;
  }
  .rank-table tbody th {
    min-width:82px;
    width:82px;
  }
  .rank-label {
    font-size:21px;
  }
  .rank-meter {
    width:52px;
  }
  .rank-table tbody td {
    font-size:16px;
    line-height:1.9;
  }
  .stat-grid {
    grid-template-columns:repeat(2,1fr);
  }
  .stat {
    padding:20px;
  }
  .stat>strong {
    font-size:40px;
  }
  .handling-list section {
    grid-template-columns:1fr;
    gap:10px;
  }
  .handling-list h3 {
    font-size:26px;
  }
  .ability {
    grid-template-columns:56px minmax(0,1fr);
    gap:16px;
    padding:20px 16px;
  }
  .ability>.game-art {
    height:65px;
  }
  .ability h3 {
    font-size:27px;
  }
  .ability p {
    font-size:16px;
  }
  .ability .tag {
    font-size:9px;
  }
  .enemy-facts {
    flex-direction:column;
    align-items:stretch;
    gap:18px;
  }
  .field-note {
    padding:24px;
  }
  .mechanic-grid {
    grid-template-columns:1fr;
  }
  .mechanic h2 {
    font-size:29px;
  }
  .mechanic-detail {
    font-size:20px;
  }
  .mechanic-detail p {
    line-height:1.9;
  }
  .site-footer {
    padding:25px 20px 35px;
    gap:14px;
    display:block;
  }
  .site-footer p {
    margin:12px 0;
  }
  .site-footer>a:last-child {
    margin-left:0;
  }
  .search-panel>input {
    font-size:17px;
  }
  .section-heading>span {
    font-size:12px;
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    scroll-behavior:auto!important;
    transition:none!important;
  }
}

.card-copy h3 a {
  color:inherit;
}

.card-copy h3 a:hover {
  color:var(--cyan);
}

.hero-art .art-caption {
  bottom:-18px;
}

.text-hero {
  grid-template-columns:1fr;
}

.text-hero .detail-art {
  display:none;
}

.related-mechanics {
  margin-top:45px;
  border-top:1px solid var(--line);
  padding-top:24px;
}

.related-mechanics summary {
  cursor:pointer;
  font:700 30px Display;
  margin-bottom:25px;
}

.related-mechanics summary span {
  font:700 15px Barlow;
  color:var(--cyan);
  margin-left:12px;
}

.related-mechanics .card-art {
  height:90px;
}

.related-mechanics .card-copy h3 {
  font-size:24px;
}


.mechanic-detail {
  font-size: 20px;
  line-height: 1.85;
}
@media (max-width: 620px) {
  .detail-copy {
    display: contents;
  }
  .detail-copy > .back-link,
  .detail-copy > h1 {
    grid-column: 1;
  }
  .detail-copy > .lead,
  .detail-copy > .requirements {
    grid-column: 1 / -1;
  }
  .detail-hero .detail-art {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    margin-top: 0;
  }
  .page-weapons .detail-hero {
    grid-template-columns: 1fr;
  }
  .page-weapons .detail-art {
    grid-column: 1;
    grid-row: auto;
    height: 160px;
    max-width: 360px;
    margin: 8px 0 0;
  }
}

@media (max-width: 380px) {
  .detail-hero {
    grid-template-columns: minmax(0, 1fr) 80px;
  }
  .detail-hero h1 {
    font-size: 38px;
  }
  .text-hero {
    grid-template-columns: 1fr;
  }
}

.art-pending {
  display: grid;
  place-content: center;
  width: 80px;
  height: 80px;
  border: 1px solid var(--slate-mid);
  border-radius: 50%;
  background: repeating-linear-gradient(135deg, transparent 0 8px, #5f78980a 8px 10px);
  font-size: 32px;
  letter-spacing: .05em;
}
.detail-art > .art-pending {
  margin: auto;
}
.enemy-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  border: 1px solid var(--line);
}
.enemy-table thead {
  background: var(--slate);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
}
.enemy-table th, .enemy-table td {
  padding: 18px 22px;
}
.enemy-table .enemy-row {
  background: #17233a60;
  border: 0;
  border-bottom: 1px solid var(--line);
  transform: none;
}
.enemy-table .enemy-row:hover {
  background: #213b5160;
}
.enemy-ident {
  min-width: 230px;
}
.enemy-ident a {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--paper);
  font: 700 25px/1.15 Display;
}
.enemy-ident a:hover {
  color: var(--cyan);
}
.enemy-thumb {
  display: flex;
  align-items: center;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}
.enemy-thumb .art-pending {
  width: 48px;
  height: 48px;
  font-size: 20px;
}
.enemy-family {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .08em;
}
.enemy-hp strong {
  color: var(--cyan);
  font: 700 28px Display;
}
.enemy-hp small {
  display: none;
}
.enemy-description {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}
@media (max-width: 750px) {
  .enemy-table, .enemy-table tbody {
    display: block;
    border: 0;
  }
  .enemy-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .enemy-table .enemy-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 70px;
    margin-bottom: 14px;
    border: 1px solid var(--line);
    padding: 20px;
  }
  .enemy-table td {
    padding: 0;
    min-width: 0;
  }
  .enemy-table .enemy-family {
    display: none;
  }
  .enemy-ident a {
    font-size: 23px;
    gap: 12px;
  }
  .enemy-hp {
    text-align: right;
  }
  .enemy-hp small {
    display: block;
    color: var(--muted);
    font-size: 10px;
  }
  .enemy-description {
    grid-column: 1 / -1;
    margin-top: 16px;
  }
}