:root{
  --navy:#071f3d; --blue:#13599a; --ink:#14202d; --muted:#5e6b78;
  --soft:#f4f7fa; --line:#dbe3eb; --white:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);line-height:1.6;background:#fff}
img{max-width:100%;display:block}.wrap{width:min(1120px,92%);margin:auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
.nav-row{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--navy)}
.brand img{width:52px;height:52px;object-fit:contain;border-radius:50%}
.brand strong,.brand small{display:block;line-height:1.05}.brand strong{font-size:1.05rem}.brand small{margin-top:5px;color:var(--muted)}
nav{display:flex;gap:22px;align-items:center}nav a{text-decoration:none;color:var(--ink);font-weight:800;font-size:.92rem}
nav a:hover{color:var(--blue)}.pill{background:var(--blue);color:#fff!important;padding:10px 16px;border-radius:999px}
.menu{display:none;border:0;background:none;font-size:1.7rem}
.hero{background:linear-gradient(130deg,#f9fbfd 0%,#eef4fa 65%,#dfeaf5 100%);padding:92px 0}
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:60px;align-items:center}
.kicker{font-size:.78rem;font-weight:900;letter-spacing:.13em;color:var(--blue);margin:0 0 10px}
.kicker.light{color:#9ec8ec}
h1{font-size:clamp(3rem,6.2vw,5.8rem);line-height:.95;letter-spacing:-.045em;margin:.08em 0 .3em;color:var(--navy)}
h2{font-size:clamp(2rem,4vw,3rem);line-height:1.08;letter-spacing:-.025em;margin:.2em 0 .6em}
h3{line-height:1.18;margin:.5em 0}
.intro{font-size:1.18rem;color:var(--muted);max-width:720px}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-block;padding:13px 20px;border-radius:8px;font-weight:900;text-decoration:none;border:2px solid var(--blue)}
.primary{background:var(--blue);color:#fff}.outline{background:#fff;color:var(--blue)}
.hero-logo-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:34px;text-align:center;box-shadow:0 18px 44px rgba(7,31,61,.12)}
.hero-logo-card img{width:210px;margin:0 auto 18px}.hero-logo-card h2{font-size:1.7rem}.hero-logo-card p{color:var(--muted);font-weight:700}
.section{padding:82px 0}.soft{background:var(--soft)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:70px}.copy{font-size:1.07rem;color:var(--muted)}
.event-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:15px;margin-top:30px}
.event-grid article{background:#fff;border:1px solid var(--line);border-radius:14px;padding:23px;box-shadow:0 6px 20px rgba(0,0,0,.04)}
.event-grid span{font-size:.8rem;letter-spacing:.1em;color:var(--blue);font-weight:900}.event-grid p{color:var(--muted);font-size:.93rem}
.support-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:32px}
.qr-card{border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;gap:18px;align-items:flex-start}
.qr-card img{width:115px;height:130px;object-fit:cover;object-position:center}.qr-card p{color:var(--muted);font-size:.93rem}.small{font-weight:800}
.navy{background:var(--navy);color:#fff}.sponsor-inner>p:not(.kicker){max-width:850px;color:#d8e3ef;font-size:1.08rem}
.sponsor-box{margin-top:28px;border:2px dashed rgba(255,255,255,.3);border-radius:16px;min-height:150px;display:grid;place-items:center;color:#bad0e3}
.officers{width:100%;border:1px solid var(--line);border-radius:16px;margin:28px 0 22px}
.board-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.board-grid div{background:var(--soft);padding:18px;border-radius:12px;text-align:center}.board-grid strong,.board-grid span{display:block}.board-grid span{color:var(--muted)}
.contact-card{display:flex;align-items:center;justify-content:space-between;gap:45px;background:#fff;padding:38px;border:1px solid var(--line);border-radius:20px}
.contact-card>div:first-child{max-width:650px}
footer{background:#0c1622;color:#c6d1dc;padding:28px 0}.footer-row{display:flex;justify-content:space-between;gap:20px;font-size:.9rem}
@media(max-width:920px){
  .menu{display:block}nav{display:none;position:absolute;top:76px;left:0;right:0;background:#fff;flex-direction:column;align-items:flex-start;padding:22px 4%;border-bottom:1px solid var(--line)}nav.open{display:flex}
  .hero-grid,.two-col,.support-grid{grid-template-columns:1fr}.event-grid{grid-template-columns:1fr 1fr}.board-grid{grid-template-columns:1fr 1fr}.contact-card{flex-direction:column;align-items:flex-start}
}
@media(max-width:560px){
  .hero{padding:62px 0}.section{padding:58px 0}.event-grid,.board-grid{grid-template-columns:1fr}.qr-card{flex-direction:column}.footer-row{flex-direction:column}
}


/* Version 4 — Black theme */
body {
  background: #050505;
  color: #f5f7fa;
}

.site-header {
  background: rgba(0,0,0,.97);
  border-bottom-color: #22304a;
}

.brand { color: #fff; }
.brand small { color: #b8c1cc; }

nav a { color: #fff; }
nav a:hover { color: #4a8cff; }

.hero {
  background:
    radial-gradient(circle at 75% 15%, rgba(24,81,180,.20), transparent 32%),
    linear-gradient(135deg,#020202 0%,#080b12 58%,#050505 100%);
}

h1, h2, h3 { color: #fff; }

.intro, .copy, .hero-logo-card p, .event-grid p, .qr-card p,
.board-grid span, .contact-card p {
  color: #bdc6d0;
}

.hero-logo-card,
.event-grid article,
.qr-card,
.contact-card {
  background: #0d0f13;
  border-color: #253249;
  box-shadow: 0 14px 35px rgba(0,0,0,.38);
}

.soft {
  background: #090b0f;
}

.navy {
  background: #020815;
}

.board-grid div {
  background: #0d0f13;
  border: 1px solid #253249;
}

footer {
  background: #000;
  border-top: 1px solid #22304a;
}

.btn.outline,
.outline {
  background: transparent;
  color: #fff;
}

.important-dates {
  background: #07090d;
}

.dates-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px;
  align-items: start;
}

.dates-heading {
  margin: 0 0 16px;
  color: #fff;
}

.important-dates .event-grid {
  grid-template-columns: repeat(3, 1fr);
}

.meeting-card {
  background: #0d0f13;
  border: 1px solid #2b3a53;
  border-top: 4px solid #185fc2;
  border-radius: 16px;
  padding: 28px;
  position: sticky;
  top: 100px;
}

.meeting-card h3 {
  font-size: 1.7rem;
  margin-top: 0;
}

.meeting-note {
  color: #bdc6d0;
  margin-bottom: 24px;
}

.meeting-date {
  border-top: 1px solid #2a3546;
  padding: 18px 0;
}

.meeting-date:first-of-type {
  border-top: none;
}

.meeting-date span,
.meeting-date strong,
.meeting-date p {
  display: block;
}

.meeting-date span {
  color: #4a8cff;
  font-weight: 900;
  letter-spacing: .08em;
  font-size: .82rem;
}

.meeting-date strong {
  color: #fff;
  font-size: 1.05rem;
  margin-top: 5px;
}

.meeting-date p {
  color: #bdc6d0;
  margin: 3px 0 0;
}

@media(max-width:920px) {
  nav {
    background: #050505;
    border-bottom-color: #22304a;
  }

  .dates-layout {
    grid-template-columns: 1fr;
  }

  .important-dates .event-grid {
    grid-template-columns: 1fr 1fr;
  }

  .meeting-card {
    position: static;
  }
}

@media(max-width:560px) {
  .important-dates .event-grid {
    grid-template-columns: 1fr;
  }
}


/* Sponsor graphic */
.sponsor-showcase {
  margin-top: 34px;
  background: #000;
  border: 1px solid #263653;
  border-radius: 18px;
  padding: 18px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.sponsor-showcase img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}

.page-hero{
  padding:72px 0 54px;
  background:radial-gradient(circle at 75% 10%,rgba(24,81,180,.2),transparent 32%),#030407;
  border-bottom:1px solid #22304a;
}
.page-hero h1{font-size:clamp(2.8rem,6vw,5.2rem);max-width:900px}
.link-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:28px}
.link-grid a{background:#0d0f13;border:1px solid #253249;border-radius:16px;padding:28px;text-decoration:none}
.link-grid strong,.link-grid span{display:block}.link-grid strong{color:#fff;font-size:1.25rem}.link-grid span{color:#7eb0ff;margin-top:8px}
.email-link{color:#7eb0ff}
@media(max-width:700px){.link-grid{grid-template-columns:1fr}}

.fundraiser-link{color:#fff;text-decoration:none}
.fundraiser-link:hover{color:#7eb0ff}
.fundraiser-button{margin-top:10px;font-size:.88rem;padding:10px 14px}
.qr-card>a{display:block;flex:0 0 auto}

.officer-photo-card img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  object-position:center;
  border-radius:10px;
  margin-bottom:14px;
}
.officer-cards>div{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.choir-dates-card{
  background:#0d0f13;
  border:1px solid #2b3a53;
  border-top:4px solid #185fc2;
  border-radius:16px;
  padding:28px;
  margin-top:28px;
}
.choir-placeholder{
  border:1px dashed #3a4b68;
  border-radius:12px;
  padding:22px;
  text-align:center;
}
.choir-placeholder strong,
.choir-placeholder span{
  display:block;
}
.choir-placeholder strong{
  color:#fff;
  font-size:1.2rem;
}
.choir-placeholder span{
  color:#9eb0c2;
  margin-top:6px;
}

.band-site-link{color:#7eb0ff!important}
.band-site-link:hover{color:#fff!important}
.band-website-callout{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  background:#0d0f13;
  border:1px solid #253249;
  border-left:5px solid #185fc2;
  border-radius:16px;
  padding:28px;
  margin:28px 0 34px;
}
.band-website-callout h2{font-size:1.7rem;margin:.15em 0 .35em}
.band-website-callout p:not(.kicker){color:#bdc6d0;margin:0}
.band-website-callout .btn{white-space:nowrap}
@media(max-width:700px){
  .band-website-callout{flex-direction:column;align-items:flex-start}
}

.fundraiser-no-qr{align-items:center}
.fundraiser-icon{
  width:115px;
  min-width:115px;
  height:115px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-size:3.2rem;
  background:#05070a;
  border:1px solid #2b3a53;
}
@media(max-width:560px){
  .fundraiser-icon{width:100%;min-width:0}
}

.volunteer-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}
.volunteer-card{
  background:#0d0f13;
  border:1px solid #253249;
  border-radius:16px;
  padding:26px;
}
.volunteer-card h2{
  font-size:1.55rem;
  margin:.25em 0 .45em;
}
.volunteer-card p{
  color:#bdc6d0;
}
.vol-date{
  display:block;
  color:#4a8cff;
  font-weight:900;
  letter-spacing:.09em;
  font-size:.8rem;
}
.featured-volunteer{
  border-top:4px solid #185fc2;
}
.disabled-signup{
  opacity:.62;
  pointer-events:none;
  cursor:default;
}
.volunteer-contact{
  margin-top:34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  background:#0d0f13;
  border:1px solid #253249;
  border-left:5px solid #185fc2;
  border-radius:16px;
  padding:28px;
}
.volunteer-contact>div{max-width:700px}
.volunteer-contact p:not(.kicker){color:#bdc6d0}
@media(max-width:760px){
  .volunteer-grid{grid-template-columns:1fr}
  .volunteer-contact{flex-direction:column;align-items:flex-start}
}