/* ============================================================
   Space Logistics Design Studio — pages.css
   Site chrome + page sections + responsive
   ============================================================ */

/* ---------- top nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: 64px;
  display: flex; align-items: center;
  padding: 0 48px;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .32s ease, border-color .32s ease, backdrop-filter .32s ease;
}
/* only gain a surface once the hero has been scrolled past
   (pages without a hero opt in permanently via .nav--solid) */
.nav.is-solid,
.nav--solid {
  background: rgba(5, 7, 13, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: var(--line);
}
/* The link group is centred on the VIEWPORT, not on the space left over after
   the logo — so the nav reads as page-centred. Each flanking cluster is taken
   out of flow and pinned to its own edge, keeping equal lateral gutters. */
.nav__inner { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; gap: 24px; }
.nav__inner > .brand { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.nav__inner > .lang { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.brand { display: flex; align-items: center; gap: 11px; }
.brand__mark { width: 28px; height: 28px; flex: none; display: block; }
.brand__mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Wordmark — sized to the room actually available beside the centred nav.
   The name is 29 characters, so it is long for a nav bar; a centred five-link
   nav and a long wordmark cannot share a narrow bar (measured: they already
   overlapped at 1024 and below before this change). Hence three regimes:
     ≥1200px  room beside the links      → run it larger (this is the main win)
     861–1199 the links claim the middle → collapse to the logo mark
     ≤860px   the links are hidden       → room again, back to the smaller size */
.brand__name {
  display: flex; gap: 9px;
  font-family: var(--font-nav);
  font-size: 14px; font-weight: 700;
  letter-spacing: .9px; text-transform: uppercase;
}
.brand__name b { color: var(--t1); }
.brand__name i { color: var(--gold); font-style: normal; }
.nav__links { display: flex; gap: 34px; }
.nav__links a {
  font-family: var(--font-nav);
  font-size: 14px; font-weight: 500;
  color: var(--t3); transition: color .18s;
}
.nav__links a:hover { color: var(--t1); }
.nav__links a[aria-current="page"] { color: var(--t1); font-weight: 600; }
.lang { display: flex; gap: 6px; font-family: var(--font-nav); font-size: 12.5px; font-weight: 500; }
.lang button { color: var(--t5); transition: color .18s; letter-spacing: .5px; }
.lang button[aria-pressed="true"] { color: var(--t1); font-weight: 600; }
.lang span { color: var(--t5); }
.nav__toggle { display: none; font-size: 22px; color: var(--t2); }

/* ---------- footer ---------- */
.footer { padding: 64px 96px 34px; border-top: 1px solid var(--line); background: var(--bg-alt); }
.footer__top { display: flex; gap: 44px; padding-bottom: 44px; }
.footer__brand { width: 400px; max-width: 100%; flex: none; display: flex; flex-direction: column; gap: 18px; }
.footer__brandrow { display: flex; align-items: center; gap: 12px; }
.footer__brandrow .brand__mark { width: 26px; height: 26px; }
.footer__brandname { font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: .3px; }
.footer__tagline { font-size: 14px; line-height: 1.8; color: var(--t2); }
.footer__legal { font-size: 12px; line-height: 1.8; color: var(--t5); }
.footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 44px; flex: 1; }
.footer__col { display: flex; flex-direction: column; gap: 14px; }
.footer__col h4 { font-size: 13px; font-weight: 500; color: var(--t1); }
.footer__col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer__col a { font-size: 13px; color: var(--t3); transition: color .18s; }
.footer__col a:hover { color: var(--t1); }
.footer__bottom { display: flex; justify-content: space-between; gap: 24px; padding-top: 26px; border-top: 1px solid var(--line); font-size: 12px; color: var(--t5); }

/* ---------- video hero ---------- */
/* Exactly one screen tall. It used to be 92vh, which by definition left the
   top 8% of the next section showing at the bottom edge — the "peek" was the
   height, not the image (the media below always covers its box regardless of
   aspect ratio). dvh keeps it flush on mobile too, where the URL bar retracts
   and vh would leave a gap; vh is the fallback for older engines.

   Copy is anchored to the LOWER-LEFT rather than centred: the plate stack in
   the footage sits centre-right, so a centred block printed itself across the
   hardware. The lower-left corner is empty black sky, which gives the type a
   clean bed and leaves the imagery legible. */
.vhero {
  position: relative;
  height: 100vh;
  height: 100dvh;
  min-height: 600px;
  display: flex; flex-direction: column;
  align-items: stretch;        /* inner spans full width so it can left-align */
  justify-content: flex-end;   /* content sits low in the frame */
  padding: 88px 0 104px;       /* clears the fixed nav / keeps off the bottom edge */
  text-align: left;
  overflow: hidden;
}
.vhero__media { position: absolute; inset: 0; }
/* `cover` so the 16:9 footage fills any viewport without letterboxing — the
   same treatment the still had. display:block kills the inline baseline gap
   a <video> would otherwise leave under itself. */
.vhero__media img, .vhero__media video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Scrim weighted to the lower-left, where the copy now sits, instead of the
   centre — the original radial pooled darkness behind the middle of the frame
   and left the new corner under-supported. */
.vhero__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(780px 440px at 20% 90%, rgba(5, 7, 13, .74) 0%, rgba(5, 7, 13, 0) 72%),
    linear-gradient(180deg, rgba(5, 7, 13, .72) 0%, rgba(5, 7, 13, .34) 46%, rgba(5, 7, 13, .80) 100%);
}
.vhero__inner {
  position: relative;
  display: flex; flex-direction: column;
  align-items: flex-start;     /* the stack hugs the left gutter */
  gap: 28px;
  width: 100%;
  padding: 0 var(--pad-x);
}

/* The copy column owns the LEFT HALF of the frame; the centred scroll cue owns
   the middle. Both sit in the same vertical band, so without this cap a long
   line — the credit especially — runs straight through the cue. Capping by
   viewport half (rather than shrinking the type) makes the two structurally
   incapable of meeting at ANY copy length or desktop width; shrinking the type
   would only postpone the collision to a narrower viewport. Not applied on
   phones, where the cue is hidden entirely. */
@media (min-width: 861px) {
  .vhero__inner { max-width: calc(50vw - 56px); }
}
.vhero__slogan span, .vhero__en span, .vhero__brand, .vhero__cue em {
  text-shadow: 0 2px 26px rgba(5, 7, 13, .92), 0 1px 6px rgba(5, 7, 13, .75);
}
.vhero__logo { width: 88px; height: 88px; display: block; }
.vhero__logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.vhero__slogan { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: flex-start; }
.vhero__slogan span:first-child { font-family: var(--font-body); font-size: 42px; font-weight: 700; letter-spacing: 2px; }
.vhero__slogan span:last-child { font-size: 26px; color: #c3cedc; letter-spacing: 1px; }
.vhero__bar { width: 30px; height: 2px; background: var(--t3); }

/* English headline — English pages ONLY (see the html[lang] rules just below;
   on CN the Chinese line above takes its place). Because it is now the sole
   headline on EN rather than a bilingual second line, it carries the primary
   weight directly instead of being overridden per language. */
.vhero__en {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  font-family: var(--font-display);
}
.vhero__en span:first-child { font-size: 34px; font-weight: 700; letter-spacing: 3px; color: #eaeff6; }
.vhero__en span:last-child { font-size: 16px; font-weight: 500; letter-spacing: 2.6px; color: #c3cedc; }

/* One headline per language, mutually exclusive: the Chinese line is hidden on
   EN, the English block on CN. The language is set by the <head> boot script,
   so the correct one is already in place on the very first paint — no flash of
   the wrong language. */
html[lang="en"] .vhero__slogan { display: none; }
html[lang="zh-CN"] .vhero__en { display: none; }
/* Name · platform descriptor · credit, stacked as one block so the three lines
   share a left edge under the copy. Selected by position, not :last-child —
   adding the credit line would otherwise silently restyle the descriptor. */
.vhero__brand {
  display: flex; flex-direction: column; gap: 7px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 5px; color: var(--t4);
}
.vhero__brand span:nth-child(2) { color: var(--t5); letter-spacing: 4px; }
/* The credit sits a step quieter again and is allowed to wrap — it is the
   longest of the three and shrinking it to fit one line would make it
   unreadable on a phone. */
.vhero__brand span:nth-child(3) {
  margin-top: 3px; font-size: 10px; letter-spacing: 3px; line-height: 1.75; color: var(--t5);
}
/* Centred, as before. The copy sits in the left half and the cue at the centre,
   so the two never meet even though their vertical bands overlap. */
.vhero__cue { position: absolute; bottom: 56px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.vhero__cue i { display: block; width: 1px; height: 52px; background: var(--t5); animation: cue 2.4s ease-in-out infinite; }
.vhero__cue em { font-family: var(--font-mono); font-style: normal; font-size: 10px; letter-spacing: 5px; color: var(--t3); }
@keyframes cue { 0%,100% { opacity: .35; transform: scaleY(.7); } 50% { opacity: 1; transform: scaleY(1); } }

/* ---------- hero (second screen) ---------- */
.hero { position: relative; padding: 150px 96px 72px; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,7,13,.55) 0%, rgba(5,7,13,.82) 55%, var(--bg) 100%); }
.hero__inner { position: relative; display: flex; flex-direction: column; min-height: 560px; }
.hero__metrics { margin-top: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; padding-top: 40px; border-top: 1px solid var(--line); }
.hero__metric b { display: block; font-family: var(--font-display); font-size: 30px; font-weight: 700; }
.hero__metric span { font-size: 13px; color: var(--t3); }

/* ---------- mission carousel ---------- */
.carousel { position: relative; padding: 0 58px; }
.carousel__track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.carousel__track::-webkit-scrollbar { display: none; }
.mcard { flex: none; width: 366px; scroll-snap-align: start; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.mcard__img { height: 190px; overflow: hidden; }
.mcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.mcard:hover .mcard__img img { transform: scale(1.04); }
/* text sits tight under the image — no dead gap between the two */
.mcard__body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 8px; }
.mcard__body h3 { font-size: 19px; font-weight: 700; line-height: 1.4; }
.mcard__body p { font-size: 13.5px; line-height: 1.75; color: var(--t2); }
/* headings alternate their alignment down the row so the run of cards
   reads as a rhythm instead of a flush-left stack */
.mcard:nth-child(even) .mcard__body h3 { text-align: right; }
.mcard:nth-child(even) .mcard__body p { text-align: right; }
.carousel__nav { position: absolute; top: 73px; width: 44px; height: 44px; border-radius: 100px; display: flex; align-items: center; justify-content: center; background: var(--fill-1); border: 1px solid rgba(255,255,255,.16); color: var(--t2); font-size: 16px; transition: background .18s, color .18s; }
.carousel__nav:hover { background: var(--fill-2); color: var(--t1); }
.carousel__nav--prev { left: 0; } .carousel__nav--next { right: 0; }

/* ---------- capability tabs ---------- */
.tabs { display: flex; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.tabs__rail { width: 302px; flex: none; background: var(--surface-2); padding: 20px 18px; display: flex; flex-direction: column; gap: 8px; }
.tab { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border-radius: 10px; font-size: 15px; color: var(--t2); text-align: left; transition: background .18s, color .18s; }
.tab:hover { background: var(--fill-soft); }
.tab[aria-selected="true"] { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: var(--t1); font-weight: 500; }
.tab svg { flex: none; }
.tabs__panel { flex: 1; padding: 30px 32px; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
/* the diagram keeps the source 16:9 ratio, so it fills the box edge-to-edge
   and no dead band is left above or below the plot */
.tabs__viz { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #05070d; }
.tabs__viz img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .24s ease; }
.tabs__detail { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.tabs__detail h4 { text-align: center; font-size: 16px; color: #d5dee9; }
.tabs__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; text-align: center; }
.tabs__cols h5 { font-size: 14px; font-weight: 500; color: #d5dee9; margin-bottom: 7px; }
.tabs__cols p { font-size: 12px; line-height: 1.85; color: var(--t3); }
.tabpanel[hidden] { display: none; }

/* ---------- mission table (uses .tbl) ---------- */
.tblwrap { border-radius: var(--radius); overflow: hidden; }

/* ---------- catalog grid ---------- */
.catalog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.catalog__col { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.catalog__head { display: flex; align-items: center; justify-content: space-between; }
.catalog__head h4 { font-size: 16px; font-weight: 700; }
.catalog__head span { font-family: var(--font-mono); font-size: 13px; color: var(--t2); }
.catalog__col ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.catalog__col li { font-size: 13px; line-height: 1.85; color: var(--t2); }
.catalog__col li::before { content: '· '; color: var(--t4); }

/* ---------- gallery ---------- */
.gallery figure { display: flex; flex-direction: column; gap: 14px; }
.gallery img { width: 100%; border-radius: 14px; border: 1px solid var(--line); }
.gallery figcaption { font-family: var(--font-mono); font-size: 13px; letter-spacing: .8px; color: var(--t4); }

/* ---------- workspaces / scenarios ---------- */
.ws { display: grid; grid-template-columns: 540px 1fr; gap: 60px; align-items: center; }
.ws--flip { grid-template-columns: 1fr 540px; }
.ws__img { width: 100%; height: 372px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.ws__img img { width: 100%; height: 100%; object-fit: cover; }
.ws__text { display: flex; flex-direction: column; gap: 16px; }
.ws__bullets { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.ws__bullets li { font-size: 14px; line-height: 1.8; color: #a9b7c9; }

/* ---------- cta band ---------- */
.cta { padding: 96px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px;
  background: linear-gradient(135deg, var(--bg-alt) 0%, #0a1724 55%, var(--bg-alt) 100%);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 620px 1fr; gap: 60px; align-items: start; }
.emailcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 36px; display: flex; flex-direction: column; gap: 22px; }
.emailcard__addr { font-family: var(--font-mono); font-size: 25px; color: var(--t1); word-break: break-all; }
.info { display: flex; flex-direction: column; gap: 26px; }
.info dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--t4); margin-bottom: 7px; }
.info dd { font-size: 16px; color: var(--t1); }
.info dd.muted { color: var(--t2); }

/* ---------- spec strip ---------- */
.specstrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; padding-top: 40px; border-top: 1px solid var(--line); }
.specstrip b { display: block; font-family: var(--font-display); font-size: 30px; font-weight: 700; }
.specstrip span { font-size: 13px; color: var(--t3); }

/* ---------- architecture rows ---------- */
.arch { display: flex; flex-direction: column; }
.arch__row { display: grid; grid-template-columns: 90px 300px 1fr; gap: 32px; padding: 26px 0; border-top: 1px solid var(--line); align-items: start; }
.arch__row:last-child { border-bottom: 1px solid var(--line); }
.arch__idx { font-family: var(--font-mono); font-size: 13px; color: var(--t4); }
.arch__name { font-family: var(--font-display); font-size: 18px; font-weight: 600; }
.arch__desc { font-size: 14px; line-height: 1.9; color: var(--t2); }

/* ---------- kernel cards ---------- */
.kcard { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.kcard em { font-family: var(--font-mono); font-style: normal; font-size: 11px; letter-spacing: 1.6px; color: var(--t4); }
.kcard h4 { font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.kcard p { font-size: 14px; line-height: 1.85; color: var(--t2); }

/* ---------- section header ---------- */
.sechead { display: flex; flex-direction: column; gap: 16px; max-width: 900px; margin-bottom: 44px; }

/* ---------- responsive ---------- */
@media (max-width: 1200px) {
  :root { --pad-x: 48px; --sec-y: 72px; }
  /* No room for the 29-character wordmark on ONE line beside the centred nav,
     so stack it instead of dropping it. Two lines share the left edge, which
     roughly halves the width the name needs. */
  .brand__name {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 1px; font-size: 12px; letter-spacing: .6px; line-height: 1.15;
  }
  h1, .h1 { font-size: 52px; } h2, .h2 { font-size: 36px; }
  .footer { padding: 48px 48px 28px; }
  .footer__top { flex-direction: column; gap: 34px; }
  .footer__cols { grid-template-columns: repeat(2, 1fr); }
  .tabs { flex-direction: column; }
  .tabs__rail { width: 100%; }
  .ws, .ws--flip { grid-template-columns: 1fr; gap: 32px; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .catalog { grid-template-columns: repeat(2, 1fr); }
  .arch__row { grid-template-columns: 60px 1fr; }
  .arch__desc { grid-column: 1 / -1; }
}
/* Below ~980px the two-line wordmark and a centred five-link nav no longer fit
   side by side. Tightening the links buys the room, which beats the previous
   behaviour of dropping the wordmark entirely. */
@media (min-width: 861px) and (max-width: 979px) {
  .nav__links { gap: 18px; }
  .nav__links a { font-size: 12px; }
}

@media (max-width: 860px) {
  :root { --pad-x: 24px; --sec-y: 56px; }
  h1, .h1 { font-size: 38px; } h2, .h2 { font-size: 28px; }
  .nav { padding: 0 24px; }
  .nav__links { display: none; }
  /* links gone, so the wordmark has room again — back to one line. 11.5px is
     what a 390px phone can take beside the CN/EN toggle. */
  .brand__name { display: flex; flex-direction: row; align-items: center; font-size: 11.5px; letter-spacing: .72px; gap: 8px; }
  .hero { padding: 90px 24px 48px; }
  .hero__metrics, .specstrip { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .footer { padding: 40px 24px 24px; }
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer__bottom { flex-direction: column; }
  .tabs__cols { grid-template-columns: 1fr; gap: 20px; }
  .catalog { grid-template-columns: 1fr; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .vhero { padding: 76px 0 92px; }
  .vhero__slogan { gap: 14px; }
  .vhero__slogan span:first-child { font-size: 30px; }
  .vhero__slogan span:last-child { font-size: 18px; }
  /* 34px of tracked-out caps overruns a 390px screen — step it down */
  .vhero__en { gap: 10px; }
  .vhero__en span:first-child { font-size: 26px; letter-spacing: 2px; }
  .vhero__en span:last-child { font-size: 14px; letter-spacing: 2px; }
  /* at 11px/5px the descriptor needs 487px — more than a phone's 342px gutter,
     so step the whole block down rather than let it wrap */
  .vhero__brand { font-size: 9px; letter-spacing: 2px; gap: 5px; }
  .vhero__brand span:nth-child(2) { letter-spacing: 1.6px; }
  .vhero__brand span:nth-child(3) { font-size: 8.5px; letter-spacing: 1.4px; margin-top: 2px; }
  /* The cue stays hidden on phones: centred it lands on the copy block (both
     occupy the lower half at this width), and swiping is the native gesture. */
  .vhero__cue { display: none; }
  .carousel { padding: 0 16px; }
  .carousel__nav { display: none; }
  .cta { padding: 56px 24px; }
  .tbl thead { display: none; }
  .tbl tbody td { display: block; padding: 6px 20px; border: 0; }
  .tbl tbody tr { display: block; padding: 14px 0; border-top: 1px solid var(--line-soft); }
}