/* Solar system. One sticky stage over a long track: the canvas does the travelling, the words stand low in the frame.
   In space there is no ground, so a floor of the ground colour rises under the words instead. */
.ss-track { position: relative; height: calc((var(--n, 13) * 125 + 100) * 1svh); }
.ss-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }

.ss-floor { position: absolute; inset: auto 0 0 0; height: 62svh; pointer-events: none;
  background: linear-gradient(to top, rgb(4 6 9 / 82%), rgb(4 6 9 / 46%) 48%, transparent);
  opacity: 0; transition: opacity var(--sheet) var(--shutter); }
html[data-mode='red'] .ss-floor { background: linear-gradient(to top, rgb(7 0 0 / 86%), rgb(7 0 0 / 50%) 48%, transparent); }
.in-space .ss-floor { opacity: 1; }

.ss-open, .ss-ch { position: absolute; left: var(--edge); right: var(--edge); bottom: calc(var(--tabs-h) + clamp(28px, 8svh, 84px)); transform-origin: left bottom; }
.ss-open .page-title { max-width: 14ch; }
.ss-open .page-lead { margin-top: var(--sp-4); }
.ss-sunline { margin-top: var(--sp-3); font-size: var(--fs-lead); line-height: 1.32; color: var(--ink); max-width: 40ch; }

.ss-chapters { margin: 0; }
.ss-ch { opacity: 0; visibility: hidden; max-width: 46rem; }
.ss-name { font-size: var(--fs-1); font-weight: 450; font-stretch: var(--wide); line-height: var(--lh-tight); letter-spacing: -.016em; width: fit-content; }
.ss-today { margin-top: var(--sp-4); font-size: var(--fs-lead); line-height: 1.3; max-width: 34ch; }
.ss-more { margin-top: var(--sp-3); color: var(--ink-soft); max-width: 44ch; }
.ss-figure { display: none; }

.ss-labels { position: absolute; inset: 0; pointer-events: none; }
.ss-label { position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap; font-size: 16px; line-height: 1; color: var(--ink-soft);
  padding: 0 0 0 14px; margin-top: -8px; will-change: transform, opacity; }
.ss-date { color: var(--ink); font-stretch: 112%; }

.ss-veil { position: absolute; inset: 0; background: var(--ground); opacity: 0; pointer-events: none; }

/* the hand-over: back on the ground, rows that open the sky map */
.ss-home { position: relative; background: var(--ground); padding: var(--sp-10) var(--edge) var(--sp-9); }
.ss-home-lead { margin-top: var(--sp-4); font-size: var(--fs-lead); line-height: 1.32; color: var(--ink-soft); max-width: 40ch; }
.ss-rows { margin-top: var(--sp-7); }
.ss-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--sp-5); align-items: baseline; padding: var(--sp-4) 0; text-decoration: none; }
.ss-row b { font-size: var(--fs-2); font-weight: 440; font-stretch: var(--wide); line-height: 1.08; letter-spacing: -.012em; color: var(--ink-soft);
  transform-origin: left; transition: transform var(--sheet) var(--shutter), color var(--touch) var(--shutter); width: fit-content; }
.ss-row span { color: var(--ink-soft); max-width: 40ch; }
.ss-row:hover b, .ss-row:focus-visible b { color: var(--ink); transform: scaleX(1.035); }
.ss-row:active b { transform: scaleX(.985); transition-timing-function: var(--hand); }

@media (max-width: 820px) {
  .ss-row { grid-template-columns: 1fr; gap: var(--sp-1); padding: var(--sp-3) 0; min-height: 48px; }
  .ss-name { font-size: clamp(40px, 12vw, 64px); }
  .ss-today { font-size: 20px; }
  .ss-floor { height: 70svh; }
}

/* no travel, or no WebGL: the same words, in reading order, over one still sky */
.is-still .ss-track { height: auto; }
.is-still .ss-stage { position: static; height: auto; overflow: visible; }
.is-still .ss-floor, .is-still .ss-labels, .is-still .ss-veil { display: none; }
.is-still .ss-open { position: static; padding: calc(var(--bar-h) + 30svh) var(--edge) var(--sp-8); }
.is-still .ss-chapters { background: var(--ground); padding: var(--sp-6) var(--edge) var(--sp-4); }
.is-still .ss-ch { position: static; opacity: 1; visibility: visible; margin-bottom: var(--sp-9); }
.is-still .ss-name { font-size: var(--fs-2); }
.is-still .ss-figure { display: block; margin-top: var(--sp-7); max-width: 640px; }
.ss-plan { width: 100%; height: auto; color: var(--ink); overflow: visible; }
.ss-plan text { fill: currentColor; font-size: 6.4px; font-family: var(--face); }
.ss-figure figcaption { margin-top: var(--sp-4); color: var(--ink-soft); max-width: 44ch; }
@media (max-width: 600px) { .ss-plan text { font-size: 9px; } }