/* =========================================================
   Brian D. Silber Memorial Fund — Design System
   Warm, hopeful, light. Green primary + gold accent.
   ========================================================= */

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

:root{
  /* ---- Palette ---- */
  --paper:        oklch(0.985 0.010 95);   /* warm cream page bg */
  --paper-2:      oklch(0.965 0.014 95);   /* slightly deeper cream */
  --surface:      #ffffff;
  --ink:          oklch(0.27 0.020 155);   /* warm near-black */
  --ink-soft:     oklch(0.44 0.018 155);
  --ink-faint:    oklch(0.58 0.014 155);
  --line:         oklch(0.90 0.012 120);
  --line-soft:    oklch(0.93 0.010 120);

  --green-900:    oklch(0.30 0.055 158);
  --green-800:    oklch(0.38 0.072 156);
  --green-700:    oklch(0.46 0.090 153);   /* primary */
  --green-600:    oklch(0.55 0.105 150);
  --green-300:    oklch(0.80 0.070 150);
  --green-100:    oklch(0.93 0.035 150);
  --green-50:     oklch(0.965 0.020 150);

  --gold-700:     oklch(0.62 0.110 72);
  --gold-500:     oklch(0.78 0.120 78);    /* accent — sunburst */
  --gold-200:     oklch(0.91 0.055 82);
  --gold-50:      oklch(0.965 0.025 84);

  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px oklch(0.3 0.03 150 / 0.06), 0 2px 8px oklch(0.3 0.03 150 / 0.05);
  --shadow-md: 0 4px 14px oklch(0.3 0.03 150 / 0.08), 0 12px 34px oklch(0.3 0.03 150 / 0.07);
  --shadow-lg: 0 10px 30px oklch(0.3 0.03 150 / 0.12), 0 26px 60px oklch(0.3 0.03 150 / 0.10);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Public Sans', system-ui, sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-size:18px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:var(--green-700); text-decoration:none; }
a:hover{ color:var(--green-800); }

h1,h2,h3,h4{ font-family:'Newsreader', Georgia, serif; font-weight:500; line-height:1.08; color:var(--green-900); margin:0; letter-spacing:-0.01em; text-wrap:balance; }
p{ margin:0 0 1.1em; text-wrap:pretty; }
.serif{ font-family:'Newsreader', Georgia, serif; }
.italic{ font-style:italic; }

/* ---- Layout ---- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.wrap-narrow{ max-width:780px; margin-inline:auto; padding-inline:var(--gutter); }
section{ position:relative; }
.section-pad{ padding-block:clamp(56px, 8vw, 116px); }

.eyebrow{
  font-family:'Public Sans', sans-serif;
  font-size:13px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--green-700); margin:0 0 18px; display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--gold-500); display:inline-block; }
.eyebrow.center{ justify-content:center; }
.eyebrow.center::before{ display:none; }

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:'Public Sans', sans-serif; font-weight:600; font-size:16px; letter-spacing:0.01em;
  padding:14px 26px; border-radius:999px; border:1.5px solid transparent; cursor:pointer;
  transition:transform .15s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
  text-decoration:none; white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--green-700); color:#fff; box-shadow:0 6px 18px oklch(0.46 0.09 153 / 0.28); }
.btn-primary:hover{ background:var(--green-800); color:#fff; transform:translateY(-1px); box-shadow:0 10px 26px oklch(0.46 0.09 153 / 0.34); }
.btn-gold{ background:var(--gold-500); color:oklch(0.32 0.06 60); box-shadow:0 6px 18px oklch(0.78 0.12 78 / 0.35); }
.btn-gold:hover{ background:var(--gold-700); color:#fff; transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--green-800); border-color:var(--green-300); }
.btn-ghost:hover{ background:var(--green-50); color:var(--green-900); border-color:var(--green-600); }
.btn-lg{ padding:17px 34px; font-size:17px; }
.btn-arrow svg{ transition:transform .2s ease; }
.btn-arrow:hover svg{ transform:translateX(3px); }

/* ---- Header ---- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:oklch(0.985 0.010 95 / 0.92); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line-soft);
}
.header-top{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:14px; }
.nav-bar{ background:var(--green-900); }
.nav-bar .nav{ display:flex; align-items:center; justify-content:center; gap:4px; padding-block:0; }
.header-social{ display:flex; align-items:center; gap:9px; }
.header-social a{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--green-800); transition:.18s; }
.header-social a:hover{ background:var(--green-50); border-color:var(--green-600); color:var(--green-900); }
.brand{ display:flex; align-items:center; gap:13px; }
.brand-mark{ width:42px; height:42px; flex:none; }
.brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-name{ font-family:'Newsreader', serif; font-weight:600; font-size:18px; letter-spacing:0.02em; color:var(--green-900); }
.brand-tag{ font-size:9.5px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold-700); margin-top:4px; }

.nav{ display:flex; align-items:center; gap:4px; }
.nav a{
  font-size:16.5px; font-weight:500; color:var(--ink-soft); padding:10px 15px; border-radius:8px;
  transition:color .15s ease, background .15s ease;
}
.nav a:hover{ color:var(--green-900); background:var(--green-50); }
.nav a.active{ color:var(--green-900); }
.nav a.active::after{ content:""; display:block; height:2px; background:var(--gold-500); border-radius:2px; margin-top:5px; }
/* nav links inside the dark bar */
.nav-bar .nav a{ color:oklch(0.93 0.02 150); font-size:15px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; padding:16px 22px; border-radius:0; }
.nav-bar .nav a:hover{ color:#fff; background:oklch(1 0 0 / 0.09); }
.nav-bar .nav a.active{ color:var(--gold-200); background:oklch(1 0 0 / 0.06); }
.nav-bar .nav a.active::after{ display:none; }
.header-cta{ display:flex; align-items:center; gap:14px; }
.header-cta .btn-gold{ padding:17px 34px; font-size:17.5px; }
.header-social a{ width:42px; height:42px; }

.nav-toggle{ display:none; background:none; border:1px solid var(--line); border-radius:9px; width:44px; height:44px; cursor:pointer; align-items:center; justify-content:center; color:var(--green-900); }

/* mobile nav */
.mobile-nav{ display:none; flex-direction:column; gap:2px; padding:10px var(--gutter) 22px; border-bottom:1px solid var(--line-soft); background:var(--paper); }
.mobile-nav a{ padding:13px 6px; font-size:17px; font-weight:500; color:var(--ink); border-bottom:1px solid var(--line-soft); }
.mobile-nav.open{ display:flex; }

@media (max-width:920px){
  .nav{ display:none; }
  .nav-bar{ display:none; }
  .header-cta .btn-ghost{ display:none; }
  .header-social{ display:none; }
  .nav-toggle{ display:flex; }
}

/* ---- 5K announcement bar (under the nav) ---- */
.alert-bar{ background:var(--green-700); border-top:1px solid oklch(0.78 0.12 78 / 0.45); }
.alert-bar-inner{ display:flex; align-items:center; justify-content:center; gap:15px; padding-block:10px; font-size:14px; color:#fff; flex-wrap:wrap; text-align:center; }
.alert-bar .pulse{ width:9px; height:9px; border-radius:50%; background:var(--gold-500); flex:none; animation:alertPulse 2.4s infinite; }
@keyframes alertPulse{ 0%{ box-shadow:0 0 0 0 oklch(0.78 0.12 78 / 0.55);} 70%{ box-shadow:0 0 0 9px oklch(0.78 0.12 78 / 0);} 100%{ box-shadow:0 0 0 0 oklch(0.78 0.12 78 / 0);} }
.alert-bar .msg{ font-weight:500; }
.alert-bar .msg b{ font-weight:700; }
.alert-bar .walk-days{ display:inline-flex; align-items:center; font-size:12px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--green-900); background:var(--gold-500); padding:4px 11px; border-radius:999px; white-space:nowrap; }
.alert-bar .alert-join{ color:var(--gold-500); font-weight:700; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.alert-bar .alert-join:hover{ color:var(--gold-200); }
.alert-bar .alert-join svg{ transition:transform .2s ease; }
.alert-bar .alert-join:hover svg{ transform:translateX(3px); }
@media (max-width:600px){ .alert-bar-inner{ font-size:12.5px; gap:9px; } }

/* ---- Footer ---- */
.site-footer{ background:var(--green-900); color:oklch(0.90 0.02 150); }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; padding-block:64px 52px; }
.site-footer h4{ color:#fff; font-size:15px; font-family:'Public Sans',sans-serif; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; margin:0 0 18px; }
.footer-brand .brand-name{ color:#fff; }
.footer-brand .brand-tag{ color:var(--gold-200); }
.site-footer p, .site-footer li{ color:oklch(0.86 0.02 150); font-size:15px; }
.footer-links{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px; }
.footer-links a{ color:oklch(0.86 0.02 150); }
.footer-links a:hover{ color:#fff; }
.footer-contact a{ color:var(--gold-200); }
.footer-bottom{ border-top:1px solid oklch(0.42 0.04 155); padding-block:26px; display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:13px; color:oklch(0.74 0.02 150); }
.social-row{ display:flex; gap:12px; margin-top:18px; }
.social-row a{ width:40px; height:40px; border-radius:50%; border:1px solid oklch(0.45 0.04 155); display:flex; align-items:center; justify-content:center; color:oklch(0.88 0.02 150); transition:.2s; }
.social-row a:hover{ background:var(--gold-500); border-color:var(--gold-500); color:var(--green-900); }
@media (max-width:760px){ .footer-top{ grid-template-columns:1fr; gap:36px; } }

/* ---- Real brand logo ---- */
.brand-logo{ height:111px; width:auto; display:block; filter:saturate(1.3); }
@media (max-width:520px){ .brand-logo{ height:80px; } }

/* ---- Photo-filled placeholders ---- */
.ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.ph.has-img{ background:#fff; border-color:var(--line); }
.ph.has-img::after{ content:none; display:none; }
.ph.contain img{ object-fit:contain; }

/* ---- Image placeholders ---- */
.ph{
  position:relative; overflow:hidden; border-radius:var(--radius); background:
    repeating-linear-gradient(135deg, var(--green-50), var(--green-50) 11px, var(--paper-2) 11px, var(--paper-2) 22px);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--green-700);
}
.ph::after{
  content:attr(data-label); font-family:'Public Sans', monospace; font-size:11.5px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--green-700); background:oklch(1 0 0 / 0.7); padding:6px 12px; border-radius:999px; border:1px solid var(--green-100); font-weight:600;
}
.ph-gold{ background:repeating-linear-gradient(135deg, var(--gold-50), var(--gold-50) 11px, var(--paper-2) 11px, var(--paper-2) 22px); }

/* ---- Cards / chips ---- */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.chip{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; letter-spacing:0.04em; padding:7px 14px; border-radius:999px; background:var(--green-50); color:var(--green-800); border:1px solid var(--green-100); }
.chip-gold{ background:var(--gold-50); color:var(--gold-700); border-color:var(--gold-200); }

.divider{ height:1px; background:var(--line); border:0; margin:0; }

/* ---- Page hero (interior) ---- */
.page-hero{ background:linear-gradient(180deg, var(--green-50), var(--paper)); border-bottom:1px solid var(--line-soft); padding-block:clamp(48px,7vw,92px) clamp(40px,6vw,72px); }
.page-hero h1{ font-size:clamp(40px, 6vw, 68px); }
.page-hero .lead{ font-size:clamp(19px,2.2vw,22px); color:var(--ink-soft); max-width:640px; margin-top:18px; }

.prose p{ font-size:18.5px; color:var(--ink-soft); margin-bottom:1.25em; }
.prose h2{ font-size:clamp(28px,3.5vw,38px); margin:1.6em 0 0.5em; }
.prose h3{ font-size:22px; color:var(--green-800); margin:1.6em 0 0.4em; font-weight:600; }
.prose strong{ color:var(--ink); font-weight:600; }
.prose ul{ padding-left:1.1em; margin:0 0 1.3em; }
.prose li{ margin-bottom:0.5em; color:var(--ink-soft); }

/* fade-in on scroll */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }