/* Paper Peace — tampilan undangan. Satu struktur, empat tema lewat variabel. */
.inv {
  --bg: #17332d; --paper: #fbf8f0; --ink: #1d2b27; --accent: #b98a2f; --soft: #e9e2cf; --on-bg: #f6efdc;
  --f-name: "Pinyon Script", cursive; --f-head: "Cormorant Garamond", serif; --f-body: "Cormorant Garamond", serif;
  --name-size: 3.6rem; --body-size: 1.14rem; --radius: 2px; --inv-h: 100svh;
  max-width: 480px; margin: 0 auto; background: var(--paper); color: var(--ink);
  font-family: var(--f-body); font-size: var(--body-size); line-height: 1.6; text-align: center; overflow-wrap: anywhere;
}
.inv.t-senja {
  --bg: #7d2f2a; --paper: #fbf1ec; --ink: #3b1f1c; --accent: #b4553f; --soft: #f1d9cf; --on-bg: #fde9df;
  --f-name: "Italiana", serif; --f-head: "Italiana", serif; --f-body: "Jost", sans-serif;
  --name-size: 3.1rem; --body-size: 1rem; --radius: 999px;
}
.inv.t-samudra {
  --bg: #12314f; --paper: #f2f6f9; --ink: #142a3f; --accent: #3f7ea6; --soft: #d7e4ee; --on-bg: #e6f0f7;
  --f-name: "Playfair Display", serif; --f-head: "Playfair Display", serif; --f-body: "Mulish", sans-serif;
  --name-size: 2.9rem; --body-size: 0.98rem; --radius: 10px;
}
.inv.t-kertas {
  --bg: #ffffff; --paper: #ffffff; --ink: #000000; --accent: #000000; --soft: #e8e8e8; --on-bg: #000000;
  --f-name: "Bodoni Moda", serif; --f-head: "Bodoni Moda", serif; --f-body: "Figtree", sans-serif;
  --name-size: 3.3rem; --body-size: 0.98rem; --radius: 0;
}
.inv *, .inv *::before { box-sizing: border-box; }
.inv p { margin: 0 0 0.6em; }
.inv h2 { font-family: var(--f-head); font-weight: 500; font-size: 1.7rem; line-height: 1.2; margin: 0 0 1rem; }
.inv h3 { font-family: var(--f-head); font-weight: 600; font-size: 1.35rem; line-height: 1.25; margin: 0 0 0.4rem; }

.inv-cover {
  min-height: var(--inv-h); display: grid; place-items: center; padding: 2.5rem 1.5rem;
  background: var(--bg); color: var(--on-bg); position: relative; isolation: isolate;
}
.inv-cover.has-photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.6)), var(--cover) center / cover no-repeat;
}
.inv-cover.has-photo { color: #fff; }
.inv.t-kertas .inv-cover:not(.has-photo) { border: 1px solid #000; outline: 10px solid #fff; outline-offset: -11px; box-shadow: inset 0 0 0 11px #fff, inset 0 0 0 12px #000; }
.inv.t-melati .inv-cover:not(.has-photo) { box-shadow: inset 0 0 0 10px var(--bg), inset 0 0 0 11px var(--accent); }
.inv-kicker { font-size: 0.95em; letter-spacing: 0.04em; opacity: 0.85; }
.inv-names { font-family: var(--f-name); font-weight: 400; font-size: var(--name-size); line-height: 1.05; margin: 0.6rem 0 1rem; display: grid; gap: 0.1em; }
.inv-names i { font-style: normal; font-size: 0.5em; color: var(--accent); }
.inv-cover.has-photo .inv-names i, .inv.t-kertas .inv-names i { color: inherit; }
.inv.t-melati .inv-names i, .inv.t-senja .inv-names i, .inv.t-samudra .inv-names i { color: color-mix(in srgb, var(--on-bg) 70%, var(--accent)); }
.inv-date { font-size: 1.05em; }
.inv-guest { margin: 2.2rem 0 1.2rem; font-size: 0.92em; }
.inv-guest strong { display: block; font-family: var(--f-head); font-size: 1.5em; font-weight: 500; margin-top: 0.2rem; }

.inv-btn, .inv-open {
  display: inline-block; font: inherit; font-size: 0.95em; cursor: pointer; text-decoration: none;
  padding: 0.6em 1.4em; border-radius: var(--radius); border: 1px solid currentColor; background: transparent; color: inherit;
}
.inv-open { background: var(--on-bg); color: var(--bg); border-color: var(--on-bg); }
.inv.t-kertas .inv-open, .inv-btn-solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.inv-cover.has-photo .inv-open { background: #fff; color: #111; border-color: #fff; }
.inv :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.inv-body { display: none; }
.inv.is-open .inv-body { display: block; }
.inv-sec { padding: 3rem 1.6rem; border-bottom: 1px solid var(--soft); }
.inv-orn { color: var(--accent); width: 120px; margin: 0 auto 1.2rem; }
.inv-orn svg { display: block; width: 100%; }
.inv-salam { font-family: var(--f-head); font-size: 1.25em; font-weight: 500; }
.inv-quote { margin: 1.2rem auto; max-width: 32ch; font-style: italic; }
.inv-person h3 { font-size: 1.6rem; font-weight: 500; }
.inv-amp { font-family: var(--f-name); font-size: 2.6rem; line-height: 1.4; color: var(--accent); }
.inv-event { background: var(--soft); padding: 1.6rem 1.2rem; margin-top: 1rem; border-radius: min(var(--radius), 14px); }
.inv.t-kertas .inv-event { background: none; border: 1px solid #000; }
.inv-event-date { font-weight: 600; }
.inv-event-place { font-weight: 600; margin-top: 0.8em !important; }
.inv-event .inv-btn { margin-top: 0.8rem; }
.inv-count-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; max-width: 340px; margin: 0 auto; }
.inv-count-grid b { display: block; font-family: var(--f-head); font-weight: 500; font-size: 2rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.inv-count-grid span { font-size: 0.85em; }
.inv-gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.inv-gallery-grid img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.inv-gallery-grid img:first-child:nth-last-child(odd) { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.inv-story p { text-align: left; max-width: 38ch; margin-inline: auto; }
.inv-gift-card { border: 1px solid var(--accent); padding: 1.2rem; margin-top: 1rem; display: grid; gap: 0.2rem; justify-items: center; border-radius: min(var(--radius), 14px); }
.inv-gift-card b { font-size: 1.4em; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.inv-gift-card .inv-btn { margin-top: 0.6rem; }
.inv-form { display: grid; gap: 0.9rem; text-align: left; }
.inv-form label { display: grid; gap: 0.3rem; font-size: 0.92em; }
.inv-form input, .inv-form select, .inv-form textarea {
  font: inherit; font-family: var(--f-body); color: var(--ink); background: #fff; border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent);
  border-radius: min(var(--radius), 8px); padding: 0.6em 0.75em; width: 100%;
}
.inv-form button { justify-self: center; }
.inv-form-msg { text-align: center; min-height: 1.5em; font-size: 0.92em; }
.inv-wishes { text-align: left; margin-top: 1.5rem; max-height: 420px; overflow-y: auto; }
.inv-wish { padding: 0.9rem 0; border-top: 1px solid var(--soft); }
.inv-wish small { margin-left: 0.5rem; opacity: 0.7; }
.inv-wish p { margin: 0.2rem 0 0; }
.inv-wishes-empty { text-align: center; opacity: 0.7; }
.inv-foot { padding: 3rem 1.6rem 2.5rem; background: var(--bg); color: var(--on-bg); }
.inv.t-kertas .inv-foot { border-top: 1px solid #000; }
.inv-foot .inv-orn { color: inherit; opacity: 0.8; }
.inv-foot-names { font-family: var(--f-name); font-size: 2.2rem; line-height: 1.2; margin-top: 1rem !important; }
.inv-credit { font-size: 0.8rem; opacity: 0.75; margin-top: 1.5rem !important; font-family: "Figtree", sans-serif; }
.inv-credit a { color: inherit; }