/* Arabesk: lengkung jendela Maroko, lampion gantung, pola ubin */
:root {
  --deep: #173a6b; --gold: #e1b866;
  --bg: #f7f3ea; --bg-alt: #ece5d4; --ink: #1a2a44; --muted: #5d6475; --accent: #1f4f8f; --card: #fffcf5;
  --line: color-mix(in srgb, var(--gold) 50%, transparent);
  --tile: radial-gradient(circle at 50% 50%, transparent 30%, color-mix(in srgb, var(--gold) 16%, transparent) 31%, transparent 33%) 0 0 / 40px 40px,
          radial-gradient(circle at 0 0, transparent 30%, color-mix(in srgb, var(--gold) 12%, transparent) 31%, transparent 33%) 0 0 / 40px 40px;
  --cover-bg: var(--tile), linear-gradient(180deg, color-mix(in srgb, var(--deep) 85%, #fff), var(--deep) 60%, color-mix(in srgb, var(--deep) 75%, #000));
  --cover-ink: #fff;
  --f-display: "Reem Kufi", "Trebuchet MS", sans-serif;
  --f-script: "Reem Kufi", "Trebuchet MS", sans-serif;
  --f-body: "Lora", Georgia, serif;
  --title-size: clamp(2.6rem, 11vw, 3.7rem);
  --r: 14px;
}
.inv-orn-top { width: min(200px, 64%); margin-top: -10px; }
.inv-cover .inv-orn, .inv-aside .inv-orn, .inv-cover .inv-label, .inv-aside .inv-label { color: var(--gold); }
.inv-title { font-weight: 600; }
.inv-cover .inv-title, .inv-aside .inv-title { color: #fff; }
.inv-cover-inner, .inv-aside-inner {
  padding: 26px 24px 34px; background: color-mix(in srgb, var(--deep) 88%, transparent);
  border: 2px solid var(--gold); border-radius: 50% 50% 14px 14px / 120px 120px 14px 14px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--deep) 88%, transparent), 0 0 0 7px var(--line);
}
.inv-guest { background: color-mix(in srgb, #fff 8%, transparent); border-color: var(--line); }
.inv-cover .inv-btn { background: var(--gold); border-color: var(--gold); color: var(--deep); }
.inv-bismillah { color: var(--accent); }
.inv-main .inv-title, .inv-sec-title, .inv-name { color: var(--deep); font-weight: 600; }
.inv-card { border: 1px solid var(--line); border-radius: 120px 120px var(--r) var(--r) / 50px 50px var(--r) var(--r); padding-top: 40px; }
.inv-gift, .inv-form { border-radius: var(--r); padding-top: 26px; }
.inv-sec:nth-of-type(even) { background: var(--tile), var(--bg-alt); }
.inv-avatar { border-radius: 999px 999px 18px 18px; width: 160px; height: 200px; box-shadow: 0 0 0 2px var(--gold), 0 0 0 7px var(--bg), 0 0 0 8px var(--line); }
.inv-nav { background: color-mix(in srgb, var(--deep) 96%, transparent); }
.inv-nav a { color: color-mix(in srgb, #fff 70%, var(--deep)); }
.inv-nav a.is-active { color: var(--gold); }