@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Nunito:wght@400;600;700&display=swap");
:root{
  --cream:#fffdf6;--yellow:#fbe9a0;--yellow-2:#fff6d3;--pink:#e1dbf3;--pink-2:#f2effb;--blue:#d3e6cc;--blue-2:#eef6ea;
  --ink:#38405c;--muted:#5d6783;--accent:#55558c;--accent-dark:#40406e;--line:#e8e3d3;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Nunito",system-ui,sans-serif;font-size:1.08rem;color:var(--ink);line-height:1.7;background:var(--cream)}
h1,h2,h3,.brand{font-family:"Fraunces",Georgia,serif;font-weight:700}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}

header{background:#fffdf6ee;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.nav{max-width:1000px;margin:0 auto;padding:12px 20px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.brand{font-size:1.5rem;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:10px}
.brand svg{width:38px;height:38px}
nav{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
nav a{color:var(--ink);text-decoration:none;padding:6px 14px;border-radius:999px;font-weight:700}
nav a:hover,nav a.current{background:var(--yellow)}
nav a.nav-donate{background:var(--accent);color:#fff}
nav a.nav-donate:hover{background:var(--accent-dark)}

main{max-width:1000px;margin:0 auto;padding:0 20px 60px}

/* Sunrise hero */
.hills{display:block;width:100%;height:auto;aspect-ratio:1440/328;min-height:96px;margin-top:-6px}
.sunrise{animation:rise 4s ease-out both}
@keyframes rise{from{transform:translateY(70px);opacity:.3}to{transform:none;opacity:1}}
.halo{animation:glow 6s ease-in-out 4s infinite}
@keyframes glow{50%{opacity:.6}}
.hero-wrap{background:linear-gradient(#ddd6f3 0%,#efeaf8 30%,#fffbe8 62%,#fdf0b4 100%);position:relative;overflow:hidden}
.hero{position:relative;display:grid;grid-template-columns:1fr 300px;gap:36px;align-items:center;text-align:left;padding:32px 20px 0;max-width:1000px;margin:0 auto;z-index:1}
.hero h1{font-size:clamp(2.3rem,6vw,3.4rem);margin:0 0 8px;line-height:1.1}
.mission{font-size:1.15rem;margin:0 0 18px}

.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;padding:15px 34px;border-radius:999px;font-family:"Nunito",sans-serif;font-weight:700;font-size:1.1rem;border:0;cursor:pointer;box-shadow:0 6px 16px #3d5f8c33;transition:transform .15s,background .15s}
.btn:hover{background:var(--accent-dark);transform:translateY(-2px)}
.btn.soft{background:#fff;color:var(--accent);border:2px solid var(--accent);box-shadow:none}
.btn.soft:hover{background:var(--blue-2)}

.card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:30px;margin:28px 0;box-shadow:0 8px 24px #c9b79a22}
.card h2{margin:0 0 6px;font-size:1.7rem}
.card.pink{background:var(--pink-2);border-color:var(--pink)}
.card.yellow{background:var(--yellow-2);border-color:var(--yellow)}
.card.blue{background:var(--blue-2);border-color:var(--blue)}
.pull{margin-top:10px;position:relative;z-index:3}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.lawsuit h3{margin:18px 0 2px;font-size:1.25rem}
.muted{color:var(--muted);margin:0 0 14px}
ul.clean{padding-left:20px;margin:8px 0}
ul.clean li{margin:6px 0}

.bar{height:30px;background:var(--blue);border-radius:999px;overflow:hidden}
.fill{height:100%;background:linear-gradient(90deg,#b7aee0,#f6c935);border-radius:999px;transition:width 1.6s ease}
.bar-label{margin:10px 0 0;font-size:1.1rem}
.pct{color:var(--muted)}

h1.page{font-size:clamp(2rem,6vw,3rem);padding-top:44px;margin:0 0 10px}
.choices{display:flex;flex-wrap:wrap;gap:12px;margin:14px 0 8px}
.amount,.freq{padding:12px 26px;border:2px solid var(--yellow);background:#fff;border-radius:999px;font:700 1.1rem "Nunito",sans-serif;color:var(--ink);cursor:pointer}
.amount.active,.amount:hover,.freq.active,.freq:hover{border-color:var(--accent);background:var(--accent);color:#fff}
.covers{min-height:1.7em;color:var(--muted);margin:6px 0 20px}
.notice{background:#fff;border:1px solid var(--pink);border-left:6px solid var(--accent);padding:14px 18px;border-radius:12px;margin-top:20px}
.placeholder{background:var(--yellow-2);border:2px dashed var(--yellow);border-radius:24px;padding:50px;text-align:center;color:var(--muted)}
.portrait{width:100%;max-width:300px;aspect-ratio:4/5;background:var(--pink-2);border:2px dashed var(--pink);border-radius:150px 150px 24px 24px;display:flex;align-items:center;justify-content:center;color:var(--muted);text-align:center}
.bio{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start}
.bio>div:last-child{flex:1;min-width:260px}

footer{background:var(--blue-2);border-top:1px solid var(--blue);text-align:center;color:var(--muted);font-size:.95rem;padding:30px 20px}
footer p{margin:4px auto;max-width:700px}

@media (prefers-reduced-motion:reduce){.halo,.sunrise,.daisy{animation:none}.fill{transition:none}html{scroll-behavior:auto}}

/* Case tracker */
.key{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:16px 22px;margin:20px 0}
.status{display:inline-flex;align-items:center;gap:8px;font-weight:700;padding:5px 14px 5px 10px;border-radius:999px;background:#fff;border:2px solid currentColor;white-space:nowrap}
.status::before{content:"";width:14px;height:14px;border-radius:50%;background:currentColor}
.status.pending{color:#a8780a}
.status.closed{color:#5f6f8f}
.status.success{color:#2f8553}
ul.cases{list-style:none;padding:0;margin:0}
.case{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin:16px 0;padding:22px 26px}
.case h2{font-size:1.3rem;margin:0}
.case p{margin:4px 0 0}
.case:has(.pending){border-left:8px solid #f3c24d}
.case:has(.closed){border-left:8px solid #9aa7c4}
.case:has(.success){border-left:8px solid #6dbf8b}

.daisy{transform-origin:700px 215px;animation:spin 140s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Featured photo */
.photo{margin:22px 0 10px}
.photo img{display:block;width:100%;height:auto;border-radius:24px;box-shadow:0 10px 30px #55558c33}

/* Home page motion */
.sunwrap{transform:translateY(calc(var(--sy,0) * 1px))}
.rays{transform-origin:700px 218px;animation:sway 14s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-3deg);opacity:.8}to{transform:rotate(3deg);opacity:1}}
.fog{animation:fog 26s ease-in-out infinite alternate}
.f2{animation-duration:34s;animation-direction:alternate-reverse}
@keyframes fog{from{transform:translateX(-90px)}to{transform:translateX(90px)}}
.hero-text>*,.hero-photo{animation:fadeup 1.2s ease-out both}
.hero h1{animation-delay:.2s}.hero .mission{animation-delay:.6s}.hero-photo{animation-delay:.9s}.hero .btn{animation-delay:1s}
@keyframes fadeup{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rays,.fog,.hero-text>*,.hero-photo{animation:none}.sunwrap{transform:none}}

/* Tagline, mission, bio */
.tagline{font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:1.15rem;margin:0 0 18px;color:#4b4b7c}
.hero .tagline{animation-delay:.8s}
.hero .btn{animation-delay:1.2s}
.mission-card p{font-size:1.2rem;margin:0}
.section-title{margin:36px 0 12px;font-size:1.5rem}
.portrait-img{display:block;width:260px;max-width:100%;height:auto;flex:0 0 auto;border-radius:24px;box-shadow:0 10px 30px #55558c33;border:4px solid #fff}
.bio-text h2{margin:0 0 12px;font-size:1.75rem;font-family:"Nunito",system-ui,sans-serif;font-weight:800;letter-spacing:-.01em}
.bio-text p{margin:0 0 16px}

/* Contact form, TRC */
html{scroll-padding-top:90px}
.ph{color:var(--muted);font-style:italic}
.contact-list{list-style:none;padding:0;margin:8px 0 18px}
.contact-list li{margin:6px 0}
#contact-form label{display:block;font-weight:700;margin:16px 0 6px}
#contact-form input,#contact-form textarea{width:100%;padding:12px 14px;border:2px solid var(--line);border-radius:12px;font:inherit;color:var(--ink);background:#fff}
#contact-form input:focus,#contact-form textarea:focus{border-color:var(--accent);outline:none}
#contact-form .btn{margin-top:18px}
.hp{position:absolute;left:-9999px}
.small{font-size:.92rem}
#form-status{font-weight:700;margin:10px 0 0}
.eyebrow{font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.85rem;color:var(--accent);margin:0 0 4px}
.deadline{font-size:clamp(1.8rem,5vw,2.6rem);margin:0 0 8px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.card h3{margin:20px 0 6px}
nav a{padding:6px 12px}

/* Hero photo, right of the title, overlapping the trees */
.hero-photo{margin:0 0 -110px;position:relative;z-index:3}
.hero-photo img{display:block;width:100%;height:auto;border:6px solid #fff;border-radius:14px;box-shadow:0 12px 30px #55558c44;transform:rotate(2deg)}
@media (max-width:820px){
  .hero{grid-template-columns:1fr;text-align:center;gap:20px}
  .hero-photo{width:min(230px,66%);margin:0 auto -36px}
}
@media (max-width:700px){header{position:static}html{scroll-padding-top:16px}}

.card h1{margin:0 0 10px;font-size:1.7rem}
.mission-card{margin-top:40px}

[hidden]{display:none!important}