/* 5x7in card pages. Used by the editor preview (scaled) and the print page (1:1). */
.card {
  position: relative; width: 5in; height: 7in; overflow: hidden; box-sizing: border-box;
  background: #fff; color: #2b2b2b; font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
  --accent: #b4252a; --ink: #2b2b2b; --panel: #fffdf8; --lead-font: 'Lato', sans-serif; --main-font: 'Caveat', cursive;
}
.card-frame {
  position: absolute; inset: 0.32in; background: var(--panel); border-radius: 0.08in;
  display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0.3in 0.3in 0.25in; box-sizing: border-box;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06);
}
.card-text { width: 100%; }
.card .lead { font-family: var(--lead-font); font-size: 15pt; letter-spacing: .04em; color: var(--ink); line-height: 1.25; }
.card .main { font-family: var(--main-font); font-size: 34pt; color: var(--accent); line-height: 1.1; margin-top: 0.06in; word-wrap: break-word; }
.card-art { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; min-height: 0; margin: 0.12in 0; }
.card-art .emoji { font-family: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif; font-size: 118pt; line-height: 1; }
.card-art img { max-width: 100%; max-height: 100%; object-fit: contain; }
.card-art.art-none { display: none; }
.card-note { font-family: var(--lead-font); font-style: italic; font-size: 10.5pt; color: #555; margin-bottom: 0.1in; line-height: 1.3; width: 100%; }
.card-slot {
  width: 3.5in; height: 2.25in; flex: none; border: 2px dashed rgba(0,0,0,.28); border-radius: 0.12in;
  display: flex; align-items: center; justify-content: center; color: rgba(0,0,0,.4); font-size: 9pt; letter-spacing: .12em; text-transform: uppercase;
}
.card.compact .card-slot { height: 1.9in; }
.card .gift { font-family: var(--lead-font); font-size: 9pt; color: #777; margin-top: 0.08in; letter-spacing: .05em; }

/* corner ornaments drawn with text so they print without any image */
.card .corner { position: absolute; font-family: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif; font-size: 22pt; line-height: 1; }
.card .corner.tl { top: 0.1in; left: 0.1in; } .card .corner.tr { top: 0.1in; right: 0.1in; }
.card .corner.bl { bottom: 0.1in; left: 0.1in; } .card .corner.br { bottom: 0.1in; right: 0.1in; }

/* ---- styles ---- */
.style-confetti { --accent: #b8860b; --main-font: 'Caveat', cursive; background-color: #fff7e6;
  background-image: radial-gradient(#f3c75a 1.4px, transparent 1.6px), radial-gradient(#e2a93b 1.1px, transparent 1.3px), radial-gradient(#f7dc9a 1.8px, transparent 2px);
  background-size: 22px 22px, 31px 31px, 47px 47px; background-position: 0 0, 11px 7px, 5px 19px; }
.style-confetti .card-frame { background: #fffdf8; }

.style-gingham { --accent: #c8362b; --main-font: 'Caveat', cursive; background-color: #fff;
  background-image: repeating-linear-gradient(0deg, rgba(200,54,43,.55) 0 12px, transparent 12px 24px), repeating-linear-gradient(90deg, rgba(200,54,43,.55) 0 12px, transparent 12px 24px); }

.style-candy { --accent: #e63946; --main-font: 'Mountains of Christmas', cursive; --lead-font: 'Lato', sans-serif;
  background: repeating-linear-gradient(45deg, #e63946 0 18px, #fff 18px 36px); }
.style-candy .main { font-weight: 700; font-size: 38pt; }

.style-holly { --accent: #2f6b3a; --main-font: 'Dancing Script', cursive; background-color: #2f6b3a;
  background-image: radial-gradient(rgba(255,255,255,.18) 1.5px, transparent 1.7px); background-size: 18px 18px; }
.style-holly .card-frame { background: #fffef9; }

.style-snow { --accent: #2a5d8f; --main-font: 'Dancing Script', cursive; background-color: #dcecf8;
  background-image: radial-gradient(#fff 2.2px, transparent 2.6px), radial-gradient(#fff 1.4px, transparent 1.7px); background-size: 34px 34px, 21px 21px; background-position: 0 0, 10px 14px; }

.style-kraft { --accent: #7a4b1e; --main-font: 'Caveat', cursive; background-color: #cfa96f;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 2px, transparent 2px 6px), repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 1px, transparent 1px 9px); }
.style-kraft .card-frame { background: #fbf6ec; border: 2px dashed #9a7447; }

.style-plaid { --accent: #b4252a; --main-font: 'Playfair Display', serif; background-color: #b4252a;
  background-image: linear-gradient(90deg, rgba(0,0,0,.55) 50%, transparent 50%), linear-gradient(rgba(0,0,0,.55) 50%, transparent 50%);
  background-size: 48px 48px; }
.style-plaid .card-frame { background: #fffaf5; }
.style-plaid .main { font-weight: 700; font-size: 28pt; font-style: italic; }

.style-stars { --accent: #c9a227; --ink: #1e2a4a; --main-font: 'Dancing Script', cursive; background-color: #1e2a4a;
  background-image: radial-gradient(#f3d27a 1.5px, transparent 1.8px), radial-gradient(#fff 1px, transparent 1.2px); background-size: 40px 40px, 27px 27px; background-position: 0 0, 13px 19px; }
.style-stars .card-frame { background: #fffdf4; }

.style-botanical { --accent: #4f6f4a; --main-font: 'Playfair Display', serif; background-color: #e7eee3;
  background-image: radial-gradient(#9fb897 1.6px, transparent 1.9px); background-size: 26px 26px; }
.style-botanical .main { font-style: italic; font-size: 28pt; }
.style-botanical .card-frame { background: #fff; border: 1px solid #b7c9b0; }

.style-peppermint { --accent: #d8456f; --main-font: 'Mountains of Christmas', cursive;
  background: repeating-linear-gradient(-45deg, #f6b5c5 0 16px, #fff 16px 32px); }
.style-peppermint .main { font-weight: 700; font-size: 38pt; }

/* ---- cover & closing pages ---- */
.card.cover .card-frame, .card.closing .card-frame { justify-content: center; gap: 0.15in; }
.card.cover .cover-kicker { font-family: var(--lead-font); font-size: 11pt; letter-spacing: .25em; text-transform: uppercase; color: #777; }
.card.cover .cover-title { font-family: 'Mountains of Christmas', cursive; font-weight: 700; font-size: 40pt; line-height: 1.05; color: var(--accent); }
.card.cover .cover-name { font-family: var(--main-font); font-size: 30pt; color: var(--ink); line-height: 1.1; }
.card.cover .cover-art { font-family: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif; font-size: 64pt; line-height: 1; margin: 0.1in 0; }
.card.cover .cover-art img { max-height: 2.4in; max-width: 3.6in; object-fit: contain; }
.card.cover .cover-from { font-family: var(--lead-font); font-size: 13pt; color: #555; }
.card.closing .closing-title { font-family: var(--main-font); font-size: 34pt; color: var(--accent); line-height: 1.1; }
.card.closing .closing-note { font-family: 'Playfair Display', serif; font-style: italic; font-size: 13pt; line-height: 1.5; color: #444; white-space: pre-wrap; padding: 0 0.1in; }
.card.closing .closing-art { font-family: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif; font-size: 48pt; line-height: 1; }
.card.closing .closing-art img { max-height: 2.2in; max-width: 3.6in; object-fit: contain; }
.card.closing .closing-sign { font-family: var(--lead-font); font-size: 10pt; letter-spacing: .15em; text-transform: uppercase; color: #888; }