@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&family=Inter:wght@400;500;600;700&display=swap');
:root{
  --cream:#F9E0BD; /* sampled from dark logo */
  --gold:#D4A251;
  --text-dark:#141414;
  --text-light:#F5F5F5;
  --muted-dark:#BDBDBD;
  --muted-light:#4a4a4a;
}
*{box-sizing:border-box}
body{ margin:0; font-family:"Inter", sans-serif; transition:background-color .25s,color .25s; }
body.light{ background:#FFFFFF; color:var(--text-dark); }
body.dark { background:#000000; color:var(--text-light); }

/* Seamless banner with actual logo */
.banner{ 
  position:sticky; 
  top:0; 
  z-index:100; 
  height:210px; 
  background:transparent; 
  padding-top:20px;
  background:inherit;
}
.banner img{ 
  width:140px; 
  height:auto; 
  max-height:160px;
  object-fit:contain; 
  object-position:center; 
  display:block; 
  background:transparent;
  margin:0 auto;
}

/* Make light logo bigger */
body.light .banner img {
  width:160px;
  max-height:180px;
}

/* Adjust dark logo position to match light logo */
body.dark .banner img {
  margin-top:15px;
}



.toggle{
  position:absolute; right:16px; top:14px; z-index:101;
  font:600 14px "Inter", sans-serif; background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.35); color:inherit;
  padding:.5rem .85rem; border-radius:8px; cursor:pointer;
}
body.light .toggle{ background:rgba(0,0,0,.06); border-color:rgba(0,0,0,.2); }

main{ text-align:center; padding:0.5rem 1rem 2.75rem; }

.verse{ font-style:italic; font-size:1.08rem; margin:0.5rem auto 0.75rem; max-width:900px; color:inherit; }

.vp{ max-width:860px; margin:.5rem auto 1rem; font: 400 1.05rem/1.5 "Inter", sans-serif; opacity:.95; }

.pill-row{
  display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap;
  margin: .25rem auto 1.1rem;
}
.pill-row span{
  font:600 0.9rem "Inter", sans-serif;
  padding:.35rem .7rem; border-radius:999px;
  border:1px solid currentColor; opacity:.85;
}
body.dark .pill-row span{ color:var(--cream); border-color:rgba(249,224,189,.55); }
body.light .pill-row span{ color:#222; border-color:rgba(0,0,0,.2); }

.coming{ font-weight:900; margin: .5rem 0 1rem; }
body.dark .coming{ color:var(--gold); }
body.light .coming{ color:#B8892B; }

.notify-text{ 
  max-width:600px; margin:0 auto 1.5rem; 
  font: 500 1rem/1.4 "Inter", sans-serif; 
  opacity:.9;
}
body.dark .notify-text{ color:var(--cream); }
body.light .notify-text{ color:var(--text-dark); }

#emailForm{ display:flex; justify-content:center; gap:.6rem; flex-wrap:wrap; }
#emailInput{
  padding:.7rem .9rem; width:min(460px,82vw);
  border-radius:8px; border:1px solid #cfcfd2;
  font: 400 0.95rem "Inter", sans-serif; outline:none;
}
.cta{
  padding:.72rem 1.15rem; border:none; border-radius:8px;
  background:var(--gold); color:#fff;
  font:700 0.95rem "Inter", sans-serif; cursor:pointer;
}
.microcopy{
  margin-top:.6rem; font: 500 .85rem/1.2 "Inter", sans-serif;
}
body.dark .microcopy{ color:var(--cream); opacity:.85; }
body.light .microcopy{ color:var(--muted-light); }

footer{ text-align:center; padding:2rem 1rem; opacity:.85; }

@media (min-width: 1280px){
  .banner{ 
    height:250px; 
    padding-top:25px;
  }
  .banner img {
    width:155px;
    max-height:175px;
  }
}


h1, h2, h3, blockquote {
  font-family: 'Cinzel', serif;
}

body, p, button, input, .btn, .tag {
  font-family: 'Inter', sans-serif;
}


button, .btn, .cta {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
}