/* ═══════════════════════════════════════════════════════════════════
   donor.advised.fund — coordination infrastructure
   No JavaScript. CSS-only nav, scroll-driven reveals, native form.
   Type: EB Garamond + Inter (self-hosted; system fallback until vendored).
   ═══════════════════════════════════════════════════════════════════ */

/* ---- Fonts: local() first, then /assets/fonts/ woff2 (drop files to upgrade) ---- */
@font-face{font-family:"EB Garamond";src:local("EB Garamond"),url("/assets/fonts/ebgaramond.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:local("EB Garamond Italic"),url("/assets/fonts/ebgaramond-italic.woff2") format("woff2");font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:local("Inter"),url("/assets/fonts/inter.woff2") format("woff2");font-weight:300 600;font-style:normal;font-display:swap}

:root{
  --ink:#1a1714; --ink-soft:#3d3731; --ink-muted:#6b6259; --ink-faint:#9a8f84;
  --surface:#faf8f5; --surface-warm:#f3efe9; --surface-deep:#ece6dd; --white:#fff;
  --border:#ddd5ca; --border-light:#e8e2da;
  --accent:#6b2d3e; --accent-hover:#7d3a4c; --green:#2d4a3e;

  --serif:"EB Garamond","Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --text-xs:.75rem; --text-sm:.8125rem; --text-base:1rem; --text-md:1.125rem;
  --text-lg:1.25rem; --text-xl:1.5rem; --text-2xl:2rem; --text-3xl:2.75rem; --text-4xl:3.5rem;
  --hero:clamp(3rem,6vw,5.5rem);

  --sp-xs:.5rem; --sp-sm:1rem; --sp-md:1.5rem; --sp-lg:2.5rem; --sp-xl:4rem;
  --sp-2xl:6rem; --sp-3xl:8rem; --sp-4xl:12rem;
  --content:1200px; --reading:680px; --narrow:540px;
  --ease:cubic-bezier(.25,.46,.45,.94);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--serif);font-size:var(--text-md);line-height:1.7;color:var(--ink);
  background:var(--surface);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
:where(a,button,input,label,summary):focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.container{max-width:var(--content);margin:0 auto;padding:0 var(--sp-lg)}
.label{font-family:var(--sans);font-size:var(--text-xs);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--ink);color:var(--surface);font-family:var(--sans);padding:.6rem 1rem;border-radius:0 0 .4rem 0}
.skip-link:focus{left:0}

/* ---- Reveal: visible by default; subtle entrance only where supported ---- */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .reveal{animation:reveal linear both;animation-timeline:view();animation-range:entry 2% cover 26%}
  }
}
@keyframes reveal{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ═══ NAV (CSS-only mobile toggle) ═══ */
.nav-toggle-cb{position:absolute;opacity:0;pointer-events:none}
.nav{position:fixed;inset:0 0 auto 0;z-index:100;background:rgba(250,248,245,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border-light)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px;max-width:var(--content);margin:0 auto;padding:0 var(--sp-lg)}
.nav-logo{font-family:var(--sans);font-size:var(--text-sm);font-weight:500;letter-spacing:.04em}
.nav-logo span{color:var(--ink-faint)}
.nav-links{display:flex;align-items:center;gap:var(--sp-lg);list-style:none}
.nav-links a{font-family:var(--sans);font-size:var(--text-sm);color:var(--ink-muted);transition:color .2s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-cta{font-family:var(--sans);font-size:var(--text-sm);font-weight:500;color:var(--ink);padding:8px 20px;border:1px solid var(--border);border-radius:2px;transition:all .3s var(--ease)}
.nav-cta:hover{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.nav-toggle{display:none;cursor:pointer;flex-direction:column;gap:5px;padding:8px}
.nav-toggle span{display:block;width:20px;height:1.5px;background:var(--ink)}

/* ═══ HERO ═══ */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.hero-bg{position:absolute;inset:0;
  /* placeholder — swap with url('/assets/img/hero.jpg') center/cover */
  background:
    linear-gradient(180deg,rgba(26,23,20,.15),rgba(26,23,20,.05) 40%,rgba(26,23,20,.55) 75%,rgba(26,23,20,.85)),
    radial-gradient(120% 90% at 70% 0%,#3d3731,#1a1714 70%);
}
.hero-content{position:relative;z-index:2;width:100%;max-width:var(--content);margin:0 auto;padding:var(--sp-3xl) var(--sp-lg) var(--sp-2xl)}
.hero h1{font-family:var(--serif);font-weight:300;font-size:var(--hero);line-height:1.08;letter-spacing:-.02em;color:#fff;margin-bottom:var(--sp-md)}
.hero-sub{font-family:var(--sans);font-size:var(--text-sm);font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.hero-sub .x{margin:0 .4em;opacity:.4}

/* ═══ INTRO ═══ */
.intro{padding:var(--sp-4xl) 0;background:var(--white)}
.intro-inner{max-width:var(--reading);margin:0 auto;text-align:center}
.intro-text{font-size:var(--text-2xl);font-weight:300;line-height:1.5;letter-spacing:-.01em;margin-top:var(--sp-lg)}
.intro-text strong{font-weight:500}
.intro-secondary{margin-top:var(--sp-lg);font-size:var(--text-lg);color:var(--ink-soft)}

/* ═══ CLIENTS ═══ */
.section-head{text-align:center;margin-bottom:var(--sp-2xl)}
.section-head h2{font-family:var(--serif);font-size:var(--text-3xl);font-weight:300;letter-spacing:-.02em;margin-top:var(--sp-md)}
.clients{padding:var(--sp-3xl) 0;background:var(--surface)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-md)}
.card{position:relative;background:var(--white);padding:var(--sp-xl) var(--sp-lg);border:1px solid var(--border-light);overflow:hidden;transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.card:hover{border-color:var(--border);box-shadow:0 8px 40px rgba(26,23,20,.06);transform:translateY(-2px)}
.card:hover::before{transform:scaleX(1)}
.card-num{font-family:var(--sans);font-size:var(--text-xs);font-weight:500;color:var(--ink-faint);letter-spacing:.08em;margin-bottom:var(--sp-lg)}
.card h3{font-family:var(--serif);font-size:var(--text-xl);font-weight:500;line-height:1.3;margin-bottom:var(--sp-sm)}
.card p{font-size:var(--text-base);color:var(--ink-soft)}
.link{display:inline-flex;align-items:center;gap:8px;margin-top:var(--sp-lg);font-family:var(--sans);font-size:var(--text-sm);font-weight:500;color:var(--accent)}
.link svg{width:16px;height:16px}

/* ═══ STATS ═══ */
.stats{padding:var(--sp-3xl) 0;background:var(--ink);color:var(--surface)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-lg)}
.stat{text-align:center;padding:var(--sp-lg) 0}
.stat-n{font-family:var(--serif);font-size:var(--text-4xl);font-weight:300;letter-spacing:-.03em;line-height:1;margin-bottom:var(--sp-sm)}
.stat-l{font-family:var(--sans);font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;color:rgba(250,248,245,.45)}
.stat-c{margin-top:var(--sp-xs);font-style:italic;font-size:var(--text-sm);color:rgba(250,248,245,.35)}

/* ═══ FULL-WIDTH + SPLIT ═══ */
.fullwidth{position:relative;min-height:70vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.fullwidth-bg{position:absolute;inset:0;background:linear-gradient(0deg,rgba(26,23,20,.82),rgba(26,23,20,.3) 50%,rgba(26,23,20,.1)),radial-gradient(120% 100% at 30% 20%,#4a423a,#1a1714 70%)}
.fullwidth-content{position:relative;z-index:2;max-width:var(--content);margin:0 auto;width:100%;padding:var(--sp-3xl) var(--sp-lg)}
.fullwidth-content .label{color:rgba(255,255,255,.5)}
.fullwidth-content h2{font-family:var(--serif);font-size:var(--text-3xl);font-weight:300;color:#fff;line-height:1.2;letter-spacing:-.02em;max-width:600px;margin:var(--sp-md) 0}
.fullwidth-content p{color:rgba(255,255,255,.7);max-width:520px}

.split{display:grid;grid-template-columns:1fr 1fr;min-height:600px;background:var(--white)}
.split-media{position:relative;overflow:hidden;min-height:400px;background:radial-gradient(120% 120% at 30% 20%,var(--surface-deep),var(--surface-warm))}
.split.reversed .split-media{order:2}
.split-text{display:flex;flex-direction:column;justify-content:center;padding:var(--sp-2xl)}
.split-text h2{font-family:var(--serif);font-size:var(--text-2xl);font-weight:400;line-height:1.3;letter-spacing:-.01em;margin:var(--sp-md) 0}
.split-text p{font-size:var(--text-base);color:var(--ink-soft);max-width:480px}

/* ═══ PULL QUOTE ═══ */
.quote{padding:var(--sp-4xl) 0;background:var(--surface-warm);text-align:center}
.quote blockquote{font-family:var(--serif);font-size:var(--text-3xl);font-weight:300;line-height:1.4;letter-spacing:-.02em;max-width:800px;margin:0 auto}
.quote em{font-style:italic;color:var(--accent)}
.quote .attr{margin-top:var(--sp-lg);font-family:var(--sans);font-size:var(--text-sm);color:var(--ink-faint)}

/* ═══ TIMELINE ═══ */
.timeline{padding:var(--sp-3xl) 0;background:var(--surface)}
.track{position:relative;max-width:800px;margin:0 auto}
.track::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--border);transform:translateX(-50%)}
.t-item{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-lg);padding:var(--sp-md) 0;position:relative}
.t-item::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;background:var(--surface);border:2px solid var(--accent);transform:translate(-50%,-50%)}
.t-year{font-family:var(--serif);font-size:var(--text-xl);font-weight:600;color:var(--accent);text-align:right;padding-right:var(--sp-lg)}
.t-desc{font-family:var(--sans);font-size:var(--text-sm);line-height:1.6;color:var(--ink-soft);padding-left:var(--sp-lg)}

/* ═══ INSIGHTS ═══ */
.insights{padding:var(--sp-3xl) 0;background:var(--white)}
.insights-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:var(--sp-2xl)}
.insights-head h2{font-family:var(--serif);font-size:var(--text-3xl);font-weight:300;letter-spacing:-.02em;margin-top:var(--sp-xs)}
.insight{border:1px solid var(--border-light);overflow:hidden;transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.insight:hover{border-color:var(--border);box-shadow:0 4px 24px rgba(26,23,20,.06);transform:translateY(-2px)}
.insight-media{height:220px;background:radial-gradient(120% 120% at 60% 10%,var(--surface-deep),var(--surface-warm))}
.insight-body{padding:var(--sp-md) var(--sp-lg) var(--sp-lg)}
.insight-meta{display:flex;align-items:center;gap:var(--sp-sm);margin-bottom:var(--sp-sm);font-family:var(--sans);font-size:var(--text-xs);color:var(--ink-faint)}
.insight-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--border)}
.insight h3{font-family:var(--serif);font-size:var(--text-lg);font-weight:500;line-height:1.35;margin-bottom:var(--sp-xs)}
.insight p{font-family:var(--sans);font-size:var(--text-sm);line-height:1.6;color:var(--ink-muted)}

/* ═══ NEWSLETTER + CREDIBILITY ═══ */
.newsletter{padding:var(--sp-3xl) 0;background:var(--surface-warm)}
.newsletter-inner{max-width:var(--narrow);margin:0 auto;text-align:center}
.newsletter h2{font-family:var(--serif);font-size:var(--text-2xl);font-weight:400;margin:var(--sp-sm) 0 var(--sp-xs)}
.newsletter p{color:var(--ink-soft);margin-bottom:var(--sp-lg)}
.nl-form{display:flex;gap:var(--sp-xs);max-width:420px;margin:0 auto}
.nl-form input{flex:1;font-family:var(--sans);font-size:var(--text-sm);padding:14px 18px;border:1px solid var(--border);background:var(--white);outline:none}
.nl-form input:focus{border-color:var(--ink-muted)}
.nl-form button{font-family:var(--sans);font-size:var(--text-sm);font-weight:500;padding:14px 24px;background:var(--ink);color:var(--surface);border:1px solid var(--ink);cursor:pointer;white-space:nowrap}
.nl-form button:hover{background:var(--ink-soft)}
.cred{padding:var(--sp-2xl) 0;background:var(--white);border-top:1px solid var(--border-light);text-align:center}
.cred-logos{display:flex;justify-content:center;align-items:center;gap:var(--sp-2xl);flex-wrap:wrap;opacity:.4;margin-top:var(--sp-lg)}
.cred-logos span{font-family:var(--sans);font-size:var(--text-sm);font-weight:500;letter-spacing:.06em;text-transform:uppercase}

/* ═══ FOOTER ═══ */
.footer{background:var(--ink);color:rgba(250,248,245,.6);padding:var(--sp-3xl) 0 var(--sp-lg)}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--sp-xl);padding-bottom:var(--sp-2xl);border-bottom:1px solid rgba(255,255,255,.08)}
.footer-brand p{margin-top:var(--sp-sm);max-width:320px;color:rgba(250,248,245,.4)}
.footer h4{font-family:var(--sans);font-size:var(--text-xs);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgba(250,248,245,.3);margin-bottom:var(--sp-md)}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:var(--sp-xs)}
.footer-col a{font-family:var(--sans);font-size:var(--text-sm);color:rgba(250,248,245,.55)}
.footer-col a:hover{color:rgba(250,248,245,.9)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:var(--sp-lg);flex-wrap:wrap;gap:var(--sp-sm);font-family:var(--sans);font-size:var(--text-xs);color:rgba(250,248,245,.25)}
.footer-entities{display:flex;gap:var(--sp-md);flex-wrap:wrap}

/* ═══ RESPONSIVE ═══ */
@media (max-width:1024px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .split.reversed .split-media{order:0}
  .footer-top{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  :root{--hero:clamp(2.2rem,8vw,3.5rem);--text-3xl:2rem;--text-2xl:1.5rem}
  .nav-links{display:none;position:absolute;top:72px;left:0;right:0;flex-direction:column;gap:var(--sp-md);background:var(--surface);padding:var(--sp-md) var(--sp-lg) var(--sp-lg);border-bottom:1px solid var(--border-light)}
  .nav-toggle{display:flex}
  .nav-toggle-cb:checked ~ .nav-inner .nav-links{display:flex}
  .grid-3,.grid-4{grid-template-columns:1fr}
  .insights-head{flex-direction:column;align-items:flex-start;gap:var(--sp-sm)}
  .nl-form{flex-direction:column}
  .footer-top,.footer-bottom{grid-template-columns:1fr;flex-direction:column;align-items:flex-start;gap:var(--sp-lg)}
  .track::before,.t-item::before{display:none}
  .t-item{grid-template-columns:auto 1fr;gap:var(--sp-sm)}
  .t-year{text-align:left;padding-right:0}.t-desc{padding-left:0}
}
