/* ==========================================================================
   MARS!platz — the new layout, in the aura dress.

   Loaded after station.css and aura.css on every public page (layout.js puts
   it last). aura.css draws the look — the drafting paper, cobalt ink, frosted
   glass floating on soft shadows, round pills, the orange keys and the
   habitat's colour — and this sheet lays the pages out as the design handoff
   has them: the header in two rows (the name, the sol, the habitat's clock,
   the switches and the menu; the running line under them), and the landing
   page as four pages (src/views/pages/landing.js) — the way to the habitat
   (the Earth, the line, the habitat far above, the sky around it), the note
   with its doors and its Know more key, the habitat, the world's slowest
   chat — each drawn in that same dress: the note as a glass card lifted off
   the paper, the steps of a message's crossing on a dashed thread, each sign
   in its own colour. It also draws the foot, one for the
   light and one for the dark. Nothing a visitor reads is drawn smaller than
   the type floor aura.css sets (--fs-tag). It changes how the pages look,
   never what they do: every id and every hook of the scripts stays as it was.
   ========================================================================== */

@keyframes step-hop { from { left: 0; } to { left: calc(100% - 7px); } }

/* ------------------------------------------------------------ the header: two rows */
/* A glass band across the top of the window that stays there while the page scrolls under it: the first row carries the
   name (the way home), the sol, in the middle the three ways on — Write to the crew, Live Mission Dashboard, About —
   and the switches at its end (no clock); under a hairline, the running line, fading out at both edges. The three links
   are a wider screen's: a phone held upright has its bar of keys at the foot instead. */
body.landing .ticker {
  position: sticky; top: 0; z-index: 40; display: block; height: auto; min-height: 0; padding: 0; gap: 0;
}
/* the row, larger (October: "more prominent and bigger, colour-coded to catch the eye"): the name 26 px, the sol a
   solid Mars pill, the three keys 48 px tall in 16 px type, each in a colour of its own — Write to the crew in Mars,
   the dashboard in cobalt, About in ink — and the page's own key ringed */
body.landing .tk-bar { display: flex; align-items: center; gap: 12px; height: 76px; padding: 0 var(--tk-inset); box-sizing: border-box; }
body.landing .tk-brand { display: inline-block; flex: none; font-family: var(--display); font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: -.035em;
  text-transform: none; color: var(--ink); text-decoration: none; border: 0; white-space: nowrap; }
body.landing .tk-brand .bang { color: var(--mars); }
body.landing .tk-sol { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 36px; padding: 0 14px; box-sizing: border-box; border-radius: 999px;
  border: 1px solid var(--mars); background: var(--mars); color: #fff;
  font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 6px 16px -8px rgba(255,90,31,.9); }
body.landing .tk-sol i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 2px rgba(255,255,255,.8); animation: live 2.4s ease-in-out infinite; }
body.landing .tk-nav { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; align-items: center; gap: 10px; padding: 0 10px; }
body.landing .tk-nav a, :root[data-theme="dark"] body.landing .tk-nav a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px 0 18px; border-radius: 14px; border: 1px solid transparent; background: #0f1116;
  color: #fff; font-family: var(--display); font-size: 16px; font-weight: 700; letter-spacing: -.005em; text-transform: none; text-decoration: none; white-space: nowrap; box-shadow: 0 2px 4px rgba(15,21,64,.18), 0 10px 22px -12px rgba(15,21,64,.5); transition: filter .15s ease, transform .15s ease, box-shadow .15s ease; }
body.landing .tk-nav a .tk-ic { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.landing .tk-nav a.tk-board, :root[data-theme="dark"] body.landing .tk-nav a.tk-board { background: linear-gradient(180deg, #ff8a3d, #ff5a1f); color: #1a0a02; box-shadow: 0 2px 4px rgba(255,70,0,.2), 0 12px 24px -12px rgba(255,70,0,.85), 0 1px 0 rgba(255,255,255,.5) inset; }
body.landing .tk-nav a.tk-dash, :root[data-theme="dark"] body.landing .tk-nav a.tk-dash { background: linear-gradient(180deg, #4f63ff, #2f45e8); color: #fff; box-shadow: 0 2px 4px rgba(47,69,232,.2), 0 12px 24px -12px rgba(47,69,232,.85), 0 1px 0 rgba(255,255,255,.25) inset; }
body.landing .tk-nav a.tk-about, :root[data-theme="dark"] body.landing .tk-nav a.tk-about { background: linear-gradient(180deg, #2a2c36, #0f1116); color: #fff; box-shadow: 0 2px 4px rgba(15,21,64,.2), 0 12px 24px -12px rgba(15,21,64,.8), 0 1px 0 rgba(255,255,255,.12) inset; }
:root[data-theme="dark"] body.landing .tk-nav a.tk-about { background: linear-gradient(180deg, #3a3c48, #1c1d24); border-color: #4a4b56; }
body.landing .tk-nav a:hover, :root[data-theme="dark"] body.landing .tk-nav a:hover { transform: translateY(-1px); filter: brightness(1.08); }
body.landing .tk-nav a[aria-current="page"], :root[data-theme="dark"] body.landing .tk-nav a[aria-current="page"] { outline: 3px solid var(--paper); outline-offset: -5px; }   /* the page's own key: a ring of the page's ground inside its edge */

body.landing .tk-right { flex: none; margin-left: auto; padding: 0; }   /* at the row's end, whatever stands before it */
/* the running line: the width of the window, its words starting where the page's content does */
body.landing .tk-window {
  display: flex; align-items: center; height: 36px; margin: 0; padding: 0 var(--tk-inset); box-sizing: border-box; overflow: hidden;
  border-top: 1px solid var(--glass-edge);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--tk-inset), #000 calc(100% - var(--tk-inset)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--tk-inset), #000 calc(100% - var(--tk-inset)), transparent 100%);
}
body.landing .tk-cell { font-size: 12px; }
@media (min-width: 761px) and (min-height: 521px) {
  html { scroll-padding-top: 124px; }                                                  /* what a link brings into view lands under the header (76 + 36 + 1 px, and a little air) */
}

/* a narrower desk: the row makes room for the three links — the pills tighter, the theme key its mark alone (as a phone
   has it), and under 880 px the sol badge goes */
@media (min-width: 761px) and (max-width: 1180px) {
  body.landing .tk-nav { gap: 8px; padding: 0 6px; }
  body.landing .tk-nav a { min-height: 42px; padding: 0 14px 0 12px; gap: 8px; font-size: 14px; }
  body.landing .tk-brand { font-size: 22px; }
}
@media (min-width: 761px) and (max-width: 1000px) {
  body.landing .status .theme button { min-width: 34px; padding: 0 8px; font-size: 0; gap: 0; justify-content: center; }
  body.landing .status .theme .theme-mark { font-size: 12px; }
}
@media (min-width: 761px) and (max-width: 880px) { body.landing .tk-sol { display: none; } body.landing .tk-nav a { padding: 0 10px 0 9px; font-size: 13px; } }
/* a phone held upright: the bar's row and the running line under it, 83 px in all (the index of folders and the board's
   chips stick under it at that height, aura.css); no links in the bar — the bar of keys at the foot is the way on */
@media (max-width: 760px) and (min-height: 521px) {
  body.landing .ticker { padding: 0; }
  body.landing .tk-nav { display: none; }
  body.landing .tk-bar { height: 52px; gap: 8px; padding: 0 16px; }
  body.landing .tk-brand { font-size: 17px; line-height: 52px; }
  body.landing .tk-sol { min-height: 28px; padding: 0 10px; font-size: 11.5px; letter-spacing: .1em; }
  body.landing .tk-window { height: 30px; margin: 0; padding: 0 16px; }
  body.landing .tk-window::before { background: linear-gradient(90deg, var(--paper-2), rgba(247,248,252,0)); }
  body.landing .tk-window::after { background: linear-gradient(270deg, var(--paper-2), rgba(247,248,252,0)); }
  :root[data-theme="dark"] body.landing .tk-window::before { background: linear-gradient(90deg, var(--paper-2), rgba(31,31,36,0)); }
  :root[data-theme="dark"] body.landing .tk-window::after { background: linear-gradient(270deg, var(--paper-2), rgba(31,31,36,0)); }
}
@media (max-width: 400px) and (min-height: 521px) {
  body.landing .tk-bar { gap: 6px; padding: 0 12px; }
  body.landing .tk-brand { font-size: 16px; }
  body.landing .tk-sol { padding: 0 8px; gap: 5px; letter-spacing: .04em; }
  body.landing .tk-window { padding: 0 12px; }
}
/* the language key and its list, and the bar of keys' names: at the type floor, never under it */
@media (max-width: 760px) and (min-height: 521px) {
  body.landing .status .lang-menu > summary, body.landing .status .lang button { font-size: var(--fs-tag); }
  body.landing .tab { font-size: var(--fs-tag); letter-spacing: .03em; }
  body.landing .tab span { max-width: 100%; }
  html[lang="fr"] body.landing .tab span { font-size: var(--fs-tag); letter-spacing: .01em; line-height: 1.08; }   /* "Tableau de bord" in two lines */
}
@media (max-width: 370px) and (min-height: 521px) {
  body.landing .tab { letter-spacing: 0; }
  body.landing .tabbar { padding-left: 2px; padding-right: 2px; }
  body.landing .tk-bar { gap: 4px; padding: 0 10px; }
  body.landing .tk-sol { padding: 0 7px; }
}
@media (max-width: 349px) and (min-height: 521px) {
  body.landing .tk-sol { display: none; }
}
/* a phone held sideways: one row as on a desk, a little lower, the three links small */
@media (max-height: 520px) {
  body.landing .tk-bar { height: 50px; gap: 8px; padding: 0 16px; }
  body.landing .tk-brand { font-size: 16px; }
  body.landing .tk-window { height: 30px; padding: 0 16px; }
  body.landing .tk-nav a { min-height: 30px; padding: 0 9px 0 8px; font-size: 12px; gap: 6px; }
  body.landing .tk-nav a .tk-ic { width: 15px; height: 15px; }
}

/* the cross that closes a pop-up, by night as well as by day */
:root[data-theme="dark"] body.landing .popup-close { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.3); color: #e6e6ec; }
:root[data-theme="dark"] body.landing .popup-close:hover { background: rgba(255,255,255,.14); color: #fff; }

/* ====================================================================== the landing page */
body.landing:not(.inner) .shell { padding-top: 0; }
body.landing .sheet { position: relative; }
/* a page's label row: its number and name at the left in Mars, its subject at the right — the small capitals of a panel's
   channel code and meta line */
body.landing .sheet-meta { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 18px; margin: 0;
  font-family: var(--display); font-size: var(--fs-label); line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: var(--dim); }
body.landing .sheet-meta > span:first-child { color: var(--mars-ink); }
body.landing .sheet-meta.is-ruled { padding-bottom: 16px; border-bottom: 1px solid var(--hair); }

/* ---- the name, the line under it and the run: over the habitat on a wider screen, at the head of the note on a phone */
/* the first page's words (landing.js, intro): the eyebrow — ZKM | Hertzlab • Durational performance — the name with Ground
   Station under it, the paragraph on what the site is for, the run; at the left of the room on a wider screen, over it on
   a phone (October: "shift the Earth–habitat visual to the right and have this on the left") */
body.landing .sheet-intro { position: relative; z-index: 1; }
body.landing .sheet-intro .intro-eyebrow { margin: 0 0 16px; font-family: var(--display); font-size: var(--fs-label); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mars-ink); }
body.landing .sheet-intro .intro-eyebrow .intro-dot { margin: 0 4px; color: var(--mars); }
body.landing .sheet-intro .run-now { color: var(--ink); }
body.landing .sheet-intro .wordmark { margin: 0; line-height: .95; letter-spacing: -.035em; font-weight: 600; color: var(--ink); }
body.landing .sheet-intro .wordmark .wm-sep { display: none; }
body.landing .sheet-intro .wordmark .wm-ground { display: block; margin-top: 8px; font-size: .5em; line-height: 1.1; font-weight: 500; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }   /* Ground Station, smaller and lighter, under the name */
body.landing .sheet-intro .intro-text { margin: 22px 0 0; max-width: 46ch; font-size: 17px; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
/* The run's last day (14 October: "on the 27th, on the landing page, add in big: COME visit us and See the habitat from
   inside and talk to the Astronauts from 15:00 to 17:00"): the invitation under the station's name, large, in a Mars
   frame — the day and the hours over it, Come visit us in Mars — until the habitat closes to visitors at 17:00
   (landing.js, intro) */
body.landing .sheet-intro .intro-invite { margin: 22px 0 0; max-width: 34rem; padding: 16px 20px 18px; border: 2px solid var(--mars); border-radius: 18px; box-sizing: border-box; }
body.landing .sheet-intro .intro-invite .invite-k { margin: 0 0 8px; font-family: var(--display); font-size: var(--fs-label); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mars-ink); }
body.landing .sheet-intro .intro-invite .invite-big { margin: 0; font-family: var(--display); font-size: clamp(22px, 1.8vw, 30px); line-height: 1.15; font-weight: 600; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
body.landing .sheet-intro .intro-invite .invite-big strong { display: block; color: var(--mars); font-size: 1.25em; font-weight: 700; }
body.landing .sheet-intro .run-dates { margin: 22px 0 0; line-height: 1.6; }
body.landing .sheet-intro .intro-cta { margin: 24px 0 0; }   /* Know more, the key to the About page (13 October): the cobalt pill under the run */
body.landing .sheet-intro .intro-cta.is-two { display: flex; flex-wrap: wrap; gap: 12px; }   /* after the run, two keys there — Archive and About (14 October) */
@media (min-width: 761px) and (max-height: 720px) {           /* a short laptop window: the key a little closer, clear of the window's foot */
  body.landing .sheet-intro .intro-cta { margin-top: 16px; }
  body.landing .sheet-intro .know-more { min-height: 42px; }
}

/* ---- P01: the habitat */
body.landing .sheet-p1 { display: flex; flex-direction: column; }
/* its sheet in the grey of the reference by day (by night its own dark grey, aura.css) */
body.landing .dome-panel { --seq-ground: #d7d7d7; }
/* the station's name, large, in the top left corner of the sheet under the ruler — the sheet is the first screen on a
   phone, so it carries the name; the sky keeps clear of it as it does of the sheet's small figure (public/sky.js) */
body.landing .seq-fig.seq-brand { display: block; left: 16px; top: 36px; z-index: 1; transform: none; font-family: var(--display); font-size: clamp(34px, 4.6vw, 60px); line-height: .95; letter-spacing: -.035em; text-transform: none; font-weight: 600; color: var(--ink); }
body.landing .seq-brand .bang { color: var(--mars); font-weight: inherit; }
/* and LIVE in the top right corner, opposite the name: an orange pill with a pulsing dot, the mark the board and the strip
   of pictures carry — everything on the sheet is the habitat as it is now (the sky keeps clear of it too) */
body.landing .seq-fig.seq-live { display: inline-flex; align-items: center; gap: 8px; left: auto; right: 16px; top: 40px; z-index: 1; transform: none; padding: 7px 13px 7px 11px;
  border: 1px solid var(--mars); border-radius: 999px; background: rgba(255,255,255,.55); font-family: var(--display); font-size: 11.5px; line-height: 1; letter-spacing: .16em; font-weight: 600; color: var(--mars-ink); }
:root[data-theme="dark"] body.landing .seq-fig.seq-live { background: rgba(10,10,14,.45); }
body.landing .seq-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--mars); box-shadow: 0 0 10px 2px rgba(255,90,31,.7); animation: live 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { body.landing .seq-live i { animation: none; } }
/* the day the performance is on: its number in Mars, and an orange line down its column from under the number to the
   ground line (sky.js draws it on the day, public/sky.js moves it on at midnight; before and after the run there is none) */
body.landing .seq-n.is-now { background: rgba(255,90,31,.16); color: var(--mars-ink); font-weight: 700; }
body.landing .seq-head { left: calc(100% * (var(--day, 1) - 1) / var(--seq-days, 13) + 12px); top: 24px; bottom: 0; width: 2px; margin-left: -1px;
  background: var(--mars); box-shadow: 0 0 10px rgba(255,90,31,.55); }
body.landing .seq-head::before { top: 0; left: -4px; }

/* the floor under the dome: the sheet ends at the ground line the dome stands on (its columns, tracks and the day's line
   with it), and under it lies its floor, plain (the dome's foot, when the page puts something there). The nudge to scroll
   on — an arrow pointing down that bobs (public/sky.js hides it once the page has been scrolled) — stands on the Earth at
   the foot of the first page now (P00, below). The line that used to turn under the dome is kept in landing.js, unused;
   its styles stay below for the run. */
body.landing .dome-panel.has-line { --foot-h: 64px; }
body.landing .dome-panel.has-line .dome-seq { bottom: 0; }
/* the habitat's page: the sheet ends at the ground line the dome stands on, and nothing stands under it */
body.landing:not(.inner) .sheet-p1 .dome-seq { bottom: 0; }
body.landing:not(.inner) .sheet-p1 .dome-caption::before { margin-bottom: 0; }
body.landing .dome-foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 10px 32px;
  height: var(--foot-h); box-sizing: border-box; margin: 0; padding: 0; background: var(--seq-ground); }
body.landing .dome-foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--cobalt-fill); }   /* the ground line */
body.landing .dome-nudge { display: inline-flex; align-items: center; justify-content: center; padding: 6px 14px; border: 0; border-radius: 999px; text-decoration: none;
  color: var(--mars-ink); animation: dome-nudge 1.8s ease-in-out infinite; transition: opacity .35s ease, visibility 0s linear 0s; }
body.landing .dome-nudge svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
body.landing .dome-nudge.is-gone { opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
@keyframes dome-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { body.landing .dome-nudge { animation: none; } }
body.landing .hab-line { flex: 1 1 auto; min-width: 0; }
body.landing .hab-line-item { display: flex; flex-direction: column; gap: 5px; margin: 0; transition: opacity .35s ease, transform .35s ease; }
body.landing .hab-line-item.is-out { opacity: 0; transform: translateY(4px); }
body.landing .hab-line-meta { display: block; font-family: var(--display); font-size: var(--fs-label); line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
  color: var(--mars-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.landing .hab-line-text { font-family: var(--display); font-size: 18px; line-height: 1.32; font-weight: 600; letter-spacing: -.01em; color: var(--ink);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

/* ---- P00: the way to the habitat — the first page (landing.js, space). After the mock-up: a room of night with a field
   of stars; at its foot the Earth — a photograph of its limb from orbit (public/space/earth.jpg), the horizon curving away
   — and over it a mesh of dots that thins out quickly with height; far above, at the top, the habitat as a line drawing of
   the geodesic dome (public/space/habitat.png), white on the night, a faint light behind it; between them the dashed line a
   message goes up and an answer comes down, a signal climbing it and an orange one falling; the sky's exchanges and
   snapshots on either side, each in a minimal white frame (below; public/sky.js keeps them clear of the Earth, the habitat
   and the line: data-sky-round, data-sky-solid). On the Earth, the nudge to scroll on. Night in both themes: the room is
   space. Lines, the two pictures and a few gradients — nothing blurred. */
body.landing .space { display: flex; flex-direction: column; }
/* (the Earth's picture is --earth-k times the room's width; its limb stands --earth-arc above the room's foot — never
   higher than the picture reaches below its limb, some 0.18 of its width, so the picture always stands on the room's
   foot, however narrow and tall the room: the room is a container, its width 100cqw — 9 October) */
body.landing .space-room { container-type: inline-size; --dome-w: clamp(190px, 30vh, 330px); --dome-top: 8px; --earth-k: 1.25; --earth-w: calc(var(--earth-k) * 100%); --earth-arc: min(clamp(90px, 12.5vh, 125px), calc(var(--earth-k) * 18cqw));
  --hud: #fff; --hud-rgb: 255,255,255; --hud-hot: #ff6a2e; --hud-hot-rgb: 255,106,46; --hud-ground: rgba(0,0,0,.45); --seq-ground: #0a0a0c;
  /* the sky of the room: a sunrise over the Earth's limb — night at the top, the blue of the high air, then the pale band
     and the orange of the dawn at the horizon (8 October: "instead of the black background behind the Earth, this image
     or a similar gradient, generated — whichever is better and lighter": generated, from the picture's own colours, no
     bytes to load); the Earth's picture is clear where its sky was black (public/space/earth.webp), so the dawn shows
     round its limb */
  /* (the station's own black, blue and orange were tried in its place that evening and taken back: "revert the gradient
     to the previous gradient"; the next morning the picture's colours were drawn together at the horizon — "more orange
     and blue at the horizon, and then black, like 80 percent" — and then bent round the Earth: "make the gradient go
     round the curve of the Earth, not flat". The sky is space black; the dawn is a ring round the limb, drawn on the
     globe's own circle — .space-earth::before, below) */
  --room-sky: #000;
  position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; border-radius: var(--r-lg); color: #fff; background: var(--room-sky); }
/* the stars: a field of small lights, still */
/* (the stars over the whole black sky: the dawn's ring round the Earth lies over them where it is bright) */
body.landing .space-stars { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image:
  radial-gradient(1.2px 1.2px at 8% 18%, #fff 99%, transparent), radial-gradient(1px 1px at 19% 61%, rgba(255,255,255,.7) 99%, transparent),
  radial-gradient(1.4px 1.4px at 27% 9%, #fff 99%, transparent), radial-gradient(1px 1px at 33% 44%, rgba(255,255,255,.6) 99%, transparent),
  radial-gradient(1.1px 1.1px at 41% 27%, #fff 99%, transparent), radial-gradient(1px 1px at 57% 15%, rgba(255,255,255,.8) 99%, transparent),
  radial-gradient(1.3px 1.3px at 64% 52%, #fff 99%, transparent), radial-gradient(1px 1px at 71% 8%, rgba(255,255,255,.7) 99%, transparent),
  radial-gradient(1.2px 1.2px at 79% 36%, #fff 99%, transparent), radial-gradient(1px 1px at 88% 22%, rgba(255,255,255,.6) 99%, transparent),
  radial-gradient(1.4px 1.4px at 93% 58%, #fff 99%, transparent), radial-gradient(1px 1px at 14% 80%, rgba(255,255,255,.5) 99%, transparent),
  radial-gradient(1.1px 1.1px at 48% 70%, rgba(255,255,255,.7) 99%, transparent), radial-gradient(1px 1px at 84% 74%, rgba(255,255,255,.55) 99%, transparent),
  radial-gradient(1.2px 1.2px at 3% 40%, rgba(255,255,255,.6) 99%, transparent), radial-gradient(1px 1px at 97% 12%, #fff 99%, transparent),
  radial-gradient(1px 1px at 12% 33%, rgba(255,255,255,.45) 99%, transparent), radial-gradient(1.3px 1.3px at 23% 88%, rgba(255,255,255,.5) 99%, transparent),
  radial-gradient(1px 1px at 36% 5%, rgba(255,255,255,.65) 99%, transparent), radial-gradient(1px 1px at 52% 38%, rgba(255,255,255,.4) 99%, transparent),
  radial-gradient(1.2px 1.2px at 61% 81%, rgba(255,255,255,.55) 99%, transparent), radial-gradient(1px 1px at 68% 30%, rgba(255,255,255,.5) 99%, transparent),
  radial-gradient(1px 1px at 76% 62%, rgba(255,255,255,.45) 99%, transparent), radial-gradient(1.3px 1.3px at 90% 42%, rgba(255,255,255,.6) 99%, transparent),
  radial-gradient(1px 1px at 45% 92%, rgba(255,255,255,.35) 99%, transparent), radial-gradient(1px 1px at 30% 64%, rgba(255,255,255,.4) 99%, transparent); }
/* the habitat, far: the drawing, its name under it beside the line, and a faint light behind it */
body.landing .space-dome { position: absolute; z-index: 1; left: 50%; top: var(--dome-top); width: var(--dome-w); transform: translateX(-50%); }
body.landing .space-dome::before { content: ""; position: absolute; z-index: -1; left: -30%; right: -30%; top: -20%; bottom: -30%; pointer-events: none;
  background: radial-gradient(ellipse 50% 58% at 50% 68%, rgba(255,106,46,.26) 0%, rgba(255,90,31,.1) 45%, rgba(255,90,31,0) 100%); }   /* Red Dust City: a Mars light behind the drawing */
body.landing .space-dome-img { display: block; width: 100%; height: auto; }
body.landing .space-tag { position: absolute; z-index: 1; margin: 0; white-space: nowrap; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: var(--fs-tag); line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.62); }
/* the habitat's name and where it stands, centred under the drawing (13 October: "the text next to the habitat should be
   placed properly — it is placed incorrectly — either right of the dome or below it; and it should read Red Dust City,
   Karlsruhe Marktplatz"; it stood under the drawing's left half, against the line, until then): RED DUST CITY, in Mars
   orange over KARLSRUHE MARKTPLATZ in the night's white, the dashed line starting under the two (--tag-h, the room they
   take under the drawing) — as the installation's habitat screen stands its name; the letters' spacing is evened out on
   both sides, so each line is centred on the line under it */
body.landing .space-room { --tag-h: 50px; }
body.landing .space-tag-dome { top: 100%; left: 50%; right: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 4px; transform: translateX(-50%); text-align: center;
  font-family: var(--display); font-size: 15px; font-weight: 600; letter-spacing: .2em; color: var(--hud-hot); text-shadow: 0 0 14px rgba(255,106,46,.55); }
body.landing .space-tag-dome > b { font-weight: inherit; padding-left: .2em; }
body.landing .space-tag-dome > span { padding-left: .24em; font-size: .7em; font-weight: 500; letter-spacing: .24em; color: rgba(255,255,255,.78); text-shadow: 0 1px 8px rgba(0,0,0,.6); }
/* the line: dashed, from the habitat's front foot down onto the Earth's limb; a signal climbs it, and the answer comes down in Mars orange */
body.landing .space-line { position: absolute; z-index: 2; left: 50%; width: 2px; margin-left: -1px; top: calc(var(--dome-top) + var(--dome-w) * 0.696 + var(--tag-h)); bottom: calc(var(--earth-arc) - 6px);   /* from under the habitat's name (above), over the Earth's haze, down onto the limb */
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.6) 0 6px, transparent 6px 12px); }
body.landing .space-line::before, body.landing .space-line::after { content: ""; position: absolute; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; opacity: 0; }
body.landing .space-line::before { bottom: 0; background: #fff; box-shadow: 0 0 10px 2px rgba(120,170,255,.9); animation: space-up 13s linear infinite; }
body.landing .space-line::after { top: 0; background: var(--hud-hot); box-shadow: 0 0 10px 2px rgba(var(--hud-hot-rgb),.8); animation: space-down 13s linear infinite; }
/* one round, thirteen seconds: the signal up (0–3.8 s), the answer down (4.7–8.5 s), then the ground station's dish beams
   it into space (8.5–12 s, below) — the climb and the descent at the pace they always had */
@keyframes space-up { 0% { bottom: 0; opacity: 0; } 2.8% { opacity: 1; } 29.1% { bottom: calc(100% - 8px); opacity: 1; } 31.8%, 100% { bottom: calc(100% - 8px); opacity: 0; } }
@keyframes space-down { 0%, 36% { top: 0; opacity: 0; } 38.8% { opacity: 1; } 65.1% { top: calc(100% - 8px); opacity: 1; } 67.8%, 100% { top: calc(100% - 8px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { body.landing .space-line::before, body.landing .space-line::after { animation: none; } }
/* the ground station's dish (landing.js, groundDish — 8 October): on the limb just left of the line's foot, faint; when
   the answer reaches the Earth it lights up, its waves go out, the dashed beam runs up into the dark and a bright dot
   flies out along it */
body.landing .space-dish { position: absolute; z-index: 2; left: calc(50% - 34px); bottom: calc(var(--earth-arc) - 3px); width: 44px; height: 30px; pointer-events: none; opacity: .5; animation: dish-on 13s linear infinite; }
body.landing .space-dish .dish-svg { position: absolute; left: 0; bottom: 0; width: 44px; height: 30px; overflow: visible; }
body.landing .space-dish .dish-feet, body.landing .space-dish .dish-body path { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.landing .space-dish .dish-body .dish-cup { fill: rgba(255,255,255,.14); }
body.landing .space-dish .dish-feed { fill: var(--hud-hot); filter: drop-shadow(0 0 4px rgba(var(--hud-hot-rgb),.9)); }
body.landing .space-dish .dish-waves path { fill: none; stroke: var(--hud-hot); stroke-width: 1.6; stroke-linecap: round; opacity: 0; animation: dish-wave 13s linear infinite; }
body.landing .space-dish .dish-waves path:nth-child(2) { animation-name: dish-wave-2; }
body.landing .space-dish .dish-waves path:nth-child(3) { animation-name: dish-wave-3; }
body.landing .space-dish .dish-beam { fill: none; stroke: url(#dish-fade); stroke-width: 1.6; stroke-dasharray: 5 7; opacity: 0; animation: dish-beam 13s linear infinite; }
body.landing .space-dish .df-0 { stop-color: var(--hud-hot); stop-opacity: .9; }
body.landing .space-dish .df-1 { stop-color: var(--hud-hot); stop-opacity: 0; }
body.landing .space-dish .dish-shot { fill: #fff; opacity: 0; filter: drop-shadow(0 0 7px rgba(var(--hud-hot-rgb),.95)); animation: dish-shot 13s linear infinite; }
body.landing .space-beam-zone { display: none; }
@media (min-width: 761px) and (min-height: 521px) {
  body.landing .space-beam-zone { display: block; position: absolute; left: calc(50% - 162px); bottom: calc(var(--earth-arc) + 14px); width: 140px; height: 200px; visibility: hidden; pointer-events: none; }   /* the beam's first stretch, which the sky keeps clear of */
}
@keyframes dish-on { 0%, 62% { opacity: .5; } 65%, 91% { opacity: 1; } 95%, 100% { opacity: .5; } }
@keyframes dish-beam { 0%, 65% { opacity: 0; stroke-dashoffset: 0; } 68% { opacity: 1; } 89% { opacity: 1; } 93%, 100% { opacity: 0; stroke-dashoffset: -96; } }
@keyframes dish-shot { 0%, 66% { transform: translateY(0); opacity: 0; } 67.5% { opacity: 1; } 80% { opacity: 1; } 88%, 100% { transform: translateY(-300px); opacity: 0; } }
@keyframes dish-wave { 0%, 65% { opacity: 0; } 67% { opacity: .95; } 72% { opacity: 0; } 74% { opacity: .95; } 79% { opacity: 0; } 81% { opacity: .95; } 86%, 100% { opacity: 0; } }
@keyframes dish-wave-2 { 0%, 66.5% { opacity: 0; } 68.5% { opacity: .95; } 73.5% { opacity: 0; } 75.5% { opacity: .95; } 80.5% { opacity: 0; } 82.5% { opacity: .95; } 87.5%, 100% { opacity: 0; } }
@keyframes dish-wave-3 { 0%, 68% { opacity: 0; } 70% { opacity: .95; } 75% { opacity: 0; } 77% { opacity: .95; } 82% { opacity: 0; } 84% { opacity: .95; } 89%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { body.landing .space-dish, body.landing .space-dish * { animation: none !important; } body.landing .space-dish .dish-shot, body.landing .space-dish .dish-beam { display: none; } }
/* the trajectory (landing.js, trajectory; public/sky.js sets its paths): a desk's way for a message — a straight line
   from the Earth's horizon in the lower left corner up to the habitat in the north-east, dashed like a phone's line,
   and on past the habitat into space, thinner, fading out along a gradient; the signal, the answer and the one that
   goes on are the SVG's own motion; the flare at the habitat a ring that opens and closes as the signal arrives. Shown
   on a desk only (below); a phone keeps its vertical line. */
body.landing .space-arc { display: none; position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
body.landing .space-arc .arc-up { fill: none; stroke: rgba(255,255,255,.6); stroke-width: 2; stroke-dasharray: 6 6; stroke-linecap: butt; }
body.landing .space-arc .arc-on { fill: none; stroke: url(#arc-fade); stroke-width: 1.5; stroke-dasharray: 4 8; }
body.landing .space-arc .arc-sig { fill: #fff; filter: drop-shadow(0 0 6px rgba(120,170,255,.95)); }
body.landing .space-arc .arc-ans { fill: var(--hud-hot); filter: drop-shadow(0 0 6px rgba(var(--hud-hot-rgb),.9)); }
body.landing .space-arc .arc-far { fill: #fff; filter: drop-shadow(0 0 5px rgba(255,255,255,.8)); }
body.landing .space-arc .arc-flare { fill: none; stroke: #fff; stroke-width: 1.5; filter: drop-shadow(0 0 6px rgba(255,255,255,.9)); }
@media (prefers-reduced-motion: reduce) { body.landing .space-arc circle { display: none; } }
/* the Earth: the picture the width of the room and more, centred under the line, its limb's apex the arc's height above
   the room's foot (the limb is 24.1 % down the picture, its haze above it; the rest curves away below); the mesh of dots
   drawn about the limb in the same box, and — never seen — the globe's circle for the sky to keep clear of */
body.landing .space-earth { position: absolute; z-index: 1; left: 50%; bottom: 0; width: var(--earth-w); aspect-ratio: 1414 / 340; pointer-events: none;
  transform: translate(-50%, calc(100% - var(--earth-arc) - 24.1%)); }
body.landing .space-earth-img { display: block; width: 100%; height: 100%; }
/* the dawn round the Earth (9 October: "make the gradient go round the curve of the Earth, not flat"): a ring of light on
   the limb — the dawn's orange on it, a pale band, the blues of the high air over that, fading into the black some
   sixth of the picture's width above it — drawn on the globe's own circle behind the picture, so it bends with the Earth
   at any size of the room (the limb in public/space/earth.webp is a circle: its centre 47.67 % across the picture and
   0.7566 of its width down, its radius 0.6997 of its width — the ring reaches 0.8597 of it); the colours the picture
   handed over on 8 October, drawn together at the horizon ("more orange and blue at the horizon, then black") */
body.landing .space-earth::before { content: ""; position: absolute; z-index: -1; left: 47.67%; top: 314.66%; width: 171.94%; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(251, 112, 0, 0) 0, rgba(251, 112, 0, 0) 79%, #fb7000 80.6%, #fb7000 81.4%, #fd8300 82%, #fe991e 83%, #fead47 84.2%, #fac693 85.2%, #b8c5c1 86.2%,
    #3798c2 87.6%, #0082b8 89.4%, #005595 91.8%, #001a42 94.6%, #00061a 97.4%, rgba(0, 6, 26, 0) 100%); }
body.landing .space-halo { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
body.landing .space-halo circle { vector-effect: non-scaling-stroke; stroke-width: 1.8px; }
body.landing .space-halo.is-phone { display: none; }
body.landing .space-globe { position: absolute; aspect-ratio: 1; visibility: hidden; }
/* the nudge, on the Earth */
body.landing .space .dome-nudge { position: absolute; z-index: 3; left: 50%; bottom: 12px; margin-left: -29px; color: var(--mars); filter: drop-shadow(0 0 8px rgba(255,90,31,.6)); }   /* the arrow down, in Mars (October) */
/* the sky's items on this page, in a minimal white frame — a hairline and a bracket at each corner (the frame below, in
   white here): an exchange's line — QUESTION, the callsign, the time — in small white capitals over its words, and the
   crew's answer under them with an orange rule at its left and ANSWER in orange, so what is Earth's and what is the crew's
   is plain; a snapshot in the same frame, in colour, its time in white over it. Three lines of a message (the whole of
   it is on the board). */
body.landing .space .sky-text { -webkit-line-clamp: 3; padding: 0; text-shadow: none; }
@media (min-width: 761px) and (min-height: 521px) {                                               /* a desk: small, beside the line (public/sky.js, SIZE) */
  body.landing .space .sky-text { font-size: 12.5px; line-height: 1.25; }
  body.landing .space .sky-who, body.landing .space .sky-when { font-size: 9px; letter-spacing: .12em; }
  body.landing .space .sky-who { display: block; width: 100%; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* a line too long for the frame ends in an ellipsis */
  body.landing .space .sky-msg { padding: 7px 10px 8px; }
}
body.landing .space .sky-msg { padding: 9px 12px 10px; border-color: rgba(255,255,255,.34); box-shadow: none; }
body.landing .space .sky-who, body.landing .space .sky-when { padding: 0; background: none; clip-path: none; color: rgba(255,255,255,.74); font-size: 10px; letter-spacing: .14em; }
body.landing .space .sky-part { gap: 4px; }
body.landing .space .sky-part.is-crew { margin: 8px 0 0; padding: 0 0 0 10px; border: 0; border-left: 2px solid var(--hud-hot); background: none; max-width: 100%; }
body.landing .space .sky-part.is-crew .sky-who { background: none; color: var(--hud-hot); }
body.landing .space .sky-when { padding-left: 1px; }
body.landing .space .sky-when::before { background: #fff; box-shadow: 0 0 5px #fff; }
body.landing .space .sky-frame { border-color: rgba(255,255,255,.7); box-shadow: 0 0 14px rgba(255,255,255,.1); background: #0a0a0c; }
body.landing .space .sky-frame::after { opacity: .5; }
body.landing .space .sky-pic img { filter: none; }
body.landing .space .sky-pic:hover .sky-frame, body.landing .space .sky-pic:active .sky-frame { border-color: var(--hud-hot); box-shadow: 0 0 14px rgba(var(--hud-hot-rgb),.3); }
body.landing .space .sky-note, :root[data-theme="dark"] body.landing .space .sky-note { border-color: rgba(255,255,255,.4); background-color: rgba(0,0,0,.86); box-shadow: none; }

/* the sky: the pictures and the exchanges come and go, each somewhere else each time, clear of the Earth, the habitat, the
   line and of one another (public/sky.js) — fading in, standing, fading out, nothing moving. Each is framed as a
   head-up display frames a readout: a hairline edge with a faint glow, a bracket at each corner, and a data plate with a
   slanted end — on a picture the moment it was taken, on a message QUESTION or ANSWER with the sender and the time — the
   words of a message on a dark translucent panel. Cobalt for the pictures and for what comes from Earth, Mars orange for
   the crew's answer, so what comes from Mars stands out. As one comes in, a bright line sweeps down it once (lock-on);
   not where a phone asks for less motion. They fade even where a phone asks for less motion (station.css stops every
   transition there): a fade is not a movement. */
body.landing .dome-panel { --hud: #2f45e8; --hud-rgb: 47,69,232; --hud-hot: #ff5a1f; --hud-hot-rgb: 255,90,31; --hud-ground: rgba(10,12,26,.66); }   /* (the room's are above) */
:root[data-theme="dark"] body.landing .dome-panel { --hud: #6b7dff; --hud-rgb: 107,125,255; --hud-hot: #ff6a2e; --hud-hot-rgb: 255,106,46; --hud-ground: rgba(8,9,18,.72); }
body.landing .sky-msg, body.landing .sky-pic { opacity: 0; animation: none !important; transition: opacity 1.2s ease-in-out; }
body.landing .sky-msg.is-on, body.landing .sky-pic.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  body.landing .sky-msg, body.landing .sky-pic { transition-duration: 1.2s !important; }
  body.landing .hab-line-item { transition-duration: .35s !important; }
  body.landing .hab-line-item.is-out { transform: none; }
}
/* the brackets: two short bars in each corner, drawn as backgrounds so that the frame is one element */
body.landing .sky-msg, body.landing .sky-pic {
  --bk: var(--hud);
  background-image: linear-gradient(var(--bk), var(--bk)), linear-gradient(var(--bk), var(--bk)), linear-gradient(var(--bk), var(--bk)), linear-gradient(var(--bk), var(--bk)),
    linear-gradient(var(--bk), var(--bk)), linear-gradient(var(--bk), var(--bk)), linear-gradient(var(--bk), var(--bk)), linear-gradient(var(--bk), var(--bk));
  background-size: 12px 2px, 2px 12px, 12px 2px, 2px 12px, 12px 2px, 2px 12px, 12px 2px, 2px 12px;
  background-position: left top, left top, right top, right top, left bottom, left bottom, right bottom, right bottom;
  background-repeat: no-repeat;
}
/* the plate: small capitals in the mono face on a solid ground, its right end cut on the slant */
body.landing .sky-who, body.landing .sky-when {
  display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; max-width: 100%; height: 16px; margin: 0; padding: 0 11px 0 7px;
  background: var(--hud); color: #fff; text-shadow: none; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 10px; line-height: 16px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 100%, 0 100%); }
body.landing .sky-when::before, body.landing .sky-head::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff; animation: live 2.4s ease-in-out infinite; }   /* live */
@media (prefers-reduced-motion: reduce) { body.landing .sky-when::before, body.landing .sky-head::before { animation: none; } }
/* the heads (October): LATEST MESSAGE: over an exchange, inside its panel over the question's plate; LATEST IMAGE is the
   snapshot's plate (sky-when), and the moment the picture was taken stands at the foot of its frame, over the picture */
body.landing .sky-head { display: flex; align-items: center; gap: 6px; margin: 0 0 7px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 10px; line-height: 16px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,.86); white-space: nowrap; }
/* (the moment on one line, its zone with it — 13.10 · 16:41 CEST — inside a desk's small frame: 13 October) */
body.landing .sky-stamp { position: absolute; right: 5px; bottom: 4px; z-index: 1; margin: 0; padding: 1px 5px; border-radius: 3px; background: rgba(0,0,0,.55); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 9px; line-height: 12px; letter-spacing: .06em; white-space: nowrap; text-transform: uppercase; color: #fff; pointer-events: none; }
/* ---- an exchange: one panel — the question's plate at its top left corner, its words beneath; the crew's answer in a box
   of its own inside it, framed in Mars with a bar at its left */
body.landing .sky-msg { box-sizing: border-box; max-width: none; gap: 0; padding: 0 0 9px; background-color: var(--hud-ground);
  border: 1px solid rgba(var(--hud-rgb),.7); box-shadow: 0 0 0 1px rgba(var(--hud-rgb),.1), 0 0 18px rgba(var(--hud-rgb),.25); }
body.landing .sky-msg::after { display: none; }                                          /* the track it stood on: none now */
body.landing .sky-part { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 100%; box-sizing: border-box; padding: 0; }
body.landing .sky-part.is-earth { padding-top: 0; }
body.landing .sky-part.is-crew { --bk: var(--hud-hot); margin: 8px 10px 0; padding: 0 0 7px; border: 1px solid rgba(var(--hud-hot-rgb),.75); border-left: 3px solid var(--hud-hot); background: rgba(var(--hud-hot-rgb),.1); max-width: calc(100% - 20px); }
body.landing .sky-part.is-crew .sky-who { background: var(--hud-hot); }
body.landing .sky-k { font-weight: 700; letter-spacing: .14em; }
body.landing .sky-text { padding: 0 12px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
body.landing .sky-part.is-crew .sky-text { padding: 0 10px; }
body.landing .sky-who, body.landing .sky-part.is-crew .sky-who, :root[data-theme="dark"] body.landing .sky-who, :root[data-theme="dark"] body.landing .sky-part.is-crew .sky-who { color: #fff; }
/* ---- a snapshot: its plate over it, the picture in a hairline frame with a faint glow and scan lines, all in brackets */
body.landing .sky-pic { display: flex; flex-direction: column; gap: 5px; box-sizing: border-box; padding: 6px; outline: 0; background-color: transparent; border: 0; }
body.landing .sky-pic .sky-when { position: static; flex: none; align-self: flex-start; }
body.landing .sky-frame { position: relative; display: block; flex: 1 1 auto; min-height: 0; overflow: hidden; background: var(--seq-ground); outline: 0;
  border: 1px solid rgba(var(--hud-rgb),.8); box-shadow: 0 0 0 1px rgba(var(--hud-rgb),.12), 0 0 16px rgba(var(--hud-rgb),.3); }
body.landing .sky-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(255,255,255,.07) 0 1px, transparent 1px 3px); }   /* scan lines */
body.landing .sky-pic:hover .sky-frame, body.landing .sky-pic:active .sky-frame { border-color: var(--hud-hot); box-shadow: 0 0 0 1px rgba(var(--hud-hot-rgb),.15), 0 0 16px rgba(var(--hud-hot-rgb),.35); }
/* lock-on: a bright line sweeps down the frame once as it comes in */
body.landing .sky-frame::before, body.landing .sky-msg::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 2; pointer-events: none; opacity: 0;
  background: rgba(255,255,255,.75); box-shadow: 0 0 8px rgba(255,255,255,.8); }
body.landing .sky-pic.is-on .sky-frame::before, body.landing .sky-msg.is-on::before { animation: sky-sweep 1.1s ease-out .15s 1 both; }
@keyframes sky-sweep { 0% { top: 0; opacity: .9; } 85% { opacity: .6; } 100% { top: calc(100% - 2px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { body.landing .sky-pic.is-on .sky-frame::before, body.landing .sky-msg.is-on::before { animation: none !important; } }
/* the note a touch brings, in the same dress: the dark panel, the brackets, the cobalt key */
body.landing .sky-note, :root[data-theme="dark"] body.landing .sky-note { --bk: var(--hud); border-radius: 0; background-color: var(--hud-ground); color: #fff; border: 1px solid rgba(var(--hud-rgb),.7); box-shadow: 0 0 0 1px rgba(var(--hud-rgb),.1), 0 0 22px rgba(var(--hud-rgb),.28);
  background-image: linear-gradient(var(--bk), var(--bk)), linear-gradient(var(--bk), var(--bk)), linear-gradient(var(--bk), var(--bk)), linear-gradient(var(--bk), var(--bk)),
    linear-gradient(var(--bk), var(--bk)), linear-gradient(var(--bk), var(--bk)), linear-gradient(var(--bk), var(--bk)), linear-gradient(var(--bk), var(--bk));
  background-size: 12px 2px, 2px 12px, 12px 2px, 2px 12px, 12px 2px, 2px 12px, 12px 2px, 2px 12px;
  background-position: left top, left top, right top, right top, left bottom, left bottom, right bottom, right bottom; background-repeat: no-repeat; }
body.landing .sky-note-k { color: #fff; }
body.landing .sky-note-k i { background: var(--hud-hot); box-shadow: 0 0 8px 2px rgba(var(--hud-hot-rgb),.6); }
body.landing .sky-note-x, :root[data-theme="dark"] body.landing .sky-note-x { background: rgba(255,255,255,.12); color: #fff; }

/* ---- the chat's card of glass (the note that shared the dress is gone: October asked for the box to go) */
body.landing .steps {
  background: var(--glass); -webkit-backdrop-filter: blur(26px) saturate(1.35); backdrop-filter: blur(26px) saturate(1.35);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); border-radius: var(--r-lg); color: var(--ink);
}
body.landing .sheet-p2 { margin: 64px 0 0; }
/* Know more: a cobalt pill, as the page's pressed pills are — the way to the About page, where the mission is told */
body.landing .note-cta { margin: 22px 0 0; }
body.landing .know-more { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 22px 0 24px; box-sizing: border-box; border: 0; border-radius: 999px; text-decoration: none;
  background: var(--cobalt-fill); color: #fff; font-family: var(--display); font-size: 15.5px; font-weight: 600; letter-spacing: -.005em; box-shadow: 0 14px 28px -14px rgba(47,69,232,.8);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }
body.landing .know-more:hover { color: #fff; transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 18px 32px -14px rgba(47,69,232,.9); }
body.landing .know-more span[aria-hidden] { font-size: 16px; }
/* the doors under the description: Write to the crew in the orange of the composer's key, Mission dashboard and Know
   more in cobalt — a row of pills that wraps on a narrow screen */
body.landing .note-doors { display: flex; flex-wrap: wrap; gap: 10px 12px; }
body.landing .know-more.is-write { background: linear-gradient(180deg, #ff8a3d, #ff5a1f); color: #0f1540; box-shadow: 0 14px 28px -14px rgba(255,70,0,.8), 0 1px 0 rgba(255,255,255,.55) inset; }
body.landing .know-more.is-write:hover { color: #0f1540; box-shadow: 0 18px 32px -14px rgba(255,70,0,.9), 0 1px 0 rgba(255,255,255,.55) inset; }
:root[data-theme="dark"] body.landing .know-more.is-write, :root[data-theme="dark"] body.landing .know-more.is-write:hover { color: #1a0a02; }

/* ---- the habitat (src/views/pages/inside.js, habitatInside; the pop-ups and the two round keys are drawn by aura.css,
   the dome's) — a section of the About page (info.js, before Who we are; once the landing page's third page): under the
   section's head — its name, and the hint for its line (Point at a room… on a desk, Tap a room… on a touch screen) —
   the habitat in section, the cutaway picture handed over (public/habitat/scene-lines.webp — the dome on the Mars plain
   in its white lines; the modules in colour as cut-outs, public/habitat/modules/), every module a key: in colour under
   the hand, its name on a tag at its floor line while it is lit, each opening a pop-up that says what that part of the
   habitat is and what is happening in it now; EVA and the Dashboard, which are not modules, as round keys on the ground
   in front of the habitat; under the picture, the line that says what it is (AI generated image). The drawing's own
   head stands unshown (the section's names it). On a desk the drawing stands at the left of the section and the pop-up
   opens in the column at its right (inside.js, column), where at rest the hint alone stands (it gives way while a
   pop-up is open). A phone has the drawing the width of the section, the pop-up under it. */
body.landing .hab-card { position: relative; z-index: 2; padding: 0; margin: 0; background: none; border: 0; box-shadow: none; color: var(--ink); }   /* the section is the sheet; over the sections after it: the pop-up under the picture reaches onto them */
body.landing .hab-card .dome-panel, :root[data-theme="dark"] body.landing .hab-card .dome-panel { --room: 18px; flex: none; margin: 0; padding: 0; background: none; }   /* (no frame of corners: aura.css draws the dome's in the dark too) */
body.landing .hab-card .dome-head { display: none; }                                              /* the section's head names the page and carries the hint */
body.landing .hab-card .dome-meta.dome-hint, body.landing.about .about-sec-head .dome-meta.dome-hint { display: inline; font-family: var(--display); font-size: var(--fs-note); letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--dim); }
body.landing .dome-hint-tap { display: none; }
@media (hover: none) { body.landing .dome-hint-click { display: none; } body.landing .dome-hint-tap { display: inline; } }
/* the screen: the drawing at the left and the column at the right, a little under a third of the section; the drawing
   at the picture's own shape (3 : 2), as wide as the room beside the column (the script fits the picture to the stage,
   inside.js fit — at this shape, all of it) */
body.landing .hab-card .dome-screen { padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 30%, 400px); column-gap: 28px; align-items: stretch; }
body.landing .hab-card .dome-stage { flex: none; width: 100%; max-width: none; height: auto; aspect-ratio: 1536 / 1024; min-height: 0; max-height: none; margin: 0; }
/* the column: the hint, vertically in the middle of the column, beside the middle of the drawing; while a pop-up is
   open (over it, inside.js column) it fades out of the way */
body.landing .is-inside .in-aside { position: relative; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 16px; min-width: 0; transition: opacity .25s ease; }
body.landing .is-inside.has-popup .in-aside { opacity: 0; pointer-events: none; }
body.landing .is-inside .in-aside-hint { margin: 0; font-family: var(--display); font-size: var(--fs-note); line-height: 1.5; color: var(--dim); }
body.landing .is-inside .in-aside-hint .dome-meta { display: inline; font-family: inherit; font-size: inherit; letter-spacing: 0; text-transform: none; color: inherit; }
/* the pop-up in the column is narrow: its head stacks the name over the stamp, so the name keeps to one line */
@media (min-width: 761px) and (min-height: 521px) {
  body.landing .is-inside dialog.dome-popup .popup-head > div { flex-direction: column; align-items: flex-start; gap: 2px; }
}
body.landing .hab-card .dome-caption { display: none; }                                         /* no ground line under the drawing */
body.landing .hab-card .in-credit { margin: 16px 0 0; font-family: var(--display); font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }   /* under the picture: what it is */
body.landing .hab-card .dome-head .dome-legend, body.landing .hab-card .dome-screen > .dome-legend { display: none; }
@media (min-width: 761px) and (max-width: 1100px) and (min-height: 521px) {
  body.landing .hab-card .dome-screen { grid-template-columns: minmax(0, 1fr) clamp(260px, 34%, 320px); column-gap: 20px; }   /* a narrower desk: a narrower column */
}
/* a phone held upright: the drawing the width of the section at its own shape, the pop-up under it (inside.js, above) */
@media (max-width: 760px) and (min-height: 521px) {
  body.landing .hab-card .dome-screen { display: block; padding-top: 0; }
  body.landing .hab-card .dome-stage { width: 100%; max-width: none; height: auto; max-height: none; min-height: 0; }
}

/* the drawing: the dome on the plain in its white lines (inside.js, SCENE — the line-art picture handed over, the
   whole of it in the box, its corners rounded like the cards' on a desk, the frame clip), every module a key. Lit
   (under the hand, with its pop-up open, with keyboard focus — every layer of a module carries its id, inside.js lit):
   the module shows itself in colour — its cut-out of the coloured picture comes in over its lines — a bright band
   sweeps across it once, and its name comes up on a tag at its floor line (unseen otherwise: the picture carries its
   own detail, and the names would stand in it). The names are on tags in the dome's hand, set in the drawing's units
   (19, where the dome's 1000-unit box took 11.5), enlarged by the script where the drawing is drawn small (inside.js,
   tagScale). */
body.landing .dome-panel.is-inside { --in-lamp: #ffd27a; --in-tag-ink: #0f1540; }
:root[data-theme="dark"] body.landing .dome-panel.is-inside { --in-tag-ink: #f1f3ff; }
body.landing .is-inside .dome-screen { overflow: visible; }                                         /* the keys' tags under the ground may hang under the drawing's box */
body.landing .is-inside .dome-stage { z-index: 2; }                                                  /* over the card's own rule */
body.landing .is-inside .dome-svg.inside-svg { overflow: visible; }
body.landing .is-inside .in-scene { pointer-events: none; }                                       /* clipped to the drawing's box by its clipPath (inside.js) */
/* without a script the drawing is a plain picture (inside.js, noscript): the scene and the rooms' colours are fetched by the
   script only when wanted — the scene near the screen, a room the first time it lights up (13 October) */
body.landing .is-inside .in-noscript { display: block; width: 100%; height: auto; border-radius: 14px; }
/* a module lit: the picture is there at once (the band sweeps over it); dark again, it goes as quickly */
body.landing .is-inside .in-pic { opacity: 0; pointer-events: none; transition: opacity .22s ease-out; }
body.landing .is-inside .in-pic.lit { opacity: 1; transition: opacity .12s ease-out; }
body.landing .is-inside .in-sweep { fill: url(#in-sweep-light); opacity: 0; pointer-events: none; transform-box: fill-box; transform-origin: center; }
body.landing .is-inside .in-sweep.lit { animation: in-sweep 1.1s cubic-bezier(.4,.4,.3,1) 1 both; }
@keyframes in-sweep { 0% { opacity: 0; transform: translateX(-130%) skewX(-18deg); } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; transform: translateX(450%) skewX(-18deg); } }
body.landing .is-inside .in-room { fill: transparent; stroke: none; cursor: pointer; outline: none; pointer-events: all; }
body.landing .is-inside .in-room:focus-visible { stroke: #fff; stroke-width: 3; stroke-linejoin: round; }
body.landing .is-inside .in-tag { cursor: pointer; pointer-events: all; }
body.landing .is-inside .in-tag rect { transition: fill .25s, stroke .25s; }
body.landing .is-inside .in-tag text { font-size: 19px; fill: var(--in-tag-ink); transition: fill .25s; }
body.landing .is-inside .in-part .in-tag { opacity: 0; pointer-events: none; transition: opacity .2s ease-out; }   /* a module's name shows while the module is lit */
body.landing .is-inside .in-part .in-tag.lit { opacity: 1; pointer-events: all; }
body.landing .is-inside .in-part .in-tag.lit rect { fill: #fff6df; stroke: var(--in-lamp); stroke-width: 2; }   /* a module's name lit with the module's light */
body.landing .is-inside .in-part .in-tag.lit text { fill: #3a1606; }
body.landing .is-inside .in-key .dome-pod { stroke-width: 1.6; }                                  /* the outside keys are drawn larger than the dome's: their lines with them */
body.landing .is-inside .in-key .dome-ic-line { stroke-width: 1.5; }
body.landing .is-inside .in-key:hover .dome-pod, body.landing .is-inside .in-key.lit .dome-pod, body.landing .is-inside .in-key:focus-visible .dome-pod { stroke-width: 7; }
/* the pop-up a desk opens on the hand alone (inside.js, 'hover'): no backdrop, over the drawing and under the header, fading in */
body.landing .is-inside dialog.dome-popup.is-hover[open] { z-index: 35; animation: in-pop .22s ease-out both; }
@keyframes in-pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  body.landing .is-inside .in-pic, body.landing .is-inside .in-tag, body.landing .is-inside .in-tag rect, body.landing .is-inside .in-tag text { transition: none; }
  body.landing .is-inside .in-sweep.lit { animation: none; }
  body.landing .is-inside dialog.dome-popup.is-hover[open] { animation: none; }
}
/* a phone, or a short screen: the whole picture edge to edge (inside.js, VIEW_PHONE), the two keys in front of the
   habitat under its ground line, drawn larger under the thumb — and the names off the picture (the modules are tapped
   and the pop-up names them) */
@media (max-width: 760px), (max-height: 520px) {
  body.landing .is-inside .dome-screen { display: block; margin: 0; }
  body.landing .is-inside .in-aside { display: none; }                                            /* the drawing alone: a module is tapped, and the pop-up opens under the drawing */
  body.landing:not(.inner) .hab-card .is-inside .dome-stage, body.landing .is-inside .dome-stage { width: 100%; height: auto; aspect-ratio: 1536 / 1024; max-height: min(calc(100vh - 160px), 74cqw); }
  body.landing .is-inside .dome-svg.inside-svg { overflow: hidden; }                              /* nothing of the drawing past the screen's edges */
  body.landing .is-inside .dome-hex-body, body.landing .is-inside .dome-hex:hover .dome-hex-body, body.landing .is-inside .dome-hex.lit .dome-hex-body { transform: none; }   /* the keys are drawn larger by the script (inside.js, PHONE_KEY), not by the stylesheet as the dome's were */
  body.landing .is-inside .in-tag { display: none; }
}

/* ---- Today's Mission, in larger type than the dashboard's other panels: the sheet is read across the room */
body.landing .mission-today .dpanel-title h3 { font-size: 24px; }
body.landing .mission-no, body.landing .mission-k { font-size: 14px; }
body.landing .mission-title { font-size: clamp(32px, 3.1vw, 46px); }
body.landing .mission-q { font-size: 21px; line-height: 1.45; }
body.landing .mission-part h4 { font-size: 14.5px; }
body.landing .mission-part p, body.landing .mission-part li { font-size: 18px; line-height: 1.5; }
body.landing .mission-part .mission-sub { font-size: 13.5px; }
body.landing .mission-cq { font-size: 22px; }
body.landing .mission-cq.is-de { font-size: 17px; }
@media (max-width: 760px) {
  body.landing .mission-title { font-size: 30px; }
  body.landing .mission-q { font-size: 19px; }
  body.landing .mission-part p, body.landing .mission-part li { font-size: 17px; }
  body.landing .mission-cq { font-size: 20px; }
}

/* ---- the chat's heading: its name large and bold, a short orange rule, and its welcome under it */
body.landing .sheet-p4 { margin: 72px 0 0; }
body.landing .part-head { display: grid; justify-items: start; gap: 12px; padding: 0 4px 24px; }
body.landing .part-title { margin: 0; font-family: var(--display); font-size: 34px; line-height: 1.04; font-weight: 600; letter-spacing: -.028em; color: var(--ink); text-wrap: balance; }
body.landing .part-rule { display: block; width: 56px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--mars), rgba(255,90,31,.2)); }
body.landing .part-lead { margin: 6px 0 0; max-width: 64ch; font-size: var(--fs-read); line-height: 1.62; color: var(--dim); text-wrap: pretty; }
/* How it works: — the small line between the welcome and the three steps; a link in a step's words; the project's name
   at the head of the note's lead, a link to its page at ZKM */
body.landing .steps-how { margin: 22px 0 -4px; font-family: var(--display); font-size: var(--fs-label); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mars-ink); }
body.landing .step-link { color: var(--cobalt); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
body.landing .step-link:hover { color: var(--ink); }
/* a line across the page sets the chat apart from the note */
body.landing .sheet-p4::before { content: ""; display: block; height: 1px; margin: 0 0 40px; background: linear-gradient(90deg, transparent, var(--hair) 12%, var(--hair) 88%, transparent); }

/* ---- the world's slowest chat: the three steps of a message on one card of glass — each step's sign in a small tinted
   disc in its own colour (Earth's blue, the crossing's violet red, Mars orange), a dashed thread on to the next; the
   visitor's words and the crew's answer as bubbles; the signal crossing from Earth to Mars in the time the station takes
   to carry a message across (public/sky.js moves it) */
body.landing .steps { margin: 8px 0 0; padding: 28px 20px 6px; list-style: none; }
body.landing .step { --c: #2f45e8; --c-soft: rgba(47,69,232,.12); --c-edge: rgba(47,69,232,.4); --c-halo: rgba(47,69,232,.06); --c-glow: rgba(47,69,232,.62);
  position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; padding: 0 0 30px; }
body.landing .step.s-transit { --c: #b24f8f; --c-soft: rgba(178,79,143,.12); --c-edge: rgba(178,79,143,.4); --c-halo: rgba(178,79,143,.06); --c-glow: rgba(178,79,143,.62); }
body.landing .step.s-down { --c: #e5501a; --c-soft: rgba(255,90,31,.12); --c-edge: rgba(255,90,31,.42); --c-halo: rgba(255,90,31,.06); --c-glow: rgba(255,90,31,.62); }
:root[data-theme="dark"] body.landing .step { --c: #93a0ff; --c-soft: rgba(147,160,255,.14); --c-edge: rgba(147,160,255,.42); --c-halo: rgba(147,160,255,.07); --c-glow: rgba(0,0,0,.7); }
:root[data-theme="dark"] body.landing .step.s-transit { --c: #e38bc4; --c-soft: rgba(227,139,196,.14); --c-edge: rgba(227,139,196,.42); --c-halo: rgba(227,139,196,.07); }
:root[data-theme="dark"] body.landing .step.s-down { --c: #ff7a45; --c-soft: rgba(255,122,69,.14); --c-edge: rgba(255,122,69,.42); --c-halo: rgba(255,122,69,.07); }
body.landing .step-k { display: contents; }
body.landing .step-ic { grid-column: 1; grid-row: 1 / span 2; align-self: start; display: grid; place-items: center; width: 44px; height: 44px; box-sizing: border-box; border-radius: 50%;
  color: var(--c); border: 1px solid var(--c-edge); background: radial-gradient(circle at 35% 30%, var(--tile), var(--c-soft));
  box-shadow: 0 10px 22px -12px var(--c-glow), 0 0 0 5px var(--c-halo); }
body.landing .step-ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
body.landing .step-l { grid-column: 2; align-self: center; min-height: 44px; display: flex; align-items: center; gap: 10px;
  font-family: var(--display); font-size: var(--fs-label); line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--c); }
body.landing .step-l b { font-weight: 700; }
body.landing .step:not(:last-child)::before { content: ""; position: absolute; left: 21px; top: 58px; bottom: 10px; width: 1.5px;
  background-image: linear-gradient(var(--c) 50%, transparent 0); background-size: 1.5px 6px; opacity: .5; }
body.landing .step-body { grid-column: 2; min-width: 0; }
body.landing .step-body h3 { margin: 4px 0 0; font-family: var(--display); font-size: 21px; line-height: 1.22; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
body.landing .step-body p { margin: 12px 0 0; font-size: var(--fs-read); line-height: 1.62; color: var(--dim); text-wrap: pretty; }
body.landing .step-body p b { font-weight: 600; color: var(--ink); }
/* the message's second way — into space by radio — as a line of its own under the queue */
body.landing .step-body .step-space { display: block; margin-top: 8px; }
body.landing .step-card { margin: 14px 0 0; padding: 11px 15px 13px; border: 1px solid var(--hair); border-radius: 18px 18px 18px 5px; background: var(--tile);
  font-family: var(--display); font-size: 17px; line-height: 1.38; color: var(--ink); box-shadow: 0 10px 24px -18px rgba(15,21,64,.35); }
body.landing .step-card.is-crew { border-radius: 18px 18px 5px 18px; border-color: rgba(255,90,31,.32); background: #fff6f1; }
:root[data-theme="dark"] body.landing .step-card { box-shadow: none; }
:root[data-theme="dark"] body.landing .step-card.is-crew { background: #2e221d; border-color: rgba(255,122,69,.34); }
body.landing .step-who { display: block; margin: 0 0 5px; font-family: var(--display); font-size: var(--fs-tag); line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--cobalt); }
body.landing .step-card.is-crew .step-who { color: var(--mars-ink); }
body.landing .step-body .step-flag { margin: 6px 0 0; font-family: var(--display); font-size: var(--fs-label); line-height: 1.35; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: var(--mars-ink); }
body.landing .steps .transit { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 0; font-family: var(--display); font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; font-weight: 500; white-space: nowrap; }
body.landing .steps .transit-earth { color: var(--cobalt); }
body.landing .steps .transit-mars { color: var(--mars-ink); }
body.landing .steps .transit-track { position: relative; flex: 1 1 auto; max-width: 200px; min-width: 60px; height: 1.5px; background-image: linear-gradient(90deg, var(--c) 50%, transparent 0); background-size: 6px 1.5px; }
body.landing .steps .transit-track i { position: absolute; top: -3px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px 2px var(--c-soft); animation: step-hop 12s linear infinite; will-change: transform; }
html.transit-js body.landing .steps .transit-track i { animation: none !important; }                /* the page moves it (public/sky.js) */
/* the way the signal has come, lit from Earth's blue to the crossing's colour behind the dot */
html.transit-js body.landing .steps .transit-track::before { content: ""; position: absolute; left: 0; top: -.5px; width: calc(var(--p, 0) * (100% - 7px) + 3px); height: 2.5px;
  border-radius: 2px; background: linear-gradient(90deg, rgba(47,69,232,.1), var(--c)); opacity: .9; pointer-events: none; }
:root[data-theme="dark"].transit-js body.landing .steps .transit-track::before { background: linear-gradient(90deg, rgba(147,160,255,.1), var(--c)); }
body.landing .step-body .transit-meta { margin: 8px 0 0; font-family: var(--display); font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
/* the door to the composer at the end, where the page has no portal of its own (a phone held upright): the orange key */
body.landing .p4-cta { margin: 0; padding: 30px 0 0; }
body.landing .sheet-cta { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; min-height: 58px; padding: 0 28px; box-sizing: border-box; border: 0; border-radius: 999px;
  background: linear-gradient(180deg, #ff8a3d, #ff5a1f); color: #0f1540; font-family: var(--display); font-size: 13px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
  box-shadow: 0 18px 40px -14px rgba(255,70,0,.75), 0 1px 0 rgba(255,255,255,.55) inset; transition: transform .15s ease, box-shadow .15s ease; }
body.landing .sheet-cta:hover { transform: translateY(-1px); color: #0f1540; box-shadow: 0 22px 44px -14px rgba(255,70,0,.85), 0 1px 0 rgba(255,255,255,.55) inset; }
:root[data-theme="dark"] body.landing .sheet-cta, :root[data-theme="dark"] body.landing .sheet-cta:hover { color: #1a0a02; }
body.landing .sheet-cta span[aria-hidden] { font-size: 16px; letter-spacing: 0; }

/* ====================================================================== the station's own surfaces */
/* the composer as the device it was drawn as: the orange light at its top left (it pulses while a message crosses), the
   ribbed grip at the middle of its top edge, the vents at its top right (station.css draws them; the soft knob beside
   them, a grey blur that read as a smudge, is gone — 8 October) */
body.landing .dev-led, body.landing .dev-grip, body.landing .dev-vents { display: block; }
body.landing .composer-device { padding-top: 70px; }
@media (max-width: 760px), (max-height: 520px) {
  body.landing .composer-device { padding-top: 56px; }
  body.landing .dev-led { left: 22px; top: 20px; }
  body.landing .dev-vents { right: 22px; top: 16px; width: 36px; height: 24px; }
  /* the pop-up on the messages page: the cross that closes it keeps the top right corner; the vents step in beside it */
  html.js body.landing.messages .dev-vents { right: 62px; }
  body.landing.messages .composer-device { padding-top: 52px; }
}
/* the composer's pop-up on every page (aura.css, the composer's pop-up) is a plain window: no light, grip or vents
   — its title and its cross at the top, the rule of Mars along its top edge. On a phone the Write page's dock keeps the
   device's light and vents, as it was drawn. */
body.landing .portal-pop .dev-led, body.landing .portal-pop .dev-grip, body.landing .portal-pop .dev-vents { display: none; }
body.landing .portal-pop .composer-device { padding-top: 24px; }
@media (max-width: 760px) and (min-height: 521px) {
  body.landing.messages .portal-pop .dev-led, body.landing.messages .portal-pop .dev-vents { display: block; }
  body.landing.messages .portal-pop .composer-device { padding-top: 52px; }
}
/* the cloud gallery on the narrowest phones: a column never wider than the room it has */
body.landing .cloud-grid { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
/* the Media page: the pictures day by day — each day under its head (the sol in Mars, the day written out, today marked,
   how many), its pictures in a grid of rounded tiles lifted off the glass, the time each was taken under it */
body.landing .cloud-days { display: grid; gap: 34px; margin-top: 22px; }
body.landing .cloud-day { transition: opacity .28s ease; }
body.landing .cloud-day.is-arriving, body.landing .cloud-day.is-leaving { opacity: 0; }
body.landing .cloud-day-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 14px; padding: 0 0 12px; border-bottom: 1px solid var(--hair); }
body.landing.inner .cloud-day-head .cs { font-family: var(--display); font-size: var(--fs-label); font-weight: 600; letter-spacing: .12em; color: var(--mars-ink); }
body.landing .cloud-day-date { margin: 0; font-family: var(--display); font-size: 19px; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; color: var(--ink); text-transform: none; }
body.landing .cloud-day-now { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--mars);
  font-family: var(--display); font-size: var(--fs-tag); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mars-ink); }
body.landing.inner .cloud-day-head .count { margin-left: auto; font-family: var(--display); font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
body.landing .cloud-days .cloud-grid { grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 16px; }
body.landing .cloud-days .mtile { border-radius: 16px; background: var(--tile); border: 1px solid rgba(var(--cobalt-rgb),.12); box-shadow: 0 14px 30px -20px rgba(15,21,64,.5); }
:root[data-theme="dark"] body.landing .cloud-days .mtile { border-color: rgba(255,255,255,.08); box-shadow: 0 14px 30px -20px rgba(0,0,0,.8); }
body.landing .cloud-days .mtile:hover { transform: translateY(-2px); box-shadow: 0 20px 36px -20px rgba(15,21,64,.6); }
body.landing .cloud-days .mtile-stamp { padding: 8px 12px 10px; }
body.landing .cloud-days .mtile-when { font-size: var(--fs-label); letter-spacing: .08em; color: var(--dim); }
@media (max-width: 760px), (max-height: 520px) {
  body.landing .cloud-days { gap: 30px; margin-top: 18px; }
  body.landing .cloud-days .cloud-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.landing .cloud-days .mtile { border-radius: 14px; }
  body.landing .cloud-days .mtile-stamp { padding: 7px 10px 8px; }
  body.landing .cloud-day-date { font-size: 17px; }
}
@media (max-width: 760px) and (min-height: 521px) {
  body.landing.inner .cloud-gallery { padding: 20px 16px 22px; }
}
/* the small print of the station's own panels — a panel's channel, a table's heads, a list's names, the states of a
   message, a dashboard panel's code — at the type floor, never under it (station.css drew some at 8 px) */
body.landing :is(.panel > .chan, .kv dt, th, .pipe > div) { font-size: var(--fs-tag); }
body.landing.inner :is(.card-top, .card-top .cs, .card-top .card-day, .eyebrow, .eyebrow .brk, .glance-n, .badge, .spec > span,
  .gt-label, .gt-range, .gc-note, .gc-head span, .card-reply .who, .card-reply-meta, .log-day-head, .log-day-head span) { font-size: var(--fs-label); }
body.landing.inner :is(.logpage-strip i, .logpage-strip span) { font-size: var(--fs-tag); }
body.landing :is(.sky-when, .seq-fig) { font-size: var(--fs-tag); }
body.landing .round-unit { font-size: 8px; }                                           /* drawn in a gauge's own units: 12 px and more on the page (10 until 14 October — aura.css, the count smaller) */
body.landing.inner .gt-value em { font-size: var(--fs-tag); }
@media (max-width: 760px), (max-height: 520px) {
  body.landing .run-n, body.landing .run-strip .run-n, body.landing .portal-head .dash-clock-label,
  body.landing.inner .logpage-strip i, body.landing.inner .logpage-strip span { font-size: var(--fs-tag); }
}

/* ====================================================================== the foot: one for the dark, one for the light */
/* by night a card of deep night blue lit in the dome's own colours — ultramarine rising at its left foot, a violet light
   at its right, a breath of pale sky at the top left — the words in white, the keys outlined in white; by day a pane of
   light glass going over from white into a pale sky blue, a soft cobalt light at its left foot, the words in ink and the
   keys drawn in cobalt. Mars orange is kept for the wordmark's own mark, nowhere else on the card. */
body.landing .foot {
  background:
    radial-gradient(ellipse 560px 300px at 60px 100%, rgba(63,88,255,.78) 0, rgba(63,88,255,.32) 46%, rgba(63,88,255,0) 100%),
    radial-gradient(ellipse 460px 280px at calc(100% - 120px) 40%, rgba(150,52,224,.55) 0, rgba(150,52,224,0) 100%),
    radial-gradient(ellipse 380px 200px at 18% 0%, rgba(150,214,255,.16) 0, rgba(150,214,255,0) 100%),
    #0c0f1d;
  color: #fff; box-shadow: 0 50px 80px -40px rgba(4,6,20,.9);
}
body.landing .foot .foot-base, body.landing .foot .foot-brand, body.landing .foot .foot-base span:last-child { color: rgba(255,255,255,.78); }
:root[data-theme="light"] body.landing .foot {
  background:
    radial-gradient(ellipse 560px 300px at 50px 100%, rgba(47,69,232,.26) 0, rgba(47,69,232,.1) 48%, rgba(47,69,232,0) 100%),
    radial-gradient(ellipse 420px 240px at calc(100% - 120px) 30%, rgba(150,52,224,.1) 0, rgba(150,52,224,0) 100%),
    linear-gradient(150deg, rgba(255,255,255,.96) 0%, rgba(245,247,255,.94) 50%, rgba(226,232,255,.94) 100%);
  -webkit-backdrop-filter: blur(26px) saturate(1.35); backdrop-filter: blur(26px) saturate(1.35);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); color: var(--ink);
}
:root[data-theme="light"] body.landing .foot-wordmark { color: var(--ink); }
:root[data-theme="light"] body.landing .foot .foot-links a { color: var(--cobalt); border-color: rgba(var(--cobalt-rgb),.45); background: rgba(255,255,255,.6); }
:root[data-theme="light"] body.landing .foot .foot-links a:hover { color: var(--ink); background: #fff; }
:root[data-theme="light"] body.landing .foot .foot-base, :root[data-theme="light"] body.landing .foot .foot-brand,
:root[data-theme="light"] body.landing .foot .foot-base span:last-child { color: var(--dim); }
@media (max-width: 760px) and (min-height: 521px) {
  body.landing .foot {
    background:
      radial-gradient(ellipse 300px 160px at 30px 100%, rgba(63,88,255,.8) 0, rgba(63,88,255,.3) 55%, rgba(63,88,255,0) 100%),
      radial-gradient(ellipse 260px 150px at calc(100% - 60px) 55%, rgba(150,52,224,.5) 0, rgba(150,52,224,0) 100%),
      #0c0f1d; }
  :root[data-theme="light"] body.landing .foot {
    background:
      radial-gradient(ellipse 300px 170px at 20px 100%, rgba(47,69,232,.24) 0, rgba(47,69,232,.09) 55%, rgba(47,69,232,0) 100%),
      linear-gradient(150deg, #ffffff 0%, #f5f7ff 55%, #e2e8ff 100%); }
}

/* the foot on a phone in French: the privacy key's name is long — the keys go under the name, in a row, rather than
   beside it, so the name keeps its room */
@media (max-width: 760px), (max-height: 520px) {
  html[lang="fr"] body.landing .foot { grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "base" "keys"; row-gap: 10px; }
  html[lang="fr"] body.landing .foot .foot-links { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; margin-top: 6px; }
}

/* ====================================================================== the cookie card */
/* its strip of night: the stars drifting and a dashed orbit — nobody in it, and no word (12 October: Incoming
   transmission went); a thin strip now the card is a small one at the foot of the window */
body.landing .consent-sky { height: 64px; }
body.landing .consent-orbit { width: 240px; height: 40px; margin: -20px 0 0 -120px; }
@media (max-width: 760px) and (min-height: 521px) {
  body.landing .consent-sky { height: 56px; }
  body.landing .consent-orbit { width: 220px; height: 34px; margin: -17px 0 0 -110px; }
}

/* ====================================================================== the paper by day */
/* by day the page is near-white: the only grey on it is the habitat's sheet (the reference's grey); the grid and the
   lights stay on it, and the cards of glass keep a hairline so they still stand off the page */
:root[data-theme="light"] { --paper: #f6f7f8; --ground-2: #eceef1; }
:root[data-theme="light"] body.landing .steps { border-color: rgba(15,21,64,.07); }

/* ====================================================================== a wider screen */
@media (min-width: 761px) and (min-height: 521px) {
  /* P00 is the first screen: a low band across its top — the station's name large in its top left corner, the line and
     the run beside it on its baseline — then the room — the Earth, the line, the habitat far above, the sky's pictures
     and exchanges around them — down to the window's foot; P01, the habitat, is a window tall too, its dome kept to a
     moderate size so the sheet around and above it has room */
  /* the first page in two columns: the words at the left, the room at the right (October) — the room the window's
     height under the ticker, the words standing in the middle of its height */
  body.landing .space { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: minmax(0, 1fr); column-gap: clamp(32px, 4vw, 72px); align-items: stretch;
    height: max(660px, calc(100vh - 113px)); padding: 0 0 12px; box-sizing: border-box; }
  /* the room as a phone has it, only wider: the Earth in the middle of the foot, its horizon curving away either side;
     the habitat above it at the top, kept small — a quarter of the window's height at most — so the room between the
     two is deep; the dashed line straight down from the habitat's foot onto the limb, the signal up it and the answer
     down (the trajectory, the desk's arc of an earlier layout, stays off: public/sky.js keeps the sky's items either
     side of the line, as on a phone) */
  body.landing .space-room { margin-top: 12px; min-height: 0; --dome-w: clamp(170px, 22vh, 250px); --dome-top: 10px; --earth-k: 1.18; --earth-arc: min(clamp(100px, 14vh, 150px), calc(var(--earth-k) * 18cqw)); }
  body.landing .sheet-p1 { height: max(660px, calc(100vh - 113px)); padding: 0 20px 48px; box-sizing: border-box; }   /* the ground line clear of the window's foot */
  /* the words: the eyebrow, MARS!platz large with Ground Station under it, the paragraph, the run */
  body.landing .sheet-intro { align-self: center; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 12px 0 24px; }
  body.landing .sheet-intro .wordmark { font-size: clamp(44px, 4.4vw, 68px); }   /* MARS!platz, the page's one heading */
  body.landing .sheet-intro .intro-text { font-size: clamp(16px, 1.25vw, 19px); }
  body.landing .sheet-intro .run-dates { max-width: none; text-align: left; white-space: normal; text-wrap: balance; }
  body.landing:not(.inner) .dome-panel { flex: 1 1 auto; margin-top: 10px; }
  body.landing:not(.inner) .dome-stage { flex: 0 0 auto; height: clamp(220px, 36vh, 400px); max-height: 50cqw; min-height: 0; }
  body.landing .dome-panel.has-line { --foot-h: 64px; padding-bottom: 0; }
  body.landing .dome-foot { padding: 0 20px; }
  body.landing .dome-foot::before { left: -20px; right: -20px; }                     /* the ground line out to the frame's corners */
  body.landing .hab-line-text { font-size: 20px; line-height: 1.3; }
  /* the pages after it are each about a window tall, their cards in the middle, with air around them */
  body.landing .sheet-p2, body.landing .sheet-p4 { min-height: calc(100vh - 113px); box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; margin: 0; padding: clamp(40px, 6vh, 88px) 0; }
  body.landing .sheet-p4::before { position: absolute; left: 0; right: 0; top: 0; margin: 0; }
  /* the chat's heading, larger */
  body.landing .part-head { gap: 14px; padding: 0 4px 28px; }
  body.landing .part-title { font-size: clamp(38px, 3.6vw, 58px); }
  body.landing .part-lead { font-size: clamp(17px, 1.3vw, 20px); }
  /* the chat's heading and welcome, then the three steps in a row on one card, the thread running from each sign to
     the next; the portal follows, so no door */
  body.landing .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 52px; margin-top: 8px; padding: 40px 44px 44px; }
  body.landing .step { display: flex; flex-direction: column; padding: 0; }
  body.landing .step-k { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
  body.landing .step-ic { width: 56px; height: 56px; box-shadow: 0 14px 28px -14px var(--c-glow), 0 0 0 7px var(--c-halo); }
  body.landing .step-ic svg { width: 26px; height: 26px; }
  body.landing .step-l { align-self: flex-start; min-height: 0; }
  body.landing .step:not(:last-child)::before { left: 76px; right: -36px; top: 28px; bottom: auto; width: auto; height: 1.5px;
    background-image: linear-gradient(90deg, var(--c) 50%, transparent 0); background-size: 7px 1.5px; opacity: .55; }
  body.landing .step-body h3 { margin-top: 12px; font-size: 23px; }
  body.landing .p4-cta { display: none; }
  /* the foot: the dark card (or the light pane) a little taller, its keys at its top right */
  body.landing .foot { min-height: 280px; }
}
/* a narrower desk: the name's band in one column, the note in one column, the steps as a column on their card as a
   phone has them */
@media (min-width: 761px) and (max-width: 1100px) and (min-height: 521px) {
  body.landing .space { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 28px; }   /* a narrower desk: the words a little wider against the room */
  body.landing .sheet-intro .wordmark { font-size: clamp(38px, 4.6vw, 48px); }
  body.landing .sheet-intro .intro-text { font-size: 15.5px; }
  body.landing .steps { grid-template-columns: minmax(0, 1fr); row-gap: 0; padding: 36px 36px 10px; }
  body.landing .step { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 20px; padding: 0 0 34px; }
  body.landing .step-k { display: contents; }
  body.landing .step-l { align-self: center; min-height: 56px; }
  body.landing .step:not(:last-child)::before { left: 27px; right: auto; top: 72px; bottom: 10px; width: 1.5px; height: auto;
    background-image: linear-gradient(var(--c) 50%, transparent 0); background-size: 1.5px 6px; }
  body.landing .step-body h3 { margin-top: 4px; }
  body.landing .dome-foot .dome-caption { display: none; }
}
/* a desk not quite wide enough for the hint on one line beside the line: the hint in two */
@media (min-width: 1101px) and (max-width: 1320px) and (min-height: 521px) {
  body.landing .dome-foot .dome-caption { flex: 0 1 auto; max-width: 34%; white-space: normal; line-height: 1.6; }
}

/* ====================================================================== a phone */
@media (max-width: 760px), (max-height: 520px) {
  /* the habitat's foot: the ground line and the line under it; the hint is the keys themselves */
  body.landing .dome-panel.has-line { padding-bottom: 0; }
  body.landing .dome-foot .dome-caption { display: none; }
  body.landing .hab-line-text { font-size: 18px; }
}
/* a phone held upright: the landing page is a few pages, one a screen, a swipe from one to the next — the habitat, the
   name and the note, the mission, the chat — then the foot */
@media (max-width: 760px) and (min-height: 521px) {
  /* the habitat's page has a screen to itself, the width of the screen and its height between the header and the bar of
     keys: the sheet with its ruler, the name and LIVE at its head, the dome standing on its ground line at its foot (the
     first page — the way to the habitat — is laid out below, under P00). The name stands at the head of the note. */
  /* the first page: the words, then the room under them — the width of the screen and its height between the header and
     the bar of keys, a stop of the scroll of its own (the next swipe brings it whole) */
  body.landing .space { margin: 0 calc(-1 * var(--gutter)); height: auto; }
  body.landing .sheet-intro { padding: 22px var(--gutter) 24px; }
  body.landing .sheet-intro .intro-eyebrow { margin-bottom: 12px; font-size: 11px; }
  body.landing .sheet-intro .wordmark { font-size: 44px; }
  body.landing .sheet-intro .intro-text { margin-top: 16px; font-size: 16px; line-height: 1.5; }
  body.landing .sheet-intro .run-dates { margin-top: 16px; line-height: 1.6; }
  body.landing .sheet-intro .intro-cta { margin-top: 18px; }
  body.landing .sheet-intro .know-more { min-height: 44px; padding: 0 20px 0 22px; font-size: 15px; }
  body.landing .space-room { flex: none; height: max(440px, calc(100vh - 149px)); height: max(440px, calc(100svh - 149px - env(safe-area-inset-bottom, 0px)));
    --dome-w: 150px; --dome-top: 12px; --earth-k: 1.08; --earth-arc: min(74px, calc(var(--earth-k) * 18cqw)); border-radius: 0; }   /* the picture a little wider than the screen: its foot reaches the room's, the limb 74 px up */
  body.landing:not(.inner) .space-room { scroll-snap-align: start; scroll-snap-stop: always; }
  body.landing .space-halo.is-desk { display: none; }
  body.landing .space-halo.is-phone { display: block; }
  body.landing .space-halo circle { stroke-width: 2px; }
  body.landing .space .sky-text { font-size: 14px; line-height: 1.25; }
  body.landing .space .sky-who { font-size: 10px; letter-spacing: .05em; }   /* the line in a narrow lane: the word and the callsign */
  body.landing .space .sky-msg { padding: 8px 10px 9px; }
  body.landing .space .dome-nudge { bottom: 8px; margin-left: -23px; }
  body.landing .space-room { --tag-h: 44px; }
  body.landing .space-tag-dome { gap: 5px; font-size: 12.5px; }
  :root body.landing:not(.inner) .dome-panel { order: 1; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 56px; box-sizing: border-box; display: flex; flex-direction: column;
    height: max(440px, calc(100vh - 149px)); height: max(440px, calc(100svh - 149px - env(safe-area-inset-bottom, 0px))); }   /* the dome's ground clear of the bar of keys */
  body.landing:not(.inner) .dome-head { display: none; }
  body.landing:not(.inner) .dome-screen { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 25px; }
  body.landing:not(.inner) .dome-stage { flex: none; }
  body.landing .dome-panel.has-line { --foot-h: 60px; }
  body.landing .dome-foot { margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
  /* the nudge in one row — the words and the arrow side by side — set high on the floor, clear of the Write key's disc
     rising over the bar of keys beneath */
  body.landing .dome-foot { align-items: flex-start; padding-top: 6px; }
  body.landing .dome-nudge { padding: 2px 10px; }
  body.landing .dome-nudge svg { width: 26px; height: 26px; }
  @keyframes dome-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
  body.landing .dome-foot::before { left: var(--gutter); right: var(--gutter); }
  /* a part's pop-up opens over the dome, in its sky (dome.js), fading in */
  body.landing dialog.dome-popup[open] { animation: dome-in .3s ease-out both; }
  @keyframes dome-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
  /* the second and third pages fill the screen between the header and the bar of keys — with the browser's own bars
     folded away, as they are once the page is scrolled (lvh) — what is on them in its middle: the next page never peeks
     in under them */
  body.landing .sheet-p2 { box-sizing: border-box; display: flex; flex-direction: column; justify-content: center;
    min-height: calc(100vh - 149px); min-height: calc(100lvh - 149px - env(safe-area-inset-bottom, 0px)); }
  /* the second page: the note, then the two calls — with room around them (the station's name stands on the first page);
     a gap over it, so that where it stops under the header the room before it — its foot and its shadow — has gone up
     behind the header whole, no edge of it showing under the ticker (8 October: no shadow showing where it should not) */
  body.landing .sheet-p2 { margin: 34px 0 0; padding: 28px 0 48px; }
  /* the chat: a page of its own */
  body.landing .sheet-p4 { margin: 0; padding: 30px 0 12px; }
  body.landing .part-head { gap: 8px; padding: 0 4px 14px; }
  body.landing .part-title { font-size: 30px; }
  body.landing .sheet-p4::before { margin: -30px 0 30px; }
  /* a screen too short for a page as it is drawn above (public/sky.js marks it snug): the same page set a little closer,
     so that it still fits — the gaps and the photographs smaller, the type a step down */
  body.landing .sheet-p2.is-snug { padding: 16px 0 46px; }   /* (its foot as wide as ever: the last card's shadow behind the header where the chat stops) */
  body.landing .sheet-p2.is-snug .sheet-meta.is-ruled { padding-bottom: 12px; }
  /* the pages of the scroll: a swipe goes to the next; a page taller than the screen (public/sky.js marks it) stops at
     each of its parts too — the note, the card of steps and each step after the first — so nothing on it is passed
     over; the foot ends the scroll. While a pop-up is open the page stays where it is. */
  html:has(body.landing:not(.inner)) { scroll-snap-type: y mandatory; scroll-padding-top: 83px; scroll-padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  html:has(body.landing:not(.inner) dialog[open]) { scroll-snap-type: none; }
  body.landing:not(.inner) [data-page] { scroll-snap-align: start; scroll-snap-stop: always; }
  body.landing:not(.inner) [data-page].is-tall :is(.call, .steps, .step + .step) { scroll-snap-align: start; }
  body.landing:not(.inner) [data-page].is-tall :is(.call, .steps, .step).no-stop { scroll-snap-align: none; }   /* too near the next stop (sky.js) */
  body.landing:not(.inner) .foot { scroll-snap-align: end; content-visibility: visible; margin-top: 84px; }   /* laid out from the start (aura.css
     leaves it for later on a phone): the end of the scroll stays where it is; far enough under the last step that its
     light stays behind the bar of keys while the step is read */
  body.landing.messages .composer-device { padding-top: 52px; }
}
@media (max-width: 360px) {
  body.landing .steps { padding: 24px 16px 4px; }
  body.landing .step { column-gap: 14px; }
  body.landing .part-title { font-size: 28px; }
}
/* a phone held sideways: the pages under one another, the first page and the habitat no taller than the screen */
@media (max-height: 520px) {
  body.landing .space { height: auto; min-height: max(400px, calc(100vh - 90px)); }
  body.landing .space-room { --dome-w: 130px; --dome-top: 8px; --earth-k: 1.1; --earth-arc: min(60px, calc(var(--earth-k) * 18cqw)); min-height: 380px; }
  body.landing .sheet-p2 { margin-top: 44px; }
  body.landing .sheet-p4 { margin-top: 52px; }
}

/* ====================================================================== the crew, over the two calls (landing.js, crewNow) */
/* Current Crew on the second page, over the two calls (12 October: "add the current crew images on the landing page …
   place it above these two boxes"): a card as wide as the two calls under it — over its title the line that says whose
   crew it is (the first day's before the run, the shift's during it), then the three roles, each with the photograph of
   the astronaut in it in a round frame and their name under the role; the robot dog's picture for someone the station
   has no portrait of (sol.js, crewList — the About page's Current Crew). On a phone (here) the card as narrow as the calls
   under it, its words over the three, one under the other; on a desk (below) the three across, the words over them, and
   on a wide desk the words at the card's left. */
body.landing .land-crew { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; box-sizing: border-box; width: 100%; max-width: 340px; margin: 0 auto 16px; padding: 14px 18px 16px;
  background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); border-radius: var(--r-lg); color: var(--ink); }
body.landing .land-crew-head { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; }
body.landing .land-crew-k { font-family: var(--display); font-size: 10.5px; font-weight: 600; line-height: 1.35; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
body.landing .land-crew-title { margin: 0; font-family: var(--display); font-size: 20px; line-height: 1.1; font-weight: 600; letter-spacing: -.022em; color: var(--ink); text-wrap: balance; }
body.landing .land-crew-when { margin: 0; font-size: 13px; line-height: 1.35; color: var(--dim); text-wrap: balance; }
body.landing .land-crew .crew-now-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; justify-self: center; }
body.landing .land-crew .crew-now-officer { display: flex; align-items: center; gap: 14px; min-width: 0; }
body.landing .land-crew .crew-now-officer img { flex: none; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: #101012;   /* a close-up cut round the face (public/crew/face) */
  box-shadow: 0 0 0 2px var(--neu-1, var(--paper)), 0 0 0 3px rgba(var(--cobalt-rgb), .35); }
body.landing .land-crew .sol-officer-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.landing .land-crew .sol-officer-who b { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
body.landing .land-crew .sol-officer-who span { font-family: var(--display); font-size: 16px; line-height: 1.2; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
body.landing .land-crew .crew-now-officer.is-open .sol-officer-who span { color: var(--faint); font-weight: 500; }   /* a role the plan names nobody in */
body.landing .land-crew .sol-officer-who .nb { white-space: nowrap; }                                              /* a surname whole: Matthieu / Vlaminck-Maurer */
/* (on a desk the card's sizes follow the window's height, as the calls' under it do — so that the crew and the two calls
   stand in one window together: below, *the second page on a desk*; 12 October: "increase the height of the Current
   Crew tab" — the photographs, the type and the air round them a size up, the card some 40 % taller: 87 → 122 px in a
   laptop's 1366 × 657, 128 → 180 in 1920 × 969; then "make the tile of the current crew a bit bigger" — another size up,
   143 px and 210 px — the calls still in the window) */
@media (min-width: 761px) and (min-height: 521px) {
  body.landing .land-crew { max-width: none; margin: 0 0 clamp(12px, 2.4vh, 30px); padding: clamp(22px, 4vh, 44px) clamp(26px, 2.6vw, 46px); gap: clamp(12px, 2vh, 22px) 48px; }
  body.landing .land-crew-head { align-items: flex-start; gap: 6px; text-align: left; }
  body.landing .land-crew-k { font-size: clamp(11px, 1.3vh, 12px); }
  body.landing .land-crew-title { font-size: clamp(24px, 3.7vh, 38px); }
  body.landing .land-crew-when { font-size: 14.5px; }
  body.landing .land-crew .crew-now-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; justify-self: stretch; }
  body.landing .land-crew .crew-now-officer { gap: 20px; }
  body.landing .land-crew .crew-now-officer img { width: clamp(72px, 13.5vh, 140px); height: clamp(72px, 13.5vh, 140px); box-shadow: 0 0 0 3px var(--neu-1, var(--paper)), 0 0 0 4px rgba(var(--cobalt-rgb), .35); }
  body.landing .land-crew .sol-officer-who { gap: 5px; flex: 1 1 0; container-type: inline-size; }
  body.landing .land-crew .sol-officer-who b { font-size: clamp(11px, 1.5vh, 13px); }
  /* the names as large as the window allows, and never wider than their column: the longest surname, kept whole
     (Vlaminck-Maurer), ran past its column into the next photograph on a laptop's 1280 to 1536 (13 October) — the cap
     is a share of the column's width (12.2cqi), the three names one size */
  body.landing .land-crew .sol-officer-who span { font-size: min(clamp(17px, min(1.55vw, 2.9vh), 27px), 12.2cqi); }
}
@media (min-width: 761px) and (max-width: 1179px) and (min-height: 521px) {
  /* (a narrower desk, the words over the three and the card the taller for it: its photographs a size smaller, so that
     the crew and the two calls still stand in one window — 1024 × 768 too) */
  body.landing .land-crew .crew-now-officer img { width: clamp(64px, 11.5vh, 120px); height: clamp(64px, 11.5vh, 120px); }
}
@media (min-width: 1180px) and (min-height: 521px) {
  body.landing .land-crew { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  body.landing .land-crew-head { max-width: 250px; }
}

/* ====================================================================== the two calls (landing.js, calls) */
/* Right after the room: two doors side by side, each a large card with a drawing across its whole width and its words
   under it, the whole card the door — SEND A MESSAGE TO THE CREW in Mars, with the thing to know, that approved messages
   are sent into space, and FOLLOW WHAT THE CREW IS DOING — LIVE in cobalt (8 October: "increase the size of the two
   boxes … text clearly readable; the visualisation should span across the width, bigger and clearer; add a
   visualisation for the Live Mission Dashboard also"). A faint grid behind each drawing. The transmitting drawing: a dish
   sending at the foot, its waves going out, the dashed way up into space with WRITTEN and APPROVED stations on it — their
   names on the drawing's foot line — and INTO SPACE over its open end, a signal going along it again and again (SMIL).
   The live drawing: three of the habitat's instruments as the dashboard draws them — the sign, the name, the figure (the
   habitat's latest reading), the meter lit in cobalt, its last lit cell breathing — and the radar of the astronauts, its
   sweep going round, the crew's dots wandering (aura.css, live.js). Where less motion is asked for the drawings stand. */
body.landing .calls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: stretch; margin: 14px 0 0; }   /* under the note on a phone, beside it on a desk (below) */
body.landing .call { --accent: var(--mars); --accent-rgb: 255,90,31; position: relative; display: flex; flex-direction: column; box-sizing: border-box; min-width: 0; padding: 22px 26px 26px; overflow: hidden; text-decoration: none; color: var(--ink);
  background: var(--glass); -webkit-backdrop-filter: blur(26px) saturate(1.35); backdrop-filter: blur(26px) saturate(1.35); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); border-radius: var(--r-lg);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
body.landing .call.call-live { --accent: var(--cobalt); --accent-rgb: var(--cobalt-rgb); }
:root[data-theme="light"] body.landing .call { border-color: rgba(15,21,64,.07); }
body.landing .call::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(62% 52% at 88% -4%, rgba(var(--accent-rgb),.2), rgba(var(--accent-rgb),0) 70%); }
/* the thing to know, set large: APPROVED MESSAGES ARE BEAMED INTO SPACE in capitals, in a gradient of Mars and light
   with a glow of Mars about the letters and a shimmer of light passing along them now and then — by day the light in
   the gradient is a pale peach (white would vanish on the white card), by night white */
body.landing .call-write .call-punch { margin: 14px 0 0; }
body.landing .call-beam { display: inline-block; max-width: 22ch; font-size: 30px; line-height: 1.1; font-weight: 800; letter-spacing: .01em; text-transform: uppercase; text-wrap: balance;
  background: linear-gradient(100deg, #ffb27f 0%, #ff6a2e 32%, #ffd9c2 50%, #ff6a2e 68%, #ffb27f 100%); background-size: 240% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: .5px rgba(190,60,10,.35);
  filter: drop-shadow(0 0 16px rgba(255,106,46,.45)) drop-shadow(0 1px 1px rgba(15,21,64,.2)); animation: call-shimmer 6s ease-in-out infinite; }
:root[data-theme="dark"] body.landing .call-beam { background-image: linear-gradient(100deg, #ffb27f 0%, #ff6a2e 32%, #fff 50%, #ff6a2e 68%, #ffb27f 100%); -webkit-text-stroke: 0;
  filter: drop-shadow(0 0 18px rgba(255,106,46,.6)) drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
@keyframes call-shimmer { 0%, 55% { background-position: 100% 0; } 85%, 100% { background-position: 0% 0; } }
body.landing .call:hover { transform: translateY(-3px); border-color: rgba(var(--accent-rgb),.5); box-shadow: 0 30px 60px -30px rgba(var(--accent-rgb),.45), var(--glass-shadow); color: var(--ink); }
body.landing .call:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* the drawing across the top (its box, call-pic, is no box at all here: a phone makes it a square, below) */
body.landing .call-pic { display: contents; }
body.landing .call-art { position: relative; z-index: 1; display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 600 / 200; overflow: visible; margin: 0 0 14px; }
body.landing .call-art text { font-family: var(--display); font-size: 15px; font-weight: 600; letter-spacing: .14em; text-anchor: middle; fill: var(--dim); }
body.landing .call-grid line { stroke: var(--ink); stroke-opacity: .07; stroke-width: 1; }
body.landing .call-dish path { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.landing .call-dish .call-dish-cup { fill: rgba(var(--cobalt-rgb),.1); }
body.landing .call-dish .call-dish-feed { fill: var(--mars); stroke: none; }
body.landing .call-waves path { fill: none; stroke: var(--mars); stroke-width: 2; stroke-linecap: round; opacity: 0; animation: call-wave 2.4s ease-out infinite; }
body.landing .call-waves path:nth-child(2) { animation-delay: .4s; }
body.landing .call-waves path:nth-child(3) { animation-delay: .8s; }
@keyframes call-wave { 0% { opacity: 0; } 25% { opacity: .9; } 100% { opacity: 0; } }
body.landing .call-way-line { fill: none; stroke: url(#call-way); stroke-width: 2; stroke-dasharray: 6 6; }
body.landing .call-stations circle { fill: var(--paper); stroke: var(--mars); stroke-width: 2.2; }
body.landing .call-stations text { fill: var(--ink); fill-opacity: .78; }
body.landing .call-drop { stroke: var(--mars); stroke-opacity: .4; stroke-width: 1.2; stroke-dasharray: 2 4; }   /* from a station down to its name on the foot line */
body.landing .call-hab text { fill: var(--mars-ink); font-weight: 700; text-anchor: end; }  /* INTO SPACE over the way's open end — nothing drawn there (October) */
body.landing .call-art .call-radar { width: 188px; height: 188px; max-width: none; overflow: visible; }   /* the dashboard's radar (aura.css, .dl-radar), larger here, alone in the middle of the live card's drawing (8 October) */
body.landing .call-sig { fill: #fff; stroke: var(--mars); stroke-width: 2; filter: drop-shadow(0 0 6px rgba(255,90,31,.85)); }
body.landing .call-sig.is-tail { fill: var(--mars); stroke: none; opacity: .55; filter: none; }
/* the live card carries no drawing: a LIVE pill on its line, its words in the middle of the card */
body.landing .call-live .call-text { justify-content: center; }
body.landing .call-livepill { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding: 3px 9px 3px 7px; border: 1px solid var(--mars); border-radius: 999px; font-size: 10.5px; letter-spacing: .16em; color: var(--mars-ink); background: rgba(255,90,31,.08); vertical-align: 1px; }
body.landing .call-livepill i { width: 6px; height: 6px; border-radius: 50%; background: var(--mars); box-shadow: 0 0 8px 2px rgba(255,90,31,.6); animation: live 1.6s ease-in-out infinite; }
/* the words */
body.landing .call-text { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1 1 auto; }   /* the words centred */
body.landing .call-k { font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
body.landing .call-live .call-k { color: var(--cobalt); }
body.landing .call-title { margin: 10px 0 0; font-family: var(--display); font-size: 30px; line-height: 1.1; font-weight: 600; letter-spacing: -.022em; color: var(--ink); text-wrap: balance; }
body.landing .call-punch { margin: 12px 0 0; font-family: var(--display); font-size: 19px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: var(--accent); text-wrap: balance; }
body.landing .call-live .call-punch { color: var(--cobalt); }
body.landing .call-body { margin: 12px 0 0; max-width: 46ch; font-size: var(--fs-read); line-height: 1.6; color: var(--dim); text-wrap: pretty; }
body.landing .call-key { display: inline-flex; align-items: center; gap: 12px; min-height: 46px; margin: 22px 0 0; padding: 0 20px 0 22px; box-sizing: border-box; border-radius: 999px; font-family: var(--display); font-size: 15.5px; font-weight: 600; letter-spacing: -.005em;
  background: var(--cobalt-fill); color: #fff; box-shadow: 0 14px 28px -14px rgba(47,69,232,.8); transition: filter .15s ease, transform .15s ease; }
body.landing .call-key span[aria-hidden] { font-size: 16px; }
body.landing .call-text .call-key { margin-top: auto; }                                   /* the key at the foot of the card, the two cards' keys level */
body.landing .call-text > :nth-last-child(2) { margin-bottom: 22px; }                      /* air between the last of the words and the key */
body.landing .call-key.is-write { background: linear-gradient(180deg, #ff8a3d, #ff5a1f); color: #0f1540; box-shadow: 0 14px 28px -14px rgba(255,70,0,.8), 0 1px 0 rgba(255,255,255,.55) inset; }
:root[data-theme="dark"] body.landing .call-key.is-write { color: #1a0a02; }
body.landing .call:hover .call-key { filter: brightness(1.08); transform: translateX(2px); }
@media (min-width: 761px) and (min-height: 521px) {
  /* the second page on a desk: the day's crew over the two calls, the calls side by side in the middle of the page (the
     note that stood at their left is gone — October asked for the box to go), each card's words under its drawing at the
     left — and the whole of it in one window (12 October: "on desktop reduce the size of these two buttons, 01 Transmit
     and 02 Live Feed, to fit all three things properly on one screen — the Current Crew, Transmit and Live Feed"): the
     drawings, the type, the key and the gaps follow the window's height — a drawing a seventh of it high, centred in its
     card's width — so that the crew and the two calls stand between the header and the window's foot from a laptop's
     650 px or so up, and a taller window shows them larger (until 12 October they were set by the width alone, 8 October:
     "increase the size of the two boxes … text clearly readable", and a laptop's window cut the second call off) */
  body.landing .sheet-p2 { padding: clamp(10px, 2.2vh, 28px) 0 clamp(12px, 2.6vh, 32px); margin-top: 34px; }   /* (the gap: the room's foot and shadow behind the header where the page stops — see the phone's) */
  body.landing .page2 { width: 100%; max-width: 1600px; margin: 0 auto; }   /* the two calls, centred, as wide as the page's column */
  body.landing .calls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; max-width: none; margin: 0; }
  body.landing .call { padding: clamp(14px, 2.4vh, 28px) clamp(22px, 2vw, 32px) clamp(16px, 2.6vh, 30px); }
  body.landing .call-text { align-items: flex-start; text-align: left; }
  body.landing .call-art { height: clamp(72px, 14.5vh, 190px); aspect-ratio: auto; margin: 0 0 clamp(8px, 1.6vh, 18px); }
  body.landing .call-k { font-size: clamp(11px, 1.45vh, 13px); }
  body.landing .call-livepill { font-size: clamp(10px, 1.3vh, 11.5px); }
  body.landing .call-title { margin-top: clamp(4px, .8vh, 10px); font-size: clamp(20px, 3.3vh, 34px); }
  body.landing .call-punch, body.landing .call-write .call-punch { margin-top: clamp(4px, .9vh, 12px); font-size: 17px; }
  body.landing .call-beam { font-size: clamp(16px, 2.7vh, 29px); max-width: 26ch; }
  body.landing .call-body { margin-top: clamp(4px, .9vh, 12px); max-width: 56ch; font-size: clamp(13.5px, 1.9vh, 17.5px); line-height: 1.5; }
  body.landing .call-text > :nth-last-child(2) { margin-bottom: clamp(10px, 2vh, 22px); }
  body.landing .call-key { min-height: clamp(36px, 5.4vh, 50px); padding: 0 20px 0 22px; font-size: clamp(14px, 1.8vh, 16px); }
}
@media (max-width: 760px) and (min-height: 521px) {
  /* the second page on a phone, the three in one screen (13 October: "the tabs with the Crew, Write to crew and Live
     should be laid out in design such that they are all in 1 page — redesign it for mobile"; until then the crew card
     and the two cards, each with its drawing across it and its long sentence, made a page and a third, and the scroll
     stopped at each): Current Crew a compact card — its title and the sol on one line, the three one under the other,
     each a small round portrait with the role over the name — and under it the two calls as rows: the drawing cut to a
     square at the left (the dish sending, its signal going out; the radar, its sweep going round and the crew's dots
     wandering), the words at its right — the call's number and name, its title, APPROVED MESSAGES ARE BEAMED INTO SPACE
     on the first — and its key under them. The cards' long sentences stay off here: the Write page and the dashboard
     say it all. The sizes follow the screen's height, so a tall phone shows them larger and a small one (375 × 667)
     still holds the three between the header and the bar of keys. */
  body.landing .sheet-p2 { padding: 12px 0 28px; }
  body.landing .sheet-p2.is-snug { padding: 6px 0 22px; }   /* a screen still too short for it (sky.js): the air round it the less */
  body.landing .page2 { display: flex; flex-direction: column; gap: clamp(8px, 1.6vh, 16px); width: 100%; max-width: 440px; margin: 0 auto; }
  body.landing .land-crew { max-width: none; margin: 0; padding: clamp(11px, 1.7vh, 16px) 16px clamp(12px, 1.9vh, 18px); gap: clamp(8px, 1.3vh, 12px); }
  body.landing .land-crew-head { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; text-align: left; }
  body.landing .land-crew-title { order: -1; font-size: clamp(17px, 2.5vh, 21px); }
  body.landing .land-crew-k { font-size: 10px; letter-spacing: .14em; }
  body.landing .land-crew-when { flex-basis: 100%; font-size: 12.5px; }
  body.landing .land-crew .crew-now-list { justify-self: stretch; gap: clamp(6px, 1vh, 10px); }
  body.landing .land-crew .crew-now-officer { gap: 12px; }
  body.landing .land-crew .crew-now-officer img { width: clamp(34px, 5.4vh, 46px); height: clamp(34px, 5.4vh, 46px); }
  body.landing .land-crew .sol-officer-who { gap: 1px; }
  body.landing .land-crew .sol-officer-who b { font-size: 9.5px; line-height: 1.3; }
  body.landing .land-crew .sol-officer-who span { font-size: clamp(14px, 2vh, 16px); line-height: 1.15; }
  body.landing .calls { gap: clamp(8px, 1.6vh, 16px); width: 100%; max-width: none; margin: 0; }
  /* the two calls one height, the taller one's (13 October: "Transmit and Live feed should have the SAME height on
     mobile"): each card's words run its whole height and its key stands at its foot, so the two keys stand alike */
  body.landing .calls { grid-auto-rows: 1fr; }
  body.landing .call { --pic: clamp(60px, 9.4vh, 84px); display: grid; grid-template-columns: var(--pic) minmax(0, 1fr); column-gap: 14px; align-items: start; padding: clamp(12px, 1.7vh, 16px) 16px; }
  /* the drawing's box: a square, tinted in the call's colour, the drawing cut to its heart in it */
  body.landing .call-pic { position: relative; display: block; width: var(--pic); height: var(--pic); overflow: hidden; border-radius: 16px;
    background: rgba(var(--accent-rgb), .07); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .2); }
  body.landing .call-pic .call-art { position: absolute; margin: 0; max-width: none; aspect-ratio: auto; }
  body.landing .call-pic .call-art-tx { width: calc(var(--pic) * 600 / 150); height: calc(var(--pic) * 200 / 150); left: calc(var(--pic) * -33 / 150); top: calc(var(--pic) * -45 / 150); }   /* the dish and its waves in the middle: 150 × 150 of the drawing from (33, 45) */
  body.landing .call-pic .call-art-live { width: calc(var(--pic) * 600 / 188); height: calc(var(--pic) * 200 / 188); left: calc(var(--pic) * -206 / 188); top: calc(var(--pic) * -6 / 188); }   /* the radar alone: 188 × 188 from (206, 6) */
  body.landing .call-pic .call-grid { display: none; }
  body.landing .call-text { align-self: stretch; align-items: flex-start; text-align: left; min-width: 0; }
  body.landing .call-k { font-size: 10px; letter-spacing: .16em; }
  body.landing .call-livepill { margin-left: 6px; padding: 1px 7px 1px 5px; font-size: 9px; }
  body.landing .call-title { margin-top: 4px; font-size: clamp(16px, 2.3vh, 19px); line-height: 1.15; }
  body.landing .call-punch, body.landing .call-write .call-punch { margin-top: 5px; }
  body.landing .call-beam { max-width: none; font-size: clamp(12px, 1.75vh, 14px); line-height: 1.2; }
  body.landing .call-body { display: none; }
  body.landing .call-text > :nth-last-child(2) { margin-bottom: 0; }
  body.landing .call-write .call-punch, body.landing .call-live .call-title { margin-bottom: clamp(8px, 1.3vh, 12px); }   /* the air over the key */
  body.landing .call-text .call-key { margin-top: auto; }                                                                   /* the key at the card's foot */
  body.landing .call-key { gap: 8px; min-height: clamp(30px, 4.4vh, 36px); padding: 0 14px 0 15px; font-size: 13.5px; }
  body.landing .call-key span[aria-hidden] { font-size: 14px; }

  body.landing:not(.inner) [data-page].is-tall .call { scroll-snap-align: start; }
  body.landing:not(.inner) [data-page].is-tall .call.no-stop { scroll-snap-align: none; }
}
@media (max-height: 520px) {
  body.landing .call-title { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  body.landing .call-waves path { animation: none; opacity: .5; }
  body.landing .call-sig { display: none; }
  body.landing .call-livepill i { animation: none; }
  body.landing .call-beam { animation: none; }
  body.landing .call, body.landing .call:hover { transform: none; }
}

/* ====================================================================== the ground: plain */
/* The page stands on plain white by day and plain black by night — no drafting grid, no stars, no warm and cool lights
   behind the sections, no film grain over the window (the rules that drew them are in aura.css, under the ground; the
   cards of glass, the habitat's sheet and the first page's room keep their own grounds). */
body.landing, :root[data-theme="light"] body.landing { background: #fff; }
:root[data-theme="dark"] body.landing { background: #000; }
body.landing::before, body.landing::after { display: none; }                      /* the two lights */
html:has(body.landing)::after, :root[data-theme="dark"]:has(body.landing)::after { display: none; }   /* the grain */
:root[data-theme="light"] { --paper: #fff; }
:root[data-theme="dark"] { --paper: #000; }

/* ====================================================================== the first page's room, by day as by night */
/* The light theme leaves the first page's room as it is by night — the room is space, with the same Earth at its foot
   (public/space/earth.jpg, the night strip) and the same stars, drawing and sky (October: "the same image for day and
   night — the default night image"). A room of daylight — a pale sky, the Earth in daylight, the drawing dark — was
   drawn for the light theme for a while and is gone; the day strip it used, public/space/earth-day.jpg, stays on disk,
   unused. Only the page around the room turns light. */