/* Dylan Powell · the gallery.
   A small bright gallery with one red room. Warm white walls, pale plinths,
   real devices as objects. One accent hue, vermilion, in two lightnesses: the
   room's field and the velvet rope at #FF4A1F, small text on paper at #C22D0B.
   Archivo for everything (its width and weight axes are what the real voices
   drive in the red room); Courier Prime only for what is typed on the cards. */
:root {
  --verm: #ff4a1f; --verm-deep: #e8390f; --verm-text: #b3290a; --inkb: #150d0b; --bone: #fff1e6;
  --sc-canvas: #eceae5; --sc-surface: #fbf8f1;
  --sc-ink: #1a1a18; --sc-ink-soft: #5b5954;
  --sc-accent: #ff4a1f; --sc-accent-ink: #150d0b;
  --sc-font-display: "Archivo", system-ui, sans-serif;
  --sc-font-text: "Archivo", system-ui, sans-serif;
  --type: "Courier Prime", "Courier New", monospace;
  --sc-shadow-color: 30 14% 18%;
  --floor: 77%; --ph: clamp(96px, 16svh, 150px); --slot: 520px;
  --g: clamp(1.25rem, 3vw, 3rem);
  --wdth: 112; --wght: 820;
}
html { background: var(--sc-canvas); }
body { font-size: 16px; line-height: 1.5; letter-spacing: 0; font-variation-settings: "wdth" 100; }
::selection { background: var(--verm); color: var(--inkb); }
:focus-visible { outline: 2px solid var(--verm-text); outline-offset: 3px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sc-grain { opacity: 0.06; mix-blend-mode: multiply; }
a { color: var(--verm-text); text-underline-offset: 0.18em; }

/* ------------------------------------------------------ catalogue line -- */
.cat { position: fixed; z-index: 40; left: var(--g); right: var(--g); top: clamp(1rem, 2.6vh, 1.8rem); display: grid; grid-template-columns: auto 1fr auto; gap: 0 1.4rem; align-items: baseline; pointer-events: none; color: var(--sc-ink); transition: color 0.2s linear; }
.cat > * { pointer-events: auto; }
.cat__name { margin: 0; font-size: 19px; letter-spacing: -0.01em; font-variation-settings: "wdth" 112, "wght" 800; }
.cat__sub { margin: 0; font-size: 14px; max-width: 36rem; opacity: 0.86; font-variation-settings: "wdth" 100, "wght" 450; }
.cat__start { font-size: 15px; font-variation-settings: "wdth" 100, "wght" 700; text-decoration: none; color: var(--verm-text); padding: 0.5rem 0.2rem; border-bottom: 2px solid currentColor; white-space: nowrap; transition: color 0.16s var(--sc-ease-out); }
body.on-room .cat__start { color: var(--inkb); }
body.on-dark .cat, body.on-dark .cat__start { color: var(--bone); }
@media (hover: hover) and (pointer: fine) { .cat__start:hover { color: var(--inkb); } body.on-dark .cat__start:hover { color: var(--verm); } }

/* ------------------------------------------------------------- the hall -- */
.stage { background: #e9e6e0; }
.wall { position: absolute; inset: 0 0 calc(100% - var(--floor)) 0; background: linear-gradient(#ebe9e4, #dcd8d0); overflow: hidden; }
.wall__panels {
  position: absolute; top: 0; bottom: 0; left: 0; width: 600%;
  background: repeating-linear-gradient(90deg, transparent 0 419px, rgb(26 26 24 / 0.06) 419px 420px, rgb(255 255 255 / 0.5) 420px 421px, transparent 421px 420px);
  transform: translate3d(var(--far-x, 0px), 0, 0);
}
.floor { position: absolute; left: 0; right: 0; top: var(--floor); bottom: 0; background: linear-gradient(#d6d2c9, #e4e0d8 40%, #ebe8e2); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55); }

.rail { position: absolute; top: 0; bottom: 0; left: 0; display: flex; }
.obj { position: relative; flex: none; width: var(--slot); height: 100%; margin: 0; }
.pool {
  position: absolute; left: 50%; top: 0; width: 470px; height: calc(var(--floor) + 4%); translate: -50% 0; pointer-events: none;
  background: radial-gradient(58% 52% at 50% 40%, rgb(255 255 255 / 0.92), rgb(255 255 255 / 0) 72%), linear-gradient(180deg, rgb(255 246 230 / 0.35), rgb(255 246 230 / 0) 70%);
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
  opacity: var(--lit, 1);
}
.plinth {
  position: absolute; left: 50%; bottom: calc(100% - var(--floor) - 16px); width: 212px; height: var(--ph); translate: -50% 0;
  background: linear-gradient(90deg, #eeece6, #f9f8f5 38%, #f3f1ec 70%, #e4e1da);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgb(0 0 0 / 0.04), 0 28px 30px -26px rgb(40 36 26 / 0.45);
}
.plinth::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; background: linear-gradient(#ffffff, #f4f2ee); clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%); }
.plinth::after { content: ""; position: absolute; left: -8%; right: -8%; bottom: -16px; height: 22px; border-radius: 50%; background: radial-gradient(closest-side, rgb(40 36 26 / 0.22), transparent); z-index: -1; }
.plinth i { position: absolute; left: 14px; bottom: 12px; font: 700 12px/1 var(--type); font-style: normal; color: rgb(26 26 24 / 0.38); letter-spacing: 0.08em; }
.plinth--low { --ph: 70px; height: 70px; width: 300px; }
.thing { position: absolute; left: 50%; bottom: calc(100% - var(--floor) - 16px + var(--ph) + 10px); translate: -50% 0; }
.thing::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -12px; height: 16px; border-radius: 50%; background: radial-gradient(closest-side, rgb(30 26 18 / 0.35), transparent); z-index: -1; }
/* the polished floor gives back a faint reflection */
.thing > .phone, .thing > .screen, .plinth { -webkit-box-reflect: below 2px linear-gradient(transparent 76%, rgb(255 255 255 / 0.14)); }

.phone { width: max-content; padding: 7px; border-radius: 26px; background: #111; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1), 3px 0 0 -1px #2a2a2a, 0 30px 40px -26px rgb(20 18 12 / 0.6); }
.phone img { height: min(44svh, 27rem); width: auto; max-width: none; border-radius: 20px; }
.obj--print .thing { bottom: calc(100% - var(--floor) - 16px + 70px - 10px); }
.print { width: clamp(17rem, 30vw, 29rem); padding: 14px; background: #fff; box-shadow: 0 0 0 7px #232321, 0 0 0 8px #3a3a37, 0 34px 40px -28px rgb(20 18 12 / 0.55); transform: rotate(-1.2deg); transform-origin: 50% 100%; }
.print img { width: 100%; height: auto; }
.screen { width: clamp(17rem, 30vw, 28rem); padding: 9px 9px 13px; border-radius: 10px; background: #151515; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 30px 40px -26px rgb(20 18 12 / 0.6); }
.screen img { width: 100%; height: auto; border-radius: 3px; }
.screen__foot { display: block; margin: 0 auto; width: 22%; height: 26px; background: linear-gradient(90deg, #b9b6ae, #e3e0d8, #b9b6ae); clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); }

/* 07 · under a dust sheet */
.drape { display: block; width: clamp(11rem, 16vw, 15rem); height: auto; filter: drop-shadow(0 26px 22px rgb(40 34 22 / 0.28)); }
.drape__tag { position: absolute; left: 50%; bottom: 22%; translate: -50% 0; margin: 0; padding: 0.35rem 0.6rem; background: var(--verm); color: var(--inkb); font: 700 11px/1 var(--type); letter-spacing: 0.12em; text-transform: uppercase; rotate: -4deg; box-shadow: 0 6px 12px -6px rgb(0 0 0 / 0.4); white-space: nowrap; }

/* 08 · the empty plinth, in its own light */
.obj--empty .pool, .obj--empty .plinth, .obj--empty .thing { left: calc(50% + var(--hold, 0px) / 2); }
.pool--last { --lit: var(--last-lit, 0); width: 580px; background: radial-gradient(56% 48% at 50% 44%, rgb(255 255 255 / 1), rgb(255 255 255 / 0) 72%), linear-gradient(180deg, rgb(255 246 230 / 0.6), rgb(255 246 230 / 0) 85%); }
.obj--empty .plinth { box-shadow: inset 0 1px 0 #fff, 0 28px 30px -26px rgb(40 36 26 / 0.45), 0 0 0 calc(var(--last-lit, 0) * 1px) rgb(255 74 31 / 0.5); }
.obj--empty .plinth::after { background: radial-gradient(closest-side, rgb(255 255 255 / calc(0.9 * var(--last-lit, 0))), transparent); height: 40px; bottom: -28px; }
.reserved { width: 200px; margin: 0; font: 700 12px/1 var(--type); letter-spacing: 0.12em; text-transform: uppercase; color: var(--verm-text); text-align: center; opacity: var(--last-lit, 0); translate: 0 calc(-8px + var(--last-lit, 0) * 8px); }
.walltext { position: absolute; left: calc(50% + var(--hold, 0px) / 2 + 150px); top: 20%; width: min(19rem, 26vw); opacity: calc(0.25 + var(--last-lit, 0) * 0.75); }
.walltext__h { margin: 0 0 0.6rem; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; font-variation-settings: "wdth" 100, "wght" 750; }
.walltext ol { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.45rem; font-size: 14.5px; line-height: 1.45; color: var(--sc-ink); font-variation-settings: "wdth" 96, "wght" 440; }
.walltext li::marker { font-family: var(--type); font-weight: 700; color: var(--verm-text); }

/* ---------------------------------------------------- 01 · the red room -- */
.obj--room { width: var(--room, 100vw); }
.room__wall {
  position: absolute; left: 0; right: 0; top: 0; height: var(--floor); overflow: hidden; color: var(--inkb);
  background: radial-gradient(120% 95% at 46% 12%, #ff6b3f 0%, #ff4a1f 46%, #e3380f 100%);
  box-shadow: inset 0 -24px 40px -30px rgb(80 10 0 / 0.5);
}
.room__wall.is-caller { color: var(--verm); background: radial-gradient(120% 95% at 46% 12%, #2b1712 0%, #170d0a 52%, #0d0605 100%); }
.room__wave { position: absolute; left: -4%; width: 108%; top: 20%; height: 44%; transform: translate3d(var(--wave-x, 0px), 0, 0); }
.room__wave path { fill: rgb(150 22 0 / 0.26); }
.room__wall.is-caller .room__wave path { fill: rgb(255 74 31 / 0.1); }
.room__big, .room__frag {
  position: absolute; z-index: 2; left: var(--g); right: var(--g); top: 36%; margin: 0;
  font-family: "Archivo", system-ui, sans-serif; line-height: 0.86; letter-spacing: -0.035em;
  font-variation-settings: "wdth" var(--wdth), "wght" var(--wght);
  text-shadow: 0 18px 44px rgb(110 16 0 / 0.26);
  transform: translate3d(0, -50%, 0);
}
.room__wall.is-caller .room__big, .room__wall.is-caller .room__frag { text-shadow: 0 18px 44px rgb(0 0 0 / 0.5); }
.room__big { font-size: var(--big-size, 17vw); white-space: nowrap; opacity: var(--big-o, 1); transform: translate3d(0, -50%, 0) translate3d(0, var(--big-y, 0px), 0) scale(var(--big-s, 1)); transform-origin: 0 50%; }
.room__big span, .room__frag span { display: block; }
.room__frag { right: 31%; font-size: var(--frag-size, 9vw); white-space: normal; text-wrap: balance; opacity: 0; }
.room__refs { position: absolute; z-index: 2; left: var(--g); top: calc(36% + var(--frag-size, 9vw) * 0.47 + 1.8rem); margin: 0; display: flex; gap: 2.2rem; flex-wrap: wrap; font-size: clamp(1.1rem, 0.6rem + 1.5vw, 2.1rem); line-height: 1; text-transform: uppercase; font-variation-settings: "wdth" 125, "wght" 700; font-variant-numeric: tabular-nums; }
.room__refs[hidden] { display: none; }

.room__cap { position: absolute; z-index: 3; left: clamp(27rem, 34vw, 33rem); bottom: 7%; width: min(28rem, 36vw); }
.room__cap p { margin: 0; }
.cap__who { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-variation-settings: "wdth" 100, "wght" 700; margin-bottom: 0.45rem !important; }
.cap__tc { margin-left: 0.5rem; font-variation-settings: "wdth" 100, "wght" 450; font-variant-numeric: tabular-nums; }
.cap__text { font-size: clamp(0.98rem, 0.9rem + 0.25vw, 1.12rem); line-height: 1.42; font-variation-settings: "wdth" 100, "wght" 520; min-height: 4.3em; }
.cap__acts { display: flex; gap: 1.1rem; align-items: center; margin-top: 0.9rem !important; }
.listen {
  display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.65rem 1rem 0.65rem 0.85rem; border: 2px solid currentColor; border-radius: 0; background: transparent; color: inherit; cursor: pointer;
  font: inherit; font-size: 15px; font-variation-settings: "wdth" 100, "wght" 700; white-space: nowrap;
  transition: background-color 0.14s var(--sc-ease-out), color 0.14s var(--sc-ease-out), transform 0.14s var(--sc-ease-out);
}
.listen__i { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
.listen[aria-pressed="true"] .listen__i { width: 10px; height: 12px; border: 0; border-left: 3.5px solid currentColor; border-right: 3.5px solid currentColor; }
.listen__len { font-variation-settings: "wdth" 100, "wght" 450; font-variant-numeric: tabular-nums; }
.listen:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .room__wall .listen:hover { background: var(--inkb); color: var(--verm); } .room__wall.is-caller .listen:hover { background: var(--verm); color: var(--inkb); } }
.tlink { padding: 0.3rem 0.1rem; border: 0; background: none; color: inherit; font: inherit; font-size: 14px; font-variation-settings: "wdth" 100, "wght" 650; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.cap__strip { position: relative; height: 18px; margin-top: 1rem; }
.cap__strip canvas { width: 100%; height: 100%; display: block; }
.cap__head { position: absolute; top: -4px; bottom: -4px; width: 3px; left: var(--head, 0%); background: currentColor; }

.doorway { position: absolute; right: -34px; top: 0; height: var(--floor); width: 68px; z-index: 2; background: linear-gradient(90deg, #c9c4ba, #f2efe9 34%, #e6e2da 70%, #d8d3ca); box-shadow: -22px 0 34px -22px rgb(0 0 0 / 0.45), 18px 0 30px -24px rgb(0 0 0 / 0.25); }
.thing--room, .plinth--room { left: 85%; z-index: 3; }
.thing--room { transform: perspective(900px) rotateY(var(--tilt-y, -8deg)) rotateX(var(--tilt-x, 2deg)); transform-origin: 50% 100%; }

/* foreground: a red velvet rope passing close to the lens */
.near { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; pointer-events: none; z-index: 5; overflow: hidden; }
.near__rope { position: absolute; left: 0; bottom: 0; height: 100%; transform: translate3d(var(--near-x, 0px), 0, 0); }
.near svg { display: block; height: 100%; max-width: none; }

/* ---------------------------------------------------------- the rolodex -- */
.rolodex { position: absolute; z-index: 8; left: var(--g); bottom: clamp(1.1rem, 4vh, 2.4rem); width: min(25rem, 32vw); }
.tabs { display: flex; gap: 3px; margin: 0 0 10px 12px; flex-wrap: wrap; }
.tabs button {
  font: 700 12px/1 var(--type); letter-spacing: 0.03em; padding: 7px 8px 6px; border: 0; border-radius: 5px 5px 0 0; cursor: pointer;
  background: rgb(255 255 255 / 0.72); color: var(--sc-ink-soft); box-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.06);
  transition: background-color 0.16s var(--sc-ease-out), color 0.16s var(--sc-ease-out);
}
.tabs button[aria-current="true"] { background: var(--inkb); color: var(--bone); }
@media (hover: hover) and (pointer: fine) { .tabs button:not([aria-current="true"]):hover { background: #fff; color: var(--sc-ink); } }
.file { position: relative; height: 19.5rem; perspective: 900px; perspective-origin: 50% -120%; }
.cards { position: absolute; left: 14px; right: 14px; bottom: 46px; height: 14.8rem; transform-style: preserve-3d; }
.card {
  position: absolute; inset: 0; margin: 0; padding: 0.85rem 1rem 0.8rem; border-radius: 7px;
  background: linear-gradient(#fcfaf5, #f7f3ea); color: var(--sc-ink);
  box-shadow: 0 0 0 1px rgb(40 34 20 / 0.12), 0 1px 0 rgb(255 255 255 / 0.9) inset, 0 16px 26px -18px rgb(30 24 12 / 0.5);
  transform-origin: 50% 100%;
  transform: translate3d(0, var(--y, 0px), var(--z, 0px)) rotateX(var(--a, 0deg));
  opacity: var(--o, 1); backface-visibility: hidden;
}
.card > * { opacity: var(--ink-o, 1); }
.card::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 34px; height: 9px; translate: -50% 0; border-radius: 6px 6px 0 0; background: #e2ded6; box-shadow: inset 0 1px 1px rgb(0 0 0 / 0.12); }
.card header { display: grid; grid-template-columns: auto 1fr auto; gap: 0.7rem; align-items: baseline; padding-bottom: 0.45rem; border-bottom: 2px solid var(--verm); }
.card header b { font: 700 13px/1 var(--type); color: var(--verm-text); }
.card h2 { margin: 0; font-size: 18px; line-height: 1.1; letter-spacing: -0.01em; font-variation-settings: "wdth" 100, "wght" 760; }
.card header span { font: 700 11px/1 var(--type); letter-spacing: 0.08em; text-transform: uppercase; color: var(--verm-text); white-space: nowrap; }
.card dl { margin: 0.45rem 0 0; display: grid; background: repeating-linear-gradient(transparent 0 21px, rgb(21 13 11 / 0.1) 21px 22px); }
.card dl > div { display: grid; grid-template-columns: 5.4rem 1fr; gap: 0.6rem; min-height: 22px; align-items: baseline; }
.card dt { font: 700 10.5px/22px var(--type); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft); }
.card dd { margin: 0; font: 400 13px/22px var(--type); }
.card dd a { margin-right: 0.6rem; white-space: nowrap; font-weight: 700; color: var(--verm-text); }
.card dd small { font: 400 11px/1.4 var(--type); color: var(--sc-ink-soft); }
.card .is-placeholder { color: var(--sc-ink-soft); }
.card .tlink { font: 700 13px/22px var(--type); color: var(--verm-text); padding: 0; }
.card--yours header, .card--soon header { border-bottom-style: dashed; }
.listen--card { padding: 3px 8px; border-width: 1.5px; border-color: var(--verm-text); color: var(--verm-text); font: 700 12.5px/1 var(--type); }
.listen--card .listen__len { font-family: var(--type); }
@media (hover: hover) and (pointer: fine) { .listen--card:hover { background: rgb(255 74 31 / 0.1); } }
.drum { position: absolute; left: 0; right: 0; bottom: 14px; height: 66px; }
.knob { position: absolute; bottom: 0; width: 66px; height: 66px; border-radius: 50%; background: radial-gradient(circle at 36% 32%, #5a5955, #1e1d1b 58%, #111 100%); box-shadow: 0 10px 16px -8px rgb(0 0 0 / 0.55), inset 0 0 0 5px rgb(255 255 255 / 0.04); }
.knob--l { left: -14px; } .knob--r { right: -14px; }
.rod { position: absolute; left: 30px; right: 30px; bottom: 29px; height: 9px; border-radius: 4px; background: linear-gradient(#d8d6d0, #8f8c85); }
.stand { position: absolute; left: 12%; right: 12%; bottom: -12px; height: 12px; border-radius: 3px; background: linear-gradient(#302f2c, #151513); box-shadow: 0 10px 18px -10px rgb(0 0 0 / 0.6); }

/* ------------------------------------------------------------- colophon -- */
.colophon { position: relative; z-index: 2; background: var(--inkb); color: var(--bone); padding: clamp(3.5rem, 9vh, 6rem) var(--g) clamp(3rem, 7vh, 5rem); }
.colophon__in { max-width: 40rem; margin-left: clamp(0rem, 30vw, 34rem); }
.colophon p { margin: 0 0 0.9rem; font-size: 15.5px; line-height: 1.6; font-variation-settings: "wdth" 100, "wght" 420; color: rgb(255 241 230 / 0.86); }
.colophon .colophon__name { font-size: 17px; color: var(--bone); font-variation-settings: "wdth" 112, "wght" 800; }
.colophon a { color: var(--verm); font-variation-settings: "wdth" 100, "wght" 650; }
.colophon__small { font-size: 13px !important; color: rgb(255 241 230 / 0.6) !important; }

/* --------------------------------------------------------------- sheets -- */
.sheet { width: min(44rem, 94vw); max-height: 86vh; padding: 1.6rem 1.6rem 1.4rem; border: 0; border-radius: 10px; background: var(--sc-surface); color: var(--sc-ink); box-shadow: 0 30px 80px rgb(0 0 0 / 0.35); }
.sheet::backdrop { background: rgb(21 13 11 / 0.62); }
.sheet h2 { margin: 0 0 0.6rem; font-size: 1.3rem; font-variation-settings: "wdth" 100, "wght" 750; }
.sheet__note { margin: 0 0 1.2rem; color: var(--sc-ink-soft); font-size: 14px; }
.sheet__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.sheet__lines li { display: grid; gap: 0.2rem; }
.sheet__lines b { font: 700 11px/1.3 var(--type); letter-spacing: 0.06em; text-transform: uppercase; color: var(--verm-text); }
.sheet__lines li.caller b { color: var(--sc-ink-soft); }
.sheet__lines span { font-size: 15.5px; line-height: 1.5; }
.sheet__close { float: right; margin: -0.4rem -0.4rem 0 0; font: 700 13px/1 var(--type); padding: 0.55rem 0.75rem; border: 0; border-radius: 6px; background: var(--inkb); color: var(--bone); cursor: pointer; }
.sheet--wide { width: min(76rem, 96vw); padding: 0.8rem; }
.sheet--wide img { display: block; width: 100%; height: auto; clear: both; }
.sheet--wide .sheet__close { position: absolute; right: 1.2rem; top: 1.2rem; float: none; margin: 0; }

/* ---------------------------------------------------------------- phone -- */
@media (max-width: 860px) {
  :root { --floor: 60%; --ph: 96px; --slot: 78vw; --g: 1rem; }
  .cat { grid-template-columns: 1fr auto; top: 0.8rem; }
  .cat__sub { display: none; }
  .cat__start { font-size: 14px; padding: 0.35rem 0.1rem; }
  .pool { width: 300px; }
  .plinth { width: 150px; }
  .plinth--low { width: 230px; height: 56px; --ph: 56px; }
  .obj--print .thing { bottom: calc(100% - var(--floor) - 16px + 56px - 8px); }
  .phone { padding: 5px; border-radius: 19px; }
  .phone img { height: min(32svh, 17rem); border-radius: 15px; }
  .print { width: 15rem; padding: 9px; box-shadow: 0 0 0 5px #232321, 0 26px 30px -24px rgb(20 18 12 / 0.55); }
  .screen { width: 15.5rem; }
  .drape { width: 9.5rem; }
  .near { display: none; }
  .walltext { left: 50%; translate: -50% 0; top: 11%; width: 72vw; text-align: left; }
  .walltext ol { font-size: 13px; gap: 0.3rem; }
  /* the red room, recomposed for a phone */
  .room__big { top: auto; bottom: 1.2rem; left: calc(var(--g) - 0.06em); right: auto; writing-mode: vertical-rl; transform: rotate(180deg) scale(var(--big-s, 1)); transform-origin: 50% 50%; line-height: 0.8; }
  .room__frag { top: 27%; right: var(--g); }
  .room__refs { top: calc(27% + var(--frag-size, 9vw) * 0.9 + 0.6rem); gap: 0.4rem 1.2rem; }
  .room__cap { left: var(--g); right: 34%; width: auto; bottom: 1rem; }
  /* while the word runs up the wall, the caption sits beside it, above the phone */
  .room__wall.has-word .room__cap { left: calc(var(--g) + var(--cap-l, 0px)); right: var(--g); top: 4.6rem; bottom: auto; }
  .room__wall.has-word .cap__strip { display: none; }
  .cap__text { font-size: 14.5px; min-height: 0; }
  .cap__acts { margin-top: 0.6rem !important; }
  .thing--room, .plinth--room { left: 78%; }
  .thing--room .phone img { height: min(22svh, 11rem); }
  .plinth--room { width: 110px; }
  .doorway { width: 40px; right: -20px; }
  .rolodex { left: 0.75rem; right: 0.75rem; width: auto; bottom: 0.6rem; }
  .tabs { display: none; }
  .file { height: 15rem; }
  .cards { left: 10px; right: 10px; bottom: 36px; height: 12.4rem; }
  .card { padding: 0.7rem 0.8rem; }
  .card h2 { font-size: 16px; }
  .card dl > div { grid-template-columns: 4.7rem 1fr; gap: 0.45rem; }
  .card dd { font-size: 12px; line-height: 20px; }
  .card dt { font-size: 9.5px; line-height: 20px; }
  .card dl { background: repeating-linear-gradient(transparent 0 19px, rgb(21 13 11 / 0.1) 19px 20px); }
  .drum { height: 46px; bottom: 10px; }
  .knob { width: 46px; height: 46px; }
  .knob--l { left: -6px; } .knob--r { right: -6px; }
  .rod { bottom: 19px; left: 26px; right: 26px; height: 7px; }
  .stand { display: none; }
  .colophon__in { margin-left: 0; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .cap__strip { display: none; }
}

/* ------------------------------------------------------- reduced motion --
   No pinned travel: the gallery is one screen, the rail scrolls sideways
   (swipe, shift-scroll or the index tabs), and the red room holds its title.
   Listen still plays the call and the wall follows it, without moving type. */
@media (prefers-reduced-motion: reduce) {
  .hall { height: 100svh !important; }
  .hall .stage.sc-stage { overflow: hidden !important; }
  .rail { right: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; }
  .obj { scroll-snap-align: center; }
  .card { transform: none !important; }
  .wall__panels, .near__rope, .room__wave, .thing--room { transform: none !important; }
}