:root{
  --gold:#D4AF37;
  --crimson:#7A0F0F;
  --charcoal:#0F1214;
  --cream:#FBF6EC;
  --max-width:1100px;
}
*{box-sizing:border-box}
body{font-family:Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0; color:var(--charcoal); background:linear-gradient(180deg,var(--cream),#fff);}
.container{max-width:var(--max-width);margin:0 auto;padding:1rem}
.site-header{background:transparent;padding:.6rem 0;position:sticky;top:0;z-index:40;transition:transform .32s ease,opacity .32s ease}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--charcoal)}
.brand .logo{width:64px;height:64px;object-fit:cover;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.12)}
.brand-text{font-family:Merriweather, serif;font-weight:700;font-size:1rem}
.nav a{margin-right:1rem;color:var(--charcoal);text-decoration:none}
.btn{padding:.6rem 1rem;border-radius:6px;border:0;cursor:pointer;font-weight:600}
.btn-outline{background:transparent;border:2px solid rgba(0,0,0,.08);color:var(--charcoal)}
.btn-gold{background:var(--gold);color:#111;border:2px solid rgba(0,0,0,.06)}

.hero{padding:3.2rem 0 4rem}
.hero-inner{display:grid;grid-template-columns:300px 1fr;gap:2rem;align-items:center}
.crest{width:100%;max-width:300px;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.18);transition:transform .9s cubic-bezier(.2,.9,.2,1),filter .4s}
.crest-wrap{display:flex;justify-content:center}
.hero-copy h1{font-family:Merriweather, serif;font-size:2.2rem;margin:0 0 .6rem}
.lead{color:#333;max-width:40rem}
.hero-ctas{margin-top:1rem;display:flex;gap:.8rem}

.about, .events{padding:2rem 0}
.about h2,.events h2{font-family:Merriweather, serif}
.events ul{margin:0;padding-left:1.2rem}

.site-footer{border-top:1px solid rgba(0,0,0,.06);padding:1.2rem 0;margin-top:2rem;background:linear-gradient(180deg, rgba(255,255,255,.6), rgba(250,250,250,.9))}
.footer-inner{display:flex;align-items:center;justify-content:space-between}
.logo-small{width:44px;height:44px;border-radius:6px}

/* Modal */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.45);padding:2rem}
.modal[aria-hidden="false"]{display:flex}
.modal-dialog{background:var(--cream);padding:1.4rem;border-radius:10px;max-width:520px;width:100%;box-shadow:0 18px 50px rgba(0,0,0,.35);position:relative}
.modal-close{position:absolute;right:.6rem;top:.4rem;background:transparent;border:0;font-size:1.2rem;cursor:pointer}

/* Responsive */
@media (max-width:880px){
  .hero-inner{grid-template-columns:1fr;grid-auto-rows:auto;text-align:center;padding:1rem}
  .brand-text{display:none}
  .header-inner{padding:0 .6rem}
  .container{padding:1rem}
  .footer-inner{flex-wrap:wrap;gap:1rem;justify-content:center}
}

/* accessibility focus */
a:focus, button:focus{outline:3px solid rgba(212,175,55,.25);outline-offset:3px}

/* white background & subtle shadow when user has scrolled */
.site-header{background:#FBF6EC;box-shadow:0 8px 24px rgba(0,0,0,.10);backdrop-filter:saturate(120%) blur(4px)}