/* Native sticky catalog. Composition is chosen by story, not photo count. */
.about-journey {
  --journey-top: 160px;
  --journey-card-height: 700px;
  --journey-step: 988px;
  --journey-padding: clamp(16px, 2.2vw, 32px);
  padding: clamp(48px, 6vw, 96px) clamp(20px, 2.5vw, 40px) 64px;
  color: #d7e2ea; background: #0c0c0c;
  font-family: 'Kanit', 'PingFang SC', sans-serif;
}
.about-journey-heading {
  margin: 0 0 clamp(48px, 6vw, 96px); font-weight: 900;
  font-size: clamp(42px, 12vw, 160px); line-height: 1; letter-spacing: -.025em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #646973 0%, #bbccd7 100%);
  background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.about-journey-cards { position: relative; }
.about-journey-slot { position: relative; margin: 0 0 32px; }
.about-journey-card {
  position: relative; display: flex; flex-direction: column;
  min-width: 0; max-width: 1040px; margin-inline: auto; padding: var(--journey-padding);
  border: 2px solid #d7e2ea; border-radius: clamp(32px, 4.2vw, 60px);
  background: #0c0c0c; transform-origin: center top;
}
.about-journey-card-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start; gap: clamp(16px, 2.4vw, 36px); margin-bottom: 24px;
}
.about-journey-number { font-size: clamp(64px, 9.7vw, 140px); font-weight: 900; line-height: .9; letter-spacing: .035em; font-kerning: none; font-variant-numeric: tabular-nums; }
.about-journey-copy { min-width: 0; padding-top: 2px; }
.about-journey-copy h3 { margin: 0; font-size: clamp(22px, 2.2vw, 32px); font-weight: 500; line-height: 1.25; text-wrap: balance; }
.about-journey-description { max-width: 760px; margin: 9px 0 0; font-size: clamp(14px, 1.25vw, 18px); font-weight: 300; line-height: 1.45; color: #a8adb4; text-wrap: balance; }
.about-journey-date { padding: 11px 24px; border: 2px solid #d7e2ea; border-radius: 999px; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: .06em; white-space: nowrap; }
.about-journey-collage {
  --photo-space: calc(var(--journey-card-height) - 210px);
  display: grid; gap: 12px; align-items: center; align-content: center;
  width: 100%; min-width: 0; min-height: 0; margin: auto; flex: none;
}
.about-journey-photo {
  min-width: 0; margin: 0; position: relative; overflow: hidden;
  border-radius: clamp(16px, 2vw, 28px);
}
/* Each frame hugs the original ratio; no letterboxed background or forced height. */
.about-journey-photo img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.about-journey-photo figcaption { position: absolute; left: 12px; bottom: 12px; color: #0c0c0c; background: #d7e2ea; border-radius: 999px; padding: 5px 12px; font-size: 12px; }
/* Equal-height printer and motor views. Only a small ratio correction is cropped. */
[data-journey-layout="tools"] { grid-template-columns: 1.37fr 1.333fr; align-items: stretch; }
[data-journey-layout="tools"] > :last-child img { height: 100%; object-fit: cover; }
/* Keep the approved full ignition portrait and both complete design renders. */
[data-journey-layout="ignition"] { max-width: min(100%, calc(var(--photo-space) * 1.67)); grid-template-columns: .885fr .796fr; grid-template-rows: auto auto; }
[data-journey-layout="ignition"] > :first-child { grid-row: 1 / 3; }
/* Firing left, two observations stacked in the middle, site right. */
[data-journey-layout="test02"] { height: min(var(--photo-space), 360px); grid-template-columns: 1.78fr .85fr 1.333fr; grid-template-rows: 1fr 1fr; align-items: stretch; }
[data-journey-layout="test02"] > :first-child { grid-column: 3; grid-row: 1 / 3; }
[data-journey-layout="test02"] > :nth-child(2) { grid-column: 1; grid-row: 1 / 3; }
[data-journey-layout="test02"] > :nth-child(3) { grid-column: 2; grid-row: 1; }
[data-journey-layout="test02"] > :nth-child(4) { grid-column: 2; grid-row: 2; }
/* Main rig plus two aligned detail views; redundant control photograph removed. */
[data-journey-layout="test03"] { max-width: min(100%, calc(var(--photo-space) * 2)); aspect-ratio: 2; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; align-items: stretch; }
[data-journey-layout="test03"] > :first-child { grid-row: 1 / 3; }
/* Full plume portrait and material view share the same natural height. */
[data-journey-layout="materials"] { max-width: min(100%, calc(var(--photo-space) * 1.89)); grid-template-columns: .557fr 1.333fr; }
/* Two complete test views at left; the confirmed nozzle detail anchors the right. */
[data-journey-layout="final-test"] { max-width: min(100%, calc(var(--photo-space) * 1.5)); aspect-ratio: 1.5; grid-template-columns: 1fr 1fr; grid-template-rows: .563fr .75fr; align-items: stretch; }
[data-journey-layout="final-test"] > :nth-child(3) { grid-column: 2; grid-row: 1 / 3; }
/* Campus portraits and stacked printing views have shared top/bottom edges. */
[data-journey-layout="campus"] { max-width: min(100%, calc(var(--photo-space) * 2.15)); aspect-ratio: 2.15; grid-template-columns: .75fr .75fr .65fr; grid-template-rows: 1fr 1fr; align-items: stretch; }
[data-journey-layout="campus"] > :first-child { grid-column: 1; grid-row: 1 / 3; }
[data-journey-layout="campus"] > :nth-child(2) { grid-column: 2; grid-row: 1 / 3; }
[data-journey-layout="campus"] > :nth-child(3) { grid-column: 3; grid-row: 1; }
[data-journey-layout="campus"] > :nth-child(4) { grid-column: 3; grid-row: 2; }
/* Only these measured compositions need a slight edge crop for aligned frames. */
:is([data-journey-layout="test02"], [data-journey-layout="test03"], [data-journey-layout="final-test"], [data-journey-layout="campus"]) .about-journey-photo img { height: 100%; object-fit: cover; }
/* Test02 has four different ratios: fill only its vertical extensions with
   the same photograph, blurred behind a complete, sharp foreground image. */
[data-journey-layout="test02"] .about-journey-photo::before { content: ''; position: absolute; inset: -16px; background-size: cover; background-position: center; filter: blur(14px); opacity: .6; }
[data-journey-layout="test02"] > :nth-child(1)::before { background-image: url('/assets/history/rocket-02-site-small.jpg'); }
[data-journey-layout="test02"] > :nth-child(2)::before { background-image: url('/assets/history/rocket-02-heat-small.jpg'); }
[data-journey-layout="test02"] > :nth-child(3)::before { background-image: url('/assets/history/rocket-02-smoke-small.jpg'); }
[data-journey-layout="test02"] > :nth-child(4)::before { background-image: url('/assets/history/rocket-02-result-small.jpg'); }
[data-journey-layout="test02"] .about-journey-photo img { position: relative; object-fit: contain; }
/* Both single-photo cards fit within the same card width and available height. */
.about-journey-card--launch, .about-journey-card--network {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 32px; align-items: center;
}
.about-journey-card--launch { grid-template-columns: minmax(0, 1fr) auto; }
.about-journey-card--launch .about-journey-card-head,
.about-journey-card--network .about-journey-card-head { grid-template-columns: minmax(0, 1fr); margin: 0; gap: 24px; }
.about-journey-card--launch .about-journey-copy h3,
.about-journey-card--network .about-journey-copy h3 { font-size: clamp(28px, 3vw, 44px); }
.about-journey-card--launch .about-journey-description { max-inline-size: 30em; text-wrap: balance; }
.about-journey-card--launch .about-journey-description span { display: block; }
[data-journey-layout="launch"] { width: min(42vw, calc((var(--journey-card-height) - var(--journey-padding) * 2 - 4px) * .578)); }
[data-journey-layout="network"] { max-width: calc((var(--journey-card-height) - var(--journey-padding) * 2 - 4px) * 1.33); }
.about-journey-date--photo { position: absolute; top: 16px; right: 16px; color: #d7e2ea; background: #0c0c0c; padding: 9px 14px; font-size: 12px; }
/* Reading distance lives between cards, outside their equal-height sticky boxes.
   All boxes share the same containing-block end, so earlier cards cannot release
   before the final card. The page ends exactly when that card reaches its anchor. */
.about-journey[data-journey-ready] { padding-bottom: var(--journey-bottom); }
.about-journey[data-journey-ready] .about-journey-cards { display: grid; row-gap: calc(var(--journey-step) - var(--journey-card-height)); }
.about-journey[data-journey-ready] .about-journey-slot { position: sticky; top: var(--journey-top); height: var(--journey-card-height); margin: 0; }
.about-journey[data-journey-ready] .about-journey-card { height: var(--journey-card-height); }
@media (max-width: 1040px) {
  .about-journey { --journey-top: 128px; }
  .about-journey-card-head { gap: 16px; }
  .about-journey-date { padding: 9px 14px; }
  .about-journey-card--launch, .about-journey-card--network { gap: 24px; }
}
@media (max-width: 767px) {
  .about-journey { --journey-top: 120px; padding-inline: 20px; }
  .about-journey-card-head { grid-template-columns: auto minmax(0, 1fr); }
  .about-journey-date { grid-column: 2; justify-self: start; font-size: 12px; }
}
/* Static, narrow and reduced-motion views preserve native photo proportions. */
.about-journey:not([data-journey-ready]) .about-journey-card { height: auto; }
@media (max-width: 639px), (max-height: 650px), (prefers-reduced-motion: reduce) {
  .about-journey[data-journey-ready] { padding-bottom: 64px; }
  .about-journey[data-journey-ready] .about-journey-cards { display: block; }
  .about-journey[data-journey-ready] .about-journey-slot { position: relative; top: auto; height: auto; margin-bottom: 28px; }
  .about-journey[data-journey-ready] .about-journey-card { height: auto; transform: none; opacity: 1; }
  .about-journey-card--launch, .about-journey-card--network { display: flex; }
  .about-journey-card--launch .about-journey-card-head, .about-journey-card--network .about-journey-card-head { grid-template-columns: auto minmax(0, 1fr); margin-bottom: 24px; gap: 16px; }
  .about-journey-card--launch .about-journey-copy h3, .about-journey-card--network .about-journey-copy h3 { font-size: 26px; }
  [data-journey-layout="launch"] { width: min(100%, 360px); }
  .about-journey-collage { flex: none; max-width: 100%; aspect-ratio: auto; }
  [data-journey-layout="test02"] { height: auto; }
  [data-journey-layout="test02"] .about-journey-photo::before { display: none; }
  .about-journey-photo img { height: auto !important; }
  [data-journey-layout="final-test"] { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  [data-journey-layout="final-test"] > :nth-child(n) { grid-column: auto; grid-row: auto; }
  [data-journey-layout="final-test"] > :last-child { grid-column: 1 / 3; width: 65%; justify-self: center; }
  [data-journey-layout="test02"], [data-journey-layout="test03"] { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  [data-journey-layout="test02"] > :nth-child(n), [data-journey-layout="test03"] > :nth-child(n) { grid-column: auto; grid-row: auto; width: 100%; }
  [data-journey-layout="campus"] { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
  [data-journey-layout="campus"] > :nth-child(n) { grid-column: auto; grid-row: auto; }
  .about-journey-photo figcaption { left: 6px; bottom: 6px; font-size: 10px; padding: 3px 7px; }
  .about-journey-description { font-size: 15px; }
}