/* Neighbors for Animals — mobile-first.
 *
 * Every base rule below is the phone layout; every media query is min-width.
 * The Squarespace original was built desktop-down and visibly broke under
 * ~360px, where the hero heading overflowed its box and was clipped behind the
 * divider graphic.
 *
 * System fonts only — Georgia for headings (the brand's existing face) and the
 * system UI sans for body. Zero webfont bytes, zero layout shift, and the
 * largest contentful paint is whatever the hero image weighs.
 */

:root {
  /* Named for what each colour DOES, not what hue it happens to be. A palette
   * named cream/navy/rose stops being true the moment somebody edits it in the
   * theme editor, and the editor now invites exactly that. The settings keys in
   * the database are unchanged, so nothing had to migrate: src/theme.js maps
   * key to variable, and only the variable side moved.
   *
   * Brand palette recovered from the Squarespace stylesheet. */
  --page-bg:       #F2E8DE;

  /* The HEADER band, and the tint behind the hero and CTA blocks. Not the
   * footer, which is dark and has its own variables below.
   *
   * This value used to be load-bearing: it was sampled from the logo artwork's
   * own background so the image had no visible rectangle around it, and any
   * other colour showed the logo as a pasted-on patch. The logo was re-exported
   * with a transparent background on 20 Aug 2026, so that constraint is gone
   * and this is now an ordinary editable colour like any other. */
  --band-bg:       #FAEDE2;

  --surface:       #FFFFFF;
  --ink:           #1B1B5A;
  --ink-soft:      #3A3A73;

  /* The dark band across the bottom of every page. Starts life the same value
   * as the body ink and is deliberately its own variable: the footer was
   * painted with --ink directly, so it could not be changed without moving
   * every heading and paragraph on the site with it. */
  --footer-bg:     #1B1B5A;
  /* Everything that sits ON that band. These were a mix of the page background
   * and two hardcoded hex values, so making the band editable without them
   * would have handed someone a way to produce an unreadable footer with no way
   * to fix it. A background you can change needs foregrounds you can change. */
  --footer-ink:    #F2E8DE;
  --footer-link:   #F5C6CF;
  --footer-note:   #C9C4DA;

  /* The brand rose measures 3.4:1 on the page background: fine for borders and
   * icons, fails AA at body size. So --accent is decorative only, and anything
   * that has to be read uses --accent-strong, which measures about 5:1. */
  --accent:        #D94A67;
  --accent-strong: #B23150;
  --label-ink:     #5B5E86;
  --accent-2:      #A6A95B;

  --border:        #E0D3C6;
  /* Editable as "Faint borders", but nothing on the public site uses it. */
  --border-soft:   #EDE3D9;

  /* The emergency panel. A wash of the brand rose rather than a slab of dark:
   * the numbers on that panel are the most important text on the site, and they
   * are easiest to read as dark text on a light ground. The tint still separates
   * the panel from the page and still reads as the urgent one, because it is the
   * only place this colour appears. */
  --alert-bg:      #FCEDF0;
  --alert-border:  #EBBFC8;

  --wrap: 1100px;
  --gutter: 20px;
  --radius: 10px;

  --serif: Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --shadow: 0 1px 2px rgba(27, 27, 90, .06), 0 10px 24px -18px rgba(27, 27, 90, .4);
}


*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;

  /* Sticky footer. A short page — the 404, the sign-in prompt, a page that is
   * only a hero — otherwise leaves the dark footer floating mid-screen with
   * cream below it, which reads as a broken page rather than a short one.
   * `dvh` rather than `vh`: on a phone `100vh` is measured against the
   * viewport with the browser chrome HIDDEN, so it overflows by the height of
   * the toolbar and every short page gains a scrollbar. `vh` first as the
   * fallback for browsers that do not know `dvh`. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Takes the slack, so the footer is pushed to the bottom on a short page and
 * simply follows the content on a long one. `0 auto` rather than `1` so it is
 * never compressed below its content height. */
body > main { flex: 1 0 auto; }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent-strong); text-underline-offset: 2px; }
a:hover { color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--accent-strong);
  outline-offset: 2px;
  border-radius: 3px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: -9999px;
  background: var(--ink);
  color: #fff;
  padding: 12px 18px;
  z-index: 100;
}
.skip:focus { left: 8px; top: 8px; }

/* ---------- type ---------- */

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.15;
  text-wrap: balance;
  margin: 0 0 .5em;
}

h1 { font-size: clamp(1.9rem, 7.5vw, 3.25rem); letter-spacing: -.015em; }
h2 { font-size: clamp(1.5rem, 5vw, 2.1rem); letter-spacing: -.01em; }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; }

.prose { max-width: 65ch; }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; font-weight: 600; font-family: var(--sans); }
.prose ul, .prose ol { padding-left: 1.25em; margin: 0 0 1em; }
.prose li { margin-bottom: .4em; }
/* Images inserted into rich text from the media library. The editor stores only
 * src and alt, so all sizing lives here — an editor cannot paste a width that
 * breaks the layout on a phone. */
.prose img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin: 1.5em 0;
}
.prose figure { margin: 1.5em 0; }
.prose figure img { margin: 0; }
.prose figcaption {
  margin-top: .6em;
  font-size: .9rem;
  color: var(--label-ink);
}

.prose blockquote {
  margin: 1.5em 0;
  padding-left: 1em;
  border-left: 3px solid var(--accent);
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
}

.block__intro { max-width: 60ch; font-size: 1.08rem; }

/* ---------- header + nav ---------- */

.site-header {
  background: var(--band-bg);
  /* The bar and the page ground are now within 1.05 of each other in luminance
   * — deliberately, so the logo has no visible edge. That means the boundary
   * has to be drawn rather than implied: a defined rule plus a soft shadow that
   * only reads once content scrolls under it. */
  border-bottom: 1px solid var(--border-strong, #E3D4C4);
  box-shadow: 0 1px 0 rgba(27, 27, 90, .04), 0 6px 14px -12px rgba(27, 27, 90, .28);
  position: sticky;
  top: 0;
  z-index: 20;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* nowrap is load-bearing: the logo and the menu group always share one row.
   * When the inline menu does not fit, the Menu button replaces it (see the
   * 1100px media query and the script in the header). */
  flex-wrap: nowrap;
  /* Wider than the page content (--wrap, 1100px), so a full menu fits on one
   * line beside the logo on an ordinary desktop screen. */
  max-width: 1400px;
  gap: 12px;
  /* No min-height: the bar is exactly the logo plus a hairline of padding, so
   * "as short as it can be" falls out of the content rather than being a number
   * to keep in sync with the artwork. */
  padding-block: 5px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.15;
  padding: 0;
  /* The logo TAKES the leftover space rather than being a fixed size, so it is
   * automatically as large as the viewport allows at every width, up to the
   * 150px height cap. */
  flex: 1 1 auto;
  min-width: 0;
}
.brand__mark { width: 36px; height: 36px; flex: none; }
/* An uploaded logo is sized by HEIGHT so wide and square artwork both sit in
 * the bar correctly; width follows from the intrinsic ratio. */
/* Bound by BOTH dimensions, so one rule covers every screen: on a wide screen
 * max-height binds and the logo is 150px tall; on a phone max-width binds first
 * and the logo shrinks to leave room for the menu and language buttons. Setting
 * an explicit height instead would have overflowed a 375px viewport, since this
 * artwork is 418px wide at 150px tall. */
.brand__logo {
  /* Fills the brand box; `contain` keeps the aspect ratio and left-aligns it so
   * the artwork never stretches or drifts to the middle when the box is wider
   * than the ratio needs. max-height stops it growing past a sensible bar. */
  width: 100%;
  height: auto;
  max-height: 150px;
  object-fit: contain;
  object-position: left center;
  display: block;
}
.brand__name { max-width: 9em; }

/* A <details> disclosure driving a SIBLING list: an accessible,
 * keyboard-operable menu with no JavaScript at all.
 *
 * The list is a sibling, not a child, because a closed <details> hides its
 * children at the user-agent level and no `display: flex` in a media query can
 * bring them back — nesting it left the desktop navigation completely
 * invisible. `:has()` has been baseline since 2023, and where it is missing
 * the menu simply stays expanded: a degraded layout rather than no navigation. */
/* Menu and language sit together at the end of the bar, the language toggle to
 * the RIGHT of the menu. The group is the positioning context so the dropdown
 * panel aligns with the right edge of the whole group — anchoring it to .nav
 * would leave it inset by the width of the language button. */
.header-actions {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
.nav { position: static; display: flex; align-items: center; }
.nav__disclosure { position: static; }

.nav__toggle {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;               /* tap target */
  padding: 0 12px;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: .95rem;
}
.nav__toggle::-webkit-details-marker { display: none; }

.nav__toggle-bars {
  width: 18px; height: 2px;
  background: currentColor;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}
details[open] .nav__toggle-bars {
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
  opacity: .7;
}

.nav__list {
  list-style: none;
  margin: 0;
  padding: 8px;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: min(78vw, 300px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: none;
}
.nav:has(.nav__disclosure[open]) .nav__list { display: block; }
.nav__list a {
  display: block;
  padding: 11px 12px;             /* 44px effective tap target */
  text-decoration: none;
  color: var(--ink);
  border-radius: 6px;
}
.nav__list a:hover, .nav__list a:focus-visible { background: var(--page-bg); }
.nav__list a[aria-current="page"] { color: var(--accent-strong); font-weight: 600; }
.nav__sub { list-style: none; margin: 0; padding: 0 0 0 12px; }

@media (min-width: 1100px) {
  /* Above this width the menu sits inline on ONE line beside the logo, unless
   * it does not fit. The script at the end of the header measures that and adds
   * .nav-collapsed, which falls back to the Menu button exactly as on a phone.
   * The menu never wraps and the logo never shrinks below 225px (its full 150px
   * height). Measuring rather than picking a breakpoint is what keeps this
   * right when a page is added to the menu: eight items once took 1071px of a
   * 1100px bar and squeezed the logo to nothing.
   *
   * Without the script (.nav-js absent) the list wraps instead, so the menu is
   * still all there; that is the only case in which it can wrap. */
  .site-header:not(.nav-collapsed) .nav__toggle { display: none; }
  .site-header:not(.nav-collapsed) .brand { min-width: 225px; }
  .site-header:not(.nav-collapsed) .header-actions { flex: 0 1 auto; min-width: 0; }
  .site-header:not(.nav-collapsed) .nav { min-width: 0; }
  .site-header:not(.nav-collapsed) .nav__list,
  .site-header:not(.nav-collapsed) .nav:has(.nav__disclosure[open]) .nav__list {
    position: static;
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: none;
    min-width: 0;
  }
  .site-header:not(.nav-js) .nav__list { flex-wrap: wrap; justify-content: flex-end; }
  .site-header:not(.nav-collapsed) .nav__list > li { position: relative; }
  .site-header:not(.nav-collapsed) .nav__list a { padding: 10px 10px; font-size: .98rem; white-space: nowrap; }
  .site-header:not(.nav-collapsed) .nav__sub {
    display: none;
    position: absolute;
    top: 100%; left: 0;
    min-width: 220px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 6px;
    z-index: 5;
  }
  .site-header:not(.nav-collapsed) .nav__group:hover .nav__sub,
  .site-header:not(.nav-collapsed) .nav__group:focus-within .nav__sub { display: block; }
}

/* Language switch. Sits before the menu button so a Spanish speaker reaches it
 * first on a phone, and is a plain link — the other language is a real URL, not
 * a JavaScript toggle. */
.langswitch {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  flex: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 600;
  white-space: nowrap;
}
.langswitch:hover { background: var(--page-bg); color: var(--ink); }

/* Below 560px the two controls shrink to icon and code, which hands ~70px back
 * to the logo. The accessible names are unchanged: the menu keeps aria-label
 * "Menu" and the switch keeps the full language name. */
/* The flag shows at every width; the language name joins it once there is room.
 * A 1px border keeps a white or pale stripe from vanishing into the bar. */
.flag {
  width: 26px;
  height: 18px;
  flex: none;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(27, 27, 90, .22);
  display: block;
}

/* Flag only. Padding is set so the button stays a comfortable 44px tap target
 * around a 24x16 flag rather than collapsing to the size of the artwork. */
.langswitch { padding: 0 11px; }

@media (max-width: 699px) {
  .nav__toggle-label { display: none; }
  .nav__toggle { padding: 0 14px; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
}
.btn--primary { background: var(--accent-strong); color: #fff; }
.btn--primary:hover { background: var(--ink); color: #fff; }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--secondary:hover { background: var(--ink); color: #fff; }
.btn--lg { min-height: 56px; font-size: 1.1rem; padding-inline: 32px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
/* On a phone a single action should span the width; two actions sit side by
 * side only when there is room. */
.btn-row .btn { flex: 1 1 100%; }
@media (min-width: 520px) { .btn-row .btn { flex: 0 0 auto; } }

/* ---------- sections ---------- */

.block { padding-block: clamp(2.25rem, 7vw, 4rem); }
.block--text.is-wide .prose { max-width: none; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  background: var(--band-bg);
  border-bottom: 1px solid var(--border);
}
.hero__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* Anchor the crop to the top. `cover` centres by default, and at 21/9 that
   * takes the slice out of the middle of the picture, which is where heads
   * are. */
  object-position: top;
}
@media (min-width: 700px) { .hero__media img { aspect-ratio: 21 / 9; } }

.hero__inner { padding-block: clamp(1.75rem, 6vw, 3.5rem); }

.hero__eyebrow {
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--label-ink);
  margin: 0 0 .75em;
}
.hero__title { margin-bottom: .35em; max-width: 18ch; }
.hero__lede { font-size: 1.1rem; max-width: 46ch; color: var(--ink-soft); margin-bottom: 1.5em; }
.hero__cta { margin: 0; }
.hero__cta .btn { width: 100%; }
@media (min-width: 520px) { .hero__cta .btn { width: auto; } }

/* ---------- two-column container ---------- */

/* Mobile first: one column. `order` below only applies once there are two
 * columns to reorder, so the stacked layout can never come out shuffled. */
.columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 4vw, 3rem);
}

.block--columns.bg-tint { background: var(--band-bg); border-block: 1px solid var(--border); }

@media (min-width: 860px) {
  .columns { grid-template-columns: 1fr 1fr; }
  .ratio-wide-left .columns { grid-template-columns: 1.6fr 1fr; }
  .ratio-wide-right .columns { grid-template-columns: 1fr 1.6fr; }
  .align-center .columns { align-items: center; }
  .align-top .columns { align-items: start; }
}

/* On a phone the right column can be asked to come first. */
.first-right .col--right { order: -1; }
@media (min-width: 860px) { .first-right .col--right { order: 0; } }

/* Nested blocks keep the same markup they use at the top level, so the section
 * padding and the centred max-width have to be undone here — otherwise every
 * column would carry a page-sized gutter inside a half-width box. Doing it in
 * CSS rather than threading a "nested" flag through ten renderers means a new
 * block type works inside a column the day it is added, with no extra code. */
.col > .block,
.col > .hero,
.col > figure.block {
  padding-block: 0;
  background: none;
  border: 0;
}
.col > .block > .wrap,
.col > .hero > .hero__inner {
  max-width: none;
  width: 100%;
  padding-inline: 0;
  margin-inline: 0;
}
.col > .hero { position: static; }
.col > .hero .hero__media img { aspect-ratio: auto; border-radius: var(--radius); }
.col > .hero .hero__title { max-width: none; }
.col .block__intro, .col .prose { max-width: none; }

/* Inside a column the panel should read as a panel rather than bleeding to the
 * page edge. */
.col > .block--emergency {
  background: var(--alert-bg);
  border: 1px solid var(--alert-border);
  border-radius: var(--radius);
  padding: 1.25rem 1.25rem;
}
.col > .block--emergency > .wrap { padding-inline: 0; }

/* Two nested card grids side by side would each try for three columns. */
.col .cards { grid-template-columns: 1fr; }
@media (min-width: 1100px) { .col .cards { grid-template-columns: repeat(2, 1fr); } }
.col .resources { grid-template-columns: 1fr; }

/* ---------- cards ---------- */

.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .cards { grid-template-columns: repeat(3, 1fr); } }

/* An explicit count, when the set has a shape the default does not know about.
 * Four programmes want four across, not three and an orphan. Same breakpoint
 * and same is-cols- naming as .linkcards, which has always had this. */
@media (min-width: 1000px) {
  .cards.is-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .cards.is-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .cards.is-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.card__link { display: block; position: relative; height: 100%; text-decoration: none; color: inherit; }
.card__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card__body { padding: 16px 18px 20px; }
.card__title { margin: 0 0 .35em; font-size: 1.15rem; }
.card__text { margin: 0; color: var(--ink-soft); font-size: .98rem; }
.card__arrow { position: absolute; right: 16px; bottom: 14px; color: var(--accent-strong); font-size: 1.1rem; }
.card__link:hover { background: var(--band-bg); }
.card__link:hover .card__title { color: var(--accent-strong); }

/* ---------- framed cards ---------- */
/*
 * Each card carries its own accent as a custom property, so the border, icon
 * well, divider and button all read from one value — `is-rose` sets --accent-*
 * and everything below follows. Adding a fourth colour is one block, not five
 * scattered overrides.
 */
.cards--framed { gap: clamp(16px, 2.4vw, 28px); }

.cards--framed .card {
  --card-accent: var(--accent);
  --card-ink: var(--accent-strong);
  --card-wash: #FBEEF1;

  background: var(--band-bg);
  border: 2px solid var(--card-accent);
  border-radius: 4px;      /* the reference is nearly square-cornered */
  box-shadow: none;
  overflow: visible;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: clamp(22px, 3vw, 34px) clamp(18px, 2.4vw, 28px);
}

.cards--framed .card.is-indigo {
  --card-accent: var(--label-ink);
  --card-ink: #474A70;
  --card-wash: #ECEDF3;
}
.cards--framed .card.is-olive {
  --card-accent: var(--accent-2);
  --card-ink: #7C7F3C;
  --card-wash: #F1F2E4;
}

/* Whole-card link variant: the flex column moves onto the anchor so the button
 * area still sits at the bottom. */
.cards--framed .card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: center;
}
.cards--framed .card__link:hover { background: none; }
.cards--framed .card__arrow { position: static; margin-top: auto; padding-top: 1rem; color: var(--card-ink); }

/* Circular icon well */
.card__icon {
  display: grid;
  place-items: center;
  width: clamp(64px, 8vw, 84px);
  height: clamp(64px, 8vw, 84px);
  margin: 0 auto;
  border-radius: 50%;
  background: var(--card-wash);
  color: var(--card-accent);
}
.card__icon .icon { width: 56%; height: 56%; fill: currentColor; display: block; }
.card__icon--image { padding: 0; overflow: hidden; background: none; }
.card__icon--image img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* rule — paw — rule */
.pawrule {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: clamp(14px, 2vw, 20px) auto clamp(10px, 1.6vw, 16px);
  width: min(100%, 240px);
  color: var(--card-accent);
}
.pawrule__line { flex: 1; height: 1px; background: currentColor; opacity: .55; }
/* Sized in em so the paw tracks the card's text scale instead of staying a
 * fixed 17px while everything around it grows with the viewport. */
.pawrule__paw { width: 2em; height: 2em; fill: currentColor; flex: none; }

.cards--framed .card__title {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 .5em;
  text-wrap: balance;
}
.cards--framed .card__text {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  max-width: 34ch;
  margin: 0 auto;
}

/* The button sits at the bottom of every card regardless of text length, so a
 * row of cards has its buttons on one line. */
.card__action { margin: auto 0 0; padding-top: clamp(18px, 2.6vw, 30px); }

.btn--pill {
  width: 100%;
  border-radius: 999px;
  background: var(--card-accent, var(--accent-strong));
  color: #fff;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
  min-height: 52px;
  padding: 12px 22px;
  text-wrap: balance;
}
.btn--pill:hover, .btn--pill:focus-visible { background: var(--ink); color: #fff; }

/* ---------- link cards ---------- */

/* auto-fit rather than a fixed column count: the row reflows on its own from
 * one tile per line on a phone up to five across, with no breakpoint per count. */
.linkcards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 520px) {
  .linkcards { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
@media (min-width: 1000px) {
  .linkcards.is-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .linkcards.is-cols-4 { grid-template-columns: repeat(4, 1fr); }
  .linkcards.is-cols-5 { grid-template-columns: repeat(5, 1fr); }
}

.linkcard {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  min-height: 88px;
  padding: 16px 18px;
  background: var(--band-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  transition: background-color .12s ease, border-color .12s ease;
}
.linkcard:hover,
.linkcard:focus-visible {
  background: var(--surface);
  border-color: var(--accent-strong);
  color: var(--ink);
}

/* The icon is decorative — the label is the link's accessible name — so it is
 * kept visually quiet and never becomes the only thing distinguishing two
 * tiles. */
.linkcard__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--ink);
}
.linkcard__icon .icon { width: 100%; height: 100%; fill: currentColor; }
.linkcard__icon--image { width: 56px; height: 56px; }
.linkcard__icon--image img { width: 100%; height: 100%; object-fit: contain; }
.linkcard:hover .linkcard__icon { color: var(--accent-strong); }

.linkcard__label {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.25;
  font-weight: 400;
  text-wrap: balance;
}

/* A vertical variant reads better when the row is tight and the labels are
 * long, which is what happens in Spanish. */
@media (max-width: 519px) {
  .linkcard { min-height: 72px; }
}

/* ---------- resources ---------- *//* ---------- resources ---------- */

.resources { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 760px) { .resources { grid-template-columns: repeat(2, 1fr); } }

.resource {
  /* One value drives the stripe, so a per-item override is a single custom
   * property rather than a second border rule. The default is the colour every
   * resource list already had. */
  --resource-accent: var(--accent-2);

  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--resource-accent);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.resource.is-rose   { --resource-accent: var(--accent); }
.resource.is-indigo { --resource-accent: var(--label-ink); }
.resource.is-olive  { --resource-accent: var(--accent-2); }

.resource__name { margin: 0 0 .3em; font-family: var(--sans); font-weight: 650; font-size: 1.05rem; }
.resource__detail { margin: 0 0 .6em; color: var(--ink-soft); font-size: .97rem; }
.resource__meta {
  list-style: none;
  margin: 0 0 .5em;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: .97rem;
}
/* Phone numbers get a real tap target — this is a site people open one-handed
 * standing next to a stray animal. */
.resource__meta a { display: inline-block; padding: 6px 0; font-weight: 600; }
.resource__note { margin: 0; font-size: .9rem; color: var(--label-ink); }

/* ---------- emergency ---------- */

/* Rules top and bottom rather than a border box: the section is full-bleed, so
 * a box would have edges running off the screen. Two rules read as a banded
 * region at any width. */
.block--emergency {
  background: var(--alert-bg);
  color: var(--ink);
  border-block: 2px solid var(--alert-border);
}
.emergency__heading { color: var(--ink); }
.emergency { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 14px; }
@media (min-width: 700px) { .emergency { grid-template-columns: repeat(2, 1fr); } }

.emergency__item {
  background: var(--surface);
  border: 1px solid var(--alert-border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.emergency__org { margin: 0 0 .2em; font-weight: 650; }
.emergency__role { margin: 0 0 .5em; font-size: .93rem; color: var(--ink-soft); }
.emergency__phone { margin: 0 0 .3em; }
/* The number is the reason the panel exists, so it gets the darkened rose
 * rather than the brand one: --accent is only rated for large text, and a phone
 * number that a worried person is squinting at should not be borderline. */
.emergency__phone a {
  display: inline-block;
  color: var(--accent-strong);
  font-family: var(--serif);
  font-size: 1.5rem;
  padding: 6px 0;
  text-decoration-thickness: 1px;
}
.emergency__phone a:hover, .emergency__phone a:focus { color: var(--ink); }
.emergency__link a { color: var(--accent-strong); font-size: .95rem; }
.emergency__note { margin: 0; font-size: .95rem; color: var(--ink-soft); max-width: 62ch; }

/* ---------- faq ---------- */

.faq { display: grid; gap: 10px; max-width: 70ch; }
.faq__item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.faq__q {
  cursor: pointer;
  padding: 14px 18px;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  align-items: center;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; color: var(--accent-strong); font-size: 1.4rem; line-height: 1; }
details[open] > .faq__q::after { content: "\2212"; }
.faq__a { padding: 0 18px 16px; }

/* ---------- image + cta + donate ---------- */

.block--image figcaption { margin-top: .6em; font-size: .9rem; color: var(--label-ink); }
.block--image.is-full .wrap { max-width: none; padding-inline: 0; }
.block--image img { border-radius: var(--radius); }
.block--image.is-full img { border-radius: 0; }

.block--cta { background: var(--band-bg); border-block: 1px solid var(--border); }
.block--donate { text-align: center; }
.block--donate .btn-row { justify-content: center; }

/* ---------- forms ---------- */

.form { max-width: 34rem; }
.field { margin: 0 0 1.1rem; }
.field label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .35em; }
.req { color: var(--accent-strong); }

.form input,
.form select,
.form textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.form textarea { min-height: 8rem; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--accent-strong); }

/* Honeypot. Kept out of the accessibility tree and off screen rather than
 * display:none, which some bots specifically check for. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Turnstile. Rendered by Cloudflare's own script into an iframe of about
 * 300x65, so the only thing to do here is give it room and stop it forcing a
 * sideways scroll on a narrow phone. */
.cf-turnstile { margin: 0 0 1.1rem; max-width: 100%; overflow-x: auto; }

.form__status { margin: 1em 0 0; font-weight: 600; min-height: 1.5em; }
.form__status.is-ok { color: #146B4B; }
.form__status.is-error { color: var(--accent-strong); }

.notice {
  background: var(--band-bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: .95rem;
}

/* ---------- footer ---------- */

.site-footer {
  background: var(--footer-bg);
  color: var(--footer-ink);
  padding-block: 2.5rem;
  margin-top: 1rem;
}
.site-footer a { color: var(--footer-link); }
.site-footer__org { font-family: var(--serif); font-size: 1.15rem; margin-bottom: .4em; }
.site-footer__note { font-size: .88rem; color: var(--footer-note); max-width: 60ch; margin-top: 1.25em; }
.social { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 0; margin: 1em 0 0; }
.social a { display: inline-block; padding: 8px 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}