/* About, "The Orchestra" (25 Oct): nearly 200 agents around T.O.N.I. See orchestra.js. */
.orch { position: relative; background: var(--ink-0); color: var(--fg); padding: clamp(80px, 12vh, 140px) 0 clamp(64px, 10vh, 120px); overflow: hidden; }
.orch::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 55% at 50% 92%, oklch(0.26 0.09 358 / .45), transparent 70%); }
.orch-head { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; }
.orch-head .h2 { max-width: 13ch; }
.orch-head .body { max-width: 52ch; color: var(--fg-2); }
.orch-count { display: block; margin-top: 18px; font: 400 11px/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.orch-count b { color: #FF0A7A; font-weight: 400; }

.orch-room { position: relative; margin-top: clamp(28px, 5vh, 56px); }
.orch-stage-wrap { position: relative; }
.orch-stage { position: relative; height: clamp(620px, 76vh, 720px); }
.orch-lines { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.orch-baton { fill: none; stroke: #FF0A7A; stroke-width: 1.5; transition: stroke-dashoffset 1s var(--ease), opacity 1.6s var(--ease); filter: drop-shadow(0 0 6px oklch(0.6 0.24 358 / .7)); }
.orch-baton.is-old { opacity: 0; }

/* seats */
.orch-seat { position: absolute; width: var(--seat, 26px); height: calc(var(--seat, 26px) * 1.125); margin: calc(var(--seat, 26px) * -.56) 0 0 calc(var(--seat, 26px) * -.5); padding: 0; border: 0; background: center / contain no-repeat; image-rendering: pixelated; cursor: pointer;
  transition: transform .4s var(--ease), opacity .4s var(--ease), filter .4s; opacity: 0; transform: scale(.4); }
.orch.is-awake .orch-seat, .orch.is-list .orch-seat { opacity: .82; transform: none; }
.orch.is-awake .orch-seat { transition-delay: calc(var(--i, 0) * 1ms); }
.orch-seat:hover, .orch-seat:focus-visible, .orch-seat.is-on { opacity: 1; transform: scale(1.55); z-index: 3; outline: none; filter: drop-shadow(0 0 8px oklch(0.6 0.24 358 / .6)); }
.orch-seat.is-lead { opacity: 1; }
.orch.is-desk .orch-seat:not(.is-lit) { opacity: .16; }
.orch.is-desk .orch-seat.is-lit { opacity: 1; }
.orch.is-playing .orch-seat:not(.is-called):not(.is-on) { opacity: .28; }
.orch-seat.is-called { opacity: 1; transform: scale(1.75); z-index: 4; filter: drop-shadow(0 0 10px oklch(0.6 0.24 358 / .9)); }

/* the conductor */
.orch-toni { position: absolute; width: 72px; height: 81px; margin: -40px 0 0 -36px; padding: 0; border: 0; background: center / contain no-repeat; image-rendering: pixelated; cursor: pointer; z-index: 5;
  filter: drop-shadow(0 0 22px oklch(0.6 0.24 358 / .55)); transition: transform .5s var(--ease), filter .5s; }
.orch-toni:hover, .orch-toni:focus-visible, .orch-toni.is-called { transform: scale(1.08); outline: none; filter: drop-shadow(0 0 34px oklch(0.6 0.24 358 / .9)); }
.orch-toni-label { position: absolute; transform: translateX(-50%); text-align: center; pointer-events: none; white-space: nowrap; }
.orch-toni-label b { display: block; font: 900 1.25rem/1 var(--f-display); letter-spacing: -0.02em; }
.orch-toni-label small { display: block; margin-top: 6px; font: 400 10px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: #FF0A7A; }
.orch-arc-label { position: absolute; transform: translate(-50%, -50%); font: 400 10px/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); white-space: nowrap; pointer-events: none; transition: color .3s; }
.orch-arc-label.is-lit { color: #FF0A7A; }

/* the card: who this agent is */
.orch-card { position: absolute; z-index: 6; left: 0; top: 0; width: min(330px, 30%); display: grid; grid-template-columns: 64px 1fr; gap: 6px 16px; align-items: start; padding: 18px; background: oklch(0.165 0.008 358 / .92); border: 1px solid var(--rule-soft); }
.orch-card-av { grid-row: span 3; width: 64px; height: 72px; background: center / contain no-repeat; image-rendering: pixelated; }
.orch-card small { font: 400 10px/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #FF0A7A; }
.orch-card b { font: 800 1.2rem/1.1 var(--f-display); letter-spacing: -0.01em; }
.orch-card p { margin: 0; color: var(--fg-2); font-size: .92rem; line-height: 1.45; }

/* conduct controls */
.orch-ctl { position: absolute; z-index: 6; right: 0; top: 0; width: min(300px, 26%); text-align: right; }
.orch-play { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 20px; border: 0; background: #E6007E; color: #fff; font: 700 .95rem/1 var(--f-display); cursor: pointer; transition: transform .4s var(--ease); }
.orch-play::before { content: ""; width: 0; height: 0; border-left: 8px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.orch-play:hover { transform: translateY(-2px); }
.orch.is-playing .orch-play::before { border: 0; width: 8px; height: 8px; background: #fff; }
.orch-flows { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-top: 12px; }
.orch-flow { border: 1px solid var(--rule-soft); background: transparent; color: var(--fg-3); padding: 8px 10px; font: 400 12px/1 var(--f-body); cursor: pointer; transition: color .3s, border-color .3s; }
.orch-flow:hover, .orch-flow[aria-pressed="true"] { color: var(--fg); border-color: #E6007E; }
.orch-caption { position: relative; z-index: 6; width: min(620px, 90%); margin: 8px auto 0; text-align: center; font: 500 1rem/1.45 var(--f-body); color: var(--fg); min-height: 1.45em; }
.orch-caption.is-in { animation: orch-cap .6s var(--ease); }
@keyframes orch-cap { from { opacity: 0; transform: translateY(8px); } }
.orch:not(.is-playing) .orch-caption { color: var(--fg-3); }

/* desk legend */
.orch-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 36px; }
.orch-desk { display: inline-flex; gap: 10px; align-items: baseline; padding: 10px 12px; border: 1px solid var(--rule-soft); background: transparent; color: var(--fg-2); cursor: pointer; transition: color .3s, border-color .3s; }
.orch-desk b { font: 600 .85rem/1 var(--f-body); }
.orch-desk span { font: 400 10px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.orch-desk:hover, .orch-desk:focus-visible, .orch-desk.is-lit { color: var(--fg); border-color: #E6007E; outline: none; }

/* phones: T.O.N.I first, then every desk as a grid of faces; the card follows the tapped desk */
.orch.is-list .orch-stage { height: auto; }
.orch.is-list .orch-caption { order: -1; }
.orch.is-list .orch-lines, .orch.is-list .orch-legend { display: none; }
.orch.is-list .orch-seat { position: relative; margin: 0; width: 40px; height: 45px; transform: none; }
.orch.is-list .orch-seat.is-on { transform: scale(1.15); }
.orch-list-toni { display: flex; align-items: center; gap: 16px; padding: 8px 0 20px; }
.orch.is-list .orch-toni { position: relative; margin: 0; }
.orch.is-list .orch-toni-label { position: static; transform: none; text-align: left; }
.orch-list-desk { padding: 18px 0; border-top: 1px solid var(--rule-soft); }
.orch-list-h { margin: 0; font: 800 1.1rem/1.2 var(--f-display); }
.orch-list-l { margin: 4px 0 12px; font-size: .88rem; color: var(--fg-3); }
.orch-list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; }
.orch.is-list .orch-card { position: relative; width: auto; margin: 4px 0 8px; }
.orch.is-list .orch-ctl { position: relative; width: auto; text-align: left; margin-bottom: 20px; }
.orch.is-list .orch-flows { justify-content: flex-start; }
.orch.is-list .orch-caption { position: relative; left: 0; bottom: 0; transform: none; width: auto; text-align: left; margin: 12px 0 0; }
@media (max-width: 899px) { .orch-head { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .orch-seat, .orch-toni, .orch-baton { transition: none; } .orch-seat { opacity: .82; transform: none; } .orch-caption.is-in { animation: none; } }

/* Tile creatures in the seats (25 Oct) */
.orch-seat, .orch-toni, .orch-card-av { background: none !important; }
.orch-seat { height: calc(var(--seat, 26px) * .95); margin-top: calc(var(--seat, 26px) * -.48); }
.orch-seat svg, .orch-toni svg, .orch-card-av svg { display: block; width: 100%; height: 100%; overflow: visible; }
.orch-toni { width: 84px; height: 76px; margin: -40px 0 0 -42px; }
.orch-card-av { height: 60px; }
.orch.is-list .orch-seat { width: 40px; height: 38px; }

/* the SOP on the card (25 Oct) */
.orch-card { width: min(380px, 32%); }
.orch-sop { grid-column: 1 / -1; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--rule-soft); }
.orch-sop small { color: var(--fg-3); }
.orch-sop ol { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.orch-sop li { position: relative; padding: 5px 8px; font: 500 .72rem/1.1 var(--f-body); color: var(--fg-3); border: 1px solid var(--rule-soft); }
.orch-sop li + li::before { content: ""; position: absolute; left: -5px; top: 50%; width: 4px; height: 1px; background: var(--rule); }
.orch-sop li.is-me { color: #fff; background: #E6007E; border-color: #E6007E; }
.orch-sop p { margin: 8px 0 0; font-size: .8rem; color: var(--fg-3); }

/* the card floats beside the hovered agent on desktop (25 Oct) */
.orch.is-arc .orch-card { width: 360px; box-shadow: 0 24px 60px rgb(0 0 0 / .55); transition: left .35s var(--ease), top .35s var(--ease); pointer-events: none; }
.orch.is-arc .orch-card { background: oklch(0.17 0.008 358); border-color: oklch(0.32 0.012 358); }