/* ── THE CURTAIN (27 Sept 2026): the site's own page transition ──────
   Copied from board-shell.css (the .pt block, which is PressingTransition's
   lifted into plain CSS), not re-derived: a white panel falls, a black one
   rises over it, and the name of what is arriving repeats down both at the
   same coordinates, so the type inverts along the moving edge. The page
   that arrives lifts the black as beat three: the board reads the note in
   its head, the Next app in src/app/layout.tsx. Only the rules the leaving
   page needs are here; the reasons for each value are in board-shell.css. */
/* the tokens are the site's, set on the curtain itself as
   pressing-curtain.css sets them, so the lines this page lays down
   register with the ones the arriving page draws */
.pt { --paper: #FFFFFF; --ink: #000000; --gut: 50px; }
@media (max-width: 760px) { .pt { --gut: 20px; } }
.pt { position: fixed; inset: 0; z-index: 400; pointer-events: none; visibility: hidden;
  font-family: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.pt.pt-run { visibility: visible; pointer-events: auto; }
.ptw, .ptb { position: absolute; inset: 0; overflow: hidden; }
.ptstack { position: absolute; inset: 0; padding: var(--gut, 28px); display: flex; flex-direction: column; justify-content: center; }
.ptl { display: block; white-space: nowrap; font-size: var(--ptfs, clamp(20px, 2.6vw, 38px)); font-weight: 600;
  line-height: var(--ptlh, 1.18); letter-spacing: -0.05em; opacity: 0; transform: translate3d(0, 14px, 0);
  transition: opacity 0.3s ease, transform 0.34s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--d, 0s); }
.pt-run .ptl { will-change: transform, opacity; }
.ptb .ptl { -webkit-text-stroke: 0.36px currentColor; }
.pt-1 .ptl { opacity: 1; transform: translate3d(0, 0, 0); }
@keyframes ptwait {
  0% { opacity: 1; transform: translate3d(0, 0, 0); }
  22% { opacity: 0; transform: translate3d(0, -12px, 0); }
  23% { opacity: 0; transform: translate3d(0, 14px, 0); }
  45% { opacity: 1; transform: translate3d(0, 0, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
.pt-wait .ptl { animation: ptwait 1.8s var(--d, 0s) infinite both; transition: none; }
.ptw .ptl { color: var(--ink, #000); }
.ptw .ptl .sub { color: rgba(0, 0, 0, 0.42); }
.ptstack.pt-nosub .ptl .sub { display: none; }
.ptb .ptl { color: var(--paper, #fff); }
.ptb .ptl .sub { color: rgba(255, 255, 255, 0.48); }
.ptw { background: var(--paper, #fff); clip-path: inset(0 0 100% 0); }
.ptb { background: var(--ink, #000); clip-path: inset(100% 0 0 0); }
.pt-run .ptw, .pt-run .ptb { transition: clip-path 0.52s cubic-bezier(0.33, 0.28, 0.12, 1); }
.pt-1 .ptw { clip-path: inset(0 0 0 0); }
.pt-2 .ptb { clip-path: inset(0 0 0 0); }
/* coming back to this page from the browser's history, the curtain the
   page left under is lifted, in the site's own beat three */
.pt-3 .ptl { opacity: 0; transform: translate3d(0, -10px, 0); transition-duration: 0.22s, 0.24s; }
.pt-3 .ptw { transition: none; clip-path: inset(0 0 100% 0); }
.pt-3 .ptb { transition: clip-path 0.68s cubic-bezier(0.33, 0.28, 0.12, 1); clip-path: inset(0 0 100% 0); }
/* in the page, over one column (27 Sept): crossref2's content column,
   from the stage's left edge to the glass's right */
.pt.ptc { left: var(--stl, 50%); }

/* ── EXPLORATIONS (6 Oct 2026): ?curtain=fill | outline | drift | giant |
   ramp (curtain.js). The same panels and beats; the lines run edge to
   edge with no gutter, built to their sizes by script, and the frame
   cuts whatever runs past it: left, right, top and bottom ── */
.ptm .ptstack { inset: var(--top, 0px) 0 auto 0; padding: 0; justify-content: flex-start; }
.ptm .ptl { display: flex; flex-wrap: nowrap; white-space: nowrap; transform: translate3d(0, 0.22em, 0); }
.ptm.pt-1 .ptl { transform: translate3d(0, 0, 0); }
.ptm.pt-3 .ptl { transform: translate3d(0, -0.14em, 0); }
.ptm .ptl.r { justify-content: flex-end; }
.ptr { display: flex; flex: none; transform: translate3d(var(--x, 0px), 0, 0); }
.ptt { flex: none; }
.ptt + .ptt { margin-left: var(--gap, 0.42em); }
/* outline: every other line drawn rather than filled */
.pt-m-outline .ptw { --sc: var(--ink, #000); }
.pt-m-outline .ptb { --sc: var(--paper, #fff); }
.pt-m-outline .ptl.o { color: transparent; -webkit-text-stroke: 1.3px var(--sc); }
/* drift: each line runs sideways, alternate lines the other way, a whole
   name a lap so the run never jumps */
@keyframes ptdrift { from { transform: translate3d(var(--x, 0px), 0, 0); } to { transform: translate3d(calc(var(--x, 0px) - var(--P, 0px)), 0, 0); } }
.pt-m-drift .ptr { animation: ptdrift var(--pd, 6s) linear infinite; will-change: transform; }
.pt-m-drift .ptl:nth-child(even) .ptr { animation-direction: reverse; }
/* giant: a word a line, tracked in as display type is */
.pt-m-giant .ptl { letter-spacing: -0.055em; }
/* ramp: the name and its category, growing down the column; the curtain
   since 6 Oct, in medium, the site's statement weight, tracked by size by
   script (ramp-demi keeps the demi it was first seen in) */
.pt-m-ramp .ptl, .pt-m-ramp-demi .ptl, .pt-m-ramp-outline .ptl { display: block; }
.pt-m-ramp .ptl, .pt-m-ramp-outline .ptl { font-weight: 500; }
/* ramp with outline: every other line drawn, its category too */
.pt-m-ramp-outline .ptw { --sc: var(--ink, #000); --scs: rgba(0, 0, 0, 0.42); }
.pt-m-ramp-outline .ptb { --sc: var(--paper, #fff); --scs: rgba(255, 255, 255, 0.48); }
.pt-m-ramp-outline .ptl.o { color: transparent; -webkit-text-stroke: 1.2px var(--sc); }
.pt-m-ramp-outline .ptl.o .sub { color: transparent; -webkit-text-stroke: 1.2px var(--scs); }

/* ── THE POSTER (8 Oct 2026): ?curtain=poster | bands | wire (curtain.js).
   The stack is a grid of cells at the panel's full size; each cell wipes
   open in reading order (--d), its word rises inside it, its crosses
   draw. On the lift the cells close upward as the black does ── */
.pt-m-poster .ptstack, .pt-m-bands .ptstack, .pt-m-wire .ptstack { inset: 0; display: block; padding: 0; }
.ptg { position: absolute; overflow: hidden; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.85);
  clip-path: inset(0 0 100% 0); transition: clip-path 0.46s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0s); }
.pt-1 .ptg { clip-path: inset(0 0 0 0); }
.ptg .ptwd { position: absolute; left: 0; top: 0; transform: translate3d(0, 42%, 0);
  transition: transform 0.62s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--d, 0s) + 0.06s); }
.pt-1 .ptg .ptwd { transform: translate3d(0, 0, 0); }
.ptx { position: absolute; inset: 0; }
.ptx line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.5s cubic-bezier(0.33, 0.28, 0.12, 1) calc(var(--d, 0s) + 0.08s); }
.pt-1 .ptx line { stroke-dashoffset: 0; }
.ptn { position: absolute; left: 12px; top: 12px; right: 12px; color: var(--ink, #000); font-size: 12px; line-height: 1.32; font-weight: 500; letter-spacing: -0.01em; }
.ptn p { margin: 0; }
.ptn-top { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the wireframe's boxes: white, a black rule, crossed */
.ptg-wire { box-shadow: inset 0 0 0 0.75px #0b0b0b; }
/* the lift: each cell closes upward, the last first */
.pt-3 .ptg { clip-path: inset(0 0 100% 0); transition: clip-path 0.38s cubic-bezier(0.5, 0, 0.75, 0) var(--d, 0s); }
@media (prefers-reduced-motion: reduce) { .ptg, .ptg .ptwd, .ptx line { transition: none !important; } }

/* ── FIVE MORE (9 Oct 2026): ?curtain=specimen | spine | numeral | grid |
   frames (curtain.js) ── */
.pt-m-specimen .ptl { display: block; }
/* spine: columns of vertical type, read bottom to top, cut by the frame */
.pt-m-spine .ptstack { inset: 0; display: block; }
.pt-m-spine .ptl { position: absolute; display: block; writing-mode: vertical-rl; font-weight: 500; transform: rotate(180deg) translate3d(0, -0.22em, 0); }
.pt-m-spine.pt-1 .ptl { transform: rotate(180deg) translate3d(0, 0, 0); }
.pt-m-spine.pt-3 .ptl { transform: rotate(180deg) translate3d(0, 0.14em, 0); }
/* grid: the index's hairlines, faint, and a cell with no fill of its own */
.pt-m-grid .ptg { box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.13); }
.pt-m-grid .ptb .ptg { box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.22); }
.ptg.ptg-over { box-shadow: none; pointer-events: none; }
/* frames: the pictures fill their cells, grey on the panel that falls and
   in colour on the one that rises, and settle with a shorter rise */
.ptg .ptpic { width: 100%; height: 100%; object-fit: cover; transform: translate3d(0, 16%, 0) scale(1.06); }
.pt-1 .ptg .ptpic { transform: translate3d(0, 0, 0) scale(1); }
.pt-m-frames .ptw .ptpic { filter: grayscale(1); }
.pt-m-frames .ptg { box-shadow: none; }

/* ── THREE AS ONE (9 Oct 2026): ?curtain=merge | swell | rhythm | rampfill
   (curtain.js, which marks the panel .pt-mb). Each line is a band the name
   runs through edge to edge; the band holds still and the name rises into
   it as into a mask, then leaves upward on the lift. Four classes deep so
   the explorations' own line moves (.ptm.pt-1 / .ptm.pt-3) don't reach it ── */
.pt.pt-mb .ptl, .pt.pt-mb.pt-1 .ptl, .pt.pt-mb.pt-3 .ptl { opacity: 1; transform: none; overflow: hidden; transition: none; animation: none; }
.pt-mb .ptr { translate: 0 105%; transition: translate 0.5s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0s); }
.pt-mb.pt-1 .ptr { translate: 0 0; }
.pt-mb.pt-3 .ptr { translate: 0 -105%; transition: translate 0.36s cubic-bezier(0.5, 0, 0.75, 0) var(--d, 0s); }
/* the fills, as Bands sets them: the poster on the rising panel, its
   negative on the falling one; the grey is the site's. Light type on dark
   keeps the black panel's hair of stroke, dark type on light goes without */
.ptb .ptl.bf-w { background: #ffffff; color: #0b0b0b; --sc: #0b0b0b; -webkit-text-stroke-width: 0; }
.ptb .ptl.bf-k { background: #0b0b0b; color: #ffffff; --sc: #ffffff; }
.ptb .ptl.bf-g { background: var(--hl, #ECECEC); color: #0b0b0b; --sc: #0b0b0b; -webkit-text-stroke-width: 0; }
.ptw .ptl.bf-w { background: #0b0b0b; color: #ffffff; --sc: #ffffff; -webkit-text-stroke: 0.36px currentColor; }
.ptw .ptl.bf-k { background: #ffffff; color: #0b0b0b; --sc: #0b0b0b; }
.ptw .ptl.bf-g { background: var(--hl, #ECECEC); color: #0b0b0b; --sc: #0b0b0b; }
.pt-m-rampfill .ptw { --sc: var(--ink, #000); }
.pt-m-rampfill .ptb { --sc: var(--paper, #fff); }
/* every other line drawn, in its band's ink, the stroke a touch heavier
   as the line grows (--sw, 1.2px to 2px) */
.pt.pt-mb .ptl.o { color: transparent; -webkit-text-stroke: var(--sw, 1.3px) var(--sc); }
/* the plain ones (rampfill, rampsolid) have no band to crop against, so a
   cut tail or accent reads as a fault, not a crop. A line box of 0.86em
   cuts Avenir Next's descenders by 0.12em and its ascenders by 0.02em
   (measured), so the crop opens 0.06em above and 0.16em below without
   moving the line, and the name starts and leaves past it */
.pt.pt-mbp .ptl { padding: 0.06em 0 0.16em; margin: -0.06em 0 -0.16em; }
.pt-mbp .ptr { translate: 0 calc(100% + 0.4em); }
.pt-mbp.pt-1 .ptr { translate: 0 0; }
.pt-mbp.pt-3 .ptr { translate: 0 calc(-100% - 0.3em); }
@media (prefers-reduced-motion: reduce) { .pt-mb .ptr { transition: none !important; } }

/* ── QUIET (10 Oct 2026): ?curtain=card | caption | year | paper
   (curtain.js). One panel, the open half's own card (#field in
   crossref2.css: 20px in, a 4px corner, its rise and its ease); the
   falling white is not used. Its words rise as the statement's do
   (crossref2.css @keyframes lift: 10px, 0.5s) ── */
.ptq .ptw { display: none; }
.ptq .ptb { inset: var(--m, 20px) var(--m, 20px) var(--m, 20px) 0; background: #000;
  clip-path: inset(100% 0 0 0 round var(--pr, 4px)); }
.pt.ptq:not(.ptc) .ptb { left: var(--m, 20px); }
.ptq.pt-run .ptb { transition: clip-path calc(0.55s * var(--x, 1)) var(--ease, cubic-bezier(0.2, 0.7, 0.2, 1)); }
.ptq.pt-1 .ptb { clip-path: inset(0 0 0 0 round var(--pr, 4px)); }
.ptq.pt-3 .ptb { clip-path: inset(0 0 100% 0 round var(--pr, 4px)); transition: clip-path calc(0.5s * var(--x, 1)) var(--ease, cubic-bezier(0.2, 0.7, 0.2, 1)) calc(0.1s * var(--x, 1)); }
.pt-q-paper .ptb { background: #fff; }
.ptq .ptstack { inset: 0; padding: 0; display: block; }
.pq { position: absolute; left: 32px; right: 32px; bottom: 20px; color: #fff; font-weight: 500; }
.pt-q-paper .pq { color: #000; }
.pq > :is(.pq-by, .pq-say, .pq-cap, .pq-yr, .pq-corner) { opacity: 0; transform: translate3d(0, 10px, 0);
  transition: opacity calc(0.5s * var(--x, 1)) var(--ease, cubic-bezier(0.2, 0.7, 0.2, 1)), transform calc(0.5s * var(--x, 1)) var(--ease, cubic-bezier(0.2, 0.7, 0.2, 1)); transition-delay: calc(0.1s * var(--x, 1)); }
.pq > :is(.pq-by, .pq-say, .pq-cap, .pq-yr, .pq-corner) + :is(.pq-by, .pq-say, .pq-cap, .pq-yr, .pq-corner) { transition-delay: calc(0.16s * var(--x, 1)); }
.ptq.pt-1 .pq > :is(.pq-by, .pq-say, .pq-cap, .pq-yr, .pq-corner) { opacity: 1; transform: none; }
.ptq.pt-3 .pq > :not(.pq-hl) { opacity: 0; transform: translate3d(0, -6px, 0); transition: opacity calc(0.2s * var(--x, 1)) ease, transform calc(0.2s * var(--x, 1)) ease; transition-delay: calc(0s * var(--x, 1)); }
/* the small line, as the statement's (.rest .prac.by) */
.pq-by { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 26px; margin: 0 0 1.4em; font-size: 11px; font-weight: 600; line-height: 1.3; color: rgba(255, 255, 255, 0.46); }
.pq-by .pq-t { color: #fff; }
.pt-q-paper .pq-by { color: rgba(0, 0, 0, 0.46); }
/* the statement's type (.rest .say in st-one) */
.pq-say { max-width: 18em; font-size: var(--mx, 34px); line-height: 1.1; letter-spacing: -0.045em; text-wrap: pretty; }
/* the hover caption's type (.cap), and a hairline drawn over it */
.pq-cap { font-size: 13px; font-weight: 600; letter-spacing: -0.004em; line-height: 1.45; }
.pq-cap .pq-g { margin-left: 0.4em; font-weight: 500; color: rgba(255, 255, 255, 0.46); }
.pq-rule { height: 1px; margin: 0 0 14px; background: rgba(255, 255, 255, 0.3); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform calc(1.1s * var(--x, 1)) var(--ease, cubic-bezier(0.2, 0.7, 0.2, 1)) calc(0.12s * var(--x, 1)); }
.ptq.pt-1 .pq-rule { transform: scaleX(1); }
/* the year: a mask one year tall, the strip climbing through it from this
   year to the study's, settling slowly as the index's own masks do */
.pq-yr { height: 1em; margin: 0 0 -0.13em; overflow: hidden; line-height: 1; font-weight: 500; font-variant-numeric: tabular-nums; }
.pq-strip { transform: translate3d(0, 0, 0); transition: transform calc(1.05s * var(--x, 1)) cubic-bezier(0.16, 1, 0.3, 1) calc(0.18s * var(--x, 1)); }
.ptq.pt-1 .pq-strip { transform: translate3d(0, var(--roll, 0%), 0); }

/* ── RAMS (10 Oct 2026): ?curtain=scale | grille. The face in the index's
   grey (--hl), ink type, one signal colour (--sig) ── */
.pt-q-scale .ptb, .pt-q-grille .ptb { background: var(--hl, #ECECEC); }
.pt-q-scale .pq, .pt-q-grille .pq { color: #000; --sig: #EC5A24; }
.pt-q-scale .pq-by, .pt-q-grille .pq-by { color: rgba(0, 0, 0, 0.46); }
/* the tuning scale: a base drawn left to right, the ticks rising off it
   in the same sweep, the years under it, the needle gliding back from now */
.pq-tuner { position: relative; height: 84px; margin: 0 0 58px; }
.pq-base { position: absolute; left: 0; right: 0; top: 56px; height: 1px; background: #000; transform: scaleX(0); transform-origin: 0 50%;
  transition: transform calc(0.7s * var(--x, 1)) var(--ease, cubic-bezier(0.2, 0.7, 0.2, 1)) calc(0.1s * var(--x, 1)); }
.ptq.pt-1 .pq-base { transform: scaleX(1); }
.pq-ticks { position: absolute; inset: 0; }
.pq-tk { position: absolute; top: 49px; width: 1px; height: 7px; margin-left: -0.5px; background: rgba(0, 0, 0, 0.36);
  transform: scaleY(0); transform-origin: 50% 100%; transition: transform calc(0.35s * var(--x, 1)) var(--ease, cubic-bezier(0.2, 0.7, 0.2, 1)) var(--d, 0s); }
.pq-tk.pq-tk-y { top: 40px; height: 16px; background: #000; }
.ptq.pt-1 .pq-tk { transform: scaleY(1); }
.pq-yl { position: absolute; top: 65px; transform: translateX(-50%); font-size: 11px; font-weight: 500; line-height: 1.3; color: rgba(0, 0, 0, 0.46);
  font-variant-numeric: tabular-nums; opacity: 0; transition: opacity calc(0.4s * var(--x, 1)) ease calc(0.38s * var(--x, 1)); }
.ptq.pt-1 .pq-yl { opacity: 1; }
.pq-needle { position: absolute; top: 20px; width: 2px; height: 48px; margin-left: -1px; background: var(--sig); opacity: 0;
  transform: translate3d(var(--from, 0px), 0, 0); transition: opacity calc(0.25s * var(--x, 1)) ease calc(0.24s * var(--x, 1)), transform calc(0.95s * var(--x, 1)) cubic-bezier(0.3, 0, 0.15, 1) calc(0.3s * var(--x, 1)); }
.ptq.pt-1 .pq-needle { opacity: 1; transform: translate3d(0, 0, 0); }
.pq-needle span { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding-bottom: 5px; font-size: 11px; font-weight: 600;
  line-height: 1.3; color: #000; font-variant-numeric: tabular-nums; }
.ptq.pt-3 :is(.pq-tuner, .pq-holes, .pq-led) { opacity: 0; transition: opacity calc(0.2s * var(--x, 1)) ease; }
/* the grille: a field of holes, 8px apart, filling the face from the top
   down; the lamp by the name comes on as it finishes */
.pq-holes { position: absolute; left: 32px; right: 32px; top: 32px; border-radius: 6px;
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.8) 0 1.2px, transparent 1.7px); background-size: 8px 8px; background-position: 0 0;
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 60%); mask-image: linear-gradient(180deg, #000 40%, transparent 60%);
  -webkit-mask-size: 100% 300%; mask-size: 100% 300%; -webkit-mask-position: 0 100%; mask-position: 0 100%;
  transition: -webkit-mask-position calc(1.05s * var(--x, 1)) var(--ease, cubic-bezier(0.2, 0.7, 0.2, 1)) calc(0.15s * var(--x, 1)), mask-position calc(1.05s * var(--x, 1)) var(--ease, cubic-bezier(0.2, 0.7, 0.2, 1)) calc(0.15s * var(--x, 1)); }
.ptq.pt-1 .pq-holes { -webkit-mask-position: 0 0; mask-position: 0 0; }
.pq-led { position: absolute; right: 0; bottom: 0.9em; width: 7px; height: 7px; border-radius: 50%; background: rgba(0, 0, 0, 0.14);
  transition: background-color calc(0.18s * var(--x, 1)) ease calc(0.95s * var(--x, 1)); }
.ptq.pt-1 .pq-led { background: var(--sig); }

/* ── THE LIST (10 Oct 2026): ?curtain=list | listmono. After Rams' "10
   Principles" poster: the room's sections numbered at the head of a
   sheet in the index's grey, wrapped lines hung from the text, the
   study's name, line and year turned up the foot as the poster's
   colophon is; each line rises in turn as the statement's words do ── */
.pt-q-list .ptb, .pt-q-listmono .ptb { background: var(--hl, #ECECEC); }
.pq.pq-list, .pq.pq-listmono { top: 32px; color: #000; }
.pq-ol { margin: 0; padding: 0; list-style: none; font-size: var(--mx, 34px); line-height: 1.16; letter-spacing: -0.035em; }
.pq-ol li { display: grid; grid-template-columns: 1.3em 1fr; column-gap: 0.4em; opacity: 0; transform: translate3d(0, 10px, 0);
  transition: opacity calc(0.45s * var(--x, 1)) var(--ease, cubic-bezier(0.2, 0.7, 0.2, 1)) var(--d, 0s), transform calc(0.45s * var(--x, 1)) var(--ease, cubic-bezier(0.2, 0.7, 0.2, 1)) var(--d, 0s); }
.ptq.pt-1 .pq-ol li { opacity: 1; transform: none; }
.pq-ol .pq-n { text-align: right; color: rgba(0, 0, 0, 0.42); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.pq-colo { position: absolute; left: 0; bottom: 0; display: flex; flex-direction: column; writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 13px; font-weight: 500; line-height: 1.32; letter-spacing: -0.004em; color: rgba(0, 0, 0, 0.46);
  opacity: 0; transition: opacity calc(0.5s * var(--x, 1)) ease var(--d, 0.4s); }
.pq-colo span:first-child { color: #000; font-weight: 600; }
.ptq.pt-1 .pq-colo { opacity: 1; }
/* the poster's own setting: a mono, numbers in ink, a touch smaller since
   a mono runs wide (Menlo on a Mac; the poster's face is not on the site) */
.pq-listmono .pq-ol { font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; font-size: calc(var(--mx, 34px) * 0.92); font-weight: 400; line-height: 1.22; letter-spacing: 0; }
.pq-listmono .pq-ol .pq-n { color: #000; }
.pq-listmono .pq-colo { font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 12px; font-weight: 400; letter-spacing: 0; }
.pq-listmono .pq-colo span:first-child { font-weight: 400; }

/* ── THE HEADLINE (10 Oct 2026): ?curtain=headline | sequence. His black
   post: a flood of black, one line of capitals level in the middle at
   the statement's size, light with the name bold, small grey labels in
   the corners. Each letter rises through its own word's mask in turn on
   the index's long settling curve, and leaves upward the same way, the
   card lifting a beat behind ── */
.pq.pq-headline, .pq.pq-sequence { top: 0; bottom: 0; }
.pq-corner { position: absolute; font-size: 11px; font-weight: 600; line-height: 1.3; color: rgba(255, 255, 255, 0.46); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pq-tl { top: 26px; left: 0; }
.pq-tr { top: 26px; right: 0; }
.pq-bl { bottom: 24px; left: 0; }
.ptq .pq-corner.pq-off { opacity: 0 !important; transition: opacity calc(0.25s * var(--x, 1)) ease !important; }
.pq-hl, .pq-seq { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); font-size: var(--mx, 34px); line-height: 1.12;
  letter-spacing: 0.02em; text-transform: uppercase; font-weight: 400; color: #fff; }
.pq-w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.16em 0.05em 0.12em; margin: -0.16em -0.05em -0.12em; }
.pq-w.pq-b { font-weight: 700; }
.pq-ch { display: inline-block; opacity: 0; transform: translate3d(0, 115%, 0);
  transition: transform calc(0.84s * var(--x, 1)) cubic-bezier(0.16, 1, 0.3, 1), opacity calc(0.36s * var(--x, 1)) ease; transition-delay: calc(var(--t0, 0s) + var(--i, 0) * var(--cs, 24ms) * var(--x, 1)); }
.ptq.pt-1 .pq-headline .pq-ch, .ptq .pq.pq-go .pq-ch { opacity: 1; transform: none; }
.ptq.pt-3 .pq-ch { opacity: 0; transform: translate3d(0, -115%, 0);
  transition: transform calc(0.38s * var(--x, 1)) cubic-bezier(0.5, 0, 0.75, 0), opacity calc(0.3s * var(--x, 1)) ease calc(0.06s * var(--x, 1)); transition-delay: calc(var(--i, 0) * 9ms * var(--x, 1)); }
.pt-q-headline.pt-3 .ptb, .pt-q-sequence.pt-3 .ptb { transition-delay: calc(0.24s * var(--x, 1)); }
/* the sequence: the room's sections on a strip in a one-line mask, each
   step rolling the last up and out as the next comes up into place */
.pq-seq { height: 1.12em; overflow: hidden; }
.pq-sstrip { transform: translate3d(0, calc(var(--k, -1) * -1.12em), 0); transition: transform var(--st, 0.2s) cubic-bezier(0.7, 0, 0.2, 1); }
.pq-sl { height: 1.12em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the headline ones flood the whole column, edge to edge, as his black
   post does, so nothing the column showed peeks round a card; the words
   keep the card's places (20px in, 32px from the left, 52px from the
   window) */
.pt-q-headline .ptb, .pt-q-sequence .ptb { inset: 0; clip-path: inset(100% 0 0 0); }
.pt.pt-q-headline:not(.ptc) .ptb, .pt.pt-q-sequence:not(.ptc) .ptb { left: 0; }
.ptq.pt-1.pt-q-headline .ptb, .ptq.pt-1.pt-q-sequence .ptb { clip-path: inset(0 0 0 0); }
.ptq.pt-3.pt-q-headline .ptb, .ptq.pt-3.pt-q-sequence .ptb { clip-path: inset(0 0 100% 0); }
.pq.pq-headline, .pq.pq-sequence { top: 20px; bottom: 20px; right: 52px; }

/* ── THE LOADERS (10 Oct 2026): ?curtain=contents | contentsall | pictures.
   Card's face, with a loader over its small line: a scale of the room
   (white on the black, one orange needle) or a strip of its pictures over
   a drawn line. Measured from the foot so the standing names can raise
   the box without moving the scale ── */
.pq-tuner.pq-cont { height: 58px; margin: 0 0 40px; }
.pq-cont .pq-base, .pq-film .pq-base { top: auto; bottom: 3px; background: rgba(255, 255, 255, 0.2); }
.pq-cont .pq-prog, .pq-film .pq-prog { position: absolute; left: 0; right: 0; bottom: 3px; height: 1px; background: #fff; transform-origin: 0 50%; }
.pq-cont .pq-prog { transform: scaleX(var(--p, 0)); transition: transform var(--sd, 0.2s) var(--se, ease); }
.pq-cont .pq-tk { top: auto; bottom: 4px; background: rgba(255, 255, 255, 0.22); }
.pq-cont .pq-tk.pq-tk-y { top: auto; height: 14px; background: rgba(255, 255, 255, 0.42); transition: transform calc(0.35s * var(--x, 1)) var(--ease, cubic-bezier(0.2, 0.7, 0.2, 1)) var(--d, 0s), background-color calc(0.2s * var(--x, 1)) ease; }
.pq-cont .pq-tk.pq-mk.on { background: #fff; }
.pq-cont .pq-needle { left: 0; top: auto; bottom: 0; height: 40px; background: #EC5A24;
  transform: translate3d(calc(var(--p, 0) * var(--iw, 600px)), 0, 0);
  transition: opacity calc(0.25s * var(--x, 1)) ease calc(0.3s * var(--x, 1)), transform var(--sd, 0.2s) var(--se, ease); }
.ptq.pt-1 .pq-cont .pq-needle { opacity: 1; transform: translate3d(calc(var(--p, 0) * var(--iw, 600px)), 0, 0); }
.pq-cont .pq-needle .pq-rl { left: -1px; right: auto; bottom: calc(100% + 6px); padding: 0; transform: none; white-space: nowrap; color: #fff; font-size: 11px; font-weight: 600; line-height: 1.3; }
.pq-cont .pq-needle.pq-r .pq-rl { left: auto; right: -1px; }
/* every section standing on its tick, grey until the needle reaches it */
.pq-vl { position: absolute; bottom: 26px; writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg); white-space: nowrap;
  font-size: 11px; font-weight: 600; line-height: 1; color: rgba(255, 255, 255, 0.36); opacity: 0;
  transition: opacity calc(0.4s * var(--x, 1)) ease calc(0.32s * var(--x, 1)), color calc(0.22s * var(--x, 1)) ease; }
.ptq.pt-1 .pq-vl { opacity: 1; }
.pq-vl.on { color: #fff; }
/* the pictures: a strip over the line, each up from grey as the line
   reaches it, the last when the room is in */
.pq-film { position: relative; margin: 0 0 40px; padding-bottom: 16px; }
.pq-frames { display: flex; gap: 4px; height: 64px; }
.pq-fr { flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 2px; background: #111; }
.pq-fr img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0.16; filter: grayscale(1);
  transition: opacity calc(0.4s * var(--x, 1)) ease var(--d, 0s), filter calc(0.4s * var(--x, 1)) ease var(--d, 0s); }
.ptq.pt-1 .pq-fr:not(.pq-late) img, .ptq.pt-1 .pq-done .pq-fr img { opacity: 1; filter: none; }
.ptq.pt-1 .pq-done .pq-fr.pq-late img { transition-delay: 0s; }
.pq-film .pq-prog { transform: scaleX(0); transition: transform var(--sw, 1s) linear var(--t0, 0.4s); }
.ptq.pt-1 .pq-film .pq-prog { transform: scaleX(0.92); }
.ptq.pt-1 .pq-done .pq-film .pq-prog { transform: scaleX(1); transition: transform calc(0.26s * var(--x, 1)) cubic-bezier(0.45, 0, 0.2, 1); }

/* ── THE SWEEP (10 Oct 2026, his "maybe we make the loader a smooth scroll
   vs jumping from section to section?"): the needle and the line glide in
   one motion from the start to 92%, easing in and settling, then run the
   rest once the room is in. Each tick and its name light on their own
   delay (--lt), the moment the needle crosses them on that curve
   (curtain.js bezAt); one past 92% lights at the finish ── */
.pq-cont.pq-smooth { --p: 0; }
.ptq.pt-1 .pq-cont.pq-smooth { --p: 0.92; }
.ptq.pt-1 .pq-done .pq-cont.pq-smooth { --p: 1; }
.pq-smooth .pq-needle { transition: opacity calc(0.25s * var(--x, 1)) ease calc(0.3s * var(--x, 1)), transform var(--sw, 1.3s) cubic-bezier(0.42, 0.05, 0.28, 1) var(--t0, 0.42s); }
.pq-smooth .pq-prog { transition: transform var(--sw, 1.3s) cubic-bezier(0.42, 0.05, 0.28, 1) var(--t0, 0.42s); }
.pq-done .pq-smooth .pq-needle { transition: opacity 0s, transform calc(0.26s * var(--x, 1)) cubic-bezier(0.45, 0, 0.2, 1); }
.pq-done .pq-smooth .pq-prog { transition: transform calc(0.26s * var(--x, 1)) cubic-bezier(0.45, 0, 0.2, 1); }
.pq-smooth .pq-tk.pq-mk { transition: transform calc(0.35s * var(--x, 1)) var(--ease, cubic-bezier(0.2, 0.7, 0.2, 1)) var(--d, 0s), background-color calc(0.16s * var(--x, 1)) ease var(--lt, 0s); }
.ptq.pt-1 .pq-smooth .pq-mk:not(.pq-late), .ptq.pt-1 .pq-done .pq-smooth .pq-mk { background: #fff; }
.pq-smooth .pq-vl { transition: opacity calc(0.4s * var(--x, 1)) ease calc(0.32s * var(--x, 1)), color calc(0.16s * var(--x, 1)) ease var(--lt, 0s); }
.ptq.pt-1 .pq-smooth .pq-vl:not(.pq-late), .ptq.pt-1 .pq-done .pq-smooth .pq-vl { color: #fff; }

/* ── THE FLOOD for the loaders (10 Oct 2026, his "we should also fill the
   entire side with black so you cant see anything behind it at the
   edges"): the whole column, edge to edge, rising from the foot as the
   card did; the words keep the card's places ── */
.pt-q-contents .ptb, .pt-q-contentsall .ptb, .pt-q-pictures .ptb { inset: 0; clip-path: inset(100% 0 0 0); }
.pt.pt-q-contents:not(.ptc) .ptb, .pt.pt-q-contentsall:not(.ptc) .ptb, .pt.pt-q-pictures:not(.ptc) .ptb { left: 0; }
.ptq.pt-1.pt-q-contents .ptb, .ptq.pt-1.pt-q-contentsall .ptb, .ptq.pt-1.pt-q-pictures .ptb { clip-path: inset(0 0 0 0); }
.ptq.pt-3.pt-q-contents .ptb, .ptq.pt-3.pt-q-contentsall .ptb, .ptq.pt-3.pt-q-pictures .ptb { clip-path: inset(0 0 100% 0); }
.pq.pq-contents, .pq.pq-contentsall, .pq.pq-pictures { right: 52px; bottom: 40px; }