/* ═══════════════════════════════════════════════════════════════════════════
   Rotaract Club of Hong Kong Island East · pages/home.css
   THE BRIGHT HOME PAGE (DIRECTION-BRIGHT 5). Owner: the home builder.
   Everything is scoped to .page--home.

   Colour: tokens and tones only (bright.css). No colour value is written here, and no text colour is
   chosen here for a colour panel: type, rows, buttons and wheels on a panel read the tone that panel
   sets (--fg, --heading, --row, --btn-*, --wheel-colour), so when a token's value changes, or an area's
   colour flips between light and deep, this page follows by itself. Cranberry is the accent.
   Motion: transform, opacity and clip-path; nothing here hides content unless scripts run and motion
   is allowed.

   1 hero and ticker · 2 who we are · 3 six areas · 4 back once again · 5 coming soon
   6 our numbers · 7 photographs · 8 our Rotary family · 9 three doors · 10 the closing call
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────── shared bits ── */
.page--home { --home-ease: var(--ease-out); }
/* Section titles may be larger on the bright site (size, never weight). */
.page--home .lockup--section { --lockup-fs: calc(clamp(2.125rem, 1.5rem + 2.6vw, 3.625rem) * var(--display-scale)); }
.page--home .section__head { margin-block-end: clamp(2rem, 1.4rem + 2.6vw, 3.75rem); }
/* A button or a link that carries an icon beside its words. */
.page--home .home-ico .icon,
.page--home .home-go .icon { inline-size: 1.25rem; block-size: 1.25rem; }
.page--home .home-go .icon { transition: transform var(--dur-3) var(--home-ease); }
@media (hover: hover) and (pointer: fine) {
  .page--home .home-go:hover .icon { transform: translateX(.25rem); }
}
/* A caption with one tooth before it. */
.page--home .home-cap { display: flex; align-items: baseline; gap: .6em; }
.page--home .home-cap > .tooth { translate: 0 .05em; }
/* A large wheel at low strength behind the words of a colour panel: it takes the wheel colour of the tone. */
.page--home .home-ghost { position: absolute; color: var(--wheel-colour); opacity: .16; pointer-events: none; transition: transform var(--dur-6) var(--home-ease); }

/* ═════════════════════════════════════════════════════════════ 1 · HERO ══
   The layout of the club's own logo: the wheel first, the words beside it. The machine is one square
   (a container): the wheel is about 71% of it, each satellite about 13%, and the orbit lies just
   outside the teeth. On a phone the machine sits above the words, smaller. The first screen is
   complete at 800×619, 588×612, 1440×900 and 390×844: the machine is never taller than the room
   the screen has left.
   The headline is as large as its column lets it be: the words are a container, and the size is the
   smallest of --hero-fs (what the screen's width allows), --hero-fit (what the column allows: the
   longest line then takes about 96% of it, in English; Chinese is given room for a seventh character)
   and a share of the screen's height. So the wheel can grow without ever folding the headline. */
.page--home .home-hero {
  --ticker-h: clamp(3.25rem, 1.45rem + 4.5vw, 5.5rem);
  --machine: clamp(12.5rem, 100svh - var(--header-h) - 34rem, min(72vw, 19.5rem));
  --hero-fs: clamp(2.5rem, 12.2vw, 3.375rem);
  --hero-fit: 13.4cqi;
  display: flex;
  flex-direction: column;
  min-block-size: 100svh;                           /* a phone: the first screen, whole, the ticker at its foot */
  padding-block-start: var(--clear-top, 0px);
}
.page--home:lang(zh) .home-hero { --hero-fs: clamp(2.5rem, 14.2vw, 3.875rem); --hero-fit: 14cqi; }
.page--home .home-hero__grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "machine" "words";
  justify-items: center;
  align-content: center;
  gap: clamp(.75rem, 2.4svh, 1.5rem);
  padding-block: clamp(1rem, 3svh, 2.25rem) clamp(1.5rem, 4svh, 3rem);
}
/* The machine and the orbit are two squares in one place: the wheel takes the hand, the orbit lies over it. */
.page--home .home-machine,
.page--home .home-orbit {
  --sat: 13cqi;
  --tip: 33.2cqi;                                   /* the wheel's tip radius: 50 − gap − 1.14 × satellite */
  --orbit: calc(var(--tip) + 2cqi + var(--sat) / 2);
  grid-area: machine;
  position: relative;
  inline-size: var(--machine);
  aspect-ratio: 1;
  container-type: inline-size;
}
.page--home .home-machine > .wheel-prop {
  --wheel-size: 100%;
  position: absolute;
  inset: 0;
  inline-size: calc(var(--tip) * 2.1429);           /* the stage: the tip radius is 112 of its 120 */
  block-size: calc(var(--tip) * 2.1429);
  margin: auto;
}
/* The page names the areas itself (the satellites, the chip, part 3): the wheel's own list and its
   pointer are not shown here. They still name its windows for the keyboard and for a screen reader. */
.page--home .home-machine .wheel-prop__label,
.page--home .home-machine .wheel-prop__index { display: none; }
/* A plate under the wheel: the orbit runs along its edge. */
.page--home .home-machine__plate {
  position: absolute;
  inset: calc(50cqi - var(--orbit));
  border-radius: 50%;
  background: var(--row);
}
.page--home .home-orbit { z-index: 2; margin: 0; padding: 0; list-style: none; pointer-events: none; }   /* the wheel underneath takes the hand */
/* A satellite: carried round the centre by the wheel's own angle (--a, from home.js) to its seat, the
   angle of its window, and turned back by as much, so it stays upright. */
.page--home .home-sat {
  --hit: max(var(--sat), 2.75rem);                  /* never a smaller target than 44px */
  --at: calc(var(--seat, 0deg) + var(--a, 0deg));
  position: absolute;
  inset-block-start: calc(50% - var(--hit) / 2);
  inset-inline-start: calc(50% - var(--hit) / 2);
  inline-size: var(--hit);
  block-size: var(--hit);
  transform: rotate(var(--at)) translateY(calc(var(--orbit) * -1)) rotate(calc(var(--at) * -1));
  pointer-events: auto;
}
.page--home .home-sat__link { display: grid; place-items: center; inline-size: 100%; block-size: 100%; border-radius: 50%; text-decoration: none; }
.page--home .home-sat__disc { --m: var(--sat); transition: transform var(--dur-4) var(--home-ease); }
.page--home .home-sat.is-chosen .home-sat__disc { transform: scale(1.28); }
@media (hover: hover) and (pointer: fine) {
  .page--home .home-sat__link:hover .home-sat__disc { transform: scale(1.14); }
  .page--home .home-sat.is-chosen .home-sat__link:hover .home-sat__disc { transform: scale(1.28); }
}
.page--home .home-hero.is-machine-live .home-sat { will-change: transform; }

/* The words: the tagline very large in two tones, the club's name as the light line of the same h1. */
.page--home .home-hero__words { grid-area: words; display: grid; justify-items: start; inline-size: 100%; min-inline-size: 0; container-type: inline-size; }
.page--home .home-hero__title {
  margin: 0;
  font-size: calc(min(var(--hero-fs), var(--hero-fit), max(2.25rem, 32.5svh - 8.2rem)) * var(--display-scale) * var(--hero-name-scale, 1));   /* the last: what a short, wide window has room for */
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.page--home .home-hero__tag { display: block; }
/* The headline is the club's name (Michael, 9 Oct 2026). In English its second line is half as long again as the old tagline's, so the type steps down to keep each half on one line. */
html[data-lang="en"] .page--home .home-hero__title { --hero-name-scale: .72; }
html[data-lang="en"] .page--home .home-hero__t1, html[data-lang="en"] .page--home .home-hero__t2 { white-space: nowrap; }
html[data-lang="en"] .page--home .home-hero__name { font-size: clamp(1.25rem, .5em, 2.5rem); }
.page--home .home-hero__t1 { color: var(--heading); }
.page--home .home-hero__t2 { display: block; color: var(--cranberry); }
.page--home .home-hero__name {
  display: block;
  margin-block-start: .45em;
  font-size: clamp(1.1875rem, .385em, 2.25rem);     /* a hair narrower than the headline's first line, so it is never the line that folds */
  font-weight: var(--fw-light);
  line-height: 1.25;
  letter-spacing: var(--tracking-light);
  color: var(--heading);
  text-wrap: balance;
}
.page--home .home-hero__lead { max-inline-size: 30em; margin-block-start: clamp(.6rem, 1.4svh, 1.1rem); color: var(--fg-muted); font-size: clamp(1.0625rem, .9rem + .5vw, 1.3125rem); line-height: 1.5; }
.page--home .home-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-block-start: clamp(1rem, 2.6svh, 1.75rem); }
.page--home .home-hero__actions .btn--lg { --btn-h: 3.25rem; --pad: 1.375rem; font-size: 1.0625rem; }
.page--home .home-hero__chip { margin-block-start: clamp(.75rem, 1.8svh, 1.25rem); }
.page--home .home-chip { --chip: var(--row); border: 0; font-family: var(--font-text); font-size: 1rem; cursor: pointer; transition: transform var(--dur-3) var(--home-ease); }
.page--home .home-chip > .icon { inline-size: 1.125rem; block-size: 1.125rem; color: var(--cranberry-lit); }
.page--home .home-chip .b-medallion .icon { inline-size: 56%; block-size: 56%; }
@media (hover: hover) and (pointer: fine) {
  .page--home .home-chip:hover { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: no-preference) {
  .page--home .home-hero__chip:not([hidden]) { animation: home-fade .9s var(--home-ease) both; }
}
@keyframes home-fade { from { opacity: 0; } to { opacity: 1; } }

/* Side by side from the width of a small pane. */
@media (min-width: 34rem) {
  .page--home .home-hero {
    --machine: clamp(13rem, min(40vw, 100svh - var(--header-h) - var(--ticker-h) - 4.5rem), 36rem);
    --hero-fs: clamp(2.25rem, 7vw, 6.25rem);
    /* The first screen, whole (the ticker at its foot), up to a height that follows the width: the wheel is a share
       of the width, so on a window much taller than that the hero stays close round it and the next part shows. */
    min-block-size: min(100svh, clamp(38.75rem, 24.8rem + 28.1vw, 50rem));
  }
  .page--home:lang(zh) .home-hero { --hero-fs: clamp(2.25rem, 7.3vw, 6.5rem); }
  .page--home .home-hero__grid {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "machine words";
    justify-items: start;
    align-items: center;
    column-gap: clamp(1.25rem, 3.4vw, 3.25rem);
  }
}
/* A wide screen is also a tall one: the words open out (a larger lead, more room between the groups, taller
   buttons) until they stand about as tall as the wheel, so no band of bare ground is left under them. */
@media (min-width: 64rem) {
  .page--home .home-hero__lead { margin-block-start: clamp(.75rem, 2.2svh, 1.5rem); font-size: clamp(1.25rem, .55rem + 1.05vw, 1.5rem); }
  .page--home .home-hero__actions { margin-block-start: clamp(1.25rem, 4.4svh, 2.75rem); }
  .page--home .home-hero__actions .btn--lg { --btn-h: 3.75rem; --pad: 1.875rem; font-size: 1.125rem; }
  .page--home .home-hero__chip { margin-block-start: clamp(1rem, 2.8svh, 1.75rem); }
}

/* The ticker of the record: a wine band at the foot of the first screen (a deep field, so the wheel and
   the buttons above it stay the only cranberry there), with a fixed tag at its start. The line itself is
   the shell's ticker (.b-ticker, bright.js): it runs sideways, faster with the scroll; without scripts and
   under reduced motion it is a row to scroll by hand. Its band and its type grow with the screen. */
.page--home .home-ticker { position: relative; display: flex; align-items: center; min-block-size: var(--ticker-h); padding-block-end: calc(var(--seam-h) - .25rem); background: var(--wine); color: var(--fg); }
.page--home .home-ticker > .b-ticker { --ticker-fs: clamp(1.125rem, .72rem + .8vw, 1.4375rem); }
.page--home .home-ticker__lead {
  position: relative;
  z-index: 1;
  flex: none;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding-inline: max(var(--gutter), (100% - var(--container-wide)) / 2) .75rem;
  background: var(--wine);
}
.page--home .home-ticker__tag {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  max-inline-size: none;
  margin: 0;
  padding: .35rem 1rem;
  border-radius: var(--r-full);
  background: var(--btn-bg);                        /* the tone's own button pair: it passes whatever the band is */
  color: var(--btn-fg);
  font-size: 1rem;
  font-weight: var(--fw-strong);
  line-height: var(--lh-ui);
  white-space: nowrap;
}
.page--home .home-ticker__tag > .tooth { background: currentColor; }
.page--home .home-ticker > .b-ticker { flex: 1 1 auto; min-inline-size: 0; }
@media (max-width: 33.99rem) {
  .page--home .home-ticker__lead { padding-inline-end: .25rem; }
}

/* ═══════════════════════════════════════════════════════ 2 · WHO WE ARE ══
   Words at the start side, the four strands as four quarters round a hub at the end side, and one
   wide photograph that runs off the page's edge, its lower edge cut by the ground's own teeth. */
.page--home .home-who__grid { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 4.5rem) clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.page--home .home-who__words { display: grid; gap: clamp(1.25rem, 1rem + 1.2vw, 2.25rem); justify-items: start; min-inline-size: 0; }
.page--home .home-who__statement {
  max-inline-size: 20em;
  font-family: var(--font-display);
  font-size: calc(clamp(1.5rem, 1.22rem + 1.3vw, 2.375rem) * var(--display-scale));
  font-weight: var(--fw-light);
  line-height: calc(var(--lh-display) + .16);
  letter-spacing: var(--tracking-light);
  color: var(--heading);
}
.page--home .home-who__s--heavy { font-weight: var(--fw-display); letter-spacing: var(--tracking-sub); }

.page--home .home-strands { display: grid; gap: 1rem; min-inline-size: 0; }
.page--home .home-strands__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.page--home .home-strand { --big: clamp(2.5rem, 2rem + 3vw, 4.5rem); --card: var(--blush); gap: .6rem; padding: clamp(1.25rem, 1rem + 1.2vw, 2rem); }
.page--home .home-strand > p { color: var(--fg-muted); }
/* Two medallion colours, both deep by the shell's own contract (white passes on each): the accent and wine. */
.page--home .home-strand:nth-child(even) > .b-medallion { --m-bg: var(--wine); }
.page--home .home-strand > .b-medallion { transition: transform var(--dur-5) var(--home-ease); }
@media (hover: hover) and (pointer: fine) {
  .page--home .home-strand:hover > .b-medallion { transform: rotate(60deg) scale(1.06); }
}
.page--home .home-strands__hub { display: none; }
@media (min-width: 30rem) {
  /* Four quarters of one rounded square, and the wheel's hub where they meet. */
  .page--home .home-strands__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
  .page--home .home-strands__grid,
  .page--home .home-strands__hub { grid-row: 2; grid-column: 1; }
  .page--home .home-strand:nth-child(1) { border-start-start-radius: var(--big); }
  .page--home .home-strand:nth-child(2) { border-start-end-radius: var(--big); }
  .page--home .home-strand:nth-child(3) { border-end-start-radius: var(--big); }
  .page--home .home-strand:nth-child(4) { border-end-end-radius: var(--big); }
  .page--home .home-strand:nth-child(-n + 2) { padding-block-end: 3.25rem; }
  .page--home .home-strand:nth-child(n + 3) { padding-block-start: 3.25rem; }
  .page--home .home-strand:nth-child(3) > .b-medallion { --m-bg: var(--wine); }     /* a chequer of the two: accent, wine / wine, accent */
  .page--home .home-strand:nth-child(4) > .b-medallion { --m-bg: var(--cranberry); }
  .page--home .home-strands__hub {
    z-index: 1;
    place-self: center;
    display: grid;
    place-items: center;
    inline-size: clamp(4.75rem, 4rem + 2.4vw, 6rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--bg);
    color: var(--wheel-colour);
    pointer-events: none;
  }
  .page--home .home-strands__wheel { display: block; inline-size: 76%; }
}

.page--home .home-who__photo { gap: .9rem; min-inline-size: 0; }
.page--home .home-who__shot { position: relative; }
.page--home .home-who__frame { --ar: 2 / 1; border-radius: var(--r-panel) var(--r-panel) 0 0; }
.page--home .home-who__rack { position: relative; block-size: 0; }             /* its seam stands up into the photograph, in the ground's colour */
@media (min-width: 56rem) {
  .page--home .home-who__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .page--home .home-who__words { grid-column: 1 / span 6; }
  /* In half the page's width the statement is set a size down, so it stays seven or eight lines, not ten. */
  .page--home .home-who__statement { font-size: calc(clamp(1.5rem, .9rem + 1.05vw, 2rem) * var(--display-scale)); }
  .page--home .home-strands { grid-column: 7 / -1; grid-row: 1 / span 2; position: sticky; inset-block-start: calc(var(--header-h) + 1.5rem); }
  .page--home .home-who__photo {
    --bleed: min(max(var(--gutter), (100vw - var(--container)) / 2), 22rem);
    grid-column: 1 / span 6;
    margin-inline-start: calc(var(--bleed) * -1);
  }
  .page--home .home-who__frame { border-radius: 0 var(--r-panel) 0 0; }
  .page--home .home-who__photo > figcaption { padding-inline-start: var(--bleed); }
}

/* ══════════════════════════════════════════════ 3 · SIX AREAS OF SERVICE ══
   Six colour tiles (each area owns its colour: the tile is a panel with data-area, so it takes that
   colour and its tone) and a stage: the chosen area opens as one large panel in that colour, its
   colour pouring out of its tile. Without scripts the six panels stand one under another and the
   tiles are links down to them.
   --stage-gap is the room between the tiles and the stage, --stage-pad the stage's own padding: the
   photograph's cog frame crests the stage's top edge by a little less than that room, so it never
   reaches a tile or the pointer under the chosen one. */
.page--home .home-areas { --stage-gap: clamp(1.75rem, 1.35rem + 1.7vw, 3rem); --stage-pad: clamp(1.25rem, .9rem + 2.4vw, 3.25rem); }
.page--home .home-areas .lockup__sub { max-inline-size: 44ch; }     /* a long second line: two lines, not three, wherever the page is wide enough */
.page--home .home-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));                 /* two across on a phone: every name has room (three cut "Neighbours") */
  grid-auto-rows: 1fr;                                              /* every row as tall as the one whose name takes two lines */
  gap: clamp(.5rem, .3rem + .9vw, .875rem);
  margin: 0 0 var(--stage-gap);
  padding: 0;
  list-style: none;
}
@media (min-width: 30rem) {
  .page--home .home-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.page--home .home-tiles__item { position: relative; min-inline-size: 0; }
.page--home .home-tile {
  display: grid;
  align-content: space-between;
  gap: .9rem;
  block-size: 100%;
  min-block-size: clamp(6rem, 5rem + 4.4vw, 8.75rem);
  padding: clamp(.75rem, .6rem + .7vw, 1.125rem);
  border-radius: var(--r-card);
  text-decoration: none;
  overflow: clip;
  transition: transform var(--dur-3) var(--home-ease);
}
.page--home .home-tile:focus-visible { outline-color: var(--cranberry-press); }     /* the ring stands on the section's ground, not on the tile */
.page--home .home-tile__mark { position: relative; display: block; inline-size: 2.75rem; block-size: 2.75rem; }
.page--home .home-tile__mark > .b-medallion { --m: 2.75rem; }
.page--home .home-tile__ring { --ring-size: calc(100% + .9rem); position: absolute; inset: -.45rem; opacity: 0; }
.page--home .home-tile__ring .ring__value { stroke: currentColor; stroke-dasharray: 0 100; }
.page--home .home-tile__name { position: relative; font-size: 1.0625rem; font-weight: var(--fw-strong); line-height: 1.2; }
.page--home .home-tile__ghost { inset-block-end: -1.75rem; inset-inline-end: -1.75rem; inline-size: clamp(5rem, 4rem + 3vw, 6.75rem); opacity: .2; transition-duration: var(--dur-5); }
.page--home .home-tile.is-current .home-tile__ghost { transform: rotate(60deg); }
@media (hover: hover) and (pointer: fine) {
  .page--home .home-tile:hover { transform: translateY(-.25rem); }
  .page--home .home-tile:hover .home-tile__ghost { transform: rotate(60deg); }
}
/* The chosen tile stands a little proud, and one window of the wheel points from it down to the stage. */
.page--home .home-areas.is-live .home-tile.is-current { transform: translateY(-.375rem); }
.page--home .home-areas.is-live .home-tiles__item::after {
  content: "";
  position: absolute;
  inset-block-start: calc(100% - .2rem);
  inset-inline-start: calc(50% - .7rem);
  inline-size: 1.4rem;
  block-size: calc(1.4rem / var(--window-ratio, 1.1));
  background: var(--area);
  -webkit-mask: var(--window-mask) center / 100% 100% no-repeat;
  mask: var(--window-mask) center / 100% 100% no-repeat;
  opacity: 0;
  transition: opacity var(--dur-2) ease;
}
.page--home .home-areas.is-live .home-tiles__item.is-current::after { opacity: 1; }
/* The ring of progress while the stage moves on by itself (home.js; never under reduced motion). */
@media (prefers-reduced-motion: no-preference) {
  .page--home .home-areas.is-auto .home-tile.is-current .home-tile__ring { opacity: 1; }
  .page--home .home-areas.is-auto .home-tile.is-current .ring__value { animation: home-ring var(--dwell, 7s) linear both paused; }
  .page--home .home-areas.is-auto.is-running .home-tile.is-current .ring__value { animation-play-state: running; }
}
@keyframes home-ring { from { stroke-dasharray: 0 100; } to { stroke-dasharray: 100 100; } }

.page--home .home-stage { display: grid; gap: clamp(1rem, .8rem + 1vw, 1.5rem); }
.page--home .home-area {
  display: grid;
  gap: clamp(1.25rem, 1rem + 1.4vw, 2.5rem) clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: start;
  padding: var(--stage-pad);
  border-start-end-radius: clamp(3rem, 2rem + 6vw, 7rem);
  isolation: isolate;
}
.page--home .home-area__bg { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: clip; pointer-events: none; }
.page--home .home-area__wheel {
  position: absolute;
  inset-block-end: -32%;
  inset-inline-end: -9%;
  inline-size: min(64%, 40rem);
  color: var(--wheel-colour);
  opacity: .14;
  transform: rotate(var(--turn, 0deg));
  transition: transform 1.1s var(--home-ease);
}
.page--home .home-area__words { display: grid; gap: clamp(.9rem, .8rem + .6vw, 1.4rem); justify-items: start; min-inline-size: 0; }
.page--home .home-area__head { display: flex; align-items: center; gap: clamp(.75rem, .6rem + .8vw, 1.25rem); }
.page--home .home-area__name { margin: 0; font-size: calc(clamp(1.875rem, 1.5rem + 1.9vw, 3.125rem) * var(--display-scale)); font-weight: var(--fw-display); line-height: var(--lh-display); letter-spacing: var(--tracking-display); color: var(--heading); }
.page--home .home-area__line { max-inline-size: 30em; font-size: var(--fs-lead); font-weight: var(--fw-light); line-height: 1.45; }
.page--home .home-area__label { display: inline-flex; align-items: center; gap: .55em; margin-block-start: .25rem; font-weight: var(--fw-strong); line-height: var(--lh-ui); }
.page--home .home-area__record { display: grid; gap: .5rem; inline-size: 100%; max-inline-size: 36rem; margin: 0; padding: 0; list-style: none; }
.page--home .home-area__record > li {
  position: relative;
  padding: .7rem 1rem .7rem 2.75rem;
  border-radius: var(--r-field);
  background: var(--row);
  line-height: 1.4;
}
.page--home .home-area__record > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 1rem;
  inset-block-start: 1.02rem;
  inline-size: calc(.8em * var(--tooth-ratio, 1.2));
  block-size: .8em;
  background: var(--accent);
  -webkit-mask: var(--tooth-mask) center / 100% 100% no-repeat;
  mask: var(--tooth-mask) center / 100% 100% no-repeat;
}
.page--home .home-area__figure { justify-items: center; gap: .6rem; inline-size: min(100%, 17rem); margin-inline: auto; text-align: center; }
.page--home .home-area__frame { inline-size: 100%; }
.page--home .home-area__figure > figcaption { color: var(--fg); text-wrap: balance; }
/* From a small pane up the photograph stands at the panel's top corner, its cog cresting the edge. */
@media (min-width: 34rem) {
  .page--home .home-area__figure { inline-size: 100%; margin-inline: 0; margin-block-start: calc((var(--stage-pad) + var(--stage-gap) - 1.5rem) * -1); }
}
/* In a small pane: the name and the line beside the photograph, the record across the whole panel beneath
   (the words' own box steps aside, so its four parts are placed one by one). */
@media (min-width: 34rem) and (max-width: 47.99rem) {
  .page--home .home-area {
    grid-template-columns: minmax(0, 1fr) clamp(11rem, 36%, 13rem);
    grid-template-areas: "head figure" "line figure" "label label" "record record";
    align-content: start;                           /* a panel with a shorter record keeps its spare room at its foot, not in its middle */
    row-gap: 1rem;
  }
  .page--home .home-area__words { display: contents; }
  .page--home .home-area__head { grid-area: head; }
  .page--home .home-area__line { grid-area: line; }
  .page--home .home-area__label { grid-area: label; justify-self: start; }
  .page--home .home-area__record { grid-area: record; max-inline-size: none; }
  .page--home .home-area__figure { grid-area: figure; }
}
@media (min-width: 48rem) {
  .page--home .home-area { grid-template-columns: minmax(0, 1fr) clamp(15rem, 31%, 24rem); }
}
@media (min-width: 56rem) {
  .page--home .home-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* With scripts: one panel at a time in one cell, so the stage keeps the height of the tallest. */
.page--home .home-stage.is-live { gap: 0; }
.page--home .home-stage.is-live > .home-area { grid-area: 1 / 1; visibility: hidden; }
.page--home .home-stage.is-live > .home-area.is-current,
.page--home .home-stage.is-live > .home-area.is-leaving { visibility: visible; }
.page--home .home-stage.is-live > .home-area.is-current { z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .page--home .home-stage.is-live > .home-area.is-entering { z-index: 2; animation: home-flood .95s var(--ease-film) both; }
  .page--home .home-stage.is-live > .home-area.is-entering .home-area__words > * { animation: home-up .7s var(--home-ease) both; }
  .page--home .home-stage.is-live > .home-area.is-entering .home-area__words > :nth-child(2) { animation-delay: .08s; }
  .page--home .home-stage.is-live > .home-area.is-entering .home-area__words > :nth-child(3) { animation-delay: .16s; }
  .page--home .home-stage.is-live > .home-area.is-entering .home-area__words > :nth-child(4) { animation-delay: .24s; }
  .page--home .home-stage.is-live > .home-area.is-entering .home-area__frame { animation: home-iris 1.1s var(--ease-film) .1s both; }
}
@keyframes home-flood { from { clip-path: circle(0% at var(--ox, 50%) 0%); } to { clip-path: circle(150% at var(--ox, 50%) 0%); } }
@keyframes home-up { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }
@keyframes home-iris { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(75% at 50% 50%); } }

/* ════════════════════════════════════════════════════ 4 · BACK ONCE AGAIN ══
   The deep band, and the one place on this page where the comeback is told. A very large 3; a rack
   with three stations; a cog that truly rolls along it with the scroll (one tooth of the cog for one
   tooth of the rack: home.js); and under each station the quiet before it and the return. Type,
   rows and wheels take the band's tone.
   One composition, close set: the title and the 3 stand in one row straight above the rack, the
   stations hang from it, and the band's own padding is short, so that in a small pane (800×619) the
   title, the 3, the rack and the three years are on screen together when the cog arrives, and no
   screenful of the band is bare wine. */
.page--home .home-back { --section-pad: clamp(3.5rem, 2.5rem + 3.6vw, 6rem); }
/* Chinese: the second line breaks after a full stop ("…2019年再一次。" then "現在又一次。"), not inside "再一次": a measure
   that holds the first two sentences and no more, filled in order (balancing would split the phrase). */
.page--home:lang(zh) .home-back .lockup__sub { max-inline-size: 17.5em; text-wrap: wrap; }
.page--home .home-back__top { display: grid; gap: clamp(1.75rem, 1.4rem + 2vw, 3rem) clamp(1.5rem, 1rem + 4vw, 5rem); align-items: end; }
.page--home .home-back__three { display: flex; align-items: flex-end; gap: clamp(.75rem, .5rem + 1.4vw, 1.75rem); max-inline-size: none; margin: 0; }
.page--home .home-back__num { font-size: clamp(7.5rem, 4.5rem + 13vw, 16rem); line-height: .78; }
.page--home .home-back__label { max-inline-size: 9.5em; padding-block-end: .3em; font-size: var(--fs-sub); color: var(--fg); text-wrap: balance; }
@media (min-width: 40rem) {
  .page--home .home-back__top { grid-template-columns: minmax(0, 1fr) auto; }
  .page--home .home-back__head { align-self: center; }
  .page--home .home-back__three { flex-direction: column; align-items: flex-end; gap: .5rem; text-align: end; }
  .page--home .home-back__label { padding-block-end: 0; }
}
@media (min-width: 56rem) {
  .page--home .home-back__three { flex-direction: row; align-items: flex-end; gap: clamp(.75rem, .5rem + 1.4vw, 1.75rem); text-align: start; }
  .page--home .home-back__label { padding-block-end: .3em; }
}
/* A wheel for the hand: it turns slowly, faster with the scroll, and takes a flick (home.js). Its box is
   clipped to its own circle, so the turning square never reaches past the page. */
.page--home .home-flick { inline-size: clamp(5.5rem, 4rem + 6vw, 9.5rem); aspect-ratio: 1; border-radius: 50%; overflow: clip; color: var(--wheel-colour); cursor: grab; touch-action: pan-y pinch-zoom; -webkit-user-select: none; user-select: none; }
.page--home .home-flick.is-held { cursor: grabbing; }
.page--home .home-flick__rotor { display: block; inline-size: 100%; block-size: 100%; pointer-events: none; }
.page--home .home-flick:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }

.page--home .home-track {
  --cog: clamp(4.25rem, 3rem + 4.4vw, 6.5rem);
  --rack-h: calc(var(--cog) * .09794);              /* the straightened rim at the cog's own scale: 21.938 of 224 */
  --tile: calc(var(--cog) * .11073);                /* one tooth of it: 24.803 of 224 */
  position: relative;
  margin-block-start: clamp(1.25rem, .9rem + 1.5vw, 2.5rem);
}
/* The cog stands on the rack with its teeth a little way into the rack's (two toothed things of one
   pitch cannot go deeper without touching). */
.page--home .home-track__line { position: relative; block-size: calc(var(--cog) * 1.05); }
.page--home .home-track__rack {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: var(--rack-h);
  background: var(--wheel-colour);
  opacity: .55;
  -webkit-mask: var(--teeth-mask) 0 0 / var(--tile) 100% repeat-x;
  mask: var(--teeth-mask) 0 0 / var(--tile) 100% repeat-x;
}
/* Where the record falls silent the rack all but loses its teeth: the band's own ground laid over them. */
.page--home .home-track__quiet { position: absolute; inset-block-end: -1px; block-size: calc(var(--rack-h) + 2px); background: var(--bg); opacity: .72; }
.page--home .home-track__quiet:nth-of-type(2) { inset-inline-start: 27%; inline-size: 17%; }
.page--home .home-track__quiet:nth-of-type(3) { inset-inline-start: 76%; inline-size: 17%; }
.page--home .home-track__dot { position: absolute; inset-block-start: calc(100% + .55rem); inline-size: .75rem; block-size: .75rem; border-radius: 50%; background: var(--fg); }
.page--home .home-track__dot:nth-of-type(4) { inset-inline-start: calc(var(--cog) / 2 - .375rem); }
.page--home .home-track__dot:nth-of-type(5) { inset-inline-start: calc(50% - .375rem); }
.page--home .home-track__dot:nth-of-type(6) { inset-inline-start: calc(100% - var(--cog) / 2 - .375rem); }
.page--home .home-track__cog { position: absolute; inset-block-start: 0; inset-inline-start: calc(100% - var(--cog)); inline-size: var(--cog); block-size: var(--cog); border-radius: 50%; overflow: clip; color: var(--wheel-colour); }
.page--home .home-track.is-live .home-track__cog { inset-inline-start: 0; will-change: transform; }
.page--home .home-track__wheel { display: block; inline-size: 100%; block-size: 100%; }

.page--home .home-stations { display: grid; gap: 1.75rem; margin: clamp(1.75rem, 1.6rem + .6vw, 2.25rem) 0 0; padding: 0; list-style: none; }
.page--home .home-station { display: grid; gap: .5rem; align-content: start; justify-items: start; min-inline-size: 0; }
.page--home .home-station :is(.home-station__quiet, .home-station__lead, .home-station__text) { text-wrap: balance; }   /* three narrow columns: no line of one word */
.page--home .home-station__quiet { display: inline-flex; align-items: center; gap: .55rem; max-inline-size: 100%; padding: .35rem .9rem .35rem .4rem; border-radius: 1.25rem; background: var(--row); color: var(--fg-muted); font-size: 1rem; line-height: 1.3; text-align: start; }
.page--home .home-station__quiet .icon { flex: none; inline-size: 1.75rem; block-size: 1.75rem; padding: .4rem; border-radius: 50%; background: var(--row-hover); color: var(--fg); }
.page--home .home-station__year { margin: .4rem 0 0; font-size: calc(clamp(2.75rem, 2.1rem + 2.8vw, 4.5rem) * var(--display-scale)); font-weight: var(--fw-display); line-height: 1; letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums lining-nums; color: var(--heading); }
.page--home .home-station__lead { font-family: var(--font-display); font-size: var(--fs-sub); font-weight: var(--fw-light); line-height: 1.3; letter-spacing: var(--tracking-light); color: var(--heading); }
.page--home .home-station__text { max-inline-size: 21em; color: var(--fg-muted); line-height: 1.45; }
.page--home .home-station__n { margin-inline-end: .1em; font-family: var(--font-display); font-size: 1.9em; font-weight: var(--fw-display); line-height: 1; font-variant-numeric: tabular-nums lining-nums; color: var(--heading); }
.page--home .home-station__text--words { color: var(--fg); font-weight: var(--fw-strong); }
@media (min-width: 36rem) {
  .page--home .home-stations { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 3rem); }
  .page--home .home-station:nth-child(2) { justify-items: center; text-align: center; }
  .page--home .home-station:nth-child(3) { justify-items: end; text-align: end; }
}
/* Side by side, the three stations share their rows: the quiet lines are one height, and 2010, 2019 and 2026 stand on
   one line whatever the length of the words above them. */
@media (min-width: 36rem) {
  @supports (grid-template-rows: subgrid) {
    .page--home .home-stations { grid-template-rows: repeat(4, auto); row-gap: .5rem; }
    .page--home .home-station { grid-row: span 4; grid-template-rows: subgrid; }
  }
}
/* Three columns in a small pane are narrow: the quiet line gives its pause mark's room to its words. */
@media (min-width: 36rem) and (max-width: 47.99rem) {
  .page--home .home-station__quiet { padding-inline: .65rem; }
  .page--home .home-station__quiet .icon { display: none; }
}
/* A station is quiet until the cog has reached it. Only when the cog really rolls. */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.rac-failsafe) .page--home .home-track.is-live .home-station { opacity: .6; transition: opacity .8s ease; }   /* still passes while it waits */
  html.js:not(.rac-failsafe) .page--home .home-track.is-live .home-station.is-passed { opacity: 1; }
}
.page--home .home-back__foot { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-block-start: clamp(1.5rem, 1.2rem + 1.6vw, 2.75rem); }
.page--home .home-back__wheel { flex: none; inline-size: clamp(4.5rem, 3.4rem + 4vw, 7rem); }
@media (max-width: 29.99rem) {
  /* On a phone the button keeps its words on one line beside the wheel. */
  .page--home .home-back__foot { gap: .75rem; }
  .page--home .home-back__foot > .btn { --pad: 1.125rem; font-size: 1.0625rem; }
}

/* ═══════════════════════════════════════════════════════ 5 · COMING SOON ══
   The countdown as four bold tiles (its escapement ticks beside them) and the three service days as
   colour cards with their day as a very large numeral. */
.page--home .home-soon__top { display: grid; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: center; margin-block-end: clamp(1.5rem, 1.2rem + 2vw, 3rem); }
.page--home:lang(zh) .home-soon .lockup__sub { max-inline-size: 14.5em; text-wrap: wrap; }     /* Chinese: one sentence a line ("…已排上日程。" then "選一個，來做義工。") */
.page--home .home-soon__count { padding: clamp(1.1rem, .9rem + 1.6vw, 2.25rem); border-end-start-radius: clamp(2.5rem, 2rem + 4vw, 5rem); }
/* On a phone the escapement ticks beside the label and the four tiles take the whole width; from a small
   pane up it stands at the start side, as tall as the label, the tiles and the date together. */
.page--home .home-soon__count .countdown { grid-template-columns: auto minmax(0, 1fr); gap: .75rem clamp(.75rem, .4rem + 1.6vw, 1.75rem); align-items: center; justify-items: stretch; inline-size: 100%; }
.page--home .home-soon__count .countdown > * { grid-column: 1 / -1; }
.page--home .home-soon__count .countdown > .countdown__escapement { grid-column: 1; grid-row: 1; inline-size: 3.25rem; }
.page--home .home-soon__count .countdown.is-enhanced > .slate { grid-column: 2; grid-row: 1; }
.page--home .home-soon__count .countdown > .slate { flex-wrap: nowrap; align-items: baseline; }   /* its tooth stays beside its first line */
.page--home .home-soon__count .countdown__units { flex-wrap: nowrap; gap: clamp(.3rem, .2rem + .5vw, .6rem); }
.page--home .home-soon__count .countdown__name { font-size: 1rem; letter-spacing: 0; text-transform: none; }   /* a tile is narrow: the unit in plain small words */
@media (min-width: 40rem) and (max-width: 79.99rem) {
  .page--home .home-soon__count .countdown > * { grid-column: 2; }
  .page--home .home-soon__count .countdown > .countdown__escapement { grid-column: 1; grid-row: 1 / span 3; align-self: center; inline-size: clamp(3.75rem, 2.6rem + 4.4vw, 6.25rem); }
}
.page--home .home-soon__count .countdown__date { text-wrap: balance; }      /* never "to 14:00" alone on a line */
/* Four pale tiles in the section's own ground, the accent in their numerals: cranberry as type, not as a field. */
.page--home .home-soon__count .countdown__unit {
  flex: 1 1 0;
  min-inline-size: 0;
  justify-items: center;
  gap: .3rem;
  padding: clamp(.6rem, .4rem + .9vw, 1.1rem) .2rem clamp(.5rem, .35rem + .7vw, .9rem);
  border-radius: var(--r-card);
  background: var(--blush);
  text-align: center;
}
.page--home .home-soon__count .countdown__num { color: var(--cranberry-lit); font-size: clamp(1.9rem, 1.1rem + 3.4vw, 3.75rem); font-weight: var(--fw-display); }
.page--home .home-soon__count .countdown__name { color: var(--fg); }
/* Side by side only where the title keeps to one line and its second line to two beside the countdown (below
   that the head stands above it, as in a pane); the countdown is then in less than half the page, so it takes
   the phone's arrangement again: the escapement beside the label, the four tiles across the whole panel. */
@media (min-width: 80rem) {
  .page--home .home-soon__top { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .page--home .home-soon__count .countdown__num { font-size: 3.25rem; }
}

.page--home .home-days { display: grid; gap: clamp(.75rem, .6rem + 1vw, 1.25rem); margin: 0; padding: 0; list-style: none; }
.page--home .home-day {
  display: grid;
  grid-template-rows: auto auto auto auto 1fr auto;
  gap: .7rem;
  justify-items: start;
  padding: clamp(1.25rem, 1rem + 1.4vw, 2rem);
  border-start-end-radius: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  overflow: clip;
  container-type: inline-size;                      /* the large day numeral is sized by the card as well as by the screen (three narrow cards on a wide one) */
}
.page--home .home-day__ghost { inset-block-start: -2.5rem; inset-inline-end: -2.5rem; inline-size: clamp(8rem, 6rem + 6vw, 11rem); }
.page--home .home-day__date { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; gap: .35rem .75rem; }
.page--home .home-day__num { font-family: var(--font-display); font-size: min(clamp(4.5rem, 3.4rem + 4.8vw, 7.5rem), 36cqi); font-weight: var(--fw-display); line-height: .8; letter-spacing: var(--tracking-display); font-variant-numeric: lining-nums; color: var(--heading); }
.page--home .home-day__num--pair { display: inline-flex; align-items: center; gap: .14em; font-size: min(clamp(3.25rem, 2.6rem + 3vw, 5.25rem), 19cqi); line-height: .9; }
.page--home .home-day__num--pair > .tooth { inline-size: .2em; block-size: .18em; background: currentColor; opacity: .75; }
.page--home .home-day__month { flex: none; display: grid; gap: .1rem; padding-block-end: .15rem; line-height: 1.2; white-space: nowrap; }   /* the month and its year stay together: beside the numeral, or under it */
/* Three narrow cards in a row: where the pair of dates has no room for its month beside it, every card sets its month
   under its numeral, so the three read alike. */
@container (max-width: 15.5rem) {
  .page--home .home-day__date { flex-direction: column; align-items: flex-start; }
}
.page--home .home-day__month > :first-child { font-weight: var(--fw-strong); }
.page--home .home-day__status { display: inline-flex; align-items: center; gap: .4rem; margin-block-start: .35rem; padding: .25rem .85rem .25rem .5rem; border-radius: var(--r-full); background: var(--row); font-size: 1rem; font-weight: var(--fw-strong); line-height: 1.3; }
.page--home .home-day__status .icon { inline-size: 1.125rem; block-size: 1.125rem; }
.page--home .home-day__title { margin: .2rem 0 0; font-size: calc(clamp(1.5rem, 1.35rem + .8vw, 2rem) * var(--display-scale)); font-weight: var(--fw-display); line-height: 1.12; color: var(--heading); }
.page--home .home-day__when { font-family: var(--font-display); font-size: var(--fs-lead); font-weight: var(--fw-light); line-height: 1.3; }
.page--home .home-day__facts { display: grid; gap: .4rem; align-content: start; inline-size: 100%; margin: 0; padding: 0; list-style: none; }
.page--home .home-day__facts > li { display: flex; align-items: flex-start; gap: .6rem; padding: .55rem .8rem; border-radius: var(--r-field); background: var(--row); line-height: 1.4; }
.page--home .home-day__facts .icon { inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: .1em; }
.page--home .home-day__go { margin-block-start: .5rem; }
@media (max-width: 29.99rem) {
  .page--home .home-day__go { --pad: 1.125rem; font-size: 1rem; }   /* on a phone the longest label ("Tell me when the date is fixed") keeps to one line */
}
@media (hover: hover) and (pointer: fine) {
  .page--home .home-day:hover .home-day__ghost { transform: rotate(60deg); }
}
@media (min-width: 40rem) {
  .page--home .home-days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page--home .home-day--tbc { grid-column: 1 / -1; }
}
/* The day that runs the full width (a pane, a tablet) is laid out in two halves, so it is no taller than it
   needs to be: the date, the status and the title at the start side; the facts and the button at the end. */
@media (min-width: 48rem) and (max-width: 79.99rem) {
  .page--home .home-day--tbc { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: auto auto auto 1fr; column-gap: clamp(1.5rem, 4vw, 3rem); }
  .page--home .home-day--tbc .home-day__num--pair { font-size: 3.5rem; }       /* the two dates and their month keep to one line in half the card */
  .page--home .home-day--tbc > :is(.home-day__date, .home-day__status, .home-day__title, .home-day__when) { grid-column: 1; }
  .page--home .home-day--tbc > .home-day__facts { grid-column: 2; grid-row: 1 / span 3; align-self: end; }
  .page--home .home-day--tbc > .home-day__go { grid-column: 2; grid-row: 4; align-self: end; margin-block-start: 0; }
}
/* Three in a row only where a card is wide enough for its button's words on one line (a third of 80rem). */
@media (min-width: 80rem) {
  .page--home .home-days { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page--home .home-day--tbc { grid-column: auto; }
  .page--home .home-day__go { --pad: 1.125rem; font-size: 1rem; }
}

.page--home .home-lines { display: grid; gap: .5rem; margin: clamp(1rem, .8rem + 1.2vw, 1.75rem) 0 0; padding: 0; list-style: none; }
.page--home .home-line { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .2rem 1rem; align-items: center; padding: .6rem 1.25rem .6rem .6rem; border-radius: 1.75rem; background: var(--row); }
.page--home .home-line__what { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .9rem; line-height: 1.4; }
.page--home .home-line__note { grid-column: 2; color: var(--fg-muted); line-height: 1.4; }
@media (min-width: 52rem) {
  .page--home .home-line { grid-template-columns: auto minmax(0, 1fr) auto; }
  .page--home .home-line__note { grid-column: auto; text-align: end; }
}
.page--home .home-soon__all { margin-block-start: 1rem; }
.page--home .home-soon__all .icon { transition: transform var(--dur-3) var(--home-ease); }
@media (hover: hover) and (pointer: fine) {
  .page--home .home-soon__all:hover .icon { transform: translateX(.25rem); }
}

/* ══════════════════════════════════════════════════════ 6 · OUR NUMBERS ══
   Seven true figures, largest first, each on a bar as long as its share: a staircase in the colours of
   the family. In the corner the stairs leave free, the wheel turns with the scroll. */
.page--home .home-numbers__in { position: relative; }
.page--home .home-nums { position: relative; z-index: 1; display: grid; gap: clamp(.5rem, .4rem + .5vw, .875rem); justify-items: start; margin: 0; padding: 0; list-style: none; }
.page--home .home-num {
  container-type: inline-size;
  display: flex;
  align-items: center;
  gap: clamp(.75rem, .5rem + 1.4vw, 1.75rem);
  /* The stairs: the shortest bar (share 50) is half the width, and never narrower than its words need
     (27rem; on a phone the width less 3rem); from there every bar climbs by its share to the whole width.
     So the seven are seven different lengths at every width, and no label is squeezed into four lines. */
  --floor: max(50%, min(100% - 3rem, 27rem));
  inline-size: calc(var(--floor) + (100% - var(--floor)) * (var(--w) - 50) / 50);
  min-block-size: clamp(4.5rem, 3.8rem + 2.6vw, 6.25rem);
  padding: .6rem clamp(.7rem, .5rem + 1vw, 1.25rem) .6rem clamp(.9rem, .6rem + 1.4vw, 1.75rem);
  border-radius: var(--r-card);
  border-start-end-radius: 6rem;
  border-end-end-radius: 6rem;
}
.page--home .home-num__n { flex: none; min-inline-size: 1.82em; font-size: clamp(2.75rem, 2rem + 3.2vw, 4.75rem); line-height: .9; text-align: end; }
.page--home .home-num__label { flex: 1 1 auto; min-inline-size: 0; font-size: var(--fs-lead); line-height: 1.25; text-wrap: balance; }
@media (max-width: 33.99rem) {
  .page--home .home-num__label { font-size: 1.0625rem; }           /* a phone's bar is narrow: three lines at most */
}
.page--home .home-num__icon { --m: clamp(2.75rem, 2.4rem + 1.4vw, 3.75rem); flex: none; margin-inline-start: auto; }
.page--home .home-num__icon .wheel { inline-size: 70%; block-size: 70%; color: var(--cranberry); }   /* a wheel on white is the logo's own cranberry, not the icons' deeper one */
/* The two awards carry a medal: a disc with the wheel's own toothed edge, open at its middle. */
.page--home .home-num__medal {
  position: relative;
  inline-size: var(--m);
  aspect-ratio: 1;
  background: var(--wheel-colour);
  -webkit-mask: var(--wheel-mask) center / 100% 100% no-repeat;
  mask: var(--wheel-mask) center / 100% 100% no-repeat;
}
.page--home .home-num__medal::after { content: ""; position: absolute; inset: 27%; border-radius: 50%; background: var(--panel); }
@container (max-width: 27rem) {
  .page--home .home-num__icon { display: none; }
  .page--home .home-num__label { padding-inline-end: 1.25rem; }      /* the words keep clear of the round end */
}
@media (hover: hover) and (pointer: fine) {
  .page--home .home-num { transition: transform var(--dur-4) var(--home-ease); }
  .page--home .home-num:hover { transform: translateX(.5rem); }
}
.page--home .home-numbers__wheel { display: none; }
@media (min-width: 44rem) {
  .page--home .home-numbers__wheel {
    position: absolute;
    inset-inline-end: 0;
    inset-block-end: clamp(.25rem, 1.5vw, 1.5rem);
    display: block;
    inline-size: clamp(9.5rem, 22vw, 19rem);
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: clip;
    color: var(--wheel-colour);
    pointer-events: none;
  }
  .page--home .home-numbers__rotor { display: block; }
}

/* ══════════════════════════════════════════════════════ 7 · PHOTOGRAPHS ══
   Seven photographs, each in a frame that is the wheel's own rim, in the colours of the family, placed tip to
   tip like a train of gears (the places come from the template). The rims turn with the scroll, each the
   other way to its neighbour and all at one speed, so a tooth always faces a gap; the photograph sits
   still inside. One flat layer turns for each frame: nothing else moves. A chain that zigzags down the
   page on a phone and in a pane (the photographs in the order they were taken); a cluster from 62rem. */
.page--home .home-gears { --gh: var(--ghn); position: relative; isolation: isolate; inline-size: min(100%, 25rem); margin-inline: auto; aspect-ratio: 100 / var(--gh); }
.page--home .home-gear {
  --x: var(--xn); --y: var(--yn); --d: var(--dn); --r0: var(--r0n);
  position: absolute;
  inset-inline-start: calc((var(--x) - var(--d) / 2) * 1%);
  inset-block-start: calc((var(--y) - var(--d) / 2) / var(--gh) * 100%);
  inline-size: calc(var(--d) * 1%);
  aspect-ratio: 1;
  margin: 0;
}
/* What leans toward the pointer is the frame alone: the caption stays flat, above every gear of the train. */
.page--home .home-gear__tilt { position: absolute; inset: 0; }
/* The frame is clipped to its own circle: the rim that turns inside it is a square, and its corners never reach past it. */
.page--home .home-gear__frame { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 50%; background: none; }
/* The rims take the family's colours, a deep one and a warm one by turns down the train (in the cluster
   as well: no two that mesh are alike); the logo's own cranberry is kept for one, the latest. They are
   frames, not the logo's wheel: the wheel itself is never recoloured. */
.page--home .home-gear:nth-child(1) { --rim: var(--wine); }
.page--home .home-gear:nth-child(2) { --rim: var(--apricot); }
.page--home .home-gear:nth-child(3) { --rim: var(--plum); }
.page--home .home-gear:nth-child(4) { --rim: var(--coral); }
.page--home .home-gear:nth-child(5) { --rim: var(--magenta); }
.page--home .home-gear:nth-child(6) { --rim: var(--rose); }
.page--home .home-gear:nth-child(7) { --rim: var(--cranberry); }
.page--home .home-gear__rim {
  position: absolute;
  inset: 0;
  background: var(--rim, var(--wheel-colour));
  -webkit-mask: var(--wheel-mask) center / calc(100% - 2px) calc(100% - 2px) no-repeat;
  mask: var(--wheel-mask) center / calc(100% - 2px) calc(100% - 2px) no-repeat;
  transform: rotate(calc(var(--r0) * 1deg + var(--rot, 0deg) * var(--dir)));
}
.page--home .home-gears.is-live .home-gear__rim { will-change: transform; }
/* The photograph: a disc just inside the roots of the teeth (the root circle is 84.6% of the tip circle). */
.page--home .home-gear__photo { position: absolute; inset: 8.8%; border-radius: 50%; overflow: hidden; background: var(--row); }
.page--home .home-gear__photo > picture { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; }
.page--home .home-gear__tilt > .tilt-shine { inset: 8.8%; border-radius: 50%; }
/* The caption: a small label in the logo's own pair, when (heavy) over what (light), that hangs under
   its own photograph. At every width it lies on its own frame's teeth alone: never on a photograph, on
   another frame or on another caption (the places below and the template's sizes were worked out
   together against every frame, from a phone 360 wide to the widest cluster, in English and Chinese).
   In the chain (under 62rem) it hangs in the pocket under its frame, from near the chain's middle
   outward (the frames at the start side are the odd ones). --cap-in is how far its inner end stays from
   the middle, so that it stops short of the next frame's teeth; its outer end may reach into the margin
   beside the chain (--cap-out; on a phone, a little of the page's gutter). The last one has the foot of
   the train to itself and hangs under the middle of its frame; the train keeps room for it. */
.page--home .home-gears { --cap-in: 8; --cap-out: max(.625rem, (100vw - 2 * var(--gutter) - 25rem) / 2 - .25rem); margin-block-end: 2.75rem; }
.page--home .home-gear__cap {
  position: absolute;
  z-index: 5;
  inset-block-start: 91.6%;                                         /* the photograph ends at 91.2% */
  display: grid;
  justify-items: center;
  inline-size: max-content;
  max-inline-size: calc((50 - var(--cap-in)) / var(--d) * 100% + var(--cap-out));
  padding: .3rem .9rem .35rem;
  border-radius: 1rem;
  background: var(--row);
  color: var(--fg);
  font-size: 1rem;
  line-height: 1.28;
  text-align: center;
}
.page--home .home-gear:nth-child(odd) > .home-gear__cap { inset-inline-end: calc((var(--x) + var(--d) / 2 - 50 + var(--cap-in)) / var(--d) * 100%); }
.page--home .home-gear:nth-child(even) > .home-gear__cap { inset-inline-start: calc((50 + var(--cap-in) - var(--x) + var(--d) / 2) / var(--d) * 100%); }
.page--home .home-gear:last-child > .home-gear__cap { inset-inline: 50% auto; max-inline-size: calc(2 * var(--x) / var(--d) * 100% + 2 * var(--cap-out)); transform: translateX(-50%); }
.page--home .home-gear__dot { display: none; }                      /* the two lines part what the dot parted */
.page--home .home-gear__when { font-weight: var(--fw-strong); white-space: nowrap; }
.page--home .home-gear__what { text-wrap: balance; }
@media (max-width: 33.99rem) {
  .page--home .home-gear__cap { padding: .2rem .45rem .25rem; line-height: 1.22; }   /* a phone's pockets are small: a tighter label, and a long caption takes three lines */
}
@media (min-width: 34rem) {
  .page--home .home-gears { --cap-in: 9; }                           /* there is margin to grow into: further from the next frame */
}
@media (min-width: 44rem) {
  .page--home .home-gears { --cap-out: max(.625rem, (100vw - 2 * var(--gutter) - 31rem) / 2 - .25rem); inline-size: min(100%, 31rem); margin-block-end: 1.5rem; }
}
/* In the cluster (from 62rem) each caption hangs under the middle of its frame, or stands on its head
   where another frame is close below (the second and the third). Three are moved a little sideways
   (--cap-dx, a share of the frame's width), clear of a neighbour, and two of those are kept narrow
   (--cap-max), so that on the narrowest cluster they take a third line rather than reach one. */
@media (min-width: 62rem) {
  .page--home .home-gears { --gh: var(--ghw); inline-size: 100%; margin-block-end: 0; }
  .page--home .home-gear { --x: var(--xw); --y: var(--yw); --d: var(--dw); --r0: var(--r0w); }
  .page--home .home-gear:nth-child(n) > .home-gear__cap { inset-inline: calc(50% + var(--cap-dx, 0%)) auto; max-inline-size: var(--cap-max, 16.5rem); transform: translateX(-50%); }
  .page--home .home-gear:nth-child(2) > .home-gear__cap,
  .page--home .home-gear:nth-child(3) > .home-gear__cap { inset-block: auto 91.6%; }
  .page--home .home-gear:nth-child(4) { --cap-dx: 22%; }
  .page--home .home-gear:nth-child(6) { --cap-dx: -10.5%; --cap-max: 83.3%; }
  .page--home .home-gear:nth-child(7) { --cap-dx: 10.5%; --cap-max: 105%; }
}

/* ════════════════════════════════════════════════ 8 · OUR ROTARY FAMILY ══
   One modest band. The sponsor is credited here, once, by name; then the district and Rotary International. */
.page--home .home-family__grid { display: grid; gap: clamp(1.75rem, 1.4rem + 2vw, 3.25rem); }
.page--home .home-family__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.page--home .home-family__more .icon { transition: transform var(--dur-3) var(--home-ease); }
.page--home .home-family__list { display: grid; gap: clamp(1.25rem, 1rem + 1.6vw, 2.5rem); margin: 0; padding: 0; list-style: none; }
.page--home .home-kin { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; }
.page--home .home-kin > .b-medallion { transition: transform var(--dur-5) var(--home-ease); }
.page--home .home-kin__words { display: grid; gap: .35rem; }
.page--home .home-kin__name { margin: .3rem 0 0; font-size: var(--fs-sub); font-weight: var(--fw-title); line-height: var(--lh-sub); letter-spacing: var(--tracking-sub); }
.page--home .home-kin__words > p { color: var(--fg-muted); }
@media (hover: hover) and (pointer: fine) {
  .page--home .home-kin:hover > .b-medallion { transform: rotate(60deg); }
  .page--home .home-family__more:hover .icon { transform: translateX(.25rem); }
}
@media (min-width: 52rem) {
  .page--home .home-family__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ══════════════════════════════════════════════════════ 9 · THREE DOORS ══
   Three colour panels (the shell's doors: the one under the pointer widens). Their type, their arrow
   and their wheel take the tone of the panel. */
.page--home .home-door {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(1.25rem, 1rem + 1.4vw, 2.25rem);
  justify-items: start;
  min-block-size: clamp(16rem, 13rem + 12vw, 25rem);
  padding: clamp(1.5rem, 1.2rem + 1.6vw, 2.5rem);
  border-start-start-radius: clamp(3rem, 2rem + 5vw, 6rem);
  color: var(--fg);
  overflow: clip;
}
.page--home .home-door__ghost { inset-block-end: -3.5rem; inset-inline-end: -3rem; inline-size: clamp(11rem, 8rem + 10vw, 17rem); }
.page--home .home-door__words { position: relative; display: grid; gap: .6rem; align-content: start; }
.page--home .home-door__title { font-family: var(--font-display); font-size: calc(clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem) * var(--display-scale)); font-weight: var(--fw-display); line-height: calc(var(--lh-display) + .04); letter-spacing: var(--tracking-display); color: var(--heading); text-wrap: balance; }
.page--home .home-door__line { max-inline-size: 21em; line-height: 1.5; }
.page--home .home-door__go { position: relative; display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; border-radius: 50%; background: var(--btn-bg); color: var(--btn-fg); transition: transform var(--dur-3) var(--home-ease); }
.page--home .home-door__go .icon { inline-size: 1.25rem; block-size: 1.25rem; }
.page--home .home-door:focus-visible .home-door__ghost { transform: rotate(60deg); }
.page--home .home-door:focus-visible .home-door__go { transform: translateX(.375rem); }
@media (hover: hover) and (pointer: fine) {
  .page--home .home-door:hover .home-door__ghost { transform: rotate(60deg); }
  .page--home .home-door:hover .home-door__go { transform: translateX(.375rem); }
}
/* The keyboard's ring stands on the section's white ground, not on the door: a deep door's own ring is white, and would not be seen there. */
.page--home .home-door:focus-visible { outline-color: var(--cranberry-press); }
/* Under 56rem the doors are compact, so that the three ways in are seen together on one screen: the mark
   and the arrow share the first row and the words follow. On a phone the three stand one under another.
   In a pane (34rem to 56rem) Join, the first way in, is one tall door at the start side, built as the
   wide screen's doors are (mark, words, arrow at its foot), and the other two stand beside it. */
@media (max-width: 55.99rem) {
  .page--home .home-door {
    grid-template: "mark go" auto "words words" 1fr / minmax(0, 1fr) auto;
    gap: clamp(.75rem, .5rem + 1vw, 1.125rem);
    align-items: start;
    min-block-size: 0;
    padding: clamp(1.25rem, .65rem + 2.2vw, 1.875rem);
    border-start-start-radius: clamp(2.5rem, 1.6rem + 4vw, 3.75rem);
  }
  .page--home .home-door > .b-medallion { --m: clamp(3rem, 2.2rem + 2vw, 3.5rem); grid-area: mark; }
  .page--home .home-door__words { grid-area: words; gap: .4rem; }
  .page--home .home-door__go { grid-area: go; align-self: center; justify-self: end; }
  .page--home .home-door__title { font-size: calc(clamp(1.625rem, 1.2rem + 1vw, 1.75rem) * var(--display-scale)); }
  .page--home .home-door__ghost { inset-block-end: -2.75rem; inset-inline-end: -2.5rem; inline-size: clamp(8.5rem, 6rem + 9vw, 11rem); }
}
@media (min-width: 34rem) and (max-width: 55.99rem) {
  .page--home .home-doors .b-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, 1fr); }   /* the two beside it are of one height */
  .page--home .home-door:first-child {
    grid-row: 1 / span 2;
    grid-template: "mark" auto "words" 1fr "go" auto / minmax(0, 1fr);
    gap: clamp(1rem, .6rem + 1.4vw, 1.5rem);
  }
  .page--home .home-door:first-child > .b-medallion { --m: 4.5rem; }
  .page--home .home-door:first-child .home-door__go { justify-self: start; }
  .page--home .home-door:first-child .home-door__title { font-size: calc(clamp(1.875rem, .9rem + 3.2vw, 2.5rem) * var(--display-scale)); }
  .page--home .home-door:first-child .home-door__ghost { inset-block-end: -14%; inset-inline-end: -30%; inline-size: 88%; }
}

/* ═════════════════════════════════════════════════ 10 · THE CLOSING CALL ══
   The hero's mirror: the words first, the wheel beside them, in the tone of the band. */
.page--home .home-close { --bg: var(--magenta); }
.page--home .home-close__grid { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4rem); align-items: center; }
.page--home .home-close__words { display: grid; gap: clamp(1rem, .8rem + 1vw, 1.75rem); justify-items: start; min-inline-size: 0; }
/* The title is sized to its column, so that it stands in two lines at every width (never three, never a word alone). */
.page--home .home-close__title { max-inline-size: 11em; margin: 0; font-size: calc(clamp(2.25rem, min(11.2vw, 1.6rem + 4.6vw), 5.25rem) * var(--display-scale)); }
.page--home .home-close__lead { max-inline-size: 26em; color: var(--fg); text-wrap: balance; }
.page--home .home-close__wheel { justify-self: center; inline-size: clamp(13rem, 9rem + 22vw, 27rem); }
/* Side by side from the width of a small pane, as the hero is: the whole call on one screen there. */
@media (min-width: 36rem) {
  .page--home .home-close__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1.25rem, .4rem + 3.2vw, 4rem); }
  .page--home .home-close__title { font-size: calc(clamp(2.5rem, 6.7vw, 5.25rem) * var(--display-scale)); }
  .page--home .home-close__wheel { justify-self: end; inline-size: min(100%, 27rem); margin-block: -1.5rem; }
}