:root {
  --fundraise-gold:#FFB627;
  --fundraise-cyan:#35D0EE;
  --fundraise-green:#3EE08F;
  --fundraise-magenta:#F45FC0;
  --fundraise-indigo:#4B3FD6;
  --fundraise-dark:#0A1018;
  --fundraise-navy:#0D1B2E;
  --fundraise-copy:#C8D2DD;
  --fundraise-muted:#93A0AE;
  --fundraise-line:rgba(255,255,255,.14);
}

html { scroll-padding-top:116px; }
body.fundraise-page { color:#fff; background:var(--fundraise-dark); }
.fundraise-page main { overflow:clip; }

.fundraise-hero {
  min-height:580px;
  display:grid;
  place-items:center;
  padding:178px 24px 84px;
  background:linear-gradient(145deg,#07101D,#0D1B2E 68%,#08111E);
}
.fundraise-hero__inner { width:min(980px,100%); text-align:left; }
.document-kicker {
  display:inline-flex;
  margin-bottom:25px;
  padding:9px 13px;
  color:var(--fundraise-dark);
  background:var(--fundraise-gold);
  box-shadow:4px 4px 0 var(--fundraise-indigo);
  font:900 10px/1.2 Inter,sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.fundraise-hero h1 {
  max-width:940px;
  margin:0;
  font:700 clamp(40px,6vw,72px)/1.06 'Libre Baskerville',Georgia,serif;
  letter-spacing:-.01em;
  text-transform:none;
  text-wrap:balance;
}
.fundraise-hero p {
  max-width:800px;
  margin:30px 0 0;
  color:var(--fundraise-copy);
  font:400 clamp(19px,2.1vw,25px)/1.5 'Libre Baskerville',Georgia,serif;
}
.fundraise-hero p em { font-style:normal; }
.article-byline {
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:28px;
  color:var(--fundraise-muted);
  font:700 11px/1.4 Inter,sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.article-byline::before { content:""; width:32px; height:2px; background:var(--fundraise-cyan); }
.article-byline strong { color:#fff; }
.phase-strip,.document-nav { display:none; }

.document-layout {
  width:min(760px,calc(100% - 48px));
  display:block;
  margin:0 auto;
  padding:96px 0 125px;
}
.playbook-document { min-width:0; color:var(--fundraise-copy); font:400 18px/1.82 Inter,sans-serif; }
.playbook-phase { scroll-margin-top:116px; padding:0 0 82px; }
.playbook-phase:last-child { padding-bottom:0; }
.phase-header { margin:0; padding:0; }
.phase-index { display:none; }
.phase-header h2 {
  position:relative;
  margin:0 0 28px;
  padding-top:14px;
  color:#fff;
  font:700 clamp(26px,3.4vw,36px)/1.18 'Libre Baskerville',Georgia,serif;
  letter-spacing:-.01em;
  text-transform:none;
  text-wrap:balance;
}
.phase-header h2::before { content:""; position:absolute; left:0; top:0; width:54px; height:4px; background:var(--fundraise-cyan); box-shadow:5px 0 0 var(--fundraise-magenta); }
.phase-body { padding:0; }
.phase-goal {
  margin:0 0 32px;
  padding:24px 26px;
  color:var(--fundraise-dark);
  background:var(--fundraise-gold);
  box-shadow:7px 7px 0 var(--fundraise-indigo);
  font:400 17px/1.6 'Libre Baskerville',Georgia,serif;
}
.phase-goal em { font-style:normal; }
.phase-goal strong { color:inherit; }
.task-list { margin:0; padding-left:1.25rem; }
.task-item { margin:0 0 30px; padding-left:.3rem; }
.task-item::marker { color:var(--fundraise-magenta); }
.task-title { margin-bottom:9px; color:#fff; font:700 18px/1.45 Inter,sans-serif; }
.task-title > strong { color:inherit; }
.subtasks { margin:0; padding-left:1.2rem; }
.subtasks li { margin:8px 0; padding-left:.25rem; color:var(--fundraise-copy); font:400 16px/1.65 Inter,sans-serif; }
.subtasks li::marker { color:var(--fundraise-cyan); }
.subtasks strong,.subtasks em { color:#fff; }
.task-title a,.subtasks a { color:var(--fundraise-cyan); text-underline-offset:4px; }
.external-mark { margin-left:4px; color:var(--fundraise-gold); }
.reading-label { margin:42px 0 18px; color:var(--fundraise-gold); font:900 10px/1.2 Inter,sans-serif; letter-spacing:.15em; text-transform:uppercase; }
.resource-card { list-style:none; margin-left:-1.55rem; padding:0; }

/* Recommended reading reads as a shelf, not a checklist (#107). Stacked
   full-width cards cost 674px of the phase for three links; three abreast with
   the cover on top costs a fraction of that and suits a portrait book cover
   better than a 104px letterbox did. auto-fit rather than a fixed 3 so it
   degrades to two and then one without another breakpoint. */
.reading-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(196px,1fr)); gap:18px; margin-left:0; padding-left:0; }
.reading-list .resource-card { margin:0; padding:0; }
.reading-list .resource-card > a { grid-template-columns:minmax(0,1fr); height:100%; align-items:stretch; align-content:start; }
.reading-list .resource-media { min-height:112px; padding:14px; border-right:0; border-bottom:1px solid var(--fundraise-line); }
.reading-list .resource-media img { max-height:96px; }
.reading-list .resource-title { align-items:flex-start; gap:12px; padding:15px 16px; font-size:14px; line-height:1.45; }
.reading-list .resource-title .external-mark { flex:0 0 26px; height:26px; }
.resource-card > a {
  display:grid;
  grid-template-columns:104px minmax(0,1fr);
  align-items:center;
  color:#fff;
  background:var(--fundraise-navy);
  border:1px solid var(--fundraise-line);
  box-shadow:6px 6px 0 var(--fundraise-cyan);
  text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease;
}
.resource-media { min-height:120px; display:grid; place-items:center; align-self:stretch; padding:12px; background:#08111E; border-right:1px solid var(--fundraise-line); }
.resource-media img { width:100%; max-height:104px; object-fit:contain; }
/* The <picture> added in #122 must generate no box of its own: .resource-media
   is a grid with place-items:center and the <img> is the grid item that
   width:100% resolves against. An inline <picture> in between shrink-to-fits
   and the covers collapse from 211px wide to their intrinsic width at 96px
   tall. display:contents keeps the <img> the grid item, so wrapping it is
   layout-neutral. */
.resource-media picture { display: contents; }
.resource-title { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:22px; font:700 17px/1.4 Inter,sans-serif; }
.resource-title .external-mark { flex:0 0 34px; height:34px; display:grid; place-items:center; color:var(--fundraise-dark); background:var(--fundraise-gold); }
.resource-card > a:hover,.resource-card > a:focus-visible { transform:translateY(-3px); box-shadow:8px 8px 0 var(--fundraise-magenta); outline:none; }

@media(max-width:760px) {
  html { scroll-padding-top:92px; }
  .fundraise-hero { min-height:0; padding:138px 20px 66px; }
  .fundraise-hero h1 { font-size:clamp(34px,9vw,46px); }
  .fundraise-hero p { font-size:19px; }
  .document-layout { width:min(100% - 32px,760px); padding:68px 0 88px; }
  .playbook-document { font-size:17px; }
  .playbook-phase { scroll-margin-top:92px; padding-bottom:62px; }
  .phase-header h2 { font-size:36px; }
  .phase-goal { padding:21px; font-size:17px; box-shadow:5px 5px 0 var(--fundraise-indigo); }
  .subtasks li { font-size:15px; }
  .resource-card > a { grid-template-columns:82px minmax(0,1fr); }
  .reading-list .resource-card > a { grid-template-columns:minmax(0,1fr); }
  .resource-media { min-height:100px; padding:8px; }
  .resource-title { padding:17px 15px; font-size:14px; }
}

/* Once the shelf collapses to a single column the cover-on-top card is the
   wrong shape: three stacked portrait covers are taller than the letterbox rows
   they replaced, which loses on a phone exactly what it won on a desktop. Below
   the two-column threshold the card goes back to cover-beside-title, compact. */
@media(max-width:640px) {
  .reading-list { grid-template-columns:1fr; gap:12px; }
  .reading-list .resource-card > a { grid-template-columns:76px minmax(0,1fr); align-items:center; }
  .reading-list .resource-media { min-height:78px; padding:9px; border-right:1px solid var(--fundraise-line); border-bottom:0; }
  .reading-list .resource-media img { max-height:64px; }
  .reading-list .resource-title { align-items:center; gap:10px; padding:12px 13px; font-size:13.5px; }
  .reading-list .resource-title .external-mark { flex:0 0 24px; height:24px; }
}

@media(prefers-reduced-motion:reduce) and (min-width:100000px) { html { scroll-behavior:auto; } .resource-card > a { transition:none; } }

@media print {
  .site-header,.site-contact-cta,.site-footer { display:none!important; }
  body.fundraise-page { color:#111; background:#fff; }
  .fundraise-hero { min-height:0; padding:30px 0 45px; color:#111; background:#fff; }
  .fundraise-hero p,.playbook-document,.subtasks li { color:#333; }
  .document-layout { width:100%; padding:0; }
  .playbook-phase { break-before:page; padding-bottom:45px; }
  .phase-header h2,.task-title,.subtasks strong,.subtasks em { color:#111; }
  .phase-goal { color:#111; background:#fff; border:1px solid #aaa; box-shadow:none; }
}