/* ═══════════════════════════════════════════════════════════════════════════
   Diverse Talent · parts.css  (owner: the parts builder)
   The shared pieces that are not the bloom or the stem: doors, names, numbers, the screening-day
   steps, people, the giving bloom, the one form, FAQ list, organisations, the closing panel.
   Each block belongs to the partial of the same name in src/partials/. Unlayered, so it wins over
   the design system; everything is scoped to its own block, nothing here restyles a shared
   component globally.

   Rules of the house: logical properties only, no uppercase, no gradients, nothing under 16px,
   colours from tokens, transforms and opacity for motion. Nothing is hidden here until a script
   shows it: with JavaScript off, or under reduced motion, every piece is complete and still.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────── 0 What ground are we on ──
   Tones re-point the semantic colours, but a counted number that wants its own petal colour has
   to know whether the ground under it is light (use the petal's deep value) or a solid colour
   (use the one colour that reads there). A space toggle answers it at any depth of nesting:
   --parts-solid is "initial" on light grounds and an empty value on solid ones. */
:root,
:is(.tone-bone, .section--bone, .panel--bone, .tone-white, .section--white, .panel--white,
    [class*="tone-mist-"], [class*="section--mist-"], [class*="panel--mist-"]) { --parts-solid: initial; --parts-num: initial; }
:is(.tone-gold, .section--gold, .panel--gold, .tone-clay, .section--clay, .panel--clay,
    .tone-blue, .section--blue, .panel--blue, .tone-plum, .section--plum, .panel--plum,
    .tone-sage, .section--sage, .panel--sage) { --parts-solid: ; --parts-num: var(--heading); }
:is(.tone-forest, .section--forest, .panel--forest, .tone-forest-deep, .section--forest-deep, .panel--forest-deep) { --parts-solid: ; --parts-num: var(--gold); }

/* A quiet line that has to be read (the screening note, the note under the numbers): a petal and a sentence in a tinted row. */
.parts-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .85rem;
  max-inline-size: 46rem;
  padding: 1rem 1.25rem;
  border-radius: var(--r-row);
  background: var(--row);
  color: var(--fg);
  font-size: var(--fs-small);
}
.parts-note > .petal { --size: 1.3rem; margin-block-start: calc((1lh - 1.3rem) / 2); background: var(--p2); vertical-align: baseline; }
.parts-note > span:last-child { max-inline-size: none; }

/* ───────────────────────────────────────────────────────────── 1 Doors ──
   Three ways in: volunteer (sage), partner (plum), give (gold). Each is a leaf-shaped colour
   field with a white medallion; the title carries the link and the whole door is the target.
   Stacked on phones; side by side from 56rem, where the door under the pointer or the focus widens
   and its petal turns one step. */

.doors { display: grid; gap: 1rem; }
.door {
  --door-r: clamp(3.25rem, 2rem + 6vw, 6.5rem);
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  align-items: center;
  gap: .6rem 1.1rem;
  max-inline-size: none;
  padding: clamp(1.35rem, 1rem + 1.6vw, 2.25rem);
  border-radius: var(--r-panel);
  border-start-start-radius: var(--door-r);
  background: var(--bg);
  color: var(--fg);
}
.door__icon { grid-row: 1; grid-column: 1; transition: scale var(--dur-4) var(--ease-pop); }
.door__title {
  grid-row: 1;
  grid-column: 2;
  font-size: calc(var(--fs-sub) * 1.12);
  font-weight: var(--fw-display);
  line-height: var(--lh-sub);
  letter-spacing: var(--tracking-sub);
}
.door__link { color: inherit; text-decoration: none; }
.door__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.door__link:focus-visible { outline: none; }
.door:has(.door__link:focus-visible) { outline: 3px solid var(--focus); outline-offset: -8px; }
.door__line { grid-column: 1 / -1; max-inline-size: 22em; color: var(--fg); }
/* The door's own petal: a large quiet petal of the mark, standing in the far corner. */
.door__petal {
  position: absolute;
  z-index: -1;
  inset-block-end: -1.25rem;
  inset-inline-end: 2.25rem;
  block-size: min(78%, 8rem);
  aspect-ratio: 20.648 / 45.125;
  background: var(--ghost);
  -webkit-mask: var(--petal-mask) center / 100% 100% no-repeat;
  mask: var(--petal-mask) center / 100% 100% no-repeat;
  transform-origin: 50% 100%;
  rotate: calc(var(--dir) * 18deg);
  transition: rotate var(--dur-5) var(--ease-bloom), scale var(--dur-5) var(--ease-bloom);
  pointer-events: none;
}
.door__photo { grid-column: 1 / -1; margin-block-start: .75rem; }
.door__photo { --c: var(--white); }
.door__photo > figcaption { color: var(--fg); }
.doors--photo .door--volunteer > .door__petal { display: none; }

@media (min-width: 56rem) {
  .doors { display: flex; align-items: stretch; gap: clamp(.75rem, 1.5vw, 1.4rem); }
  .door {
    --door-r: clamp(5rem, 9vw, 8.5rem);
    flex: 1 1 0;
    min-inline-size: 0;
    min-block-size: clamp(23rem, 33vw, 29rem);
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    justify-items: start;
    gap: .9rem;
    padding: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  }
  .door__icon, .door__title { grid-row: auto; grid-column: 1; }
  .door__icon { margin-block-end: clamp(.75rem, 2vw, 1.75rem); }
  .door__title { font-size: calc(var(--fs-sub) * 1.3); }
  .door__line { max-inline-size: 17.5em; }
  .door__petal { inset-block-end: -1.75rem; inset-inline-end: clamp(2.5rem, 4.5vw, 4.25rem); block-size: min(46%, 12.5rem); }
  .door__photo { align-self: end; inline-size: 100%; margin-block-start: auto; padding-block-start: 1rem; }
  .doors--photo .door--volunteer { flex-grow: 1.22; }
  /* Beside the door that carries a photograph the other two are as tall as it is. So that they do not
     stand hollow, their own petal grows to the door's scale: one large quiet petal of the mark standing
     in each, as tall as the photograph beside it. */
  .doors--photo .door:not(.door--volunteer) > .door__petal {
    inset-block-end: -2.25rem;
    inset-inline-end: clamp(4.25rem, 6.5vw, 6.25rem);
    block-size: min(64%, 21rem);
  }
}
@media (min-width: 56rem) and (hover: hover) and (pointer: fine) {
  .door { transition: flex-grow var(--dur-5) var(--ease-out); }
  .doors:has(.door:hover) .door:hover,
  .doors:not(:has(.door:hover)) .door:focus-within { flex-grow: 1.42; }
  .doors--photo:has(.door:hover) .door--volunteer:hover,
  .doors--photo:not(:has(.door:hover)) .door--volunteer:focus-within { flex-grow: 1.6; }
  .door:is(:hover, :focus-within) > .door__icon { scale: 1.1; }
  .door:is(:hover, :focus-within) > .door__petal { rotate: calc(var(--dir) * -42deg); scale: 1.06; }
}
@media (prefers-reduced-motion: reduce) {
  .door, .door__icon, .door__petal { transition: none; }
}

/* ───────────────────────────────────────────────────────────── 2 Names ──
   The five organisations as a line of type (the foundation's marquee does the moving and follows
   the scroll). Here: its rhythm, and the pause control at the end side. */

.names { padding-block: .25rem; }
.names .marquee__list > li { gap: clamp(1.25rem, 3vw, 2.5rem); }
.names.is-running .marquee__list { gap: clamp(1.25rem, 3vw, 2.5rem); padding-inline-end: clamp(1.25rem, 3vw, 2.5rem); }
.names.is-running .marquee__list > li::before { block-size: .72em; }
.names__bar { display: flex; justify-content: flex-end; }

/* ─────────────────────────────────────────────────────────── 3 Numbers ──
   True numbers only (BRIEF 1.8). The label sits directly under its numeral: nothing between them.
   A small petal in the number's colour stands above each one. */

.numbers { display: grid; gap: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); background: none; }
.numbers__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13.5rem, 100%), 1fr));
  gap: clamp(2rem, 1.2rem + 3vw, 3.5rem) clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  align-items: start;
}
.numbers__item {
  --num-ink: var(--parts-solid) var(--parts-num);
  position: relative;
  max-inline-size: none;
  padding-block-start: 2.1rem;
}
.numbers__item::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: .15rem;
  block-size: 1.6rem;
  aspect-ratio: 20.648 / 45.125;
  background: var(--num-ink, var(--c));
  -webkit-mask: var(--petal-mask) center / 100% 100% no-repeat;
  mask: var(--petal-mask) center / 100% 100% no-repeat;
}
.numbers__item > .stat__num { color: var(--num-ink, var(--c-deep)); }
.numbers__item > .stat__label { max-inline-size: 17em; color: var(--fg); }
.numbers__source { max-inline-size: 22em; margin-block-start: .35rem; }
.numbers--2 > .numbers__list { grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }

/* ───────────────────────────────────── 4 The steps of a screening day ──
   A real sequence, so it is numbered: ghost numerals 1 to 4, a medallion per stop, and one line
   that runs through the medallions (parts.js draws it with the scroll; without scripts it is drawn).
   Short form: a row of four from 60rem, a column below. Full form: one large row per step. */

.daysteps { --g: clamp(1.5rem, 1rem + 2vw, 2.75rem); --m: 3.5rem; display: grid; gap: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); }
.daysteps__list { display: grid; gap: var(--g); }
.daysteps__step {
  position: relative;
  display: grid;
  grid-template-columns: var(--m) minmax(0, 1fr);
  column-gap: clamp(1rem, .6rem + 1.6vw, 1.75rem);
  align-items: start;
  align-content: start;
  max-inline-size: none;
}
.daysteps__icon { --size: var(--m); position: relative; z-index: 1; background: var(--accent); color: var(--bg); }
.daysteps__text { display: grid; gap: .45rem; padding-block-start: .3rem; }
.daysteps__label { color: var(--fg-muted); }
.daysteps__title { font-size: var(--fs-sub); }
.daysteps__body { color: var(--fg); }
.daysteps__ghost {
  inset-block-start: -.08em;
  inset-inline: auto 0;
  font-size: clamp(5.5rem, 4.5rem + 4vw, 8.5rem);
}
/* The line: a track between one medallion and the next, and the drawn part on top of it. */
.daysteps__step:not(:last-child)::before,
.daysteps__seg {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--m) / 2);
  inset-inline-start: calc(var(--m) / 2 - 1.5px);
  inline-size: 3px;
  block-size: calc(100% + var(--g));
  border-radius: 3px;
}
.daysteps__step:not(:last-child)::before { background: var(--rule); }
.daysteps__seg { background: var(--accent); transform-origin: 50% 0%; transform: scaleY(var(--p, 1)); }
.daysteps__note > .petal { background: var(--accent); }

@media (min-width: 60rem) {
  .daysteps--short > .daysteps__list { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
  .daysteps--short .daysteps__step { grid-template-columns: minmax(0, 1fr); row-gap: 1.25rem; }
  .daysteps--short .daysteps__ghost { inset-block-start: -.16em; }
  .daysteps--short .daysteps__text { padding-block-start: 0; padding-inline-end: .5rem; }
  .daysteps--short .daysteps__step:not(:last-child)::before,
  .daysteps--short .daysteps__seg {
    inset-block-start: calc(var(--m) / 2 - 1.5px);
    inset-inline-start: calc(var(--m) / 2);
    inline-size: calc(100% + var(--g));
    block-size: 3px;
  }
  .daysteps--short .daysteps__seg { transform-origin: 0% 50%; transform: scaleX(var(--p, 1)); }
  [dir="rtl"] .daysteps--short .daysteps__seg { transform-origin: 100% 50%; }
}

.daysteps--full { --m: 4.5rem; --g: clamp(2rem, 1.4rem + 2.6vw, 3.5rem); }
.daysteps--full .daysteps__title { font-size: calc(var(--fs-sub) * 1.12); }
.daysteps--full .daysteps__ghost { font-size: var(--fs-ghost); inset-block-start: -.12em; }
@media (max-width: 39.99rem) {
  .daysteps--full { --m: 3.5rem; }
}
@media (min-width: 56rem) {
  .daysteps--full .daysteps__text { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; column-gap: clamp(1.5rem, 3vw, 3rem); align-items: start; padding-block-start: .55rem; padding-inline-end: clamp(4rem, 12vw, 11rem); }
  .daysteps--full .daysteps__label { grid-column: 1; }
  .daysteps--full .daysteps__title { grid-column: 1; }
  .daysteps--full .daysteps__body { grid-column: 2; grid-row: 1 / span 2; font-size: var(--fs-lead); line-height: calc(var(--lh-text) - .08); }
}

/* ──────────────────────────────────────────────────────────── 5 People ──
   Two people, in type only. Each monogram is a core with six small petals standing round it;
   the ring turns one step under the pointer. */

.people { display: flex; flex-wrap: wrap; gap: clamp(2rem, 1rem + 5vw, 5rem) clamp(2.5rem, 1rem + 7vw, 7rem); }
.people__one { --ring: 11.5rem; --mono: 7.5rem; max-inline-size: none; }
.people__ring {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: var(--ring);
  block-size: var(--ring);
  margin-block-end: .9rem;
  margin-inline-start: calc((var(--ring) - var(--mono)) / -2 + 1.1rem);
}
.people__ring > .monogram { --size: var(--mono); position: relative; z-index: 1; }
.people__petals { position: absolute; inset: 0; transition: rotate var(--dur-6) var(--ease-bloom); }
.people__spoke {
  --l: calc((var(--ring) - var(--mono)) / 2 - .45rem);
  position: absolute;
  inset-block-end: calc(50% + var(--mono) / 2 + .45rem);
  inset-inline-start: calc(50% - var(--l) * .2288);
  inline-size: calc(var(--l) * .4576);
  block-size: var(--l);
  transform-origin: 50% calc(100% + var(--mono) / 2 + .45rem);
  rotate: var(--a, 0deg);
}
.people__spoke > .petal { display: block; inline-size: 100%; block-size: 100%; }
@media (hover: hover) and (pointer: fine) {
  .people__one:hover .people__petals { rotate: calc(var(--dir) * 60deg); }
}
@media (max-width: 30rem) {
  .people__one { --ring: 10rem; --mono: 6.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .people__petals { transition: none; }
}

/* ────────────────────────────────────────────────────────── 6 FAQ list ──
   The foundation's rows, each led by a petal that turns one step when its answer opens. */

.faqlist { display: grid; gap: clamp(1.75rem, 1.2rem + 2.4vw, 3rem); }
.faqlist .faq__q { grid-template-columns: auto minmax(0, 1fr) auto; }
.faqlist .faq__q::before {
  content: "";
  block-size: 1.35rem;
  aspect-ratio: 20.648 / 45.125;
  background: var(--p1);
  -webkit-mask: var(--petal-mask) center / 100% 100% no-repeat;
  mask: var(--petal-mask) center / 100% 100% no-repeat;
  transition: rotate var(--dur-4) var(--ease-bloom);
}
.faqlist .faq__item:nth-child(6n + 2) > .faq__q::before { background: var(--p2); }
.faqlist .faq__item:nth-child(6n + 3) > .faq__q::before { background: var(--p3); }
.faqlist .faq__item:nth-child(6n + 4) > .faq__q::before { background: var(--p4); }
.faqlist .faq__item:nth-child(6n + 5) > .faq__q::before { background: var(--p5); }
.faqlist .faq__item:nth-child(6n) > .faq__q::before { background: var(--p6); }
.faqlist .faq__item:is([open], .is-opening):not(.is-closing) > .faq__q::before { rotate: calc(var(--dir) * 60deg); }
.faqlist .faq__a { padding-inline-start: calc(1.4rem + 1.35rem * .4576 + 1rem); }
.faqlist .faq__a > p { max-inline-size: 40em; }
@media (prefers-reduced-motion: reduce) {
  .faqlist .faq__q::before { transition: none; }
}

/* ───────────────────────────────────────────────────── 7 Organisations ──
   Worked alongside, in full: names in type, an icon medallion each, what each one did. Our
   supporting charity leads the list on a plum field; the other four follow as rows. */

.orgs { display: grid; gap: .75rem; }
.orgs__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1rem, .7rem + 1.4vw, 1.5rem);
  align-items: start;
  max-inline-size: none;
  padding: clamp(1.15rem, .9rem + 1.2vw, 1.75rem);
  border-radius: var(--r-row);
  background: var(--row);
}
.orgs__text { display: grid; gap: .3rem; }
.orgs__name { font-size: var(--fs-sub); }
.orgs__full { color: var(--fg-muted); font-size: var(--fs-small); font-weight: var(--fw-medium); }
.orgs__role { color: var(--fg-muted); }
.orgs__row--lead {
  --heading: var(--white);
  --fg-muted: var(--white);
  padding: clamp(1.5rem, 1rem + 2.4vw, 2.75rem);
  border-radius: var(--r-panel);
  border-start-start-radius: clamp(3.5rem, 2rem + 7vw, 6.5rem);
  background: var(--plum);
  color: var(--white);
}
.orgs__row--lead .orgs__icon { --size: 4.5rem; background: var(--white); color: var(--plum-deep); }
.orgs__row--lead .orgs__name { color: var(--white); font-size: calc(var(--fs-sub) * 1.2); }
.orgs__row--lead .orgs__role { font-size: var(--fs-lead); line-height: calc(var(--lh-text) - .08); }
@media (min-width: 56rem) {
  .orgs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .orgs__row--lead { grid-column: 1 / -1; align-items: center; }
}
@media (max-width: 30rem) {
  .orgs__row--lead { grid-template-columns: minmax(0, 1fr); }
}

/* ──────────────────────────────────────────────────── 8 Closing panel ──
   The mark on a white disc is the core. Six large quiet petals arrive along the six axes of the
   mark and settle round it, behind the words; the heading, the lead and the buttons gather in front. */

.cta {
  --cta-l: clamp(9rem, 4rem + 22vw, 20rem);          /* length of one quiet petal */
  --cta-r0: calc(var(--cta-l) * .34);                 /* how far from the core it begins */
  --cta-disc: clamp(4.5rem, 4rem + 1.6vw, 5.75rem);
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  justify-items: center;
  gap: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  padding-block: clamp(2.75rem, 2rem + 4.5vw, 5.5rem);
  text-align: center;
}
.cta > * + * { margin-block-start: 0; }
.cta__core { position: relative; inline-size: var(--cta-disc); block-size: var(--cta-disc); }
.cta__disc { position: relative; z-index: 1; display: grid; place-items: center; inline-size: 100%; block-size: 100%; border-radius: 50%; background: var(--white); }
.cta__mark { inline-size: 74%; block-size: auto; }
.cta__petals { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 0; block-size: 0; z-index: -1; pointer-events: none; }
.cta__spoke {
  position: absolute;
  inset-block-end: var(--cta-r0);
  inset-inline-start: calc(var(--cta-l) * -.2288);
  inline-size: calc(var(--cta-l) * .4576);
  block-size: var(--cta-l);
  transform-origin: 50% calc(100% + var(--cta-r0));
  rotate: var(--a, 0deg);
}
.cta__petal { display: block; inline-size: 100%; block-size: 100%; background: var(--ghost); -webkit-mask: var(--petal-mask) center / 100% 100% no-repeat; mask: var(--petal-mask) center / 100% 100% no-repeat; }
.cta__body { display: grid; justify-items: center; gap: clamp(1rem, .8rem + 1vw, 1.5rem); max-inline-size: 100%; }
.cta__title { max-inline-size: 18em; font-size: var(--fs-section); }
.cta__lead { max-inline-size: 34em; color: var(--fg); }
.cta__actions { justify-content: center; margin-block-start: .5rem; }

/* ───────────────────────────────────────────────────── 9 The one form ──
   It opens the visitor's own email app; nothing is sent by the site. */

.cform { container-type: inline-size; display: grid; gap: 1.5rem; }
.cform__required { max-inline-size: none; }
/* Two fields side by side where there is room. Their inputs stay on one line even when one label needs two lines
   and when one of them shows an error: both fields share the same three rows (label, input, message). */
.cform__pair { display: grid; gap: 1.35rem 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.cform__pair > .field { grid-template-rows: 1fr auto; }
.cform__pair > .field > .field__label { align-self: end; }
@container (min-width: 31.25rem) {
  @supports (grid-template-rows: subgrid) {
    .cform__pair { row-gap: 0; }
    .cform__pair > .field { grid-row: span 3; grid-template-rows: subgrid; }
    .cform__pair > .field > .field__error { align-self: start; }
  }
}
.cform .chips { gap: .5rem .5rem; }
.cform .field__input[dir="ltr"] { text-align: start; }
/* The one checkbox: a real box, a target of 44px, the tick drawn in. */
.cform__check { position: relative; display: inline-grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .8rem; min-block-size: var(--target); cursor: pointer; color: var(--heading); font-weight: var(--fw-strong); line-height: var(--lh-ui); justify-self: start; }
.cform__check > input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cform__box { display: grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; border: 1.5px solid var(--line-strong); border-radius: .5rem; background: var(--field); color: var(--white); transition: background-color var(--dur-2) ease, border-color var(--dur-2) ease, scale var(--dur-1) var(--ease-out); }
.cform__box > .icon { inline-size: 1.15rem; block-size: 1.15rem; stroke-width: 2.5; opacity: 0; scale: .6; transition: opacity var(--dur-2) ease, scale var(--dur-3) var(--ease-pop); }
.cform__check > input:checked + .cform__box { border-color: var(--forest); background: var(--forest); }
.cform__check > input:checked + .cform__box > .icon { opacity: 1; scale: 1; }
.cform__check > input:active + .cform__box { scale: .94; }
.cform__check > input:focus-visible + .cform__box { outline: 3px solid var(--focus); outline-offset: 3px; }
.cform .form__actions { margin-block-start: .35rem; }
.cform .form__note { max-inline-size: 24em; }

/* If nothing opened: the address, and a button that copies it. Always there; it steps forward after the button is pressed. */
.parts-fallback {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .75rem 1rem;
  padding: 1rem 1.15rem;
  border-radius: var(--r-row);
  background: var(--row);
}
.parts-fallback__text { display: grid; gap: .1rem; }
.parts-fallback__title { color: var(--heading); font-weight: var(--fw-strong); line-height: var(--lh-ui); }
.parts-fallback__body { color: var(--fg-muted); font-size: var(--fs-small); overflow-wrap: anywhere; }
.parts-fallback__copy { grid-column: 1 / -1; justify-self: start; }
.parts-fallback > .medallion { transition: scale var(--dur-4) var(--ease-pop); }
.parts-fallback.is-flagged > .medallion { scale: 1.12; }
@media (min-width: 34rem) {
  .parts-fallback { grid-template-columns: auto minmax(0, 1fr) auto; }
  .parts-fallback__copy { grid-column: auto; }
}

/* ────────────────────────────────────────────────── 10 The giving bloom ──
   The amounts are petals round the gold core (a real radio group); the chosen petal turns gold
   and its amount settles into the core. One gold button opens an email. No payment form.
   The petals keep the mark's own slender proportion; each amount is tied across its petal as a
   label, so the tip stands clear and the shape reads as the bloom.
   Everything in the bloom is sized from one unit, --u, which follows the width it is given. */

.giving {
  container-type: inline-size;
  display: grid;
  gap: clamp(1.25rem, 1rem + 1.4vw, 2rem);
  padding: clamp(1.15rem, .6rem + 2.4vw, 2.75rem);
  border-radius: var(--r-panel);
  border-start-start-radius: clamp(3rem, 2rem + 6vw, 6.5rem);
  background: var(--bg);
  color: var(--fg);
}
.giving__lead {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .9rem;
  max-inline-size: 44rem;
  padding-inline-start: clamp(.5rem, 3vw, 2.5rem);
  color: var(--heading);
  font-size: var(--fs-lead);
  font-weight: var(--fw-medium);
  line-height: calc(var(--lh-text) - .12);
}
.giving__form { display: grid; gap: clamp(1.5rem, 1rem + 2.4vw, 3rem); align-items: start; }
.giving__choose { display: grid; grid-template-rows: auto 1fr; gap: .5rem; min-inline-size: 0; container-type: inline-size; }
.giving__legend {
  inline-size: 100%;
  margin-block-end: .25rem;
  color: var(--heading);
  font-family: var(--font-display);
  font-size: var(--fs-sub);
  font-weight: var(--fw-sub);
  line-height: var(--lh-sub);
  letter-spacing: var(--tracking-sub);
  text-align: center;
  text-wrap: balance;
}

.giving__bloom {
  --pill-w: 6.75rem;                                   /* the widest a label may be */
  --u: min(1.2rem, (100vw - 4.25rem) / 20.4, (100vw - 4.25rem - var(--pill-w)) / 13.9);   /* without container units: the panel is about the screen less its margins */
  --core: calc(var(--u) * 6.2);
  --l: calc(var(--u) * 8.4);                           /* petal length: about two and a half times the core's radius, as in the mark */
  --r0: calc(var(--core) / 2 - var(--u) * .35);        /* where a petal begins: just under the rim of the core */
  --rl: calc(var(--r0) + var(--l) * .6);               /* where its label is tied: across the petal, short of the tip */
  --tip: calc(var(--r0) + var(--l));
  --top: calc(var(--tip) + .9rem);                     /* room above the centre: the top petal, and a little for it to grow when chosen */
  --bottom: calc(var(--tip) * .5 + .9rem);             /* room below it: the lowest petals lie at 120 degrees */
  position: relative;
  inline-size: 100%;
  block-size: calc(var(--top) + max(var(--bottom), var(--rl) * .5 + 2.4rem, var(--core) / 2 + .25rem));
  margin-block-start: .5rem;
}
@supports (inline-size: 1cqi) {
  .giving__bloom { --u: min(1.2rem, 100cqi / 20.4, (100cqi - var(--pill-w)) / 13.9); }
}
.giving__opt {
  position: absolute;
  inset-block-start: var(--top);
  inset-inline-start: 50%;
  inline-size: 0;
  block-size: 0;
  cursor: pointer;
}
.giving__spoke {
  position: absolute;
  inset-block-end: var(--r0);
  inset-inline-start: calc(var(--l) * -.2288);
  inline-size: calc(var(--l) * .4576);
  block-size: var(--l);
  transform-origin: 50% calc(100% + var(--r0));
  rotate: calc(var(--a) * var(--dir));
}
.giving__petal {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  background: var(--c);
  -webkit-mask: var(--petal-mask) center / 100% 100% no-repeat;
  mask: var(--petal-mask) center / 100% 100% no-repeat;
  transform-origin: 50% 100%;
  transition: transform var(--dur-4) var(--ease-pop), background-color var(--dur-3) ease;
}
.giving__pill {
  position: absolute;
  inset-block-start: calc(var(--rl) * var(--sy) * -1);
  inset-inline-start: calc(var(--rl) * var(--sx));
  display: grid;
  inline-size: max-content;
  max-inline-size: var(--pill-w);
  translate: calc(var(--dir) * -50%) -50%;
}
.giving__radio { position: absolute; z-index: 1; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.giving__pill-in {
  display: grid;
  place-items: center;
  min-block-size: var(--target);
  min-inline-size: 4.4rem;
  padding: .3rem .8rem;
  border: 2px solid var(--line-strong);
  border-radius: 1.6rem;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: var(--fw-display);
  line-height: var(--lh-ui);
  text-align: center;
  text-wrap: balance;
  overflow-wrap: anywhere;
  transition: background-color var(--dur-2) ease, border-color var(--dur-2) ease, transform var(--dur-1) var(--ease-out);
}
.giving__radio:active + .giving__pill-in { transform: scale(.96); }
.giving__radio:checked + .giving__pill-in { border-color: var(--ink); background: var(--gold); }
.giving__radio:focus-visible + .giving__pill-in { outline: 3px solid var(--focus); outline-offset: 3px; }
.giving__opt.is-chosen .giving__petal { background: var(--gold); transform: scale(1.07); }
.giving__opt:has(.giving__radio:checked) .giving__petal { background: var(--gold); transform: scale(1.07); }
@media (hover: hover) and (pointer: fine) {
  .giving__opt:hover .giving__petal { transform: scale(1.04); }
  .giving__opt.is-chosen:hover .giving__petal { transform: scale(1.07); }
  .giving__opt:has(.giving__radio:checked):hover .giving__petal { transform: scale(1.07); }
  .giving__opt:hover .giving__pill-in { border-color: var(--ink); }
}

/* The core: gold, always. Empty it holds a heart; once an amount is chosen it holds the amount. */
.giving__core {
  position: absolute;
  inset-block-start: var(--top);
  inset-inline-start: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  inline-size: var(--core);
  block-size: var(--core);
  margin-block-start: calc(var(--core) / -2);
  margin-inline-start: calc(var(--core) / -2);
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  pointer-events: none;
}
.giving__core > * { grid-area: 1 / 1; }
.giving__core-empty { display: grid; place-items: center; }
.giving__core-empty > .icon { inline-size: calc(var(--core) * .4); block-size: calc(var(--core) * .4); }
.giving__core-value { display: none; justify-items: center; font-family: var(--font-latin); font-weight: 800; line-height: 1; white-space: nowrap; }
.giving__core-cur { font-size: max(1rem, var(--u) * .9); font-weight: 700; }
.giving__core-num { font-size: max(1.375rem, var(--u) * 2.1); letter-spacing: -0.02em; font-variant-numeric: lining-nums; }   /* lint-ok: Western digits only */
.giving__core-value[data-len="5"] > .giving__core-num { font-size: max(1.25rem, var(--u) * 1.7); }
.giving__core-value[data-len="6"] > .giving__core-num { font-size: max(1.125rem, var(--u) * 1.42); }
.giving__core-value[data-len="7"] > .giving__core-num,
.giving__core-value[data-len="8"] > .giving__core-num { font-size: max(1rem, var(--u) * 1.15); }
.giving__core-value[data-len="9"] > .giving__core-num { font-size: max(1rem, var(--u) * .92); }
.giving__core-other { display: none; max-inline-size: 78%; font-family: var(--font-display); font-size: max(1rem, var(--u) * .9); font-weight: var(--fw-display); line-height: var(--lh-ui); text-align: center; text-wrap: balance; }

/* Which amount shows, without a script: the checked radio decides (parts.js does the same with classes).
   These rules stand down once the script is running (:not(.is-live)): they outrank its classes otherwise,
   and a typed amount would sit on top of the words "other amount". */
.giving:not(.is-live) .giving__choose:has(.giving__radio:checked) .giving__core-empty { display: none; }
.giving:not(.is-live) .giving__choose:has(.giving__radio--1:checked) .giving__core-value--1,
.giving:not(.is-live) .giving__choose:has(.giving__radio--2:checked) .giving__core-value--2,
.giving:not(.is-live) .giving__choose:has(.giving__radio--3:checked) .giving__core-value--3,
.giving:not(.is-live) .giving__choose:has(.giving__radio--4:checked) .giving__core-value--4,
.giving:not(.is-live) .giving__choose:has(.giving__radio--5:checked) .giving__core-value--5,
.giving:not(.is-live) .giving__choose:has(.giving__radio--6:checked) .giving__core-value--6 { display: grid; }
.giving:not(.is-live) .giving__choose:has(.giving__radio--other:checked) .giving__core-other { display: block; }
/* With the script running, it alone decides (it also shows a typed amount). */
.giving.is-live .giving__core > * { display: none; }
.giving.is-live .giving__core > .is-shown { display: grid; }
.giving.is-live .giving__core > .giving__core-other.is-shown { display: block; }

.giving__side { display: grid; align-content: center; gap: clamp(1.1rem, .9rem + 1vw, 1.6rem); min-inline-size: 0; }
.giving__money { position: relative; display: grid; }
.giving__currency { position: absolute; inset-block: 0; left: 1rem; display: grid; place-items: center; color: var(--slate); font-family: var(--font-latin); font-weight: 700; pointer-events: none; }   /* lint-ok: the amount is written left to right in every language */
.giving__money > .field__input { padding-left: 3.6rem; font-family: var(--font-latin); font-size: 1.25rem; font-weight: 700; font-variant-numeric: lining-nums tabular-nums; text-align: left; transition: border-color var(--dur-2) ease, background-color var(--dur-2) ease; }   /* lint-ok: the amount is written left to right in every language */
/* "Other amount" is chosen: the field that wants the number steps forward. */
.giving__other.is-wanted .field__input,
.giving__form:has(.giving__radio--other:checked) .giving__other .field__input { border-color: var(--ink); background: var(--gold-mist); }
.giving__other.is-wanted .giving__currency,
.giving__form:has(.giving__radio--other:checked) .giving__currency { color: var(--ink); }
/* Your gift: always there, so nothing moves when an amount is chosen. Until then it ends in a blank. */
.giving__chosen {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .25rem .75rem;
  max-inline-size: none;
  color: var(--heading);
  font-size: var(--fs-lead);
  font-weight: var(--fw-medium);
}
.giving__chosen > strong { font-family: var(--font-latin); font-size: calc(var(--fs-sub) * 1.15); font-weight: 800; white-space: nowrap; }
.giving__chosen-v { display: none; }
.giving__chosen-v--none { display: inline-flex; align-items: baseline; gap: .3rem; color: var(--slate); font-weight: 700; }
.giving__blank { display: inline-block; inline-size: 3.2em; block-size: 2px; border-radius: 2px; background: var(--line-strong); }
.giving:not(.is-live) .giving__form:has(.giving__radio:checked:not(.giving__radio--other)) .giving__chosen-v--none { display: none; }
.giving:not(.is-live) .giving__form:has(.giving__radio--1:checked) .giving__chosen-v--1,
.giving:not(.is-live) .giving__form:has(.giving__radio--2:checked) .giving__chosen-v--2,
.giving:not(.is-live) .giving__form:has(.giving__radio--3:checked) .giving__chosen-v--3,
.giving:not(.is-live) .giving__form:has(.giving__radio--4:checked) .giving__chosen-v--4,
.giving:not(.is-live) .giving__form:has(.giving__radio--5:checked) .giving__chosen-v--5,
.giving:not(.is-live) .giving__form:has(.giving__radio--6:checked) .giving__chosen-v--6 { display: inline; }
.giving.is-live .giving__chosen-v { display: none; }
.giving.is-live .giving__chosen-v.is-shown { display: inline; }
.giving.is-live .giving__chosen-v--none.is-shown { display: inline-flex; }
.giving__act { display: grid; justify-items: start; gap: .75rem; }
.giving__button { max-inline-size: 100%; }
.giving__note { color: var(--fg-muted); font-size: var(--fs-small); max-inline-size: 26em; }
.giving__error { max-inline-size: none; }
/* The legal sentence: the full width of the panel, directly under the button. */
.giving__legal {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .9rem;
  align-items: start;
  max-inline-size: none;
  padding-block-start: clamp(1.1rem, .9rem + 1vw, 1.6rem);
  border-block-start: 1px solid var(--rule);
  color: var(--fg);
  font-size: var(--fs-small);
}
.giving__legal > span:last-child { max-inline-size: 46em; }
.giving .parts-fallback { background: var(--bone); }

@container (min-width: 46rem) {
  .giving__form { grid-template-columns: minmax(0, 13fr) minmax(0, 9fr); align-items: stretch; row-gap: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
  .giving__bloom { align-self: center; }
  .giving__legal { grid-column: 1 / -1; align-items: center; }
  .giving__button { min-inline-size: min(16rem, 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .giving__petal, .giving__pill-in, .giving__money > .field__input, .parts-fallback > .medallion, .cform__box, .cform__box > .icon { transition: none; }
}

/* ───────────────────────────────────────────── 11 A row that is a link ──
   A way onward: a medallion, a title that carries the link (the whole row is the target), an
   optional line, and a small chevron that leans the way it leads.
   <li class="parts-row c-sage"><span class="medallion medallion--solid">…</span>
     <div class="parts-row__text"><h3 class="parts-row__title"><a class="parts-row__link" href="…">…</a></h3><p>…</p></div>
     <span class="parts-row__go" aria-hidden="true">{{ icon('chevron') }}</span></li> */

.parts-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .9rem clamp(.9rem, .6rem + 1vw, 1.4rem);
  max-inline-size: none;
  padding: clamp(.9rem, .75rem + .6vw, 1.25rem) clamp(1rem, .8rem + .8vw, 1.5rem);
  border-radius: var(--r-row);
  background: var(--row);
}
.parts-row > .medallion { transition: scale var(--dur-4) var(--ease-pop); }
.parts-row__text { display: grid; gap: .2rem; }
.parts-row__text > p { color: var(--fg-muted); }
.parts-row__title { font-size: var(--fs-sub); }
.parts-row__link { color: var(--heading); text-decoration: none; }
.parts-row__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.parts-row__link:focus-visible { outline: none; }
.parts-row:has(.parts-row__link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.parts-row__go {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 50%;
  background: var(--bg);
  color: var(--heading);
  transition: translate var(--dur-3) var(--ease-out), background-color var(--dur-2) ease, color var(--dur-2) ease;
}
.parts-row__go > .icon { inline-size: 1.25rem; block-size: 1.25rem; }
.parts-row:active { scale: .99; }
@media (hover: hover) and (pointer: fine) {
  .parts-row:hover > .medallion { scale: 1.08; }
  .parts-row:hover > .parts-row__go { translate: calc(var(--dir) * .3rem) 0; background: var(--heading); color: var(--bg); }
}
@media (prefers-reduced-motion: reduce) {
  .parts-row > .medallion, .parts-row__go { transition: none; }
}