/* SKIN: community (learning centers, nonprofits, churches, clubs, youth programs)
   Feel: warm, human, welcoming. Rounded, colorful accents, approachable type. */
:root{
  --paper:#fffdf9; --ink:#2b2622; --muted:#5f574f;
  --radius:16px;
  --shadow:0 5px 18px rgba(43,38,34,.10);
  --tile-border:2px solid #f0e6d8;
  --header-line:2px solid #f0e6d8;
  --section-bg-alt:#fdf4e6;
  --accent-text:var(--dark);
  --hero-overlay:linear-gradient(180deg,rgba(30,24,18,.58),rgba(30,24,18,.3) 50%,rgba(30,24,18,.62));
}
h1,h2{letter-spacing:0}
/* Soft, borderless-feeling buttons (the-meeting-house, 2026-09-09): base.css
   gives every .btn a 2px SOLID DARK border by default — reads formal/heavy,
   not the light, welcoming feel this vertical wants. Metrics (padding/radius)
   stay untouched so nothing reflows; every variant is restated AFTER .btn,
   same as the laundry skin, because a skin loads after base.css and
   restyling .btn alone leaves .btn-accent/.btn-primary rendering the OLD
   dark-border look at equal specificity (the CSS ordering trap this
   factory's CLAUDE.md documents). The plain .btn keeps a soft warm-cream
   border (matching --tile-border's color) rather than going fully
   transparent, so it stays visible against the paper background instead of
   disappearing.
   UPDATE 2026-09-11 (fleet fix, see CLAUDE.md Log): box-shadow removed here
   too. This skin had already softened base.css's shadow (was --shadow's
   lower-opacity 0 5px 18px rgba(43,38,34,.10) here, not base.css's default)
   rather than dropped it, so it silently reintroduced a shadow on top of the
   fleet-wide flat-button change — the whole point of fixing base.css is
   undone if a skin loaded after it restores one. --shadow itself is
   untouched (still used by .tile/.lead-panel/etc. in this skin). */
.btn{border-radius:14px;border-width:2px;border-color:#f0e6d8}
.btn-accent{border-color:transparent}
.btn-primary{border-color:transparent}
.tile{border-bottom:5px solid var(--accent)}
.tile:nth-child(even){border-bottom-color:var(--primary)}
.eyebrow{letter-spacing:.12em}

/* Per-site spacing pass (operator feedback, 2026-09-16): base.css's global
   reset (*{margin:0}) leaves NO gap between stacked .sub paragraphs or a
   paragraph and a following button/cta-row outside .hero — every other
   fleet page mostly avoids stacking more than one .sub per block, but this
   site's content does it a lot (About/Programs "how it's funded" sections),
   which read as squished. Scoped to THIS site's skin, not base.css. */
.sub + .sub{margin-top:1rem}
.sub + .btn,.sub + .cta-row{margin-top:1.5rem}
.cta-row{margin-top:1.6rem}

/* No public address/office and no hours_note the operator wants shown
   (2026-09-16: "take this all out") — hides the whole Hours footer column
   rather than leave an empty heading or fall back to a misleading
   Mon-Sun/Closed grid. .foot-grid is auto-fit, so removing one child
   reflows the remaining columns cleanly (verified against base.css). */
.foot-grid > div:nth-child(2){display:none}

/* /events/ — two events side by side so neither is missable without
   scrolling (operator request, 2026-09-18). Plain 2-col grid, collapses to
   1 col on phones same breakpoint as .grid3. Cards use .tile for its
   existing border/shadow/radius, with the padding moved onto .tile-body
   (text-only cards now, on /events/ and /gallery/); min-width:0 defensively, same reason
   as the .split fix in base.css (a grid item can be forced wide by a
   child's intrinsic size). */
.events-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:1.8rem}
.events-grid>.tile{padding:0;overflow:hidden;min-width:0}
.events-grid .tile-body{padding:1.6rem 1.5rem}
@media (max-width:760px){.events-grid{grid-template-columns:1fr}}

/* /donate/ — One-Time / Monthly toggle (operator request, 2026-09-18,
   modeled on donate.ussfcufoundation.org). Pill switcher + two panels,
   each holding one of the operator's GHL donation form embeds. */
.give-toggle{display:inline-flex;background:#fff;border:var(--tile-border);
  border-radius:999px;padding:4px;gap:4px;margin:0 auto 2rem}
.give-tab{border:none;background:transparent;padding:.75rem 1.5rem;
  border-radius:999px;font-family:var(--display);font-weight:700;
  font-size:.95rem;cursor:pointer;color:var(--ink)}
.give-tab.is-active{background:var(--dark);color:#fff}

/* /gallery/ — one archery block: two 16:9 photos stacked on the left, the
   3:4 close-up on the right. Column ratio 1.156:1 makes both sides the same
   height (2 x 9/16 x w1 + gap = 4/3 x w2), so nothing is cropped or padded.
   Collapses to one column on phones. */
.archery-grid{display:grid;grid-template-columns:1.156fr 1fr;gap:16px;align-items:start}
.archery-grid .stack{display:grid;gap:16px;min-width:0}
.archery-grid img{width:100%;height:auto;border-radius:12px;min-width:0}
@media (max-width:760px){.archery-grid{grid-template-columns:1fr}}

/* /gallery/ photo rows. Column widths (--cols) are set per row from the
   photos' own aspect ratios (width proportional to ratio => equal heights),
   so nothing is cropped or padded. .gal img is the grid item itself, hence
   min-width:0. On phones every row drops to two columns, or one if the row is
   marked .stack-sm. */
.gal{display:grid;gap:16px;grid-template-columns:var(--cols,1fr 1fr);align-items:start}
.gal img{width:100%;height:auto;border-radius:12px;min-width:0}
@media (max-width:760px){
  .gal{grid-template-columns:repeat(2,1fr)}
  .gal.stack-sm{grid-template-columns:1fr}
}

/* /gallery/ photo + caption pairs (figure is the grid item, so it needs min-width:0). */
.gal-fig{margin:0;min-width:0}
.gal-fig figcaption{margin-top:.8rem;font-size:.95rem;line-height:1.55;color:var(--muted)}