/* From space (development plan 3.S17; scripts/from-space.mjs): the home page band, a black sheet like "How a number
   gets here", and the /from-space page (a light page with black sheet panels, the site's style). Phone first. */

/* ── The home page band ─────────────────────────────────────────────────────────────────────────────────────── */
main > section.fromspace { max-width: none; margin: var(--space) 0 0; padding: 0; background: var(--core); color: var(--on-core); }
main > section.fromspace::before { display: none; }
.fromspace { position: relative; isolation: isolate; overflow: hidden; }
.fromspace::after { content: ''; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(color-mix(in srgb, var(--on-core) 6%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--on-core) 6%, transparent) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(180deg, #000, transparent 60%); }
.fs-in { max-width: var(--max); margin: 0 auto; padding: clamp(64px, 10vh, 120px) var(--gutter) 0; display: grid; gap: clamp(28px, 4vw, 56px); }
@media (min-width: 900px) { .fs-in { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; } }
.fs-head .kicker { color: color-mix(in srgb, var(--accent) 70%, var(--on-core)); }
.fs-head h2 { color: var(--on-core); }
.fs-head p:not(.kicker) { margin: 16px 0 0; font-size: 1.02rem; color: var(--on-core-2); }
.fs-head .fs-cta { margin-top: 22px; }
.fs-head .link-arrow { color: var(--on-core); }
.fs-pair { margin: 0; min-width: 0; }
.fs-pics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fs-pics > div { position: relative; margin: 0; }
.fs-pics img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border: 1px solid color-mix(in srgb, var(--on-core) 18%, transparent); border-radius: var(--r-sm); background: color-mix(in srgb, var(--on-core) 6%, transparent); }
.fs-pics span { display: block; margin-top: 6px; font: 400 .75rem/1.3 var(--mono); color: var(--on-core-2); }
.fs-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 0; }
.fs-figs > div { padding: 12px 14px; border-top: 3px solid var(--accent); background: var(--surface); color: var(--ink); border-radius: 0 0 var(--r-sm) var(--r-sm); }
.fs-figs dt { font-size: .76rem; color: var(--ink-3); }
.fs-figs dd { margin: 4px 0 0; font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; }
.fs-figs dd small { display: block; font-size: .8rem; font-weight: 400; letter-spacing: 0; color: var(--ink-3); }
.fs-pair figcaption { margin-top: 12px; font-size: .8rem; color: var(--on-core-2); }
.fs-pair figcaption a { color: var(--on-core); }
.fs-chips { max-width: var(--max); margin: 0 auto; padding: clamp(28px, 4vh, 44px) var(--gutter) clamp(64px, 10vh, 112px); list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 700px) { .fs-chips { display: flex; flex-wrap: wrap; } }
.fs-chips li { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border: 1px dashed color-mix(in srgb, var(--on-core) 30%, transparent); border-radius: var(--r-sm); font-size: .86rem; color: var(--on-core-2); }
.fs-chips li.on { border-style: solid; border-color: var(--accent); color: var(--on-core); }
.fs-chips li a { color: inherit; }
.fs-chips span { font: 400 .75rem var(--mono); text-transform: uppercase; letter-spacing: .03em; color: var(--on-core-2); }
.fs-chips li.on span { color: color-mix(in srgb, var(--accent) 70%, var(--on-core)); }

/* ── The /from-space page ───────────────────────────────────────────────────────────────────────────────────── */
.fs-page .fs-lede { font-size: 1.12rem; }
.fs-steps { display: grid; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; counter-reset: fs; }
@media (min-width: 700px) { .fs-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fs-steps li { counter-increment: fs; padding: 18px; background: var(--core); color: var(--on-core-2); border-radius: var(--r-sm); font-size: .92rem; }
.fs-steps li::before { content: '0' counter(fs); display: block; margin-bottom: 8px; font: 500 .75rem var(--mono); color: color-mix(in srgb, var(--accent) 70%, var(--on-core)); }
.fs-steps b { display: block; margin-bottom: 4px; color: var(--on-core); font-size: 1rem; }
.fs-table { margin: 18px 0 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fs-table table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.fs-table th, .fs-table td { padding: 9px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.fs-table thead th { font: 500 .75rem var(--mono); text-transform: uppercase; letter-spacing: .03em; color: var(--ink-3); }
.fs-table tbody tr:not(.on) { color: var(--ink-3); }
.fs-table tbody tr.on th { color: var(--ink); }
.fs-table tbody td:last-child { min-width: 8.5em; }
.fs-table th[scope="row"] { min-width: 8em; }
.fs-sheet { margin: 28px 0 0; padding: 22px; background: var(--core); color: var(--on-core-2); border-radius: var(--r-sm); }
.fs-sheet h2 { margin-top: 0; color: var(--on-core); }
.fs-sheet a { color: var(--on-core); }
.fs-sheet ul { margin: 12px 0 0; padding-left: 1.1em; }
.fs-credits { font-size: .86rem; }
/* On a phone each layer is a short block of its own, labelled, rather than a squeezed table. */
@media (max-width: 699px) {
  .fs-table thead { display: none; }
  .fs-table table, .fs-table tbody, .fs-table tr, .fs-table th, .fs-table td { display: block; }
  .fs-table tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .fs-table th, .fs-table td { padding: 2px 0; border: 0; white-space: normal; }
  .fs-table th { font-size: .98rem; }
  .fs-table td::before { content: attr(data-l) ': '; color: var(--ink-3); }
  .fs-table tr:not(.on) td:nth-child(4), .fs-table tr:not(.on) td:nth-child(5) { display: none; }
}
.doc .fs-sheet p, .doc .fs-sheet li { color: var(--on-core-2); }
.doc .fs-sheet h2, .doc .fs-sheet a { color: var(--on-core); }
/* On a wide screen the table steps out of the text column (centred on it), so no column is squeezed. */
@media (min-width: 1100px) {
  .fs-table { width: min(1040px, calc(100vw - 2 * var(--gutter, 24px))); margin-left: calc(50% - min(520px, 50vw - var(--gutter, 24px))); }
}