/* ============================================================
   Space Logistics Design Studio — base.css
   Design tokens, reset, typography, components
   ============================================================ */

:root {
  /* surfaces */
  --bg: #05070d;
  --bg-alt: #04060b;
  --surface: #0a0e16;
  --surface-2: #0c1119;

  /* hairlines — low-alpha white overlay system (swap the base, keep the lines) */
  --line: rgba(255, 255, 255, 0.08);
  --line-soft: rgba(255, 255, 255, 0.05);
  --fill-soft: rgba(255, 255, 255, 0.022);
  --fill-1: rgba(255, 255, 255, 0.05);
  --fill-2: rgba(255, 255, 255, 0.08);

  /* text ladder — hierarchy by luminance, not by hue */
  --t1: #f2f5fa;
  --t2: #9aa7b8;
  --t3: #7c8a9c;
  --t4: #6c7a8c;
  --t5: #5f6b7c;

  --gold: #dcc48e;

  /* type */
  --font-display: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'Sora', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  /* nav wordmark + EN nav links — engineering-grade, understated */
  --font-nav: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  /* rhythm */
  --pad-x: 96px;
  --sec-y: 104px;
  --radius: 16px;
  --radius-sm: 8px;
  --maxw: 1440px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* NOTE: no `scroll-behavior: smooth` on <html> —
   it hijacks wheel input and turns normal scrolling into a jump.
   Smooth easing is applied only to explicit programmatic scrolls (see main.js). */
html { scroll-padding-top: 64px; }

/* ---------- anti-FOUC for language ----------
   The markup ships in Chinese. If the visitor's stored preference is EN,
   the swap happens in main.js — i.e. after first paint — which reads as a
   Chinese flash. An inline script in <head> reads the stored language and
   sets .i18n-pending on <html> BEFORE the body renders; this rule keeps the
   copy hidden until the swap completes, then reveals it in one frame.
   Media (hero still, card images) stays visible so the page never looks
   blank — only the text is withheld. */
html.i18n-pending [data-i18n],
html.i18n-pending [data-i18n-list],
html.i18n-pending [data-i18n-ph],
html.i18n-pending .tab [data-t],
html.i18n-pending .tabs__detail,
html.i18n-pending .brand__name { visibility: hidden; }

body {
  background: var(--bg);
  color: var(--t1);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); }
.section { padding: var(--sec-y) var(--pad-x); }
.section--alt { background: var(--bg-alt); }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }

/* ---------- typography ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: 16px;
}
.eyebrow--accent { color: var(--t3); }

h1, .h1 {
  font-family: var(--font-display);
  font-size: 68px;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.5px;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: 46px;
  line-height: 1.24;
  font-weight: 700;
  letter-spacing: -0.3px;
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.35;
  font-weight: 600;
}
.lead {
  font-size: 17px;
  line-height: 1.75;
  color: var(--t2);
  max-width: 860px;
}
.p { font-size: 15px; line-height: 1.8; color: var(--t2); }
.small { font-size: 14px; line-height: 1.75; color: var(--t2); }
.mono-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--t4);
}

/* ---------- buttons (flat) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 26px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  transition: opacity .18s ease, background .18s ease, border-color .18s ease;
}
.btn--primary { background: var(--t1); color: var(--bg); }
.btn--primary:hover { opacity: .86; }
.btn--ghost {
  background: var(--fill-1);
  color: #d5dee9;
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-weight: 500;
}
.btn--ghost:hover { background: var(--fill-2); border-color: rgba(255, 255, 255, 0.22); }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.card__body { padding: 22px; display: flex; flex-direction: column; gap: 11px; }

/* ---------- pills ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 100px;
  font-size: 12px;
  letter-spacing: .8px;
  white-space: nowrap;
}
.pill--ok { background: var(--fill-2); border: 1px solid rgba(255, 255, 255, 0.14); color: #d5dee9; }
.pill--mid { background: rgba(255, 138, 61, 0.10); border: 1px solid rgba(255, 138, 61, 0.32); color: #ff8a3d; }
.pill--plan { background: var(--fill-1); border: 1px solid rgba(255, 255, 255, 0.14); color: var(--t3); }

/* ---------- tables ---------- */
.tbl { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.tbl thead th {
  text-align: left;
  padding: 15px 26px;
  background: rgba(255, 255, 255, 0.035);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--t4);
}
.tbl tbody td { padding: 18px 26px; vertical-align: top; border-top: 1px solid var(--line-soft); }
.tbl tbody tr:nth-child(even) { background: var(--fill-soft); }
.tbl .cell-year { font-family: var(--font-mono); font-size: 15px; color: var(--t2); width: 110px; }
.tbl .cell-name { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--t1); }
.tbl .cell-agency { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1px; color: var(--t4); margin-top: 6px; }
.tbl .cell-scope { font-size: 14px; line-height: 1.85; color: var(--t2); }

/* ---------- divider ---------- */
.hr { height: 1px; background: var(--line); border: 0; }

/* ---------- utilities ---------- */
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; } .mt-44 { margin-top: 44px; }
.gap-16 { gap: 16px; } .gap-24 { gap: 24px; } .gap-40 { gap: 40px; }
/* `minmax(0, 1fr)` rather than bare `1fr`: 1fr resolves to minmax(auto, 1fr),
   whose `auto` floor is the item's min-content width — a long unbreakable word
   (English copy in particular) would then push the column wider than its fair
   share and overflow the page. CJK wraps per character, so this only shows up
   in English. */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }