/* ═══════════════════════════════════════════════════════════════════════════
   about.css: the About page (/about/) of the bright site. Everything is scoped to .page--about.
   Markup: src/pages/about.html · behaviour: src/js/pages/about.js.
   Vocabulary: src/css/bright.css (grounds, panels, cards, medallions, chips, doors, the ticker).

   1 the head       sand (the token --blush): the lockup, the lead, chips, and a photograph inside the wheel
                    beside the club's own wheel (two gears that mesh), then the strands on a wine ticker
   2 what           white: the four strands as medallion cards, each with one large corner
   3 who            cream: four colour panels round the wheel's hub; small and rebuilding, with Join
   4 the record     white: the three returns as three panels; the history dial; the entry it shows as a
                    card in its era's colour, with the wheel beside it
     … in numbers   paper (the token --cream): five discs
   5 awards         wine: five medals on a rail
   6 the family     cream: the gears in a white panel, the sponsor's panel
   7 questions      white: a paper panel
   8 the call       aubergine: Join, three doors

   Colour and type are tokens. Motion is transform, opacity and clip-path only, and every
   hidden-until-shown state belongs to a class that about.js sets (.is-live), so with scripts
   off the page is the plain, stacked thing. Wheels are cranberry on a pale ground and white on
   a colour panel, never another colour.
   ═══════════════════════════════════════════════════════════════════════════ */

.page--about {
  --about-gap: clamp(2rem, 1.4rem + 3vw, 4.5rem);
  --about-big: clamp(2.75rem, 1.6rem + 5vw, 5rem);            /* the one large corner of a panel */
  --about-pair: clamp(2rem, 1rem + 5vw, 6rem);                /* between a title and what stands beside it */
  --about-title: calc(clamp(1.625rem, 1.3rem + 1.5vw, 2.5rem) * var(--display-scale));   /* a heading inside a panel */
}
/* An eyebrow and the lockup under it. */
.page--about :is(.about-hero__title, .about-record__title, .about-awards__title, .about-family__title) { display: grid; gap: clamp(.75rem, .6rem + .6vw, 1.25rem); justify-items: start; }

/* ───────────────────────────────────────────────────────────── 1 the head ──
   The photograph sits inside the wheel: a round picture, and round it the wheel's own rim in cranberry,
   which turns. The club's wheel stands beside it, the same size, a tooth in every gap: two gears.
   --cog is the wheel's size; --mesh-x and --mesh-y are where the second wheel's box starts, in wheels
   (0.9645 of a wheel from centre to centre: the pitch circles touch, with a little air between the teeth);
   --mesh-phase is the turn that sets its teeth in the other's gaps at that angle (2 × the angle + 7.5°,
   in fifteens). On a phone the second wheel stands level, mostly off the edge; from 34rem it stands up and
   to the side, where the head has room. */
.page--about .about-hero { padding-block-end: clamp(2.5rem, 1.75rem + 3.5vw, 5rem); }
.page--about .about-hero__inner {
  --cog: min(72vw, 17.5rem);
  --mesh-x: .9645;
  --mesh-y: 0;
  --mesh-phase: 7.5deg;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 1rem + 1.6vw, 2.25rem);
}
.page--about .about-hero__title { order: 1; position: relative; z-index: 1; }
.page--about .about-hero__figure { order: 2; position: relative; display: grid; justify-items: center; inline-size: var(--cog); margin: 0; justify-self: center; }
.page--about .about-hero__lead { order: 3; position: relative; z-index: 1; max-inline-size: 34em; color: var(--fg-muted); }
.page--about .about-hero__nav { order: 4; position: relative; z-index: 1; }

.page--about .about-cog { position: relative; inline-size: var(--cog); aspect-ratio: 1; }
.page--about .about-cog__driver { position: absolute; inset-inline-start: calc(var(--mesh-x) * 100%); inset-block-start: calc(var(--mesh-y) * 100%); inline-size: 100%; aspect-ratio: 1; pointer-events: none; }
.page--about .about-cog__phase { display: block; inline-size: 100%; block-size: 100%; rotate: var(--mesh-phase); }
.page--about .about-cog__gear,
.page--about .about-cog__rim { display: block; background: var(--wheel-colour); }
.page--about .about-cog__gear { inline-size: 100%; block-size: 100%; -webkit-mask: var(--wheel-full-mask) center / calc(100% - 2px) calc(100% - 2px) no-repeat; mask: var(--wheel-full-mask) center / calc(100% - 2px) calc(100% - 2px) no-repeat; }
.page--about .about-cog__rim { position: absolute; inset: 0; z-index: 2; pointer-events: none; -webkit-mask: var(--wheel-rim-mask) center / calc(100% - 2px) calc(100% - 2px) no-repeat; mask: var(--wheel-rim-mask) center / calc(100% - 2px) calc(100% - 2px) no-repeat; }
.page--about .about-cog.is-near :is(.about-cog__gear, .about-cog__rim) { will-change: transform; }
/* The picture reaches a little under the rim, so no ground shows between them when it leans to the hand.
   It is a 4:3 group frame cut round (2021-handover-01: ten people in two rows). The whole frame is drawn, 116.4%
   of the disc high and 4:3 as wide (154.8%), and set so that the rim's opening (95% of the disc) holds eight
   whole faces and the red plaque, and passes through nobody's face: the two people at the frame's ends stand
   under the rim. In a 960-wide copy of the frame the opening is a circle of radius 295 about (515, 320).
   The slug and the sizes hint in about.html follow these numbers: change all three together. */
.page--about .about-cog .about-cog__photo { position: absolute; inset-block-start: 10%; inset-inline-start: 10%; z-index: 1; inline-size: 80%; aspect-ratio: 1; border-radius: 50%; background: var(--ph, var(--white)); }
.page--about .about-cog .about-cog__photo > picture { inset: -1.6% auto auto -33%; inline-size: 154.8%; max-inline-size: none; block-size: 116.4%; }
.page--about .about-hero__caption {
  position: relative;
  z-index: 3;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: .55em;
  margin-block-start: calc(var(--cog) * -.08);
  padding: .5rem 1.1rem .5rem .9rem;
  border-radius: 1.375rem;
  background: var(--white);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.3;
  text-wrap: wrap;                                             /* where it must take two lines the first is filled, so the dot between date and place ends a line and never begins one (balanced, it began the second) */
  box-shadow: var(--shadow-float);
}
.page--about .about-hero__caption::before {
  content: "";
  flex: none;
  inline-size: calc(.75em * var(--tooth-ratio, 1.2));
  block-size: .75em;
  background: var(--cranberry);
  -webkit-mask: var(--tooth-mask) center / 100% 100% no-repeat;
  mask: var(--tooth-mask) center / 100% 100% no-repeat;
}

/* The sections of the page: chips. Under the pointer a chip's medallion rolls once. */
.page--about .about-hero__nav > ul { display: flex; flex-wrap: wrap; gap: .5rem; }
.page--about .about-hero .about-chip > .b-medallion { transition-duration: var(--dur-4); }
.page--about .about-hero .about-chip:focus-visible > .b-medallion { transform: rotate(1turn) scale(1.08); }
@media (hover: hover) and (pointer: fine) {
  .page--about .about-hero .about-chip:hover > .b-medallion { transform: rotate(1turn) scale(1.08); }
}
@media (max-width: 33.99rem) {
  /* A phone: the title a size that holds it in two lines (at the full size it took three, one word alone on the
     first), and the chips a little closer set, so the five stand in three rows and not four. */
  .page--about :is(.about-hero, .about-close) .lockup { --lockup-fs: min(var(--fs-hero), 8vw); }
  .page--about .about-hero .about-chip { gap: .5rem; padding-inline-end: .95rem; font-size: 1rem; }
  .page--about .about-hero .about-chip > .b-medallion { --m: 2rem; }
}

@media (min-width: 34rem) {
  /* Title across; under it the lead at the start side and the wheel at the end side; the chips across. */
  .page--about .about-hero__inner { --cog: clamp(12.5rem, 36vw, 19rem); --mesh-x: .7901; --mesh-y: -.5532; --mesh-phase: 12.5deg; grid-template-columns: minmax(0, 1fr) var(--cog); column-gap: clamp(1.25rem, 4vw, 3rem); align-items: start; }
  .page--about .about-hero__title { grid-area: 1 / 1 / 2 / -1; }
  .page--about .about-hero__lead { grid-area: 2 / 1; }
  .page--about .about-hero__figure { grid-area: 2 / 2; justify-self: end; }
  .page--about .about-hero__nav { grid-area: 3 / 1 / 4 / -1; }
}
@media (min-width: 48rem) {
  /* Room for the chips under the lead: the wheel stands beside both. */
  .page--about .about-hero__inner { grid-template-rows: auto auto 1fr; }
  .page--about .about-hero__figure { grid-area: 2 / 2 / 4 / 3; }
  .page--about .about-hero__nav { grid-area: 3 / 1; }
}
@media (min-width: 72rem) {
  /* Title, lead and chips in one column, the wheel beside all three. */
  .page--about .about-hero__inner { --cog: clamp(22rem, 30vw, 26rem); column-gap: clamp(3rem, 6vw, 6rem); }
  .page--about .about-hero .lockup { --lockup-fs: min(var(--fs-hero), 4.5rem); }   /* the title in two lines beside the wheel */
  .page--about .about-hero__title { grid-area: 1 / 1; }
  .page--about .about-hero__figure { grid-area: 1 / 2 / 4 / 3; align-self: center; }
}
/* A narrow pane (588 wide): the wheel is small there, so its caption stands centred under it and may be a little
   wider than it (by --out at each side: never past the page's gutter), closer set: one line, where at the wheel's
   own width its last word fell alone. The column is the wheel's width whatever the caption asks for. Under 38rem
   there is no room for the tooth that leads it as well, so the label stands without one. */
@media (min-width: 34rem) and (max-width: 47.99rem) {
  .page--about .about-hero__figure { grid-template-columns: minmax(0, 1fr); }
  .page--about .about-hero__caption { --out: calc(var(--gutter) - .25rem); justify-self: center; gap: .4em; inline-size: max-content; max-inline-size: calc(100% + 2 * var(--out)); margin-inline: calc(var(--out) * -1); padding-inline: .7rem .85rem; }
}
@media (min-width: 34rem) and (max-width: 37.99rem) {
  .page--about .about-hero__caption { padding-inline: .85rem; }
  .page--about .about-hero__caption::before { content: none; }
}
/* A short window (a laptop, a narrow pane): less air, so the whole head is on the first screen. */
@media (max-height: 45rem) and (min-width: 34rem) {
  .page--about .about-hero { padding-block: calc(var(--clear-top, var(--bar-top)) + clamp(1rem, 3.6vh, 2.75rem)) clamp(1.5rem, 4.5vh, 3rem); }
  .page--about .about-hero__inner { row-gap: clamp(.75rem, 2.2vh, 1.5rem); }
  .page--about .about-hero__title { gap: .625rem; }
  .page--about .about-hero__lead { margin-block-start: .25rem; }   /* the title's descenders want a little more than the row's gap above the lead */
}
@media (max-height: 42rem) and (min-width: 34rem) and (max-width: 71.99rem) {
  .page--about .about-hero__lead { font-size: 1.125rem; line-height: 1.5; }
}

/* The strands on a ticker: a wine band between the head and the page, with its own row of teeth. */
.page--about .about-band { --bg: var(--wine); position: relative; }
.page--about .about-ticker { padding-block-end: calc(var(--seam-h) + clamp(.875rem, .7rem + .8vw, 1.5rem)); }

/* ─────────────────────────────────────────────── 2 what Rotaract is ── */
.page--about .about-what__head { display: grid; gap: var(--space-m) var(--about-pair); align-items: end; }
.page--about .about-what__head > .lead { max-inline-size: 34em; }
/* The title takes the room its own line needs and the lead has the rest (in fixed shares the title broke after its first word on a wide screen). */
@media (min-width: 56rem) { .page--about .about-what__head { grid-template-columns: minmax(0, max-content) minmax(18rem, 1fr); } }
/* "A Rotaract club does four things": the line that opens the four cards, as a soft row. */
.page--about .about-what__four { display: flex; align-items: center; gap: 1rem; max-inline-size: none; margin-block: clamp(1.75rem, 1.2rem + 2.4vw, 3.5rem) var(--space-s); padding: .875rem 1.5rem .875rem .875rem; border-radius: var(--r-panel); background: var(--row); }
.page--about .about-what__four > .b-medallion { align-self: flex-start; }

/* The four strands. A card has one large corner, and its medallion sits in it. On a phone a card is a row. */
.page--about .about-strands { display: grid; gap: var(--space-s); }
.page--about .about-strand {
  --card: var(--coral-tint);
  --m-bg: var(--coral);
  --m-fg: var(--fg);                                           /* the medallion wears its colour's tone (b-deep, b-warm): the icon takes the tone's words */
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1.125rem;
  row-gap: .35rem;
  align-items: start;
  border-radius: 3rem var(--r-panel) var(--r-panel) var(--r-panel);
}
.page--about .about-strand[data-about-tone="plum"] { --card: var(--plum-tint); --m-bg: var(--plum); }
.page--about .about-strand[data-about-tone="apricot"] { --card: var(--apricot-tint); --m-bg: var(--apricot); }
.page--about .about-strand[data-about-tone="wine"] { --card: var(--wine-tint); --m-bg: var(--wine); }
.page--about .about-strand__mark { --m: 4rem; grid-row: 1 / span 2; }
.page--about .about-strand__mark > :is(.icon, .wheel) { transition: transform var(--dur-4) var(--ease-out); }
.page--about .about-strand > .b-card__title { align-self: end; text-wrap: balance; }
.page--about .about-strand > p { grid-column: 2; color: var(--fg-muted); }
@media (hover: hover) and (pointer: fine) {
  .page--about .about-strand:hover .about-strand__mark > :is(.icon, .wheel) { transform: scale(1.14) rotate(-10deg); }
}
@media (min-width: 36rem) {
  .page--about .about-strands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page--about .about-strand { grid-template-columns: minmax(0, 1fr); row-gap: .6rem; padding: clamp(1.25rem, 1rem + 1.2vw, 2rem); border-start-start-radius: var(--about-big); }
  .page--about .about-strand__mark { --m: clamp(4.5rem, 3.5rem + 3vw, 6rem); grid-row: auto; margin-block-end: clamp(.75rem, .25rem + 2vw, 2rem); }
  .page--about .about-strand > p { grid-column: auto; }
}
@media (min-width: 48rem) and (max-width: 77.99rem) {
  /* Two by two, each card a row again (medallion at the start side, words beside it): low and light, so the four
     colour panels of "Who we are", two by two just below, do not read as the same grid of boxes a second time. */
  .page--about .about-strand { grid-template-columns: auto minmax(0, 1fr); column-gap: 1.25rem; row-gap: .35rem; }
  .page--about .about-strand__mark { --m: 4.5rem; grid-row: 1 / span 2; margin-block-end: 0; }
  .page--about .about-strand > p { grid-column: 2; }
}
@media (min-width: 78rem) {
  /* Four across, every second one a step down: a row that is not a grid of boxes. (From 78rem, where a column
     holds a line of words; at 62rem, where it began, a card's text ran in six lines of two words.) */
  .page--about .about-strands { --step: clamp(1.25rem, 2.4vw, 2.5rem); grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .page--about .about-strand:nth-child(odd) { margin-block-end: var(--step); }
  .page--about .about-strand:nth-child(even) { margin-block-start: var(--step); }
}

/* ────────────────────────────────────────────────────── 3 who we are ──
   Four facts, four colours, round the hub: from 44rem they stand two by two, each with its large corner
   outward and its small one at the centre, where the club's wheel turns on a white hub. A belt as tall
   as the hub is kept clear of words across the middle. */
.page--about .about-facts { --hub: clamp(5.5rem, 4rem + 5vw, 8.5rem); --fact-wheel: clamp(9rem, 6rem + 12vw, 15rem); position: relative; display: grid; gap: clamp(.75rem, .5rem + 1vw, 1.25rem); }
.page--about .about-fact { display: grid; align-content: start; justify-items: start; gap: .9rem; overflow: clip; }
.page--about .about-fact > :is(.b-medallion, h3, p) { position: relative; }
.page--about .about-fact > p { max-inline-size: 31em; }
.page--about .about-fact__title,
.page--about .about-sponsor__title,
.page--about .about-door__title {
  font-family: var(--font-display);
  font-size: var(--about-title);
  font-weight: var(--fw-title);
  line-height: var(--lh-sub);
  letter-spacing: var(--tracking-sub);
  color: var(--heading);
  text-wrap: balance;
}
.page--about .about-fact__title { margin-block-start: .35rem; }
/* The faint wheel at a panel's far corner: white, and it turns with the scroll. */
.page--about :is(.about-fact__wheel, .about-return__wheel, .about-sponsor__wheel) { position: absolute; inset-block-start: 0; inset-inline-end: 0; inline-size: var(--fact-wheel, 12rem); aspect-ratio: 1; margin: calc(var(--fact-wheel, 12rem) * -.4) calc(var(--fact-wheel, 12rem) * -.3) 0 0; color: var(--wheel-colour); opacity: .2; pointer-events: none; }
.page--about :is(.about-fact__wheel, .about-return__wheel, .about-sponsor__wheel) > span { display: block; inline-size: 100%; block-size: 100%; }
.page--about :is(.about-fact__wheel, .about-return__wheel, .about-sponsor__wheel, .about-facts__turn, .about-close__turn, .about-shots__turn) .wheel { inline-size: 100%; block-size: 100%; }
.page--about .about-fact:is(.about-fact--english, .about-fact--age) > .about-fact__wheel { inset-block: auto 0; margin: 0 calc(var(--fact-wheel) * -.3) calc(var(--fact-wheel) * -.4) 0; }
.page--about .about-facts__hub { display: none; }
@media (min-width: 44rem) {
  .page--about .about-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
  .page--about .about-fact { --belt: calc(var(--hub) / 2 + .75rem); min-block-size: clamp(15rem, 12rem + 8vw, 19rem); }
  .page--about .about-fact--community { padding-block-end: var(--belt); border-radius: var(--about-big) var(--r-panel) .75rem var(--r-panel); }
  .page--about .about-fact--district { padding-block-end: var(--belt); border-radius: var(--r-panel) var(--about-big) var(--r-panel) .75rem; }
  .page--about .about-fact--english { padding-block-start: var(--belt); border-radius: var(--r-panel) .75rem var(--r-panel) var(--about-big); }
  .page--about .about-fact--age { padding-block-start: var(--belt); border-radius: .75rem var(--r-panel) var(--about-big) var(--r-panel); }
  .page--about .about-facts__hub {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    display: grid;
    place-items: center;
    inline-size: var(--hub);
    block-size: var(--hub);
    margin: calc(var(--hub) / -2) 0 0 calc(var(--hub) / -2);
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 0 0 clamp(.5rem, .3rem + .8vw, .875rem) var(--bg);   /* the ground itself, as a ring: the four panels stand clear of the hub */
    color: var(--wheel-colour);
    pointer-events: none;
  }
  .page--about .about-facts__turn { display: block; inline-size: 72%; aspect-ratio: 1; }
}

/* Small, and rebuilding: the tagline, the invitation, Join; and the six areas. */
.page--about .about-now { display: grid; gap: var(--space-l) var(--about-pair); align-items: center; margin-block-start: clamp(.75rem, .5rem + 1vw, 1.25rem); border-radius: var(--r-panel) var(--r-panel) var(--about-big) var(--r-panel); }
.page--about .about-now__words { display: grid; gap: var(--space-s); justify-items: start; }
.page--about .about-now__tagline { max-inline-size: none; color: var(--cranberry-lit); font-family: var(--font-display); font-size: var(--about-title); font-weight: var(--fw-title); line-height: var(--lh-sub); letter-spacing: var(--tracking-sub); }
.page--about .about-now__text { max-inline-size: 32em; color: var(--heading); font-size: var(--fs-lead); font-weight: var(--fw-light); line-height: calc(var(--lh-text) - .1); }
.page--about .about-now__actions { margin-block-start: var(--space-xs); gap: var(--space-s) var(--space-m); }
.page--about .about-now__number { display: grid; gap: .35rem; justify-items: start; }
.page--about .about-now__number .b-number__label { max-inline-size: none; white-space: nowrap; }   /* three words: one line, never one word alone under two */
.page--about :is(.about-now__number, .about-record__count) .b-number { color: var(--accent); }
@media (min-width: 48rem) {
  /* The number stands beside the words (from the 800 pane up), as large as a headline, not under the buttons. */
  .page--about .about-now { grid-template-columns: minmax(0, 1fr) auto; }
  .page--about .about-now__number { justify-items: center; padding-inline: clamp(.5rem, -1rem + 3.5vw, 2.5rem); text-align: center; }
  .page--about .about-now__number .b-number { --fs-stat: clamp(5rem, 3rem + 5vw, 7.5rem); }
}

/* ─────────────────────────────────────────────────────── 4 the record ── */
.page--about .about-record__head { display: grid; gap: var(--space-m) var(--about-pair); align-items: end; }
.page--about .about-record__count { display: flex; align-items: center; gap: 1rem; }
.page--about .about-record__count .b-number__label { max-inline-size: 9.5em; }
@media (min-width: 48rem) { .page--about .about-record__head { grid-template-columns: minmax(0, 1fr) auto; } }   /* the count beside the title from the 800 pane up */

/* The three returns: three panels in the eras' colours, each a step higher than the one before. */
.page--about .about-returns { --fact-wheel: clamp(8rem, 5rem + 9vw, 13rem); display: grid; gap: clamp(.75rem, .5rem + 1vw, 1.25rem); margin-block: clamp(1.75rem, 1.2rem + 2.6vw, 3.5rem) var(--about-gap); }
.page--about .about-return { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; overflow: clip; border-radius: var(--r-panel) var(--about-big) var(--r-panel) var(--r-panel); }
.page--about .about-return > :not(.about-return__wheel) { position: relative; }
.page--about .about-return__year { max-inline-size: none; color: var(--heading); font-family: var(--font-display); font-size: clamp(3.25rem, 2.2rem + 4.4vw, 5.75rem); font-weight: var(--fw-display); line-height: .95; letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums lining-nums; }
.page--about .about-return__era { margin-block-start: .25rem; font-size: var(--fs-sub); }
.page--about .about-return__what { font-weight: var(--fw-strong); }
.page--about .about-return__text { max-inline-size: 30em; margin-block-end: var(--space-s); }
.page--about .about-return__go { margin-block-start: auto; font-size: 1rem; }
@media (min-width: 40rem) and (max-width: 67.99rem) {
  /* Stacked, each a row: the year at the start side, the words beside it. */
  .page--about .about-return { display: grid; grid-template-columns: minmax(8.5rem, auto) minmax(0, 1fr); column-gap: clamp(1.25rem, 4vw, 2.5rem); row-gap: .4rem; justify-items: start; }
  .page--about .about-return__year { grid-row: 1 / span 4; font-size: clamp(3.25rem, 1rem + 6vw, 4.5rem); }
  .page--about .about-return > :not(.about-return__wheel, .about-return__year) { grid-column: 2; }
  .page--about .about-return__era { margin-block-start: 0; }
  .page--about .about-return__go { margin-block-start: .25rem; }
}
@media (min-width: 68rem) {
  .page--about .about-returns { --step: clamp(1rem, 2vw, 2rem); grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page--about .about-return:nth-child(1) { margin-block-start: calc(var(--step) * 2); }
  .page--about .about-return:nth-child(2) { margin-block-start: var(--step); }
}

.page--about .about-record__intro { display: grid; gap: var(--space-s) var(--about-pair); align-items: center; justify-items: start; }
.page--about .about-record__intro > .lead { max-inline-size: 36em; color: var(--fg-muted); }
.page--about .about-record__hint { max-inline-size: none; font-size: 1rem; }
@media (min-width: 62rem) { .page--about .about-record__intro { grid-template-columns: minmax(0, 1fr) auto; } }

/* The dial, and the card under it. --card-pad is the card's padding; --about-cog the wheel beside the entry;
   --about-slot the room that wheel and a photograph's plate may take; --about-cap the room of a caption. */
.page--about .about-record__dial { --card-pad: clamp(1.5rem, 1rem + 2.4vw, 3rem); --about-cog: 11rem; --about-slot: 100%; --about-cap: 4.75rem; position: relative; margin-block-start: clamp(1.25rem, 1rem + 1.5vw, 2.5rem); scroll-margin-block-start: 1.5rem; }
.page--about .about-record .wheel-dial.is-enhanced .wheel-dial__controls { margin-block: .5rem clamp(1.25rem, 1rem + 1.5vw, 2rem); }

/* The eras' colours are the set piece's own, and it hands them to the page on every entry (wheel.css):
   --w-era the era's colour, --w-on-era the words that pass on it, --w-era-tint its pale tint. While the dial
   runs, the entry it shows is a card in its era's colour; the three stops where the record has nothing (the
   low points) stand on the tint, pale. As a plain list every entry stands on its tint. */
.page--about .about-record .wheel-dial.is-enhanced .wheel-dial__entries { justify-items: stretch; }
.page--about .about-record .wheel-dial.is-enhanced .wheel-dial__entries > li {
  --about-veil: var(--white-a24);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-inline-size: none;
  padding: var(--card-pad);
  border-radius: var(--about-big) var(--r-panel) var(--r-panel) var(--r-panel);
  background: var(--w-era, var(--plum));
  color: var(--w-on-era, var(--white));
  text-align: start;
  transition: opacity var(--dur-2) ease var(--dur-2);          /* the card that leaves waits for the one that arrives: no ground shows between two colours */
}
.page--about .about-record .wheel-dial.is-enhanced .wheel-dial__entries > li[data-dial-low] { --about-veil: var(--white-a60); background: var(--w-era-tint, var(--blush)); color: var(--ink); }
/* "Back" is cranberry on the dial's rim, where it is a line. As a card it is wine: cranberry is the accent, never a field. */
.page--about .about-record .wheel-dial.is-enhanced .wheel-dial__entries > li[data-era="back"]:not([data-dial-low]) { background: var(--wine); }
.page--about .about-record .wheel-dial.is-enhanced .wheel-dial__entries > li.is-current { z-index: 1; transition-delay: 0s; }
/* While the hand has the dial, or it coasts from a flick, the cards change without a fade. (The set piece says so
   itself, wheel.css .is-flung; the transition above outweighed it, so every stop that passed faded two cards.) */
.page--about .about-record .wheel-dial.is-enhanced.is-flung .wheel-dial__entries > li { transition: none; }
/* Live (about.js): the card on show is the entry marked .is-shown: the stop the dial came to rest on, or one it
   dwelt on under the hand. The set piece marks every stop that passes under the index (.is-current); a card for
   each of those, thirty in one flick, is what dropped frames in Safari. */
.page--about .about-record__dial.is-live .wheel-dial.is-enhanced .wheel-dial__entries > li.is-current:not(.is-shown) { z-index: auto; opacity: 0; pointer-events: none; transition-delay: var(--dur-2); }
.page--about .about-record__dial.is-live .wheel-dial.is-enhanced .wheel-dial__entries > li.is-shown { z-index: 1; opacity: 1; pointer-events: auto; transition-delay: 0s; }
.page--about .about-record .wheel-dial__when { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; max-inline-size: none; margin: 0 0 .9rem; }
.page--about .about-record .wheel-dial__when > span:first-child { color: var(--heading); font-family: var(--font-display); font-size: var(--fs-sub); font-weight: var(--fw-display); line-height: 1; letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums lining-nums; }
.page--about .about-record .wheel-dial__era { margin-inline-start: 0; font-size: 1rem; font-weight: var(--fw-strong); line-height: var(--lh-ui); }
.page--about .about-record .wheel-dial__title { max-inline-size: 22em; margin: 0 0 .5rem; font-size: var(--fs-sub); line-height: var(--lh-sub); letter-spacing: var(--tracking-sub); text-wrap: balance; }
.page--about .about-record .wheel-dial__text { max-inline-size: 34em; font-size: var(--fs-body); font-weight: var(--fw-text); line-height: var(--lh-text); }
/* On the card: everything takes the card's own words; the era's chip is a veil of white with its tooth in the same. */
.page--about .about-record .wheel-dial.is-enhanced :is(.wheel-dial__when, .wheel-dial__when > span:first-child, .wheel-dial__title, .wheel-dial__text) { color: inherit; }
.page--about .about-record .wheel-dial.is-enhanced .wheel-dial__when > span:first-child { font-size: clamp(2.75rem, 2rem + 3.6vw, 5rem); line-height: .95; }
.page--about .about-record .wheel-dial.is-enhanced .wheel-dial__era { --w-era: currentColor; background: var(--about-veil); color: inherit; }
.page--about .about-record .wheel-dial.is-enhanced .wheel-dial__title { font-size: calc(clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem) * var(--display-scale)); }
/* Without scripts the record is a list: columns of soft cards, each on its era's tint. */
.page--about .about-record .wheel-dial:not(.is-enhanced) .wheel-dial__entries { grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); gap: var(--space-s); }
.page--about .about-record .wheel-dial:not(.is-enhanced) .wheel-dial__entry { --row: var(--white-a60); --w-night: var(--white-a60); padding: 1.25rem clamp(1.125rem, 1rem + .8vw, 1.5rem) 1.5rem; border-radius: var(--r-card); background: var(--w-era-tint, var(--blush)); }

/* The photographs of the record. Plain: a row of them under the list. */
.page--about .about-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(11rem, 42%), 1fr)); gap: var(--space-l) var(--space-m); align-items: start; margin-block-start: var(--about-gap); }
.page--about .about-shots__wheel { display: none; }
.page--about .about-shot { display: grid; gap: .6rem; justify-items: center; align-content: start; margin: 0; text-align: center; }
.page--about .about-shot > .frame { inline-size: 100%; }
.page--about .about-shots .about-shot--cog > .frame { border-radius: 50%; }
.page--about .about-shot > figcaption { max-inline-size: 22em; color: var(--fg-muted); font-size: 1rem; line-height: 1.4; text-wrap: balance; }
.page--about .about-record__end { grid-column: 1 / -1; max-inline-size: none; color: var(--fg-muted); font-size: 1rem; line-height: 1.4; text-align: center; text-wrap: balance; }
.page--about .about-record__dial.is-live :is(.about-shot > figcaption, .about-record__end) { color: inherit; }

/* Live (about.js, once the dial is running): the wheel stands in the card, at its foot on a narrow screen
   and at its end side on a wide one. It turns a tooth for every stop the dial passes; where a stop has a
   round photograph, that opens inside the wheel like an iris and the rim stays round it; a row of people
   is a plate with a toothed edge, and stands alone. */
.page--about .about-record__dial.is-live .wheel-dial.is-enhanced .wheel-dial__entries > li { padding-block-end: calc(var(--card-pad) + var(--about-cog) + var(--about-cap) + var(--space-m)); }
.page--about .about-record__dial.is-live .about-shots {
  --about-wheel: var(--white);                    /* white on a card of colour… */
  position: absolute;
  z-index: 2;
  inset-block-end: calc(var(--about-entries-bottom, 0px) + var(--card-pad));
  inset-inline: var(--card-pad);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--about-cog) var(--about-cap);
  gap: 0;
  justify-items: center;
  margin: 0;
  color: var(--on, var(--ink));                   /* about.js copies the card's own --w-on-era here */
  pointer-events: none;
}
.page--about .about-record[data-about-low] .about-record__dial.is-live .about-shots { --about-wheel: var(--cranberry); }   /* …and the logo's cranberry on a pale one */
.page--about .about-record__dial.is-live .about-shots__wheel { grid-area: 1 / 1; display: block; inline-size: var(--about-cog); aspect-ratio: 1; color: var(--about-wheel); transition: opacity var(--dur-3) ease; }
.page--about .about-shots__turn { display: block; inline-size: 100%; block-size: 100%; rotate: var(--about-turn, 0deg); transition: rotate var(--dur-4) var(--ease-out); }
.page--about .about-record__dial.is-live .about-shots.has-plate .about-shots__wheel { opacity: 0; }
.page--about .about-record__dial.is-live .about-shot {
  grid-area: 1 / 1 / 3 / 2;
  grid-template-rows: var(--about-cog) auto;
  gap: 0;
  align-items: center;
  inline-size: min(100%, var(--about-slot));
  clip-path: circle(0% at 50% calc(var(--about-cog) / 2));
  transition: clip-path var(--dur-3) var(--ease-in-out);
}
.page--about .about-record__dial.is-live .about-shot.is-current { clip-path: circle(150% at 50% calc(var(--about-cog) / 2)); transition-duration: var(--dur-5); }
.page--about .about-record__dial.is-live .about-shot--cog > .frame { inline-size: calc(var(--about-cog) * .78); }
/* A plate is never taller than the wheel it stands in for, and its caption follows it closely. */
.page--about .about-record__dial.is-live .about-shot:not(.about-shot--cog) { grid-template-rows: auto auto; align-content: center; row-gap: .6rem; block-size: 100%; }
.page--about .about-record__dial.is-live .about-shot--landscape > .frame { inline-size: min(100%, calc(var(--about-cog) * 4 / 3)); }
.page--about .about-record__dial.is-live .about-shot--wide > .frame { inline-size: min(100%, calc(var(--about-cog) * 16 / 9)); }
.page--about .about-record__dial.is-live .about-shot:not(.about-shot--cog) > figcaption { padding-block-start: 0; }
.page--about .about-record__dial.is-live .about-shot > figcaption { align-self: start; padding-block-start: .6rem; }
.page--about .about-record__dial.is-live .about-record__end { grid-area: 2 / 1; align-self: start; padding-block-start: .6rem; opacity: 0; transition: opacity var(--dur-4) ease; }
.page--about .about-record__dial.is-live .about-record__end.is-on { opacity: 1; transition-delay: var(--dur-3); }
@media (min-width: 48rem) {
  .page--about .about-record__dial { --about-cog: clamp(12.5rem, 9rem + 9vw, 16rem); --about-slot: clamp(15rem, 10rem + 12vw, 20rem); }
  .page--about .about-record__dial.is-live .wheel-dial.is-enhanced .wheel-dial__entries > li { justify-content: center; min-block-size: calc(var(--about-cog) + var(--about-cap) + var(--card-pad) * 2); padding-block-end: var(--card-pad); padding-inline-end: calc(var(--card-pad) * 2 + var(--about-slot)); }
  .page--about .about-record__dial.is-live .about-shots { inset-block: calc(var(--about-entries-top, 0px) + var(--card-pad)) auto; inset-inline: auto var(--card-pad); inline-size: var(--about-slot); }
}

.page--about .about-record__sources { display: flex; align-items: center; gap: 1rem; max-inline-size: 54rem; margin: clamp(1.5rem, 1rem + 2vw, 3rem) auto 0; padding: .875rem 1.5rem .875rem .875rem; border-radius: var(--r-panel); background: var(--row); color: var(--fg-muted); }
.page--about .about-record__sources > .b-medallion { align-self: flex-start; }
.page--about .about-record__more { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-s); margin-block-start: clamp(1.5rem, 1rem + 2vw, 3rem); }

/* ─────────────────────────────────────────── the record in numbers ──
   Five numbers on five discs, each in the colour of its era (the set piece's: plum, coral, apricot), every
   second one a step down. */
.page--about .about-numbers__head { margin-block-end: clamp(1.75rem, 1.2rem + 2.4vw, 3.5rem); }
/* Five discs. Where they do not stand five across, the last row is centred under the one above: two, two and
   one on a phone, three and two from 36rem (on half-columns: each disc spans two). */
.page--about .about-discs { --disc: clamp(6.5rem, 4.8rem + 5.2vw, 9.75rem); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-l) var(--space-s); }
.page--about .about-disc { grid-column: span 2; }
.page--about .about-disc:nth-child(5) { grid-column: 2 / span 2; }
.page--about .about-disc { --disc-bg: var(--plum); display: grid; justify-items: center; align-content: start; gap: .9rem; text-align: center; }
.page--about .about-disc[data-about-era="first-return"] { --disc-bg: var(--coral); }
.page--about .about-disc[data-about-era="second-return"] { --disc-bg: var(--apricot); }
.page--about .about-disc__num {
  display: grid;
  place-items: center;
  inline-size: var(--disc);
  max-inline-size: none;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--disc-bg);
  color: var(--fg);                                            /* the disc wears its colour's tone (b-deep, b-warm) */
  font-family: var(--font-display);
  font-size: calc(var(--disc) * .42);
  font-weight: var(--fw-display);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums lining-nums;
}
.page--about .about-disc__label { max-inline-size: 13em; color: var(--fg-muted); line-height: 1.4; text-wrap: balance; }
.page--about .about-numbers__note { max-inline-size: 46em; margin: var(--space-xl) auto 0; color: var(--fg-muted); text-align: center; text-wrap: balance; }
@media (min-width: 36rem) {
  .page--about .about-discs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .page--about .about-disc:nth-child(4) { grid-column: 2 / span 2; }
  .page--about .about-disc:nth-child(5) { grid-column: 4 / span 2; }
}
@media (min-width: 62rem) {
  .page--about .about-discs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .page--about .about-discs > .about-disc:nth-child(n) { grid-column: auto; }
  .page--about .about-disc:nth-child(even) { margin-block-start: clamp(1.25rem, 2.6vw, 2.75rem); }
}

/* ─────────────────────────────────────────────── 5 awards: the deep band ── */
.page--about .about-awards__top { display: grid; gap: var(--space-m) var(--about-pair); align-items: end; }
.page--about .about-awards__top > .lead { max-inline-size: 34em; }
/* The title is a long one: it has the wide side of the pair, and on a phone a size that lets its last two words stand on one line. Two lines, never three. */
.page--about .about-awards .lockup { --lockup-fs: min(var(--fs-section), 6.6vw); }
.page--about .about-awards .lockup__title { max-inline-size: 22ch; }
@media (min-width: 62rem) { .page--about .about-awards__top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

/* The shelf: a soft case on the band, a rail across its head, and the five medals hanging from the rail. */
.page--about .about-shelf { position: relative; margin-block: var(--about-gap) clamp(1.5rem, 1rem + 2vw, 3rem); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem) clamp(1rem, .25rem + 2.6vw, 2.75rem) clamp(1.5rem, 1rem + 2vw, 2.75rem); border-radius: var(--r-panel) var(--r-panel) var(--about-big) var(--r-panel); background: var(--row); }
.page--about .about-shelf__rail { position: relative; z-index: 1; display: block; block-size: .5rem; border-radius: var(--r-full); background: var(--white-a40); transform-origin: 0 50%; }
.page--about .about-medals {
  --medal: clamp(6.5rem, 3rem + 7vw, 9rem);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-l) clamp(.25rem, -.5rem + 2.4vw, 2rem);
  margin-block-start: -.25rem;
}
.page--about .about-medal { --medal-ribbon: var(--coral); display: grid; justify-items: center; align-content: start; }
.page--about .about-medal--changemaker { --medal-ribbon: var(--apricot); }
.page--about .about-medal .medal { max-inline-size: none; }
.page--about .about-medal__hang { display: grid; justify-items: center; transform-origin: 50% 0; }
.page--about .about-medal .medal__name { text-wrap: balance; }
.page--about .about-medal .medal__years { font-size: clamp(1rem, .9rem + .3vw, 1.125rem); }
.page--about .about-medal .medal__disc::after { content: none; }                      /* one ring round the years, not two */
.page--about .about-medals.is-near .about-medal__hang { will-change: transform; }
/* The one Changemaker Award among the four citations: told apart by form, a ring of six small hubs round the years. */
.page--about .about-medal--changemaker .medal__disc::before { border: 0; }
.page--about .about-medal--changemaker .medal__disc::after {
  --dot: #000 0 4%, transparent 4.7%;
  --six:
    radial-gradient(circle at 50% 5%, var(--dot)),
    radial-gradient(circle at 89% 27.5%, var(--dot)),
    radial-gradient(circle at 89% 72.5%, var(--dot)),
    radial-gradient(circle at 50% 95%, var(--dot)),
    radial-gradient(circle at 11% 72.5%, var(--dot)),
    radial-gradient(circle at 11% 27.5%, var(--dot));
  content: "";
  position: absolute;
  inset: 9%;
  border: 0;
  border-radius: 0;
  background: currentColor;
  opacity: 1;
  -webkit-mask: var(--six);
  mask: var(--six);
}
/* Under 44rem five across would squeeze the names. From 30rem they hang three and two, as medals are worn, the
   two centred under the three and a second rail to carry them (in one column at this width the case was a long
   list with its end side empty). */
@media (min-width: 30rem) and (max-width: 43.99rem) {
  .page--about .about-medals { --medal: 6.5rem; --rows: var(--space-l); position: relative; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--rows) .5rem; }
  .page--about .about-medal { grid-column: span 2; }
  .page--about .about-medal:nth-child(4) { grid-column: 2 / span 2; }
  .page--about .about-medal:nth-child(5) { grid-column: 4 / span 2; }
  .page--about .about-medals::before { content: ""; position: absolute; z-index: 1; inset-inline: 12%; inset-block-start: calc(50% + var(--rows) / 2 - .25rem); block-size: .5rem; border-radius: var(--r-full); background: var(--white-a40); pointer-events: none; }
}
/* On a phone the medals become a list in order, medal first. */
@media (max-width: 29.99rem) {
  .page--about .about-medals { --medal: 6.5rem; grid-template-columns: minmax(0, 1fr); gap: var(--space-s); }
  .page--about .about-medal { justify-items: start; }
  .page--about .about-medal .medal { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--space-m); justify-items: start; text-align: start; }
  .page--about .about-medal__hang { grid-row: 1 / span 2; }
  .page--about .about-medal .medal__name { align-self: end; margin-block-start: calc(var(--medal) * .36); }
  .page--about .about-medal .medal__kind { align-self: start; }
}

.page--about .about-awards__foot { display: grid; gap: var(--space-l) clamp(1.5rem, 1rem + 3vw, 4rem); align-items: start; }
.page--about .about-awards__foot .b-number { --fs-stat: clamp(3.25rem, 2.4rem + 3.4vw, 5.5rem); }
.page--about .about-tally { display: grid; gap: .35rem; }
.page--about .about-awards__rows { display: grid; gap: .625rem; }
.page--about .about-awards__rows > li,
.page--about .about-sponsor__row { display: flex; align-items: flex-start; gap: 1rem; max-inline-size: none; padding: 1rem 1.375rem 1rem 1rem; border-radius: var(--r-card); background: var(--row); }
/* The two tallies side by side from 30rem (one under the other they left the end side of the band empty at 588). */
@media (min-width: 30rem) {
  .page--about .about-awards__foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page--about .about-awards__rows { grid-column: 1 / -1; }
}
/* The two notes keep the band's whole width, one under the other, until the foot has three columns (side by
   side at 800 each was five short lines). */
@media (min-width: 72rem) {
  .page--about .about-awards__foot { grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 7fr); }
  .page--about .about-awards__rows { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
}

/* ────────────────────────────────── 6 our Rotary family, and the sponsor ──
   The gears stand in a white panel on cream (the set piece's rows and medallions take the panel's own
   row colour); the sponsor's one credit is the plum panel that leans on it. */
.page--about .about-family__head { display: grid; gap: var(--space-m) var(--about-pair); align-items: end; margin-block-end: clamp(1.75rem, 1.2rem + 2.4vw, 3.5rem); }
.page--about .about-family__head > .lead { max-inline-size: 32em; color: var(--fg-muted); }
@media (min-width: 56rem) { .page--about .about-family__head { grid-template-columns: minmax(0, max-content) minmax(18rem, 1fr); } }   /* the title on one line (in equal halves its last word fell alone between 56 and 68rem) */
.page--about .about-family__gears { --bg: var(--white); padding-block-end: calc(clamp(1.5rem, 1rem + 2.4vw, 3rem) + var(--space-l)); border-radius: var(--about-big) var(--r-panel) var(--r-panel) var(--r-panel); }
.page--about .about-family .wheel-family { --family-size: 34rem; }
.page--about .about-family .wheel-family .wheel-family__captions > li { font-weight: var(--fw-text); }
.page--about .about-sponsor { --fact-wheel: clamp(9rem, 6rem + 12vw, 15rem); z-index: 1; display: grid; gap: var(--space-m) clamp(1.25rem, 1rem + 2vw, 2.5rem); align-items: start; overflow: clip; margin-block-start: calc(var(--space-l) * -1); border-radius: var(--r-panel) var(--r-panel) var(--about-big) var(--r-panel); }
.page--about .about-sponsor > :not(.about-sponsor__wheel) { position: relative; }
.page--about .about-sponsor__words { display: grid; gap: var(--space-s); justify-items: start; }
.page--about .about-sponsor__words > .lead { max-inline-size: 34em; }
@media (min-width: 40rem) { .page--about .about-sponsor { grid-template-columns: auto minmax(0, 1fr); } }
/* It steps in from the start side by two rem or more, or not at all: a few pixels of step (it was six at 588) read as a mistake. */
@media (min-width: 50rem) { .page--about .about-sponsor { margin-inline-start: clamp(2rem, -4rem + 12vw, 10rem); } }
/* On a phone the row's medallion stands over its words, which then have the row's whole width. */
@media (max-width: 29.99rem) { .page--about .about-sponsor__row { flex-direction: column; gap: .625rem; } }

/* ──────────────────────────────────────────────────────────── 7 questions ── */
.page--about .about-faq__panel { --row: var(--white); --row-hover: var(--blush); display: grid; gap: var(--space-l) clamp(2rem, 1rem + 4.5vw, 5.5rem); border-radius: var(--r-panel) var(--about-big) var(--r-panel) var(--r-panel); }
.page--about .about-faq__side { display: grid; gap: var(--space-l); align-content: start; }
@media (min-width: 60rem) {
  .page--about .about-faq__panel { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
  .page--about .about-faq__side { position: sticky; inset-block-start: calc(var(--header-h) + 1.5rem); }
}
/* On a phone the panel keeps less at its sides, so a question has room for its words (they ran to three lines). */
@media (max-width: 29.99rem) {
  .page--about .about-faq__panel { padding-inline: .75rem; }
  .page--about .about-faq__title { padding-inline-start: .5rem; }
}

/* ────────────────────────────────────────────────────────────── 8 the call ── */
.page--about .about-close { --bg: var(--magenta); }   /* aubergine: the palette's deepest field (the tone is b-deep, in the markup). Not clipped: its row of teeth stands above its head (the large wheel is clipped by its own box, below) */
.page--about .about-close__sky { position: absolute; inset: 0; overflow: clip; pointer-events: none; }
.page--about .about-close__wheel { --size: clamp(18rem, 10rem + 34vw, 40rem); position: absolute; inset-block-start: 0; inset-inline-end: 0; inline-size: var(--size); aspect-ratio: 1; margin: calc(var(--size) * -.3) calc(var(--size) * -.28) 0 0; color: var(--wheel-colour); opacity: .14; }
.page--about .about-close__turn { inline-size: 100%; block-size: 100%; }
.page--about .about-close__inner { position: relative; display: grid; gap: var(--about-gap); }
.page--about .about-close__head { display: grid; gap: var(--space-l) var(--space-xl); justify-items: start; align-items: end; }
@media (min-width: 62rem) { .page--about .about-close__head { grid-template-columns: minmax(0, 1fr) auto; } }
.page--about .about-door { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; min-block-size: clamp(13rem, 10rem + 8vw, 17rem); overflow: clip; border-radius: var(--about-big) var(--r-panel) var(--r-panel) var(--r-panel); }
/* A white door on the deep ground reads as a pale panel again: ink words, the cranberry button. */
.page--about .about-door.b-panel--white { --fg: var(--ink); --fg-muted: var(--ink-soft); --heading: var(--ink); --btn-bg: var(--cranberry); --btn-fg: var(--white); color: var(--ink); }
.page--about .about-door__title { margin-block-start: .5rem; }
.page--about .about-door__line { max-inline-size: 22em; color: var(--fg-muted); }
.page--about .about-door__go { align-self: flex-end; margin-block-start: auto; }
@media (max-width: 55.99rem) {
  /* Stacked, each door a row: medallion, words, the arrow at the end. */
  .page--about .about-door { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: clamp(1rem, 3vw, 1.5rem); row-gap: .25rem; min-block-size: 0; border-start-start-radius: 3rem; }
  .page--about .about-door > .b-medallion { --m: 3.5rem; grid-row: 1 / span 2; }
  .page--about .about-door__title { grid-column: 2; margin-block-start: 0; align-self: end; }
  .page--about .about-door__line { grid-column: 2; align-self: start; }
  .page--about .about-door__go { grid-area: 1 / 3 / 3 / 4; align-self: center; margin: 0; }
}
@media (max-width: 29.99rem) {
  /* A phone: the arrow stands beside the door's name only, and the line under it runs the door's whole width (beside the arrow it was six short lines). */
  .page--about .about-door { column-gap: .875rem; }
  .page--about .about-door > .b-medallion { --m: 3rem; align-self: start; }
  .page--about .about-door__title { align-self: center; }
  .page--about .about-door__line { grid-column: 2 / -1; }
  .page--about .about-door__go { grid-area: 1 / 3 / 2 / 4; inline-size: 2.5rem; block-size: 2.5rem; }
}

/* ──────────────────────────────────────────────────────── reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .page--about .about-shots__wheel,
  .page--about .about-shots__turn,
  .page--about .about-record__dial.is-live .about-shot,
  .page--about .about-record__dial.is-live .about-record__end,
  .page--about .about-record .wheel-dial.is-enhanced .wheel-dial__entries > li,
  .page--about .about-strand__mark > :is(.icon, .wheel),
  .page--about .about-hero .about-chip > .b-medallion { transition: none; }
}