/* Five invitation designs for Denise & Meng Hui.
   Each .d-* class defines the same tokens; the card and the site read only tokens,
   plus a few per-design ornament rules at the bottom. */

.d-ivory {
  --page: #EDE9E2; --paper: #FFFEFB; --paper-2: #F5EFE4;
  --ink: #3F3426; --muted: #7A6A55; --accent: #A8822F; --accent-ink: #FFFDF8;
  --line: #C8A65C; --field: #FFFFFF; --field-line: #D9CBB0;
  --foil: linear-gradient(100deg, #8A6526 0%, #C9A24F 22%, #F1DE9F 42%, #B88A35 60%, #E3C77E 80%, #8F6A2A 100%);
  --f-names: 'Pinyon Script', 'Snell Roundhand', cursive;
  --f-amp: 'Cormorant Garamond', Georgia, serif;
  --f-body: 'Cormorant Garamond', Georgia, serif;
  --f-caps: 'Cormorant Garamond', Georgia, serif;
  --names-size: 15cqw; --names-case: none; --names-track: 0;
  color-scheme: light;
}
.d-silver {
  --page: #E6E8EC; --paper: #FFFFFF; --paper-2: #F1F2F5;
  --ink: #2D323C; --muted: #6A707C; --accent: #7F8692; --accent-ink: #FFFFFF;
  --line: #B4BAC4; --field: #FFFFFF; --field-line: #CDD1D8;
  --foil: linear-gradient(100deg, #5C636E 0%, #9AA1AC 24%, #C4C9D0 42%, #747B87 62%, #A9AFB8 82%, #5F6671 100%);
  --f-names: 'Italiana', 'Didot', Georgia, serif;
  --f-amp: 'Pinyon Script', cursive;
  --f-body: 'Jost', 'Futura', system-ui, sans-serif;
  --f-caps: 'Italiana', 'Didot', Georgia, serif;
  --names-size: 9.6cqw; --names-case: uppercase; --names-track: .1em;
  color-scheme: light;
}
.d-crimson {
  --page: #5C0C0F; --paper: #A3171C; --paper-2: #74100F;
  --ink: #F8E9C8; --muted: #EBCB92; --accent: #D9B25F; --accent-ink: #5A0B0E;
  --line: #D4AA55; --field: #8E1418; --field-line: #C79A48;
  --foil: linear-gradient(100deg, #B8862E 0%, #F3D98B 28%, #FFF1C1 44%, #D2A148 64%, #F0D488 84%, #B07F2A 100%);
  --f-names: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --f-amp: 'Cormorant Garamond', Georgia, serif;
  --f-body: 'Cormorant Garamond', Georgia, serif;
  --f-caps: 'Cinzel', Georgia, serif;
  --names-size: 8.6cqw; --names-case: none; --names-track: .05em;
  color-scheme: dark;
}
.d-emerald {
  --page: #082820; --paper: #0F3D30; --paper-2: #0A2F25;
  --ink: #F0E7D0; --muted: #CBBB8F; --accent: #CDAA5C; --accent-ink: #0A2E24;
  --line: #C3A052; --field: #0C3429; --field-line: #7E6D3E;
  --foil: linear-gradient(100deg, #B8862E 0%, #F3D98B 28%, #FFF1C1 44%, #D2A148 64%, #F0D488 84%, #B07F2A 100%);
  --f-names: 'Marcellus', Georgia, serif;
  --f-amp: 'Poiret One', 'Futura', sans-serif;
  --f-body: 'Jost', 'Futura', system-ui, sans-serif;
  --f-caps: 'Marcellus', Georgia, serif;
  --names-size: 9cqw; --names-case: uppercase; --names-track: .12em;
  color-scheme: dark;
}
.d-blush {
  --page: #EBD8D2; --paper: #FCF3F0; --paper-2: #F4E1DC;
  --ink: #4D393B; --muted: #896D70; --accent: #A5606B; --accent-ink: #FFFFFF;
  --line: #CFA2A7; --field: #FFFDFC; --field-line: #E0C3C3; --sage: #7F9A7A;
  --foil: linear-gradient(100deg, #9C5A63 0%, #D6A0A2 28%, #F2CFC9 44%, #B97A80 64%, #E2B5B2 84%, #985660 100%);
  --f-names: 'Parisienne', cursive;
  --f-amp: 'Cormorant Garamond', Georgia, serif;
  --f-body: 'Cormorant Garamond', Georgia, serif;
  --f-caps: 'Cormorant Garamond', Georgia, serif;
  --names-size: 13cqw; --names-case: none; --names-track: 0;
  color-scheme: light;
}

/* ---------- Card ---------- */
.invite-wrap { container-type: inline-size; width: 100%; }
.invite {
  position: relative; display: flex; aspect-ratio: 5 / 7; overflow: hidden;
  background: radial-gradient(130% 95% at 50% 38%, var(--paper) 0 52%, var(--paper-2) 100%);
  color: var(--ink); font-family: var(--f-body); text-align: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 22px 48px -22px rgba(0,0,0,.45);
}
.inv-frame { position: absolute; inset: 0; pointer-events: none; }
.inv-frame::after { content: ""; position: absolute; }
.inv-c { display: none; position: absolute; pointer-events: none; }
.inv-body {
  position: relative; z-index: 1; flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2.1cqw; padding: 13cqw 12cqw;
}
.inv-body p { margin: 0; }
.inv-orn { color: var(--accent); width: 30cqw; line-height: 0; }
.inv-orn svg { width: 100%; height: auto; display: block; }
.inv-pre { font-size: 3.7cqw; font-style: italic; color: var(--muted); }
.inv-names {
  margin: 1cqw 0; display: flex; flex-direction: column; align-items: center;
  font-family: var(--f-names); font-weight: 400; line-height: 1.05;
  font-size: var(--names-size); text-transform: var(--names-case); letter-spacing: var(--names-track);
}
.inv-names span {
  background: var(--foil); -webkit-background-clip: text; background-clip: text;
  color: transparent; padding: 0 .12em;
}
.inv-names .inv-amp { font-family: var(--f-amp); font-size: .5em; font-style: italic; letter-spacing: 0; text-transform: none; margin: .1em 0; }
.inv-line { font-size: 4.1cqw; font-style: italic; }
.inv-divider { position: relative; width: 30cqw; height: 3cqw; margin: .8cqw 0; }
.inv-divider::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: .25cqw solid var(--line); }
.inv-divider::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 1.8cqw; height: 1.8cqw;
  background: var(--paper); border: .25cqw solid var(--line); transform: translate(-50%, -50%) rotate(45deg);
}
.inv-date { font-family: var(--f-caps); font-size: 5.2cqw; letter-spacing: .04em; }
.inv-time { font-size: 4.2cqw; }
.inv-venue { font-family: var(--f-caps); font-size: 4.6cqw; margin-top: 1.6cqw !important; }
.inv-address { font-size: 3.7cqw; color: var(--muted); }
.inv-rsvp { font-size: 3.4cqw; font-style: italic; color: var(--muted); margin-top: 2.2cqw !important; }

/* ---------- Ivory & Gold Leaf: foil double rule ---------- */
.d-ivory .inv-frame { inset: 4.5cqw; border: .6cqw solid; border-image: var(--foil) 1; }
.d-ivory .inv-frame::after { inset: 1.3cqw; border: .16cqw solid var(--line); }
.d-ivory .inv-orn { width: 34cqw; }

/* ---------- Silver Pearl: arched window ---------- */
.d-silver .inv-frame {
  inset: 6cqw 7cqw; border: .3cqw solid var(--line);
  border-radius: 50cqw 50cqw .6cqw .6cqw / 40cqw 40cqw .6cqw .6cqw;
}
.d-silver .inv-frame::after {
  inset: 1.6cqw; border: .12cqw solid var(--line);
  border-radius: 50cqw 50cqw .4cqw .4cqw / 38cqw 38cqw .4cqw .4cqw;
}
.d-silver .inv-body { padding: 19cqw 14cqw 12cqw; }
.d-silver .inv-orn { width: 6cqw; }
.d-silver .inv-pre, .d-silver .inv-rsvp {
  font-style: normal; font-weight: 400; font-size: 2.7cqw; letter-spacing: .26em; text-transform: uppercase;
}
.d-silver .inv-line, .d-silver .inv-time, .d-silver .inv-address { font-style: normal; font-weight: 300; font-size: 3.5cqw; }
.d-silver .inv-divider { width: 14cqw; }
.d-silver .inv-divider::after { display: none; }

/* ---------- Crimson & Gold: double happiness, lattice corners ---------- */
.d-crimson .invite {
  background:
    repeating-linear-gradient(45deg, rgba(217,178,95,.05) 0 .18cqw, transparent .18cqw 4cqw),
    repeating-linear-gradient(-45deg, rgba(217,178,95,.05) 0 .18cqw, transparent .18cqw 4cqw),
    radial-gradient(120% 90% at 50% 40%, var(--paper) 0 50%, var(--paper-2) 100%);
}
.d-crimson .inv-frame { inset: 4cqw; border: .35cqw solid var(--line); }
.d-crimson .inv-frame::after { inset: 1.3cqw; border: .14cqw solid var(--line); }
.d-crimson .inv-c { display: block; width: 9cqw; height: 9cqw; border-top: .4cqw solid var(--line); border-left: .4cqw solid var(--line); }
.d-crimson .inv-c::after {
  content: ""; position: absolute; top: 1.7cqw; left: 1.7cqw; width: 4cqw; height: 4cqw;
  border-top: .4cqw solid var(--line); border-left: .4cqw solid var(--line);
}
.d-crimson .inv-c1 { top: 7.6cqw; left: 7.6cqw; }
.d-crimson .inv-c2 { top: 7.6cqw; right: 7.6cqw; transform: scaleX(-1); }
.d-crimson .inv-c3 { bottom: 7.6cqw; left: 7.6cqw; transform: scaleY(-1); }
.d-crimson .inv-c4 { bottom: 7.6cqw; right: 7.6cqw; transform: scale(-1, -1); }
.d-crimson .inv-orn { width: auto; line-height: 1; }
.d-crimson .xi {
  font-family: 'Ma Shan Zheng', 'STKaiti', 'KaiTi', serif; font-size: 17cqw; line-height: 1;
  background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.d-crimson .inv-names { font-weight: 600; }
.d-crimson .inv-names .inv-amp { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-size: .7em; }
.d-crimson .inv-divider::after { border-radius: 50%; transform: translate(-50%, -50%); }

/* ---------- Emerald Deco: sunburst, pinstripes, diamond corners ---------- */
.d-emerald .invite {
  background:
    repeating-linear-gradient(90deg, transparent 0 3.6cqw, rgba(205,170,92,.06) 3.6cqw 3.8cqw),
    radial-gradient(120% 90% at 50% 40%, var(--paper) 0 50%, var(--paper-2) 100%);
}
.d-emerald .inv-frame { inset: 4.5cqw; border: .3cqw solid var(--line); }
.d-emerald .inv-frame::after { inset: 1.4cqw; border: .12cqw solid var(--line); }
.d-emerald .inv-c { display: block; width: 2.8cqw; height: 2.8cqw; background: var(--accent); transform: rotate(45deg); }
.d-emerald .inv-c1 { top: 3.25cqw; left: 3.25cqw; }
.d-emerald .inv-c2 { top: 3.25cqw; right: 3.25cqw; }
.d-emerald .inv-c3 { bottom: 3.25cqw; left: 3.25cqw; }
.d-emerald .inv-c4 { bottom: 3.25cqw; right: 3.25cqw; }
.d-emerald .inv-orn { width: auto; }
.d-emerald .sunburst {
  display: block; width: 32cqw; height: 16cqw;
  background:
    radial-gradient(circle at 50% 100%, var(--accent) 0 3.4cqw, var(--paper) 3.5cqw 5cqw, transparent 5.1cqw),
    repeating-conic-gradient(from -90deg at 50% 100%, var(--accent) 0 1.1deg, transparent 1.1deg 9deg);
  -webkit-mask: radial-gradient(circle at 50% 100%, #000 0 15.8cqw, transparent 16cqw);
          mask: radial-gradient(circle at 50% 100%, #000 0 15.8cqw, transparent 16cqw);
}
.d-emerald .inv-pre, .d-emerald .inv-rsvp {
  font-family: 'Poiret One', var(--f-body); font-style: normal; font-size: 3cqw; letter-spacing: .28em; text-transform: uppercase;
}
.d-emerald .inv-line, .d-emerald .inv-time, .d-emerald .inv-address { font-style: normal; font-weight: 300; font-size: 3.5cqw; }
.d-emerald .inv-divider::before { height: .9cqw; transform: translateY(-50%); border-bottom: .25cqw solid var(--line); }
.d-emerald .inv-divider::after { background: var(--accent); }

/* ---------- Blush & Sage: botanical sprigs, rose-gold script ---------- */
.d-blush .inv-frame { inset: 4cqw; border: .22cqw solid var(--line); border-radius: 2.4cqw; }
.d-blush .inv-orn { color: var(--sage); width: 36cqw; }
.d-blush .inv-orn-bottom { transform: rotate(180deg); margin-top: 1cqw; width: 26cqw; }
.d-blush .inv-divider::before { display: none; }
.d-blush .inv-divider::after {
  width: 1.2cqw; height: 1.2cqw; border: 0; border-radius: 50%; background: var(--accent);
  transform: translate(-50%, -50%);
  box-shadow: -3cqw 0 0 var(--line), 3cqw 0 0 var(--line);
}

@media (prefers-reduced-motion: no-preference) {
  .invite .inv-names span { background-size: 200% 100%; animation: foil 9s ease-in-out infinite alternate; }
  @keyframes foil { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
}