/*
  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; }
  .hero-overlay--side::before {
    background: linear-gradient(to right, rgb(20 38 30 / 0.92) 0%, rgb(20 38 30 / 0.82) 38%, rgb(20 38 30 / 0.35) 58%, rgb(20 38 30 / 0) 72%);
  }
  .hero-overlay--side .hero-overlay__content { padding-block: var(--space-16); }
  .hero-overlay--side .hero-overlay__content > * { max-width: 34rem; }
}


/* ---------- "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); }

/* 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-base) !important; 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 */
.feature { display: grid; gap: var(--space-8); align-items: center; }
.feature__media img { width: 100%; border-radius: var(--radius-md); }
@media (min-width: 56rem) {
  .feature { grid-template-columns: 1.4fr 1fr; }
}

.plan-figure { margin: var(--block-space) 0 0; }
.plan-figure img { width: 100%; border-radius: var(--radius-md); border: 1px solid var(--cream-200); }
.plan-figure figcaption { font-size: var(--text-sm); color: var(--ink-muted); margin-top: var(--space-3); }

/* 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; }
.faq summary::after {
  content: "+";
  font-family: var(--font-body);
  font-size: 1.5rem;
  color: var(--brick-500);
  flex: none;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding-bottom: var(--space-4); margin: 0; }

/* Street labels on the layout image */
.plan-map { position: relative; }
.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); }