/* Layout is derived from the live reference captured on 2026-09-20.
   Image sizing is controlled by assets.json; typography never scales with images. */
:root {
  color-scheme: dark;
  --canvas: #000;
  --ink: #fff;
  --muted: #e0e0e6;
  --line: rgba(240,240,250,.42);
  --hover: #f0f0fa;
  --font: Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --header-height: 74px;
  --nav-gutter: 40px;
  --hero-gutter: 60px;
  --section-gutter: 100px;
  --copy-width: 450px;
  --hero-size: 60px;
  --title-size: 48px;
  --statement-size: 72px;
  --body-size: 16px;
  --title-leading: 1.18;
  --body-leading: 1.8;
  --button-height: 50px;
  --button-radius: 4px;
  --motion: 220ms;
  --ease: cubic-bezier(.2,.65,.3,1);
  --scrim-left: linear-gradient(90deg,rgba(0,0,0,.76),rgba(0,0,0,.32) 43%,rgba(0,0,0,.02) 78%);
  --scrim-right: linear-gradient(270deg,rgba(0,0,0,.78),rgba(0,0,0,.30) 43%,rgba(0,0,0,.02) 78%);
  --scrim-hero: linear-gradient(0deg,rgba(0,0,0,.64),transparent 68%);
  --scrim-mobile: linear-gradient(0deg,rgba(0,0,0,.84),rgba(0,0,0,.12) 67%,rgba(0,0,0,.05));
  /* Layer scale: media 0, copy 1, header 10, menu 20, skip link 30. */
}
* {box-sizing:border-box}
html {background:var(--canvas);scroll-behavior:auto;scroll-padding-top:var(--header-height)}
.contact-hash-pending {scroll-behavior:auto!important}
body {margin:0;color:var(--ink);font-family:var(--font);font-size:var(--body-size);-webkit-font-smoothing:antialiased}
body.menu-open {overflow:hidden}
a {color:inherit;text-decoration:none}
button {font:inherit;color:inherit;cursor:pointer}
button,a {-webkit-tap-highlight-color:transparent}
button {border:0;background:none}
a:focus-visible,button:focus-visible {outline:2px solid #fff;outline-offset:6px}
::selection {color:#000;background:#fff}
h1,h2,p {margin:0}
.skip-link {position:fixed;z-index:30;top:8px;left:16px;padding:12px;background:#fff;color:#000;transform:translateY(-160%)}
.skip-link:focus {transform:none}
.site-header {height:var(--header-height);position:fixed;top:0;left:0;width:100%;z-index:10;display:flex;align-items:center;padding:0 var(--nav-gutter);gap:32px}
.site-header::before {content:"";position:absolute;inset:0 0 -38px;background:linear-gradient(#000a,transparent);z-index:-1;pointer-events:none}
.brand {display:block;flex-shrink:0;width:148px;line-height:0}
.brand img {width:100%;height:auto;object-fit:contain}
.desktop-nav {display:flex;align-items:center;gap:32px}
.desktop-nav a,.header-contact {position:relative;font-size:13px;font-weight:700;line-height:1.5;white-space:nowrap;letter-spacing:.035em;padding:8px 0}
.desktop-nav a::after,.header-contact::after {content:"";position:absolute;bottom:3px;left:0;right:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform var(--motion) var(--ease)}
.desktop-nav a:hover::after,.desktop-nav a[aria-current=page]::after,.header-contact:hover::after {transform:scaleX(1)}
.header-contact {margin-left:auto}
.menu-toggle {display:none;margin-left:auto;width:44px;height:44px;position:relative;padding:10px}
.menu-toggle span {display:block;width:24px;height:1px;background:#fff;margin:6px 0}
.menu-panel {position:fixed;inset:0;z-index:20;background:#000;padding:0 var(--nav-gutter) 40px;overflow-y:auto}
.menu-panel[hidden] {display:none}
.menu-top {height:var(--header-height);display:flex;align-items:center;justify-content:space-between}
.menu-close {font-size:32px;font-weight:300;width:44px;height:44px;line-height:1}
.mobile-nav {display:flex;flex-direction:column;align-items:flex-start;padding-top:8px;gap:0}
.mobile-nav a {padding:18px 0;font-size:18px;font-weight:600;letter-spacing:.03em;width:100%}
.menu-contact {border-top:1px solid var(--line);margin-top:32px;padding-top:28px}
.menu-contact p {color:#a8a8ad;font-size:13px;margin-bottom:14px}
.menu-contact a {display:block;overflow-wrap:anywhere;font-size:14px;margin-top:12px}
.image-section {position:relative;isolation:isolate;min-height:100svh;height:100svh;background:var(--canvas);display:flex;align-items:center;overflow:hidden}
.image-section.chapter {height:calc(100svh + 40px);min-height:760px}
.media {position:absolute;inset:0;z-index:-2;display:block;width:100%;height:100%;background:#111}
.media img {display:block;width:100%;height:100%;object-fit:var(--asset-fit,fill);object-position:var(--asset-position,50% 50%)}
.image-section::after {content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--scrim-left)}
.image-section.right::after {background:var(--scrim-right)}
.image-section.hero::after {background:var(--scrim-hero)}
.section-copy {position:relative;z-index:1;width:var(--copy-width);margin-left:var(--section-gutter);padding:0;max-width:calc(100% - 2 * var(--section-gutter))}
.eyebrow {font-size:14px;line-height:1.5;font-weight:400;letter-spacing:.065em;margin-bottom:14px}
.section-copy h1,.section-copy h2 {font-size:var(--title-size);font-weight:700;line-height:var(--title-leading);letter-spacing:0;word-break:normal;text-wrap:balance}
.section-copy .description {font-size:var(--body-size);line-height:var(--body-leading);color:var(--muted);margin-top:24px;max-width:450px;text-wrap:pretty}
.button {position:relative;display:inline-flex;gap:18px;align-items:center;justify-content:center;min-height:var(--button-height);padding:12px 20px;margin-top:30px;border:1px solid var(--line);border-radius:var(--button-radius);font-size:13px;line-height:1.5;background:transparent;color:var(--ink);transition:background var(--motion) var(--ease),color var(--motion) var(--ease),border-color var(--motion) var(--ease)}
.button .arrow {font-family:Arial,sans-serif;font-size:21px;line-height:1;transition:transform var(--motion) var(--ease)}
.button:hover,.button:focus-visible {background:var(--hover);color:#000;border-color:var(--hover)}
.button:hover .arrow {transform:translateX(3px)}
.hero {align-items:flex-end}
.hero .section-copy {width:760px;margin-left:var(--hero-gutter);margin-bottom:15svh;max-width:calc(100% - 2 * var(--hero-gutter))}
.hero .eyebrow {margin-bottom:10px;font-size:16px;letter-spacing:.02em}
.hero .section-copy h1 {font-size:var(--hero-size)}
.hero .description {margin-top:18px}
.statement .section-copy {width:480px}
.statement .section-copy h2 {font-size:var(--statement-size);line-height:1.1}
.right {align-items:flex-start}
.right .section-copy {margin-left:auto;margin-right:var(--section-gutter);margin-top:13svh}
.left .section-copy {margin-top:10svh}
.product-hero {justify-content:center;text-align:center}
.product-hero::after {background:linear-gradient(0deg,#0004,#0003 60%,#0005)}
.product-hero .section-copy {margin:0;width:auto;max-width:calc(100% - 40px);transform:translateY(-5svh)}
.product-hero .section-copy h1 {font-size:80px;line-height:1.15}
.product-hero .description {margin:24px auto 0;font-size:16px;letter-spacing:.05em}
.title-part {display:inline-block;white-space:nowrap}
.scroll-cue {position:absolute;z-index:2;left:50%;bottom:24px;transform:translateX(-50%);width:48px;height:48px;display:grid;place-items:center}
.scroll-cue svg,.timeline-controls svg {fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.scroll-cue:hover {color:#bbb}
.sr-only {position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.overview .section-copy {width:520px}
.overview .section-copy h2 {font-size:40px}
.overview::after {background:linear-gradient(90deg,#000f,#000d 34%,#0002 80%)}
.specs {margin:32px 0 0}
.specs div {display:flex;gap:24px;justify-content:space-between;padding:20px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.6}
.specs dt {color:var(--muted)}
.specs dd {margin:0;text-align:right}
.contact-shell {position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 82% 18%,rgba(91,110,137,.20),transparent 43%),linear-gradient(135deg,#0b0c0f,#030405 70%)}
.contact-shell::before {content:"";position:absolute;z-index:0;top:-24%;right:-10%;width:min(62%,760px);aspect-ratio:1;border:1px solid rgba(220,228,240,.12);border-radius:50%;box-shadow:0 0 0 54px rgba(220,228,240,.022),0 0 0 112px rgba(220,228,240,.015),0 0 0 190px rgba(220,228,240,.01);pointer-events:none}
.contact-shell::after {content:"";position:absolute;z-index:0;inset:0;background:linear-gradient(132deg,transparent 49.85%,rgba(220,228,240,.04) 50%,transparent 50.15%);pointer-events:none}
.contact {position:relative;z-index:1;width:100%;margin:0;padding:clamp(40px,5vh,60px) var(--section-gutter);border:0;background:transparent;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5vw,76px);align-items:center;min-height:520px}
.contact > div {position:relative;z-index:1;min-width:0}
.contact:focus {outline:0}
.contact h2 {font-size:40px;line-height:1.3;letter-spacing:0}
.contact .description {color:var(--muted);margin-top:20px;line-height:var(--body-leading)}
.contact-details {justify-self:end;width:450px;max-width:100%}
.contact-email {font-size:22px;line-height:1.5;overflow-wrap:anywhere;display:inline-block;border-bottom:1px solid #777;padding-bottom:7px}
.contact-phone {display:block;font-size:24px;margin-top:22px}
.contact address {font-size:14px;line-height:1.9;font-style:normal;color:#bdbdc3;margin-top:28px}
.site-footer {position:relative;z-index:1;margin-top:0;padding:32px var(--nav-gutter);display:flex;justify-content:center;gap:32px;align-items:center;flex-wrap:wrap;font-size:11px;line-height:1.7;color:#bdbdc3;background:transparent}
.footer-color-mark {display:block;width:42px;height:auto;flex:0 0 auto}
.site-footer a {color:var(--ink)}
.site-footer a:hover {text-decoration:underline}
.news-hero .section-copy {width:740px}
.news-hero .section-copy h1 {font-size:52px;max-width:740px}
.news-archive {padding:90px var(--section-gutter) 110px;background:#000}
.news-archive h2 {font-size:40px;margin-bottom:50px}
.archive-heading {display:flex;justify-content:space-between;align-items:baseline;gap:24px}
.archive-heading p {font-size:14px;color:#aaa;white-space:nowrap}
.news-row {display:grid;grid-template-columns:160px minmax(0,1fr);gap:36px;padding:40px 0;border-top:1px solid var(--line)}
.news-row time {font-size:14px;color:var(--muted);line-height:1.8}
.news-row h3 {font-size:26px;line-height:1.5;margin:0 0 14px}
.news-row p {line-height:1.8;color:var(--muted);max-width:720px}
@media(min-width:1600px) {
  :root {--nav-gutter:60px;--hero-gutter:80px;--section-gutter:8vw;--copy-width:450px}
}
@media(max-width:1100px) {
  :root {--nav-gutter:24px;--hero-gutter:40px;--section-gutter:56px;--title-size:44px;--statement-size:64px;--hero-size:54px}
  .site-header {gap:26px}
  .desktop-nav {gap:22px}
  .desktop-nav a {font-size:12px}
  .contact {gap:30px}
  .contact-email {font-size:18px}
}
@media(max-width:900px) {
  .desktop-nav,.header-contact {display:none}
  .menu-toggle {display:block}
  .site-header {position:fixed}
  .contact {grid-template-columns:minmax(0,1fr);gap:40px;align-content:start;min-height:600px;padding-top:52px;padding-bottom:52px}
  .contact-details {justify-self:start}
  .right .section-copy {margin-top:18svh}
  .product-hero .section-copy h1 {font-size:60px}
}
@media(max-width:600px) {
  :root {--nav-gutter:16px;--hero-gutter:16px;--section-gutter:20px;--header-height:74px;--hero-size:42px;--title-size:36px;--statement-size:48px;--body-size:15px;--body-leading:1.8;--title-leading:1.25}
  .brand {width:148px}
  .image-section,.image-section.chapter {height:auto;min-height:max(100svh,700px);align-items:flex-end;padding:120px 0 44px}
  .media img {object-fit:var(--asset-mobile-fit,fill);object-position:var(--asset-mobile-position,50% 50%)}
  .image-section::after,.image-section.right::after,.image-section.hero::after,.overview::after {background:var(--scrim-mobile)}
  .section-copy,.right .section-copy,.left .section-copy,.hero .section-copy {margin:0 var(--section-gutter);width:auto;max-width:calc(100% - 2 * var(--section-gutter))}
  .hero .section-copy {margin-left:var(--hero-gutter);max-width:calc(100% - 2 * var(--hero-gutter))}
  .hero .section-copy h1 {max-width:7em}
  #home .section-copy {margin-bottom:32px}
  .scroll-cue {bottom:10px}
  .section-copy .description {margin-top:20px}
  .eyebrow {font-size:12px;margin-bottom:12px;letter-spacing:.06em}
  .hero .eyebrow {font-size:14px}
  .button {margin-top:28px;min-height:50px;padding:12px 20px}
  .copy-break {display:none}
  .product-hero {align-items:center;justify-content:center;text-align:center;padding:120px 16px}
  .product-hero .section-copy {margin:0;max-width:100%;transform:translateY(-4svh)}
  .product-hero .section-copy h1 {font-size:44px;max-width:6em;text-wrap:balance}
  .product-hero .description {font-size:12px;letter-spacing:.06em}
  .overview {padding-top:110px}
  .overview .section-copy h2 {font-size:32px}
  .overview .section-copy {width:auto}
  .overview .description {font-size:15px}
  .specs {margin-top:24px}
  .specs div {padding:15px 0;font-size:13px;gap:18px}
  .contact {width:100%;margin:0;padding:48px 24px;align-content:start}
  .contact h2 {font-size:32px}
  .contact-email {font-size:18px}
  .contact-phone {font-size:22px}
  .site-footer {justify-content:flex-start;gap:20px;padding:28px 20px}
  .site-footer .company-name {flex-basis:100%;font-size:11px}
  .news-hero .section-copy h1 {font-size:36px}
  .news-archive {padding:64px 20px}
  .news-archive h2 {font-size:30px;margin-bottom:30px}
  .news-row {grid-template-columns:minmax(0,1fr);gap:12px;padding:32px 0}
  .news-row h3 {font-size:24px}
}
@media(prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto}
  *,*::before,*::after {transition:none!important;animation:none!important}
}

/* Shared detail, article and history layouts. */
.editorial-intro {padding:120px var(--section-gutter);display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.editorial-intro h2 {font-size:48px;line-height:1.3}
.editorial-intro p {font-size:18px;line-height:2;color:var(--muted);max-width:640px}
.detail-rows {padding:0 var(--section-gutter) 110px}
.detail-row {display:grid;grid-template-columns:48px minmax(220px,.7fr) minmax(0,1fr);gap:32px;padding:40px 0;border-top:1px solid var(--line)}
.row-index {font-size:12px;color:#aaa;line-height:2.4}
.detail-row h2 {font-size:26px;line-height:1.5;font-weight:600}
.detail-row p {font-size:16px;line-height:1.9;color:var(--muted)}
.editorial-figure {margin:0 auto 90px;width:calc(100% - 2 * var(--section-gutter));max-width:1240px}
.figure-media {position:relative;isolation:isolate;height:65svh;min-height:360px;overflow:hidden}
.figure-media .media {z-index:0;background:#080808}
figcaption {font-size:12px;color:#bbb;line-height:1.8;margin-top:14px}
.article-body {max-width:820px;margin:auto;padding:100px 40px 60px;scroll-margin-top:74px}
.article-body .back-link {display:inline-block;font-size:14px;border-bottom:1px solid #777;padding-bottom:8px;margin-bottom:36px}
.article-body time {display:block;color:#aaa;font-size:14px;margin-bottom:48px}
.article-body section {margin-bottom:48px}
.article-body h2 {font-size:28px;line-height:1.5;margin-bottom:18px}
.article-body p {line-height:2.1;font-size:17px;color:var(--muted)}
.article-hero .section-copy h1 {font-size:48px;line-height:1.35}
.article-hero .section-copy {width:800px}
.article-hero .description {max-width:640px}
.related-story {padding:80px var(--section-gutter);border-top:1px solid var(--line)}
.related-story h2 {font-size:32px;line-height:1.5;max-width:800px}
.site-header.scrolled::before {background:linear-gradient(#000e,#0009 65%,transparent)}
@media(max-width:1100px) {
  .editorial-intro {gap:40px}
  .editorial-intro h2 {font-size:40px}
  .detail-row {grid-template-columns:32px minmax(180px,.7fr) minmax(0,1fr);gap:20px}
}
@media(max-width:900px) {
  .editorial-intro {grid-template-columns:1fr;gap:28px;padding-top:80px;padding-bottom:80px}
  .detail-row {grid-template-columns:30px minmax(0,1fr)}
  .detail-row p {grid-column:2}
}
@media(max-width:600px) {
  .editorial-intro {padding:70px 20px;gap:24px}
  .editorial-intro h2 {font-size:34px}
  .editorial-intro p {font-size:16px}
  .detail-rows {padding:0 20px 70px}
  .detail-row {gap:12px;padding:30px 0}
  .detail-row h2 {font-size:23px}
  .detail-row p {font-size:15px}
  .editorial-figure {margin-bottom:50px}
  .figure-media {height:54svh;min-height:300px}
  .article-body {padding:70px 20px 20px}
  .article-body h2 {font-size:24px}
  .article-body p {font-size:16px}
  .article-hero .section-copy h1 {font-size:34px;max-width:none}
  .article-hero .description {font-size:14px}
  .related-story {padding:60px 20px}
  .related-story h2 {font-size:26px}
  .site-footer {gap:18px 24px}
}

/* Supplied SpaceX reference: a wide image strip, centered title and small dot navigation. */
.timeline {background:#000;padding:80px 0 86px;scroll-margin-top:calc(-1 * var(--header-height));overflow:hidden}
.timeline > h2 {font-size:36px;line-height:1.25;text-align:center;max-width:760px;margin:0 auto 155px;padding:0 24px;letter-spacing:.015em}
.timeline-track {display:flex;gap:1.2vw;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;cursor:grab;touch-action:pan-x pan-y pinch-zoom}
.timeline-track::-webkit-scrollbar {display:none}
.timeline-track.dragging {cursor:grabbing;user-select:none}
.timeline-track:focus-visible {outline:1px solid #aaa;outline-offset:-1px}
.timeline-card {position:relative;isolation:isolate;overflow:hidden;flex:0 0 max(300px,22.2vw);height:clamp(220px,12.1vw,330px);background:#080808;scroll-margin:0;user-select:none}
.timeline-card::after {content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#000b,transparent 85%),linear-gradient(90deg,#0005,transparent 80%);pointer-events:none}
.timeline-card .media {pointer-events:none}
.timeline-card img {pointer-events:none}
.milestone-copy {position:absolute;left:clamp(28px,4vw,82px);right:26px;bottom:30px}
.milestone-copy h3 {font-size:16px;line-height:1.5;font-weight:500;margin:0 0 12px}
.milestone-copy p {font-size:13px;line-height:1.75;color:#fff;text-wrap:pretty}
.timeline-controls {display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;padding:18px 32px 0;gap:16px}
.timeline-controls button {height:48px;width:48px;display:grid;place-items:center}
.timeline-controls button[hidden] {display:none}
.timeline-controls button:disabled {opacity:.28;cursor:default}
.timeline-controls button:hover:not(:disabled) {opacity:.65}
.timeline-next svg {transform:rotate(180deg)}
.timeline-dots {display:flex;justify-content:center;align-items:center;grid-column:2;grid-row:1}
.timeline-dots a {width:22px;height:36px;display:grid;place-items:center}
.timeline-dots a > span:first-child {width:6px;height:6px;border-radius:50%;background:#707070;transition:background .2s}
.timeline-dots a[aria-current=true] > span:first-child,.timeline-dots a:hover > span:first-child {background:#fff}
.timeline-prev {grid-column:1;grid-row:1}
.timeline-next {grid-column:3;grid-row:1}
.article-body > p {margin-bottom:28px;overflow-wrap:anywhere;white-space:pre-line}
.article-body .editorial-figure {width:100%;margin:48px 0}
.article-body .figure-media {height:440px;min-height:280px}
@media(min-width:2000px) {
  .timeline > h2 {font-size:42px;margin-bottom:180px}
  .milestone-copy h3 {font-size:18px}
  .milestone-copy p {font-size:15px}
}
@media(max-width:900px) {
  .timeline {padding:80px 0 70px}
  .timeline > h2 {margin-bottom:90px;font-size:32px}
  .timeline-card {flex-basis:43vw;height:260px}
  .timeline-track {gap:18px}
  .milestone-copy {left:28px;right:26px;bottom:28px}
}
@media(max-width:600px) {
  .timeline > h2 {font-size:28px;margin-bottom:72px}
  .timeline-card {flex-basis:84vw;height:280px}
  .timeline-track {gap:16px}
  .timeline-controls {padding:18px 16px 0;gap:4px;grid-template-columns:40px minmax(0,1fr) 40px}
  .timeline-controls button {width:40px}
  .timeline-dots a {width:22px}
  .milestone-copy {left:28px;right:30px;bottom:32px}
  .milestone-copy h3 {font-size:17px}
  .milestone-copy p {font-size:14px;line-height:1.8}
  .article-body .figure-media {height:320px}
  .archive-heading {align-items:center}
  .archive-heading h2 {margin-bottom:30px;font-size:28px}
  .archive-heading p {font-size:12px;margin-bottom:30px}
}