/* ===========================================================
   Pleiades Housing Alliance — Global Stylesheet
   Palette inspired by the Pleiades star cluster:
   midnight sky, starlight, warm amber & terracotta hope.
   =========================================================== */

:root {
  --midnight: #0d1b3e;
  --midnight-2: #14264f;
  --deep: #1d3461;
  --slate: #2c3e5d;
  --amber: #f5a623;
  --amber-dark: #d98a0b;
  --terracotta: #d96c4a;
  --cream: #fbf7f0;
  --cream-2: #f3ece0;
  --ink: #1a1f2e;
  --muted: #5a6478;
  --line: #e3dccf;
  --white: #ffffff;
  --star: #ffd97a;

  /* Matches .site-header .container (1440px). They were 1180 vs 1440, which made
     the nav bar reach further out than every section below it and left the body
     copy looking stranded in a narrow centre column on wide screens. Reading
     columns (article 720px, form 640px, .section-head 680px) keep their own
     narrower caps on purpose — line length, not page width, governs those. */
  --maxw: 1440px;
  --radius: 16px;
  --radius-lg: 28px;
  --shadow-sm: 0 2px 10px rgba(13, 27, 62, 0.06);
  --shadow: 0 14px 40px rgba(13, 27, 62, 0.12);
  --shadow-lg: 0 30px 70px rgba(13, 27, 62, 0.20);
  --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --serif: "Fraunces", "Georgia", serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { font-family: var(--serif); line-height: 1.12; font-weight: 600; color: var(--midnight); }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber-dark);
  margin-bottom: 14px;
}
.eyebrow.light { color: var(--star); }

.section { padding: 96px 0; }
.section.tight { padding: 64px 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.98rem;
  padding: 14px 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  font-family: var(--font);
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--amber); color: var(--midnight); box-shadow: 0 10px 24px rgba(245, 166, 35, 0.35); }
.btn-primary:hover { background: var(--amber-dark); box-shadow: 0 14px 30px rgba(245, 166, 35, 0.45); }
.btn-ghost { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.45); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.10); border-color: var(--white); }
.btn-dark { background: var(--midnight); color: var(--white); }
.btn-dark:hover { background: var(--deep); }
.btn-lg { padding: 17px 36px; font-size: 1.05rem; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 247, 240, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
/* The header is sticky and 76px tall, so it would sit on top of whatever an anchor
   link jumps to. Hold scroll targets clear of it. Add new anchor ids here. */
#send, #give, #why-we-exist { scroll-margin-top: 96px; }
/* NB: the header row does NOT obey the 1180px article column. Wordmark + 5 links
   + 2 CTA buttons measure ~1334px, which cannot fit in 1180 - 48 padding = 1132px.
   That mismatch was a 234px horizontal overflow on every page at 1280-1600px
   viewports (laptop widths; invisible at 1920 because the centering margin ate it).
   Header chrome is its own layout context, so it gets its own cap. If you add or
   widen anything in the bar, re-measure and move the 1439px breakpoint to match. */
.site-header .container { max-width: 1440px; }
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 76px;
}
.brand { display: flex; align-items: center; gap: 12px; font-family: var(--serif); font-weight: 600; font-size: 1.18rem; color: var(--midnight); }
/* Keep the header wordmark on one line so the nav flex row can't squeeze it into a wrap */
.site-header .brand { flex: none; white-space: nowrap; }
.brand .mark {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  flex: none;
}
.brand .mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.site-footer .brand .mark { background: rgba(255,255,255,0.06); border-radius: 50%; padding: 3px; }
.brand small { display: block; font-family: var(--font); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }

.nav-links { display: flex; align-items: center; gap: 16px; list-style: none; }
.nav-links a { font-size: 0.95rem; font-weight: 500; color: var(--slate); transition: color 0.15s; position: relative; white-space: nowrap; }
.nav-links a:hover, .nav-links a.active { color: var(--midnight); }
.nav-links a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px;
  height: 2px; background: var(--amber); border-radius: 2px;
}
.nav-cta { display: flex; align-items: center; gap: 10px; flex: none; }
.nav-cta .btn { padding: 11px 18px; font-size: 0.9rem; white-space: nowrap; }
/* The header donate button carries two labels in the markup — the full phrase for
   desktop, a short one for phones. Only ever one is rendered (the other is
   display:none, so it is not announced by screen readers either). */
.cta-short { display: none; }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--midnight); margin: 5px 0; transition: 0.25s; border-radius: 2px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: radial-gradient(ellipse at 70% 20%, var(--deep), var(--midnight) 60%);
  color: var(--white);
  overflow: hidden;
  padding: 110px 0 120px;
}
.hero::before,
.page-hero::before {
  /* starfield — shared by the home hero and every interior page header */
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(3px 3px at 20% 30%, rgba(255,255,255,1), transparent),
    radial-gradient(3px 3px at 65% 15%, rgba(255,228,150,1), transparent),
    radial-gradient(2.5px 2.5px at 80% 45%, rgba(255,255,255,1), transparent),
    radial-gradient(2.5px 2.5px at 40% 70%, rgba(255,255,255,0.98), transparent),
    radial-gradient(3px 3px at 90% 80%, rgba(255,228,150,1), transparent),
    radial-gradient(2px 2px at 12% 80%, rgba(255,255,255,0.98), transparent),
    radial-gradient(2.5px 2.5px at 55% 55%, rgba(255,255,255,0.95), transparent),
    /* a few more, a touch smaller so the field reads as scattered starlight, not a pattern */
    radial-gradient(2px 2px at 30% 20%, rgba(255,255,255,0.92), transparent),
    radial-gradient(2px 2px at 48% 40%, rgba(255,255,255,0.9), transparent),
    radial-gradient(2px 2px at 73% 62%, rgba(255,228,150,0.98), transparent),
    radial-gradient(2.5px 2.5px at 85% 24%, rgba(255,255,255,0.98), transparent),
    radial-gradient(2px 2px at 24% 55%, rgba(255,255,255,0.88), transparent),
    radial-gradient(2px 2px at 60% 84%, rgba(255,255,255,0.9), transparent),
    radial-gradient(2px 2px at 6% 45%, rgba(255,255,255,0.92), transparent),
    radial-gradient(2.5px 2.5px at 95% 58%, rgba(255,228,150,0.98), transparent);
  opacity: 1;
  animation: twinkle 6s ease-in-out infinite alternate;
}
/* Dimmed from 0.85-1.0 so these read as distant field stars and the Pleiades cluster
   below is the thing your eye lands on. Raise these two numbers to bring them back. */
@keyframes twinkle { from { opacity: 0.5; } to { opacity: 0.66; } }

/* Sparkling stars — individual twinkling points injected by main.js */
.starlayer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.starlayer .spark {
  position: absolute; border-radius: 50%; background: #fff; opacity: 0;
  box-shadow: 0 0 8px 2px rgba(255,255,255,0.85);
  animation: sparkle 2.6s ease-in-out infinite;
  will-change: opacity, transform;
}
@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(0.2); }
  50%      { opacity: 1; transform: scale(1.35); }
}

/* ---------- The Pleiades (M45) ----------
   The nine named stars, placed by main.js from their real RA/Dec projected onto the
   plane and scaled by true apparent magnitude. The box holds the cluster's actual
   angular extent (60' wide x 36.4' tall) via aspect-ratio, so the shape stays correct
   at any header size — distort that and the Seven Sisters stop being recognisable. */
.pleiades {
  position: absolute;
  left: 6%; top: 6%;
  width: min(300px, 44vw);
  aspect-ratio: 60 / 36.4;
  pointer-events: none;
}
/* The blue reflection nebula the cluster is embedded in. */
.pleiades::before {
  content: "";
  position: absolute; inset: -26%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 52% 56%, rgba(150,185,255,0.17), rgba(120,160,240,0.06) 46%, transparent 72%);
}
.pleiades .pleiad {
  position: absolute;
  border-radius: 50%;
  background: #f2f7ff;              /* hot B-type stars read blue-white, never yellow */
  transform: translate(-50%, -50%); /* sit the star ON its coordinate, not beside it */
  animation: pleiad-shimmer 5.5s ease-in-out infinite alternate;
}
@keyframes pleiad-shimmer {
  from { opacity: 0.80; }
  to   { opacity: 1; }
}

/* Meteor — a single shooting star, fired once by main.js a second after load.
   The head is rotated so it travels along its own X axis, which lets the tail
   simply stream out behind it (to the left) and stay correctly aligned. */
.starlayer .meteor {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.9);
  opacity: 0;
  animation: meteor 1.6s cubic-bezier(0.35, 0.02, 0.3, 1) forwards;
}
.starlayer .meteor::after {
  content: "";
  position: absolute;
  top: 50%; right: 3px;
  width: 170px; height: 2px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(to left, rgba(255,255,255,0.9), rgba(255,224,138,0.35), transparent);
}
@keyframes meteor {
  0%   { opacity: 0; transform: rotate(28deg) translateX(0); }
  12%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(28deg) translateX(620px); }
}

/* The second meteor, mirrored: falls down-and-LEFT. 152deg = 180 - 28, which makes
   the travel vector the exact horizontal mirror of the first while still heading
   downward (a meteor flying upward reads as wrong). The tail, which extends along
   local -X, rotates with it and keeps trailing behind the head. Only the animation
   name is overridden, so the head, tail, duration and easing are all reused. */
.starlayer .meteor.rev { animation-name: meteor-rev; }
@keyframes meteor-rev {
  0%   { opacity: 0; transform: rotate(152deg) translateX(0); }
  12%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(152deg) translateX(620px); }
}

.hero .container { position: relative; z-index: 2; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: center; }

/* Home hero photo, sized up roughly 30% by area (~11% wider, ~17% taller).
   Scoped to .hero so the interior .page-hero photos keep their original size.
   NB: the 980px breakpoint below must re-override both of these, since a
   two-class selector outranks the single-class rule that collapses the grid. */
.hero .hero-grid { grid-template-columns: 1fr 1fr; }
.hero .hero-photo img { min-height: 445px; max-height: 610px; }
.hero h1 { color: var(--white); font-size: clamp(2.4rem, 5vw, 3.7rem); letter-spacing: -0.01em; }
.hero h1 .hl { color: var(--star); }
.hero p.lead { font-size: 1.18rem; color: rgba(255,255,255,0.82); margin: 22px 0 32px; max-width: 36ch; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-lg);
  padding: 34px;
  backdrop-filter: blur(6px);
}
.hero-card h3 { color: var(--white); font-size: 1.25rem; margin-bottom: 18px; }
.hero-stat { display: flex; align-items: baseline; gap: 12px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.10); }
.hero-stat:last-child { border-bottom: none; }
.hero-stat b { font-family: var(--serif); font-size: 1.9rem; color: var(--star); line-height: 1; }
.hero-stat span { font-size: 0.92rem; color: rgba(255,255,255,0.78); }

/* trust bar */
.trustbar { background: var(--midnight-2); color: rgba(255,255,255,0.75); padding: 18px 0; }
.trustbar .container { display: flex; flex-wrap: wrap; gap: 14px 36px; align-items: center; justify-content: center; font-size: 0.9rem; }
.trustbar .item { display: flex; align-items: center; gap: 8px; }
.trustbar svg { width: 18px; height: 18px; color: var(--star); flex: none; }

/* ---------- Section headings ---------- */
.section-head { max-width: 680px; margin-bottom: 54px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); }
.section-head p { color: var(--muted); font-size: 1.1rem; margin-top: 16px; }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: 26px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card .ico {
  width: 54px; height: 54px; border-radius: 14px;
  display: grid; place-items: center; margin-bottom: 20px;
  background: linear-gradient(145deg, var(--cream-2), #fff);
  border: 1px solid var(--line);
}
.card .ico svg { width: 26px; height: 26px; color: var(--terracotta); }
.card h3 { font-size: 1.3rem; margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 0.98rem; }

/* numbered steps */
.step .num {
  font-family: var(--serif); font-size: 1.4rem; font-weight: 600;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--midnight); color: var(--star);
  display: grid; place-items: center; margin-bottom: 18px;
}

/* ---------- Impact stats band ---------- */
.band {
  background: linear-gradient(135deg, var(--midnight), var(--deep));
  color: var(--white);
  position: relative; overflow: hidden;
}
.band::after {
  content: ""; position: absolute; right: -60px; top: -60px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245,166,35,0.22), transparent 70%);
}
.band::before {
  /* subtle starfield, matched to the hero */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(2.5px 2.5px at 8% 28%, rgba(255,255,255,1), transparent),
    radial-gradient(2px 2px at 17% 62%, rgba(255,255,255,0.92), transparent),
    radial-gradient(3px 3px at 27% 38%, rgba(255,228,150,1), transparent),
    radial-gradient(2px 2px at 34% 78%, rgba(255,255,255,0.88), transparent),
    radial-gradient(2.5px 2.5px at 45% 22%, rgba(255,255,255,0.98), transparent),
    radial-gradient(2px 2px at 53% 66%, rgba(255,228,150,0.92), transparent),
    radial-gradient(2.5px 2.5px at 62% 42%, rgba(255,255,255,0.95), transparent),
    radial-gradient(2px 2px at 71% 74%, rgba(255,255,255,0.88), transparent),
    radial-gradient(2.5px 2.5px at 80% 30%, rgba(255,255,255,1), transparent),
    radial-gradient(2px 2px at 88% 58%, rgba(255,228,150,0.95), transparent),
    radial-gradient(2px 2px at 94% 80%, rgba(255,255,255,0.9), transparent),
    radial-gradient(2px 2px at 97% 38%, rgba(255,255,255,0.88), transparent);
  opacity: 1;
  animation: twinkle 7s ease-in-out infinite alternate;
}
.band .container { position: relative; z-index: 2; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; position: relative; z-index: 2; }
/* Five-stat variant. The .stats rule inside the max-width:900px block below comes
   later in the file at equal specificity, so it still wins and collapses this to
   two columns on small screens. Don't move that media query above this line. */
.stats-5 { grid-template-columns: repeat(5, 1fr); gap: 22px; }
.stat b { font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 3.2rem); color: var(--star); display: block; line-height: 1; }
.stat span { color: rgba(255,255,255,0.8); font-size: 0.96rem; margin-top: 10px; display: block; }
.stat .src { color: rgba(255,255,255,0.5); font-size: 0.72rem; margin-top: 10px; letter-spacing: 0.02em; display: block; }

/* ---------- Split feature ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split .visual {
  border-radius: var(--radius-lg);
  min-height: 420px;
  background:
    linear-gradient(160deg, rgba(13,27,62,0.10), rgba(217,108,74,0.18)),
    repeating-linear-gradient(45deg, var(--cream-2), var(--cream-2) 22px, #fff 22px, #fff 44px);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  display: grid; place-items: center;
}
.split .visual .badge {
  background: var(--white); border-radius: var(--radius); padding: 26px 30px;
  box-shadow: var(--shadow); text-align: center; max-width: 78%;
}
.split .visual .badge b { font-family: var(--serif); font-size: 2.4rem; color: var(--terracotta); display: block; }
ul.checks { list-style: none; margin-top: 24px; }
ul.checks li { display: flex; gap: 12px; padding: 10px 0; color: var(--slate); align-items: flex-start; }
ul.checks svg { width: 22px; height: 22px; color: var(--amber-dark); flex: none; margin-top: 2px; }
/* .checks is authored for light sections (slate text). Inside the dark .page-hero
   gradient that renders dark-on-dark, so restate it for that context. */
.page-hero ul.checks li { color: rgba(255, 255, 255, 0.86); }
.page-hero ul.checks svg { color: var(--amber); }

/* ---------- Values list ---------- */
.value { display: flex; gap: 18px; align-items: flex-start; }
.value .vico { width: 46px; height: 46px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--cream-2); border: 1px solid var(--line); }
.value .vico svg { width: 24px; height: 24px; color: var(--midnight); }
.value h3 { font-size: 1.15rem; margin-bottom: 6px; }
.value p { color: var(--muted); font-size: 0.96rem; }

/* ---------- Timeline ---------- */
.timeline { position: relative; margin-top: 30px; }
.timeline::before { content: ""; position: absolute; left: 22px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.tl-item { position: relative; padding: 0 0 36px 64px; }
.tl-item .dot {
  position: absolute; left: 11px; top: 2px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--amber); border: 4px solid var(--cream); box-shadow: 0 0 0 2px var(--amber);
}
.tl-item .phase { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber-dark); }
.tl-item h3 { font-size: 1.3rem; margin: 4px 0 8px; }
.tl-item p { color: var(--muted); }

/* ---------- CTA band ---------- */
.cta {
  background: linear-gradient(135deg, var(--terracotta), var(--amber));
  color: var(--midnight);
  border-radius: var(--radius-lg);
  padding: 64px;
  text-align: center;
  position: relative; overflow: hidden;
}
.cta h2 { color: var(--midnight); font-size: clamp(2rem, 4vw, 2.8rem); }
.cta p { font-size: 1.15rem; max-width: 52ch; margin: 16px auto 30px; color: rgba(26,31,46,0.85); }
.cta .eyebrow { color: var(--midnight); }

/* ---------- Page hero (interior pages) ---------- */
.page-hero {
  background: radial-gradient(ellipse at 75% 10%, var(--deep), var(--midnight) 65%);
  color: var(--white); padding: 80px 0 70px; position: relative; overflow: hidden;
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { color: var(--white); font-size: clamp(2.2rem, 4.5vw, 3.2rem); max-width: 18ch; }
.page-hero p { color: rgba(255,255,255,0.82); font-size: 1.15rem; margin-top: 18px; max-width: 56ch; }

/* Enlarged interior hero photo, opt-in via .hero-lg on the .page-hero section.
   Currently only housing-crisis.html; the other four .page-hero photos keep their
   original size. ~22% wider column and ~21% taller — roughly 45% more area.
   NB: same trap as the .hero rules above — the 980px breakpoint must re-override
   both of these, since a two-class selector outranks the single-class rule that
   collapses the grid on phones. */
.hero-lg .hero-grid { grid-template-columns: 0.9fr 1.1fr; }
.hero-lg .hero-photo img { min-height: 460px; max-height: 630px; }
.breadcrumb { font-size: 0.85rem; color: rgba(255,255,255,0.6); margin-bottom: 18px; }
.breadcrumb a:hover { color: var(--star); }

/* ---------- Prose (privacy etc) ---------- */
.prose { max-width: 780px; }
.prose h2 { font-size: 1.5rem; margin: 40px 0 12px; }
.prose h3 { font-size: 1.15rem; margin: 26px 0 8px; }
.prose p, .prose li { color: var(--slate); margin-bottom: 12px; }
.prose ul { margin: 0 0 16px 22px; }
.prose a { color: var(--terracotta); text-decoration: underline; }
.prose .updated { color: var(--muted); font-size: 0.9rem; margin-bottom: 30px; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 50px; align-items: start; }
.contact-info .info-item { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.contact-info .info-item:last-child { border-bottom: none; }
.contact-info .iico { width: 46px; height: 46px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--midnight); }
.contact-info .iico svg { width: 22px; height: 22px; color: var(--star); }
.contact-info h4 { font-family: var(--font); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.contact-info .info-item a, .contact-info .info-item p { color: var(--ink); font-size: 1.02rem; }
.contact-info .info-item a:hover { color: var(--terracotta); }

form .field { margin-bottom: 18px; }
form label { display: block; font-size: 0.88rem; font-weight: 600; color: var(--slate); margin-bottom: 7px; }
form input, form textarea, form select {
  width: 100%; padding: 13px 16px; border: 1px solid var(--line); border-radius: 12px;
  font-family: var(--font); font-size: 1rem; background: var(--white); color: var(--ink);
  transition: border 0.15s, box-shadow 0.15s;
}
form input:focus, form textarea:focus, form select:focus {
  outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(245,166,35,0.18);
}
form textarea { min-height: 140px; resize: vertical; }
.form-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 38px; box-shadow: var(--shadow-sm); }
.form-note { font-size: 0.85rem; color: var(--muted); margin-top: 10px; }
.form-success { display: none; background: #eaf7ee; border: 1px solid #b8e2c4; color: #1d6b38; padding: 14px 18px; border-radius: 12px; margin-bottom: 18px; font-size: 0.95rem; }

/* ---------- Donate tiers ---------- */
.tier { text-align: center; position: relative; }
.tier.featured { border-color: var(--amber); box-shadow: var(--shadow); }
.tier.featured::before {
  content: "Most impact"; position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--amber); color: var(--midnight); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px;
}
.tier .amount { font-family: var(--serif); font-size: 2.6rem; color: var(--midnight); }
.tier .amount span { font-size: 1rem; color: var(--muted); }
.tier p { color: var(--muted); margin: 10px 0 22px; min-height: 48px; }

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item button {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 22px 0; font-family: var(--serif); font-size: 1.15rem; color: var(--midnight);
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
.faq-item button .chev { transition: transform 0.2s; flex: none; color: var(--amber-dark); }
.faq-item.open button .chev { transform: rotate(180deg); }
.faq-item .answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-item .answer p { padding: 0 0 22px; color: var(--muted); }

/* ---------- Footer ---------- */
.site-footer { background: var(--midnight); color: rgba(255,255,255,0.72); padding: 70px 0 30px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.site-footer h4 { color: var(--white); font-family: var(--font); font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 18px; }
.site-footer a { color: rgba(255,255,255,0.72); font-size: 0.95rem; display: block; padding: 5px 0; transition: color 0.15s; }
.site-footer a:hover { color: var(--star); }
.footer-brand p { font-size: 0.96rem; margin: 16px 0; max-width: 32ch; }
.footer-brand .brand { color: var(--white); }
.footer-brand .brand small { color: rgba(255,255,255,0.55); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12); margin-top: 50px; padding-top: 24px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 0.85rem;
}
.footer-bottom a { display: inline; }
.charity-no { font-size: 0.82rem; color: rgba(255,255,255,0.5); }

/* ---------- Imagery ---------- */
.hero-photo { position: relative; }
.hero-photo img {
  width: 100%; height: 100%; min-height: 380px; max-height: 520px;
  object-fit: cover; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); border: 4px solid rgba(255,255,255,0.10);
}
.hero-photo .float-badge {
  position: absolute; left: -18px; bottom: 26px;
  background: var(--white); color: var(--midnight);
  border-radius: var(--radius); padding: 16px 20px; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 12px; max-width: 240px;
}
.hero-photo .float-badge b { font-family: var(--serif); font-size: 1.7rem; color: var(--terracotta); line-height: 1; }
.hero-photo .float-badge span { font-size: 0.82rem; color: var(--muted); line-height: 1.3; }
.hero-photo .float-badge .pulse { width: 12px; height: 12px; border-radius: 50%; background: var(--amber); flex: none; box-shadow: 0 0 0 0 rgba(245,166,35,0.6); animation: pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(245,166,35,0.55);} 70%{box-shadow:0 0 0 12px rgba(245,166,35,0);} 100%{box-shadow:0 0 0 0 rgba(245,166,35,0);} }

/* Photo used inside split .visual — replaces the patterned placeholder */
.visual.photo { padding: 0; background: none; border: none; }
.visual.photo img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.visual.photo { position: relative; }
.visual.photo .badge { position: absolute; left: 22px; bottom: 22px; margin: 0; max-width: 70%; }

/* generic rounded image */
.img-round { border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%; object-fit: cover; }

/* ---------- Video ---------- */
.video-section { background: var(--midnight); color: #fff; position: relative; overflow: hidden; }
.video-section::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(2px 2px at 20% 25%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.5px 1.5px at 75% 30%, rgba(255,217,122,0.8), transparent),
    radial-gradient(1.5px 1.5px at 60% 70%, rgba(255,255,255,0.5), transparent);
  opacity: 0.7;
}
.video-section .container { position: relative; z-index: 2; }
.video-wrap {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,0.14);
  background: #000;
}
.video-wrap video { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.video-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 50px; align-items: center; }
.video-section h2 { color: #fff; }
.video-section p { color: rgba(255,255,255,0.82); }

@media (max-width: 980px) {
  .video-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- "The form is over there" pointer (donation heroes) ---------- */
.form-pointer {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 28px;
  color: var(--amber); font-weight: 600; font-size: 1.02rem; text-decoration: none;
}
.form-pointer:hover { color: var(--amber-dark); }
.form-pointer svg { width: 34px; height: 34px; flex: none; animation: pointer-nudge 1.8s ease-in-out infinite; }
@keyframes pointer-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(9px); } }
/* Below 980px .hero-grid collapses to one column and the form moves BELOW this copy,
   so a right-pointing arrow would aim at empty space. Point it down instead. The static
   transform is repeated here so the rotation survives when the animation is disabled. */
@media (max-width: 980px) {
  .form-pointer svg { transform: rotate(90deg); animation-name: pointer-nudge-down; }
}
@keyframes pointer-nudge-down { 0%, 100% { transform: rotate(90deg) translateX(0); } 50% { transform: rotate(90deg) translateX(9px); } }
@media (prefers-reduced-motion: reduce) { .form-pointer svg { animation: none; } }

/* ---------- Stat spotlight + bar chart (Housing Crisis) ---------- */
.spotlight-num {
  font-family: var(--serif); font-weight: 600; line-height: 0.9; letter-spacing: -0.02em;
  font-size: clamp(4.5rem, 13vw, 8.5rem); color: var(--terracotta); margin: 6px 0 4px;
}
.spotlight-cap { font-size: 1.12rem; color: var(--slate); max-width: 30ch; }
.spotlight-cap b { color: var(--midnight); font-weight: 700; }
.spotlight-src { font-size: 0.8rem; color: var(--muted); margin-top: 14px; max-width: 34ch; }

.barchart { display: grid; gap: 24px; }
.bar-row .bar-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 9px; }
.bar-row .bar-name { font-size: 0.96rem; color: var(--slate); font-weight: 500; }
.bar-row .bar-val { font-family: var(--serif); font-size: 1.45rem; font-weight: 600; color: var(--midnight); line-height: 1; }
.bar-track { height: 18px; background: var(--cream-2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.bar-fill {
  height: 100%; border-radius: 999px; transform-origin: left;
  background: linear-gradient(90deg, var(--terracotta), var(--amber));
  animation: growbar 1.1s cubic-bezier(0.19, 1, 0.22, 1) both;
}
.bar-fill.muted { background: linear-gradient(90deg, var(--slate), var(--deep)); opacity: 0.5; }
@keyframes growbar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .bar-fill, .hero::before, .page-hero::before, .band::before { animation: none; }
  .starlayer .spark { animation: none; opacity: 0.7; transform: none; }
  /* A streak flying across the screen is precisely the motion this query exists
     to suppress. Don't soften it, drop it. */
  .starlayer .meteor { display: none; }
  /* The cluster is the brand motif, not decoration, so it stays visible. Just hold it still. */
  .pleiades .pleiad { animation: none; opacity: 1; }
}

.footnote { font-size: 0.82rem; color: var(--muted); margin-top: 34px; max-width: 72ch; }

/* ---------- Smooth cross-page view transitions (progressive enhancement) ---------- */
@view-transition { navigation: auto; }
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
  animation-duration: 0.25s;
  animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-grid, .split, .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  /* The scoped home-hero rules above are two-class selectors, so they'd otherwise
     beat the single-class collapse on the line above and keep the hero in two
     columns on phones. Re-state them here and restore the original photo size. */
  .hero .hero-grid { grid-template-columns: 1fr; }
  .hero .hero-photo img { min-height: 380px; max-height: 520px; }
  .hero-lg .hero-grid { grid-template-columns: 1fr; }
  .hero-lg .hero-photo img { min-height: 380px; max-height: 520px; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 36px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .split .visual { min-height: 300px; }
}
/* Collapse the links into the hamburger below 1440px. The full desktop row needs
   ~1334px of content box, and the header container only reaches that at >=1440px
   viewport width — below it the links overflow. Measured, not guessed; see the NB
   above .site-header .container. */
@media (max-width: 1439px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .nav-links.open {
    display: flex; flex-direction: column; position: absolute; top: 76px; left: 0; right: 0;
    background: var(--cream); padding: 16px 24px; gap: 6px; border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow); z-index: 60;
  }
  .nav-links.open a { padding: 12px 0; width: 100%; border-bottom: 1px solid var(--line); }
  .nav-links.open a.active::after { display: none; }
}
/* The secondary CTA drops at a narrower width than the links do. Once the menu button
   is showing, the wordmark + both buttons + the toggle still fit comfortably down to
   ~1280px, so keep "Become a founding donor" visible that far — it is the highest-value
   link in the bar. Below here only the primary donate button stays. */
@media (max-width: 1279px) {
  .nav-cta .btn:not(.btn-primary) { display: none; }
}
@media (max-width: 680px) {
  .section { padding: 64px 0; }
  .brand small { display: none; }
  .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; }
  .cta { padding: 44px 26px; }
  .hero { padding: 70px 0 80px; }
}
/* Narrow phones: the wordmark can't fit beside the logo, donate button, and menu toggle
   (that config needs ~610px), so below here show the logo alone and tighten the row so it
   clears down to ~320px. */
/* Phones. Measured 2026-07-20: "Help build a home" renders at 196px — wider than the
   entire 195px wordmark — so it, not the logo or the brand text, was what left no room
   in the bar. Shortening the CTA to "Donate" (114px) is what pays for both a larger
   logo and visible brand text here. Widths: wordmark full 195 / "Pleiades" 64 / PHA 33. */
@media (max-width: 640px) {
  .site-header .brand .mark { width: 58px; height: 58px; }
  .site-header .cta-full { display: none; }
  .site-header .cta-short { display: inline; }
  .site-header .nav { gap: 10px; }
  .site-header .nav-cta .btn { padding: 10px 15px; }
  /* Full name on phones. It only fits by WRAPPING into a stacked lockup — measured,
     one line is 236px and never fits, not even at 0.8rem. Note .brand is flex:none,
     so it sizes to max-content and will NOT wrap on white-space alone: the max-width
     below is what actually forces the break. Height is ~50px inside the 76px bar. */
  .site-header .brand { flex: 1 1 auto; min-width: 0; white-space: normal; }
  .site-header .brand > span:not(.mark) {
    white-space: normal;
    min-width: 0;
    font-size: 0.90rem;
    line-height: 1.15;
    overflow-wrap: break-word;
  }
}
/* Smallest phones (320px — iPhone SE 1st gen and older Androids): even the logo +
   donate button + toggle overran the row. Measured 257px available vs 265px used,
   i.e. a small horizontal scroll on every page. Tighten the bar itself rather than
   .container padding, so the header stays aligned with the body content below it. */
/* Runs to 374, not 360, on purpose. TWO cliffs meet at this boundary and they compound:
   relaxing the gaps and button padding adds ~19px of width for 1px more room, and the
   wordmark simultaneously steps up from 80px/0.80rem to 110px/0.90rem. Measured, that
   combination overflowed the 365-374 band by 8px. Holding the tight styles until 375 —
   the width where the larger wordmark is measured to fit — clears the whole range.
   If you change either step, re-measure the boundary, not just round numbers. */
@media (max-width: 374px) {
  .site-header .nav { gap: 6px; }
  .site-header .nav-cta { gap: 6px; }
  .site-header .nav-cta .btn { padding: 10px 11px; font-size: 0.85rem; }
  /* Deliberately NOT tightening .nav-toggle padding here. Doing so narrows the tap
     target to 34px wide — still above the WCAG 2.2 AA 24x24 floor, but under the
     44/48px platform guideline and inconsistent with the 40px toggle used at every
     other width. The row clears 320px without it (~9px slack), so the trade isn't
     needed. Take space from the button padding above before touching the toggle. */
  /* Smallest phones drop the wordmark a step so three lines stay comfortable. Width is
     handled by the flex rule above, not a max-width — only the type size steps here. */
  .site-header .brand > span:not(.mark) { font-size: 0.80rem; }
}