/* ============================================================
   ANOU FOUNDATION PAGES (2026)
   Shared design system for /donate and /amazigh-symbols-pdf.

   These two pages were handed off as a single design system
   (see design_handoff_anou_web_pages/README.md) and deliberately
   run on their own tokens: Bree Serif + Hanken Grotesk type and a
   deeper blue (#3157B4) than the marketplace's --anou-blue.
   Everything is scoped under .fnd so nothing here leaks into the
   rest of the site, and base.css can't reach in either.

   Prefixes:  .fnd-  shared shell / type / buttons
              .ax-   taxonomy download page
              .dn-   donate page
   ============================================================ */

.fnd {
  --fnd-blue:      #3157B4;
  --fnd-blue-dark: #24418C;
  --fnd-chip:      #C9D4EE;
  --fnd-band:      #F5F5F2;
  --fnd-ink:       #3B3B38;
  --fnd-body:      #565651;
  --fnd-muted:     #75756E;
  --fnd-faint:     #98988F;
  --fnd-rule:      #E3E3DC;

  --fnd-display: 'Bree Serif', Georgia, serif;
  --fnd-ui: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;

  background: #FFFFFF;
  color: var(--fnd-ink);
  font-family: var(--fnd-ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.fnd a { color: var(--fnd-blue); text-decoration: none; }
.fnd a:hover { color: var(--fnd-blue-dark); text-decoration: underline; }

/* These are resets, not styling — :where() drops them to near-zero specificity so
   every component rule below wins. Written as `.fnd p` they outranked every
   single-class margin in this file and flattened the whole vertical rhythm. */
:where(.fnd) p { margin: 0; }
:where(.fnd) img { max-width: 100%; }

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

/* ---------- shell ---------- */

.fnd-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}

.fnd-band {
  background: var(--fnd-band);
  padding: 72px 32px;
}

.fnd-band-inner {
  max-width: 1120px;
  margin: 0 auto;
}

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

.fnd-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--fnd-muted);
  margin: 0 0 16px;
}

.fnd-eyebrow-blue { color: var(--fnd-blue); margin-bottom: 12px; }

.fnd-h1 {
  font-family: var(--fnd-display);
  font-weight: 400;
  color: var(--fnd-blue);
  font-size: 46px;
  line-height: 1.1;
  margin: 0 0 20px;
  text-wrap: balance;
}

.fnd-h2 {
  font-family: var(--fnd-display);
  font-weight: 400;
  color: var(--fnd-ink);
  font-size: 32px;
  line-height: 1.2;
  margin: 0 0 18px;
  text-wrap: balance;
}

.fnd-lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--fnd-body);
  margin: 0 0 24px;
  text-wrap: pretty;
}

.fnd-copy {
  font-size: 16px;
  line-height: 1.65;
  color: var(--fnd-body);
  text-wrap: pretty;
}

/* ---------- buttons ----------
   Every rule here is qualified with `.fnd ` so it outranks the `.fnd a` link
   colour above — several of these are anchors, and without the extra class
   they render blue-on-blue. */

.fnd .fnd-btn {
  display: inline-block;
  background: var(--fnd-blue);
  color: #FFFFFF;
  font-family: var(--fnd-ui);
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 14px;
  padding: 14px 28px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.fnd .fnd-btn:hover { background: var(--fnd-blue-dark); color: #FFFFFF; text-decoration: none; }

.fnd .fnd-btn-outline {
  display: inline-block;
  border: 2px solid var(--fnd-blue);
  background: transparent;
  color: var(--fnd-blue);
  font-family: var(--fnd-ui);
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 13.5px;
  padding: 12px 24px;
  border-radius: 4px;
  cursor: pointer;
}

.fnd .fnd-btn-outline:hover { background: var(--fnd-blue); color: #FFFFFF; text-decoration: none; }

/* Full-width checkout button (both pages) */
.fnd .fnd-btn-pay {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--fnd-blue);
  color: #FFFFFF;
  font-family: var(--fnd-ui);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.04em;
  padding: 16px 0;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.fnd .fnd-btn-pay:hover { background: var(--fnd-blue-dark); color: #FFFFFF; text-decoration: none; }
.fnd .fnd-btn-pay[disabled] { background: var(--fnd-faint); cursor: progress; }

/* Amount chips — shared by the taxonomy presets and the donate presets/toggle */
.fnd-chip {
  border-radius: 4px;
  border: 1px solid var(--fnd-chip);
  background: #FFFFFF;
  color: var(--fnd-blue);
  font-family: var(--fnd-ui);
  font-weight: 700;
  cursor: pointer;
}

.fnd-chip:hover { border-color: var(--fnd-blue); }

.fnd-chip[aria-pressed="true"] {
  background: var(--fnd-blue);
  border-color: var(--fnd-blue);
  color: #FFFFFF;
}

.fnd-trust {
  text-align: center;
  margin-top: 12px;
  font-size: 12px;
  color: var(--fnd-faint);
  line-height: 1.5;
}

.fnd-error {
  margin-top: 10px;
  font-size: 13px;
  color: #ef4444;
  text-align: center;
}

/* A symbol glyph from the taxonomy. The background-image is set inline per
   glyph; this only reserves the box so nothing shifts while it paints. */
.fnd-glyph {
  display: block;
  flex: none;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

/* ============================================================
   TAXONOMY DOWNLOAD PAGE  (/amazigh-symbols-pdf)
   ============================================================ */

.ax-hero {
  max-width: 1120px;
  margin: 0 auto;
  padding: 48px 32px 64px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}

.ax-stats {
  display: flex;
  gap: 24px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--fnd-muted);
  margin-bottom: 32px;
}

.ax-stats strong {
  color: var(--fnd-ink);
  font-size: 18px;
  font-family: var(--fnd-display);
  font-weight: 400;
}

.ax-poster-frame { position: relative; }

/* Faint scatter of symbol glyphs behind the poster. Decorative only —
   built by amazigh_symbols.js, and absent without JS by design. */
.ax-poster-backdrop {
  position: absolute;
  inset: -24px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: center;
  justify-items: center;
  opacity: 0.25;
  pointer-events: none;
}

.ax-poster-backdrop .fnd-glyph { width: 30px; height: 30px; }

.ax-poster {
  position: relative;
  width: 100%;
  /* height:auto is load-bearing — the width/height attributes on the <img> are
     there to reserve space, and without this the height attribute wins. */
  height: auto;
  border-radius: 6px;
  box-shadow: 0 24px 60px rgba(43, 59, 96, 0.25);
  transform: rotate(-1deg);
}

/* --- pay-what-you-can card --- */

.ax-pay-band { background: var(--fnd-band); padding: 72px 32px; }

.ax-pay-card {
  max-width: 640px;
  margin: 0 auto;
  background: #FFFFFF;
  border-radius: 10px;
  padding: 44px 48px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.ax-pay-card .fnd-h2 { font-size: 28px; margin: 0 0 10px; }

.ax-pay-intro {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fnd-body);
  margin: 0 0 28px;
  text-wrap: pretty;
}

.ax-amount-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

.ax-amount {
  font-family: var(--fnd-display);
  font-weight: 400;
  font-size: 52px;
  line-height: 1;
  color: var(--fnd-blue);
}

.ax-amount-note { font-size: 13px; color: var(--fnd-faint); }

.ax-slider {
  width: 100%;
  margin: 0 0 14px;
  accent-color: var(--fnd-blue);
}

.ax-presets {
  display: flex;
  gap: 8px;
  margin-bottom: 28px;
}

.ax-presets .fnd-chip { flex: 1; padding: 9px 0; font-size: 14px; }

.ax-disclaimer {
  border-top: 1px solid var(--fnd-rule);
  margin-top: 24px;
  padding-top: 16px;
  font-size: 13px;
  color: var(--fnd-muted);
  line-height: 1.55;
  text-wrap: pretty;
}

/* --- where your money goes --- */

.ax-pillars-section { padding-top: 72px; padding-bottom: 72px; }
.ax-pillars-section .fnd-h2 { max-width: 620px; }
.ax-pillars-intro { max-width: 680px; margin: 0 0 40px; }

.ax-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.ax-pillar { border-top: 2px solid var(--fnd-rule); padding-top: 18px; }
.ax-pillar .fnd-glyph { width: 34px; height: 34px; margin-bottom: 12px; }

.ax-pillar-title {
  font-family: var(--fnd-display);
  font-size: 18px;
  color: var(--fnd-ink);
  margin: 0 0 6px;
}

.ax-pillar-body { font-size: 14px; line-height: 1.6; color: var(--fnd-muted); }

/* --- the people behind it --- */

.ax-people-band .fnd-h2 { margin-bottom: 40px; }

.ax-people {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.ax-person {
  background: #FFFFFF;
  border-radius: 8px;
  padding: 28px;
  text-align: center;
}

.ax-person-photo {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 14px;
  display: block;
}

.ax-person-name { font-family: var(--fnd-display); font-size: 19px; color: var(--fnd-ink); }
.ax-person-role { font-size: 12.5px; color: var(--fnd-muted); margin: 4px 0 10px; }
.ax-person-bio { font-size: 13.5px; line-height: 1.6; color: var(--fnd-body); }

.ax-credit {
  font-size: 13px;
  color: var(--fnd-muted);
  margin: 28px 0 0;
  text-align: center;
}

/* --- post-payment download page --- */

.ax-done {
  max-width: 640px;
  margin: 0 auto;
  padding: 72px 32px 96px;
  text-align: center;
}

.ax-done .fnd-h1 { font-size: 38px; }
.ax-done .fnd-lede { margin-bottom: 32px; }
.ax-done .fnd-btn-pay { max-width: 380px; margin: 0 auto; }

/* ============================================================
   DONATE PAGE  (/donate)
   ============================================================ */

.dn-hero {
  max-width: 1120px;
  margin: 0 auto;
  padding: 48px 32px 56px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  grid-template-areas:
    "intro card"
    "list  card";
  gap: 0 56px;
  align-items: start;
}

.dn-hero-intro { grid-area: intro; }
.dn-hero-list { grid-area: list; display: flex; flex-direction: column; gap: 14px; }

.dn-hero-intro .fnd-h1 { font-size: 44px; line-height: 1.12; }

.dn-initiative { display: flex; gap: 14px; align-items: flex-start; }
.dn-initiative .fnd-glyph { width: 30px; height: 30px; margin-top: 2px; }

.dn-initiative-title {
  font-family: var(--fnd-display);
  font-size: 16.5px;
  color: var(--fnd-ink);
}

.dn-initiative-body { font-size: 14px; line-height: 1.55; color: var(--fnd-muted); }

/* --- donation card --- */

.dn-card {
  grid-area: card;
  background: var(--fnd-band);
  border-radius: 10px;
  padding: 36px 38px;
  position: sticky;
  top: 24px;
}

.dn-card .fnd-h2 { font-size: 24px; margin: 0 0 18px; }

.dn-freq { display: flex; gap: 8px; margin-bottom: 16px; }
.dn-freq .fnd-chip { flex: 1; padding: 10px 0; font-size: 13.5px; }

.dn-presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.dn-presets .fnd-chip { padding: 12px 0; font-size: 15px; }

.dn-custom {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--fnd-muted);
}

.dn-custom-box {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid var(--fnd-chip);
  border-radius: 4px;
  padding: 6px 10px;
}

.dn-custom-box span { color: var(--fnd-muted); font-weight: 700; }

.dn-custom-box input {
  border: none;
  outline: none;
  width: 70px;
  background: transparent;
  font-family: var(--fnd-ui);
  font-size: 15px;
  font-weight: 700;
  color: var(--fnd-ink);
}

/* --- photo strip --- */

.dn-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.dn-photos figure { margin: 0; }

/* object-position: center top so heads and signage stay in frame — the
   sources are served uncropped for exactly this reason (no c_fill,h_…). */
.dn-photos img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  object-position: center top;
  border-radius: 6px;
  display: block;
}

.dn-photos figcaption {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fnd-muted);
  margin-top: 8px;
}

/* --- featured: funding craft research --- */

.dn-featured-band { background: var(--fnd-band); padding: 64px 32px; }

.dn-featured {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
}

.dn-featured-poster {
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 18px 44px rgba(43, 59, 96, 0.22);
  transform: rotate(1deg);
  display: block;
}

.dn-featured .fnd-h2 { margin-bottom: 16px; }
.dn-featured .fnd-copy { margin: 0 0 14px; }
.dn-featured .fnd-copy:last-of-type { margin-bottom: 22px; }

/* --- quote --- */

.dn-quote {
  max-width: 900px;
  margin: 0 auto;
  padding: 72px 32px;
  text-align: center;
}

.dn-quote .fnd-glyph { width: 40px; height: 40px; margin: 0 auto 20px; }

.dn-quote blockquote {
  font-family: var(--fnd-display);
  font-weight: 400;
  font-size: 27px;
  line-height: 1.35;
  color: var(--fnd-blue);
  margin: 0 0 16px;
  text-wrap: balance;
}

.dn-quote-attribution { font-size: 13.5px; color: var(--fnd-muted); }

/* --- FAQ row --- */

.dn-faq-section { padding-bottom: 72px; }

.dn-faq {
  border-top: 1px solid var(--fnd-rule);
  padding-top: 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fnd-muted);
}

.dn-faq strong { color: var(--fnd-ink); }

/* ============================================================
   RESPONSIVE
   The prototype is desktop-first (>=1024px); below ~800px the hero
   grids collapse and the donate card moves directly under the H1.
   ============================================================ */

@media (max-width: 1000px) {
  .ax-pillars,
  .ax-people,
  .dn-faq { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 800px) {
  .fnd-wrap { padding-left: 20px; padding-right: 20px; }
  .fnd-band { padding: 48px 20px; }
  .fnd-h1 { font-size: 34px; }
  .fnd-h2 { font-size: 26px; }

  .ax-hero {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 32px 20px 48px;
  }

  /* The backdrop scatter is sized against the desktop poster; it reads as
     clutter at phone width, so it drops out entirely. */
  .ax-poster-backdrop { display: none; }
  .ax-poster { transform: none; }

  .ax-pay-band { padding: 48px 20px; }
  .ax-pay-card { padding: 32px 24px; }
  .ax-amount { font-size: 44px; }
  .ax-presets { flex-wrap: wrap; }
  .ax-presets .fnd-chip { flex: 1 0 28%; }

  .ax-pillars-section { padding-top: 48px; padding-bottom: 48px; }
  .ax-pillars,
  .ax-people,
  .dn-faq,
  .dn-photos { grid-template-columns: 1fr; }

  .dn-hero {
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "card"
      "list";
    gap: 32px 0;
    padding: 32px 20px 40px;
  }

  .dn-hero-intro .fnd-h1 { font-size: 34px; }
  .dn-card { position: static; padding: 28px 24px; }

  .dn-featured-band { padding: 48px 20px; }
  .dn-featured { grid-template-columns: 1fr; gap: 32px; }
  .dn-featured-poster { max-width: 360px; margin: 0 auto; transform: none; }

  .dn-quote { padding: 48px 20px; }
  .dn-quote blockquote { font-size: 22px; }

  .dn-faq-section { padding-bottom: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .ax-poster,
  .dn-featured-poster { transform: none; }
}