/* truemanity studio — 54 · WorldTakesShape (proposed; registered by the main session).
   One world directed from its first still to its last frame, as one big wall of prints that grows from the sheet outward.
   A picture first: it has to read when it is small on another page, so almost nothing on it is text.
   Built only from the system: P1 board, P2 card, P4 aperture, the drafting mark, the datum red. No new colour, shadow, radius,
   line style or font. The world's palette bar is content, like the HarmonisingBoard's. Nothing is laid over a picture and no
   print lies on another: the × of a rejected try and the ◆ of the director's pick are on the paper beside it.

   Without the script .wte is the wall at rest, a board in the page. With it, .is-live puts the wall on one transform (the
   camera) inside the board; the paper stays still and only the prints move. Everything on the wall is measured in --u, the
   wall's own unit, so it is the same picture at any size. */

.wte { position: relative; container: wte / inline-size; --wte-ink: var(--ink-primary); --wte-ink-2: var(--ink-secondary); }
/* on a dark board or wall the words and the deck read in the system's ink for dark paper */
.paper-board-dark .wte, .paper-card-dark .wte, .gallery-wall-dark .wte { --wte-ink: var(--ink-on-dark); --wte-ink-2: #8E949D; --mark: rgba(236, 239, 244, 0.30); }
/* the paper stage is a light board wherever it hangs */
.wte:not([data-wte-surface="none"]) .wte__stage { --wte-ink: var(--ink-primary); --wte-ink-2: var(--ink-secondary); --mark: rgba(22, 23, 23, 0.34); }

/* ——— the board: the paper is still, the wall moves inside it ——— */
.wte__stage.board {
  position: relative; box-sizing: border-box; width: 100%; max-width: none; margin: 0; padding: 0; overflow: hidden; overflow: clip;
  aspect-ratio: var(--wte-ratio, 16 / 9); max-height: var(--wte-h, calc(100svh - 56px));
}
.wte[data-shape="tall"] .wte__stage.board { --wte-ratio: 9 / 15; }
/* left, right: one horizontal section; the script fits the ratio to the wall */
.wte[data-wte-align="left"]:not(.is-words-above) .wte__stage.board, .wte[data-wte-align="right"]:not(.is-words-above) .wte__stage.board { aspect-ratio: var(--wte-ratio, 2 / 1); }

/* no surface: the stage is no board of its own; the prints sit on whatever holds them. A board that holds it has its own crop marks. */
.wte[data-wte-surface="none"] .wte__stage.board { background: none; box-shadow: none; color: inherit; }
.board .wte[data-wte-surface="none"] .wte__stage.board::after { display: none; }
.wte__wall { position: relative; z-index: 1; width: 100%; container-type: inline-size; --u: calc(100cqw / var(--wte-w, 3900)); }
.wte.is-live .wte__wall { position: absolute; left: 0; top: 0; transform-origin: 0 0; backface-visibility: hidden; }
.wte.is-moving .wte__wall { will-change: transform; }
.wte__track, .wte__pin { position: relative; }

.wte[data-wte-mode="scroll"].is-live .wte__track { height: var(--wte-track, 560vh); }
.wte[data-wte-mode="scroll"].is-live .wte__pin { position: sticky; top: 0; }
.wte[data-wte-mode="scroll"][data-shape="tall"].is-live .wte__track { --wte-track: 320vh; }

/* ——— the page's words: above the wall as an ordinary block, or, beside it, line by line on the wall ——— */
.wte__copy { margin: 0 0 var(--space-6); color: var(--wte-ink); }
.wte__copy [data-wte-title] { margin: 0; max-width: 32ch; font-family: var(--font-sans); font-size: var(--type-title-size); font-weight: var(--type-title-weight); letter-spacing: var(--type-title-tracking); line-height: var(--type-title-leading); }
.wte__copy [data-wte-caption] { margin: var(--space-4) 0 0; max-width: 68ch; color: var(--wte-ink-2); }
.wte[data-wte-align="left"] .wte__copy, .wte[data-wte-align="right"] .wte__copy { text-align: right; }
.wte[data-wte-align="left"] .wte__copy > *, .wte[data-wte-align="right"] .wte__copy > * { margin-left: auto; }
@media (min-width: 721px) {
  .wte[data-wte-align="left"]:not(.is-words-above) .wte__copy, .wte[data-wte-align="right"]:not(.is-words-above) .wte__copy { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.wte-words { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.wte-word { position: absolute; display: block; font-family: var(--font-sans); text-align: right; white-space: nowrap; }
.wte-word--title { font-weight: var(--type-title-weight); letter-spacing: var(--type-title-tracking); line-height: 1.24; color: var(--wte-ink); }
.wte-word--caption { font-weight: var(--type-body-weight); letter-spacing: var(--type-body-tracking); line-height: 1.46; color: var(--wte-ink-2); }
@media (max-width: 720px) { .wte-words { display: none; } }

/* ——— the seed: a card with the world's name, its palette, the sheet ——— */
.wte-sheet { position: absolute; box-sizing: border-box; display: flex; flex-direction: column; gap: calc(11 * var(--v)); padding: calc(18 * var(--v)) calc(20 * var(--v)) calc(16 * var(--v)); --v: calc(var(--u) * var(--k, 0.78)); z-index: 1; }
.wte-sheet__name { margin: 0; font-family: var(--font-sans); font-weight: 500; font-size: calc(52 * var(--v)); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink-primary); }
.wte-pal__bar { display: flex; gap: calc(8 * var(--v)); height: calc(36 * var(--v)); }
.wte-pal__part { display: flex; min-width: 0; }
.wte-pal__sw { height: 100%; min-width: calc(3 * var(--v)); box-shadow: inset 0 0 0 calc(1.5 * var(--v)) var(--hairline-light); transform-origin: 0 50%; }
.wte-pal__keys { display: flex; justify-content: space-between; gap: calc(16 * var(--v)); margin-top: calc(7 * var(--v)); font-family: var(--font-mono); font-size: calc(15 * var(--v)); letter-spacing: 0.04em; color: var(--ink-secondary); }
.wte-spec { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 calc(14 * var(--v)); margin-top: calc(6 * var(--v)); }
.wte-band { min-width: 0; }
.wte-band__name { margin: 0 0 calc(6 * var(--v)); font-family: var(--font-label); font-weight: 600; font-size: calc(12 * var(--v)); line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-primary); }
.wte-band__list { position: relative; padding-left: calc(12 * var(--v)); }
.wte-band__trunk { position: absolute; left: 0; top: calc(3 * var(--v)); bottom: calc(6 * var(--v)); width: max(1px, calc(1.5 * var(--v))); background: var(--mark); transform-origin: 50% 0; }
.wte-p { position: relative; font-family: var(--font-mono); font-size: calc(12.5 * var(--v)); line-height: 1.32; color: var(--ink-secondary); }
.wte-p::before { content: ""; position: absolute; left: calc(-12 * var(--v)); top: 0.62em; width: calc(8 * var(--v)); height: max(1px, calc(1.5 * var(--v))); background: var(--mark); }
.wte-p.is-own::before { height: calc(3 * var(--v)); background: var(--datum-red); }
.wte-p__t, .wte-p__v { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wte-p__v { color: var(--ink-primary); font-weight: 500; }

/* ——— prints and slots ——— */
.wte-print, .wte-slot { position: absolute; display: block; }
.wte-print { pointer-events: none; }
.wte-print__ap.film-aperture, .wte-slot__ap.film-aperture { display: block; background: transparent; outline-width: max(1px, calc(1.5 * var(--u))); }
.wte-print__ap img, .wte-slot__ap img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.wte-slot { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; z-index: 2; -webkit-tap-highlight-color: transparent; }
.wte-slot:hover .wte-slot__ap, .wte-slot:focus-visible .wte-slot__ap, .wte-slot.is-open .wte-slot__ap { outline-color: var(--datum-red); }
.wte-slot:focus-visible { outline: 0; }
.wte-slot__code { position: absolute; left: 0; top: 100%; margin-top: calc(3 * var(--u)); font-family: var(--font-mono); font-size: calc(13 * var(--u)); line-height: 1; letter-spacing: 0.04em; color: var(--wte-ink-2); opacity: var(--wte-cap, 0); }

/* a pile: each step a paper card, the system's P2 with a print's margin, laid on the one before (1C · sheets stacking up) */
.wte-card { position: absolute; left: calc(-7 * var(--u)); top: calc(-7 * var(--u)); right: calc(-7 * var(--u)); bottom: calc(-17 * var(--u)); box-sizing: border-box; padding: calc(7 * var(--u)) calc(7 * var(--u)) calc(17 * var(--u)); background: var(--paper-card); box-shadow: var(--shadow-card); transform-origin: 50% 50%; }
.wte-card .film-aperture { display: block; background: transparent; outline-width: max(1px, calc(1.5 * var(--u))); }
.wte-card img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.wte-card .wte-mark--x { left: auto; right: calc(7 * var(--u)); bottom: calc(2 * var(--u)); margin: 0; width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
[data-steps="stack"] .wte-slot__ap { visibility: hidden; }
[data-steps="stack"] .wte-mark--pick { z-index: 60; }
[data-steps="stack"] .wte-slot__code { color: var(--ink-secondary); z-index: 60; margin-top: calc(-11 * var(--u)); margin-left: calc(4 * var(--u)); }

/* the only marks on the wall, on the paper beside the picture */
.wte-mark { position: absolute; display: block; }
.wte-mark--x { left: 100%; bottom: 0; width: calc(14 * var(--u)); height: calc(14 * var(--u)); margin-left: calc(4 * var(--u)); background: linear-gradient(45deg, transparent 42%, var(--datum-red) 42%, var(--datum-red) 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, var(--datum-red) 42%, var(--datum-red) 58%, transparent 58%); }
.wte-mark--pick { left: 100%; bottom: calc(2 * var(--u)); width: calc(13 * var(--u)); height: calc(13 * var(--u)); margin-left: calc(7 * var(--u)); background: var(--datum-red); transform: rotate(45deg); }

/* the moodboard: a card, and the eight copies gathered on it */
.wte-mood { position: absolute; box-sizing: border-box; padding: calc(12 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u)); }
.wte-mood__card { position: absolute; inset: 0; }
.wte-mood__grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(5 * var(--u)); }
.wte-mood__cell { display: block; position: relative; z-index: 3; }
.wte-mood__cell .film-aperture { display: block; background: transparent; }
.wte-mood__cell img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.wte-mood__cap { position: relative; margin: calc(7 * var(--u)) 0 0; font-family: var(--font-sans); font-size: calc(13 * var(--u)); line-height: 1.3; color: var(--ink-secondary); }

/* ——— the deck: a thin line under the board, in the room, not a panel ——— */
.wte__deck { display: none; }
.wte.is-live .wte__deck:not([hidden]) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; column-gap: var(--space-4); box-sizing: border-box; min-height: 44px; padding: 0 2px; color: var(--wte-ink-2); }
.wte-deck__btns { display: flex; align-items: center; margin-left: -8px; }
.wte-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 44px; padding: 0 6px; border: 0; background: none; cursor: pointer; color: var(--wte-ink); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; transition: color var(--dur-hover) var(--ease); }
.wte-btn:hover, .wte-btn:focus-visible { color: var(--datum-red); outline: 0; }
.wte-btn svg { display: block; width: 11px; height: 13px; fill: currentColor; }
.wte-scrub { position: relative; min-width: 0; height: 28px; }
.wte-scrub__range { position: absolute; left: 0; right: 0; top: 4px; width: 100%; height: 20px; margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
.wte-scrub__range:focus-visible { outline: 0; }
.wte-scrub__range::-webkit-slider-runnable-track { height: 1px; background: var(--mark); }
.wte-scrub__range::-moz-range-track { height: 1px; background: var(--mark); }
.wte-scrub__range::-webkit-slider-thumb { -webkit-appearance: none; width: 2px; height: 14px; margin-top: -7px; background: var(--datum-red); border: 0; border-radius: 0; }
.wte-scrub__range::-moz-range-thumb { width: 2px; height: 14px; background: var(--datum-red); border: 0; border-radius: 0; }
.wte-scrub__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--datum-red); }
.wte-scrub__acts { position: absolute; left: 0; right: 0; top: 14px; height: 12px; pointer-events: none; }
.wte-act { position: absolute; top: 0; width: 16px; height: 12px; margin-left: -8px; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; }
.wte-act::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 5px; background: var(--mark); }
.wte-act:hover::before, .wte-act:focus-visible::before, .wte-act.is-now::before { height: 8px; background: var(--wte-ink); }
.wte-act:focus-visible { outline: 0; }
.wte-read, .wte-clock { margin: 0; white-space: nowrap; font-family: var(--font-mono); font-size: var(--type-mono-size); letter-spacing: var(--type-mono-tracking); }
.wte-clock { color: var(--wte-ink); font-variant-numeric: tabular-nums; }
/* the Blender step: the animatic on a print, over everything; frames leave it and fly to their slots */
.wte__reel { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 3; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.wte-reel__print { box-sizing: border-box; width: min(58%, 900px); padding: 10px 10px 8px; background: var(--paper-card); box-shadow: var(--shadow-board-light); }
.wte-reel__print .film-aperture { display: block; }
.wte-reel__print video { display: block; width: 100%; height: 100%; object-fit: cover; }
.wte-reel__cap { display: flex; justify-content: space-between; gap: var(--space-3); margin: 7px 2px 0; font-family: var(--font-mono); font-size: var(--type-mono-size); letter-spacing: var(--type-mono-tracking); color: var(--ink-secondary); white-space: nowrap; }
.wte__fly { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: hidden; }
.wte-fly { position: absolute; left: 0; top: 0; display: block; transform-origin: 50% 50%; box-shadow: var(--shadow-card); }
.wte-fly .film-aperture { display: block; }
.wte-fly img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }

/* for review: how it plays, under the deck */
.wte-ctl { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-6); margin-left: -6px; }
.wte-ctl__set { display: inline-flex; align-items: center; }
.wte-ctl__name { padding: 0 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wte-ink-2); }
.wte-ctl__btn { min-width: 0; height: 36px; padding: 0 6px; color: var(--wte-ink-2); }
.wte-ctl__btn[aria-pressed="true"] { color: var(--wte-ink); box-shadow: inset 0 -2px 0 var(--datum-red); }
.wte.is-still .wte-scrub__range { display: none; }
.wte.is-still .wte-scrub__acts { top: 8px; }
.wte.is-still .wte-act::before { height: 8px; }

/* ——— the strip: one slot opened, every step in order ——— */
.wte__strip { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 4; box-sizing: border-box; padding: 0 var(--space-4) var(--space-3); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--dur-enter) var(--ease), transform var(--dur-enter) var(--ease), visibility 0s linear var(--dur-enter); }
.wte__strip.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.wte__strip .flush-head { height: 40px; margin: 0 0 var(--space-1); }
.wte-strip__close { margin: 0 -8px 0 var(--space-3); }
.wte-chain { display: flex; gap: var(--space-2); margin: 0; padding: 0 0 var(--space-2); overflow-x: auto; scrollbar-width: thin; }
.wte-chain__group { flex: none; display: flex; gap: var(--space-2); }
.wte-step { flex: none; width: 150px; margin: 0; }
.wte-step.is-small { width: 62px; align-self: flex-start; }
.wte-step .film-aperture { display: block; background: transparent; }
.wte-step .film-aperture img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.wte-step figcaption { margin-top: 5px; font-family: var(--font-mono); font-size: 10px; line-height: 1.35; letter-spacing: 0.02em; }
.wte-step__stage { display: block; color: var(--ink-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wte-step__meta { display: flex; align-items: center; gap: 6px; color: var(--ink-secondary); white-space: nowrap; overflow: hidden; }
.wte-step__meta .wte-mark--x { position: static; width: 8px; height: 8px; margin: 0; flex: none; }
.wte-step__held { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10px; color: var(--ink-secondary); }
.wte-strip__foot { margin: var(--space-1) 0 0; color: var(--ink-secondary); }

/* ——— small: the same picture; the deck keeps the play control and the clock ——— */
@container wte (max-width: 640px) {
  .wte.is-live .wte__deck:not([hidden]) { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--space-3); }
  .wte-read { display: none; }
}
@media (max-width: 720px) {
  .wte.is-live .wte__deck:not([hidden]) { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--space-3); padding: 0 var(--space-2); }
  .wte-read { display: none; }
  .wte__strip { position: fixed; left: 0; right: 0; bottom: 0; top: auto; max-height: 72svh; overflow-y: auto; padding: 0 var(--board-pad-x) var(--space-6); z-index: 20; }
  .wte__strip .flush-head { position: sticky; top: 0; z-index: 1; }
  .wte-chain { display: block; overflow: visible; padding: 0; }
  .wte-chain__group { display: block; }
  .wte-step, .wte-step.is-small { display: grid; grid-template-columns: 132px minmax(0, 1fr); column-gap: var(--space-3); align-items: center; width: auto; margin-bottom: var(--space-2); }
  .wte-step figcaption { margin-top: 0; }
}

@media print {
  .wte__deck, .wte__strip { display: none !important; }
}