:root{
  --text:#111;
  --muted:#555;
  --blue:#0a4db7;
  --blue-dark:#083f94;
  --red:#e03131;
  --max:100%;
  --radius:14px;

  /* runtime */
  --head-h: 100vh;
  --logo-h: 40vh;

  /* band placement/sizing */
  --band-gap: 0px;
  --band-h: 88px;
  --band-offset: 200px;
}

@font-face{
  font-family:'Myriad';
  src:url('/fonts/MYRIADPRO-REGULAR.otf') format('opentype');
  font-weight:normal;
  font-style:normal;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font:16px/1.6 'Myriad',system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  background:#fff;
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  padding-bottom: 60px;
}

header.site{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  display:grid; place-items:center;
  height:var(--head-h,100vh);
  background:#fff;
  border-bottom:1px solid #eee;
  transition:height .45s cubic-bezier(.2,.8,.2,1), border-color .25s ease, box-shadow .25s ease;
  overflow:visible;
}

header.site .brand{
  display:inline-block;
  position:relative;
  line-height:0;
}

header.site img{
  display:block;
  height:var(--logo-h,40vh);
  width:auto;
  transition:height .45s cubic-bezier(.2,.8,.2,1), filter .25s ease;
}

/* ===== Header states ===== */
header.site.intro{
  --head-h:100vh;
  --logo-h:60vh;
}
header.site.collapsed{
  --head-h:200px;
  --logo-h:180px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}

/* ===== Content ===== */
main{
  max-width:var(--max);
  margin:0 auto;
  padding:24px 0 40px;
}
.hero{ padding:8px 0 24px; }
.hero h1{
  margin:0 0 10px;
  font-size:clamp(2rem,4.5vw,3.2rem);
  font-weight:800;
  text-align:center;
}
.lead{ color:var(--muted); max-width:60ch; margin:0 0 16px; }

.section{ padding:20px 0; border-top:1px solid #eee; }
.section h2{ margin:0 0 8px; font-size:1.35rem; }
.list{ padding-left:1.1rem; margin:0; }
.list li{ margin:.4rem 0; }

.btn{
  display:inline-block;
  padding:.78rem 1rem;
  border-radius:var(--radius);
  text-decoration:none;
  font-weight:700;
  color:#fff;
  background:var(--blue);
  transition:background .2s ease, transform .15s ease, box-shadow .15s ease;
}
.btn:hover{ background:var(--blue-dark); transform:translateY(-1px); }

.intro-band{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1500;
  background: #fff;
  color: #111;
  border-bottom: 1px solid #ddd;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);

  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: .8rem 1.2rem;
  min-height: var(--band-h);
  box-sizing: border-box;

  transform: translateY(var(--band-offset));
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
  user-select: none;
}

.intro-band h1{
  margin: 0; font-weight: 800;
  font-size: clamp(1.25rem, 3vw, 2rem); color: #111;
}

.subnav{ display:flex; gap:1rem; }
.subnav a{
  color:#111; font-weight:700; text-decoration:none;
  padding:.35rem .6rem; border-radius:10px; transition:background .2s ease;
}
.subnav a:hover{ background:#f3f4f6; }

#intro-band-spacer{ height: var(--band-h); }
#header-spacer{ height: var(--band-offset); }

body.header-intro .intro-band{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}

body:not(.header-intro) .intro-band{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(var(--band-offset));
  transition: opacity .25s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}

@media (max-width: 640px){
  .intro-band{ padding: 8px 14px; row-gap: 8px; }
  .subnav{ justify-content: center; }
}

@media (prefers-reduced-motion: reduce){
  .intro-band{ transition: none; }
}

.custom-link {
  color: var(--red);
  text-decoration: none;
  font-style: italic;
}

.custom-link:hover {
  color: #083f94;
  text-decoration: underline solid;
}

/* ===== Events Section ===== */
.events {
  padding: 60px 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fafafa;
}

.events-head {
  width: 100%;
  max-width: 1000px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.events-grid {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  justify-items: center;
}


/* Event card */
.event-card{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  padding:14px;
  border:1px solid #eee;
  border-radius:14px;
  background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  opacity: 0;
  transform: translateY(15px);
  animation: fadeInUp 0.6s ease forwards;
}
.event-card:hover{
  transform: translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.09);
  border-color:#e8e8e8;
}

.event-card:nth-child(1) { animation-delay: 0.1s; }
.event-card:nth-child(2) { animation-delay: 0.2s; }
.event-card:nth-child(3) { animation-delay: 0.3s; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Date */
.event-date{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:70px; height:70px; border-radius:12px;
  background: var(--blue);
  color:#fff; text-transform:uppercase;
}
.event-date .day{ font-size:1.35rem; font-weight:800; line-height:1; }
.event-date .mon{ font-size:.8rem; letter-spacing:.06em; opacity:.95; }

/* Body */
.event-body h3{
  margin:2px 0 6px; font-size:1.05rem; line-height:1.25; font-weight:800;
}
.event-body .meta{
  margin:0; color:#666; font-size:.95rem;
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
}

.meta .icon{ width:16px; height:16px; display:inline-block; vertical-align:-3px; }

.event-actions{ margin-top:10px; }
.event-actions a{
  font-weight:700; color:var(--blue); text-decoration:none;
}
.event-actions a:hover{ text-decoration:underline; }

/* Skeleton while loading */
.skeleton{ position:relative; overflow:hidden }
.skeleton::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.06) 50%, rgba(0,0,0,0.04) 100%);
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer{ from{transform:translateX(-100%)} to{transform:translateX(100%)} }

@media (prefers-reduced-motion: reduce){
  .event-card, .event-card:hover{ transition:none; transform:none; box-shadow:none; }
  .skeleton::after{ animation:none }
}

.split-section {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

.split-image {
  flex: 1 1 400px;
  width: 100%;
  max-width: 600px;
  object-fit: cover;
}

.split-text {
  flex: 1 1 400px;
  padding: 2rem;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .split-section {
    flex-direction: column;
    text-align: center;
  }

  .split-text {
    padding: 1.5rem;
  }
}

.center-section {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 30vh;
  padding: 2rem;
}


/* Footer */
.footer{
  position:fixed; left:0; bottom:0; width:100%;
  border-top:1px solid #eee;
  background:#fafafa; color:#666;
  font-size:.95rem; padding:.75rem 1rem;
  z-index:1000;
}
.footer-inner{
  max-width:var(--max);
  margin:0 auto; padding:0 20px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center; text-align:center;
}
.footer-left{ text-align:left; }
.footer-right{ text-align:right; }
.social-link{
  color:#111; text-decoration:none;
  transition:color .2s ease, transform .2s ease;
  justify-self:center;
}
.social-link:hover{ color:var(--red); transform:translateY(-2px); }
.footer a{ color:var(--blue); text-decoration:none; }
.footer a:hover{ text-decoration:underline; }

/* Petition hero */
.petition-hero{
  position:relative; width:100%;
  background-image:url('img/ChevronOutMarch_bg.png');
  background-size:cover; background-position:center top; background-repeat:no-repeat;
  display:flex; justify-content:center; align-items:center; flex-direction:column;
  text-align:center; min-height:60vh; max-height: 900px; overflow: hidden;
}
.petition-hero::before{
  content:""; position:absolute; inset:0; background:rgba(0,0,0,.45);
}
.petition-overlay{
  position:relative; z-index:1; color:#fff;
  width:90%; max-width:none; padding:2rem 4rem; margin:0 auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
}
.petition-overlay h1{
  font-size:clamp(2rem,5vw,3.5rem); font-weight:800; margin-bottom:1rem; text-align:center;
}
.petition-overlay .lead{
  max-width:80%; margin:0 auto 1.5rem; font-size:1.25rem; line-height:1.7; color:#f1f1f1; text-align:center;
}
.petition-overlay .btn{
  background:var(--blue); color:#fff; padding:.9rem 1.4rem; border-radius:var(--radius);
  font-weight:700; text-decoration:none; transition:background .2s ease, transform .15s ease;
  display:inline-block; margin-top:1.5rem; text-align:center;
}
.petition-overlay .btn:hover{ background:var(--blue-dark); transform:translateY(-2px); }

.red-text{
  font-weight:bold;
  -webkit-text-fill-color:#fff;
  background:rgba(0,0,0,.7);
  padding:.2em .4em; border-radius:4px;
}

/* Mobile View */
@media (max-width: 768px) {
  header.site {
    height: 100vh;
  }

  header.site img {
    max-height: 50vh;
  }

  header.site.collapsed {
    height: 100px;
  }

  header.site.collapsed img {
    max-height: 70px;
  }
  
  .petition-overlay {
  max-width: 95vw;
  padding: 1.5rem;
}

.petition-overlay h1 {
  font-size: clamp(1.8rem, 8vw, 2.8rem);
  line-height: 1.2;
}

.petition-overlay .lead {
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 100%;
}

.petition-overlay .btn {
  width: 100%;
  max-width: 350px;
  padding: 1rem 1.2rem;
  font-size: 1.1rem;
}

.split-image {
  flex: 1 1 200px;
}

.center-section {
  padding: 0.5rem;
}

.split-text {
  padding: 0.5rem;
}


}