/* ════════════════════════════════════════════════════════════════════════
   about.css: the About page. Loaded only on /about/, after the design system
   (unlayered, so it wins). Everything is scoped to .page--about.

     1  hero           the relationship line as a row; the mark on its white disc
     2  #story         the gathering in its leaf; a short stem of four buds
     3  #bloom         the set piece: six paragraphs that take their colour, the dial beside them, the core
     4  #believe       the mission line, the tagline large over six petals, four habits, two small photographs
     5  #people        two monograms
     6  #fun-tastic    the forest panel and its definition list
     7  #languages     fifteen names that open like a bloom
     8  questions and the closing panel

   Nothing here hides content by itself. The few "until it is reached" states are switched on by
   about.js (a class it sets), only when motion is allowed, and the design system's failsafe
   (html.dt-failsafe) lifts them again.
   ════════════════════════════════════════════════════════════════════════ */

/* A statement: a short paragraph set bold at the lead size (the last line of the story, the core,
   the relationship row, the facts). It runs to several lines on a phone, so it needs more air than a
   sub-heading and less than running text: half way between the two, whatever the script. (Measured in
   Urdu: at the sub-heading's own line height the Nastaliq lines of such a paragraph touch.) */
.page--about { --lh-statement: calc((var(--lh-sub) + var(--lh-text)) / 2); }

/* Anchors: html's scroll-padding already keeps a target clear of the header. Each of these is a whole
   section with its own padding above the heading, so nothing more is added (the header's height here as
   well landed every anchor a header too low, with the end of the section before across the top). */
.page--about :is(#story, #bloom, #believe, #people, #fun-tastic, #languages, #faq) { scroll-margin-block-start: 0; }

/* ────────────────────────────────────────────────────────────── 1 hero ── */

.page--about .about-hero__rel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .9rem;
  max-inline-size: 36rem;
  padding: .55rem;
  padding-inline-end: 1.5rem;
  border-radius: 2.3rem;
  background: var(--white);
  color: var(--heading);
  font-weight: var(--fw-strong);
  line-height: var(--lh-statement);
}

.page--about .about-hero__art { display: grid; justify-items: center; }
/* The mark is a little larger than its disc and laid over it, so the disc stays a true circle. */
.page--about .about-hero__disc {
  position: relative;
  inline-size: min(100%, 25rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--white);
}
.page--about .about-hero__mark { position: absolute; inset: -4%; display: block; }
.page--about .about-hero__mark > .mark { inline-size: 100%; block-size: 100%; }
@media (max-width: 55.99rem) {
  .page--about .about-hero__art { justify-items: start; }
  .page--about .about-hero__disc { inline-size: min(52vw, 13rem); }
}

/* ───────────────────────────────────────────────────────────── 2 story ── */

.page--about .about-story__grid { display: grid; gap: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem) clamp(2rem, 1rem + 5vw, 5.5rem); align-items: start; }
.page--about .about-story__photo { max-inline-size: 40rem; }   /* the photograph is soft: never wider than 640 CSS px */
@media (min-width: 56rem) {
  .page--about .about-story__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); grid-template-rows: auto 1fr; }
  .page--about .about-story__title { grid-column: 2; grid-row: 1; }
  .page--about .about-story__photo { grid-column: 1; grid-row: 1 / span 2; position: sticky; inset-block-start: calc(var(--header-h) + 2rem); }
  .page--about .about-stem { grid-column: 2; grid-row: 2; }
}

/* The stem: one line down the start side, a bud at the head of each paragraph, the whole bloom at the end. */
.page--about .about-stem {
  --bud: 3.25rem;
  position: relative;
  display: grid;
  gap: clamp(1.25rem, 1rem + 1vw, 2rem);
  isolation: isolate;
}
.page--about .about-stem__line {
  position: absolute;
  inset-block: 1rem 0;
  inset-inline-start: calc(var(--bud) / 2 - 1.5px);
  inline-size: 3px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
  z-index: -1;
}
.page--about .about-stem__fill { position: absolute; inset: 0; background: var(--forest); transform-origin: 50% 0; }
.page--about .about-stem__step {
  display: grid;
  grid-template-columns: var(--bud) minmax(0, 1fr);
  column-gap: clamp(.75rem, .5rem + 1vw, 1.25rem);
  align-items: start;
}
.page--about .about-stem__step > p { max-inline-size: 34em; padding-block-start: .15rem; }
.page--about .about-stem__bud {
  display: grid;
  place-items: center;
  inline-size: var(--bud);
  block-size: 2.4rem;
  margin-block-start: calc((1lh - 2.4rem) / 2);
  border-radius: 50%;
  background: var(--bg);     /* the bud interrupts the line */
}
.page--about .about-stem__bud > .petal { --size: 1.9rem; vertical-align: 0; }
.page--about .about-stem__bud--bloom { block-size: var(--bud); margin-block-start: calc((1lh - var(--bud)) / 2); }
.page--about .about-stem__bud--bloom > .mark { inline-size: 158%; max-inline-size: none; block-size: auto; }
/* The last step ends the line at its bloom: its own ground covers what would run on below. */
.page--about .about-stem__step--bloom { background: var(--bg); }
/* A statement is never hyphenated by the browser (German broke three lines in five here); a word that
   really cannot fit still breaks. */
.page--about .about-stem__last { color: var(--heading); font-size: var(--fs-lead); font-weight: var(--fw-strong); line-height: var(--lh-statement); -webkit-hyphens: manual; hyphens: manual; overflow-wrap: break-word; }
@media (max-width: 39.99rem) {
  .page--about .about-stem { --bud: 2.4rem; }
  .page--about .about-stem__bud { block-size: 2rem; margin-block-start: calc((1lh - 2rem) / 2); }
  .page--about .about-stem__bud > .petal { --size: 1.6rem; }
  .page--about .about-stem__bud--bloom { block-size: var(--bud); margin-block-start: calc((1lh - var(--bud)) / 2); }
}

/* ───────────────────────────────────────────────── 3 petal by petal ── */

.page--about .about-bloom__body { display: grid; gap: 1.25rem clamp(2.5rem, 1rem + 6vw, 6rem); }
.page--about .about-bloom__text { display: grid; gap: clamp(.9rem, .6rem + 1vw, 1.5rem); min-inline-size: 0; }
.page--about .about-bloom__aside { display: grid; justify-items: center; align-content: start; }

/* The name of the petal being read, for the phone's bar. The dial writes data-dial-active on the section. */
.page--about .about-bloom__now { display: none; }
.page--about .about-bloom__now > span {
  grid-area: 1 / 1;
  color: var(--c-deep);
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: var(--fw-display);
  line-height: var(--lh-sub);
  letter-spacing: var(--tracking-sub);
  opacity: 0;
  transition: opacity var(--dur-3) ease;
}
.page--about .about-bloom[data-dial-active="seniors"] [data-now="seniors"],
.page--about .about-bloom[data-dial-active="youth"] [data-now="youth"],
.page--about .about-bloom[data-dial-active="minorities"] [data-now="minorities"],
.page--about .about-bloom[data-dial-active="refugees"] [data-now="refugees"],
.page--about .about-bloom[data-dial-active="partners"] [data-now="partners"],
.page--about .about-bloom[data-dial-active="volunteers"] [data-now="volunteers"] { opacity: 1; }

@media (min-width: 56rem) {
  .page--about .about-bloom__body { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .page--about .about-bloom__text { grid-column: 1; grid-row: 1; }
  .page--about .about-bloom__aside { grid-column: 2; grid-row: 1; }
}
/* On a phone the dial keeps you company in a band under the header, with the name of the petal
   being read (only when scripts run: without them the dial does not turn, so it simply sits above
   the list). The band runs edge to edge so the paragraphs pass cleanly under it, and follows the
   header up when the header hides (about.js says when it is stuck). */
@media (max-width: 55.99rem) {
  html.js .page--about .about-bloom.is-live .about-bloom__aside {
    position: sticky;
    inset-block-start: var(--header-h);
    z-index: 3;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    gap: .9rem;
    margin-inline: calc(-1 * var(--gutter));
    padding: .5rem var(--gutter);
    border-block-end: 1px solid var(--line);
    background: var(--bg);
    transition: transform var(--dur-3) var(--ease-out);
  }
  html.js .site-header.is-hidden ~ main .about-bloom.is-live .about-bloom__aside.is-stuck { transform: translateY(calc(-1 * var(--header-h))); }
  html.js .page--about .about-bloom.is-live .about-bloom__now { display: grid; }
  html.js .page--about .about-bloom.is-live .about-bloom__aside > .dial { --dial-size: 4.25rem; }
}

/* The six paragraphs. Each is a panel in its community's colour with its medallion: the name is
   always in the colour, so colour is never the only signal. */
.page--about .about-petals { display: grid; gap: clamp(.9rem, .6rem + 1vw, 1.5rem); }
.page--about .about-petal {
  --pad: clamp(1.25rem, 1rem + 1.6vw, 2.25rem);
  --medal: 4.5rem;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(1rem, .6rem + 1.6vw, 1.75rem);
  row-gap: .75rem;
  align-items: center;
  padding: var(--pad);
  border-radius: var(--r-panel);
  background: var(--row);
}
.page--about .about-petal__fill {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--c-mist);
}
.page--about .about-petal__medal { --size: var(--medal); grid-column: 1; grid-row: 1; }
.page--about .about-petal__name { grid-column: 2; grid-row: 1; color: var(--c-deep); }
.page--about .about-petal > p { grid-column: 1 / -1; max-inline-size: 36em; }
@media (min-width: 40rem) {
  .page--about .about-petal { align-items: start; row-gap: .4rem; }
  .page--about .about-petal__medal { grid-row: 1 / span 2; }
  .page--about .about-petal__name { align-self: end; padding-block-start: .35rem; }
  .page--about .about-petal > p { grid-column: 2; }
}
@media (max-width: 39.99rem) {
  .page--about .about-petal { --medal: 3.5rem; }
}

/* The pointer: from 56rem a petal lies between the paragraph being read and the dial. */
.page--about .about-petal__pointer { display: none; }
@media (min-width: 56rem) {
  .page--about .about-petal__pointer {
    display: block;
    position: absolute;
    inset-inline-start: calc(100% + .5rem);
    inset-block-start: calc(var(--pad) + var(--medal) / 2 - .7rem);
    inline-size: clamp(1.75rem, 1rem + 2.6vw, 3.25rem);
    block-size: 1.4rem;
    background: var(--c);
    -webkit-mask: var(--petal-mask-flat) center / 100% 100% no-repeat;
    mask: var(--petal-mask-flat) center / 100% 100% no-repeat;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform var(--dur-4) var(--ease-out);
  }
  [dir="rtl"] .page--about .about-petal__pointer { transform-origin: 100% 50%; }
  .page--about .about-petal.is-dial-on .about-petal__pointer { transform: scaleX(1); }
}

/* Until a paragraph is reached it waits on the row tint; then its colour opens from the medallion
   outward and the medallion turns one petal-step into place. Set by about.js, motion allowed only. */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.dt-failsafe) .page--about .about-bloom.is-live .about-petal__fill {
    clip-path: circle(0% at calc(var(--pad) + var(--medal) / 2) calc(var(--pad) + var(--medal) / 2));
    transition: clip-path 1.1s var(--ease-bloom);
  }
  html.js:not(.dt-failsafe)[dir="rtl"] .page--about .about-bloom.is-live .about-petal__fill {
    clip-path: circle(0% at calc(100% - var(--pad) - var(--medal) / 2) calc(var(--pad) + var(--medal) / 2));
  }
  html.js:not(.dt-failsafe) .page--about .about-bloom.is-live .about-petal.is-read .about-petal__fill { clip-path: circle(150% at calc(var(--pad) + var(--medal) / 2) calc(var(--pad) + var(--medal) / 2)); }
  html.js:not(.dt-failsafe)[dir="rtl"] .page--about .about-bloom.is-live .about-petal.is-read .about-petal__fill { clip-path: circle(150% at calc(100% - var(--pad) - var(--medal) / 2) calc(var(--pad) + var(--medal) / 2)); }

  html.js:not(.dt-failsafe) .page--about .about-bloom.is-live .about-petal__medal {
    transform: rotate(calc(var(--dir) * -60deg)) scale(.82);
    transition: transform var(--dur-5) var(--ease-pop);
  }
  html.js:not(.dt-failsafe) .page--about .about-bloom.is-live .about-petal.is-read .about-petal__medal { transform: none; }
}
/* The paragraph the dial has turned to stands out, as its petal does in the dial: the others go a
   little quieter (the text never does). */
html.js .page--about .about-bloom.is-live .about-petal__fill { transition: clip-path 1.1s var(--ease-bloom), opacity var(--dur-4) ease; }
html.js .page--about .about-bloom.is-live[data-dial-active] .about-petal:not(.is-dial-on) .about-petal__fill { opacity: .5; }
html.js .page--about .about-bloom.is-live .about-petal.is-read.is-dial-on .about-petal__medal { transform: scale(1.1); }
@media (prefers-reduced-motion: reduce) {
  html.js .page--about .about-bloom.is-live .about-petal__fill { transition: none; }
  /* Nothing slides or grows: the pointer and the phone's band simply are where they are. */
  .page--about .about-petal__pointer,
  html.js .page--about .about-bloom.is-live .about-bloom__aside { transition: none; }
}

/* The core: a circle where the six were petals. Gold ground, ink text (never white on gold). */
.page--about .about-core {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, .6rem + 1.6vw, 1.75rem);
  padding: clamp(1rem, .8rem + 1vw, 1.5rem);
  padding-inline-end: clamp(1.5rem, 1rem + 3vw, 3rem);
  border-radius: clamp(2.75rem, 2.4rem + 2vw, 3.75rem);
  background: var(--gold);
  color: var(--ink);
}
.page--about .about-core__disc {
  display: grid;
  place-items: center;
  inline-size: clamp(3.5rem, 3rem + 2.4vw, 5.25rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--white);
}
.page--about .about-core__disc > span { inline-size: 44%; aspect-ratio: 1; border-radius: 50%; background: var(--gold); }
.page--about .about-core > p { max-inline-size: 30em; color: var(--ink); font-size: var(--fs-lead); font-weight: var(--fw-strong); line-height: var(--lh-statement); -webkit-hyphens: manual; hyphens: manual; overflow-wrap: break-word; }

/* ─────────────────────────────────────────────────────────── 4 believe ── */

.page--about .about-mission {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem clamp(.9rem, .6rem + 1vw, 1.5rem);
  max-inline-size: 46rem;
}
.page--about .about-mission > .lead { color: var(--fg); }

.page--about .about-tagline { margin-block-end: clamp(2.75rem, 2rem + 4.4vw, 6rem); }
.page--about .about-tagline__line { max-inline-size: none; color: var(--forest); text-wrap: balance; }
.page--about .about-tagline__petals {
  display: flex;
  gap: clamp(.2rem, .1rem + .5vw, .6rem);
  margin-block-start: clamp(1.25rem, 1rem + 1.8vw, 2.5rem);
}
.page--about .about-tagline__petals > span {
  flex: 0 1 clamp(2.5rem, 1rem + 7vw, 7rem);
  aspect-ratio: 45.125 / 20.648;
  background: var(--c);
  -webkit-mask: var(--petal-mask-flat) center / 100% 100% no-repeat;
  mask: var(--petal-mask-flat) center / 100% 100% no-repeat;
}

/* Four habits: petal rows grown to the size of what they say. Two of them hold a small photograph.
   On a phone the photograph sits inside its row, under the words. From 56rem the rows keep to the
   start side and the two photographs lean together beside them: the first rests on the foot of
   "Turn up", the second hangs from the head of "Learn the job first". */
.page--about .about-habits { gap: clamp(.75rem, .5rem + 1vw, 1.25rem); }
.page--about .about-habits > li {
  column-gap: clamp(.9rem, .6rem + 1.2vw, 1.5rem);
  row-gap: .4rem;
  padding: clamp(1.15rem, .9rem + 1.3vw, 2rem) clamp(1.15rem, .9rem + 1.7vw, 2.25rem);
  border-radius: var(--r-panel);
}
.page--about .about-habits > li::before { block-size: 2.1rem; margin-block-start: .05rem; }
.page--about .about-habit__title { font-size: var(--fs-sub); }
.page--about .about-habit__body { max-inline-size: 32em; }
.page--about .about-habit__shot { margin-block-start: 1rem; }
.page--about .about-habit__shot--turnup { max-inline-size: 20rem; }      /* an 800 px frame: 400 CSS px at most */
.page--about .about-habit__shot--learn { max-inline-size: 24rem; }
/* The 12 September frame: the crop has to start 17 % in from its left edge. The frame cuts it 3:2
   (which keeps the full width), so the picture is enlarged from its right edge by 1 / 0.83. */
.page--about .about-habit__shot--learn img { transform: scale(1.205); transform-origin: 100% 85%; }
@media (min-width: 56rem) {
  .page--about .about-habits {
    --shot-gap: clamp(2rem, 1rem + 4vw, 4.5rem);
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--shot-gap);
  }
  .page--about .about-habits > li { grid-column: 1; }
  .page--about .about-habit--shot { position: relative; }
  /* 71.4 % of a row is the width of the column beside it (5 parts to the row's 7). */
  .page--about .about-habit--shot > .about-habit__shot {
    position: absolute;
    inset-inline-start: calc(100% + var(--shot-gap));
    max-inline-size: none;
    margin-block-start: 0;
  }
  .page--about .about-habit--shot > .about-habit__shot--turnup { inset-block-end: 1.25rem; inline-size: min(17rem, 71.4%); }
  .page--about .about-habit--shot > .about-habit__shot--learn {
    inset-block-start: .75rem;
    inset-inline-start: calc(100% + var(--shot-gap) + max(0rem, 71.4% - 21rem));
    inline-size: min(21rem, 71.4%);
  }
}

/* ──────────────────────────────────────────────────────────── 5 people ── */

.page--about .about-people__grid { display: grid; gap: clamp(2rem, 1rem + 5vw, 5rem); align-items: center; }
.page--about .about-people__text { display: grid; gap: 1.1rem; justify-items: start; }
.page--about .about-people__note,
.page--about .about-langs__note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .7rem;
  max-inline-size: 34em;
  color: var(--fg-muted);
  font-size: var(--fs-small);
}
.page--about :is(.about-people__note, .about-langs__note) > .petal { margin-block-start: calc((1lh - 1.1em) / 2); vertical-align: 0; }
@media (min-width: 56rem) {
  .page--about .about-people__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  /* Like the dial and the hero's mark, what stands in the second column stands in its middle. */
  .page--about .about-people__who { justify-self: center; }
}

/* ──────────────────────────────────────────────────────── 6 fun-tastic ── */

.page--about .about-ft__field { padding: clamp(1.5rem, 1rem + 3.6vw, 4.25rem); }
.page--about .about-ft__panel {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2.4vw, 3rem) clamp(2rem, 1rem + 5vw, 5rem);
}
.page--about .about-ft__lead { display: grid; gap: 1rem; justify-items: start; align-content: start; }
.page--about .about-ft__disc {
  position: relative;
  inline-size: clamp(5rem, 4rem + 5vw, 7.5rem);
  aspect-ratio: 1;
  margin-block-end: .5rem;
  border-radius: 50%;
  background: var(--white);
}
.page--about .about-ft__disc > span { position: absolute; inset: -9%; display: block; }
.page--about .about-ft__disc .mark { inline-size: 100%; block-size: 100%; }
/* The approved line, large. Gold on forest (4.0 to 1) passes for large type only, and a script with a
   small display scale (Urdu: 17px on a phone) took this under that line. So it never drops below
   19px bold, which is large type in every language. */
.page--about .about-ft__line {
  max-inline-size: 22em;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: max(var(--fs-sub), 1.1875rem);
  font-weight: var(--fw-display);
  line-height: var(--lh-sub);
  letter-spacing: var(--tracking-sub);
  text-wrap: balance;
}
.page--about .about-ft__more { display: grid; gap: 1.25rem; justify-items: start; align-content: start; }
.page--about .about-ft__facts { display: grid; gap: 1rem; align-content: start; align-self: start; }
.page--about .about-ft__facts > * { margin-block-start: 0; }
.page--about .about-ft__charity { color: var(--fg-muted); }
.page--about .about-facts { display: grid; }
.page--about .about-facts__row { display: grid; gap: .2rem; padding-block: .95rem; border-block-start: 1px solid var(--line); }
.page--about .about-facts__row:last-child { padding-block-end: 0; }
.page--about .about-facts dt { color: var(--fg-muted); font-size: var(--fs-small); }
.page--about .about-facts dd { color: var(--heading); font-weight: var(--fw-strong); line-height: var(--lh-statement); }
.page--about .about-facts__figure {
  color: var(--forest);
  font-family: var(--font-latin);
  font-size: clamp(2.25rem, 1.8rem + 2vw, 3.25rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;   /* lint-ok: Western digits only */
  font-variant-numeric: lining-nums;
}
.page--about .about-facts__figure > span { display: inline-block; }
@media (min-width: 56rem) {
  .page--about .about-ft__panel { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr; }
  .page--about .about-ft__lead { grid-column: 1; grid-row: 1; }
  .page--about .about-ft__facts { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .page--about .about-ft__more { grid-column: 1; grid-row: 2; }
}

/* ───────────────────────────────────────────────────────── 7 languages ── */

.page--about .about-langs__grid { display: grid; gap: clamp(2.25rem, 1rem + 5vw, 5rem); align-items: center; }
.page--about .about-langs__text { display: grid; gap: 1.1rem; justify-items: start; }
.page--about .about-langs__note { margin-block-start: .5rem; }
.page--about .about-langs__panel { display: grid; gap: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); justify-items: start; }
.page--about .about-langs__panel > * { margin-block-start: 0; }
.page--about .about-cloud { display: flex; flex-wrap: wrap; gap: .6rem; }
/* Scripts differ in height (Nastaliq stands taller than Latin): every name in a row takes the row's height. */
.page--about .about-cloud > li { display: flex; }
.page--about .about-cloud__link {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-block-size: 3.25rem;
  padding: .5rem 1.3rem;
  padding-inline-start: 1rem;
  border-radius: var(--r-full);
  background: var(--row);
  color: var(--heading);
  font-size: var(--fs-lead);
  font-weight: var(--fw-strong);
  line-height: var(--lh-ui);
  text-decoration: none;
  transition: background-color var(--dur-2) ease, color var(--dur-2) ease, scale var(--dur-1) var(--ease-out);
}
.page--about .about-cloud__link > .petal { --size: 1.35rem; vertical-align: 0; transition: rotate var(--dur-3) var(--ease-pop); }
.page--about .about-cloud__link:active { scale: .97; }
.page--about .about-cloud__link[aria-current="true"] { background: var(--forest); color: var(--white); }
.page--about .about-cloud__link[aria-current="true"] > .petal { background: var(--gold); }
@media (hover: hover) and (pointer: fine) {
  .page--about .about-cloud__link:not([aria-current="true"]):hover { background: var(--c-mist); }
  .page--about .about-cloud__link:hover > .petal { rotate: 60deg; }
}
@media (prefers-reduced-motion: reduce) {
  .page--about .about-cloud__link { transition: background-color var(--dur-2) ease, color var(--dur-2) ease; }
  .page--about .about-cloud__link:active { scale: none; }
  .page--about .about-cloud__link > .petal { transition: none; }
  .page--about .about-cloud__link:hover > .petal { rotate: none; }
}
@media (min-width: 56rem) {
  .page--about .about-langs__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* ──────────────────────────────────────────── 8 questions and closing ── */

.page--about .about-faq { padding-block-end: clamp(3rem, 2rem + 4vw, 5.5rem); }