/*
  Site styles: base elements plus the reusable components
  (header, buttons, hero, cards, callout, testimonials, footer).
  The style guide and the real site both load this file, so whatever
  you approve in the style guide is exactly what ships.
*/

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

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

body {
  margin: 0;
  background: var(--cream-100);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
}

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-4);
  /* SOFT rounds Fraunces' serifs slightly, matching the one-pager's warmth */
  font-variation-settings: "SOFT" 50;
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }

p { margin: 0 0 var(--space-4); }

a { color: var(--forest-900); text-underline-offset: 0.2em; }
a:hover { color: var(--brick-700); }

/* A visible focus ring for keyboard users; never remove this */
:focus-visible {
  outline: 3px solid var(--brick-700);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-forest :focus-visible { outline-color: var(--sun-300); }

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -3rem;
  background: var(--forest-900);
  color: var(--on-forest);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  z-index: 10;
}
.skip-link:focus { top: var(--space-4); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-space); }
/* Cream sections that follow each other get a hairline between them,
   so they read as separate without needing different backgrounds */
.section:not(.section--forest) + .section:not(.section--forest) { border-top: 1px solid var(--cream-200); }
.section--forest { background: var(--forest-900); color: var(--on-forest); }
.section--forest h2, .section--forest h3 { color: var(--on-forest); }

/* Short line above the hero headline. Use it in the hero ONLY:
   a small label over every heading is a template tell. */
.eyebrow {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--brick-700);
  margin-bottom: var(--space-3);
}
.on-forest .eyebrow { color: var(--sun-300); }

.lede { font-size: var(--text-lg); color: var(--ink-muted); max-width: var(--prose-max); }

.rule-brick { height: 4px; background: var(--brick-500); border: 0; margin: 0; }

/* ---------- Header ---------- */
.site-header { background: var(--forest-900); color: var(--on-forest); }
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
}
.wordmark { text-decoration: none; color: inherit; line-height: 1.2; }
.wordmark__name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  font-variation-settings: "SOFT" 50;
}
.wordmark__tag { display: block; font-size: var(--text-xs); color: var(--on-forest-muted); }
.wordmark:hover { color: inherit; }

/* ---------- Icons (Phosphor, from assets/icons.svg) ----------
   Icons take the color of the text around them (currentColor),
   so the same icon works on cream and on green. */
.icon {
  width: 1.25em;
  height: 1.25em;
  fill: currentColor;
  flex: none;
  vertical-align: -0.2em;
}
.icon--feature { width: 2.75rem; height: 2.75rem; color: var(--forest-900); }
.on-forest .icon--feature { color: var(--sun-300); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px; /* comfortable tap target on phones */
  padding: var(--space-3) var(--space-6);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  font: 600 var(--text-base)/1.2 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn--primary { background: var(--forest-900); color: var(--on-forest); }
.btn--primary:hover { background: var(--forest-700); color: var(--on-forest); }
.btn--secondary { background: transparent; color: var(--forest-900); border-color: var(--forest-900); }
.btn--secondary:hover { background: var(--forest-900); color: var(--on-forest); }

/* On dark green, the primary button flips to cream */
.on-forest .btn--primary { background: var(--cream-100); color: var(--forest-900); }
.on-forest .btn--primary:hover { background: var(--cream-50); color: var(--forest-900); }
.on-forest .btn--secondary { color: var(--on-forest); border-color: var(--on-forest); }
.on-forest .btn--secondary:hover { background: var(--on-forest); color: var(--forest-900); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---------- Hero: headline over the render ---------- */
.hero-overlay {
  position: relative;
  min-height: min(80vh, 44rem);
  display: grid;
  align-items: end;
  color: #fff;
  isolation: isolate;
}
.hero-overlay__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
/* The scrim: a dark gradient behind the text so it stays readable
   (WCAG AA) no matter how bright that part of the image is. */
.hero-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgb(20 38 30 / 0.94) 0%, rgb(20 38 30 / 0.8) 45%, rgb(20 38 30 / 0) 82%);
}
.hero-overlay__content { padding-block: var(--space-16) var(--space-12); }
.hero-overlay h1 { color: #fff; max-width: 18ch; }
.hero-overlay p { font-size: var(--text-lg); max-width: 38rem; color: #EEF0EA; }
/* Over a photo, small yellow caps were hard to read; cream is steadier */
.hero-overlay .eyebrow { color: var(--on-forest); font-size: var(--text-sm); }

/* Desktop: fade from the left only, so the right side of the painting
   stays clear. Phones are too narrow for side-by-side, so below 48rem
   it falls back to the bottom fade above. */
@media (min-width: 48rem) {
  .hero-overlay--side { align-items: center; }
  /* The fade stays dark under the whole text column, then eases out over the
     next 44rem. It's measured from where the text actually ends (the
     container's left edge + the 34rem text width), not a percentage of the
     screen, so the text stays readable on narrow laptops and tablets too. */
  .hero-overlay--side {
    --hero-text-end: calc(max(0px, (100% - var(--content-max)) / 2) + var(--gutter) + 34rem);
  }
  .hero-overlay--side::before {
    background: linear-gradient(to right,
      rgb(20 38 30 / 0.92) 0%,
      rgb(20 38 30 / 0.82) calc(var(--hero-text-end) + 1rem),
      rgb(20 38 30 / 0.68) calc(var(--hero-text-end) + 8rem),
      rgb(20 38 30 / 0.48) calc(var(--hero-text-end) + 16rem),
      rgb(20 38 30 / 0.28) calc(var(--hero-text-end) + 25rem),
      rgb(20 38 30 / 0.12) calc(var(--hero-text-end) + 34rem),
      rgb(20 38 30 / 0) calc(var(--hero-text-end) + 44rem));
  }
  .hero-overlay--side .hero-overlay__content { padding-block: var(--space-16); }
  .hero-overlay--side .hero-overlay__content > * { max-width: 34rem; }
}
/* Phones: the text fills nearly the whole hero, so the bottom fade
   can't go fully clear or the headline lands on bright sky. Keep it
   dark all the way up, a touch lighter at the top. */
@media (max-width: 47.99rem) {
  .hero-overlay--side::before {
    background: linear-gradient(to top, rgb(20 38 30 / 0.94) 0%, rgb(20 38 30 / 0.86) 50%, rgb(20 38 30 / 0.72) 80%, rgb(20 38 30 / 0.6) 100%);
  }
}


/* ---------- "Concept art" flag ----------
   Every image on the site is concept art, so every image carries this
   flag on the image itself. Wrap the <img> in .concept and put a
   .concept__flag inside the wrapper. */
.concept { position: relative; }
.concept__flag {
  position: absolute;
  right: var(--space-3);
  top: var(--space-3);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  background: rgb(251 248 241 / 0.95);
  color: var(--forest-900);
  font: 600 var(--text-sm)/1.2 var(--font-body);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.25);
  pointer-events: none;
}
.concept__flag svg { width: 16px; height: 16px; flex: none; }
/* In the full-width hero, line the flag up with the page's content edge */
.hero-overlay > .concept__flag {
  right: max(var(--gutter), calc((100% - var(--content-max)) / 2 + var(--gutter)));
  top: var(--space-4);
}

/* ---------- Feature cards ---------- */
.card-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.feature-card { margin: 0; }
.feature-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.feature-card h3 { margin: var(--space-4) 0 var(--space-1); }
.feature-card p { color: var(--ink-muted); font-size: var(--text-sm); margin: 0; }

/* ---------- Callout box ---------- */
.callout {
  background: var(--forest-900);
  color: var(--on-forest);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}
.callout h3 {
  color: var(--on-forest);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgb(245 239 227 / 0.35);
}
.callout ul { margin: 0; padding-left: 1.2em; }
.callout li + li { margin-top: var(--space-2); }
.callout__note { font-size: var(--text-xs); color: var(--on-forest-muted); margin: var(--space-4) 0 0; }

/* ---------- Testimonials ---------- */
.quote-featured {
  margin: 0;
  padding: var(--space-8) 0;
  max-width: 48rem;
}
.quote-featured blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.35;
  font-variation-settings: "SOFT" 100;
}

/* Masonry-style columns: each card takes only the height its quote needs,
   and cards stack down each column, so there are no ragged gaps. */
.testimonial-grid {
  columns: 3 17rem;
  column-gap: var(--space-4);
}
.testimonial-grid .testimonial-card {
  break-inside: avoid;
  margin-bottom: var(--space-4);
}
.testimonial-card {
  margin: 0;
  background: var(--cream-50);
  border: 1px solid var(--cream-200);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}
.testimonial-card blockquote { margin: 0 0 var(--space-4); }
.testimonial-card blockquote p:last-child { margin: 0; }

.credit { font-size: var(--text-sm); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.credit__name { font-weight: 600; }

.tag {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--forest-100);
  color: var(--forest-900);
  font-size: var(--text-xs);
  font-weight: 600;
}

/* Supporter count, written as a sentence rather than a row of big numbers */
.support-count {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: 1.4;
  max-width: 40rem;
  font-variation-settings: "SOFT" 50;
}
.support-count strong { font-weight: 600; }

/* ---------- Footer ---------- */
.site-footer { background: var(--forest-900); color: var(--on-forest); }
.site-footer .container { padding-block: var(--space-12); }
.site-footer h2 { font-size: var(--text-h3); margin-bottom: var(--space-3); }
.site-footer a { color: var(--on-forest); }
.site-footer a:hover { color: var(--sun-300); }
.site-footer__fine { font-size: var(--text-xs); color: var(--on-forest-muted); margin-top: var(--space-8); }

/* Respect visitors who've asked their device for less motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* =========================================================
   Home page layout
   ========================================================= */


/* Reading column. Text stays on the page's one left edge; only its width
   is limited, so lines stay comfortable to read. (Never center a column:
   the left edge should stay put as you scroll.) */
.prose > * { max-width: var(--prose-max); }

/* Letter with a real photo of its writer. Phones: photo first, then the
   letter. Desktop: letter on the left (so the heading keeps the page's left
   edge), photo on the right, cropped to a portrait shape around the family. */
.letter-layout { display: grid; gap: var(--block-space); }
.letter-photo { margin: 0; }
.letter-photo img { width: 100%; border-radius: var(--radius-md); }
.letter-photo figcaption { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--ink-muted); }
@media (min-width: 56rem) {
  .letter-layout { grid-template-columns: 1.6fr 1fr; align-items: start; }
  .letter-photo { grid-column: 2; grid-row: 1; }
  .letter-photo img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 50%; }
  .letter { grid-column: 1; grid-row: 1; }
}

/* Signed letter: plain paragraphs, then the name set in Fraunces
   with the role on its own smaller line underneath. */
.letter .letter__close { margin-top: var(--space-6); margin-bottom: var(--space-1); }
.letter .letter__sign {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-variation-settings: "SOFT" 50;
  margin: 0;
}
.letter .letter__sign span {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--ink-muted);
  margin-top: var(--space-1);
}

/* Small inline source link after a fact */
.source {
  font-size: var(--text-xs);
  color: var(--ink-muted);
  white-space: nowrap;
}
.source::before { content: "("; }
.source::after { content: ")"; }

/* Hero: the line stating the ask */
.hero-ask {
  font-size: var(--text-lg) !important;
  font-weight: 600;
  line-height: 1.45;
  color: var(--on-forest) !important;
}

/* Placeholders: things the team still needs to supply.
   Dashed brick box so nobody mistakes them for finished copy. */
.placeholder {
  border: 2px dashed var(--brick-500);
  border-radius: var(--radius-md);
  background: var(--cream-50);
  color: var(--ink);
  padding: var(--space-6);
}
.placeholder__title { font-weight: 700; color: var(--brick-700); }
.placeholder p:last-child { margin-bottom: 0; }
mark.needed {
  background: #F3DCD2;
  color: var(--brick-700);
  font-weight: 600;
  padding: 0 0.25em;
  border-radius: 3px;
}

/* Plan: one big painting with text beside it */
/* Painting and text start at the same top edge */
.feature { display: grid; gap: var(--space-8); align-items: start; }
.feature__media img { width: 100%; border-radius: var(--radius-md); }
@media (min-width: 56rem) {
  .feature { grid-template-columns: 1.2fr 1fr; align-items: stretch; }
  /* On desktop the painting fills the text's height (cropping its edges a
     little) so the two columns start and end together */
  .feature__media, .feature__media img { height: 100%; }
  .feature__media img { object-fit: cover; }
}

.plan-figure { margin: var(--block-space) 0 0; }
.plan-figure img { width: 100%; border-radius: var(--radius-md); border: 1px solid var(--cream-200); }

/* Two smaller paintings side by side, same size, aligned to the page edges */
.thumbs { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.thumbs img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-md); }
@media (min-width: 40rem) {
  .thumbs { grid-template-columns: 1fr 1fr; }
}

.cost { margin-top: var(--block-space); }
.callout--light { background: var(--forest-100); color: var(--ink); }
.callout--light h3 { color: var(--forest-900); border-bottom-color: rgb(30 58 47 / 0.2); }
.callout--light p:last-child { margin-bottom: 0; }

/* Support section on green */
.support-lede { font-size: var(--text-lg); max-width: var(--prose-max); }
/* The count: plain sans text with the numbers picked out in sun yellow,
   then a divider, so it reads as a fact rather than another quote */
.section--forest .support-count {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--on-forest-muted);
  padding-bottom: var(--space-8);
  margin-bottom: var(--space-8);
  border-bottom: 1px solid rgb(245 239 227 / 0.2);
  max-width: none;
}
.section--forest .support-count strong { color: var(--sun-300); font-weight: 700; }
.section--forest .quote-featured { padding-top: 0; }
.section--forest .testimonial-card { color: var(--ink); }
.section--forest .quote-featured blockquote { color: var(--on-forest); }
.section--forest .quote-featured .credit { color: var(--on-forest-muted); }
.section--forest .quote-featured .tag { background: rgb(245 239 227 / 0.15); color: var(--on-forest); }

.test-mode-note {
  display: inline-block;
  background: var(--sun-300);
  color: var(--forest-900);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
}

/* Neighbor questions: tap a question to open its answer */
.faq { margin-top: var(--space-6); border-top: 1px solid var(--cream-200); }
.faq details { border-bottom: 1px solid var(--cream-200); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-variation-settings: "SOFT" 50;
}
.faq summary::-webkit-details-marker { display: none; }
/* The "/ ''" part gives the symbol empty alt text, so screen readers don't
   read "plus" or "minus" (they already announce expanded/collapsed).
   Browsers that don't understand it fall back to the line before. */
.faq summary::after {
  content: "+";
  content: "+" / "";
  font-family: var(--font-body);
  font-size: 1.5rem;
  color: var(--brick-500);
  flex: none;
}
.faq details[open] summary::after { content: "\2212"; content: "\2212" / ""; }
.faq details p { padding-bottom: var(--space-4); margin: 0; }

/* Street labels on the layout image */
.map-label {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%) rotate(var(--r));
  background: var(--forest-900);
  color: var(--on-forest);
  font: 600 clamp(0.625rem, 0.5rem + 0.5vw, 0.8125rem)/1.2 var(--font-body);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
}
.map-label--homes { background: var(--cream-50); color: var(--ink); border: 1px solid var(--cream-200); }

/* =========================================================
   "Weigh in" form
   ========================================================= */
.form-card {
  /* Sage, not cream, so the form reads as separate from the testimonial cards */
  background: var(--forest-100);
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-6), 5vw, var(--space-12));
  margin: var(--block-space) 0 0;
  scroll-margin-top: var(--space-6);
}
.form-card h3 { color: var(--forest-900) !important; font-size: var(--text-h2); }
.form-card__lede { color: var(--ink-muted); margin-bottom: var(--space-8); }

.field { border: 0; padding: 0; margin: 0 0 var(--space-6); min-width: 0; }
.field > label, .field legend { display: block; font-weight: 600; margin-bottom: var(--space-2); padding: 0; }
.field__hint { font-weight: 400; color: var(--ink-muted); }
.help { font-size: var(--text-sm); color: var(--ink-muted); margin: var(--space-2) 0 0; }
.error { font-size: var(--text-sm); color: var(--brick-700); font-weight: 600; margin: var(--space-2) 0 0; }

.form-card input[type="text"],
.form-card input[type="email"],
.form-card textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid #B9B2A3;
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}
.form-card textarea { resize: vertical; }
.form-card input:focus-visible, .form-card textarea:focus-visible { outline: 3px solid var(--forest-700); outline-offset: 1px; }
/* Only flag a field as wrong after someone has interacted with it */
.form-card input:user-invalid, .form-card textarea:user-invalid { border-color: var(--brick-700); border-width: 2px; }

.checks { display: grid; gap: var(--space-2); }
.checks--inline { display: flex; gap: var(--space-6); }
.checks label, .check-line { display: flex; gap: var(--space-3); align-items: flex-start; line-height: 1.4; cursor: pointer; }
.check-line { margin-bottom: var(--space-4); }
.form-card input[type="radio"], .form-card input[type="checkbox"] {
  width: 1.25rem; height: 1.25rem; margin: 0.1rem 0 0; flex: none; accent-color: var(--forest-900);
}

/* The first question as two big tappable cards */
.choice-cards { display: grid; gap: var(--space-3); }
@media (min-width: 34rem) { .choice-cards { grid-template-columns: 1fr 1fr; } }
.choice-card {
  display: flex; align-items: center; gap: var(--space-3);
  border: 2px solid #C9D3C4;
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: #fff;
  font-weight: 600;
  cursor: pointer;
}
.choice-card:has(input:checked) { border-color: var(--forest-900); background: #fff; box-shadow: inset 0 0 0 1px var(--forest-900); }

.btn--submit { margin-top: var(--space-4); }
.form-status { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--brick-700); font-weight: 600; }
.form-status:empty { display: none; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-done:focus { outline: none; }
.form-done h3 { margin-bottom: var(--space-4); }
.test-payload { margin-top: var(--space-6); font-size: var(--text-sm); }
.test-payload summary { cursor: pointer; font-weight: 600; color: var(--brick-700); }
.test-payload pre { white-space: pre-wrap; background: #fff; border: 1px solid var(--cream-200); padding: var(--space-3); border-radius: var(--radius-sm); }

.faq-cta { margin-top: var(--space-8); }
/* The form card sits inside the green section, but it's cream itself,
   so switch buttons and focus rings back to their on-cream versions */
.form-card .btn--primary { background: var(--forest-900); color: var(--on-forest); }
.form-card .btn--primary:hover { background: var(--forest-700); color: var(--on-forest); }
.form-card :focus-visible { outline-color: var(--brick-700); }
.form-card a { color: var(--forest-900); }

/* Full-width form: the connection checkboxes run in two columns on wide screens */
@media (min-width: 48rem) {
  .js-connection { grid-template-columns: 1fr 1fr; column-gap: var(--space-8); }
}

/* Full-width text sections: larger body text and a little more line spacing,
   so long lines stay easy to follow back to the left edge */
.section--wide-text p { font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.25rem); line-height: 1.7; }
.section--wide-text .source { font-size: var(--text-sm); }

.js-turnstile:not(:empty) { margin: var(--space-2) 0 var(--space-4); }