:root{
  --ink:#12172B;
  --ink-soft:#2B3350;
  --paper:#EDEBE3;
  --paper-raised:#F5F3EC;
  --amber:#E8A33D;
  --emerald:#2F6F5E;
  --line:#C9C6BA;
  --line-dark:#3A4262;
  --serif: "Source Serif 4", Georgia, serif;
  --sans: "Libre Franklin", -apple-system, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }

:focus-visible{
  outline:2px solid var(--emerald);
  outline-offset:3px;
}

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 32px;
}

/* ---------- Header ---------- */

header{
  background:var(--ink);
  color:var(--paper);
  position: sticky;
  z-index: 100;
  top: 0;
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 32px;
  max-width:1180px;
  margin:0 auto;
}

.logo{
  font-family:var(--serif);
  font-size:22px;
  font-weight:600;
  letter-spacing:0.01em;
}

.logo span{ color:var(--amber); }

.nav-links{
  display:flex;
  gap:36px;
  font-size:15px;
  font-weight:500;
}

.nav-links a{
  opacity:0.82;
  transition:opacity 0.15s ease;
}

.nav-links a.active{ opacity:1; }

.nav-links a:hover{ opacity:1; }

.nav-right{
  display:flex;
  align-items:center;
  gap:22px;
}

.nav-signin{
  font-size:15px;
  font-weight:500;
  opacity:0.82;
}

.nav-signin:hover{ opacity:1; }

.nav-contact{
  font-size:15px;
  font-weight:500;
  opacity:0.82;
  transition:opacity 0.15s ease;
}

.nav-contact:hover{ opacity:1; }

.nav-cta{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14.5px;
  font-weight:600;
  background:var(--amber);
  color:var(--ink);
  padding:10px 18px;
  transition:background 0.15s ease;
}

.nav-cta:hover{ background:#f0b458; }

.nav-cta::after{ content:"→"; }

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:32px;
  height:32px;
  padding:0;
  background:none;
  border:none;
  cursor:pointer;
}

.nav-toggle span{
  display:block;
  width:100%;
  height:2px;
  background:var(--paper);
  transition:transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2){
  opacity:0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

.mobile-menu{
  display:none;
  flex-direction:column;
  background:var(--ink);
  border-top:1px solid var(--line-dark);
  padding:4px 32px 12px;
}

.mobile-menu.open{ display:flex; }

.mobile-menu a{
  color:var(--paper);
  font-size:16px;
  font-weight:500;
  padding:14px 0;
  border-bottom:1px solid var(--line-dark);
}

.mobile-menu a:last-child{ border-bottom:none; }

.mobile-menu a.active{ color:var(--amber); }

/* ---------- CTA banner ---------- */

.cta-banner{
  background:var(--ink);
  color:var(--paper);
  padding:80px 0;
}

.cta-banner-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
}

.cta-banner h2{
  font-family:var(--serif);
  font-size:36px;
  font-weight:600;
  max-width:520px;
  line-height:1.18;
}

.cta-banner .btn-primary{
  background:var(--amber);
  color:var(--ink);
  flex-shrink:0;
}

.cta-banner .btn-primary:hover{ background:#f0b458; }

.btn-primary{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--amber);
  color:var(--ink);
  font-weight:600;
  font-size:15px;
  padding:15px 26px;
  transition:background 0.15s ease;
}

.btn-primary::after{ content:"→"; }

/* ---------- Footer ---------- */

footer{
  background:var(--ink);
  color:var(--paper);
  padding:64px 0 40px;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:32px;
}

.footer-grid h3{
  font-family:var(--serif);
  font-size:19px;
  margin-bottom:8px;
}

.footer-grid p{
  font-size:14px;
  opacity:0.7;
  max-width:280px;
}

.footer-col h4{
  font-size:13px;
  font-weight:600;
  margin-bottom:14px;
  opacity:0.85;
}

.footer-col a, p{
  display:block;
  font-size:14px;
  opacity:0.72;
  margin-bottom:10px;
}

.footer-col a:hover{ opacity:1; }

.footer-bottom{
  margin-top:56px;
  padding-top:24px;
  border-top:1px solid var(--line-dark);
  font-size:13px;
  opacity:0.6;
  display:flex;
  justify-content:space-between;
}

/* ---------- Newsletter modal ---------- */

.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(18,23,43,0.6);
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:1000;
}

.modal-overlay.open{ display:flex; }

.modal{
  background:var(--paper-raised);
  border:1px solid var(--line);
  max-width:440px;
  width:100%;
  padding:40px;
  position:relative;
  box-shadow:0 24px 60px rgba(18,23,43,0.3);
}

.modal-close{
  position:absolute;
  top:16px;
  right:16px;
  background:none;
  border:none;
  font-size:24px;
  line-height:1;
  cursor:pointer;
  color:var(--ink-soft);
  width:32px;
  height:32px;
}

.modal-close:hover{ color:var(--ink); }

.modal h2{
  font-family:var(--serif);
  font-size:26px;
  font-weight:600;
}

.modal-sub{
  margin-top:10px;
  font-size:14.5px;
  color:var(--ink-soft);
}

.modal-label{
  display:block;
  margin-top:24px;
  margin-bottom:8px;
  font-size:13px;
  font-weight:600;
  color:var(--ink-soft);
}

#newsletter-email{
  width:100%;
  padding:13px 14px;
  font-size:15px;
  font-family:var(--sans);
  background:var(--paper);
  border:1px solid var(--line);
  color:var(--ink);
}

#newsletter-email:focus-visible{
  outline:2px solid var(--emerald);
  outline-offset:2px;
}

.modal-error{
  display:none;
  color:#B3432B;
  font-size:13px;
  margin-top:8px;
}

.modal-error.visible{ display:block; }

.modal-submit{
  margin-top:20px;
  width:100%;
  justify-content:center;
}

.modal-success{
  display:none;
  margin-top:20px;
  font-size:15px;
  font-weight:500;
  color:var(--emerald);
}

.modal-success.visible{ display:block; }

.modal.submitted #newsletter-form{ display:none; }

/* ---------- Committee grid (add to the bottom of index.css) ---------- */
 
.team{
  padding:80px 0 96px;
}
 
.team-head{
  max-width:560px;
  margin:0 auto 56px;
  text-align:center;
}
 
.team-head h2{
  font-family:var(--serif);
  font-size:34px;
  font-weight:600;
  line-height:1.18;
}
 
/* .team-intro sets its own size/opacity/margin because the global
   "p" rule in the footer section would otherwise apply to it */
.team-head .team-intro{
  margin:14px 0 0;
  font-size:16px;
  opacity:1;
  color:var(--ink-soft);
}
 
/* Up to --cols members per row; any incomplete row is centred.
   Works for any number of members, so nothing needs editing when you add or remove people. */
.team-grid{
  --cols:4;
  --gap-x:32px;
  --gap-y:56px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--gap-y) var(--gap-x);
}
 
.member{
  display:flex;
  flex-direction:column;
  flex:0 0 auto;
  /* each card is an equal share of the row; the 0.5px stops rounding from wrapping a full row early */
  width:calc((100% - (var(--cols) - 1) * var(--gap-x)) / var(--cols) - 0.5px);
}
 
.member-photo{
  aspect-ratio:4 / 5;
  background:var(--line);
  overflow:hidden;
}
 
.member-photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
}
 
.member-name{
  margin-top:20px;
  font-family:var(--serif);
  font-size:22px;
  font-weight:600;
  line-height:1.25;
}
 
.member .member-role{
  margin:4px 0 0;
  font-size:15px;
  font-weight:600;
  opacity:1;
  color:var(--emerald);
}
 
.member .member-bio{
  margin:12px 0 0;
  max-width:340px;
  font-size:15px;
  line-height:1.55;
  opacity:1;
  color:var(--ink-soft);
}
 
.member-links{
  display:flex;
  gap:22px;
  margin-top:auto;
  padding-top:18px;
}
 
.member-links a{
  font-size:14.5px;
  font-weight:600;
  border-bottom:1.5px solid var(--ink);
  padding-bottom:2px;
  transition:color 0.15s ease, border-color 0.15s ease;
}
 
.member-links a:hover{
  color:var(--emerald);
  border-color:var(--emerald);
}



/* ---------- Responsive ---------- */

@media (max-width:1000px){
  .team-grid{ --cols:3; }
}


@media (max-width:860px){
  .nav-links{ display:none; }
  .nav-signin{ display:none; }
  .nav-contact{ display: none; }
  .nav-toggle{ display:flex; }
  .mobile-menu{ padding-left:20px; padding-right:20px; }
  .nav-cta {display: none;}
  .about-hero h1{ font-size:38px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .cta-banner-inner{ flex-direction:column; align-items:center; gap:24px; }


  .team{ padding:64px 0 80px; }
  .team-head{ margin-bottom:44px; }
  .team-head h2{ font-size:30px; }
  .team-grid{ --cols:2; --gap-x:28px; --gap-y:48px; }


}

@media (max-width:520px){
  .wrap{ padding:0 20px; }
  .footer-grid{ grid-template-columns:1fr; text-align: center; }
  .footer-grid > div > p{ margin:0 auto; }
  .footer-bottom{ flex-direction:column; align-items: center; gap:8px; }
  .cta-banner h2{ font-size:28px; }

  .team{ padding:56px 0 72px; }
  .team-head h2{ font-size:28px; }
  .team-grid{ --cols:1; --gap-y:48px; }
  .member-photo{ aspect-ratio:1 / 1; }


}