/* =========================================================
   SRIJITA & ARNAB
   FINAL IMAGE-DRIVEN WEDDING INVITATION
========================================================= */

:root {
  --cream: #fff8ed;
  --paper: #f2e4cf;
  --paper-dark: #dec7a8;
  --wine: #6f102d;
  --wine-deep: #3d0919;
  --teal: #0e6170;
  --teal-deep: #0b4856;
  --gold: #c59b57;
  --gold-light: #efd49b;
  --green: #4e7564;
  --text: #302629;

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --script: "Great Vibes", "Brush Script MT", cursive;
  --bengali: "Noto Serif Bengali", "Nirmala UI", "Vrinda", serif;
  --sans: "DM Sans", "Segoe UI", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  width: 100%;
}
body {
  margin: 0;
  color: var(--text);
  background: var(--cream);
  font-family: var(--sans);
  overflow-x: hidden;
}
body.locked {
  overflow: hidden;
}
img {
  display: block;
  max-width: 100%;
}
a {
  text-decoration: none;
  color: inherit;
}
button,
input,
select {
  font: inherit;
}
button {
  cursor: pointer;
}
::selection {
  background: var(--wine);
  color: white;
}

.bengali {
  font-family: var(--bengali);
}

.hidden {
  display: none !important;
}

/* =========================================================
   LOADER
========================================================= */

.loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  align-content: center;
  background: var(--wine-deep);
  color: var(--cream);
  transition:
    opacity 0.6s,
    visibility 0.6s;
}
.loader.hide {
  opacity: 0;
  visibility: hidden;
}
.loader-flower {
  color: var(--gold-light);
  font-size: 45px;
  animation: loaderSpin 3s linear infinite;
}
.loader p {
  margin: 12px 0 4px;
  font-size: 22px;
}
.loader span {
  font-size: 8px;
  letter-spacing: 4px;
}
@keyframes loaderSpin {
  to {
    transform: rotate(360deg);
  }
}

/* =========================================================
   COVER
========================================================= */

/* =========================================================
   ENVELOPE INTRO
========================================================= */

.envelope {
  position: fixed;
  inset: 0;
  z-index: 9500;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--cream);
  cursor: pointer;
  transition:
    opacity 0.7s ease 0.15s,
    visibility 0.7s ease 0.15s;
}
.envelope.open {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.envelope-paper {
  position: absolute;
  inset: 0;
  background:
    url("assets/invitation-flower-left.png") left top / 260px no-repeat,
    url("assets/invitation-flower-right.png") right bottom / 260px no-repeat,
    radial-gradient(
      ellipse at center,
      rgba(255, 248, 237, 0) 0%,
      rgba(111, 16, 45, 0.06) 100%
    );
  opacity: 0.9;
}
.envelope-stage {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 26px;
  perspective: 1400px;
}
.envelope-box {
  position: relative;
  width: min(78vw, 300px);
  height: min(56vw, 215px);
  transform: scale(1);
  transition: transform 0.5s ease 0.55s;
}
.envelope.open .envelope-box {
  transform: scale(0.94);
}
.envelope-back {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #8a1830, var(--wine-deep));
  box-shadow: 0 25px 60px rgba(45, 6, 16, 0.35);
}
.envelope-front {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 62%;
  background: linear-gradient(155deg, #9c1f39, #6f102d);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  z-index: 3;
}
.envelope-front::before,
.envelope-front::after {
  content: "";
  position: absolute;
  top: 0;
  width: 52%;
  height: 100%;
  background: linear-gradient(160deg, #a52344, #7a1531);
  opacity: 0.55;
}
.envelope-front::before {
  left: 0;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.envelope-front::after {
  right: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.envelope-flap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 62%;
  background: linear-gradient(200deg, #b3284a, #8a1830);
  clip-path: polygon(0 0, 100% 0, 50% 92%);
  transform-origin: top center;
  transform-style: preserve-3d;
  transition: transform 0.85s cubic-bezier(0.6, 0.05, 0.25, 1) 0.2s;
  z-index: 4;
  border-bottom: 1px solid rgba(239, 212, 155, 0.35);
}
.envelope.open .envelope-flap {
  transform: rotateX(-178deg);
}
.envelope-seal {
  position: absolute;
  top: 46%;
  left: 50%;
  width: 68px;
  height: 68px;
  transform: translate(-50%, -50%) scale(1);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f0d79b, var(--gold) 70%);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 16px rgba(45, 6, 16, 0.4);
  z-index: 5;
  transition:
    transform 0.4s ease,
    opacity 0.4s ease;
}
.envelope-seal span {
  font-family: var(--serif);
  font-size: 11px;
  font-weight: 600;
  color: var(--wine-deep);
  text-align: center;
  line-height: 1.2;
}
.envelope.open .envelope-seal {
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
}
.envelope-hint {
  margin: 0;
  font-size: 10px;
  letter-spacing: 4px;
  color: var(--wine);
  animation: envelopePulse 1.8s ease-in-out infinite;
}
.envelope.open .envelope-hint {
  animation: none;
  opacity: 0;
}
@keyframes envelopePulse {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

.cover {
  position: fixed;
  inset: 0;
  z-index: 9000;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--wine-deep);
  transition:
    transform 1.05s cubic-bezier(0.82, 0, 0.16, 1),
    opacity 0.7s;
}
.cover.exit {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
/* Fills every edge of the screen with a soft, darkened blow-up of the same
   card so there is never any empty space, on any screen shape. */
.cover-backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url("assets/cover-card.png") center/cover no-repeat;
  filter: blur(50px) brightness(0.5) saturate(1.15);
  transform: scale(1.2);
}
/* The real invitation-card artwork, shown in full (never cropped) and
   scaled up as large as the screen allows. */
.cover-bg-image {
  position: relative;
  z-index: 2;
  height: 100%;
  width: auto;
  max-width: 100%;
  max-height: 100vh;
  max-height: 100dvh;
  object-fit: contain;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
}
.cover-button {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%);
  padding: 14px 26px;
  border: 1px solid var(--gold);
  background: rgba(61, 9, 25, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  color: var(--cream);
  font-size: 10px;
  letter-spacing: 2px;
  white-space: nowrap;
  transition: 0.35s;
}
.cover-button:hover {
  background: var(--gold);
  color: var(--wine-deep);
  transform: translateX(-50%) translateY(-3px);
}

/* On typical phone-portrait screens the card's own aspect ratio leaves
   letterboxing under "contain" — fill the screen edge-to-edge instead,
   trimming a little off the sides rather than showing blurred backdrop. */
@media (max-width: 700px) {
  .cover-bg-image {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
  }
}


/* =========================================================
   INTRO (preserved) — cover button on small phones,
   Boubhaat-link cover background
========================================================= */

@media (max-width: 600px) {
  .cover-button {
    padding: 12px 20px;
    bottom: 5%;
    font-size: 9px;
  }
}
body.mode-reception-only #cover {
  background: linear-gradient(180deg, #f0e3cf, #dac4a5);
}

/* =========================================================
   NEW DESIGN — tokens
========================================================= */

:root {
  --wine2: #8e1428;
  --wine3: #6c0f22;
  --ink: #3a2a2a;
  --parch: #f5dbb0;
  --gold2: #d9ab62;
}

.site {
  background: #2b0b15;
}
.script {
  font-family: var(--script);
  font-weight: 400;
  color: var(--wine2);
}
.ic {
  display: block;
  width: 24px;
  height: 24px;
}

/* =========================================================
   NAV
========================================================= */

.nav {
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  height: 60px;
  padding: 0 clamp(14px, 3vw, 34px);
  background:
    linear-gradient(180deg, rgba(251, 238, 212, 0.98), rgba(243, 222, 183, 0.98));
  border-bottom: 1px solid rgba(190, 140, 70, 0.55);
  box-shadow:
    0 3px 14px rgba(40, 10, 10, 0.28),
    inset 0 -3px 0 rgba(255, 244, 220, 0.6);
  color: var(--ink);
}
.nav.scrolled {
  background:
    linear-gradient(180deg, rgba(251, 238, 212, 0.99), rgba(243, 222, 183, 0.99));
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.brand-name {
  font-family: var(--script);
  font-size: 27px;
  line-height: 1;
  color: var(--wine2);
}
.brand-orn {
  color: var(--wine2);
  font-size: 13px;
}
.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: clamp(12px, 2vw, 26px);
}
/* keep anchored sections clear of the fixed bar */
main section[id] {
  scroll-margin-top: 60px;
}
.site main {
  padding-top: 60px;
}
.nav-links a {
  position: relative;
  padding: 6px 0;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: none;
  color: var(--ink);
}
.nav-links a:hover {
  color: var(--wine2);
}
.nav-links a.active {
  color: var(--wine2);
}
.nav-links a.active::after {
  content: "❖";
  position: absolute;
  left: 50%;
  bottom: -9px;
  transform: translateX(-50%);
  font-size: 7px;
  line-height: 1;
  background: #f6e4c3;
  padding: 0 3px;
}
.nav-links a.active::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: var(--wine2);
}
.menu {
  display: none;
  color: var(--wine2);
  font-size: 26px;
  background: none;
  border: 0;
}

/* =========================================================
   PLATES — artwork with live text laid over it
   The artwork (assets/design/*.jpg) has NO text in it any more;
   every word is an HTML element positioned on top.
========================================================= */

.plate {
  --q: 1cqw;
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
  background: #2b0b15;
}
.p-intro { --bg: url("assets/design/intro.jpg"); }
.p-prelude { --bg: url("assets/design/prelude.jpg"); }
.p-srijita { --bg: url("assets/design/srijita.jpg"); }
.p-arnab { --bg: url("assets/design/arnab.jpg"); }
.p-biye { --bg: url("assets/design/biye.jpg"); }
.p-boubhaat { --bg: url("assets/design/boubhaat.jpg"); }
.stage {
  position: relative;
  width: calc(var(--mz, 1) * 100%);
  margin-left: calc((1 - var(--mz, 1)) * var(--mx, 50) * 1%);
  container-type: inline-size;
}
.plate-bg {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

/* Phones: zoom the artwork in so the text is readable and still sits
   inside the parchment panel of the picture. */
.p-intro {
  --mz: 1.45;
  --mx: 58;
}
.p-prelude {
  --mz: 1.55;
  --mx: 48;
}
.p-srijita {
  --mz: 1.9;
  --mx: 38;
}
.p-arnab {
  --mz: 1.8;
  --mx: 20;
}
.p-biye,
.p-boubhaat {
  --mz: 1.5;
  --mx: 53;
}
@media (min-width: 700px) {
  .stage {
    width: min(100%, 860px) !important;
    margin-left: auto !important;
    margin-right: auto;
  }
  /* extended backdrop: the same picture, enlarged + blurred, behind the sharp one */
  .plate::before,
  .rsvp::before,
  .culture-quote::before {
    content: "";
    position: absolute;
    inset: -60px;
    z-index: -1;
    background: var(--bg) center / cover no-repeat;
    filter: blur(30px) saturate(1.15);
  }
  /* feather the sharp artwork's left/right edges into the backdrop */
  .plate-bg,
  .culture-quote img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  }
}

.tx {
  position: absolute;
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink);
}
.tx.script {
  white-space: nowrap;
  color: var(--wine2);
}
.col .script,
.col h1,
.col h2 {
  color: var(--wine2);
}

/* flowing text columns on the story plates */
.col {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--ink);
}
.col > * {
  margin-bottom: 0;
}
.col p,
.col h1,
.col h2 {
  margin-block: 0;
  font-family: var(--serif);
  font-weight: 500;
}
.col .script {
  font-family: var(--script);
  font-weight: 400;
  white-space: nowrap;
}
.col .c-orn {
  display: block;
  text-align: center;
}
.col .c-rule {
  align-self: center;
}
.col-sri .c-p,
.col-arn .c-p {
  text-align: left;
}
.col-sri .c-sub {
  color: var(--wine2);
  font-weight: 600;
}
.col-arn .c-sub {
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}
.col-intro .c-sub {
  font-weight: 500;
}
.col .c-btn {
  align-self: center;
}
h1.tx,
h2.tx {
  font-weight: 400;
}

/* ornaments */
.rule {
  display: flex;
  align-items: center;
  justify-content: center;
}
.rule i {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(142, 20, 40, 0.75));
}
.rule i:last-child {
  background: linear-gradient(270deg, transparent, rgba(142, 20, 40, 0.75));
}
.rule b {
  margin: 0 1.2cqw;
  font-size: 2.8cqw;
  line-height: 1;
  color: var(--wine2);
}
.orn {
  display: block;
  text-align: center;
  color: var(--wine2);
  line-height: 1;
}

/* postmark stamps */
.stamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 50%;
  border: 0.32cqw solid currentColor;
  background: rgba(243, 226, 194, 0.9);
  font-family: var(--serif);
  font-size: 1.35cqw;
  line-height: 1.25;
  letter-spacing: 0.12em;
  color: #5b4b40;
  font-weight: 600;
}
.stamp::after {
  content: "";
  position: absolute;
  inset: 0.7cqw;
  border: 0.12cqw solid currentColor;
  border-radius: 50%;
  opacity: 0.8;
}
.stamp b {
  font-weight: 700;
  font-size: 1.15em;
}
.stamp i {
  font-style: normal;
  font-size: 2.1em;
  line-height: 1;
}
.stamp span {
  font-weight: 600;
}
.stamp em {
  font-style: normal;
  font-weight: 700;
  font-size: 1.1em;
}
.stamp-ink {
  color: #3d3a37;
  font-size: 1.3cqw;
}
.stamp-red {
  color: #a8202e;
  font-size: 1.5cqw;
}

/* buttons */
.pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8em;
  text-align: center;
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: 0.07em;
  white-space: nowrap;
  color: #fbe9c8;
  background: linear-gradient(180deg, #a31d34 0%, #6c0f22 100%);
  border: 0.28cqw solid var(--gold2);
  border-radius: 999px;
  box-shadow:
    0 0 0 0.25cqw rgba(110, 15, 34, 0.9),
    0 1.2cqw 2.4cqw rgba(60, 5, 15, 0.35),
    inset 0 0 1.2cqw rgba(255, 220, 160, 0.18);
  transition:
    filter 0.25s,
    transform 0.25s;
}
.pill-btn:hover {
  filter: brightness(1.15);
}
.col .pill-btn {
  padding: 0 3.4cqw;
}

/* =========================================================
   INVITATION CARDS (Biye / Boubhaat)
   Flow layout on top of the artwork; sizes are in cqw so the text
   scales with the picture.
========================================================= */

.inv {
  position: absolute;
  left: 28.4%;
  width: 48.4%;
  top: 4.4%;
  text-align: center;
  color: var(--ink);
}
.inv p,
.inv h2 {
  margin: 0;
  white-space: nowrap;
}
.inv p {
  font-size: calc(2.4 * var(--q) * var(--u, 1));
  line-height: calc(2.9 * var(--q) * var(--u, 1));
  font-weight: 500;
}
.inv .rule {
  margin: calc(0.9 * var(--q) * var(--u, 1)) calc(3 * var(--q) * var(--u, 1));
  height: calc(2 * var(--q) * var(--u, 1));
}
.inv .rule b {
  font-size: calc(2.4 * var(--q) * var(--u, 1));
}
.inv .orn {
  font-size: calc(2.3 * var(--q) * var(--u, 1));
  margin: calc(0.3 * var(--q) * var(--u, 1)) 0 calc(0.1 * var(--q) * var(--u, 1));
}
.inv .orn-sm {
  font-size: calc(1.8 * var(--q) * var(--u, 1));
  margin: calc(0.6 * var(--q) * var(--u, 1)) 0 calc(0.4 * var(--q) * var(--u, 1));
}
.inv-invoke {
  font-size: calc(1.8 * var(--q) * var(--u, 1)) !important;
  line-height: calc(2.3 * var(--q) * var(--u, 1)) !important;
  color: var(--wine2);
  font-weight: 600 !important;
}
.inv-title {
  font-size: calc(9.2 * var(--q) * var(--u, 1));
  line-height: calc(9.6 * var(--q) * var(--u, 1));
  font-weight: 700;
  color: var(--wine2);
  margin: 0;
}
.inv-quote {
  font-size: calc(2.8 * var(--q) * var(--u, 1)) !important;
  line-height: calc(3.4 * var(--q) * var(--u, 1)) !important;
  font-weight: 600 !important;
  color: var(--wine2);
}
.inv-by {
  font-size: calc(1.9 * var(--q) * var(--u, 1)) !important;
  line-height: calc(2.4 * var(--q) * var(--u, 1)) !important;
}
.inv-name {
  font-size: calc(4.7 * var(--q) * var(--u, 1)) !important;
  line-height: calc(5.2 * var(--q) * var(--u, 1)) !important;
  font-weight: 700 !important;
  color: var(--wine2);
  margin: 0 !important;
}
.inv-name-sm {
  font-size: calc(4.1 * var(--q) * var(--u, 1)) !important;
  line-height: calc(4.8 * var(--q) * var(--u, 1)) !important;
}
.inv-host {
  font-size: calc(2.9 * var(--q) * var(--u, 1)) !important;
  line-height: calc(3.4 * var(--q) * var(--u, 1)) !important;
  font-weight: 700 !important;
  color: var(--wine2);
}
.inv-host small {
  font-size: calc(2.4 * var(--q) * var(--u, 1));
  font-weight: 500;
  color: var(--ink);
}
.inv-sm {
  font-size: calc(2.25 * var(--q) * var(--u, 1)) !important;
  line-height: calc(2.8 * var(--q) * var(--u, 1)) !important;
}
.inv-gap {
  margin-top: calc(1.1 * var(--q) * var(--u, 1)) !important;
}
.inv-with {
  margin-top: calc(0.8 * var(--q) * var(--u, 1)) !important;
}
.inv-tight {
  line-height: calc(2.4 * var(--q) * var(--u, 1)) !important;
}
.inv-sign {
  font-size: calc(4.1 * var(--q) * var(--u, 1)) !important;
  line-height: calc(4.8 * var(--q) * var(--u, 1)) !important;
  font-weight: 700 !important;
  color: var(--wine2);
  margin-top: calc(0.6 * var(--q) * var(--u, 1)) !important;
}

.inv-parents {
  display: grid;
  grid-template-columns: 1fr calc(5.5 * var(--q) * var(--u, 1)) 1fr;
  align-items: start;
  margin: calc(0.8 * var(--q) * var(--u, 1)) calc(-2.4 * var(--q) * var(--u, 1)) calc(1 * var(--q) * var(--u, 1));
}
.inv-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(0.6 * var(--q) * var(--u, 1));
  padding-top: calc(4.6 * var(--q) * var(--u, 1));
  font-size: calc(1.8 * var(--q) * var(--u, 1));
  font-weight: 600;
  color: var(--wine2);
}
.inv-mid b {
  font-size: calc(2.4 * var(--q) * var(--u, 1));
  font-weight: 400;
  line-height: 1;
}
.inv-mid-line {
  padding-top: 0;
  height: 100%;
  position: relative;
}
.inv-mid-line::before,
.inv-mid-line::after {
  content: "";
  display: block;
  width: 1px;
  flex: 1;
  background: rgba(142, 20, 40, 0.65);
}
.inv-mid-line::before {
  min-height: calc(6 * var(--q) * var(--u, 1));
}
.inv-mid-line::after {
  min-height: calc(9 * var(--q) * var(--u, 1));
}

.inv-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: calc(1.2 * var(--q) * var(--u, 1)) calc(-7 * var(--q) * var(--u, 1)) 0;
}
.inv-cell {
  display: block;
  padding: 0 calc(1 * var(--q) * var(--u, 1));
  border-left: 1px solid rgba(142, 20, 40, 0.5);
  color: var(--wine2);
  text-align: center;
}
.inv-cell:first-child {
  border-left: 0;
}
.inv-cell .ic {
  width: calc(4 * var(--q) * var(--u, 1));
  height: calc(4 * var(--q) * var(--u, 1));
  margin: 0 auto calc(0.3 * var(--q) * var(--u, 1));
}
.inv-cell strong {
  display: block;
  font-size: calc(2.15 * var(--q) * var(--u, 1));
  line-height: calc(2.7 * var(--q) * var(--u, 1));
  font-weight: 700;
}
.inv-cell span {
  display: block;
  font-size: calc(2.25 * var(--q) * var(--u, 1));
  line-height: calc(2.8 * var(--q) * var(--u, 1));
  color: var(--ink);
  font-weight: 500;
}
a.inv-cell:hover strong {
  text-decoration: underline;
}

.inv-venue {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 calc(1.2 * var(--q) * var(--u, 1));
  margin-top: calc(0.8 * var(--q) * var(--u, 1));
  color: var(--wine2);
}
.inv-venue .ic {
  width: calc(3.4 * var(--q) * var(--u, 1));
  height: calc(3.4 * var(--q) * var(--u, 1));
}
.inv-venue strong {
  font-size: calc(3.8 * var(--q) * var(--u, 1));
  line-height: calc(4.4 * var(--q) * var(--u, 1));
  font-weight: 700;
}
.inv-venue span {
  flex-basis: 100%;
  font-size: calc(2.6 * var(--q) * var(--u, 1));
  line-height: calc(3 * var(--q) * var(--u, 1));
  color: var(--ink);
  font-weight: 500;
}
.inv-venue:hover strong {
  text-decoration: underline;
}

.p-biye {
  --u: 0.95;
}
.p-boubhaat {
  --u: 0.8;
}
.inv-btn {
  position: absolute;
  left: 52.4%;
  transform: translateX(-50%);
  padding: 1.5cqw 3.4cqw;
  font-size: 2cqw;
}
.inv-btn:hover {
  transform: translateX(-50%);
}
.p-biye .inv-btn {
  top: 91.2%;
}
.p-boubhaat .inv-btn {
  top: 93.2%;
}

/* =========================================================
   CULTURE
========================================================= */

.culture {
  position: relative;
  background-color: var(--parch);
  background-image:
    radial-gradient(
      ellipse at 50% 0%,
      rgba(255, 240, 210, 0.7),
      rgba(255, 240, 210, 0) 60%
    ),
    radial-gradient(ellipse at 50% 100%, rgba(190, 120, 60, 0.18), transparent 60%);
  color: var(--ink);
}
.culture-wrap {
  max-width: 980px;
  margin: 0 auto;
  padding: 84px 20px 0;
}
.culture-head {
  display: grid;
  grid-template-columns: 1.08fr 1fr 1fr;
  gap: 8px 18px;
  align-items: center;
}
.culture-title h2 {
  margin: 0 0 12px;
  font-size: clamp(50px, 7.2vw, 74px);
  line-height: 0.96;
}
.culture-tag {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.35;
  font-weight: 500;
}
.culture-bn {
  margin: 0;
  font-size: clamp(14px, 1.7vw, 16px);
  line-height: 1.95;
  color: #2f2222;
}
.culture-couple {
  width: 100%;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(
    ellipse 56% 56% at 50% 50%,
    #000 62%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 56% 56% at 50% 50%,
    #000 62%,
    transparent 100%
  );
}
.culture-vedic {
  text-align: center;
}
.culture-vedic h3 {
  margin: 0;
  font-size: clamp(36px, 4.6vw, 46px);
  line-height: 1;
}
.culture-vedic-sub {
  margin: 4px 0 6px;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--wine2);
  font-weight: 600;
}
.culture-vedic .orn {
  font-size: 12px;
  margin: 4px 0 8px;
}
.culture-vedic p:not(.culture-vedic-sub) {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(13.5px, 1.5vw, 15px);
  line-height: 1.6;
  font-weight: 500;
}
.culture-vedic-art {
  width: 78%;
  margin: 8px auto 0;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(
    ellipse 60% 60% at 50% 50%,
    #000 60%,
    transparent 100%
  );
  mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 60%, transparent 100%);
}

.rituals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(142, 20, 40, 0.22);
}
.ritual {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 18px 12px 18px 6px;
  border-right: 1px solid rgba(142, 20, 40, 0.18);
  border-bottom: 1px solid rgba(142, 20, 40, 0.18);
}
.ritual:nth-child(4n) {
  border-right: 0;
}
.ritual img {
  flex: 0 0 34%;
  width: 34%;
  height: auto;
  mix-blend-mode: multiply;
}
.ritual h4 {
  margin: 0;
  font-size: clamp(17px, 2.1vw, 20px);
  line-height: 1.35;
  font-weight: 700;
  color: var(--wine2);
}
.ritual em {
  display: block;
  margin: 1px 0 6px;
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
  font-weight: 500;
  color: var(--wine3);
}
.ritual p {
  margin: 0;
  font-size: clamp(12.5px, 1.35vw, 14px);
  line-height: 1.75;
  color: #2f2222;
}

.culture-quote {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-top: 26px;
  --bg: url("assets/design/culture/river.jpg");
}
.cq-in {
  position: relative;
  max-width: 941px;
  margin: 0 auto;
}
.cq-in img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}
.cq-in blockquote {
  position: absolute;
  left: 30%;
  right: 30%;
  top: 22%;
  margin: 0;
  text-align: center;
}
.cq-in blockquote p {
  margin: 0;
  font-size: clamp(16px, 2.5vw, 25px);
  line-height: 1.5;
  font-weight: 700;
  color: var(--wine2);
}
.cq-in cite {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: clamp(12px, 1.5vw, 14px);
  color: var(--ink);
}

/* =========================================================
   RSVP
========================================================= */

.rsvp {
  position: relative;
  min-height: 0;
  display: block;
  background: #2b0b15;
  overflow: hidden;
  isolation: isolate;
  --bg: url("assets/design/rsvp.jpg");
}
.rsvp-stage {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  aspect-ratio: 815 / 772;
  container-type: inline-size;
  overflow: hidden;
}
.rsvp-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("assets/design/rsvp.jpg") right center / 115.46% auto no-repeat;
}
.rsvp-inner,
.rsvp-note {
  z-index: 1;
}
@media (min-width: 700px) {
  .rsvp-stage::before {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  }
}
.rsvp-inner {
  position: absolute;
  left: 29.8%;
  width: 40.4%;
  top: 19.8%;
  text-align: center;
  color: var(--ink);
}
.rsvp-inner h2 {
  margin: 0 -6.93cqw 2.54cqw;
  font-size: 6.12cqw;
  line-height: 1.06;
  white-space: nowrap;
}
.rsvp-lead {
  display: none;
  margin: 0 -3.46cqw 1.39cqw;
  font-family: var(--serif);
  font-size: 2.14cqw;
  line-height: 3.12cqw;
  white-space: nowrap;
  font-weight: 500;
}
body.mode-both .rsvp-lead.for-both,
body.mode-bi-only .rsvp-lead.for-biye,
body.mode-reception-only .rsvp-lead.for-boubhat {
  display: block;
}
.rsvp-inner .orn-sm {
  font-size: 1.73cqw;
  margin: 1.15cqw 0 1.85cqw;
  color: var(--wine2);
}
.rsvp-choices {
  display: grid;
  gap: 1.73cqw;
}
.choice {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1.33cqw 5.08cqw;
  font-family: var(--serif);
  font-size: 1.85cqw;
  letter-spacing: 0.06em;
  white-space: nowrap;
  font-weight: 600;
  color: var(--wine2);
  background: rgba(255, 243, 222, 0.38);
  border: 1px solid rgba(142, 20, 40, 0.75);
  border-radius: 999px;
  transition:
    background 0.25s,
    color 0.25s;
}
.choice .ic {
  position: absolute;
  left: 2.54cqw;
  width: 3.23cqw;
  height: 3.23cqw;
}
.choice:hover {
  background: var(--wine2);
  color: #fbe9c8;
}
.rsvp-or {
  display: flex;
  align-items: center;
  gap: 1.85cqw;
  margin: 2.54cqw 0 1.39cqw;
  font-family: var(--serif);
  font-size: 1.73cqw;
  letter-spacing: 0.12em;
  color: var(--ink);
}
.rsvp-or i {
  flex: 1;
  height: 1px;
  background: rgba(142, 20, 40, 0.55);
}
.msg-btn {
  display: inline-flex;
  align-items: center;
  gap: 1.15cqw;
  font-size: 3.81cqw;
  line-height: 1.2;
  background: none;
  border: 0;
  color: var(--wine2);
  white-space: nowrap;
}
.msg-btn .ic {
  width: 3.46cqw;
  height: 3.46cqw;
}
.msg-btn:hover {
  text-decoration: underline;
}

.rsvp-note {
  position: absolute;
  color: var(--ink);
}
.rsvp-note-a {
  left: 76.5%;
  width: 22%;
  top: 29.6%;
  transform: rotate(-5deg);
  text-align: left;
}
.rsvp-note-a h3 {
  margin: 0 0 0.92cqw;
  font-family: var(--script);
  font-weight: 400;
  font-size: 2.89cqw;
  color: var(--wine2);
  white-space: nowrap;
}
.rsvp-note-a p {
  margin: 0 0 1.15cqw;
  font-family: var(--serif);
  font-size: 1.41cqw;
  line-height: 2.14cqw;
  font-weight: 500;
  white-space: nowrap;
}
.rsvp-note-b {
  left: 75.1%;
  width: 24%;
  top: 74.6%;
  transform: rotate(-9deg);
  font-size: 2.37cqw;
  line-height: 1.12;
  color: #7a3b2c;
  white-space: nowrap;
}

/* =========================================================
   FOOTER
========================================================= */

.footer {
  position: relative;
  height: auto;
  padding: 46px 20px 54px;
  text-align: center;
  background: linear-gradient(180deg, #3d0919, #2b0b15);
  color: #fbe9c8;
}
.footer p {
  margin: 0 0 4px;
  font-size: 20px;
  color: #efd49b;
}
.footer h2 {
  margin: 0;
  font-size: clamp(46px, 8vw, 66px);
  line-height: 1.1;
  color: #fbe9c8;
}
.footer h2 span {
  font-family: var(--serif);
  font-size: 0.4em;
  color: var(--gold2);
  vertical-align: middle;
}
.footer small {
  display: block;
  margin-top: 10px;
  font-size: 10px;
  letter-spacing: 3px;
  color: #efd49b;
}

/* =========================================================
   MODAL additions
========================================================= */

.modal-box textarea {
  width: 100%;
  padding: 13px 12px;
  font-size: 16px;
  font-family: var(--sans);
  border: 1px solid #d7c5ad;
  background: white;
  resize: vertical;
}
.modal-box label[hidden] {
  display: none;
}
.rsvp-button {
  padding: 15px 30px;
  border: 1px solid var(--wine);
  background: var(--wine);
  color: var(--cream);
  font-size: 10px;
  letter-spacing: 3px;
  transition: 0.3s;
}
.rsvp-button:hover {
  background: var(--wine-deep);
}

/* =========================================================
   URL MODES  (?invite=both | biye | boubhat)
========================================================= */

.only-both,
.only-biye {
  display: none;
}
body.mode-both .only-both,
body.mode-bi-only .only-biye {
  display: inline-flex;
}

body.mode-bi-only .page-reception,
body.mode-bi-only .reception-link,
body.mode-bi-only .choice-boubhat,
body.mode-bi-only .choice-both {
  display: none !important;
}
body.mode-reception-only .page-biye,
body.mode-reception-only .biye-link,
body.mode-reception-only .choice-biye,
body.mode-reception-only .choice-both {
  display: none !important;
}

/* Footer date line follows the invitation: only the dates a guest is invited to */
.footer .foot-date {
  display: none;
}
body.mode-both .footer .foot-both,
body.mode-bi-only .footer .foot-biye,
body.mode-reception-only .footer .foot-boubhat {
  display: block;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px 0 12px;
    background: rgba(251, 238, 212, 0.99);
    border-bottom: 1px solid rgba(190, 140, 70, 0.55);
    box-shadow: 0 14px 24px rgba(30, 5, 10, 0.3);
  }
  .nav-links.open {
    display: flex;
  }
  .nav-links a {
    padding: 13px 24px;
    font-size: 17px;
    border-bottom: 1px solid rgba(190, 140, 70, 0.22);
  }
  .nav-links a.active::before,
  .nav-links a.active::after {
    display: none;
  }
  .menu {
    display: block;
  }
}

@media (max-width: 900px) {
  .culture-head {
    grid-template-columns: 1fr 1fr;
  }
  .culture-title {
    grid-column: 1 / -1;
    text-align: center;
  }
  .rituals {
    grid-template-columns: repeat(2, 1fr);
  }
  .ritual:nth-child(4n) {
    border-right: 1px solid rgba(142, 20, 40, 0.18);
  }
  .ritual:nth-child(2n) {
    border-right: 0;
  }
}

@media (max-width: 699px) {
  .col-intro .c-sub {
    font-size: 3.5cqw;
    width: 96%;
  }
  .col-intro .c-body {
    font-size: 2.55cqw;
    width: 100%;
    line-height: 1.38;
  }
  .col-sri .c-p {
    font-size: 2cqw;
  }
  .culture-wrap {
    padding: 78px 16px 0;
  }
  .culture-head {
    grid-template-columns: 1fr;
  }
  .culture-couple {
    max-width: 420px;
    margin: 0 auto;
  }
  .rituals {
    grid-template-columns: 1fr;
  }
  .ritual,
  .ritual:nth-child(n) {
    border-right: 0;
  }
  .ritual img {
    flex-basis: 92px;
    width: 92px;
  }
  .ritual h4 {
    font-size: 20px;
  }
  .ritual p {
    font-size: 14.5px;
  }
  .cq-in {
    display: flex;
    flex-direction: column-reverse;
  }
  .cq-in blockquote {
    position: static;
    padding: 20px 20px 4px;
  }
  .cq-in blockquote p {
    font-size: 21px;
  }
  .cq-in cite {
    font-size: 14px;
  }

  /* RSVP: real flowing layout on phones */
  .rsvp-stage::before {
    display: none;
  }
  .rsvp-stage {
    aspect-ratio: auto;
    container-type: normal;
    overflow: visible;
    padding: 36px 18px 30px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    background:
      linear-gradient(rgba(43, 11, 21, 0.12), rgba(43, 11, 21, 0.12)),
      url("assets/design/rsvp.jpg") 34% center / cover no-repeat;
  }
  .rsvp-inner,
  .rsvp-note {
    position: static;
    width: auto;
    transform: none;
  }
  .rsvp-inner {
    padding: 24px 18px 26px;
    background: rgba(255, 246, 228, 0.82);
    border: 1px solid rgba(217, 171, 98, 0.8);
    border-radius: 18px;
    backdrop-filter: blur(3px);
  }
  .rsvp-inner h2 {
    font-size: 46px;
    margin-bottom: 14px;
  }
  .rsvp-lead {
    font-size: 17px;
    line-height: 1.55;
    margin: 0 0 8px;
    white-space: normal;
  }
  .rsvp-inner h2 {
    margin: 0 0 14px;
    white-space: normal;
  }
  .choice {
    white-space: normal;
  }
  .rsvp-note-a p {
    white-space: normal;
  }
  .rsvp-inner .orn-sm {
    font-size: 12px;
    margin: 6px 0 14px;
  }
  .rsvp-choices {
    gap: 11px;
  }
  .choice {
    padding: 14px 44px;
    font-size: 14px;
  }
  .choice .ic {
    left: 16px;
    width: 22px;
    height: 22px;
  }
  .rsvp-or {
    font-size: 12px;
    margin: 16px 0 8px;
    gap: 12px;
  }
  .msg-btn {
    font-size: 30px;
  }
  .msg-btn .ic {
    width: 24px;
    height: 24px;
  }
  .rsvp-note {
    padding: 18px 20px;
    background: rgba(250, 232, 200, 0.92);
    border: 1px solid rgba(190, 140, 70, 0.6);
    border-radius: 6px;
    box-shadow: 0 8px 22px rgba(30, 5, 10, 0.3);
  }
  .rsvp-note-a h3 {
    font-size: 26px;
  }
  .rsvp-note-a p {
    font-size: 15px;
    line-height: 1.6;
  }
  .rsvp-note-b {
    font-size: 25px;
    white-space: normal;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal,
  .reveal-left,
  .reveal-right {
    transition: none;
    opacity: 1;
    transform: none;
  }
}


/* ---- generated overlay positions (measured from the client artwork) ---- */
.tx-intro-cap{left:6.105%;top:28.707%;width:17.338%;font-size:3.297cqw;text-align:center;line-height:1.05;transform:rotate(-19deg);}
.tx-intro-stamp{left:12.698%;top:33.635%;width:14.652%;height:8.753%;}
.tx-pre-from{left:71.429%;top:9.824%;width:17.857%;font-size:3.348cqw;transform:rotate(-9deg);line-height:1.0;}
.tx-pre-to{left:2.679%;top:41.448%;width:16.964%;font-size:3.348cqw;transform:rotate(-8deg);}
.tx-pre-stamp-a{left:82.366%;top:14.521%;width:15.402%;height:9.08%;transform:rotate(-8deg);}
.tx-pre-stamp-b{left:80.58%;top:36.595%;width:16.518%;height:9.237%;transform:rotate(-3deg);}
.tx-sri-title{left:27.106%;top:6.213%;width:33.7%;font-size:11.233cqw;text-align:center;}
.tx-sri-from{left:67.399%;top:1.469%;width:20.757%;font-size:3.297cqw;transform:rotate(-8deg);line-height:1.0;}
.tx-sri-to{left:72.772%;top:37.05%;width:20.269%;font-size:3.541cqw;transform:rotate(-8deg);line-height:1.0;}
.tx-sri-note{left:44.689%;top:85.825%;width:30.037%;font-size:2.564cqw;text-align:center;transform:rotate(-4deg);line-height:1.12;}
.tx-biye-kol{left:8.059%;top:39.017%;width:13.431%;font-size:4.396cqw;transform:rotate(-14deg);text-align:center;}
.tx-bou-kol{left:5.128%;top:31.953%;width:15.873%;font-size:4.396cqw;transform:rotate(-14deg);text-align:center;}
.tx-arn-title{left:10.256%;top:9.842%;width:42.247%;font-size:14.408cqw;}
.tx-arn-note{left:76.923%;top:3.491%;width:19.536%;font-size:3.297cqw;text-align:center;transform:rotate(9deg);line-height:1.12;}
.tx-arn-pol{left:35.409%;top:74.074%;width:12.943%;font-size:2.686cqw;text-align:center;transform:rotate(-9deg);line-height:1.12;}

/* ---- generated flowing columns ---- */
.col-intro{left:31.136%;top:6.786%;width:53.114%;}
.col-intro .c-title{margin-top:0cqw;width:100%;font-size:10.256cqw;line-height:1.08;}
.col-intro .c-rule{margin-top:0.733cqw;width:70%;height:1.709cqw;}
.col-intro .c-sub{margin-top:0.977cqw;width:84%;font-size:3.114cqw;line-height:1.28;}
.col-intro .c-body{margin-top:1.221cqw;width:82%;font-size:2.149cqw;line-height:1.38;}
.col-intro .c-btn{margin-top:1.709cqw;width:78%;font-size:2.32cqw;height:6.838cqw;}
.col-pre{left:23.996%;top:25.479%;width:52.121%;}
.col-pre .c-title{margin-top:0cqw;width:100%;font-size:7.589cqw;line-height:1.05;}
.col-pre .c-rule{margin-top:2.679cqw;width:42%;height:1.451cqw;}
.col-pre .c-p{margin-top:0.67cqw;width:94%;font-size:2.545cqw;line-height:1.42;}
.col-pre .c-p1{margin-top:1.562cqw;width:94%;}
.col-pre .c-orn{margin-top:0cqw;width:100%;font-size:2.009cqw;line-height:1;}
.col-pre .c-btn{margin-top:1.116cqw;width:68%;font-size:2.009cqw;height:5.134cqw;}
.col-sri{left:30.525%;top:17.036%;width:31.502%;}
.col-sri .c-sub{margin-top:0cqw;width:100%;font-size:3.358cqw;line-height:1;}
.col-sri .c-rule{margin-top:0.611cqw;width:50%;height:1.465cqw;}
.col-sri .c-p{margin-top:0.977cqw;width:100%;font-size:2.051cqw;line-height:1.46;}
.col-sri .c-p1{margin-top:1.709cqw;width:100%;}
.col-sri .c-p3{margin-top:1.709cqw;width:100%;}
.col-sri .c-rule2{margin-top:1.465cqw;width:56%;height:1.709cqw;}
.col-arn{left:11.477%;top:20.09%;width:35.165%;}
.col-arn .c-sub{margin-top:0cqw;width:100%;font-size:3.175cqw;line-height:1.4;}
.col-arn .c-rule{margin-top:0.977cqw;width:52%;height:1.587cqw;}
.col-arn .c-p{margin-top:1.343cqw;width:100%;font-size:2.149cqw;line-height:1.43;}
.col-arn .c-p1{margin-top:2.076cqw;width:100%;}
.col-arn .c-rule2{margin-top:0.488cqw;width:52%;height:1.587cqw;}
.col-arn .c-p3{margin-top:0.977cqw;width:100%;}

/* =========================================================
   MODAL
========================================================= */

.modal {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
.modal.show {
  opacity: 1;
  visibility: visible;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(32, 5, 14, 0.75);
  backdrop-filter: blur(8px);
}
.modal-box {
  position: relative;
  z-index: 2;
  width: min(500px, 100%);
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 40px 30px;
  background: var(--cream);
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.25);
}
.modal-close {
  position: absolute;
  top: 2px;
  right: 2px;
  padding: 14px;
  background: none;
  border: 0;
  font-size: 26px;
  line-height: 1;
  color: var(--wine);
  cursor: pointer;
}
.modal-bn {
  text-align: center;
  font-size: 18px;
  color: var(--wine);
}
.modal-box h2 {
  margin: 5px 0 20px;
  text-align: center;
  font-family: var(--serif);
  font-size: 47px;
  color: var(--wine);
}
.modal-box form {
  display: grid;
  gap: 15px;
}
.modal-box form[hidden] {
  display: none;
}
.modal-box label {
  display: grid;
  gap: 6px;
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--wine);
}
.modal-box input,
.modal-box select {
  width: 100%;
  padding: 13px 12px;
  font-size: 16px;
  font-family: var(--sans);
  border: 1px solid #d7c5ad;
  background: white;
}
.modal-box form .rsvp-button {
  width: 100%;
  border-color: var(--wine);
}
#rsvpThanks {
  text-align: center;
}
#rsvpThanks h3 {
  color: var(--wine);
  font-family: var(--serif);
  font-size: 35px;
}
.rsvp-calendar {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #e3d3bd;
}
.rsvp-calendar-label {
  margin: 0 0 12px;
  font-size: 9px;
  letter-spacing: 3px;
  color: #8d7b72;
}
.calendar-row {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
  text-align: left;
}
.calendar-row[hidden] {
  display: none;
}
.calendar-row > span {
  font-size: 12px;
  color: var(--wine);
  font-weight: 600;
}
.calendar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cal-btn {
  flex: 1;
  min-width: 140px;
  padding: 14px 12px;
  border: 1px solid var(--wine);
  background: transparent;
  color: var(--wine);
  font-size: 9px;
  letter-spacing: 1px;
  text-align: center;
  cursor: pointer;
  transition: 0.3s;
}
.cal-btn:hover {
  background: var(--wine);
  color: var(--cream);
}
.rsvp-done-btn {
  margin-top: 20px;
  padding: 10px 26px;
  border: 1px solid transparent;
  background: none;
  color: #8d7b72;
  font-size: 9px;
  letter-spacing: 2px;
  text-decoration: underline;
  cursor: pointer;
}
.modal-note {
  display: block;
  margin-top: 18px;
  text-align: center;
  color: #8d7b72;
  font-size: 8px;
}
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 6000;
  padding: 12px 18px;
  background: var(--wine-deep);
  color: var(--cream);
  font-size: 11px;
  opacity: 0;
  transform: translate(-50%, 30px);
  transition: 0.3s;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* =========================================================
   REVEAL
========================================================= */

.reveal,
.reveal-left,
.reveal-right {
  opacity: 0;
  transition:
    opacity 0.85s ease,
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal {
  transform: translateY(35px);
}
.reveal-left {
  transform: translateX(-35px);
}
.reveal-right {
  transform: translateX(35px);
}
.reveal.active,
.reveal-left.active,
.reveal-right.active {
  opacity: 1;
  transform: none;
}


/* =========================================================
   SECTION TRANSITIONS
   One divider (gold hairlines + ❖) at every boundary, and every
   artwork fades into the same deep wine at its top/bottom edge, so
   moving between sections never feels like a sudden cut.
   Sections hidden by ?invite= modes hide their own divider too.
========================================================= */

:root {
  --edge: clamp(40px, 8vw, 90px);
  --edge-bg: #2b0b15;
  --band: clamp(30px, 5vw, 42px);
}

.sec-edge {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.4vw, 18px);
  height: var(--band);
  background: var(--edge-bg);
  pointer-events: none;
}
.sec-edge i {
  display: block;
  flex: 0 1 clamp(70px, 24vw, 240px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold2));
}
.sec-edge i:last-child {
  background: linear-gradient(270deg, transparent, var(--gold2));
}
.sec-edge b {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1;
  color: var(--gold2);
}
#home .sec-edge {
  display: none;
}
/* footer already sits on the dark wine gradient */
.footer .sec-edge {
  background: transparent;
  margin: -46px 0 28px;
}

/* artwork fades to wine at the top and bottom */
.plate-bg {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--edge), #000 calc(100% - var(--edge)), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 var(--edge), #000 calc(100% - var(--edge)), transparent 100%);
}
.rsvp-stage::before {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--edge), #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 var(--edge), #000 100%);
}
.culture-quote {
  background: var(--edge-bg);
}
.cq-in img {
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - var(--edge)), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - var(--edge)), transparent 100%);
}

@media (min-width: 700px) {
  /* keep the side feathering and add the vertical fade on top of it */
  .plate-bg {
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%),
      linear-gradient(180deg, transparent 0, #000 var(--edge), #000 calc(100% - var(--edge)), transparent 100%);
    mask-image:
      linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%),
      linear-gradient(180deg, transparent 0, #000 var(--edge), #000 calc(100% - var(--edge)), transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
  .rsvp-stage::before {
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%),
      linear-gradient(180deg, transparent 0, #000 var(--edge), #000 100%);
    mask-image:
      linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%),
      linear-gradient(180deg, transparent 0, #000 var(--edge), #000 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
  .cq-in img {
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%),
      linear-gradient(180deg, #000 0, #000 calc(100% - var(--edge)), transparent 100%);
    mask-image:
      linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%),
      linear-gradient(180deg, #000 0, #000 calc(100% - var(--edge)), transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
  /* blurred side backdrop also melts into the same wine
     (it extends 60px past the plate, so offset the fade by that + the divider band) */
  .plate::before {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent calc(60px + var(--band)), #000 calc(60px + var(--band) + var(--edge)), #000 calc(100% - 60px - var(--edge)), transparent calc(100% - 60px));
    mask-image: linear-gradient(180deg, transparent 0, transparent calc(60px + var(--band)), #000 calc(60px + var(--band) + var(--edge)), #000 calc(100% - 60px - var(--edge)), transparent calc(100% - 60px));
  }
  .rsvp::before {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent calc(60px + var(--band)), #000 calc(60px + var(--band) + var(--edge)), #000 100%);
    mask-image: linear-gradient(180deg, transparent 0, transparent calc(60px + var(--band)), #000 calc(60px + var(--band) + var(--edge)), #000 100%);
  }
}

/* parchment Culture section: ease in from the divider's wine instead of a hard edge */
.culture::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: var(--band);
  height: clamp(60px, 9vw, 110px);
  background: linear-gradient(180deg, var(--edge-bg), rgba(43, 11, 21, 0));
  pointer-events: none;
  z-index: 1;
}

/* =========================================================
   DESKTOP — full-width artwork
   Text is sized in cqw, so widening the stage scales the picture
   and everything on it together. Beyond 1440px the blurred
   backdrop of the same picture fills the sides.
========================================================= */

:root {
  --wide: 1440px;
  --feather: 4%;
}

@media (min-width: 700px) {
  .stage {
    width: min(100%, var(--wide)) !important;
  }
  .plate-bg {
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0, #000 var(--feather), #000 calc(100% - var(--feather)), transparent 100%),
      linear-gradient(180deg, transparent 0, #000 var(--edge), #000 calc(100% - var(--edge)), transparent 100%);
    mask-image:
      linear-gradient(90deg, transparent 0, #000 var(--feather), #000 calc(100% - var(--feather)), transparent 100%),
      linear-gradient(180deg, transparent 0, #000 var(--edge), #000 calc(100% - var(--edge)), transparent 100%);
  }
  .rsvp-stage {
    max-width: var(--wide);
  }
  .rsvp-stage::before {
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0, #000 var(--feather), #000 calc(100% - var(--feather)), transparent 100%),
      linear-gradient(180deg, transparent 0, #000 var(--edge), #000 100%);
    mask-image:
      linear-gradient(90deg, transparent 0, #000 var(--feather), #000 calc(100% - var(--feather)), transparent 100%),
      linear-gradient(180deg, transparent 0, #000 var(--edge), #000 100%);
  }
  .cq-in {
    max-width: var(--wide);
  }
  .cq-in img {
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0, #000 var(--feather), #000 calc(100% - var(--feather)), transparent 100%),
      linear-gradient(180deg, #000 0, #000 calc(100% - var(--edge)), transparent 100%);
    mask-image:
      linear-gradient(90deg, transparent 0, #000 var(--feather), #000 calc(100% - var(--feather)), transparent 100%),
      linear-gradient(180deg, #000 0, #000 calc(100% - var(--edge)), transparent 100%);
  }
  .culture-wrap {
    max-width: 1200px;
    padding-left: 40px;
    padding-right: 40px;
  }
  .culture-head {
    font-size: clamp(14px, 1.2vw, 17px);
  }
}

/* hide the leftover decorative strip at the very top of the RSVP artwork */
.rsvp-stage::before {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 5%, #000 calc(5% + var(--edge)), #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, transparent 5%, #000 calc(5% + var(--edge)), #000 100%);
}
@media (min-width: 700px) {
  .rsvp-stage::before {
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0, #000 var(--feather), #000 calc(100% - var(--feather)), transparent 100%),
      linear-gradient(180deg, transparent 0, transparent 5%, #000 calc(5% + var(--edge)), #000 100%);
    mask-image:
      linear-gradient(90deg, transparent 0, #000 var(--feather), #000 calc(100% - var(--feather)), transparent 100%),
      linear-gradient(180deg, transparent 0, transparent 5%, #000 calc(5% + var(--edge)), #000 100%);
  }
}


/* =========================================================
   PHONES (< 700px) — artwork is NEVER cropped or zoomed.

   Every picture is shown at 100% width, at its own aspect ratio.
   Text plates are built as:  [top slice of the art]
                              [paper card with the live text]
                              [bottom slice of the art]
   so the artwork always shows in full width, and the text card
   grows to whatever length the words need — on any screen size.
   Tune a plate with --a (where the top slice ends) and --b (where
   the bottom slice starts), both fractions of the picture height.
========================================================= */

/* desktop / tablet: the wrappers are invisible, the 2nd copy is unused */
.art,
.art-in {
  display: contents;
}
.art-bot {
  display: none;
}

@media (max-width: 699px) {
  .plate {
    --cut: 46px; /* soft fade where a slice meets the card */
    --gut: clamp(12px, 4vw, 22px); /* card side margin */
    --q: clamp(4.1px, 1.42cqw, 5.8px); /* text unit for invitation cards */
    --u: 1 !important;
  }
  .p-intro,
  .p-prelude,
  .p-srijita,
  .p-arnab,
  .p-biye,
  .p-boubhaat {
    --mz: 1;
    --mx: 50;
  }
  .p-prelude { --r: 1.4258; --a: 0.17; --b: 0.66; }
  .p-srijita { --r: 1.6472; --a: 0.2;  --b: 0.40; }
  .p-arnab   { --r: 1.6918; --a: 0.27; --b: 0.36; }
  .p-biye    { --r: 1.7003; --a: 0.09; --b: 0.87; }
  .p-boubhaat{ --r: 1.6961; --a: 0.09; --b: 0.87; }

  .stage {
    width: 100% !important;
    margin: 0 !important;
  }

  /* ---------- picture slices ---------- */
  .art {
    display: block;
    position: relative;
    overflow: hidden;
    pointer-events: none;
  }
  .art-top {
    background: var(--edge-bg);
    height: calc(var(--a) * var(--r) * 100cqw);
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--cut)), transparent 100%);
    mask-image: linear-gradient(180deg, #000 calc(100% - var(--cut)), transparent 100%);
  }
  .art-bot {
    background: var(--edge-bg);
    height: calc((1 - var(--b)) * var(--r) * 100cqw);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--cut));
    mask-image: linear-gradient(180deg, transparent 0, #000 var(--cut));
  }
  .art-in {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: calc(var(--r) * 100cqw);
  }
  .art-top .art-in { top: 0; }
  .art-bot .art-in { bottom: 0; }
  .art-in .plate-bg {
    width: 100%;
    height: 100%;
    -webkit-mask-image: none;
    mask-image: none;
  }
  /* the section's outer fade (top of first slice / bottom of last) */
  .art-top .art-in .plate-bg {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--edge));
    mask-image: linear-gradient(180deg, transparent 0, #000 var(--edge));
  }
  .art-bot .art-in .plate-bg {
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--edge)), transparent 100%);
    mask-image: linear-gradient(180deg, #000 calc(100% - var(--edge)), transparent 100%);
  }
  .art .tx {
    font-size-adjust: none;
  }

  /* what shows between the slices: Biye/Boubhaat garlands, wine elsewhere */
  .p-biye .stage {
    background: url("assets/design/band-biye.jpg") 0 calc(var(--a) * var(--r) * 100cqw) / 100% auto repeat-y;
  }
  .p-boubhaat .stage {
    background: url("assets/design/band-boubhaat.jpg") 0 calc(var(--a) * var(--r) * 100cqw) / 100% auto repeat-y;
  }

  /* ---------- paper card ---------- */
  .col,
  .inv {
    position: relative;
    left: auto;
    top: auto;
    width: calc(100% - 2 * var(--gut));
    max-width: 600px;
    margin: calc(var(--cut) * -0.55) auto calc(var(--cut) * -0.55);
    z-index: 2;
    padding: 28px clamp(14px, 5vw, 26px) 30px;
    background:
      radial-gradient(ellipse at 50% 0, rgba(255, 244, 218, 0.55), rgba(255, 244, 218, 0) 70%),
      url("assets/design/paper.jpg") 0 0 / 200px auto,
      #f3dfb4;
    border: 1px solid rgba(190, 140, 70, 0.85);
    border-radius: 16px;
    box-shadow:
      0 0 0 3px rgba(43, 11, 21, 0.92),
      0 0 0 4px rgba(217, 171, 98, 0.8),
      0 14px 30px rgba(20, 3, 8, 0.5),
      inset 0 0 28px rgba(150, 90, 30, 0.22);
  }
  .col::before,
  .inv::before {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(142, 20, 40, 0.28);
    border-radius: 11px;
    pointer-events: none;
  }

  /* story columns: natural, readable type */
  .col {
    gap: 0;
  }
  .col .c-title {
    font-size: clamp(38px, 11.5vw, 54px) !important;
    line-height: 1.08 !important;
    margin-top: 0 !important;
    width: 100% !important;
    white-space: normal !important;
  }
  .col .c-sub {
    font-size: clamp(17px, 4.7vw, 21px) !important;
    line-height: 1.3 !important;
    width: 100% !important;
    white-space: normal !important;
    margin-top: 0 !important;
  }
  .col-intro .c-sub { margin-top: 4px !important; }
  .col .c-rule {
    width: 62% !important;
    height: 16px !important;
    margin: 10px 0 12px !important;
  }
  .col .c-rule b { font-size: 12px; margin: 0 8px; }
  .col .c-p {
    font-size: clamp(15px, 4.2vw, 17.5px) !important;
    line-height: 1.55 !important;
    width: 100% !important;
    margin: 0 0 12px !important;
    text-align: center !important;
    text-wrap: pretty;
    hyphens: auto;
  }
  .col-sri .c-p,
  .col-arn .c-p {
    text-align: left !important;
  }
  .col .c-p1 { margin-top: 0 !important; }
  .col .c-p:last-of-type { margin-bottom: 0 !important; }
  .col .c-orn {
    font-size: 13px !important;
    margin: 0 0 12px !important;
  }
  .col .c-btn {
    width: auto !important;
    height: auto !important;
    margin: 18px 0 0 !important;
    padding: 13px 22px !important;
    font-size: clamp(11.5px, 3.2vw, 13.5px) !important;
  }
  .col-sri .c-rule2,
  .col-arn .c-rule2 {
    margin: 4px 0 14px !important;
  }

  /* invitation cards: the Bengali lines wrap safely on narrow phones */
  .inv p,
  .inv h2 {
    white-space: normal;
    text-wrap: balance;
  }
  .inv .inv-title { white-space: nowrap; }
  .inv-info {
    margin-left: 0;
    margin-right: 0;
    gap: 14px 0;
  }
  .inv-parents {
    margin-left: 0;
    margin-right: 0;
  }
  .inv-btn {
    position: relative;
    left: auto;
    top: auto !important;
    transform: none;
    display: flex;
    width: fit-content;
    margin: calc(var(--cut) * 0.55 + 12px) auto 0;
    padding: 13px 22px;
    font-size: clamp(11.5px, 3.2vw, 13.5px);
    z-index: 3;
  }
  .inv-btn:hover { transform: none; }
  .inv-btn.only-both,
  .inv-btn.only-biye { display: none; }
  body.mode-both .inv-btn.only-both,
  body.mode-bi-only .inv-btn.only-biye { display: flex; }
  .p-biye .inv-btn,
  .p-boubhaat .inv-btn { margin-bottom: 4px; }

  /* ---------- Home: art whole, short text sits in the parchment ---------- */
  .p-intro { --r: 1.66; }
  .col-intro {
    position: absolute;
    left: 31.1%;
    top: 5.5%;
    width: 53.1%;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    z-index: 2;
  }
  .col-intro::before { display: none; }
  .col-intro .c-title {
    font-size: 10cqw !important;
    line-height: 1.04 !important;
    white-space: nowrap !important;
  }
  .col-intro .c-rule { margin: 4px 0 4px !important; width: 70% !important; height: 8px !important; }
  .col-intro .c-sub {
    font-size: clamp(11.5px, 3.3cqw, 15px) !important;
    line-height: 1.25 !important;
    width: 100% !important;
  }
  .col-intro .c-body {
    font-size: clamp(10.5px, 2.75cqw, 13px) !important;
    line-height: 1.34 !important;
    width: 100% !important;
    margin-top: 6px !important;
    text-align: center;
  }
  .col-intro .c-btn {
    margin-top: 10px !important;
    padding: clamp(8px, 2.4cqw, 11px) clamp(12px, 3.6cqw, 18px) !important;
    font-size: clamp(9.5px, 2.5cqw, 12px) !important;
  }
  .p-intro .stamp { font-size: 1.65cqw; }
  .p-intro .stamp::after { inset: 0.5cqw; }
}

/* =========================================================
   VENUE MAP — small sketch map with landmarks + a clear button.
   The venue pin is always at the centre. Edit the landmark names /
   positions inside the two <svg class="vm-svg"> blocks in index.html
   (Biye + Boubhaat). Both the map and the button open Google Maps.
========================================================= */

.venue-map {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: calc(1.6 * var(--q) * var(--u, 1)) auto 0;
}
.vm-card {
  position: relative;
  display: block;
  width: calc(46 * var(--q) * var(--u, 1));
  aspect-ratio: 360 / 160;
  overflow: hidden;
  border-radius: calc(1.1 * var(--q) * var(--u, 1));
  box-shadow:
    0 0 0 calc(0.28 * var(--q) * var(--u, 1)) #d9ab62,
    0 0 0 calc(0.55 * var(--q) * var(--u, 1)) rgba(110, 15, 34, 0.85),
    0 calc(0.9 * var(--q) * var(--u, 1)) calc(1.8 * var(--q) * var(--u, 1)) rgba(60, 5, 15, 0.28);
  transition: filter 0.25s;
}
.vm-card:hover {
  filter: brightness(1.05) saturate(1.1);
}
.vm-svg {
  display: block;
  width: 100%;
  height: 100%;
}
.vm-svg text {
  font-family: var(--bengali);
  paint-order: stroke;
  stroke: #f6e8c8;
  stroke-width: 3.2px;
  stroke-linejoin: round;
  white-space: pre;
}
.vm-lm {
  font-size: 11.5px;
  font-weight: 600;
  fill: #3a2a2a;
}
.vm-venue {
  font-size: 13.5px;
  font-weight: 700;
  fill: #8e1428;
  stroke-width: 4px;
}
.vm-road {
  font-size: 9.5px;
  font-weight: 600;
  fill: #7a4a3a;
  stroke: #fff6e0;
  stroke-width: 2.4px;
}
.vm-area {
  font-size: 10.5px;
  font-weight: 500;
  fill: #7a5a4a;
  opacity: 0.9;
}
.vm-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: vm-pulse 2.6s ease-out infinite;
}
@keyframes vm-pulse {
  0% { transform: scale(0.5); opacity: 0.55; }
  100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .vm-pulse { animation: none; opacity: 0; }
}
.vm-btn {
  position: relative;
  z-index: 2;
  margin-top: calc(-2.4 * var(--q) * var(--u, 1));
  padding: calc(0.95 * var(--q) * var(--u, 1)) calc(2.8 * var(--q) * var(--u, 1));
  font-size: calc(1.95 * var(--q) * var(--u, 1));
  line-height: 1.2;
}
.vm-btn .ic {
  width: 1.15em;
  height: 1.15em;
  color: #fbe9c8;
  flex: none;
}
.vm-btn:focus-visible,
.vm-card:focus-visible {
  outline: 2px solid #fbe9c8;
  outline-offset: 3px;
}
.inv p.vm-note {
  margin-top: calc(0.9 * var(--q) * var(--u, 1));
  font-size: calc(1.55 * var(--q) * var(--u, 1));
  line-height: calc(2 * var(--q) * var(--u, 1));
  color: var(--ink);
  opacity: 0.7;
}

/* Biye has only date + time left in its info row */
.inv-info-2 {
  grid-template-columns: repeat(2, 1fr);
  margin-left: calc(4 * var(--q) * var(--u, 1));
  margin-right: calc(4 * var(--q) * var(--u, 1));
}

@media (max-width: 699px) {
  .inv-info-2 {
    margin-left: 0;
    margin-right: 0;
  }
  .venue-map {
    margin-top: 22px;
  }
  .vm-card {
    width: 100%;
    max-width: 440px;
    border-radius: 10px;
    box-shadow:
      0 0 0 2px #d9ab62,
      0 0 0 3px rgba(110, 15, 34, 0.85),
      0 8px 16px rgba(60, 5, 15, 0.25);
  }
  .vm-btn {
    margin-top: -18px;
    padding: 11px 18px;
    font-size: clamp(11.5px, 3.2vw, 13.5px);
  }
  .inv p.vm-note {
    margin-top: 10px;
    font-size: 11px;
    line-height: 1.4;
  }
}

.vm-tiny { font-size: 7.5px; opacity: 0.8; stroke-width: 2.4px; }
@media (min-width: 700px) {
  .p-biye { --u: 0.85; }
  .p-boubhaat { --u: 0.74; }
  .p-biye .inv-btn { top: 92.6%; }
  .p-boubhaat .inv-btn { top: 94%; }
  .vm-card { width: calc(44 * var(--q) * var(--u, 1)); }
}

@media (max-width: 699px) {
  .venue-map { margin-bottom: 12px; }
  .vm-lm { font-size: 13.5px; }
  .vm-venue { font-size: 15.5px; }
  .vm-road { font-size: 11px; }
  .vm-area { font-size: 12px; }
  .vm-tiny { font-size: 8.5px; }
}

/* =========================================================
   LANGUAGE SWITCH  (English / বাংলা dropdown)
   Two copies share these styles:
     .lang-intro  fixed top-right on the envelope + cover screens
     .lang-nav    inside the top bar, beside the ☰ button
========================================================= */

.lang {
  position: relative;
  font-family: var(--sans);
}
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 6px 11px 6px 10px;
  border: 1px solid rgba(190, 140, 70, 0.75);
  border-radius: 999px;
  background: rgba(255, 246, 224, 0.55);
  color: var(--wine);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.2px;
  white-space: nowrap;
  transition:
    background 0.25s,
    border-color 0.25s,
    color 0.25s;
  -webkit-tap-highlight-color: transparent;
}
.lang-btn:hover,
.lang.open .lang-btn {
  background: rgba(255, 246, 224, 0.95);
  border-color: var(--gold);
}
.lang-btn:focus-visible,
.lang-opt:focus-visible {
  outline: 2px solid var(--wine);
  outline-offset: 2px;
}
.lang-globe {
  width: 18px;
  height: 18px;
  flex: none;
}
.lang-cur {
  font-family: var(--bengali), var(--sans);
  min-width: 2.6em;
  text-align: left;
}
html[data-lang="en"] .lang-cur {
  font-family: var(--sans);
}
.lang-caret {
  width: 10px;
  height: 7px;
  flex: none;
  transition: transform 0.25s;
}
.lang.open .lang-caret {
  transform: rotate(180deg);
}

.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  min-width: 190px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid rgba(190, 140, 70, 0.8);
  border-radius: 14px;
  background: linear-gradient(180deg, #fff6e0, #f6e4c3);
  box-shadow: 0 14px 30px rgba(30, 5, 10, 0.35);
  animation: langMenuIn 0.18s ease-out;
}
.lang-menu[hidden] {
  display: none;
}
@keyframes langMenuIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.lang-opt {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px 8px 8px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--text);
  font-size: 16px;
  text-align: left;
}
.lang-opt:hover,
.lang-opt:focus-visible {
  background: rgba(142, 20, 40, 0.09);
}
.lang-name {
  font-weight: 600;
}
.lang-opt[data-lang="bn"] .lang-name {
  font-family: var(--bengali);
}
.lang-opt small {
  font-size: 11.5px;
  letter-spacing: 0.3px;
  color: rgba(48, 38, 41, 0.62);
}
.lang-opt[data-lang="en"] small {
  font-family: var(--bengali);
}
.lang-tick {
  color: var(--wine);
  font-size: 14px;
  font-weight: 700;
  visibility: hidden;
}
.lang-opt[aria-selected="true"] .lang-tick {
  visibility: visible;
}
.lang-opt[aria-selected="true"] .lang-name {
  color: var(--wine);
}

/* --- intro screens (envelope + cover): dark pill on top of the artwork --- */
.lang-intro {
  position: fixed;
  z-index: 9800; /* above envelope (9500) + cover (9000), below the loader (10000) */
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: calc(14px + env(safe-area-inset-right, 0px));
}
.lang-intro .lang-btn {
  background: rgba(61, 9, 25, 0.62);
  border-color: var(--gold);
  color: var(--cream);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.lang-intro .lang-btn:hover,
.lang-intro.open .lang-btn {
  background: rgba(61, 9, 25, 0.9);
}
.lang-intro .lang-btn:focus-visible {
  outline-color: var(--gold-light);
}
body.site-open .lang-intro {
  display: none;
}

/* --- top bar --- */
.nav-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.lang-nav .lang-btn {
  min-height: 36px;
}

@media (max-width: 899px) {
  .lang-nav .lang-btn {
    min-height: 40px;
  }
}
@media (max-width: 420px) {
  .lang-btn {
    padding: 6px 9px;
    gap: 5px;
    font-size: 13px;
  }
  .lang-globe {
    width: 16px;
    height: 16px;
  }
  .nav .brand-name {
    font-size: 22px;
  }
  .nav {
    gap: 8px;
  }
  .nav .brand {
    gap: 5px;
  }
  .nav-tools {
    gap: 4px;
  }
  .lang-menu {
    min-width: 176px;
  }
}
@media (max-width: 340px) {
  .lang-nav .lang-cur {
    display: none; /* globe + caret only on the very smallest phones */
  }
}
@media (prefers-reduced-motion: reduce) {
  .lang-menu {
    animation: none;
  }
}

/* =========================================================
   ENGLISH MODE  (html[data-lang="en"])
   The invitation cards were set in a Bengali serif; in English they
   use the site's Latin serif, slightly enlarged to match its
   visual weight, so nothing looks thin or undersized.
========================================================= */

html[data-lang="en"] .bengali {
  font-family: var(--serif);
  font-size-adjust: 0.46;
}
html[data-lang="en"] .inv p,
html[data-lang="en"] .inv h2 {
  font-weight: 600;
}
html[data-lang="en"] .inv .inv-title {
  font-weight: 700;
  letter-spacing: 0.3px;
}
html[data-lang="en"] .inv .inv-invoke {
  letter-spacing: 0.6px;
}
html[data-lang="en"] .inv-cell strong,
html[data-lang="en"] .inv-cell span {
  font-family: var(--serif);
}
html[data-lang="en"] .inv-cell strong {
  font-weight: 700;
}
html[data-lang="en"] .culture-bn {
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.6;
  font-style: italic;
  font-weight: 500;
}
html[data-lang="en"] .ritual h4 {
  font-size: clamp(18px, 2.2vw, 22px);
}
html[data-lang="en"] .ritual p {
  font-family: var(--serif);
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.5;
  font-weight: 500;
}
html[data-lang="en"] .culture-quote blockquote {
  font-style: italic;
}
html[data-lang="en"] .modal-bn {
  font-style: italic;
  font-size: 19px;
}
html[data-lang="en"] .envelope-seal span {
  font-size: 10px;
  letter-spacing: 0.2px;
}
/* map labels */
html[data-lang="en"] .vm-svg text {
  font-family: var(--serif);
  font-weight: 700;
}
html[data-lang="en"] .vm-svg text {
  font-size-adjust: 0.46;
}

/* ---------- English mode: responsive safety ---------- */

/* Card titles: sized to the card (cqw-based, like everything else on the
   plate) and allowed to wrap, so a long title can never run off the card. */
html[data-lang="en"] .inv .inv-title {
  font-size: calc(6.8 * var(--q) * var(--u, 1));
  line-height: calc(7.6 * var(--q) * var(--u, 1));
  white-space: normal;
  text-wrap: balance;
  padding: 0 calc(1 * var(--q));
}
/* Every card line: if one is ever wider than the card (different font
   fallback, very narrow window) it wraps instead of spilling out. */
html[data-lang="en"] .inv p,
html[data-lang="en"] .inv h2,
html[data-lang="en"] .inv-cell strong,
html[data-lang="en"] .inv-cell span {
  white-space: normal;
  text-wrap: balance;
  overflow-wrap: break-word;
}
/* Names in the narrow two-column parents block: a touch smaller so
   "Shri Shubhabrata Seal" fits on one line */
html[data-lang="en"] .inv-parents .inv-p,
html[data-lang="en"] .inv-parents .inv-host {
  font-size-adjust: 0.42;
}
html[data-lang="en"] .inv-quote,
html[data-lang="en"] .inv-by {
  padding: 0 calc(1 * var(--q));
}

/* =========================================================
   ALIGNMENT FIXES — RSVP + footer
   - RSVP artwork is framed so its clear parchment sits on the page's
     centre line (same axis as the nav, section dividers and footer).
   - Letter-spaced lines get matching start padding so the trailing
     tracking gap doesn't push them off-centre.
========================================================= */
.footer small {
  padding-left: 3px; /* balances the 3px letter-spacing after the last glyph */
  text-wrap: balance;
}
.footer h2 {
  text-wrap: balance;
}
.rsvp-or span {
  padding-left: 0.12em; /* balances the 0.12em tracking on "OR" */
}
.choice span {
  text-align: center;
}
@media (min-width: 700px) {
  .rsvp-note-a p {
    font-size: max(1.41cqw, 9.5px);
    line-height: max(2.14cqw, 14px);
  }
  .rsvp-note-b {
    font-size: max(2.37cqw, 14px);
  }
}
@media (max-width: 380px) {
  .footer {
    padding-left: 14px;
    padding-right: 14px;
  }
  .footer small {
    letter-spacing: 2px;
    padding-left: 2px;
  }
}

@media (max-width: 360px) {
  .msg-btn {
    font-size: 24px;
    gap: 8px;
  }
  .msg-btn .ic {
    width: 20px;
    height: 20px;
  }
  .rsvp-stage {
    padding-left: 12px;
    padding-right: 12px;
  }
  .rsvp-inner {
    padding-left: 14px;
    padding-right: 14px;
  }
  .rsvp-inner h2 {
    font-size: 40px;
  }
  .choice {
    padding-left: 40px;
    padding-right: 14px;
    font-size: 13px;
    letter-spacing: 0.04em;
  }
}
.rsvp-lead {
  text-wrap: balance;
}

/* =========================================================
   BENGALI MODE  (html[data-lang="bn"])  — the default language
   The page text that used to be English (menu, story pages, RSVP,
   pop-up) is now Bengali. Bengali fonts are added behind the Latin
   ones, display sizes are eased down (the script face for Latin is
   very small on the line; Bengali glyphs are much taller), and
   letter-spacing is removed (tracking breaks Bengali conjuncts).
========================================================= */

html[data-lang="bn"] {
  --serif: "Cormorant Garamond", "Noto Serif Bengali", "Kohinoor Bangla",
    "Bangla Sangam MN", "Nirmala UI", "Vrinda", Georgia, serif;
  --script: "Great Vibes", "Tiro Bangla", "Noto Serif Bengali",
    "Kohinoor Bangla", "Bangla Sangam MN", "Nirmala UI", serif;
  --sans: "DM Sans", "Hind Siliguri", "Noto Sans Bengali", "Kohinoor Bangla",
    "Bangla Sangam MN", "Nirmala UI", "Segoe UI", sans-serif;
}

/* ---- no tracking on Bengali ---- */
html[data-lang="bn"] .loader span,
html[data-lang="bn"] .envelope-hint,
html[data-lang="bn"] .cover-button,
html[data-lang="bn"] .nav-links a,
html[data-lang="bn"] .stamp,
html[data-lang="bn"] .pill-btn,
html[data-lang="bn"] .choice,
html[data-lang="bn"] .rsvp-or,
html[data-lang="bn"] .footer small,
html[data-lang="bn"] .rsvp-button,
html[data-lang="bn"] .modal-box label,
html[data-lang="bn"] .rsvp-calendar-label,
html[data-lang="bn"] .cal-btn,
html[data-lang="bn"] .rsvp-done-btn {
  letter-spacing: 0;
  text-transform: none;
}
html[data-lang="bn"] .footer small,
html[data-lang="bn"] .rsvp-or span {
  padding-left: 0;
}

/* the English "TO" between the two cities is dropped: Auckland ✈ Kolkata */
html[data-lang="bn"] .stamp span:empty {
  display: none;
}

/* ---- small UI text: Bengali needs a little more size and air ---- */
html[data-lang="bn"] .loader span {
  font-size: 12px;
  font-family: var(--sans);
}
html[data-lang="bn"] .envelope-hint {
  font-size: 14px;
}
html[data-lang="bn"] .cover-button {
  font-size: 14px;
}
html[data-lang="bn"] .nav-links a {
  font-size: 16px;
}
html[data-lang="bn"] .brand-name {
  font-size: 21px;
  line-height: 1.25;
}
html[data-lang="bn"] .modal-box label {
  font-size: 13px;
}
html[data-lang="bn"] .rsvp-button {
  font-size: 15px;
}
html[data-lang="bn"] .rsvp-calendar-label {
  font-size: 13px;
}
html[data-lang="bn"] .cal-btn,
html[data-lang="bn"] .rsvp-done-btn {
  font-size: 13px;
}
html[data-lang="bn"] .modal-box h2 {
  font-size: 38px;
}
html[data-lang="bn"] .footer small {
  font-size: 15px;
}
html[data-lang="bn"] .footer h2 {
  font-size: clamp(36px, 6vw, 52px);
  line-height: 1.3;
}
html[data-lang="bn"] .modal-note {
  line-height: 1.5;
}

/* ---- script headings (Tiro Bangla stands in for the Latin script) ---- */
html[data-lang="bn"] .script {
  line-height: 1.3;
}
html[data-lang="bn"] .col-intro .c-title {
  font-size: 6.6cqw;
  line-height: 1.25;
}
html[data-lang="bn"] .col-pre .c-title {
  font-size: 5.2cqw;
  line-height: 1.25;
}
html[data-lang="bn"] .tx-sri-title {
  font-size: 7.4cqw;
}
html[data-lang="bn"] .tx-arn-title {
  font-size: 9cqw;
  text-align: center;
}
html[data-lang="bn"] .culture-title h2 {
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.25;
}
html[data-lang="bn"] .culture-vedic h3 {
  font-size: clamp(27px, 3.4vw, 34px);
  line-height: 1.3;
}
html[data-lang="bn"] .rsvp-inner h2 {
  font-size: 4.3cqw;
  line-height: 1.3;
}
html[data-lang="bn"] .rsvp-note-a h3 {
  font-size: 2.3cqw;
}
html[data-lang="bn"] .msg-btn {
  font-size: 2.8cqw;
}
html[data-lang="bn"] .col-sri .c-sub {
  font-size: 2.7cqw;
  line-height: 1.35;
}
html[data-lang="bn"] .col-arn .c-sub {
  font-size: 2.7cqw;
}

/* Bengali on phones: the home plate is a small, picture-sized block, so
   its Bengali lines get a little more size than the Latin ones had. */
@media (max-width: 699px) {
  html[data-lang="bn"] .col-intro .c-title {
    font-size: 8.4cqw !important;
    line-height: 1.2 !important;
  }
  html[data-lang="bn"] .col-intro .c-sub {
    font-size: clamp(13px, 3.9cqw, 17px) !important;
    line-height: 1.35 !important;
  }
  html[data-lang="bn"] .col-intro .c-body {
    font-size: clamp(12px, 3.2cqw, 14.5px) !important;
    line-height: 1.45 !important;
  }
  html[data-lang="bn"] .col-intro .c-btn,
  html[data-lang="bn"] .p-intro .c-btn {
    font-size: clamp(12px, 3.4cqw, 15px);
    padding-top: 0.5em;
    padding-bottom: 0.5em;
  }
  html[data-lang="bn"] .col .c-title {
    font-size: clamp(30px, 9vw, 44px) !important;
    line-height: 1.25 !important;
  }
  html[data-lang="bn"] .col .c-sub {
    font-size: clamp(16px, 4.4vw, 19px) !important;
  }
  html[data-lang="bn"] .col .c-p {
    font-size: clamp(14.5px, 4vw, 16.5px) !important;
    line-height: 1.7 !important;
  }
  html[data-lang="bn"] .p-intro .stamp {
    font-size: 2cqw;
  }
}
@media (max-width: 699px) {
  html[data-lang="bn"] .col-intro .c-body {
    font-size: max(13px, 3.2cqw) !important;
  }
  html[data-lang="bn"] .col-intro .c-sub {
    font-size: max(15px, 3.9cqw) !important;
  }
  html[data-lang="bn"] .msg-btn {
    font-size: 24px;
  }
  html[data-lang="bn"] .rsvp-note-a h3 {
    font-size: 24px;
  }
  html[data-lang="bn"] .rsvp-note-b {
    font-size: 24px;
  }
  html[data-lang="bn"] .choice {
    font-size: 15.5px;
  }
  html[data-lang="bn"] .rsvp-or {
    font-size: 14px;
  }
}
html[data-lang="bn"] .modal-note {
  font-size: 12.5px;
}

/* ---------- RSVP: sending state ---------- */
.rsvp-button:disabled {
  opacity: 0.65;
  cursor: progress;
  pointer-events: none;
}