*{box-sizing:border-box}
:root{--footer-h:58px}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#050607;color:#fff;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
.background{position:fixed;z-index:0;inset:0;background-image:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.48)),url("assets/easter-monday-background.webp");background-size:cover;background-position:center;transform:scale(1.025)}
.vignette{position:fixed;z-index:5;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.08),transparent 34%,rgba(0,0,0,.14) 68%,rgba(0,0,0,.48)),radial-gradient(ellipse at center,transparent 35%,rgba(0,0,0,.12) 68%,rgba(0,0,0,.42) 100%)}
.content{position:fixed;z-index:20;inset:0 0 var(--footer-h);display:grid;place-items:center}
.hero{width:min(760px,72vw);text-align:center;transform:translateY(-5vh)}
.eyebrow{margin-bottom:13px;color:rgba(255,255,255,.72);font-size:.64rem;font-weight:700;letter-spacing:.42em;text-transform:uppercase;text-shadow:0 2px 8px #000}
h1{margin:0;color:#fff;font-family:Georgia,"Times New Roman",serif;font-size:clamp(4.4rem,7.7vw,8rem);font-weight:600;line-height:.93;letter-spacing:-.055em;text-shadow:0 3px 20px rgba(0,0,0,.9)}
.event-date{margin-top:14px;color:rgba(255,255,255,.82);font-size:clamp(.8rem,1.25vw,1.04rem);font-weight:600;letter-spacing:.25em;text-transform:uppercase;text-shadow:0 2px 8px #000}
.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:33px}
.time-card{min-height:110px;padding:14px 9px 12px;display:grid;place-content:center;border:1px solid rgba(255,255,255,.16);border-radius:7px;background:linear-gradient(180deg,rgba(12,10,9,.52),rgba(5,5,5,.34));box-shadow:inset 0 1px rgba(255,255,255,.03),0 12px 28px rgba(0,0,0,.22);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.time-value{font-family:Georgia,"Times New Roman",serif;font-size:clamp(2.35rem,4.3vw,3.85rem);line-height:.95;font-variant-numeric:tabular-nums;text-shadow:0 3px 13px rgba(0,0,0,.82)}
.time-label{margin-top:10px;color:var(--accent);font-size:.58rem;font-weight:700;letter-spacing:.28em}
.tagline{margin-top:27px;display:flex;align-items:center;justify-content:center;gap:14px;color:rgba(255,255,255,.67);font-size:.57rem;font-weight:700;letter-spacing:.27em;text-transform:uppercase;text-shadow:0 2px 8px #000}
.tag-line{width:42px;height:1px;background:var(--accent);opacity:.65}
}

.description{
  width:min(640px,88%);
  margin:24px auto 0;
  color:rgba(255,255,255,.78);
  font-size:clamp(.88rem,1.25vw,1rem);
  line-height:1.6;
  text-align:center;
  text-shadow:0 2px 10px rgba(0,0,0,.75)
}

.event-icon{
  width:42px;
  height:42px;
  display:block;
  margin:0 auto 13px;
  border-radius:11px;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  opacity:.94
}

}

/* Fixed-site header / footer chrome */











/* keep hero clear of header */
.content{padding-top:74px;padding-bottom:86px}

/* Reference-style footer card */
.site-footer{
  position:fixed;
  z-index:40;
  left:50%;
  bottom:10px;
  transform:translateX(-50%);
  width:min(1080px,calc(100% - 32px));
  min-height:70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:13px 16px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:17px;
  background:linear-gradient(90deg,rgba(17,16,19,.74),rgba(19,18,20,.58),rgba(10,11,14,.70));
  box-shadow:0 14px 34px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.035);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px)
}
.footer-left{display:flex;flex-direction:column;gap:8px;color:rgba(255,255,255,.72);font-size:.72rem}
.footer-left strong{color:#fff}
.footer-dot{margin:0 4px;color:rgba(255,255,255,.38)}
.footer-copy{color:rgba(255,255,255,.58)}
.footer-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.footer-right a{color:rgba(255,255,255,.74);font-size:.72rem;text-decoration:none;white-space:nowrap}
.footer-right a:hover{color:#fff}

@media(max-width:950px){
  
  .site-footer{width:calc(100% - 22px);bottom:8px}
  .content{padding-top:80px;padding-bottom:104px}
}

@media(max-width:650px){
  html,body{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto}
  body{min-height:100dvh;padding-top:78px}
  
  
  
  
  
  
  .content{
    position:relative;
    inset:auto;
    min-height:auto;
    display:block;
    padding:18px 12px 22px
  }
  .hero{width:100%;max-width:520px;margin:0 auto;transform:none}
  .site-footer{
    position:relative;
    left:auto;
    bottom:auto;
    transform:none;
    width:calc(100% - 16px);
    min-height:0;
    margin:8px auto 10px;
    padding:13px 12px;
    border-radius:15px;
    flex-direction:column;
    align-items:flex-start;
    gap:11px
  }
  .footer-left{gap:5px}
  .footer-right{width:100%;justify-content:flex-start;gap:8px 14px}
  .footer-right a{font-size:.68rem}
}

@media(max-width:430px){
  
  #header-date{display:none}
  
  .site-footer{text-align:left}
}

.copyright-name{
  color:inherit;
  text-decoration:none;
  transition:color .15s ease
}
.copyright-name:hover{
  color:#fff;
  text-decoration:underline;
  text-underline-offset:2px
}

/* FINAL FIXED-SITE HEADER */
.topbar{
  position:fixed!important;
  z-index:60!important;
  top:12px!important;
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  width:min(1080px,calc(100vw - 32px))!important;
  min-height:62px!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:18px!important;
  padding:10px 14px 10px 16px!important;
  margin:0!important;
  border:1px solid rgba(255,255,255,.13)!important;
  border-radius:18px!important;
  background:
    linear-gradient(90deg,rgba(19,18,24,.82),rgba(36,18,19,.66) 48%,rgba(14,15,21,.82))!important;
  box-shadow:0 16px 40px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.045)!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
}
.topbar-brand{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  gap:12px!important;
  min-width:0!important;
  flex:0 1 auto!important;
}
.topbar-brand strong{
  display:block!important;
  margin:0!important;
  color:#fff!important;
  font-size:.92rem!important;
  line-height:1!important;
  white-space:nowrap!important;
  letter-spacing:-.02em!important;
}
.topbar-brand em{
  font-style:normal!important;
  color:#58c7ef!important;
}
.hub-mark{
  width:34px!important;
  height:34px!important;
  flex:0 0 34px!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  grid-template-rows:1fr 1fr!important;
  gap:3px!important;
  padding:6px!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.055)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.04)!important;
}
.hub-mark span{
  display:block!important;
  min-width:0!important;
  min-height:0!important;
  border-radius:3px!important;
  background:linear-gradient(145deg,#6a71ff,#54c9eb)!important;
}
.hub-mark span:nth-child(2),
.hub-mark span:nth-child(3){
  background:linear-gradient(145deg,#55d4f1,#5185ef)!important;
}
.topbar-actions{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
  margin-left:auto!important;
  flex:0 0 auto!important;
}
.topbar-pill{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:34px!important;
  padding:0 14px!important;
  margin:0!important;
  border:1px solid rgba(255,255,255,.11)!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.045)!important;
  color:rgba(255,255,255,.82)!important;
  font-size:.72rem!important;
  font-weight:700!important;
  line-height:1!important;
  text-decoration:none!important;
  white-space:nowrap!important;
}
.topbar-link:hover{
  background:rgba(255,255,255,.08)!important;
  color:#fff!important;
}

@media(max-width:650px){
  .topbar{
    top:8px!important;
    width:calc(100vw - 16px)!important;
    min-height:56px!important;
    padding:8px 10px!important;
    gap:10px!important;
    border-radius:15px!important;
  }
  .topbar-brand{gap:8px!important}
  .hub-mark{
    width:31px!important;
    height:31px!important;
    flex-basis:31px!important;
    padding:5px!important;
  }
  .topbar-brand strong{font-size:.82rem!important}
  .topbar-actions{gap:6px!important}
  .topbar-pill{
    min-height:30px!important;
    padding:0 9px!important;
    font-size:.62rem!important;
  }
}
@media(max-width:430px){
  .topbar-brand strong{font-size:.76rem!important}
  #header-date{display:none!important}
  .topbar-pill{font-size:.60rem!important}
}

/* Header clearance fix */
.content{
  padding-top:110px !important;
}

@media(max-width:650px){
  .content{
    padding-top:28px !important;
  }
  body{
    padding-top:78px !important;
  }
}

/* Footer — always at bottom */
.site-footer{
  position:fixed !important;
  left:50% !important;
  right:auto !important;
  bottom:10px !important;
  transform:translateX(-50%) !important;
  margin:0 !important;
}

@media(max-width:650px){
  body{
    min-height:100dvh !important;
    display:flex !important;
    flex-direction:column !important;
  }

  .content{
    flex:1 0 auto !important;
  }

  .site-footer{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    transform:none !important;
    margin:auto auto 8px !important;
  }
}