.wheel {
  background: linear-gradient(180deg, var(--surface-base), var(--surface-void));
  /* Generous vertical room: the ring is tall now, and the section needs
     space above and below so it does not feel pinched against its
     neighbours. */
  padding-block: var(--space-10) var(--space-10);
  overflow: hidden;
}
/* The ring is centred in a tall viewport, so it already carries empty space
   above the cards; a large margin here as well left the heading stranded far
   from the wheel. */
.wheel__head { text-align: center; margin-bottom: var(--space-4); }
.wheel__title { font-size: clamp(1.8rem, 4.5vw, var(--size-3xl)); }
.wheel__hint {
  margin-top: var(--space-3); font-size: var(--size-xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-faint);
}

.wheel__viewport {
  /* Trimmed from 780px: the extra height was empty room above and below the
     ring, not part of it. The cards and the 3D arrangement are unchanged. */
  position: relative; height: 660px;
  /* Perspective must stay well clear of rz or the near cards balloon and the
     ring distorts into a teardrop. */
  perspective: 1500px; perspective-origin: 50% 48%;
  /* pan-y keeps vertical page scrolling available on touch; only
     horizontal drags are claimed by the wheel. */
  touch-action: pan-y; cursor: grab;
}
.wheel__viewport.is-dragging { cursor: grabbing; }

.wheel__stage {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  display: grid; place-items: center;
}

.wheel__stage .wheel__item {
  /* Two classes deep on purpose. The hover system's .has-spotlight also sets
     `position`, and at equal specificity the later stylesheet won — which
     dropped these cards out of the 3D ring and stacked them into a diagonal
     staircase. Winning on specificity makes it independent of load order. */
  position: absolute;
  width: 340px; padding: var(--space-5);
  display: grid; gap: var(--space-4); justify-items: center;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  background: var(--surface-raised);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius-md);
}
.wheel__item-media {
  display: block; width: 100%; aspect-ratio: 16 / 10;
  background: var(--surface-panel);
  display: grid; place-items: center; overflow: hidden;
}
.wheel__item-media img { width: 100%; height: 100%; object-fit: contain; }
.wheel__item-media, .wheel__item-name, .wheel__item-go {
  /* Above .has-spotlight::before (z-index 1), which otherwise paints over
     every child that has no stacking position of its own — including the
     name of whichever card is at the front. */
  position: relative;
  z-index: 2;
}

.wheel__item-name {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--size-sm);
}

.wheel__item.is-active {
  border-color: var(--red);
  box-shadow: 0 0 0 1px var(--red), 0 20px 60px -12px var(--red-glow);
}
/* Was #fff, which is invisible on a white card in light mode. The token
   follows the theme. */
.wheel__item.is-active .wheel__item-name { color: var(--text-primary); }

.wheel__arrow {
  position: absolute; top: 50%; translate: 0 -50%;
  /* Above the ring. The stage is a 3D stacking context, so its cards cannot
     paint over these however deep their own z-index goes. */
  z-index: 120;
  pointer-events: auto;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--surface-line); color: var(--steel-200);
  font-size: var(--size-lg); line-height: 1;
  background: rgba(8, 9, 10, 0.7);
}
.wheel__arrow:hover { border-color: var(--red); color: var(--text-primary); }
/* The arrows sat on a near-black disc in both themes, so in light mode their
   dark glyph was dark on dark. */
[data-theme='light'] .wheel__arrow { background: rgba(255, 255, 255, 0.88); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); }
.wheel__arrow--prev { left: var(--shell-pad); }
.wheel__arrow--next { right: var(--shell-pad); }

.wheel__active {
  text-align: center; margin-top: var(--space-6);
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--steel-400); font-size: var(--size-sm);
}

/* These must match the specificity of the base rule above
   (.wheel__stage .wheel__item), or they lose to it and phones keep the
   full desktop card — which is what happened: a 340px card, magnified to
   408px by the 3D ring, on a 360px screen. */
@media (max-width: 760px) {
  .wheel__viewport { height: 430px; perspective: 1100px; }
  .wheel__stage .wheel__item { width: 230px; padding: var(--space-4); }
  .wheel__arrow { display: none; }
}

@media (max-width: 480px) {
  .wheel__viewport { height: 390px; }
  .wheel__stage .wheel__item { width: 196px; }
}

/* Cards are anchors now — keep them looking like cards, not links. */
.wheel__item { text-decoration: none; cursor: pointer; }
.wheel__item.is-active { cursor: pointer; }

/* The call to action only appears on the front card, so the ring stays
   quiet and the actionable one is obvious. */
.wheel__item-go {
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--red-text);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity var(--dur-base) var(--ease-out), max-height var(--dur-base) var(--ease-out);
}
.wheel__item.is-active .wheel__item-go { opacity: 1; max-height: 2em; }

/* While dragging, suppress the pointer cursor so it reads as a grab. */
.wheel__viewport.is-dragging .wheel__item { cursor: grabbing; }

/* Shown in place of the ring if its data could not be loaded. */
.wheel__fallback { display: grid; gap: var(--space-4); justify-items: center; text-align: center; padding: var(--space-8) 0; }