/* ===================== TOKENS ===================== */
:root{
  --maroon-900:#4b0f14;
  --maroon-800:#6a1620;
  --maroon-700:#7d1a24;
  --maroon-deep:#3a0c11;
  --gold-500:#e0a324;
  --gold-600:#c98f1a;
  --cream-100:#faf6ee;
  --cream-200:#f3ead9;
  --ink-900:#241012;
  --ink-600:#6b5a5c;
  --ink-400:#9c8b8d;
  --border-soft:#ece2d3;
  --radius-md:10px;
  --radius-lg:16px;
  --shadow-card:0 10px 30px -18px rgba(75,15,20,.35);
  --font-display:'Georgia','Iowan Old Style',serif;
  --font-body:'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink-900);
  background:var(--cream-100);
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit;}
h1,h2,h3{font-family:var(--font-display);margin:0;}
img,svg{display:block;}
button{font:inherit;border:none;background:none;cursor:pointer;color:inherit;}
:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px;}

.section{padding:64px 6vw;max-width:1440px;margin:0 auto;}
.link-arrow{
  color:var(--maroon-800);
  font-weight:600;
  font-size:.92rem;
  white-space:nowrap;
}
.section-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:28px;
}
.section-heading h2{font-size:1.7rem;color:var(--maroon-900);}

/* ===================== HEADER ===================== */
.site-header{
  position:sticky;top:0;z-index:50;
  background:#fffdf9;
  border-bottom:1px solid var(--border-soft);
}
.header-inner{
  max-width:1440px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 6vw;
  gap:24px;
}
.brand{display:flex;align-items:center;gap:12px;}
.brand-mark{
  width:44px;height:44px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--maroon-700),var(--maroon-900));
  color:var(--gold-500);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:.95rem;
  border:2px solid var(--gold-500);
  flex-shrink:0;
}
.brand-mark.light{border-color:var(--gold-500);}
.brand-text{display:flex;flex-direction:column;line-height:1.25; gap:4px; padding: 6px;}
.brand-title{font-family:var(--font-display);font-weight:700;color:var(--maroon-900);font-size:1.15rem;}
.brand-sub{font-size:.68rem;letter-spacing:.14em;color:var(--gold-600);font-weight:600;}

.main-nav{display:flex;align-items:center;gap:6px;}
.main-nav a{
  padding:10px 20px;border-radius:999px;
  font-size:.95rem;font-weight:600;color:var(--ink-600);
  transition:background .15s ease,color .15s ease;
}
.main-nav a:hover{color:var(--maroon-800);}
.main-nav a.active{background:var(--maroon-900);color:#fff;}

.header-actions{display:flex;align-items:center;gap:14px;}
.icon-btn{
  position:relative;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--maroon-800);background:var(--cream-200);
}
.notif-dot{
  position:absolute;top:-2px;right:-2px;
  background:var(--gold-500);color:var(--maroon-900);
  font-size:.6rem;font-weight:700;
  width:16px;height:16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.user-chip{
  display:flex;align-items:center;gap:8px;
  font-size:.88rem;font-weight:600;color:var(--ink-900);
  padding:6px 10px 6px 6px;border-radius:999px;background:var(--cream-200);
}
.avatar-circle{
  width:28px;height:28px;border-radius:50%;
  background:var(--maroon-800);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:700;
}

/* ===================== HERO ===================== */
.hero{
  position:relative;
  min-height:280px;
  display:flex;align-items:center;
  overflow:hidden;
  }
/* .hero-overlay{
  position:relative;z-index:2;
  max-width: 2080px;
  background:
    linear-gradient(115deg,var(--maroon-900) 0%,var(--maroon-900) 38%,transparent 39%),
    linear-gradient(115deg,transparent 37%,var(--gold-500) 37.4%,var(--gold-500) 38.4%,transparent 38.8%);
  
} */
.hero-content{
  position:relative;z-index:2;
  color:#fff;
  max-width:640px;
  padding:28px 0 28px 6vw;
}
.hero-eyebrow{
  color:var(--gold-500);
  font-size:.82rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  margin:0 0 10px;
}
.hero-content h1{
  font-size:2.6rem;line-height:1.12;
  color:#fdf8ee;margin-bottom:14px;
}
.hero-content h1 span{color:var(--gold-500);}
.hero-tagline{
  font-size:1.05rem;font-weight:600;color:#f0e2c4;
  margin:0 0 14px;
  border-bottom:2px solid var(--gold-500);
  display:inline-block;padding-bottom:6px;
}
.hero-desc{
  color:#e7d9d5;font-size:.98rem;line-height:1.6;
  max-width:460px;margin:0 0 26px;
}
.hero-buttons{display:flex;gap:14px;flex-wrap:wrap;}
.hero-motto{
  position:absolute;top:38px;right:5vw;z-index:2;
  font-family:var(--font-display);font-style:italic;
  color:#fff;font-size:1.3rem;line-height:1.35;text-align:right;
  text-shadow:0 2px 10px rgba(0,0,0,.3);
}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 24px;border-radius:8px;
  font-weight:700;font-size:.92rem;
  transition:transform .12s ease,box-shadow .12s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn.small{padding:10px 18px;font-size:.85rem;}
.btn-gold{background:var(--gold-500);color:var(--maroon-900);}
.btn-gold:hover{background:var(--gold-600);}
.btn-outline-light{border:1.5px solid rgba(255,255,255,.75);color:#fff;}
.btn-outline-light:hover{background:rgba(255,255,255,.12);}
.btn-outline{border:1.5px solid var(--gold-600);color:var(--maroon-800);font-weight:700;}
.btn-outline:hover{background:var(--cream-200);}

/* ===================== ANNOUNCEMENTS ===================== */
.announcements{
  display:flex;align-items:center;gap:20px;
  background:#fff;border-bottom:1px solid var(--border-soft);
  padding:12px 6vw;
}
.announce-label{
  display:flex;align-items:center;gap:8px;
  background:var(--maroon-900);color:var(--gold-500);
  padding:9px 18px;border-radius:999px;
  font-weight:700;font-size:.85rem;white-space:nowrap;
  clip-path:polygon(0 0,100% 0,92% 100%,0% 100%);
  padding-right:26px;
}
.announce-track{
  flex:1;display:flex;gap:14px;align-items:center;
  font-size:.9rem;font-weight:600;color:var(--maroon-800);
  overflow:hidden;white-space:nowrap;
}
.announce-track .dot{color:var(--gold-600);}
.announce-nav{display:flex;gap:8px;}
.announce-nav button{
  width:30px;height:30px;border-radius:50%;
  background:var(--cream-200);color:var(--maroon-800);
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;
}

/* ===================== EVENTS + WELCOME ===================== */
.section-grid{
  display:grid;
  grid-template-columns:2.1fr 1fr;
  gap:32px;
}
.event-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.event-card{
  background:#fff;border:1px solid var(--border-soft);
  border-radius:var(--radius-md);overflow:hidden;
  box-shadow:var(--shadow-card);
}
.event-photo{
  position:relative;height:120px;
  background:linear-gradient(135deg,#d7c9a8,#8fa3ad);
}
.photo-1{background:linear-gradient(135deg,#c9b98f,#7a8aa0);}
.photo-2{background:linear-gradient(135deg,#a9b9a0,#5f6f74);}
.photo-3{background:linear-gradient(135deg,#bfa98a,#6b5f6f);}
.event-date{
  position:absolute;top:12px;left:12px;
  background:var(--maroon-900);color:#fff;
  padding:6px 12px;border-radius:6px;text-align:center;
  line-height:1.1;
}
.event-date .day{display:block;font-size:1.3rem;font-weight:700;}
.event-date .month{display:block;font-size:.62rem;letter-spacing:.06em;color:var(--gold-500);}
.event-body{padding:18px;}
.event-body h3{font-size:1.05rem;color:var(--maroon-900);margin-bottom:10px;}
.event-meta{
  display:flex;align-items:center;gap:6px;
  font-size:.82rem;color:var(--ink-600);margin:0 0 6px;
}
.event-meta svg{color:var(--gold-600);flex-shrink:0;}
.event-body .link-arrow.small{margin-top:10px;display:inline-block;font-size:.85rem;}

.welcome-card{
  background:linear-gradient(160deg,var(--maroon-800),var(--maroon-deep));
  color:#fff;border-radius:var(--radius-md);
  padding:30px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:14px;
}
.welcome-card::after{
  content:"";position:absolute;right:-30px;bottom:-30px;
  width:180px;height:180px;border-radius:50%;
  background:rgba(224,163,36,.12);
}
.welcome-card h3{font-size:1.4rem;position:relative;z-index:1;}
.welcome-card p{font-size:.92rem;line-height:1.6;color:#e7d9d5;position:relative;z-index:1;margin:0;}
.welcome-card .btn{align-self:flex-start;position:relative;z-index:1;}
.welcome-quote{
  margin-top:auto;font-family:var(--font-display);font-style:italic;
  font-size:1rem;color:#f0e2c4;border-top:1px solid rgba(255,255,255,.18);
  padding-top:14px;
}

/* ===================== STATS ===================== */
.stats-section{padding-top:0;}
.stats-section h2{color:var(--maroon-900);font-size:1.7rem;margin-bottom:24px;}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.stat-card{
  background:#fff;border:1px solid var(--border-soft);
  border-radius:var(--radius-md);padding:24px;
  display:flex;align-items:center;gap:16px;
}
.stat-icon{
  width:54px;height:54px;border-radius:50%;
  background:var(--cream-200);color:var(--maroon-800);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.stat-num{font-family:var(--font-display);font-size:1.6rem;color:var(--maroon-900);font-weight:700;}
.stat-label{font-size:.85rem;color:var(--ink-600);}

/* ===================== STORIES ===================== */
.story-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.story-card{
  background:#fff;border:1px solid var(--border-soft);
  border-radius:var(--radius-md);padding:24px;
  box-shadow:var(--shadow-card);
  display:flex;flex-direction:column;gap:16px;
}
.story-top{display:flex;gap:14px;align-items:flex-start;}
.story-avatar{
  width:58px;height:58px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#c9b8a8,#7d6a6e);
}
.avatar-1{background:linear-gradient(135deg,#d8c3a1,#5d6b74);}
.avatar-2{background:linear-gradient(135deg,#e3c9c9,#8a5d6b);}
.avatar-3{background:linear-gradient(135deg,#c3cfd8,#4f5b6b);}
.story-top h3{font-size:1.02rem;color:var(--maroon-900);}
.story-batch{font-size:.78rem;color:var(--ink-400);margin:2px 0 4px;}
.story-role{font-size:.85rem;color:var(--ink-600);margin:0;line-height:1.4;font-weight:600;}
.story-quote{
  font-family:var(--font-display);font-style:italic;
  font-size:.95rem;color:var(--ink-900);line-height:1.55;margin:0;flex:1;
}
.story-footer{display:flex;align-items:center;justify-content:space-between;}


.social-btn,
.footer-social{
  width:36px;
  height:36px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  background:rgba(255,255,255,.1);
  color:#fff;
  font-size:.82rem;
  font-weight:700;
  font-style:italic;
  text-decoration:none;
  transition:background .15s ease,color .15s ease;
}

.social-btn svg,
.footer-social svg{
  display:block;
  margin:0;
}

/* ===================== GALLERY ===================== */
.gallery-grid{grid-template-columns:2.3fr 1fr;align-items:stretch;}
.gallery-heading-right{display:flex;align-items:center;gap:16px;}
.gallery-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
.gallery-thumb{
  aspect-ratio:1/1.05;border-radius:var(--radius-md);
  background:linear-gradient(150deg,#cdbf9c,#8a9aa4);
}
.g1{background:linear-gradient(150deg,#e3ddc9,#9fb0b8);}
.g2{background:linear-gradient(150deg,#7d8a6d,#3f4a3a);}
.g3{background:linear-gradient(150deg,#c6b79b,#8a7562);}
.g4{background:linear-gradient(150deg,#4a3b33,#2a2320);}
.g5{background:linear-gradient(150deg,#d9c9a3,#7c6a4f);}

.stronger-card{
  background:linear-gradient(160deg,var(--maroon-800),var(--maroon-deep));
  color:#fff;border-radius:var(--radius-md);
  padding:30px;display:flex;flex-direction:column;justify-content:center;
  position:relative;overflow:hidden;
}
.quote-mark{
  font-family:var(--font-display);font-size:3rem;color:var(--gold-500);
  margin:0;line-height:1;opacity:.85;
}
.stronger-card h3{font-size:1.6rem;margin:6px 0 12px;}
.stronger-card p{margin:0;color:#e7d9d5;font-size:.95rem;line-height:1.5;}

/* ===================== FOOTER ===================== */

.footer-brand-title{
  color: white;

}
.site-footer{background:var(--maroon-deep);color:#f1e4e1;}
.footer-inner{
  max-width:1440px;margin:0 auto;
  padding:56px 6vw 32px;
  display:grid;grid-template-columns:1.6fr 1fr 1.3fr 1fr;gap:32px;
}
.footer-tagline{font-style:italic;color:var(--gold-500);font-size:.85rem;margin-top:10px;}
.footer-col h4{
  font-family:var(--font-body);font-size:.9rem;font-weight:700;
  color:#fff;margin:0 0 16px;
}
.footer-col a{display:block;font-size:.88rem;color:#dcc9c6;margin-bottom:10px;}
.footer-col a:hover{color:var(--gold-500);}
.footer-col p{
  display:flex;gap:8px;font-size:.85rem;color:#dcc9c6;
  margin:0 0 14px;line-height:1.5;
}
.footer-col p svg{color:var(--gold-500);flex-shrink:0;margin-top:3px;}
.social-row{display:flex;gap:10px;}


.footer-bottom{
  border-top:1px solid rgba(255,255,255,.14);
  padding:18px 6vw;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-size:.8rem;color:#c7b3b0;
}
.footer-legal{display:flex;gap:22px;}
.footer-legal a:hover{color:var(--gold-500);}

/* ===================== PAGE HERO (interior pages) ===================== */
.page-hero{
  position:relative;
  min-height:280px;
  display:flex;align-items:center;
  overflow:hidden;
}
.page-hero-photo{
  position:absolute;inset:0;
  background:
  linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.4) 100%),
   url(assets/page.bg.png);
  background-size: cover;

  }
.page-hero-content{
  position:relative;z-index:2;
  background-color:var(--maroon-900);
  color:#fff;max-width:560px;
  padding:44px 0 44px 6vw;
}
.page-hero-content h1{
  font-size:3rem;color:#fdf8ee;margin:6px 0 14px;
  border-bottom:3px solid var(--gold-500);
  display:inline-block;padding-bottom:10px;
}
.page-hero-content .hero-desc{color:#f0e6e0;max-width:420px;}

/* ===================== BREADCRUMB ===================== */
.breadcrumb{
  display:flex;align-items:center;gap:10px;
  background:var(--cream-200);
  padding:14px 6vw;
  font-size:.85rem;color:var(--ink-600);
}
.breadcrumb a{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--maroon-800);font-weight:600;
}
.breadcrumb .crumb-sep{color:var(--ink-400);}

/* ===================== EVENTS LIST PAGE ===================== */
.events-list-section{padding-top:48px;}
.events-list-heading{
  font-size:1.7rem;color:var(--maroon-900);
  margin-bottom:26px;
  border-left:4px solid var(--gold-500);
  padding-left:14px;
}
.events-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.event-card-full{
  background:#fff;border:1px solid var(--border-soft);
  border-radius:var(--radius-md);overflow:hidden;
  box-shadow:var(--shadow-card);
  display:flex;flex-direction:column;
}
.event-card-full .event-photo{height:150px;}
.photo-4{background:linear-gradient(135deg,#9aa8b8,#4d5666);}
.photo-5{background:linear-gradient(135deg,#3a2e40,#171018);}
.photo-6{background:linear-gradient(135deg,#c4c9c1,#8b8f86);}
.event-card-full .event-body{padding:20px;display:flex;flex-direction:column;flex:1;}
.event-card-full .event-meta{flex-wrap:wrap;}
.event-desc{
  font-size:.85rem;color:var(--ink-600);line-height:1.55;
  margin:6px 0 16px;
}
.event-card-full .btn{margin-top:auto;align-self:flex-start;}

/* ===================== CONTACT PAGE ===================== */
.contact-section{padding-top:48px;}
.contact-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:32px;align-items:start;}
.contact-heading h2{font-size:1.7rem;color:var(--maroon-900);margin-bottom:6px;}
.contact-heading p{font-size:.92rem;color:var(--ink-600);margin:0 0 24px;}
.contact-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:36px;}
.contact-info-card{
  background:#fff;border:1px solid var(--border-soft);
  border-radius:var(--radius-md);padding:20px;
  display:flex;gap:14px;align-items:flex-start;
}
.contact-icon{
  width:46px;height:46px;border-radius:50%;flex-shrink:0;
  background:var(--maroon-900);color:var(--gold-500);
  display:flex;align-items:center;justify-content:center;
}
.contact-info-card h4{font-family:var(--font-display);color:var(--maroon-900);font-size:1.02rem;margin:0 0 6px;}
.contact-info-card p{font-size:.86rem;color:var(--ink-600);line-height:1.5;margin:0;}
.contact-info-card p.muted{color:var(--ink-400);font-size:.8rem;margin-top:6px;}

.find-us h3{font-size:1.3rem;color:var(--maroon-900);margin-bottom:6px;}
.find-us > p{font-size:.9rem;color:var(--ink-600);margin:0 0 16px;}
.map-frame{
  position:relative;height:280px;border-radius:var(--radius-md);
  overflow:hidden;border:1px solid var(--border-soft);
  background:
    linear-gradient(#e9e4d6 1px,transparent 1px) 0 0/34px 34px,
    linear-gradient(90deg,#e9e4d6 1px,transparent 1px) 0 0/34px 34px,
    #f2eee2;
}
.map-pin-card{
  position:absolute;top:46%;left:38%;transform:translate(-50%,-100%);
  background:#fff;border-radius:8px;box-shadow:0 8px 20px rgba(0,0,0,.15);
  padding:10px 14px;font-size:.8rem;min-width:170px;
}
.map-pin-card strong{display:block;color:var(--maroon-900);font-size:.85rem;margin-bottom:2px;}
.map-pin-card a{color:var(--maroon-800);font-weight:600;font-size:.78rem;}
.map-pin-dot{
  position:absolute;top:46%;left:38%;transform:translate(-50%,-4px);
  color:#c0392b;
}
.map-label{position:absolute;font-size:.78rem;color:var(--ink-600);font-weight:600;}
.map-zoom{
  position:absolute;right:14px;bottom:14px;
  display:flex;flex-direction:column;gap:2px;
  background:#fff;border-radius:6px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.map-zoom button{width:32px;height:32px;font-size:1.1rem;color:var(--ink-600);}
.map-zoom button:first-child{border-bottom:1px solid var(--border-soft);}

.contact-form-card{
  background:#fff;border:1px solid var(--border-soft);
  border-radius:var(--radius-md);padding:32px;
  box-shadow:var(--shadow-card);
}
.contact-form-card h2{font-size:1.4rem;color:var(--maroon-900);margin-bottom:6px;}
.contact-form-card > p{font-size:.88rem;color:var(--ink-600);margin:0 0 22px;}
.form-field{margin-bottom:18px;}
.form-field label{
  display:block;font-size:.85rem;font-weight:700;color:var(--ink-900);margin-bottom:7px;
}
.form-field label .req{color:#b5342a;}
.form-field input,
.form-field select,
.form-field textarea{
  width:100%;padding:12px 14px;border-radius:8px;
  border:1px solid var(--border-soft);background:var(--cream-100);
  font-family:inherit;font-size:.9rem;color:var(--ink-900);
}
.form-field textarea{resize:vertical;min-height:110px;}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  outline:none;border-color:var(--gold-600);background:#fff;
}
.contact-form-card .btn-gold{width:100%;justify-content:center;}

/* ===================== GALLERY PAGE ===================== */
.gallery-page-section{padding-top:48px;}
.gallery-page-heading h2{font-size:1.7rem;color:var(--maroon-900);margin-bottom:6px;}
.gallery-page-heading p{font-size:.92rem;color:var(--ink-600);margin:0 0 26px;}
.gallery-tile-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
}
.gallery-tile{
  position:relative;aspect-ratio:4/3;border-radius:var(--radius-md);
  overflow:hidden;background:linear-gradient(150deg,#cdbf9c,#8a9aa4);
}
.gallery-tile::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,5,7,.78) 0%,rgba(20,5,7,.15) 45%,transparent 65%);
}
.tile-label{
  position:absolute;left:16px;right:16px;bottom:14px;z-index:1;
  display:flex;align-items:center;justify-content:space-between;
  color:#fff;font-weight:700;font-size:.98rem;
}
.tile-count{
  display:flex;align-items:center;gap:5px;
  font-size:.82rem;font-weight:600;color:#f0e2c4;
}
.t1{background:linear-gradient(150deg,#e3ddc9,#9fb0b8);}
.t2{background:linear-gradient(150deg,#a9c1de,#5b7592);}
.t3{background:linear-gradient(150deg,#5a1a20,#2a0c10);}
.t4{background:linear-gradient(150deg,#c7bda4,#7d8a95);}
.t5{background:linear-gradient(150deg,#7d9a5f,#3d5230);}
.t6{background:linear-gradient(150deg,#c6b79b,#8a7562);}
.t7{background:linear-gradient(150deg,#3a2e40,#171018);}
.t8{background:linear-gradient(150deg,#d9ddd0,#8a9a86);}
.t9{background:linear-gradient(150deg,#d9c9a3,#7c6a4f);}
.t10{background:linear-gradient(150deg,#6b1a22,#33090d);}
.t11{background:linear-gradient(150deg,#7a8a5f,#3a4a2c);}
.t12{background:linear-gradient(150deg,#e6c98a,#8a6a4f);}

/* ===================== CONTACT PAGE ===================== */
.contact-section{padding-top:48px;}
.contact-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:32px;align-items:start;}
.contact-heading{
  font-size:1.5rem;color:var(--maroon-900);
  border-left:4px solid var(--gold-500);padding-left:14px;
  margin-bottom:6px;
}
.contact-sub{color:var(--ink-600);font-size:.92rem;margin:0 0 22px;}
.contact-info-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:36px;
}
.contact-info-card{
  background:#fff;border:1px solid var(--border-soft);
  border-radius:var(--radius-md);padding:18px;
  display:flex;gap:14px;align-items:flex-start;
}
.contact-icon{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  background:var(--maroon-900);color:var(--gold-500);
  display:flex;align-items:center;justify-content:center;
}
.contact-info-card h3{font-size:.98rem;color:var(--maroon-900);margin-bottom:4px;}
.contact-info-card p{font-size:.85rem;color:var(--ink-900);line-height:1.5;margin:0;}
.contact-info-card .muted{color:var(--ink-400);font-size:.8rem;}

.find-us-heading{margin-top:8px;}
.map-placeholder{
  position:relative;height:280px;border-radius:var(--radius-md);
  overflow:hidden;border:1px solid var(--border-soft);
  background:
    linear-gradient(0deg,rgba(0,0,0,.03),rgba(0,0,0,.03)),
    repeating-linear-gradient(0deg,#e7e2d6 0 2px,#f2eee2 2px 40px),
    repeating-linear-gradient(90deg,#e7e2d6 0 2px,#f2eee2 2px 40px);
}
.map-pin{
  position:absolute;top:46%;left:38%;transform:translate(-50%,-100%);
  color:#c0392b;
}
.map-card{
  position:absolute;top:38%;left:44%;
  background:#fff;padding:10px 14px;border-radius:8px;
  box-shadow:0 6px 18px rgba(0,0,0,.15);
  font-size:.85rem;line-height:1.4;
}
.map-card a{color:#1a73e8;font-size:.8rem;display:block;margin-top:2px;}
.map-zoom{
  position:absolute;bottom:14px;right:14px;
  display:flex;flex-direction:column;
  background:#fff;border-radius:6px;overflow:hidden;
  box-shadow:0 4px 10px rgba(0,0,0,.12);
}
.map-zoom button{
  width:32px;height:32px;font-size:1.1rem;color:var(--ink-900);
  border-bottom:1px solid var(--border-soft);
}
.map-zoom button:last-child{border-bottom:none;}

.contact-form-card{
  background:#fff;border:1px solid var(--border-soft);
  border-radius:var(--radius-md);padding:28px;
  box-shadow:var(--shadow-card);
}
.contact-form{display:flex;flex-direction:column;gap:16px;}
.contact-form label{
  font-size:.88rem;font-weight:600;color:var(--ink-900);
  display:flex;flex-direction:column;gap:6px;
}
.req{color:#c0392b;}
.contact-form input,
.contact-form select,
.contact-form textarea{
  font:inherit;font-size:.9rem;color:var(--ink-900);
  padding:11px 14px;border:1px solid var(--border-soft);
  border-radius:8px;background:var(--cream-100);
  resize:vertical;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  outline:none;border-color:var(--gold-600);background:#fff;
}
.contact-form button{justify-content:center;margin-top:4px;}

/* ===================== GALLERY PAGE ===================== */
.no-eyebrow{margin-top:0;}
.gallery-page-section{padding-top:48px;}
.gallery-page-sub{margin-top:-14px;margin-bottom:28px;}
.gallery-tile-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
}
.gallery-tile{
  position:relative;aspect-ratio:4/3;border-radius:var(--radius-md);
  overflow:hidden;display:flex;align-items:flex-end;
  background:linear-gradient(150deg,#cdbf9c,#8a9aa4);
}
.gallery-tile::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.65) 0%,rgba(0,0,0,0) 55%);
}
.tile-label{
  position:relative;z-index:1;color:#fff;font-weight:700;
  font-size:.92rem;padding:14px 16px;
}
.tile-count{
  position:absolute;z-index:1;right:14px;bottom:14px;
  display:flex;align-items:center;gap:5px;
  color:#fff;font-size:.8rem;font-weight:600;
}
.t1{background:linear-gradient(150deg,#e3ddc9,#9fb0b8);}
.t2{background:linear-gradient(150deg,#a9c4e0,#6d84a8);}
.t3{background:linear-gradient(150deg,#7d1a24,#3a0c11);}
.t4{background:linear-gradient(150deg,#c9bfa8,#6b6153);}
.t5{background:linear-gradient(150deg,#8fae7c,#4c6b45);}
.t6{background:linear-gradient(150deg,#c6b79b,#8a7562);}
.t7{background:linear-gradient(150deg,#3a2e40,#171018);}
.t8{background:linear-gradient(150deg,#dce6e0,#a9bdb4);}
.t9{background:linear-gradient(150deg,#d9c9a3,#7c6a4f);}
.t10{background:linear-gradient(150deg,#5b1c22,#2a0d10);}
.t11{background:linear-gradient(150deg,#8b9b7e,#3f4a3a);}
.t12{background:linear-gradient(150deg,#e3b98f,#a86f4a);}

/* ===================== PROFILE PAGE ===================== */
.profile-cover{height:220px;position:relative;overflow:hidden;}
.profile-cover-photo{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.4) 100%),
    url(assets/profile-cover.png);
  background-size: cover;
}
.profile-header-wrap{background:var(--cream-100);}
.profile-header{
  max-width:1440px;margin:0 auto;padding:0 6vw;
  display:flex;align-items:flex-end;gap:22px;flex-wrap:wrap;
  transform:translateY(-56px);
  padding-bottom:16px;
}
.profile-avatar-lg{
  width:180px;
  height:180px;
  border-radius:50%;
  border:5px solid #fff;box-shadow:var(--shadow-card);
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background-color:var(--maroon-800);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  color:#fff;
  font-family:var(--font-display);
  font-size:2.6rem;
  font-weight:700;
  overflow:hidden;
}
.profile-heading{flex:1;min-width:220px;}
.profile-heading h1{font-size:1.9rem;color:var(--maroon-900);margin-bottom:4px;}
.profile-role{font-size:1rem;font-weight:600;color:var(--ink-900);margin:0 0 8px;}
.profile-meta{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-size:.85rem;color:var(--ink-600);
}
.profile-meta svg{color:var(--gold-600);}
.meta-sep{color:var(--ink-400);margin:0 4px;}
.profile-actions{display:flex;gap:10px;align-items:center;padding-bottom:6px;}

.profile-section{padding-top:0;}
.profile-grid{display:grid;grid-template-columns:2fr 1fr;gap:28px;}
.profile-panel{
  background:#fff;border:1px solid var(--border-soft);
  border-radius:var(--radius-md);padding:26px;margin-bottom:24px;
  box-shadow:var(--shadow-card);
}
.small-heading{font-size:1.1rem;margin-bottom:14px;}
.profile-about{font-size:.92rem;color:var(--ink-600);line-height:1.7;margin:0;}

.timeline{display:flex;flex-direction:column;gap:22px;}
.timeline-item{display:flex;gap:14px;}
.timeline-dot{
  width:12px;height:12px;border-radius:50%;
  background:var(--gold-500);border:2px solid var(--maroon-900);
  margin-top:6px;flex-shrink:0;
}
.timeline-body h3{font-size:.98rem;color:var(--maroon-900);margin-bottom:4px;}
.timeline-date{font-size:.8rem;color:var(--ink-400);margin:0 0 6px;}
.timeline-body p{font-size:.88rem;color:var(--ink-600);line-height:1.5;margin:0;}

.sidebar-row{
  display:flex;align-items:center;gap:8px;
  font-size:.87rem;color:var(--ink-900);margin:0 0 12px;
}
.sidebar-row svg{color:var(--gold-600);flex-shrink:0;}
.tag-row{display:flex;flex-wrap:wrap;gap:8px;}
.tag{
  background:var(--cream-200);color:var(--maroon-800);
  font-size:.78rem;font-weight:600;
  padding:6px 12px;border-radius:999px;
}
.profile-quote{
  font-family:var(--font-display);font-style:italic;
  font-size:.95rem;color:var(--maroon-900);line-height:1.5;margin:0;
}

/* ===================== EVENT DETAILS PAGE ===================== */
.event-banner{position:relative;height:280px;overflow:hidden;}
.event-banner-photo{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(75,15,20,.85) 0%,rgba(75,15,20,.35) 55%,rgba(75,15,20,.15) 100%),
    repeating-linear-gradient(90deg,#7c8d78 0 3%,#8fa08a 3% 6%),
    linear-gradient(180deg,#bcd4e6 0%,#dce9ef 45%,#e7ddc2 46%,#cdbf95 100%);
}
.event-banner-overlay{
  position:relative;z-index:1;max-width:640px;
  padding:70px 0 40px 6vw;color:#fff;
}
.event-tag{
  display:inline-block;background:var(--gold-500);color:var(--maroon-900);
  font-size:.75rem;font-weight:700;padding:5px 14px;border-radius:999px;
  margin-bottom:12px;
}
.event-banner-overlay h1{font-size:2.4rem;color:#fdf8ee;margin-bottom:10px;}
.event-banner-overlay p{font-size:.98rem;color:#f0e6e0;line-height:1.6;margin:0;max-width:480px;}

.event-details-section{padding-top:48px;}
.agenda-list{display:flex;flex-direction:column;gap:18px;}
.agenda-item{display:flex;gap:16px;}
.agenda-time{
  flex-shrink:0;width:84px;font-size:.85rem;font-weight:700;
  color:var(--maroon-800);padding-top:2px;
}
.agenda-item h3{font-size:.95rem;color:var(--ink-900);margin-bottom:4px;}
.agenda-item p{font-size:.85rem;color:var(--ink-600);margin:0;line-height:1.5;}

.small-map{height:220px;}
.event-info-card .sidebar-row{margin-bottom:14px;}
.event-register-btn{width:100%;justify-content:center;margin-top:6px;}
.maroon-social{background:var(--maroon-900);color:#fff;}
.maroon-social:hover{background:var(--gold-500);color:var(--maroon-900);}

/* ===================== ACCOUNT / UPDATE PROFILE PAGE ===================== */
.account-section{padding-top:48px;}
.account-grid{display:grid;grid-template-columns:240px 1fr;gap:28px;align-items:start;}
.account-tabs{
  display:flex;flex-direction:column;gap:4px;
  background:#fff;border:1px solid var(--border-soft);
  border-radius:var(--radius-md);padding:10px;
}
.account-tab{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;border-radius:8px;
  font-size:.88rem;font-weight:600;color:var(--ink-600);
}
.account-tab svg{color:var(--ink-400);flex-shrink:0;}
.account-tab:hover{background:var(--cream-200);}
.account-tab.active{background:var(--maroon-900);color:#fff;}
.account-tab.active svg{color:var(--gold-500);}

.account-panel{
  background:#fff;border:1px solid var(--border-soft);
  border-radius:var(--radius-md);padding:28px;
  box-shadow:var(--shadow-card);
}
.account-photo-row{
  display:flex;align-items:center;gap:18px;
  margin-bottom:26px;padding-bottom:26px;
  border-bottom:1px solid var(--border-soft);
}
.account-avatar{
  width:76px;height:76px;border-radius:50%;flex-shrink:0;
}
.photo-hint{font-size:.78rem;color:var(--ink-400);margin:8px 0 0;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.account-form-actions{
  display:flex;justify-content:flex-end;gap:12px;margin-top:6px;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width:1024px){
  .section-grid,.gallery-grid,.contact-grid,.profile-grid,.account-grid{grid-template-columns:1fr;}
  .event-cards,.events-grid{grid-template-columns:1fr 1fr;}
  .profile-header{transform:none;padding-top:20px;}
  .contact-grid{grid-template-columns:1fr;}
  .story-cards{grid-template-columns:1fr 1fr;}
  .stats-grid{grid-template-columns:1fr 1fr;}
  .gallery-strip{grid-template-columns:repeat(3,1fr);}
  .footer-inner{grid-template-columns:1fr 1fr;}
}
@media (max-width:720px){
  .main-nav{display:none;}
  .hero{min-height:auto;}
  .hero-content{padding:40px 6vw;max-width:100%;}
  .hero-content h1{font-size:2rem;}
  .hero-motto{display:none;}
  .event-cards,.story-cards,.stats-grid,.events-grid{grid-template-columns:1fr;}
  .page-hero-content h1{font-size:2.2rem;}
  .contact-info-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .event-banner-overlay h1{font-size:1.8rem;}
  .profile-actions{width:100%;}
  .gallery-strip{grid-template-columns:repeat(2,1fr);}
  .footer-inner{grid-template-columns:1fr;}
  .announcements{flex-wrap:wrap;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .btn{transition:none;}
}


/* =========================================================
   HEADER LOGIN / USER DROPDOWN
========================================================= */

.header-inner{
  position:relative;
}

.login-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:78px;
  padding:10px 18px;
  border-radius:999px;
  background:var(--maroon-900);
  color:#fff !important;
  font-size:.88rem;
  font-weight:700;
  transition:background .2s ease,transform .2s ease;
}

.login-button:hover{
  background:var(--maroon-800);
  transform:translateY(-1px);
}

.user-menu{
  position:relative;
}

.user-menu-btn{
  border:0;
  cursor:pointer;
  font-family:inherit;
}

.user-menu-btn:hover,
.user-menu-btn.active{
  background:#eadfc9;
}

.user-menu-btn svg{
  transition:transform .2s ease;
}

.user-menu-btn.active svg{
  transform:rotate(180deg);
}

.user-dropdown{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  width:190px;
  padding:8px;
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius:12px;
  box-shadow:0 14px 35px rgba(75,15,20,.16);
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
  z-index:100;
}

.user-dropdown.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.user-dropdown a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  border-radius:8px;
  color:var(--ink-900);
  font-size:.88rem;
  font-weight:600;
}

.user-dropdown a:hover{
  background:var(--cream-200);
  color:var(--maroon-800);
}

.user-dropdown .logout-link{
  border-top:1px solid var(--border-soft);
  margin-top:5px;
  padding-top:13px;
  color:#a32727;
}

.user-dropdown .logout-link:hover{
  background:#fff1f1;
  color:#8c1717;
}

.dropdown-icon{
  width:22px;
  text-align:center;
  color:var(--gold-600);
  font-weight:700;
}

.mobile-menu-btn{
  display:none;
  width:40px;
  height:40px;
  padding:8px;
  border-radius:9px;
  background:var(--cream-200);
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  flex-shrink:0;
}

.mobile-menu-btn span{
  display:block;
  width:20px;
  height:2px;
  border-radius:3px;
  background:var(--maroon-900);
  transition:transform .2s ease,opacity .2s ease;
}

.mobile-menu-btn.active span:nth-child(1){
  transform:translateY(6px) rotate(45deg);
}

.mobile-menu-btn.active span:nth-child(2){
  opacity:0;
}

.mobile-menu-btn.active span:nth-child(3){
  transform:translateY(-6px) rotate(-45deg);
}


/* =========================================================
   NOTIFICATION SCROLL
========================================================= */

.announce-track{
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  scrollbar-width:none;
  min-width:0;
}

.announce-track::-webkit-scrollbar{
  display:none;
}

.announce-track a{
  flex:0 0 auto;
}

.announce-track .dot{
  flex:0 0 auto;
}


/* =========================================================
   MOBILE HEADER
========================================================= */

@media (max-width:720px){

  .site-header{
    position:sticky;
    top:0;
  }

  .header-inner{
    padding:10px 5vw;
    gap:8px;
  }

  .brand{
    min-width:0;
    flex:1;
    gap:8px;
  }

  .brand-logo{
    width:38px !important;
    height:38px !important;
  }

  .brand-text{
    min-width:0;
  }

  .brand-title{
    font-size:.88rem;
    line-height:1.15;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .brand-sub{
    font-size:.55rem;
    margin-top:2px;
  }

  .header-actions{
    gap:6px;
    flex-shrink:0;
  }

  .header-actions .icon-btn{
    width:36px;
    height:36px;
  }

  .header-actions > .icon-btn:first-child{
    display:none;
  }

  .mobile-menu-btn{
    display:flex;
    order:-1;
  }

  .user-chip{
    padding:5px;
    gap:5px;
  }

  .user-chip > span{
    display:none;
  }

  .user-chip svg{
    width:12px;
    height:12px;
  }

  .avatar-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #6f0815;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    font-family: "Inter", sans-serif;
}

  .login-button{
    min-width:65px;
    padding:9px 13px;
    font-size:.82rem;
  }

  .main-nav{
    display:none !important;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    width:100%;
    padding:10px 5vw 14px;
    background:#fffdf9;
    border-bottom:1px solid var(--border-soft);
    box-shadow:0 12px 20px rgba(75,15,20,.10);
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    z-index:90;
  }

  .main-nav.mobile-open{
    display:flex !important;
  }

  .main-nav a{
    width:100%;
    padding:12px 14px;
    border-radius:8px;
  }

  .main-nav a.active{
    background:var(--maroon-900);
  }


  /* Announcement */

  .announcements{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:9px;
    padding:10px 5vw;
  }

  .announce-label{
    grid-column:1 / -1;
    justify-self:start;
    padding:8px 15px;
    padding-right:22px;
    font-size:.78rem;
  }

  .announce-track{
    width:100%;
    min-width:0;
    font-size:.78rem;
    gap:10px;
  }

  .announce-nav{
    gap:5px;
  }

  .announce-nav button{
    width:28px;
    height:28px;
  }


  /* Hero */

  .hero{
    min-height:480px;
    background:
      linear-gradient(
        180deg,
        rgba(75,15,20,.88),
        rgba(75,15,20,.62)
      );
  }

  .hero-photo{
    opacity:.7;
  }

  .hero-content{
    padding:42px 5vw 50px;
  }

  .hero-content h1{
    font-size:1.9rem;
  }

  .hero-desc{
    font-size:.9rem;
  }

  .hero-buttons{
    width:100%;
  }

  .hero-buttons .btn{
    width:100%;
    justify-content:center;
  }


  /* Sections */

  .section{
    padding:44px 5vw;
  }

  .section-heading{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
    margin-bottom:20px;
  }

  .section-heading h2{
    font-size:1.45rem;
  }

  .event-cards{
    grid-template-columns:1fr;
    gap:16px;
  }

  .event-card{
    width:100%;
  }

  .event-photo{
    height:145px;
  }

  .welcome-card{
    padding:24px;
  }

  .stats-grid{
    grid-template-columns:1fr 1fr;
    gap:12px;
  }

  .stat-card{
    padding:17px;
    gap:10px;
  }

  .stat-icon{
    width:44px;
    height:44px;
  }

  .stat-num{
    font-size:1.25rem;
  }

  .stat-label{
    font-size:.75rem;
  }

  .story-cards{
    grid-template-columns:1fr;
    gap:16px;
  }

  .gallery-strip{
    grid-template-columns:repeat(2,1fr);
  }

  .gallery-grid{
    grid-template-columns:1fr;
  }

  .footer-inner{
    grid-template-columns:1fr;
    padding:42px 5vw 28px;
  }

  .footer-bottom{
    padding:16px 5vw;
    flex-direction:column;
    align-items:flex-start;
  }

  .footer-legal{
    flex-wrap:wrap;
    gap:12px 18px;
  }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width:420px){

  .brand-title{
    font-size:.78rem;
  }

  .brand-sub{
    font-size:.5rem;
  }

  .header-actions .icon-btn{
    width:34px;
    height:34px;
  }

  .mobile-menu-btn{
    width:36px;
    height:36px;
  }

  .avatar-circle{
    width:28px;
    height:28px;
  }

  .login-button{
    min-width:60px;
    padding:8px 11px;
  }

  .stats-grid{
    grid-template-columns:1fr;
  }

  .hero-content h1{
    font-size:1.7rem;
  }

  .hero{
    min-height:450px;
  }

}


/* =========================================================
   FINAL HEADER / ANNOUNCEMENT FIXES
========================================================= */

.login-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
}

.login-button svg,
.avatar-circle svg{
  display:block;
  flex-shrink:0;
}

.avatar-circle{
  color:#fff;
}

.user-menu-btn{
  min-width:42px;
}

.user-dropdown{
  z-index:1000;
}

/* Announcement viewport + seamless marquee */
.announce-track{
  position:relative;
  display:block;
  overflow:hidden !important;
  white-space:nowrap;
  min-width:0;
  width:100%;
  scrollbar-width:none;
}

.announce-track::-webkit-scrollbar{
  display:none;
}

.announce-marquee{
  display:flex;
  align-items:center;
  width:max-content;
  min-width:max-content;
  will-change:transform;
}

.announce-set{
  display:flex;
  align-items:center;
  flex:0 0 auto;
}

.announce-set a{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  color:inherit;
  text-decoration:none;
}

.announce-set .dot{
  display:inline-flex;
  flex:0 0 auto;
  margin:0 14px;
  color:var(--gold-600);
}

@media (max-width:720px){
  .login-button{
    min-width:42px;
    width:42px;
    height:36px;
    padding:8px;
    gap:0;
  }

  .login-button span{
    display:none;
  }

  .user-menu-btn{
    width:42px;
    height:36px;
    justify-content:center;
  }

  .user-menu-btn svg:last-child{
    display:none;
  }

  .user-dropdown{
    top:calc(100% + 8px);
    right:0;
    width:180px;
  }

  .announce-track{
    font-size:.78rem;
  }
}

/* =====================================================
   USER-PROVIDED HOMEPAGE OVERRIDES
   ===================================================== */

/* =====================================================
       LOGO
    ===================================================== */

.brand-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}


/* =====================================================
       EVENT FALLBACK IMAGE
    ===================================================== */

.event-photo-default {
    background:
        linear-gradient(135deg,
            #6f0815,
            #ab0f23);
}


/* =====================================================
       EMPTY EVENTS
    ===================================================== */

.no-events {
    width: 100%;
    padding: 35px 20px;
    text-align: center;
    border: 1px solid #eadede;
    border-radius: 12px;
    background: #fff;
}

.no-events p {
    margin: 0;
    color: #777;
    font-size: 14px;
}


/* =====================================================
       NOTIFICATION EMPTY
    ===================================================== */

.announce-empty {
    color: #777;
}


/* =====================================================
       USER MENU
    ===================================================== */

.user-chip-link {
    color: inherit;
    text-decoration: none;
}

.user-chip-link:hover {
    text-decoration: none;
}


/* =====================================================
       MOBILE
    ===================================================== */

@media (max-width: 768px) {

    .brand-logo {
        width: 42px;
        height: 42px;
    }

}

/* =====================================================
   FINAL RESPONSIVE HOMEPAGE OVERRIDES
===================================================== */

/* Desktop: use full section width for four event cards */
.section-grid {
    grid-template-columns: 1fr !important;
}

/* Desktop: four event cards in one row */
.event-cards {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
    width: 100%;
}

.event-card {
    min-width: 0;
    width: 100%;
}

.event-photo {
    min-height: 190px;
}

/* Full announcement ticker */
.announce-track {
    width: 100% !important;
    overflow: hidden !important;
    position: relative;
    white-space: nowrap;
}

.announce-marquee {
    display: flex !important;
    width: max-content !important;
    min-width: max-content !important;
    align-items: center;
    will-change: transform;
}

.announce-set {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center;
    width: max-content !important;
    white-space: nowrap;
}

.announce-set a {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Header brand: never hide the university name */
.brand-text {
    min-width: 0;
}

.brand-title {
    display: block;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* User icon button */
.user-menu-btn {
    cursor: pointer;
}

/* Mobile */
@media (max-width: 768px) {

    .site-header {
        min-height: 72px;
    }

    .header-inner {
        min-height: 72px !important;
        gap: 8px !important;
    }

    .brand {
        flex: 1 1 auto;
        min-width: 0;
        gap: 8px !important;
    }

    .brand-logo {
        width: 43px !important;
        height: 43px !important;
        flex: 0 0 43px;
    }

    .brand-text {
        width: auto !important;
        max-width: 190px !important;
        min-width: 0;
    }

    .brand-title {
        font-size: 13px !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        display: block !important;
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: unset !important;
    }

    .brand-sub {
        font-size: 9px !important;
        line-height: 1.2 !important;
        display: block;
    }

    .header-actions {
        flex: 0 0 auto;
        gap: 6px !important;
    }

    .header-actions .icon-btn,
    .header-actions .mobile-menu-btn,
    .header-actions .user-chip {
        flex: 0 0 40px;
        width: 40px !important;
        height: 40px !important;
    }

    /* On mobile keep notification + person, hide search */
    .header-actions > .icon-btn[aria-label="Search"] {
        display: none !important;
    }

    .user-chip > span,
    .user-chip > svg:last-child {
        display: none !important;
    }

    .avatar-circle {
        margin: 0 !important;
    }

    /* Four-card desktop becomes one-card-at-a-time horizontal slider */
    .event-cards {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 14px !important;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 8px;
    }

    .event-cards::-webkit-scrollbar {
        display: none;
    }

    .event-card {
        flex: 0 0 88% !important;
        width: 88% !important;
        max-width: 88% !important;
        scroll-snap-align: start;
    }

    .event-photo {
        min-height: 190px;
    }

    /* Announcement full-width scrolling area */
    .announcements {
        width: 100% !important;
    }

    .announce-track {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .announce-label {
        flex: 0 0 auto;
    }
}

@media (max-width: 420px) {

    .brand-text {
        max-width: 165px !important;
    }

    .brand-title {
        font-size: 12.5px !important;
    }

    .brand-logo {
        width: 40px !important;
        height: 40px !important;
        flex-basis: 40px;
    }

    .header-actions {
        gap: 4px !important;
    }

    .header-actions .icon-btn,
    .header-actions .mobile-menu-btn,
    .header-actions .user-chip {
        width: 38px !important;
        height: 38px !important;
        flex-basis: 38px;
    }

    .event-card {
        flex-basis: 92% !important;
        width: 92% !important;
        max-width: 92% !important;
    }
}


/* =========================================================
   MOBILE DRAWER MENU - EVENTS / ALL PAGES FIX
   Prevent mobile navigation from appearing as raw text
========================================================= */

.mobile-nav-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(36,16,18,.45);
  z-index:9998;
  opacity:0;
  transition:opacity .2s ease;
}

.mobile-nav-overlay.active{
  display:block;
  opacity:1;
}

.mobile-nav{
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:280px;
  max-width:86vw;
  height:100vh;
  background:#fffdf9;
  z-index:9999;
  padding:22px 18px;
  box-shadow:12px 0 30px rgba(75,15,20,.18);
  transform:translateX(-105%);
  transition:transform .25s ease;
  overflow-y:auto;
}

.mobile-nav.active{
  transform:translateX(0);
}

.mobile-nav-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:18px;
  border-bottom:1px solid var(--border-soft);
}

.mobile-nav-title{
  color:var(--maroon-900);
  font-family:var(--font-display);
  font-size:1.15rem;
  font-weight:700;
}

.mobile-nav-close{
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--cream-200);
  color:var(--maroon-900);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.25rem;
  line-height:1;
  flex-shrink:0;
}

.mobile-nav-links{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:18px;
}

.mobile-nav-links a{
  display:flex;
  align-items:center;
  width:100%;
  padding:12px 14px;
  border-radius:8px;
  color:var(--ink-900);
  font-size:.9rem;
  font-weight:600;
  transition:background .15s ease,color .15s ease;
}

.mobile-nav-links a:hover,
.mobile-nav-links a.active{
  background:var(--maroon-900);
  color:#fff;
}

/* =========================================================
   HEADER IMAGE / BRAND FIX
========================================================= */

.brand-logo{
  width:58px;
  height:58px;
  object-fit:contain;
  flex-shrink:0;
}

/* =========================================================
   MOBILE HEADER + DRAWER
========================================================= */

@media (max-width:720px){

  .mobile-menu-btn{
    display:flex !important;
    order:-1;
  }

  .mobile-nav{
    display:block;
  }

  .header-inner{
    min-height:64px;
  }

  .brand-logo{
    width:40px;
    height:40px;
  }

  .brand-title{
    max-width:190px;
  }

}

/* =========================================================
   DESKTOP - NEVER SHOW DRAWER MENU
========================================================= */

@media (min-width:721px){
  .mobile-nav,
  .mobile-nav-overlay{
    display:none !important;
  }
}

/* =========================================================
   EVENTS PAGE MOBILE SPACING
========================================================= */

@media (max-width:720px){

  .page-hero{
    min-height:220px;
  }

  .page-hero-content{
    padding:38px 5vw;
  }

  .page-hero-content h1{
    font-size:2.2rem;
  }

  .events-list-section{
    padding-top:38px;
  }

  .events-list-heading{
    font-size:1.45rem;
  }

  .event-card-full .event-photo{
    height:175px;
  }

  .event-card-full .event-body{
    padding:18px;
  }

}


/* =========================================================
   FINAL EVENT + WELCOME LAYOUT
   Desktop: 3 event cards + welcome card in the same row
   Mobile: horizontal event-card scrolling
   Header styles are intentionally not changed here
========================================================= */

/* Desktop */
@media (min-width:1025px){

  .section-grid{
    display:grid !important;
    grid-template-columns:minmax(0,3fr) minmax(300px,1.18fr) !important;
    gap:20px !important;
    align-items:stretch !important;
  }

  .section-grid > div:first-child{
    min-width:0;
  }

  .event-cards{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:18px !important;
    width:100% !important;
    align-items:stretch !important;
  }

  .event-card{
    width:100% !important;
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    height:100% !important;
  }

  .event-photo{
    height:155px !important;
    min-height:155px !important;
    flex-shrink:0;
  }

  .event-body{
    padding:17px !important;
    flex:1 !important;
    min-height:190px;
    display:flex;
    flex-direction:column;
  }

  .event-body h3{
    font-size:1.02rem !important;
    line-height:1.25 !important;
    margin-bottom:10px !important;
  }

  .event-meta{
    font-size:.82rem !important;
  }

  .event-body .link-arrow.small{
    margin-top:auto !important;
    padding-top:10px;
  }

  .welcome-card{
    width:100% !important;
    height:100% !important;
    min-height:345px !important;
    padding:30px !important;
  }

  .welcome-card h3{
    font-size:1.42rem !important;
    line-height:1.25 !important;
  }
}

/* Tablet */
@media (min-width:721px) and (max-width:1024px){

  .section-grid{
    grid-template-columns:1fr !important;
    gap:22px !important;
  }

  .event-cards{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:16px !important;
  }

  .event-photo{
    height:145px !important;
    min-height:145px !important;
  }

  .event-body{
    padding:15px !important;
    min-height:180px;
  }

  .welcome-card{
    min-height:260px !important;
    height:auto !important;
  }
}

/* Mobile */
@media (max-width:720px){

  /* Do not modify the mobile header here */

  .section-grid{
    display:flex !important;
    flex-direction:column !important;
    gap:24px !important;
  }

  .section-grid > div:first-child{
    width:100% !important;
    min-width:0 !important;
  }

  .section-heading{
    margin-bottom:18px !important;
  }

  .event-cards{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    width:100% !important;
    gap:14px !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    padding:2px 2px 12px !important;
    margin:0 !important;

    scroll-snap-type:x mandatory !important;
    scroll-behavior:smooth !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
  }

  .event-cards::-webkit-scrollbar{
    display:none !important;
  }

  .event-card{
    flex:0 0 91% !important;
    width:91% !important;
    min-width:91% !important;
    max-width:91% !important;

    height:auto !important;
    min-height:0 !important;

    scroll-snap-align:start !important;
    scroll-snap-stop:always !important;

    display:flex !important;
    flex-direction:column !important;
  }

  .event-photo{
    height:170px !important;
    min-height:170px !important;
    flex-shrink:0 !important;
  }

  .event-body{
    padding:19px !important;
    min-height:205px !important;
    flex:1 !important;
  }

  .event-body h3{
    font-size:1.12rem !important;
    line-height:1.3 !important;
    margin-bottom:12px !important;
  }

  .event-meta{
    font-size:.86rem !important;
    line-height:1.45 !important;
    margin-bottom:8px !important;
  }

  .event-body .link-arrow.small{
    margin-top:12px !important;
    padding-top:5px !important;
    font-size:.88rem !important;
  }

  .welcome-card{
    width:100% !important;
    height:auto !important;
    min-height:300px !important;
    padding:25px !important;
  }

  .welcome-card h3{
    font-size:1.35rem !important;
    line-height:1.3 !important;
  }

  .welcome-card p{
    font-size:.9rem !important;
  }
}

/* Small phones */
@media (max-width:420px){

  .event-cards{
    gap:12px !important;
    padding-right:4px !important;
  }

  .event-card{
    flex-basis:94% !important;
    width:94% !important;
    min-width:94% !important;
    max-width:94% !important;
  }

  .event-photo{
    height:160px !important;
    min-height:160px !important;
  }

  .event-body{
    padding:18px !important;
    min-height:195px !important;
  }

  .event-body h3{
    font-size:1.05rem !important;
  }

  .welcome-card{
    min-height:285px !important;
    padding:22px !important;
  }
}

/* =========================================================
   GALLERY PAGE
   Desktop: 10 folders per page
   Tablet: 6 folders per page
   Mobile: 5 folders per page
========================================================= */

.gallery-page-section{
    padding-top:48px;
    padding-bottom:70px;
}

.gallery-page-sub{
    margin-top:-14px;
    margin-bottom:28px;
}

.gallery-tile-grid{
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:20px !important;
    width:100%;
}

.gallery-tile{
    position:relative !important;
    isolation:isolate;
    display:flex !important;
    align-items:flex-end !important;
    width:100% !important;
    min-width:0 !important;
    aspect-ratio:4 / 3 !important;
    overflow:hidden !important;
    border-radius:var(--radius-md) !important;
    background:#ddd;
    text-decoration:none;
    cursor:pointer;
    box-shadow:0 8px 22px rgba(75,15,20,.08);
    transition:transform .2s ease,box-shadow .2s ease;
}

.gallery-tile:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 30px rgba(75,15,20,.15);
}

.gallery-tile > img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    user-select:none;
    -webkit-user-select:none;
    -webkit-touch-callout:none;
    -webkit-user-drag:none;
    pointer-events:none;
    transition:transform .3s ease,filter .25s ease;
}

.gallery-tile:hover > img{
    transform:scale(1.035);
}

.gallery-tile::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:linear-gradient(to top,rgba(20,5,7,.82),rgba(20,5,7,.25) 45%,transparent 70%);
}

.gallery-tile.gallery-guest > img,
.gallery-tile.gallery-guest:hover > img{
    filter:blur(9px);
    transform:scale(1.08);
}

.gallery-login-overlay{
    position:absolute;
    left:50%;
    top:50%;
    z-index:5;
    transform:translate(-50%,-50%);
    padding:9px 13px;
    border-radius:7px;
    background:rgba(255,255,255,.95);
    color:var(--maroon-800);
    font-size:.74rem;
    font-weight:700;
    white-space:nowrap;
    box-shadow:0 5px 18px rgba(0,0,0,.15);
}

.gallery-tile .tile-label{
    position:relative;
    z-index:3;
    min-width:0;
    flex:1;
    padding:14px 10px 14px 16px;
    overflow:hidden;
    color:#fff;
    font-size:.88rem;
    font-weight:700;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.gallery-tile .tile-count{
    position:absolute;
    right:14px;
    bottom:14px;
    z-index:3;
    display:flex;
    align-items:center;
    gap:5px;
    color:#f0e2c4;
    font-size:.78rem;
    font-weight:600;
}

.gallery-empty{
    width:100%;
    padding:70px 20px;
    text-align:center;
    border:1px dashed var(--border-soft);
    border-radius:var(--radius-md);
    background:#fff;
}

.gallery-empty h3{
    margin:0 0 7px;
    color:var(--maroon-900);
    font-size:1.25rem;
}

.gallery-empty p{
    margin:0;
    color:var(--ink-600);
    font-size:.85rem;
}

.gallery-pagination{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:7px;
    margin-top:30px;
}

.gallery-page-btn{
    width:38px;
    height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--border-soft);
    border-radius:8px;
    background:#fff;
    color:var(--maroon-800);
    font-size:.82rem;
    font-weight:700;
    text-decoration:none;
    transition:.2s ease;
}

.gallery-page-btn:hover{
    border-color:var(--maroon-800);
    background:var(--cream-200);
    color:var(--maroon-900);
}

.gallery-page-btn.active{
    border-color:var(--maroon-900);
    background:var(--maroon-900);
    color:#fff;
}

.gallery-page-btn.disabled{
    opacity:.35;
    pointer-events:none;
}

.gallery-page-arrow{
    font-size:1.1rem;
}

/* =========================================================
   GALLERY VIEW PAGE
========================================================= */

.gallery-view-section{
    padding-top:42px;
    padding-bottom:70px;
}

.gallery-view-top{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:25px;
}

.gallery-view-back{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-bottom:10px;
    color:var(--maroon-800);
    font-size:.88rem;
    font-weight:700;
    text-decoration:none;
}

.gallery-view-back:hover{
    color:var(--maroon-900);
}

.gallery-view-title{
    margin:0;
    color:var(--maroon-900);
    font-size:1.8rem;
}

.gallery-view-count{
    margin:6px 0 0;
    color:var(--ink-600);
    font-size:.88rem;
}

.gallery-photo-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
}

.gallery-photo-card{
    position:relative;
    aspect-ratio:4 / 3;
    overflow:hidden;
    border-radius:var(--radius-md);
    background:#ddd;
    cursor:pointer;
    user-select:none;
    -webkit-user-select:none;
    -webkit-touch-callout:none;
}

.gallery-photo-card img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    user-select:none;
    -webkit-user-select:none;
    -webkit-touch-callout:none;
    -webkit-user-drag:none;
    pointer-events:none;
    transition:transform .3s ease,filter .25s ease;
}

.gallery-photo-card:hover img{
    transform:scale(1.035);
}

.gallery-photo-card.guest img,
.gallery-photo-card.guest:hover img{
    filter:blur(9px);
    transform:scale(1.08);
}

.gallery-guest-lock{
    position:absolute;
    z-index:5;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:9px 13px;
    border-radius:7px;
    background:rgba(255,255,255,.95);
    color:var(--maroon-800);
    font-size:.74rem;
    font-weight:700;
    white-space:nowrap;
    box-shadow:0 5px 18px rgba(0,0,0,.15);
}

.protected-gallery{
    position:relative;
    overflow:hidden;
    user-select:none;
    -webkit-user-select:none;
    -webkit-touch-callout:none;
}

.protected-gallery img{
    user-select:none;
    -webkit-user-select:none;
    -webkit-user-drag:none;
    pointer-events:none;
}

.gallery-lightbox{
    position:fixed;
    inset:0;
    z-index:99999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:50px 80px;
    background:rgba(18,8,10,.96);
}

.gallery-lightbox.show{
    display:flex;
}

.gallery-lightbox-content{
    position:relative;
    width:auto;
    max-width:min(1100px,88vw);
    max-height:88vh;
    display:flex;
    align-items:center;
    justify-content:center;
}

.gallery-lightbox-content img{
    display:block;
    max-width:min(1100px,88vw);
    max-height:82vh;
    width:auto;
    height:auto;
    object-fit:contain;
    border-radius:6px;
    user-select:none;
    -webkit-user-select:none;
    -webkit-touch-callout:none;
    -webkit-user-drag:none;
    pointer-events:none;
}

.gallery-lightbox-content.guest-image img{
    filter:blur(9px);
    transform:scale(1.04);
}

.gallery-lightbox-login{
    position:absolute;
    z-index:5;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    padding:9px 14px;
    border-radius:7px;
    background:rgba(255,255,255,.95);
    color:var(--maroon-800);
    font-size:.74rem;
    font-weight:700;
    white-space:nowrap;
}

.gallery-lightbox-close{
    position:absolute;
    top:18px;
    right:22px;
    z-index:20;
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.22);
    border-radius:50%;
    background:rgba(255,255,255,.10);
    color:#fff;
    font-size:28px;
    line-height:1;
    cursor:pointer;
}

.gallery-lightbox-close:hover{
    background:rgba(255,255,255,.22);
}

.gallery-lightbox-nav{
    position:absolute;
    top:50%;
    z-index:20;
    transform:translateY(-50%);
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.22);
    border-radius:50%;
    background:rgba(255,255,255,.10);
    color:#fff;
    font-size:25px;
    cursor:pointer;
    transition:.2s ease;
}

.gallery-lightbox-nav:hover:not(:disabled){
    background:rgba(255,255,255,.24);
}

.gallery-lightbox-nav:disabled{
    opacity:.22;
    cursor:not-allowed;
}

.gallery-lightbox-prev{
    left:20px;
}

.gallery-lightbox-next{
    right:20px;
}

.gallery-lightbox-counter{
    position:absolute;
    left:50%;
    bottom:-35px;
    transform:translateX(-50%);
    color:#fff;
    font-size:.78rem;
    font-weight:700;
    white-space:nowrap;
}

.gallery-lightbox-open{
    overflow:hidden;
}

/* =========================================================
   HOMEPAGE GALLERY
========================================================= */

.homepage-gallery-strip{
    overflow:hidden;
}

.homepage-gallery-thumb{
    position:relative;
    overflow:hidden;
    display:block;
    background:#eee;
}

.homepage-gallery-thumb img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    user-select:none;
    -webkit-user-select:none;
    -webkit-touch-callout:none;
    -webkit-user-drag:none;
    transition:transform .3s ease;
}

.homepage-gallery-thumb:hover img{
    transform:scale(1.04);
}

/* Homepage gallery privacy for guests */
.homepage-gallery-thumb.guest img,
.homepage-gallery-thumb.guest:hover img{
    filter:blur(9px);
    transform:scale(1.08);
}

.homepage-gallery-thumb.guest{
    cursor:pointer;
}

.homepage-gallery-lock{
    position:absolute;
    z-index:5;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:9px 13px;
    border-radius:7px;
    background:rgba(255,255,255,.95);
    color:var(--maroon-800);
    font-size:.72rem;
    font-weight:700;
    white-space:nowrap;
    box-shadow:0 5px 18px rgba(0,0,0,.15);
}

.homepage-gallery-overlay{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    display:flex;
    flex-direction:column;
    gap:3px;
    padding:28px 12px 11px;
    color:#fff;
    background:linear-gradient(to top,rgba(20,5,7,.78),rgba(20,5,7,0));
}

.homepage-gallery-overlay strong{
    overflow:hidden;
    font-size:.75rem;
    font-weight:700;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.homepage-gallery-overlay small{
    font-size:.65rem;
    color:#f0e2c4;
}

.homepage-gallery-empty{
    grid-column:1 / -1;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:180px;
    border:1px dashed var(--border-soft);
    border-radius:var(--radius-md);
    background:#fff;
    color:var(--ink-600);
    font-size:.85rem;
}

/* =========================================================
   RESPONSIVE GALLERY
========================================================= */

@media (max-width:1024px) and (min-width:721px){

    .gallery-tile-grid{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    }

    .gallery-photo-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

@media (max-width:720px){

    .gallery-page-section{
        padding-top:35px;
        padding-bottom:50px;
    }

    .gallery-tile-grid{
        grid-template-columns:1fr !important;
        gap:14px !important;
    }

    .gallery-tile{
        aspect-ratio:4 / 3 !important;
        border-radius:9px !important;
    }

    .gallery-tile .tile-label{
        padding-left:14px;
        font-size:.88rem;
    }

    .gallery-tile .tile-count{
        right:13px;
        bottom:13px;
        font-size:.76rem;
    }

    .gallery-login-overlay{
        padding:8px 11px;
        font-size:.70rem;
    }

    .gallery-pagination{
        gap:5px;
        margin-top:22px;
    }

    .gallery-page-btn{
        width:35px;
        height:35px;
        font-size:.76rem;
    }

    .gallery-view-section{
        padding-top:30px;
        padding-bottom:45px;
    }

    .gallery-view-top{
        align-items:flex-start;
        flex-direction:column;
        gap:4px;
        margin-bottom:18px;
    }

    .gallery-view-title{
        font-size:1.45rem;
    }

    .gallery-photo-grid{
        grid-template-columns:1fr;
        gap:14px;
    }

    .gallery-photo-card{
        width:100%;
        aspect-ratio:4 / 3;
        border-radius:9px;
    }

    .gallery-lightbox{
        padding:20px 10px;
    }

    .gallery-lightbox-content{
        width:100%;
        max-width:100%;
        max-height:82vh;
    }

    .gallery-lightbox-content img{
        max-width:94vw;
        max-height:76vh;
        border-radius:4px;
    }

    .gallery-lightbox-close{
        top:12px;
        right:12px;
        width:40px;
        height:40px;
        font-size:25px;
    }

    .gallery-lightbox-nav{
        width:40px;
        height:40px;
    }

    .gallery-lightbox-prev{
        left:8px;
    }

    .gallery-lightbox-next{
        right:8px;
    }

    .homepage-gallery-strip{
        grid-template-columns:1fr;
        gap:12px;
    }

    .homepage-gallery-thumb{
        min-height:230px;
        aspect-ratio:4 / 3;
    }
}

@media (max-width:420px){

    .gallery-tile-grid{
        gap:12px !important;
    }

    .gallery-tile{
        aspect-ratio:4 / 3 !important;
    }

    .gallery-page-btn{
        width:33px;
        height:33px;
    }

    .homepage-gallery-thumb{
        min-height:210px;
    }
}
/* =========================================================
   ABOUT THE ALUMNI ASSOCIATION
   ========================================================= */

.about-alumni-section {
    padding: 70px 0;
}

.about-alumni-grid {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);

    gap: 58px;
    align-items: center;
}


/* =========================================================
   IMAGE
   ========================================================= */

.about-alumni-image-wrap {
    position: relative;

    min-height: 430px;

    overflow: hidden;

    border-radius: 18px;

    background: #f1e8dc;

    box-shadow:
        0 18px 45px rgba(55, 20, 24, 0.12);
}

.about-alumni-image {
    width: 100%;
    height: 100%;
    min-height: 430px;

    display: block;

    object-fit: cover;
}


/* IMAGE FALLBACK */

.about-alumni-image-fallback {
    position: absolute;
    inset: 0;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 30px;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #5a0b13 0%,
            #7c1822 50%,
            #b18b54 100%
        );

    color: #fff;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 2rem;
    font-weight: 700;
}

.about-alumni-image-wrap.image-missing
.about-alumni-image {
    display: none;
}

.about-alumni-image-wrap.image-missing
.about-alumni-image-fallback {
    display: flex;
}


/* =========================================================
   CONTENT
   ========================================================= */

.about-alumni-content {
    max-width: 650px;
}


/* SMALL LABEL */

.about-alumni-eyebrow {
    display: inline-block;

    margin-bottom: 12px;

    color: #9a6514;

    font-size: .76rem;
    font-weight: 700;

    letter-spacing: .16em;

    text-transform: uppercase;
}


/* HEADING */

.about-alumni-content h2 {
    margin: 0 0 22px;

    color: #5a0b13;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: clamp(2rem, 4vw, 3.1rem);

    line-height: 1.12;
}


/* PARAGRAPHS */

.about-alumni-content p {
    margin: 0 0 17px;

    color: #5d5553;

    font-size: 1rem;

    line-height: 1.8;
}


/* TAGLINE */

.about-alumni-tagline {
    display: inline-block;

    margin-top: 8px;
    padding-top: 17px;

    border-top: 2px solid #d7b26a;

    color: #5a0b13;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 1.15rem;

    font-weight: 700;

    font-style: italic;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .about-alumni-grid {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .about-alumni-content {
        max-width: none;
    }

    .about-alumni-image-wrap,
    .about-alumni-image {
        min-height: 360px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .about-alumni-section {
        padding: 48px 0;
    }

    .about-alumni-grid {
        width: calc(100% - 28px);

        gap: 28px;
    }

    .about-alumni-image-wrap,
    .about-alumni-image {
        min-height: 270px;

        border-radius: 14px;
    }

    .about-alumni-content h2 {
        margin-bottom: 17px;

        font-size: 2rem;
    }

    .about-alumni-content p {
        font-size: .94rem;

        line-height: 1.7;
    }

    .about-alumni-tagline {
        font-size: 1rem;
    }

}
/* =========================================================
   LATEST MEMBERS
========================================================= */

.latest-members-section {
    padding-top: 65px;
    padding-bottom: 65px;
}

.latest-members-scroll {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 5px 2px 15px;

    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;

    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.latest-members-scroll::-webkit-scrollbar {
    height: 6px;
}

.latest-members-scroll::-webkit-scrollbar-track {
    background: #eee5dc;
    border-radius: 10px;
}

.latest-members-scroll::-webkit-scrollbar-thumb {
    background: #8f0c1d;
    border-radius: 10px;
}


/* MEMBER IMAGE CARD */

.latest-member-card {
    flex: 0 0 calc((100% - 162px) / 10);

    min-width: 105px;
    aspect-ratio: 1 / 1;

    display: block;

    border-radius: 14px;
    overflow: hidden;

    background: #f2e9df;

    border: 1px solid #eadfd5;

    scroll-snap-align: start;

    text-decoration: none;

    box-shadow:
        0 8px 22px rgba(55, 20, 24, .08);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.latest-member-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 14px 30px rgba(55, 20, 24, .15);
}


.latest-member-card img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    user-select: none;
    -webkit-user-drag: none;

    transition:
        filter .25s ease,
        transform .25s ease;
}


/* =========================================================
   GUEST MEMBER IMAGE
   Same concept as gallery protection.
========================================================= */

.latest-member-card.guest-member img {
    filter: blur(12px);
    transform: scale(1.08);
}

.latest-member-card.guest-member:hover img {
    transform: scale(1.1);
}


/* =========================================================
   EMPTY
========================================================= */

.latest-members-empty {
    width: 100%;
    padding: 35px 20px;

    text-align: center;

    color: #777;

    background: #faf7f2;

    border: 1px solid #eadfd5;
    border-radius: 12px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .latest-member-card {
        flex: 0 0 calc((100% - 54px) / 4);
        min-width: 150px;
    }

}


/* =========================================================
   MOBILE
   ONE CARD AT A TIME
========================================================= */

@media (max-width: 600px) {

    .latest-members-section {
        padding-top: 45px;
        padding-bottom: 45px;
    }

    .latest-members-scroll {
        gap: 14px;

        margin-right: -14px;
        padding-right: 14px;

        scroll-snap-type: x mandatory;
    }

    .latest-member-card {
        flex: 0 0 calc(100% - 28px);

        min-width: 0;

        aspect-ratio: 1 / 1;

        border-radius: 16px;

        scroll-snap-align: center;
    }

}
/* ================================
   SUCCESS STORIES - HORIZONTAL
================================ */

.success-stories-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.success-stories-wrapper::-webkit-scrollbar {
    display: none;
}

.success-stories-track {
    display: flex;
    gap: 24px;
    width: max-content;
    padding: 5px 2px 15px;
}

.success-story-card {
    flex: 0 0 380px;
    width: 380px;
}

/* ================================
   MOBILE
================================ */

@media (max-width: 767px) {

    .success-stories-wrapper {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }

    .success-stories-track {
        gap: 15px;
    }

    .success-story-card {
        flex: 0 0 calc(100vw - 40px);
        width: calc(100vw - 40px);
        scroll-snap-align: center;
    }
}

/* =========================================================
   LATEST MEMBERS
   Mobile: 20 photos in a 3-column grid
========================================================= */

@media (max-width: 600px) {

    .latest-members-scroll {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2px !important;
        width: 100%;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        scroll-snap-type: none !important;
    }

    .latest-member-card {
        width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
        aspect-ratio: 1 / 1 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        scroll-snap-align: none !important;
        overflow: hidden;
    }

    .latest-member-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
}


/* =========================================================
   FINAL CLEANUP / OVERRIDES
   ========================================================= */

/* Prevent accidental horizontal page overflow */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Desktop header navigation stays inline */
@media (min-width: 721px) {
    .header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .main-nav {
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
        gap: 4px;
        white-space: nowrap;
    }

    .main-nav a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
    }

    .mobile-menu-btn {
        display: none !important;
    }

    .mobile-nav,
    .mobile-nav-overlay {
        display: none !important;
    }
}

/* Mobile navigation */
@media (max-width: 720px) {
    .header-inner {
        width: 100%;
        padding: 10px 14px;
    }

    .main-nav {
        width: 100%;
    }

    .main-nav a {
        display: flex;
        width: 100%;
    }

    .mobile-menu-btn {
        display: flex !important;
    }

    .brand {
        min-width: 0;
    }

    .brand-text {
        min-width: 0;
    }

    .brand-title {
        max-width: 190px;
    }
}

/* About section */
.about-alumni-section {
    width: 100%;
    background: var(--cream-100);
}

.about-alumni-grid {
    max-width: 1180px;
}

/* Welcome card */
.welcome-card {
    min-height: 100%;
}

.welcome-card .btn {
    position: relative;
    z-index: 2;
}

/* Homepage latest members
   Desktop: 10 visible
   Tablet: 4 visible
   Mobile: 3-column grid
*/
.latest-members-scroll {
    width: 100%;
}

.latest-member-card {
    overflow: hidden;
}

.latest-member-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Mobile latest members = 3 columns */
@media (max-width: 600px) {
    .latest-members-section {
        padding-top: 42px !important;
        padding-bottom: 42px !important;
    }

    .latest-members-scroll {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 2px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        scroll-snap-type: none !important;
    }

    .latest-member-card {
        width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
        aspect-ratio: 1 / 1 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        scroll-snap-align: none !important;
    }

    .latest-member-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    .latest-member-card img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}

/* Small mobile spacing */
@media (max-width: 420px) {
    .latest-members-scroll {
        gap: 2px !important;
    }

    .brand-title {
        max-width: 170px;
    }
}

/* Success stories remain horizontal on desktop/mobile */
.success-stories-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.success-stories-wrapper::-webkit-scrollbar {
    display: none;
}

.success-stories-track {
    display: flex;
    gap: 24px;
    width: max-content;
}

@media (max-width: 767px) {
    .success-stories-track {
        gap: 15px;
    }

    .success-story-card {
        flex: 0 0 calc(100vw - 40px);
        width: calc(100vw - 40px);
    }
}