@font-face {
  font-family:Rajdhani;
  src:url('/assets/fonts/Rajdhani-SemiBold.ttf') format('truetype');
  font-weight:600;
  font-display:swap
}

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


:root {
  --black:#03090d;
  --deep:#071217;
  --panel:#0b1b21;
  --paper:#dfe6e2;
  --muted:#93a5a3;
  --cyan:#65e2d6;
  --gold:#d9a85c;
  --line:rgba(158,210,204,.18);
  --display:Rajdhani, 'Arial Narrow', Arial, sans-serif;
  --body:Arial, sans-serif
}

[hidden] { display: none !important; }

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  background:var(--black)
}

body {
  margin:0;
  background:var(--black);
  color:var(--paper);
  font:400 1rem/1.65 var(--body);
  overflow-x:hidden
}

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

button, input {
  font:inherit
}

h1, h2, h3, h4, .brand, .site-nav, .button, dt, .section-label {
  font-family:var(--display);
  text-transform:uppercase
}

.skip-link {
  position:fixed;
  z-index:100;
  top:8px;
  left:8px;
  transform:translateY(-150%);
  background:#fff;
  color:#000;
  padding:.7rem 1rem
}

.skip-link:focus {
  transform:none
}

.site-header {
  height:84px;
  position:absolute;
  inset:0 0 auto;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 clamp(24px,5vw,76px);
  border-bottom:1px solid var(--line);
  transition:.25s
}

.site-header.is-fixed {
  position:fixed;
  height:68px;
  background:rgba(3,9,13,.94);
  backdrop-filter:blur(14px)
}

.brand {
  display:flex;
  align-items:center;
  gap:12px;
  line-height:.8;
  letter-spacing:.09em
}

.brand b, .brand em {
  display:block
}

.brand b {
  font-size:1rem
}

.brand em {
  margin-top:8px;
  color:var(--gold);
  font-size:.7rem;
  font-style:normal;
  letter-spacing:.28em
}

.node-mark {
  width:42px;
  height:42px;
  fill:none;
  stroke:var(--cyan);
  stroke-width:1.4
}

.node-mark circle {
  fill:var(--black);
  stroke:var(--gold)
}

.site-nav {
  display:flex;
  align-items:center;
  gap:clamp(.8rem,1.6vw,1.9rem);
  font-size:1rem;
  font-weight:700;
  letter-spacing:.08em
}

.site-nav a {
  padding:.45rem 0;
  color:#c4cecc
}

.site-nav a:hover, .site-nav a:focus-visible {
  color:var(--cyan)
}

.site-nav .nav-primary {
  padding:.65rem .85rem;
  border:1px solid var(--cyan);
  color:#fff
}

.menu-toggle {
  display:none;
  background:none;
  border:0;
  color:#fff;
  font-family:var(--display);
  text-transform:uppercase
}

.hero {
  min-height:760px;
  padding:150px clamp(24px,7vw,110px) 80px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,7vw,8rem);
  align-items:center;
  position:relative;
  isolation:isolate;
  background:radial-gradient(circle at 74% 45%,rgba(27,124,124,.16),transparent 35%), var(--black)
}

.hero-grid {
  position:absolute;
  inset:84px 0 0;
  z-index:-1;
  opacity:.19;
  background-image:linear-gradient(var(--line) 1px,transparent 1px), linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom,transparent,#000 25%,transparent)
}

.eyebrow {
  margin:0 0 1rem;
  color:var(--gold);
  font:700 .76rem/1.2 var(--display);
  text-transform:uppercase;
  letter-spacing:.22em
}

.hero h1 {
  font-size:clamp(3.7rem,7vw,7.3rem);
  line-height:.84;
  letter-spacing:-.04em;
  margin:0
}

.hero h1 span {
  color:var(--cyan)
}

.hero-deck {
  max-width:650px;
  margin:2rem 0;
  color:#bdc8c6;
  font-size:clamp(1rem,1.25vw,1.18rem)
}

.hero-actions {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:560px;
  gap:12px
}

.hero-play {
  grid-column:1/-1;
  justify-content:center
}

.button {
  display:inline-flex;
  min-height:52px;
  align-items:center;
  padding:0 1.4rem;
  border:1px solid var(--line);
  font-weight:700;
  letter-spacing:.1em
}

.button.primary {
  background:var(--gold);
  border-color:var(--gold);
  color:#061015
}

.button:hover {
  transform:translateY(-2px);
  filter:brightness(1.12)
}

.hero-facts {
  display:flex;
  margin:3rem 0 0;
  gap:2.5rem
}

.hero-facts div {
  border-top:1px solid var(--line);
  padding-top:.8rem
}

.hero-facts dt {
  font-size:1.25rem;
  color:#fff
}

.hero-facts dd {
  margin:0;
  color:var(--muted);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em
}

.hero-fleet {
  margin:0;
  position:relative;
  border:1px solid var(--line);
  box-shadow:0 28px 90px #000
}

.hero-fleet:before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(3,9,13,.9),transparent 60%);
  z-index:1
}

.hero-fleet img {
  display:block;
  width:100%;
  aspect-ratio:16/11;
  object-fit:cover
}

.hero-fleet figcaption {
  position:absolute;
  z-index:2;
  inset:auto 1.5rem 1.4rem;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  font-family:var(--display);
  text-transform:uppercase
}

.hero-fleet span {
  color:var(--gold);
  font-size:.72rem;
  letter-spacing:.12em
}

.hero-fleet b {
  text-align:right
}

.section {
  position:relative;
  padding:clamp(5rem,9vw,9rem) clamp(24px,8vw,128px)
}

.section-label {
  position:absolute;
  top:2.2rem;
  left:clamp(24px,3vw,48px);
  color:#61706f;
  font-size:.7rem;
  letter-spacing:.13em
}

.game {
  background:#dfe6e2;
  color:#081317
}

.section-heading {
  display:grid;
  grid-template-columns:1fr 1.3fr .9fr;
  gap:5vw;
  align-items:end;
  margin-bottom:4rem
}

.section-heading>.eyebrow {
  align-self:start
}

.section-heading h2, .galaxy h2, .dispatch h2 {
  font-size:clamp(3rem,5.5vw,6rem);
  line-height:.88;
  letter-spacing:-.03em;
  margin:0
}

.section-heading>p:last-child {
  color:#445353;
  margin:0
}

.pillars {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid #93a3a0;
  border-bottom:1px solid #93a3a0
}

.pillars article {
  padding:2rem 2rem 2rem 0
}

.pillars article+article {
  padding-left:2rem;
  border-left:1px solid #aebbb8
}

.pillars span {
  color:#876932;
  font:700 .75rem var(--display)
}

.pillars h3 {
  font-size:1.5rem;
  line-height:1;
  margin:.8rem 0
}

.pillars p {
  color:#44504f;
  margin:0
}

.rules-strip {
  display:grid;
  grid-template-columns:1fr 1.2fr auto;
  gap:2rem;
  align-items:center;
  margin-top:3rem;
  padding:1.7rem 2rem;
  background:#0c1c22;
  color:#e3e9e7
}

.rules-strip div {
  display:grid
}

.rules-strip small {
  color:var(--gold);
  text-transform:uppercase
}

.rules-strip strong {
  font:700 1.5rem var(--display);
  text-transform:uppercase
}

.rules-strip p {
  color:#9caeac
}

.rules-strip a {
  color:var(--cyan);
  font:700 .85rem var(--display);
  text-transform:uppercase
}

.galaxy {
  overflow:hidden;
  background:#03090d
}

.galaxy canvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:.35
}

.galaxy>*:not(canvas) {
  position:relative
}

.galaxy-intro {
  max-width:930px;
  margin-bottom:5rem
}

.galaxy-intro h2 {
  max-width:820px
}

.galaxy-intro>p:last-child {
  max-width:650px;
  color:var(--muted);
  font-size:1.08rem
}

.storyline {
  list-style:none;
  margin:0 0 4rem auto;
  padding:0;
  max-width:980px;
  border-top:1px solid var(--line)
}

.storyline li {
  display:grid;
  grid-template-columns:160px 1fr;
  gap:2rem;
  border-bottom:1px solid var(--line);
  padding:1.7rem 0
}

.storyline time {
  font:700 1.5rem var(--display);
  color:var(--gold)
}

.storyline h3 {
  font-size:1.4rem;
  margin:0 0 .4rem
}

.storyline p {
  margin:0;
  color:#9fb0ae;
  max-width:700px
}

.galaxy-question {
  max-width: 760px;
  margin: 0 0 3rem auto;
  color: var(--paper);
  font: 600 clamp(1.45rem, 2.4vw, 2.25rem)/1.2 var(--display);
  text-transform: uppercase;
}

.atlas-card {
  display:grid;
  grid-template-columns:1fr auto;
  max-width:720px;
  margin-left:auto;
  padding:1.6rem 2rem;
  border:1px solid var(--cyan);
  background:rgba(8,30,35,.8)
}

.atlas-card small, .atlas-card span {
  display:block;
  color:var(--muted)
}

.atlas-card strong {
  display:block;
  font:700 1.8rem var(--display);
  text-transform:uppercase
}

.atlas-card b {
  grid-row:1/4;
  grid-column:2;
  align-self:center;
  color:var(--gold);
  font-size:2rem
}

.play-card {
  margin-bottom:16px;
  border-color:var(--gold);
  background:linear-gradient(120deg,rgba(35,35,24,.9),rgba(8,30,35,.8))
}

.atlas-card:hover {
  background-color:rgba(35,65,68,.9)
}

.dispatch {
  text-align:center;
  background:#0b181e
}

.dispatch h2 {
  max-width:850px;
  margin:0 auto 3rem
}

.dispatch-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  max-width:1100px;
  margin:auto
}

.dispatch-grid a,
.dispatch-disabled {
  display:grid;
  text-align:left;
  padding:2rem;
  border:1px solid var(--line);
  margin:-1px 0 0 -1px
}

.dispatch-grid a:hover {
  background:rgba(101,226,214,.08)
}

.dispatch-disabled {
  opacity: .42;
}

.dispatch-grid small {
  color:var(--gold);
  text-transform:uppercase
}

.dispatch-grid strong {
  font:700 1.7rem var(--display);
  text-transform:uppercase
}

.dispatch-grid span {
  color:var(--cyan);
  justify-self:end
}

.factions {
  background:#061116
}

.factions .section-heading>p:last-child {
  color:var(--muted)
}

.faction-tools {
  max-width:620px;
  margin:0 0 2.5rem
}

.faction-tools label {
  display:block;
  font:700 .8rem var(--display);
  text-transform:uppercase;
  letter-spacing:.12em;
  margin-bottom:.5rem
}

.faction-tools>div {
  display:flex
}

.faction-tools input {
  width:100%;
  background:#02080b;
  border:1px solid var(--line);
  color:#fff;
  padding:1rem
}

.faction-tools button {
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--cyan);
  padding:0 1.3rem
}

.faction-tools p {
  color:var(--muted);
  font-size:.8rem
}

.faction-browser {
  display:grid;
  grid-template-columns:minmax(250px,.65fr) 1.6fr;
  border-top:1px solid var(--line)
}

.faction-list {
  max-height:760px;
  overflow:auto;
  border-right:1px solid var(--line)
}

.faction-tab {
  width:100%;
  display:grid;
  grid-template-columns:40px 1fr auto;
  align-items:center;
  gap:1rem;
  padding:1rem;
  border:0;
  border-bottom:1px solid var(--line);
  background:none;
  color:#aab7b5;
  text-align:left;
  cursor:pointer
}

.faction-tab:hover, .faction-tab.is-active {
  background:rgba(101,226,214,.08);
  color:#fff
}

.faction-tab span {
  color:#627572
}

.faction-tab b {
  font:700 1rem var(--display);
  text-transform:uppercase
}

.faction-tab i {
  color:var(--cyan)
}

.dossier {
  padding:clamp(2rem,5vw,5rem);
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:2rem 4rem
}

.dossier-art {
  min-height:260px;
  border:1px solid var(--line);
  background:radial-gradient(circle at 50%,rgba(101,226,214,.18),transparent 35%), linear-gradient(135deg,#0c242b,#02090c);
  background-position:center;
  background-size:cover;
  position:relative;
  overflow:hidden
}

.dossier-art:after {
  content:"";
  position:absolute;
  inset:15%;
  border:1px solid rgba(101,226,214,.35);
  transform:rotate(45deg)
}

.dossier-art span {
  position:absolute;
  inset:50% 10% auto;
  height:1px;
  background:var(--cyan)
}

.dossier-art.has-art:after,
.dossier-art.has-art span { display: none; }

.dossier-head h3 {
  font-size:clamp(2.6rem,4.5vw,5rem);
  line-height:.88;
  margin:0 0 1.5rem
}

.dossier-summary {
  color:#b2c0be;
  font-size:1.05rem
}

.dossier-fields {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
  border-top:1px solid var(--line);
  padding-top:2rem
}

.dossier-fields section:first-child {
  grid-column:1 / -1
}

.dossier-fields section:last-child { grid-column:1 / -1; }

.dossier-fields h4 {
  margin:0 0 .8rem;
  color:var(--gold);
  font-size:.82rem;
  letter-spacing:.1em
}

.dossier-fields p {
  color:#9daead
}

.dossier-fields section:first-child p {
  margin-top:0
}

.empty-state {
  padding:3rem;
  border:1px solid var(--line);
  color:var(--muted)
}

.site-footer {
  padding:3rem clamp(24px,5vw,76px);
  display:flex;
  justify-content:space-between;
  border-top:1px solid var(--line);
  color:#7d8c8a
}

.site-footer nav {
  display:flex;
  gap:2rem;
  font:700 .8rem var(--display);
  text-transform:uppercase
}


@media(max-width:920px) {
  .site-header {
    height:72px
  }

  .menu-toggle {
    display:block
  }

  .site-nav {
    display:none;
    position:absolute;
    top:72px;
    inset-inline:0;
    padding:1.2rem 24px 1.8rem;
    background:#03090d;
    flex-direction:column;
    align-items:stretch
  }

  .site-nav.is-open {
    display:flex
  }

  .hero {
    grid-template-columns:1fr;
    padding-top:125px
  }

  .hero-fleet {
    max-width:700px
  }

  .section-heading {
    grid-template-columns:1fr
  }

  .pillars {
    grid-template-columns:1fr 1fr
  }

  .faction-browser {
    grid-template-columns:1fr
  }

  .faction-list {
    display:flex;
    max-height:none;
    border-right:0;
    overflow:auto
  }

  .faction-tab {
    min-width:250px
  }

  .dossier {
    grid-template-columns:1fr 1.2fr
  }

  .dispatch-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


@media(max-width:620px) {
  .hero-actions {
    grid-template-columns:1fr
  }

  .hero {
    padding:110px 24px 60px
  }

  .hero h1 {
    font-size:3.6rem
  }

  .hero-facts {
    gap:1rem
  }

  .hero-facts {
    display:grid;
    grid-template-columns:repeat(3,1fr)
  }

  .hero-fleet figcaption {
    display:grid
  }

  .hero-fleet b {
    text-align:left
  }

  .section {
    padding:5.5rem 24px
  }

  .section-label {
    display:none
  }

  .pillars {
    grid-template-columns:1fr
  }

  .pillars article+article {
    padding-left:0;
    border-left:0;
    border-top:1px solid #aebbb8
  }

  .rules-strip {
    grid-template-columns:1fr
  }

  .storyline li {
    grid-template-columns:1fr;
    gap:.3rem
  }

  .dispatch-grid {
    grid-template-columns:1fr
  }

  .dossier {
    grid-template-columns:1fr;
    padding:2rem 0
  }

  .dossier-fields {
    grid-template-columns:1fr
  }

  .site-footer {
    display:grid;
    gap:1rem
  }

  .site-footer nav {
    flex-wrap:wrap
  }

  .button {
    width:100%;
    justify-content:center
  }
}


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

  * {
    transition:none!important
  }
}



/* Dark command interface for the game briefing. */
.game {
  background: #071217;
  color: var(--paper);
}

.game .section-heading > p:last-child,
.game .pillars p {
  color: #a8b7b5;
}

.game .pillars {
  border-color: var(--line);
}

.game .pillars article + article {
  border-color: var(--line);
}

.game .pillars span {
  color: var(--gold);
}