:root{
  --bg:#ffffff;
  --ink:#10212b;
  --ink-muted:#4a5a66;
  --brand:#1b7f5e;
  --accent:#2a58ff;
  --soft:#f4f6f7;
  --ring:rgba(42,88,255,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Manrope,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}
h1,h2{
  font-family:'DM Serif Display',Georgia,'Times New Roman',serif;
  line-height:1.2;
  margin:0 0 .5rem 0;
}
h1{font-size:clamp(2rem, 4vw + 1rem, 3.2rem)}
h2{font-size:clamp(1.5rem, 1.6vw + .8rem, 2rem)}
p{margin:.5rem 0 1rem 0}
.container{max-width:1100px;margin:0 auto;padding:0 1.2rem}
.hero{
  background: radial-gradient(1200px 600px at 10% -10%, #f0f6ff 0%, #fff 65%),
              radial-gradient(800px 400px at 110% 10%, #e6fff4 0%, #fff 55%);
  padding: 6rem 0 3rem 0;
  text-align:center;
  border-bottom:1px solid #eef1f3;
}
.hero__subtitle{font-weight:800;color:var(--brand);font-size:1.2rem;margin:.25rem 0 .5rem 0}
.hero__tagline{font-size:1.05rem;color:var(--ink-muted);max-width:50ch;margin:0 auto 1.5rem auto}
.btn{
  display:inline-block;
  padding:.8rem 1.05rem;
  border-radius:.7rem;
  background:var(--accent);
  color:white;
  text-decoration:none;
  font-weight:800;
  letter-spacing:.2px;
  transition:transform .06s ease, box-shadow .2s ease;
  box-shadow:0 8px 24px rgba(42,88,255,.18);
}
.btn:hover{transform:translateY(-1px)}
.btn:focus{outline:3px solid var(--ring); outline-offset:2px}
.btn--secondary{background:var(--brand);box-shadow:0 8px 24px rgba(27,127,94,.18)}
.section{padding:3rem 0}
.section--highlight{background:var(--soft)}
.details{padding-left:1.1rem}
.note{color:var(--ink-muted);font-style:italic}
.two-col{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:start}
@media (max-width: 820px){.two-col{grid-template-columns:1fr} .hero{padding:4rem 0 2rem 0}}
.flyer{margin:0}
.flyer img{width:100%;border-radius:.8rem;border:1px solid #e3e7ea;box-shadow:0 16px 40px rgba(16,33,43,.06)}
.footer{padding:2rem 0;border-top:1px solid #eef1f3;color:var(--ink-muted);font-size:.95rem}
.section--contact .email{font-weight:800}
.location address{font-style:normal}
.map-link{font-weight:700}
.actions{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:.8rem}


/* Navigation */
.nav{position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid #eef1f3;z-index:50}
.nav__inner{display:flex;gap:1rem;align-items:center;justify-content:space-between;min-height:56px}
.nav .brand{font-weight:900;text-decoration:none;color:var(--ink)}
.nav__links a{margin-left:1rem;text-decoration:none;color:var(--ink-muted);font-weight:800}
.nav__links a:hover{color:var(--ink)}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.gallery figure{margin:0}
.gallery img{width:100%;height:100%;object-fit:cover;border-radius:.6rem;border:1px solid #e3e7ea;box-shadow:0 8px 24px rgba(16,33,43,.06)}
.gallery figcaption{font-size:.9rem;color:var(--ink-muted);margin-top:.35rem}
.faq dl{max-width:900px}
.faq dt{font-weight:900;margin-top:1.2rem}
.faq dd{margin-left:0}


/* Mahjong themed header */
.hero--mahjong{
  background:
    radial-gradient(1200px 600px at 10% -10%, #e9f7f1 0%, #ffffff 60%),
    radial-gradient(800px 400px at 110% 10%, #f3f7ff 0%, #ffffff 55%);
  position:relative;
  overflow:hidden;
}
.hero--mahjong::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(45deg, rgba(27,127,94,.05) 25%, transparent 25%) -10px 0/20px 20px,
    linear-gradient(-45deg, rgba(27,127,94,.05) 25%, transparent 25%) 0px 0/20px 20px;
  pointer-events:none;
}
.hero .logo{
  display:block;
  margin:0 auto 1rem auto;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.18));
  border-radius:20px;
}
.hero__cta{margin-top:1rem; display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap}

/* Event section styling */
.section--event{
  background:var(--soft);
  border-top:1px solid #eef1f3;
  border-bottom:1px solid #eef1f3;
}
.section--event .two-col{align-items:center}


/* Minimalist theme tweaks */
body{background:#fff;color:var(--ink)}
.nav-logo{height:32px;width:auto;vertical-align:middle;margin-right:.4rem}
.hero--mahjong{background:#fff}
.hero--mahjong::before{display:none}
.hero__tagline{max-width:65ch;margin-top:1rem;font-size:1.1rem;color:var(--ink-muted)}
.section--contact{text-align:center;background:#fafafa;border-top:1px solid #eef1f3}
.section--contact h2{margin-bottom:.5rem}


/* Ensure sticky navbar + logo sizing on all pages */
.nav{position:sticky; top:0; background:rgba(255,255,255,.95); backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid #eef1f3; z-index:100}
.nav-logo{height:28px; width:auto; vertical-align:middle; margin-right:.45rem}
@media (min-width: 900px){ .nav-logo{height:32px} }
.hero .logo{display:block; margin:0 auto 1rem auto; height:auto; max-width:180px}


/* Ensure navbar is sticky and logo visible */
.nav{position:sticky; top:0; background:#ffffffcc; backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid #eef1f3; z-index:100}
.nav-logo{height:28px; width:auto; vertical-align:middle; margin-right:.5rem}
.hero .logo{display:block; margin:0 auto 1rem auto; width:140px; height:auto}
@media (max-width:560px){ .nav-logo{height:24px} .hero .logo{width:110px} }


/* Prominent logos & favicon ready tweaks */
.nav-logo{height:34px !important; margin-right:.55rem; filter: drop-shadow(0 4px 10px rgba(0,0,0,.12));}
.hero .logo{width:180px !important; filter: drop-shadow(0 14px 30px rgba(0,0,0,.18));}
@media (max-width:560px){ .nav-logo{height:28px !important} .hero .logo{width:140px !important} }