/* Campaign layout — DESIGN-2026-10-27-funding-page-layout.md. Tokens from theme.json
   where they exist (orange, yellow, canvas, surface, hairline); the spec's two greys
   (#a8a8a8 muted, #888888 dim) as local custom properties. */
:root {
  --pst-muted: #a8a8a8;
  --pst-dim: #888888;
  --pst-body: #c9c9c9;
  --pst-track: #1c1c1c;
  --pst-border2: #3a3a3a;
  --pst-mono: var(--wp--preset--font-family--mono);
  --pst-display: var(--wp--preset--font-family--display);
  --pst-orange: var(--wp--preset--color--orange);
  --pst-yellow: var(--wp--preset--color--yellow);
}
.pst-wrap { max-width: 1120px; width: 100%; margin: 0 auto; box-sizing: border-box; padding-left: 40px; padding-right: 40px; }
.pst-eyebrow { margin: 0; font-family: var(--pst-mono); font-size: 11px; letter-spacing: .12em; color: var(--pst-dim); text-transform: uppercase; }
.pst-mono { font-family: var(--pst-mono); font-weight: 700; }
.pst-dim { color: var(--pst-muted); }
.pst-small { font-size: 13px; line-height: 1.5; }
.pst-orange { color: var(--pst-orange); }
.pst-line { margin: 0; font-size: 15px; line-height: 1.5; color: var(--pst-body); }
.pst-link { color: var(--pst-orange); font-weight: 600; font-size: 14px; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.pst-chip-sample { display: inline-block; font-family: var(--pst-mono); font-size: 11px; letter-spacing: .12em; color: #000; background: var(--pst-yellow); padding: 6px 10px; vertical-align: middle; }
/* buttons: 44px minimum */
.pst-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; box-sizing: border-box; padding: 12px 16px; font-weight: 600; font-size: 15px; text-decoration: none; border: 1px solid var(--pst-border2); color: #fff; background: #000; text-align: center; }
.pst-btn:hover { text-decoration: none; }
.pst-btn-primary { background: var(--pst-orange); border-color: var(--pst-orange); color: #000; }
.pst-btn-primary:hover { background: #fff; border-color: #fff; color: #000; }
.pst-btn-outline { background: #000; border-color: var(--pst-border2); color: #fff; font-weight: 500; }
.pst-btn-outline-orange { background: #000; border-color: var(--pst-orange); color: #fff; }
.pst-btn-lg { min-height: 48px; font-size: 17px; padding: 14px 20px; width: 100%; }
.pst-btns { display: flex; gap: 10px; margin-top: 6px; }
.pst-btns > .pst-btn { flex: 1; }
.pst-btns-inline > .pst-btn { flex: 0 0 auto; }
.pst-btn-give { min-height: 44px; padding: 10px 16px; margin-left: 16px; }
/* bars */
.pst-bar { height: 10px; background: var(--pst-track); position: relative; }
.pst-bar > span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--pst-orange); }
.pst-bar.is-full > span { background: #fff; }
.pst-bar-lg { height: 12px; }
.pst-bar-wrap { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.pst-bar-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.pst-bar-row.pst-small { font-size: 13px; color: var(--pst-muted); }
.pst-status.is-deadline { color: var(--pst-yellow); }
.pst-status.is-funded { color: var(--pst-orange); }
/* funding page */
.pst-campaign-page { color: #fff; }
.pst-hero { padding-top: 64px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 20px; }
.pst-hero h1 { margin: 0; font-family: var(--pst-display); font-weight: 800; font-size: 48px; line-height: 1.05; max-width: 14ch; }
.pst-lede, .pst-lede p { margin: 0; font-size: 20px; line-height: 1.5; color: var(--pst-body); max-width: 60ch; }
.pst-impact { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--wp--preset--color--hairline); border: 1px solid var(--wp--preset--color--hairline); padding: 0; max-width: 1040px; }
.pst-impact > div { background: #000; padding: 24px; display: flex; flex-direction: column; gap: 6px; }
.pst-impact .pst-big { font-size: 36px; }
.pst-impact .pst-dim { font-size: 14px; }
.pst-footnote { font-size: 13px; color: var(--pst-dim); margin: 12px auto 48px; }
.pst-section-head { display: flex; flex-direction: column; gap: 8px; padding-bottom: 16px; }
.pst-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.pst-section-head h2, .pst-who h2, .pst-ways h2 { margin: 0; font-family: var(--pst-display); font-weight: 700; font-size: 28px; }
.pst-section-head .pst-dim { margin: 0; font-size: 15px; line-height: 1.5; max-width: 70ch; }
.pst-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-bottom: 48px; }
.pst-card { border: 1px solid var(--wp--preset--color--hairline); background: var(--wp--preset--color--surface); display: flex; flex-direction: column; gap: 14px; padding: 24px; min-width: 0; }
.pst-card h3 { margin: 0; font-family: var(--pst-display); font-weight: 700; font-size: 22px; line-height: 1.15; }
.pst-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-bottom: 56px; }
.pst-box { border: 1px solid var(--wp--preset--color--hairline); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.pst-box h3 { margin: 0; font-family: var(--pst-display); font-size: 16px; }
.pst-box-funded h3, .pst-box-committed h3 { font-size: 22px; }
.pst-box-committed h3 { font-family: var(--pst-mono); }
.pst-who { display: flex; flex-direction: column; gap: 16px; padding-bottom: 56px; }
.pst-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.pst-chip { border: 1px solid var(--pst-border2); padding: 10px 14px; font-size: 14px; }
.pst-ways { display: flex; flex-direction: column; gap: 16px; padding-bottom: 64px; }
.pst-ways-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--wp--preset--color--hairline); border: 1px solid var(--wp--preset--color--hairline); }
.pst-ways-grid > div { background: #000; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.pst-ways-grid h3 { margin: 0; font-family: var(--pst-display); font-size: 18px; }
.pst-ways-grid p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--pst-body); }
/* program campaign page */
.pst-campaign { padding-top: 48px; padding-bottom: 64px; display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.pst-story { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.pst-back { font-size: 14px; color: var(--pst-muted); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.pst-story-head { display: flex; flex-direction: column; gap: 14px; }
.pst-story-head h1 { margin: 0; font-family: var(--pst-display); font-weight: 800; font-size: 48px; line-height: 1.05; }
.pst-story-head .pst-lede { font-size: 19px; }
.pst-story-body { display: flex; flex-direction: column; gap: 32px; }
.pst-story-body h2 { margin: 0; font-family: var(--pst-display); font-weight: 700; font-size: 24px; }
.pst-blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--wp--preset--color--hairline); border: 1px solid var(--wp--preset--color--hairline); }
.pst-blocks > div { background: #000; padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.pst-blocks h3 { margin: 0; font-family: var(--pst-display); font-size: 17px; }
.pst-blocks p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--pst-body); }
.pst-budget { display: flex; flex-direction: column; gap: 12px; }
.pst-budget table { width: 100%; border-collapse: collapse; font-size: 15px; }
.pst-budget td { padding: 12px 0; border-bottom: 1px solid var(--wp--preset--color--hairline); color: var(--pst-body); }
.pst-budget td:last-child { text-align: right; font-family: var(--pst-mono); color: #fff; }
.pst-budget tr.pst-total td { border-bottom: 0; font-weight: 600; color: #fff; }
.pst-updates { display: flex; flex-direction: column; gap: 12px; }
.pst-update { border: 1px solid var(--wp--preset--color--hairline); padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.pst-update .pst-date { font-family: var(--pst-mono); font-size: 12px; color: var(--pst-dim); }
.pst-update p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--pst-body); }
.pst-honest p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--pst-body); }
.pst-aside { flex: 1 1 340px; max-width: 400px; display: flex; flex-direction: column; gap: 24px; position: sticky; top: 24px; }
.pst-donate-box { border: 1px solid var(--pst-border2); background: var(--wp--preset--color--surface); padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.pst-donate-box .pst-chip-sample { align-self: flex-start; }
.pst-box-figure { display: flex; flex-direction: column; gap: 4px; }
.pst-box-figure .pst-dim { font-size: 15px; }
.pst-box-figure.pst-rule { border-top: 1px solid var(--wp--preset--color--hairline); padding-top: 14px; }
.pst-huge { font-size: 34px; }
.pst-large { font-size: 24px; }
.pst-deadline-banner { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #1a1600; border: 1px solid var(--pst-yellow); font-size: 14px; }
.pst-deadline-banner .pst-mono { font-size: 12px; letter-spacing: .1em; color: var(--pst-yellow); font-weight: 500; }
.pst-donor { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 8px 0; border-bottom: 1px solid var(--pst-track); }
.pst-donor .pst-mono { color: var(--pst-body); font-weight: 500; }
/* phones */
@media (max-width: 900px) {
  .pst-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pst-impact, .pst-ways-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pst-aside { position: static; max-width: none; }
}
@media (max-width: 720px) {
  .pst-wrap { padding-left: 16px; padding-right: 16px; }
  .pst-hero { padding-top: 40px; }
  .pst-hero h1, .pst-story-head h1 { font-size: 34px; }
  .pst-lede, .pst-lede p { font-size: 17px; }
  .pst-grid, .pst-two, .pst-impact, .pst-ways-grid, .pst-blocks { grid-template-columns: minmax(0, 1fr); }
  .pst-impact .pst-big { font-size: 30px; }
  .pst-campaign { flex-direction: column; gap: 32px; }
  .pst-aside { order: -1; width: 100%; flex-basis: auto; }
  .pst-btns { flex-wrap: wrap; }
  .pst-btns > .pst-btn { flex: 1 1 100%; }
  .pst-btns-inline > .pst-btn { flex: 1 1 100%; }
  .pst-btn-give { margin-left: 8px; }
}