/* THEME — update these once you confirm exact HEX from school site */
    :root{
      --brand-primary:#1d3557; /* TODO: replace with school primary */
      --brand-accent:#e0b000;  /* TODO: replace with school accent */
      --text:#0b0b0b; --muted:#555; --bg:#ffffff; --card:#f7f7f8; --ok:#1b8a5a; --warn:#a65e00;
      --radius:18px; --pad:16px; --gap:12px; --shadow:0 6px 20px rgba(0,0,0,.06);
    }
    *{box-sizing:border-box}
    body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;margin:0;background:var(--bg);color:var(--text)}
    header{padding:28px var(--pad); background:linear-gradient(180deg,var(--brand-primary),#0e223a); color:white}
    .wrap{max-width:920px;margin:0 auto;padding:0 var(--pad)}
    header .header-text h1 {font-size: clamp(20px, 5vw, 32px);}
          .sub {font-size: clamp(12px, 3vw, 16px);}
    .sub{opacity:.9}
    .event{background:var(--card); border-radius:var(--radius); padding:var(--pad); box-shadow:var(--shadow); margin:18px 0}
    .event h3{margin:0 0 6px}
    .grid{display:grid; gap:var(--gap)}
    .btn{display:inline-block; padding:10px 14px; border-radius:12px; border:1px solid #ddd; background:white; cursor:pointer; font-weight:600}
    .btn.primary{background:var(--brand-accent); border:none}
    .pill{display:inline-block; padding:4px 10px; border-radius:999px; background:#eef; margin-left:8px; font-size:12px}
    .names{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
    .name{background:white; border:1px solid #eee; padding:6px 10px; border-radius:999px}
    form.signup{display:grid; gap:8px; grid-template-columns:1fr 1fr}
    form.signup input{padding:10px;border-radius:10px;border:1px solid #ccc}
    form.signup .full{grid-column:1/-1}
    .notice{font-size:12px; color:var(--muted)}
    .capacity{font-size:13px; color:var(--muted)}
    .adminbar{position:sticky; top:0; background:#111; color:white; padding:8px var(--pad)}
    .hide{display:none}
    .wrap.header-content {
      display: flex;
      align-items: center; 
      gap: 20px;           
      }
    header img.logo {
      max-height: 100px;        
      height: auto;
      width: auto;         
      }  
#rosterList {
      list-style: none;
      padding: 0;
      margin: 0;
      font-size: clamp(10px, 4vw, 14px); 
    }
    #rosterList li.not-active {
      text-decoration: line-through;
      opacity: 0.6 }
      #subscribeModal.hide {
    display: none;
  }
  #subscribeModal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;              /* only applied when .hide is removed */
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }
  #loading {
    text-align: center;
    font-size: 1.2em;
    margin: 2em 0;
    color: var(--muted, #555);
  }
.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 20px;
}

.gallery img {
  max-width: 200px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.lightbox {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  justify-content: center;
  align-items: center;
  animation: fadeIn 0.3s ease;
  flex-direction: column; /* add this */
}
.lightbox-content {
  display: flex;
  flex-direction: column; /* ensure image and caption stack vertically */
  align-items: center;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
  transition: transform 0.3s ease;
}
.lightbox .arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  font-size: 2.5rem;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  padding: 0 12px;
  z-index: 1000;
}
.lightbox .prev { left: 10px; }
.lightbox .next { right: 10px; }
.caption {
  color: white;
  margin-top: 10px;
  font-size: 1rem;
  font-family: 'Inter', sans-serif;
}
.description {
    margin-top: 4px;
    font-size: 0.95em;
    color: #333;
}