/* The Most Realistic Alien · the pictures, graphics and motion of three pages: A hundred years (/vision/), Take part
   (/join/ + /workshops/host/), Press & art world (/press/). Ole 7 Oct 12:22: "more graphics, motion or photos; if there are
   no photos, take placeholders". MRA · Website, art director lane (docs/2026-10-07_ART-DIRECTION_lists.md).
   Linked only from those pages (the Base layout's "before" slot), never from the home. Prefix: vx-.
   Rules kept: black, white and saffron only (greys from site.css); Helvetica Neue; the words never move (stillness,
   DECIDED 6 Oct 20:22 (8): no text fades). Motion is only scroll-driven (the visitor's scroll is the clock: nothing moves
   by itself), transform/opacity only, and only where the browser has scroll timelines, motion is allowed and the site's
   Pause is off. Everywhere else the graphic stands finished: that is its default state. Code graphics marked "stand-in"
   wait for Ole's Procreate line (the lists). */

/* ---------- shared ---------- */
.vx-eyebrow { font-size: 14px; color: var(--ink-2); margin: 0 0 12px; }
.night .vx-eyebrow { color: var(--night-ink-2); }
.vx-fig { margin: 0; }
.vx-fig img { width: 100%; height: auto; background: var(--panel); }
.vx-fig figcaption { font-size: 14px; color: var(--ink-2); margin-top: 8px; max-width: 40em; }
.night .vx-fig figcaption { color: var(--night-ink-2); }
.vx-fig.paper img { border: 1px solid var(--rule); }
.vx-ic { display: block; width: 48px; height: 48px; color: #000; flex: none; }
.night .vx-ic { color: #fff; }
.vx-ic svg { width: 100%; height: 100%; overflow: visible; }
.vx-ic .s { stroke: var(--saffron); }
.vx-ic .f { fill: var(--saffron); stroke: none; }
.vx-standin { font-size: 13px; color: var(--ink-2); margin: 12px 0 0; }

/* a picture that does not exist yet: a light grey frame of the right shape, with what goes there (bracketed, marked) */
.vx-slot { margin: 0; }
.vx-slot .box { aspect-ratio: var(--ar, 3 / 2); background: #ececea; border: 1px dashed #b9b9b4; display: flex; align-items: flex-end; padding: 14px; }
.vx-slot .box p { margin: 0; font-size: 14px; line-height: 1.35; color: var(--ink-2); max-width: 24em; }
.vx-slot .box .ph { font-size: 14px; }
.vx-slot figcaption { font-size: 14px; color: var(--ink-2); margin-top: 8px; }
.night .vx-slot .box { background: #1a1a1a; border-color: #444; }
.night .vx-slot .box p { color: var(--night-ink-2); }

/* section rhythm: a rest between two loud moments */
.vx-rest { padding: 32px 0; }
.vx-two { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
@media (min-width: 900px) { .vx-two { grid-template-columns: 5fr 7fr; gap: 64px; } .vx-two.flip { grid-template-columns: 7fr 5fr; } }

/* ---------- A hundred years ---------- */
/* the hundred in one look: 10 × 10 squares, one per year, 2027 the first in saffron (H3 of the scrolly plan, still) */
.vx-hero { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: end; }
@media (min-width: 900px) { .vx-hero { grid-template-columns: 7fr 4fr; gap: 64px; } }
.vx-hundred { margin: 0; max-width: min(220px, 60vw); }
@media (min-width: 900px) { .vx-hundred { max-width: 320px; } }
.vx-hundred .g { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.vx-hundred .g i { display: block; aspect-ratio: 1; border: 1px solid #5a5a57; }
.vx-hundred .g i.v1 { background: var(--saffron); border-color: var(--saffron); }
.vx-hundred .ends { display: flex; justify-content: space-between; font-size: 14px; color: var(--night-ink-2); margin-top: 8px; font-variant-numeric: tabular-nums; }

/* the century shelf, rising: 100 spines on an axis (2027 · Vol. 1 … 2126 · Vol. 100), decades marked */
.vx-shelf { margin: 48px 0 0; }
.vx-shelf .row { display: grid; grid-template-columns: repeat(100, 1fr); gap: 2px; height: clamp(90px, 16vw, 180px); align-items: end; }
.vx-shelf .row span { display: block; height: 100%; background: #fff; border: 1px solid #cfcfcb; border-bottom: 0; transform-origin: 50% 100%; }
.vx-shelf .row span:nth-child(3n) { height: 94%; } .vx-shelf .row span:nth-child(7n) { height: 88%; }
.vx-shelf .row span.v1 { border-color: #000; border-top: 4px solid var(--saffron); }
@media (max-width: 599px) { .vx-shelf .row { gap: 1px; } .vx-shelf .row span { border-width: 1px 0.5px 0; } .vx-time .ticks { gap: 0.5px; } }
.vx-shelf .axis { position: relative; height: 26px; border-top: 1px solid #000; }
.vx-shelf .axis .run { position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--saffron); transform-origin: 0 50%; }
.vx-shelf .axis b { position: absolute; top: 0; width: 1px; height: 8px; background: #000; }
.vx-shelf .ends { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.vx-shelf .ends strong { color: #000; }

.vx-renders { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 48px; }
@media (min-width: 760px) { .vx-renders { grid-template-columns: 1fr 1fr; } }

.vx-kept { margin-top: 48px; }
.vx-kept .vx-slot { max-width: 300px; }
@media (min-width: 900px) { .vx-kept .vx-slot { max-width: none; } }

/* what finished looks like: the end date as a large, still number beside the list */
.vx-finish { display: grid; grid-template-columns: 1fr; gap: 0 64px; }
.vx-finish .big { white-space: nowrap; font-size: clamp(72px, 16vw, 220px); font-weight: 700; letter-spacing: -0.04em; line-height: .85; color: #000; margin: 24px 0 0; font-variant-numeric: tabular-nums; }
.vx-finish .big i { font-style: normal; color: var(--saffron); }
@media (min-width: 1000px) { .vx-finish { grid-template-columns: 5fr 7fr; } .vx-finish .big { position: sticky; top: 120px; } }

/* ---------- Take part ---------- */
/* the call: the two instructions as the picture, the A5 sheet beside them */
.vx-call { padding: 72px 0; }
.vx-call .in { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
@media (min-width: 1000px) { .vx-call .in { grid-template-columns: 8fr 3fr; gap: 64px; } }
.vx-instr { margin: 0; max-width: none; font-weight: 700; letter-spacing: -0.035em; line-height: 1; color: #000; font-size: min(8.4vw, 112px); }
@media (min-width: 1000px) { .vx-instr { font-size: min(6.6vw, 112px); } }
.vx-instr span { display: block; white-space: nowrap; }
.vx-a5fig { margin: 0; width: min(220px, 40vw); }
.vx-a5 { position: relative; aspect-ratio: 148 / 210; }
.vx-a5 i { position: absolute; background: #000; }
.vx-a5 .t { left: 0; right: 0; top: 0; height: 1.5px; transform-origin: 0 50%; }
.vx-a5 .r { top: 0; bottom: 0; right: 0; width: 1.5px; transform-origin: 50% 0; }
.vx-a5 .b { left: 0; right: 0; bottom: 0; height: 1.5px; transform-origin: 100% 50%; }
.vx-a5 .l { top: 0; bottom: 0; left: 0; width: 1.5px; transform-origin: 50% 100%; }
.vx-a5 .pen { position: absolute; right: -26px; bottom: 8%; width: 18px; height: 120px; }
.vx-a5 .pen svg { width: 100%; height: 100%; }
.vx-a5fig figcaption { font-size: 14px; color: var(--ink-2); margin-top: 10px; }

/* the tables: real workshop photos, one large then a row (a rest: nothing moves) */
.vx-tables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.vx-tables .vx-fig:first-child { grid-column: 1 / -1; }
@media (min-width: 900px) { .vx-tables { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .vx-tables .vx-fig:first-child { grid-column: span 2; grid-row: span 2; } }
.vx-tables .vx-fig img { aspect-ratio: 3 / 2; object-fit: cover; }
.vx-tables .vx-fig:first-child img { aspect-ratio: auto; }

/* the ways: a stand-in icon, the words, a picture or a graphic */
.vx-ways { list-style: none; padding: 0; margin: 0; }
.vx-ways > li { display: grid; grid-template-columns: 1fr; gap: 16px 32px; padding: 40px 0; border-top: 1px solid #000; }
.vx-ways > li:first-child { border-top: 0; padding-top: 0; }
.vx-ways h2 { font-size: clamp(24px, 3vw, 32px); }
.vx-ways .vis { max-width: 420px; }
@media (min-width: 900px) { .vx-ways > li { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 380px); } .vx-ways .vis { max-width: none; } }
.vx-ways .vx-ic { margin-top: 4px; }
.vx-ways .vx-steps-mini { display: flex; gap: 20px; margin: 4px 0 0; padding: 0; list-style: none; }
.vx-ways .vx-steps-mini .vx-ic { width: 40px; height: 40px; }
.vx-ways .sheet { max-width: 220px; }

/* the ripple: 1 → 3 → 9, each told three; no forecast, no count beyond the picture */
.vx-ripple { margin: 0; }
.vx-ripple svg { width: 100%; height: auto; display: block; color: #000; }
.vx-ripple .ln { stroke: #000; stroke-width: 1; fill: none; }
.vx-ripple .dt { fill: #000; }
.vx-ripple .d1 { fill: var(--saffron); }
.vx-ripple text { font: 400 14px var(--font); fill: var(--ink-2); }
.vx-ripple figcaption { font-size: 14px; color: var(--ink-2); margin-top: 8px; }

/* ---------- Host a table ---------- */
.vx-need { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; list-style: none; padding: 0; margin: 0 0 24px; max-width: 420px; }
.vx-need li { font-size: 14px; color: var(--ink-2); }
.vx-need .vx-ic { width: 48px; height: 48px; margin-bottom: 6px; }
.vx-steps > li { display: grid; grid-template-columns: 1fr; gap: 12px 28px; max-width: none; }
@media (min-width: 760px) { .vx-steps > li { grid-template-columns: 56px minmax(0, 44em); } .vx-steps > li > .body { grid-column: 2; } }
.vx-steps .extra { margin-top: 24px; }
.vx-hostpics { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 24px; }
@media (min-width: 760px) { .vx-hostpics { grid-template-columns: 3fr 2fr; } }

/* the wall: every alien whole, the same height, the same space (frames on one saffron hairline) */
.vx-wall { margin: 24px 0 0; max-width: 560px; }
.vx-wall .w { position: relative; display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; padding: 18px 0; }
.vx-wall .w::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--saffron); }
.vx-wall .w i { position: relative; display: block; aspect-ratio: 148 / 210; border: 1px solid #000; background: #fff; }
.vx-wall figcaption { font-size: 14px; color: var(--ink-2); }

/* ---------- Press & art world ---------- */
/* the fact sheet as one designed block: a sheet of paper with ruled cells */
.vx-factsheet { margin: 40px 0 0; border: 1px solid #000; background: #fff; max-width: 1000px; }
.vx-factsheet .head { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 14px 18px; border-bottom: 1px solid #000; font-size: 14px; }
.vx-factsheet .head b { font-size: 14px; }
.vx-factsheet .head .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--saffron); margin-right: 8px; vertical-align: 1px; }
.vx-factsheet dl { display: grid; grid-template-columns: 1fr; margin: 0; }
.vx-factsheet dt { font-weight: 700; font-size: 14px; padding: 14px 18px 2px; }
.vx-factsheet dd { margin: 0; padding: 0 18px 14px; border-bottom: 1px solid var(--rule); }
.vx-factsheet dd:last-of-type { border-bottom: 0; }
.vx-factsheet dd.count { font-size: clamp(22px, 3vw, 30px); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.vx-factsheet dd.count .asof { font-size: 14px; font-weight: 400; letter-spacing: 0; }
@media (min-width: 760px) {
  .vx-factsheet dl { grid-template-columns: 180px 1fr; }
  .vx-factsheet dt { padding: 16px 18px; border-bottom: 1px solid var(--rule); }
  .vx-factsheet dd { padding: 16px 18px; }
  .vx-factsheet dt:last-of-type { border-bottom: 0; }
}

/* the timeline: what happened (2008–2013), a break, then the hundred years (2027–2126) */
.vx-time { margin: 48px 0 0; }
.vx-time .axis { display: grid; grid-template-columns: 1fr; gap: 28px; }
.vx-time .seg { position: relative; }
.vx-time .seg .line { position: relative; height: 1px; background: #000; margin: 0 0 14px; }
.vx-time .seg .run { position: absolute; inset: 0; background: var(--saffron); transform-origin: 0 50%; height: 2px; top: -0.5px; }
.vx-time .seg ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.vx-time .seg li { font-size: 14px; color: var(--ink-2); padding-left: 16px; position: relative; max-width: 22em; }
.vx-time .seg li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: #000; }
.vx-time .seg li.fut::before { background: var(--saffron); }
.vx-time .seg li b { color: #000; font-variant-numeric: tabular-nums; display: block; }
.vx-time .ticks { display: grid; grid-template-columns: repeat(100, 1fr); gap: 1px; height: 14px; align-items: start; margin: -14px 0 14px; }
.vx-time .ticks i { display: block; width: 1px; height: 5px; background: #000; transform-origin: 50% 0; }
.vx-time .ticks i:nth-child(10n + 1) { height: 14px; }
.vx-time .ticks i:first-child { background: var(--saffron); width: 3px; height: 14px; }
.vx-time .brk { font-size: 14px; color: var(--ink-2); }
@media (min-width: 900px) {
  .vx-time .axis { grid-template-columns: 4fr 64px 7fr; gap: 0; align-items: start; }
  .vx-time .seg ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
  .vx-time .seg.future ol { grid-template-columns: 1fr 1fr; }
  .vx-time .brk { text-align: center; padding-top: 0; transform: translateY(-11px); }
}

/* the installation: Thaillywood, one large, two beside */
.vx-install { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 24px; }
@media (min-width: 900px) { .vx-install { grid-template-columns: 2fr 1fr; } .vx-install .side { display: grid; gap: 20px; } }

/* the texts in the making: three empty sheets */
.vx-texts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; max-width: 480px; }
.vx-texts li { margin: 0; }
.vx-texts .pg { aspect-ratio: 210 / 297; background: #fff; border: 1px solid #000; position: relative; }
.vx-texts .pg::before, .vx-texts .pg::after { content: ""; position: absolute; left: 14%; right: 30%; height: 1px; background: var(--rule); top: 18%; box-shadow: 0 10px 0 var(--rule), 0 20px 0 var(--rule); }
.vx-texts .pg::after { top: 46%; right: 14%; }
.vx-texts span { display: block; font-size: 14px; color: var(--ink-2); margin-top: 8px; line-height: 1.3; }

/* the press images: a grid, each with its credit */
.vx-press { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; margin-top: 32px; }
@media (min-width: 900px) { .vx-press { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 20px; } }
.vx-press .vx-fig img, .vx-press .vx-slot .box { aspect-ratio: 4 / 3; object-fit: cover; }
.vx-press .vx-fig.contain img { object-fit: contain; background: var(--panel); }
.vx-press .sheet .paper { aspect-ratio: 4 / 3; }
.vx-press .vx-credit { display: block; font-size: 13px; font-weight: 400; color: var(--ink-2); margin-top: 2px; }

/* ---------- motion: scroll-driven only, the graphic finished by default ---------- */
@keyframes vx-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes vx-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes vx-appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes vx-settle { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes vx-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* the shelf: a hundred spines rise one after another as it comes up the screen; the saffron run follows the axis */
    :root:not([data-motion="paused"]) .vx-shelf { view-timeline-name: --vxshelf; view-timeline-axis: block; }
    :root:not([data-motion="paused"]) .vx-shelf .row span { animation: vx-grow-y linear both; animation-timeline: --vxshelf; animation-range: cover calc(6% + var(--i) * .3%) cover calc(12% + var(--i) * .3%); }
    :root:not([data-motion="paused"]) .vx-shelf .axis .run { animation: vx-grow-x linear both; animation-timeline: --vxshelf; animation-range: cover 6% cover 42%; }
    /* the sheet: the outline draws itself in the intro's order (top, right, bottom, left), the pencil when it closes */
    :root:not([data-motion="paused"]) .vx-a5 { view-timeline-name: --vxa5; view-timeline-axis: block; }
    :root:not([data-motion="paused"]) .vx-a5 .t { animation: vx-grow-x linear both; animation-timeline: --vxa5; animation-range: cover 12% cover 22%; }
    :root:not([data-motion="paused"]) .vx-a5 .r { animation: vx-grow-y linear both; animation-timeline: --vxa5; animation-range: cover 22% cover 32%; }
    :root:not([data-motion="paused"]) .vx-a5 .b { animation: vx-grow-x linear both; animation-timeline: --vxa5; animation-range: cover 32% cover 40%; }
    :root:not([data-motion="paused"]) .vx-a5 .l { animation: vx-grow-y linear both; animation-timeline: --vxa5; animation-range: cover 40% cover 48%; }
    :root:not([data-motion="paused"]) .vx-a5 .pen { animation: vx-appear linear both; animation-timeline: --vxa5; animation-range: cover 48% cover 54%; }
    /* the ripple: one, then three, then nine */
    :root:not([data-motion="paused"]) .vx-ripple { view-timeline-name: --vxrip; view-timeline-axis: block; }
    :root:not([data-motion="paused"]) .vx-ripple .k1 { animation: vx-pop linear both; animation-timeline: --vxrip; animation-range: cover 14% cover 22%; transform-box: fill-box; transform-origin: center; }
    :root:not([data-motion="paused"]) .vx-ripple .k2 { animation: vx-pop linear both; animation-timeline: --vxrip; animation-range: cover 24% cover 34%; transform-box: fill-box; transform-origin: center; }
    :root:not([data-motion="paused"]) .vx-ripple .k3 { animation: vx-pop linear both; animation-timeline: --vxrip; animation-range: cover 36% cover 48%; transform-box: fill-box; transform-origin: center; }
    :root:not([data-motion="paused"]) .vx-ripple .l2 { animation: vx-appear linear both; animation-timeline: --vxrip; animation-range: cover 22% cover 28%; }
    :root:not([data-motion="paused"]) .vx-ripple .l3 { animation: vx-appear linear both; animation-timeline: --vxrip; animation-range: cover 34% cover 40%; }
    /* the wall: the frames come down onto the one line, left to right */
    :root:not([data-motion="paused"]) .vx-wall { view-timeline-name: --vxwall; view-timeline-axis: block; }
    :root:not([data-motion="paused"]) .vx-wall .w i { animation: vx-settle linear both; animation-timeline: --vxwall; animation-range: cover calc(12% + var(--i) * 3%) cover calc(20% + var(--i) * 3%); }
    /* the press timeline: the run along the hundred years, the ticks one by one */
    :root:not([data-motion="paused"]) .vx-time { view-timeline-name: --vxtime; view-timeline-axis: block; }
    :root:not([data-motion="paused"]) .vx-time .run { animation: vx-grow-x linear both; animation-timeline: --vxtime; animation-range: cover 10% cover 45%; }
    :root:not([data-motion="paused"]) .vx-time .ticks i { animation: vx-grow-y linear both; animation-timeline: --vxtime; animation-range: cover calc(14% + var(--i) * .3%) cover calc(18% + var(--i) * .3%); }
  }
}