/* donate.imatx.org — additions on top of the shared IMATX site.css.
   site.css is a verbatim copy from imatx-www; keep campaign-only rules HERE
   so the copy can be refreshed without losing anything. */

.page-head .pill{margin:0 0 6px}
.page-head h1{margin-top:6px}

/* Campaign fact strip reads as dates, not big numbers */
.facts dd{font-size:1.15rem;line-height:1.3}

/* QR inside a give-box column — kept for the printed sheet; the web page has no QR */
.give-box .qr{display:block;margin:12px 0 4px;width:180px;height:180px;background:#fff;border:1px solid var(--rule);border-radius:8px;padding:8px}
@media(prefers-color-scheme:dark){.give-box .qr{background:#fff}}

/* Gold marks the thing to act on: the open fund on the index, and Zelle on a fund page.
   The two never share a page. Existing tokens only; both flip for dark mode on their own. */
.give-box .give-zelle{background:var(--gold-soft);border-color:var(--gold)}
.give-box .give-zelle code{background:var(--card)}

/* Open fund card on the index — tinted instead of illustrated. Closed funds stay plain
   so the one you can still give to is the one that stands out. */
.card.card-open{background:var(--gold-soft);border-color:var(--gold)}

/* Campaign cards on the index */
.card h3 a{text-decoration:none;color:var(--ink)}
.card h3 a:hover{text-decoration:underline;color:var(--teal)}

/* Update log: date + text, no third column */
#updates .row{grid-template-columns:150px minmax(0,1fr)}
@media(max-width:640px){#updates .row{grid-template-columns:minmax(0,1fr)}}
#updates .row time{font-weight:500}

/* The share banner at the bottom of an open campaign */
.banner a{font-weight:500}

/* Coordinated artwork, kept separate from the shared site stylesheet. */
.illustrated-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:center;padding-top:12px;padding-bottom:28px}
.head-copy{min-width:0}
.head-art{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:10px}
.campaign-head{grid-template-columns:minmax(0,1fr) minmax(0,300px)}
@media(max-width:640px){
  .illustrated-head{grid-template-columns:1fr;gap:20px;padding-top:4px;padding-bottom:22px}
  .campaign-head .head-art{width:240px;max-width:100%;justify-self:start}
}
@media print{
  .head-art{display:none}
  .illustrated-head{display:block}
}