:root{
  --ink:#eaf2ff;            /* light text */
  --bg:#0b1626;             /* deep navy base */
  --text:#eaf2ff;
  --muted:#a8c0d6;
  --brand-blue:#2a6cff;     /* vivid blue */
  --brand-cyan:#00c9d8;     /* cyan */
  --brand-purple:#6a39ff;   /* accent purple */
  --brand-yellow:#ffd100;   /* NAfME yellow for highlights */
  --surface:#0f2239;        /* dark card surface */
  --surface-2:#102a44;      /* slightly lighter */
  --border:rgba(255,255,255,.18); /* subtle light border */
  --radius:16px;
  --tap:44px;
  --shadow:0 10px 28px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--text);
  background-color:var(--bg);
  background-image: radial-gradient(1200px 700px at -10% -10%, rgba(42,108,255,.4), transparent 60%),
                    radial-gradient(1200px 700px at 110% 10%, rgba(0,201,216,.35), transparent 60%),
                    radial-gradient(1200px 700px at 50% 120%, rgba(106,57,255,.3), transparent 60%);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:clamp(16px,3.5vw,24px)}
.kicker{color:var(--muted)}
.badge{
  display:inline-block;padding:.25rem .6rem;border:1.5px solid var(--border);border-radius:999px;background:rgba(255,255,255,.06);font-size:.825rem;color:var(--text)
}
.button{
  display:inline-flex;align-items:center;justify-content:center;height:var(--tap);
  padding:0 18px;border:1.6px solid var(--border);border-radius:999px;background:rgba(255,255,255,.06);
  color:var(--text);font-weight:700;box-shadow:var(--shadow);
  transition:transform .06s ease, background .2s ease, border-color .2s ease;
}
.button:hover{transform:translateY(-1px);background:rgba(255,255,255,.10)}
.button.primary{background:linear-gradient(135deg,var(--brand-blue),var(--brand-cyan)); color:#001022; border-color:rgba(255,255,255,.25)}
.button.primary:hover{filter:saturate(1.1)}

/* Nav */
.site-nav{position:sticky;top:0;z-index:1000;background:transparent}
.site-nav-inner{
  display:flex;gap:16px;align-items:center;justify-content:space-between;
  background:rgba(7,24,45,.82);
  border:1.6px solid var(--border);
  border-radius:999px;
  box-shadow:var(--shadow);
  margin-top:10px;
  padding:10px 14px;
}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:40px;height:40px;border-radius:999px;border:1.6px solid var(--border);background:#fff}
.brand .title{font-weight:800;font-size:1.05rem;letter-spacing:.2px}
.nav-links{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.nav-links a{
  padding:10px 14px;border:1.6px solid var(--border);border-radius:999px;background:rgba(255,255,255,.06);font-weight:700;color:var(--text)
}
.nav-links a.active{background:linear-gradient(135deg,var(--brand-blue),var(--brand-cyan));color:#001022;border-color:rgba(255,255,255,.25)}
.nav-toggle{display:none}
/* MOBILE */
@media (max-width: 820px){
  .nav-toggle{display:inline-flex}

  /* anchor the dropdown to the pill */
  .site-nav{ position: sticky; top: 0; z-index: 1000; }
  .site-nav-inner{ position: relative; flex-wrap: nowrap; } /* was wrap */

  /* pop-down panel */
  .nav-links{
    position: absolute;
    left: 12px; right: 12px;            /* stretch edge-to-edge of pill */
    top: calc(100% + 8px);
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 10px;
    background: rgba(7,24,45,.92);
    border: 1.6px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow);
  }
  .nav-links.show{ display: flex; }

  /* make each link fill the width */
  .nav-links a{ display: block; width: 100%; }
}


/* Hero */
.hero{
  position:relative;overflow:hidden;border-bottom:1.6px solid var(--border);
  color:#fff;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg, rgba(42,108,255,.22), rgba(0,201,216,.22) 40%, rgba(106,57,255,.20));
  pointer-events:none
}
.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;padding:clamp(32px,6vw,80px)}
@media (max-width: 900px){ .hero-inner{grid-template-columns:1fr} }
.hero h1{font-size:clamp(32px,4.2vw,52px);line-height:1.02;margin:0 0 12px;font-weight:900;text-shadow:0 2px 25px rgba(0,0,0,.45)}
.hero p{font-size:clamp(16px,1.35vw,20px);max-width:58ch;opacity:.95}

/* Cards */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.card{grid-column:span 4;border:1.6px solid var(--border);border-radius:var(--radius);background:linear-gradient(180deg,var(--surface),var(--surface-2));
  box-shadow:var(--shadow);padding:18px;display:flex;flex-direction:column;gap:10px}
.card h3{margin:.2rem 0 .4rem}
.card p{margin:0;color:var(--ink)}
@media (max-width: 1000px){ .card{grid-column:span 6} }
@media (max-width: 640px){ .card{grid-column:span 12} }

/* Sections */
.section{padding:clamp(28px,5vw,56px) 0}
.section h2{font-size:clamp(22px,2.8vw,34px);margin:0 0 8px}
.subtle{color:var(--muted)}

/* Events UI */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 16px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips button{padding:8px 12px;border-radius:999px;border:1.6px solid var(--border);background:rgba(255,255,255,.06);font-weight:700;color:var(--text)}
.chips button[aria-pressed="true"]{background:linear-gradient(135deg,var(--brand-blue),var(--brand-cyan));color:#001022}

/* Footer */
.site-footer{border-top:1.6px solid var(--border);background:rgba(7,24,45,.82)}
.site-footer .grid{align-items:flex-start}
.footer-col{grid-column:span 4}
.footer-col h4{margin:.5rem 0;font-size:1rem;color:var(--ink)}
.footer-col ul{list-style:none;padding:0;margin:.25rem 0 0}
.footer-col li{margin:.25rem 0}
.footer-brand{display:flex;align-items:center;gap:12px}
.footer-brand img{width:44px;height:44px;border-radius:999px;border:1.6px solid var(--border);background:#fff}
.credit{color:var(--muted);font-size:.9rem;margin-top:8px}



/* ===== Modal (Resources popups) ===== */
.modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 32px);
  z-index: 1000;
}
.modal.open{ display:flex; }

.modal-overlay{
  position: absolute;
  inset: 0;
  background: rgba(3, 10, 22, 0.68);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

@keyframes nafmeModalIn {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-content{
  position: relative;
  max-width: 860px;
  width: min(100%, 860px);
  max-height: min(88vh, 1000px);
  overflow:auto;
  border-radius: var(--radius);
  border:1.3px solid var(--border);
  box-shadow: var(--shadow);
  background:
    radial-gradient(90% 120% at 10% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  color: var(--text);
  padding: clamp(18px,2.8vw,28px);
  animation: nafmeModalIn .18s ease-out;
}

.modal-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.modal-kicker{ color: var(--muted); font-size:.9rem; }
.modal-title{ margin:.2rem 0 0 0; line-height:1.2; }

.close-btn{
  border:1.4px solid var(--border);
  background: rgba(255,255,255,.06);
  color: var(--text);
  width: 40px; height: 40px;
  border-radius: 999px;
  display:grid; place-items:center;
  font-size: 18px;
  cursor:pointer;
  transition: transform .06s ease, background .2s ease, border-color .2s ease;
}
.close-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); }
.close-btn:focus-visible{ outline: 2px solid var(--brand-cyan); outline-offset: 2px; }

/* Typography & spacing inside modal */
.modal-content h4{ margin-top: 1.1rem; color: var(--text); }
.modal-content p{ color: var(--text); }
.modal-content a{
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--text);
}

/* Make lists and link groups breathe */
.modal-content ul{ margin: .6rem 0 1rem 1.1rem; }
.modal-content li{ margin: .25rem 0; }

/* Compact cards tap target on small screens */
@media (max-width: 600px){
  .modal-content{ padding: 16px; }
  .close-btn{ width:38px; height:38px; }
}

.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.contact { display: flex; gap: 12px; align-items: flex-start; }
.contact-photo { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.meta { line-height: 1.4; }
.form-embed { width: 100%; height: 900px; border: 0; border-radius: 12px; background: #fff; }
@media (max-width: 768px) { .form-embed { height: 1200px; } }


  .btn {
    display:inline-flex; align-items:center; justify-content:center;
    padding:10px 14px; border-radius:10px; border:0; cursor:pointer;
    background: var(--brand-gold, #f5c518); color:#111; font-weight:700;
  }
  .btn:hover { filter: brightness(0.95); }

  .form-embed { width:100%; height:900px; border:0; border-radius:12px; background:#fff; }
  @media (max-width: 768px) { .form-embed { height: 1200px; } }

/* Buttons + form iframe */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:10px;border:0;cursor:pointer;background:var(--brand-gold,#f5c518);color:#111;font-weight:700}
.btn:hover{filter:brightness(.95)}
.form-embed{width:100%;height:900px;border:0;border-radius:12px;background:#fff}
@media (max-width:768px){.form-embed{height:1200px}}

/* Use nav button colors if available */
.btn{
  --_bg: var(--nav-btn-background, var(--accent, var(--brand-gold, #f5c518)));
  --_fg: var(--nav-btn-fg, var(--on-accent, #111));
  --_bd: var(--nav-btn-border, transparent);

  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:10px;
  border:1px solid var(--_bd);
  background: var(--_bg);      /* supports solid or gradient */
  color: var(--_fg);
  font-weight:700; cursor:pointer; text-decoration:none;
}
.btn:hover{ filter: brightness(0.95); }

/* Portrait-friendly headshots (cards + modals) */
:root{
  --headshot-ratio: 4 / 5;   /* try 3/4 or 1/1 if you prefer */
  --headshot-focus: 25%;     /* push crop up a bit for faces */
}

/* Cards */
.grid.people-grid .card.people-card img{
  width: 100%;
  height: auto;
  aspect-ratio: var(--headshot-ratio);
  object-fit: cover;
  object-position: 50% var(--headshot-focus); /* center, slightly high */
  border-radius: 12px;
}

/* Modals */
.modal .headshot{
  aspect-ratio: var(--headshot-ratio);
  overflow: hidden;
  border-radius: 12px;
}
.modal .headshot img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% var(--headshot-focus);
}
/* ========== E-Board modal: small, left-anchored, portrait photo ========== */

/* On wider screens, park the popup near the left edge instead of centered */
@media (min-width: 700px){
  .nafme-modal-backdrop{
    justify-content: flex-start;         /* left instead of center */
    padding-left: max(24px, 4vw);        /* space from the edge */
    padding-right: 16px;
  }
  .nafme-modal{
    width: min(560px, 92vw);             /* make the dialog "way smaller" */
    gap: 0.85rem;
    padding: 0.85rem 0.95rem 1rem;
  }
}

/* Smaller portrait headshot on the LEFT; text flows on the RIGHT */
.nafme-modal figure{
  flex: 0 0 120px;                       /* photo column width */
  width: 120px;
  aspect-ratio: 3 / 4;                   /* portrait crop */
  height: auto;                          /* let aspect-ratio set height */
  border-radius: 12px;
  overflow: hidden;
  background: #0002;
}
.nafme-modal figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;              /* bias crop slightly upward for faces */
}

/* Tighter text column */
.nafme-modal .body{
  min-width: 0;                          /* prevent overflow */
}
.nafme-modal h3{
  margin: .15rem 0 .35rem;
  font-size: 1.25rem;
}
.nafme-modal .role{
  margin: 0 0 .35rem;
  font-weight: 600;
  opacity: .95;
}
.nafme-modal p{ margin: .35rem 0; line-height: 1.35; }

/* Keep it mobile-friendly: center + full width on small screens */
@media (max-width: 699.98px){
  .nafme-modal-backdrop{ justify-content: center; }
  .nafme-modal{
    width: min(95vw, 640px);
  }
  .nafme-modal figure{
    flex-basis: 100px; width: 100px;
  }
}

/* === E-Board modal: compact, left-anchored, portrait photo (overrides) === */
.nafme-modal-backdrop[aria-hidden="false"]{
  justify-content: flex-start !important;   /* left instead of centered */
  align-items: flex-start !important;
  padding-top: 6vh !important;
  padding-left: clamp(16px, 4vw, 48px) !important; /* space from edge */
  padding-right: 16px !important;
}

.nafme-modal{
  width: 560px !important;                  /* make it smaller */
  max-width: 92vw !important;
  gap: .9rem !important;
  padding: .9rem 1rem 1rem !important;
}

/* smaller portrait image column on the LEFT */
.nafme-modal figure{
  flex: 0 0 120px !important;
  width: 120px !important;
  height: auto !important;                   /* allow aspect-ratio to work */
  aspect-ratio: 3 / 4 !important;            /* portrait crop */
  border-radius: 12px !important;
  overflow: hidden !important;
}
.nafme-modal img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 25% !important;       /* bias toward faces */
}

/* tighter text */
.nafme-modal h3{ font-size: 1.25rem !important; margin: .15rem 0 .35rem !important; }
.nafme-modal .role{ margin: 0 0 .35rem !important; font-weight: 600 !important; }
.nafme-modal p{ margin: .35rem 0 !important; line-height: 1.4 !important; }

/* mobile: center it and let it grow */
@media (max-width: 700px){
  .nafme-modal-backdrop[aria-hidden="false"]{ justify-content: center !important; }
  .nafme-modal{ width: min(95vw, 640px) !important; }
  .nafme-modal figure{ flex-basis: 100px !important; width: 100px !important; }
}

/* Hide ONLY the page (document) scrollbars */
html, body {
  -ms-overflow-style: none;   /* IE/old Edge */
  scrollbar-width: none;      /* Firefox */
  scrollbar-gutter: stable;   /* avoid layout shift */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0; height: 0;        /* Chrome/Edge/Safari */
}

/* Re-enable (and style) scrollbars inside popups/overlays */
.modal-content,
.nafme-modal,              /* your e-board modal container */
.nav-links {               /* mobile menu panel if it scrolls */
  -ms-overflow-style: auto;
  scrollbar-width: thin;
}
.modal-content::-webkit-scrollbar,
.nafme-modal::-webkit-scrollbar,
.nav-links::-webkit-scrollbar {
  width: 8px; height: 8px;
}
.modal-content::-webkit-scrollbar-thumb,
.nafme-modal::-webkit-scrollbar-thumb,
.nav-links::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.35);
  border-radius: 999px;
}

/* --- Compact vertical spacing overrides --- */

/* Sections & container */
.section { padding: clamp(16px, 3.2vw, 28px) 0; }
.container { padding: clamp(12px, 2.5vw, 18px); }

/* Hero */
.hero-inner { padding: clamp(20px, 4vw, 40px); gap: 16px; }
.hero h1 { margin: 0 0 8px; line-height: 1.06; }

/* Headings & text */
h1 { margin: 0 0 .5rem; }
h2 { margin: 0 0 .45rem; }
h3 { margin: 0 0 .35rem; }
p, ul, ol { margin: 0 0 .55rem; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

/* Cards & grids */
.grid { gap: 14px; }
.card { padding: 14px; gap: 8px; }
.card h3 { margin: .15rem 0 .3rem; }
.card p { margin: 0 0 .45rem; }

/* Nav density */
.site-nav-inner { padding: 8px 12px; margin-top: 6px; }

/* Footer lists */
footer-col h4 { margin: .35rem 0; }
footer-col ul { margin: .2rem 0 0; }
footer-col li { margin: .2rem 0; }

/* Desktop-only tightening (optional) */
@media (min-width: 900px){
  .section { padding: clamp(14px, 2.8vw, 24px) 0; }
  .grid { gap: 12px; }
  .card { padding: 12px; gap: 8px; }
}