:root {
  --maroon: #7a1f2b;
  --maroon-dark: #571620;
  --gold: #b8873a;
  --gold-light: #e0c07e;
  --saffron: #d9722c;
  --saffron-light: #f0a95c;
  --teal: #1f3d36;
  --teal-dark: #142924;
  --ivory: #fbf3e3;
  --ivory-dim: #f2e6cd;
  --ink: #2a211c;
  --ink-soft: #5c4f44;

  --display: "Manjari", "Noto Sans Malayalam", "Nirmala UI", "Kartika", sans-serif;
  --body: "Manjari", "Noto Sans Malayalam", "Nirmala UI", "Kartika", sans-serif;
  --utility: "Manjari", "Noto Sans Malayalam", "Nirmala UI", "Kartika", sans-serif;

  --max-width: 1000px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  color: var(--maroon);
  margin: 0 0 0.4em;
}
h1 { font-size: clamp(2rem, 6vw, 3.2rem); }
h2 { font-size: clamp(1.4rem, 4.5vw, 2rem); }
p { margin: 0 0 1.1em; color: var(--ink-soft); }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  font-family: var(--utility);
  font-size: 0.82rem;
  color: var(--saffron);
  font-weight: 700;
  display: inline-block;
  margin-bottom: 0.5em;
}

.btn {
  display: inline-block;
  font-family: var(--utility);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.9em 1.8em;
  border-radius: 30px;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-gold { background: var(--gold); color: var(--maroon-dark); }
.btn-gold:hover { background: var(--gold-light); }

/* ---------- Roofline motif (same as main site) ---------- */
.roofline {
  height: 34px; width: 100%;
  background-repeat: repeat-x;
  background-position: center;
  background-size: 74px 34px;
}
.roofline--gold {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='74' height='34'><path d='M0,34 L18,12 L37,26 L56,8 L74,34 Z' fill='%23D9722C'/><circle cx='37' cy='4' r='2.3' fill='%23D9722C'/></svg>");
}
.roofline--ivory {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='74' height='34'><path d='M0,34 L18,12 L37,26 L56,8 L74,34 Z' fill='%23FBF3E3'/><circle cx='37' cy='4' r='2.3' fill='%23FBF3E3'/></svg>");
}
.roofline--flip { transform: scaleY(-1); }

/* ---------- Top bar (minimal - link back to main site) ---------- */
.micro-header {
  background: var(--maroon);
  padding: 14px 0;
}
.micro-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.micro-header a.back-link {
  color: var(--ivory-dim);
  text-decoration: none;
  font-family: var(--utility);
  font-size: 0.85rem;
  font-weight: 700;
}
.micro-header a.back-link:hover { color: var(--gold-light); }
.micro-header .brand {
  color: var(--ivory);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
}

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(160deg, var(--maroon-dark), var(--maroon) 60%);
  color: var(--ivory);
  padding: 60px 0 44px;
  text-align: center;
}
.hero h1 { color: var(--ivory); }
.hero .dates {
  font-family: var(--utility);
  font-weight: 700;
  color: var(--saffron-light);
  font-size: 1.05rem;
  margin-bottom: 0.3em;
}
.hero p.sub {
  color: var(--gold-light);
  max-width: 60ch;
  margin: 0 auto 1.4em;
}

/* ---------- Sections ---------- */
section.block { padding: 50px 0; }
@media (max-width: 600px) { section.block { padding: 36px 0; } }
.block--alt { background: var(--ivory-dim); }
.block h2 { text-align: center; }
.block > .container > .eyebrow { display: block; text-align: center; }

/* ---------- Photos ---------- */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 26px;
}
.photo-grid .img-box {
  position: relative;
  min-height: 180px;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(217,114,44,0.3);
  background: var(--teal-dark);
}
.photo-grid .img-box img {
  width: 100%; height: 100%;
  object-fit: cover;
  position: absolute; inset: 0;
  cursor: zoom-in;
  transition: transform 0.35s ease;
}
.photo-grid .img-box:hover img { transform: scale(1.06); }
@media (max-width: 700px) {
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
  .photo-grid { grid-template-columns: 1fr; }
}

/* ---------- Lightbox ---------- */
.lightbox-overlay {
  position: fixed; inset: 0;
  background: rgba(20,14,10,0.92);
  display: none;
  align-items: center; justify-content: center;
  z-index: 999; padding: 24px;
  cursor: zoom-out;
}
.lightbox-overlay.open { display: flex; }
.lightbox-overlay img {
  max-width: 92vw; max-height: 85vh;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  cursor: zoom-out;
}
.lightbox-close {
  position: absolute; top: 16px; right: 20px;
  color: var(--ivory); font-size: 2rem;
  background: none; border: none; cursor: pointer; line-height: 1;
}

/* ---------- Announcements (അറിയിപ്പുകൾ) ---------- */
.timeline { border-left: 2px solid var(--saffron-light); padding-left: 22px; margin: 26px auto 0; max-width: 640px; }
.timeline-item { margin-bottom: 22px; position: relative; }
.timeline-item::before {
  content: ""; position: absolute; left: -28px; top: 4px;
  width: 10px; height: 10px; background: var(--saffron); border-radius: 50%;
}
.timeline-item h3 { font-size: 1rem; margin-bottom: 0.2em; }
.timeline-item .date { font-family: var(--utility); font-size: 0.78rem; color: var(--saffron); font-weight: 700; }

/* ---------- Offerings (വഴിപാട്) ---------- */
.offerings {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 26px;
}
@media (max-width: 600px) { .offerings { grid-template-columns: 1fr; } }
.offering-card {
  background: #fff;
  border: 1px solid rgba(122,31,43,0.12);
  border-radius: 6px;
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.offering-card h3 { font-size: 1rem; margin: 0; }
.offering-card .amount {
  font-family: var(--utility);
  font-weight: 700;
  color: var(--maroon);
  white-space: nowrap;
  font-size: 0.95rem;
}

/* ---------- QR / Donation ---------- */
.donate-box {
  background: var(--maroon);
  border-radius: 8px;
  padding: 36px 24px;
  text-align: center;
  color: var(--ivory);
  max-width: 420px;
  margin: 30px auto 0;
}
.donate-box h3 { color: var(--ivory); margin-bottom: 0.3em; }
.donate-box p { color: var(--gold-light); font-size: 0.92rem; }
.qr-frame {
  background: #fff;
  padding: 14px;
  border-radius: 8px;
  display: inline-block;
  margin: 16px 0;
}
.qr-frame img {
  width: 220px;
  height: 220px;
  object-fit: contain;
}
.donate-box .upi-id {
  font-family: var(--utility);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ivory);
  background: rgba(255,255,255,0.1);
  padding: 8px 16px;
  border-radius: 20px;
  display: inline-block;
  margin-top: 8px;
}

/* ---------- Footer ---------- */
.micro-footer {
  background: var(--teal-dark);
  color: var(--ivory-dim);
  text-align: center;
  padding: 26px 20px;
  font-family: var(--utility);
  font-size: 0.8rem;
}
.micro-footer a { color: var(--gold-light); text-decoration: none; }