too, and this rule's 15px/--mut
was overriding the component's own 11px mono gold and pushing it off the
heading with a 14px top margin. */
.sp-rail-head p:not(.sp-kicker):not(.sp-eyebrow){
margin-top:14px;max-width:560px;font-size:15px;line-height:1.65;color:var(--mut);
}
.sp-rail-head::before{
content:"";position:absolute;left:-64px;top:34px;width:39px;height:1px;background:var(--hair);
}
@media (max-width:760px){.sp-rail-head::before{left:-44px;width:26px;}}
/* node on the rail per program row */
.sp-prog{
position:relative;
/* 230px column = a ~307px-tall 3:4 tile. The old 300px was sized for a
landscape crop; at 3:4 it would stand 400px tall and tower over the copy
beside it. */
display:grid;grid-template-columns:230px 1fr;gap:40px;align-items:center;
padding:46px 0;border-bottom:1px solid var(--hair-soft);
}
.sp-prog:last-child{border-bottom:0;}
/* Centered on the row to match its now vertically-centered content. It was
pinned to a fixed top offset back when rows were top-aligned; that offset
would now drift on any row whose copy runs long. space.js measures the node
rects live for the rail line, so it follows this automatically. */
.sp-node{
position:absolute;z-index:1;left:-64px;top:50%;transform:translateY(-50%);
width:39px;height:39px;
display:flex;align-items:center;justify-content:center;
font-family:var(--mono);font-size:12px;color:var(--gold);
border:1px solid var(--hair);border-radius:50%;background:var(--bg);
}
.sp-node.diamond{border-radius:0;transform:translateY(-50%) rotate(45deg);
width:28px;height:28px;left:-58px;}
.sp-node.diamond i{transform:rotate(-45deg);font-style:normal;font-size:11px;}
@media (max-width:760px){
.sp-node{left:-44px;width:24px;height:24px;font-size:10px;}
.sp-node.diamond{width:18px;height:18px;left:-41px;}
}
/* 3:4 PORTRAIT thumbnail — matches the homepage program cards (.hm-prog).
aspect-ratio (not a fixed height) so the tile scales with the grid column.
The row's align-items:center keeps the grid from stretching this to the full
row height — a stretched item ignores the ratio, so that centering is
load-bearing, not just cosmetic. min-height is the no-support floor only. */
.sp-prog-img{
position:relative;overflow:hidden;border:1px solid var(--hair);
aspect-ratio:3/4;min-height:0;
}
.sp-prog-img img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
filter:grayscale(.2) brightness(.72) contrast(1.03);transition:filter .5s ease,transform .5s ease;
}
.sp-prog:hover .sp-prog-img img{filter:grayscale(0) brightness(.8);transform:scale(1.03);}
.sp-prog-body{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;}
/* align-items:baseline so the diamond sits on the label's baseline rather than
centering against the taller line box. */
.sp-prog-meta{
display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 22px;
font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;
}
.sp-prog-meta .dur{color:var(--gold);}
/* The objective is "Label · Detail" split into two spans, because CSS cannot
break a text node at a character or hide part of one.
DESKTOP: both halves sit on ONE line, joined by a "·" separator that is
generated here rather than living in the markup — the two spans are
adjacent in the HTML with no character between them, so the separator has
to be a pseudo-element that mobile can switch off.
display:inline (not flex): an inline box lets the line sit on the meta
row's baseline beside the ◆, so the diamond shares the label's line
instead of being pushed above a flex block. */
.sp-prog-meta .obj{
display:inline;
font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
/* The mono meta row sets uppercase + wide tracking for its 11px labels;
the objective opts out of both — it is Helvetica running text, not a
label, and tracked small caps on a sans reads as a different component.
Bold carries the line instead: it sits above the title and has to hold
its own against it without borrowing the mono labels' case or tracking. */
text-transform:none;
font-weight:700;
letter-spacing:normal;
font-size:13px;
}
.sp-prog-meta .obj-k{display:inline;}
.sp-prog-meta .obj-v{display:inline;margin-top:0;}
/* the separator between the two halves, desktop only. A colon binds tight to
the word before it and takes its space after — unlike the middot it
replaced, which floated between the two halves on equal margins. */
.sp-prog-meta .obj-k::after{content:':';margin:0 .4em 0 0;}
/* Gold stays the only accent — these are not tints, they are the one neutral
chalk at two alphas, so the line recedes without introducing a hue.
Measured against --bg #0a0a0a:
obj-v (detail) .72 7.52:1
obj-k (label) .55 4.76:1
Both clear AA 4.5:1 at 13px, but the label has only 0.26 of headroom — .52
is the floor, do not dim it further. The LABEL is the quieter half: "Objective" /
"Stage 1" is a category name that repeats down the column, so it drops back
and lets the detail beside it lead. */
.sp-prog-meta .obj{color:rgba(224,217,204,.72);}
.sp-prog-meta .obj-k{color:rgba(224,217,204,.55);}
.sp-prog-meta .obj-v{color:inherit;}
.sp-prog-body h3{
margin-top:12px;font-size:clamp(22px,2.5vw,32px);
line-height:1.1;letter-spacing:-.01em;
text-transform:none;font-weight:700;
color:var(--chalk);
}
.sp-prog-body .desc{margin-top:14px;max-width:520px;font-size:15px;line-height:1.65;
color:var(--chalk);}
/* duration + equipment specs — stacked mono rows with mini icons */
.sp-prog-specs{
margin-top:16px;display:flex;flex-direction:column;gap:8px;
font-family:var(--mono);font-size:11px;letter-spacing:1.5px;
text-transform:uppercase;color:var(--dim);
}
.sp-prog-specs .spec{display:flex;align-items:center;gap:9px;}
/* Spec icons are LineAwesome glyphs (clock) and the filters-page dumbbell —
solid fills on a 32x32 viewBox, so they inherit color via fill:currentColor
rather than stroke. Nudged down slightly to sit on the mono baseline. */
.sp-prog-specs .spec svg{flex:none;opacity:.85;fill:currentColor;vertical-align:-.12em;}
.sp-prog-specs .spec.dur{color:var(--gold);}
/* "Learn more" is the row's quietest control and sits under body copy, so it
uses the TERTIARY treatment rather than the bordered secondary: no border,
no fill, flush left with the text above it, gold on hover.
It keeps the .hm-btn__arw — dropping the border is what makes the arrow the
link's only affordance, so the tertiary tier needs it MORE than the bordered
tiers do. The shared .sp-ghost:hover .hm-btn__arw rule above still matches,
so the 3px hover slide carries over unchanged. */
.sp-prog-body .sp-ghost{
margin-top:16px;
background:transparent;color:var(--chalk);
border-top-color:transparent;border-left-color:transparent;border-right-color:transparent;
padding-left:0;padding-right:0;
}
/* border-color is deliberately NOT reset here: the underline below is a
border-bottom, and a blanket `border-color:transparent` on :hover would
erase it exactly when the cursor is on the link. Only the three sides that
never carry a visible edge are held transparent. */
.sp-prog-body .sp-ghost:hover{
background:transparent;color:var(--gold);
border-top-color:transparent;border-left-color:transparent;border-right-color:transparent;
}
/* The row "Learn more" is the tertiary tier (DESIGN-SYSTEM.md § Where buttons
appear), so it gets the same underline the standalone tertiary uses on the
space-program page (.hm-btn--alone): a real border-bottom that is TRANSPARENT
at rest rather than an absolutely-positioned pseudo-element.
Why the change: the ::before version was pinned at bottom:-8px, which put the
line 8px below the label's own box — far enough that it read as a rule under
the row rather than an underline on the link. A border sits on the element's
bottom edge by definition, so it lands where an underline belongs and needs
no offset to maintain.
Transparent rather than absent, because a border appearing from nothing would
shift the label up by its own width on hover. Reserving the 1.5px and
animating only its colour keeps the text still — the same reasoning as the
space-program rule this is ported from.
The ghost MUST stay position:static. The border-bottom needs no containing
block of its own, and leaving the relative positioning here (a leftover from
the ::before version, which did need it) silently breaks the row: the
::after row-click overlay below resolves inset:0 against the nearest
positioned ancestor, so a relative ghost shrinks the overlay from the whole
row down to the 94x44 label — the row stops being clickable anywhere except
the image. */
.sp-prog-body .sp-ghost{
border-bottom:1.5px solid transparent;
transition:background .2s,color .2s,border-color .2s;
}
/* Hovering anywhere on the row draws it, because the whole row is the control. */
.sp-prog:hover .sp-prog-body .sp-ghost{border-bottom-color:currentColor;}
/* Make the WHOLE program row clickable: the "Learn more" link stretches an
invisible overlay across the entire .sp-prog. The ::after is absolutely
positioned, so its containing block is the nearest positioned ancestor —
.sp-prog (position:relative) — NOT the ghost link, so it must stay static.
The node sits above the overlay so it never blocks it visually. */
.sp-prog{cursor:pointer;}
.sp-prog-body .sp-ghost::after{
content:"";position:absolute;inset:0;z-index:2;
}
.sp-prog .sp-node{z-index:3;}
/* DEBUG (localhost only): the overlay above covers the whole row, so DevTools
element-picking always lands on it instead of the thing under the cursor.
The preview pages set data-sp-debug on when the host is local, which
drops the overlay so inner elements can be inspected and links clicked
individually. Never set on the live site — the flag is only written by the
localhost-guarded snippet in the preview files, and the paste-in blocks do
not carry it. */
html[data-sp-debug] .sp-prog-body .sp-ghost::after{content:none;}
html[data-sp-debug] .sp-prog{cursor:default;}
/* future missions — dashed placeholder (architected, not built) */
.sp-prog.soon{opacity:.85;}
.sp-prog.soon .sp-prog-img{border-style:dashed;border-color:rgba(224,217,204,.25);
display:flex;align-items:center;justify-content:center;aspect-ratio:3/4;}
.sp-prog.soon .sp-prog-img span{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--dim);}
.sp-prog.soon h3{color:var(--dim);}
.sp-node.soon{border-style:dashed;color:var(--dim);}
/* TABLET (861px unchanged above; 641–860px here) — stay HORIZONTAL.
The row previously collapsed to one column at 860px, which stacked the
image above the copy on every tablet. It keeps the image+text side-by-side
and just narrows the image column instead. */
@media (max-width:860px){
.sp-prog{grid-template-columns:160px 1fr;gap:22px;}
.sp-prog-img{height:auto;}
}
/* MOBILE (≤640px) — TWO COLUMNS. A narrow portrait thumbnail beside the copy,
which keeps the 3:4 image legible without it eating a whole phone screen as
a stacked full-width block would. */
@media (max-width:640px){
/* Rows are TOP-aligned here, not centered: with a small thumbnail beside
tall copy, centering floats the image against the middle of the text and
leaves it unanchored. align-self:start on the image holds the 3:4 ratio
that the row's centering was previously protecting. */
/* Image sits in the RIGHT column: copy leads, thumbnail trails. Done by
column placement, NOT by reordering the markup — DOM order stays
image-then-copy so reading order and tab order are unchanged. */
.sp-prog{grid-template-columns:1fr 120px;gap:0 12px;padding:22px 0;align-items:start;}
.sp-prog-img{height:auto;align-self:start;}
/* the copy column is narrow now, so the long-form specs and description
would wrap to shreds — tighten them rather than letting them stack. */
.sp-prog-body .desc{font-size:14px;line-height:1.55;}
.sp-prog-specs{gap:5px;font-size:10px;letter-spacing:1px;margin-top:10px;}
.sp-prog-body h3{font-size:19px;}
.sp-prog-body .sp-ghost{margin-top:10px;}
/* MOBILE LAYOUT
block 1: image (col 1) beside subtitle + title (col 2)
block 2: description, specs and link, full width beneath
.sp-prog-body is display:contents so its children become grid items of
.sp-prog directly — that lets the meta and title sit beside the image
while their siblings drop below, without restructuring the markup. */
.sp-prog-body{display:contents;}
/* Subtitle and title stack at the top of column 1. The image now spans the
whole row rather than just these two, so there is no surplus height to
distribute between them — they simply sit at the start of their rows and
the margins set the rhythm (the row-gap is 0; see .sp-prog above). */
.sp-prog-meta{grid-column:1;align-self:start;margin-bottom:8px;}
.sp-prog-body h3{grid-column:1;align-self:start;margin-top:0;line-height:1.15;}
/* Image pinned to column 2 and spanning both rows of the top block, so it
stands beside the subtitle+title pair rather than only the subtitle.
The row is left to auto-placement: on a Start Sequence row the full-width
.sp-node takes row 1, so the image correctly starts at row 2. */
/* Spans EVERY row of the copy column, so the row is a single 1fr text
column with the thumbnail alongside the whole of it — not just the top
block. NOT grid-row:1/-1: -1 counts to the end of the EXPLICIT grid, and
these rows are implicit, so it would collapse to row 1. A span larger
than any row's row-count covers them all. It stays align-self:start with
its 3:4 aspect-ratio intact — stretching it would let the row's height
win over the ratio and distort the crop. */
.sp-prog-img{grid-column:2;grid-row:1 / span 99;align-self:start;}
/* All copy stays in column 1 — the image no longer interrupts it. */
.sp-prog-body .desc,
.sp-prog-body .sp-prog-specs,
.sp-prog-body .sp-ghost{grid-column:1;}
.sp-prog-body .desc{margin-top:8px;}
/* display:contents drops the body's flex context, which was what kept the
ghost link shrink-wrapped (align-items:flex-start). As a grid item it
would stretch the full column, so it re-shrinks itself. */
.sp-prog-body .sp-ghost{justify-self:start;}
/* Stays a ROW, not a column: flex-direction:column here would stack the ◆
above the objective, but the diamond must share the label's line. The
◆ + label sit on one baseline and obj-v breaks beneath them (base rule). */
.sp-prog-meta{
flex-direction:row;align-items:baseline;gap:0;
font-size:10px;letter-spacing:1.2px;
}
/* MOBILE: the label half ("Objective" / "Stage 1") is dropped — it is a
category name repeating down every row, and the detail beside it already
says what the row is. Hiding the SPAN rather than the text via a
pseudo-element keeps it out of the accessibility tree too, which is right:
it is redundant here, not decorative. Its separator goes with it, and the
detail no longer needs the break that divided the two. */
.sp-prog-meta .obj-k{display:none;}
.sp-prog-meta .obj-v{display:inline;margin-top:0;}
/* The parent meta row drops to 10px/1.2px tracking for its mono labels, but
the objective is Helvetica bold and inherits neither — it keeps its own
size and normal tracking, just a step down from desktop.
8px under it: with the label gone this is a single bold line butted
against the title beneath it, and the two need separating. */
.sp-prog-meta .obj{font-size:12px;letter-spacing:normal;}
}
/* ==================================================================
PROGRAMS PAGE · VARIANT B (programs-b.html) — full-width hero with
the full-size h1, then each group as a split section: subheading in
the left third (sticky), program cards in the right two-thirds.
Only the Start Sequence keeps the rail (it IS sequential); Missions
are unconnected rows. The future-missions row carries a newsletter
signup.
================================================================== */
.sp-v2 .sp-split{
display:grid;grid-template-columns:1fr 2fr;gap:72px;align-items:start;
}
.sp-v2 .sp-side{position:sticky;top:48px;}
.sp-v2 .sp-side h2{
font-size:clamp(30px,3vw,44px);line-height:1.05;letter-spacing:-.015em;
text-transform:none;font-weight:700;margin-top:12px;
}
.sp-v2 .sp-side p{margin-top:14px;font-size:15px;line-height:1.65;color:var(--mut);}
.sp-v2 .sp-cards{min-width:0;}
.sp-v2 .sp-cards .sp-rail{margin-top:0;}
.sp-v2 .sp-cards .sp-prog:first-child{padding-top:8px;}
.sp-v2 .sp-cards .sp-rail::before{top:0;
background:linear-gradient(180deg,var(--gold) 0,var(--hair) 90px,var(--hair) calc(100% - 60px),transparent 100%);}
/* plain (rail-less) mission list */
.sp-plain{margin-top:8px;}
.sp-plain .sp-rail-head::before{display:none;}
.sp-v2 .sp-plain .sp-prog{grid-template-columns:210px 1fr;}
/* The ◆ marker is hidden: the objective carries its own tier by colour now, so
the glyph in front of it was redundant decoration. Left in the markup rather
than stripped from 7 files, so it can be switched back on in one line. */
.sp-prog-meta .mark{display:none;}
/* group subheading pulled OUT of the rail — full width, no rail tick */
.sp-rail-head.sp-head--out{padding:0;}
.sp-rail-head.sp-head--out::before{display:none;}
.sp-rail-head.sp-head--out + .sp-rail{margin-top:40px;}
.sp-plain + .sp-rail-head.sp-head--out,
.sp-rail + .sp-rail-head.sp-head--out{margin-top:88px;}
.sp-rail-head.sp-head--out + .sp-plain{margin-top:16px;}
/* newsletter signup (future-missions row) */
.sp-news{display:flex;margin-top:20px;max-width:430px;}
.sp-news input{
flex:1;min-width:0;background:transparent;
border:1.5px solid rgba(224,217,204,.35);border-right:0;
color:var(--chalk);font-family:var(--mono);font-size:12px;padding:13px 14px;outline:none;
}
.sp-news input::placeholder{color:var(--dim);}
.sp-news button{
background:transparent;border:1.5px solid var(--chalk);color:var(--chalk);
font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;
font-weight:600;padding:13px 18px;cursor:pointer;transition:all .2s;white-space:nowrap;
}
.sp-news button:hover{background:var(--chalk);color:#0a0a0a;}
@media (max-width:1000px) and (min-width:641px){
.sp-v2 .sp-split{grid-template-columns:1fr;gap:36px;}
.sp-v2 .sp-side{position:static;}
/* NOT single-column: rows stay horizontal (image + text) here, matching
variant A. This previously collapsed to 1fr, which stacked the image above
the copy on every tablet and phone. The image column just narrows.
Scoped to >640px: below that the shared mobile rule owns the 1fr 2fr
split, and this selector (0,2,0) would otherwise outrank it. */
.sp-plain .sp-prog{grid-template-columns:160px 1fr;}
}
/* Variant B's own tablet/mobile ladder, mirroring variant A's. .sp-v2 rules
are declared at top level, so they out-order the shared breakpoints and have
to be restated here rather than inherited. */
@media (max-width:860px) and (min-width:641px){
.sp-v2 .sp-plain .sp-prog,
.sp-v2 .sp-cards .sp-prog{grid-template-columns:160px 1fr;gap:22px;}
}
@media (max-width:640px){
/* the split's 1000px collapse is bounded at 641px now, so mobile restates it */
.sp-v2 .sp-split{grid-template-columns:1fr;gap:32px;}
.sp-v2 .sp-side{position:static;}
.sp-v2 .sp-plain .sp-prog,
.sp-v2 .sp-cards .sp-prog{grid-template-columns:1fr 120px;gap:0 12px;align-items:start;}
}
/* ── LAST CALL — closing section with movement-archive GIF field ──────────
Markup: