/* ==========================================================================
   /fund — the donation page.  .fund-* only.

   The prototype fakes the amount picker with <button aria-pressed>. Here it is a
   real radio group inside a <fieldset><legend>, so it submits without JavaScript,
   arrow-keys like a radio group and announces as one. The radio itself is hidden
   from sight but not from focus; `:checked + .fund-amt-face` paints the amber
   state and `:focus-visible + .fund-amt-face` paints the focus ring.
   ========================================================================== */

.fund-wrap {
  padding-top: clamp(40px, 6vw, 80px);
  padding-bottom: clamp(56px, 9vw, 112px);
}

.fund-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}


/* --------------------------------------------------------------- left column */

.fund-eyebrow { margin-bottom: 14px; }

.fund-h1 {
  margin: 0 0 24px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(34px, 5.6vw, 76px);
  line-height: 0.9;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  max-width: 14ch;
}

.fund-p {
  margin: 0 0 22px;
  max-width: 46ch;
  font-size: 19px;
  color: var(--body-ink);
}

.fund-ways {
  margin: 0 0 28px;
  padding: 0;
  max-width: 46ch;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.fund-way {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 18px;
  color: var(--body-ink);
}

.fund-way-n {
  flex: none;
  padding-top: 4px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--rust);
}

.fund-fine {
  margin: 0 0 12px;
  max-width: 46ch;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--muted);
}
.fund-fine:last-child { margin-bottom: 0; }


/* --------------------------------------------------------------- slate panel */

.fund-panel {
  background: var(--slate);
  color: var(--paper);
  border-radius: 4px;
  padding: clamp(20px, 3vw, 32px);
}

.fund-fieldset { margin: 0 0 22px; }

.fund-legend {
  display: block;
  width: 100%;
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
}


/* -------------------------------------------------------------- the presets */

.fund-amts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
}

.fund-amt { position: relative; display: block; }

/* off-screen, still focusable — the visible control is the sibling face */
.fund-amt-in {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.fund-amt-face {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 15px 8px;
  border: 1px solid var(--slate-2);
  border-radius: 3px;
  color: var(--paper);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.fund-amt-face:hover { border-color: var(--amber); }

.fund-amt-in:checked + .fund-amt-face {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--ink);
}

.fund-amt-in:focus-visible + .fund-amt-face {
  outline: 3px solid var(--flare);
  outline-offset: 2px;
}


/* ---------------------------------------------------------- the custom amount
   The £ prefix and the input share one bordered box, so the box carries the
   focus ring: its own overflow:hidden would clip an outline drawn on the input. */

.fund-custom-label {
  display: block;
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted-dark);
}

.fund-custom {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--slate-2);
  border-radius: 3px;
  overflow: hidden;
}
.fund-custom:hover { border-color: var(--amber); }
.fund-custom:focus-within {
  border-color: var(--amber);
  outline: 3px solid var(--flare);
  outline-offset: 2px;
}

.fund-custom-sym {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  background: var(--slate-field);
  color: var(--muted-dark);
  font-family: var(--mono);
}

.fund-custom-in {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 12px 14px;
  background: transparent;
  border: none;
  color: var(--paper);
  font-family: var(--mono);
  font-size: 16px;
}
.fund-custom .fund-custom-in:focus-visible { outline: none; }


/* ------------------------------------------------------- error, submit, notes */

/* a live region that is always in the DOM, and invisible while it is empty */
.fund-err {
  margin: 12px 0 0;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--flare);
}
.fund-err:empty { display: none; }

.fund-submit { margin-top: 22px; }

.fund-note {
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--faint);
}

/* shown instead of a working submit when STRIPE_SECRET_KEY is unset */
.fund-off {
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--amber);
}


/* ---------------------------------------------------------------- done panel */

.fund-done-h {
  margin: 0 0 14px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--amber);
}

.fund-done-p {
  margin: 0 0 22px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted-dark);
}