/* ------------------------------------------------------------------
   Hilltop Park Residents' Association — stylesheet
   One hand-written file, no framework. Mobile-first and accessible.
   Brand colours come straight from the design board and are defined
   once as variables at the top so they are easy to adjust.
   ------------------------------------------------------------------ */

/* Hanken Grotesk — self-hosted variable font (one file covers 400–800). */
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/hanken-grotesk-latin.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+2074, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/hanken-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

:root {
  --navy: #0f2e4f;
  --navy-dark: #0a2238;
  --green: #4caf42;
  --green-dark: #3d9636;
  --green-light: #a8d08d;
  --blue-light: #d6e6f2;
  --ink: #1f2d3a;
  --muted: #5a6b78;
  --line: #e1e7ee;
  --bg: #ffffff;
  --bg-soft: #f2f4f6;
  /* Newsletter palette. The printed newsletters are built from tinted green
     panels with darker green icon badges; these name the shades that were
     previously repeated as raw hex in a dozen rules. */
  --mint: #eef6ea; /* page bands and soft panels */
  --mint-panel: #e3f0d8; /* stat tiles, icon cards */
  --mint-badge: #c7e3b4; /* the circle an icon sits in */
  --green-ink: #2f6a2a; /* icon and heading green */
  --green-deep: #35602f; /* reversed-text call to action */
  /* Status colours, shared by the issue badges and the tracker board. */
  --status-open-bg: #fdecea;
  --status-open-ink: #b3261e;
  --status-progress-bg: #fdeede;
  --status-progress-ink: #9a4b00;
  --status-resolved-bg: #e6f4e3;
  --status-resolved-ink: #2f7a2a;
  --shadow-card: 0 1px 2px rgba(15, 46, 79, 0.06), 0 4px 12px rgba(15, 46, 79, 0.06);
  --shadow-card-hover: 0 2px 4px rgba(15, 46, 79, 0.08), 0 10px 24px rgba(15, 46, 79, 0.1);
  --max: 70rem;
  --radius: 8px;
  --radius-md: 12px; /* cards */
  --radius-lg: 18px; /* soft newsletter-style panels */
  --font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden; /* keep the full-bleed hero from causing sideways scroll */
}

.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

main.container {
  padding-block: 2rem 3rem;
}

h1,
h2,
h3 {
  color: var(--navy);
  line-height: 1.18;
}
h1,
h2 {
  font-weight: 800;
  letter-spacing: -0.015em;
}
h3 {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* --- Links and buttons --- */
a {
  color: var(--navy);
}
a:hover {
  color: var(--green-dark);
}

.button {
  display: inline-block;
  background: var(--green);
  color: #fff;
  padding: 0.65rem 1.2rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 700;
}
.button:hover {
  background: var(--green-dark);
  color: #fff;
}
.button--ghost {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.65);
  padding: calc(0.65rem - 2px) calc(1.2rem - 2px);
}
.button--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  color: #fff;
}

/* --- Accessibility: skip link --- */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 100;
}
.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}

/* --- Header / navigation (navy bar) --- */
.site-header {
  background: var(--navy);
  color: #fff;
}
.site-header__inner {
  max-width: 90rem; /* wider than page content so the logo + nav fit on one row */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-block: 0.75rem;
}
.site-header__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: #fff;
}
.brand-mark {
  height: 38px;
  width: auto;
  max-width: 62vw;
  flex: none;
}
@media (min-width: 48rem) {
  .brand-mark {
    height: 42px;
    max-width: none;
  }
}

.nav-toggle {
  display: inline-block;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  border-radius: var(--radius);
  padding: 0.45rem 0.8rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.primary-nav {
  display: none;
  width: 100%;
}
.primary-nav.is-open {
  display: block;
}
.primary-nav ul {
  list-style: none;
  margin: 0.5rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.primary-nav a {
  display: block;
  padding: 0.55rem 0.25rem;
  text-decoration: none;
  font-weight: 600;
  color: #fff;
  border-radius: var(--radius);
  text-transform: uppercase; /* matches the brand board's navy bar */
  letter-spacing: 0.04em;
  font-size: 0.95rem;
}
.primary-nav a:hover,
.primary-nav a[aria-current="page"] {
  color: var(--green-light);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-block: 0.5rem;
}
.nav-search {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}
.nav-search:hover {
  color: var(--green-light);
}
.cta {
  display: inline-block;
  background: var(--green);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 700;
}
.cta:hover {
  background: var(--green-dark);
  color: #fff;
}

@media (min-width: 72rem) {
  .site-header__inner {
    flex-wrap: nowrap;
  }
  .nav-toggle {
    display: none;
  }
  .primary-nav {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: auto;
  }
  .primary-nav ul {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    margin: 0;
    gap: 0.9rem;
  }
  .primary-nav a {
    font-size: 0.82rem;
  }
  .primary-nav a {
    white-space: nowrap;
    padding: 0.4rem 0.15rem;
  }
  .nav-actions {
    padding-block: 0;
    gap: 0.6rem;
  }
  .nav-search__label {
    display: none; /* icon only on desktop */
  }
  .cta {
    font-size: 0.9rem;
    padding: 0.45rem 0.9rem;
  }
}

/* --- Hero (home) — full-bleed colour band with a curved foot --- */
.hero {
  position: relative; /* anchors the wave foot */
  margin-top: -2rem; /* sit flush under the header */
  margin-bottom: 2.5rem; /* let the first section below breathe */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  display: flex;
  align-items: center;
  min-height: 340px;
  /* Navy scrim over the estate photo keeps white text legible.
     Mobile: a uniform scrim (text spans the full width). */
  background: linear-gradient(rgba(15, 46, 79, 0.82), rgba(15, 46, 79, 0.82)),
    url("/assets/img/hero.jpg") center / cover no-repeat var(--navy);
  color: #fff;
  padding: 3rem 0 5rem; /* extra foot room for the wave */
}
/* The brand's layered hill swoosh, closing the hero like the logo's hills. */
.hero__wave {
  position: absolute;
  left: 0;
  bottom: -1px; /* avoid a hairline seam against the page */
  width: 100%;
  height: 48px;
  display: block;
}
.hero__wave-green {
  fill: var(--green);
}
.hero__wave-page {
  fill: var(--bg);
}
@media (min-width: 48rem) {
  .hero {
    min-height: 440px;
    margin-bottom: 3.5rem;
    /* Desktop: darker on the left where the text sits, photo revealed right. */
    background: linear-gradient(
        90deg,
        rgba(15, 46, 79, 0.93) 0%,
        rgba(15, 46, 79, 0.62) 55%,
        rgba(15, 46, 79, 0.3) 100%
      ),
      url("/assets/img/hero.jpg") center / cover no-repeat var(--navy);
  }
}
.hero__content {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
.hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--green-light);
  margin: 0 0 0.85rem;
}
/* Each phrase is wrapped in a span so lines only break at the separators. */
.hero__eyebrow span {
  white-space: nowrap;
}
.hero__eyebrow-sep {
  color: var(--green); /* brand-green dots, as in the logo lockup */
}
@media (min-width: 48rem) {
  .hero__eyebrow {
    letter-spacing: 0.18em;
  }
}
.hero__strapline {
  color: #fff;
  font-size: clamp(1.7rem, 4.6vw, 2.65rem);
  line-height: 1.08;
  margin: 0 0 1rem;
  max-width: 22ch;
}
.hero__sub {
  max-width: 60ch;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 1.5rem;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
}

/* --- Typography blocks --- */
.prose {
  max-width: 48rem;
}
.prose h1 {
  font-size: 1.9rem;
  line-height: 1.2;
}
.prose h2 {
  margin-top: 2rem;
}
.prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
}
.lead {
  font-size: 1.1rem;
  color: var(--ink);
  border-left: 3px solid var(--green-light);
  padding-left: 0.9rem;
}
.meta {
  color: var(--muted);
  font-size: 0.95rem;
}
.tag {
  display: inline-block;
  background: var(--blue-light);
  border-radius: 999px;
  padding: 0.14rem 0.7rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
}
.note {
  color: var(--muted);
  font-style: italic;
}
.article-image {
  margin-bottom: 1.25rem;
}
.announcement {
  /* Green brand callout, as in the newsletter's "Did you know?" box. */
  background: #eef6e3;
  border: 1px solid var(--green-light);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  margin-top: 1.5rem;
  color: var(--navy);
}

/* --- Achievement stat tiles (home) — newsletter-style green tiles --- */
.stat-tiles {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}
.stat-tile {
  background: var(--mint-panel);
  border-radius: var(--radius-lg);
  padding: 1.1rem 0.9rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.3rem;
}
/* The icon is optional — tiles without one still centre correctly.
   --green-ink rather than --green: white on the brighter green is 2.8:1, under
   the 3:1 WCAG wants for graphics. */
.stat-tile .icon-badge {
  margin-bottom: 0.35rem;
  background: var(--green-ink);
  color: #fff;
}
.stat-tile__stat {
  color: var(--navy);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.2;
}
.stat-tile__caption {
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.35;
}

/* --- Status badges (Estate Issues) --- */
.status {
  display: inline-block;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
}
.status--open {
  background: #fdecea;
  color: #b3261e;
}
.status--progress {
  /* Amber, matching the newsletter's in-progress status colour. */
  background: #fdeede;
  color: #9a4b00;
}
.status--resolved {
  background: #e6f4e3;
  color: #2f7a2a;
}

/* --- Home section blocks --- */
.section {
  margin-bottom: 2.75rem;
}
.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.65rem;
  margin-bottom: 1.1rem;
  position: relative;
}
/* The brush-stroke wave the newsletters run under a section heading, in place
   of a flat rule. Inline data URI so it costs no request and can't 404. */
.section__head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 11px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 11' preserveAspectRatio='none'%3E%3Cpath d='M0,7.6C26,2.2 54,0.6 82,2.6 110,4.6 132,9 160,8.2 190,7.4 214,3.6 240,1.6L240,11L0,11Z' fill='%234caf42'/%3E%3Cpath d='M0,10C32,5.6 58,4.6 88,6.2 116,7.7 138,11 168,10.2 196,9.4 218,6.6 240,5.2L240,11L0,11Z' fill='%23a8d08d'/%3E%3C/svg%3E")
    left bottom / 100% 11px no-repeat;
}
/* Uppercase and heavier, as the newsletters set their section headings. */
.section__head h2 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--navy);
}
.section__head a {
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
}

/* --- Card grids and lists --- */
.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
  /* auto-fit so two cards fill the row instead of leaving an empty column */
  .grid--3 {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  }
  /* ...but don't let a lone card balloon to the full container width */
  .grid--3 > :only-child {
    max-width: 24rem;
  }
}
.card {
  position: relative; /* anchors the stretched link on .card--link */
  --card-pad: 1.3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.2rem var(--card-pad);
  background: var(--bg);
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.card:hover {
  border-color: var(--green);
  box-shadow: var(--shadow-card-hover);
}
/* Only lift the cards that are entirely a link — a card with several actions
   inside it shouldn't behave as though the whole thing is clickable. */
.card--link:hover {
  transform: translateY(-2px);
}
.card h3 {
  margin: 0 0 0.35rem;
  font-size: 1.1rem;
}
/* Card and entry-list titles: underline only on hover/focus. */
.card h3 a,
.entry-list h3 a {
  text-decoration: none;
}
.card h3 a:hover,
.card h3 a:focus-visible,
.entry-list h3 a:hover,
.entry-list h3 a:focus-visible {
  text-decoration: underline;
}
/* Whole card is the click target. Only use where the title link is the
   card's single action — never alongside buttons or other links. */
.card--link h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}
.card p {
  margin: 0.35rem 0;
}
.card .meta {
  margin-top: 0.6rem;
}

/* --- Quick links --- */
.quick-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
  .quick-links {
    grid-template-columns: repeat(2, 1fr);
  }
}
.quick-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  text-decoration: none;
  font-weight: 600;
  background: #fff;
  color: var(--navy);
}
.quick-links a::after {
  content: "→";
  content: "→" / ""; /* empty alt text hides the decorative arrow from screen readers */
  color: var(--green-dark);
  transition: transform 0.15s ease;
}
.quick-links a:hover {
  border-color: var(--green);
  color: var(--green-dark);
}
.quick-links a:hover::after {
  transform: translateX(3px);
}

/* --- Membership pricing + bank details --- */
.price {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
  margin: 0.25rem 0 0.5rem;
}
.price span {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
}
.bank-details {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0.75rem;
  display: grid;
  gap: 0.35rem;
  max-width: 24rem;
}
.bank-details li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.75rem;
  background: #fff;
  border-radius: var(--radius);
}
.bank-details span {
  color: var(--muted);
}

/* --- Contact page action cards --- */
.contact-options {
  margin-top: 1.5rem;
}

/* --- Tinted panels (soft colour blocks) --- */
.panel {
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}
.panel--blue {
  background: var(--blue-light);
}
.panel--green {
  background: #e3f0d8; /* same tint as the achievement tiles */
}
.voice-callout {
  margin-bottom: 1.5rem; /* sits between the page title and the intro */
}
.panel > :first-child {
  margin-top: 0;
}
.panel > :last-child {
  margin-bottom: 0;
}
.panel--grey {
  background: var(--bg-soft);
}
.panel--navy {
  background: var(--navy);
  color: #fff;
}
.panel--navy a {
  color: var(--green-light);
}
.panel--navy a:hover {
  color: #fff;
}

/* --- Simple stacked list (news / meetings / issues index) --- */
.entry-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.entry-list > li {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
}
.entry-list h3 {
  margin: 0 0 0.25rem;
}
.entry-list h3 .status {
  margin-left: 0.4rem;
  vertical-align: 0.15em;
}

/* --- Event rows (upcoming meetings) --- */
.event {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.date-badge {
  flex: none;
  width: 3.5rem;
  text-align: center;
  background: var(--blue-light);
  border-radius: var(--radius);
  padding: 0.5rem 0.25rem 0.45rem;
  line-height: 1.1;
}
.date-badge__day {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--navy);
}
.date-badge__month {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--navy);
}

/* --- Filter controls (documents and issues) --- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.filter-bar button {
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  color: var(--ink);
}
.filter-bar button:not([aria-pressed="true"]):hover {
  background: var(--blue-light);
  border-color: var(--blue-light);
}
.filter-bar button[aria-pressed="true"] {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

/* --- Footer (navy) --- */
.site-footer {
  background: var(--navy);
  color: #fff;
  border-top: 4px solid var(--green);
  margin-top: 2rem;
}
.site-footer__inner {
  padding-block: 1.75rem;
}
.site-footer a {
  color: #fff;
}
.site-footer a:hover {
  color: var(--green-light);
}
.site-footer__links {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.site-footer__copyright {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9rem;
  margin-bottom: 0;
}

/* --- Search (Pagefind) --- */
.pagefind-ui {
  --pagefind-ui-primary: var(--navy);
  --pagefind-ui-font: var(--font);
  --pagefind-ui-border-radius: var(--radius);
  margin-top: 1rem;
}

/* ==========================================================================
   Newsletter design kit
   The printed newsletters are built from a handful of repeating parts: a
   circular icon badge, tinted green panels, dotted dividers and a traffic-light
   status board. These are those parts, so the site and the newsletter read as
   one thing. Every icon here is decorative and sits next to text saying the
   same, which is why they are all aria-hidden.
   ========================================================================== */

/* --- The icon itself --- */
.icon {
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: -0.135em;
}

/* --- Circular icon badge: the primitive the rest of the kit is built on --- */
.icon-badge {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: 50%;
  background: var(--mint-badge);
  color: var(--green-ink);
  font-size: 1.4rem;
}
.icon-badge--sm {
  width: 2rem;
  height: 2rem;
  font-size: 1rem;
}
.icon-badge--open {
  background: var(--status-open-bg);
  color: var(--status-open-ink);
}
.icon-badge--progress {
  background: var(--status-progress-bg);
  color: var(--status-progress-ink);
}
.icon-badge--resolved {
  background: var(--status-resolved-bg);
  color: var(--status-resolved-ink);
}
.icon-badge--reverse {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* --- Full-bleed colour bands, so the page has rhythm instead of one long
       white column. The wrapper spans the viewport; the inner keeps the
       measure. body already sets overflow-x:hidden. --- */
.band {
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
  padding-block: 2.25rem;
  margin-bottom: 2.75rem;
}
.band > .section:last-child,
.band > :last-child {
  margin-bottom: 0;
}
.band--soft {
  background: var(--mint);
}
.band--grey {
  background: var(--bg-soft);
}

/* --- Icon list: the newsletter's "what we've done" rows --- */
.icon-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.icon-list > li {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 0.85rem 0;
  border-bottom: 1px dotted var(--green-light);
}
.icon-list > li:last-child {
  border-bottom: 0;
}
.icon-list__body {
  min-width: 0;
}
.icon-list__body > :first-child {
  margin-top: 0;
}
.icon-list__body > :last-child {
  margin-bottom: 0;
}

/* --- Status board: the newsletter's completed / in progress / challenging
       columns, counted from the issues themselves at build time. --- */
.status-board {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.status-board__item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1rem;
  border-radius: var(--radius-md);
  background: var(--mint);
}
.status-board__count {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  color: var(--navy);
}
.status-board__label {
  font-size: 0.9rem;
  color: var(--muted);
}

/* --- One-line tracker summary, counted at build time --- */
.tracker-line {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 1.25rem 0 0;
  font-size: 0.95rem;
  color: var(--ink);
}

/* --- Icon cards: "expert advice / representation / community" in the
       newsletter. Used for what the Crowdfunder pays for. --- */
.icon-cards {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.icon-card {
  background: var(--mint-panel);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1rem;
  text-align: center;
}
.icon-card__title {
  display: block;
  margin: 0.6rem 0 0.3rem;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--navy);
}
.icon-card__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* --- Reversed call to action, as on the newsletter's support panel --- */
.cta-panel {
  background: var(--green-deep);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}
.cta-panel h2,
.cta-panel h3 {
  color: #fff;
  margin-top: 0;
}
.cta-panel a:not(.button) {
  color: #fff;
  text-decoration-thickness: 2px;
}
.cta-panel .button {
  background: #fff;
  color: var(--green-deep);
}
.cta-panel .button:hover {
  background: var(--mint);
  color: var(--green-deep);
}
.cta-panel .note {
  color: rgba(255, 255, 255, 0.85);
}

/* --- Media card for news, with a branded fallback when there's no photo --- */
.card__media {
  display: block;
  aspect-ratio: 16 / 9;
  margin: calc(-1 * var(--card-pad, 1.1rem)) calc(-1 * var(--card-pad, 1.1rem)) 0.9rem;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
  background: var(--mint-panel);
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* No photo: the brand's hill motif rather than an empty grey box. */
.card__media--fallback {
  display: grid;
  place-items: center;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 60' preserveAspectRatio='none'%3E%3Cpath d='M0,34C40,16 80,44 130,30 170,19 210,22 240,30L240,60L0,60Z' fill='%23c7e3b4'/%3E%3Cpath d='M0,44C44,28 88,52 136,40 176,30 212,34 240,42L240,60L0,60Z' fill='%23a8d08d'/%3E%3C/svg%3E")
      left bottom / 100% 62% no-repeat,
    var(--mint);
  color: var(--green-ink);
  font-size: 2rem;
}

/* --- Footer social row, mirroring the newsletter's navy strip --- */
.site-footer__social {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  padding: 0;
  margin: 0.75rem 0 0;
}
.site-footer__social a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.site-footer__social .icon-badge {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

/* Respect people who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Killing the duration alone would still let a hover lift jump into place. */
  .card:hover,
  .card--link:hover,
  .stat-tile:hover {
    transform: none !important;
  }
}