/*
Theme Name: Venture Philanthropy
Theme URI: https://venturephilanthropy.co
Author: Venture Philanthropy Co.
Description: A venture philanthropy homepage theme built around a single recurring visual idea — overlapping circles, orbiting nodes, and intersecting rings — representing the meeting point of venture discipline and philanthropic conviction. Warm paper, deep ink, and a single ember accent.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vp-theme
*/


:root {
  --paper:   #EEEEE7;
  --paper-2: #E5E4DA;
  --card:    #F7F6F1;
  --ink:     #15181D;
  --ink2:    #4A4F57;
  --ink3:    #8A8D92;
  --ember:   #D9591E;
  --ember-d: #A84313;
  --ember-t: rgba(217,89,30,0.10);
  --line:    rgba(21,24,29,0.11);
  --line-s:  rgba(217,89,30,0.40);
  --fd: 'Fraunces', serif;
  --fb: 'Inter', sans-serif;
  --pad: clamp(2rem, 5vw, 6rem);
  --max: 1280px;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--paper);
  color:var(--ink);
  font-family:var(--fb);
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}
body::before {
  content:'';
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wrap { max-width:var(--max); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); position:relative; z-index:2; }
.eyebrow { display:flex; align-items:center; gap:.7rem; font-family:var(--fb); font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ember-d); }
.eyebrow::before { content:''; width:18px; height:1px; background:var(--ember); flex-shrink:0; }
.sect-line { height:1px; background:var(--line); position:relative; z-index:2; }
section[id] { scroll-margin-top:84px; }

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

.rv { opacity:0; transform:translateY(24px); transition:opacity .85s cubic-bezier(.25,.46,.45,.94), transform .85s cubic-bezier(.25,.46,.45,.94); }
.rv.vis { opacity:1; transform:none; }
.pillar-grid .rv:nth-child(2),.steps .rv:nth-child(2) { transition-delay:.08s; }
.pillar-grid .rv:nth-child(3),.steps .rv:nth-child(3) { transition-delay:.16s; }
.pillar-grid .rv:nth-child(4),.steps .rv:nth-child(4) { transition-delay:.24s; }
.pillar-grid .rv:nth-child(5) { transition-delay:.32s; }
.pillar-grid .rv:nth-child(6) { transition-delay:.40s; }

a:focus-visible, button:focus-visible, input:focus-visible { outline:1.5px solid var(--ember); outline-offset:3px; }

/* ===== HEADER ===== */
#hdr { position:fixed; top:0; left:0; right:0; z-index:200; background:rgba(238,238,231,.90); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.hdr-in { max-width:var(--max); margin:0 auto; padding:0 var(--pad); height:70px; display:flex; align-items:center; justify-content:space-between; }
.logo { display:flex; align-items:center; gap:12px; text-decoration:none; }
.mark { width:30px; height:26px; position:relative; flex-shrink:0; }
.mark svg { width:100%; height:100%; }
.site-name { font-family:var(--fd); font-size:16px; font-weight:600; letter-spacing:.01em; color:var(--ink); }
nav { display:flex; align-items:center; gap:2.1rem; }
nav a { font-family:var(--fb); font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink2); text-decoration:none; transition:color .3s; }
nav a:hover { color:var(--ember-d); }
.hmenu { margin-left:1.6rem; width:20px; display:flex; flex-direction:column; gap:5px; }
.hmenu span { display:block; height:1px; background:var(--ink3); }
.hmenu span:last-child { width:60%; }
.hdr-div { height:1px; background:var(--line); }
@media (max-width:880px){ nav a:not(.hmenu-only){ display:none; } }

/* ===== HERO ===== */
.hero { position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; padding-top:70px; }
#cnv { position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; animation:cnvIn 1.8s ease-out .2s forwards; }
@keyframes cnvIn { to { opacity:1; } }
.hero-body { position:relative; z-index:2; text-align:center; display:flex; flex-direction:column; align-items:center; gap:1.4rem; max-width:760px; padding:0 1.5rem; opacity:0; animation:heroIn 1.5s ease-out .8s forwards; }
@keyframes heroIn { to { opacity:1; } }
.hero-name { font-family:var(--fd); font-style:italic; font-weight:500; font-size:clamp(2.3rem,5.4vw,4.6rem); letter-spacing:-.01em; line-height:1.12; color:var(--ink); }
.hero-tag { font-family:var(--fb); font-weight:300; font-size:clamp(1rem,1.3vw,1.16rem); color:var(--ink2); max-width:560px; line-height:1.75; }
.hero-btn { display:inline-flex; align-items:center; gap:.5rem; margin-top:.6rem; padding:14px 34px; background:var(--ink); border:1px solid var(--ink); font-family:var(--fb); font-size:10.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--paper); text-decoration:none; transition:background .35s,color .35s,border-color .35s; }
.hero-btn:hover { background:var(--ember); border-color:var(--ember); }
.scroll-ind { position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px; transition:opacity .5s; }
.scroll-ind span { font-family:var(--fb); font-size:9px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--ink3); }
.scr-thread { width:1px; height:34px; background:var(--ink3); animation:thrPulse 2.4s ease-in-out infinite; }
@keyframes thrPulse { 0%,100%{opacity:.2} 50%{opacity:.7} }

/* ===== SECTION HEADERS ===== */
.sect-hdr { max-width:740px; }
.sect-hdr .eyebrow { margin-bottom:1.2rem; }
.sect-ttl { font-family:var(--fd); font-weight:600; font-size:clamp(1.7rem,2.7vw,2.7rem); letter-spacing:-.005em; line-height:1.25; color:var(--ink); }
.sect-body { margin-top:1.3rem; font-size:1rem; font-weight:300; line-height:1.85; color:var(--ink2); max-width:620px; }
.sect-body + .sect-body { margin-top:1rem; }

/* ===== ABOUT ===== */
.about { background:var(--paper-2); padding:8rem 0; }
.about-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:5rem; align-items:start; }
.statplate { border:1px solid var(--line); background:var(--card); }
.sp-row { display:flex; align-items:center; justify-content:space-between; padding:1.3rem 1.7rem; }
.sp-row + .sp-row { border-top:1px solid var(--line); }
.sp-k { font-family:var(--fb); font-size:9.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink3); }
.sp-v { font-family:var(--fd); font-size:.98rem; font-weight:500; color:var(--ink); }
@media (max-width:860px){ .about-grid{ grid-template-columns:1fr; gap:3rem; } }

/* ===== OUR MODEL ===== */
.model { background:var(--paper); padding:8rem 0; }
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:3.6rem; border:1px solid var(--line); }
.step { position:relative; padding:2.2rem 1.7rem; }
.step + .step { border-left:1px solid var(--line); }
.step-n { font-family:var(--fd); font-style:italic; font-size:1.7rem; color:var(--ember); line-height:1; }
.step-h { font-family:var(--fb); font-weight:700; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); margin-top:.9rem; }
.step-p { font-family:var(--fb); font-size:.82rem; font-weight:300; line-height:1.6; color:var(--ink2); margin-top:.5rem; }
@media (max-width:760px){ .steps{ grid-template-columns:1fr; } .step+.step{ border-left:none; border-top:1px solid var(--line); } }

/* ===== PILLARS ===== */
.pillars { background:var(--paper-2); padding:8rem 0; }
.pillar-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:3.6rem; }
.pcard { background:var(--card); border:1px solid var(--line); padding:2.2rem 1.9rem; display:flex; flex-direction:column; gap:1.1rem; transition:border-color .4s,transform .4s; }
.pcard:hover { border-color:var(--line-s); transform:translateY(-3px); }
.pcard svg { width:30px; height:30px; }
.pcard-h { font-family:var(--fd); font-weight:600; font-size:1.12rem; color:var(--ink); letter-spacing:.005em; }
.pcard-p { font-family:var(--fb); font-size:.85rem; font-weight:300; line-height:1.72; color:var(--ink2); }
@media (max-width:860px){ .pillar-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .pillar-grid{ grid-template-columns:1fr; } }

/* ===== INTERSECTION ===== */
.intersect { position:relative; background:var(--paper); padding:9rem 0; overflow:hidden; text-align:center; }
.intersect-venn { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:min(640px,90vw); opacity:.5; z-index:0; }
.intersect-in { position:relative; z-index:2; max-width:780px; margin:0 auto; }
.intersect-q { font-family:var(--fd); font-style:italic; font-weight:500; font-size:clamp(1.7rem,3.4vw,3rem); line-height:1.34; color:var(--ink); }
.intersect-eq { margin-top:2rem; font-family:var(--fb); font-size:.92rem; font-weight:500; letter-spacing:.04em; color:var(--ember-d); }

/* ===== FOUNDER ===== */
.founder { background:var(--paper); padding:5rem 0 8rem; text-align:center; }
.founder-eye { display:flex; justify-content:center; }
.founder-name { font-family:var(--fd); font-weight:600; font-size:clamp(1.5rem,2.4vw,2.1rem); color:var(--ink); margin-top:1.2rem; }
.founder-role { font-family:var(--fb); font-size:.85rem; color:var(--ink3); margin-top:.5rem; letter-spacing:.02em; }

/* ===== SUBSCRIBE ===== */
.subscribe { background:var(--ink); padding:6.5rem 0; }
.sub-box { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2.4rem; }
.sub-l .eyebrow { color:var(--ember); margin-bottom:1rem; }
.sub-l .eyebrow::before { background:var(--ember); }
.sub-l h3 { font-family:var(--fd); font-style:italic; font-weight:500; font-size:clamp(1.5rem,2.6vw,2.2rem); color:var(--paper); line-height:1.25; }
.sub-l p { font-family:var(--fb); font-size:.9rem; color:rgba(238,238,231,.55); margin-top:.7rem; }
.sub-form { display:flex; gap:.6rem; flex-wrap:wrap; }
.sub-form input { background:transparent; border:1px solid rgba(238,238,231,.28); padding:13px 18px; font-family:var(--fb); font-size:.85rem; color:var(--paper); min-width:240px; }
.sub-form input::placeholder { color:rgba(238,238,231,.4); }
.sub-form button { background:var(--ember); border:1px solid var(--ember); padding:13px 26px; font-family:var(--fb); font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); cursor:pointer; transition:background .3s,border-color .3s; }
.sub-form button:hover { background:var(--paper); border-color:var(--paper); }

/* ===== FOOTER ===== */
footer { background:var(--paper); padding:5rem 0 3rem; }
.ftr-top { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:3rem; padding-bottom:3.5rem; border-bottom:1px solid var(--line); }
.ftr-brand .site-name { font-size:18px; }
.ftr-brand p { font-family:var(--fb); font-size:.82rem; color:var(--ink3); margin-top:.9rem; max-width:260px; line-height:1.6; }
.ftr-col h4 { font-family:var(--fb); font-size:9.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink3); margin-bottom:1.1rem; }
.ftr-col ul { list-style:none; display:flex; flex-direction:column; gap:.65rem; }
.ftr-col a { font-family:var(--fb); font-size:.86rem; color:var(--ink2); text-decoration:none; transition:color .3s; }
.ftr-col a:hover { color:var(--ember-d); }
.ftr-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding-top:2rem; }
.ftr-copy { font-family:var(--fb); font-size:.78rem; color:var(--ink3); }
@media (max-width:760px){ .ftr-top{ grid-template-columns:1fr 1fr; } .ftr-brand{ grid-column:1/-1; } }