/* Coming soon: "Up close" scroll spotlight. Phones get a swipe rail; desktop pins the stage and scroll picks the idea. */
#s-spot { overflow-x: clip; padding-bottom: calc(var(--sec-y) * .6); }
.spx__head { margin-bottom: 28px; }
.spx__nav { display: none; }
.spx__items { display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gutter) 8px; margin: 0 calc(var(--gutter) * -1); scrollbar-width: none; }
.spx__items::-webkit-scrollbar { display: none; }
.spx__item { scroll-snap-align: center; display: grid; gap: 16px; align-content: start; }
.spx__img { border-radius: var(--radius); overflow: hidden; background: var(--char); aspect-ratio: 16 / 9; display: grid; place-items: center; }
.spx__img img { width: 100%; height: 100%; object-fit: cover; }
.spx__img--tall img { width: auto; height: 100%; object-fit: contain; }
.spx__txt p { color: var(--mute); margin: 8px 0 0; max-width: 30em; }
.spx__txt .t-mono { color: var(--beam); }
.spx__bar { display: none; }

@media (min-width: 900px) {
  .spx { height: 420vh; }
  .spx__stage { position: sticky; top: var(--header-h); min-height: calc(100vh - var(--header-h)); display: flex; flex-direction: column; justify-content: center; padding-block: 24px; }
  .spx__body { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: center; }
  .spx__nav { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
  .spx__nav button { display: flex; gap: 14px; align-items: baseline; width: 100%; min-height: 48px; padding: 8px 0; border: 0; background: none; text-align: left; font: 600 26px/1 var(--f-display); text-transform: none; letter-spacing: -.035em; opacity: .32; transition: opacity .35s var(--ease-out); }
  .spx__nav button .t-mono { font-size: 12px; color: var(--mute); }
  .spx__nav button[aria-current="true"], .spx__nav button:hover { opacity: 1; }
  .spx__items { display: block; position: relative; overflow: visible; margin: 0; padding: 0; height: min(62vh, 560px); }
  .spx__item { position: absolute; inset: 0; grid-template-columns: 1fr 260px; align-items: center; gap: 36px; opacity: 0; transform: translate3d(0, 18px, 0) scale(.985); transition: opacity .55s var(--ease-out), transform .7s var(--ease-out); pointer-events: none; }
  .spx__item.is-on { opacity: 1; transform: none; pointer-events: auto; }
  .spx__img { height: 100%; aspect-ratio: auto; }
  .spx__bar { display: block; height: 2px; margin-top: 28px; background: var(--line); border-radius: 2px; overflow: hidden; }
  .spx__bar i { display: block; height: 100%; background: var(--beam); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
}
@media (min-width: 900px) and (prefers-reduced-motion: reduce) {
  .spx { height: auto; }
  .spx__stage { position: static; min-height: 0; }
}