/* junoatoms.com — instrument-panel spare. Dark by default; the subject is dark. */

:root {
  --bg: #07090e;
  --panel: #0e1219;
  --panel-2: #141a24;
  --line: #1e2733;
  --ink: #dbe3ee;
  --ink-dim: #8794a6;
  --ink-faint: #5c6878;
  --accent: #6ea8fe;
  --warn: #f0a860;
  --memorial: #7d7f8c;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 880px; margin: 0 auto; padding: 0 20px; }

header.site {
  border-bottom: 1px solid var(--line);
  padding: 22px 0 18px;
  margin-bottom: 36px;
}
header.site .wrap { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
header.site .mark {
  font-family: var(--mono);
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
header.site .mark a { color: inherit; }
header.site nav { margin-left: auto; display: flex; gap: 18px; font-size: 0.9rem; }
header.site nav a { color: var(--ink-dim); }

h1 { font-size: 1.9rem; line-height: 1.25; margin: 0 0 8px; font-weight: 650; }
h2 {
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 44px 0 16px;
  font-weight: 500;
}
.lede { color: var(--ink-dim); font-size: 1.02rem; margin: 0 0 8px; max-width: 62ch; }

/* ── roster ─────────────────────────────────────────────────────────────── */

.roster { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.card {
  display: block;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  color: inherit;
}
.card:hover { border-color: #2c394a; text-decoration: none; background: var(--panel-2); }
.card .name { font-weight: 600; font-size: 1.02rem; margin-bottom: 2px; }
.card .dest { color: var(--ink-faint); font-size: 0.82rem; margin-bottom: 10px; }
.card .stat { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-dim); }
.card .stat b { color: var(--ink); font-weight: 600; }

.card.memorial { opacity: 0.72; }
.card.memorial .name { color: var(--memorial); }
.card.absent { border-color: #4a3a22; }
.card.absent .stat b { color: var(--warn); }

/* ── craft page ─────────────────────────────────────────────────────────── */

.dossier { color: var(--ink-dim); max-width: 66ch; }
.meta {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--ink-faint);
  margin: 0 0 20px;
}

.readouts { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.readout {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
}
.readout .label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 5px;
}
.readout .value { font-family: var(--mono); font-size: 1.12rem; color: var(--ink); }
.readout .sub { font-size: 0.76rem; color: var(--ink-faint); margin-top: 3px; }

.banner {
  border-left: 3px solid var(--warn);
  background: #17130c;
  padding: 12px 16px;
  border-radius: 0 8px 8px 0;
  margin: 20px 0;
  color: #f3d9b5;
}
.banner.learning { border-left-color: var(--line); background: var(--panel); color: var(--ink-dim); }

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li {
  display: flex;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
  align-items: baseline;
}
.timeline .when {
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--ink-faint);
  min-width: 128px;
  flex-shrink: 0;
}
.timeline .what { color: var(--ink-dim); }
.timeline .what b { color: var(--ink); font-weight: 600; }

figure.frame { margin: 0 0 20px; }
figure.frame img { width: 100%; border-radius: 8px; border: 1px solid var(--line); display: block; }
figure.frame figcaption { font-size: 0.78rem; color: var(--ink-faint); margin-top: 6px; }

.launches { list-style: none; padding: 0; margin: 0; }
.launches li {
  display: flex;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
  align-items: baseline;
}
.launches .when { font-family: var(--mono); font-size: 0.76rem; color: var(--ink-faint); min-width: 128px; flex-shrink: 0; }

footer.site {
  border-top: 1px solid var(--line);
  margin-top: 64px;
  padding: 22px 0 44px;
  color: var(--ink-faint);
  font-size: 0.82rem;
}
footer.site a { color: var(--ink-dim); }

.prose { max-width: 66ch; color: var(--ink-dim); }
.prose h3 { color: var(--ink); font-size: 1rem; margin: 28px 0 6px; }
.prose code { font-family: var(--mono); font-size: 0.86em; color: var(--ink); }

@media (max-width: 560px) {
  .timeline li, .launches li { flex-direction: column; gap: 2px; }
  .timeline .when, .launches .when { min-width: 0; }
  h1 { font-size: 1.5rem; }
}