@font-face{font-family:'Inter Variable';font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-latin-wght-normal-Dx4kXJAl.woff2) format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Michroma';font-style:normal;font-display:swap;font-weight:400;src:url(/assets/michroma-latin-400-normal-4gS0VCia.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Martian Mono Variable';font-style:normal;font-display:swap;font-weight:100 800;font-stretch:75% 112.5%;src:url(/assets/martian-mono-latin-wdth-normal-1TqSgyfh.woff2) format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/*
 * PLANETHUNT visor tokens. Cool glass, warm signal: the instruments speak in ice cyan (a colour no star has) on
 * blue-black glass; solar orange marks what is yours (the mode you are in, the target you locked, the action to
 * take, the moment in time) and nothing else. Orange is ink, not light: crisp marks and index segments, never
 * glows or washes. Green for habitability, crimson for faults. Data colours are matte and validated
 * against --void and --glass. Stylesheets use these tokens, not raw values: tints are color-mix() of a token,
 * sizes come from the scales. Code that draws outside CSS (WebGL, canvas) reads src/styles/palette.ts.
 */
:root {
  color-scheme: dark;

  /* Surfaces: blue-black, never green */
  --void: #04070e;
  --glass: #0b1321;
  /* Three tiers of instrument glass: quiet (notes, lists: barely there), standard, and primary (the instrument
     you are using: the locked dossier, the chart, the live theater). */
  --surface-1: rgba(11, 19, 33, 0.3);
  --surface-2: rgba(11, 19, 33, 0.62);
  --surface-3: rgba(13, 22, 38, 0.86);
  --glass-fill: var(--surface-2);
  --glass-fill-strong: var(--surface-3);
  --glass-edge: rgba(134, 211, 242, 0.15);
  --glass-edge-strong: rgba(134, 211, 242, 0.34);
  /* Light falls on the glass from above: a sheen at the top of each panel, a hairline catching it. */
  --glass-sheen: linear-gradient(180deg, rgba(134, 211, 242, 0.05), rgba(134, 211, 242, 0) 42%);

  /* Ink — values brightest, chrome in the HUD hue, secondary for prose, ticks/grid never carry text */
  --ink-value: #eef4f8;
  --ink: #d3e1ec;
  --hud: #86d3f2;
  --ink-2: #7c97ad;
  --tick: #3f566b;
  --grid: #17253a;

  /* Signals */
  --sun: #ff8a3d;
  --sun-hi: #ffb27a;
  --sun-glow: rgba(255, 138, 61, 0.32);
  --lock: var(--sun);
  --lock-glow: var(--sun-glow);
  --warn: #ff4d6a;
  --hz: #3fe0a0;
  --hud-glow: rgba(134, 211, 242, 0.22);
  --sol: #ffe3b0;

  /* Discovery methods (dataviz validator: PASS on #04070e and #0b1321; shape is the redundant code) */
  --m-transit: #5890c9;
  --m-rv: #bd7154;
  --m-microlensing: #8e69c1;
  --m-imaging: #96971c;
  --m-timing: #a9547d;
  --m-other: #2fa798;

  /* Type: Michroma names, Martian Mono measures, Inter explains */
  --font-display: 'Michroma', 'Inter Variable', system-ui, sans-serif;
  --font-mono: 'Martian Mono Variable', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-ui: 'Inter Variable', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Type scale: six steps, nothing smaller than 12px. Labels are xs, metadata sm, prose md. */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 15px;
  --fs-lg: 16.5px;
  --fs-xl: clamp(19px, 0.9vw + 10px, 24px);
  --fs-2xl: clamp(26px, 1.6vw + 12px, 34px);
  --lh-tight: 1.25;
  --lh-prose: 1.55;

  /* Space: a 4px scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 48px;

  /* Shape and depth: glass at three elevations */
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --glass-1: color-mix(in srgb, var(--glass) 55%, transparent);
  --glass-2: color-mix(in srgb, var(--glass) 78%, transparent);
  --glass-3: color-mix(in srgb, var(--glass) 92%, transparent);
  --glass-blur: blur(14px) saturate(1.25);
  --glass-highlight: inset 0 1px 0 color-mix(in srgb, var(--hud) 14%, transparent);
  --shadow-float: 0 24px 60px -24px rgba(0, 0, 0, 0.75);

  /* Focus: always visible, never only colour */
  --focus-ring: 0 0 0 2px var(--void), 0 0 0 4px var(--hud), 0 0 18px 2px var(--hud-glow);

  /* Layers, bottom to top */
  --z-hud: 1;
  --z-guide: 25;
  --z-dialog: 30;
  --z-cmdline: 40;
  --z-alert: 45;
  --z-boot: 50;

  /* Motion. Durations for things that arrive, leave or change; looping pulses keep their own periods.
     src/styles/motion.ts mirrors the ones JavaScript times. */
  --t-instant: 90ms;
  --t-quick: 160ms;
  --t-panel: 280ms;
  --t-fade: 400ms;
  --t-rise: 420ms;
  --t-scene: 600ms;
  --t-arrive: 700ms;
  --t-boot: 760ms;
  --t-caption: 900ms;
  --t-declutter: 900ms;
  --t-morph: 1150ms;
  --t-morph-filter: 650ms;
  /* Panels in a wing arrive one after another, this far apart. */
  --stagger: 45ms;
  --ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-exit: cubic-bezier(0.3, 0, 0.8, 0.15);

  /* Geometry */
  --u: 8px;
  --notch: 6px;
}

/*
 * Static pages (planets, systems, lists): the visor's look on a page you can read without JavaScript.
 * Tokens come from src/styles/tokens.css, inlined ahead of this file.
 */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--void); color-scheme: dark; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--ink); font: 400 var(--fs-md) / var(--lh-prose) var(--font-ui);
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1200px 600px at 78% -10%, color-mix(in srgb, var(--hud) 9%, transparent), transparent 70%),
    radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, var(--m-microlensing) 10%, transparent), transparent 70%),
    var(--void);
}
/* A sparse starfield, drawn once, behind everything. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.55;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 72% 12%, #cfe9ff, transparent),
    radial-gradient(1.5px 1.5px at 33% 64%, #fff, transparent), radial-gradient(1px 1px at 88% 52%, #ffe9c7, transparent),
    radial-gradient(1px 1px at 52% 86%, #fff, transparent), radial-gradient(1.2px 1.2px at 6% 82%, #d6e4ff, transparent),
    radial-gradient(1px 1px at 63% 37%, #fff, transparent), radial-gradient(1px 1px at 24% 41%, #ffd9b0, transparent);
  background-size: 640px 640px;
}
a { color: var(--hud); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 2px; }

.wrap { width: min(1080px, 100% - 32px); margin: 0 auto; }
.top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-value); font: 400 var(--fs-sm) var(--font-display); letter-spacing: 0.18em; text-transform: uppercase; }
.brand svg { width: 22px; height: 22px; }
.top nav { display: flex; gap: var(--s-4); font: 500 var(--fs-xs) var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.top nav a { color: var(--ink-2); }
.crumbs { font: 400 var(--fs-xs) var(--font-mono); letter-spacing: 0.06em; color: var(--ink-2); margin: var(--s-2) 0 var(--s-5); }
.crumbs a { color: var(--ink-2); }
.crumbs span[aria-current] { color: var(--ink); }

.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 340px); gap: var(--s-7); align-items: center; padding: var(--s-4) 0 var(--s-7); }
.eyebrow { font: 500 var(--fs-xs) var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--hud); }
.eyebrow .cand { color: var(--lock); border: 1px dashed var(--lock); padding: 1px 6px; margin-left: 8px; letter-spacing: 0.08em; }
h1 { margin: var(--s-2) 0 var(--s-3); font: 400 var(--fs-2xl) / 1.15 var(--font-display); letter-spacing: 0.04em; color: var(--ink-value); text-transform: uppercase; overflow-wrap: anywhere; }
.lede { font-size: var(--fs-lg); line-height: 1.5; color: var(--ink); max-width: 46ch; margin: 0 0 var(--s-5); }
.fly {
  display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; border: 1px solid var(--hud);
  background: color-mix(in srgb, var(--hud) 14%, transparent); color: var(--ink-value);
  font: 400 var(--fs-sm) var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--hud) 25%, transparent), 0 0 32px -6px var(--hud-glow);
  transition: background var(--t-quick), box-shadow var(--t-quick), transform var(--t-quick) var(--ease-enter);
}
.fly:hover { background: color-mix(in srgb, var(--hud) 24%, transparent); text-decoration: none; transform: translateY(-1px); box-shadow: 0 0 0 1px var(--hud), 0 0 48px -4px var(--hud-glow); }
.fly svg { width: 18px; height: 18px; }
.fly + .sub { display: block; margin-top: 10px; font: 400 var(--fs-xs) var(--font-mono); color: var(--ink-2); letter-spacing: 0.04em; }

/* The planet: an illustrative disc lit from the upper left, with a soft atmosphere where it likely has one. */
.orb { position: relative; aspect-ratio: 1; width: 100%; max-width: 340px; justify-self: center; }
.orb .disc {
  position: absolute; inset: 12%; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, var(--c1) 0%, var(--c2) 46%, var(--c3) 78%, #000 100%);
  box-shadow: inset -18px -24px 60px rgba(0, 0, 0, 0.75), 0 0 80px -10px var(--glow);
}
.orb .disc::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-linear-gradient(-12deg, transparent 0 9%, rgba(255, 255, 255, var(--bands)) 9% 12%, transparent 12% 20%);
  mix-blend-mode: soft-light;
}
.orb .air { position: absolute; inset: 10%; border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb, var(--air) 45%, transparent), 0 0 30px 4px color-mix(in srgb, var(--air) 35%, transparent); opacity: var(--air-a); }
.orb .ring { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--hud) 30%, transparent); }
.orb figcaption { position: absolute; bottom: -6px; width: 100%; text-align: center; font: 400 var(--fs-xs) var(--font-mono); color: var(--ink-2); letter-spacing: 0.04em; }

.numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--glass-edge); border: 1px solid var(--glass-edge); margin: 0 0 var(--s-7); }
.numbers div { background: var(--glass-2); padding: var(--s-4) var(--s-5); }
.numbers dt { font: 500 var(--fs-xs) var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.numbers dd { margin: 6px 0 0; font: 300 var(--fs-xl) var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-value); font-stretch: 87.5%; }
.numbers dd small { display: block; font-size: var(--fs-xs); color: var(--ink-2); margin-top: 2px; font-weight: 400; }

.cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-7); align-items: start; }
.story p { margin: 0 0 var(--s-4); max-width: 66ch; }
.story h2, .facts h2, .more h2 { margin: 0 0 var(--s-3); font: 500 var(--fs-xs) var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--hud); }
.facts { border: 1px solid var(--glass-edge); background: var(--glass-1); padding: var(--s-4) var(--s-5); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-highlight); }
.facts dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; }
.facts dt { font: 400 var(--fs-sm) var(--font-ui); color: var(--ink-2); }
.facts dd { margin: 0; text-align: right; font: 400 var(--fs-sm) var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-value); font-stretch: 87.5%; }
.facts .note { margin: var(--s-3) 0 0; font-size: var(--fs-xs); color: var(--ink-2); }

.more { margin: var(--s-7) 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-3); list-style: none; margin: 0; padding: 0; }
.cards a { display: grid; grid-template-columns: 34px 1fr; gap: 4px 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--glass-edge); background: var(--glass-1); color: var(--ink); }
.cards a:hover { border-color: var(--glass-edge-strong); background: var(--glass-2); text-decoration: none; }
.cards .dot { grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 32% 30%, var(--c1), var(--c2) 50%, var(--c3) 85%); box-shadow: inset -4px -5px 10px rgba(0, 0, 0, 0.6); }
.cards b { font-weight: 600; color: var(--ink-value); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cards small { font: 400 var(--fs-xs) var(--font-mono); color: var(--ink-2); }

table.list { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.list th { text-align: left; font: 500 var(--fs-xs) var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); padding: 8px 10px; border-bottom: 1px solid var(--glass-edge-strong); }
table.list td { padding: 9px 10px; border-bottom: 1px solid var(--glass-edge); }
table.list td.n { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-stretch: 87.5%; color: var(--ink-value); }
table.list tr:hover td { background: color-mix(in srgb, var(--hud) 5%, transparent); }
.intro { max-width: 70ch; font-size: var(--fs-lg); line-height: 1.55; margin: 0 0 var(--s-6); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.chips a { display: inline-block; padding: 6px 12px; border: 1px solid var(--glass-edge); font: 400 var(--fs-xs) var(--font-mono); letter-spacing: 0.06em; color: var(--ink); }

footer.site { margin-top: var(--s-8); padding: var(--s-6) 0 var(--s-8); border-top: 1px solid var(--glass-edge); color: var(--ink-2); font-size: var(--fs-xs); }
footer.site .row { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); justify-content: space-between; }
footer.site .langs { display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* Launch: the page steps aside while the visor boots in place. */
#launch { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; background: var(--void); color: var(--hud); font: 400 var(--fs-sm) var(--font-display); letter-spacing: 0.2em; text-transform: uppercase; }
html.launch #launch { display: grid; }
#launch i { display: block; width: 180px; height: 2px; margin: 18px auto 0; background: linear-gradient(90deg, transparent, var(--hud), transparent); animation: scan 1.2s ease-in-out infinite; }
@keyframes scan { 50% { transform: scaleX(0.3); opacity: 0.4; } }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: var(--s-5); }
  .orb { max-width: 220px; order: -1; }
  .cols { grid-template-columns: 1fr; }
  .numbers div { padding: var(--s-3); }
  .numbers dt { letter-spacing: 0.04em; overflow-wrap: anywhere; }
  .numbers dd { font-size: var(--fs-md); }
  .top nav { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* About: acknowledgements quoted in the archives' own words, licences, privacy. */
.about h2 { margin-top: var(--s-7); scroll-margin-top: var(--s-6); }
.about h3 { margin: var(--s-5) 0 var(--s-2); font: 500 var(--fs-sm) var(--font-mono); letter-spacing: 0.06em; }
.about blockquote { margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4); max-width: 66ch; border-left: 2px solid var(--hud); background: var(--glass-fill); color: var(--ink-2); font-size: var(--fs-sm); }
.about blockquote p { margin: 0; }
.about ul { margin: 0 0 var(--s-4); padding-left: 1.2em; max-width: 66ch; }
.about li { margin: 0 0 var(--s-3); }