:root{
  --ink:#171744;
  --navy:#232063;
  --blue:#087fc4;
  --red:#d92d35;
  --green:#15864c;
  --gold:#e9b84a;
  --paper:#fbfaf7;
  --warm:#f4efe7;
  --white:#fff;
  --muted:#626273;
  --line:#ddd9d1;
  --shadow:0 18px 55px rgba(20,20,55,.12);
  --radius:22px;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height:1.65;
}
img{max-width:100%;display:block}
a{color:var(--blue)}
a:hover{color:var(--navy)}
h1,h2,h3{font-family:Georgia, "Times New Roman", serif;line-height:1.1;margin:0 0 .6em}
h1{font-size:clamp(2.65rem,7vw,5.7rem);letter-spacing:-.045em}
h2{font-size:clamp(2rem,4vw,3.35rem);letter-spacing:-.03em}
h3{font-size:1.35rem}
p{margin:.25rem 0 1.15rem}
.container{width:min(calc(100% - 2rem),var(--max));margin-inline:auto}
.skip-link{position:absolute;left:-999px;top:0;background:#fff;padding:.7rem 1rem;z-index:100}
.skip-link:focus{left:1rem;top:1rem}
.site-header{
  position:sticky;top:0;z-index:50;background:rgba(251,250,247,.93);
  backdrop-filter:blur(12px);border-bottom:1px solid rgba(23,23,68,.1)
}
.nav-wrap{display:flex;align-items:center;min-height:86px;gap:1.5rem}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{width:220px;max-height:72px;object-fit:contain}
.nav-toggle{display:none;margin-left:auto;border:1px solid var(--line);background:#fff;border-radius:12px;padding:.7rem .85rem;font:inherit}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:.2rem}
.site-nav a{color:var(--ink);text-decoration:none;font-weight:700;font-size:.9rem;padding:.65rem .72rem;border-radius:10px}
.site-nav a:hover,.site-nav a[aria-current="page"]{background:var(--warm)}
.site-nav .donate{background:var(--red);color:#fff;padding:.7rem 1rem}
.site-nav .donate:hover{background:#b5222a;color:#fff}
.hero{padding:5.5rem 0 4.5rem;position:relative;overflow:hidden}
.hero:before{
  content:"";position:absolute;width:470px;height:470px;border-radius:50%;
  right:-150px;top:-210px;background:radial-gradient(circle,var(--gold),transparent 68%);opacity:.22
}
.eyebrow{display:inline-flex;gap:.5rem;align-items:center;font-weight:800;text-transform:uppercase;letter-spacing:.13em;font-size:.77rem;color:var(--red)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:4rem;align-items:center}
.lede{font-size:clamp(1.1rem,2vw,1.35rem);max-width:760px;color:#35354f}
.button-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;text-decoration:none;font-weight:800;border-radius:999px;padding:.9rem 1.25rem;border:1px solid var(--ink)}
.btn.primary{background:var(--ink);color:#fff}
.btn.primary:hover{background:var(--blue);border-color:var(--blue)}
.btn.secondary{background:transparent;color:var(--ink)}
.logo-card{background:#fff;padding:2rem;border-radius:32px;box-shadow:var(--shadow);transform:rotate(1.5deg)}
.color-rule{height:6px;background:linear-gradient(90deg,var(--blue) 0 25%,var(--green) 25% 50%,var(--gold) 50% 75%,var(--red) 75%)}
.section{padding:5rem 0}
.section.alt{background:var(--warm)}
.section.dark{background:var(--ink);color:#fff}
.section.dark a{color:#b9e6ff}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:2rem;margin-bottom:2rem}
.section-heading p{max-width:680px;color:var(--muted)}
.section.dark .section-heading p{color:#d5d5e4}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem}
.card strong.kicker{display:block;color:var(--red);font-size:.8rem;text-transform:uppercase;letter-spacing:.09em;margin-bottom:.5rem}
.recordings{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.video-card{background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.video-card iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.video-card .content{padding:1.25rem}
.quote{font-family:Georgia,serif;font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.3;border-left:5px solid var(--red);padding-left:1.3rem}
.bi-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.bilingual{padding:2rem;border-radius:var(--radius);background:#fff;border:1px solid var(--line)}
.bilingual h3{color:var(--blue)}
.page-hero{padding:4.5rem 0 3rem;background:linear-gradient(180deg,#f2eee8,transparent)}
.page-hero h1{font-size:clamp(2.6rem,6vw,4.7rem)}
.roster{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.roster-group{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.3rem;break-inside:avoid}
.roster-group h3{font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:.88rem;color:var(--red)}
.roster-group ul{list-style:none;padding:0;margin:0}
.roster-group li{padding:.25rem 0;border-bottom:1px dotted #ddd}
.roster-group li:last-child{border-bottom:0}
.profile{display:grid;grid-template-columns:360px 1fr;gap:3rem;align-items:start}
.profile img{width:100%;border-radius:28px;box-shadow:var(--shadow)}
.profile-copy p{max-width:760px}
.board-grid{display:grid;grid-template-columns:1fr 2fr;gap:2rem}
.person-list{list-style:none;padding:0;margin:0;display:grid;gap:.65rem}
.person-list li{background:#fff;border:1px solid var(--line);padding:1rem 1.2rem;border-radius:14px}
.notice{background:#fff;border:1px solid var(--line);border-left:5px solid var(--red);padding:1.4rem;border-radius:14px}
.map-wrap{background:#fff;padding:1rem;border:1px solid var(--line);border-radius:var(--radius)}
.map-wrap img{width:100%;border-radius:14px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.contact-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:2rem}
.site-footer{background:#101035;color:#e9e9f4;padding:3rem 0 2rem}
.footer-grid{display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:2rem}
.site-footer a{color:#fff}
.footer-logo{background:#fff;border-radius:18px;padding:1rem;width:min(100%,340px)}
.small{font-size:.88rem;color:#c8c8d8}
.footer-bottom{margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.15)}
.pills{display:flex;flex-wrap:wrap;gap:.6rem}
.pill{display:inline-flex;background:#fff;border:1px solid var(--line);padding:.45rem .7rem;border-radius:999px;text-decoration:none;color:var(--ink);font-weight:700}
.prose{max-width:850px}
.prose ul{padding-left:1.15rem}
.feature-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
.feature{border-top:3px solid var(--blue);padding-top:1rem}
.feature:nth-child(2){border-color:var(--green)}
.feature:nth-child(3){border-color:var(--red)}
@media (max-width:980px){
  .nav-toggle{display:block}
  .site-nav{display:none;position:absolute;left:1rem;right:1rem;top:82px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:.7rem;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}
  .site-nav.open{display:flex}
  .site-nav a{padding:.9rem 1rem}
  .hero-grid,.bi-grid,.profile,.board-grid,.contact-grid{grid-template-columns:1fr}
  .logo-card{max-width:640px}
  .cards,.roster{grid-template-columns:repeat(2,1fr)}
  .profile img{max-width:420px}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:650px){
  .container{width:min(calc(100% - 1.2rem),var(--max))}
  .brand img{width:180px}
  .nav-wrap{min-height:75px}
  .site-nav{top:72px}
  .hero{padding-top:3.4rem}
  .cards,.roster,.recordings,.feature-strip,.footer-grid{grid-template-columns:1fr}
  .section{padding:3.8rem 0}
  .button-row .btn{width:100%}
}

/* Past concerts archive */
.concert-archive{display:grid;gap:1rem}
.archive-item{
  display:grid;grid-template-columns:180px 1fr;gap:2rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5rem;align-items:start
}
.archive-date{
  font-weight:900;text-transform:uppercase;letter-spacing:.08em;
  color:var(--red);font-size:.86rem
}
.archive-item h3{margin-top:0}
.archive-meta{color:var(--muted);font-weight:700}
@media(max-width:650px){
  .archive-item{grid-template-columns:1fr;gap:.5rem}
}