/* ============================================================
   CityPAC shared design system (Poppins, flat / institutional)
   Linked by every page; cached after first load.
   ============================================================ */
/* Self-hosted Poppins (latin subset). No external font requests. */
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/poppins-400.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/poppins-600.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/poppins-700.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:800;font-display:swap;src:url("fonts/poppins-800.woff2") format("woff2")}

:root{
  --navy:#0a2748; --navy-deep:#061a33;
  --ink:#11243d; --body:#475b70; --muted:#6f8093;
  --sky:#44b6e5; --sky-soft:#eef7fc;
  --blue:#0e5aa0; --blue-press:#0a4680;
  --red:#e41c41; --red-deep:#c1142e; --red-press:#9f1024;
  --bg:#ffffff; --bg-soft:#f3f6fa; --line:#dde5ee;
  --maxw:1560px;
  /* Floating menu button: one position on every page. */
  --fab-top:clamp(22px,4vw,42px); --fab-right:clamp(16px,4vw,28px);
  /* Logo card metrics, so interior heroes can reserve exactly its height. */
  --logo-pad:clamp(12px,2vw,18px); --logo-img:clamp(38px,5.5vw,56px);
  --r-card:10px; --r-btn:6px; --r-ic:8px;
  --font:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* The browser's own [hidden]{display:none} is a plain element rule, so ANY
   class that sets display beats it — .btn{display:inline-flex} was enough to
   make `<button hidden>` render anyway, which is why the donate page showed a
   Continue button it was explicitly told to hide. Marking an element hidden
   has to win over layout styling, everywhere. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--font);color:var(--ink);line-height:1.15;font-weight:700;letter-spacing:-.01em}
a{color:var(--blue);text-decoration:none}
img,svg{display:block;max-width:100%}
p{color:var(--body)}
::selection{background:var(--sky);color:#fff}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(18px,2.5vw,36px)}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:0}
.center{text-align:center}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--font);font-weight:600;
  font-size:.9rem;text-transform:uppercase;letter-spacing:.04em;line-height:1;padding:15px 28px;border-radius:var(--r-btn);
  border:2px solid transparent;cursor:pointer;min-height:50px;white-space:nowrap;text-align:center;
  transition:background .15s ease,color .15s ease,border-color .15s ease}
.btn--red{background:var(--red-deep);color:#fff}
.btn--red:hover{background:var(--red-press)}
.btn--navy{background:var(--navy);color:#fff}
.btn--navy:hover{background:var(--navy-deep)}
.btn--blue{background:var(--sky);color:var(--navy)}
.btn--blue:hover{background:#2ea3d8}
.btn--blue .spinner{border-color:rgba(10,39,72,.35);border-top-color:var(--navy)}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn--ghost:hover{background:#fff;color:var(--navy)}
.btn--outline{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn--outline:hover{background:var(--navy);color:#fff}
.btn--text{background:transparent;border:0;padding:0;min-height:0;color:var(--blue);font-size:.92rem;
  letter-spacing:.02em;text-transform:none;font-weight:700;justify-content:flex-start}
.btn--text::after{content:"→";margin-left:.35em;transition:transform .15s ease}
.btn--text:hover{background:transparent;color:var(--blue-press)}
.btn--text:hover::after{transform:translateX(3px)}
.arrow{font-weight:600;color:var(--blue);text-transform:uppercase;letter-spacing:.04em;font-size:.85rem;display:inline-flex;align-items:center;gap:.4em}
.arrow::after{content:"›";font-size:1.2em;line-height:1}

/* ---------- Header / nav (centered logo + hamburger) ---------- */
.site-header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:center;max-width:var(--maxw);margin-inline:auto;padding:15px clamp(18px,2.5vw,36px)}
.brand{display:inline-flex;align-items:center}
.brand img{height:44px;width:auto}
.hamburger{position:absolute;right:clamp(16px,4vw,28px);top:50%;transform:translateY(-50%);display:inline-flex;
  width:48px;height:48px;border:1px solid var(--line);border-radius:var(--r-btn);background:#fff;cursor:pointer;align-items:center;justify-content:center}
.hamburger:hover{background:var(--bg-soft)}
.hamburger span{display:block;width:22px;height:2px;background:var(--navy);position:relative;transition:.2s}
.hamburger span::before,.hamburger span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--navy);transition:.2s}
.hamburger span::before{top:-7px}.hamburger span::after{top:7px}
.hamburger[aria-expanded="true"] span{background:transparent}
.hamburger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.hamburger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
.nav-menu{position:absolute;top:calc(100% + 8px);right:clamp(12px,4vw,28px);list-style:none;display:flex;flex-direction:column;
  align-items:stretch;gap:2px;min-width:236px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;
  box-shadow:0 22px 46px -16px rgba(10,37,64,.4);transform:translateY(-10px);opacity:0;pointer-events:none;transition:.18s ease;z-index:95}
.nav-menu.open{transform:none;opacity:1;pointer-events:auto}
.nav-menu a{display:block;padding:13px 16px;border-radius:8px;font-weight:600;font-size:.92rem;text-transform:uppercase;letter-spacing:.03em;color:var(--ink)}
.nav-menu a:hover{background:var(--bg-soft)}
.nav-menu a[aria-current="page"]{color:var(--blue)}
.nav-menu a[href="/donate"]{background:var(--red-deep);color:#fff}
.nav-menu a[href="/donate"]:hover{background:var(--red-press);color:#fff}
.nav-menu a[href$="login.html"]{background:var(--blue);color:#fff;font-weight:700}
.nav-menu a[href$="login.html"]:hover{background:var(--blue-press);color:#fff}

/* ---------- Home hero (flat) ---------- */
.hero{background:var(--navy);color:#fff;border-top:5px solid var(--sky);border-bottom:5px solid var(--sky)}
.hero__inner{padding:clamp(20px,2.4vw,30px) 0;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,72px);align-items:center}
.hero__text{max-width:620px}
.hero__inner > .signup-card{margin-top:0;max-width:none}
.hero h1{color:#fff;font-size:clamp(2.2rem,5.5vw,3.6rem);font-weight:800;margin:.45em 0 .4em;letter-spacing:-.02em;line-height:1.08}
.hero h1 .hl{color:inherit}
.hero p.lede{font-size:clamp(1.05rem,2vw,1.25rem);color:#cdd9e8;max-width:620px}
.signup-label{margin-top:30px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;font-size:.82rem;color:#9fb3cc}
.signup-label + .signup{margin-top:10px}
.signup{display:flex;gap:10px;flex-wrap:wrap;margin-top:32px;max-width:500px}
.signup input{flex:1 1 220px;min-width:0;padding:15px 16px;border-radius:var(--r-btn);border:2px solid rgba(255,255,255,.3);background:rgba(255,255,255,.07);color:#fff;font-size:1rem;font-family:var(--font);min-height:50px}
.signup input::placeholder{color:#a9bcd2}
.signup input:focus{outline:none;border-color:var(--sky)}
.signup .btn{flex:0 0 auto}
.form-ok{margin-top:16px;color:#bdeccf;font-weight:600;display:none}
.form-ok.show{display:block}
.hero__chips{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:28px;list-style:none;color:#9fb3cc;font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.hero__chips li{display:inline-flex;align-items:center;gap:9px}
.hero__chips li::before{content:"";width:6px;height:6px;background:var(--sky)}
.hero .btn--text{color:var(--sky)}
.hero .btn--text:hover{color:#fff}
.hero--lead .hero__inner{grid-template-columns:1fr;padding:clamp(34px,4vw,56px) 0 clamp(38px,4.4vw,58px)}
.hero--lead .hero__text{max-width:none}
.hero--lead h1{margin-top:0;margin-bottom:.3em}
.hero--lead .hero__text p.lede{max-width:none}
.hero--lead .hero__text p + p{margin-top:.85em}
/* The lede runs beside a short facts column so the hero uses its full width
   instead of leaving the right half empty. */
.hero__cols{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(28px,4vw,64px);align-items:start}
.hero__facts{list-style:none;display:grid;gap:16px}
.hero__facts b{display:block;color:#fff;font-weight:800;font-size:1.05rem;letter-spacing:-.01em}
.hero__facts span{display:block;color:#9fb3cc;font-size:.9rem;margin-top:3px}
@media(max-width:820px){.hero__cols{grid-template-columns:1fr;gap:28px}}

/* ---------- Interior page hero ---------- */
.page-hero{position:relative;background:var(--navy);color:#fff;border-bottom:5px solid var(--sky)}
.page-hero__inner{padding:clamp(30px,3.2vw,44px) 0}
/* Interior heroes carry the same logo as the home page, at the same offset from
   the top of the hero section, so the logo and the menu button land in one spot
   sitewide. Top comes from .logo-box — no per-section nudge. */
/* Reserve exactly the card's height plus one gap, so every hero opens with the
   same breathing room whether its first line is an eyebrow or the headline. */
.page-hero:has(.logo-box) .page-hero__inner{
  padding-top:calc(var(--fab-top) + calc(var(--logo-pad) * 2) + var(--logo-img) + clamp(18px,1.8vw,26px));
  padding-bottom:clamp(34px,3.6vw,48px)}
/* The bare interior logo has no card padding to clear. */
.page-hero:has(.logo-box--left) .page-hero__inner{
  padding-top:calc(var(--fab-top) + var(--logo-img) + clamp(20px,2vw,30px))}
.page-hero:has(.logo-box) .page-hero__inner > :first-child{margin-top:0}
.page-hero h1{color:#fff;font-size:clamp(2rem,4.5vw,3rem);font-weight:800;margin:.35em 0 .3em}
.page-hero p{color:#cdd9e8;font-size:clamp(1.02rem,1.8vw,1.2rem);max-width:640px}
.page-hero .eyebrow{margin-bottom:.6em;display:block}
.page-hero .btn{margin-top:22px}

/* Donate/Get Involved hero: photo background with navy gradient overlay.
   The source photos are low-res (~800px) and show upscale softness at
   full-bleed width — the darker gradient below keeps that from reading as
   a mistake without smearing the image further. */
.page-hero--photo{position:relative;background-color:var(--navy);background-image:var(--hero-photo);background-position:center;background-size:cover;background-repeat:no-repeat;isolation:isolate}
.page-hero--photo::before{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(100deg,rgba(6,26,51,.97) 0%,rgba(6,26,51,.93) 38%,rgba(10,39,72,.8) 68%,rgba(10,39,72,.6) 100%)}
.page-hero--photo .wrap{position:relative;z-index:1}

/* ---------- Get involved hero ---------- */
/* The whole hero (photo + heading + the 3 path cards) is pinned to exactly one
   screen: the section is min-height:100svh and the photo sits in a 1fr grid
   row, so it stretches or shrinks to soak up whatever room the text and cards
   don't need. The blue divider (the section's border-bottom) always lands on
   the last pixel of the viewport instead of floating mid-page. */
.involve-hero{position:relative;background:var(--navy-deep);border-bottom:5px solid var(--sky);color:#fff;overflow:hidden;
  min-height:100svh;display:flex;flex-direction:column}
.involve-hero__grid{display:grid;grid-template-columns:1fr minmax(0,var(--maxw)) 1fr;grid-template-rows:minmax(160px,1fr) auto auto;width:100%;flex:1}
.involve-hero__content{grid-column:2;position:relative;z-index:2;max-width:none;
  padding:clamp(24px,3vw,40px) clamp(18px,2.5vw,36px) clamp(18px,2vw,28px)}
.involve-hero h1{color:#fff;font-size:clamp(2.6rem,4vw,4.2rem);font-weight:800;line-height:1.04;letter-spacing:-.04em;max-width:none;white-space:nowrap}
.involve-hero__content > p{color:#cdd9e8;font-size:clamp(1rem,1.2vw,1.15rem);line-height:1.65;margin-top:16px;max-width:760px;text-wrap:pretty}
.involve-hero__photo{grid-column:1 / -1;grid-row:1;order:-1;position:relative;width:100%;height:100%;
  background:url("hero-march-1760.jpg?v=1") center 40%/cover no-repeat}
.involve-hero__photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:24%;
  background:linear-gradient(180deg,rgba(6,26,51,0) 0%,rgba(6,26,51,.58) 64%,var(--navy-deep) 100%)}
.involve-paths{grid-column:2;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;background:transparent;
  margin:0 clamp(18px,2.5vw,36px) clamp(24px,3vw,40px)}
.involve-path{position:relative;background:#0c2d52;color:#fff;padding:20px 46px 20px 22px;min-width:0;
  border:1px solid rgba(255,255,255,.2);border-radius:var(--r-card);transition:transform .18s ease,border-color .18s ease,background .18s ease}
.involve-path:hover{background:#103760;border-color:rgba(68,182,229,.65);transform:translateY(-3px)}
.involve-path::after{content:"\2192";position:absolute;right:16px;top:20px;color:var(--sky);font-size:1.3rem;transition:transform .15s ease}
.involve-path:hover::after{transform:translateX(4px)}
.involve-path b{display:block;color:#fff;font-size:.86rem;text-transform:uppercase;letter-spacing:.045em;line-height:1.35}
.involve-path span{display:block;color:#8fa6bf;font-size:.76rem;line-height:1.45;margin-top:6px}

@media(max-width:900px){
  /* Below this width the heading wraps to multiple lines, so there's no
     reliable amount of leftover room to hand the photo — fall back to the
     page scrolling normally, with a fixed photo height like before. */
  .involve-hero{min-height:0;display:block}
  .involve-hero__grid{grid-template-rows:none}
  .involve-hero h1{max-width:760px;white-space:normal}
  .involve-hero__photo{height:clamp(340px,62vw,560px)}
}
@media(max-width:1099px){.involve-hero__photo{background-image:url("hero-march-1080.jpg?v=1")}}
@media(max-width:680px){.involve-hero__photo{background-image:url("hero-march-760.jpg?v=1")}}
@media(min-width:1800px){.involve-hero__photo{background-image:url("hero-march-2400.jpg?v=1")}}
@media(max-width:680px){
  .involve-hero h1{font-size:clamp(2.7rem,12.5vw,3.8rem)}
  .involve-paths{grid-template-columns:1fr}
  .involve-path{padding:18px 44px 18px 20px}
  .involve-path::after{top:16px}
}

/* ---------- Bands ---------- */
.band{padding:clamp(44px,5vw,68px) 0}
/* A band right under an interior hero doesn't need the full opening gap */
.page-hero + .band,.hero + .band,.about .photo-hero + .band{padding-top:clamp(32px,3.4vw,46px)}
/* The carousel closes on its own nav row, which already reads as an ending —
   a full band gap under it just leaves a hole before the next section. */
.band:has(.marquee){padding-bottom:clamp(20px,2.2vw,30px)}
.band--soft{background:var(--bg-soft);border-top:5px solid var(--sky);border-bottom:5px solid var(--sky)}
.band--navy{background:var(--navy);color:#fff}
.band--navy h2,.band--navy h3{color:#fff}
.band--navy p{color:#cdd9e8}
.band__head{max-width:820px}
.band__head.center{margin-inline:auto;text-align:center}
.band__head--split{max-width:none;display:grid;grid-template-columns:1.1fr .9fr;gap:8px clamp(24px,4vw,60px);align-items:start}
.band__head--split .eyebrow{grid-column:1 / -1}
.band__head.band__head--split h2{margin:0}
.band__head.band__head--split p{margin:0;align-self:start;padding-top:2px}
.band__head h2,.band__head h1{font-size:clamp(1.8rem,3.6vw,2.5rem);font-weight:800;margin:.3em 0 .4em}
.band__head p{font-size:1.08rem}
.lead-2col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}

/* About intro: text + photo */
.about-intro{align-items:stretch}
/* No top rule here — the banner above already ends in one. */
.band.about-intro{border-bottom:5px solid var(--sky)}
.about-intro .band__head{max-width:none}
.about-intro .band__head p{font-size:1.18rem;line-height:1.7}
.media-frame{margin:0;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;min-height:280px}
.media-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;display:block}

/* Stacked photo placeholders beside a text column (About founding story) */
.photo-stack{display:flex;flex-direction:column;gap:18px}
.photo-stack .media-frame{min-height:0}
.photo-stack .media-frame img{aspect-ratio:4/3}
.photo-stack .media-frame:first-child img{aspect-ratio:16/11}
/* Readable spacing between stacked paragraphs (About only) */
.about .band__head p + p,.about .lead-2col p + p{margin-top:.85em}

/* Trust pillars */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:42px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.pillar{background:#fff;padding:26px 24px}
.pillar b{font-weight:800;font-size:1.35rem;color:var(--navy);display:block}
.pillar span{color:var(--muted);font-size:.9rem}

/* Pull quote */
.quote{border-left:4px solid var(--red);padding:4px 0 4px 24px}
.quote p{font-weight:600;font-size:clamp(1.2rem,2.4vw,1.5rem);color:var(--navy);line-height:1.4}
.quote cite{display:block;margin-top:14px;font-style:normal;font-weight:600;color:var(--muted);font-size:.82rem;letter-spacing:.05em;text-transform:uppercase}

/* What's at stake */
.stake{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:42px}
.stake__item{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease}
.stake__item:hover{transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(10,37,64,.28)}
.stake__img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--bg-soft);border-bottom:4px solid var(--sky)}
.stake__body{padding:24px 26px}
.stake__body h3{font-weight:700;font-size:1.02rem;text-transform:uppercase;letter-spacing:.02em;color:var(--navy);margin-bottom:10px;line-height:1.25}
.stake__body p{color:var(--body);font-size:.95rem;line-height:1.6;margin:0}

/* Benefit pillars */
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:46px}
.benefit{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease}
.benefit:hover{transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(10,37,64,.28)}
.benefit__img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--bg-soft);border-bottom:4px solid var(--sky)}
.benefit__body{padding:26px 28px}
.benefit__ic{width:48px;height:48px;border-radius:var(--r-ic);background:var(--sky-soft);display:grid;place-items:center;color:var(--blue);margin-bottom:18px}
.benefit__ic svg{width:26px;height:26px}
.benefit h3{font-weight:700;font-size:1.02rem;text-transform:uppercase;letter-spacing:.02em;color:var(--navy);margin-bottom:10px;line-height:1.25}
.benefit p{font-size:.95rem;color:var(--body);line-height:1.6}
.benefit .mini-stats{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.benefit .mini-stats span{background:var(--sky-soft);color:var(--blue);font-weight:600;font-size:.78rem;padding:5px 10px;border-radius:5px}

/* Illinois & Israel callout box */
.il-box{margin-top:24px;background:var(--blue);color:#fff;border-radius:var(--r-card);padding:clamp(28px,4vw,44px)}
.il-box h3{color:#fff;font-size:clamp(1.3rem,2.6vw,1.7rem);font-weight:800;letter-spacing:-.01em;margin-bottom:10px}
.il-box__lead{color:#d3e4f6;font-size:1.02rem}
.il-box__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 26px;margin-top:30px}
.il-pt{border-top:2px solid rgba(255,255,255,.35);padding-top:14px}
.il-pt b{display:block;color:#fff;font-weight:800;font-size:1.06rem;margin-bottom:7px}
.il-pt span{display:block;color:#d3e4f6;font-size:.9rem;line-height:1.55}
@media(max-width:900px){.il-box__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.il-box__grid{grid-template-columns:1fr}}

/* Photo gallery (slow drift, and scrollable by hand) */
/* Full-bleed: break out of .wrap so the strip spans the whole viewport */
.marquee{position:relative;overflow-x:auto;overflow-y:hidden;cursor:grab;
  margin:4px calc(50% - 50vw + clamp(12px,1.6vw,28px)) 0;
  overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none}
.marquee::-webkit-scrollbar{display:none}
.marquee.is-dragging{cursor:grabbing}
.marquee__track{display:flex;gap:18px;width:max-content;margin:0;list-style:none;
  padding:0 calc(max(0px,(100vw - var(--maxw))/2) + clamp(18px,2.5vw,36px))}
/* The slow drift is driven by main.js scrolling this container, so that the
   same gesture surface handles the trackpad, dragging and the arrow buttons. */
.marquee__item{flex:0 0 auto;width:clamp(300px,31vw,390px)}
.marquee__item img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 42%;display:block;border-radius:var(--r-card);background:var(--bg-soft);
  user-select:none;-webkit-user-drag:none}
.marquee__cap{display:block;margin-top:12px;font-size:.82rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink);line-height:1.3}
.marquee__desc{display:block;margin-top:5px;font-size:.82rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--body);line-height:1.45}
.marquee.is-dragging .marquee__cap,.marquee.is-dragging .marquee__desc{user-select:none}
@media(max-width:600px){.marquee__item{width:78vw}}

/* Manual scroll controls under the gallery */
.marquee-nav{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:16px}
.marquee-nav button{width:46px;height:46px;border-radius:50%;border:2px solid var(--line);background:#fff;
  color:var(--navy);font-size:1.25rem;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s ease,border-color .15s ease,color .15s ease}
.marquee-nav button:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.marquee-nav__hint{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;font-weight:600}

/* Impact stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:30px 24px;margin-top:46px;text-align:center}
.stat b{font-weight:800;font-size:clamp(2.3rem,4.6vw,3.2rem);color:#fff;display:block;line-height:1}
.stat span{color:#9fb3cc;font-size:.85rem;margin-top:10px;display:block;text-transform:uppercase;letter-spacing:.05em}
.stat .accent{color:var(--sky)}

/* Criteria */
.criteria{list-style:none;display:grid;gap:10px;margin-top:6px;max-width:860px}
.criteria li{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:16px 20px;color:var(--body);font-size:1rem;line-height:1.5}
.criteria li::before{content:"";flex:0 0 22px;height:22px;border-radius:5px;background-color:var(--blue);margin-top:2px;
  -webkit-mask:no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  mask:no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}

/* Subheads */
.subhead{font-weight:800;font-size:clamp(1.35rem,2.8vw,1.85rem);color:var(--ink);margin:52px 0 6px}
.sublead{color:var(--body);max-width:700px;margin-bottom:26px;font-size:1.04rem}

/* Committees */
.committees{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:38px}
.committee{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-card);padding:clamp(28px,3vw,34px);overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.committee:hover{transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(10,37,64,.28);border-color:#c8d7e6}
.committee h3{font-weight:800;font-size:clamp(1.02rem,1.5vw,1.15rem);text-transform:uppercase;letter-spacing:.025em;
  color:var(--navy);line-height:1.25;margin-bottom:12px}
.committee p{font-size:.96rem;color:var(--body);line-height:1.7;flex:1 1 auto;margin-bottom:22px}
.committee .btn--text{margin-top:auto;align-self:stretch;padding-top:18px;border-top:1px solid var(--line);
  font-size:.82rem;font-weight:800;text-transform:uppercase;letter-spacing:.045em}

/* Board / leadership — a stacked list, since bios run long and vary a lot in
   length from one member to the next (a fixed-height card grid doesn't work). */
.board-list{display:flex;flex-direction:column;margin-top:40px}
.board-row{display:grid;grid-template-columns:220px 1fr;gap:clamp(24px,4vw,56px);padding:36px 0;border-top:1px solid var(--line)}
.board-row:last-child{padding-bottom:0}
.board-row__id{display:flex;flex-direction:column;align-items:flex-start}
/* Optional headshot, not used by default — see markup comment above the list. */
.board__mono{width:62px;height:62px;border-radius:50%;background:var(--sky-soft);color:var(--blue);
  display:grid;place-items:center;font-weight:800;font-size:1.15rem;letter-spacing:.02em;margin-bottom:16px}
.board__photo{width:62px;height:62px;border-radius:50%;object-fit:cover;background:var(--bg-soft);margin-bottom:16px}
.board__name{font-weight:800;font-size:1.2rem;color:var(--navy);letter-spacing:-.01em;margin-bottom:5px}
.board__role{display:block;font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.76rem;color:var(--blue)}
/* The bio runs the full width of the row. It used to be capped at 78ch, which
   left about a third of the band empty on a wide screen. */
.board-row__bio{max-width:none}
.board-row__bio p{font-size:.98rem;color:var(--body);line-height:1.7;margin:0}
.board-row__bio p + p{margin-top:.9em}
@media(max-width:820px){.board-row{grid-template-columns:1fr}}

/* Compact roster (at-large directors: name + role, no bio) */
.roster{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:36px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.roster li{background:#fff;padding:20px 24px}
.roster b{display:block;font-weight:700;font-size:1rem;color:var(--navy);line-height:1.3}
.roster span{display:block;margin-top:4px;font-size:.85rem;color:var(--muted)}
@media(max-width:900px){.roster{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.roster{grid-template-columns:1fr}}

/* Split feature (image + copy), used on Get Involved */
.split-feature{align-items:stretch}
.split-feature .media-frame{min-height:320px;height:100%}
.split-feature .media-frame img{object-position:50% 42%}
.split-feature .band__head{max-width:none}
.split-feature .band__head p + p{margin-top:.9em}
.split-feature .eyebrow{display:block;margin-bottom:.7em;line-height:1.45}
.split-feature h2{margin-bottom:.55em}
.contact-row{display:flex;align-items:center;gap:14px;margin-top:26px}
.contact-row__ic{flex:0 0 46px;height:46px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center}
.contact-row__ic svg{width:22px;height:22px}
.contact-row b{display:block;font-weight:500;font-size:.9rem;color:var(--muted)}
.contact-row a{font-weight:800;font-size:1.05rem;color:var(--navy)}
.contact-row a:hover{color:var(--blue)}

/* Image credits page */
.credits{max-width:820px}
.credits h2{font-size:clamp(1.2rem,2.2vw,1.45rem);font-weight:800;color:var(--navy);margin:34px 0 14px}
.credits h2:first-child{margin-top:0}
.credits__list{list-style:none;display:grid;gap:11px}
.credits__list li{font-size:.92rem;line-height:1.6;color:var(--body);padding-left:16px;position:relative}
.credits__list li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;background:var(--sky)}
.credits__list b{color:var(--navy);font-weight:700}
.credits__list a{color:var(--blue);text-decoration:underline}

/* Legal / policy pages (privacy, terms, accessibility) */
/* A document page's hero carries only a logo, a title and one line of standfirst,
   so it gets a tighter band than the marketing heroes: a touch more air under the
   logo, noticeably less dead space under the last line of copy. */
main:has(.legal) .page-hero__inner{
  padding-top:calc(var(--fab-top) - 5px + var(--logo-img) + clamp(30px,3vw,48px));
  padding-bottom:clamp(22px,2.2vw,30px)}
main:has(.legal) .page-hero h1{font-size:clamp(1.9rem,3.8vw,2.6rem);margin:0 0 .3em}
/* Standfirst takes the same measure as the reading column below it. */
main:has(.legal) .page-hero p{max-width:860px}

/* Document pages are a two-column grid: the reading column stays at a readable
   measure on the left, under the logo, and the section nav occupies the space
   to its right that a lone text column would otherwise leave empty. The nav is
   built by main.js, so without it these pages fall back to one column. */
.band .wrap:has(.legal-toc){display:grid;align-items:start;
  grid-template-columns:minmax(0,860px) minmax(200px,270px);
  justify-content:space-between;gap:clamp(36px,4vw,80px)}
/* The nav comes first in the DOM so it stacks above the text on narrow screens;
   on the grid it is placed explicitly into the right-hand column. */
.band .wrap:has(.legal-toc) > .legal{grid-column:1;grid-row:1}
.band .wrap:has(.legal-toc) > .legal-toc{grid-column:2;grid-row:1}
.legal{max-width:860px}
.legal h2{scroll-margin-top:28px}

.legal-toc{position:sticky;top:clamp(20px,3vw,34px)}
.legal-toc__title{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);padding:0 0 12px 14px}
.legal-toc ol{list-style:none;display:grid;gap:1px;counter-reset:none}
.legal-toc a{display:block;padding:8px 14px;font-size:.88rem;line-height:1.35;font-weight:500;
  color:var(--body);border-left:2px solid var(--line);transition:color .15s ease,background .15s ease,border-color .15s ease}
.legal-toc a:hover{color:var(--navy);background:var(--bg-soft)}
.legal-toc a[aria-current="true"]{color:var(--navy);font-weight:700;background:var(--sky-soft);border-left-color:var(--sky)}
/* Below the two-column threshold the nav sits above the text as a plain list. */
@media(max-width:1040px){
  .band .wrap:has(.legal-toc){display:block}
  .legal-toc{position:static;margin-bottom:34px;padding-bottom:26px;border-bottom:1px solid var(--line)}
  .legal-toc ol{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1px 18px}
}
.legal__updated{font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-bottom:18px;border-bottom:1px solid var(--line)}
.legal h2{font-size:clamp(1.2rem,2.2vw,1.45rem);font-weight:800;color:var(--navy);margin:38px 0 12px}
.legal h3{font-size:1.02rem;font-weight:700;color:var(--navy);margin:24px 0 8px}
.legal p{font-size:1rem;line-height:1.75;margin-bottom:14px}
.legal p:last-child{margin-bottom:0}
.legal a{color:var(--blue);text-decoration:underline}
.legal ul{list-style:none;display:grid;gap:10px;margin:0 0 16px}
.legal ul li{font-size:1rem;line-height:1.7;color:var(--body);padding-left:18px;position:relative}
.legal ul li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;background:var(--sky)}
.legal b,.legal strong{color:var(--navy);font-weight:700}

/* Membership / donate tiers */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;align-items:stretch}
.tier{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:34px 0 30px;display:flex;flex-direction:column;text-align:center;cursor:pointer;overflow:hidden;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.tier:hover{transform:translateY(-6px);box-shadow:0 16px 32px -18px rgba(10,39,72,.28)}
.tier.is-selected{border-color:var(--blue);box-shadow:0 16px 32px -18px rgba(10,39,72,.28)}
.tier--featured{border:2px solid var(--sky)}
.tier--featured.is-selected{border-color:var(--blue)}
.tier__name,.tier__price,.tier__term,.tier__desc,.tier__benefits,.tier .btn{padding-left:28px;padding-right:28px}
.tier__badge{position:absolute;top:12px;right:12px;background:var(--sky);color:#fff;font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:5px}
.tier__name{font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.82rem;color:var(--blue);margin-bottom:14px}
.tier__price{font-weight:800;font-size:2.5rem;color:var(--navy);line-height:1}
.tier__price span{font-size:.95rem;font-weight:400;color:var(--muted);margin-left:4px}
.tier__term{font-size:.8rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.tier__desc{margin:14px 0 0;font-size:.92rem;color:var(--body);line-height:1.55}
.tier__benefits{list-style:none;text-align:left;margin:20px 0 26px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:11px}
.tier__benefits li{position:relative;padding-left:26px;font-size:.9rem;color:var(--body);line-height:1.45}
.tier__benefits li::before{content:"✓";position:absolute;left:0;top:-1px;color:var(--sky);font-weight:800;font-size:.95rem}
.tier--featured .tier__benefits li::before{color:var(--blue)}
.tier p{margin:16px 0 24px;font-size:.94rem;color:var(--body);line-height:1.6;flex:1 1 auto}
.tier .btn{width:auto;background:transparent;border:0;padding:0 28px;min-height:0;margin-top:auto;color:var(--blue);font-size:.92rem;letter-spacing:.02em;text-transform:none;font-weight:700;justify-content:center}
.tier .btn::after{content:"→";margin-left:.35em;transition:transform .15s ease}
.tier .btn:hover{background:transparent;color:var(--blue-press)}
.tier .btn:hover::after{transform:translateX(3px)}
.member-note{text-align:center;margin-top:28px;color:var(--muted);font-size:1rem}

/* Event speaker cards */
.speakers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.speaker-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:30px 26px;text-align:center;transition:transform .22s ease,box-shadow .22s ease}
.speaker-card:hover{transform:translateY(-6px);box-shadow:0 16px 32px -18px rgba(10,39,72,.28)}
.speaker-card__photo{width:72px;height:72px;border-radius:50%;object-fit:cover;margin:0 auto 14px;opacity:.35}
.speaker-card__name{font-weight:700;color:var(--ink);margin:0 0 2px;font-size:1rem}
.speaker-card__title{margin:0 0 12px;font-size:.85rem;color:var(--muted)}
.speaker-card__bio{margin:0;font-size:.85rem;color:var(--body);line-height:1.55;text-align:left}

/* Past honorees (dark band) */
.honorees{background:var(--navy);color:#fff}
.honorees .band__head h2{color:#d8b667}
.honorees .band__head p{color:#b9c6d8}
.honoree-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px 40px;margin-top:36px}
.honoree{display:flex;flex-direction:column;gap:2px}
.honoree__name{font-weight:700;color:#d8b667;font-size:1rem}
.honoree__org{color:#fff;font-size:.92rem;margin-top:6px}
.honoree__role{color:#b9c6d8;font-style:italic;font-size:.88rem}
.honoree-legend{margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.15);color:#b9c6d8;font-size:.85rem;display:flex;flex-direction:column;gap:6px}
@media (max-width:820px){
  .honoree-grid{grid-template-columns:1fr;max-width:430px;margin-inline:auto}
}

/* Event agenda list */
.agenda{max-width:640px;margin:36px auto 0;list-style:none;display:grid;gap:0;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:#fff}
.agenda li{display:flex;gap:20px;padding:16px 24px;border-top:1px solid var(--line)}
.agenda li:first-child{border-top:0}
.agenda__time{flex:0 0 auto;font-weight:700;color:var(--blue);font-size:.9rem;white-space:nowrap}
.agenda__desc{font-size:.95rem;color:var(--body);line-height:1.5}

@media (max-width:820px){
  .speakers{grid-template-columns:1fr;max-width:430px;margin-inline:auto}
}

/* Public events list (events.html) */
.event-list{display:flex;flex-direction:column;gap:18px;margin-top:44px}
.event-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:26px 28px;
  display:flex;gap:26px;align-items:center;transition:transform .2s ease,box-shadow .2s ease}
.event-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(10,37,64,.28)}
.event-card__date{flex:0 0 auto;width:82px;text-align:center;padding:10px 0;border-radius:var(--r-ic);background:var(--sky-soft)}
.event-card__month{display:block;font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--blue)}
.event-card__day{display:block;font-weight:800;font-size:1.7rem;color:var(--navy);line-height:1.15}
.event-card__body{flex:1 1 auto;min-width:0}
.event-card__title{font-weight:700;font-size:1.1rem;color:var(--navy);margin-bottom:4px}
.event-card__meta{font-size:.88rem;font-weight:600;color:var(--muted);margin-bottom:10px}
.event-card__meta span + span::before{content:"·";margin:0 8px;color:var(--line)}
.event-card__desc{font-size:.95rem;color:var(--body);line-height:1.6}
.event-card__action{flex:0 0 auto}
.event-empty{max-width:460px;margin:44px auto 0;text-align:center;padding:40px 28px;border:1px dashed var(--line);border-radius:var(--r-card);color:var(--muted)}
@media(max-width:680px){
  .event-card{flex-direction:column;align-items:flex-start;text-align:left}
  .event-card__date{width:auto;display:inline-flex;align-items:baseline;gap:6px;padding:6px 14px}
  .event-card__day{font-size:1.15rem}
  .event-card__action{align-self:stretch}
  .event-card__action .btn{width:100%}
}

/* Form box (AIPAC-style institutional donate panel: gray section bars over a bordered card) */
.form-box{max-width:640px;margin:36px auto 0;background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;text-align:left}
.form-box__bar{background:var(--bg-soft);border-bottom:1px solid var(--line);border-top:1px solid var(--line);padding:12px 24px;font-weight:700;font-size:.95rem;color:var(--ink)}
.form-box__bar:first-child{border-top:0}
.form-box__body{padding:24px}

.freq-toggle{display:flex;flex-wrap:wrap;gap:22px;margin-bottom:10px}
.freq-toggle__opt{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.95rem;color:var(--ink);cursor:pointer}
.freq-toggle__opt input{width:16px;height:16px;accent-color:var(--blue);cursor:pointer}
.freq-toggle__note{font-size:.85rem;color:var(--muted);margin-bottom:18px}

.amount-picker__pills{display:flex;flex-wrap:wrap;gap:10px}
.pill{font-family:var(--font);font-weight:700;font-size:.98rem;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:4px;padding:11px 20px;cursor:pointer;transition:border-color .18s ease,background .18s ease,color .18s ease}
.pill:hover{border-color:var(--blue)}
.pill.is-active{background:var(--sky-soft);border-color:var(--blue);color:var(--blue)}
.pill--other.is-active{background:var(--sky-soft);border-color:var(--blue);color:var(--blue)}
.amount-picker__custom{margin-top:16px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.amount-picker__custom[hidden]{display:none}
.amount-picker__custom label{font-size:.85rem;color:var(--muted);font-weight:600}
.amount-picker__custom-input{display:flex;align-items:center;gap:6px;background:#fff;border:1.5px solid var(--line);border-radius:4px;padding:8px 14px}
.amount-picker__custom-input span{color:var(--muted);font-weight:700}
.amount-picker__custom-input input{border:0;outline:0;font-family:var(--font);font-size:1.1rem;font-weight:700;color:var(--navy);width:110px;text-align:left}
.amount-picker__summary{margin-top:20px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  opacity:0;transform:translateY(-6px);transition:opacity .25s ease,transform .25s ease}
.amount-picker__summary[hidden]{display:none}
.amount-picker__summary.is-on{opacity:1;transform:translateY(0)}
.amount-picker__summary span{font-size:1rem;color:var(--body)}
.amount-picker__summary strong{color:var(--navy)}
.amount-picker__trust{font-size:.85rem;color:var(--muted);line-height:1.6}

/* Social-proof pill: sits under the Membership societies intro on donate */
.hero-stat{margin-top:22px;display:inline-block;font-size:.92rem;font-weight:600;color:var(--navy);
  background:var(--sky-soft);border:1px solid #bfe3f5;border-radius:999px;padding:9px 20px}
.hero-stat strong{font-weight:800;color:var(--blue)}
.page-hero__actions{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap}
.page-hero__actions .btn{margin-top:0}

/* FAQ */
.faq{max-width:760px;margin:36px auto 0;display:flex;flex-direction:column;gap:12px}
.faq__item{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:6px 24px}
.faq__item summary{cursor:pointer;list-style:none;font-weight:700;color:var(--navy);font-size:1rem;padding:16px 0;position:relative;padding-right:28px}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";position:absolute;right:0;top:16px;font-size:1.3rem;font-weight:400;color:var(--blue);line-height:1}
.faq__item[open] summary::after{content:"–"}
.faq__item p{padding-bottom:18px;font-size:.95rem;line-height:1.6;color:var(--body)}

/* Scroll-reveal */
/* Scroll-reveal disabled: fade-up-on-scroll on every section is a generated-site
   tell (CLAUDE.md 5.6). Class + IntersectionObserver still load but do nothing. */
.reveal{opacity:1;transform:none}
.tier.reveal{transition:box-shadow .22s ease,border-color .22s ease}

/* Contact */
/* The contact hero carries only a headline, so it sits tighter than the heroes
   that also run an eyebrow and a paragraph. */
.page-hero.page-hero--contact .page-hero__inner{
  padding-top:calc(var(--fab-top) + var(--logo-img) + clamp(6px,0.8vw,12px));
  padding-bottom:clamp(8px,1vw,14px)}
.page-hero--contact h1{margin-top:0;text-align:center}
.page-hero--contact + .band{padding-top:clamp(22px,2.4vw,32px)}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(20px,4vw,48px);align-items:start}
.contact-info{display:grid;gap:26px}
.contact-info__card{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(24px,4vw,36px)}
.contact-info address{font-style:normal;line-height:1.5}
.contact-row--plain{display:block;margin-top:24px}
.contact-row--plain b{display:block;font-weight:500;font-size:.9rem;color:var(--muted);margin-bottom:2px}
.contact-row--plain a,.contact-row--plain address{font-weight:800;font-size:1.05rem;color:var(--navy)}
.contact-row--plain a:hover{color:var(--blue)}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(24px,4vw,36px)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field[hidden]{display:none}
.field label{font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;color:var(--navy)}
.field input,.field textarea,.field select{padding:13px 14px;border:1.5px solid var(--line);border-radius:var(--r-btn);font-size:1rem;font-family:var(--font);color:var(--ink);background:#fff;width:100%}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--blue)}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e5aa0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:18px;padding-right:42px}
.field .opt{font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted);font-size:.78rem}
.form-card .btn{width:100%}
.form-card h2,.contact-info h2{font-size:clamp(1.3rem,2.4vw,1.6rem);font-weight:800;color:var(--navy);margin-bottom:8px;letter-spacing:-.01em}
.form-note{margin-top:13px;font-size:.8rem;color:var(--muted);text-align:center}
/* display:none (not just off-screen positioning) so autofill/password
   managers skip it — a field that's merely positioned off-screen is still
   in the render tree and some autofill engines will happily fill it, which
   silently trips the honeypot on a real visitor's submission. */
.hp{display:none!important}
.form-card .form-ok{color:#1c7a43;background:#e9f7ee;border:1px solid #bce5cc;border-radius:var(--r-btn);padding:16px;line-height:1.5}
.form-card .form-ok strong{display:block;color:#13633a}
.contact-join{margin-top:8px;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-card);padding:22px 24px}
.contact-join h3{font-size:1.05rem;font-weight:800;color:var(--navy);margin-bottom:8px}
.contact-join p{font-size:.93rem;color:var(--body);line-height:1.55;margin-bottom:16px}
.contact-join__btns{display:flex;gap:10px;flex-wrap:wrap}
.contact-join__btns .btn{width:auto}
.btn--line{background:transparent;color:var(--navy);border:1.5px solid var(--navy)}
.btn--line:hover{background:var(--navy);color:#fff}

/* CTA */
.cta{background:var(--navy);color:#fff;text-align:center;padding:clamp(40px,4.5vw,60px) 0;border-top:5px solid var(--sky)}
/* the band above already ends in a sky rule — don't stack two */
.band--soft + .cta,.hero + .cta{border-top:0}
.cta__inner{max-width:1180px;margin-inline:auto}
.cta h2{color:#fff;font-size:clamp(1.9rem,4vw,2.6rem);font-weight:800;margin:0 0 .35em;line-height:1.12}
.cta p{color:#cdd9e8;font-size:1.08rem}
.cta__btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.cta__disc{margin-top:26px;font-size:.8rem;color:#869ab5;max-width:580px;margin-inline:auto}

/* Teasers (home) */
.teasers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:6px}
.teaser{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:30px 28px;transition:transform .2s ease,box-shadow .2s ease}
.teaser:hover{transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(10,37,64,.28)}
.teaser__num{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:0 0 36px;border-radius:50%;background:var(--navy);color:#fff;font-weight:800;font-size:1rem;margin-bottom:18px}
.teaser h3{font-weight:700;font-size:1.15rem;text-transform:uppercase;letter-spacing:.02em;color:var(--navy);margin-bottom:10px}
.teaser p{font-size:.96rem;color:var(--body);line-height:1.6;flex:1 1 auto;margin-bottom:16px}

/* Becoming a member: a connected, three-step progression */
.membership-process{background:#fff}
.membership-process__head{display:grid;grid-template-columns:minmax(0,.9fr) minmax(320px,.7fr);gap:clamp(28px,6vw,90px);align-items:end;margin-bottom:clamp(22px,2.6vw,32px)}
.membership-process__head h2{font-size:clamp(2rem,4vw,3rem);font-weight:800;color:var(--navy);margin-top:0;letter-spacing:-.025em}
.membership-process__head > p{font-size:1.04rem;line-height:1.72;color:var(--body);max-width:640px}
.membership-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);background:#fff;border:1px solid var(--line);border-top:5px solid var(--sky);border-radius:var(--r-card);box-shadow:0 22px 48px -34px rgba(10,39,72,.42);overflow:hidden}
.membership-step{position:relative;display:flex;flex-direction:column;min-width:0;padding:clamp(26px,3vw,38px);min-height:330px}
.membership-step + .membership-step{border-left:1px solid var(--line)}
.membership-step:not(:last-child)::after{content:"\2192";position:absolute;z-index:2;right:-18px;top:43px;width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--blue);font-weight:700;font-size:1.1rem}
.membership-step__num{display:block;color:var(--blue);font-size:clamp(2.35rem,4vw,3.3rem);font-weight:800;line-height:1;letter-spacing:-.06em;margin-bottom:24px}
.membership-step h3{color:var(--navy);font-size:clamp(1.05rem,1.5vw,1.22rem);font-weight:800;text-transform:uppercase;letter-spacing:.025em;line-height:1.25;margin-bottom:14px;max-width:280px}
.membership-step p{color:var(--body);font-size:.95rem;line-height:1.68;margin-bottom:24px;flex:1 1 auto}
.membership-step__link{align-self:flex-start;display:inline-flex;align-items:center;gap:9px;color:var(--blue);font-size:.82rem;font-weight:800;text-transform:uppercase;letter-spacing:.045em;border-bottom:2px solid var(--sky);padding-bottom:4px;transition:color .15s ease,border-color .15s ease}
.membership-step__link::after{content:"\2192";font-size:1rem;transition:transform .15s ease}
.membership-step__link:hover{color:var(--blue-press);border-color:var(--blue)}
.membership-step__link:hover::after{transform:translateX(3px)}
@media(max-width:900px){
  .membership-process__head{grid-template-columns:1fr;gap:14px;align-items:start}
  .membership-process__head > p{max-width:720px}
  .membership-steps{grid-template-columns:1fr}
  .membership-step{min-height:0;padding:28px 28px 28px 92px}
  .membership-step + .membership-step{border-left:0;border-top:1px solid var(--line)}
  .membership-step:not(:last-child)::after{content:"\2193";right:auto;left:35px;top:auto;bottom:-18px}
  .membership-step__num{position:absolute;left:28px;top:30px;font-size:2rem;margin:0}
  .membership-step h3{max-width:none}
}
@media(max-width:520px){
  .membership-process__head > p{font-size:.97rem}
  .membership-step{padding:76px 22px 26px}
  .membership-step__num{left:22px;top:24px}
  .membership-step:not(:last-child)::after{left:50%;transform:translateX(-50%);bottom:-18px}
}

/* Membership tiers */
.membership-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.membership-tier{position:relative;display:flex;flex-direction:column;padding:clamp(26px,2.8vw,36px);background:#fff;border:2px solid var(--line);border-radius:var(--r-card);transition:all .25s ease}
.membership-tier:hover{border-color:var(--sky);box-shadow:0 16px 40px -12px rgba(68,182,229,.3)}
.membership-tier--featured{border-color:var(--sky);box-shadow:0 16px 40px -12px rgba(68,182,229,.3)}
.membership-tier__badge{position:absolute;top:clamp(16px,2vw,24px);right:clamp(16px,2vw,24px);display:inline-block;background:var(--sky);color:#fff;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:8px 14px;border-radius:var(--r-btn)}
.membership-tier__head{margin-bottom:18px}
.membership-tier h3{color:var(--navy);font-size:clamp(1.15rem,2.5vw,1.4rem);font-weight:800;line-height:1.15;letter-spacing:-.015em;margin-bottom:10px}
.membership-tier__price{color:var(--blue);font-size:clamp(1.8rem,4vw,2.2rem);font-weight:800;line-height:1}
.membership-tier__price span{font-size:.65em;color:var(--body);font-weight:600}
.membership-tier__benefits{color:var(--body);font-size:.95rem;line-height:1.68;flex:1 1 auto;margin-bottom:22px}
.membership-tier .btn--blue{background:var(--blue);color:#fff}
.membership-tier .btn--blue:hover{background:var(--blue-press)}
@media(max-width:900px){
  .membership-tiers{grid-template-columns:1fr}
}
@media(max-width:520px){
  .membership-tiers{grid-template-columns:1fr}
  .membership-tier__price{font-size:1.6rem}
}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-deep);color:#9fb3cc;padding:clamp(46px,6vw,68px) 0 30px;border-top:5px solid var(--sky)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px}
.foot-brand img{height:42px;width:auto;margin-bottom:18px}
.foot-brand p{color:#8497b0;font-size:.92rem;max-width:340px}
.site-footer h4{color:#fff;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
.site-footer ul{list-style:none;display:grid;gap:10px}
.site-footer a{color:#9fb3cc;font-size:.95rem}
.site-footer a:hover{color:#fff}
.foot-disc{margin-top:40px;padding:22px 26px;font-size:.95rem;color:#dce6f2;line-height:1.65;text-align:center;
  background:transparent;border:1.5px solid #fff;border-radius:var(--r-card)}
.foot-bottom{margin-top:18px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;font-size:.78rem;color:#677c98}
.foot-bottom a{font-size:.78rem;color:#8aa0bd;text-decoration:underline}
.foot-bottom a:hover{color:#fff}
.foot-legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px 18px}
.foot-legal a[aria-current="page"]{color:#fff}

/* ---------- Sign-up card (Stay in the Loop) ---------- */
.signup-card{background:transparent;max-width:560px;margin-top:30px}
.signup-card__title{color:#fff;font-size:clamp(1.45rem,3vw,1.85rem);font-weight:800;margin-bottom:18px}
.signup-card__sub{color:#cdd9e8;font-size:.97rem;margin-bottom:18px}
.stay-form .stay-row,.contact-form .stay-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stay-form .field{margin-bottom:12px}
.signup-card .field label{color:#cdd9e8}
.signup-card .field input{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28);color:#fff}
.signup-card .field input::placeholder{color:#a9bcd2}
.signup-card .field input:focus{border-color:var(--sky);background:rgba(255,255,255,.14)}
.stay-submit{width:100%;margin-top:6px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px}
.stay-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.stay-actions .stay-submit{margin-top:0}
.stay-actions .stay-donate{display:inline-flex;align-items:center;justify-content:center;width:100%}
@media (max-width:420px){.stay-actions{grid-template-columns:1fr}}
.stay-submit[disabled]{cursor:default}
.spinner{display:none;width:20px;height:20px;border:2.5px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.stay-submit.is-loading .stay-label{opacity:.75}
.stay-submit.is-loading .spinner{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.stay-success{text-align:center;padding:16px 6px 6px}
.stay-check{display:inline-grid;place-items:center;width:66px;height:66px;border-radius:50%;background:rgba(120,228,170,.18);color:#7fe3a6;margin-bottom:14px;animation:pop .5s cubic-bezier(.2,.8,.3,1.25) both}
.stay-check svg{width:32px;height:32px}
.stay-success h3{color:#fff;font-size:1.5rem;font-weight:800;margin-bottom:6px}
.stay-success p{color:#cdd9e8;font-size:.97rem}
@keyframes pop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@media(max-width:520px){.stay-form .stay-row,.contact-form .stay-row{grid-template-columns:1fr;gap:0}}
@media(prefers-reduced-motion:reduce){.stay-check{animation:none}}

/* ---------- Homepage photo hero ---------- */
.nav-fab{position:fixed;top:var(--fab-top);right:var(--fab-right);z-index:120;transform:none;box-shadow:0 10px 26px -10px rgba(0,0,0,.45)}
.home-nav .nav-menu{position:fixed;top:calc(var(--fab-top) + 56px);right:var(--fab-right);left:auto}
.photo-hero{position:relative;height:min(56vh,560px);min-height:360px;overflow:hidden;background:var(--navy)}
/* The home banner is the page's whole first impression, so it gets a taller
   window than the interior pages' strip. */
.home:not(.about) .photo-hero{height:min(59vh,610px);min-height:340px}
/* The home banner and the intro block are one fold: the banner absorbs
   whatever height the intro leaves over, so the hero's blue bottom rule lands
   on the viewport edge rather than just below it. The fold needs a definite
   height for that — a min-height alone lets the banner keep its own size and
   push the rule past the fold. Only tall enough desktop windows get this;
   anywhere shorter the two sections just run long, which is the safe failure
   (a definite fold there would squeeze the banner to nothing or spill the
   intro over the gallery below). */
@media (min-width:681px) and (min-height:620px){
  .home-fold{display:flex;flex-direction:column;height:100vh;height:100dvh}
  /* The photo grows to fill the viewport; the form section stays compact. */
  .home-fold > .photo-hero{flex:1 1 auto;min-height:280px}
  .home-fold > .hero{flex:0 1 auto}
}
.photo-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
/* The home banner crops a 1.8:1 lakefront photo down to a wide strip. The
   skyline sits just above the middle of the frame, so bias the window
   slightly up: the open water at the bottom is what gets trimmed, and the
   towers keep headroom under the logo card.
   about.html carries both `about` and `home`, so exclude it explicitly —
   it sets its own crop on the same photo. */
.home:not(.about) .photo-hero__img{object-position:50% 17%}
/* Very wide, short windows cut so much off the vertical that 42% starts
   clipping the tower tops. Nothing worth keeping is left at the waterline
   in those shapes, so pull the window further up. */
@media(min-aspect-ratio:5/2){.home:not(.about) .photo-hero__img{object-position:50% 30%}}
.photo-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,39,72,.18),rgba(10,39,72,0) 24%)}
/* The bare white logo now sits over open sky on the home page too, so the
   top scrim has to carry it the way the interior pages' does. */
.home:not(.about) .photo-hero::after{background:linear-gradient(180deg,rgba(6,26,51,.42),rgba(6,26,51,.14) 26%,rgba(10,39,72,0) 50%)}
.logo-box{position:absolute;top:var(--fab-top);left:50%;transform:translateX(-50%);z-index:3;background:#fff;padding:var(--logo-pad) clamp(22px,3vw,36px);border-radius:14px;box-shadow:0 16px 44px -14px rgba(0,0,0,.45)}
.logo-box img{height:var(--logo-img);width:auto;display:block}
/* Interior pages sit the bare logo in the top-left gutter — no white card.
   Only the home page keeps the centered card. The left offset matches
   .wrap's inline padding; the drop shadow keeps it legible on photos. */
.logo-box--left{left:max(clamp(18px,2.5vw,36px),calc(50% - var(--maxw) / 2 + clamp(18px,2.5vw,36px)));transform:none;background:none;padding:0;border-radius:0;box-shadow:none}
.logo-box--left img{filter:drop-shadow(0 2px 10px rgba(6,26,51,.55))}
/* Interior pages get a shorter banner photo than the home page, plus a
   darker top scrim so the bare white-and-sky logo reads over bright sky.
   The About banner also carries the page title, so it is bottom-aligned and
   scrimmed at both ends: top for the logo, bottom for the headline. Same
   sky rule underneath as every other interior hero. */
.about .photo-hero{height:min(52vh,470px);min-height:320px;display:flex;align-items:flex-end;border-bottom:5px solid var(--sky)}
/* Wide windows crop this 1.8:1 photo to a thin strip. Centred, that strip is
   solid skyline, and a headline over it is unreadable at any scrim strength.
   Drop the crop so the waterline lands mid-frame: the skyline stays whole up
   top and the type sits on open lake. */
.about .photo-hero__img{object-position:50% 40%}
.about .photo-hero::after{background:linear-gradient(180deg,rgba(6,26,51,.52) 0,rgba(6,26,51,.1) 20%,rgba(6,26,51,0) 38%,rgba(6,26,51,.5) 70%,rgba(6,26,51,.88) 100%)}
.about .photo-hero .wrap{position:relative;z-index:2;width:100%}
.about .photo-hero .page-hero__inner{padding:0 0 clamp(26px,3vw,42px)}
.about .photo-hero h1{color:#fff;font-size:clamp(2.1rem,4.6vw,3.1rem);font-weight:800;margin:0;text-shadow:0 2px 18px rgba(6,26,51,.45)}
.about .photo-hero p{color:#dbe6f3;font-size:clamp(1.02rem,1.7vw,1.18rem);max-width:640px;margin:.5em 0 0;text-shadow:0 2px 14px rgba(6,26,51,.5)}
@media(max-width:680px){
  .home-nav .nav-menu{left:12px;right:12px;top:70px}
  .photo-hero{height:min(52vh,440px);min-height:300px}
  /* Portrait windows crop the 1.8:1 photo hard on width, so a taller frame
     mostly buys open lake. Keep the gain modest and raise the crop so the
     extra height goes to the skyline instead of the water. */
  .home:not(.about) .photo-hero{height:min(58vh,500px);min-height:320px}
  .home:not(.about) .photo-hero__img{object-position:50% 14%}
  /* A portrait window crops this photo on width, not height — the vertical
     crop above does nothing here and the shoreline sits behind the headline.
     Start the scrim higher instead. */
  .about .photo-hero::after{background:linear-gradient(180deg,rgba(6,26,51,.52) 0,rgba(6,26,51,.1) 18%,rgba(6,26,51,0) 32%,rgba(6,26,51,.55) 62%,rgba(6,26,51,.9) 100%)}
  /* On phones the stacked intro alone is most of a screen, so forcing the two
     into one fold would leave the banner a sliver. Let them run long. */
  .home-fold{display:block;min-height:0}
}

/* ---------- Donation Form ---------- */
.donation-intro{max-width:820px;margin:0 auto;text-align:center}
.donation-intro p{font-size:1.02rem;line-height:1.7;color:var(--body);margin-bottom:16px}
.donation-intro a{color:var(--blue);font-weight:600}

.donation-form{max-width:800px;margin:36px auto 0;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);box-shadow:0 2px 8px rgba(10,39,72,.06)}

.form-section{border-top:1px solid var(--line);padding:32px 36px}
.form-section:first-child{border-top:0}
.form-section__header{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#f8fafc 0%,#f3f6fa 100%);margin:-32px -36px 24px;padding:16px 36px;font-weight:700;font-size:.98rem;color:var(--navy);border-bottom:2px solid var(--line);letter-spacing:.015em}
.form-section__body{display:grid;gap:22px}

.form-group{display:grid;gap:10px}
.form-group--row{grid-template-columns:1fr 1fr;gap:24px}
.form-group--row > div{display:grid;gap:10px;align-content:start}

fieldset{border:0;padding:0;margin:0}
.form-label{display:block;font-weight:600;font-size:.93rem;color:var(--ink);letter-spacing:.01em}
.required{color:var(--red);font-weight:700}

.radio-group{display:flex;gap:28px;margin-top:10px}
.radio-option{display:flex;align-items:center;gap:10px;font-weight:500;font-size:.95rem;color:var(--body);cursor:pointer}
.radio-option input{cursor:pointer;width:18px;height:18px;accent-color:var(--blue)}
.radio-option:hover{color:var(--navy)}

.amount-buttons{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:14px}
.amount-btn{padding:14px 12px;border:2px solid var(--line);background:#fff;color:var(--navy);font-weight:700;font-size:.92rem;
  border-radius:8px;cursor:pointer;transition:all .2s ease}
.amount-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--sky-soft)}
.amount-btn.active{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 4px 12px rgba(14,90,160,.25)}
.amount-btn--other{grid-column:6}

/* Donate page: embedded PayPal checkout (buttons, wallets, hosted card
   fields), rendered by assets/donate-checkout.js once a donation row exists.
   Sits below the form itself, in the same page flow, so completing a gift
   never navigates the donor away. */
/* The payment step is a section of the donation form, not a card floating
   below it — a donor reads straight from the amount and their details into
   how they want to pay, with nothing between. It therefore takes the same
   .form-section styling as every other block in the form and adds nothing of
   its own. */
.pp-wallets{display:flex;gap:14px;flex-wrap:wrap}
.pp-wallet-btn{flex:1;min-width:220px;min-height:44px}
.pp-buttons{min-height:44px}
/* One slot per funding source (PayPal, Venmo, Pay Later, card) — each is its
   own iframe, so the gap has to live on the container rather than on the
   buttons PayPal renders inside. */
.pp-button-slot+.pp-button-slot{margin-top:10px}
.pp-buttons[hidden]{display:none}
.pp-divider[hidden]{display:none}
.pp-divider{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:.87rem;font-weight:600;margin:6px 0}
.pp-divider::before,.pp-divider::after{content:"";flex:1;height:1px;background:var(--line)}
/* The box is ours, the input inside it is PayPal's iframe. That iframe ships
   with its own fixed width/height inline, which overflowed this container and
   overlapped the next field — it has to be stretched to fill the box instead.
   Inner padding lives in the `style` object donate-checkout.js passes to
   PayPal, since the text is rendered inside the iframe, not here. */
.pp-hosted-field{height:56px;padding:0 12px;border:2px solid var(--line);border-radius:8px;background:#fff;transition:border-color .2s ease;overflow:hidden}
/* PayPal wraps the iframe in a div carrying an inline height (78px) — both
   the wrapper and the frame have to be overridden or the field grows past
   the box and collides with the one below it. */
.pp-hosted-field>div,.pp-hosted-field iframe{display:block;width:100%!important;height:100%!important;min-width:0!important}
.pp-hosted-field.pp-field-focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(14,90,160,.12)}
.pp-hosted-field.pp-field-invalid{border-color:#c0392b;background:#fdf3f2}
#ppCardSubmit{width:100%}

.donation-payment .form-hint[role="status"]:empty{display:none}
.donation-disclaimer{max-width:800px;margin:20px auto 0;font-size:.85rem;color:var(--muted);line-height:1.6;text-align:center}
.donation-success{position:fixed;inset:0;z-index:1000;display:none;place-items:center;padding:clamp(16px,4vw,48px)}
.donation-success.show{display:grid}
.donation-success__backdrop{position:absolute;inset:0;width:100%;height:100%;border:0;background:rgba(6,26,51,.86);cursor:pointer;backdrop-filter:blur(5px)}
.donation-success__card{position:relative;z-index:1;width:min(760px,100%);max-height:calc(100vh - 32px);overflow:auto;background:#fff;border-radius:14px;box-shadow:0 28px 80px rgba(0,0,0,.35);text-align:center}
.donation-success__close{position:absolute;z-index:2;top:14px;right:16px;width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.42);border-radius:50%;background:rgba(6,26,51,.28);color:#fff;font:400 1.8rem/1 var(--font);cursor:pointer;transition:background .15s ease}
.donation-success__close:hover{background:rgba(6,26,51,.58)}
.donation-success__brand{display:grid;justify-items:center;padding:clamp(34px,6vw,58px) clamp(24px,6vw,64px) clamp(30px,5vw,48px);color:#fff;background:linear-gradient(145deg,var(--navy-deep),var(--navy))}
.donation-success__brand img{width:min(240px,68vw);height:auto;margin-bottom:26px}
.donation-success__check{display:grid;place-items:center;width:64px;height:64px;margin-bottom:18px;border:3px solid #7fe3a6;border-radius:50%;background:rgba(127,227,166,.12);color:#7fe3a6;font-size:2rem;font-weight:800;line-height:1}
.donation-success__eyebrow{margin-bottom:10px;color:#7fe3a6;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em}
.donation-success__brand h2{max-width:620px;color:#fff;font-size:clamp(1.75rem,4.5vw,2.65rem);font-weight:800;letter-spacing:-.025em}
.donation-success__body{padding:clamp(28px,5vw,48px) clamp(24px,7vw,68px) clamp(30px,5vw,46px)}
.donation-success__body>p{max-width:600px;margin-inline:auto;font-size:1rem;line-height:1.7}
.donation-success__receipt{margin-bottom:14px;color:var(--navy)!important;font-size:1.08rem!important;font-weight:700}
.donation-success__actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:30px 0 22px}
.donation-success__secondary{border-color:var(--blue);color:var(--blue);background:#fff}
.donation-success__secondary:hover{background:var(--sky-soft);border-color:var(--blue-press);color:var(--blue-press)}
.donation-success__home{display:inline-block;font-size:.9rem;font-weight:600;text-decoration:underline;text-underline-offset:3px}
body.donation-success-open{overflow:hidden}
@media (max-width:560px){
  .donation-success{padding:10px}
  .donation-success__card{max-height:calc(100vh - 20px);border-radius:10px}
  .donation-success__brand{padding-top:30px}
  .donation-success__brand img{margin-bottom:20px}
  .donation-success__check{width:54px;height:54px;font-size:1.65rem}
  .donation-success__actions{display:grid}
  .donation-success__actions .btn{width:100%}
}
.form-input.is-invalid{border-color:#c0392b;background:#fdf3f2}
.field-error{margin:6px 0 0;color:#c0392b;font-size:.88rem;font-weight:600}

.custom-amount{margin-top:18px;padding:18px;background:var(--bg-soft);border-radius:8px}
.custom-amount .form-label{margin-bottom:8px}
.amount-input{display:flex;align-items:center;gap:10px;margin-top:10px}
.amount-input span{font-weight:700;color:var(--ink);font-size:1.05rem}
.amount-input input{flex:1;padding:13px 16px;border:2px solid var(--line);border-radius:8px;
  font-size:1rem;font-family:var(--font);color:var(--ink);font-weight:600}
.amount-input input::placeholder{color:var(--muted)}
.amount-input input:hover{border-color:#bdd7f0}
.amount-input input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(14,90,160,.12)}
.fee-coverage{margin-top:18px;padding:16px 18px;border:1px solid var(--line);border-radius:8px;background:var(--sky-soft)}
.fee-coverage__option{display:flex;align-items:flex-start;gap:11px;color:var(--navy);font-weight:600;line-height:1.45;cursor:pointer}
.fee-coverage__option input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:var(--blue)}
.fee-coverage__option input:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.fee-coverage__note{margin:5px 0 0 31px}
.fee-coverage__summary{min-height:0;margin:7px 0 0 31px;color:var(--navy)}
.fee-coverage__summary:empty{display:none}

.form-hint{font-size:.87rem;color:var(--muted);margin-top:6px;line-height:1.5}

/* Donate page: the FEC contribution affirmation. Laid out as a grid so the
   wrapped text stays aligned under itself rather than running back under the
   checkbox, which is what makes a long legal statement hard to read. */
.attestation{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;
  font-size:.92rem;line-height:1.6;color:var(--ink);cursor:pointer}
.attestation input[type="checkbox"]{width:20px;height:20px;margin:2px 0 0;flex:none;
  accent-color:var(--blue);cursor:pointer}
.attestation input[type="checkbox"]:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
/* The error message belongs under the whole block, not inside the text column. */
.attestation + .field-error,.attestation .field-error{grid-column:1 / -1}

.form-input{display:block;width:100%;height:56px;padding:14px 16px;border:2px solid var(--line);border-radius:8px;
  font-size:.98rem;line-height:1.5;font-family:var(--font);color:var(--ink);background:#fff;transition:all .2s ease}
.form-input:hover{border-color:#bdd7f0}
.form-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(14,90,160,.12);background:#fff}
.form-input::placeholder{color:var(--muted);font-weight:500}
select.form-input{appearance:none;-webkit-appearance:none;padding-right:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e5aa0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:20px;cursor:pointer}

.form-actions{display:flex;gap:14px;justify-content:center;margin-top:28px}
.form-actions .btn{flex:1;max-width:240px;min-height:50px}

.legal-links{display:flex;justify-content:center;gap:28px;margin-top:26px}
.legal-links a{font-size:.88rem;color:var(--blue);text-decoration:underline;font-weight:600}
.legal-links a:hover{color:var(--blue-press)}

/* Responsive styles for donation form */
@media(max-width:680px){
  .amount-buttons{grid-template-columns:repeat(3,1fr)}
  .amount-btn--other{grid-column:3}
  .form-group--row{grid-template-columns:1fr;gap:20px}
  .radio-group{gap:16px;flex-wrap:wrap}
}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .hero__inner{grid-template-columns:1fr;gap:32px}
  .hero__inner > .signup-card{max-width:none;margin-top:6px}
  .hero__text,.hero p.lede{max-width:none}
  .band__head--split{grid-template-columns:1fr;gap:16px}
  .lead-2col,.contact-grid{grid-template-columns:1fr;gap:32px}
  .tiers{grid-template-columns:1fr;max-width:430px;margin-inline:auto}
  .benefits,.teasers{grid-template-columns:repeat(2,1fr)}
  .pillars{grid-template-columns:repeat(2,1fr)}
  .stake{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1 / -1}
}
@media(max-width:680px){
  .nav-menu{left:12px;right:12px;min-width:0}
  .stake,.benefits,.teasers,.committees{grid-template-columns:1fr}
  .pillars{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr}
  .foot-bottom{flex-direction:column;text-align:center}
  .foot-legal{justify-content:center}
}

/* Event page: back link and the RSVP jump button, side by side above the
   details card. Wraps to two rows on narrow phones rather than shrinking the
   tap targets. */
.event-topbar{display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:20px}
.event-back{font-weight:600;font-size:.95rem;color:var(--blue);text-decoration:none}
.event-back:hover{text-decoration:underline}
/* Offsets the anchor jump so the RSVP heading is not hidden under the fixed
   menu button when the page scrolls to it. */
#rsvpBox{scroll-margin-top:80px}

/* Admin chrome: logo left, links right. Shares the site's navy so the admin
   reads as part of CityPAC rather than a bolted-on tool. */
.admin-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;padding:14px clamp(16px,4vw,40px);background:var(--navy);
  border-bottom:4px solid var(--sky)}
.admin-bar__logo img{display:block;height:34px;width:auto}
.admin-bar__nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.admin-bar__nav a,.admin-bar__nav button{color:#fff;font-size:.95rem;font-weight:600;
  text-decoration:none;background:none;border:0;padding:0;cursor:pointer;font-family:inherit}
.admin-bar__nav a:hover,.admin-bar__nav button:hover{text-decoration:underline}
.admin-bar__who{color:#cdd9e8;font-size:.85rem;font-weight:400}

/* Admin text areas. The single-line-looking default made writing a paragraph
   of description feel like typing into a slot. */
.admin-textarea,#eventForm textarea,#boardForm textarea{min-height:150px;line-height:1.5;resize:vertical}
#eventForm textarea#fDescription,#boardForm textarea#bBio{min-height:220px}

/* The RSVP form's fields are direct children of .form-box__body rather than a
   .form-section__body, so they never inherited that container's vertical
   rhythm — the only spacing came from .form-group--row's own gap, which is why
   the gaps alternated tight/loose down the form. Same rhythm, stated here. */
#rsvpForm{display:grid;gap:22px}
/* Matching the stacked-row gap to that rhythm keeps a two-column pair that has
   collapsed onto one column spaced exactly like the fields around it. */
@media (max-width:700px){
  .form-group--row{gap:22px}
}

/* Admin event list.
   These cards reuse .event-card, which on the public site leads with a date
   badge column. The admin list has no badge, so the grid left an empty column
   and the text wrapped into it. Stated explicitly here rather than fighting
   the public rules. */
.admin-event-card{display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;padding:18px 20px;border:1px solid var(--line);
  border-radius:6px;background:#fff;margin-bottom:14px}
.admin-event-card__title{font-weight:700;font-size:1.05rem;line-height:1.3;margin-bottom:6px}
.admin-event-card__meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  color:var(--muted);font-size:.85rem}
/* The dot separators went away when status and visibility became pills — two
   coloured pills with interpuncts between them read as debris. Spacing alone
   now does the separating. */
.admin-pill{display:inline-block;padding:2px 9px;border-radius:999px;
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  background:#eef1f5;color:#4a5568;border:1px solid #dbe1e8}
.admin-pill--published{background:#e6f5ec;color:#1c6b3f;border-color:#bfe3cd}
.admin-pill--draft{background:#fdf1dc;color:#8a5d10;border-color:#f0dcb4}
.admin-pill--cancelled{background:#fdeaea;color:#9b2226;border-color:#f3c9c9}
.admin-pill--public{background:#e6f0fb;color:#12508f;border-color:#c3d9f2}
.admin-pill--private{background:#f0eafb;color:#59339d;border-color:#dbcdf2}
/* "members" is the middle rung between public and private, and reads as a
   softer version of the private purple. */
.admin-pill--members{background:#f6f2fd;color:#6b4bb0;border-color:#e4dbf6}
.admin-event-card__actions{display:flex;gap:10px;flex-shrink:0}
/* Stops a lone button stretching the full width of a phone screen. */
.admin-event-card__actions .btn{width:auto}
@media (max-width:560px){
  .admin-event-card{flex-direction:column;align-items:stretch}
  .admin-event-card__actions .btn{width:100%;text-align:center}
}
.admin-note{background:#fff8e5;border:1px solid #e8d9a8;border-radius:6px;
  padding:12px 16px;font-size:.9rem;color:#6b5a22;margin:0 0 24px}

/* No uploads bucket bound: the file picker would 503 on every attempt, so it
   is hidden rather than left there as a control that cannot work. The hint
   under the photo field explains what to do instead. */
body.uploads-off .photo-file{display:none}

/* Admin menu: the same hamburger as the public site, with a heading so it is
   obvious at a glance that this menu belongs to the admin rather than to
   citypac.org's public navigation. */
.logo-box--admin{background:var(--navy);border-radius:0 0 6px 0;padding:10px 16px}
.nav-menu__title{font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  font-size:.75rem;color:var(--sky);padding:4px 0 10px;border-bottom:1px solid rgba(255,255,255,.15);
  margin-bottom:8px}
.nav-menu__who{font-size:.8rem;color:#cdd9e8;padding:8px 0 4px;
  border-top:1px solid rgba(255,255,255,.15);margin-top:8px}
.nav-menu button{background:none;border:0;padding:0;font:inherit;color:inherit;
  cursor:pointer;text-align:left}
.nav-menu button:hover{text-decoration:underline}

/* Event hero without a tagline: the title sits down against the blue rule
   rather than floating in the middle of the navy band. */
.page-hero__inner--tight{padding-bottom:clamp(14px,1.6vw,20px)}

/* The event page's single action row. */
.event-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:24px}
/* An empty status line must not add height — that gap under the RSVP button
   was this paragraph reserving space for a message that had not happened. */
.event-share-status:empty{display:none;margin:0}
.event-share-status{margin:12px 0 0}

/* The admin logo sits above the hero rather than inside it, so the
   `.page-hero:has(.logo-box)` padding rule never applied and the heading
   collided with the logo. Reserve the same space explicitly. */
/* Specificity matters here: .page-hero.page-hero--contact .page-hero__inner is
   0-3-0 and sets its own padding-top, so a 0-2-0 rule silently lost and the
   heading kept colliding with the logo. Matched at the same weight instead. */
.page-hero.page-hero--admin .page-hero__inner{
  padding-top:calc(var(--fab-top) + var(--logo-img) + clamp(22px,2.2vw,32px))}

/* Sign out is an action, not a link, but in a menu of links it should still be
   shaped like one — same padding, weight and caps as .nav-menu a — with a blue
   fill to mark it as the one item that does something. The red button it used
   to be read as a danger control for what is a routine sign-out. */
.nav-menu__signout{margin-top:10px;padding-top:12px;border-top:1px solid var(--line)}
.nav-menu__signout .btn{display:block;width:100%;padding:13px 16px;border-radius:8px;
  font-weight:600;font-size:.92rem;text-transform:uppercase;letter-spacing:.03em;
  text-align:center;text-decoration:none;background:var(--blue);color:#fff}
.nav-menu__signout .btn:hover{background:var(--blue-press);color:#fff;text-decoration:none}