/* Launchbound launch pages: the app's night palette, system type, no JS. */
:root {
  color-scheme: dark;
  --ground: #04060c;
  --raised: #0d111b;
  --ink: rgba(255, 255, 255, 0.95);
  --ink-2: rgba(255, 255, 255, 0.66);
  --ink-3: rgba(255, 255, 255, 0.5);
  --hairline: rgba(255, 255, 255, 0.12);
  --accent: #ffb25b;
  --gutter: max(20px, env(safe-area-inset-left));
}
* { box-sizing: border-box; }
html { background: var(--ground); }
body {
  margin: 0;
  color: var(--ink);
  font: 17px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding: env(safe-area-inset-top) var(--gutter) env(safe-area-inset-bottom);
}
a { color: inherit; }
.bar { max-width: 760px; margin: 0 auto; padding: 18px 0 8px; }
.mark {
  font: 600 13px/1 -apple-system, BlinkMacSystemFont, sans-serif;
  font-stretch: expanded;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
}
main { max-width: 760px; margin: 0 auto; padding-bottom: 32px; }
.card { width: 100%; height: auto; aspect-ratio: 1200 / 630; border-radius: 18px; display: block; margin: 12px 0 28px; background: var(--raised); }
.eyebrow {
  margin: 0;
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
}
h1 { margin: 6px 0 4px; font-size: clamp(32px, 7vw, 52px); line-height: 1.05; font-weight: 650; font-stretch: expanded; letter-spacing: -0.01em; }
.when { margin: 18px 0 2px; font-size: 22px; font-weight: 500; }
.utc, .site { margin: 2px 0; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.status { display: inline-block; margin: 10px 0 0; padding: 4px 10px; border: 1px solid var(--hairline); border-radius: 999px; font-size: 14px; color: var(--ink-2); }
.summary { margin: 22px 0 0; color: var(--ink); }
.note { margin: 14px 0 0; font-size: 15px; color: var(--ink-3); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 24px 0 0; }
.actions:empty { display: none; }
.button { display: inline-block; padding: 12px 20px; border-radius: 999px; background: var(--ink); color: #000; font-weight: 600; text-decoration: none; }
.button.secondary { background: transparent; color: var(--ink); border: 1px solid var(--hairline); }
.hint { font-size: 14px; color: var(--ink-3); }
.sources { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--hairline); }
.sources h2 { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.sources ul { margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--ink-3); }
.sources a { color: var(--ink-2); }
.launches { margin: 18px 0 0; padding: 0; list-style: none; }
.launches li { border-top: 1px solid var(--hairline); }
.launches a { display: grid; gap: 2px; padding: 16px 0; text-decoration: none; }
.launches .name { font-size: 19px; font-weight: 600; }
.launches .meta { font-size: 15px; color: var(--ink-2); }
footer { max-width: 760px; margin: 0 auto; padding: 24px 0 40px; border-top: 1px solid var(--hairline); font-size: 14px; color: var(--ink-3); }
footer p { margin: 6px 0; }
.credit { color: var(--ink-3); }
.section { margin: 36px 0 0; font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.launches.past .name { color: var(--ink-2); }
.launches .empty { padding: 16px 0; color: var(--ink-2); }