/*
 * ═══════════════════════════════════════════════════════════════
 *  IMAGINE CHRISTIANITY — theme.css
 *  Central design system. Linked by every page on the site.
 *  Edit here once; applies everywhere.
 *
 *  Table of contents
 *   1.  Google Fonts import
 *   2.  Design tokens (CSS variables)
 *   3.  Reset & base
 *   4.  Reduced-motion
 *   5.  Keyframe animations
 *   6.  Focus & accessibility
 *   7.  Skip link
 *   8.  Scroll reveal
 *   9.  Navbar — main site (fixed, transparent → dark)
 *  10.  Navbar — utility pages (sticky, always dark)
 *  11.  Mobile drawer
 *  12.  Section shared (labels, titles, rules)
 *  13.  Buttons
 *  14.  Forms — fields, tooltips, honeypot
 *  15.  Forms — consent checkbox
 *  16.  Donate widget
 *  17.  Geo prompt
 *  18.  Contact detail rows
 *  19.  Main site footer
 *  20.  Utility page footer
 *  21.  Utility page hero band
 *  22.  Prose / legal content
 *  23.  Responsive
 * ═══════════════════════════════════════════════════════════════
 */

/* ── 1. FONTS ──────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=Crimson+Pro:wght@300;400;600&family=Jost:wght@300;400;500;600&display=swap');

/* ── 2. DESIGN TOKENS ──────────────────────────────────────── */
:root {
  --ink:        #1a1410;
  --charcoal:   #252018;
  --warm-dark:  #3a3228;
  --warm-mid:   #5c4e42;
  --cream:      #f4efe5;
  --parchment:  #ede5d0;
  --gold:       #c4922a;
  --gold-light: #d9a53c;
  --gold-aa:    #b8851f;     /* gold that passes AA contrast on white/parchment */
  --white:      #fdfaf4;

  --serif: 'Cormorant Garamond', Georgia, serif;
  --body:  'Crimson Pro', Georgia, serif;
  --sans:  'Jost', sans-serif;

  --radius:     3px;
  --focus-ring: 0 0 0 3px rgba(196,146,42,0.5), 0 0 0 5px rgba(26,20,16,0.8);
}

/* ── 3. RESET & BASE ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--white);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.8;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
ul, ol   { list-style: none; }
a        { color: inherit; }

/* ── 4. REDUCED MOTION ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal { opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ── 5. KEYFRAMES ──────────────────────────────────────────── */
@keyframes fadeUp    { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn    { from{opacity:0} to{opacity:1} }
@keyframes shimmer   { 0%{background-position:-200% center} 100%{background-position:200% center} }
@keyframes pulseDot  { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.6)} }
@keyframes glowPulse { 0%,100%{opacity:.08} 50%{opacity:.15} }
@keyframes checkDraw { from{stroke-dashoffset:60}  to{stroke-dashoffset:0} }
@keyframes circleDraw{ from{stroke-dashoffset:283} to{stroke-dashoffset:0} }
@keyframes ringPulse { 0%{transform:scale(1);opacity:.35} 100%{transform:scale(1.55);opacity:0} }
@keyframes heartBeat { 0%,100%{transform:scale(1)} 14%{transform:scale(1.3)} 28%{transform:scale(1)} 42%{transform:scale(1.2)} 70%{transform:scale(1)} }
@keyframes floatCross{ 0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-12px) rotate(-3deg)} }

/* ── 6. FOCUS ──────────────────────────────────────────────── */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius);
}

/* ── 7. SKIP LINK ──────────────────────────────────────────── */
.skip-link {
  position:absolute; top:-100px; left:1rem;
  background:var(--gold); color:var(--ink);
  font-family:var(--sans); font-size:0.85rem; font-weight:600;
  padding:.6rem 1.2rem; border-radius:var(--radius);
  text-decoration:none; z-index:9999; transition:top .2s;
}
.skip-link:focus { top:1rem; }

/* ── 8. SCROLL REVEAL ──────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(32px); transition:opacity .8s ease,transform .8s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.rd1{transition-delay:.10s} .rd2{transition-delay:.22s} .rd3{transition-delay:.38s}

/* ── 9. MAIN SITE NAVBAR (fixed, transparent → dark) ──────── */
#navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:68px; display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(1rem,4vw,3rem);
  transition:background .45s ease,box-shadow .45s ease,border-color .45s ease;
  border-bottom:1px solid transparent;
}
#navbar.scrolled {
  background:rgba(26,20,16,.97);
  backdrop-filter:blur(12px);
  box-shadow:0 2px 32px rgba(0,0,0,.4);
  border-color:rgba(196,146,42,.25);
}
.nav-logo {
  font-family:var(--serif); font-size:clamp(1.05rem,2vw,1.4rem);
  font-weight:300; letter-spacing:.04em; color:var(--cream);
  text-decoration:none; line-height:1.2; border-radius:var(--radius);
}
.nav-logo em    { font-style:italic; color:var(--gold-light); }
.nav-logo small {
  display:block; font-family:var(--sans); font-size:.48rem;
  font-weight:400; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(196,146,42,.75); margin-top:1px;
}
.nav-links { display:flex; align-items:center; gap:clamp(.8rem,2vw,1.75rem); }
.nav-links li a {
  font-family:var(--sans); font-size:.7rem; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(244,239,229,.82); text-decoration:none;
  transition:color .3s; white-space:nowrap;
  border-radius:var(--radius); padding:2px 4px;
}
.nav-links li a:hover { color:var(--gold-light); }
.nav-donate-btn {
  background:var(--gold)!important; color:var(--ink)!important;
  padding:.38rem 1rem!important; border-radius:var(--radius)!important; font-weight:600!important;
}
.nav-donate-btn:hover { background:var(--gold-light)!important; }
.nav-hamburger {
  display:none; flex-direction:column; gap:5px;
  cursor:pointer; padding:8px; background:none; border:2px solid transparent;
  border-radius:var(--radius);
}
.nav-hamburger:focus-visible { border-color:var(--gold); outline:none; }
.nav-hamburger span {
  display:block; width:22px; height:2px; background:var(--cream);
  transition:transform .3s,opacity .3s; transform-origin:center;
}
.nav-hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ── 10. UTILITY PAGE NAV (sticky, always dark) ────────────── */
.util-nav {
  background:var(--charcoal); padding:0 clamp(1rem,5vw,4rem);
  height:62px; display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:100;
  border-bottom:1px solid rgba(196,146,42,.2);
  flex-shrink:0;
}
/* Non-sticky variant (404, thank-you pages) */
.util-nav-bare {
  padding:0 clamp(1rem,5vw,4rem); height:62px;
  display:flex; align-items:center;
  border-bottom:1px solid rgba(196,146,42,.15);
  flex-shrink:0;
}
.util-nav-logo {
  font-family:var(--serif); font-size:1.2rem; font-weight:300;
  color:var(--cream); text-decoration:none; letter-spacing:.04em;
}
.util-nav-logo em { font-style:italic; color:var(--gold-light); }
.nav-back {
  font-family:var(--sans); font-size:.68rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(244,239,229,.7); text-decoration:none;
  display:flex; align-items:center; gap:.5rem;
  transition:color .3s; border-radius:var(--radius); padding:4px 6px;
}
.nav-back:hover { color:var(--gold-light); }

/* ── 11. MOBILE DRAWER ─────────────────────────────────────── */
.mobile-drawer {
  display:none; position:fixed; top:68px; left:0; right:0; z-index:999;
  background:rgba(22,17,13,.99);
  padding:1.5rem clamp(1rem,4vw,3rem) 2rem;
  flex-direction:column;
  border-top:1px solid rgba(196,146,42,.25);
}
.mobile-drawer[aria-hidden="false"] { display:flex; }
.mobile-drawer ul { display:flex; flex-direction:column; }
.mobile-drawer li a {
  display:block; font-family:var(--sans); font-size:.85rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(244,239,229,.88); text-decoration:none;
  padding:1rem 0; border-bottom:1px solid rgba(196,146,42,.12);
  transition:color .3s; border-radius:var(--radius);
}
.mobile-drawer li a:hover { color:var(--gold-light); }
.mob-donate {
  margin-top:1rem; display:block; background:var(--gold); color:var(--ink)!important;
  text-align:center; padding:.8rem 1rem; border-radius:var(--radius);
  font-weight:600; font-family:var(--sans); font-size:.82rem;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  border-bottom:none!important;
}

/* ── 12. SECTION SHARED ────────────────────────────────────── */
.section-label {
  font-family:var(--sans); font-size:.63rem; font-weight:500;
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold-light); /* dark bg default */
  margin-bottom:.75rem;
}
.section-label::before {
  content:''; display:inline-block; width:18px; height:1px;
  background:var(--gold-light); vertical-align:middle; margin-right:.55rem;
}
/* On light bg (parchment / white) */
.section-label-light            { color:var(--gold-aa); }
.section-label-light::before    { background:var(--gold-aa); }

.section-title {
  font-family:var(--serif); font-size:clamp(1.9rem,4vw,3rem);
  font-weight:300; line-height:1.15; letter-spacing:-.01em;
  color:var(--ink); margin-bottom:1rem;
}
.section-title em             { font-style:italic; color:var(--gold-aa); }
.section-title-light          { color:var(--cream); }
.section-title-light em       { color:var(--gold-light); }
.gold-rule { width:38px; height:2px; background:var(--gold); margin-bottom:2rem; }

/* ── 13. BUTTONS ───────────────────────────────────────────── */
/* Gold primary — ink on gold = 5.2:1 ✓ AA */
.btn-gold {
  font-family:var(--sans); font-size:.73rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  background:var(--gold); color:var(--ink); border:2px solid transparent;
  padding:.82rem 1.9rem; border-radius:var(--radius);
  cursor:pointer; text-decoration:none; display:inline-block; line-height:1;
  transition:background .3s,transform .2s,box-shadow .3s;
}
.btn-gold:hover { background:var(--gold-light); color:var(--ink); transform:translateY(-2px); box-shadow:0 8px 24px rgba(196,146,42,.35); }

/* Ghost (on dark) */
.btn-ghost {
  font-family:var(--sans); font-size:.73rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  background:transparent; color:var(--cream); border:1.5px solid rgba(244,239,229,.5);
  padding:.82rem 1.9rem; border-radius:var(--radius);
  cursor:pointer; text-decoration:none; display:inline-block; line-height:1;
  transition:border-color .3s,color .3s,transform .2s;
}
.btn-ghost:hover { border-color:var(--gold-light); color:var(--gold-light); transform:translateY(-2px); }

/* Dark */
.btn-dark {
  font-family:var(--sans); font-size:.72rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  background:var(--charcoal); color:var(--cream); border:2px solid transparent;
  padding:.8rem 1.6rem; border-radius:var(--radius);
  cursor:pointer; text-decoration:none; display:inline-block; line-height:1;
  transition:background .3s,transform .2s;
}
.btn-dark:hover { background:var(--warm-dark); color:var(--cream); transform:translateY(-1px); }

/* Amazon */
.btn-amazon {
  font-family:var(--sans); font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  background:#FF9900; color:#111; border:2px solid transparent; padding:.78rem 1.5rem;
  border-radius:var(--radius); cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; gap:.4rem; transition:background .3s,transform .2s;
}
.btn-amazon:hover { background:#e68900; color:#111; transform:translateY(-1px); }

/* Barnes & Noble */
.btn-bn {
  font-family:var(--sans); font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  background:#1c2d5a; color:#fff; border:2px solid transparent; padding:.78rem 1.5rem;
  border-radius:var(--radius); cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; gap:.4rem; transition:background .3s,transform .2s;
}
.btn-bn:hover { background:#253870; color:#fff; transform:translateY(-1px); }

/* PayPal — white on #0070BA = 4.6:1 ✓ */
.btn-paypal {
  display:flex; align-items:center; justify-content:center; gap:.6rem; width:100%;
  padding:1rem 2rem; background:#0070BA; color:#fff; border:2px solid transparent;
  border-radius:var(--radius); font-family:var(--sans); font-size:.82rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; cursor:pointer; text-decoration:none;
  transition:background .3s,transform .2s,box-shadow .3s;
}
.btn-paypal:hover { background:#005ea6; color:#fff; transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,112,186,.28); }
.pp-logo      { font-family:Arial,sans-serif; font-size:.95rem; font-weight:700; color:#fff; }
.pp-logo span { color:#a8d8f0; }

/* Submit */
.btn-submit {
  font-family:var(--sans); font-size:.73rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  background:var(--gold); color:var(--ink); border:2px solid transparent;
  padding:.88rem 1.9rem; border-radius:var(--radius);
  cursor:pointer; align-self:flex-start;
  transition:background .3s,transform .2s,box-shadow .3s;
}
.btn-submit:hover { background:var(--gold-light); transform:translateY(-2px); box-shadow:0 8px 24px rgba(196,146,42,.35); }

/* Outline (thank-you pages) */
.btn-outline {
  font-family:var(--sans); font-size:.72rem; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase;
  background:transparent; color:rgba(244,239,229,.6); border:1.5px solid rgba(244,239,229,.2);
  padding:.82rem 1.9rem; border-radius:var(--radius);
  cursor:pointer; text-decoration:none; display:inline-block; text-align:center;
  transition:border-color .3s,color .3s;
}
.btn-outline:hover { border-color:var(--gold-light); color:var(--gold-light); }

/* ── 14. FORMS — fields & tooltips ────────────────────────── */
.contact-form { display:flex; flex-direction:column; gap:.9rem; }
.form-field   { display:flex; flex-direction:column; gap:.35rem; position:relative; }
.form-field label {
  font-family:var(--sans); font-size:.65rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold-light);
}
.form-field input,
.form-field textarea {
  background:rgba(255,255,255,.06); border:1.5px solid rgba(196,146,42,.3);
  border-radius:var(--radius); padding:.72rem .95rem; color:var(--cream);
  font-family:var(--body); font-size:1rem; outline:none; width:100%;
  transition:border-color .3s,background .3s;
}
.form-field input:focus,
.form-field textarea:focus {
  border-color:var(--gold); background:rgba(255,255,255,.09);
  outline:2px solid var(--gold); outline-offset:0;
}
.form-field textarea     { resize:vertical; min-height:115px; }
.form-field input::placeholder,
.form-field textarea::placeholder { color:rgba(196,146,42,.35); }

/* Tooltip */
.field-tooltip {
  display:none; position:absolute; bottom:calc(100% + 8px); left:0;
  background:var(--ink); color:var(--cream);
  font-family:var(--sans); font-size:.68rem; letter-spacing:.04em;
  padding:.45rem .8rem; border-radius:var(--radius);
  border-left:2px solid var(--gold); box-shadow:0 4px 12px rgba(0,0,0,.35);
  max-width:300px; white-space:normal; z-index:20; pointer-events:none; line-height:1.5;
}
.field-tooltip::after {
  content:''; position:absolute; top:100%; left:14px;
  border:5px solid transparent; border-top-color:var(--ink);
}
.form-field.invalid .field-tooltip { display:block; }
.form-field.invalid input,
.form-field.invalid textarea { border-color:rgba(210,70,50,.65)!important; outline:2px solid rgba(210,70,50,.35)!important; }
.form-field.valid   input,
.form-field.valid   textarea { border-color:rgba(80,155,80,.5)!important; }

/* Honeypot — off-screen; bots see it, humans never will */
.ic-pot {
  position:absolute!important; left:-9999px!important; top:-9999px!important;
  width:1px!important; height:1px!important;
  overflow:hidden!important; opacity:0!important; pointer-events:none!important;
}

/* ── 15. CONSENT CHECKBOX ──────────────────────────────────── */
.consent-field {
  margin-top:.25rem; padding:1rem 1.1rem;
  background:rgba(255,255,255,.03); border:1.5px solid rgba(196,146,42,.22);
  border-radius:var(--radius); transition:border-color .3s,background .3s;
}
.consent-field.invalid { border-color:rgba(210,70,50,.55)!important; background:rgba(210,70,50,.04); }
.consent-field.valid   { border-color:rgba(80,155,80,.4); }
.consent-label         { display:flex; align-items:flex-start; gap:.75rem; cursor:pointer; user-select:none; }
.consent-checkbox      { position:absolute; opacity:0; width:1px; height:1px; overflow:hidden; }
.consent-box {
  width:18px; height:18px; min-width:18px;
  border:2px solid rgba(196,146,42,.45); border-radius:2px;
  background:rgba(255,255,255,.04); display:flex; align-items:center; justify-content:center;
  margin-top:3px; flex-shrink:0; transition:border-color .25s,background .25s;
}
.consent-checkbox:checked ~ .consent-box,
.consent-checkbox:checked + .consent-box { background:var(--gold); border-color:var(--gold); }
.consent-checkbox:checked ~ .consent-box::after,
.consent-checkbox:checked + .consent-box::after {
  content:''; display:block; width:5px; height:9px;
  border:2px solid var(--ink); border-top:none; border-left:none;
  transform:rotate(45deg) translate(-1px,-1px);
}
.consent-checkbox:focus-visible ~ .consent-box,
.consent-checkbox:focus-visible + .consent-box {
  box-shadow:0 0 0 3px rgba(196,146,42,.5),0 0 0 5px rgba(26,20,16,.8); outline:none;
}
.consent-text { font-family:var(--sans); font-size:.72rem; line-height:1.65; color:#a09080; letter-spacing:.02em; }
.consent-text strong { color:#cdc7be; font-weight:600; }
.consent-text a { color:var(--gold-light); text-decoration:underline; text-underline-offset:2px; transition:color .2s; }
.consent-text a:hover { color:var(--cream); }
.consent-error {
  display:none; font-family:var(--sans); font-size:.68rem;
  color:rgba(220,110,80,.95); margin-top:.5rem; padding-left:1.65rem; line-height:1.5;
}
.consent-field.invalid .consent-error { display:block; }

/* ── 16. DONATE WIDGET ─────────────────────────────────────── */
.donate-notice {
  background:rgba(196,146,42,.07); border-left:3px solid var(--gold);
  padding:.9rem 1.2rem; border-radius:0 var(--radius) var(--radius) 0;
  font-family:var(--sans); font-size:.8rem; letter-spacing:.03em;
  color:var(--warm-dark); margin-bottom:2rem; line-height:1.65;
}
.donate-notice strong { font-weight:700; }
.donate-amounts { display:flex; gap:.65rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.amount-btn {
  font-family:var(--sans); font-size:.83rem; font-weight:500;
  border:1.5px solid var(--gold-aa); background:transparent; color:var(--ink);
  padding:.58rem 1.25rem; border-radius:var(--radius); cursor:pointer; transition:all .25s;
}
.amount-btn:hover,.amount-btn.active { background:var(--gold); border-color:var(--gold); color:var(--ink); }
.donate-custom {
  display:flex; align-items:center; border:1.5px solid var(--gold-aa);
  border-radius:var(--radius); overflow:hidden; margin-bottom:1.6rem; background:var(--white);
}
.donate-prefix {
  background:var(--parchment); border-right:1px solid rgba(196,146,42,.3);
  padding:.72rem 1rem; font-family:var(--serif); font-size:1.1rem; color:var(--warm-dark);
}
.donate-custom input {
  flex:1; border:none; outline:none; padding:.72rem 1rem;
  font-family:var(--body); font-size:1rem; color:var(--ink); background:transparent;
}
.donate-custom input:focus { outline:2px solid var(--gold); outline-offset:-2px; }
.donate-fine {
  font-family:var(--sans); font-size:.72rem; letter-spacing:.04em;
  color:var(--warm-dark); text-align:center; margin-top:1rem; line-height:1.65;
}

/* ── 17. GEO PROMPT ────────────────────────────────────────── */
.geo-prompt {
  background:rgba(196,146,42,.06); border:1px solid rgba(196,146,42,.2);
  border-radius:var(--radius); padding:.7rem 1rem; margin-bottom:1.2rem;
  font-family:var(--sans); font-size:.72rem; letter-spacing:.04em;
  color:var(--warm-dark); display:flex; align-items:center; gap:.75rem; line-height:1.5;
}
.geo-prompt button {
  font-family:var(--sans); font-size:.65rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  background:none; border:1px solid var(--gold-aa); color:var(--gold-aa);
  padding:.28rem .7rem; border-radius:var(--radius); cursor:pointer; white-space:nowrap;
  transition:all .2s; flex-shrink:0;
}
.geo-prompt button:hover { background:var(--gold); color:var(--ink); border-color:var(--gold); }
#geo-status { font-size:.62rem; color:#8a7a68; display:block; margin-top:2px; }

/* ── 18. CONTACT DETAILS ───────────────────────────────────── */
.contact-detail { display:flex; align-items:flex-start; gap:.7rem; margin-bottom:1rem; font-size:1rem; }
.ci-icon { width:17px; height:17px; color:var(--gold-light); flex-shrink:0; margin-top:4px; }
.contact-detail a { color:var(--gold-light); text-decoration:underline; text-underline-offset:3px; transition:color .3s; }
.contact-detail a:hover { color:var(--cream); }

/* ── 19. MAIN SITE FOOTER ──────────────────────────────────── */
.site-footer {
  background:var(--ink); padding:2.5rem clamp(1.5rem,6vw,4rem);
  text-align:center; border-top:1px solid rgba(196,146,42,.14);
}
.footer-logo { font-family:var(--serif); font-size:1.2rem; font-weight:300; font-style:italic; color:var(--gold-light); margin-bottom:1rem; display:block; }
.footer-links { display:flex; gap:1.5rem; justify-content:center; flex-wrap:wrap; margin-bottom:1.1rem; }
.footer-links a { font-family:var(--sans); font-size:.63rem; letter-spacing:.18em; text-transform:uppercase; color:#b0a090; text-decoration:none; transition:color .3s; border-radius:2px; }
.footer-links a:hover { color:var(--gold-light); }
.footer-copy { font-family:var(--sans); font-size:.63rem; letter-spacing:.08em; color:#7a6a5a; }
.footer-copy a { color:inherit; text-decoration:none; }

/* ── 20. UTILITY PAGE FOOTER ───────────────────────────────── */
.util-footer { background:var(--charcoal); padding:2rem clamp(1.5rem,6vw,4rem); border-top:1px solid rgba(196,146,42,.15); }
.util-footer-inner { max-width:760px; display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; }
.util-footer-brand { font-family:var(--serif); font-style:italic; font-size:1rem; font-weight:300; color:rgba(196,146,42,.65); }
.util-footer-links { display:flex; gap:1.25rem; flex-wrap:wrap; }
.util-footer-links a { font-family:var(--sans); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:#8a7a68; text-decoration:none; transition:color .3s; }
.util-footer-links a:hover { color:var(--gold-light); }
.util-footer-copy { font-family:var(--sans); font-size:.6rem; color:#5a4e42; margin-top:.75rem; width:100%; }

/* ── 21. UTILITY PAGE HERO BAND ─────────────────────────────── */
.page-hero { padding:clamp(3rem,6vw,5rem) clamp(1.5rem,6vw,4rem); position:relative; overflow:hidden; }
.page-hero::before { content:''; position:absolute; inset:0; pointer-events:none; }
.page-hero-inner { max-width:760px; position:relative; }
.page-hero-badge {
  font-family:var(--sans); font-size:.62rem; font-weight:500;
  letter-spacing:.32em; text-transform:uppercase; color:var(--gold-light);
  margin-bottom:1rem; display:flex; align-items:center; gap:.6rem;
  animation:fadeUp .7s .1s both;
}
.page-hero-badge::before { content:''; display:block; width:18px; height:1px; background:var(--gold-light); }
.page-hero h1 { font-family:var(--serif); font-size:clamp(2.2rem,5vw,3.5rem); font-weight:300; line-height:1.1; letter-spacing:-.01em; animation:fadeUp .7s .2s both; }
.page-hero h1 em { font-style:italic; }
.page-hero-meta { font-family:var(--sans); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:#6a5a4a; margin-top:1rem; animation:fadeUp .7s .3s both; }
.page-hero-rule { width:40px; height:2px; background:var(--gold); margin-top:1.5rem; animation:fadeUp .7s .4s both; }

/* ── 22. PROSE / LEGAL CONTENT ─────────────────────────────── */
.content-inner { max-width:720px; }
.toc { background:var(--parchment); border:1px solid rgba(196,146,42,.25); border-radius:4px; padding:1.5rem 2rem; margin-bottom:3rem; }
.toc-title { font-family:var(--sans); font-size:.65rem; font-weight:600; letter-spacing:.25em; text-transform:uppercase; color:var(--gold-aa); margin-bottom:.75rem; }
.toc ol { padding-left:1.2rem; }
.toc li { margin-bottom:.35rem; }
.toc a { font-family:var(--sans); font-size:.82rem; color:var(--warm-dark); text-decoration:none; transition:color .2s; }
.toc a:hover { color:var(--gold); }
.prose-section { margin-bottom:3rem; padding-bottom:3rem; border-bottom:1px solid rgba(196,146,42,.15); }
.prose-section:last-child { border-bottom:none; }
.prose-section h2 { font-family:var(--serif); font-size:clamp(1.4rem,2.5vw,1.9rem); font-weight:400; color:var(--ink); margin-bottom:.35rem; padding-top:.5rem; }
.section-num { font-family:var(--sans); font-size:.6rem; letter-spacing:.25em; text-transform:uppercase; color:var(--gold-aa); display:block; margin-bottom:.3rem; font-weight:500; }
.prose-section p { color:var(--warm-dark); margin-bottom:1rem; font-size:1.05rem; line-height:1.8; }
.prose-section p:last-child { margin-bottom:0; }
.prose-section strong { color:var(--ink); font-weight:600; }
.prose-section a { color:var(--gold-aa); text-decoration:underline; text-underline-offset:3px; transition:color .2s; }
.prose-section a:hover { color:var(--gold); }
.prose-section code { font-family:monospace; font-size:.88em; background:rgba(196,146,42,.1); padding:.1em .4em; border-radius:2px; color:var(--warm-dark); }
.notice-box {
  background:rgba(196,146,42,.08); border-left:3px solid var(--gold);
  padding:1rem 1.25rem; border-radius:0 var(--radius) var(--radius) 0;
  margin-bottom:1.25rem; font-family:var(--sans); font-size:.82rem; color:var(--warm-dark); line-height:1.65;
}
.notice-box strong       { color:var(--ink); font-weight:700; }
.notice-box.strong-notice{ background:rgba(26,20,16,.04); border-color:var(--ink); }

/* ── 23. RESPONSIVE ────────────────────────────────────────── */
@media (max-width:768px) {
  .nav-links     { display:none; }
  .nav-hamburger { display:flex; }
  .util-nav, .util-nav-bare { height:56px; }
  .donate-amounts { gap:.5rem; }
  .amount-btn     { padding:.48rem .85rem; font-size:.76rem; }
  .util-footer-inner { flex-direction:column; align-items:flex-start; }
}
@media (max-width:480px) {
  .btn-gold, .btn-ghost { width:100%; max-width:280px; text-align:center; }
  .footer-links { gap:1rem; }
}