/*
 * wheel.css: the Rotaract wheel and the set pieces built on it (owner: the signature builder).
 * Loaded on every page after components.css. Behaviour: wheel.js. Markup: src/partials/wheel-<name>.html.
 *
 * Blocks: wheel-prop (the prop itself: stage, light, rotor; "wheel" alone is the engine's inline svg) · wheel-living · wheel-stopped ·
 * wheel-family · wheel-dial · wheel-countdown · wheel-quiz · wheel-form · wheel-footer ·
 * wheel-field · wheel-card.
 *
 * Everything matches the logo (DIRECTION 4a): two colours, cranberry and white, on the film's black;
 * the site's own type (heavy over light, tabular digits; no family is named here); and the wheel's
 * own shapes for the small things: the round-topped tooth is every tick, the window wedge is every
 * pointer, the keyway channel (the "C") is every marker, a ring is every progress. wheel.js hands
 * those three shapes to this file as masks (--wheel-tooth, --wheel-wedge, --wheel-c on <html>, with
 * the class rac-wheel-shapes); without them the plain fallbacks below are used.
 *
 * Everything a script takes over is styled under .is-enhanced, which wheel.js puts on the root of a
 * piece only while that piece is running. With scripts off, or if one piece fails, what is left is
 * the plain markup: a still wheel, lists, a form, two faces of a card one under the other.
 * Motion is transform, opacity and clip-path only; turning parts are whole elements on their own layer.
 */

:where(.wheel-prop, .wheel-family, .wheel-dial, .wheel-countdown, .wheel-quiz, .wheel-card, .wheel-field) {
  --w-black: var(--black, #0B0809);
  --w-night: var(--night, #151012);
  --w-night-2: var(--night-2, #1E171A);
  --w-bone: var(--bone, #F2ECE6);
  --w-white: var(--white, #FFFFFF);
  --w-ash: var(--ash, #ADA29D);
  --w-line: var(--line, rgba(242, 236, 230, 0.14));
  --w-line-strong: var(--line-strong, rgba(242, 236, 230, 0.42));
  --w-cran: var(--cranberry, #D41367);
  --w-cran-deep: var(--cranberry-deep, #8E0C45);
  --w-cran-lit: var(--cranberry-lit, #F25C95);
  --w-unlit: #2B1720;                                  /* a wheel with no light on it: dark, but still there */
  --w-heavy: var(--fw-title, 600);                     /* the lockup's pair: heavy (a semibold, as the wordmark is) over light */
  --w-light: var(--fw-light, 300);
  --w-ease: var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

/* hidden means hidden, whatever a button or a list item is given to look like elsewhere */
:where(.wheel-prop, .wheel-family, .wheel-dial, .wheel-countdown, .wheel-quiz, .wheel-card) [hidden] { display: none !important; }

.wheel-prop__status,
.wheel-dial__status,
.wheel-countdown__sr {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ═════════════════════════════════════════════════════════════ THE WHEEL ══ */
.wheel-prop { position: relative; }
.wheel-prop__stage {
  position: relative;
  inline-size: min(100%, var(--wheel-size, 34rem));
  aspect-ratio: 1;
  margin-inline: auto;
}
.wheel-prop__light {
  position: absolute;
  inset: -24%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(212, 19, 103, 0.32), rgba(212, 19, 103, 0.13) 46%, rgba(212, 19, 103, 0) 72%);
  pointer-events: none;
}
.wheel-prop__rotor {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
/* The drawing never takes the pointer: the round element that carries it does. (Measured: the first
   time a pointer came over the traced paths, Chromium spent 90 ms finding out what it had hit.) */
.wheel-prop__svg { display: block; inline-size: 100%; block-size: 100%; overflow: visible; pointer-events: none; }
.wheel-prop__body { fill: var(--w-cran); }
.wheel-prop__pane { fill: none; }
.wheel-prop__tooth { fill: var(--w-cran); opacity: 0; }

.is-enhanced > .wheel-prop__stage > .wheel-prop__rotor { cursor: grab; touch-action: pan-y pinch-zoom; }
.is-enhanced > .wheel-prop__stage > .wheel-prop__rotor.is-grabbed { cursor: grabbing; }
.is-near > .wheel-prop__stage > .wheel-prop__rotor { will-change: transform; }
.wheel-prop__rotor:focus { outline: none; }
.wheel-prop__rotor:focus-visible { outline: 2px solid var(--w-bone); outline-offset: 6px; }

/* ══════════════════════════════════════════════════════ 2 THE LIVING WHEEL ══ */
/* Nothing inside the wheel changes once it is drawn, so its layer is painted once and only ever
   turned. The light on the chosen window is the gate: a window-shaped wedge of white light that
   stands still at the top of the stage, over whatever window has come to rest under it. */
.wheel-prop__window .wheel-prop__emblem,
.wheel-prop__window .wheel-prop__picture { opacity: 0.86; }
.wheel-prop__gate {
  position: absolute;
  inset-block-start: var(--wheel-wedge-top, 23%);
  inset-inline-start: calc(50% - var(--wheel-wedge-w, 22%) / 2);
  inline-size: var(--wheel-wedge-w, 22%);
  block-size: var(--wheel-wedge-h, 16.5%);
  background: rgba(255, 255, 255, 0.17);
  -webkit-mask: var(--wheel-wedge, none) center / 100% 100% no-repeat;
  mask: var(--wheel-wedge, none) center / 100% 100% no-repeat;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.wheel-living.is-settled .wheel-prop__gate { opacity: 1; transition: opacity 0.6s 0.05s; }
.wheel-living.is-near .wheel-prop__gate { will-change: opacity; }

.wheel-prop__picks { position: absolute; inset: 0; border-radius: 50%; }
.wheel-prop__pick {
  position: absolute;
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: inherit;
  min-inline-size: 2.75rem;                               /* never a smaller target than 44px, however small the wheel */
  transform: translate(-50%, -50%);
  touch-action: inherit;
  -webkit-tap-highlight-color: transparent;
}
.wheel-prop__pick:focus { outline: none; }
.wheel-prop__pick:focus-visible { outline: 2px solid var(--w-white); outline-offset: 1px; }
.wheel-prop__hanger { position: absolute; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; opacity: 0.8; transition: opacity 0.5s; }
.wheel-prop__hanger img { display: block; inline-size: 100%; block-size: 100%; }
.is-near .wheel-prop__hanger { will-change: transform; }

/* The gate at the top: a window wedge, point down. The window under it is the chosen one. */
.wheel-prop__index {
  position: absolute;
  inset-block-start: -0.9rem;
  inset-inline-start: 50%;
  inline-size: 0;
  block-size: 0;
  border-inline: 0.42rem solid transparent;
  border-block-start: 0.7rem solid var(--w-white);
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.rac-wheel-shapes .wheel-prop__index,
.rac-wheel-shapes .wheel-dial__index {
  inline-size: calc(0.95rem * var(--wheel-wedge-ratio, 1.1));
  block-size: 0.95rem;
  border: 0;
  background: var(--w-white);
  -webkit-mask: var(--wheel-wedge) center / 100% 100% no-repeat;
  mask: var(--wheel-wedge) center / 100% 100% no-repeat;
}
.wheel-living.is-touched .wheel-prop__index,
.wheel-living.is-settled .wheel-prop__index,
.wheel-footer.is-enhanced .wheel-prop__index { opacity: 1; }
.wheel-footer .wheel-prop__index { inset-block-start: -0.55rem; transform: translateX(-50%) scale(0.72); transform-origin: 50% 100%; }

/* The name of the chosen window, set like the logo: heavy, with a light line under it. */
.wheel-prop__label { margin-block-start: 1.75rem; text-align: center; }
.wheel-prop__items { margin: 0; padding: 0; list-style: none; }
.wheel-prop__items [data-wheel-name] { display: block; font-size: var(--fs-sub, clamp(1.625rem, 1.46rem + 0.74vw, 2.125rem)); font-weight: var(--w-heavy); line-height: 1.1; color: var(--w-bone); }
.wheel-prop__items [data-wheel-line] { display: block; margin-block-start: 0.3rem; font-weight: var(--w-light); color: var(--w-bone); }
.wheel-prop__help { margin: 0; font-weight: var(--w-light); color: var(--w-ash); }
.wheel-living.is-enhanced .wheel-prop__label { display: grid; justify-items: center; }
.wheel-living.is-enhanced .wheel-prop__label > * { grid-area: 1 / 1; }
.wheel-living.is-enhanced .wheel-prop__items { display: grid; justify-items: center; }
.wheel-living.is-enhanced .wheel-prop__items > * { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 0.35s, visibility 0s 0.35s; }
.wheel-living.is-enhanced .wheel-prop__items > .is-current { opacity: 1; visibility: visible; transition-delay: 0.1s, 0s; }
.wheel-living.is-enhanced .wheel-prop__items img { display: none; }           /* the picture is in the wheel now */
.wheel-living.is-enhanced .wheel-prop__help { transition: opacity 0.3s; }
.wheel-living.is-enhanced.is-shown .wheel-prop__help { opacity: 0; }
.wheel-living.is-enhanced > .wheel-prop__label--plain { display: none; }

/* The opening: dark, one tooth of white light, the rim tooth by tooth, then the wheel. */
.wheel-living .wheel-prop__light { transition: opacity 1.6s; }
.wheel-living .wheel-prop__body,
.wheel-living .wheel-prop__windows { transition: opacity 0.9s; }
.wheel-living .wheel-prop__tooth { transition: opacity 0.3s; }
.wheel-living.is-undrawn .wheel-prop__body,
.wheel-living.is-undrawn .wheel-prop__windows,
.wheel-living.is-undrawn .wheel-prop__light,
.wheel-living.is-drawing .wheel-prop__body,
.wheel-living.is-drawing .wheel-prop__windows,
.wheel-living.is-drawing .wheel-prop__light { opacity: 0; }
.wheel-living.is-drawing.is-bodied .wheel-prop__body,
.wheel-living.is-drawing.is-bodied .wheel-prop__windows,
.wheel-living.is-drawing.is-bodied .wheel-prop__light { opacity: 1; }
.wheel-living .wheel-prop__tooth.is-lit { opacity: 1; }
.wheel-living .wheel-prop__tooth.is-first { opacity: 1; fill: var(--w-white); transition: opacity 0.7s, fill 1.4s; }
.wheel-living.is-bodied .wheel-prop__tooth.is-first { fill: var(--w-cran); }
.wheel-living.is-drawn .wheel-prop__tooth { opacity: 0; transition-delay: 0s !important; }

/* ═════════════════════════════════════════════════════ 3 THE STOPPED WHEEL ══ */
.wheel-prop__svg--dim .wheel-prop__body { fill: var(--w-unlit); }
.wheel-prop__svg--lit { position: absolute; inset: 0; }
.wheel-stopped.is-near .wheel-prop__svg--lit,
.wheel-stopped.is-near .wheel-prop__light { will-change: opacity, transform; }
.wheel-stopped { display: grid; grid-template-columns: minmax(0, 1fr); }
.wheel-stopped__ask,
.wheel-stopped__done { grid-area: 2 / 1; }                 /* "It turns." stands exactly where the prompt stood */
.wheel-stopped__ask { margin-block-start: 1.75rem; text-align: center; }
.wheel-stopped__prompt { margin: 0 0 1.25rem; font-size: var(--fs-section, clamp(2.25rem, 1.75rem + 2.22vw, 3.75rem)); font-weight: var(--w-heavy); line-height: 1.05; color: var(--w-bone); }
.wheel-stopped.is-enhanced .wheel-stopped__ask { opacity: 0; visibility: hidden; transition: opacity 0.5s, visibility 0s 0.5s; }
.wheel-stopped.is-enhanced.is-dead .wheel-stopped__ask { opacity: 1; visibility: visible; transition: opacity 0.9s 0.5s, visibility 0s; }
.wheel-stopped__help { margin: 1rem 0 0; font-weight: var(--w-light); color: var(--w-ash); }
/* "It turns.": said once, as the wheel catches (the same place as the prompt, which has gone) */
.wheel-stopped__done { align-self: start; margin: 1.75rem 0 0; text-align: center; font-size: var(--fs-section, clamp(2.25rem, 1.75rem + 2.22vw, 3.75rem)); font-weight: var(--w-heavy); line-height: 1.05; color: var(--w-bone); opacity: 0; visibility: hidden; pointer-events: none; }
.wheel-stopped:not(.is-enhanced) .wheel-stopped__done { display: none; }
.wheel-stopped.is-catching .wheel-stopped__done,
.wheel-stopped.is-restarted .wheel-stopped__done { opacity: 1; visibility: visible; transition: opacity 0.9s 0.3s; }
.wheel-stopped--logo.is-restarted .wheel-stopped__done,
.wheel-stopped[data-wheel-state="arriving"] .wheel-stopped__done,
.wheel-stopped.is-logo .wheel-stopped__done { opacity: 0; visibility: hidden; transition: opacity 0.5s, visibility 0s 0.5s; }

/* The finish: the wheel rolls to the left and the club's logo stands where it lands. The logo is
   centred on the stage and may be wider than it. */
.wheel-stopped__logo {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: min(92vw, var(--logo-size, 52rem));
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.wheel-stopped__logo img { display: block; inline-size: 100%; block-size: auto; }
.wheel-stopped--logo:not(.is-enhanced) .wheel-prop__rotor,
.wheel-stopped--logo:not(.is-enhanced) .wheel-prop__light { display: none; }                  /* no scripts: just the logo */
.wheel-stopped.is-enhanced .wheel-stopped__logo > img:first-child { opacity: 0; visibility: hidden; }
.wheel-stopped.is-enhanced.is-logo .wheel-stopped__logo > img:first-child { opacity: 1; visibility: visible; }
.wheel-stopped__logo-part { position: absolute; inset: 0; }
.wheel-stopped__logo-part.is-wheel { clip-path: inset(0 calc(100% - var(--logo-words, 24.2%)) 0 0); opacity: 0; transition: opacity 0.7s 0.15s; }
.wheel-stopped__logo-part.is-one { clip-path: inset(0 100% var(--logo-under, 35.8%) var(--logo-words, 24.2%)); transition: clip-path 1s var(--w-ease); }
.wheel-stopped__logo-part.is-two { clip-path: inset(var(--logo-over, 64.2%) 100% 0 var(--logo-words, 24.2%)); transition: clip-path 1.1s var(--w-ease) 0.28s; }
.is-wording .wheel-stopped__logo-part.is-one { clip-path: inset(0 0 var(--logo-under, 35.8%) var(--logo-words, 24.2%)); }
.is-wording .wheel-stopped__logo-part.is-two { clip-path: inset(var(--logo-over, 64.2%) 0 0 var(--logo-words, 24.2%)); }
.is-landing .wheel-stopped__logo-part.is-wheel { opacity: 1; }
.wheel-stopped.is-landing .wheel-prop__rotor { opacity: 0; transition: opacity 0.8s 0.1s; }
.wheel-stopped.is-logo .wheel-prop__rotor { opacity: 0; visibility: hidden; }
.wheel-stopped.is-logo .wheel-stopped__logo-part { display: none; }
.wheel-stopped.is-logo .wheel-stopped__ask { display: none; }

/* ════════════════════════════════════════════════ 4 THE ROTARY FAMILY GEARS ══ */
.wheel-family { position: relative; display: grid; gap: 2rem; align-items: center; }
.wheel-family__stage { position: relative; inline-size: min(100%, var(--family-size, 38rem)); margin-inline: auto; overflow: hidden; overflow: clip; }   /* a turning gear's square corners never reach past it */
.wheel-family:not(.is-enhanced) .wheel-family__stage { inline-size: min(70%, 18rem); }
.wheel-family__light {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(212, 19, 103, 0.28), rgba(212, 19, 103, 0.1) 50%, rgba(212, 19, 103, 0) 72%);
  pointer-events: none;
}
.wheel-family__gear {
  position: absolute;
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: grab;
  touch-action: pan-y pinch-zoom;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.wheel-family__gear.is-grabbed { cursor: grabbing; }
.wheel-family__gear:focus { outline: none; }
.wheel-family__gear:focus-visible { outline: 2px solid var(--w-white); outline-offset: -3px; }
.wheel-family__turn { display: block; inline-size: 100%; block-size: 100%; }
.wheel-family.is-near .wheel-family__turn { will-change: transform; }
.wheel-family__svg { display: block; inline-size: 100%; block-size: 100%; overflow: visible; pointer-events: none; }
.wheel-family__svg path { fill: var(--w-night-2); stroke: rgba(242, 236, 230, 0.42); stroke-width: 1; vector-effect: non-scaling-stroke; }
.wheel-family__gear::after {                            /* the gear that is on wears a ring; the gear itself is never repainted */
  content: "";
  position: absolute;
  inset: 1%;
  border: 1px solid var(--w-white);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.wheel-family__gear.is-on::after { opacity: 0.75; }
.wheel-family__gear.is-wheel::after { inset: 1%; }
.wheel-family__captions { display: grid; gap: 1.4rem; margin: 0; padding: 0; list-style: none; }
.wheel-family__captions > li { position: relative; padding-inline-start: 2rem; font-weight: var(--w-light); color: var(--w-ash); transition: color 0.3s; }
.wheel-family__captions > li::before {                  /* the marker: the keyway "C"; it turns to face the gear that is on */
  content: "";
  position: absolute;
  inset-block-start: 0.28em;
  inset-inline-start: 0;
  inline-size: 1.05rem;
  block-size: 1.05rem;
  border: 2px solid var(--w-line-strong);
  border-radius: 50%;
  transition: transform 0.5s var(--w-ease), background-color 0.3s, border-color 0.3s;
}
.rac-wheel-shapes .wheel-family__captions > li::before { border: 0; border-radius: 0; background: var(--w-line-strong); -webkit-mask: var(--wheel-c) center / 100% 100% no-repeat; mask: var(--wheel-c) center / 100% 100% no-repeat; }
.wheel-family__captions [data-gear-name] { display: block; margin-block-end: 0.15rem; font-weight: var(--fw-strong, 600); color: var(--w-bone); }
.wheel-family.is-enhanced .wheel-family__captions > li.is-on { color: var(--w-bone); }
.wheel-family.is-enhanced .wheel-family__captions > li.is-on::before { border-color: var(--w-cran); transform: rotate(-90deg); }
.rac-wheel-shapes .wheel-family.is-enhanced .wheel-family__captions > li.is-on::before { background: var(--w-cran); }
.wheel-family__lead {
  position: absolute;
  block-size: 1px;
  background: var(--w-white);
  opacity: 0;
  transform-origin: 0 50%;
  transform: rotate(var(--lead-turn, 0deg)) scaleX(0);
  pointer-events: none;
}
.wheel-family__lead.is-on { opacity: 0.55; transform: rotate(var(--lead-turn, 0deg)) scaleX(1); transition: transform 0.45s var(--w-ease), opacity 0.2s; }
@media (min-width: 56rem) {
  .wheel-family { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 4rem; }
}

/* ═════════════════════════════════════════════════════ 5 THE HISTORY DIAL ══
   The edge of a very large wheel: a toothed rim rising into the frame. Every stop is a tooth. */
.wheel-dial { position: relative; }
.wheel-dial__stage { display: none; }
.wheel-dial.is-enhanced .wheel-dial__stage {
  display: block;
  position: relative;
  block-size: clamp(9rem, 5.5rem + 12vw, 13.5rem);
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y pinch-zoom;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.wheel-dial__stage.is-grabbed { cursor: grabbing; }
.wheel-dial__stage:focus { outline: none; }
.wheel-dial__stage:focus-visible { outline: 2px solid var(--w-white); outline-offset: -2px; }
/* the frame closes softly at both sides (two plain gradients over the ground; no mask) */
.wheel-dial__stage::before,
.wheel-dial__stage::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset-block: 0;
  inline-size: 14%;
  pointer-events: none;
}
.wheel-dial__stage::before { inset-inline-start: 0; background: linear-gradient(90deg, var(--w-black), rgba(11, 8, 9, 0)); }   /* lint-ok: the ground itself closing over the rim, not a fill */
.wheel-dial__stage::after { inset-inline-end: 0; background: linear-gradient(270deg, var(--w-black), rgba(11, 8, 9, 0)); }   /* lint-ok: the same, at the other side */
.wheel-dial__rim {                                      /* the ring itself, running on past the first and the last year */
  position: absolute;
  inset-block-start: 4.4rem;
  inset-inline-start: 50%;
  inline-size: calc(var(--dial-r, 600px) * 2);
  block-size: calc(var(--dial-r, 600px) * 2);
  margin-inline-start: calc(var(--dial-r, 600px) * -1);
  border: 1px solid var(--w-line);
  border-radius: 50%;
  pointer-events: none;
}
.wheel-dial__ring { position: absolute; inset-block-start: 4.4rem; inset-inline-start: 50%; inline-size: 0; block-size: 0; }
.wheel-dial__stop {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 0;
  block-size: 0;
  transform-origin: 0 var(--dial-r, 600px);
  color: rgba(242, 236, 230, 0.5);
  cursor: pointer;
}
.wheel-dial__stop[hidden] { display: none; }
.wheel-dial.is-near .wheel-dial__stop { will-change: transform; }
.wheel-dial__seg {                                      /* a short chord of the rim… */
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: calc(var(--dial-seg, 16px) / -2);
  inline-size: var(--dial-seg, 16px);
  block-size: 1px;
  background: currentColor;
  transform-origin: 50% var(--dial-r, 600px);
}
.wheel-dial__seg::before {                              /* …and the tooth that stands on it */
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 50%;
  inline-size: 1px;
  block-size: 0.4rem;
  margin-inline-start: -0.5px;
  background: currentColor;
  opacity: 0.45;
  transform-origin: 50% 100%;
  transition: transform 0.3s var(--w-ease), background-color 0.25s, opacity 0.25s;
}
.rac-wheel-shapes .wheel-dial__seg::before {
  inline-size: calc(0.5rem * var(--wheel-tooth-ratio, 1.13));
  block-size: 0.5rem;
  margin-inline-start: calc(0.25rem * var(--wheel-tooth-ratio, 1.13) * -1);
  -webkit-mask: var(--wheel-tooth) center / 100% 100% no-repeat;
  mask: var(--wheel-tooth) center / 100% 100% no-repeat;
}
.wheel-dial__seg--stop::before { block-size: 0.95rem; opacity: 1; }
.rac-wheel-shapes .wheel-dial__seg--stop::before {
  inline-size: calc(0.95rem * var(--wheel-tooth-ratio, 1.13));
  block-size: 0.95rem;
  margin-inline-start: calc(0.475rem * var(--wheel-tooth-ratio, 1.13) * -1);
}
.wheel-dial__year {
  position: absolute;
  inset-block-end: 1.3rem;
  inset-inline-start: 0;
  padding-block: 0.6rem 0.1rem;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: var(--fs-slate, 0.875rem);
  font-weight: var(--w-light);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--w-ash);
  transition: color 0.25s;
}
.wheel-dial__stop--stopped,
.wheel-dial__stop--low { color: rgba(242, 236, 230, 0.22); }       /* the years the wheel stood still */
.wheel-dial__stop--stopped .wheel-dial__year,
.wheel-dial__stop--low .wheel-dial__year { color: rgba(173, 162, 157, 0.78); }
.wheel-dial__stop--back { color: var(--w-cran); }
.wheel-dial__stop.is-current .wheel-dial__year { color: var(--w-white); font-weight: var(--fw-strong, 600); }
.wheel-dial__stop.is-current .wheel-dial__seg--stop::before { background: var(--w-white); transform: scale(1.35); }
.wheel-dial__index {
  position: absolute;
  z-index: 3;
  inset-block-start: 0.3rem;
  inset-inline-start: 50%;
  inline-size: 0;
  block-size: 0;
  border-inline: 0.4rem solid transparent;
  border-block-start: 0.62rem solid var(--w-cran);
  transform: translateX(-50%);
  pointer-events: none;
}
.rac-wheel-shapes .wheel-dial__index { background: var(--w-cran); }
.wheel-dial__controls { display: none; }
.wheel-dial.is-enhanced .wheel-dial__controls { display: flex; justify-content: center; gap: 0.75rem; margin-block: 0.25rem 1.5rem; }
.wheel-dial__entries { margin: 0; padding: 0; list-style: none; display: grid; gap: 2rem; }
.wheel-dial.is-enhanced .wheel-dial__entries { gap: 0; justify-items: center; }
.wheel-dial.is-enhanced .wheel-dial__entries > li { grid-area: 1 / 1; max-inline-size: 38rem; text-align: center; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.wheel-dial.is-enhanced .wheel-dial__entries > li.is-current { opacity: 1; pointer-events: auto; }

/* ════════════════════════════════════════════════════════ 6 THE COUNTDOWN ══
   The digits, their names and the two states are the engine's countdown shell (components.css:
   .countdown, data-state). Here: only the escapement that drives it. */
.wheel-countdown [hidden] { display: none !important; }
.wheel-countdown__escapement { position: relative; display: block; inline-size: clamp(4.5rem, 3rem + 7vw, 7.5rem); aspect-ratio: 1; }
.wheel-countdown:not(.is-enhanced) .wheel-countdown__escapement { display: none; }
.wheel-countdown__wheel,
.wheel-countdown__anchor { position: absolute; inset: 0; display: block; }
.wheel-countdown__wheel { transform-origin: 50% 55%; transition: transform 0.24s cubic-bezier(0.3, 1.8, 0.5, 1); }
.wheel-countdown__anchor { transform-origin: 50% var(--anchor-y, 8.5%); transition: transform 0.15s cubic-bezier(0.3, 1.5, 0.6, 1); }
.wheel-countdown__escapement svg { display: block; inline-size: 100%; block-size: 100%; overflow: visible; }
.wheel-countdown__wheel svg { fill: var(--w-cran); }
.wheel-countdown__anchor svg { fill: var(--w-white); }
.wheel-countdown[data-countdown-state="tbc"] .wheel-countdown__wheel svg { fill: var(--w-unlit); }

/* ═══════════════════════════════════════════════════════ 7 FIND YOUR SPOKE ══ */
.wheel-quiz { display: grid; gap: 2rem; align-items: center; }
.wheel-quiz .wheel-prop { --wheel-size: 24rem; }
.wheel-quiz.is-enhanced .wheel-prop__label { display: none; }
.wheel-quiz fieldset { min-inline-size: 0; margin: 0 0 2rem; padding: 0; border: 0; }
.wheel-quiz legend { margin-block-end: 1rem; padding: 0; font-size: var(--fs-sub, clamp(1.625rem, 1.46rem + 0.74vw, 2.125rem)); font-weight: var(--w-heavy); line-height: 1.12; color: var(--w-bone); }
.wheel-quiz label { display: flex; align-items: center; gap: 0.8rem; min-block-size: 3rem; margin-block-end: 0.6rem; padding: 0.6rem 1.1rem; border: 1px solid var(--w-line-strong); border-radius: 1.5rem; cursor: pointer; transition: border-color 0.2s, background-color 0.2s; }
.wheel-quiz label:has(input:checked) { border-color: var(--w-cran); background: var(--w-night); }
.wheel-quiz label:has(input:focus-visible) { outline: 2px solid var(--w-white); outline-offset: 2px; }
/* The radio button is a ring (DIRECTION 4a) in a 44px box of its own, so a finger cannot miss it. */
.wheel-quiz input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  margin: -0.55rem -0.35rem -0.55rem -0.75rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 0, 0, 0) 0.42rem, var(--w-line-strong) 0.46rem 0.58rem, rgba(0, 0, 0, 0) 0.62rem);
  cursor: pointer;
}
.wheel-quiz input[type="radio"]:checked { background: radial-gradient(circle, var(--w-cran) 0.26rem, rgba(0, 0, 0, 0) 0.3rem 0.42rem, var(--w-cran) 0.46rem 0.58rem, rgba(0, 0, 0, 0) 0.62rem); }
.wheel-quiz input[type="radio"]:focus { outline: none; }
.wheel-quiz__nav { display: flex; align-items: center; gap: 1rem; margin: 0; }
.wheel-quiz__nav[hidden] { display: none; }
.wheel-quiz [data-quiz-count] { display: inline-flex; align-items: center; gap: 0.6rem; font-size: var(--fs-small, 1rem); font-weight: var(--w-light); font-variant-numeric: tabular-nums; color: var(--w-ash); }
.wheel-quiz [data-quiz-count]::before {                 /* how far: a ring */
  content: "";
  inline-size: 1.6rem;
  block-size: 1.6rem;
  border-radius: 50%;
  background: conic-gradient(var(--w-cran) calc(var(--quiz-p, 0) * 1turn), var(--w-line-strong) 0);
  -webkit-mask: radial-gradient(closest-side, rgba(0, 0, 0, 0) 66%, #000 68%);
  mask: radial-gradient(closest-side, rgba(0, 0, 0, 0) 66%, #000 68%);
}
.wheel-quiz [data-quiz-result] ul { margin: 0 0 1.25rem; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.wheel-quiz [data-quiz-result-title]:focus { outline: none; }
.wheel-quiz.is-enhanced fieldset { margin-block-end: 1.25rem; }
.wheel-quiz.is-enhanced [data-quiz-q]:not(.is-current) { display: none; }
.wheel-quiz.is-enhanced:not(.is-done) [data-quiz-result] { display: none; }
.wheel-quiz.is-enhanced.is-done [data-quiz-area]:not(.is-current) { display: none; }
.wheel-quiz.is-enhanced .wheel-quiz__body { min-block-size: 21rem; }
@media (min-width: 56rem) {
  .wheel-quiz { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 4rem; }
}

/* ═════════════════════════════════════════════════════════ 8 THE FORM WHEEL ══ */
.wheel-form { --wheel-size: 11rem; }
.wheel-form .wheel-prop__light { opacity: 0; transition: opacity 0.8s; }
.wheel-form.is-ready .wheel-prop__light { opacity: 0.7; }
.wheel-form.is-sent .wheel-prop__light { opacity: 1; }
.wheel-form.is-enhanced .wheel-prop__body { fill: var(--w-unlit); transition: fill 0.5s; }   /* painted while the wheel stands: wheel.js waits for it before the spin */
.wheel-form.is-enhanced.is-sent .wheel-prop__body { fill: var(--w-cran); }
.wheel-form .wheel-prop__tooth { transition: opacity 0.45s; }
.wheel-form .wheel-prop__tooth.is-lit { opacity: 1; }
.wheel-form.is-enhanced > .wheel-prop__stage > .wheel-prop__rotor { cursor: default; touch-action: auto; }

/* ═══════════════════════════════════════════════════════ 9 THE FOOTER WHEEL ══ */
.wheel-footer { --wheel-size: 7.5rem; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem 1.5rem; align-items: center; }
.wheel-footer .wheel-prop__stage { grid-row: 1 / span 2; inline-size: var(--wheel-size); margin: 0; }
.wheel-footer .wheel-prop__light { inset: -11%; opacity: 0.6; }
.wheel-footer__entries { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; font-weight: var(--w-light); color: var(--w-ash); }
.wheel-footer:not(.is-enhanced) .wheel-footer__entries { grid-column: 1 / -1; }
.wheel-footer.is-enhanced .wheel-footer__entries { gap: 0; }
.wheel-footer.is-enhanced [data-wheel-entry] { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0s 0.4s; }
.wheel-footer.is-enhanced.is-landed [data-wheel-entry].is-current { opacity: 1; visibility: visible; transition-delay: 0s; }
.wheel-footer [data-wheel-spin] { justify-self: start; }

/* ════════════════════════════════════════════════════════ 10 THE GEAR FIELD ══ */
.wheel-field { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; color: var(--w-bone); pointer-events: none; }
.wheel-field.is-off { display: none; }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .wheel-field { display: none; }
}

/* ════════════════════════════════════════════════════════ 11 THE CAST CARDS ══ */
.wheel-card { position: relative; }
.wheel-card__face { padding: 1.5rem; border: 1px solid var(--w-line); border-radius: var(--r-panel, 6px); background: var(--w-night); }
.wheel-card:not(.is-enhanced) .wheel-card__face--back { margin-block-start: 0.75rem; }
.wheel-card__turn[hidden] { display: none; }
.wheel-card.is-enhanced { perspective: 62rem; }
/* A step of opacity at the half turn as well as the hidden backface: the wrong face never shows,
   whatever a browser does with backfaces, and neither face ever leaves the accessibility tree. */
.wheel-card.is-enhanced .wheel-card__inner { display: grid; block-size: 100%; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.45, 0, 0.55, 1); }
.wheel-card.is-enhanced .wheel-card__face { grid-area: 1 / 1; padding-block-end: 3.75rem; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: opacity 0s linear 0.35s; }
.wheel-card.is-enhanced .wheel-card__face--front { transform: rotateY(0deg); }
.wheel-card.is-enhanced .wheel-card__face--back { transform: rotateY(180deg); background: var(--w-night-2); opacity: 0; }
.wheel-card.is-enhanced.is-turned .wheel-card__inner { transform: rotateY(180deg); }
.wheel-card.is-enhanced.is-turned .wheel-card__face--front { opacity: 0; }
.wheel-card.is-enhanced.is-turned .wheel-card__face--back { opacity: 1; }
.wheel-card__turn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0.55rem;
  inline-size: 100%;
  margin: 0;
  padding: 1.1rem 1.4rem;
  border: 0;
  border-radius: var(--r-panel, 6px);
  background: none;
  font: inherit;
  font-size: var(--fs-slate, 0.875rem);
  font-weight: var(--w-light);
  line-height: 1.2;
  color: var(--w-ash);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.wheel-card__turn::after {                              /* the keyway "C": it goes half way round with the card */
  content: "";
  flex: none;
  inline-size: 1.05rem;
  block-size: 1.05rem;
  border: 2px solid currentColor;
  border-radius: 50%;
  transition: transform 0.7s cubic-bezier(0.45, 0, 0.55, 1);
}
.rac-wheel-shapes .wheel-card__turn::after { border: 0; border-radius: 0; background: var(--w-cran); -webkit-mask: var(--wheel-c) center / 100% 100% no-repeat; mask: var(--wheel-c) center / 100% 100% no-repeat; }
.is-turned > .wheel-card__turn::after { transform: rotate(180deg); }
.wheel-card__turn:focus { outline: none; }
.wheel-card__turn:focus-visible { outline: 2px solid var(--w-white); outline-offset: 3px; }
@media (hover: hover) { .wheel-card__turn:hover { color: var(--w-bone); } }

/* small furniture of the partials */
.is-enhanced > .wheel-prop__label--plain { display: none; }
.wheel-prop__items--names { margin: 0; padding: 0; list-style: none; }
.is-enhanced > .wheel-prop__items--names { display: none; }
.wheel-quiz .wheel-living .wheel-prop__items--names,
.wheel-quiz .wheel-living.is-enhanced .wheel-prop__items--names { display: none; }   /* the names are only there to name the windows: the result says the name */
.wheel-family__help,
.wheel-dial__help { margin: 1.25rem 0 0; font-size: var(--fs-small, 1rem); font-weight: var(--w-light); color: var(--w-ash); }
.wheel-dial__help { max-inline-size: 38rem; margin-inline: auto; text-align: center; }
/* The keyboard's help is for the keyboard: shown while the keyboard is on the dial (its room is
   kept, so nothing moves), never on a touch screen, and not at all without scripts. */
.wheel-dial.is-enhanced .wheel-dial__help { opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0s 0.25s; }
.wheel-dial.is-enhanced .wheel-dial__stage:focus-visible ~ .wheel-dial__help { opacity: 1; visibility: visible; transition-delay: 0s; }
.wheel-dial:not(.is-enhanced) .wheel-dial__help { display: none; }
@media (hover: none) { .wheel-dial__help { display: none; } }
.wheel-dial__when { margin: 0 0 0.6rem; font-size: var(--fs-small, 1rem); font-weight: var(--w-light); font-variant-numeric: tabular-nums; color: var(--w-ash); }
.wheel-dial__era::before { content: "·"; margin-inline: 0.5em; }
.wheel-dial__title { margin: 0 0 0.6rem; font-size: var(--fs-sub, clamp(1.625rem, 1.46rem + 0.74vw, 2.125rem)); font-weight: var(--w-heavy); line-height: 1.1; color: var(--w-bone); }
.wheel-dial__text { margin: 0; font-weight: var(--w-light); }
.wheel-quiz__area { display: block; margin-block-end: 0.4rem; font-size: var(--fs-sub, clamp(1.625rem, 1.46rem + 0.74vw, 2.125rem)); font-weight: var(--w-heavy); line-height: 1.1; }
.wheel-quiz__note { margin-block: 1rem 0; font-weight: var(--w-light); color: var(--w-ash); }
.wheel-quiz__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0 0; }
@media (max-width: 30rem) {                              /* a phone: the count above, the two buttons side by side */
  .wheel-quiz__nav { flex-wrap: wrap; gap: 0.75rem; }
  .wheel-quiz__nav > [data-quiz-count] { order: -1; flex: 1 1 100%; }
  .wheel-quiz__nav > :is(button, .btn) { flex: 1 1 0; }
}
.wheel-footer__label { color: var(--w-ash); }
.wheel-footer__label::after { content: ":"; }
.wheel-card__mono { display: block; inline-size: 2.5rem; margin-block-end: 1rem; color: var(--w-cran); }
.wheel-card__mono > svg { display: block; inline-size: 100%; block-size: auto; }
.wheel-card__role { margin: 0; font-size: var(--fs-sub, clamp(1.625rem, 1.46rem + 0.74vw, 2.125rem)); font-weight: var(--w-heavy); line-height: 1.1; }
.wheel-card__name,
.wheel-card__term { margin: 0.35rem 0 0; font-weight: var(--w-light); }
.wheel-card__term { color: var(--w-ash); }
.wheel-card__does { margin: 0.5rem 0 0; }

/* ══════════════════════════════════════════════════════════ REDUCED MOTION ══ */
@media (prefers-reduced-motion: reduce) {
  .wheel-prop__gate, .wheel-prop__items > *, .wheel-family__lead, .wheel-family__gear::after,
  .wheel-family__captions > li::before, .wheel-dial__seg::before, .wheel-dial__entries > li, .wheel-countdown__wheel,
  .wheel-countdown__anchor, .wheel-form .wheel-prop__tooth, .wheel-form .wheel-prop__body, .wheel-form .wheel-prop__light,
  .wheel-footer [data-wheel-entry], .wheel-stopped__ask, .wheel-stopped__logo-part, .wheel-card.is-enhanced .wheel-card__inner,
  .wheel-card.is-enhanced .wheel-card__face, .wheel-card__turn::after { transition: none !important; }
}

/* small furniture of the partials that only the bright site shows (styled there, below), and the
   box that holds the dial's rim and stops (the size of its stage; nothing to see by itself) */
.wheel-footer__medal,
.wheel-quiz__medal { display: none; }
.wheel-dial__arc { position: absolute; inset: 0; }

/* ═════════════════════════════════════════════════════════ ON THE BRIGHT SITE ══
   DIRECTION-BRIGHT. Every page of the website has <html data-theme="bright">: white, sand (--blush)
   and paper (--cream) grounds, flat colour panels, ink text, cranberry as the accent. Nothing above
   this line is changed; every rule below is scoped html[data-theme="bright"], so it outranks
   bright.css and never reaches a page that keeps the film's look (data-theme="film").

   The rules of the bright set pieces:
   · The logo's wheel is never recoloured and nothing is ever laid over its windows: it is the
     logo's cranberry on a pale ground and white inside a colour panel (--w-cran, from bright.css's
     --wheel-colour, which every tone re-points). A wheel that waits (the form's, a stopped one, an
     escape wheel with nothing to count) is a veil of ink (--w-idle), never a tint of another hue.
   · What points at a wheel, ticks beside it or rings it is the accent (--w-mark, from
     --wheel-accent: wine on a pale ground, white on a deep panel, ink on a warm one). The chosen
     window is shown by the pointer above the rim seating itself, and by the name under the wheel:
     there is no light to throw on it.
   · Plain machinery (the family's three other gears, the escapement, the gear field) is not the
     logo: it may be pale, in the accent or in the wheel's colour. Nothing here leans on a token
     being pink: pale parts are a veil of the accent or of ink, and rows are the ground's own --row.
   · No pools of light, no glow, no hairlines, no gradient but a mask. Type is 16px or more.
   · A piece must stand on white, sand and paper and inside a deep or a warm panel without being
     told which: it reads the tokens that a tone re-points (--wheel-colour, --wheel-accent, --fg,
     --row, --btn-bg …), never a ground. */

/* Two things a piece cannot read from the tokens of a tone, so they are said here once for each of
   bright.css's three tones (the lists are its own: pale, and deep with warm):
   · the eras of the record, for the history dial: the family's colours on a pale ground. Inside a
     colour panel they would fight the panel, so there the rim is one colour, the accent;
   · a part that waits (a wheel with nothing to count, the track of the form wheel, the years the club
     stood still): a veil of ink, a veil of white on a deep panel. Never a tint of another hue.
   A tone this file does not know keeps what it inherits, which is only less quiet. */
html[data-theme="bright"],
html[data-theme="bright"] :is(.b-pale, .b-ground--white, .b-ground--blush, .b-ground--cream, .b-card, .b-panel--blush, .b-panel--cream, .b-panel--white, .b-panel--tint) {
  --w-era-began: var(--plum);
  --w-era-first: var(--coral);
  --w-era-second: var(--apricot);
  --w-era-back: var(--wine);            /* back once again, wherever the era is a field or carries words (a card a page fills with --w-era): wine. Cranberry is an accent, never a wash… */
  --w-era-back-mark: var(--cranberry);  /* …so it is kept for the dial's own small marks of that era: its length of the rim, the tooth of its chip */
  --w-idle: var(--ink-a20);
  --w-era-still: var(--ink-a20);        /* the years it stood still: the teeth on the bare rim */
  --w-era-stood: var(--ink-soft);       /* …and the same era where it must carry words (an entry's chip, a card) */
}
html[data-theme="bright"] :is(.b-deep, .b-warm, .b-ground--wine, .b-ground--aubergine, .b-ground--magenta, .b-ground--cranberry,
    .b-panel--wine, .b-panel--cranberry, .b-panel--plum, .b-panel--aubergine, .b-panel--magenta,
    .b-panel--apricot, .b-panel--coral, .b-panel--rose, .b-panel[data-area]:not(.b-panel--tint, .b-panel--blush, .b-panel--cream, .b-panel--white),
    .b-ticker--wine, .b-ticker--aubergine, .b-ticker--cranberry, .site-footer, .section--lit, .tone-lit, .panel--lit) {
  --w-era-began: var(--wheel-accent);
  --w-era-first: var(--wheel-accent);
  --w-era-second: var(--wheel-accent);
  --w-era-back: var(--wheel-accent);
  --w-era-back-mark: var(--wheel-accent);
  --w-idle: var(--line);
  --w-era-still: var(--line);
  --w-era-stood: var(--line-strong);
}

html[data-theme="bright"] :where(.wheel-prop, .wheel-family, .wheel-dial, .wheel-countdown, .wheel-quiz, .wheel-card, .wheel-field) {
  --w-cran: var(--wheel-colour);        /* the wheel */
  --w-mark: var(--wheel-accent);        /* pointers, ticks, rings round a wheel, the edge of plain machinery */
  --w-white: var(--wheel-accent);       /* what was white light on the film is the accent here */
  --w-night: var(--row);                /* a raised row, whatever the ground: cream on white, white on blush and cream, a veil on a panel */
  --w-night-2: var(--row-hover);
  --w-black: var(--bg);                 /* the section's own ground */
}
/* A raised row (an answer of the quiz, a medallion at rest, the entry the footer wheel lands on, an
   era's chip) is the tone's own --row and --row-hover, read where they are used: bright.css says them
   for every ground, panel and card, and a page may re-point them on a part of a piece (About does, on
   the card that holds a dial entry). */

/* ─────────────────────────────────────────────────────────── the wheel ── */
html[data-theme="bright"] .wheel-prop__rotor { color: var(--w-cran); }                      /* the still wheel that stands there without scripts */
html[data-theme="bright"] .wheel-prop__rotor:focus-visible { outline: 3px solid var(--w-mark); outline-offset: 5px; }
html[data-theme="bright"] .wheel-prop__pick:focus-visible { outline: 3px solid var(--w-mark); outline-offset: 0; }
html[data-theme="bright"] .wheel-prop__gate { display: none; }                               /* no wedge of light: nothing is laid over a window */
html[data-theme="bright"] .wheel-prop__window .wheel-prop__emblem,
html[data-theme="bright"] .wheel-prop__window .wheel-prop__picture { opacity: 1; }           /* art in a window stands at full strength: there is no light to bring it up */
html[data-theme="bright"] .wheel-living .wheel-prop__tooth.is-first { fill: var(--w-cran); } /* the opening: the first tooth is the wheel's own colour too */
html[data-theme="bright"] .wheel-prop__svg--dim .wheel-prop__body { fill: var(--w-idle); }                 /* a wheel that has stopped: a veil of ink under the lit one */

/* The chosen window. The pointer above the rim is the wheel's own window, point down, in the accent.
   It scales with the wheel. While the wheel turns it stands off, lifted and faint; when a window
   comes to rest under it, it drops into place. */
html[data-theme="bright"].rac-wheel-shapes .wheel-living > .wheel-prop__stage > .wheel-prop__index {
  inset-block: auto 98.2%;
  inline-size: clamp(1.2rem, 6.6%, 2.25rem);
  block-size: auto;
  aspect-ratio: var(--wheel-wedge-ratio, 1.1);
}
html[data-theme="bright"] .wheel-living > .wheel-prop__stage > .wheel-prop__index {
  transform: translate(-50%, -45%);
  transition: opacity .3s, transform .5s cubic-bezier(.34, 1.4, .64, 1);
}
html[data-theme="bright"] .wheel-living.is-touched > .wheel-prop__stage > .wheel-prop__index { opacity: .45; }
html[data-theme="bright"] .wheel-living.is-settled > .wheel-prop__stage > .wheel-prop__index { opacity: 1; transform: translate(-50%, 0); }

/* ─────────────────────────────────────────────── 4 the Rotary family gears ──
   The club's wheel is the logo, in its colour, and the largest. The other three are plain
   machinery: the ground's own second pale, with an edge in the accent; the nearer the body is to
   the club, the fuller its gear. The gear that is on gets a hub cap, the same filled circle as the
   medallion of its caption (it stands still on the hub: the gear itself is never repainted), so the
   two are seen as a pair and no line has to cross the wheel to join them. The captions are rows with
   a medallion; the keyway turns in it to face the gears. */
html[data-theme="bright"] .wheel-family__light,
html[data-theme="bright"] .wheel-family__lead { display: none; }
html[data-theme="bright"] .wheel-family__stage { color: var(--w-cran); }                     /* the still wheel that stands there without scripts is the logo's colour too */
html[data-theme="bright"] .wheel-family__svg path { fill: var(--row-hover); fill-opacity: .8; stroke: var(--w-mark); stroke-width: 1.5; stroke-linejoin: round; }   /* the tone's second pale (sand on white and paper, paper on sand, a veil on a panel): never a pink */
html[data-theme="bright"] .wheel-family__gear--sponsor .wheel-family__svg path { fill-opacity: 1; }
html[data-theme="bright"] .wheel-family__gear--ri .wheel-family__svg path { fill-opacity: .55; }
html[data-theme="bright"] .wheel-family__gear::after { inset: 33%; border: 0; background: var(--btn-bg); transform: scale(.3); transition: opacity .25s, transform .45s cubic-bezier(.34, 1.4, .64, 1); }
html[data-theme="bright"] .wheel-family__gear.is-on::after { opacity: 1; transform: none; }
html[data-theme="bright"] .wheel-family__gear.is-wheel::after { display: none; }             /* nothing is laid over the logo's wheel */
html[data-theme="bright"] .wheel-family__gear:focus-visible { outline: 3px solid var(--w-mark); outline-offset: -3px; }
html[data-theme="bright"] .wheel-family__captions { gap: 1.1rem; }
html[data-theme="bright"] .wheel-family__captions > li { min-block-size: 3rem; padding-inline-start: 4rem; }
html[data-theme="bright"] .wheel-family__captions > li::before,
html[data-theme="bright"].rac-wheel-shapes .wheel-family__captions > li::before {           /* the medallion */
  inset-block-start: 0;
  inline-size: 3rem;
  block-size: 3rem;
  border: 0;
  border-radius: 50%;
  background: var(--row);
  -webkit-mask: none;
  mask: none;
  transform: none;
  transition: background-color .3s;
}
html[data-theme="bright"] .wheel-family__captions > li::after {                             /* the keyway in it */
  content: "";
  position: absolute;
  inset-block-start: .85rem;
  inset-inline-start: .85rem;
  inline-size: 1.3rem;
  block-size: 1.3rem;
  border: .2rem solid var(--w-mark);
  border-radius: 50%;
  transition: transform .5s var(--w-ease), background-color .3s, border-color .3s;
}
html[data-theme="bright"].rac-wheel-shapes .wheel-family__captions > li::after { border: 0; border-radius: 0; background: var(--w-mark); -webkit-mask: var(--wheel-c) center / 100% 100% no-repeat; mask: var(--wheel-c) center / 100% 100% no-repeat; }
html[data-theme="bright"] .wheel-family.is-enhanced .wheel-family__captions > li.is-on::before,
html[data-theme="bright"].rac-wheel-shapes .wheel-family.is-enhanced .wheel-family__captions > li.is-on::before { background: var(--btn-bg); transform: none; }
html[data-theme="bright"] .wheel-family.is-enhanced .wheel-family__captions > li.is-on::after { border-color: var(--btn-fg); transform: rotate(-90deg); }
html[data-theme="bright"].rac-wheel-shapes .wheel-family.is-enhanced .wheel-family__captions > li.is-on::after { background: var(--btn-fg); }

/* ───────────────────────────────────────────────────── 5 the history dial ──
   The edge of a very large wheel, and here it has a body: the rim is a band, each era of the record
   is that band in its own colour with its teeth standing on it, and where the club stood still the
   band is bare. The frame closes at both sides by a mask on the rim's box (no fade is painted, so
   the ground may be anything). The index, the current year and the current tooth are the accent. */
html[data-theme="bright"] .wheel-dial__stage::before,
html[data-theme="bright"] .wheel-dial__stage::after { content: none; }
html[data-theme="bright"] .wheel-dial__arc {
  -webkit-mask: linear-gradient(90deg, transparent, var(--white) 13%, var(--white) 87%, transparent);   /* a mask: only the alpha of its stops counts */
  mask: linear-gradient(90deg, transparent, var(--white) 13%, var(--white) 87%, transparent);
}
html[data-theme="bright"] .wheel-dial { --w-dial-gap: 96; --w-dial-band: .7rem; }          /* px between two years at the least (wheel.js reads it): they are set at 16px here · the thickness of the rim */
html[data-theme="bright"] .wheel-dial__stage:focus-visible { outline: 3px solid var(--w-mark); outline-offset: -3px; border-radius: var(--r-field, .875rem); }
html[data-theme="bright"] .wheel-dial__rim { border: var(--w-dial-band) solid var(--w-line); }
html[data-theme="bright"] .wheel-dial__stop,
html[data-theme="bright"] .wheel-dial__stop--began { color: var(--w-era-began); }
html[data-theme="bright"] .wheel-dial__stop--first-return { color: var(--w-era-first); }
html[data-theme="bright"] .wheel-dial__stop--second-return { color: var(--w-era-second); }
html[data-theme="bright"] .wheel-dial__stop--back { color: var(--w-era-back-mark); }
html[data-theme="bright"] .wheel-dial__stop--stopped,
html[data-theme="bright"] .wheel-dial__stop--low { color: var(--w-era-still); }             /* the years the wheel stood still: after the eras, so a low point inside an era is bare too */
html[data-theme="bright"] .wheel-dial__seg { block-size: var(--w-dial-band); }
html[data-theme="bright"] .wheel-dial__stop--stopped .wheel-dial__seg,
html[data-theme="bright"] .wheel-dial__stop--low .wheel-dial__seg { background: none; }
html[data-theme="bright"] .wheel-dial__seg::before { inset-block-end: calc(100% - 1px); opacity: 1; }
html[data-theme="bright"] .wheel-dial__year,
html[data-theme="bright"] .wheel-dial__stop--stopped .wheel-dial__year,
html[data-theme="bright"] .wheel-dial__stop--low .wheel-dial__year { font-size: 1rem; font-weight: var(--fw-text, 400); color: var(--w-ash); }
html[data-theme="bright"] .wheel-dial__stop.is-current .wheel-dial__year { font-weight: var(--fw-strong, 600); color: var(--w-bone); }
html[data-theme="bright"] .wheel-dial__stop.is-current .wheel-dial__seg--stop::before { background: var(--w-mark); transform: scale(1.35); }
html[data-theme="bright"] .wheel-dial__index,
html[data-theme="bright"].rac-wheel-shapes .wheel-dial__index { background: var(--w-mark); }
html[data-theme="bright"].rac-wheel-shapes .wheel-dial__index { inline-size: calc(1.1rem * var(--wheel-wedge-ratio, 1.1)); block-size: 1.1rem; }
/* The entry. Each one carries its era for whoever lays the page out: --w-era its colour, --w-era-tint
   its pale tint, --w-on-era the text that passes on the colour. (Plum, terracotta, amber, an ink for
   the years it stood still, and wine for "back once again": a card may be filled with any of them.) (They are set on the entries, which
   never change, and not on the dial for the stop under the index: that would restyle the whole rim
   at every change of era. The dial says its era in data-dial-era.) Here the era is a chip with one
   tooth in its colour. */
html[data-theme="bright"] .wheel-dial__entry { --w-era: var(--w-era-began); --w-era-tint: var(--plum-tint); --w-on-era: var(--white); }
html[data-theme="bright"] .wheel-dial__entry[data-era="first-return"] { --w-era: var(--w-era-first); --w-era-tint: var(--coral-tint); --w-on-era: var(--ink); }
html[data-theme="bright"] .wheel-dial__entry[data-era="second-return"] { --w-era: var(--w-era-second); --w-era-tint: var(--apricot-tint); --w-on-era: var(--ink); }
html[data-theme="bright"] .wheel-dial__entry[data-era="stopped"] { --w-era: var(--w-era-stood); --w-era-tint: var(--ink-a06); --w-on-era: var(--white); }
html[data-theme="bright"] .wheel-dial__entry[data-era="back"] { --w-era: var(--w-era-back); --w-era-tint: var(--wine-tint); --w-on-era: var(--white); }
html[data-theme="bright"] .wheel-dial__entry[data-era="back"] .wheel-dial__era { --w-era: var(--w-era-back-mark); }   /* the tooth of its chip is a small mark: the rim's cranberry */
html[data-theme="bright"] .wheel-dial.is-flung .wheel-dial__entries > li { transition: none; }   /* dragged or coasting, stops pass quickly: the entries change without a fade then (wheel.js: .is-flung) */
html[data-theme="bright"] .wheel-dial__when { color: var(--w-ash); font-weight: var(--fw-text, 400); }
html[data-theme="bright"] .wheel-dial__era { display: inline-flex; align-items: center; gap: .5rem; min-block-size: 2rem; margin-inline-start: .4rem; padding: .2rem .9rem .2rem .7rem; border-radius: var(--r-full, 999px); background: var(--row); color: var(--w-bone); vertical-align: middle; }
html[data-theme="bright"] .wheel-dial__era::before { content: ""; flex: none; inline-size: calc(.8rem * var(--wheel-tooth-ratio, 1.13)); block-size: .8rem; margin: 0; border-radius: 50% 50% 0 0; background: var(--w-era); }
html[data-theme="bright"].rac-wheel-shapes .wheel-dial__era::before { border-radius: 0; -webkit-mask: var(--wheel-tooth) center / 100% 100% no-repeat; mask: var(--wheel-tooth) center / 100% 100% no-repeat; }

/* ──────────────────────────────────────────────────────── 6 the countdown ──
   The escape wheel is the wheel's colour and the anchor the accent, through the two variables.
   With no date to count to, the escape wheel waits: a veil of ink. */
html[data-theme="bright"] .wheel-countdown[data-countdown-state="tbc"] .wheel-countdown__wheel svg { fill: var(--w-idle); }

/* ─────────────────────────────────────────────────────── 7 find your spoke ──
   Answers are soft rows, not outlines; the chosen one wears a ring in the colour of the primary
   button (cranberry on pale, white on a deep panel, wine on a warm one), which is also the radio's
   and the progress ring's. The result stands on its area's tint with the area's medallion. */
html[data-theme="bright"] .wheel-quiz { --w-cran: var(--btn-bg); }                           /* the questions' own cranberry; the wheel beside them keeps the wheel's */
html[data-theme="bright"] .wheel-quiz label { border: 2px solid transparent; background: var(--row); }
html[data-theme="bright"] .wheel-quiz label:has(input:checked) { border-color: var(--w-cran); background: var(--row-hover); }
html[data-theme="bright"] .wheel-quiz label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) {
  html[data-theme="bright"] .wheel-quiz label:hover { background: var(--row-hover); }
}
html[data-theme="bright"] .wheel-quiz [data-quiz-count]::before { background: conic-gradient(var(--w-cran) calc(var(--quiz-p, 0) * 1turn), var(--w-line) 0); }
/* The navigation: each button keeps its words on one line, at every width and in every language
   ("Previous question" beside "Next question" does not fit a phone; 上一題 beside 下一題 does). The
   questions' column is a container, so this follows the room the quiz really has, wherever a page
   puts it: where back, the count and on do not fit one row, the count stands above and the two
   buttons share the row under it; where even the two do not fit side by side, they stack. */
html[data-theme="bright"] .wheel-quiz__body { container: wheel-quiz / inline-size; }
html[data-theme="bright"] .wheel-quiz__nav { flex-wrap: wrap; gap: .75rem 1rem; }
html[data-theme="bright"] .wheel-quiz__nav > :is(button, .btn) { white-space: nowrap; }
@container wheel-quiz (max-width: 36rem) {
  html[data-theme="bright"] .wheel-quiz__nav > [data-quiz-count] { order: -1; flex: 1 1 100%; }
  html[data-theme="bright"] .wheel-quiz__nav > :is(button, .btn) { flex: 1 1 auto; }
}
@media (max-width: 30rem) {                              /* a browser without container queries: a phone, at the least */
  html[data-theme="bright"] .wheel-quiz__nav > [data-quiz-count] { order: -1; flex: 1 1 100%; }
  html[data-theme="bright"] .wheel-quiz__nav > :is(button, .btn) { flex: 1 1 auto; }
}
html[data-theme="bright"] .wheel-quiz [data-quiz-result] ul { gap: .75rem; }
html[data-theme="bright"] .wheel-quiz [data-quiz-area] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .15rem 1rem;
  align-items: start;
  padding: 1.1rem 1.25rem;
  border-radius: var(--r-card, 1.25rem);
  background: var(--area-tint, var(--row));
  color: var(--ink);
}
html[data-theme="bright"] .wheel-quiz__medal { display: grid; grid-row: 1 / span 2; place-items: center; inline-size: 3.5rem; block-size: 3.5rem; border-radius: 50%; background: var(--area, var(--cranberry)); color: var(--on-area, var(--white)); }
html[data-theme="bright"] .wheel-quiz__medal > .icon { inline-size: 48%; block-size: 48%; }
html[data-theme="bright"] .wheel-quiz__area { align-self: end; margin: 0; color: var(--ink); }
html[data-theme="bright"] .wheel-quiz [data-quiz-area] > span:last-child { grid-column: 2; }

/* ───────────────────────────────────────────────────────── 8 the form wheel ──
   A pale track (the wheel as a veil of ink) and a tooth in the wheel's colour for each completed
   field; sent, the whole wheel takes its colour (painted while it stands) and then turns. */
html[data-theme="bright"] .wheel-form.is-enhanced .wheel-prop__body { fill: var(--w-idle); }
html[data-theme="bright"] .wheel-form.is-enhanced.is-sent .wheel-prop__body { fill: var(--w-cran); }

/* ─────────────────────────────────────────────────────── 9 the footer wheel ──
   White on the wine footer (the footer is a deep tone). The entry it lands on is a soft row with the
   area's icon in a medallion the colour of the primary button there (white, with cranberry). */
html[data-theme="bright"] .wheel-footer.is-enhanced .wheel-prop__stage { grid-row: 1; }                         /* the wheel and its button side by side; the entry under both, at the full width */
html[data-theme="bright"] .wheel-footer.is-enhanced .wheel-footer__entries { grid-column: 1 / -1; }
html[data-theme="bright"] .wheel-footer.is-enhanced [data-wheel-entry] { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; align-items: center; align-self: start; padding: .6rem 1rem .6rem .6rem; border-radius: var(--r-card, 1.25rem); background: var(--row); color: var(--fg); }
html[data-theme="bright"] .wheel-footer.is-enhanced .wheel-footer__text > strong { display: block; }
html[data-theme="bright"] .wheel-footer.is-enhanced .wheel-footer__medal { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%; background: var(--btn-bg); color: var(--btn-fg); }
html[data-theme="bright"] .wheel-footer__medal > .icon { inline-size: 52%; block-size: 52%; }
html[data-theme="bright"] .wheel-footer__label { color: inherit; }

/* ────────────────────────────────────────────────────── 10 the gear field ──
   Flat gears in the accent (wine on a pale ground, white on a deep panel), hardly there: a veil,
   not a pink (wheel.js reads these three from the canvas). The ones near the pointer turn and come
   up a little. */
html[data-theme="bright"] .wheel-field { --w-field-paint: fill; --w-field-alpha: .06; --w-field-glow: 2.2; color: var(--w-mark); }

@media (prefers-reduced-motion: reduce) {
  html[data-theme="bright"] .wheel-living > .wheel-prop__stage > .wheel-prop__index,
  html[data-theme="bright"] .wheel-family__captions > li::before,
  html[data-theme="bright"] .wheel-family__captions > li::after,
  html[data-theme="bright"] .wheel-family__gear::after { transition: none; }
}