:root {
  color-scheme: dark;
  --bg: #090a0b;
  --panel: #101112;
  --line: #2a2b2e;
  --text: #f3f1ed;
  --muted: #b3b0ad;
  --dim: #a29d96;
  --hot: #ff6b27;
  --hot-pale: #ff9664;
  --mono: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --display: Impact, Haettenschweiler, "Arial Narrow", "Roboto Condensed", sans-serif;
  --body: "Bahnschrift", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.55 var(--body); }
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { display: block; max-width: 100%; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
:focus-visible { outline: 2px solid var(--hot-pale); outline-offset: 5px; }
::selection { background: var(--hot); color: #090909; }
.skip { position: fixed; z-index: 20; top: 10px; left: 10px; padding: 10px 16px; color: #0b0b0b; background: var(--hot); transform: translateY(-150%); }
.skip:focus { transform: translateY(0); }
.wrap { width: min(100% - clamp(36px, 10vw, 148px), 1232px); margin-inline: auto; }
.display { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .005em; line-height: .98; }
.display em { color: var(--hot); font-style: normal; }
.site-header { border-bottom: 1px solid var(--line); background: #0b0b0c; position: relative; z-index: 2; }
.header-inner { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand img { width: 42px; height: 42px; mix-blend-mode: screen; }
.brand strong { display: block; font-size: .88rem; font-weight: 800; letter-spacing: .065em; line-height: 1.22; }
.brand small { display: flex; align-items: center; gap: 7px; color: var(--dim); font: .65rem var(--mono); letter-spacing: .06em; margin-top: 4px; }
.brand i { width: 3px; height: 3px; background: var(--hot); }
.main-nav { display: flex; align-items: center; gap: clamp(15px, 3vw, 42px); }
.main-nav a, .text-link { font: 700 .74rem var(--mono); text-transform: uppercase; letter-spacing: .085em; color: #d0ccc8; transition: color .2s ease; }
.main-nav a:hover, .text-link:hover { color: var(--hot-pale); }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 17px; white-space: nowrap; font: 800 .77rem var(--mono); letter-spacing: .07em; text-transform: uppercase; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.button svg { width: 17px; height: 17px; flex: none; }
.button-outline { border: 1px solid #9e4d2a; color: var(--hot-pale); min-height: 40px; }
.button-outline:hover { border-color: var(--hot-pale); background: #26150e; }
.button-primary { color: #0b0908; background: var(--hot); box-shadow: 0 0 28px #ff5c2126; }
.button-primary:hover { background: #ff995e; }
.button-primary .external { margin-left: 10px; width: 14px; height: 14px; }
.text-link { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; }
.text-link svg { width: 15px; height: 15px; color: var(--hot); }

.hero { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid #242326; }
.hero-art { position: absolute; z-index: -1; inset: 0; background:
  linear-gradient(90deg, #090a0b 0%, #090a0bbf 24%, #090a0b21 62%, #090a0b00 82%),
  linear-gradient(0deg, #090a0b 0%, #090a0b06 36%),
  url("assets/event-horizon-rupture.webp") center 48% / cover no-repeat; }
.hero-inner { position: relative; padding-top: clamp(64px, 7.4vw, 113px); padding-bottom: 22px; }
.hero-copy { position: relative; z-index: 1; }
.eyebrow, .section-index, .technical { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--hot-pale); font: 700 .74rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.eyebrow { margin-bottom: 24px; }
.beacon { width: 7px; height: 7px; border-radius: 50%; background: var(--hot); box-shadow: 0 0 11px #ff6b27b3; flex: none; }
.eyebrow-divider { width: 15px; height: 1px; background: #a15b40; }
.hero h1 { font-size: clamp(4.4rem, 9vw, 9.1rem); line-height: .89; letter-spacing: -.005em; text-shadow: 0 4px 42px #08070898; }
.hero h1 > span { display: block; }
.hero-period { color: var(--hot); }
.hero-tagline { margin-top: 26px; color: var(--text); font-size: clamp(1.1rem, 1.95vw, 1.55rem); line-height: 1.23; font-weight: 700; letter-spacing: -.015em; }
.hero-description { color: #ccc6bf; margin-top: 12px; max-width: 39ch; font-size: .96rem; }
.hero-actions { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; margin-top: 26px; }
.hero-caption { display: flex; align-items: center; gap: 10px; position: absolute; right: 8px; bottom: 139px; color: #c2a491; font: .64rem/1.45 var(--mono); letter-spacing: .13em; text-align: right; }
.hero-caption strong { color: #f6d5c2; font-weight: 600; }
.crosshair { position: relative; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #bd7857; }
.crosshair::before, .crosshair::after { content: ""; position: absolute; background: #bd7857; inset: 50% 3px auto; height: 1px; }
.crosshair::after { transform: rotate(90deg); }
.telemetry { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid #39312c; background: #101010e8; margin-top: clamp(44px, 6vw, 84px); position: relative; z-index: 1; }
.telemetry::before { content: ""; background: var(--hot); height: 1px; width: 45px; position: absolute; top: -1px; left: -1px; }
.telemetry > div { padding: 15px clamp(12px, 2.4vw, 30px) 16px; }
.telemetry > div + div { border-left: 1px solid #39312c; }
.telemetry span, .panel-label, .op-meta span, .node-label > span { display: block; color: var(--dim); font: .66rem/1.4 var(--mono); letter-spacing: .085em; }
.telemetry strong { display: block; font-size: clamp(1rem, 2vw, 1.3rem); line-height: 1.15; margin-top: 5px; }
.telemetry b { color: var(--hot); font-weight: inherit; }

.section { padding: clamp(65px, 8vw, 114px) 0; }
.section-index { color: #b4aaa1; margin-bottom: 17px; }
.section-index span { color: var(--hot-pale); }
.section h2, .recruit h2 { font-size: clamp(3rem, 6.6vw, 6.35rem); }
.section-intro { display: flex; justify-content: space-between; align-items: end; gap: 26px 44px; margin-bottom: 31px; }
.section-intro h2 { font-size: clamp(2.7rem, 5.85vw, 5.55rem); }
.section-intro > p, .chain-copy > p:not(.section-index), .crew-copy > p, .op-card > p { color: var(--muted); }
.section-intro > p { max-width: 38ch; padding-bottom: 4px; }
.op-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.op-card { position: relative; padding: 22px clamp(15px, 2vw, 26px) 23px; background: var(--panel); border: 1px solid var(--line); }
.op-card::after { content: ""; position: absolute; top: -1px; right: -1px; width: 15px; height: 15px; border-top: 1px solid #6b4939; border-right: 1px solid #6b4939; }
.op-meta { display: flex; justify-content: space-between; align-items: start; gap: 6px; margin-bottom: 20px; }
.op-meta svg { color: var(--hot); width: 28px; height: 28px; }
.op-card h3, .crew-copy h3 { font-size: 1.18rem; letter-spacing: -.025em; line-height: 1.2; }
.op-card p { margin-top: 8px; font-size: .94rem; line-height: 1.46; }

.chain { background: #0d0d0f; border-block: 1px solid #242326; }
.chain-layout { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: clamp(22px, 5vw, 70px); }
.chain-copy > p:not(.section-index) { max-width: 40ch; margin: 21px 0 26px; }
.chain-panel { min-width: 0; border: 1px solid #46362f; background: #101011; }
.panel-label { padding: 12px 16px; display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid #3d302b; }
.panel-label > span:last-child { display: flex; align-items: center; gap: 8px; }
.small-square { width: 6px; height: 6px; border: 1px solid var(--hot); }
.map-diagram { position: relative; min-height: 212px; display: grid; grid-template-columns: repeat(3, 1fr); place-items: center; padding-inline: 4%; background: radial-gradient(ellipse at center, #3520199e, #10101120 63%), linear-gradient(#e0906411 1px, transparent 1px) center / 22px 22px, linear-gradient(90deg, #e0906411 1px, transparent 1px) center / 22px 22px; }
.map-lines { position: absolute; inset: 0; height: 100%; width: 100%; color: #96624e; stroke-width: 1; }
.map-node {
  --icon-size: clamp(54px, 8vw, 76px);
  --label-height: 2.3rem;
  --node-gap: .5rem;
  position: relative;
  display: grid;
  grid-template-rows: var(--icon-size) var(--label-height);
  justify-items: center;
  gap: var(--node-gap);
  min-width: 76px;
  padding: 0 3px;
  transform: translateY(calc((var(--label-height) + var(--node-gap)) / 2));
  border: 0;
  background: transparent;
  color: #e9dbd0;
  cursor: pointer;
}
.wormhole-icon {
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: 50%;
  color: #a15b39;
  filter: drop-shadow(0 0 7px #ff6b2733);
  transition: color .2s ease, filter .2s ease;
}
.home-node .wormhole-icon { transform: scale(1.16); }
.node-label { display: grid; gap: 3px; align-content: start; }
.map-node strong { font: 700 1.35rem/1 var(--display); }
.map-node:hover .wormhole-icon { color: #ffc48f; filter: drop-shadow(0 0 10px #ff6b2780); }
.map-node:focus-visible { outline: 0; }
.map-node:focus-visible .wormhole-icon { outline: 2px solid var(--hot-pale); outline-offset: 3px; }
.map-node[aria-pressed="true"] .wormhole-icon { color: var(--hot-pale); filter: drop-shadow(0 0 10px #ff6b2770); }
.map-node[aria-pressed="true"] strong { color: #fff4eb; }
.map-node[aria-pressed="true"] .node-label > span { color: var(--hot-pale); }
.system-detail { min-height: 100px; padding: 15px 16px; border-top: 1px solid #3d302b; }
.system-detail strong { display: block; color: var(--hot-pale); font: 700 .73rem/1.4 var(--mono); letter-spacing: .08em; }
.system-detail p { margin-top: 5px; font-size: .93rem; color: var(--muted); }

.crew-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: clamp(25px, 5.4vw, 80px); }
.crew-layout h2 { font-size: clamp(2.85rem, 5.55vw, 5.4rem); }
.crew-copy { border-left: 1px solid #503328; padding: 4px 0 4px clamp(17px, 3vw, 36px); }
.crew-copy h3 { margin-bottom: 7px; }
.crew-copy h3:not(:first-child) { margin-top: 20px; }
.crew-copy p { max-width: 57ch; }
.recruit { padding: 0 0 clamp(42px, 6vw, 82px); }
.recruit-panel { position: relative; isolation: isolate; overflow: hidden; padding: clamp(24px, 4.4vw, 66px); border: 1px solid #65422f; background: radial-gradient(ellipse at 90% 52%, #3b2014 0%, #171211 45%, #111112 80%); }
.recruit-panel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #131112 18%, #13111200 72%); }
.recruit-emblem { position: absolute; width: min(54%, 630px); height: auto; right: -5%; top: 49%; transform: translateY(-50%) rotate(-5deg); mix-blend-mode: screen; opacity: .54; z-index: -2; }
.requirements { margin-top: 24px; }
.requirements h3 { color: var(--hot-pale); font: 700 .74rem/1.4 var(--mono); letter-spacing: .09em; text-transform: uppercase; margin-bottom: 7px; }
.requirements p { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; color: var(--text); }
.or { display: inline-block; padding: 2px 6px; border: 1px solid #76472f; color: #ffc0a1; font: 700 .64rem/1 var(--mono); }
.recruit-actions { display: flex; align-items: center; gap: 12px 18px; margin-top: 22px; }
.recruit-actions p { color: var(--muted); font-size: .89rem; max-width: 32ch; }
.recruit-actions p strong { color: var(--text); }
.site-footer { border-top: 1px solid #28282b; background: #0b0b0c; }
.footer-inner { min-height: 94px; display: flex; align-items: center; justify-content: space-between; gap: 8px 22px; }
.wordmark img { width: 214px; height: auto; }
.footer-inner p { color: var(--dim); font: .67rem/1.5 var(--mono); letter-spacing: .06em; }
@media (max-width: 1000px) {
  .hero-art { background-position: center, center, 61% center; }
  .section-intro { align-items: start; flex-direction: column; }
  .section-intro > p { max-width: 56ch; }
  .op-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .header-inner { flex-wrap: wrap; gap: 0 9px; padding: 11px 0 0; }
  .brand { gap: 5px; }
  .brand img { width: 34px; height: 34px; }
  .brand strong { font-size: .75rem; }
  .brand small { font-size: .59rem; }
  .header-cta { font-size: .65rem; gap: 5px; padding-inline: 9px; min-height: 36px; }
  .header-cta svg { width: 13px; height: 13px; }
  .main-nav { order: 3; flex: 1 1 100%; justify-content: space-between; gap: 8px; border-top: 1px solid #232325; margin-top: 10px; min-height: 39px; }
  .main-nav a { font-size: .64rem; }
  .hero-art { background-image: linear-gradient(90deg, #090a0bd6 0%, #090a0b80 55%, #090a0b33 100%), linear-gradient(0deg, #090a0b 5%, #090a0b00 60%), url("assets/event-horizon-rupture.webp"); background-position: center, center, 88% top; }
  .hero h1 { font-size: clamp(2.35rem, 12.2vw, 5.75rem); }
  .hero-caption { display: none; }
  .hero-actions { gap: 7px 17px; }
  .telemetry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .telemetry > div:nth-child(3) { border-left: 0; }
  .telemetry > div:nth-child(n+3) { border-top: 1px solid #39312c; }
  .chain-layout, .crew-layout { grid-template-columns: 1fr; }
  .map-diagram { min-height: 174px; }
  .system-detail { min-height: 106px; }
  .recruit-emblem { width: 82%; right: -25%; opacity: .29; }
  .recruit-actions { align-items: start; flex-direction: column; }
  .footer-inner { flex-wrap: wrap; padding-block: 6px 14px; }
  .wordmark { flex-basis: 100%; }
  .wordmark img { width: 195px; }
}
@media (max-width: 380px) {
  .op-grid { grid-template-columns: 1fr; }
  .hero .eyebrow { font-size: .66rem; gap: 6px; }
  .header-inner { column-gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}