/* ═══════════════════════════════════════════
   PLATFORM · DREAM — ricrios.com/dream, RRRz in its founder's words

   The one page that speaks as the founder (ruled by Ric 2026-10-24 and
   2026-10-25): why, what it drew from, why it exists, every version,
   craft, impact, where it stands, and a colophon. Loaded after
   pages.css, whose frame (the ASCII plate, the back link, the arc, the
   listen button) it rides unchanged; only dream.html loads it, the way
   snake.html alone loads snake.css.

   NO NEW INK. Every colour is a platform token; the machine's own
   colours appear only in its photographs. The few sizes the platform
   does not carry are declared once, below, as tokens.
   ═══════════════════════════════════════════ */

:root {
    --dream-wide: 75rem;          /* the widest band of copy and plates */
    --dream-col: 53.75rem;        /* the memo's own column (.case-page) */
    --dream-gutter: 10rem;        /* the label column beside each part */
    --dream-dt: 9rem;             /* an influence's name column */
    --dream-ground: hsl(var(--ground-000));   /* the machine's screens are black in both rooms */
    --dream-hours-h: 1.75rem;     /* the hour labels under the day strip */
    --dream-pair: 34rem;          /* the day and night pair */
    --dream-glass: 22rem;         /* a version's face on a desk: the whole glass and its track in one 900-tall view */
    --dream-thumb: 1.75rem;       /* the track's thumb, inside a 44 px row */
    --dream-track: 2px;           /* the track's line, the memo's hairline doubled */
    --dream-chip-w: 2.75rem;      /* a version's name under the track: a thumb's 44 */
    --dream-glide: var(--dur-base);   /* the settle onto the nearest version (none under reduced motion) */
    --dream-note-ratio: 3 / 4;    /* a craft picture's window */
    --dream-impact-dt: 16rem;     /* the impact list's figure column */
}

/* ── Frame ─────────────────────────────────── */
.dream-page { padding: var(--band) 0 var(--space-3xl); }
.dream-wrap { max-width: var(--dream-wide); margin-inline: auto; padding-inline: var(--safe-inline); }
.dream-page .case-page-footer { max-width: var(--dream-col); margin-inline: auto; padding-inline: var(--safe-inline); padding-top: var(--space-xl); }

.dream-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0;
}

/* Visually hidden, read aloud: the plain-text twin of a control. */
.dream-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* The machine's pictures: screens, so black in both rooms, at their own
   ratio, never stretched, a hairline round each. */
.dream-shot { margin: 0; }
.dream-shot img {
    display: block;
    width: 100%;
    height: auto;
    background: var(--dream-ground);
    border: 1px solid var(--line);
}

/* The two doors: the free machine first, the listing second. Label voice,
   the accent on the free one alone, a thumb's 44 on both. */
.dream-doors { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-xl); margin: 0; padding: 0; list-style: none; }
.dream-doors a {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    min-height: 44px;
    text-decoration: underline;
    text-decoration-color: var(--line);
    text-underline-offset: 0.35em;
}
.dream-doors a:hover, .dream-doors a:focus-visible { color: var(--accent); text-decoration-color: currentColor; }
.dream-doors .dream-door-play { color: var(--accent); text-decoration-color: currentColor; }

/* ── The head ───────────────────────────────── */
.dream-page h1 {
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    font-size: var(--text-4xl);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--mark-ink);
    margin: var(--space-md) 0 var(--space-xs);
    text-wrap: balance;
}
.dream-by { margin: 0; }

/* A part's number, in the label's mono and the accent: the ascii stack
   is kept for the plates alone (the Rams gate, ASCII ROLE). */
.dream-no { font-family: var(--font-mono); font-weight: var(--weight-bold); color: var(--accent); font-size: var(--text-lg); letter-spacing: normal; }

/* The opening: his first sentence at display size, then the rest at the
   memo's reading size, in one narrow column. */
.dream-open { max-width: var(--dream-col); margin-top: var(--space-xl); }
.dream-open > h2 { display: flex; align-items: baseline; gap: var(--space-sm); margin-bottom: var(--space-md); }
.dream-lede {
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    font-size: var(--display-2);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
    margin: 0 0 var(--space-xl);
    max-width: 15ch;
    text-wrap: balance;
}
.dream-prose p { font-size: var(--text-xl); line-height: var(--leading-body); max-width: var(--measure-narrow); margin: 0 0 var(--space-md); text-wrap: pretty; }
.dream-prose p:last-child { margin-bottom: 0; }

/* The day and the night, the same machine. */
.dream-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); max-width: var(--dream-pair); margin: var(--space-3xl) 0 0; }
.dream-pair-cap { margin-top: var(--space-sm); grid-column: 1 / -1; }

/* ── A part: its number and name in the gutter, the words beside ── */
.dream-part { margin-top: var(--band); padding-top: var(--space-xl); border-top: 1px solid var(--line); display: grid; grid-template-columns: var(--dream-gutter) minmax(0, 1fr); gap: var(--space-md) var(--space-xl); }
.dream-part > header { grid-column: 1; }
.dream-part > header h2 { margin-top: var(--space-xs); }
.dream-part > div { grid-column: 2; min-width: 0; }
.dream-part > div > p:not([class]) { font-size: var(--text-lg); max-width: var(--measure-narrow); margin: 0 0 var(--space-md); }
@media (max-width: 640px) {
    .dream-part { grid-template-columns: 1fr; }
    .dream-part > header, .dream-part > div { grid-column: 1; }
}

/* ── 02 What it drew from ───────────────────── */
.dream-influences { list-style: none; margin: var(--space-xl) 0 0; padding: 0; border-top: 1px solid var(--line); max-width: var(--measure); }
.dream-influences li { display: grid; grid-template-columns: var(--dream-dt) minmax(0, 1fr); gap: var(--space-xs) var(--space-lg); padding: var(--space-lg) 0; border-bottom: 1px solid var(--line); }
.dream-influences h3 { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--mark-ink); margin: 0; padding-top: 0.35em; line-height: var(--leading-snug); }
.dream-influences h3 span { display: block; color: var(--text-muted); font-weight: var(--weight-regular); margin-top: var(--space-xs); }
.dream-influences p { margin: 0 0 var(--space-sm); font-size: var(--text-base); line-height: var(--leading-body); }
.dream-influences p:last-child { margin-bottom: 0; }
@media (max-width: 560px) { .dream-influences li { grid-template-columns: 1fr; } }

.dream-values { list-style: none; margin: var(--space-2xl) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); max-width: var(--measure); }
.dream-values li { border-top: 2px solid var(--line-strong, var(--line)); padding-top: var(--space-sm); }
.dream-values b { display: block; font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--text-xl); line-height: var(--leading-tight); margin-bottom: var(--space-xs); }
.dream-values p { margin: 0; font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-snug); }
@media (max-width: 720px) { .dream-values { grid-template-columns: 1fr; } }

/* ── 03 The promise, at display size ───────── */
.dream-promise-label { margin-top: var(--space-2xl); }
.dream-promise { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--display-2); line-height: var(--leading-display); letter-spacing: var(--tracking-display); color: var(--mark-ink); margin: var(--space-xs) 0 0; max-width: 14ch; text-wrap: balance; }

/* ── 04 Seven versions: one track through all seven ── */
.dream-versions { margin-top: var(--space-xl); }

/* Without script: the seven faces in a row that scrolls sideways, each
   captioned. The page never scrolls sideways; only this row does. */
.dream-versions-stops { list-style: none; margin: 0; padding: 0 0 var(--space-sm); display: grid; grid-auto-flow: column; grid-auto-columns: min(70%, 14rem); gap: var(--space-md); overflow-x: auto; scroll-snap-type: x mandatory; }
.dream-stop { scroll-snap-align: start; }
.dream-stop figure { margin: 0; }
.dream-stop img { display: block; width: 100%; height: auto; background: var(--dream-ground); border: 1px solid var(--line); }
.dream-stop figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--text-muted); }
.dream-stop figcaption b { display: block; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text); margin-bottom: var(--space-xs); }

/* With script: the faces stacked as one glass; the next version wipes in
   left of the seam; the captions stay for a screen reader. */
.dream-versions.is-live { display: grid; grid-template-columns: minmax(0, var(--dream-glass)) minmax(0, 1fr); grid-template-areas: "glass read" "ctl read"; gap: 0 var(--space-2xl); align-items: start; }
.dream-versions.is-live .dream-versions-glass { grid-area: glass; position: relative; }
.dream-versions.is-live .dream-versions-stops { display: block; position: relative; overflow: visible; padding: 0; }
.dream-versions.is-live .dream-stop { position: absolute; inset: 0; visibility: hidden; }
.dream-versions.is-live .dream-stop:first-child { position: relative; }
.dream-versions.is-live .dream-stop[data-layer="base"] { visibility: visible; z-index: 1; }
.dream-versions.is-live .dream-stop[data-layer="wipe"] { visibility: visible; z-index: 2; clip-path: inset(0 var(--dream-wipe, 100%) 0 0); }
.dream-versions.is-live .dream-stop figcaption {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); border: 0;
}
.dream-versions-seam { position: absolute; top: 0; bottom: 0; left: var(--dream-seam, 0%); width: 2px; margin-left: -1px; background: var(--focus-ring); box-shadow: 0 0 0 1px var(--dream-ground); z-index: 3; pointer-events: none; }
.dream-versions-seam[hidden] { display: none; }

.dream-versions-ctl { grid-area: ctl; margin-top: var(--space-sm); }
.dream-versions-ctl[hidden], .dream-versions-read[hidden] { display: none; }

/* The track: a hairline, a pill thumb, a thumb's 44 to hold. */
.dream-versions-range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; touch-action: pan-y; }
.dream-versions-range:focus { outline: none; }
.dream-versions-range:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.dream-versions-range::-webkit-slider-runnable-track { height: var(--dream-track); background: var(--line-strong, var(--line)); border: 0; }
.dream-versions-range::-moz-range-track { height: var(--dream-track); background: var(--line-strong, var(--line)); border: 0; }
.dream-versions-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: var(--dream-thumb); height: var(--dream-thumb); margin-top: calc((var(--dream-track) - var(--dream-thumb)) / 2); border-radius: var(--radius-pill); background: var(--accent); border: 2px solid var(--dream-ground); box-shadow: 0 0 0 1px var(--accent); }
.dream-versions-range::-moz-range-thumb { width: var(--dream-thumb); height: var(--dream-thumb); border-radius: var(--radius-pill); background: var(--accent); border: 2px solid var(--dream-ground); box-shadow: 0 0 0 1px var(--accent); }

/* The seven names sit under their stops: a stop's place on the track is
   half a thumb in from each end, and each name is a 44 wide target. */
.dream-chips { position: relative; height: 44px; margin: 0 calc(var(--dream-thumb) / 2); }
.dream-chip {
    position: absolute; top: 0;
    left: calc(var(--k) / 6 * 100%);
    transform: translateX(-50%);
    min-width: var(--dream-chip-w); height: 44px; padding: 0;
    background: none; border: 0; cursor: pointer;
    font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.02em;
    color: var(--text-muted);
}
/* the two ends sit inside the track: 1.0 starts at its left, 1.0.6 ends at its right */
.dream-chip:first-child { transform: translateX(calc(var(--dream-thumb) / -2)); }
.dream-chip:last-child { transform: translateX(calc(-100% + var(--dream-thumb) / 2)); }
.dream-chip:hover { color: var(--text); }
.dream-chip.is-on { color: var(--accent); }
.dream-chip.is-est { text-decoration: underline dotted; text-underline-offset: 0.3em; }

/* The reading: which version, when, and what changed. */
.dream-versions-read { grid-area: read; padding-top: var(--space-md); border-top: 1px solid var(--line); }
.dream-read-v { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--display-2); line-height: var(--leading-display); letter-spacing: var(--tracking-display); color: var(--mark-ink); margin: 0 0 var(--space-xs); font-variant-numeric: tabular-nums; }
.dream-read-line { font-size: var(--text-xl); line-height: var(--leading-snug); max-width: 30ch; margin: var(--space-md) 0 0; text-wrap: pretty; }
.dream-read-hint { margin-top: var(--space-xl); }

@media (max-width: 760px) {
    .dream-versions.is-live { grid-template-columns: minmax(0, 1fr); grid-template-areas: "glass" "ctl" "read"; }
    .dream-versions-read { border-top: 0; padding-top: var(--space-xs); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 var(--space-md); align-items: baseline; }
    .dream-read-v { font-size: var(--text-4xl); grid-row: 1 / span 2; }
    .dream-read-line { font-size: var(--text-base); margin-top: var(--space-xs); max-width: none; }
    .dream-read-hint { display: none; }
}

/* ── 05 Craft: a few notes, each with its picture ── */
.dream-notes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xl) var(--space-xl); }
.dream-note figure { margin: 0 0 var(--space-md); }
.dream-frame { overflow: hidden; background: var(--dream-ground); border: 1px solid var(--line); aspect-ratio: var(--ratio, var(--dream-note-ratio)); }
.dream-frame img, .dream-frame video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.dream-note h3 { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--text-xl); line-height: var(--leading-tight); margin: 0 0 var(--space-xs); }
.dream-note p { margin: 0; font-size: var(--text-base); line-height: var(--leading-body); color: var(--text-muted); max-width: var(--measure-narrow); }
.dream-note figcaption { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); margin-top: var(--space-sm); line-height: var(--leading-snug); }
.dream-note .memo-listen-btn { margin-top: var(--space-sm); }
.dream-note-wide { grid-column: 1 / -1; }
@media (max-width: 900px) { .dream-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .dream-notes { grid-template-columns: 1fr; } }

/* The day: twenty-four photographs of the glass, one an hour, cut into one
   strip. Now in New York is a hairline on it. */
.dream-day { position: relative; }
.dream-day-strip { position: relative; overflow: hidden; border: 1px solid var(--line); background: var(--dream-ground); }
.dream-day-strip img { display: block; width: 100%; height: auto; }
.dream-now { position: absolute; top: 0; bottom: 0; left: calc(var(--dream-now, 0) * 100%); width: 2px; margin-left: -1px; background: var(--focus-ring); box-shadow: 0 0 0 1px var(--dream-ground); display: none; }
.dream-day.has-now .dream-now { display: block; }
.dream-hours { position: relative; height: var(--dream-hours-h); margin-top: var(--space-xs); }
.dream-hours span { position: absolute; transform: translateX(-50%); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; color: var(--text-muted); }
.dream-hours span:first-child { transform: none; }
.dream-hours span:last-child { transform: translateX(-100%); }

/* ── 06 Impact, stated once: a hairline list, the figure and its words ── */
.dream-impact { margin: 0; border-top: 1px solid var(--line); max-width: var(--measure); }
.dream-impact > div { display: grid; grid-template-columns: minmax(0, var(--dream-impact-dt)) minmax(0, 1fr); gap: var(--space-xs) var(--space-lg); align-items: baseline; padding: var(--space-md) 0; border-bottom: 1px solid var(--line); }
.dream-impact dt { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--text-2xl); line-height: var(--leading-tight); color: var(--mark-ink); }
.dream-impact dd { margin: 0; font-size: var(--text-base); color: var(--text-muted); line-height: var(--leading-snug); }
.dream-surfaces { margin: var(--space-lg) 0 0; font-size: var(--text-base); line-height: var(--leading-body); color: var(--text-muted); max-width: var(--measure-narrow); }
@media (max-width: 560px) { .dream-impact > div { grid-template-columns: 1fr; } }

/* ── Where it stands, and the colophon ──────── */
.dream-stands { margin-top: var(--band); max-width: var(--dream-col); }
.dream-stands p { font-size: var(--text-xl); max-width: var(--measure-narrow); margin: var(--space-md) 0 var(--space-lg); }

.dream-colophon { margin-top: var(--band); padding-top: var(--space-xl); border-top: 1px solid var(--line); display: grid; grid-template-columns: var(--dream-gutter) minmax(0, 1fr); gap: var(--space-md) var(--space-xl); }
.dream-colophon > div { max-width: var(--measure); }
.dream-colophon p { font-size: var(--text-sm); line-height: var(--leading-body); color: var(--text-muted); margin: 0 0 var(--space-sm); }
.dream-colophon p b { color: var(--text); font-weight: var(--weight-semibold); }
@media (max-width: 640px) { .dream-colophon { grid-template-columns: 1fr; } }