:root{
  --bg: #ffffff; --text:#0f172a; --muted:#475569;
  --surface: rgba(255,255,255,.75); --ring:#e2e8f0; --shadow: 0 8px 24px rgba(2,6,23,.08);
  --radius: 18px;
  --grad: linear-gradient(135deg, #faf5ff, #ecfeff, #fff7ed);
  /* brand accent for buttons */
  --accent:#f59e0b; --accent-600:#d97706;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial,sans-serif;color:var(--text);background:var(--grad)}
  img{max-width:100%;display:block}
  
  
  /* Layout helpers */
  .container{max-width:1100px;margin:0 auto;padding:0 16px}
  .grid{display:grid;gap:24px}
  .grid.two{grid-template-columns:1fr}
  .grid.three{grid-template-columns:1fr}
  @media(min-width:900px){.grid.two{grid-template-columns:1fr 1fr}.grid.three{grid-template-columns:repeat(3,1fr)}}
  .flex{display:flex;gap:16px}
  .between{justify-content:space-between}
  .center-y{align-items:center}
  .muted{color:var(--muted)}
  .lead{color:var(--muted)}

/* Header & Nav */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--ring)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand-mark{width:36px;height:36px;object-fit:contain}
.primary-nav{position:relative}
.primary-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:18px}
.primary-nav a{font-weight:700;text-decoration:none;color:var(--text)}
.nav-toggle{display:none;background:none;border:0}
.nav-toggle .bar{width:24px;height:2px;background:var(--text);display:block;margin:5px 0}
/* Rainbow hover */
.nav-home:hover{color:#ef4444}
.nav-team:hover{color:#f97316}
.nav-events:hover{color:#eab308}
.nav-sponsor:hover{color:#22c55e}
.nav-resources:hover{color:#3b82f6}
.nav-contact:hover{color:#a855f7}
@media(max-width:900px){
  .nav-toggle{display:block}
  .primary-nav ul{position:absolute;right:0;top:44px;background:#fff;border:1px solid var(--ring);border-radius:12px;box-shadow:var(--shadow);padding:10px 12px;flex-direction:column;min-width:220px;display:none}
  .primary-nav ul.open{display:flex}
}

/* Hero */
.hero{padding:48px 0}
.hero-grid{align-items:center}
.tagline{color:#7c3aed;font-weight:700;margin-top:6px}
.lead{margin-top:8px}

/* Buttons */
.btn{display:inline-block;padding:10px 14px;border-radius:999px;border:1px solid var(--ring);background:#fff;font-weight:800;color:var(--text);text-decoration:none}
.btn:hover{box-shadow:var(--shadow)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#000;text-align:center;justify-content:center}
.btn-primary:hover{background:var(--accent-600);border-color:var(--accent-600)}
.btn-small{padding:8px 10px;font-size:14px}

/* Cards */
.card{background:var(--surface);border:1px solid var(--ring);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.cards .card{display:flex;flex-direction:column}
.cards .btn{margin-top:auto}
.section{padding:60px 0}
.section-alt{background:rgba(255,255,255,.5)}

/* Circular headshots (front side) */
.profile {
  width: 200px;
  height: 200px;
  border-radius: 999px; /* circle */
  object-fit: cover;
}

/* Rectangular/square graphics (back side) */
.profile-rect {
  width: 220px;   /* adjust size as needed */
  height: 150px;  /* change to make it rectangular or equal for square */
  border-radius: 8px;  /* small rounding, or set to 0 for sharp corners */
  object-fit: contain;
  display: block;
  margin: 0 auto 12px auto;
}
/* Masonry-style collage */
.collage {
  column-count: 3;       /* how many columns */
  column-gap: 8px;       /* space between columns */
  margin: 0 auto;
}

.collage .tile {
  display: inline-block; /* allows multi-columns to flow */
  margin: 0 0 8px;       /* vertical spacing between images */
  width: 100%;
  break-inside: avoid;   /* prevents images from breaking awkwardly */
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

.collage img {
  display: block;
  width: 100%;
  height: auto;          /* auto so each image keeps its proportions */
  transition: transform .25s ease;
}

.collage .tile:hover img {
  transform: scale(1.05);
}

/* Mobile: reduce to 2 cols */
@media (max-width: 700px) {
  .collage {
    column-count: 2;
  }
}

/* Connect list */
.connect-list{list-style:none;padding-left:0;display:grid;gap:10px}
.linktile{display:block;padding:12px 14px;border:1px solid var(--ring);border-radius:12px;background:#fff;text-decoration:none;color:inherit;font-weight:700}
.linktile:hover{box-shadow:var(--shadow)}

/* Board grid (4 x 2) */
.board-grid{display:grid;gap:18px;grid-template-columns:repeat(1,1fr)}
@media(min-width:700px){.board-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.board-grid{grid-template-columns:repeat(4,1fr)}}
.avatar{width:120px;height:120px;border-radius:999px;object-fit:cover;margin:0 auto 10px auto}
.role{color:var(--muted);margin-top:-6px}
.pronouns{color:var(--muted);margin-top:-6px}


/* Flip card on hover (desktop) */
.board-card{perspective:1000px}
.card-inner{position:relative;transform-style:preserve-3d;border-radius:var(--radius)}
.card-face{backface-visibility:hidden;border:1px solid var(--ring);border-radius:var(--radius);padding:18px;background:var(--surface);box-shadow:var(--shadow);min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.card-back{position:absolute;inset:0;transform:rotateY(180deg)}
@media(hover:hover){.board-card:hover .card-inner{transform:rotateY(180deg);transition:transform .6s cubic-bezier(.2,.8,.2,1)}}

/* Modal for mobile click */
.modal{position:fixed;inset:0;display:none}
.modal.open{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.5)}
.modal-dialog{position:relative;margin:5vh auto 0 auto;background:#fff;border-radius:16px;max-width:520px;padding:20px;box-shadow:var(--shadow)}
.modal-close{position:absolute;top:8px;right:10px;font-size:24px;line-height:1;border:0;background:none;cursor:pointer}
.modal-body h3{margin-top:0}
.modal-body .avatar{margin-bottom:8px}
.modal-body .role{margin-top:0}

/* Modal image sizing for board profiles */
.modal-profile { text-align: center; }
.modal-profile-img {
  width: 100%;
  max-width: 520px;
  height: auto;
  border-radius: 12px;
  display: block;
  margin: 0 auto 12px;
}


/* Resources */
.resources-grid{align-items:stretch}
.resource-card{display:flex;flex-direction:column;gap:10px;border:1px solid var(--ring);border-radius:14px;padding:14px;background:#fff;text-decoration:none;color:inherit;box-shadow:var(--shadow)}
.resource-card:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(2,6,23,.12)}
.resource-card img{width:64px;height:64px;object-fit:contain}

/* Sponsorship tiers */
.tiers h2{margin-top:0}

/* Footer */
.site-footer{border-top:1px solid var(--ring);background:rgba(255,255,255,.75);padding:18px 0}


/* Shared resource card styles */
.resource-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  transition: transform .2s ease, box-shadow .2s ease;
  border-radius: 12px;
  color: #fff; /* default text color on colored backgrounds */
}

.resource-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

.resource-logo {
  max-width: 90%;      /* bump up from 70–80% */
  max-height: 160px;   /* allow taller logos */
  object-fit: contain; /* keep proportions, no cropping */
  margin-bottom: 12px;
}

.resource-card h3 {
  font-size: 1rem;
  margin: 0;
}

/* Brand backgrounds */
.resource-card.discord {
  background: #5865F2; /* Discord blurple */
}

.resource-card.linktree {
  background: #42E661; /* Linktree green */
  color: #ffffff;         
}

.resource-card.instagram {
  background: radial-gradient(circle at 30% 107%, 
              #fdf497 0%, #fdf497 5%, #fd5949 45%, 
              #d6249f 60%, #285AEB 90%);
}



/* Mailchimp CSS */
.mc-embed { max-width: 560px; margin: 0 auto; }

#mc_embed_signup .button.btn.btn-primary { display: inline-block; }

#mc_embed_signup .brandingLogo img { height: auto; max-width: 140px; opacity: 0.9; }

.form-container {
  max-width: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 2rem 0; /* adds breathing room above and below */
}