/* ──────────────────────────────────────────────────────────────
   Proma & Rahat — Holud
   Layout: a maroon card that opens from the middle onto a garden
   cover with the names, the event and the date set together in
   the centre. Below it, bands of marigold and maroon. Nothing is
   boxed on the marigold bands — the type sits straight on the
   colour — and a drawn marigold sits faded behind each one.
   Palette: one ramp, marigold to maroon. Nothing white; the
   lightest ink is a warm apricot.
   Type: Pinyon Script display, Cormorant Garamond body,
   Jost for spaced capitals.
   ────────────────────────────────────────────────────────────── */

:root {
  --marigold:    #D4B45A;
  --marigold-lt: #E2CB7E;
  --marigold-pl: #F2F3DD;
  --marigold-dp: #8A7A2E;
  --clay:        #5E7A34;
  --brick:       #3E5A26;
  --ink-2:       #2F4420;   /* secondary ink on marigold */
  --maroon:      #22331A;
  --maroon-dp:   #162210;
  --warm:        #F3F1DE;
  --warm-dim:    #D6DDB8;
  --col: 540px;
  color-scheme: light;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html { background: var(--maroon); scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--marigold);
  color: var(--maroon);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 17.5px;
  line-height: 1.66;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
img, svg { max-width: 100%; }

/* ── bands ──────────────────────────────────────────────── */
.band { position: relative; padding-block: 78px; overflow: hidden; }
.band > .inner {
  max-width: var(--col); margin: 0 auto; position: relative; z-index: 2;
  padding-left: max(22px, env(safe-area-inset-left, 0px));
  padding-right: max(22px, env(safe-area-inset-right, 0px));
}
.band.marigold { background: linear-gradient(180deg, #A9B86C 0%, #8FA154 100%); color: var(--maroon); }
.band.maroon   { background: linear-gradient(180deg, #2E4320 0%, #213116 100%); color: var(--warm); }
.center { text-align: center; }

/* the drawn marigold, faded behind each band */
.bloom { position: absolute; z-index: 1; pointer-events: none; }
.band.marigold .bloom { opacity: .3; filter: brightness(.42) saturate(1.7); }
.band.maroon   .bloom { opacity: .15; }
.bloom.sway { animation: sway 26s ease-in-out infinite alternate; }
@keyframes sway {
  from { transform: rotate(var(--r, 0deg)) scale(1); }
  to   { transform: rotate(calc(var(--r, 0deg) + 5deg)) scale(1.05); }
}

/* ── type roles ─────────────────────────────────────────── */
.label {
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 11px; letter-spacing: .34em; text-transform: uppercase;
  margin: 0; color: var(--maroon);
}
.maroon .label { color: var(--marigold); }
.script { font-family: 'Pinyon Script', cursive; font-weight: 400; line-height: 1.22; text-wrap: balance; }
h2.script { font-size: clamp(42px, 11vw, 56px); margin: 8px 0 0; color: var(--maroon); }
.maroon h2.script { color: var(--marigold-pl); }
.sub {
  font-family: 'Jost', system-ui, sans-serif; font-size: 12px;
  letter-spacing: .26em; text-transform: uppercase; margin: 14px 0 0; line-height: 2;
  color: var(--ink-2);
}
.maroon .sub { color: var(--warm-dim); }
.lede { font-size: 19px; margin: 20px 0 0; }
.maroon .lede { color: var(--warm-dim); }

.rule { display: flex; align-items: center; justify-content: center; gap: 15px; margin: 28px 0 0; }
.rule i { display: block; height: 1.5px; width: 58px; background: linear-gradient(90deg, transparent, currentColor); opacity: .55; }
.rule i + i { background: linear-gradient(270deg, transparent, currentColor); }
.rule .mg { width: 36px; height: 36px; flex: 0 0 auto; }

/* ── the card opener ────────────────────────────────────── */
/* No background here: the two leaves cover the screen between
   them, so the cover shows through the gap as they part. Give
   the opener a colour and the doors open onto that colour
   instead, and the whole thing just looks like a fade. */
#opener {
  position: fixed; inset: 0; z-index: 100;
  perspective: 1400px; background: transparent;
  transition: opacity .5s ease .75s, visibility .5s ease .75s;
}
#opener.gone { opacity: 0; visibility: hidden; }
.leaf {
  position: absolute; top: 0; bottom: 0; width: 50.4%;
  background: radial-gradient(130% 90% at var(--gx) 50%, #33481F 0%, var(--maroon) 52%, var(--maroon-dp) 100%);
  transition: transform 1.25s cubic-bezier(.62,.02,.3,1);
  backface-visibility: hidden; overflow: hidden;
}
.leaf.left  { left: 0;  transform-origin: left center;  --gx: 100%; }
.leaf.right { right: 0; transform-origin: right center; --gx: 0%; }
#opener.open .leaf.left  { transform: rotateY(-108deg); }
#opener.open .leaf.right { transform: rotateY(108deg); }
.leaf::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 70px;
  background: linear-gradient(90deg, transparent, rgba(212,180,90,.15));
}
.leaf.left::after  { right: 0; }
.leaf.right::after { left: 0; transform: scaleX(-1); }
/* a shadow cast into the opening, so the parting reads as depth */
.leaf { box-shadow: 0 0 0 rgba(10,18,6,0); transition: transform 1.25s cubic-bezier(.62,.02,.3,1), box-shadow 1.25s ease; }
#opener.open .leaf { box-shadow: 0 0 60px 10px rgba(10,18,6,.55); }
.leaf .bloom { opacity: .13; }
.filigree { position: absolute; top: 0; bottom: 0; width: 46px; color: var(--marigold); opacity: .5; z-index: 2; }
.leaf.left .filigree  { right: 14px; }
.leaf.right .filigree { left: 14px; transform: scaleX(-1); }
.filigree svg { height: 100%; width: 100%; }

.seal {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-content: center; justify-items: center; text-align: center;
  padding: 32px max(22px, env(safe-area-inset-left, 0px));
  transition: opacity .45s ease, transform .55s ease;
}
#opener.open .seal { opacity: 0; transform: scale(.88); }
.seal .ring {
  width: 134px; height: 134px; border-radius: 50%;
  border: 1.5px solid var(--marigold); display: grid; place-items: center;
  margin-bottom: 26px; position: relative;
  animation: pulse-ring 3.6s ease-in-out infinite;
}
.seal .ring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; border: 1px dashed rgba(212,180,90,.4); }
@keyframes pulse-ring {
  0%,100% { box-shadow: 0 0 0 0 rgba(212,180,90,.24); }
  50%     { box-shadow: 0 0 0 16px rgba(212,180,90,0); }
}
.seal .ring .mg { width: 80px; height: 80px; animation: spin 46s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.seal-names {
  font-family: 'Pinyon Script', cursive; font-size: clamp(44px, 12vw, 60px);
  color: var(--warm); margin: 0; line-height: 1.05;
}
.seal-names .amp { display: block; font-size: .34em; color: var(--marigold); margin: -2px 0; }
.seal-sub {
  font-family: 'Jost', system-ui, sans-serif; font-size: 11px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--warm-dim); margin: 16px 0 0; line-height: 2;
}
#openBtn {
  margin-top: 30px; min-height: 52px; padding: 0 34px; cursor: pointer;
  background: var(--marigold); color: var(--maroon); border: 0;
  font-family: 'Jost', system-ui, sans-serif; font-size: 11.5px;
  letter-spacing: .28em; text-transform: uppercase;
  transition: background .25s ease, transform .25s ease;
}
#openBtn:hover { background: var(--marigold-lt); transform: translateY(-2px); }
#openBtn:focus-visible { outline: 2px solid var(--warm); outline-offset: 4px; }

/* ── cover ──────────────────────────────────────────────── */
/* Height-driven, never aspect-ratio: a fixed ratio plus a
   max-height makes the browser shrink the WIDTH, which leaves a
   bare strip beside the art on tablets. */
#cover {
  position: relative; background: var(--maroon);
  height: min(88svh, 880px); min-height: 540px;
  overflow: hidden; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
#cover .shot {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 46%;
  filter: blur(18px) saturate(1.12); transform: scale(1.06);
  transition: filter 1.7s ease, transform 1.7s ease;
}
body.opened #cover .shot {
  filter: blur(0) saturate(1); transform: scale(1);
  animation: breathe 34s ease-in-out 2s infinite alternate;
}
@keyframes breathe { from { transform: scale(1); } to { transform: scale(1.06); } }
/* vignette behind the centred type, and a fade into the band below */
#cover::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(70% 58% at 50% 50%, rgba(20,32,12,.68) 0%, rgba(20,32,12,.36) 60%, rgba(20,32,12,0) 100%),
    linear-gradient(180deg, rgba(20,32,12,.34) 0%, rgba(20,32,12,0) 30%);
}
.cover-mid {
  position: relative; z-index: 3; text-align: center; width: 100%;
  display: flex; flex-direction: column; align-items: center;
  padding-left: max(22px, env(safe-area-inset-left, 0px));
  padding-right: max(22px, env(safe-area-inset-right, 0px));
}
.cover-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: grid; align-items: end; justify-items: center; padding-bottom: 34px; }

.names {
  font-family: 'Pinyon Script', cursive; color: var(--warm);
  font-size: clamp(50px, 14vw, 76px); line-height: 1.02; margin: 0;
  text-shadow: 0 2px 24px rgba(16,26,10,.8), 0 1px 3px rgba(16,26,10,.6);
}
.names .amp { display: block; font-size: .33em; margin: -4px 0; color: var(--marigold-lt); }
.cover-rule { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 16px 0 10px; }
.cover-rule i { display: block; height: 1px; width: 54px; background: var(--marigold-pl); opacity: .75; }
.cover-rule .mg { width: 34px; height: 34px; filter: drop-shadow(0 2px 8px rgba(16,26,10,.6)); }
.event-en {
  font-family: 'Pinyon Script', cursive; font-size: clamp(46px, 13vw, 64px);
  color: var(--marigold-pl); margin: 0; line-height: 1.1;
  text-shadow: 0 2px 20px rgba(16,26,10,.8), 0 1px 3px rgba(16,26,10,.6);
}
.date-line {
  font-family: 'Jost', system-ui, sans-serif; font-size: clamp(13px, 3.4vw, 16px); letter-spacing: .26em;
  text-transform: uppercase; color: var(--warm); margin: 16px 0 0; font-weight: 500;
  text-shadow: 0 0 18px rgba(16,26,10,1), 0 1px 4px rgba(16,26,10,.95);
}
.bloom { height: auto; }
img.mg { object-fit: contain; }
.scroll-cue {
  display: block; width: 1.5px; height: 44px;
  background: linear-gradient(var(--marigold-pl), transparent);
  animation: cue 2.6s ease-in-out infinite;
}
@keyframes cue {
  0%,100% { opacity: .25; transform: scaleY(.55); transform-origin: top; }
  50%     { opacity: 1; transform: scaleY(1); }
}

.flies { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.fly {
  position: absolute; bottom: -6%; width: 5px; height: 5px; border-radius: 50%;
  background: #E8E0A6; box-shadow: 0 0 9px 3px rgba(226,203,126,.5);
  animation: rise-fly linear infinite;
}
@keyframes rise-fly {
  0%   { transform: translate3d(0,0,0) scale(.6); opacity: 0; }
  12%  { opacity: .85; }
  80%  { opacity: .5; }
  100% { transform: translate3d(28px,-88svh,0) scale(1); opacity: 0; }
}

/* ── strings of bulbs, spaced to fit the current width ──── */
.lightstring { position: relative; height: 58px; overflow: hidden; }
.lightstring .wire { position: absolute; inset: 0; width: 100%; height: 100%; }
.lightstring .wire path { fill: none; stroke: currentColor; stroke-width: 1.4; opacity: .5; vector-effect: non-scaling-stroke; }
.lightstring .bulbs { position: absolute; inset: 0; }
.bulb {
  position: absolute; width: 11px; height: 13px; margin-left: -5.5px;
  border-radius: 50% 50% 46% 46% / 56% 56% 44% 44%;
  background: currentColor; animation: glow 3.6s ease-in-out infinite;
}
.bulb::before {
  content: ""; position: absolute; left: 50%; top: -4px; width: 3.5px; height: 4px;
  margin-left: -1.75px; background: currentColor; opacity: .75; border-radius: 1px;
}
@keyframes glow {
  0%,100% { opacity: .5; filter: brightness(.92); }
  50%     { opacity: 1; filter: brightness(1.12); }
}

/* ── countdown ──────────────────────────────────────────── */
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 36px; }
.countdown div { position: relative; padding: 4px 2px; }
.countdown div + div::before { content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 1.5px; background: var(--clay); }
.countdown b {
  display: block; font-family: 'Pinyon Script', cursive; font-weight: 400;
  font-size: clamp(36px, 10vw, 50px); color: var(--marigold-pl);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.countdown b.beat { animation: beat .5s ease; }
@keyframes beat { from { transform: translateY(6px); opacity: .4; } to { transform: none; opacity: 1; } }
.countdown span {
  font-family: 'Jost', system-ui, sans-serif; font-size: 9.5px;
  letter-spacing: .24em; text-transform: uppercase; color: var(--marigold); display: block; margin-top: 7px;
}

/* ── venue — no card, type straight on the colour ───────── */
.venue { margin-top: 34px; }
.venue .pin { width: 34px; height: 34px; margin: 0 auto 14px; display: block; fill: none; stroke: var(--maroon); stroke-width: 1.3; }
.venue-name { font-family: 'Pinyon Script', cursive; font-size: clamp(38px, 10vw, 48px); color: var(--maroon); margin: 0; line-height: 1.2; }
.venue-addr { margin: 8px 0 0; color: var(--ink-2); font-size: 16.5px; }
.venue-sub { margin: 2px 0 0; font-family: 'Jost', system-ui, sans-serif; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--clay); }
.venue-note { margin: 18px auto 0; max-width: 34em; font-style: italic; color: var(--maroon); font-size: 17px; line-height: 1.6; }
.map { border-radius: 14px; border: 1.5px solid rgba(34,51,26,.35); margin-bottom: 22px !important; }
.map { position: relative; margin: 26px 0 10px; height: 200px; overflow: hidden; }
.map svg, .map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map .drop { animation: drop 1.4s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes drop {
  0%   { transform: translateY(-24px) scale(.7); opacity: 0; }
  70%  { transform: translateY(2px) scale(1.05); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
.map .ripple { animation: ripple 2.8s ease-out infinite; }
@keyframes ripple { from { r: 5; opacity: .6; } to { r: 28; opacity: 0; } }
.map-note { font-family: 'Jost', system-ui, sans-serif; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 20px; }
.btn-row { display: grid; gap: 11px; }
.btn-solid, .btn-ghost {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 18px; text-decoration: none; cursor: pointer;
  font-family: 'Jost', system-ui, sans-serif; font-size: 11.5px; letter-spacing: .22em;
  text-transform: uppercase; border: 1.5px solid var(--maroon);
  transition: background .25s ease, color .25s ease;
}
.btn-solid { background: var(--maroon); color: var(--marigold-pl); }
.btn-solid:hover { background: var(--maroon-dp); }
.btn-ghost { background: transparent; color: var(--maroon); }
.btn-ghost:hover { background: var(--maroon); color: var(--marigold-pl); }
.btn-solid svg, .btn-ghost svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.btn-solid:focus-visible, .btn-ghost:focus-visible { outline: 2px solid var(--maroon); outline-offset: 3px; }

/* ── order of the day ───────────────────────────────────── */
.timeline { margin-top: 34px; position: relative; display: grid; gap: 18px; }
.timeline::before { content: ""; position: absolute; left: 90px; top: 14px; bottom: 14px; width: 1.5px; background: var(--clay); }
.slot { display: grid; grid-template-columns: 74px 32px 1fr; align-items: start; }
.slot time {
  font-family: 'Jost', system-ui, sans-serif; font-size: 11.5px; letter-spacing: .12em;
  color: var(--marigold); padding-top: 10px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.lantern { position: relative; height: 1px; }
.lantern svg { position: absolute; left: 5px; top: 5px; width: 22px; height: 29px; background: #2E4320; padding: 2px; }
.slot h3 { font-family: 'Pinyon Script', cursive; font-weight: 400; font-size: clamp(26px, 7vw, 32px); overflow-wrap: anywhere; color: var(--marigold-pl); margin: 0; line-height: 1.15; }
.slot time small { display: block; font-size: 10px; letter-spacing: .14em; color: var(--marigold-lt); opacity: .8; margin-top: 3px; text-transform: uppercase; }
.slot p { margin: 4px 0 0; color: var(--warm-dim); font-size: 16.5px; }

/* ── what to wear — no cards ────────────────────────────── */
.swatches { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; justify-content: center; }
.swatch { display: grid; justify-items: center; gap: 8px; width: 92px; }
.swatch img { display: block; width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(34,51,26,.25)); }
.swatch span { font-family: 'Jost', system-ui, sans-serif; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--maroon); text-align: center; line-height: 1.5; }
.wear { display: grid; gap: 34px; margin-top: 38px; }
.wear article { text-align: center; }
.wear h3 { font-family: 'Pinyon Script', cursive; font-weight: 400; font-size: 36px; margin: 0 0 8px; color: var(--maroon); }
.wear p { margin: 0 0 10px; color: var(--ink-2); font-size: 16.5px; }
.wear p:last-child { margin-bottom: 0; }
.avoid { margin: 34px 0 0; font-size: 16.5px; color: var(--maroon); text-align: center; }

/* ── questions ──────────────────────────────────────────── */
.qa { margin-top: 32px; }
.qa-item { border-bottom: 1.5px solid var(--clay); }
.qa-item:first-child { border-top: 1.5px solid var(--clay); }
.qa-q {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 21px 2px; text-align: left; color: var(--marigold-pl);
  font-family: 'Pinyon Script', cursive; font-size: clamp(25px, 6.5vw, 30px); line-height: 1.3;
}
.qa-q:focus-visible { outline: 2px solid var(--marigold); outline-offset: 2px; }
.qa-q .pm { position: relative; flex: 0 0 16px; height: 16px; }
.qa-q .pm::before, .qa-q .pm::after { content: ""; position: absolute; background: var(--marigold); transition: transform .3s ease, opacity .3s ease; }
.qa-q .pm::before { left: 0; top: 7.5px; width: 16px; height: 1.6px; }
.qa-q .pm::after  { left: 7.5px; top: 0; width: 1.6px; height: 16px; }
.qa-q[aria-expanded="true"] .pm::after { transform: rotate(90deg); opacity: 0; }
.qa-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .36s ease; }
.qa-a > div { overflow: hidden; }
.qa-a p { margin: 0 0 21px; color: var(--warm-dim); font-size: 16.5px; }
.qa-item.open .qa-a { grid-template-rows: 1fr; }

/* ── rsvp — no panel, ruled fields on the colour ────────── */
form { display: grid; gap: 22px; margin-top: 36px; }
label.field { display: grid; gap: 6px; }
.cap { font-family: 'Jost', system-ui, sans-serif; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--maroon); }
input, select, textarea {
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 17px;
  padding: 10px 2px; min-height: 46px; width: 100%; border-radius: 0;
  border: 0; border-bottom: 1.5px solid rgba(34,51,26,.4);
  background: transparent; color: var(--maroon);
  transition: border-color .2s ease;
}
textarea { min-height: 86px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #3E5A26; opacity: .75; }
input:focus, select:focus, textarea:focus { border-bottom-color: var(--maroon); }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline: 2px solid var(--maroon); outline-offset: 3px; }
select {
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--maroon) 50%), linear-gradient(135deg, var(--maroon) 50%, transparent 50%);
  background-position: calc(100% - 13px) 21px, calc(100% - 7px) 21px;
  background-size: 6px 6px; background-repeat: no-repeat;
}
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
legend { padding: 0; }
.radios { display: grid; gap: 10px; margin-top: 6px; }
.radios label { display: flex; align-items: center; gap: 11px; font-size: 17px; color: var(--maroon); cursor: pointer; }
/* custom radios — the native ones paint a white disc, and there's
   no white anywhere else on this page */
.radios input {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; min-height: 20px; margin: 0; padding: 0; flex: 0 0 auto;
  border: 1.5px solid var(--maroon); border-radius: 50%;
  background: transparent; display: grid; place-items: center;
}
.radios input::after {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: var(--maroon); transform: scale(0); transition: transform .18s ease;
}
.radios input:checked::after { transform: scale(1); }
.send {
  min-height: 56px; margin-top: 6px; border: 0; cursor: pointer;
  background: var(--maroon); color: var(--marigold-pl);
  font-family: 'Jost', system-ui, sans-serif; font-size: 12px; letter-spacing: .26em; text-transform: uppercase;
  transition: background .25s ease;
}
.send:hover { background: var(--maroon-dp); }
.send[disabled] { opacity: .6; cursor: default; }
.status { min-height: 26px; text-align: center; margin: 0; font-family: 'Pinyon Script', cursive; font-size: 26px; color: var(--maroon); }
.fineprint { font-family: 'Jost', system-ui, sans-serif; font-size: 10.5px; letter-spacing: .1em; color: var(--ink-2); text-align: center; margin: 0; }

/* ── closing ────────────────────────────────────────────── */
.closing { text-align: center; }
.closing .names { font-size: clamp(46px, 13vw, 62px); color: var(--warm); text-shadow: none; margin: 0; }
.closing .names .amp { color: var(--marigold); }
.closing p { color: var(--warm-dim); margin: 16px 0 0; font-size: 16.5px; }
.closing a { color: var(--marigold-lt); text-underline-offset: 4px; }

/* ── sound toggle ───────────────────────────────────────── */
#sound {
  position: fixed; z-index: 40;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 54px; height: 54px; border-radius: 50%; cursor: pointer;
  background: var(--maroon); color: var(--marigold-lt); border: 1.5px solid var(--marigold-dp);
  display: grid; place-items: center; box-shadow: 0 6px 22px rgba(16,26,10,.4);
  transition: transform .25s ease;
}
#sound:hover { transform: scale(1.07); }
#sound:focus-visible { outline: 2px solid var(--warm); outline-offset: 3px; }
#sound svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

/* ── reveal: base state visible, motion replays on entry ── */
.rv.in { animation: rise .95s cubic-bezier(.22,.9,.3,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.d1.in { animation-delay: .09s; }
.d2.in { animation-delay: .18s; }
.d3.in { animation-delay: .27s; }

/* ── tablet ─────────────────────────────────────────────── */
@media (min-width: 640px) {
  :root { --col: 620px; }
  body { font-size: 18.5px; }
  .band { padding-block: 96px; }
  #cover { height: min(86svh, 1000px); }
  #cover .shot { object-position: 50% 48%; }
  .lightstring { height: 68px; }
  .btn-row { grid-template-columns: 1fr 1fr; }
  .wear { grid-template-columns: 1fr 1fr; gap: 28px; }
  .map { height: 240px; }
  .timeline::before { left: 102px; }
  .slot { grid-template-columns: 86px 32px 1fr; }
  .swatch { width: 108px; }
  .swatch img { width: 80px; height: 80px; }
}

/* ── desktop ────────────────────────────────────────────── */
@media (min-width: 1000px) {
  :root { --col: 760px; }
  body { font-size: 19px; }
  .band { padding-block: 112px; }
  #cover { height: min(92svh, 860px); min-height: 520px; }
  #cover .shot { object-position: 50% 52%; }
  .names { font-size: 82px; }
  .event-en { font-size: 66px; }
  .lightstring { height: 80px; }
  .map { height: 300px; }
  .countdown b { font-size: 56px; }
  .countdown span { font-size: 10.5px; }
  .timeline { gap: 22px; }
  .leaf { width: 50.3%; }
  form { max-width: 560px; margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  html { scroll-behavior: auto; }
  .flies { display: none; }
  #cover .shot { transition: filter .3s ease; transform: none; }
  .leaf { transition: opacity .4s ease; }
  #opener.open .leaf { transform: none; opacity: 0; }
}

/* ── invitation from / contact ─────────────────────────── */
.parents { display: grid; gap: 26px; margin: 30px auto 0; max-width: 620px; }
@media (min-width: 640px) { .parents { grid-template-columns: 1fr 1fr; } }
.closing .parents-role { font-family: 'Jost', system-ui, sans-serif; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--marigold); margin: 0; }
.closing .parents-names { font-family: 'Cormorant Garamond', serif; font-size: 21px; color: var(--warm); margin: 8px 0 0; line-height: 1.45; }
.contact { margin: 46px auto 0; padding-top: 30px; border-top: 1px solid rgba(212,180,90,.3); max-width: 420px; }
.closing .contact-name { font-family: 'Cormorant Garamond', serif; font-size: 21px; color: var(--warm); margin: 8px 0 0; }
.closing .contact-rel { font-size: 14px; font-style: italic; margin: 2px 0 0; }
.host-call {
  display: inline-block; margin-top: 12px; font-family: 'Jost', system-ui, sans-serif; font-size: 13px; letter-spacing: .08em;
  color: var(--marigold-lt) !important; text-decoration: none; padding: 7px 16px;
  border: 1px solid rgba(212,180,90,.5); border-radius: 999px;
}
.host-call:hover { background: var(--marigold); color: var(--maroon) !important; }
.closing .thanks { margin: 50px auto 0; max-width: 30em; font-style: italic; font-size: 18px; color: var(--warm); }
.closing .names.together { margin-top: 30px; font-size: clamp(40px, 11vw, 58px); }

/* ── mehendi: the holud layout in greens and gold ─────────── */
.closing .parents { grid-template-columns: 1fr !important; max-width: 360px; }
.wear { grid-template-columns: 1fr !important; max-width: 520px; margin-inline: auto; }
#cover .shot { object-position: 50% 30%; }
@media (max-width: 639px) { .swatch { width: 74px; } .swatch img { width: 56px; height: 56px; } }
.lantern svg { background: none !important; padding: 0 !important; }
#cover .event-en { margin-top: -4px; }

/* order of the day: a plain, centred list */
.day-list { list-style: none; padding: 0; margin: 30px auto 0; max-width: 360px; text-align: center; }
.day-list li { padding: 12px 0; border-bottom: 1px solid rgba(212,180,90,.22); }
.day-list li:last-child { border-bottom: 0; }
.day-list span { font-family: 'Cormorant Garamond', serif; font-size: 22px; color: var(--warm); }
.day-list time { display: block; margin-top: 2px; font-family: 'Jost', system-ui, sans-serif; font-size: 11px; letter-spacing: .18em; color: var(--marigold); }

/* ── the song's seal: bottom corner, the flower turns while playing ── */
.disc {
  position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 50;
  width: 60px; height: 60px; padding: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: var(--maroon); border: 1.5px solid var(--marigold);
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
  -webkit-tap-highlight-color: transparent;
}
.disc::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1px dashed var(--marigold); opacity: .6; }
.disc img { width: 36px; height: 36px; animation: spin 9s linear infinite; animation-play-state: paused; }
.disc.playing img { animation-play-state: running; }
.disc:focus-visible { outline: 2px solid var(--marigold); outline-offset: 3px; }
.disc-tip {
  position: fixed; right: 18px; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 50;
  max-width: 230px; padding: 13px 16px 14px; border-radius: 12px;
  background: var(--warm); color: var(--maroon); border: 1px solid var(--marigold);
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 16px; line-height: 1.35;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .45s ease, transform .45s ease;
}
.disc-tip.show { opacity: 1; transform: none; pointer-events: auto; cursor: pointer; }
.disc-tip::after {   /* little pointer down to the seal */
  content: ""; position: absolute; right: 24px; bottom: -6px; width: 10px; height: 10px;
  background: var(--warm); border-right: 1px solid var(--marigold); border-bottom: 1px solid var(--marigold);
  transform: rotate(45deg);
}
.disc-tip-title {
  display: block; margin-bottom: 3px; font-family: 'Jost', system-ui, sans-serif;
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--marigold-dp);
}
@media (prefers-reduced-motion: reduce) { .disc img { animation: none; } .disc-tip { transition: none; } }