/* backgrounds — swap these two URLs to drop in real photography instead */

/* ============================================================
   Three concepts — one structure, three visual worlds.
   Concept A (Ivory & Gold) is the :root palette in styles.css.
   B and C only redefine tokens, plus one silhouette change each.
   ============================================================ */

/* ------------------------------------------------------------
   A · Champagne — concept 2's gold-and-contrast character, lifted
   off the dark ground onto the champagne/ivory of her floral board
   ------------------------------------------------------------ */
:root[data-concept="a"]{
  /* Champagne Noir — her board's palette on the black ground she asked for.
     "not باهت (washed out), not مزعج للنظر (harsh)": so a WARM near-black
     rather than #000, and warm ivory rather than #FFF. 16:1, not 21:1.     */
  --cream:#0B0805;
  --ink:#F4E9D4;            /* 16.1:1 on the card — bright without glare */
  --ink-2:#DCCDB0;          /* 12.4:1 */
  --gold-deep:#D9AE5C;      /*  9.4:1 — text-safe on black */
  --gold:#B2813C;           /*  5.6:1 here — her exact gold, and it carries text on black */
  --gold-line:rgba(217,174,92,.42);

  --glass:rgba(255,248,235,.045);
  --glass-2:rgba(255,248,235,.06);
  --glass-brd:rgba(217,174,92,.30);
  --shadow:0 40px 90px -34px rgba(0,0,0,.9);
  --shadow-sm:0 14px 34px -14px rgba(0,0,0,.8);

  --btn-bg:#D9AE5C; --btn-fg:#161009; --btn-bg-hover:#E8C177;
  --inset-bg:rgba(255,245,225,.055);
  --inset-bg-2:rgba(255,245,225,.08);
  --hover-bg:rgba(255,245,225,.11);
  --tint:rgba(217,174,92,.18);
  --check-ico:#2A1E0C;
  --ph:#A2937A;
  --grain:.05;

  --m1:#F4E0AE; --m2:#C99B45; --m3:#FFF6DE;
  --m4:#DCC4A2; --m5:#8A6222; --m6:#E3C88C;
}
:root[data-concept="a"] .bg__photo{background-image:none;opacity:0}
:root[data-concept="a"] .bg__bokeh{opacity:0}
:root[data-concept="a"] .bg__sprig{display:none}
:root[data-concept="a"] .bg__pampas{display:none}
/* the flat ring outline steps aside for the rendered bands */
:root[data-concept="a"] .gate{background:#0A0806}

/* metal stops for the rings ornament, swapped per concept */
:root{
  --m1:#E4C88F; --m2:#A97F41; --m3:#F2E1BC;
  --m4:#B8945F; --m5:#8A6A34; --m6:#DCC393;
}

/* the photographic ground — B and C bring their own */
.bg__photo{position:absolute;inset:0;background-size:cover;background-position:center;
  background-repeat:no-repeat;opacity:0;transition:opacity .8s var(--ease)}

/* ============================================================
   Concept switcher — this is the chooser, not part of the invitation
   ============================================================ */
  font-family:'Jost',system-ui,sans-serif;font-size:.66rem;letter-spacing:.08em;color:#EFE7DA;
  white-space:nowrap;transition:background .3s var(--ease)}
.switch__b i{width:11px;height:11px;border-radius:999px;flex:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.switch__b[aria-pressed="true"]{background:rgba(255,255,255,.16)}
.switch__b:hover{background:rgba(255,255,255,.10)}
.switch__b:focus-visible{outline:2px solid #EFE7DA;outline-offset:2px}

/* the switcher lives in the empty band above the cards, so it never
   covers content at any scroll position */
@media (max-width:980px){
    .screen{padding-top:calc(7.4rem + var(--gut))}
}

@media (max-width:980px){
  .switch__b span{display:none}
  .switch__b{padding:.55rem .6rem}
  .switch__b i{width:13px;height:13px}
}

/* ============================================================
   New sections from the client's brief
   ============================================================ */

/* ---- 1 · the rings, as the opening image ---- */
.gate__rings{width:clamp(150px,24vw,224px);margin-bottom:2.5rem}

/* ---- 2 · both families ---- */
.fam{display:grid;gap:.5rem}
.fam__houses{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(.75rem,3vw,2rem);
  align-items:start;margin:.5rem 0 .25rem}
.fam__amp{align-self:center}
.fam__house{line-height:1.3;text-wrap:balance}
.fam__pre{display:block;font-family:var(--sans);font-size:.76rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:.45rem}
.fam__nm{display:block;font-family:var(--serif);font-weight:600;color:var(--ink);
  font-size:clamp(1.2rem,2.9vw,1.65rem)}
html[dir="rtl"] .fam__pre{letter-spacing:0;text-transform:none;font-size:.92rem}
.fam__amp{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,3vw,1.9rem);
  color:var(--gold-deep)}
.fam__req{margin-top:1.1rem}
.fam__names{font-size:clamp(2.4rem,8vw,4.2rem);margin:.35rem 0 .1rem}
@media (max-width:560px){
  .fam__houses{grid-template-columns:1fr;gap:.35rem}
  .fam__amp{font-size:1.5rem}
}

/* ---- 3 · the journey ---- */
.route{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(.5rem,2vw,1.5rem);margin-top:.5rem}
.stop{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.9rem}
.stop__disc{width:clamp(92px,15vw,128px);aspect-ratio:1;border-radius:999px;display:grid;
  place-items:center;border:1px solid var(--gold-line);background:var(--inset-bg);
  position:relative}
.stop__disc::after{content:'';position:absolute;inset:7px;border-radius:999px;
  border:1px solid var(--gold-line);opacity:.5}
.stop__disc svg{width:clamp(34px,5.5vw,46px);height:auto;color:var(--gold-deep);stroke-width:1.1}
.stop__n{font-family:var(--sans);font-size:.76rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-deep)}
.stop__t{font-family:var(--serif);font-weight:600;font-size:clamp(1.2rem,2.8vw,1.5rem);
  color:var(--ink);line-height:1.25}
.stop__time{font-family:var(--serif);font-weight:600;color:var(--gold-deep);
  font-size:clamp(1.3rem,3vw,1.7rem);font-variant-numeric:lining-nums tabular-nums}
.route__link{width:100%;min-width:64px}
.route__link svg{width:100%;height:auto;color:var(--gold);display:block}
/* `display:block` above out-specifies a bare [hidden]; a stretched vertical
   SVG turns the dashes into a column of blobs, so kill it explicitly. */
.route__link svg[hidden]{display:none}
.route__link .dash{stroke-dasharray:2 12;stroke-linecap:round;fill:none;stroke-width:2.4}
html[dir="rtl"] .stop__n{letter-spacing:0;text-transform:none;font-size:.92rem}
@media (max-width:720px){
  .route{grid-template-columns:1fr;gap:.5rem}
  /* a stretched SVG turns dashes into blobs — draw the vertical run in CSS */
  .route__link{height:76px;display:grid;place-items:center;min-width:0}
  .route__link svg{display:none}
  .route__link::before{content:'';width:3px;height:100%;border-radius:99px;
    background:repeating-linear-gradient(to bottom,var(--gold) 0 3px,transparent 3px 13px)}
}

/* ---- 6 · gifts ---- */
.gift{display:grid;gap:1rem;margin-top:1.75rem}
.gift__row{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;text-align:start;border-radius:16px;padding:1.1rem 1.35rem;
  background:var(--inset-bg-2);border:1px solid var(--glass-brd)}
.gift__label{font-size:.78rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-deep)}
.gift__value{font-family:var(--serif);font-weight:600;font-size:clamp(1.15rem,2.8vw,1.4rem);
  color:var(--ink);margin-top:.25rem;font-variant-numeric:lining-nums tabular-nums;
  direction:ltr;unicode-bidi:isolate}
.gift__act{flex:none}
.copied{color:var(--gold-deep);font-size:.8rem;font-weight:500}
html[dir="rtl"] .gift__label{letter-spacing:0;text-transform:none;font-size:.92rem}
@media (max-width:480px){
  .gift__row{flex-direction:column;align-items:stretch}
  .gift__act,.gift__act .btn{width:100%}
}

/* dried pampas + baby's breath — the Champagne board's botanical.
   Hidden everywhere else; each concept keeps its own ornament. */
.bg__pampas{position:absolute;display:none;width:clamp(190px,26vw,380px)}
.bg__pampas--tl{top:-4%;left:-4%;transform:scaleY(-1) rotate(-8deg)}
.bg__pampas--br{bottom:-4%;right:-4%;transform:scaleX(-1)}
@media (max-width:640px){ .bg__pampas{width:190px;opacity:.24} }

/* the rendered gold bands — only the concept that asked for them shows these */

/* ============================================================
   Champagne Noir · a clean black
   The soft-focus ground and the backdrop blur were what made the
   black read hazy. Both are gone: a flat deep black, and every gold
   line and letter sitting crisply on top of it.
   ============================================================ */
:root[data-concept="a"] .bg{
  background:linear-gradient(180deg,#0A0806 0%,#0C0A07 55%,#100C08 100%)}
:root[data-concept="a"] .glass,
:root[data-concept="a"] .gate,
:root[data-concept="a"] .pill,
:root[data-concept="a"] .music{backdrop-filter:none;-webkit-backdrop-filter:none}
:root[data-concept="a"] .card{border-radius:3px}
:root[data-concept="a"] .day__card,
:root[data-concept="a"] .rsvp__party,
:root[data-concept="a"] .day__note,
:root[data-concept="a"] .gift__row,
:root[data-concept="a"] .stepper,
:root[data-concept="a"] .choice__box,
:root[data-concept="a"] textarea{border-radius:2px}
/* a fine gold rule just inside the card edge — sharp, not a glow */
:root[data-concept="a"] .card{position:relative}
:root[data-concept="a"] .card::before{
  content:'';position:absolute;inset:10px;border:1px solid rgba(217,174,92,.22);
  border-radius:1px;pointer-events:none}

/* switcher swatches — keyed to the concept so the order can change */

/* ============================================================
   RSVP — invited capacity, review summary, action pair.
   All token-driven, so every concept keeps its own colours.
   ============================================================ */
.cap{display:flex;justify-content:center;gap:clamp(1.5rem,6vw,3rem);margin-top:1rem}
.cap__u{text-align:center}
.cap__n{font-family:var(--serif);font-weight:600;line-height:1;color:var(--ink);
  font-size:clamp(1.6rem,4.5vw,2.1rem);
  font-variant-numeric:lining-nums tabular-nums;font-feature-settings:'lnum' 1,'tnum' 1}
.cap__l{font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-deep);margin-top:.5rem}
html[dir="rtl"] .cap__l{letter-spacing:0;text-transform:none;font-size:.86rem}

.notice{border:1px solid var(--gold-line);border-radius:2px;padding:.85rem 1.1rem;
  margin-bottom:1.5rem;font-size:.98rem;color:var(--ink-2);background:var(--inset-bg)}

.sum{text-align:start;margin-top:1.5rem;border-top:1px solid var(--gold-line)}
.sum__row{display:flex;justify-content:space-between;align-items:baseline;gap:1.25rem;
  padding:.9rem .15rem;border-bottom:1px solid var(--gold-line)}
.sum__k{flex:none;font-size:.74rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-deep)}
.sum__v{font-family:var(--serif);font-weight:500;font-size:1.12rem;color:var(--ink);
  text-align:end;font-variant-numeric:lining-nums tabular-nums}
html[dir="rtl"] .sum__k{letter-spacing:0;text-transform:none;font-size:.9rem}

.acts{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:1.85rem}
.acts .btn{width:100%}
@media (max-width:480px){ .acts{grid-template-columns:1fr} }

.done__seal circle{stroke-dasharray:190;stroke-dashoffset:190;animation:draw 1.1s var(--ease) .1s forwards}
.done .sum{margin-top:1.75rem}

/* switcher swatches for the three */

/* ---- the opening card's bouquet ----
   The client's own image, graded into the champagne palette. It arrives on
   pure black, so `screen` composites it with no matte at all: black stays
   exactly the ground, only the flowers add — no cut-out, soft edges intact.
   It hangs off the top-left corner and only its tail enters the card, with
   a mask fading that tail out before it can reach any type. */
:root{ --img-bouquet-card:url('assets/bouquet-card.png'); }
.fam__bloom{display:none}
:root[data-concept="a"] .fam__bloom{
  display:block;position:absolute;pointer-events:none;z-index:0;
  /* centred on the card's top-left corner — half of it inside the card,
     half outside, on both axes. Anchoring by top/left percentages made the
     overlap depend on the card's height, which is why it kept landing on
     the names at one width and floating free at another. */
  top:0;left:0;transform:translate(-50%,-50%);
  width:38%;aspect-ratio:680/1020;
  background-image:var(--img-bouquet-card);background-size:contain;
  background-repeat:no-repeat;background-position:center;
  opacity:.94;
  -webkit-mask-image:radial-gradient(115% 115% at 34% 34%,#000 42%,rgba(0,0,0,.5) 70%,transparent 100%);
          mask-image:radial-gradient(115% 115% at 34% 34%,#000 42%,rgba(0,0,0,.5) 70%,transparent 100%)}
:root[data-concept="a"] #fam-card > :not(.fam__bloom){position:relative;z-index:1}
:root[data-concept="a"][dir="rtl"] .fam__bloom{left:auto;right:0;
  transform:translate(50%,-50%) scaleX(-1);
  -webkit-mask-image:radial-gradient(115% 115% at 34% 34%,#000 42%,rgba(0,0,0,.5) 70%,transparent 100%);
          mask-image:radial-gradient(115% 115% at 34% 34%,#000 42%,rgba(0,0,0,.5) 70%,transparent 100%)}
/* the corner anchor holds at every width; only the size changes */
@media (max-width:900px){ :root[data-concept="a"] .fam__bloom{width:42%} }
@media (max-width:560px){ :root[data-concept="a"] .fam__bloom{width:52%} }

/* ---- the rings photograph, under the opening card only ----
   Graded to a champagne duotone and faded off at every edge, so it never
   reads as a rectangle pasted onto the black. It rides the same .at-first
   class the corner ornaments do, so photo in and ornaments out happen on
   the same half-second. */
:root{ --img-rings:url('assets/bg-rings.jpg'); }
.bg__rings{position:absolute;inset:0;display:none;background-size:cover;
  background-position:50% 46%;background-repeat:no-repeat;
  opacity:0;transition:opacity .6s var(--ease)}
:root[data-concept="a"] .bg__rings{display:block;background-image:var(--img-rings)}
:root[data-concept="a"].at-first .bg__rings{opacity:1}
/* over the photograph the near-transparent card is not enough on its own —
   it takes a scrim so the ivory keeps its contrast */
:root[data-concept="a"].at-first #fam-card{background:rgba(9,7,5,.55)}
#fam-card{transition:background .6s var(--ease)}

/* ---- the corner ornament ----
   The client's ivory roses. It arrives on pure black and lives inside .bg,
   which paints its own ground, so `screen` has a backdrop to blend against
   and drops the black with no matte — a 234KB JPEG rather than a 1.6MB
   alpha PNG. The opening card can't use that trick (it makes its own
   stacking context), so that copy carries a real alpha channel instead. */
:root{ --img-roses:url('assets/bouquet-roses.jpg'); }
.bg__bouquet{position:absolute;display:none;
  background-image:var(--img-roses);background-size:contain;
  background-repeat:no-repeat;background-position:center;
  width:clamp(150px,19vw,268px);aspect-ratio:760/1140;
  mix-blend-mode:screen;opacity:.9;transition:opacity .55s var(--ease)}
.bg__bouquet--tl{top:-4%;left:-4%}
.bg__bouquet--br{bottom:-4%;right:-4%;transform:scaleX(-1)}
:root[data-concept="a"] .bg__bouquet{display:block}
/* the opening card brings its own bouquet — the corners step aside while
   it is on screen, and come back for every other section */
:root[data-concept="a"].at-first .bg__bouquet{opacity:0}
@media (max-width:640px){ .bg__bouquet{width:132px;opacity:.62} }

/* ---- the Whish mark ----
   The brand supplies no dark version and its grey wordmark would sit at
   about 2:1 on this card, so it keeps its own paper under it. */
:root{ --img-whish:url('assets/whish.png'); }
.gift__logo{width:132px;aspect-ratio:1024/246;
  background-image:var(--img-whish);background-size:contain;
  background-repeat:no-repeat;background-position:left center;margin-bottom:.45rem}
html[dir="rtl"] .gift__logo{background-position:right center}

/* ---- reply-by, moved out of the journey and under the RSVP button ---- */
.replyby{display:flex;flex-direction:column;align-items:center;gap:.15rem;
  margin-top:1rem;text-align:center}
.replyby__k{font-family:var(--sans);font-size:.72rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep)}
.replyby__v{font-family:var(--serif);font-weight:600;color:var(--ink-2);
  font-size:1.05rem;font-variant-numeric:lining-nums tabular-nums}
html[dir="rtl"] .replyby__k{letter-spacing:0;text-transform:none;font-size:.9rem}