:root{
  --teal-900:#0f3436;
  --teal-800:#164144;
  --gold-500:#c99a3b;
  --gold-600:#ad7f2a;
  --gold-300:#e3c47c;
  --cream-100:#faf4e6;
  --cream-50:#fffcf5;
  --ink-900:#20302e;
  --ink-700:#48584f;

  --bg: var(--cream-100);
  --bg-card: var(--cream-50);
  --text: var(--ink-900);
  --text-soft: var(--ink-700);
  --accent-strong: var(--gold-600);
  --panel-dark-bg: var(--teal-900);
  --panel-dark-text: var(--cream-100);
  --panel-dark-text-soft: rgba(250,244,230,0.78);
  --hairline: rgba(32,48,46,0.14);
  --hairline-on-dark: rgba(250,244,230,0.22);
  --card-shadow: 0 1px 2px rgba(15,52,54,0.06), 0 8px 24px rgba(15,52,54,0.07);
  --focus-ring: #1f5457;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg: var(--teal-900);
    --bg-card: #143c3e;
    --text: var(--cream-100);
    --text-soft: rgba(250,244,230,0.75);
    --accent-strong: var(--gold-300);
    --panel-dark-bg: #0a2426;
    --panel-dark-text: var(--cream-100);
    --panel-dark-text-soft: rgba(250,244,230,0.72);
    --hairline: rgba(250,244,230,0.16);
    --hairline-on-dark: rgba(250,244,230,0.22);
    --card-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
    --focus-ring: var(--gold-300);
  }
}
:root[data-theme="dark"]{
  --bg: var(--teal-900);
  --bg-card: #143c3e;
  --text: var(--cream-100);
  --text-soft: rgba(250,244,230,0.75);
  --accent-strong: var(--gold-300);
  --panel-dark-bg: #0a2426;
  --panel-dark-text: var(--cream-100);
  --panel-dark-text-soft: rgba(250,244,230,0.72);
  --hairline: rgba(250,244,230,0.16);
  --hairline-on-dark: rgba(250,244,230,0.22);
  --card-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
  --focus-ring: var(--gold-300);
}

*{box-sizing:border-box;}
html{background:var(--bg);}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Karla',ui-sans-serif,system-ui,sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Frank Ruhl Libre',Georgia,'Times New Roman',serif;
  font-weight:600;
  text-wrap:balance;
  margin:0;
  color:var(--text);
}
a{color:inherit;}
.wrap{max-width:960px;margin:0 auto;padding:0 28px;}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:40;
  background:var(--panel-dark-bg);
  border-bottom:1px solid var(--hairline-on-dark);
}
.header-inner{
  max-width:960px;margin:0 auto;padding:0 28px;
  display:flex;align-items:center;justify-content:space-between;
  height:70px;
}
.wordmark{
  font-family:'Frank Ruhl Libre',serif;
  font-weight:700;
  font-size:1.28rem;
  color:var(--panel-dark-text);
  text-decoration:none;
  display:flex;align-items:baseline;gap:.5em;
}
.wordmark span{
  font-family:'Karla',sans-serif;
  font-weight:600;
  font-size:.6rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-300);
  opacity:.9;
}
nav.primary-nav{display:flex;align-items:center;gap:28px;}
nav.primary-nav a.nav-link{
  color:var(--panel-dark-text-soft);
  text-decoration:none;
  font-size:.94rem;
  font-weight:500;
  padding:6px 2px;
  border-bottom:1px solid transparent;
}
nav.primary-nav a.nav-link:hover{color:var(--panel-dark-text);border-bottom-color:var(--gold-300);}
nav.primary-nav a.nav-link[aria-current="page"]{color:var(--panel-dark-text);border-bottom-color:var(--gold-500);}
.nav-links-group{display:flex;gap:26px;}
@media (max-width:700px){.nav-links-group{display:none;}}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:'Karla',sans-serif;font-weight:700;font-size:.95rem;
  padding:12px 24px;border-radius:3px;border:1px solid transparent;
  cursor:pointer;text-decoration:none;letter-spacing:.01em;
  transition:transform .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
}
.btn:active{transform:translateY(1px);}
.btn-gold{background:var(--gold-500);color:#20260f;border-color:var(--gold-500);}
.btn-gold:hover{background:var(--gold-600);}
.btn-outline-dark{background:transparent;color:var(--panel-dark-text);border-color:var(--hairline-on-dark);}
.btn-outline-dark:hover{border-color:var(--gold-300);color:var(--gold-300);}
.btn-outline-light{background:transparent;color:var(--text);border-color:var(--hairline);}
.btn-outline-light:hover{border-color:var(--accent-strong);color:var(--accent-strong);}
.btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;}

/* ---------- hero (home only) ---------- */
.hero{
  background:
    radial-gradient(ellipse 900px 480px at 82% -10%, rgba(201,154,59,0.16), transparent 60%),
    var(--panel-dark-bg);
  color:var(--panel-dark-text);
  padding:80px 0 68px;
  border-bottom:1px solid var(--hairline-on-dark);
}
.hero .eyebrow{
  font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-300);margin-bottom:18px;
}
.hero h1{
  font-size:clamp(2rem, 4.4vw, 3.1rem);
  line-height:1.14;
  max-width:16ch;
  color:var(--panel-dark-text);
}
.hero p.lede{
  margin-top:20px;max-width:52ch;
  font-size:1.1rem;line-height:1.6;
  color:var(--panel-dark-text-soft);
}
.hero .cta-row{display:flex;gap:16px;margin-top:32px;flex-wrap:wrap;}

/* ---------- page header (about/contact) ---------- */
.page-header{
  background:var(--panel-dark-bg);color:var(--panel-dark-text);
  padding:56px 0 44px;border-bottom:1px solid var(--hairline-on-dark);
}
.page-header .eyebrow{
  font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-300);margin-bottom:14px;
}
.page-header h1{font-size:clamp(1.8rem,3.6vw,2.5rem);color:var(--panel-dark-text);max-width:22ch;}
.page-header p{margin-top:14px;max-width:56ch;color:var(--panel-dark-text-soft);font-size:1.05rem;}

/* ---------- generic sections ---------- */
section{padding:64px 0;}
.section-head{max-width:60ch;margin-bottom:32px;}
.section-head .eyebrow{
  font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-strong);margin-bottom:12px;
}
.section-head h2{font-size:clamp(1.5rem,2.8vw,1.95rem);}
.prose{max-width:66ch;font-size:1.05rem;color:var(--text-soft);}
.prose p{margin:0 0 18px;}
.prose p:last-child{margin-bottom:0;}

.objects-quote{
  border-left:3px solid var(--accent-strong);
  padding-left:20px;
  font-size:1.05rem;
  color:var(--text-soft);
  margin:0;
}
.objects-quote small{
  display:block;margin-top:10px;font-size:.78rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft);opacity:.75;
}

/* ---------- registered details card ---------- */
.reg-card{
  background:var(--bg-card);border:1px solid var(--hairline);border-radius:6px;
  padding:32px 30px;box-shadow:var(--card-shadow);
}
.reg-card dl{margin:0;display:grid;gap:22px;grid-template-columns:repeat(2,1fr);}
@media (max-width:600px){.reg-card dl{grid-template-columns:1fr;}}
.reg-card dt{font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft);}
.reg-card dd{margin:6px 0 0;font-size:1.12rem;font-weight:600;line-height:1.4;}

.about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start;}
@media (max-width:780px){.about-grid{grid-template-columns:1fr;}}

/* ---------- how we help ---------- */
.help-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
@media (max-width:700px){.help-grid{grid-template-columns:1fr;}}
.help-card{
  background:var(--bg-card);border:1px solid var(--hairline);border-radius:6px;
  padding:28px 24px;box-shadow:var(--card-shadow);
}
.help-card h3{font-size:1.1rem;margin-bottom:10px;}
.help-card p{margin:0;color:var(--text-soft);font-size:.98rem;}

/* ---------- contact page extras ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
@media (max-width:700px){.contact-grid{grid-template-columns:1fr;}}
.contact-card{
  background:var(--bg-card);border:1px solid var(--hairline);border-radius:6px;
  padding:26px 24px;box-shadow:var(--card-shadow);
}
.contact-card h3{font-size:1rem;margin-bottom:8px;letter-spacing:.02em;}
.contact-card p{margin:0;color:var(--text-soft);font-size:.98rem;}
.contact-card a.mail{color:var(--accent-strong);font-weight:700;text-decoration:none;font-size:1.05rem;}
.contact-card a.mail:hover{text-decoration:underline;}
address{font-style:normal;}

/* ---------- donate banner ---------- */
.donate-banner{
  background:var(--panel-dark-bg);color:var(--panel-dark-text);
  border-top:1px solid var(--hairline-on-dark);border-bottom:1px solid var(--hairline-on-dark);
  text-align:center;
}
.donate-banner h2{color:var(--panel-dark-text);font-size:clamp(1.5rem,3vw,2.05rem);max-width:24ch;margin:0 auto;}
.donate-banner .cta-row{justify-content:center;margin-top:26px;}

/* ---------- footer ---------- */
footer{background:var(--panel-dark-bg);color:var(--panel-dark-text-soft);padding:40px 0 32px;}
.footer-grid{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:baseline;}
footer .foot-note{max-width:40ch;font-size:.88rem;line-height:1.7;margin-top:6px;}
footer .foot-links{display:flex;gap:22px;font-size:.9rem;}
footer .foot-links a{text-decoration:none;color:var(--panel-dark-text-soft);}
footer .foot-links a:hover{color:var(--gold-300);}
.foot-bottom{
  margin-top:28px;padding-top:20px;border-top:1px solid var(--hairline-on-dark);
  font-size:.82rem;color:var(--panel-dark-text-soft);opacity:.85;
}

/* ---------- donate modal ---------- */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(15,52,54,0.55);
  display:flex;align-items:center;justify-content:center;padding:20px;
  z-index:100;
}
.modal-backdrop[hidden]{display:none;}
.modal-card{
  background:var(--bg-card);border-radius:8px;max-width:480px;width:100%;
  max-height:88vh;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,0.35);
}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--hairline);
}
.modal-head h2{font-size:1.05rem;}
.modal-close{
  background:none;border:none;font-size:1.4rem;line-height:1;cursor:pointer;
  color:var(--text-soft);padding:4px 8px;
}
.modal-close:hover{color:var(--text);}
.modal-body{flex:1;min-height:420px;position:relative;}
.modal-body iframe{width:100%;height:100%;min-height:420px;border:none;display:block;}
.modal-fallback{
  padding:12px 20px;font-size:.85rem;color:var(--text-soft);
  border-top:1px solid var(--hairline);text-align:center;
}
.modal-fallback a{color:var(--accent-strong);font-weight:600;text-decoration:none;}
.modal-fallback a:hover{text-decoration:underline;}