@font-face {
  font-display: swap;
  font-family: "Bebas Kai";
  font-style: normal;
  font-weight: 400;
  src: url("fonts/bebaskai.ttf") format("truetype");
}

@font-face {
  font-display: swap;
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 300;
  src: url("fonts/barlowcondensed-light.ttf") format("truetype");
}

@font-face {
  font-display: swap;
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 500;
  src: url("fonts/barlowcondensed-medium.ttf") format("truetype");
}

@font-face {
  font-display: swap;
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  src: url("fonts/barlowcondensed-bold.ttf") format("truetype");
}

:root {
  --accent-rgb: 24, 191, 255;
  --back: #05090c;
  --panel: #0a1116;
  --line: #1a2a34;
  --text: #e6e6e6;
  --muted: #93a5af;
  --cyan: #18bfff;
  --cyan-highlight: #7edbff;
  --cyan-soft: rgba(24, 191, 255, .14);
  --orange: #f7941d;
  --font-body: Arial, Helvetica, sans-serif;
  --font-display: "Bebas Kai";
  --font-mono: "Bebas Kai";
}

html[data-faction-theme="federation"] { --accent-rgb: 24, 191, 255; --cyan: #18bfff; --cyan-highlight: #7edbff; --cyan-soft: rgba(24, 191, 255, .14); }
html[data-faction-theme="supremacy"] { --accent-rgb: 232, 36, 41; --cyan: #e82429; --cyan-highlight: #ff6e72; --cyan-soft: rgba(232, 36, 41, .14); }
html[data-faction-theme="dynasty"] { --accent-rgb: 119, 188, 112; --cyan: #77bc70; --cyan-highlight: #b3d9af; --cyan-soft: rgba(119, 188, 112, .14); }
html[data-faction-theme="imperum"] { --accent-rgb: 255, 244, 21; --cyan: #fff415; --cyan-highlight: #faf495; --cyan-soft: rgba(255, 244, 21, .14); }
html[data-faction-theme="hegemony"] { --accent-rgb: 15, 195, 194; --cyan: #0fc3c2; --cyan-highlight: #79dddd; --cyan-soft: rgba(15, 195, 194, .14); }
html[data-faction-theme="dominion"] { --accent-rgb: 133, 118, 250; --cyan: #8576fa; --cyan-highlight: #cbc6e2; --cyan-soft: rgba(133, 118, 250, .14); }

* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }

body {
  background: radial-gradient(circle at 82% 8%, rgba(var(--accent-rgb), .08), transparent 25rem), var(--back);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
  margin: 0;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3, .brand strong, .primary-action, .text-action, .mode-card a, .chapter-pagination strong, footer strong {
  font-family: var(--font-display), sans-serif;
  font-weight: 400;
}

.topbar {
  align-items: center;
  backdrop-filter: blur(18px);
  background: rgba(5,9,12,.9);
  border-bottom: 1px solid var(--line);
  display: flex;
  height: 86px;
  justify-content: space-between;
  padding: 0 42px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar-tools { align-items: center; display: flex; gap: 28px; min-width: 0; }
.theme-selector { align-items: center; display: flex; gap: 6px; overflow-x: auto; padding: 5px; scrollbar-width: none; }
.theme-selector::-webkit-scrollbar { display: none; }
.theme-choice { align-items: center; appearance: none; background: #071016; border: 1px solid #263842; border-radius: 50%; cursor: pointer; display: flex; flex: 0 0 34px; height: 34px; isolation: isolate; justify-content: center; overflow: hidden; padding: 2px; position: relative; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; width: 34px; }
.theme-choice:hover { border-color: var(--cyan-highlight); transform: scale(1.08); }
.theme-choice[aria-pressed="true"] { border-color: var(--cyan-highlight); box-shadow: 0 0 0 2px #05090c, 0 0 0 3px var(--cyan), 0 0 13px rgba(var(--accent-rgb), .48); }
.theme-choice img { display: block; filter: grayscale(1); height: 100%; object-fit: contain; opacity: 1; width: 100%; }
.theme-choice::after,.faction-emblem-art::after { background: var(--emblem-color); content: ""; inset: 0; mix-blend-mode: multiply; pointer-events: none; position: absolute; z-index: 2; }
[data-theme-choice="federation"],[data-emblem-faction="federation"] { --emblem-color: #18bfff; }
[data-theme-choice="supremacy"],[data-emblem-faction="supremacy"] { --emblem-color: #e82429; }
[data-theme-choice="dynasty"],[data-emblem-faction="dynasty"] { --emblem-color: #77bc70; }
[data-theme-choice="imperum"],[data-emblem-faction="imperum"] { --emblem-color: #fff415; }
[data-theme-choice="hegemony"],[data-emblem-faction="hegemony"] { --emblem-color: #0fc3c2; }
[data-theme-choice="dominion"],[data-emblem-faction="dominion"] { --emblem-color: #8576fa; }

.brand { align-items: center; display: flex; gap: 14px; }
.brand strong, .brand small { display: block; line-height: 1; }
.brand strong { font-size: 22px; letter-spacing: .12em; }
.brand small { color: var(--cyan); font-family: var(--font-mono), sans-serif; font-size: 14px; letter-spacing: .3em; margin-top: 7px; }

.brand-mark {
  align-items: center;
  background: var(--cyan);
  clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  box-shadow: 0 0 20px rgba(var(--accent-rgb), .25);
  display: flex;
  height: 42px;
  justify-content: center;
  position: relative;
  width: 37px;
}

.brand-mark:before { background: #071016; clip-path: inherit; content: ""; inset: 3px; position: absolute; }
.brand-mark span { background: var(--cyan); clip-path: inherit; height: 8px; position: relative; width: 7px; z-index: 2; }
.status-line { align-items: center; color: var(--muted); display: flex; font-family: var(--font-mono), sans-serif; font-size: 14px; gap: 10px; letter-spacing: .18em; }
.status-light { background: var(--cyan); border-radius: 50%; box-shadow: 0 0 10px var(--cyan); height: 7px; width: 7px; }
.page-grid { display: grid; grid-template-columns: 250px minmax(0,1fr); margin: auto; max-width: 1540px; }

.chapter-nav {
  align-self: start;
  border-right: 1px solid var(--line);
  min-height: calc(100vh - 86px);
  padding: 52px 30px 40px 42px;
  position: sticky;
  top: 86px;
}

.eyebrow { color: var(--cyan); font-family: var(--font-mono), sans-serif; font-size: 14px; letter-spacing: .25em; margin: 0 0 22px; }
.chapter-nav nav { display: grid; gap: 5px; }
.chapter-nav nav a { border-left: 2px solid transparent; color: var(--muted); font-size: 15px; font-weight: bold; letter-spacing: .08em; padding: 9px 14px; text-transform: uppercase; }
.chapter-nav nav a:hover, .chapter-nav nav a.active { background: linear-gradient(90deg,var(--cyan-soft),transparent); border-left-color: var(--cyan); color: var(--text); }
.nav-note { border-top: 1px solid var(--line); margin-top: 40px; padding-top: 22px; }
.nav-note span { color: var(--orange); font-family: var(--font-mono), sans-serif; font-size: 14px; letter-spacing: .15em; }
.nav-note p { color: var(--muted); font-size: 14px; }
main { min-width: 0; }

.hero {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 40px;
  grid-template-columns: minmax(0,1fr) 380px;
  min-height: 630px;
  overflow: hidden;
  padding: 80px clamp(38px,7vw,104px);
}

.hero h1 { font-size: clamp(52px,6.5vw,92px); letter-spacing: -.035em; line-height: .88; margin: 0; text-transform: uppercase; }
.hero h1 em { color: var(--cyan); font-style: normal; text-shadow: 0 0 35px rgba(var(--accent-rgb),.3); }
.hero-intro { color: #b7c6ce; font-size: 20px; margin: 34px 0; max-width: 660px; }
.hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 26px; }
.primary-action { background: var(--cyan); clip-path: polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px); color: #021016; font-family: var(--font-mono), sans-serif; font-size: 14px; font-weight: bold; letter-spacing: .14em; padding: 15px 25px; text-transform: uppercase; }
.text-action { color: #cbd7dc; font-size: 15px; font-weight: bold; text-transform: uppercase; }
.text-action span, .mode-card a span { color: var(--cyan); }
.hero-sector-art { aspect-ratio: 1456/1623; filter: drop-shadow(0 0 30px rgba(var(--accent-rgb),.16)); justify-self: end; max-width: 420px; position: relative; width: 100%; }
.hero-sector-base { display: block; height: 100%; inset: 0; object-fit: contain; position: absolute; width: 100%; }
.hero-sector-outline { background: var(--cyan); inset: 0; mask: url("images/overview/sector-outline.png") center/contain no-repeat; pointer-events: none; position: absolute; transition: background-color .2s ease; -webkit-mask: url("images/overview/sector-outline.png") center/contain no-repeat; }
.briefing-strip { background: #071016; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(4,1fr); padding: 0 clamp(38px,7vw,104px); }
.briefing-strip div { align-items: baseline; border-right: 1px solid var(--line); display: flex; gap: 13px; padding: 25px 22px; }
.briefing-strip div:last-child { border: 0; }.briefing-strip strong { color: var(--cyan); font-size: 30px; }.briefing-strip span { color: var(--muted); font-family: var(--font-mono), sans-serif; font-size: 14px; letter-spacing: .14em; }
.content-section { border-bottom: 1px solid var(--line); padding: 88px clamp(38px,7vw,104px); }
.section-heading { margin-bottom: 44px; max-width: 760px; }
.section-heading h2 { font-size: clamp(38px,4vw,56px); line-height: 1; margin: 0 0 18px; text-transform: uppercase; }
.section-heading > p:last-child { color: var(--muted); font-size: 19px; }
.mode-grid { display: grid; gap: 24px; grid-template-columns: repeat(2,minmax(0,1fr)); }

.mode-card { align-items: center; background: linear-gradient(145deg,#101a21,var(--panel)); border: 1px solid var(--line); display: grid; gap: 28px; grid-template-columns: minmax(0,1fr) minmax(112px,30%); min-height: 330px; overflow: hidden; padding: 40px; position: relative; }
.mode-card-copy { align-self: stretch; display: flex; flex-direction: column; min-width: 0; position: relative; z-index: 1; }
.mode-card:before { content: ""; height: 3px; left: 0; position: absolute; right: 0; top: 0; }.cyan-card:before { background: var(--cyan); }.orange-card:before { background: var(--orange); }
.mode-number { color: rgba(255,255,255,.035); font-family: var(--font-mono), sans-serif; font-size: 130px; font-weight: bold; line-height: 1; position: absolute; right: 24px; top: 20px; }
.card-label { color: var(--cyan); font-family: var(--font-mono), sans-serif; font-size: 14px; letter-spacing: .2em; }.orange-card .card-label,.orange-card a span { color: var(--orange); }
.mode-card h3 { font-size: 40px; margin: 26px 0 18px; text-transform: uppercase; }.mode-card-copy > p:not(.card-label) { color: var(--muted); }.mode-card a { font-size: 16px; font-weight: bold; margin-top: auto; padding-top: 24px; text-transform: uppercase; }.mode-preview { aspect-ratio: 3/4; border: 1px solid rgba(var(--accent-rgb),.42); display: block; max-height: 255px; object-fit: cover; object-position: top center; width: 100%; }
.process-section { background: rgba(7,16,22,.56); }.process-list { list-style: none; margin: 0; padding: 0; }
.process-list li { align-items: center; border-top: 1px solid var(--line); display: grid; gap: 22px; grid-template-columns: 58px 1fr; padding: 23px 0; }.process-list li:last-child { border-bottom: 1px solid var(--line); }
.process-icon { background: var(--cyan); display: block; height: 50px; transition: background-color .2s ease; width: 50px; }
.process-icon.advance { mask: url("images/manual/war-turn-advance.png") center/contain no-repeat; -webkit-mask: url("images/manual/war-turn-advance.png") center/contain no-repeat; }
.process-icon.claim { mask: url("images/manual/war-turn-claim.png") center/contain no-repeat; -webkit-mask: url("images/manual/war-turn-claim.png") center/contain no-repeat; }
.process-icon.commit { mask: url("images/manual/war-turn-commit.png") center/contain no-repeat; -webkit-mask: url("images/manual/war-turn-commit.png") center/contain no-repeat; }
.process-icon.plan { mask: url("images/manual/war-turn-plan.png") center/contain no-repeat; -webkit-mask: url("images/manual/war-turn-plan.png") center/contain no-repeat; }
.process-icon.resolve { mask: url("images/manual/war-turn-resolve.png") center/contain no-repeat; -webkit-mask: url("images/manual/war-turn-resolve.png") center/contain no-repeat; }
.process-list h3 { margin: 0; text-transform: uppercase; }.process-list p { color: var(--muted); margin: 3px 0 0; }
.rule-callout { align-items: flex-start; background: rgba(247, 148, 29,.14); border: 1px solid rgba(247, 148, 29,.38); display: flex; gap: 20px; margin-top: 34px; padding: 25px; }
.rule-callout > b { align-items: center; background: var(--orange); color: #160b00; display: flex; flex: 0 0 32px; height: 32px; justify-content: center; }.rule-callout strong { color: var(--orange); font-family: var(--font-mono), sans-serif; font-size: 16px; }.rule-callout p { color: #c2b29f; margin: 7px 0 0; }
.battle-grid { display: grid; gap: 1px; grid-template-columns: repeat(5,1fr); }.battle-grid article { background: var(--panel); border: 1px solid var(--line); min-height: 220px; padding: 26px 22px; }.battle-grid article > span { color: var(--cyan); font-family: var(--font-mono), sans-serif; font-size: 14px; }.battle-grid h3 { margin: 42px 0 11px; text-transform: uppercase; }.battle-grid p { color: var(--muted); font-size: 15px; }
.chapter-section { background: #070d11; }.chapter-grid { border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }.chapter-grid article,.chapter-card { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 17px; grid-template-columns: 40px 1fr; min-height: 118px; padding: 20px 24px; }.chapter-grid article:nth-child(odd),.chapter-grid .chapter-card:nth-child(odd) { border-right: 1px solid var(--line); }.chapter-grid article > span,.chapter-card > span { color: var(--cyan); font-family: var(--font-mono), sans-serif; font-size: 14px; }.chapter-grid h3 { margin: 0 0 4px; text-transform: uppercase; }.chapter-grid p { color: var(--muted); font-size: 14px; margin: 0; }.chapter-card { grid-template-columns: 40px 1fr 22px; transition: background .18s ease,border-color .18s ease; }.chapter-card b { color: var(--cyan); font-family: var(--font-mono), sans-serif; font-weight: normal; }.chapter-card:hover { background: rgba(var(--accent-rgb),.08); border-bottom-color: rgba(var(--accent-rgb),.5); }

.manual-nav { max-height: calc(100vh - 86px); overflow-y: auto; padding-top: 38px; }
.manual-nav nav { gap: 1px; }
.manual-nav nav a,.manual-nav .nav-pending { align-items: center; display: grid; font-size: 14px; grid-template-columns: 27px 1fr; letter-spacing: .06em; padding: 6px 10px; text-transform: uppercase; }
.manual-nav nav > a:first-child { display: block; margin-bottom: 12px; }
.manual-nav nav span span,.manual-nav nav a span { color: #45616f; font-family: var(--font-mono), sans-serif; font-size: 14px; }
.manual-nav .nav-pending { color: #51616a; cursor: default; }
.manual-main { min-width: 0; }
.manual-chapter { background: linear-gradient(180deg,rgba(var(--accent-rgb),.035),transparent 550px); }
.chapter-hero { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 60px; grid-template-columns: minmax(0,1fr) 210px; min-height: 420px; overflow: hidden; padding: 76px clamp(38px,7vw,104px); }
.chapter-hero h1 { font-size: clamp(58px,7vw,104px); letter-spacing: -.045em; line-height: .9; margin: 0; text-transform: uppercase; }
.chapter-hero p:last-child { color: #b7c6ce; font-size: 21px; margin: 30px 0 0; max-width: 720px; }
.chapter-hero > .faction-gallery { grid-column: 1/-1; }
.chapter-hex { align-items: center; background: rgba(var(--accent-rgb),.25); clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); display: flex; height: 190px; justify-content: center; position: relative; width: 165px; }
.chapter-hex:before { background: #071016; clip-path: inherit; content: ""; inset: 3px; position: absolute; }
.chapter-hex span { color: var(--cyan); font-family: var(--font-mono), sans-serif; font-size: 44px; font-weight: bold; position: relative; z-index: 2; }
.on-page-nav { align-items: center; background: #071016; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 24px; padding: 22px clamp(38px,7vw,104px); }
.on-page-nav strong { color: var(--cyan); font-family: var(--font-mono), sans-serif; font-size: 14px; letter-spacing: .18em; margin-right: 10px; }.on-page-nav a { color: var(--muted); font-size: 14px; font-weight: bold; text-transform: uppercase; }.on-page-nav a:hover { color: var(--text); }
.manual-section { border-bottom: 1px solid var(--line); padding: 76px clamp(38px,7vw,104px); scroll-margin-top: 86px; }
.manual-section:nth-of-type(even) { background: rgba(7,16,22,.46); }
.manual-section h2 { font-size: clamp(38px,4vw,58px); line-height: 1; margin: 0 0 28px; text-transform: uppercase; }
.section-lede { color: #b7c6ce; font-size: 20px; margin: 0 0 38px; max-width: 850px; }
.manual-copy { color: var(--muted); font-size: 18px; max-width: 850px; }.manual-copy p { margin: 0 0 20px; }.two-column-copy { column-count: 2; column-gap: 54px; max-width: none; }.two-column-copy p { break-inside: avoid; }
.manual-figure { background: linear-gradient(180deg,rgba(var(--accent-rgb),.08),rgba(5,9,12,.72)); border: 1px solid rgba(var(--accent-rgb),.36); margin: 38px 0 0; padding: 10px; }
.manual-figure a { display: block; overflow: hidden; }
.manual-figure img { display: block; height: auto; transition: filter .18s ease,transform .18s ease; width: 100%; }
.manual-figure a:hover img { filter: brightness(1.08); transform: scale(1.004); }
.theme-tinted-figure a { background: var(--cyan); transition: background-color .2s ease; }
.theme-tinted-figure img { filter: grayscale(1) contrast(1.08); mix-blend-mode: multiply; }
.theme-tinted-figure a:hover img { filter: grayscale(1) contrast(1.08) brightness(1.04); }
.window-frame-crop a { aspect-ratio: 1200/1599; position: relative; }
.window-frame-crop img { left: 0; position: absolute; top: 0; transform: translateY(-2.678%); }
.window-frame-crop a:hover img { transform: translateY(-2.678%) scale(1.004); }
.manual-figure figcaption { align-items: center; color: var(--text); display: flex; font-size: 16px; gap: 24px; justify-content: space-between; padding: 14px 10px 7px; }
.manual-figure figcaption small { color: var(--cyan); flex: 0 0 auto; font-family: var(--font-mono),sans-serif; font-size: 14px; letter-spacing: .1em; }
.cyan-callout { background: rgba(var(--accent-rgb),.1); border-color: rgba(var(--accent-rgb),.36); }.cyan-callout > b { background: var(--cyan); color: #021016; }.cyan-callout strong { color: var(--cyan); }.cyan-callout p { color: #abc4d0; }
.faction-gallery { display: grid; gap: 24px; grid-template-columns: repeat(6,minmax(84px,1fr)); margin-top: -10px; width: 100%; }
.faction-gallery figure { margin: 0; min-width: 0; text-align: center; }
.faction-emblem-art { background: #071016; border: 1px solid color-mix(in srgb,var(--emblem-color) 55%,#263842); border-radius: 50%; display: block; isolation: isolate; margin: 0 auto; max-width: 122px; overflow: hidden; position: relative; width: 100%; }
.faction-emblem-art img { display: block; filter: grayscale(1); height: auto; width: 100%; }
.faction-gallery figcaption { color: var(--emblem-color); font-family: var(--font-display),sans-serif; font-size: 22px; letter-spacing: .05em; margin-top: 10px; text-transform: uppercase; }
.manual-version { color: var(--muted); letter-spacing: .1em; white-space: nowrap; }
.unit-card { position: relative; }.unit-card h3 { padding-right: 74px; }.unit-card-icon { background: var(--cyan); display: block; height: 62px; position: absolute; right: 24px; top: 24px; transition: background-color .2s ease; width: 62px; }
.unit-card-icon.outpost { mask: url("images/manual/outpost.png") center/contain no-repeat; -webkit-mask: url("images/manual/outpost.png") center/contain no-repeat; }.unit-card-icon.star-base { mask: url("images/manual/star-base.png") center/contain no-repeat; -webkit-mask: url("images/manual/star-base.png") center/contain no-repeat; }
.unit-card-icon.system-icon { background: transparent; }.unit-card-icon.system-icon::before,.unit-card-icon.system-icon::after { content: ""; display: block; position: absolute; }.unit-card-icon.power-core::before { background: var(--cyan); clip-path: polygon(60% 0,18% 53%,46% 53%,34% 100%,84% 38%,56% 38%); height: 42px; left: 17px; top: 10px; width: 29px; }.unit-card-icon.engines::before { background: var(--cyan); clip-path: polygon(0 50%,36% 8%,30% 34%,100% 16%,79% 50%,100% 84%,30% 66%,36% 92%); height: 34px; left: 11px; top: 14px; width: 42px; }.unit-card-icon.weapons::before { background: var(--cyan); clip-path: polygon(50% 0,60% 30%,83% 8%,75% 39%,100% 50%,70% 60%,92% 83%,61% 75%,50% 100%,40% 70%,17% 92%,25% 61%,0 50%,30% 40%,8% 17%,39% 25%); height: 42px; left: 10px; top: 10px; width: 42px; }.unit-card-icon.defense::before { background: var(--cyan); border-radius: 50%; height: 42px; left: 10px; top: 10px; width: 42px; }.unit-card-icon.defense::after { background: var(--panel); border-radius: 50%; height: 38px; left: 24px; top: 7px; width: 38px; }.unit-card-icon.hull::before { background: var(--cyan); clip-path: polygon(0 0,100% 0,100% 20%,64% 20%,64% 80%,100% 80%,100% 100%,0 100%,0 80%,36% 80%,36% 20%,0 20%); height: 42px; left: 13px; top: 10px; width: 36px; }
.command-grid { display: grid; gap: 1px; grid-template-columns: repeat(3,minmax(0,1fr)); }.command-grid article { background: var(--panel); border: 1px solid var(--line); min-height: 210px; padding: 28px; }.command-grid article > span { color: var(--cyan); font-family: var(--font-mono), sans-serif; font-size: 14px; }.command-grid h3 { font-size: 22px; margin: 40px 0 10px; text-transform: uppercase; }.command-grid p { color: var(--muted); font-size: 15px; margin: 0; }
.instruction-list { list-style: none; margin: 0; max-width: 950px; padding: 0; }.instruction-list li { border-top: 1px solid var(--line); display: grid; gap: 26px; grid-template-columns: 48px 1fr; padding: 26px 0; }.instruction-list li:last-child { border-bottom: 1px solid var(--line); }.instruction-list li > span { align-items: center; border: 1px solid #2a414d; color: var(--cyan); display: flex; font-family: var(--font-mono), sans-serif; height: 40px; justify-content: center; width: 40px; }.instruction-list h3 { font-size: 22px; margin: 0 0 5px; text-transform: uppercase; }.instruction-list p { color: var(--muted); margin: 0; }.instruction-list b { color: var(--text); }
.chapter-pagination { display: grid; gap: 1px; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 0 clamp(38px,7vw,104px); }.chapter-pagination > * { background: #071016; border: 1px solid var(--line); display: flex; flex-direction: column; min-height: 130px; padding: 28px; }.chapter-pagination a:hover { border-color: rgba(var(--accent-rgb),.5); }.chapter-pagination small { color: var(--cyan); font-family: var(--font-mono), sans-serif; font-size: 14px; letter-spacing: .16em; }.chapter-pagination strong { font-size: 22px; margin-top: 10px; text-transform: uppercase; }.chapter-pagination em { color: #53646d; font-size: 14px; font-style: normal; margin-top: 4px; text-transform: uppercase; }
footer { align-items: center; display: flex; justify-content: space-between; padding: 44px clamp(38px,7vw,104px); }footer strong { letter-spacing: .1em; }footer p { color: var(--muted); font-size: 14px; margin: 4px 0 0; }footer a { color: var(--cyan); font-family: var(--font-mono), sans-serif; font-size: 14px; }

/* Small cyan utility type receives a shared readability increase. */
.brand small,.battle-grid article > span,.card-label,.chapter-grid article > span,.chapter-card > span,.chapter-pagination small,.command-grid article > span,.eyebrow,footer a,.manual-figure figcaption small,.manual-nav nav span span,.manual-nav nav a span,.on-page-nav strong { font-size: 17px; }
.cyan-callout strong,.instruction-list li > span { font-size: 19px; }

@media (max-width: 900px) {
  .topbar-tools { gap: 0; max-width: calc(100vw - 240px); }
  .theme-choice { flex-basis: 30px; height: 30px; width: 30px; }
  .status-line,.chapter-nav { display: none; }.page-grid { display: block; }.hero { grid-template-columns: 1fr; }.hero-sector-art { justify-self: center; margin-top: 28px; max-width: 340px; width: min(82vw,340px); }
  .briefing-strip { grid-template-columns: repeat(2,1fr); }.mode-grid,.chapter-grid { grid-template-columns: 1fr; }.chapter-grid article:nth-child(odd),.chapter-grid .chapter-card:nth-child(odd) { border-right: 0; }.battle-grid { grid-template-columns: repeat(2,1fr); }
  .chapter-hero { grid-template-columns: 1fr; min-height: auto; }.chapter-hex { display: none; }.faction-gallery { gap: 18px; grid-template-columns: repeat(3,minmax(78px,1fr)); }.command-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.two-column-copy { column-count: 1; }
}

@media (max-width: 520px) {
  .topbar { height: 74px; padding: 0 22px; }.hero,.content-section { padding: 68px 22px; }.hero h1 { font-size: 46px; }.hero-intro { font-size: 18px; }.hero-sector-art { max-width: 280px; }
  .brand small { display: none; }.mode-card { gap: 18px; grid-template-columns: minmax(0,1fr) 96px; padding: 28px; }.mode-card h3 { font-size: 32px; }.brand-mark { height: 34px; width: 30px; }.topbar-tools { max-width: calc(100vw - 185px); }
  .briefing-strip { padding: 0 22px; }.briefing-strip div { align-items: flex-start; flex-direction: column; gap: 0; padding: 17px 14px; }.mode-card { min-height: 370px; padding: 30px; }.battle-grid { grid-template-columns: 1fr; }footer { align-items: flex-start; flex-direction: column; gap: 20px; padding: 40px 22px; }
  .chapter-hero,.manual-section { padding-left: 22px; padding-right: 22px; }.chapter-hero h1 { font-size: 52px; }.faction-gallery { grid-template-columns: repeat(2,minmax(90px,1fr)); }.on-page-nav { align-items: flex-start; flex-direction: column; padding-left: 22px; padding-right: 22px; }.command-grid { grid-template-columns: 1fr; }.command-grid article { min-height: 180px; }.manual-figure figcaption { align-items: flex-start; flex-direction: column; gap: 7px; }.chapter-pagination { grid-template-columns: 1fr; padding: 0 22px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }