/* =================================================================================================
   STARWRIT pre-launch site: the shared stylesheet ("The Ledger at dusk")
   Used by index.html, states.html, privacy.html, 00-system.html and the design canvas.
   Tokens are copied from the game (src/ui/tokens.css, concepts/ui/ledger-kit.css). Fonts are
   loaded by assets/fonts.css (self-hosted) on the live site.
   ================================================================================================= */

:root {
  /* ground and panels */
  --ground: #07080b;
  --ink: #05070a;
  --panel: rgba(10, 14, 20, .72);
  --panel-solid: rgba(8, 11, 16, .92);
  --panel-soft: rgba(10, 14, 20, .5);
  --line: rgba(207, 246, 255, .16);
  --line-2: rgba(207, 246, 255, .3);
  --line-3: rgba(207, 246, 255, .55);

  /* signal colours */
  --holo: #cff6ff;
  --text: rgba(207, 246, 255, .9);
  --dim: rgba(207, 246, 255, .68);
  --faint: rgba(207, 246, 255, .46);
  --ghost: rgba(207, 246, 255, .14);
  --amber: #ffb347;
  --orange: #ff5a2a;
  --orange-2: #ffa04d;
  --red: #ff4d3d;
  --green: #7dffc4;

  /* planet accents */
  --zhar: #ff8a4c;
  --nerith: #3fd6c1;
  --kryos: #9fd8ff;
  --pyrrhos: #ff5a1f;
  --aurelion: #c58bff;
  --accent: var(--holo);

  /* type */
  --f-display: 'Chakra Petch', 'Rajdhani', 'Oxanium', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --ls-label: .24em;

  /* layout and motifs */
  --cut: 10px;
  --gutter: clamp(16px, 4.4vw, 64px);
  --max: 1280px;
  --header-h: 72px;
  --scan: repeating-linear-gradient(to bottom, rgba(207, 246, 255, .045) 0 1px, transparent 1px 3px);
  --shadow-text: 0 1px 2px rgba(0, 3, 8, .9), 0 0 14px rgba(0, 6, 14, .5);

  /* motion */
  --t-fast: 120ms;
  --t-med: 220ms;
  --t-slow: 420ms;
  --e-out: cubic-bezier(.2, .7, .2, 1);
}

/* ---------------------------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  background: var(--ground);
}
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 400 17px/1.55 var(--f-display);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--amber); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: #ffc874; }
::selection { background: rgba(255, 179, 71, .35); color: #fff; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
[hidden] { display: none !important; }
.list-reset { list-style: none; margin: 0; padding: 0; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -200px; z-index: 100; padding: 15px 18px;
  font: 600 14px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase;
  color: #1a0a02; background: var(--amber); text-decoration: none;
}
.skip-link:focus { top: 12px; }

.icon {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.icon--fill { fill: currentColor; stroke: none; }

/* ---------------------------------------------------------------------------------------------
   Layout
   --------------------------------------------------------------------------------------------- */
.page { position: relative; min-width: 0; background: var(--ground); }
.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { position: relative; padding-block: clamp(72px, 8vw, 120px); }
.section--rule::before {
  content: ''; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
}
.section-head { display: grid; gap: 18px; max-width: 780px; margin-bottom: clamp(36px, 4.5vw, 60px); }

/* ---------------------------------------------------------------------------------------------
   Type
   --------------------------------------------------------------------------------------------- */
.label {
  font: 600 12px/1.25 var(--f-display); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--dim);
}
.label--accent { color: var(--accent); }
.mono { font-family: var(--f-mono); letter-spacing: .02em; }
.eyebrow {
  display: flex; align-items: center; gap: 14px;
  font: 600 12.5px/1.2 var(--f-display); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--holo);
}
.eyebrow { white-space: nowrap; }
.eyebrow::after {
  content: ''; flex: 1 1 0; max-width: 220px; min-width: 16px; height: 1px;
  background: linear-gradient(90deg, var(--line-2), transparent);
}
.eyebrow__num { font: 500 12px/1 var(--f-mono); letter-spacing: .1em; color: var(--amber); }
.h1, .h2, .h3 { color: var(--holo); text-transform: uppercase; text-wrap: balance; }
.h2 { font: 700 clamp(34px, 4.4vw, 62px)/1 var(--f-display); letter-spacing: .01em; }
.h3 { font: 700 22px/1.1 var(--f-display); letter-spacing: .04em; }
.lead {
  max-width: 62ch; font: 400 clamp(17px, 1.4vw, 19.5px)/1.55 var(--f-display);
  color: var(--text); text-wrap: pretty;
}
.body-dim { color: var(--dim); }
.amber { color: var(--amber); }

/* Bounty figure: big amber italic with a small "CR" */
.cr {
  display: inline-flex; align-items: baseline; gap: .22em; color: var(--amber);
  font: italic 700 48px/1 var(--f-display); font-variant-numeric: tabular-nums; letter-spacing: .01em;
  text-shadow: 0 0 18px rgba(255, 179, 71, .35), var(--shadow-text); white-space: nowrap;
}
.cr > i { font: 600 .4em/1 var(--f-display); font-style: normal; letter-spacing: .18em; opacity: .9; }

/* ---------------------------------------------------------------------------------------------
   Wordmark: Chakra Petch 700 italic, holo gradient, thin amber underline rule
   --------------------------------------------------------------------------------------------- */
.wordmark {
  display: inline-flex; flex-direction: column; align-items: stretch; gap: .12em;
  font: italic 700 1em/.9 var(--f-display); letter-spacing: .07em; text-transform: uppercase;
  color: var(--holo); text-decoration: none; white-space: nowrap;
}
.wordmark:hover { color: var(--holo); }
.wordmark__text {
  padding-right: .1em;
  background: linear-gradient(180deg, #ffffff 0%, #effcff 40%, #a8e9ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 .03em 0 rgba(0, 0, 0, .35)) drop-shadow(0 0 .25em rgba(120, 215, 255, .22));
}
.wordmark__rule {
  display: block; height: max(1px, .022em); margin-right: .1em;
  background: linear-gradient(90deg, var(--amber) 0%, rgba(255, 179, 71, .9) 55%, rgba(255, 179, 71, 0) 100%);
  box-shadow: 0 0 10px rgba(255, 179, 71, .35);
}
.wordmark--header { font-size: 22px; padding-block: 11px; }
.footer__top .wordmark { padding-block: 8px; }

/* ---------------------------------------------------------------------------------------------
   Chamfered shapes (cx): skin on ::before, amber focus ring on ::after.
   Set --cut, --fill and --edge per component. The element itself is never clipped, so the
   ring can sit outside it.
   --------------------------------------------------------------------------------------------- */
:is(.cx, .panel, .btn, .icon-btn, .release, .field, .chip, .signup__msg, .social-tile, .dossier, .dossier__pay, .ship, .shot, .trailer__btn, .locked, .join__panel, .review-card) { position: relative; isolation: isolate; }
.cx { --cut: 10px; --fill: var(--panel); --edge: var(--line); }
:is(.cx, .panel, .btn, .icon-btn, .release, .field, .chip, .signup__msg, .social-tile, .dossier, .dossier__pay, .ship, .shot, .trailer__btn, .locked, .join__panel, .review-card)::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(135deg, transparent calc(var(--cut) * .7071 - .6px), var(--edge) calc(var(--cut) * .7071 - .1px), var(--edge) calc(var(--cut) * .7071 + .5px), transparent calc(var(--cut) * .7071 + 1px)) top left / var(--cut) var(--cut) no-repeat,
    linear-gradient(-45deg, transparent calc(var(--cut) * .7071 - .6px), var(--edge) calc(var(--cut) * .7071 - .1px), var(--edge) calc(var(--cut) * .7071 + .5px), transparent calc(var(--cut) * .7071 + 1px)) bottom right / var(--cut) var(--cut) no-repeat,
    var(--fill);
  box-shadow: inset 0 0 0 1px var(--edge);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: filter var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
:is(.cx, .panel, .btn, .icon-btn, .release, .field, .chip, .signup__msg, .social-tile, .dossier, .dossier__pay, .ship, .shot, .trailer__btn, .locked, .join__panel, .review-card)::after {
  --rc: calc(var(--cut) + 2px);
  content: ''; position: absolute; inset: -5px; z-index: -1; pointer-events: none;
  background: var(--amber); opacity: 0;
  clip-path: polygon(evenodd,
    var(--rc) 0, 100% 0, 100% calc(100% - var(--rc)), calc(100% - var(--rc)) 100%, 0 100%, 0 var(--rc), var(--rc) 0,
    calc(var(--rc) + .83px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) calc(100% - var(--rc) - .83px),
    calc(100% - var(--rc) - .83px) calc(100% - 2px), 2px calc(100% - 2px), 2px calc(var(--rc) + .83px),
    calc(var(--rc) + .83px) 2px);
}
:is(.cx, .panel, .btn, .icon-btn, .release, .field, .chip, .signup__msg, .social-tile, .dossier, .dossier__pay, .ship, .shot, .trailer__btn, .locked, .join__panel, .review-card):focus-visible { outline: none; }
:is(.cx, .panel, .btn, .icon-btn, .release, .field, .chip, .signup__msg, .social-tile, .dossier, .dossier__pay, .ship, .shot, .trailer__btn, .locked, .join__panel, .review-card):focus-visible::after,
:is(.cx, .panel, .btn, .icon-btn, .release, .field, .chip, .signup__msg, .social-tile, .dossier, .dossier__pay, .ship, .shot, .trailer__btn, .locked, .join__panel, .review-card).is-focus::after,
.field:focus-within::after,
.chip:has(input:focus-visible)::after { opacity: 1; }

/* Panels */
.panel { --cut: 12px; --fill: var(--panel); --edge: var(--line); }
.panel--solid { --fill: var(--panel-solid); }
.panel--glass::before { -webkit-backdrop-filter: blur(12px) saturate(1.15); backdrop-filter: blur(12px) saturate(1.15); }
.panel--accent { --edge: color-mix(in srgb, var(--accent) 55%, transparent); }

/* Corner brackets on the two square corners */
.brackets { position: absolute; inset: 0; pointer-events: none; }
.brackets::before, .brackets::after {
  content: ''; position: absolute; width: 14px; height: 14px; border: 0 solid var(--line-3);
}
.brackets::before { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.brackets::after { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }

/* Scanlines over any image */
.scan { position: relative; }
.scan::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: var(--scan); opacity: .8;
}

/* ---------------------------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------------------------- */
.btn {
  --cut: 12px; --fill: rgba(10, 14, 20, .6); --edge: var(--line-2);
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 0 28px; margin: 0; border: 0; background: none; cursor: pointer;
  font: 700 15px/1 var(--f-display); letter-spacing: .22em; text-transform: uppercase;
  color: var(--holo); text-decoration: none; white-space: nowrap;
  -webkit-tap-highlight-color: transparent; user-select: none;
  transition: transform var(--t-fast) ease, color var(--t-fast) ease;
}
.btn:hover { color: var(--holo); --edge: var(--line-3); --fill: rgba(207, 246, 255, .07); }
.btn:active { transform: translateY(1px); }
.btn .icon { width: 18px; height: 18px; }

/* Primary: the one CTA style (Notify me). Player orange to amber, faint scanlines. */
.btn--primary {
  --edge: transparent;
  --fill: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .08) 0 1px, transparent 1px 3px),
          linear-gradient(100deg, var(--orange) 0%, #ff7a34 45%, var(--orange-2) 100%);
  color: #1a0a02;
  text-shadow: 0 1px 0 rgba(255, 220, 190, .35);
}
.btn--primary::before { box-shadow: inset 0 1px 0 rgba(255, 240, 220, .55), inset 0 -2px 0 rgba(120, 30, 0, .35); }
.btn--primary:hover { color: #1a0a02; --edge: transparent;
  --fill: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .08) 0 1px, transparent 1px 3px),
          linear-gradient(100deg, var(--orange) 0%, #ff7a34 45%, var(--orange-2) 100%); }
.btn--primary:hover::before { filter: brightness(1.1) saturate(1.05); }

/* Secondary: hairline on glass */
.btn--ghost { --fill: rgba(10, 14, 20, .6); --edge: var(--line-2); }
.btn--ghost::before { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

.btn--sm { --cut: 9px; min-height: 44px; padding: 0 18px; font-size: 13px; letter-spacing: .2em; gap: 10px; }
.btn--lg { min-height: 64px; padding: 0 34px; font-size: 16px; }
.btn--block { width: 100%; }
.btn:disabled, .btn[aria-disabled='true'] { cursor: not-allowed; opacity: .55; transform: none; }
.btn.is-loading { cursor: progress; opacity: 1; }
.btn.is-loading::before { filter: saturate(.75) brightness(.9); }
.btn__bar {
  position: absolute; left: 14px; right: 14px; bottom: 9px; height: 2px; overflow: hidden;
  background: rgba(26, 10, 2, .18); display: none;
}
.btn__bar::after {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 38%; background: #1a0a02;
  animation: bar-run 1s var(--e-out) infinite;
}
.btn.is-loading .btn__bar { display: block; }
@keyframes bar-run { from { transform: translateX(-100%); } to { transform: translateX(270%); } }

/* Text link with arrow */
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font: 600 13px/1 var(--f-display); letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
}
.link-arrow .icon { width: 16px; height: 16px; transition: transform var(--t-fast) ease; }
.link-arrow:hover .icon { transform: translateX(3px); }

/* Icon-only button (menu, close, lightbox controls) */
.icon-btn {
  --cut: 8px; --fill: rgba(10, 14, 20, .6); --edge: var(--line-2);
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0;
  background: none; color: var(--holo); cursor: pointer;
}
.icon-btn:hover { --edge: var(--line-3); --fill: rgba(207, 246, 255, .08); }

/* ---------------------------------------------------------------------------------------------
   Tags, release chip, media captions
   --------------------------------------------------------------------------------------------- */
.tag {
  display: inline-flex; align-items: center; gap: 8px; min-height: 26px; padding: 0 10px;
  font: 600 11px/1 var(--f-display); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
  color: var(--holo); box-shadow: inset 0 0 0 1px var(--line-2); background: rgba(207, 246, 255, .04);
}
.tag--amber { color: var(--amber); box-shadow: inset 0 0 0 1px rgba(255, 179, 71, .5); background: rgba(255, 179, 71, .08); }
.tag--accent { color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); }

.release {
  --cut: 8px; --fill: rgba(10, 14, 20, .66); --edge: rgba(255, 179, 71, .45);
  display: inline-flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 14px 0 12px;
  font: 500 12px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--amber);
}
.release__dot {
  width: 7px; height: 7px; flex: none; background: var(--amber); border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255, 179, 71, .6); animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 179, 71, .55); }
  70% { box-shadow: 0 0 0 8px rgba(255, 179, 71, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 179, 71, 0); }
}

.media-tag {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 4px;
  font: 500 10.5px/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  color: var(--holo); background: rgba(5, 7, 10, .8); box-shadow: inset 0 0 0 1px var(--line-2);
}
.media-tag--concept { color: #ffd9a6; box-shadow: inset 0 0 0 1px rgba(255, 179, 71, .45); }
.media-tag--static { position: static; }
.media-tag--tr { left: auto; right: 10px; }

/* ---------------------------------------------------------------------------------------------
   Threat chevrons and Ledger stamps
   --------------------------------------------------------------------------------------------- */
.threat { display: inline-flex; gap: 4px; align-items: center; }
.threat > b {
  width: 13px; height: 15px; background: var(--red);
  clip-path: polygon(0 0, 55% 0, 100% 50%, 55% 100%, 0 100%, 45% 50%);
  filter: drop-shadow(0 0 4px rgba(255, 77, 61, .6));
}
.threat > b.off { background: rgba(207, 246, 255, .2); filter: none; }

.stamp {
  --c: var(--amber);
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px 5px;
  font: 500 13px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
  color: var(--c); border: 2px solid var(--c); outline: 1px solid var(--c); outline-offset: 2px;
  transform: rotate(-7deg); opacity: .92;
}
.stamp--sm { font-size: 10.5px; padding: 4px 7px 3px; border-width: 1.5px; outline-offset: 1.5px; }
.stamp--grey { --c: rgba(205, 214, 222, .82); }
.stamp--cyan { --c: var(--holo); }
.stamp--green { --c: var(--green); }
.stamp--red { --c: #e0796f; }
.serial { font: 500 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }

/* ---------------------------------------------------------------------------------------------
   Social links
   --------------------------------------------------------------------------------------------- */
.socials { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.social-link {
  display: inline-grid; place-items: center; width: 44px; height: 44px; color: var(--dim);
  text-decoration: none; transition: color var(--t-fast) ease;
}
.social-link:hover { color: var(--amber); }
.social-link .icon { width: 20px; height: 20px; }

.social-tiles {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(168px, 100%), 1fr));
}
.social-tile {
  --cut: 10px; --fill: rgba(10, 14, 20, .66); --edge: var(--line);
  display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; row-gap: 4px;
  min-height: 84px; padding: 16px 18px; text-decoration: none; color: var(--holo);
}
.social-tile:hover { --edge: rgba(255, 179, 71, .6); --fill: rgba(255, 179, 71, .06); color: var(--holo); }
.social-tile .icon { grid-row: span 2; width: 28px; height: 28px; color: var(--amber); }
.social-tile__name { font: 700 16px/1.1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; }
.social-tile__verb { font: 500 11px/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }

.social-link--labelled { display: inline-flex; align-items: center; width: auto; gap: 8px; padding: 0 10px; font: 600 12px/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; }

/* ---------------------------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------------------------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--header-h);
  transition: background-color var(--t-med) ease, box-shadow var(--t-med) ease;
}
.site-header.is-scrolled, .site-header.is-open {
  background: rgba(10, 14, 20, .84);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: inset 0 -1px 0 var(--line);
}
.site-header__inner {
  display: flex; align-items: center; gap: 32px; height: 100%;
  max-width: calc(1360px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter);
}
.site-header .wordmark { flex: none; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a, .nav-demo a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  font: 600 12.5px/1 var(--f-display); letter-spacing: .22em; text-transform: uppercase;
  color: var(--dim); text-decoration: none; position: relative;
}
.nav a::after, .nav-demo a::after {
  content: ''; position: absolute; left: 12px; right: calc(12px + .22em); bottom: 8px; height: 1px;
  background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform var(--t-med) var(--e-out);
}
.nav a:hover, .nav-demo a:hover { color: var(--holo); }
.nav a:hover::after, .nav-demo a:hover::after { transform: scaleX(1); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.header-actions .socials { margin-right: 4px; }
.menu-btn { display: none; }
.site-header--static { position: relative; z-index: 1; }

/* Mobile menu sheet */
.menu-sheet {
  position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 49;
  max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
  padding: 12px var(--gutter) 28px; background: rgba(8, 11, 16, .97);
  box-shadow: inset 0 -1px 0 var(--line), 0 24px 48px rgba(0, 0, 0, .5);
}
.menu-sheet__nav { display: grid; }
.menu-sheet__nav a {
  display: flex; align-items: center; justify-content: space-between; min-height: 56px;
  font: 600 20px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase;
  color: var(--holo); text-decoration: none; border-bottom: 1px solid var(--line);
}
.menu-sheet__nav a .icon { color: var(--amber); width: 18px; height: 18px; }
.menu-sheet__foot { display: grid; gap: 16px; margin-top: 22px; }

@media (max-width: 1099px) {
  .nav, .header-actions .socials, .header-actions .header-cta { display: none; }
  .menu-btn { display: inline-grid; }
}
@media (min-width: 1100px) { .menu-sheet { display: none !important; } }

/* ---------------------------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------------------------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(680px, 100svh, 1040px);
  display: flex; align-items: center;
  padding-top: calc(var(--header-h) + 40px); padding-bottom: 72px;
}
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #2a2140; }
.hero__media picture { position: absolute; inset: 0; display: block; }
.hero__media img {
  position: absolute; left: 0; top: -4%; width: 100%; height: 108%; max-width: none;
  object-fit: cover; object-position: 58% 50%; will-change: transform;
}
.hero__img--tall { display: none; }
.hero__grade { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__grade::before { /* dusk grade */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, #160d2e 0%, #2b1530 60%, #3a1a1e 100%);
  mix-blend-mode: multiply; opacity: .42;
}
.hero__grade::after { /* legibility */
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 8, 11, .92) 0%, rgba(7, 8, 11, .78) 24%, rgba(7, 8, 11, .3) 46%, rgba(7, 8, 11, 0) 62%),
    linear-gradient(0deg, var(--ground) 0%, rgba(7, 8, 11, 0) 26%),
    linear-gradient(180deg, rgba(7, 8, 11, .72) 0%, rgba(7, 8, 11, 0) 18%),
    var(--scan);
}
.hero__frame { position: absolute; inset: calc(var(--header-h) + 8px) var(--gutter) 22px; pointer-events: none; z-index: -1; }
.hero__frame::before, .hero__frame::after {
  content: ''; position: absolute; width: 22px; height: 22px; border: 0 solid var(--line-2);
}
.hero__frame::before { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.hero__frame::after { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }

.hero__content { position: relative; display: grid; gap: 22px; max-width: 640px; }
.hero__eyebrow {
  display: flex; align-items: center; gap: 14px;
  font: 600 12.5px/1.3 var(--f-display); letter-spacing: .26em; text-transform: uppercase; color: var(--amber);
}
.hero__eyebrow::before { content: ''; width: 36px; height: 1px; background: var(--amber); flex: none; }
.hero__title { font-size: clamp(56px, 9.2vw, 136px); margin-left: -.04em; line-height: 0; }
.hero__title .wordmark { gap: .1em; }
.hero__line {
  font: 500 clamp(19px, 1.9vw, 25px)/1.35 var(--f-display); letter-spacing: .02em;
  color: var(--holo); text-shadow: var(--shadow-text); text-wrap: balance;
}
.hero__form { margin-top: 6px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__caption { position: absolute; right: var(--gutter); bottom: 26px; z-index: 1; }
.hero__caption .media-tag { position: static; }

@media (max-width: 767px) {
  .hero { align-items: flex-end; min-height: 0; padding-top: 352px; padding-bottom: 48px; }
  .hero__media { bottom: auto; height: 470px; }
  .hero__grade { bottom: auto; height: 470px; }
  .hero__img--wide { display: none; }
  .hero__img--tall { display: block; }
  .hero__media img { object-position: 50% 40%; top: 0; height: 100%; }
  .hero__grade::after {
    background:
      linear-gradient(0deg, var(--ground) 0%, rgba(7, 8, 11, .82) 18%, rgba(7, 8, 11, .3) 40%, rgba(7, 8, 11, 0) 58%),
      linear-gradient(180deg, rgba(7, 8, 11, .7) 0%, rgba(7, 8, 11, 0) 16%),
      var(--scan);
  }
  .hero__frame { display: none; }
  .hero__caption { top: calc(var(--header-h) + 8px); bottom: auto; right: var(--gutter); }
  .hero__content { gap: 18px; }
  .hero__eyebrow { font-size: 11px; letter-spacing: .2em; gap: 10px; }
  .hero__eyebrow::before { width: 22px; }
}

/* ---------------------------------------------------------------------------------------------
   Sign-up form (one component, two sizes)
   --------------------------------------------------------------------------------------------- */
.signup { display: grid; gap: 14px; }
.signup__fields { display: grid; gap: 14px; }
.signup__label { font: 600 12px/1.2 var(--f-display); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--dim); }
.signup__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.signup__row .field { flex: 1 1 260px; }
.signup__row .btn { flex: 0 0 auto; }

.field {
  --cut: 10px; --fill: rgba(5, 7, 10, .8); --edge: var(--line-2);
  display: flex; align-items: center; min-height: 56px;
}
.field:hover { --edge: var(--line-3); }
.field:focus-within { --edge: var(--amber); }
.field.is-focus { --edge: var(--amber); }
.field.is-invalid { --edge: var(--red); --fill: rgba(40, 10, 8, .82); }
.field__icon { margin-left: 16px; color: var(--dim); }
.field.is-invalid .field__icon { color: var(--red); }
.field__input {
  flex: 1; min-width: 0; height: 56px; padding: 0 16px; margin: 0;
  background: transparent; border: 0; outline: 0; border-radius: 0;
  font: 500 17px/1 var(--f-display); letter-spacing: .02em; color: var(--holo);
}
.field__input::placeholder { color: rgba(207, 246, 255, .55); }
.field__input:disabled { cursor: not-allowed; color: var(--dim); }
.field__input:-webkit-autofill {
  -webkit-text-fill-color: var(--holo); caret-color: var(--holo);
  box-shadow: inset 0 0 0 100px #0b0f14; transition: background-color 99999s;
}

.chips { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 10px; }
.chips__legend { padding: 0; margin-bottom: 10px; font: 600 12px/1.2 var(--f-display); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--dim); }
.chips__legend span { letter-spacing: .08em; text-transform: none; font-weight: 500; }
.chips__row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  --cut: 7px; --fill: rgba(10, 14, 20, .62); --edge: var(--line-2);
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 15px 0 12px;
  font: 600 13px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase;
  color: var(--dim); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
}
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.chip__tick {
  display: grid; place-items: center; width: 15px; height: 15px; flex: none;
  box-shadow: inset 0 0 0 1px var(--line-3); color: transparent;
}
.chip__tick .icon { width: 11px; height: 11px; stroke-width: 2.4; }
.chip:hover { --edge: var(--line-3); color: var(--holo); }
.chip:has(input:checked), .chip.is-on { --fill: rgba(255, 179, 71, .12); --edge: rgba(255, 179, 71, .72); color: var(--amber); }
.chip:has(input:checked) .chip__tick, .chip.is-on .chip__tick { background: var(--amber); box-shadow: none; color: #1a0a02; }
.chip:has(input:disabled), .chip.is-disabled { opacity: .5; cursor: not-allowed; }

.signup__consent { max-width: 56ch; font: 400 13.5px/1.5 var(--f-display); color: var(--dim); text-wrap: pretty; }
.signup__consent a { color: var(--amber); }
.signup__hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.signup__turnstile:empty { display: none; }

.signup__msg {
  --cut: 8px; --fill: rgba(10, 14, 20, .8); --edge: var(--line-2);
  display: flex; align-items: flex-start; gap: 12px; padding: 13px 16px;
  font: 500 15.5px/1.45 var(--f-display); color: var(--holo);
}
.signup__msg:empty { display: none; }
.signup__msg:focus { outline: none; }
.signup__msg:focus-visible::after { opacity: 1; }
.signup__msg .icon { width: 20px; height: 20px; margin-top: 1px; }
.signup__msg p { margin: 0; }
.signup__msg-body { display: grid; gap: 4px; flex: 1; }
.signup__msg-sub { font-size: 13.5px; font-weight: 400; color: var(--dim); }
.signup__msg .stamp { margin-left: auto; align-self: center; }
.signup__msg--invalid, .signup__msg--error, .signup__msg--offline { --edge: rgba(255, 77, 61, .6); --fill: rgba(40, 10, 8, .78); color: #ff7a6c; }
.signup__msg--success { --edge: rgba(125, 255, 196, .55); --fill: rgba(6, 30, 22, .78); color: var(--green); }
.signup__msg--exists { --edge: rgba(255, 179, 71, .55); --fill: rgba(36, 24, 6, .78); color: var(--amber); }
.signup[data-state='success'] .signup__fields { display: none; }
.signup[data-state='success'] .signup__msg { padding: 18px 20px; }

/* larger instance (Join the hunt) */
.signup--lg .field, .signup--lg .field__input { min-height: 64px; height: 64px; }
.signup--lg .field__input { font-size: 19px; }
.signup--lg .btn { min-height: 64px; padding: 0 34px; font-size: 16px; }

@media (max-width: 520px) {
  .signup__row { flex-direction: column; }
  .signup__row .field { flex: 0 0 auto; }
  .signup__row .btn { width: 100%; }
}

/* ---------------------------------------------------------------------------------------------
   The Hunt: a numbered strip of 8 steps
   --------------------------------------------------------------------------------------------- */
.hunt-scroller { position: relative; }
.hunt {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px;
}
.hunt__step { display: grid; gap: 14px; align-content: start; min-width: 0; }
.hunt__node { display: flex; align-items: center; gap: 10px; font: 500 12px/1 var(--f-mono); letter-spacing: .1em; color: var(--amber); }
.hunt__node::before {
  content: ''; width: 9px; height: 9px; flex: none; transform: rotate(45deg);
  box-shadow: inset 0 0 0 1.5px var(--amber); background: rgba(255, 179, 71, .18);
}
.hunt__node::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255, 179, 71, .55), var(--line)); margin-right: -14px; }
.hunt__step:last-child .hunt__node::after { background: linear-gradient(90deg, rgba(255, 179, 71, .55), transparent); margin-right: 0; }
.hunt__fig {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #0d1118;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.hunt__fig img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.92) brightness(.92); transition: transform 700ms var(--e-out), filter var(--t-slow) ease;
}
.hunt__step:hover .hunt__fig img { transform: scale(1.045); filter: none; }
.hunt__fig .media-tag { left: 6px; bottom: 6px; font-size: 9.5px; padding: 4px 6px 3px; }
.hunt__label { font: 700 15px/1.15 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--holo); text-wrap: balance; }
.hunt__text { font: 400 14px/1.45 var(--f-display); color: var(--dim); text-wrap: pretty; }
.hunt-note { margin-top: 26px; font: 500 12px/1.4 var(--f-mono); letter-spacing: .06em; color: var(--dim); }

@media (max-width: 1099px) {
  .hunt-scroller {
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 14px; scroll-padding-inline: var(--gutter);
    scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
  }
  .hunt { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 30%; }
  .hunt__step { scroll-snap-align: start; }
}
@media (max-width: 767px) { .hunt { grid-auto-columns: 68%; } }

/* ---------------------------------------------------------------------------------------------
   Writ I: dossier card + two screenshots
   --------------------------------------------------------------------------------------------- */
.writ { --accent: var(--zhar); }
.writ__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 28px; align-items: stretch; }
.writ__shots { display: grid; gap: 16px; grid-template-rows: 1fr 1fr; contain: size; }
.writ__shots .shot-fig img { aspect-ratio: auto; height: 100%; }
@media (max-width: 999px) {
  .writ__grid { grid-template-columns: minmax(0, 1fr); }
  .writ__shots { contain: none; grid-template-rows: none; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
  .writ__shots .shot-fig img { aspect-ratio: 16 / 10; height: auto; }
}

.dossier { --cut: 14px; --fill: rgba(9, 12, 18, .88); --edge: color-mix(in srgb, var(--accent) 50%, transparent); padding: clamp(24px, 3.4vw, 44px); display: flex; flex-direction: column; gap: 26px; }
.dossier__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.dossier__kicker { display: grid; gap: 8px; }
.dossier__stamp { margin-top: 6px; margin-right: 4px; }
.dossier__name { font: 700 clamp(36px, 4.6vw, 62px)/.95 var(--f-display); letter-spacing: .02em; text-transform: uppercase; color: var(--holo); text-shadow: var(--shadow-text); }
.dossier__writ { font: italic 500 18px/1.3 var(--f-display); color: var(--dim); margin-top: 10px; }
.dossier__facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line);
}
.dossier__facts > div { padding: 14px 14px 14px 0; display: grid; gap: 8px; align-content: start; }
.dossier__facts > div + div { padding-left: 14px; box-shadow: inset 1px 0 0 var(--line); }
@media (max-width: 559px) {
  .dossier__facts { grid-template-columns: minmax(0, 1fr); box-shadow: none; }
  .dossier__facts > div, .dossier__facts > div + div { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; box-shadow: inset 0 1px 0 var(--line); }
  .dossier__facts > div:last-child { box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }
}
.dossier__facts dt { font: 600 11px/1.2 var(--f-display); letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }
.dossier__facts dd { font: 500 17px/1.3 var(--f-display); color: var(--holo); }
.dossier__brief { font: 400 17px/1.6 var(--f-display); color: var(--text); max-width: 54ch; text-wrap: pretty; }
.dossier__pay {
  --cut: 10px; --fill: rgba(255, 179, 71, .05); --edge: rgba(255, 179, 71, .32);
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 22px 24px; margin-top: auto;
}
.dossier__pay .cr { font-size: clamp(48px, 5.4vw, 76px); }
.dossier__pay .label { margin-bottom: 10px; }
.dossier__scan { position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: var(--scan); opacity: .55; clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.dossier > *:not(.dossier__scan):not(.brackets) { position: relative; z-index: 1; }
.dossier.is-lit { animation: holo-flicker 900ms steps(1, end) 1; }
@keyframes holo-flicker {
  0% { opacity: 0; } 8% { opacity: .55; } 14% { opacity: .12; } 22% { opacity: .8; }
  30% { opacity: .35; } 38% { opacity: 1; } 56% { opacity: .82; } 62% { opacity: 1; } 100% { opacity: 1; }
}

.shot-fig { position: relative; overflow: hidden; background: #0d1118; min-height: 0;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.shot-fig img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }

/* ---------------------------------------------------------------------------------------------
   The Hangar
   --------------------------------------------------------------------------------------------- */
.ships { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.ship { --cut: 10px; --fill: rgba(10, 14, 20, .7); --edge: var(--line); display: grid; align-content: start; min-width: 0; }
.ship--hero { --edge: rgba(255, 179, 71, .55); }
.ship__img { width: 100%; aspect-ratio: 560 / 322; object-fit: cover;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px); }
.ship__body { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; padding: 14px 16px 16px; }
.ship__name { font: 700 18px/1.1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--holo); }
.ship__class { font: 500 13px/1 var(--f-mono); letter-spacing: .1em; color: var(--amber); }
.ship__tag { position: absolute; top: 10px; right: 10px; z-index: 2; }
.hangar__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; margin-top: 26px; }
.hangar__line { font: 500 18px/1.45 var(--f-display); color: var(--holo); max-width: 60ch; }

@media (max-width: 1099px) {
  .ships-scroller {
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 14px; scroll-padding-inline: var(--gutter);
    scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
  }
  .ships { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 34%; }
  .ship { scroll-snap-align: start; }
}
@media (max-width: 767px) { .ships { grid-auto-columns: 74%; } }

/* ---------------------------------------------------------------------------------------------
   Media: trailer + gallery
   --------------------------------------------------------------------------------------------- */
.trailer {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; padding: 0; border: 0;
  background: #0d1118; cursor: pointer; color: var(--holo);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  margin-bottom: 18px;
}
.trailer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.7) saturate(.95); transition: filter var(--t-slow) ease; }
.trailer:hover img { filter: brightness(.82); }
.trailer__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: 16px;
}
.trailer__btn {
  --cut: 14px; --fill: linear-gradient(100deg, var(--orange) 0%, #ff7a34 45%, var(--orange-2) 100%); --edge: transparent;
  display: grid; place-items: center; width: 96px; height: 96px; color: #1a0a02;
}
.trailer__btn .icon { width: 34px; height: 34px; margin-left: 4px; }
.trailer__label { font: 700 15px/1 var(--f-display); letter-spacing: .26em; text-transform: uppercase; text-shadow: var(--shadow-text); }
.trailer:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
.trailer-note { margin: -4px 0 22px; font: 500 11.5px/1.4 var(--f-mono); letter-spacing: .06em; color: var(--dim); }
.trailer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.gallery__item { grid-column: span 4; min-width: 0; }
.gallery__item--feature { grid-column: span 8; grid-row: span 2; }
.shot {
  --cut: 10px; --fill: #0d1118; --edge: transparent;
  position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; color: var(--holo); text-align: left;
}
.shot__img {
  display: block; width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  filter: brightness(.94); transition: filter var(--t-slow) ease;
}
.gallery__item--feature .shot__img { aspect-ratio: auto; }
.shot__img--low { object-position: 50% 74%; }
.shot:hover .shot__img { filter: brightness(1.05); }
.shot__zoom {
  position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 34px; height: 34px;
  background: rgba(5, 7, 10, .72); box-shadow: inset 0 0 0 1px var(--line-2); opacity: 0; transition: opacity var(--t-fast) ease;
}
.shot__zoom .icon { width: 16px; height: 16px; }
.shot:hover .shot__zoom, .shot:focus-visible .shot__zoom { opacity: 1; }

@media (max-width: 767px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gallery__item { grid-column: span 1; }
  .gallery__item--feature { grid-column: span 2; grid-row: span 1; }
  .gallery__item--feature .shot__img { aspect-ratio: 16 / 10; }
  .shot .media-tag { font-size: 9px; padding: 4px 6px 3px; left: 6px; bottom: 6px; white-space: normal; max-width: calc(100% - 12px); }
}

/* Dialogs: lightbox and trailer modal */
.dialog {
  width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(5, 7, 10, .95); color: var(--holo); overflow: hidden;
}
.dialog::backdrop { background: rgba(0, 0, 0, .6); }
.dialog[open] { display: grid; grid-template-rows: auto 1fr auto; }
.dialog__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px var(--gutter); }
.dialog__count { font: 500 12px/1 var(--f-mono); letter-spacing: .14em; color: var(--dim); }
.dialog__stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 var(--gutter); }
.dialog__stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.dialog__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px var(--gutter) 22px; }
.dialog__caption { display: grid; gap: 8px; max-width: 70ch; }
.dialog__caption p { font: 500 16px/1.45 var(--f-display); color: var(--text); }
.dialog__nav { display: flex; gap: 10px; flex: none; }
.dialog--video .dialog__stage { padding-bottom: 32px; }
.dialog--overlay { position: fixed; inset: 0; z-index: 80; width: auto; height: auto; display: grid; grid-template-rows: auto 1fr auto; }
.trailer-placeholder { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center;
  background: #05070a; font: 500 13px/1.6 var(--f-mono); letter-spacing: .06em; color: var(--dim); }
.dialog__video { width: min(100%, calc((100dvh - 160px) * 16 / 9)); aspect-ratio: 16 / 9; background: #000; }
.dialog__video iframe { width: 100%; height: 100%; border: 0; }

/* ---------------------------------------------------------------------------------------------
   Worlds to come: locked Writ cards
   --------------------------------------------------------------------------------------------- */
.worlds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.locked {
  --cut: 12px; --fill: #090c11; --edge: color-mix(in srgb, var(--accent) 50%, transparent);
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 0;
  aspect-ratio: 3 / 4; overflow: hidden;
}
.locked__media { position: absolute; inset: 1px; z-index: -1; overflow: hidden;
  clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px); }
.locked__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.6) brightness(.5) contrast(1.05); transform: scale(1.04); }
.locked__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(5, 7, 10, .96) 0%, rgba(5, 7, 10, .55) 46%, rgba(5, 7, 10, .2) 100%), var(--scan);
}
.locked__stamp { position: absolute; top: 34%; left: 50%; transform: translate(-50%, -50%) rotate(-9deg); }
.locked__body { position: relative; display: grid; gap: 8px; padding: 22px; }
.locked__label { display: flex; align-items: center; gap: 8px; font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.locked__label .icon { width: 14px; height: 14px; }
.locked__name { font: 700 clamp(24px, 2.2vw, 30px)/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--holo); }
.locked__desc { font: 500 15px/1.35 var(--f-display); color: var(--text); }
.locked__eta { margin-top: 6px; padding-top: 12px; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent) 35%, transparent);
  font: 500 11.5px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.locked--nerith { --accent: var(--nerith); }
.locked--kryos { --accent: var(--kryos); }
.locked--pyrrhos { --accent: var(--pyrrhos); }
.locked--aurelion { --accent: var(--aurelion); }
.locked .media-tag { top: 12px; bottom: auto; left: auto; right: 12px; }

@media (max-width: 1099px) { .worlds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .worlds { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .locked { aspect-ratio: 16 / 11; }
  .locked__body { padding: 18px; gap: 6px; }
  .locked__stamp { top: 30%; left: auto; right: 18px; transform: rotate(-9deg); }
}

/* ---------------------------------------------------------------------------------------------
   Join the hunt
   --------------------------------------------------------------------------------------------- */
.join__panel { --cut: 16px; --fill: rgba(9, 12, 18, .86); --edge: var(--line-2);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px);
  padding: clamp(28px, 5vw, 64px); overflow: hidden; }
.join__glow { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 90% at 0% 100%, rgba(255, 90, 42, .16), transparent 60%), radial-gradient(50% 70% at 100% 0%, rgba(120, 215, 255, .08), transparent 60%);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); }
.join__intro { display: grid; gap: 18px; align-content: start; }
.join__stamp { justify-self: start; margin-top: 14px; }
.join__more { display: grid; gap: 22px; margin-top: 28px; }
.join__more-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.steam-widget { width: 100%; max-width: 646px; height: 190px; border: 0; background: #0d1118; }
@media (max-width: 899px) { .join__panel { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------------------------------------
   FAQ
   --------------------------------------------------------------------------------------------- */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.faq__list { box-shadow: inset 0 -1px 0 var(--line); }
.faq__item { box-shadow: inset 0 1px 0 var(--line); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 18px 0;
  list-style: none; cursor: pointer; font: 600 19px/1.3 var(--f-display); letter-spacing: .02em; color: var(--holo);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ''; }
.faq__q:hover { color: #fff; }
.faq__q:focus-visible { outline-offset: 4px; }
.faq__sign { position: relative; width: 16px; height: 16px; flex: none; color: var(--amber); }
.faq__sign::before, .faq__sign::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor; transition: transform var(--t-med) var(--e-out); }
.faq__sign::after { transform: rotate(90deg); }
.faq__item[open] .faq__sign::after { transform: rotate(0deg); }
.faq__a { padding: 0 40px 24px 0; font: 400 17px/1.6 var(--f-display); color: var(--text); max-width: 62ch; }
@media (max-width: 899px) { .faq { grid-template-columns: minmax(0, 1fr); } .faq__a { padding-right: 0; } }

/* ---------------------------------------------------------------------------------------------
   Footer and the mobile sticky bar
   --------------------------------------------------------------------------------------------- */
.site-footer { position: relative; padding: 56px 0 40px; box-shadow: inset 0 1px 0 var(--line); background: #06070a; }
.footer__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.footer__top .wordmark { font-size: 28px; }
.footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; margin-top: 32px; padding-top: 22px; box-shadow: inset 0 1px 0 var(--line); }
.footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; }
.footer__links a { display: inline-flex; align-items: center; min-height: 44px; font: 500 14px/1 var(--f-display); letter-spacing: .04em; color: var(--dim); text-decoration: none; }
.footer__links a:hover { color: var(--amber); }
.footer__copy { font: 500 12.5px/1.4 var(--f-mono); letter-spacing: .06em; color: var(--dim); }
.footer__note { margin-top: 18px; font: 400 13px/1.5 var(--f-display); color: var(--dim); max-width: 80ch; }

.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: none; align-items: center; gap: 12px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(7, 8, 11, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 var(--line); transition: transform var(--t-med) var(--e-out), visibility var(--t-med);
}
.mobile-cta__label { flex: 1; min-width: 0; font: 500 11px/1.35 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--amber); }
.mobile-cta .btn { flex: none; }
.mobile-cta.is-hidden { transform: translateY(110%); visibility: hidden; }
.mobile-cta--static { position: relative; display: flex; z-index: 0; padding: 10px 14px; }
@media (max-width: 767px) {
  .mobile-cta { display: flex; }
  .site-footer { padding-bottom: calc(40px + 76px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------------------------------------------------------------------------------------------
   Prose (privacy notice) and review pages (states, system sheet)
   --------------------------------------------------------------------------------------------- */
.doc-hero { padding: calc(var(--header-h) + 64px) 0 40px; }
.prose { max-width: 72ch; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; font: 400 17px/1.65 var(--f-display); color: var(--text); }
.prose h2 { margin-top: 26px; font: 700 22px/1.2 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--holo); }
.prose h3 { margin-top: 8px; font: 600 17px/1.3 var(--f-display); letter-spacing: .04em; color: var(--holo); }
.prose ul { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
.prose li::marker { color: var(--amber); }
.prose strong { color: var(--holo); font-weight: 600; }
.todo { padding: 1px 6px; font: 500 .82em/1.6 var(--f-mono); letter-spacing: .04em; color: #1a0a02; background: var(--amber); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose td { overflow-wrap: anywhere; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; box-shadow: inset 0 -1px 0 var(--line); }
.prose th { font: 600 11.5px/1.3 var(--f-display); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }

.review-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(min(560px, 100%), 1fr)); }
.review-card { --cut: 12px; --fill: rgba(10, 14, 20, .6); --edge: var(--line); padding: 24px; display: grid; gap: 18px; align-content: start; }
.review-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.review-card__note { font: 400 13.5px/1.5 var(--f-display); color: var(--dim); }
.sys-block { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; padding-block: 44px; box-shadow: inset 0 1px 0 var(--line); }
.sys-row { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.sys-swatches { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); }
.swatch { display: grid; gap: 8px; }
.swatch__chip { height: 72px; box-shadow: inset 0 0 0 1px var(--line); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.swatch__name { font: 600 13px/1.2 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--holo); }
.swatch__val { font: 400 12px/1.4 var(--f-mono); color: var(--dim); }
.sys-cap { font: 500 11.5px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.sys-cell { display: grid; gap: 10px; justify-items: start; }

/* Forced states, used only by the review pages (states.html, 00-system.html) */
.btn.is-hover { --edge: var(--line-3); --fill: rgba(207, 246, 255, .07); }
.btn--primary.is-hover { --edge: transparent;
  --fill: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .08) 0 1px, transparent 1px 3px),
          linear-gradient(100deg, var(--orange) 0%, #ff7a34 45%, var(--orange-2) 100%); }
.btn--primary.is-hover::before { filter: brightness(1.1) saturate(1.05); }
.btn.is-active { transform: translateY(1px); }
.btn.is-active::before { filter: brightness(.9); }
.field.is-hover { --edge: var(--line-3); }
.chip.is-hover { --edge: var(--line-3); color: var(--holo); }
.icon-btn.is-hover { --edge: var(--line-3); --fill: rgba(207, 246, 255, .08); }
a.is-hover:not(.btn):not(.social-tile), .social-link.is-hover { color: #ffc874; }
.nav-demo a.is-hover { color: var(--holo); }
.nav-demo a.is-hover::after { transform: scaleX(1); }
.social-tile.is-hover { --edge: rgba(255, 179, 71, .6); --fill: rgba(255, 179, 71, .06); }
a.is-focus, .social-link.is-focus, .faq__q.is-focus { outline: 2px solid var(--amber); outline-offset: 3px; }
.site-header--solid { background: rgba(10, 14, 20, .84); box-shadow: inset 0 -1px 0 var(--line); }

/* ---------------------------------------------------------------------------------------------
   Reduced motion: no parallax, no flicker, no smooth scroll, no pulses
   --------------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .hero__media img { transform: none !important; }
  .dossier.is-lit { animation: none; }
}

/* Dossier: Magistrate Karr's note (hologram gold, BIBLE §9) */
.dossier__note { margin: 0; padding: .6rem .9rem; border-left: 2px solid #f2d49b; color: #f2d49b; font-style: italic; }
.dossier__note span { display: block; margin-top: .25rem; font-style: normal; font-family: var(--f-mono, "JetBrains Mono", ui-monospace, monospace); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(242, 212, 155, .8); }
.dossier__brief strong { color: var(--c-holo, #cff6ff); font-weight: 600; }
/* Footer: company disclosure */
.footer__reg { margin: .75rem 0 0; font-size: .8125rem; color: rgba(207, 246, 255, .68); }