/* ═══════════════════════════════════════════════════════════════════════════
   Fun-Tastic 悠樂長 · pages/about.css
   Page-only styles for /about/. Loaded after components.css and not layered, so it
   wins over the design system without !important. Shared components are only ever
   adjusted under .page--about; everything else here is a block of this page.

   Contents
     0  Anchors            3  Areas (tab list)      6  Registration
     1  Hero, founding     4  People                7  Questions
     2  Creed              5  Timeline              8  Motion states

   Rules of the house: logical properties only, sizes in rem / em / viewport units,
   line-heights and tracking from the per-language tokens, colours from tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────── 0 Anchors ──
   Other pages link to these four sections (the home page's story links to #journey).
   A jump lands with the section's heading 2.5rem under the sticky header, in the
   section's own colour: html already keeps the header's height clear (scroll-padding),
   so the margin here only takes the section's top padding back out.
   about.js re-lands once the layout has settled, for browsers that differ. */

.page--about :is(#people, #journey, #registration, #faq) {
  scroll-margin-block-start: calc(1.5rem - var(--section-pad));
}

/* ───────────────────────────────────────────────────── 1 Hero, founding ── */

.page--about .about-hero__photo { max-inline-size: 30rem; }
@media (max-width: 55.99rem) {
  /* On a phone the timeline's hall photograph is the big one, so this one steps back a little. */
  .page--about .about-hero__photo { inline-size: min(100%, 21rem); }
}

/* The two counted years, joined by the bridge: an orchid dot at 2021, a mint dot at 2022.
   <ol class="founding"> <li class="founding__year"> dot · numeral · label </li> × 2 </ol>
   The label sits directly under its numeral (in Chinese and Korean it begins with a counter word). */
.founding {
  --dot: 1.25rem;
  --arc-h: clamp(2.25rem, 1.5rem + 3.2vw, 4rem);
  --gap: clamp(1rem, .4rem + 2.6vw, 2.5rem);
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gap);
  inline-size: 100%;
  max-inline-size: 38rem;
  margin-block-start: clamp(.5rem, 1.6vw, 1.25rem);
  padding-block-start: var(--arc-h);
}
.founding__year { display: grid; justify-items: start; align-content: start; gap: .3rem; min-inline-size: 0; }
.founding__dot {
  position: relative;
  z-index: 1;
  inline-size: var(--dot);
  block-size: var(--dot);
  margin-block-end: .6rem;
  border-radius: 50%;
  background: var(--orchid);
}
.founding__dot--mint { background: var(--mint); }
.founding__arc {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: calc(var(--dot) / 2);
  inline-size: calc(50% + var(--gap) / 2);
  block-size: calc(var(--arc-h) + var(--dot) / 2);
  overflow: visible;
  fill: none;
  stroke: var(--heading);
  stroke-width: 5;   /* the bridge's own weight (components.css, .bridge__arc) */
  stroke-linecap: round;
  pointer-events: none;
}
[dir="rtl"] .founding__arc { transform: scaleX(-1); }   /* it draws from the start side */
.founding__num {
  max-inline-size: none;
  color: var(--heading);
  font-family: var(--font-latin);
  font-size: clamp(2.5rem, 1.8rem + 3.9vw * var(--ts), 5rem);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -0.035em;   /* lint-ok: Western digits only */
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.founding__label {
  max-inline-size: 15em;
  color: var(--fg-muted);
  line-height: calc(var(--lh-text) - .15);
  text-wrap: balance;
}

/* ────────────────────────────────────────────────────────────── 2 Creed ── */

.namesake { display: grid; gap: clamp(2rem, 1rem + 4.5vw, 5rem); align-items: center; }
@media (min-width: 56rem) {
  .namesake { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* 悠樂長 as three round signs: one character to a circle, the way shop signs are hung in Hong Kong,
   and three circles side by side are also the 老友記, the old friends, of the sentence beside them.
   The discs are the three mists; where two overlap they multiply, as the logo's colours do.
   Everything is sized from the row's own width, so it is the same picture at 320px and at 1440px. */
.seals {
  position: relative;
  inline-size: 100%;
  max-inline-size: 42rem;
  aspect-ratio: 100 / 36;
  container-type: inline-size;
  isolation: isolate;
}
.seals__disc,
.seals__sign {
  position: absolute;
  inset-block-start: 0;
  inline-size: 36%;
  block-size: 100%;
  border-radius: 50%;
}
.seals__disc { mix-blend-mode: multiply; }
.seals__disc:nth-child(1), .seals__sign:nth-child(4) { inset-inline-start: 0; }
.seals__disc:nth-child(2), .seals__sign:nth-child(5) { inset-inline-start: 32%; }
.seals__disc:nth-child(3), .seals__sign:nth-child(6) { inset-inline-start: 64%; }
.seals__disc:nth-child(1) { background: var(--orchid-mist); }
.seals__disc:nth-child(2) { background: var(--indigo-mist); }
.seals__disc:nth-child(3) { background: var(--mint-mist); }
.seals__sign {
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;   /* Safari: keeps the round clip while the character moves inside it */
  color: var(--indigo);
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 14vw, 7.5rem);   /* browsers without container units */
  font-size: 21cqi;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0em;
}
.seals__sign > span { display: block; }

.namesake__text { display: grid; gap: var(--space-s); justify-items: start; }
/* The organisation's own line, between an orchid dot and a mint dot: the sentence is the bridge. */
.namesake__tagline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: .9rem;
  max-inline-size: none;
  margin-block-start: .5rem;
  padding: 1rem 1.25rem;
  border-radius: var(--r-row);
  background: var(--row);
  color: var(--heading);
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: var(--fw-sub);
  line-height: var(--lh-sub);
  letter-spacing: var(--tracking-sub);
  text-wrap: balance;
}
.namesake__tagline::before,
.namesake__tagline::after {
  content: "";
  inline-size: .8rem;
  block-size: .8rem;
  border-radius: 50%;
  background: var(--orchid);
}
.namesake__tagline::after { background: var(--mint); }

/* The belief, on indigo, with the mission leaning into its corner the way the two figures of the logo do.
   <div class="credo"> <article class="belief panel panel--indigo">…</article> <article class="mission panel panel--mist-orchid">…</article> </div> */
.credo {
  --pad: clamp(1.5rem, 1rem + 2.6vw, 3.25rem);   /* the panel padding of the design system */
  --lean: 1.25rem;
  margin-block-start: clamp(3rem, 2rem + 5vw, 6.5rem);
}
.belief { padding-block-end: calc(var(--pad) + var(--lean)); }
.belief > * + * { margin-block-start: 0; }
/* The largest sentence on the page after the h1. */
.belief__statement {
  max-inline-size: none;
  margin-block-start: clamp(.9rem, 2vw, 1.5rem);
  color: var(--heading);
  font-family: var(--font-display);
  font-size: calc(clamp(2.1rem, 1.42rem + 2.9vw * var(--ts), 3.75rem) * var(--display-scale));
  font-weight: var(--fw-display);
  line-height: calc(var(--lh-display) * 1.06);   /* five to ten lines, not a two-line heading: a little more air */
  letter-spacing: var(--tracking-display);
  text-wrap: pretty;
  /* Long German, Russian and Filipino words may break; "technology" and "belief" may not. */
  hyphens: var(--hyphens-display);
  -webkit-hyphens: var(--hyphens-display);
  hyphenate-limit-chars: 13 5 5;
  -webkit-hyphenate-limit-before: 5;
  -webkit-hyphenate-limit-after: 5;
  overflow-wrap: anywhere;
}
.belief__foot { display: grid; margin-block-start: clamp(1.5rem, 3vw, 2.5rem); }
.belief__foot > .lead { color: var(--fg-muted); }
.mission {
  position: relative;
  z-index: 1;
  margin-block-start: calc(var(--lean) * -1);
  margin-inline-start: clamp(1.25rem, 7vw, 3.5rem);
}
.mission > h3 { font-size: var(--fs-sub); }
@media (min-width: 62rem) {
  .credo { --mission-w: clamp(22rem, 38vw, 30rem); --lean: 5rem; }
  /* Under the statement the belief keeps to the start side: the end side is where the mission arrives. */
  .belief { padding-block-end: var(--pad); }
  .belief__foot {
    grid-template-columns: minmax(0, 1fr) calc(var(--mission-w) + 2rem);
    min-block-size: calc(var(--lean) + 2rem);
  }
  .mission {
    inline-size: var(--mission-w);
    margin-block-start: calc((var(--pad) + var(--lean)) * -1);
    margin-inline: auto var(--pad);
  }
}

/* ────────────────────────────────────────────────── 3 Areas (tab list) ──
   The design system's tabs (data-tabs: keyboard, state, sliding thumb), set as a list of four rows.
   Four long paragraphs are heavy in fifteen languages, so one is in view at a time.
   Without JavaScript the tab list is hidden by the design system and all four panels show. */

.areas__body { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); }
@media (min-width: 56rem) {
  .areas__body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.areas__tabs {
  position: relative;
  align-self: start;
  display: grid;
  gap: .25rem;
  padding: .4rem;
  border-radius: 2.75rem;
  background: var(--row);
  isolation: isolate;
}
.areas__tab {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 1rem;
  inline-size: 100%;
  min-block-size: 4.5rem;
  padding-block: .5rem;
  padding-inline: .5rem 1.5rem;
  border-radius: var(--r-full);
  color: var(--heading);
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: var(--fw-sub);
  line-height: var(--lh-sub);
  letter-spacing: var(--tracking-sub);
  text-align: start;
  transition: color var(--dur-2) ease, background-color var(--dur-2) ease, scale var(--dur-1) var(--ease-out);
}
.areas__tab:active { scale: .985; }
.areas__tab[aria-selected="true"] { color: var(--btn-fg); }
.areas__tabs:not(.has-thumb) .areas__tab[aria-selected="true"] { background: var(--btn-bg); }
.areas__icon { transition: background-color var(--dur-2) ease, color var(--dur-2) ease; }
.areas__tab[aria-selected="true"] .areas__icon { background: var(--white); color: var(--indigo); }
@media (hover: hover) and (pointer: fine) {
  .areas__tab:not([aria-selected="true"]):hover { background: var(--bg); }
}

.areas__panels { display: grid; gap: 1.25rem; min-inline-size: 0; }
.areas__panel { display: grid; justify-items: start; align-content: start; gap: 1rem; }
.areas__panel > * + * { margin-block-start: 0; }   /* the grid gap spaces them */
.areas__panel > h3 { margin-block-start: .5rem; }
/* Until the tabs are wired, show what they are about to show (the first panel), so nothing jumps. */
html.js:not(.ft-failsafe) .areas__tabs:not(.has-thumb) + .areas__panels > .areas__panel:not(:first-child) { display: none; }
/* Without JavaScript there are no tabs (the design system hides a tab list; this page's own display rule
   must say so again): the four panels are simply all there, two by two where there is room. */
html:not(.js) .areas__tabs { display: none; }
html:not(.js) .areas__body { grid-template-columns: minmax(0, 1fr); }
html:not(.js) .areas__panels { grid-template-columns: repeat(auto-fit, minmax(min(30rem, 100%), 1fr)); }
.areas__more { margin-block-start: clamp(2rem, 4vw, 3rem); }

/* ───────────────────────────────────────────────────────────── 4 People ──
   Six people, no cards: a monogram with its ring, a name, a role, and each affiliation as its own dot row.
   Affiliations are long in German and Russian and carry Latin names inside other scripts, so the
   columns are wide and every person is simply as tall as their own rows. */

.people__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: clamp(2.75rem, 2rem + 3.5vw, 4.75rem) clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: start;
}
.person {
  --hue: var(--orchid);
  --hue-text: var(--orchid-deep);
  --dot-a: var(--hue);
  --dot-b: var(--hue);
  display: flex;            /* the name sits beside the monogram, and under it when there is no room (320px, largest text) */
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem 1.35rem;
  max-inline-size: none;
}
.person--mint { --hue: var(--mint); --hue-text: var(--mint-deep); }
.page--about .person__mark { --size: 5.25rem; --gap: .55rem; position: relative; margin: var(--gap); }
.person__mark::after {
  content: "";
  position: absolute;
  inset: calc(var(--gap) * -1);
  border: 3px solid var(--hue);
  border-radius: 50%;
  pointer-events: none;
}
.person__who { flex: 1 1 9.5rem; display: grid; gap: .25rem; min-inline-size: 0; }
.person__name { font-size: var(--fs-sub); }
.person__role { color: var(--hue-text); font-size: var(--fs-lead); font-weight: var(--fw-strong); line-height: var(--lh-sub); }
.page--about .person__affs { flex: 1 0 100%; font-size: var(--fs-small); }
/* An organisation's English name inside German or Russian text is not hyphenated by that language's rules. */
.page--about .org { hyphens: manual; -webkit-hyphens: manual; }
@media (min-width: 62rem) {
  .person { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; }
  .person__who { flex: none; }
  .page--about .person__mark { --size: 7.5rem; --gap: .65rem; }
  .page--about .person__affs { flex: none; align-self: stretch; }
}

/* ─────────────────────────────────────────────────────────── 5 Timeline ──
   <div class="timeline">
     <span class="rail"><span class="rail__fill"></span></span>            the line; the fill draws with the scroll
     <div class="timeline__list" role="list">
       <div class="year">                                                   one box per year
         <span class="year-mark">2026</span>                                ghost numeral, laid over the year's rows
         <div class="moment" role="listitem"> stop · text (date, title, body) · photographs </div> …
       </div> …
     </div>
   </div>
   One column on phones and tablets: the rail, then everything beside it. From 62rem the photographs
   move to a column of their own on the end side, and the year stays in view behind them while its
   entries pass (ten of the fifteen are in 2026: the numeral holding still is what says so). */

.timeline {
  --rail-w: 2.75rem;
  --stop: 1.5rem;
  --pill: 2.25rem;
  --ghost-fs: min(7rem, 24vw);
  --first-pad: calc(var(--ghost-fs) * .8 + 1.1rem);
  position: relative;
  isolation: isolate;
}
.rail {
  position: absolute;
  z-index: 0;
  inset-block: calc(var(--first-pad) + var(--pill) / 2) 0;
  inset-inline-start: calc(var(--stop) / 2 - 2px);
  inline-size: 4px;
  border-radius: 2px;
  background: var(--white);
}
.rail__fill { position: absolute; inset: 0; border-radius: inherit; background: var(--heading); transform-origin: 50% 0; }
.timeline__list,
.year {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(2.5rem, 1.8rem + 3vw, 4rem);
}

.year-mark {
  grid-column: 1;
  z-index: 0;
  align-self: start;
  justify-self: start;
  margin-inline-start: var(--rail-w);
  color: var(--ghost);
  font-family: var(--font-latin);
  font-size: var(--ghost-fs);
  font-weight: 700;
  line-height: .8;
  letter-spacing: -0.04em;   /* lint-ok: Western digits only */
  font-variant-numeric: lining-nums;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.moment {
  position: relative;
  z-index: 1;
  grid-column: 1;
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  align-items: start;
  row-gap: 1.5rem;
  max-inline-size: none;
}
.moment--first { padding-block-start: var(--first-pad); }
/* The line ends at the last stop: under it, a strip of the ground covers the rail (and nothing else). */
.year:last-child > .moment:last-child::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: calc(var(--pill) / 2) 0;
  inset-inline-start: 0;
  inline-size: var(--stop);
  background: var(--bg);
}
.moment__stop {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  inline-size: var(--stop);
  block-size: var(--stop);
  margin-block-start: calc((var(--pill) - var(--stop)) / 2);
  border: 4px solid var(--bg);
  border-radius: 50%;
  background: var(--dot-a);
}
.moment--b .moment__stop { background: var(--dot-b); }
.moment__text { grid-column: 2; grid-row: 1; display: grid; justify-items: start; gap: .6rem; min-inline-size: 0; }
.moment__date {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--pill);
  max-inline-size: 100%;
  padding: .25rem .95rem;
  border-radius: 1.2rem;
  background: var(--row);
  color: var(--heading);
  font-size: var(--fs-small);
  font-weight: var(--fw-strong);
  line-height: var(--lh-ui);
  font-variant-numeric: tabular-nums lining-nums;
}
.moment__title { margin-block-start: .2rem; font-size: var(--fs-sub); }
.moment__body { max-inline-size: 32em; }

/* The newest entry closes the timeline: a larger title and body, a ringed stop (the ring of the people's
   monograms), its counted number beside the text, and its photographs under it (.finale, below). */
.moment--latest .moment__title { font-size: calc(clamp(1.6rem, 1.25rem + 1.5vw * var(--ts), 2.5rem) * var(--display-scale)); }
.moment--latest .moment__body { font-size: var(--fs-lead); line-height: calc(var(--lh-text) - .1); }
.moment--latest .moment__stop { box-shadow: 0 0 0 3px var(--dot-a); }
.moment--latest.moment--b .moment__stop { box-shadow: 0 0 0 3px var(--dot-b); }
.moment__stat { grid-column: 2; }

/* The Lions Clubs thanks (1 June 2026), Fun-Tastic's biggest recognition: an orchid tag over the date, the
   title at the newest entry's size, and an orchid ringed stop whichever side the entry falls on. */
.moment__honour {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem 1rem .3rem .8rem;
  border-radius: 1.2rem;
  background: var(--orchid);
  color: var(--white);
  font-size: var(--fs-small);
  font-weight: var(--fw-strong);
  letter-spacing: var(--tracking-ui);
  line-height: var(--lh-ui);
}
.moment__honour::before { content: ""; inline-size: .6rem; block-size: .6rem; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 .22rem var(--orchid), 0 0 0 .34rem var(--white); }
.moment--honour .moment__title { font-size: calc(clamp(1.6rem, 1.25rem + 1.5vw * var(--ts), 2.5rem) * var(--display-scale)); }
.moment--honour .moment__body { font-size: var(--fs-lead); line-height: calc(var(--lh-text) - .1); }
.moment--honour .shots--pair { max-inline-size: 31rem; }
.moment--honour .moment__stop,
.timeline.is-armed .moment--honour.is-on .moment__stop { background: var(--orchid); box-shadow: 0 0 0 3px var(--orchid); }


/* Photographs of one entry: small circles and embrace frames that lean together like the figures of the logo.
   <figure class="shots shots--pair"> <div class="frame … shots__frame">…</div> × n <figcaption class="visually-hidden">…</figcaption> </figure>
   Widths are shares of the group, so the same picture holds from a 320px phone to the desktop column.
   A photograph that lies over its neighbour keeps a ring of the ground colour (a border, so the iris reveal carries it). */
.shots {
  --ring: .4rem;
  grid-column: 2;
  display: flex;
  align-items: flex-start;
  inline-size: 100%;
  isolation: isolate;
}
.shots__frame { flex: none; inline-size: 100%; }
.shots__frame + .shots__frame { z-index: 1; border: var(--ring) solid var(--bg); }
.shots--wide { max-inline-size: 19rem; }
.shots--pair { max-inline-size: 23rem; }
.shots--pair > .shots__frame:nth-of-type(1) { inline-size: 67%; }
.shots--pair > .shots__frame:nth-of-type(2) { inline-size: 41%; margin-block-start: 15%; margin-inline-start: -8%; }
.shots--pair--circles { max-inline-size: 21.5rem; }
.shots--pair--circles > .shots__frame:nth-of-type(1) { inline-size: 58%; }
.shots--pair--circles > .shots__frame:nth-of-type(2) { inline-size: 48%; margin-block-start: 12%; margin-inline-start: -6%; }
.shots--mirror { max-inline-size: 23rem; }                /* the circle first, then the wide one lying over it */
.shots--mirror > .shots__frame:nth-of-type(1) { inline-size: 43%; }
.shots--mirror > .shots__frame:nth-of-type(2) { inline-size: 65%; margin-block-start: 13%; margin-inline-start: -8%; }
.shots--three { max-inline-size: 28rem; }
.shots--three > .shots__frame:nth-of-type(1) { inline-size: 44.5%; }
.shots--three > .shots__frame:nth-of-type(2) { inline-size: 36%; margin-block-start: 13%; margin-inline-start: -4.5%; }
.shots--three > .shots__frame:nth-of-type(3) { z-index: 2; inline-size: 28.5%; margin-block-start: 3%; margin-inline-start: -4.5%; }

/* The exception: the largest picture on the page, with a second one leaning on its upper corner.
   <figure class="feature"> <div class="frame … feature__main">…</div> <div class="frame frame--circle feature__inset">…</div> <figcaption class="feature__notes"><span>…</span> × 2</figcaption> </figure> */
.feature {
  --inset: clamp(8.5rem, 34vw, 15rem);
  --up: calc(var(--inset) * .4);
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  margin-block-start: var(--up);
  isolation: isolate;
}
.feature__main { --ar: 4 / 3; }
.page--about .feature__inset {
  position: absolute;
  z-index: 1;
  inset-block-start: calc(var(--up) * -1);
  inset-inline-end: clamp(1rem, 6vw, 5rem);
  inline-size: var(--inset);
  border: .5rem solid var(--bg);
}
/* The closing entry: one larger photograph and two circles leaning on it. Real presence, and still smaller than the hall.
   <figure class="finale"> <div class="finale__shots"> <div class="frame … finale__frame">…</div> × 3 </div> <figcaption class="feature__notes">…</figcaption> </figure>
   Phones: the large one across the page, the circles on its lower edge. From 62rem: the three in a row. */
.finale { grid-column: 1 / -1; display: grid; margin-block-start: .25rem; }
.finale__shots { --ring: .5rem; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; isolation: isolate; }
.finale__frame { flex: none; inline-size: 100%; }
.finale__frame + .finale__frame { z-index: 1; border: var(--ring) solid var(--bg); }
.finale__frame:nth-of-type(2) { inline-size: 46%; margin-block-start: -15%; }
.finale__frame:nth-of-type(3) { z-index: 2; inline-size: 36%; margin-block-start: -7%; margin-inline-start: -6%; }

.feature__notes {
  display: grid;
  gap: .4rem;
  max-inline-size: 36em;
  margin-block-start: 1rem;
  margin-inline-start: var(--rail-w);   /* the pictures cross the rail; their captions keep clear of it */
  color: var(--fg-muted);
  font-size: var(--fs-small);
  line-height: calc(var(--lh-text) - .15);
}
.feature__notes > span { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .7rem; }
.feature__notes > span::before {
  content: "";
  inline-size: .55rem;
  block-size: .55rem;
  margin-block-start: calc((1lh - .55rem) / 2);
  border-radius: 50%;
  background: var(--dot-a);
}
.feature__notes > span:nth-child(even)::before { background: var(--dot-b); }

@media (min-width: 62rem) {
  .timeline { --ghost-fs: clamp(8rem, 2.5rem + 10vw, 12.5rem); --first-pad: 0rem; }
  .moment { grid-template-columns: var(--rail-w) minmax(0, 6fr) clamp(2rem, 4.5vw, 4.5rem) minmax(0, 5fr); }
  .moment--first { min-block-size: calc(var(--ghost-fs) * .8 + 1.5rem); }
  .shots, .moment__stat { grid-column: 4; grid-row: 1; }
  .feature { grid-column: 2 / -1; grid-row: 2; margin-block-start: 0; }   /* the corner above it is free on this layout */
  .feature__notes { margin-inline-start: 0; }
  .finale { grid-column: 2 / -1; grid-row: 2; }
  .finale__shots { flex-wrap: nowrap; justify-content: flex-start; }
  .finale__frame:nth-of-type(1) { inline-size: 56%; }
  .finale__frame:nth-of-type(2) { inline-size: 27%; margin-block-start: 10%; margin-inline-start: -5%; }
  .finale__frame:nth-of-type(3) { inline-size: 21%; margin-block-start: 3%; margin-inline-start: -7%; }
  .feature__main { --ar: 2.1 / 1; }
  .year-mark { justify-self: end; margin-inline-start: 0; }
}
@media (min-width: 62rem) and (prefers-reduced-motion: no-preference) {
  .year-mark { position: sticky; inset-block-start: calc(var(--header-h) + 1.5rem); }
}

/* ─────────────────────────────────────────────────────── 6 Registration ──
   The official moment: a definition list, tabular numerals, no decoration. */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
  column-gap: clamp(2rem, 5vw, 5rem);
}
.facts__row { display: grid; align-content: start; gap: .35rem; padding-block: 1.25rem; border-block-start: 1px solid var(--rule); }
.facts dt { color: var(--fg-muted); font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: var(--lh-ui); }
.facts dd {
  color: var(--heading);
  font-size: var(--fs-lead);
  font-weight: var(--fw-strong);
  line-height: var(--lh-sub);
  font-variant-numeric: tabular-nums lining-nums;
  overflow-wrap: anywhere;
}
.facts__figure { font-family: var(--font-latin); }

/* ────────────────────────────────────────────────────────── 7 Questions ── */

.questions__inner { display: grid; gap: clamp(.5rem, 3vw, 4rem); align-items: start; }
@media (min-width: 62rem) {
  .questions__inner { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .page--about .questions .section__head { margin-block-end: 0; }
}
@media (min-width: 62rem) and (prefers-reduced-motion: no-preference) {
  .page--about .questions .section__head { position: sticky; inset-block-start: calc(var(--header-h) + 2rem); }
}
.page--about .faq__a .link-arc { margin-block-start: .25rem; }
/* The address stays in one piece: it moves to the next line whole, and breaks only where a whole line cannot
   hold it. The padding makes it a 44px target; the equal negative margin keeps the line where it was. */
.page--about .faq__a a[href^="mailto:"] {
  display: inline-block;
  max-inline-size: 100%;
  margin-block: -.5rem;
  padding-block: .5rem;
  overflow-wrap: anywhere;
}

/* ────────────────────────────────────────────────────── 8 Motion states ──
   Only when scripts run, motion is allowed and the failsafe has not fired. about.js plays the set
   pieces; if it never arrives, the CSS below still shows everything after five seconds. */

@media (prefers-reduced-motion: no-preference) {
  /* the founding years and the three signs wait for about.js (data-reveal-manual); if that script never
     arrives they show themselves after five seconds. Once it is running it sets .is-waiting and takes over. */
  html.js:not(.ft-failsafe) :is(.founding, .seals):not(.is-in, .is-waiting) { animation: about-show 1ms 5s forwards; }

  /* the ring follows its monogram out, a beat later */
  html.js:not(.ft-failsafe) .person__mark::after {
    transition: transform var(--dur-5) var(--ease-pop) .26s, opacity var(--dur-3) ease .26s;
  }
  html.js:not(.ft-failsafe) .person__mark:not(.is-in)::after { opacity: 0; transform: scale(.72); }

  /* the rail's fill is drawn by the scroll; each stop lights when the line reaches it */
  html.js:not(.ft-failsafe) .timeline:not(.is-armed) .rail__fill { transform: scaleY(0); animation: about-rail 1ms 5s forwards; }
  .timeline.is-armed .rail__fill { will-change: transform; }
  .timeline.is-armed .moment__stop {
    background: var(--white);
    scale: .62;
    transition: scale var(--dur-4) var(--ease-pop), background-color var(--dur-2) ease;
  }
  .timeline.is-armed .moment.is-on .moment__stop { background: var(--dot-a); scale: 1; }
  .timeline.is-armed .moment--b.is-on .moment__stop { background: var(--dot-b); }
  .timeline.is-armed .moment--latest:not(.is-on) .moment__stop { box-shadow: 0 0 0 3px var(--white); }
}
@keyframes about-show { to { opacity: 1; } }
@keyframes about-rail { to { transform: none; } }