/* The wheel of works — II · Works

   A showroom turntable for the studio record, dressed as Mercedes-Benz dress
   their own showroom: black and white, nothing else. The stage is black under
   a cool white spotlight; the plates stand round a ring, and the one at the
   front comes into a thin white frame whose edges run out across the stage as
   faint hairlines. The arrows are the round white Mercedes arrows; under the
   ring sits the Mercedes pager (the index, the dots, the count); and the
   caption is the black panel Mercedes put under a photograph — an upright
   serif headline in capitals, a line of plain sans, the heart, and full-width
   pills on a telephone. The only colour on the stage is the paintings' own.

   works.js sets the measurements it works out from the size of the stage as
   custom properties on .wheel: --pw and --ph (the plate in the frame), --cy
   (the height of the frame's centre in the stage) and --ring-r. */

.wheel {
  --pw: 300px;
  --ph: 360px;
  --cy: 260px;
  --w-gut: var(--gut, 20px);
  --w-line: rgba(255, 255, 255, 0.34);
  --w-faint: rgba(255, 255, 255, 0.085);
  --w-dim: var(--g500, #767676);
  --w-soft: var(--g300, #c8c8c8);
  --w-ease: var(--ease-out, cubic-bezier(0.2, 0.8, 0.2, 1));
  --w-sans: var(--f-sans, "Inter", "Segoe UI", system-ui, -apple-system, sans-serif);
  --w-serif: var(--f-serif, "Instrument Serif", "Iowan Old Style", Georgia, serif);
  position: relative;
  color: var(--paper, #fff);
  font-family: var(--w-sans);
  /* A telephone's own flash on a tap is a translucent blue box; nothing on
     the stage is coloured, so it is put out here for every control within,
     and each answers a press in black and white instead (below). */
  -webkit-tap-highlight-color: transparent;
}

/* On the black stage every focus ring is white, whatever the colour of the
   control it circles; on the white index sheet it is black. */
.wheel :focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ---------- the stage ---------- */

.wheel__view {
  position: relative;
  height: clamp(460px, calc(100svh - 330px), 700px);
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: grab;
  outline: none;
}

.wheel.is-dragging .wheel__view { cursor: grabbing; }

/* The most height the stage may take; works.js trims the stage to what the
   ring needs within it. */
.wheel__probe {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: clamp(460px, calc(100svh - 330px), 700px);
  visibility: hidden;
  pointer-events: none;
}

/* The stage is one focusable region. Its focus ring is drawn on the frame
   the plates come into, closing the four corner ticks into one white line:
   a ring round the whole stage would run under the pager drawn up over its
   foot. */
.wheel .wheel__view:focus-visible { outline: none; }

.wheel .wheel__view:focus-visible .wheel__frame {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

/* The spotlight: a soft cone of white falling from above onto the frame,
   and a pale pool on the floor at its foot. Painted once; nothing here
   moves. */
.wheel__light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse calc(var(--pw) * 1.25) calc(var(--ph) * 0.95) at 50% var(--cy),
      rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.025) 55%, transparent 78%),
    radial-gradient(ellipse calc(var(--pw) * 1.9) calc(var(--ph) * 0.2) at 50% calc(var(--cy) + var(--ph) * 0.52),
      rgba(255, 255, 255, 0.1), transparent 72%);
}

.wheel__light::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -60px;
  width: calc(var(--pw) * 2.4);
  height: calc(var(--cy) + var(--ph) * 0.62 + 60px);
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 100% at 50% 0%, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025) 55%, transparent 80%);
  -webkit-mask-image: linear-gradient(90deg, transparent 8%, #000 34%, #000 66%, transparent 92%);
  mask-image: linear-gradient(90deg, transparent 8%, #000 34%, #000 66%, transparent 92%);
}

/* The frame's edges carried out to the sides and the top and bottom of the
   stage as faint hairlines, fading as they go. */
.wheel__guides {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.wheel__guides::before,
.wheel__guides::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.wheel__guides::before {
  left: 0;
  right: 0;
  top: calc(var(--cy) - var(--ph) / 2 - 16px);
  height: calc(var(--ph) + 32px);
  border-top: 1px solid var(--w-faint);
  border-bottom: 1px solid var(--w-faint);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}

.wheel__guides::after {
  top: 0;
  bottom: 0;
  left: calc(50% - var(--pw) / 2 - 16px);
  width: calc(var(--pw) + 32px);
  border-left: 1px solid var(--w-faint);
  border-right: 1px solid var(--w-faint);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 70%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 70%, transparent);
}

/* ---------- the ring ---------- */

.wheel__scene {
  position: absolute;
  inset: 0;
  transition: opacity 0.22s ease;
}

.wheel.is-changing .wheel__scene { opacity: 0; }

.wheel__ring {
  position: absolute;
  left: 50%;
  top: var(--cy);
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

.wheel__slot {
  position: absolute;
  left: calc(var(--pw) / -2);
  top: calc(var(--ph) / -2);
  width: var(--pw);
  height: var(--ph);
  cursor: pointer;
}

.wheel__slot.is-front { cursor: inherit; }

.wheel__plate {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Each picture hangs on a leaf that works.js cuts to the picture's own shape
   inside the plate's box, from the record, before the picture has come: so
   it is never stretched and nothing shifts when it arrives. The reflection
   under the leaf is the polished showroom floor. */
.wheel__leaf {
  position: relative;
  flex: 0 0 auto;
  display: block;
  -webkit-box-reflect: below 3px linear-gradient(180deg, transparent 0%, transparent 76%, rgba(255, 255, 255, 0.15) 100%);
}

/* The face of the leaf carries the picture, and is what works.js dims as a
   plate goes round the ring. */
.wheel__face {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

/* A picture that fills its leaf to the edges, a sheet of paper or a canvas
   photographed with its wall, stands on a black back. Dimmed, it darkens as
   a thing in shadow does, and hides what stands behind it; without the back
   it would thin to glass, and two drawings be seen one through the other. A
   cut-out is given none: its outline is its own, and a square of black
   behind it would show against the light on the stage. The back waits for
   the picture, and goes with it when the pictures are veiled (protect.css)
   or left out of a print, so no dark shape stands where a picture is not. */
.wheel__leaf--solid { background: #000; }

.wheel__leaf--solid.is-waiting,
html.srs-veil .wheel__leaf--solid { background: none; }

@media print {
  .wheel__leaf--solid { background: none; }
}

/* Until its picture has come, the face is a blank plate of the same shape:
   a faint panel inside a hairline. It fades as the picture fades in, and
   stays for as long as a picture will not come at all. */
.wheel__face::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.wheel__leaf.is-waiting .wheel__face::before { opacity: 1; }

/* Only the plate in the frame says that its picture is missing; round the
   rest of the ring a blank plate is enough. */
.wheel__slot.is-front .wheel__leaf.is-missing::after,
.wheel__flat .wheel__leaf.is-missing::after {
  content: "This picture has not arrived yet.";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 14%;
  font-family: var(--w-sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  text-align: center;
  color: #9e9e9e;
  pointer-events: none;
}

.wheel__img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: auto;
}

.wheel__img.is-ready { opacity: 1; }

/* A framed painting is cut out and floats. A drawing on its own sheet is
   white to its edges, and on black would read as a hole cut in the stage, so
   it is given what a sheet of paper has under a lamp: a fine dark edge just
   inside it and a faint spill of light round it. Both are drawn on the
   picture itself, and come and go with it. */
.wheel__leaf--sheet .wheel__img {
  outline: 1px solid rgba(0, 0, 0, 0.2);
  outline-offset: -1px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 0 36px rgba(255, 255, 255, 0.08);
}

/* The turntable the plates stand round: a faint disc on the floor with a
   rim of fine white ticks, turning with the ring. */
.wheel__floor {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02) 70%, transparent 92%);
}

.wheel__floor::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(from -0.3deg, rgba(255, 255, 255, 0.3) 0deg 0.6deg, transparent 0.6deg 7.5deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent 95%, #000 95.5% 99%, transparent 99.5%);
  mask-image: radial-gradient(closest-side, transparent 95%, #000 95.5% 99%, transparent 99.5%);
}

/* ---------- the frame ---------- */

.wheel__frame {
  position: absolute;
  left: 50%;
  top: var(--cy);
  width: calc(var(--pw) + 32px);
  height: calc(var(--ph) + 32px);
  transform: translate(-50%, -50%);
  border: 1px solid var(--w-line);
  pointer-events: none;
  z-index: 2;
}

.wheel__tick {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 0 solid #fff;
  transition: transform 0.55s var(--w-ease), opacity 0.55s ease;
}

/* The corners open a little while the ring turns and close on the plate that
   comes to rest in the frame. */
.wheel.is-turning .wheel__tick { opacity: 0.5; transition-duration: 0.25s; }
.wheel.is-turning .wheel__tick--tl { transform: translate(-5px, -5px); }
.wheel.is-turning .wheel__tick--tr { transform: translate(5px, -5px); }
.wheel.is-turning .wheel__tick--bl { transform: translate(-5px, 5px); }
.wheel.is-turning .wheel__tick--br { transform: translate(5px, 5px); }

.wheel__tick--tl { top: -7px; left: -7px; border-top-width: 2px; border-left-width: 2px; }
.wheel__tick--tr { top: -7px; right: -7px; border-top-width: 2px; border-right-width: 2px; }
.wheel__tick--bl { bottom: -7px; left: -7px; border-bottom-width: 2px; border-left-width: 2px; }
.wheel__tick--br { bottom: -7px; right: -7px; border-bottom-width: 2px; border-right-width: 2px; }

.wheel__frameno {
  position: absolute;
  left: 0;
  bottom: calc(100% + 12px);
  font-family: var(--w-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--w-soft);
  white-space: nowrap;
}

/* ---------- the flat presentation (reduced motion) ---------- */

.wheel__flat {
  display: none;
  position: absolute;
  left: 50%;
  top: var(--cy);
  width: var(--pw);
  height: var(--ph);
  transform: translate(-50%, -50%);
}

.wheel__flatlayer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.28s ease;
}

.wheel__flatlayer.is-on { opacity: 1; }

.wheel.is-still .wheel__flat { display: block; }
.wheel.is-still .wheel__scene { display: none; }
.wheel.is-still .wheel__view { cursor: default; }

/* ---------- the round arrows ---------- */

.wheel__nav {
  position: absolute;
  top: var(--cy);
  z-index: 3;
  margin-top: -26px;
}

.wheel__nav--prev { left: clamp(14px, 3vw, 40px); }
.wheel__nav--next { right: clamp(14px, 3vw, 40px); }

/* A set of one plate has nothing to turn to (works.js puts the arrows away). */
.wheel__nav[hidden] { display: none; }

/* The shared .roundnav draws the white circle and its chevron; on the black
   stage it is given a deeper shadow so it lifts off the plates behind it. */
.wheel .roundnav {
  width: 52px;
  height: 52px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
}

.wheel .roundnav:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- the pager: index, dots, count ---------- */

.wheel__pager {
  position: relative;
  z-index: 3;
  width: min(880px, calc(100% - 2 * var(--w-gut)));
  margin: -22px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.wheel__indexbtn {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 8px 18px 8px 15px;
  border-radius: var(--r-pill, 999px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: #fff;
  font-family: var(--w-sans);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.wheel__indexbtn[aria-expanded="true"] { background: #fff; border-color: #fff; color: #000; }

.wheel__gridglyph {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 5px 5px no-repeat,
    linear-gradient(currentColor, currentColor) 7px 0 / 5px 5px no-repeat,
    linear-gradient(currentColor, currentColor) 0 7px / 5px 5px no-repeat,
    linear-gradient(currentColor, currentColor) 7px 7px / 5px 5px no-repeat;
}

/* The Mercedes dots: the plate in the frame a larger white dot, the others
   grey, the ends of the row smaller where the set runs on beyond them. Each
   dot keeps one place in the row and is only scaled within it, so the row
   never shifts as the wheel turns. */
.wheel__dots {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 14px;
}

.wheel__dots[hidden] { display: none; }

.wheel__dot {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--w-dim);
  transform: scale(0.667);
  transition: transform 0.3s var(--w-ease), background-color 0.3s ease;
}

.wheel__dot[data-s="on"] { transform: none; background: #fff; }
.wheel__dot[data-s="sm"] { transform: scale(0.5); }
.wheel__dot[data-s="xs"] { transform: scale(0.333); }

.wheel .wheel__count {
  justify-self: end;
  margin: 0;
  font-family: var(--w-sans);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--w-dim);
  white-space: nowrap;
}

.wheel__countn { color: #fff; font-weight: 600; }

/* ---------- the caption: the black panel ---------- */

.wheel__card {
  position: relative;
  z-index: 3;
  width: min(880px, calc(100% - 2 * var(--w-gut)));
  margin: 26px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "text save"
    "acts acts";
  column-gap: 16px;
  row-gap: 26px;
  color: #fff;
}

.wheel__cardtext { grid-area: text; min-width: 0; }

.wheel__cardtext.is-new { animation: wheelWords 0.42s var(--w-ease) both; }

@keyframes wheelWords {
  from { opacity: 0.25; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

/* The plate's number in the record, set as the frame above sets it. It is
   the handle a patron gives the studio, so it stands first. */
.wheel .wheel__meta {
  margin: 0;
  min-height: 1.3em;
  font-family: var(--w-sans);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--w-soft);
}

/* The headline: the plate's medium, set as Mercedes set a card's title —
   the narrow serif, upright, in capitals. It is a card's title, not a
   chapter's, and steps below the chapter headings (.mbh) at every width. */
.wheel .wheel__medium {
  margin: 12px 0 0;
  font-family: var(--w-serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 7vw, 2.75rem);
  line-height: 0.98;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #fff;
}

/* The kind of work and, where the record is certain of it, the size. The
   line keeps its height when a set has nothing to put on it, so the pills
   below never jump. */
.wheel .wheel__sub {
  margin: 10px 0 0;
  min-height: 1.5em;
  font-family: var(--w-sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--w-soft);
}

/* The heart: an outline that fills white once the plate is saved. */
.wheel__save {
  grid-area: save;
  align-self: start;
  justify-self: end;
  width: 48px;
  height: 48px;
  margin: -11px -4px 0 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.wheel__save[hidden] { display: none; }

.wheel__heart {
  width: 22px;
  height: 22px;
  fill: transparent;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
  transition: fill 0.2s ease;
}

.wheel__save.is-saved { border-color: #fff; }
.wheel__save.is-saved .wheel__heart { fill: currentColor; }
.wheel__save.is-beat .wheel__heart { animation: wheelBeat 0.42s var(--w-ease); }

@keyframes wheelBeat {
  0% { transform: scale(1); }
  35% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

/* The pills come from the shared set: the plate's own action white, the
   room outlined. On a telephone each runs the full width of the panel. */
.wheel__acts {
  grid-area: acts;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wheel__acts .pill {
  width: 100%;
  min-height: 52px;
  padding: 12px 22px;
  flex-wrap: wrap;
  row-gap: 4px;
  text-align: center;
  white-space: normal;
}

.wheel__room .addon-badge { margin-left: 2px; }
.wheel__room:hover .addon-badge { color: inherit; border-color: currentColor; background: transparent; }

/* ---------- the index: a white sheet of grey tiles ----------
   Opened over the whole wheel, the index is the Mercedes model range: a white
   panel, each plate on a light grey tile with its number in the serif. */

.wheel__index {
  position: absolute;
  inset: 0 0 auto;
  z-index: 5;
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--paper, #fff);
  color: var(--ink, #000);
  border-radius: var(--r-card, 12px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  animation: wheelIndex 0.28s var(--w-ease) both;
}

.wheel__index[hidden] { display: none; }

.wheel__index :focus-visible { outline-color: #000; }

/* The white arrows would show over the sheet; while it is open they stand
   down altogether (works.js also takes them out of reach of the keyboard). */
.wheel.is-indexed .wheel__nav { visibility: hidden; }

@keyframes wheelIndex {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.wheel__indexhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px clamp(16px, 3vw, 36px) 14px;
}

.wheel .wheel__indextitle {
  margin: 0;
  font-family: var(--w-serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 6vw, 2.4rem);
  line-height: 1;
  color: #000;
}

.wheel__indexn {
  margin-left: 6px;
  font-family: var(--w-sans);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--g500, #767676);
  vertical-align: 0.35em;
}

.wheel__indexclose {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--g100, #f4f4f4);
  color: #000;
  cursor: pointer;
  transition: background-color 0.18s ease;
}

.wheel__indexclose::before,
.wheel__indexclose::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 17px;
  height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}

.wheel__indexclose::after { transform: translate(-50%, -50%) rotate(-45deg); }

.wheel__indexgrid {
  list-style: none;
  margin: 0;
  padding: 4px clamp(16px, 3vw, 36px) 24px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  align-content: start;
  gap: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1 1 auto;
  min-height: 0;
}

/* Every tile fills its place in the row, so a row's tiles end on one line
   whether or not each has a size under its picture. */
.wheel__thumb {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  gap: 10px;
  padding: 12px 12px 11px;
  border: 0;
  border-radius: var(--r-tile, 8px);
  background: var(--g100, #f4f4f4);
  color: #000;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.wheel__thumbpic {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
}

/* works.js gives each picture its width within the square, so the box is the
   picture's own shape from the first and nothing shifts as they come in. */
.wheel__thumbpic img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* A drawing on a white sheet, on the pale tile: the edge and the faint
   shadow of a sheet of paper laid on it. */
.wheel__thumbpic img.is-sheet { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.14); }

/* A picture that will not come leaves the tile empty, with its number. */
.wheel__thumbpic img.is-missing { visibility: hidden; }

.wheel__thumb[aria-current="true"] { box-shadow: inset 0 0 0 2px #000; }

/* The number, and the size where there is one. A size too long to stand
   beside the number on a narrow tile drops under it. */
.wheel__thumbcap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 2px 6px;
  font-family: var(--w-sans);
  font-size: 0.74rem;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--g600, #5c5c5c);
}

.wheel__thumbn {
  font-family: var(--w-serif);
  font-size: 1.35rem;
  line-height: 1;
  color: #000;
}

/* The line under the stage: what is on the ring, a shade lighter, and then
   how to turn it. On a wide screen the two run on as one line with a point
   between them. On a telephone each has a line of its own, the point is not
   needed, and the second is cut to "Swipe or use the arrows". Where a line
   must still break, it breaks evenly rather than leaving one word alone. */
.wheel__tally { text-wrap: balance; }
.wheel__tallyset { color: var(--g300, #c8c8c8); }

@media (max-width: 699px) {
  .wheel__tallyset,
  .wheel__tallyhow { display: block; }
  .wheel__tallyhow::first-letter { text-transform: uppercase; }
  .wheel__tallywide { display: none; }
}

.wheel .wheel__live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- hover and press ----------
   A control is lit on hover only where there is a pointer that can hover; on
   a telephone a tapped control would otherwise keep that look after the
   finger has gone, the heart grey, the white pill grey, the arrow enlarged.
   A press is answered everywhere by a short dip, in black and white. */

@media (hover: hover) {
  .wheel__indexbtn:hover { background: #fff; border-color: #fff; color: #000; }
  .wheel__save:hover { background: rgba(255, 255, 255, 0.1); }
  .wheel__save:not(.is-saved):hover { border-color: rgba(255, 255, 255, 0.6); }
  .wheel__indexclose:hover { background: var(--g200, #e0e0e0); }
  .wheel__thumb:hover { background: var(--g150, #ececec); }
}

@media (hover: none) {
  .wheel .roundnav:hover { transform: none; }
  .wheel__acts .pill--light:hover { background: #fff; border-color: #fff; color: #000; }
  .wheel__acts .pill--ghost:hover { background: transparent; border-color: rgba(255, 255, 255, 0.7); color: #fff; }
}

.wheel__indexbtn:active,
.wheel__save:active,
.wheel__acts .pill:active,
.wheel__indexclose:active { opacity: 0.72; }
.wheel__thumb:active { background: var(--g200, #e0e0e0); }
.wheel .roundnav:active { transform: scale(0.94); }

/* ---------- wider screens ----------
   The panel keeps the order of a Mercedes card at every width (the words,
   then the pills); from a small tablet up the pills stand side by side at
   their own width rather than running across the whole panel. */

@media (min-width: 600px) {
  .wheel__acts { flex-direction: row; flex-wrap: wrap; }

  .wheel__acts .pill {
    width: auto;
    min-height: 50px;
    white-space: nowrap;
    flex-wrap: nowrap;
  }
}

/* On a wide screen the pager is drawn up onto the faint end of the floor's
   reflection, so on a laptop the whole panel, pills and all, comes into view
   with the plate. */
@media (min-width: 900px) {
  .wheel__view,
  .wheel__probe { height: clamp(440px, calc(100svh - 340px), 700px); }
  .wheel__pager { margin-top: -38px; }
  .wheel__card { margin-top: 26px; row-gap: 24px; }
}

/* ---------- telephones ---------- */

@media (max-width: 699px) {
  .wheel__view,
  .wheel__probe { height: clamp(400px, 116vw, 540px); }

  .wheel__nav { margin-top: -24px; }
  .wheel .roundnav { width: 48px; height: 48px; }
  .wheel__nav--prev { left: 10px; }
  .wheel__nav--next { right: 10px; }

  .wheel__frame {
    width: calc(var(--pw) + 18px);
    height: calc(var(--ph) + 18px);
  }

  .wheel__tick { width: 14px; height: 14px; }
  .wheel__tick--tl, .wheel__tick--tr { top: -5px; }
  .wheel__tick--bl, .wheel__tick--br { bottom: -5px; }
  .wheel__tick--tl, .wheel__tick--bl { left: -5px; }
  .wheel__tick--tr, .wheel__tick--br { right: -5px; }

  .wheel .wheel__view:focus-visible .wheel__frame { outline-offset: 2px; }

  .wheel__guides::before { top: calc(var(--cy) - var(--ph) / 2 - 9px); height: calc(var(--ph) + 18px); }
  .wheel__guides::after { left: calc(50% - var(--pw) / 2 - 9px); width: calc(var(--pw) + 18px); }

  .wheel__frameno { bottom: calc(100% + 9px); }

  .wheel__pager { gap: 8px; }
  .wheel__indexbtn { padding-inline: 13px 15px; font-size: 0.84rem; }

  /* On a telephone the sheet runs to the foot of the window, where the page's
     two round badges stand over it. The list is given a foot of its own, so
     the number of its last plate is never read from under them. */
  .wheel__indexgrid {
    grid-template-columns: repeat(auto-fill, minmax(98px, 1fr));
    gap: 8px;
    padding-bottom: calc(var(--badge, 56px) + 16px + env(safe-area-inset-bottom, 0px));
  }
  .wheel__thumb { padding: 8px 8px 9px; gap: 8px; }
  .wheel__thumbn { font-size: 1.15rem; }
  .wheel__thumbcap { font-size: 0.68rem; }
}

@media (max-width: 380px) {
  .wheel__dots { gap: 2px; }
  .wheel__indexbtn { padding-inline: 11px 13px; gap: 7px; }
  .wheel__acts .pill { padding-inline: 16px; }
  .wheel__room .addon-badge { margin-left: 0; }
}

/* A telephone turned on its side has little height to give. The stage is
   measured against the screen there, so the plate in the frame is not left
   below the fold with only the far side of the ring in view. */
@media (max-height: 560px) and (min-width: 560px) {
  .wheel__view,
  .wheel__probe { height: clamp(260px, calc(100svh - 92px), 460px); }
}

@media (prefers-reduced-motion: reduce) {
  .wheel__img,
  .wheel__face::before,
  .wheel__scene,
  .wheel__tick,
  .wheel__dot { transition: none; }
  .wheel__cardtext.is-new { animation: none; }
  .wheel__index { animation: none; }
  .wheel__save.is-beat .wheel__heart { animation: none; }
}