/* ------------------------------------------------------------
  Intent: reproduce the look/feel of your A/B mockup in HTML.
  - Day theme: warm Sharod ivory + kash field + alpana + Maa watermark
  - Night theme: deep brown + bokeh string lights + warm glow
  - Same layout and spacing as mock
  - Bottom section replaces “First time…” with “New Pujo, Same Emotion” + 3 cards
------------------------------------------------------------ */

@font-face {
	font-family: "Alistair Morrison";
	src: url("./fonts/Alistair-morrison.ttf?v=2.0.1") format("truetype");
	font-display: block;
}

:root {
	--font-h: "Playfair Display", serif;
	--font-b: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
	--font-bn: "Noto Serif Bengali", serif;
	
	letter-spacing: 0.5px;

	--r-xl: 26px;
	--r-lg: 20px;
	--r-md: 16px;

/* 	--shadow-1: 0 16px 40px rgba(0, 0, 0, .10); */
	--shadow-1:	rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
	--shadow-2: 0 22px 60px rgba(0, 0, 0, .18);

	--container: 1040px;
	--gutter: 24px;
	--anchor-offset: 50px;

	--t: 260ms;

	/* Default to day; JS will switch if auto */
	--bg: #F3DBB7;
	/* sampled day strip for seamless blend */
	--page-fill: #F3DBB7;

	/* Embedded hero background (day) */
	--hero-img: url("../assets/background-day.webp");

	/* Side strip texture (day) */
	--edge-strip: none;


	/* Kash band visibility */
	--kash-band-opacity: .95;
/* 	--surface: rgba(255, 255, 255, .64); */
	--surface: rgba(255, 248, 238, .55);
	--surface2: rgba(255, 255, 255, .72);
	--card: rgba(255, 255, 255, .92);
	--text: #80251A;
	--muted: rgba(128, 37, 26, .72);
	--muted2: rgba(128, 37, 26, .55);

	--sindoor: #A63A2B;
	/* deeper maroon */
	--gold: #E0B36A;
	--cream: #FFF2DA;
	--border: rgba(166, 58, 43, .14);

	--pill: rgba(255, 255, 255, .58);
	--pill-border: rgba(166, 58, 43, .12);
	--pill-accent: #F0E1CA;
	--pill-accent-border: rgba(166, 58, 43, .28);

	--hero-grad:
		radial-gradient(1100px 560px at 22% 8%, rgba(224, 179, 106, .62), rgba(251, 242, 228, 0) 58%),
		radial-gradient(900px 480px at 80% 22%, rgba(166, 58, 43, .10), rgba(251, 242, 228, 0) 62%),
		/* fade into page-fill so hero blends into the rest */
		linear-gradient(180deg, rgba(251, 242, 228, 1) 0%, rgba(251, 242, 228, 1) 58%, var(--page-fill) 100%);

	/* Decorative backgrounds (day) */
	--bg-kash:
		/* soft watercolor sky */
		radial-gradient(900px 360px at 18% 28%, rgba(255, 255, 255, .70), rgba(251, 242, 228, 0) 60%),
		radial-gradient(900px 420px at 75% 30%, rgba(224, 179, 106, .22), rgba(251, 242, 228, 0) 62%),
		/* kash field band (bottom) */
		linear-gradient(180deg, rgba(251, 242, 228, 0) 0%, rgba(251, 242, 228, 0) 55%, rgba(251, 242, 228, 1) 100%);

	--bokeh: none;

	--nav-bg: rgba(251, 242, 228, 1);
	--nav-border: rgba(0, 0, 0, .07);

	--section-wash: linear-gradient(180deg, rgba(184, 58, 42, .16), rgba(184, 58, 42, 0));

	--tab-bg: rgba(255, 255, 255, .60);
	--tab-border: rgba(0, 0, 0, .06);
	--tab-active: rgba(184, 58, 42, .14);

	--btn-primary: var(--sindoor);
	--btn-primary-text: #FFF6E9;
	--btn-secondary: rgba(255, 255, 255, .55);
	--btn-secondary-text: var(--text);

	--badge: rgba(255, 255, 255, .55);

	--maa-opacity: .10;
	--alpana-opacity: .11;
	--lights-opacity: 0;
}

/* Auto mode uses data-theme internally; data-mode indicates preference */
html {
	background: transparent;
	color: var(--text);
	scroll-padding-top: var(--anchor-offset);
}

* {
	box-sizing: border-box;
}

[id] {
	scroll-margin-top: var(--anchor-offset);
}

a, button, [role="button"], [tabindex] {
	cursor: pointer;
}

body {
	margin: 0;
	font-family: var(--font-b);
	background-color: var(--page-fill);
	background-image: none;
	color: var(--text);
	transition: background var(--t) ease, color var(--t) ease;
	position: relative;
	z-index: 0;
	isolation: isolate;
	/* keep background layer behind content */
}

/* Full-page hero background that does NOT affect layout */
body::before {
	content: "";
	position: fixed;
	left: 0;
	right: 0;
	top: 64px;
	/* starts below the sticky nav */
	height: calc(100vh - 64px);
	background-image: var(--hero-img);
	background-position: top 0px center;
	background-size: cover;
/* 	background-position: center; */
	background-repeat: no-repeat;
	z-index: -1;
	pointer-events: none;
}

a {
	color: inherit;
	text-decoration: none;
}

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

strong {
	font-weight: 500;
}

/* ------------------------------------------------------------
  Top Nav (matches mock: compact, centered links, small icons)
------------------------------------------------------------ */
.nav {
	position: sticky;
	top: 0;
	z-index: 50;
	backdrop-filter: blur(10px);
	background: var(--nav-bg);
	border-bottom: 1px solid var(--nav-border);
	height: 64px;
	display: flex;
	align-items: center;
}

.nav .container{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	width: 100%;
}

.nav-inner {
	position: relative;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.brand {
	font-family: var(--font-h);
	font-weight: 700;
	font-size: 28px;
	color: var(--sindoor);
	letter-spacing: .2px;
	display: flex;
    gap: 10px;
    align-items: center;
}

.brand .logo {
/* 	height: 40px; */
	height: 50px;
	width: auto;
	display: block;
}

.brand .title {
	height: 40px;
/* 	height: 50px; */
	width: auto;
	display: block;
}

.links {
	display: flex;
	gap: 18px;
	align-items: center;
	color: var(--muted);
	font-size: 13.5px;
	flex-wrap: wrap;
}

.links a {
	padding: 6px 10px;
	border-radius: 999px;
}

.links a.active {
	color: var(--sindoor);
	font-weight: 700;
}

.links a:hover {
	background: rgba(255, 255, 255, .18);
}

.nav-end {
	display: flex;
	align-items: center;
	gap: 14px;
}

.nav-right {
	display: flex;
	align-items: center;
	gap: 10px;
}

.icon-btn {
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border-radius: 999px;
	border: 1px solid var(--nav-border);
	background: rgba(255, 255, 255, .28);
	color: var(--muted);
}

#themeToggle {
	display: none !important;
}

.menu-btn,
.search-btn {
	display: none;
}

/* ------------------------------------------------------------
  HERO
------------------------------------------------------------ */
.hero {
	position: relative;
	overflow: hidden;
	/* Let content define height; background is handled by body::before */
	padding: 60px 0 22px;
	background: transparent;
}

/* Kash field + light wash overlay (subtle) */
/* Kash field + light wash overlay (subtle) */
/* Subtle readability wash over the photo background (keep it LIGHT so photo shows) */
/* 
.hero::before{
  content:"";
  position:absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(243,219,183,.10) 0%,
      rgba(243,219,183,.04) 45%,
      rgba(243,219,183,.18) 100%);
  opacity: .55;
  pointer-events:none;
}
 */

/* 
html[data-theme="night"] .hero::before{
  background:
    linear-gradient(180deg,
      rgba(20,10,7,.10) 0%,
      rgba(20,10,7,.06) 45%,
      rgba(20,10,7,.22) 100%);
  opacity: .60;
}
 */


/* Kash grass / haze band (bottom of hero) — commented out for now
.hero .kash-band{
  position:absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 210px;
  pointer-events:none;
  opacity: var(--kash-band-opacity);
  background:
    radial-gradient(500px 240px at 20% 80%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
    radial-gradient(600px 260px at 55% 85%, rgba(224,179,106,.22), rgba(251,242,228,0) 62%),
    repeating-linear-gradient(90deg,
      rgba(120,86,45,.10) 0 2px,
      rgba(120,86,45,0) 2px 10px),
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 55%, var(--page-fill) 100%);
  filter: blur(.2px);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.85) 28%, rgba(0,0,0,1) 100%);
}
*/

/* Pandal lights sparkle overlay (night) */
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	opacity: calc(var(--lights-opacity) * .7);
	pointer-events: none;
	/* 
  background:
    radial-gradient(circle at 12% 18%, rgba(230,184,107,.55) 0 6px, transparent 7px),
    radial-gradient(circle at 20% 12%, rgba(230,184,107,.45) 0 4px, transparent 5px),
    radial-gradient(circle at 28% 20%, rgba(184,58,42,.30) 0 5px, transparent 6px),
    radial-gradient(circle at 55% 10%, rgba(230,184,107,.40) 0 6px, transparent 7px),
    radial-gradient(circle at 68% 18%, rgba(184,58,42,.26) 0 5px, transparent 6px),
    radial-gradient(circle at 82% 12%, rgba(230,184,107,.34) 0 4px, transparent 5px),
    linear-gradient(180deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.18) 70%, rgba(0,0,0,.28) 100%);
 */
	filter: blur(.2px);
}


.hero-inner {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	align-items: start;
}

.hero-copy {
	text-align: center;
	padding: 6px 0;
	color: #7a1f1f; /* deep maroon */
	text-align: center;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.hero-title {
	display: grid;
	gap: 10px;
	justify-items: center;
	margin: 0;
	line-height: 1;
}

.hero-title-top {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex-wrap: wrap;
	flex-direction: column;
}

.hero-title-bottom {
	display: inline-flex;
	align-items: baseline;
	justify-content: center;
	gap: 12px;
	font-family: var(--font-h);
	font-size: 60px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: color-mix(in oklab, var(--sindoor) 82%, var(--text) 18%);
}

.title-main {
	font-family: "Alistair Morrison", var(--font-h);
	font-size: 66px;
	font-weight: 300;
	line-height: 0.88;
	letter-spacing: 0.02em;
	color: #fd0000;
}

.title-bay {
	font-family: var(--font-h);
	font-size: 22px;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: color-mix(in oklab, var(--sindoor) 84%, var(--text) 16%);
	transform: translateY(-10px);
}

.title-year {
	font-size: 0.95em;
	letter-spacing: 0.08em;
}

.bnline {
	font-family: var(--font-bn);
	display: inline-flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	color: var(--sindoor);
	font-size: clamp(18px, 2vw, 28px);
	margin-bottom: 18px;
	letter-spacing: 0.03em;
}

.bnline .star {
	/*   width: 18px; */
	/*   height: 18px; */
	width: auto;
	display: inline-grid;
	place-items: center;
	/*   border-radius: 999px; */
	/*   background: rgba(230,184,107,.18); */
	/*   border: 1px solid rgba(230,184,107,.22); */
	color: color-mix(in oklab, var(--sindoor) 70%, var(--text) 30%);
	font-weight: 800;
	/*   font-size: 12px; */
}

h1 {
	margin: 0;
	font-family: var(--font-h);
	font-size: 48px;
	line-height: 1.15;
	letter-spacing: .3px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .18);
}

.subtitle {
	margin: 18px auto 0;
	max-width: 70ch;
	color: var(--muted);
	font-size: 16px;
	line-height: 1.35;
	letter-spacing: 0.02em;
}

@media (max-width: 768px) {
	.hero{
		padding-top: 38px;
	}
	
	.hero-inner {
		gap: 30px;
	}

	.hero-copy {
		padding: 4px 0 0;
	}

	.hero-title {
		gap: 16px;
	}

	.hero-title-top {
		flex-direction: column;
		flex-wrap: wrap;
		align-items: center;
		gap: 0px;
	}

	.hero-title-bottom {
		display: block;
		font-size: 40px;
		line-height: 1;
		letter-spacing: 0.01em;
	}

	.title-main {
		font-size: 54px;
		line-height: 0.88;
	}

	.title-bay {
		transform: none;
		font-size: 22px;
		line-height: 1;
		letter-spacing: 0.03em;
	}

	.title-year {
		letter-spacing: 0.04em;
	}

	.subtitle {
		max-width: 100%;
		margin-top: 10px;
		font-size: 15px;
		line-height: 1.32;
	}

	.hero-pill {
		margin-top: 2px;
		padding: 12px 12px 10px;
	}
}

/* ------------------------------------------------------------
  Today’s Highlights Panel
  (Overlap slightly onto hero like the mock — no big push-down)
------------------------------------------------------------ */
.section {
/* 	padding: 0 0 34px; */
	margin-top: -10px;
	background: transparent;
}

.panel {
/* 	max-width: 920px; */
	margin: 0 auto;
	margin-top: 40px;
/* 	background: rgba(255, 248, 238, .75); */
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-1);
	backdrop-filter: blur(4px);
	overflow: hidden;
	position: relative;
}

/* faint alpana texture inside the panel */
.panel::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .10;
	background:
		radial-gradient(circle at 20% 30%, rgba(166, 58, 43, .18) 0 2px, transparent 3px),
		radial-gradient(circle at 35% 55%, rgba(166, 58, 43, .14) 0 2px, transparent 3px),
		radial-gradient(circle at 60% 35%, rgba(166, 58, 43, .12) 0 2px, transparent 3px),
		radial-gradient(circle at 70% 60%, rgba(166, 58, 43, .10) 0 2px, transparent 3px);
	filter: blur(.2px);
}

.panel-head {
	padding: 18px 20px 14px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 10px;
	border-bottom: 1px solid rgba(184, 58, 42, .10);
	background: linear-gradient(90deg, rgba(255, 236, 205, .44), rgba(255, 236, 205, .06));
}

.panel-eyebrow {
	margin: 0;
	font-family: var(--font-bn);
	font-size: 14px;
	color: color-mix(in oklab, var(--sindoor) 56%, var(--text) 44%);
	letter-spacing: .2px;
}

.panel-title {
	font-family: var(--font-h);
	font-size: 28px;
	margin: 0;
	color: color-mix(in oklab, var(--text) 92%, var(--sindoor) 8%);
	line-height: 1.1;
}

.panel-body {
	padding: 0 20px 20px;
}

.cards {
	display: grid;
	grid-template-columns: 1.1fr 1fr 1fr;
	gap: 16px;
}

.card {
	background: linear-gradient(180deg, rgba(255, 249, 239, .72), rgba(255, 242, 222, .64));
	border: 1px solid rgba(166, 58, 43, .13);
	border-radius: var(--r-md);
	padding: 16px 16px 14px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 8px 18px rgba(0, 0, 0, .09);
	transition: transform var(--t) ease, box-shadow var(--t) ease;
	color: rgba(128, 37, 26, .90);
	min-height: 206px;
	display: flex;
	flex-direction: column;
}

.card-kicker {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.card-ico {
	width: 34px;
	height: 34px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	background: rgba(184, 58, 42, .12);
	color: color-mix(in oklab, var(--sindoor) 78%, var(--text) 22%);
	font-size: 14px;
	flex: 0 0 34px;
}

.card-date {
	font-family: var(--font-b);
	font-size: 14px;
	font-weight: 700;
	color: rgba(128, 37, 26, .62);
	display: inline-block;
	margin-left: 6px;
}

.card:hover {
	transform: translateY(-1px);
	box-shadow: var(--shadow-2);
}

.card h3 {
	margin: 0;
	font-family: var(--font-h);
	font-size: 18px;
	color: rgba(128, 37, 26, .92);
	line-height: 1.1;
}

.card p {
	margin: 0;
	color: rgba(128, 37, 26, .68);
	font-size: 13.5px;
	line-height: 1.5;
	flex: 1;
}

.list {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
	color: rgba(128, 37, 26, .74);
	font-size: 13px;
	line-height: 1.45;
	flex: 1;
	align-content: start;
}

.li {
	display: grid;
	grid-template-columns: 58px 1fr;
	gap: 10px;
	align-items: baseline;
	padding: 7px 10px;
	border-radius: 10px;
	background: rgba(184, 58, 42, .06);
}

.event-time {
	font-weight: 700;
	color: rgba(128, 37, 26, .88);
	letter-spacing: .1px;
	white-space: nowrap;
	text-align: right;
}

.mini-btn {
/* 	margin-top: 14px; */
	margin-top: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 15px;
	border-radius: 999px;
	border: 1px solid rgba(161, 68, 42, .32);
	background: linear-gradient(180deg, #C85A34, #B24826);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .2px;
	box-shadow: 0 8px 18px rgba(161, 68, 42, .24);
}

.mini-btn.alt {
	background: linear-gradient(180deg, #D27349, #BC5A33);
}

.mini-btn::after {
	content: " ›";
	margin-left: 4px;
}

/* Bottom sticky tab bar inside panel */
.tabs {
	display: flex;
	gap: 0;
	padding: 14px 0 16px;
/* 	border-bottom: 1px solid var(--tab-border); */
	align-items: center;
	justify-content: center;
}

.tabset {
	display: flex;
	gap: 8px;
	align-items: center;
}

.tab {
	padding: 9px 14px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	font-family: inherit;
	color: var(--muted);
	border: 1px solid transparent;
	background: transparent;
	position: relative;
	white-space: nowrap;
	transition: color var(--t) ease;
}

.tab.active {
	color: color-mix(in oklab, var(--sindoor) 86%, var(--text) 14%);
	border-color: transparent;
	background: transparent;
	box-shadow: none;
}

.tab.active::before {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: -2px;
	height: 2px;
	border-radius: 999px;
	background: linear-gradient(90deg, rgba(184, 58, 42, .92), rgba(224, 179, 106, .82));
}

.tab:not(:last-child)::after {
	content: "•";
	position: absolute;
	right: -8px;
	top: 50%;
	transform: translateY(-50%);
	color: rgba(128, 37, 26, .30);
	font-size: 12px;
}

.tab-ico {
	display: flex;
	gap: 10px;
	align-items: center;
	color: var(--muted);
	font-weight: 700;
	font-size: 12px;
}

/* ------------------------------------------------------------
  Replacement Section: New Pujo, Same Emotion
------------------------------------------------------------ */
.wash {
	height: 1px;
	border: 0;
	background: var(--section-wash);
	margin: 40px auto 0;
	max-width: 980px;
}

.community {
	padding: 28px 0 0px;
}

.community-inner {
	max-width: 980px;
	margin: 0 auto;
	text-align: center;
}

.community h2 {
	margin: 18px 0 10px;
	font-family: var(--font-h);
	font-size: 34px;
	letter-spacing: .2px;
}

.community p {
	margin: 0 auto;
	max-width: 78ch;
/* 	color: var(--muted); */
	color: var(--sindoor);
	font-size: 16.5px;
	line-height: 1.65;
	font-weight: 500;
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-radius: 999px;
	background: var(--badge);
	border: 1px solid var(--border);
	color: var(--muted);
	font-weight: 800;
	font-size: 12px;
}

.community-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-top: 36px;
	text-align: left;
}

.community-card {
	background: linear-gradient(180deg, rgba(255, 249, 239, .72), rgba(255, 242, 222, .64));
	backdrop-filter: blur(4px);
	border: 1px solid rgba(166, 58, 43, .13);
	border-radius: var(--r-md);
	padding: 16px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 10px 22px rgba(0, 0, 0, .10);
	transition: transform var(--t) ease, box-shadow var(--t) ease;
	color: rgba(128, 37, 26, .92);
	min-height: 200px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
}

.community-card:hover {
	transform: translateY(-1px);
	box-shadow: var(--shadow-2);
}

.community-kicker {
	display: flex;
	align-items: center;
	gap: 10px;
}

.community-ico {
	width: 34px;
	height: 34px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	background: rgba(184, 58, 42, .12);
	color: color-mix(in oklab, var(--sindoor) 78%, var(--text) 22%);
	font-size: 14px;
	flex: 0 0 34px;
}

.community-card h3 {
	margin: 0;
	font-family: var(--font-h);
	font-size: 20px;
	color: rgba(128, 37, 26, .94);
}

.community-card .desc {
	margin: 0;
	color: rgba(128, 37, 26, .70);
	line-height: 1.6;
	font-size: 13.5px;
	flex: 1;
	font-weight: 300;
}

.community-btn {
	width: 220px;
	max-width: 100%;
	justify-content: center;
}


/* ------------------------------------------------------------
  Responsive
------------------------------------------------------------ */
@media (max-width: 980px) {
	body::before {
		background-position: right 0px center;
	}

	.nav-end {
		position: relative;
	}

	.links {
		display: none;
	}

	.links.menu-open {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 6px;
		position: absolute;
		top: calc(100% + 10px);
		right: 0;
		min-width: 240px;
		padding: 10px;
		background: var(--nav-bg);
		border: 1px solid var(--nav-border);
		border-radius: 12px;
		box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
		backdrop-filter: blur(10px);
		z-index: 60;
	}

	.links.menu-open a {
		display: block;
		width: 100%;
		padding: 10px 12px;
		border-radius: 10px;
	}

	.menu-btn {
		display: grid;
	}

	.hero-pill {
		max-width: 100%;
	}

	.pill-chips {
		gap: 10px;
	}

	.pill-chip {
		min-width: 0;
		width: 100%;
	}

	.panel-head {
		padding: 14px 14px 12px;
	}

	.panel-eyebrow {
		font-size: 12.5px;
	}

	.panel-title {
		font-size: 22px;
	}

	.panel-body {
		padding: 0 12px 14px;
	}

	.tabs {
		justify-content: flex-start;
		overflow-x: auto;
		padding: 12px 0 14px;
		scrollbar-width: none;
	}

	.tabs::-webkit-scrollbar {
		display: none;
	}

	.tabset {
		min-width: max-content;
		padding-right: 10px;
	}

	.card {
		min-height: 0;
	}

	.cards {
		grid-template-columns: 1fr;
	}

	.community-cards {
		grid-template-columns: 1fr;
	}

/* 
	.community p {
		font-weight: 500;
		line-height: 1.2;
	}
 */

	.community-btn {
		width: 100%;
	}

	h1 {
		font-size: 36px;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
	}
}


/* ------------------------------------------------------------
  HERO PILL (Quick actions) — styles restored
------------------------------------------------------------ */
.hero-pill {
	max-width: 920px;
	margin: 12px auto;
	background: var(--surface);
/* 	background: rgba(255, 248, 238, .55); */
	backdrop-filter: blur(4px);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-1);
/* 	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; */
/* 	backdrop-filter: blur(10px); */
	overflow: hidden;
	position: relative;
	padding: 16px 16px 14px;
}

.pill-chips {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	margin-bottom: 2px;
}

.pill-chip {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	min-width: 210px;
	border-radius: 14px;
/* 
	border: 1px solid var(--pill-border);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .66), rgba(255, 255, 255, .34));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 20px rgba(0, 0, 0, .07);
 */
	color: var(--text);
	
	border: 1px solid rgba(166, 58, 43, .15);
    background: linear-gradient(180deg, rgba(255, 249, 239, .74), rgba(255, 242, 222, .62));
}

.pill-chip i {
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border-radius: 999px;
	background: rgba(166, 58, 43, .12);
	color: color-mix(in oklab, var(--sindoor) 82%, var(--text) 18%);
	font-size: 14px;
	flex: 0 0 30px;
}

.pill-copy {
	display: grid;
	gap: 2px;
}

.pill-label {
	font-size: 11px;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: .9px;
	color: var(--muted2);
	font-weight: 700;
}

.pill-value {
	font-size: 15px;
	line-height: 1.25;
	font-weight: 600;
	color: var(--text);
}

.pill-chip.accent {
	background: linear-gradient(180deg, rgba(240, 225, 202, .92), rgba(236, 214, 178, .84));
	border-color: rgba(166, 58, 43, .26);
	color: var(--text);
}

.pill-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 14px;
	border-radius: 999px;
	font-weight: 800;
	font-size: 12.5px;
	border: 1px solid transparent;
	transition: transform var(--t) ease, box-shadow var(--t) ease, background var(--t) ease;
	user-select: none;
	cursor: pointer;
	white-space: nowrap;
}

.btn.primary {
	background: var(--btn-primary);
	color: var(--btn-primary-text);
	border-color: rgba(0, 0, 0, .08);
	box-shadow: 0 10px 22px rgba(0, 0, 0, .18);
}

.btn.secondary {
	background: var(--btn-secondary);
	color: var(--btn-secondary-text);
	border-color: var(--pill-border);
}

.btn:hover {
	transform: translateY(-1px);
	box-shadow: var(--shadow-2);
}

@media (max-width: 980px) {
	.stamp {
		display: none;
	}
}

/* ------------------------------------------------------------
  Added Sections: Gallery + Heritage
------------------------------------------------------------ */
.section-kicker {
	margin: 0;
	font-size: 12px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	font-weight: 800;
	color: color-mix(in oklab, var(--sindoor) 78%, var(--text) 22%);
}

.section-title {
	margin: 14px 0 0;
	font-family: var(--font-h);
	font-size: 52px;
	color: var(--text);
	line-height: 1.12;
	position: relative;
	display: inline-block;
}

.section-title::after {
	content: "";
	display: block;
	width: 72px;
	height: 4px;
	border-radius: 999px;
	background: linear-gradient(90deg, rgba(184, 58, 42, .92), rgba(224, 179, 106, .84));
	margin: 12px auto 0;
}

.gallery-section {
/* 	padding: 0 0 24px; */
}

.gallery-panel {
	max-width: 980px;
}

.gallery-marquee {
	overflow: hidden;
	padding: 16px 0 20px;
	border-top: 1px solid rgba(184, 58, 42, .10);
	border-bottom: 1px solid rgba(184, 58, 42, .10);
}

.gallery-track {
	display: flex;
	width: max-content;
	animation: gallery-scroll 58s linear infinite;
}

.gallery-group {
	display: flex;
	gap: 14px;
	padding-right: 14px;
	flex-shrink: 0;
}

.gallery-item {
	border: 1px solid rgba(166, 58, 43, .14);
	background: linear-gradient(180deg, rgba(255, 249, 239, .70), rgba(255, 242, 222, .58));
	border-radius: 14px;
	padding: 6px;
	width: 250px;
	height: 215px;
	overflow: hidden;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .50), 0 8px 16px rgba(0, 0, 0, .10);
	transition: transform var(--t) ease, box-shadow var(--t) ease, border-color var(--t) ease;
}

.gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
	display: block;
}

.gallery-item:hover {
	transform: translateY(-2px);
	border-color: rgba(184, 58, 42, .34);
	box-shadow: 0 14px 24px rgba(67, 29, 18, .16);
}

.gallery-marquee:hover .gallery-track,
.gallery-marquee:focus-within .gallery-track {
	animation-play-state: paused;
}

@keyframes gallery-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

.heritage {
	background: transparent;
	padding: 0 0 16px;
}

.heritage-panel {
	max-width: 980px;
}

.heritage-body {
	padding: 14px 16px 20px;
}

.celebration-list {
	margin: 0;
}

.celebration-card {
	background: linear-gradient(180deg, rgba(255, 249, 239, .74), rgba(255, 242, 222, .62));
	border: 1px solid rgba(166, 58, 43, .15);
/* 	border-top: 6px solid rgba(208, 95, 52, .92); */
	border-radius: 18px;
	padding: 18px;
	display: grid;
	grid-template-columns: 420px 1fr;
	gap: 24px;
	align-items: start;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .48), 0 14px 26px rgba(67, 29, 18, .12);
}

.celebration-image {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 12px;
	border: 1px solid rgba(166, 58, 43, .15);
	box-shadow: 0 8px 18px rgba(0, 0, 0, .14);
}

.celebration-copy h3 {
	margin: 0;
	font-family: var(--font-h);
	font-size: 23px;
	color: color-mix(in oklab, var(--text) 90%, var(--sindoor) 10%);
}

.celebration-copy p {
	margin: 16px 0 0;
	font-size: 15.5px;
	line-height: 1.62;
	color: var(--muted);
	max-width: 55ch;
}

.heritage-btn {
	margin-top: 28px;
}

@media (max-width: 980px) {
	.gallery-section {
/* 		padding: 0 0 10px; */
	}

	.heritage {
		padding: 0 0 12px;
	}

	.gallery-marquee {
		padding: 12px 0 14px;
	}

	.gallery-item {
		width: 206px;
		height: 136px;
	}

	.heritage-body {
		padding: 10px 12px 14px;
	}

	.celebration-card {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 14px;
		border-top-width: 5px;
	}

	.celebration-copy h3 {
		font-size: 24px;
	}

	.celebration-copy p {
		font-size: 15px;
		margin-top: 12px;
	}

	.heritage-btn {
		width: 100%;
	}
}

.contact-section {
	padding: 10px 0 34px;
}

.contact-panel {
	max-width: 980px;
}

.contact-head {
	text-align: center;
}

.contact-body {
	padding: 14px 16px 20px;
}

.contact-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.contact-item {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	background: linear-gradient(180deg, rgba(255, 249, 239, .74), rgba(255, 242, 222, .62));
	border: 1px solid rgba(166, 58, 43, .15);
	border-radius: 14px;
	padding: 12px;
	color: inherit;
}

.contact-ico {
	width: 32px;
	height: 32px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	background: rgba(184, 58, 42, .12);
	color: color-mix(in oklab, var(--sindoor) 78%, var(--text) 22%);
	flex: 0 0 32px;
}

.contact-label {
	margin: 0;
	font-size: 12px;
	letter-spacing: .8px;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--muted2);
}

.contact-value {
	margin: 4px 0 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--text);
}

.social-links {
	margin-top: 24px;
	display: flex;
	gap: 10px;
	justify-content: center;
}

.social-links a {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border-radius: 999px;
	background: linear-gradient(180deg, #C85A34, #B24826);
	color: #fff;
	border: 1px solid rgba(161, 68, 42, .32);
	box-shadow: 0 8px 16px rgba(161, 68, 42, .22);
}

.site-footer {
	padding: 14px 0 26px;
}

.site-footer p {
	margin: 0;
	text-align: center;
	font-size: 13px;
	color: var(--muted2);
}

@media (max-width: 980px) {
	.contact-section {
		padding: 6px 0 24px;
	}

	.contact-body {
		padding: 10px 12px 14px;
	}

	.contact-grid {
		grid-template-columns: 1fr;
	}

	.site-footer {
		padding: 10px 0 20px;
	}
}

.gallery-modal {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: grid;
	place-items: center;
	padding: 20px;
}

.gallery-modal[hidden] {
	display: none !important;
}

.gallery-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 10, 7, .64);
	backdrop-filter: blur(2px);
}

.gallery-modal-content {
	position: relative;
	margin: 0;
	width: min(900px, 100%);
	background: linear-gradient(180deg, rgba(255, 249, 239, .94), rgba(255, 242, 222, .90));
	border: 1px solid rgba(166, 58, 43, .24);
	border-radius: 16px;
	padding: 12px 12px 14px;
	box-shadow: 0 22px 44px rgba(0, 0, 0, .34);
	z-index: 1;
}

.gallery-modal-content img {
	width: 100%;
	max-height: 70vh;
	object-fit: contain;
	border-radius: 10px;
	display: block;
	background: rgba(0, 0, 0, .05);
}

.gallery-modal-content figcaption {
	margin-top: 10px;
	color: var(--text);
	font-weight: 600;
	font-size: 14px;
	text-align: center;
}

.gallery-modal-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(166, 58, 43, .22);
	background: rgba(255, 255, 255, .80);
	border-radius: 999px;
	display: grid;
	place-items: center;
	color: var(--text);
}

body.modal-open {
	overflow: hidden;
}