/* 00 · The Bureau. The main page: one long receipt on the left, the desk on the right, a few rooms in between. */

:root {
  --strip: min(36rem, 100vw - 2.5rem);
  --edge: clamp(1.25rem, 4vw, 4.5rem);
  --gap: clamp(2rem, 4.5vw, 5.5rem);
  --pad: clamp(1.5rem, 3.4vw, 3rem);
  --tooth: 14px;
  --stage-top: clamp(4.5rem, 10vh, 6.5rem);
  --stage-bottom: clamp(4.5rem, 9vh, 6rem);
  --stage-h: calc(100svh - var(--stage-top) - var(--stage-bottom) - 2.1rem);   /* the stage's picture row: definite, so figures can use percentages */
  --canton-ink: #b9c400;   /* the pale yellow, dark enough to read as stamp ink */
}

html { scroll-behavior: smooth; }
.q-pretitle::before { display: none; }   /* on this page, pretitles are words only */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { position: relative; background: var(--paper); overflow-x: clip; }
/* the stamp layer never makes the page longer than the receipt */
body > .qx-marks { top: 0; bottom: 0; height: auto !important; overflow: hidden; }
body.is-gated { overflow: hidden; }

.page { max-width: 108rem; margin: 0 auto; padding: 0 var(--edge); }

/* ------------------------------------------------------------ a part: receipt copy left, its stage right */
.part { display: grid; grid-template-columns: var(--strip) minmax(0, 1fr); gap: 0 var(--gap); align-items: start; }
.part__copy {
  grid-column: 1; align-self: stretch; position: relative;
  padding: clamp(3.5rem, 9vh, 7rem) var(--pad);
  background: var(--paper);
  box-shadow: -1px 0 0 var(--gray-line), 1px 0 0 var(--gray-line), 0 40px 80px -60px rgba(16, 17, 15, 0.35);
}
/* between two parts: a receipt rule, the way a till prints a break */
.part + .part .part__copy::after { content: ""; position: absolute; left: var(--pad); right: var(--pad); top: 0; height: 0; border-top: 1.5px dashed var(--ink); opacity: 0.55; }
/* on the receipt: headline, then text. No pretitles, no item numbers, no rules between them. */
/* the receipt's type: bigger headlines on one line-height, and air between headline, text, buttons and the next line */
.part__copy h1, .part__copy h2 { line-height: 0.92; letter-spacing: -0.012em; margin-bottom: clamp(1.5rem, 2.8vh, 2.1rem); }
.part__copy .q-h2 { font-size: clamp(2.4rem, 4.3vw, 4rem); }
.part__copy .q-h1 { font-size: clamp(2.8rem, 5.6vw, 5.25rem); }
.part__copy .q-display { font-size: clamp(3.4rem, 7.2vw, 6.8rem); }
.part__copy .q-lede { margin-bottom: 1.3rem; }
.part__copy .q-body + .q-body { margin-top: 1em; }
.part__copy .q-body + .q-small, .part__copy .part__acts + .q-small, .part__copy .q-lede + .q-small { margin-top: 1.5rem; }
.part__copy .q-small + .q-small { margin-top: 0.6rem; }
.part__copy .part__acts { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: clamp(1.9rem, 3.4vh, 2.6rem) 0; }
.part__copy { background-image: linear-gradient(90deg, color-mix(in srgb, var(--ink) 3%, transparent), transparent 1.2rem, transparent calc(100% - 1.2rem), color-mix(in srgb, var(--ink) 3%, transparent)); }
/* torn top edge where the receipt starts, and where it starts again after a room */
.part--head .part__copy { margin-top: clamp(4.5rem, 10vh, 6.5rem); }
.part--head .part__copy::before, .interlude + .part .part__copy::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: calc(var(--tooth) * -1 + 1px); height: var(--tooth);
  background:
    linear-gradient(135deg, transparent 50%, var(--gray-line) 50%, var(--gray-line) calc(50% + 1px), var(--paper) calc(50% + 1px)) 0 0 / var(--tooth) var(--tooth) repeat-x,
    linear-gradient(225deg, transparent 50%, var(--gray-line) 50%, var(--gray-line) calc(50% + 1px), var(--paper) calc(50% + 1px)) calc(var(--tooth) / 2) 0 / var(--tooth) var(--tooth) repeat-x;
}
.interlude + .part .part__copy { margin-top: clamp(3rem, 7vh, 5rem); }
.interlude + .part .part__copy::after { display: none; }
/* the receipt is fed out as the page opens */
@keyframes feed { from { transform: translateY(-7rem); opacity: 0; } }
body.is-open .part--head .part__copy { animation: feed 0.9s var(--settle) both; }

/* the stage: sticky beside its part */
.part__stage { grid-column: 2; position: sticky; top: 0; height: 100svh; display: grid; grid-template-rows: var(--stage-h) auto; align-items: stretch; padding: var(--stage-top) 0 var(--stage-bottom); }
.stage > :first-child { min-height: 0; height: var(--stage-h); position: relative; }
.stage--find { display: flex; align-items: center; }
.stage--find > :first-child { height: auto; width: 100%; }
.stage__caption { color: var(--gray-text); margin-top: 1.2rem; }
.stage img { max-height: 100%; }

/* ------------------------------------------------------------ a room: full width, the receipt passes under */
.interlude { position: relative; width: 100vw; margin-left: calc(50% - 50vw); background: var(--paper); box-shadow: 0 -1px 0 var(--gray-line), 0 1px 0 var(--gray-line); }
.interlude__copy { padding: clamp(4rem, 9vh, 7rem) var(--edge) 0; max-width: 108rem; margin: 0 auto; }
.interlude__copy > .q-pretitle { margin-bottom: 1.3rem; }
.interlude__copy h2 { margin-bottom: 1.4rem; }
.interlude__copy .q-lede { margin-bottom: 1rem; }
.interlude__copy .q-body { max-width: 36rem; }
.interlude__acts { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.8rem; }
.interlude__stage { position: relative; }

/* ------------------------------------------------------------ head */
.head { display: grid; align-content: start; min-height: calc(100svh - clamp(4.5rem, 10vh, 6.5rem) - clamp(3.5rem, 9vh, 7rem) * 2); }
.head__mark { --wordmark-width: min(100%, 19rem); margin: 0 auto; }
.head__sub { text-align: center; font: 400 0.95rem/1 var(--sans); letter-spacing: 0.04em; margin-top: 0.9rem; }
.meta { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 1rem; margin: clamp(2rem, 5vh, 3.5rem) 0 1.1rem; }
.meta dt { font: 600 var(--label)/1 var(--sans); letter-spacing: 0.055em; text-transform: uppercase; color: var(--gray-text); margin-bottom: 0.5rem; }
.meta dd { margin: 0; font: 500 0.95rem/1.2 var(--sans); }
.meta dd.q-num { font: 800 1.05rem/1 var(--serif); letter-spacing: 0.04em; white-space: nowrap; }
.rule { border: 0; height: 0; margin: 0; }
.rule--ink { border-top: 2px solid var(--ink); }
.rule--double { border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); height: 6px; }
.head__title { margin: clamp(2rem, 5vh, 3.5rem) 0 clamp(1.5rem, 2.8vh, 2.1rem); font-size: clamp(2.8rem, 5.2vw, 4.6rem); line-height: 0.92; }
.part--head .part__copy { padding-bottom: 2.2rem; }
.part__copy .head__acts { margin: 0 0 0.4rem; }

/* Buy Quadrillions: the official supanova page, in a new tab (main.js counts the press) */
.buy { display: inline-grid; }
.buy > span { place-self: center; }

/* X and Telegram, under it: the official channels, each opens in a new tab (main.js) */
.social { display: flex; align-items: center; gap: 0.5rem; margin: 0.9rem 0 0.4rem; }
.social__door { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); transition: background 0.15s, color 0.15s; }
.social__door svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }
.social__door:focus-visible { background: var(--canton); color: var(--anthracite); }
.social__door:active { transform: translateY(1px); }
@media (hover: hover) {
  .social__door:hover { background: var(--canton); color: var(--anthracite); }
}

.hello { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; padding-right: 24%; }
.hello__zero { height: min(100%, 34rem); width: auto; position: relative; z-index: 1; }
.hello__walk { position: absolute; bottom: 0; left: 38%; height: min(100%, 34rem); width: auto; translate: -50% 0; z-index: 1; opacity: 0; pointer-events: none; }
.hello__note { --delay: 2.4s; }
.hello.is-walking .hello__zero { opacity: 0; }
.hello.is-walking .hello__walk.is-frame { opacity: 1; }
/* the note stands just right of Zero's head, the arrow at the height of their glasses, pointing at them */
/* Zero stands on the floor at min(100%, 34rem) tall (H), in the middle of the stage less its right padding, so their head's
   right edge is 38% across plus 0.19 H; the note starts a little past it. The two lines never wrap: the type takes the
   room there is between the head and the edge of the stage (the stage is a size container for this) */
@media (min-width: 1301px) { .hello { container-type: size; } }
.hello__note { position: absolute; left: calc(38% + min(100cqh, 34rem) * 0.19 + 1rem); right: 0; top: max(0px, calc(100% - min(100%, 34rem) * 0.9)); display: flex; align-items: flex-start; gap: 0.8rem; font: 800 clamp(1.1rem, calc((81.5cqw - min(100cqh, 34rem) * 0.19 - 6rem) / 7.9), 1.8rem)/1.06 var(--serif); letter-spacing: -0.008em; white-space: nowrap; z-index: 2; }
.hello__note img { width: 4rem; height: auto; flex: none; margin: 0.25em 0.2rem 0 0; transform: rotate(-160deg); transform-origin: 50% 50%; }
.hello__note.is-in img { animation: point 0.9s var(--settle) 0.2s both; }
@keyframes point { from { transform: rotate(-160deg) translate(-22px, 0); opacity: 0; } to { transform: rotate(-160deg); opacity: 1; } }
.hello__zero.is-wink { animation: wink 0.5s steps(1) 1; }
@keyframes wink { 30% { transform: translateY(1px) scaleY(0.985); } }
/* a narrow stage has no room beside Zero: the note goes over their head, the arrow pointing down at them, and Zero
   gives up a little height for it (phones have their own layout, below) */
@media (min-width: 881px) and (max-width: 1300px) {
  .hello { padding-right: 0; }
  .hello__zero, .hello__walk { height: min(100% - 6.5rem, 34rem); }
  .hello__walk { left: 50%; }
  .hello__note { top: auto; bottom: calc(min(100% - 6.5rem, 34rem) + 0.75rem); left: 0; right: 0; width: auto; justify-content: center; align-items: flex-end; font-size: 1.3rem; }
  .hello__note img { width: 2.6rem; margin: 0 0.3rem 0 0; transform: rotate(100deg); }
  @keyframes point { from { transform: rotate(100deg) translate(-16px, 0); opacity: 0; } to { transform: rotate(100deg); opacity: 1; } }
}

.part__stage hr, .numbers__floor { display: none !important; }
.falling__floor { border-top: 0 !important; }   /* the physics keeps its floor; the line itself is gone */

/* ------------------------------------------------------------ the letter */
.letter { position: relative; }
.letter__zero { position: relative; display: inline-block; margin-top: 0.4rem; font: 800 2.2rem/1 var(--serif); padding: 0 0.3em 0.4em 0; }
.letter__zero img { position: absolute; left: -0.2em; bottom: -0.15em; width: 110%; }
.signing { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6%; }
.signing img { height: min(88%, 30rem); width: auto; }
.signing .floor { display: none; }

/* stamps pressed as parts are filed */
.mark { position: absolute; right: -0.4rem; bottom: 1.6rem; font-size: 1.35rem; opacity: 0; mix-blend-mode: multiply; pointer-events: none; }
.mark.is-pressed { opacity: 1; }
.letter .mark { right: 0; bottom: 2.4rem; }
.mark--big { font-size: 1.9rem; flex-direction: column; gap: 0.25rem; position: relative; right: auto; bottom: auto; margin-top: 2.5rem; }
.mark small { font: 400 0.8rem/1 var(--sans); letter-spacing: 0.02em; text-transform: none; }

/* line items with dotted leaders */
.items { margin: 2rem 0 2.2rem; display: grid; gap: 0.95rem; }
.items li { display: flex; align-items: baseline; gap: 0.7rem; font: 400 1.05rem/1.3 var(--sans); }
.items li i { flex: 1; min-width: 1.5rem; border-bottom: 2px dotted var(--gray-line); transform: translateY(-0.28em); }
.items li b { font: 800 1.2rem/1 var(--serif); letter-spacing: 0.03em; white-space: nowrap; }

/* ------------------------------------------------------------ staff only: the door, and what is behind it */
.staff { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.staff__door { position: relative; height: min(100%, 36rem); aspect-ratio: 986 / 1671; display: block; overflow: visible; transition: transform 0.6s var(--settle); transform-origin: 50% 100%; }
.staff__door-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity 0.35s; }
.staff__door-img--open { opacity: 0; }
.staff__door.is-open .staff__door-img--closed { opacity: 0; }
.staff__door.is-open .staff__door-img--open { opacity: 1; }
.staff__door.is-open { transform: scale(1.06); }
.staff__door:hover:not(.is-open) .staff__door-img--closed { transform: translateX(-2px); }
.staff__door.is-knocked .staff__door-img { animation: knock 0.35s var(--press); }
@keyframes knock { 30% { transform: translateX(-3px) rotate(-0.4deg); } 60% { transform: translateX(2px); } }
/* the name sits on the drawn plate */
.staff__plate { --plate-fit: 1; position: absolute; left: 40.7%; top: 23.3%; width: 18.5%; height: 5.2%; display: grid; place-items: center; color: var(--ink); font: 700 calc(0.42rem * var(--plate-fit)) / 1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; transition: opacity 0.2s; }
.staff__door.is-open:not(.is-closing) .staff__plate { left: 30.1%; top: 24.9%; width: 8.1%; height: 4.5%; font-size: calc(0.22rem * var(--plate-fit)); letter-spacing: 0.03em; transform: skewY(-12deg); }
@media (min-width: 1100px) { .staff__plate { font-size: calc(0.5rem * var(--plate-fit)); } }
.staff__door.is-inside .staff__plate, .staff__door.is-inside .staff__door-img { opacity: 0; transition: opacity 0.45s ease; }
/* behind the door: the Leading Zeros, after hours */
.staff__peek { position: absolute; z-index: 2; left: 48.5%; top: 6.5%; width: 39.5%; height: 88.5%; overflow: hidden; opacity: 0; transition: opacity 0.3s 0.15s, left 0.85s var(--settle), top 0.85s var(--settle), width 0.85s var(--settle), height 0.85s var(--settle); pointer-events: none; }
/* a step inside: the doorway widens into the room, a little more of it left and right, until somebody shuts the door */
.staff__door.is-inside .staff__peek { left: -84%; top: -3%; width: 268%; height: 106%; }
.staff__door.is-inside.is-noticed .staff__peek-closer { left: 56%; }
.staff__door.is-open .staff__peek { opacity: 1; }
.staff__peek img { position: absolute; width: auto; }
.staff__peek-room { left: 50%; top: 50%; height: 100%; width: auto; max-width: none; translate: -50% -50%; }
.staff__peek-closer { left: 105%; bottom: 4%; height: 58%; max-width: none; transition: left 0.7s var(--settle); }
.staff__door.is-noticed .staff__peek-closer { left: 18%; }
.staff__door.is-closing { animation: slam 0.35s var(--press) 0.25s; }
@keyframes slam { 0% { transform: translateX(0); } 40% { transform: translateX(-4px) rotate(-0.5deg); } 70% { transform: translateX(3px); } 100% { transform: none; } }
.staff__door.is-closing .staff__peek { opacity: 0; transition: opacity 0.22s; }
.staff__door.is-closing .staff__door-img--open { opacity: 0; transition: opacity 0.2s; }
.staff__door.is-closing .staff__door-img--closed { opacity: 1; transition: opacity 0.14s; }
.staff__door.is-closing .staff__plate { opacity: 1; transition: opacity 0.14s; }
html[data-lights="off"] .staff__peek img { background: none; padding: 0; }
.staff__note { position: absolute; left: 50%; top: 2%; translate: -50% 0; padding: 0.45rem 0.7rem; background: var(--paper); box-shadow: 0 0 0 1px var(--gray-line); color: var(--gray-text); font-size: var(--small); white-space: nowrap; min-height: 1.4em; opacity: 0; transition: opacity 0.2s; z-index: 2; }
.staff__note:not(:empty) { opacity: 1; }

/* ------------------------------------------------------------ the end of the roll */
.total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1.1rem 0 1.2rem; }
.part--end .part__copy::after { display: none; }
.part--end .part__copy { padding-top: clamp(6rem, 14vh, 9rem); }
.part--end .total { padding: 1.5rem 0 1.6rem; }
.part--end h2.q-h1 { margin-top: clamp(3.5rem, 8vh, 6rem); }
.part--end .part__acts { margin-top: 2.4rem; }
.part--end .mark--big { margin-top: 3.5rem; }
.part--end .tear { margin-top: clamp(5rem, 12vh, 8rem); }
.tear { height: 0; border-top: 3px dashed var(--ink); margin: clamp(2.5rem, 6vh, 4rem) calc(var(--pad) * -1) 0; position: relative; }
.tear::before, .tear::after { content: ""; position: absolute; top: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1px var(--gray-line); }
.tear::before { left: -13px; } .tear::after { right: -13px; }
.stub { padding-top: clamp(2.5rem, 6vh, 4rem); }
.stub .q-display { font-size: clamp(3rem, 6.4vw, 5.4rem); margin-bottom: 1.2rem; }
.stub__ticket { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--gray-line); border-bottom: 1px solid var(--gray-line); font-size: var(--small); color: var(--gray-text); }
.stub__ticket b { color: var(--ink); font-size: 1.1rem; letter-spacing: 0.04em; white-space: nowrap; }
.stub .q-footer { padding: 2.5rem 0 1rem; border-top: 0; }
.stub .q-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.stub .q-footer__legal { margin-top: 2rem; }
.chair { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; }
.chair img { max-height: 100%; width: auto; max-width: 100%; }
.chair__buy { position: absolute; right: 4%; top: 6%; }

/* the endless receipt after the footer sits under the strip */
.qx-receipt { max-width: 108rem; margin: 0 auto; padding: 0 var(--edge); }
.qx-receipt .qx-receipt__strip { width: var(--strip); margin: 0; }

/* ------------------------------------------------------------ fullscreen rooms (ctx.fullscreen) */
.full { position: fixed; inset: 0; z-index: 60; background: var(--paper); color: var(--ink); display: grid; grid-template-rows: auto minmax(0, 1fr); opacity: 0; transition: opacity 0.35s; }
.full.is-on { opacity: 1; }
.full__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1rem; padding: 0.8rem var(--edge); border-bottom: 1px solid var(--gray-line); background: var(--paper); min-height: 4.6rem; }
.full__title { display: grid; gap: 0.2rem; min-width: 0; }
.full__title b { font: 800 clamp(1.3rem, 2vw, 1.8rem)/1.02 var(--serif); letter-spacing: -0.008em; text-wrap: balance; max-width: 16em; }
.full__title span { color: var(--gray-text); font-size: var(--small); }
.full__title span:empty { display: none; }
.full__nav { display: flex; align-items: center; gap: 0.6rem; justify-self: center; }
.full__nav[hidden] { display: none; }
.full__where { font: 600 var(--label)/1 var(--sans); letter-spacing: 0.055em; text-transform: uppercase; white-space: nowrap; min-width: 6.5rem; text-align: center; }
.full__arrow { width: 2.4rem; height: 2.4rem; display: grid; place-items: center; box-shadow: inset 0 0 0 2px var(--ink); }
.full__arrow::before { content: ""; width: 0.55rem; height: 0.55rem; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(1px, -1px); }
.full__arrow--next::before { transform: rotate(-135deg) translate(1px, -1px); }
.full__arrow:hover:not(:disabled) { background: var(--canton); }
.full__arrow:disabled { opacity: 0.3; cursor: default; }
.full__close { justify-self: end; position: relative; width: 2.6rem; height: 2.6rem; box-shadow: inset 0 0 0 2px var(--ink); }
.full__close::before, .full__close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.1rem; height: 2px; background: currentColor; translate: -50% -50%; rotate: 45deg; }
.full__close::after { rotate: -45deg; }
.full__close:hover { background: var(--canton); }
.full__body { position: relative; min-height: 0; overflow: auto; }
html.is-full { overflow: hidden; }
html.is-full .lift, html.is-full .serving, html.is-full .walkers, html.is-full .qx-pad { visibility: hidden; }
.full [data-open] { display: none; }

/* ------------------------------------------------------------ reveals: the receipt first, then the desk */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.75s var(--settle), transform 0.75s var(--settle), clip-path 0.85s var(--settle), filter 0.7s ease; transition-delay: var(--delay, 0s); will-change: opacity, transform; }
[data-reveal="pre"] { transform: translateX(-14px); }
[data-reveal="title"] { transform: translateY(0.3em); clip-path: inset(0 0 98% 0); }
[data-reveal="sign"] { transform: translateX(-10px) rotate(-2deg); transform-origin: 0 100%; }
[data-reveal="note"] { transform: translateX(-16px); }
[data-reveal="art"] { transform: none; filter: blur(8px); }
[data-reveal].is-in { opacity: 1; transform: none; clip-path: inset(-0.1em -0.1em -0.3em -0.1em); filter: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; clip-path: none; filter: none; transition: none; } }

/* ------------------------------------------------------------ narrow screens: the stage sits under its copy */
@media (max-width: 880px) {
  :root { --strip: 100%; --edge: 1.1rem; }
  .part { grid-template-columns: minmax(0, 1fr); }
  .part__copy { padding: clamp(2.5rem, 7vh, 4rem) 1.25rem; }
  .part__stage { grid-column: 1; position: static; height: auto; padding: 1.5rem 0 3rem; grid-template-rows: auto auto; background: var(--paper); box-shadow: -1px 0 0 var(--gray-line), 1px 0 0 var(--gray-line); }
  .stage > :first-child { min-height: 40svh; height: auto; }
  .part--head .part__copy { margin-top: 4.5rem; }
  .part__copy { padding-top: clamp(2.5rem, 7vh, 4rem); }
  .part--night .part__copy { padding-top: 5rem; }
  .head { min-height: 0; }
  .hello { padding: 0 1.25rem; }
  .hello__zero { height: min(44svh, 26rem); }
  .hello { padding-right: 0; }
  /* the note above Zero, across the width, the arrow pointing down at them */
  .hello { flex-wrap: wrap; padding-right: 0; }
  .hello__note { position: static; order: -1; width: 100%; margin: 0 0 1.2rem; font-size: 1.3rem; align-items: flex-start; }
  .hello__note img { width: 2.4rem; margin: 0.2em 0.4rem 0 0; transform: rotate(100deg); }
  @keyframes point { from { transform: rotate(100deg) translate(-16px, 0); opacity: 0; } to { transform: rotate(100deg); opacity: 1; } }
  .signing img { height: min(38svh, 22rem); }
  .staff__door { height: min(48svh, 27rem); }
  .staff__door.is-open { transform: scale(1.04); }
  .chair img { max-height: 40svh; }
  .stage__caption { display: none; }
  .interlude__copy { padding: clamp(3rem, 8vh, 5rem) 1.25rem 0; }
  .meta { grid-template-columns: repeat(2, auto); }
  .full__bar { padding: 0.6rem 0.9rem; gap: 0.5rem; grid-template-columns: minmax(0, 1fr) auto auto; min-height: 3.8rem; }
  .full__title b { font-size: 1rem; }
  .full__title span { display: none; }
  .full__where { min-width: 0; font-size: 0.6rem; }
  .full__arrow { width: 2rem; height: 2rem; }
  .full__close { width: 2.2rem; height: 2.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mark { opacity: 1; }
  body.is-open .part--head .part__copy { animation: none; }
}