/* Public site components. Tokens live in base.css; no hex colours here. */

/* The thin strip above the header: which side of Hagg's Life you are on, and the way across. */
.org-strip { background: var(--color-text); color: var(--color-bg); font-size: var(--text-sm); }
.org-strip__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--space-4);
}
.org-strip__mark { font-family: var(--font-heading); font-weight: 600; letter-spacing: 0.01em; }
.org-strip__links { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
.org-strip__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  color: inherit;
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
.org-strip__link:hover { text-decoration: underline; }
.org-strip__link--here { border-bottom-color: var(--color-accent); }
.org-strip :focus-visible { outline-color: var(--color-focus-on-dark); }

.site-header { background: var(--color-brand); color: var(--color-on-brand); }
.site-header__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-3) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.site-nav { display: contents; }
.site-nav .nav-list { flex-basis: 100%; }
@media (min-width: 768px) {
  .site-nav .nav-list { flex-basis: auto; }
}

/* Short pages keep the footer at the bottom of the window. */
body { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1 0 auto; padding: 0 0 var(--space-8); }
.site-main > .container, .site-main > section > .container { padding-top: var(--space-6); }
.site-main > .prose, .site-main > .container.prose { padding-top: var(--space-7); }

/* Hero: the page opens on one big line. Photos take this place when they arrive. */
.hero { background: var(--color-band); border-bottom: 6px solid var(--color-accent); }
.hero .container { padding-top: var(--space-7); padding-bottom: var(--space-7); }
.hero__title { max-width: 22ch; margin-bottom: var(--space-3); }
.hero__lead { font-size: var(--text-lg); color: var(--color-muted); max-width: var(--measure); margin: 0; }
.hero--landing .hero__title { font-size: var(--text-3xl); max-width: 20ch; }

.intro .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* The landing's two cards: each side of Hagg's Life wears its own colour. */
.two-cards { display: grid; gap: var(--space-5); }
@media (min-width: 768px) {
  .two-cards { grid-template-columns: 1fr 1fr; }
}
.card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.card__band { height: 7rem; background: var(--card-accent); }
.card--outdoors { --card-accent: var(--accent-outdoors); --card-accent-hover: var(--accent-outdoors-hover); }
.card--foundation { --card-accent: var(--accent-foundation); --card-accent-hover: var(--accent-foundation-hover); }
.card__body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; }
.card__title { margin-bottom: var(--space-2); }
.card__tagline { font-family: var(--font-heading); font-style: italic; color: var(--color-muted); margin-bottom: var(--space-3); }
.card__blurb { flex: 1; }
.card .button--primary { background: var(--card-accent); align-self: flex-start; }
.card .button--primary:hover { background: var(--card-accent-hover); }

/* Contact details: only the lines someone has filled in. */
.contact-details__address, .contact-details__hours { white-space: pre-line; }
.contact-details__links { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.contact-details__links a { display: inline-flex; align-items: center; min-height: var(--tap-target); }
.landing-contact__grid { display: grid; gap: var(--space-5); }
@media (min-width: 768px) {
  .landing-contact__grid { grid-template-columns: 1fr 1fr; }
}
.contact-block { background: var(--color-band); margin-top: var(--space-7); }
.contact-block .container { padding-bottom: var(--space-6); }

/* The About pages */
.mission-vision { display: grid; gap: var(--space-5); }
@media (min-width: 768px) {
  .mission-vision { grid-template-columns: 1fr 1fr; }
  .mission-vision > p { grid-column: 1 / -1; }
}
.team { background: var(--color-surface); margin-top: var(--space-7); border-top: var(--border-width) solid var(--color-border); border-bottom: var(--border-width) solid var(--color-border); }
.team .container { padding-bottom: var(--space-6); }
.team-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-5); }
@media (min-width: 600px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .team-grid { grid-template-columns: repeat(3, 1fr); }
}
.person__photo {
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: var(--space-3);
}
.person__photo--none {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-band);
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 600;
}
.person__name { margin-bottom: var(--space-1); }
.person__role { color: var(--color-muted); margin-bottom: var(--space-2); }
.person__bio { margin: 0; }

.tiles { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
@media (min-width: 600px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
}
.tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-height: var(--tap-target);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-left: 6px solid var(--color-accent);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
}
.tile strong { font-family: var(--font-heading); font-size: var(--text-lg); }
.tile span { color: var(--color-muted); font-size: var(--text-sm); }
.tile:hover strong { text-decoration: underline; }

/* Contact page: details, then the form */
.contact-page { display: grid; gap: var(--space-6); }
@media (min-width: 900px) {
  .contact-page { grid-template-columns: 1fr 1.4fr; gap: var(--space-8); }
}
.contact-form h2 { font-size: var(--text-xl); }
.contact-form select {
  display: block;
  width: 100%;
  min-height: var(--tap-target);
  padding: var(--space-2) var(--space-3);
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.optional { font-weight: 400; color: var(--color-muted); }
/* The honeypot: off the screen for people, in the form for bots. */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Footer */
.site-footer {
  background: var(--color-brand);
  color: var(--color-on-brand);
  padding: var(--space-7) 0 var(--space-6);
  font-size: var(--text-sm);
}
.site-footer a { color: var(--color-on-brand); }
.footer-grid { display: grid; gap: var(--space-5); margin-bottom: var(--space-6); }
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 1fr auto; }
}
.footer-name { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 600; margin-bottom: var(--space-2); }
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}
@media (min-width: 768px) {
  .footer-links { flex-direction: column; gap: var(--space-1); }
}
.footer-links a { display: inline-flex; align-items: center; min-height: var(--tap-target); }
.site-footer .legal { max-width: var(--measure); margin-bottom: var(--space-2); }
.site-footer .legal--charity { font-size: var(--text-base); }

/* Edit-in-place: a signed-in admin sees a link to the screen that edits what they are reading. */
.edit-link { font-size: var(--text-sm); }

/* Feature sections. Each feature adds its public rules inside its own section and
   nowhere else, so two features built at the same time never touch the same lines. */

/* ===== animals ===== */
/* Adopt and Lifers: photo-led cards. On a phone the photo sits beside the words
   so each animal is one glance; from 600px the photo goes on top and the cards grid. */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.back { margin: 0 0 var(--space-3); font-size: var(--text-sm); }
.hero--animals .hero__lead { font-size: var(--text-base); }
.adopt-intro p { margin-bottom: var(--space-3); }
.adopt-intro p:last-child { margin-bottom: 0; }
.lifers-count { margin: var(--space-4) 0 0; font-family: var(--font-heading); font-size: var(--text-xl); }

/* Status pills: text always present, never colour alone (specs/frontend-design.md). */
.pill {
  display: inline-block;
  padding: 0 var(--space-3);
  border-radius: 999px;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.7;
}
.pill--new { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.pill--pending { border-color: var(--color-focus); color: var(--color-text); }
.pill--hold { border-style: dashed; color: var(--color-muted); }
.pill--adopted, .pill--remembered { background: var(--color-band); border-color: var(--color-band); color: var(--color-muted); }

.species-filter ul { list-style: none; padding: 0; margin: 0 0 var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.species-filter a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  padding: var(--space-1) var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text);
  text-decoration: none;
}
.species-filter a[aria-current="page"] { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-on-brand); }

.animal-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
.animal-card {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.animal-card__photo-link { position: relative; display: block; }
.animal-card__photo { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; background: var(--color-band); }
.animal-card__photo--none {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 600;
}
.animal-card .pill { position: absolute; top: var(--space-2); left: var(--space-2); }
.animal-card__body { padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.animal-card__name { margin: 0; font-size: var(--text-xl); }
.animal-card__name a { color: inherit; text-decoration: none; }
.animal-card__name a:hover { text-decoration: underline; }
.animal-card__facts { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }
.animal-card__line { margin: 0; font-size: var(--text-sm); }
.animal-card__cost { margin: 0; font-weight: 700; }
.animal-card .button { margin-top: auto; align-self: flex-start; font-size: var(--text-sm); padding-left: var(--space-4); padding-right: var(--space-4); }
.animal-card--remembered .animal-card__photo { filter: grayscale(1); opacity: 0.85; }
@media (min-width: 600px) {
  .animal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
  .animal-card { grid-template-columns: minmax(0, 1fr); }
  .animal-card__body { padding: var(--space-4) var(--space-5) var(--space-5); gap: var(--space-2); }
  .animal-card .pill { top: var(--space-3); left: var(--space-3); }
}
@media (min-width: 960px) {
  .animal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .animal-grid--remembered { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.animals-empty { padding: var(--space-5) 0; }
.animals-empty h3 { font-size: var(--text-2xl); }
.animals-empty .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.adopt-how { background: var(--color-band); margin-top: var(--space-7); }
.adopt-how .container { padding-bottom: var(--space-6); }
.adopt-steps { max-width: var(--measure); padding-left: var(--space-5); display: grid; gap: var(--space-2); }
.adopt-steps li::marker { font-family: var(--font-heading); font-weight: 600; color: var(--color-accent); }
.adopt-fee { max-width: var(--measure); color: var(--color-muted); }

.remembered { background: var(--color-surface); margin-top: var(--space-7); border-top: var(--border-width) solid var(--color-border); }
.remembered .container { padding-bottom: var(--space-6); }
.remembered p { max-width: var(--measure); }

/* One animal: photos beside the facts on a desktop, stacked on a phone. */
.animal-page__top { display: grid; gap: var(--space-5); margin-bottom: var(--space-6); }
@media (min-width: 900px) {
  .animal-page__top { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-7); align-items: start; }
}
.animal-page h1 { margin-bottom: var(--space-3); }
.animal-gallery__main { display: block; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-band); }
.animal-gallery__main img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.animal-gallery__strip { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.animal-gallery__strip a { display: block; border-radius: var(--radius-md); overflow: hidden; }
.animal-gallery__strip img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.animal-gallery--none {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  background: var(--color-band);
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: 6rem;
  font-weight: 600;
}
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-4); }
.facts dt { font-weight: 700; }
.facts dd { margin: 0; }
.facts__note { display: block; color: var(--color-muted); font-size: var(--text-sm); }
.in-memory { font-family: var(--font-heading); font-style: italic; font-size: var(--text-lg); color: var(--color-muted); }
.animal-page--remembered .animal-gallery img { filter: grayscale(1); }
.animal-page__story { margin-bottom: var(--space-6); }
.animal-page__story > * { max-width: var(--measure); }
.apply-form, .lifer-care {
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
}
.apply-form h2 { font-size: var(--text-xl); }
.apply-form select {
  display: block;
  width: 100%;
  min-height: var(--tap-target);
  padding: var(--space-2) var(--space-3);
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.lifer-care { max-width: 40rem; }
.lifer-care h2 { font-size: var(--text-xl); }
.lifer-care h3 { font-size: var(--text-lg); }
.lifer-care__cost { font-size: var(--text-lg); }
.covers { padding-left: var(--space-5); }

/* ===== payments ===== */

/* ===== donate ===== */
/* Donate (templates/public/donate/). The one loud thing is the amount
   chooser: a panel beside the headline with the amounts set big in the
   heading face. Everything after it is quiet. The form is radios and labels,
   so it works without JavaScript; donate.js only keeps the button's words in step. */
.hero--donate .container { padding-top: var(--space-5); padding-bottom: var(--space-6); }
.donate-top { display: grid; gap: var(--space-5); }
@media (min-width: 900px) {
  .donate-top { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); gap: var(--space-8); align-items: start; }
  .hero--donate .container { padding-top: var(--space-7); padding-bottom: var(--space-7); }
}
.hero--donate .hero__title { font-size: var(--text-2xl); max-width: 24ch; margin-bottom: var(--space-2); }
.hero--donate .hero__lead { font-size: var(--text-base); }
@media (min-width: 768px) {
  .hero--donate .hero__title { font-size: var(--text-3xl); margin-bottom: var(--space-3); }
  .hero--donate .hero__lead { font-size: var(--text-lg); }
}
.donate-intro p { margin: 0 0 var(--space-3); }
.donate-intro p:last-child { margin: 0; }
.donate-edit-links { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: var(--space-4) 0 0; }

.give {
  padding: var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-top: 6px solid var(--color-accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.give__heading { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.give fieldset { border: 0; padding: 0; margin: 0 0 var(--space-3); min-width: 0; }
.give .form-error { margin-bottom: var(--space-3); }

/* Amounts: three across, "Other" takes the last two cells with its own box. */
.give__amounts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.amount-choice { position: relative; }
.amount-choice input[type="radio"], .toggle input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.amount-choice label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: var(--space-2);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  text-align: center;
  cursor: pointer;
}
.amount-choice__amount { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-xl); line-height: 1; }
.amount-choice__name { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-1); line-height: 1.2; }
.amount-choice input:checked + label { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-on-accent); }
.amount-choice input:checked + label .amount-choice__name { color: inherit; }
.amount-choice input:focus-visible + label, .toggle input:focus-visible + label { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.amount-choice--other { grid-column: span 2; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2); }
.amount-choice__other-label { padding-left: var(--space-3); padding-right: var(--space-3); font-weight: 700; }
.amount-choice__other {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 52px;
  padding: 0 var(--space-3);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
}
.amount-choice__other:focus-within { border-color: var(--color-accent); }
.amount-choice__other input { width: 100%; min-width: 0; border: 0; padding: 0; background: transparent; font: inherit; color: inherit; }
.amount-choice__other input:focus { outline: none; }
.amount-choice__other input::placeholder { color: var(--color-muted); opacity: 0.6; }

/* One-time | Monthly: a two-cell switch. */
.toggle {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border: 2px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg);
}
.toggle label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border-radius: 999px;
  font-weight: 700;
  color: var(--color-muted);
  cursor: pointer;
}
.toggle input:checked + label { background: var(--color-text); color: var(--color-bg); }

.give .field { margin-bottom: var(--space-3); }
.give .field label { font-weight: 700; }
.give__designate select {
  display: block;
  width: 100%;
  min-height: var(--tap-target);
  padding: var(--space-2) var(--space-3);
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.give__button { min-height: 52px; font-size: var(--text-lg); }
.give__payee { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--color-muted); }
.give__address { white-space: pre-line; margin: 0 0 var(--space-3); font-weight: 700; }
.give--check p { margin-bottom: var(--space-3); }

/* The quiet half of the page: what each amount does, the Grove, companies, other ways, checks. */
.donate-section { padding-top: var(--space-7); }
.donate-section h2 { margin-bottom: var(--space-3); }
.donate-section__text { max-width: var(--measure); }
.tier-lines { list-style: none; padding: 0; margin: 0; max-width: var(--measure); }
.tier-line {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-3) 0;
  border-bottom: var(--border-width) solid var(--color-border);
}
.tier-line__amount { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-xl); color: var(--color-accent); text-decoration: none; }
a.tier-line__amount:hover { text-decoration: underline; }
.donate-band { background: var(--color-band); margin-top: var(--space-7); }
.donate-band .container { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.donate-band h2 { margin-bottom: var(--space-3); }
.donate-band__text { max-width: var(--measure); }
.donate-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; }
.ways { list-style: none; padding: 0; margin: 0; max-width: var(--measure); }
.ways__item { padding: var(--space-2) 0; border-bottom: var(--border-width) solid var(--color-border); }
.ways__item strong { font-family: var(--font-heading); font-size: var(--text-lg); }
.ways__item span { display: block; color: var(--color-muted); }
@media (min-width: 768px) { .ways__item span { display: inline; } }

/* Thank you (templates/public/donate/thanks.html). */
.donate-thanks__receipt { padding: var(--space-3) var(--space-4); background: var(--color-notice-bg); border-radius: var(--radius-md); }
.donate-thanks__share { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-6); overflow-wrap: anywhere; }

/* ===== grove ===== */

/* Hagg's Grove at Captain's Cove (templates/public/grove/index.html): a handout
   for a funder or a township meeting. The one loud thing is the photo at the top;
   the rest is quiet, readable text in a single measure. */
.grove-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 70vh;
  background: var(--color-brand);
  color: var(--color-on-brand);
  overflow: hidden;
}
.grove-hero--plain { min-height: 0; border-bottom: 6px solid var(--color-accent); }
.grove-hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.grove-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(0 0 0 / 0.15), rgb(0 0 0 / 0.72) 70%);
}
.grove-hero__inner { position: relative; padding-top: var(--space-7); padding-bottom: var(--space-6); }
.grove-hero__title { max-width: 16ch; margin-bottom: var(--space-3); }
.grove-hero__subtitle { font-size: var(--text-lg); max-width: var(--measure); margin: 0 0 var(--space-4); }
.grove-facts { list-style: none; padding: 0; margin: 0 0 var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: var(--text-sm); }
.grove-facts li { display: flex; align-items: center; gap: var(--space-4); }
.grove-facts li + li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--color-accent); flex: none; }
.grove-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0 0 var(--space-3); }
.grove-hero .button--secondary { color: var(--color-on-brand); }
.grove-hero :focus-visible { outline-color: var(--color-focus-on-dark); }
.grove-hero .grove-edit-link { color: var(--color-on-brand); }
.grove-hero--plain .grove-hero__title { max-width: 22ch; }
@media (min-width: 768px) {
  .grove-hero { min-height: 32rem; }
  .grove-hero__title { font-size: var(--text-3xl); }
}

/* Where things stand: the status line, the two amounts and a bar, dated. Hidden until filled. */
.grove-progress { padding-top: var(--space-6); }
.grove-progress__box {
  max-width: 40rem;
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-left: 6px solid var(--color-accent);
  border-radius: var(--radius-md);
}
.grove-progress__status { font-family: var(--font-heading); font-size: var(--text-xl); margin: 0 0 var(--space-2); }
.grove-progress__amounts { margin: 0 0 var(--space-2); }
.grove-progress__amounts strong { font-family: var(--font-heading); font-size: var(--text-2xl); }
.grove-progress__bar { display: block; width: 100%; height: 0.75rem; margin: 0 0 var(--space-2); accent-color: var(--color-accent); }
.grove-progress__updated { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }

.grove-section { padding-top: var(--space-7); }
.grove-prose > * { max-width: var(--measure); }
.grove-prose ul { list-style: disc; padding-left: var(--space-5); }
.grove-prose li { margin-bottom: var(--space-2); }

/* The six planned parts: a photo beside the words from 768px, stacked on a phone. */
.grove-plan { background: var(--color-band); margin-top: var(--space-7); padding: var(--space-7) 0 var(--space-6); }
.plan { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-6); }
.plan__part { display: grid; gap: var(--space-4); padding-top: var(--space-5); border-top: var(--border-width) solid var(--color-border); }
.plan__photo { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-lg); background: var(--color-surface); }
.plan__title { margin-bottom: var(--space-3); }
@media (min-width: 768px) {
  .plan__part { grid-template-columns: 22.5rem minmax(0, 1fr); gap: var(--space-6); align-items: start; }
  .plan__part:nth-child(even) .plan__photo { order: 2; }
}

.grove-benefits { max-width: var(--measure); padding-left: var(--space-5); display: grid; gap: var(--space-2); }
.grove-benefits li::marker { color: var(--color-accent); }

/* The timeline is a real sequence: the date set in the heading face on an accent rule. */
.timeline { list-style: none; padding: 0; margin: 0; max-width: var(--measure); border-left: 4px solid var(--color-accent); }
.timeline__step { padding: 0 0 var(--space-4) var(--space-5); }
.timeline__when { margin: 0 0 var(--space-1); font-family: var(--font-heading); font-weight: 600; font-size: var(--text-lg); }
.timeline__what { margin: 0; }
.grove-financials { max-width: var(--measure); margin-top: var(--space-5); padding: var(--space-4) var(--space-5); background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); }
.grove-financials h3 { font-size: var(--text-lg); }

.grove-funding { background: var(--color-surface); margin-top: var(--space-7); padding: var(--space-7) 0 var(--space-6); border-top: var(--border-width) solid var(--color-border); border-bottom: var(--border-width) solid var(--color-border); }
.grove-funding .grove-cta { margin-top: var(--space-5); }
.grove-pdf { display: inline-flex; align-items: center; min-height: var(--tap-target); }

.grove-closing .grove-honest { max-width: var(--measure); margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--border-width) solid var(--color-border); color: var(--color-muted); font-size: var(--text-sm); }
.grove-print-only { display: none; }

/* The Foundation home (templates/public/foundation_home.html): two previews and the Grove call. */
.home-preview { padding-top: var(--space-7); }
.home-preview__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.home-preview__more { display: inline-flex; align-items: center; min-height: var(--tap-target); }
.home-preview__empty { max-width: var(--measure); }
.home-preview__meet { margin-top: auto; align-self: flex-start; font-weight: 700; }
.grove-call { background: var(--color-brand); color: var(--color-on-brand); margin-top: var(--space-7); padding: var(--space-7) 0 var(--space-6); }
.grove-call__inner { display: grid; gap: var(--space-5); }
.grove-call__photo { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-lg); }
.grove-call__words .lead { max-width: var(--measure); }
.grove-call :focus-visible { outline-color: var(--color-focus-on-dark); }
@media (min-width: 768px) {
  .grove-call__inner { grid-template-columns: 22.5rem minmax(0, 1fr); gap: var(--space-7); align-items: center; }
}

/* On paper the Grove page is a handout: no bands, no photos behind text, the two
   ways to help written out as addresses, black on white. */
@media print {
  .grove-hero, .grove-hero--plain, .grove-plan, .grove-funding, .grove-progress__box, .grove-financials { background: white; color: black; border-color: black; }
  .grove-hero { min-height: 0; display: block; }
  .grove-hero__photo, .grove-hero__scrim, .grove-cta, .grove-edit-link, .plan__photo, .home-preview__more { display: none; }
  .grove-hero__inner, .grove-section, .grove-plan, .grove-funding { padding-top: var(--space-4); }
  .grove-hero__title, .grove-hero__subtitle, .grove-facts, .grove-progress__updated, .grove-honest, .timeline__when { color: black; }
  .grove-facts li + li::before { background: black; }
  .timeline, .grove-progress__box, .plan__part { border-color: black; }
  .plan__part, .timeline__step, .grove-progress__box { break-inside: avoid; }
  .plan__part { grid-template-columns: minmax(0, 1fr); }
  .grove-print-only { display: block; font-weight: 700; }
}

/* ===== sponsors ===== */

/* The Sponsorships page (templates/public/sponsors/), the logo tiles and the
   strip other pages include (templates/public/_sponsor_strip.html). The one
   loud thing on the page is the ladder of amounts; everything else is quiet. */
.hero--sponsors .hero__lead p { margin: 0 0 var(--space-3); }
.sponsor-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-5) 0 0; }
.sponsor-edit-links { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: var(--space-4) 0 0; }
.sponsor-section { padding-top: var(--space-7); }
.sponsor-section h2 { margin-bottom: var(--space-4); }

/* What sponsorship supports: a plain list on one accent rule, the title bold. */
.supports {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: var(--measure);
  border-left: 4px solid var(--color-accent);
}
.supports__item { padding: var(--space-2) 0 var(--space-2) var(--space-5); }
.supports__item + .supports__item { border-top: var(--border-width) solid var(--color-border); }
.supports__item strong { font-family: var(--font-heading); font-size: var(--text-lg); }
.supports__item span { display: block; color: var(--color-muted); }
@media (min-width: 768px) {
  .supports__item span { display: inline; }
}

/* Levels: a ladder, lowest at the top, the amount set big in the heading face. */
.track-note { max-width: var(--measure); color: var(--color-muted); margin-bottom: var(--space-5); }
.tier-ladder { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
@media (min-width: 768px) {
  .tier-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
}
@media (min-width: 1100px) {
  .tier-ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.tier-card {
  height: 100%;
  padding: var(--space-5);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-top: 6px solid var(--color-accent);
  border-radius: var(--radius-lg);
}
.tier-card__amount {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-3xl);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--color-accent);
}
.tier-card__name { margin: var(--space-2) 0 var(--space-3); font-size: var(--text-xl); }
.tier-card__funds { margin: 0 0 var(--space-3); }
.tier-card__recognition { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }
.tier-card__tracks { margin: 0; display: grid; gap: var(--space-3); }
.tier-card__tracks dt { font-weight: 700; font-size: var(--text-sm); }
.tier-card__tracks dd { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }
@media (min-width: 600px) {
  /* The two tracks side by side: each dt sits over its own dd. */
  .tier-card__tracks { grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; grid-auto-flow: column; gap: var(--space-1) var(--space-4); }
}

/* Logo tiles: every logo in the same 3:2 box on a pale surface, never cropped. */
.logo-garden__level { font-size: var(--text-lg); color: var(--color-muted); margin: var(--space-5) 0 var(--space-3); }
.logo-garden__level:first-of-type { margin-top: 0; }
.logo-garden, .sponsor-strip__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (min-width: 640px) { .logo-garden { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .logo-garden { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.logo-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  padding: var(--space-3);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
}
.logo-tile img { width: 100%; height: 100%; object-fit: contain; }
a.logo-tile:hover { border-color: var(--color-link); }
.logo-tile__name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: var(--leading-heading);
  text-align: center;
  color: var(--color-text);
  overflow-wrap: anywhere;
}
a.logo-tile:hover .logo-tile__name { text-decoration: underline; }

/* The strip included by the Grove page and the homes: smaller tiles, a quiet heading. */
.sponsor-strip { margin-top: var(--space-7); padding: var(--space-6) 0; border-top: var(--border-width) solid var(--color-border); }
.sponsor-strip__title { font-size: var(--text-lg); color: var(--color-muted); margin-bottom: var(--space-3); }
.sponsor-strip__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
@media (min-width: 768px) { .sponsor-strip__list { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.sponsor-strip .logo-tile__name { font-size: var(--text-sm); }

/* Talk to us: the person to call, then the form, on a band. */
.talk { background: var(--color-band); margin-top: var(--space-7); padding: var(--space-7) 0 var(--space-6); }
.talk__inner { display: grid; gap: var(--space-5); }
@media (min-width: 900px) {
  .talk__inner { grid-template-columns: 1fr 1.4fr; gap: var(--space-8); }
}
.talk__contact { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-lg); }
.talk__contact a { display: inline-flex; align-items: center; min-height: var(--tap-target); }
.sponsor-form select {
  display: block;
  width: 100%;
  min-height: var(--tap-target);
  padding: var(--space-2) var(--space-3);
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
}
@media (min-width: 768px) { .sponsor-form__send { width: auto; min-width: 12rem; } }
.sponsor-grove { padding-bottom: var(--space-4); }

/* ===== shop ===== */
/* The shop: category tiles, item grid, item page with the Reserve button high on a phone. */
.hero--shop .hero__lead { font-size: var(--text-base); }
.pill--instock { border-color: var(--color-link); }
.pill--sold { background: var(--color-band); border-color: var(--color-band); color: var(--color-muted); }
.shop-tiles, .shop-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 600px) { .shop-tiles, .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .shop-tiles, .shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.shop-tile__link, .shop-card {
  display: block;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--color-text);
  text-decoration: none;
}
.shop-tile__photo, .shop-card__photo { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: var(--color-band); }
.shop-tile__name { display: block; padding: var(--space-3) var(--space-3) 0; font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; }
.shop-tile__count { display: block; padding: 0 var(--space-3) var(--space-3); color: var(--color-muted); font-size: var(--text-sm); }
.shop-card__photo-link { display: block; }
.shop-card__body { padding: var(--space-3); }
.shop-card__name { margin: 0; font-size: var(--text-base); }
.shop-card__name a { color: inherit; }
.shop-card__price { margin: var(--space-1) 0 var(--space-2); font-weight: 700; }
.shop-card--sold .shop-card__photo { opacity: 0.6; }
.shop-empty { padding: var(--space-5) 0; max-width: var(--measure); }
.shop-visit { margin: var(--space-2) 0; }
.shop-visit__hours { display: block; color: var(--color-muted); font-size: var(--text-sm); }
.shop-page__top { display: grid; gap: var(--space-5); }
@media (min-width: 800px) { .shop-page__top { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; } }
.shop-gallery__main img, .shop-gallery__none { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); background: var(--color-band); }
.shop-gallery__strip { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.shop-gallery__strip img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-md); }
.shop-page__facts h1 { margin-bottom: var(--space-1); }
.shop-page__sci { margin: 0 0 var(--space-2); color: var(--color-muted); }
.shop-page__price { margin: 0 0 var(--space-2); font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700; }
.shop-page__low { margin-left: var(--space-2); font-weight: 700; color: var(--color-error); }
.shop-page__note { margin: var(--space-3) 0; color: var(--color-muted); }
.shop-page__story { margin-top: var(--space-5); }
.reserve { margin: var(--space-3) 0; }
.reserve > summary { list-style: none; display: flex; align-items: center; justify-content: center; min-height: var(--tap-target); cursor: pointer; text-align: center; }
.reserve > summary::-webkit-details-marker { display: none; }
.reserve__form { margin-top: var(--space-3); padding: var(--space-4); background: var(--color-surface); border: 2px solid var(--color-border); border-radius: var(--radius-md); }
.shop-buy { margin: var(--space-3) 0; }
.shop-buy .select, .shop-buy input[type="number"] { width: 100%; min-height: var(--tap-target); font: inherit; padding: var(--space-2) var(--space-3); color: var(--color-text); background: var(--color-surface); border: 2px solid var(--color-border); border-radius: var(--radius-sm); }
.shop-instore { margin: var(--space-3) 0; padding: var(--space-3); background: var(--color-band); border-radius: var(--radius-md); }
.shop-instore p { margin: 0; }
.shop-variants { color: var(--color-muted); }

/* ===== events ===== */

/* ===== academy ===== */

/* ===== media ===== */

/* ===== pos ===== */

@media print {
  .org-strip, .site-header, .skip-link, .nav-toggle-label, .button, .footer-links, .edit-link { display: none; }
  body { background: #fff; color: #000; }
  .site-footer { background: #fff; color: #000; }
}