/* =============================================================================
 * Public-page design system
 * -----------------------------------------------------------------------------
 * Every public page (landing, about, faq, terms, 404) is built from this fixed
 * set of classes. Scope is the `.landing` root; the warm "hearth" palette is a
 * data-theme on that root. Reuse these — don't invent per-page styles.
 *
 * LAYOUT
 *   .landing-band            full-width horizontal stripe (page background)
 *   .landing-band--alt       alternate stripe (white) for rhythm between bands
 *   .landing-band--hero      taller top stripe, landing hero only
 *   .landing-wrap            centered 640px content column inside a band
 *   .landing-section         a content block inside a wrap
 *
 * TYPE — display (landing hero only)
 *   .landing-headline        the giant "Give and Live"
 *   .landing-tagline         hero sub-line
 *   .landing-subhead         hero supporting paragraph
 *
 * TYPE — content pages (the three reusable heading levels + kicker)
 *   .landing-eyebrow         uppercase kicker label above a section
 *   .landing-page-title      H1 — the page's main title
 *   .landing-section-title   H2 — a section heading within a page
 *   .landing-subtitle        H3 — a sub-heading inside a section
 *   .landing-lead            larger intro paragraph under a page title
 *   .landing-prose           body copy (wraps <p>s)
 *   .landing-prose-meta      small muted meta line (dates, categories)
 *
 * LINKS & LISTS
 *   .landing a               inline link (underlined)
 *   .landing-link-list       navigation list (faq index / related)
 *   .landing-back-link       "← back" link
 *
 * FOOTNOTES (terms)
 *   .terms-footnote-ref      superscript reference marker
 *   .terms-footnotes         the notes list at the foot of a page
 *
 * COMPONENTS (landing only)
 *   .landing-steps / .landing-principles / .landing-close / .landing-footer
 * ============================================================================= */

/* --- Root & theme --------------------------------------------------------- */
.landing {
  /* Default = Paper & Ink: cool paper, single deep ink accent, monochrome elsewhere */
  --lp-bg: #f6f1e7;
  --lp-text: #14110e;
  --lp-accent: #a33617;
  --lp-secondary: #a33617;
  --lp-muted: #6c6157;
  --lp-rule: rgba(20, 17, 14, 0.1);

  --lp-heading-font: 'Fraunces', Georgia, 'Times New Roman', serif;
  --lp-body-font: 'Inter', system-ui, sans-serif;

  min-height: 100vh;
  background: var(--lp-bg);
  color: var(--lp-text);
  font-family: var(--lp-body-font);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01', 'kern';
}

.landing[data-theme='hearth'] {
  /* Hearth: warmer honey-cream, amber + sage two-tone */
  --lp-bg: #f9e7c5;
  --lp-text: #2e1f10;
  --lp-accent: #c74417;
  --lp-secondary: #5a7530;
  --lp-muted: #7a5f3e;
  --lp-rule: rgba(46, 31, 16, 0.14);
}

/* --- Base links ----------------------------------------------------------- */
.landing a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--lp-rule);
  transition:
    color 0.15s ease,
    text-decoration-color 0.15s ease;
}

.landing a:hover {
  color: var(--lp-accent);
  text-decoration-color: var(--lp-accent);
}

/* --- Bands & layout ------------------------------------------------------- */
.landing-band {
  background: var(--lp-bg);
  width: 100%;
}

.landing-band--alt {
  background: #ffffff;
}

.landing-wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 60px 28px;
}

.landing-band--hero .landing-wrap {
  padding-top: 88px;
  padding-bottom: 72px;
}

/* --- Type: display (landing hero only) ------------------------------------ */
.landing-headline {
  font-family: var(--lp-heading-font);
  font-weight: 400;
  font-size: clamp(3rem, 10vw, 5rem);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--lp-text);
  margin: 0 0 20px;
}

.landing-headline em {
  font-style: normal;
  color: var(--lp-accent);
}

.landing-tagline {
  font-family: var(--lp-heading-font);
  font-weight: 400;
  font-size: clamp(1.3rem, 3.5vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--lp-text);
  margin: 0 0 20px;
}

.landing-tagline em {
  font-style: italic;
  color: var(--lp-accent);
  font-variation-settings: 'SOFT' 100;
}

.landing-subhead {
  font-size: 1.05rem;
  color: var(--lp-muted);
  max-width: 28em;
  margin: 0;
}

/* --- Type: headings (the three reusable levels + kicker) ------------------ */

/* Kicker / eyebrow: uppercase label introducing a section. */
.landing-eyebrow {
  font-family: var(--lp-body-font);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--lp-accent);
  margin: 0 0 16px;
}

/* H1: a content page's main title. Smaller than the landing hero. */
.landing-page-title {
  font-family: var(--lp-heading-font);
  font-weight: 600;
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--lp-text);
  margin: 0 0 8px;
}

/* H2: a section heading within a page (FAQ categories, related lists, etc.). */
.landing-section-title {
  font-family: var(--lp-heading-font);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--lp-text);
  margin: 0 0 12px;
}

/* H3: a sub-heading inside a section. */
.landing-subtitle {
  font-family: var(--lp-heading-font);
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.3;
  color: var(--lp-text);
  margin: 0 0 6px;
}

/* --- Type: body ----------------------------------------------------------- */

/* Lead: larger intro paragraph directly under a page title. */
.landing-lead {
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--lp-text);
  max-width: 34em;
  margin: 0;
}

.landing-prose {
  font-size: 1.05rem;
  color: var(--lp-text);
  max-width: 34em;
}

.landing-prose p + p {
  margin-top: 16px;
}

/* Small muted meta line (e.g. "Updated: 2026-06-16", category labels). */
.landing-prose-meta {
  font-family: var(--lp-body-font);
  font-size: 0.85rem;
  color: var(--lp-muted);
  margin: 0 0 24px;
}

/* --- Links & lists -------------------------------------------------------- */

/* Subdued navigation list (FAQ index / related). Uses the prose column width. */
.landing-link-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 34em;
}

.landing-link-list li + li {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--lp-rule);
}

.landing-link-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  text-decoration: none;
  color: var(--lp-text);
}

.landing-link-list a:hover {
  color: var(--lp-accent);
}

.landing-link-list-chevron {
  color: var(--lp-muted);
  font-size: 1.2rem;
}

.landing-back-link {
  font-family: var(--lp-body-font);
  font-size: 0.95rem;
  margin: 0 0 8px;
}

/* Vertical rhythm between stacked sections sharing one band. */
.faq-category-block + .faq-category-block {
  margin-top: 36px;
}

/* --- Footnotes (terms) ---------------------------------------------------- */
.terms-footnote-ref {
  font-size: 0.7em;
  line-height: 0;
  vertical-align: super;
  margin-left: 1px;
}

.terms-footnote-ref a {
  text-decoration: none;
}

.terms-footnotes {
  list-style-position: outside;
  padding-left: 20px;
  margin: 0;
  font-size: 0.85rem;
  color: var(--lp-muted);
  max-width: 34em;
}

.terms-footnotes li + li {
  margin-top: 6px;
}

/* --- Component: hero illustration (landing) ------------------------------- */
.landing-hero-illustration {
  display: block;
  width: 100%;
  max-width: 520px;
  margin-top: 52px;
  color: var(--lp-text);
}

/* --- Component: how-it-works steps (landing) ------------------------------ */
.landing-step-icon {
  display: block;
  width: 36px;
  height: 36px;
  margin-bottom: 10px;
  color: var(--lp-accent);
  flex-shrink: 0;
}

.landing-steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.landing-step {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: baseline;
}

.landing-step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--lp-heading-font);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--lp-accent);
  min-width: 2.5ch;
  letter-spacing: -0.01em;
}

.landing-step-title {
  font-family: var(--lp-heading-font);
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--lp-text);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}

.landing-step-body {
  color: var(--lp-muted);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0;
}

/* --- Component: principles list (landing & about) ------------------------- */
.landing-principles {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.landing-principle {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: baseline;
}

.landing-principle::before {
  content: '·';
  font-size: 1.4rem;
  color: var(--lp-accent);
  line-height: 1;
  margin-top: 2px;
}

.landing[data-theme='hearth'] .landing-principle:nth-child(even)::before {
  color: var(--lp-secondary);
}

.landing-principle-title {
  font-family: var(--lp-heading-font);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--lp-text);
  display: block;
  margin-bottom: 2px;
}

.landing-principle-body {
  color: var(--lp-muted);
  font-size: 0.975rem;
  line-height: 1.55;
}

/* --- Component: closing / footer (landing) -------------------------------- */
.landing-close {
  color: var(--lp-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.landing-close p + p {
  margin-top: 12px;
}

.landing-close strong {
  font-weight: 500;
  color: var(--lp-text);
  font-family: var(--lp-heading-font);
  font-style: italic;
}

.landing-footer {
  margin-top: 32px;
  font-size: 0.8rem;
  color: var(--lp-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.landing-footer-aside {
  font-style: italic;
  opacity: 0.7;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 520px) {
  .landing-wrap {
    padding: 40px 20px;
  }
  .landing-band--hero .landing-wrap {
    padding-top: 56px;
    padding-bottom: 48px;
  }
  .landing-step {
    gap: 14px;
  }
  .landing-step::before {
    font-size: 1rem;
    min-width: 2ch;
  }
}