:root{
    --paper:#FBFCFE;
    --ink:#13294B;
    --ink-soft:#566784;
    --blue:#1E4FA3;
    --navy:#13294B;
    --sun:#F4B41A;
    --mint:#E9F0FB;
    --line:#DCE4F0;
    --card:#FFFFFF;
    --radius:18px;
    --maxw:1120px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;background:var(--paper);color:var(--ink);
    font-family:'Inter',system-ui,sans-serif;font-size:17px;line-height:1.6;
  }
  h1,h2,h3{font-family:'Bricolage Grotesque',system-ui,sans-serif;color:var(--ink);margin:0;}
  h1{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:800;letter-spacing:-.02em;line-height:1.05;}
  h2{font-size:clamp(1.7rem,3vw,2.2rem);font-weight:700;letter-spacing:-.01em;line-height:1.15;}
  h3{font-size:1.25rem;font-weight:700;}
  a{color:var(--blue);}
  p{margin:0 0 1em;}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
  section{padding:84px 0;}

  /* announcement bar */
  .announce{background:var(--sun);color:var(--ink);text-align:center;font-size:.9rem;padding:10px 20px;}
  .announce a{color:var(--ink);font-weight:600;}

  /* header */
  header{
    position:sticky;top:0;z-index:20;
    background:rgba(252,250,246,.88);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  header .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px;}
  .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);}
  .brand-mark{
    width:44px;height:44px;border-radius:50%;background:var(--navy);color:var(--sun);
    display:flex;align-items:center;justify-content:center;
    font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:.85rem;letter-spacing:.02em;
    border:3px solid var(--blue);
  }
  .brand-name{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.05rem;line-height:1.1;}
  nav ul{list-style:none;display:flex;gap:6px;margin:0;padding:0;align-items:center;}
  nav a{
    color:var(--ink-soft);text-decoration:none;font-size:.94rem;font-weight:500;
    padding:8px 12px;border-radius:10px;
  }
  nav a:hover{background:var(--mint);color:var(--ink);}
  nav a.join{background:var(--blue);color:#fff;font-weight:600;padding:9px 16px;border-radius:11px;}
  nav a.join:hover{background:var(--navy);}


  /* buttons */
  .btn{
    display:inline-block;padding:12px 20px;border-radius:11px;font-weight:600;font-size:.97rem;
    text-decoration:none;font-family:'Inter',sans-serif;
  }
  .btn-primary{background:var(--blue);color:#fff;}
  .btn-primary:hover{background:var(--navy);}
  .btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line);}
  .btn-ghost:hover{border-color:var(--blue);}

  /* hero */
  .hero{padding:64px 0 48px;}
  .hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;}
  @media(max-width:900px){.hero .wrap{grid-template-columns:1fr;}}
  .pill{
    display:inline-block;background:var(--mint);color:var(--blue);font-weight:600;
    font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;
    padding:7px 14px;border-radius:999px;margin-bottom:22px;
  }
  .hero h1 .hl{
    color:var(--blue);position:relative;display:inline-block;
  }
  .hero h1 .hl:after{
    content:"";position:absolute;left:0;right:0;bottom:-6px;height:8px;
    background:var(--sun);border-radius:6px;opacity:.9;
  }
  .hero p.lede{color:var(--ink-soft);font-size:1.12rem;max-width:46ch;margin:26px 0 30px;}
  .hero-actions{display:flex;gap:12px;flex-wrap:wrap;}
  .hero-photo{
    aspect-ratio:4/3;border-radius:24px;overflow:hidden;position:relative;
    background:
      linear-gradient(135deg,var(--blue) 0%,var(--navy) 100%);
    box-shadow:0 24px 50px rgba(19,41,75,.22);
    display:flex;align-items:flex-end;padding:22px;color:#fff;
  }
  .hero-photo:before{
    content:"";position:absolute;inset:0;
    background:
      radial-gradient(circle at 78% 22%,rgba(244,180,26,.55) 0 90px,transparent 91px),
      radial-gradient(circle at 20% 80%,rgba(255,255,255,.12) 0 120px,transparent 121px);
  }
  .hero-photo span{
    position:relative;font-family:'Caveat',cursive;font-size:1.5rem;
    background:rgba(19,41,75,.55);padding:6px 14px;border-radius:12px;
  }

  .hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  .side-photo{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);margin-top:28px;box-shadow:0 18px 40px rgba(19,41,75,.16);}
  .banner-photo{display:block;width:100%;height:240px;object-fit:cover;border-radius:var(--radius);margin-bottom:24px;}
  @media(max-width:600px){.banner-photo{height:170px;}}
  /* stats band */
  .stats{background:var(--navy);color:#fff;padding:54px 0;}
  .stats .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:center;}
  @media(max-width:640px){.stats .wrap{grid-template-columns:1fr;}}
  .stats .num{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:2.8rem;color:var(--sun);display:block;line-height:1.1;}
  .stats .lbl{color:rgba(255,255,255,.82);font-size:.97rem;}

  /* section headers */
  .eyebrow{
    display:inline-block;color:var(--blue);font-weight:600;font-size:.78rem;
    letter-spacing:.09em;text-transform:uppercase;margin-bottom:10px;
  }
  .sec-head{max-width:60ch;margin-bottom:40px;}
  .sec-head p{color:var(--ink-soft);margin-top:12px;}

  /* events */
  .events{background:var(--mint);}
  .event-list{display:grid;gap:14px;}
  .event{
    display:grid;grid-template-columns:84px 1fr;gap:20px;align-items:start;
    background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;
  }
  .event .date{
    background:var(--navy);color:#fff;border-radius:14px;text-align:center;padding:10px 6px;
    font-family:'Bricolage Grotesque',sans-serif;
  }
  .event .date b{display:block;font-size:1.6rem;line-height:1;color:var(--sun);}
  .event .date small{font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;}
  .event h3{font-size:1.1rem;margin-bottom:4px;}
  .event .meta{color:var(--blue);font-weight:600;font-size:.86rem;margin-bottom:4px;}
  .event p{color:var(--ink-soft);margin:0;font-size:.95rem;}
  .event.meeting .date{background:var(--blue);}
  .event.meeting .date b{color:#fff;}
  .event.past{display:none;}
  .event-list.show-past .event.past{display:grid;opacity:.6;}
  .past-toggle{margin-bottom:16px;cursor:pointer;font-size:.9rem;padding:9px 16px;}
  .event-foot{margin-top:18px;color:var(--ink-soft);font-size:.92rem;}
  /* promise */
  .promise .wrap{display:grid;grid-template-columns:1fr 1.3fr;gap:56px;align-items:start;}
  @media(max-width:860px){.promise .wrap{grid-template-columns:1fr;}}
  .quote{
    font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.6rem;line-height:1.25;
    border-left:6px solid var(--sun);padding-left:22px;color:var(--ink);
  }
  .sign{font-family:'Caveat',cursive;font-size:1.7rem;color:var(--blue);margin-top:18px;}
  .sign small{display:block;font-family:'Inter',sans-serif;font-size:.84rem;color:var(--ink-soft);}
  .promise .body p{color:var(--ink-soft);}

  /* cards */
  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  @media(max-width:900px){.grid-3{grid-template-columns:1fr 1fr;}}
  @media(max-width:600px){.grid-3{grid-template-columns:1fr;}}
  .card{
    background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;
  }
  .card .ico{
    width:46px;height:46px;border-radius:14px;background:var(--mint);
    display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:16px;
  }
  .card h3{margin-bottom:8px;}
  .card p{color:var(--ink-soft);font-size:.96rem;margin:0;}
  .what{background:var(--paper);}

  /* fundraising goal bar */
  .goal{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 22px;margin-bottom:36px;}
  .goal h3{margin-bottom:4px;}
  .goal .sub{color:var(--ink-soft);font-size:.88rem;margin:0 0 12px;}
  .bar-row{display:grid;grid-template-columns:72px 1fr 84px;gap:14px;align-items:center;margin-bottom:6px;}
  .bar-row .lbl{font-weight:600;font-size:.92rem;}
  .bar-row .val{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;text-align:right;}
  .track{height:12px;background:var(--mint);border-radius:999px;overflow:hidden;}
  .fill{height:100%;border-radius:999px;}
  .fill.goal-fill{background:var(--sun);}
  .fill.actual-fill{background:var(--blue);}
  .goal .pct{margin:8px 0 0;font-size:.88rem;color:var(--ink-soft);}
  .goal .pct b{color:var(--ink);}
  .goal .match{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line);font-size:.92rem;color:var(--ink);}
  .goal .match a{font-weight:600;}
  @media(max-width:520px){.bar-row{grid-template-columns:1fr 84px;}.bar-row .track{grid-column:1/-1;order:3;}}

  .goalband{background:var(--paper);padding:0 0 64px;}
  .goalband .goal{margin-bottom:0;}

  /* spending by category */
  .spend-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;}
  .spend{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;}
  .spend-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;}
  .spend-top .total{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.5rem;color:var(--blue);}
  .spend .desc{color:var(--ink-soft);font-size:.92rem;margin:4px 0 14px;}
  .share{height:8px;background:var(--mint);border-radius:999px;overflow:hidden;margin-bottom:6px;}
  .share span{display:block;height:100%;background:var(--sun);border-radius:999px;}
  .share-lbl{font-size:.82rem;color:var(--ink-soft);margin-bottom:12px;}
  .items{list-style:none;margin:0;padding:0;}
  .items li{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding:9px 0;font-size:.96rem;}
  .items li b{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;}
  .spend-note{margin-top:22px;color:var(--ink-soft);font-size:.9rem;}

  /* get involved */
  .involve{background:var(--mint);}
  .involve .card p{margin-bottom:14px;}
  .give-box{margin-top:6px;font-size:.9rem;color:var(--ink-soft);}
  .give-box b{color:var(--ink);}

  /* board */
  .board-group{margin-bottom:36px;}
  .board-group h3{font-size:1rem;color:var(--blue);letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px;}
  .people{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
  @media(max-width:900px){.people{grid-template-columns:1fr 1fr;}}
  @media(max-width:520px){.people{grid-template-columns:1fr;}}
  .person{
    display:flex;gap:14px;align-items:center;background:var(--card);
    border:1px solid var(--line);border-radius:var(--radius);padding:16px;
  }
  .avatar{
    width:46px;height:46px;border-radius:50%;background:var(--blue);color:#fff;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.9rem;
    font-family:'Bricolage Grotesque',sans-serif;
  }
  .person.open .avatar{background:#fff;color:var(--blue);border:2px dashed var(--blue);}
  .person .nm{font-weight:600;line-height:1.2;}
  .person .rl{font-size:.84rem;color:var(--ink-soft);}
  .tbd{display:inline-block;background:#FFF4D6;color:#8A6200;font-size:.72rem;font-weight:600;padding:2px 8px;border-radius:999px;margin-left:6px;}

  /* spirit wear banner */
  .spirit{
    background:linear-gradient(135deg,var(--blue),var(--navy));color:#fff;
    border-radius:24px;padding:44px;display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:center;
  }
  @media(max-width:760px){.spirit{grid-template-columns:1fr;padding:30px;}}
  .spirit h2{color:#fff;}
  .spirit p{color:rgba(255,255,255,.85);margin:12px 0 0;}
  .spirit .btn{background:var(--sun);color:var(--ink);justify-self:start;}
  .spirit .btn:hover{background:#fff;}

  /* documents */
  .docs{background:var(--mint);}
  .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;}
  @media(max-width:760px){.grid-2{grid-template-columns:1fr;}}
  .stack{display:grid;gap:16px;}
  .linklist{list-style:none;margin:16px 0 0;padding:0;}
  .linklist li{border-top:1px solid var(--line);padding:11px 0;}
  .linklist a{font-weight:600;text-decoration:none;}
  .linklist a:hover{text-decoration:underline;}
  .doc{display:block;text-decoration:none;color:inherit;transition:transform .15s ease,border-color .15s ease;}
  .doc:hover{transform:translateY(-2px);border-color:var(--blue);}
  .doc h3{font-size:1.05rem;}
  .doc .go{display:inline-block;margin-top:12px;color:var(--blue);font-weight:600;font-size:.9rem;}

  /* footer */
  footer{background:var(--navy);color:rgba(255,255,255,.82);padding:60px 0 28px;}
  footer .wrap{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:36px;}
  @media(max-width:760px){footer .wrap{grid-template-columns:1fr;}}
  footer h4{font-family:'Bricolage Grotesque',sans-serif;color:#fff;font-size:1rem;margin:0 0 12px;}
  footer p,footer a{font-size:.93rem;}
  footer a{color:rgba(255,255,255,.82);text-decoration:none;display:block;margin-bottom:8px;}
  footer a:hover{color:var(--sun);}
  footer .tag{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.15rem;color:#fff;margin-bottom:8px;}
  footer .legal{
    grid-column:1/-1;border-top:1px solid rgba(255,255,255,.14);padding-top:20px;margin-top:10px;
    font-size:.82rem;color:rgba(255,255,255,.6);
  }

  @media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important;}}
  a:focus-visible,.btn:focus-visible{outline:3px solid var(--sun);outline-offset:2px;}

  /* konstella: homepage section */
  .kon{padding:72px 0 0;}
  .kon-card{
    background:var(--mint);border:1px solid var(--line);border-radius:24px;padding:44px;
    display:grid;grid-template-columns:1.3fr 1fr;gap:36px;align-items:center;
  }
  @media(max-width:820px){.kon-card{grid-template-columns:1fr;padding:30px;}}
  .kon-card h2{margin-bottom:12px;}
  .kon-card p{color:var(--ink-soft);margin:0 0 22px;}
  .kon-list{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
  .kon-list li{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 18px;font-weight:600;display:flex;gap:12px;align-items:center;}
  .kon-list li:before{content:"\2713";color:var(--blue);font-weight:800;}

  /* konstella: instructions page */
  .page-hero{padding:56px 0 24px;}
  .page-hero h1{margin-bottom:16px;}
  .page-hero p.lede{color:var(--ink-soft);font-size:1.1rem;max-width:56ch;margin:0 0 24px;}
  .crumb{display:inline-block;margin-bottom:18px;font-weight:600;font-size:.92rem;text-decoration:none;}
  .crumb:hover{text-decoration:underline;}
  .howto-section{padding:40px 0;}
  .howto-section.alt{background:var(--mint);}
  .two{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
  @media(max-width:760px){.two{grid-template-columns:1fr;}}
  .step-list{margin:12px 0 0;padding-left:1.2rem;color:var(--ink-soft);}
  .step-list li{margin-bottom:6px;}
  .howto h3{margin-bottom:6px;}
  .way{margin-top:16px;}
  .way b{display:block;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:4px;}
  .way p{margin:0;color:var(--ink-soft);font-size:.96rem;}
  .callout{background:#FFF4D6;border:1px solid #F0D58A;border-radius:var(--radius);padding:18px 22px;color:#6B4E00;margin-top:20px;}
  .callout b{color:#4F3900;}

  /* back to top */
  .to-top{
    position:fixed;right:20px;bottom:20px;z-index:40;width:48px;height:48px;border-radius:50%;border:0;
    background:var(--blue);color:#fff;font-size:1.4rem;font-weight:700;line-height:1;cursor:pointer;
    box-shadow:0 8px 22px rgba(19,41,75,.3);
    opacity:0;visibility:hidden;transform:translateY(8px);
    transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
  }
  .to-top.show{opacity:1;visibility:visible;transform:none;}
  .to-top:hover{background:var(--navy);}
  .to-top:focus-visible{outline:3px solid var(--sun);outline-offset:3px;}
  @media(prefers-reduced-motion:reduce){.to-top{transition:none;}}

  /* mobile menu: three-bar button */
  .menu-toggle{
    display:none;width:46px;height:46px;border:1px solid var(--line);border-radius:11px;background:#fff;
    cursor:pointer;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  }
  .menu-toggle span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s ease,opacity .2s ease;}
  .menu-toggle:hover{border-color:var(--blue);}
  .menu-toggle:focus-visible{outline:3px solid var(--sun);outline-offset:2px;}
  .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  @media(max-width:1100px){
    .menu-toggle{display:flex;}
    nav{
      display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);
      border-bottom:1px solid var(--line);box-shadow:0 18px 30px rgba(19,41,75,.12);
    }
    nav.open{display:block;}
    nav ul{flex-direction:column;align-items:stretch;gap:2px;padding:12px 24px 20px;max-width:var(--maxw);margin:0 auto;}
    nav a{display:block;padding:13px 14px;font-size:1rem;}
    nav a.join{text-align:center;margin-top:8px;}
  }
  @media(prefers-reduced-motion:reduce){.menu-toggle span{transition:none;}}

  /* logo */
  .brand-logo{display:block;height:54px;width:auto;flex-shrink:0;}

  /* one-line menu on desktop */
  .brand-name{white-space:nowrap;}
  @media(min-width:1101px){
    header .wrap{gap:24px;}
    nav ul{flex-wrap:nowrap;gap:2px;}
    nav a{white-space:nowrap;padding:8px 10px;font-size:.92rem;}
    nav a.join{padding:9px 16px;margin-left:6px;}
    .brand-name{font-size:1rem;}
  }
  @media(max-width:380px){.brand-name{font-size:.9rem;}}

  /* animations (only when the visitor has not asked for reduced motion) */
  @keyframes rise{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
  @keyframes rise-photo{from{opacity:0;transform:translateY(24px) scale(.97);}to{opacity:1;transform:none;}}
  @keyframes draw{to{transform:scaleX(1);}}
  @keyframes drop{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
  @media(prefers-reduced-motion:no-preference){
    /* page-load entrance */
    .hero .pill,.hero h1,.hero p.lede,.hero-actions{opacity:0;animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards;}
    .hero .pill{animation-delay:.05s;}
    .hero h1{animation-delay:.15s;}
    .hero p.lede{animation-delay:.28s;}
    .hero-actions{animation-delay:.4s;}
    .hero-photo{opacity:0;animation:rise-photo .8s .25s cubic-bezier(.2,.7,.2,1) forwards;}
    .hero h1 .hl:after{transform-origin:left;transform:scaleX(0);animation:draw .6s .85s ease-out forwards;}
    .page-hero .wrap>*{opacity:0;animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards;}
    .page-hero .wrap>*:nth-child(2){animation-delay:.08s;}
    .page-hero .wrap>*:nth-child(3){animation-delay:.16s;}
    .page-hero .wrap>*:nth-child(4){animation-delay:.24s;}
    .page-hero .wrap>*:nth-child(5){animation-delay:.32s;}
    .page-hero .wrap>*:nth-child(6){animation-delay:.4s;}

    /* scroll reveal (script adds .reveal, then .in-view when it scrolls into view) */
    .js .reveal{transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s);}
    .js .reveal:not(.in-view){opacity:0;transform:translateY(22px);}

    /* fundraising bars fill when they come into view */
    .fill{transition:width 1.2s cubic-bezier(.2,.7,.2,1) .25s;}
    .js .goal:not(.in-view) .fill{width:0!important;}

    /* hover lift */
    .card,.spend,.event,.person{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
    .card:hover,.spend:hover,.event:hover,.person:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(19,41,75,.10);border-color:#C5D3EA;}
    .btn{transition:transform .15s ease,background .15s ease,box-shadow .15s ease;}
    .btn:hover{transform:translateY(-2px);}

    /* mobile menu slides down */
    nav.open{animation:drop .2s ease-out;}
  }