/* backgrounds — swap these two URLs to drop in real photography instead */
:root{
  --img-midnight:url('assets/bg-midnight.jpg');
  --img-rosewater:url('assets/bg-rosewater.jpg');
  --img-stone:url('assets/bg-stone.jpg');
  --img-velvet:url('assets/bg-velvet.jpg');
}

/* ============================================================
   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.
   ============================================================ */

/* 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)}
:root[data-concept="b"] .bg__photo,
:root[data-concept="c"] .bg__photo,
:root[data-concept="d"] .bg__photo,
:root[data-concept="e"] .bg__photo{opacity:1}
:root[data-concept="b"] .bg__bokeh,
:root[data-concept="c"] .bg__bokeh,
:root[data-concept="d"] .bg__bokeh,
:root[data-concept="e"] .bg__bokeh{opacity:0}

/* ------------------------------------------------------------
   B · Midnight Garden — olive branches at dusk, brass, smoked glass
   ------------------------------------------------------------ */
:root[data-concept="b"]{
  --cream:#071A15;
  --ink:#F2EADC;            /* 14.9:1 on the smoked card */
  --ink-2:#D6CCB8;          /* 11.2:1 */
  --gold-deep:#E0BC72;      /*  9.9:1 — text-safe brass */
  --gold:#C9A227;
  --gold-line:rgba(224,188,114,.34);

  --glass:rgba(6,24,20,.52);
  --glass-2:rgba(6,24,20,.44);
  --glass-brd:rgba(224,188,114,.26);
  --shadow:0 44px 96px -32px rgba(0,0,0,.75);
  --shadow-sm:0 16px 38px -16px rgba(0,0,0,.65);

  --btn-bg:#E0BC72; --btn-fg:#0A1F19; --btn-bg-hover:#EFD08C;
  --inset-bg:rgba(255,255,255,.055);
  --inset-bg-2:rgba(255,255,255,.075);
  --hover-bg:rgba(255,255,255,.10);
  --tint:rgba(224,188,114,.18);
  --ph:#A79C88;
  --grain:.16;

  --m1:#F0DCA8; --m2:#C9A227; --m3:#FFF3D2;
  --m4:#D9B463; --m5:#A8842E; --m6:#EBD49B;
}
:root[data-concept="b"] .bg__sprig{display:none}          /* the ground already has foliage */
/* on a portrait phone the landscape ground crops to its empty centre,
   so bring the drawn branches back to reframe the corners */
@media (max-width:700px){
  :root[data-concept="b"] .bg__sprig{display:block;color:#D9B463;opacity:.40;width:210px}
  :root[data-concept="b"] .bg__photo{background-position:50% 34%}
}
:root[data-concept="b"] .bg__photo{background-image:var(--img-midnight)}
/* a lighter veil on the gate so the garden still reads through it */
:root[data-concept="b"] .gate{background:rgba(5,20,17,.36)}

/* the arch — lifted from the church window in the ceremony icon */
:root[data-concept="b"] .card{
  border-radius:210px 210px 22px 22px;
  padding-top:clamp(3rem,7vw,5rem);
}
:root[data-concept="b"] .day__card{
  border-radius:140px 140px 20px 20px;
  padding-top:clamp(2.5rem,5vw,3.6rem);
}
:root[data-concept="b"] .rsvp__party,
:root[data-concept="b"] .day__note{border-radius:14px}
:root[data-concept="b"] .day__spine{
  background:linear-gradient(180deg,transparent,var(--gold-line) 18%,var(--gold-line) 82%,transparent)}

/* ------------------------------------------------------------
   C · Rosewater — watercolour wash, terracotta rose, pressed card
   ------------------------------------------------------------ */
:root[data-concept="c"]{
  --cream:#F7EFEA;
  --ink:#4A3138;            /* 10.0:1 on the card */
  --ink-2:#6B5259;          /*  6.0:1 */
  --gold-deep:#914F42;      /*  5.2:1 — text-safe terracotta rose */
  --gold:#C99180;
  --gold-line:rgba(201,145,128,.44);

  --glass:rgba(255,252,251,.72);
  --glass-2:rgba(255,252,251,.52);
  --glass-brd:rgba(255,255,255,.88);
  --shadow:0 30px 68px -24px rgba(96,58,52,.40);
  --shadow-sm:0 12px 30px -12px rgba(96,58,52,.32);

  --btn-bg:#4A3138; --btn-fg:#FDF8F6; --btn-bg-hover:#5E3F47;
  --tint:rgba(201,145,128,.16);
  --ph:#B29A96;
  --grain:.22;

  --m1:#F2CDBC; --m2:#B3705E; --m3:#FBE3D8;
  --m4:#C99180; --m5:#96513F; --m6:#E8BCA9;
}
:root[data-concept="c"] .bg__photo{background-image:var(--img-rosewater)}
:root[data-concept="c"] .bg__sprig{color:var(--gold);opacity:.24}

/* pressed-card silhouette: square corners and an inset hairline rule */
:root[data-concept="c"] .card,
:root[data-concept="c"] .day__card{border-radius:4px;position:relative}
:root[data-concept="c"] .card::before,
:root[data-concept="c"] .day__card::before{
  content:'';position:absolute;inset:11px;border:1px solid var(--gold-line);
  border-radius:1px;pointer-events:none}
:root[data-concept="c"] .rsvp__party,
:root[data-concept="c"] .day__note{border-radius:3px}
:root[data-concept="c"] .stepper,
:root[data-concept="c"] .choice__box,
:root[data-concept="c"] textarea{border-radius:3px}


/* ------------------------------------------------------------
   D · Sea & Stone — lime plaster, azure, pewter rings
   ------------------------------------------------------------ */
:root[data-concept="d"]{
  --cream:#E9E2D6;
  --ink:#1E313C;            /* 11.8:1 on the card */
  --ink-2:#465A66;          /*  6.3:1 */
  --gold-deep:#1A5F7A;      /*  6.2:1 — text-safe azure */
  --gold:#4E93A8;
  --gold-line:rgba(78,147,168,.45);

  --glass:rgba(255,253,250,.74);
  --glass-2:rgba(255,253,250,.56);
  --glass-brd:rgba(255,255,255,.9);
  --shadow:0 28px 62px -24px rgba(38,60,72,.36);
  --shadow-sm:0 12px 28px -12px rgba(38,60,72,.30);

  --btn-bg:#1A5F7A; --btn-fg:#FBFDFD; --btn-bg-hover:#134D64;
  --tint:rgba(78,147,168,.16);
  --check-ico:#A6D4E2;
  --ph:#93A3AC;
  --grain:.20;

  --m1:#DCE9EC; --m2:#5E8FA0; --m3:#F2F8F9;
  --m4:#7FB0BF; --m5:#2C6076; --m6:#C7DDE3;
}
:root[data-concept="d"] .bg__photo{background-image:var(--img-stone)}
:root[data-concept="d"] .bg__sprig{color:var(--gold);opacity:.20}

/* a drafted plaque: square-ish, with surveyed corner brackets */
:root[data-concept="d"] .card,
:root[data-concept="d"] .day__card{border-radius:10px;position:relative}
:root[data-concept="d"] .card::before,
:root[data-concept="d"] .day__card::before{
  content:'';position:absolute;inset:14px;pointer-events:none;
  --b:linear-gradient(var(--gold-line),var(--gold-line));
  background:
    var(--b) left  top/26px 1px no-repeat, var(--b) left  top/1px 26px no-repeat,
    var(--b) right top/26px 1px no-repeat, var(--b) right top/1px 26px no-repeat,
    var(--b) left  bottom/26px 1px no-repeat, var(--b) left  bottom/1px 26px no-repeat,
    var(--b) right bottom/26px 1px no-repeat, var(--b) right bottom/1px 26px no-repeat;
}
:root[data-concept="d"] .rsvp__party,
:root[data-concept="d"] .day__note{border-radius:6px}
:root[data-concept="d"] .stepper,
:root[data-concept="d"] .choice__box,
:root[data-concept="d"] textarea{border-radius:6px}

/* ------------------------------------------------------------
   E · Velvet & Garnet — no card at all: the invitation is
   printed on the cloth, inside a gilt frame
   ------------------------------------------------------------ */
:root[data-concept="e"]{
  --cream:#2A0A12;
  --ink:#F6EADA;            /* 11.9:1 on the lit fold */
  --ink-2:#E0CDB6;          /*  9.1:1 */
  --gold-deep:#E5C283;      /*  8.3:1 — text-safe antique gold */
  --gold:#C9A24F;
  --gold-line:rgba(201,162,79,.48);

  --glass:rgba(26,6,12,.58);
  --glass-2:rgba(26,6,12,.52);
  --glass-brd:transparent;
  --shadow:0 0 0 rgba(0,0,0,0);
  --shadow-sm:0 14px 32px -14px rgba(0,0,0,.65);

  --btn-bg:#C9A24F; --btn-fg:#2A0A12; --btn-bg-hover:#DDB865;
  --inset-bg:rgba(255,255,255,.06);
  --inset-bg-2:rgba(255,255,255,.085);
  --hover-bg:rgba(255,255,255,.11);
  --tint:rgba(201,162,79,.18);
  --check-ico:#3A1018;
  --ph:#A8907C;
  --grain:.14;

  --m1:#F3DFAE; --m2:#C9A24F; --m3:#FFF6DC;
  --m4:#DDB865; --m5:#9A7628; --m6:#EFDCA8;
}
:root[data-concept="e"] .bg__photo{background-image:var(--img-velvet)}
:root[data-concept="e"] .bg__sprig{display:none}
:root[data-concept="e"] .card,
:root[data-concept="e"] .day__card{
  border-radius:0;border:none;box-shadow:none;
  -webkit-mask-image:radial-gradient(135% 135% at 50% 50%,#000 64%,transparent 100%);
          mask-image:radial-gradient(135% 135% at 50% 50%,#000 64%,transparent 100%);
}
:root[data-concept="e"] .gate{background:rgba(20,4,9,.46)}
:root[data-concept="e"] .day__note{border:none;box-shadow:none}

/* the gilt frame — sits over the gate too */
.frame{position:fixed;inset:0;z-index:250;pointer-events:none;
  opacity:0;transition:opacity .7s var(--ease)}
:root[data-concept="e"] .frame{opacity:1}
.frame::before,.frame::after{content:'';position:absolute}
.frame::before{inset:14px;border:1px solid rgba(201,162,79,.55)}
.frame::after{inset:21px;border:1px solid rgba(201,162,79,.26)}
@media (max-width:560px){
  .frame::before{inset:9px} .frame::after{inset:15px}
}

/* ============================================================
   Concept switcher — this is the chooser, not part of the invitation
   ============================================================ */
.switch{position:fixed;left:50%;top:.85rem;transform:translateX(-50%);z-index:300;
  display:flex;align-items:center;gap:.2rem;padding:.3rem;border-radius:999px;
  background:rgba(28,22,16,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.16);box-shadow:0 12px 34px -12px rgba(0,0,0,.5);
  max-width:calc(100vw - 1.5rem)}
.switch__b{display:flex;align-items:center;gap:.4rem;padding:.5rem .72rem;border-radius:999px;
  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:nth-child(1) i{background:linear-gradient(135deg,#F6EFE4 46%,#B8945F 46%)}
.switch__b:nth-child(2) i{background:linear-gradient(135deg,#0C2A22 46%,#D9B463 46%)}
.switch__b:nth-child(3) i{background:linear-gradient(135deg,#F6E2DA 46%,#B3705E 46%)}
.switch__b:nth-child(4) i{background:linear-gradient(135deg,#EFEAE0 46%,#1A5F7A 46%)}
.switch__b:nth-child(5) i{background:linear-gradient(135deg,#4A1220 46%,#C9A24F 46%)}
.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){
  .switch{top:3.7rem}
  .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}
}