/* ============================================================
   STARCHAN — Donate page styles (v3 — vigil / hermit fixed bg)
   Ported from frontend/cd_exports/_scratch/donate__v3__SCRATCH_hermit_fixed.html
   Stripped: inline <style> (now external), Google Fonts @import (loaded
   in base.html), backdrop-filter blur (CSP rejects).
   FIXED ATMOSPHERIC BACKDROP. Hermit photograph stays in viewport
   throughout the scroll, lantern at right.
   LEFT-COLUMN LAYOUT. Content lives in a ~620px column anchored ~9vw
   from the left edge; the right ~45-50% is image-only (no-content zone).
   ============================================================ */

/* Page-scoped tokens — not global, so palette doesn't drift on other pages */
.donate-page {
  --col-x: clamp(28px, 9vw, 168px);    /* left column offset */
  --col-w: min(620px, 48vw);            /* column max width */
}

/* ============================================================
   Body — dark fallback under the fixed atmospheric backdrop.
   `overflow-x: clip` (not `hidden`) clips the .hero-protect
   mobile bleed without establishing a scrolling container, so
   the global sticky chrome (.site-header / .board-tabs-bar)
   keeps working. `overflow-x: hidden` on body is a known sticky-
   killer because it makes body the scroll ancestor and sticky
   resolves against it instead of the viewport.
   ============================================================ */
body.donate-page {
  background: #08090f;
  color: var(--text-on-dark);
  overflow-x: clip;
}
/* Header + tabs use global translucent chrome (layout.css). Footer alone needs
   to sit above the fixed atmospheric backdrop on this page. */
body.donate-page .site-footer {
  position: relative;
  z-index: 2;
  background: rgba(10, 15, 26, 0.78);
}
body.donate-page main {
  position: relative;
  z-index: 1;
}

/* ============================================================
   FIXED ATMOSPHERIC BACKDROP — cold video + lit still cross-fade
   ============================================================ */
.page-backdrop {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  background: var(--navy-deep);
  overflow: hidden;
  pointer-events: none;
}
.bg-cold,
.bg-lit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  pointer-events: none;
}
.bg-cold { opacity: 1; z-index: 1; }
.bg-lit {
  --lit-mask-x: 73%;
  --lit-mask-y: 33%;
  --lit-mask-inner: 8%;
  --lit-mask-outer: 20%;
  opacity: 0;
  z-index: 2;
  transition: opacity 0.8s cubic-bezier(0.34, 0, 0.18, 1);
  -webkit-mask-image: radial-gradient(
    circle at var(--lit-mask-x) var(--lit-mask-y),
    #000 0%,
    #000 var(--lit-mask-inner),
    transparent var(--lit-mask-outer)
  );
          mask-image: radial-gradient(
    circle at var(--lit-mask-x) var(--lit-mask-y),
    #000 0%,
    #000 var(--lit-mask-inner),
    transparent var(--lit-mask-outer)
  );
}
main.is-ignited .bg-lit { opacity: 1; }

/* ============================================================
   COLUMN PRIMITIVE — every content section anchors here
   ============================================================ */
.donate-page .col {
  margin-left: var(--col-x);
  margin-right: 0;
  max-width: var(--col-w);
  width: calc(100% - var(--col-x) - 24px);
}

/* ============================================================
   HERO — column-anchored copy. Radial protection sits behind column.
   ============================================================ */
.donate-page .hero {
  position: relative;
  width: 100%;
  min-height: clamp(560px, calc(100vh - var(--header-height) - var(--tabs-height)), 880px);
  background: transparent;
  display: flex;
  align-items: center;
  padding: 80px 0;
}
.donate-page .hero .col { position: relative; }
.donate-page .hero-protect {
  position: absolute;
  left: calc(-1 * var(--col-x) - 20px);
  top: -120px;
  width: calc(var(--col-x) + var(--col-w) + 80px);
  height: calc(100% + 240px);
  background: radial-gradient(
    ellipse 65% 55% at 30% 50%,
    rgba(3, 4, 10, 0.78) 0%,
    rgba(3, 4, 10, 0.5) 38%,
    rgba(3, 4, 10, 0.2) 70%,
    transparent 90%
  );
  pointer-events: none;
  z-index: -1;
}
.donate-page .hero-eyebrow {
  font-family: var(--font-main);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 28px;
  display: block;
}
.donate-page .hero-eyebrow .star { font-family: var(--font-display); margin-right: 8px; }
.donate-page .hero-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 6.5vw, 92px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--text-on-dark);
  margin: 0 0 24px;
  text-wrap: balance;
}
.donate-page .hero-h1 em {
  font-style: italic;
  color: var(--gold);
  font-weight: 600;
}
.donate-page .hero-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.55;
  color: rgba(221, 232, 244, 0.88);
  font-weight: 400;
  margin: 0;
  text-wrap: pretty;
}

/* Hero CTA — gives the motivated donor an immediate path to the form instead of
   scrolling past the whole vigil first (2026-06-28 GPT review). Keeps the
   atmospheric composition untouched; just jumps to #donate. */
.donate-page .hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 28px;
  padding: 13px 26px;
  background: var(--gold);
  color: var(--navy-deep);
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: 4px;
  transition: background 150ms ease, transform 150ms ease;
}
.donate-page .hero-cta:hover { background: var(--gold-light); transform: translateY(-1px); }
.donate-page .hero-cta .star { color: var(--navy-deep); }
.donate-page .hero-cta .arr { transition: transform 150ms ease; }
.donate-page .hero-cta:hover .arr { transform: translateY(2px); }

/* Offset the sticky header/tabs when jumping to the form. */
.donate-page #donate { scroll-margin-top: 110px; }
html { scroll-behavior: smooth; }
.donate-page .scroll-cue {
  position: absolute;
  bottom: 32px;
  left: var(--col-x);
  font-family: var(--font-main);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(221, 232, 244, 0.45);
  display: flex; align-items: center; gap: 14px;
}
.donate-page .scroll-cue .arrow { color: var(--gold); font-size: 14px; }

/* ============================================================
   MISSION — column block with gold left-rule
   ============================================================ */
.donate-page .mission { background: transparent; padding: 96px 0; }
.donate-page .mission .col {
  border-left: 1px solid rgba(200, 146, 58, 0.32);
  padding: 24px 28px;
  position: relative;
}
.donate-page .mission .col::before {
  content: '';
  position: absolute;
  left: -1px; top: 0;
  width: 3px; height: 56px;
  background: var(--gold);
}
.donate-page .mission-h2,
.donate-page .mission-item h3,
.donate-page .mission-item p {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.78), 0 1px 3px rgba(0, 0, 0, 0.6);
}
.donate-page .mission-head { margin-bottom: 12px; }
.donate-page .eyebrow-on-dark {
  font-family: var(--font-main);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 18px;
  display: block;
}
.donate-page .eyebrow-on-dark .star { font-family: var(--font-display); margin-right: 8px; }
.donate-page .mission-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text-on-dark);
  margin: 0 0 8px;
  text-wrap: balance;
}
.donate-page .mission-list { list-style: none; padding: 0; margin: 28px 0 0; }
.donate-page .mission-item {
  padding: 26px 0;
  border-top: 1px solid rgba(200, 146, 58, 0.18);
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 20px;
}
.donate-page .mission-item:last-child { border-bottom: 1px solid rgba(200, 146, 58, 0.18); }
.donate-page .mission-item .num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 26px;
  color: var(--gold);
  line-height: 1;
  font-weight: 400;
  padding-top: 4px;
}
.donate-page .mission-item h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--text-on-dark);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.donate-page .mission-item p {
  font-size: 14.5px;
  color: rgba(221, 232, 244, 0.78);
  line-height: 1.65;
  margin: 0;
}

/* ============================================================
   DONATE FORM — column-bound panel. NOTE: backdrop-filter removed
   per STARCHAN CSP (Phase 28). Heavier rgba bg compensates for
   loss of blur.
   ============================================================ */
.donate-page .donate { background: transparent; padding: 80px 0 100px; }
.donate-page .donate .col { position: relative; }

/* Title + sub now live INSIDE .donate-panel as its first block, separated
   from the form-rows by a thin gold rule. The panel reads as one stitched
   destination instead of a card with a floating headline above it. */
.donate-page .donate-head {
  margin: 0 0 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(200, 146, 58, 0.18);
}
.donate-page .donate-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-on-dark);
  margin: 0 0 8px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.78), 0 1px 3px rgba(0, 0, 0, 0.6);
}
.donate-page .donate-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: rgba(221, 232, 244, 0.78);
  margin: 0;
}
.donate-page .donate-panel {
  background: rgba(15, 22, 35, 0.85);   /* heavier than blur version (was 0.28 + blur); matches hermit CTA panel formula */
  border: 1px solid var(--navy-border);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 32px 32px 36px;
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index: 1;
}

.donate-page textarea.input-text {
  resize: vertical;
  min-height: 92px;
  line-height: 1.5;
  padding: 12px 14px;
}

.donate-page .form-row { margin-bottom: 18px; }
.donate-page .amount-hint {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12px;
  color: rgba(221, 232, 244, 0.42);
  line-height: 1.4;
}
.donate-page .form-label {
  display: block;
  font-family: var(--font-main);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(221, 232, 244, 0.7);
  margin: 0 0 8px;
}
.donate-page .form-label .opt {
  color: rgba(221, 232, 244, 0.42);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  margin-left: 8px;
  font-size: 11px;
  font-style: italic;
  font-family: var(--font-display);
}
/* Preset amount chips (2026-06-28 critique: reduce donation friction) —
   one tap fills the custom field below; the field stays editable. */
.donate-page .amount-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.donate-page .amount-chip {
  flex: 1 1 auto;
  min-width: 58px;
  padding: 9px 0;
  background: rgba(221, 232, 244, 0.04);
  border: 1px solid var(--navy-border);
  border-radius: var(--radius-sm);
  color: var(--text-on-dark);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast),
              color var(--transition-fast);
}
.donate-page .amount-chip:hover {
  border-color: var(--gold);
  color: var(--gold-light);
}
.donate-page .amount-chip:focus-visible {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200, 146, 58, 0.18);
}
.donate-page .amount-chip.is-active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy-deep);
}

.donate-page .amount-wrap { position: relative; display: flex; align-items: center; }
.donate-page .amount-wrap .currency {
  position: absolute; left: 16px;
  font-family: var(--font-display);
  font-size: 20px; color: var(--gold);
  pointer-events: none; font-weight: 500;
}
.donate-page .input-amount {
  width: 100%;
  background: rgba(221, 232, 244, 0.04);
  border: 1px solid var(--navy-border);
  border-radius: var(--radius-sm);
  padding: 14px 16px 14px 38px;
  color: var(--text-on-dark);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.donate-page .input-amount:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200, 146, 58, 0.18);
}
.donate-page .input-text {
  width: 100%;
  background: rgba(221, 232, 244, 0.04);
  border: 1px solid var(--navy-border);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  color: var(--text-on-dark);
  font-family: var(--font-main);
  font-size: 14px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.donate-page .input-text:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200, 146, 58, 0.18);
}
.donate-page .input-text::placeholder {
  color: rgba(221, 232, 244, 0.32);
  font-style: italic;
  font-family: var(--font-display);
}

.donate-page .cta-primary {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; width: 100%;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  color: #fff;
  font-family: var(--font-main);
  font-weight: 600; font-size: 14px;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 15px 24px;
  border-radius: var(--radius-md);
  border: none;
  box-shadow: 0 4px 16px rgba(200, 146, 58, 0.32);
  transition: transform 200ms var(--ease-standard),
              box-shadow 200ms var(--ease-standard);
  margin-top: 8px;
}
.donate-page .cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(200, 146, 58, 0.45);
}
.donate-page .cta-primary:focus-visible {
  outline: none;
  box-shadow: 0 4px 16px rgba(200, 146, 58, 0.32),
              0 0 0 3px rgba(8, 9, 15, 1),
              0 0 0 6px var(--gold-light);
}
.donate-page .cta-primary[aria-busy="true"] {
  cursor: progress;
  opacity: 0.85;
  transform: none;
  pointer-events: none;   /* prevent second click during in-flight navigation */
}
.donate-page .cta-primary .glyph { font-family: var(--font-display); font-size: 16px; }

.donate-page .form-note {
  margin-top: 16px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12.5px;
  color: rgba(221, 232, 244, 0.58);
  text-align: left;
  line-height: 1.5;
  margin-bottom: 0;
}

/* ============================================================
   AD ASTRA — ceremonial Latin closing
   ============================================================ */
.donate-page .ad-astra {
  padding: 104px 0 56px;
  position: relative;
}
.donate-page .ad-astra .col {
  display: flex;
  align-items: baseline;
  gap: 18px;
  position: relative;
}
.donate-page .ad-astra .col::before {
  content: '';
  position: absolute;
  top: -36px;
  left: 0;
  width: 64px;
  height: 1px;
  background: linear-gradient(to right, var(--gold), rgba(200, 146, 58, 0));
}
.donate-page .ad-astra-glyph {
  font-family: var(--font-display);
  color: var(--gold);
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.85;
}
.donate-page .ad-astra p {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.15;
  color: var(--gold);
  letter-spacing: 0.015em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7);
}

/* ============================================================
   DISCLAIMER
   ============================================================ */
.donate-page .disclaimer { background: transparent; padding: 32px 0 64px; }
.donate-page .disclaimer .col {
  border-top: 1px solid rgba(37, 59, 82, 0.6);
  padding-top: 18px;
}
.donate-page .disclaimer p {
  margin: 0;
  font-family: var(--font-main);
  font-size: 12px;
  color: rgba(221, 232, 244, 0.58);
  letter-spacing: 0.02em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}

/* ============================================================
   Mobile / portrait — single full-width column
   ============================================================ */
@media (max-width: 768px) {
  .donate-page {
    --col-x: 24px;
    --col-w: 100%;
  }
  .donate-page .col {
    margin-left: var(--col-x);
    width: calc(100% - 2 * var(--col-x));
    max-width: none;
  }
  /* Pull hero copy to the top so the phone opens on "Keep the Fire Going."
     + the lantern band, not a screen of empty navy with centered text. */
  .donate-page .hero {
    align-items: flex-start;
    min-height: clamp(440px, calc(100vh - var(--header-height) - var(--tabs-height)), 640px);
    padding: 28px 0 64px;
  }
  .donate-page .hero-eyebrow { margin-bottom: 20px; }
  /* Keep the protection gradient inside the viewport (was 100vw + 80px → 80px of
     horizontal scroll). The radial is soft enough that flush edges still read. */
  .donate-page .hero-protect {
    left: 0;
    width: 100%;
  }
  .donate-page .scroll-cue { left: var(--col-x); bottom: 24px; }

  .donate-page .mission { padding: 56px 0; }
  .donate-page .mission .col { padding: 28px 24px; }

  .donate-page .donate { padding: 56px 0 80px; }
  .donate-page .donate-panel { padding: 28px 20px 28px; }
  .donate-page .donate-head { margin-bottom: 20px; padding-bottom: 16px; }
  /* Touch-target floor — desktop padding produces ~36px; mobile bumps to ≥44px */
  .donate-page .input-text { padding: 14px 16px; }

  .donate-page .ad-astra { padding: 64px 0 40px; }   /* trim the desktop 104px void on phones */
  .donate-page .disclaimer { padding: 24px 0 56px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .donate-page *, .donate-page *::before, .donate-page *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}