/* ──────────────────────────────────────────────────────────────
   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:       #7A5C3E;
  --ink-2:       #6B5640;   /* secondary ink on marigold */
  --maroon:      #3B2E24;
  --maroon-dp:   #2A2019;
  --warm:        #FBF4E6;
  --warm-dim:    #E6D8C2;
  --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, #FBF8F2 0%, #F1E8D8 100%); color: var(--maroon); }
.band.maroon   { background: linear-gradient(180deg, #4A3A2C 0%, #33281F 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%, #55432F 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(26,19,14,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(26,19,14,.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(44,33,24,.68) 0%, rgba(44,33,24,.36) 60%, rgba(44,33,24,0) 100%),
    linear-gradient(180deg, rgba(44,33,24,.34) 0%, rgba(44,33,24,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(36,27,20,.8), 0 1px 3px rgba(36,27,20,.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(36,27,20,.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(36,27,20,.8), 0 1px 3px rgba(36,27,20,.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(36,27,20,1), 0 1px 4px rgba(36,27,20,.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(59,46,36,.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(59,46,36,.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(59,46,36,.4);
  background: transparent; color: var(--maroon);
  transition: border-color .2s ease;
}
textarea { min-height: 86px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #6B5640; 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(36,27,20,.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 ─────────────────────────────────── */
.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); }

/* ── 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: the tall watercolour, shown whole */
@media (max-width: 639px) {
  #cover { height: auto; aspect-ratio: 1125 / 2000; padding-top: 16vw; }
  #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); }
  .shot-bg { display: none; }
}
/* tablet and desktop: the wide watercolour; lettering in the sky */
@media (min-width: 640px) {
  #cover { height: min(56.25vw, 92svh); min-height: 0; padding-top: min(3.4vw, 5svh); }
  #cover .shot { object-fit: cover; object-position: 50% 100%; }
  #cover .cover-mid .names { font-size: clamp(26px, 2.7vw, 50px); }
  #cover .cover-mid .event-en { font-size: clamp(26px, 2.7vw, 50px); }
  #cover .cover-mid .date-line { font-size: clamp(11px, 1vw, 16px); }
  #cover .cover-rule { margin: 6px 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; }

/* soft ivory light behind the cover lettering, so it reads over the watercolour */
#cover::before { background: radial-gradient(75% 26% at 50% 21%, rgba(251,248,242,.82) 0%, rgba(251,248,242,.5) 55%, rgba(251,248,242,0) 100%) !important; }
#cover .cover-mid .event-en { color: var(--maroon); }
@media (min-width: 640px) {
  #cover::before { background: radial-gradient(30% 34% at 50% 20%, rgba(251,248,242,.8) 0%, rgba(251,248,242,.45) 60%, rgba(251,248,242,0) 100%) !important; }
}

/* ── the invitation: a printed card ─────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.invitation { padding-inline: 14px; }
.inv-card {
  position: relative; max-width: 460px; margin: 0 auto; padding: 44px 18px 40px;
  background: #FDFBF6; border: 1px solid rgba(168,132,63,.55);
  box-shadow: 0 18px 40px -22px rgba(44,33,24,.45);
}
.inv-card::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(168,132,63,.3); pointer-events: none; }
.inv-card p { margin: 0; }

/* glossy dark brown: deep chocolate with a soft sheen across it */
.inv-name, .inv-amp, #cover .cover-mid .names, #cover .cover-mid .names .amp {
  background: linear-gradient(100deg, #24150A 0%, #4A2C15 26%, #7A5536 44%, #B08A62 50%, #6E4B2C 57%, #3A2210 80%, #24150A 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#cover .cover-mid .names { text-shadow: none; filter: drop-shadow(0 1px 8px rgba(251,248,242,.9)); }

.inv-bless { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 17px; color: #8A6A2F; }
.inv-rose { display: block; width: 30px; height: 30px; object-fit: contain; margin: 14px auto 20px; }
.inv-hosts { font-family: 'Cinzel', serif; font-weight: 500; font-size: 13px; line-height: 1.9; letter-spacing: .06em; color: var(--maroon); }
.inv-amp { font-family: 'Pinyon Script', cursive; font-size: 40px; line-height: 1.2; margin: 2px 0 !important; }
.inv-line { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 18px; line-height: 1.5; color: var(--ink-2); margin: 20px 0 0 !important; }
.inv-couple-side { margin-top: 26px; }
.inv-name { font-family: 'Pinyon Script', cursive; font-size: clamp(23px, 7.3vw, 38px); line-height: 1.3; white-space: nowrap; padding: 0 4px; }
.inv-sub { font-family: 'Cinzel', serif; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: #8A6A2F; margin-top: 2px !important; }
.inv-when { margin: 28px auto 0; padding: 14px 0 12px; max-width: 300px; border-top: 1px solid rgba(168,132,63,.45); border-bottom: 1px solid rgba(168,132,63,.45); }
.inv-when p { font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: .12em; line-height: 2.1; color: var(--maroon); }
@media (max-width: 359px) { .invitation { padding-inline: 6px; } .inv-card { padding-inline: 8px; } .inv-name { font-size: 22px; } }

/* landscape from 720px */
@media (min-width: 720px) {
  .invitation .inner { max-width: 980px; }
  .inv-card {
    max-width: 900px; padding: 56px 40px; display: grid;
    grid-template-columns: 1fr 1fr; align-items: center;
  }
  .inv-side { padding: 0 28px; }
  .inv-couple-side { margin-top: 0; border-left: 1px solid rgba(168,132,63,.45); }
  .inv-name { font-size: clamp(28px, 3.3vw, 40px); }
  .inv-hosts { font-size: 13.5px; }
}

/* ── invitation: finishing touches ──────────────────────── */
/* gold corner ornaments, on every size */
.inv-card::after {
  content: ""; position: absolute; inset: 14px; pointer-events: none;
  --g: linear-gradient(#B08A3A, #B08A3A);
  background:
    var(--g) top left / 26px 1.5px no-repeat,    var(--g) top left / 1.5px 26px no-repeat,
    var(--g) top right / 26px 1.5px no-repeat,   var(--g) top right / 1.5px 26px no-repeat,
    var(--g) bottom left / 26px 1.5px no-repeat, var(--g) bottom left / 1.5px 26px no-repeat,
    var(--g) bottom right / 26px 1.5px no-repeat,var(--g) bottom right / 1.5px 26px no-repeat;
}

/* phone: compact, so the whole card fits on about one screen */
.inv-time { display: none; }
@media (max-width: 719px) {
  .invitation.band { padding-block: 40px; }
  .inv-card { padding: 34px 20px 30px; }
  .inv-card::after { inset: 12px; }
  .inv-rose { display: none; }
  .inv-bless { font-size: 15px; margin-bottom: 14px !important; }
  .inv-hosts { font-size: 11.5px; line-height: 1.6; letter-spacing: .04em; }
  .inv-amp { font-size: 24px; line-height: 1; margin: 4px 0 !important; }
  .inv-line { font-size: 14.5px; line-height: 1.45; margin-top: 12px !important; }
  .inv-line .br-w { display: none; }
  .inv-couple-side { position: relative; margin-top: 18px; padding-top: 20px; }
  .inv-couple-side::before {
    content: ""; position: absolute; top: 0; left: 50%; width: 130px; height: 7px; transform: translateX(-50%);
    background:
      linear-gradient(90deg, transparent, #B08A3A) left center / 56px 1px no-repeat,
      linear-gradient(270deg, transparent, #B08A3A) right center / 56px 1px no-repeat;
  }
  .inv-couple-side::after {
    content: ""; position: absolute; top: 0; left: 50%; width: 6px; height: 6px; margin-left: -3px; margin-top: .5px;
    background: #B08A3A; transform: rotate(45deg);
  }
  .inv-name { font-size: clamp(22px, 7vw, 32px); line-height: 1.2; }
  .inv-sub { font-size: 9px; }
  .inv-couple-side .inv-amp { font-size: 22px; margin: 2px 0 !important; }
  .inv-when { margin-top: 16px; padding: 9px 0 7px; max-width: 280px; }
  .inv-when p { font-size: 10.5px; line-height: 1.9; letter-spacing: .1em; }
  .inv-time { display: inline; }
  .inv-time-long { display: none; }
}
@media (max-width: 359px) { .inv-card { padding-inline: 12px; } .inv-name { font-size: 21px; } }
@media (min-width: 720px) { .inv-line .br-p { display: none; } }

/* parents side by side: groom's on the left, bride's on the right */
.inv-parents { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.inv-parents .inv-hosts:first-child { text-align: right; }
.inv-parents .inv-hosts:last-child { text-align: left; }
.inv-parents .inv-amp { margin: 0 !important; }
@media (max-width: 359px) { .inv-parents { gap: 6px; } .inv-parents .inv-hosts { font-size: 10.5px; } }
.inv-parents .inv-hosts { white-space: nowrap; }
@media (max-width: 719px) {
  .inv-parents { gap: 8px; }
  .inv-parents .inv-hosts { font-size: clamp(9.5px, 2.9vw, 12px); letter-spacing: .02em; }
  .inv-parents .inv-amp { font-size: 20px; }
}
@media (min-width: 720px) and (max-width: 1099px) { .inv-side { padding: 0 16px; } .inv-parents { gap: 8px; } .inv-parents .inv-hosts { font-size: 11px; letter-spacing: .02em; } }

/* 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.04); } to { transform: scale(1.09); } }

/* closing: the contact follows the rose directly, no extra line */
.closing .contact { margin-top: 30px; padding-top: 0; border-top: 0; }

/* cover lettering: stronger, so it reads clearly over the sky */
#cover::before { background: radial-gradient(60% 40% at 50% 24%, rgba(251,248,242,.88) 0%, rgba(251,248,242,.6) 45%, rgba(251,248,242,0) 100%) !important; }
@media (min-width: 640px) {
  #cover::before { background: radial-gradient(34% 44% at 50% 26%, rgba(251,248,242,.88) 0%, rgba(251,248,242,.6) 45%, rgba(251,248,242,0) 100%) !important; }
}
#cover .cover-mid .names, #cover .cover-mid .names .amp {
  background: linear-gradient(100deg, #1E1108 0%, #3A2210 30%, #6E4B2C 48%, #8E6A45 52%, #4A2C15 62%, #1E1108 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#cover .cover-mid .names { filter: drop-shadow(0 0 6px rgba(251,248,242,.95)) drop-shadow(0 0 14px rgba(251,248,242,.8)); }
#cover .cover-mid .event-en { color: #2E1C0E; text-shadow: 0 0 8px rgba(251,248,242,1), 0 0 18px rgba(251,248,242,.9); }
#cover .cover-mid .date-line { color: #24150A; font-weight: 600; text-shadow: 0 0 8px rgba(251,248,242,1), 0 0 16px rgba(251,248,242,.9); }
#cover .cover-rule i { background: #6E4B2C; height: 1.5px; }
@media (min-width: 640px) {
  #cover::before { background: radial-gradient(30% 36% at 50% 22%, rgba(251,248,242,.92) 0%, rgba(251,248,242,.7) 50%, rgba(251,248,242,0) 100%) !important; }
  #cover .cover-mid .names { font-size: clamp(30px, 3.5vw, 62px); }
  #cover .cover-mid .event-en { font-size: clamp(28px, 3vw, 54px); }
  #cover .cover-mid .date-line { font-size: clamp(12px, 1.15vw, 18px); }
}
@media (min-width: 640px) { #cover { padding-top: min(2.2vw, 3.2svh); } #cover .cover-mid .date-line { margin-top: 10px; } }
@media (min-width: 1000px) { #cover { padding-top: min(5.5vw, 8svh); } }

/* phone: the same landscape layout as desktop, scaled down —
   hosts on the left, the couple and date on the right */
@media (max-width: 719px) {
  .inv-card { display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 30px 10px 28px; }
  .inv-side { padding: 0 8px; }
  .inv-couple-side { margin-top: 0 !important; padding-top: 0 !important; border-left: 1px solid rgba(168,132,63,.45); }
  .inv-couple-side::before, .inv-couple-side::after { display: none; }
  .inv-bless { font-size: 12.5px; line-height: 1.35; margin-bottom: 10px !important; }
  .inv-parents { grid-template-columns: 1fr; gap: 0; }
  .inv-parents .inv-hosts, .inv-parents .inv-hosts:first-child, .inv-parents .inv-hosts:last-child {
    text-align: center; white-space: normal; font-size: clamp(9px, 2.6vw, 11px); line-height: 1.55; letter-spacing: .03em;
  }
  .inv-parents .inv-amp { font-size: 18px; margin: 2px 0 !important; }
  .inv-line { font-size: clamp(11.5px, 3.3vw, 14px); line-height: 1.4; margin-top: 10px !important; }
  .inv-line .br-p { display: none; }
  .inv-name { font-size: clamp(19px, 5.6vw, 26px); white-space: normal; line-height: 1.15; }
  .inv-sub { font-size: 8px; letter-spacing: .14em; }
  .inv-couple-side .inv-amp { font-size: 18px; }
  .inv-when { margin-top: 12px; padding: 7px 0 5px; }
  .inv-when p { font-size: clamp(8.5px, 2.4vw, 10px); letter-spacing: .06em; line-height: 1.7; }
  .inv-time { display: none; }
  .inv-time-long { display: block; }
}
@media (max-width: 719px) {
  .inv-card { padding: 34px 14px 30px; }
  .inv-card::after { inset: 10px; background-size: 16px 1.5px, 1.5px 16px, 16px 1.5px, 1.5px 16px, 16px 1.5px, 1.5px 16px, 16px 1.5px, 1.5px 16px; }
  .inv-side { padding: 0 6px; }
  .inv-when p { font-size: clamp(8px, 2.25vw, 9.5px); letter-spacing: .04em; }
}
@media (max-width: 719px) { .inv-name { font-size: clamp(16px, 4.6vw, 21px); } .inv-sub { font-size: 7px; letter-spacing: .12em; } .inv-couple-side .inv-amp { font-size: 15px; } }

/* ── phone invitation, final: one centred card, read top to bottom ──
   (computers and tablets keep the landscape layout) */
@media (max-width: 719px) {
  .invitation.band { padding-block: 44px; }
  .inv-card { display: block; padding: 36px 18px 32px; }
  .inv-card::after { inset: 10px; background-size: 20px 1.5px, 1.5px 20px, 20px 1.5px, 1.5px 20px, 20px 1.5px, 1.5px 20px, 20px 1.5px, 1.5px 20px; }
  .inv-side { padding: 0; }
  .inv-bless { font-size: 16px; line-height: 1.3; margin-bottom: 14px !important; }
  .inv-rose { display: none; }

  /* parents: groom's family left, bride's family right */
  .inv-parents { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
  .inv-parents .inv-hosts { font-size: clamp(10px, 3vw, 12px); line-height: 1.6; letter-spacing: .03em; white-space: nowrap; }
  .inv-parents .inv-hosts:first-child { text-align: right; }
  .inv-parents .inv-hosts:last-child { text-align: left; }
  .inv-parents .inv-amp { font-size: 22px; margin: 0 !important; }

  .inv-line { font-size: 15px; line-height: 1.45; margin-top: 14px !important; }
  .inv-line .br-w { display: none; }
  .inv-line .br-p { display: inline; }

  /* a small gold divider, then the couple */
  .inv-couple-side { position: relative; border-left: 0 !important; margin-top: 22px !important; padding-top: 24px !important; }
  .inv-couple-side::before, .inv-couple-side::after { display: block !important; }
  .inv-couple-side::before {
    content: ""; position: absolute; top: 0; left: 50%; width: 130px; height: 7px; transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, #B08A3A) left center / 56px 1px no-repeat,
                linear-gradient(270deg, transparent, #B08A3A) right center / 56px 1px no-repeat;
  }
  .inv-couple-side::after {
    content: ""; position: absolute; top: 0; left: 50%; width: 6px; height: 6px; margin: .5px 0 0 -3px;
    background: #B08A3A; transform: rotate(45deg);
  }
  .inv-name { font-size: clamp(24px, 7.4vw, 32px) !important; white-space: nowrap; line-height: 1.25; }
  .inv-sub { font-size: 9px !important; letter-spacing: .16em !important; }
  .inv-couple-side .inv-amp { font-size: 22px !important; margin: 2px 0 !important; }

  .inv-when { margin: 18px auto 0; padding: 9px 0 7px; max-width: 290px; }
  .inv-when p { font-size: 11px !important; letter-spacing: .1em !important; line-height: 1.8; white-space: nowrap; }
}
@media (max-width: 359px) {
  .inv-card { padding-inline: 10px; }
  .inv-parents .inv-hosts { font-size: 9.5px; }
  .inv-name { font-size: 22px !important; }
  .inv-when p { font-size: 10px !important; }
}

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