@charset "UTF-8";
/* ==========================================================================
   Trimmed With Care: trimmedwithcare.org
   © 2026 Trimmed With Care; Shear Kindness Inc.

   One stylesheet, no build step, no preprocessor. Layer order is the cascade
   contract: anything in a later layer beats an earlier one regardless of
   specificity, which is what keeps this file editable by hand.

   Colors are sampled from the organization's own logo, apparel and printed
   material, NOT from the Wix template this site replaces (whose navy #18157C
   and yellow #EACF0E are deliberately absent).

   HARD RULE: the logo gold is 2.4:1 on the page background. It fails even the
   3:1 non-text threshold. Gold is a FILL with a dark label on it, or it is
   text on near-black. It is never text on a light surface; use --brand-ink.
   See DECISIONS.md.

   There are no inline styles anywhere in this site: the Content-Security-Policy
   forbids them and no nonce is possible from a static _headers file.
   ========================================================================== */

@layer tokens, reset, base, layout, components, prose, utilities;

/* ==========================================================================
   FONTS: self-hosted, latin subset, variable, roman only.
   No italic is shipped: the single pull quote in the whole content inventory
   is set in 600-weight roman instead, which saves ~38 KB.
   ========================================================================== */
@font-face {
  font-family: Epilogue;
  src: url("/fonts/epilogue-latin-var.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Literata;
  src: url("/fonts/literata-latin-var.woff2") format("woff2-variations");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@layer tokens {
  :root {
    color-scheme: light dark;

    /* ---- brand primitives, measured from assets ---- */
    --twc-gold: #c39f44;
    --twc-black: #110f0f;
    --twc-paper: #e3dcd9;
    --twc-rust: #a94825;

    /* ---- surfaces ----
       Warm and light by default. The brand is black-and-gold, so dark is kept
       as a deliberate accent (one band per page, plus the footer) rather than
       the general ground: an all-near-black site read heavy and flat. */
    --surface: #fbf8f3;          /* cream, the default page */
    --surface-raised: #ffffff;   /* cards */
    --surface-warm: #f5ecde;     /* sand, for alternating bands */
    --surface-accent: #f8e9e0;   /* terracotta tint, for emphasis bands */
    --surface-sunken: #efe4d4;   /* linen, deepest light tone */
    --surface-paper: #f2e7d8;    /* founder letter */
    --surface-inverse: #221a15;  /* espresso, warmer than near-black */
    --surface-inverse-raised: #2e241d;

    /* ---- ink ---- */
    --ink: #141110;
    --ink-muted: #4a403a;
    --ink-subtle: #5c5148;
    --ink-on-inverse: #f7f2ea;
    --ink-muted-on-inverse: #cfc5b8;
    --ink-subtle-on-inverse: #aba096;

    /* ---- borders. Only -control and -strong may carry meaning (>=3:1). ---- */
    --border-subtle: #e8dcc9;
    --border: #d3c4ac;
    --border-control: #7d7266;    /* form inputs */
    --border-strong: #665c52;

    /* ---- gold ---- */
    --brand: #c39f44;
    --brand-fill: #c39f44;
    --brand-fill-hover: #b08728;
    /* The fill keeps the bright brand gold, but the EDGE is darker so the
       control boundary clears 3:1 on any warm ground (bright gold is 2.4:1
       against cream, which would make the button edge unidentifiable). */
    --brand-edge: #9c7a26;
    --on-brand: #141110;
    --brand-ink: #7a6224;         /* the only gold approved as text on light */
    --brand-on-dark: #d8b863;
    --brand-wash: #f6edd7;        /* very light gold, for tints and watermarks */

    /* ---- rust: the warm accent, taken from the founder's own flyer ---- */
    --accent: #a94825;
    --accent-fill: #a94825;
    --accent-fill-hover: #8a3b1e;
    --accent-edge: #8a3b1e;
    --on-accent: #ffffff;
    --accent-ink: #9b4222;
    --accent-on-dark: #e8a37c;
    --accent-wash: #f8e9e0;

    /* ---- focus. One ring that works on every ground in this palette. ---- */
    --focus: #141110;
    --focus-halo: #c39f44;
    --focus-universal: #8a6a2e;

    /* ---- semantic ---- */
    --success-ink: #186043;
    --success-surface: #e8f2ec;
    --success-border: #2e7d5b;
    --error-ink: #a01b14;
    --error-surface: #fbeae8;
    --error-border: #b3261e;

    /* ---- type ---- */
    --font-display: Epilogue, "Helvetica Neue", Arial, sans-serif;
    --font-prose: Literata, Georgia, "Times New Roman", serif;

    /* Fluid scale. Every step keeps a rem intercept, never vw alone, which
       is what keeps text zoomable and satisfies SC 1.4.4. */
    --step--2: clamp(0.78125rem, 0.771rem + 0.052vw, 0.8125rem);
    --step--1: clamp(0.875rem, 0.854rem + 0.104vw, 0.9375rem);
    --step-0: clamp(1.03125rem, 1rem + 0.156vw, 1.125rem);
    --step-1: clamp(1.125rem, 1.083rem + 0.208vw, 1.25rem);
    --step-2: clamp(1.25rem, 1.167rem + 0.417vw, 1.5rem);
    --step-3: clamp(1.4375rem, 1.271rem + 0.833vw, 1.9375rem);
    --step-4: clamp(1.6875rem, 1.417rem + 1.354vw, 2.5rem);
    --step-5: clamp(2rem, 1.583rem + 2.083vw, 3.25rem);
    --step-6: clamp(2.5rem, 1.833rem + 3.333vw, 4.5rem);

    --lh-display: 1.06;
    --lh-heading: 1.18;
    --lh-snug: 1.35;
    --lh-ui: 1.5;
    --lh-prose: 1.65;

    --measure-prose: 66ch;
    --measure-narrow: 52ch;
    --measure-lead: 44ch;

    /* ---- space, 4px base ---- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --space-10: 8rem;

    --gutter: clamp(1rem, 4vw, 2.5rem);
    --section-y: clamp(3.5rem, 8vw, 7.5rem);
    --section-y-lg: clamp(5rem, 11vw, 10rem);
    --header-h: 4.5rem;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgb(17 15 15 / 0.06), 0 1px 3px rgb(17 15 15 / 0.08);
    --shadow-md: 0 2px 4px rgb(17 15 15 / 0.05), 0 6px 16px rgb(17 15 15 / 0.09);
    --shadow-lg: 0 4px 8px rgb(17 15 15 / 0.05), 0 16px 40px rgb(17 15 15 / 0.12);

    --scrim-strong: rgb(11 10 10 / 0.72);
    --scrim-soft: rgb(11 10 10 / 0.45);

    --dur-fast: 120ms;
    --dur-base: 180ms;
    --dur-slow: 240ms;
    --ease-out: cubic-bezier(0.2, 0, 0, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Dark mode follows the OS. No toggle: a toggle needs JS and persistence,
     and the site respects the choice the visitor already made. */
  @media (prefers-color-scheme: dark) {
    :root {
      --surface: #17120f;
      --surface-raised: #211a15;
      --surface-warm: #1e1813;
      --surface-accent: #241a15;
      --surface-sunken: #100c0a;
      --surface-paper: #2b211a;
      --surface-inverse: #0d0a08;
      --surface-inverse-raised: #211a15;

      --ink: #f7f2ea;
      --ink-muted: #cfc5b8;
      --ink-subtle: #aba096;

      --border-subtle: #302620;
      --border: #40342c;
      --border-control: #837a70;
      --border-strong: #9d938a;

      --brand-ink: #d8b863;
      --brand-fill: #d8b863;
      --brand-fill-hover: #e4c87c;
      --brand-edge: #d8b863;
      --on-brand: #141110;
      --brand-wash: #2a2118;

      --accent-ink: #e8a37c;
      --accent-fill: #b2542f;
      --accent-fill-hover: #c66540;
      --accent-edge: #c66540;
      --accent-wash: #2c1c14;

      --focus: #f7f2ea;
      --success-ink: #7fd0a8;
      --success-surface: #12251c;
      --success-border: #3f8f68;
      --error-ink: #f2a09a;
      --error-surface: #2a1211;
      --error-border: #c4544c;

      --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
      --shadow-md: 0 2px 4px rgb(0 0 0 / 0.4), 0 6px 16px rgb(0 0 0 / 0.44);
      --shadow-lg: 0 4px 8px rgb(0 0 0 / 0.4), 0 16px 40px rgb(0 0 0 / 0.5);
    }
  }
}

/* ==========================================================================
   RESET
   ========================================================================== */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    tab-size: 4;
  }

  body {
    min-height: 100vh;
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  img,
  picture,
  svg,
  video {
    display: block;
    max-width: 100%;
    height: auto;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }

  button {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
  }

  ul[class],
  ol[class] {
    list-style: none;
    padding: 0;
  }

  a {
    color: inherit;
  }

  :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, figcaption, blockquote) {
    overflow-wrap: break-word;
  }

  /* Grid and flex children default to min-width:auto and refuse to shrink below
     their min-content, which is how one long email address became a horizontal
     scrollbar at 320px: an `auto` grid track grew to 317px inside a 288px
     container. Letting the layout primitives shrink is the actual fix.
     (`overflow-wrap: anywhere` also cures the overflow, by reducing min-content
     contribution, but it licenses breaks mid-token and produced a stranded "m"
     on "TrimmedWithCare@gmail.co / m". Measured: min-inline-size alone is
     sufficient, so the wrapping stays conservative.) */
  :where(.sidebar-layout, .split, .cards, .ledger, .steps, .give__grid) > * {
    min-inline-size: 0;
  }

  /* Addresses may break only if they genuinely cannot fit. */
  :where(a[href^="mailto:"], a[href^="http"], .meta-list dd, address) {
    overflow-wrap: break-word;
  }

  /* A phone number should never be split across two lines. */
  :where(a[href^="tel:"]) {
    white-space: nowrap;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ==========================================================================
   BASE
   ========================================================================== */
@layer base {
  html {
    scroll-behavior: smooth;
    /* Anchor targets must clear the sticky header. */
    scroll-padding-top: calc(var(--header-h) + var(--space-5));
  }
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }

  body {
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-prose);
    font-size: var(--step-0);
    line-height: var(--lh-prose);
    font-variant-numeric: oldstyle-nums;
    display: flex;
    flex-direction: column;
  }

  main {
    flex: 1 0 auto;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-display);
    font-weight: 650;
    line-height: var(--lh-heading);
    letter-spacing: -0.015em;
    text-wrap: balance;
    font-variant-numeric: lining-nums;
  }

  h1 {
    font-size: var(--step-5);
    font-weight: 700;
    line-height: var(--lh-display);
    letter-spacing: -0.03em;
  }
  h2 {
    font-size: var(--step-4);
  }
  h3 {
    font-size: var(--step-2);
    font-weight: 600;
  }
  h4 {
    font-size: var(--step-1);
    font-weight: 600;
  }

  p {
    text-wrap: pretty;
  }

  strong,
  b {
    font-weight: 600;
  }

  a {
    color: var(--brand-ink);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
    transition: color var(--dur-fast) var(--ease-out);
  }
  a:hover {
    color: var(--accent-ink);
  }

  /* One focus treatment everywhere. --focus-universal clears 3:1 on both the
     light and the dark ground, so a control over a photograph is still visible. */
  :focus-visible {
    outline: 3px solid var(--focus-universal);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }
  :focus:not(:focus-visible) {
    outline: none;
  }

  ::selection {
    background: var(--brand-fill);
    color: var(--on-brand);
  }

  hr {
    border: 0;
    border-top: 1px solid var(--border-subtle);
    margin-block: var(--space-7);
  }

  figure {
    margin: 0;
  }

  figcaption {
    font-family: var(--font-display);
    font-size: var(--step--1);
    line-height: var(--lh-ui);
    color: var(--ink-subtle);
    margin-top: var(--space-3);
  }

  blockquote {
    margin: 0;
  }

  address {
    font-style: normal;
  }
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
@layer layout {
  .container {
    --w: 72rem;
    inline-size: min(100% - 2 * var(--gutter), var(--w));
    margin-inline: auto;
  }
  .container--prose {
    --w: 42rem;
  }
  .container--narrow {
    --w: 52rem;
  }
  .container--wide {
    --w: 82.5rem;
  }

  /* Bands carry the vertical rhythm and the surface changes. Never place two
     bands of the same kind next to each other. */
  .band {
    padding-block: var(--section-y);
  }
  .band--lg {
    padding-block: var(--section-y-lg);
  }
  .band--tight {
    padding-block: var(--space-7);
  }
  .band--sunken {
    background: var(--surface-sunken);
  }
  .band--warm {
    background: var(--surface-warm);
  }
  .band--accent {
    background: var(--surface-accent);
  }
  /* A hairline of gold where two light bands meet, so the rhythm reads as
     deliberate structure rather than an accidental tone change. */
  .band--edge-top {
    border-block-start: 3px solid var(--brand);
  }
  .band--paper {
    background: var(--surface-paper);
  }
  /* An inverse band RE-DECLARES THE TOKENS rather than recolouring specific
     descendants.
     Why it matters: `.lede` lives in @layer components and this block lives in
     @layer layout, so a `.band--inverse .lede { color: … }` rule LOSES to the
     plain `.lede` rule no matter how specific it is: layers beat specificity.
     That shipped `--ink-muted` (#4A4340) onto a near-black band at 1.97:1 in
     light mode. Dark mode happened to pass, which is why one-scheme testing
     missed it.
     Redefining custom properties sidesteps the cascade entirely: inheritance
     carries the right value into every descendant, including components added
     later that nobody thought to add an override for. */
  .band--inverse {
    --surface: var(--surface-inverse);
    --surface-raised: var(--surface-inverse-raised);
    --surface-sunken: var(--surface-inverse);
    --ink: var(--ink-on-inverse);
    --ink-muted: var(--ink-muted-on-inverse);
    --ink-subtle: var(--ink-subtle-on-inverse);
    --brand-ink: var(--brand-on-dark);
    --accent-ink: var(--accent-on-dark);
    --border-subtle: rgb(255 255 255 / 0.14);
    --border: rgb(255 255 255 / 0.22);
    --border-control: #9a938c;
    --border-strong: #b8b1aa;
    --focus-universal: var(--brand-on-dark);

    background: var(--surface-inverse);
    color: var(--ink);
  }
  .band--inverse a:hover {
    color: var(--accent-on-dark);
  }
  .band--inverse .rule {
    background: var(--brand);
  }

  .stack > * + * {
    margin-top: var(--flow, var(--space-5));
  }
  .stack--tight {
    --flow: var(--space-3);
  }
  .stack--loose {
    --flow: var(--space-6);
  }

  .cards {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  }
  .cards--2 {
    grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  }

  /* Split layout: text beside an image. The image column is the wider one
     because the photographs are landscape. */
  .split {
    display: grid;
    gap: var(--space-6);
    align-items: center;
  }
  @media (min-width: 64em) {
    .split {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
      gap: var(--space-8);
    }
    .split--reverse > :first-child {
      order: 2;
    }
    .split--text-wide {
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    }
  }

  .sidebar-layout {
    display: grid;
    gap: var(--space-7);
  }
  @media (min-width: 60em) {
    .sidebar-layout {
      grid-template-columns: minmax(0, 1fr) 18rem;
      gap: var(--space-8);
      align-items: start;
    }
  }
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */
@layer components {
  /* ---- skip link ---- */
  .skip-link {
    position: absolute;
    inset-inline-start: var(--space-4);
    inset-block-start: -100%;
    z-index: 100;
    padding: var(--space-3) var(--space-5);
    background: var(--surface-inverse);
    color: var(--ink-on-inverse);
    font-family: var(--font-display);
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
  }
  .skip-link:focus {
    inset-block-start: 0;
  }

  /* ---- eyebrow / kicker ---- */
  .eyebrow {
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand-ink);
    line-height: var(--lh-ui);
    display: block;
  }

  /* ---- gold hairline: the workhorse graphic device of a type-led site ---- */
  .rule {
    inline-size: 3.5rem;
    block-size: 3px;
    background: var(--brand-fill);
    border-radius: 2px;
  }
  .rule--wide {
    inline-size: 100%;
    block-size: 1px;
    background: var(--border-subtle);
    border-radius: 0;
  }

  .lede {
    font-size: var(--step-2);
    line-height: var(--lh-snug);
    color: var(--ink-muted);
    max-inline-size: var(--measure-narrow);
    text-wrap: pretty;
  }

  .muted {
    color: var(--ink-subtle);
  }

  /* ---- buttons ---- */
  .btn {
    --btn-bg: transparent;
    --btn-fg: var(--ink);
    --btn-bd: currentColor;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-block-size: 2.75rem; /* 44px */
    padding: var(--space-3) var(--space-6);
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 2px solid var(--btn-bd);
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: var(--step-0);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--dur-base) var(--ease-out),
      border-color var(--dur-base) var(--ease-out),
      color var(--dur-base) var(--ease-out),
      transform var(--dur-fast) var(--ease-out);
  }
  .btn:hover {
    color: var(--btn-fg);
  }

  /* Gold fill, near-black label: 7.6:1. This is gold's correct use. */
  .btn--primary {
    --btn-bg: var(--brand-fill);
    --btn-fg: var(--on-brand);
    --btn-bd: var(--brand-edge);
  }
  .btn--primary:hover {
    --btn-bg: var(--brand-fill-hover);
    --btn-bd: var(--brand-edge);
  }
  /* The pressed state keeps the hover background (5.3:1) and expresses press
     through motion, because the darker gold would drop the label to 4.05:1. */
  .btn--primary:active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 4px rgb(17 15 15 / 0.25);
  }

  .btn--secondary {
    --btn-bg: transparent;
    --btn-fg: var(--ink);
    --btn-bd: var(--border-strong);
  }
  .btn--secondary:hover {
    --btn-bd: var(--ink);
    --btn-bg: var(--surface-sunken);
  }
  .btn--secondary:active {
    transform: translateY(1px);
  }

  .btn--accent {
    --btn-bg: var(--accent-fill);
    --btn-fg: var(--on-accent);
    --btn-bd: var(--accent-edge);
  }
  .btn--accent:hover {
    --btn-bg: var(--accent-fill-hover);
    --btn-bd: var(--accent-fill-hover);
  }

  /* On an inverse band, the outline button needs light borders. */
  .band--inverse .btn--secondary {
    --btn-fg: var(--ink-on-inverse);
    --btn-bd: var(--ink-subtle-on-inverse);
  }
  .band--inverse .btn--secondary:hover {
    --btn-bd: var(--ink-on-inverse);
    --btn-bg: rgb(255 255 255 / 0.08);
  }

  .btn--lg {
    font-size: var(--step-1);
    padding: var(--space-4) var(--space-7);
    min-block-size: 3.25rem;
  }

  .btn--block {
    inline-size: 100%;
  }

  .btn[aria-disabled="true"],
  .btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
  }

  .btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  /* ---- the tap-to-call block. The single most important control on the
     site: for many of the people this organization serves, a phone call is
     the only channel that reliably works. ---- */
  .callout-phone {
    /* Always dark, whatever band it sits in, so it redeclares the ground
       tokens like .band--inverse does. Without this, a mailto: link inside it
       inherited the light-surface gold (#745E25) onto near-black. */
    --ink: var(--ink-on-inverse);
    --ink-muted: var(--ink-muted-on-inverse);
    --ink-subtle: var(--ink-subtle-on-inverse);
    --brand-ink: var(--brand-on-dark);
    --accent-ink: var(--accent-on-dark);
    --focus-universal: var(--brand-on-dark);

    /* The number sizes off THIS box, not the viewport. Sized in vw it rendered
       48px inside an 18rem sidebar on /contact and spilled 124px out of its own
       rounded corner. A container query makes every placement self-correcting,
       so dropping a callout into a narrow column later cannot reintroduce it. */
    container-type: inline-size;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-5);
    /* Tighter at 320px so the number itself gets the room. */
    padding: var(--space-5) var(--space-4);
    background: var(--surface-inverse);
    color: var(--ink-on-inverse);
    border-radius: var(--radius-lg);
    border-inline-start: 4px solid var(--brand);
  }
  @media (min-width: 30em) {
    .callout-phone {
      padding: var(--space-6);
    }
  }
  /* display:block, not inline. As an inline span the number flowed onto the same
     line as the label's last word, so a wrapped label read
     "CALL US - THIS IS THE FASTEST / WAY (904) 476-7997". It is a kicker; it
     belongs on its own line above the number. */
  .callout-phone__label {
    display: block;
    margin-block-end: var(--space-2);
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: 600;
    line-height: var(--lh-ui);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand-on-dark);
  }
  /* Sized to dominate its own panel rather than to fit a scale step. Its own clamp, because the type
     scale put it at 27px on a 375px screen, smaller than the h1 above it, on
     the page whose entire purpose is getting someone to call. Nowrap so a
     phone number never breaks across lines; the clamp floor is set to what
     actually fits inside the callout at 320px. */
  .callout-phone__number {
    /* inline-flex + min-block-size, not inline-block: at the small end the
       clamp floor gave a 26px-tall box, so the single most important link on
       the site had a 26px tap target. Height is now guaranteed independent of
       font size. */
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    font-family: var(--font-display);
    font-size: clamp(1.375rem, 9.5cqi, 3rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    white-space: nowrap;
    color: var(--ink-on-inverse);
    text-decoration: none;
    font-variant-numeric: lining-nums tabular-nums;
  }
  .callout-phone__number:hover,
  .callout-phone__number:focus-visible {
    color: var(--brand-on-dark);
    text-decoration: underline;
    text-decoration-thickness: 2px;
  }

  /* ---- site header ---- */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(10px);
    border-block-end: 1px solid var(--border-subtle);
  }
  @supports not (backdrop-filter: blur(10px)) {
    .site-header {
      background: var(--surface);
    }
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    /* Wraps only under duress. At text-only 200% zoom the Donate button pushed
       the row 221px past the viewport; with wrap it stacks instead. Nothing
       wraps at any normal size, so this costs the usual layout nothing. */
    flex-wrap: wrap;
    gap: var(--space-3);
    padding-block: var(--space-2);
    min-block-size: var(--header-h);
  }
  @media (min-width: 62em) {
    .site-header__inner {
      gap: var(--space-5);
    }
  }

  /* Wordmark is HTML text in --ink, never gold: logotypes are exempt from
     contrast rules but HTML text is not, and gold is 2.4:1 here. */
  .brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: var(--ink);
    margin-inline-end: auto;
    padding-block: var(--space-2);
    /* flex-basis 0, not auto. With flex-wrap on the header, wrapping is decided
       from each item's HYPOTHETICAL size before any shrinking happens, and the
       brand's full one-line width overshot a 320px row by 7px, dropping the
       header to two rows and 124px tall. A zero basis means the brand never
       triggers the wrap; it grows into whatever space is left and wraps its own
       label internally instead. */
    flex: 1 1 0;
    min-inline-size: 0;
  }
  .brand__mark {
    inline-size: 2.25rem;
    block-size: 2.25rem;
    flex: none;
  }
  .brand__text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    min-inline-size: 0;
  }
  /* Two lines at most, never three. "Trimmed With Care" broke to three lines at
     375px, which pushed the header past 130px tall and squeezed the menu button
     out of the row entirely. */
  .brand__name {
    font-family: var(--font-display);
    font-size: var(--step-0);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  .brand__tag {
    display: none;
    font-family: var(--font-display);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-subtle);
    white-space: nowrap;
  }
  /* Deliberately NOT `white-space: nowrap`. With flex-basis 0 the name
     overflowed its own box and painted straight over the nav links at 1024px.
     Wrapping to two lines is ugly; overprinting the organization's own name on
     top of the navigation is broken. */
  @media (min-width: 48em) {
    .brand__mark {
      inline-size: 2.5rem;
      block-size: 2.5rem;
    }
    .brand__name {
      font-size: var(--step-1);
    }
    .brand__tag {
      display: block;
    }
  }

  .nav {
    display: none;
  }
  .nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nav__link {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--ink-muted);
    text-decoration: none;
    letter-spacing: 0.01em;
  }
  .nav__link:hover {
    color: var(--ink);
  }
  .nav__link[aria-current="page"] {
    color: var(--ink);
  }
  .nav__link[aria-current="page"]::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: -2px;
    block-size: 2px;
    background: var(--brand-fill);
  }
  .nav__item {
    position: relative;
  }

  
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none; /* was being crushed to 2px in the mobile flex row */
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border: 1px solid var(--border-control);
    border-radius: var(--radius-md);
    color: var(--ink);
  }
  .nav-toggle:hover {
    background: var(--surface-sunken);
  }
  .nav-toggle svg {
    inline-size: 1.375rem;
    block-size: 1.375rem;
  }
  .header-cta {
    display: none;
    flex: none;
  }
  @media (min-width: 48em) {
    .header-cta {
      display: inline-flex;
    }
  }

  .nav-toggle__close {
    display: none;
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle__open {
    display: none;
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle__close {
    display: block;
  }

  /* Mobile drawer. Closed state is hidden from the a11y tree via [hidden]
     in the markup; JS only toggles that attribute. */
  .drawer {
    border-block-start: 1px solid var(--border-subtle);
    background: var(--surface);
    padding-block: var(--space-4) var(--space-6);
  }
  .drawer__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .drawer__link {
    display: flex;
    align-items: center;
    min-block-size: 3rem;
    padding-inline: var(--space-2);
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    border-block-end: 1px solid var(--border-subtle);
  }
  .drawer__link[aria-current="page"] {
    color: var(--brand-ink);
  }
  .drawer__cta {
    margin-top: var(--space-5);
  }

  /* Removing the phone link freed ~160px in this row, so the nav fits from
     64em again. Verified across every width: the brand is never compressed
     enough to clip or overlap. */
  @media (min-width: 64em) {
    .nav {
      display: block;
    }
    .nav-toggle,
    .drawer {
      display: none !important;
    }
    .header-phone__text {
      display: inline;
    }
  }

  /* ---- hero ---- */
  .hero {
    padding-block: var(--section-y-lg);
  }
  .hero__title {
    max-inline-size: 22ch;
  }
  .hero__lede {
    max-inline-size: var(--measure-lead);
    font-size: var(--step-2);
    line-height: var(--lh-snug);
    color: var(--ink-muted);
  }
  .hero__media img {
    inline-size: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
  }

  /* ---- page header (interior pages) ---- */
  .page-head {
    padding-block: var(--section-y) var(--space-7);
  }
  .page-head__title {
    max-inline-size: 26ch;
  }

  /* ---- cards ---- */
  .card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--dur-base) var(--ease-out),
      transform var(--dur-base) var(--ease-out),
      border-color var(--dur-base) var(--ease-out);
  }
  .card__title {
    font-size: var(--step-2);
  }
  .card__title a {
    color: inherit;
    text-decoration: none;
  }
  .card__body {
    color: var(--ink-muted);
    font-size: var(--step-0);
  }
  .card__more {
    margin-block-start: auto;
    padding-block-start: var(--space-3);
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--brand-ink);
  }

  /* Whole-card link target, without nesting interactive elements. */
  .card--link {
    position: relative;
  }
  .card--link:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--border);
  }
  .card--link:focus-within {
    outline: 3px solid var(--focus-universal);
    outline-offset: 2px;
  }
  .card--link a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }
  .card--link a:focus-visible {
    outline: none;
  }

  /* "Three doors": the one-click routes for the site's three audiences. */
  .door {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-7) var(--space-6);
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-block-start: 3px solid var(--brand-fill);
    border-radius: var(--radius-lg);
  }
  .door__title {
    font-size: var(--step-2);
  }
  .door__title a {
    color: inherit;
    text-decoration: none;
  }

  /* ---- stat tile (renders only when real numbers exist) ---- */
  .stat {
    text-align: center;
  }
  .stat__num {
    display: block;
    font-family: var(--font-display);
    font-size: var(--step-5);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--brand-ink);
  }
  .stat__label {
    display: block;
    margin-block-start: var(--space-2);
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: 500;
    color: var(--ink-muted);
  }

  /* ---- pull quote. Set in roman 600, not italic: no italic is shipped. ---- */
  .pullquote {
    border-inline-start: 3px solid var(--brand-fill);
    padding-inline-start: var(--space-6);
    /* No measure here: `ch` resolves against THIS element's font-size (18px),
       not the 31px text inside it, so 34ch came out at 354px and crammed the
       quote into six short lines. The measure belongs on the text. */
  }
  .pullquote__text {
    /* Measured in the quote's own type size, so it scales with the variant. */
    max-inline-size: 30ch;
    font-family: var(--font-prose);
    font-size: var(--step-1);
    font-weight: 600;
    line-height: var(--lh-snug);
    letter-spacing: -0.01em;
    text-wrap: pretty;
  }
  /* Only where there is real width to fill. A narrow column at --step-3 breaks
     into a ragged seven-line stack. */
  .pullquote--lg .pullquote__text {
    font-size: var(--step-3);
    text-wrap: balance;
  }
  .pullquote__cite {
    display: block;
    margin-block-start: var(--space-4);
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-subtle);
    font-style: normal;
  }

  /* ---- founder letter ---- */
  .letter__portrait img {
    border-radius: var(--radius-lg);
    /* The only source is a 148px crop from a print flyer. Held small on
       purpose. See "Original camera files" in the handover notes. */
    inline-size: 9rem;
    box-shadow: var(--shadow-sm);
  }
  .letter__signature {
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  .letter__role {
    font-family: var(--font-display);
    font-size: var(--step--1);
    color: var(--ink-subtle);
    line-height: var(--lh-ui);
  }

  /* ---- event / meta list ---- */
  .meta-list {
    display: grid;
    gap: var(--space-4);
    margin: 0;
  }
  .meta-list dt {
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-subtle);
  }
  .meta-list dd {
    margin: 0;
    /* Metadata values, one step down like the footer's contact list. At
       --step-0 the email address did not fit the 221px sidebar column and
       wrapped mid-token. */
    font-size: var(--step--1);
  }

  .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: var(--step--2);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }
  .chip--soon {
    border-color: var(--brand-fill);
    color: var(--brand-ink);
  }

  /* ---- forms ---- */
  .form {
    display: grid;
    gap: var(--space-5);
  }
  .field {
    display: grid;
    gap: var(--space-2);
  }
  .field__label {
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--ink);
  }
  .field__hint {
    font-family: var(--font-display);
    font-size: var(--step--1);
    color: var(--ink-subtle);
    line-height: var(--lh-ui);
  }
  .field__req {
    color: var(--accent-ink);
  }
  .input,
  .textarea,
  .select {
    inline-size: 100%;
    min-block-size: 2.75rem;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-display);
    font-size: var(--step-0);
    background: var(--surface-raised);
    color: var(--ink);
    border: 1px solid var(--border-control);
    border-radius: var(--radius-md);
    transition: border-color var(--dur-fast) var(--ease-out),
      box-shadow var(--dur-fast) var(--ease-out);
  }
  .textarea {
    min-block-size: 9rem;
    resize: vertical;
    line-height: var(--lh-ui);
  }
  /* Custom dropdown indicator, drawn with borders rather than an image.
     An SVG data: URI here was blocked outright by `img-src 'self'`, and
     because appearance:none removes the native arrow, the control rendered
     with NO indicator at all. Geometry costs no request and needs no CSP
     concession, and matches how the FAQ chevron is drawn. */
  .select-wrap {
    position: relative;
    display: block;
  }
  .select-wrap::after {
    content: "";
    position: absolute;
    inset-inline-end: var(--space-4);
    inset-block-start: 50%;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    margin-block-start: -0.32rem;
    border-inline-end: 2px solid var(--border-strong);
    border-block-end: 2px solid var(--border-strong);
    transform: rotate(45deg);
    pointer-events: none;
  }
  .select {
    appearance: none;
    padding-inline-end: var(--space-8);
  }
  .select-wrap:focus-within::after,
  .select-wrap:hover::after {
    border-color: var(--ink);
  }
  .input:hover,
  .textarea:hover,
  .select:hover {
    border-color: var(--border-strong);
  }
  .input:focus-visible,
  .textarea:focus-visible,
  .select:focus-visible {
    border-color: var(--ink);
    outline: 3px solid var(--focus-universal);
    outline-offset: 1px;
  }
  .input[aria-invalid="true"],
  .textarea[aria-invalid="true"] {
    border-color: var(--error-border);
    border-width: 2px;
  }
  .field__error {
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--error-ink);
  }

  /* Honeypot. Off-canvas rather than type=hidden or display:none, because
     some bots skip both. Never focusable by a real keyboard user. */
  .hp {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .form-status {
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    border-inline-start: 4px solid;
    font-family: var(--font-display);
    font-size: var(--step-0);
  }
  .form-status:empty {
    display: none;
  }
  .form-status--ok {
    background: var(--success-surface);
    border-color: var(--success-border);
    color: var(--success-ink);
  }
  .form-status--err {
    background: var(--error-surface);
    border-color: var(--error-border);
    color: var(--error-ink);
  }

  /* ---- notice / aside ---- */
  .notice {
    padding: var(--space-5) var(--space-6);
    background: var(--surface-sunken);
    border-inline-start: 3px solid var(--brand-fill);
    border-radius: var(--radius-md);
  }
  .notice__title {
    font-family: var(--font-display);
    font-size: var(--step-0);
    font-weight: 600;
    margin-block-end: var(--space-2);
  }

  /* ---- FAQ ---- */
  .faq {
    border-block-start: 1px solid var(--border-subtle);
  }
  .faq__item {
    border-block-end: 1px solid var(--border-subtle);
  }
  .faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-block-size: 3.5rem;
    padding-block: var(--space-4);
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
  }
  .faq__q::-webkit-details-marker {
    display: none;
  }
  .faq__q::after {
    content: "";
    flex: none;
    inline-size: 0.75rem;
    block-size: 0.75rem;
    border-inline-end: 2px solid var(--brand-ink);
    border-block-end: 2px solid var(--brand-ink);
    transform: rotate(45deg);
    transition: transform var(--dur-base) var(--ease-out);
  }
  .faq__item[open] .faq__q::after {
    transform: rotate(225deg);
  }
  .faq__a {
    padding-block-end: var(--space-5);
    max-inline-size: var(--measure-prose);
    color: var(--ink-muted);
  }

  /* ---- footer ---- */
  /* Same token-redeclaration pattern as .band--inverse, for the same reason:
     the footer is always dark regardless of scheme, so any component dropped
     into it must inherit dark-ground tokens rather than rely on an override
     that a cascade layer could outrank. */
  .site-footer {
    --ink: var(--ink-on-inverse);
    --ink-muted: var(--ink-muted-on-inverse);
    --ink-subtle: var(--ink-subtle-on-inverse);
    --brand-ink: var(--brand-on-dark);
    --accent-ink: var(--accent-on-dark);
    --border-subtle: rgb(255 255 255 / 0.14);
    --focus-universal: var(--brand-on-dark);

    background: var(--surface-inverse);
    color: var(--ink-muted);
    border-block-start: 3px solid var(--brand);
    padding-block: var(--space-8) var(--space-6);
    margin-block-start: var(--space-9);
  }
  /* Six pages close on an inverse band, and the footer's top margin left a 96px
     strip of light page background between two dark sections, reading as a
     rendering fault rather than a deliberate gap.
     The bands live inside <main>, so the footer's previous sibling is <main>, so
     an adjacent-sibling selector on the band itself never matches. :has() lets
     us ask the real question: does main END on a dark band? */
  main:has(> :last-child.band--inverse) + .site-footer {
    margin-block-start: 0;
  }
  .site-footer a {
    color: var(--ink-on-inverse);
    text-decoration: none;
  }
  .site-footer a:hover {
    color: var(--brand-on-dark);
    text-decoration: underline;
  }
  .site-footer__grid {
    display: grid;
    gap: var(--space-7);
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  }
  .site-footer__brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }
  .site-footer__mark {
    inline-size: 3rem;
    block-size: 3rem;
    flex: none;
  }
  .site-footer__name {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 700;
    color: var(--ink-on-inverse);
    letter-spacing: -0.02em;
  }
  .site-footer__heading {
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand-on-dark);
    margin-block-end: var(--space-4);
  }
  .site-footer__list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-display);
    /* One step down. At --step-0 the email address measured exactly as wide as
       its 252px footer column and broke to two lines, stranding a single "m".
       Secondary contact detail reads perfectly well a step smaller, and this
       keeps the address on one line at every width. */
    font-size: var(--step--1);
  }
  /* A 17px-tall link in a list is a poor thumb target even where SC 2.5.8's
     spacing exception technically allows it. 32px of height plus an 8px gap
     puts adjacent targets 40px apart. */
  .site-footer__list a {
    display: inline-flex;
    align-items: center;
    min-block-size: 2rem;
  }
  .site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-6);
    align-items: baseline;
    margin-block-start: var(--space-8);
    padding-block-start: var(--space-5);
    border-block-start: 1px solid rgb(255 255 255 / 0.12);
    font-family: var(--font-display);
    font-size: var(--step--1);
    color: var(--ink-subtle-on-inverse);
  }
  .site-footer__legal {
    margin-inline-end: auto;
  }

  /* ---- breadcrumb ---- */
  .breadcrumb {
    font-family: var(--font-display);
    font-size: var(--step--1);
    color: var(--ink-subtle);
  }
  .breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .breadcrumb li + li::before {
    content: "/";
    margin-inline-end: var(--space-2);
    color: var(--border);
  }

  /* ======================================================================
     DECORATIVE + EDITORIAL COMPONENTS
     These exist to stop the page reading as a flat stack of full-width
     bands. Every one of them is CSS geometry or an existing asset: no new
     requests, and nothing that needs a CSP concession.
     ====================================================================== */

  /* A large, very low-contrast logo mark behind a section. Purely decorative,
     so it is aria-hidden in the markup and never carries meaning. */
  .deco {
    position: relative;
    overflow: clip;
  }
  .deco__mark {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: -6%;
    inline-size: min(46rem, 90%);
    translate: 0 -50%;
    opacity: 0.045;
    pointer-events: none;
    user-select: none;
  }
  @media (prefers-color-scheme: dark) {
    .deco__mark {
      opacity: 0.06;
    }
  }
  .deco > .container {
    position: relative;
  }

  /* Image with an offset gold rule behind it. Gives the flat photo blocks
     some depth without a drop shadow, and echoes the badge's ring. */
  .framed {
    position: relative;
    isolation: isolate;
  }
  .framed::before {
    content: "";
    position: absolute;
    inset: 0;
    translate: var(--space-4) var(--space-4);
    border: 2px solid var(--brand);
    border-radius: var(--radius-lg);
    z-index: -1;
  }
  .framed img {
    border-radius: var(--radius-lg);
  }
  @media (min-width: 48em) {
    .framed::before {
      translate: var(--space-5) var(--space-5);
    }
  }

  /* Opening phrase of a section, set in the rust accent. Cheap way to add
     warmth and a reading entry point. */
  .lead-in {
    color: var(--accent-ink);
    font-weight: 600;
  }

  /* Oversized quotation mark, drawn as type rather than an image. */
  .figure-quote {
    /* Establishes the query container the `cqi` below resolves against. Without
       it, cqi falls back to the small-viewport size, so the mark rendered at
       144px instead of ~73px and scaled with the browser window rather than
       with the quotation it decorates. */
    container-type: inline-size;
    position: relative;
    padding-block-start: var(--space-6);
  }
  .figure-quote::before {
    content: "\201C";
    position: absolute;
    inset-block-start: -0.25em;
    inset-inline-start: -0.06em;
    font-family: var(--font-prose);
    font-size: clamp(5rem, 14cqi, 9rem);
    line-height: 1;
    color: var(--brand);
    opacity: 0.35;
    pointer-events: none;
  }

  /* Numbered steps with gold numerals. */
  .steps {
    counter-reset: step;
    display: grid;
    gap: var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .steps > li {
    counter-increment: step;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-4) var(--space-5);
    align-items: start;
  }
  .steps > li::before {
    content: counter(step);
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border: 2px solid var(--brand);
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 700;
    font-variant-numeric: lining-nums;
    color: var(--brand-ink);
  }
  .steps__title {
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 600;
    margin-block-end: var(--space-2);
  }
  .steps__body {
    grid-column: 2;
  }

  /* A row of short statements divided by gold rules. Reads as structure and
     fills horizontal space that a plain paragraph leaves empty. */
  .ledger {
    display: grid;
    gap: var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ledger > li {
    padding-block-start: var(--space-5);
    border-block-start: 2px solid var(--brand);
  }
  .ledger__label {
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand-ink);
    display: block;
    margin-block-end: var(--space-3);
  }
  .ledger__text {
    font-size: var(--step-1);
    line-height: var(--lh-snug);
  }
  @media (min-width: 48em) {
    .ledger {
      grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
      gap: var(--space-7);
    }
  }

  /* The mission invitation panel. This replaces the phone callout as the
     site's recurring call to action: the goal is to bring someone into the
     work, not to generate a phone call. */
  .invite {
    display: grid;
    gap: var(--space-5);
    padding: var(--space-7) var(--space-6);
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-block-start: 4px solid var(--brand);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }
  .invite__title {
    font-size: var(--step-3);
    max-inline-size: 30ch;
  }
  .invite__body {
    max-inline-size: var(--measure-narrow);
    color: var(--ink-muted);
    font-size: var(--step-1);
    line-height: var(--lh-snug);
  }
  @media (min-width: 60em) {
    .invite {
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
      align-items: center;
      gap: var(--space-8);
      padding: var(--space-8) var(--space-7);
    }
  }

  /* ======================================================================
     DONATION FORM PREVIEW
     A visual mock of the giving experience so the organization can see what a
     visitor would meet before choosing a payment processor. Every control is
     `disabled` in the markup, the form has no action, and a notice states
     plainly that it is a preview. Nothing here can accept or transmit a card
     number, and nobody should be able to mistake it for a live payment form.
     ====================================================================== */
  .give {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
  }
  .give__head {
    padding: var(--space-5) var(--space-6);
    background: var(--surface-warm);
    border-block-end: 1px solid var(--border);
  }
  .give__title {
    font-size: var(--step-2);
  }
  .give__body {
    padding: var(--space-6);
    display: grid;
    gap: var(--space-6);
  }
  .give__notice {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    padding: var(--space-4) var(--space-5);
    background: var(--accent-wash);
    border-inline-start: 4px solid var(--accent-fill);
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-size: var(--step--1);
    line-height: var(--lh-ui);
    color: var(--ink);
  }
  .give__notice strong {
    display: block;
    margin-block-end: var(--space-1);
  }
  .give fieldset {
    border: 0;
    margin: 0;
    padding: 0;
  }
  .give legend {
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-subtle);
    margin-block-end: var(--space-3);
    padding: 0;
  }

  /* Segmented control: one time / monthly */
  .give__segments {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    padding: var(--space-1);
    background: var(--surface-sunken);
    border-radius: var(--radius-pill);
  }
  .give__segment {
    min-block-size: 2.75rem;
    padding-inline: var(--space-5);
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    font-family: var(--font-display);
    font-size: var(--step-0);
    font-weight: 600;
    color: var(--ink-muted);
  }
  .give__segment[aria-pressed="true"] {
    background: var(--surface-raised);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
  }

  /* Amount tiles */
  .give__amounts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(6.5rem, 100%), 1fr));
    gap: var(--space-3);
  }
  .give__amount {
    min-block-size: 3.5rem;
    padding: var(--space-3);
    background: var(--surface-raised);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 700;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--ink);
  }
  .give__amount[aria-pressed="true"] {
    border-color: var(--brand-edge);
    background: var(--brand-wash);
  }
  .give__impact {
    margin-block-start: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--surface-warm);
    border-inline-start: 3px solid var(--brand);
    border-radius: var(--radius-md);
    font-size: var(--step-0);
    color: var(--ink-muted);
  }

  /* Card fields */
  .give__grid {
    display: grid;
    gap: var(--space-4);
  }
  @media (min-width: 34em) {
    .give__grid--split {
      grid-template-columns: 1fr 1fr;
    }
  }
  .give__card-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }
  .give__brands {
    display: flex;
    gap: var(--space-2);
    margin-inline-start: auto;
  }
  /* Card-brand chips, drawn as type. No third-party logo requests. */
  .give__brand {
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 1.5rem;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--surface-sunken);
    font-family: var(--font-display);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--ink-subtle);
  }
  .give__foot {
    padding: var(--space-5) var(--space-6) var(--space-6);
    border-block-start: 1px solid var(--border);
    background: var(--surface-warm);
    display: grid;
    gap: var(--space-4);
  }
  .give__secure {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-display);
    font-size: var(--step--2);
    color: var(--ink-subtle);
  }
  .give__secure svg {
    inline-size: 0.875rem;
    block-size: 0.875rem;
    flex: none;
  }

  /* Every control in the preview is disabled. Make that unmistakably visible
     rather than leaving controls that look pressable but are not. */
  .give [disabled] {
    cursor: not-allowed;
  }
  .give input[disabled] {
    background: var(--surface-sunken);
    color: var(--ink-subtle);
    -webkit-text-fill-color: var(--ink-subtle);
    opacity: 1; /* keep the placeholder legible */
  }
  .give__segment[disabled],
  .give__amount[disabled] {
    opacity: 1;
  }

  /* ---- post / list meta ---- */
  .post-meta {
    font-family: var(--font-display);
    font-size: var(--step--1);
    color: var(--ink-subtle);
    font-variant-numeric: lining-nums;
  }
}

/* ==========================================================================
   PROSE: long-form body copy. The founder's letter is the reason this
   layer exists and is tuned the way it is.
   ========================================================================== */
@layer prose {
  .prose {
    max-inline-size: var(--measure-prose);
    hanging-punctuation: first last;
    hyphens: manual;
  }
  .prose > * + * {
    margin-block-start: var(--space-5);
  }
  .prose p,
  .prose li {
    font-size: var(--step-0);
    line-height: var(--lh-prose);
  }
  .prose > h2 {
    margin-block-start: var(--space-8);
    font-size: var(--step-3);
  }
  .prose > h3 {
    margin-block-start: var(--space-7);
    font-size: var(--step-1);
  }
  .prose > h2 + *,
  .prose > h3 + * {
    margin-block-start: var(--space-4);
  }
  /* Matches both a list inside .prose and a list that IS .prose. */
  :is(.prose ul, ul.prose, .prose ol, ol.prose) {
    display: grid;
    gap: var(--space-3);
  }
  :is(.prose ul, ul.prose) {
    list-style: none;
    padding-inline-start: 0;
  }
  :is(.prose ul, ul.prose) > li {
    position: relative;
    padding-inline-start: var(--space-6);
  }
  :is(.prose ul, ul.prose) > li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.62em;
    inline-size: 0.4rem;
    block-size: 0.4rem;
    background: var(--brand-fill);
    border-radius: 50%;
  }
  :is(.prose ol, ol.prose) {
    list-style: decimal;
    padding-inline-start: var(--space-6);
  }
  :is(.prose ol, ol.prose) > li::marker {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--brand-ink);
  }
  .prose a {
    text-decoration: underline;
  }
  .prose blockquote {
    border-inline-start: 3px solid var(--brand-fill);
    padding-inline-start: var(--space-5);
    color: var(--ink-muted);
  }
  .prose strong {
    color: var(--ink);
  }
  .prose dl {
    display: grid;
    gap: var(--space-4);
  }
  .prose dt {
    font-family: var(--font-display);
    font-weight: 600;
  }
  .prose dd {
    margin: 0;
    color: var(--ink-muted);
  }
  .prose table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--step--1);
  }
  .prose :is(th, td) {
    text-align: start;
    padding: var(--space-3);
    border-block-end: 1px solid var(--border-subtle);
  }
  .prose th {
    font-family: var(--font-display);
    font-weight: 600;
  }
  /* Wide content scrolls inside its own box; the page body never does. */
  .prose .scroll-x {
    overflow-x: auto;
  }
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
@layer utilities {
  .visually-hidden {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .text-center {
    text-align: center;
  }
  .mx-auto {
    margin-inline: auto;
  }
  .measure-prose {
    max-inline-size: var(--measure-prose);
  }
  .measure-narrow {
    max-inline-size: var(--measure-narrow);
  }

  .mt-4 {
    margin-block-start: var(--space-4);
  }
  .mt-5 {
    margin-block-start: var(--space-5);
  }
  .mt-6 {
    margin-block-start: var(--space-6);
  }
  .mt-7 {
    margin-block-start: var(--space-7);
  }
  .mt-8 {
    margin-block-start: var(--space-8);
  }
  .mb-4 {
    margin-block-end: var(--space-4);
  }
  .mb-5 {
    margin-block-end: var(--space-5);
  }
  .mb-6 {
    margin-block-end: var(--space-6);
  }

  .flow-tight {
    --flow: var(--space-3);
  }

  [hidden] {
    display: none !important;
  }
}

/* ==========================================================================
   PRINT
   Deliberately unlayered so it beats every @layer above without !important.

   This matters more than it looks for this organization: a shelter worker,
   a case manager, or a volunteer is a realistic person to print /get-a-haircut
   or an event page and pin it to a wall. Before this, printing produced two
   solid espresso bands of ink and silently dropped all seven FAQ answers,
   because a closed <details> does not print its content.
   ========================================================================== */
@media print {
  /* Ink economy and legibility: everything prints as black on white. */
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  html {
    font-size: 11pt;
  }

  body {
    background: #fff;
  }

  /* Screen furniture that means nothing on paper. */
  .site-header,
  .nav,
  .nav-toggle,
  .drawer,
  .skip-link,
  .deco__mark,
  .btn-row,
  .invite,
  .breadcrumb,
  .give__segments,
  .give__amounts,
  .give__foot {
    display: none !important;
  }

  /* The offset gold rule is a screen device; on paper it prints as a stray box. */
  .framed::before,
  .figure-quote::before {
    display: none !important;
  }

  /* Bands collapse to plain sections with a rule between them. */
  .band {
    padding-block: 0 !important;
    margin-block-end: 18pt;
    border: 0 !important;
  }

  .container {
    inline-size: auto !important;
    max-inline-size: none !important;
    margin: 0 !important;
  }

  /* Multi-column layouts become a single readable column. */
  .split,
  .sidebar-layout,
  .cards,
  .ledger,
  .give__grid {
    display: block !important;
  }

  .card,
  .door,
  .notice,
  .ledger > li,
  .steps > li,
  .give {
    border: 1pt solid #999 !important;
    border-radius: 0 !important;
    padding: 8pt !important;
    margin-block-end: 10pt;
    break-inside: avoid;
  }

  /* Every answer prints. A closed <details> keeps its content off the page,
     which silently lost two thirds of /get-a-haircut.
     Chrome hides that content with `content-visibility: hidden` on the
     ::details-content pseudo-element, so overriding `display` on the child is
     not enough. Both rules are kept: the pseudo-element for current browsers,
     the child rule for engines that predate it. */
  details {
    display: block !important;
  }
  details::details-content {
    content-visibility: visible !important;
    block-size: auto !important;
  }
  details > *:not(summary) {
    display: block !important;
    content-visibility: visible !important;
  }
  .faq__q::after {
    display: none !important;
  }
  .faq__q {
    font-weight: 700;
  }

  h1,
  h2,
  h3 {
    break-after: avoid;
  }

  p,
  li,
  blockquote,
  figure {
    break-inside: avoid;
  }

  /* Content photography is decorative on a printed information sheet, and this
     organization's hero images are very dark, so they would consume a
     disproportionate amount of toner for no informational gain. The logo mark
     stays so the page is identifiable. */
  main figure,
  main picture,
  .hero__media {
    display: none !important;
  }

  img {
    max-inline-size: 100% !important;
    break-inside: avoid;
  }
  .brand__mark,
  .site-footer__mark {
    inline-size: 32pt !important;
    block-size: auto !important;
  }

  /* A printed page loses its links, so name the destination for anything a
     reader would otherwise have no way to reach. Internal paths are expanded
     to the full URL. */
  main a[href^="/"]::after {
    content: " (trimmedwithcare.org" attr(href) ")";
    font-size: 9pt;
  }
  main a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
  }
  main a[href^="mailto:"]::after,
  main a[href^="tel:"]::after,
  main a[href^="#"]::after {
    content: "";
  }

  /* Contact details are the most useful thing on a printed page, so the footer
     stays, trimmed to what a person can act on. */
  .site-footer {
    margin-block-start: 18pt;
    padding-block: 8pt 0;
    border-block-start: 1pt solid #999 !important;
  }
  .site-footer__grid {
    display: block !important;
  }
  .site-footer__list {
    display: block !important;
  }
  .site-footer nav,
  .site-footer__grid > div:nth-child(3),
  .site-footer__grid > div:nth-child(4) {
    display: none !important;
  }
}