/* ──────────────────────────────────────────────────────────────
   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:    #C9A45C;
  --marigold-lt: #E2C88E;
  --marigold-pl: #FFF8EA;
  --marigold-dp: #A8843F;
  --clay:        #A8843F;
  --brick:       #7A5C24;
  --ink-2:       #6E5530;   /* secondary ink on marigold */
  --maroon:      #5C4418;
  --maroon-dp:   #3F2E0E;
  --warm:        #FBF4E6;
  --warm-dim:    #F6EEDC;
  --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, #FFFFFF 0%, #F8F4EA 100%); color: var(--maroon); }
.band.maroon   { background: linear-gradient(180deg, #BC9644 0%, #9E7A2E 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%, #C9A452 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(201,164,92,.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(40,29,8,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(40,29,8,.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(201,164,92,.4); }
@keyframes pulse-ring {
  0%,100% { box-shadow: 0 0 0 0 rgba(201,164,92,.24); }
  50%     { box-shadow: 0 0 0 16px rgba(201,164,92,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(66,48,14,.68) 0%, rgba(66,48,14,.36) 60%, rgba(66,48,14,0) 100%),
    linear-gradient(180deg, rgba(66,48,14,.34) 0%, rgba(66,48,14,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(58,42,12,.8), 0 1px 3px rgba(58,42,12,.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(58,42,12,.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(58,42,12,.8), 0 1px 3px rgba(58,42,12,.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(58,42,12,1), 0 1px 4px rgba(58,42,12,.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: #E8D3A0; box-shadow: 0 0 9px 3px rgba(226,200,142,.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; }
}

/* ── 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 { position: relative; margin: 26px 0 22px; height: 200px; overflow: hidden; border-radius: 14px; border: 1.5px solid rgba(92,68,24,.35); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.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; }

/* ── 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: 74px; }
.swatch img { display: block; width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(92,68,24,.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(92,68,24,.4);
  background: transparent; color: var(--maroon);
  transition: border-color .2s ease;
}
textarea { min-height: 86px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #B08A3A; 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(58,42,12,.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%; }
  .btn-row { grid-template-columns: 1fr 1fr; }
  .wear { grid-template-columns: 1fr 1fr; gap: 28px; }
  .map { height: 240px; }
  .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; }
  .map { height: 300px; }
  .countdown b { font-size: 56px; }
  .countdown span { font-size: 10.5px; }
  .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(201,164,92,.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(201,164,92,.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); }

/* ── order of the day: journey row + the day's moments ─── */
.journey-band { border-top: 1px solid rgba(201,164,92,.35); }
.journey { list-style: none; padding: 0; margin: 34px auto 0; display: grid; gap: 26px; max-width: 520px; }
@media (min-width: 640px) { .journey { grid-template-columns: repeat(3, 1fr); gap: 10px; } .journey li + li { border-left: 1px solid rgba(201,164,92,.45); } }
.journey li { display: grid; justify-items: center; gap: 4px; padding: 0 8px; }
.journey b { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 52px; line-height: 1; color: var(--maroon); }
.journey small { font-family: 'Jost', system-ui, sans-serif; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--clay); }
.journey span { font-family: 'Cormorant Garamond', serif; font-size: 18px; color: var(--ink-2); margin-top: 4px; }

.day-mark { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 30px 0 10px; }
.day-mark i { height: 1px; width: 60px; background: linear-gradient(90deg, transparent, var(--marigold)); }
.day-mark i:last-child { transform: scaleX(-1); }
.day-mark img { width: 30px; height: 30px; object-fit: contain; }
.day-name { text-align: center; font-family: 'Jost', system-ui, sans-serif; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--marigold); margin: 0; }

.moments { list-style: none; padding: 0; margin: 26px auto 0; max-width: 420px; }
.moments li {
  display: grid; grid-template-columns: 92px 1fr; align-items: baseline; gap: 18px;
  padding: 14px 4px; border-bottom: 1px solid rgba(201,164,92,.22);
}
.moments li:last-child { border-bottom: 0; }
.moments time { text-align: right; font-family: 'Jost', system-ui, sans-serif; font-size: 12px; letter-spacing: .14em; color: var(--marigold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.moments span { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 500; color: var(--warm); letter-spacing: .01em; }

/* gold for small headings on the white bands */
.band.marigold .label, .band.marigold .venue-sub { color: var(--clay); }

/* ── vows cover ─────────────────────────────────────────
   One picture per screen shape (phone, tablet, desktop). The cover
   takes that picture's shape, so nothing important is cropped, and
   the red lettering sits in the open sky above the couple. */
#cover::before { background: none; }
#cover { justify-content: flex-start; min-height: 0; }
#cover .shot { object-fit: cover; }
#cover .cover-mid .names { color: var(--maroon); text-shadow: 0 1px 14px rgba(255,248,234,.8); }
#cover .cover-mid .names .amp { color: var(--marigold-dp); }
#cover .cover-mid .event-en { color: var(--brick); text-shadow: 0 1px 14px rgba(255,248,234,.8); }
#cover .cover-mid .date-line { color: var(--maroon); text-shadow: 0 0 12px rgba(255,248,234,.9); }
#cover .cover-rule i { background: var(--marigold-dp); }
#cover .scroll-cue { background: linear-gradient(var(--maroon), transparent); }

/* phone: tall picture */
@media (max-width: 639px) {
  #cover { height: auto; aspect-ratio: 941 / 1421; padding-top: 20vw; }
  #cover .shot { object-position: 50% 100%; }
  #cover .cover-mid .names { font-size: clamp(30px, 8.6vw, 52px); }
  #cover .cover-mid .event-en { font-size: clamp(32px, 9vw, 56px); }
  #cover .cover-rule { margin: 8px 0 6px; }
  #cover .cover-mid .date-line { font-size: clamp(12px, 3.2vw, 16px); }
}
/* tablet: 4:3 picture */
@media (min-width: 640px) and (max-width: 999px) {
  #cover { height: auto; aspect-ratio: 1448 / 1086; padding-top: 3vw; }
  #cover .shot { object-position: 50% 100%; }
  #cover .cover-mid .names { font-size: clamp(34px, 5.2vw, 50px); }
  #cover .cover-mid .event-en { font-size: clamp(32px, 5vw, 46px); }
  #cover .cover-rule { margin: 8px 0 4px; }
}
/* desktop: wide picture, never taller than the screen */
@media (min-width: 1000px) {
  #cover { height: min(56.3vw, 92svh); padding-top: min(3vw, 5svh); }
  #cover .shot { object-position: 50% 80%; }
  #cover .cover-mid .names { font-size: clamp(36px, 3.6vw, 58px); }
  #cover .cover-mid .event-en { font-size: clamp(32px, 3.2vw, 50px); }
  #cover .cover-rule { margin: 8px 0 4px; }
}

#cover .cover-mid .names { line-height: 1.1; }
#cover .cover-mid .names .amp { font-size: .85em; margin: 2px 0 0; line-height: 1.1; }
#cover .cover-rule i { width: 120px; }

/* ── nikah ───────────────────────────────────────────────── */
.closing .parents { grid-template-columns: 1fr !important; max-width: 360px; }
/* the whole picture, shown as it is (it is nearly 4:5) */
#cover { height: auto !important; aspect-ratio: 1199 / 1312; padding-top: 12vw !important; }
#cover .shot { object-fit: cover !important; object-position: 50% 100%; }
.shot-bg { display: none; }
#cover::before { background: radial-gradient(70% 30% at 50% 20%, rgba(255,250,240,.75) 0%, rgba(255,250,240,.4) 55%, rgba(255,250,240,0) 100%) !important; }
@media (min-width: 640px) {
  /* computers: the whole picture centred, a soft blurred copy at the sides */
  #cover { aspect-ratio: auto; height: min(92svh, 1100px) !important; padding-top: 6svh !important; }
  #cover .shot { object-fit: contain !important; }
  .shot-bg { display: block; position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(26px) brightness(1.02); }
  #cover::before { background: radial-gradient(28% 30% at 50% 22%, rgba(255,250,240,.75) 0%, rgba(255,250,240,.4) 55%, rgba(255,250,240,0) 100%) !important; }
  #cover .cover-mid .names { font-size: clamp(30px, 3.6svh, 46px) !important; }
  #cover .cover-mid .event-en { font-size: clamp(28px, 3.4svh, 42px) !important; }
}
@media (max-width: 639px) {
  #cover { padding-top: 6vw !important; }
  #cover .cover-mid .names { font-size: clamp(24px, 7vw, 40px) !important; }
  #cover .cover-mid .event-en { font-size: clamp(24px, 7vw, 40px) !important; }
  #cover .cover-rule { margin: 4px 0 2px !important; }
  #cover .cover-mid .date-line { margin-top: 8px !important; }
}

/* gold and white only: white lettering on the gold sections */
.band.maroon .label, .band.maroon .sub, .band.maroon .moments time, .band.maroon .countdown span,
.closing .parents-role, .closing .label { color: #FFF8EA !important; }
.band.maroon .countdown div + div { border-color: rgba(255,248,234,.6) !important; }
.band.maroon .moments li { border-color: rgba(255,248,234,.35) !important; }
.closing .host-call { color: #FFF8EA !important; border-color: rgba(255,248,234,.7) !important; }

/* the cover picture stays sharp once the card is open */
body.opened #cover .shot { filter: none; animation-name: breathe-soft; }
@keyframes breathe-soft { from { transform: scale(1.03); } to { transform: scale(1.08); } }


/* computers: the wide picture fills the cover; lettering centred over the couple */
@media (min-width: 640px) {
  #cover { aspect-ratio: auto !important; height: min(56.25vw, 92svh) !important; }
  #cover .shot { object-fit: cover !important; object-position: 50% 55% !important; }
  .shot-bg { display: none !important; }
  #cover .cover-mid .names { font-size: clamp(30px, 3.3vw, 56px) !important; }
  #cover .cover-mid .event-en { font-size: clamp(28px, 3vw, 50px) !important; }
  #cover::before { background: radial-gradient(30% 34% at 50% 22%, rgba(255,250,240,.8) 0%, rgba(255,250,240,.45) 55%, rgba(255,250,240,0) 100%) !important; }
}

/* glossy gold foil on the couple's names, with a slow moving shine */
#cover .cover-mid .names, #cover .cover-mid .names .amp {
  background: linear-gradient(105deg, #5E420F 0%, #8C6A24 22%, #B8923C 34%, #E2C677 40%, #B8923C 46%, #7A5A1C 62%, #A98434 78%, #D4B465 84%, #7A5A1C 100%) !important;
  background-size: 250% 100% !important;
  -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important;
  animation: foil 6s ease-in-out infinite alternate;
}
#cover .cover-mid .names { text-shadow: none !important; filter: drop-shadow(0 0 6px rgba(255,250,240,.95)) drop-shadow(0 3px 10px rgba(140,106,36,.25)); }
@keyframes foil { from { background-position: 100% 0; } to { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) { #cover .cover-mid .names, #cover .cover-mid .names .amp { animation: none; } }
@media (min-width: 640px) and (max-width: 999px) { #cover { padding-top: 2.5vw !important; } #cover .cover-mid .names { font-size: 26px !important; } #cover .cover-mid .event-en { font-size: 24px !important; } #cover .cover-rule { margin: 4px 0 2px !important; } #cover .cover-mid .date-line { margin-top: 6px !important; font-size: 11px; } }

/* ── 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; } }