@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Public+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#F8F3E7;
  --surface:#FFFFFF;
  --surface-2:#EFE4CC;
  --ink:#33241A;
  --ink-soft:#6B5847;
  --tan:#C9A574;
  --tan-deep:#A67C46;
  --green:#1F5C4E;
  --green-deep:#163F37;
  --green-ink:#EAF3EF;
  --line:rgba(51,36,26,0.14);
  --shadow: 0 20px 45px -25px rgba(51,36,26,0.45);
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1B140E; --surface:#241B13; --surface-2:#2A2016; --ink:#F3E9D8; --ink-soft:#C9B69C;
    --tan:#D9B77E; --tan-deep:#B8935A; --green:#3FA88B; --green-deep:#2E8A70; --green-ink:#0E1A16;
    --line:rgba(243,233,216,0.16); --shadow: 0 20px 45px -25px rgba(0,0,0,0.6);
  }
}
:root[data-theme="dark"]{
  --bg:#1B140E; --surface:#241B13; --surface-2:#2A2016; --ink:#F3E9D8; --ink-soft:#C9B69C;
  --tan:#D9B77E; --tan-deep:#B8935A; --green:#3FA88B; --green-deep:#2E8A70; --green-ink:#0E1A16;
  --line:rgba(243,233,216,0.16); --shadow: 0 20px 45px -25px rgba(0,0,0,0.6);
}

*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  background:var(--bg); color:var(--ink);
  font-family:'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height:1.55;
}
h1,h2,h3{ font-family:'Fraunces', Georgia, serif; font-weight:600; text-wrap:balance; margin:0; color:var(--ink); }
p{ margin:0; }
a{ color:inherit; }
img{ max-width:100%; display:block; }
.wrap{ max-width:1120px; margin-inline:auto; padding-inline:20px; }
section{ padding-block:64px; }
@media (min-width:820px){ section{ padding-block:96px; } }

/* header */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(248,243,231,0.9); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) header.site{ background:rgba(27,20,14,0.9); } }
:root[data-theme="dark"] header.site{ background:rgba(27,20,14,0.9); }
.header-row{ max-width:1120px; margin-inline:auto; padding-inline:20px; display:flex; align-items:center; gap:10px; min-height:64px; }
.brand{ display:flex; align-items:center; gap:8px; text-decoration:none; flex:1 1 auto; min-width:0; }
.brand img{ height:34px; width:auto; flex:0 0 auto; }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.brand-text strong{ font-family:'Fraunces',serif; font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand-text span{ font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); white-space:nowrap; }
@media (max-width:400px){ .brand-text span{ display:none; } .brand img{ height:30px; } }
nav.main{ display:none; gap:26px; margin-left:auto; font-size:14.5px; font-weight:500; }
nav.main a{ text-decoration:none; color:var(--ink-soft); padding-block:4px; border-bottom:1px solid transparent; }
nav.main a:hover, nav.main a[aria-current="page"]{ color:var(--ink); border-color:var(--tan); }
@media (min-width:860px){ nav.main{ display:flex; } }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Public Sans',sans-serif; font-weight:700; font-size:14.5px;
  padding:11px 20px; border-radius:999px; text-decoration:none;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
}
.btn-primary{ background:var(--green); color:var(--green-ink); box-shadow:var(--shadow); }
.btn-primary:hover{ background:var(--green-deep); }
.btn-ghost{ border-color:var(--line); color:var(--ink); background:transparent; }
.btn-ghost:hover{ border-color:var(--tan-deep); }
.header-row .btn{ flex:0 0 auto; font-size:12.5px; padding:8px 14px; }
@media (min-width:520px){ .header-row .btn{ font-size:13.5px; padding:9px 16px; } }

/* hero */
.hero .wrap{ display:grid; gap:40px; align-items:center; padding-block:56px 40px; }
@media (min-width:900px){ .hero .wrap{ grid-template-columns:1.05fr .95fr; padding-block:76px 56px; } }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--green); margin-bottom:18px; }
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--green); }
.hero h1{ font-size:clamp(34px,5vw,54px); line-height:1.05; letter-spacing:-.01em; }
.hero h1 em{ font-style:italic; color:var(--green); }
.hero p.lede{ margin-top:20px; font-size:17px; color:var(--ink-soft); max-width:46ch; }
.cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.reg-note{ margin-top:26px; font-size:12.5px; color:var(--ink-soft); display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.reg-note b{ color:var(--ink); }

.hero-art{ position:relative; }
.hero-art .frame{
  position:relative; aspect-ratio:4/4.3; overflow:hidden;
  clip-path: path('M0,64 C0,28.6 28.6,0 64,0 L400,0 C435.4,0 464,28.6 464,64 L464,480 L0,480 Z');
  background:var(--surface-2);
}
.hero-art .frame img{ width:100%; height:100%; object-fit:cover; }
.hero-art .badge{
  position:absolute; left:-14px; bottom:26px;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow);
  border-radius:14px; padding:14px 18px; max-width:220px;
}
.hero-art .badge .n{ font-family:'Fraunces',serif; font-size:26px; font-weight:600; color:var(--green); }
.hero-art .badge .l{ font-size:12px; color:var(--ink-soft); }
@media (max-width:899px){ .hero-art .badge{ left:auto; right:12px; } }

/* page header (for donations / membership pages) */
.page-hero{ padding-block:56px 20px; }
@media (min-width:820px){ .page-hero{ padding-block:72px 20px; } }
.page-hero .wrap{ max-width:760px; }
.page-hero h1{ font-size:clamp(32px,4.6vw,48px); margin-top:10px; }
.page-hero p.lede{ margin-top:16px; font-size:16.5px; color:var(--ink-soft); max-width:56ch; }

/* stat band */
.stats{ background:var(--surface-2); padding-block:44px; border-block:1px solid var(--line); }
.stats .wrap{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }
@media (min-width:700px){ .stats .wrap{ grid-template-columns:repeat(4,1fr); } }
.stat b{ display:block; font-family:'Fraunces',serif; font-weight:600; font-size:clamp(26px,3.4vw,36px); font-variant-numeric:tabular-nums; color:var(--ink); }
.stat span{ font-size:12.5px; color:var(--ink-soft); }

/* about */
.about .wrap{ display:grid; gap:48px; }
@media (min-width:900px){ .about .wrap{ grid-template-columns:1.15fr .85fr; } }
.kicker{ font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--tan-deep); }
.about h2{ font-size:clamp(26px,3.4vw,36px); margin-top:10px; margin-bottom:20px; }
.about p + p{ margin-top:14px; }
.about-body p{ color:var(--ink-soft); font-size:15.5px; max-width:62ch; }
.quote{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:28px 26px; box-shadow:var(--shadow); align-self:start; }
.quote p{ font-family:'Fraunces',serif; font-style:italic; font-size:19px; line-height:1.5; color:var(--ink); }
.quote footer{ margin-top:16px; font-size:13px; color:var(--ink-soft); font-style:normal; }

/* work cards */
.section-head{ max-width:640px; margin-bottom:40px; }
.section-head h2{ font-size:clamp(26px,3.4vw,36px); }
.section-head p{ margin-top:12px; color:var(--ink-soft); font-size:15.5px; }
.cards{ display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:700px){ .cards{ grid-template-columns:repeat(3,1fr); } }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:26px; display:flex; flex-direction:column; gap:12px; }
.card .ic{ width:42px; height:42px; border-radius:10px; background:var(--surface-2); display:flex; align-items:center; justify-content:center; color:var(--green); }
.card h3{ font-size:18px; }
.card p{ font-size:14.5px; color:var(--ink-soft); }

/* gallery / project */
.project .wrap{ display:grid; gap:44px; }
@media (min-width:900px){ .project .wrap{ grid-template-columns:.9fr 1.1fr; align-items:center; } }
.gallery{ display:grid; grid-template-columns:1.4fr 1fr; grid-template-rows:1fr 1fr; gap:12px; height:100%; min-height:320px; }
.gallery img{ width:100%; height:100%; object-fit:cover; border-radius:14px; }
.gallery a:first-child{ grid-row:1 / span 2; }
.gallery a{ display:block; height:100%; border-radius:14px; overflow:hidden; border:1px solid var(--line); }
.project-copy .tag{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--green); background:var(--green-ink); padding:6px 12px; border-radius:999px; margin-bottom:16px; }
.project-copy h2{ font-size:clamp(24px,3.2vw,32px); margin-bottom:14px; }
.project-copy p{ color:var(--ink-soft); font-size:15.5px; max-width:52ch; }
.project-copy p + p{ margin-top:12px; }
.mini-stats{ display:flex; gap:26px; margin-top:22px; flex-wrap:wrap; }
.mini-stats div b{ display:block; font-family:'Fraunces',serif; font-size:22px; }
.mini-stats div span{ font-size:12px; color:var(--ink-soft); }

/* membership teaser (home) */
.teaser{ background:var(--surface-2); border:1px solid var(--line); border-radius:20px; padding:34px; display:flex; flex-direction:column; gap:22px; }
@media (min-width:760px){ .teaser{ flex-direction:row; align-items:center; justify-content:space-between; gap:32px; } }
.teaser h2{ font-size:clamp(22px,2.8vw,28px); }
.teaser p{ margin-top:10px; color:var(--ink-soft); font-size:15px; max-width:46ch; }
.teaser .actions{ display:flex; flex-direction:column; gap:10px; flex:0 0 auto; min-width:200px; }
.teaser .fee-pill{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--green); margin-bottom:2px; }

/* membership (full page + reused) */
.membership{ background:var(--green); color:var(--green-ink); }
.membership .wrap{ display:grid; gap:40px; }
@media (min-width:900px){ .membership .wrap{ grid-template-columns:1fr 1fr; align-items:center; } }
.membership .kicker{ color:var(--tan); }
.membership h2{ color:var(--green-ink); font-size:clamp(26px,3.6vw,38px); margin-top:10px; }
.membership p.lede{ color:rgba(234,243,239,0.85); margin-top:16px; font-size:15.5px; max-width:48ch; }
.steps{ list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; }
.steps li{ display:flex; gap:14px; align-items:flex-start; font-size:14.5px; }
.steps b.num{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:rgba(234,243,239,0.16); display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-size:13px; }
.fee-card{ background:var(--green-ink); color:var(--ink); border-radius:20px; padding:34px 30px; box-shadow:0 30px 60px -30px rgba(0,0,0,.5); }
.fee-card .amount{ font-family:'Fraunces',serif; font-size:56px; font-weight:600; line-height:1; }
.fee-card .amount sup{ font-size:20px; top:-1.4em; }
.fee-card .per{ color:var(--ink-soft); font-size:14px; margin-top:6px; }
.fee-card .btn-primary{ width:100%; margin-top:24px; padding-block:14px; font-size:15.5px; }
.fee-card .fine{ margin-top:14px; font-size:12px; color:var(--ink-soft); text-align:center; }
.membership .btn-ghost{ border-color:rgba(234,243,239,0.4); color:var(--green-ink); }

/* why-it-matters + faq (membership page) */
.why .card p{ font-size:14.5px; }
.faq .wrap{ max-width:780px; }
.faq details{ border-bottom:1px solid var(--line); padding-block:18px; }
.faq summary{ cursor:pointer; font-weight:600; font-size:15.5px; list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-size:20px; color:var(--green); flex:0 0 auto; }
.faq details[open] summary::after{ content:"\2212"; }
.faq .a{ margin-top:12px; color:var(--ink-soft); font-size:14.5px; max-width:64ch; }

/* donations (under development) */
.dev-card{ background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:44px 34px; text-align:center; max-width:560px; margin-inline:auto; }
.dev-badge{ display:inline-flex; align-items:center; gap:8px; background:var(--surface-2); color:var(--tan-deep); font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:8px 16px; border-radius:999px; margin-bottom:20px; }
.dev-card h2{ font-size:clamp(24px,3vw,30px); }
.dev-card p{ margin-top:14px; color:var(--ink-soft); font-size:15px; }
.dev-card .cta-row{ justify-content:center; margin-top:26px; }

/* contact */
.contact .wrap{ max-width:640px; }
.info-list{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:16px; }
.info-list li{ display:flex; gap:14px; font-size:14.5px; }
.info-list .ic{ color:var(--green); flex:0 0 auto; margin-top:2px; }
.info-list b{ display:block; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin-bottom:2px; }

/* footer */
footer.site{ border-top:1px solid var(--line); padding-block:40px; }
footer.site .wrap{ display:flex; flex-direction:column; gap:22px; }
@media (min-width:700px){ footer.site .wrap{ flex-direction:row; align-items:center; justify-content:space-between; } }
.foot-brand{ display:flex; align-items:center; gap:10px; }
.foot-brand img{ height:26px; }
.foot-brand span{ font-size:12.5px; color:var(--ink-soft); }
.foot-nav{ display:flex; gap:18px; font-size:13px; }
.foot-nav a{ text-decoration:none; color:var(--ink-soft); }
.foot-nav a:hover{ color:var(--ink); }
footer.site .legal{ font-size:12px; color:var(--ink-soft); }