/* ==========================================================================
   Card designs - every template is drawn in CSS + inline SVG.
   No stock photography, no third-party artwork: nothing here needs a licence.

   Sizes use container query units, so one design renders correctly whether it
   is a 200px thumbnail or a 420px editor preview.

   Colour comes from four custom properties set on .card-preview:
     --c-bg  --c-ink  --c-accent  --c-soft
   The ornament SVGs inherit --c-accent through currentColor, so changing the
   palette recolours the artwork too.
   ========================================================================== */

.card-preview{
  container-type:inline-size;
  position:relative;
  aspect-ratio:5/7;                 /* real 5x7in invitation proportions */
  background:var(--c-bg,#fff);
  color:var(--c-ink,#22221f);
  border-radius:3px;
  overflow:hidden;
  box-shadow:var(--shadow-md);
  transition:box-shadow .22s ease, transform .22s ease;
  --name-scale:1;
  --name-fit:1;
}

/* alternate paper sizes offered in the editor */
.card-preview.sz-a5{aspect-ratio:148/210;}
.card-preview.sz-square{aspect-ratio:1/1;}
.card-preview.sz-square .card-body{padding:9cqw 11cqw;}

/* Fit-to-page - see the note in docs.css. A long venue address or an added
   footer line would otherwise be clipped by the card's fixed proportions. */
.card-body{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:11cqw 9cqw;
  gap:2.4cqw;
  width:calc(100% / var(--fit, 1));
  height:calc(100% / var(--fit, 1));
  transform:scale(var(--fit, 1));
  transform-origin:top left;
}

/* ---------- text roles --------------------------------------------------- */

.c-pre, .c-mid, .c-note{
  font-family:'Karla', sans-serif;
  font-size:3.1cqw; line-height:1.5;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--c-soft,var(--c-ink));
  margin:0;
}
.c-mid{letter-spacing:.1em; text-transform:none; font-size:3.3cqw;}
.c-name{
  font-family:'Cormorant Garamond', serif;
  font-size:calc(11cqw * var(--name-scale) * var(--name-fit,1));
  line-height:1.05; font-weight:500;
  margin:1cqw 0; color:var(--c-ink);
}
.c-date{
  font-family:'Karla', sans-serif;
  font-size:3.4cqw; letter-spacing:.24em; text-transform:uppercase;
  color:var(--c-accent); margin:0;
}
.c-venue{
  font-family:'Karla', sans-serif;
  font-size:3cqw; line-height:1.5; color:var(--c-soft,var(--c-ink)); margin:0;
  letter-spacing:.04em;
}
.c-note{
  font-size:2.6cqw; letter-spacing:.14em; opacity:.85;
  margin-top:1.5cqw;
}
.c-note:empty{display:none;}
.c-rule{width:16cqw; height:1px; background:var(--c-accent); opacity:.7; margin:1.5cqw 0;}

/* ---------- typefaces ---------------------------------------------------- */
/* Each face gets its own size, because a script at 11cqw and roman caps at
   11cqw are nowhere near the same optical size. */

.f-cormorant  .c-name{font-family:'Cormorant Garamond', serif;}
.f-playfair   .c-name{font-family:'Playfair Display', serif; font-size:calc(9cqw * var(--name-scale) * var(--name-fit,1));}
.f-bodoni     .c-name{font-family:'Bodoni Moda', serif; font-size:calc(9cqw * var(--name-scale) * var(--name-fit,1));}
.f-libre      .c-name{font-family:'Libre Baskerville', serif; font-size:calc(7.4cqw * var(--name-scale) * var(--name-fit,1));}
.f-marcellus  .c-name{font-family:'Marcellus', serif; font-size:calc(8.6cqw * var(--name-scale) * var(--name-fit,1)); letter-spacing:.03em;}
.f-italiana   .c-name{font-family:'Italiana', serif; font-size:calc(10.5cqw * var(--name-scale) * var(--name-fit,1)); letter-spacing:.04em;}
.f-cinzel     .c-name{font-family:'Cinzel', serif; font-size:calc(7.6cqw * var(--name-scale) * var(--name-fit,1)); letter-spacing:.06em;}
.f-cinzel-dec .c-name{font-family:'Cinzel Decorative', serif; font-size:calc(7.4cqw * var(--name-scale) * var(--name-fit,1)); letter-spacing:.04em;}
.f-script     .c-name{font-family:'Great Vibes', cursive; font-size:calc(13cqw * var(--name-scale) * var(--name-fit,1)); line-height:1.15;}
.f-parisienne .c-name{font-family:'Parisienne', cursive; font-size:calc(12cqw * var(--name-scale) * var(--name-fit,1)); line-height:1.2;}
.f-sacramento .c-name{font-family:'Sacramento', cursive; font-size:calc(13cqw * var(--name-scale) * var(--name-fit,1)); line-height:1.15;}
.f-josefin    .c-name{font-family:'Josefin Sans', sans-serif; font-size:calc(8cqw * var(--name-scale) * var(--name-fit,1)); font-weight:300; letter-spacing:.1em; text-transform:uppercase;}
.f-tenor      .c-name{font-family:'Tenor Sans', sans-serif; font-size:calc(8.2cqw * var(--name-scale) * var(--name-fit,1)); letter-spacing:.08em;}

/* right-to-left faces */
.f-urdu  .c-name{font-family:'Noto Nastaliq Urdu', 'Amiri', serif; font-size:calc(7cqw * var(--name-scale) * var(--name-fit,1)); line-height:1.9;}
.f-amiri .c-name{font-family:'Amiri', serif; font-size:calc(9cqw * var(--name-scale) * var(--name-fit,1));}
.f-naskh .c-name{font-family:'Noto Naskh Arabic', 'Amiri', serif; font-size:calc(8cqw * var(--name-scale) * var(--name-fit,1)); line-height:1.7;}

.f-urdu .c-pre, .f-urdu .c-mid, .f-urdu .c-venue, .f-urdu .c-note{
  font-family:'Noto Nastaliq Urdu', 'Amiri', serif; letter-spacing:0; line-height:2; text-transform:none;
}
.f-amiri .c-pre, .f-amiri .c-mid, .f-amiri .c-venue, .f-amiri .c-note{
  font-family:'Amiri', serif; letter-spacing:.02em; text-transform:none;
}
.f-naskh .c-pre, .f-naskh .c-mid, .f-naskh .c-venue, .f-naskh .c-note{
  font-family:'Noto Naskh Arabic', 'Amiri', serif; letter-spacing:0; line-height:1.9; text-transform:none;
}
.f-urdu .c-date, .f-amiri .c-date, .f-naskh .c-date{font-family:'Amiri', serif; letter-spacing:.06em;}

.card-preview.is-rtl .card-body{direction:rtl;}
.card-preview.is-rtl.d-rule .card-body{text-align:right; padding-right:16cqw; padding-left:9cqw;}
.card-preview.is-rtl.d-rule::before{left:auto; right:7cqw;}

/* ---------- ornament layer ----------------------------------------------- */

.card-art{position:absolute; inset:0; pointer-events:none; color:var(--c-accent);}
.card-art svg{width:100%; height:100%; display:block; position:absolute; inset:0;}
.card-art .art{display:none;}
.card-art .art.is-on{display:block;}
.card-art .s{stroke:currentColor; fill:none; stroke-linecap:round; stroke-linejoin:round;}
.card-art .f{fill:currentColor; stroke:none;}

/* Metallic foil. The line work is warmed with a filter rather than a mixed
   colour, and the gradient is spent where it actually reads: the date and rule.

   Two deliberate choices here keep PNG export working. The text keeps a real
   `color` and is hidden with -webkit-text-fill-color, so an exporter that does
   not understand background-clip renders solid accent text instead of nothing
   at all. And the filter is decoration only, so losing it costs nothing. */
.is-foil .card-art{filter:saturate(1.12) brightness(1.06);}
.is-foil .c-date{
  background:linear-gradient(105deg,
    var(--c-accent) 0%, #fff6d8 38%, var(--c-accent) 62%, var(--c-accent) 100%);
  -webkit-background-clip:text; background-clip:text;
  color:var(--c-accent);
  -webkit-text-fill-color:transparent;
}
.is-foil .c-rule{
  background:linear-gradient(90deg, transparent, var(--c-accent), #fff3cf, var(--c-accent), transparent);
  opacity:1;
}

/* Applied to the clone during PNG export. html2canvas paints a gradient
   background but ignores background-clip:text, which turns foiled text into a
   solid gold bar with the letters knocked out. Dropping back to flat accent
   text for the export is the honest trade. */
.is-exporting .c-date, .is-exporting .ct-award, .is-exporting .ct-date{
  background:none !important;
  color:var(--c-accent) !important;
  -webkit-text-fill-color:var(--c-accent) !important;
}

/* ---------- background treatments ---------------------------------------- */

.bg-grad::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 85% at 50% 0%,
    rgba(var(--c-accent-rgb), 0.13) 0%, transparent 62%);
}
.bg-wash::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(38% 28% at 18% 12%, rgba(var(--c-accent-rgb), 0.22) 0%, transparent 70%),
    radial-gradient(42% 32% at 84% 88%, rgba(var(--c-accent-rgb), 0.17) 0%, transparent 72%);
}
.bg-edge::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(78% 60% at 50% 50%,
    transparent 45%, rgba(var(--c-accent-rgb), 0.15) 100%);
}
/* the wash sits under the ornament and text */
.card-preview::after{z-index:0;}
.card-art{z-index:1;}
.card-body{z-index:2;}

/* Ring ornaments enclose the wording, so the text column has to pull in far
   enough to sit inside the ring rather than crossing it. */
.card-preview[data-art="wreath"],
.card-preview[data-art="mandala"]{--name-fit:0.82;}
.card-preview[data-art="wreath"] .card-body,
.card-preview[data-art="mandala"] .card-body{padding:15cqw 17cqw;}
.card-preview[data-art="wreath"] .c-venue,
.card-preview[data-art="mandala"] .c-venue{font-size:2.7cqw;}
.card-preview[data-art="wreath"] .c-pre,
.card-preview[data-art="mandala"] .c-pre{font-size:2.8cqw;}

/* ---------- layouts ------------------------------------------------------ */

/* d-plain: no CSS decoration at all - the ornament carries the design */

.d-frame .card-body{padding:14cqw 11cqw;}
.d-frame::before{
  content:""; position:absolute; inset:5cqw; z-index:1;
  border:1px solid var(--c-accent); opacity:.55;
}

.d-band::before{
  content:""; position:absolute; top:0; left:0; right:0; height:16cqw; z-index:1;
  background:var(--c-accent);
}
.d-band .card-body{padding-top:24cqw;}

.d-rule::before{
  content:""; position:absolute; top:8cqw; bottom:8cqw; left:7cqw; width:2px; z-index:1;
  background:var(--c-accent); opacity:.8;
}
.d-rule .card-body{align-items:flex-start; text-align:left; padding-left:16cqw; padding-right:9cqw;}
.d-rule .c-rule{margin-left:0;}

.d-solid{--c-soft:rgba(255,255,255,.72);}
.d-solid .card-body{padding:13cqw 10cqw;}

.d-scallop::before{
  content:""; position:absolute; inset:4cqw; z-index:1;
  border:1.5px dashed var(--c-accent); opacity:.5; border-radius:4cqw;
}

.d-brackets .corner{position:absolute; width:13cqw; height:13cqw; z-index:1;
  border:1.5px solid var(--c-accent); opacity:.75;}
.d-brackets .tl{top:5cqw; left:5cqw; border-right:0; border-bottom:0;}
.d-brackets .br{bottom:5cqw; right:5cqw; border-left:0; border-top:0;}

/* inner panel in a slightly different tone */
.d-panel::before{
  content:""; position:absolute; inset:6cqw; z-index:0;
  background:rgba(var(--c-accent-rgb), 0.08);
  border:1px solid rgba(var(--c-accent-rgb), 0.4);
}
.d-panel .card-body{padding:15cqw 12cqw;}

/* A real arch, not just padding. The arched panel is the single most cited
   invitation shape of 2026 - the trade press has it replacing the plain
   rectangle - and this template was named for it while drawing nothing at all:
   it set some padding and left the arch to whichever line ornament happened to
   be switched on. Built from border-radius rather than clip-path or a mask on
   purpose: html2canvas renders border-radius, and the PNG export has to match
   what the reader sees on screen. */
.d-arch::before{
  content:""; position:absolute; z-index:0;
  left:8cqw; right:8cqw; top:6cqw; bottom:6cqw;
  background:rgba(var(--c-accent-rgb), 0.07);
  border:1px solid rgba(var(--c-accent-rgb), 0.38);
  border-radius:50% 50% 2.5cqw 2.5cqw / 32% 32% 2.5cqw 2.5cqw;
}
.d-arch .card-body{padding:23cqw 14cqw 15cqw;}

/* The soft, organic silhouette that runs alongside the arch this year. Same
   construction, ends rounded top and bottom instead of only the top. */
.d-pebble::before{
  content:""; position:absolute; z-index:0;
  left:7cqw; right:7cqw; top:5cqw; bottom:5cqw;
  background:rgba(var(--c-accent-rgb), 0.07);
  border:1px solid rgba(var(--c-accent-rgb), 0.38);
  border-radius:50%/22%;
}
.d-pebble .card-body{padding:20cqw 14cqw;}

/* ==========================================================================
   GREETING CARDS
   Same 5x7 card, different job: one big greeting, a short message, and a
   signature line. Four directions per occasion, because a card for a colleague
   and a card for your mother should not look the same.
   ========================================================================== */

.is-greeting .card-body{justify-content:center; gap:0;}

.g-pre{
  font-family:'Karla', sans-serif;
  font-size:3cqw; letter-spacing:.22em; text-transform:uppercase;
  color:var(--c-soft); margin:0 0 3cqw;
}
.g-pre:empty{display:none;}
.g-title{
  font-family:'Cormorant Garamond', serif;
  font-size:calc(12cqw * var(--name-scale) * var(--name-fit,1));
  line-height:1.05; color:var(--c-ink); margin:0;
}
.g-msg{
  font-family:'Karla', sans-serif;
  font-size:3.1cqw; line-height:1.75; color:var(--c-soft);
  margin:3.5cqw 0 0; max-width:78%;
}
.g-msg:empty{display:none;}
.g-sign{margin-top:auto; padding-top:5cqw;}
.g-to, .g-from{
  font-family:'Karla', sans-serif;
  font-size:2.7cqw; letter-spacing:.14em; text-transform:uppercase;
  color:var(--c-soft); margin:0;
}
.g-to{color:var(--c-accent); margin-bottom:1cqw;}
.g-to:empty, .g-from:empty{display:none;}

/* the greeting takes whichever face is chosen, at a size that suits it */
.is-greeting.f-script .g-title{font-family:'Great Vibes', cursive; font-size:calc(14cqw * var(--name-scale) * var(--name-fit,1)); line-height:1.2;}
.is-greeting.f-parisienne .g-title{font-family:'Parisienne', cursive; font-size:calc(13cqw * var(--name-scale) * var(--name-fit,1)); line-height:1.25;}
.is-greeting.f-sacramento .g-title{font-family:'Sacramento', cursive; font-size:calc(14cqw * var(--name-scale) * var(--name-fit,1)); line-height:1.2;}
.is-greeting.f-cinzel .g-title{font-family:'Cinzel', serif; font-size:calc(8cqw * var(--name-scale) * var(--name-fit,1)); letter-spacing:.05em;}
.is-greeting.f-cinzel-dec .g-title{font-family:'Cinzel Decorative', serif; font-size:calc(7.6cqw * var(--name-scale) * var(--name-fit,1)); letter-spacing:.03em;}
.is-greeting.f-josefin .g-title{font-family:'Josefin Sans', sans-serif; font-size:calc(9cqw * var(--name-scale) * var(--name-fit,1)); font-weight:300; letter-spacing:.08em; text-transform:uppercase;}
.is-greeting.f-tenor .g-title{font-family:'Tenor Sans', sans-serif; font-size:calc(9cqw * var(--name-scale) * var(--name-fit,1)); letter-spacing:.04em;}
.is-greeting.f-marcellus .g-title{font-family:'Marcellus', serif; font-size:calc(9.5cqw * var(--name-scale) * var(--name-fit,1));}
.is-greeting.f-italiana .g-title{font-family:'Italiana', serif; font-size:calc(11cqw * var(--name-scale) * var(--name-fit,1)); letter-spacing:.04em;}
.is-greeting.f-libre .g-title{font-family:'Libre Baskerville', serif; font-size:calc(7.6cqw * var(--name-scale) * var(--name-fit,1));}
.is-greeting.f-playfair .g-title{font-family:'Playfair Display', serif; font-size:calc(9.5cqw * var(--name-scale) * var(--name-fit,1));}
.is-greeting.f-bodoni .g-title{font-family:'Bodoni Moda', serif; font-size:calc(9.5cqw * var(--name-scale) * var(--name-fit,1));}
.is-greeting.f-urdu .g-title{font-family:'Noto Nastaliq Urdu','Amiri',serif; font-size:calc(7.5cqw * var(--name-scale) * var(--name-fit,1)); line-height:1.9;}
.is-greeting.f-amiri .g-title{font-family:'Amiri', serif; font-size:calc(10cqw * var(--name-scale) * var(--name-fit,1));}
.is-greeting.f-naskh .g-title{font-family:'Noto Naskh Arabic','Amiri',serif; font-size:calc(8.5cqw * var(--name-scale) * var(--name-fit,1)); line-height:1.7;}

.is-greeting.f-urdu .g-pre, .is-greeting.f-urdu .g-msg,
.is-greeting.f-amiri .g-pre, .is-greeting.f-amiri .g-msg,
.is-greeting.f-naskh .g-pre, .is-greeting.f-naskh .g-msg{
  text-transform:none; letter-spacing:0; line-height:2;
}

/* --- plain: nothing but type, and room around it ------------------------- */
.g-plain .card-body{padding:14cqw 11cqw;}
.g-plain .c-rule{width:11cqw; margin:3.5cqw 0 0;}

/* --- modern: greeting hard left, a colour band along the foot ------------- */
.g-modern .card-body{
  align-items:flex-start; text-align:left;
  padding:13cqw 10cqw 17cqw;
}
.g-modern .g-msg{max-width:92%;}
.g-modern .c-rule{width:14cqw; height:3px; margin:3.5cqw 0 0; opacity:1;}
.g-modern::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:6cqw;
  background:var(--c-accent); z-index:1;
}
.g-modern .g-sign{padding-bottom:2cqw;}

/* --- soft: a little decoration, script greeting -------------------------- */
.g-soft .card-body{padding:16cqw 13cqw;}
.g-soft .g-msg{max-width:74%;}
.g-soft .c-rule{width:13cqw; margin:3cqw 0 0;}

/* --- rich: framed, decorated, and usually foiled ------------------------- */
.g-rich .card-body{padding:17cqw 13cqw;}
.g-rich::before{
  content:""; position:absolute; inset:5cqw; z-index:1;
  border:1px solid var(--c-accent); opacity:.5;
}
.g-rich::after{
  content:""; position:absolute; inset:6.4cqw; z-index:1;
  border:1px solid var(--c-accent); opacity:.28;
}
.g-rich .g-msg{max-width:72%;}
.g-rich .g-pre{font-size:2.7cqw;}

/* ring ornaments need the wording pulled in, greeting cards included */
.card-preview.is-greeting[data-art="wreath"] .card-body,
.card-preview.is-greeting[data-art="mandala"] .card-body{padding:15cqw 19cqw;}

/* Ornaments that sit at the foot of the card would otherwise run through the
   To / From lines, which are pinned to the bottom. Keyed off data-art so the
   clearance follows whatever ornament the reader picks. */
.card-preview.is-greeting[data-art="botanical"] .card-body,
.card-preview.is-greeting[data-art="flourish"] .card-body,
.card-preview.is-greeting[data-art="bouquet"] .card-body{padding-bottom:21cqw;}

/* ---------- print -------------------------------------------------------- */

@media print{
  .card-preview{box-shadow:none; border:1px solid #ddd;}
}