/* Bricolage Grotesque — SIL OFL 1.1 (bricolage-grotesque-OFL.txt), Fontsource's Latin subset, served by the site itself.
   The opsz file: weight 200–800 and the optical size, so a heading gets the display cut (its ink traps and its
   character) and body text the text cut, from one file (font-optical-sizing: auto, the browser's default).
   The renderer prepends this file to css/look.css and copies the woff2 files to fonts/,
   so the url() is relative to css/. */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(../fonts/bricolage-grotesque-latin-opsz-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Look: Commons. A volunteer-run community thing with things on: a garden, a club, a hall, a street fair.
   One idea: the flyer on the noticeboard. Leaf green and sunflower yellow printed on plain paper, a friendly
   grotesk set big and tight, labels on a sticker, the sign-up sheet taped up, the dates on tags you can
   scan from across the room, and a sunny giving band that asks like a neighbour, not an appeal.
   No ancestor. Not Heritage (no serif, no cream, no italic: a bright leaf and a yellow, not bottle green and
   old gold) and not Clear Water (no navy, no water): Bricolage Grotesque alone, whose optical sizes give the
   headings their quirks and keep the text plain.
   Tokens first; the rules after them are this look's bounded set: the sticker, the buttons, the leaf
   corners, the tape, the date tags, the giving band, the form card and the one moment. */

:root {
  --bg: #fbf8f0;              /* plain paper */
  --bg-raised: #ffffff;
  --bg-alt: #e9f1de;          /* a pale leaf */
  --bg-line: #c6d3b8;
  --ink: #15281b;
  --ink-dim: #46594a;
  --accent: #ffc93c;          /* sunflower: the action, the giving band */
  --accent-strong: #ffbb1f;
  --accent-ink: #15281b;      /* dark on yellow; white on this yellow would fail AA */
  --accent-text: #1d6b3e;     /* small "accent" text on paper is the leaf, since yellow text would vanish */
  --link-hover: #124a2a;
  --focus: #1d6b3e;           /* a yellow ring on paper would not show */
  --band: #175a33;            /* leaf green: the one strong ground */
  --band-ink: #ffffff;
  --band-dim: #dcefe0;
  --band-accent: #ffda66;
  /* the hero's own pair, as literals so a checker reads the pair the page shows: white on the leaf */
  --hero-ground: #175a33;
  --hero-ink: #ffffff;
  --hero-dim: #dcefe0;
  --hero-accent: #ffda66;
  --hero-scrim: #103d22;
  --proof-bg: #ffc93c;
  --proof-ink: #15281b;
  --proof-mark: #175a33;
  --footer-bg: #15281b;
  --footer-ink: #d3e1d5;
  --sticker: #ffe28a;         /* the label sticker; white where the ground is already yellow */
  --rule-strong: 2px solid var(--ink);
  --photo-filter: saturate(1.06) brightness(1.02);
  /* a flyer's halftone: a dot screen, drawn here so no file is fetched */
  --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='1.3' fill='%23fff' fill-opacity='.09'/%3E%3C/svg%3E");

  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-text: "Bricolage Grotesque", system-ui, sans-serif;
  --font-kicker: var(--font-text);
  --font-button: var(--font-text);
  --display-weight: 780;
  --heading-weight: 740;
  --display-tracking: -0.035em;
  --display-leading: 0.95;
  --kicker-case: none;
  --kicker-tracking: 0;
  --kicker-weight: 700;
  --kicker-size: var(--step--1);
  --button-weight: 700;
  --text-size: 1.125rem;
  --text-leading: 1.55;

  /* leaf corners: two round, two nearly square, on the pictures and the cards */
  --radius: 12px;
  --radius-card: 2rem 0.5rem;
  --radius-btn: 999px;
  --radius-media: 2.5rem 0.5rem;
  --shadow-2: none;
}

/* The sticker: a label stuck on a little crooked, sentence case. */
.kicker, .hero-kicker {
  width: fit-content; padding: 0.3rem 0.85rem; border-radius: 999px; transform: rotate(-2deg);
  background: var(--sticker); color: var(--ink);
}
:is(.band, .hero--split, .hero--typographic, .hero--full-dark) :is(.kicker, .hero-kicker) { color: #15281b; }
.donate--band, .cta--band, .contact-card { --sticker: #ffffff; }
.wordmark { font-weight: 800; letter-spacing: -0.03em; }

/* Buttons: round, sunny, with a pressed edge you want to push. */
.btn-primary, .button, .header-cta { border-color: var(--ink); box-shadow: inset 0 -3px 0 rgb(21 40 27 / 0.3); }
.btn-secondary { border-width: 2px; border-color: currentColor; }

/* Hero: the photo pinned on the leaf with its corners; on paper the card is a flyer, taped up. */
.hero--split .hero-media { margin: 0 var(--page-pad) var(--page-pad); border-radius: var(--radius-media); }
@media (min-width: 56em) { .hero--split .hero-media { margin: var(--space-2) var(--page-pad) var(--space-2) 0; } }
.hero--band-card .hero-copy, .form-card { border: 2px solid var(--ink); }
.hero--band-card .hero-copy::before, .form-card::before {
  content: ""; position: absolute; top: -0.85rem; left: 1.75rem; width: 6.5rem; height: 1.6rem;
  background: rgb(255 213 82 / 0.82); transform: rotate(-4deg);
}
.hero--typographic .hero-heading { max-width: 13ch; }
/* A page of its own (donate, photos) opens on the leaf too, so it isn't a white sheet. */
.page-head {
  padding-bottom: var(--space-4); background: var(--band) var(--texture); color: var(--band-ink);
  --ink-dim: var(--band-dim); --accent-text: var(--band-accent);
}

/* Proof: a sunny strip, its marks leaf green. */
.proof--strip .proof-list { font-weight: 700; }

/* What's on: each date on a tag, so the week reads from across the room. */
.events--ruled .event-when {
  width: fit-content; padding: 0.2rem 0.75rem; border-radius: 999px;
  background: var(--bg-alt); color: var(--ink); font-weight: 700;
}
.events--ruled.alt .event-when { background: var(--bg-raised); }
.event-list h3 { font-weight: 760; }

/* The giving band and the call band: sunny, with the flyer's dot screen. */
:is(.donate--band, .cta--band) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='1.3' fill='%2315281b' fill-opacity='.1'/%3E%3C/svg%3E"); }
.donate--band h2 { font-size: var(--step-5); }

/* Forms: the sign-up sheet, inputs with soft corners and a firm edge. */
.site-form input:not([type=radio]):not([type=checkbox]), .site-form textarea { border-width: 2px; }
.services--blocks .service-list li, .shop--shelf .catalog-item { border-radius: var(--radius-card); }

/* The one moment: as the fonts arrive, the sun comes out on the hero photo, from an overcast grade to its
   own. It is a whole picture the whole time. */
@media (prefers-reduced-motion: no-preference) {
  html.motion .hero-block .hero-media img { filter: brightness(0.9) saturate(0.78); transition: filter var(--dur-moment) var(--ease); }
  html.motion body.is-ready .hero-block .hero-media img { filter: var(--photo-filter); }
}