/* ==========================================================================
   AMNESTY INTERNATIONAL YOUTH — ALTAMONTE SPRINGS CHAPTER
   Brand design system: BLACK canvas, YELLOW accent, WHITE body.
   --------------------------------------------------------------------------
   FONT NOTE (Trade Gothic):
   Headlines use "Oswald" (free Google Font) as the fallback for the licensed
   "Trade Gothic Bold Condensed No. 20". To swap in the real font:
     1) @font-face { font-family: 'Trade Gothic Bold Cond No 20';
                     src: url('../fonts/tradegothic.woff2') format('woff2'); }
     2) Change --font-head below to 'Trade Gothic Bold Cond No 20'.
   ========================================================================== */

:root {
  --black:        #000000;
  --black-2:      #111111;
  --black-3:      #1A1A1A;
  --yellow:       #FFFF00; /* Amnesty "Process Yellow" */
  --white:        #FFFFFF;

  --font-head: 'Oswald', 'Archivo Narrow', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', 'Roboto', 'Helvetica Neue', Arial, sans-serif;

  --maxw: 1180px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* ---------------------------------------------------------------------------
   SCROLLING — two browser behaviours must be switched OFF here, and both are
   why Chrome and Firefox felt "sticky" while Safari was fine.

   1. scroll-behavior MUST be `auto`, not `smooth`.
      Lenis animates window scroll itself. With CSS smooth scrolling also on,
      every programmatic scroll gets eased TWICE — the browser runs its own
      animation toward a target while Lenis runs a different one, and they
      disagree about where the page should be on each frame. This is the
      documented Lenis incompatibility. Anchor links here are handled in JS
      (lenis.scrollTo, or scrollIntoView when reduced motion is on), so
      nothing is lost by turning it off.

   2. overflow-anchor MUST be `none`.
      Scroll anchoring silently adjusts the scroll position when content above
      the viewport changes size — for example when a lazy-loaded image finally
      arrives. Fighting a JS smooth-scroller, that reads as the page catching
      or snapping back. Chrome and Firefox implement it; **Safari does not**,
      which is exactly why Safari scrolled correctly and the other two did not.
   --------------------------------------------------------------------------- */
html {
  scroll-behavior: auto;
  overflow-anchor: none;
}
body { overflow-anchor: none; }

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* Accessible focus states */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

/* ---------------------------- LAYOUT HELPERS ---------------------------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.container.narrow { max-width: 820px; }
.section { padding: clamp(64px, 10vw, 130px) 0; position: relative; }
.center { text-align: center; margin-top: 40px; }

.section-title {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--yellow);
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: 0.5px;
  font-size: clamp(2rem, 5.5vw, 4rem);
  text-align: center;
  margin-bottom: 22px;
}
.section-intro {
  text-align: center;
  color: var(--white);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  max-width: 720px;
  margin: 0 auto 52px;
  font-weight: 400;
}
.section-intro strong, .yellow-emph { color: var(--yellow); font-weight: 600; }

/* ------------------------------- BUTTONS ------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 15px 40px;
  border-radius: 2px;
  cursor: pointer;
  border: 2px solid var(--yellow);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .25s, color .25s;
  font-size: 1rem;
}
/* The rare solid-yellow moment */
.btn-solid { background: var(--yellow); color: var(--black); }
.btn-solid:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 0 34px rgba(255,255,0,.55); }

.btn-dark { background: var(--black); color: var(--yellow); border-color: var(--black); width: 100%; }
.btn-dark:hover { transform: translateY(-2px); box-shadow: 0 0 20px rgba(0,0,0,.5); }

.btn-ghost { background: transparent; color: var(--yellow); padding: 10px 22px; font-size: .85rem; }
.btn-ghost:hover { background: rgba(255,255,0,.1); }

/* ----------------------------- SPLASH ----------------------------- */
.splash {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--black);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .8s ease, visibility .8s ease;
}
.splash.hide { opacity: 0; visibility: hidden; }
.splash-inner { text-align: center; }
/* Logo is a black-on-white image; invert(1) renders it white on the black canvas */
.splash-candle {
  filter: invert(1) drop-shadow(0 0 24px rgba(255,255,0,.5));
  animation: ignite 1s var(--ease) both, logo-flicker 1.8s ease-in-out .9s infinite;
}
@keyframes ignite { 0% { opacity: 0; transform: scale(.6); } 100% { opacity: 1; transform: scale(1); } }
/* Subtle glow pulse standing in for the flame flicker on the static logo */
@keyframes logo-flicker {
  0%,100% { filter: invert(1) drop-shadow(0 0 22px rgba(255,255,0,.5)); }
  50% { filter: invert(1) drop-shadow(0 0 34px rgba(255,255,0,.85)); }
}
.splash-text {
  font-family: var(--font-head); color: var(--yellow);
  letter-spacing: 6px; margin-top: 24px; font-size: 1rem;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: .4 } 50% { opacity: 1 } }

/* Official logo images are black-on-white; invert(1) renders them white on black */
.nav-logo, .hero-corner-logo, .footer-logo { filter: invert(1); object-fit: contain; }

/* ------------------------------- NAV ------------------------------- */
.site-nav {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 900;
  background: transparent;
  transition: background .35s ease, box-shadow .35s ease, border-color .35s ease;
  border-bottom: 1px solid transparent;
}
.site-nav.scrolled {
  background: var(--black);
  border-bottom: 2px solid var(--yellow);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.nav-brand { display: flex; align-items: center; gap: 12px; }
.nav-logo { height: 34px; width: auto; }
.nav-brand-text {
  font-family: var(--font-head); font-weight: 600; text-transform: uppercase;
  letter-spacing: 1px; line-height: 1; font-size: 1rem; color: var(--white);
  display: flex; flex-direction: column;
}
.nav-brand-sub { font-size: .62rem; letter-spacing: 1.5px; color: var(--yellow); font-weight: 400; margin-top: 3px; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a {
  font-family: var(--font-head); text-transform: uppercase; letter-spacing: 1.2px;
  font-size: .92rem; color: var(--white); position: relative; padding: 4px 0;
  transition: color .25s;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: var(--yellow); transition: width .3s var(--ease);
}
.nav-links a:hover { color: var(--yellow); }
.nav-links a:hover::after { width: 100%; }
.nav-links .nav-join { color: var(--black); background: var(--yellow); padding: 8px 20px; border-radius: 2px; }
.nav-links .nav-join::after { display: none; }
.nav-links .nav-join:hover { color: var(--black); box-shadow: 0 0 18px rgba(255,255,0,.5); }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.nav-toggle span { width: 26px; height: 2.5px; background: var(--yellow); transition: transform .3s, opacity .3s; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ------------------------------- HERO ------------------------------- */
.hero {
  position: relative; min-height: 100vh; width: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: var(--black);
}
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
/* Top padding clears the fixed nav so the eyebrow doesn't overlap the menu */
.hero-content { position: relative; z-index: 2; text-align: center; padding: 90px 24px 0; }
.hero-eyebrow {
  font-family: var(--font-head); color: var(--yellow); letter-spacing: 4px;
  text-transform: uppercase; font-size: clamp(.7rem, 1.6vw, .95rem); margin-bottom: 18px;
}
.hero-title {
  font-family: var(--font-head); font-weight: 700; color: var(--yellow);
  text-transform: uppercase; line-height: .92; letter-spacing: 1px;
  font-size: clamp(2.8rem, 11vw, 8.5rem);
  text-shadow: 0 0 40px rgba(255,255,0,.35);
}
.hero-title .hero-line { display: block; }
.hero-title .char { display: inline-block; }
.hero-subtitle {
  color: var(--white); font-weight: 400; letter-spacing: 3px;
  text-transform: uppercase; font-size: clamp(.95rem, 2.4vw, 1.5rem); margin-top: 18px;
}
.hero-cta { margin-top: 40px; }
.hero-scroll-hint {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  z-index: 2; color: var(--white); text-align: center; font-size: .75rem;
  letter-spacing: 2px; text-transform: uppercase; opacity: .7;
}
.hero-scroll-hint i { display: block; margin-top: 6px; animation: bob 1.8s ease-in-out infinite; color: var(--yellow); }
@keyframes bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(6px) } }
.hero-corner-logo {
  position: absolute; bottom: 24px; right: 28px; z-index: 2; opacity: .92;
  height: 78px; width: auto;
  filter: invert(1) drop-shadow(0 0 16px rgba(255,255,0,.35));
}

/* ----------------------------- MISSION ----------------------------- */
.mission {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--black); text-align: center; padding: 0 24px;
}
.mission-inner { max-width: 900px; }
.mission-line {
  font-family: var(--font-head); text-transform: uppercase; color: var(--white);
  font-size: clamp(1.5rem, 4.5vw, 3.2rem); line-height: 1.15; margin: 18px 0;
  opacity: 0;
}
.mission-line strong { color: var(--yellow); }

/* ----------------------------- TWO COLUMN / RIGHTS ----------------------------- */
.rights { background: var(--black-2); }
.two-col { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: start; }
.col-heading {
  font-family: var(--font-head); color: var(--yellow); text-transform: uppercase;
  letter-spacing: 1px; font-size: 1.5rem; margin-bottom: 18px;
}
.dash-list { list-style: none; }
.dash-list li { position: relative; padding-left: 26px; margin-bottom: 14px; color: var(--white); font-size: 1.08rem; }
.dash-list li::before { content: '-'; position: absolute; left: 0; color: var(--yellow); font-weight: 700; }
.dash-list li.dash-more { color: var(--yellow); font-weight: 600; }

.callout {
  background: var(--yellow); color: var(--black); padding: 34px 32px; border-radius: 4px;
  box-shadow: 0 20px 60px rgba(255,255,0,.12);
}
.callout-heading { font-family: var(--font-head); text-transform: uppercase; font-size: 1.6rem; margin-bottom: 12px; }
.callout p { color: var(--black); font-weight: 400; margin-bottom: 16px; }
.callout strong { font-weight: 700; }
.callout-link {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head);
  text-transform: uppercase; letter-spacing: 1px; font-weight: 600;
  border-bottom: 2px solid var(--black); padding-bottom: 2px;
}

/* ----------------------------- ABOUT / STATS ----------------------------- */
.about-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: start; }
.about-text p { margin-bottom: 16px; font-size: 1.08rem; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.stat-card {
  background: var(--black-3); border: 1px solid rgba(255,255,0,.25); border-radius: 4px;
  padding: 28px 20px; text-align: center;
}
.stat-num {
  display: block; font-family: var(--font-head); color: var(--yellow);
  font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 700; line-height: 1;
}
.stat-label { display: block; margin-top: 8px; text-transform: uppercase; letter-spacing: 1px; font-size: .8rem; color: var(--white); }

/* ----------------------------- WHY ----------------------------- */
.why { background: var(--black-2); }
.why-body p { font-size: clamp(1.1rem, 2vw, 1.35rem); margin-bottom: 22px; text-align: center; }

/* ----------------------------- CARDS ----------------------------- */
.card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.glow-card {
  background: var(--black-3); border: 1px solid rgba(255,255,0,.3); border-radius: 6px;
  padding: 34px 26px; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.glow-card:hover { transform: translateY(-8px); box-shadow: 0 0 34px rgba(255,255,0,.3); border-color: var(--yellow); }
.card-icon { font-size: 2rem; color: var(--yellow); margin-bottom: 16px; }
.glow-card h3 { font-family: var(--font-head); color: var(--yellow); text-transform: uppercase; letter-spacing: .5px; font-size: 1.3rem; margin-bottom: 10px; }
.glow-card p { color: var(--white); font-size: .98rem; }

/* ------------------------- LEADERSHIP TEAM ------------------------- */
.leader-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 10px;
}
.leader-card {
  background: var(--black-3);
  border: 1px solid rgba(255,255,0,.3);
  border-left: 3px solid var(--yellow);
  border-radius: 6px;
  padding: 30px 26px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.leader-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 30px rgba(255,255,0,.25);
  border-color: var(--yellow);
}
.leader-role {
  font-family: var(--font-head);
  color: var(--yellow);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-size: .92rem;
  margin-bottom: 8px;
}
.leader-name {
  font-family: var(--font-head);
  color: var(--white);
  font-size: 1.45rem;
  letter-spacing: .4px;
  margin-bottom: 12px;
}
.leader-blurb { color: var(--white); font-size: .96rem; line-height: 1.6; }

/* ----------------------------- EVENTS ----------------------------- */
.events-group-title {
  font-family: var(--font-head); color: var(--yellow); text-transform: uppercase;
  letter-spacing: 1px; font-size: 1.6rem; margin: 40px 0 24px; display: flex; align-items: center; gap: 12px;
}
.events-group-title:first-of-type { margin-top: 10px; }
.events-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.event-card {
  background: var(--black-3); border: 1px solid rgba(255,255,0,.2); border-radius: 6px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.event-card:hover { transform: translateY(-6px); box-shadow: 0 0 30px rgba(255,255,0,.22); border-color: var(--yellow); }
.event-thumb {
  position: relative; aspect-ratio: 4/3; overflow: hidden; cursor: pointer; background: var(--black-2);
}
.event-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease), filter .3s; }
.event-thumb:hover img { transform: scale(1.07); filter: brightness(1.08); }
.event-thumb .thumb-badge {
  position: absolute; top: 12px; left: 12px; background: var(--yellow); color: var(--black);
  font-family: var(--font-head); text-transform: uppercase; font-size: .72rem; letter-spacing: 1px;
  padding: 4px 10px; border-radius: 2px; font-weight: 600;
}
.event-thumb .thumb-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.35); opacity: 0; transition: opacity .3s; color: var(--yellow);
  font-family: var(--font-head); text-transform: uppercase; letter-spacing: 1px; gap: 8px;
}
.event-thumb:hover .thumb-overlay { opacity: 1; }
.event-body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.event-body h4 { font-family: var(--font-head); color: var(--yellow); text-transform: uppercase; font-size: 1.25rem; line-height: 1.1; }
.event-body p { color: var(--white); font-size: .95rem; flex: 1; }
.event-meta { font-size: .85rem; color: var(--white); opacity: .9; display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.event-meta span { display: flex; align-items: center; gap: 8px; }
.event-meta i { color: var(--yellow); width: 15px; text-align: center; }

/* ----------------------------- VOLUNTEER ----------------------------- */
.help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 900px; margin: 0 auto; }

/* ----------------------------- JOIN FORM ----------------------------- */
.join { background: var(--black); }
.join .section-title { font-size: clamp(1.5rem, 3.5vw, 2.6rem); max-width: 900px; margin-left: auto; margin-right: auto; }
.join-panel {
  background: var(--yellow); color: var(--black); border-radius: 6px;
  padding: clamp(28px, 5vw, 52px); box-shadow: 0 30px 80px rgba(255,255,0,.15);
}
.field { margin-bottom: 20px; display: flex; flex-direction: column; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.join-panel label { font-family: var(--font-head); text-transform: uppercase; letter-spacing: 1px; color: var(--black); font-size: .9rem; margin-bottom: 7px; font-weight: 600; }
.join-panel .req { color: #b30000; }
.join-panel input, .join-panel textarea {
  background: var(--white); border: 2px solid var(--black); border-radius: 3px;
  padding: 12px 14px; font-family: var(--font-body); font-size: 1rem; color: var(--black); width: 100%;
}
.join-panel input:focus, .join-panel textarea:focus { outline: 3px solid var(--black); outline-offset: 0; }
.err { color: #b30000; font-size: .82rem; margin-top: 5px; min-height: 1em; font-weight: 500; }
.form-success {
  background: var(--black); color: var(--yellow); padding: 16px; border-radius: 4px;
  margin-top: 18px; font-family: var(--font-head); text-transform: uppercase; letter-spacing: 1px; text-align: center;
}
.form-note { margin-top: 18px; text-align: center; color: var(--black); font-weight: 500; }
.form-note a { text-decoration: underline; font-weight: 700; }

/* ----------------------------- FOOTER ----------------------------- */
.site-footer { background: var(--black); border-top: 2px solid var(--yellow); padding: 60px 0 40px; }
.footer-inner { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; }
.footer-brand h3 { font-family: var(--font-head); color: var(--yellow); text-transform: uppercase; font-size: 1.7rem; letter-spacing: 1px; }
.footer-chapter { color: var(--white); letter-spacing: 2px; text-transform: uppercase; font-size: .85rem; margin: 4px 0 14px; }
.footer-affil { color: var(--white); font-size: .95rem; max-width: 520px; margin-bottom: 10px; }
.footer-brand a { color: var(--yellow); }
.footer-social { display: flex; gap: 18px; margin: 16px 0; font-size: 1.3rem; }
.footer-social a { color: var(--white); transition: color .25s, transform .25s; }
.footer-social a:hover { color: var(--yellow); transform: translateY(-3px); }
.footer-disclaimer { font-size: .78rem; color: rgba(255,255,255,.5); max-width: 560px; margin-top: 8px; }
.footer-admin { margin-top: 14px; }
.footer-admin a { font-size: .8rem; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: 2px; }
.footer-admin a:hover { color: var(--yellow); }
.footer-logo { height: 100px; width: auto; filter: invert(1) drop-shadow(0 0 16px rgba(255,255,0,.3)); }

/* ----------------------------- LIGHTBOX ----------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.94);
  display: flex; align-items: center; justify-content: center;
}
.lightbox[hidden] { display: none; }
.lb-stage { text-align: center; max-width: 90vw; max-height: 86vh; }
#lb-image { max-width: 90vw; max-height: 74vh; border-radius: 4px; object-fit: contain; box-shadow: 0 0 60px rgba(255,255,0,.15); }
.lb-caption { color: var(--white); margin-top: 14px; font-size: 1rem; }
.lb-counter { color: var(--yellow); font-family: var(--font-head); letter-spacing: 2px; margin-top: 4px; font-size: .85rem; }
.lb-close, .lb-nav {
  position: absolute; background: rgba(255,255,0,.1); border: 2px solid var(--yellow); color: var(--yellow);
  width: 52px; height: 52px; border-radius: 50%; cursor: pointer; font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center; transition: background .25s, transform .25s;
}
.lb-close:hover, .lb-nav:hover { background: var(--yellow); color: var(--black); }
.lb-close { top: 24px; right: 24px; }
.lb-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 24px; top: 50%; transform: translateY(-50%); }

/* ----------------------------- ADMIN MODAL ----------------------------- */
/* The dialog owns its own scrolling. Previously the panel grew as tall as its
   content and the page scrolled behind it, so a long form could only be read
   by maximising the window. Now the box is capped to the viewport and the
   content area inside it scrolls. */
.admin-modal {
  position: fixed; inset: 0; z-index: 1100; background: rgba(0,0,0,.9);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; padding: 24px 16px;
}
.admin-modal[hidden] { display: none; }
.admin-box {
  background: var(--black-2); border: 2px solid var(--yellow); border-radius: 8px;
  width: 100%; max-width: 960px; position: relative; box-shadow: 0 0 60px rgba(255,255,0,.2);
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column; overflow: hidden;
}
/* The scrolling region. The close button sits outside it so it stays put. */
.admin-scroll {
  overflow-y: auto; overscroll-behavior: contain;
  flex: 1 1 auto; padding: 40px; scrollbar-gutter: stable;
}
.admin-scroll::-webkit-scrollbar { width: 10px; }
.admin-scroll::-webkit-scrollbar-track { background: var(--black-3); border-radius: 5px; }
.admin-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,0,.45); border-radius: 5px; }
.admin-scroll::-webkit-scrollbar-thumb:hover { background: var(--yellow); }
.admin-scroll { scrollbar-color: rgba(255,255,0,.45) var(--black-3); scrollbar-width: thin; }

.admin-close {
  position: absolute; top: 12px; right: 14px; z-index: 2;
  background: var(--black-2); border: none; color: var(--yellow);
  font-size: 1.6rem; cursor: pointer; line-height: 1;
  width: 38px; height: 38px; border-radius: 50%;
}
.admin-close:hover { background: var(--yellow); color: var(--black); }
.admin-view .section-title { font-size: 1.8rem; text-align: left; margin-bottom: 10px; }
.admin-hint { color: var(--white); font-size: .9rem; margin-bottom: 22px; }
.admin-hint code { background: var(--black-3); color: var(--yellow); padding: 2px 8px; border-radius: 3px; }
.admin-form label { font-family: var(--font-head); color: var(--white); text-transform: uppercase; letter-spacing: 1px; font-size: .82rem; margin-bottom: 6px; }
.admin-form input, .admin-form textarea {
  background: var(--black); border: 1px solid rgba(255,255,0,.4); border-radius: 3px;
  padding: 11px 13px; color: var(--white); font-family: var(--font-body); font-size: .95rem; width: 100%;
}
.admin-form input[type="file"] { padding: 8px; }
.admin-dash-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 14px; }
.admin-tabs { display: flex; gap: 8px; }
.admin-tab {
  background: transparent; border: 1px solid rgba(255,255,0,.4); color: var(--white);
  font-family: var(--font-head); text-transform: uppercase; letter-spacing: 1px; font-size: .85rem;
  padding: 8px 18px; border-radius: 3px; cursor: pointer; transition: background .2s, color .2s;
}
.admin-tab.active { background: var(--yellow); color: var(--black); border-color: var(--yellow); }
.admin-dash-user { display: flex; align-items: center; gap: 14px; }
.admin-dash-user #admin-who { color: var(--yellow); font-size: .85rem; font-family: var(--font-head); letter-spacing: 1px; }
.account-form { max-width: 480px; }
.account-form .req { color: #ff5252; }
/* Success state for inline admin messages (account + leadership forms). */
#account-msg.ok, #leader-msg.ok, #ev-upload-status.ok { color: #58d68d; }
.leader-form { max-width: 480px; }
.leader-form .req { color: #ff5252; }
.admin-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
/* A class-level `display` beats the UA's `[hidden] { display: none }`, so a
   hidden .admin-cols panel would still render. Keep this after .admin-cols. */
.admin-tab-panel[hidden] { display: none !important; }
.admin-form-actions { display: flex; gap: 12px; margin-top: 10px; }
.file-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.file-preview img { width: 60px; height: 60px; object-fit: cover; border-radius: 3px; border: 1px solid var(--yellow); }

/* --------------------------- GALLERY EDITOR --------------------------- */
.admin-hint.tight { margin-bottom: 4px; margin-top: 6px; display: block; font-size: .8rem; opacity: .8; }
.input-with-btn { display: flex; gap: 8px; align-items: stretch; }
.input-with-btn input { flex: 1 1 auto; }
.btn-sm { padding: 8px 14px; font-size: .78rem; white-space: nowrap; }

.gallery-editor {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px;
  padding: 12px; min-height: 96px;
  background: var(--black-3); border: 1px dashed rgba(255,255,0,.35); border-radius: 6px;
}
.gallery-editor:empty::after {
  content: 'No images yet — upload one or paste a URL above.';
  color: var(--white); opacity: .55; font-size: .85rem; align-self: center;
}
.gal-tile {
  position: relative; width: 104px; border-radius: 5px; overflow: hidden;
  border: 2px solid rgba(255,255,0,.25); background: var(--black-2);
  cursor: grab; transition: border-color .2s, transform .2s, opacity .2s;
}
.gal-tile:active { cursor: grabbing; }
.gal-tile img { width: 100%; height: 74px; object-fit: cover; display: block; pointer-events: none; }
.gal-tile.dragging { opacity: .4; }
.gal-tile.drop-target { border-color: var(--yellow); transform: translateY(-3px); }

/* Leftmost tile is the main image. */
.gal-tile.is-main { border-color: var(--yellow); box-shadow: 0 0 14px rgba(255,255,0,.4); }
.gal-main-badge {
  position: absolute; top: 0; left: 0; right: 0;
  background: var(--yellow); color: var(--black);
  font-family: var(--font-head); font-size: .62rem; letter-spacing: 1px;
  text-align: center; padding: 3px 0; text-transform: uppercase;
}
.gal-tile-actions {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 5px; background: var(--black);
}
.gal-tile-actions button {
  background: none; border: none; color: var(--white); cursor: pointer;
  font-size: .8rem; padding: 3px 5px; border-radius: 3px; line-height: 1;
}
.gal-tile-actions button:hover:not(:disabled) { background: var(--black-3); color: var(--yellow); }
.gal-tile-actions button:disabled { opacity: .25; cursor: default; }
.gal-tile-actions .gal-del:hover { background: #b30000; color: #fff; }

@media (max-width: 560px) {
  .admin-scroll { padding: 30px 18px; }
  .input-with-btn { flex-direction: column; }
}
.admin-event-row {
  background: var(--black-3); border: 1px solid rgba(255,255,0,.2); border-radius: 5px;
  padding: 14px; margin-bottom: 12px; display: flex; gap: 14px; align-items: center;
}
.admin-event-row img { width: 66px; height: 50px; object-fit: cover; border-radius: 3px; }
.admin-event-info { flex: 1; }
.admin-event-info h5 { font-family: var(--font-head); color: var(--yellow); text-transform: uppercase; font-size: 1rem; }
.admin-event-info small { color: rgba(255,255,255,.7); }
.admin-event-actions { display: flex; gap: 8px; }
.admin-event-actions button {
  background: none; border: 1px solid var(--yellow); color: var(--yellow); border-radius: 3px;
  width: 34px; height: 34px; cursor: pointer; transition: background .2s, color .2s;
}
.admin-event-actions button:hover { background: var(--yellow); color: var(--black); }
.admin-event-actions .del:hover { background: #b30000; border-color: #b30000; color: var(--white); }

/* ----------------------------- REVEAL ANIM ----------------------------- */
.reveal { opacity: 0; transform: translateY(40px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }

/* ----------------------------- RESPONSIVE ----------------------------- */
@media (max-width: 900px) {
  .two-col, .about-grid, .help-grid { grid-template-columns: 1fr; gap: 34px; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .events-grid { grid-template-columns: repeat(2, 1fr); }
  .leader-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-cols { grid-template-columns: 1fr; }
  .admin-box { padding: 28px 20px; }

  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed; top: 0; right: 0; height: 100vh; width: 76%; max-width: 340px;
    background: var(--black); border-left: 2px solid var(--yellow);
    flex-direction: column; justify-content: center; gap: 30px; align-items: center;
    transform: translateX(100%); transition: transform .4s var(--ease); z-index: 950;
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links a { font-size: 1.3rem; }
}
@media (max-width: 560px) {
  .card-grid, .events-grid, .leader-grid, .stats { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .lb-close { top: 14px; right: 14px; }
  .lb-prev { left: 10px; } .lb-next { right: 10px; }
  .lb-nav, .lb-close { width: 44px; height: 44px; }
}

/* ----------------------------- REDUCED MOTION ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .mission-line { opacity: 1 !important; }
  .hero-title { text-shadow: none; }
}

/* --------------------- SIGN-UP FORM: ANTI-SPAM + ERRORS --------------------- */
/* Honeypot wrapper: shipped off-screen so humans never see or fill it.
   (Not display:none — some bots skip fields hidden that way.) */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.form-error { margin-top: 12px; font-size: .9rem; }

/* ----------------------- ADMIN: FORGOT-PASSWORD LINK ----------------------- */
.admin-forgot-row { margin-top: 14px; }
.admin-forgot {
  background: none;
  border: none;
  padding: 0;
  color: var(--yellow);
  font-family: var(--font-body);
  font-size: .85rem;
  text-decoration: underline;
  cursor: pointer;
}
.admin-forgot:hover { color: var(--white); }
.admin-forgot:disabled { opacity: .5; cursor: default; }