/* Let's Talk Space.

   A reading section, which is a different job from the rest of the site. The
   other pages sell; these are meant to be read at length. So the measure is
   narrower, the line height taller, and there is more air between things.

   Everything reads the custom properties from style.css, so the section
   follows the palette and would survive a recolour. */

/* ---------------------------------------------------------------- hero */
/* Sits lower than the marketing hero: an article does not need to fill the
   viewport before it starts, and pushing the first paragraph below the fold
   is a way of losing readers. */
.lts-hero {
  max-width: 1100px;
  margin: 0 auto;
  padding: 7vh 5vw 3vh;
}
.lts-hero .eyebrow { margin-bottom: 16px; }
.lts-hero .eyebrow a { color: var(--brand); text-decoration: none; }
.lts-hero .eyebrow a:hover { text-decoration: underline; }
.lts-hero h1 {
  margin: 0 0 20px;
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.14;
  letter-spacing: -0.015em;
  max-width: 20em;
}
.lts-hero .sub { max-width: 40em; }

/* The name of the topic, repeated from the card that was clicked.

   Without it the first thing on eight of these pages was a section heading
   that never said which article you had opened. 20px is a quarter over the
   16px entry headings, which is enough to read as a label and not so much
   that it competes with the headline under it. */
.lts-topic {
  margin: 0 0 18px;
  font-size: 20px;
  line-height: 1.3;
  color: var(--ink);
  font-weight: 600;
}
.lts-topic b {
  display: inline-block;
  min-width: 2.2em;
  margin-right: 12px;
  font: 700 13px/1 "Courier New", Courier, monospace;
  letter-spacing: 0.18em;
  color: var(--brand);
  vertical-align: 2px;
}
.lts-hero .eyebrow { margin-bottom: 10px; }

/* ---------------------------------------------------------------- index cards */
.lts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr));
  gap: 18px;
}

/* The whole card is the link. A "read it" affordance is shown, but the target
   is the card, because a 13px text link is a needlessly small thing to ask
   someone to hit. */
.lts-card {
  display: flex;
  flex-direction: column;
  padding: 26px 24px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 2px solid var(--rule);
  text-decoration: none;
  transition: border-color 0.2s linear, background 0.2s linear, transform 0.2s ease;
}
.lts-card:hover, .lts-card:focus-visible {
  border-color: var(--brand);
  border-top-color: var(--brand);
  background: var(--surface-2, var(--surface));
  transform: translateY(-2px);
}
.lts-num {
  margin: 0 0 14px;
  font: 700 13px/1 "Courier New", Courier, monospace;
  letter-spacing: 0.2em;
  color: var(--brand);
}
.lts-card h3 {
  margin: 0 0 12px;
  font-size: 18px;
  line-height: 1.3;
  color: var(--ink);
}
.lts-teaser {
  margin: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-body);
  /* pushes the read affordance to the bottom so every card's sits on the same
     line regardless of how long its teaser runs */
  flex: 1 1 auto;
}
.lts-read {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 700 11px/1 "Courier New", Courier, monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand);
}
.lts-card:hover .lts-read svg { transform: translateX(3px); }
.lts-read svg { transition: transform 0.2s ease; }

/* ---------------------------------------------------------------- article body */
/* 34em, not the 32em used elsewhere: these run long, and a slightly wider
   measure means fewer lines without crossing into hard-to-track territory. */
.lts-hero + .sec .prose, .sec .prose { max-width: none; }
.prose p, .prose li { max-width: 34em; }
.prose h3 {
  margin: 34px 0 12px;
  font-size: 17px;
  color: var(--ink);
}

/* The sentence that carries the point of a section. Set larger, indented
   against a rule, so it reads as the conclusion rather than another
   paragraph. */
.lts-pull {
  margin: 26px 0;
  padding-left: 20px;
  border-left: 2px solid var(--brand);
  font-size: 17px !important;
  line-height: 1.6;
  color: var(--ink) !important;
  max-width: 34em;
}
.lts-note {
  margin: 0 0 20px;
  font-size: 13px;
  color: var(--ink-soft);
  max-width: 40em;
}
.lts-list li { margin-bottom: 10px; line-height: 1.65; }

/* ---------------------------------------------------------------- stat band */
.lts-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.lts-stats > div {
  padding: 22px 20px;
  background: var(--bg);
  text-align: center;
}
.lts-stats b {
  display: block;
  font: 700 32px/1 "Courier New", Courier, monospace;
  color: var(--brand);
  margin-bottom: 8px;
}
.lts-stats span {
  font-size: 12.5px;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------- timeline */
/* The chronology treatment from the approved template page (style 31, the
   final combined design): a 2px rail fading down the page, the date and the
   first pinned in a right-aligned gutter against it, entries as edge-to-edge
   bands whose borders collapse so the run reads as one stack, a marker on
   the rail that pings constantly, and a hover that lifts a band out of the
   stack and lights its marker harder. One stylesheet block, because all nine
   articles with a dated list share this markup, so they all take the
   treatment together. */
.lts-time { position: relative; margin-top: 24px; }
/* the rail: brand at the top, fading as the history recedes */
.lts-time::before {
  content: "";
  position: absolute;
  left: 172px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(var(--brand), var(--rule));
}
/* Each entry is one grid row: gutter, content, and a photo column when the
   entry carries one. The gutter track runs all the way to where the band
   begins, standing in for the template page's 190px padding; the visible
   gutter text is held off the rail by the cell's own right padding. Bands
   overlap by 1px so shared borders collapse into one stack. */
.lts-tick {
  position: relative;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 0;
  margin-bottom: -1px;
}
.lts-tick.tick-fig { grid-template-columns: 190px minmax(0, 1fr) 242px; }
.lts-tick:hover { z-index: 3; }
/* the band itself */
.lts-tick > div:not(.lts-side):not(.figbox) {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 30px 32px;
  transition: transform 0.2s ease, border-color 0.2s linear, background 0.2s linear;
}
/* The photo column continues the band: same surface, same border, and no
   border or gap where the two cells meet, so the text and the photograph
   read as ONE card, the way the template page draws its figbox inside the
   card. The framed photo box itself is drawn by the img and the caption
   sharing one border between them. */
.lts-tick.tick-fig > div:not(.lts-side):not(.figbox) { border-right: none; }
.lts-tick .figbox {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: none;
  padding: 30px 32px 30px 0;
  transition: transform 0.2s ease, border-color 0.2s linear, background 0.2s linear;
}
.lts-tick .figbox img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  padding: 8px 8px 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-bottom: none;
  cursor: zoom-in;
}
/* caption and credit under an entry photograph, the template page's format */
.lts-tick .figbox figcaption {
  box-sizing: border-box;
  margin: 0;
  padding: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-top: none;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.lts-tick .figbox figcaption b { color: var(--ink-body); font-weight: 600; }
/* hovering the band lifts the whole card out, photo column included */
.lts-tick:hover > div:not(.lts-side):not(.figbox),
.lts-tick:hover .figbox {
  border-color: var(--brand);
  background: var(--surface-2, #141a22);
  transform: translateX(6px);
}
/* the muted engineering note, indented against a rule */
.lts-tick .tick-note {
  margin-top: 10px;
  padding-left: 14px;
  border-left: 2px solid var(--rule);
  font-size: 13.5px !important;
  line-height: 1.6;
  color: var(--ink-soft) !important;
}
/* the per-entry reference link */
.lts-tick .tick-ref {
  margin-top: 12px;
  font-size: 12.5px !important;
}
.lts-tick .tick-ref a { color: var(--brand); text-decoration: none; }
.lts-tick .tick-ref a:hover { text-decoration: underline; }
/* the gutter cell: date, and the summary beneath it, pinned together while
   the band scrolls, right-aligned against the rail */
.lts-side {
  position: sticky;
  top: 22px;
  align-self: start;
  text-align: right;
  padding-right: 32px;
  z-index: 2;
}
.lts-side .lts-date {
  margin: 0;
  font: 700 24px/1.1 "Courier New", Courier, monospace;
  letter-spacing: -0.02em;
  color: var(--brand);
  text-align: right;
}
.lts-first {
  display: block;
  margin-top: 9px;
  font: 700 13px/1.5 "Courier New", Courier, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d6e9ff;
}
/* The marker on the rail: a ring holding a lit core, with a second ring that
   expands and fades on a constant cycle. Hovering the band lights the marker
   harder, so the gutter and the card read as one row rather than two columns
   that happen to align. */
.lts-tick::before {
  content: "";
  position: absolute;
  left: 166px;
  top: 5px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid var(--brand);
  background: radial-gradient(circle, var(--brand) 0 2.5px, var(--bg) 2.6px);
  z-index: 2;
}
.lts-tick::after {
  content: "";
  position: absolute;
  left: 166px;
  top: 5px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid var(--brand);
  opacity: 0;
  z-index: 1;
}
.lts-tick:hover::before {
  border-color: #9ccdff;
  box-shadow: 0 0 10px 2px rgba(77, 166, 255, 0.8);
}
@media (prefers-reduced-motion: no-preference) {
  .lts-tick::after { animation: lts-ping 3.4s ease-out infinite; }
  .lts-tick:nth-child(2n)::after { animation-delay: 0.55s; }
  .lts-tick:nth-child(3n)::after { animation-delay: 1.1s; }
  .lts-tick:hover .lts-first { animation: first-flash 1.6s ease-in-out infinite; }
  .lts-tick:hover .lts-side:not(:has(.lts-first)) .lts-date {
    animation: first-flash 1.6s ease-in-out infinite; }
}
@keyframes lts-ping {
  0%   { transform: scale(1);   opacity: 0.65; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
@keyframes first-flash {
  0%, 42% { color: #ffffff; text-shadow: 0 0 10px rgba(255,255,255,.85),
    0 0 22px rgba(77,166,255,.6); }
  50%, 92% { color: var(--brand); text-shadow: 0 0 8px rgba(77,166,255,.55); }
  100% { color: #ffffff; text-shadow: 0 0 10px rgba(255,255,255,.85),
    0 0 22px rgba(77,166,255,.6); }
}
.lts-tick h3 { margin: 0 0 10px; font-size: 19px; line-height: 1.25; color: var(--ink); }
.lts-tick > div:not(.lts-side):not(.figbox) p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  max-width: 44em;
}
.lts-tick a { color: var(--brand); }
@media (max-width: 700px) {
  .lts-time::before, .lts-tick::before, .lts-tick::after { display: none; }
  .lts-tick, .lts-tick.tick-fig { grid-template-columns: 1fr; }
  .lts-side { position: static; text-align: left; padding-right: 0; margin-bottom: 10px; }
  .lts-side .lts-date { text-align: left; display: inline-block; font-size: 19px; }
  .lts-first { display: inline-block; margin: 0 0 0 12px; }
  .lts-tick > div:not(.lts-side):not(.figbox) { padding: 22px; }
  /* the photo column drops under the text and keeps continuing the card:
     the border it lost on the left comes back, the one it shares with the
     cell above goes */
  .lts-tick.tick-fig > div:not(.lts-side):not(.figbox) {
    border-right: 1px solid var(--border);
    border-bottom: none;
  }
  .lts-tick .figbox {
    border-left: 1px solid var(--border);
    padding: 0 22px 22px;
  }
  .lts-tick .figbox img, .lts-tick .figbox figcaption { max-width: 280px; }
  .lts-tick:hover > div:not(.lts-side):not(.figbox),
  .lts-tick:hover .figbox { transform: none; }
}

/* The Gemini mission ladder keeps its own design, the countdown, but takes the
   same responses: hovering a row flicks its clock readout and pings its node,
   so the two treatments feel like one family. */
@media (prefers-reduced-motion: no-preference) {
  .ladder .evt:hover .t { animation: first-flash 1.6s ease-in-out infinite; }
  .ladder .evt:hover .node { box-shadow: 0 0 12px 3px rgba(77,166,255,.55); }
}

/* ---------------------------------------------------------------- incident beats */
/* The Gemini VIII sequence. Numbered steps against a spine, because the point
   of that section is that the order events happened in is what made the
   diagnosis hard. */
.lts-beat {
  margin: 28px 0 34px;
  padding-left: 26px;
  border-left: 2px solid var(--rule-2);
}
.lts-step { position: relative; padding: 0 0 26px; }
.lts-step:last-child { padding-bottom: 0; }
.lts-step::before {
  content: "";
  position: absolute;
  left: -33px;
  top: 5px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--brand);
  background: var(--bg);
  border-radius: 50%;
}
.lts-clock {
  margin: 0 0 6px;
  font: 700 11.5px/1 "Courier New", Courier, monospace;
  letter-spacing: 0.16em;
  color: var(--brand);
}
.lts-step h3 { margin: 0 0 8px; font-size: 16.5px; color: var(--ink); }
.lts-step p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--ink-body);
  max-width: 38em;
}

/* ---------------------------------------------------------------- two columns */
.lts-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 24px;
}
.lts-two > div {
  padding: 26px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 2px solid var(--rule);
}
.lts-two h3 { margin: 0 0 14px; font-size: 16px; color: var(--ink); }
.lts-two ul { margin: 0; padding-left: 18px; }
.lts-two li {
  margin-bottom: 11px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-body);
}
.lts-two li:last-child { margin-bottom: 0; }
.lts-two a { color: var(--brand); }

/* ---------------------------------------------------------------- figures */
/* Figures are held to the reading measure, not to the section width.

   They were running the full 1100px of the section while the prose beside them
   sat at 34em, which made every photograph look enormous and broke the rhythm
   of the page. 34em matches the text they sit among, so a figure reads as part
   of the article rather than as an interruption.

   The Gemini photographs are mostly square, because they were shot on 70mm
   Hasselblad, and a square image at full section width is very large indeed.
   That is what went wrong. */
.lts-fig {
  /* Centred rather than ranged left. The prose sits at 34em against the left
     edge of the column, and a figure of the same width sitting under it read
     as though it had been left behind. Centring separates the figure from the
     text it interrupts. */
  margin: 34px auto;
  max-width: 34em;
}
.lts-fig img {
  display: block;
  width: 100%;
  height: auto;
  /* Square frames are capped by height as well, or they still dominate the
     column even at the reading measure. */
  max-height: 460px;
  object-fit: contain;
  border: 1px solid var(--border);
}

/* The one deliberately wide figure, at the head of an article. Allowed past the
   measure because a landscape photograph held to 34em looks like a thumbnail,
   but capped so it cannot fill the viewport. */
.lts-fig-wide { max-width: 46em; margin-left: auto; margin-right: auto; }
.lts-fig-wide img { max-height: 380px; object-fit: cover; object-position: center; }

.lts-fig figcaption {
  text-align: center;
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.lts-fig figcaption b { color: var(--ink-body); font-weight: 600; }

/* ---------------------------------------------------------------- sources */
.lts-src p { margin: 0 0 10px; font-size: 14px; }
.lts-src a { color: var(--brand); word-break: break-word; }

/* ---------------------------------------------------------------- foot nav */
/* Reaching the end of an article puts the whole list one click away, which is
   what was asked for: scroll to the bottom of topic nine and the nine are
   right there. */
.lts-end { border-top: 1px solid var(--border); padding-top: 30px; }
.lts-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 26px;
  padding: 11px 18px;
  background: var(--brand);
  color: var(--on-brand);
  text-decoration: none;
  font: 700 11.5px/1 "Courier New", Courier, monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.lts-back:hover, .lts-back:focus-visible { filter: brightness(1.12); }

.lts-pn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.lts-pn a {
  display: block;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.4;
  transition: border-color 0.2s linear;
}
.lts-pn a:hover, .lts-pn a:focus-visible { border-color: var(--brand); }
.lts-pn span {
  display: block;
  margin-bottom: 7px;
  font: 700 10.5px/1 "Courier New", Courier, monospace;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.pn-next { text-align: right; }

@media (max-width: 760px) {
  .lts-two, .lts-pn { grid-template-columns: 1fr; }
  .lts-beat { padding-left: 20px; }
  .lts-step::before { left: -27px; }
  .pn-next { text-align: left; }
}

/* ---------------------------------------------------------------- zoom */

  /* Figure zoom. The image scales up centred over a dimmed page, feed-style:
     bigger, not full screen. Cursor advertises it. */
  .lts-fig img { cursor: zoom-in; }
  .zoombox { position:fixed; inset:0; z-index:80; display:none;
    align-items:center; justify-content:center; padding:4vmin;
    background:rgba(0,0,0,.82); cursor: zoom-out; }
  .zoombox.on { display:flex; }
  .zoombox img { max-width:88vw; max-height:84vh; width:auto; height:auto;
    border:1px solid var(--rule, #243040); box-shadow:0 24px 80px rgba(0,0,0,.8);
    background:#000; }
  .zoombox figcaption { position:absolute; left:50%; bottom:3vmin;
    transform:translateX(-50%); max-width:70ch; padding:8px 16px;
    background:rgba(0,0,0,.72); font-size:13px; line-height:1.5;
    color:#c3cbd4; text-align:center; }

/* ---------------------------------------------------------------- outcomes */
/* Lamps, tally and legend, shared by every article that stamps outcomes.
   These lived in per-page style blocks first, which is why a page gaining
   lamps later rendered them as bare text fused to its headings. */
.mn { display:inline-block; padding:2px 8px; border-radius:2px;
  font:700 10px/1.7 "Courier New",Courier,monospace; letter-spacing:.14em;
  text-transform:uppercase; vertical-align:2px; margin-left:8px;
  white-space:nowrap; }
.mn-ok   { background:#0d3b23; color:#3ddc84; box-shadow:inset 0 0 0 1px #1c6b41; }
.mn-part { background:#3d2f0c; color:#f0b545; box-shadow:inset 0 0 0 1px #6d5518; }
.mn-fail { background:#3d1214; color:#ff6b6b; box-shadow:inset 0 0 0 1px #6d2226; }
.tally { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));
  gap:1px; background:var(--border); border:1px solid var(--border); margin:26px 0; }
.tally > div { padding:20px 18px; background:var(--bg); text-align:center; }
.tally b { display:block; font:700 30px/1 "Courier New",Courier,monospace;
  margin-bottom:7px; }
.tally span { font-size:12px; color:var(--ink-soft); }
.tally .g b { color:#3ddc84; }
.tally .a b { color:#f0b545; }
.tally .r b { color:#ff6b6b; }
.tally .n b { color:var(--brand); }
.legend { margin-top:44px; padding-top:22px; border-top:1px solid var(--rule); }
.legend h2 { margin:0 0 16px; font-size:15px; color:var(--ink); }
.legend dl { margin:0; }
.legend dt { margin:0 0 5px; }
.legend dd { margin:0 0 16px; font-size:13.5px; line-height:1.6;
  color:var(--ink-soft); max-width:60em; }
.legend dd:last-child { margin-bottom:0; }
.legend .rule { margin:18px 0 0; font-size:13px; color:var(--ink-soft);
  max-width:60em; }
.legend .rule b { color:var(--ink-body); }