/* The Most Realistic Alien · its own brand (Ole 30 Sep 01:25: "different from CRE8"): MRA Brand (build/mra-brand/brand.json):
   black and white, Helvetica Bold headlines, saffron only as an accent (a dot, a hairline, one call to action). No CRE8 green.
   Earlier note: Helvetica only (Ole 29 Sep 21:13). Mobile first.
   Tokens follow the CRE8 design system (claude.ai/artifact/NgdCpsX6RyWe1cC7nUguv2, synced from the live site 29 Sep):
   display weight 500, labels/captions >= 14px, square everything, signal (saffron) = one call to action per page. */
:root {
  --night: #000000;       /* MRA reverse: pure black (MRA Brand, logo 23:38); not CRE8's night */
  --night-ink: #ffffff;
  --white: #ffffff;       /* gallery white */
  --panel: #f4f4f2;
  --ink: #111111;
  --grey: #8a8a86;       /* CRE8 grey: large secondary text only (not used for small text) */
  --ink-2: #55554f;      /* labels and captions (7.4:1 on gallery) */
  --night-ink-2: #8a8a86; /* credit grey on black (MRA Brand) */
  --rule: #e4e4e1;
  --mra-ink: #000000;     /* MRA ink: the wordmark and headlines (MRA Brand) */
  --saffron: #ff9933;     /* signal: The Most Realistic Alien's colour; one call to action per page, ink text on it */
  --gutter: 16px;
  --max: 1180px;
  /* one left edge (MRA Brand, Logo SOP §3): the CRE8 token --margin, 20–64 px, 64 px on wide screens. Header, headlines,
     lockups, footer: every line of type starts here. Never centred on the web. */
  --margin: 20px;
  /* clear space around a lockup = the cap height of the T (PROPOSAL, MRA Brand brand.json logo.clearSpace; needs Ole's yes) */
  --mra-clear: 0.72em;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }   /* the page never scrolls sideways (MRA Brand); causes are fixed at the source too */
body { margin: 0; background: var(--white); color: var(--ink); font: 400 17px/1.5 var(--font); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--saffron); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
h1, h2, h3 { color: var(--mra-ink); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; margin: 0 0 .5em; }
h1 { font-size: clamp(40px, 9vw, 96px); }
h2 { font-size: clamp(28px, 5vw, 48px); }
h3 { font-size: 20px; letter-spacing: -0.01em; }
p { margin: 0 0 1em; max-width: 38em; }
.wrap { max-width: calc(var(--max) + 2 * var(--margin)); margin: 0; padding: 0 var(--margin); }   /* anchored left, never centred */
@media (min-width: 760px) { :root { --margin: 32px; } }
@media (min-width: 1024px) { :root { --margin: 64px; } }
.small { font-size: 14px; color: var(--ink-2); }
.eyebrow { font-size: 14px; color: var(--ink-2); margin-bottom: 12px; }   /* sentence case, 14 px, --ink-2: never letter-spaced capitals (MRA Brand) */
.eyebrow::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--saffron); margin-right: 8px; vertical-align: 2px; } /* the saffron dot: the MRA accent */

/* draft banner: local only, never public */
.draft { background: var(--ink); color: #fff; font-size: 14px; padding: 8px var(--margin); }

/* header */
.top { border-bottom: 1px solid var(--rule); background: var(--white); z-index: 5; }
@media (min-width: 760px) { .top { position: sticky; top: 0; } }   /* phones: not sticky (the header with its menu is tall there) */
/* thinner (Ole 7 Oct 00:40, "header seems very thick"): no number line, 8 px above and below the slot: about 70 px on a
   desktop (L1 26 px), 66 px from 760 px (24 px), 56 px on phones (L2 20 px beside the 44 px Menu button) */
.top .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px var(--mra-clear); padding-top: 8px; padding-bottom: 8px; }
nav ul { list-style: none; display: flex; gap: 18px; margin: 0; padding: 0; font-size: 15px; }
nav a { text-decoration: none; display: inline-block; padding: 12px 0; }
nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--saffron); text-decoration-thickness: 2px; }

/* sections */
section { padding: 56px 0; }
.night { background: var(--night); color: var(--night-ink); }
.night h1, .night h2, .night h3 { color: var(--night-ink); }
.night .small { color: var(--night-ink-2); }
.night .eyebrow { color: var(--night-ink-2); }
.panel { background: var(--panel); }
.hero { padding: 72px 0 64px; }
.hero h1 { margin-bottom: 28px; }
.hero .sub { font-size: clamp(18px, 2.4vw, 22px); color: var(--night-ink-2); }
.hero .alien { width: min(260px, 60vw); margin: 40px 0 8px; background: #fff; padding: 14px; }
.lead { font-size: clamp(20px, 2.6vw, 26px); line-height: 1.35; letter-spacing: -0.01em; max-width: 30em; }

/* grids */
.grid { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three, .grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.one-two { grid-template-columns: 1fr; }
@media (min-width: 760px) {
  body { font-size: 18px; }
  section { padding: 88px 0; }
  .grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid.one-two { grid-template-columns: 1fr 1fr; align-items: start; gap: 48px; }
}
@media (min-width: 1000px) { .grid.aliens { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* the collection */
.sheet { margin: 0; }
.sheet .paper { background: #fff; border: 1px solid var(--rule); padding: 10%; aspect-ratio: 5 / 7; display: flex; align-items: center; justify-content: center; }
.sheet img { max-height: 100%; width: auto; object-fit: contain; }
.sheet figcaption { font-size: 14px; margin-top: 8px; color: var(--ink-2); }
.sheet figcaption b { color: var(--mra-ink); font-weight: 700; }
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(120px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; }

/* photos */
figure.photo { margin: 0; }
figure.photo figcaption { font-size: 14px; color: var(--ink-2); margin-top: 8px; }
.night figure.photo figcaption { color: var(--night-ink-2); }
.tag { display: inline-block; font-size: 14px; line-height: 1.2; border: 1px solid currentColor; padding: 2px 6px; margin-right: 6px; vertical-align: 1px; }
.tag.mock { color: var(--ink-2); }
.night .tag.mock { color: var(--night-ink-2); }
.tag.open { color: #8f4700; }   /* 4.5:1 and more on white (axe, 30 Sep) */

/* cards */
.card { text-decoration: none; display: block; }
.card img { background: var(--panel); aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.card h3 { margin: 12px 0 4px; }
.card p { font-size: 15px; color: var(--ink-2); margin: 0; }
.card:hover h3 { text-decoration: underline; text-decoration-color: var(--saffron); text-decoration-thickness: 2px; }

/* product */
.product .gallery { display: grid; gap: 12px; }
.product .gallery .thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.product dl { display: grid; grid-template-columns: 7.5em 1fr; gap: 8px 16px; font-size: 15px; margin: 24px 0; }
.product dt { color: var(--ink-2); }
.product dd { margin: 0; }
.credit { font-size: 18px; font-weight: 700; margin: 8px 0 24px; }
.btn { font: 500 16px var(--font); background: var(--saffron); color: var(--ink); border: 0; padding: 14px 22px; min-height: 44px; cursor: pointer; }
.btn:hover { background: #ffad5c; }
.btn[disabled] { background: var(--rule); color: var(--ink-2); cursor: default; }
.notice { font-size: 15px; background: var(--panel); padding: 12px 14px; margin-top: 12px; }
.internal { font-size: 14px; border: 1px dashed #b35c00; padding: 12px 14px; margin: 24px 0; background: #fff8f0; }
.internal b { color: #8f4700; }
.internal ul { margin: 6px 0 0; padding-left: 18px; }

/* footer */
footer { background: var(--night); color: var(--night-ink); padding: 56px 0 40px; font-size: 15px; }
footer p { margin: 0 0 6px; }
footer .small { color: var(--night-ink-2); margin-top: 24px; }
footer .i1 { --i: 32px; }
@media (min-width: 760px) { footer .i1 { --i: 40px; } }

/* ---------- I1 · the instructions lead (where people draw): the two lines, never wrapped; the name (L2) at 0.25 × their
   size (at least 16 px), 0.6 × below; then 1 × clear space before anything else. I2 = I1 with the living lockup as the
   name; option b (every letter on the left edge, the small alien hanging in the margin) only on wide screens and only
   behind the flag (src/lib/flags.ts, or ?i2=b to preview). ---------- */
.i1 { --i: min(44px, calc((100vw - 2 * var(--margin)) / 8)); color: #000; }   /* 8 em: "Make it realistic." is 7.8 em wide */
.i1-instr { font-weight: 700; font-size: var(--i); line-height: 1.02; letter-spacing: -.01em; white-space: nowrap; margin: 0; max-width: none; color: inherit; }
.i1-name { margin: calc(var(--i) * .6) 0 var(--i); }
.i1-name .ll { --ll: max(16px, calc(var(--i) * .25)); }
.i1-name .ll-slot, .i1-name .ll-credit { display: none; }
.i1-name .ll-lock { grid-template-columns: auto; column-gap: 0; }
.night .i1, footer .i1 { color: #fff; }
.i1.turn { --i: min(clamp(48px, 8vw, 120px), calc((100vw - 2 * var(--margin)) / 8)); }
@media (max-width: 759.98px) { .i1.turn { --i: min(44px, calc((100vw - 2 * var(--margin)) / 8)); } }
@media (min-width: 1024px) {
  .i1.i2b .i1-name .ll { --ll: max(16px, min(calc(var(--i) * .25), calc(var(--margin) / 2.3))); margin-left: calc(var(--ll) * -2.3); }
  .i1.i2b .i1-name .ll-lock { grid-template-columns: 1.8em auto; column-gap: .5em; }
  .i1.i2b .i1-name .ll-slot, .i1.i2b .i1-name .ll-credit { display: block; }
}

/* home hero: the drawing beside the two instructions on wider screens */
.hero-sheet { max-width: 220px; margin-top: 36px; }
@media (min-width: 760px) {
  .hero-grid { display: grid; grid-template-columns: 1fr 240px; gap: 48px; align-items: end; }
  .hero-sheet { max-width: none; margin-top: 0; }
}

/* ---------- the lockups (MRA Brand, Logo SOP DRAFT v0.1, brand.json → logo, lockups; public/assets/js/mark.js) ----------
   L1 the living lockup: [slot 1.8 × 2.04 em] + gap 0.5 em + the wordmark (two lines, Bold 700, leading 1.02, tracking
   −0.005 em); the credit line under the wordmark's first letter, Regular, --ink-2, ≥ 14 px. L2 type only.
   --ll = the wordmark size. Black on white or white on pure black; never centred, never coloured. */
.ll { --ll: 26px; font-size: var(--ll); color: #000; }
.ll-lock { display: inline-grid; grid-template-columns: 1.8em auto; column-gap: .5em; align-items: center; text-decoration: none; color: inherit; }
.ll-slot { position: relative; width: 1.8em; height: 2.04em; }
.ll-slot img { position: absolute; right: 0; top: 50%; transform: translateY(-50%); opacity: 0; pointer-events: none; max-width: none; }
.ll-slot img.on { opacity: 1; }
.ll-word { font-weight: 700; line-height: 1.02; letter-spacing: -.005em; white-space: nowrap; }
.ll-credit { display: block; width: max-content; margin: .2em 0 0 calc(var(--ll) * 2.3); font-size: max(14px, calc(var(--ll) * .2)); font-weight: 400; line-height: 1.5;
             min-height: 1.5em; color: var(--ink-2); text-decoration: none; border-bottom: 1px solid transparent; }
.ll-credit:hover { color: #000; border-bottom-color: #000; }
.night .ll, .ll.on-night { color: #fff; } .night .ll-credit, .ll.on-night .ll-credit { color: var(--night-ink-2); } .night .ll-credit:hover { color: #fff; border-bottom-color: #fff; }
/* the change: the brand's monochrome glitch (0.42 s); less motion: a fade */
.ll-slot img.glitch { animation: ll-slip .42s cubic-bezier(.25, .46, .45, .94) both; }
@keyframes ll-slip {
  0%   { opacity: 0;  transform: translate(-.03em, -50%);  clip-path: inset(0 0 55% 0); }
  22%  { opacity: 1;  transform: translate(.025em, -50%);  clip-path: inset(40% 0 0 0); }
  38%  { opacity: .9; transform: translate(-.012em, -50%); clip-path: inset(0 0 20% 0); }
  56%  { opacity: 1;  transform: translate(.008em, -50%);  clip-path: inset(0); }
  100% { opacity: 1;  transform: translate(0, -50%);       clip-path: inset(0); } }
.ll-slot img.out { animation: ll-out .14s steps(2, end) both; }
@keyframes ll-out { 0% { opacity: 1; } 100% { opacity: 0; transform: translate(.02em, -50%); } }
@keyframes ll-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ll-slot img.glitch { animation: ll-fade .5s ease both; } .ll-slot img.out { animation: none; opacity: 0; } }
/* the header: L1 26 px wide · 24 px medium · L2 20 px under 420 px (type only, no credit) */
.mark { --ll: 24px; transition: opacity var(--m-base, .56s) ease; }
@media (min-width: 1024px) { .mark { --ll: 26px; } }
.mark .ll-lock { vertical-align: top; }   /* no line-box descender under the lockup: the header is the lockup's own height */
@media (max-width: 419.98px) { .mark { --ll: 20px; } }
/* one living logo per view: while a big lockup is on screen, the header's lockup steps back (mark.js) */
.mark.yield { opacity: 0; visibility: hidden; transition: opacity var(--m-base, .56s) ease, visibility 0s linear var(--m-base, .56s); }
/* the home's first-screen L1: clamp(56 px, 7vw, 104 px); L2 40 px on phones */
.ll-stage { background: #fff; color: #000; padding: 56px 0 48px; border-bottom: 1px solid var(--rule); }
.ll-stage .ll { --ll: clamp(56px, 7vw, 104px); }
/* L2 wherever the screen is under 420 px: the slot and the credit go, the wordmark stays on the left edge */
@media (max-width: 419.98px) {
  .ll-stage .ll { --ll: 40px; }
  .ll .ll-lock { grid-template-columns: auto; column-gap: 0; } .ll .ll-slot, .ll .ll-credit { display: none; }
}

/* one page per alien */
.entry { display: grid; gap: 32px; }
@media (min-width: 760px) { .entry { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 64px; align-items: start; } }
.entry .paper { background: #fff; border: 1px solid var(--rule); padding: 8%; display: flex; justify-content: center; }
.entry dl { display: grid; grid-template-columns: 8.5em 1fr; gap: 10px 16px; margin: 24px 0; }
.entry dt { color: var(--ink-2); }
.entry dd { margin: 0; }
.pager { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--rule); padding-top: 20px; margin-top: 48px; }
.pager a { display: inline-block; padding: 10px 0; }
a.sheet-link { text-decoration: none; display: block; }
a.sheet-link:hover .paper { border-color: var(--ink); }
.placeholder { font-size: 15px; border: 1px dashed var(--ink-2); padding: 10px 14px; margin: 16px 0; }

/* Astro build additions */
.foot-nav { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; }
.foot-nav a { display: inline-block; padding: 6px 0; }
.notify summary { list-style: none; display: inline-block; }
.notify summary::-webkit-details-marker { display: none; }
.notify[open] summary { background: var(--rule); color: var(--ink-2); }
.tags, .list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 16px 0; }
.list { display: block; }
.list li { padding: 8px 0; border-bottom: 1px solid var(--rule); }
.tags li { border: 1px solid var(--ink); padding: 4px 10px; font-size: 14px; }
.night .internal { color: var(--ink); }

/* the main menu (8 items) wraps on phones: no sideways scroll */
nav ul { flex-wrap: wrap; gap: 0 16px; }
@media (max-width: 759px) { nav ul { gap: 0 14px; font-size: 15px; } .top .wrap { padding-top: 6px; padding-bottom: 6px; } }

/* ---------- motion (public/assets/js/motion.js) · the CRE8 motion tokens, as MRA Brand asked (brand.json pages.motion, 01:31)
   Still under reduced motion and without JS. Only the living logo glitches. At most one thing moving per view. ---------- */
:root { --m-quick: 240ms; --m-base: 560ms; --m-slow: 900ms; --m-step: 120ms; --m-word: 0.35em; --m-float: 8px;
        --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in-out: cubic-bezier(0.45, 0.05, 0.55, 0.95); }
/* stillness (DECIDED 6 Oct 20:22 (8)): no text fades, no shelf growing, no drifting alien; only the living logo changes */
}
/* drawings move whole: up and down only, never rotated (MRA Brand) */
@keyframes float { from { transform: translateY(0); } to { transform: translateY(calc(var(--m-float) * -1)); } }

/* stars behind a night section */
.has-stars { position: relative; overflow: hidden; }
.has-stars > .wrap { position: relative; z-index: 1; }
canvas.stars { position: absolute; inset: 0; width: 100%; height: 100%; }

/* the globe */
.globe { margin: 32px 0 0; }
.globe canvas { display: block; width: 100%; }
.globe figcaption { margin-top: 8px; }

/* the century shelf */
.shelf-wrap { margin: 32px 0 0; }
.shelf { display: grid; grid-template-columns: repeat(100, 1fr); gap: 2px; height: 120px; align-items: end; }
.shelf span { display: block; height: 100%; background: #fff; border: 1px solid #cfcfcb; border-bottom: 0; }
.shelf span:nth-child(3n) { height: 94%; } .shelf span:nth-child(7n) { height: 88%; }
.shelf span.v1 { border-color: #000; border-top: 4px solid var(--saffron); } /* Vol. 1: the saffron edge; later edges not chosen */
.shelf-wrap figcaption { margin-top: 12px; font-size: 14px; color: var(--ink-2); }
.shelf-wrap .year { font-weight: 700; color: #000; font-variant-numeric: tabular-nums; }
@media (max-width: 759px) { .shelf { gap: 1px; height: 80px; } }

/* one real alien floating in the margin of a white section, with its number (the credit travels with every use) */
.has-drift { position: relative; }
.has-drift > .wrap { position: relative; z-index: 1; }
.drift { position: absolute; inset: 0; pointer-events: none; }
.drift a { position: absolute; width: clamp(64px, 8vw, 112px); pointer-events: auto; text-decoration: none; }
.drift img { width: 100%; height: auto; }
.drift small { display: block; font-size: 14px; color: var(--ink-2); margin-top: 4px; }
@media (max-width: 759px) { .drift { display: none; } }

@media print { [data-reveal] > *, .shelf span { opacity: 1 !important; transform: none !important; } .drift, canvas.stars { display: none; } }

/* real archive photos */
.gallery-real { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }
.gallery-real figure { margin: 0; }
.gallery-real figure.lead { grid-column: 1 / -1; }
.gallery-real img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
.gallery-real figure.lead img { aspect-ratio: auto; }
.gallery-real .cap { grid-column: 1 / -1; margin: 4px 0 0; }
@media (min-width: 760px) { .gallery-real { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card-empty { aspect-ratio: 3 / 2; background: var(--panel); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--ink-2); border: 1px solid var(--rule); }
/* the story timeline */
.timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: 40px; }
.timeline li { display: grid; grid-template-columns: 1fr; gap: 8px; border-top: 1px solid #000; padding-top: 16px; }
.timeline .t-place { font-size: clamp(22px, 3vw, 32px); font-weight: 700; margin: 0; }
.timeline .t-place a { text-decoration: none; }
.timeline .t-year { font-size: 14px; color: var(--ink-2); margin: 0; }
.timeline img { width: 100%; max-width: 560px; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 760px) { .timeline li { grid-template-columns: 1fr 1fr; align-items: start; gap: 32px; } }
.timeline .t-text { margin: 8px 0 0; max-width: 28em; }
.timeline .t-pause, .timeline .t-now { border-top-color: var(--rule); }
.timeline .t-now .t-place::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--saffron); margin-right: 10px; vertical-align: 5px; }
/* the two moods side by side: the joy and the work (real photos only) */
.two-moods { display: grid; gap: 12px; grid-template-columns: 1fr; }
.two-moods figure { margin: 0; } .two-moods img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.two-moods figcaption { margin-top: 8px; }
@media (min-width: 760px) { .two-moods { grid-template-columns: 1fr 1fr; gap: 20px; } }
/* joy + work side by side */
.moods { display: grid; gap: 12px; grid-template-columns: 1fr; margin-top: 32px; }
.moods img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 760px) { .moods { grid-template-columns: 1.3fr 1fr 1fr; } }

/* the two orders (Ole 30 Sep 02:00): where people draw, the instructions lead big and the name follows small */
.name-small { font-weight: 700; font-size: 16px; letter-spacing: -0.005em; margin: 14px 0 20px; color: #000; }
.night .name-small, .on-night .name-small { color: #fff; }
.sign { border: 1px solid #000; padding: clamp(24px, 5vw, 56px); margin-top: 40px; max-width: 760px; background: #fff; }
.sign .sign-big { font-weight: 700; font-size: clamp(32px, 6vw, 64px); line-height: 1.02; letter-spacing: -0.02em; margin: 0; color: #000; }
.sign.on-night { background: #000; border-color: #fff; }
.sign.on-night .sign-big { color: #fff; }

/* keyboard + motion access (Codex review P5) */
.skip { position: absolute; left: -9999px; top: 8px; z-index: 20; background: #000; color: #fff; padding: 10px 14px; }
.skip:focus { left: 16px; }
.night :focus-visible, footer :focus-visible, .on-night:focus-visible { outline-color: #fff; }
.motion-toggle { font: 400 14px var(--font); background: none; border: 1px solid currentColor; color: var(--ink-2); padding: 8px 12px; min-height: 36px; cursor: pointer; margin-top: 16px; }
.motion-toggle.on-night { color: var(--night-ink-2); }
[data-motion="paused"] .drift a { animation-play-state: paused; }
[data-motion="paused"] .ll-slot img.glitch { animation: none; }
/* stable media: reserve the space before images load (Codex review P6) */
figure.photo img, .product .gallery figure img, .card img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.entry .paper { min-height: 320px; }

/* ---------- the entrance v0.3: dry first, then you realise where you are (content/entrance.yaml) ---------- */
.entrance-on body { overflow: hidden; }
.entrance { position: fixed; inset: 0; z-index: 100; background: #000; color: #fff; transition: opacity .8s var(--ease-out); overflow: hidden; overflow: clip;   /* clip: nothing inside can scroll it (focus, scrollIntoView) */ }
.entrance[hidden] { display: none; }
.entrance .space { position: absolute; inset: 0; width: 100%; height: 100%; }
.e-frame { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px var(--gutter) 56px; text-align: center; transition: opacity .9s var(--ease-out); }
/* dry: the instructions just appear, like a form (Ole 02:49: "clean and technical") */
.e-head { position: relative; width: min(84vw, 460px, calc((100vh - 230px) * 148 / 210)); text-align: left; }   /* flush left: the D, the M and the sheet's edge on one line (Ole 04:43) */
.e-name { position: absolute; inset: 0; margin: 0; max-width: none; font-weight: 700; font-size: clamp(22px, 3vw, 40px); line-height: 1.08; letter-spacing: -0.015em; opacity: 0; transition: opacity .9s var(--ease-out); }
.entrance.named .e-instr { opacity: 0; transition: opacity .6s; }
.e-name { display: none; }
/* the lockup (Ole 04:41): your sheet as the logo's alien, the name tight beside it */
.e-lockup { position: absolute; z-index: 3; left: 0; top: 0; margin: 0; max-width: none; white-space: nowrap; font-weight: 700; line-height: 1.02; letter-spacing: -0.005em; color: #fff; opacity: 0; pointer-events: none; }
.e-lockup { background: #000; }   /* black-backed: the sheet hides behind the name, then comes out (Ole 04:45) */
.e-lockup { color: rgba(255, 255, 255, 0); }
.entrance.named .e-lockup { opacity: 1; color: #fff; transition: color .6s .2s var(--ease-out); }   /* the block is solid at once, only the letters fade in */
.entrance.boarded .e-lockup { opacity: 0; transition: opacity 1s 1.6s; }
.entrance.named .stamp { opacity: 0 !important; transition: opacity .4s; }
.e-instr { font-weight: 700; font-size: clamp(22px, 3vw, 40px); line-height: 1.08; letter-spacing: -0.015em; margin: 0 0 clamp(14px, 2.4vh, 24px); max-width: none; }
/* the letter arrives (Ole 04:24): "Draw an alien." from one side, "Make it realistic." from the other; dry: no blur, no bounce */
.e-instr span { display: block; opacity: 0; }
.e-instr .e-l1 { transform: translateX(-40vw); } .e-instr .e-l2 { transform: translateX(40vw); }
.entrance.l1-in .e-l1, .entrance.l2-in .e-l2 { opacity: 1; transform: none; transition: transform .7s cubic-bezier(.2, .7, .2, 1), opacity .25s linear; }
.e-pad { opacity: 0; }
.entrance.sheet-line .e-pad { opacity: 1; }
/* the sheet draws itself (Ole 03:36): a line from the top left around the corners, then paper, then texture */
.sheet-outline { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.sheet-outline i { position: absolute; background: #fff; }
.sheet-outline .o-t { left: 0; top: 0; width: 100%; height: 1.5px; transform-origin: left; transform: scaleX(0); }
.sheet-outline .o-r { right: 0; top: 0; width: 1.5px; height: 100%; transform-origin: top; transform: scaleY(0); }
.sheet-outline .o-b { right: 0; bottom: 0; width: 100%; height: 1.5px; transform-origin: right; transform: scaleX(0); }
.sheet-outline .o-l { left: 0; bottom: 0; width: 1.5px; height: 100%; transform-origin: bottom; transform: scaleY(0); }
/* chick, chick, chick, chick (Ole 04:22): one quick stroke per edge, a beat at each corner */
.entrance.sheet-line .sheet-outline i { animation: edge .3s cubic-bezier(.2, .7, .3, 1) forwards; }
.entrance.sheet-line .sheet-outline .o-r { animation-delay: .5s; }
.entrance.sheet-line .sheet-outline .o-b { animation-delay: 1s; }
.entrance.sheet-line .sheet-outline .o-l { animation-delay: 1.5s; }
@keyframes edge { to { transform: none; } }
/* version B (Ole 04:51): a frame drawn around the big words, which then becomes the sheet */
.e-ghost { position: absolute; z-index: 1; pointer-events: none; }   /* behind the words: they lift out in front of the line */
.e-ghost i { position: absolute; background: #fff; }
.e-ghost .o-t { left: 0; top: 0; width: 100%; height: 1.5px; transform-origin: left; transform: scaleX(0); }
.e-ghost .o-r { right: 0; top: 0; width: 1.5px; height: 100%; transform-origin: top; transform: scaleY(0); }
.e-ghost .o-b { right: 0; bottom: 0; width: 100%; height: 1.5px; transform-origin: right; transform: scaleX(0); }
.e-ghost .o-l { left: 0; bottom: 0; width: 1.5px; height: 100%; transform-origin: bottom; transform: scaleY(0); }
.entrance.ghost-in .e-ghost i { animation: edge .35s cubic-bezier(.2, .7, .3, 1) forwards; }
.entrance.ghost-in .e-ghost .o-r { animation-delay: .5s; } .entrance.ghost-in .e-ghost .o-b { animation-delay: 1s; } .entrance.ghost-in .e-ghost .o-l { animation-delay: 1.5s; }
.entrance.outline-done .sheet-outline i { transform: none; animation: none; }
.entrance.v-b .e-instr .e-l1 { transform: translateX(-60vw); } .entrance.v-b .e-instr .e-l2 { transform: translateX(60vw); }
.entrance.v-b.l1-in .e-l1, .entrance.v-b.l2-in .e-l2 { transform: none; }
/* ping (Ole 04:50): after the pause, the outline flares once, then the paper comes */
.entrance.ping .sheet-outline i { transform: none; animation: ping .45s ease-out; }   /* the edges stay drawn, only flare */
@keyframes ping { 0% { box-shadow: 0 0 0 rgba(255, 255, 255, 0); } 30% { box-shadow: 0 0 14px 2px rgba(255, 255, 255, .9); } 100% { box-shadow: 0 0 0 rgba(255, 255, 255, 0); } }
.entrance.sheet-paper .sheet-outline { opacity: 0; transition: opacity .6s .5s; }
.entrance .sheet .pad { opacity: 0; transition: opacity .7s var(--ease-out); }
.entrance.sheet-paper .sheet .pad { opacity: 1; }
/* "ah, we're in 3D": the paper settles into space when it becomes material */
.e-pad { perspective: 900px; }
.entrance.sheet-paper .sheet { animation: settle 1.1s cubic-bezier(.2, .7, .2, 1); }
@keyframes settle { from { transform: rotateX(14deg) translateY(-6px); } to { transform: none; } }
.entrance .sheet { position: relative; width: min(84vw, 460px, calc((100vh - 230px) * 148 / 210)); aspect-ratio: 148 / 210; margin: 0 auto; transform-origin: 50% 0; transition: transform 1s cubic-bezier(.55, 0, .75, .3), opacity .6s .5s; }
.entrance .sheet .pad { display: block; width: 100%; height: 100%; background: #fbfaf6; touch-action: none; cursor: crosshair; }
.entrance .sheet .pad:focus { outline: none; }
.entrance .sheet .pad:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
.entrance .sheet .stamp { position: absolute; left: 50%; top: 12%; font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #9a4a00; border: 2px solid var(--saffron); padding: 5px 9px; white-space: nowrap; transform: translateX(-50%) scale(2.4); opacity: 0; pointer-events: none; }   /* text #9a4a00 on the paper: 5.5:1 (saffron text was 2:1; Astra #9); the border stays saffron */
.entrance.stamped .stamp { animation: stamp .45s cubic-bezier(.3, 1.35, .5, 1) forwards; }
@keyframes stamp { to { transform: translateX(-50%) scale(1) rotate(-6deg); opacity: 1; } }
.e-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 14px; min-height: 44px; margin-top: 10px; visibility: hidden; }
.entrance.hint:not(.registered) .e-tools { visibility: visible; }
.entrance.registered .e-tools { opacity: 0; transition: opacity .4s; }
/* the hint: the colours pop in one by one; brushes, Clear and Done after the first line */
.e-colours button { opacity: 0; transform: scale(.2); }
.entrance.hint .e-colours button { animation: ding .32s cubic-bezier(.3, 1.6, .5, 1) forwards; }
.entrance.hint .e-colours button:nth-child(2) { animation-delay: .16s; } .entrance.hint .e-colours button:nth-child(3) { animation-delay: .32s; }
.entrance.hint .e-colours button:nth-child(4) { animation-delay: .48s; } .entrance.hint .e-colours button:nth-child(5) { animation-delay: .64s; }
@keyframes ding { to { opacity: 1; transform: none; } }
.e-brushes, .e-tools [data-again], .e-done { opacity: 0; pointer-events: none; transition: opacity .4s; }
.entrance.has-ink .e-brushes, .entrance.has-ink .e-tools [data-again], .entrance.has-ink .e-done { opacity: 1; pointer-events: auto; }
.e-colours { display: flex; gap: 10px; }
.e-brushes { display: flex; gap: 2px; }
.e-brushes button { font: 400 13px var(--font); color: #a9a9a4; background: none; border: 0; padding: 12px 5px; cursor: pointer; }
.e-brushes button[aria-checked="true"] { color: #fff; }
.e-colours button { width: 12px; height: 12px; border-radius: 50%; background: var(--c); border: 0; box-shadow: 0 0 0 1px #444; cursor: pointer; padding: 0; position: relative; }
.e-colours button::after { content: ""; position: absolute; inset: -10px; }   /* a 32 px target around a 12 px dot */
.e-colours button[aria-checked="true"] { box-shadow: 0 0 0 2px #000, 0 0 0 3px #fff; }
.e-done { font: 700 15px var(--font); color: #fff; background: none; border: 0; padding: 12px 6px; cursor: pointer; }
.e-done:hover { color: var(--saffron); }
.e-cta { font: 700 16px var(--font); color: #000; background: #fff; border: 0; padding: 12px 26px; min-height: 44px; cursor: pointer; }
.e-cta:hover { background: var(--saffron); }
.e-link { font: 400 15px var(--font); color: #8a8a86; background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; padding: 12px 10px; cursor: pointer; }
.e-actions { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; }
.e-note { font-size: 12px; color: #a9a9a4; margin: 2px auto 0; opacity: 0; transition: opacity .4s; }
.entrance.has-ink:not(.registered) .e-note { opacity: 1; }

.e-skip { position: absolute; right: 12px; bottom: 10px; z-index: 5; font: 400 14px var(--font); color: #b4b4af; background: none; border: 0; padding: 10px; cursor: pointer; }
.e-skip:hover, .e-skip:focus-visible { color: #cfcfcb; }
/* after Done: the stamp; the sheet waits; "Yours" */
.e-yours { position: absolute; z-index: 3; left: 0; right: 0; bottom: 64px; margin: 0 auto; max-width: none; text-align: center; font-size: 14px; color: #cfcfcb; opacity: 0; transition: opacity .6s; }
.entrance.stamped:not(.boarded) .e-yours { opacity: 1; }
/* the first hint: Ole's UFO arrives and takes the sheet up */
.e-ufo { position: absolute; z-index: 4; top: 0; left: 0; width: 240px; opacity: 0; pointer-events: none; transform: translateX(70vw); }
.e-ufo img { display: block; width: 100%; height: auto; position: relative; }
/* the abduction: a soft beam from the hatch down to the sheet */
.e-ufo .beam { position: absolute; left: 50%; top: 88%; width: 70%; height: var(--beam, 300px); transform: translateX(-50%); clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); background: linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, .05)); opacity: 0; transition: opacity .5s; }
.entrance.beam-on .e-ufo .beam { opacity: 1; }
.entrance.ufo-in .e-ufo { opacity: 1; transform: none; transition: transform 1.4s cubic-bezier(.16, .84, .3, 1.04), opacity .3s; }
.entrance.ufo-in:not(.depart) .e-ufo img { animation: hover 2.6s var(--ease-in-out) 1.4s infinite alternate; }
@keyframes hover { to { transform: translateY(-6px); } }
.entrance.boarded .sheet { opacity: 0; transition: opacity .5s .6s; }
.entrance.ufo-in .e-instr { opacity: 0; transition: opacity .6s; }
.entrance.depart .e-ufo { transform: translate(var(--tx, 0), var(--ty, 0)) scale(.04); opacity: 0; transition: transform 1.6s cubic-bezier(.6, 0, .85, .35), opacity .5s 1.2s; }
/* tick, tick, tick: the other aliens, whole, with their numbers */
.flight { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.tick { position: absolute; margin: 0; transform: translate(-50%, -50%); text-align: center; animation: arrive .35s cubic-bezier(.3, 1.35, .5, 1) backwards; transition: transform 1.6s cubic-bezier(.6, 0, .85, .35), opacity 1.2s .4s; }
.tick img { display: block; width: clamp(40px, 5.5vw, 70px); height: auto; margin: 0 auto; }
.tick figcaption { font-size: 11px; color: #9a9a96; margin-top: 2px; }
@keyframes arrive { from { opacity: 0; transform: translate(-50%, -50%) scale(.2); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.entrance.depart .tick { transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(.05); opacity: 0; }
/* the realisation: a horizon under you (canvas), and that point of light is Earth */
.e-earth { position: absolute; z-index: 3; width: clamp(160px, 18vw, 240px); opacity: 0; transition: opacity .9s; pointer-events: none; }
.e-earth img { display: block; width: 100%; height: auto; }
.entrance.earth-seen:not(.gone) .e-earth { opacity: 1; }
.entrance.landing { opacity: 0; }
.e-step { position: absolute; z-index: 9; left: 16px; bottom: 14px; display: flex; gap: 14px; align-items: center; font-size: 13px; color: #8a8a86; }   /* ?step only: a review tool, never on the live site */
.e-step span { color: #fff; } .e-step button { font: 700 13px var(--font); background: #fff; color: #000; border: 0; padding: 6px 10px; cursor: pointer; } .e-step button:disabled { opacity: .3; }
.entrance.still .e-instr span, .entrance.still .e-pad { opacity: 1; transform: none; transition: none; }
.entrance.still .sheet-outline i { transform: none; animation: none; }
@media (prefers-reduced-motion: reduce) { .entrance, .entrance .sheet { transition: opacity .2s linear; } }

/* closing the mirror (Ole 05:15): the first frame on Earth, a child drawing and looking up, the only line under it */
.mirror { padding: clamp(40px, 8vh, 96px) 0 clamp(32px, 6vh, 72px); }
.mirror-photo { margin: 0; }
.mirror-photo img { width: 100%; max-height: 78vh; object-fit: cover; display: block; }
.mirror .reversal { margin-top: 24px; }

/* the orbit (Ole 03:36 + 03:41): the site starts hovering above a blue Earth; the aliens float up there */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.orbit-list:focus-within { position: absolute; z-index: 6; left: var(--margin); right: var(--margin); bottom: 72px; width: auto; height: auto; max-height: 45vh; margin: 0; padding: 12px 16px; overflow: auto; clip: auto; white-space: normal; list-style: none; background: rgba(0,0,0,.88); border: 1px solid #555; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; }   /* Astra #2: the focus is visible */
.orbit-list a { color: #fff; } .orbit-list a:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; }
.orbit { position: relative; height: 100vh; min-height: 560px; background: #000; color: #fff; overflow: hidden; }
.orbit canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.orbit-text { position: relative; z-index: 2; padding-top: clamp(28px, 7vh, 80px); pointer-events: none; }
.orbit-text .eyebrow { color: #cfcfcb; }
.orbit-text .lead { font-size: clamp(22px, 3vw, 40px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; max-width: 20em; margin: 0; }
.orbit-hint { position: absolute; z-index: 2; left: var(--margin); bottom: 18px; margin: 0; font-size: 13px; color: #8a8a86; pointer-events: none; }
.orbit-hint .mine-hint { display: none; }
.orbit.has-mine .orbit-hint .mine-hint { display: block; color: #cfcfcb; }
.orbit-zoom { position: absolute; z-index: 2; right: var(--gutter); bottom: 44px; display: flex; flex-direction: column; gap: 6px; }
.orbit-zoom button { width: 36px; height: 36px; font: 700 18px var(--font); color: #fff; background: rgba(0, 0, 0, .5); border: 1px solid #555; cursor: pointer; }
.orbit-zoom button:hover { border-color: #fff; }
.orbit-credit { position: absolute; z-index: 2; right: var(--gutter); bottom: 12px; margin: 0; font-size: 11px; color: #6f6f6b; }
.orbit-explore { position: absolute; z-index: 2; right: var(--gutter); top: 18px; font: 700 14px var(--font); color: #fff; text-decoration: none; border: 1px solid #555; padding: 8px 12px; background: rgba(0, 0, 0, .4); }
.orbit-explore::after { content: " \2197"; }
.orbit-explore:hover, .orbit.deep .orbit-explore { border-color: var(--saffron); color: var(--saffron); }
/* Explore Earth: the big version (CesiumJS, self-hosted) */
.explore { position: relative; height: calc(100vh - 64px); min-height: 520px; background: #000; color: #fff; }
.explore-view { position: absolute; inset: 0; }
.explore-view .cesium-widget-credits, .explore-view .cesium-viewer-bottom { display: none; }
.explore-text { position: relative; z-index: 2; padding-top: 18px; pointer-events: none; }
.explore-text .eyebrow { color: #cfcfcb; }
.explore-hint { font-size: 13px; color: #8a8a86; margin: 0; }
.explore-credit { position: absolute; z-index: 2; right: var(--gutter); bottom: 10px; margin: 0; font-size: 11px; color: #8a8a86; }
.orbit-down { position: absolute; z-index: 2; left: 50%; bottom: 16px; transform: translateX(-50%); font: 700 14px var(--font); color: #fff; text-decoration: none; padding: 10px 14px; }
.orbit-down::after { content: " \2193"; }
.orbit-down:hover { color: var(--saffron); }
/* the Earth view (Ole 02:18) */
.globe-tools { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.globe-tools button { font: 700 18px var(--font); width: 40px; height: 40px; background: #fff; border: 1px solid #000; cursor: pointer; }
.earth-view { min-height: 100vh; display: flex; align-items: center; }
.earth-view .wrap { width: 100%; }
.earth-view .lead { font-size: clamp(26px, 3.6vw, 44px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; max-width: 22em; }

.reversal { font-weight: 700; font-size: clamp(26px, 4vw, 48px); letter-spacing: -0.02em; margin: 48px 0 0; }

/* ---------- the concept: long-form reading (the art text) ---------- */
.concept-head { padding-bottom: 32px; }
.toc ol { list-style: none; counter-reset: toc; padding: 0; margin: 32px 0 0; columns: 2 16em; column-gap: 32px; font-size: 15px; }
.toc li { counter-increment: toc; padding: 4px 0; break-inside: avoid; }
.toc li::before { content: counter(toc) " "; color: var(--ink-2); font-variant-numeric: tabular-nums; display: inline-block; min-width: 1.6em; }
.toc a { text-decoration: none; } .toc a:hover { text-decoration: underline; text-decoration-color: var(--saffron); }
.essay-wrap { padding-top: 16px; }
.essay { max-width: 38em; font-size: 18px; line-height: 1.6; }
@media (min-width: 760px) { .essay { font-size: 19px; } }
.essay h2 { font-size: clamp(24px, 3vw, 32px); margin: 2.2em 0 .7em; scroll-margin-top: 140px; }
.essay h2 .n { color: var(--ink-2); font-weight: 400; margin-right: .35em; font-variant-numeric: tabular-nums; }
.essay p { margin: 0 0 1.1em; }
.essay sup { line-height: 0; font-size: .7em; }
.essay sup a { text-decoration: none; padding: 0 1px; }
.essay .footnotes { margin-top: 64px; border-top: 1px solid #000; padding-top: 16px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.essay .footnotes h2 { font-size: 0; }   /* the engine prints "Footnotes"; the essay calls them Notes */
.essay .footnotes h2::after { content: "Notes"; font-size: 14px; }
.essay .footnotes h2 { font-size: 0; font-weight: 400; margin: 0 0 12px; color: var(--ink-2); letter-spacing: 0; }
.essay .footnotes ol { padding-left: 1.6em; } .essay .footnotes li { margin-bottom: 6px; scroll-margin-top: 140px; }
.essay .footnotes p { margin: 0; }
.essay [id^="user-content-fnref"] { scroll-margin-top: 140px; }
.wall-text { background: #fff; border: 1px solid #000; padding: clamp(20px, 3vw, 32px); }
.wall-text .wall-big { font-weight: 700; font-size: clamp(24px, 3vw, 32px); line-height: 1.02; letter-spacing: -.01em; margin: 0 0 16px; }

/* ---------- the storytelling pages (idea, vision, plan, book, gives back, join, about, press, host) ---------- */
.grade { font-weight: 700; font-size: clamp(28px, 4vw, 44px); letter-spacing: -.02em; margin-top: 24px; }
.done-list, .rules, .steps, .ways, .road, .circle { list-style: none; padding: 0; margin: 32px 0 0; }
.done-list { counter-reset: n; max-width: 44em; }
.done-list li, .rules li { counter-increment: n; display: grid; grid-template-columns: 2.4em 1fr; gap: 0 8px; padding: 14px 0; border-top: 1px solid var(--rule); }
.done-list li::before, .rules li::before { content: counter(n); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rules { counter-reset: n; max-width: 40em; }
.rules li { font-size: clamp(18px, 2vw, 22px); font-weight: 700; letter-spacing: -.01em; line-height: 1.3; border-top-color: #000; }
.rules li::before { font-weight: 400; font-size: 15px; padding-top: .3em; }
.road li { display: grid; gap: 4px 32px; padding: 24px 0; border-top: 1px solid #000; }
.road .r-when { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.road h3 { margin: 0 0 6px; }
.road p { margin: 0; }
@media (min-width: 760px) { .road li { grid-template-columns: 10em 1fr; } }
.circle { display: grid; gap: 16px; grid-template-columns: 1fr; counter-reset: c; }
.circle li { counter-increment: c; border-top: 1px solid #000; padding-top: 12px; }
.circle li h3::before { content: counter(c) " → "; color: var(--ink-2); font-weight: 400; }
.circle li p { margin: 0; font-size: 16px; color: var(--ink-2); }
@media (min-width: 760px) { .circle { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; } }
.ways li { padding: 32px 0; border-top: 1px solid #000; }
.ways li:first-child { border-top: 0; padding-top: 0; }
.ways h2 { font-size: clamp(24px, 3vw, 32px); }
.steps li { padding: 24px 0; border-top: 1px solid var(--rule); max-width: 44em; }
.steps h3 { margin-bottom: 8px; }
.steps .i1 { --i: min(32px, calc((100vw - 2 * var(--margin)) / 8)); margin-top: 12px; }
.facts { display: grid; grid-template-columns: 1fr; gap: 4px 32px; margin: 32px 0 0; max-width: 60em; }
.facts dt { font-weight: 700; padding-top: 14px; border-top: 1px solid #000; }
.facts dd { margin: 0 0 8px; }
@media (min-width: 760px) { .facts { grid-template-columns: 10em 1fr; } .facts dd { padding-top: 14px; border-top: 1px solid var(--rule); } }

/* the Collection's filter: place and year, plain text buttons on the left edge; the chosen one underlined in saffron */
.filter { margin-top: 32px; display: grid; gap: 4px; }
.f-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px; }
.f-label { font-size: 14px; color: var(--ink-2); min-width: 3.5em; }
.f-row button { font: 400 15px var(--font); color: var(--ink); background: none; border: 0; padding: 10px 0; min-height: 44px; cursor: pointer; }
.f-row button[aria-pressed="true"] { text-decoration: underline; text-decoration-color: var(--saffron); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.f-row button:hover { text-decoration: underline; }
.f-count { margin: 4px 0 0; min-height: 1.5em; }
.c-item[hidden] { display: none; }

/* the journal: a list of posts, the photo when there is one, the category and the date quiet */
.j-cats { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 15px; }
.j-list { list-style: none; padding: 0; margin: 40px 0 0; display: grid; gap: 40px 24px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .j-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.j-list a { text-decoration: none; display: grid; gap: 6px; }
.j-list img, .j-noimg { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.j-noimg { display: flex; align-items: flex-end; padding: 16px; background: #000; color: #fff; font-weight: 700; font-size: 20px; }
.j-title { font-weight: 700; font-size: 20px; letter-spacing: -.01em; line-height: 1.2; }
.j-list a:hover .j-title { text-decoration: underline; text-decoration-color: var(--saffron); text-decoration-thickness: 2px; }
.j-sum { font-size: 16px; color: var(--ink-2); }
.j-draft { color: #8f4700; font-weight: 400; }
.j-h1 { font-size: clamp(36px, 6vw, 72px); max-width: 16em; }
.j-fig { max-width: 900px; margin: 32px 0; }
.j-body { margin-top: 24px; }

/* the main menu on phones: Menu / Close beside the wordmark, the list opens below (menu.js; without JS it all shows) */
.menu-btn { font: 400 15px var(--font); color: var(--ink); background: none; border: 0; padding: 12px 0; min-height: 44px; cursor: pointer; }
@media (min-width: 760px) { .menu-btn { display: none; } }
@media (max-width: 759.98px) {
  .top.js-menu nav { display: none; flex-basis: 100%; }
  .top.js-menu.menu-open nav { display: block; }
  .top.js-menu nav ul { flex-direction: column; gap: 0; padding: 4px 0 8px; }
  .top.js-menu nav a { display: block; padding: 10px 0; min-height: 44px; font-size: 18px; }
}

/* MRA V1 (assessment B4): focus is visible on every black surface (entrance, orbit, night sections, footer); a tool
   that is not shown is not reachable (entrance.js sets tabindex -1 and data-off) */
.entrance :focus-visible, .orbit :focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.e-tools [data-off] { pointer-events: none; }

/* ---------- V2.0 Phase 1 (Ole 6 Oct 18:04) ---------- */
/* the doors: one saffron call to action per page (the first door of the opening screen), the others outlined */
.doors { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
.door { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 22px; font: 700 16px var(--font); color: inherit; text-decoration: none; border: 1px solid currentColor; }
.door:hover { text-decoration: none; border-color: var(--saffron); }
.door-main { background: var(--saffron); color: #111; border-color: var(--saffron); }
.door-main:hover { background: #ffad5c; }
/* the opening screen lives in the orbit: words on black, the doors clickable over the Earth */
.orbit .i1 { color: #fff; }
.orbit-text .i1-name { display: none; }   /* the name is in the header; the instructions lead here (the two orders, 30 Sep 02:00) */
.orbit-text .i1-instr { margin-top: 8px; }
.orbit-text .lead { font-size: clamp(18px, 2vw, 24px); font-weight: 400; letter-spacing: 0; max-width: 30ch; margin-top: 20px; }
.orbit-text .doors { pointer-events: auto; }
.orbit-text .door:not(.door-main) { background: rgba(0, 0, 0, .45); }
/* the touch hint: "pinch" on touch screens, "double-click" with a mouse */
.hint-touch { display: none; }
@media (hover: none) and (pointer: coarse) { .hint-pointer { display: none; } .hint-touch { display: inline; } }
/* how it goes: three beats, a real photo each */
.beats { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 24px; grid-template-columns: 1fr; }
.beats img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 12px; }
.beats p { margin: 0; font-size: 20px; line-height: 1.35; }
.beats b { display: block; font-size: 14px; font-weight: 400; color: var(--ink-2); margin-bottom: 4px; }
@media (min-width: 760px) { .beats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
/* questions on About */
.faq { margin: 16px 0 0; }
.faq dt { font-weight: 700; margin-top: 20px; }
.faq dd { margin: 4px 0 0; }
/* the CRE8 mark, small, beside "A CRE8 Foundation project" (its own colours, copied unchanged from the CRE8 site) */
.cre8 { display: flex; align-items: center; gap: 8px; }
.cre8 img { flex: none; }
.next { font-size: 18px; margin: 0; }

/* anchors (/join/#contact, #schools, …) land below the sticky header */
[id] { scroll-margin-top: 120px; }

/* ---------- night lane A (7 Oct 2026): the decided structure from the mock-ups (sketches/mockups/, 6 Oct) ---------- */
/* new words waiting for Ole: [placeholder] / [open: Ole] (they carry the "copy" hold) */
.ph { font-size: 13px; font-weight: 400; color: #8f4700; letter-spacing: 0; white-space: normal; }
.ph.op { display: inline-block; color: #111; background: var(--saffron); padding: 1px 6px; font-weight: 700; }
.night .ph:not(.op), footer .ph:not(.op), .orbit .ph:not(.op) { color: var(--saffron); }
/* the past, once, early (The idea) */
.past { font-size: clamp(18px, 2vw, 22px); line-height: 1.4; max-width: 36ch; }
/* Your turn: the end of the walk */
.turn-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .turn-grid { grid-template-columns: minmax(0, 1fr) minmax(220px, 320px); } }
.turn h1 { font-size: clamp(40px, 7vw, 88px); }
.goal { font-size: clamp(20px, 2.6vw, 26px); line-height: 1.35; margin-bottom: 16px; }
.sending { color: var(--ink-2); max-width: 36em; }
.count { font-weight: 700; font-size: clamp(18px, 2.2vw, 22px); }
.count .date, .count .asof { font-weight: 400; color: var(--ink-2); font-size: 15px; white-space: nowrap; }
.blank { aspect-ratio: 5 / 7; width: min(300px, 60vw); background: #fff; border: 1px solid #000; }
.pencil { width: min(220px, 48vw); height: 8px; margin: 18px 0 0 18px; transform: rotate(-8deg);
          background: linear-gradient(90deg, #111 0 5%, #d9c3a0 5% 13%, #e9e9e6 13% 92%, #cfcfca 92%); }
/* the hub's first screen (home): plain words under Host a table, the small "more" line */
.orbit-text .door-note { color: #cfcfcb; margin: 14px 0 0; max-width: 34em; pointer-events: auto; }
.orbit-text .more { display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 15px; margin: 10px 0 0; pointer-events: auto; }
.orbit-text .more a { display: inline-block; padding: 8px 0; }
/* the mirror (home, screen 2): the photo whole, never cropped, its fact beside; the line once */
.mirror-grid { display: grid; gap: 20px; align-items: end; }
@media (min-width: 900px) { .mirror-grid { grid-template-columns: minmax(0, 640px) minmax(0, 1fr); gap: 40px; } }
.mirror .mirror-photo img { width: 100%; height: auto; max-height: none; object-fit: contain; }
.mirror .reversal { margin: 0; font-size: clamp(30px, 4.6vw, 64px); line-height: 1.04; }
/* the end band: Your turn → the footer (the loop) */
.endband { border-top: 1px solid var(--rule); }
.endband h2 a { text-decoration-thickness: 2px; text-underline-offset: 6px; }
.endband .sheet-ico { width: 46px; aspect-ratio: 5 / 7; background: #fff; border: 1px solid #000; margin: 0 0 18px; }
.endband .doors { margin-top: 8px; }
/* ---------- the register (/collection/): the whole first, then the walk, then the numbers going on ---------- */
:root { --hd: 72px; }   /* the sticky header, for the walk's screen-sized drawings */
.rhead { margin-bottom: 8vh; }
.go-row { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; margin-top: 16px; }
.go { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 15px; margin: 0; }
.go label { font-weight: 700; }
.go input { width: 9em; font: inherit; padding: 10px; min-height: 44px; border: 1px solid #000; background: #fff; color: #000; border-radius: 0; }
.go button, .more-nos { font: 700 15px/1 var(--font); padding: 12px 16px; min-height: 44px; border: 1px solid #000; background: #fff; color: #000; cursor: pointer; border-radius: 0; }
.go button:hover, .more-nos:hover { border-color: var(--saffron); }
.go-msg { margin: 8px 0 0; } .go-msg:empty { margin: 0; }   /* QA S3: Go says when it finds nothing */
.down { font-weight: 700; font-size: 15px; display: inline-block; padding: 10px 0; }
/* the drawing on its paper: whole, contain, never cropped, one size for all */
.sheet-d { display: block; background: #fff; border: 1px solid var(--rule); aspect-ratio: 5 / 7; padding: 5%; }
.sheet-d img { width: 100%; height: 100%; object-fit: contain; }
a:hover .sheet-d, a:focus-visible .sheet-d { border-color: #000; }
/* the whole: every drawn alien small, side by side, the same size and the same space; no filters, no sorting */
.wall { margin: 0 0 16vh; padding: 0; }
.wall-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 18px 10px; max-width: 1240px; }
@media (min-width: 760px) { .wall-grid { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 22px 14px; } }
.wall-grid a { display: block; text-decoration: none; }
.wall-grid .sheet-d { padding: 6%; }
.wall-grid .wn { display: block; font-size: 14px; color: var(--ink-2); margin-top: 4px; font-variant-numeric: tabular-nums; }
.wall-grid a:hover .wn { color: #000; }
/* the home's quiet row (Ole 7 Oct 00:34): a few public aliens, one size, whole on their sheets, nothing moves */
.arow { padding: clamp(40px, 8vh, 88px) 0 clamp(24px, 5vh, 56px); }
.arow-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 12px; max-width: 420px; }
@media (min-width: 760px) { .arow-grid { grid-template-columns: repeat(8, minmax(0, 104px)); gap: 20px 16px; max-width: none; } }
@media (max-width: 759.98px) { .arow-grid .wide { display: none; } }
.arow-grid a { display: block; text-decoration: none; color: inherit; }
.arow-grid .sheet-d { padding: 6%; }
.arow-grid img { display: block; }
.arow-grid .wn { display: block; font-size: 14px; color: var(--ink-2); margin-top: 6px; font-variant-numeric: tabular-nums; }
.arow-grid a:hover .wn { color: #000; }
.arow-more { margin-top: 20px; }
/* the walk: number, drawing, credit; one per screen on wide screens, two per screen on phones */
.walk { padding: 0; }
.entry.held, .walk .entry { display: block; }
.walk .entry { margin: 0 0 22vh; scroll-margin-top: calc(var(--hd) + 24px); }
.walk .no { font-weight: 700; font-size: clamp(22px, 2.6vw, 32px); margin: 0 0 14px; font-variant-numeric: tabular-nums; }
.pair { display: grid; gap: 12px; align-items: end; }
@media (min-width: 760px) { .pair { grid-template-columns: auto minmax(160px, 260px); gap: 28px; } }
.art { display: block; width: min(calc((100vh - var(--hd)) * .66 * 5 / 7), calc(100vw - 2 * var(--margin))); text-decoration: none; }
.walk .credit { font-size: 15px; font-weight: 400; color: var(--ink-2); margin: 0; }
.entry.held .no, .entry.held .credit { color: var(--ink-2); }
@media (max-width: 759.98px) {
  :root { --hd: 0px; }   /* the header does not stick on phones */
  .walk .entry { margin: 0 0 5vh; }
  .walk .no { font-size: 20px; margin: 0 0 8px; }
  .pair { grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
  .art { width: min(calc(100svh * .33 * 5 / 7), 62vw); }
  .walk .credit { font-size: 14px; }
  .walk .entry.held { margin-bottom: 4vh; }
}
/* where the drawn numbers end: the numbers go on; Year 1; the quiet numbers, a labelled region */
.goes-on { font-weight: 700; font-size: clamp(20px, 2.6vw, 26px); margin: 0 0 4vh; }
.yr { font-size: 14px; color: var(--ink-2); margin: 0 0 9vh; max-width: min(440px, 100%); }
.yr::before { content: ""; display: block; width: 160px; border-top: 1px solid #000; margin: 0 0 10px; }
.quiet { padding: 0; }
.q, .gapline { margin: 0 0 9vh; font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; scroll-margin-top: 40vh; }
.q.hit span { color: #000; outline: 1px solid #000; outline-offset: 3px; }
.ladder { display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 15px; font-variant-numeric: tabular-nums; margin: 0 0 16px; }
.ladder a { display: inline-block; padding: 8px 0; }
/* ---------- one alien (also the QR landing) ---------- */
.alien-one { padding: 40px 0 56px; }
.alien-one h1 { font-size: clamp(32px, 5vw, 64px); margin-bottom: 20px; font-variant-numeric: tabular-nums; }
.big { display: grid; gap: 22px; align-items: end; }
@media (min-width: 900px) { .big { grid-template-columns: auto minmax(200px, 300px); gap: 36px; } }
.art-big { width: min(calc((100vh - var(--hd)) * .74 * 5 / 7), calc(100vw - 2 * var(--margin))); }
.a-credit { font-size: 20px; font-weight: 700; margin: 0 0 6px; }
.label .small { margin: 0 0 6px; }
.alinks { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 26px 0 0; font-size: 16px; }
.alinks a { display: inline-block; padding: 10px 0; }
.alinks .strong { font-weight: 700; }
.what { margin: 18px 0 0; max-width: 46em; color: var(--ink-2); }
.what b { color: #000; }
/* ---------- the footer: the end, and the call coming round (the loop) ---------- */
footer { padding: clamp(56px, 12vh, 140px) 0 56px; }
footer .i1-instr { white-space: normal; }
footer .loop-link { font-size: 15px; margin: 0 0 48px; }
.foot-grid { display: grid; gap: 26px; max-width: 1240px; }
@media (min-width: 900px) { .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.foot-grid p { margin: 0 0 8px; }
.foot-grid .tagline { color: var(--night-ink-2); font-size: 14px; }
footer .foot-nav { margin: 0; display: grid; gap: 2px; font-size: 15px; }
footer .cre8 { margin-top: 16px; font-size: 14px; color: var(--night-ink-2); }
footer .motion-toggle[aria-pressed="true"] { background: #fff; color: #000; border-color: #fff; }
footer a, .address { overflow-wrap: anywhere; }
.address { font-weight: 700; font-size: clamp(18px, 2.2vw, 24px); margin: 8px 0; }
/* ---------- accessibility (council round 2; night lane A, 7 Oct) ---------- */
/* the two instructions wrap at large text and grow with it: one line each at normal sizes (sized to the screen, 8 em),
   at least 1.75 rem, so a larger text setting makes them bigger, and then they may wrap instead of running off */
.i1-instr { white-space: normal; font-size: max(var(--i), 1.75rem); overflow-wrap: normal; }
/* the host guide's instructions: bigger (step 1, the thing a host says) */
.steps .i1 { --i: min(72px, calc((100vw - 2 * var(--margin)) / 8)); }
/* the Earth's label: at least 13 px, readable on black */
.orbit-credit, .explore-credit { font-size: 13px; color: #8a8a86; }
/* the date beside a "now" sentence */
.asof { font-size: 14px; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.night .asof, footer .asof { color: var(--night-ink-2); }
/* the orbit's bottom edge (visual QA, 7 Oct 12:20: the credit and the hint ran into each other): one foot line, the hint
   on the left, the two credits on the right (two short lines on wide screens); "Down to Earth" and the zoom above it */
.orbit-foot { position: absolute; z-index: 2; left: var(--margin); right: var(--gutter); bottom: 16px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 48px; pointer-events: none; }
.orbit-foot .orbit-hint, .orbit-foot .orbit-credit { position: static; margin: 0; line-height: 1.45; }
.orbit-foot .orbit-hint { flex: 0 1 auto; }
.orbit-credit { max-width: none; text-align: right; }
.orbit-credit > span:not(.sep) { display: block; }
.orbit-credit .sep { display: none; }
.orbit-down { bottom: 64px; }
.orbit-zoom { bottom: 64px; }
@media (max-width: 1099.98px) {   /* narrower: the hint over the credits, all on the left */
  .orbit-foot { flex-direction: column; align-items: flex-start; right: var(--margin); }
  .orbit-credit { text-align: left; }
  .orbit-down { left: var(--margin); transform: none; padding-left: 0; bottom: 104px; }
  .orbit-zoom { bottom: 104px; }
}
@media (max-width: 759.98px) {
  .orbit-credit > span:not(.sep) { display: inline; }
  .orbit-credit .sep { display: inline; }
  .orbit-down { bottom: 116px; }
  .orbit-zoom { bottom: 116px; }
}
/* the register's head stays small, so the whole shows in the first screen; one alien's drawing fits the first screen */
.reg h1 { font-size: clamp(32px, 5.2vw, 68px); }
.reg .rhead { margin-bottom: 6vh; }
.art-big { width: min(calc((100vh - var(--hd)) * .62 * 5 / 7), calc(100vw - 2 * var(--margin))); }

/* ---------- the home as a descent from space to Earth (night lane L, 7 Oct; Ole 00:54 + 00:56; sketches N and O) ----------
   space (black, the real sky) → the descent (deep blue, the thin blue limb, the warm white) → the white cube, section by
   section → dusk → space again for the footer, whose ground ?end= chooses (html[data-end], descent.js; default a).
   Driven by the scroll only: the bands are still gradients you scroll through; where the browser has scroll timelines the
   Earth also comes a step closer as you leave the first screen. Reduced motion: still sections with hard edges. */
:root { --cube: #f4f2ed; }   /* the warm white of the white cube (sketch N) */
html.descent body { background: #000; }
.sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: #000; }
.sky-deep { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: .42; }   /* the deep field is a ground, not a picture: it fills */
.sky-stars { position: absolute; left: 0; top: 0; }
html.descent .orbit { background: transparent; }
@media (min-width: 900px) { html.descent .orbit { height: calc(100vh - var(--hdr-h, 67px)); height: calc(100svh - var(--hdr-h, 67px)); padding-top: clamp(0px, calc(100vh - 730px), 88px); padding-bottom: 0; } }   /* the whole first screen under the sticky header (descent.js measures it); on a short screen the words move up, never under the foot line */
html.descent .orbit-text { text-shadow: 0 1px 14px rgba(0, 0, 0, .85), 0 0 2px rgba(0, 0, 0, .6); }
html.descent .orbit .i1.turn { --i: min(clamp(40px, 5.4vw, 84px), calc((100vw - 2 * var(--margin)) / 8)); }
html.descent .orbit-credit { color: #a3a39e; text-shadow: 0 0 4px #000; }
.orbit::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background: linear-gradient(to bottom, rgba(7, 26, 70, 0) 25%, rgba(7, 26, 70, .9) 100%); }
.dawn { position: relative; }
.dawn { height: clamp(180px, 32vh, 360px); margin-top: -1px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(3, 10, 32, .7) 18%, #071a46 38%, #0e3d8f 56%, #2f74cf 66%, #7fb0ea 74%, #cfe0f2 83%, #ebedee 91%, var(--cube) 100%); }
/* visual QA (Ole 7 Oct 12:20, "weird border horizontal"): the Earth no longer stops at a hard line. The bottom of the
   first screen thins into the deep blue of the air, and the descent goes on from exactly that blue: space → the Earth →
   the atmosphere → the warm white. (Reduced motion keeps its hard edges: no band there.) */
@media (prefers-reduced-motion: no-preference) {
  html.descent .orbit::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; z-index: 1; pointer-events: none;
    background: linear-gradient(to bottom, rgba(7, 26, 70, 0) 0%, rgba(7, 26, 70, .28) 35%, rgba(7, 26, 70, .72) 70%, #071a46 100%); }
  html.descent .dawn { background: linear-gradient(to bottom, #071a46 0%, #0b2f74 22%, #1a56b4 40%, #3f82d6 54%, #86b5ea 67%, #c9dcf0 79%, #e6eaec 89%, var(--cube) 100%); }
}
.dusk { position: relative; height: clamp(160px, 28vh, 320px); margin-bottom: -1px;
  background: linear-gradient(to bottom, var(--dusk-from, #fff) 0%, #ebedee 9%, #cfe0f2 18%, #7fb0ea 27%, #2f74cf 35%, #0e3d8f 45%, #071a46 62%, rgba(3, 10, 32, .7) 82%, rgba(0, 0, 0, 0) 100%); }
.dawn canvas, .dusk canvas { position: absolute; left: 0; width: 100%; height: 34%; display: block; }
.dawn canvas { bottom: 0; }
.dusk canvas { top: 0; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html.descent:not([data-motion="paused"]) .orbit canvas { animation: mra-closer linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; transform-origin: 50% 80%; }
    html.descent:not([data-motion="paused"]) .orbit::after { animation: mra-air linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
  }
}
@keyframes mra-closer { to { transform: scale(1.32); } }
@keyframes mra-air { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .dawn, .dusk { height: 0; background: none; overflow: hidden; }   /* hard edges: space, then the white cube */
}
/* the white cube: every section on the warm white, one job each */
.ground { background: var(--cube); }
.ground > section, .ground > div > section { padding: clamp(48px, 9vh, 112px) 0 0; }
.ground > div:last-child > section { padding-bottom: clamp(56px, 10vh, 120px); }
.ground .endband { border-top: 0; }
.ground .endband .sheet-ico { width: clamp(96px, 11vw, 150px); border-color: #cfcdc6; box-shadow: 0 10px 26px rgba(60, 50, 30, .12); }
/* Your turn on the home (visual QA, 7 Oct 12:20): one composition across the width, the sheet beside the words, the
   words at the size of the mirror's line, so the pinned frame is never half empty */
@media (min-width: 760px) {
  .ground .endband .wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(32px, 5vw, 80px); align-items: center; }
  .ground .endband .sheet-ico { grid-row: 1 / span 3; width: clamp(150px, 17vw, 250px); margin: 0; }
  .ground .endband .eyebrow { align-self: end; margin: 0; }
  .ground .endband h2 { font-size: clamp(36px, 5.6vw, 80px); line-height: 1.02; letter-spacing: -0.025em; margin: 10px 0 0; }
  .ground .endband .doors { align-self: start; margin-top: 22px; }
}
.ground h2 { font-size: clamp(28px, 4vw, 52px); }
.ground .eyebrow { font-size: 15px; }
.pic { margin: 0; }
.pic img { width: 100%; height: auto; object-fit: contain; background: #e9e7e1; }
.pic figcaption { margin-top: 8px; }
.deeper { margin: 22px 0 0; font-weight: 700; }
.deeper a::after { content: " \2192"; }
.mirror .deeper { margin-top: 20px; }
.mirror .reversal { color: #000; }
/* the row of aliens, bigger (council: ~180 px on a laptop, 2 per row on phones) */
.arow-wrap { display: grid; gap: 18px 48px; }
@media (min-width: 1100px) { .arow-wrap { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } .arow-wrap .eyebrow { grid-column: 1; grid-row: 1; align-self: start; } .arow-wrap .arow-grid { grid-column: 2; grid-row: 1 / span 2; } .arow-wrap .arow-more { grid-column: 1; grid-row: 2; } }
html.descent .arow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; gap: 20px 16px; }
@media (min-width: 760px) { html.descent .arow-grid { grid-template-columns: repeat(4, minmax(0, 190px)); max-width: none; gap: 24px 20px; } html.descent .arow-grid .wide { display: block; } }
html.descent .arow { padding-bottom: 0; }
html.descent .arow-more { margin-top: 0; }
/* the book, early (Ole 00:56 (5)) */
.hbook-grid, .who-grid { display: grid; gap: 24px 48px; align-items: center; }
@media (min-width: 900px) { .hbook-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } .who-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }
.hbook .shelf-wrap { margin-top: 20px; }
.hbook .shelf { height: 64px; }
.hbook figcaption, .hbook .shelf-wrap figcaption { color: var(--ink-2); }
/* how it goes: three beats, each a photo and one line */
.beats { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 28px 24px; }
@media (min-width: 900px) { .beats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.beat { margin: 12px 0 0; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }
.beat-n { display: block; font-size: 14px; font-weight: 400; color: var(--ink-2); margin-bottom: 2px; }
.graded { margin: 28px 0 0; font-size: clamp(20px, 2.2vw, 28px); font-weight: 700; letter-spacing: -0.01em; }
/* the white cube: the mock-up big, the slot for the real installation photo (Ole's pick), a real exhibition */
.cube-grid { display: grid; gap: 24px; margin-top: 8px; }
@media (min-width: 900px) { .cube-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .cube-mock { grid-row: span 2; } }
.slot-box { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; border: 1px dashed #b35c00; background: #fff8f0; color: #8f4700; font-size: 14px; }
/* the world: five mock-ups, each labelled */
.strip5 { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 20px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .strip5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .strip5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.strip5 .tag { font-size: 13px; }
/* the journal: three cards from places */
.cards { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 28px 24px; }
@media (min-width: 900px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }
.cards .pic img { max-height: 340px; width: auto; max-width: 100%; }
.cards h3 { margin: 12px 0 4px; font-size: 19px; }
.cards p { margin: 0; }
/* who makes it: everyone; CRE8 holds the structure (its green only as the mark) */
.who .lead { font-weight: 700; }
.cre8-link { display: flex; align-items: center; gap: 10px; }
.cre8-link img { flex: none; }
/* the footer's ground on the home (?end=, Ole 00:56 (1)): a the Earth's edge · b stars only · c the white ground · d the far blue point */
html[data-end] footer { background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5) 160px); }   /* the sky dimmed behind the small words */
html[data-end] footer .foot-grid > div, html[data-end] footer .loop-link, html[data-end] footer .i1 { position: relative; }
.earth-edge { display: none; }
html[data-end="a"] .earth-edge { display: block; height: clamp(130px, 26vh, 300px); margin-top: -24px; }
html[data-end="d"] .earth-edge { display: block; height: 120px; }
.earth-edge canvas { display: block; width: 100%; height: 100%; }
html[data-end="c"] .dusk { display: none; }
html[data-end="c"] footer { background: var(--cube); color: var(--ink); border-top: 1px solid #dcdad3; }
html[data-end="c"] footer .i1, html[data-end="c"] footer .ll.on-night { color: #000; }
html[data-end="c"] footer .ll.on-night .ll-credit, html[data-end="c"] footer .cre8, html[data-end="c"] .foot-grid .tagline, html[data-end="c"] footer .motion-toggle.on-night { color: var(--ink-2); }
html[data-end="c"] footer .ph:not(.op) { color: #8f4700; }
html[data-end="c"] footer :focus-visible { outline-color: #000; }
html[data-end="c"] footer .motion-toggle[aria-pressed="true"] { background: #000; color: #fff; border-color: #000; }
/* ---------- night lane L, round 2 (Ole 7 Oct 01:15): the header over space, the stars' parallax, things arriving as you
   reach them, the tables carousel, the real white cube. All driven by the scroll or the visitor's hand; reduced motion
   and the site's Pause: still. ---------- */
/* the header: dark and clear over space (white type), white over the white cube, a little smaller once you scroll */
html.descent .top { transition: background-color .35s ease, border-color .35s ease; }
html.descent .top .wrap { transition: padding .35s ease; }
html.descent[data-hdr="space"] .top { background: transparent; border-bottom-color: transparent; color: #fff; }
html.descent[data-hdr="space"] .top .ll { color: #fff; }
html.descent[data-hdr="space"] .top nav a, html.descent[data-hdr="space"] .top .menu-btn { color: #fff; }
html.descent[data-hdr="space"] .top :focus-visible { outline-color: #fff; }
/* visual QA (7 Oct 12:20): once the page moves, the header over space gets its own dark, quiet ground, so the words
   under it (the first screen, the footer) never show through its type */
@media (min-width: 760px) {
  html.descent.hdr-small[data-hdr="space"] .top { background: rgba(0, 0, 0, .62); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
}
@media (min-width: 760px) { html.descent.hdr-small .top .wrap { padding-top: 3px; padding-bottom: 3px; } }
@media (prefers-reduced-motion: reduce) { html.descent .top, html.descent .top .wrap { transition: none; } }
/* the stars move a little, only with the scroll: the near stars faster, the deep field slowest (the real sky also turns,
   on the minute: descent.js) */
.sky-deep { height: 112%; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    html.descent:not([data-motion="paused"]) .sky-deep { animation: mra-far linear both; animation-timeline: scroll(root); }
    html.descent:not([data-motion="paused"]) .sky-stars { animation: mra-near linear both; animation-timeline: scroll(root); }
  }
}
@keyframes mra-far { to { transform: translateY(-8%); } }
@keyframes mra-near { to { transform: translateY(-22%); } }
/* things arrive as you reach them (scroll-driven; without scroll timelines everything is simply there) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html.descent:not([data-motion="paused"]) .ground :is(.mirror-photo, .reversal, .arow-grid li, .hbook .pic, h2, .beat, .graded, .car-track, .cube-grid > figure, .strip5 li, .cards li, .who .pic, .endband .sheet-ico) {
      animation: mra-arrive linear both; animation-timeline: view(); animation-range: entry 0% entry 80%;
    }
  }
}
@keyframes mra-arrive { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
/* how it goes: three lines, then the tables (a carousel the visitor moves) */
.how .beats { grid-template-columns: none; }
@media (min-width: 900px) { .how .beats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.carousel { margin-top: 36px; }
.car-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.car-head .eyebrow { margin: 0; }
.car-nav { display: flex; gap: 8px; margin: 0; }
.car-nav[hidden] { display: none; }
.car-nav button { width: 44px; height: 44px; font: 700 18px var(--font); background: #fff; color: #000; border: 1px solid #000; cursor: pointer; }
.car-nav button:disabled { opacity: .35; cursor: default; }
.car-track { list-style: none; margin: 14px 0 0; padding: 0 var(--margin) 10px; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margin); overscroll-behavior-x: contain; scrollbar-width: thin; align-items: flex-start; }
.car-track:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.slide { flex: 0 0 min(82vw, 720px); scroll-snap-align: start; }
@media (prefers-reduced-motion: no-preference) { .car-track { scroll-behavior: smooth; } }
/* the white cube: the real Thaillywood photo leads (big), the second beside it, the mock-up after them */
.cube-grid { grid-template-columns: none; }
@media (min-width: 900px) { .cube-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; } .cube-lead { grid-row: span 2; } .cube-mock { grid-row: auto; grid-column: 1 / -1; max-width: none; }
  /* visual QA (7 Oct): the mock-up with its caption beside it (the mirror's figure), not alone on a half-empty line */
  .cube-mock { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); column-gap: 32px; align-items: end; }
  .cube-mock figcaption { margin: 0; max-width: 30em; } }
/* the pause beside the living logo (the panel, 7 Oct: WCAG 2.2.2 next to what moves; "Play motion" resumes) */
.top .ll-pause { margin: 0 auto 0 4px; min-height: 32px; padding: 4px 10px; font-size: 13px; }
.top .ll-pause[aria-pressed="true"] { color: #000; border-color: #000; }
html.descent[data-hdr="space"] .top .ll-pause { color: #cfcfcb; }
html.descent[data-hdr="space"] .top .ll-pause[aria-pressed="true"] { color: #fff; border-color: #fff; }
@media (max-width: 419.98px) { .top .ll-pause { display: none; } }   /* L2 on phones: type only, nothing changes there */
@media (prefers-reduced-motion: reduce) { .top .ll-pause { display: none; } }   /* the logo holds still anyway */
/* keyboard focus never hides under the sticky header */
@media (min-width: 760px) { html { scroll-padding-top: 84px; } }
/* narrow screens: the section is taller, so the dome sits under the words and the aliens hang between (orbit.js) */
@media (max-width: 899.98px) { html.descent .orbit { height: 132vh; height: 132svh; } }
/* ---------- the ending every page shares (src/components/Ending.astro; night lane L, 7 Oct): on an inner page the sky
   is drawn behind the ending only (absolute, not fixed); the dusk starts from the page's white ---------- */
html.descent { --dusk-from: var(--cube); }
.ending { position: relative; }
.ending-local { background: #000; overflow: hidden; }
.ending-local .sky { position: absolute; z-index: 0; }
.ending-local .sky-deep { height: 100%; }
.ending-local > :not(.sky) { position: relative; z-index: 1; }
html[data-end="c"] .ending-local { background: var(--cube); }
html[data-end="c"] .ending-local .sky { display: none; }
/* ---------- the score's two pins on the home (night lane L, 7 Oct; Ole 01:46 "precise and not over the top"; plan:
   docs/2026-10-07_SCROLLY-and-MOTION_plan.md). Accent 1, the mirror: about one screen, the photo holds, the line arrives,
   release. Accent 3, Your turn: about 1.5 screens, the sheet holds, then the dusk falls into the footer. Everything else is
   a rest. Scroll-scrubbed only (the visitor's scroll is the clock), transform and opacity only, no bounce. Pinned only
   where the browser has scroll timelines, motion is allowed and the site's Pause is off; otherwise no pin, no room, the
   words simply there and the ending's own dusk band. (Accent 2, the book, waits for sketches/scrolly2.html.) ---------- */
.ground .pin-stage > section { padding-top: clamp(48px, 9vh, 112px); }
.ground .pin-turn .pin-stage > section { padding-bottom: clamp(56px, 10vh, 120px); }
.pin-room { height: 0; }
.pin-night { display: none; }
@supports (animation-timeline: view()) {
  .pin-mirror { view-timeline: --pin-mirror block; view-timeline-inset: var(--hd) 0px; }
  .pin-turn { view-timeline: --pin-turn block; view-timeline-inset: var(--hd) 0px; }
  @media (prefers-reduced-motion: no-preference) {
    html.descent:not([data-motion="paused"]) .pin-stage { position: sticky; top: var(--hd); min-height: calc(100vh - var(--hd)); min-height: calc(100svh - var(--hd));
      display: flex; flex-direction: column; justify-content: center; overflow: hidden; background: var(--cube); }
    html.descent:not([data-motion="paused"]) .pin-stage > section { padding-bottom: clamp(32px, 6vh, 72px); }
    html.descent:not([data-motion="paused"]) .pin-mirror .pin-room { height: 70vh; }
    html.descent:not([data-motion="paused"]) .pin-turn .pin-room { height: 110vh; }
    /* the mirror (visual QA, Ole 7 Oct 12:20: "a big empty white right side"): the line arrives while the stage comes up,
       so the pinned frame is whole from its first moment (photo + line); in the pin only its link arrives, then the hold */
    html.descent:not([data-motion="paused"]) .ground .pin-mirror .pin-stage > section { padding-top: 0; padding-bottom: 0; }
    html.descent:not([data-motion="paused"]) .ground .pin-mirror .reversal { animation: mra-line linear both; animation-timeline: --pin-mirror; animation-range: entry 35% entry 92%; }
    html.descent:not([data-motion="paused"]) .ground .pin-mirror .deeper { animation: mra-line linear both; animation-timeline: --pin-mirror; animation-range: entry 80% contain 22%; }
    /* Your turn: the sheet and the words hold; from ~35 % the night rises from below into the space under the words */
    html.descent:not([data-motion="paused"]) .pin-turn .pin-stage { justify-content: flex-start; }
    html.descent:not([data-motion="paused"]) .pin-night { display: block; position: relative; flex: 1 0 24vh; pointer-events: none;   /* fills the stage below the words, never over them */
      background: linear-gradient(to bottom, rgba(244, 242, 237, 0) 0%, #ebedee 6%, #cfe0f2 14%, #7fb0ea 24%, #2f74cf 33%, #0e3d8f 44%, #071a46 60%, #000 84%);
      animation: mra-dusk linear both; animation-timeline: --pin-turn; animation-range: contain 0% contain 100%; }
    /* the seam under the pin: no hairline of the white between the night and the footer (visual QA, 7 Oct) */
    html.descent:not([data-end="c"]):not([data-motion="paused"]) .pin-turn .pin-stage { background: linear-gradient(to bottom, var(--cube) calc(100% - 4px), #000 calc(100% - 4px)); }
    html.descent:not([data-motion="paused"]) .pin-night canvas { position: absolute; left: 0; top: 0; width: 100%; height: 30%; display: block; }
    html.descent:not([data-motion="paused"]) .ending .dusk { display: none; }   /* the pin's own dusk replaces the band */
    html.descent[data-end="c"]:not([data-motion="paused"]) .pin-night { display: none; }   /* the white ground: no dusk */
    @media (max-width: 759.98px) {   /* phones: shorter pins (the plan's phone test) */
      html.descent:not([data-motion="paused"]) .pin-mirror .pin-room { height: 45vh; }
      html.descent:not([data-motion="paused"]) .pin-turn .pin-room { height: 80vh; }
    }
  }
}
@keyframes mra-line { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes mra-dusk { from { transform: translateY(50%); } to { transform: none; } }   /* the horizon already shows at the foot of the pinned frame (visual QA: no empty half) */
/* ---------- the book scene: the score's loudest accent (HomeBook.astro + book-scene.js; Ole 02:36; ported from
   sketches/scrolly2/scrolly2.css, every class prefixed bk-). It plays only when book-scene.js adds html.bk-live (scroll
   timelines, motion allowed, no Pause); otherwise the calm stacked version shows. ---------- */
.hbook { padding-top: 0 !important; }
.bk[hidden] { display: none; }
.bk-rest { display: flex; align-items: center; justify-content: center; padding: 0 16px; }
.bk-rest-a { height: 70vh; }
.bk-one { font-size: clamp(17px, 1.6vw, 22px); letter-spacing: -.005em; text-align: center; margin: 0; max-width: none; }
.bk-rest-b { padding: 0 0 clamp(24px, 6vh, 64px); }
html.bk-live .bk-rest-b { padding-top: clamp(140px, 26vh, 260px); padding-bottom: 0;   /* visual QA (7 Oct): the scene's black fades back into the white (no hard cut), its link close under it */
  background: linear-gradient(to bottom, #000 0%, #121211 12%, #3a3936 30%, #8a8884 52%, #cfccc5 72%, #ebe9e3 86%, var(--cube) 100%) top / 100% clamp(110px, 22vh, 230px) no-repeat; }
.bk-pin { position: relative; height: 600vh; }
.bk-frame { position: sticky; top: var(--hd); height: calc(100vh - var(--hd)); width: 100%; overflow: hidden; background: #000; contain: layout paint; }
.bk-frame > * { position: absolute; }
.bk p { margin: 0; max-width: none; }
.bk .bk-off { visibility: hidden; }
.bk-room { inset: 0; }
.bk-photo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; will-change: opacity; }   /* the room, full screen (the stacked version shows it whole) */
.bk-photo.bk-soft { filter: blur(18px); transform: scale(1.08); opacity: 0; }
.bk-dim, .bk-black { inset: 0; background: #000; opacity: 0; will-change: opacity; }
.bk-cap { font-size: 13px; line-height: 1.35; color: #fff; letter-spacing: .005em; will-change: opacity, transform; }
.bk-cap-room { left: 24px; bottom: 22px; color: var(--ink); }
.bk-cap-book { left: 16px; right: 16px; text-align: center; opacity: 0; color: rgba(255, 255, 255, .88); }
.bk-render { left: 0; top: 0; width: 0; height: 0; }
.bk-render img { position: absolute; left: 0; top: 0; width: 1600px; height: 1200px; max-width: none; transform-origin: 0 0; will-change: transform, opacity; backface-visibility: hidden; }
.bk-r-cover { clip-path: polygon(233px 326px, 1004px 215px, 1449px 838px, 400px 1046px); }
.bk-stage { left: 0; top: 0; perspective: 1600px; transform-origin: 50% 50%; will-change: transform; }
.bk-pg { position: absolute; top: 0; width: 50%; height: 100%; overflow: hidden; box-shadow: 0 26px 60px rgba(0, 0, 0, .38); }
.bk-pg-l { left: 0; }
.bk-pg-r { left: 50%; }
.bk-sp { position: absolute; max-width: none; width: 226.63%; height: 119.75%; top: -9.877%; }
.bk-sp.bk-L { left: -13.314%; }
.bk-sp.bk-R { left: -113.314%; }
.bk-full { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.bk-leaf { position: absolute; left: 50%; top: 0; width: 50%; height: 100%; transform-origin: 0 50%; transform-style: preserve-3d; will-change: transform; }
.bk-face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.bk-face.bk-back { transform: rotateY(180deg); }
.bk-cover .bk-face.bk-front { box-shadow: 0 26px 60px rgba(0, 0, 0, .38); }
.bk-shade { position: absolute; inset: 0; opacity: 0; pointer-events: none; will-change: opacity; }
.bk-sh-f { background: linear-gradient(90deg, rgba(0, 0, 0, .30), rgba(0, 0, 0, .08) 45%, rgba(0, 0, 0, 0) 80%); }
.bk-sh-b { background: linear-gradient(270deg, rgba(0, 0, 0, .26), rgba(0, 0, 0, .06) 45%, rgba(0, 0, 0, 0) 80%); }
.bk-sh-under { background: linear-gradient(90deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0) 60%); }
.bk-alien { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 50% 100%; opacity: 0; will-change: transform, opacity; }
.bk-alien.bk-printed { mix-blend-mode: multiply; }
.bk-alien.bk-real { filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .35)); }
.bk-persp { inset: 0; perspective: 1600px; perspective-origin: 50% 50%; }
.bk-book3d { position: absolute; left: 0; top: 0; transform-style: preserve-3d; transform-origin: 0 50% 0; will-change: transform; }
.bk-b-front, .bk-b-spine { position: absolute; top: 0; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.bk-b-front { left: 0; width: 100%; }
.bk-b-front img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.bk-b-spine { background: #f3f2ee; transform: rotateY(-90deg); }
.bk-b-spine::before, .bk-sp1::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: max(2px, 1.6%); background: var(--saffron); }   /* the thin saffron edge */
.bk-b-spine .bk-shade, .bk-b-front .bk-shade { background: #000; }
.bk-row { inset: 0; }
.bk-sp1 { position: absolute; left: 0; top: 0; background: #f3f2ee; transform-origin: 0 0; opacity: 0; will-change: transform, opacity; }
.bk-counter { left: 24px; top: 20px; font-size: 13px; color: rgba(255, 255, 255, .9); font-variant-numeric: tabular-nums; opacity: 0; }
.bk-lines { left: 16px; right: 16px; top: 0; text-align: center; color: #fff; }
.bk-l1 { font-size: clamp(18px, 1.7vw, 24px); letter-spacing: -.005em; opacity: 0; will-change: opacity, transform; }
.bk-l2 { margin-top: 10px !important; font-size: clamp(13px, 1.05vw, 15px); color: rgba(255, 255, 255, .72); opacity: 0; will-change: opacity, transform; }
.bk-progress { left: 0; bottom: 0; height: 2px; width: 100%; background: var(--saffron); transform-origin: 0 50%; transform: scaleX(0); will-change: transform; }
@media (max-width: 600px) { .bk-cap-room { left: 16px; bottom: 18px; font-size: 12px; } .bk-counter { left: 16px; top: 16px; font-size: 12px; } .bk-cap-book { font-size: 12px; } }
/* the calm stacked version (no scripts, no scroll timelines, reduced motion, Pause): the same pictures and lines */
.bk-still { padding-top: clamp(48px, 9vh, 112px); }
.bk-still .pic { margin: 0 0 40px; max-width: 1100px; }
.bk-still-book { max-width: 700px !important; }
.bk-still-spreads { display: grid; gap: 24px; }
@media (min-width: 900px) { .bk-still-spreads { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bk-still-spreads .pic { margin: 0; } }
.bk-still-black { background: #000; color: #fff; padding: 72px 0 96px; margin-top: 40px; text-align: center; }
.bk-still-black p { max-width: none; }
.bk-counter-s { font-size: 13px; text-align: left; margin: 0 0 40px; color: rgba(255, 255, 255, .9); font-variant-numeric: tabular-nums; }
.bk-row-s { display: grid; grid-template-columns: repeat(100, 1fr); gap: 1px; margin: 0 0 40px; }
.bk-row-s i { display: block; aspect-ratio: 1 / 10; background: #f3f2ee; border-top: 2px solid var(--saffron); }
@media (max-width: 700px) { .bk-row-s { grid-template-columns: repeat(50, 1fr); row-gap: 8px; } .bk-row-s i { border-top-width: 1px; } }   /* phones: 2 × 50 */
.bk-still-black .bk-l1, .bk-still-black .bk-l2 { opacity: 1; }
.bk-still-black .ph:not(.op) { color: var(--saffron); }
/* while the scene plays, the stacked version stays for screen readers only */
html.bk-live .bk-still { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* ---------- the alien's label (Ole 7 Oct 02:41–02:42, the creative director's ★ A; src/components/AlienLabel.astro):
   the name or "Untitled" leads, "by …", the place and year, then small "MRA No. 2" like a museum's inventory number ---------- */
.alabel p, .alabel h1, .alabel h2, .alabel h3 { margin: 0; max-width: none; }
.al-title { font-weight: 700; font-size: 18px; line-height: 1.2; letter-spacing: -0.01em; color: var(--mra-ink); }
.al-title a { text-decoration: none; }
.al-title a:hover { text-decoration: underline; text-decoration-color: var(--saffron); }
.alien-one .al-title { font-size: clamp(32px, 4.4vw, 56px); line-height: 1.04; margin-bottom: 14px; }
.al-by { font-size: 15px; color: var(--ink); margin-top: 4px !important; }
.al-place { font-size: 15px; color: var(--ink-2); }
.al-no { font-size: 13px; color: var(--ink-2); letter-spacing: .05em; font-variant-numeric: tabular-nums; margin-top: 10px !important; }
.alien-one .al-by, .alien-one .al-place { font-size: 18px; }
.entry.held .al-no { margin: 0 0 6px !important; }
.sheet figcaption .alabel { margin-top: 2px; }
.sheet figcaption .al-title { font-size: 15px; }
.sheet figcaption .al-by, .sheet figcaption .al-place { font-size: 14px; }
.on-night .al-title, .on-night .al-by { color: #fff; }
.on-night .al-place, .on-night .al-no { color: var(--night-ink-2); }
.walk .held-anchor { display: block; height: 0; overflow: hidden; }   /* a held number: its anchor only (Ole 8 Oct) */
/* Quieter labels (Ole 8 Oct, voice via Codex: "work with grays … make some things more quiet … maybe the name"). The drawings
   carry the colour; the name is smaller and grey but readable; artist, place and number quieter still; on black a soft white,
   never stark. LOCAL PROPOSAL for Ole's review. Contrast (AA): #3a3a36 on white 11.4:1 · #55554f 7.4:1 · on black #e6e4de
   16:1 · #b9b7b0 10:1 · #8a8a86 6:1. */
.al-title { font-size: 16px; color: #3a3a36; }
.alien-one .al-title { font-size: clamp(26px, 3.2vw, 40px); color: #3a3a36; }
.al-by { color: var(--ink-2); }
.al-no { font-size: 13px; }
.on-night .al-title { color: #e6e4de; }
.on-night .al-by { color: #b9b7b0; }
.on-night .al-place, .on-night .al-no { color: var(--night-ink-2); }
.entrance .e-yours { pointer-events: none; }   /* decorative "No. ___": never covers Clear / Done (after the note under the sheet left, Ole 8 Oct) */