/* ═══════════════════════════════════════════════════════════════════════════
   Rotaract Club of Hong Kong Island East · pages/join.css
   The Join page on the bright site (DIRECTION-BRIGHT, BRIGHT-BUILD). Everything is scoped to .page--join
   and built from the bright vocabulary of bright.css: grounds, flat colour panels, medallions, pills.
   Colours are tokens and tones only, never a value: the palette is "Sand and wine" (the tokens keep their
   first names: --blush is sand, --cream paper, --magenta aubergine, --apricot amber), and text on a colour
   comes from the tone or from --on-area. No pink ground or panel; cranberry is the accent (wheels, buttons,
   ticks), never a large field.
   Motion is transforms, opacity and clip-path; what moves is moved by the engine's attributes (data-spin,
   data-reveal, data-tilt …) and by join.js (the gears under the pointer, one cog, one flood of colour).
   Without scripts and under reduced motion every part stands where it belongs, complete.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────── 1 The head ──
   Sand (the ground named blush). The words keep the start side; the members in their wheel stand at the
   end side (under the words on a narrow screen). --gear is the box of one wheel: both gears are that
   size, because two wheels with the same teeth only mesh when they are equal. */
.page--join .join-hero {
  --gear: min(72vw, 20rem);
  padding-block: calc(var(--clear-top, var(--bar-top)) + clamp(1.5rem, 4.5vh, 4.5rem)) clamp(3.5rem, 2.5rem + 4vw, 6rem);
}
.page--join .join-hero__inner { display: grid; gap: clamp(1.75rem, 1rem + 2vw, 4rem); align-items: center; }
.page--join .join-hero__words { display: grid; gap: clamp(.875rem, .6rem + 1vw, 1.5rem); justify-items: start; min-inline-size: 0; }
.page--join .join-hero__words > .lead { max-inline-size: 31em; }
.page--join .join-hero__actions { gap: .75rem; margin-block-start: .25rem; }
/* The title is sized so that its two lines stay two lines beside the wheel, at every width. */
.page--join .join-hero .lockup--hero { --lockup-fs: calc(clamp(2.125rem, 1.1rem + 4.6vw, 3rem) * var(--display-scale)); }
@media (max-width: 29.99rem) {
  /* On a phone both actions are full-width bars: the first one is the form, one tap away. */
  .page--join .join-hero__actions { inline-size: 100%; }
  .page--join .join-hero__actions > .btn { flex: 1 1 100%; }
}
/* A narrow pane (the client's is 588 by 612): the wheel already stands beside the words, smaller, so that the
   first screen holds the title, the lead, both actions and the members, whole. Below 34rem (a phone) the wheel
   follows the words. The title is sized so that "with room in it" keeps one line beside the wheel. */
@media (min-width: 34rem) and (max-width: 43.99rem) {
  .page--join .join-hero { --gear: clamp(10.5rem, 31vw, 13rem); }
  .page--join .join-hero__inner { grid-template-columns: minmax(0, 1fr) var(--gear); column-gap: clamp(1rem, 3.5vw, 1.75rem); }
  .page--join .join-hero .lockup--hero { --lockup-fs: calc(clamp(1.875rem, 6.1vw, 2.5rem) * var(--display-scale)); }
  .page--join .join-hero__words > .lead { font-size: 1.125rem; }
  .page--join .join-hero__actions > .btn { --btn-h: 3rem; --pad: 1.125rem; font-size: 1.0625rem; }
  /* The chip and the caption are wider than this small wheel: each keeps one line and runs out to the start
     side, into the room beside the words, rather than break after "the" or before the dot. The figure's one
     column is the wheel's width whatever the caption holds (an automatic column would grow to the caption,
     and the wheel with it). */
  .page--join .join-hero .join-gears { justify-self: end; grid-template-columns: minmax(0, 1fr); }
  /* The second gear comes in from above here, not from below: the same mesh, mirrored (a tooth of the first
     points 30 degrees above level as well as below). Below, it lay over the end of the caption. */
  .page--join .join-hero .join-gears__mesh { inset-block-start: -43.4%; }
  .page--join .join-hero .join-gears__float { inset-inline-start: auto; inset-inline-end: -3%; inset-block-end: -7%; inline-size: max-content; }
  .page--join .join-hero .join-gears > figcaption { justify-self: end; inline-size: max-content; max-inline-size: calc(var(--gear) * 1.5); margin-block-start: .75rem; text-align: end; }
}
@media (min-width: 44rem) {
  /* The wheel stops growing at 24rem: the photograph inside it is 1440 pixels wide at its best and is shown
     close (three faces fill the round), and a larger circle would show it soft on a sharp screen. */
  .page--join .join-hero { --gear: clamp(15rem, 36vw, 24rem); }
  .page--join .join-hero__inner { grid-template-columns: minmax(0, 1fr) var(--gear); }
  .page--join .join-hero .lockup--hero { --lockup-fs: calc(clamp(2.375rem, .59rem + 4.35vw, 4.5rem) * var(--display-scale)); }
}
@media (min-width: 44rem) and (max-width: 63.99rem) {
  .page--join .join-hero__actions > .btn { --pad: 1.375rem; }      /* the two actions stay side by side beside the wheel */
}

/* The gears. The wheel's tips reach 112 of the 120 units from the centre of its box, so a wheel's radius is
   0.4667 of the box. Two equal gears mesh with their centres 1.86 radii apart (tip plus root, and a hair of
   air): here along a line 30 degrees below level, where a tooth of the first points, so the second is turned
   half a tooth (7.5 degrees) and a gap meets it. That is 75.17% across and 43.4% down, in boxes. */
.page--join .join-gears { position: relative; inline-size: var(--gear); gap: .875rem; }
.page--join .join-gears__stage { position: relative; inline-size: 100%; aspect-ratio: 1; }
.page--join .join-gears__photo { position: absolute; inset: 0; }
/* The photograph is a disc that reaches a little way under the rim (the rim's inner edge is 0.761 of the
   radius, the disc 0.8), so no ground shows between them even while the picture leans to the pointer. */
.page--join .join-gears .join-gears__disc { position: absolute; inset: 12.67%; aspect-ratio: auto; border-radius: 50%; }
/* The photograph in the wheel. It is a row of ten people, and a circle laid over the middle of it cut through
   the faces at its edge. So the picture is set larger inside the disc and placed by hand: the round holds
   three faces, whole, and the rim passes between people (between the fourth and fifth from the left, and
   between the seventh and the two beside her), through nobody's face.
   In the photograph's own pixels (1440 by 720) what shows is a circle of radius 230 about the point 698, 450;
   the rim's inner edge is 0.951 of the disc's radius, so one pixel is 0.20674% of the disc. That gives the
   picture's size (1440 and 720 of them) and where its corner stands (698 and 450 back from the middle).
   Nothing here is a transform, so the lean to the pointer and the camera are untouched. The sizes in
   join.html say how wide the picture is drawn (2.22 wheel-boxes): change both together. */
.page--join .join-gears .join-gears__disc > picture { inset: -43.03% auto auto -94.3%; inline-size: 297.7%; block-size: 148.85%; max-inline-size: none; }
.page--join .join-gears__rim,
.page--join .join-gears__mesh { display: block; color: var(--wheel-colour); pointer-events: none; }
.page--join .join-gears__rim { position: absolute; inset: 0; }
.page--join .join-gears__mesh { position: absolute; inset-block-start: 43.4%; inset-inline-start: 75.17%; inline-size: 100%; block-size: 100%; rotate: 7.5deg; }
.page--join .join-gears :is(.join-gears__rim, .join-gears__mesh) span { display: block; inline-size: 100%; block-size: 100%; }
.page--join .join-gears :is(.join-gears__rim, .join-gears__mesh) .wheel { inline-size: 100%; block-size: 100%; }
/* The chip floats on the wheel's lower edge. */
.page--join .join-gears__float { position: absolute; inset-inline-start: 0; inset-block-end: 3%; z-index: 2; }
.page--join .join-gears__chip { max-inline-size: none; box-shadow: var(--shadow-float); }
.page--join .join-gears > figcaption { max-inline-size: 80%; }
@media (min-width: 44rem) {
  .page--join .join-gears__float { inset-inline-start: -9%; }
}

/* A caption under a round photograph keeps one line where it can: the frame may be narrower than its words
   (in the wine panel "September 2021 · / Food recovery" left the dot hanging at the end of a line). */
.page--join .figure--cog { grid-template-columns: minmax(0, 1fr); }      /* the frame keeps its width whatever the caption holds */
.page--join .figure--cog > figcaption { justify-self: center; inline-size: max-content; max-inline-size: min(22rem, calc(100vw - 2 * var(--gutter) - 2rem)); text-wrap: balance; }

/* ───────────────────────────── 2 Who can join ──
   White. The members in a wide photograph, and four lines as rows in a sand panel, each ticked with the keyway.
   The photograph is a group in a row, so its frame is wide and shows every one of them; the frame's one toothed
   edge is its foot: the caption stands on a sand strip, and the strip's own colour stands up into the photograph
   as a row of teeth (the seam between two sections, in small).
     under 64rem   the heading, the photograph, the panel: the caption's strip runs straight on into the panel,
                   so photograph and list are one piece
     from 64rem    the heading and the photograph on the start side, the panel beside them */
.page--join .join-who__grid {
  --who-gap: clamp(1.75rem, 1.25rem + 2.4vw, 3.5rem);
  --who-pad: clamp(.875rem, .6rem + 1.4vw, 1.75rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "photo" "panel";
  gap: var(--who-gap);
  align-items: center;
}
.page--join .join-who__head { grid-area: head; }
.page--join .join-who__panel { grid-area: panel; padding: var(--who-pad); }
.page--join .join-who__photo { grid-area: photo; gap: 0; }
.page--join .join-who .join-who__frame { --ar: 16 / 9; inline-size: 100%; border-radius: var(--r-panel) var(--r-panel) 0 0; }
.page--join .join-who__frame img { object-position: 50% 15%; }   /* a band keeps the balloons and every face: what it leaves out is the floor */
.page--join .join-who__photo > figcaption {
  --tooth: clamp(.625rem, .5rem + .6vw, .9375rem);
  position: relative;
  z-index: 1;                                          /* over the photograph while it leans */
  max-inline-size: none;
  padding: .5rem calc(var(--who-pad) + .375rem) .625rem;
  border-radius: 0 0 var(--r-card) var(--r-card);
  background: var(--row-hover);
  color: var(--fg-muted);
}
.page--join .join-who__photo > figcaption::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: calc(100% - 1px);
  block-size: var(--tooth);
  background: var(--row-hover);
  -webkit-mask: var(--teeth-mask) 50% 0 / calc(var(--tooth) * var(--teeth-ratio)) 100% repeat-x;
  mask: var(--teeth-mask) 50% 0 / calc(var(--tooth) * var(--teeth-ratio)) 100% repeat-x;
  pointer-events: none;
}
.page--join .join-who__list { display: grid; gap: .625rem; }
.page--join .join-who__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: .875rem 1.25rem .875rem .875rem;
  border-radius: var(--r-card);
  background: var(--row);
  font-size: var(--fs-lead);
  line-height: 1.4;
}
.page--join .join-who__row .keyway { inline-size: 1.25rem; block-size: 1.25rem; }
@media (max-width: 63.99rem) {
  /* One piece: the caption's strip and the panel are the same sand, with nothing between them. */
  .page--join .join-who__photo > figcaption { border-radius: 0; }
  .page--join .join-who__panel { margin-block-start: calc(var(--who-gap) * -1); padding-block-start: .375rem; border-start-start-radius: 0; border-start-end-radius: 0; }
}
@media (min-width: 34rem) and (max-width: 63.99rem) {
  .page--join .join-who .join-who__frame { --ar: 2 / 1; }
}
@media (min-width: 64rem) {
  .page--join .join-who__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head panel" "photo panel"; grid-template-rows: auto 1fr; }
  .page--join .join-who .join-who__frame { --ar: 3 / 2; }
  .page--join .join-who__photo { align-self: start; }
}

/* ───────────────────────────── 3 What to expect ──
   Paper. Four things in panels of four kinds: service days in the large wine panel with members at work;
   the meeting and the say in a pair, plum and amber; the four strands in a sand strip. Where the three
   colour panels meet stands the wheel, on a hub in the ground's own colour. */
.page--join .join-expect__stack { --g: clamp(.75rem, .5rem + 1vw, 1.25rem); display: flex; flex-direction: column; gap: var(--g); }
.page--join .join-expect__words { display: grid; gap: .875rem; justify-items: start; min-inline-size: 0; }
.page--join .join-expect__title { font-size: var(--fs-sub); }
.page--join .join-expect__text { max-inline-size: 30em; color: var(--fg); }

/* The hub lies 2.75rem deep over the foot of this panel and over the heads of the pair: each keeps that room clear. */
.page--join .join-expect__feature { display: grid; gap: clamp(1.5rem, 1rem + 2.4vw, 3.5rem); align-items: center; padding-block-end: calc(2.75rem + clamp(1rem, .5rem + 2vw, 2rem)); }
.page--join .join-expect__feature .join-expect__title { font-size: calc(clamp(1.75rem, 1.35rem + 1.7vw, 2.75rem) * var(--display-scale)); font-weight: var(--fw-display); line-height: var(--lh-display); letter-spacing: var(--tracking-display); }
.page--join .join-expect__feature .join-expect__text { font-size: var(--fs-lead); font-weight: var(--fw-light); line-height: calc(var(--lh-text) - .1); }
.page--join .join-expect__photo { inline-size: min(100%, clamp(15rem, 26vw, 22rem)); justify-self: center; }
.page--join .join-expect__photo > .frame { inline-size: 100%; }
/* Two volunteers crouch to plant a sapling, facing each other. The photograph is half as wide again as the
   frame, so the frame shows a square of it, and which square is chosen here by hand (not by the photograph's
   focal point, which favours one of them): the one with both of them in it. Both heads stand whole inside the
   solid disc of the cog; its teeth pass through leaves, a shoulder and the ground only. */
.page--join .join-expect__photo > .frame img { object-position: 18% 50%; }
.page--join .join-expect__photo > figcaption { color: var(--fg); }
@media (min-width: 44rem) {
  .page--join .join-expect__feature { grid-template-columns: minmax(0, 1fr) minmax(0, clamp(15rem, 26vw, 22rem)); }
}

/* The hub at the meeting point: it takes no room of its own (its height is nothing and it gives back the gap it
   would add), so the three panels keep one even gap and the disc lies over their corners. */
.page--join .join-expect__hub { position: relative; z-index: 2; display: block; block-size: 0; margin-block: calc(var(--g) / -2); pointer-events: none; }
.page--join .join-expect__hub-disc { position: absolute; inset-block-start: 0; inset-inline-start: 50%; display: grid; place-items: center; box-sizing: content-box; inline-size: 4.5rem; block-size: 4.5rem; border: .5rem solid var(--bg); border-radius: 50%; background: var(--white); color: var(--wheel-colour); translate: -50% -50%; }
.page--join .join-expect__hub-disc > span { display: block; inline-size: 64%; block-size: 64%; }
.page--join .join-expect__hub .wheel { inline-size: 100%; block-size: 100%; }

.page--join .join-expect__pair { display: grid; gap: var(--g); }
.page--join .join-expect__card { display: grid; gap: .875rem; align-content: start; justify-items: start; padding-block: calc(2.75rem + clamp(.75rem, .5rem + 1vw, 1.25rem)) 4.25rem; overflow: clip; }
.page--join .join-expect__card > :not(.join-expect__ghost) { position: relative; }
/* A pale wheel at the corner of each of the pair, turning with the scroll: white on the colour, never another hue. */
.page--join .join-expect__ghost { position: absolute; inset-inline-end: -3.75rem; inset-block-end: -3.75rem; display: block; inline-size: 10.5rem; block-size: 10.5rem; color: var(--wheel-colour); opacity: .2; pointer-events: none; }
.page--join .join-expect__ghost > span { display: block; inline-size: 100%; block-size: 100%; }
.page--join .join-expect__ghost .wheel { inline-size: 100%; block-size: 100%; }
@media (min-width: 44rem) {
  .page--join .join-expect__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.page--join .join-expect__strands { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: center; }
.page--join .join-strands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem .75rem; }
.page--join .join-strands__item { display: grid; justify-items: center; align-content: start; gap: .625rem; font-weight: var(--fw-strong); line-height: var(--lh-ui); text-align: center; }
@media (min-width: 36rem) {
  .page--join .join-strands { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .page--join .join-expect__strands { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* ───────────────────────────── 4 Find your spoke ──
   White. The six areas stand above the quiz in their own colours; the quiz is in a sand panel, where the
   logo's wheel keeps its cranberry. When the wheel settles, the result takes the colour of the area it gives:
   the colour comes in from the wheel's hub (join.js sets data-area on the result, where the hub is, how far
   the colour has to reach and, when it has arrived, the ground itself). */
.page--join .join-spoke__head { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: end; }
.page--join .join-spoke__words { display: grid; gap: var(--space-s); justify-items: start; min-inline-size: 0; }
.page--join .join-spoke__six { display: grid; gap: var(--space-s); min-inline-size: 0; }
.page--join .join-spoke__count { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .875rem; max-inline-size: none; }
.page--join .join-spoke__areas { display: flex; flex-wrap: wrap; gap: .5rem; }
.page--join .join-spoke__area { --chip: var(--area-tint); --chip-on: var(--area); --chip-on-fg: var(--on-area); transition: background-color var(--dur-3) ease, color var(--dur-3) ease; }
@media (min-width: 64rem) {
  .page--join .join-spoke__head { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
}

.page--join .join-spoke__panel {
  margin-block-start: clamp(1.75rem, 1.25rem + 2vw, 3rem);
  padding: clamp(1.25rem, .5rem + 2.2vw, 3rem);
}
/* The quiz itself is the set piece's (wheel.css). Here only its room: two sides from 44rem, so that the wheel
   and a whole question share one screen in a short window, and a smaller wheel on a phone for the same reason. */
.page--join .join-spoke .wheel-quiz { gap: clamp(1.5rem, 1rem + 3vw, 4rem); }
.page--join .join-spoke .wheel-quiz .wheel-prop { --wheel-size: clamp(11rem, 4.5rem + 27vw, 24rem); }
@media (min-width: 44rem) {
  .page--join .join-spoke .wheel-quiz { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
/* A narrow pane (588 by 612): the wheel already stands beside the questions, smaller, so that it is in sight
   while an answer turns it, and a whole question fits one screen (under it the wheel had left the screen by
   the time the last answers came into view). */
@media (min-width: 34rem) and (max-width: 43.99rem) {
  .page--join .join-spoke .wheel-quiz { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1.25rem; }
  .page--join .join-spoke .wheel-quiz legend { font-size: 1.375rem; }
}
@media (max-width: 63.99rem) {
  .page--join .join-spoke .wheel-quiz__nav { flex-wrap: wrap; gap: .75rem; }
  .page--join .join-spoke .wheel-quiz__nav > [data-quiz-count] { order: -1; flex: 1 1 100%; }
}
@media (max-width: 43.99rem) {
  /* A phone, a narrow pane: "Previous question" and "Next question" do not fit side by side there, and as two
     equal halves each label broke into two lines. Each keeps one line; where the two do not fit in a row the
     row wraps upward, so "Next question" (the way on) stands above "Previous question" and the count above both. */
  .page--join .join-spoke .wheel-quiz__nav { flex-wrap: wrap-reverse; }
  .page--join .join-spoke .wheel-quiz__nav > [data-quiz-count] { order: 3; }
  .page--join .join-spoke .wheel-quiz__nav > :is(button, .btn) { flex: 1 1 auto; white-space: nowrap; }
}
/* A button of the quiz that cannot be used yet (no answer chosen; no question before the first) is a quiet
   pale pill with soft words. The engine dims it instead, and a dimmed cranberry on sand is a pink button. */
.page--join .join-spoke .wheel-quiz__nav .btn:is([disabled], [aria-disabled="true"]) { opacity: 1; border-color: transparent; background: var(--row); color: var(--fg-muted); }
/* An answer of two lines is one label: its lines stand close, and a whole question with its four answers,
   the count and the two buttons fits the pane (619 high) in one screen. */
.page--join .join-spoke .wheel-quiz label { line-height: 1.35; }
/* Without scripts all six outcomes are listed: each a plain row, its medallion in its area's colour. */
.page--join .join-spoke .wheel-quiz:not(.is-enhanced) [data-quiz-area] { background: var(--row); }

/* The result, once join.js has made it a panel of its area (bright.css gives the tone: white words on a deep
   area, ink on a warm one; the buttons follow). Its ground is --join-ground; the new colour is a circle that
   grows from the hub over the old ground, under the words. */
.page--join .join-spoke [data-quiz-result].b-panel {
  --panel: var(--join-ground, transparent);
  padding: clamp(1.125rem, .9rem + 1.2vw, 1.75rem);
  border-radius: var(--r-card);
  overflow: clip;
  isolation: isolate;
}
.page--join .join-spoke [data-quiz-result].b-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--area, transparent);
  clip-path: circle(0 at var(--join-hub-x, 0%) var(--join-hub-y, 50%));
  pointer-events: none;
}
.page--join .join-spoke [data-quiz-result].b-panel.is-flooding::before { animation: join-flood var(--dur-4) var(--ease-out) both; }
@keyframes join-flood {
  from { clip-path: circle(0 at var(--join-hub-x, 0%) var(--join-hub-y, 50%)); }
  to { clip-path: circle(var(--join-reach, 150%) at var(--join-hub-x, 0%) var(--join-hub-y, 50%)); }
}
@media (prefers-reduced-motion: reduce) {
  .page--join .join-spoke [data-quiz-result].b-panel.is-flooding::before { animation: none; }
}
.page--join .join-spoke [data-quiz-result].b-panel .wheel-quiz__note { color: var(--fg-muted); }
@media (max-width: 63.99rem) {
  /* A narrow column: the area's words take the whole width of their row, under its sign and its name. */
  .page--join .join-spoke [data-quiz-result].b-panel { padding: clamp(.75rem, .5rem + 1.2vw, 1.25rem); }
  .page--join .join-spoke [data-quiz-result] [data-quiz-area] > span:last-child { grid-column: 1 / -1; margin-block-start: .5rem; }
  .page--join .join-spoke [data-quiz-result] .wheel-quiz__area { align-self: center; }
}

/* ───────────────────────────── 5 The form ──
   Sand, and on it one white panel: .join-form__main (the heading, the form and its wheel) and, under it, what
   happens next. .join-form__main is the box the wheel stays inside, in every browser: Safari keeps a sticky
   part of a grid inside the whole grid, not inside its own cell, so the wheel has a grid of its own that ends
   where the form ends (it used to lie over "what happens next").
     a phone (under 34rem)   the heading, the form with a small floating meter over its end side, the note
     a pane (34 to 46rem)    the same, but the wheel has a lane of its own beside the fields
     wide (from 46rem)       the form on the start side; on the end side the wheel and the note, which stay in
                             view while the fields go by */
.page--join .join-form__panel { --meter: 2.75rem; padding: clamp(1.25rem, .75rem + 2.6vw, 3.5rem); }
/* Where the header's Join button lands: a place, not a control. The focus shows as a soft ring just inside it. */
.page--join .join-form__panel:focus-visible { outline: 3px solid var(--rule); outline-offset: -3px; }
.page--join .join-form__main { display: grid; grid-template-columns: minmax(0, 1fr); }
.page--join .join-form__head { grid-area: 1 / 1; display: grid; gap: var(--space-s); justify-items: start; margin-block-end: var(--space-l); }
.page--join .join-form__fields { grid-area: 2 / 1; min-inline-size: 0; }   /* every part names its cell: the meter is laid over this one, and an unnamed part would step aside into a cell of its own */
.page--join .join-form__fields .field__label { text-wrap: balance; }      /* a long label parts into two even lines, never one word alone */
.page--join .join-form__fields .form__preview { text-wrap: balance; }                                   /* the form's own note that nothing is sent: two even lines, never two words alone */
.page--join .join-form__quiz { display: flex; align-items: baseline; gap: .6em; max-inline-size: none; margin-block-start: calc(var(--space-m) * -.4); color: var(--fg); font-size: 1rem; line-height: 1.5; }
.page--join .join-form__quiz > .window-mark { rotate: 180deg; }   /* it points up, at the areas above it */

/* The meter on a phone: a small white disc that floats at the form's end side. It starts beside the first label,
   keeps under the header while the fields go by beneath it (the top of the screen is the part an on-screen
   keyboard never covers), and leaves with the foot of the form. So the wheel is never out of sight. The ring
   round it fills with each completed field (join.js); the wheel inside gains its teeth, lights when all are
   done and turns when the form is sent. It is laid over the form's own cell and never takes a tap. */
.page--join .join-form__side { display: contents; }
.page--join .join-form__meter {
  grid-area: 2 / 1;
  justify-self: end;
  align-self: start;
  position: sticky;
  inset-block-start: calc(var(--bar-top) + .625rem);
  z-index: 3;
  display: grid;
  place-items: center;
  inline-size: var(--meter);
  block-size: var(--meter);
  margin-block-start: -.75rem;                        /* beside the first label, not over the first field */
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--shadow-float);
  pointer-events: none;
}
.page--join .join-form__meter > * { grid-area: 1 / 1; }
.page--join .join-form__ring { --ring-size: var(--meter); }
.page--join .join-form__meter .wheel-form { --wheel-size: calc(var(--meter) * .62); inline-size: calc(var(--meter) * .62); }

.page--join .join-form__notes { grid-area: 3 / 1; display: grid; gap: .5rem; margin-block-start: var(--space-l); }
.page--join .join-form__notes > li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .625rem; color: var(--fg-muted); font-size: 1rem; line-height: 1.5; }
.page--join .join-form__notes .icon { inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: .125rem; color: var(--cranberry-lit); }

@media (max-width: 33.99rem) {
  /* The meter's lane. Whatever is read or chosen (labels, hints, chips, the tick and its sentence, what the form
     says back) keeps clear of the meter's side, so the meter never lies on a word or on the end of a chip.
     The fields themselves run the whole width and pass under it as they go by. */
  .page--join .join-form__fields :is(.field__label, .field__hint, .field__error, .chips, .check, .form__pics, .form__preview, .form__note, .form__noscript, .form__status, .join-form__quiz),
  .page--join .join-form__notes { padding-inline-end: calc(var(--meter) + .5rem); }
  /* A field that takes the focus comes to rest below the meter, not under it. */
  .page--join .join-form__fields :is(.field__input, .chip > input, .check__input) { scroll-margin-block-start: calc(var(--meter) + 2.5rem); }
}

/* A narrow pane: the wheel stands in a lane of its own beside the fields and keeps under the header while they
   go by. Nothing is laid over anything. */
@media (min-width: 34rem) and (max-width: 45.99rem) {
  .page--join .join-form__panel { --meter: 5.5rem; }
  .page--join .join-form__main { grid-template-columns: minmax(0, 1fr) var(--meter); column-gap: clamp(1rem, 4vw, 2rem); }
  .page--join .join-form__head { grid-area: 1 / 1 / auto / -1; }
  .page--join .join-form__meter { grid-area: 2 / 2; justify-self: center; inset-block-start: calc(var(--bar-top) + 1.25rem); margin-block-start: .375rem; box-shadow: none; }
  .page--join .join-form__meter .wheel-form { --wheel-size: calc(var(--meter) * .76); inline-size: calc(var(--meter) * .76); }
}

/* What happens next: three steps, in order, each with its number on a hub. */
.page--join .join-next { display: grid; gap: var(--space-s); margin-block-start: var(--space-xl); }
.page--join .join-next__title { font-size: var(--fs-sub); }
.page--join .join-next__steps { display: grid; gap: .5rem; }
.page--join .join-next__step { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .875rem; padding: .625rem 1.125rem .625rem .625rem; border-radius: var(--r-card); background: var(--row-hover); line-height: 1.45; }   /* the stronger of the panel's two row colours: on white, paper alone is hardly there */
.page--join .join-next__step > .b-medallion { font-weight: var(--fw-strong); font-variant-numeric: tabular-nums lining-nums; line-height: 1; }

@media (min-width: 46rem) {
  .page--join .join-form__panel { --meter: clamp(8.5rem, 4.5rem + 9vw, 12rem); }
  .page--join .join-form__main {
    grid-template-columns: minmax(0, 1fr) clamp(11rem, 27%, 19rem);
    grid-template-rows: auto auto;
    column-gap: clamp(1.5rem, .5rem + 3.6vw, 4.5rem);
  }
  .page--join .join-form__side {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    position: sticky;
    inset-block-start: calc(var(--bar-top) + 1.25rem);
    display: grid;
    gap: var(--space-m);
    justify-items: center;
  }
  .page--join .join-form__meter,
  .page--join .join-form__notes { grid-area: auto; margin-block-start: 0; }
  .page--join .join-form__meter { position: relative; inset-block-start: auto; justify-self: center; align-self: auto; box-shadow: none; pointer-events: auto; }
  .page--join .join-form__meter .wheel-form { --wheel-size: calc(var(--meter) * .76); inline-size: calc(var(--meter) * .76); }
}
@media (min-width: 64rem) {
  .page--join .join-form__main { grid-template-columns: minmax(0, 38rem) minmax(15rem, 1fr); }
  .page--join .join-form__notes { inline-size: min(100%, 19rem); }
  .page--join .join-next__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
  .page--join .join-next__step { align-items: start; padding: 1rem 1.25rem 1.125rem 1rem; }
}

/* ───────────────────────────── 6 Where it can lead ──
   White, and on it a wine panel. Along its foot a cog on a rack. */
.page--join .join-lead__panel { display: grid; gap: clamp(2rem, 1.5rem + 2.4vw, 3.5rem); overflow: clip; }
.page--join .join-lead__words { display: grid; gap: 1.5rem 3rem; align-items: start; }
.page--join .join-lead__head { display: grid; gap: var(--space-s); justify-items: start; }
.page--join .join-lead__body { max-inline-size: 32em; font-size: var(--fs-lead); font-weight: var(--fw-light); line-height: calc(var(--lh-text) - .05); }
@media (min-width: 72rem) {
  .page--join .join-lead__words { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: clamp(3rem, 6vw, 6rem); }
}
/* A cog on a rack. The rack is the wheel's rim straightened (the seam's own tile), cut to this cog's
   scale: the drawing's box is 240 units, a tile is 24.803 wide and 21.938 high, and the cog's lowest
   tooth reaches the rack's root line. join.js rolls it: 15 degrees for every tile it passes. */
.page--join .join-track { --cog: clamp(4.5rem, 3.2rem + 5.4vw, 7.5rem); position: relative; block-size: var(--cog); }
.page--join .join-track__cog { position: absolute; inset-block-start: 0; inset-inline-start: 0; display: block; inline-size: var(--cog); block-size: var(--cog); color: var(--wheel-colour); }
.page--join .join-track__cog > .wheel { inline-size: 100%; block-size: 100%; }
.page--join .join-track__rack {
  position: absolute;
  inset-inline: 0;
  inset-block-end: calc(var(--cog) * .016667);
  block-size: calc(var(--cog) * .091408);
  background: var(--line-strong);
  -webkit-mask: var(--teeth-mask) calc(var(--cog) / 2) 0 / calc(var(--cog) * .103346) 100% repeat-x;
  mask: var(--teeth-mask) calc(var(--cog) / 2) 0 / calc(var(--cog) * .103346) 100% repeat-x;
}

/* ───────────────────────────── 7 Questions ── */
.page--join .join-faq__inner { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
.page--join .join-faq__head { display: grid; gap: var(--space-s); justify-items: start; }
@media (min-width: 56rem) {
  .page--join .join-faq__inner { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
  .page--join .join-faq__head { position: sticky; inset-block-start: calc(var(--bar-top) + 2rem); }
}

/* ───────────────────────────── 8 The closing call ──
   Aubergine (the token named magenta), with the deep tone: the page's one deep band, before the wine footer.
   The six areas run along its head; a white wheel at the end side, most of it out of frame; the scroll turns it. */
.page--join .join-close { --bg: var(--magenta); padding-block-start: clamp(1.5rem, 1rem + 2vw, 3rem); }
.page--join .join-close__ticker { position: relative; margin-block-end: clamp(2.5rem, 2rem + 3vw, 5rem); opacity: .92; }
.page--join .join-close__inner { position: relative; display: grid; gap: var(--space-m); justify-items: start; }
.page--join .join-close__inner > .lead { max-inline-size: 30em; }
.page--join .join-close__inner > .cluster { margin-block-start: var(--space-xs); }
.page--join .join-close__wheel { position: absolute; inset: 0; overflow: clip; pointer-events: none; }
.page--join .join-close__wheel > span { --d: clamp(16rem, 8rem + 34vw, 36rem); position: absolute; inset-block-start: 50%; inset-inline-end: clamp(-9rem, -12vw, -4rem); display: block; inline-size: var(--d); block-size: var(--d); margin-block-start: calc(var(--d) / -2); color: var(--wheel-colour); opacity: .2; }
.page--join .join-close__wheel .wheel { inline-size: 100%; block-size: 100%; }
@media (max-width: 55.99rem) {
  .page--join .join-close__wheel > span { inset-block-start: auto; inset-block-end: -7rem; margin-block-start: 0; opacity: .16; }
}