/* Homepage illustration and independent, readable donation controls. */
.hero { background:#f8f5ed; }
.hero .hero-grid { grid-template-columns:minmax(0,.86fr) minmax(0,1.3fr); gap:20px!important; }
.hero .hero-cover { position:relative; overflow:visible; border:0; border-radius:0; background:transparent; box-shadow:none; }
.hero .hero-cover .hero-art { display:block; width:100%!important; height:auto!important; max-height:none!important; object-fit:contain!important; border:0; border-radius:0; mask-image:linear-gradient(to right,transparent,#000 12%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 7%,#000 90%,transparent); mask-composite:intersect; }
.hero .hero-donation { position:absolute; right:3.8%; top:6%; width:24%; min-width:138px; display:grid; gap:8px; }
.hero .hero-qr-link { display:block; padding:9px; background:#50616c; border:3px solid #64747d; border-radius:0; box-shadow:inset 0 0 0 2px #34444e; }
.hero .hero-cover .hero-qr { display:block; width:100%!important; height:auto!important; max-height:none!important; aspect-ratio:1; background:#fff; border:0; padding:4px; box-sizing:border-box; }
.hero .hero-cover .hero-help { display:flex; justify-content:center; align-items:center; min-height:44px; padding:8px 12px; border:2px solid #d9b348; border-radius:15px; background:#b50922; color:#fff; font-weight:800; font-size:18px; text-decoration:none; }
.hero-help:hover { filter:brightness(.9); }
.hero-help:focus-visible,.hero-qr-link:focus-visible { outline:3px solid #b8870b; outline-offset:4px; }
.hero-cover[hidden] { display:none!important; }
.hero-cover.no-art .hero-donation { position:static; width:183px; margin:0 auto; }
.hero-cover.custom-art .hero-donation { position:static; width:183px; margin:12px 0 0 auto; }
.hero-cover.custom-art .hero-art { mask-image:none; }
@media(max-width:1000px) {
 .hero .hero-grid { grid-template-columns:1fr; }
 .hero .hero-cover { width:100%; max-width:800px; margin:auto; }
}
@media(max-width:540px) {
 .hero .hero-donation { position:static; width:183px; margin:8px auto 0; }
 .hero .hero-cover .hero-art { mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent); }
}

/* Keep the heading readable and align the artwork with the first screen. */
@media(min-width:1001px) {
 .hero .hero-grid { grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); align-items:start!important; gap:24px!important; }
 .hero h1 { font-size:clamp(30px,2.9vw,42px)!important; line-height:1.14!important; }
 .hero .hero-cover { margin-top:28px; }
 .hero .lead { font-size:16px!important; line-height:1.48!important; }
}

/* QR without decorative frame; keep it clear of the people. */
.hero .hero-qr-link {
 padding:0;
 border:0;
 background:transparent;
 box-shadow:none;
}
@media(min-width:541px) {
 .hero .hero-donation { right:-1%; top:2%; }
}

/* Larger artwork and a donation button matching the site's gold palette. */
.hero .hero-cover .hero-help {
 background:var(--brand,#b8870b);
 border-color:var(--brand,#b8870b);
 border-radius:999px;
 color:#fff;
 font-family:inherit;
}
@media(min-width:1001px) {
 .hero .container.hero-grid {
  width:calc(100% - 40px);
  max-width:1600px;
  grid-template-columns:minmax(0,2fr) minmax(0,3fr);
  gap:16px!important;
 }
 .hero h1 { font-size:clamp(30px,2.5vw,38px)!important; }
 .hero .hero-cover { margin-top:6px; }
 .hero .hero-donation { right:0; top:6%; width:21%; min-width:138px; }
}
@media(min-width:541px) and (max-width:1000px) {
 .hero .hero-donation { right:0; top:6%; width:21%; }
}

/* Balanced wider illustration, safe text gutters, fine gold QR outline. */
.hero .container.hero-grid {
 box-sizing:border-box;
 width:calc(100% - 48px)!important;
 max-width:1600px!important;
 margin-left:auto!important;
 margin-right:auto!important;
 padding:0!important;
 position:relative;
 left:auto;
 right:auto;
 transform:none;
}
.hero .hero-grid > div:first-child { min-width:0; position:relative; z-index:1; }
.hero .hero-qr-link {
 border:1px solid #c6a351;
 padding:5px;
 background:#fff;
 border-radius:4px;
 box-shadow:none;
}
@media(min-width:1001px) {
 .hero .container.hero-grid { grid-template-columns:minmax(0,36fr) minmax(0,64fr); gap:14px!important; }
 .hero .hero-cover { margin-top:4px; }
 .hero .hero-donation { right:0; top:2%; width:19%; min-width:138px; }
}
@media(max-width:540px) {
 .hero .container.hero-grid { width:calc(100% - 32px)!important; }
}

/* A quiet caption, not a second donation button. */
.hero .hero-qr-caption {
 margin:0;
 padding:5px 3px;
 color:#10251f;
 font-family:inherit;
 font-size:14px;
 font-weight:600;
 line-height:1.35;
 text-align:center;
 background:transparent;
 border:0;
 box-shadow:none;
}