/* ═══════════════════════════════════════════════════════════════════════════
   team.css · the board and advisors for 2026–27 on the bright site (page--team)

   The page is a table with name cards on it and one seat left open.
     1 the head      the lockup, the lead, and the table seen from above (a pale top, a seat for each of the
                     six people, one dashed seat in the logo's cranberry)
     2 the board     white: four name cards that turn over, each a colour panel
     3 the advisors  sand: two quieter cards, pale in front and aubergine behind
     4 the band      wine: small and rebuilding, said plainly (the page's one deep band)
     5 the seat      sand: the same card with a dashed cranberry edge that takes your name
     6 the close     an aubergine panel

   Everything is scoped to .page--team. The cards are the engine's turn-over card (.turn-card): this file
   gives a face its layout and its corners; the turning itself is the engine's (two halves).

   COLOUR. No colour is named by value here, and no text colour is chosen by hand. A face takes its colour
   and the words on it from bright.css: a panel class on the face (b-panel--wine, --coral, --plum, --apricot,
   and --magenta, the aubergine: --panel is the colour and the class brings its tone), or the ground the card
   stands on (--row, the surface that shows on that ground; --bg, the ground itself).
   Marks and medallions read the tone's own pair (--btn-bg / --btn-fg). Every wheel is --wheel-colour:
   the logo's cranberry on a pale ground, white on a colour. Cranberry is the accent (the wheels, the open
   seat's edge, the buttons), never a field.

   Motion: transforms and opacity (and the colour of a mark that changes state). Nothing is hidden by this
   file: without scripts, and under reduced motion, both faces of a card stand one under the other.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The pale tint that goes with a board card's colour: the ground of its back. */
.page--team [data-team-tint="wine"] { --tint: var(--wine-tint); }
.page--team [data-team-tint="coral"] { --tint: var(--coral-tint); }
.page--team [data-team-tint="plum"] { --tint: var(--plum-tint); }
.page--team [data-team-tint="apricot"] { --tint: var(--apricot-tint); }

/* ─────────────────────────────────────────────────────────── 1 The head ── */
.page--team .team-head {
  padding-block: calc(var(--clear-top, var(--bar-top)) + clamp(1.75rem, 1rem + 4.5vw, 5.5rem)) clamp(3rem, 2rem + 4vw, 6rem);
}
.page--team .team-head__inner { position: relative; display: grid; gap: var(--space-m); justify-items: start; }
.page--team .team-head__lead { max-inline-size: 30em; color: var(--fg-muted); }
.page--team .team-head__jump { margin-block-start: calc(var(--space-2xs) * -1); }
.page--team .team-head__jump .icon { transition: translate var(--dur-3) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .page--team .team-head__jump:hover .icon { translate: 0 .2rem; }
}

/* The table, seen from above. A pale top (the surface colour of the head's ground); round it a seat for each
   person, in the order of the page (the board, the advisors, the open seat). The seats' centres stand on the
   top's edge, at --start and then every --step; --d says how far out one stands (the open seat is pulled out).
   The seats go round with the scroll (data-spin on __turn), lean a little toward the pointer (team.js, on
   __lean) and, where the whole table shows, drift round by themselves (__idle). The top stands still. */
.page--team .team-table {
  position: absolute;
  z-index: 1;
  inline-size: calc(var(--r) * 2);
  aspect-ratio: 1;
  pointer-events: none;
}
.page--team .team-table__idle,
.page--team .team-table__lean,
.page--team .team-table__turn { position: absolute; inset: 0; }
.page--team .team-table__top { position: absolute; inset: 0; border-radius: 50%; background: var(--row); }
.page--team .team-table__key { position: absolute; inset: 41.5%; inline-size: 17%; block-size: 17%; color: var(--bg); }
.page--team .team-table__seat {
  --a: calc(var(--start) + var(--i) * var(--step));
  --d: 1;
  position: absolute;
  inset-inline-start: calc(50% + sin(var(--a)) * 50% * var(--d) - var(--seat) / 2);
  inset-block-start: calc(50% - cos(var(--a)) * 50% * var(--d) - var(--seat) / 2);
  inline-size: var(--seat);
  block-size: var(--seat);
  pointer-events: auto;
}
/* A seat: a disc in its panel's colour (the open one: the surface colour), its wheel in --wheel-colour
   (set on the rotor: a panel class gives the disc itself the colour of words, and a wheel is never that). */
.page--team .team-table__disc {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: 100%;
  border-radius: 50%;
  background: var(--panel, var(--row));
  transition: scale var(--dur-3) var(--ease-out), background-color var(--dur-3) ease;
}
.page--team .team-table__rotor { inline-size: 58%; block-size: 58%; color: var(--wheel-colour); transition: color var(--dur-3) ease; }
.page--team .team-table__rotor .wheel { inline-size: 100%; block-size: 100%; }
/* The open seat: the logo's own cranberry, waiting. A dashed edge that slowly goes round. */
.page--team .team-table__dash {
  position: absolute;
  inset: 0;
  border: max(2px, calc(var(--seat) * .05)) dashed var(--accent);
  border-radius: 50%;
}
/* A name has been typed on the open card (team.js): the seat is taken. */
.page--team.has-name .team-table__seat--open .team-table__disc { --wheel-colour: var(--white); background: var(--accent); }
.page--team.has-name .team-table__dash { border-style: solid; }
@media (hover: hover) and (pointer: fine) {
  .page--team .team-table__seat:hover .team-table__disc { scale: 1.12; }
}

/* A phone, a narrow pane: the table is very large and only the top of it shows, as an arc along the foot of
   the head, with the seven seats side by side on its edge. It is the colour of the section below (white: the
   surface colour of the head's ground), so the arc is the seam between the two: an arc of the rim instead of
   a row of teeth. Everything is in vw, so the picture is the same at any width. */
@media (max-width: 44.99rem) {
  .page--team .team-head { --r: 120vw; --seat: 11.5vw; padding-block-end: calc(22vw + 5.75vw + var(--space-l)); }
  .page--team .team-table {
    --step: 6.17deg;
    --start: calc(var(--step) * (var(--seats, 7) - 1) / -2);
    inset-inline-start: calc(50% - var(--r));
    inset-block-start: calc(100% - 22vw);
  }
  .page--team .team-table__key { display: none; }
  .page--team .team-board > .seam { display: none; }
}
/* From 45rem the whole table stands beside the words, the open seat at the side nearest to them. */
@media (min-width: 45rem) {
  .page--team .team-head { --r: clamp(5rem, 11.5vw, 10rem); --seat: calc(var(--r) * .6); }
  .page--team .team-table {
    --step: calc(360deg / var(--seats, 7));
    --start: -58.6deg;
    inset-inline-end: calc(max(var(--gutter), (100% - var(--container)) / 2) + var(--seat) * .8);
    inset-block-start: calc(50% + var(--clear-top, 0px) / 2 - var(--r));
  }
  .page--team .team-table__seat--open { --d: 1.16; }
  .page--team .team-head__inner { padding-inline-end: calc(var(--r) * 2 + var(--seat) * 1.75 + var(--space-l)); }
}
/* A pane (45 to 64rem): the table takes its share of the width, so the title is set a size smaller and keeps
   one line beside it (in Chinese it parted before its last word, which stood alone on a second line). */
@media (min-width: 45rem) and (max-width: 63.99rem) {
  .page--team .team-head .lockup--hero { --lockup-fs: calc(clamp(2.125rem, 4.9vw, 2.75rem) * var(--display-scale)); }
}
/* A short, wide window (the pane, a laptop): less air above the title, so the cards begin in the first screen. */
@media (min-width: 45rem) and (max-height: 45rem) {
  .page--team .team-head { padding-block: calc(var(--clear-top, var(--bar-top)) + clamp(1.5rem, 5vh, 3rem)) clamp(2.5rem, 7vh, 4rem); }
}

/* What turns by itself, slowly: the dashed edge of an open seat, and (where the whole table shows) the seats
   round the table. Both stop with the footer's pause button, and neither runs under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  html.js .page--team :is(.team-table__dash, .team-seat__dash) { animation: team-march 48s linear infinite; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 45rem) {
  html.js .page--team .team-table__idle { animation: team-march 180s linear infinite reverse; }
}
html.js.is-motion-paused .page--team :is(.team-table__dash, .team-seat__dash, .team-table__idle) { animation-play-state: paused; }
@keyframes team-march { to { rotate: 360deg; } }

/* ─────────────────────────────────────────────────────── 2 The cards ── */
.page--team .team-cards { display: grid; gap: var(--space-s); margin: 0; padding: 0; list-style: none; }
.page--team .team-cards__item { min-inline-size: 0; }
@media (min-width: 34rem) {
  .page--team .team-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, .5rem + 1.4vw, 1.5rem); }
}
@media (min-width: 68rem) {
  .page--team .team-cards:not(.team-cards--advisors) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* A name card. The front: a medallion with the wheel, the role, the name when it may be shown, and at the foot
   the year. The back: what the role does, and at the foot whose card it is. The round mark at the foot of
   each face says the card turns; the whole card is the button. */
.page--team .team-card {
  --card-h: 19rem;
  --pad: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  --mark: 2.75rem;
  --flip-out: 230ms;
  --flip-in: 430ms;
  block-size: 100%;
}
@media (min-width: 34rem) { .page--team .team-card { --card-h: 22rem; } }
@media (min-width: 68rem) { .page--team .team-card { --card-h: 23.5rem; } }

.page--team .team-card .turn-card__inner { transition: scale var(--dur-1) var(--ease-out); }
.page--team .team-card .turn-card__face {
  position: relative;
  isolation: isolate;
  overflow: clip;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  gap: var(--space-s);
  padding: var(--pad);
  border: 0;
  border-radius: var(--r-panel);
  /* arriving: the second half of the turn, and it settles softly */
  transition: transform var(--flip-in) cubic-bezier(.16, 1, .3, 1) var(--flip-out);
}
/* leaving: the first half, quick */
.page--team .team-card .turn-card__face--back,
.page--team .team-card.is-turned .turn-card__face--front { transition: transform var(--flip-out) cubic-bezier(.5, 0, .9, .5) 0s; }
.page--team .team-card.is-turned .turn-card__face--back { transition: transform var(--flip-in) cubic-bezier(.16, 1, .3, 1) var(--flip-out); }

/* What a face stands on. Its words follow from the class the template gave it (a panel's tone, or b-pale). */
.page--team .team-card .team-card__face--colour { background: var(--panel); }
.page--team .team-card .team-card__face--tint { background: var(--tint, var(--row)); }
.page--team .team-card .team-card__face--pale { background: var(--row); }

/* The front */
.page--team .team-card .team-card__mono { --m: clamp(4.25rem, 3.4rem + 2.6vw, 5.5rem); }
.page--team .team-card .team-card__face--colour > .team-card__mono { --m-fg: var(--cranberry); }       /* the wheel on a white medallion is the logo's own cranberry */
.page--team .team-card .team-card__face--pale > .b-medallion.team-card__mono { --m-bg: var(--panel); }   /* an advisor: an aubergine medallion … */
.page--team .team-card .team-card__face--pale > .b-medallion.team-card__mono > .wheel { color: var(--wheel-colour); }   /* … and the wheel white on it */
.page--team .team-card__mono .wheel { transition: rotate var(--dur-6) var(--ease-out); }
.page--team .team-card__ghost {
  position: absolute;
  z-index: -1;
  inset-inline-end: -19%;
  inset-block-end: -15%;
  inline-size: 74%;
  aspect-ratio: 1;
  color: var(--wheel-colour);
  opacity: .14;
  pointer-events: none;
}
.page--team .team-card__ghost .wheel { inline-size: 100%; block-size: 100%; transition: rotate var(--dur-6) var(--ease-out); }
.page--team :is(.b-panel--coral, .b-panel--apricot) > .team-card__ghost { opacity: .22; }
.page--team .team-card__bill { display: grid; gap: .3rem; align-self: end; min-inline-size: 0; }
.page--team .team-card .turn-card__role { color: var(--heading); font-size: var(--fs-sub); line-height: var(--lh-sub); }
.page--team .team-card .turn-card__name { color: var(--fg); font-size: var(--fs-lead); line-height: var(--lh-sub); }
.page--team .team-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  min-block-size: var(--mark);
  max-inline-size: none;
  color: var(--fg);
  font-size: 1rem;
  font-weight: var(--fw-strong);
  line-height: var(--lh-ui);
  font-variant-numeric: tabular-nums lining-nums;
}
.page--team .team-card__foot > :first-child { min-inline-size: 0; }
/* The mark: a disc in the tone's own pair (white with cranberry on a deep panel, wine with white on a warm one,
   cranberry with white on a pale face). */
.page--team .team-card__mark {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: var(--mark);
  block-size: var(--mark);
  margin-inline-start: auto;
  border-radius: 50%;
  background: var(--btn-bg);
  color: var(--btn-fg);
  transition: scale var(--dur-2) var(--ease-out);
}
.page--team .team-card__mark .icon { inline-size: 1.375rem; block-size: 1.375rem; stroke-width: 2.25; transition: rotate var(--dur-4) var(--ease-out); }
.page--team .turn-card__face--back .team-card__mark { transform: scaleX(-1); }       /* on the back it points the other way: turn it back */
.page--team .team-card .turn-card__btn .icon { display: none; }                      /* the faces carry the mark */

/* The back */
.page--team .team-card__label {
  display: flex;
  align-items: center;
  gap: .7rem;
  max-inline-size: none;
  color: var(--fg);
  font-size: 1rem;
  font-weight: var(--fw-strong);
  line-height: var(--lh-ui);
}
.page--team .team-card__icon { justify-self: start; }
.page--team .team-card__face--tint .team-card__icon { --m-bg: var(--panel); --m-fg: var(--fg); }   /* the card's own colour, the icon in its tone's words */
.page--team .team-card__does { max-inline-size: none; line-height: 1.5; }
.page--team .team-card__note { max-inline-size: none; font-size: var(--fs-lead); line-height: 1.4; }

/* The ring of the focus stands just outside the card, where it shows on any ground. */
.page--team .team-card .turn-card__btn { border-radius: var(--r-panel); }
.page--team .team-card .turn-card__btn:focus-visible { outline-offset: 3px; }

/* It answers the hand: under the pointer the wheel makes one whole turn and the mark leans; a press sinks the card a hair. */
@media (prefers-reduced-motion: no-preference) {
  .page--team .team-card:has(.turn-card__btn:active) .turn-card__inner { scale: .985; }
  .page--team .team-card:focus-within .team-card__mono .wheel { rotate: 360deg; }
  @media (hover: hover) and (pointer: fine) {
    .page--team .team-card:hover .team-card__mono .wheel { rotate: 360deg; }
    .page--team .team-card:hover .team-card__ghost .wheel { rotate: 60deg; }
    .page--team .team-card:hover .team-card__mark { scale: 1.1; }
    .page--team .team-card:hover .team-card__mark .icon { rotate: 90deg; }
  }
}

/* Without scripts, and under reduced motion: both faces, one under the other, as one card. */
html:not(.js) .page--team .team-card .turn-card__face--front { border-end-start-radius: 0; border-end-end-radius: 0; }
html:not(.js) .page--team .team-card .turn-card__face--back { border-start-start-radius: 0; border-start-end-radius: 0; }
html:not(.js) .page--team .team-card .turn-card__face { grid-template-rows: auto; }
html:not(.js) .page--team .team-card .team-card__foot { min-block-size: 0; }
html:not(.js) .page--team .team-card :is(.team-card__mark, .turn-card__face--back > .team-card__foot) { display: none; }
@media (prefers-reduced-motion: reduce) {
  .page--team .team-card.turn-card { perspective: none; }
  .page--team .team-card .turn-card__inner { display: block; }
  .page--team .team-card .turn-card__face,
  .page--team .team-card.is-turned .turn-card__face { min-block-size: 0; grid-template-rows: auto; transform: none; transition: none; }
  .page--team .team-card .turn-card__face--front { border-end-start-radius: 0; border-end-end-radius: 0; }
  .page--team .team-card .turn-card__face--back { border-start-start-radius: 0; border-start-end-radius: 0; }
  .page--team .team-card .team-card__foot { min-block-size: 0; }
  .page--team .team-card :is(.team-card__mark, .turn-card__face--back > .team-card__foot, .turn-card__btn) { display: none; }
}

/* ──────────────────────────────────────────────────────── The board ── */
/* The line about names: a small medallion and the words, under the cards. */
.page--team .team-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-s);
  max-inline-size: 46rem;
  margin-block-start: var(--space-l);
  color: var(--fg-muted);
  font-size: var(--fs-small);
  line-height: 1.6;
}
.page--team .team-note__icon { --m-bg: var(--row); --m-fg: var(--link); }
.page--team .team-note > span:last-child { min-inline-size: 0; padding-block-start: .55rem; }

/* ──────────────────────────────────────────────────── 3 The advisors ── */
.page--team .team-advisors__inner { display: grid; gap: var(--space-l); }
.page--team .team-advisors__head { display: grid; gap: var(--space-m); align-content: start; justify-items: start; }
.page--team .team-advisors__lead { max-inline-size: 30em; color: var(--fg-muted); }
@media (min-width: 64rem) {
  .page--team .team-advisors__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
}
/* An advisor's card: smaller than a board card; pale in front, aubergine behind. */
.page--team .team-card--advisor { --card-h: 14.5rem; }
@media (min-width: 34rem) { .page--team .team-card--advisor { --card-h: 16rem; } }
.page--team .team-card--advisor .team-card__mono { --m: clamp(3.5rem, 3rem + 1.6vw, 4.25rem); }

/* ───────────────────────────────────────── 4 Small, and rebuilding ── */
.page--team .team-honest__back { position: absolute; inset: 0; overflow: clip; pointer-events: none; }
.page--team .team-honest__wheel {
  --w: clamp(15rem, 34vw, 27rem);
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: calc(var(--w) * -.3);
  inline-size: var(--w);
  aspect-ratio: 1;
  margin-block-start: calc(var(--w) / -2);
  color: var(--wheel-colour);
  opacity: .1;
}
.page--team .team-honest__rotor,
.page--team .team-honest__rotor .wheel { inline-size: 100%; block-size: 100%; }
.page--team .team-honest__inner { position: relative; display: grid; gap: var(--space-l); }
.page--team .team-honest__number { display: grid; gap: var(--space-2xs); align-content: start; }
.page--team .team-honest__number .b-number__label { max-inline-size: 11em; color: var(--fg-muted); }
.page--team .team-honest__words { display: grid; gap: var(--space-s); align-content: start; }
.page--team .team-honest__title { font-size: var(--fs-section); }
.page--team .team-honest__text { max-inline-size: 34em; font-size: var(--fs-lead); font-weight: var(--fw-light); line-height: 1.5; }
@media (min-width: 44rem) {
  .page--team .team-honest__inner { grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(2rem, 1rem + 5vw, 6rem); align-items: center; }
  .page--team .team-honest__number { padding-inline-end: clamp(2rem, 1rem + 5vw, 6rem); border-inline-end: .25rem solid var(--rule); }
}

/* ───────────────────────────────────────────────── 5 The open seat ── */
.page--team .team-seat__inner { display: grid; gap: var(--space-l); }
.page--team .team-seat__head { display: grid; gap: var(--space-m); justify-items: start; }
.page--team .team-seat__text { max-inline-size: 32em; }
.page--team .team-seat__form { display: grid; gap: var(--space-m); justify-items: start; align-content: start; }
.page--team .team-seat__field { inline-size: min(100%, 24rem); }
.page--team .team-seat__card { inline-size: min(100%, 22rem); }
/* The card is held out to you, a little askew; it straightens when you take it (the field has the focus, or a name is on it). */
@media (min-width: 34rem) {
  .page--team .team-seat__hang { rotate: 3deg; transition: rotate var(--dur-4) var(--ease-out); }
  .page--team .team-seat:focus-within .team-seat__hang,
  .page--team.has-name .team-seat__hang { rotate: 0deg; }
}
/* A narrow pane: the words on top, then the card with its field beside it. */
@media (min-width: 34rem) and (max-width: 44.99rem) {
  .page--team .team-seat__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "head head" "card form"; column-gap: var(--space-l); align-items: center; }
  .page--team .team-seat__head { grid-area: head; }
  .page--team .team-seat__card { grid-area: card; }
  .page--team .team-seat__form { grid-area: form; }
}
/* From 45rem: the words and the field on the start side, the card beside them. */
@media (min-width: 45rem) {
  .page--team .team-seat__inner {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    grid-template-rows: auto auto;
    grid-template-areas: "head card" "form card";
    column-gap: clamp(2rem, 1rem + 5vw, 6rem);
    row-gap: var(--space-l);
    align-items: start;
  }
  .page--team .team-seat__head { grid-area: head; align-self: end; }
  .page--team .team-seat__form { grid-area: form; }
  .page--team .team-seat__card { grid-area: card; align-self: center; justify-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  .page--team .team-seat__hang { rotate: none; transition: none; }
}

/* The card: pale, with a dashed edge in the logo's cranberry. An empty medallion, "and you", the year.
   With a name on it the edge closes, the medallion fills and its wheel turns white. */
.page--team .team-card--seat { --edge: .1875rem; }
.page--team .team-card--seat .turn-card__face::before,
.page--team .team-card--seat .turn-card__face::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: var(--edge) dashed var(--accent);
  border-radius: inherit;
  pointer-events: none;
  transition: opacity var(--dur-3) ease;
}
.page--team .team-card--seat .turn-card__face::after { border-style: solid; opacity: 0; }
.page--team.has-name .team-card--seat .turn-card__face::before { opacity: 0; }
.page--team.has-name .team-card--seat .turn-card__face::after { opacity: 1; }
.page--team .team-card--seat .team-card__foot { color: var(--link); }

.page--team .team-seat__mono { position: relative; display: grid; place-items: center; inline-size: var(--m); block-size: var(--m); }
.page--team .team-seat__dash { position: absolute; inset: 0; border: var(--edge) dashed var(--accent); border-radius: 50%; transition: opacity var(--dur-3) ease; }
.page--team .team-seat__fill { position: absolute; inset: 0; border-radius: 50%; background: var(--accent); opacity: 0; scale: .86; transition: opacity var(--dur-3) ease, scale var(--dur-3) var(--ease-out); }
.page--team .team-seat__rotor { position: relative; display: block; inline-size: 62%; block-size: 62%; color: var(--wheel-colour); transition: color var(--dur-3) ease; }
.page--team .team-seat__rotor .wheel { inline-size: 100%; block-size: 100%; }
.page--team.has-name .team-seat__dash { opacity: 0; }
.page--team.has-name .team-seat__fill { opacity: 1; scale: 1; }
.page--team.has-name .team-seat__mono { --wheel-colour: var(--white); }       /* on the filled medallion the wheel is white, as on any colour */

.page--team .team-seat__and {
  color: var(--fg-muted);
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  line-height: var(--lh-ui);
  letter-spacing: var(--tracking-light);
}
.page--team .team-seat__you {
  max-inline-size: none;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: var(--fs-section);
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  overflow-wrap: anywhere;
}
.page--team .team-seat__you[data-team-fit="1"] { font-size: var(--fs-sub); line-height: var(--lh-sub); letter-spacing: var(--tracking-sub); }
.page--team .team-seat__you[data-team-fit="2"] { font-size: var(--fs-lead); line-height: var(--lh-sub); letter-spacing: var(--tracking-sub); }
@media (prefers-reduced-motion: reduce) {
  .page--team .team-card--seat .turn-card__face::before,
  .page--team .team-card--seat .turn-card__face::after,
  .page--team .team-seat__dash,
  .page--team .team-seat__fill,
  .page--team .team-seat__rotor { transition: none; }
}

/* ──────────────────────────────────────────────── 6 A closing call ── */
.page--team .team-close__panel { overflow: clip; isolation: isolate; padding-block: clamp(2rem, 1.2rem + 3.6vw, 4.5rem); }
.page--team .team-close__wheel {
  --w: clamp(13rem, 30vw, 23rem);
  position: absolute;
  z-index: -1;
  inset-block-end: calc(var(--w) * -.34);
  inset-inline-end: calc(var(--w) * -.22);
  inline-size: var(--w);
  aspect-ratio: 1;
  color: var(--wheel-colour);
  opacity: .16;
  pointer-events: none;
}
.page--team .team-close__rotor { display: block; inline-size: 100%; block-size: 100%; }
.page--team .team-close__rotor .wheel { inline-size: 100%; block-size: 100%; }
.page--team .team-close__inner { display: grid; gap: var(--space-l); justify-items: start; }
.page--team .team-close__actions { --gap: var(--space-s) var(--space-l); }